shadcn.io is not affiliated with official shadcn/ui
Service Monitor Command Menu Block for React
An uptime monitor's command menu shown open as a tall panel over the Monitors dashboard: nine services with degraded ones first, a 12-point latency sparkline each, and Acknowledge to clear an open alert.
Installation
Overview
Find a service and acknowledge what is degraded with this uptime monitor command menu for React with Base UI. It opens from the Monitors dashboard in Vigilfield, an uptime monitoring tool, whose header holds an outline field with its ⌘ K cap, and the dashboard is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command docked as a tall panel at the end: nine services, the degraded ones first under Needs attention and the healthy ones under them. Each row shows its state as a glyph and a word, never a colour, its region, its latest latency and uptime as text, and a 12-point latency sparkline drawn as an SVG path. Acknowledge, on the row or with Alt A, marks a degraded service Acknowledged and the alert count on the dashboard behind the menu falls. Phones drop the sparkline and keep the text. For the preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same services and acknowledgements. For status boards, on-call tools and any list where what is wrong comes first.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of the Monitors dashboard, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so an acknowledged service in the copy is still there in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How is a service's state shown without colour?
Each row starts with a glyph, a warning triangle for Degraded and a tick for Healthy, and the second line spells the state out in words along with the region, the latest latency and the uptime. Degraded services sit under their own heading, Needs attention, above the healthy ones, and an acknowledged one stays in that group with an Acknowledged badge. The sparkline is a picture of the last twelve readings and is hidden from screen readers, which hear whether the series is rising, falling or steady.
How does Acknowledge work, and what does it change?
The Acknowledge button on a degraded row, or Alt A (Option A on a Mac) on the highlighted row, adds the service to a list of acknowledgements. The row's button becomes an Acknowledged badge and the alert count in the dashboard's header, drawn behind the menu, drops by one. Enter does something else: it says how the service is doing on the status line. Acknowledging a healthy or an already acknowledged service says so instead of doing anything. The menu stays open throughout.
How is the sparkline drawn?
Twelve latency readings per service are typed data. pathOf turns them into one SVG path inside a 64 by 18 box, with the last point as a dot, and every coordinate is rounded so the server and the browser print the same markup. The line takes the row's text colour, so it follows the theme and turns to full foreground under the highlight. It is hidden below the small breakpoint.
What stays local, and how do I wire it?
All of it. The services, their readings and the acknowledgements are state in the block, and nobody is notified; the status line says so. In your app load SERVICES from your monitoring API, send the acknowledgement from acknowledge, and keep the optimistic update so the count falls at once.
Is it accessible from the keyboard?
Type to filter by name or region, the arrow keys move through the rows, Enter reads out the service, Alt A acknowledges the highlighted one and Escape closes the menu with focus back on the header's field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. Every Alt A also has a button on its row. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.