shadcn.io is not affiliated with official shadcn/ui
System Rebooted Success Block for React Aria
A confirmation window for a rebooted host: a table of four hosts with the rebooted one chosen, and a detail panel with its uptime, load, last boot and services in start order, each with the second it was healthy.
Installation
Overview
Confirm a restart with the evidence beside it with this confirmation window for React with React Aria. It is the Buoycheck console, server monitoring, just after a host was rebooted, in a fixed-height window with no title bar: a top bar with a success mark, the heading and the one action, the Shine Button that opens the system logs. The page side is a native Table of four hosts (name and role, last boot, uptime) with the rebooted one chosen, a detail panel that follows the chosen row (uptime, load averages, last boot and why) and, across the foot of the page side, the host's services in start order, each with a bar to the second it was healthy on a fixed 0 to 40 second axis. For monitoring, fleet and any restart you want to prove.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was restarted. The four hosts, their addresses (documentation ranges), uptimes, load averages and service times are typed sample data. To wire it, fill HOSTS from your monitoring (uptime in seconds, the services with the second each was healthy) and set CHECKED_AT to the moment those uptimes were read; the last-boot time and the uptime text are worked out from the two.
How do I choose a host?
Each host name is a button stretched over its whole row, so a click anywhere on the row chooses it and the Tab key stops once per host. The chosen row is marked with a bar and a tint and carries the current state for assistive technology, and the detail panel and the live line at the foot follow it. The panel keeps its height whichever host is chosen, because every host lists four services.
Why does the uptime not tick?
A ticking value would move the page and need a pause control, and a confirmation describes one moment. Uptimes are typed seconds counted back from one fixed moment of checking (14:22:00 UTC), so 00:04:12 is the same on every load and the boot times are fixed too. To go live, set the moment from the clock after mount and refresh it on your own schedule.
What do the service bars show?
The second after the boot at which each service was healthy, in the order the services start, on one axis from 0 to 40 seconds that every host shares, so a slow database is visibly slower than a proxy. The seconds are also written beside each bar and in the heading (healthy by 28 s), so the drawing is never the only way to read it.
How does the window behave on a phone?
It keeps its height and scrolls inside itself. The hosts come first, then the chosen host's facts, then its services; the Last boot column folds away below the small breakpoint, and the top bar's action reads Logs while its full name stays for assistive technology.
Where does the link go?
View system logs is the Shine Button in the top bar. It is a link to your own route. It is a Shine Button with href, which React Aria renders as a link.