From 16c67a49109eb5e81c85efaa153a737dea4dc712 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 3 Feb 2020 14:53:44 +0700
Subject: [PATCH 01/24] Add filter possibility to selections

---
 src/views/compute/DeployVM.vue                | 105 +++++++++++++++---
 .../compute/wizard/AffinityGroupSelection.vue |  50 +++++++--
 src/views/compute/wizard/ComputeSelection.vue |  53 +++++++--
 .../compute/wizard/DiskOfferingSelection.vue  |  72 +++++++++---
 src/views/compute/wizard/NetworkSelection.vue |  75 +++++++++----
 .../compute/wizard/SshKeyPairSelection.vue    |  53 +++++++--
 .../compute/wizard/TemplateIsoSelection.vue   |  18 ++-
 7 files changed, 337 insertions(+), 89 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index eb0a5f723..e4cfc98eb 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -60,6 +60,7 @@
                     <template-iso-selection
                       input-decorator="templateid"
                       :items="options.templates"
+                      :loading="loading.templates"
                     ></template-iso-selection>
                     <disk-size-selection
                       input-decorator="rootdisksize"
@@ -70,6 +71,7 @@
                     <template-iso-selection
                       input-decorator="isoid"
                       :items="options.isos"
+                      :loading="loading.isos"
                     ></template-iso-selection>
                   </a-collapse-panel>
                 </a-collapse>
@@ -79,7 +81,9 @@
                 <compute-selection
                   :compute-items="options.serviceOfferings"
                   :value="serviceOffering ? serviceOffering.id : ''"
+                  :loading="loading.serviceOfferings"
                   @select-compute-item="($event) => updateComputeOffering($event)"
+                  @handle-search-filter="($event) => handleSearchFilter('serviceOfferings', $event)"
                 ></compute-selection>
               </a-collapse-panel>
 
@@ -87,7 +91,9 @@
                 <disk-offering-selection
                   :items="options.diskOfferings"
                   :value="diskOffering ? diskOffering.id : ''"
+                  :loading="loading.diskOfferings"
                   @select-disk-offering-item="($event) => updateDiskOffering($event)"
+                  @handle-search-filter="($event) => handleSearchFilter('diskOfferings', $event)"
                 ></disk-offering-selection>
                 <disk-size-selection
                   v-if="diskOffering && diskOffering.iscustomized"
@@ -99,7 +105,9 @@
                 <affinity-group-selection
                   :items="options.affinityGroups"
                   :value="affinityGroupIds"
+                  :loading="loading.affinityGroups"
                   @select-affinity-group-item="($event) => updateAffinityGroups($event)"
+                  @handle-search-filter="($event) => handleSearchFilter('affinityGroups', $event)"
                 ></affinity-group-selection>
               </a-collapse-panel>
 
@@ -113,7 +121,9 @@
                     <network-selection
                       :items="options.networks"
                       :value="networkOfferingIds"
+                      :loading="loading.networks"
                       @select-network-item="($event) => updateNetworks($event)"
+                      @handle-search-filter="($event) => handleSearchFilter('networks', $event)"
                     ></network-selection>
                   </a-collapse-panel>
 
@@ -134,7 +144,9 @@
                 <ssh-key-pair-selection
                   :items="options.sshKeyPairs"
                   :value="sshKeyPair ? sshKeyPair.name : ''"
+                  :loading="loading.sshKeyPairs"
                   @select-ssh-key-pair-item="($event) => updateSshKeyPairs($event)"
+                  @handle-search-filter="($event) => handleSearchFilter('sshKeyPairs', $event)"
                 ></ssh-key-pair-selection>
               </a-collapse-panel>
             </a-collapse>
@@ -219,6 +231,15 @@ export default {
         networks: [],
         sshKeyPairs: []
       },
+      loading: {
+        templates: false,
+        isos: false,
+        serviceOfferings: false,
+        diskOfferings: false,
+        affinityGroups: false,
+        networks: false,
+        sshKeyPairs: false
+      },
       instanceConfig: [],
       template: {},
       iso: {},
@@ -263,26 +284,49 @@ export default {
           }
         },
         serviceOfferings: {
-          list: 'listServiceOfferings'
+          list: 'listServiceOfferings',
+          options: {
+            page: 1,
+            pageSize: 10,
+            keyword: undefined
+          }
         },
         diskOfferings: {
-          list: 'listDiskOfferings'
+          list: 'listDiskOfferings',
+          options: {
+            page: 1,
+            pageSize: 10,
+            keyword: undefined
+          }
         },
         zones: {
           list: 'listZones'
         },
         affinityGroups: {
-          list: 'listAffinityGroups'
+          list: 'listAffinityGroups',
+          options: {
+            page: 1,
+            pageSize: 10,
+            keyword: undefined
+          }
         },
         sshKeyPairs: {
-          list: 'listSSHKeyPairs'
+          list: 'listSSHKeyPairs',
+          options: {
+            page: 1,
+            pageSize: 10,
+            keyword: undefined
+          }
         },
         networks: {
           list: 'listNetworks',
           options: {
             zoneid: _.get(this.zone, 'id'),
             canusefordeploy: true,
-            projectid: store.getters.project.id
+            projectid: store.getters.project.id,
+            page: 1,
+            pageSize: 10,
+            keyword: undefined
           }
         }
       }
