feat(ansible): runs named by what ran where, with ago, duration and one status badge (#5125)

Runs read "update.yml on web-1" (run_title over the scope label, beside
describe_scope) on the runs list, the run page's title and breadcrumb, and
the run-started panel. The list shows started |ago (full time on hover),
|duration (counting "so far" while a run is going) and a dry-run tag.

Run statuses join STATES, so the list and the run page use status_badge:
queued dim, running info (blue, so work in progress doesn't read as a
problem), success ok "Succeeded", failed crit, interrupted warn, cancelled
dim. run_started.html leaves its hard-coded colours for tokens; the run
page's facts move to the .kv list and its failures to var(--red). Template
hex colours: 54 -> 47.

Also fixes #5124's sidebar count, which CI run 8389 failed on: the stylesheet
guard allows no weight above 500, and .nav-count asked for 600.

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

steward/ansible/inventory_gen.py

@@ -127,6 +127,15 @@ def describe_scope(scope: str, targets: dict[str, str], groups: dict[str, str])
     return scope
 
 
+def run_title(playbook: str, scope_label: str | None) -> str:
+    """A run named by what it ran where: "update.yml on web-1",
+    "site.yml on group Docker Swarm", "ping.yml on all inventory targets"."""
+    where = scope_label or ""
+    if where.startswith("target "):
+        where = where[len("target "):]
+    return f"{playbook} on {where}" if where else playbook
+
+
 async def scope_labels(db, scopes) -> dict[str, str]:
     """{scope: describe_scope(scope)} for the given scopes, in two queries."""
     from sqlalchemy import select

steward/ansible/routes.py

@@ -9,7 +9,7 @@ from quart import (
 from sqlalchemy import select
 
 from steward.ansible import executor, guards, sources as src_module
-from steward.ansible.inventory_gen import scope_labels
+from steward.ansible.inventory_gen import run_title, scope_labels
 from steward.auth.middleware import require_role
 from steward.core.audit import audit_request as _audit
 from steward.models.ansible import AnsibleRun, AnsibleRunStatus
@@ -41,7 +41,24 @@ async def index():
             select(AnsibleRun).order_by(AnsibleRun.started_at.desc()).limit(50)
         )
         runs = result.scalars().all()
-    return await render_template("ansible/index.html", runs=runs)
+        labels = await scope_labels(db, [r.inventory_scope for r in runs])
+    now = datetime.now(timezone.utc)
+    return await render_template("ansible/index.html", runs=[run_view(r, labels, now) for r in runs])
+
+
+def run_duration(run: AnsibleRun, now: datetime) -> float | None:
+    """Seconds a run took, or has taken so far while it is still going."""
+    if run.started_at is None:
+        return None
+    return ((run.finished_at or now) - run.started_at).total_seconds()
+
+
+def run_view(run: AnsibleRun, labels: dict[str, str], now: datetime) -> dict:
+    """A run as the pages name it: its title, scope label and duration."""
+    label = labels.get(run.inventory_scope, run.inventory_scope)
+    return {"run": run, "title": run_title(run.playbook_path, label), "scope_label": label,
+            "duration_s": run_duration(run, now),
+            "check": bool((run.params or {}).get("check"))}
 
 
 @ansible_bp.get("/browse")
@@ -285,10 +302,12 @@ async def create_run():
         "check": bool((params_or_none or {}).get("check")),
         "vars": sorted(_run_vars(params_or_none, secret_vars))})
 
+    async with current_app.db_sessionmaker() as db:
+        labels = await scope_labels(db, [run.inventory_scope])
     return await render_template(
         "ansible/run_started.html",
         run=run,
-        source=source,
+        title=run_title(run.playbook_path, labels.get(run.inventory_scope, run.inventory_scope)),
     )
 
 
@@ -340,10 +359,10 @@ async def run_detail(run_id: str):
             res = await db.execute(
                 select(User.username).where(User.id == run.triggered_by))
             triggered_label = res.scalar_one_or_none() or "(deleted user)"
-        scope_label = (await scope_labels(db, [run.inventory_scope])).get(run.inventory_scope)
+        labels = await scope_labels(db, [run.inventory_scope])
     return await render_template(
         "ansible/run_detail.html", run=run, triggered_label=triggered_label,
-        scope_label=scope_label)
+        row=run_view(run, labels, datetime.now(timezone.utc)))
 
 
 @ansible_bp.post("/runs/<run_id>/cancel")

steward/core/formatting.py

