Merge pull request #1531 from Dokploy/fix/loader-swarm

Fix/loader swarm

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

@@ -56,10 +56,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,18 +15,26 @@ 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>
 					<DialogTitle>Add a new manager</DialogTitle>
 					<DialogDescription>Add a new manager</DialogDescription>
 				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				{isLoading ? (
+					<Loader2 className="w-full animate-spin text-muted-foreground" />
+				) : (
+					<>
 						<div className="flex flex-col gap-2.5 text-sm">
-						<span>1. Go to your new server and run the following command</span>
+							<span>
+								1. Go to your new server and run the following command
+							</span>
 							<span className="bg-muted rounded-lg p-2 flex justify-between">
 								curl https://get.docker.com | sh -s -- --version {data?.version}
 								<button
@@ -48,6 +57,7 @@ export const AddManager = ({ serverId }: Props) => {
 								2. Run the following command to add the node(manager) to your
 								cluster
 							</span>
+
 							<span className="bg-muted rounded-lg p-2  flex">
 								{data?.command}
 								<button
@@ -62,8 +72,9 @@ export const AddManager = ({ serverId }: Props) => {
 								</button>
 							</span>
 						</div>
+					</>
+				)}
 			</CardContent>
-			</div>
 		</>
 	);
 };

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/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,15 +15,21 @@ 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>
 				<DialogTitle>Add a new worker</DialogTitle>
 				<DialogDescription>Add a new worker</DialogDescription>
 			</DialogHeader>
+			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+			{isLoading ? (
+				<Loader2 className="w-full animate-spin text-muted-foreground" />
+			) : (
+				<>
 					<div className="flex flex-col gap-2.5 text-sm">
 						<span>1. Go to your new server and run the following command</span>
 						<span className="bg-muted rounded-lg p-2 flex justify-between">
@@ -44,7 +51,8 @@ export const AddWorker = ({ serverId }: Props) => {
 
 					<div className="flex flex-col gap-2.5 text-sm">
 						<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
+							cluster
 						</span>
 
 						<span className="bg-muted rounded-lg p-2  flex">
@@ -61,7 +69,8 @@ export const AddWorker = ({ serverId }: Props) => {
 							</button>
 						</span>
 					</div>
+				</>
+			)}
 		</CardContent>
-		</div>
 	);
 };