Merge pull request #4218 from Dokploy/feat/compose-containers-tab

feat: add containers tab to compose services

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

@@ -0,0 +1,268 @@
+import { Loader2, MoreHorizontal, RefreshCw } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api } from "@/utils/api";
+
+const DockerLogsId = dynamic(
+	() =>
+		import("@/components/dashboard/docker/logs/docker-logs-id").then(
+			(e) => e.DockerLogsId,
+		),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	appName: string;
+	serverId?: string;
+	appType: "stack" | "docker-compose";
+}
+
+export const ShowComposeContainers = ({
+	appName,
+	appType,
+	serverId,
+}: Props) => {
+	const { data, isPending, refetch } =
+		api.docker.getContainersByAppNameMatch.useQuery(
+			{
+				appName,
+				appType,
+				serverId,
+			},
+			{
+				enabled: !!appName,
+			},
+		);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between">
+				<div>
+					<CardTitle className="text-xl">Containers</CardTitle>
+					<CardDescription>
+						Inspect each container in this compose and run basic lifecycle
+						actions.
+					</CardDescription>
+				</div>
+				<Button
+					variant="outline"
+					size="icon"
+					onClick={() => refetch()}
+					disabled={isPending}
+				>
+					<RefreshCw className={`h-4 w-4 ${isPending ? "animate-spin" : ""}`} />
+				</Button>
+			</CardHeader>
+			<CardContent>
+				{isPending ? (
+					<div className="flex items-center justify-center h-[20vh]">
+						<Loader2 className="animate-spin h-6 w-6 text-muted-foreground" />
+					</div>
+				) : !data || data.length === 0 ? (
+					<div className="flex items-center justify-center h-[20vh]">
+						<span className="text-muted-foreground">
+							No containers found. Deploy the compose to see containers here.
+						</span>
+					</div>
+				) : (
+					<div className="rounded-md border">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Name</TableHead>
+									<TableHead>State</TableHead>
+									<TableHead>Status</TableHead>
+									<TableHead>Container ID</TableHead>
+									<TableHead className="text-right" />
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{data.map((container) => (
+									<ContainerRow
+										key={container.containerId}
+										container={container}
+										serverId={serverId}
+										onActionComplete={() => refetch()}
+									/>
+								))}
+							</TableBody>
+						</Table>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};
+
+interface ContainerRowProps {
+	container: {
+		containerId: string;
+		name: string;
+		state: string;
+		status: string;
+	};
+	serverId?: string;
+	onActionComplete: () => void;
+}
+
+const ContainerRow = ({
+	container,
+	serverId,
+	onActionComplete,
+}: ContainerRowProps) => {
+	const [logsOpen, setLogsOpen] = useState(false);
+	const [actionLoading, setActionLoading] = useState<string | null>(null);
+
+	const restartMutation = api.docker.restartContainer.useMutation();
+	const startMutation = api.docker.startContainer.useMutation();
+	const stopMutation = api.docker.stopContainer.useMutation();
+	const killMutation = api.docker.killContainer.useMutation();
+
+	const handleAction = async (
+		action: string,
+		mutationFn: typeof restartMutation,
+	) => {
+		setActionLoading(action);
+		try {
+			await mutationFn.mutateAsync({
+				containerId: container.containerId,
+				serverId,
+			});
+			toast.success(`Container ${action} successfully`);
+			onActionComplete();
+		} catch (error) {
+			toast.error(
+				`Failed to ${action} container: ${error instanceof Error ? error.message : "Unknown error"}`,
+			);
+		} finally {
+			setActionLoading(null);
+		}
+	};
+
+	return (
+		<TableRow>
+			<TableCell className="font-medium">{container.name}</TableCell>
+			<TableCell>
+				<Badge
+					variant={
+						container.state === "running"
+							? "default"
+							: container.state === "exited"
+								? "secondary"
+								: "destructive"
+					}
+				>
+					{container.state}
+				</Badge>
+			</TableCell>
+			<TableCell>{container.status}</TableCell>
+			<TableCell className="font-mono text-sm text-muted-foreground">
+				{container.containerId}
+			</TableCell>
+			<TableCell className="text-right">
+				<Dialog open={logsOpen} onOpenChange={setLogsOpen}>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost" className="h-8 w-8 p-0">
+								{actionLoading ? (
+									<Loader2 className="h-4 w-4 animate-spin" />
+								) : (
+									<MoreHorizontal className="h-4 w-4" />
+								)}
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuLabel>Actions</DropdownMenuLabel>
+							<DialogTrigger asChild>
+								<DropdownMenuItem
+									className="cursor-pointer"
+									onSelect={(e) => e.preventDefault()}
+								>
+									View Logs
+								</DropdownMenuItem>
+							</DialogTrigger>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem
+								className="cursor-pointer"
+								disabled={actionLoading !== null}
+								onClick={() => handleAction("restart", restartMutation)}
+							>
+								Restart
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								className="cursor-pointer"
+								disabled={actionLoading !== null}
+								onClick={() => handleAction("start", startMutation)}
+							>
+								Start
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								className="cursor-pointer"
+								disabled={actionLoading !== null}
+								onClick={() => handleAction("stop", stopMutation)}
+							>
+								Stop
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								className="cursor-pointer text-red-500 focus:text-red-600"
+								disabled={actionLoading !== null}
+								onClick={() => handleAction("kill", killMutation)}
+							>
+								Kill
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+					<DialogContent className="sm:max-w-7xl">
+						<DialogHeader>
+							<DialogTitle>View Logs</DialogTitle>
+							<DialogDescription>Logs for {container.name}</DialogDescription>
+						</DialogHeader>
+						<div className="flex flex-col gap-4 pt-2.5">
+							<DockerLogsId
+								containerId={container.containerId}
+								serverId={serverId}
+								runType="native"
+							/>
+						</div>
+					</DialogContent>
+				</Dialog>
+			</TableCell>
+		</TableRow>
+	);
+};

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx

@@ -22,6 +22,7 @@ import { ShowSchedules } from "@/components/dashboard/application/schedules/show
 import { ShowVolumeBackups } from "@/components/dashboard/application/volume-backups/show-volume-backups";
 import { AddCommandCompose } from "@/components/dashboard/compose/advanced/add-command";
 import { IsolatedDeploymentTab } from "@/components/dashboard/compose/advanced/add-isolation";
+import { ShowComposeContainers } from "@/components/dashboard/compose/containers/show-compose-containers";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowGeneralCompose } from "@/components/dashboard/compose/general/show";
 import { ShowDockerLogsCompose } from "@/components/dashboard/compose/logs/show";
@@ -60,6 +61,7 @@ type TabState =
 	| "advanced"
 	| "deployments"
 	| "domains"
+	| "containers"
 	| "monitoring"
 	| "volumeBackups";
 
@@ -231,6 +233,9 @@ const Service = (
 													Deployments
 												</TabsTrigger>
 											)}
