feat(monitor): F4 自定义监控仪表盘 — mock 桩改真实 CRUD + PromQL 查询渲染

后端:
- 新增 model/custom_dashboard.go (monitor_custom_dashboards 表)
- 新增 controller/custom_dashboard.go (CRUD + 设默认, 6 路由)
- routes.go 注册 /custom-dashboards 路由组
- database.go AutoMigrate 注册 CustomDashboard

前端:
- grafana.ts: dashboardApi 从 mock 返回空改为真实 HTTP 调用
- metrics.ts: prometheusProxyApi 新增 query/queryRange 方法
- GrafanaPanelContent.tsx: 从随机 mock 数据改为执行 PromQL 查询
  + Recharts LineChart 渲染 graph 类型
  + SVG gauge 渲染 gauge 类型
  + 数值卡片渲染 stat 类型
  + 表格渲染 table 类型
  + 30s 自动刷新 + loading/error 状态
  + 自动发现默认 Prometheus 数据源
- GrafanaDashboard.tsx: 传递 datasourceUrl 到 GrafanaPanelContent

验证: go build✅ npm build✅ 17/17 集成测试通过 E2E CRUD 全通过
This commit is contained in:
attacker committed 2026-06-27 23:28:04 +08:00
1 parent 7af10097c9
commit f725ca7cac
11 files changed
+670 -53

No files matched your search

+23
View File
@@ -314,6 +314,28 @@ services/api.ts (1324L)
- [x] kubectl 确认在镜像中(`which kubectl` 返回 `/usr/local/bin/kubectl`)
- [x] UpgradeTools 日志确认 git/docker-cli preinstall→lazy 升级成功
### F4: 自定义监控仪表盘 [done]
**问题**: `dashboardApi`(Grafana 仪表盘 CRUD)6 个方法全部为 mock 桩,返回空数组/false。前端 `GrafanaDashboard.tsx` 的"自定义"Tab 有完整 UI 但无法创建/保存仪表盘,面板渲染随机 mock 数据。
**已完成 (2026-06-27)**:
- ✅ 后端新增 `monitor_custom_dashboards` 表 + `CustomDashboard` 模型(面板配置存 JSON)
- ✅ 后端新增 `controller/custom_dashboard.go` — CRUD + 设默认(6 个路由)
- ✅ 前端 `dashboardApi` 从 mock 桩改为真实 HTTP 调用(对接 `/custom-dashboards` REST API)
- ✅ 前端 `prometheusProxyApi` 新增 `query` / `queryRange` 方法(对接已有后端代理)
- ✅ `GrafanaPanelContent` 从随机 mock 数据改为执行 PromQL 查询,用 Recharts 渲染真实图表
- ✅ 支持 4 种面板类型: graph(折线图 LineChart)/ stat(数值)/ gauge(仪表盘 SVG)/ table(表格)
- ✅ 面板自动 30s 刷新 + loading/error 状态处理 + 自动发现默认 Prometheus 数据源
**验收标准**:
- [x] 可创建/查看/编辑/删除自定义仪表盘
- [x] 仪表盘面板可执行 PromQL 查询并渲染真实数据(非 mock)
- [x] 支持 graph(折线图)/ stat(数值)/ gauge(仪表盘)/ table(表格)四种面板类型
- [x] 仪表盘可设为默认
- [x] `go build` 零错误
- [x] `npm run build` 零错误(✓ built in 18.01s)
- [x] 17/17 集成回归测试通过
---
## 模块状态追踪
@@ -326,6 +348,7 @@ services/api.ts (1324L)
| F1 | 告警静默规则 | P1 | **done** |
| F2 | 审计日志导出 | P1 | **done** |
| F3 | 前端 RBAC 控制 | P1 | **done** |
| F4 | 自定义监控仪表盘 | P1 | **done** |
| A1 | K8s 路由统一 | P2 | **done** |
| A2 | 告警引擎分布式 | P2 | **done** |
| A3 | WebSocket 管理 | P2 | **done** |