webdevpuneet.com

Related Snippets

144 in Dashboards category
49–54 of 60

Canary Rollout Progress Tile

Connection Quality Indicator — Signal Bars from Real Network Signals

Job Queue Depth Monitor — Live Backlog Trend with Threshold Alerts

Environment Switcher with Color-Coded Persistent Banner

Admin Impersonation Mode Banner — "Viewing As" with Safe Exit

Batch Operation Progress Panel — Per-Item Success/Fail Tracking

Canary Rollout Progress Tile — Free HTML CSS JS Snippet

Canary Rollout Progress Tile · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsSVGCSS AnimationDashboard UILoading StatesCSS Grid

Copy & paste

Source Code

<div class="demo">
  <div class="tile">
    <div class="tile-head">
      <div class="rel-name">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        <span>checkout-service <b>v2.14.0</b></span>
      </div>
      <span class="badge rolling" id="statusBadge">Rolling out</span>
    </div>

    <div class="stages" id="stages"></div>

    <div class="metrics">
      <div class="metric">
        <span class="m-label">Error rate</span>
        <span class="m-val ok" id="errRate">0.04%</span>
      </div>
      <div class="metric">
        <span class="m-label">p95 latency</span>
        <span class="m-val ok" id="latency">118ms</span>
      </div>
      <div class="metric">
        <span class="m-label">Traffic on canary</span>
        <span class="m-val" id="trafficPct">5%</span>
      </div>
    </div>

    <div class="tile-actions">
      <button class="btn rollback" id="rollbackBtn">Roll back</button>
      <button class="btn promote" id="promoteBtn">Promote now</button>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Discrete staged progress track (not a continuous bar) with checkmarked done stages and a pulsing active stage
Guardrail metrics (error rate, p95 latency) colored ok/warn/bad independent of overall rollout status
Explicit Promote and Rollback actions that both disable further automatic advancement
Rollback preserves the stage the rollout was at when halted, rather than resetting progress
Promote jumps directly to the final stage rather than requiring every intermediate stage to be clicked
Traffic-on-canary percentage always reflects the currently active stage's configured value
Auto-advance timer structured as a drop-in replacement point for a real deployment orchestrator poll
Compact single-tile layout suited to a grid of other release/ops dashboard widgets

About this UI Snippet

Canary Rollout Progress Tile — Staged Traffic, Guardrail Metrics & Promote/Rollback

Screenshot of the Canary Rollout Progress Tile snippet rendered live

A canary rollout ships a new version to a small slice of traffic first, watches health metrics, then gradually increases that slice — the opposite of an all-at-once deploy. This tile visualizes exactly that: a staged progress track (5% → 25% → 50% → 100% of traffic), live guardrail metrics (error rate and p95 latency) that would justify continuing or aborting, and explicit promote/rollback controls, all wired to one small state machine.

The stage track models discrete steps, not a continuous bar

Unlike a generic progress bar, STAGES is an explicit array of traffic percentages, and stageIndex is an integer pointing at the current one. renderStages() marks every stage before stageIndex as .done (filled, checkmark), the current one as .active (pulsing ring animation via a box-shadow keyframe), and later ones as neutral. This matters because a real canary rollout doesn't move continuously — it holds at each traffic percentage for an observation window before deciding to advance, so a discrete stepped track communicates the actual deployment model more honestly than a smooth 0–100% bar would.

Guardrail metrics colored independently of rollout status

errEl and latEl get their own ok/warn/bad class based on fixed thresholds (refreshMetrics()), completely independent of whether the rollout badge currently says "Rolling out" or "Promoted." This separation is intentional — in a real system, these are exactly the numbers an automated canary analysis tool (or an on-call engineer) would watch to decide *whether* to let the rollout advance, so they need to be legible as their own signal rather than folded into a single combined status.

Promote and rollback as explicit terminal actions

