Skip to content

Commit be836e2

Browse files
rushk014xingzhang-suse
rushk014
authored and
xingzhang-suse
committed
Refactor Registry metadata as common component
1 parent 3dc76ed commit be836e2

File tree

6 files changed

+178
-134
lines changed

6 files changed

+178
-134
lines changed

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

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<RouterLink to="../">{{ t('imageScanner.registries.title') }}:</RouterLink>
99
{{ $route.params.id }}
1010
</span>
11-
<BadgeState color="bg-error" label="Failed"></BadgeState>
11+
<RegisterStatusBadge status="failed" />
1212
</div>
1313
<span class="resource-header-description">
1414
Registry configuration description
@@ -25,41 +25,67 @@
2525
</button>
2626
</div>
2727
</div>
28-
<div class="rancher-meta">
29-
<div class="meta-widget">
30-
<RancherMetaProperty :label="t('imageScanner.registries.configuration.meta.registry')" :value="registry.spec.uri"/>
31-
<RancherMetaProperty :label="t('imageScanner.registries.configuration.meta.namespace')" :value="registry.metadata.namespace"/>
32-
</div>
33-
<div class="meta-widget">
34-
<RancherMetaProperty :label="t('imageScanner.registries.configuration.meta.repositories')" :value="registry.spec.repositories.length"/>
35-
<RancherMetaTags :tags="registry.spec.repositories" />
36-
</div>
37-
<div class="meta-widget"></div>
38-
</div>
28+
<RancherMeta :properties="registryMetaProperties" />
3929
</div>
4030
Recent scans
31+
4132
</div>
4233
</template>
4334

