shadcn.io is not affiliated with official shadcn/ui
Database Restored Success Block for React
A 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.
Installation
Overview
Show exactly where a restored database stands in time with this confirmation panel for React with Base UI. It is the panel Sedgepool, a managed Postgres service, shows after a point-in-time restore: a header with one action, the Shine Button Connect now, over one framed card in two parts. The first is the day on a 24-hour strip in UTC, one cell per hour, filled up to the restore point, 14:22, with a bar under each hour that has a snapshot; a range laid over the strip previews another point and a sentence says which snapshot and how many minutes of log it would use and how much it would leave out. The second is the copy's connection: its string in monospace with a Copy Button, its parts, and a password shown only as a masked placeholder. For managed databases, backups and any recovery by time.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was restored or connected. The times, the host (under .example) and the string are typed sample data, Connect now waits a moment and says so, and no password exists: the string carries the word PASSWORD where one would go and Reveal stays off. To wire it, set RESTORED and INCIDENT from your restore job and the string from your instance; the snapshot and log, the 14 s and every cell are worked out from them.
How do I read the strip?
It is the day in 24 hourly cells. A cell is filled when its hour is in the copy (the hour of the restore point is filled as far as the point), a short bar under a cell marks the snapshot taken at the start of that hour, and a tick marks the restore point. The strip is a single image for assistive technology, with a sentence that says the same, and it stays left to right in a right-to-left page.
How does the preview work?
A native range lies over the strip and covers the part of the day up to the moment of the incident, so dragging or the arrow keys (one minute at a time) move the point. The sentence under the strip changes at once and the live line speaks a short version about half a second after you stop. Back to 14:22 returns to the restored point. It only previews: nothing is restored.
How are the 14 seconds worked out?
The incident is typed as a second of the day (14:22:14) and the restore point as a minute (14:22). The writes a restore leaves out are the incident less the point, 14 s at the restored point and, for a preview at 11:05, 3 h 17 min 14 s.
Related
- 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
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
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
Instance Provisioned Success
Servers and storageA confirmation window for a new server: a list of its facts beside three connect tabs (SSH, SFTP and Docker context) with copyable commands, and the 48 seconds it took as four steps on a time axis.
- Pro
Backup and Restore Settings
Backups and exportsA backups page with a list of six snapshots and the three-step restore that opens from it, shown open on load: choose what to bring back, read the impact and type the snapshot date to confirm, then watch a progress bar fill and end on a plain statement that nothing was restored in the demo.