+											{permissions?.service.read && (
+												<TabsTrigger value="containers">Containers</TabsTrigger>
+											)}
 											{permissions?.service.create && (
 												<TabsTrigger value="backups">Backups</TabsTrigger>
 											)}
@@ -298,6 +303,18 @@ const Service = (
 											</div>
 										</TabsContent>
 									)}
+									{permissions?.service.read && (
+										<TabsContent value="containers">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowComposeContainers
+													serverId={data?.serverId || undefined}
+													appName={data?.appName || ""}
+													appType={data?.composeType || "docker-compose"}
+												/>
+											</div>
+										</TabsContent>
+									)}
+
 									{permissions?.monitoring.read && (
 										<TabsContent value="monitoring">
 											<div className="pt-2.5">

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

@@ -1,6 +1,9 @@
 import {
+	containerKill,
 	containerRemove,
 	containerRestart,
+	containerStart,
+	containerStop,
 	findServerById,
 	getConfig,
 	getContainers,
@@ -35,24 +38,108 @@ export const dockerRouter = createTRPCRouter({
 			return await getContainers(input.serverId);
 		}),
 
-	restartContainer: withPermission("docker", "read")
+	restartContainer: withPermission("service", "read")
 		.input(
 			z.object({
 				containerId: z
 					.string()
 					.min(1)
 					.regex(containerIdRegex, "Invalid container id."),
+				serverId: z.string().optional(),
 			}),
 		)
 		.mutation(async ({ input, ctx }) => {
-			const result = await containerRestart(input.containerId);
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				if (server.organizationId !== ctx.session?.activeOrganizationId) {
+					throw new TRPCError({ code: "UNAUTHORIZED" });
+				}
+			}
+			await containerRestart(input.containerId, input.serverId);
 			await audit(ctx, {
 				action: "start",
 				resourceType: "docker",
 				resourceId: input.containerId,
 				resourceName: input.containerId,
 			});
-			return result;
+		}),
+
+	startContainer: withPermission("service", "read")
+		.input(
+			z.object({
+				containerId: z
+					.string()
+					.min(1)
+					.regex(containerIdRegex, "Invalid container id."),
+				serverId: z.string().optional(),
+			}),
+		)
+		.mutation(async ({ input, ctx }) => {
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				if (server.organizationId !== ctx.session?.activeOrganizationId) {
+					throw new TRPCError({ code: "UNAUTHORIZED" });
+				}
+			}
+			await containerStart(input.containerId, input.serverId);
+			await audit(ctx, {
+				action: "start",
+				resourceType: "docker",
+				resourceId: input.containerId,
+				resourceName: input.containerId,
+			});
+		}),
+
+	stopContainer: withPermission("service", "read")
+		.input(
+			z.object({
+				containerId: z
+					.string()
+					.min(1)
+					.regex(containerIdRegex, "Invalid container id."),
+				serverId: z.string().optional(),
+			}),
+		)
+		.mutation(async ({ input, ctx }) => {
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				if (server.organizationId !== ctx.session?.activeOrganizationId) {
+					throw new TRPCError({ code: "UNAUTHORIZED" });
+				}
+			}
+			await containerStop(input.containerId, input.serverId);
+			await audit(ctx, {
+				action: "stop",
+				resourceType: "docker",
+				resourceId: input.containerId,
+				resourceName: input.containerId,
+			});
+		}),
+
+	killContainer: withPermission("service", "read")
+		.input(
+			z.object({
+				containerId: z
+					.string()
+					.min(1)
+					.regex(containerIdRegex, "Invalid container id."),
+				serverId: z.string().optional(),
+			}),
+		)
+		.mutation(async ({ input, ctx }) => {
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				if (server.organizationId !== ctx.session?.activeOrganizationId) {
+					throw new TRPCError({ code: "UNAUTHORIZED" });
+				}
+			}
+			await containerKill(input.containerId, input.serverId);
+			await audit(ctx, {
+				action: "stop",
+				resourceType: "docker",
+				resourceId: input.containerId,
+				resourceName: input.containerId,
+			});
 		}),
 
 	removeContainer: withPermission("docker", "read")

