feat: add swarm overview for servers

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -33,6 +33,7 @@ import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { UpdateServer } from "./update-server";
 import { useRouter } from "next/router";
 import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
+import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 
 export const ShowServers = () => {
 	const router = useRouter();
@@ -259,6 +260,9 @@ export const ShowServers = () => {
 																<ShowDockerContainersModal
 																	serverId={server.serverId}
 																/>
+																<ShowSwarmOverviewModal
+																	serverId={server.serverId}
+																/>
 															</>
 														)}
 													</DropdownMenuContent>

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

@@ -0,0 +1,51 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { ContainerIcon } from "lucide-react";
+import { useState } from "react";
+import SwarmMonitorCard from "../../swarm/monitoring-card";
+
+interface Props {
+	serverId: string;
+}
+
+export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer "
+					onSelect={(e) => e.preventDefault()}
+				>
+					Show Swarm Overview
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+				<DialogHeader>
+					<div className="flex flex-col gap-1.5">
+						<DialogTitle className="flex items-center gap-2">
+							<ContainerIcon className="size-5" />
+							Swarm Overview
+						</DialogTitle>
+						<p className="text-muted-foreground text-sm">
+							See all details of your swarm node
+						</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/applications/show-applications.tsx

@@ -8,13 +8,13 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
-import { Layers, LoaderIcon } from "lucide-react";
+import { Layers, Loader2 } from "lucide-react";
 import React from "react";
 import { columns } from "./columns";
 import { DataTable } from "./data-table";
 
 interface Props {
-	nodeName: string;
+	serverId?: string;
 }
 
 interface ApplicationList {
@@ -30,10 +30,9 @@ interface ApplicationList {
 	Node: string;
 }
 
-const ShowNodeApplications = ({ nodeName }: Props) => {
-	const [loading, setLoading] = React.useState(true);
+export const ShowNodeApplications = ({ serverId }: Props) => {
 	const { data: NodeApps, isLoading: NodeAppsLoading } =
-		api.swarm.getNodeApps.useQuery();
+		api.swarm.getNodeApps.useQuery({ serverId });
 
 	let applicationList = "";
 
@@ -42,14 +41,14 @@ const ShowNodeApplications = ({ nodeName }: Props) => {
 	}
 
 	const { data: NodeAppDetails, isLoading: NodeAppDetailsLoading } =
-		api.swarm.getAppInfos.useQuery({ appName: applicationList });
+		api.swarm.getAppInfos.useQuery({ appName: applicationList, serverId });
 
 	if (NodeAppsLoading || NodeAppDetailsLoading) {
 		return (
 			<Dialog>
 				<DialogTrigger asChild>
 					<Button variant="outline" size="sm" className="w-full">
-						<LoaderIcon className="h-4 w-4 mr-2 animate-spin" />
+						<Loader2 className="h-4 w-4 mr-2 animate-spin" />
 					</Button>
 				</DialogTrigger>
 			</Dialog>
@@ -57,7 +56,11 @@ const ShowNodeApplications = ({ nodeName }: Props) => {
 	}
 
 	if (!NodeApps || !NodeAppDetails) {
-		return <div>No data found</div>;
+		return (
+			<span className="text-sm w-full flex text-center justify-center items-center">
+				No data found
+			</span>
+		);
 	}
 
 	const combinedData: ApplicationList[] = NodeApps.flatMap((app) => {
@@ -97,19 +100,17 @@ const ShowNodeApplications = ({ nodeName }: Props) => {
 					Services
 				</Button>
 			</DialogTrigger>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-6xl overflow-y-auto max-h-screen"}>
 				<DialogHeader>
 					<DialogTitle>Node Applications</DialogTitle>
 					<DialogDescription>
 						See in detail the applications running on this node
 					</DialogDescription>
 				</DialogHeader>
-				<div className="max-h-[90vh]">
+				<div className="max-h-[80vh]">
 					<DataTable columns={columns} data={combinedData ?? []} />
 				</div>
 			</DialogContent>
 		</Dialog>
 	);
 };
-
-export default ShowNodeApplications;

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

@@ -1,9 +1,14 @@
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { AlertCircle, CheckCircle, HelpCircle, LoaderIcon } from "lucide-react";
-import { useState } from "react";
-import ShowNodeApplications from "../applications/show-applications";
+import {
+	AlertCircle,
+	CheckCircle,
+	HelpCircle,
+	Loader2,
+	LoaderIcon,
+} from "lucide-react";
+import { ShowNodeApplications } from "../applications/show-applications";
 import { ShowNodeConfig } from "./show-node-config";
 
 export interface SwarmList {
@@ -16,13 +21,15 @@ export interface SwarmList {
 	TLSStatus: string;
 }
 
-interface NodeCardProps {
+interface Props {
 	node: SwarmList;
+	serverId?: string;
 }
 
-export function NodeCard({ node }: NodeCardProps) {
+export function NodeCard({ node, serverId }: Props) {
 	const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
 		nodeId: node.ID,
+		serverId,
 	});
 
 	const getStatusIcon = (status: string) => {
@@ -40,7 +47,7 @@ export function NodeCard({ node }: NodeCardProps) {
 		return (
 			<Card className="w-full bg-transparent">
 				<CardHeader>
-					<CardTitle className="flex items-center justify-between">
+					<CardTitle className="flex items-center justify-between text-lg">
 						<span className="flex items-center gap-2">
 							{getStatusIcon(node.Status)}
 							{node.Hostname}
@@ -52,7 +59,7 @@ export function NodeCard({ node }: NodeCardProps) {
 				</CardHeader>
 				<CardContent>
 					<div className="flex items-center justify-center">
-						<LoaderIcon className="h-6 w-6 animate-spin" />
+						<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
 					</div>
 				</CardContent>
 			</Card>
@@ -63,7 +70,7 @@ export function NodeCard({ node }: NodeCardProps) {
 		<Card className="w-full bg-transparent">
 			<CardHeader>
 				<CardTitle className="flex items-center justify-between">
-					<span className="flex items-center gap-2">
+					<span className="flex items-center gap-2 text-lg">
 						{getStatusIcon(node.Status)}
 						{node.Hostname}
 					</span>
@@ -83,7 +90,7 @@ export function NodeCard({ node }: NodeCardProps) {
 						{isLoading ? (
 							<LoaderIcon className="animate-spin" />
 						) : (
-							<span>{data.Status.Addr}</span>
+							<span>{data?.Status?.Addr}</span>
 						)}
 					</div>
 					<div className="flex justify-between">
@@ -100,7 +107,7 @@ export function NodeCard({ node }: NodeCardProps) {
 							<LoaderIcon className="animate-spin" />
 						) : (
 							<span>
-								{(data.Description.Resources.NanoCPUs / 1e9).toFixed(2)} GHz
+								{(data?.Description?.Resources?.NanoCPUs / 1e9).toFixed(2)} GHz
 							</span>
 						)}
 					</div>
@@ -110,9 +117,10 @@ export function NodeCard({ node }: NodeCardProps) {
 							<LoaderIcon className="animate-spin" />
 						) : (
 							<span>
-								{(data.Description.Resources.MemoryBytes / 1024 ** 3).toFixed(
-									2,
-								)}{" "}
+								{(
+									data?.Description?.Resources?.MemoryBytes /
+									1024 ** 3
+								).toFixed(2)}{" "}
 								GB
 							</span>
 						)}
@@ -123,8 +131,8 @@ export function NodeCard({ node }: NodeCardProps) {
 					</div>
 				</div>
 				<div className="flex gap-2 mt-4">
-					<ShowNodeConfig nodeId={node.ID} />
-					<ShowNodeApplications nodeName="node.Hostname" />
+					<ShowNodeConfig nodeId={node.ID} serverId={serverId} />
+					<ShowNodeApplications serverId={serverId} />
 				</div>
 			</CardContent>
 		</Card>

apps/dokploy/components/dashboard/swarm/details/show-node-config.tsx

@@ -13,10 +13,14 @@ import { Settings } from "lucide-react";
 
 interface Props {
 	nodeId: string;
+	serverId?: string;
 }
 
-export const ShowNodeConfig = ({ nodeId }: Props) => {
-	const { data, isLoading } = api.swarm.getNodeInfo.useQuery({ nodeId });
+export const ShowNodeConfig = ({ nodeId, serverId }: Props) => {
+	const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
+		nodeId,
+		serverId,
+	});
 	return (
 		<Dialog>
 			<DialogTrigger asChild>

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

@@ -9,68 +9,44 @@ import {
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import {
-	Activity,
 	AlertCircle,
 	CheckCircle,
 	HelpCircle,
 	Loader2,
 	Server,
 } from "lucide-react";
-import Link from "next/link";
 import { NodeCard } from "./details/details-card";
 
-export interface SwarmList {
-	ID: string;
-	Hostname: string;
-	Availability: string;
-	EngineVersion: string;
-	Status: string;
-	ManagerStatus: string;
-	TLSStatus: string;
+interface Props {
+	serverId?: string;
 }
 
-interface SwarmMonitorCardProps {
-	nodes: SwarmList[];
-}
-
-export default function SwarmMonitorCard() {
-	const { data: nodes, isLoading } = api.swarm.getNodes.useQuery();
+export default function SwarmMonitorCard({ serverId }: Props) {
+	const { data: nodes, isLoading } = api.swarm.getNodes.useQuery({
+		serverId,
+	});
 
 	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 className="mb-6 border min-h-[55vh] rounded-lg h-full">
+					<div className="flex items-center justify-center h-full  text-muted-foreground">
+						<Loader2 className="h-6 w-6 animate-spin" />
+					</div>
+				</div>
 			</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">
+			<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-destructive">
 						<span>Failed to load data</span>
 					</div>
-				</CardContent>
-			</Card>
+				</div>
+			</div>
 		);
 	}
 
@@ -105,19 +81,23 @@ export default function SwarmMonitorCard() {
 	return (
 		<div className="w-full max-w-7xl mx-auto">
 			<div className="flex justify-between items-center mb-4">
-				<h1 className="text-2xl font-bold">Docker Swarm Overview</h1>
-				<Button
-					type="button"
-					onClick={() => window.location.replace("/dashboard/settings/cluster")}
-				>
-					Manage Cluster
-				</Button>
+				<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">
-						<Server className="h-6 w-6" />
-						Docker Swarm Monitor
+					<CardTitle className="flex items-center gap-2 text-xl">
+						<Server className="size-4" />
+						Monitor
 					</CardTitle>
 				</CardHeader>
 				<CardContent>
@@ -200,7 +180,7 @@ export default function SwarmMonitorCard() {
 			</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} />
+					<NodeCard key={node.ID} node={node} serverId={serverId} />
 				))}
 			</div>
 		</div>

apps/dokploy/components/dashboard/swarm/servers/server-card.tsx

@@ -1,103 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { AlertCircle, CheckCircle, HelpCircle, ServerIcon } from "lucide-react";
-import { ShowContainers } from "../../docker/show/show-containers";
-
-export interface Server {
-	serverId: string;
-	name: string;
-	description: string | null;
-	ipAddress: string;
-	port: number;
-	username: string;
-	appName: string;
-	enableDockerCleanup: boolean;
-	createdAt: string;
-	adminId: string;
-	serverStatus: "active" | "inactive";
-	command: string;
-	sshKeyId: string | null;
-}
-
-interface ServerOverviewCardProps {
-	server: Server;
-}
-
-export function ServerOverviewCard({ server }: ServerOverviewCardProps) {
-	const getStatusIcon = (status: string) => {
-		switch (status) {
-			case "active":
-				return <CheckCircle className="h-4 w-4 text-green-500" />;
-			case "inactive":
-				return <AlertCircle className="h-4 w-4 text-red-500" />;
-			default:
-				return <HelpCircle className="h-4 w-4 text-yellow-500" />;
-		}
-	};
-
-	return (
-		<Card className="w-full bg-transparent">
-			<CardHeader>
-				<CardTitle className="flex items-center justify-between">
-					<span className="flex items-center gap-2">
-						{getStatusIcon(server.serverStatus)}
-						{server.name}
-					</span>
-					<Badge
-						variant={
-							server.serverStatus === "active" ? "default" : "destructive"
-						}
-						className="text-xs"
-					>
-						{server.serverStatus}
-					</Badge>
-				</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<div className="grid gap-2 text-sm">
-					<div className="flex justify-between">
-						<span className="font-medium">IP Address:</span>
-						<span>{server.ipAddress}</span>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">Port:</span>
-						<span>{server.port}</span>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">Username:</span>
-						<span>{server.username}</span>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">App Name:</span>
-						<span>{server.appName}</span>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">Docker Cleanup:</span>
-						<span>{server.enableDockerCleanup ? "Enabled" : "Disabled"}</span>
-					</div>
-					<div className="flex justify-between">
-						<span className="font-medium">Created At:</span>
-						<span>{new Date(server.createdAt).toLocaleString()}</span>
-					</div>
-				</div>
-				<div className="mt-4">
-					<Dialog>
-						<DialogTrigger asChild>
-							<Button variant="outline" size="sm" className="w-full">
-								<ServerIcon className="h-4 w-4 mr-2" />
-								Show Containers
-							</Button>
-						</DialogTrigger>
-						<DialogContent
-							className={"sm:max-w-5xl overflow-y-auto max-h-screen"}
-						>
-							<ShowContainers serverId={server.serverId} />
-						</DialogContent>
-					</Dialog>
-				</div>
-			</CardContent>
-		</Card>
-	);
-}

apps/dokploy/components/dashboard/swarm/servers/servers-overview.tsx

@@ -1,74 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { api } from "@/utils/api";
-import { LoaderIcon } from "lucide-react";
-import { ServerOverviewCard } from "./server-card";
-
-export default function ServersOverview() {
-	const { data: servers, isLoading } = api.server.all.useQuery();
-
-	if (isLoading) {
-		return (
-			<>
-				<Card className="w-full bg-transparent">
-					<CardHeader>
-						<CardTitle className="flex items-center justify-between">
-							<span className="flex items-center gap-2">
-								<LoaderIcon />
-							</span>
-							<Badge className="text-xs">
-								<LoaderIcon />
-							</Badge>
-						</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<div className="grid gap-2 text-sm">
-							<div className="flex justify-between">
-								<span className="font-medium">IP Address:</span>
-							</div>
-							<div className="flex justify-between">
-								<span className="font-medium">Port:</span>
-							</div>
-							<div className="flex justify-between">
-								<span className="font-medium">Username:</span>
-							</div>
-							<div className="flex justify-between">
-								<span className="font-medium">App Name:</span>
-							</div>
-							<div className="flex justify-between">
-								<span className="font-medium">Docker Cleanup:</span>
-							</div>
-							<div className="flex justify-between">
-								<span className="font-medium">Created At:</span>
-							</div>
-						</div>
-					</CardContent>
-				</Card>
-			</>
-		);
-	}
-
-	if (!servers) {
-		return <div>No servers found</div>;
-	}
-	return (
-		<div className="w-full max-w-7xl mx-auto">
-			<div className="flex justify-between items-center mb-4">
-				<h1 className="text-2xl font-bold">Server Overview</h1>
-				<Button
-					type="button"
-					onClick={() => window.location.replace("/dashboard/settings/servers")}
-				>
-					Manage Servers
-				</Button>
-			</div>
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-				{servers.map((server) => (
-					<ServerOverviewCard server={server} key={server.serverId} />
-				))}
-			</div>
-		</div>
-	);
-}

apps/dokploy/components/layouts/navigation-tabs.tsx

@@ -62,7 +62,7 @@ const getTabMaps = (isCloud: boolean) => {
 				type: "docker",
 			},
 			{
-				label: "Swarm & Server",
+				label: "Swarm",
 				description: "Manage your docker swarm and Servers",
 				index: "/dashboard/swarm",
 				isShow: ({ rol, user }) => {

apps/dokploy/pages/dashboard/swarm.tsx

@@ -1,7 +1,5 @@
 import SwarmMonitorCard from "@/components/dashboard/swarm/monitoring-card";
-import ServersOverview from "@/components/dashboard/swarm/servers/servers-overview";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
-import { Separator } from "@/components/ui/separator";
 import { appRouter } from "@/server/api/root";
 import { IS_CLOUD, validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";

apps/dokploy/server/api/routers/swarm.ts

@@ -8,24 +8,37 @@ import { z } from "zod";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
 export const swarmRouter = createTRPCRouter({
-	getNodes: protectedProcedure.query(async () => {
-		return await getSwarmNodes();
-	}),
-	getNodeInfo: protectedProcedure
-		.input(z.object({ nodeId: z.string() }))
+	getNodes: protectedProcedure
+		.input(
+			z.object({
+				serverId: z.string().optional(),
+			}),
+		)
 		.query(async ({ input }) => {
-			return await getNodeInfo(input.nodeId);
+			return await getSwarmNodes(input.serverId);
+		}),
+	getNodeInfo: protectedProcedure
+		.input(z.object({ nodeId: z.string(), serverId: z.string().optional() }))
+		.query(async ({ input }) => {
+			return await getNodeInfo(input.nodeId, input.serverId);
+		}),
+	getNodeApps: protectedProcedure
+		.input(
+			z.object({
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			return getNodeApplications(input.serverId);
 		}),
-	getNodeApps: protectedProcedure.query(async () => {
-		return getNodeApplications();
-	}),
 	getAppInfos: protectedProcedure
 		.input(
 			z.object({
 				appName: z.string(),
+				serverId: z.string().optional(),
 			}),
 		)
 		.query(async ({ input }) => {
-			return await getApplicationInfo(input.appName);
+			return await getApplicationInfo(input.appName, input.serverId);
 		}),
 });

packages/server/src/services/docker.ts

@@ -225,11 +225,21 @@ export const containerRestart = async (containerId: string) => {
 	} catch (error) {}
 };
 
-export const getSwarmNodes = async () => {
+export const getSwarmNodes = async (serverId?: string) => {
 	try {
-		const { stdout, stderr } = await execAsync(
-			"docker node ls --format '{{json .}}'",
-		);
+		let stdout = "";
+		let stderr = "";
+		const command = "docker node ls --format '{{json .}}'";
+
+		if (serverId) {
+			const result = await execAsyncRemote(serverId, command);
+			stdout = result.stdout;
+			stderr = result.stderr;
+		} else {
+			const result = await execAsync(command);
+			stdout = result.stdout;
+			stderr = result.stderr;
+		}
 
 		if (stderr) {
 			console.error(`Error: ${stderr}`);
@@ -246,11 +256,20 @@ export const getSwarmNodes = async () => {
 	} catch (error) {}
 };
 
-export const getNodeInfo = async (nodeId: string) => {
+export const getNodeInfo = async (nodeId: string, serverId?: string) => {
 	try {
-		const { stdout, stderr } = await execAsync(
-			`docker node inspect ${nodeId} --format '{{json .}}'`,
-		);
+		const command = `docker node inspect ${nodeId} --format '{{json .}}'`;
+		let stdout = "";
+		let stderr = "";
+		if (serverId) {
+			const result = await execAsyncRemote(serverId, command);
+			stdout = result.stdout;
+			stderr = result.stderr;
+		} else {
+			const result = await execAsync(command);
+			stdout = result.stdout;
+			stderr = result.stderr;
+		}
 
 		if (stderr) {
 			console.error(`Error: ${stderr}`);
@@ -263,11 +282,22 @@ export const getNodeInfo = async (nodeId: string) => {
 	} catch (error) {}
 };
 
-export const getNodeApplications = async () => {
+export const getNodeApplications = async (serverId?: string) => {
 	try {
-		const { stdout, stderr } = await execAsync(
-			`docker service ls --format '{{json .}}'`,
-		);
+		let stdout = "";
+		let stderr = "";
+		const command = `docker service ls --format '{{json .}}'`;
+
+		if (serverId) {
+			const result = await execAsyncRemote(serverId, command);
+			stdout = result.stdout;
+			stderr = result.stderr;
+		} else {
+			const result = await execAsync(command);
+
+			stdout = result.stdout;
+			stderr = result.stderr;
+		}
 
 		if (stderr) {
 			console.error(`Error: ${stderr}`);
@@ -283,11 +313,24 @@ export const getNodeApplications = async () => {
 	} catch (error) {}
 };
 
-export const getApplicationInfo = async (appName: string) => {
+export const getApplicationInfo = async (
+	appName: string,
+	serverId?: string,
+) => {
 	try {
-		const { stdout, stderr } = await execAsync(
-			`docker service ps ${appName} --format '{{json .}}'`,
-		);
+		let stdout = "";
+		let stderr = "";
+		const command = `docker service ps ${appName} --format '{{json .}}'`;
+
+		if (serverId) {
+			const result = await execAsyncRemote(serverId, command);
+			stdout = result.stdout;
+			stderr = result.stderr;
+		} else {
+			const result = await execAsync(command);
+			stdout = result.stdout;
+			stderr = result.stderr;
+		}
 
 		if (stderr) {
 			console.error(`Error: ${stderr}`);