ui: fix import instance form for recent changes (#5257)

* ui: fix import instance form for recent changes

7123269 and 535761b introduced changes that affecting Import Instance form.
Custom compute selection was not showing properly.
On import error was seen with 'AddAsyncJob'.

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* fix

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* fix

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* revert page refresh

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

ui/src/views/compute/DeployVM.vue

@@ -802,8 +802,8 @@ export default {
       diskSelected: {},
       diskIOpsMin: 0,
       diskIOpsMax: 0,
-      minIOPs: 0,
-      maxIOPs: 0
+      minIops: 0,
+      maxIops: 0
     }
   },
   computed: {
@@ -1532,8 +1532,8 @@ export default {
           deployVmData['details[0].configurationId'] = this.selectedTemplateConfiguration.id
         }
         if (this.isCustomizedIOPS) {
-          deployVmData['details[0].minIops'] = this.minIOPs
-          deployVmData['details[0].maxIops'] = this.maxIOPs
+          deployVmData['details[0].minIops'] = this.minIops
+          deployVmData['details[0].maxIops'] = this.maxIops
         }
         // step 4: select disk offering
         if (!this.template.deployasis && this.template.childtemplates && this.template.childtemplates.length > 0) {

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

@@ -298,8 +298,8 @@ export default {
         this.$emit('handler-error', true)
         return
       }
-      this.$emit('update-iops-value', 'minIOPs', this.minIOps)
-      this.$emit('update-iops-value', 'maxIOPs', this.maxIOps)
+      this.$emit('update-iops-value', 'minIops', this.minIOps)
+      this.$emit('update-iops-value', 'maxIops', this.maxIOps)
       this.$emit('handler-error', false)
     }
   }

ui/src/views/tools/ImportUnmanagedInstance.vue

@@ -131,7 +131,9 @@
                 @handle-search-filter="($event) => fetchComputeOfferings($event)" />
               <compute-selection
                 class="row-element"
-                v-if="computeOffering && computeOffering.iscustomized"
+                v-if="computeOffering && (computeOffering.iscustomized || computeOffering.iscustomizediops)"
+                :isCustomized="computeOffering.iscustomized"
+                :isCustomizedIOps="'iscustomizediops' in computeOffering && computeOffering.iscustomizediops"
                 :cpuNumberInputDecorator="cpuNumberKey"
                 :cpuSpeedInputDecorator="cpuSpeedKey"
                 :memoryInputDecorator="memoryKey"
@@ -142,6 +144,7 @@
                 :maxCpu="getMaxCpu()"
                 :minMemory="getMinMemory()"
                 :maxMemory="getMaxMemory()"
+                @update-iops-value="updateFieldValue"
                 @update-compute-cpunumber="updateFieldValue"
                 @update-compute-cpuspeed="updateFieldValue"
                 @update-compute-memory="updateFieldValue" />
@@ -278,6 +281,8 @@ export default {
       cpuNumberKey: 'cpuNumber',
       cpuSpeedKey: 'cpuSpeed',
       memoryKey: 'memory',
+      minIopsKey: 'minIops',
+      maxIopsKey: 'maxIops',
       switches: {},
       loading: false
     }
@@ -296,6 +301,8 @@ export default {
     this.form.getFieldDecorator(this.cpuNumberKey, { initialValue: undefined, preserve: true })
     this.form.getFieldDecorator(this.cpuSpeedKey, { initialValue: undefined, preserve: true })
     this.form.getFieldDecorator(this.memoryKey, { initialValue: undefined, preserve: true })
+    this.form.getFieldDecorator(this.minIopsKey, { initialValue: undefined, preserve: true })
+    this.form.getFieldDecorator(this.maxIopsKey, { initialValue: undefined, preserve: true })
   },
   computed: {
     params () {
@@ -524,8 +531,6 @@ export default {
       })
     },
     updateFieldValue (name, value) {
-      if (name === this.cpuNumberKey) {
-      }
       this.form.setFieldsValue({
         [name]: value
       })
@@ -533,6 +538,10 @@ export default {
     updateComputeOffering (id) {
       this.updateFieldValue('computeofferingid', id)
       this.computeOffering = this.computeOfferings.filter(x => x.id === id)[0]
+      if (this.computeOffering && !this.computeOffering.iscustomizediops) {
+        this.updateFieldValue(this.minIopsKey, undefined)
+        this.updateFieldValue(this.maxIopsKey, undefined)
+      }
     },
     updateMultiDiskOffering (data) {
       this.dataDisksOfferingsMapping = data
@@ -611,6 +620,25 @@ export default {
             }
           }
         }
+        if (this.computeOffering.iscustomizediops) {
+          var iopsDetails = [this.minIopsKey, this.maxIopsKey]
+          for (var iopsDetail of iopsDetails) {
+            if (!values[iopsDetail] || values[iopsDetail] < 0) {
+              this.$notification.error({
+                message: this.$t('message.request.failed'),
+                description: this.$t('message.please.enter.valid.value') + ': ' + this.$t('label.' + iopsDetail.toLowerCase())
+              })
+              return
+            }
+            params['details[0].' + iopsDetail] = values[iopsDetail]
+          }
+          if (values[this.minIopsKey] > values[this.maxIopsKey]) {
+            this.$notification.error({
+              message: this.$t('message.request.failed'),
+              description: this.$t('error.form.message')
+            })
+          }
+        }
         var keys = ['hostname', 'domainid', 'projectid', 'account', 'migrateallowed', 'forced']
         if (this.templateType !== 'auto') {
           keys.push('templateid')
@@ -663,14 +691,10 @@ export default {
         const name = this.resource.name
         api('importUnmanagedInstance', params).then(json => {
           const jobId = json.importunmanagedinstanceresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.import.instance'),
-            jobid: jobId,
-            description: name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.import.instance'),
+            description: name,
             loadingMessage: `${this.$t('label.import.instance')} ${name} ${this.$t('label.in.progress')}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
             successMessage: this.$t('message.success.import.instance') + ' ' + name,

ui/src/views/tools/ManageInstances.vue

@@ -743,14 +743,10 @@ export default {
         var params = { id: vm.id }
         api('unmanageVirtualMachine', params).then(json => {
           const jobId = json.unmanagevirtualmachineresponse.jobid
-          this.$store.dispatch('AddAsyncJob', {
-            title: this.$t('label.unmanage.instance'),
-            jobid: jobId,
-            description: vm.name,
-            status: 'progress'
-          })
           this.$pollJob({
             jobId,
+            title: this.$t('label.unmanage.instance'),
+            description: vm.name,
             loadingMessage: `${this.$t('label.unmanage.instance')} ${vm.name} ${this.$t('label.in.progress')}`,
             catchMessage: this.$t('error.fetching.async.job.result'),
             successMessage: this.$t('message.success.unmanage.instance') + ' ' + vm.name,