mirror of https://github.com/apache/cloudstack.git
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.
This commit is contained in:
Harikrishna
GitHub
parent
965d29a899
commit
0ad94ce58c
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue