You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by ro...@apache.org on 2023/04/11 11:33:29 UTC
[cloudstack] branch 4.18 updated: ui: CreateNetwork isolated/L2 form, added accounts list under selected domain (#7393)
This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch 4.18
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.18 by this push:
new 0ad94ce58c9 ui: CreateNetwork isolated/L2 form, added accounts list under selected domain (#7393)
0ad94ce58c9 is described below
commit 0ad94ce58c9a374efa0d21639a53938044e5f364
Author: Harikrishna <ha...@gmail.com>
AuthorDate: Tue Apr 11 17:03:21 2023 +0530
ui: CreateNetwork isolated/L2 form, added accounts list under selected domain (#7393)
Currently create network form takes account name (manual entry) as one of the parameters. During network creation we check if the given account name is under selected domain.
Here with this PR we are listing accounts under the selected domain.
---
ui/src/views/network/CreateIsolatedNetworkForm.vue | 90 ++++++++++++++++------
ui/src/views/network/CreateL2NetworkForm.vue | 65 +++++++++++++---
2 files changed, 119 insertions(+), 36 deletions(-)
diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index 36d5e7cf516..d42dc90d823 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -85,6 +85,36 @@
</a-select-option>
</a-select>
</a-form-item>
+ <a-form-item ref="account" name="account" v-if="accountVisible">
+ <template #label>
+ <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
+ </template>
+ <a-select
+ v-model:value="form.account"
+ showSearch
+ optionFilterProp="label"
+ :filterOption="(input, option) => {
+ return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+ }"
+ :loading="accountLoading"
+ :placeholder="apiParams.account.description"
+ @change="val => { handleAccountChange(accounts[val]) }">
+ <a-select-option v-for="(opt, optIndex) in accounts" :key="optIndex">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ ref="networkdomain"
+ name="networkdomain"
+ v-if="!isObjectEmpty(selectedNetworkOffering) && !selectedNetworkOffering.forvpc">
+ <template #label>
+ <tooltip-label :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
+ </template>
+ <a-input
+ v-model:value="form.networkdomain"
+ :placeholder="apiParams.networkdomain.description"/>
+ </a-form-item>
<a-form-item ref="networkofferingid" name="networkofferingid">
<template #label>
<tooltip-label :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
@@ -261,28 +291,6 @@
</a-col>
</a-row>
</div>
- <a-form-item
- ref="networkdomain"
- name="networkdomain"
- v-if="!isObjectEmpty(selectedNetworkOffering) && !selectedNetworkOffering.forvpc">
- <template #label>
- <tooltip-label :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
- </template>
- <a-input
- v-model:value="form.networkdomain"
- :placeholder="apiParams.networkdomain.description"/>
- </a-form-item>
- <a-form-item
- ref="account"
- name="account"
- v-if="accountVisible">
- <template #label>
- <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
- </template>
- <a-input
- v-model:value="form.account"
- :placeholder="apiParams.account.description"/>
- </a-form-item>
<div :span="24" class="action-button">
<a-button
:loading="actionLoading"
@@ -339,6 +347,10 @@ export default {
domains: [],
domainLoading: false,
selectedDomain: {},
+ accountVisible: isAdminOrDomainAdmin(),
+ accounts: [],
+ accountLoading: false,
+ selectedAccount: {},
zones: [],
zoneLoading: false,
selectedZone: {},
@@ -348,7 +360,6 @@ export default {
vpcs: [],
vpcLoading: false,
selectedVpc: {},
- accountVisible: isAdminOrDomainAdmin(),
privateMtuMax: 1500,
publicMtuMax: 1500,
minMTU: 68,
@@ -466,8 +477,12 @@ export default {
this.accountVisible = domain.id !== '-1'
if (isAdminOrDomainAdmin()) {
this.updateVPCCheckAndFetchNetworkOfferingData()
+ this.fetchAccounts()
}
},
+ handleAccountChange (account) {
+ this.selectedAccount = account
+ },
updateVPCCheckAndFetchNetworkOfferingData () {
if (this.vpc !== null) { // from VPC section
this.fetchNetworkOfferingData(true)
@@ -544,6 +559,31 @@ export default {
}
})
},
+ fetchAccounts () {
+ this.accountLoading = true
+ var params = {}
+ if (isAdminOrDomainAdmin() && this.selectedDomain.id !== '-1') { // domain is visible only for admins
+ params.domainid = this.selectedDomain.id
+ }
+ this.accounts = [
+ {
+ id: '-1',
+ name: ' '
+ }
+ ]
+ this.selectedAccount = {}
+ api('listAccounts', params).then(json => {
+ const listAccounts = json.listaccountsresponse.account || []
+ this.accounts = this.accounts.concat(listAccounts)
+ }).catch(error => {
+ this.$notifyError(error)
+ }).finally(() => {
+ this.accountLoading = false
+ if (this.arrayHasItems(this.accounts)) {
+ this.form.account = null
+ }
+ })
+ },
handleSubmit () {
if (this.actionLoading) return
this.formRef.value.validate().then(() => {
@@ -570,8 +610,8 @@ export default {
}
if ('domainid' in values && values.domainid > 0) {
params.domainid = this.selectedDomain.id
- if (this.isValidTextValueForKey(values, 'account')) {
- params.account = values.account
+ if (this.isValidTextValueForKey(values, 'account') && this.selectedAccount.id !== '-1') {
+ params.account = this.selectedAccount.name
}
}
api('createNetwork', params).then(json => {
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index 1aae3955c94..56d34b2a6bc 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -89,6 +89,25 @@
</a-select-option>
</a-select>
</a-form-item>
+ <a-form-item v-if="accountVisible" name="account" ref="account">
+ <template #label>
+ <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
+ </template>
+ <a-select
+ v-model:value="form.account"
+ showSearch
+ optionFilterProp="label"
+ :filterOption="(input, option) => {
+ return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+ }"
+ :loading="accountLoading"
+ :placeholder="apiParams.account.description"
+ @change="val => { handleAccountChange(accounts[val]) }">
+ <a-select-option v-for="(opt, optIndex) in accounts" :key="optIndex">
+ {{ opt.name || opt.description }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
<a-form-item name="networkofferingid" ref="networkofferingid">
<template #label>
<tooltip-label :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
@@ -164,14 +183,6 @@
v-model:value="form.isolatedpvlan"
:placeholder="apiParams.isolatedpvlan.description"/>
</a-form-item>
- <a-form-item v-if="accountVisible" name="account" ref="account">
- <template #label>
- <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/>
- </template>
- <a-input
- v-model:value="form.account"
- :placeholder="apiParams.account.description"/>
- </a-form-item>
<div :span="24" class="action-button">
<a-button
:loading="actionLoading"
@@ -227,13 +238,16 @@ export default {
domains: [],
domainLoading: false,
selectedDomain: {},
+ accountVisible: isAdminOrDomainAdmin(),
+ accounts: [],
+ accountLoading: false,
+ selectedAccount: {},
zones: [],
zoneLoading: false,
selectedZone: {},
networkOfferings: [],
networkOfferingLoading: false,
selectedNetworkOffering: {},
- accountVisible: isAdminOrDomainAdmin(),
isolatePvlanType: 'none'
}
},
@@ -336,8 +350,12 @@ export default {
this.accountVisible = domain.id !== '-1'
if (isAdminOrDomainAdmin()) {
this.updateVPCCheckAndFetchNetworkOfferingData()
+ this.fetchAccounts()
}
},
+ handleAccountChange (account) {
+ this.selectedAccount = account
+ },
updateVPCCheckAndFetchNetworkOfferingData () {
if (this.vpc !== null) { // from VPC section
this.fetchNetworkOfferingData(true)
@@ -390,6 +408,31 @@ export default {
handleNetworkOfferingChange (networkOffering) {
this.selectedNetworkOffering = networkOffering
},
+ fetchAccounts () {
+ this.accountLoading = true
+ var params = {}
+ if (isAdminOrDomainAdmin() && this.selectedDomain.id !== '-1') { // domain is visible only for admins
+ params.domainid = this.selectedDomain.id
+ }
+ this.accounts = [
+ {
+ id: '-1',
+ name: ' '
+ }
+ ]
+ this.selectedAccount = {}
+ api('listAccounts', params).then(json => {
+ const listAccounts = json.listaccountsresponse.account || []
+ this.accounts = this.accounts.concat(listAccounts)
+ }).catch(error => {
+ this.$notifyError(error)
+ }).finally(() => {
+ this.accountLoading = false
+ if (this.arrayHasItems(this.accounts)) {
+ this.form.account = null
+ }
+ })
+ },
handleSubmit (e) {
if (this.actionLoading) return
this.formRef.value.validate().then(() => {
@@ -410,8 +453,8 @@ export default {
}
if ('domainid' in values && values.domainid > 0) {
params.domainid = this.selectedDomain.id
- if (this.isValidTextValueForKey(values, 'account')) {
- params.account = values.account
+ if (this.isValidTextValueForKey(values, 'account') && this.selectedAccount.id !== '-1') {
+ params.account = this.selectedAccount.name
}
}
if (this.isValidValueForKey(values, 'isolatedpvlantype') && values.isolatedpvlantype !== 'none') {