Skip to content

feat: add timeline visualization report#279

Draft
alexshamrai wants to merge 1 commit intoctrf-io:mainfrom
alexshamrai:feature/timeline-visualization
Draft

feat: add timeline visualization report#279
alexshamrai wants to merge 1 commit intoctrf-io:mainfrom
alexshamrai:feature/timeline-visualization

Conversation

@alexshamrai
Copy link
Copy Markdown
Contributor

Add a new timeline-report that renders a Mermaid Gantt chart showing test execution across threads/workers over time in GitHub job summaries.

Tests are grouped by threadId (falls back to filePath or a single "Tests" section) and displayed as horizontal bars on a time axis. Colors indicate status: green (passed), red (failed). Skipped/pending tests are excluded from the chart but shown in the collapsible details table with precise timestamps (HH:mm:ss.SSS) and durations.

Uses Mermaid base theme with explicit colors and white background for consistent rendering across GitHub light and dark themes.

New Handlebars helpers: sanitizeMermaid, mermaidStatus, hasTimelineData, groupTestsForTimeline, groupAllTestsForTimeline, formatTimestampMs, timelineGroupCount.

Usage:
Action: timeline-report: true
CLI: npx github-actions-ctrf timeline --file report.json

Add a new `timeline-report` that renders a Mermaid Gantt chart showing
test execution across threads/workers over time in GitHub job summaries.

Tests are grouped by threadId (falls back to filePath or a single
"Tests" section) and displayed as horizontal bars on a time axis.
Colors indicate status: green (passed), red (failed). Skipped/pending
tests are excluded from the chart but shown in the collapsible details
table with precise timestamps (HH:mm:ss.SSS) and durations.

Uses Mermaid base theme with explicit colors and white background for
consistent rendering across GitHub light and dark themes.

New Handlebars helpers: sanitizeMermaid, mermaidStatus, hasTimelineData,
groupTestsForTimeline, groupAllTestsForTimeline, formatTimestampMs,
timelineGroupCount.

Usage:
  Action: timeline-report: true
  CLI: npx github-actions-ctrf timeline --file report.json
@Ma11hewThomas
Copy link
Copy Markdown
Contributor

I think this is a great idea, the report itself and using a mermaid gant chart. Design looks nice too!

How would it behave for large test runs? Should we add a max test count?

@alexshamrai
Copy link
Copy Markdown
Contributor Author

I think this is a great idea, the report itself and using a mermaid gant chart. Design looks nice too!

How would it behave for large test runs? Should we add a max test count?

It should be tested for different setups, which I haven't done, yet: Long, short, rerun flaky tests etc. This is still a draft, that's why i created an issue #278 , to collect some feedback, and enhance requirements.

Not using mermaid there is an obvious issue, when test is failed on initialization and has very short duration, it is difficult to visualize.

For now, let's proceed with this design. Once I test more edge cases, I'll mark this PR as ready for review and tag you. Thank you!

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.

2 participants