ui: FIX error in "Port forward" and "Load Balancing" (#4746)

* fix error show in fetching port forwarding tab

* clear all list vm when tier empty

Author: Hoang Nguyen

ui/src/core/lazy_lib/components_use.js

@@ -65,7 +65,8 @@ import {
   Tree,
   Calendar,
   Slider,
-  AutoComplete
+  AutoComplete,
+  Collapse
 } from 'ant-design-vue'
 
 Vue.use(ConfigProvider)
@@ -114,6 +115,7 @@ Vue.use(Tree)
 Vue.use(Calendar)
 Vue.use(Slider)
 Vue.use(AutoComplete)
+Vue.use(Collapse)
 
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message

ui/src/views/network/LoadBalancing.vue

@@ -1023,6 +1023,10 @@ export default {
       this.vms = []
       this.addVmModalLoading = true
       const networkId = ('vpcid' in this.resource && !('associatednetworkid' in this.resource)) ? this.selectedTier : this.resource.associatednetworkid
+      if (!networkId) {
+        this.addVmModalLoading = false
+        return
+      }
       api('listVirtualMachines', {
         listAll: true,
         keyword: this.searchQuery,

ui/src/views/network/PortForwarding.vue

@@ -391,6 +391,7 @@ export default {
       if ('vpcid' in this.resource && 'associatednetworkid' in this.resource) {
         return
       }
+      this.selectedTier = null
       this.tiers.loading = true
       api('listNetworks', {
         account: this.resource.account,
@@ -399,7 +400,9 @@ export default {
         vpcid: this.resource.vpcid
       }).then(json => {
         this.tiers.data = json.listnetworksresponse.network || []
-        this.selectedTier = this.tiers.data && this.tiers.data[0].id ? this.tiers.data[0].id : null
+        if (this.tiers.data && this.tiers.data.length > 0) {
+          this.selectedTier = this.tiers.data[0].id
+        }
         this.$forceUpdate()
       }).catch(error => {
         this.$notifyError(error)
@@ -615,6 +618,10 @@ export default {
       this.vms = []
       this.addVmModalLoading = true
       const networkId = ('vpcid' in this.resource && !('associatednetworkid' in this.resource)) ? this.selectedTier : this.resource.associatednetworkid
+      if (!networkId) {
+        this.addVmModalLoading = false
+        return
+      }
       api('listVirtualMachines', {
         listAll: true,
         keyword: this.searchQuery,

ui/src/views/network/VpcTiersTab.vue

@@ -390,6 +390,9 @@ export default {
     },
     fetchData () {
       this.networks = this.resource.network
+      if (!this.networks || this.networks.length === 0) {
+        return
+      }
       for (const network of this.networks) {
         this.fetchLoadBalancers(network.id)
         this.fetchVMs(network.id)