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

feat: swarm overview style

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

@@ -39,11 +39,8 @@ 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>
+					<SwarmMonitorCard serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>

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

@@ -1,140 +1,127 @@
 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,
-	CheckCircle,
-	HelpCircle,
-	Loader2,
-	LoaderIcon,
+  Box,
+  Cpu,
+  Database,
+  HardDrive,
+  Loader2,
 } from "lucide-react";
 import { ShowNodeApplications } from "../applications/show-applications";
 import { ShowNodeConfig } from "./show-node-config";
 
 export interface SwarmList {
-	ID: string;
-	Hostname: string;
-	Availability: string;
-	EngineVersion: string;
-	Status: string;
-	ManagerStatus: string;
-	TLSStatus: string;
+  ID: string;
+  Hostname: string;
+  Availability: string;
+  EngineVersion: string;
+  Status: string;
+  ManagerStatus: string;
+  TLSStatus: string;
 }
 
 interface Props {
-	node: SwarmList;
-	serverId?: string;
+  node: SwarmList;
+  serverId?: string;
 }
 
 export function NodeCard({ node, serverId }: Props) {
-	const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
-		nodeId: node.ID,
-		serverId,
-	});
+  const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
+    nodeId: node.ID,
+    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">
-				<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">
-							{node.ManagerStatus || "Worker"}
-						</Badge>
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<div className="flex items-center justify-center">
-						<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-					</div>
-				</CardContent>
-			</Card>
-		);
-	}
+  if (isLoading) {
+    return (
+      <Card className="w-full bg-background">
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between text-lg">
+            <span className="flex items-center gap-2">  
+              {node.Hostname}
+            </span>
+            <Badge variant="green">
+              {node.ManagerStatus || "Worker"}
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
 
-	return (
-		<Card className="w-full bg-transparent">
-			<CardHeader>
-				<CardTitle className="flex items-center justify-between">
-					<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="flex justify-between">
-						<span className="font-medium">Status:</span>
-						<span>{node.Status}</span>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">IP Address:</span>
-						{isLoading ? (
-							<LoaderIcon className="animate-spin" />
-						) : (
-							<span>{data?.Status?.Addr}</span>
-						)}
-					</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">
-					<ShowNodeConfig nodeId={node.ID} serverId={serverId} />
-					<ShowNodeApplications serverId={serverId} />
-				</div>
-			</CardContent>
-		</Card>
-	);
-}
+  return (
+    <Card className="w-full bg-background">
+      <CardHeader>
+        <CardTitle className="text-lg">Node Status</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          <div className="flex flex-wrap 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>
+              <Badge variant="green">
+                {node.ManagerStatus || "Worker"}
+              </Badge>
+            </div>
+            <div className="flex flex-wrap items-center space-x-4">
+              <Badge variant="green" >
+                TLS Status: {node.TLSStatus}
+              </Badge>
+              <Badge variant="blue">
+                Availability: {node.Availability}
+              </Badge>
+            </div>
+          </div>
+
+          <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

@@ -2,35 +2,35 @@ 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 {
-	AlertCircle,
-	CheckCircle,
-	HelpCircle,
-	Loader2,
-	Server,
+  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">
+					<div className="flex items-center justify-center h-full text-muted-foreground">
 						<Loader2 className="h-6 w-6 animate-spin" />
 					</div>
 				</div>
@@ -50,139 +50,116 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 		);
 	}
 
-	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 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 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>
 
-	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" />;
-		}
-	};
+        <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>
 
-	return (
-		<div className="w-full max-w-7xl mx-auto">
-			<div className="flex justify-between items-center mb-4">
-				<h1 className="text-xl font-bold">Docker Swarm Overview</h1>
-				{!serverId && (
-					<Button
-						type="button"
-						onClick={() =>
-							window.location.replace("/dashboard/settings/cluster")
-						}
-					>
-						Manage Cluster
-					</Button>
-				)}
-			</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="flex justify-between items-center">
-							<span className="text-sm font-medium">Total Nodes:</span>
-							<Badge variant="secondary">{totalNodes}</Badge>
-						</div>
-						<div className="flex justify-between items-center">
-							<span className="text-sm font-medium">Active Nodes:</span>
-							<TooltipProvider>
-								<Tooltip>
-									<TooltipTrigger>
-										<Badge
-											variant="secondary"
-											className="bg-green-100 dark:bg-green-400 text-black"
-										>
-											{activeNodesCount} / {totalNodes}
-										</Badge>
-									</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>
-											))}
-										</div>
-									</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
-						</div>
-						<div className="flex justify-between items-center">
-							<span className="text-sm font-medium">Manager Nodes:</span>
-							<TooltipProvider>
-								<Tooltip>
-									<TooltipTrigger>
-										<Badge
-											variant="secondary"
-											className="bg-blue-100 dark:bg-blue-400 text-black"
-										>
-											{managerNodesCount} / {totalNodes}
-										</Badge>
-									</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>
-											))}
-										</div>
-									</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">
-				{nodes.map((node) => (
-					<NodeCard key={node.ID} node={node} serverId={serverId} />
-				))}
-			</div>
-		</div>
-	);
-}
+          <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>
+            </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">
+              <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>
+            </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>
+  );
+}

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>
+			<SwarmMonitorCard />
 		</>
 	);
 };