Skip to content
This repository was archived by the owner on Jan 20, 2021. It is now read-only.

Commit 9abca04

Browse files
shwstpprustcweizhou
shwstppr
authored and
ustcweizhou
committed
views: add form element info tooltips (#483)
Added info tooltips for some custom forms Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
1 parent 444cc04 commit 9abca04

8 files changed

Lines changed: 505 additions & 112 deletions

‎src/views/compute/CreateKubernetesCluster.vue‎

Lines changed: 77 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,39 @@
2222
:form="form"
2323
@submit="handleSubmit"
2424
layout="vertical">
25-
<a-form-item :label="$t('label.name')">
25+
<a-form-item>
26+
<span slot="label">
27+
{{ $t('label.name') }}
28+
<a-tooltip :title="apiParams.name.description">
29+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
30+
</a-tooltip>
31+
</span>
2632
<a-input
2733
v-decorator="['name', {
2834
rules: [{ required: true, message: 'Please enter Kubernetes cluster name' }]
2935
}]"
3036
:placeholder="apiParams.name.description"/>
3137
</a-form-item>
32-
<a-form-item :label="$t('label.description')">
38+
<a-form-item>
39+
<span slot="label">
40+
{{ $t('label.description') }}
41+
<a-tooltip :title="apiParams.description.description">
42+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
43+
</a-tooltip>
44+
</span>
3345
<a-input
3446
v-decorator="['description', {
3547
rules: [{ required: true, message: 'Please enter Kubernetes cluster description' }]
3648
}]"
3749
:placeholder="apiParams.description.description"/>
3850
</a-form-item>
39-
<a-form-item :label="$t('label.zoneid')">
51+
<a-form-item>
52+
<span slot="label">
53+
{{ $t('label.zoneid') }}
54+
<a-tooltip :title="apiParams.zoneid.description">
55+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
56+
</a-tooltip>
57+
</span>
4058
<a-select
4159
id="zone-selection"
4260
v-decorator="['zoneid', {
@@ -55,7 +73,13 @@
5573
</a-select-option>
5674
</a-select>
5775
</a-form-item>
58-
<a-form-item :label="$t('label.kubernetesversionid')">
76+
<a-form-item>
77+
<span slot="label">
78+
{{ $t('label.kubernetesversionid') }}
79+
<a-tooltip :title="apiParams.kubernetesversionid.description">
80+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
81+
</a-tooltip>
82+
</span>
5983
<a-select
6084
id="version-selection"
6185
v-decorator="['kubernetesversionid', {
@@ -74,7 +98,13 @@
7498
</a-select-option>
7599
</a-select>
76100
</a-form-item>
77-
<a-form-item :label="$t('label.serviceofferingid')">
101+
<a-form-item>
102+
<span slot="label">
103+
{{ $t('label.serviceofferingid') }}
104+
<a-tooltip :title="apiParams.serviceofferingid.description">
105+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
106+
</a-tooltip>
107+
</span>
78108
<a-select
79109
id="offering-selection"
80110
v-decorator="['serviceofferingid', {
@@ -92,7 +122,13 @@
92122
</a-select-option>
93123
</a-select>
94124
</a-form-item>
95-
<a-form-item :label="$t('label.noderootdisksize')">
125+
<a-form-item>
126+
<span slot="label">
127+
{{ $t('label.noderootdisksize') }}
128+
<a-tooltip :title="apiParams.noderootdisksize.description">
129+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
130+
</a-tooltip>
131+
</span>
96132
<a-input
97133
v-decorator="['noderootdisksize', {
98134
rules: [{
@@ -106,7 +142,13 @@
106142
}]"
107143
:placeholder="apiParams.noderootdisksize.description"/>
108144
</a-form-item>
109-
<a-form-item :label="$t('label.networkid')">
145+
<a-form-item>
146+
<span slot="label">
147+
{{ $t('label.networkid') }}
148+
<a-tooltip :title="apiParams.networkid.description">
149+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
150+
</a-tooltip>
151+
</span>
110152
<a-select
111153
id="network-selection"
112154
v-decorator="['networkid', {}]"
@@ -125,7 +167,13 @@
125167
<a-form-item :label="$t('label.haenable')" v-if="this.selectedKubernetesVersion != null && this.selectedKubernetesVersion != undefined && this.selectedKubernetesVersion.supportsha === true">
126168
<a-switch v-decorator="['haenable', {initialValue: this.haEnabled}]" :checked="this.haEnabled" @change="val => { this.haEnabled = val }" />
127169
</a-form-item>
128-
<a-form-item :label="$t('label.masternodes')" v-if="this.haEnabled">
170+
<a-form-item v-if="this.haEnabled">
171+
<span slot="label">
172+
{{ $t('label.masternodes') }}
173+
<a-tooltip :title="apiParams.masternodes.description">
174+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
175+
</a-tooltip>
176+
</span>
129177
<a-input
130178
v-decorator="['masternodes', {
131179
initialValue: '1',
@@ -142,12 +190,24 @@
142190
}]"
143191
:placeholder="apiParams.masternodes.description"/>
144192
</a-form-item>
145-
<a-form-item :label="$t('label.externalloadbalanceripaddress')" v-if="this.haEnabled">
193+
<a-form-item v-if="this.haEnabled">
194+
<span slot="label">
195+
{{ $t('label.externalloadbalanceripaddress') }}
196+
<a-tooltip :title="apiParams.externalloadbalanceripaddress.description">
197+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
198+
</a-tooltip>
199+
</span>
146200
<a-input
147201
v-decorator="['externalloadbalanceripaddress', {}]"
148202
:placeholder="apiParams.externalloadbalanceripaddress.description"/>
149203
</a-form-item>
150-
<a-form-item :label="$t('label.cks.cluster.size')">
204+
<a-form-item>
205+
<span slot="label">
206+
{{ $t('label.cks.cluster.size') }}
207+
<a-tooltip :title="apiParams.size.description">
208+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
209+
</a-tooltip>
210+
</span>
151211
<a-input
152212
v-decorator="['size', {
153213
initialValue: '1',
@@ -164,7 +224,13 @@
164224
}]"
165225
:placeholder="apiParams.size.description"/>
166226
</a-form-item>
167-
<a-form-item :label="$t('label.keypair')">
227+
<a-form-item>
228+
<span slot="label">
229+
{{ $t('label.keypair') }}
230+
<a-tooltip :title="apiParams.keypair.description">
231+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
232+
</a-tooltip>
233+
</span>
168234
<a-select
169235
id="keypair-selection"
170236
v-decorator="['keypair', {}]"

