shadcn.io is not affiliated with official shadcn/ui
Alert Rules Monitoring Block for Svelte
Five alert rules with a state word and an enabled switch each, a 24-hour backtest with a hold-for number field that shows when the rule would have fired or stayed pending, and a Save rule foot.
Installation
Overview
Test how long a breach must last before a rule pages you, with this alert rules panel for Svelte with Ark UI. It is Cairnbell, an alerting service (made up), with five rules: each row has a name, the condition in mono, a severity word, a state word of Firing, Pending, OK or Paused and a Switch that enables it. Choosing a rule shows its last 24 hours at three-minute steps with the alert line labelled and a Number Input for how many minutes the breach must hold (0 to 15). A breach that ends sooner is Pending, drawn with a light hatch; one that holds is Firing, drawn with a heavier hatch from the moment it held, and a sentence says how many times the rule would have fired, when, and how many times it stayed pending. The foot counts unsaved changes and carries the one primary, Save rule, which is disabled until something changes. On a phone the list is a select. Guides draw the frame and its bands. For alerting setups, on-call tools and any threshold with a for clause.
FAQ
How do I use my own rules?
Edit RULES: each has a name, the condition text, the limit, and a series of 480 three-minute samples. The demo builds series with seriesOf(seed, limit, episodes), where each episode is start|length|height; replace it with your own numbers. SAVED holds each rule's saved hold and whether it is enabled.
How is the backtest worked out?
A breach is a run of samples over the limit. A run that lasts at least the hold in minutes would have fired, at the moment it had held that long; a shorter run stays pending. Holding 0 minutes fires on the first sample. The state word on a row uses the same rule on the last sample, and the sentence under the chart is built from the same runs.
What does Save rule do?
It copies the chosen rule's hold and enabled state into the saved copy and says so in the status line. The button stays focusable and answers when nothing changed. Nothing is sent: wire it to your alerting API and keep the status line for the result.
Does the number field accept typing?
Yes. Type a whole number from 0 to 15, or use the arrows; anything else is read as the nearest value in range. Under React Aria the field commits on blur, Enter or an arrow rather than on each key.