Canary Deployments Dashboard Block for Vue

Edit GATES: a name, a baseline, the canary readings for the 5, 25, 50 and 100% stages, the number of decimals, a unit and the allowed change to start with. The change is worked out as the percentage difference from the baseline, and a gate is over when it is above the allowed change.

It sets how far a metric may drift from the baseline, in percent, before its gate is over. Raise it and a failing gate can pass; lower it to 0 and any increase fails. Each stage has its own readings, so the 50% stage fails four gates at the starting limits even though the 25% stage passes all of them. The result updates as you type.

While any gate is over, Promote doesn't move the stage. It stays focusable, is marked as unavailable, and when pressed it says which gates hold it in the status line. At 100% there is nothing more to promote. After a roll back the same button reads Restart at 5%.

Everything. The readings are typed, the stage and the allowed changes live in the page, and Promote and Roll back change that state only and say so. In your app call your delivery system from promote and rollBack, and feed GATES from your metrics.

A glyph and a word on every gate, a bolder row when it is over, a filled marker for each stage reached on the strip, and a sentence for the verdict. Nothing relies on colour alone, and the primary colour appears only on the Promote button.

Each gate becomes a short block: its name and result on the first line, the baseline, canary and change on the second, and the allowed field full width under them. The foot sticks to the bottom of the screen with both buttons.