Remove container

src/app/api/container/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import testAuth from "../auth";
 import { StatusCodes } from "http-status-codes";
-import { getDocker } from "@/core/server/docker";
+import { getDocker, removeContainer } from "@/core/server/docker";
 import { Docker } from "@/lib/types";
 
 export async function GET(req: NextRequest): Promise<NextResponse> {
@@ -22,3 +22,28 @@ export async function GET(req: NextRequest): Promise<NextResponse> {
     containers: docker.containers,
   } as Docker);
 }
+
+export async function DELETE(req: NextRequest): Promise<NextResponse> {
+  const auth = await testAuth(req);
+  const id = req.nextUrl.searchParams.get("containerId");
+
+  if (!id) {
+    return NextResponse.json(
+      { message: "Invalid containerId param" },
+      { status: StatusCodes.BAD_REQUEST }
+    );
+  }
+
+  if (auth) {
+    return NextResponse.json(
+      { message: auth },
+      { status: StatusCodes.UNAUTHORIZED }
+    );
+  }
+
+  await removeContainer(id);
+
+  return NextResponse.json({
+    message: "ok",
+  });
+}

src/app/containers/page.tsx

@@ -6,7 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { MoreVertical, Play, Square, Trash2, Container } from "lucide-react";
 import { useEffect, useState } from "react";
-import { getDocker } from "@/core/docker";
+import { getDocker, removeContainer } from "@/core/docker";
 import { getNodes } from "@/core/node";
 import { ContainerInfo } from "dockerode";
 import { formatBytes } from "@/lib/format";
@@ -15,6 +15,17 @@ import {
   startContainer,
   stopContainer,
 } from "@/core/docker";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/components/ui/alert-dialog";
 
 type ContainerSummary = {
   id: string;
@@ -63,6 +74,39 @@ async function summarizeContainer(
   };
 }
 
+function RemoveDialog({ container }: { container: ContainerSummary }) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost" size="icon-sm">
+          <Trash2 className="w-3 h-3 text-destructive" />
+        </Button>
+      </AlertDialogTrigger>
+
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently remove the
+            container.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+
+          <AlertDialogAction
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            onClick={() => removeContainer(container.id)}
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
 export default function ContainersPage() {
   const [containers, setContainers] = useState<ContainerSummary[]>([]);
 
@@ -183,9 +227,7 @@ export default function ContainersPage() {
                             <Play className="w-3 h-3" />
                           </Button>
                         )}
-                        <Button variant="ghost" size="icon-sm">
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
+                        <RemoveDialog container={container} />
                         <Button variant="ghost" size="icon-sm">
                           <MoreVertical className="w-3 h-3" />
                         </Button>