86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
|
import { StatusDot, MonoText, Badge } from '@cameleer/design-system';
|
||
|
|
import { useCorrelationChain } from '../../api/queries/correlation';
|
||
|
|
import type { ExecutionDetail } from '../../components/ExecutionDiagram/types';
|
||
|
|
|
||
|
|
interface ExchangeHeaderProps {
|
||
|
|
detail: ExecutionDetail;
|
||
|
|
onExchangeClick?: (executionId: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
type StatusVariant = 'success' | 'error' | 'running' | 'warning';
|
||
|
|
type BadgeColor = 'success' | 'error' | 'running' | 'warning';
|
||
|
|
|
||
|
|
function statusVariant(s: string): StatusVariant {
|
||
|
|
switch (s) {
|
||
|
|
case 'COMPLETED': return 'success';
|
||
|
|
case 'FAILED': return 'error';
|
||
|
|
case 'RUNNING': return 'running';
|
||
|
|
default: return 'warning';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function badgeColor(s: string): BadgeColor {
|
||
|
|
switch (s) {
|
||
|
|
case 'COMPLETED': return 'success';
|
||
|
|
case 'FAILED': return 'error';
|
||
|
|
case 'RUNNING': return 'running';
|
||
|
|
default: return 'warning';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatDuration(ms: number): string {
|
||
|
|
if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`;
|
||
|
|
if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
|
||
|
|
return `${ms}ms`;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ExchangeHeader({ detail, onExchangeClick }: ExchangeHeaderProps) {
|
||
|
|
const { data: chainResult } = useCorrelationChain(detail.correlationId ?? null);
|
||
|
|
const chain = chainResult?.data;
|
||
|
|
const showChain = chain && chain.length > 1;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{
|
||
|
|
display: 'flex', flexDirection: 'column', gap: '0.5rem',
|
||
|
|
padding: '0.75rem', borderBottom: '1px solid var(--border)',
|
||
|
|
background: 'var(--surface)', fontSize: '0.8125rem',
|
||
|
|
}}>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||
|
|
<StatusDot variant={statusVariant(detail.status)} />
|
||
|
|
<MonoText size="xs">{detail.exchangeId || detail.executionId}</MonoText>
|
||
|
|
<Badge label={detail.status === 'COMPLETED' ? 'OK' : detail.status} color={badgeColor(detail.status)} />
|
||
|
|
<span style={{ color: 'var(--text-muted)' }}>{detail.routeId}</span>
|
||
|
|
<span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
|
||
|
|
{formatDuration(detail.durationMs)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{showChain && (
|
||
|
|
<div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap', alignItems: 'center' }}>
|
||
|
|
<span style={{ fontSize: '0.6875rem', color: 'var(--text-muted)', marginRight: '0.25rem' }}>
|
||
|
|
Correlated:
|
||
|
|
</span>
|
||
|
|
{chain.map((e) => (
|
||
|
|
<button
|
||
|
|
key={e.executionId}
|
||
|
|
onClick={() => onExchangeClick?.(e.executionId)}
|
||
|
|
style={{
|
||
|
|
background: e.executionId === detail.executionId ? 'var(--surface-active)' : 'var(--surface)',
|
||
|
|
border: '1px solid var(--border)',
|
||
|
|
borderRadius: '4px',
|
||
|
|
padding: '0.125rem 0.375rem',
|
||
|
|
cursor: 'pointer',
|
||
|
|
fontSize: '0.6875rem',
|
||
|
|
fontFamily: 'var(--font-mono)',
|
||
|
|
color: e.status === 'FAILED' ? 'var(--error)' : 'var(--text-secondary)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{e.executionId.slice(0, 8)}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|