System Alerts by Severity Notification Block for React

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.

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.

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.

No. Every panel has the same structure and the same minimum height, one is always open, and the headers stay where they are. Tab moves between the headers; arrow keys do not.

By word, glyph and weight: Critical has a solid badge, a bold figure in the summary and a semibold name; Warning has an outline badge and a medium figure; Quiet is regular and muted. Only the critical glyph takes the destructive status colour.

Each header is a heading with a button inside, the buttons name their system ("Acknowledge: Database"), and a polite status line gives the new counts after each action ("1 critical, 1 warning, 1 quiet"). The facts are a description list, so every value keeps its label.