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
@@ -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