feat: add registerable actions to ProcessorTimeline and RouteFlow
All checks were successful
Build & Publish / publish (push) Successful in 51s

Both components now accept `actions` (static) or `getActions` (dynamic
per-item) props. When provided, a "⋮" trigger appears on hover that
opens a Dropdown menu. Click propagation is stopped so action clicks
don't fire the row/node click handler.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-24 19:49:07 +01:00
parent 4b873194c9
commit 19dccb8685
9 changed files with 354 additions and 21 deletions

View File

@@ -769,7 +769,7 @@ export function CompositesSection() {
<DemoCard
id="processortimeline"
title="ProcessorTimeline"
description="Horizontal Gantt-style timeline showing processor execution order, duration, and status."
description="Horizontal Gantt-style timeline with selectable rows and optional action menus via actions or getActions prop."
>
<div style={{ width: '100%' }}>
<ProcessorTimeline
@@ -780,6 +780,11 @@ export function CompositesSection() {
{ name: 'RouteToQueue', type: 'router', durationMs: 8, status: 'ok', startMs: 47 },
{ name: 'AuditLog', type: 'logger', durationMs: 65, status: 'fail', startMs: 55 },
]}
getActions={(proc) => [
{ label: 'Change Log Level', onClick: () => {} },
{ label: 'View Configuration', onClick: () => {} },
...(proc.status === 'fail' ? [{ label: 'View Stack Trace', onClick: () => {} }] : []),
]}
/>
</div>
</DemoCard>
@@ -788,7 +793,7 @@ export function CompositesSection() {
<DemoCard
id="routeflow"
title="RouteFlow"
description="Vertical processor node diagram showing route execution flow with status coloring and connectors."
description="Vertical processor node diagram with status coloring, connectors, and optional action menus."
>
<div style={{ width: '100%', maxWidth: 360 }}>
<RouteFlow
@@ -802,6 +807,10 @@ export function CompositesSection() {
{ name: 'kafka:order-completed', type: 'to', durationMs: 11, status: 'ok' },
{ name: 'dead-letter:failed-orders', type: 'error-handler', durationMs: 14, status: 'fail' },
]}
actions={[
{ label: 'Change Log Level', onClick: () => {} },
{ label: 'Enable Tracing', onClick: () => {} },
]}
/>
</div>
</DemoCard>