‎src/views/compute/KubernetesServiceTab.vue‎

Lines changed: 29 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -170,54 +170,32 @@ export default {
170170
}
171171
},
172172
created () {
173-
if (this.isAdminOrDomainAdmin()) {
174-
this.vmColumns = [
175-
{
176-
title: this.$t('label.name'),
177-
dataIndex: 'name',
178-
scopedSlots: { customRender: 'name' }
179-
},
180-
{
181-
title: this.$t('label.state'),
182-
dataIndex: 'state',
183-
scopedSlots: { customRender: 'state' }
184-
},
185-
{
186-
title: this.$t('label.instancename'),
187-
dataIndex: 'instancename'
188-
},
189-
{
190-
title: this.$t('label.ipaddress'),
191-
dataIndex: 'ipaddress'
192-
},
193-
{
194-
title: this.$t('label.zonename'),
195-
dataIndex: 'zonename'
196-
}
197-
]
198-
} else {
199-
this.vmColumns = [
200-
{
201-
title: this.$t('label.name'),
202-
dataIndex: 'name'
203-
},
204-
{
205-
title: this.$t('label.displayname'),
206-
dataIndex: 'displayname'
207-
},
208-
{
209-
title: this.$t('label.ipaddress'),
210-
dataIndex: 'ipaddress'
211-
},
212-
{
213-
title: this.$t('label.zonename'),
214-
dataIndex: 'zonename'
215-
},
216-
{
217-
title: this.$t('label.state'),
218-
dataIndex: 'state'
219-
}
220-
]
173+
this.vmColumns = [
174+
{
175+
title: this.$t('label.name'),
176+
dataIndex: 'name',
177+
scopedSlots: { customRender: 'name' }
178+
},
179+
{
180+
title: this.$t('label.state'),
181+
dataIndex: 'state',
182+
scopedSlots: { customRender: 'state' }
183+
},
184+
{
185+
title: this.$t('label.instancename'),
186+
dataIndex: 'instancename'
187+
},
188+
{
189+
title: this.$t('label.ipaddress'),
190+
dataIndex: 'ipaddress'
191+
},
192+
{
193+
title: this.$t('label.zonename'),
194+
dataIndex: 'zonename'
195+
}
196+
]
197+
if (!this.isAdmin()) {
198+
this.vmColumns = this.vmColumns.filter(x => x.dataIndex !== 'instancename')
221199
}
222200
},
223201
mounted () {
@@ -231,6 +209,9 @@ export default {
231209
}
232210
},
233211
methods: {
212+
isAdmin () {
213+
return ['Admin'].includes(this.$store.getters.userInfo.roletype)
214+
},
234215
isAdminOrDomainAdmin () {
235216
return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
236217
},

‎src/views/compute/ScaleKubernetesCluster.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@
2222
:form="form"
2323
@submit="handleSubmit"
2424
layout="vertical">
25-
<a-form-item :label="$t('label.cks.cluster.size')">
25+
<a-form-item>
26+
<span slot="label">
27+
{{ $t('label.cks.cluster.size') }}
28+
<a-tooltip :title="apiParams.size.description">
29+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
30+
</a-tooltip>
31+
</span>
2632
<a-input
2733
v-decorator="['size', {
2834
initialValue: originalSize,
@@ -37,7 +43,13 @@
3743
}]"
3844
:placeholder="apiParams.size.description"/>
3945
</a-form-item>
40-
<a-form-item :label="$t('label.serviceofferingid')">
46+
<a-form-item>
47+
<span slot="label">
48+
{{ $t('label.serviceofferingid') }}
49+
<a-tooltip :title="apiParams.serviceofferingid.description">
50+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
51+
</a-tooltip>
52+
</span>
4153
<a-select
4254
id="offering-selection"
4355
v-decorator="['serviceofferingid', {}]"

