Skip to content

Commit 3042f8d

Browse files
NickChungSUSENickChungSUSE
committed
feat: image details with mockdata
1 parent 00e69d4 commit 3042f8d

File tree

10 files changed

+1096
-2
lines changed

10 files changed

+1096
-2
lines changed

‎pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue‎

Lines changed: 841 additions & 0 deletions
Large diffs are not rendered by default.

‎pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,3 +273,67 @@ export const VULNERABILITIES_TABLE = [
273273
width: 300,
274274
},
275275
];
276+
277+
export const VULNERABILITY_DETAILS_TABLE = [
278+
{
279+
name: "cveId",
280+
labelKey: "imageScanner.imageDetails.table.headers.cveId",
281+
value: "cveId",
282+
formatter: "CveIdCell",
283+
sort: "cveId",
284+
width: 150,
285+
},
286+
{
287+
name: "score",
288+
labelKey: "imageScanner.imageDetails.table.headers.score",
289+
value: "score",
290+
formatter: "ScoreCell",
291+
sort: "score",
292+
width: 100,
293+
},
294+
{
295+
name: "package",
296+
labelKey: "imageScanner.imageDetails.table.headers.package",
297+
value: "package",
298+
sort: "package",
299+
width: 200,
300+
},
301+
{
302+
name: "fixAvailable",
303+
labelKey: "imageScanner.imageDetails.table.headers.fixAvailable",
304+
value: "fixAvailable",
305+
formatter: "FixAvailableCell",
306+
sort: "fixAvailable",
307+
width: 120,
308+
},
309+
{
310+
name: "severity",
311+
labelKey: "imageScanner.imageDetails.table.headers.severity",
312+
value: "severity",
313+
formatter: "SeverityBadgeCell",
314+
sort: "severity",
315+
width: 100,
316+
},
317+
{
318+
name: "exploitability",
319+
labelKey: "imageScanner.imageDetails.table.headers.exploitability",
320+
value: "exploitability",
321+
formatter: "ExploitabilityCell",
322+
sort: "exploitability",
323+
width: 120,
324+
},
325+
{
326+
name: "packageVersion",
327+
labelKey: "imageScanner.imageDetails.table.headers.packageVersion",
328+
value: "packageVersion",
329+
sort: "packageVersion",
330+
width: 150,
331+
},
332+
{
333+
name: "packagePath",
334+
labelKey: "imageScanner.imageDetails.table.headers.packagePath",
335+
value: "packagePath",
336+
sort: "packagePath",
337+
width: 200,
338+
},
339+
];

‎pkg/sbombastic-image-vulnerability-scanner/formatters/CveIdCell.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<RouterLink>
3+
{{ row.cveId }}
4+
</RouterLink>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'CveIdCell',
10+
props: {
11+
row: {
12+
type: Object,
13+
required: true
14+
}
15+
}
16+
};
17+
</script>
18+
19+
<style scoped>
20+
.cve-link {
21+
color: #007cba;
22+
text-decoration: none;
23+
font-weight: 500;
24+
}
25+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/formatters/ExploitabilityCell.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<span class="exploitability-cell">
3+
{{ t(`imageScanner.imageDetails.${row.exploitability}`) }}
4+
</span>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: {
10+
row: {
11+
type: Object,
12+
required: true
13+
}
14+
}
15+
};
16+
</script>
17+
18+
<style scoped>
19+
.exploitability-cell {
20+
text-transform: capitalize;
21+
}
22+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/formatters/FixAvailableCell.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="fix-available-cell">
3+
<i
4+
:class="row.fixAvailable ? 'icon icon-confirmation-alt' : 'icon icon-notify-error'"
5+
:style="{
6+
color: row.fixAvailable ? '#007cba' : '#E2E3EB',
7+
fontSize: '1.5rem'
8+
}"
9+
></i>
10+
<span v-if="row.fixAvailable && row.fixVersion">{{ row.fixVersion }}</span>
11+
</div>
12+
</template>
13+
14+
<script>
15+
export default {
16+
props: {
17+
row: {
18+
type: Object,
19+
required: true
20+
}
21+
}
22+
};
23+
</script>
24+
25+
<style scoped>
26+
.fix-available-cell {
27+
display: flex;
28+
align-items: center;
29+
gap: 8px;
30+
}
31+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGE_OVERVIEW }/`">
2+
<RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGE_DETAIL }/${ row.metadata.name }`">
33
{{ row.metadata.name }}
44
</RouterLink>
55
</template>

