From 96ccd6d3e385253dd03a0936bcfba35327b3885f Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Mon, 26 Apr 2021 14:24:20 +0530
Subject: [PATCH] ui: Show traffic type in physical networks tab (#4952)

---
 .../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 8312b6954cf..85470c42da4 100644
--- a/ui/src/views/infra/zone/PhysicalNetworksTab.vue
+++ b/ui/src/views/infra/zone/PhysicalNetworksTab.vue
@@ -47,6 +47,14 @@
               </div>
               <div>{{ network.vlan }}</div>
             </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') }}
@@ -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
       })
     }