feat: show replay marker on correlated chain entries
Some checks failed
Some checks failed
Exchanges with a _replay attribute now display a small amber RotateCcw icon between the status dot and route name in the correlation chain. Tooltip also indicates (replay). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -185,6 +185,11 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.replayIcon {
|
||||||
|
color: var(--amber);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.chainDuration {
|
.chainDuration {
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { useNavigate } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import { GitBranch, Server } from 'lucide-react';
|
import { GitBranch, Server, RotateCcw } from 'lucide-react';
|
||||||
import { StatusDot, MonoText, Badge } from '@cameleer/design-system';
|
import { StatusDot, MonoText, Badge } from '@cameleer/design-system';
|
||||||
import { useCorrelationChain } from '../../api/queries/correlation';
|
import { useCorrelationChain } from '../../api/queries/correlation';
|
||||||
import { useAgents } from '../../api/queries/agents';
|
import { useAgents } from '../../api/queries/agents';
|
||||||
@@ -122,6 +122,7 @@ export function ExchangeHeader({ detail, onCorrelatedSelect, onClearSelection }:
|
|||||||
{showChain ? chain.map((ce: any, i: number) => {
|
{showChain ? chain.map((ce: any, i: number) => {
|
||||||
const isCurrent = ce.executionId === detail.executionId;
|
const isCurrent = ce.executionId === detail.executionId;
|
||||||
const variant = statusVariant(ce.status);
|
const variant = statusVariant(ce.status);
|
||||||
|
const isReplay = ce.attributes?._replay != null;
|
||||||
const statusCls =
|
const statusCls =
|
||||||
variant === 'success' ? styles.chainNodeSuccess
|
variant === 'success' ? styles.chainNodeSuccess
|
||||||
: variant === 'error' ? styles.chainNodeError
|
: variant === 'error' ? styles.chainNodeError
|
||||||
@@ -137,9 +138,10 @@ export function ExchangeHeader({ detail, onCorrelatedSelect, onClearSelection }:
|
|||||||
onCorrelatedSelect(ce.executionId, ce.applicationName ?? detail.applicationName, ce.routeId);
|
onCorrelatedSelect(ce.executionId, ce.applicationName ?? detail.applicationName, ce.routeId);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
title={`${ce.executionId}\n${ce.routeId} \u2014 ${formatDuration(ce.durationMs)}`}
|
title={`${ce.executionId}\n${ce.routeId} \u2014 ${formatDuration(ce.durationMs)}${isReplay ? '\n(replay)' : ''}`}
|
||||||
>
|
>
|
||||||
<StatusDot variant={variant} />
|
<StatusDot variant={variant} />
|
||||||
|
{isReplay && <RotateCcw size={9} className={styles.replayIcon} />}
|
||||||
<span className={styles.chainRoute}>{ce.routeId}</span>
|
<span className={styles.chainRoute}>{ce.routeId}</span>
|
||||||
<span className={styles.chainDuration}>{formatDuration(ce.durationMs)}</span>
|
<span className={styles.chainDuration}>{formatDuration(ce.durationMs)}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user