refactor(quality): Q31 前端巨型组件拆分 — PromDsFormDialog 528L→294L (-44%), 提取 prometheus-ds/ 6 个文件 (CollapsibleSection 42L 通用折叠包装器 DRY 3 个重复折叠模式 + AuthSection 107L 认证折叠 + HeadersSection 64L 自定义Headers + AlertingSection 58L 告警折叠 + MiscSection 47L 杂项折叠 + TestResultBanner 32L 测试结果横幅), Auth/Alerting/Misc 三个折叠区块统一使用 CollapsibleSection 消除 ~30 行重复折叠 JSX, updateForm 泛型化 <K extends keyof> 类型安全提升, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓ (17.65s), go build=0, 17/17 测试通过
This commit is contained in:
attacker committed
1 parent
45f7342d1e
commit
195b6945b4
9 files changed
+405
-250
No files matched your search
+41
-1
@@ -501,7 +501,47 @@ services/api.ts (1324L)
|
||||
| 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** |
|
||||
| Q29 | 前端巨型组件拆分（AlertCenter 542L→312L (-42%)，提取 4 个受控组件 (AlertsToolbar 89L 筛选工具栏 + AlertsTab 149L 告警列表表格+分页 + ContactsTab 87L 联系人卡片网格 + ContactGroupsTab 88L 联系组卡片网格)，客户端搜索过滤逻辑移入 AlertsTab，删除确认逻辑下沉到子组件） | P0 | **done** |
|
||||
| Q30 | 前端巨型组件拆分（CloudBilling 534L→295L (-45%)，提取 cloud-billing/ 3 个文件 (OverviewTab 110L 概览统计:同步信息+成本告警横幅+趋势图+厂商分布 + RecordsTab 146L 成本记录表格+筛选工具栏 + AlertRulesTab 91L 预警规则卡片网格)） | P0 | **done** |
|
||||
| Q30 | 前端巨型组件拆分（CloudBilling 534L→295L (-45%)，提取 cloud-billing/ 3 个文件 (OverviewTab 110L 概览统计:同步信息+成本告警横幅+趋势图+厂商分布 + RecordsTab 146L 成本记录表格+RecordsFilterToolbar筛选工具栏 + AlertRulesTab 91L 预警规则卡片网格)） | P0 | **done** |
|
||||
| Q31 | 前端巨型组件拆分（PromDsFormDialog 528L→294L (-44%)，提取 6 个文件 (CollapsibleSection 42L 通用折叠包装器 DRY 3 个重复折叠模式 + AuthSection 107L 认证折叠 + HeadersSection 64L 自定义Headers + AlertingSection 58L 告警折叠 + MiscSection 47L 杂项折叠 + TestResultBanner 32L 测试结果横幅)，3 个折叠区块全部使用共享 CollapsibleSection 消除重复 JSX)） | P0 | **done** |
|
||||
|
||||
---
|
||||
|
||||
## Q31: 前端巨型组件拆分 — PromDsFormDialog [done]
|
||||
|
||||
**问题**: `PromDsFormDialog.tsx`（528 行）是 Q30 拆分后项目最大的监控业务组件之一，包含 Prometheus 数据源添加/编辑弹窗的全部逻辑：表单状态管理（8 个 useState + form 对象）、初始化 effect、保存/测试连接业务逻辑、以及 8 个内联 JSX 区块（Name&Default ~23 行 / HTTP 设置 ~29 行 / Auth 折叠 ~97 行 / Custom HTTP Headers ~38 行 / Alerting 折叠 ~40 行 / 采集与查询 ~32 行 / HTTP Method ~12 行 / Misc 折叠 ~35 行 / 测试结果横幅 ~18 行）。其中 3 个折叠区块（Auth/Alerting/Misc）各自重复实现了相同的折叠 header+展开/折叠 UI 模式（按钮 + ChevronUp/Down 图标 + children 容器）。单文件过大导致维护困难。
|
||||
|
||||
**已完成 (2026-07-09)**:
|
||||
|
||||
将 5 个内容区块和 1 个共享折叠包装器提取为 `prometheus-ds/` 目录下的独立文件（该目录此前已有 types.ts + helpers.ts）:
|
||||
|
||||
| 新文件 | 行数 | 职责 |
|
||||
|--------|------|------|
|
||||
| `CollapsibleSection.tsx` | 42 | 通用可折叠区块包装器（按钮 header + icon + title + ChevronUp/Down 切换 + children 容器），DRY 消除 Auth/Alerting/Misc 三处重复的折叠 UI 模式 |
|
||||
| `AuthSection.tsx` | 107 | Auth 认证折叠区块（Basic auth 开关+用户名密码 / With Credentials / TLS Client Auth+CA Cert 文本域 / Skip TLS Verify / Forward OAuth Identity 提示），受控组件接收 form + updateForm + open + onToggle |
|
||||
| `HeadersSection.tsx` | 64 | Custom HTTP Headers 区块（标题栏+Add header 按钮 + header/value 键值对 Input 行增删改 + 空状态提示），受控组件接收 headers + onAdd/onRemove/onUpdate |
|
||||
| `AlertingSection.tsx` | 58 | Alerting 告警折叠区块（Manage alerts 开关 + Alertmanager 数据源 Select 下拉，过滤自身），受控组件接收 form + updateForm + sources + editingId + open + onToggle |
|
||||
| `MiscSection.tsx` | 47 | Misc 杂项折叠区块（Disable metrics lookup 开关 + Custom query parameters Input），受控组件接收 form + updateForm + open + onToggle |
|
||||
| `TestResultBanner.tsx` | 32 | 连接测试结果横幅（成功绿色 CheckCircle / 失败红色 XCircle + target_count 徽章），纯展示组件接收 result（null 时不渲染） |
|
||||
|
||||
主文件 `PromDsFormDialog.tsx` 从 **528 行降至 294 行**（-44%），仅保留：8 个 useState 声明（form/headers/showAuth/showTLS/showAlerting/showMisc/testing/testResult）、初始化 useEffect、updateForm/addHeader/removeHeader/updateHeader 回调、handleSave/handleTestConnection 业务逻辑、Dialog 外壳（header + Name&Default + HTTP 设置 + 5 个子组件编排 + 采集与查询 + HTTP Method + Footer 按钮）。
|
||||
|
||||
**关键改进**:
|
||||
- **DRY 折叠模式**: 原 Auth/Alerting/Misc 三个折叠区块各自重复了相同的折叠 header（button + icon + title + ChevronUp/Down + 展开 children 容器）共约 30 行重复 JSX。提取为共享 `CollapsibleSection` 组件后，三个 Section 组件只需传入 icon/title/open/onToggle + children 即可，消除全部重复。
|
||||
- **受控组件架构**: 5 个子组件全部为受控展示组件（接收 form/headers 状态 + updateForm/onToggle 回调 props），无独立状态。所有状态管理保留在主组件，拆分为纯机械操作（移动 JSX + 添加 props 透传），零逻辑变更。
|
||||
- **updateForm 泛型化**: 原 `updateForm(field, value)` 函数参数类型为 `keyof PromDsForm` + `PromDsForm[keyof PromDsForm]`（宽松联合类型）。提取到子组件时改为 `<K extends keyof PromDsForm>(field: K, value: PromDsForm[K])` 泛型约束，使子组件调用 `updateForm('basic_auth', v)` 时 v 自动推断为 boolean，类型安全更好。
|
||||
|
||||
**验收标准**:
|
||||
- [x] PromDsFormDialog.tsx 从 528 行降至 **294 行**（-44%）
|
||||
- [x] 6 个提取的文件全部 < 108 行（最大 AuthSection 107 行，最小 TestResultBanner 32 行）
|
||||
- [x] `tsc -b` 零错误
|
||||
- [x] `npm run build` 零错误（✓ built in 17.65s）
|
||||
- [x] ESLint errors 保持 **0**（prometheus-ds/ 目录零 errors/warnings）
|
||||
- [x] ESLint warnings 保持 **65**（无新增）
|
||||
- [x] 全局 ESLint any 保持 **0**
|
||||
- [x] `go build` 零错误
|
||||
- [x] 17/17 集成回归测试通过（零回归）
|
||||
- [x] Docker 部署 healthy，前端页面正常服务
|
||||
- [x] Prometheus 数据源弹窗功能不变（Name/Default/HTTP/Auth折叠/Custom Headers/Alerting折叠/采集与查询/HTTP Method/Misc折叠/测试连接/保存全部正常）
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in new issue
Block a user