css-test/data/templates/job_detail.html

{% extends "base.html" %}

{% macro render_nested(value) %}
    {% if value is mapping %}
        {% for k, v in value.items() %}
            <div class="nested-item">
                <span class="nested-key">{{ k }}:</span>
                <span class="nested-value">{{ render_nested(v) }}</span>
            </div>
        {% endfor %}
    {% elif value is iterable and not value is string %}
        {% for item in value %}{{ render_nested(item) }}{% endfor %}
    {% else %}
        {{ value }}
    {% endif %}
{% endmacro %}

{% block content %}
<div class="dashboard-container dashboard-stack">

    <div class="detail-header">
        <div class="detail-crumbs">
            <a href="/">Dashboard</a> ›
            <a href="/results">Results</a> ›
            <span class="muted">Job #{{ job.id }}</span>
        </div>
        <h1>
            {{ job.name }}
            <span class="badge badge-status-{{ job.status }}">{{ job.status }}</span>
        </h1>
        <div class="detail-subtitle muted">
            As-at {{ job.as_at_date.isoformat() }}
            · config <code>{{ job.recon_config_reference }}</code>
            · ran by {{ job.username }}
        </div>
    </div>

    {# ── Execution history timeline ─────────────────────── #}
    <section class="timeline-day history-timeline">
        <header class="timeline-header">
            <h2>Execution history</h2>
            <div class="timeline-legend">
                <span class="legend-item"><span class="swatch swatch-completed"></span>Completed</span>
                <span class="legend-item"><span class="swatch swatch-failed"></span>Failed</span>
                <span class="legend-item"><span class="swatch swatch-running"></span>Running</span>
                <span class="legend-item"><span class="swatch swatch-scheduled"></span>Scheduled</span>
            </div>
        </header>

        {% if history.entries | length == 0 %}
            <p class="empty-note muted">No executions on record.</p>
        {% else %}
            <div class="timeline-axis">
                {% for t in history.ticks %}
                <span class="tick" style="left: {{ t.left }}%">
                    <span class="tick-label">{{ t.label }}</span>
                </span>
                {% endfor %}
            </div>
            <div class="history-track">
                {% for t in history.ticks %}
                <span class="gridline" style="left: {{ t.left }}%"></span>
                {% endfor %}
                {% for e in history.entries %}
                <a class="history-dot history-dot-{{ e.kind }}{% if e.id == job.id %} is-current{% endif %}"
                   href="/jobs/{{ e.id }}"
                   style="left: {{ e.left }}%"
                   data-tip="{{ e.name }} · {{ e.as_at }}{% if e.when %} · {{ e.when }}{% endif %} · {{ e.status }}">
                </a>
                {% endfor %}
            </div>
            <div class="history-footnote muted">
                {{ history.entries | length }} executions
                from {{ history.first_date.isoformat() }} to {{ history.last_date.isoformat() }}
                ({{ history.days }} days)
            </div>
        {% endif %}
    </section>

    {# ── Attribute / result cards ───────────────────────── #}
    <div class="metrics-grid">

        <section class="metric-card">
            <h3>Identification</h3>
            <ul class="kv-list">
                <li><span>Job ID</span><span class="num">#{{ job.id }}</span></li>
                <li><span>Name</span><span>{{ job.name }}</span></li>
                <li><span>Config ref</span><span><code>{{ job.recon_config_reference }}</code></span></li>
                <li><span>Username</span><span>{{ job.username }}</span></li>
                <li><span>As-at date</span><span>{{ job.as_at_date.isoformat() }}</span></li>
            </ul>
        </section>

        <section class="metric-card">
            <h3>Schedule &amp; Timing</h3>
            <ul class="kv-list">
                <li><span>Due</span><span>{{ job.due_datetime.isoformat(timespec='minutes') if job.due_datetime else '—' }}</span></li>
                <li><span>Started</span><span>{{ job.start_datetime.isoformat(timespec='minutes') if job.start_datetime else '—' }}</span></li>
                <li><span>Finished</span><span>{{ job.finish_datetime.isoformat(timespec='minutes') if job.finish_datetime else '—' }}</span></li>
                <li><span>Duration</span><span class="num">{{ duration_str or '—' }}</span></li>
                <li><span>Lateness</span><span>{{ lateness_str or '—' }}</span></li>
            </ul>
        </section>

        <section class="metric-card">
            <h3>Status</h3>
            <div class="big-stat">
                <span class="big-stat-value badge badge-status-{{ job.status }}">{{ job.status }}</span>
            </div>
            {% if job.status_reason %}
            <p class="empty-note muted">Reason: {{ job.status_reason }}</p>
            {% endif %}
        </section>

        <section class="metric-card">
            <h3>Config</h3>
            {% if config %}
            <ul class="kv-list">
                <li><span>Name</span><span>{{ config.name }}</span></li>
                <li><span>Reference</span><span><code>{{ config.reference }}</code></span></li>
                <li><span>Status</span><span>{{ config.status }}</span></li>
                <li><span>Frequency</span><span>{{ config.frequency }}</span></li>
                <li><span>Business process</span><span>{{ config.business_process }}</span></li>
            </ul>
            {% else %}
            <p class="empty-note muted">Config <code>{{ job.recon_config_reference }}</code> not found.</p>
            {% endif %}
        </section>

        <section class="metric-card">
            <h3>History — this recon</h3>
            <ul class="kv-list">
                <li><span>Total executions</span><span class="num">{{ stats.total }}</span></li>
                <li><span>Completed</span><span class="num good">{{ stats.completed }}</span></li>
                <li><span>Failed</span><span class="num bad">{{ stats.failed }}</span></li>
                <li><span>Success rate</span>
                    <span class="num">
                    {% if stats.success_rate is not none %}{{ '%.0f' % stats.success_rate }}%{% else %}—{% endif %}
                    </span>
                </li>
                <li><span>Avg duration</span><span class="num">{{ stats.avg_duration or '—' }}</span></li>
            </ul>
        </section>

        {% if job.results %}
        <section class="metric-card metric-card-wide">
            <h3>Results</h3>
            <table class="metric-table results-table">
                <tbody>
                    {% for k, v in job.results.items() %}
                    <tr>
                        <th>{{ k }}</th>
                        <td>
                        {% if k == 'Status' %}
                            <span class="badge badge-{{ v | lower }}">{{ v }}</span>
                        {% elif k == 'Flag' %}
                            <span class="badge badge-{{ 'none' if v == 'None' else 'flag' }}">{{ v }}</span>
                        {% else %}
                            {{ render_nested(v) }}
                        {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>
        {% else %}
        <section class="metric-card">
            <h3>Results</h3>
            <p class="empty-note muted">
                {% if job.status in ('created', 'running') %}
                    This job has not produced results yet.
                {% else %}
                    No results recorded for this run.
                {% endif %}
            </p>
        </section>
        {% endif %}

    </div>
</div>
{% endblock %}