Skip to content

Commit 94503e6

Browse files
vishesh92vishesh92
authored
UI: improve ux and fix some minor bugs (apache#9307)
1 parent 6575375 commit 94503e6

File tree

8 files changed

+67
-35
lines changed

8 files changed

+67
-35
lines changed

‎ui/public/locales/en.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -581,6 +581,8 @@
581581
"label.create.tier.networkofferingid.description": "The Network offering for the Network Tier.",
582582
"label.create.tungsten.routing.policy": "Create Tungsten-Fabric routing policy",
583583
"label.create.user": "Create User",
584+
"label.create.vm": "Create Instance",
585+
"label.create.vm.and.stay": "Create Instance & stay on this page",
584586
"label.create.vpn.connection": "Create VPN connection",
585587
"label.created": "Created",
586588
"label.creating": "Creating",
@@ -621,6 +623,8 @@
621623
"label.default": "Default",
622624
"label.default.use": "Default use",
623625
"label.default.view": "Default view",
626+
"label.default.network.domain.isolated.network": "Default network domain for Isolated networks",
627+
"label.default.network.guestcidraddress.isolated.network": "Default guest CIDR for Isolated Networks",
624628
"label.defaultnetwork": "Default Network",
625629
"label.delete": "Delete",
626630
"label.delete.acl.list": "Delete ACL list",
@@ -1901,7 +1905,9 @@
19011905
"label.sessions": "Active client sessions",
19021906
"label.set.default.nic": "Set default NIC",
19031907
"label.set.reservation": "Set reservation",
1904-
"label.set.reservation.desc": "(optional) Please specify an Account to be associated with this IP range.<br/><br/>System VMs: Enable dedication of public IP range for SSVM and CPVM, Account field disabled. Reservation strictness defined on 'system.vm.public.ip.reservation.mode.strictness'.",
1908+
"label.set.reservation.desc": "You can make Public IP range public, or you can dedicate/reserve it for either an Account or for System VMs",
1909+
"label.set.reservation.account.desc": "Please specify an Account to be associated with this IP range.",
1910+
"label.set.reservation.systemvm.desc": "Enable dedication of public IP range for SSVM and CPVM. Reservation strictness defined on 'system.vm.public.ip.reservation.mode.strictness'.",
19051911
"label.setting": "Setting",
19061912
"label.settings": "Settings",
19071913
"label.setup": "Setup",

‎ui/src/components/view/InfoCard.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -479,11 +479,12 @@
479479
</div>
480480
</div>
481481
<div class="resource-detail-item" v-if="resource.publicip">
482-
<div class="resource-detail-item__label">{{ $t('label.publicip') }}</div>
482+
<div class="resource-detail-item__label">{{ $t('label.public.ip') }}</div>
483483
<div class="resource-detail-item__details">
484484
<gateway-outlined />
485485
<router-link v-if="resource.publicipid" :to="{ path: '/publicip/' + resource.publicipid }">{{ resource.publicip }} </router-link>
486-
<copy-label :label="resource.publicip"/>
486+
<copy-label v-if="resource.publicipid" :copyValue="resource.publicip" :showIcon=true />
487+
<copy-label v-else :label="resource.publicip" />
487488
</div>
488489
</div>
489490
<div class="resource-detail-item" v-if="resource.vpcid">

‎ui/src/components/widgets/CopyLabel.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<template>
1919
<span @click="$message.success($t('label.copied.clipboard') + ': ' + label)">
2020
<a-tooltip :title="tooltip ? tooltip : $t('label.copy')" :placement="tooltipPlacement">
21-
<a href="javascript:;" v-clipboard:copy="label">{{ label }}</a>
21+
<a href="javascript:;" v-clipboard:copy="copyValue === '' ? label : copyValue">{{ label }}&nbsp;<copy-outlined v-if="showIcon"/></a>
2222
</a-tooltip>
2323
</span>
2424
</template>
@@ -32,13 +32,21 @@ export default {
3232
type: String,
3333
default: ''
3434
},
35+
copyValue: {
36+
type: String,
37+
default: ''
38+
},
3539
tooltip: {
3640
type: String,
3741
default: ''
3842
},
3943
tooltipPlacement: {
4044
type: String,
4145
default: 'top'
46+
},
47+
showIcon: {
48+
type: Boolean,
49+
default: false
4250
}
4351
}
4452
}

‎ui/src/views/AutogenView.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,11 @@
229229
v-if="!(currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].value)"
230230
>
231231
<template #label>
232-
<tooltip-label :title="$t('label.' + field.name)" :tooltip="field.description"/>
232+
<tooltip-label
233+
v-if="['domain', 'guestcidraddress'].includes(field.name) && ['createZone', 'updateZone'].includes(currentAction.api)"
234+
:title="$t('label.default.network.' + field.name + '.isolated.network')"
235+
:tooltip="field.description"/>
236+
<tooltip-label v-else :title="$t('label.' + field.name)" :tooltip="field.description"/>
233237
</template>
234238

235239
<a-switch

‎ui/src/views/compute/DeployVM.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -815,13 +815,13 @@
815815
</a-button>
816816
<a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
817817
<rocket-outlined />
818-
{{ $t('label.launch.vm') }}
818+
{{ this.form.startvm ? $t('label.launch.vm') : $t('label.create.vm') }}
819819
<template #icon><down-outlined /></template>
820820
<template #overlay>
821821
<a-menu type="primary" @click="handleSubmitAndStay" theme="dark" class="btn-stay-on-page">
822822
<a-menu-item type="primary" key="1">
823823
<rocket-outlined />
824-
{{ $t('label.launch.vm.and.stay') }}
824+
{{ this.form.startvm ? $t('label.launch.vm.and.stay') : $t('label.create.vm.and.stay') }}
825825
</a-menu-item>
826826
</a-menu>
827827
</template>

