From 58f9afd423aa18d022008b7e5a2bd3ac64d882fa Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 8 Jun 2020 11:15:46 +0700
Subject: [PATCH 1/6] add scroll to vm info

---
 src/views/compute/DeployVM.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 09d36a3da..f01f6a080 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -1187,6 +1187,13 @@ export default {
   }
 
   .vm-info-card {
+    .ant-card-body {
+      min-height: 250px;
+      max-height: calc(100vh - 260px);
+      overflow-y: auto;
+      scroll-behavior: smooth;
+    }
+
     .resource-detail-item__label {
       font-weight: normal;
     }

From c5b1c7c4edbc21ab2b7ffa3c57cb81f57d555f3e Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 8 Jun 2020 16:09:17 +0700
Subject: [PATCH 2/6] fix "un-choose" the Zone/Pod/Host and row selected when
 changing page sections

---
 src/views/compute/DeployVM.vue                | 103 ++++++++++++++----
 .../compute/wizard/AffinityGroupSelection.vue |  18 ++-
 .../wizard/ComputeOfferingSelection.vue       |  17 ++-
 .../compute/wizard/DiskOfferingSelection.vue  |  17 ++-
 src/views/compute/wizard/NetworkSelection.vue |  13 ++-
 .../compute/wizard/SshKeyPairSelection.vue    |  33 ++++--
 .../compute/wizard/TemplateIsoSelection.vue   |   1 -
 7 files changed, 164 insertions(+), 38 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index f01f6a080..68c7b9c04 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -153,6 +153,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"
@@ -197,6 +199,8 @@
                   <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"
@@ -221,6 +225,8 @@
                   <div v-if="zoneSelected">
                     <affinity-group-selection
                       :items="options.affinityGroups"
+                      :row-count="rowCount.affinityGroups"
+                      :zoneId="zoneId"
                       :value="affinityGroupIds"
                       :loading="loading.affinityGroups"
                       :preFillContent="dataPreFill"
@@ -237,6 +243,7 @@
                   <div v-if="zoneSelected">
                     <network-selection
                       :items="options.networks"
+                      :row-count="rowCount.networks"
                       :value="networkOfferingIds"
                       :loading="loading.networks"
                       :zoneId="zoneId"
@@ -261,6 +268,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"
@@ -353,7 +362,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: [],
@@ -370,6 +397,7 @@ export default {
         groups: [],
         keyboards: []
       },
+      rowCount: {},
       loading: {
         deploy: false,
         templates: false,
@@ -433,7 +461,8 @@ export default {
         }
       ],
       tabKey: 'templateid',
-      dataPreFill: {}
+      dataPreFill: {},
+      defaultZone: {}
     }
   },
   computed: {
@@ -486,7 +515,7 @@ export default {
         hypervisors: {
           list: 'listHypervisors',
           options: {
-            zoneid: _.get(this.zone, 'id')
+            zoneid: _.get(this.zone, 'id') === '-1' ? this.defaultZone.id : _.get(this.zone, 'id')
           },
           field: 'hypervisor'
         },
@@ -511,7 +540,7 @@ export default {
         networks: {
           list: 'listNetworks',
           options: {
-            zoneid: _.get(this.zone, 'id'),
+            zoneid: _.get(this.zone, 'id') === '-1' ? this.defaultZone.id : _.get(this.zone, 'id'),
             canusefordeploy: true,
             projectid: store.getters.project ? store.getters.project.id : null,
             domainid: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.domainid,
@@ -525,7 +554,7 @@ export default {
           list: 'listPods',
           isLoad: !this.isNormalAndDomainUser,
           options: {
-            zoneid: _.get(this.zone, 'id')
+            zoneid: _.get(this.zone, 'id') === '-1' ? null : _.get(this.zone, 'id')
           },
           field: 'podid'
         },
@@ -533,8 +562,8 @@ export default {
           list: 'listClusters',
           isLoad: !this.isNormalAndDomainUser,
           options: {
-            zoneid: _.get(this.zone, 'id'),
-            podid: this.podId
+            zoneid: _.get(this.zone, 'id') === '-1' ? null : _.get(this.zone, 'id'),
+            podid: this.podId === -1 ? null : this.podId
           },
           field: 'clusterid'
         },
@@ -542,9 +571,9 @@ export default {
           list: 'listHosts',
           isLoad: !this.isNormalAndDomainUser,
           options: {
-            zoneid: _.get(this.zone, 'id'),
-            podid: this.podId,
-            clusterid: this.clusterId,
+            zoneid: _.get(this.zone, 'id') === -1 ? null : _.get(this.zone, 'id'),
+            podid: this.podId === '-1' ? null : this.podId,
+            clusterid: this.clusterId === '-1' ? null : this.clusterId,
             state: 'Up',
             type: 'Routing'
           },
@@ -556,7 +585,12 @@ export default {
       return _.map(this.networks, 'id')
     },
     zoneSelectOptions () {
-      return this.options.zones.map((zone) => {
+      const zones = this.options.zones
+      zones.unshift({
+        id: '-1',
+        name: this.$t('label.default')
+      })
+      return zones.map((zone) => {
         return {
           label: zone.name,
           value: zone.id
@@ -572,7 +606,12 @@ export default {
       })
     },
     podSelectOptions () {
-      return this.options.pods.map((pod) => {
+      const pods = this.options.pods
+      pods.unshift({
+        id: '-1',
+        name: this.$t('label.default')
+      })
+      return pods.map((pod) => {
         return {
           label: pod.name,
           value: pod.id
@@ -580,7 +619,12 @@ export default {
       })
     },
     clusterSelectOptions () {
-      return this.options.clusters.map((cluster) => {
+      const clusters = this.options.clusters
+      clusters.unshift({
+        id: '-1',
+        name: this.$t('label.default')
+      })
+      return clusters.map((cluster) => {
         return {
           label: cluster.name,
           value: cluster.id
@@ -588,7 +632,12 @@ export default {
       })
     },
     hostSelectOptions () {
-      return this.options.hosts.map((host) => {
+      const hosts = this.options.hosts
+      hosts.unshift({
+        id: '-1',
+        name: this.$t('label.default')
+      })
+      return hosts.map((host) => {
         return {
           label: host.name,
           value: host.id
@@ -647,9 +696,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) {
@@ -675,7 +721,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 })
@@ -999,6 +1049,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
@@ -1008,6 +1059,7 @@ export default {
           }
           _.map(responseItem, (response, key) => {
             if (key === 'count') {
+              this.rowCount[name] = response
               return
             }
             param.opts = response
@@ -1027,8 +1079,12 @@ export default {
     },
     fetchTemplates (templateFilter) {
       return new Promise((resolve, reject) => {
+        let zoneId = _.get(this.zone, 'id')
+        if (zoneId === '-1') {
+          zoneId = this.defaultZone.id
+        }
         api('listTemplates', {
-          zoneid: _.get(this.zone, 'id'),
+          zoneid: zoneId,
           templatefilter: templateFilter
         }).then((response) => {
           resolve(response)
@@ -1040,8 +1096,12 @@ export default {
     },
     fetchIsos (isoFilter) {
       return new Promise((resolve, reject) => {
+        let zoneId = _.get(this.zone, 'id')
+        if (zoneId === '-1') {
+          zoneId = this.defaultZone.id
+        }
         api('listIsos', {
-          zoneid: _.get(this.zone, 'id'),
+          zoneid: zoneId,
           isofilter: isoFilter,
           bootable: true
         }).then((response) => {
@@ -1111,6 +1171,9 @@ export default {
         isoid: undefined
       })
       this.tabKey = 'templateid'
+      if (value === '-1') {
+        this.defaultZone = this.options.zones.filter(item => item.id !== '-1')[0] || {}
+      }
       _.each(this.params, (param, name) => {
         if (!('isLoad' in param) || param.isLoad) {
           this.fetchOptions(param, name, ['zones'])
diff --git a/src/views/compute/wizard/AffinityGroupSelection.vue b/src/views/compute/wizard/AffinityGroupSelection.vue
index 2a6ef92ed..33a0deae7 100644
--- a/src/views/compute/wizard/AffinityGroupSelection.vue
+++ b/src/views/compute/wizard/AffinityGroupSelection.vue
@@ -27,8 +27,9 @@
       :columns="columns"
       :dataSource="items"
       :rowKey="record => record.id"
-      :pagination="{showSizeChanger: true}"
+      :pagination="{showSizeChanger: true, total: rowCount}"
       :rowSelection="rowSelection"
+      @change="handleTableChange"
       size="middle"
       :scroll="{ y: 225 }"
     >
@@ -46,6 +47,10 @@ export default {
       type: Array,
       default: () => []
     },
+    rowCount: {
+      type: Number,
+      default: () => 0
+    },
     value: {
       type: Array,
       default: () => []
@@ -57,6 +62,10 @@ export default {
     preFillContent: {
       type: Object,
       default: () => {}
+    },
+    zoneId: {
+      type: String,
+      default: () => ''
     }
   },
   data () {
@@ -74,7 +83,8 @@ export default {
           width: '60%'
         }
       ],
-      selectedRowKeys: []
+      selectedRowKeys: [],
+      oldZoneId: null
     }
   },
   computed: {
@@ -107,6 +117,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)
         }
diff --git a/src/views/compute/wizard/ComputeOfferingSelection.vue b/src/views/compute/wizard/ComputeOfferingSelection.vue
index 0ffd53bcd..269b2fd2d 100644
--- a/src/views/compute/wizard/ComputeOfferingSelection.vue
+++ b/src/views/compute/wizard/ComputeOfferingSelection.vue
@@ -25,7 +25,7 @@
     <a-table
       :columns="columns"
       :dataSource="tableSource"
-      :pagination="{showSizeChanger: true}"
+      :pagination="{ showSizeChanger: true, total: rowCount }"
       :rowSelection="rowSelection"
       :loading="loading"
       size="middle"
@@ -46,6 +46,10 @@ export default {
       type: Array,
       default: () => []
     },
+    rowCount: {
+      type: Number,
+      default: () => 0
+    },
     value: {
       type: String,
       default: ''
@@ -57,6 +61,10 @@ export default {
     preFillContent: {
       type: Object,
       default: () => {}
+    },
+    zoneId: {
+      type: String,
+      default: () => ''
     }
   },
   data () {
@@ -79,7 +87,8 @@ export default {
           width: '30%'
         }
       ],
-      selectedRowKeys: []
+      selectedRowKeys: [],
+      oldZoneId: null
     }
   },
   computed: {
@@ -137,6 +146,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)
diff --git a/src/views/compute/wizard/DiskOfferingSelection.vue b/src/views/compute/wizard/DiskOfferingSelection.vue
index 65a40be93..c304b2ce7 100644
--- a/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -26,7 +26,7 @@
       :loading="loading"
       :columns="columns"
       :dataSource="tableSource"
-      :pagination="{showSizeChanger: true}"
+      :pagination="{showSizeChanger: true, total: rowCount}"
       :rowSelection="rowSelection"
       size="middle"
       @change="handleTableChange"
@@ -57,6 +57,10 @@ export default {
       type: Array,
       default: () => []
     },
+    rowCount: {
+      type: Number,
+      default: () => 0
+    },
     value: {
       type: String,
       default: ''
@@ -68,6 +72,10 @@ export default {
     preFillContent: {
       type: Object,
       default: () => {}
+    },
+    zoneId: {
+      type: String,
+      default: () => ''
     }
   },
   data () {
@@ -93,7 +101,8 @@ export default {
         }
       ],
       selectedRowKeys: ['0'],
-      dataItems: []
+      dataItems: [],
+      oldZoneId: null
     }
   },
   created () {
@@ -145,6 +154,10 @@ export default {
           this.selectedRowKeys = [this.preFillContent.diskofferingid]
           this.$emit('select-disk-offering-item', this.preFillContent.diskofferingid)
         } else {
+          if (this.oldZoneId === this.zoneId) {
+            return
+          }
+          this.oldZoneId = this.zoneId
           this.selectedRowKeys = ['0']
           this.$emit('select-disk-offering-item', '0')
         }
diff --git a/src/views/compute/wizard/NetworkSelection.vue b/src/views/compute/wizard/NetworkSelection.vue
index 1f14a590d..8e97a8918 100644
--- a/src/views/compute/wizard/NetworkSelection.vue
+++ b/src/views/compute/wizard/NetworkSelection.vue
@@ -30,7 +30,7 @@
       :columns="columns"
       :dataSource="networkItems"
       :rowKey="record => record.id"
-      :pagination="{showSizeChanger: true, size: 'small'}"
+      :pagination="{showSizeChanger: true, size: 'small', total: rowCount}"
       :rowSelection="rowSelection"
       @change="handleTableChange"
       :scroll="{ y: 225 }"
@@ -84,6 +84,10 @@ export default {
       type: Array,
       default: () => []
     },
+    rowCount: {
+      type: Number,
+      default: () => 0
+    },
     value: {
       type: Array,
       default: () => []
@@ -111,7 +115,8 @@ export default {
         loading: false,
         opts: []
       },
-      showCreateForm: false
+      showCreateForm: false,
+      oldZoneId: null
     }
   },
   computed: {
@@ -189,6 +194,10 @@ export default {
           this.$emit('select-network-item', this.preFillContent.networkids)
         } else {
           if (this.items && this.items.length > 0) {
+            if (this.oldZoneId === this.zoneId) {
+              return
+            }
+            this.oldZoneId = this.zoneId
             this.selectedRowKeys = [this.items[0].id]
             this.$emit('select-network-item', this.selectedRowKeys)
           } else {
diff --git a/src/views/compute/wizard/SshKeyPairSelection.vue b/src/views/compute/wizard/SshKeyPairSelection.vue
index 64110c211..98c24f28b 100644
--- a/src/views/compute/wizard/SshKeyPairSelection.vue
+++ b/src/views/compute/wizard/SshKeyPairSelection.vue
@@ -26,7 +26,7 @@
       :loading="loading"
       :columns="columns"
       :dataSource="tableSource"
-      :pagination="{showSizeChanger: true}"
+      :pagination="{ showSizeChanger: true, total: rowCount }"
       :rowSelection="rowSelection"
       size="middle"
       @change="handleTableChange"
@@ -46,6 +46,10 @@ export default {
       type: Array,
       default: () => []
     },
+    rowCount: {
+      type: Number,
+      default: () => 0
+    },
     value: {
       type: String,
       default: ''
@@ -57,6 +61,10 @@ export default {
     preFillContent: {
       type: Object,
       default: () => {}
+    },
+    zoneId: {
+      type: String,
+      default: () => ''
     }
   },
   data () {
@@ -80,7 +88,8 @@ export default {
         }
       ],
       selectedRowKeys: [this.$t('label.noselect')],
-      dataItems: []
+      dataItems: [],
+      oldZoneId: null
     }
   },
   created () {
@@ -130,8 +139,12 @@ export default {
           this.selectedRowKeys = [this.preFillContent.keypair]
           this.$emit('select-ssh-key-pair-item', this.preFillContent.keypair)
         } else {
-          this.selectedRowKeys = [this.$t('label.noselect')]
-          this.$emit('select-ssh-key-pair-item', this.$t('label.noselect'))
+          if (this.oldZoneId === this.zoneId) {
+            return
+          }
+          this.oldZoneId = this.zoneId
+          this.selectedRowKeys = [this.dataItems[0].name]
+          this.$emit('select-ssh-key-pair-item', this.dataItems[0].name)
         }
       }
     }
@@ -139,11 +152,13 @@ export default {
   methods: {
     initDataItem () {
       this.dataItems = []
-      this.dataItems.push({
-        name: this.$t('label.noselect'),
-        account: '-',
-        domain: '-'
-      })
+      if (this.options.page === 1) {
+        this.dataItems.push({
+          name: this.$t('label.noselect'),
+          account: '-',
+          domain: '-'
+        })
+      }
     },
     onSelectRow (value) {
       this.selectedRowKeys = value
diff --git a/src/views/compute/wizard/TemplateIsoSelection.vue b/src/views/compute/wizard/TemplateIsoSelection.vue
index 0a055d268..56c55eca1 100644
--- a/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -171,7 +171,6 @@ export default {
   beforeCreate () {
     this.form = this.$form.createForm(this)
   },
-  inject: ['vmFetchTemplates', 'vmFetchIsos'],
   methods: {
     mappingDataSource () {
       let mappedItems = {}

From 1af975afeff37cdd2a553163bed792db8e0c9bd2 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 16 Jun 2020 14:42:35 +0700
Subject: [PATCH 3/6] remove 'un-choose' selection in zone, cluster, pod, host

---
 src/views/compute/DeployVM.vue | 67 +++++++---------------------------
 1 file changed, 14 insertions(+), 53 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 8ca5bb109..468042f59 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -362,25 +362,7 @@ export default {
       podId: null,
       clusterId: null,
       zoneSelected: false,
-      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
-      },
+      vm: {},
       options: {
         templates: [],
         isos: [],
@@ -461,8 +443,7 @@ export default {
         }
       ],
       tabKey: 'templateid',
-      dataPreFill: {},
-      defaultZone: {}
+      dataPreFill: {}
     }
   },
   computed: {
@@ -515,7 +496,7 @@ export default {
         hypervisors: {
           list: 'listHypervisors',
           options: {
-            zoneid: _.get(this.zone, 'id') === '-1' ? this.defaultZone.id : _.get(this.zone, 'id')
+            zoneid: _.get(this.zone, 'id')
           },
           field: 'hypervisor'
         },
@@ -540,7 +521,7 @@ export default {
         networks: {
           list: 'listNetworks',
           options: {
-            zoneid: _.get(this.zone, 'id') === '-1' ? this.defaultZone.id : _.get(this.zone, 'id'),
+            zoneid: _.get(this.zone, 'id'),
             canusefordeploy: true,
             projectid: store.getters.project ? store.getters.project.id : null,
             domainid: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.domainid,
@@ -554,7 +535,7 @@ export default {
           list: 'listPods',
           isLoad: !this.isNormalAndDomainUser,
           options: {
-            zoneid: _.get(this.zone, 'id') === '-1' ? null : _.get(this.zone, 'id')
+            zoneid: _.get(this.zone, 'id')
           },
           field: 'podid'
         },
@@ -562,8 +543,8 @@ export default {
           list: 'listClusters',
           isLoad: !this.isNormalAndDomainUser,
           options: {
-            zoneid: _.get(this.zone, 'id') === '-1' ? null : _.get(this.zone, 'id'),
-            podid: this.podId === -1 ? null : this.podId
+            zoneid: _.get(this.zone, 'id'),
+            podid: this.podId
           },
           field: 'clusterid'
         },
@@ -571,9 +552,9 @@ export default {
           list: 'listHosts',
           isLoad: !this.isNormalAndDomainUser,
           options: {
-            zoneid: _.get(this.zone, 'id') === -1 ? null : _.get(this.zone, 'id'),
-            podid: this.podId === '-1' ? null : this.podId,
-            clusterid: this.clusterId === '-1' ? null : this.clusterId,
+            zoneid: _.get(this.zone, 'id'),
+            podid: this.podId,
+            clusterid: this.clusterId,
             state: 'Up',
             type: 'Routing'
           },
@@ -585,12 +566,7 @@ export default {
       return _.map(this.networks, 'id')
     },
     zoneSelectOptions () {
-      const zones = this.options.zones
-      zones.unshift({
-        id: '-1',
-        name: this.$t('label.default')
-      })
-      return zones.map((zone) => {
+      return this.options.zones.map((zone) => {
         return {
           label: zone.name,
           value: zone.id
@@ -721,11 +697,7 @@ export default {
           this.form.setFieldsValue({ isoid: null })
         }
         this.instanceConfig = { ...this.form.getFieldsValue(), ...fields }
-        Object.keys(fields).forEach(field => {
-          if (field in this.vm) {
-            this.vm[field] = this.instanceConfig[field]
-          }
-        })
+        this.vm = Object.assign({}, this.instanceConfig)
       }
     })
     this.form.getFieldDecorator('computeofferingid', { initialValue: undefined, preserve: true })
@@ -1079,12 +1051,8 @@ export default {
     },
     fetchTemplates (templateFilter) {
       return new Promise((resolve, reject) => {
-        let zoneId = _.get(this.zone, 'id')
-        if (zoneId === '-1') {
-          zoneId = this.defaultZone.id
-        }
         api('listTemplates', {
-          zoneid: zoneId,
+          zoneid: _.get(this.zone, 'id'),
           templatefilter: templateFilter
         }).then((response) => {
           resolve(response)
@@ -1096,12 +1064,8 @@ export default {
     },
     fetchIsos (isoFilter) {
       return new Promise((resolve, reject) => {
-        let zoneId = _.get(this.zone, 'id')
-        if (zoneId === '-1') {
-          zoneId = this.defaultZone.id
-        }
         api('listIsos', {
-          zoneid: zoneId,
+          zoneid: _.get(this.zone, 'id'),
           isofilter: isoFilter,
           bootable: true
         }).then((response) => {
@@ -1171,9 +1135,6 @@ export default {
         isoid: undefined
       })
       this.tabKey = 'templateid'
-      if (value === '-1') {
-        this.defaultZone = this.options.zones.filter(item => item.id !== '-1')[0] || {}
-      }
       _.each(this.params, (param, name) => {
         if (!('isLoad' in param) || param.isLoad) {
           this.fetchOptions(param, name, ['zones'])

From d0c2f49dd9fc4c38cb8a09c956dbb37840f8201a Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 17 Jun 2020 15:22:50 +0700
Subject: [PATCH 4/6] fix issue when selected page, hidden cpu/ram affinity
 groups

---
 src/views/compute/DeployVM.vue                | 63 +++++++++----------
 .../compute/wizard/AffinityGroupSelection.vue | 43 +++++++++----
 .../wizard/ComputeOfferingSelection.vue       | 43 +++++++++----
 .../compute/wizard/DiskOfferingSelection.vue  | 61 +++++++++++-------
 src/views/compute/wizard/NetworkSelection.vue | 44 +++++++++----
 .../compute/wizard/SshKeyPairSelection.vue    | 42 +++++++++----
 .../compute/wizard/TemplateIsoRadioGroup.vue  | 36 +++++------
 7 files changed, 206 insertions(+), 126 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 468042f59..c3c7814a8 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -362,7 +362,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: [],
@@ -621,10 +639,11 @@ export default {
       return options
     },
     keyboardSelectOptions () {
-      return this.options.keyboards.map((keyboard) => {
+      const keyboardOpts = this.$store.getters.configs.keyboardOptions || {}
+      return Object.keys(keyboardOpts).map((keyboard) => {
         return {
-          label: this.$t(keyboard.description),
-          value: keyboard.id
+          label: this.$t(keyboardOpts[keyboard]),
+          value: keyboard
         }
       })
     }
@@ -697,7 +716,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 })
@@ -735,7 +758,6 @@ export default {
         })
       }
 
-      this.fetchKeyboard()
       Vue.nextTick().then(() => {
         ['name', 'keyboard', 'userdata'].forEach(this.fillValue)
         this.instanceConfig = this.form.getFieldsValue() // ToDo: maybe initialize with some other defaults
@@ -754,35 +776,6 @@ export default {
       })
       await this.fetchAllTemplates()
     },
-    fetchKeyboard () {
-      const keyboardType = []
-      keyboardType.push({
-        id: '',
-        description: ''
-      })
-      keyboardType.push({
-        id: 'us',
-        description: 'label.standard.us.keyboard'
-      })
-      keyboardType.push({
-        id: 'uk',
-        description: 'label.uk.keyboard'
-      })
-      keyboardType.push({
-        id: 'fr',
-        description: 'label.french.azerty.keyboard'
-      })
-      keyboardType.push({
-        id: 'jp',
-        description: 'label.japanese.keyboard'
-      })
-      keyboardType.push({
-        id: 'sc',
-        description: 'label.simplified.chinese.keyboard'
-      })
-
-      this.$set(this.options, 'keyboards', keyboardType)
-    },
     fetchNetwork () {
       const param = this.params.networks
       this.fetchOptions(param, 'networks')
diff --git a/src/views/compute/wizard/AffinityGroupSelection.vue b/src/views/compute/wizard/AffinityGroupSelection.vue
index 47a47fe93..fbf1f0d29 100644
--- a/src/views/compute/wizard/AffinityGroupSelection.vue
+++ b/src/views/compute/wizard/AffinityGroupSelection.vue
@@ -27,13 +27,25 @@
       :columns="columns"
       :dataSource="items"
       :rowKey="record => record.id"
-      :pagination="{showSizeChanger: true, total: rowCount}"
+      :pagination="false"
       :rowSelection="rowSelection"
-      @change="handleTableChange"
       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="items.length >= options.pageSize ? rowCount : items.length"
+        :showTotal="total => `Total ${total} items`"
+        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
+        @change="onChangePage"
+        @showSizeChange="onChangePageSize"
+        showSizeChanger />
+    </div>
   </div>
 </template>
 
@@ -84,17 +96,15 @@ export default {
         }
       ],
       selectedRowKeys: [],
-      oldZoneId: null
-    }
-  },
-  computed: {
-    options () {
-      return {
+      oldZoneId: null,
+      options: {
         page: 1,
         pageSize: 10,
-        keyword: ''
+        keyword: null
       }
-    },
+    }
+  },
+  computed: {
     rowSelection () {
       return {
         type: 'checkbox',
@@ -130,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)
     }
   }
diff --git a/src/views/compute/wizard/ComputeOfferingSelection.vue b/src/views/compute/wizard/ComputeOfferingSelection.vue
index de0a5e452..6d72af76f 100644
--- a/src/views/compute/wizard/ComputeOfferingSelection.vue
+++ b/src/views/compute/wizard/ComputeOfferingSelection.vue
@@ -25,16 +25,28 @@
     <a-table
       :columns="columns"
       :dataSource="tableSource"
-      :pagination="{ showSizeChanger: true, total: rowCount }"
+      :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>
 
@@ -88,17 +100,15 @@ export default {
         }
       ],
       selectedRowKeys: [],
-      oldZoneId: null
-    }
-  },
-  computed: {
-    options () {
-      return {
+      oldZoneId: null,
+      options: {
         page: 1,
         pageSize: 10,
-        keyword: ''
+        keyword: null
       }
-    },
+    }
+  },
+  computed: {
     tableSource () {
       return this.computeItems.map((item) => {
         var cpuNumberValue = item.cpunumber + ''
@@ -165,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)
     }
   }
diff --git a/src/views/compute/wizard/DiskOfferingSelection.vue b/src/views/compute/wizard/DiskOfferingSelection.vue
index f5ad911ff..b7ba7dd5d 100644
--- a/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -26,10 +26,9 @@
       :loading="loading"
       :columns="columns"
       :dataSource="tableSource"
-      :pagination="{showSizeChanger: true, total: rowCount}"
+      :pagination="false"
       :rowSelection="rowSelection"
       size="middle"
-      @change="handleTableChange"
       :scroll="{ y: 225 }"
     >
       <span slot="diskSizeTitle"><a-icon type="hdd" /> {{ $t('label.disksize') }}</span>
@@ -46,6 +45,19 @@
         <span v-else>-</span>
       </template>
     </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>
 
@@ -102,20 +114,18 @@ export default {
       ],
       selectedRowKeys: ['0'],
       dataItems: [],
-      oldZoneId: null
+      oldZoneId: null,
+      options: {
+        page: 1,
+        pageSize: 10,
+        keyword: null
+      }
     }
   },
   created () {
     this.initDataItem()
   },
   computed: {
-    options () {
-      return {
-        page: 1,
-        pageSize: 10,
-        keyword: ''
-      }
-    },
     tableSource () {
       return this.dataItems.map((item) => {
         return {
@@ -167,14 +177,16 @@ export default {
   methods: {
     initDataItem () {
       this.dataItems = []
-      this.dataItems.push({
-        id: '0',
-        name: this.$t('label.noselect'),
-        diskSize: undefined,
-        miniops: undefined,
-        maxiops: undefined,
-        isCustomized: undefined
-      })
+      if (this.options.page === 1) {
+        this.dataItems.push({
+          id: '0',
+          name: this.$t('label.noselect'),
+          diskSize: undefined,
+          miniops: undefined,
+          maxiops: undefined,
+          isCustomized: undefined
+        })
+      }
     },
     onSelectRow (value) {
       this.selectedRowKeys = value
@@ -182,12 +194,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)
     }
   }
diff --git a/src/views/compute/wizard/NetworkSelection.vue b/src/views/compute/wizard/NetworkSelection.vue
index d3a798977..2baf4c3db 100644
--- a/src/views/compute/wizard/NetworkSelection.vue
+++ b/src/views/compute/wizard/NetworkSelection.vue
@@ -30,9 +30,8 @@
       :columns="columns"
       :dataSource="networkItems"
       :rowKey="record => record.id"
-      :pagination="{showSizeChanger: true, size: 'small', total: rowCount}"
+      :pagination="false"
       :rowSelection="rowSelection"
-      @change="handleTableChange"
       :scroll="{ y: 225 }"
     >
       <a-list
@@ -51,6 +50,20 @@
         </a-list-item>
       </a-list>
     </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>
+
     <a-modal
       :visible="showCreateForm"
       :title="$t('label.add.network')"
@@ -116,17 +129,15 @@ export default {
         opts: []
       },
       showCreateForm: false,
-      oldZoneId: null
-    }
-  },
-  computed: {
-    options () {
-      return {
+      oldZoneId: null,
+      options: {
         page: 1,
         pageSize: 10,
-        keyword: ''
+        keyword: null
       }
-    },
+    }
+  },
+  computed: {
     columns () {
       let vpcFilter = []
       if (this.vpcs) {
@@ -234,12 +245,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)
     },
     listNetworkOfferings () {
diff --git a/src/views/compute/wizard/SshKeyPairSelection.vue b/src/views/compute/wizard/SshKeyPairSelection.vue
index c471400cb..c33625645 100644
--- a/src/views/compute/wizard/SshKeyPairSelection.vue
+++ b/src/views/compute/wizard/SshKeyPairSelection.vue
@@ -26,15 +26,26 @@
       :loading="loading"
       :columns="columns"
       :dataSource="tableSource"
-      :pagination="{ showSizeChanger: true, total: rowCount }"
       :rowSelection="rowSelection"
+      :pagination="false"
       size="middle"
-      @change="handleTableChange"
       :scroll="{ y: 225 }"
     >
       <template v-slot:account><a-icon type="user" /> {{ $t('label.account') }}</template>
       <template v-slot:domain><a-icon type="block" /> {{ $t('label.domain') }}</template>
     </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>
 
@@ -89,20 +100,18 @@ export default {
       ],
       selectedRowKeys: [this.$t('label.noselect')],
       dataItems: [],
-      oldZoneId: null
+      oldZoneId: null,
+      options: {
+        page: 1,
+        pageSize: 10,
+        keyword: null
+      }
     }
   },
   created () {
     this.initDataItem()
   },
   computed: {
-    options () {
-      return {
-        page: 1,
-        pageSize: 10,
-        keyword: ''
-      }
-    },
     tableSource () {
       return this.dataItems.map((item) => {
         return {
@@ -166,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)
     }
   }
diff --git a/src/views/compute/wizard/TemplateIsoRadioGroup.vue b/src/views/compute/wizard/TemplateIsoRadioGroup.vue
index a77d97ad5..f351aa77e 100644
--- a/src/views/compute/wizard/TemplateIsoRadioGroup.vue
+++ b/src/views/compute/wizard/TemplateIsoRadioGroup.vue
@@ -22,7 +22,7 @@
       itemLayout="vertical"
       size="small"
       :dataSource="osList"
-      :pagination="pagination">
+      :pagination="false">
       <a-list-item slot="renderItem" slot-scope="os, osIndex" key="os.id">
         <a-radio-group
           class="radio-group"
@@ -57,6 +57,19 @@
         </a-radio-group>
       </a-list-item>
     </a-list>
+
+    <div style="display: block; text-align: right;">
+      <a-pagination
+        size="small"
+        :current="page"
+        :pageSize="pageSize"
+        :total="itemCount"
+        :showTotal="total => `Total ${total} items`"
+        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
+        @change="onChangePage"
+        @showSizeChange="onChangePageSize"
+        showSizeChanger />
+    </div>
   </a-form-item>
 </template>
 
@@ -107,19 +120,6 @@ export default {
 
     this.$emit('emit-update-template-iso', this.inputDecorator, this.value)
   },
-  computed: {
-    pagination () {
-      return {
-        size: 'small',
-        page: 1,
-        pageSize: 10,
-        total: this.itemCount,
-        showSizeChanger: true,
-        onChange: this.onChangePage,
-        onShowSizeChange: this.onChangePageSize
-      }
-    }
-  },
   methods: {
     isShared (item) {
       return !item.ispublic && (item.account !== store.getters.userInfo.account)
@@ -131,13 +131,13 @@ export default {
       this.$emit('emit-update-template-iso', this.inputDecorator, id)
     },
     onChangePage (page, pageSize) {
-      this.pagination.page = page
-      this.pagination.pageSize = pageSize
+      this.page = page
+      this.pageSize = pageSize
       this.$forceUpdate()
     },
     onChangePageSize (page, pageSize) {
-      this.pagination.page = page
-      this.pagination.pageSize = pageSize
+      this.page = page
+      this.pageSize = pageSize
       this.$forceUpdate()
     },
     onFilterTag (tag) {

From 03a1208264c01a23816ce261da5fa7d14e3804d9 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 18 Jun 2020 16:00:54 +0700
Subject: [PATCH 5/6] revert affinityGroup total count

---
 src/views/compute/wizard/AffinityGroupSelection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/compute/wizard/AffinityGroupSelection.vue b/src/views/compute/wizard/AffinityGroupSelection.vue
index fbf1f0d29..25a9fbd8c 100644
--- a/src/views/compute/wizard/AffinityGroupSelection.vue
+++ b/src/views/compute/wizard/AffinityGroupSelection.vue
@@ -39,7 +39,7 @@
         size="small"
         :current="options.page"
         :pageSize="options.pageSize"
-        :total="items.length >= options.pageSize ? rowCount : items.length"
+        :total="rowCount"
         :showTotal="total => `Total ${total} items`"
         :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="onChangePage"

From 051c081686c4e4a200388b5c129ffb672eef3988 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Fri, 19 Jun 2020 08:15:21 +0700
Subject: [PATCH 6/6] fix error lint & disk offering selection

---
 src/views/compute/DeployVM.vue                | 14 +++++++++----
 .../compute/wizard/DiskOfferingSelection.vue  | 20 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 97d9b6d02..2446516e7 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -188,6 +188,7 @@
                       :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>
@@ -682,11 +683,10 @@ export default {
       return options
     },
     keyboardSelectOptions () {
-      const keyboardOpts = this.$store.getters.configs.keyboardOptions || {}
-      return Object.keys(keyboardOpts).map((keyboard) => {
+      return this.options.keyboards.map((keyboard) => {
         return {
-          label: this.$t(keyboardOpts[keyboard]),
-          value: keyboard
+          label: this.$t(keyboard.description),
+          value: keyboard.id
         }
       })
     }
@@ -981,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
diff --git a/src/views/compute/wizard/DiskOfferingSelection.vue b/src/views/compute/wizard/DiskOfferingSelection.vue
index b7ba7dd5d..7324eb1d3 100644
--- a/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -88,6 +88,10 @@ export default {
     zoneId: {
       type: String,
       default: () => ''
+    },
+    isIsoSelected: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -172,12 +176,26 @@ export default {
           this.$emit('select-disk-offering-item', '0')
         }
       }
+    },
+    isIsoSelected () {
+      if (this.isIsoSelected) {
+        this.dataItems = this.dataItems.filter(item => item.id !== '0')
+      } else {
+        this.dataItems.unshift({
+          id: '0',
+          name: this.$t('label.noselect'),
+          diskSize: undefined,
+          miniops: undefined,
+          maxiops: undefined,
+          isCustomized: undefined
+        })
+      }
     }
   },
   methods: {
     initDataItem () {
       this.dataItems = []
-      if (this.options.page === 1) {
+      if (this.options.page === 1 && !this.isIsoSelected) {
         this.dataItems.push({
           id: '0',
           name: this.$t('label.noselect'),