Merge pull request #9 from orus-dev/deploy-patches

Deploy patches

package-lock.json

@@ -8,6 +8,7 @@
       "name": "dockship",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-popover": "^1.1.15",
@@ -948,6 +949,90 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",

src/app/api/applications/route.ts

@@ -0,0 +1,49 @@
+import { NextRequest, NextResponse } from "next/server";
+import testAuth from "../auth";
+import { StatusCodes } from "http-status-codes";
+import { deployNewApp, getApplications } from "@/core/server/application";
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  const auth = await testAuth(req);
+
+  if (auth) {
+    return NextResponse.json(
+      { message: auth },
+      { status: StatusCodes.UNAUTHORIZED }
+    );
+  }
+
+  const applications = await getApplications();
+
+  return NextResponse.json({
+    message: "ok",
+    applications,
+  });
+}
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  const auth = await testAuth(req);
+  const { name, repo, nodeId }: { name: string; repo: string; nodeId: string } =
+    await req.json();
+
+  if (auth) {
+    return NextResponse.json(
+      { message: auth },
+      { status: StatusCodes.UNAUTHORIZED }
+    );
+  }
+
+  if (!name || !repo || !nodeId) {
+    return NextResponse.json(
+      { message: "Body missing name, repo, nodeId" },
+      { status: StatusCodes.BAD_REQUEST }
+    );
+  }
+
+  const res = await deployNewApp(name, repo, nodeId);
+
+  return NextResponse.json({
+    message: "ok",
+    ...res,
+  });
+}

src/app/api/container/route.ts

