shadcn.io is not affiliated with official shadcn/ui
Alert Rule Threshold Notification Block for Radix UI
A metrics service's fired alert rule you can edit: a slider moves the threshold over the last twelve CPU readings, the bars that cross it are marked and counted, and the rule rewrites itself before you save it.
Installation
Overview
Show what a different threshold would have caught before changing it, with this editable alert rule for React with Radix UI. It is Metricnest, a metrics and alert-rules service, in a hairline frame split in two by a divider with plus marks on both ends. The first cell holds the last twelve CPU readings, one every five minutes up to the page's fixed now, as bars: the ones above the threshold are solid and numbered (on wider screens), the rest a quiet tint, with the threshold as a heavy line across them and "Triggered 4 times" above. A Slider from 0 to 100 percent moves the line, and the bars, the count and the rule in the second cell rewrite as it moves: "Alert when CPU is above 85% for 5 minutes." That cell also holds a Data List of the rule's metric, threshold, how many readings triggered it, the peak, the latest reading and the saved value. Save rule and Reset are quiet Buttons, and a status line counts what is not saved. Guides draw the lines. For alert editors, monitoring tools and any rule you want to test against history.
FAQ
How do I use my own readings?
Edit READINGS (percentages, oldest first), SPACING (minutes between readings), METRIC and GROUP. AS_OF is the time of the last reading in UTC and every other time is worked out from it, so the ruler reads the same everywhere. The triggered count, the peak, the latest reading and the numbered marks are all derived from the readings and the slider's value.
How does the slider work?
It is a catalog Slider with one thumb from 0 to 100 in steps of one, labelled "Threshold", and it speaks its value ("85% of CPU"). Arrow keys move it by one, Home and End jump to the ends, and every move re-marks the bars at once. The line is drawn at the same percentage, because the chart's scale is fixed at 0 to 100.
What does Save rule do, and what stays local?
It keeps the new threshold in this page and says "Saved 85% in this demo"; Reset puts the saved one back. Both stay quiet and say why when there is nothing to do ("No changes to save."). Nothing is sent: in your app post the rule from save and take the saved value from the response.
How are the readings over the line told apart without colour?
Over-the-line bars are solid foreground and the rest a pale tint, which differ in lightness, and from the small breakpoint up each solid bar also carries a number. The same facts are in words: "Triggered 4 times", "4 of 12 readings", and the chart has a text description for screen readers.
How does it look on a phone?
The count and the slider come first, the chart under them, and the rule and its facts stack under the chart. The numbered marks are dropped below the small breakpoint (the bars are too narrow for them) and the count line takes their place. Save rule and Reset sit in a foot that stays pinned to the bottom of the screen while the panel scrolls.