shadcn.io is not affiliated with official shadcn/ui
Load Balancer Dashboard Block for React Aria
Six backends with connections, throughput, latency and weight, a rule switch (round robin, least connections, weighted) that redistributes the next 1,000 requests as bars, and a switch per backend that takes it out of rotation.
Installation
Overview
See what a balancing rule does before you set it, with this load balancer panel for React with React Aria. A hairline frame with a plus mark on each corner lists six Evenkeel backends with their open connections, requests a second, latency and weight. A Toggle Group in the header picks the rule: round robin deals the next 1,000 requests out evenly, least connections gives each request to the backend with the fewest open connections, and weighted splits by weight. Each row shows the share that backend would take as a bar and a count. A Switch on each row takes a backend out of rotation and its share spreads over the rest, and the last one in rotation refuses to leave. A note says it models the rule, not live traffic. It's built from Toggle Group, Switch and Guides. For traffic managers and capacity reviews.
FAQ
How do I fill it with my backends?
Edit BACKENDS: a name, open connections, requests a second, mean latency in ms and a weight. Everything shown follows from them and from BATCH, the number of requests being dealt out.
How is each rule calculated?
Round robin divides the batch evenly among the backends in rotation, the first ones taking any remainder. Least connections simulates the batch one request at a time: each goes to the backend with the fewest open connections, which then holds one more, so busy backends get nothing until the others catch up. Weighted divides in proportion to the weights, with the largest remainders taking what is left.
What happens when I turn a backend off?
Its share goes to zero and the rule is run again over the backends still in rotation, so the others take more. If only one is left, its switch refuses to turn off and the status line says at least one backend stays in rotation.
What stays local, and how do I wire it for real?
Everything: connection counts are typed, nothing is routed and the switches only change this page. To make it real, read connections and health from your proxy's stats endpoint, and send rotation changes to its admin API.