tftsr-devops_investigation/TICKET-kubernetes-lens-ui.md

# Ticket: Kubernetes Management UI — Lens Desktop v5 Feature Parity

**Branch**: `feature/kubernetes-management-v2`
**PR**: See PR created against `master`
**Date**: 2026-06-07

---

## Description

The Kubernetes page previously showed only a cluster configuration list and port forwarding panel — a fraction of the intended feature set. This ticket implements full Lens Desktop v5-equivalent Kubernetes management UI directly inside the application.

The backend already had 44 Tauri commands and 40+ frontend components built but not properly orchestrated. The core problem was `KubernetesPage.tsx` acting as a simple config page rather than as a Lens-style IDE shell. This work:

1. Rewrites the page as a proper Lens-like shell (collapsible sidebar nav + hotbar + main content panel)
2. Surfaces all 26 resource types through organized navigation
3. Replaces all stub components with real implementations backed by IPC
4. Adds 4 missing resource types (StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges) with Rust backend + frontend
5. Installs and integrates missing libraries (xterm.js, Monaco editor, recharts)
6. Fixes the pre-existing ESLint 10 incompatibility (`eslint-plugin-react` → `@eslint-react/eslint-plugin`)
7. Achieves 251 passing tests (up from 94) with full TDD methodology

---

## Acceptance Criteria

- [x] Kubernetes page renders a Lens-style layout: collapsible sidebar with 5 navigation categories, top hotbar, namespace selector, cluster context switcher
- [x] All 26 resource types are accessible via sidebar navigation (previously only 5)
- [x] `Ctrl+K` opens Command Palette with navigation commands
- [x] ClusterOverview shows real-time node/pod/deployment/namespace counts from the cluster
- [x] Terminal component uses xterm.js with real `exec_pod` IPC integration and multi-tab support
- [x] YAML editor uses Monaco with syntax highlighting and apply/cancel functionality
- [x] Create/Edit resource modals call `createResourceCmd`/`editResourceCmd` IPC
- [x] RBAC Viewer loads live data; RBAC Editor creates roles via `createResourceCmd`
- [x] Detail panels (Pod, Deployment, Service, ConfigMap, Secret) show real data from IPC — zero hardcoded values
- [x] MetricsChart uses recharts with proper data transformation
- [x] StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges: Rust commands + TypeScript wrappers + list components
- [x] ESLint passes with zero errors/warnings across entire `src/` directory
- [x] `npx tsc --noEmit` passes with zero errors
- [x] `cargo clippy -- -D warnings` passes with zero warnings
- [x] `cargo fmt --check` passes
- [x] All 251 tests pass

---

## Work Implemented

### New/Rewritten Frontend Files
| File | Change |
|------|--------|
| `src/pages/Kubernetes/KubernetesPage.tsx` | Full rewrite: Lens-like sidebar layout, hotbar, namespace selector, command palette, all 26 resource types |
| `src/components/Kubernetes/Terminal.tsx` | Rewrite: real xterm.js, multi-tab, exec_pod IPC |
| `src/components/Kubernetes/YamlEditor.tsx` | Rewrite: Monaco editor with apply/cancel |
| `src/components/Kubernetes/MetricsChart.tsx` | Rewrite: recharts LineChart/BarChart |
| `src/components/Kubernetes/ClusterOverview.tsx` | Rewrite: real IPC data (nodes, pods, deployments, namespaces) |
| `src/components/Kubernetes/ClusterDetails.tsx` | Rewrite: real kubeconfig + node data |
| `src/components/Kubernetes/PodDetail.tsx` | Rewrite: real logs, real pod metadata, real containers |
| `src/components/Kubernetes/DeploymentDetail.tsx` | Rewrite: real replicas, scale/restart/rollback actions |
| `src/components/Kubernetes/ServiceDetail.tsx` | Rewrite: real service data, port table |
| `src/components/Kubernetes/ConfigMapDetail.tsx` | Rewrite: real configmap data |
| `src/components/Kubernetes/SecretDetail.tsx` | Rewrite: real secret key listing |
| `src/components/Kubernetes/CreateResourceModal.tsx` | Wired: calls `createResourceCmd` |
| `src/components/Kubernetes/EditResourceModal.tsx` | Wired: calls `editResourceCmd` |
| `src/components/Kubernetes/CommandPalette.tsx` | Wired: 12 real navigation commands |
| `src/components/Kubernetes/RbacViewer.tsx` | Rewrite: live RBAC data from 4 IPC commands |
| `src/components/Kubernetes/RbacEditor.tsx` | Rewrite: real create via `createResourceCmd` |
| `src/components/Kubernetes/StorageClassList.tsx` | New component |
| `src/components/Kubernetes/NetworkPolicyList.tsx` | New component |
| `src/components/Kubernetes/ResourceQuotaList.tsx` | New component |
| `src/components/Kubernetes/LimitRangeList.tsx` | New component |
| `src/components/Kubernetes/index.tsx` | Exports for 4 new components |
| `src/lib/eventBus.ts` | Fixed: `any` → `unknown` types |
| `src/pages/Settings/Security.tsx` | Fixed: function hoisting lint issue |

