Deployment port configuration and log fix

src/components/dialogs/DeployApp.tsx

@@ -17,8 +17,9 @@ import { getLiveNodes } from "@/lib/dockship/node";
 import { Combobox } from "../ui/combobox";
 import { deployApp } from "@/lib/dockship/deploy";
 import { useAsync } from "@/hooks/use-async";
-import { Application } from "@/lib/types";
+import { Application, Port } from "@/lib/types";
 import { getApps } from "@/lib/dockship/application";
+import { Plus } from "lucide-react";
 
 export default function DeployAppDialog({
   defaultApp,
@@ -33,9 +34,26 @@ export default function DeployAppDialog({
   const [app, setApp] = useState(defaultApp || "");
   const [node, setNode] = useState("");
 
+  const [ports, setPorts] = useState<Port[]>([]);
+  const [newPort, setNewPort] = useState<Port>({
+    containerPort: "",
+    hostPort: "",
+    protocol: "tcp",
+  });
+
+  const addPort = () => {
+    if (!newPort.containerPort || !newPort.hostPort) return;
+    setPorts([...ports, newPort]);
+    setNewPort({ containerPort: "", hostPort: "", protocol: "tcp" });
+  };
+
+  const removePort = (index: number) => {
+    setPorts(ports.filter((_, i) => i !== index));
+  };
+
   const deploy = async () => {
-    console.log(name, app, node);
-    await deployApp(name, app, node);
+    console.log("Deploying:", { name, app, node, ports });
+    await deployApp(name, app, node, ports);
   };
 
   return (
@@ -48,6 +66,7 @@ export default function DeployAppDialog({
         </DialogHeader>
 
         <div className="grid gap-4">
+          {/* Name */}
           <div className="grid gap-3">
             <Label htmlFor="name">
               Deployment name <span className="text-destructive">*</span>
@@ -60,6 +79,7 @@ export default function DeployAppDialog({
             />
           </div>
 
+          {/* Application */}
           <div className="grid gap-3">
             <Label htmlFor="repo">
               Application <span className="text-destructive">*</span>
@@ -76,6 +96,7 @@ export default function DeployAppDialog({
             />
           </div>
 
+          {/* Node */}
           <div className="grid gap-3">
             <Label htmlFor="node">
               Node <span className="text-destructive">*</span>
@@ -90,6 +111,65 @@ export default function DeployAppDialog({
               listPlaceholder="No nodes found :("
             />
           </div>
+
+          {/* Ports */}
+          <div className="grid gap-3">
+            <Label>Ports</Label>
+            <div className="flex gap-2 items-end">
+              <Input
+                placeholder="Container Port"
+                value={newPort.containerPort}
+                onChange={(e) =>
+                  setNewPort({ ...newPort, containerPort: e.target.value })
+                }
+              />
+              <Input
+                placeholder="Host Port"
+                value={newPort.hostPort}
+                onChange={(e) =>
+                  setNewPort({ ...newPort, hostPort: e.target.value })
+                }
+              />
+              <Combobox
+                value={newPort.protocol}
+                setValue={(v) =>
+                  setNewPort({
+                    ...newPort,
+                    protocol: v as "tcp" | "udp",
+                  })
+                }
+                data={[
+                  { label: "TCP", value: "tcp" },
+                  { label: "UDP", value: "udp" },
+                ]}
+                placeholder="Select protocol..."
+                listPlaceholder="No protocols found :("
+              />
+              <Button onClick={addPort} variant="ghost">
+                <Plus />
+              </Button>
+            </div>
+
+            {ports.length > 0 && (
+              <ul className="mt-2 space-y-1">
+                {ports.map((p, i) => (
+                  <li key={i} className="flex justify-between items-center">
+                    <span>
+                      {p.containerPort} → {p.hostPort} (
+                      {p.protocol.toUpperCase()})
+                    </span>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => removePort(i)}
+                    >
+                      Remove
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
         </div>
 
         <DialogFooter>