‎ui/src/views/infra/network/IpRangesTabPublic.vue

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -246,35 +246,42 @@
246246
</a-form-item>
247247
</div>
248248
<div class="form__item" v-if="!basicGuestNetwork && form.iptype != 'ip6'">
249-
<div style="color: black;">{{ $t('label.set.reservation') }}</div>
249+
<tooltip-label :title="$t('label.set.reservation')" :tooltip="$t('label.set.reservation.desc')" class="tooltip-label-wrapper"/>
250+
<br/>
250251
<a-switch v-model:checked="showAccountFields" @change="handleShowAccountFields" />
251252
</div>
252253
<div v-if="showAccountFields && !basicGuestNetwork" style="margin-top: 20px;">
253-
<div v-html="$t('label.set.reservation.desc')"></div>
254-
<a-form-item name="forsystemvms" ref="forsystemvms" :label="$t('label.system.vms')" class="form__item">
254+
<a-form-item name="forsystemvms" ref="forsystemvms" class="form__item">
255+
<tooltip-label :title="$t('label.system.vms')" :tooltip="$t('label.set.reservation.systemvm.desc')" class="tooltip-label-wrapper"/>
256+
<br/>
255257
<a-switch v-model:checked="form.forsystemvms" />
256258
</a-form-item>
257-
<a-spin :spinning="domainsLoading">
258-
<a-form-item name="account" ref="account" :label="$t('label.account')" class="form__item">
259-
<a-input v-model:value="form.account"></a-input>
260-
</a-form-item>
261-
<a-form-item name="domain" ref="domain" :label="$t('label.domain')" class="form__item">
262-
<a-select
263-
v-model:value="form.domain"
264-
showSearch
265-
optionFilterProp="label"
266-
:filterOption="(input, option) => {
267-
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
268-
}" >
269-
<a-select-option
270-
v-for="domain in domains"
271-
:key="domain.id"
272-
:value="domain.id"
273-
:label="domain.path || domain.name || domain.description">{{ domain.path || domain.name || domain.description }}
274-
</a-select-option>
275-
</a-select>
276-
</a-form-item>
277-
</a-spin>
259+
<br/>
260+
<span v-if="!form.forsystemvms">
261+
<a-spin :spinning="domainsLoading">
262+
<a-form-item name="account" ref="account" class="form__item">
263+
<tooltip-label :title="$t('label.account')" :tooltip="$t('label.set.reservation.account.desc')" class="tooltip-label-wrapper"/>
264+
<br/>
265+
<a-input v-model:value="form.account"></a-input>
266+
</a-form-item>
267+
<a-form-item name="domain" ref="domain" :label="$t('label.domain')" class="form__item">
268+
<a-select
269+
v-model:value="form.domain"
270+
showSearch
271+
optionFilterProp="label"
272+
:filterOption="(input, option) => {
273+
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
274+
}" >
275+
<a-select-option
276+
v-for="domain in domains"
277+
:key="domain.id"
278+
:value="domain.id"
279+
:label="domain.path || domain.name || domain.description">{{ domain.path || domain.name || domain.description }}
280+
</a-select-option>
281+
</a-select>
282+
</a-form-item>
283+
</a-spin>
284+
</span>
278285
</div>
279286

280287
<div :span="24" class="action-button">
@@ -340,11 +347,13 @@
340347
import { ref, reactive, toRaw } from 'vue'
341348
import { api } from '@/api'
342349
import TooltipButton from '@/components/widgets/TooltipButton'
350+
import TooltipLabel from '@/components/widgets/TooltipLabel'
343351
344352
export default {
345353
name: 'IpRangesTabPublic',
346354
components: {
347-
TooltipButton
355+
TooltipButton,
356+
TooltipLabel
348357
},
349358
props: {
350359
resource: {
@@ -712,6 +721,10 @@ export default {
712721
}
713722
}
714723
724+
.tooltip-label-wrapper {
725+
color: rgba(0, 0, 0, 0.85);
726+
}
727+
715728
.ant-list-item {
716729
padding-top: 0;
717730
padding-bottom: 0;

‎ui/src/views/infra/zone/ZoneWizard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ export default {
232232
width: 100%;
233233
234234
@media (min-width: 1000px) {
235-
width: 800px;
235+
width: 1000px;
236236
}
237237
238238
:deep(.form-action) {

‎ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,15 +158,15 @@
158158
<a-form-item
159159
name="networkDomain"
160160
ref="networkDomain"
161-
:label="$t('label.network.domain')"
161+
:label="$t('label.default.network.domain.isolated.network')"
162162
v-bind="formItemLayout"
163163
has-feedback>
164164
<a-input v-model:value="form.networkDomain" />
165165
</a-form-item>
166166
<a-form-item
167167
name="guestcidraddress"
168168
ref="guestcidraddress"
169-
:label="$t('label.guest.cidr')"
169+
:label="$t('label.default.network.guestcidraddress.isolated.network')"
170170
v-bind="formItemLayout"
171171
v-if="isAdvancedZone && !securityGroupsEnabled"
172172
has-feedback>

0 commit comments

Comments
 (0)