etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UI: improve ux and fix some minor bugs (#9307)

This commit is contained in:
Vishesh 2024-06-28 19:24:33 +05:30 committed by GitHub
parent 6575375537
commit 94503e687c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 67 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/public/locales/en.json
View File

@ -581,6 +581,8 @@
"label.create.tier.networkofferingid.description": "The Network offering for the Network Tier.",
"label.create.tungsten.routing.policy": "Create Tungsten-Fabric routing policy",
"label.create.user": "Create User",
"label.create.vm": "Create Instance",
"label.create.vm.and.stay": "Create Instance & stay on this page",
"label.create.vpn.connection": "Create VPN connection",
"label.created": "Created",
"label.creating": "Creating",
@ -621,6 +623,8 @@
"label.default": "Default",
"label.default.use": "Default use",
"label.default.view": "Default view",
"label.default.network.domain.isolated.network": "Default network domain for Isolated networks",
"label.default.network.guestcidraddress.isolated.network": "Default guest CIDR for Isolated Networks",
"label.defaultnetwork": "Default Network",
"label.delete": "Delete",
"label.delete.acl.list": "Delete ACL list",
@ -1901,7 +1905,9 @@
"label.sessions": "Active client sessions",
"label.set.default.nic": "Set default NIC",
"label.set.reservation": "Set reservation",
"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'.",
"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",
"label.set.reservation.account.desc": "Please specify an Account to be associated with this IP range.",
"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'.",
"label.setting": "Setting",
"label.settings": "Settings",
"label.setup": "Setup",

5
ui/src/components/view/InfoCard.vue
View File

@ -479,11 +479,12 @@
</div>
</div>
<div class="resource-detail-item" v-if="resource.publicip">
<div class="resource-detail-item__label">{{ $t('label.publicip') }}</div>
<div class="resource-detail-item__label">{{ $t('label.public.ip') }}</div>
<div class="resource-detail-item__details">
<gateway-outlined />
<router-link v-if="resource.publicipid" :to="{ path: '/publicip/' + resource.publicipid }">{{ resource.publicip }} </router-link>
<copy-label :label="resource.publicip"/>
<copy-label v-if="resource.publicipid" :copyValue="resource.publicip" :showIcon=true />
<copy-label v-else :label="resource.publicip" />
</div>
</div>
<div class="resource-detail-item" v-if="resource.vpcid">

10
ui/src/components/widgets/CopyLabel.vue
View File

@ -18,7 +18,7 @@
<template>
<span @click="$message.success($t('label.copied.clipboard') + ': ' + label)">
<a-tooltip :title="tooltip ? tooltip : $t('label.copy')" :placement="tooltipPlacement">
<a href="javascript:;" v-clipboard:copy="label">{{ label }}</a>
<a href="javascript:;" v-clipboard:copy="copyValue === '' ? label : copyValue">{{ label }}&nbsp;<copy-outlined v-if="showIcon"/></a>
</a-tooltip>
</span>
</template>
@ -32,6 +32,10 @@ export default {
type: String,
default: ''
},
copyValue: {
type: String,
default: ''
},
tooltip: {
type: String,
default: ''
@ -39,6 +43,10 @@ export default {
tooltipPlacement: {
type: String,
default: 'top'
},
showIcon: {
type: Boolean,
default: false
}
}
}

6
ui/src/views/AutogenView.vue
View File

@ -229,7 +229,11 @@
v-if="!(currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].value)"
>
<template #label>
<tooltip-label :title="$t('label.' + field.name)" :tooltip="field.description"/>
<tooltip-label
v-if="['domain', 'guestcidraddress'].includes(field.name) && ['createZone', 'updateZone'].includes(currentAction.api)"
:title="$t('label.default.network.' + field.name + '.isolated.network')"
:tooltip="field.description"/>
<tooltip-label v-else :title="$t('label.' + field.name)" :tooltip="field.description"/>
</template>
<a-switch

4
ui/src/views/compute/DeployVM.vue
View File

@ -815,13 +815,13 @@
</a-button>
<a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
<rocket-outlined />
{{ $t('label.launch.vm') }}
{{ this.form.startvm ? $t('label.launch.vm') : $t('label.create.vm') }}
<template #icon><down-outlined /></template>
<template #overlay>
<a-menu type="primary" @click="handleSubmitAndStay" theme="dark" class="btn-stay-on-page">
<a-menu-item type="primary" key="1">
<rocket-outlined />
{{ $t('label.launch.vm.and.stay') }}
{{ this.form.startvm ? $t('label.launch.vm.and.stay') : $t('label.create.vm.and.stay') }}
</a-menu-item>
</a-menu>
</template>

63
ui/src/views/infra/network/IpRangesTabPublic.vue
View File

@ -246,35 +246,42 @@
</a-form-item>
</div>
<div class="form__item" v-if="!basicGuestNetwork && form.iptype != 'ip6'">
<div style="color: black;">{{ $t('label.set.reservation') }}</div>
<tooltip-label :title="$t('label.set.reservation')" :tooltip="$t('label.set.reservation.desc')" class="tooltip-label-wrapper"/>
<br/>
<a-switch v-model:checked="showAccountFields" @change="handleShowAccountFields" />
</div>
<div v-if="showAccountFields && !basicGuestNetwork" style="margin-top: 20px;">
<div v-html="$t('label.set.reservation.desc')"></div>
<a-form-item name="forsystemvms" ref="forsystemvms" :label="$t('label.system.vms')" class="form__item">
<a-form-item name="forsystemvms" ref="forsystemvms" class="form__item">
<tooltip-label :title="$t('label.system.vms')" :tooltip="$t('label.set.reservation.systemvm.desc')" class="tooltip-label-wrapper"/>
<br/>
<a-switch v-model:checked="form.forsystemvms" />
</a-form-item>
<a-spin :spinning="domainsLoading">
<a-form-item name="account" ref="account" :label="$t('label.account')" class="form__item">
<a-input v-model:value="form.account"></a-input>
</a-form-item>
<a-form-item name="domain" ref="domain" :label="$t('label.domain')" class="form__item">
<a-select
v-model:value="form.domain"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="domain in domains"
:key="domain.id"
:value="domain.id"
:label="domain.path || domain.name || domain.description">{{ domain.path || domain.name || domain.description }}
</a-select-option>
</a-select>
</a-form-item>
</a-spin>
<br/>
<span v-if="!form.forsystemvms">
<a-spin :spinning="domainsLoading">
<a-form-item name="account" ref="account" class="form__item">
<tooltip-label :title="$t('label.account')" :tooltip="$t('label.set.reservation.account.desc')" class="tooltip-label-wrapper"/>
<br/>
<a-input v-model:value="form.account"></a-input>
</a-form-item>
<a-form-item name="domain" ref="domain" :label="$t('label.domain')" class="form__item">
<a-select
v-model:value="form.domain"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="domain in domains"
:key="domain.id"
:value="domain.id"
:label="domain.path || domain.name || domain.description">{{ domain.path || domain.name || domain.description }}
</a-select-option>
</a-select>
</a-form-item>
</a-spin>
</span>
</div>
<div :span="24" class="action-button">
@ -340,11 +347,13 @@
import { ref, reactive, toRaw } from 'vue'
import { api } from '@/api'
import TooltipButton from '@/components/widgets/TooltipButton'
import TooltipLabel from '@/components/widgets/TooltipLabel'
export default {
name: 'IpRangesTabPublic',
components: {
TooltipButton
TooltipButton,
TooltipLabel
},
props: {
resource: {
@ -712,6 +721,10 @@ export default {
}
}
.tooltip-label-wrapper {
color: rgba(0, 0, 0, 0.85);
}
.ant-list-item {
padding-top: 0;
padding-bottom: 0;

2
ui/src/views/infra/zone/ZoneWizard.vue
View File

@ -232,7 +232,7 @@ export default {
width: 100%;
@media (min-width: 1000px) {
width: 800px;
width: 1000px;
}
:deep(.form-action) {

4
ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
View File

@ -158,7 +158,7 @@
<a-form-item
name="networkDomain"
ref="networkDomain"
:label="$t('label.network.domain')"
:label="$t('label.default.network.domain.isolated.network')"
v-bind="formItemLayout"
has-feedback>
<a-input v-model:value="form.networkDomain" />
@ -166,7 +166,7 @@
<a-form-item
name="guestcidraddress"
ref="guestcidraddress"
:label="$t('label.guest.cidr')"
:label="$t('label.default.network.guestcidraddress.isolated.network')"
v-bind="formItemLayout"
v-if="isAdvancedZone && !securityGroupsEnabled"
has-feedback>