<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deployments — data table</title>
<style>
:root{
--bg:#e9e9e6;
--card:#ffffff;
--line:#e3e6ea;
--line-soft:#eff1f4;
--ink:#1f2328;
--ink-2:#5b6470;
--ink-3:#858e99;
--accent:#3a6ea5;
--hover:#f5f7f9;
--sel:#eef4fb;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
background:var(--bg);
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:64px 48px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
color:var(--ink);
-webkit-font-smoothing:antialiased;
}
.panel{
width:952px;
background:var(--card);
border:1px solid #d9dde2;
border-radius:8px;
box-shadow:0 1px 1px rgba(16,24,40,.03), 0 8px 24px -12px rgba(16,24,40,.18);
overflow:hidden;
}
/* ---- toolbar ---- */
.toolbar{
display:flex;align-items:center;justify-content:space-between;
gap:16px;
padding:13px 16px 12px;
border-bottom:1px solid var(--line);
background:linear-gradient(#fff,#fcfcfd);
}
.title{display:flex;align-items:baseline;gap:9px}
.title h1{font-size:13.5px;font-weight:650;letter-spacing:.005em;margin:0}
.count{
font-size:11px;color:var(--ink-2);
background:#f1f3f5;border:1px solid #e4e7eb;
padding:1px 6px;border-radius:10px;
font-variant-numeric:tabular-nums;
}
.tools{display:flex;align-items:center;gap:8px}
.chip{
font-size:11.5px;color:var(--ink-2);
border:1px solid #dfe3e8;border-radius:5px;
padding:3px 8px;background:#fff;
display:inline-flex;align-items:center;gap:5px;
white-space:nowrap;
}
.chip .dotline{width:9px;height:9px;opacity:.75}
.synced{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* ---- table ---- */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
thead th{
position:relative;
text-align:left;
font-size:10.5px;
font-weight:650;
letter-spacing:.075em;
text-transform:uppercase;
color:#6d7681;
background:#fafbfc;
padding:8px 12px;
border-bottom:1px solid var(--line);
white-space:nowrap;
user-select:none;
}
th.sortable{cursor:pointer}
th .h{display:inline-flex;align-items:center;gap:5px}
th.sortable .arrow{opacity:0;transition:opacity .12s}
th.sortable:hover{color:#3f4854;background:#f4f6f8}
th.sortable:hover .arrow{opacity:.55}
th[aria-sort]{color:#22282f;background:#f2f5f8}
th[aria-sort] .arrow{opacity:1;color:var(--accent)}
th[aria-sort]::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
}
/* header shown in its hover/affordance state for the screenshot */
th.is-hovered{color:#3f4854;background:#f4f6f8}
th.is-hovered .arrow{opacity:.55}
tbody td{
padding:8px 12px;
border-bottom:1px solid var(--line-soft);
vertical-align:middle;
color:var(--ink);
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--hover)}
tbody tr.is-hovered td{background:var(--hover)}
tbody tr.is-selected td{background:var(--sel)}
tbody tr.is-selected td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.col-check{width:34px;padding-left:14px !important;padding-right:0 !important}
.col-status{width:146px}
.col-region{width:118px}
.col-user{width:172px}
.col-dur{width:92px;text-align:right}
.col-time{width:172px}
td.num{
text-align:right;
font-variant-numeric:tabular-nums;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:11.8px;color:#3d454f;
}
td.time{
font-variant-numeric:tabular-nums;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:11.5px;color:#5b6470;white-space:nowrap;
}
td.time .tz{color:#98a1ab}
/* checkbox */
.box{
width:13px;height:13px;border-radius:3px;
border:1px solid #c6ccd4;background:#fff;
display:inline-flex;align-items:center;justify-content:center;
vertical-align:middle;
}
.box svg{display:none}
.box.checked{background:var(--accent);border-color:#31608f}
.box.checked svg{display:block}
.box.dash{border-color:#c6ccd4}
.box.dash::after{content:"";width:7px;height:1.5px;background:#9aa3ad;border-radius:1px}
/* service cell */
.svc{display:flex;flex-direction:column;gap:1px;min-width:0}
.svc .name{font-weight:600;letter-spacing:.002em}
.svc .sha{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:10.5px;color:#8b939d;
}
a.name{color:var(--ink);text-decoration:none}
tbody tr:hover a.name, tbody tr.is-hovered a.name{text-decoration:underline;text-decoration-color:#b9c1ca;text-underline-offset:2px}
/* user */
.user{display:flex;align-items:center;gap:7px}
.av{
width:19px;height:19px;border-radius:50%;
background:#e7eaee;border:1px solid #dbe0e6;
color:#5b6470;font-size:9px;font-weight:700;letter-spacing:.02em;
display:flex;align-items:center;justify-content:center;
flex:0 0 auto;
}
.user .who{color:#38404a}
/* region */
.region{color:#454d57;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
/* ---- status badges: shape + label, never colour alone ---- */
.st{
display:inline-flex;align-items:center;gap:5px;
border:1px solid;border-radius:4px;
padding:2px 7px 2px 6px;
font-size:11px;font-weight:600;letter-spacing:.01em;
line-height:16px;white-space:nowrap;
}
.st svg{flex:0 0 auto;display:block}
.st-ok {color:#1c6b45;background:#eff7f2;border-color:#c6e2d3}
.st-fail {color:#a12a20;background:#fdf1f0;border-color:#f0cbc7}
.st-run {color:#215287;background:#eff5fc;border-color:#c9dcf1}
.st-queue {color:#5b6470;background:#f4f5f7;border-color:#dfe2e7}
.st-back {color:#8a5510;background:#fdf6ea;border-color:#efdcbd}
/* ---- footer ---- */
.footer{
display:flex;align-items:center;justify-content:space-between;
gap:16px;
padding:9px 14px 9px 16px;
border-top:1px solid var(--line);
background:#fcfcfd;
font-size:11.5px;color:var(--ink-3);
}
.footer .sel-note{color:#3f4854}
.pager{display:flex;align-items:center;gap:6px}
.pbtn{
width:22px;height:22px;border:1px solid #dfe3e8;border-radius:5px;background:#fff;
display:inline-flex;align-items:center;justify-content:center;color:#6d7681;
}
.pbtn.disabled{opacity:.45}
.pinfo{font-variant-numeric:tabular-nums;color:#5b6470;padding:0 2px}
.legend{display:flex;gap:14px;align-items:center;font-size:10.5px;color:#98a1ab}
</style>
</head>
<body>
<div class="panel" role="region" aria-label="Server deployment records">
<div class="toolbar">
<div class="title">
<h1>Deployments</h1>
<span class="count">128</span>
</div>
<div class="tools">
<span class="chip">
<svg class="dotline" viewBox="0 0 12 12" aria-hidden="true"><path d="M1.5 3h9M3 6h6M4.5 9h3" stroke="#7c858f" stroke-width="1.4" stroke-linecap="round" fill="none"/></svg>
All environments
</span>
<span class="chip">Last 24 hours</span>
<span class="synced">synced 2 min ago</span>
</div>
</div>
<table>
<colgroup>
<col class="col-check"><col><col class="col-status"><col class="col-region">
<col class="col-user"><col class="col-dur"><col class="col-time">
</colgroup>
<thead>
<tr>
<th class="col-check" scope="col">
<span class="box dash" role="checkbox" aria-checked="mixed" aria-label="Select all rows"></span>
</th>
<th class="sortable is-hovered" scope="col" aria-label="Service, sortable">
<span class="h">Service
<svg class="arrow" width="8" height="9" viewBox="0 0 8 9" aria-hidden="true"><path d="M4 .8v7.4M1.4 5.6 4 8.2l2.6-2.6" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</th>
<th class="sortable" scope="col">
<span class="h">Status
<svg class="arrow" width="8" height="9" viewBox="0 0 8 9" aria-hidden="true"><path d="M4 .8v7.4M1.4 5.6 4 8.2l2.6-2.6" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</th>
<th class="sortable" scope="col"><span class="h">Region
<svg class="arrow" width="8" height="9" viewBox="0 0 8 9" aria-hidden="true"><path d="M4 .8v7.4M1.4 5.6 4 8.2l2.6-2.6" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span></th>
<th scope="col"><span class="h">Deployed by</span></th>
<th class="sortable col-dur" scope="col" style="text-align:right"><span class="h">Duration
<svg class="arrow" width="8" height="9" viewBox="0 0 8 9" aria-hidden="true"><path d="M4 .8v7.4M1.4 5.6 4 8.2l2.6-2.6" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span></th>
<th class="sortable" scope="col" aria-sort="descending">
<span class="h">Timestamp
<svg class="arrow" width="8" height="9" viewBox="0 0 8 9" aria-hidden="true"><path d="M4 .8v7.4M1.4 5.6 4 8.2l2.6-2.6" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr>
<td class="col-check"><span class="box" role="checkbox" aria-checked="false" aria-label="Select row"></span></td>
<td><div class="svc"><a class="name" href="#">auth-gateway</a><span class="sha">v2.14.3 · 8f31c07</span></div></td>
<td><span class="st st-ok">
<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3.6 6.2 5.2 7.9 8.5 4.3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Succeeded</span></td>
<td class="region">us-east-1</td>
<td><div class="user"><span class="av">AO</span><span class="who">Ada Okafor</span></div></td>
<td class="num">1m 42s</td>
<td class="time">2024-06-11 14:32 <span class="tz">UTC</span></td>
</tr>
<!-- 2 -->
<tr>
<td class="col-check"><span class="box" role="checkbox" aria-checked="false" aria-label="Select row"></span></td>
<td><div class="svc"><a class="name" href="#">search-indexer</a><span class="sha">v0.9.11 · c40a1de</span></div></td>
<td><span class="st st-run">
<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2.2 2"/><circle cx="6" cy="6" r="1.7" fill="currentColor"/></svg>
In progress</span></td>
<td class="region">eu-west-1</td>
<td><div class="user"><span class="av">MR</span><span class="who">Miles Renard</span></div></td>
<td class="num">0m 38s</td>
<td class="time">2024-06-11 14:28 <span class="tz">UTC</span></td>
</tr>
<!-- 3 — SELECTED -->
<tr class="is-selected" aria-selected="true">
<td class="col-check"><span class="box checked" role="checkbox" aria-checked="true" aria-label="Select row">
<svg width="9" height="9" viewBox="0 0 10 10" aria-hidden="true"><path d="M1.6 5.2 3.8 7.4 8.4 2.6" fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span></td>
<td><div class="svc"><a class="name" href="#">billing-worker</a><span class="sha">v3.02.0 · 1b7e995</span></div></td>
<td><span class="st st-fail">
<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M4.2 4.2 7.8 7.8M7.8 4.2 4.2 7.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
Failed</span></td>
<td class="region">us-west-2</td>
<td><div class="user"><span class="av">SK</span><span class="who">Sana Kaur</span></div></td>
<td class="num">4m 07s</td>
<td class="time">2024-06-11 13:55 <span class="tz">UTC</span></td>
</tr>
<!-- 4 -->
<tr>
<td class="col-check"><span class="box" role="checkbox" aria-checked="false" aria-label="Select row"></span></td>
<td><div class="svc"><a class="name" href="#">notify-relay</a><span class="sha">v1.7.6 · 55d0a83</span></div></td>
<td><span class="st st-back">
<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><path d="M6 2.1a3.9 3.9 0 1 1-3.55 2.3" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M1.3 2.4 2.3 5l2.6-.9" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
Rolled back</span></td>
<td class="region">eu-central-1</td>
<td><div class="user"><span class="av">TN</span><span class="who">Tomas Novak</span></div></td>
<td class="num">2m 15s</td>
<td class="time">2024-06-11 13:41 <span class="tz">UTC</span></td>
</tr>
<!-- 5 — HOVERED -->
<tr class="is-hovered">
<td class="col-check"><span class="box" role="checkbox" aria-checked="false" aria-label="Select row"></span></td>
<td><div class="svc"><a class="name" href="#">media-transcode</a><span class="sha">v5.1.0 · 9ac2f14</span></div></td>
<td><span class="st st-queue">
<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M6 3.3V6l2 1.3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
Queued</span></td>
<td class="region">ap-south-1</td>
<td><div class="user"><span class="av">JL</span><span class="who">Jae-won Lim</span></div></td>
<td class="num">—</td>
<td class="time">2024-06-11 13:30 <span class="tz">UTC</span></td>
</tr>
<!-- 6 -->
<tr>
<td class="col-check"><span class="box" role="checkbox" aria-checked="false" aria-label="Select row"></span></td>
<td><div class="svc"><a class="name" href="#">edge-cache</a><span class="sha">v8.20.2 · 3ee7b60</span></div></td>
<td><span class="st st-ok">
<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3.6 6.2 5.2 7.9 8.5 4.3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Succeeded</span></td>
<td class="region">sa-east-1</td>
<td><div class="user"><span class="av">CI</span><span class="who">ci-runner (bot)</span></div></td>
<td class="num">0m 54s</td>
<td class="time">2024-06-11 12:58 <span class="tz">UTC</span></td>
</tr>
<!-- 7 -->
<tr>
<td class="col-check"><span class="box" role="checkbox" aria-checked="false" aria-label="Select row"></span></td>
<td><div class="svc"><a class="name" href="#">ledger-api</a><span class="sha">v4.6.9 · a017cc5</span></div></td>
<td><span class="st st-ok">
<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3.6 6.2 5.2 7.9 8.5 4.3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Succeeded</span></td>
<td class="region">us-east-1</td>
<td><div class="user"><span class="av">HD</span><span class="who">Hana Dvorak</span></div></td>
<td class="num">3m 21s</td>
<td class="time">2024-06-11 12:44 <span class="tz">UTC</span></td>
</tr>
<!-- 8 -->
<tr>
<td class="col-check"><span class="box" role="checkbox" aria-checked="false" aria-label="Select row"></span></td>
<td><div class="svc"><a class="name" href="#">session-store</a><span class="sha">v2.0.1 · d92f4ab</span></div></td>
<td><span class="st st-fail">
<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M4.2 4.2 7.8 7.8M7.8 4.2 4.2 7.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
Failed</span></td>
<td class="region">ap-northeast-1</td>
<td><div class="user"><span class="av">OB</span><span class="who">Omar Belkacem</span></div></td>
<td class="num">6m 03s</td>
<td class="time">2024-06-11 12:12 <span class="tz">UTC</span></td>
</tr>
</tbody>
</table>
<div class="footer">
<span class="sel-note">1 row selected</span>
<span class="legend">
<span>Status is labelled in text and by shape</span>
</span>
<span class="pager">
<span>Rows 1–8 of 128</span>
<span class="pbtn disabled" aria-hidden="true">
<svg width="9" height="9" viewBox="0 0 10 10"><path d="M6.4 1.4 2.8 5l3.6 3.6" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="pbtn" aria-hidden="true">
<svg width="9" height="9" viewBox="0 0 10 10"><path d="M3.6 1.4 7.2 5 3.6 8.6" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
</span>
</div>
</div>
</body>
</html>