Segmented Job Queue Stats Block for React

Edit QUEUES at the top of the file. A queue has a name, a worker, waiting, running and retrying counts, a rate in jobs per minute, and a duration in milliseconds. The backlog in the header is the sum of every waiting, running and retrying count. A duration under a second is shown in milliseconds; a longer one is shown in seconds.

The bar is one track. Each state with a count above zero takes a share of it equal to that count, with a hairline gap between segments, so the widths add up to the row. A state at zero is left off the bar and still named in the text ("0 retrying"). The key for the three weights is written once, in the header.

Waiting, running and retrying are states, not a verdict. They differ by weight of the same foreground colour, and the counts are written under the bar, so the row still reads without colour and in every theme.

Yes. The table is named, each column has a header, and the queue name is the row header. The bar is decorative because the waiting, running and retrying counts are written out under it. The worker is a badge with its name as text. Values sit in bdi elements, and the queue name and the duration are kept left to right. The table is a native table.

The duration column drops out below md, and the row names it under the queue ("Average 1.4 s"). The rate column drops out below sm and the same line names it ("180 / min"). The name, the worker and the depth stay. Nothing scrolls sideways at 320 pixels.

The table ends the block. On a page, the next section draws its own top rule along the band's foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The header fades up once when the page loads. The table does not, because on a phone it can start below the fold. With reduced motion the header simply appears.