[FIX] New Instance dialog

src/views/compute/DeployVM.vue

@@ -137,6 +137,8 @@
                   <div v-if="zoneSelected">
                     <compute-offering-selection
                       :compute-items="options.serviceOfferings"
+                      :row-count="rowCount.serviceOfferings"
+                      :zoneId="zoneId"
                       :value="serviceOffering ? serviceOffering.id : ''"
                       :loading="loading.serviceOfferings"
                       :preFillContent="dataPreFill"
@@ -181,9 +183,12 @@
                   <div v-if="zoneSelected">
                     <disk-offering-selection
                       :items="options.diskOfferings"
+                      :row-count="rowCount.diskOfferings"
+                      :zoneId="zoneId"
                       :value="diskOffering ? diskOffering.id : ''"
                       :loading="loading.diskOfferings"
                       :preFillContent="dataPreFill"
+                      :isIsoSelected="tabKey==='isoid'"
                       @select-disk-offering-item="($event) => updateDiskOffering($event)"
                       @handle-search-filter="($event) => handleSearchFilter('diskOfferings', $event)"
                     ></disk-offering-selection>
@@ -205,6 +210,8 @@
                   <div v-if="zoneSelected">
                     <affinity-group-selection
                       :items="options.affinityGroups"
+                      :row-count="rowCount.affinityGroups"
+                      :zoneId="zoneId"
                       :value="affinityGroupIds"
                       :loading="loading.affinityGroups"
                       :preFillContent="dataPreFill"
@@ -221,6 +228,7 @@
                   <div v-if="zoneSelected">
                     <network-selection
                       :items="options.networks"
+                      :row-count="rowCount.networks"
                       :value="networkOfferingIds"
                       :loading="loading.networks"
                       :zoneId="zoneId"
@@ -245,6 +253,8 @@
                   <div v-if="zoneSelected">
                     <ssh-key-pair-selection
                       :items="options.sshKeyPairs"
+                      :row-count="rowCount.sshKeyPairs"
+                      :zoneId="zoneId"
                       :value="sshKeyPair ? sshKeyPair.name : ''"
                       :loading="loading.sshKeyPairs"
                       :preFillContent="dataPreFill"
@@ -393,7 +403,25 @@ export default {
       podId: null,
       clusterId: null,
       zoneSelected: false,
-      vm: {},
+      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
+      },
       options: {
         templates: [],
         isos: [],
@@ -412,6 +440,7 @@ export default {
         bootTypes: [],
         bootModes: []
       },
+      rowCount: {},
       loading: {
         deploy: false,
         templates: false,
@@ -709,9 +738,6 @@ export default {
       if (this.serviceOffering) {
         this.vm.serviceofferingid = this.serviceOffering.id
         this.vm.serviceofferingname = this.serviceOffering.displaytext
-        this.vm.cpunumber = this.serviceOffering.cpunumber
-        this.vm.cpuspeed = this.serviceOffering.cpuspeed
-        this.vm.memory = this.serviceOffering.memory
       }
 
       if (this.diskOffering) {
@@ -737,7 +763,11 @@ export default {
           this.form.setFieldsValue({ isoid: null })
         }
         this.instanceConfig = { ...this.form.getFieldsValue(), ...fields }
-        this.vm = Object.assign({}, this.instanceConfig)
+        Object.keys(fields).forEach(field => {
+          if (field in this.vm) {
+            this.vm[field] = this.instanceConfig[field]
+          }
+        })
       }
     })
     this.form.getFieldDecorator('computeofferingid', { initialValue: undefined, preserve: true })
@@ -778,7 +808,6 @@ export default {
       this.fetchKeyboard()
       this.fetchBootTypes()
       this.fetchBootModes()
-
       Vue.nextTick().then(() => {
         ['name', 'keyboard', 'boottype', 'bootmode', 'userdata'].forEach(this.fillValue)
         this.instanceConfig = this.form.getFieldsValue() // ToDo: maybe initialize with some other defaults
@@ -952,6 +981,12 @@ export default {
             description: this.$t('message.template.iso')
           })
           return
+        } else if (values.isoid && (!values.diskofferingid || values.diskofferingid === '0')) {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: this.$t('Please select a Disk Offering to continue')
+          })
+          return
         }
 
         this.loading.deploy = true
