Add tier select + update to use <a-table>

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/views/network/EnableStaticNat.vue

@@ -16,54 +16,37 @@
 // under the License.
 
 <template>
-  <a-list class="list" :loading="loading">
+  <div class="list" :loading="loading">
-    <div slot="header" class="list__header">
+    <div class="list__header">
-      <a-input-search
+      <div class="list__header__col" v-if="tiersSelect">
-        placeholder="Search"
+        <a-select @change="handleTierSelect" v-model="selectedTier">
-        v-model="searchQuery"
+          <a-select-option v-for="network in networksList" :key="network.id" :value="network.id">
-        @search="fetchData" />
+            {{ network.name }}
+          </a-select-option>
+        </a-select>
+      </div>
+
+      <div class="list__header__col list__header__col--full">
+        <a-input-search
+          placeholder="Search"
+          v-model="searchQuery"
+          @search="fetchData" />
+      </div>
     </div>
 
-    <a-list-item
+    <a-table
-      v-for="vm in vmsList"
+      size="small"
-      :key="vm.id"
+      :loading="loading"
-      class="list__item"
+      :columns="columns"
-      :class="{ 'list__item--selected' : selectedVm && selectedVm.id === vm.id }">
+      :dataSource="vmsList"
-
+      :pagination="false"
-      <div class="list__outer-container">
+      :rowKey="record => record.id || record.account">
-        <div class="list__container" @click="() => handleSelectItem(vm)">
+      <template slot="name" slot-scope="record">
-          <div class="list__row">
+        <div>
-            <div class="list__title">{{ $t('name') }}</div>
+          {{ record.name }}
-            <div>{{ vm.name }}</div>
-          </div>
-          <div class="list__row">
-            <div class="list__title">{{ $t('instancename') }}</div>
-            <div>{{ vm.instancename }}</div>
-          </div>
-          <div class="list__row">
-            <div class="list__title">{{ $t('displayname') }}</div>
-            <div>{{ vm.displayname }}</div>
-          </div>
-          <div class="list__row">
-            <div class="list__title">{{ $t('account') }}</div>
-            <div>{{ vm.account }}</div>
-          </div>
-          <div class="list__row">
-            <div class="list__title">{{ $t('zonenamelabel') }}</div>
-            <div>{{ vm.zonename }}</div>
-          </div>
-          <div class="list__row">
-            <div class="list__title">{{ $t('state') }}</div>
-            <div>{{ vm.state }}</div>
-          </div>
-          <a-radio
-            class="list__radio"
-            :checked="selectedVm && selectedVm.id === vm.id"
-            @change="fetchNics"></a-radio>
         </div>
-
         <a-select
-          v-if="nicsList.length && selectedVm && selectedVm.id === vm.id"
+          v-if="nicsList.length && selectedVm && selectedVm === record.id"
           class="nic-select"
           :defaultValue="selectedNic.ipaddress">
           <a-select-option
@@ -73,20 +56,30 @@
             {{ item.ipaddress }}
           </a-select-option>
         </a-select>
-      </div>
+      </template>
+      <template slot="state" slot-scope="text">
+        <status :text="text ? text : ''" displayText />
+      </template>
+      <template slot="radio" slot-scope="text">
+        <a-radio
+          class="list__radio"
+          :value="text"
+          :checked="selectedVm && selectedVm === text"
+          @change="fetchNics"></a-radio>
+      </template>
+    </a-table>
 
-    </a-list-item>
+    <div class="list__footer">
-
-    <div slot="footer" class="list__footer">
       <a-button @click="handleClose">{{ $t('cancel') }}</a-button>
-      <a-button @click="handleSubmit" type="primary" :disabled="!selectedVm || !selectedNic">{{ $t('ok') }}</a-button>
+      <a-button @click="handleSubmit" type="primary" :disabled="!selectedVm || !selectedNic">{{ $t('Ok') }}</a-button>
     </div>
 
-  </a-list>
+  </div>
 </template>
 
 <script>
 import { api } from '@/api'
