shadcn.io is not affiliated with official shadcn/ui
Endpoint Latency Dashboard Block for React
A heatmap of eight endpoints by the last 12 hours in a five-step ramp with the average ms in each cell, an SLA slider that rings the cells over it, and a list of the slow endpoints with their trend.
Installation
Overview
Spot which endpoint is slow, and when, with this latency heatmap for React with Base UI. A hairline frame with a plus mark on each corner holds a grid of eight Hotpath endpoints, grouped under GET and POST, across the last 12 hours. Each cell shows its average response time in a five-step ramp of the foreground colour, with the number inside. A Slider sets the SLA from 100 to 800 ms and rings every cell over it. The side cell lists the slow endpoints, worst first, with their peak, the hours over and the change from the first hour to the last as an arrow and a number in milliseconds. Pressing a cell reads it in a polite line, such as "POST /v2/orders at 14:00 UTC: 612 ms, SLA 400 ms, over by 212." It's built from Slider, Badge, Empty and Guides. For performance tools and release reviews.
FAQ
How do I fill it with my endpoints?
Edit ENDPOINTS: an id, a method, a path and averages, the average ms for each of the 12 hours. FIRST_HOUR is the UTC hour of the first column, and STEPS holds the lower edge of each ramp step. The slow list, the trend, the peak and the header sentence are all worked out from the averages.
What does the SLA slider change?
It rings the cells whose average is over it (an inner ring, with a bold number, in a colour that shows on both light and dark cells), rebuilds the Slow endpoints list and its count, and rewrites the header sentence. The ramp itself doesn't move: it's always the same five steps, so you can see how far over a cell is. At 800 ms nothing is over, and the list is replaced by a short message.
How do I move around the grid?
The grid is a single tab stop. Arrow keys move one cell, Home and End jump to the ends of a row, and Enter or Space pins the cell and reads it in the status line. Every cell is also named with its endpoint, hour, time and whether it is over the SLA.
Related
- Pro
Nine endpoints ranked by p50, p95 or p99 with a range bar on one 0 to 1,000 ms scale, an SLO slider that marks the ones over it, and a histogram of the chosen endpoint's requests.
- Pro
Eight endpoints against six probe locations as a matrix of pass, slow and fail cells, with a slider for how many locations must fail before an endpoint counts as down, and a reading for the chosen one.
- Pro
Errors per hour as a row of 24 selectable columns with a line at 60 an hour, the chosen hour's six error groups ranked by count with a Mute and Undo for each, and a sample stack trace for the group you pick.
- Pro
A day of gateway calls as 24 stacked hourly columns by status family, a toggle to show any combination of 2xx, 3xx, 4xx and 5xx, totals with the change on yesterday, and the top endpoints for the families on.
- Pro
A month's 10M-call quota as a segmented bar by consumer and a running total against an even pace, with the projected run-out day and a cap field per consumer that moves it.
- Pro
A sunset readiness panel for an old API version: a countdown bar, a three-condition gate worked out from the data, the consumers still calling v1 with a Migrated switch each, and a Confirm sunset button that stays inert until the gate passes.