@@ -368,7 +412,7 @@ export default {
     this.form.getFieldDecorator('affinitygroupids', { initialValue: [], preserve: true })
     this.form.getFieldDecorator('isoid', { initialValue: [], preserve: true })
     this.form.getFieldDecorator('networkids', { initialValue: [], preserve: true })
-    this.form.getFieldDecorator('keypair', { initialValue: [], preserve: true })
+    this.form.getFieldDecorator('keypair', { initialValue: undefined, preserve: true })
   },
   created () {
     _.each(this.params, this.fetchOptions)
@@ -409,6 +453,7 @@ export default {
       console.log('wizard submit')
     },
     fetchOptions (param, name) {
+      this.loading[name] = true
       param.loading = true
       param.opts = []
       const options = param.options || {}
@@ -416,6 +461,11 @@ export default {
       api(param.list, options).then((response) => {
         param.loading = false
         _.map(response, (responseItem, responseKey) => {
+          if (Object.keys(responseItem).length === 0) {
+            this.options[name] = []
+            this.$forceUpdate()
+            return
+          }
           if (!responseKey.includes('response')) {
             return
           }
@@ -431,26 +481,41 @@ export default {
       }).catch(function (error) {
         console.log(error.stack)
         param.loading = false
+      }).finally(() => {
+        this.loading[name] = false
       })
     },
     fetchIsos (isoFilter) {
-      api('listIsos', {
-        zoneid: _.get(this.zone, 'id'),
-        isofilter: isoFilter,
-        bootable: true
-      }).then((response) => {
-        const concatedIsos = _.concat(this.options.isos, _.get(response, 'listisosresponse.iso', []))
-        this.options.isos = _.uniqWith(concatedIsos, _.isEqual)
-        this.$forceUpdate()
-      }).catch((reason) => {
-        // ToDo: Handle errors
-        console.log(reason)
+      return new Promise((resolve, reject) => {
+        api('listIsos', {
+          zoneid: _.get(this.zone, 'id'),
+          isofilter: isoFilter,
+          bootable: true
+        }).then((response) => {
+          resolve(response)
+        }).catch((reason) => {
+          // ToDo: Handle errors
+          reject(reason)
+        })
       })
     },
     fetchAllIsos () {
+      const promises = []
       this.options.isos = []
+      this.loading.isos = true
       this.isoFilter.forEach((filter) => {
-        this.fetchIsos(filter)
+        promises.push(this.fetchIsos(filter))
+      })
+      Promise.all(promises).then(response => {
+        response.forEach((resItem) => {
+          const concatedIsos = _.concat(this.options.isos, _.get(resItem, 'listisosresponse.iso', []))
+          this.options.isos = _.uniqWith(concatedIsos, _.isEqual)
+          this.$forceUpdate()
+        })
+      }).catch((reason) => {
+        console.log(reason)
+      }).finally(() => {
+        this.loading.isos = false
       })
     },
     onTemplatesIsosCollapseChange (key) {
@@ -466,6 +531,10 @@ export default {
         this.fetchOptions(this.params.templates, 'templates')
         this.fetchOptions(this.params.networks, 'networks')
       })
+    },
+    handleSearchFilter (name, options) {
+      this.params[name].options = { ...options }
+      this.fetchOptions(this.params[name], name)
     }
   }
 }
diff --git a/src/views/compute/wizard/AffinityGroupSelection.vue b/src/views/compute/wizard/AffinityGroupSelection.vue
index c13cbcc9a..fad33fee1 100644
--- a/src/views/compute/wizard/AffinityGroupSelection.vue
+++ b/src/views/compute/wizard/AffinityGroupSelection.vue
@@ -16,15 +16,23 @@
 // under the License.
 
 <template>
-  <a-table
-    :columns="columns"
-    :dataSource="items"
-    :rowKey="record => record.id"
-    :pagination="{showSizeChanger: true}"
-    :rowSelection="rowSelection"
-    size="middle"
-  >
-  </a-table>
+  <div>
+    <a-input-search
+      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
+      placeholder="Search"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :loading="loading"
+      :columns="columns"
+      :dataSource="items"
+      :rowKey="record => record.id"
+      :pagination="{showSizeChanger: true}"
+      :rowSelection="rowSelection"
+      size="middle"
+    >
+    </a-table>
+  </div>
 </template>
 
 <script>
@@ -40,10 +48,15 @@ export default {
     value: {
       type: Array,
       default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      filter: '',
       columns: [
         {
           dataIndex: 'name',
@@ -60,6 +73,13 @@ export default {
     }
   },
   computed: {
+    options () {
+      return {
+        page: 1,
+        pageSize: 10,
+        keyword: ''
+      }
+    },
     rowSelection () {
       return {
         type: 'checkbox',
@@ -76,6 +96,18 @@ export default {
         this.selectedRowKeys = newValue
       }
     }
+  },
+  methods: {
+    handleSearch (value) {
+      this.filter = value
+      this.options.keyword = this.filter
+      this.$emit('handle-search-filter', this.options)
+    },
+    handleTableChange (pagination) {
+      this.options.page = pagination.current
+      this.options.pageSize = pagination.pageSize
+      this.$emit('handle-search-filter', this.options)
+    }
   }
 }
 </script>
diff --git a/src/views/compute/wizard/ComputeSelection.vue b/src/views/compute/wizard/ComputeSelection.vue
index dfe4e4950..64d460e53 100644
--- a/src/views/compute/wizard/ComputeSelection.vue
+++ b/src/views/compute/wizard/ComputeSelection.vue
@@ -16,16 +16,25 @@
 // under the License.
 
 <template>
-  <a-table
-    :columns="columns"
-    :dataSource="tableSource"
-    :pagination="{showSizeChanger: true}"
-    :rowSelection="rowSelection"
-    size="middle"
-  >
-    <span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('cpu') }}</span>
-    <span slot="ramTitle"><a-icon type="bulb" /> {{ $t('memory') }}</span>
-  </a-table>
+  <div>
+    <a-input-search
+      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
+      placeholder="Search"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :columns="columns"
+      :dataSource="tableSource"
+      :pagination="{showSizeChanger: true}"
+      :rowSelection="rowSelection"
+      :loading="loading"
+      size="middle"
+      @change="handleTableChange"
+    >
+      <span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('cpu') }}</span>
+      <span slot="ramTitle"><a-icon type="bulb" /> {{ $t('memory') }}</span>
+    </a-table>
+  </div>
 </template>
 
 <script>
@@ -39,10 +48,15 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      filter: '',
       columns: [
         {
           dataIndex: 'name',
@@ -64,6 +78,13 @@ export default {
     }
   },
   computed: {
+    options () {
+      return {
+        page: 1,
+        pageSize: 10,
+        keyword: ''
+      }
+    },
     tableSource () {
       return this.computeItems.map((item) => {
         return {
@@ -90,6 +111,18 @@ export default {
         this.selectedRowKeys = [newValue]
       }
     }
+  },
+  methods: {
+    handleSearch (value) {
+      this.filter = value
+      this.options.keyword = this.filter
+      this.$emit('handle-search-filter', this.options)
+    },
+    handleTableChange (pagination) {
+      this.options.page = pagination.current
+      this.options.pageSize = pagination.pageSize
+      this.$emit('handle-search-filter', this.options)
+    }
   }
 }
 </script>
diff --git a/src/views/compute/wizard/DiskOfferingSelection.vue b/src/views/compute/wizard/DiskOfferingSelection.vue
index f56374572..c8cf15f18 100644
--- a/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -16,20 +16,34 @@
 // under the License.
 
 <template>
-  <a-table
-    :columns="columns"
-    :dataSource="tableSource"
-    :pagination="{showSizeChanger: true}"
-    :rowSelection="rowSelection"
-    size="middle"
-  >
-    <span slot="diskSizeTitle"><a-icon type="hdd" /> {{ $t('disksize') }}</span>
-    <span slot="iopsTitle"><a-icon type="rocket" /> {{ $t('minMaxIops') }}</span>
-    <template slot="diskSize" slot-scope="text, record">
-      <div v-if="record.isCustomized">{{ $t('isCustomized') }}</div>
-      <div v-else>{{ record.diskSize }} GB</div>
-    </template>
-  </a-table>
+  <div>
+    <a-input-search
+      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
+      placeholder="Search"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :loading="loading"
+      :columns="columns"
+      :dataSource="tableSource"
+      :pagination="{showSizeChanger: true}"
+      :rowSelection="rowSelection"
+      size="middle"
+      @change="handleTableChange"
+    >
+      <span slot="diskSizeTitle"><a-icon type="hdd" /> {{ $t('disksize') }}</span>
+      <span slot="iopsTitle"><a-icon type="rocket" /> {{ $t('minMaxIops') }}</span>
+      <template slot="diskSize" slot-scope="text, record">
+        <div v-if="record.isCustomized">{{ $t('isCustomized') }}</div>
+        <div v-else>{{ record.diskSize }} GB</div>
+      </template>
+      <template slot="iops" slot-scope="text, record">
+        <span v-if="record.miniops && record.maxiops">{{ record.miniops }} - {{ record.maxiops }}</span>
+        <span v-else-if="record.miniops && !record.maxiops">{{ record.miniops }}</span>
+        <span v-else-if="!record.miniops && record.maxiops">{{ record.maxiops }}</span>
+      </template>
+    </a-table>
+  </div>
 </template>
 
 <script>
@@ -43,10 +57,15 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      filter: '',
       columns: [
         {
           dataIndex: 'name',
@@ -62,20 +81,29 @@ export default {
         {
           dataIndex: 'iops',
           slots: { title: 'iopsTitle' },
-          width: '30%'
+          width: '30%',
+          scopedSlots: { customRender: 'iops' }
         }
       ],
       selectedRowKeys: []
     }
   },
   computed: {
+    options () {
+      return {
+        page: 1,
+        pageSize: 10,
+        keyword: ''
+      }
+    },
     tableSource () {
       return this.items.map((item) => {
         return {
           key: item.id,
           name: item.name,
           diskSize: item.disksize,
-          iops: `${item.miniops} – ${item.maxiops}`,
+          miniops: item.miniops,
+          maxiops: item.maxiops,
           isCustomized: item.iscustomized
         }
       })
@@ -96,6 +124,18 @@ export default {
         this.selectedRowKeys = [newValue]
       }
     }
+  },
+  methods: {
+    handleSearch (value) {
+      this.filter = value
+      this.options.keyword = this.filter
+      this.$emit('handle-search-filter', this.options)
+    },
+    handleTableChange (pagination) {
+      this.options.page = pagination.current
+      this.options.pageSize = pagination.pageSize
+      this.$emit('handle-search-filter', this.options)
+    }
   }
 }
 </script>
diff --git a/src/views/compute/wizard/NetworkSelection.vue b/src/views/compute/wizard/NetworkSelection.vue
index 5eeeb342c..d0f6151b0 100644
--- a/src/views/compute/wizard/NetworkSelection.vue
+++ b/src/views/compute/wizard/NetworkSelection.vue
@@ -16,29 +16,38 @@
 // under the License.
 
 <template>
-  <a-table
-    :columns="columns"
-    :dataSource="networkItems"
-    :rowKey="record => record.id"
-    :pagination="{showSizeChanger: true}"
-    :rowSelection="rowSelection"
-  >
-    <a-list
-      slot="expandedRowRender"
-      slot-scope="record"
-      :key="record.id"
-      :dataSource="getDetails(record)"
-      size="small"
+  <div>
+    <a-input-search
+      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
+      placeholder="Search"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :loading="loading"
+      :columns="columns"
+      :dataSource="networkItems"
+      :rowKey="record => record.id"
+      :pagination="{showSizeChanger: true}"
+      :rowSelection="rowSelection"
+      @change="handleTableChange"
     >
-      <a-list-item slot="renderItem" slot-scope="item" :key="item.id">
-        <a-list-item-meta
-          :description="item.description"
-        >
-          <template v-slot:title>{{ item.title }}</template>
-        </a-list-item-meta>
-      </a-list-item>
-    </a-list>
-  </a-table>
+      <a-list
+        slot="expandedRowRender"
+        slot-scope="record"
+        :key="record.id"
+        :dataSource="getDetails(record)"
+        size="small"
+      >
+        <a-list-item slot="renderItem" slot-scope="item" :key="item.id">
+          <a-list-item-meta
+            :description="item.description"
+          >
+            <template v-slot:title>{{ item.title }}</template>
+          </a-list-item-meta>
+        </a-list-item>
+      </a-list>
+    </a-table>
+  </div>
 </template>
 
 <script>
@@ -56,16 +65,28 @@ export default {
     value: {
       type: Array,
       default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      filter: '',
       selectedRowKeys: [],
       vpcs: [],
       filteredInfo: null
     }
   },
   computed: {
+    options () {
+      return {
+        page: 1,
+        pageSize: 10,
+        keyword: ''
+      }
+    },
     columns () {
       let vpcFilter = []
       if (this.vpcs) {
@@ -146,6 +167,16 @@ export default {
           description: network.networkofferingdisplaytext
         }
       ]
+    },
+    handleSearch (value) {
+      this.filter = value
+      this.options.keyword = this.filter
+      this.$emit('handle-search-filter', this.options)
+    },
+    handleTableChange (pagination) {
+      this.options.page = pagination.current
+      this.options.pageSize = pagination.pageSize
+      this.$emit('handle-search-filter', this.options)
     }
   }
 }
diff --git a/src/views/compute/wizard/SshKeyPairSelection.vue b/src/views/compute/wizard/SshKeyPairSelection.vue
index 5e62a2425..7b81a9c8a 100644
--- a/src/views/compute/wizard/SshKeyPairSelection.vue
+++ b/src/views/compute/wizard/SshKeyPairSelection.vue
@@ -16,16 +16,25 @@
 // under the License.
 
 <template>
-  <a-table
-    :columns="columns"
-    :dataSource="tableSource"
-    :pagination="{showSizeChanger: true}"
-    :rowSelection="rowSelection"
-    size="middle"
-  >
-    <template v-slot:account><a-icon type="user" /> {{ $t('account') }}</template>
-    <template v-slot:domain><a-icon type="block" /> {{ $t('domain') }}</template>
-  </a-table>
+  <div>
+    <a-input-search
+      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
+      placeholder="Search"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :loading="loading"
+      :columns="columns"
+      :dataSource="tableSource"
+      :pagination="{showSizeChanger: true}"
+      :rowSelection="rowSelection"
+      size="middle"
+      @change="handleTableChange"
+    >
+      <template v-slot:account><a-icon type="user" /> {{ $t('account') }}</template>
+      <template v-slot:domain><a-icon type="block" /> {{ $t('domain') }}</template>
+    </a-table>
+  </div>
 </template>
 
 <script>
@@ -39,10 +48,15 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      filter: '',
       columns: [
         {
           dataIndex: 'name',
@@ -64,6 +78,13 @@ export default {
     }
   },
   computed: {
+    options () {
+      return {
+        page: 1,
+        pageSize: 10,
+        keyword: ''
+      }
+    },
     tableSource () {
       return this.items.map((item) => {
         return {
@@ -90,6 +111,18 @@ export default {
         this.selectedRowKeys = [newValue]
       }
     }
+  },
+  methods: {
+    handleSearch (value) {
+      this.filter = value
+      this.options.keyword = this.filter
+      this.$emit('handle-search-filter', this.options)
+    },
+    handleTableChange (pagination) {
+      this.options.page = pagination.current
+      this.options.pageSize = pagination.pageSize
+      this.$emit('handle-search-filter', this.options)
+    }
   }
 }
 </script>
diff --git a/src/views/compute/wizard/TemplateIsoSelection.vue b/src/views/compute/wizard/TemplateIsoSelection.vue
index 27796fee9..549e8817a 100644
--- a/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -22,10 +22,12 @@
       <span slot="tab">
         <os-logo :os-name="osName"></os-logo>
       </span>
-      <TemplateIsoRadioGroup
-        :osList="osList"
-        :input-decorator="inputDecorator"
-      ></TemplateIsoRadioGroup>
+      <a-spin :spinning="loading">
+        <TemplateIsoRadioGroup
+          :osList="osList"
+          :input-decorator="inputDecorator"
+        ></TemplateIsoRadioGroup>
+      </a-spin>
     </a-tab-pane>
   </a-tabs>
   <div v-else>
@@ -60,6 +62,10 @@ export default {
     inputDecorator: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -117,4 +123,8 @@ export default {
   .search-input {
     margin: 0.5rem 0 1rem;
   }
+
+  /deep/.ant-tabs-nav-scroll {
+    min-height: 45px;
+  }
 </style>

From 85c5fe935ab06325bfbc7b0eaebf666c70ef3d48 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 4 Feb 2020 13:11:28 +0700
Subject: [PATCH 02/24] Network selection: Add new network

---
 src/views/compute/DeployVM.vue                | 61 +++++++++++++-
 src/views/compute/wizard/NetworksCreation.vue | 82 +++++++++++++++----
 2 files changed, 126 insertions(+), 17 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index e4cfc98eb..92edc4d78 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -130,7 +130,10 @@
                   <a-collapse-panel
                     :header="$t('addNewNetworks')"
                   >
-                    <network-creation></network-creation>
+                    <network-creation
+                      :zoneId="zoneId"
+                      @handle-update-network="updateDataCreatedNetworks">
+                    </network-creation>
                   </a-collapse-panel>
                 </a-collapse>
 
@@ -220,6 +223,7 @@ export default {
   mixins: [mixin, mixinDevice],
   data () {
     return {
+      zoneId: '',
       vm: {},
       options: {
         templates: [],
@@ -247,6 +251,7 @@ export default {
       diskOffering: {},
       affinityGroups: [],
       networks: [],
+      networksAdd: [],
       zone: {},
       sshKeyPair: {},
       isoFilter: [
@@ -441,6 +446,9 @@ export default {
         networkids: ids
       })
     },
+    updateDataCreatedNetworks (networks) {
+      this.networksAdd = networks
+    },
     updateSshKeyPairs (name) {
       this.form.setFieldsValue({
         keypair: name
@@ -449,8 +457,20 @@ export default {
     getText (option) {
       return _.get(option, 'displaytext', _.get(option, 'name'))
     },
-    handleSubmit () {
+    handleSubmit (e) {
       console.log('wizard submit')
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        console.log(values)
+        this.createNetworks(values.zoneid).then(response => {
+          console.log(response)
+        }).catch(error => {
+          console.log(error)
+        })
+      })
     },
     fetchOptions (param, name) {
       this.loading[name] = true
@@ -523,7 +543,8 @@ export default {
         this.fetchAllIsos()
       }
     },
-    onSelectZoneId () {
+    onSelectZoneId (value) {
+      this.zoneId = value
       this.$nextTick(() => {
         if (this.options.isos.length !== 0) {
           this.fetchAllIsos()
@@ -535,6 +556,40 @@ export default {
     handleSearchFilter (name, options) {
       this.params[name].options = { ...options }
       this.fetchOptions(this.params[name], name)
+    },
+    createNetworks (zoneId) {
+      return new Promise((resolve, reject) => {
+        if (this.networksAdd.length === 0) {
+          resolve()
+          return
+        }
+        const promises = []
+        this.networksAdd.forEach((item) => {
+          const params = {}
+          params.zoneid = zoneId
+          params.name = item.name
+          params.displayText = item.name
+          params.networkOfferingId = item.networkOfferingId
+          params.vpcid = item.vpcid
+
+          promises.push(this.createNetwork(params))
+        })
+        Promise.all(promises).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    createNetwork (params) {
+      return new Promise((resolve, reject) => {
+        api('createNetwork', params).then(json => {
+          const networkRes = _.get(json, 'createnetworkresponse.network', [])
+          resolve(networkRes.id)
+        }).catch(error => {
+          reject(error)
+        })
+      })
     }
   }
 }
diff --git a/src/views/compute/wizard/NetworksCreation.vue b/src/views/compute/wizard/NetworksCreation.vue
index a708402ec..a9652c879 100644
--- a/src/views/compute/wizard/NetworksCreation.vue
+++ b/src/views/compute/wizard/NetworksCreation.vue
@@ -21,32 +21,37 @@
       v-if="networkItems.length > 0"
       :columns="columns"
       :dataSource="networkItems"
+      :rowKey="record => record.key"
       :pagination="false"
     >
-      <template v-slot:name="text">
+      <template slot="name" slot-scope="text, record">
         <a-input
-          :value="text"
-        ></a-input>
+          style="width: 15vw"
+          :placeholder="$t('networks')"
+          @change="($event) => handleChangeInput(record.key, $event.target.value, 'name')"/>
       </template>
-      <template v-slot:operation>
+      <template slot="operation" slot-scope="text, record">
         <a-popconfirm
-          v-if="networkItems.length"
+          v-if="networkItems.length > 1"
           title="Sure to delete?"
-          @confirm="removeItem()"
+          @confirm="removeItem(record.key)"
         >
           <a-button type="link">Delete</a-button>
         </a-popconfirm>
       </template>
-      <template v-slot:networkOffering>
+      <template slot="networkOffering" slot-scope="text, record">
         <a-select
           :placeholder="$t('networkOfferingId')"
           :options="networkOfferingOptions"
+          @change="($event) => handleChangeInput(record.key, $event, 'networkOfferingId')"
         ></a-select>
       </template>
-      <template v-slot:vpc>
+      <template slot="vpc" slot-scope="text, record">
         <a-select
           :placeholder="$t('vpc')"
           :options="vpcOptions"
+          style="min-width: 12vw"
+          @change="($event) => handleChangeInput(record.key, $event, 'vpcid')"
         ></a-select>
       </template>
     </a-table>
@@ -71,9 +76,19 @@ import _ from 'lodash'
  */
 export default {
   name: 'NetworkCreation',
+  props: {
+    zoneId: {
+      type: String,
+      default () {
+        return ''
+      }
+    }
+  },
   data () {
     return {
-      networkItems: [{}],
+      networkItems: [{
+        key: this.randomKey()
+      }],
       columns: [
         {
           dataIndex: 'name',
@@ -100,10 +115,20 @@ export default {
         }
       ],
       networkOfferings: [],
-      vpcs: []
+      vpcs: [],
+      dataNetworkCreated: []
     }
   },
   computed: {
+    network () {
+      return {
+        key: undefined,
+        name: undefined,
+        displayText: undefined,
+        networkOfferingId: undefined,
+        vpcid: undefined
+      }
+    },
     networkOfferingOptions () {
       return this.networkOfferings.map((offering) => {
         return {
@@ -123,7 +148,12 @@ export default {
   },
   created () {
     api('listNetworkOfferings', {
-      // ToDo: Add the zoneId
+      forvpc: false,
+      zoneid: this.zoneId,
+      guestiptype: 'Isolated',
+      supportedServices: 'SourceNat',
+      specifyvlan: false,
+      state: 'Enabled'
     }).then((response) => {
       this.networkOfferings = _.get(response, 'listnetworkofferingsresponse.networkoffering')
     })
@@ -136,10 +166,34 @@ export default {
   },
   methods: {
     addNewItem () {
-      this.networkItems.push({})
+      const key = this.randomKey()
+      this.networkItems.push({
+        key: key
+      })
+    },
+    removeItem (key) {
+      this.networkItems = this.networkItems.filter((item) => item.key !== key)
+      this.dataNetworkCreated = this.dataNetworkCreated.filter((item) => item.key !== key)
+    },
+    handleChangeInput (key, value, name) {
+      let network = { ...this.network }
+      const networkExist = this.dataNetworkCreated.filter((item) => item.key === key)
+      if (networkExist && networkExist.length > 0) {
+        network = { ...networkExist[0] }
+        this.dataNetworkCreated = this.dataNetworkCreated.filter((item) => item.key !== key)
+        network.key = key
+        network[name] = value
+      } else {
+        network.key = key
+        network[name] = value
+      }
+      this.dataNetworkCreated.push(network)
+      this.$emit('handle-update-network', this.dataNetworkCreated)
     },
-    removeItem () {
-      this.networkItems.pop()
+    randomKey () {
+      const now = new Date()
+      const random = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+      return [random, now.getTime()].join('')
     }
   }
 }

From 72e9df387becda511907aa89c4b182f03956e120 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 5 Feb 2020 13:39:31 +0700
Subject: [PATCH 03/24] Implement submit method

---
 src/views/compute/DeployVM.vue | 79 ++++++++++++++++++++++++++++++++--
 1 file changed, 76 insertions(+), 3 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 92edc4d78..9211ca993 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -291,6 +291,8 @@ export default {
         serviceOfferings: {
           list: 'listServiceOfferings',
           options: {
+            zoneid: _.get(this.zone, 'id'),
+            issystem: false,
             page: 1,
             pageSize: 10,
             keyword: undefined
@@ -299,6 +301,7 @@ export default {
         diskOfferings: {
           list: 'listDiskOfferings',
           options: {
+            zoneid: _.get(this.zone, 'id'),
             page: 1,
             pageSize: 10,
             keyword: undefined
@@ -318,6 +321,7 @@ export default {
         sshKeyPairs: {
           list: 'listSSHKeyPairs',
           options: {
+            zoneid: _.get(this.zone, 'id'),
             page: 1,
             pageSize: 10,
             keyword: undefined
@@ -464,11 +468,13 @@ export default {
         if (err) {
           return
         }
-        console.log(values)
         this.createNetworks(values.zoneid).then(response => {
-          console.log(response)
+          this.deployVirtualMachine(response, values)
         }).catch(error => {
-          console.log(error)
+          this.$notification.error({
+            message: 'Request Failed',
+            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
+          })
         })
       })
     },
@@ -539,6 +545,7 @@ export default {
       })
     },
     onTemplatesIsosCollapseChange (key) {
+      this.templateIsoKey = key
       if (key === 'isos' && this.options.isos.length === 0) {
         this.fetchAllIsos()
       }
@@ -590,6 +597,72 @@ export default {
           reject(error)
         })
       })
+    },
+    deployVirtualMachine (newNetworkIds, values) {
+      const deployVmData = {}
+      let networkIds = []
+      // step 1 : select zone
+      deployVmData.zoneid = values.zoneid
+      // step 2: select template/iso
+      if (this.templateIsoKey === 'templates') {
+        deployVmData.templateid = values.templateid
+      } else {
+        deployVmData.templateid = values.templateid
+      }
+      if (values.rootdisksize && values.rootdisksize > 0) {
+        deployVmData.rootdisksize = values.rootdisksize
+      }
+      // step 3: select service offering
+      deployVmData.serviceofferingid = values.computeofferingid
+      // step 4: select disk offering
+      deployVmData.diskofferingid = values.diskofferingid
+      if (values.size) {
+        deployVmData.size = values.size
+      }
+      // step 5: select an affinity group
+      deployVmData.affinitygroupids = values.affinitygroupids.join(',')
+      // step 6: select network
+      if (newNetworkIds && newNetworkIds.length > 0) {
+        networkIds = newNetworkIds.concat(values.networkids)
+      } else {
+        networkIds = values.networkids
+      }
+      if (networkIds.length > 0) {
+        for (let i = 0; i < networkIds.length; i++) {
+          deployVmData['iptonetworklist[' + i + '].networkid'] = networkIds[i]
+        }
+      }
+      // step 7: select ssh key pair
+      deployVmData.keypair = values.keypair
+      deployVmData.name = values.name
+      deployVmData.displayname = values.name
+      const title = this.$t('Launch Virtual Machine')
+      const description = this.$t('zone') + ' ' + values.zoneid
+      api('deployVirtualMachine', deployVmData).then(response => {
+        const jobId = response.deployvirtualmachineresponse.jobid
+        if (jobId) {
+          this.$pollJob({
+            jobId,
+            successMethod: result => {
+              const successDescription = result.jobresult.snapshot.name
+              this.$store.dispatch('AddAsyncJob', {
+                title: title,
+                jobid: jobId,
+                description: successDescription,
+                status: 'progress'
+              })
+            },
+            loadingMessage: `${title} in progress for ${description}`,
+            catchMessage: 'Error encountered while fetching async job result'
+          })
+        }
+        this.$router.back()
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
+        })
+      })
     }
   }
 }

From c345f1ec0f395945a082fd6a75de7f0e5b1c8539 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 11 Feb 2020 09:49:12 +0700
Subject: [PATCH 04/24] Remove network creation

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

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 9211ca993..0550927db 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -115,26 +115,13 @@
                 <a-collapse
                   :accordion="false"
                 >
-                  <a-collapse-panel
-                    :header="$t('existingNetworks')"
-                  >
-                    <network-selection
-                      :items="options.networks"
-                      :value="networkOfferingIds"
-                      :loading="loading.networks"
-                      @select-network-item="($event) => updateNetworks($event)"
-                      @handle-search-filter="($event) => handleSearchFilter('networks', $event)"
-                    ></network-selection>
-                  </a-collapse-panel>
-
-                  <a-collapse-panel
-                    :header="$t('addNewNetworks')"
-                  >
-                    <network-creation
-                      :zoneId="zoneId"
-                      @handle-update-network="updateDataCreatedNetworks">
-                    </network-creation>
-                  </a-collapse-panel>
+                  <network-selection
+                    :items="options.networks"
+                    :value="networkOfferingIds"
+                    :loading="loading.networks"
+                    @select-network-item="($event) => updateNetworks($event)"
+                    @handle-search-filter="($event) => handleSearchFilter('networks', $event)"
+                  ></network-selection>
                 </a-collapse>
 
                 <network-configuration

From 1a9c8498009ef58f2fa639bb41ade89066ec8c51 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 11 Feb 2020 09:53:51 +0700
Subject: [PATCH 05/24] Remove methods of network creation

---
 src/views/compute/DeployVM.vue | 129 +++++++++++++++------------------
 1 file changed, 57 insertions(+), 72 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 0550927db..9a84d221a 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -245,7 +245,8 @@ export default {
         'executable',
         'selfexecutable',
         'sharedexecutable'
-      ]
+      ],
+      templateIsoKey: ''
     }
   },
   computed: {
@@ -437,9 +438,6 @@ export default {
         networkids: ids
       })
     },
-    updateDataCreatedNetworks (networks) {
-      this.networksAdd = networks
-    },
     updateSshKeyPairs (name) {
       this.form.setFieldsValue({
         keypair: name
@@ -455,13 +453,66 @@ export default {
         if (err) {
           return
         }
-        this.createNetworks(values.zoneid).then(response => {
-          this.deployVirtualMachine(response, values)
+        const deployVmData = {}
+        // step 1 : select zone
+        deployVmData.zoneid = values.zoneid
+        // step 2: select template/iso
+        if (this.templateIsoKey === 'templates') {
+          deployVmData.templateid = values.templateid
+        } else {
+          deployVmData.templateid = values.templateid
+        }
+        if (values.rootdisksize && values.rootdisksize > 0) {
+          deployVmData.rootdisksize = values.rootdisksize
+        }
+        // step 3: select service offering
+        deployVmData.serviceofferingid = values.computeofferingid
+        // step 4: select disk offering
+        deployVmData.diskofferingid = values.diskofferingid
+        if (values.size) {
+          deployVmData.size = values.size
+        }
+        // step 5: select an affinity group
+        deployVmData.affinitygroupids = values.affinitygroupids.join(',')
+        // step 6: select network
+        if (values.networkids && values.networkids.length > 0) {
+          for (let i = 0; i < values.networkids.length; i++) {
+            deployVmData['iptonetworklist[' + i + '].networkid'] = values.networkids[i]
+          }
+        }
+        // step 7: select ssh key pair
+        deployVmData.keypair = values.keypair
+        deployVmData.name = values.name
+        deployVmData.displayname = values.name
+        const title = this.$t('Launch Virtual Machine')
+        const description = this.$t('zone') + ' ' + values.zoneid
+        this.loading.deploy = true
+        api('deployVirtualMachine', deployVmData).then(response => {
+          const jobId = response.deployvirtualmachineresponse.jobid
+          if (jobId) {
+            this.$pollJob({
+              jobId,
+              successMethod: result => {
+                const successDescription = result.jobresult.snapshot.name
+                this.$store.dispatch('AddAsyncJob', {
+                  title: title,
+                  jobid: jobId,
+                  description: successDescription,
+                  status: 'progress'
+                })
+              },
+              loadingMessage: `${title} in progress for ${description}`,
+              catchMessage: 'Error encountered while fetching async job result'
+            })
+          }
+          this.$router.back()
         }).catch(error => {
           this.$notification.error({
             message: 'Request Failed',
             description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
           })
+        }).finally(() => {
+          this.loading.deploy = false
         })
       })
     },
@@ -584,72 +635,6 @@ export default {
           reject(error)
         })
       })
-    },
-    deployVirtualMachine (newNetworkIds, values) {
-      const deployVmData = {}
-      let networkIds = []
-      // step 1 : select zone
-      deployVmData.zoneid = values.zoneid
-      // step 2: select template/iso
-      if (this.templateIsoKey === 'templates') {
-        deployVmData.templateid = values.templateid
-      } else {
-        deployVmData.templateid = values.templateid
-      }
-      if (values.rootdisksize && values.rootdisksize > 0) {
-        deployVmData.rootdisksize = values.rootdisksize
-      }
-      // step 3: select service offering
-      deployVmData.serviceofferingid = values.computeofferingid
-      // step 4: select disk offering
-      deployVmData.diskofferingid = values.diskofferingid
-      if (values.size) {
-        deployVmData.size = values.size
-      }
-      // step 5: select an affinity group
-      deployVmData.affinitygroupids = values.affinitygroupids.join(',')
-      // step 6: select network
-      if (newNetworkIds && newNetworkIds.length > 0) {
-        networkIds = newNetworkIds.concat(values.networkids)
-      } else {
-        networkIds = values.networkids
-      }
-      if (networkIds.length > 0) {
-        for (let i = 0; i < networkIds.length; i++) {
-          deployVmData['iptonetworklist[' + i + '].networkid'] = networkIds[i]
-        }
-      }
-      // step 7: select ssh key pair
-      deployVmData.keypair = values.keypair
-      deployVmData.name = values.name
-      deployVmData.displayname = values.name
-      const title = this.$t('Launch Virtual Machine')
-      const description = this.$t('zone') + ' ' + values.zoneid
-      api('deployVirtualMachine', deployVmData).then(response => {
-        const jobId = response.deployvirtualmachineresponse.jobid
-        if (jobId) {
-          this.$pollJob({
-            jobId,
-            successMethod: result => {
-              const successDescription = result.jobresult.snapshot.name
-              this.$store.dispatch('AddAsyncJob', {
-                title: title,
-                jobid: jobId,
-                description: successDescription,
-                status: 'progress'
-              })
-            },
-            loadingMessage: `${title} in progress for ${description}`,
-            catchMessage: 'Error encountered while fetching async job result'
-          })
-        }
-        this.$router.back()
-      }).catch(error => {
-        this.$notification.error({
-          message: 'Request Failed',
-          description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
-        })
-      })
     }
   }
 }

From 2776b4be0e139d6e0e4fb828a72e5a2766f99031 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 11 Feb 2020 10:51:29 +0700
Subject: [PATCH 06/24] Change layout from collapse to steps

---
 src/views/compute/DeployVM.vue | 431 +++++++++++++++++++++++----------
 1 file changed, 297 insertions(+), 134 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 9a84d221a..a04e9a418 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -25,126 +25,209 @@
             @submit="handleSubmit"
             layout="vertical"
           >
-            <a-collapse
-              :accordion="false"
-              :bordered="false"
-              defaultActiveKey="basic"
-            >
-              <a-collapse-panel :header="this.$t('BasicSetup')" key="basic">
-                <a-form-item :label="this.$t('name')">
-                  <a-input
-                    v-decorator="['name']"
-                    :placeholder="this.$t('vm.name.description')"
-                  />
-                </a-form-item>
+            <a-steps direction="vertical" size="small" :current="current">
+              <a-step :title="this.$t('BasicSetup')" :status="current > steps.BASIC ? 'finish' : ''">
+                <template slot="description">
+                  <div :class="{ 'hidden': current !== steps.BASIC }">
+                    <a-form-item :label="this.$t('name')">
+                      <a-input
+                        v-decorator="['name']"
+                        :placeholder="this.$t('vm.name.description')"
+                      />
+                    </a-form-item>
+                    <a-form-item :label="this.$t('zoneid')">
+                      <a-select
+                        v-decorator="['zoneid', {
+                          rules: [{ required: true, message: 'Please select option' }]
+                        }]"
+                        :placeholder="this.$t('vm.zone.description')"
+                        :options="zoneSelectOptions"
+                        @change="onSelectZoneId"
+                        :loading="loading.zones"
+                      ></a-select>
+                    </a-form-item>
+                    <a-button
+                      v-if="current < 6"
+                      type="primary"
+                      @click="handleNext"
+                      style="float: right">
+                      Next
+                    </a-button>
+                  </div>
+                </template>
+              </a-step>
+              <a-step
+                :title="this.$t('templateIso')"
+                :status="current > steps.TEMPLATE_ISO ? 'finish' : ''">
+                <template slot="description">
+                  <div
+                    v-if="stepMove > steps.BASIC"
+                    :class="{ 'hidden': current !== steps.TEMPLATE_ISO }">
+                    <a-collapse
+                      :accordion="true"
+                      defaultActiveKey="templates"
+                    >
+                      <a-collapse-panel :header="this.$t('Templates')" key="templates">
+                        <template-iso-selection
+                          input-decorator="templateid"
+                          :items="options.templates"
+                          :loading="loading.templates"
+                        ></template-iso-selection>
+                        <disk-size-selection input-decorator="rootdisksize" />
+                      </a-collapse-panel>
 
-                <a-form-item :label="this.$t('zoneid')">
-                  <a-select
-                    v-decorator="['zoneid', {
-                      rules: [{ required: true, message: 'Please select option' }]
-                    }]"
-                    :placeholder="this.$t('vm.zone.description')"
-                    :options="zoneSelectOptions"
-                    @change="onSelectZoneId"
-                  ></a-select>
-                </a-form-item>
-              </a-collapse-panel>
-
-              <a-collapse-panel :header="this.$t('templateIso')" key="templates-isos">
-                <a-collapse
-                  :accordion="true"
-                  defaultActiveKey="templates"
-                  @change="onTemplatesIsosCollapseChange"
-                >
-                  <a-collapse-panel :header="this.$t('Templates')" key="templates">
-                    <template-iso-selection
-                      input-decorator="templateid"
-                      :items="options.templates"
-                      :loading="loading.templates"
-                    ></template-iso-selection>
+                      <a-collapse-panel :header="this.$t('ISOs')" key="isos">
+                        <template-iso-selection
+                          input-decorator="isoid"
+                          :items="options.isos"
+                          :loading="loading.isos"
+                        ></template-iso-selection>
+                      </a-collapse-panel>
+                    </a-collapse>
+                    <a-button style="margin-left: 8px" @click="handlePrev">
+                      Previous
+                    </a-button>
+                    <a-button type="primary" @click="handleNext" style="float: right">
+                      Next
+                    </a-button>
+                  </div>
+                </template>
+              </a-step>
+              <a-step
+                :title="this.$t('serviceOfferingId')"
+                :status="current > steps.COMPUTE ? 'finish' : ''">
+                <template slot="description">
+                  <div
+                    slot="description"
+                    v-if="stepMove > steps.TEMPLATE_ISO"
+                    :class="{ 'hidden': current !== steps.COMPUTE }">
+                    <compute-selection
+                      :compute-items="options.serviceOfferings"
+                      :value="serviceOffering ? serviceOffering.id : ''"
+                      :loading="loading.serviceOfferings"
+                      @select-compute-item="($event) => updateComputeOffering($event)"
+                      @handle-search-filter="($event) => handleSearchFilter('serviceOfferings', $event)"
+                    ></compute-selection>
+                    <a-button style="margin-left: 8px" @click="handlePrev">
+                      Previous
+                    </a-button>
+                    <a-button type="primary" @click="handleNext" style="float: right">
+                      Next
+                    </a-button>
+                  </div>
+                </template>
+              </a-step>
+              <a-step
+                :title="this.$t('diskOfferingId')"
+                :status="current > steps.DISK_OFFERING ? 'finish' : ''">
+                <template slot="description">
+                  <div
+                    v-if="stepMove > steps.COMPUTE"
+                    :class="{ 'hidden': current !== steps.DISK_OFFERING }">
+                    <disk-offering-selection
+                      :items="options.diskOfferings"
+                      :value="diskOffering ? diskOffering.id : ''"
+                      :loading="loading.diskOfferings"
+                      @select-disk-offering-item="($event) => updateDiskOffering($event)"
+                      @handle-search-filter="($event) => handleSearchFilter('diskOfferings', $event)"
+                    ></disk-offering-selection>
                     <disk-size-selection
-                      input-decorator="rootdisksize"
+                      v-if="diskOffering && diskOffering.iscustomized"
+                      input-decorator="size"
                     ></disk-size-selection>
-                  </a-collapse-panel>
-
-                  <a-collapse-panel :header="this.$t('ISOs')" key="isos">
-                    <template-iso-selection
-                      input-decorator="isoid"
-                      :items="options.isos"
-                      :loading="loading.isos"
-                    ></template-iso-selection>
-                  </a-collapse-panel>
-                </a-collapse>
-              </a-collapse-panel>
-
-              <a-collapse-panel :header="this.$t('serviceOfferingId')" key="compute">
-                <compute-selection
-                  :compute-items="options.serviceOfferings"
-                  :value="serviceOffering ? serviceOffering.id : ''"
-                  :loading="loading.serviceOfferings"
-                  @select-compute-item="($event) => updateComputeOffering($event)"
-                  @handle-search-filter="($event) => handleSearchFilter('serviceOfferings', $event)"
-                ></compute-selection>
-              </a-collapse-panel>
-
-              <a-collapse-panel :header="this.$t('diskOfferingId')" key="disk">
-                <disk-offering-selection
-                  :items="options.diskOfferings"
-                  :value="diskOffering ? diskOffering.id : ''"
-                  :loading="loading.diskOfferings"
-                  @select-disk-offering-item="($event) => updateDiskOffering($event)"
-                  @handle-search-filter="($event) => handleSearchFilter('diskOfferings', $event)"
-                ></disk-offering-selection>
-                <disk-size-selection
-                  v-if="diskOffering && diskOffering.iscustomized"
-                  input-decorator="size"
-                ></disk-size-selection>
-              </a-collapse-panel>
-
-              <a-collapse-panel :header="this.$t('Affinity Groups')" key="affinity">
-                <affinity-group-selection
-                  :items="options.affinityGroups"
-                  :value="affinityGroupIds"
-                  :loading="loading.affinityGroups"
-                  @select-affinity-group-item="($event) => updateAffinityGroups($event)"
-                  @handle-search-filter="($event) => handleSearchFilter('affinityGroups', $event)"
-                ></affinity-group-selection>
-              </a-collapse-panel>
-
-              <a-collapse-panel :header="this.$t('networks')" key="networks">
-                <a-collapse
-                  :accordion="false"
-                >
-                  <network-selection
-                    :items="options.networks"
-                    :value="networkOfferingIds"
-                    :loading="loading.networks"
-                    @select-network-item="($event) => updateNetworks($event)"
-                    @handle-search-filter="($event) => handleSearchFilter('networks', $event)"
-                  ></network-selection>
-                </a-collapse>
-
-                <network-configuration
-                  v-if="networks.length > 0"
-                  :items="networks"
-                ></network-configuration>
-              </a-collapse-panel>
-
-              <a-collapse-panel :header="this.$t('sshKeyPairs')" key="sshKeyPairs">
-                <ssh-key-pair-selection
-                  :items="options.sshKeyPairs"
-                  :value="sshKeyPair ? sshKeyPair.name : ''"
-                  :loading="loading.sshKeyPairs"
-                  @select-ssh-key-pair-item="($event) => updateSshKeyPairs($event)"
-                  @handle-search-filter="($event) => handleSearchFilter('sshKeyPairs', $event)"
-                ></ssh-key-pair-selection>
-              </a-collapse-panel>
-            </a-collapse>
-
-            <div class="card-footer">
+                    <a-button style="margin-left: 8px" @click="handlePrev">
+                      Previous
+                    </a-button>
+                    <a-button type="primary" @click="handleNext" style="float: right">
+                      Next
+                    </a-button>
+                  </div>
+                </template>
+              </a-step>
+              <a-step
+                :title="this.$t('Affinity Groups')"
+                :status="current > steps.AFFINITY_GROUP ? 'finish' : ''">
+                <template slot="description">
+                  <div
+                    v-if="stepMove > steps.DISK_OFFERING"
+                    :class="{ 'hidden': current !== steps.AFFINITY_GROUP }">
+                    <affinity-group-selection
+                      :items="options.affinityGroups"
+                      :value="affinityGroupIds"
+                      :loading="loading.affinityGroups"
+                      @select-affinity-group-item="($event) => updateAffinityGroups($event)"
+                      @handle-search-filter="($event) => handleSearchFilter('affinityGroups', $event)"
+                    ></affinity-group-selection>
+                    <a-button style="margin-left: 8px" @click="handlePrev">
+                      Previous
+                    </a-button>
+                    <a-button type="primary" @click="handleNext" style="float: right">
+                      Next
+                    </a-button>
+                  </div>
+                </template>
+              </a-step>
+              <a-step
+                :title="this.$t('networks')"
+                :status="current > steps.NETWORK ? 'finish' : ''">
+                <template slot="description">
+                  <div
+                    v-if="stepMove > steps.AFFINITY_GROUP"
+                    :class="{ 'hidden': current !== steps.NETWORK }">
+                    <network-selection
+                      :items="options.networks"
+                      :value="networkOfferingIds"
+                      :loading="loading.networks"
+                      :zoneId="zoneId"
+                      @select-network-item="($event) => updateNetworks($event)"
+                      @handle-search-filter="($event) => handleSearchFilter('networks', $event)"
+                    ></network-selection>
+                    <network-configuration
+                      v-if="networks.length > 0"
+                      :items="networks"
+                    ></network-configuration>
+                    <a-button style="margin-left: 8px" @click="handlePrev">
+                      Previous
+                    </a-button>
+                    <a-button type="primary" @click="handleNext" style="float: right">
+                      Next
+                    </a-button>
+                  </div>
+                </template>
+              </a-step>
+              <a-step
+                :title="this.$t('sshKeyPairs')"
+                :status="current > steps.SSH_KEY_PAIR ? 'finish' : ''">
+                <template slot="description">
+                  <div
+                    v-if="stepMove > steps.NETWORK"
+                    :class="{ 'hidden': current !== steps.SSH_KEY_PAIR }">
+                    <ssh-key-pair-selection
+                      :items="options.sshKeyPairs"
+                      :value="sshKeyPair ? sshKeyPair.name : ''"
+                      :loading="loading.sshKeyPairs"
+                      @select-ssh-key-pair-item="($event) => updateSshKeyPairs($event)"
+                      @handle-search-filter="($event) => handleSearchFilter('sshKeyPairs', $event)"
+                    />
+                    <a-button style="margin-left: 8px" @click="handlePrev">
+                      Previous
+                    </a-button>
+                    <a-button type="primary" @click="handleNext" style="float: right">
+                      Next
+                    </a-button>
+                  </div>
+                </template>
+              </a-step>
+            </a-steps>
+            <div class="card-footer" v-if="current > steps.SSH_KEY_PAIR">
               <!-- ToDo extract as component -->
-              <a-button @click="() => this.$router.back()">{{ this.$t('cancel') }}</a-button>
-              <a-button type="primary" @click="handleSubmit">{{ this.$t('submit') }}</a-button>
+              <a-button @click="() => this.$router.back()" :loading="loading.deploy">
+                {{ this.$t('cancel') }}
+              </a-button>
+              <a-button type="primary" @click="handleSubmit" :loading="loading.deploy">
+                <a-icon type="poweroff" />
+                {{ this.$t('Launch VM') }}
+              </a-button>
             </div>
           </a-form>
         </a-card>
@@ -211,6 +294,8 @@ export default {
   data () {
     return {
       zoneId: '',
+      current: 0,
+      stepMove: 0,
       vm: {},
       options: {
         templates: [],
@@ -223,6 +308,7 @@ export default {
         sshKeyPairs: []
       },
       loading: {
+        deploy: false,
         templates: false,
         isos: false,
         serviceOfferings: false,
@@ -246,7 +332,17 @@ export default {
         'selfexecutable',
         'sharedexecutable'
       ],
-      templateIsoKey: ''
+      templateIsoKey: '',
+      steps: {
+        BASIC: 0,
+        TEMPLATE_ISO: 1,
+        COMPUTE: 2,
+        DISK_OFFERING: 3,
+        AFFINITY_GROUP: 4,
+        NETWORK: 5,
+        SSH_KEY_PAIR: 6
+      },
+      initDataConfig: {}
     }
   },
   computed: {
@@ -341,6 +437,11 @@ export default {
     }
   },
   watch: {
+    '$route' (to, from) {
+      if (to.name === 'deployVirtualMachine') {
+        this.resetData()
+      }
+    },
     instanceConfig (instanceConfig) {
       this.template = _.find(this.options.templates, (option) => option.id === instanceConfig.templateid)
       this.iso = _.find(this.options.isos, (option) => option.id === instanceConfig.isoid)
@@ -412,12 +513,22 @@ export default {
     this.form.getFieldDecorator('keypair', { initialValue: undefined, preserve: true })
   },
   created () {
-    _.each(this.params, this.fetchOptions)
-    Vue.nextTick().then(() => {
-      this.instanceConfig = this.form.getFieldsValue() // ToDo: maybe initialize with some other defaults
-    })
+    this.fetchData()
   },
   methods: {
+    fetchData () {
+      this.fetchOptions(this.params.zones, 'zones')
+      Vue.nextTick().then(() => {
+        this.instanceConfig = this.form.getFieldsValue() // ToDo: maybe initialize with some other defaults
+      })
+    },
+    resetData () {
+      this.vm = {}
+      this.current = 0
+      this.stepMove = 0
+      this.form.resetFields()
+      this.fetchData()
+    },
     updateComputeOffering (id) {
       this.form.setFieldsValue({
         computeofferingid: id
@@ -582,26 +693,74 @@ export default {
         this.loading.isos = false
       })
     },
-    onTemplatesIsosCollapseChange (key) {
-      this.templateIsoKey = key
-      if (key === 'isos' && this.options.isos.length === 0) {
-        this.fetchAllIsos()
-      }
-    },
     onSelectZoneId (value) {
+      this.current = 0
       this.zoneId = value
-      this.$nextTick(() => {
-        if (this.options.isos.length !== 0) {
-          this.fetchAllIsos()
-        }
-        this.fetchOptions(this.params.templates, 'templates')
-        this.fetchOptions(this.params.networks, 'networks')
-      })
     },
     handleSearchFilter (name, options) {
       this.params[name].options = { ...options }
       this.fetchOptions(this.params[name], name)
     },
+    handleNext () {
+      switch (this.current) {
+        case this.steps.BASIC:
+          this.validateFormFields('zoneid').then((flag) => {
+            if (flag) {
+              this.current++
+              this.stepMove = this.current
+              this.fetchOptions(this.params.templates, 'templates')
+              this.fetchAllIsos()
+            }
+          })
+          break
+        case this.steps.TEMPLATE_ISO:
+          this.validateFormFields('templateid').then((flag) => {
+            if (flag) {
+              this.current++
+              this.stepMove = this.current
+              this.fetchOptions(this.params.serviceOfferings, 'serviceOfferings')
+            }
+          })
+          break
+        case this.steps.COMPUTE:
+          this.current++
+          this.stepMove = this.current
+          this.fetchOptions(this.params.diskOfferings, 'diskOfferings')
+          break
+        case this.steps.DISK_OFFERING:
+          this.current++
+          this.stepMove = this.current
+          this.fetchOptions(this.params.affinityGroups, 'affinityGroups')
+          break
+        case this.steps.AFFINITY_GROUP:
+          this.current++
+          this.stepMove = this.current
+          this.fetchOptions(this.params.networks, 'networks')
+          break
+        case this.steps.NETWORK:
+          this.current++
+          this.stepMove = this.current
+          this.fetchOptions(this.params.sshKeyPairs, 'sshKeyPairs')
+          break
+        default:
+          this.current++
+          this.stepMove = this.current
+          break
+      }
+    },
+    handlePrev () {
+      this.current--
+    },
+    validateFormFields (field) {
+      return new Promise((resolve) => {
+        this.form.validateFields([field], (err, values) => {
+          if (!err) {
+            resolve(true)
+          }
+          resolve(false)
+        })
+      })
+    },
     createNetworks (zoneId) {
       return new Promise((resolve, reject) => {
         if (this.networksAdd.length === 0) {
@@ -674,4 +833,8 @@ export default {
     border-radius: @border-radius-base !important;
     margin: 0 0 1.2rem;
   }
+
+  .hidden {
+    display: none;
+  }
 </style>

From 0cf26b8ff189f4baa14f84d78e1127faa739fed9 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 11 Feb 2020 10:55:40 +0700
Subject: [PATCH 07/24] Add translations for all input placeholders & reset the
 form on navigating away

---
 src/views/compute/DeployVM.vue                |  9 ++++-
 .../compute/wizard/NetworkConfiguration.vue   | 12 +++---
 .../compute/wizard/TemplateIsoSelection.vue   | 40 +++++++++----------
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index a04e9a418..9d63b148c 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -32,7 +32,7 @@
                     <a-form-item :label="this.$t('name')">
                       <a-input
                         v-decorator="['name']"
-                        :placeholder="this.$t('vm.name.description')"
+                        :placeholder="apiParams.name.description"
                       />
                     </a-form-item>
                     <a-form-item :label="this.$t('zoneid')">
@@ -40,7 +40,7 @@
                         v-decorator="['zoneid', {
                           rules: [{ required: true, message: 'Please select option' }]
                         }]"
-                        :placeholder="this.$t('vm.zone.description')"
+                        :placeholder="apiParams.zoneid.description"
                         :options="zoneSelectOptions"
                         @change="onSelectZoneId"
                         :loading="loading.zones"
@@ -511,6 +511,11 @@ export default {
     this.form.getFieldDecorator('isoid', { initialValue: [], preserve: true })
     this.form.getFieldDecorator('networkids', { initialValue: [], preserve: true })
     this.form.getFieldDecorator('keypair', { initialValue: undefined, preserve: true })
+    this.apiParams = {}
+    this.apiDeployVirtualMachine = this.$store.getters.apis.deployVirtualMachine || {}
+    this.apiDeployVirtualMachine.params.forEach(param => {
+      this.apiParams[param.name] = param
+    })
   },
   created () {
     this.fetchData()
diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index d647e9d70..ec1e3eaba 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -24,15 +24,15 @@
     :rowKey="record => record.id"
     size="middle"
   >
-    <template v-slot:ipAddress="text">
+    <template slot="ipAddress">
       <a-input
-        :value="text"
-      ></a-input>
+        style="width: 150px;"
+        :placeholder="$t('ipAddress')"/>
     </template>
-    <template v-slot:macAddress="text">
+    <template slot="macAddress">
       <a-input
-        :value="text"
-      ></a-input>
+        style="width: 150px;"
+        :placeholder="$t('macAddress')"/>
     </template>
   </a-table>
 </template>
diff --git a/src/views/compute/wizard/TemplateIsoSelection.vue b/src/views/compute/wizard/TemplateIsoSelection.vue
index 549e8817a..f64670f1a 100644
--- a/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -16,30 +16,30 @@
 // under the License.
 
 <template>
-  <a-tabs :defaultActiveKey="Object.keys(osTypes)[0]" v-if="view === TAB_VIEW">
-    <a-button icon="search" slot="tabBarExtraContent" @click="() => toggleView(FILTER_VIEW)"/>
-    <a-tab-pane v-for="(osList, osName) in osTypes" :key="osName">
-      <span slot="tab">
-        <os-logo :os-name="osName"></os-logo>
-      </span>
-      <a-spin :spinning="loading">
+  <a-spin :spinning="loading">
+    <a-tabs :defaultActiveKey="Object.keys(osTypes)[0]" v-if="view === TAB_VIEW">
+      <a-button icon="search" slot="tabBarExtraContent" @click="() => toggleView(FILTER_VIEW)"/>
+      <a-tab-pane v-for="(osList, osName) in osTypes" :key="osName">
+        <span slot="tab">
+          <os-logo :os-name="osName"></os-logo>
+        </span>
         <TemplateIsoRadioGroup
           :osList="osList"
           :input-decorator="inputDecorator"
         ></TemplateIsoRadioGroup>
-      </a-spin>
-    </a-tab-pane>
-  </a-tabs>
-  <div v-else>
-    <a-input class="search-input" v-model="filter">
-      <a-icon slot="prefix" type="search"/>
-      <a-icon slot="addonAfter" type="close" @click="toggleView(TAB_VIEW)"/>
-    </a-input>
-    <TemplateIsoRadioGroup
-      :osList="filteredItems"
-      :input-decorator="inputDecorator"
-    ></TemplateIsoRadioGroup>
-  </div>
+      </a-tab-pane>
+    </a-tabs>
+    <div v-else>
+      <a-input class="search-input" v-model="filter">
+        <a-icon slot="prefix" type="search"/>
+        <a-icon slot="addonAfter" type="close" @click="toggleView(TAB_VIEW)"/>
+      </a-input>
+      <TemplateIsoRadioGroup
+        :osList="filteredItems"
+        :input-decorator="inputDecorator"
+      ></TemplateIsoRadioGroup>
+    </div>
+  </a-spin>
 </template>
 
 <script>

From 28e351ec76804b44f9ff59ce663dad5fef23eb3e Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 11 Feb 2020 16:47:39 +0700
Subject: [PATCH 08/24] Add pod, cluster and host in step Basic Setup

---
 src/views/compute/DeployVM.vue | 82 +++++++++++++++++++++++++++++++++-
 1 file changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 9d63b148c..bd549b0cd 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -46,6 +46,30 @@
                         :loading="loading.zones"
                       ></a-select>
                     </a-form-item>
+                    <a-form-item :label="this.$t('podId')">
+                      <a-select
+                        v-decorator="['podid']"
+                        :placeholder="apiParams.podid.description"
+                        :options="podSelectOptions"
+                        :loading="loading.pods"
+                      ></a-select>
+                    </a-form-item>
+                    <a-form-item :label="this.$t('clusterid')">
+                      <a-select
+                        v-decorator="['clusterid']"
+                        :placeholder="apiParams.clusterid.description"
+                        :options="clusterSelectOptions"
+                        :loading="loading.clusters"
+                      ></a-select>
+                    </a-form-item>
+                    <a-form-item :label="this.$t('hostId')">
+                      <a-select
+                        v-decorator="['hostid']"
+                        :placeholder="apiParams.hostid.description"
+                        :options="hostSelectOptions"
+                        :loading="loading.hosts"
+                      ></a-select>
+                    </a-form-item>
                     <a-button
                       v-if="current < 6"
                       type="primary"
@@ -305,7 +329,10 @@ export default {
         zones: [],
         affinityGroups: [],
         networks: [],
-        sshKeyPairs: []
+        sshKeyPairs: [],
+        pods: [],
+        clusters: [],
+        hosts: []
       },
       loading: {
         deploy: false,
@@ -315,7 +342,11 @@ export default {
         diskOfferings: false,
         affinityGroups: false,
         networks: false,
-        sshKeyPairs: false
+        sshKeyPairs: false,
+        zones: false,
+        pods: false,
+        clusters: false,
+        hosts: false
       },
       instanceConfig: [],
       template: {},
@@ -421,6 +452,26 @@ export default {
             pageSize: 10,
             keyword: undefined
           }
+        },
+        pods: {
+          list: 'listPods',
+          options: {
+            zoneid: _.get(this.zone, 'id')
+          }
+        },
+        clusters: {
+          list: 'listClusters',
+          options: {
+            zoneid: _.get(this.zone, 'id')
+          }
+        },
+        hosts: {
+          list: 'listHosts',
+          options: {
+            zoneid: _.get(this.zone, 'id'),
+            state: 'Up',
+            type: 'Routing'
+          }
         }
       }
     },
@@ -434,6 +485,30 @@ export default {
           value: zone.id
         }
       })
+    },
+    podSelectOptions () {
+      return this.options.pods.map((pod) => {
+        return {
+          label: pod.name,
+          value: pod.id
+        }
+      })
+    },
+    clusterSelectOptions () {
+      return this.options.clusters.map((cluster) => {
+        return {
+          label: cluster.name,
+          value: cluster.id
+        }
+      })
+    },
+    hostSelectOptions () {
+      return this.options.hosts.map((host) => {
+        return {
+          label: host.name,
+          value: host.id
+        }
+      })
     }
   },
   watch: {
@@ -523,6 +598,9 @@ export default {
   methods: {
     fetchData () {
       this.fetchOptions(this.params.zones, 'zones')
+      this.fetchOptions(this.params.pods, 'pods')
+      this.fetchOptions(this.params.clusters, 'clusters')
+      this.fetchOptions(this.params.hosts, 'hosts')
       Vue.nextTick().then(() => {
         this.instanceConfig = this.form.getFieldsValue() // ToDo: maybe initialize with some other defaults
       })

From fbddc734e72e828aeb715907e68771becd4eff02 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 12 Feb 2020 11:36:07 +0700
Subject: [PATCH 09/24] Change the step mechanism & add parameters to the api

---
 src/views/compute/DeployVM.vue                | 210 +++---------------
 .../compute/wizard/NetworkConfiguration.vue   |   8 +-
 2 files changed, 38 insertions(+), 180 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index bd549b0cd..2d909b882 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -25,10 +25,10 @@
             @submit="handleSubmit"
             layout="vertical"
           >
-            <a-steps direction="vertical" size="small" :current="current">
-              <a-step :title="this.$t('BasicSetup')" :status="current > steps.BASIC ? 'finish' : ''">
+            <a-steps direction="vertical" size="small">
+              <a-step :title="this.$t('BasicSetup')" status="process">
                 <template slot="description">
-                  <div :class="{ 'hidden': current !== steps.BASIC }">
+                  <div style="margin-top: 15px">
                     <a-form-item :label="this.$t('name')">
                       <a-input
                         v-decorator="['name']"
@@ -70,26 +70,18 @@
                         :loading="loading.hosts"
                       ></a-select>
                     </a-form-item>
-                    <a-button
-                      v-if="current < 6"
-                      type="primary"
-                      @click="handleNext"
-                      style="float: right">
-                      Next
-                    </a-button>
                   </div>
                 </template>
               </a-step>
               <a-step
                 :title="this.$t('templateIso')"
-                :status="current > steps.TEMPLATE_ISO ? 'finish' : ''">
+                :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
-                  <div
-                    v-if="stepMove > steps.BASIC"
-                    :class="{ 'hidden': current !== steps.TEMPLATE_ISO }">
+                  <div v-if="zoneSelected">
                     <a-collapse
                       :accordion="true"
                       defaultActiveKey="templates"
+                      @change="onTemplatesIsosCollapseChange"
                     >
                       <a-collapse-panel :header="this.$t('Templates')" key="templates">
                         <template-iso-selection
@@ -108,23 +100,14 @@
                         ></template-iso-selection>
                       </a-collapse-panel>
                     </a-collapse>
-                    <a-button style="margin-left: 8px" @click="handlePrev">
-                      Previous
-                    </a-button>
-                    <a-button type="primary" @click="handleNext" style="float: right">
-                      Next
-                    </a-button>
                   </div>
                 </template>
               </a-step>
               <a-step
                 :title="this.$t('serviceOfferingId')"
-                :status="current > steps.COMPUTE ? 'finish' : ''">
+                :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
-                  <div
-                    slot="description"
-                    v-if="stepMove > steps.TEMPLATE_ISO"
-                    :class="{ 'hidden': current !== steps.COMPUTE }">
+                  <div v-if="zoneSelected">
                     <compute-selection
                       :compute-items="options.serviceOfferings"
                       :value="serviceOffering ? serviceOffering.id : ''"
@@ -132,22 +115,14 @@
                       @select-compute-item="($event) => updateComputeOffering($event)"
                       @handle-search-filter="($event) => handleSearchFilter('serviceOfferings', $event)"
                     ></compute-selection>
-                    <a-button style="margin-left: 8px" @click="handlePrev">
-                      Previous
-                    </a-button>
-                    <a-button type="primary" @click="handleNext" style="float: right">
-                      Next
-                    </a-button>
                   </div>
                 </template>
               </a-step>
               <a-step
                 :title="this.$t('diskOfferingId')"
-                :status="current > steps.DISK_OFFERING ? 'finish' : ''">
+                :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
-                  <div
-                    v-if="stepMove > steps.COMPUTE"
-                    :class="{ 'hidden': current !== steps.DISK_OFFERING }">
+                  <div v-if="zoneSelected">
                     <disk-offering-selection
                       :items="options.diskOfferings"
                       :value="diskOffering ? diskOffering.id : ''"
@@ -159,22 +134,14 @@
                       v-if="diskOffering && diskOffering.iscustomized"
                       input-decorator="size"
                     ></disk-size-selection>
-                    <a-button style="margin-left: 8px" @click="handlePrev">
-                      Previous
-                    </a-button>
-                    <a-button type="primary" @click="handleNext" style="float: right">
-                      Next
-                    </a-button>
                   </div>
                 </template>
               </a-step>
               <a-step
                 :title="this.$t('Affinity Groups')"
-                :status="current > steps.AFFINITY_GROUP ? 'finish' : ''">
+                :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
-                  <div
-                    v-if="stepMove > steps.DISK_OFFERING"
-                    :class="{ 'hidden': current !== steps.AFFINITY_GROUP }">
+                  <div v-if="zoneSelected">
                     <affinity-group-selection
                       :items="options.affinityGroups"
                       :value="affinityGroupIds"
@@ -182,22 +149,14 @@
                       @select-affinity-group-item="($event) => updateAffinityGroups($event)"
                       @handle-search-filter="($event) => handleSearchFilter('affinityGroups', $event)"
                     ></affinity-group-selection>
-                    <a-button style="margin-left: 8px" @click="handlePrev">
-                      Previous
-                    </a-button>
-                    <a-button type="primary" @click="handleNext" style="float: right">
-                      Next
-                    </a-button>
                   </div>
                 </template>
               </a-step>
               <a-step
                 :title="this.$t('networks')"
-                :status="current > steps.NETWORK ? 'finish' : ''">
+                :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
-                  <div
-                    v-if="stepMove > steps.AFFINITY_GROUP"
-                    :class="{ 'hidden': current !== steps.NETWORK }">
+                  <div v-if="zoneSelected">
                     <network-selection
                       :items="options.networks"
                       :value="networkOfferingIds"
@@ -210,22 +169,14 @@
                       v-if="networks.length > 0"
                       :items="networks"
                     ></network-configuration>
-                    <a-button style="margin-left: 8px" @click="handlePrev">
-                      Previous
-                    </a-button>
-                    <a-button type="primary" @click="handleNext" style="float: right">
-                      Next
-                    </a-button>
                   </div>
                 </template>
               </a-step>
               <a-step
                 :title="this.$t('sshKeyPairs')"
-                :status="current > steps.SSH_KEY_PAIR ? 'finish' : ''">
+                :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
-                  <div
-                    v-if="stepMove > steps.NETWORK"
-                    :class="{ 'hidden': current !== steps.SSH_KEY_PAIR }">
+                  <div v-if="zoneSelected">
                     <ssh-key-pair-selection
                       :items="options.sshKeyPairs"
                       :value="sshKeyPair ? sshKeyPair.name : ''"
@@ -233,17 +184,11 @@
                       @select-ssh-key-pair-item="($event) => updateSshKeyPairs($event)"
                       @handle-search-filter="($event) => handleSearchFilter('sshKeyPairs', $event)"
                     />
-                    <a-button style="margin-left: 8px" @click="handlePrev">
-                      Previous
-                    </a-button>
-                    <a-button type="primary" @click="handleNext" style="float: right">
-                      Next
-                    </a-button>
                   </div>
                 </template>
               </a-step>
             </a-steps>
-            <div class="card-footer" v-if="current > steps.SSH_KEY_PAIR">
+            <div class="card-footer">
               <!-- ToDo extract as component -->
               <a-button @click="() => this.$router.back()" :loading="loading.deploy">
                 {{ this.$t('cancel') }}
@@ -318,8 +263,7 @@ export default {
   data () {
     return {
       zoneId: '',
-      current: 0,
-      stepMove: 0,
+      zoneSelected: false,
       vm: {},
       options: {
         templates: [],
@@ -580,10 +524,10 @@ export default {
         this.vm = this.instanceConfig
       }
     })
-    this.form.getFieldDecorator('computeofferingid', { initialValue: [], preserve: true })
-    this.form.getFieldDecorator('diskofferingid', { initialValue: [], preserve: true })
+    this.form.getFieldDecorator('computeofferingid', { initialValue: undefined, preserve: true })
+    this.form.getFieldDecorator('diskofferingid', { initialValue: undefined, preserve: true })
     this.form.getFieldDecorator('affinitygroupids', { initialValue: [], preserve: true })
-    this.form.getFieldDecorator('isoid', { initialValue: [], preserve: true })
+    this.form.getFieldDecorator('isoid', { initialValue: undefined, preserve: true })
     this.form.getFieldDecorator('networkids', { initialValue: [], preserve: true })
     this.form.getFieldDecorator('keypair', { initialValue: undefined, preserve: true })
     this.apiParams = {}
@@ -607,8 +551,7 @@ export default {
     },
     resetData () {
       this.vm = {}
-      this.current = 0
-      this.stepMove = 0
+      this.zoneSelected = false
       this.form.resetFields()
       this.fetchData()
     },
@@ -650,6 +593,9 @@ export default {
         const deployVmData = {}
         // step 1 : select zone
         deployVmData.zoneid = values.zoneid
+        deployVmData.podid = values.podid
+        deployVmData.clusterid = values.clusterid
+        deployVmData.hostid = values.hostid
         // step 2: select template/iso
         if (this.templateIsoKey === 'templates') {
           deployVmData.templateid = values.templateid
@@ -777,106 +723,18 @@ export default {
       })
     },
     onSelectZoneId (value) {
-      this.current = 0
       this.zoneId = value
+      this.zoneSelected = true
+      _.each(this.params, this.fetchOptions)
+    },
+    onTemplatesIsosCollapseChange (key) {
+      if (key === 'isos' && this.options.isos.length === 0) {
+        this.fetchAllIsos()
+      }
     },
     handleSearchFilter (name, options) {
       this.params[name].options = { ...options }
       this.fetchOptions(this.params[name], name)
-    },
-    handleNext () {
-      switch (this.current) {
-        case this.steps.BASIC:
-          this.validateFormFields('zoneid').then((flag) => {
-            if (flag) {
-              this.current++
-              this.stepMove = this.current
-              this.fetchOptions(this.params.templates, 'templates')
-              this.fetchAllIsos()
-            }
-          })
-          break
-        case this.steps.TEMPLATE_ISO:
-          this.validateFormFields('templateid').then((flag) => {
-            if (flag) {
-              this.current++
-              this.stepMove = this.current
-              this.fetchOptions(this.params.serviceOfferings, 'serviceOfferings')
-            }
-          })
-          break
-        case this.steps.COMPUTE:
-          this.current++
-          this.stepMove = this.current
-          this.fetchOptions(this.params.diskOfferings, 'diskOfferings')
-          break
-        case this.steps.DISK_OFFERING:
-          this.current++
-          this.stepMove = this.current
-          this.fetchOptions(this.params.affinityGroups, 'affinityGroups')
-          break
-        case this.steps.AFFINITY_GROUP:
-          this.current++
-          this.stepMove = this.current
-          this.fetchOptions(this.params.networks, 'networks')
-          break
-        case this.steps.NETWORK:
-          this.current++
-          this.stepMove = this.current
-          this.fetchOptions(this.params.sshKeyPairs, 'sshKeyPairs')
-          break
-        default:
-          this.current++
-          this.stepMove = this.current
-          break
-      }
-    },
-    handlePrev () {
-      this.current--
-    },
-    validateFormFields (field) {
-      return new Promise((resolve) => {
-        this.form.validateFields([field], (err, values) => {
-          if (!err) {
-            resolve(true)
-          }
-          resolve(false)
-        })
-      })
-    },
-    createNetworks (zoneId) {
-      return new Promise((resolve, reject) => {
-        if (this.networksAdd.length === 0) {
-          resolve()
-          return
-        }
-        const promises = []
-        this.networksAdd.forEach((item) => {
-          const params = {}
-          params.zoneid = zoneId
-          params.name = item.name
-          params.displayText = item.name
-          params.networkOfferingId = item.networkOfferingId
-          params.vpcid = item.vpcid
-
-          promises.push(this.createNetwork(params))
-        })
-        Promise.all(promises).then(response => {
-          resolve(response)
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-    createNetwork (params) {
-      return new Promise((resolve, reject) => {
-        api('createNetwork', params).then(json => {
-          const networkRes = _.get(json, 'createnetworkresponse.network', [])
-          resolve(networkRes.id)
-        }).catch(error => {
-          reject(error)
-        })
-      })
     }
   }
 }
@@ -916,8 +774,4 @@ export default {
     border-radius: @border-radius-base !important;
     margin: 0 0 1.2rem;
   }
-
-  .hidden {
-    display: none;
-  }
 </style>
diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index ec1e3eaba..f6f60d740 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -78,10 +78,14 @@ export default {
     rowSelection () {
       return {
         type: 'radio',
-        selectedRowKeys: this.selectedRowKeys,
         onSelect: (row) => {
           this.$emit('select-default-network-item', row.key)
-        }
+        },
+        getCheckboxProps: record => ({
+          props: {
+            defaultChecked: (record.name === this.items[0].name)
+          }
+        })
       }
     }
   },

From ed8e825ac67c4c1ded19a702f7619fc947526ae5 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 12 Feb 2020 14:13:12 +0700
Subject: [PATCH 10/24] Add network configuration (ip, mac) to network list
 params

---
 src/views/compute/DeployVM.vue                | 19 +++++++++-
 .../compute/wizard/NetworkConfiguration.vue   | 35 ++++++++++++++++---
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 2d909b882..496a266dd 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -168,6 +168,8 @@
                     <network-configuration
                       v-if="networks.length > 0"
                       :items="networks"
+                      @update-network-config="($event) => updateNetworkConfig($event)"
+                      @select-default-network-item="($event) => updateDefaultNetworks($event)"
                     ></network-configuration>
                   </div>
                 </template>
@@ -317,7 +319,9 @@ export default {
         NETWORK: 5,
         SSH_KEY_PAIR: 6
       },
-      initDataConfig: {}
+      initDataConfig: {},
+      defaultNetwork: '',
+      networkConfig: []
     }
   },
   computed: {
@@ -575,6 +579,12 @@ export default {
         networkids: ids
       })
     },
+    updateDefaultNetworks (id) {
+      this.defaultNetwork = id
+    },
+    updateNetworkConfig (networks) {
+      this.networkConfig = networks
+    },
     updateSshKeyPairs (name) {
       this.form.setFieldsValue({
         keypair: name
@@ -618,6 +628,13 @@ export default {
         if (values.networkids && values.networkids.length > 0) {
           for (let i = 0; i < values.networkids.length; i++) {
             deployVmData['iptonetworklist[' + i + '].networkid'] = values.networkids[i]
+            if (this.networkConfig.length > 0) {
+              const networkConfig = this.networkConfig.filter((item) => item.key === values.networkids[i])
+              if (networkConfig && networkConfig.length > 0) {
+                deployVmData['iptonetworklist[' + i + '].ip'] = networkConfig[0].ipAddress ? networkConfig[0].ipAddress : undefined
+                deployVmData['iptonetworklist[' + i + '].mac'] = networkConfig[0].macAddress ? networkConfig[0].macAddress : undefined
+              }
+            }
           }
         }
         // step 7: select ssh key pair
diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index f6f60d740..98bdbdb54 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -24,15 +24,17 @@
     :rowKey="record => record.id"
     size="middle"
   >
-    <template slot="ipAddress">
+    <template slot="ipAddress" slot-scope="text, record">
       <a-input
         style="width: 150px;"
-        :placeholder="$t('ipAddress')"/>
+        :placeholder="$t('ipAddress')"
+        @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)" />
     </template>
-    <template slot="macAddress">
+    <template slot="macAddress" slot-scope="text, record">
       <a-input
         style="width: 150px;"
-        :placeholder="$t('macAddress')"/>
+        :placeholder="$t('macAddress')"
+        @change="($event) => updateNetworkData('macAddress', record.id, $event.target.value)" />
     </template>
   </a-table>
 </template>
@@ -52,6 +54,7 @@ export default {
   },
   data () {
     return {
+      networks: [],
       columns: [
         {
           dataIndex: 'name',
@@ -74,12 +77,15 @@ export default {
       selectedRowKeys: []
     }
   },
+  created () {
+    this.$emit('select-default-network-item', this.items[0].id)
+  },
   computed: {
     rowSelection () {
       return {
         type: 'radio',
         onSelect: (row) => {
-          this.$emit('select-default-network-item', row.key)
+          this.$emit('select-default-network-item', row.id)
         },
         getCheckboxProps: record => ({
           props: {
@@ -95,6 +101,25 @@ export default {
         this.selectedRowKeys = [newValue]
       }
     }
+  },
+  methods: {
+    updateNetworkData (name, key, value) {
+      if (this.networks.length === 0) {
+        const networkItem = {}
+        networkItem.key = key
+        networkItem[name] = value
+        this.networks.push(networkItem)
+        this.$emit('update-network-config', this.networks)
+        return
+      }
+
+      this.networks.filter((item, index) => {
+        if (item.key === key) {
+          this.$set(this.networks[index], name, value)
+        }
+      })
+      this.$emit('update-network-config', this.networks)
+    }
   }
 }
 </script>

From e49cf9dc6ce6f66425dfd31d0ed0f7b823cede9b Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 13 Feb 2020 10:15:39 +0700
Subject: [PATCH 11/24] Delete unused components

---
 src/views/compute/DeployVM.vue                |   2 -
 src/views/compute/wizard/NetworksCreation.vue | 204 ------------------
 2 files changed, 206 deletions(-)
 delete mode 100644 src/views/compute/wizard/NetworksCreation.vue

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 496a266dd..fbc7b6dc5 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -239,14 +239,12 @@ import TemplateIsoSelection from '@views/compute/wizard/TemplateIsoSelection'
 import AffinityGroupSelection from '@views/compute/wizard/AffinityGroupSelection'
 import NetworkSelection from '@views/compute/wizard/NetworkSelection'
 import NetworkConfiguration from '@views/compute/wizard/NetworkConfiguration'
-import NetworkCreation from '@views/compute/wizard/NetworksCreation'
 import SshKeyPairSelection from '@views/compute/wizard/SshKeyPairSelection'
 
 export default {
   name: 'Wizard',
   components: {
     SshKeyPairSelection,
-    NetworkCreation,
     NetworkConfiguration,
     NetworkSelection,
     AffinityGroupSelection,
diff --git a/src/views/compute/wizard/NetworksCreation.vue b/src/views/compute/wizard/NetworksCreation.vue
deleted file mode 100644
index a9652c879..000000000
--- a/src/views/compute/wizard/NetworksCreation.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-// Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  The ASF licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied.  See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-<template>
-  <div>
-    <a-table
-      v-if="networkItems.length > 0"
-      :columns="columns"
-      :dataSource="networkItems"
-      :rowKey="record => record.key"
-      :pagination="false"
-    >
-      <template slot="name" slot-scope="text, record">
-        <a-input
-          style="width: 15vw"
-          :placeholder="$t('networks')"
-          @change="($event) => handleChangeInput(record.key, $event.target.value, 'name')"/>
-      </template>
-      <template slot="operation" slot-scope="text, record">
-        <a-popconfirm
-          v-if="networkItems.length > 1"
-          title="Sure to delete?"
-          @confirm="removeItem(record.key)"
-        >
-          <a-button type="link">Delete</a-button>
-        </a-popconfirm>
-      </template>
-      <template slot="networkOffering" slot-scope="text, record">
-        <a-select
-          :placeholder="$t('networkOfferingId')"
-          :options="networkOfferingOptions"
-          @change="($event) => handleChangeInput(record.key, $event, 'networkOfferingId')"
-        ></a-select>
-      </template>
-      <template slot="vpc" slot-scope="text, record">
-        <a-select
-          :placeholder="$t('vpc')"
-          :options="vpcOptions"
-          style="min-width: 12vw"
-          @change="($event) => handleChangeInput(record.key, $event, 'vpcid')"
-        ></a-select>
-      </template>
-    </a-table>
-
-    <div style="text-align: right; margin-top: 1rem;">
-      <a-button
-        type="primary"
-        @click="addNewItem"
-      >{{ $t('addAnotherNetwork') }}
-      </a-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { api } from '@/api'
-import store from '@/store'
-import _ from 'lodash'
-
-/*
- * ToDo: Implement real functionality
- */
-export default {
-  name: 'NetworkCreation',
-  props: {
-    zoneId: {
-      type: String,
-      default () {
-        return ''
-      }
-    }
-  },
-  data () {
-    return {
-      networkItems: [{
-        key: this.randomKey()
-      }],
-      columns: [
-        {
-          dataIndex: 'name',
-          title: this.$t('networks'),
-          scopedSlots: { customRender: 'name' },
-          width: '30%'
-        },
-        {
-          dataIndex: 'offering',
-          title: this.$t('networkOfferingId'),
-          scopedSlots: { customRender: 'networkOffering' },
-          width: '30%'
-        },
-        {
-          dataIndex: 'vpcName',
-          title: this.$t('VPC'),
-          scopedSlots: { customRender: 'vpc' },
-          width: '30%'
-        },
-        {
-          dataIndex: 'action',
-          scopedSlots: { customRender: 'operation' },
-          width: '10%'
-        }
-      ],
-      networkOfferings: [],
-      vpcs: [],
-      dataNetworkCreated: []
-    }
-  },
-  computed: {
-    network () {
-      return {
-        key: undefined,
-        name: undefined,
-        displayText: undefined,
-        networkOfferingId: undefined,
-        vpcid: undefined
-      }
-    },
-    networkOfferingOptions () {
-      return this.networkOfferings.map((offering) => {
-        return {
-          label: offering.name,
-          value: offering.id
-        }
-      })
-    },
-    vpcOptions () {
-      return this.vpcs.map((vpc) => {
-        return {
-          label: vpc.name,
-          value: vpc.id
-        }
-      })
-    }
-  },
-  created () {
-    api('listNetworkOfferings', {
-      forvpc: false,
-      zoneid: this.zoneId,
-      guestiptype: 'Isolated',
-      supportedServices: 'SourceNat',
-      specifyvlan: false,
-      state: 'Enabled'
-    }).then((response) => {
-      this.networkOfferings = _.get(response, 'listnetworkofferingsresponse.networkoffering')
-    })
-    // ToDo: Remove this redundant api call – see the NetworkSelection component
-    api('listVPCs', {
-      projectid: store.getters.project.id
-    }).then((response) => {
-      this.vpcs = _.get(response, 'listvpcsresponse.vpc')
-    })
-  },
-  methods: {
-    addNewItem () {
-      const key = this.randomKey()
-      this.networkItems.push({
-        key: key
-      })
-    },
-    removeItem (key) {
-      this.networkItems = this.networkItems.filter((item) => item.key !== key)
-      this.dataNetworkCreated = this.dataNetworkCreated.filter((item) => item.key !== key)
-    },
-    handleChangeInput (key, value, name) {
-      let network = { ...this.network }
-      const networkExist = this.dataNetworkCreated.filter((item) => item.key === key)
-      if (networkExist && networkExist.length > 0) {
-        network = { ...networkExist[0] }
-        this.dataNetworkCreated = this.dataNetworkCreated.filter((item) => item.key !== key)
-        network.key = key
-        network[name] = value
-      } else {
-        network.key = key
-        network[name] = value
-      }
-      this.dataNetworkCreated.push(network)
-      this.$emit('handle-update-network', this.dataNetworkCreated)
-    },
-    randomKey () {
-      const now = new Date()
-      const random = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
-      return [random, now.getTime()].join('')
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

From 376c18fba2d21ae56bfeee3a40c5554264ff4715 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 13 Feb 2020 10:25:27 +0700
Subject: [PATCH 12/24] Implement submit method (fix pollJob error)

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

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index fbc7b6dc5..0a496de9f 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -640,7 +640,7 @@ export default {
         deployVmData.name = values.name
         deployVmData.displayname = values.name
         const title = this.$t('Launch Virtual Machine')
-        const description = this.$t('zone') + ' ' + values.zoneid
+        const description = deployVmData.name ? deployVmData.name : values.zoneid
         this.loading.deploy = true
         api('deployVirtualMachine', deployVmData).then(response => {
           const jobId = response.deployvirtualmachineresponse.jobid
@@ -648,7 +648,12 @@ export default {
             this.$pollJob({
               jobId,
               successMethod: result => {
-                const successDescription = result.jobresult.snapshot.name
+                let successDescription = ''
+                if (result.jobresult.virtualmachine.name) {
+                  successDescription = result.jobresult.virtualmachine.name
+                } else {
+                  successDescription = result.jobresult.virtualmachine.id
+                }
                 this.$store.dispatch('AddAsyncJob', {
                   title: title,
                   jobid: jobId,

From 591c8ab9ad99cd3709d2608a2c47a982d0e3531e Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 13 Feb 2020 15:13:49 +0700
Subject: [PATCH 13/24] Format Info card for vm config summary

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

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 0a496de9f..cd2507638 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -205,7 +205,7 @@
       </a-col>
       <a-col :md="24" :lg="7" v-if="!isMobile()">
         <a-affix :offsetTop="75">
-          <info-card :resource="vm" :title="this.$t('yourInstance')">
+          <info-card class="vm-info-card" :resource="vm" :title="this.$t('yourInstance')">
             <!-- ToDo: Refactor this, maybe move everything to the info-card component -->
             <div slot="details" v-if="diskSize" style="margin-bottom: 12px;">
               <a-icon type="hdd"></a-icon>
@@ -794,4 +794,18 @@ export default {
     border-radius: @border-radius-base !important;
     margin: 0 0 1.2rem;
   }
+
+  .vm-info-card {
+    .resource-detail-item__label {
+      font-weight: normal;
+    }
+
+    .resource-detail-item__details {
+      a {
+        color: rgba(0, 0, 0, 0.65);
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+  }
 </style>

From 87440f07df309443dc292fb5b437ad586ad084c1 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Fri, 14 Feb 2020 11:23:10 +0700
Subject: [PATCH 14/24] Add scrollable into each section

---
 src/views/compute/wizard/AffinityGroupSelection.vue | 1 +
 src/views/compute/wizard/ComputeSelection.vue       | 1 +
 src/views/compute/wizard/DiskOfferingSelection.vue  | 1 +
 src/views/compute/wizard/NetworkSelection.vue       | 1 +
 src/views/compute/wizard/SshKeyPairSelection.vue    | 1 +
 5 files changed, 5 insertions(+)

diff --git a/src/views/compute/wizard/AffinityGroupSelection.vue b/src/views/compute/wizard/AffinityGroupSelection.vue
index fad33fee1..be14d6f2f 100644
--- a/src/views/compute/wizard/AffinityGroupSelection.vue
+++ b/src/views/compute/wizard/AffinityGroupSelection.vue
@@ -30,6 +30,7 @@
       :pagination="{showSizeChanger: true}"
       :rowSelection="rowSelection"
       size="middle"
+      :scroll="{ y: 225 }"
     >
     </a-table>
   </div>
diff --git a/src/views/compute/wizard/ComputeSelection.vue b/src/views/compute/wizard/ComputeSelection.vue
index 64d460e53..cf30f50ea 100644
--- a/src/views/compute/wizard/ComputeSelection.vue
+++ b/src/views/compute/wizard/ComputeSelection.vue
@@ -30,6 +30,7 @@
       :loading="loading"
       size="middle"
       @change="handleTableChange"
+      :scroll="{ y: 225 }"
     >
       <span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('cpu') }}</span>
       <span slot="ramTitle"><a-icon type="bulb" /> {{ $t('memory') }}</span>
diff --git a/src/views/compute/wizard/DiskOfferingSelection.vue b/src/views/compute/wizard/DiskOfferingSelection.vue
index c8cf15f18..a277cb926 100644
--- a/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -30,6 +30,7 @@
       :rowSelection="rowSelection"
       size="middle"
       @change="handleTableChange"
+      :scroll="{ y: 225 }"
     >
       <span slot="diskSizeTitle"><a-icon type="hdd" /> {{ $t('disksize') }}</span>
       <span slot="iopsTitle"><a-icon type="rocket" /> {{ $t('minMaxIops') }}</span>
diff --git a/src/views/compute/wizard/NetworkSelection.vue b/src/views/compute/wizard/NetworkSelection.vue
index d0f6151b0..6d96d52be 100644
--- a/src/views/compute/wizard/NetworkSelection.vue
+++ b/src/views/compute/wizard/NetworkSelection.vue
@@ -30,6 +30,7 @@
       :pagination="{showSizeChanger: true}"
       :rowSelection="rowSelection"
       @change="handleTableChange"
+      :scroll="{ y: 225 }"
     >
       <a-list
         slot="expandedRowRender"
diff --git a/src/views/compute/wizard/SshKeyPairSelection.vue b/src/views/compute/wizard/SshKeyPairSelection.vue
index 7b81a9c8a..e241049bc 100644
--- a/src/views/compute/wizard/SshKeyPairSelection.vue
+++ b/src/views/compute/wizard/SshKeyPairSelection.vue
@@ -30,6 +30,7 @@
       :rowSelection="rowSelection"
       size="middle"
       @change="handleTableChange"
+      :scroll="{ y: 225 }"
     >
       <template v-slot:account><a-icon type="user" /> {{ $t('account') }}</template>
       <template v-slot:domain><a-icon type="block" /> {{ $t('domain') }}</template>

From 3401b7f843083b10de9f8686e5779e739589489f Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Fri, 14 Feb 2020 11:26:28 +0700
Subject: [PATCH 15/24] Fix show error from developer tool console

---
 src/views/compute/DeployVM.vue                | 111 +++++++++++++-----
 .../compute/wizard/DiskSizeSelection.vue      |  17 ++-
 .../compute/wizard/TemplateIsoRadioGroup.vue  |  98 +++++++++++-----
 .../compute/wizard/TemplateIsoSelection.vue   |  53 +++++----
 4 files changed, 191 insertions(+), 88 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index cd2507638..14a0f9080 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -77,29 +77,39 @@
                 :title="this.$t('templateIso')"
                 :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
-                  <div v-if="zoneSelected">
-                    <a-collapse
-                      :accordion="true"
-                      defaultActiveKey="templates"
-                      @change="onTemplatesIsosCollapseChange"
-                    >
-                      <a-collapse-panel :header="this.$t('Templates')" key="templates">
-                        <template-iso-selection
-                          input-decorator="templateid"
-                          :items="options.templates"
-                          :loading="loading.templates"
-                        ></template-iso-selection>
-                        <disk-size-selection input-decorator="rootdisksize" />
-                      </a-collapse-panel>
-
-                      <a-collapse-panel :header="this.$t('ISOs')" key="isos">
-                        <template-iso-selection
-                          input-decorator="isoid"
-                          :items="options.isos"
-                          :loading="loading.isos"
-                        ></template-iso-selection>
-                      </a-collapse-panel>
-                    </a-collapse>
+                  <div v-if="zoneSelected" style="margin-top: 15px">
+                    <a-card
+                      :title="this.$t('Templates')"
+                      :loading="loading.templates">
+                      <template-iso-selection
+                        input-decorator="templateid"
+                        :items="options.templates"
+                        :selected="templateIsoKey"
+                        @update-template-iso="updateFieldValue"
+                      ></template-iso-selection>
+                      <disk-size-selection
+                        input-decorator="rootdisksize"
+                        @update-disk-size="updateFieldValue"/>
+                    </a-card>
+                    <a-card
+                      :title="this.$t('ISOs')"
+                      :loading="loading.isos">
+                      <template-iso-selection
+                        input-decorator="isoid"
+                        :items="options.isos"
+                        :selected="templateIsoKey"
+                        @update-template-iso="updateFieldValue"
+                      ></template-iso-selection>
+                    </a-card>
+                    <a-form-item class="form-item-hidden">
+                      <a-input v-decorator="['templateid']"/>
+                    </a-form-item>
+                    <a-form-item class="form-item-hidden">
+                      <a-input v-decorator="['isoid']"/>
+                    </a-form-item>
+                    <a-form-item class="form-item-hidden">
+                      <a-input v-decorator="['rootdisksize']"/>
+                    </a-form-item>
                   </div>
                 </template>
               </a-step>
@@ -133,7 +143,10 @@
                     <disk-size-selection
                       v-if="diskOffering && diskOffering.iscustomized"
                       input-decorator="size"
-                    ></disk-size-selection>
+                      @update-disk-size="updateFieldValue" />
+                    <a-form-item class="form-item-hidden">
+                      <a-input v-decorator="['size']"/>
+                    </a-form-item>
                   </div>
                 </template>
               </a-step>
@@ -307,7 +320,6 @@ export default {
         'selfexecutable',
         'sharedexecutable'
       ],
-      templateIsoKey: '',
       steps: {
         BASIC: 0,
         TEMPLATE_ISO: 1,
@@ -319,7 +331,8 @@ export default {
       },
       initDataConfig: {},
       defaultNetwork: '',
-      networkConfig: []
+      networkConfig: [],
+      templateIsoKey: 'templateid'
     }
   },
   computed: {
@@ -557,6 +570,25 @@ export default {
       this.form.resetFields()
       this.fetchData()
     },
+    updateFieldValue (name, value) {
+      if (name === 'templateid') {
+        this.templateIsoKey = 'templateid'
+        this.form.setFieldsValue({
+          templateid: value,
+          isoid: undefined
+        })
+      } else if (name === 'isoid') {
+        this.templateIsoKey = 'isoid'
+        this.form.setFieldsValue({
+          isoid: value,
+          templateid: undefined
+        })
+      } else {
+        this.form.setFieldsValue({
+          [name]: value
+        })
+      }
+    },
     updateComputeOffering (id) {
       this.form.setFieldsValue({
         computeofferingid: id
@@ -605,10 +637,10 @@ export default {
         deployVmData.clusterid = values.clusterid
         deployVmData.hostid = values.hostid
         // step 2: select template/iso
-        if (this.templateIsoKey === 'templates') {
+        if (this.templateIsoKey === 'templateid') {
           deployVmData.templateid = values.templateid
         } else {
-          deployVmData.templateid = values.templateid
+          deployVmData.templateid = values.isoid
         }
         if (values.rootdisksize && values.rootdisksize > 0) {
           deployVmData.rootdisksize = values.rootdisksize
@@ -676,7 +708,12 @@ export default {
         })
       })
     },
-    fetchOptions (param, name) {
+    fetchOptions (param, name, exclude) {
+      if (exclude && exclude.length > 0) {
+        if (exclude.includes(name)) {
+          return
+        }
+      }
       this.loading[name] = true
       param.loading = true
       param.opts = []
@@ -745,7 +782,17 @@ export default {
     onSelectZoneId (value) {
       this.zoneId = value
       this.zoneSelected = true
-      _.each(this.params, this.fetchOptions)
+      this.form.setFieldsValue({
+        clusterid: undefined,
+        podid: undefined,
+        hostid: undefined,
+        templateid: undefined,
+        isoid: undefined
+      })
+      _.each(this.params, (param, name) => {
+        this.fetchOptions(param, name, ['zones'])
+      })
+      this.fetchAllIsos()
     },
     onTemplatesIsosCollapseChange (key) {
       if (key === 'isos' && this.options.isos.length === 0) {
@@ -808,4 +855,8 @@ export default {
       }
     }
   }
+
+  .form-item-hidden {
+    display: none;
+  }
 </style>
diff --git a/src/views/compute/wizard/DiskSizeSelection.vue b/src/views/compute/wizard/DiskSizeSelection.vue
index f973741dd..bec025a47 100644
--- a/src/views/compute/wizard/DiskSizeSelection.vue
+++ b/src/views/compute/wizard/DiskSizeSelection.vue
@@ -22,14 +22,13 @@
         <a-slider
           :min="0"
           :max="1024"
-          v-decorator="[inputDecorator]"
+          v-model="inputValue"
+          @change="($event) => updateDickSize($event)"
         />
       </a-col>
       <a-col :span="4">
         <a-input-number
-          v-decorator="[inputDecorator, {
-            rules: [{ required: false, message: 'Please enter a number' }]
-          }]"
+          v-model="inputValue"
           :formatter="value => `${value} GB`"
           :parser="value => value.replace(' GB', '')"
         />
@@ -46,6 +45,16 @@ export default {
       type: String,
       default: ''
     }
+  },
+  data () {
+    return {
+      inputValue: 0
+    }
+  },
+  methods: {
+    updateDickSize (value) {
+      this.$emit('update-disk-size', this.inputDecorator, value)
+    }
   }
 }
 </script>
diff --git a/src/views/compute/wizard/TemplateIsoRadioGroup.vue b/src/views/compute/wizard/TemplateIsoRadioGroup.vue
index cb879e1e3..fe5e0b768 100644
--- a/src/views/compute/wizard/TemplateIsoRadioGroup.vue
+++ b/src/views/compute/wizard/TemplateIsoRadioGroup.vue
@@ -17,37 +17,38 @@
 
 <template>
   <a-form-item>
-    <a-radio-group
-      v-for="(os, osIndex) in osList"
-      :key="osIndex"
-      class="radio-group"
-      v-decorator="[inputDecorator, {
-        rules: [{ required: true, message: 'Please select option' }]
-      }]"
-    >
-      <a-radio
-        class="radio-group__radio"
-        :value="os.id"
+    <div class="form-item-scroll">
+      <a-radio-group
+        v-for="(os, osIndex) in osList"
+        :key="osIndex"
+        class="radio-group"
+        v-model="value"
+        @change="($event) => updateSelectionTemplateIso($event.target.value)"
       >
-        {{ os.displaytext }}&nbsp;
-        <a-tag
-          :visible="os.ispublic && !os.isfeatured"
-          color="blue"
-        >{{ $t('isPublic') }}</a-tag>
-        <a-tag
-          :visible="os.isfeatured"
-          color="green"
-        >{{ $t('isFeatured') }}</a-tag>
-        <a-tag
-          :visible="isSelf(os)"
-          color="orange"
-        >{{ $t('isSelf') }}</a-tag>
-        <a-tag
-          :visible="isShared(os)"
-          color="cyan"
-        >{{ $t('isShared') }}</a-tag>
-      </a-radio>
-    </a-radio-group>
+        <a-radio
+          class="radio-group__radio"
+          :value="os.id"
+        >
+          {{ os.displaytext }}&nbsp;
+          <a-tag
+            :visible="os.ispublic && !os.isfeatured"
+            color="blue"
+          >{{ $t('isPublic') }}</a-tag>
+          <a-tag
+            :visible="os.isfeatured"
+            color="green"
+          >{{ $t('isFeatured') }}</a-tag>
+          <a-tag
+            :visible="isSelf(os)"
+            color="orange"
+          >{{ $t('isSelf') }}</a-tag>
+          <a-tag
+            :visible="isShared(os)"
+            color="cyan"
+          >{{ $t('isShared') }}</a-tag>
+        </a-radio>
+      </a-radio-group>
+    </div>
   </a-form-item>
 </template>
 
@@ -64,6 +65,35 @@ export default {
     inputDecorator: {
       type: String,
       default: ''
+    },
+    selected: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      value: ''
+    }
+  },
+  created () {
+    if (this.inputDecorator === 'templateid') {
+      this.value = this.osList[0].id
+      this.$emit('emit-update-template-iso', this.inputDecorator, this.value)
+    }
+  },
+  watch: {
+    selected (newValue, oldValue) {
+      if (newValue !== this.inputDecorator) {
+        this.value = ''
+      }
+    },
+    osList (newData, oldData) {
+      if (newData && newData.length > 0) {
+        this.osList = newData
+        this.value = this.osList[0].id
+        this.$emit('emit-update-template-iso', this.inputDecorator, this.value)
+      }
     }
   },
   methods: {
@@ -72,6 +102,9 @@ export default {
     },
     isSelf (item) {
       return !item.ispublic && (item.account === store.getters.userInfo.account)
+    },
+    updateSelectionTemplateIso (id) {
+      this.$emit('emit-update-template-iso', this.inputDecorator, id)
     }
   }
 }
@@ -89,4 +122,9 @@ export default {
   .ant-tag {
     margin-left: 0.4rem;
   }
+
+  .form-item-scroll {
+    max-height: 19vh;
+    overflow-y: auto;
+  }
 </style>
diff --git a/src/views/compute/wizard/TemplateIsoSelection.vue b/src/views/compute/wizard/TemplateIsoSelection.vue
index f64670f1a..3ff904729 100644
--- a/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -16,30 +16,32 @@
 // under the License.
 
 <template>
-  <a-spin :spinning="loading">
-    <a-tabs :defaultActiveKey="Object.keys(osTypes)[0]" v-if="view === TAB_VIEW">
-      <a-button icon="search" slot="tabBarExtraContent" @click="() => toggleView(FILTER_VIEW)"/>
-      <a-tab-pane v-for="(osList, osName) in osTypes" :key="osName">
-        <span slot="tab">
-          <os-logo :os-name="osName"></os-logo>
-        </span>
-        <TemplateIsoRadioGroup
-          :osList="osList"
-          :input-decorator="inputDecorator"
-        ></TemplateIsoRadioGroup>
-      </a-tab-pane>
-    </a-tabs>
-    <div v-else>
-      <a-input class="search-input" v-model="filter">
-        <a-icon slot="prefix" type="search"/>
-        <a-icon slot="addonAfter" type="close" @click="toggleView(TAB_VIEW)"/>
-      </a-input>
+  <a-tabs :defaultActiveKey="Object.keys(osTypes)[0]" v-if="view === TAB_VIEW">
+    <a-button icon="search" slot="tabBarExtraContent" @click="() => toggleView(FILTER_VIEW)"/>
+    <a-tab-pane v-for="(osList, osName) in osTypes" :key="osName">
+      <span slot="tab">
+        <os-logo :os-name="osName"></os-logo>
+      </span>
       <TemplateIsoRadioGroup
-        :osList="filteredItems"
+        :osList="osList"
         :input-decorator="inputDecorator"
+        :selected="selected"
+        @emit-update-template-iso="updateTemplateIso"
       ></TemplateIsoRadioGroup>
-    </div>
-  </a-spin>
+    </a-tab-pane>
+  </a-tabs>
+  <div v-else>
+    <a-input class="search-input" v-model="filter">
+      <a-icon slot="prefix" type="search"/>
+      <a-icon slot="addonAfter" type="close" @click="toggleView(TAB_VIEW)"/>
+    </a-input>
+    <TemplateIsoRadioGroup
+      :osList="filteredItems"
+      :input-decorator="inputDecorator"
+      :selected="selected"
+      @emit-update-template-iso="updateTemplateIso"
+    ></TemplateIsoRadioGroup>
+  </div>
 </template>
 
 <script>
@@ -63,9 +65,9 @@ export default {
       type: String,
       default: ''
     },
-    loading: {
-      type: Boolean,
-      default: false
+    selected: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -114,6 +116,9 @@ export default {
   methods: {
     toggleView (view) {
       this.view = view
+    },
+    updateTemplateIso (name, id) {
+      this.$emit('update-template-iso', name, id)
     }
   }
 }

From 76521fa029eb5ecb048eddd7cb9c1865d14da82b Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 17 Feb 2020 09:54:10 +0700
Subject: [PATCH 16/24] Fixes: 1. Change the template/iso section to tab 2. Add
 radio option no select 3. fix default selected networks 4. changed poweroff
 icon to rocket icon

---
 src/locales/en.json                           |  3 +-
 src/views/compute/DeployVM.vue                | 88 ++++++++++++-------
 src/views/compute/wizard/ComputeSelection.vue |  8 +-
 .../compute/wizard/DiskOfferingSelection.vue  | 33 +++++--
 .../compute/wizard/NetworkConfiguration.vue   | 35 +++++---
 .../compute/wizard/SshKeyPairSelection.vue    | 26 ++++--
 .../compute/wizard/TemplateIsoSelection.vue   | 51 +++++------
 7 files changed, 159 insertions(+), 85 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 8e8352d7a..77830e117 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1078,5 +1078,6 @@
 "addNewNetworks": "Add new networks",
 "existingNetworks": "Existing networks",
 "sshKeyPairs": "SSH keypairs",
-"wednesday": "Wednesday"
+"wednesday": "Wednesday",
+"noselect": "No thanks"
 }
diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 14a0f9080..d8f2886f0 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -79,27 +79,29 @@
                 <template slot="description">
                   <div v-if="zoneSelected" style="margin-top: 15px">
                     <a-card
-                      :title="this.$t('Templates')"
-                      :loading="loading.templates">
-                      <template-iso-selection
-                        input-decorator="templateid"
-                        :items="options.templates"
-                        :selected="templateIsoKey"
-                        @update-template-iso="updateFieldValue"
-                      ></template-iso-selection>
-                      <disk-size-selection
-                        input-decorator="rootdisksize"
-                        @update-disk-size="updateFieldValue"/>
-                    </a-card>
-                    <a-card
-                      :title="this.$t('ISOs')"
-                      :loading="loading.isos">
-                      <template-iso-selection
-                        input-decorator="isoid"
-                        :items="options.isos"
-                        :selected="templateIsoKey"
-                        @update-template-iso="updateFieldValue"
-                      ></template-iso-selection>
+                      :tabList="tabList"
+                      :activeTabKey="tabKey"
+                      @tabChange="key => onTabChange(key, 'tabKey')">
+                      <p v-if="tabKey === 'templateid'">
+                        <template-iso-selection
+                          input-decorator="templateid"
+                          :items="options.templates"
+                          :selected="tabKey"
+                          @update-template-iso="updateFieldValue"
+                          v-if="options.templates.length > 0"
+                        ></template-iso-selection>
+                        <disk-size-selection
+                          input-decorator="rootdisksize"
+                          @update-disk-size="updateFieldValue"/>
+                      </p>
+                      <p v-else>
+                        <template-iso-selection
+                          input-decorator="isoid"
+                          :items="options.isos"
+                          :selected="tabKey"
+                          @update-template-iso="updateFieldValue"
+                        ></template-iso-selection>
+                      </p>
                     </a-card>
                     <a-form-item class="form-item-hidden">
                       <a-input v-decorator="['templateid']"/>
@@ -209,7 +211,7 @@
                 {{ this.$t('cancel') }}
               </a-button>
               <a-button type="primary" @click="handleSubmit" :loading="loading.deploy">
-                <a-icon type="poweroff" />
+                <a-icon type="rocket" />
                 {{ this.$t('Launch VM') }}
               </a-button>
             </div>
@@ -332,7 +334,17 @@ export default {
       initDataConfig: {},
       defaultNetwork: '',
       networkConfig: [],
-      templateIsoKey: 'templateid'
+      tabList: [
+        {
+          key: 'templateid',
+          tab: this.$t('Templates')
+        },
+        {
+          key: 'isoid',
+          tab: this.$t('ISOs')
+        }
+      ],
+      tabKey: 'templateid'
     }
   },
   computed: {
@@ -572,13 +584,13 @@ export default {
     },
     updateFieldValue (name, value) {
       if (name === 'templateid') {
-        this.templateIsoKey = 'templateid'
+        this.tabKey = 'templateid'
         this.form.setFieldsValue({
           templateid: value,
           isoid: undefined
         })
       } else if (name === 'isoid') {
-        this.templateIsoKey = 'isoid'
+        this.tabKey = 'isoid'
         this.form.setFieldsValue({
           isoid: value,
           templateid: undefined
@@ -595,6 +607,12 @@ export default {
       })
     },
     updateDiskOffering (id) {
+      if (id === '0') {
+        this.form.setFieldsValue({
+          diskofferingid: undefined
+        })
+        return
+      }
       this.form.setFieldsValue({
         diskofferingid: id
       })
@@ -616,6 +634,12 @@ export default {
       this.networkConfig = networks
     },
     updateSshKeyPairs (name) {
+      if (name === this.$t('noselect')) {
+        this.form.setFieldsValue({
+          keypair: undefined
+        })
+        return
+      }
       this.form.setFieldsValue({
         keypair: name
       })
@@ -637,7 +661,7 @@ export default {
         deployVmData.clusterid = values.clusterid
         deployVmData.hostid = values.hostid
         // step 2: select template/iso
-        if (this.templateIsoKey === 'templateid') {
+        if (this.tabKey === 'templateid') {
           deployVmData.templateid = values.templateid
         } else {
           deployVmData.templateid = values.isoid
@@ -792,16 +816,16 @@ export default {
       _.each(this.params, (param, name) => {
         this.fetchOptions(param, name, ['zones'])
       })
-      this.fetchAllIsos()
-    },
-    onTemplatesIsosCollapseChange (key) {
-      if (key === 'isos' && this.options.isos.length === 0) {
-        this.fetchAllIsos()
-      }
     },
     handleSearchFilter (name, options) {
       this.params[name].options = { ...options }
       this.fetchOptions(this.params[name], name)
+    },
+    onTabChange (key, type) {
+      this[type] = key
+      if (key === 'isoid') {
+        this.fetchAllIsos()
+      }
     }
   }
 }
diff --git a/src/views/compute/wizard/ComputeSelection.vue b/src/views/compute/wizard/ComputeSelection.vue
index cf30f50ea..e44d17ad9 100644
--- a/src/views/compute/wizard/ComputeSelection.vue
+++ b/src/views/compute/wizard/ComputeSelection.vue
@@ -100,9 +100,7 @@ export default {
       return {
         type: 'radio',
         selectedRowKeys: this.selectedRowKeys,
-        onSelect: (row) => {
-          this.$emit('select-compute-item', row.key)
-        }
+        onChange: this.onSelectRow
       }
     }
   },
@@ -114,6 +112,10 @@ export default {
     }
   },
   methods: {
+    onSelectRow (value) {
+      this.selectedRowKeys = value
+      this.$emit('select-compute-item', value[0])
+    },
     handleSearch (value) {
       this.filter = value
       this.options.keyword = this.filter
diff --git a/src/views/compute/wizard/DiskOfferingSelection.vue b/src/views/compute/wizard/DiskOfferingSelection.vue
index a277cb926..21ba995e4 100644
--- a/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -36,12 +36,14 @@
       <span slot="iopsTitle"><a-icon type="rocket" /> {{ $t('minMaxIops') }}</span>
       <template slot="diskSize" slot-scope="text, record">
         <div v-if="record.isCustomized">{{ $t('isCustomized') }}</div>
-        <div v-else>{{ record.diskSize }} GB</div>
+        <div v-else-if="record.diskSize">{{ record.diskSize }} GB</div>
+        <div v-else>-</div>
       </template>
       <template slot="iops" slot-scope="text, record">
         <span v-if="record.miniops && record.maxiops">{{ record.miniops }} - {{ record.maxiops }}</span>
         <span v-else-if="record.miniops && !record.maxiops">{{ record.miniops }}</span>
         <span v-else-if="!record.miniops && record.maxiops">{{ record.maxiops }}</span>
+        <span v-else>-</span>
       </template>
     </a-table>
   </div>
@@ -86,9 +88,21 @@ export default {
           scopedSlots: { customRender: 'iops' }
         }
       ],
-      selectedRowKeys: []
+      selectedRowKeys: ['0'],
+      dataItems: []
     }
   },
+  created () {
+    this.dataItems = []
+    this.dataItems.push({
+      id: '0',
+      name: this.$t('noselect'),
+      diskSize: undefined,
+      miniops: undefined,
+      maxiops: undefined,
+      isCustomized: undefined
+    })
+  },
   computed: {
     options () {
       return {
@@ -98,7 +112,7 @@ export default {
       }
     },
     tableSource () {
-      return this.items.map((item) => {
+      return this.dataItems.map((item) => {
         return {
           key: item.id,
           name: item.name,
@@ -113,9 +127,7 @@ export default {
       return {
         type: 'radio',
         selectedRowKeys: this.selectedRowKeys,
-        onSelect: (row) => {
-          this.$emit('select-disk-offering-item', row.key)
-        }
+        onChange: this.onSelectRow
       }
     }
   },
@@ -124,9 +136,18 @@ export default {
       if (newValue && newValue !== oldValue) {
         this.selectedRowKeys = [newValue]
       }
+    },
+    items (newData, oldData) {
+      if (newData && newData.length > 0) {
+        this.dataItems = this.dataItems.concat(newData)
+      }
     }
   },
   methods: {
+    onSelectRow (value) {
+      this.selectedRowKeys = value
+      this.$emit('select-disk-offering-item', value[0])
+    },
     handleSearch (value) {
       this.filter = value
       this.options.keyword = this.filter
diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index 98bdbdb54..83e6f9554 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -18,7 +18,7 @@
 <template>
   <a-table
     :columns="columns"
-    :dataSource="items"
+    :dataSource="dataItems"
     :pagination="{showSizeChanger: true}"
     :rowSelection="rowSelection"
     :rowKey="record => record.id"
@@ -74,24 +74,24 @@ export default {
           scopedSlots: { customRender: 'macAddress' }
         }
       ],
-      selectedRowKeys: []
+      selectedRowKeys: [],
+      dataItems: []
     }
   },
+  beforeCreate () {
+    this.dataItems = []
+  },
   created () {
-    this.$emit('select-default-network-item', this.items[0].id)
+    this.dataItems = this.items
+    this.selectedRowKeys = [this.dataItems[0].id]
+    this.$emit('select-default-network-item', this.selectedRowKeys)
   },
   computed: {
     rowSelection () {
       return {
         type: 'radio',
-        onSelect: (row) => {
-          this.$emit('select-default-network-item', row.id)
-        },
-        getCheckboxProps: record => ({
-          props: {
-            defaultChecked: (record.name === this.items[0].name)
-          }
-        })
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectRow
       }
     }
   },
@@ -100,9 +100,22 @@ export default {
       if (newValue && newValue !== oldValue) {
         this.selectedRowKeys = [newValue]
       }
+    },
+    items (newData, oldData) {
+      if (newData && newData.length > 0) {
+        this.dataItems = newData
+        const keyEx = this.dataItems.filter((item) => this.selectedRowKeys.includes(item.id))
+        if (!keyEx || keyEx.length === 0) {
+          this.selectedRowKeys = [this.dataItems[0].id]
+        }
+      }
     }
   },
   methods: {
+    onSelectRow (value) {
+      this.selectedRowKeys = value
+      this.$emit('select-default-network-item', value[0])
+    },
     updateNetworkData (name, key, value) {
       if (this.networks.length === 0) {
         const networkItem = {}
diff --git a/src/views/compute/wizard/SshKeyPairSelection.vue b/src/views/compute/wizard/SshKeyPairSelection.vue
index e241049bc..420f406fc 100644
--- a/src/views/compute/wizard/SshKeyPairSelection.vue
+++ b/src/views/compute/wizard/SshKeyPairSelection.vue
@@ -75,9 +75,18 @@ export default {
           width: '30%'
         }
       ],
-      selectedRowKeys: []
+      selectedRowKeys: [this.$t('noselect')],
+      dataItems: []
     }
   },
+  created () {
+    this.dataItems = []
+    this.dataItems.push({
+      name: this.$t('noselect'),
+      account: '-',
+      domain: '-'
+    })
+  },
   computed: {
     options () {
       return {
@@ -87,7 +96,7 @@ export default {
       }
     },
     tableSource () {
-      return this.items.map((item) => {
+      return this.dataItems.map((item) => {
         return {
           key: item.name,
           name: item.name,
@@ -100,9 +109,7 @@ export default {
       return {
         type: 'radio',
         selectedRowKeys: this.selectedRowKeys,
-        onSelect: (row) => {
-          this.$emit('select-ssh-key-pair-item', row.key)
-        }
+        onChange: this.onSelectRow
       }
     }
   },
@@ -111,9 +118,18 @@ export default {
       if (newValue && newValue !== oldValue) {
         this.selectedRowKeys = [newValue]
       }
+    },
+    items (newData, oldData) {
+      if (newData && newData.length > 0) {
+        this.dataItems = this.dataItems.concat(newData)
+      }
     }
   },
   methods: {
+    onSelectRow (value) {
+      this.selectedRowKeys = value
+      this.$emit('select-ssh-key-pair-item', value[0])
+    },
     handleSearch (value) {
       this.filter = value
       this.options.keyword = this.filter
diff --git a/src/views/compute/wizard/TemplateIsoSelection.vue b/src/views/compute/wizard/TemplateIsoSelection.vue
index 3ff904729..0dbbec3b6 100644
--- a/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -16,31 +16,24 @@
 // under the License.
 
 <template>
-  <a-tabs :defaultActiveKey="Object.keys(osTypes)[0]" v-if="view === TAB_VIEW">
-    <a-button icon="search" slot="tabBarExtraContent" @click="() => toggleView(FILTER_VIEW)"/>
-    <a-tab-pane v-for="(osList, osName) in osTypes" :key="osName">
-      <span slot="tab">
-        <os-logo :os-name="osName"></os-logo>
-      </span>
-      <TemplateIsoRadioGroup
-        :osList="osList"
-        :input-decorator="inputDecorator"
-        :selected="selected"
-        @emit-update-template-iso="updateTemplateIso"
-      ></TemplateIsoRadioGroup>
-    </a-tab-pane>
-  </a-tabs>
-  <div v-else>
-    <a-input class="search-input" v-model="filter">
-      <a-icon slot="prefix" type="search"/>
-      <a-icon slot="addonAfter" type="close" @click="toggleView(TAB_VIEW)"/>
-    </a-input>
-    <TemplateIsoRadioGroup
-      :osList="filteredItems"
-      :input-decorator="inputDecorator"
-      :selected="selected"
-      @emit-update-template-iso="updateTemplateIso"
-    ></TemplateIsoRadioGroup>
+  <div>
+    <a-input-search
+      class="search-input"
+      placeholder="Search"
+      v-model="filter" />
+    <a-tabs style="width: 100%;" :defaultActiveKey="Object.keys(osTypes)[0]">
+      <a-tab-pane v-for="(osList, osName) in osTypes" :key="osName">
+        <span slot="tab">
+          <os-logo :os-name="osName"></os-logo>
+        </span>
+        <TemplateIsoRadioGroup
+          :osList="filteredItems"
+          :input-decorator="inputDecorator"
+          :selected="selected"
+          @emit-update-template-iso="updateTemplateIso"
+        ></TemplateIsoRadioGroup>
+      </a-tab-pane>
+    </a-tabs>
   </div>
 </template>
 
@@ -107,7 +100,7 @@ export default {
     },
     filter (filterString) {
       if (filterString !== '') {
-        this.filteredItems = this.filteredItems.filter((item) => item.displaytext.toLowerCase().includes(filterString))
+        this.filteredItems = this.items.filter((item) => item.displaytext.toLowerCase().includes(filterString.toLowerCase()))
       } else {
         this.filteredItems = this.items
       }
@@ -126,7 +119,11 @@ export default {
 
 <style lang="less" scoped>
   .search-input {
-    margin: 0.5rem 0 1rem;
+    width: 25vw;
+    z-index: 8;
+    position: absolute;
+    top: 11px;
+    right: 10px;
   }
 
   /deep/.ant-tabs-nav-scroll {

From 323853cd9d8fd63653fa3dc61dedbbad4cf929be Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 17 Feb 2020 10:05:30 +0700
Subject: [PATCH 17/24] Fixes style info card of SSHKeypair detail

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

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index d8f2886f0..79867f307 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -871,7 +871,7 @@ export default {
       font-weight: normal;
     }
 
-    .resource-detail-item__details {
+    .resource-detail-item__details, .resource-detail-item {
       a {
         color: rgba(0, 0, 0, 0.65);
         cursor: default;

From 892375bce457e9eab850cdd7ed860a27b9d1e946 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 17 Feb 2020 10:07:26 +0700
Subject: [PATCH 18/24] Add scrollable to network configuration

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

diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index 83e6f9554..c53ed19f8 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -23,6 +23,7 @@
     :rowSelection="rowSelection"
     :rowKey="record => record.id"
     size="middle"
+    :scroll="{ y: 225 }"
   >
     <template slot="ipAddress" slot-scope="text, record">
       <a-input

From 4646c80613316c5f190a8c276acae7d8bec94d99 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Mon, 17 Feb 2020 17:20:38 +0530
Subject: [PATCH 19/24] fix placeholder bug, failing component

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 src/style/ant-overwrite/ant-layout-header.less | 1 -
 src/views/AutogenView.vue                      | 4 ++--
 src/views/compute/DeployVM.vue                 | 5 -----
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/style/ant-overwrite/ant-layout-header.less b/src/style/ant-overwrite/ant-layout-header.less
index effe307c0..6761cbc41 100644
--- a/src/style/ant-overwrite/ant-layout-header.less
+++ b/src/style/ant-overwrite/ant-layout-header.less
@@ -46,5 +46,4 @@
 }
 
 .ant-badge-count {
-  top: -15px;
 }
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 856eba64e..c032bf075 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -227,7 +227,7 @@
         :pageSize="pageSize"
         :total="itemCount"
         :showTotal="total => `Total ${total} items`"
-        :pageSizeOptions="['10', '20', '40', '80', '100']"
+        :pageSizeOptions="['20', '40', '80', '100', '500']"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
@@ -289,7 +289,7 @@ export default {
       items: [],
       itemCount: 0,
       page: 1,
-      pageSize: 10,
+      pageSize: 20,
       searchQuery: '',
       resource: {},
       selectedRowKeys: [],
diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 79867f307..79f82e6b3 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -32,7 +32,6 @@
                     <a-form-item :label="this.$t('name')">
                       <a-input
                         v-decorator="['name']"
-                        :placeholder="apiParams.name.description"
                       />
                     </a-form-item>
                     <a-form-item :label="this.$t('zoneid')">
@@ -40,7 +39,6 @@
                         v-decorator="['zoneid', {
                           rules: [{ required: true, message: 'Please select option' }]
                         }]"
-                        :placeholder="apiParams.zoneid.description"
                         :options="zoneSelectOptions"
                         @change="onSelectZoneId"
                         :loading="loading.zones"
@@ -49,7 +47,6 @@
                     <a-form-item :label="this.$t('podId')">
                       <a-select
                         v-decorator="['podid']"
-                        :placeholder="apiParams.podid.description"
                         :options="podSelectOptions"
                         :loading="loading.pods"
                       ></a-select>
@@ -57,7 +54,6 @@
                     <a-form-item :label="this.$t('clusterid')">
                       <a-select
                         v-decorator="['clusterid']"
-                        :placeholder="apiParams.clusterid.description"
                         :options="clusterSelectOptions"
                         :loading="loading.clusters"
                       ></a-select>
@@ -65,7 +61,6 @@
                     <a-form-item :label="this.$t('hostId')">
                       <a-select
                         v-decorator="['hostid']"
-                        :placeholder="apiParams.hostid.description"
                         :options="hostSelectOptions"
                         :loading="loading.hosts"
                       ></a-select>

From 048c4ce6cd209977dc1c54fed5bfe0562e538e0e Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 18 Feb 2020 14:38:14 +0700
Subject: [PATCH 20/24] Add support to specify keyboard, userdata, group

---
 src/locales/en.json                           |  5 +-
 src/views/compute/DeployVM.vue                | 92 ++++++++++++++++++-
 src/views/compute/wizard/NetworkSelection.vue |  2 +-
 3 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 3d0b9069a..0964e04a9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1082,5 +1082,8 @@
 "existingNetworks": "Existing networks",
 "sshKeyPairs": "SSH keypairs",
 "wednesday": "Wednesday",
-"noselect": "No thanks"
+"noselect": "No thanks",
+"groupname": "Add to group",
+"keyboard": "Keyboard language",
+"userdata": "Userdata"
 }
diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 79f82e6b3..4316e6590 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -65,6 +65,24 @@
                         :loading="loading.hosts"
                       ></a-select>
                     </a-form-item>
+                    <a-form-item :label="this.$t('groupname')">
+                      <a-select
+                        v-decorator="['group']"
+                        :options="groupsSelectOptions"
+                        :loading="loading.groups"
+                      ></a-select>
+                    </a-form-item>
+                    <a-form-item :label="this.$t('keyboard')">
+                      <a-select
+                        v-decorator="['keyboard']"
+                        :options="keyboardSelectOptions"
+                      ></a-select>
+                    </a-form-item>
+                    <a-form-item :label="this.$t('userdata')">
+                      <a-textarea
+                        v-decorator="['userdata']">
+                      </a-textarea>
+                    </a-form-item>
                   </div>
                 </template>
               </a-step>
@@ -286,7 +304,9 @@ export default {
         sshKeyPairs: [],
         pods: [],
         clusters: [],
-        hosts: []
+        hosts: [],
+        groups: [],
+        keyboards: []
       },
       loading: {
         deploy: false,
@@ -300,7 +320,8 @@ export default {
         zones: false,
         pods: false,
         clusters: false,
-        hosts: false
+        hosts: false,
+        groups: false
       },
       instanceConfig: [],
       template: {},
@@ -438,6 +459,9 @@ export default {
             state: 'Up',
             type: 'Routing'
           }
+        },
+        groups: {
+          list: 'listInstanceGroups'
         }
       }
     },
@@ -475,6 +499,22 @@ export default {
           value: host.id
         }
       })
+    },
+    keyboardSelectOptions () {
+      return this.options.keyboards.map((keyboard) => {
+        return {
+          label: this.$t(keyboard.description),
+          value: keyboard.id
+        }
+      })
+    },
+    groupsSelectOptions () {
+      return this.options.groups.map((group) => {
+        return {
+          label: group.name,
+          value: group.id
+        }
+      })
     }
   },
   watch: {
@@ -567,10 +607,41 @@ export default {
       this.fetchOptions(this.params.pods, 'pods')
       this.fetchOptions(this.params.clusters, 'clusters')
       this.fetchOptions(this.params.hosts, 'hosts')
+      this.fetchOptions(this.params.groups, 'groups')
+      this.fetchKeyboard()
       Vue.nextTick().then(() => {
         this.instanceConfig = this.form.getFieldsValue() // ToDo: maybe initialize with some other defaults
       })
     },
+    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)
+    },
     resetData () {
       this.vm = {}
       this.zoneSelected = false
@@ -655,6 +726,11 @@ export default {
         deployVmData.podid = values.podid
         deployVmData.clusterid = values.clusterid
         deployVmData.hostid = values.hostid
+        deployVmData.group = values.group
+        deployVmData.keyboard = values.keyboard
+        if (values.keyboard && values.keyboard.length > 0) {
+          deployVmData.userdata = encodeURIComponent(btoa(this.sanitizeReverse(values.keyboard)))
+        }
         // step 2: select template/iso
         if (this.tabKey === 'templateid') {
           deployVmData.templateid = values.templateid
@@ -809,11 +885,11 @@ export default {
         isoid: undefined
       })
       _.each(this.params, (param, name) => {
-        this.fetchOptions(param, name, ['zones'])
+        this.fetchOptions(param, name, ['zones', 'groups'])
       })
     },
     handleSearchFilter (name, options) {
-      this.params[name].options = { ...options }
+      this.params[name].options = { ...this.params[name].options, ...options }
       this.fetchOptions(this.params[name], name)
     },
     onTabChange (key, type) {
@@ -821,6 +897,14 @@ export default {
       if (key === 'isoid') {
         this.fetchAllIsos()
       }
+    },
+    sanitizeReverse (value) {
+      const reversedValue = value
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+
+      return reversedValue
     }
   }
 }
diff --git a/src/views/compute/wizard/NetworkSelection.vue b/src/views/compute/wizard/NetworkSelection.vue
index 6d96d52be..21151f211 100644
--- a/src/views/compute/wizard/NetworkSelection.vue
+++ b/src/views/compute/wizard/NetworkSelection.vue
@@ -27,7 +27,7 @@
       :columns="columns"
       :dataSource="networkItems"
       :rowKey="record => record.id"
-      :pagination="{showSizeChanger: true}"
+      :pagination="{showSizeChanger: true, size: 'small'}"
       :rowSelection="rowSelection"
       @change="handleTableChange"
       :scroll="{ y: 225 }"

From 9e09c619dc8d865bce3f42f685ba39e52e4ef7fa Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 19 Feb 2020 10:09:52 +0700
Subject: [PATCH 21/24] Fixes: 1. Add pagination support for templates/isos 2.
 Add filter templates/isos by tags

---
 src/views/compute/DeployVM.vue                |  53 +++++--
 .../compute/wizard/TemplateIsoRadioGroup.vue  | 132 ++++++++++-------
 .../compute/wizard/TemplateIsoSelection.vue   | 136 +++++++++++++-----
 3 files changed, 225 insertions(+), 96 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 4316e6590..5da1a364d 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -100,8 +100,8 @@
                           input-decorator="templateid"
                           :items="options.templates"
                           :selected="tabKey"
+                          :loading="loading.templates"
                           @update-template-iso="updateFieldValue"
-                          v-if="options.templates.length > 0"
                         ></template-iso-selection>
                         <disk-size-selection
                           input-decorator="rootdisksize"
@@ -112,6 +112,7 @@
                           input-decorator="isoid"
                           :items="options.isos"
                           :selected="tabKey"
+                          :loading="loading.isos"
                           @update-template-iso="updateFieldValue"
                         ></template-iso-selection>
                       </p>
@@ -333,8 +334,15 @@ export default {
       networksAdd: [],
       zone: {},
       sshKeyPair: {},
+      templateFilter: [
+        'featured',
+        'community',
+        'selfexecutable',
+        'sharedexecutable'
+      ],
       isoFilter: [
-        'executable',
+        'featured',
+        'community',
         'selfexecutable',
         'sharedexecutable'
       ],
@@ -383,13 +391,6 @@ export default {
     },
     params () {
       return {
-        templates: {
-          list: 'listTemplates',
-          options: {
-            templatefilter: 'executable',
-            zoneid: _.get(this.zone, 'id')
-          }
-        },
         serviceOfferings: {
           list: 'listServiceOfferings',
           options: {
@@ -841,6 +842,19 @@ export default {
         this.loading[name] = false
       })
     },
+    fetchTemplates (templateFilter) {
+      return new Promise((resolve, reject) => {
+        api('listTemplates', {
+          zoneid: _.get(this.zone, 'id'),
+          templatefilter: templateFilter
+        }).then((response) => {
+          resolve(response)
+        }).catch((reason) => {
+          // ToDo: Handle errors
+          reject(reason)
+        })
+      })
+    },
     fetchIsos (isoFilter) {
       return new Promise((resolve, reject) => {
         api('listIsos', {
@@ -855,6 +869,25 @@ export default {
         })
       })
     },
+    fetchAllTemplates () {
+      const promises = []
+      this.options.templates = []
+      this.loading.templates = true
+      this.templateFilter.forEach((filter) => {
+        promises.push(this.fetchTemplates(filter))
+      })
+      Promise.all(promises).then(response => {
+        response.forEach((resItem) => {
+          const concatTemplates = _.concat(this.options.templates, _.get(resItem, 'listtemplatesresponse.template', []))
+          this.options.templates = _.uniqWith(concatTemplates, _.isEqual)
+          this.$forceUpdate()
+        })
+      }).catch((reason) => {
+        console.log(reason)
+      }).finally(() => {
+        this.loading.templates = false
+      })
+    },
     fetchAllIsos () {
       const promises = []
       this.options.isos = []
@@ -884,9 +917,11 @@ export default {
         templateid: undefined,
         isoid: undefined
       })
+      this.tabKey = 'templateid'
       _.each(this.params, (param, name) => {
         this.fetchOptions(param, name, ['zones', 'groups'])
       })
+      this.fetchAllTemplates()
     },
     handleSearchFilter (name, options) {
       this.params[name].options = { ...this.params[name].options, ...options }
diff --git a/src/views/compute/wizard/TemplateIsoRadioGroup.vue b/src/views/compute/wizard/TemplateIsoRadioGroup.vue
index fe5e0b768..594b2d05a 100644
--- a/src/views/compute/wizard/TemplateIsoRadioGroup.vue
+++ b/src/views/compute/wizard/TemplateIsoRadioGroup.vue
@@ -17,38 +17,46 @@
 
 <template>
   <a-form-item>
-    <div class="form-item-scroll">
-      <a-radio-group
-        v-for="(os, osIndex) in osList"
-        :key="osIndex"
-        class="radio-group"
-        v-model="value"
-        @change="($event) => updateSelectionTemplateIso($event.target.value)"
-      >
-        <a-radio
-          class="radio-group__radio"
-          :value="os.id"
-        >
-          {{ os.displaytext }}&nbsp;
-          <a-tag
-            :visible="os.ispublic && !os.isfeatured"
-            color="blue"
-          >{{ $t('isPublic') }}</a-tag>
-          <a-tag
-            :visible="os.isfeatured"
-            color="green"
-          >{{ $t('isFeatured') }}</a-tag>
-          <a-tag
-            :visible="isSelf(os)"
-            color="orange"
-          >{{ $t('isSelf') }}</a-tag>
-          <a-tag
-            :visible="isShared(os)"
-            color="cyan"
-          >{{ $t('isShared') }}</a-tag>
-        </a-radio>
-      </a-radio-group>
-    </div>
+    <a-list
+      class="form-item-scroll"
+      itemLayout="vertical"
+      size="small"
+      :dataSource="osList"
+      :pagination="pagination">
+      <a-list-item slot="renderItem" slot-scope="os, osIndex" key="os.id">
+        <a-radio-group
+          class="radio-group"
+          :key="osIndex"
+          v-model="value"
+          @change="($event) => updateSelectionTemplateIso($event.target.value)">
+          <a-radio
+            class="radio-group__radio"
+            :value="os.id">
+            {{ os.displaytext }}&nbsp;
+            <a-tag
+              :visible="os.ispublic && !os.isfeatured"
+              color="blue"
+              @click="onFilterTag('is: public')"
+            >{{ $t('isPublic') }}</a-tag>
+            <a-tag
+              :visible="os.isfeatured"
+              color="green"
+              @click="onFilterTag('is: featured')"
+            >{{ $t('isFeatured') }}</a-tag>
+            <a-tag
+              :visible="isSelf(os)"
+              color="orange"
+              @click="onFilterTag('is: self')"
+            >{{ $t('isSelf') }}</a-tag>
+            <a-tag
+              :visible="isShared(os)"
+              color="cyan"
+              @click="onFilterTag('is: shared')"
+            >{{ $t('isShared') }}</a-tag>
+          </a-radio>
+        </a-radio-group>
+      </a-list-item>
+    </a-list>
   </a-form-item>
 </template>
 
@@ -69,30 +77,40 @@ export default {
     selected: {
       type: String,
       default: ''
+    },
+    itemCount: {
+      type: Number,
+      default: 0
     }
   },
   data () {
     return {
-      value: ''
+      value: '',
+      page: 1,
+      pageSize: 10
     }
   },
   created () {
-    if (this.inputDecorator === 'templateid') {
-      this.value = this.osList[0].id
-      this.$emit('emit-update-template-iso', this.inputDecorator, this.value)
-    }
+    this.value = this.selected
+    this.$emit('emit-update-template-iso', this.inputDecorator, this.value)
   },
   watch: {
-    selected (newValue, oldValue) {
-      if (newValue !== this.inputDecorator) {
-        this.value = ''
+    inputDecorator (value) {
+      if (value === 'templateid') {
+        this.value = this.selected
       }
-    },
-    osList (newData, oldData) {
-      if (newData && newData.length > 0) {
-        this.osList = newData
-        this.value = this.osList[0].id
-        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
       }
     }
   },
@@ -105,6 +123,19 @@ export default {
     },
     updateSelectionTemplateIso (id) {
       this.$emit('emit-update-template-iso', this.inputDecorator, id)
+    },
+    onChangePage (page, pageSize) {
+      this.pagination.page = page
+      this.pagination.pageSize = pageSize
+      this.$forceUpdate()
+    },
+    onChangePageSize (page, pageSize) {
+      this.pagination.page = page
+      this.pagination.pageSize = pageSize
+      this.$forceUpdate()
+    },
+    onFilterTag (tag) {
+      this.$emit('handle-filter-tag', tag)
     }
   }
 }
@@ -123,8 +154,13 @@ export default {
     margin-left: 0.4rem;
   }
 
-  .form-item-scroll {
-    max-height: 19vh;
+  /deep/.ant-spin-container {
+    max-height: 200px;
     overflow-y: auto;
   }
+
+  .pagination {
+    margin-top: 20px;
+    float: right;
+  }
 </style>
diff --git a/src/views/compute/wizard/TemplateIsoSelection.vue b/src/views/compute/wizard/TemplateIsoSelection.vue
index 0dbbec3b6..11824d86c 100644
--- a/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -20,20 +20,28 @@
     <a-input-search
       class="search-input"
       placeholder="Search"
-      v-model="filter" />
-    <a-tabs style="width: 100%;" :defaultActiveKey="Object.keys(osTypes)[0]">
-      <a-tab-pane v-for="(osList, osName) in osTypes" :key="osName">
-        <span slot="tab">
-          <os-logo :os-name="osName"></os-logo>
-        </span>
-        <TemplateIsoRadioGroup
-          :osList="filteredItems"
-          :input-decorator="inputDecorator"
-          :selected="selected"
-          @emit-update-template-iso="updateTemplateIso"
-        ></TemplateIsoRadioGroup>
-      </a-tab-pane>
-    </a-tabs>
+      v-model="filter"
+      @search="filterDataSource"/>
+    <a-spin :spinning="loading">
+      <a-tabs
+        tabPosition="top"
+        :defaultActiveKey="Object.keys(dataSource)[0]">
+        <a-tab-pane v-for="(osList, osName) in dataSource" :key="osName">
+          <span slot="tab">
+            <os-logo :os-name="osName"></os-logo>
+          </span>
+          <TemplateIsoRadioGroup
+            :osType="osName"
+            :osList="dataSource[osName]"
+            :input-decorator="inputDecorator"
+            :selected="checkedValue"
+            :itemCount="itemCount[osName]"
+            @handle-filter-tag="filterDataSource"
+            @emit-update-template-iso="updateTemplateIso"
+          ></TemplateIsoRadioGroup>
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
   </div>
 </template>
 
@@ -42,9 +50,7 @@ import OsLogo from '@/components/widgets/OsLogo'
 import { getNormalizedOsName } from '@/utils/icons'
 import _ from 'lodash'
 import TemplateIsoRadioGroup from '@views/compute/wizard/TemplateIsoRadioGroup'
-
-export const TAB_VIEW = 1
-export const FILTER_VIEW = 2
+import store from '@/store'
 
 export default {
   name: 'TemplateIsoSelection',
@@ -61,27 +67,49 @@ export default {
     selected: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
-      TAB_VIEW: TAB_VIEW,
-      FILTER_VIEW: FILTER_VIEW,
-      visible: false,
       filter: '',
       filteredItems: this.items,
-      view: TAB_VIEW
+      checkedValue: '',
+      dataSource: {},
+      itemCount: {}
     }
   },
-  computed: {
-    osTypes () {
+  watch: {
+    items (items) {
+      this.filteredItems = []
+      this.checkedValue = ''
+      if (items && items.length > 0) {
+        this.filteredItems = items
+        this.checkedValue = items[0].id
+      }
+      this.dataSource = this.mappingDataSource()
+    },
+    inputDecorator (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.filter = ''
+      }
+    }
+  },
+  methods: {
+    mappingDataSource () {
       let mappedItems = {}
-      this.items.forEach((os) => {
+      const itemCount = {}
+      this.filteredItems.forEach((os) => {
         const osName = getNormalizedOsName(os.ostypename)
         if (Array.isArray(mappedItems[osName])) {
           mappedItems[osName].push(os)
+          itemCount[osName] = itemCount[osName] + 1
         } else {
           mappedItems[osName] = [os]
+          itemCount[osName] = 1
         }
       })
       mappedItems = _.mapValues(mappedItems, (list) => {
@@ -91,27 +119,50 @@ export default {
         nonFeaturedItems = _.sortBy(nonFeaturedItems, (item) => item.displaytext.toLowerCase())
         return featuredItems.concat(nonFeaturedItems) // pin featured isos/templates at the top
       })
+      this.itemCount = itemCount
       return mappedItems
-    }
-  },
-  watch: {
-    items (items) {
-      this.filteredItems = items
     },
-    filter (filterString) {
-      if (filterString !== '') {
-        this.filteredItems = this.items.filter((item) => item.displaytext.toLowerCase().includes(filterString.toLowerCase()))
+    updateTemplateIso (name, id) {
+      this.$emit('update-template-iso', name, id)
+    },
+    filterDataSource (strQuery) {
+      if (strQuery !== '' && strQuery.includes('is:')) {
+        this.filteredItems = []
+        this.filter = strQuery
+        const filters = strQuery.split(';')
+        filters.forEach((filter) => {
+          const query = filter.replace(/ /g, '')
+          const data = this.filterDataSourceByTag(query)
+          this.filteredItems = this.filteredItems.concat(data)
+        })
+      } else if (strQuery !== '') {
+        this.filteredItems = this.items.filter((item) => item.displaytext.toLowerCase().includes(strQuery.toLowerCase()))
       } else {
         this.filteredItems = this.items
       }
-    }
-  },
-  methods: {
-    toggleView (view) {
-      this.view = view
+      this.dataSource = this.mappingDataSource()
     },
-    updateTemplateIso (name, id) {
-      this.$emit('update-template-iso', name, id)
+    filterDataSourceByTag (tag) {
+      let arrResult = []
+      if (tag.includes('public')) {
+        arrResult = this.items.filter((item) => {
+          return item.ispublic && item.isfeatured
+        })
+      } else if (tag.includes('featured')) {
+        arrResult = this.items.filter((item) => {
+          return item.isfeatured
+        })
+      } else if (tag.includes('self')) {
+        arrResult = this.items.filter((item) => {
+          return !item.ispublic && (item.account === store.getters.userInfo.account)
+        })
+      } else if (tag.includes('shared')) {
+        arrResult = this.items.filter((item) => {
+          return !item.ispublic && (item.account !== store.getters.userInfo.account)
+        })
+      }
+
+      return arrResult
     }
   }
 }
@@ -124,6 +175,13 @@ export default {
     position: absolute;
     top: 11px;
     right: 10px;
+
+    @media (max-width: 600px) {
+      position: relative;
+      width: 100%;
+      top: 0;
+      right: 0;
+    }
   }
 
   /deep/.ant-tabs-nav-scroll {

From decb479ad5576e29c38cac7da6e088abd11f6bbc Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Wed, 25 Mar 2020 19:03:20 +0530
Subject: [PATCH 22/24] minor fixes

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
(cherry picked from commit 061ca11b362ef6c8b23bde209cf1a3f37b05a8af)
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 src/views/compute/DeployVM.vue                     | 2 +-
 src/views/compute/wizard/DiskOfferingSelection.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 5da1a364d..00dc34d0a 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -145,7 +145,7 @@
                 </template>
               </a-step>
               <a-step
-                :title="this.$t('diskOfferingId')"
+                :title="this.$t('diskofferingid')"
                 :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
                   <div v-if="zoneSelected">
diff --git a/src/views/compute/wizard/DiskOfferingSelection.vue b/src/views/compute/wizard/DiskOfferingSelection.vue
index 21ba995e4..33d94ac9e 100644
--- a/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -72,11 +72,11 @@ export default {
       columns: [
         {
           dataIndex: 'name',
-          title: this.$t('diskOffering'),
+          title: this.$t('diskoffering'),
           width: '40%'
         },
         {
-          dataIndex: 'diskSize',
+          dataIndex: 'disksize',
           slots: { title: 'diskSizeTitle' },
           width: '30%',
           scopedSlots: { customRender: 'diskSize' }

From 6a3e4becc203b9c72f386cd3dec421ade52c5f6f Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Thu, 26 Mar 2020 02:20:15 +0530
Subject: [PATCH 23/24] pg size fix

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 src/views/AutogenView.vue           | 4 ++--
 src/views/iam/SSLCertificateTab.vue | 2 +-
 src/views/image/IsoZones.vue        | 2 +-
 src/views/image/TemplateZones.vue   | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 0393f7645..871c380fa 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -235,7 +235,7 @@
         :pageSize="pageSize"
         :total="itemCount"
         :showTotal="total => `Total ${total} items`"
-        :pageSizeOptions="['20', '40', '80', '100', '500']"
+        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
@@ -297,7 +297,7 @@ export default {
       items: [],
       itemCount: 0,
       page: 1,
-      pageSize: 20,
+      pageSize: 10,
       searchQuery: '',
       resource: {},
       selectedRowKeys: [],
diff --git a/src/views/iam/SSLCertificateTab.vue b/src/views/iam/SSLCertificateTab.vue
index c5b2a7949..a6941f08f 100644
--- a/src/views/iam/SSLCertificateTab.vue
+++ b/src/views/iam/SSLCertificateTab.vue
@@ -81,7 +81,7 @@ export default {
       detailColumn: [],
       detail: [],
       page: 1,
-      pageSize: 20,
+      pageSize: 10,
       quickview: false,
       loading: false
     }
diff --git a/src/views/image/IsoZones.vue b/src/views/image/IsoZones.vue
index 5cb958224..b08bf9946 100644
--- a/src/views/image/IsoZones.vue
+++ b/src/views/image/IsoZones.vue
@@ -70,7 +70,7 @@ export default {
       detailColumn: [],
       detail: [],
       page: 1,
-      pageSize: 20,
+      pageSize: 10,
       itemCount: 0,
       fetchLoading: false
     }
diff --git a/src/views/image/TemplateZones.vue b/src/views/image/TemplateZones.vue
index 5a86128b6..46661bb6c 100644
--- a/src/views/image/TemplateZones.vue
+++ b/src/views/image/TemplateZones.vue
@@ -68,7 +68,7 @@ export default {
       columns: [],
       dataSource: [],
       page: 1,
-      pageSize: 20,
+      pageSize: 10,
       itemCount: 0,
       fetchLoading: false
     }

From 13cb2f9910253ab92976a47f6d22fb66ff3b6857 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Thu, 26 Mar 2020 02:29:42 +0530
Subject: [PATCH 24/24] view port fixes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 src/locales/en.json                               | 2 +-
 src/utils/device.js                               | 7 +++----
 src/views/compute/DeployVM.vue                    | 4 ++--
 src/views/compute/KubernetesServiceTab.vue        | 2 +-
 src/views/compute/wizard/TemplateIsoSelection.vue | 1 +
 src/views/network/VpcTab.vue                      | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 651121120..d4ddbffbe 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1103,7 +1103,7 @@
 "sshKeyPairs": "SSH keypairs",
 "wednesday": "Wednesday",
 "noselect": "No thanks",
-"groupname": "Add to group",
+"group": "Group",
 "keyboard": "Keyboard language",
 "userdata": "Userdata",
 "label.back": "Back",
diff --git a/src/utils/device.js b/src/utils/device.js
index 731270d83..ce6deab7b 100644
--- a/src/utils/device.js
+++ b/src/utils/device.js
@@ -42,9 +42,8 @@ export const deviceEnquire = function (callback) {
     }
   }
 
-  // screen and (max-width: 1087.99px)
   enquireJs
-    .register('screen and (max-width: 576px)', matchMobile)
-    .register('screen and (min-width: 576px) and (max-width: 1280px)', matchTablet)
-    .register('screen and (min-width: 1281px)', matchDesktop)
+    .register('screen and (max-width: 800px)', matchMobile)
+    .register('screen and (min-width: 800px) and (max-width: 1366px)', matchTablet)
+    .register('screen and (min-width: 1367px)', matchDesktop)
 }
diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue
index 00dc34d0a..f1a4c9eb7 100644
--- a/src/views/compute/DeployVM.vue
+++ b/src/views/compute/DeployVM.vue
@@ -26,7 +26,7 @@
             layout="vertical"
           >
             <a-steps direction="vertical" size="small">
-              <a-step :title="this.$t('BasicSetup')" status="process">
+              <a-step :title="this.$t('details')" status="process">
                 <template slot="description">
                   <div style="margin-top: 15px">
                     <a-form-item :label="this.$t('name')">
@@ -65,7 +65,7 @@
                         :loading="loading.hosts"
                       ></a-select>
                     </a-form-item>
-                    <a-form-item :label="this.$t('groupname')">
+                    <a-form-item :label="this.$t('group')">
                       <a-select
                         v-decorator="['group']"
                         :options="groupsSelectOptions"
diff --git a/src/views/compute/KubernetesServiceTab.vue b/src/views/compute/KubernetesServiceTab.vue
index d71d5a666..daa7851cc 100644
--- a/src/views/compute/KubernetesServiceTab.vue
+++ b/src/views/compute/KubernetesServiceTab.vue
@@ -19,7 +19,7 @@
   <a-spin :spinning="networkLoading">
     <a-tabs
       :activeKey="currentTab"
-      :tabPosition="device === 'tablet' || device === 'mobile' ? 'top' : 'left'"
+      :tabPosition="device === 'mobile' ? 'top' : 'left'"
       :animated="false"
       @change="handleChangeTab">
       <a-tab-pane :tab="$t('details')" key="details">
diff --git a/src/views/compute/wizard/TemplateIsoSelection.vue b/src/views/compute/wizard/TemplateIsoSelection.vue
index 11824d86c..b26f89327 100644
--- a/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -25,6 +25,7 @@
     <a-spin :spinning="loading">
       <a-tabs
         tabPosition="top"
+        :animated="false"
         :defaultActiveKey="Object.keys(dataSource)[0]">
         <a-tab-pane v-for="(osList, osName) in dataSource" :key="osName">
           <span slot="tab">
diff --git a/src/views/network/VpcTab.vue b/src/views/network/VpcTab.vue
index 2b4d325b1..d0d8dbb13 100644
--- a/src/views/network/VpcTab.vue
+++ b/src/views/network/VpcTab.vue
@@ -19,7 +19,7 @@
   <a-spin :spinning="fetchLoading">
     <a-tabs
       :activeKey="currentTab"
-      :tabPosition="device === 'tablet' || device === 'mobile' ? 'top' : 'left'"
+      :tabPosition="device === 'mobile' ? 'top' : 'left'"
       :animated="false"
       @change="handleChangeTab">
       <a-tab-pane :tab="$t('details')" key="details">