Route Flow
- {routeNodes.length > 0 ? (
-
+ {routeFlows.length > 0 ? (
+
) : (
No diagram available
)}
diff --git a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
index 059d9ba6..bf5cfe58 100644
--- a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
+++ b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
@@ -8,7 +8,7 @@ import type { ProcessorStep, RouteNode, NodeBadge } from '@cameleer/design-syste
import { useExecutionDetail, useProcessorSnapshot } from '../../api/queries/executions'
import { useCorrelationChain } from '../../api/queries/correlation'
import { useDiagramLayout } from '../../api/queries/diagrams'
-import { mapDiagramToRouteNodes } from '../../utils/diagram-mapping'
+import { mapDiagramToRouteNodes, toFlowSegments } from '../../utils/diagram-mapping'
import { useTracingStore } from '../../stores/tracing-store'
import { useApplicationConfig, useUpdateApplicationConfig } from '../../api/queries/commands'
import styles from './ExchangeDetail.module.css'
@@ -128,32 +128,36 @@ export default function ExchangeDetail() {
const inputBody = snapshot?.inputBody ?? null
const outputBody = snapshot?.outputBody ?? null
- // Build RouteFlow nodes from diagram + execution data
- const routeNodes: RouteNode[] = useMemo(() => {
+ // Build RouteFlow nodes from diagram + execution data, split into flow segments
+ const { routeFlows, flowIndexMap } = useMemo(() => {
+ let nodes: RouteNode[]
if (diagram?.nodes) {
// Flatten processors to build diagramNodeId → processorId lookup
const flatProcs: Array<{ diagramNodeId?: string; processorId?: string }> = []
- function flattenProcs(nodes: any[]) {
- for (const n of nodes) { flatProcs.push(n); if (n.children) flattenProcs(n.children) }
+ function flattenProcs(list: any[]) {
+ for (const n of list) { flatProcs.push(n); if (n.children) flattenProcs(n.children) }
}
flattenProcs(procList)
const pidLookup = new Map(flatProcs
.filter(p => p.diagramNodeId && p.processorId)
.map(p => [p.diagramNodeId!, p.processorId!]))
- return mapDiagramToRouteNodes(diagram.nodes, procList).map((node, i) => ({
+ nodes = mapDiagramToRouteNodes(diagram.nodes, procList).map((node, i) => ({
...node,
badges: badgesFor(pidLookup.get(diagram.nodes[i]?.id ?? '') ?? diagram.nodes[i]?.id ?? ''),
}))
+ } else {
+ // Fallback: build from processor list
+ nodes = processors.map((p) => ({
+ name: p.name,
+ type: 'process' as RouteNode['type'],
+ durationMs: p.durationMs,
+ status: p.status,
+ badges: badgesFor(p.name),
+ }))
}
- // Fallback: build from processor list
- return processors.map((p) => ({
- name: p.name,
- type: 'process' as RouteNode['type'],
- durationMs: p.durationMs,
- status: p.status,
- badges: badgesFor(p.name),
- }))
+ const { flows, indexMap } = toFlowSegments(nodes)
+ return { routeFlows: flows, flowIndexMap: indexMap }
}, [diagram, processors, procList, tracedMap])
// ProcessorId lookup: timeline index → processorId
@@ -388,13 +392,14 @@ export default function ExchangeDetail() {
No processor data available
)
) : (
- routeNodes.length > 0 ? (
+ routeFlows.length > 0 ? (
setSelectedProcessorIndex(index)}
- selectedIndex={activeIndex}
+ flows={routeFlows}
+ onNodeClick={(_node, index) => setSelectedProcessorIndex(flowIndexMap[index] ?? index)}
+ selectedIndex={flowIndexMap.indexOf(activeIndex)}
getActions={(_node, index) => {
- const pid = flowProcessorIds[index]
+ const origIdx = flowIndexMap[index] ?? index
+ const pid = flowProcessorIds[origIdx]
if (!pid || !detail?.applicationName) return []
return [{
label: tracingStore.isTraced(app, pid) ? 'Disable Tracing' : 'Enable Tracing',
diff --git a/ui/src/pages/Routes/RouteDetail.tsx b/ui/src/pages/Routes/RouteDetail.tsx
index d1205d3a..5dcb116c 100644
--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -21,7 +21,7 @@ import { useDiagramByRoute } from '../../api/queries/diagrams';
import { useProcessorMetrics } from '../../api/queries/processor-metrics';
import { useStatsTimeseries, useSearchExecutions, useExecutionStats } from '../../api/queries/executions';
import type { ExecutionSummary, AppCatalogEntry, RouteSummary } from '../../api/types';
-import { mapDiagramToRouteNodes } from '../../utils/diagram-mapping';
+import { mapDiagramToRouteNodes, toFlowSegments } from '../../utils/diagram-mapping';
import styles from './RouteDetail.module.css';
// ── Row types ────────────────────────────────────────────────────────────────
@@ -321,9 +321,9 @@ export default function RouteDetail() {
}, [health]);
// Route flow from diagram
- const diagramNodes = useMemo(() => {
+ const diagramFlows = useMemo(() => {
if (!diagram?.nodes) return [];
- return mapDiagramToRouteNodes(diagram.nodes, []);
+ return toFlowSegments(mapDiagramToRouteNodes(diagram.nodes, [])).flows;
}, [diagram]);
// Processor table rows
@@ -458,8 +458,8 @@ export default function RouteDetail() {
Route Diagram
- {diagramNodes.length > 0 ? (
-
+ {diagramFlows.length > 0 ? (
+
) : (
No diagram available for this route.
@@ -497,12 +497,12 @@ export default function RouteDetail() {
{/* Route Flow section */}
- {diagramNodes.length > 0 && (
+ {diagramFlows.length > 0 && (
)}
diff --git a/ui/src/utils/diagram-mapping.ts b/ui/src/utils/diagram-mapping.ts
index 8f6146cb..b47b7292 100644
--- a/ui/src/utils/diagram-mapping.ts
+++ b/ui/src/utils/diagram-mapping.ts
@@ -1,4 +1,4 @@
-import type { RouteNode } from '@cameleer/design-system';
+import type { RouteNode, FlowSegment } from '@cameleer/design-system';
// Map NodeType strings to RouteNode types
function mapNodeType(type: string): RouteNode['type'] {
@@ -53,3 +53,29 @@ export function mapDiagramToRouteNodes(
};
});
}
+
+/**
+ * Splits a flat RouteNode[] into FlowSegment[] (main route + error handlers).
+ * Returns the segments and an index map: indexMap[newFlatIndex] = originalIndex.
+ */
+export function toFlowSegments(nodes: RouteNode[]): { flows: FlowSegment[]; indexMap: number[] } {
+ const mainIndices: number[] = [];
+ const errorIndices: number[] = [];
+ for (let i = 0; i < nodes.length; i++) {
+ if (nodes[i].type === 'error-handler') {
+ errorIndices.push(i);
+ } else {
+ mainIndices.push(i);
+ }
+ }
+
+ const flows: FlowSegment[] = [
+ { label: 'Main Route', nodes: mainIndices.map(i => nodes[i]) },
+ ];
+ if (errorIndices.length > 0) {
+ flows.push({ label: 'Error Handler', nodes: errorIndices.map(i => nodes[i]), variant: 'error' });
+ }
+
+ const indexMap = [...mainIndices, ...errorIndices];
+ return { flows, indexMap };
+}