fix: fix the networks,ports and security groups

1. fix the ports and security groups to link
2. show the networks of the zun container

Change-Id: Idc89319379b68822c67c9c036bc3b7cb8cbef15a

src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx

@@ -156,15 +156,47 @@ export class BaseDetail extends Base {
         dataIndex: 'addresses',
         render: this.stringifyContent,
       },
+      {
+        label: t('Networks'),
+        dataIndex: 'networks',
+        render: (value = []) => (
+          <>
+            {value.map((it) => {
+              const link = this.getLinkRender('networkDetail', it, {
+                id: it,
+              });
+              return <div key={it}>{link}</div>;
+            })}
+          </>
+        ),
+      },
       {
         label: t('Ports'),
         dataIndex: 'ports',
-        render: this.stringifyContent,
+        render: (value = []) => (
+          <>
+            {value.map((it) => {
+              const link = this.getLinkRender('virtualAdapterDetail', it, {
+                id: it,
+              });
+              return <div key={it}>{link}</div>;
+            })}
+          </>
+        ),
       },
       {
         label: t('Security Groups'),
         dataIndex: 'security_groups',
-        render: this.stringifyContent,
+        render: (value = []) => (
+          <>
+            {value.map((it) => {
+              const link = this.getLinkRender('securityGroupDetail', it, {
+                id: it,
+              });
+              return <div key={it}>{link}</div>;
+            })}
+          </>
+        ),
       },
     ];
 

src/stores/zun/containers.js

@@ -15,6 +15,7 @@
 import Base from 'stores/base';
 import client from 'client';
 import { action } from 'mobx';
+import { isEmpty } from 'lodash';
 
 export class ContainersStore extends Base {
   get client() {
@@ -77,12 +78,22 @@ export class ContainersStore extends Base {
   }
 
   async detailDidFetch(item) {
-    const { uuid, status } = item;
+    const { uuid, status, addresses = {} } = item;
     let stats = {};
     if (status === 'Running') {
       stats = (await this.client.stats.list(uuid)) || {};
     }
-    return { ...item, stats };
+    const networks = Object.keys(addresses);
+    let { ports = [] } = item;
+    if (isEmpty(ports)) {
+      ports = Object.values(addresses)
+        .reduce((ret, cur) => {
+          ret = ret.concat(cur);
+          return ret;
+        }, [])
+        .map((it) => it.port);
+    }
+    return { ...item, stats, networks, ports };
   }
 
   async fetchLogs(id) {