feat(performance): implement success rate grading and enhance UI representation

This commit is contained in:
CaIon
2026-06-17 22:28:36 +08:00
parent 3cc2b1bea4
commit a95655a245
16 changed files with 447 additions and 1340 deletions
@@ -27,6 +27,8 @@ import {
formatLatency,
formatThroughput,
formatUptimePct,
getSuccessRateDotClass,
getSuccessRateTextClass,
} from '@/features/performance-metrics/lib/format'
import type { PerfModelSummary } from '@/features/performance-metrics/types'
@@ -79,20 +81,6 @@ function buildPerformanceSummary(rows: PerfModelSummary[]): PerformanceSummary {
}
}
function successRateClassName(successRate: number): string {
if (!Number.isFinite(successRate)) return 'text-muted-foreground'
if (successRate >= 99.9) return 'text-success'
if (successRate >= 99) return 'text-warning'
return 'text-destructive'
}
function successDotClassName(successRate: number): string {
if (!Number.isFinite(successRate)) return 'bg-muted-foreground'
if (successRate >= 99.9) return 'bg-success'
if (successRate >= 99) return 'bg-warning'
return 'bg-destructive'
}
export function PerformanceOverview() {
const { t } = useTranslation()
const metricsQuery = useQuery({
@@ -152,7 +140,7 @@ export function PerformanceOverview() {
icon={HeartPulse}
label={t('Success rate')}
value={formatUptimePct(summary.successRate)}
valueClassName={successRateClassName(summary.successRate)}
valueClassName={getSuccessRateTextClass(summary.successRate)}
/>
<InlineMetric
icon={Timer}
@@ -221,14 +209,14 @@ function ModelBadge(props: { model: PerfModelSummary }) {
<span
className={cn(
'size-1.5 rounded-full',
successDotClassName(model.success_rate)
getSuccessRateDotClass(model.success_rate)
)}
aria-hidden='true'
/>
<span
className={cn(
'font-mono text-[11px] font-semibold tabular-nums',
successRateClassName(model.success_rate)
getSuccessRateTextClass(model.success_rate)
)}
>
{formatUptimePct(model.success_rate)}
@@ -27,6 +27,8 @@ import {
formatLatency,
formatThroughput,
formatUptimePct,
getSuccessRateDotClass,
getSuccessRateTextClass,
} from '@/features/performance-metrics/lib/format'
import type { PerfModelSummary } from '@/features/performance-metrics/types'
@@ -51,20 +53,6 @@ function simpleAverage(
return count > 0 ? total / count : NaN
}
function rateTextClass(rate: number): string {
if (!Number.isFinite(rate)) return 'text-muted-foreground'
if (rate >= 99.9) return 'text-success'
if (rate >= 99) return 'text-warning'
return 'text-destructive'
}
function rateDotClass(rate: number): string {
if (!Number.isFinite(rate)) return 'bg-muted-foreground'
if (rate >= 99.9) return 'bg-success'
if (rate >= 99) return 'bg-warning'
return 'bg-destructive'
}
export function PerformanceHealthPanel() {
const { t } = useTranslation()
const metricsQuery = useQuery({
@@ -121,7 +109,7 @@ export function PerformanceHealthPanel() {
label={t('Success rate')}
value={formatUptimePct(summary.successRate)}
loading={loading}
valueClassName={rateTextClass(summary.successRate)}
valueClassName={getSuccessRateTextClass(summary.successRate)}
/>
<MetricCell
icon={Timer}
@@ -162,14 +150,14 @@ export function PerformanceHealthPanel() {
<span
className={cn(
'size-1.5 rounded-full',
rateDotClass(model.success_rate)
getSuccessRateDotClass(model.success_rate)
)}
aria-hidden='true'
/>
<span
className={cn(
'font-mono text-[11px] font-semibold tabular-nums',
rateTextClass(model.success_rate)
getSuccessRateTextClass(model.success_rate)
)}
>
{formatUptimePct(model.success_rate)}