@@ -116,6 +116,14 @@ STATES: dict[str, tuple[str, str]] = {
     "inactive": ("dim", "Inactive"),
     "paused": ("dim", "Paused"),
     "unknown": ("dim", "Unknown"),
+    # An Ansible run (AnsibleRunStatus): working is blue, not amber, so a run
+    # in progress doesn't read as a problem.
+    "queued": ("dim", "Queued"),
+    "running": ("info", "Running"),
+    "success": ("ok", "Succeeded"),
+    "failed": ("crit", "Failed"),
+    "interrupted": ("warn", "Interrupted"),
+    "cancelled": ("dim", "Cancelled"),
 }
 
 

steward/static/steward.css

@@ -89,7 +89,7 @@ code { font-family: var(--fs-font-mono); font-size: 0.875em; background: var(--b
 /* How many alerts need attention, beside the Alerts link. */
 .nav-count {
   margin-left: auto; padding: 0 0.45em; border-radius: var(--fs-radius-sm);
-  background: var(--red-dim); color: var(--red); font-size: 0.75rem; font-weight: 600;
+  background: var(--red-dim); color: var(--red); font-size: 0.75rem; font-weight: 500;
   font-variant-numeric: tabular-nums;
 }
 .side-user { border-top: 1px solid var(--border); padding: 0.7rem 1.25rem; }
@@ -274,6 +274,16 @@ a.stat-tile:hover { border-color: var(--border-mid); background: var(--bg-elevat
 /* A label/value list: <dl class="kv"><dt>…</dt><dd>…</dd></dl>. */
 .kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; font-size: 0.88rem; }
 .kv dt { color: var(--text-muted); }
+/* An Ansible run just started from the run form (ansible/run_started.html). */
+.run-started-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.9rem; }
+.run-started-link { margin-left: auto; font-size: 0.82rem; }
+.run-output {
+  margin: 0 0 0.5rem; padding: 0.75rem; background: var(--bg); border-radius: var(--fs-radius-sm);
+  font-family: var(--fs-font-mono); font-size: 0.78rem; color: var(--text-muted);
+  max-height: 400px; overflow-y: auto; white-space: pre-wrap;
+}
+/* Monospaced data: ids, limits, tags, paths. */
+.mono { font-family: var(--fs-font-mono); font-size: 0.85em; }
 /* The host page's health header (_host_vitals.html). */
 .host-health-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin-bottom: 0.75rem; }
 .host-health-summary { font-size: 0.92rem; }

steward/templates/ansible/index.html

@@ -1,43 +1,37 @@
 {% extends "base.html" %}
+{% from "_macros.html" import page_header, status_badge, empty_state %}
 {% block title %}Ansible Runs — Steward{% endblock %}
 {% block content %}
-<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
-    <h1 class="page-title" style="margin-bottom:0;">Ansible Runs</h1>
-    <div style="display:flex;gap:0.5rem;">
-      <a href="/ansible/inventory/targets" class="btn btn-ghost">Inventory</a>
-      <a href="/ansible/schedules" class="btn btn-ghost">Schedules</a>
-      <a href="/ansible/browse" class="btn">Browse Playbooks</a>
-    </div>
-</div>
+{% call page_header("Ansible Runs", "Each run by what it ran where, newest first.") %}
+    <a href="/ansible/inventory/targets" class="btn btn-ghost">Inventory</a>
+    <a href="/ansible/schedules" class="btn btn-ghost">Schedules</a>
+    <a href="/ansible/browse" class="btn">Browse Playbooks</a>
+{% endcall %}
 {% if not runs %}
-<div class="card">
-    <p style="color:var(--text-muted);">No runs yet. <a href="/ansible/browse">Browse playbooks</a> to begin.</p>
-</div>
+<div class="card">{{ empty_state("No runs yet.", "Browse playbooks", "/ansible/browse") }}</div>
 {% else %}
 <div class="card-flush">
 <table class="table">
     <thead>
         <tr>
-            <th>Playbook</th>
-            <th>Source</th>
+            <th>Run</th>
             <th>Status</th>
             <th>Started</th>
-            <th></th>
+            <th>Duration</th>
         </tr>
     </thead>
     <tbody>
-    {% for run in runs %}
-    {% set status_color = {"queued": "var(--text-dim)", "running": "var(--yellow)", "success": "var(--green)", "failed": "var(--red)", "interrupted": "var(--orange)", "cancelled": "var(--orange)"}.get(run.status.value, "var(--text-muted)") %}
+    {% for row in runs %}
+    {% set run = row.run %}
     <tr>
-        <td style="font-size:0.9rem;">{{ run.playbook_path }}</td>
-        <td style="color:var(--text-muted);font-size:0.9rem;">{{ run.source_name }}</td>
         <td>
-            <span style="color:{{ status_color }};font-size:0.85rem;font-weight:bold;">{{ run.status.value.upper() }}</span>
-        </td>
-        <td style="color:var(--text-muted);font-size:0.85rem;">{{ run.started_at.strftime("%Y-%m-%d %H:%M") }}</td>
-        <td class="td-actions">
-            <a href="/ansible/runs/{{ run.id }}" class="btn btn-sm btn-ghost">View</a>
+            <a href="/ansible/runs/{{ run.id }}" title="{{ run.inventory_scope }}">{{ row.title }}</a>
+            {% if row.check %}<span class="badge badge-dim" title="Ansible check mode: nothing was changed">dry run</span>{% endif %}
+            <div class="field-hint">{{ run.source_name }}</div>
         </td>
+        <td>{{ status_badge(run.status) }}</td>
+        <td title="{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}">{{ run.started_at|ago }}</td>
+        <td>{{ row.duration_s|duration }}{% if not run.finished_at and run.status.value in ('running', 'queued') %} so far{% endif %}</td>
     </tr>
     {% endfor %}
     </tbody>

steward/templates/ansible/run_detail.html

@@ -1,48 +1,33 @@
 {% extends "base.html" %}
-{% from "_macros.html" import crumbs %}
-{% block title %}Run {{ run.id[:8] }} — Steward{% endblock %}
-{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Run " ~ run.id[:8], "")]) }}{% endblock %}
+{% from "_macros.html" import crumbs, page_header, status_badge %}
+{% block title %}{{ row.title }} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), (row.title, "")]) }}{% endblock %}
 {% block content %}
