shadcn.io is not affiliated with official shadcn/ui
CI/CD Pipeline Dashboard Block for Svelte
One pipeline run drawn as a graph of seven jobs in five stages, with the critical path drawn heavier and timed, and a log for the chosen job that Re-run job plays again from its first line.
Installation
Overview
See where a build spends its time with this pipeline run graph for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds one Cogtrack run as a graph: Build, then Unit tests, Integration tests and Lint in parallel, then Package, Deploy to staging and Verify, joined by curves. The longest chain by duration, the critical path, is drawn heavier and named under the graph with its length, worked out from the job durations, and with how much time running in parallel saves. Pressing a node shows that job's log below it, and a Shine Button labelled Re-run job plays the log again from its first line. The nodes carry their result as a glyph and a word. It is built from Shine Button and Guides, with the graph drawn in SVG and CSS. For release engineers and anyone reading a slow or failing build.
FAQ
How do I draw my own pipeline?
Edit JOBS: each job has an id, a name, its seconds, a result, the after list of jobs it waits for, its column (0 to 4) and lane (0 to 2) in the graph, and its log lines. The curves, the critical path and the totals are all worked out from after and seconds, so nothing else needs editing.
How is the critical path worked out?
For each job the block finds the earliest it can finish: its own seconds plus the latest finish among the jobs it waits for. The job that finishes last ends the path, and the path is the chain of slowest predecessors back to the start. Here Integration tests, at 2m 40s, is slower than Unit tests and Lint, so it sits on the path and they don't. The sentence under the graph says the path length and how much the parallel jobs save against the sum of all jobs.
What does Re-run job do?
It replays the chosen job's typed log from its first line, one line every fraction of a second, and says when it is done in the polite status line. Under reduced motion the whole log appears at once. The result doesn't change: a failed job fails again, because nothing is run. In your app start the job through your CI service and stream its real log into the same list.
How do I use it with a keyboard?
Every node is a button in the tab order, in stage order, and pressing one selects it. The log is a labelled scroll region that you can focus and scroll with the arrow keys. Each node's name includes its result, its time and whether it is on the critical path.