shadcn.io is not affiliated with official shadcn/ui
Worker Queue Priority Monitoring Block for React Aria
A background-jobs monitor with three priority lanes: the age of each lane's oldest job against its maximum wait, a toggle to the pending count, an hour of history, and the five oldest jobs of the chosen lane.
Installation
Overview
Find the lane that is falling behind, not just the queue that is long, with this priority-lane monitor for React with React Aria. It is Hivewatch, a background-jobs monitor, with three lanes (Critical, Default, Low) as rows of one radio group. Each row has the lane's name, a bar, the figures in words and a sparkline of how old its oldest job has been over the last hour. A Toggle Group in the header swaps the bar between the age of the oldest job, drawn against that lane's maximum wait with a tick ("Over: 2 min against 30 s"), and the number of pending jobs on one shared scale. Choosing a lane lists its five oldest jobs in a table: id, class, time waiting and attempts. The header sentence names the lane furthest past its limit and says by how many times. Guides draw the frame and its bands. For worker dashboards, on-call views and anyone who sizes a pool by wait time.
FAQ
How do I load my own lanes?
Edit LANES: each has an id, a label, the depth, the age in seconds of its oldest job, the longest wait it may have (limit) and its five oldest jobs. The hour of history is generated from the age; give each lane a real array of 60 samples in SERIES instead.
Is anything measured?
No. Lanes, jobs and samples are typed or generated at load, and nothing calls a network. Picking a lane, or switching the measure, only changes what is shown.
Why does the bar have a tick?
A lane's age means little without its limit, since a minute is fine for Low and late for Critical. The tick sits at the lane's maximum wait and the bar runs past it when the lane is over; the same fact is in words under the bar. In the depth view the tick is hidden because depth has no limit.