shadcn.io is not affiliated with official shadcn/ui
Service Dependency Map Error Block for React Aria
A full-screen page for one failing service in a marketplace: a framed map of five services joined by hairlines, a radio group that opens each service's panel, and a list of what still works counted from the dependencies.
Installation
Overview
Say which part of your product is down and what that means for the visitor, with this microservice down error for React with React Aria. It's a whole screen with the page's rails and one band across it. At the end of the band are the headline, one sentence and the Shine Button Keep browsing, the only colored control; at the start, drawn first on a wide screen, a framed map of five services joined by hairlines, a dashed line wherever a link is broken. The services are a native radio group, so the arrow keys move between them, and the chosen one's panel names its state, what it depends on, what needs it and when it should be back. Under it a list says what still works (browse, view your account) and what doesn't (pay, get a refund), each with a shape and a word. Every state is counted from one typed list of dependencies, so the map, the panel and the list always agree. The frame and the band's rules come from Guides, and the entrance is CSS only. For a marketplace, a SaaS app or any product made of services.
FAQ
How do I describe my own services?
Edit SERVICES. Each one has a name, a sentence about what it does, a place on the map in percent, the services it can't work without (required) and the ones it can work without (optional), and fault: true on the one that is failing. A service is down when it fails itself or a required service is down, and degraded when only an optional one is not up, so changing the fault moves the whole map. CAPABILITIES lists what a visitor can do and which services each needs, and the available count is counted from it.
Is the map usable without a mouse?
Yes. The five services are one native radio group, so Tab enters it once and the arrow keys move between services and choose them, in the order they appear in the list; each is named with its state ("Payments, Down"). Choosing one swaps its panel in place and a polite status message reads the service, its state and the recovery line. The map itself keeps its left-to-right layout in right-to-left languages, because it's a diagram.
How can you tell a broken service from a working one without color?
By shape, word and line. Operational is a solid square, degraded an outline triangle and down a cross, each next to its word, and the words get heavier as the news gets worse. A link to or from a service that is down is dashed instead of solid. The one status color is a small alert icon on the recovery estimate of the failing service.
Where does the estimated recovery come from?
It is typed (RECOVERY, "30 to 45 minutes"), because only a person can say it honestly, and it appears only on the failing service. A service that is down because of it says "Back when Payments is back" instead, counted from its required services. In your app, fill the estimate from your incident tool, and leave it out when you don't have one.