Live Request Rate Navbar Block for React

Edit ENDPOINTS (a name, a path, a p95, requests, errors and a state of operational or degraded) and RATES for the requests-per-second samples. The error text is errors over requests across the list, rounded to a tenth of a percent, and the dot is a warning only when some row is degraded. Edit PAGES for the links. Mark the page you're on with current: true: that link gets aria-current="page" and a stroke on the bar's bottom edge. Every link points at #.

It starts at the first sample and advances one step every two seconds. It does not tick while the document is hidden, and it does not start at all when the visitor prefers reduced motion. It does not announce each tick: the number is visual, and the button is not named with the live value.

Charges, Refunds, Payouts and Customers, with the path, the p95 and a state. Refunds is the degraded row in the sample, so the bar's dot is a warning and the row says Degraded. The caption under the table restates the error rate against the request total. The table is a native table named Endpoint health.

The wordmark is a link home. The links sit in a nav landmark named Main. The readout is a button. Its popup is named Endpoint health. The popup is not modal. Tab can leave it, and Escape closes it. The status dot is hidden from assistive tech; the state word in the table is the name a screen reader gets.

The readout stays. Below md the links hide and a menu button opens a sheet from the top with the same three links. Choosing a link closes the sheet. At 320 pixels the error rate is visually hidden and stays in the button for assistive tech, so the bar is the wordmark, the dot, the counter and the menu button.

Nothing moves on load. The counter steps every two seconds unless reduced motion is set, in which case it stays on the first sample. The popup uses its own open transition, and the sheet slides down from the top. With reduced motion the sheet appears without sliding.