softvisor/Infrastruktur-Monitoring-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Roll findings up per package and image, expandable to their CVEs

Browse Source 
The findings table listed every CVE, which is thousands of rows on a real
host. It now shows one row per affected package (host) or image
(containers) with its severity split, how many findings it has and how
many of them have a fix. Clicking a row loads and shows the CVEs of that
group; collapsing keeps them cached.

The rollup is a GROUP BY in SQLite behind a new groups endpoint, so the
page loads a few dozen rows instead of the full finding list, and the
flat list gained a package filter to expand one group.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Dennis Nemec
2026-09-03 20:02:25 +02:00
parent 751296b3b0
commit 278b5e47a3
14 changed files with 635 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/pages/VulnerabilitiesPage.vue
View File

@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { api, ApiError } from '../api/client'
import type {
Finding,
FindingGroup,
FindingScope,
JobRun,
Severity,
@ -11,13 +12,14 @@ import type {
} from '../api/types'
import { useAuthStore } from '../stores/auth'
import { useToastStore } from '../stores/toast'
import FindingTable from '../components/FindingTable.vue'
import FindingGroups from '../components/FindingGroups.vue'
import ScopeTabs from '../components/ScopeTabs.vue'
const auth = useAuthStore()
const toast = useToastStore()
const summary = ref<VulnSummary | null>(null)
const findings = ref<Finding[]>([])
const groups = ref<FindingGroup[]>([])
const groupsRef = ref<InstanceType<typeof FindingGroups> | null>(null)
const targets = ref<TargetSummary[]>([])
const scope = ref<FindingScope>('host')
const minSeverity = ref<Severity>('low')
@ -36,14 +38,26 @@ async function load() {
q.set('min_severity', minSeverity.value)
if (target.value) q.set('target', target.value)
if (status.value) q.set('status', status.value)
const [s, f, t] = await Promise.all([
const [s, g, t] = await Promise.all([
api.get<VulnSummary>('/api/vulnerabilities/summary'),
api.get<Finding[]>(`/api/vulnerabilities?${q}`),
api.get<FindingGroup[]>(`/api/vulnerabilities/groups?${q}`),
api.get<TargetSummary[]>('/api/vulnerabilities/targets'),
])
summary.value = s
findings.value = f
groups.value = g
targets.value = t
groupsRef.value?.reset()
}
/** Findings of one group, loaded when its row is expanded. */
async function loadGroup(group: FindingGroup): Promise<Finding[]> {
const q = new URLSearchParams()
q.set('scope', scope.value)
q.set('min_severity', minSeverity.value)
if (status.value) q.set('status', status.value)
if (group.kind === 'image') q.set('target', group.key)
else q.set('package', group.key)
return api.get<Finding[]>(`/api/vulnerabilities?${q}`)
}
/// Targets of the selected category, for the filter dropdown.
@ -85,7 +99,8 @@ async function scan() {
async function setStatus(f: Finding, s: 'open' | 'acknowledged') {
try {
await api.post(`/api/vulnerabilities/${f.id}/status`, { status: s })
await load()
f.status = s
if (status.value) await load()
} catch (e) {
fail(e)
}
@ -172,15 +187,18 @@ async function setStatus(f: Finding, s: 'open' | 'acknowledged') {
</select>
</div>
<span class="pb-2 text-sm text-gray-500">
{{ findings.length }} {{ scope === 'host' ? 'host' : 'container' }} findings
{{ groups.length }} {{ scope === 'host' ? 'packages' : 'images' }} ·
{{ groups.reduce((n: number, g: FindingGroup) => n + g.total, 0) }} findings
</span>
</div>
<FindingTable
<FindingGroups
ref="groupsRef"
class="mt-4"
:findings="findings"
:groups="groups"
:scope="scope"
:can-act="auth.isAdmin"
:load="loadGroup"
@status="setStatus"
@select="selected = $event"
/>