guarddog-nexus/guarddog_nexus/web/templates/scan_detail.html

{% extends "base.html" %}
{% block title %}Scan #{{ scan.id }} — GuardDog Nexus{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="/">Home</a>
    <span class="separator">/</span>
    <a href="/scans">Scans</a>
    <span class="separator">/</span>
    <span>Scan #{{ scan.id }}</span>
</div>
{% endblock %}
{% block content %}
<h1>Scan #{{ scan.id }}</h1>

<table>
    <tr><td><strong>Package</strong></td><td><a href="/packages/{{ scan.package_name }}/{{ scan.package_version }}">{{ scan.package_name }}</a></td></tr>
    <tr><td><strong>Version</strong></td><td>{{ scan.package_version }}</td></tr>
    <tr><td><strong>Ecosystem</strong></td><td>{{ scan.ecosystem }}</td></tr>
    <tr><td><strong>Repository</strong></td><td>{{ scan.repository }}</td></tr>
    <tr><td><strong>Status</strong></td><td>
        {% if scan.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ scan.status }}">{{ scan.status }}</span>{% endif %}
    </td></tr>
    <tr><td><strong>SHA256</strong></td><td><code>{{ scan.sha256 or '-' }}</code></td></tr>
    <tr><td><strong>Started</strong></td><td>{{ scan.started_at.isoformat() if scan.started_at }}</td></tr>
    <tr><td><strong>Finished</strong></td><td>{{ scan.finished_at.isoformat() if scan.finished_at }}</td></tr>
    {% if scan.error_message %}<tr><td><strong>Error</strong></td><td><span class="flagged">{{ scan.error_message }}</span></td></tr>{% endif %}
</table>

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
    <h2>Findings ({{ scan.findings|length }})</h2>
    {% if scan.findings|length > 1 %}
    <button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
    {% endif %}
</div>

{% if scan.findings %}
    <div id="findings-container">
    {% for f in scan.findings %}
    <details class="finding-card {{ f.data.severity }}" data-finding-id="{{ f.id }}">
        <summary style="cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
            <strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
            <strong>{{ f.data.rule }}</strong>
            {% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
            <span style="margin-left: auto; font-size: 0.8rem; opacity: 0.5;">click to expand</span>
        </summary>
        <div class="finding-details">
            <p>{{ f.data.message }}</p>
            {% if f.data.code %}
            <div style="display: flex; justify-content: flex-end; margin-bottom: 0.25rem;">
                <button class="copy-btn" onclick="copyCode(this, 'code-{{ f.id }}')">Copy</button>
            </div>
            <pre><code id="code-{{ f.id }}">{{ f.data.code }}</code></pre>
            {% endif %}
        </div>
    </details>
    {% endfor %}
    </div>
{% else %}
    <div class="empty-state" style="padding: 1rem;">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <h3>No findings</h3>
        <small>Package looks clean.</small>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
function toggleFindings() {
    const container = document.getElementById('findings-container');
    const details = container.querySelectorAll('details');
    const first = details[0];
    const isOpen = first && first.open;
    details.forEach(d => d.open = !isOpen);
    const btn = container.parentElement.querySelector('.toggle-all-btn');
    if (btn) btn.textContent = isOpen ? 'Expand All' : 'Collapse All';
}

function copyCode(btn, codeId) {
    const code = document.getElementById(codeId).textContent;
    navigator.clipboard.writeText(code).then(() => {
        btn.textContent = 'Copied!';
        btn.classList.add('copied');
        setTimeout(() => {
            btn.textContent = 'Copy';
            btn.classList.remove('copied');
        }, 2000);
    });
}
</script>
{% endblock %}