System Rebooted Success Block for React

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.

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.

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.

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.

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.

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 render set to an a element and nativeButton={false}.