API Latency Dashboard Block for React

Edit ENDPOINTS. Each has an id, a method, a path and buckets: how many requests landed in each of the 12 latency buckets (EDGES holds their lower edges in ms, and the last bucket is open at 1,000 ms and up). Counts are in thousands a day. Nothing else is typed: the percentiles, the request counts, the bars and the histogram are all worked out from the buckets.

percentileOf walks the buckets until the running count reaches that share of all requests, then interpolates inside the bucket it lands in and rounds to the nearest 5 ms. Results are capped at the 1,000 ms end of the scale and shown as "1,000+". A real monitor would send exact percentiles from its store; the buckets are what most metrics systems keep anyway.

It moves the thin line in every range bar, decides which endpoints get the Over mark at the chosen percentile, updates the count in the header, and sets the share of the picked endpoint's requests that fall in buckets starting at or above it. It moves in steps of 100 ms so it always lands on a bucket edge, which keeps that share exact rather than estimated.

Everything: the bucket counts are typed and nothing is measured. Replace ENDPOINTS with histogram counts from your metrics store for the period you want, keep the 12 edges or change EDGES to match your own, and take the SLO's default from your objective.

Yes. The percentile control and the SLO slider take arrow keys, each endpoint's name is a real button, and the table has a caption, column headers and row headers. The selected row is marked with aria-current, the histogram has a text label with its figure, and a polite status line reports the ranking and the count over the SLO. Over is a word and an icon, never only a colour.

The range bar and the p50 column drop out (p50 comes back when it's the percentile you rank by), leaving the endpoint, p95 and p99, and the histogram stacks under the table.