shadcn.io is not affiliated with official shadcn/ui
Health Checks Dashboard Block for React Aria
A list of eight uptime checks beside an editor with a URL field, expected status, timeout slider, interval select and region checkboxes, where Test now runs the draft against a sample response and moves the check state.
Installation
Overview
Configure an uptime check and see whether it would pass, with this health checks panel for React with React Aria. A hairline frame with a plus mark on each corner holds a list of eight Knockwell checks at the start, each with a glyph and a word (Passing, Failing or No data), and beside it the editor for the chosen one. The editor has the URL, the status code that counts as up in a NumberInput, a Slider for the timeout, an interval NativeSelect and four region Checkboxes. "Test now" runs the draft against the check's sample response and prints a line such as "Got 200 in 3.4 s, timeout 3 s: fails on timeout", then updates the check's state in the list. "Save checks" keeps the drafts on the page. For uptime tools and status products.
FAQ
How do I fill it with my own checks?
Edit CHECKS: an id, a name, a url, the expected status, a timeout in seconds, an interval in minutes and the regions. SAMPLES holds the response each check returns when it is tested, and START the state each check shows before any test. The list, the header counts and the test line are all worked out from them.
What does Test now do?
It compares the draft with the check's sample response. A different status fails on status, a response slower than the timeout fails on timeout, and anything else passes. The result updates the check's state in the list. Nothing is requested: the responses are typed, and the sample is the same every time.
What does Save checks refuse?
A draft without a full URL, with a status outside 100 to 599 or with no region. The problem shows under the field, the status line says which check to fix, and that check is selected. Saved checks stay in the page.
How do I use the list from the keyboard?
The list is one tab stop on the chosen check. Arrow up and down move focus along the list and Enter or Space chooses a check, so moving through the list never changes the editor by itself. On a phone the list is a select above the editor.