Merge pull request #3633 from physikal/claude/swarm-container-breakdown-VJhK7

feat(swarm): add container breakdown by node with live metrics

Author: Siumauricio

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

@@ -1,6 +1,9 @@
 import { useState } from "react";
+import { Card } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ShowSwarmContainers } from "../../swarm/containers/show-swarm-containers";
 import SwarmMonitorCard from "../../swarm/monitoring-card";
 
 interface Props {
@@ -21,9 +24,24 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-7xl  ">
-				<div className="grid w-full gap-1">
-					<SwarmMonitorCard serverId={serverId} />
-				</div>
+				<Tabs defaultValue="overview">
+					<TabsList>
+						<TabsTrigger value="overview">Overview</TabsTrigger>
+						<TabsTrigger value="containers">Containers</TabsTrigger>
+					</TabsList>
+					<TabsContent value="overview">
+						<div className="grid w-full gap-1">
+							<SwarmMonitorCard serverId={serverId} />
+						</div>
+					</TabsContent>
+					<TabsContent value="containers">
+						<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
+							<div className="rounded-xl bg-background shadow-md p-6">
+								<ShowSwarmContainers serverId={serverId} />
+							</div>
+						</Card>
+					</TabsContent>
+				</Tabs>
 			</DialogContent>
 		</Dialog>
 	);

apps/dokploy/components/dashboard/swarm/containers/container-row.tsx

@@ -0,0 +1,98 @@
+import { AlertCircle, HardDrive, Network } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { TableCell, TableRow } from "@/components/ui/table";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { ContainerInfo, ContainerStat } from "./types";
+import { formatCpu, formatIOValue, formatMemUsage } from "./utils";
+
+interface ContainerRowProps {
+	container: ContainerInfo;
+	stat: ContainerStat | undefined;
+}
+
+export const ContainerRow = ({ container, stat }: ContainerRowProps) => {
+	const isRunning = container.CurrentState.startsWith("Running");
+	const hasError = container.Error && container.Error.trim() !== "";
+
+	const stateBadge = (
+		<Badge
+			variant={hasError ? "destructive" : isRunning ? "default" : "destructive"}
+		>
+			{container.CurrentState}
+		</Badge>
+	);
+
+	return (
+		<TableRow>
+			<TableCell>
+				<div className="flex flex-col gap-1">
+					<span className="font-medium text-sm">{container.Name}</span>
+					<span className="text-xs text-muted-foreground truncate max-w-[230px]">
+						{container.Image}
+					</span>
+				</div>
+			</TableCell>
+			<TableCell>
+				{hasError ? (
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<span className="inline-flex items-center gap-1.5 cursor-help">
+									{stateBadge}
+									<AlertCircle className="h-3.5 w-3.5 text-destructive" />
+								</span>
+							</TooltipTrigger>
+							<TooltipContent side="top" className="max-w-xs">
+								<p className="text-xs font-medium">Error:</p>
+								<p className="text-xs">{container.Error}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+				) : (
+					stateBadge
+				)}
+			</TableCell>
+			<TableCell className="text-right">
+				{stat ? (
+					<span className="text-sm font-medium">{formatCpu(stat.CPUPerc)}</span>
+				) : (
+					<span className="text-xs text-muted-foreground">--</span>
+				)}
+			</TableCell>
+			<TableCell className="text-right">
+				{stat ? (
+					<span className="text-sm font-medium">
+						{formatMemUsage(stat.MemUsage)}
+					</span>
+				) : (
+					<span className="text-xs text-muted-foreground">--</span>
+				)}
+			</TableCell>
+			<TableCell className="text-right">
+				{stat ? (
+					<div className="flex items-center justify-end gap-1.5">
+						<HardDrive className="h-3 w-3 text-muted-foreground" />
+						<span className="text-sm">{formatIOValue(stat.BlockIO)}</span>
+					</div>
+				) : (
+					<span className="text-xs text-muted-foreground">--</span>
+				)}
+			</TableCell>
+			<TableCell className="text-right">
+				{stat ? (
+					<div className="flex items-center justify-end gap-1.5">
+						<Network className="h-3 w-3 text-muted-foreground" />
+						<span className="text-sm">{formatIOValue(stat.NetIO)}</span>
+					</div>
+				) : (
+					<span className="text-xs text-muted-foreground">--</span>
+				)}
+			</TableCell>
+		</TableRow>
+	);
+};