d5df1d75b8
- Добавить collapsible details/summary для findings - Добавить кнопку Copy с feedback 'Copied!' - Добавить toggle All (Expand/Collapse) - Добавить breadcrumbs на detail-страницах - Добавить spinner для scanning статуса на detail-страницах - Добавить empty state для findings - Добавить scripts block в base.html
98 lines
3.8 KiB
HTML
98 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ pkg_name }} v{{ pkg_version }} — GuardDog Nexus{% endblock %}
|
|
{% block breadcrumbs %}
|
|
<div class="breadcrumbs">
|
|
<a href="/">Home</a>
|
|
<span class="separator">/</span>
|
|
<a href="/packages">Packages</a>
|
|
<span class="separator">/</span>
|
|
<span>{{ pkg_name }} v{{ pkg_version }}</span>
|
|
</div>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<h1>{{ pkg_name }} <small>v{{ pkg_version }}</small></h1>
|
|
|
|
<h2>Scans ({{ scans|length }})</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th>ID</th><th>Repo</th><th>Status</th><th>Findings</th><th>Time</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for s in scans %}
|
|
<tr>
|
|
<td><a href="/scans/{{ s.id }}">#{{ s.id }}</a></td>
|
|
<td>{{ s.repository }}</td>
|
|
<td>
|
|
{% if s.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ s.status }}">{{ s.status }}</span>{% endif %}
|
|
</td>
|
|
<td>{% if s.flagged %}<span class="flagged">{{ s.total_findings }}</span>{% else %}<span class="clean">0</span>{% endif %}</td>
|
|
<td>{{ s.started_at.strftime('%Y-%m-%d %H:%M') if s.started_at }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
|
|
<h2>Findings ({{ findings|length }})</h2>
|
|
{% if findings|length > 1 %}
|
|
<button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if findings %}
|
|
<div id="findings-container">
|
|
{% for f in findings %}
|
|
<details class="finding-card {{ f.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.severity }}">[{{ f.severity }}]</strong>
|
|
<strong>{{ f.rule }}</strong>
|
|
{% if f.location %}<small> @ {{ f.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.message }}</p>
|
|
{% if f.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.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 %}
|