shadcn.io is not affiliated with official shadcn/ui
Maintenance Completed Success Block for React
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 Base 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 render set to an a element and nativeButton={false}.
Related
- Pro
System Rebooted Success
Servers and storageA confirmation window for a rebooted host: a table of four hosts with the rebooted one chosen, and a detail panel with its uptime, load, last boot and services in start order, each with the second it was healthy.
- Pro
Deployment Live Success
Builds and deploysA confirmation window for a live deploy: a drawn browser with the real address and a copy button, a group of buttons that redraws the site at desktop, tablet and phone width, and the deploy's facts and four passed checks beside it.
- Pro
Schema Migrated Success
Builds and deploysA confirmation panel for three database migrations: figures worked out from the ledger, an accordion of the migrations with their SQL as plus and minus lines, and a Roll back button that asks in an alert dialog before it changes the ledger.
- Pro
Backup Restored Success
Backups and exportsA confirmation page for a restore from a snapshot: the snapshot and the live database side by side with the same five tables, their row counts and checksums, a Match worked out for every pair, the checksum of the whole snapshot with a copy button and a local health check.
- Pro
Storage Optimized Success
Servers and storageA confirmation panel for a compaction: three cells on shared hairlines, one table each, with the size before as a hollow bar, the size after solid and the reclaimed part hatched, worked out from typed sizes, and a toggle group that sorts the tables.
- Pro
Cluster Scaled Success
Servers and storageA confirmation window for a scaled cluster: twelve node slots in a framed canvas that a number field redraws, an Autoscale switch that dashes the room to grow, and the vCPU, memory, requests and monthly cost worked out from typed per-node figures.