4435
<script>
4536
import { BadgeState } from '@rancher/components';
4637
import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
47-
import RancherMetaProperty from './common/RancherMetaProperty.vue';
48-
import RancherMetaTags from './common/RancherMetaTags.vue';
38+
import RancherMeta from './common/RancherMeta.vue';
39+
import RegisterStatusBadge from './common/RegisterStatusBadge.vue';
4940
5041
export default {
5142
name: 'registryDetails',
5243
components: {
5344
BadgeState,
54-
RancherMetaProperty,
55-
RancherMetaTags
45+
RancherMeta,
46+
RegisterStatusBadge
47+
},
48+
data() {
49+
return {
50+
}
5651
},
5752
async fetch() {
5853
await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${this.$route.params.id}` });
5954
},
6055
computed: {
6156
registry() {
6257
return this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${this.$route.params.id}`);
58+
},
59+
registryMetaProperties() {
60+
return [
61+
{
62+
type: 'text',
63+
label: this.t('imageScanner.registries.configuration.meta.registry'),
64+
value: this.registry.spec.uri
65+
},
66+
{
67+
type: 'text',
68+
label: this.t('imageScanner.registries.configuration.meta.repositories'),
69+
value: this.registry.spec.repositories.length
70+
},
71+
{
72+
type: 'text',
73+
label: this.t('imageScanner.registries.configuration.meta.schedule')
74+
},
75+
{
76+
type: 'text',
77+
label: this.t('imageScanner.registries.configuration.meta.namespace'),
78+
value: this.registry.metadata.namespace
79+
},
80+
{
81+
type: 'tags',
82+
tags: this.registry.spec.repositories || []
83+
},
84+
{
85+
type: 'text',
86+
value: this.registry.metadata.schedule || '',
87+
}
88+
];
6389
}
6490
}
6591
}
@@ -92,22 +118,6 @@
92118
/* style */
93119
border-bottom: 1px dashed #DCDEE7;
94120
95-
.rancher-meta {
96-
display: flex;
97-
align-items: flex-start;
98-
gap: 24px;
99-
align-self: stretch;
100-
101-
.meta-widget {
102-
display: flex;
103-
padding-right: 16px;
104-
flex-direction: column;
105-
align-items: flex-start;
106-
gap: 4px;
107-
flex: 1 0 0;
108-
}
109-
}
110-
111121
.header {
112122
/* layout */
113123
display: flex;

‎pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMeta.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div class="rancher-meta">
3+
<RancherMetaProperty v-for="property in properties" :property="property"/>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import RancherMetaProperty from './RancherMetaProperty.vue';
9+
10+
export default {
11+
name: 'RancherMeta',
12+
components: {
13+
RancherMetaProperty
14+
},
15+
props: {
16+
properties: {
17+
type: Array,
18+
default: () => []
19+
}
20+
},
21+
}
22+
</script>
23+
24+
<style lang="scss" scoped>
25+
.rancher-meta {
26+
display: grid;
27+
grid-template-columns: 1fr 1fr 1fr;
28+
align-items: flex-start;
29+
row-gap: 4px;
30+
column-gap: 24px;
31+
align-self: stretch;
32+
}
33+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue‎

Lines changed: 86 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,110 @@
11
<template>
22
<div class="property">
3-
<div class="label">
4-
{{ label }}
3+
<div v-if="property.type === 'text'" class="text">
4+
<div v-if="property.label" class="label">
5+
{{ property.label }}
6+
</div>
7+
<div v-if="property.value" class="value">
8+
{{ property.value }}
9+
</div>
510
</div>
6-
<div class="value">
7-
{{ value }}
11+
<div v-else-if="property.type === 'tags'" class="tags">
12+
<div class="tags">
13+
<div v-for="tag in property.tags" :key="tag" class="tag">
14+
<span class="tag-text">{{ tag }}</span>
15+
</div>
16+
</div>
817
</div>
918
</div>
1019
</template>
1120

12-
<script>
21+
<script lang="ts">
22+
import { MetadataProperty } from '@sbombastic-image-vulnerability-scanner/types';
23+
import { PropType } from 'vue';
24+
1325
export default {
1426
name: 'RancherMetaProperty',
1527
props: {
16-
label: {
17-
type: String,
18-
default: ''
19-
},
20-
value: {
21-
type: String,
22-
default: ''
28+
property: {
29+
type: Object as PropType<MetadataProperty>,
30+
required: true
2331
}
2432
}
2533
}
2634
</script>
2735

2836
<style lang="scss" scoped>
29-
.property {
30-
display: flex;
31-
align-items: flex-start;
32-
align-self: stretch;
33-
34-
/* typography */
35-
font-family: Lato;
36-
font-size: 14px;
37-
font-style: normal;
38-
font-weight: 400;
39-
line-height: 21px; /* 150% */
40-
41-
.label {
37+
.property {
38+
padding-right: 16px;
39+
gap: 4px;
40+
flex: 1 0 0;
41+
}
42+
43+
.text {
4244
display: flex;
43-
width: 144px;
44-
align-items: center;
45-
gap: 8px;
45+
align-items: flex-start;
46+
align-self: stretch;
47+
4648
/* typography */
47-
color: #717179;
49+
font-family: Lato;
50+
font-size: 14px;
51+
font-style: normal;
52+
font-weight: 400;
53+
line-height: 21px; /* 150% */
54+
55+
.label {
56+
display: flex;
57+
width: 144px;
58+
align-items: center;
59+
gap: 8px;
60+
/* typography */
61+
color: #717179;
62+
}
63+
64+
.value {
65+
display: flex;
66+
align-items: center;
67+
gap: 8px;
68+
flex: 1 0 0;
69+
/* typography */
70+
color: #141419
71+
}
4872
}
4973
50-
.value {
74+
.tags {
5175
display: flex;
52-
align-items: center;
76+
align-items: flex-start;
77+
align-content: flex-start;
5378
gap: 8px;
54-
flex: 1 0 0;
55-
/* typography */
56-
color: #141419
79+
align-self: stretch;
80+
flex-wrap: wrap;
81+
/* style */
82+
border-radius: 4px;
83+
84+
.tag {
85+
display: flex;
86+
padding: 1px 8px;
87+
align-items: center;
88+
gap: 8px;
89+
/* style */
90+
border-radius: 4px;
91+
background: #EDEFF3;
92+
93+
.tag-text {
94+
display: -webkit-box;
95+
-webkit-box-orient: vertical;
96+
-webkit-line-clamp: 1;
97+
line-clamp: 1;
98+
/* typography */
99+
overflow: hidden;
100+
color: #141419;
101+
text-overflow: ellipsis;
102+
font-family: Lato;
103+
font-size: 13px;
104+
font-style: normal;
105+
font-weight: 400;
106+
line-height: 22px; /* 169.231% */
107+
}
108+
}
57109
}
58-
}
59110
</style>

‎pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaTags.vue‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
display: -webkit-box;
7575
-webkit-box-orient: vertical;
7676
-webkit-line-clamp: 1;
77+
line-clamp: 1;
7778
overflow: hidden;
7879
text-overflow: ellipsis;
7980
font-family: Lato;

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1-
export const PRODUCT_NAME = 'imageScanner';
1+
export const PRODUCT_NAME = "imageScanner";
22
export const RESOURCE = {
3-
REGISTRY: "sbombastic.rancher.io.registry",
4-
SCAN_JOB: "sbombastic.rancher.io.scanjob",
3+
REGISTRY: "sbombastic.rancher.io.registry",
4+
SCAN_JOB: "sbombastic.rancher.io.scanjob",
55
};
66
export const PAGE = {
7-
DASHBOARD: "dashboard",
8-
REGISTRIES: "registries",
9-
IMAGE_OVERVIEW: "image_overview",
10-
IMAGE_DETAIL: "image_detail",
11-
VULNERABILITY_OVERVIEW: "vulnerability_overview",
12-
CVE_DETAIL: "cve_detail",
13-
};
7+
DASHBOARD: "dashboard",
8+
REGISTRIES: "registries",
9+
IMAGE_OVERVIEW: "image_overview",
10+
IMAGE_DETAIL: "image_detail",
11+
VULNERABILITY_OVERVIEW: "vulnerability_overview",
12+
CVE_DETAIL: "cve_detail",
13+
};
14+
export interface MetadataProperty {
15+
type: "text" | "tags";
16+
label?: string;
17+
value?: string;
18+
tags?: string[];
19+
}

0 commit comments

Comments
 (0)