UI support for deploy VM fro volume/snapshot

ui support to deploy a virtual machine with existing volume or a disk
snapshot

Author: slavkap

ui/public/locales/en.json

@@ -3548,6 +3548,7 @@
 "message.shutdown.triggered": "Shutdown has been triggered. This Management Server will not accept new jobs",
 "message.maintenance.initiated": "Maintenance has been initiated. This Management Server will not accept new jobs",
 "message.snapshot.additional.zones": "Snapshots will always be created in its native zone - %x, here you can select additional zone(s) where it will be copied to at creation time",
+"message.snapshot.desc": "Snapshot to create a ROOT disk from",
 "message.sourcenatip.change.warning": "WARNING: Changing the sourcenat IP address of the network will cause connectivity downtime for the Instances with NICs in the Network.",
 "message.sourcenatip.change.inhibited": "Changing the sourcenat to this IP of the Network to this address is inhibited as firewall rules are defined for it. This can include port forwarding or load balancing rules.\n - If this is an Isolated Network, please use updateNetwork/click the edit button.\n - If this is a VPC, first clear all other rules for this address.",
 "message.specify.tag.key": "Please specify a tag key.",
@@ -3783,6 +3784,7 @@
 "message.vnf.nic.move.down.fail": "Failed to move down this NIC",
 "message.vnf.no.credentials": "No credentials found for the VNF appliance.",
 "message.vnf.select.networks": "Please select the relevant network for each VNF NIC.",
+"message.volume.desc": "Volume to use as a ROOT disk",
 "message.volume.state.allocated": "The volume is allocated but has not been created yet.",
 "message.volume.state.attaching": "The volume is attaching to a volume from Ready state.",
 "message.volume.state.copying": "The volume is being copied from the image store to primary storage, in case it's an uploaded volume.",

ui/src/views/compute/DeployVM.vue

@@ -133,9 +133,9 @@
                       :guestOsCategories="options.guestOsCategories"
                       :guestOsCategoriesLoading="loading.guestOsCategories"
                       :selectedGuestOsCategoryId="form.guestoscategoryid"
-                      :imageItems="imageType === 'isoid' ? options.isos : options.templates"
-                      :imagesLoading="imageType === 'isoid' ? loading.isos : loading.templates"
-                      :diskSizeSelectionAllowed="imageType !== 'isoid'"
+                      :imageItems="imageType === 'isoid' ? options.isos : imageType === 'volumeid' ? options.volumes : imageType === 'snapshotid' ? options.snapshots : options.templates"
+                      :imagesLoading="imageType === 'isoid' ? loading.isos : imageType === 'volumeid' ? loading.volumes : imageType === 'snapshotid' ? loading.snapshots : loading.templates"
+                      :diskSizeSelectionAllowed="imageType !== 'isoid' && imageType !== 'volumeid' && imageType !== 'snapshotid'"
                       :diskSizeSelectionDeployAsIsMessageVisible="template && template.deployasis"
                       :rootDiskOverrideDisabled="rootDiskSizeFixed > 0 || (template && template.deployasis) || showOverrideDiskOfferingOption"
                       :rootDiskOverrideChecked="form.rootdisksizeitem"
@@ -211,6 +211,12 @@
                     <a-form-item class="form-item-hidden">
                       <a-input v-model:value="form.isoid" />
                     </a-form-item>
+                    <a-form-item class="form-item-hidden">
+                      <a-input v-model:value="form.volumeid" />
+                    </a-form-item>
+                    <a-form-item class="form-item-hidden">
+                      <a-input v-model:value="form.snapshotid" />
+                    </a-form-item>
                     <a-form-item class="form-item-hidden">
                       <a-input v-model:value="form.rootdisksize" />
                     </a-form-item>
