From a7983f32a6eb6f28aac9a8b1b5c7fd751d20d013 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Mon, 30 Dec 2024 20:05:44 +0100
Subject: [PATCH 1/2] style: added gap for cards title & gap for tls status &
 availability

---
 .../dashboard/swarm/details/details-card.tsx  |   2 +-
 .../dashboard/swarm/monitoring-card.tsx       | 108 ++++++++++--------
 2 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/apps/dokploy/components/dashboard/swarm/details/details-card.tsx b/apps/dokploy/components/dashboard/swarm/details/details-card.tsx
index 2de0901a0..eb06e79cb 100644
--- a/apps/dokploy/components/dashboard/swarm/details/details-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/details/details-card.tsx
@@ -63,7 +63,7 @@ export function NodeCard({ node, serverId }: Props) {
       </CardHeader>
       <CardContent>
         <div className="space-y-6">
-          <div className="flex flex-wrap items-center justify-between">
+          <div className="flex flex-wrap gap-y-2 items-center justify-between">
             <div className="flex items-center space-x-4 p-2 rounded-xl border">
               <div className={`h-2.5 w-2.5 rounded-full ${node.Status === "Ready" ? "bg-green-500" : "bg-red-500"}`} />
               <div className="font-medium">{node.Hostname}</div>
diff --git a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
index bd8570db9..16d2532c2 100644
--- a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
@@ -8,13 +8,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-  Activity,
-  Loader2,
-  Monitor,
-  Settings,
-  Server,
-} from "lucide-react";
+import { Activity, Loader2, Monitor, Settings, Server } from "lucide-react";
 import { NodeCard } from "./details/details-card";
 
 interface Props {
@@ -26,46 +20,62 @@ export default function SwarmMonitorCard({ serverId }: Props) {
     serverId,
   });
 
-	if (isLoading) {
-		return (
-			<div className="w-full max-w-7xl mx-auto">
-				<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
-					<div className="flex items-center justify-center h-full text-muted-foreground">
-						<Loader2 className="h-6 w-6 animate-spin" />
-					</div>
-				</div>
-			</div>
-		);
-	}
+  if (isLoading) {
+    return (
+      <div className="w-full max-w-7xl mx-auto">
+        <div className="mb-6 border min-h-[55vh] rounded-lg h-full">
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            <Loader2 className="h-6 w-6 animate-spin" />
+          </div>
+        </div>
+      </div>
+    );
+  }
 
