shadcn.io is not affiliated with official shadcn/ui
Maintenance Completed Success Block for Radix UI
A confirmation page for a finished maintenance window: planned against actual on one time axis from 02:00 to 05:00, the early finish worked out, and four services that each pick a tick on the axis and say when they came back.
Installation
Overview
Close a maintenance window with proof that it ran short with this confirmation page for React with Radix UI. It fills the screen: the page's two side rails run its full height and one band crosses it between two rules with a plus mark where each meets a rail. In the centred column are a wrench in a muted tile, the heading and one sentence, then a framed card in two parts. The first draws the window on one axis from 02:00 to 05:00 UTC: a hollow hatched bar for the plan, a solid bar for what happened and the time saved dashed after it. The second is a group of four buttons, one per service, each with the minute it came back and the time its check passed; picking one moves a tick on the axis. The foot has the one primary, a Shine Button to the post-mortem. For hosting, status pages and any planned work.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was maintained or checked. Every time is typed sample data, held as minutes of the day (the plan 02:00 to 04:00, the end 03:18, each service's return and check). To wire it, fill PLANNED_END, ACTUAL_END and SERVICES from your incident tool; the 42 minutes early, the length of each bar and every sentence are worked out from them.
How is the axis drawn, and is it accessible?
With plain boxes in percent of the three hours, hidden from assistive technology, with the same facts in a caption under it (planned 02:00 to 04:00, actual 02:00 to 03:18, finished 42 minutes early). The time axis stays left to right in a right-to-left page, and on a phone the ruler shows hours only.
What does picking a service do?
The four services are one group with one always chosen. Choosing one moves the tick on the actual bar to the minute that service came back and rewrites the live line (for example Database came back at 03:05 UTC, 13 minutes before the window closed, and its check passed at 03:20). Each row keeps its height, so the card never changes size.
Which numbers are worked out?
The early finish (the planned end less the actual end), both lengths, the position of every bar and tick, the count of operational services and how long before the close each service was back. The only typed values are the minutes.
How does it look on a phone?
The card keeps one column, the ruler shows hours only and the foot with the post-mortem link is pinned to the bottom of the screen so the one action is always within reach.
Where does the link go?
View the post-mortem is the Shine Button in the foot. It is a link to your own route. It is a Shine Button with asChild around an a element.