Skip to content

Commit 5985839

Browse files
johncowenjohncowen
authored
fix(services): add label links to service detail pages (#5116)
Adds linked labels to the Mesh*Service detail pages. Signed-off-by: John Cowen <john.cowen@konghq.com>
1 parent bec22d5 commit 5985839

3 files changed

Lines changed: 73 additions & 79 deletions

File tree

‎packages/kuma-gui/src/app/services/views/MeshExternalServiceDetailView.vue‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
codeRegExp: false,
1010
environment: String,
1111
}"
12-
v-slot="{ route, can, t, uri, me }"
12+
v-slot="{ route, can, t, uri, me, r }"
1313
>
1414
<AppView>
1515
<XLayout variant="y-stack">
@@ -90,33 +90,31 @@
9090
</dd>
9191
</div>
9292

93-
<template
94-
v-for="labels in [Object.entries(service.labels)]"
95-
:key="typeof labels"
96-
>
97-
<div v-if="labels.length > 0">
98-
<dt>{{ t('services.routes.item.labels') }}</dt>
99-
<dd>
100-
<XLayout
101-
variant="separated"
102-
truncate
93+
<div v-if="Object.keys(service.labels).length > 0">
94+
<dt>Labels</dt>
95+
<dd>
96+
<XLayout
97+
variant="separated"
98+
>
99+
<XAction
100+
v-for="(value, key) in service.labels"
101+
:key="key"
102+
:href="t(`common.label.href.${key.replaceAll('.', '~')}`, {
103+
mesh: service.mesh,
104+
zone: service.zone,
105+
namespace: service.namespace,
106+
name: value,
107+
}, { defaultMessage: '' })"
103108
>
104-
<template
105-
v-for="kumaRe in [/^(.+\.)?kuma\.io\//]"
106-
:key="typeof kumaRe"
109+
<XBadge
110+
:variant="r('kuma.label').test(key) ? 'reserved-kv' : 'kv'"
107111
>
108-
<XBadge
109-
v-for="[key, value] in labels"
110-
:key="key"
111-
:appearance="kumaRe.test(key) ? 'info' : 'decorative'"
112-
>
113-
{{ key }}:{{ value }}
114-
</XBadge>
115-
</template>
116-
</XLayout>
117-
</dd>
118-
</div>
119-
</template>
112+
{{ key }}:<strong>{{ value }}</strong>
113+
</XBadge>
114+
</XAction>
115+
</XLayout>
116+
</dd>
117+
</div>
120118
</XDl>
121119
</DataLoader>
122120
</XCard>

‎packages/kuma-gui/src/app/services/views/MeshMultiZoneServiceDetailView.vue‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
codeRegExp: false,
1010
environment: String,
1111
}"
12-
v-slot="{ route, t, uri, me }"
12+
v-slot="{ route, t, uri, me, r }"
1313
>
1414
<AppView>
1515
<XLayout variant="y-stack">
@@ -77,34 +77,32 @@
7777
</template>
7878
</dd>
7979
</div>
80-
81-
<template
82-
v-for="labels in [Object.entries(service.labels)]"
83-
:key="typeof labels"
84-
>
85-
<div v-if="labels.length > 0">
86-
<dt>{{ t('services.routes.item.labels') }}</dt>
87-
<dd>
88-
<XLayout
89-
variant="separated"
90-
truncate
80+
81+
<div v-if="Object.keys(service.labels).length > 0">
82+
<dt>Labels</dt>
83+
<dd>
84+
<XLayout
85+
variant="separated"
86+
>
87+
<XAction
88+
v-for="(value, key) in service.labels"
89+
:key="key"
90+
:href="t(`common.label.href.${key.replaceAll('.', '~')}`, {
91+
mesh: service.mesh,
92+
zone: '',
93+
namespace: service.namespace,
94+
name: value,
95+
}, { defaultMessage: '' })"
9196
>
92-
<template
93-
v-for="kumaRe in [/^(.+\.)?kuma\.io\//]"
94-
:key="typeof kumaRe"
97+
<XBadge
98+
:variant="r('kuma.label').test(key) ? 'reserved-kv' : 'kv'"
9599
>
96-
<XBadge
97-
v-for="[key, value] in labels"
98-
:key="key"
99-
:appearance="kumaRe.test(key) ? 'info' : 'decorative'"
100-
>
101-
{{ key }}:{{ value }}
102-
</XBadge>
103-
</template>
104-
</XLayout>
105-
</dd>
106-
</div>
107-
</template>
100+
{{ key }}:<strong>{{ value }}</strong>
101+
</XBadge>
102+
</XAction>
103+
</XLayout>
104+
</dd>
105+
</div>
108106
</XDl>
109107
</DataLoader>
110108
</XCard>

‎packages/kuma-gui/src/app/services/views/MeshServiceDetailView.vue‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
codeFilter: false,
1212
codeRegExp: false,
1313
}"
14-
v-slot="{ can, route, t, uri, me }"
14+
v-slot="{ can, route, t, uri, me, r }"
1515
>
1616
<AppView>
1717
<XLayout variant="y-stack">
@@ -124,33 +124,31 @@
124124
</template>
125125
</dd>
126126
</div>
127-
<template
128-
v-for="labels in [Object.entries(service.labels)]"
129-
:key="typeof labels"
130-
>
131-
<div v-if="labels.length > 0">
132-
<dt>{{ t('services.routes.item.labels') }}</dt>
133-
<dd>
134-
<XLayout
135-
variant="separated"
136-
truncate
127+
<div v-if="Object.keys(service.labels).length > 0">
128+
<dt>Labels</dt>
129+
<dd>
130+
<XLayout
131+
variant="separated"
132+
>
133+
<XAction
134+
v-for="(value, key) in service.labels"
135+
:key="key"
136+
:href="t(`common.label.href.${key.replaceAll('.', '~')}`, {
137+
mesh: service.mesh,
138+
zone: service.zone,
139+
namespace: service.namespace,
140+
name: value,
141+
}, { defaultMessage: '' })"
137142
>
138-
<template
139-
v-for="kumaRe in [/^(.+\.)?kuma\.io\//]"
140-
:key="typeof kumaRe"
143+
<XBadge
144+
:variant="r('kuma.label').test(key) ? 'reserved-kv' : 'kv'"
141145
>
142-
<XBadge
143-
v-for="[key, value] in labels"
144-
:key="key"
145-
:appearance="kumaRe.test(key) ? 'info' : 'decorative'"
146-
>
147-
{{ key }}:{{ value }}
148-
</XBadge>
149-
</template>
150-
</XLayout>
151-
</dd>
152-
</div>
153-
</template>
146+
{{ key }}:<strong>{{ value }}</strong>
147+
</XBadge>
148+
</XAction>
149+
</XLayout>
150+
</dd>
151+
</div>
154152
</XDl>
155153
</DataLoader>
156154
</XCard>

0 commit comments

Comments
 (0)