shadcn.io is not affiliated with official shadcn/ui
Alert Rule Threshold Notification Block for React
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 Base 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.
Related
- Pro
Alert Rules Settings
Alerts and auditAn alert rules panel where each rule is a sentence you edit in place with menus and a number field, beside a framed chart of its metric with the threshold line and a computed count of how often it would have fired.
- Pro
Usage Alerts Billing
Plan and usageUsage alert settings: percentage thresholds as switches with number inputs, recipients as email chips, and a choice between email and a webhook, with a save that checks them.
- 120Pro
System Alerts by Severity Notification
Incidents and alertsAn 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.
- Pro
A rate-limit warning with a meter marked at 70, 90 and 100 percent, a 42-second reset countdown you can pause, and a sortable table of the six endpoints behind the traffic with their share as a bar.
- Pro
Alert Banner Notification
Incidents and alertsAn operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.
- 502Pro
Failed API Request Notification
Incidents and alertsOne failed request from an API gateway: a 502 with the endpoint, upstream, time and request id (with a Copy), tabs for the request, the response and the headers in numbered code windows, and a bounded simulated Retry.