From 7fb8d77eb8418ec1ca114554d680b1aab698b9b0 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Tue, 20 Aug 2024 17:48:49 +0530
Subject: [PATCH] UI: Improve router listing page (#9551)

---
 ui/src/components/view/ListView.vue    | 11 ++++++++++-
 ui/src/config/section/infra/routers.js |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 341bdffc918..5a779da182b 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -242,7 +242,16 @@
         </a>
       </template>
       <template v-if="column.key === 'guestnetworkname'">
-        <router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
+        <span v-if="['/router'].includes($route.path) && record.vpcid">
+          <router-link :to="{ path: '/vpc/' + record.vpcid }">
+            <deployment-unit-outlined/>
+            {{ record.vpcname || record.vpcid }}
+          </router-link>
+        </span>
+        <router-link v-else :to="{ path: '/guestnetwork/' + record.guestnetworkid }">
+          <apartment-outlined/>
+          {{ text }}
+        </router-link>
       </template>
       <template v-if="column.key === 'associatednetworkname'">
         <router-link :to="{ path: '/guestnetwork/' + record.associatednetworkid }">{{ text }}</router-link>
diff --git a/ui/src/config/section/infra/routers.js b/ui/src/config/section/infra/routers.js
index 9e45cb73246..76b1f4eba45 100644
--- a/ui/src/config/section/infra/routers.js
+++ b/ui/src/config/section/infra/routers.js
@@ -26,7 +26,7 @@ export default {
   permission: ['listRouters'],
   params: { projectid: '-1' },
   columns: () => {
-    var columns = ['name', 'state', 'publicip', 'guestnetworkname', 'vpcname', 'redundantstate', 'softwareversion', 'hostname', 'account', 'zonename', 'requiresupgrade']
+    var columns = ['name', 'state', 'publicip', { field: 'guestnetworkname', customTitle: 'network' }, 'redundantstate', 'softwareversion', 'hostname', 'account', 'zonename', 'requiresupgrade']
     columns.splice(6, 0, { field: 'version', customTitle: 'templateversion' })
     return columns
   },