tftsr-devops_investigation/src/components/Kubernetes/ResourceQuotaList.tsx
Shaun Arman 3f4869af01
Some checks failed
PR Review Automation / review (pull_request) Has been cancelled
Test / frontend-typecheck (pull_request) Has been cancelled
Test / rust-clippy (pull_request) Has been cancelled
Test / frontend-tests (pull_request) Has been cancelled
Test / rust-fmt-check (pull_request) Has been cancelled
Test / rust-tests (pull_request) Has been cancelled
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 16:41:28 -05:00

51 lines
1.9 KiB
TypeScript

import React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui";
import type { ResourceQuotaInfo } from "@/lib/tauriCommands";
interface ResourceQuotaListProps {
resourcequotas: ResourceQuotaInfo[];
clusterId: string;
namespace: string;
}
export function ResourceQuotaList({ resourcequotas }: ResourceQuotaListProps) {
return (
<div className="overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Namespace</TableHead>
<TableHead>CPU Req</TableHead>
<TableHead>Mem Req</TableHead>
<TableHead>CPU Limit</TableHead>
<TableHead>Mem Limit</TableHead>
<TableHead>Age</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{resourcequotas.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="text-center text-muted-foreground">
No resource quotas found
</TableCell>
</TableRow>
) : (
resourcequotas.map((rq) => (
<TableRow key={`${rq.name}-${rq.namespace}`}>
<TableCell className="font-medium">{rq.name}</TableCell>
<TableCell className="text-sm text-muted-foreground">{rq.namespace}</TableCell>
<TableCell className="text-sm font-mono">{rq.request_cpu || "—"}</TableCell>
<TableCell className="text-sm font-mono">{rq.request_memory || "—"}</TableCell>
<TableCell className="text-sm font-mono">{rq.limit_cpu || "—"}</TableCell>
<TableCell className="text-sm font-mono">{rq.limit_memory || "—"}</TableCell>
<TableCell className="text-sm text-muted-foreground">{rq.age}</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
);
}