+import Status from '@/components/widgets/Status'
 
 export default {
   props: {
@@ -95,6 +88,9 @@ export default {
       required: true
     }
   },
+  components: {
+    Status
+  },
   inject: ['parentFetchData'],
   data () {
     return {
@@ -103,7 +99,42 @@ export default {
       selectedVm: null,
       nicsList: [],
       searchQuery: null,
-      selectedNic: null
+      selectedNic: null,
+      columns: [
+        {
+          title: this.$t('name'),
+          scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: this.$t('instancename'),
+          dataIndex: 'instancename'
+        },
+        {
+          title: this.$t('displayname'),
+          dataIndex: 'displayname'
+        },
+        {
+          title: this.$t('account'),
+          dataIndex: 'account'
+        },
+        {
+          title: this.$t('zonenamelabel'),
+          dataIndex: 'zonename'
+        },
+        {
+          title: this.$t('state'),
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'state' }
+        },
+        {
+          title: 'Select',
+          dataIndex: 'id',
+          scopedSlots: { customRender: 'radio' }
+        }
+      ],
+      tiersSelect: false,
+      networksList: [],
+      selectedTier: 'Please select a tier'
     }
   },
   mounted () {
@@ -112,6 +143,12 @@ export default {
   methods: {
     fetchData () {
       this.loading = true
+      if (this.resource.vpcid) {
+        this.handleTiers()
+        if (this.selectedTier) this.fetchDataTiers(this.selectedTier)
+        return
+      }
+
       api('listVirtualMachines', {
         page: 1,
         pageSize: 500,
@@ -125,17 +162,41 @@ export default {
         this.loading = false
       }).catch(error => {
         this.$notification.error({
-          message: `Error ${error.response.status}`,
+          message: 'Request Failed',
-          description: error.response.data.errorresponse.errortext
+          description: error.response.headers['x-description']
         })
         this.loading = false
       })
     },
-    fetchNics () {
+    fetchDataTiers (e) {
+      this.loading = true
+
+      api('listVirtualMachines', {
+        page: 1,
+        pageSize: 500,
+        listAll: true,
+        networkid: e,
+        account: this.resource.account,
+        domainid: this.resource.domainid,
+        vpcid: this.resource.vpcid,
+        keyword: this.searchQuery
+      }).then(response => {
+        this.vmsList = response.listvirtualmachinesresponse.virtualmachine
+        this.loading = false
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+        this.loading = false
+      })
+    },
+    fetchNics (e) {
+      this.selectedVm = e.target.value
       this.loading = true
       this.nicsList = []
       api('listNics', {
-        virtualmachineid: this.selectedVm.id,
+        virtualmachineid: this.selectedVm,
         networkid: this.resource.associatednetworkid
       }).then(response => {
         this.nicsList = response.listnicsresponse.nic
@@ -151,21 +212,36 @@ export default {
         this.loading = false
       }).catch(error => {
         this.$notification.error({
-          message: `Error ${error.response.status}`,
+          message: 'Request Failed',
-          description: error.response.data.errorresponse.errortext
+          description: error.response.headers['x-description']
         })
         this.loading = false
       })
     },
-    handleSelectItem (vm) {
+    fetchNetworks () {
-      this.selectedVm = vm
+      this.loading = true
-      this.fetchNics()
+
+      api('listNetworks', {
+        vpcid: this.resource.vpcid,
+        domainid: this.resource.domainid,
+        account: this.resource.account,
+        supportedservices: 'StaticNat'
+      }).then(response => {
+        this.networksList = response.listnetworksresponse.network
+        this.loading = false
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+        this.loading = false
+      })
     },
     handleSubmit () {
       this.loading = true
       api('enableStaticNat', {
         ipaddressid: this.resource.id,
-        virtualmachineid: this.selectedVm.id,
+        virtualmachineid: this.selectedVm,
         vmguestip: this.selectedNic.ipaddress
       }).then(() => {
         this.parentFetchData()
@@ -173,8 +249,8 @@ export default {
         this.handleClose()
       }).catch(error => {
         this.$notification.error({
-          message: `Error ${error.response.status}`,
+          message: 'Request Failed',
-          description: error.response.data.errorresponse.errortext
+          description: error.response.headers['x-description']
         })
         this.loading = false
         this.handleClose()
@@ -182,6 +258,13 @@ export default {
     },
     handleClose () {
       this.$parent.$parent.close()
+    },
+    handleTiers () {
+      this.tiersSelect = true
+      this.fetchNetworks()
+    },
+    handleTierSelect (e) {
+      this.fetchDataTiers(e)
     }
   }
 }
@@ -202,8 +285,28 @@ export default {
 
     &__header,
     &__footer {
-      padding-right: 20px;
+      padding: 20px;
-      padding-left: 20px;
+    }
+
+    &__header {
+      display: flex;
+
+      .ant-select {
+        min-width: 200px;
+      }
+
+      &__col {
+
+        &:not(:last-child) {
+          margin-right: 20px;
+        }
+
+        &--full {
+          flex: 1;
+        }
+
+      }
+
     }
 
     &__footer {
@@ -260,11 +363,8 @@ export default {
     }
 
     &__radio {
-
+      display: flex;
-      @media (min-width: 760px) {
+      justify-content: flex-end;
-        margin-left: auto;
-      }
-
     }
 
   }