feat: add registerable actions to ProcessorTimeline and RouteFlow
All checks were successful
Build & Publish / publish (push) Successful in 51s
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user