shadcn.io is not affiliated with official shadcn/ui
Job Class Runtime Stats Monitoring Block for Radix UI
A table of eight job classes with processed and failed counts, p50 and p99 runtimes, hourly sparklines and a Slower than usual flag, switchable between the last hour and today, with a 24-hour p99 band for the chosen class.
Installation
Overview
Spot the job class that has slowed down, and how much, with this runtime table for React with Radix UI. It is Classtally, a job-class metrics tool reading a Sidekiq setup. A native table lists eight classes with processed and failed counts, the median (p50) and the 99th percentile (p99) runtime and a 24-sample sparkline of the hourly p99, each on its own scale. A Toggle Group switches the figures between the last hour and today, header buttons sort with aria-sort, and a class whose last-hour p99 is over twice today's says "Slower than usual". Choosing a class opens a band with its 24 hourly p99 columns, a sentence that says the same in words, and the queues it runs on. The header sentence names the slower classes and the worst of them. Guides draw the frame and its bands. For performance reviews, queue tuning and on-call triage.
FAQ
How do I load my own classes?
Edit CLASSES: each has a name, its queues and two Spells (day and hour) of processed, failed, p50 and p99 in milliseconds. The 24 hourly values are generated from the day's p99 and end on the last hour's; put your real series in hourlyOf. SLOWER is the ratio that raises the flag.
Is anything measured?
No. All figures are typed examples and nothing calls a network. The toggle, the sort and the choice of class only change what is shown.
How does sorting work?
Each sortable head is a button. Pressing it sorts by that column, largest first (names A to Z), and pressing it again reverses the order; the head carries aria-sort and a polite message says what the table is sorted by. Rows keep their height, so nothing jumps when the flag appears or goes.