shadcn.io is not affiliated with official shadcn/ui
Endpoint Latency Dashboard Block for React Aria
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 React Aria. 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.