shadcn.io is not affiliated with official shadcn/ui
System Alerts by Severity Notification Block for Solid
An infrastructure monitor's alert panel: a count of open alerts by severity, and an accordion of three systems with their facts, an Acknowledge and a one-hour Mute that says when it ends.
Installation
Overview
Group what is firing by system and say how bad it is, with this system alert panel for Solid with Ark UI. It is Rackbell, an infrastructure monitor, in a hairline frame with a plus mark on each corner. The first band counts what is still open in three cells: Critical (heavier, with its own glyph), Warning and Quiet, which is what someone acknowledged or muted. Under it an Accordion holds three systems, the worst first: each header has the severity glyph, the name, the severity as a Badge word and the host with its state, and the open one shows a Data List (host, region, since, the metric that tripped) with an Acknowledge and a Mute 1 hour Button. Acknowledging stamps a time and muting says "until 10:30 UTC", an hour after the page's fixed now. One panel is open at a time and every panel is the same height. The lines come from Guides, and nothing is timed. For monitoring consoles, status boards and incident tools.
FAQ
How do I fill it with my systems?
Edit SYSTEMS: each has an id, a level of critical or warning, a name, a host, a region, an ISO since, the metric that tripped and a sentence for what. Keep them worst first. AS_OF is the page's fixed now and MUTE_MINUTES is the length of a mute, so the "until" time is worked out from them and reads the same everywhere. The three counts are derived from the systems, the acknowledgements and the mutes.
What do Acknowledge and Mute do?
They mark the system in this tab: Acknowledge stamps a demo time (a minute after now for the first) and its button becomes Undo acknowledge, Mute 1 hour says when the mute ends and becomes Unmute, and the three counts move. Nothing is sent or saved, and a reload brings everything back. In your app call your monitor from acknowledge and mute, and take the time from its answer.
Why does nothing time out?
A persistent alert should stay until someone acts on it, so there is no ticking clock and a mute is a typed length, not a timer. When a mute ends in your app your server would bring the alert back; here the page simply states when.
Does opening another system move the page?
No. Every panel has the same structure and the same minimum height, one is always open, and the headers stay where they are. Arrow keys move between the headers.