feat: redesign exchange detail page with interactive processor inspector
All checks were successful
Build & Publish / publish (push) Successful in 44s
All checks were successful
Build & Publish / publish (push) Successful in 44s
- Rewrite ExchangeDetail with split Message IN/OUT panels that update on processor click, error panel for failed processors, and Timeline/Flow toggle for the processor visualization - Add correlation chain in header with status-colored clickable nodes sorted by start time, labeled "Correlated Exchanges" - Add Exchange ID column and inspect button (↗) to Dashboard table - Add "Open full details" link in the exchange slide-in panel - Add selectedIndex prop to ProcessorTimeline and RouteFlow for highlighting the active processor - Add onNodeClick + selectedIndex to RouteFlow for interactive use - Add correlationGroup field to exchange mock data - Fix sidebar section toggle indentation alignment Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -89,6 +89,13 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.selectedRow {
|
||||
background: var(--amber-bg);
|
||||
border-left: 3px solid var(--amber);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 2px 0 2px 4px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
|
||||
@@ -11,7 +11,8 @@ export interface ProcessorStep {
|
||||
interface ProcessorTimelineProps {
|
||||
processors: ProcessorStep[]
|
||||
totalMs: number
|
||||
onProcessorClick?: (processor: ProcessorStep) => void
|
||||
onProcessorClick?: (processor: ProcessorStep, index: number) => void
|
||||
selectedIndex?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
@@ -24,6 +25,7 @@ export function ProcessorTimeline({
|
||||
processors,
|
||||
totalMs,
|
||||
onProcessorClick,
|
||||
selectedIndex,
|
||||
className,
|
||||
}: ProcessorTimelineProps) {
|
||||
const safeTotal = totalMs || 1
|
||||
@@ -49,17 +51,19 @@ export function ProcessorTimeline({
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
|
||||
const isSelected = selectedIndex === i
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`${styles.row} ${onProcessorClick ? styles.clickable : ''}`}
|
||||
onClick={() => onProcessorClick?.(proc)}
|
||||
className={`${styles.row} ${onProcessorClick ? styles.clickable : ''} ${isSelected ? styles.selectedRow : ''}`}
|
||||
onClick={() => onProcessorClick?.(proc, i)}
|
||||
role={onProcessorClick ? 'button' : undefined}
|
||||
tabIndex={onProcessorClick ? 0 : undefined}
|
||||
onKeyDown={(e) => {
|
||||
if (onProcessorClick && (e.key === 'Enter' || e.key === ' ')) {
|
||||
e.preventDefault()
|
||||
onProcessorClick(proc)
|
||||
onProcessorClick(proc, i)
|
||||
}
|
||||
}}
|
||||
aria-label={`${proc.name}: ${formatDuration(proc.durationMs)} (${proc.status})`}
|
||||
|
||||
@@ -176,6 +176,22 @@
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
/* Selected node */
|
||||
.nodeSelected {
|
||||
box-shadow: 0 0 0 2px var(--amber);
|
||||
border-color: var(--amber);
|
||||
}
|
||||
|
||||
/* Clickable node */
|
||||
.nodeClickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nodeClickable:focus-visible {
|
||||
outline: 2px solid var(--amber);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Bottleneck badge */
|
||||
.bottleneckBadge {
|
||||
position: absolute;
|
||||
|
||||
@@ -10,6 +10,8 @@ export interface RouteNode {
|
||||
|
||||
interface RouteFlowProps {
|
||||
nodes: RouteNode[]
|
||||
onNodeClick?: (node: RouteNode, index: number) => void
|
||||
selectedIndex?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
@@ -50,37 +52,60 @@ function nodeStatusClass(node: RouteNode): string {
|
||||
return styles.nodeHealthy
|
||||
}
|
||||
|
||||
export function RouteFlow({ nodes, className }: RouteFlowProps) {
|
||||
export function RouteFlow({ nodes, onNodeClick, selectedIndex, className }: RouteFlowProps) {
|
||||
const mainNodes = nodes.filter((n) => n.type !== 'error-handler')
|
||||
const errorHandlers = nodes.filter((n) => n.type === 'error-handler')
|
||||
|
||||
// Map from mainNodes index back to original nodes index
|
||||
const mainNodeOriginalIndices = nodes.reduce<number[]>((acc, n, idx) => {
|
||||
if (n.type !== 'error-handler') acc.push(idx)
|
||||
return acc
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={`${styles.wrapper} ${className ?? ''}`}>
|
||||
{mainNodes.map((node, i) => (
|
||||
<div key={i} style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
{i > 0 && (
|
||||
<div className={styles.connector}>
|
||||
<div className={styles.connectorLine} />
|
||||
<div className={styles.connectorArrow} />
|
||||
</div>
|
||||
)}
|
||||
<div className={`${styles.node} ${nodeStatusClass(node)}`}>
|
||||
{node.isBottleneck && <span className={styles.bottleneckBadge}>BOTTLENECK</span>}
|
||||
<div className={`${styles.icon} ${ICON_CLASSES[node.type] ?? styles.iconTo}`}>
|
||||
{TYPE_ICONS[node.type] ?? '\u25A2'}
|
||||
</div>
|
||||
<div className={styles.info}>
|
||||
<div className={styles.type}>{node.type}</div>
|
||||
<div className={styles.label} title={node.name}>{node.name}</div>
|
||||
</div>
|
||||
<div className={styles.stats}>
|
||||
<div className={`${styles.duration} ${durationClass(node.durationMs, node.status)}`}>
|
||||
{formatDuration(node.durationMs)}
|
||||
{mainNodes.map((node, i) => {
|
||||
const originalIndex = mainNodeOriginalIndices[i]
|
||||
const isSelected = selectedIndex === originalIndex
|
||||
const isClickable = !!onNodeClick
|
||||
|
||||
return (
|
||||
<div key={i} style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
{i > 0 && (
|
||||
<div className={styles.connector}>
|
||||
<div className={styles.connectorLine} />
|
||||
<div className={styles.connectorArrow} />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`${styles.node} ${nodeStatusClass(node)} ${isSelected ? styles.nodeSelected : ''} ${isClickable ? styles.nodeClickable : ''}`}
|
||||
onClick={() => onNodeClick?.(node, originalIndex)}
|
||||
role={isClickable ? 'button' : undefined}
|
||||
tabIndex={isClickable ? 0 : undefined}
|
||||
onKeyDown={(e) => {
|
||||
if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
|
||||
e.preventDefault()
|
||||
onNodeClick?.(node, originalIndex)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{node.isBottleneck && <span className={styles.bottleneckBadge}>BOTTLENECK</span>}
|
||||
<div className={`${styles.icon} ${ICON_CLASSES[node.type] ?? styles.iconTo}`}>
|
||||
{TYPE_ICONS[node.type] ?? '\u25A2'}
|
||||
</div>
|
||||
<div className={styles.info}>
|
||||
<div className={styles.type}>{node.type}</div>
|
||||
<div className={styles.label} title={node.name}>{node.name}</div>
|
||||
</div>
|
||||
<div className={styles.stats}>
|
||||
<div className={`${styles.duration} ${durationClass(node.durationMs, node.status)}`}>
|
||||
{formatDuration(node.durationMs)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
|
||||
{errorHandlers.length > 0 && (
|
||||
<div className={styles.errorSection}>
|
||||
|
||||
@@ -214,9 +214,9 @@
|
||||
.treeSectionToggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
padding: 8px 12px 4px;
|
||||
padding: 8px 0 4px;
|
||||
}
|
||||
|
||||
.treeSectionChevronBtn {
|
||||
|
||||
@@ -20,6 +20,7 @@ export interface Exchange {
|
||||
errorMessage?: string
|
||||
errorClass?: string
|
||||
processors: ProcessorData[]
|
||||
correlationGroup?: string
|
||||
}
|
||||
|
||||
export const exchanges: Exchange[] = [
|
||||
@@ -34,6 +35,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T09:12:04'),
|
||||
correlationId: 'cmr-f4a1c82b-9d3e',
|
||||
agent: 'prod-1',
|
||||
correlationGroup: 'order-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:orders)', type: 'consumer', durationMs: 4, status: 'ok', startMs: 0 },
|
||||
{ name: 'unmarshal(json)', type: 'transform', durationMs: 6, status: 'ok', startMs: 4 },
|
||||
@@ -53,6 +55,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T09:11:22'),
|
||||
correlationId: 'cmr-7b2d9f14-c5a8',
|
||||
agent: 'prod-2',
|
||||
correlationGroup: 'payment-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:payments)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
|
||||
{ name: 'unmarshal(json)', type: 'transform', durationMs: 8, status: 'ok', startMs: 5 },
|
||||
@@ -72,6 +75,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T09:13:44'),
|
||||
correlationId: 'cmr-3c8e1a7f-d2b6',
|
||||
agent: 'prod-1',
|
||||
correlationGroup: 'order-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:orders)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
|
||||
{ name: 'enrich(inventory-api)', type: 'enrich', durationMs: 29990, status: 'slow', startMs: 5 },
|
||||
@@ -88,6 +92,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T09:09:47'),
|
||||
correlationId: 'cmr-a9f3b2c1-e4d7',
|
||||
agent: 'prod-3',
|
||||
correlationGroup: 'shipment-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:shipments)', type: 'consumer', durationMs: 6, status: 'ok', startMs: 0 },
|
||||
{ name: 'unmarshal(json)', type: 'transform', durationMs: 8, status: 'ok', startMs: 6 },
|
||||
@@ -106,6 +111,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T09:06:11'),
|
||||
correlationId: 'cmr-9a4f2b71-e8c3',
|
||||
agent: 'prod-2',
|
||||
correlationGroup: 'payment-flow-002',
|
||||
errorMessage: 'org.apache.camel.CamelExecutionException: Payment gateway timeout after 5000ms — POST https://pay.provider.com/v2/charge returned HTTP 504. Retry exhausted (3/3).',
|
||||
errorClass: 'org.apache.camel.CamelExecutionException',
|
||||
processors: [
|
||||
@@ -145,6 +151,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T09:00:15'),
|
||||
correlationId: 'cmr-2e5f8d9a-b4c1',
|
||||
agent: 'prod-3',
|
||||
correlationGroup: 'order-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:orders)', type: 'consumer', durationMs: 3, status: 'ok', startMs: 0 },
|
||||
{ name: 'unmarshal(json)', type: 'transform', durationMs: 5, status: 'ok', startMs: 3 },
|
||||
@@ -164,6 +171,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T08:58:33'),
|
||||
correlationId: 'cmr-d1a3e7f4-c2b8',
|
||||
agent: 'prod-1',
|
||||
correlationGroup: 'payment-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:payments)', type: 'consumer', durationMs: 4, status: 'ok', startMs: 0 },
|
||||
{ name: 'validate(payment-schema)', type: 'process', durationMs: 14, status: 'ok', startMs: 4 },
|
||||
@@ -199,6 +207,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T08:50:41'),
|
||||
correlationId: 'cmr-f3c7a1b9-d5e2',
|
||||
agent: 'prod-1',
|
||||
correlationGroup: 'order-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:orders)', type: 'consumer', durationMs: 3, status: 'ok', startMs: 0 },
|
||||
{ name: 'unmarshal(json)', type: 'transform', durationMs: 6, status: 'ok', startMs: 3 },
|
||||
@@ -218,6 +227,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T08:46:19'),
|
||||
correlationId: 'cmr-a2d8f5c3-b9e1',
|
||||
agent: 'prod-2',
|
||||
correlationGroup: 'payment-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:payments)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
|
||||
{ name: 'validate(payment-schema)', type: 'process', durationMs: 12, status: 'ok', startMs: 5 },
|
||||
@@ -254,6 +264,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T08:31:05'),
|
||||
correlationId: 'cmr-7e9a2c5f-d1b4',
|
||||
agent: 'prod-2',
|
||||
correlationGroup: 'payment-flow-002',
|
||||
errorMessage: 'org.apache.camel.component.http.HttpOperationFailedException: HTTP operation failed invoking https://pay.provider.com/v2/charge with statusCode: 422 — Unprocessable Entity: card declined (insufficient funds)',
|
||||
errorClass: 'org.apache.camel.component.http.HttpOperationFailedException',
|
||||
processors: [
|
||||
@@ -273,6 +284,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T08:22:44'),
|
||||
correlationId: 'cmr-b5c8d2a7-f4e3',
|
||||
agent: 'prod-3',
|
||||
correlationGroup: 'shipment-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:shipments)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
|
||||
{ name: 'unmarshal(json)', type: 'transform', durationMs: 7, status: 'ok', startMs: 5 },
|
||||
@@ -291,6 +303,7 @@ export const exchanges: Exchange[] = [
|
||||
timestamp: new Date('2026-03-18T08:15:19'),
|
||||
correlationId: 'cmr-d9e3f7b1-a6c5',
|
||||
agent: 'prod-4',
|
||||
correlationGroup: 'order-flow-001',
|
||||
processors: [
|
||||
{ name: 'from(jms:orders)', type: 'consumer', durationMs: 4, status: 'ok', startMs: 0 },
|
||||
{ name: 'unmarshal(json)', type: 'transform', durationMs: 7, status: 'ok', startMs: 4 },
|
||||
|
||||
@@ -223,3 +223,43 @@
|
||||
font-family: var(--font-mono);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Inspect exchange icon in table */
|
||||
.inspectLink {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-faint);
|
||||
opacity: 0.75;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
padding: 2px 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
.inspectLink:hover {
|
||||
color: var(--text-primary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Open full details link in panel */
|
||||
.openDetailLink {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--amber);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
font-family: var(--font-body);
|
||||
transition: color 0.1s;
|
||||
}
|
||||
|
||||
.openDetailLink:hover {
|
||||
color: var(--amber-deep);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import styles from './Dashboard.module.css'
|
||||
|
||||
// Layout
|
||||
@@ -68,8 +68,8 @@ function statusLabel(status: Exchange['status']): string {
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Table columns ────────────────────────────────────────────────────────────
|
||||
const COLUMNS: Column<Exchange>[] = [
|
||||
// ─── Table columns (base, without navigate action) ──────────────────────────
|
||||
const BASE_COLUMNS: Column<Exchange>[] = [
|
||||
{
|
||||
key: 'status',
|
||||
header: 'Status',
|
||||
@@ -97,6 +97,14 @@ const COLUMNS: Column<Exchange>[] = [
|
||||
<span className={styles.appName}>{ROUTE_TO_APP.get(row.route) ?? row.routeGroup}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'id',
|
||||
header: 'Exchange ID',
|
||||
sortable: true,
|
||||
render: (_, row) => (
|
||||
<MonoText size="xs">{row.id}</MonoText>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'timestamp',
|
||||
header: 'Started',
|
||||
@@ -145,10 +153,34 @@ const SHORTCUTS = [
|
||||
// ─── Dashboard component ──────────────────────────────────────────────────────
|
||||
export function Dashboard() {
|
||||
const { id: appId, routeId } = useParams<{ id: string; routeId: string }>()
|
||||
const navigate = useNavigate()
|
||||
const [selectedId, setSelectedId] = useState<string | undefined>()
|
||||
const [panelOpen, setPanelOpen] = useState(false)
|
||||
const [selectedExchange, setSelectedExchange] = useState<Exchange | null>(null)
|
||||
|
||||
// Build columns with inspect action as second column
|
||||
const COLUMNS: Column<Exchange>[] = useMemo(() => {
|
||||
const inspectCol: Column<Exchange> = {
|
||||
key: 'correlationId' as keyof Exchange,
|
||||
header: '',
|
||||
width: '36px',
|
||||
render: (_, row) => (
|
||||
<button
|
||||
className={styles.inspectLink}
|
||||
title="Inspect exchange"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
navigate(`/exchanges/${row.id}`)
|
||||
}}
|
||||
>
|
||||
↗
|
||||
</button>
|
||||
),
|
||||
}
|
||||
const [statusCol, ...rest] = BASE_COLUMNS
|
||||
return [statusCol, inspectCol, ...rest]
|
||||
}, [navigate])
|
||||
|
||||
const { isInTimeRange, statusFilters } = useGlobalFilters()
|
||||
|
||||
// Build set of route IDs belonging to the selected app (if any)
|
||||
@@ -232,6 +264,16 @@ export function Dashboard() {
|
||||
onClose={() => setPanelOpen(false)}
|
||||
title={`${selectedExchange.orderId} — ${selectedExchange.route}`}
|
||||
>
|
||||
{/* Link to full detail page */}
|
||||
<div className={styles.panelSection}>
|
||||
<button
|
||||
className={styles.openDetailLink}
|
||||
onClick={() => navigate(`/exchanges/${selectedExchange.id}`)}
|
||||
>
|
||||
Open full details →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Overview */}
|
||||
<div className={styles.panelSection}>
|
||||
<div className={styles.panelSectionTitle}>Overview</div>
|
||||
|
||||
@@ -7,7 +7,9 @@
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
/* Exchange header card */
|
||||
/* ==========================================================================
|
||||
EXCHANGE HEADER CARD
|
||||
========================================================================== */
|
||||
.exchangeHeader {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
@@ -88,17 +90,85 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Section layout */
|
||||
.section {
|
||||
/* ==========================================================================
|
||||
CORRELATION CHAIN
|
||||
========================================================================== */
|
||||
.correlationChain {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
margin-top: 12px;
|
||||
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);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
TIMELINE SECTION
|
||||
========================================================================== */
|
||||
.timelineSection {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
.timelineHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -106,159 +176,255 @@
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
.timelineTitle {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sectionMeta {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Timeline wrapper */
|
||||
.timelineWrap {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* Inspector steps */
|
||||
.inspectorSteps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stepCollapsible {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.stepCollapsible:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.stepTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stepIndex {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
.procCount {
|
||||
font-family: var(--font-mono);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stepOk {
|
||||
background: var(--success-bg);
|
||||
color: var(--success);
|
||||
border: 1px solid var(--success-border);
|
||||
}
|
||||
|
||||
.stepSlow {
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning);
|
||||
border: 1px solid var(--warning-border);
|
||||
}
|
||||
|
||||
.stepFail {
|
||||
background: var(--error-bg);
|
||||
color: var(--error);
|
||||
border: 1px solid var(--error-border);
|
||||
}
|
||||
|
||||
.stepName {
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-primary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stepDuration {
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
padding: 1px 8px;
|
||||
border-radius: 10px;
|
||||
background: var(--bg-inset);
|
||||
color: var(--text-muted);
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Step body (two-column layout) */
|
||||
.stepBody {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 12px;
|
||||
.timelineToggle {
|
||||
display: inline-flex;
|
||||
gap: 0;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toggleBtn {
|
||||
padding: 4px 12px;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.12s;
|
||||
}
|
||||
|
||||
.toggleBtn:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.toggleBtnActive {
|
||||
background: var(--amber);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toggleBtnActive:hover {
|
||||
background: var(--amber-deep);
|
||||
}
|
||||
|
||||
.timelineBody {
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
|
||||
.stepPanel {
|
||||
/* ==========================================================================
|
||||
DETAIL SPLIT (IN / OUT panels)
|
||||
========================================================================== */
|
||||
.detailSplit {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detailPanel {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detailPanelError {
|
||||
border-color: var(--error-border);
|
||||
}
|
||||
|
||||
.panelHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
background: var(--bg-raised);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detailPanelError .panelHeader {
|
||||
background: var(--error-bg);
|
||||
border-bottom-color: var(--error-border);
|
||||
}
|
||||
|
||||
.panelTitle {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stepPanelLabel {
|
||||
.arrowIn {
|
||||
color: var(--success);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.arrowOut {
|
||||
color: var(--running);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.arrowError {
|
||||
color: var(--error);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.panelTag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-inset);
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.panelBody {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Headers section */
|
||||
.headersSection {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.headerList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.headerKvRow {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.headerKvRow:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.headerKey {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.headerValue {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Body section */
|
||||
.bodySection {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.sectionLabel {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
flex: 1;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Error section */
|
||||
.errorSection {
|
||||
background: var(--error-bg);
|
||||
border: 1px solid var(--error-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.errorBody {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.errorClass {
|
||||
.count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--error);
|
||||
font-size: 10px;
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-inset);
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* Error panel styles */
|
||||
.errorBadgeRow {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
.errorHttpBadge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
background: var(--error-bg);
|
||||
color: var(--error);
|
||||
border: 1px solid var(--error-border);
|
||||
}
|
||||
|
||||
.errorMessageBox {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--error-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--error-bg);
|
||||
padding: 10px 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--error-border);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.errorHint {
|
||||
.errorDetailGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 4px 12px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.errorDetailLabel {
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.errorDetailValue {
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import styles from './ExchangeDetail.module.css'
|
||||
|
||||
@@ -10,12 +10,13 @@ import { TopBar } from '../../design-system/layout/TopBar/TopBar'
|
||||
// Composites
|
||||
import { ProcessorTimeline } from '../../design-system/composites/ProcessorTimeline/ProcessorTimeline'
|
||||
import type { ProcessorStep } from '../../design-system/composites/ProcessorTimeline/ProcessorTimeline'
|
||||
import { RouteFlow } from '../../design-system/composites/RouteFlow/RouteFlow'
|
||||
import type { RouteNode } from '../../design-system/composites/RouteFlow/RouteFlow'
|
||||
|
||||
// Primitives
|
||||
import { Badge } from '../../design-system/primitives/Badge/Badge'
|
||||
import { StatusDot } from '../../design-system/primitives/StatusDot/StatusDot'
|
||||
import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
|
||||
import { Collapsible } from '../../design-system/primitives/Collapsible/Collapsible'
|
||||
import { CodeBlock } from '../../design-system/primitives/CodeBlock/CodeBlock'
|
||||
import { InfoCallout } from '../../design-system/primitives/InfoCallout/InfoCallout'
|
||||
|
||||
@@ -50,8 +51,7 @@ function statusToLabel(status: 'completed' | 'failed' | 'running' | 'warning'):
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Exchange body mock generator ────────────────────────────────────────────
|
||||
// For each processor step, generate a plausible exchange body snapshot
|
||||
// ─── Exchange body mock generators ──────────────────────────────────────────
|
||||
function generateExchangeSnapshot(
|
||||
step: ProcessorStep,
|
||||
orderId: string,
|
||||
@@ -67,7 +67,7 @@ function generateExchangeSnapshot(
|
||||
}
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
'CamelCorrelationId': `cmr-${Math.random().toString(36).slice(2, 10)}`,
|
||||
'CamelCorrelationId': `cmr-${orderId.toLowerCase().replace('op-', '')}-${stepIndex}`,
|
||||
'Content-Type': 'application/json',
|
||||
'CamelTimerName': step.name,
|
||||
'CamelBreadcrumbId': `${orderId}-${stepIndex}`,
|
||||
@@ -102,6 +102,61 @@ function generateExchangeSnapshot(
|
||||
}
|
||||
}
|
||||
|
||||
function generateExchangeSnapshotOut(
|
||||
step: ProcessorStep,
|
||||
orderId: string,
|
||||
customer: string,
|
||||
stepIndex: number,
|
||||
) {
|
||||
const statusResult = step.status === 'fail' ? 'ERROR' : step.status === 'slow' ? 'SLOW_OK' : 'OK'
|
||||
const baseBody = {
|
||||
orderId,
|
||||
customer,
|
||||
status: statusResult,
|
||||
processorStep: step.name,
|
||||
stepIndex,
|
||||
processed: true,
|
||||
}
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
'CamelCorrelationId': `cmr-${orderId.toLowerCase().replace('op-', '')}-${stepIndex}`,
|
||||
'Content-Type': 'application/json',
|
||||
'CamelTimerName': step.name,
|
||||
'CamelBreadcrumbId': `${orderId}-${stepIndex}`,
|
||||
'CamelProcessedAt': new Date().toISOString(),
|
||||
}
|
||||
|
||||
if (step.type === 'enrich') {
|
||||
const source = step.name.replace('enrich(', '').replace(')', '')
|
||||
return {
|
||||
headers: {
|
||||
...headers,
|
||||
'enrichedBy': source,
|
||||
'enrichmentComplete': 'true',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...baseBody,
|
||||
enrichment: { source: step.name, addedFields: ['customerId', 'address', 'tier'], resolved: true },
|
||||
}, null, 2),
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
headers,
|
||||
body: JSON.stringify(baseBody, null, 2),
|
||||
}
|
||||
}
|
||||
|
||||
// Map processor types to RouteNode types
|
||||
function toRouteNodeType(procType: string): RouteNode['type'] {
|
||||
switch (procType) {
|
||||
case 'consumer': return 'from'
|
||||
case 'transform': return 'process'
|
||||
case 'enrich': return 'process'
|
||||
default: return procType as RouteNode['type']
|
||||
}
|
||||
}
|
||||
|
||||
// ─── ExchangeDetail component ─────────────────────────────────────────────────
|
||||
export function ExchangeDetail() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
@@ -109,6 +164,35 @@ export function ExchangeDetail() {
|
||||
|
||||
const exchange = useMemo(() => exchanges.find((e) => e.id === id), [id])
|
||||
|
||||
// Find correlated exchanges, sorted by start time
|
||||
const correlatedExchanges = useMemo(() => {
|
||||
if (!exchange?.correlationGroup) return []
|
||||
return exchanges
|
||||
.filter((e) => e.correlationGroup === exchange.correlationGroup)
|
||||
.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
|
||||
}, [exchange])
|
||||
|
||||
// Default selected processor: first failed, or 0
|
||||
const defaultIndex = useMemo(() => {
|
||||
if (!exchange) return 0
|
||||
const failIdx = exchange.processors.findIndex((p) => p.status === 'fail')
|
||||
return failIdx >= 0 ? failIdx : 0
|
||||
}, [exchange])
|
||||
|
||||
const [selectedProcessorIndex, setSelectedProcessorIndex] = useState<number>(defaultIndex)
|
||||
const [timelineView, setTimelineView] = useState<'gantt' | 'flow'>('gantt')
|
||||
|
||||
// Build RouteFlow nodes from exchange processors
|
||||
const routeNodes: RouteNode[] = useMemo(() => {
|
||||
if (!exchange) return []
|
||||
return exchange.processors.map((p) => ({
|
||||
name: p.name,
|
||||
type: toRouteNodeType(p.type),
|
||||
durationMs: p.durationMs,
|
||||
status: p.status,
|
||||
}))
|
||||
}, [exchange])
|
||||
|
||||
// Not found state
|
||||
if (!exchange) {
|
||||
return (
|
||||
@@ -124,7 +208,6 @@ export function ExchangeDetail() {
|
||||
{ label: id ?? 'Unknown' },
|
||||
]}
|
||||
environment="PRODUCTION"
|
||||
|
||||
user={{ name: 'hendrik' }}
|
||||
/>
|
||||
<div className={styles.content}>
|
||||
@@ -136,6 +219,14 @@ export function ExchangeDetail() {
|
||||
|
||||
const statusVariant = statusToVariant(exchange.status)
|
||||
const statusLabel = statusToLabel(exchange.status)
|
||||
const selectedProc = exchange.processors[selectedProcessorIndex]
|
||||
const snapshotIn = selectedProc
|
||||
? generateExchangeSnapshot(selectedProc, exchange.orderId, exchange.customer, selectedProcessorIndex)
|
||||
: null
|
||||
const snapshotOut = selectedProc
|
||||
? generateExchangeSnapshotOut(selectedProc, exchange.orderId, exchange.customer, selectedProcessorIndex)
|
||||
: null
|
||||
const isSelectedFailed = selectedProc?.status === 'fail'
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
@@ -157,7 +248,7 @@ export function ExchangeDetail() {
|
||||
{/* Scrollable content */}
|
||||
<div className={styles.content}>
|
||||
|
||||
{/* Exchange header */}
|
||||
{/* Exchange header card */}
|
||||
<div className={styles.exchangeHeader}>
|
||||
<div className={styles.headerRow}>
|
||||
<div className={styles.headerLeft}>
|
||||
@@ -169,9 +260,9 @@ export function ExchangeDetail() {
|
||||
</div>
|
||||
<div className={styles.exchangeRoute}>
|
||||
Route: <span className={styles.routeLink} onClick={() => navigate(`/apps/${ROUTE_TO_APP.get(exchange.route) ?? exchange.route}/${exchange.route}`)}>{exchange.route}</span>
|
||||
<span className={styles.headerDivider}>·</span>
|
||||
<span className={styles.headerDivider}>·</span>
|
||||
Order: <MonoText size="xs">{exchange.orderId}</MonoText>
|
||||
<span className={styles.headerDivider}>·</span>
|
||||
<span className={styles.headerDivider}>·</span>
|
||||
Customer: <MonoText size="xs">{exchange.customer}</MonoText>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,98 +288,168 @@ export function ExchangeDetail() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Processor timeline */}
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<span className={styles.sectionTitle}>Processor Timeline</span>
|
||||
<span className={styles.sectionMeta}>Total: {formatDuration(exchange.durationMs)}</span>
|
||||
</div>
|
||||
<div className={styles.timelineWrap}>
|
||||
<ProcessorTimeline
|
||||
processors={exchange.processors}
|
||||
totalMs={exchange.durationMs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step-by-step inspector */}
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<span className={styles.sectionTitle}>Exchange Inspector</span>
|
||||
<span className={styles.sectionMeta}>{exchange.processors.length} processor steps</span>
|
||||
</div>
|
||||
<div className={styles.inspectorSteps}>
|
||||
{exchange.processors.map((proc, index) => {
|
||||
const snapshot = generateExchangeSnapshot(proc, exchange.orderId, exchange.customer, index)
|
||||
const stepStatusClass =
|
||||
proc.status === 'fail'
|
||||
? styles.stepFail
|
||||
: proc.status === 'slow'
|
||||
? styles.stepSlow
|
||||
: styles.stepOk
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
key={index}
|
||||
title={
|
||||
<div className={styles.stepTitle}>
|
||||
<span className={`${styles.stepIndex} ${stepStatusClass}`}>{index + 1}</span>
|
||||
<span className={styles.stepName}>{proc.name}</span>
|
||||
<Badge
|
||||
label={proc.status.toUpperCase()}
|
||||
color={proc.status === 'fail' ? 'error' : proc.status === 'slow' ? 'warning' : 'success'}
|
||||
variant="outlined"
|
||||
/>
|
||||
<span className={styles.stepDuration}>{formatDuration(proc.durationMs)}</span>
|
||||
</div>
|
||||
}
|
||||
defaultOpen={proc.status === 'fail'}
|
||||
className={styles.stepCollapsible}
|
||||
>
|
||||
<div className={styles.stepBody}>
|
||||
<div className={styles.stepPanel}>
|
||||
<div className={styles.stepPanelLabel}>Exchange Headers</div>
|
||||
<CodeBlock
|
||||
content={JSON.stringify(snapshot.headers, null, 2)}
|
||||
language="json"
|
||||
copyable
|
||||
className={styles.codeBlock}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.stepPanel}>
|
||||
<div className={styles.stepPanelLabel}>Exchange Body</div>
|
||||
<CodeBlock
|
||||
content={snapshot.body}
|
||||
language="json"
|
||||
copyable
|
||||
className={styles.codeBlock}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Collapsible>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error block (if failed) */}
|
||||
{exchange.status === 'failed' && exchange.errorMessage && (
|
||||
<div className={styles.errorSection}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<span className={styles.sectionTitle}>Error Details</span>
|
||||
<Badge label="FAILED" color="error" />
|
||||
{/* Correlation Chain */}
|
||||
{correlatedExchanges.length > 1 && (
|
||||
<div className={styles.correlationChain}>
|
||||
<span className={styles.chainLabel}>Correlated Exchanges</span>
|
||||
{correlatedExchanges.map((ce) => {
|
||||
const isCurrent = ce.id === exchange.id
|
||||
const variant = statusToVariant(ce.status)
|
||||
const statusCls =
|
||||
variant === 'success' ? styles.chainNodeSuccess
|
||||
: variant === 'error' ? styles.chainNodeError
|
||||
: variant === 'running' ? styles.chainNodeRunning
|
||||
: styles.chainNodeWarning
|
||||
return (
|
||||
<button
|
||||
key={ce.id}
|
||||
className={`${styles.chainNode} ${statusCls} ${isCurrent ? styles.chainNodeCurrent : ''}`}
|
||||
onClick={() => {
|
||||
if (!isCurrent) navigate(`/exchanges/${ce.id}`)
|
||||
}}
|
||||
title={`${ce.id} — ${ce.route}`}
|
||||
>
|
||||
<StatusDot variant={variant} />
|
||||
<span>{ce.route}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.errorBody}>
|
||||
<div className={styles.errorClass}>{exchange.errorClass}</div>
|
||||
<pre className={styles.errorMessage}>{exchange.errorMessage}</pre>
|
||||
<div className={styles.errorHint}>
|
||||
Failed at processor: <MonoText size="xs">
|
||||
{exchange.processors.find((p) => p.status === 'fail')?.name ?? 'unknown'}
|
||||
</MonoText>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Processor Timeline Section */}
|
||||
<div className={styles.timelineSection}>
|
||||
<div className={styles.timelineHeader}>
|
||||
<span className={styles.timelineTitle}>
|
||||
Processor Timeline
|
||||
<span className={styles.procCount}>{exchange.processors.length} processors</span>
|
||||
</span>
|
||||
<div className={styles.timelineToggle}>
|
||||
<button
|
||||
className={`${styles.toggleBtn} ${timelineView === 'gantt' ? styles.toggleBtnActive : ''}`}
|
||||
onClick={() => setTimelineView('gantt')}
|
||||
>
|
||||
Timeline
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.toggleBtn} ${timelineView === 'flow' ? styles.toggleBtnActive : ''}`}
|
||||
onClick={() => setTimelineView('flow')}
|
||||
>
|
||||
Flow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.timelineBody}>
|
||||
{timelineView === 'gantt' ? (
|
||||
<ProcessorTimeline
|
||||
processors={exchange.processors}
|
||||
totalMs={exchange.durationMs}
|
||||
onProcessorClick={(_proc, index) => setSelectedProcessorIndex(index)}
|
||||
selectedIndex={selectedProcessorIndex}
|
||||
/>
|
||||
) : (
|
||||
<RouteFlow
|
||||
nodes={routeNodes}
|
||||
onNodeClick={(_node, index) => setSelectedProcessorIndex(index)}
|
||||
selectedIndex={selectedProcessorIndex}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Processor Detail Panel (split IN / OUT) */}
|
||||
{selectedProc && snapshotIn && snapshotOut && (
|
||||
<div className={styles.detailSplit}>
|
||||
{/* Message IN */}
|
||||
<div className={styles.detailPanel}>
|
||||
<div className={styles.panelHeader}>
|
||||
<span className={styles.panelTitle}>
|
||||
<span className={styles.arrowIn}>→</span> Message IN
|
||||
</span>
|
||||
<span className={styles.panelTag}>at processor #{selectedProcessorIndex + 1} entry</span>
|
||||
</div>
|
||||
<div className={styles.panelBody}>
|
||||
<div className={styles.headersSection}>
|
||||
<div className={styles.sectionLabel}>
|
||||
Headers <span className={styles.count}>{Object.keys(snapshotIn.headers).length}</span>
|
||||
</div>
|
||||
<div className={styles.headerList}>
|
||||
{Object.entries(snapshotIn.headers).map(([key, value]) => (
|
||||
<div key={key} className={styles.headerKvRow}>
|
||||
<span className={styles.headerKey}>{key}</span>
|
||||
<span className={styles.headerValue}>{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.bodySection}>
|
||||
<div className={styles.sectionLabel}>Body</div>
|
||||
<CodeBlock content={snapshotIn.body} language="json" copyable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message OUT or Error */}
|
||||
{isSelectedFailed ? (
|
||||
<div className={`${styles.detailPanel} ${styles.detailPanelError}`}>
|
||||
<div className={styles.panelHeader}>
|
||||
<span className={styles.panelTitle}>
|
||||
<span className={styles.arrowError}>×</span> Error at Processor #{selectedProcessorIndex + 1}
|
||||
</span>
|
||||
<Badge label="FAILED" color="error" variant="filled" />
|
||||
</div>
|
||||
<div className={styles.panelBody}>
|
||||
{exchange.errorClass && (
|
||||
<div className={styles.errorBadgeRow}>
|
||||
<span className={styles.errorHttpBadge}>{exchange.errorClass.split('.').pop()}</span>
|
||||
</div>
|
||||
)}
|
||||
{exchange.errorMessage && (
|
||||
<div className={styles.errorMessageBox}>{exchange.errorMessage}</div>
|
||||
)}
|
||||
<div className={styles.errorDetailGrid}>
|
||||
<span className={styles.errorDetailLabel}>Error Class</span>
|
||||
<span className={styles.errorDetailValue}>{exchange.errorClass ?? 'Unknown'}</span>
|
||||
<span className={styles.errorDetailLabel}>Processor</span>
|
||||
<span className={styles.errorDetailValue}>{selectedProc.name}</span>
|
||||
<span className={styles.errorDetailLabel}>Duration</span>
|
||||
<span className={styles.errorDetailValue}>{formatDuration(selectedProc.durationMs)}</span>
|
||||
<span className={styles.errorDetailLabel}>Status</span>
|
||||
<span className={styles.errorDetailValue}>{selectedProc.status.toUpperCase()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.detailPanel}>
|
||||
<div className={styles.panelHeader}>
|
||||
<span className={styles.panelTitle}>
|
||||
<span className={styles.arrowOut}>←</span> Message OUT
|
||||
</span>
|
||||
<span className={styles.panelTag}>after processor #{selectedProcessorIndex + 1}</span>
|
||||
</div>
|
||||
<div className={styles.panelBody}>
|
||||
<div className={styles.headersSection}>
|
||||
<div className={styles.sectionLabel}>
|
||||
Headers <span className={styles.count}>{Object.keys(snapshotOut.headers).length}</span>
|
||||
</div>
|
||||
<div className={styles.headerList}>
|
||||
{Object.entries(snapshotOut.headers).map(([key, value]) => (
|
||||
<div key={key} className={styles.headerKvRow}>
|
||||
<span className={styles.headerKey}>{key}</span>
|
||||
<span className={styles.headerValue}>{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.bodySection}>
|
||||
<div className={styles.sectionLabel}>Body</div>
|
||||
<CodeBlock content={snapshotOut.body} language="json" copyable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user