shadcn.io is not affiliated with official shadcn/ui
Job Queue Status Notification Block for React
A job queue's four counters that roll when they change, a progress bar of done over total, a Pause queue that moves running jobs to Paused and re-derives the counts, and a job list with Retry on the failed one.
Installation
Overview
Say what the queue is doing and give the one control that matters, with this queue status notification for React with Base UI. It is Queuemoor, a job queue, in a hairline frame with a plus mark on each corner. The first band is four counter cells, Queued, Running, Done and Failed, in Sliding Number so each figure rolls when it changes; under them a Progress bar of done over total and a line that says how many jobs are paused. Pause queue, the one Shine Button in the header, moves the running jobs to Paused and every count follows; Resume moves them back. The job list shows four of nine jobs with a name in mono, a state as a glyph and a word, and Retry on the failed one; Show all opens the rest. Guides draw the lines. For background jobs, import runs and any queue with a pause.
FAQ
How do I fill it with my jobs?
Edit JOBS: each has an id, a name, how many items it handles, a state (done, failed, paused, queued or running) and, for a failed one, a reason. Every counter, the bar and the lines are worked out from that array by small helpers, so they always agree. In your app pass the jobs your queue reports and call its pause and retry endpoints from toggle and retry.
What stays local in the demo?
Everything. Pause queue changes the states on this page, Retry queues the failed job again here and nothing runs on a server. A reload brings the queue back as typed. Failed jobs that you retry become Queued; a queue that is paused keeps them waiting.
What happens to the counts when I pause?
The running jobs become Paused, so Running drops to 0, Queued and Done stay, and the line under the bar reads "3 jobs are paused and wait for Resume." Resume puts them back and the numbers roll up again. The bar only moves when a job is done.
What moves on its own?
Only the spinner of a running job, and it stops under reduced motion and when the queue is paused. The counters roll only when you change something.
Is it accessible?
The counters are a labelled list, the bar is hidden from assistive technology because its figures are written next to it, and every state is a word as well as a glyph. Retry names its job. One polite status line says each change, and Show all reports whether the extra rows are open.
Related
- Pro
A scheduled task read back in plain words: a select of four presets rewrites the cron expression, the sentence and the next three runs in UTC, with the last run and a Run now that queues a manual run in the demo.
- Pro
Three synced objects (Contacts, Deals, Invoices) with a progress bar, a count that rolls, an errors button that opens a popover of the failing records, and a Sync now per row that runs three typed steps.
- 120Pro
System Alerts by Severity Notification
Incidents and alertsAn infrastructure monitor's alert panel: a count of open alerts by severity, and an accordion of three systems with their facts, an Acknowledge and a one-hour Mute that says when it ends.
- Pro
A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.
- Pro
A project's history as a vertical timeline split in two: six event types as chips with live counts in a start column, and the timeline of who did what beside them, filtered by the types you press, with Load earlier events and a designed empty state.
- Pro
Alert Banner Notification
Incidents and alertsAn operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.