shadcn.io is not affiliated with official shadcn/ui
Platform Overview Dashboard Block for Svelte
An operations window whose sidebar lists four regions and two environments with open-incident counts, and whose page shows four figures and six services for the pair you pick, with an Only problems toggle.
Installation
Overview
Give a hosted product its whole operations view with this platform overview for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar with two groups, Regions (Global, North America, Europe and Asia-Pacific) and Environments (Production and Staging), each item with a count of open incidents. The page follows the pair you pick: a line of four figures (uptime, active users, median latency and error rate), a sentence such as "Europe, Production: 1 of 6 services degraded", and the six services as ruled rows with a state word and their latency. Global is worked out from the three regions, taking the worst state of each service and weighting the figures by users. The top bar holds an Only problems Toggle and the list has an Open the status page button. The rail collapses to icons with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Toggle, Button, Empty, Avatar and Guides. For operations teams and hosted-software dashboards.
FAQ
How do I fill it with my regions and services?
Edit REGIONS, ENVS and SERVICES, then CELLS: one entry per region and environment with a reading (uptime, users, median latency, error rate) and one state per service. The figures, the badges, the sentences, the empty message and the foot are all worked out from CELLS. Global is not typed: it combines the regions of the chosen environment.
How do the two groups work together?
Choosing a region keeps the environment and choosing an environment keeps the region, so both groups show a current item. The badge on a region counts the services that are not operational in the environment you are on, and the badge on an environment counts them in the region you are on. No badge shows at zero, and the link's name carries the count for screen readers.
What does Only problems do?
It hides the operational services from the list. If a region has none to show, the list is replaced by a message in the same scrolling area, so the window never changes size. Turn the toggle off to list all six again.
What stays local, and how do I connect it?
Everything: every figure and state is typed, Open the status page only says it opens in your product, and a reload starts over. The items are links to # whose handler changes the view instead of navigating. Point them at your routes and load the readings from your monitoring.