feat(docker): Docker disk is recorded over time per host, the Disk page shows each host's growth and folds images under their repository, and the overview has one disk line per host (#5304–#5306)

- #5304 "Docker disk totals recorded over time per host, with a growth chart and alertable metrics"
- #5305 "Disk page: images grouped by repository, versions folded under it"
- #5306 "Docker overview: one disk line per host linking to the Disk page"

Each `docker system df` report is now also recorded as metrics, with the host
as the resource: disk_total_bytes, its parts, and disk_reclaimable_bytes. An
alert rule can watch them. The Disk page starts with the hosts side by side,
showing how much each grew over the selected range with a line of it, then
gives each host its own section. An image's versions fold under its
repository, which is charged only for the layers its versions don't share.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

plugins/docker/templates/docker/_disk_hosts.html

@@ -0,0 +1,37 @@
+{# docker/_disk_hosts.html — every Docker host's disk side by side (#5304):
+   what it uses now, how much that grew over the selected range, and a line
+   of it; the parts after. A host is linked to its own section below. #}
+{% if rows %}
+<table class="table">
+  <thead><tr>
+    <th>Host</th>
+    <th class="num">Docker uses</th>
+    <th class="num" title="Change in the total over the last {{ range_key }}, from Steward's own record of it">Change ({{ range_key }})</th>
+    <th>Over {{ range_key }}</th>
+    <th class="num">Images</th><th class="num">Volumes</th><th class="num" title="Written by containers on top of their images">Container files</th>
+    <th class="num">Build cache</th><th class="num" title="Held by images no container uses">Reclaimable</th>
+  </tr></thead>
+  <tbody>
+    {% for r in rows %}
+    {% set g = r.growth %}
+    <tr>
+      <td><a href="#host-{{ r.host_id }}">{{ r.host_name }}</a></td>
+      <td class="num"><strong>{{ r.total|bytes }}</strong></td>
+      <td class="num">
+        {%- if g is none %}<span class="tone-dim" title="Steward records this from now on; growth shows once there are two readings">—</span>
+        {%- else %}<span class="tone-{{ 'warn' if g.pct is not none and g.pct >= 10 else ('ok' if g.change < 0 else 'muted') }}"
+              title="{{ g.from|bytes }} → {{ g.to|bytes }} since {{ g.since.strftime('%Y-%m-%d %H:%M UTC') }}">{{ "+" if g.change > 0 else ("−" if g.change < 0 else "±") }}{{ (g.change|abs)|bytes }}</span>{% endif -%}
+      </td>
+      <td class="tone-info">{{ r.spark|safe }}</td>
+      <td class="num">{{ r.parts.disk_images_bytes|bytes }}</td>
+      <td class="num">{{ r.parts.disk_volumes_bytes|bytes }}</td>
+      <td class="num">{{ r.parts.disk_containers_bytes|bytes }}</td>
+      <td class="num">{{ r.parts.disk_build_cache_bytes|bytes }}</td>
+      <td class="num">{% if r.reclaimable %}<span class="tone-warn">{{ r.reclaimable|bytes }}</span>{% else %}<span class="tone-dim">—</span>{% endif %}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+{% else %}
+<p class="tone-muted" style="margin:0;padding:1rem;">No host has reported its Docker disk yet.</p>
+{% endif %}

plugins/docker/templates/docker/disk.html

@@ -1,127 +1,124 @@
-{# docker/disk.html — image/disk usage: reclaimable space, per-image sizes #}
+{# docker/disk.html — what Docker keeps on each host's disk (#5304, #5305):
+   the hosts side by side with how much each grew, then each host's parts,
+   its cleanup actions, and its images folded under their repository. #}
 {% extends "base.html" %}
-{% from "_macros.html" import crumbs %}
+{% from "_macros.html" import crumbs, page_header, stat_tile, status_badge %}
 {% block title %}Disk — Docker — Steward{% endblock %}
-{% block breadcrumb %}{{ crumbs([("Docker", "/plugins/docker/"), ("Image & disk usage", "")]) }}{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Docker", "/plugins/docker/"), ("Disk", "")]) }}{% endblock %}
 {% block content %}
 
-<h1 class="page-title" style="margin-bottom:0.4rem;">Image &amp; disk usage</h1>
-<p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1.5rem;">
-  What Docker is keeping on each host's disk, from <code>docker system df</code>.
-  Admins can clean up per host below; each action runs an audited Ansible playbook on that host.
-</p>
+{% call page_header("Docker disk", "What Docker keeps on each host's disk, from docker system df, and how it has grown.") %}
+  {% include "_time_range.html" %}
+{% endcall %}
 
 {% if host_groups %}
-{% for g in host_groups %}
-<div style="margin-bottom:2rem;">
-  <div style="font-weight:500;font-size:0.95rem;margin-bottom:0.75rem;">{{ g.host_name }}
-    {% if g.as_of %}<span class="field-hint" style="font-weight:normal;">· as of {{ g.as_of|ago }}</span>{% endif %}</div>
+<section class="card-flush" aria-labelledby="disk-hosts">
+  <h2 id="disk-hosts" class="table-caption">By host <span class="tone-muted">most space first</span></h2>
+  <div hx-get="/plugins/docker/disk/hosts" hx-trigger="load, rangeChange from:body"
+       hx-include="#time-range" hx-swap="innerHTML">
+    <p class="field-hint" style="padding:1rem;margin:0;">Loading…</p>
+  </div>
+</section>
 
-  {# ── Summary stats ────────────────────────────────────────────────────── #}
-  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.75rem;margin-bottom:1rem;">
-    <div class="card" style="margin-bottom:0;">
-      <div class="section-title" style="margin-bottom:0.3rem;">Reclaimable</div>
-      <span class="stat-val" style="color:{% if g.summary.images_reclaimable != '0 B' %}var(--orange){% else %}var(--green){% endif %};">{{ g.summary.images_reclaimable }}</span>
-      <div style="font-size:0.74rem;color:var(--text-muted);">held by images no container uses</div>
-    </div>
-    <div class="card" style="margin-bottom:0;">
-      <div class="section-title" style="margin-bottom:0.3rem;">Images</div>
-      <span class="stat-val">{{ g.summary.images_size }}</span>
-      <div style="font-size:0.74rem;color:var(--text-muted);">{{ g.summary.images_active }}/{{ g.summary.images_total }} in use</div>
-    </div>
-    <div class="card" style="margin-bottom:0;">
-      <div class="section-title" style="margin-bottom:0.3rem;">Stopped</div>
-      <span class="stat-val" style="{% if g.stopped %}color:var(--text-muted){% endif %};">{{ g.stopped }}</span>
-      <div style="font-size:0.74rem;color:var(--text-muted);">containers not running</div>
-    </div>
-    <div class="card" style="margin-bottom:0;">
-      <div class="section-title" style="margin-bottom:0.3rem;">Container files</div>
-      <span class="stat-val">{{ g.summary.containers_size }}</span>
-      <div style="font-size:0.74rem;color:var(--text-muted);">written by {{ g.summary.containers_count }} containers on top of their images</div>
-    </div>
-    <div class="card" style="margin-bottom:0;">
-      <div class="section-title" style="margin-bottom:0.3rem;">Volumes</div>
-      <span class="stat-val">{{ g.summary.volumes_size }}</span>
-      <div style="font-size:0.74rem;color:var(--text-muted);">{{ g.summary.volumes_count }} volumes; never pruned here</div>
-    </div>
-    <div class="card" style="margin-bottom:0;">
-      <div class="section-title" style="margin-bottom:0.3rem;">Build cache</div>
-      <span class="stat-val">{{ g.summary.build_cache_size }}</span>
-      <div style="font-size:0.74rem;color:var(--text-muted);">left by <code>docker build</code>; safe to clear</div>
-    </div>
+{% for g in host_groups %}
+{% set s = g.summary %}
+<section id="host-{{ g.host_id }}" class="disk-host" aria-labelledby="disk-host-{{ g.host_id }}">
+  <h2 id="disk-host-{{ g.host_id }}" class="disk-host-head">
+    <a href="/hosts/{{ g.host_id }}">{{ g.host_name }}</a>
+    <span class="tone-muted">{{ g.total|bytes }}</span>
+    {% if g.as_of %}<span class="field-hint">as of {{ g.as_of|ago }}</span>{% endif %}
+  </h2>
+
+  <div class="stat-strip">
+    {{ stat_tile("Reclaimable", s.images_reclaimable|bytes, state="warn" if s.images_reclaimable else "ok", hint="held by images no container uses") }}
+    {{ stat_tile("Images", s.images_size|bytes, hint=s.images_active ~ " of " ~ s.images_total ~ " in use") }}
+    {{ stat_tile("Container files", s.containers_size|bytes, hint="written by " ~ s.containers_count ~ " containers on top of their images") }}
+    {{ stat_tile("Volumes", s.volumes_size|bytes, hint=s.volumes_count ~ " volumes; never pruned here") }}
+    {{ stat_tile("Build cache", s.build_cache_size|bytes, hint="left by docker build; safe to clear") }}
+    {{ stat_tile("Stopped", g.stopped, state="dim" if not g.stopped else none, hint="containers not running") }}
   </div>
 
   {# ── Cleanup actions (admin only; audited Ansible prune run) ───────────── #}
   {% if session.user_role == 'admin' %}
-  <div style="margin-bottom:1rem;">
+  <div class="disk-actions">
     {% if ansible_available and g.has_target %}
-    <div style="display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;">
-      <form method="post" action="/plugins/docker/disk/{{ g.host_id }}/prune" style="margin:0;"
-            data-confirm="Remove all STOPPED containers on {{ g.host_name }}? This cannot be undone.">{{ csrf_field() }}
-        <input type="hidden" name="target" value="containers">
-        <button type="submit" class="btn btn-sm">Prune stopped containers</button>
-      </form>
-      <form method="post" action="/plugins/docker/disk/{{ g.host_id }}/prune" style="margin:0;"
-            data-confirm="Remove ALL unused images on {{ g.host_name }} (docker image prune -a)? Any image not used by a container is deleted.">{{ csrf_field() }}
-        <input type="hidden" name="target" value="images">
-        <button type="submit" class="btn btn-sm">Prune unused images</button>
-      </form>
-      <form method="post" action="/plugins/docker/disk/{{ g.host_id }}/prune" style="margin:0;"
-            data-confirm="Run a full system prune on {{ g.host_name }}? Removes stopped containers, unused networks, untagged images nothing uses, and the build cache.">{{ csrf_field() }}
-        <input type="hidden" name="target" value="system">
-        <button type="submit" class="btn btn-sm btn-danger">System prune…</button>
-      </form>
-    </div>
-    <div style="font-size:0.72rem;color:var(--text-muted);margin-top:0.4rem;">
-      Reclaimed space appears on the next agent sample.
-    </div>
+    <form method="post" action="/plugins/docker/disk/{{ g.host_id }}/prune"
+          data-confirm="Remove all STOPPED containers on {{ g.host_name }}? This cannot be undone.">{{ csrf_field() }}
+      <input type="hidden" name="target" value="containers">
+      <button type="submit" class="btn btn-sm">Prune stopped containers</button>
+    </form>
+    <form method="post" action="/plugins/docker/disk/{{ g.host_id }}/prune"
+          data-confirm="Remove ALL unused images on {{ g.host_name }} (docker image prune -a)? Any image not used by a container is deleted.">{{ csrf_field() }}
+      <input type="hidden" name="target" value="images">
+      <button type="submit" class="btn btn-sm">Prune unused images</button>
+    </form>
+    <form method="post" action="/plugins/docker/disk/{{ g.host_id }}/prune"
+          data-confirm="Run a full system prune on {{ g.host_name }}? Removes stopped containers, unused networks, untagged images nothing uses, and the build cache.">{{ csrf_field() }}
+      <input type="hidden" name="target" value="system">
+      <button type="submit" class="btn btn-sm btn-danger">System prune…</button>
+    </form>
+    <span class="field-hint">Each runs an audited Ansible playbook on {{ g.host_name }}; reclaimed space shows on the next agent sample.</span>
     {% elif not ansible_available %}
-    <div style="font-size:0.74rem;color:var(--text-muted);">Cleanup needs the Ansible runner (currently unavailable).</div>
+    <span class="field-hint">Cleanup needs the Ansible runner (currently unavailable).</span>
     {% else %}
-    <div style="font-size:0.74rem;color:var(--text-muted);">
-      Link an <a href="/hosts/{{ g.host_id }}">Ansible target</a> to this host to enable prune actions.
-    </div>
+    <span class="field-hint">Link an <a href="/hosts/{{ g.host_id }}">Ansible target</a> to this host to enable prune actions.</span>
     {% endif %}
   </div>
   {% endif %}
 
-  {# ── Per-image table ──────────────────────────────────────────────────── #}
-  <div class="field-hint" style="margin-bottom:0.4rem;">
-    {% if g.images_capped %}The {{ g.images|length }} largest of {{ g.summary.images_total }} images, largest first.
-    {% else %}Every image, largest first.{% endif %}
-  </div>
-  <div class="card-flush">
-    <table class="table">
-      <thead>
-        <tr><th>Image</th><th>Size</th>
-          <th title="Layers this image has in common with other images: stored once, so removing this image frees its size less this">Shared with other images</th>
-          <th>Used by</th></tr>
-      </thead>
-      <tbody>
-        {% for im in g.images %}
+  {# ── Images by repository, versions folded under it (#5305) ─────────── #}
+  <section class="card-flush" aria-label="Images on {{ g.host_name }}">
+    <h3 class="table-caption">Images by repository
+      <span class="tone-muted">{% if g.images_capped %}the {{ g.images_listed }} largest of {{ s.images_total }} images{% else %}{{ g.images_listed }} images{% endif %}</span></h3>
+    {% if g.repos %}
+    <table class="table image-repos">
+      <thead><tr>
+        <th>Repository</th>
+        <th class="num">Versions</th>
+        <th class="num" title="Each version's size less the layers it shares with other images, added up: what removing them all would free, roughly">Own size</th>
+        <th class="num">Used by</th>
+        <th class="num" title="Own size of the versions no container uses">Reclaimable</th>
+      </tr></thead>
+      {% for r in g.repos %}
+      <tbody class="image-repo">
         <tr>
-          <td style="font-size:0.84rem;font-family:ui-monospace,monospace;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
-            {% if im.repo_tag %}{{ im.repo_tag }}{% else %}<span style="color:var(--text-muted);">untagged</span> {{ im.image_id }}{% endif %}
-            {% if im.reclaimable %}<span title="No container uses this image" style="font-size:0.68rem;color:var(--orange);border:1px solid var(--orange);border-radius:3px;padding:0 0.3rem;margin-left:0.4rem;">reclaimable</span>{% endif %}
+          <td class="cell-name">
+            <details>
+              <summary title="{{ r.repo or 'untagged images' }}">{% if r.repo %}<span class="mono">{{ r.repo }}</span>{% else %}<span class="tone-muted">untagged</span>{% endif %}</summary>
+              <table class="table image-versions">
+                <thead><tr><th>Tag</th><th>ID</th><th class="num">Size</th><th class="num" title="Layers in common with other images: stored once">Shared</th><th class="num">Used by</th></tr></thead>
+                <tbody>
+                  {% for v in r.versions %}
+                  <tr>
+                    <td class="mono">{{ v.tag or "—" }}</td>
+                    <td class="mono tone-muted">{{ (v.image_id or "")|replace("sha256:", "")|truncate(12, true, "") }}</td>
+                    <td class="num">{{ v.size|bytes }}</td>
+                    <td class="num tone-muted">{{ v.shared|bytes }}</td>
+                    <td class="num">{% if v.containers %}{{ v.containers }} container{{ "s" if v.containers != 1 }}{% else %}<span class="tone-warn">nothing</span>{% endif %}</td>
+                  </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </details>
           </td>
-          <td style="font-family:ui-monospace,monospace;font-size:0.86rem;">{{ im.size }}</td>
-          <td style="font-family:ui-monospace,monospace;font-size:0.86rem;color:var(--text-muted);">{{ im.shared }}</td>
-          <td style="font-size:0.86rem;color:{% if im.containers %}var(--text){% else %}var(--text-muted){% endif %};">{% if im.containers %}{{ im.containers }} container{{ "s" if im.containers != 1 }}{% else %}nothing{% endif %}</td>
+          <td class="num">{{ r.versions|length }}{% if r.unused %} <span class="tone-dim">({{ r.unused }} unused)</span>{% endif %}</td>
+          <td class="num">{{ r.own|bytes }}</td>
+          <td class="num">{% if r.containers %}{{ r.containers }} container{{ "s" if r.containers != 1 }}{% else %}<span class="tone-warn">nothing</span>{% endif %}</td>
+          <td class="num">{% if r.reclaimable %}<span class="tone-warn">{{ r.reclaimable|bytes }}</span>{% else %}<span class="tone-dim">—</span>{% endif %}</td>
         </tr>
-        {% else %}
-        <tr><td colspan="4" style="color:var(--text-muted);font-size:0.85rem;text-align:center;padding:1.5rem;">No images reported.</td></tr>
-        {% endfor %}
       </tbody>
+      {% endfor %}
     </table>
-  </div>
-</div>
+    {% else %}
+    <p class="tone-muted" style="margin:0;padding:1rem;">No images reported.</p>
+    {% endif %}
+  </section>
+</section>
 {% endfor %}
 {% else %}
-<div class="card" style="text-align:center;padding:3rem;">
-  <div style="color:var(--text-muted);font-size:0.9rem;">
-    No disk usage reported yet. The host agent reports image/disk usage from
-    <code>docker system df</code> on hosts running Docker.
-  </div>
+<div class="card empty-state">
+  No disk usage reported yet. The host agent reports what Docker keeps on disk,
+  from <code>docker system df</code>, on hosts running Docker.
 </div>
 {% endif %}
 {% endblock %}

plugins/docker/templates/docker/index.html

@@ -41,6 +41,19 @@
      hx-swap="innerHTML">
   <div class="card"><p class="field-hint">Loading…</p></div>
 </div>
+{% if disk %}
+{# What Docker keeps on each host's disk, and its growth over a week (#5306). #}
+<p class="docker-disk-line">
+  <a href="/plugins/docker/disk" class="section-title">Disk</a>
+  {% for d in disk %}
+  <span class="docker-disk-host"><a href="/plugins/docker/disk#host-{{ d.host_id }}">{{ d.host_name }}</a>
+    {{ d.total|bytes }}
+    {%- if d.growth and d.growth.change %} <span class="tone-{{ 'warn' if d.growth.pct is not none and d.growth.pct >= 10 else 'muted' }}"
+      title="Since {{ d.growth.since.strftime('%Y-%m-%d %H:%M UTC') }}">{{ "+" if d.growth.change > 0 else "−" }}{{ (d.growth.change|abs)|bytes }} in 7d</span>{% endif -%}
+    {%- if d.reclaimable %} <span class="tone-dim">· {{ d.reclaimable|bytes }} reclaimable</span>{% endif %}</span>
+  {% endfor %}
+</p>
+{% endif %}
 <script>
 (function () {
   var rows = document.getElementById('docker-rows');