feat(health): refine health monitor metrics

- add TPS to model and provider health payloads

- exclude user-cancelled 499 requests from health statistics

- update model/provider health cards with average latency, average TTFB, TPS, and availability
This commit is contained in:
AAEE86
2026-06-01 18:34:51 +08:00
parent 6c2a57f237
commit 7ffe33f867
11 changed files with 366 additions and 172 deletions
@@ -109,15 +109,19 @@
</div>
</div>
<div class="grid w-full grid-cols-3 gap-2 lg:max-w-xl">
<div class="grid w-full grid-cols-4 gap-2 lg:max-w-2xl">
<MetricBox
label="延迟"
label="平均耗时"
:value="formatMs(provider.avg_latency_ms)"
/>
<MetricBox
label="Ping"
label="平均TTFB"
:value="formatMs(provider.avg_first_byte_ms)"
/>
<MetricBox
label="平均速度"
:value="formatTps(provider.avg_tps)"
/>
<MetricBox
label="可用率"
:value="formatPercent(provider.success_rate)"
@@ -161,15 +165,19 @@
</Badge>
</div>
<div class="mt-4 grid grid-cols-3 gap-2">
<div class="mt-4 grid grid-cols-4 gap-2">
<MetricBox
label="延迟"
label="平均耗时"
:value="formatMs(model.avg_latency_ms)"
/>
<MetricBox
label="Ping"
label="平均TTFB"
:value="formatMs(model.avg_first_byte_ms)"
/>
<MetricBox
label="平均速度"
:value="formatTps(model.avg_tps)"
/>
<MetricBox
label="可用率"
:value="formatPercent(model.success_rate)"
@@ -253,7 +261,7 @@ const MetricBox = defineComponent({
},
setup(props) {
return () => h('div', { class: 'rounded-lg border border-border/40 bg-muted/20 px-3 py-2' }, [
h('div', { class: 'text-[11px] text-muted-foreground' }, props.label),
h('div', { class: 'text-[11px] leading-tight text-muted-foreground' }, props.label),
h('div', { class: ['mt-1 text-sm font-semibold tabular-nums', props.valueClass] }, props.value)
])
}
@@ -356,6 +364,13 @@ function formatPercent(value: number) {
return `${(value * 100).toFixed(2)}%`
}
function formatTps(value?: number | null) {
if (typeof value !== 'number' || Number.isNaN(value)) return '-'
return `${new Intl.NumberFormat('zh-CN', {
maximumFractionDigits: value < 10 ? 2 : value < 100 ? 1 : 0
}).format(value)} tps`
}
function formatCompactNumber(value: number) {
return new Intl.NumberFormat('zh-CN', { notation: 'compact', maximumFractionDigits: 1 }).format(value)
}