From a31a27a9060d8ee2ad97e62f2ebad2040c9ba790 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Tue, 20 Aug 2024 12:57:54 +0530
Subject: [PATCH 1/2] UI: Improve router listing page

---
 ui/src/components/view/ListView.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 341bdffc9185..2d0876b48dfb 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -156,6 +156,16 @@
       </template>
       <template v-if="column.key === 'publicip'">
         <router-link v-if="['/autoscalevmgroup'].includes($route.path)" :to="{ path: '/publicip' + '/' + record.publicipid }">{{ text }}</router-link>
+        <span v-else-if="['/router'].includes($route.path)">
+          <div
+          v-for="(eth) in record.nic"
+          :key="eth.id">
+          <copy-label :label="eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress" />&nbsp;
+          <a-tag v-if="eth.isdefault">
+            {{ $t('label.default') }}
+          </a-tag ><br/>
+        </div>
+        </span>
         <router-link v-else :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
       </template>
       <template v-if="column.key === 'traffictype'">
@@ -242,7 +252,12 @@
         </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">
+          <template v-for="(item, idx) in record.nic.filter(x => x.traffictype === 'Guest' && x.type === 'Isolated')" :key="idx">
+            <router-link :to="{ path: '/guestnetwork/' + item.networkid }">{{ item.networkname }}</router-link><br/>
+          </template>
+        </span>
+        <router-link v-else :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
       </template>
       <template v-if="column.key === 'associatednetworkname'">
         <router-link :to="{ path: '/guestnetwork/' + record.associatednetworkid }">{{ text }}</router-link>

From 9123992c2718b33d84b0bc2926d157f06e4c3393 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Tue, 20 Aug 2024 16:11:57 +0530
Subject: [PATCH 2/2] Address comments

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

diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 2d0876b48dfb..5a779da182b6 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -156,16 +156,6 @@
       </template>
       <template v-if="column.key === 'publicip'">
         <router-link v-if="['/autoscalevmgroup'].includes($route.path)" :to="{ path: '/publicip' + '/' + record.publicipid }">{{ text }}</router-link>
-        <span v-else-if="['/router'].includes($route.path)">
-          <div
-          v-for="(eth) in record.nic"
-          :key="eth.id">
-          <copy-label :label="eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress" />&nbsp;
-          <a-tag v-if="eth.isdefault">
-            {{ $t('label.default') }}
-          </a-tag ><br/>
-        </div>
-        </span>
         <router-link v-else :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
       </template>
       <template v-if="column.key === 'traffictype'">
@@ -253,11 +243,15 @@
       </template>
       <template v-if="column.key === 'guestnetworkname'">
         <span v-if="['/router'].includes($route.path) && record.vpcid">
-          <template v-for="(item, idx) in record.nic.filter(x => x.traffictype === 'Guest' && x.type === 'Isolated')" :key="idx">
-            <router-link :to="{ path: '/guestnetwork/' + item.networkid }">{{ item.networkname }}</router-link><br/>
-          </template>
+          <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 }">{{ text }}</router-link>
+        <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 9e45cb73246c..76b1f4eba454 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
   },