bvandeusenandClaude Opus 5.5
61b22056d5
#5209 "Docker views: readable names, CPU/memory in cores and bytes, failures listed with since-time" (milestone 477 "UI problems first"). - A swarm task reads as its service and slot ("codex_db · 1", or the node for a global service), with the raw name in the title: Docker page, host panel, busiest widget, container detail. - CPU reads in cores (Docker's 100% = one core), toned by its share of the host's CPUs from the agent's per-core series. Memory reads in bytes, against a limit only when one is really set (Docker reports host RAM otherwise). - Exit 137/143 without an OOM kill is a stop, not a failure: no exited_nonzero, no crash-loop death, no "failed (24h)", dim exit code. - "Failed (24h)" is a list (Docker page #failures, linked from the widget and the tile): plain containers by their deaths, swarm services by Swarm's failed tasks; a second manager's copy of a task death counts once. - Failing swarm services lead Needs attention; services sort problems first with since-times on the page, the widget and the Swarm page; nodes that are down or drained sort first. - Busiest widget orders by a 5-minute CPU average so the list holds still. - Host panel: a table, problems first with what is wrong and since when; replaced swarm tasks hidden and counted. - Container detail: node hostname, I/O labelled "since start", Restarts hidden for swarm tasks with a note on where task failures are. - Widget names: "Docker — Services & failures", "Docker — Busiest containers". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
131 lines
7.6 KiB
HTML
131 lines
7.6 KiB
HTML
{# docker/container_detail.html — full detail page for one container. A swarm
|
|
task is titled by its service and slot, with the raw container name under
|
|
it; CPU reads in cores and memory in bytes (see _usage.html). #}
|
|
{% extends "base.html" %}
|
|
{% from "_macros.html" import crumbs %}
|
|
{% from "docker/_usage.html" import cpu, mem %}
|
|
{% block title %}{{ label or name }} — Docker — Steward{% endblock %}
|
|
{% block breadcrumb %}{{ crumbs([("Docker", "/plugins/docker/"), (label or name, "")]) }}{% endblock %}
|
|
{% block content %}
|
|
|
|
{% if container is none %}
|
|
<div class="card" style="text-align:center;padding:3rem;">
|
|
<div style="font-weight:500;margin-bottom:0.4rem;">Container not found</div>
|
|
<div style="color:var(--text-muted);font-size:0.9rem;">
|
|
No container named <code>{{ name }}</code> is currently reported for this host.
|
|
It may have been removed, or the host agent hasn't reported recently.
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
|
|
{# ── Header ──────────────────────────────────────────────────────────────── #}
|
|
<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.35rem;flex-wrap:wrap;">
|
|
<span class="dot {% if container.status == 'running' %}dot-up{% elif container.status == 'paused' %}dot-warn{% else %}dot-down{% endif %}"></span>
|
|
<h1 class="page-title" style="margin-bottom:0;">{{ label }}</h1>
|
|
{% if container.health == 'healthy' %}<span style="font-size:0.72rem;color:var(--green);border:1px solid var(--green);border-radius:3px;padding:0.05rem 0.4rem;">healthy</span>
|
|
{% elif container.health == 'unhealthy' %}<span style="font-size:0.72rem;color:var(--red);border:1px solid var(--red);border-radius:3px;padding:0.05rem 0.4rem;">unhealthy</span>
|
|
{% elif container.health == 'starting' %}<span style="font-size:0.72rem;color:var(--orange);border:1px solid var(--orange);border-radius:3px;padding:0.05rem 0.4rem;">starting</span>{% endif %}
|
|
</div>
|
|
{% if label != container.name %}
|
|
<div style="font-size:0.75rem;color:var(--text-dim);font-family:ui-monospace,monospace;margin-bottom:0.25rem;overflow-wrap:anywhere;">{{ container.name }}</div>
|
|
{% endif %}
|
|
<div style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1.5rem;">
|
|
{{ container.status }}{% if uptime %} · up {{ uptime }}{% endif %}
|
|
{% if host %} · on <a href="/hosts/{{ host.id }}" style="color:var(--text-muted);">{{ host.name }}</a>{% endif %}
|
|
· <a href="/plugins/docker/container/{{ host_id }}/{{ name }}/logs">View logs</a>
|
|
</div>
|
|
|
|
{# ── Facts grid ──────────────────────────────────────────────────────────── #}
|
|
{% macro fact(label, value, colour="") %}
|
|
<div class="card" style="margin-bottom:0;">
|
|
<div class="section-title" style="margin-bottom:0.3rem;">{{ label }}</div>
|
|
<div style="font-size:0.95rem;{% if colour %}color:{{ colour }};{% endif %}font-family:ui-monospace,monospace;">{{ value }}</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
|
|
{{ fact("CPU", cpu(usage) if container.status == 'running' else "—") }}
|
|
{{ fact("Memory", mem(usage) if container.status == 'running' else "—") }}
|
|
{#- Swarm never restarts a task's container: it replaces the task with a new
|
|
one, so restart_count is always 0 there and the service's task failures
|
|
(Swarm page) are the count that means something. #}
|
|
{% if not container.service_name %}
|
|
{{ fact("Restarts", container.restart_count, "var(--orange)" if container.restart_count else "") }}
|
|
{% endif %}
|
|
{{ fact("Last exit", (container.exit_code ~ (" (OOM)" if container.oom_killed else "")) if container.exit_code is not none else "—",
|
|
"var(--red)" if exit_failed else "") }}
|
|
{{ fact("Net in since start", net_rx) }}
|
|
{{ fact("Net out since start", net_tx) }}
|
|
{{ fact("Disk read since start", blk_read) }}
|
|
{{ fact("Disk written since start", blk_write) }}
|
|
</div>
|
|
{% if container.service_name %}
|
|
<div style="font-size:0.78rem;color:var(--text-muted);margin:-0.75rem 0 1.5rem;">
|
|
Swarm replaces a failed task with a new container rather than restarting it; the
|
|
service's failed tasks are on the <a href="/plugins/docker/swarm">Swarm page</a>.
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# ── Image / placement ───────────────────────────────────────────────────── #}
|
|
<div class="card" style="margin-bottom:1.5rem;">
|
|
<div style="display:grid;grid-template-columns:max-content 1fr;gap:0.4rem 1.25rem;font-size:0.86rem;">
|
|
<span style="color:var(--text-muted);">Image</span>
|
|
<span style="font-family:ui-monospace,monospace;word-break:break-all;">{{ container.image or "—" }}</span>
|
|
{% if container.compose_project %}
|
|
<span style="color:var(--text-muted);">Compose project</span><span>{{ container.compose_project }}</span>
|
|
{% endif %}
|
|
{% if container.service_name %}
|
|
<span style="color:var(--text-muted);">Swarm service</span><span>{{ container.service_name }}</span>
|
|
{% endif %}
|
|
{% if container.node_id %}
|
|
<span style="color:var(--text-muted);">Node</span>
|
|
{% if node_name %}<span title="node id {{ container.node_id }}">{{ node_name }}</span>
|
|
{% else %}<span style="font-family:ui-monospace,monospace;">{{ container.node_id }}</span>{% endif %}
|
|
{% endif %}
|
|
{% if ports %}
|
|
<span style="color:var(--text-muted);">Ports</span>
|
|
<span style="font-family:ui-monospace,monospace;">{% for p in ports %}{{ p.host_port }}:{{ p.container_port }}/{{ p.protocol }}{% if not loop.last %}, {% endif %}{% endfor %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Resource history (range-toggled) ────────────────────────────────────── #}
|
|
<div class="card" style="margin-bottom:1.5rem;">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.75rem;flex-wrap:wrap;">
|
|
<h3 class="section-title" style="margin-bottom:0;">Resource history</h3>
|
|
{% include "_time_range.html" %}
|
|
</div>
|
|
<div id="container-history"
|
|
hx-get="/plugins/docker/container/{{ host_id }}/{{ name }}/history"
|
|
hx-trigger="load, rangeChange from:body"
|
|
hx-include="#time-range"
|
|
hx-swap="innerHTML">
|
|
<div style="color:var(--text-muted);font-size:0.85rem;">Loading…</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Lifecycle timeline ──────────────────────────────────────────────────── #}
|
|
<div class="card">
|
|
<h3 class="section-title" style="margin-bottom:0.75rem;">Lifecycle</h3>
|
|
{% if events %}
|
|
<div style="display:grid;gap:0.5rem;">
|
|
{% for e in events %}
|
|
<div style="display:flex;align-items:baseline;gap:0.6rem;font-size:0.85rem;">
|
|
<span style="color:{{ e.colour }};width:1rem;text-align:center;flex-shrink:0;">{{ e.glyph }}</span>
|
|
<span style="font-weight:500;width:6.5rem;flex-shrink:0;">{{ e.event }}</span>
|
|
<span style="color:var(--text-muted);flex:1;min-width:0;">{{ e.detail or "" }}</span>
|
|
<span style="color:var(--text-dim);font-size:0.78rem;white-space:nowrap;" title="{{ e.at }}">{{ e.at.strftime("%Y-%m-%d %H:%M") }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div style="color:var(--text-muted);font-size:0.85rem;">
|
|
No lifecycle events recorded yet. Start/stop/health changes appear here as the
|
|
agent reports them over time.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% endblock %}
|