sarman/tftsr-devops_investigation
1
1
Fork 0
Code Issues 4 Pull Requests Actions 34 Packages Projects 3 Releases 6 Wiki Activity
6d7127ee9c
tftsr-devops_investigation/docs/architecture/adrs/ADR-010-kubernetes-management-ui.md
Shaun Arman 664aeaafad
Some checks failed
Test / frontend-tests (pull_request) Successful in 1m29s
Details
Test / frontend-typecheck (pull_request) Successful in 1m38s
Details
PR Review Automation / review (pull_request) Successful in 3m58s
Details
Test / rust-clippy (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
docs: update documentation for Kubernetes Management UI 
- Add ADR-010: Kubernetes Management UI with Lens Desktop v5.x feature parity
- Add Kubernetes-Management.md wiki page
- Update CHANGELOG.md with Phase 7 features
- Update README.md with kubernetesStore and components
- Update docs/architecture/README.md with ADR-010
- Fix build issues: downgrade tailwindcss v4 to v3, add vite-env.d.ts, fix tsconfig
- All 114 frontend tests passing, 331 Rust tests passing, build successful
2026-06-07 11:09:22 -05:00

3.8 KiB
Raw Blame History

ADR-010: Kubernetes Management UI

Status

Accepted

Context

The application needed a complete Kubernetes Management UI with feature parity to Lens Desktop v5.x. This required implementing:

  1. Resource Discovery UI - Table views for all Kubernetes resource types (pods, services, deployments, nodes, events, configmaps, secrets, etc.)
  2. Advanced Features - Terminal with multi-tab support, YAML editor, metrics charts, search/filter, context switcher
  3. Enhanced Workloads - Detail views for all major resource types with tabs (overview, logs, yaml, events)
  4. Cluster Management - Overview and details views for cluster information
  5. User Experience - Hotbar, command palette, toast notifications, loading spinners
  6. Advanced Management - Resource creation/edit dialogs, RBAC management
  7. Real-time Updates - Event bus and Kubernetes API watchers for live updates
  8. RBAC Management - Viewer and editor for roles, clusterroles, bindings

Decision

We implemented a complete Kubernetes Management UI following the existing architecture:

  • Frontend: React + TypeScript + Zustand (state management)
  • Backend: Tauri 2 + Rust with existing kube commands
  • UI Components: Custom shadcn-style components with Tailwind CSS
  • State Management: Zustand kubernetesStore for clusters, namespaces, resources, terminals, search, bulk selection

Key Design Decisions

  1. Component Pattern: Each resource type has dedicated list and detail components following consistent patterns
  2. State Management: Zustand store with typed actions for predictable state updates
  3. Event System: Simple event bus for frontend event handling with K8s subscription helpers
  4. Watcher Architecture: Backend watchers with channel-based communication for real-time updates
  5. Security: PII detection before external sends, hash-chained audit logging

Implementation Details

  • 26 Resource Components: PodList, ServiceList, DeploymentList, StatefulSetList, DaemonSetList, NodeList, EventList, ConfigMapList, SecretList, ReplicaSetList, JobList, CronJobList, IngressList, PVCList, PVList, ServiceAccountList, RoleList, ClusterRoleList, RoleBindingList, ClusterRoleBindingList, HPAList, plus detail views
  • Advanced Components: Terminal, YamlEditor, MetricsChart, SearchBar, ContextSwitcher, ApplicationView
  • UX Components: Hotbar, CommandPalette, Toast, LoadingSpinner
  • Management Components: CreateResourceModal, EditResourceModal, RbacViewer, RbacEditor
  • Backend: Event bus, watcher module with subscribe/unsubscribe commands

Dependencies Added

  • Frontend: xterm, xterm-addon-fit, xterm-addon-web-links (terminal), @monaco-editor/react (YAML editor), react-chartjs-2, chart.js (metrics)
  • Backend: k8s-openapi with watch feature (for real watchers)

Consequences

Positive

  • Complete Lens-like Kubernetes Management UI
  • Real-time updates via event bus and watchers
  • RBAC management with viewer and editor
  • Extensible architecture for future features
  • Consistent UI patterns across all resource types

Negative

  • Large dependency footprint (xterm, monaco-editor, chart.js)
  • Watcher implementation requires k8s-openapi with watch feature (future work)
  • Build size increased (~584 KB JS bundle)

Ongoing

  • Metrics charts need actual data from backend
  • Terminal needs xterm dependencies for full functionality
  • YAML editor needs @monaco-editor/react for full functionality
  • Watchers need k8s-openapi watch feature for real-time updates

References