Files
dockhand/lib/components/ScannerSeverityPills.svelte
Jarek Krochmalski 62e3c6439e Initial commit
2025-12-28 21:16:03 +01:00

40 lines
1.3 KiB
Svelte

<script lang="ts">
import { Badge } from '$lib/components/ui/badge';
interface ScannerResult {
scanner: 'grype' | 'trivy';
critical: number;
high: number;
medium: number;
low: number;
negligible?: number;
unknown?: number;
}
interface Props {
results: ScannerResult[];
}
let { results }: Props = $props();
</script>
<div class="flex items-center gap-3 shrink-0">
{#each results as result}
<div class="flex items-center gap-1">
<span class="text-2xs text-muted-foreground">{result.scanner === 'grype' ? 'Grype' : 'Trivy'}:</span>
{#if (result.critical || 0) > 0}
<Badge variant="outline" class="px-1 py-0 text-2xs bg-red-500/10 text-red-600 border-red-500/30" title="Critical">{result.critical}</Badge>
{/if}
{#if (result.high || 0) > 0}
<Badge variant="outline" class="px-1 py-0 text-2xs bg-orange-500/10 text-orange-600 border-orange-500/30" title="High">{result.high}</Badge>
{/if}
{#if (result.medium || 0) > 0}
<Badge variant="outline" class="px-1 py-0 text-2xs bg-yellow-500/10 text-yellow-600 border-yellow-500/30" title="Medium">{result.medium}</Badge>
{/if}
{#if (result.low || 0) > 0}
<Badge variant="outline" class="px-1 py-0 text-2xs bg-blue-500/10 text-blue-600 border-blue-500/30" title="Low">{result.low}</Badge>
{/if}
</div>
{/each}
</div>