shadcn.io is not affiliated with official shadcn/ui
Worker Heartbeat Activity Monitoring Block for React
Eight task-worker cards on shared hairlines, each with a state word, the age of its last heartbeat against twice the interval, active and reserved tasks and a sparkline, plus a switch for late or lost workers.
Installation
Overview
See which workers have stopped talking before their tasks pile up, with this heartbeat monitor for React with Base UI. It is Stalkbeat, a task-worker monitor watching a Celery cluster that beats every 15 seconds. Eight workers are cards on shared hairlines, four across from the large breakpoint and two on a phone. Each card gives the worker's name in mono, a state word in a Badge (Online, Late or Lost), the age of its last heartbeat as a bar with a tick at twice the interval ("12 s, limit 30 s"), its active and reserved tasks and a 12-sample sparkline of tasks a minute. A lost worker's card is hatched and says how many tasks will be retried. A Switch limits the grid to late and lost workers without moving any card, and pressing a card reads it in the band below. Guides draw the frame and its bands. For fleet views, deploy checks and on-call handovers.
FAQ
How do I load my own workers?
Edit WORKERS: a name, the seconds since its last heartbeat, active and reserved task counts, its queues and a tasks-a-minute level. INTERVAL is the heartbeat interval; Online is within one interval, Late within two, Lost beyond. Replace the generated sparkline with your last 12 samples in rateSeries.
Is anything measured?
No. The workers and their figures are typed, nothing calls a network, and pressing a card only reads it. In your app read heartbeats from your broker's inspect or events feed and keep the same shape.
What does the switch do to the layout?
Nothing moves. Workers that do not match stay in their cells, unseen and unreachable by keyboard, so the grid keeps its size and the cards that remain keep their places. A polite message says how many are shown.