feat: add monitoring card

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

@@ -0,0 +1,198 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import {
+	Activity,
+	AlertCircle,
+	CheckCircle,
+	HelpCircle,
+	Loader2,
+	Server,
+} from "lucide-react";
+import { NodeCard } from "./show/deatils-card";
+
+export interface SwarmList {
+	ID: string;
+	Hostname: string;
+	Availability: string;
+	EngineVersion: string;
+	Status: string;
+	ManagerStatus: string;
+	TLSStatus: string;
+}
+
+interface SwarmMonitorCardProps {
+	nodes: SwarmList[];
+}
+
+export default function SwarmMonitorCard() {
+	const { data: nodes, isLoading } = api.swarm.getNodes.useQuery();
+
+	if (isLoading) {
+		return (
+			<div className="w-full max-w-7xl mx-auto">
+				<Card className="mb-6">
+					<CardHeader>
+						<CardTitle className="flex items-center gap-2">
+							<Activity className="h-6 w-6" />
+							Docker Swarm Monitor
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="flex items-center justify-center">
+							<Loader2 className="h-6 w-6 animate-spin" />
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	if (!nodes) {
+		return (
+			<Card className="w-full max-w-md">
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<AlertCircle className="h-6 w-6" />
+						Docker Swarm Monitor
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="flex items-center justify-center">
+						<span>Failed to load data</span>
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	console.log(nodes);
+	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 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" />;
+		}
+	};
+
+	return (
+		<div className="w-full max-w-7xl mx-auto">
+			<Card className="mb-6">
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<Server className="h-6 w-6" />
+						Docker Swarm Monitor
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="grid gap-4">
+						<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>
+										{activeNodes.map((node) => (
+											<div key={node.id} className="flex items-center gap-2">
+												{getStatusIcon(node.Status)}
+												{node.Hostname}
+											</div>
+										))}
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+							{/* <Badge variant="secondary" className="bg-green-100 text-green-800">
+							{activeNodesCount} / {totalNodes}
+						</Badge> */}
+						</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>
+										{managerNodes.map((node) => (
+											<div key={node.id} className="flex items-center gap-2">
+												{getStatusIcon(node.Status)}
+												{node.Hostname}
+											</div>
+										))}
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+							{/* <Badge variant="secondary" className="bg-blue-100 text-blue-800">
+							{managerNodes} / {totalNodes}
+						</Badge> */}
+						</div>
+						<div className="border-t pt-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>
+					</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} />
+				))}
+			</div>
+		</div>
+	);
+}