docs: update dev-log - AIAlertAnalyzer 拆分(helper+子组件模式)

This commit is contained in:
attacker committed 2026-06-18 00:12:53 +08:00
1 parent da5f9a3a07
commit 2e174fe7eb
1 file changed
+32
+32
View File
@@ -1543,3 +1543,35 @@ cd ~/devops/aiops
- TraceManager.tsx(620)/GrafanaDashboard.tsx(616) 属优雅降级组件(无后端),拆分价值低于真实业务组件
- 可考虑后端同步清理 log.go handler(已移除菜单,4个API变死代码),但需确认无其他前端/Agent 调用
## 2026-06-18 自动推进(cron)— AIAlertAnalyzer 拆分(helper+子组件模式)
- **任务**: 拆分 `AIAlertAnalyzer.tsx`(541行→190行),提取 `analyzerHelpers.ts` 纯逻辑 + `AIAnalysisResult` 右侧分析面板子组件 + `AutoFixDialog` 自动修复脚本弹窗子组件
- **背景**: dev-log 上次建议优先拆 AIAlertAnalyzer.tsx(541) — AIOps 真实业务组件(使用真实 alertApi.getAlerts API + 后端告警事件 → AlertItem 映射 + 动态 AI 分析生成)。是剩余接近上限的真实业务组件中拆分价值最高的(TopologyView 576 SVG 拖拽风险高,TraceManager/GrafanaDashboard 属优雅降级无后端组件价值低)。原文件含 4 大块:① generateAIAnalysis() 115 行纯逻辑(CPU/Mem/Disk/Net/Service/Default 6 类指标分支)② mapAlertEvent() 35 行后端事件映射 ③ 主组件 280 行 JSX(左侧告警列表 + 右侧 AI 分析卡片 + AutoFix 弹窗)④ 类型/工具函数混杂
- **拆分方案**:
- `frontend/src/components/aiops/analyzerHelpers.ts` — **新建**(195行):纯逻辑辅助文件(无 JSX),提取 `AlertItem`/`AIAnalysis` 类型 + `generateAIAnalysis(alert)` 动态分析生成(6 类指标分支)+ `mapAlertEvent(event)` 后端 snake_case → 前端 AlertItem 映射(含表达式提取指标/阈值、按分钟计算 duration)+ `getSeverityColor(severity)` 严重等级配色。所有中文注释保留,署名 `// Logan.Li`
- `frontend/src/components/aiops/AIAnalysisResult.tsx` — **新建**(133行):提取右侧 AI 分析结果卡片。Props: `{ selectedAlert, isAnalyzing, analysis, onAutoFix }`。渲染 4 种状态:未选告警(空状态 Brain 图标) / 分析中(Loader2 spinner) / 分析完成(置信度进度条+根因分析+影响范围+修复建议编号列表+相似历史案例+自动修复脚本+执行按钮) / null。自包含 Card+ScrollArea 布局
- `frontend/src/components/aiops/AutoFixDialog.tsx` — **新建**(73行):提取自动修复脚本确认弹窗。Props: `{ open, onOpenChange, script }`。内含 `copied` 本地 state + `copyScript` 复制到剪贴板 handler(原主组件的 copied state+handler 下沉到弹窗内部)。Radix Dialog 含 DialogTitle+DialogDescription+脚本 pre 块+复制按钮+警告横幅+取消/确认执行按钮
- `frontend/src/components/aiops/AIAlertAnalyzer.tsx` — 主组件从 541 行降至 190 行(-351, -65%);移除 generateAIAnalysis/mapAlertEvent/getSeverityColor/AIAnalysis/AlertItem 定义(全部移到 analyzerHelpers),移除右侧分析卡片 JSX(~95 行,移到 AIAnalysisResult),移除 AutoFix 弹窗 JSX(~42 行,移到 AutoFixDialog),移除 copied/setCopied/copyScript(下沉到 AutoFixDialog 内部);保留状态管理(alerts/loading/selectedAlert/isAnalyzing/analysis/showScriptDialog) + 数据加载(loadAlerts)+ 分析触发(handleAnalyze, 1.5s 模拟) + getSeverityIcon(JSX 返回值,保留主组件) + 左侧告警列表卡片渲染 + Header
- **关键技术点**: ① getSeverityColor 返回 string 可放 .ts 纯逻辑文件,但 getSeverityIcon 返回 JSX 必须留 .tsx 主组件 ② AIAnalysisResult 接收 onAutoFix 回调而非自管 dialog 状态,保持单向数据流(dialog open 状态在父组件) ③ AutoFixDialog 的 copied 本地 state 下沉到弹窗内部(仅弹窗自身用,父组件无需感知)
- **结果**:
- npx tsc --noEmit 零错误
- npm run build 通过(3.27s, 2630 modules)
- ./run.sh restart 后 /health 正常 + 前端 200
- API 验证:/alerts?page=1 返回 {code:200, data:{list:[20条告警事件], total:N}},含 rule_name/severity/status/target/started_at/value 等字段(mapAlertEvent 映射所需字段齐全)
- 浏览器验证 /ai-alert-analyzer(AIOps智能-告警分析 菜单):
- Header "AI 告警智能分析" + "AI 引擎运行中" emerald 徽章正常
- 左侧活跃告警卡片:20 个告警条目完整渲染,"6 个活跃" 红色徽章统计正确(resolved/active 混合筛选)
- 点击告警条目 → 1.5s spinner → 右侧 AIAnalysisResult 子组件渲染:根因分析/影响范围/修复建议(编号列表)/相似历史案例/自动修复脚本 全部正常
- 点击"执行自动修复" → AutoFixDialog 子组件弹窗打开:标题"自动修复脚本" + 脚本 pre 块 + 复制按钮 + 警告横幅 + 取消/确认执行按钮(browser_click 未触发是 Radix 已知限制,JS .click() 验证通过)
- console 零 JS 错误
- grep 确认 analyzerHelpers/AIAnalysisResult/AutoFixDialog 仅被 AIAlertAnalyzer.tsx 引用(无外部依赖泄露)
- git push 成功 (commit da5f9a3)
- **下一步建议**:
- AIAlertAnalyzer(190) 已降至安全区间。前端剩余接近上限的组件: TopologyView.tsx(576)、ExcelServerImport.tsx(549)、DomainManager.tsx(492)、K8sClusterDetail.tsx(489)、CloudAccountManager.tsx(471)、CloudBilling.tsx(467)、AgentMonitor.tsx(463)、LdapManagementSection.tsx(462)、ServerManager.tsx(462)
- TopologyView.tsx(576) 含 SVG 拖拽状态机(onMouseDown/onMouseMove/onMouseUp + getScreenCTM().inverse()),拆分需谨慎保留拖拽三件套逻辑,可提取节点渲染函数为子组件但拖拽 state 留主组件
- ExcelServerImport.tsx(549) 属 CSV 导入向导(多步骤),可提取 Step 组件(预览/字段映射/确认)
- DomainManager.tsx(492)/CloudAccountManager.tsx(471)/CloudBilling.tsx(467)/AgentMonitor.tsx(463)/ServerManager.tsx(462) 均为真实业务 CRUD 组件,可按 Dialog/Form 提取模式拆分(参考 AlertManager 拆分先例)
- TraceManager.tsx(620)/GrafanaDashboard.tsx(616) 属优雅降级组件(无后端),拆分价值低于真实业务组件
- 后端 handler 全部 <400 行(最大 ldap_users.go 397),无需拆分