From b1b01373ca05334b6f433bea62b48b18eafeb9f8 Mon Sep 17 00:00:00 2001
From: sashagoncharov19 <0976053529@ukr.net>
Date: Tue, 3 Sep 2024 19:25:51 +0000
Subject: [PATCH 1/3] feat: added restart button for containers

---
 .../dashboard/compose/monitoring/show.tsx     | 165 ++++++++++--------
 apps/dokploy/server/api/routers/docker.ts     |  10 ++
 apps/dokploy/server/api/services/docker.ts    |  17 ++
 3 files changed, 124 insertions(+), 68 deletions(-)

diff --git a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
index 92c31482..75601ba3 100644
--- a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
@@ -1,86 +1,115 @@
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { useEffect, useState } from "react";
 import { DockerMonitoring } from "../../monitoring/docker/show";
+import { toast } from "sonner";
 
 interface Props {
-	appName: string;
-	appType: "stack" | "docker-compose";
+  appName: string;
+  appType: "stack" | "docker-compose";
 }
 
 export const ShowMonitoringCompose = ({
-	appName,
-	appType = "stack",
+  appName,
+  appType = "stack",
 }: Props) => {
-	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
-		{
-			appName: appName,
-			appType,
-		},
-		{
-			enabled: !!appName,
-		},
-	);
+  const { data } = api.docker.getContainersByAppNameMatch.useQuery(
+    {
+      appName: appName,
+      appType,
+    },
+    {
+      enabled: !!appName,
+    },
+  );
 
-	const [containerAppName, setContainerAppName] = useState<
-		string | undefined
-	>();
+  const [containerAppName, setContainerAppName] = useState<
+    string | undefined
+  >();
 
-	useEffect(() => {
-		if (data && data?.length > 0) {
-			setContainerAppName(data[0]?.name);
-		}
-	}, [data]);
+  const [containerId, setContainerId] = useState<string | undefined>();
 
