Skip to content

feat(ui): improve duration display in workflow and execution tables#223

Merged
AbirAbbas merged 2 commits intomainfrom
fix/duration-display-improvements
Mar 5, 2026
Merged

feat(ui): improve duration display in workflow and execution tables#223
AbirAbbas merged 2 commits intomainfrom
fix/duration-display-improvements

Conversation

@santoshkumarradha
Copy link
Member

@santoshkumarradha santoshkumarradha commented Mar 5, 2026

Summary

Closes #222

  • Human-readable durations: Replace raw seconds (3748.3s) with natural format (1h 2m, 17m 32s, 230ms)
  • Live elapsed timer: Running items now show a live-updating timer that ticks every second instead of a static - dash
  • Shared utility: Consolidated duration formatting into formatDurationHumanReadable() and LiveElapsedDuration component in data-formatters.tsx

Changes

New shared utilities (data-formatters.tsx)

  • formatDurationHumanReadable(ms) — Formats milliseconds to human-readable: 230ms, 42s, 3m 28s, 1h 2m, 1d 2h
  • LiveElapsedDuration — React component with useEffect/setInterval that computes elapsed time from startedAt and ticks every second

Updated table components

  • WorkflowsTable.tsx — Duration column now uses human-readable format + live timer for running workflows
  • CompactWorkflowsTable.tsx — Same improvements for compact variant
  • CompactExecutionsTable.tsx — Duration column now uses client-side formatting + live timer for running executions
  • EnhancedExecutionsTable.tsx — Same improvements for enhanced variant

Bonus fix

  • Removed as any type assertion in CompactExecutionsTable status prop, replaced with proper normalizeExecutionStatus() call

Duration Format Examples

Before After
3748.3s 1h 2m
1208.5s 20m 8s
426.0s 7m 6s
0.1s 123ms
- (running) 2m 34s (live, ticking)

Screenshots (Playwright)

Workflows Table (After)

Workflows table with human-readable durations

Executions Table (After)

Executions table with human-readable durations

Verification

  • npx tsc --noEmit — passes
  • npm run build — passes
  • LSP diagnostics clean on all 5 changed files
  • Playwright screenshot verification against local control plane with real data

- Add formatDurationHumanReadable() utility for human-readable durations
  (e.g., '1h 2m' instead of '3748.3s')
- Add LiveElapsedDuration component that ticks every second for running items
  instead of showing static '-' dash
- Update WorkflowsTable, CompactWorkflowsTable, CompactExecutionsTable,
  and EnhancedExecutionsTable to use new duration formatting
- Fix 'as any' type assertion in CompactExecutionsTable status prop

Closes #222
@santoshkumarradha santoshkumarradha requested review from a team and AbirAbbas as code owners March 5, 2026 12:32
@AbirAbbas AbirAbbas merged commit aa02ea1 into main Mar 5, 2026
21 checks passed
@AbirAbbas AbirAbbas deleted the fix/duration-display-improvements branch March 5, 2026 14:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve duration display in Workflow and Execution tables

2 participants