-<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
-    <h1 class="page-title" style="margin-bottom:0;">Run Detail</h1>
-    <div style="margin-left:auto;display:flex;gap:0.5rem;">
-        {% if run.status.value in ("running", "queued") and session.user_role in ("operator", "admin") %}
-        <form method="post" action="/ansible/runs/{{ run.id }}/cancel" data-confirm="Cancel this run?">{{ csrf_field() }}
-            <button type="submit" class="btn btn-sm btn-danger">Cancel run</button>
-        </form>
-        {% endif %}
-        <a href="/ansible/runs/{{ run.id }}/log" class="btn btn-sm btn-ghost">Download log</a>
-    </div>
-</div>
+{% call page_header(row.title, "Run " ~ run.id[:8] ~ " from " ~ run.source_name) %}
+    {% if run.status.value in ("running", "queued") and session.user_role in ("operator", "admin") %}
+    <form method="post" action="/ansible/runs/{{ run.id }}/cancel" data-confirm="Cancel this run?">{{ csrf_field() }}
+        <button type="submit" class="btn btn-sm btn-danger">Cancel run</button>
+    </form>
+    {% endif %}
+    <a href="/ansible/runs/{{ run.id }}/log" class="btn btn-sm btn-ghost">Download log</a>
+{% endcall %}
 
-{% set status_color = {"queued": "var(--text-dim)", "running": "var(--yellow)", "success": "var(--green)", "failed": "var(--red)", "interrupted": "var(--orange)", "cancelled": "var(--orange)"}.get(run.status.value, "var(--text-muted)") %}
 <div class="card">
