Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Disk IOPS Dashboard Block for React Aria

Seven volumes with a 24-hour IOPS sparkline against the provisioned baseline and a burst credit balance that drains above it, a reads and writes toggle, and a chart of the chosen volume's day.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Find the volumes about to run out of burst credit with this disk panel for React with React Aria. A hairline frame with a plus mark on each corner lists seven Spindlework volumes, each with a sparkline of its last 24 hours of IOPS and a dashed line at its provisioned baseline, and a bar for the credit left in its bucket. The bucket fills while I/O is under the baseline and drains above it, and the header counts the volumes that would empty within four hours at the last three hours' pace. A Toggle Group reads the lines as all I/O, reads or writes. Pressing a row draws that volume's day in a chart: the IOPS line, the baseline and the balance as a shaded area. It's built from Toggle Group and Guides. For storage and database operations.

FAQ

How do I fill it with my volumes?

Edit VOLUMES: a base (the provisioned IOPS), the day's low and peak, the bucket size max in thousand I/O, the reads share and the start fill. The demo draws the hours from the DAY shape and a seeded scatter. Replace totalsOf and readsOf with your hourly counters to use real data.

How is the credit balance worked out?

Each hour adds (baseline minus IOPS) times 3.6 thousand I/O to the bucket, kept between empty and the bucket size. The sentence under the chart says so. Credits always count all I/O, so the balance does not change when you pick Reads or Writes.

How does it decide a volume is about to run out?

It takes the mean IOPS of the last three hours. If that is above the baseline, it divides the credit left by the hourly drain; four hours or fewer counts, and the row shows a warning icon with the time left. A volume under its baseline reads "Refilling".

What stays local, and how do I wire it for real?

Everything: no volume is read. Feed the hourly IOPS from your block-storage metrics, take the bucket size and baseline from the volume's type, and read the real balance from the provider if it reports one.

How does it look on a phone?

Each volume becomes two lines, its name and credit over a full-width sparkline, and the chart for the chosen volume keeps its full width below the list.

All 200 dashboard blocks