feat(kubernetes): implement Lens Desktop v5 feature-parity UI
Complete overhaul of the Kubernetes management page from a basic config
panel into a full Lens-style IDE shell with 26 resource types, real-time
data, and a comprehensive test suite.
Layout & navigation:
- Rewrite KubernetesPage as a Lens v5-style shell: collapsible sidebar
(Workloads / Services & Networking / Config & Storage / Access Control /
Cluster), top hotbar with cluster+namespace selectors, Ctrl+K command
palette
- All 26 resource types now accessible via sidebar navigation (previously 5)
New resource types (Rust + TypeScript + React):
- StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges
- 4 new Tauri commands registered in generate_handler![]
Component implementations (replacing stubs with real IPC):
- Terminal: full xterm.js with multi-tab sessions and exec_pod IPC
- YamlEditor: Monaco editor with YAML syntax highlighting
- MetricsChart: recharts LineChart/BarChart
- ClusterOverview: live node/pod/deployment/namespace counts
- ClusterDetails: real kubeconfig + node data
- PodDetail, DeploymentDetail, ServiceDetail, ConfigMapDetail, SecretDetail:
all connected to real IPC data, zero hardcoded values
- CreateResourceModal, EditResourceModal: wired to createResourceCmd /
editResourceCmd
- RbacViewer: live data from 4 RBAC IPC commands
- RbacEditor: create roles/cluster-roles via YAML editor
- CommandPalette: 12 real navigation commands, keyboard nav
Dependencies added: xterm@5, xterm-addon-fit, xterm-addon-web-links,
@monaco-editor/react@4, recharts@2
Tooling:
- Replace eslint-plugin-react (incompatible with ESLint 10) with
@eslint-react/eslint-plugin; fix eslint.config.js for flat config
- Fix pre-existing hoisting lint errors in Security.tsx, PortForwardForm.tsx
- Fix eventBus.ts: replace all `any` generics with `unknown`
Tests: 251 passing across 35 test files (was 94/19)
- 16 new test files covering all new and fixed components (TDD)
- npx tsc --noEmit: 0 errors
- cargo clippy -- -D warnings: 0 warnings
- cargo fmt --check: passes
- eslint src/ --max-warnings 0: 0 issues
2026-06-07 21:41:28 +00:00
|
|
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
|
|
|
import { render, screen, waitFor } from "@testing-library/react";
|
|
|
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
|
|
|
import { ClusterOverview } from "@/components/Kubernetes/ClusterOverview";
|
|
|
|
|
|
|
|
|
|
type MockedInvoke = typeof invoke & {
|
|
|
|
|
mockResolvedValue: (v: unknown) => void;
|
|
|
|
|
mockRejectedValue: (e: Error) => void;
|
|
|
|
|
mockImplementation: (fn: (cmd: string) => Promise<unknown>) => void;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const mockInvoke = invoke as MockedInvoke;
|
|
|
|
|
|
|
|
|
|
const mockNodes = [
|
|
|
|
|
{
|
|
|
|
|
name: "node-1",
|
|
|
|
|
status: "Ready",
|
|
|
|
|
roles: "control-plane",
|
|
|
|
|
version: "v1.28.4",
|
|
|
|
|
internal_ip: "10.0.0.1",
|
|
|
|
|
os_image: "Ubuntu 22.04",
|
|
|
|
|
kernel_version: "5.15.0",
|
|
|
|
|
kubelet_version: "v1.28.4",
|
|
|
|
|
age: "30d",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "node-2",
|
|
|
|
|
status: "Ready",
|
|
|
|
|
roles: "worker",
|
|
|
|
|
version: "v1.28.4",
|
|
|
|
|
internal_ip: "10.0.0.2",
|
|
|
|
|
os_image: "Ubuntu 22.04",
|
|
|
|
|
kernel_version: "5.15.0",
|
|
|
|
|
kubelet_version: "v1.28.4",
|
|
|
|
|
age: "30d",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "node-3",
|
|
|
|
|
status: "NotReady",
|
|
|
|
|
roles: "worker",
|
|
|
|
|
version: "v1.28.4",
|
|
|
|
|
internal_ip: "10.0.0.3",
|
|
|
|
|
os_image: "Ubuntu 22.04",
|
|
|
|
|
kernel_version: "5.15.0",
|
|
|
|
|
kubelet_version: "v1.28.4",
|
|
|
|
|
age: "1d",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const mockPods = [
|
|
|
|
|
{ name: "nginx-1", status: "Running", ready: "1/1", age: "2d", containers: ["nginx"] },
|
|
|
|
|
{ name: "nginx-2", status: "Running", ready: "1/1", age: "2d", containers: ["nginx"] },
|
|
|
|
|
{ name: "crash-loop", status: "CrashLoopBackOff", ready: "0/1", age: "1h", containers: ["app"] },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const mockDeployments = [
|
|
|
|
|
{ name: "nginx", namespace: "default", ready: "2/2", up_to_date: "2", available: "2", age: "2d", replicas: 2, labels: {} },
|
|
|
|
|
{ name: "api", namespace: "kube-system", ready: "1/1", up_to_date: "1", available: "1", age: "5d", replicas: 1, labels: {} },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const mockNamespaces = [
|
|
|
|
|
{ name: "default", status: "Active", age: "30d" },
|
|
|
|
|
{ name: "kube-system", status: "Active", age: "30d" },
|
|
|
|
|
{ name: "monitoring", status: "Active", age: "10d" },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
describe("ClusterOverview", () => {
|
|
|
|
|
beforeEach(() => {
|
|
|
|
|
vi.clearAllMocks();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("shows loading spinner initially", () => {
|
|
|
|
|
mockInvoke.mockImplementation(() => new Promise(() => {}));
|
|
|
|
|
render(<ClusterOverview clusterId="cluster-1" />);
|
|
|
|
|
expect(screen.getByTestId("overview-loading")).toBeInTheDocument();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("renders node count from listNodesCmd response", async () => {
|
|
|
|
|
mockInvoke.mockImplementation((cmd: string) => {
|
|
|
|
|
if (cmd === "list_nodes") return Promise.resolve(mockNodes);
|
|
|
|
|
if (cmd === "list_pods") return Promise.resolve(mockPods);
|
|
|
|
|
if (cmd === "list_deployments") return Promise.resolve(mockDeployments);
|
|
|
|
|
if (cmd === "list_namespaces") return Promise.resolve(mockNamespaces);
|
|
|
|
|
return Promise.resolve([]);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
render(<ClusterOverview clusterId="cluster-1" />);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("node-count")).toHaveTextContent("3");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("renders pod count from listPodsCmd response", async () => {
|
|
|
|
|
mockInvoke.mockImplementation((cmd: string) => {
|
|
|
|
|
if (cmd === "list_nodes") return Promise.resolve(mockNodes);
|
|
|
|
|
if (cmd === "list_pods") return Promise.resolve(mockPods);
|
|
|
|
|
if (cmd === "list_deployments") return Promise.resolve(mockDeployments);
|
|
|
|
|
if (cmd === "list_namespaces") return Promise.resolve(mockNamespaces);
|
|
|
|
|
return Promise.resolve([]);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
render(<ClusterOverview clusterId="cluster-1" />);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("pod-count")).toHaveTextContent("3");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("renders namespace count from listNamespacesCmd response", async () => {
|
|
|
|
|
mockInvoke.mockImplementation((cmd: string) => {
|
|
|
|
|
if (cmd === "list_nodes") return Promise.resolve(mockNodes);
|
|
|
|
|
if (cmd === "list_pods") return Promise.resolve(mockPods);
|
|
|
|
|
if (cmd === "list_deployments") return Promise.resolve(mockDeployments);
|
|
|
|
|
if (cmd === "list_namespaces") return Promise.resolve(mockNamespaces);
|
|
|
|
|
return Promise.resolve([]);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
render(<ClusterOverview clusterId="cluster-1" />);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("namespace-count")).toHaveTextContent("3");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("shows deployment count from listDeploymentsCmd response", async () => {
|
|
|
|
|
mockInvoke.mockImplementation((cmd: string) => {
|
|
|
|
|
if (cmd === "list_nodes") return Promise.resolve(mockNodes);
|
|
|
|
|
if (cmd === "list_pods") return Promise.resolve(mockPods);
|
|
|
|
|
if (cmd === "list_deployments") return Promise.resolve(mockDeployments);
|
|
|
|
|
if (cmd === "list_namespaces") return Promise.resolve(mockNamespaces);
|
|
|
|
|
return Promise.resolve([]);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
render(<ClusterOverview clusterId="cluster-1" />);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("deployment-count")).toHaveTextContent("2");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("shows error state when IPC fails", async () => {
|
|
|
|
|
mockInvoke.mockImplementation(() =>
|
|
|
|
|
Promise.reject(new Error("Connection refused"))
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
render(<ClusterOverview clusterId="cluster-1" />);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("overview-error")).toBeInTheDocument();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("shows Ready: X/Y node status", async () => {
|
|
|
|
|
mockInvoke.mockImplementation((cmd: string) => {
|
|
|
|
|
if (cmd === "list_nodes") return Promise.resolve(mockNodes);
|
|
|
|
|
if (cmd === "list_pods") return Promise.resolve(mockPods);
|
|
|
|
|
if (cmd === "list_deployments") return Promise.resolve(mockDeployments);
|
|
|
|
|
if (cmd === "list_namespaces") return Promise.resolve(mockNamespaces);
|
|
|
|
|
return Promise.resolve([]);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
render(<ClusterOverview clusterId="cluster-1" />);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("node-ready-status")).toHaveTextContent("Ready: 2/3");
|
|
|
|
|
});
|
|
|
|
|
});
|
2026-06-07 22:39:07 +00:00
|
|
|
|
|
|
|
|
it("displays clusterName prop in header instead of raw GUID", async () => {
|
|
|
|
|
mockInvoke.mockImplementation(() => Promise.resolve([]));
|
|
|
|
|
|
|
|
|
|
render(<ClusterOverview clusterId="019e9ff0-b6a4-78e1-a566-7a0c05e32577" clusterName="devops1-mgmt" />);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("cluster-name-header")).toHaveTextContent("devops1-mgmt");
|
|
|
|
|
expect(screen.queryByText("019e9ff0-b6a4-78e1-a566-7a0c05e32577")).not.toBeInTheDocument();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2026-06-07 23:58:16 +00:00
|
|
|
it("hides the subtitle when clusterName prop is not provided (never shows UUID)", async () => {
|
2026-06-07 22:39:07 +00:00
|
|
|
mockInvoke.mockImplementation(() => Promise.resolve([]));
|
|
|
|
|
|
2026-06-07 23:58:16 +00:00
|
|
|
render(<ClusterOverview clusterId="019e9ff0-b6a4-78e1-a566-7a0c05e32577" />);
|
2026-06-07 22:39:07 +00:00
|
|
|
|
|
|
|
|
await waitFor(() => {
|
2026-06-07 23:58:16 +00:00
|
|
|
// Heading still present
|
|
|
|
|
expect(screen.getByText("Cluster Overview")).toBeInTheDocument();
|
|
|
|
|
// UUID must NOT be rendered anywhere
|
|
|
|
|
expect(
|
|
|
|
|
screen.queryByText("019e9ff0-b6a4-78e1-a566-7a0c05e32577")
|
|
|
|
|
).not.toBeInTheDocument();
|
|
|
|
|
// Subtitle element should not exist when no name is passed
|
|
|
|
|
expect(screen.queryByTestId("cluster-name-header")).not.toBeInTheDocument();
|
2026-06-07 22:39:07 +00:00
|
|
|
});
|
|
|
|
|
});
|
feat(kubernetes): implement Lens Desktop v5 feature-parity UI
Complete overhaul of the Kubernetes management page from a basic config
panel into a full Lens-style IDE shell with 26 resource types, real-time
data, and a comprehensive test suite.
Layout & navigation:
- Rewrite KubernetesPage as a Lens v5-style shell: collapsible sidebar
(Workloads / Services & Networking / Config & Storage / Access Control /
Cluster), top hotbar with cluster+namespace selectors, Ctrl+K command
palette
- All 26 resource types now accessible via sidebar navigation (previously 5)
New resource types (Rust + TypeScript + React):
- StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges
- 4 new Tauri commands registered in generate_handler![]
Component implementations (replacing stubs with real IPC):
- Terminal: full xterm.js with multi-tab sessions and exec_pod IPC
- YamlEditor: Monaco editor with YAML syntax highlighting
- MetricsChart: recharts LineChart/BarChart
- ClusterOverview: live node/pod/deployment/namespace counts
- ClusterDetails: real kubeconfig + node data
- PodDetail, DeploymentDetail, ServiceDetail, ConfigMapDetail, SecretDetail:
all connected to real IPC data, zero hardcoded values
- CreateResourceModal, EditResourceModal: wired to createResourceCmd /
editResourceCmd
- RbacViewer: live data from 4 RBAC IPC commands
- RbacEditor: create roles/cluster-roles via YAML editor
- CommandPalette: 12 real navigation commands, keyboard nav
Dependencies added: xterm@5, xterm-addon-fit, xterm-addon-web-links,
@monaco-editor/react@4, recharts@2
Tooling:
- Replace eslint-plugin-react (incompatible with ESLint 10) with
@eslint-react/eslint-plugin; fix eslint.config.js for flat config
- Fix pre-existing hoisting lint errors in Security.tsx, PortForwardForm.tsx
- Fix eventBus.ts: replace all `any` generics with `unknown`
Tests: 251 passing across 35 test files (was 94/19)
- 16 new test files covering all new and fixed components (TDD)
- npx tsc --noEmit: 0 errors
- cargo clippy -- -D warnings: 0 warnings
- cargo fmt --check: passes
- eslint src/ --max-warnings 0: 0 issues
2026-06-07 21:41:28 +00:00
|
|
|
});
|