From d32bde58e25f70e7ea378068b66011c421c372c7 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:26:01 +0100
Subject: [PATCH] fix(ui): correlated exchange click updates local state
 instead of navigating

---
 ui/src/pages/Exchanges/ExchangeHeader.tsx |  7 ++++---
 ui/src/pages/Exchanges/ExchangesPage.tsx  | 10 ++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/Exchanges/ExchangeHeader.tsx b/ui/src/pages/Exchanges/ExchangeHeader.tsx
index 3811ceff..df809d7d 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -9,6 +9,7 @@ import styles from './ExchangeHeader.module.css';
 
 interface ExchangeHeaderProps {
   detail: ExecutionDetail;
+  onCorrelatedSelect?: (executionId: string, applicationName: string, routeId: string) => void;
 }
 
 type StatusVariant = 'success' | 'error' | 'running' | 'warning';
@@ -37,7 +38,7 @@ function formatDuration(ms: number): string {
   return `${ms}ms`;
 }
 
-export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
+export function ExchangeHeader({ detail, onCorrelatedSelect }: ExchangeHeaderProps) {
   const navigate = useNavigate();
   const { data: chainResult } = useCorrelationChain(detail.correlationId ?? null);
   const chain = chainResult?.data;
@@ -106,8 +107,8 @@ export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
                 <button
                   className={`${styles.chainNode} ${statusCls} ${isCurrent ? styles.chainNodeCurrent : ''}`}
                   onClick={() => {
-                    if (!isCurrent) {
-                      navigate(`/exchanges/${ce.applicationName ?? detail.applicationName}/${ce.routeId}/${ce.executionId}`);
+                    if (!isCurrent && onCorrelatedSelect) {
+                      onCorrelatedSelect(ce.executionId, ce.applicationName ?? detail.applicationName, ce.routeId);
                     }
                   }}
                   title={`${ce.executionId}\n${ce.routeId} \u2014 ${formatDuration(ce.durationMs)}`}
diff --git a/ui/src/pages/Exchanges/ExchangesPage.tsx b/ui/src/pages/Exchanges/ExchangesPage.tsx
index b3baea25..e58f1597 100644
--- a/ui/src/pages/Exchanges/ExchangesPage.tsx
+++ b/ui/src/pages/Exchanges/ExchangesPage.tsx
@@ -22,6 +22,10 @@ export default function ExchangesPage() {
     setSelected(exchange);
   }, []);
 
+  const handleCorrelatedSelect = useCallback((executionId: string, applicationName: string, routeId: string) => {
+    setSelected({ executionId, applicationName, routeId });
+  }, []);
+
   const handleSplitterDown = useCallback((e: React.PointerEvent) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const container = containerRef.current;
@@ -57,6 +61,7 @@ export default function ExchangesPage() {
           appId={selected.applicationName}
           routeId={selected.routeId}
           exchangeId={selected.executionId}
+          onCorrelatedSelect={handleCorrelatedSelect}
         />
       </div>
     </div>
@@ -69,9 +74,10 @@ interface DiagramPanelProps {
   appId: string;
   routeId: string;
   exchangeId: string;
+  onCorrelatedSelect: (executionId: string, applicationName: string, routeId: string) => void;
 }
 
-function DiagramPanel({ appId, routeId, exchangeId }: DiagramPanelProps) {
+function DiagramPanel({ appId, routeId, exchangeId, onCorrelatedSelect }: DiagramPanelProps) {
   const navigate = useNavigate();
   const { timeRange } = useGlobalFilters();
   const timeFrom = timeRange.start.toISOString();
@@ -101,7 +107,7 @@ function DiagramPanel({ appId, routeId, exchangeId }: DiagramPanelProps) {
   if (detail) {
     return (
       <>
-        <ExchangeHeader detail={detail} />
+        <ExchangeHeader detail={detail} onCorrelatedSelect={onCorrelatedSelect} />
         <ExecutionDiagram
           executionId={exchangeId}
           executionDetail={detail}