c06f0c89e5
New TabKpis component shows scope-aware metrics with trend arrows aligned right in the content tab bar. Each metric shows current value and an arrow indicating change vs previous period (green=good, red=bad). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { useGlobalFilters } from '@cameleer/design-system';
|
|
import { useExecutionStats } from '../api/queries/executions';
|
|
import type { Scope } from '../hooks/useScope';
|
|
import styles from './TabKpis.module.css';
|
|
|
|
interface TabKpisProps {
|
|
scope: Scope;
|
|
}
|
|
|
|
function formatNum(n: number): string {
|
|
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
|
if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
|
|
return n.toLocaleString();
|
|
}
|
|
|
|
function formatMs(ms: number): string {
|
|
if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`;
|
|
if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
|
|
return `${Math.round(ms)}ms`;
|
|
}
|
|
|
|
function formatPct(pct: number): string {
|
|
return `${pct.toFixed(1)}%`;
|
|
}
|
|
|
|
type Trend = 'up' | 'down' | 'flat';
|
|
|
|
function trend(current: number, previous: number): Trend {
|
|
if (current > previous) return 'up';
|
|
if (current < previous) return 'down';
|
|
return 'flat';
|
|
}
|
|
|
|
function trendArrow(t: Trend): string {
|
|
switch (t) {
|
|
case 'up': return '\u2191';
|
|
case 'down': return '\u2193';
|
|
case 'flat': return '\u2192';
|
|
}
|
|
}
|
|
|
|
interface Metric {
|
|
label: string;
|
|
value: string;
|
|
trend: Trend;
|
|
/** Whether "up" is bad (e.g. error rate, latency) */
|
|
upIsBad?: boolean;
|
|
}
|
|
|
|
export function TabKpis({ scope }: TabKpisProps) {
|
|
const { timeRange } = useGlobalFilters();
|
|
const timeFrom = timeRange.start.toISOString();
|
|
const timeTo = timeRange.end.toISOString();
|
|
|
|
const { data: stats } = useExecutionStats(
|
|
timeFrom, timeTo,
|
|
scope.routeId, scope.appId,
|
|
);
|
|
|
|
const metrics: Metric[] = useMemo(() => {
|
|
if (!stats) return [];
|
|
|
|
const total = stats.totalCount ?? 0;
|
|
const failed = stats.failedCount ?? 0;
|
|
const prevTotal = stats.prevTotalCount ?? 0;
|
|
const prevFailed = stats.prevFailedCount ?? 0;
|
|
const errorRate = total > 0 ? (failed / total) * 100 : 0;
|
|
const prevErrorRate = prevTotal > 0 ? (prevFailed / prevTotal) * 100 : 0;
|
|
const avgMs = stats.avgDurationMs ?? 0;
|
|
const prevAvgMs = stats.prevAvgDurationMs ?? 0;
|
|
const p99 = stats.p99LatencyMs ?? 0;
|
|
const prevP99 = stats.prevP99LatencyMs ?? 0;
|
|
|
|
return [
|
|
{ label: 'Total', value: formatNum(total), trend: trend(total, prevTotal) },
|
|
{ label: 'Err%', value: formatPct(errorRate), trend: trend(errorRate, prevErrorRate), upIsBad: true },
|
|
{ label: 'Avg', value: formatMs(avgMs), trend: trend(avgMs, prevAvgMs), upIsBad: true },
|
|
{ label: 'P99', value: formatMs(p99), trend: trend(p99, prevP99), upIsBad: true },
|
|
];
|
|
}, [stats]);
|
|
|
|
if (metrics.length === 0) return null;
|
|
|
|
return (
|
|
<div className={styles.kpis}>
|
|
{metrics.map((m) => {
|
|
const arrowClass = m.trend === 'flat'
|
|
? styles.flat
|
|
: (m.trend === 'up') === m.upIsBad
|
|
? styles.bad
|
|
: styles.good;
|
|
|
|
return (
|
|
<div key={m.label} className={styles.metric}>
|
|
<span className={styles.label}>{m.label}</span>
|
|
<span className={styles.value}>{m.value}</span>
|
|
<span className={`${styles.arrow} ${arrowClass}`}>{trendArrow(m.trend)}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|