shadcn.io is not affiliated with official shadcn/ui
Storage Optimized Success Block for React
A 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.
Installation
Overview
Show what a compaction gave back with this confirmation panel for React with Base UI. It is the panel Trimbase, database compaction, shows once three tables were compacted: a header with one action, the Shine Button that opens the report, over one framed card. A toolbar holds one control, a Toggle Group that sorts the tables by name or by what they gave back. Under it are three cells on shared hairlines, one table each, with the reclaimed size and its share and one bar on a scale the three share: hollow for the size before, solid for the size after and hatched for what was reclaimed. A key and the live line close the card. For databases, volumes and any cleanup that frees space.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was compacted. The three tables and their sizes (in megabytes) are typed sample data. To wire it, fill TABLES with each table's size before and after from your job; the reclaimed size, its share, the totals, the bar lengths and the sentences are worked out from those two numbers.
How do I read the bars?
Every bar is as long as its table was before, on one scale that ends at the longest table (4.7 GB here), so tables are comparable. The solid part is the size after, the hatched part is what was reclaimed, and a key says so. The sizes are also written under each bar, so the drawing is never the only way to read it, and the bars stay left to right in a right-to-left page.
How does sorting work?
The two buttons, Name and Reclaimed, are one group with one always chosen. Name puts the tables in A to Z order and Reclaimed puts the table that gave back most first. The cells swap places, the panel keeps its height, and the live line says how they are sorted.
Which numbers are worked out?
For each table the reclaimed size (before less after) and its share in whole percent, and for the three together the totals (11.1 GB to 7.0 GB), the 4.1 GB reclaimed and its 37 percent. Sizes from a gigabyte up show one decimal.
How does it look on a phone?
The three cells stack in the order you chose and the toolbar wraps, with the sort buttons under the count.
Where does the link go?
View the report is the Shine Button in the header. 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
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
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
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.
- Pro
Maintenance Completed Success
Servers and storageA 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.
- 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.