Clicking "Promote now" jumps stageIndex straight to the final stage and calls setStatus('promoted'); clicking "Roll back" calls setStatus('rolledback') without touching stageIndex at all — deliberately, since a rollback's whole point is to stop admitting more traffic to the new version, not to pretend the rollout continued. Both actions disable further stage auto-advancement and both buttons, because a canary rollout has exactly one live decision point at a time; once promoted or rolled back, the only next action is starting an entirely new rollout.

The auto-advance timer as a stand-in for a bake-time scheduler

setInterval(advance, 4000) simulates the automatic stage-advancement a real canary pipeline (Argo Rollouts, Flagger, or a custom deployment controller) would run on a bake-time schedule, typically minutes to hours per stage rather than seconds. Swap the interval callback for a webhook or polling call to your actual deployment orchestrator's status API, and the same renderStages()/refreshMetrics() functions apply the real state.

Step by step

How to Use

  1. 1
    Watch it auto-advanceThe tile auto-advances through traffic stages every 4 seconds in the demo — refreshing error rate and latency metrics at each stage.
  2. 2
    Click Roll backImmediately halts the rollout at its current stage and switches the badge to a rolled-back state, disabling further actions.
  3. 3
    Click Promote nowJumps straight to the final 100% stage and marks the release as fully promoted.
  4. 4
    Edit the STAGES arrayChange the traffic percentages and number of stages to match your own canary pipeline's configuration.
  5. 5
    Adjust guardrail thresholdsEdit the error-rate and latency cutoffs inside refreshMetrics() to match your service's actual SLOs.
  6. 6
    Connect a real deployment APIReplace the setInterval simulation with polling or a webhook from your deployment orchestrator (Argo Rollouts, Flagger, or similar) that updates stageIndex and the metric values.

Real-world uses

Common Use Cases

OPS
Internal deploy/release dashboards
Give an on-call or release engineer a live view of an in-flight canary rollout without leaving the ops dashboard for the deployment tool's own UI.
CI/CD pipeline status pages
Surface canary rollout stage and guardrail health as one tile among several pipeline-stage widgets on a build/deploy status page.
ALERT
On-call incident response tooling
Let an on-call engineer roll back a suspicious release directly from the same dashboard used to notice a metric regression.
Progressive delivery platform UIs
Adapt as the core widget for a progressive-delivery tool (in the spirit of Argo Rollouts or Flagger) showing live canary analysis status.
Related: Deployment Pipeline Stage Tracker
See the Deployment Pipeline Stage Tracker for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The stage track is a fixed set of discrete traffic-percentage steps (STAGES), not a continuously animating fill. Each stage renders as its own dot marked done, active, or pending, because a real canary rollout holds at each percentage for an observation window rather than moving smoothly — a stepped track communicates that model more accurately.

errEl and latEl are colored ok/warn/bad from fixed numeric thresholds inside refreshMetrics(), entirely independent of the rolling/promoted/rolledback badge state. This mirrors how a real canary analysis works: the metrics are the signal used to decide whether to let the rollout continue, so they need to be readable on their own rather than folded into the overall status.

Nothing — rollback intentionally leaves stageIndex untouched, since the point of a rollback is to stop the rollout at whatever traffic percentage it had reached, not to pretend progress continued. Only the status and badge change, and both buttons become disabled.

No — it sets stageIndex directly to the last entry in STAGES and calls setStatus("promoted") immediately, modeling a manual "just ship it to 100%" override rather than requiring the auto-advance timer to step through every stage first.

Replace the setInterval(advance, 4000) simulation with a polling call (or webhook handler) against your deployment orchestrator's status API, updating stageIndex and calling refreshMetrics() with real error-rate and latency values whenever the orchestrator reports a stage change.

Yes — STAGES is a plain array of traffic percentages; add, remove, or change entries and the stage track, traffic-on-canary readout, and stage count all adjust automatically since everything derives from STAGES.length and STAGES[stageIndex].