Blue Green Swap Zero Downtime Deploy Block for React

Edit the typed lists at the top of the file: STAGES holds, per toggle choice, the percent of traffic on green, the role and how many of the six instances are up in each environment, and which phase is under way; PHASES holds the four steps; INSTANCES is the number of dots. The traffic bar, the dots, the shares and the status line are all derived from the chosen stage, so they always agree. The versions and numbers are example data.

No. The toggle group only chooses which stage of the swap the figure shows. There is no request and no timer; a polite status line states the choice for screen readers ("Green v5.5 takes 50% of traffic and blue v5.4 50%. Shift traffic is under way. Downtime 0 seconds."). Hook the choice to your own deploy API if you want it to act.

Every state is a shape and a word: a role badge with an icon and its label, instance dots that are filled, ringed or dashed beside a sentence such as "4 of 6 instances up, 2 starting", and phase markers that are a checked filled square (Done), a half-filled square (Now) or an empty one (Next), each with its word. The block uses foreground weights only, so it reads the same in any theme.

It is one tab stop; the arrow keys move between 0, 10, 50 and 100 percent and Space or Enter chooses. Base UI's toggle group is a roving group; the arrow keys move focus and Space or Enter presses.

Below md the two cells stack with a rule between them, the toggle group fills the width and the phases list one under another. In a right-to-left layout the cells, labels and phases mirror, while the version numbers, the dots and the traffic bar keep their own left-to-right direction so Blue stays before Green.