模型管理页面的核心是把两件事讲清楚：这个模型现在能不能用，用起来有多快。前者靠服务端健康检查与心跳聚合成状态枚举，后者靠网关对每次请求做埋点，聚合出请求速率、首 Token 延迟、每 Token 输出时延和错误率，前端用 SSE 推送刷新，把状态做成徽标、把指标画成时序折线。企业级 AI 网关接入多家模型供应商，同一页面上十来个模型的状态一眼扫完，指标异常时能直接点进详情定位，这套展示结构是我们迭代两版后定下来的。
一、健康状态的定义与判定
模型状态不是拍脑袋出来的，后端维护一个定时探活任务，周期性对每个模型发探针请求，再结合最近请求的成功率综合判定，输出三个状态：
| 状态 | 判定条件 | 前端呈现 |
|---|---|---|
| 健康 | 探针成功且最近成功率高于阈值 | 绿色徽标 |
| 降级 | 探针成功但成功率波动、延迟偏高 | 黄色徽标 |
| 不可用 | 探针连续失败或超时 | 红色徽标 |
探活间隔按模型稳定性调整，默认 60 秒，连续三次失败才置为不可用，避免单次抖动误判。前端只消费状态枚举，判定逻辑全在后端，保证多端展示一致。
二、性能指标清单
健康状态回答”能不能用”，性能指标回答”快不快、顺不顺”。网关按模型维度聚合以下指标：
| 指标 | 含义 | 关注点 |
|---|---|---|
| RPM | 每分钟请求数 | 吞吐量，观察流量波动 |
| TTFT | 首 Token 延迟 | 用户感知的首个字出现速度 |
| TPOT | 每 Token 输出时延 | 生成阶段是否拖沓 |
| 错误率 | 非 2xx 请求占比 | 服务可用性 |
| 限流率 | 触发限流的请求占比 | 配额是否吃紧 |
延迟类指标在监控上取 p50、p95、p99 分位，比平均值更能暴露尾延迟问题——平均值好看不代表没有慢请求。
三、前端展示的分层实现
页面从上到下分三层：状态概览、指标卡片、指标时序。状态概览最上方放一组聚合卡片：可用模型数、总请求速率、全局错误率、平均 TTFT。单卡数值来自各模型指标求和或加权，点击卡片按对应维度对模型列表排序。聚合卡片的数值和折线图走同一条 SSE 流，只是计算维度不同，前端不需要另开连接。
按下面步骤落地：
- 页面加载时先拉一次全量状态与最近一小时指标，渲染初始视图；
- 建立 SSE 连接订阅指标增量，每个模型一个数据流，推送带 modelId 区分；
- 状态徽标用枚举驱动，颜色与文案一一对应，状态变化时补一段过渡动画提示；
- 指标卡片展示当前值、环比变化和分位延迟，数字超过阈值时整卡变色；
- 时序折线用增量追加维护，只保留最近 2000 个数据点，保证长跑不卡。
3.1 状态徽标与指标卡片
const statusMap = {
up: { label: '健康', color: '#34c759' },
degraded: { label: '降级', color: '#ff9f0a' },
down: { label: '不可用', color: '#ff3b30' }
};3.2 时序折线的增量更新
function onMetric(modelId, point) {
const series = seriesMap.get(modelId);
series.push([point.timestamp, point.value]);
if (series.length > MAX_POINTS) series.shift();
chart.appendData({ seriesIndex: seriesMap.get(modelId).index, data: [series[series.length - 1]] });
}四、模型对比与筛选
模型数量上来后，纯列表不够用。页面顶部提供状态筛选（全部、健康、降级、不可用）和指标排序（按 TTFT、按错误率），配合模糊搜索快速定位。对比模式支持勾选最多三个模型，把它们的 TTFT 与错误率画到同一张图上，供应商升级、版本切换前后的差异一眼可见。排序与筛选只在前端内存数据上完成，状态和指标常驻前端，交互零请求延迟。
历史趋势走独立的预聚合接口，时间范围覆盖 1 小时、近 24 小时、近 7 天。切换范围时按新粒度重新拉取，实时流照常运行，两者数据源不同，图上用不同透明度区分实时与历史数据，避免误读。
五、刷新策略：实时指标走 SSE，明细走轮询
实时性要求高的指标（TTFT、RPM、错误率）走 SSE 秒级推送；模型列表、配额用量这类低频数据走 10 秒轮询。两类数据分接口、分更新路径，互不干扰。降级或不可用模型的详情里，前端会展示后端记录的最近失败原因与时间线，方便运维在页面上直接判断是供应商故障还是配额耗尽。
六、与告警联动
展示页不只给数据，还要把异常推到人面前。前端对每个模型维护阈值配置，错误率越过红线或状态切为不可用时，页面顶部出现聚合告警条，点击可跳转到对应模型详情。告警规则支持按模型单独配置阈值，避免用全局阈值误伤低延迟模型。前端把告警状态纳入徽标体系：触发告警的模型在列表里带告警角标，颜色与状态徽标叠加显示，一眼看出哪台机器在报警。网关侧同步提供 webhook 通知，前端负责可视化，告警出口交给通知链路，职责分离后两边都好维护。
常见问题（FAQ）
Q1：状态徽标多久刷新一次？
秒级，由后端探活与 SSE 推送共同驱动，前后端状态以网关判定为准。
Q2：延迟看平均值还是分位数？
优先看 p95、p99，平均值会掩盖尾延迟，监控面板两者都展示。
Q3：供应商限流与模型故障怎么区分？
看限流率与错误率的组合，限流率高多为配额问题，错误率与超时占比高多为故障。
