shadcn.io is not affiliated with official shadcn/ui
Endpoint Check Run History Monitoring Block for Vue
The last 30 one-minute runs of one health check from four regions as a grid of marks, the alert rule shown as a bar over the runs it was met on, a side cell for the chosen run and a Run from all regions button.
Installation
Overview
Show whether a check is passing from everywhere, and when it started to fail, with this run history for Vue with Ark UI. It is Pingfold, a check service, probing GET /health on a made-up host once a minute from Virginia, Frankfurt, São Paulo and Singapore. A hairline frame with a plus mark on each corner holds a grid with a row per region and a cell per run, newest last: a check for a pass, a triangle for a run over 800 ms and a solid cross for a failure. A bar over the grid fills on the runs where the rule "alert after 2 failing runs from 2 regions" was met, worked out from the cells, and the header sentence is worked out the same way ("Alerting since 14:12 UTC: São Paulo fails with 504, Singapore is slow."). Choosing a cell, with the mouse or the arrow keys, shows that run in the side cell: its status, the time of DNS, connect, TLS and first byte, and three assertions (status is 200, body contains "ok", under 800 ms) with what was measured. The Shine Button Run from all regions is the one coloured control. Guides draw the frame and its bands; the entrance is CSS only. For uptime monitors, synthetic checks and any alert that needs a quorum.
FAQ
How do I load my own runs?
Edit REGIONS: each has a codes string with one letter per run, oldest first (p passed, s slow, f failed), a typical time base and the status a failing run returns. The time of a run, the steps inside it, the assertions and the alert bar are all worked out from those letters and AS_OF, the time of the newest run. In your app map your probe results to the same three letters and keep the numbers beside them.
How is the alert rule decided?
The rule is typed text, not a control: a run counts as met when at least 2 regions have been slow or failing for 2 runs in a row, ending on that run. metAt works that out for every column, which fills the bar and decides the sentence. Change RULE_REGIONS and RULE_RUNS to change both.
What does Run from all regions do?
It adds a thirty-first column where every region passes and drops the oldest, so the grid keeps its width, and says "Ran in this demo; nothing was probed". After the run the alert bar and the header say the alert cleared. Nothing is sent and a reload puts the runs back. In your app call your probe, then append its results.