marker/guarddog-nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): блочный дизайн + LLM-отчёт с цветовой индикацией

Browse Source 
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:
Marker689
2026-05-10 05:24:43 +03:00
parent a754f91abf
commit 1343c3f415
7 changed files with 370 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
guarddog_nexus/web/templates/_llm_report_fragment.html
View File

@@ -1,9 +1,10 @@
<div class="llm-report">
<strong>LLM Analysis</strong>
<span class="verdict-{{ report.verdict }}">[{{ report.verdict }}]</span>
{% if report.severity_rating %}
<span class="severity-{{ report.severity_rating }}">({{ report.severity_rating }})</span>
{% endif %}
<p><em>{{ report.summary }}</em></p>
<p>{{ report.analysis }}</p>
<div class="llm-report llm-{{ report.verdict }}">
<div class="llm-header">
<span class="llm-badge llm-badge-{{ report.verdict }}">{{ report.verdict }}</span>
{% if report.severity_rating %}
<span class="llm-severity">{{ report.severity_rating }}</span>
{% endif %}
</div>
<p class="llm-summary">{{ report.summary }}</p>
<p class="llm-analysis">{{ report.analysis }}</p>
</div>

190
guarddog_nexus/web/templates/dashboard_stats.html
View File

@@ -1,150 +1,70 @@
<div class="stats-grid">
<article class="stat-card">
<h3>{{ total_scans }}</h3>
<small>Total Scans</small>
</article>
<article class="stat-card">
<h3 class="flagged">{{ flagged_scans }}</h3>
<small>⚠ Flagged</small>
</article>
<article class="stat-card">
<h3>{{ recent_flagged }}</h3>
<small>Flagged (7 days)</small>
</article>
<article class="stat-card">
<h3>{{ total_findings }}</h3>
<small>Total Findings</small>
</article>
<article class="stat-card">
<h3 class="severity-ERROR">{{ errors_count }}</h3>
<small>Errors</small>
</article>
<article class="stat-card">
<h3 class="severity-WARNING">{{ warnings_count }}</h3>
<small>Warnings</small>
</article>
<div class="stat-minibar">
<span><strong>{{ total_scans }}</strong> scans</span>
<span><strong class="flagged">{{ flagged_scans }}</strong> flagged</span>
<span><strong>{{ total_findings }}</strong> findings</span>
<span class="severity-ERROR"><strong>{{ errors_count }}</strong> errors</span>
<span class="severity-WARNING"><strong>{{ warnings_count }}</strong> warnings</span>
</div>
{% if total_findings > 0 %}
<div>
<small>Severity ratio</small>
<div class="severity-bar">
{% set err_pct = (errors_count / total_findings * 100) | int %}
{% set warn_pct = 100 - err_pct %}
<div class="bar-error" style="width: {{ err_pct }}%;" title="ERROR: {{ errors_count }}"></div>
<div class="bar-warning" style="width: {{ warn_pct }}%;" title="WARNING: {{ warnings_count }}"></div>
</div>
<div class="severity-bar-labels">
<span class="severity-ERROR">ERROR {{ errors_count }}</span>
<span class="severity-WARNING">WARNING {{ warnings_count }}</span>
</div>
</div>
{% else %}
<p class="empty-state">No findings yet — scan results will appear here once packages are processed.</p>
{% endif %}
{% if days %}
<div>
<small>Scan activity (14 days)</small>
<div class="heatmap">
{% set max_cnt = days | map(attribute=1) | max %}
{% for day, cnt, fl in days %}
<div class="heatmap-day" title="{{ day }}: {{ cnt }} scans, {{ fl }} flagged">
{% set h = (cnt / max_cnt * 38) | int if max_cnt > 0 else 0 %}
<div class="bar" style="height: {{ h }}px; background: {% if fl > 0 %}var(--pico-color-red-500){% else %}var(--pico-color-zinc-500){% endif %};"></div>
<div class="tooltip">{{ day }}: {{ cnt }} scans, {{ fl }} flagged</div>
<div class="dashboard-grid">
{% if days %}
<article class="dash-block">
<h3>Scan activity (14 days)</h3>
<div class="heatmap">
{% set max_cnt = days | map(attribute=1) | max %}
{% for day, cnt, fl in days %}
<div class="heatmap-day" title="{{ day }}: {{ cnt }} scans, {{ fl }} flagged">
{% set h = (cnt / max_cnt * 38) | int if max_cnt > 0 else 0 %}
<div class="bar" style="height: {{ h }}px; background: {% if fl > 0 %}var(--pico-color-red-500){% else %}var(--pico-color-zinc-500){% endif %};"></div>
<div class="tooltip">{{ day }}: {{ cnt }} scans, {{ fl }} flagged</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
</article>
{% endif %}
{% if most_flagged %}
<div>
<h3>⚠ Most Flagged Packages</h3>
<table>
{% if latest_flagged %}
<article class="dash-block dash-block-warn">
<h3>Latest Flagged</h3>
<table class="compact">
<thead><tr><th>Package</th><th>Version</th><th>Findings</th><th>Time</th></tr></thead>
<tbody>
{% for s in latest_flagged %}
<tr>
<td><a href="/scans/{{ s.id }}"><strong class="flagged">{{ s.package_name }}</strong></a></td>
<td>{{ s.package_version }}</td>
<td><span class="flagged">{{ s.total_findings }}</span></td>
<td>{{ s.started_at.strftime('%m-%d %H:%M') if s.started_at }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</article>
{% endif %}
</div>
<article class="dash-block" style="margin-top: 0;">
<h3>Latest Scans</h3>
<table class="compact">
<thead>
<tr><th>Package</th><th>Version</th><th>Findings</th></tr>
<tr><th>Package</th><th>Version</th><th>Repo</th><th>Status</th><th></th><th>Time</th></tr>
</thead>
<tbody>
{% for p in most_flagged %}
{% for s in latest_scans %}
<tr>
<td><a href="/packages/{{ p.package_name }}/{{ p.package_version }}"><strong>{{ p.package_name }}</strong></a></td>
<td>{{ p.package_version }}</td>
<td>
<span class="flagged">{{ p.total }}</span>
<progress value="{{ p.total }}" max="{{ max_findings }}" style="width: 80px; height: 6px; vertical-align: middle; margin-left: 6px;"></progress>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% if latest_flagged %}
<div>
<h3>🔴 Latest Flagged</h3>
<table>
<thead>
<tr><th>Package</th><th>Version</th><th>Findings</th><th>Time</th></tr>
</thead>
<tbody>
{% for s in latest_flagged %}
<tr>
<td><a href="/scans/{{ s.id }}"><strong class="flagged">{{ s.package_name }}</strong></a></td>
<td><a href="/packages/{{ s.package_name }}/{{ s.package_version }}">{{ s.package_name }}</a></td>
<td>{{ s.package_version }}</td>
<td><span class="flagged">{{ s.total_findings }}</span></td>
<td><small>{{ s.repository }}</small></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>{% elif s.status == 'completed' %}<span class="clean">✓</span>{% else %}<span>-</span>{% endif %}</td>
<td>{{ s.started_at.strftime('%m-%d %H:%M') if s.started_at }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<small><a href="/scans">View all scans →</a></small>
</article>
<h3>Latest Scans</h3>
<table>
<thead>
<tr>
<th>Package</th>
<th>Version</th>
<th>Repo</th>
<th>Status</th>
<th></th>
<th>Time</th>
</tr>
</thead>
<tbody>
{% for s in latest_scans %}
<tr>
<td><a href="/packages/{{ s.package_name }}/{{ s.package_version }}">{{ s.package_name }}</a></td>
<td>{{ s.package_version }}</td>
<td><small>{{ s.repository }}</small></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>{% elif s.status == 'completed' %}<span class="clean">✓</span>{% else %}<span>-</span>{% endif %}</td>
<td>{{ s.started_at.strftime('%m-%d %H:%M') if s.started_at }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<small><a href="/scans">View all scans →</a></small>
{% if top_rules %}
<div class="top-rules-chart">
<h3>Top Rules Triggered</h3>
{% for r in top_rules %}
<div class="rule-bar-row">
<span class="rule-name" title="{{ r.rule }}"><code>{{ r.rule }}</code></span>
<div class="rule-bar-container">
<div class="rule-bar" style="width: {{ (r.count / top_rules[0].count * 100) | int if top_rules[0].count > 0 else 0 }}%;"></div>
</div>
<span class="rule-count">{{ r.count }}</span>
</div>
{% endfor %}
</div>
{% endif %}
<small style="opacity: 0.5;">Last refresh: {{ now.strftime('%H:%M:%S') }} (auto every 30s)</small>
<small style="opacity: 0.4;">Last refresh: {{ now.strftime('%H:%M:%S') }} (auto every 30s)</small>

73
guarddog_nexus/web/templates/package_detail.html
View File

@@ -12,44 +12,40 @@
{% 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>
<article class="scan-info-block">
<h2>Scans ({{ scans|length }})</h2>
<table class="compact">
<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>
</article>
<div class="finding-header-row">
<h2>Findings ({{ findings|length }})</h2>
{% if findings|length > 1 %}
<button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
{% endif %}
</div>
<h2 style="margin-bottom: 0.75rem;">Findings ({{ findings|length }})</h2>
{% if findings %}
<div id="findings-container">
{% for f in 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">
@@ -59,12 +55,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 }}">
@@ -81,7 +80,7 @@
</div>
{% endif %}
</div>
</details>
</div>
{% endfor %}
</div>
{% else %}

61
guarddog_nexus/web/templates/scan_detail.html
View File

@@ -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 %}