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.
This commit is contained in:
Shaun Arman
parent
e1771b5776
commit
8bd4a5049f
234
src/pages/Kubernetes/PortForwardPage.tsx
Normal file
234
src/pages/Kubernetes/PortForwardPage.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user