Pipeline run

Pro

One pipeline run, stage by stage. Each stage shows what it is doing and how long it has taken, the connectors fill as stages pass, and when one fails the run stops there, opens on the line that failed and offers one button: retry from that stage.

Installs components/ui/pipeline-run.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/pipeline-run

Deploy halden-appNot started

main · 4f2a9c1 · Fix retry on declined cards · Maya Chen

Installpnpm install

Waiting for the stages before it.

When to use #

Use it for

CI, deploy and data pipelines where people watch a run finish.
Any multi-step job that can fail part-way and be resumed.

Skip it when

A list of many past runs; use the deploys screen or job runs.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/pipeline-run

Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from PipelineRun and formatElapsed.

example.tsx

import { PipelineRun, formatElapsed } from "@/components/ui/pipeline-run"

The worked example comes with Pro

The 91-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

PipelineRun

component

PropTypeDefaultDescription

title *string—

metaReactNode—Branch, commit and who started it.

stages *readonly PipelineStage[]—

elapsedMsnumber0Total time for the run, in milliseconds.

onStart(() => void)—Start from the beginning. Shown when nothing is running.

onCancel(() => void)—

onRetry((stageId: string) => void)—Continue from a failed stage, keeping the stages before it.

classNamestring—

formatElapsed