Container stats and actions

src/app/api/container/start/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from "next/server";
+import testAuth from "../../auth";
+import { StatusCodes } from "http-status-codes";
+import { startContainer, stopContainer } from "@/core/server/docker";
+
+export async function POST(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 startContainer(id);
+
+  return NextResponse.json({
+    message: "ok",
+  });
+}
+
+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 stopContainer(id);
+
+  return NextResponse.json({
+    message: "ok",
+  });
+}

src/app/api/container/stats/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from "next/server";
+import testAuth from "../../auth";
+import { StatusCodes } from "http-status-codes";
+import { getContainerStats } from "@/core/server/docker";
+
+export async function GET(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 }
+    );
+  }
+
+  const stats = await getContainerStats(id);
+
+  return NextResponse.json({
+    message: "ok",
+    stats: {
+      cpu_stats: stats?.cpu_stats,
+      memory_stats: stats?.memory_stats,
+    },
+  });
+}

src/app/containers/page.tsx

@@ -4,18 +4,17 @@ import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  MoreVertical,
-  Play,
-  Square,
-  Trash2,
-  Container,
-} from "lucide-react";
+import { MoreVertical, Play, Square, Trash2, Container } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Docker } from "@/lib/types";
 import { getDocker } from "@/core/docker";
 import { getNodes } from "@/core/node";
 import { ContainerInfo } from "dockerode";
+import { formatBytes } from "@/lib/format";
+import {
+  getContainerStats,
+  startContainer,
+  stopContainer,
+} from "@/core/docker";
 
 type ContainerSummary = {
   id: string;
@@ -24,16 +23,16 @@ type ContainerSummary = {
   node: string;
   status: "running" | "stopped";
   uptime: string;
-  cpu: string;
+  cpu: number;
   memory: string;
 };
 
-function summarizeContainer(
+async function summarizeContainer(
   container: ContainerInfo,
   nodeName: string
-): ContainerSummary {
+): Promise<ContainerSummary> {
   // 1. Shorten the long container ID
-  const shortId = container.Id.slice(0, 12);
+  const shortId = container.Id;
 
   // 2. Clean the name
   const name = container.Names[0]?.replace(/^\//, "") ?? "unknown";
@@ -44,9 +43,13 @@ function summarizeContainer(
   // 4. Compute uptime from Status string (if available)
   const uptime = container.Status?.replace(/^Up\s*/, "") ?? "unknown";
 
-  // 5. Placeholder for CPU and memory
-  const cpu = "4%";
-  const memory = "64MB / 128MB";
+  const stats = await getContainerStats(container.Id);
+
+  // 5. CPU and memory
+  const cpu = stats?.cpu_stats?.cpu_usage?.total_usage || 0;
+  const memory = `${formatBytes(
+    stats?.memory_stats?.usage || 0
+  )} / ${formatBytes(stats?.memory_stats?.max_usage || 0)}`;
 
   return {
     id: shortId,
@@ -69,8 +72,12 @@ export default function ContainersPage() {
       const dockerNodes = await getDocker(nodes);
 
       setContainers(
-        nodes.flatMap((node, i) =>
-          dockerNodes[i].containers.map((c) => summarizeContainer(c, node.name))
+        await Promise.all(
+          nodes.flatMap((node, i) =>
+            dockerNodes[i].containers.map((c) =>
+              summarizeContainer(c, node.name)
+            )
+          )
         )
       );
     };
@@ -131,7 +138,7 @@ export default function ContainersPage() {
                             {container.name}
                           </div>
                           <div className="text-[10px] text-muted-foreground font-mono">
-                            {container.id}
+                            {container.id.slice(0, 12)}
                           </div>
                         </div>
                       </div>
@@ -160,11 +167,19 @@ export default function ContainersPage() {
                     <td className="py-3 px-4">
                       <div className="flex justify-end gap-1">
                         {container.status === "running" ? (
-                          <Button variant="ghost" size="icon-sm">
+                          <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => stopContainer(container.id)}
+                          >
                             <Square className="w-3 h-3" />
                           </Button>
                         ) : (
-                          <Button variant="ghost" size="icon-sm">
+                          <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => startContainer(container.id)}
+                          >
                             <Play className="w-3 h-3" />
                           </Button>
                         )}

src/app/overview/page.tsx

@@ -120,7 +120,11 @@ export default function OverviewPage() {
         />
         <StatCard
           title="Containers"
-          value={dockerNodes.reduce((sum, n) => sum + n.containers.length, 0)}
+          value={dockerNodes.reduce(
+            (sum, n) =>
+              sum + n.containers.filter((c) => c.State === "running").length,
+            0
+          )}
           subtitle="running"
           icon={<Container className="w-4 h-4" />}
         />