@@ -1107,6 +1142,7 @@ export default {
         param.loading = false
         _.map(response, (responseItem, responseKey) => {
           if (Object.keys(responseItem).length === 0) {
+            this.rowCount[name] = 0
             this.options[name] = []
             this.$forceUpdate()
             return
@@ -1116,6 +1152,7 @@ export default {
           }
           _.map(responseItem, (response, key) => {
             if (key === 'count') {
+              this.rowCount[name] = response
               return
             }
             param.opts = response

src/views/compute/wizard/AffinityGroupSelection.vue

@@ -27,12 +27,25 @@
       :columns="columns"
       :dataSource="items"
       :rowKey="record => record.id"
-      :pagination="{showSizeChanger: true}"
+      :pagination="false"
       :rowSelection="rowSelection"
       size="middle"
       :scroll="{ y: 225 }"
     >
     </a-table>
+
+    <div style="display: block; text-align: right;">
+      <a-pagination
+        size="small"
+        :current="options.page"
+        :pageSize="options.pageSize"
+        :total="rowCount"
+        :showTotal="total => `Total ${total} items`"
+        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
+        @change="onChangePage"
+        @showSizeChange="onChangePageSize"
+        showSizeChanger />
+    </div>
   </div>
 </template>
 
@@ -46,6 +59,10 @@ export default {
       type: Array,
       default: () => []
     },
+    rowCount: {
+      type: Number,
+      default: () => 0
+    },
     value: {
       type: Array,
       default: () => []
@@ -57,6 +74,10 @@ export default {
     preFillContent: {
       type: Object,
       default: () => {}
+    },
+    zoneId: {
+      type: String,
+      default: () => ''
     }
   },
   data () {
@@ -74,17 +95,16 @@ export default {
           width: '60%'
         }
       ],
-      selectedRowKeys: []
-    }
-  },
-  computed: {
-    options () {
-      return {
+      selectedRowKeys: [],
+      oldZoneId: null,
+      options: {
         page: 1,
         pageSize: 10,
-        keyword: ''
+        keyword: null
       }
-    },
+    }
+  },
+  computed: {
     rowSelection () {
       return {
         type: 'checkbox',
@@ -107,6 +127,10 @@ export default {
           this.selectedRowKeys = this.preFillContent.affinitygroupids
           this.$emit('select-affinity-group-item', this.preFillContent.affinitygroupids)
         } else {
+          if (this.oldZoneId === this.zoneId) {
+            return
+          }
+          this.oldZoneId = this.zoneId
           this.selectedRowKeys = []
           this.$emit('select-affinity-group-item', null)
         }
@@ -116,12 +140,19 @@ export default {
   methods: {
     handleSearch (value) {
       this.filter = value
+      this.options.page = 1
+      this.options.pageSize = 10
       this.options.keyword = this.filter
       this.$emit('handle-search-filter', this.options)
     },
-    handleTableChange (pagination) {
-      this.options.page = pagination.current
-      this.options.pageSize = pagination.pageSize
+    onChangePage (page, pageSize) {
+      this.options.page = page
+      this.options.pageSize = pageSize
+      this.$emit('handle-search-filter', this.options)
+    },
+    onChangePageSize (page, pageSize) {
+      this.options.page = page
+      this.options.pageSize = pageSize
       this.$emit('handle-search-filter', this.options)
     }
   }

src/views/compute/wizard/ComputeOfferingSelection.vue

@@ -25,16 +25,28 @@
     <a-table
       :columns="columns"
       :dataSource="tableSource"
-      :pagination="{showSizeChanger: true}"
+      :pagination="false"
       :rowSelection="rowSelection"
       :loading="loading"
       size="middle"
-      @change="handleTableChange"
       :scroll="{ y: 225 }"
     >
       <span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('label.cpu') }}</span>
       <span slot="ramTitle"><a-icon type="bulb" /> {{ $t('label.memory') }}</span>
     </a-table>
+
+    <div style="display: block; text-align: right;">
+      <a-pagination
+        size="small"
+        :current="options.page"
+        :pageSize="options.pageSize"
+        :total="rowCount"
+        :showTotal="total => `Total ${total} items`"
+        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
+        @change="onChangePage"
+        @showSizeChange="onChangePageSize"
+        showSizeChanger />
+    </div>
   </div>
 </template>
 
@@ -46,6 +58,10 @@ export default {
       type: Array,
       default: () => []
     },
+    rowCount: {
+      type: Number,
+      default: () => 0
+    },
     value: {
       type: String,
       default: ''
@@ -57,6 +73,10 @@ export default {
     preFillContent: {
       type: Object,
       default: () => {}
+    },
+    zoneId: {
+      type: String,
+      default: () => ''
     }
   },
   data () {
@@ -79,17 +99,16 @@ export default {
           width: '30%'
         }
       ],
-      selectedRowKeys: []
-    }
-  },
-  computed: {
-    options () {
-      return {
+      selectedRowKeys: [],
+      oldZoneId: null,
+      options: {
         page: 1,
         pageSize: 10,
-        keyword: ''
+        keyword: null
       }
-    },
+    }
+  },
+  computed: {
     tableSource () {
       return this.computeItems.map((item) => {
         var cpuNumberValue = item.cpunumber + ''
@@ -137,6 +156,10 @@ export default {
           this.selectedRowKeys = [this.preFillContent.computeofferingid]
           this.$emit('select-compute-item', this.preFillContent.computeofferingid)
         } else {
+          if (this.oldZoneId === this.zoneId) {
+            return
+          }
+          this.oldZoneId = this.zoneId
           if (this.computeItems && this.computeItems.length > 0) {
             this.selectedRowKeys = [this.computeItems[0].id]
             this.$emit('select-compute-item', this.computeItems[0].id)
@@ -152,12 +175,19 @@ export default {
     },
     handleSearch (value) {
       this.filter = value
+      this.options.page = 1
+      this.options.pageSize = 10
       this.options.keyword = this.filter
       this.$emit('handle-search-filter', this.options)
     },
-    handleTableChange (pagination) {
-      this.options.page = pagination.current
-      this.options.pageSize = pagination.pageSize
+    onChangePage (page, pageSize) {
+      this.options.page = page
+      this.options.pageSize = pageSize
+      this.$emit('handle-search-filter', this.options)
+    },
+    onChangePageSize (page, pageSize) {
+      this.options.page = page
+      this.options.pageSize = pageSize
       this.$emit('handle-search-filter', this.options)
     }
   }