Skip to content

Commit 61b4159

Browse files
rbjornstadrbjornstad
committed
feat: refactor vulnerability color handling and improve UI for vulnerability summary links
1 parent 5f5f55b commit 61b4159

File tree

3 files changed

+82
-45
lines changed

3 files changed

+82
-45
lines changed

‎src/lib/components/WorkloadsWithSBOM.svelte

Lines changed: 75 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
} from '$houdini';
1010
import Pagination from '$lib/Pagination.svelte';
1111
import { changeParams } from '$lib/utils/searchparams.svelte';
12-
import { severityToColor } from '$lib/utils/vulnerabilities';
1312
import {
1413
BodyShort,
1514
Skeleton,
@@ -21,7 +20,7 @@
2120
Tooltip,
2221
Tr
2322
} from '@nais/ds-svelte-community';
24-
import { CheckmarkIcon, LinkIcon } from '@nais/ds-svelte-community/icons';
23+
import { CheckmarkIcon } from '@nais/ds-svelte-community/icons';
2524
import type { WorkloadsWithSbomVariables } from './$houdini';
2625
import WorkloadLink from './WorkloadLink.svelte';
2726
@@ -155,6 +154,23 @@
155154
}) => {
156155
return `/team/${workload.team.slug}/${workload.environment.name}/${workload.__typename === 'Application' ? 'app' : 'job'}/${workload.name}/image`;
157156
};
157+
158+
export function severityToColorWithHover(severity: string): string {
159+
switch (severity) {
160+
case 'critical':
161+
return 'var(--a-red-200)';
162+
case 'high':
163+
return 'var(--a-orange-200)';
164+
case 'medium':
165+
return 'var(--a-orange-200)';
166+
case 'low':
167+
return 'var(--a-green-200)';
168+
case 'unassigned':
169+
return 'var(--a-gray-200)';
170+
default:
171+
return 'var(--a-gray-200)';
172+
}
173+
}
158174
</script>
159175

