feat(kubernetes): implement Lens Desktop v5 feature-parity UI #78

sarman · 2026-06-07T21:42:14Z

sarman commented

2026-06-07 21:42:14 +00:00

Summary

Complete overhaul of the Kubernetes page from a basic config panel into a full Lens Desktop v5-style IDE shell
26 resource types now accessible via sidebar navigation (previously 5 were buried behind an activation requirement)
16 new test files, 251 total tests passing (up from 94)
ESLint now fully operational — replaced incompatible eslint-plugin-react@7 with @eslint-react/eslint-plugin for ESLint 10 compatibility
All pre-existing lint errors fixed (hoisting issues, any types)

What changed

Layout & navigation

KubernetesPage.tsx — complete rewrite as Lens-like shell: collapsible sidebar with 5 nav categories, top hotbar, namespace selector, cluster context switcher, Ctrl+K command palette

New resource types (Rust backend + TS wrappers + React list components)

StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges

Stub → real implementations

Terminal.tsx — xterm.js, multi-tab, exec_pod IPC
YamlEditor.tsx — Monaco editor, YAML syntax highlighting
MetricsChart.tsx — recharts LineChart/BarChart
ClusterOverview.tsx — live node/pod/deployment/namespace counts
ClusterDetails.tsx — real kubeconfig + node data
PodDetail, DeploymentDetail, ServiceDetail, ConfigMapDetail, SecretDetail — all real IPC, zero hardcoded data
CreateResourceModal, EditResourceModal — wired to createResourceCmd/editResourceCmd
RbacViewer — live RBAC data from 4 IPC commands
RbacEditor — create roles/clusterroles via YAML
CommandPalette — 12 real navigation commands

Dependencies added: xterm@5, xterm-addon-fit, xterm-addon-web-links, @monaco-editor/react@4, recharts@2, @eslint-react/eslint-plugin

Test plan

Upload a kubeconfig, activate it; sidebar namespace dropdown auto-populates
Navigate each sidebar section; verify list renders from live cluster
Pods → click pod → Logs tab → verify real container log output
Deployments → Actions tab → scale to N replicas
Exec into a pod via Terminal component; verify xterm.js renders output
Create a ConfigMap via YAML editor (Create Resource modal)
Access Control → Roles; verify live RBAC data renders
Ctrl+K → type "pod" → Enter; verify navigates to Pods section
npm run test:run — 251/251 pass
npx tsc --noEmit — 0 errors
npx eslint src/ --max-warnings 0 — 0 issues
cargo clippy --manifest-path src-tauri/Cargo.toml -- -D warnings — 0 warnings

## Summary - **Complete overhaul** of the Kubernetes page from a basic config panel into a full Lens Desktop v5-style IDE shell - **26 resource types** now accessible via sidebar navigation (previously 5 were buried behind an activation requirement) - **16 new test files**, 251 total tests passing (up from 94) - ESLint now fully operational — replaced incompatible `eslint-plugin-react@7` with `@eslint-react/eslint-plugin` for ESLint 10 compatibility - All pre-existing lint errors fixed (hoisting issues, `any` types) ### What changed **Layout & navigation** - `KubernetesPage.tsx` — complete rewrite as Lens-like shell: collapsible sidebar with 5 nav categories, top hotbar, namespace selector, cluster context switcher, `Ctrl+K` command palette **New resource types** (Rust backend + TS wrappers + React list components) - StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges **Stub → real implementations** - `Terminal.tsx` — xterm.js, multi-tab, exec_pod IPC - `YamlEditor.tsx` — Monaco editor, YAML syntax highlighting - `MetricsChart.tsx` — recharts LineChart/BarChart - `ClusterOverview.tsx` — live node/pod/deployment/namespace counts - `ClusterDetails.tsx` — real kubeconfig + node data - `PodDetail`, `DeploymentDetail`, `ServiceDetail`, `ConfigMapDetail`, `SecretDetail` — all real IPC, zero hardcoded data - `CreateResourceModal`, `EditResourceModal` — wired to createResourceCmd/editResourceCmd - `RbacViewer` — live RBAC data from 4 IPC commands - `RbacEditor` — create roles/clusterroles via YAML - `CommandPalette` — 12 real navigation commands **Dependencies added**: xterm@5, xterm-addon-fit, xterm-addon-web-links, @monaco-editor/react@4, recharts@2, @eslint-react/eslint-plugin ## Test plan - [ ] Upload a kubeconfig, activate it; sidebar namespace dropdown auto-populates - [ ] Navigate each sidebar section; verify list renders from live cluster - [ ] Pods → click pod → Logs tab → verify real container log output - [ ] Deployments → Actions tab → scale to N replicas - [ ] Exec into a pod via Terminal component; verify xterm.js renders output - [ ] Create a ConfigMap via YAML editor (Create Resource modal) - [ ] Access Control → Roles; verify live RBAC data renders - [ ] `Ctrl+K` → type "pod" → Enter; verify navigates to Pods section - [ ] `npm run test:run` — 251/251 pass - [ ] `npx tsc --noEmit` — 0 errors - [ ] `npx eslint src/ --max-warnings 0` — 0 issues - [ ] `cargo clippy --manifest-path src-tauri/Cargo.toml -- -D warnings` — 0 warnings

sarman added 1 commit 2026-06-07 21:42:15 +00:00

feat(kubernetes): implement Lens Desktop v5 feature-parity UI

PR Review Automation / review (pull_request) Has been cancelled

Details

Test / frontend-typecheck (pull_request) Has been cancelled

Details

Test / rust-clippy (pull_request) Has been cancelled

Details

Test / frontend-tests (pull_request) Has been cancelled

Details

Test / rust-fmt-check (pull_request) Has been cancelled

Details

Test / rust-tests (pull_request) Has been cancelled

Details

3f4869af01

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

sarman added 1 commit 2026-06-07 21:42:52 +00:00

ci(pr-review): switch LLM model to qwen36-35b-a3b-nvfp4

Test / rust-tests (pull_request) Successful in 14m12s

Details

PR Review Automation / review (pull_request) Has been cancelled

Details

Test / frontend-typecheck (pull_request) Successful in 1m41s

Details

Test / frontend-tests (pull_request) Successful in 1m40s

Details

Test / rust-fmt-check (pull_request) Successful in 11m20s

Details