shadcn.io is not affiliated with official shadcn/ui
Queue Monitor Dashboard Block for React
A backlog drain calculator for a message broker: a depth chart for the last hour with the consumer count under it, and a field for consumers that works out how long the backlog takes to clear or that it never will.
Installation
Overview
Find out how many consumers a queue needs, with this queue monitor panel for React with Base UI. A Native Select in the header picks one of four queues (orders, emails, exports or webhooks). A hairline frame with a plus mark on each corner holds the depth of the queue over the last hour, with the consumer count as a step line under it, and an end side cell with a Number Input for consumers, each handling 120 messages a second. The answer is worked out as you type: "At 6 consumers the backlog of 41,200 clears in 2 minutes", or "At 3 consumers the backlog never drains: 360 handled a second against 380 arriving". Both lines continue as dashed lines for the next ten minutes at the chosen count, and a ghost Button scales to the suggested count. For broker consoles and capacity reviews.
FAQ
How do I fill it with my own queues?
Edit the queue records: arrival rate in messages a second, the backlog now, the depth an hour ago, the consumer changes over the hour and the count the ghost button suggests. PER_CONSUMER is what one consumer handles a second. The depth series is seeded between the start and the backlog; replace it with your sampled depths.
How is the drain time worked out?
The backlog divided by the difference between what the consumers handle and what arrives, converted to minutes. If the consumers handle no more than arrives, the panel says it never drains. The wait of the oldest message is the backlog divided by what the consumers handle.
Why does the field settle when I leave it?
Typing a whole number from 1 to 12 updates the answer at once; anything else is tidied when the field loses focus.