packages/server/src/services/docker.ts

@@ -417,21 +417,58 @@ export const getContainerLogs = async (
 	}
 };
 
-export const containerRestart = async (containerId: string) => {
-	try {
-		const { stdout, stderr } = await execAsync(
-			`docker container restart ${containerId}`,
-		);
+export const containerRestart = async (
+	containerId: string,
+	serverId?: string,
+) => {
+	const command = `docker container restart ${containerId}`;
+	const { stderr } = serverId
+		? await execAsyncRemote(serverId, command)
+		: await execAsync(command);
 
-		if (stderr) {
-			console.error(`Error: ${stderr}`);
-			return;
-		}
+	if (stderr) {
+		console.error(`Error: ${stderr}`);
+		throw new Error(stderr);
+	}
+};
 
-		const config = JSON.parse(stdout);
+export const containerStart = async (
+	containerId: string,
+	serverId?: string,
+) => {
+	const command = `docker container start ${containerId}`;
+	const { stderr } = serverId
+		? await execAsyncRemote(serverId, command)
+		: await execAsync(command);
 
-		return config;
-	} catch {}
+	if (stderr) {
+		console.error(`Error: ${stderr}`);
+		throw new Error(stderr);
+	}
+};
+
+export const containerStop = async (containerId: string, serverId?: string) => {
+	const command = `docker container stop ${containerId}`;
+	const { stderr } = serverId
+		? await execAsyncRemote(serverId, command)
+		: await execAsync(command);
+
+	if (stderr) {
+		console.error(`Error: ${stderr}`);
+		throw new Error(stderr);
+	}
+};
+
+export const containerKill = async (containerId: string, serverId?: string) => {
+	const command = `docker container kill ${containerId}`;
+	const { stderr } = serverId
+		? await execAsyncRemote(serverId, command)
+		: await execAsync(command);
+
+	if (stderr) {
+		console.error(`Error: ${stderr}`);
+		throw new Error(stderr);
+	}
 };
 
 export const containerRemove = async (