‎src/views/compute/UpgradeKubernetesCluster.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@
2222
:form="form"
2323
@submit="handleSubmit"
2424
layout="vertical">
25-
<a-form-item :label="$t('label.kubernetesversionid')">
25+
<a-form-item>
26+
<span slot="label">
27+
{{ $t('label.kubernetesversionid') }}
28+
<a-tooltip :title="apiParams.kubernetesversionid.description">
29+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
30+
</a-tooltip>
31+
</span>
2632
<a-select
2733
id="version-selection"
2834
v-decorator="['kubernetesversionid', {

‎src/views/image/AddKubernetesSupportedVersion.vue‎

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,39 @@
2222
:form="form"
2323
@submit="handleSubmit"
2424
layout="vertical">
25-
<a-form-item :label="$t('label.semanticversion')">
25+
<a-form-item>
26+
<span slot="label">
27+
{{ $t('label.semanticversion') }}
28+
<a-tooltip :title="apiParams.semanticversion.description">
29+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
30+
</a-tooltip>
31+
</span>
2632
<a-input
2733
v-decorator="['semanticversion', {
2834
rules: [{ required: true, message: 'Please enter Kubernetes semantic version' }]
2935
}]"
3036
:placeholder="apiParams.semanticversion.description"/>
3137
</a-form-item>
32-
<a-form-item :label="$t('label.name')">
38+
<a-form-item>
39+
<span slot="label">
40+
{{ $t('label.name') }}
41+
<a-tooltip :title="apiParams.name.description">
42+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
43+
</a-tooltip>
44+
</span>
3345
<a-input
3446
v-decorator="['name', {
3547
rules: [{ message: 'Please enter name' }]
3648
}]"
3749
:placeholder="$t('label.name')"/>
3850
</a-form-item>
39-
<a-form-item :label="$t('label.zoneid')">
51+
<a-form-item>
52+
<span slot="label">
53+
{{ $t('label.zoneid') }}
54+
<a-tooltip :title="apiParams.zoneid.description">
55+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
56+
</a-tooltip>
57+
</span>
4058
<a-select
4159
id="zone-selection"
4260
v-decorator="['zoneid', {
@@ -63,21 +81,39 @@
6381
</a-select-option>
6482
</a-select>
6583
</a-form-item>
66-
<a-form-item :label="$t('label.url')">
84+
<a-form-item>
85+
<span slot="label">
86+
{{ $t('label.url') }}
87+
<a-tooltip :title="apiParams.url.description">
88+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
89+
</a-tooltip>
90+
</span>
6791
<a-input
6892
v-decorator="['url', {
6993
rules: [{ required: true, message: 'Please enter binaries ISO URL' }]
7094
}]"
7195
:placeholder="apiParams.url.description" />
7296
</a-form-item>
73-
<a-form-item :label="$t('label.checksum')">
97+
<a-form-item>
98+
<span slot="label">
99+
{{ $t('label.checksum') }}
100+
<a-tooltip :title="apiParams.checksum.description">
101+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
102+
</a-tooltip>
103+
</span>
74104
<a-input
75105
v-decorator="['checksum', {
76106
rules: [{ required: false, message: 'Please enter input' }]
77107
}]"
78108
:placeholder="apiParams.checksum.description" />
79109
</a-form-item>
80-
<a-form-item :label="$t('label.mincpunumber')">
110+
<a-form-item>
111+
<span slot="label">
112+
{{ $t('label.mincpunumber') }}
113+
<a-tooltip :title="apiParams.mincpunumber.description">
114+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
115+
</a-tooltip>
116+
</span>
81117
<a-input
82118
v-decorator="['mincpunumber', {
83119
rules: [{ required: true, message: 'Please enter value' },
@@ -93,7 +129,13 @@
93129
}]"
94130
:placeholder="apiParams.mincpunumber.description"/>
95131
</a-form-item>
96-
<a-form-item :label="$t('label.minmemory')">
132+
<a-form-item>
133+
<span slot="label">
134+
{{ $t('label.minmemory') }}
135+
<a-tooltip :title="apiParams.minmemory.description">
136+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
137+
</a-tooltip>
138+
</span>
97139
<a-input
98140
v-decorator="['minmemory', {
99141
rules: [{ required: true, message: 'Please enter value' },

0 commit comments

Comments
 (0)