@@ -979,6 +985,8 @@ export default {
       },
       options: {
         guestOsCategories: [],
+        volumes: {},
+        snapshots: {},
         templates: {},
         isos: {},
         hypervisors: [],
@@ -1003,6 +1011,8 @@ export default {
       loading: {
         deploy: false,
         guestOsCategories: false,
+        volumes: false,
+        snapshots: false,
         templates: false,
         isos: false,
         hypervisors: false,
@@ -1381,6 +1391,12 @@ export default {
     queryArchId () {
       return this.$route.query.arch || null
     },
+    querySnapshotId () {
+      return this.$route.query.snapshotid | null
+    },
+    queryVolumeId () {
+      return this.$route.query.volumeid || null
+    },
     queryTemplateId () {
       return this.$route.query.templateid || null
     },
@@ -1923,6 +1939,8 @@ export default {
         this.imageType = 'templateid'
         this.form.templateid = value
         this.form.isoid = null
+        this.form.volumeid = null
+        this.form.snapshotid = null
         this.resetFromTemplateConfiguration()
         let template = ''
         for (const entry of Object.values(this.options.templates)) {
@@ -1958,6 +1976,8 @@ export default {
         this.resetFromTemplateConfiguration()
         this.form.isoid = value
         this.form.templateid = null
+        this.form.volumeid = null
+        this.form.snapshotid = null
         let iso = null
         for (const entry of Object.values(this.options.isos)) {
           iso = entry?.iso.find(option => option.id === value)
@@ -1970,6 +1990,46 @@ export default {
           this.updateTemplateLinkedUserData(this.iso.userdataid)
           this.userdataDefaultOverridePolicy = this.iso.userdatapolicy
         }
+      } else if (name === 'volumeid') {
+        this.imageType = 'volumeid'
+        this.resetTemplateAssociatedResources()
+        this.resetFromTemplateConfiguration()
+        this.form.templateid = null
+        this.form.isoid = null
+        this.form.volumeid = value
+        this.form.snapshotid = null
+        let volume = null
+        for (const entry of Object.values(this.options.volumes)) {
+          volume = entry?.volume.find(option => option.id === value)
+          if (volume) {
+            this.volume = volume
+            break
+          }
+        }
+        if (volume) {
+          this.updateTemplateLinkedUserData(this.volume.userdataid)
+          this.userdataDefaultOverridePolicy = this.volume.userdatapolicy
+        }
+      } else if (name === 'snapshotid') {
+        this.imageType = 'snapshotid'
+        this.resetTemplateAssociatedResources()
+        this.resetFromTemplateConfiguration()
+        this.form.templateid = null
+        this.form.isoid = null
+        this.form.volumeid = null
+        this.form.snapshotid = value
+        let snapshot = null
+        for (const entry of Object.values(this.options.snapshots)) {
+          snapshot = entry?.snapshot.find(option => option.id === value)
+          if (snapshot) {
+            this.snapshot = snapshot
+            break
+          }
+        }
+        if (snapshot) {
+          this.updateTemplateLinkedUserData(this.snapshot.userdataid)
+          this.userdataDefaultOverridePolicy = this.snapshot.userdatapolicy
+        }
       } else if (['cpuspeed', 'cpunumber', 'memory'].includes(name)) {
         this.vm[name] = value
         this.form[name] = value
@@ -2147,7 +2207,7 @@ export default {
       if (this.loading.deploy) return
       this.formRef.value.validate().then(async () => {
         const values = toRaw(this.form)
-        if (!values.templateid && !values.isoid) {
+        if (!values.templateid && !values.isoid && !values.volumeid && !values.snapshotid) {
           this.$notification.error({
             message: this.$t('message.request.failed'),
             description: this.$t('message.template.iso')
@@ -2203,6 +2263,10 @@ export default {
         if (this.imageType === 'templateid') {
           deployVmData.templateid = values.templateid
           values.hypervisor = null
+        } else if (this.imageType === 'volumeid') {
+          deployVmData.volumeid = values.volumeid
+        } else if (this.imageType === 'snapshotid') {
+          deployVmData.snapshotid = values.snapshotid
         } else {
           deployVmData.templateid = values.isoid
         }
@@ -2560,6 +2624,89 @@ export default {
         })
       })
     },
+    fetchUnattachedVolumes (volumeFilter, params) {
+      const args = Object.assign({}, params)
+      if (this.isModernImageSelection && this.form.guestoscategoryid) {
+        args.oscategoryid = this.form.guestoscategoryid
+      }
+      if (args.keyword || (args.category && args.category !== volumeFilter)) {
+        args.page = 1
+        args.pageSize = args.pageSize || 10
+      }
+      args.zoneid = _.get(this.zone, 'id')
+      if (this.isZoneSelectedMultiArch) {
+        args.arch = this.selectedArchitecture
+      }
+      args.account = store.getters.project?.id ? null : this.owner.account
+      args.domainid = store.getters.project?.id ? null : this.owner.domainid
+      args.projectid = store.getters.project?.id || this.owner.projectid
+      args.volumefilter = volumeFilter
+      args.details = 'all'
+      args.showicon = 'true'
+      args.id = this.queryVolumeId
+      args.isvnf = false
+
+      delete args.category
+      delete args.public
+      delete args.featured
+
+      return new Promise((resolve, reject) => {
+        getAPI('listVolumes', args).then((response) => {
+          const listvolumesresponse = { count: 0, volume: [] }
+          response.listvolumesresponse.volume.forEach(volume => {
+            if (!volume.virtualmachineid && volume.state === 'Ready') {
+              listvolumesresponse.count += 1
+              listvolumesresponse.volume.push({ ...volume, displaytext: volume.name })
+            }
+          })
+          resolve({ listvolumesresponse })
+        }).catch((reason) => {
+          // ToDo: Handle errors
+          reject(reason)
+        })
+      })
+    },
+    fetchRootSnapshots (snapshotFilter, params) {
+      const args = Object.assign({}, params)
+      if (this.isModernImageSelection && this.form.guestoscategoryid) {
+        args.oscategoryid = this.form.guestoscategoryid
+      }
+      if (args.keyword || (args.category && args.category !== snapshotFilter)) {
+        args.page = 1
+        args.pageSize = args.pageSize || 10
+      }
+      args.zoneid = _.get(this.zone, 'id')
+      if (this.isZoneSelectedMultiArch) {
+        args.arch = this.selectedArchitecture
+      }
+      args.account = store.getters.project?.id ? null : this.owner.account
+      args.domainid = store.getters.project?.id ? null : this.owner.domainid
+      args.projectid = store.getters.project?.id || this.owner.projectid
+      args.snapshotfilter = snapshotFilter
+      args.details = 'all'
+      args.showicon = 'true'
+      args.isvnf = false
+
+      delete args.category
+      delete args.public
+      delete args.featured
+
+      return new Promise((resolve, reject) => {
+        getAPI('listSnapshots', args).then((response) => {
+          const listsnapshotsresponse = { count: 0, snapshot: [] }
+          response.listsnapshotsresponse.snapshot.forEach(snapshot => {
+            if (snapshot.volumetype === 'ROOT') {
+              listsnapshotsresponse.count += 1
+              listsnapshotsresponse.snapshot.push({ ...snapshot, displaytext: snapshot.name })
+            }
+          })
+          resolve({ listsnapshotsresponse })
+        }).catch((reason) => {
+          // ToDo: Handle errors
+          reject(reason)
+        })
+      })
+    },
     fetchTemplates (templateFilter, params) {
       const args = Object.assign({}, params)
       if (this.isModernImageSelection && this.form.guestoscategoryid && !['-1', '0'].includes(this.form.guestoscategoryid)) {
@@ -2634,6 +2781,14 @@ export default {
         this.fetchAllIsos(params)
         return
       }
+      if (this.imageType === 'volumeid') {
+        this.fetchAllVolumes(params)
+        return
+      }
+      if (this.imageType === 'snapshotid') {
+        this.fetchAllSnapshots(params)
+        return
+      }
       this.fetchAllTemplates(params)
     },
     fetchAllTemplates (params) {
@@ -2680,6 +2835,50 @@ export default {
         this.loading.isos = false
       })
     },
+    fetchAllVolumes (params) {
+      const promises = []
+      const volumes = {}
+      this.loading.volumes = true
+      this.imageSearchFilters = params
+      const volumeFilters = this.getImageFilters(params)
+      volumeFilters.forEach((filter) => {
+        volumes[filter] = { count: 0, iso: [] }
+        promises.push(this.fetchUnattachedVolumes(filter, params))
+      })
+      this.options.volumes = volumes
+      Promise.all(promises).then((response) => {
+        response.forEach((resItem, idx) => {
+          volumes[volumeFilters[idx]] = _.isEmpty(resItem.listvolumesresponse) ? { count: 0, volume: [] } : resItem.listvolumesresponse
+          this.options.volumes = { ...volumes }
+        })
+      }).catch((reason) => {
+        console.log(reason)
+      }).finally(() => {
+        this.loading.volumes = false
+      })
+    },
+    fetchAllSnapshots (params) {
+      const promises = []
+      const snapshots = {}
+      this.loading.snapshots = true
+      this.imageSearchFilters = params
+      const snapshotFilters = this.getImageFilters(params)
+      snapshotFilters.forEach((filter) => {
+        snapshots[filter] = { count: 0, iso: [] }
+        promises.push(this.fetchRootSnapshots(filter, params))
+      })
+      this.options.snapshots = snapshots
+      Promise.all(promises).then((response) => {
+        response.forEach((resItem, idx) => {
+          snapshots[snapshotFilters[idx]] = _.isEmpty(resItem.listsnapshotsresponse) ? { count: 0, snapshot: [] } : resItem.listsnapshotsresponse
+          this.options.snapshots = { ...snapshots }
+        })
+      }).catch((reason) => {
+        console.log(reason)
+      }).finally(() => {
+        this.loading.snapshots = false
+      })
+    },
     filterOption (input, option) {
       return option.label.toUpperCase().indexOf(input.toUpperCase()) >= 0
     },

ui/src/views/compute/wizard/OsBasedImageSelection.vue

@@ -25,6 +25,8 @@
         @change="emitChangeImageType()">
         <a-radio-button value="templateid">{{ $t('label.template') }}</a-radio-button>
         <a-radio-button value="isoid">{{ $t('label.iso') }}</a-radio-button>
+        <a-radio-button value="volumeid">{{ $t('label.volume') }}</a-radio-button>
+        <a-radio-button value="snapshotid">{{ $t('label.snapshot') }}</a-radio-button>
       </a-radio-group>
       <div style="margin-top: 5px; margin-bottom: 5px;">
         {{ $t('message.' + localSelectedImageType.replace('id', '') + '.desc') }}