151 lines
11 KiB
HTML
151 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>RFC 0002 drafts — disk usage and physical headroom</title>
|
|
<link rel="stylesheet" href="../../../../src/main/resources/static/werkator.css">
|
|
<style>
|
|
/* draft-only scaffolding, never meant for werkator.css */
|
|
body { padding: 0 0 60px; }
|
|
.draft-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
|
|
.draft-head { margin: 34px 0 10px; }
|
|
.draft-head h2 { margin: 0 0 2px; font-size: 19px; }
|
|
.draft-head p { margin: 0; color: var(--muted); font-size: 13px; max-width: 76ch; }
|
|
.draft-stage { padding: 18px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg); }
|
|
.draft-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
|
|
|
|
/* A1 — the breakdown dialog */
|
|
.sheet { max-width: 560px; margin: 0 auto; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-bg, var(--bg)); box-shadow: 0 18px 48px rgba(0,0,0,0.18); }
|
|
.sheet header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
|
|
.sheet h3 { margin: 0; font-size: 17px; }
|
|
.sheet .sheet-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
|
|
.sheet-body { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
|
|
.donut { flex: 0 0 168px; }
|
|
.legend { flex: 1 1 240px; margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
|
|
.legend div { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: baseline; padding: 3px 0; }
|
|
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
|
|
.legend .share { color: var(--muted); min-width: 44px; text-align: right; }
|
|
.sheet-foot { margin: 16px 0 0; color: var(--muted); font-size: 12px; }
|
|
|
|
/* A2 — the inline stacked bar */
|
|
.stack { display: flex; height: 10px; margin: 10px 0 6px; border-radius: 3px; overflow: hidden; background: var(--line); }
|
|
.stack span { display: block; height: 100%; }
|
|
.stack-key { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
|
.stack-key i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; }
|
|
|
|
/* B — physical headroom */
|
|
.bar-two { position: relative; height: 5px; margin: 10px 0 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
|
|
.bar-two .used { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
|
|
.bar-two .unbacked { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--crit-soft, rgba(179,38,30,.30)) 0 4px, transparent 4px 8px); }
|
|
.bar-two .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--crit); }
|
|
.note-crit { color: var(--crit); }
|
|
.note-warn { color: var(--amber); }
|
|
code { font: 400 12px var(--mono); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="draft-wrap">
|
|
<h1 style="margin:26px 0 4px">RFC 0002 drafts</h1>
|
|
<p style="color:var(--muted);margin:0 0 8px">Two questions of the System page: what fills a disk, and how to show a volume running out while the quota still has room. Sample numbers are invented; only shapes and formats are real. The palette follows the system theme, like the real pages.</p>
|
|
|
|
<div class="draft-head"><h2>A1 — the breakdown as a dialog</h2>
|
|
<p>A small button in the disk card opens this sheet. The donut is the split of what the budget holds, the legend the same numbers as text. Everything Werkator does not own is one honest slice, "other".</p></div>
|
|
<div class="draft-stage">
|
|
<div class="sheet">
|
|
<header><h3>SSD — what fills it</h3><span class="level-pill level-warn">watch</span></header>
|
|
<p class="sheet-sub">763.75 of 900.00 GiB used · user quota <code>mih09-werkator</code> · measured 12:31</p>
|
|
<div class="sheet-body">
|
|
<svg class="donut" viewBox="0 0 42 42" width="168" height="168" aria-hidden="true">
|
|
<circle cx="21" cy="21" r="15.915" fill="none" stroke="var(--line)" stroke-width="6"></circle>
|
|
<circle cx="21" cy="21" r="15.915" fill="none" stroke="#0E6B7D" stroke-width="6" stroke-dasharray="41 59" stroke-dashoffset="25"></circle>
|
|
<circle cx="21" cy="21" r="15.915" fill="none" stroke="#63BCCB" stroke-width="6" stroke-dasharray="19 81" stroke-dashoffset="-16"></circle>
|
|
<circle cx="21" cy="21" r="15.915" fill="none" stroke="#B0563B" stroke-width="6" stroke-dasharray="12 88" stroke-dashoffset="-35"></circle>
|
|
<circle cx="21" cy="21" r="15.915" fill="none" stroke="#9aa3a1" stroke-width="6" stroke-dasharray="13 87" stroke-dashoffset="-47"></circle>
|
|
<text x="21" y="20.6" text-anchor="middle" font-size="4.6" font-weight="600" fill="currentColor">85 %</text>
|
|
<text x="21" y="25.2" text-anchor="middle" font-size="2.6" fill="var(--muted)">of the quota</text>
|
|
</svg>
|
|
<div class="legend">
|
|
<div><i style="background:#0E6B7D"></i><span>Build workspaces</span><span>312.40 GiB</span><span class="share">41 %</span></div>
|
|
<div><i style="background:#63BCCB"></i><span>Repositories and history</span><span>145.10 GiB</span><span class="share">19 %</span></div>
|
|
<div><i style="background:#B0563B"></i><span>Artifacts and logs</span><span>91.55 GiB</span><span class="share">12 %</span></div>
|
|
<div><i style="background:#9aa3a1"></i><span>Build environments</span><span>99.20 GiB</span><span class="share">13 %</span></div>
|
|
<div><i style="background:var(--line)"></i><span>Other (not Werkator's)</span><span>115.50 GiB</span><span class="share">15 %</span></div>
|
|
</div>
|
|
</div>
|
|
<p class="sheet-foot">Werkator measures only the directories it owns; everything else in the budget is summed as "other". The walk runs every 30 minutes, not on opening.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="draft-head"><h2>A2 — the breakdown inline, no dialog</h2>
|
|
<p>The same numbers as a stacked bar under the gauge bar. Nothing to open, nothing to close, but it costs height in every disk card and the small slices become unreadable.</p></div>
|
|
<div class="draft-stage">
|
|
<div class="gauges" style="max-width:340px">
|
|
<article class="gauge level-warn">
|
|
<header><span class="gauge-label">SSD</span><span class="level-pill">watch</span></header>
|
|
<div class="gauge-value"><span class="gauge-percent">85 %</span><span class="gauge-average">⌀ 82 %</span></div>
|
|
<div class="gauge-detail">763.75 of 900.00 GiB</div>
|
|
<div class="gauge-bar"><div style="width:85%"></div></div>
|
|
<div class="stack">
|
|
<span style="width:41%;background:#0E6B7D"></span><span style="width:19%;background:#63BCCB"></span>
|
|
<span style="width:12%;background:#B0563B"></span><span style="width:13%;background:#9aa3a1"></span>
|
|
<span style="width:15%;background:var(--line)"></span>
|
|
</div>
|
|
<div class="stack-key"><span><i style="background:#0E6B7D"></i>workspaces 41 %</span><span><i style="background:#63BCCB"></i>repos 19 %</span><span><i style="background:#B0563B"></i>artifacts 12 %</span><span><i style="background:#9aa3a1"></i>buildenv 13 %</span><span><i style="background:var(--line)"></i>other 15 %</span></div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="draft-head"><h2>B1 — the quota keeps the gauge, the volume marks its ceiling</h2>
|
|
<p>The budget shown stays the one that is managed — the quota. A marker on the bar says where the physical volume runs out, and the hatched tail is the part of the quota no longer backed by free space. The note line names both numbers.</p></div>
|
|
<div class="draft-stage">
|
|
<div class="gauges" style="max-width:340px">
|
|
<article class="gauge level-ok">
|
|
<header><span class="gauge-label">SSD</span><span class="level-pill">ok</span></header>
|
|
<div class="gauge-value"><span class="gauge-percent">62 %</span><span class="gauge-average">⌀ 60 %</span></div>
|
|
<div class="gauge-detail">558.00 of 900.00 GiB</div>
|
|
<div class="bar-two">
|
|
<span class="used" style="width:62%"></span>
|
|
<span class="unbacked" style="left:68%;right:0"></span>
|
|
<span class="mark" style="left:68%"></span>
|
|
</div>
|
|
<div class="gauge-note note-crit">volume nearly full: 54.00 GiB left on <code>/dev/sdb1</code>, the quota still allows 342.00 GiB</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="draft-head"><h2>B2 — two gauges, quota and volume</h2>
|
|
<p>Each budget gets its own card and its own history. Honest and symmetric, but it doubles the disk cards on a host where the volume is never the limit.</p></div>
|
|
<div class="draft-stage">
|
|
<div class="gauges draft-two" style="max-width:700px">
|
|
<article class="gauge level-ok">
|
|
<header><span class="gauge-label">SSD · quota</span><span class="level-pill">ok</span></header>
|
|
<div class="gauge-value"><span class="gauge-percent">62 %</span><span class="gauge-average">⌀ 60 %</span></div>
|
|
<div class="gauge-detail">558.00 of 900.00 GiB</div>
|
|
<div class="gauge-bar"><div style="width:62%"></div></div>
|
|
<div class="gauge-note">user quota <code>mih09-werkator</code></div>
|
|
</article>
|
|
<article class="gauge level-crit">
|
|
<header><span class="gauge-label">SSD · volume</span><span class="level-pill">critical</span></header>
|
|
<div class="gauge-value"><span class="gauge-percent">97 %</span><span class="gauge-average">⌀ 95 %</span></div>
|
|
<div class="gauge-detail">1775.61 of 1829.61 GiB</div>
|
|
<div class="gauge-bar"><div style="width:97%"></div></div>
|
|
<div class="gauge-note note-crit">the quota cannot be filled: 54.00 GiB physically left</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="draft-head"><h2>B3 — a reason in the verdict panel only</h2>
|
|
<p>No change to the cards at all: the machine verdict gains a rule, so the panel at the top says it and the health level turns. Cheapest, and easy to miss once the panel is scrolled past.</p></div>
|
|
<div class="draft-stage">
|
|
<section class="health health-pressure">
|
|
<span class="health-dot" aria-hidden="true"></span>
|
|
<strong>Machine under pressure</strong>
|
|
<span class="health-reasons">SSD: the volume has 54.00 GiB left although the quota still allows 342.00 GiB</span>
|
|
<span class="health-updated">updated 12:31:05 · every 15 s</span>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|