shadcn.io is not affiliated with official shadcn/ui
Backup Restored Success Block for React
A 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.
Installation
Overview
Prove a restore matches its snapshot 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 restore icon in a muted tile, the heading and one sentence, then a framed card. Its first part is two cells side by side with a divider, the snapshot of 9 Oct and the live database, each listing the same five tables with their rows and a short checksum, and a Match mark beside each live table; the second holds the checksum of the whole snapshot with a Copy Button. The foot has the one primary, a Shine Button to the dashboard, and a Run health check button. For file and database backup and any restore you have to sign off.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was restored or checked. The tables, their counts and checksums are typed sample data (the checksums are made up from a seed), and Run health check waits a moment and says it checked in this demo. To wire it, fill TABLES with the rows and checksums you read from the snapshot and from the live database, set STARTED and FINISHED, and replace the wait in run with your health check.
How is Match decided?
By comparing, for every table, the rows and the checksum on the two sides. A pair that is the same shows a check and Match, a pair that differs shows a minus and Differs, and the sentence at the top counts the pairs that match. In the typed data every pair is the same.
What does Run health check do?
It waits a moment (the label becomes Checking… and the button keeps its size) and then says in the live line that all five tables answered, and the live cell's heading changes to Checked 14:23 UTC. Pressing it again says it ran again. It is local: connect it to a real check.
What does the copy button copy?
The checksum of the whole snapshot (64 hexadecimal characters, made up for the demo), through the browser's clipboard, and it says what it copied.
How does it look on a phone?
The two cells stack with the snapshot first. To keep the page within about one and a half screens the checksums and the word Match are read out instead of shown, with a check mark kept beside each live row, and the foot with the two buttons is pinned to the bottom of the screen.
Where does the link go?
Open the dashboard 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
Database Restored Success
Backups and exportsA confirmation panel for a point-in-time restore: the restore point on a 24-hour strip with a range that previews other points, the snapshot and log it is made of, the writes it leaves out, and the connection string with a copy button.
- Pro
Backup Created Success
Backups and exportsA full-height confirmation page for a database backup: fourteen day cells as a retention rack where each pick shows when its snapshot is deleted, a snapshot id and a restore command with copy buttons, a local Test a restore, and a real download of a small JSON manifest.
- 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
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
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
Data Import Success
Backups and exportsA confirmation panel for a finished CSV import: one bar split into imported, duplicate and failed rows by their counts, a scrolling ledger of the failed rows with the problem and what the file had, and a real CSV error report built from the typed rows.