Status Matrix Stats Block for React

Edit SERVICES at the top of the file: a name, eight states per service (up, slow or down, oldest first) and an issues list with a note for each window that isn't passing. The headline counts, the uptime column, the cells and the tooltips are computed from them. Change WINDOW_COUNT and headOf if your windows are not hourly.

By shape and word. Passing is a plain tone, degraded is half filled, and failed is an outlined cell with a cross, and every cell contains its word for screen readers. The destructive status dot appears only on the failed cell, as extra emphasis for the one real alert, never as the only signal. The key under the table shows the three looks.

The degraded and failed ones, which are buttons you can reach with the keyboard; the tooltip opens on hover or focus and says the service, the window and what the check saw. Passing cells have no tooltip because there is nothing to add; they are plain cells with the word Passing for screen readers. All the information is also in the table and in the uptime column, so a tooltip is only a convenience.

Each service scores one point for a passing window and half a point for a degraded one, then divides by the number of windows and rounds to a tenth of a percent. The caption under the table says so. A service with one degraded window out of eight is 93.8%.

The two oldest windows drop out so the six newest cells stay about 25 pixels wide at 320, the uptime column hides, and each service's uptime moves under its name. Nothing scrolls sideways.