Merge pull request #1534 from Dokploy/feat/enable-swarm-overview

Feat/enable swarm overview

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

@@ -40,7 +40,7 @@ interface Props {
 }
 
 const AddRedirectchema = z.object({
-	replicas: z.number(),
+	replicas: z.number().min(1, "Replicas must be at least 1"),
 	registryId: z.string(),
 });
 
@@ -130,9 +130,11 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 												placeholder="1"
 												{...field}
 												onChange={(e) => {
-													field.onChange(Number(e.target.value));
+													const value = e.target.value;
+													field.onChange(value === "" ? 0 : Number(value));
 												}}
 												type="number"
+												value={field.value || ""}
 											/>
 										</FormControl>
 

apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx

@@ -12,6 +12,7 @@ import { ExternalLink, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { AddManager } from "./manager/add-manager";
 import { AddWorker } from "./workers/add-worker";
+import { AlertBlock } from "@/components/shared/alert-block";
 
 interface Props {
 	serverId?: string;
@@ -48,6 +49,10 @@ export const AddNode = ({ serverId }: Props) => {
 							Architecture
 							<ExternalLink className="h-4 w-4" />
 						</Link>
+						<AlertBlock type="warning">
+							Make sure you use the same architecture as the node you are
+							adding.
+						</AlertBlock>
 					</DialogDescription>
 				</DialogHeader>
 				<div className="flex flex-col gap-2">
@@ -56,10 +61,10 @@ export const AddNode = ({ serverId }: Props) => {
 							<TabsTrigger value="worker">Worker</TabsTrigger>
 							<TabsTrigger value="manager">Manager</TabsTrigger>
 						</TabsList>
-						<TabsContent value="worker" className="pt-4">
+						<TabsContent value="worker" className="pt-4 overflow-hidden">
 							<AddWorker serverId={serverId} />
 						</TabsContent>
-						<TabsContent value="manager" className="pt-4">
+						<TabsContent value="manager" className="pt-4 overflow-hidden">
 							<AddManager serverId={serverId} />
 						</TabsContent>
 					</Tabs>

apps/dokploy/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CardContent } from "@/components/ui/card";
 import {
 	DialogDescription,
@@ -6,7 +7,7 @@ import {
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";
-import { CopyIcon } from "lucide-react";
+import { CopyIcon, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
@@ -14,56 +15,66 @@ interface Props {
 }
 
 export const AddManager = ({ serverId }: Props) => {
-	const { data } = api.cluster.addManager.useQuery({ serverId });
+	const { data, isLoading, error, isError } = api.cluster.addManager.useQuery({
+		serverId,
+	});
 
 	return (
 		<>
-			<div>
+			<CardContent className="sm:max-w-4xl  flex flex-col gap-4 px-0">
-				<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
+				<DialogHeader>
-					<DialogHeader>
+					<DialogTitle>Add a new manager</DialogTitle>
-						<DialogTitle>Add a new manager</DialogTitle>
+					<DialogDescription>Add a new manager</DialogDescription>
-						<DialogDescription>Add a new manager</DialogDescription>
+				</DialogHeader>
-					</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-					<div className="flex flex-col gap-2.5 text-sm">
+				{isLoading ? (
-						<span>1. Go to your new server and run the following command</span>
+					<Loader2 className="w-full animate-spin text-muted-foreground" />
-						<span className="bg-muted rounded-lg p-2 flex justify-between">
+				) : (
-							curl https://get.docker.com | sh -s -- --version {data?.version}
+					<>
-							<button
+						<div className="flex flex-col gap-2.5 text-sm">
-								type="button"
+							<span>
-								className="self-center"
+								1. Go to your new server and run the following command
-								onClick={() => {
+							</span>
-									copy(
+							<span className="bg-muted rounded-lg p-2 flex justify-between">
-										`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
+								curl https://get.docker.com | sh -s -- --version {data?.version}
-									);
+								<button
-									toast.success("Copied to clipboard");
+									type="button"
-								}}
+									className="self-center"
-							>
+									onClick={() => {
-								<CopyIcon className="h-4 w-4 cursor-pointer" />
+										copy(
-							</button>
+											`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
-						</span>
+										);
-					</div>
+										toast.success("Copied to clipboard");
+									}}
+								>
+									<CopyIcon className="h-4 w-4 cursor-pointer" />
+								</button>
+							</span>
+						</div>
 
-					<div className="flex flex-col gap-2.5 text-sm">
+						<div className="flex flex-col gap-2.5 text-sm">
-						<span>
+							<span>
-							2. Run the following command to add the node(manager) to your
+								2. Run the following command to add the node(manager) to your
-							cluster
+								cluster
-						</span>
+							</span>
-						<span className="bg-muted rounded-lg p-2  flex">
+
-							{data?.command}
+							<span className="bg-muted rounded-lg p-2  flex">
-							<button
+								{data?.command}
-								type="button"
+								<button
-								className="self-start"
+									type="button"
-								onClick={() => {
+									className="self-start"
-									copy(data?.command || "");
+									onClick={() => {
-									toast.success("Copied to clipboard");
+										copy(data?.command || "");
-								}}
+										toast.success("Copied to clipboard");
-							>
+									}}
-								<CopyIcon className="h-4 w-4 cursor-pointer" />
+								>
-							</button>
+									<CopyIcon className="h-4 w-4 cursor-pointer" />
-						</span>
+								</button>
-					</div>
+							</span>
-				</CardContent>
+						</div>
-			</div>
+					</>
+				)}
+			</CardContent>
 		</>
 	);
 };

apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes-modal.tsx

@@ -17,7 +17,7 @@ export const ShowNodesModal = ({ serverId }: Props) => {
 					className="w-full cursor-pointer "
 					onSelect={(e) => e.preventDefault()}
 				>
-					Show Nodes
+					Show Swarm Nodes
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-5xl  overflow-y-auto max-h-screen ">

apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes.tsx

@@ -144,7 +144,7 @@ export const ShowNodes = ({ serverId }: Props) => {
 															<DropdownMenuContent align="end">
 																<DropdownMenuLabel>Actions</DropdownMenuLabel>
 																<ShowNodeData data={node} />
-																{node?.ManagerStatus?.Leader && (
+																{!node?.ManagerStatus?.Leader && (
 																	<DialogAction
 																		title="Delete Node"
 																		description="Are you sure you want to delete this node from the cluster?"

apps/dokploy/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CardContent } from "@/components/ui/card";
 import {
 	DialogDescription,
@@ -6,7 +7,7 @@ import {
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";
-import { CopyIcon } from "lucide-react";
+import { CopyIcon, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
@@ -14,54 +15,62 @@ interface Props {
 }
 
 export const AddWorker = ({ serverId }: Props) => {
-	const { data } = api.cluster.addWorker.useQuery({ serverId });
+	const { data, isLoading, error, isError } = api.cluster.addWorker.useQuery({
+		serverId,
+	});
 
 	return (
-		<div>
+		<CardContent className="sm:max-w-4xl   flex flex-col gap-4 px-0">
-			<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
+			<DialogHeader>
-				<DialogHeader>
+				<DialogTitle>Add a new worker</DialogTitle>
-					<DialogTitle>Add a new worker</DialogTitle>
+				<DialogDescription>Add a new worker</DialogDescription>
-					<DialogDescription>Add a new worker</DialogDescription>
+			</DialogHeader>
-				</DialogHeader>
+			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-				<div className="flex flex-col gap-2.5 text-sm">
+			{isLoading ? (
-					<span>1. Go to your new server and run the following command</span>
+				<Loader2 className="w-full animate-spin text-muted-foreground" />
-					<span className="bg-muted rounded-lg p-2 flex justify-between">
+			) : (
-						curl https://get.docker.com | sh -s -- --version {data?.version}
+				<>
-						<button
+					<div className="flex flex-col gap-2.5 text-sm">
-							type="button"
+						<span>1. Go to your new server and run the following command</span>
-							className="self-center"
+						<span className="bg-muted rounded-lg p-2 flex justify-between">
-							onClick={() => {
+							curl https://get.docker.com | sh -s -- --version {data?.version}
-								copy(
+							<button
-									`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
+								type="button"
-								);
+								className="self-center"
-								toast.success("Copied to clipboard");
+								onClick={() => {
-							}}
+									copy(
-						>
+										`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
-							<CopyIcon className="h-4 w-4 cursor-pointer" />
+									);
-						</button>
+									toast.success("Copied to clipboard");
-					</span>
+								}}
-				</div>
+							>
+								<CopyIcon className="h-4 w-4 cursor-pointer" />
+							</button>
+						</span>
+					</div>
 
-				<div className="flex flex-col gap-2.5 text-sm">
+					<div className="flex flex-col gap-2.5 text-sm">
-					<span>
+						<span>
-						2. Run the following command to add the node(worker) to your cluster
+							2. Run the following command to add the node(worker) to your
-					</span>
+							cluster
+						</span>
 
-					<span className="bg-muted rounded-lg p-2  flex">
+						<span className="bg-muted rounded-lg p-2  flex">
-						{data?.command}
+							{data?.command}
-						<button
+							<button
-							type="button"
+								type="button"
-							className="self-start"
+								className="self-start"
-							onClick={() => {
+								onClick={() => {
-								copy(data?.command || "");
+									copy(data?.command || "");
-								toast.success("Copied to clipboard");
+									toast.success("Copied to clipboard");
-							}}
+								}}
-						>
+							>
-							<CopyIcon className="h-4 w-4 cursor-pointer" />
+								<CopyIcon className="h-4 w-4 cursor-pointer" />
-						</button>
+							</button>
-					</span>
+						</span>
-				</div>
+					</div>
-			</CardContent>
+				</>
-		</div>
+			)}
+		</CardContent>
 	);
 };

apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx

@@ -663,13 +663,16 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 																{...field}
 																onChange={(e) => {
 																	const value = e.target.value;
-																	if (value) {
+																	if (value === "") {
+																		field.onChange(undefined);
+																	} else {
 																		const port = Number.parseInt(value);
 																		if (port > 0 && port < 65536) {
 																			field.onChange(port);
 																		}
 																	}
 																}}
+																value={field.value || ""}
 																type="number"
 															/>
 														</FormControl>

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -159,9 +159,11 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																		<Input
 																			type="number"
 																			{...field}
-																			onChange={(e) =>
+																			onChange={(e) => {
-																				field.onChange(Number(e.target.value))
+																				const value = e.target.value;
-																			}
+																				field.onChange(value === "" ? undefined : Number(value));
+																			}}
+																			value={field.value || ""}
 																			className="w-full dark:bg-black"
 																			placeholder="e.g. 8080"
 																		/>
@@ -185,9 +187,11 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																		<Input
 																			type="number"
 																			{...field}
-																			onChange={(e) =>
+																			onChange={(e) => {
-																				field.onChange(Number(e.target.value))
+																				const value = e.target.value;
-																			}
+																				field.onChange(value === "" ? undefined : Number(value));
+																			}}
+																			value={field.value || ""}
 																			className="w-full dark:bg-black"
 																			placeholder="e.g. 80"
 																		/>

apps/dokploy/components/ui/input.tsx

@@ -39,7 +39,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, InputProps>(
 				className={cn("text-left", className)}
 				ref={ref}
 				{...props}
-				value={props.value === undefined || props.value === "" ? "" : String(props.value)}
+				value={props.value === undefined ? undefined : String(props.value)}
 				onChange={(e) => {
 					const value = e.target.value;
 					if (value === "") {
@@ -60,21 +60,6 @@ const NumberInput = React.forwardRef<HTMLInputElement, InputProps>(
 						}
 					}
 				}}
-				onBlur={(e) => {
-					// If input is empty, make 0 when focus is lost
-					if (e.target.value === "") {
-						const syntheticEvent = {
-							...e,
-							target: {
-								...e.target,
-								value: "0",
-							},
-						};
-						props.onChange?.(
-							syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>,
-						);
-					}
-				}}
 			/>
 		);
 	},

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.20.6",
+	"version": "v0.20.8",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",

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

@@ -1,8 +1,9 @@
 import { getPublicIpWithFallback } from "@/server/wss/terminal";
 import {
 	type DockerNode,
-	IS_CLOUD,
 	execAsync,
+	execAsyncRemote,
+	findServerById,
 	getRemoteDocker,
 } from "@dokploy/server";
 import { TRPCError } from "@trpc/server";
@@ -16,10 +17,6 @@ export const clusterRouter = createTRPCRouter({
 			}),
 		)
 		.query(async ({ input }) => {
-			if (IS_CLOUD) {
-				return [];
-			}
-
 			const docker = await getRemoteDocker(input.serverId);
 			const workers: DockerNode[] = await docker.listNodes();
 
@@ -33,17 +30,17 @@ export const clusterRouter = createTRPCRouter({
 			}),
 		)
 		.mutation(async ({ input }) => {
-			if (IS_CLOUD) {
-				throw new TRPCError({
-					code: "UNAUTHORIZED",
-					message: "Functionality not available in cloud version",
-				});
-			}
 			try {
-				await execAsync(
+				const drainCommand = `docker node update --availability drain ${input.nodeId}`;
-					`docker node update --availability drain ${input.nodeId}`,
+				const removeCommand = `docker node rm ${input.nodeId} --force`;
-				);
+
-				await execAsync(`docker node rm ${input.nodeId} --force`);
+				if (input.serverId) {
+					await execAsyncRemote(input.serverId, drainCommand);
+					await execAsyncRemote(input.serverId, removeCommand);
+				} else {
+					await execAsync(drainCommand);
+					await execAsync(removeCommand);
+				}
 				return true;
 			} catch (error) {
 				throw new TRPCError({
@@ -60,20 +57,20 @@ export const clusterRouter = createTRPCRouter({
 			}),
 		)
 		.query(async ({ input }) => {
-			if (IS_CLOUD) {
-				return {
-					command: "",
-					version: "",
-				};
-			}
 			const docker = await getRemoteDocker(input.serverId);
 			const result = await docker.swarmInspect();
 			const docker_version = await docker.version();
 
+			let ip = await getPublicIpWithFallback();
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				ip = server?.ipAddress;
+			}
+
 			return {
 				command: `docker swarm join --token ${
 					result.JoinTokens.Worker
-				} ${await getPublicIpWithFallback()}:2377`,
+				} ${ip}:2377`,
 				version: docker_version.Version,
 			};
 		}),
@@ -84,19 +81,19 @@ export const clusterRouter = createTRPCRouter({
 			}),
 		)
 		.query(async ({ input }) => {
-			if (IS_CLOUD) {
-				return {
-					command: "",
-					version: "",
-				};
-			}
 			const docker = await getRemoteDocker(input.serverId);
 			const result = await docker.swarmInspect();
 			const docker_version = await docker.version();
+
+			let ip = await getPublicIpWithFallback();
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				ip = server?.ipAddress;
+			}
 			return {
 				command: `docker swarm join --token ${
 					result.JoinTokens.Manager
-				} ${await getPublicIpWithFallback()}:2377`,
+				} ${ip}:2377`,
 				version: docker_version.Version,
 			};
 		}),

packages/server/src/setup/server-setup.ts

@@ -361,7 +361,7 @@ const installUtilities = () => `
 	alpine)
 		sed -i '/^#.*\/community/s/^#//' /etc/apk/repositories
 		apk update >/dev/null
-		apk add curl wget git jq openssl >/dev/null
+		apk add curl wget git jq openssl sudo unzip tar >/dev/null
 		;;
 	ubuntu | debian | raspbian)
 		DEBIAN_FRONTEND=noninteractive apt-get update -y >/dev/null