feat: added restart button for containers

apps/dokploy/components/dashboard/compose/monitoring/show.tsx

@@ -5,6 +5,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -18,6 +19,7 @@ import {
 import { api } from "@/utils/api";
 import { useEffect, useState } from "react";
 import { DockerMonitoring } from "../../monitoring/docker/show";
+import { toast } from "sonner";
 
 interface Props {
   appName: string;
@@ -42,9 +44,14 @@ export const ShowMonitoringCompose = ({
     string | undefined
   >();
 
+  const [containerId, setContainerId] = useState<string | undefined>();
+
+  const { mutateAsync: restart } = api.docker.restartContainer.useMutation();
+
   useEffect(() => {
     if (data && data?.length > 0) {
       setContainerAppName(data[0]?.name);
+      setContainerId(data[0]?.containerId);
     }
   }, [data]);
 
@@ -57,7 +64,17 @@ export const ShowMonitoringCompose = ({
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
           <Label>Select a container to watch the monitoring</Label>
-					<Select onValueChange={setContainerAppName} value={containerAppName}>
+          <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>
@@ -68,13 +85,25 @@ export const ShowMonitoringCompose = ({
                       key={container.containerId}
                       value={container.name}
                     >
-										{container.name} ({container.containerId}) {container.state}
+                      {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}

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({

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) {}
+};