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 <[email protected]>
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') {
