shadcn.io is not affiliated with official shadcn/ui
API Health Dashboard Block for React
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.
Installation
Overview
Answer "is it down, or only one region?" with this probe quorum panel for React with Base UI. Inside a hairline frame with a plus mark on each corner, a matrix shows eight Probehall endpoints from three services against six probe locations. Each cell is a glyph and its response time: a check for a pass, a triangle for a slow answer, a solid cell marked Fail for a probe that didn't answer, never only a colour. A Slider sets how many locations must fail before an endpoint counts as Down; fewer than that is Regional and none is Healthy, and the header counts and each row's state follow. Choosing an endpoint reads its six response times in the side cell and names the slowest location. It's built from Slider and Guides, with CSS entrances only. For status pages, uptime tools and on-call dashboards.
FAQ
How do I fill it with my probes?
Edit LOCATIONS and ENDPOINTS. Each endpoint has an id, a method, a path, a service and readings: one response time in ms for each location in order, or null for a probe that failed. SLOW_MS is where a passing probe starts to count as slow. States, counts and sentences are worked out from the readings.
What does the quorum slider do?
It sets the number of failing locations at which an endpoint is Down, from 1 to 6 (default 3). With 3, an endpoint failing from two locations reads Regional and one failing from three reads Down. Slow answers are not failures and never count toward it. Moving the slider rewrites every row's state and the three counts at once.
What stays local, and how do I wire it for real?
Everything: nothing is probed, the readings are typed for a fixed time and the matrix never refreshes. To make it real, feed readings from the latest result of each probe, keep the time shown in the note next to them, and decide your own quorum default.
How is the matrix read by a screen reader?
It's a table with a caption, column headers named by location (the airport-style codes are visual; the full names are read) and a row header for each endpoint. Every cell says the location, whether it passed, was slow or failed, and its time in milliseconds. The chosen endpoint's button is marked with aria-current, and a polite status line reports the new counts when you move the slider.
Related
- Pro
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.
- 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
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 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.
- 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.