feat: combine process diagram and processor table into toggled card
All checks were successful
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 1m25s
CI / docker (push) Successful in 1m9s
CI / deploy-feature (push) Has been skipped
CI / deploy (push) Successful in 40s

Dashboard L3 now shows a single Processor Metrics card with
Diagram/Table toggle buttons. The diagram shows native tooltips on
hover with full processor metrics (avg, p99, invocations, error rate,
% time).

Also fixes:
- Chart x-axis uses actual timestamps instead of bucket indices
- formatDurationShort uses locale formatting with max 3 decimals

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-12 21:40:43 +02:00
parent 66248f6b1c
commit 98ce7c2204
4 changed files with 60 additions and 28 deletions

View File

@@ -102,6 +102,18 @@ export function DiagramNode({
style={{ cursor: 'pointer' }}
opacity={isSkipped ? 0.35 : undefined}
>
{/* Processor metrics tooltip */}
{heatmapEntry && (
<title>{[
`${node.id}${heatmapEntry.processorType ? ` (${heatmapEntry.processorType})` : ''}`,
`Avg: ${heatmapEntry.avgDurationMs.toLocaleString(undefined, { maximumFractionDigits: 3 })}ms`,
`P99: ${heatmapEntry.p99DurationMs.toLocaleString(undefined, { maximumFractionDigits: 3 })}ms`,
`Time: ${heatmapEntry.pctOfRoute.toFixed(1)}%`,
heatmapEntry.totalCount != null ? `Invocations: ${heatmapEntry.totalCount.toLocaleString()}` : '',
heatmapEntry.errorRate != null ? `Errors: ${(heatmapEntry.errorRate * 100).toFixed(2)}%` : '',
].filter(Boolean).join('\n')}</title>
)}
{/* Selection ring */}
{isSelected && (
<rect

View File

@@ -21,6 +21,10 @@ export interface LatencyHeatmapEntry {
p99DurationMs: number;
/** Percentage of total route time this processor consumes (0-100) */
pctOfRoute: number;
/** Additional fields for diagram tooltip (optional — populated by dashboard) */
processorType?: string;
totalCount?: number;
errorRate?: number;
}
export interface ProcessDiagramProps {