[autofix.ci] apply automated fixes

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

@@ -1,13 +1,6 @@
-import {
+import { AlertCircle, HardDrive, Network } from "lucide-react";
-	AlertCircle,
-	HardDrive,
-	Network,
-} from "lucide-react";
 import { Badge } from "@/components/ui/badge";
-import {
+import { TableCell, TableRow } from "@/components/ui/table";
-	TableCell,
-	TableRow,
-} from "@/components/ui/table";
 import {
 	Tooltip,
 	TooltipContent,
@@ -27,7 +20,9 @@ export const ContainerRow = ({ container, stat }: ContainerRowProps) => {
 	const hasError = container.Error && container.Error.trim() !== "";
 
 	const stateBadge = (
-		<Badge variant={hasError ? "destructive" : isRunning ? "default" : "destructive"}>
+		<Badge
+			variant={hasError ? "destructive" : isRunning ? "default" : "destructive"}
+		>
 			{container.CurrentState}
 		</Badge>
 	);
@@ -36,9 +31,7 @@ export const ContainerRow = ({ container, stat }: ContainerRowProps) => {
 		<TableRow>
 			<TableCell>
 				<div className="flex flex-col gap-1">
-					<span className="font-medium text-sm">
+					<span className="font-medium text-sm">{container.Name}</span>
-						{container.Name}
-					</span>
 					<span className="text-xs text-muted-foreground truncate max-w-[230px]">
 						{container.Image}
 					</span>
@@ -66,9 +59,7 @@ export const ContainerRow = ({ container, stat }: ContainerRowProps) => {
 			</TableCell>
 			<TableCell className="text-right">
 				{stat ? (
-					<span className="text-sm font-medium">
+					<span className="text-sm font-medium">{formatCpu(stat.CPUPerc)}</span>
-						{formatCpu(stat.CPUPerc)}
-					</span>
 				) : (
 					<span className="text-xs text-muted-foreground">--</span>
 				)}

apps/dokploy/components/dashboard/swarm/containers/node-section.tsx

@@ -1,8 +1,4 @@
-import {
+import { ChevronDown, ChevronRight, Server } from "lucide-react";
-	ChevronDown,
-	ChevronRight,
-	Server,
-} from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -63,9 +59,7 @@ export const NodeSection = ({
 										<span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-destructive" />
 									)}
 								</div>
-								<CardTitle className="text-base">
+								<CardTitle className="text-base">{group.nodeName}</CardTitle>
-									{group.nodeName}
-								</CardTitle>
 								{group.nodeStatus && (
 									<Badge
 										variant={
@@ -86,14 +80,14 @@ export const NodeSection = ({
 								</Badge>
 								{nodeDown ? (
 									<Badge variant="destructive">
-										{group.nodeStatus?.Status} / {group.nodeStatus?.Availability}
+										{group.nodeStatus?.Status} /{" "}
+										{group.nodeStatus?.Availability}
 									</Badge>
 								) : runningCount === group.containers.length ? (
 									<Badge variant="default">All Running</Badge>
 								) : (
 									<Badge variant="orange">
-										{runningCount}/{group.containers.length}{" "}
+										{runningCount}/{group.containers.length} Running
-										Running
 									</Badge>
 								)}
 							</div>
@@ -105,29 +99,17 @@ export const NodeSection = ({
 						<Table>
 							<TableHeader>
 								<TableRow>
-									<TableHead className="w-[250px]">
+									<TableHead className="w-[250px]">Container</TableHead>
-										Container
-									</TableHead>
 									<TableHead>State</TableHead>
-									<TableHead className="text-right">
+									<TableHead className="text-right">CPU</TableHead>
-										CPU
+									<TableHead className="text-right">Memory</TableHead>
-									</TableHead>
+									<TableHead className="text-right">Block I/O</TableHead>
-									<TableHead className="text-right">
+									<TableHead className="text-right">Network I/O</TableHead>
-										Memory
-									</TableHead>
-									<TableHead className="text-right">
-										Block I/O
-									</TableHead>
-									<TableHead className="text-right">
-										Network I/O
-									</TableHead>
 								</TableRow>
 							</TableHeader>
 							<TableBody>
 								{group.containers.map((container) => {
-									const stat = findStatsForContainer(
+									const stat = findStatsForContainer(container.Name);
-										container.Name,
-									);
 									return (
 										<ContainerRow
 											key={container.ID}

apps/dokploy/components/dashboard/swarm/containers/show-swarm-containers.tsx

@@ -81,9 +81,8 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 	if (nodeApps && appDetails) {
 		for (const app of nodeApps) {
 			const details =
-				appDetails?.filter(
+				appDetails?.filter((detail: { Name: string }) =>
-					(detail: { Name: string }) =>
+					detail.Name.startsWith(`${app.Name}.`),
-						detail.Name.startsWith(`${app.Name}.`),
 				) || [];
 
 			if (details.length === 0) {
@@ -236,22 +235,24 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 					<AlertTitle>No Swarm Services Found</AlertTitle>
 					<AlertDescription>
 						Docker Swarm is active with{" "}
-						<strong>{nodes?.length ?? 0} node(s)</strong>, but there
+						<strong>{nodes?.length ?? 0} node(s)</strong>, but there are no
-						are no application services running in the swarm.
+						application services running in the swarm.
 					</AlertDescription>
 				</Alert>
 				<div className="space-y-3 text-sm text-muted-foreground">
 					<p>
 						This view shows containers deployed as{" "}
-						<strong>Swarm services</strong>. Standalone or
+						<strong>Swarm services</strong>. Standalone or Docker Compose
-						Docker Compose containers won&apos;t appear here.
+						containers won&apos;t appear here.
+					</p>
+					<p>
+						To see containers in this view, make sure your applications are:
 					</p>
-					<p>To see containers in this view, make sure your applications are:</p>
 					<ol className="list-decimal list-inside space-y-2 ml-1">
 						<li>
-							<strong>Deployed as Swarm services</strong> &mdash;
+							<strong>Deployed as Swarm services</strong> &mdash; Applications
-							Applications in Dokploy deploy to Swarm by default.
+							in Dokploy deploy to Swarm by default. Docker Compose projects
-							Docker Compose projects need to use{" "}
+							need to use{" "}
 							<code className="bg-muted px-1.5 py-0.5 rounded text-xs">
 								Stack
 							</code>{" "}
@@ -262,9 +263,9 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 							) to run as Swarm services.
 						</li>
 						<li>
-							<strong>Using a registry</strong> (for multi-node
+							<strong>Using a registry</strong> (for multi-node setups) &mdash;
-							setups) &mdash; Worker nodes need to pull images
+							Worker nodes need to pull images from a shared registry. Configure
-							from a shared registry. Configure one in{" "}
+							one in{" "}
 							<Link
 								href="/dashboard/settings/cluster"
 								className="text-primary underline underline-offset-4"
@@ -274,9 +275,8 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 							.
 						</li>
 						<li>
-							<strong>Successfully built and deployed</strong>{" "}
+							<strong>Successfully built and deployed</strong> &mdash; Check
-							&mdash; Check your project&apos;s deployment logs for
+							your project&apos;s deployment logs for errors.
-							errors.
 						</li>
 					</ol>
 					<DocLinks />
@@ -303,8 +303,8 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 					<AlertTriangle className="h-4 w-4" />
 					<AlertTitle>No Running Containers</AlertTitle>
 					<AlertDescription>
-						Found <strong>{nodeApps.length} service(s)</strong> in
+						Found <strong>{nodeApps.length} service(s)</strong> in the swarm,
-						the swarm, but none have running containers.
+						but none have running containers.
 					</AlertDescription>
 				</Alert>
 				{hasErrors && (
@@ -328,16 +328,13 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 				<div className="space-y-3 text-sm text-muted-foreground">
 					<p>This can happen when:</p>
 					<ul className="list-disc list-inside space-y-2 ml-1">
+						<li>Services are scaled to 0 replicas</li>
 						<li>
-							Services are scaled to 0 replicas
+							Containers are failing to start &mdash; check deployment logs for
+							errors
 						</li>
 						<li>
-							Containers are failing to start &mdash; check
+							Images can&apos;t be pulled on worker nodes &mdash; verify your{" "}
-							deployment logs for errors
-						</li>
-						<li>
-							Images can&apos;t be pulled on worker nodes &mdash;
-							verify your{" "}
 							<Link
 								href="/dashboard/settings/cluster"
 								className="text-primary underline underline-offset-4"
@@ -346,8 +343,8 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 							</Link>
 						</li>
 						<li>
-							Node constraints prevent scheduling &mdash; check
+							Node constraints prevent scheduling &mdash; check placement rules
-							placement rules in your app&apos;s Cluster settings
+							in your app&apos;s Cluster settings
 						</li>
 					</ul>
 					<DocLinks />
@@ -432,8 +429,7 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 						Container Breakdown by Node
 					</CardTitle>
 					<p className="text-sm text-muted-foreground">
-						Showing containers across{" "}
+						Showing containers across {nodes?.length ?? 0} swarm node(s)
-						{nodes?.length ?? 0} swarm node(s)
 						{statsLoading ? "" : " (metrics refresh every 5s)"}
 					</p>
 				</div>
@@ -446,17 +442,13 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 			<div className="grid gap-4 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">
+						<CardTitle className="text-sm font-medium">Swarm Nodes</CardTitle>
-							Swarm 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">
+						<div className="text-2xl font-bold">{nodes?.length ?? 0}</div>
-							{nodes?.length ?? 0}
-						</div>
 						{downNodes.length > 0 && (
 							<p className="text-xs text-destructive mt-1">
 								{downNodes.length} node(s) down or drained
@@ -467,17 +459,13 @@ export const ShowSwarmContainers = ({ 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">
+						<CardTitle className="text-sm font-medium">Services</CardTitle>
-							Services
-						</CardTitle>
 						<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
 							<Cpu className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
 						</div>
 					</CardHeader>
 					<CardContent>
-						<div className="text-2xl font-bold">
+						<div className="text-2xl font-bold">{nodeApps?.length ?? 0}</div>
-							{nodeApps?.length ?? 0}
-						</div>
 						{unscheduledServices.length > 0 && (
 							<p className="text-xs text-muted-foreground mt-1">
 								{unscheduledServices.length} with no running tasks
@@ -496,9 +484,7 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 						</div>
 					</CardHeader>
 					<CardContent>
-						<div className="text-2xl font-bold">
+						<div className="text-2xl font-bold">{runningContainers.length}</div>
-							{runningContainers.length}
-						</div>
 					</CardContent>
 				</Card>
 			</div>
@@ -507,19 +493,17 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 			{downNodes.length > 0 && (
 				<Alert variant="destructive">
 					<AlertTriangle className="h-4 w-4" />
-					<AlertTitle>
+					<AlertTitle>{downNodes.length} Node(s) Unavailable</AlertTitle>
-						{downNodes.length} Node(s) Unavailable
-					</AlertTitle>
 					<AlertDescription>
 						<p className="mb-2">
-							The following nodes are not ready or have been drained.
+							The following nodes are not ready or have been drained. Containers
-							Containers scheduled on these nodes may not be running.
+							scheduled on these nodes may not be running.
 						</p>
 						<ul className="list-disc list-inside space-y-1 text-xs">
 							{downNodes.map((node: SwarmNode) => (
 								<li key={node.ID}>
-									<strong>{node.Hostname}</strong> &mdash;{" "}
+									<strong>{node.Hostname}</strong> &mdash; Status: {node.Status}
-									Status: {node.Status}, Availability: {node.Availability}
+									, Availability: {node.Availability}
 									{node.ManagerStatus && ` (${node.ManagerStatus})`}
 								</li>
 							))}
@@ -543,9 +527,12 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 					<Info className="h-4 w-4" />
 					<AlertTitle>Multi-Node Metrics Note</AlertTitle>
 					<AlertDescription>
-						CPU, memory, and I/O metrics are collected from the manager
+						CPU, memory, and I/O metrics are collected from the manager node via{" "}
-						node via <code className="bg-muted px-1 py-0.5 rounded text-xs">docker stats</code>.
+						<code className="bg-muted px-1 py-0.5 rounded text-xs">
-						Containers running on worker nodes will show &ldquo;--&rdquo; for metrics.
+							docker stats
+						</code>
+						. Containers running on worker nodes will show &ldquo;--&rdquo; for
+						metrics.
 					</AlertDescription>
 				</Alert>
 			)}
@@ -571,8 +558,8 @@ export const ShowSwarmContainers = ({ serverId }: Props) => {
 					</AlertTitle>
 					<AlertDescription>
 						<p className="mb-2">
-							These services exist in the swarm but have no running
+							These services exist in the swarm but have no running containers.
-							containers. They may be scaled to 0 replicas or failing to start.
+							They may be scaled to 0 replicas or failing to start.
 						</p>
 						<ul className="list-disc list-inside space-y-1 text-xs">
 							{unscheduledServices.map((svc) => (
@@ -634,7 +621,10 @@ interface SwarmNotAvailableProps {
 	onRetry: () => void;
 }
 
-const SwarmNotAvailable = ({ errorMessage, onRetry }: SwarmNotAvailableProps) => (
+const SwarmNotAvailable = ({
+	errorMessage,
+	onRetry,
+}: SwarmNotAvailableProps) => (
 	<div className="flex flex-col gap-4 py-6 max-w-2xl mx-auto">
 		<Alert variant="destructive">
 			<AlertTriangle className="h-4 w-4" />
@@ -642,16 +632,14 @@ const SwarmNotAvailable = ({ errorMessage, onRetry }: SwarmNotAvailableProps) =>
 			<AlertDescription>
 				Could not reach Docker Swarm.{" "}
 				{errorMessage && (
-					<span className="block mt-1 text-xs opacity-80">
+					<span className="block mt-1 text-xs opacity-80">{errorMessage}</span>
-						{errorMessage}
-					</span>
 				)}
 			</AlertDescription>
 		</Alert>
 		<div className="space-y-3 text-sm text-muted-foreground">
 			<p>
-				This feature requires Docker Swarm to be initialized and active.
+				This feature requires Docker Swarm to be initialized and active. To get
-				To get started:
+				started:
 			</p>
 			<ol className="list-decimal list-inside space-y-2 ml-1">
 				<li>
@@ -679,12 +667,7 @@ const SwarmNotAvailable = ({ errorMessage, onRetry }: SwarmNotAvailableProps) =>
 			</ol>
 			<DocLinks />
 		</div>
-		<Button
+		<Button variant="outline" size="sm" className="w-fit" onClick={onRetry}>
-			variant="outline"
-			size="sm"
-			className="w-fit"
-			onClick={onRetry}
-		>
 			<RefreshCw className="h-4 w-4 mr-2" />
 			Retry
 		</Button>

packages/server/src/services/docker.ts

@@ -498,7 +498,7 @@ export const getAllContainerStats = async (serverId?: string) => {
 	try {
 		let stdout = "";
 		const command =
-			"docker stats --no-stream --format '{\"BlockIO\":\"{{.BlockIO}}\",\"CPUPerc\":\"{{.CPUPerc}}\",\"Container\":\"{{.Container}}\",\"ID\":\"{{.ID}}\",\"MemPerc\":\"{{.MemPerc}}\",\"MemUsage\":\"{{.MemUsage}}\",\"Name\":\"{{.Name}}\",\"NetIO\":\"{{.NetIO}}\"}'";
+			'docker stats --no-stream --format \'{"BlockIO":"{{.BlockIO}}","CPUPerc":"{{.CPUPerc}}","Container":"{{.Container}}","ID":"{{.ID}}","MemPerc":"{{.MemPerc}}","MemUsage":"{{.MemUsage}}","Name":"{{.Name}}","NetIO":"{{.NetIO}}"}\'';
 
 		if (serverId) {
 			const result = await execAsyncRemote(serverId, command);