Redeploy

src/app/deployments/page.tsx

@@ -10,13 +10,14 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Plus, Play, Pause, Square } from "lucide-react";
+import { Plus, Play, Pause, Square, RotateCcw } 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";
 import { useAsync, useAsyncInterval } from "@/hooks/use-async";
 import RemoveDialog from "@/components/dialogs/Remove";
+import { Application } from "@/lib/types";
 
 const statusDot = {
   running: "bg-chart-2",
@@ -34,11 +35,11 @@ export default function DeploymentsPage() {
     [apps],
   );
 
-  const appNameByContainer = useMemo(() => {
+  const appByContainer = useMemo(() => {
-    const map = new Map<string, string>();
+    const map = new Map<string, Application>();
     for (const app of apps) {
       for (const container of app.deployments) {
-        map.set(container, app.name);
+        map.set(container, app);
       }
     }
     return map;
@@ -90,7 +91,8 @@ export default function DeploymentsPage() {
                     <CardTitle>
                       {dep.name} @{" "}
                       <span className="text-primary-foreground">
-                        {appNameByContainer.get(dep.container) ?? "Unknown app"}
+                        {appByContainer.get(dep.container)?.name ??
+                          "Unknown app"}
                       </span>
                     </CardTitle>
                     <CardDescription className="flex gap-3">
@@ -123,6 +125,19 @@ export default function DeploymentsPage() {
                         <Square className="w-3 h-3 text-primary" />
                       )}
                     </Button>
+                    <DeployAppDialog
+                      defaultApp={appByContainer.get(dep.container)?.id}
+                      ports={dep.ports.map(([to, from]) => ({
+                        containerPort: from.toString(),
+                        hostPort: to.toString(),
+                        protocol: "tcp",
+                      }))}
+                      nodeId={dep.nodeId}
+                    >
+                      <Button variant="ghost" size="icon-sm">
+                        <RotateCcw className="w-3 h-3" />
+                      </Button>
+                    </DeployAppDialog>
                     <RemoveDialog remove={() => {}} />
                   </div>
                 </div>

src/components/dialogs/DeployApp.tsx

@@ -24,17 +24,21 @@ import { Plus } from "lucide-react";
 export default function DeployAppDialog({
   defaultApp,
   children,
+  ports: initialPorts,
+  nodeId: defaultNode,
 }: {
   defaultApp?: string;
+  nodeId?: string;
+  ports?: Port[];
   children: ReactNode;
 }) {
   const { value: nodes } = useAsync("liveNodes", [], getLiveNodes);
   const { value: apps } = useAsync<Application[]>("apps", [], getApps);
   const [name, setName] = useState("");
   const [app, setApp] = useState(defaultApp || "");
-  const [node, setNode] = useState("");
+  const [node, setNode] = useState(defaultNode || "");
 
-  const [ports, setPorts] = useState<Port[]>([]);
+  const [ports, setPorts] = useState<Port[]>(initialPorts || []);
   const [newPort, setNewPort] = useState<Port>({
     containerPort: "",
     hostPort: "",

src/lib/dockship/deploy.ts

@@ -5,7 +5,9 @@ import { getNodes } from "./node";
 import axios from "axios";
 import { editApp, getApp, getApps } from "./application";
 
-export async function getDeployments(): Promise<Deployment[]> {
+export async function getDeployments(): Promise<
+  (Deployment & { nodeId: string })[]
+> {
   const nodes = await getNodes();
   const apps = await getApps();
 
@@ -17,7 +19,7 @@ export async function getDeployments(): Promise<Deployment[]> {
             await axios.post(`http://${n.ip}:3000/api/get-deployments`, apps, {
               headers: { Authorization: `ApiKey ${n.key}` },
             })
-          ).data.deployments,
+          ).data.deployments.map((d: any) => ({ ...d, nodeId: n.node_id })),
       ),
     )
   ).flat();