-	return (
-		<div>
-			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Monitoring</CardTitle>
-					<CardDescription>Watch the usage of your compose</CardDescription>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-4">
-					<Label>Select a container to watch the monitoring</Label>
-					<Select onValueChange={setContainerAppName} value={containerAppName}>
-						<SelectTrigger>
-							<SelectValue placeholder="Select a container" />
-						</SelectTrigger>
-						<SelectContent>
-							<SelectGroup>
-								{data?.map((container) => (
-									<SelectItem
-										key={container.containerId}
-										value={container.name}
-									>
-										{container.name} ({container.containerId}) {container.state}
-									</SelectItem>
-								))}
-								<SelectLabel>Containers ({data?.length})</SelectLabel>
-							</SelectGroup>
-						</SelectContent>
-					</Select>
-					<DockerMonitoring
-						appName={containerAppName || ""}
-						appType={appType}
-					/>
-				</CardContent>
-			</Card>
-		</div>
-	);
+  const { mutateAsync: restart } = api.docker.restartContainer.useMutation();
+
+  useEffect(() => {
+    if (data && data?.length > 0) {
+      setContainerAppName(data[0]?.name);
+      setContainerId(data[0]?.containerId);
+    }
+  }, [data]);
+
+  return (
+    <div>
+      <Card className="bg-background">
+        <CardHeader>
+          <CardTitle className="text-xl">Monitoring</CardTitle>
+          <CardDescription>Watch the usage of your compose</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <Label>Select a container to watch the monitoring</Label>
+          <div className="flex flex-row gap-4">
+            <Select
+              onValueChange={(value) => {
+                setContainerAppName(value);
+                setContainerId(
+                  data?.find((container) => container.name === value)
+                    ?.containerId,
+                );
+              }}
+              value={containerAppName}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select a container" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {data?.map((container) => (
+                    <SelectItem
+                      key={container.containerId}
+                      value={container.name}
+                    >
+                      {container.name} ({container.containerId}){" "}
+                      {container.state}
+                    </SelectItem>
+                  ))}
+                  <SelectLabel>Containers ({data?.length})</SelectLabel>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Button
+              onClick={async () => {
+                toast.success(`Restarting container ${containerId}`);
+                await restart({ containerId }).then(() => {
+                  toast.success("Container restarted");
+                });
+              }}
+            >
+              Restart
+            </Button>
+          </div>
+          <DockerMonitoring
+            appName={containerAppName || ""}
+            appType={appType}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
diff --git a/apps/dokploy/server/api/routers/docker.ts b/apps/dokploy/server/api/routers/docker.ts
index 208ba6d1..f0725b8a 100644
--- a/apps/dokploy/server/api/routers/docker.ts
+++ b/apps/dokploy/server/api/routers/docker.ts
@@ -1,6 +1,7 @@
 import { z } from "zod";
 import {
 	getConfig,
+	containerRestart,
 	getContainers,
 	getContainersByAppLabel,
 	getContainersByAppNameMatch,
@@ -12,6 +13,15 @@ export const dockerRouter = createTRPCRouter({
 		return await getContainers();
 	}),
 
+	restartContainer: protectedProcedure
+		.input(
+			z.object({
+				containerId: z.string().min(1),
+			}),
+		).mutation(async ({ input }) => {
+			return await containerRestart(input.containerId);
+		}),
+
 	getConfig: protectedProcedure
 		.input(
 			z.object({
diff --git a/apps/dokploy/server/api/services/docker.ts b/apps/dokploy/server/api/services/docker.ts
index 927c94f6..379bebe4 100644
--- a/apps/dokploy/server/api/services/docker.ts
+++ b/apps/dokploy/server/api/services/docker.ts
@@ -150,3 +150,20 @@ export const getContainersByAppLabel = async (appName: string) => {
 
 	return [];
 };
+
+export const containerRestart = async (containerId: string) => {
+	try {
+		const { stdout, stderr } = await execAsync(
+			`docker container restart ${containerId}`,
+		);
+
+		if (stderr) {
+			console.error(`Error: ${stderr}`);
+			return;
+		}
+
+		const config = JSON.parse(stdout);
+
+		return config;
+	} catch (error) {}
+};

From 7c920dde714b5ffefa4994116098cfb875bc68e5 Mon Sep 17 00:00:00 2001
From: sashagoncharov19 <0976053529@ukr.net>
Date: Wed, 4 Sep 2024 04:56:36 +0000
Subject: [PATCH 2/3] fix: - Added isLoading prop - Changed notification to
 container name - Eslint fix

---
 .../components/dashboard/compose/monitoring/show.tsx       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
index 75601ba3..4565c1a7 100644
--- a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
@@ -46,7 +46,8 @@ export const ShowMonitoringCompose = ({
 
   const [containerId, setContainerId] = useState<string | undefined>();
 
-  const { mutateAsync: restart } = api.docker.restartContainer.useMutation();
+  const { mutateAsync: restart, isLoading } =
+    api.docker.restartContainer.useMutation();
 
   useEffect(() => {
     if (data && data?.length > 0) {
@@ -94,8 +95,10 @@ export const ShowMonitoringCompose = ({
               </SelectContent>
             </Select>
             <Button
+              isLoading={isLoading}
               onClick={async () => {
-                toast.success(`Restarting container ${containerId}`);
+                if (!containerId) return;
+                toast.success(`Restarting container ${containerAppName}`);
                 await restart({ containerId }).then(() => {
                   toast.success("Container restarted");
                 });

From 21a646ce66fb6a571877483472bbc78183ac9a81 Mon Sep 17 00:00:00 2001
From: sashagoncharov19 <0976053529@ukr.net>
Date: Wed, 4 Sep 2024 10:49:38 +0000
Subject: [PATCH 3/3] fix: linting

---
 .../dashboard/compose/monitoring/show.tsx     | 198 +++++++++---------
 apps/dokploy/server/api/routers/docker.ts     |   5 +-
 2 files changed, 102 insertions(+), 101 deletions(-)

diff --git a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
index 4565c1a7..428c74e4 100644
--- a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
@@ -1,118 +1,118 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { useEffect, useState } from "react";
-import { DockerMonitoring } from "../../monitoring/docker/show";
 import { toast } from "sonner";
+import { DockerMonitoring } from "../../monitoring/docker/show";
 
 interface Props {
-  appName: string;
-  appType: "stack" | "docker-compose";
+	appName: string;
+	appType: "stack" | "docker-compose";
 }
 
 export const ShowMonitoringCompose = ({
-  appName,
-  appType = "stack",
+	appName,
+	appType = "stack",
 }: Props) => {
-  const { data } = api.docker.getContainersByAppNameMatch.useQuery(
-    {
-      appName: appName,
-      appType,
-    },
-    {
-      enabled: !!appName,
-    },
-  );
+	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
+		{
+			appName: appName,
+			appType,
+		},
+		{
+			enabled: !!appName,
+		},
+	);
 
-  const [containerAppName, setContainerAppName] = useState<
-    string | undefined
-  >();
+	const [containerAppName, setContainerAppName] = useState<
+		string | undefined
+	>();
 
-  const [containerId, setContainerId] = useState<string | undefined>();
+	const [containerId, setContainerId] = useState<string | undefined>();
 
-  const { mutateAsync: restart, isLoading } =
-    api.docker.restartContainer.useMutation();
+	const { mutateAsync: restart, isLoading } =
+		api.docker.restartContainer.useMutation();
 
-  useEffect(() => {
-    if (data && data?.length > 0) {
-      setContainerAppName(data[0]?.name);
-      setContainerId(data[0]?.containerId);
-    }
-  }, [data]);
+	useEffect(() => {
+		if (data && data?.length > 0) {
+			setContainerAppName(data[0]?.name);
+			setContainerId(data[0]?.containerId);
+		}
+	}, [data]);
 
-  return (
-    <div>
-      <Card className="bg-background">
-        <CardHeader>
-          <CardTitle className="text-xl">Monitoring</CardTitle>
-          <CardDescription>Watch the usage of your compose</CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-4">
-          <Label>Select a container to watch the monitoring</Label>
-          <div className="flex flex-row gap-4">
-            <Select
-              onValueChange={(value) => {
-                setContainerAppName(value);
-                setContainerId(
-                  data?.find((container) => container.name === value)
-                    ?.containerId,
-                );
-              }}
-              value={containerAppName}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Select a container" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {data?.map((container) => (
-                    <SelectItem
-                      key={container.containerId}
-                      value={container.name}
-                    >
-                      {container.name} ({container.containerId}){" "}
-                      {container.state}
-                    </SelectItem>
-                  ))}
-                  <SelectLabel>Containers ({data?.length})</SelectLabel>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Button
-              isLoading={isLoading}
-              onClick={async () => {
-                if (!containerId) return;
-                toast.success(`Restarting container ${containerAppName}`);
-                await restart({ containerId }).then(() => {
-                  toast.success("Container restarted");
-                });
-              }}
-            >
-              Restart
-            </Button>
-          </div>
-          <DockerMonitoring
-            appName={containerAppName || ""}
-            appType={appType}
-          />
-        </CardContent>
-      </Card>
-    </div>
-  );
+	return (
+		<div>
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">Monitoring</CardTitle>
+					<CardDescription>Watch the usage of your compose</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4">
+					<Label>Select a container to watch the monitoring</Label>
+					<div className="flex flex-row gap-4">
+						<Select
+							onValueChange={(value) => {
+								setContainerAppName(value);
+								setContainerId(
+									data?.find((container) => container.name === value)
+										?.containerId,
+								);
+							}}
+							value={containerAppName}
+						>
+							<SelectTrigger>
+								<SelectValue placeholder="Select a container" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectGroup>
+									{data?.map((container) => (
+										<SelectItem
+											key={container.containerId}
+											value={container.name}
+										>
+											{container.name} ({container.containerId}){" "}
+											{container.state}
+										</SelectItem>
+									))}
+									<SelectLabel>Containers ({data?.length})</SelectLabel>
+								</SelectGroup>
+							</SelectContent>
+						</Select>
+						<Button
+							isLoading={isLoading}
+							onClick={async () => {
+								if (!containerId) return;
+								toast.success(`Restarting container ${containerAppName}`);
+								await restart({ containerId }).then(() => {
+									toast.success("Container restarted");
+								});
+							}}
+						>
+							Restart
+						</Button>
+					</div>
+					<DockerMonitoring
+						appName={containerAppName || ""}
+						appType={appType}
+					/>
+				</CardContent>
+			</Card>
+		</div>
+	);
 };
diff --git a/apps/dokploy/server/api/routers/docker.ts b/apps/dokploy/server/api/routers/docker.ts
index f0725b8a..22720095 100644
--- a/apps/dokploy/server/api/routers/docker.ts
+++ b/apps/dokploy/server/api/routers/docker.ts
@@ -1,7 +1,7 @@
 import { z } from "zod";
 import {
-	getConfig,
 	containerRestart,
+	getConfig,
 	getContainers,
 	getContainersByAppLabel,
 	getContainersByAppNameMatch,
@@ -18,7 +18,8 @@ export const dockerRouter = createTRPCRouter({
 			z.object({
 				containerId: z.string().min(1),
 			}),
-		).mutation(async ({ input }) => {
+		)
+		.mutation(async ({ input }) => {
 			return await containerRestart(input.containerId);
 		}),