1
0

feat: 前端指标体系增强 — Dashboard/Metrics API、2×4 统计区、趋势图面积+异常标记、连续状态列

- 新增 GET /api/dashboard 合并原 summary+targets 首屏接口
- 新增 GET /api/targets/:id/metrics 合并原 stats+trend 概览接口
- 后端指标纯函数:可用率、百分位、故障段分析、连续状态、UTC 小时分桶
- ProbeStore 窗口取数方法替代全量历史查询
- SummaryCards 扩展为 4 卡片(新增异常事件数)+ 数据新鲜度展示
- 表格新增「连续」列(Tag 渲染 capped 状态)
- OverviewTab 重构为 2×4 Statistic 多维度布局
- TrendChart 改为延迟范围面积图 + 红色异常标记点
- 删除旧路由(summary/targets/trend)和 computeTrendStats
- 同步 delta specs 到主 specs 并归档变更
This commit is contained in:
2026-05-14 12:32:41 +08:00
parent e983e5d75d
commit 1c5cfafda6
47 changed files with 1768 additions and 1231 deletions

View File

@@ -3,28 +3,25 @@ import { Alert, Loading, Typography } from "tdesign-react";
import { SummaryCards } from "./components/SummaryCards";
import { TargetBoard } from "./components/TargetBoard";
import { TargetDetailDrawer } from "./components/TargetDetailDrawer";
import { useSummary, useTargets } from "./hooks/use-queries";
import { useDashboard } from "./hooks/use-queries";
import { useTargetDetail } from "./hooks/use-target-detail";
export function App() {
const { data: summary, error: summaryError, isLoading: summaryLoading } = useSummary();
const { data: targets, error: targetsError, isLoading: targetsLoading } = useTargets();
const { data: dashboard, error: dashboardError, isLoading: dashboardLoading } = useDashboard();
const {
closeDrawer,
handlePageChange,
handleTimeChange,
historyData,
historyLoading,
metricsData,
metricsLoading,
openDrawer,
selectedTarget,
timeFrom,
timeTo,
trendData,
trendLoading,
} = useTargetDetail();
const error = summaryError ?? targetsError;
return (
<main className="dashboard">
<header className="dashboard-header">
@@ -32,14 +29,14 @@ export function App() {
<Typography.Text theme="secondary"></Typography.Text>
</header>
{error && <Alert closeBtn message={`请求失败: ${error.message}`} theme="error" />}
{dashboardError && <Alert closeBtn message={`请求失败: ${dashboardError.message}`} theme="error" />}
{summaryLoading && targetsLoading ? (
{dashboardLoading ? (
<Loading />
) : (
<>
<SummaryCards summary={summary ?? null} />
<TargetBoard onTargetClick={openDrawer} targets={targets ?? []} />
<SummaryCards summary={dashboard?.summary ?? null} />
<TargetBoard onTargetClick={openDrawer} targets={dashboard?.targets ?? []} />
</>
)}
@@ -47,14 +44,14 @@ export function App() {
historyData={historyData}
historyLoading={historyLoading}
key={selectedTarget?.id}
metricsData={metricsData}
metricsLoading={metricsLoading}
onClose={closeDrawer}
onPageChange={handlePageChange}
onTimeChange={handleTimeChange}
target={selectedTarget}
timeFrom={timeFrom}
timeTo={timeTo}
trendData={trendData}
trendLoading={trendLoading}
/>
</main>
);