This is an automated email from the ASF dual-hosted git repository.
weizhou pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/main by this push:
new 7049a6058d2 UI: Add domain and account fields to Register/Upload
Template/ISO view (#7872)
7049a6058d2 is described below
commit 7049a6058d2fedf96764ef4c709dde23a5431de1
Author: Nicolas Vazquez <[email protected]>
AuthorDate: Thu Aug 17 10:22:34 2023 -0300
UI: Add domain and account fields to Register/Upload Template/ISO view
(#7872)
* UI: Add missing domain and account parameters to register template
* Only display the domain if listDomains API is accessible
* Add fields to Register ISO view
---
ui/src/views/image/RegisterOrUploadIso.vue | 89 ++++++++++++++++++++++++-
ui/src/views/image/RegisterOrUploadTemplate.vue | 86 ++++++++++++++++++++++++
2 files changed, 174 insertions(+), 1 deletion(-)
diff --git a/ui/src/views/image/RegisterOrUploadIso.vue
b/ui/src/views/image/RegisterOrUploadIso.vue
index c56dcd8aa7b..6c34ec8972a 100644
--- a/ui/src/views/image/RegisterOrUploadIso.vue
+++ b/ui/src/views/image/RegisterOrUploadIso.vue
@@ -97,6 +97,48 @@
</a-select>
</a-form-item>
+ <a-form-item name="domainid" ref="domainid" v-if="'listDomains' in
$store.getters.apis">
+ <template #label>
+ <tooltip-label :title="$t('label.domainid')"
:tooltip="apiParams.domainid.description"/>
+ </template>
+ <a-select
+ v-model:value="form.domainid"
+ showSearch
+ optionFilterProp="label"
+ :filterOption="(input, option) => {
+ return option.label.toLowerCase().indexOf(input.toLowerCase())
>= 0
+ }"
+ :loading="domainLoading"
+ :placeholder="apiParams.domainid.description"
+ @change="val => { handleDomainChange(val) }">
+ <a-select-option v-for="(opt, optIndex) in this.domains"
:key="optIndex" :label="opt.path || opt.name || opt.description"
:value="opt.id">
+ <span>
+ <resource-icon v-if="opt && opt.icon"
:image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
+ <block-outlined v-else style="margin-right: 5px" />
+ {{ opt.path || opt.name || opt.description }}
+ </span>
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item name="account" ref="account" v-if="domainid">
+ <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.value.toLowerCase().indexOf(input.toLowerCase())
>= 0
+ }"
+ :placeholder="apiParams.account.description"
+ @change="val => { handleAccountChange(val) }">
+ <a-select-option v-for="(acc, index) in accounts"
:value="acc.name" :key="index">
+ {{ acc.name }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+
<a-form-item ref="bootable" name="bootable"
:label="$t('label.bootable')">
<a-switch v-model:checked="form.bootable" />
</a-form-item>
@@ -229,7 +271,12 @@ export default {
allowed: false,
uploadParams: null,
uploadPercentage: 0,
- currentForm: ['plus-outlined',
'PlusOutlined'].includes(this.action.currentAction.icon) ? 'Create' : 'Upload'
+ currentForm: ['plus-outlined',
'PlusOutlined'].includes(this.action.currentAction.icon) ? 'Create' : 'Upload',
+ domains: [],
+ accounts: [],
+ domainLoading: false,
+ domainid: null,
+ account: null
}
},
beforeCreate () {
@@ -270,6 +317,9 @@ export default {
this.fetchOsType()
this.fetchUserData()
this.fetchUserdataPolicy()
+ if ('listDomains' in this.$store.getters.apis) {
+ this.fetchDomains()
+ }
},
fetchZoneData () {
const params = {}
@@ -478,6 +528,43 @@ export default {
}).finally(() => {
this.loading = false
})
+ },
+ fetchDomains () {
+ const params = {}
+ params.listAll = true
+ params.showicon = true
+ params.details = 'min'
+ this.domainLoading = true
+ api('listDomains', params).then(json => {
+ this.domains = json.listdomainsresponse.domain
+ }).finally(() => {
+ this.domainLoading = false
+ this.handleDomainChange(null)
+ })
+ },
+ handleDomainChange (domain) {
+ this.domainid = domain
+ this.form.account = null
+ this.account = null
+ if ('listAccounts' in this.$store.getters.apis) {
+ this.fetchAccounts()
+ }
+ },
+ fetchAccounts () {
+ api('listAccounts', {
+ domainid: this.domainid
+ }).then(response => {
+ this.accounts = response.listaccountsresponse.account || []
+ }).catch(error => {
+ this.$notifyError(error)
+ })
+ },
+ handleAccountChange (acc) {
+ if (acc) {
+ this.account = acc.name
+ } else {
+ this.account = acc
+ }
}
}
}
diff --git a/ui/src/views/image/RegisterOrUploadTemplate.vue
b/ui/src/views/image/RegisterOrUploadTemplate.vue
index 06ca207a0ab..f9578d4714d 100644
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@@ -117,6 +117,47 @@
</a-select>
</a-form-item>
</div>
+ <a-form-item name="domainid" ref="domainid" v-if="'listDomains' in
$store.getters.apis">
+ <template #label>
+ <tooltip-label :title="$t('label.domainid')"
:tooltip="apiParams.domainid.description"/>
+ </template>
+ <a-select
+ v-model:value="form.domainid"
+ showSearch
+ optionFilterProp="label"
+ :filterOption="(input, option) => {
+ return option.label.toLowerCase().indexOf(input.toLowerCase())
>= 0
+ }"
+ :loading="domainLoading"
+ :placeholder="apiParams.domainid.description"
+ @change="val => { handleDomainChange(val) }">
+ <a-select-option v-for="(opt, optIndex) in this.domains"
:key="optIndex" :label="opt.path || opt.name || opt.description"
:value="opt.id">
+ <span>
+ <resource-icon v-if="opt && opt.icon"
:image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
+ <block-outlined v-else style="margin-right: 5px" />
+ {{ opt.path || opt.name || opt.description }}
+ </span>
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item name="account" ref="account" v-if="domainid">
+ <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.value.toLowerCase().indexOf(input.toLowerCase())
>= 0
+ }"
+ :placeholder="apiParams.account.description"
+ @change="val => { handleAccountChange(val) }">
+ <a-select-option v-for="(acc, index) in accounts"
:value="acc.name" :key="index">
+ {{ acc.name }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
<a-row :gutter="12">
<a-col :md="24" :lg="12">
<a-form-item ref="hypervisor" name="hypervisor"
:label="$t('label.hypervisor')">
@@ -410,6 +451,11 @@ export default {
allowDirectDownload: false,
uploadParams: null,
currentForm: ['plus-outlined',
'PlusOutlined'].includes(this.action.currentAction.icon) ? 'Create' : 'Upload',
+ domains: [],
+ accounts: [],
+ domainLoading: false,
+ domainid: null,
+ account: null,
customHypervisorName: 'Custom'
}
},
@@ -463,6 +509,9 @@ export default {
this.fetchOsTypes()
this.fetchUserData()
this.fetchUserdataPolicy()
+ if ('listDomains' in this.$store.getters.apis) {
+ this.fetchDomains()
+ }
if (Object.prototype.hasOwnProperty.call(store.getters.apis,
'listConfigurations')) {
if (this.allowed && this.hyperXenServerShow) {
this.fetchXenServerProvider()
@@ -1026,6 +1075,43 @@ export default {
arrSelectReset.forEach(name => {
this.form[name] = undefined
})
+ },
+ fetchDomains () {
+ const params = {}
+ params.listAll = true
+ params.showicon = true
+ params.details = 'min'
+ this.domainLoading = true
+ api('listDomains', params).then(json => {
+ this.domains = json.listdomainsresponse.domain
+ }).finally(() => {
+ this.domainLoading = false
+ this.handleDomainChange(null)
+ })
+ },
+ handleDomainChange (domain) {
+ this.domainid = domain
+ this.form.account = null
+ this.account = null
+ if ('listAccounts' in this.$store.getters.apis) {
+ this.fetchAccounts()
+ }
+ },
+ fetchAccounts () {
+ api('listAccounts', {
+ domainid: this.domainid
+ }).then(response => {
+ this.accounts = response.listaccountsresponse.account || []
+ }).catch(error => {
+ this.$notifyError(error)
+ })
+ },
+ handleAccountChange (acc) {
+ if (acc) {
+ this.account = acc.name
+ } else {
+ this.account = acc
+ }
}
}
}
