Sortable Service Health Table Stats Block for React

Edit SERVICES at the top of the file. A service has a name, a region, its current state (now), the median response time, the errors rate and a list of incidents, each a day from 1 to 30, a kind (degraded or outage) and the minutes it lasted. The strips, the uptime figures, the count in the headline and the spoken description of every strip are computed from the incidents.

An outage's minutes count in full and a degraded incident's minutes count at half, out of the minutes in the 30 days. The rule is written under the table, and a service with no incidents reads 100.00%.

Each sortable head is a button. The first click on a head puts the worst rows on top (lowest uptime, slowest response, highest error rate, or service names A to Z); a second click turns the order around. The active head carries aria-sort, and a hidden status line says how the rows are ordered, for example "Sorted by uptime, lowest first". The order is local to the page.

Only a service that is degraded or down right now: a warning or destructive mark with a triangle or a cross, and the words "Degraded now" or "Outage now". Every other row is quiet. The strip tells days apart by height and weight, not hue.

Yes. It is a native table with a caption, column headers and the service as the row header. Each strip is an image whose name says how many outage and degraded days it holds. The sort buttons are real buttons with a visible focus ring, and the scroll area is focusable where the table is wider than the screen.

The 30-day strip drops out below md and the response time below sm. The service, its uptime and its error rate stay, and every head still sorts.