160176
{#if $query.data?.team}
@@ -170,7 +186,7 @@
170186
<Thead>
171187
<Tr>
172188
<Th sortable={true} sortKey={WorkloadOrderField.NAME}>Workload</Th>
173-
<Th>Details</Th>
189+
174190
<Th sortable={true} sortKey={WorkloadOrderField.ENVIRONMENT} style="width: 142px;"
175191
>Environment</Th
176192
>
@@ -220,7 +236,6 @@
220236
<Td>
221237
<WorkloadLink {workload} />
222238
</Td>
223-
<Td><div class="image-url"><a href={imageUrl(workload)}><LinkIcon /></a></div></Td>
224239
<Td>
225240
{workload.environment.name}
226241
</Td>
@@ -230,14 +245,11 @@
230245
<Tooltip content={'critical'}>
231246
{#if workload.image.vulnerabilitySummary}
232247
{#if workload.image.vulnerabilitySummary.critical > 0}
233-
<BodyShort
234-
class="vulnerability-count"
235-
style="background-color: {severityToColor('critical')}"
236-
>
248+
<a href={imageUrl(workload)} class="vulnerability-count CRITICAL">
237249
{workload.image.vulnerabilitySummary
238250
? workload.image.vulnerabilitySummary.critical
239251
: '-'}
240-
</BodyShort>
252+
</a>
241253
{:else}
242254
<CheckmarkIcon style="color: var(--a-icon-success); font-size: 1.75rem;" />
243255
{/if}
@@ -254,14 +266,11 @@
254266
<Tooltip content={'high'}>
255267
{#if workload.image.vulnerabilitySummary}
256268
{#if workload.image.vulnerabilitySummary.high > 0}
257-
<BodyShort
258-
class="vulnerability-count"
259-
style="background-color: {severityToColor('high')}"
260-
>
269+
<a href={imageUrl(workload)} class="vulnerability-count HIGH">
261270
{workload.image.vulnerabilitySummary
262271
? workload.image.vulnerabilitySummary.high
263272
: '-'}
264-
</BodyShort>
273+
</a>
265274
{:else}
266275
<CheckmarkIcon style="color: var(--a-icon-success); font-size: 1.75rem;" />
267276
{/if}
@@ -278,14 +287,11 @@
278287
<Tooltip content={'medium'}>
279288
{#if workload.image.vulnerabilitySummary}
280289
{#if workload.image.vulnerabilitySummary.medium > 0}
281-
<BodyShort
282-
class="vulnerability-count"
283-
style="background-color: {severityToColor('medium')}"
284-
>
290+
<a href={imageUrl(workload)} class="vulnerability-count MEDIUM">
285291
{workload.image.vulnerabilitySummary
286292
? workload.image.vulnerabilitySummary.medium
287293
: '-'}
288-
</BodyShort>
294+
</a>
289295
{:else}
290296
<CheckmarkIcon style="color: var(--a-icon-success); font-size: 1.75rem;" />
291297
{/if}
@@ -302,14 +308,11 @@
302308
<Tooltip content={'low'}>
303309
{#if workload.image.vulnerabilitySummary}
304310
{#if workload.image.vulnerabilitySummary.low > 0}
305-
<BodyShort
306-
class="vulnerability-count"
307-
style="background-color: {severityToColor('low')}"
308-
>
311+
<a href={imageUrl(workload)} class="vulnerability-count LOW">
309312
{workload.image.vulnerabilitySummary
310313
? workload.image.vulnerabilitySummary.low
311314
: '-'}
312-
</BodyShort>
315+
</a>
313316
{:else}
314317
<CheckmarkIcon style="color: var(--a-icon-success); font-size: 1.75rem;" />
315318
{/if}
@@ -326,12 +329,9 @@
326329
<Tooltip content={'unassigned'}>
327330
{#if workload.image.vulnerabilitySummary}
328331
{#if workload.image.vulnerabilitySummary.unassigned > 0}
329-
<BodyShort
330-
class="vulnerability-count"
331-
style="background-color: {severityToColor('unassigned')}"
332-
>
332+
<a href={imageUrl(workload)} class="vulnerability-count UNASSIGNED">
333333
{workload.image.vulnerabilitySummary.unassigned}
334-
</BodyShort>
334+
</a>
335335
{:else}
336336
<CheckmarkIcon style="color: var(--a-icon-success); font-size: 1.75rem;" />
337337
{/if}
@@ -347,9 +347,11 @@
347347
<div class="vulnerability-summary">
348348
<Tooltip content={'risk score'}>
349349
<BodyShort class="vulnerability-count">
350-
{workload.image.vulnerabilitySummary
351-
? workload.image.vulnerabilitySummary.riskScore
352-
: '-'}
350+
<a href={imageUrl(workload)} class="vulnerability-count RISK_SCORE">
351+
{workload.image.vulnerabilitySummary
352+
? workload.image.vulnerabilitySummary.riskScore
353+
: '-'}
354+
</a>
353355
</BodyShort>
354356
</Tooltip>
355357
</div>
@@ -386,27 +388,62 @@
386388
display: flex;
387389
gap: 1px;
388390
389-
:global(.vulnerability-count) {
391+
.vulnerability-count {
390392
border-top-left-radius: 4px;
391393
border-bottom-left-radius: 4px;
392394
393395
border-top-right-radius: 4px;
394396
border-bottom-right-radius: 4px;
395-
}
396397
397-
:global(.vulnerability-count) {
398398
padding: 4px 10px;
399-
}
400399
401-
:global(.vulnerability-count) {
402-
padding: 4px 10px;
400+
color: inherit;
401+
text-decoration: none;
402+
403+
&.CRITICAL {
404+
background-color: var(--a-red-200);
405+
&:hover {
406+
background-color: var(--a-red-300);
407+
}
408+
}
409+
&.HIGH {
410+
background-color: var(--a-orange-200);
411+
&:hover {
412+
background-color: var(--a-orange-300);
413+
}
414+
}
415+
&.MEDIUM {
416+
background-color: var(--a-orange-200);
417+
&:hover {
418+
background-color: var(--a-orange-300);
419+
}
420+
}
421+
&.LOW {
422+
background-color: var(--a-green-200);
423+
&:hover {
424+
background-color: var(--a-green-300);
425+
}
426+
}
427+
&.UNASSIGNED {
428+
background-color: var(--a-gray-200);
429+
&:hover {
430+
background-color: var(--a-gray-300);
431+
}
432+
}
433+
434+
&.RISK_SCORE {
435+
&:hover {
436+
background-color: var(--a-gray-300);
437+
}
438+
}
403439
}
404440
}
405441
.vulnerability {
406442
display: flex;
407443
align-items: center;
408444
justify-content: center;
409445
}
446+
410447
.image-url {
411448
display: flex;
412449
align-items: center;

‎src/lib/utils/vulnerabilities.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
export function severityToColor(severity: string): string {
22
switch (severity) {
33
case 'critical':
4-
return '#F68282';
4+
return 'var(--a-red-200)';
55
case 'high':
6-
return '#FFC166';
6+
return 'var(--a-orange-200)';
77
case 'medium':
8-
return '#FFD799';
8+
return 'var(--a-orange-200)';
99
case 'low':
10-
return '#99DEAD';
10+
return 'var(--a-green-200)';
1111
case 'unassigned':
12-
return '#E0E3E6';
12+
return 'var(--a-gray-200)';
1313
default:
14-
return '#777777';
14+
return 'var(--a-gray-200)';
1515
}
1616
}

‎src/routes/team/[team]/vulnerabilities/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
</SummaryCard>
157157
</Card>
158158
<Card columns={12}>
159-
<Heading level="3" size="small">Workloads with SBOM</Heading>
159+
<Heading level="3" size="small" spacing>Workloads with SBOM</Heading>
160160

161161
<div class="env-filter">
162162
<Select size="small" hideLabel={true} bind:value={selectedEnvironment} label="Environment">

0 commit comments

Comments
 (0)