ds
Operations
Deploys and environments

Deploys and environments

Releases per environment, with commit, author and age.

v2.14.1 c7e02d1Cap webhook retries at 8 attempts
AKasha.k
Staging
now
v2.14.0 a41f9c2Retry webhook deliveries with jitter
PNpriya.n
Production
42m ago
pr-1182 9b13e7aLedger v2: double-entry writes behind a flag
DSdev.s
Preview
1h ago
v2.13.4 5d0c4beBump pgx to 5.7
PNpriya.n
Production
Yesterday

Show code

<ul class="deploys">
  <li>
    <span class="sg" data-state="running" role="img" aria-label="Deploying"></span>
    <div class="dep-what"><b>v2.14.1 <a class="sha" href="#">c7e02d1</a></b><span>Cap webhook retries at 8 attempts</span></div>
    <span class="who"><span class="avatar xs t-teal">AK</span><span><small>asha.k</small></span></span>
    <div class="dep-age"><span class="env staging">Staging</span><br>now</div>
  </li>
  <li>
    <span class="sg" data-state="success" role="img" aria-label="Live"></span>
    <div class="dep-what"><b>v2.14.0 <a class="sha" href="#">a41f9c2</a></b><span>Retry webhook deliveries with jitter</span></div>
    <span class="who"><span class="avatar xs t-purple">PN</span><span><small>priya.n</small></span></span>
    <div class="dep-age"><span class="env prod">Production</span><br>42m ago</div>
  </li>
  <li>
    <span class="sg" data-state="success" role="img" aria-label="Live"></span>
    <div class="dep-what"><b>pr-1182 <a class="sha" href="#">9b13e7a</a></b><span>Ledger v2: double-entry writes behind a flag</span></div>
    <span class="who"><span class="avatar xs t-amber">DS</span><span><small>dev.s</small></span></span>
    <div class="dep-age"><span class="env preview">Preview</span><br>1h ago</div>
  </li>
  <li class="rolled-back">
    <span class="sg" data-state="failed" role="img" aria-label="Failed, rolled back"></span>
    <div class="dep-what"><b>v2.13.4 <a class="sha" href="#">5d0c4be</a></b><span>Bump pgx to 5.7</span></div>
    <span class="who"><span class="avatar xs t-purple">PN</span><span><small>priya.n</small></span></span>
    <div class="dep-age"><span class="env prod">Production</span><br>Yesterday</div>
  </li>
</ul>

Deploys newest first: state, version and commit, the message people will recognise, who shipped it and where, and how long ago. The commit is a link to the diff. A deploy that was rolled back keeps its row with the version struck through, because "what was live at 14:00" is the first question in every incident review.

Environments

Production Staging Preview Dev eu-west-1

Code

<span class="env prod">Production</span>
<span class="env staging">Staging</span>
<span class="env preview">Preview</span>
<span class="env dev">Dev</span>
<span class="env">eu-west-1</span>

Environments are told apart by weight, not by status colour. Production is solid ink, the loudest thing in the row, so nobody mistakes it for staging. Staging gets the amber wash, preview the blue, dev a dashed outline. Green and red stay free to mean healthy and broken.

Promotion

Dev v2.14.2

c91aa03 · 8m ago

Staging v2.14.1

c7e02d1 · deploying

Production v2.14.0

1 release behind staging

Show code

<div class="promote">
  <div>
    <span class="env dev">Dev</span>
    <b><span class="sg" data-state="success"></span>v2.14.2</b>
    <p>c91aa03 · 8m ago</p>
  </div>
  <div>
    <span class="env staging">Staging</span>
    <b><span class="sg" data-state="running"></span>v2.14.1</b>
    <p>c7e02d1 · deploying</p>
  </div>
  <div>
    <span class="env prod">Production</span>
    <b><span class="sg" data-state="success"></span>v2.14.0</b>
    <p class="behind">1 release behind staging</p>
    <button class="btn sm">Promote v2.14.1</button>
  </div>
</div>

What runs where, in the order a release moves. The chevrons on the dividers point the way. Say how far behind each environment is; that is what tells you whether the next promotion is a small step or a big one.

Class	On	What it does
`.env`	span	Environment chip. `.prod`, `.staging`, `.preview`, `.dev`; plain for regions or custom names.
`.deploys`	ul	The list. Each `<li>`: `.sg`, `.dep-what`, a `.who`, `.dep-age`.
`.dep-what`	div	Version and `.sha` on the first line, the message on the second.
`.sha`	a, code	A short commit hash in mono. Links hover in the accent.
`.dep-age`	div	Environment and age, right-aligned.
`.rolled-back`	li	Strikes through the version.
`.promote`	div	Environment columns with chevrons between. `--envs` (3). `.behind` for the gap.

Seven-character SHAs, linked to the diff.
Relative ages with the exact time in a title or <time datetime>.
Keep failed and rolled-back deploys in the list.

Don't

Red for production. Red means something is broken.
Showing the full 40-character hash.
A promote button that does not say which version it promotes.

Accessibility

Each state glyph has a label in words: deploying, live, failed and rolled back.
The chevrons between environments are decoration; the order of the columns carries the meaning.