1. 页面概览
监控看板是 AIP 管理后台面向管理员的运行监控页,路由为 /admin/monitoring。概览 Tab 用指标卡片展示查询总数、成功率、平均/P95 延迟、总 Tokens 与 LLM 失败率;历史趋势 Tab 用 echarts 折线/柱状图展示按时间窗口的查询量与延迟;反馈统计 Tab 汇总用户评分与反馈类型分布。页面头支持「刷新」与「导出 CSV」(纯前端导出当前 Tab 展示数据;后端 monitoring 无导出端点)。
指标数据来自 NLQ 查询日志(nlq_query_logs)与 LLM 调用日志聚合,反馈来自用户对查询结果的评价(POST /feedback)。管理员据此掌握平台健康度、性能瓶颈与用户满意度。
一句话总结:监控看板把「运行指标、历史趋势、用户反馈」三个维度集中展示,是 AIP 平台的健康仪表盘。
2. 访问入口
2.1 路由与菜单
| 项目 | 值 |
|---|---|
| 路由 path | /admin/monitoring |
| 路由 name | AdminMonitoring |
| 路由 title | 监控看板 |
| requiresAuth | true(父级 /admin 另有 requiresAdmin) |
| 菜单位置 | AdminLayout 侧边栏菜单项「监控看板」 |
| 前端源码 | action/web/src/views/MonitoringPage.vue |
| 路由注册 | action/web/src/router/index.js |
2.2 认证与权限
守卫校验 aip_is_admin='1',否则跳 /chat;请求走 action/web/src/api/aipClient.js(aip_token Bearer JWT),401 清 token 跳登录。
2.3 端口与 API 前缀
AIP 后端 18080,前缀 /aip-api(实际 /aip-api/v1/...,Vite 代理重写为 /api/v1)。
3. 界面布局
+------------------------------+
| 监控看板 [刷新] [导出 CSV(前端导出)] |
| [alert 提示] |
| Tab:概览 | 历史趋势 | 反馈统计
+------------------------------+
| 概览 Tab:核心指标(card) |
| 查询总数|成功率|平均延迟|P95 延迟|总Tokens|LLM 失败率
| (成功率/失败率按阈值着色) |
| 历史趋势 Tab(card): |
| 时间窗口下拉[近 1 天▾] |
| echarts:柱=查询量、 |
| 线=平均延迟(左轴)、 |
| 线=成功率(右轴 %) |
| 反馈统计 Tab: |
| 反馈概览卡(平均评分+N条) |
| 评分分布+反馈类型分布(CSS柱条)
| 最近反馈列表(星级/类型/时间/问题/评论)
+------------------------------+
各板块职责:概览卡片对成功率(≥90% 绿)与 LLM 失败率(≥10% 红)着色提示;历史趋势支持时间窗口切换并渲染图表;反馈统计用 CSS 柱条展示评分/类型分布。
4. 交互元素
| 控件 | 位置 | 含义与作用 |
|---|---|---|
| 刷新 | 页头 | 并行重拉指标、历史趋势与反馈统计,加载中禁用并显示「加载中...」 |
| 导出 CSV(前端导出) | 页头 | 纯前端把当前 Tab 展示数据导出为 CSV 下载(概览=指标表、历史趋势=采样点表、反馈统计=评分/类型分布+最近反馈);文件名如 monitoring_metrics.csv / monitoring_history_7d.csv / monitoring_feedback.csv,带 UTF-8 BOM 防 Excel 中文乱码 |
| 时间窗口下拉 | 历史趋势 Tab | 近 1 天(1d)/近 7 天(7d)/近 30 天(30d),切换即重新拉取并渲染图表 |
| 历史趋势图 | 历史趋势 Tab | echarts 组合图:柱状查询量、折线平均延迟(左轴)、折线成功率(右轴 %),tooltip 联动;容器尺寸变化由 ResizeObserver 自动重绘 |
| 反馈统计 | 反馈统计 Tab | 只读:平均评分(最多 5 星展示)、评分分布(1~5 星)、反馈类型分布、最近反馈列表 |
5. 后端关联
API 端点(monitoring 挂 protected 登录组;feedback/stats 挂 admin 组):
| 方法 | 路径 | 用途 |
|---|---|---|
| GET | /monitoring/metrics | 核心指标(total_queries/success_rate/avg_latency_ms/p95_latency_ms/llm_failure_rate 等) |
| GET | /monitoring/history?window=1d|7d|30d | 历史采样点(data.items:ts/queries/success_rate/avg_latency_ms) |
| GET | /feedback/stats | 反馈统计(total/avg_rating/rating_distribution/type_distribution/recent) |
| POST | /feedback | 用户提交反馈(本页不调用,由查询页调用) |
5.1 关键机制
- 指标聚合:从
nlq_query_logs统计查询总数/成功率/延迟(含 P95),从 LLM 调用日志统计失败率与 Tokens;空库时 LLM 字段为 nil,前端fmtTokens显示-。 - 百分比兼容:
success_rate等 0-1 与 0-100 两种数值统一转百分比;图表内数据统一转 0-100(null 跳过该点)。 - 反馈分布:
rating_distribution(1~5 星)与type_distribution(sql_correct/sql_syntax_error/wrong_result/misunderstood)渲染为相对最大值的 CSS 柱条。 - 图表懒渲染:切到历史趋势 Tab 才 init echarts(容器此时才挂载);watch(activeTab) 补渲染,页面卸载时 dispose。
- 图表自适应:用
ResizeObserver监听图表容器(chartRef)尺寸变化并resize(),Tab 容器/布局尺寸变化也能自动重绘;切走 Tab 与组件卸载时disconnect()。 - 导出:后端 monitoring 仅有
/metrics与/history查询端点、无导出端点,故本页导出为纯前端导出(把当前展示数据落成 CSV,浏览器 Blob 下载),不新增后端接口。
后端实现位于 action/products/aip/monitoring/handler.go、service.go(GetMetrics/GetHistory),feedback/handler.go、service.go(Stats)。
6. 权限与安全
- 认证与角色:
aip_token+ 管理员;/feedback/stats为 admin 组,/monitoring/*指标挂 protected 登录组。 - 数据安全:监控聚合数据不区分用户维度,仅管理员可见页面入口。
- 只读页面:监控看板无任何写操作,仅查询与图表展示。
7. 常见问题与排错
问题 1:概览指标全为 0
原因:GET /monitoring/metrics 失败(后端未就绪/401)num() 兜底 0;或确无查询日志。
处理:确认请求返回;先产生一次 NLQ 查询再「刷新」。
问题 2:历史趋势图空白
原因:historyData 为空(后端未就绪)或容器未挂载即渲染。
处理:确认 /monitoring/history 返回非空 items;切到历史趋势 Tab 后会自动补渲染。
问题 3:切换时间窗口后图表未更新
原因:fetchHistory 在 finally 调 renderChart,若 chartRef 容器未就绪会跳过。
处理:确认当前在历史趋势 Tab;重新切换窗口或点「刷新」。
问题 4:反馈统计平均评分显示 '-'
原因:avg_rating 缺失或为空(无已评分反馈)。
处理:属正常兜底;产生评分反馈后重新加载。
8. 已知缺陷与边界
| 项 | 说明 |
|---|---|
| 指标口径 | 成功率为聚合快照,窗口内无查询时返回 0 |
| 历史采样粒度 | ts 为日期(2006-01-02),近 1 天窗口粒度较粗 |
| 反馈类型分布 | 分布键与 TYPE_LABELS 匹配,未知键原样显示 |
| 导出为前端实现 | 已支持导出 CSV,但为纯前端导出(基于当前 Tab 已展示数据),非后端导出;大数据量/全量导出需后端端点(当前未提供,未新增) |
| 图表自适应 | 已改用 ResizeObserver 监听图表容器尺寸变化,Tab/布局变化自动重绘;不支持 ResizeObserver 的旧环境回退为重新渲染时自适应 |