Files
FabledSteward/steward/templates/ansible/run_detail.html
T
bvandeusen 389002fc6f
CI / lint (push) Successful in 3s
CI / unit (push) Successful in 8s
CI / integration (push) Successful in 2m18s
CI / publish (push) Successful in 1m2s
feat(ui): breadcrumb navigation across nested pages
Adds a breadcrumb trail to nested views for orientation. Mechanism: a
{% block breadcrumb %} slot in base.html (+ styling) and a shared crumbs()
macro in templates/_macros.html; each nested page fills the block with its
trail (root→current, last item is the current page). Pages without the block
render no bar, so top-level nav roots stay clean.

Applied to: Ansible (browse, schedules, playbook editor, run detail) +
inventory (targets/groups + detail), host_agent (fleet, host detail,
settings), hosts form, settings tabs (ansible/auth/notifications/plugins/
reports + plugin detail), dashboard (list, edit), and alerts (rule form,
maintenance + new). Dynamic labels (host/target/run/dashboard names) come
from the page context — no route changes. All 60 templates Jinja-compile.

Task #873.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-16 14:22:19 -04:00

71 lines
4.1 KiB
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>
{% set status_color = {"running": "var(--yellow)", "success": "var(--green)", "failed": "var(--red)", "interrupted": "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>
<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 == "running" %}
<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 %}