refactor: unify "Executions" → "Exchanges" terminology
Rename all references from "Execution/executions/execCount" to "Exchange/exchanges/exchangeCount" to align with Apache Camel's native Exchange concept. Java class names (CamelExecutionException, HttpOperationFailedException) are preserved as-is. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -20,22 +20,22 @@ import { CodeBlock } from '../../design-system/primitives/CodeBlock/CodeBlock'
|
||||
import { InfoCallout } from '../../design-system/primitives/InfoCallout/InfoCallout'
|
||||
|
||||
// Mock data
|
||||
import { executions } from '../../mocks/executions'
|
||||
import { exchanges } from '../../mocks/exchanges'
|
||||
import { routes } from '../../mocks/routes'
|
||||
import { agents } from '../../mocks/agents'
|
||||
|
||||
// ─── Sidebar data (shared) ────────────────────────────────────────────────────
|
||||
const APPS = [
|
||||
{ id: 'order-service', name: 'order-service', agentCount: 2, health: 'live' as const, execCount: 1433 },
|
||||
{ id: 'payment-svc', name: 'payment-svc', agentCount: 1, health: 'live' as const, execCount: 912 },
|
||||
{ id: 'shipment-tracker', name: 'shipment-tracker', agentCount: 2, health: 'live' as const, execCount: 471 },
|
||||
{ id: 'notification-hub', name: 'notification-hub', agentCount: 1, health: 'stale' as const, execCount: 128 },
|
||||
{ id: 'order-service', name: 'order-service', agentCount: 2, health: 'live' as const, exchangeCount: 1433 },
|
||||
{ id: 'payment-svc', name: 'payment-svc', agentCount: 1, health: 'live' as const, exchangeCount: 912 },
|
||||
{ id: 'shipment-tracker', name: 'shipment-tracker', agentCount: 2, health: 'live' as const, exchangeCount: 471 },
|
||||
{ id: 'notification-hub', name: 'notification-hub', agentCount: 1, health: 'stale' as const, exchangeCount: 128 },
|
||||
]
|
||||
|
||||
const SIDEBAR_ROUTES = routes.slice(0, 3).map((r) => ({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
execCount: r.execCount,
|
||||
exchangeCount: r.exchangeCount,
|
||||
}))
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
@@ -121,7 +121,7 @@ export function ExchangeDetail() {
|
||||
const navigate = useNavigate()
|
||||
const [activeItem, setActiveItem] = useState('')
|
||||
|
||||
const execution = useMemo(() => executions.find((e) => e.id === id), [id])
|
||||
const exchange = useMemo(() => exchanges.find((e) => e.id === id), [id])
|
||||
|
||||
function handleItemClick(itemId: string) {
|
||||
setActiveItem(itemId)
|
||||
@@ -130,7 +130,7 @@ export function ExchangeDetail() {
|
||||
}
|
||||
|
||||
// Not found state
|
||||
if (!execution) {
|
||||
if (!exchange) {
|
||||
return (
|
||||
<AppShell
|
||||
sidebar={
|
||||
@@ -160,8 +160,8 @@ export function ExchangeDetail() {
|
||||
)
|
||||
}
|
||||
|
||||
const statusVariant = statusToVariant(execution.status)
|
||||
const statusLabel = statusToLabel(execution.status)
|
||||
const statusVariant = statusToVariant(exchange.status)
|
||||
const statusLabel = statusToLabel(exchange.status)
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
@@ -179,8 +179,8 @@ export function ExchangeDetail() {
|
||||
<TopBar
|
||||
breadcrumb={[
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: execution.route, href: `/routes/${execution.route}` },
|
||||
{ label: execution.id },
|
||||
{ label: exchange.route, href: `/routes/${exchange.route}` },
|
||||
{ label: exchange.id },
|
||||
]}
|
||||
environment="PRODUCTION"
|
||||
shift="Day (06:00-18:00)"
|
||||
@@ -197,36 +197,36 @@ export function ExchangeDetail() {
|
||||
<StatusDot variant={statusVariant} />
|
||||
<div>
|
||||
<div className={styles.exchangeId}>
|
||||
<MonoText size="md">{execution.id}</MonoText>
|
||||
<MonoText size="md">{exchange.id}</MonoText>
|
||||
<Badge label={statusLabel} color={statusVariant} variant="filled" />
|
||||
</div>
|
||||
<div className={styles.exchangeRoute}>
|
||||
Route: <span className={styles.routeLink} onClick={() => navigate(`/routes/${execution.route}`)}>{execution.route}</span>
|
||||
Route: <span className={styles.routeLink} onClick={() => navigate(`/routes/${exchange.route}`)}>{exchange.route}</span>
|
||||
<span className={styles.headerDivider}>·</span>
|
||||
Order: <MonoText size="xs">{execution.orderId}</MonoText>
|
||||
Order: <MonoText size="xs">{exchange.orderId}</MonoText>
|
||||
<span className={styles.headerDivider}>·</span>
|
||||
Customer: <MonoText size="xs">{execution.customer}</MonoText>
|
||||
Customer: <MonoText size="xs">{exchange.customer}</MonoText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.headerRight}>
|
||||
<div className={styles.headerStat}>
|
||||
<div className={styles.headerStatLabel}>Duration</div>
|
||||
<div className={styles.headerStatValue}>{formatDuration(execution.durationMs)}</div>
|
||||
<div className={styles.headerStatValue}>{formatDuration(exchange.durationMs)}</div>
|
||||
</div>
|
||||
<div className={styles.headerStat}>
|
||||
<div className={styles.headerStatLabel}>Agent</div>
|
||||
<div className={styles.headerStatValue}>{execution.agent}</div>
|
||||
<div className={styles.headerStatValue}>{exchange.agent}</div>
|
||||
</div>
|
||||
<div className={styles.headerStat}>
|
||||
<div className={styles.headerStatLabel}>Started</div>
|
||||
<div className={styles.headerStatValue}>
|
||||
{execution.timestamp.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||
{exchange.timestamp.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.headerStat}>
|
||||
<div className={styles.headerStatLabel}>Processors</div>
|
||||
<div className={styles.headerStatValue}>{execution.processors.length}</div>
|
||||
<div className={styles.headerStatValue}>{exchange.processors.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -236,12 +236,12 @@ export function ExchangeDetail() {
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<span className={styles.sectionTitle}>Processor Timeline</span>
|
||||
<span className={styles.sectionMeta}>Total: {formatDuration(execution.durationMs)}</span>
|
||||
<span className={styles.sectionMeta}>Total: {formatDuration(exchange.durationMs)}</span>
|
||||
</div>
|
||||
<div className={styles.timelineWrap}>
|
||||
<ProcessorTimeline
|
||||
processors={execution.processors}
|
||||
totalMs={execution.durationMs}
|
||||
processors={exchange.processors}
|
||||
totalMs={exchange.durationMs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -250,11 +250,11 @@ export function ExchangeDetail() {
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<span className={styles.sectionTitle}>Exchange Inspector</span>
|
||||
<span className={styles.sectionMeta}>{execution.processors.length} processor steps</span>
|
||||
<span className={styles.sectionMeta}>{exchange.processors.length} processor steps</span>
|
||||
</div>
|
||||
<div className={styles.inspectorSteps}>
|
||||
{execution.processors.map((proc, index) => {
|
||||
const snapshot = generateExchangeSnapshot(proc, execution.orderId, execution.customer, index)
|
||||
{exchange.processors.map((proc, index) => {
|
||||
const snapshot = generateExchangeSnapshot(proc, exchange.orderId, exchange.customer, index)
|
||||
const stepStatusClass =
|
||||
proc.status === 'fail'
|
||||
? styles.stepFail
|
||||
@@ -307,18 +307,18 @@ export function ExchangeDetail() {
|
||||
</div>
|
||||
|
||||
{/* Error block (if failed) */}
|
||||
{execution.status === 'failed' && execution.errorMessage && (
|
||||
{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" />
|
||||
</div>
|
||||
<div className={styles.errorBody}>
|
||||
<div className={styles.errorClass}>{execution.errorClass}</div>
|
||||
<pre className={styles.errorMessage}>{execution.errorMessage}</pre>
|
||||
<div className={styles.errorClass}>{exchange.errorClass}</div>
|
||||
<pre className={styles.errorMessage}>{exchange.errorMessage}</pre>
|
||||
<div className={styles.errorHint}>
|
||||
Failed at processor: <MonoText size="xs">
|
||||
{execution.processors.find((p) => p.status === 'fail')?.name ?? 'unknown'}
|
||||
{exchange.processors.find((p) => p.status === 'fail')?.name ?? 'unknown'}
|
||||
</MonoText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user