Alert Rules Settings Block for React

Edit the constants at the top. Each entry of METRICS has an id, a label, a unit, the range its threshold may take, the value it starts at when someone chooses that metric and its series: the samples, one every 15 minutes from 09:00 UTC. SAVED is the list of rules the account has stored when the page opens, each with its metric, threshold, duration and action. DURATIONS and ACTIONS fill the two menus. Replace the typed series with the last hours of your own data, keeping the 24 samples, or change SAMPLE_MINUTES and the ruler to match.

A rule fires when its metric stays above the threshold for as many samples in a row as the duration covers (30 minutes is two samples), and it fires once per such run: the sample that completes the run is the one marked on the chart, and the rule doesn't fire again until the metric has dropped back under the line. Everything is computed from the typed samples when the page renders, in plain functions, so the chart, the count in the list and the sentence beside the chart always agree, and the numbers are checked against the same code. Nothing is sent when a rule would fire.

Because the sentence is what the rule means, and it is also the label of the controls: "When", "is above", "for" and the commas sit between the menus and the number field, so the order is the reading order and no control needs a separate caption. Each control still has its own name for a screen reader (Metric, Threshold, Duration, Action), the group is a fieldset named for the metric, and changing the metric resets the threshold to that metric's starting value, since 800 means nothing for an error rate.

Nothing leaves the page. The block keeps two copies of the rules, the saved one and the one being edited, and counts how many settings differ, so the status line can say "3 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. To make it real, send the edited copy to your API in the save handler and update the saved copy from the response, showing the error in the same status line if it fails. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.

The bars are decoration: the plot is one image named with what it shows (the metric, the period, the peak, the threshold and how many times the rule would have fired), and the same facts are written beside it as text, the count in large figures and the period in the caption. The ruler is drawn left to right in every language, since time on it runs one way. Bars over the threshold are solid and the others a quiet tint, so the chart reads without colour, and every firing carries its number.

The rules stack as rows with their switch at the end, the sentence's menus and number field wrap onto as many lines as they need, and the chart follows under the count at full width with the same 24 bars. The save bar stays pinned to the bottom of the screen while you scroll.