attacker
f725ca7cac
后端: - 新增 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 全通过
57 lines
2.6 KiB
TypeScript
57 lines
2.6 KiB
TypeScript
// 自定义监控仪表盘 API // Logan.Li
|
|
|
|
import { http } from '@/utils/request';
|
|
import type { GrafanaDashboard } from '@/types/monitor';
|
|
|
|
export const dashboardApi = {
|
|
getDashboards: async (): Promise<{ data: GrafanaDashboard[]; total: number }> => {
|
|
const res = await http.get('/custom-dashboards');
|
|
// http 自动解包 .data，后端返回 {list, total}
|
|
const body = (res as Record<string, unknown>) ?? {};
|
|
const list = (body.list as GrafanaDashboard[]) ?? [];
|
|
const total = (body.total as number) ?? list.length;
|
|
return { data: list, total };
|
|
},
|
|
getDatasources: async (): Promise<{ data: Record<string, unknown>[]; total: number }> => {
|
|
// 复用 Prometheus 数据源列表
|
|
const res = await http.get('/prometheus-datasources');
|
|
const arr = (res as Record<string, unknown>[]) ?? [];
|
|
return { data: arr, total: arr.length };
|
|
},
|
|
createDashboard: async (data: Partial<GrafanaDashboard>): Promise<{ success: boolean }> => {
|
|
// 将 panels 数组序列化为 JSON 字符串
|
|
const payload: Record<string, unknown> = {
|
|
name: data.name ?? '',
|
|
description: data.description ?? '',
|
|
datasource: data.datasource ?? 'prometheus',
|
|
datasource_url: data.datasourceUrl ?? '',
|
|
panels: JSON.stringify(data.panels ?? []),
|
|
is_default: data.isDefault ?? false,
|
|
};
|
|
await http.post('/custom-dashboards', payload);
|
|
return { success: true };
|
|
},
|
|
updateDashboard: async (id: number | string, data: Partial<GrafanaDashboard>): Promise<{ success: boolean }> => {
|
|
const payload: Record<string, unknown> = {};
|
|
if (data.name !== undefined) payload.name = data.name;
|
|
if (data.description !== undefined) payload.description = data.description;
|
|
if (data.datasource !== undefined) payload.datasource = data.datasource;
|
|
if (data.datasourceUrl !== undefined) payload.datasource_url = data.datasourceUrl;
|
|
if (data.panels !== undefined) payload.panels = JSON.stringify(data.panels);
|
|
if (data.isDefault !== undefined) payload.is_default = data.isDefault;
|
|
await http.put(`/custom-dashboards/${id}`, payload);
|
|
return { success: true };
|
|
},
|
|
deleteDashboard: async (id: number | string): Promise<{ success: boolean }> => {
|
|
await http.delete(`/custom-dashboards/${id}`);
|
|
return { success: true };
|
|
},
|
|
setDefault: async (id: number | string): Promise<{ success: boolean }> => {
|
|
await http.post(`/custom-dashboards/${id}/default`);
|
|
return { success: true };
|
|
},
|
|
createDatasource: async (_data: Record<string, unknown>): Promise<{ success: boolean }> => {
|
|
return { success: false };
|
|
},
|
|
};
|