databuild/databuild/web/templates/wants/detail.html

{% import "base.html" as base %}

{% call base::head("Want - DataBuild") %}
{% call base::nav("wants", base.graph_label) %}

<div class="detail-header" style="view-transition-name:want-header">
    <h1>Want: {{ want.want_id }}</h1>
    {% match want.status %}
    {% when Some with (s) %}<span class="status status-{{ s.name_lowercase }}">{{ s.name }}</span>
    {% when None %}
    {% endmatch %}
</div>

<div class="detail-section">
    <h2>Details</h2>
    <div class="detail-grid">
        <div class="detail-item">
            <label>Data Timestamp</label>
            <span>{{ want.data_timestamp }}</span>
        </div>
        <div class="detail-item">
            <label>TTL (seconds)</label>
            <span>{{ want.ttl_seconds }}</span>
        </div>
        <div class="detail-item">
            <label>SLA (seconds)</label>
            <span>{{ want.sla_seconds }}</span>
        </div>
        <div class="detail-item">
            <label>Last Updated</label>
            <span>{{ want.last_updated_timestamp }}</span>
        </div>
    </div>
</div>

{% match want.comment %}
{% when Some with (c) %}
<div class="detail-section">
    <h2>Comment</h2>
    <p>{{ c }}</p>
</div>
{% when None %}
{% endmatch %}

<div class="detail-section">
    <h2>Requested Partitions ({{ want.partitions.len() }})</h2>
    <ul class="partition-list">
        {% for p in want.partitions %}
        <li><a href="/partitions/{{ p.partition_ref_encoded }}" class="partition-ref">{{ p.partition_ref }}</a></li>
        {% endfor %}
        {% if want.partitions.is_empty() %}
        <li style="color:var(--color-text-muted)">No partitions</li>
        {% endif %}
    </ul>
</div>

{% if !want.lineage_mermaid.is_empty() %}
<div class="detail-section">
    <h2>Lineage Graph</h2>
    <div class="mermaid-container" style="background: var(--color-bg-secondary); border-radius: 8px; padding: 16px; overflow-x: auto; display: flex; justify-content: center;">
        <pre class="mermaid" style="margin: 0;">
{{ want.lineage_mermaid }}
        </pre>
    </div>
</div>
{% endif %}

{% if !want.upstreams.is_empty() %}
<div class="detail-section">
    <h2>Upstream Dependencies ({{ want.upstreams.len() }})</h2>
    <ul class="partition-list">
        {% for p in want.upstreams %}
        <li><a href="/partitions/{{ p.partition_ref_encoded }}" class="partition-ref">{{ p.partition_ref }}</a></li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{% if !want.job_runs.is_empty() %}
<div class="detail-section">
    <h2>Fulfillment - Job Runs ({{ want.job_runs.len() }})</h2>
    <table class="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Job Label</th>
                <th>Started</th>
                <th>Duration</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for jr in want.job_runs %}
            <tr>
                <td><a href="/job_runs/{{ jr.id }}">{{ jr.id }}</a></td>
                <td>{{ jr.job_label }}</td>
                <td>{% match jr.started_at %}{% when Some with (ts) %}{{ ts }}{% when None %}-{% endmatch %}</td>
                <td>{% match jr.started_at %}{% when Some with (started) %}{% match jr.queued_at %}{% when Some with (queued) %}{{ started - queued }}ms{% when None %}-{% endmatch %}{% when None %}-{% endmatch %}</td>
                <td>{% match jr.status %}{% when Some with (s) %}<span class="status status-{{ s.name_lowercase }}">{{ s.name }}</span>{% when None %}-{% endmatch %}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if !want.derivative_wants.is_empty() %}
<div class="detail-section">
    <h2>Fulfillment - Derivative Wants ({{ want.derivative_wants.len() }})</h2>
    <table class="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Partitions</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for dw in want.derivative_wants %}
            <tr>
                <td><a href="/wants/{{ dw.want_id }}">{{ dw.want_id }}</a></td>
                <td>{% for p in dw.partitions %}{{ p.partition_ref }}{% if !loop.last %}, {% endif %}{% endfor %}</td>
                <td>{% match dw.status %}{% when Some with (s) %}<span class="status status-{{ s.name|lower }}">{{ s.name }}</span>{% when None %}-{% endmatch %}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if !want.lineage_mermaid.is_empty() %}
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({
        startOnLoad: true,
        theme: 'neutral',
        flowchart: {
            useMaxWidth: true,
            htmlLabels: true,
            curve: 'basis'
        },
        securityLevel: 'loose'
    });
</script>
{% endif %}

{% call base::footer() %}