Pipeline
CI stages left to right with parallel jobs stacked inside each. A stage is as bad as its worst job, so its state is derived rather than being another field to keep in sync.
src/components/ui/pipeline.tsxAbout
From the component's own source, where it was written.
A CI pipeline: stages left to right, parallel jobs stacked within each.
The distinction from Stepper is the second dimension. A stepper is one sequence of stages; a pipeline runs several jobs inside each stage, and the stage's own state is the roll-up of theirs — which is why status on a stage is derived here rather than being another field to keep in sync.
Scrolls horizontally rather than wrapping, because a pipeline read out of order is meaningless, and stacks to a single column on narrow screens.
Install
npx astralyx-ui add pipeline
Usage
import { Pipeline } from '@/components/ui/pipeline'
<Pipeline stages={stages} />Composer
Change the props and the source below follows.
Build
2- compile1m 12s
- bundle41s
Test
3- unit2m 04s
- e2e5m 02s
- visual
Deploy
2- Runningstaging
- production
<Pipeline stages={stages} />Examples
Stages
<Pipeline stages={stages} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
Pipeline
A CI pipeline: stages left to right, parallel jobs stacked within each.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| stages | PipelineStage[] | required | { id, name, jobs } where a job is { id, name, status, duration?, onSelect? }. |
Functions
| Function | Signature | Description |
|---|---|---|
| stageStatus | (stage: PipelineStage) => JobStatus | Exported roll-up: failure beats running beats pending. Use it for a summary elsewhere so both agree. |
Types
PipelineJob
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | string | — |
| status | JobStatus | — |
| duration? | number | Seconds. Rendered through Fmt. |
| onSelect? | () => void | Makes a job a button. Jobs without one render as plain rows rather than dead buttons. |
PipelineStage
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | string | — |
| jobs | PipelineJob[] | — |
| Type | Definition | Description |
|---|---|---|
JobStatus | 'success' | 'failure' | 'running' | 'pending' | 'skipped' | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| layout | responsive | Scrolls horizontally instead of wrapping — a pipeline read out of order is meaningless — and stacks to one column below md. |