shadcn.io is not affiliated with official shadcn/ui
Load Balancer Routing Success Block for Solid
A confirmation window for a new load balancer: the routing drawn top-down from clients through the balancer to three zones of backend dots, the entry hostname with a copy button, and a zone picker that lists the chosen zone's four backends with their addresses.
Installation
Overview
Show where traffic will go with this confirmation window for Solid with Ark UI. It is the Sluicemoor console, a cloud-networking product, just after a load balancer came up, in a fixed-height window with no title bar: a top bar with a success mark, the heading and the one action, the Shine Button that opens the targets, then the entry hostname with a Copy Button. The routing is drawn in greyscale and top-down: clients, the balancer, and three zone columns of backend dots, twelve in all and every one healthy, with the chosen zone ringed. A Toggle Group picks the zone, and the side shows the balancer's facts and that zone's backends with their addresses and the time of their last check. For cloud consoles, networking tools and any setup that fans out to servers.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was provisioned or checked. The zones, the twelve backends, their addresses (documentation ranges) and the check time are typed sample data, and the picker only changes what the window shows. To wire it, build ZONES from your balancer's target groups, take each backend's healthy from its health check, and fill BALANCER from the listener.
How does the window behave?
It keeps its height on every width (36rem on a phone, 46rem from the medium breakpoint), nothing the visitor does changes it, and on a phone the window scrolls inside itself: the diagram and the zone picker come first, the balancer's facts and the backends under them. Tab goes through the top bar, the copy button, the zone group and then the backends' region.
What does the zone picker do?
It is a group of three buttons with one always on. Choosing one rings that zone in the drawing, changes the heading and the four backends in the side (each with its name, address, "Healthy" and the time of the check) and says "Zone b: 4 of 4 backends healthy." in the status line.
Is the drawing accessible?
The drawing is hidden from assistive technology and every fact in it is also text: a caption says that twelve of twelve backends are healthy, the group and the list name each zone, and the list gives each backend's state in words. A healthy backend is a filled dot and an unhealthy one would be hollow. The drawing is left-to-right whatever the page's direction. On a phone the names beside the dots and the caption are kept for assistive technology only, to keep the picker in view.