[cloudstack] branch 4.15 updated: ui: Show traffic type in physical networks tab (#4952)

[rohit]

This is an automated email from the ASF dual-hosted git repository.

rohit pushed a commit to branch 4.15
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/4.15 by this push:
     new 96ccd6d  ui: Show traffic type in physical networks tab (#4952)
96ccd6d is described below

commit 96ccd6d3e385253dd03a0936bcfba35327b3885f
Author: davidjumani <dj.davidjumani1...@gmail.com>
AuthorDate: Mon Apr 26 14:24:20 2021 +0530

    ui: Show traffic type in physical networks tab (#4952)
---
 ui/src/views/infra/zone/PhysicalNetworksTab.vue | 26 ++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/ui/src/views/infra/zone/PhysicalNetworksTab.vue 
b/ui/src/views/infra/zone/PhysicalNetworksTab.vue
index 8312b69..85470c4 100644
--- a/ui/src/views/infra/zone/PhysicalNetworksTab.vue
+++ b/ui/src/views/infra/zone/PhysicalNetworksTab.vue
@@ -49,6 +49,14 @@
             </div>
             <div class="list__col">
               <div class="list__label">
+                {{ $t('label.traffictype') }}
+              </div>
+              <div>
+                {{ network.traffictype }}
+              </div>
+            </div>
+            <div class="list__col">
+              <div class="list__label">
                 {{ $t('label.broadcastdomainrange') }}
               </div>
               <div>{{ network.broadcastdomainrange }}</div>
@@ -101,9 +109,25 @@ export default {
       this.fetchLoading = true
       api('listPhysicalNetworks', { zoneid: this.resource.id }).then(json => {
         this.networks = json.listphysicalnetworksresponse.physicalnetwork || []
+        this.fetchTrafficLabels()
       }).catch(error => {
         this.$notifyError(error)
-      }).finally(() => {
+      })
+    },
+    fetchTrafficLabels () {
+      const promises = []
+      for (const network of this.networks) {
+        promises.push(new Promise((resolve, reject) => {
+          api('listTrafficTypes', { physicalnetworkid: network.id }).then(json 
=> {
+            network.traffictype = 
json.listtraffictypesresponse.traffictype.filter(e => { return e.traffictype 
}).map(e => { return e.traffictype }).join(', ')
+            resolve()
+          }).catch(error => {
+            this.$notifyError(error)
+            reject(error)
+          })
+        }))
+      }
+      Promise.all(promises).finally(() => {
         this.fetchLoading = false
       })
     }