Queue Monitor

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools7.tsx instead.

Usage

The file also exports devtools7Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools7, devtools7Demo } from "@/components/blocks/devtools/devtools7";

export default function Page() {
  return <Devtools7 {...devtools7Demo} />;
}

Props

Types

type QueueStat = {
  name: string;
  status: "healthy" | "warning" | "critical";
  processed: number;
  pending: number;
  failed: number;
  capacity: number;
};

Behavior notes

• status is a plain field you set per queue, not something derived from processed/pending/failed at render time; the block trusts whatever health verdict your monitoring pipeline already computed rather than re-deriving it from raw counts.
• The capacity bar's fill percentage (processed / capacity) is plain render-time arithmetic on the fixed props, and its color is tied to the queue's status field, not to the percentage itself.
• There is no live polling, sorting, or filtering; the rows render in the exact order of the queues array on every request.
• Status colors (emerald/amber/red) are a fixed, non-semantic accent scoped to the badge and bar fill only, per this category's status-accent convention.