refactor(quality): Q28 前端巨型组件拆分 — KubernetesClusterDetail 547L→130L (-76%), 提取 cluster-detail/ 8 个文件 (types(computeClusterMetrics/buildTrendData 纯函数) + OverviewTab + NodesTab + PodsTab + DeploymentsTab + ServicesTab + IngressesTab + EventsTab), useMemo 聚合计算逻辑提取为模块级纯函数, demo 事件数据提取为模块级常量, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓ (18.18s), go build=0, 17/17 测试通过
This commit is contained in:
1 parent
470832342e
commit
4c44fdde8b
11 files changed
+588
-444
No files matched your search
+41
@@ -499,6 +499,47 @@ services/api.ts (1324L)
|
||||
| Q25 | 前端巨型组件拆分(PipelineCreateDialog 559L→498L,提取 pipeline-create/types(PRESETS/DEFAULT_TARGET) + AdvancedSettingsPanel(172L 受控展开面板)) | P0 | **done** |
|
||||
| Q26 | 前端巨型组件拆分(PodLogsViewer 553L→331L,提取 pod-logs-viewer/types(highlightKeyword 纯函数) + LogsHeader + ControlBar + LogContentArea + BottomStatusBar) | P0 | **done** |
|
||||
| Q27 | 前端巨型组件拆分(HostMonitor 547L→224L (-59%),提取 host-monitor/tabs/ 8 个文件 (BasicTab + DiskTab + NetworkTab + PortMonitorTab + ProcessTable + FDUsageCard + ContextSwitchCard + ProcessTab),TABS 常量数组提取为模块级,PCT_REF_LINES 常量提升到 types.ts,端口/进程数组类型 JsonData→JsonData[] 类型安全升级) | P0 | **done** |
|
||||
| Q28 | 前端巨型组件拆分(KubernetesClusterDetail 547L→130L (-76%),提取 cluster-detail/ 8 个文件 (types(computeClusterMetrics/buildTrendData 纯函数) + OverviewTab + NodesTab + PodsTab + DeploymentsTab + ServicesTab + IngressesTab + EventsTab)) | P0 | **done** |
|
||||
|
||||
---
|
||||
|
||||
## Q28: 前端巨型组件拆分 — KubernetesClusterDetail [done]
|
||||
|
||||
**问题**: `KubernetesClusterDetail.tsx`(547 行)是 Q27 拆分后项目最大的业务组件之一,包含集群详情页面的全部逻辑:5 个资源状态 useState、集群 metrics 聚合计算(computeClusterMetrics ~23 行)、趋势数据构造(buildTrendData ~13 行)、Promise.all 加载 5 类资源、以及 7 个 Tab 的全部内联 JSX(概览 Tab 含 Recharts AreaChart 资源趋势图 + 资源分布 4 卡片 ~100 行 / 节点表格 ~62 行 / Pod 表格 ~53 行 / Deployment 表格 ~42 行 / Service 表格 ~51 行 / Ingress 表格 ~47 行 / 事件 mock 列表 ~30 行)。单文件过大导致维护困难、代码导航低效。
|
||||
|
||||
**已完成 (2026-07-09)**:
|
||||
|
||||
将类型/纯函数和 7 个 Tab 内容区提取为 `cluster-detail/` 子目录下的独立文件:
|
||||
|
||||
| 新文件 | 行数 | 职责 |
|
||||
|--------|------|------|
|
||||
| `types.ts` | 60 | ClusterMetrics/TrendPoint 接口 + `computeClusterMetrics(nodes)` 纯函数(从节点 metrics 聚合集群级 CPU/内存使用率)+ `buildTrendData(metrics, t)` 纯函数(构造 5 点趋势数据避免单点光点效果) |
|
||||
| `OverviewTab.tsx` | 129 | 概览 Tab(Recharts AreaChart CPU/内存双线趋势图 + 刷新按钮 + 资源分布 4 卡片网格 Pod/Service/Deployment/Node),受控展示组件接收 cluster + trendData + metrics + onRefresh |
|
||||
| `NodesTab.tsx` | 69 | 节点表格(名称/角色徽章/状态徽章/CPU/内存/Pod 数/OS 7 列 + 空状态),受控展示组件接收 nodes |
|
||||
| `PodsTab.tsx` | 60 | Pod 表格(名称/命名空间/状态徽章/重启次数/CPU/内存/节点 7 列 + 空状态),受控展示组件接收 pods |
|
||||
| `DeploymentsTab.tsx` | 49 | Deployment 表格(名称/命名空间/副本数/可用副本/镜像/创建时间 6 列 + 空状态 + 可用率颜色),受控展示组件接收 deployments |
|
||||
| `ServicesTab.tsx` | 58 | Service 表格(名称/命名空间/类型徽章/ClusterIP/端口/选择器 6 列 + 空状态),受控展示组件接收 services |
|
||||
| `IngressesTab.tsx` | 54 | Ingress 表格(名称/命名空间/Hosts/Backend/TLS 徽章 5 列 + 空状态),受控展示组件接收 ingresses |
|
||||
| `EventsTab.tsx` | 41 | 事件列表(5 条 demo 事件 + Normal/Warning 类型徽章 + 时间),纯展示组件无 props(事件数据提取为模块级 DEMO_EVENTS 常量) |
|
||||
|
||||
主文件 `KubernetesClusterDetail.tsx` 从 **547 行降至 130 行**(-76%),仅保留:5 个资源 useState、useMemo 调用纯函数(computeClusterMetrics + buildTrendData 一行替代 ~36 行计算逻辑)、loadClusterDetail 数据加载(Promise.all 5 资源 + toArray 归一化)、useEffect 触发、Card 外壳 + CardHeader(集群名/版本/节点数/创建时间 + 关闭按钮)、TabsList(7 TabsTrigger 含计数徽章)、以及 7 个子组件编排(OverviewTab + NodesTab + PodsTab + DeploymentsTab + ServicesTab + IngressesTab + EventsTab)。
|
||||
|
||||
**关键改进**:
|
||||
- **纯函数提取**: 原 ~23 行 clusterMetrics 聚合计算逻辑(遍历节点、解析 cpu_usage_m/mem_usage_mi、计算百分比、加权平均)和 ~13 行 trendData 构造逻辑,分别提取为 `computeClusterMetrics(nodes)` 和 `buildTrendData(metrics, t)` 两个模块级纯函数。主组件的 useMemo 从 ~36 行降至 2 行调用。
|
||||
- **Demo 事件数据提取**: 原 5 条内联事件对象数组(每次 render 重建 + 内联时间插值计算)提取为模块级 `DEMO_EVENTS` 常量 + `MIN_AGOS` 常量,消除重复创建。
|
||||
|
||||
**验收标准**:
|
||||
- [x] KubernetesClusterDetail.tsx 从 547 行降至 **130 行**(-76%)
|
||||
- [x] 8 个提取的文件全部 < 130 行(最大 OverviewTab 129 行,最小 EventsTab 41 行)
|
||||
- [x] `tsc -b` 零错误
|
||||
- [x] `npm run build` 零错误(✓ built in 18.18s)
|
||||
- [x] ESLint errors 保持 **0**(KubernetesClusterDetail + cluster-detail/ 目录零 errors/warnings)
|
||||
- [x] ESLint warnings 保持 **65**(无新增)
|
||||
- [x] 全局 ESLint any 保持 **0**
|
||||
- [x] `go build` 零错误
|
||||
- [x] 17/17 集成回归测试通过(零回归)
|
||||
- [x] Docker 部署 healthy,前端页面正常加载(HTTP 200)
|
||||
- [x] 集群详情页功能不变(7 个 Tab:概览趋势图/节点/Pod/Deployment/Service/Ingress/事件全部正常)
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in new issue
Block a user