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:
Marker689
@@ -1,16 +1,5 @@
|
|||||||
// GuardDog Nexus — shared UI utilities
|
// GuardDog Nexus — shared UI utilities
|
||||||
|
|
||||||
function toggleFindings() {
|
|
||||||
var container = document.getElementById('findings-container');
|
|
||||||
if (!container) return;
|
|
||||||
var details = container.querySelectorAll('details');
|
|
||||||
if (details.length === 0) return;
|
|
||||||
var isOpen = details[0].open;
|
|
||||||
details.forEach(function (d) { d.open = !isOpen; });
|
|
||||||
var btn = document.querySelector('.toggle-all-btn');
|
|
||||||
if (btn) btn.textContent = isOpen ? 'Expand All' : 'Collapse All';
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyCode(btn, codeId) {
|
function copyCode(btn, codeId) {
|
||||||
var el = document.getElementById(codeId);
|
var el = document.getElementById(codeId);
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
|||||||
@@ -1,130 +1,71 @@
|
|||||||
/* GuardDog Nexus — Web UI styles */
|
/* GuardDog Nexus — Web UI styles */
|
||||||
|
|
||||||
/* Status badges */
|
/* ------------------------------------------------------------------ */
|
||||||
.flagged {
|
/* Status / severity colours */
|
||||||
color: var(--pico-color-red-400);
|
/* ------------------------------------------------------------------ */
|
||||||
font-weight: bold;
|
.flagged { color: var(--pico-color-red-400); font-weight: bold; }
|
||||||
}
|
.clean { color: var(--pico-color-green-400); }
|
||||||
|
|
||||||
.clean {
|
.status-pending { color: var(--pico-color-yellow-400); }
|
||||||
color: var(--pico-color-green-400);
|
.status-scanning { color: var(--pico-color-blue-400); animation: pulse 1.5s ease-in-out infinite; }
|
||||||
}
|
.status-completed { color: var(--pico-color-green-400); }
|
||||||
|
.status-failed { color: var(--pico-color-red-400); }
|
||||||
|
|
||||||
.status-pending {
|
.severity-WARNING { color: var(--pico-color-yellow-400); }
|
||||||
color: var(--pico-color-yellow-400);
|
.severity-ERROR { color: var(--pico-color-red-400); }
|
||||||
}
|
|
||||||
|
|
||||||
.status-scanning {
|
/* ------------------------------------------------------------------ */
|
||||||
color: var(--pico-color-blue-400);
|
/* Dashboard mini-bar */
|
||||||
animation: pulse 1.5s ease-in-out infinite;
|
/* ------------------------------------------------------------------ */
|
||||||
}
|
.stat-minibar {
|
||||||
|
display: flex;
|
||||||
.status-completed {
|
gap: 1.5rem;
|
||||||
color: var(--pico-color-green-400);
|
padding: 0.6rem 0;
|
||||||
}
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--pico-color-gray-500);
|
||||||
.status-failed {
|
font-size: 0.9rem;
|
||||||
color: var(--pico-color-red-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Severity colors */
|
|
||||||
.severity-WARNING {
|
|
||||||
color: var(--pico-color-yellow-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.severity-ERROR {
|
|
||||||
color: var(--pico-color-red-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Finding cards */
|
|
||||||
.finding-card {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-left: 3px solid;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.finding-card:hover {
|
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.finding-card.WARNING {
|
/* Dashboard block grid (2 cols → 1 on mobile) */
|
||||||
border-left-color: var(--pico-color-yellow-400);
|
.dashboard-grid {
|
||||||
}
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
.finding-card.ERROR {
|
gap: 1rem;
|
||||||
border-left-color: var(--pico-color-red-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.finding-card.INFO {
|
|
||||||
border-left-color: var(--pico-color-blue-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tables */
|
|
||||||
table {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Nav */
|
|
||||||
nav {
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Stats grid */
|
.dash-block {
|
||||||
.stats-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card:hover {
|
.dash-block h3 {
|
||||||
transform: translateY(-2px);
|
margin-top: 0;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
font-size: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Severity ratio bar */
|
.dash-block-warn {
|
||||||
.severity-bar {
|
border-left: 3px solid var(--pico-color-red-400);
|
||||||
display: flex;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.severity-bar .bar-error {
|
/* ------------------------------------------------------------------ */
|
||||||
background: var(--pico-color-red-400);
|
/* Tables */
|
||||||
transition: width 0.5s ease;
|
/* ------------------------------------------------------------------ */
|
||||||
}
|
table { font-size: 0.9rem; }
|
||||||
|
table.compact { font-size: 0.82rem; }
|
||||||
|
table.compact th,
|
||||||
|
table.compact td { padding: 0.35rem 0.5rem; }
|
||||||
|
|
||||||
.severity-bar .bar-warning {
|
/* ------------------------------------------------------------------ */
|
||||||
background: var(--pico-color-yellow-400);
|
/* Heatmap */
|
||||||
transition: width 0.5s ease;
|
/* ------------------------------------------------------------------ */
|
||||||
}
|
|
||||||
|
|
||||||
.severity-bar-labels {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
margin-top: 2px;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scan activity heatmap */
|
|
||||||
.heatmap {
|
.heatmap {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin-top: 4px;
|
margin: 0.4rem 0 0 0;
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.heatmap-day {
|
.heatmap-day {
|
||||||
@@ -139,12 +80,9 @@ nav {
|
|||||||
border-radius: 2px 2px 0 0;
|
border-radius: 2px 2px 0 0;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
transition: height 0.3s ease, opacity 0.2s;
|
transition: height 0.3s ease, opacity 0.2s;
|
||||||
cursor: default;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.heatmap-day:hover .bar {
|
.heatmap-day:hover .bar { opacity: 1; }
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heatmap-day .tooltip {
|
.heatmap-day .tooltip {
|
||||||
display: none;
|
display: none;
|
||||||
@@ -162,138 +100,152 @@ nav {
|
|||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heatmap-day:hover .tooltip {
|
.heatmap-day:hover .tooltip { display: block; }
|
||||||
display: block;
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Scan info block (detail page) */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
.scan-info-block {
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Top rules bar chart */
|
.scan-info-grid {
|
||||||
.top-rules-chart {
|
display: grid;
|
||||||
margin-bottom: 2rem;
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||||
|
gap: 0.6rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-rules-chart .rule-bar-row {
|
.sha256 {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scan-error {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
background: rgba(var(--pico-color-red-400), 0.1);
|
||||||
|
border-left: 3px solid var(--pico-color-red-400);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Finding blocks (replaces accordion details/summary) */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
.finding-block {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
border: 1px solid var(--pico-color-gray-600);
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finding-summary {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-rules-chart .rule-name {
|
|
||||||
flex: 0 0 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 0.75rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-rules-chart .rule-bar-container {
|
|
||||||
flex: 1;
|
|
||||||
background: var(--pico-color-gray-500);
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-rules-chart .rule-bar {
|
|
||||||
height: 100%;
|
|
||||||
background: var(--pico-color-blue-400);
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: width 0.5s ease;
|
|
||||||
min-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-rules-chart .rule-count {
|
|
||||||
flex: 0 0 50px;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sticky nav */
|
|
||||||
nav.sticky {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 100;
|
|
||||||
background: var(--pico-color-dark);
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
border-bottom: 1px solid var(--pico-color-gray-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Breadcrumbs */
|
|
||||||
.breadcrumbs {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumbs a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumbs .separator {
|
|
||||||
margin: 0 0.5rem;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Empty states */
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
opacity: 0.5;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Filter bar */
|
|
||||||
.filter-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
margin-bottom: 1rem;
|
padding: 0.5rem 0.75rem;
|
||||||
align-items: center;
|
background: var(--pico-color-gray-650);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
border-bottom: 1px solid var(--pico-color-gray-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-bar input[type="text"],
|
.finding-body {
|
||||||
.filter-bar select {
|
padding: 0.75rem;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-bar .filter-btn {
|
.finding-body p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sortable columns */
|
.finding-body pre {
|
||||||
th.sortable {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
th.sortable:hover {
|
|
||||||
background: var(--pico-color-gray-600);
|
|
||||||
}
|
|
||||||
|
|
||||||
th.sortable .sort-icon {
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
th.sortable.active .sort-icon {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Collapsible findings */
|
|
||||||
.finding-details {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.finding-details pre {
|
|
||||||
background: var(--pico-color-gray-700);
|
background: var(--pico-color-gray-700);
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finding-header-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finding-header-row h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* LLM report — verdict-based colour scheme */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
.llm-report {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
border-left: 4px solid var(--pico-color-gray-500);
|
||||||
|
background: var(--pico-color-gray-750);
|
||||||
|
}
|
||||||
|
|
||||||
|
.llm-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.llm-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.1rem 0.5rem;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.llm-badge-safe { background: #1a5c2a; color: #4ade80; }
|
||||||
|
.llm-badge-suspicious { background: #5c4a1a; color: #facc15; }
|
||||||
|
.llm-badge-malicious { background: #5c1a1a; color: #f87171; }
|
||||||
|
|
||||||
|
.llm-safe { border-left-color: var(--pico-color-green-400); background: rgba(74,222,128,0.06); }
|
||||||
|
.llm-suspicious { border-left-color: var(--pico-color-yellow-400); background: rgba(250,204,21,0.06); }
|
||||||
|
.llm-malicious { border-left-color: var(--pico-color-red-400); background: rgba(248,113,113,0.08); }
|
||||||
|
|
||||||
|
.llm-severity {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.llm-summary {
|
||||||
|
font-style: italic;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
color: var(--pico-color-zinc-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.llm-analysis {
|
||||||
|
margin-bottom: 0;
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
.llm-actions { margin-top: 0.5rem; }
|
||||||
|
.llm-actions button { font-size: 0.8rem; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Shared controls */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
.code-toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Copy button */
|
|
||||||
.copy-btn {
|
.copy-btn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: none;
|
background: none;
|
||||||
@@ -305,16 +257,57 @@ th.sortable.active .sort-icon {
|
|||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-btn:hover {
|
.copy-btn:hover { background: var(--pico-color-gray-600); }
|
||||||
background: var(--pico-color-gray-600);
|
.copy-btn.copied { color: var(--pico-color-green-400); border-color: var(--pico-color-green-400); }
|
||||||
|
|
||||||
|
.toggle-all-btn {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
border: 1px solid var(--pico-color-gray-500);
|
||||||
|
padding: 0.2rem 0.6rem;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: var(--pico-color-gray-300);
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-btn.copied {
|
.toggle-all-btn:hover { background: var(--pico-color-gray-600); }
|
||||||
color: var(--pico-color-green-400);
|
|
||||||
border-color: var(--pico-color-green-400);
|
.htmx-indicator { display: inline; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Nav / breadcrumbs / empty state */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
nav { margin-bottom: 1rem; }
|
||||||
|
nav.sticky { position: sticky; top: 0; z-index: 100; background: var(--pico-color-dark); padding: 0.5rem 0; border-bottom: 1px solid var(--pico-color-gray-500); }
|
||||||
|
|
||||||
|
.breadcrumbs { margin-bottom: 1rem; font-size: 0.85rem; opacity: 0.7; }
|
||||||
|
.breadcrumbs a { text-decoration: none; }
|
||||||
|
.breadcrumbs .separator { margin: 0 0.5rem; opacity: 0.5; }
|
||||||
|
|
||||||
|
.empty-state { text-align: center; padding: 2rem 1rem; opacity: 0.5; font-style: italic; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Filter bar / sortable cols */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Spinner for scanning status */
|
.filter-bar input[type="text"],
|
||||||
|
.filter-bar select { margin-bottom: 0; }
|
||||||
|
|
||||||
|
th.sortable { cursor: pointer; user-select: none; }
|
||||||
|
th.sortable:hover { background: var(--pico-color-gray-600); }
|
||||||
|
th.sortable .sort-icon { margin-left: 0.25rem; opacity: 0.3; }
|
||||||
|
th.sortable.active .sort-icon { opacity: 1; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Spinner / animations */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
.spinner {
|
.spinner {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
@@ -327,156 +320,33 @@ th.sortable.active .sort-icon {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
to {
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
/* ------------------------------------------------------------------ */
|
||||||
0%, 100% {
|
/* Responsive */
|
||||||
opacity: 1;
|
/* ------------------------------------------------------------------ */
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Finding header row */
|
|
||||||
.finding-header-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Finding summary */
|
|
||||||
.finding-summary {
|
|
||||||
cursor: pointer;
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.25rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Finding summary hint */
|
|
||||||
.finding-summary-hint {
|
|
||||||
margin-left: auto;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Code block toolbar */
|
|
||||||
.code-toolbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* LLM report */
|
|
||||||
.llm-report {
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
padding: 0.6rem 0.8rem;
|
|
||||||
background: var(--pico-color-gray-700);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
border-left: 3px solid var(--pico-color-blue-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.llm-report strong {
|
|
||||||
color: var(--pico-color-blue-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.verdict-safe {
|
|
||||||
color: var(--pico-color-green-400);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verdict-suspicious {
|
|
||||||
color: var(--pico-color-yellow-400);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verdict-malicious {
|
|
||||||
color: var(--pico-color-red-400);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.llm-actions {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.llm-actions button {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* htmx indicator */
|
|
||||||
.htmx-indicator {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
.toggle-all-btn {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
background: none;
|
|
||||||
border: 1px solid var(--pico-color-gray-500);
|
|
||||||
padding: 0.2rem 0.6rem;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: var(--pico-color-gray-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-all-btn:hover {
|
|
||||||
background: var(--pico-color-gray-600);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.stats-grid {
|
.dashboard-grid { grid-template-columns: 1fr; }
|
||||||
grid-template-columns: repeat(2, 1fr);
|
.scan-info-grid { grid-template-columns: 1fr 1fr; }
|
||||||
}
|
.stat-minibar { flex-wrap: wrap; gap: 0.75rem; }
|
||||||
|
.filter-bar { flex-direction: column; align-items: stretch; }
|
||||||
.filter-bar {
|
nav ul { flex-wrap: wrap; }
|
||||||
flex-direction: column;
|
table, table.compact { font-size: 0.78rem; }
|
||||||
align-items: stretch;
|
th, td { padding: 0.3rem 0.4rem; }
|
||||||
}
|
|
||||||
|
|
||||||
.top-rules-chart .rule-name {
|
|
||||||
flex: 0 0 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: 0.35rem 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.stats-grid {
|
.scan-info-grid { grid-template-columns: 1fr; }
|
||||||
grid-template-columns: 1fr;
|
.stat-minibar { font-size: 0.8rem; }
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
padding: 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Print styles */
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Print */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
@media print {
|
@media print {
|
||||||
nav, .filter-bar, .copy-btn, .toggle-all-btn, nav.sticky {
|
nav, .filter-bar, .copy-btn, .toggle-all-btn, nav.sticky,
|
||||||
display: none !important;
|
.llm-actions, .breadcrumbs { display: none !important; }
|
||||||
}
|
body { background: white; color: black; }
|
||||||
|
.llm-report { border: 1px solid #ccc; background: none; }
|
||||||
body {
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
<div class="llm-report">
|
<div class="llm-report llm-{{ report.verdict }}">
|
||||||
<strong>LLM Analysis</strong>
|
<div class="llm-header">
|
||||||
<span class="verdict-{{ report.verdict }}">[{{ report.verdict }}]</span>
|
<span class="llm-badge llm-badge-{{ report.verdict }}">{{ report.verdict }}</span>
|
||||||
{% if report.severity_rating %}
|
{% if report.severity_rating %}
|
||||||
<span class="severity-{{ report.severity_rating }}">({{ report.severity_rating }})</span>
|
<span class="llm-severity">{{ report.severity_rating }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<p><em>{{ report.summary }}</em></p>
|
</div>
|
||||||
<p>{{ report.analysis }}</p>
|
<p class="llm-summary">{{ report.summary }}</p>
|
||||||
|
<p class="llm-analysis">{{ report.analysis }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,150 +1,70 @@
|
|||||||
<div class="stats-grid">
|
<div class="stat-minibar">
|
||||||
<article class="stat-card">
|
<span><strong>{{ total_scans }}</strong> scans</span>
|
||||||
<h3>{{ total_scans }}</h3>
|
<span><strong class="flagged">{{ flagged_scans }}</strong> flagged</span>
|
||||||
<small>Total Scans</small>
|
<span><strong>{{ total_findings }}</strong> findings</span>
|
||||||
</article>
|
<span class="severity-ERROR"><strong>{{ errors_count }}</strong> errors</span>
|
||||||
<article class="stat-card">
|
<span class="severity-WARNING"><strong>{{ warnings_count }}</strong> warnings</span>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
{% if total_findings > 0 %}
|
<div class="dashboard-grid">
|
||||||
<div>
|
{% if days %}
|
||||||
<small>Severity ratio</small>
|
<article class="dash-block">
|
||||||
<div class="severity-bar">
|
<h3>Scan activity (14 days)</h3>
|
||||||
{% set err_pct = (errors_count / total_findings * 100) | int %}
|
<div class="heatmap">
|
||||||
{% set warn_pct = 100 - err_pct %}
|
{% set max_cnt = days | map(attribute=1) | max %}
|
||||||
<div class="bar-error" style="width: {{ err_pct }}%;" title="ERROR: {{ errors_count }}"></div>
|
{% for day, cnt, fl in days %}
|
||||||
<div class="bar-warning" style="width: {{ warn_pct }}%;" title="WARNING: {{ warnings_count }}"></div>
|
<div class="heatmap-day" title="{{ day }}: {{ cnt }} scans, {{ fl }} flagged">
|
||||||
</div>
|
{% set h = (cnt / max_cnt * 38) | int if max_cnt > 0 else 0 %}
|
||||||
<div class="severity-bar-labels">
|
<div class="bar" style="height: {{ h }}px; background: {% if fl > 0 %}var(--pico-color-red-500){% else %}var(--pico-color-zinc-500){% endif %};"></div>
|
||||||
<span class="severity-ERROR">ERROR {{ errors_count }}</span>
|
<div class="tooltip">{{ day }}: {{ cnt }} scans, {{ fl }} flagged</div>
|
||||||
<span class="severity-WARNING">WARNING {{ warnings_count }}</span>
|
</div>
|
||||||
</div>
|
{% endfor %}
|
||||||
</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>
|
</div>
|
||||||
{% endfor %}
|
</article>
|
||||||
</div>
|
{% endif %}
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if most_flagged %}
|
{% if latest_flagged %}
|
||||||
<div>
|
<article class="dash-block dash-block-warn">
|
||||||
<h3>⚠ Most Flagged Packages</h3>
|
<h3>Latest Flagged</h3>
|
||||||
<table>
|
<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>
|
<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>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for p in most_flagged %}
|
{% for s in latest_scans %}
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="/packages/{{ p.package_name }}/{{ p.package_version }}"><strong>{{ p.package_name }}</strong></a></td>
|
<td><a href="/packages/{{ s.package_name }}/{{ s.package_version }}">{{ s.package_name }}</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>{{ s.package_version }}</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>
|
<td>{{ s.started_at.strftime('%m-%d %H:%M') if s.started_at }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
<small><a href="/scans">View all scans →</a></small>
|
||||||
{% endif %}
|
</article>
|
||||||
|
|
||||||
<h3>Latest Scans</h3>
|
<small style="opacity: 0.4;">Last refresh: {{ now.strftime('%H:%M:%S') }} (auto every 30s)</small>
|
||||||
<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>
|
|
||||||
|
|||||||
@@ -12,44 +12,40 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>{{ pkg_name }} <small>v{{ pkg_version }}</small></h1>
|
<h1>{{ pkg_name }} <small>v{{ pkg_version }}</small></h1>
|
||||||
|
|
||||||
<h2>Scans ({{ scans|length }})</h2>
|
<article class="scan-info-block">
|
||||||
<table>
|
<h2>Scans ({{ scans|length }})</h2>
|
||||||
<thead>
|
<table class="compact">
|
||||||
<tr><th>ID</th><th>Repo</th><th>Status</th><th>Findings</th><th>Time</th></tr>
|
<thead>
|
||||||
</thead>
|
<tr><th>ID</th><th>Repo</th><th>Status</th><th>Findings</th><th>Time</th></tr>
|
||||||
<tbody>
|
</thead>
|
||||||
{% for s in scans %}
|
<tbody>
|
||||||
<tr>
|
{% for s in scans %}
|
||||||
<td><a href="/scans/{{ s.id }}">#{{ s.id }}</a></td>
|
<tr>
|
||||||
<td>{{ s.repository }}</td>
|
<td><a href="/scans/{{ s.id }}">#{{ s.id }}</a></td>
|
||||||
<td>
|
<td>{{ s.repository }}</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.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ s.status }}">{{ s.status }}</span>{% endif %}
|
||||||
<td>{% if s.flagged %}<span class="flagged">{{ s.total_findings }}</span>{% else %}<span class="clean">0</span>{% endif %}</td>
|
</td>
|
||||||
<td>{{ s.started_at.strftime('%Y-%m-%d %H:%M') if s.started_at }}</td>
|
<td>{% if s.flagged %}<span class="flagged">{{ s.total_findings }}</span>{% else %}<span class="clean">0</span>{% endif %}</td>
|
||||||
</tr>
|
<td>{{ s.started_at.strftime('%Y-%m-%d %H:%M') if s.started_at }}</td>
|
||||||
{% endfor %}
|
</tr>
|
||||||
</tbody>
|
{% endfor %}
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
|
||||||
<div class="finding-header-row">
|
<h2 style="margin-bottom: 0.75rem;">Findings ({{ findings|length }})</h2>
|
||||||
<h2>Findings ({{ findings|length }})</h2>
|
|
||||||
{% if findings|length > 1 %}
|
|
||||||
<button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if findings %}
|
{% if findings %}
|
||||||
<div id="findings-container">
|
<div id="findings-container">
|
||||||
{% for f in findings %}
|
{% for f in findings %}
|
||||||
<details class="finding-card {{ f.data.severity }}" data-finding-id="{{ f.id }}">
|
<div class="finding-block finding-{{ f.data.severity|lower }}">
|
||||||
<summary class="finding-summary">
|
<div class="finding-summary">
|
||||||
<strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
|
<strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
|
||||||
<strong>{{ f.data.rule }}</strong>
|
<strong>{{ f.data.rule }}</strong>
|
||||||
{% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
|
{% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
|
||||||
<span class="finding-summary-hint">click to expand</span>
|
</div>
|
||||||
</summary>
|
<div class="finding-body">
|
||||||
<div class="finding-details">
|
|
||||||
<p>{{ f.data.message }}</p>
|
<p>{{ f.data.message }}</p>
|
||||||
{% if f.data.code %}
|
{% if f.data.code %}
|
||||||
<div class="code-toolbar">
|
<div class="code-toolbar">
|
||||||
@@ -59,12 +55,15 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if f.report %}
|
{% if f.report %}
|
||||||
<div class="llm-report">
|
<div class="llm-report llm-{{ f.report.verdict }}">
|
||||||
<strong>LLM Analysis</strong>
|
<div class="llm-header">
|
||||||
<span class="verdict-{{ f.report.verdict }}">[{{ f.report.verdict }}]</span>
|
<span class="llm-badge llm-badge-{{ f.report.verdict }}">{{ f.report.verdict }}</span>
|
||||||
<span class="severity-{{ f.report.severity_rating }}">({{ f.report.severity_rating }})</span>
|
{% if f.report.severity_rating %}
|
||||||
<p><em>{{ f.report.summary }}</em></p>
|
<span class="llm-severity">{{ f.report.severity_rating }}</span>
|
||||||
<p>{{ f.report.analysis }}</p>
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<p class="llm-summary">{{ f.report.summary }}</p>
|
||||||
|
<p class="llm-analysis">{{ f.report.analysis }}</p>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="llm-actions" id="llm-{{ f.id }}">
|
<div class="llm-actions" id="llm-{{ f.id }}">
|
||||||
@@ -81,7 +80,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|||||||
@@ -12,38 +12,34 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>Scan #{{ scan.id }}</h1>
|
<h1>Scan #{{ scan.id }}</h1>
|
||||||
|
|
||||||
<table>
|
<article class="scan-info-block">
|
||||||
<tr><td><strong>Package</strong></td><td><a href="/packages/{{ scan.package_name }}/{{ scan.package_version }}">{{ scan.package_name }}</a></td></tr>
|
<div class="scan-info-grid">
|
||||||
<tr><td><strong>Version</strong></td><td>{{ scan.package_version }}</td></tr>
|
<div><strong>Package</strong><br><a href="/packages/{{ scan.package_name }}/{{ scan.package_version }}">{{ scan.package_name }}</a></div>
|
||||||
<tr><td><strong>Ecosystem</strong></td><td>{{ scan.ecosystem }}</td></tr>
|
<div><strong>Version</strong><br>{{ scan.package_version }}</div>
|
||||||
<tr><td><strong>Repository</strong></td><td>{{ scan.repository }}</td></tr>
|
<div><strong>Ecosystem</strong><br>{{ scan.ecosystem }}</div>
|
||||||
<tr><td><strong>Status</strong></td><td>
|
<div><strong>Repository</strong><br>{{ scan.repository }}</div>
|
||||||
{% 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><strong>Status</strong><br>
|
||||||
</td></tr>
|
{% if scan.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ scan.status }}">{{ scan.status }}</span>{% endif %}
|
||||||
<tr><td><strong>SHA256</strong></td><td><code>{{ scan.sha256 or '-' }}</code></td></tr>
|
</div>
|
||||||
<tr><td><strong>Started</strong></td><td>{{ scan.started_at.isoformat() if scan.started_at }}</td></tr>
|
<div><strong>SHA256</strong><br><code class="sha256">{{ scan.sha256 or '-' }}</code></div>
|
||||||
<tr><td><strong>Finished</strong></td><td>{{ scan.finished_at.isoformat() if scan.finished_at }}</td></tr>
|
<div><strong>Started</strong><br>{{ scan.started_at.strftime('%Y-%m-%d %H:%M') if scan.started_at }}</div>
|
||||||
{% if scan.error_message %}<tr><td><strong>Error</strong></td><td><span class="flagged">{{ scan.error_message }}</span></td></tr>{% endif %}
|
<div><strong>Finished</strong><br>{{ scan.finished_at.strftime('%Y-%m-%d %H:%M') if scan.finished_at }}</div>
|
||||||
</table>
|
</div>
|
||||||
|
{% if scan.error_message %}<div class="scan-error"><strong>Error:</strong> {{ scan.error_message }}</div>{% endif %}
|
||||||
|
</article>
|
||||||
|
|
||||||
<div class="finding-header-row">
|
<h2 style="margin-bottom: 0.75rem;">Findings ({{ scan.findings|length }})</h2>
|
||||||
<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 %}
|
{% if scan.findings %}
|
||||||
<div id="findings-container">
|
<div id="findings-container">
|
||||||
{% for f in scan.findings %}
|
{% for f in scan.findings %}
|
||||||
<details class="finding-card {{ f.data.severity }}" data-finding-id="{{ f.id }}">
|
<div class="finding-block finding-{{ f.data.severity|lower }}">
|
||||||
<summary class="finding-summary">
|
<div class="finding-summary">
|
||||||
<strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
|
<strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
|
||||||
<strong>{{ f.data.rule }}</strong>
|
<strong>{{ f.data.rule }}</strong>
|
||||||
{% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
|
{% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
|
||||||
<span class="finding-summary-hint">click to expand</span>
|
</div>
|
||||||
</summary>
|
<div class="finding-body">
|
||||||
<div class="finding-details">
|
|
||||||
<p>{{ f.data.message }}</p>
|
<p>{{ f.data.message }}</p>
|
||||||
{% if f.data.code %}
|
{% if f.data.code %}
|
||||||
<div class="code-toolbar">
|
<div class="code-toolbar">
|
||||||
@@ -53,12 +49,15 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if f.report %}
|
{% if f.report %}
|
||||||
<div class="llm-report">
|
<div class="llm-report llm-{{ f.report.verdict }}">
|
||||||
<strong>LLM Analysis</strong>
|
<div class="llm-header">
|
||||||
<span class="verdict-{{ f.report.verdict }}">[{{ f.report.verdict }}]</span>
|
<span class="llm-badge llm-badge-{{ f.report.verdict }}">{{ f.report.verdict }}</span>
|
||||||
<span class="severity-{{ f.report.severity_rating }}">({{ f.report.severity_rating }})</span>
|
{% if f.report.severity_rating %}
|
||||||
<p><em>{{ f.report.summary }}</em></p>
|
<span class="llm-severity">{{ f.report.severity_rating }}</span>
|
||||||
<p>{{ f.report.analysis }}</p>
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<p class="llm-summary">{{ f.report.summary }}</p>
|
||||||
|
<p class="llm-analysis">{{ f.report.analysis }}</p>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="llm-actions" id="llm-{{ f.id }}">
|
<div class="llm-actions" id="llm-{{ f.id }}">
|
||||||
@@ -75,7 +74,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|||||||
@@ -174,7 +174,7 @@ async def test_web_ui_dashboard(client):
|
|||||||
async def test_web_ui_dashboard_stats_fragment(client):
|
async def test_web_ui_dashboard_stats_fragment(client):
|
||||||
resp = await client.get("/dashboard/stats")
|
resp = await client.get("/dashboard/stats")
|
||||||
assert resp.status_code == 200
|
assert resp.status_code == 200
|
||||||
assert "Total Scans" in resp.text
|
assert "scans" in resp.text.lower()
|
||||||
|
|
||||||
|
|
||||||
@pytest.mark.asyncio
|
@pytest.mark.asyncio
|
||||||
|
|||||||
Reference in New Issue
Block a user