Deployment name

src/app/deployments/page.tsx

@@ -70,9 +70,6 @@ export default function DeploymentsPage() {
 
       <div className="divide-y divide-border">
         {deployments.map((dep) => {
-          const appName =
-            appNameByContainer.get(dep.container) ?? "Unknown app";
-
           return (
             <Card key={`${dep.image}-${dep.container ?? "latest"}`}>
               <CardContent>
@@ -85,7 +82,12 @@ export default function DeploymentsPage() {
                           statusDot.stopped,
                       )}
                     />
-                    <CardTitle>{appName}</CardTitle>
+                    <CardTitle>
+                      {dep.name} @{" "}
+                      <span className="text-primary-foreground">
+                        {appNameByContainer.get(dep.container) ?? "Unknown app"}
+                      </span>
+                    </CardTitle>
                     <CardDescription className="flex gap-3">
                       {dep.ports.map(([to, from]) => (
                         <span key={`${from}-${to}`}>

src/app/overview/page.tsx

@@ -5,26 +5,11 @@ import { StatCard } from "@/components/dashboard/StatCard";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Box,
-  Server,
-  Container,
-  Activity,
-  ArrowRight,
-  Clock,
-  Rocket,
-} from "lucide-react";
+import { Box, Server, Container, ArrowRight, Rocket } from "lucide-react";
 import { Progress } from "@/components/ui/progress";
 import Link from "next/link";
 import { getLiveNodes } from "@/lib/dockship/node";
-import { useEffect, useMemo, useState } from "react";
-import {
-  Application,
-  Deployment,
-  Docker,
-  Node,
-  NodeLiveData,
-} from "@/lib/types";
+import { useMemo } from "react";
 import { getDocker } from "@/lib/dockship/docker";
 import { getApps } from "@/lib/dockship/application";
 import { cn } from "@/lib/utils";
@@ -169,7 +154,11 @@ export default function OverviewPage() {
                     />
                     <div>
                       <div className="font-mono text-sm">
-                        {appNameByContainer.get(dep.container)}
+                        {dep.name} @{" "}
+                        <span className="text-primary-foreground">
+                          {appNameByContainer.get(dep.container) ??
+                            "Unknown app"}
+                        </span>
                       </div>
                       <div className="text-xs text-muted-foreground">
                         {dep.image.slice(7, 19)}

src/core/deployment.ts

@@ -84,6 +84,7 @@ export async function getDeployments(
           }
 
           return {
+            name: containerInfo.Name.replace(/^\//, ""),
             image: containerInfo.Image,
             container: containerInfo.Id,
             cpu,

src/lib/types.ts

@@ -58,6 +58,7 @@ export interface Application {
 }
 
 export interface Deployment {
+  name: string;
   image: string;
   container: string;
   cpu: number;