### New Backend (Rust)
| File | Change |
|------|--------|
| `src-tauri/src/commands/kube.rs` | +4 structs, +4 commands: `list_storageclasses`, `list_networkpolicies`, `list_resourcequotas`, `list_limitranges` |
| `src-tauri/src/lib.rs` | +4 entries in `generate_handler![]` |

### TypeScript IPC
| File | Change |
|------|--------|
| `src/lib/tauriCommands.ts` | +4 interfaces, +4 command wrappers for new resource types |

### Tooling
| File | Change |
|------|--------|
| `eslint.config.js` | Replaced incompatible `eslint-plugin-react` with `@eslint-react/eslint-plugin` (ESLint 10 compatible) |
| `package.json` / `package-lock.json` | Added: `xterm`, `xterm-addon-fit`, `xterm-addon-web-links`, `@monaco-editor/react`, `recharts`, `@eslint-react/eslint-plugin` |

### Tests (35 test files, 251 tests — up from 19 files, 94 tests)
New test files:
- `tests/unit/KubernetesPage.test.tsx` — 22 tests
- `tests/unit/Terminal.test.tsx` — 15 tests
- `tests/unit/YamlEditor.test.tsx` — 8 tests
- `tests/unit/CreateResourceModal.test.tsx` — 6 tests
- `tests/unit/EditResourceModal.test.tsx` — 4 tests
- `tests/unit/MetricsChart.test.tsx` — 7 tests
- `tests/unit/ClusterOverview.test.tsx` — 6 tests
- `tests/unit/ClusterDetails.test.tsx` — 5 tests
- `tests/unit/PodDetail.test.tsx` — 7 tests
- `tests/unit/DeploymentDetail.test.tsx` — 6 tests
- `tests/unit/ConfigMapDetail.test.tsx` — 4 tests
- `tests/unit/SecretDetail.test.tsx` — 4 tests
- `tests/unit/RbacViewer.test.tsx` — 9 tests
- `tests/unit/CommandPalette.test.tsx` — 12 tests
- `tests/unit/NewResourceTypes.test.tsx` — 21 tests

### Wiki
- `docs/wiki/Kubernetes-Management.md` — Full rewrite covering all features, layout, backend architecture, dependencies, known limitations

---

## Testing Needed

- [ ] **Manual: Cluster load** — Upload a kubeconfig, activate it, verify sidebar auto-populates namespace dropdown
- [ ] **Manual: Resource browsing** — Navigate to each sidebar section, verify list renders from live cluster
- [ ] **Manual: Pod logs** — Click a pod → Logs tab → verify container dropdown and real log output
- [ ] **Manual: Deployment scale** — Navigate to Deployments → click deployment → Actions tab → scale to N replicas
- [ ] **Manual: Deployment rollback** — Rollback a deployment, verify `kubectl rollout undo` executes
- [ ] **Manual: Terminal** — Exec into a pod, run `ls`, verify output appears in xterm.js
- [ ] **Manual: YAML create** — Create a ConfigMap via YAML editor, verify it appears in the list
- [ ] **Manual: RBAC** — Navigate to Access Control → Roles, verify live data from cluster
- [ ] **Manual: Port forward** — Navigate to Cluster → Port Forwarding, start a forward, verify tunnel is active
- [ ] **Manual: Command Palette** — Press Ctrl+K, type "pod", press Enter, verify navigation to Pods section
- [ ] **Manual: Node drain** — Navigate to Nodes, drain a non-critical node, verify cordon+eviction
- [ ] **Manual: StorageClasses** — Navigate to Config → Storage Classes, verify provisioner column populated
- [ ] **Automated**: `npm run test:run` — 251/251 must pass
- [ ] **Automated**: `npx tsc --noEmit` — zero errors
- [ ] **Automated**: `npx eslint src/ --max-warnings 0` — zero issues
- [ ] **Automated**: `cargo clippy --manifest-path src-tauri/Cargo.toml -- -D warnings` — zero warnings