lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
0fa2c0c811fc78c658dbb653658afdc02c705767
DiAL/openspec/changes/enhance-frontend-metrics/specs/target-detail-drawer/spec.md

5.9 KiB
Raw Blame History

MODIFIED Requirements

Requirement: 概览面板组件化

概览 Tab SHALL 作为独立组件 OverviewTab 实现，展示多维度统计、趋势图、状态分布和基本信息。

Scenario: OverviewTab 组件职责

  • WHEN 概览 Tab 渲染
  • THEN OverviewTab 组件 SHALL 负责多维度统计卡片（2×4 布局）、趋势图（延迟范围面积图+异常标记点）、状态分布环形图和基本信息的渲染

Scenario: 统计计算不再使用 computeTrendStats

  • WHEN OverviewTab 需要 totalChecks、upChecks、downChecks
  • THEN SHALL 直接使用 statsData 中的 totalChecks、upChecks、downChecks 字段，computeTrendStats 工具函数 SHALL 被删除

Scenario: OverviewTab props

  • WHEN OverviewTab 渲染
  • THEN 组件 SHALL 接收 target: TargetStatus、trendData: TrendPoint[]、trendLoading: boolean、statsData: TargetStatsResponse | null、statsLoading: boolean 作为 props

Requirement: 概览面板

概览 Tab SHALL 按区域展示多维度统计、趋势图、状态分布和基本信息。

Scenario: 区域排列顺序

  • WHEN 概览面板渲染
  • THEN 面板 SHALL 按以下顺序展示区域：统计 → 趋势 → 状态分布 → 基本信息，每个区域前 SHALL 显示 TDesign Divider（align="left"）作为小标题

Scenario: 统计区多维度布局

  • WHEN 概览面板渲染
  • THEN 面板 SHALL 在"统计"区域使用 2 行 × 4 列的 TDesign Row/Col + Statistic 布局：第一行为可用率（suffix="%"）、平均延迟（suffix="ms"）、P95 延迟（suffix="ms"）、检查总数；第二行为 MTTR（动态单位）、最长故障（动态单位）、故障次数（suffix="次"）、连续正常（suffix="次"，固定标题"连续正常"，当目标当前处于异常状态时值为 0）

Scenario: MTTR 和最长故障动态单位

  • WHEN MTTR 或最长故障值小于 60000ms
  • THEN SHALL 以秒为单位展示（suffix="秒"）
  • WHEN 值大于等于 60000ms 且小于 3600000ms
  • THEN SHALL 以分钟为单位展示（suffix="分钟"）
  • WHEN 值大于等于 3600000ms
  • THEN SHALL 以小时为单位展示（suffix="小时"）

Scenario: 统计区数据来源

  • WHEN 统计区渲染
  • THEN 第一行数据 SHALL 来自 statsData（TargetStatsResponse），第二行数据同样来自 statsData

Scenario: 统计区加载状态

  • WHEN statsData 正在加载
  • THEN 统计区 SHALL 显示 TDesign Skeleton 加载占位

Scenario: 趋势图延迟范围面积

  • WHEN 概览面板渲染且趋势数据可用
  • THEN 趋势图 SHALL 使用 recharts Area 组件渲染 minDurationMs 到 maxDurationMs 的延迟范围（半透明品牌色填充），叠加 avgDurationMs 实线

Scenario: 趋势图异常标记点

  • WHEN 趋势数据中某小时的 availability < 100
  • THEN 趋势图 SHALL 在 avgDurationMs 线上该时间点渲染红色圆点（fill: var(--td-error-color)），使用 recharts Line 的 dot 回调函数实现；图表 SHALL 仅保留左侧 Y 轴（ms），移除右侧 Y 轴（%）和 availability 折线

Scenario: 趋势数据加载中

  • WHEN 概览面板渲染且趋势数据正在加载
  • THEN "趋势"区域 SHALL 显示 TDesign Skeleton 加载占位

Scenario: 状态分布环形图

  • WHEN 概览面板渲染且 statsData 可用
  • THEN 面板 SHALL 在"状态分布"区域展示 recharts 环形图（StatusDonut），使用 statsData.upChecks 和 statsData.downChecks 作为数据源，外圈显示 UP/DOWN 比例，中间显示可用率百分比

Scenario: 状态分布加载状态

  • WHEN statsData 正在加载
  • THEN 状态分布区域 SHALL 显示 TDesign Skeleton 加载占位

Scenario: 元信息展示

  • WHEN 概览面板渲染
  • THEN 面板 SHALL 在"基本信息"区域使用 TDesign Descriptions 组件展示目标元信息：目标地址、检查间隔、最新检查时间、状态详情

Requirement: 时间范围选择器

Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览和记录两个面板的数据。时间选择器 SHALL 分两行显示：第一行为快捷按钮，第二行为日期时间范围选择器。

Scenario: 快捷时间按钮

  • WHEN Drawer 渲染
  • THEN 时间选择区第一行 SHALL 显示 TDesign RadioGroup（variant=default-filled）快捷按钮：1小时、6小时、24小时、7天

Scenario: 点击快捷按钮

  • WHEN 用户点击快捷按钮（如 "24小时"）
  • THEN 系统 SHALL 自动设置对应的起止时间，DateRangePicker 显示对应的时间范围，该按钮高亮

Scenario: 快捷按钮联动统计区

  • WHEN 用户点击 1小时/6小时/24小时/7天 快捷按钮
  • THEN 统计区和趋势图 SHALL 使用对应的时间窗口重新请求 /api/targets/:id/stats 和 /api/targets/:id/trend 数据

Scenario: 自定义日期时间范围

  • WHEN 用户通过 TDesign DateRangePicker（mode=date, enableTimePicker, format="YYYY-MM-DD HH:mm"）修改时间范围
  • THEN 快捷按钮 SHALL 取消高亮，系统重新请求对应时间范围的数据

Scenario: 默认时间范围

  • WHEN Drawer 打开
  • THEN 时间选择器 SHALL 默认选中 "24小时" 快捷按钮

ADDED Requirements

Requirement: Stats 数据查询 Hook

系统 SHALL 提供 useTargetStats hook 查询单目标深度统计数据。

Scenario: stats queryKey

  • WHEN 查询某目标的统计数据
  • THEN queryKey SHALL 为 ["stats", targetId, from, to]

Scenario: stats 条件查询

  • WHEN 用户未选中任何目标
  • THEN stats 的 useQuery SHALL enabled=false，不发起请求

Scenario: stats 数据返回

  • WHEN stats 查询成功
  • THEN hook SHALL 返回 TargetStatsResponse 类型数据

Scenario: 时间范围变化时重新请求

  • WHEN 用户更改时间范围
  • THEN stats 的 useQuery SHALL 因 queryKey 变化自动重新请求
View Git Blame Copy Permalink