‎pkg/sbombastic-image-vulnerability-scanner/formatters/ScoreCell.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div>
3+
<ScoreBadge
4+
v-if="row.score && row.score.trim()"
5+
:score="parseFloat(row.score.split(' ')[0])"
6+
:scoreType="row.score.split(' ')[1].replace(/[()]/g, '')"
7+
/>
8+
<span v-else class="na-badge">n/a</span>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import ScoreBadge from '../components/common/ScoreBadge.vue';
14+
15+
export default {
16+
name: 'ScoreCell',
17+
components: {
18+
ScoreBadge
19+
},
20+
props: {
21+
row: {
22+
type: Object,
23+
required: true
24+
}
25+
}
26+
};
27+
</script>
28+
29+
<style scoped>
30+
.na-badge {
31+
display: inline-block;
32+
background-color: #F4F5FA;
33+
color: #6C6C76;
34+
padding: 4px 8px;
35+
border-radius: 4px;
36+
font-size: 12px;
37+
font-weight: 500;
38+
width: 100%;
39+
height: 24px;
40+
text-align: center;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
}
45+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/formatters/SeverityBadgeCell.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<span>{{ t(`imageScanner.enum.cve.${row.severity}`) }}</span>
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
row: {
9+
type: Object,
10+
required: true
11+
}
12+
}
13+
};
14+
</script>

‎pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,53 @@ imageScanner:
9797
repository: Repository
9898
registry: Registry
9999
vulnerabilities: vulnerabilities
100+
imageDetails:
101+
status: Status
102+
vulnerabilities: Vulnerabilities
103+
repository: Repository
104+
registry: Registry
105+
architecture: Architecture
106+
operatingSystem: Operating system
107+
size: Size
108+
author: Author
109+
dockerVersion: Docker version
110+
created: Created
111+
showAllProperties: Show all image properties
112+
showLessProperties: Show less properties
113+
imageId: Image ID
114+
layers: Layers
115+
mostSevereVulnerabilities: Most severe, affecting vulnerabilities
116+
fixAvailable: Fix available
117+
noFixAvailable: No fix available
118+
severityDistribution: Severity distribution
119+
vulnerabilitiesInTotal: Vulnerabilities in total
120+
searchById: Search by ID
121+
searchByIdPlaceholder: Search CVE ID
122+
score: Score
123+
searchByName: Search by name
124+
searchByNamePlaceholder: Search package name
125+
any: Any
126+
available: Available
127+
notAvailable: Not available
128+
severity: Severity
129+
exploitability: Exploitability
130+
affected: Affected
131+
not-affected: Not affected
132+
investigating: Investigating
133+
fixed: Fixed
134+
no-vex-data: No VEX data
135+
groupByLayer: Group by layer
136+
selected: selected
137+
table:
138+
headers:
139+
cveId: CVE ID
140+
score: Score
141+
package: Package
142+
fixAvailable: Fix available
143+
severity: Severity
144+
exploitability: Exploitability
145+
packageVersion: Package version
146+
packagePath: Package path
100147
vulnerabilities:
101148
title: Vulnerabilities
102149
vulnerabilitiesBySeverityChart:

‎pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import RegistryDetails from "@sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue";
22
import ComponentDemo from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue";
33
import ImageOverview from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue";
4+
import ImageDetails from "@sbombastic-image-vulnerability-scanner/components/ImageDetails.vue";
45
import RegistriesConfiguration from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue";
56
import Vulnerabilities from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue";
6-
import VexManagement from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue";
77
import CreateResource from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/create.vue";
88
import ListResource from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/index.vue";
99
import {
@@ -17,6 +17,11 @@ const routes = [
1717
path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGE_OVERVIEW}`,
1818
component: ImageOverview,
1919
},
20+
{
21+
name: `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_DETAIL}-id`,
22+
path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGE_DETAIL}/:id`,
23+
component: ImageDetails,
24+
},
2025
{
2126
name: `c-cluster-${PRODUCT_NAME}-${PAGE.VULNERABILITY_OVERVIEW}`,
2227
path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VULNERABILITY_OVERVIEW}`,

0 commit comments

Comments
 (0)