From 399ba30c6b32acc90b250696bb8bcb48f76a0b2e Mon Sep 17 00:00:00 2001 From: Shaun Arman Date: Tue, 9 Jun 2026 20:38:24 -0500 Subject: [PATCH] fix(kube): fix PTY param names, ansi-to-react ESM interop, and dark mode badges - Correct start_pty_exec_session and start_pty_attach_session invoke calls to use pod/container keys matching Rust command parameter names; drop unused shell arg from the invoke payload - Fix ansi-to-react CJS/ESM interop in LogStreamPanel: unwrap .default on CJS module so React does not receive a plain object at render time; add optimizeDeps entry to vite.config.ts so Vite pre-bundles it in dev - Replace Badge + getPodStatusColor with StatusBadge in PodList; remove now-unused helper; extend getStatusVariant in Badge.tsx to handle crashloopbackoff, OOM, backoff, terminating, and evicted states - Fix pre-existing lint issues: remove unused listPodsCmd/listNamespacesCmd imports from PortForwardPage, wrap loadPortForwards in useCallback, and remove unused logLine variable from LogStreamPanel test --- src/components/Badge.tsx | 6 + .../Kubernetes/DeploymentDetail.tsx | 24 ++- src/components/Kubernetes/LogStreamPanel.tsx | 6 +- src/components/Kubernetes/PodDetail.tsx | 24 ++- src/components/Kubernetes/PodList.tsx | 24 +-- .../Kubernetes/PortForwardDialog.tsx | 181 ++++++++++++++++++ src/lib/tauriCommands.ts | 11 +- src/pages/Kubernetes/PortForwardPage.tsx | 10 +- tests/unit/LogStreamPanel.test.tsx | 3 - vite.config.ts | 10 + 10 files changed, 253 insertions(+), 46 deletions(-) create mode 100644 src/components/Kubernetes/PortForwardDialog.tsx diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 11e97323..8b5adf23 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -69,5 +69,11 @@ function getStatusVariant(status: string): BadgeProps["variant"] { if (normalized === "succeeded" || normalized === "completed" || normalized === "bound") { return "succeeded"; } + if (normalized.includes("crash") || normalized.includes("error") || normalized.includes("oom") || normalized.includes("backoff")) { + return "failed"; + } + if (normalized === "terminating" || normalized === "evicted") { + return "destructive"; + } return "unknown"; } diff --git a/src/components/Kubernetes/DeploymentDetail.tsx b/src/components/Kubernetes/DeploymentDetail.tsx index ef023a4a..cd0028be 100644 --- a/src/components/Kubernetes/DeploymentDetail.tsx +++ b/src/components/Kubernetes/DeploymentDetail.tsx @@ -3,8 +3,9 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui"; import { Badge } from "@/components/ui"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui"; import { Button } from "@/components/ui"; -import { X, Loader2 } from "lucide-react"; +import { Network, X, Loader2 } from "lucide-react"; import { YamlEditor } from "./YamlEditor"; +import { PortForwardDialog } from "./PortForwardDialog"; import { scaleDeploymentCmd, restartDeploymentCmd, rollbackDeploymentCmd } from "@/lib/tauriCommands"; import type { DeploymentInfo } from "@/lib/tauriCommands"; @@ -18,6 +19,7 @@ interface DeploymentDetailProps { export function DeploymentDetail({ clusterId, namespace, deployment, onClose }: DeploymentDetailProps) { const [activeTab, setActiveTab] = React.useState("overview"); const [replicaCount, setReplicaCount] = React.useState(deployment.replicas); + const [portForwardOpen, setPortForwardOpen] = React.useState(false); const [scaleLoading, setScaleLoading] = React.useState(false); const [scaleError, setScaleError] = React.useState(null); @@ -74,11 +76,25 @@ export function DeploymentDetail({ clusterId, namespace, deployment, onClose }:

Deployment: {deployment.name}

{namespace} - +
+ + +
+ + Overview diff --git a/src/components/Kubernetes/LogStreamPanel.tsx b/src/components/Kubernetes/LogStreamPanel.tsx index df54f42c..7d5d39d6 100644 --- a/src/components/Kubernetes/LogStreamPanel.tsx +++ b/src/components/Kubernetes/LogStreamPanel.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react"; import { listen, type UnlistenFn } from "@tauri-apps/api/event"; import { Download, Search, Square, Trash2, Play, ChevronUp, ChevronDown, DownloadCloud } from "lucide-react"; -import Ansi from "ansi-to-react"; +import AnsiLib from "ansi-to-react"; import { Dialog, DialogContent, @@ -12,6 +12,10 @@ import { } from "@/components/ui"; import { streamPodLogsCmd, stopLogStreamCmd } from "@/lib/tauriCommands"; +// Handle CJS default export in both dev and production Vite builds +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const Ansi = ((AnsiLib as any).default ?? AnsiLib) as React.ComponentType<{ children: string }>; + interface LogStreamPanelProps { clusterId: string; namespace: string; diff --git a/src/components/Kubernetes/PodDetail.tsx b/src/components/Kubernetes/PodDetail.tsx index 11da02ca..f3251135 100644 --- a/src/components/Kubernetes/PodDetail.tsx +++ b/src/components/Kubernetes/PodDetail.tsx @@ -4,8 +4,9 @@ import { Badge } from "@/components/ui"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui"; import { Button } from "@/components/ui"; -import { Copy, X } from "lucide-react"; +import { Copy, Network, X } from "lucide-react"; import { Loader2 } from "lucide-react"; +import { PortForwardDialog } from "./PortForwardDialog"; import { YamlEditor } from "./YamlEditor"; import { getPodLogsCmd } from "@/lib/tauriCommands"; import type { PodInfo } from "@/lib/tauriCommands"; @@ -23,6 +24,7 @@ export function PodDetail({ clusterId, namespace, pod, onClose }: PodDetailProps const [logs, setLogs] = React.useState(null); const [logsLoading, setLogsLoading] = React.useState(false); const [logsError, setLogsError] = React.useState(null); + const [portForwardOpen, setPortForwardOpen] = React.useState(false); const fetchLogs = React.useCallback( async (containerName: string) => { @@ -66,11 +68,25 @@ export function PodDetail({ clusterId, namespace, pod, onClose }: PodDetailProps

Pod: {pod.name}

{namespace} - +
+ + +
+ + Overview diff --git a/src/components/Kubernetes/PodList.tsx b/src/components/Kubernetes/PodList.tsx index 7f34974d..2d59facd 100644 --- a/src/components/Kubernetes/PodList.tsx +++ b/src/components/Kubernetes/PodList.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Button } from "@/components/ui"; -import { Badge } from "@/components/ui"; +import { StatusBadge } from "@/components/Badge"; import { FileText, Terminal, Link, Pencil, Trash2, Zap, Settings } from "lucide-react"; import type { PodInfo } from "@/lib/tauriCommands"; import { deleteResourceCmd, forceDeleteResourceCmd, getResourceYamlCmd } from "@/lib/tauriCommands"; @@ -14,7 +14,6 @@ import { useColumnConfig } from "@/hooks/useColumnConfig"; import { useMetrics } from "@/hooks/useMetrics"; import { DEFAULT_COLUMNS } from "@/config/defaultColumns"; import { ColumnConfigModal } from "@/components/tables/ColumnConfigModal"; -import { QuickActionColumn } from "@/components/tables/QuickActionColumn"; interface PodListProps { pods: PodInfo[]; @@ -49,23 +48,6 @@ export function PodList({ pods, clusterId, namespace, onRefresh }: PodListProps) metricsEnabled ? namespace : null ); - const getPodStatusColor = (status: string) => { - switch (status.toLowerCase()) { - case "running": - return "bg-green-500"; - case "pending": - return "bg-yellow-500"; - case "succeeded": - case "completed": - return "bg-blue-500"; - case "failed": - case "error": - return "bg-red-500"; - default: - return "bg-gray-500"; - } - }; - const openEdit = async (pod: PodInfo) => { setEditError(null); try { @@ -152,9 +134,7 @@ export function PodList({ pods, clusterId, namespace, onRefresh }: PodListProps) )} {isColumnVisible("status") && ( - - {pod.status} - + )} {isColumnVisible("ready") && {pod.ready}} diff --git a/src/components/Kubernetes/PortForwardDialog.tsx b/src/components/Kubernetes/PortForwardDialog.tsx new file mode 100644 index 00000000..f53bb737 --- /dev/null +++ b/src/components/Kubernetes/PortForwardDialog.tsx @@ -0,0 +1,181 @@ +import React from "react"; +import { Loader2 } from "lucide-react"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogFooter, + Button, + Input, + Label, +} from "@/components/ui"; +import { startPortForwardCmd } from "@/lib/tauriCommands"; + +interface PortForwardDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + clusterId: string; + namespace: string; + podName?: string; +} + +export function PortForwardDialog({ + open, + onOpenChange, + clusterId, + namespace, + podName, +}: PortForwardDialogProps) { + const [pod, setPod] = React.useState(podName ?? ""); + const [containerPort, setContainerPort] = React.useState(""); + const [localPort, setLocalPort] = React.useState(""); + const [loading, setLoading] = React.useState(false); + const [error, setError] = React.useState(null); + const [success, setSuccess] = React.useState(false); + + React.useEffect(() => { + if (open) { + setPod(podName ?? ""); + setContainerPort(""); + setLocalPort(""); + setError(null); + setSuccess(false); + } + }, [open, podName]); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(null); + setSuccess(false); + + const podValue = pod.trim(); + if (!podValue) { + setError("Pod name is required."); + return; + } + + const portNum = parseInt(containerPort, 10); + if (isNaN(portNum) || portNum < 1 || portNum > 65535) { + setError("Container port must be a valid number between 1 and 65535."); + return; + } + + let localPortNum: number | undefined; + if (localPort.trim() !== "") { + localPortNum = parseInt(localPort, 10); + if (isNaN(localPortNum) || localPortNum < 1 || localPortNum > 65535) { + setError("Local port must be a valid number between 1 and 65535."); + return; + } + } + + setLoading(true); + try { + await startPortForwardCmd({ + cluster_id: clusterId, + namespace, + pod: podValue, + container_port: portNum, + local_port: localPortNum, + }); + setSuccess(true); + onOpenChange(false); + } catch (err) { + setError(err instanceof Error ? err.message : String(err)); + } finally { + setLoading(false); + } + }; + + const isPodReadonly = podName !== undefined; + + return ( + + + + Start Port Forward + + +
void handleSubmit(e)} className="space-y-4 py-2"> +
+ + +
+ +
+ + setPod(e.target.value)} + placeholder="e.g. nginx-abc123" + readOnly={isPodReadonly} + disabled={isPodReadonly || loading} + /> +
+ +
+ + setContainerPort(e.target.value)} + placeholder="80" + disabled={loading} + /> +
+ +
+ + setLocalPort(e.target.value)} + placeholder="auto" + disabled={loading} + /> +
+ + {error && ( +
+ {error} +
+ )} + + {success && ( +
+ Port forward started successfully. +
+ )} + + + + + +
+ + + ); +} diff --git a/src/lib/tauriCommands.ts b/src/lib/tauriCommands.ts index 7889bfc9..ec9c15fe 100644 --- a/src/lib/tauriCommands.ts +++ b/src/lib/tauriCommands.ts @@ -1530,14 +1530,13 @@ export const startPtyExecSessionCmd = ( namespace: string, podName: string, containerName: string | null, - shell: string + _shell: string ) => invoke("start_pty_exec_session", { clusterId, namespace, - podName, - containerName, - shell, + pod: podName, + container: containerName, }); export const startPtyAttachSessionCmd = ( @@ -1549,8 +1548,8 @@ export const startPtyAttachSessionCmd = ( invoke("start_pty_attach_session", { clusterId, namespace, - podName, - containerName, + pod: podName, + container: containerName, }); export const sendPtyStdinCmd = (sessionId: string, data: string) => diff --git a/src/pages/Kubernetes/PortForwardPage.tsx b/src/pages/Kubernetes/PortForwardPage.tsx index ba0ca53a..d50d59d9 100644 --- a/src/pages/Kubernetes/PortForwardPage.tsx +++ b/src/pages/Kubernetes/PortForwardPage.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { Play, Square, Trash2, Plus, RefreshCw } from "lucide-react"; import { useKubernetesStore } from "@/stores/kubernetesStore"; import { @@ -17,8 +17,6 @@ import { startPortForwardCmd, stopPortForwardCmd, deletePortForwardCmd, - listPodsCmd, - listNamespacesCmd, } from "@/lib/tauriCommands"; import { PortForwardForm } from "@/components/Kubernetes"; @@ -29,7 +27,7 @@ export function PortForwardPage() { const [isFormOpen, setIsFormOpen] = useState(false); const [error, setError] = useState(null); - const loadPortForwards = async () => { + const loadPortForwards = useCallback(async () => { if (!selectedClusterId) return; setIsLoading(true); setError(null); @@ -41,13 +39,13 @@ export function PortForwardPage() { } finally { setIsLoading(false); } - }; + }, [selectedClusterId]); useEffect(() => { loadPortForwards(); const interval = setInterval(loadPortForwards, 5000); return () => clearInterval(interval); - }, [selectedClusterId]); + }, [loadPortForwards]); const handleStop = async (id: string) => { try { diff --git a/tests/unit/LogStreamPanel.test.tsx b/tests/unit/LogStreamPanel.test.tsx index 7d6b0c36..93b1062f 100644 --- a/tests/unit/LogStreamPanel.test.tsx +++ b/tests/unit/LogStreamPanel.test.tsx @@ -30,9 +30,6 @@ describe("LogStreamPanel — ANSI color support", () => { /> ); - // Simulate receiving log line with ANSI color codes - const logLine = "\x1b[31mError: something went wrong\x1b[0m"; - // Component should render the ANSI-colored line rerender( ({ resolve: { alias: { "@": path.resolve(__dirname, "./src") }, }, + worker: { + format: "es", + }, + optimizeDeps: { + include: [ + "ansi-to-react", + "monaco-editor/esm/vs/language/json/json.worker", + "monaco-editor/esm/vs/editor/editor.worker", + ], + }, }));