fix: chart Y-axis auto-scaling, error rate unit, memory reference line, pointer events

- Throughput chart: divide totalCount by bucket duration (seconds) so Y-axis shows true msg/s instead of raw bucket counts; fixes flat-line appearance when TPS is low but totalCount is large
- Error Rate chart: convert failedCount/totalCount to percentage; change yLabel from "err/h" to "%" to match KPI stat card unit
- Memory chart: add threshold line at jvm.memory.heap.max so chart Y-axis extends to max heap and shows the reference line (spec 5.3)
- Agent state: suppress containerStatus badge when value is "UNKNOWN"; only render it with "Container: <state>" label when a non-UNKNOWN secondary state is present (spec 5.4)
- DashboardTab chartGrid: add pointer-events:none with pointer-events:auto on children so the chart grid overlay does not intercept clicks on the Application Health table rows below (spec 5.5)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 18:42:10 +02:00
parent fb53dc6dfc
commit 2ede06f32a
2 changed files with 31 additions and 14 deletions

View File

@@ -66,16 +66,20 @@ export default function AgentInstance() {
60,
);
const chartData = useMemo(
() =>
(timeseries?.buckets || []).map((b: any) => ({
time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
throughput: b.totalCount,
latency: b.avgDurationMs,
errors: b.failedCount,
})),
[timeseries],
);
const chartData = useMemo(() => {
const buckets: any[] = timeseries?.buckets || [];
// Compute bucket duration in seconds from consecutive timestamps (for msg/s conversion)
const bucketSecs =
buckets.length >= 2
? (new Date(buckets[1].timestamp).getTime() - new Date(buckets[0].timestamp).getTime()) / 1000
: 60;
return buckets.map((b: any) => ({
time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
throughput: bucketSecs > 0 ? b.totalCount / bucketSecs : b.totalCount,
latency: b.avgDurationMs,
errorPct: b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0,
}));
}, [timeseries]);
const feedEvents = useMemo<FeedEvent[]>(() => {
const mapped = (events || [])
@@ -118,7 +122,7 @@ export default function AgentInstance() {
const throughputSeries = useMemo(
() =>
chartData.length
? [{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]
? [{ label: 'msg/s', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]
: null,
[chartData],
);
@@ -126,7 +130,7 @@ export default function AgentInstance() {
const errorSeries = useMemo(
() =>
chartData.length
? [{ label: 'Errors', data: chartData.map((d: any, i: number) => ({ x: i, y: d.errors })) }]
? [{ label: 'Error %', data: chartData.map((d: any, i: number) => ({ x: i, y: d.errorPct })) }]
: null,
[chartData],
);
@@ -229,6 +233,9 @@ export default function AgentInstance() {
<span className={styles.scopeCurrent}>{agent.displayName}</span>
<StatusDot variant={statusVariant} />
<Badge label={agent.status} color={statusColor} />
{agent.containerStatus && agent.containerStatus !== 'UNKNOWN' && (
<Badge label={`Container: ${agent.containerStatus}`} variant="outlined" color="auto" />
)}
{agent.version && <Badge label={agent.version} variant="outlined" color="auto" />}
<Badge
label={`${agent.activeRoutes ?? (agent.routeIds?.length ?? 0)}/${agent.totalRoutes ?? (agent.routeIds?.length ?? 0)} routes`}
@@ -324,7 +331,12 @@ export default function AgentInstance() {
</span>
</div>
{heapSeries ? (
<AreaChart series={heapSeries} height={160} yLabel="MB" />
<AreaChart
series={heapSeries}
height={160}
yLabel="MB"
threshold={heapMax != null ? { value: heapMax / (1024 * 1024), label: 'Max Heap' } : undefined}
/>
) : (
<EmptyState title="No data" description="No heap metrics available" />
)}
@@ -352,7 +364,7 @@ export default function AgentInstance() {
</span>
</div>
{errorSeries ? (
<LineChart series={errorSeries} height={160} yLabel="err/h" />
<LineChart series={errorSeries} height={160} yLabel="%" />
) : (
<EmptyState title="No data" description="No error data in range" />
)}

View File

@@ -14,6 +14,11 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
pointer-events: none;
}
.chartGrid > * {
pointer-events: auto;
}
.chartRow {