FabledSteward/steward/templates/ansible/run_detail.html

{% 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 %}
{% block content %}
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
    <a href="/ansible/" class="btn btn-ghost btn-sm">← Runs</a>
    <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" onsubmit="return confirm('Cancel this run?');">
            <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>

{% 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 style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ 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 %}
        {% 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>
        {% 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>
</div>

{% if run.results and run.results.hosts %}
<div class="card">
    <div class="section-title" style="margin-bottom:0.6rem;">Host summary</div>
    <table class="table">
        <thead><tr>
            <th>Host</th>
            <th style="text-align:center;">ok</th><th style="text-align:center;">changed</th>
            <th style="text-align:center;">unreachable</th><th style="text-align:center;">failed</th>
            <th style="text-align:center;">skipped</th>
        </tr></thead>
        <tbody>
        {% for host, c in run.results.hosts.items() %}
        <tr>
            <td style="font-family:ui-monospace,monospace;">{{ host }}</td>
            <td style="text-align:center;">{{ c.ok }}</td>
            <td style="text-align:center;color:{% if c.changed %}var(--yellow){% else %}var(--text-dim){% endif %};">{{ c.changed }}</td>
            <td style="text-align:center;color:{% if c.unreachable %}var(--red){% else %}var(--text-dim){% endif %};">{{ c.unreachable }}</td>
            <td style="text-align:center;color:{% if c.failed %}var(--red){% else %}var(--text-dim){% endif %};">{{ c.failed }}</td>
            <td style="text-align:center;color:var(--text-dim);">{{ c.skipped }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </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>
    {% endif %}
</div>
{% endif %}

<div class="card" style="padding:0;">
    <div style="padding:0.75rem 1rem;background:var(--bg-elevated);border-bottom:1px solid var(--border);">
        <span style="color:var(--text-muted);font-size:0.85rem;">Output</span>
    </div>
    {% if run.status.value in ("running", "queued") %}
    <pre id="live-output"
         style="margin:0;padding:1rem;background:var(--bg);font-size:0.78rem;color:var(--green);max-height:600px;overflow-y:auto;white-space:pre-wrap;">{{ run.output or "" }}</pre>
    <div id="run-done-status" style="padding:0.5rem 1rem;font-size:0.85rem;color:var(--text-muted);">
        Streaming…
    </div>
    <script>
    (function() {
        var es = new EventSource('/ansible/runs/{{ run.id }}/stream');
        var pre = document.getElementById('live-output');
        var status = document.getElementById('run-done-status');
        es.addEventListener('output', function(e) {
            pre.textContent += e.data + '\n';
            pre.scrollTop = pre.scrollHeight;
        });
        es.addEventListener('done', function(e) {
            es.close();
            status.textContent = 'Finished: ' + e.data;
        });
    })();
    </script>
    {% else %}
    <pre style="margin:0;padding:1rem;background:var(--bg);font-size:0.78rem;color:var(--text-muted);max-height:600px;overflow-y:auto;white-space:pre-wrap;">{{ run.output or "(no output)" }}</pre>
    {% endif %}
</div>
{% endblock %}