Merge pull request #959 from szwabodev/feat/localServerTerminal

feat: local server terminal access

apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx

@@ -0,0 +1,154 @@
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Input } from "@/components/ui/input";
+import {
+	FormControl,
+	FormLabel,
+	FormField,
+	FormMessage,
+	FormItem,
+	Form,
+} from "@/components/ui/form";
+import { cn } from "@/lib/utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Settings } from "lucide-react";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { useTranslation } from "next-i18next";
+
+const Schema = z.object({
+	port: z.number().min(1, "Port must be higher than 0"),
+	username: z.string().min(1, "Username is required"),
+});
+
+type Schema = z.infer<typeof Schema>;
+
+const DEFAULT_LOCAL_SERVER_DATA: Schema = {
+	port: 22,
+	username: "root",
+};
+
+/** Returns local server data for use with local server terminal */
+export const getLocalServerData = () => {
+	try {
+		const localServerData = localStorage.getItem("localServerData");
+		const parsedLocalServerData = localServerData
+			? (JSON.parse(localServerData) as typeof DEFAULT_LOCAL_SERVER_DATA)
+			: DEFAULT_LOCAL_SERVER_DATA;
+
+		return parsedLocalServerData;
+	} catch {
+		return DEFAULT_LOCAL_SERVER_DATA;
+	}
+};
+
+interface Props {
+	onSave: () => void;
+}
+
+const LocalServerConfig = ({ onSave }: Props) => {
+	const { t } = useTranslation("settings");
+
+	const form = useForm<Schema>({
+		defaultValues: getLocalServerData(),
+		resolver: zodResolver(Schema),
+	});
+
+	const onSubmit = (data: Schema) => {
+		localStorage.setItem("localServerData", JSON.stringify(data));
+		form.reset(data);
+		onSave();
+	};
+
+	return (
+		<Accordion collapsible type="single">
+			<AccordionItem value="connectionSettings">
+				<AccordionTrigger
+					className={cn(
+						buttonVariants({ variant: "ghost" }),
+						"hover:no-underline px-1 mb-2 active:hover:transform-none",
+					)}
+				>
+					<div className="flex flex-row items-center gap-2 justify-between w-full">
+						<div className="flex flex-row gap-2 items-center">
+							<Settings className="h-4 w-4" />
+							<span className=" dark:hover:text-white">
+								{t("settings.terminal.connectionSettings")}
+							</span>
+						</div>
+					</div>
+				</AccordionTrigger>
+
+				<AccordionContent className="px-1 flex flex-col gap-2">
+					<Form {...form}>
+						<form
+							id="hook-form-add-server"
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="w-full grid grid-cols-2 gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="port"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>{t("settings.terminal.port")}</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(1);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>{t("settings.terminal.username")}</FormLabel>
+										<FormControl>
+											<Input placeholder="root" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+
+					<Button
+						form="hook-form-add-server"
+						type="submit"
+						className="ml-auto"
+						disabled={!form.formState.isDirty}
+					>
+						{t("settings.common.save")}
+					</Button>
+				</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	);
+};
+
+export default LocalServerConfig;

apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx

@@ -10,24 +10,38 @@ import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
 import dynamic from "next/dynamic";
 import type React from "react";
+import { useState } from "react";
+import LocalServerConfig from "./local-server-config";
 
 const Terminal = dynamic(() => import("./terminal").then((e) => e.Terminal), {
 	ssr: false,
 });
 
+const getTerminalKey = () => {
+	return `terminal-${Date.now()}`;
+};
+
 interface Props {
 	children?: React.ReactNode;
 	serverId: string;
 }
 
 export const TerminalModal = ({ children, serverId }: Props) => {
+	const [terminalKey, setTerminalKey] = useState<string>(getTerminalKey());
+	const isLocalServer = serverId === "local";
+
 	const { data } = api.server.one.useQuery(
 		{
 			serverId,
 		},
-		{ enabled: !!serverId },
+		{ enabled: !!serverId && !isLocalServer },
 	);
 
+	const handleLocalServerConfigSave = () => {
+		// Rerender Terminal component to reconnect using new component key when saving local server config
+		setTerminalKey(getTerminalKey());
+	};
+
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -43,12 +57,16 @@ export const TerminalModal = ({ children, serverId }: Props) => {
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader className="flex flex-col gap-1">
-					<DialogTitle>Terminal ({data?.name})</DialogTitle>
+					<DialogTitle>Terminal ({data?.name ?? serverId})</DialogTitle>
 					<DialogDescription>Easy way to access the server</DialogDescription>
 				</DialogHeader>
 
-				<div className="flex flex-col gap-4">
-					<Terminal id="terminal" serverId={serverId} />
+				{isLocalServer && (
+					<LocalServerConfig onSave={handleLocalServerConfigSave} />
+				)}
+
+				<div className="flex flex-col gap-4 h-[552px]">
+					<Terminal id="terminal" key={terminalKey} serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>

apps/dokploy/components/dashboard/settings/web-server/terminal.tsx

@@ -5,6 +5,7 @@ import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
 import { useTheme } from "next-themes";
+import { getLocalServerData } from "./local-server-config";
 
 interface Props {
 	id: string;
@@ -12,9 +13,16 @@ interface Props {
 }
 
 export const Terminal: React.FC<Props> = ({ id, serverId }) => {
-	const termRef = useRef(null);
+	const termRef = useRef<HTMLDivElement>(null);
+	const initialized = useRef<boolean>(false);
 	const { resolvedTheme } = useTheme();
 	useEffect(() => {
+		if (initialized.current) {
+			// Required in strict mode to avoid issues due to double wss connection
+			return;
+		}
+
+		initialized.current = true;
 		const container = document.getElementById(id);
 		if (container) {
 			container.innerHTML = "";
@@ -33,7 +41,16 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
-		const wsUrl = `${protocol}//${window.location.host}/terminal?serverId=${serverId}`;
+		const urlParams = new URLSearchParams();
+		urlParams.set("serverId", serverId);
+
+		if (serverId === "local") {
+			const { port, username } = getLocalServerData();
+			urlParams.set("port", port.toString());
+			urlParams.set("username", username);
+		}
+
+		const wsUrl = `${protocol}//${window.location.host}/terminal?${urlParams}`;
 
 		const ws = new WebSocket(wsUrl);
 		const addonAttach = new AttachAddon(ws);