cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): restore proper correlation chain styling with StatusDot, route names, colored borders
Some checks failed
CI / cleanup-branch (push) Has been skipped
Details
CI / docker (push) Has been cancelled
Details
CI / deploy (push) Has been cancelled
Details
CI / deploy-feature (push) Has been cancelled
Details
CI / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hsiegeln
2026-03-28 14:49:45 +01:00
parent 6b06e7f86b
commit 1ca4cac396
2 changed files with 120 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
ui/src/pages/Exchanges/ExchangeHeader.module.css Normal file
View File

@@ -0,0 +1,93 @@
.header {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
border-bottom: 1px solid var(--border);
background: var(--surface);
font-size: 0.8125rem;
}
.summary {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.duration {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.75rem;
}
/* ── Correlation chain ────────────────────────────────────────────────────── */
.chain {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid var(--border-subtle);
flex-wrap: wrap;
}
.chainLabel {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-right: 4px;
}
.chainNode {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
font-size: 11px;
font-family: var(--font-mono);
cursor: pointer;
background: var(--bg-surface);
color: var(--text-secondary);
transition: all 0.12s;
}
.chainNode:hover {
border-color: var(--text-faint);
background: var(--bg-hover);
}
.chainNodeCurrent {
background: var(--amber-bg);
border-color: var(--amber-light);
color: var(--amber-deep);
font-weight: 600;
}
.chainNodeSuccess {
border-left: 3px solid var(--success);
}
.chainNodeError {
border-left: 3px solid var(--error);
}
.chainNodeRunning {
border-left: 3px solid var(--running);
}
.chainNodeWarning {
border-left: 3px solid var(--warning);
}
.chainMore {
color: var(--text-muted);
font-size: 11px;
font-style: italic;
}

69
ui/src/pages/Exchanges/ExchangeHeader.tsx
View File

@@ -1,6 +1,7 @@
import { StatusDot, MonoText, Badge } from '@cameleer/design-system';
import { useCorrelationChain } from '../../api/queries/correlation';
import type { ExecutionDetail } from '../../components/ExecutionDiagram/types';
import styles from './ExchangeHeader.module.css';
interface ExchangeHeaderProps {
detail: ExecutionDetail;
@@ -8,7 +9,6 @@ interface ExchangeHeaderProps {
}
type StatusVariant = 'success' | 'error' | 'running' | 'warning';
type BadgeColor = 'success' | 'error' | 'running' | 'warning';
function statusVariant(s: string): StatusVariant {
switch (s) {
@@ -19,15 +19,6 @@ function statusVariant(s: string): StatusVariant {
}
}
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`;
@@ -40,44 +31,38 @@ export function ExchangeHeader({ detail, onExchangeClick }: ExchangeHeaderProps)
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' }}>
<div className={styles.header}>
<div className={styles.summary}>
<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)} />
<Badge label={detail.status === 'COMPLETED' ? 'OK' : detail.status} color={statusVariant(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>
<span className={styles.duration}>{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 className={styles.chain}>
<span className={styles.chainLabel}>Correlated Exchanges</span>
{chain.map((ce: any) => {
const isCurrent = ce.executionId === detail.executionId;
const variant = statusVariant(ce.status);
const statusCls =
variant === 'success' ? styles.chainNodeSuccess
: variant === 'error' ? styles.chainNodeError
: variant === 'running' ? styles.chainNodeRunning
: styles.chainNodeWarning;
return (
<button
key={ce.executionId}
className={`${styles.chainNode} ${statusCls} ${isCurrent ? styles.chainNodeCurrent : ''}`}
onClick={() => { if (!isCurrent) onExchangeClick?.(ce.executionId); }}
title={`${ce.executionId} \u2014 ${ce.routeId}`}
>
<StatusDot variant={variant} />
<span>{ce.routeId}</span>
</button>
);
})}
</div>
)}
</div>