Start/stop deployments

src/app/deployments/page.tsx

@@ -10,8 +10,8 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Plus, Play, Pause } from "lucide-react";
-import { getDeployments } from "@/lib/dockship/deploy";
+import { Plus, Play, Pause, Square } from "lucide-react";
+import { getDeployments, toggleDeployment } from "@/lib/dockship/deploy";
 import { getApps } from "@/lib/dockship/application";
 import { cn } from "@/lib/utils";
 import DeployAppDialog from "@/components/dialogs/DeployApp";
@@ -39,6 +39,14 @@ export default function DeploymentsPage() {
     return map;
   }, [apps]);
 
+  const changeDeploymentStatus = async (
+    deployId: string,
+    action: "start" | "stop",
+  ) => {
+    console.log(`Toggling deployment ${deployId} with action ${action}`);
+    await toggleDeployment(deployId, action);
+  };
+
   return (
     <DashboardLayout
       title="Deployments"
@@ -90,13 +98,22 @@ export default function DeploymentsPage() {
                     {dep.image}
                   </p>
                   <div className="flex justify-end gap-1">
-                    <Button variant="ghost" size="icon-sm">
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      onClick={async () =>
+                        await changeDeploymentStatus(
+                          dep.container,
+                          dep.status === "stopped" ? "start" : "stop",
+                        )
+                      }
+                    >
                       {dep.status === "stopped" ? (
                         <Play className="w-3 h-3" />
                       ) : dep.status === "running" ? (
-                        <Pause className="w-3 h-3" />
+                        <Square className="w-3 h-3" />
                       ) : (
-                        <Pause className="w-3 h-3 text-primary" />
+                        <Square className="w-3 h-3 text-primary" />
                       )}
                     </Button>
                     <RemoveDialog remove={() => {}} />