feat(fleet): interactive topology with ReactFlow hub-and-spoke layout (#713)

Replace the static SVG fleet topology with a ReactFlow canvas laid out
via dagre. Each node renders as a rack card with status pill, type
badge, CPU/MEM/DISK bars, and stack/running counts. Pan, zoom, drag,
and minimap are enabled; user-dragged positions persist across the
30-second poll so live metric updates no longer reset layout.
This commit is contained in:
Anso
2026-04-20 16:16:02 -04:00
committed by GitHub
parent 6f132b7ffe
commit d95e154aeb
5 changed files with 303 additions and 159 deletions
+3
View File
@@ -993,6 +993,9 @@ export function FleetView({ onNavigateToNode }: FleetViewProps) {
status: n.status,
cpuPercent: getNodeCpu(n),
memPercent: getNodeMem(n),
diskPercent: getNodeDisk(n),
stackCount: n.stacks?.length ?? 0,
runningCount: n.stats?.active ?? 0,
critical: n.status === 'online' && isCritical(n),
})), [processedNodes]);