primate: use a-table with pagination instead of a-list (#151)

This converts many components to use a-table with a-pagination than a-list:
* Convert MigrateWizard
* Convert Firewalls
* Convert Port Forwarding
* Convert Load Balancing
* Convert Egress Configure
* Convert IngressEgress Configure
* Convert Dedicate VLAN
* Convert VPC Tiers tab

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: Ritchie Vincent <ritchie@ritchievincent.co.uk>
Co-authored-by: Rohit Yadav <rohit.yadav@shapeblue.com>

Author: 3 people

ui/src/config/section/network.js

@@ -40,7 +40,7 @@ export default {
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
         name: 'Egress Rules',
-        component: () => import('@/views/network/EgressConfigure.vue'),
+        component: () => import('@/views/network/EgressRulesTab.vue'),
         show: (record) => { return record.type === 'Isolated' && 'listEgressFirewallRules' in store.getters.apis }
       }, {
         name: 'Public IP Addresses',

ui/src/locales/en.json

@@ -917,6 +917,7 @@
 "snmpPort": "SNMP Port",
 "sockettimeout": "Socket Timeout",
 "sourcecidr": "Source CIDR",
+"destcidr": "Destination CIDR",
 "sourceNat": "Source NAT",
 "sourceipaddress": "Source IP Address",
 "sourceport": "Source Port",

ui/src/views/compute/MigrateWizard.vue

@@ -16,60 +16,64 @@
 // under the License.
 
 <template>
-  <a-list :dataSource="hosts" itemLayout="vertical" class="list" :loading="loading">
-    <div slot="header" class="list__header">
-      <a-input-search
-        placeholder="Search"
-        v-model="searchQuery"
-        @search="fetchData" />
-    </div>
-    <a-list-item
-      slot="renderItem"
-      slot-scope="host, index"
-      class="host-item"
-      :class="{ 'host-item--selected' : selectedIndex === index }"
-    >
-      <div class="host-item__row">
-        <div class="host-item__value">
-          <span class="host-item__title">{{ $t('name') }}</span>
-          {{ host.name }}
-        </div>
-        <div class="host-item__value host-item__value--small">
-          <span class="host-item__title">Suitability</span>
-          <a-icon
-            class="host-item__suitability-icon"
-            type="check-circle"
-            theme="twoTone"
-            twoToneColor="#52c41a"
-            v-if="host.suitableformigration" />
-          <a-icon
-            class="host-item__suitability-icon"
-            type="close-circle"
-            theme="twoTone"
-            twoToneColor="#f5222d"
-            v-else />
-        </div>
-        <div class="host-item__value host-item__value--full">
-          <span class="host-item__title">{{ $t('cpuused') }}</span>
-          {{ host.cpuused }}
-        </div>
-        <div class="host-item__value">
-          <span class="host-item__title">{{ $t('memused') }}</span>
-          {{ host.memoryused | byteToGigabyte }} GB
-        </div>
+  <div class="form">
+    <a-input-search
+      placeholder="Search"
+      v-model="searchQuery"
+      style="margin-bottom: 10px;"
+      @search="fetchData" />
+    <a-table
+      size="small"
+      style="overflow-y: auto"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="hosts"
+      :pagination="false"
+      :rowKey="record => record.id">
+      <div slot="suitability" slot-scope="record">
+        <a-icon
+          class="host-item__suitability-icon"
+          type="check-circle"
+          theme="twoTone"
+          twoToneColor="#52c41a"
+          v-if="record.suitableformigration" />
+        <a-icon
+          class="host-item__suitability-icon"
+          type="close-circle"
+          theme="twoTone"
+          twoToneColor="#f5222d"
+          v-else />
+      </div>
+      <div slot="memused" slot-scope="record">
+        {{ record.memoryused | byteToGigabyte }} GB
+      </div>
+      <template slot="select" slot-scope="record">
         <a-radio
           class="host-item__radio"
-          @click="selectedIndex = index"
-          :checked="selectedIndex === index"
-          :disabled="!host.suitableformigration"></a-radio>
-      </div>
-    </a-list-item>
-    <div slot="footer" class="list__footer">
-      <a-button type="primary" :disabled="selectedIndex === null" @click="submitForm">
-        {{ $t('OK') }}
+          @click="selectedHost = record"
+          :checked="record.id === selectedHost.id"
+          :disabled="!record.suitableformigration"></a-radio>
+      </template>
+    </a-table>
+    <a-pagination
+      class="pagination"
+      size="small"
+      :current="page"
+      :pageSize="pageSize"
+      :total="totalCount"
+      :showTotal="total => `Total ${total} items`"
+      :pageSizeOptions="['10', '20', '40', '80', '100']"
+      @change="handleChangePage"
+      @showSizeChange="handleChangePageSize"
+      showSizeChanger/>
+
+    <div style="margin-top: 20px; display: flex; justify-content:flex-end;">
+      <a-button type="primary" :disabled="!selectedHost.id" @click="submitForm">
+        {{ $t('ok') }}
       </a-button>
     </div>
-  </a-list>
+  </div>
+
 </template>
 
 <script>
@@ -87,8 +91,33 @@ export default {
     return {
       loading: true,
       hosts: [],
-      selectedIndex: null,
-      searchQuery: ''
+      selectedHost: {},
+      searchQuery: '',
+      totalCount: 0,
+      page: 1,
+      pageSize: 10,
+      columns: [
+        {
+          title: this.$t('name'),
+          dataIndex: 'name'
+        },
+        {
+          title: this.$t('Suitability'),
+          scopedSlots: { customRender: 'suitability' }
+        },
+        {
+          title: this.$t('cpuused'),
+          dataIndex: 'cpuused'
+        },
+        {
+          title: this.$t('memused'),
+          scopedSlots: { customRender: 'memused' }
+        },
+        {
+          title: this.$t('select'),
+          scopedSlots: { customRender: 'select' }
+        }
+      ]
     }
   },
   mounted () {
@@ -100,20 +129,24 @@ export default {
       api('findHostsForMigration', {
         virtualmachineid: this.resource.id,
         keyword: this.searchQuery,
-        page: 1,
-        pagesize: 500
+        page: this.page,
+        pagesize: this.pageSize
       }).then(response => {
         this.hosts = response.findhostsformigrationresponse.host
-        this.loading = false
+        this.totalCount = response.findhostsformigrationresponse.count
+        if (this.totalCount > 0) {
+          this.totalCount -= 1
+        }
       }).catch(error => {
         this.$message.error('Failed to load hosts: ' + error)
+      }).finally(() => {
+        this.loading = false
       })
     },
     submitForm () {
       this.loading = true
-      const host = this.hosts[this.selectedIndex]
-      api(host.requiresStorageMotion ? 'migrateVirtualMachineWithVolume' : 'migrateVirtualMachine', {
-        hostid: host.id,
+      api(this.selectedHost.requiresStorageMotion ? 'migrateVirtualMachineWithVolume' : 'migrateVirtualMachine', {
+        hostid: this.selectedHost.id,
         virtualmachineid: this.resource.id
       }).then(response => {
         this.$store.dispatch('AddAsyncJob', {
@@ -141,42 +174,34 @@ export default {
         this.$parent.$parent.close()
       }).catch(error => {
         console.error(error)
-        this.$message.error('Failed to migrate host.')
+        this.$message.error(`Failed to migrate VM to host ${this.selectedHost.name}`)
       })
+    },
+    handleChangePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    handleChangePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.fetchData()
     }
   },
   filters: {
     byteToGigabyte: value => {
-      if (!value) return ''
-      value = value / Math.pow(10, 9)
-      return value.toFixed(2)
+      return (value / Math.pow(10, 9)).toFixed(2)
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
 
-  .list {
-    max-height: 95vh;
-    width: 95vw;
-    overflow-y: scroll;
-    margin: -24px;
-
-    @media (min-width: 1000px) {
-      max-height: 70vh;
-      width: 60vw;
-    }
-
-    &__header,
-    &__footer {
-      padding-left: 20px;
-      padding-right: 20px;
-    }
-
-    &__footer {
-      display: flex;
-      justify-content: flex-end;
+  .form {
+    width: 85vw;
+    @media (min-width: 800px) {
+      width: 750px;
     }
   }
 
@@ -230,4 +255,8 @@ export default {
     }
 
   }
+
+  .pagination {
+    margin-top: 20px;
+  }
 </style>