Load Balancer Routing Success Block for React

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.

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.

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.

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.

The entry hostname, under .example, through the browser's clipboard. A screen reader hears that it was copied.

It is a Shine Button used as a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.