1
0
Files
DiAL/openspec/changes/enhance-frontend-metrics/tasks.md

56 lines
4.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
## 1. 共享类型与数据层
- [ ] 1.1 扩展 `src/shared/api.ts`SummaryResponse 增加 incidents24hTrendPoint 增加 upChecks/minDurationMs/maxDurationMs新增 TargetStatsResponse 类型
- [ ] 1.2 ProbeStore 修改 `getAllTargetStats(from?, to?)``getTargetStats(targetId, from?, to?)` 增加时间窗口参数,默认 24h
- [ ] 1.3 ProbeStore 修改 `getTrend` SQL 增加 MIN/MAX duration_ms 和 upChecks 聚合字段
- [ ] 1.4 ProbeStore 新增 `getIncidents24h()` 独立方法,使用 LAG 窗口函数统计所有目标的状态翻转次数
- [ ] 1.5 ProbeStore 新增 `getTargetDurations(targetId, from, to)` 方法,返回成功检查的 duration_ms 升序数组
- [ ] 1.6 ProbeStore 新增 `getCheckSequence(targetId, from, to)` 方法,返回检查序列用于故障分析
- [ ] 1.7 编写 ProbeStore 新增/修改方法的单元测试
## 2. 后端 API 路由
- [ ] 2.1 修改 `src/server/routes/summary.ts`:调用 store.getIncidents24h(),响应增加 incidents24h 字段
- [ ] 2.2 修改 `src/server/routes/targets.ts`:解析 `?window=24h` 查询参数,转换为时间范围传递给 getAllTargetStats(from, to),缺省默认 24h
- [ ] 2.3 修改 `src/server/routes/trend.ts`:响应增加 upChecks/minDurationMs/maxDurationMs 字段
- [ ] 2.4 新增 `src/server/routes/stats.ts`:实现 GET /api/targets/:id/stats?from=&to= 端点,应用层计算 P95/P99、MTTR、最长故障、故障次数、连续状态
- [ ] 2.5 在 `src/server/server.ts` 路由注册中挂载 stats 路由
- [ ] 2.6 编写 stats 路由的集成测试(含 P95 计算、MTTR 计算、窗口边界截断、无数据等边界情况)
- [ ] 2.7 编写 summary/targets/trend 路由修改的测试更新
## 3. 前端工具函数
- [ ] 3.1 删除 `src/web/utils/stats.ts` 中的 `computeTrendStats` 函数(不再有调用方)
- [ ] 3.2 新增连续状态计算工具函数 `getConsecutiveStatus(samples: RecentSample[]): { up: boolean; count: number }`
- [ ] 3.3 新增时间格式化工具函数相对时间X秒前/X分钟前、动态单位ms→秒/分钟/小时)
- [ ] 3.4 编写工具函数的单元测试
## 4. 前端数据层
- [ ] 4.1 修改 `src/web/hooks/use-queries.ts`useTargets 请求改为 `/api/targets?window=24h`,后端解析 window 参数转换为时间范围
- [ ] 4.2 新增 useTargetStats hookqueryKey: ["stats", targetId, from, to]enabled 依赖 targetId 存在)
- [ ] 4.3 修改 `use-target-detail.ts`:集成 useTargetStats 调用,复用现有 timeFrom/timeTo 状态
## 5. 前端组件 — Summary Cards
- [ ] 5.1 修改 `SummaryCards.tsx`:从 3 列span=4扩展为 4 列span=3新增 24h 异常事件数卡片color=orange
- [ ] 5.2 在 SummaryCards 底部增加 lastCheckTime 相对时间展示useState + setInterval 每秒更新),超过 60 秒变警告色
## 6. 前端组件 — Target Table
- [ ] 6.1 修改 `target-table-columns.tsx`:可用率列标题改为"可用率(24h)"
- [ ] 6.2 修改 `target-table-columns.tsx`在「最近状态」列后新增「连续」列width=100使用 TDesign Tagtheme=success/danger, variant=light, size=small渲染 "▲ N次" / "▼ N次"
## 7. 前端组件 — Drawer 概览
- [ ] 7.1 修改 `OverviewTab.tsx`props 增加 statsData/statsLoading删除 computeTrendStats 调用;统计区重构为 2×4 Statistic 布局,数据来自 statsData
- [ ] 7.2 修改 `OverviewTab.tsx`StatusDonut 数据来源改为 statsData.upChecks / statsData.downChecks
- [ ] 7.3 修改 `TrendChart.tsx`:移除右侧 Y 轴和 availability Line增加 Area 组件渲染 min/max 延迟范围半透明品牌色填充avgDurationMs Line 的 dot 回调对 availability < 100 的点渲染红色圆点
- [ ] 7.4 修改 `TargetDetailDrawer.tsx`TIME_SHORTCUTS 保持 1h/6h/24h/7d 四个选项,默认选中 24h
- [ ] 7.5 修改 `TargetDetailDrawer.tsx`:集成 useTargetStats传递 statsData/statsLoading 给 OverviewTab
## 8. 质量保障
- [ ] 8.1 运行完整测试套件,确保所有测试通过
- [ ] 8.2 运行 lint 和格式检查,修复所有问题