From 8bd4a5049f7c449cd260af1db88b4a92eb7db821 Mon Sep 17 00:00:00 2001
From: Shaun Arman <Shaun.Arman@motorolasolutions.com>
Date: Tue, 9 Jun 2026 13:25:54 -0500
Subject: [PATCH] feat(network): add dedicated port forwarding management page

Add PortForwardPage.tsx as standalone page for port forwarding management
with complete CRUD operations (Start, Stop, Delete). Includes real-time
status updates, auto-refresh, and integrated form for creating new forwards.

All 6 network resource list components already exist and are complete:
- ServiceList.tsx: Name, Type, Cluster IP, External IP, Ports, Age, Status
- IngressList.tsx: Name, Namespace, Load Balancers, Rules, Age
- NetworkPolicyList.tsx: Name, Namespace, Pod Selector, Age
- EndpointList.tsx: Name, Namespace, Endpoints, Age
- EndpointSliceList.tsx: Name, Namespace, Endpoints, Address Type, Age
- IngressClassList.tsx: Name, Controller, Age

Backend commands verified in kube.rs:
- start_port_forward, stop_port_forward, list_port_forwards, delete_port_forward

Navigation already integrated in KubernetesPage.tsx Network group.
---
 src/pages/Kubernetes/PortForwardPage.tsx | 234 +++++++++++++++++++++++
 1 file changed, 234 insertions(+)
 create mode 100644 src/pages/Kubernetes/PortForwardPage.tsx

diff --git a/src/pages/Kubernetes/PortForwardPage.tsx b/src/pages/Kubernetes/PortForwardPage.tsx
new file mode 100644
index 00000000..ba0ca53a
--- /dev/null
+++ b/src/pages/Kubernetes/PortForwardPage.tsx
@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from "react";
+import { Play, Square, Trash2, Plus, RefreshCw } from "lucide-react";
+import { useKubernetesStore } from "@/stores/kubernetesStore";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Badge,
+  Button,
+} from "@/components/ui";
+import type { PortForwardResponse } from "@/lib/tauriCommands";
+import {
+  listPortForwardsCmd,
+  startPortForwardCmd,
+  stopPortForwardCmd,
+  deletePortForwardCmd,
+  listPodsCmd,
+  listNamespacesCmd,
+} from "@/lib/tauriCommands";
+import { PortForwardForm } from "@/components/Kubernetes";
+
+export function PortForwardPage() {
+  const { selectedClusterId } = useKubernetesStore();
+  const [portForwards, setPortForwards] = useState<PortForwardResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadPortForwards = async () => {
+    if (!selectedClusterId) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await listPortForwardsCmd();
+      setPortForwards(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadPortForwards();
+    const interval = setInterval(loadPortForwards, 5000);
+    return () => clearInterval(interval);
+  }, [selectedClusterId]);
+
+  const handleStop = async (id: string) => {
+    try {
+      await stopPortForwardCmd(id);
+      setPortForwards((prev) => prev.filter((pf) => pf.id !== id));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deletePortForwardCmd(id);
+      setPortForwards((prev) => prev.filter((pf) => pf.id !== id));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const handleStart = async (pf: PortForwardResponse) => {
+    try {
+      if (!selectedClusterId) return;
+      const result = await startPortForwardCmd({
+        cluster_id: selectedClusterId,
+        namespace: pf.namespace,
+        pod: pf.pod,
+        container_port: pf.container_ports[0] ?? 80,
+        local_port: pf.local_ports[0] ?? 0,
+      });
+      setPortForwards((prev) => [...prev, result]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case "active":
+        return "bg-green-500";
+      case "stopped":
+        return "bg-gray-500";
+      default:
+        return "bg-red-500";
+    }
+  };
+
+  if (!selectedClusterId) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4 text-center px-8">
+        <Play className="w-16 h-16 text-muted-foreground" />
+        <h2 className="text-2xl font-semibold">No cluster selected</h2>
+        <p className="text-muted-foreground max-w-sm">
+          Select a cluster from the dropdown to manage port forwards.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold">Port Forwarding</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Manage port forwards to access pods locally
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={loadPortForwards}
+            disabled={isLoading}
+          >
+            <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
+            Refresh
+          </Button>
+          <Button size="sm" onClick={() => setIsFormOpen(true)}>
+            <Plus className="w-4 h-4 mr-2" />
+            New Port Forward
+          </Button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm">
+          {error}
+        </div>
+      )}
+
+      <div className="border rounded-lg bg-card">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Namespace</TableHead>
+              <TableHead>Kind</TableHead>
+              <TableHead>Pod Port</TableHead>
+              <TableHead>Local Port</TableHead>
+              <TableHead>Protocol</TableHead>
+              <TableHead>Address</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {portForwards.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={9} className="text-center text-muted-foreground py-8">
+                  {isLoading ? "Loading port forwards..." : "No active port forwards"}
+                </TableCell>
+              </TableRow>
+            ) : (
+              portForwards.map((pf) => (
+                <TableRow key={pf.id}>
+                  <TableCell className="font-medium">{pf.pod}</TableCell>
+                  <TableCell>{pf.namespace}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">Pod</Badge>
+                  </TableCell>
+                  <TableCell className="font-mono text-sm">
+                    {pf.container_ports.join(", ")}
+                  </TableCell>
+                  <TableCell className="font-mono text-sm">
+                    {pf.local_ports.join(", ")}
+                  </TableCell>
+                  <TableCell>TCP</TableCell>
+                  <TableCell className="font-mono text-sm">
+                    localhost:{pf.local_ports[0]}
+                  </TableCell>
+                  <TableCell>
+                    <Badge className={`${getStatusColor(pf.status)} text-white`}>
+                      {pf.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex gap-1 justify-end">
+                      {pf.status.toLowerCase() === "active" ? (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleStop(pf.id)}
+                          title="Stop"
+                        >
+                          <Square className="w-4 h-4" />
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleStart(pf)}
+                          title="Start"
+                        >
+                          <Play className="w-4 h-4" />
+                        </Button>
+                      )}
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleDelete(pf.id)}
+                        title="Delete"
+                      >
+                        <Trash2 className="w-4 h-4 text-destructive" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PortForwardForm
+        isOpen={isFormOpen}
+        onClose={() => setIsFormOpen(false)}
+        onStart={(pf) => {
+          setPortForwards((prev) => [...prev, pf]);
+          setIsFormOpen(false);
+        }}
+      />
+    </div>
+  );
+}