@@ -0,0 +1,49 @@
+import { NextRequest, NextResponse } from "next/server";
+import testAuth from "../auth";
+import { StatusCodes } from "http-status-codes";
+import { getDocker, removeContainer } from "@/core/server/docker";
+import { Docker } from "@/lib/types";
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  const auth = await testAuth(req);
+
+  if (auth) {
+    return NextResponse.json(
+      { message: auth },
+      { status: StatusCodes.UNAUTHORIZED }
+    );
+  }
+
+  const docker = await getDocker();
+
+  return NextResponse.json({
+    message: "ok",
+    version: docker.version.Version,
+    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/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/api/get-docker/route.ts

@@ -1,24 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import testAuth from "../auth";
-import { StatusCodes } from "http-status-codes";
-import { getDocker } from "@/core/server/docker";
-import { Docker } from "@/lib/types";
-
-export async function GET(req: NextRequest): Promise<NextResponse> {
-  const auth = await testAuth(req);
-
-  if (auth) {
-    return NextResponse.json(
-      { message: auth },
-      { status: StatusCodes.UNAUTHORIZED }
-    );
-  }
-
-  const docker = await getDocker();
-
-  return NextResponse.json({
-    message: "ok",
-    version: docker.version.Version,
-    containers: docker.containers,
-  } as Docker);
-}

src/app/applications/page.tsx

@@ -1,89 +1,27 @@
 "use client";
 
 import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Play, Square, RotateCcw, MoreVertical, Plus } from "lucide-react";
 import { Progress } from "@/components/ui/progress";
 import DeployApplication from "@/components/dialogs/DeployApplication";
-
+import { useEffect, useState } from "react";
-const applications = [
+import { Application } from "@/lib/types";
-  {
+import { getApplications } from "@/core/application";
-    id: "app-001",
-    name: "api-gateway",
-    image: "dockship/api-gateway:v2.4.1",
-    containers: 3,
-    replicas: "3/3",
-    cpu: 45,
-    memory: 62,
-    network: "12.4 MB/s",
-    status: "running" as const,
-    ports: ["80:8080", "443:8443"],
-  },
-  {
-    id: "app-002",
-    name: "auth-service",
-    image: "dockship/auth:v1.8.0",
-    containers: 2,
-    replicas: "2/2",
-    cpu: 28,
-    memory: 45,
-    network: "3.2 MB/s",
-    status: "running" as const,
-    ports: ["9000:9000"],
-  },
-  {
-    id: "app-003",
-    name: "postgres-db",
-    image: "postgres:15-alpine",
-    containers: 1,
-    replicas: "1/1",
-    cpu: 65,
-    memory: 78,
-    network: "8.1 MB/s",
-    status: "running" as const,
-    ports: ["5432:5432"],
-  },
-  {
-    id: "app-004",
-    name: "redis-cache",
-    image: "redis:7-alpine",
-    containers: 1,
-    replicas: "1/1",
-    cpu: 12,
-    memory: 34,
-    network: "1.8 MB/s",
-    status: "running" as const,
-    ports: ["6379:6379"],
-  },
-  {
-    id: "app-005",
-    name: "worker-queue",
-    image: "dockship/worker:v3.1.2",
-    containers: 4,
-    replicas: "3/4",
-    cpu: 55,
-    memory: 48,
-    network: "5.6 MB/s",
-    status: "pending" as const,
-    ports: [],
-  },
-  {
-    id: "app-006",
-    name: "metrics-collector",
-    image: "dockship/metrics:v1.2.0",
-    containers: 2,
-    replicas: "0/2",
-    cpu: 0,
-    memory: 0,
-    network: "0 MB/s",
-    status: "error" as const,
-    ports: ["9090:9090"],
-  },
-];
 
 export default function ApplicationsPage() {
+  const [applications, setApplications] = useState<Application[]>([]);
+
+  useEffect(() => {
+    const fetch = async () => {
+      setApplications(await getApplications());
+    };
+
+    fetch();
+  }, []);
+
   return (
     <DashboardLayout
       title="Applications"
@@ -107,8 +45,8 @@ export default function ApplicationsPage() {
       </div>
 
       <div className="space-y-3">
-        {applications.map((app) => (
+        {applications.map((app, i) => (
-          <Card key={app.id}>
+          <Card key={i}>
             <CardContent className="p-4">
               <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:items-center">
                 {/* Status & Name */}
@@ -166,7 +104,7 @@ export default function ApplicationsPage() {
                     Ports
                   </div>
                   <div className="flex gap-1 flex-wrap">
-                    {app.ports.length > 0 ? (
+                    {app.ports?.length > 0 ? (
                       app.ports.map((port) => (
                         <Badge key={port} className="text-[10px]">
                           {port}

src/app/containers/page.tsx

@@ -4,18 +4,28 @@ 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 {
+import { MoreVertical, Play, Square, Trash2, Container } from "lucide-react";
-  MoreVertical,
-  Play,
-  Square,
-  Trash2,
-  Container,
-} from "lucide-react";
 import { useEffect, useState } from "react";
-import { Docker } from "@/lib/types";
+import { getDocker, removeContainer } from "@/core/docker";
-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";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/components/ui/alert-dialog";
 
 type ContainerSummary = {
   id: string;
@@ -24,16 +34,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 +54,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 stats = await getContainerStats(container.Id);
-  const cpu = "4%";
+
-  const memory = "64MB / 128MB";
+  // 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,
@@ -60,6 +74,39 @@ 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[]>([]);
 
@@ -69,8 +116,12 @@ export default function ContainersPage() {
       const dockerNodes = await getDocker(nodes);
 
       setContainers(
+        await Promise.all(
           nodes.flatMap((node, i) =>
-          dockerNodes[i].containers.map((c) => summarizeContainer(c, node.name))
+            dockerNodes[i].containers.map((c) =>
+              summarizeContainer(c, node.name)
+            )
+          )
         )
       );
     };
@@ -131,7 +182,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,17 +211,23 @@ 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>
                         )}
-                        <Button variant="ghost" size="icon-sm">
+                        <RemoveDialog container={container} />
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
                         <Button variant="ghost" size="icon-sm">
                           <MoreVertical className="w-3 h-3" />
                         </Button>

src/app/monitoring/page.tsx

@@ -9,19 +9,10 @@ import { getMetrics } from "@/core/metrics";
 import { useEffect, useState } from "react";
 import { useIsMobile } from "@/hooks/use-mobile";
 import RadialChart from "@/components/RadialChart";
-import { getLiveNodes } from "@/core/node";
+import { getLiveNodes, getNodes } from "@/core/node";
 import { average } from "@/lib/format";
-
+import { ContainerStats } from "dockerode";
-const containerMetrics = [
+import { getContainerStats, getDocker } from "@/core/docker";
-  { name: "api-gateway-1", cpu: 45, memory: 62, network: "12.4 MB/s" },
-  { name: "api-gateway-2", cpu: 52, memory: 58, network: "10.2 MB/s" },
-  { name: "api-gateway-3", cpu: 38, memory: 55, network: "8.8 MB/s" },
-  { name: "auth-service-1", cpu: 28, memory: 45, network: "3.2 MB/s" },
-  { name: "auth-service-2", cpu: 32, memory: 48, network: "2.8 MB/s" },
-  { name: "postgres-db-1", cpu: 65, memory: 78, network: "8.1 MB/s" },
-  { name: "redis-cache-1", cpu: 12, memory: 34, network: "1.8 MB/s" },
-  { name: "worker-queue-1", cpu: 55, memory: 48, network: "5.6 MB/s" },
-];
 
 const cpuChartConfig = {
   cpu: { label: "CPU Usage", color: "var(--chart-1)" },
@@ -51,6 +42,9 @@ export default function MonitoringPage() {
     cpuUsage: number;
     ramUsage: number;
   }>();
+  const [containerStats, SetContainerStats] = useState<
+    (ContainerStats & { name: string })[]
+  >([]);
 
   useEffect(() => {
     const fetchNodes = async () => {
@@ -77,6 +71,32 @@ export default function MonitoringPage() {
     return () => clearInterval(i);
   }, []);
 
+  useEffect(() => {
+    async function fetchContainerMetrics() {
+      const nodes = await getNodes();
+      const dockerNodes = await getDocker(nodes);
+
+      SetContainerStats(
+        (
+          await Promise.all(
+            dockerNodes.flatMap((node) =>
+              node.containers.map(async (c) => {
+                const stats = await getContainerStats(c.Id);
+
+                if (stats === undefined) return undefined;
+
+                return { ...stats, name: c.Names[0] };
+              })
+            )
+          )
+        ).filter((s): s is ContainerStats & { name: string } => s !== undefined)
+      );
+
+      console.log(containerStats);
+    }
+    fetchContainerMetrics();
+  }, []);
+
   return (
     <DashboardLayout
       title="Monitoring"
@@ -175,7 +195,7 @@ export default function MonitoringPage() {
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
-            {containerMetrics.map((container) => (
+            {containerStats.map((container) => (
               <div
                 key={container.name}
                 className="border border-border p-3 bg-secondary/20"
@@ -187,20 +207,31 @@ export default function MonitoringPage() {
                   <div>
                     <div className="flex justify-between text-[10px] text-muted-foreground mb-1">
                       <span>CPU</span>
-                      <span>{container.cpu}%</span>
+                      <span>
+                        {container?.cpu_stats?.cpu_usage?.total_usage}%
+                      </span>
                     </div>
-                    <Progress value={container.cpu} className="w-full" />
+                    <Progress
+                      value={container?.cpu_stats?.cpu_usage?.total_usage}
+                      className="w-full"
+                    />
                   </div>
                   <div>
                     <div className="flex justify-between text-[10px] text-muted-foreground mb-1">
                       <span>Memory</span>
-                      <span>{container.memory}%</span>
+                      <span>{container?.memory_stats?.usage}%</span>
                     </div>
-                    <Progress value={container.memory} className="w-full" />
+                    <Progress
+                      value={container?.memory_stats?.usage}
+                      className="w-full"
+                    />
                   </div>
                   <div className="flex justify-between text-[10px] pt-1 border-t border-border">
                     <span className="text-muted-foreground">Network</span>
-                    <span className="font-mono">{container.network}</span>
+                    <span className="font-mono">
+                      {container?.networks &&
+                        container?.networks[0]?.tx_packets}
+                    </span>
                   </div>
                 </div>
               </div>

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" />}
         />

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/core/application.ts

@@ -1,72 +1,43 @@
 "use server";
 
 import { verifySession } from "./auth/session";
-import { randomUUID } from "crypto";
+import { getNodes } from "./node";
-import fs from "fs/promises";
+import axios from "axios";
-import path from "path";
+import { Application } from "@/lib/types";
-import { exec } from "child_process";
-import util from "util";
-
-const execAsync = util.promisify(exec);
-
-const DATA_DIR = path.join(process.cwd(), "data", "apps");
 
 export async function deployNewApp(name: string, repo: string, nodeId: string) {
   if (await verifySession()) {
     throw new Error("Unauthorized");
   }
 
-  // Create app ID
+  const nodes = await getNodes();
-  const appId = `app_${randomUUID()}`;
-  const appDir = path.join(DATA_DIR, appId);
-  const repoDir = path.join(appDir, "repo");
 
-  // Create directories
+  const targetNode = nodes.find((node) => node.node_id === nodeId);
-  await fs.mkdir(repoDir, { recursive: true });
 
-  // Write app.json
+  return await (
-  const appConfig = {
+    await axios.post(
-    id: appId,
+      `http://${targetNode?.ip}:3000/api/applications`,
-    name,
+      { name, repo, nodeId },
-    repo,
+      {
-    nodeId,
+        headers: { Authorization: `ApiKey ${targetNode?.key}` },
-    createdAt: new Date().toISOString(),
+      }
-  };
+    )
-
+  ).data.applications;
-  await fs.writeFile(
-    path.join(appDir, "app.json"),
-    JSON.stringify(appConfig, null, 2)
-  );
-
-  // Clone repository
-  try {
-    await execAsync(`git clone ${repo} ${repoDir}`);
-  } catch (err) {
-    throw new Error("Failed to clone repository");
 }
 
-  // Validate Dockerfile
+export async function getApplications(): Promise<Application[]> {
-  const dockerfilePath = path.join(repoDir, "Dockerfile");
+  const nodes = await getNodes();
 
-  try {
+  return (
-    await fs.access(dockerfilePath);
+    await Promise.all(
-  } catch {
+      nodes.map(
-    throw new Error("Dockerfile not found in repository root");
+        async (n) =>
-  }
+          await (
-
+            await axios.get(`http://${n.ip}:3000/api/applications`, {
-  const imageTag = `dockship/${appId}:latest`;
+              headers: { Authorization: `ApiKey ${n.key}` },
-
+            })
-  try {
+          ).data.applications
-    await execAsync(`docker build -t ${imageTag} .`, {
+      )
-      cwd: repoDir,
+    )
-    });
+  ).flat();
-  } catch {
-    throw new Error("Docker build failed");
-  }
-
-  return {
-    success: true,
-    appId,
-    image: imageTag,
-  };
 }

src/core/docker.ts

@@ -3,6 +3,8 @@
 import axios from "axios";
 import { Docker, Node } from "@/lib/types";
 import { verifySession } from "./auth/session";
+import { ContainerStats } from "dockerode";
+import { getNodes } from "./node";
 
 export async function getDocker(nodes: Node[]): Promise<Docker[]> {
   if (await verifySession()) return [];
@@ -10,7 +12,7 @@ export async function getDocker(nodes: Node[]): Promise<Docker[]> {
   return await Promise.all(
     nodes.map(async (node) => {
       const data = await (
-        await axios.get(`http://${node.ip}:3000/api/get-docker`, {
+        await axios.get(`http://${node.ip}:3000/api/container/`, {
           headers: { Authorization: `ApiKey ${node.key}` },
         })
       ).data;
@@ -19,3 +21,69 @@ export async function getDocker(nodes: Node[]): Promise<Docker[]> {
     })
   );
 }
+
+export async function getContainerStats(
+  containerId: string
+): Promise<ContainerStats | undefined> {
+  const nodes = await getNodes();
+
+  return (
+    await Promise.all(
+      nodes.map(
+        async (n) =>
+          await (
+            await axios.get(`http://${n.ip}:3000/api/container/stats`, {
+              headers: { Authorization: `ApiKey ${n.key}` },
+              params: { containerId },
+            })
+          ).data
+      )
+    )
+  ).find((s) => s);
+}
+
+export async function startContainer(containerId: string) {
+  const nodes = await getNodes();
+
+  nodes.forEach(
+    async (n) =>
+      await (
+        await axios.post(
+          `http://${n.ip}:3000/api/container/start`,
+          { containerId },
+          {
+            headers: { Authorization: `ApiKey ${n.key}` },
+            params: { containerId },
+          }
+        )
+      ).data
+  );
+}
+
+export async function stopContainer(containerId: string) {
+  const nodes = await getNodes();
+
+  nodes.forEach(
+    async (n) =>
+      await (
+        await axios.delete(`http://${n.ip}:3000/api/container/start`, {
+          headers: { Authorization: `ApiKey ${n.key}` },
+          params: { containerId },
+        })
+      ).data
+  );
+}
+
+export async function removeContainer(containerId: string) {
+  const nodes = await getNodes();
+
+  nodes.forEach(
+    async (n) =>
+      await (
+        await axios.delete(`http://${n.ip}:3000/api/container`, {
+          headers: { Authorization: `ApiKey ${n.key}` },
+          params: { containerId },
+        })
+      ).data
+  );
+}

src/core/server/application.ts

@@ -0,0 +1,120 @@
+"use server";
+
+import Docker from "dockerode";
+import { randomUUID } from "crypto";
+import fs from "fs/promises";
+import path from "path";
+import { exec } from "child_process";
+import util from "util";
+import axios from "axios";
+import { Application } from "@/lib/types";
+
+const docker = new Docker();
+const execAsync = util.promisify(exec);
+const DATA_DIR = path.join(process.cwd(), "data", "apps");
+
+export async function getApplications(): Promise<Application[]> {
+  const images = await docker.listImages();
+  const containers = await docker.listContainers({ all: true });
+
+  const apps: Application[] = [];
+
+  for (const image of images) {
+    const imageName = image.RepoTags?.[0];
+    if (!imageName) continue;
+
+    const relatedContainers = containers.filter((c) => c.Image === imageName);
+
+    let totalCpu = 0;
+    let totalMem = 0;
+    let running = 0;
+    const ports = new Set<string>();
+
+    for (const containerInfo of relatedContainers) {
+      const container = docker.getContainer(containerInfo.Id);
+
+      if (containerInfo.State === "running") running++;
+
+      containerInfo.Ports?.forEach((p) => {
+        if (p.PublicPort && p.PrivatePort) {
+          ports.add(`${p.PublicPort}:${p.PrivatePort}`);
+        }
+      });
+
+      if (containerInfo.State === "running") {
+        const stats = await container.stats({ stream: false });
+      }
+    }
+
+    apps.push({
+      id: image.Id.slice(7, 15),
+      name: imageName.split("/").pop()?.split(":")[0] ?? imageName,
+      image: imageName,
+      containers: relatedContainers.length,
+      replicas: `${running}/${relatedContainers.length}`,
+      cpu: Math.round(totalCpu),
+      memory: Math.round(totalMem),
+      network: "—",
+      status: running > 0 ? ("running" as const) : ("stopped" as const),
+      ports: [...ports],
+    });
+  }
+
+  return apps;
+}
+
+export async function deployNewApp(name: string, repo: string, nodeId: string) {
+  // Create app ID
+  const appId = `app_${randomUUID()}`;
+  const appDir = path.join(DATA_DIR, appId);
+  const repoDir = path.join(appDir, "repo");
+
+  // Create directories
+  await fs.mkdir(repoDir, { recursive: true });
+
+  // Write app.json
+  const appConfig = {
+    id: appId,
+    name,
+    repo,
+    nodeId,
+    createdAt: new Date().toISOString(),
+  };
+
+  await fs.writeFile(
+    path.join(appDir, "app.json"),
+    JSON.stringify(appConfig, null, 2)
+  );
+
+  // Clone repository
+  try {
+    await execAsync(`git clone ${repo} ${repoDir}`);
+  } catch (err) {
+    throw new Error("Failed to clone repository");
+  }
+
+  // Validate Dockerfile
+  const dockerfilePath = path.join(repoDir, "Dockerfile");
+
+  try {
+    await fs.access(dockerfilePath);
+  } catch {
+    throw new Error("Dockerfile not found in repository root");
+  }
+
+  const imageTag = `dockship/${appId}:latest`;
+
+  try {
+    await execAsync(`docker build -t ${imageTag} .`, {
+      cwd: repoDir,
+    });
+  } catch {
+    throw new Error("Docker build failed");
+  }
+
+  return {
+    success: true,
+    appId,
+    image: imageTag,
+  };
+}

src/core/server/docker.ts

@@ -1,11 +1,29 @@
 "use server";
 
-import Docker from "dockerode";
+import Docker, { ContainerStats } from "dockerode";
 
 const docker = new Docker();
 
 export async function getDocker() {
   const version = await docker.version();
-  const containers = await docker.listContainers();
+  const containers = await docker.listContainers({ all: true });
   return { version, containers };
 }
+
+export async function getContainerStats(
+  containerId: string
+): Promise<ContainerStats | undefined> {
+  return await docker.getContainer(containerId).stats();
+}
+
+export async function startContainer(containerId: string) {
+  await docker.getContainer(containerId).start();
+}
+
+export async function stopContainer(containerId: string) {
+  await docker.getContainer(containerId).stop();
+}
+
+export async function removeContainer(containerId: string) {
+  await docker.getContainer(containerId).remove();
+}

src/lib/types.ts

@@ -47,3 +47,16 @@ export interface Docker {
   version: string;
   containers: ContainerInfo[];
 }
+
+export interface Application {
+  id: string;
+  name: string;
+  image: string;
+  containers: number;
+  replicas: string;
+  cpu: number;
+  memory: number;
+  network: string;
+  status: "running" | "stopped";
+  ports: string[];
+}