refactor(multi-server): improve alerts and add instructions to ssh keys

apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx

@@ -278,6 +278,12 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<div className="px-4">
+					<AlertBlock type="info">
+						Changing settings such as placements may cause the logs/monitoring
+						to be unavailable.
+					</AlertBlock>
+				</div>
 
 				<Form {...form}>
 					<form

apps/dokploy/components/dashboard/docker/show/show-containers.tsx

@@ -42,6 +42,7 @@ export const ShowContainers = ({ serverId }: Props) => {
 	const { data, isLoading } = api.docker.getContainers.useQuery({
 		serverId,
 	});
+
 	const [sorting, setSorting] = React.useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
 		[],
@@ -109,6 +110,19 @@ export const ShowContainers = ({ serverId }: Props) => {
 					</DropdownMenu>
 				</div>
 				<div className="rounded-md border">
+					{isLoading ? (
+						<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								Loading...
+							</span>
+						</div>
+					) : data?.length === 0 ? (
+						<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								No results.
+							</span>
+						</div>
+					) : (
 						<Table>
 							<TableHeader>
 								{table.getHeaderGroups().map((headerGroup) => (
@@ -129,7 +143,7 @@ export const ShowContainers = ({ serverId }: Props) => {
 								))}
 							</TableHeader>
 							<TableBody>
-							{table.getRowModel().rows?.length ? (
+								{table?.getRowModel()?.rows?.length ? (
 									table.getRowModel().rows.map((row) => (
 										<TableRow
 											key={row.id}
@@ -165,7 +179,9 @@ export const ShowContainers = ({ serverId }: Props) => {
 								)}
 							</TableBody>
 						</Table>
+					)}
 				</div>
+				{data && data?.length > 0 && (
 					<div className="flex items-center justify-end space-x-2 py-4">
 						<div className="space-x-2 flex flex-wrap">
 							<Button
@@ -186,6 +202,7 @@ export const ShowContainers = ({ serverId }: Props) => {
 							</Button>
 						</div>
 					</div>
+				)}
 			</div>
 		</div>
 	);

apps/dokploy/components/dashboard/file-system/show-traefik-system.tsx

@@ -17,14 +17,23 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
 		isLoading,
 		error,
 		isError,
-	} = api.settings.readDirectories.useQuery({
+	} = api.settings.readDirectories.useQuery(
+		{
 			serverId,
-	});
+		},
+		{
+			retry: 2,
+		},
+	);
 
 	return (
 		<div className={cn("mt-6 md:grid gap-4")}>
 			<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
-				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				{isError && (
+					<AlertBlock type="error" className="w-full">
+						{error?.message}
+					</AlertBlock>
+				)}
 				{isLoading && (
 					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
 						<span className="text-muted-foreground text-lg font-medium">

apps/dokploy/components/dashboard/monitoring/docker/show.tsx

@@ -150,8 +150,6 @@ export const DockerMonitoring = ({
 		});
 	}, [data]);
 
-	console.log(currentData);
-
 	useEffect(() => {
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 		const wsUrl = `${protocol}//${window.location.host}/listen-docker-stats-monitoring?appName=${appName}&appType=${appType}`;

apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx

@@ -1,5 +1,11 @@
 import { CardDescription, CardTitle } from "@/components/ui/card";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { useState } from "react";
 import { ShowStorageActions } from "./show-storage-actions";
@@ -23,8 +29,8 @@ export const ShowServerActions = ({ serverId }: Props) => {
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-xl  overflow-y-auto max-h-screen ">
 				<div className="flex flex-col gap-1">
-					<CardTitle className="text-xl">Web server settings</CardTitle>
+					<DialogTitle className="text-xl">Web server settings</DialogTitle>
-					<CardDescription>Reload or clean the web server.</CardDescription>
+					<DialogDescription>Reload or clean the web server.</DialogDescription>
 				</div>
 
 				<div className="grid grid-cols-2 w-full gap-4">

apps/dokploy/components/dashboard/settings/servers/setup-server.tsx

@@ -18,11 +18,21 @@ import {
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
-import { useUrl } from "@/utils/hooks/use-url";
+import {
-import { RocketIcon, ServerIcon } from "lucide-react";
+	CopyIcon,
+	ExternalLinkIcon,
+	RocketIcon,
+	ServerIcon,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { CodeEditor } from "@/components/shared/code-editor";
+import copy from "copy-to-clipboard";
+import Link from "next/link";
+import { Separator } from "@/components/ui/separator";
+import { AlertBlock } from "@/components/shared/alert-block";
 
 interface Props {
 	serverId: string;
@@ -49,6 +59,8 @@ export const SetupServer = ({ serverId }: Props) => {
 
 	const { mutateAsync, isLoading } = api.server.setup.useMutation();
 
+	console.log(server?.sshKey);
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
@@ -70,15 +82,131 @@ export const SetupServer = ({ serverId }: Props) => {
 						</p>
 					</div>
 				</DialogHeader>
-
+				{!server?.sshKeyId ? (
+					<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
+						<AlertBlock type="warning">
+							Please add a SSH Key to your server before setting up the server.
+							you can assign a SSH Key to your server in Edit Server.
+						</AlertBlock>
+					</div>
+				) : (
 					<div id="hook-form-add-gitlab" className="grid w-full gap-1">
+						<Tabs defaultValue="ssh-keys">
+							<TabsList className="grid grid-cols-2 w-[400px]">
+								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
+								<TabsTrigger value="deployments">Deployments</TabsTrigger>
+							</TabsList>
+							<TabsContent
+								value="ssh-keys"
+								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+							>
+								<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
+									<p className="text-primary text-base font-semibold">
+										You have two options to add SSH Keys to your server:
+									</p>
+
+									<ul>
+										<li>
+											1. Add the public SSH Key when you create a server in your
+											preffered provider (Hostinger, Digital Ocean, Hetzner,
+											etc){" "}
+										</li>
+										<li>2. Add The SSH Key to Server Manually</li>
+									</ul>
+									<div className="flex flex-col gap-4 w-full overflow-auto">
+										<div className="flex relative flex-col gap-2 overflow-y-auto">
+											<div className="text-sm text-primary flex flex-row gap-2 items-center">
+												Copy Public Key ({server?.sshKey?.name})
+												<button
+													type="button"
+													className=" right-2 top-8"
+													onClick={() => {
+														copy(
+															server?.sshKey?.publicKey || "Generate a SSH Key",
+														);
+														toast.success("SSH Copied to clipboard");
+													}}
+												>
+													<CopyIcon className="size-4 text-muted-foreground" />
+												</button>
+											</div>
+										</div>
+									</div>
+
+									<div className="flex flex-col gap-2 w-full mt-2 border rounded-lg p-4">
+										<span className="text-base font-semibold text-primary">
+											Automatic process
+										</span>
+										<Link
+											href="https://docs.dokploy.com/en/docs/core/get-started/introduction"
+											target="_blank"
+											className="text-primary flex flex-row gap-2"
+										>
+											View Tutorial <ExternalLinkIcon className="size-4" />
+										</Link>
+									</div>
+									<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
+										<span className="text-base font-semibold text-primary">
+											Manual process
+										</span>
+										<ul>
+											<li className="items-center flex gap-1">
+												1. Login to your server{" "}
+												<span className="text-primary bg-secondary p-1 rounded-lg">
+													ssh {server?.username}@{server?.ipAddress}
+												</span>
+												<button
+													type="button"
+													onClick={() => {
+														copy(
+															`ssh ${server?.username}@${server?.ipAddress}`,
+														);
+														toast.success("Copied to clipboard");
+													}}
+												>
+													<CopyIcon className="size-4" />
+												</button>
+											</li>
+											<li>
+												2. When you are logged in run the following command
+												<div className="flex  relative flex-col gap-4 w-full mt-2">
+													<CodeEditor
+														lineWrapping
+														language="properties"
+														value={`echo "${server?.sshKey?.publicKey}" >> ~/.ssh/authorized_keys`}
+														readOnly
+														className="font-mono opacity-60"
+													/>
+													<button
+														type="button"
+														className="absolute right-2 top-2"
+														onClick={() => {
+															copy(server?.sshKey?.publicKey || "");
+															toast.success("Copied to clipboard");
+														}}
+													>
+														<CopyIcon className="size-4" />
+													</button>
+												</div>
+											</li>
+											<li className="mt-1">
+												3. You're done, you can test the connection by entering
+												to the terminal or by setting up the server tab.
+											</li>
+										</ul>
+									</div>
+								</div>
+							</TabsContent>
+							<TabsContent value="deployments">
 								<CardContent className="p-0">
 									<div className="flex flex-col gap-4">
 										<Card className="bg-background">
 											<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
 												<div className="flex flex-row gap-2 justify-between w-full items-end max-sm:flex-col">
 													<div className="flex flex-col gap-1">
-											<CardTitle className="text-xl">Deployments</CardTitle>
+														<CardTitle className="text-xl">
+															Deployments
+														</CardTitle>
 														<CardDescription>
 															See all the 5 Server Setup
 														</CardDescription>
@@ -163,7 +291,10 @@ export const SetupServer = ({ serverId }: Props) => {
 										</Card>
 									</div>
 								</CardContent>
+							</TabsContent>
+						</Tabs>
 					</div>
+				)}
 			</DialogContent>
 		</Dialog>
 	);

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -131,13 +131,18 @@ export const ShowServers = () => {
 													</DropdownMenuTrigger>
 													<DropdownMenuContent align="end">
 														<DropdownMenuLabel>Actions</DropdownMenuLabel>
+														{server.sshKeyId && (
 															<TerminalModal serverId={server.serverId}>
 																<span>Enter the terminal</span>
 															</TerminalModal>
+														)}
+
 														<SetupServer serverId={server.serverId} />
 
 														<UpdateServer serverId={server.serverId} />
+														{server.sshKeyId && (
 															<ShowServerActions serverId={server.serverId} />
+														)}
 														<DialogAction
 															disabled={!canDelete}
 															title={
@@ -182,6 +187,8 @@ export const ShowServers = () => {
 															</DropdownMenuItem>
 														</DialogAction>
 
+														{server.sshKeyId && (
+															<>
 																<DropdownMenuSeparator />
 																<DropdownMenuLabel>Extra</DropdownMenuLabel>
 
@@ -191,6 +198,8 @@ export const ShowServers = () => {
 																<ShowDockerContainersModal
 																	serverId={server.serverId}
 																/>
+															</>
+														)}
 													</DropdownMenuContent>
 												</DropdownMenu>
 											</TableCell>

apps/dokploy/components/dashboard/settings/users/show-users.tsx

@@ -41,8 +41,8 @@ export const ShowUsers = () => {
 	}, []);
 
 	return (
-		<div className="h-full col-span-2">
+		<div className=" col-span-2">
-			<Card className="bg-transparent h-full ">
+			<Card className="bg-transparent  ">
 				<CardHeader className="flex flex-row gap-2 justify-between w-full flex-wrap">
 					<div className="flex flex-col gap-2">
 						<CardTitle className="text-xl">Users</CardTitle>
@@ -55,9 +55,9 @@ export const ShowUsers = () => {
 						</div>
 					)}
 				</CardHeader>
-				<CardContent className="space-y-2 h-full">
+				<CardContent className="space-y-2">
 					{data?.length === 0 ? (
-						<div className="flex flex-col items-center gap-3">
+						<div className="flex flex-col items-center gap-3 h-full">
 							<Users className="size-8 self-center text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
 								To create a user, you need to add:

apps/dokploy/server/api/routers/settings.ts

@@ -276,6 +276,7 @@ export const settingsRouter = createTRPCRouter({
 	readDirectories: protectedProcedure
 		.input(apiServerSchema)
 		.query(async ({ ctx, input }) => {
+			try {
 				if (ctx.user.rol === "user") {
 					const canAccess = await canAccessToTraefikFiles(ctx.user.authId);
 
@@ -286,6 +287,9 @@ export const settingsRouter = createTRPCRouter({
 				const { MAIN_TRAEFIK_PATH } = paths(!!input?.serverId);
 				const result = await readDirectory(MAIN_TRAEFIK_PATH, input?.serverId);
 				return result || [];
+			} catch (error) {
+				throw error;
+			}
 		}),
 
 	updateTraefikFile: protectedProcedure

apps/dokploy/server/api/services/compose.ts

@@ -337,8 +337,6 @@ export const deployRemoteCompose = async ({
 
 			await execAsyncRemote(compose.serverId, command);
 			await getBuildComposeCommand(compose, deployment.logPath);
-
-			console.log(" ---- done ----");
 		}
 
 		await updateDeploymentStatus(deployment.deploymentId, "done");
@@ -443,9 +441,6 @@ export const stopCompose = async (composeId: string) => {
 	try {
 		const { COMPOSE_PATH } = paths(!!compose.serverId);
 		if (compose.composeType === "docker-compose") {
-			console.log(
-				`cd ${join(COMPOSE_PATH, compose.appName)} && docker compose -p ${compose.appName} stop`,
-			);
 			if (compose.serverId) {
 				await execAsyncRemote(
 					compose.serverId,

apps/dokploy/server/api/services/docker.ts

@@ -58,7 +58,11 @@ export const getContainers = async (serverId?: string | null) => {
 			.filter((container) => !container.name.includes("dokploy"));
 
 		return containers;
-	} catch (error) {}
+	} catch (error) {
+		console.error(error);
+
+		return [];
+	}
 };
 
 export const getConfig = async (

apps/dokploy/server/wss/docker-container-logs.ts

@@ -72,11 +72,9 @@ export const setupDockerContainerLogsWebSocketServer = (
 									})
 									.on("data", (data: string) => {
 										ws.send(data.toString());
-										// console.log(`OUTPUT: ${data.toString()}`);
 									})
 									.stderr.on("data", (data) => {
 										ws.send(data.toString());
-										// console.error(`STDERR: ${data.toString()}`);
 									});
 							});
 						})

apps/dokploy/server/wss/listen-deployment.ts

@@ -71,11 +71,9 @@ export const setupDeploymentLogsWebSocketServer = (
 									})
 									.on("data", (data: string) => {
 										ws.send(data.toString());
-										// console.log(`OUTPUT: ${data.toString()}`);
 									})
 									.stderr.on("data", (data) => {
 										ws.send(data.toString());
-										// console.error(`STDERR: ${data.toString()}`);
 									});
 							});
 						})