Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Data Pipeline Dashboard Block for React Aria

A run grid of five ETL pipelines by their last 14 runs with succeeded, failed and skipped glyphs, a task table for the chosen run with the failed task error, and a local Retry from failed task.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Find the run that broke, and the task inside it, with this pipeline run grid for React with React Aria. A hairline frame with a plus mark on each corner holds five Penstock pipelines by their last 14 runs. Each cell is a button with a glyph (a tick for a run that succeeded, a cross for one that failed, a dash for one skipped) on a ramp that darkens with how long the run took. Each row also says how far its data is past its cadence, worked out from the newest run that succeeded. Pressing a cell lists that run's five tasks in a table with the failed one's error. "Retry from failed task" marks the run as retrying and the later tasks as pending. For ETL schedulers and data platforms.

FAQ

How do I use my own pipelines?

Edit PIPELINES: a name, the cadence in minutes, lastStart, the runs as a string of s, f and k (succeeded, failed, skipped), the minutes each run took, the failure and the weights of the five tasks. TASKS names the tasks. The grid, the freshness words and the task times are all worked out from them.

How is past its cadence worked out?

From the end of the newest run that succeeded: the time between it and the page's clock, less the pipeline's cadence. A positive number is how late the data is, and the header names the worst. A pipeline that is within its cadence reads On time.

What does Retry from failed task do?

On a failed run it marks the run as retrying, keeps the tasks before the failure as done, shows the failed task as running and the later ones as pending. It does not run anything and the run never finishes: the status line says it is queued in this demo.

How do I move around the grid?

The grid is one tab stop. The arrow keys move one cell, Home and End jump to the ends of a row, and Enter or Space chooses a run. Every cell is named with its pipeline, start time, result and duration.

What stays local, and how do I wire it for real?

Runs and tasks are typed, and nothing is scheduled. Load the runs from your scheduler's API, send the retry to it from retry, and take the failure text from the task log.

How does it look on a phone?

The grid keeps the newest eight runs in a scrolling region, the freshness lines are read out instead of shown, and the task table and the retry button follow it.

All 200 dashboard blocks