Merge pull request #1016 from 190km/style/swarm

feat: swarm overview style

apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx

@@ -39,12 +39,9 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
 						</p>
 					</div>
 				</DialogHeader>
-
 				<div className="grid w-full gap-1">
-					<div className="flex flex-wrap gap-4 py-4">
 					<SwarmMonitorCard serverId={serverId} />
 				</div>
-				</div>
 			</DialogContent>
 		</Dialog>
 	);

apps/dokploy/components/dashboard/swarm/details/details-card.tsx

@@ -1,12 +1,13 @@
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 import { api } from "@/utils/api";
 import {
-	AlertCircle,
+  Box,
-	CheckCircle,
+  Cpu,
-	HelpCircle,
+  Database,
+  HardDrive,
   Loader2,
-	LoaderIcon,
 } from "lucide-react";
 import { ShowNodeApplications } from "../applications/show-applications";
 import { ShowNodeConfig } from "./show-node-config";
@@ -32,27 +33,16 @@ export function NodeCard({ node, serverId }: Props) {
     serverId,
   });
 
-	const getStatusIcon = (status: string) => {
-		switch (status) {
-			case "Ready":
-				return <CheckCircle className="h-4 w-4 text-green-500" />;
-			case "Down":
-				return <AlertCircle className="h-4 w-4 text-red-500" />;
-			default:
-				return <HelpCircle className="h-4 w-4 text-yellow-500" />;
-		}
-	};
 
   if (isLoading) {
     return (
-			<Card className="w-full bg-transparent">
+      <Card className="w-full bg-background">
         <CardHeader>
           <CardTitle className="flex items-center justify-between text-lg">
             <span className="flex items-center gap-2">  
-							{getStatusIcon(node.Status)}
               {node.Hostname}
             </span>
-						<Badge variant="outline" className="text-xs">
+            <Badge variant="green">
               {node.ManagerStatus || "Worker"}
             </Badge>
           </CardTitle>
@@ -67,73 +57,70 @@ export function NodeCard({ node, serverId }: Props) {
   }
 
   return (
-		<Card className="w-full bg-transparent">
+    <Card className="w-full bg-background">
       <CardHeader>
-				<CardTitle className="flex items-center justify-between">
+        <CardTitle className="text-lg">Node Status</CardTitle>
-					<span className="flex items-center gap-2 text-lg">
-						{getStatusIcon(node.Status)}
-						{node.Hostname}
-					</span>
-					<Badge variant="outline" className="text-xs">
-						{node.ManagerStatus || "Worker"}
-					</Badge>
-				</CardTitle>
       </CardHeader>
       <CardContent>
-				<div className="grid gap-2 text-sm">
+        <div className="space-y-6">
-					<div className="flex justify-between">
+          <div className="flex flex-wrap items-center justify-between">
-						<span className="font-medium">Status:</span>
+            <div className="flex items-center space-x-4 p-2 rounded-xl border">
-						<span>{node.Status}</span>
+              <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>
+              <Badge variant="green">
+                {node.ManagerStatus || "Worker"}
+              </Badge>
             </div>
-					<div className="flex justify-between">
+            <div className="flex flex-wrap items-center space-x-4">
-						<span className="font-medium">IP Address:</span>
+              <Badge variant="green" >
-						{isLoading ? (
+                TLS Status: {node.TLSStatus}
-							<LoaderIcon className="animate-spin" />
+              </Badge>
-						) : (
+              <Badge variant="blue">
-							<span>{data?.Status?.Addr}</span>
+                Availability: {node.Availability}
-						)}
+              </Badge>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">Availability:</span>
-						<span>{node.Availability}</span>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">Engine Version:</span>
-						<span>{node.EngineVersion}</span>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">CPU:</span>
-						{isLoading ? (
-							<LoaderIcon className="animate-spin" />
-						) : (
-							<span>
-								{(data?.Description?.Resources?.NanoCPUs / 1e9).toFixed(2)} GHz
-							</span>
-						)}
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">Memory:</span>
-						{isLoading ? (
-							<LoaderIcon className="animate-spin" />
-						) : (
-							<span>
-								{(
-									data?.Description?.Resources?.MemoryBytes /
-									1024 ** 3
-								).toFixed(2)}{" "}
-								GB
-							</span>
-						)}
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">TLS Status:</span>
-						<span>{node.TLSStatus}</span>
             </div>
           </div>
-				<div className="flex gap-2 mt-4">
+
+          <Separator />
+
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div className="space-y-2 flex flex-col items-center text-center">
+              <div className="flex items-center text-sm text-muted-foreground">
+                <HardDrive className="mr-2 h-4 w-4" />
+                Engine Version
+              </div>
+              <div>{node.EngineVersion}</div>
+            </div>
+            <div className="space-y-2 flex flex-col items-center text-center">
+              <div className="flex items-center text-sm text-muted-foreground">
+                <Cpu className="mr-2 h-4 w-4" />
+                CPU
+              </div>
+              <div>{data && (data.Description?.Resources?.NanoCPUs / 1e9).toFixed(2)} Core(s)</div>
+            </div>
+            <div className="space-y-2 flex flex-col items-center text-center">
+              <div className="flex items-center text-sm text-muted-foreground">
+                <Database className="mr-2 h-4 w-4" />
+                Memory
+              </div>
+              <div>
+                {data && (data.Description?.Resources?.MemoryBytes / 1024 ** 3).toFixed(2)} GB
+              </div>
+            </div>
+            <div className="space-y-2 flex flex-col items-center text-center">
+              <div className="flex items-center text-sm text-muted-foreground">
+                <Box className="mr-2 h-4 w-4" />
+                IP Address
+              </div>
+              <div>{data?.Status?.Addr}</div>
+            </div>
+          </div>
+
+          <div className="flex justify-end w-full space-x-4">
 		  	<ShowNodeConfig nodeId={node.ID} serverId={serverId} />
             <ShowNodeApplications serverId={serverId} />
           </div>
+        </div>
       </CardContent>
     </Card>
   );

apps/dokploy/components/dashboard/swarm/monitoring-card.tsx

@@ -9,10 +9,10 @@ import {
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import {
-	AlertCircle,
+  Activity,
-	CheckCircle,
-	HelpCircle,
   Loader2,
+  Monitor,
+  Settings,
   Server,
 } from "lucide-react";
 import { NodeCard } from "./details/details-card";
@@ -51,78 +51,64 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 	}
 
   const totalNodes = nodes.length;
-	const activeNodesCount = nodes.filter(
+  const activeNodesCount = nodes.filter((node) => node.Status === "Ready").length;
-		(node) => node.Status === "Ready",
+  const managerNodesCount = nodes.filter((node) =>node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable").length;
-	).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(
+  const managerNodes = nodes.filter((node) => node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable");
-		(node) =>
-			node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
-	);
-
-	const getStatusIcon = (status: string) => {
-		switch (status) {
-			case "Ready":
-				return <CheckCircle className="h-4 w-4 text-green-500" />;
-			case "Down":
-				return <AlertCircle className="h-4 w-4 text-red-500" />;
-			case "Disconnected":
-				return <AlertCircle className="h-4 w-4 text-red-800" />;
-			default:
-				return <HelpCircle className="h-4 w-4 text-yellow-500" />;
-		}
-	};
 
   return (
-		<div className="w-full max-w-7xl mx-auto">
+    <div className="min-h-screen">
-			<div className="flex justify-between items-center mb-4">
+      <div className="w-full max-w-7xl mx-auto space-y-6 py-4">
-				<h1 className="text-xl font-bold">Docker Swarm Overview</h1>
+        <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
+            <Button onClick={() => window.location.replace("/dashboard/settings/cluster")}>
-						type="button"
+              <Settings className="mr-2 h-4 w-4" />
-						onClick={() =>
-							window.location.replace("/dashboard/settings/cluster")
-						}
-					>
               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>
-			<Card className="mb-6 bg-transparent">
-				<CardHeader className="flex flex-row items-center justify-between">
-					<CardTitle className="flex items-center gap-2 text-xl">
-						<Server className="size-4" />
-						Monitor
-					</CardTitle>
             </CardHeader>
             <CardContent>
-					<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              <div className="text-2xl font-bold">{totalNodes}</div>
-						<div className="flex justify-between items-center">
+            </CardContent>
-							<span className="text-sm font-medium">Total Nodes:</span>
+          </Card>
-							<Badge variant="secondary">{totalNodes}</Badge>
+
+          <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="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>
-						<div className="flex justify-between items-center">
+            </CardHeader>
-							<span className="text-sm font-medium">Active Nodes:</span>
+            <CardContent>
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger>
-										<Badge
+                    <div className="text-2xl font-bold">
-											variant="secondary"
-											className="bg-green-100 dark:bg-green-400 text-black"
-										>
                       {activeNodesCount} / {totalNodes}
-										</Badge>
+                    </div>
                   </TooltipTrigger>
                   <TooltipContent>
                     <div className="max-h-48 overflow-y-auto">
                       {activeNodes.map((node) => (
                         <div key={node.ID} className="flex items-center gap-2">
-													{getStatusIcon(node.Status)}
                           {node.Hostname}
                         </div>
                       ))}
@@ -130,24 +116,33 @@ export default function SwarmMonitorCard({ serverId }: Props) {
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
+            </CardContent>
+          </Card>
+
+          <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="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>
-						<div className="flex justify-between items-center">
+            </CardHeader>
-							<span className="text-sm font-medium">Manager Nodes:</span>
+            <CardContent>
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger>
-										<Badge
+                    <div className="text-2xl font-bold">
-											variant="secondary"
-											className="bg-blue-100 dark:bg-blue-400 text-black"
-										>
                       {managerNodesCount} / {totalNodes}
-										</Badge>
+                    </div>
                   </TooltipTrigger>
                   <TooltipContent>
                     <div className="max-h-48 overflow-y-auto">
                       {managerNodes.map((node) => (
                         <div key={node.ID} className="flex items-center gap-2">
-													{getStatusIcon(node.Status)}
                           {node.Hostname}
                         </div>
                       ))}
@@ -155,34 +150,16 @@ export default function SwarmMonitorCard({ serverId }: Props) {
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
-						</div>
-					</div>
-					<div className="border-t pt-4 mt-4">
-						<h4 className="text-sm font-semibold mb-2">Node Status:</h4>
-						<ul className="space-y-2">
-							{nodes.map((node) => (
-								<li
-									key={node.ID}
-									className="flex justify-between items-center text-sm"
-								>
-									<span className="flex items-center gap-2">
-										{getStatusIcon(node.Status)}
-										{node.Hostname}
-									</span>
-									<Badge variant="outline" className="text-xs">
-										{node.ManagerStatus || "Worker"}
-									</Badge>
-								</li>
-							))}
-						</ul>
-					</div>
             </CardContent>
           </Card>
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        </div>
+
+        <div className="flex flex-row gap-4">
           {nodes.map((node) => (
             <NodeCard key={node.ID} node={node} serverId={serverId} />
           ))}
         </div>
       </div>
+    </div>
   );
 }

apps/dokploy/pages/dashboard/swarm.tsx

@@ -10,9 +10,7 @@ import superjson from "superjson";
 const Dashboard = () => {
 	return (
 		<>
-			<div className="flex flex-wrap gap-4 py-4">
 			<SwarmMonitorCard />
-			</div>
 		</>
 	);
 };