-    <div style="display:grid;grid-template-columns:auto 1fr;gap:0.4rem 1rem;font-size:0.9rem;margin-bottom:1rem;">
-        <span style="color:var(--text-muted);">ID</span><span style="color:var(--text-dim);font-family:monospace;">{{ run.id }}</span>
-        <span style="color:var(--text-muted);">Playbook</span><span>{{ run.playbook_path }}</span>
-        <span style="color:var(--text-muted);">Scope</span><span title="{{ run.inventory_scope }}">{{ scope_label or run.inventory_scope }}</span>
-        <span style="color:var(--text-muted);">Source</span><span>{{ run.source_name }}</span>
-        <span style="color:var(--text-muted);">Triggered by</span><span>{{ triggered_label }}</span>
-        <span style="color:var(--text-muted);">Status</span><span style="color:{{ status_color }};font-weight:bold;">{{ run.status.value.upper() }}</span>
-        <span style="color:var(--text-muted);">Started</span><span style="color:var(--text-dim);">{{ run.started_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
-        {% if run.finished_at %}
-        <span style="color:var(--text-muted);">Finished</span><span style="color:var(--text-dim);">{{ run.finished_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
-        {% endif %}
+    <dl class="kv">
+        <dt>Status</dt><dd>{{ status_badge(run.status) }}{% if row.check %} <span class="badge badge-dim" title="Ansible check mode: nothing was changed">dry run</span>{% endif %}</dd>
+        <dt>Started</dt><dd title="{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}">{{ run.started_at|ago }}</dd>
+        <dt>Duration</dt><dd>{{ row.duration_s|duration }}{% if not run.finished_at %} so far{% endif %}</dd>
+        <dt>Playbook</dt><dd>{{ run.playbook_path }}</dd>
+        <dt>Scope</dt><dd title="{{ run.inventory_scope }}">{{ row.scope_label }}</dd>
+        <dt>Source</dt><dd>{{ run.source_name }}</dd>
+        <dt>Triggered by</dt><dd>{{ triggered_label }}</dd>
         {% if run.params %}
-        {% if run.params.limit %}
-        <span style="color:var(--text-muted);">Limit</span><span style="font-family:ui-monospace,monospace;">{{ run.params.limit }}</span>
+        {% if run.params.limit %}<dt>Limit</dt><dd class="mono">{{ run.params.limit }}</dd>{% endif %}
+        {% if run.params.tags %}<dt>Tags</dt><dd class="mono">{{ run.params.tags }}</dd>{% endif %}
+        {% if run.params.extra_vars %}<dt>Extra vars</dt><dd class="mono">{{ run.params.extra_vars | join(", ") }}</dd>{% endif %}
         {% endif %}
-        {% if run.params.tags %}
-        <span style="color:var(--text-muted);">Tags</span><span style="font-family:ui-monospace,monospace;">{{ run.params.tags }}</span>
-        {% endif %}
-        {% if run.params.check %}
-        <span style="color:var(--text-muted);">Mode</span><span style="color:var(--orange);">dry-run (--check --diff)</span>
-        {% endif %}
-        {% if run.params.extra_vars %}
-        <span style="color:var(--text-muted);">Extra vars</span><span style="font-family:ui-monospace,monospace;">{{ run.params.extra_vars | join(", ") }}</span>
-        {% endif %}
-        {% endif %}
-    </div>
+        <dt>ID</dt><dd class="mono field-hint">{{ run.id }}</dd>
+    </dl>
 </div>
 
 {% if run.results and run.results.hosts %}
@@ -70,7 +55,7 @@
     </table>
     {% if run.results.failures %}
     <div class="section-title" style="margin:1rem 0 0.4rem;">Failures</div>
-    <pre style="margin:0;padding:0.75rem;background:var(--bg);border-radius:4px;font-size:0.75rem;color:#ff9090;max-height:240px;overflow:auto;white-space:pre-wrap;">{{ run.results.failures | join("\n") }}</pre>
+    <pre style="margin:0;padding:0.75rem;background:var(--bg);border-radius:4px;font-size:0.75rem;color:var(--red);max-height:240px;overflow:auto;white-space:pre-wrap;">{{ run.results.failures | join("\n") }}</pre>
     {% endif %}
 </div>
 {% endif %}

steward/templates/ansible/run_started.html

@@ -1,13 +1,13 @@
-<div style="background:#0f0f1e;border:1px solid #2a2a4a;border-radius:6px;padding:1rem;">
-    <div style="display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;">
-        <span style="color:#a0a000;font-weight:bold;">RUNNING</span>
-        <span style="color:#a0a0c0;font-size:0.9rem;">{{ run.playbook_path }}</span>
-        <a href="/ansible/runs/{{ run.id }}" style="color:#6060c0;font-size:0.82rem;margin-left:auto;">Full view →</a>
+{# The run form's answer: the run just started, streaming its output in place. #}
+{% from "_macros.html" import status_badge %}
+<div class="card run-started">
+    <div class="run-started-head">
+        {{ status_badge('running') }}
+        <span>{{ title }}</span>
+        <a href="/ansible/runs/{{ run.id }}" class="run-started-link">Full view →</a>
     </div>
-    <pre id="sse-output-{{ run.id }}"
-         style="background:#080810;padding:0.75rem;border-radius:4px;font-family:monospace;font-size:0.78rem;color:#a0c0a0;max-height:400px;overflow-y:auto;white-space:pre-wrap;margin:0 0 0.5rem 0;">
-    </pre>
-    <div id="sse-status-{{ run.id }}" style="font-size:0.85rem;color:var(--text-dim);">
+    <pre id="sse-output-{{ run.id }}" class="run-output"></pre>
+    <div id="sse-status-{{ run.id }}" class="field-hint">
         Streaming output…
     </div>
     <script>