diff --git a/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx b/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx index d212ab4a..9c4bf2bf 100644 --- a/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx +++ b/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx @@ -32,6 +32,7 @@ import CopyToClipboard from "@app/components/CopyToClipboard"; import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert"; import { InfoIcon } from "lucide-react"; import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert"; +import { OlmInstallCommands } from "@app/components/olm-install-commands"; export default function CredentialsPage() { const { env } = useEnvContext(); @@ -204,6 +205,12 @@ export default function CredentialsPage() { )} + + ; - windows: Record; - docker: Record; -}; - -const platforms = ["unix", "docker", "windows"] as const; - -type Platform = (typeof platforms)[number]; - export default function Page() { const { env } = useEnvContext(); const api = createApiClient({ env }); @@ -113,13 +88,9 @@ export default function Page() { const [loadingPage, setLoadingPage] = useState(true); - const [platform, setPlatform] = useState("unix"); - const [architecture, setArchitecture] = useState("All"); - const [commands, setCommands] = useState(null); - const [olmId, setOlmId] = useState(""); const [olmSecret, setOlmSecret] = useState(""); - const [olmCommand, setOlmCommand] = useState(""); + const [olmVersion, setOlmVersion] = useState("latest"); const [createLoading, setCreateLoading] = useState(false); const [showAdvancedSettings, setShowAdvancedSettings] = useState(false); @@ -127,136 +98,6 @@ export default function Page() { const [clientDefaults, setClientDefaults] = useState(null); - const hydrateCommands = ( - id: string, - secret: string, - endpoint: string, - version: string - ) => { - const commands = { - unix: { - All: [ - { - title: t("install"), - command: `curl -fsSL https://static.pangolin.net/get-olm.sh | bash` - }, - { - title: t("run"), - command: `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}` - } - ] - }, - windows: { - x64: [ - { - title: t("install"), - command: `curl -o olm.exe -L "https://github.com/fosrl/olm/releases/download/${version}/olm_windows_installer.exe"` - }, - { - title: t("run"), - command: `olm.exe --id ${id} --secret ${secret} --endpoint ${endpoint}` - } - ] - }, - docker: { - "Docker Compose": [ - `services: - olm: - image: fosrl/olm - container_name: olm - restart: unless-stopped - network_mode: host - cap_add: - - NET_ADMIN - devices: - - /dev/net/tun:/dev/net/tun - environment: - - PANGOLIN_ENDPOINT=${endpoint} - - OLM_ID=${id} - - OLM_SECRET=${secret}` - ], - "Docker Run": [ - `docker run -dit --network host --cap-add NET_ADMIN --device /dev/net/tun:/dev/net/tun fosrl/olm --id ${id} --secret ${secret} --endpoint ${endpoint}` - ] - } - }; - setCommands(commands); - }; - - const getArchitectures = () => { - switch (platform) { - case "unix": - return ["All"]; - case "windows": - return ["x64"]; - case "docker": - return ["Docker Compose", "Docker Run"]; - default: - return ["x64"]; - } - }; - - const getPlatformName = (platformName: string) => { - switch (platformName) { - case "windows": - return "Windows"; - case "unix": - return "Unix & macOS"; - case "docker": - return "Docker"; - default: - return "Unix & macOS"; - } - }; - - const getCommand = (): CommandItem[] => { - const placeholder: CommandItem[] = [t("unknownCommand")]; - if (!commands) { - return placeholder; - } - let platformCommands = commands[platform as keyof Commands]; - - if (!platformCommands) { - // get first key - const firstPlatform = Object.keys(commands)[0] as Platform; - platformCommands = commands[firstPlatform as keyof Commands]; - - setPlatform(firstPlatform); - } - - let architectureCommands = platformCommands[architecture]; - if (!architectureCommands) { - // get first key - const firstArchitecture = Object.keys(platformCommands)[0]; - architectureCommands = platformCommands[firstArchitecture]; - - setArchitecture(firstArchitecture); - } - - return architectureCommands || placeholder; - }; - - const getPlatformIcon = (platformName: string) => { - switch (platformName) { - case "windows": - return ; - case "unix": - return ; - case "docker": - return ; - case "kubernetes": - return ; - case "podman": - return ; - case "freebsd": - return ; - case "nixos": - return ; - default: - return ; - } - }; - const form = useForm({ resolver: zodResolver(createClientFormSchema), defaultValues: { @@ -311,23 +152,6 @@ export default function Page() { const load = async () => { setLoadingPage(true); - // Fetch available sites - - // const res = await api.get>( - // `/org/${orgId}/sites/` - // ); - // const sites = res.data.data.sites.filter( - // (s) => s.type === "newt" && s.subnet - // ); - // setSites( - // sites.map((site) => ({ - // id: site.siteId.toString(), - // text: site.name - // })) - // ); - - let olmVersion = "latest"; - try { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 3000); @@ -348,7 +172,7 @@ export default function Page() { } const data = await response.json(); const latestVersion = data.tag_name; - olmVersion = latestVersion; + setOlmVersion(latestVersion); } catch (error) { if (error instanceof Error && error.name === "AbortError") { console.error(t("olmErrorFetchTimeout")); @@ -377,18 +201,9 @@ export default function Page() { const olmId = data.olmId; const olmSecret = data.olmSecret; - const olmCommand = `olm --id ${olmId} --secret ${olmSecret} --endpoint ${env.app.dashboardUrl}`; setOlmId(olmId); setOlmSecret(olmSecret); - setOlmCommand(olmCommand); - - hydrateCommands( - olmId, - olmSecret, - env.app.dashboardUrl, - olmVersion - ); if (data.subnet) { form.setValue("subnet", data.subnet); @@ -571,118 +386,12 @@ export default function Page() { - - - - {t("clientInstallOlm")} - - - {t("clientInstallOlmDescription")} - - - -
-

- {t("operatingSystem")} -

-
- {platforms.map((os) => ( - - ))} -
-
- -
-

- {["docker", "podman"].includes( - platform - ) - ? t("method") - : t("architecture")} -

-
- {getArchitectures().map( - (arch) => ( - - ) - )} -
-
-

- {t("commands")} -

-
- {getCommand().map( - (item, index) => { - const commandText = - typeof item === - "string" - ? item - : item.command; - const title = - typeof item === - "string" - ? undefined - : item.title; - - return ( -
- {title && ( -

- { - title - } -

- )} - -
- ); - } - )} -
-
-
- - + )} diff --git a/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx b/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx index 8f750bf2..f60e6836 100644 --- a/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx +++ b/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx @@ -298,7 +298,6 @@ export default function CredentialsPage() { id={displayNewtId ?? "**********"} secret={displaySecret ?? "**************"} endpoint={env.app.dashboardUrl} - version={"latest"} /> )} diff --git a/src/components/newt-install-commands.tsx b/src/components/newt-install-commands.tsx index c1be0f51..c06b2047 100644 --- a/src/components/newt-install-commands.tsx +++ b/src/components/newt-install-commands.tsx @@ -31,19 +31,22 @@ export type NewtSiteInstallCommandsProps = { id: string; secret: string; endpoint: string; - version: string; + version?: string; }; export function NewtSiteInstallCommands({ id, secret, endpoint, - version + version = "latest" }: NewtSiteInstallCommandsProps) { const t = useTranslations(); - const [platform, setPlatform] = useState("unix"); const [acceptClients, setAcceptClients] = useState(true); + const [platform, setPlatform] = useState("unix"); + const [architecture, setArchitecture] = useState( + () => getArchitectures(platform)[0] + ); const acceptClientsFlag = !acceptClients ? " --disable-clients" : ""; const acceptClientsEnv = !acceptClients @@ -133,10 +136,6 @@ WantedBy=default.target` } }; - const [architecture, setArchitecture] = useState( - () => getArchitectures(platform)[0] - ); - const commands = commandList[platform][architecture]; return ( diff --git a/src/components/olm-install-commands.tsx b/src/components/olm-install-commands.tsx new file mode 100644 index 00000000..d4c27ae2 --- /dev/null +++ b/src/components/olm-install-commands.tsx @@ -0,0 +1,220 @@ +import { Terminal } from "lucide-react"; +import { useTranslations } from "next-intl"; +import { useState } from "react"; +import { FaDocker, FaWindows } from "react-icons/fa"; +import CopyTextBox from "./CopyTextBox"; +import { + SettingsSection, + SettingsSectionBody, + SettingsSectionDescription, + SettingsSectionHeader, + SettingsSectionTitle +} from "./Settings"; +import { Button } from "./ui/button"; + +export type CommandItem = string | { title: string; command: string }; + +const PLATFORMS = ["unix", "windows", "docker"] as const; + +type Platform = (typeof PLATFORMS)[number]; + +export type OlmInstallCommandsProps = { + id: string; + secret: string; + endpoint: string; + version?: string; +}; + +export function OlmInstallCommands({ + id, + secret, + endpoint, + version = "latest" +}: OlmInstallCommandsProps) { + const t = useTranslations(); + + const [platform, setPlatform] = useState("unix"); + const [architecture, setArchitecture] = useState( + () => getArchitectures(platform)[0] + ); + + const commandList: Record> = { + unix: { + All: [ + { + title: t("install"), + command: `curl -fsSL https://static.pangolin.net/get-olm.sh | bash` + }, + { + title: t("run"), + command: `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}` + } + ] + }, + windows: { + x64: [ + { + title: t("install"), + command: `curl -o olm.exe -L "https://github.com/fosrl/olm/releases/download/${version}/olm_windows_installer.exe"` + }, + { + title: t("run"), + command: `olm.exe --id ${id} --secret ${secret} --endpoint ${endpoint}` + } + ] + }, + docker: { + "Docker Compose": [ + `services: + olm: + image: fosrl/olm + container_name: olm + restart: unless-stopped + network_mode: host + cap_add: + - NET_ADMIN + devices: + - /dev/net/tun:/dev/net/tun + environment: + - PANGOLIN_ENDPOINT=${endpoint} + - OLM_ID=${id} + - OLM_SECRET=${secret}` + ], + "Docker Run": [ + `docker run -dit --network host --cap-add NET_ADMIN --device /dev/net/tun:/dev/net/tun fosrl/olm --id ${id} --secret ${secret} --endpoint ${endpoint}` + ] + } + }; + + const commands = commandList[platform][architecture]; + return ( + + + + {t("clientInstallOlm")} + + + {t("clientInstallOlmDescription")} + + + +
+

{t("operatingSystem")}

+
+ {PLATFORMS.map((os) => ( + + ))} +
+
+ +
+

+ {["docker", "podman"].includes(platform) + ? t("method") + : t("architecture")} +

+
+ {getArchitectures(platform).map((arch) => ( + + ))} +
+
+

{t("commands")}

+
+ {commands.map((item, index) => { + const commandText = + typeof item === "string" + ? item + : item.command; + const title = + typeof item === "string" + ? undefined + : item.title; + + return ( +
+ {title && ( +

+ {title} +

+ )} + +
+ ); + })} +
+
+
+ + + ); +} + +function getArchitectures(platform: Platform) { + switch (platform) { + case "unix": + return ["All"]; + case "windows": + return ["x64"]; + case "docker": + return ["Docker Compose", "Docker Run"]; + default: + return ["x64"]; + } +} + +function getPlatformName(platformName: Platform) { + switch (platformName) { + case "windows": + return "Windows"; + case "unix": + return "Unix & macOS"; + case "docker": + return "Docker"; + default: + return "Unix & macOS"; + } +} + +function getPlatformIcon(platformName: Platform) { + switch (platformName) { + case "windows": + return ; + case "unix": + return ; + case "docker": + return ; + default: + return ; + } +}