Status Ops Board Features Block for React

Edit SERVICES: each has a name, a target and one Reading per span, which is the share of the error budget left (0 when it is spent) and the shape of the burn (flat, rising, falling or spike). The sparkline is drawn from the shape plus a little noise seeded by the service, so it is the same on the server and in the browser; to draw a real series, return it from sparkOf as 24 numbers between 0 and 1. The conditions, the burn rates and the footer's summary are all counted from the readings.

Under 20% of the budget left, a service is burning, and its bar takes the warning tone. With none left it is exhausted. Otherwise it is healthy. The status is also written as a word, so colour is never the only signal, and the threshold is BURNING_UNDER at the top of the file.

It is the average burn over the last six points of the sparkline, where 1× spends the budget exactly at the pace the target allows and 2× spends it twice as fast. It is counted by rateOf from the sparkline's own points, so the number and the line agree.

Each row is a list item with the service as a heading, and its figures are text: the target, the share of the budget left (with an unseen "of the error budget left"), the burn rate and the status word. The bars and sparklines are decoration. The footer's summary is a polite live region, so pressing a toggle button announces the new counts.

The columns become three lines inside each row: the name with its status, the budget bar with its figure, then the sparkline with its rate. The column headings are dropped. Nothing scrolls sideways at 320 pixels.

The bars and the sparklines keep their direction in every language, because a time series does. Names, targets, statuses and the footer follow the page, and values with a unit are wrapped so they don't reorder.