shadcn.io is not affiliated with official shadcn/ui
Server Status Table Block for Solid
An operations console window with region tabs that each name their worst state, and a sortable table of hosts per region with state, CPU, memory and disk bars ticked at 85 percent, and replication lag.
Installation
Overview
Watch a fleet by region without leaving one screen, with this server status table for Solid with Ark UI. It is a fixed-height window: a slim top bar for a hosting provider's console, then three Tabs on its top edge, each saying its worst state ("EU West, 1 degraded", "Asia, 1 down", "US East, All healthy"), then a table of that region's hosts. A host's state is a word with a dot; CPU, memory and disk are thin bars with a tick at 85 percent and the number beside each, a bar that reaches the tick turning solid; the last column is the replication lag of a replica, "Primary" for the writer and a dash for hosts without one. The heads sort (first press, reverse, then the region's own order) and the sort stays when you change region. The table scrolls inside the window and a status foot reports each sort and tab. On a phone the bars become numbers and Disk and lag go. It's built from Tabs, Badge and Guides. For operations consoles, fleet dashboards and any screen with a table per group.
FAQ
How do the tabs know their worst state?
worstOf counts a region's down hosts, then its degraded ones, and prints the worst as "1 down", "1 degraded" or "All healthy" on a second line of the tab. It is computed from the same typed hosts as the tables, so a tab and its panel never disagree. The tab is named by its text, region first.
How are the bars read, and why a tick at 85?
Each bar is the resource's share used, with a tick at 85 percent; below it the fill is a mid foreground weight and at or above it the fill goes solid, so a hot host reads without colour. The number is always beside the bar, a down host shows a dash with "No reading" for screen readers, and the bars are hidden from assistive technology. LIMIT moves the tick.
How does sorting work, and does it survive a tab change?
State starts worst first and is the opening order; Host starts A to Z, readings start highest first, and a missing reading (a down host) counts as the lowest. A third press restores the region's own order. One sort applies to every region, so changing tabs keeps it, and the foot says what changed.
Is it accessible?
The region tabs use the catalog Tabs, sort heads are buttons inside th aria-sort, and state is a word with a dot or an icon. One polite status line sits in the foot from load. The tabs are the catalog Tabs, so arrow keys move between them and Tab moves on into the table.
How does it look on a phone?
The window keeps its height and the table scrolls inside it. State moves under the host name, CPU and memory show as numbers without bars, and Disk and Replication lag are left out; the tabs keep their two lines, so each region's worst state stays visible.
What stays local, and how do I wire it for real?
The fourteen hosts and their readings are typed samples as of a fixed 9 Oct, 12:00 UTC, and nothing refreshes. To make it real, poll your metrics API for the active region, derive the state on the server from the same thresholds and keep the sort in the URL.