-	if (!nodes) {
-		return (
-			<div className="w-full max-w-7xl mx-auto">
-				<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
-					<div className="flex items-center justify-center h-full  text-destructive">
-						<span>Failed to load data</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
+  if (!nodes) {
+    return (
+      <div className="w-full max-w-7xl mx-auto">
+        <div className="mb-6 border min-h-[55vh] rounded-lg h-full">
+          <div className="flex items-center justify-center h-full  text-destructive">
+            <span>Failed to load data</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   const totalNodes = nodes.length;
-  const activeNodesCount = nodes.filter((node) => node.Status === "Ready").length;
-  const managerNodesCount = nodes.filter((node) =>node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable").length;
+  const activeNodesCount = nodes.filter(
+    (node) => node.Status === "Ready"
+  ).length;
+  const managerNodesCount = nodes.filter(
+    (node) =>
+      node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"
+  ).length;
   const activeNodes = nodes.filter((node) => node.Status === "Ready");
-  const managerNodes = nodes.filter((node) => node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable");
+  const managerNodes = nodes.filter(
+    (node) =>
+      node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"
+  );
 
   return (
     <div className="min-h-screen">
       <div className="w-full max-w-7xl mx-auto space-y-6 py-4">
         <header className="flex items-center justify-between">
           <div className="space-y-1">
-            <h1 className="text-2xl font-semibold tracking-tight">Docker Swarm Overview</h1>
-            <p className="text-sm text-muted-foreground">Monitor and manage your Docker Swarm cluster</p>
+            <h1 className="text-2xl font-semibold tracking-tight">
+              Docker Swarm Overview
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              Monitor and manage your Docker Swarm cluster
+            </p>
           </div>
           {!serverId && (
-            <Button onClick={() => window.location.replace("/dashboard/settings/cluster")}>
+            <Button
+              onClick={() =>
+                window.location.replace("/dashboard/settings/cluster")
+              }
+            >
               <Settings className="mr-2 h-4 w-4" />
               Manage Cluster
             </Button>
@@ -87,12 +97,13 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 
           <Card className="bg-background">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Active Nodes
-                <Badge variant="green">
-                  Online
-                </Badge>
-              </CardTitle>
+              <div className="flex items-center gap-2">
+                <CardTitle className="text-sm font-medium">
+                  Active Nodes
+                </CardTitle>
+                <Badge variant="green">Online</Badge>
+
+              </div>
               <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
                 <Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
               </div>
@@ -121,12 +132,13 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 
           <Card className="bg-background">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Manager Nodes
-                <Badge variant="green">
-                  Online
-                </Badge>
-              </CardTitle>
+              <div className="flex items-center gap-2">
+                <CardTitle className="text-sm font-medium">
+                  Manager Nodes
+                </CardTitle>
+                <Badge variant="green">Online</Badge>
+
+              </div>
               <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
                 <Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
               </div>
@@ -162,4 +174,4 @@ export default function SwarmMonitorCard({ serverId }: Props) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

From b17369264cfa2cef011a4173ee0dbd1297cfdd87 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Wed, 1 Jan 2025 19:02:24 -0600
Subject: [PATCH 2/2] refactor: remove min-h-screen

---
 .../dashboard/swarm/monitoring-card.tsx       | 308 +++++++++---------
 1 file changed, 153 insertions(+), 155 deletions(-)

diff --git a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
index 16d2532c2..0dd34852a 100644
--- a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
@@ -2,176 +2,174 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import { Activity, Loader2, Monitor, Settings, Server } from "lucide-react";
 import { NodeCard } from "./details/details-card";
 
 interface Props {
-  serverId?: string;
+	serverId?: string;
 }
 
 export default function SwarmMonitorCard({ serverId }: Props) {
-  const { data: nodes, isLoading } = api.swarm.getNodes.useQuery({
-    serverId,
-  });
+	const { data: nodes, isLoading } = api.swarm.getNodes.useQuery({
+		serverId,
+	});
 
-  if (isLoading) {
-    return (
-      <div className="w-full max-w-7xl mx-auto">
-        <div className="mb-6 border min-h-[55vh] rounded-lg h-full">
-          <div className="flex items-center justify-center h-full text-muted-foreground">
-            <Loader2 className="h-6 w-6 animate-spin" />
-          </div>
-        </div>
-      </div>
-    );
-  }
+	if (isLoading) {
+		return (
+			<div className="w-full max-w-7xl mx-auto">
+				<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
+					<div className="flex items-center justify-center h-full text-muted-foreground">
+						<Loader2 className="h-6 w-6 animate-spin" />
+					</div>
+				</div>
+			</div>
+		);
+	}
 
-  if (!nodes) {
-    return (
-      <div className="w-full max-w-7xl mx-auto">
-        <div className="mb-6 border min-h-[55vh] rounded-lg h-full">
-          <div className="flex items-center justify-center h-full  text-destructive">
-            <span>Failed to load data</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
+	if (!nodes) {
+		return (
+			<div className="w-full max-w-7xl mx-auto">
+				<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
+					<div className="flex items-center justify-center h-full  text-destructive">
+						<span>Failed to load data</span>
+					</div>
+				</div>
+			</div>
+		);
+	}
 
-  const totalNodes = nodes.length;
-  const activeNodesCount = nodes.filter(
-    (node) => node.Status === "Ready"
-  ).length;
-  const managerNodesCount = nodes.filter(
-    (node) =>
-      node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"
-  ).length;
-  const activeNodes = nodes.filter((node) => node.Status === "Ready");
-  const managerNodes = nodes.filter(
-    (node) =>
-      node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"
-  );
+	const totalNodes = nodes.length;
+	const activeNodesCount = nodes.filter(
+		(node) => node.Status === "Ready",
+	).length;
+	const managerNodesCount = nodes.filter(
+		(node) =>
+			node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
+	).length;
+	const activeNodes = nodes.filter((node) => node.Status === "Ready");
+	const managerNodes = nodes.filter(
+		(node) =>
+			node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
+	);
 
-  return (
-    <div className="min-h-screen">
-      <div className="w-full max-w-7xl mx-auto space-y-6 py-4">
-        <header className="flex items-center justify-between">
-          <div className="space-y-1">
-            <h1 className="text-2xl font-semibold tracking-tight">
-              Docker Swarm Overview
-            </h1>
-            <p className="text-sm text-muted-foreground">
-              Monitor and manage your Docker Swarm cluster
-            </p>
-          </div>
-          {!serverId && (
-            <Button
-              onClick={() =>
-                window.location.replace("/dashboard/settings/cluster")
-              }
-            >
-              <Settings className="mr-2 h-4 w-4" />
-              Manage Cluster
-            </Button>
-          )}
-        </header>
+	return (
+		<div>
+			<div className="w-full max-w-7xl mx-auto space-y-6 py-4">
+				<header className="flex items-center justify-between">
+					<div className="space-y-1">
+						<h1 className="text-2xl font-semibold tracking-tight">
+							Docker Swarm Overview
+						</h1>
+						<p className="text-sm text-muted-foreground">
+							Monitor and manage your Docker Swarm cluster
+						</p>
+					</div>
+					{!serverId && (
+						<Button
+							onClick={() =>
+								window.location.replace("/dashboard/settings/cluster")
+							}
+						>
+							<Settings className="mr-2 h-4 w-4" />
+							Manage Cluster
+						</Button>
+					)}
+				</header>
 
-        <div className="grid gap-6 md:grid-cols-3">
-          <Card className="bg-background">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Total Nodes</CardTitle>
-              <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
-                <Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{totalNodes}</div>
-            </CardContent>
-          </Card>
+				<div className="grid gap-6 md:grid-cols-3">
+					<Card className="bg-background">
+						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+							<CardTitle className="text-sm font-medium">Total Nodes</CardTitle>
+							<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+								<Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+							</div>
+						</CardHeader>
+						<CardContent>
+							<div className="text-2xl font-bold">{totalNodes}</div>
+						</CardContent>
+					</Card>
 
-          <Card className="bg-background">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <div className="flex items-center gap-2">
-                <CardTitle className="text-sm font-medium">
-                  Active Nodes
-                </CardTitle>
-                <Badge variant="green">Online</Badge>
+					<Card className="bg-background">
+						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+							<div className="flex items-center gap-2">
+								<CardTitle className="text-sm font-medium">
+									Active Nodes
+								</CardTitle>
+								<Badge variant="green">Online</Badge>
+							</div>
+							<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+								<Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+							</div>
+						</CardHeader>
+						<CardContent>
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger>
+										<div className="text-2xl font-bold">
+											{activeNodesCount} / {totalNodes}
+										</div>
+									</TooltipTrigger>
+									<TooltipContent>
+										<div className="max-h-48 overflow-y-auto">
+											{activeNodes.map((node) => (
+												<div key={node.ID} className="flex items-center gap-2">
+													{node.Hostname}
+												</div>
+											))}
+										</div>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</CardContent>
+					</Card>
 
-              </div>
-              <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
-                <Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
-              </div>
-            </CardHeader>
-            <CardContent>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <div className="text-2xl font-bold">
-                      {activeNodesCount} / {totalNodes}
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="max-h-48 overflow-y-auto">
-                      {activeNodes.map((node) => (
-                        <div key={node.ID} className="flex items-center gap-2">
-                          {node.Hostname}
-                        </div>
-                      ))}
-                    </div>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </CardContent>
-          </Card>
+					<Card className="bg-background">
+						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+							<div className="flex items-center gap-2">
+								<CardTitle className="text-sm font-medium">
+									Manager Nodes
+								</CardTitle>
+								<Badge variant="green">Online</Badge>
+							</div>
+							<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+								<Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+							</div>
+						</CardHeader>
+						<CardContent>
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger>
+										<div className="text-2xl font-bold">
+											{managerNodesCount} / {totalNodes}
+										</div>
+									</TooltipTrigger>
+									<TooltipContent>
+										<div className="max-h-48 overflow-y-auto">
+											{managerNodes.map((node) => (
+												<div key={node.ID} className="flex items-center gap-2">
+													{node.Hostname}
+												</div>
+											))}
+										</div>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</CardContent>
+					</Card>
+				</div>
 
-          <Card className="bg-background">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <div className="flex items-center gap-2">
-                <CardTitle className="text-sm font-medium">
-                  Manager Nodes
-                </CardTitle>
-                <Badge variant="green">Online</Badge>
-
-              </div>
-              <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
-                <Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
-              </div>
-            </CardHeader>
-            <CardContent>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <div className="text-2xl font-bold">
-                      {managerNodesCount} / {totalNodes}
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="max-h-48 overflow-y-auto">
-                      {managerNodes.map((node) => (
-                        <div key={node.ID} className="flex items-center gap-2">
-                          {node.Hostname}
-                        </div>
-                      ))}
-                    </div>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </CardContent>
-          </Card>
-        </div>
-
-        <div className="flex flex-row gap-4">
-          {nodes.map((node) => (
-            <NodeCard key={node.ID} node={node} serverId={serverId} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+				<div className="flex flex-row gap-4">
+					{nodes.map((node) => (
+						<NodeCard key={node.ID} node={node} serverId={serverId} />
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }