feat(docker): Services & Failures widget lists what is wrong, then packs the healthy (#5252)

A verdict line (services healthy · other containers running · failed in
24h), then "Needs a look": troubled services with why (crash-looping, N of
M running), since when and the last error, and troubled containers
(unhealthy, restarting, exited with an error, out of memory). Then "Failed
in the last 24h" by name, with how often, when and where. Then the healthy
rest one line each (name · hosts · replicas) in as many columns as the
widget is wide, collapsing after 40 to "+N more healthy".

Per-container CPU is gone from this widget: Busiest Containers owns it.

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

plugins/docker/routes.py

@@ -214,7 +214,6 @@ async def widget():
             {c.host_id for c in all_containers}
             | {n.host_id for n in nodes} | {s.host_id for s in services},
         )
-        capacity = await docker_svc.host_capacity(db, {c.host_id for c in all_containers})
 
     # Swarm tasks collapse into per-service rows (each replica tagged with its
     # host); non-swarm containers stay grouped by host.
@@ -227,42 +226,41 @@ async def widget():
 
     standalone = [c for c in all_containers if not c.service_name]
     running = [c for c in standalone if c.status == "running"]
-    display = standalone if show_stopped else running
 
-    def trouble(c) -> int:
-        if (c.status or "") == "restarting" or c.health == "unhealthy":
-            return 0
-        if c.status != "running" and docker_svc.exit_is_failure(c.exit_code, c.oom_killed):
-            return 1
-        return 2 if c.status == "running" else 3
+    def troubled(c) -> bool:
+        return ((c.status or "") == "restarting" or c.health == "unhealthy"
+                or (c.status != "running" and docker_svc.exit_is_failure(c.exit_code, c.oom_killed)))
 
-    # Group for display so multi-host fleets read clearly; single-host stays flat.
-    groups: dict[str, dict] = {}
-    for c in sorted(display, key=lambda c: (trouble(c), c.name)):
-        g = groups.setdefault(c.host_id, {
-            "host_id": c.host_id,
-            "host_name": host_name.get(c.host_id, c.host_id),
-            "containers": [],
-        })
-        g["containers"].append({"c": c, "usage": docker_svc.usage(
-            c, *capacity.get(c.host_id, (None, None))),
-            "exit_failed": docker_svc.exit_is_failure(c.exit_code, c.oom_killed)})
-    host_groups = sorted(groups.values(), key=lambda g: g["host_name"].lower())
+    # The widget-shape order (UI & Design ruling): what is wrong first, then
+    # the healthy rest one line each, collapsing past HEALTHY_SHOWN.
+    bad_containers = sorted((c for c in standalone if troubled(c)), key=lambda c: c.name)
+    healthy = ([{"kind": "service", "s": s} for s in swarm_services if s["state"] == "healthy"]
+               + [{"kind": "container", "c": c} for c in sorted(running, key=lambda c: c.name)
+                  if not troubled(c)]
+               + ([{"kind": "stopped", "c": c} for c in sorted(standalone, key=lambda c: c.name)
+                   if c.status != "running" and not troubled(c)] if show_stopped else []))
 
     return await render_template(
         "docker/widget.html",
-        host_groups=host_groups,
-        multi_host=len(host_groups) > 1,
-        swarm_services=swarm_services,
+        bad_services=[s for s in swarm_services if s["state"] != "healthy"],
+        bad_containers=bad_containers,
+        healthy=healthy[:HEALTHY_SHOWN], healthy_more=max(0, len(healthy) - HEALTHY_SHOWN),
+        services_total=len(swarm_services),
         services_healthy=sum(s["state"] == "healthy" for s in swarm_services),
         running_count=len(running),
         failures=failures,
+        host_name=host_name,
         total_count=len(all_containers) + len(swarm_services),
-        show_stopped=show_stopped,
         widget_id=widget_id,
     )
 
 
+# Healthy services and containers listed on the dashboard widget before the
+# rest collapse to "+N healthy"; the Docker page lists them all.
+HEALTHY_SHOWN = 40
+FAILURES_SHOWN = 5
+
+
 CPU_AVERAGE_MINUTES = 5
 
 

plugins/docker/templates/docker/widget.html

@@ -1,80 +1,80 @@
-{# docker/widget.html — dashboard widget: what Docker is running and what has
-   failed. Swarm services first, troubled ones at the top with since-times; then
-   the containers outside any service, by host, problems first. The failed count
-   links to the Docker page's list of exactly what it counts. #}
-{% from "docker/_usage.html" import cpu %}
+{# docker/widget.html — the dashboard Docker widget (#5252), in the widget-shape
+   order: a verdict line; the services and containers in trouble; what failed
+   in the last 24h, by name; then everything healthy, one line each, packed
+   into as many columns as the widget is wide. Resource use is the Busiest
+   Containers widget's, so it isn't repeated here. #}
+{% from "_macros.html" import status_dot %}
 {% if total_count == 0 %}
-<p class="empty" style="padding:0.5rem 0;font-size:0.85rem;">No containers reported yet.</p>
+<div class="w-verdict" style="color:var(--text-muted);">No containers reported yet.</div>
 {% else %}
-
-<div style="display:flex;flex-wrap:wrap;gap:0.4rem 1.25rem;margin-bottom:0.65rem;">
-  {% if swarm_services %}
-  <div title="Swarm services with every replica running">
-    <span class="tone-{{ 'ok' if services_healthy == swarm_services|length else 'warn' }}" style="font-size:1.4rem;font-weight:500;line-height:1;">{{ services_healthy }}/{{ swarm_services|length }}</span>
-    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">services healthy</span>
-  </div>
-  {% endif %}
-  <div title="Containers running outside any swarm service">
-    <span style="font-size:1.4rem;font-weight:500;line-height:1;color:var(--green);">{{ running_count }}</span>
-    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">containers running</span>
-  </div>
-  <a href="/plugins/docker/#failures" style="color:inherit;text-decoration:none;"
-     title="Containers that died or were OOM-killed in the last 24h, and swarm services with failed tasks. A container someone stopped is not counted. Click for the list.">
-    <span class="tone-{{ 'crit' if failures else 'dim' }}" style="font-size:1.4rem;font-weight:500;line-height:1;">{{ failures|length }}</span>
-    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;border-bottom:1px dotted var(--border-mid);">failed in 24h</span>
-  </a>
+{% set wrong = bad_services|length + bad_containers|length %}
+<div class="w-verdict {{ 'tone-crit' if wrong else ('tone-warn' if failures else 'tone-ok') }}">
+  {%- if services_total %}{{ services_healthy }}/{{ services_total }} services healthy · {% endif -%}
+  {{ running_count }} other container{{ 's' if running_count != 1 }} running ·
+  {% if failures %}<a href="/plugins/docker/#failures" style="color:inherit;">{{ failures|length }} failed in 24h</a>{% else %}nothing failed in 24h{% endif -%}
 </div>
 
-{# Swarm services — troubled first, each with its replicas' host chips
-   (dashed = a node with no Steward agent, count-only from placement). #}
-{% if swarm_services %}
-<div style="font-size:0.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin:0.5rem 0 0.2rem;">Swarm services</div>
-<div style="display:grid;gap:0.4rem;margin-bottom:0.4rem;">
-  {% for s in swarm_services %}
-  <div>
-    <div style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;">
-      <span class="dot {% if s.state == 'healthy' %}dot-up{% elif s.state == 'degraded' %}dot-warn{% else %}dot-down{% endif %}"></span>
-      <span style="font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ s.name }}</span>
-      {% if s.crash_looping %}<span class="tone-crit" style="font-size:0.7rem;font-weight:500;flex-shrink:0;" title="{{ s.failures_1h }} tasks failed in the last hour{% if s.last_error %}: {{ s.last_error.error or s.last_error.message or s.last_error.state }}{% endif %}">crash-looping</span>{% endif %}
-      {% if s.state != 'healthy' and s.trouble_since %}<span class="tone-dim" style="font-size:0.7rem;flex-shrink:0;">since {{ s.trouble_since|ago }}</span>{% endif %}
-      <span class="tone-{{ 'ok' if s.state == 'healthy' else ('warn' if s.state == 'degraded' else 'crit') }}" style="font-family:ui-monospace,monospace;font-size:0.74rem;margin-left:auto;flex-shrink:0;" title="replicas running / wanted">{{ s.running }}/{{ s.desired }}</span>
-    </div>
-    <div style="display:flex;flex-wrap:wrap;gap:0.25rem;margin:0.2rem 0 0 1rem;">
-      {% for r in s.replicas %}
-      {% if r.ghost %}
-      <span title="no Steward agent on this node — count from swarm placement" style="font-size:0.68rem;color:var(--text-dim);background:var(--bg-elevated);border:1px dashed var(--border-mid);border-radius:4px;padding:0.05rem 0.35rem;">{{ r.host }} ×{{ r.count }}</span>
-      {% else %}
-      <span style="font-size:0.68rem;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;padding:0.05rem 0.35rem;">{{ r.host }}</span>
-      {% endif %}
-      {% endfor %}
-    </div>
-  </div>
-  {% endfor %}
+{% if wrong %}
+<div class="w-section">Needs a look</div>
+{% for s in bad_services %}
+<div class="w-item">
+  {{ status_dot('degraded' if s.state == 'degraded' else 'down') }}
+  <span class="w-label" title="{{ s.name }}">{{ s.name }}
+    <span class="w-sub {{ 'tone-crit' if s.state != 'degraded' else 'tone-warn' }}">
+      {%- if s.crash_looping %}crash-looping: {{ s.failures_1h }} failed in the last hour{% else %}{{ s.running }} of {{ s.desired }} running{% endif %}
+      {%- if s.trouble_since %}, since {{ s.trouble_since|ago }}{% endif %}
+      {%- if s.last_error and (s.last_error.error or s.last_error.message) %} · {{ s.last_error.error or s.last_error.message }}{% endif -%}
+    </span>
+  </span>
+  <span class="w-meta" title="replicas running / wanted">{{ s.running }}/{{ s.desired }}</span>
 </div>
-{% endif %}
-
-{% if host_groups and swarm_services %}
-<div style="font-size:0.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin:0.6rem 0 0.2rem;">Other containers</div>
-{% endif %}
-{% for g in host_groups %}
-{% if multi_host %}
-<div style="font-size:0.7rem;color:var(--text-dim);margin:0.4rem 0 0.15rem;">{{ g.host_name }}</div>
-{% endif %}
-<div style="display:grid;gap:2px;">
-  {% for item in g.containers %}
-  {% set c = item.c %}
-  <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;padding:0.15rem 0;">
-    <span class="dot {% if c.status == 'running' and c.health != 'unhealthy' %}dot-up{% elif c.status in ('paused', 'restarting') %}dot-warn{% else %}dot-down{% endif %}"></span>
-    <a href="/plugins/docker/container/{{ c.host_id }}/{{ c.name }}" style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none;">
-      {{ c.name }}{% if c.health == 'unhealthy' %} <span class="tone-crit" style="font-size:0.7rem;">unhealthy</span>{% endif %}{% if c.status == 'restarting' %} <span class="tone-warn" style="font-size:0.7rem;">restarting</span>{% endif %}
-    </a>
-    {% if c.status != 'running' and c.exit_code is not none and c.exit_code != 0 %}
-    <span title="{{ 'last exit code' if item.exit_failed else 'stopped by a signal; not a failure' }}" class="tone-{{ 'crit' if item.exit_failed else 'dim' }}" style="font-size:0.7rem;flex-shrink:0;">exit {{ c.exit_code }}{% if c.oom_killed %} (OOM){% endif %}</span>
-    {% endif %}
-    {% if c.status == 'running' %}<span style="font-size:0.72rem;font-family:ui-monospace,monospace;flex-shrink:0;">{{ cpu(item.usage) }}</span>{% endif %}
-  </div>
-  {% endfor %}
+{% endfor %}
+{% for c in bad_containers %}
+<div class="w-item">
+  {{ status_dot('warn' if c.status == 'restarting' else 'down') }}
+  <span class="w-label" title="{{ c.name }}">
+    {%- if session.user_id %}<a href="/plugins/docker/container/{{ c.host_id }}/{{ c.name }}">{{ c.name }}</a>{% else %}{{ c.name }}{% endif %}
+    <span class="w-sub tone-crit">
+      {%- if c.health == 'unhealthy' %}unhealthy{% elif c.status == 'restarting' %}restarting{% else %}exited {{ c.exit_code }}{% if c.oom_killed %}, out of memory{% endif %}{% endif %} · {{ host_name.get(c.host_id, c.host_id) }}
+    </span>
+  </span>
 </div>
 {% endfor %}
+{% endif %}
 
+{% if failures %}
+<div class="w-section">Failed in the last 24h</div>
+{% for f in failures[:5] %}
+<div class="w-item">
+  {{ status_dot('failed') }}
+  <span class="w-label" title="{{ f.name }}">{{ f.name }}
+    <span class="w-sub">{% if f.count > 1 %}{{ f.count }} times, last {% endif %}{{ f.at|ago }}{% if f.detail %} · {{ f.detail }}{% endif %} · {{ f.host }}</span>
+  </span>
+</div>
+{% endfor %}
+{% if failures|length > 5 %}<div class="w-more">+{{ failures|length - 5 }} more · <a href="/plugins/docker/#failures">the full list</a></div>{% endif %}
+{% endif %}
+
+{% if healthy %}
+<div class="w-section">Healthy</div>
+<div class="w-grid">
+  {% for h in healthy %}
+  <div class="w-item">
+    {% if h.kind == 'service' %}{% set s = h.s %}
+    {{ status_dot('up') }}
+    <span class="w-label" title="{{ s.name }} — on {{ s.replicas|map(attribute='host')|unique|join(', ') }}">{{ s.name }}
+      <span style="color:var(--text-dim);"> · {{ s.replicas|map(attribute='host')|unique|join(', ') }}</span></span>
+    <span class="w-meta" title="replicas running / wanted">{{ s.running }}/{{ s.desired }}</span>
+    {% else %}{% set c = h.c %}
+    {{ status_dot('up' if h.kind == 'container' else 'unknown') }}
+    <span class="w-label" title="{{ c.name }}">
+      {%- if session.user_id %}<a href="/plugins/docker/container/{{ c.host_id }}/{{ c.name }}">{{ c.name }}</a>{% else %}{{ c.name }}{% endif %}
+      <span style="color:var(--text-dim);"> · {{ host_name.get(c.host_id, c.host_id) }}</span></span>
+    {% if h.kind == 'stopped' %}<span class="w-meta">stopped</span>{% endif %}
+    {% endif %}
+  </div>
+  {% endfor %}
+</div>
+{% if healthy_more %}<div class="w-more">+{{ healthy_more }} more healthy · <a href="/plugins/docker/">all of Docker</a></div>{% endif %}
+{% endif %}
 {% endif %}