diff --git a/ui/src/pages/Exchanges/ExchangesPage.tsx b/ui/src/pages/Exchanges/ExchangesPage.tsx index 3a09af0b..e7c092b0 100644 --- a/ui/src/pages/Exchanges/ExchangesPage.tsx +++ b/ui/src/pages/Exchanges/ExchangesPage.tsx @@ -1,9 +1,10 @@ import { useState, useMemo, useCallback, useRef } from 'react'; -import { useParams } from 'react-router'; +import { useParams, useNavigate } from 'react-router'; import { useGlobalFilters } from '@cameleer/design-system'; import { useExecutionDetail } from '../../api/queries/executions'; import { useDiagramByRoute } from '../../api/queries/diagrams'; import { useRouteCatalog } from '../../api/queries/catalog'; +import type { NodeAction } from '../../components/ProcessDiagram/types'; import { ExchangeHeader } from './ExchangeHeader'; import { ExecutionDiagram } from '../../components/ExecutionDiagram/ExecutionDiagram'; import { ProcessDiagram } from '../../components/ProcessDiagram'; @@ -78,6 +79,7 @@ interface DiagramPanelProps { } function DiagramPanel({ appId, routeId, exchangeId }: DiagramPanelProps) { + const navigate = useNavigate(); const { timeRange } = useGlobalFilters(); const timeFrom = timeRange.start.toISOString(); const timeTo = timeRange.end.toISOString(); @@ -98,6 +100,12 @@ function DiagramPanel({ appId, routeId, exchangeId }: DiagramPanelProps) { return ids; }, [catalog]); + const handleNodeAction = useCallback((nodeId: string, action: NodeAction) => { + if (action === 'configure-tap') { + navigate(`/admin/appconfig?app=${encodeURIComponent(appId)}&processor=${encodeURIComponent(nodeId)}`); + } + }, [appId, navigate]); + if (exchangeId && detail) { return ( <> @@ -106,6 +114,7 @@ function DiagramPanel({ appId, routeId, exchangeId }: DiagramPanelProps) { executionId={exchangeId} executionDetail={detail} knownRouteIds={knownRouteIds} + onNodeAction={handleNodeAction} /> ); @@ -118,6 +127,7 @@ function DiagramPanel({ appId, routeId, exchangeId }: DiagramPanelProps) { routeId={routeId} diagramLayout={diagramQuery.data} knownRouteIds={knownRouteIds} + onNodeAction={handleNodeAction} /> ); }