shadcn.io is not affiliated with official shadcn/ui
Message Queue Depth Monitoring Block for Vue
A message-queue monitor with a queue select and two panes on one time cursor: ready and unacknowledged messages stacked, and the publish and deliver rates with the gap between them hatched.
Installation
Overview
Show whether consumers are keeping up with publishers, and when they stopped, with this queue depth monitor for Vue with Ark UI. It is Warrenwell, a message-queue monitor watching a RabbitMQ broker, and a Native Select in the header picks one of three queues. Under a strip of five figures (the time, ready, unacknowledged, publish and deliver) a native range moves one cursor through 41 one-minute samples. The first pane stacks the messages ready to be delivered under the messages delivered but not yet acknowledged; the second draws the publish rate and the deliver rate as two lines and hatches the gap wherever publishers are ahead. The header sentence says when the backlog peaked and how long it took to drain, and a line under the charts gives the hatched window ("Publishers outpace consumers from 10:03 to 10:21"). All of it is worked out from typed parameters. Guides draw the frame and its bands. For queue dashboards, capacity reviews and anyone deciding when to add a consumer.
FAQ
How do I load my own queues?
Replace DEFS with one entry per queue, or build Queue objects from your broker's management API: four arrays of 41 numbers (publish rate, deliver rate, messages ready, messages unacknowledged), one per minute, plus the consumer count and prefetch. The scales, the peak, the drain time and the hatched window are all derived from those arrays.
Is anything measured?
No. The samples are generated at load from a few typed numbers (a base rate, a burst, the delivery capacity before and after a consumer joins), so the page shows the same thing every time and nothing calls a network. Choosing a queue or moving the cursor only changes what is drawn.
What do screen readers get from the charts?
Each chart is a figure with a caption written for screen readers: the peak, the drain time, the window when publishers were ahead, the consumers and the prefetch. The range has a spoken value for the minute it sits on, the figures above it show the same numbers, and a polite status line repeats them when you move.