shadcn.io is not affiliated with official shadcn/ui
Server Uptime Timeline Block for Radix UI
A thirty-day uptime rail that breaks at five outages: up-stretches drawn by days, each outage with its minutes and cause, the longest run derived, and a Target select that re-derives the error budget and its meter.
Installation
Overview
Show how long a service stayed up, and where it did not, with this server uptime timeline for React with Radix UI. It is written for Holdsteady, a fictional uptime report, and draws the last thirty days of one service. The rail is a solid line where the service was up, its length following the days, with a label such as 12 days up, and it breaks at each of five outages, a square node with the minutes down and the cause. A band above it derives the longest run without an outage and the error budget for the target chosen in a Native Select in the header, 99.5%, 99.9% or 99.95%: the minutes allowed, the minutes used, what is left or by how much it is over, and a Progress meter beside the words Within budget or Over budget. The rail is text, so it is its own text equivalent. The figures are example data.
FAQ
How do I change the outages?
Edit OUTAGES, each with a start time, minutes and a cause. The up-stretches between them, the labels, the row heights, the longest run and the budget are all derived from those and the period start.
How is the budget worked out?
The period is minutes between PERIOD_START and AS_OF. A target is held as hundredths of a percent, so 99.9% allows floor(43200 * 10 / 10000) = 43 minutes. Used is the sum of outage minutes.
What stays local in the demo, and how do I wire it for real?
The target is the only state. For real data, pass your outage list and the period; keep minutes whole so the totals match what the meter shows.