refactor(ui): блочный дизайн + LLM-отчёт с цветовой индикацией
dashboard:
- Убран: severity ratio bar, Top Rules Triggered, Most Flagged Packages
- Заменены 6 stat-карточек на компактную stat-minibar
- 2-колоночная сетка: heatmap + Latest Flagged (с красной рамкой)
- Таблицы сжаты (.compact)
findings (scan/package detail):
- Findings всегда раскрыты как блоки (.finding-block)
- Убран accordion (details/summary) и toggle-all кнопка
- Код в тёмном блоке, кнопка Copy сверху
LLM-отчёт:
- Цветовая индикация по вердикту:
- safe → зелёный badge, зелёная рамка, лёгкий зелёный фон
- suspicious → жёлтый badge, жёлтая рамка, лёгкий жёлтый фон
- malicious → красный badge, красная рамка, лёгкий красный фон
- Бейдж с вердиктом + severity rating в хедере
- Summary курсивом, analysis с pre-line для абзацев
Скан-инфо:
- scan-info-block с grid-раскладкой (8 полей)
- SHA256 компактным шрифтом
- Блок ошибки скана отдельно выделен
CSS:
- Удалены: .stats-grid, .stat-card, .severity-bar*, .top-rules-chart*,
.finding-card*, .finding-details, .finding-header-row, .finding-summary-hint
- Добавлены: .stat-minibar, .dashboard-grid, .dash-block, .scan-info-*,
.finding-block, .llm-{safe,suspicious,malicious}, .llm-badge-*,
table.compact
- app.js: удалён toggleFindings()
This commit is contained in:
@@ -12,38 +12,34 @@
|
||||
{% 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>
|
||||
<article class="scan-info-block">
|
||||
<div class="scan-info-grid">
|
||||
<div><strong>Package</strong><br><a href="/packages/{{ scan.package_name }}/{{ scan.package_version }}">{{ scan.package_name }}</a></div>
|
||||
<div><strong>Version</strong><br>{{ scan.package_version }}</div>
|
||||
<div><strong>Ecosystem</strong><br>{{ scan.ecosystem }}</div>
|
||||
<div><strong>Repository</strong><br>{{ scan.repository }}</div>
|
||||
<div><strong>Status</strong><br>
|
||||
{% if scan.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ scan.status }}">{{ scan.status }}</span>{% endif %}
|
||||
</div>
|
||||
<div><strong>SHA256</strong><br><code class="sha256">{{ scan.sha256 or '-' }}</code></div>
|
||||
<div><strong>Started</strong><br>{{ scan.started_at.strftime('%Y-%m-%d %H:%M') if scan.started_at }}</div>
|
||||
<div><strong>Finished</strong><br>{{ scan.finished_at.strftime('%Y-%m-%d %H:%M') if scan.finished_at }}</div>
|
||||
</div>
|
||||
{% if scan.error_message %}<div class="scan-error"><strong>Error:</strong> {{ scan.error_message }}</div>{% endif %}
|
||||
</article>
|
||||
|
||||
<div class="finding-header-row">
|
||||
<h2>Findings ({{ scan.findings|length }})</h2>
|
||||
{% if scan.findings|length > 1 %}
|
||||
<button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h2 style="margin-bottom: 0.75rem;">Findings ({{ scan.findings|length }})</h2>
|
||||
|
||||
{% 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 class="finding-summary">
|
||||
<div class="finding-block finding-{{ f.data.severity|lower }}">
|
||||
<div class="finding-summary">
|
||||
<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 class="finding-summary-hint">click to expand</span>
|
||||
</summary>
|
||||
<div class="finding-details">
|
||||
</div>
|
||||
<div class="finding-body">
|
||||
<p>{{ f.data.message }}</p>
|
||||
{% if f.data.code %}
|
||||
<div class="code-toolbar">
|
||||
@@ -53,12 +49,15 @@
|
||||
{% endif %}
|
||||
|
||||
{% if f.report %}
|
||||
<div class="llm-report">
|
||||
<strong>LLM Analysis</strong>
|
||||
<span class="verdict-{{ f.report.verdict }}">[{{ f.report.verdict }}]</span>
|
||||
<span class="severity-{{ f.report.severity_rating }}">({{ f.report.severity_rating }})</span>
|
||||
<p><em>{{ f.report.summary }}</em></p>
|
||||
<p>{{ f.report.analysis }}</p>
|
||||
<div class="llm-report llm-{{ f.report.verdict }}">
|
||||
<div class="llm-header">
|
||||
<span class="llm-badge llm-badge-{{ f.report.verdict }}">{{ f.report.verdict }}</span>
|
||||
{% if f.report.severity_rating %}
|
||||
<span class="llm-severity">{{ f.report.severity_rating }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="llm-summary">{{ f.report.summary }}</p>
|
||||
<p class="llm-analysis">{{ f.report.analysis }}</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="llm-actions" id="llm-{{ f.id }}">
|
||||
@@ -75,7 +74,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
Reference in New Issue
Block a user