UI - Deploy VM with params from the template, iso, network pages (#5653)

* deploy VM with params from the template, iso, network pages

* remove default-checked not necessary

Author: Hoang Nguyen

ui/src/views/AutogenView.vue

@@ -976,7 +976,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

ui/src/views/compute/DeployVM.vue

@@ -64,6 +64,7 @@
                       <a-select
                         v-else
                         v-decorator="['zoneid', {
+                          initialValue: selectedZone,
                           rules: [{ required: true, message: `${$t('message.error.select')}` }]
                         }]"
                         showSearch
@@ -767,8 +768,8 @@ export default {
         disksize: null
       },
       options: {
-        templates: [],
-        isos: [],
+        templates: {},
+        isos: {},
         hypervisors: [],
         serviceOfferings: [],
         diskOfferings: [],
@@ -834,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,
@@ -1054,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')
     },
@@ -1275,12 +1297,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)
@@ -1304,16 +1371,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 = [
@@ -1352,7 +1411,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()
@@ -1734,12 +1811,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)
@@ -1821,6 +1911,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) => {
@@ -1841,6 +1932,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) => {
@@ -1894,10 +1986,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 = {}
@@ -1916,6 +2007,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 = {
@@ -1926,7 +2020,11 @@ export default {
           this.fetchOptions(param, name, ['zones'])
         }
       })
-      this.fetchAllTemplates()
+      if (this.tabKey === 'templateid') {
+        this.fetchAllTemplates()
+      } else {
+        this.fetchAllIsos()
+      }
     },
     onSelectPodId (value) {
       this.podId = value

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