From de7a4d0833697fb6286f28f065a3e962a148cae3 Mon Sep 17 00:00:00 2001 From: utchoang Date: Tue, 2 Nov 2021 10:49:23 +0700 Subject: [PATCH 1/3] deploy VM with params from the template, iso, network pages --- ui/src/views/AutogenView.vue | 18 +- ui/src/views/compute/DeployVM.vue | 165 ++++++++++++++---- .../views/compute/wizard/NetworkSelection.vue | 4 + .../compute/wizard/TemplateIsoSelection.vue | 14 +- 4 files changed, 162 insertions(+), 39 deletions(-) diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue index 24eedf9f49bf..4f53183abba7 100644 --- a/ui/src/views/AutogenView.vue +++ b/ui/src/views/AutogenView.vue @@ -960,7 +960,23 @@ export default { this.form = this.$form.createForm(this) this.formModel = {} if (action.component && action.api && !action.popup) { - this.$router.push({ name: action.api }) + const query = {} + if (this.$route.path.startsWith('/vm')) { + switch (true) { + case ('templateid' in this.$route.query): + query.templateid = this.$route.query.templateid + break + case ('isoid' in this.$route.query): + query.isoid = this.$route.query.isoid + break + case ('networkid' in this.$route.query): + query.networkid = this.$route.query.networkid + break + default: + break + } + } + this.$router.push({ name: action.api, query }) return } this.currentAction = action diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue index 00ed65f6c20e..0081885551d3 100644 --- a/ui/src/views/compute/DeployVM.vue +++ b/ui/src/views/compute/DeployVM.vue @@ -64,6 +64,7 @@ @@ -766,8 +768,8 @@ export default { disksize: null }, options: { - templates: [], - isos: [], + templates: {}, + isos: {}, hypervisors: [], serviceOfferings: [], diskOfferings: [], @@ -833,16 +835,6 @@ export default { defaultnetworkid: '', networkConfig: [], dataNetworkCreated: [], - tabList: [ - { - key: 'templateid', - tab: this.$t('label.templates') - }, - { - key: 'isoid', - tab: this.$t('label.isos') - } - ], tabKey: 'templateid', dataPreFill: {}, showDetails: false, @@ -1053,9 +1045,40 @@ export default { templateConfigurationExists () { return this.vm.templateid && this.templateConfigurations && this.templateConfigurations.length > 0 }, + templateId () { + return this.$route.query.templateid || null + }, + isoId () { + return this.$route.query.isoid || null + }, networkId () { return this.$route.query.networkid || null }, + tabList () { + let tabList = [] + if (this.templateId) { + tabList = [{ + key: 'templateid', + tab: this.$t('label.templates') + }] + } else if (this.isoId) { + tabList = [{ + key: 'isoid', + tab: this.$t('label.isos') + }] + } else { + tabList = [{ + key: 'templateid', + tab: this.$t('label.templates') + }, + { + key: 'isoid', + tab: this.$t('label.isos') + }] + } + + return tabList + }, showSecurityGroupSection () { return (this.networks.length > 0 && this.zone.securitygroupsenabled) || (this.zone && this.zone.networktype === 'Basic') }, @@ -1269,12 +1292,57 @@ export default { }, fillValue (field) { this.form.getFieldDecorator([field], { initialValue: this.dataPreFill[field] }) + this.form.setFieldsValue({ [field]: this.dataPreFill[field] }) + }, + fetchZoneByQuery () { + return new Promise(resolve => { + let zones = [] + let apiName = '' + const params = {} + if (this.templateId) { + apiName = 'listTemplates' + params.listall = true + params.templatefilter = 'all' + params.id = this.templateId + } else if (this.isoId) { + params.listall = true + params.isofilter = 'all' + params.id = this.isoId + apiName = 'listIsos' + } else if (this.networkId) { + params.listall = true + params.id = this.networkId + apiName = 'listNetworks' + } + + api(apiName, params).then(json => { + let objectName + const responseName = [apiName.toLowerCase(), 'response'].join('') + for (const key in json[responseName]) { + if (key === 'count') { + continue + } + objectName = key + break + } + const data = json?.[responseName]?.[objectName] || [] + zones = data.map(item => item.zoneid) + return resolve(zones) + }).catch(() => { + return resolve(zones) + }) + }) }, - fetchData () { - this.fetchZones() + async fetchData () { + const zones = await this.fetchZoneByQuery() + if (zones && zones.length === 1) { + this.selectedZone = zones[0] + this.dataPreFill.zoneid = zones[0] + } if (this.dataPreFill.zoneid) { this.fetchDataByZone(this.dataPreFill.zoneid) } else { + this.fetchZones(null, zones) _.each(this.params, (param, name) => { if (param.isLoad) { this.fetchOptions(param, name) @@ -1298,16 +1366,8 @@ export default { }, async fetchDataByZone (zoneId) { this.fillValue('zoneid') - this.options.zones = await this.fetchZones() - this.zoneId = zoneId - this.zoneSelected = true - this.tabKey = 'templateid' - await _.each(this.params, (param, name) => { - if (!('isLoad' in param) || param.isLoad) { - this.fetchOptions(param, name, ['zones']) - } - }) - await this.fetchAllTemplates() + this.options.zones = await this.fetchZones(zoneId) + this.onSelectZoneId(zoneId) }, fetchBootTypes () { this.options.bootTypes = [ @@ -1346,7 +1406,25 @@ export default { this.fetchOptions(param, 'networks') }, resetData () { - this.vm = {} + this.vm = { + name: null, + zoneid: null, + zonename: null, + hypervisor: null, + templateid: null, + templatename: null, + keyboard: null, + keypair: null, + group: null, + affinitygroupids: [], + affinitygroup: [], + serviceofferingid: null, + serviceofferingname: null, + ostypeid: null, + ostypename: null, + rootdisksize: null, + disksize: null + } this.zoneSelected = false this.form.resetFields() this.fetchData() @@ -1722,12 +1800,25 @@ export default { }) }) }, - fetchZones () { + fetchZones (zoneId, listZoneAllow) { + this.zones = [] return new Promise((resolve) => { this.loading.zones = true const param = this.params.zones - api(param.list, { listall: true, showicon: true }).then(json => { - this.zones = json.listzonesresponse.zone || [] + const args = { listall: true, showicon: true } + if (zoneId) args.id = zoneId + api(param.list, args).then(json => { + const zoneResponse = json.listzonesresponse.zone || [] + if (listZoneAllow && listZoneAllow.length > 0) { + zoneResponse.map(zone => { + if (listZoneAllow.includes(zone.id)) { + this.zones.push(zone) + } + }) + } else { + this.zones = zoneResponse + } + resolve(this.zones) }).catch(function (error) { console.log(error.stack) @@ -1809,6 +1900,7 @@ export default { args.templatefilter = templateFilter args.details = 'all' args.showicon = 'true' + args.id = this.templateId return new Promise((resolve, reject) => { api('listTemplates', args).then((response) => { @@ -1829,6 +1921,7 @@ export default { args.isoFilter = isoFilter args.bootable = true args.showicon = 'true' + args.id = this.isoId return new Promise((resolve, reject) => { api('listIsos', args).then((response) => { @@ -1882,10 +1975,9 @@ export default { }) }, filterOption (input, option) { - console.log(option) - // return ( - // option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 - // ) + return ( + option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 + ) }, onSelectZoneId (value) { this.dataPreFill = {} @@ -1904,6 +1996,9 @@ export default { isoid: undefined }) this.tabKey = 'templateid' + if (this.isoId) { + this.tabKey = 'isoid' + } _.each(this.params, (param, name) => { if (this.networkId && name === 'networks') { param.options = { @@ -1914,7 +2009,11 @@ export default { this.fetchOptions(param, name, ['zones']) } }) - this.fetchAllTemplates() + if (this.tabKey === 'templateid') { + this.fetchAllTemplates() + } else { + this.fetchAllIsos() + } }, onSelectPodId (value) { this.podId = value diff --git a/ui/src/views/compute/wizard/NetworkSelection.vue b/ui/src/views/compute/wizard/NetworkSelection.vue index 494bddbd5db3..8c5c31f1d7c8 100644 --- a/ui/src/views/compute/wizard/NetworkSelection.vue +++ b/ui/src/views/compute/wizard/NetworkSelection.vue @@ -132,6 +132,10 @@ export default { preFillContent: { type: Object, default: () => {} + }, + defaultSelected: { + type: String, + default: () => '' } }, data () { diff --git a/ui/src/views/compute/wizard/TemplateIsoSelection.vue b/ui/src/views/compute/wizard/TemplateIsoSelection.vue index 323af75c3cf9..13ec9f2b0dba 100644 --- a/ui/src/views/compute/wizard/TemplateIsoSelection.vue +++ b/ui/src/views/compute/wizard/TemplateIsoSelection.vue @@ -64,10 +64,6 @@ export default { type: String, default: '' }, - selected: { - type: String, - default: '' - }, loading: { type: Boolean, default: false @@ -75,6 +71,10 @@ export default { preFillContent: { type: Object, default: () => {} + }, + defaultChecked: { + type: String, + default: '' } }, data () { @@ -105,7 +105,11 @@ export default { if (items[filter.id] && items[filter.id][key] && items[filter.id][key].length > 0) { if (!this.pagination) { this.filterType = filter.id - this.checkedValue = items[filter.id][key][0].id + if (!this.checkedValue && this.defaultChecked) { + this.checkedValue = this.defaultChecked + } else { + this.checkedValue = items[filter.id][key][0].id + } } break } From 18cb7f5d56693bc59b632d60429f142c705b888d Mon Sep 17 00:00:00 2001 From: utchoang Date: Tue, 2 Nov 2021 13:48:48 +0700 Subject: [PATCH 2/3] remove default-checked not necessary --- ui/src/views/compute/DeployVM.vue | 1 - ui/src/views/compute/wizard/TemplateIsoSelection.vue | 10 +--------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue index 0081885551d3..fe21b88708d6 100644 --- a/ui/src/views/compute/DeployVM.vue +++ b/ui/src/views/compute/DeployVM.vue @@ -143,7 +143,6 @@ :selected="tabKey" :loading="loading.templates" :preFillContent="dataPreFill" - :defaultChecked="templateId" @handle-search-filter="($event) => fetchAllTemplates($event)" @update-template-iso="updateFieldValue" /> diff --git a/ui/src/views/compute/wizard/TemplateIsoSelection.vue b/ui/src/views/compute/wizard/TemplateIsoSelection.vue index 13ec9f2b0dba..25e014da7aad 100644 --- a/ui/src/views/compute/wizard/TemplateIsoSelection.vue +++ b/ui/src/views/compute/wizard/TemplateIsoSelection.vue @@ -71,10 +71,6 @@ export default { preFillContent: { type: Object, default: () => {} - }, - defaultChecked: { - type: String, - default: '' } }, data () { @@ -105,11 +101,7 @@ export default { if (items[filter.id] && items[filter.id][key] && items[filter.id][key].length > 0) { if (!this.pagination) { this.filterType = filter.id - if (!this.checkedValue && this.defaultChecked) { - this.checkedValue = this.defaultChecked - } else { - this.checkedValue = items[filter.id][key][0].id - } + this.checkedValue = items[filter.id][key][0].id } break } From 1a7b74c06627531f5373574a780fcca07a6ebbf4 Mon Sep 17 00:00:00 2001 From: utchoang Date: Tue, 2 Nov 2021 13:50:36 +0700 Subject: [PATCH 3/3] remove default-checked not necessary --- ui/src/views/compute/wizard/NetworkSelection.vue | 4 ---- 1 file changed, 4 deletions(-) diff --git a/ui/src/views/compute/wizard/NetworkSelection.vue b/ui/src/views/compute/wizard/NetworkSelection.vue index 8c5c31f1d7c8..494bddbd5db3 100644 --- a/ui/src/views/compute/wizard/NetworkSelection.vue +++ b/ui/src/views/compute/wizard/NetworkSelection.vue @@ -132,10 +132,6 @@ export default { preFillContent: { type: Object, default: () => {} - }, - defaultSelected: { - type: String, - default: () => '' } }, data () {