feat: add external network name for route list page

Add the name of the external network for the route list page

Change-Id: I13ce9af100ac8aa9a611a8d626b0819f37cb67aa

src/resources/neutron/router.jsx

@@ -19,6 +19,7 @@ import {
   getSubnetToRouter,
 } from 'resources/neutron/floatingip';
 import { getOptions } from 'utils';
+import { getNameRenderByRouter } from 'utils/table';
 
 export const routerStatus = {
   ACTIVE: t('Active'),
@@ -62,8 +63,26 @@ export const getRouterColumns = (self) => [
     dataIndex: 'externalNetworkId',
     isHideable: true,
     sorter: false,
-    render: (value) =>
-      self.getLinkRender('networkDetail', value, { id: value }),
+    render: (value, record) => {
+      if (!value) {
+        return '-';
+      }
+      const { externalNetworkName: name } = record;
+      const routerColumn = {
+        dataIndex: 'name',
+        routeName: self.getRouteName('networkDetail'),
+        idKey: 'id',
+      };
+      const data = { name, id: value };
+      return getNameRenderByRouter(null, routerColumn)(name, data);
+    },
+    stringify: (value, record) => {
+      if (!value) {
+        return '-';
+      }
+      const { externalNetworkName: name } = record;
+      return `${value}(${name || '-'})`;
+    },
   },
   {
     title: t('External Fixed IP'),

src/stores/neutron/router.js

@@ -23,6 +23,10 @@ export class RouterStore extends Base {
     return client.neutron.routers;
   }
 
+  get networkClient() {
+    return client.neutron.networks;
+  }
+
   get subnetClient() {
     return client.neutron.subnets;
   }
@@ -125,8 +129,31 @@ export class RouterStore extends Base {
     return routerItem;
   }
 
+  async updateExternalNetworkForItems(items) {
+    const externalNetworkIds = [];
+    items.forEach((it) => {
+      if (it.external_gateway_info?.network_id) {
+        externalNetworkIds.push(it.external_gateway_info?.network_id);
+      }
+    });
+    if (externalNetworkIds.length) {
+      const { networks = [] } = await this.networkClient.list({
+        'router:external': 'true',
+      });
+      items.forEach((it) => {
+        if (it.external_gateway_info?.network_id) {
+          const network = networks.find(
+            (n) => n.id === it.external_gateway_info?.network_id
+          );
+          it.external_gateway_info.network_name = network.name;
+        }
+      });
+    }
+  }
+
   async listDidFetch(items, allProjects, filters) {
     const { isFirewall } = filters;
+    await this.updateExternalNetworkForItems(items);
     if (!isFirewall) {
       return items;
     }