From bef7387e1c9774a2bcdd76e85be84048ae4bc653 Mon Sep 17 00:00:00 2001
From: xusongfu <xu.songfu@99cloud.net>
Date: Mon, 15 Aug 2022 15:05:51 +0800
Subject: [PATCH] fix: update some data in zun detail

1. Hide containers card if value is empty
2. Fix addrss showing
3. Fix networks,ports and security groups showing
4. Remove links and labels in detail

Change-Id: I4a04893a370b387d7a3e9ebcc5073f02d508aeaa
---
 .../containers/Capsules/Detail/BaseDetail.jsx | 43 +++++-------
 .../Containers/Detail/BaseDetail.jsx          | 67 ++++++++-----------
 .../containers/Hosts/Detail/BaseDetail.jsx    | 25 -------
 src/utils/content.jsx                         | 11 +++
 4 files changed, 57 insertions(+), 89 deletions(-)
 create mode 100644 src/utils/content.jsx

diff --git a/src/pages/container-service/containers/Capsules/Detail/BaseDetail.jsx b/src/pages/container-service/containers/Capsules/Detail/BaseDetail.jsx
index f43706c7..a497aa5c 100644
--- a/src/pages/container-service/containers/Capsules/Detail/BaseDetail.jsx
+++ b/src/pages/container-service/containers/Capsules/Detail/BaseDetail.jsx
@@ -13,10 +13,16 @@
 import Base from 'containers/BaseDetail';
 import React from 'react';
 import { inject, observer } from 'mobx-react';
+import { Row, Col } from 'antd';
+import { stringifyContent } from 'utils/content';
 
 export class BaseDetail extends Base {
   get leftCards() {
-    const cards = [this.baseInfoCard, this.containersCard];
+    const { containers = [] } = this.detailData;
+    const cards = [this.baseInfoCard];
+    if (containers.length) {
+      cards.push(this.containersCard);
+    }
     return cards;
   }
 
@@ -54,18 +60,20 @@ export class BaseDetail extends Base {
         render: (value) =>
           value.map((it) => {
             return (
-              <div key={it.uuid}>
-                <b>{t('Container Name')}</b> : {it.name}
-                <br />
-                <b>{t('Container ID')}</b>: {it.uuid}
-              </div>
+              <Row key={it.uuid}>
+                <Col style={{ marginRight: 8 }}>{t('ID/Name')}:</Col>
+                <Col>
+                  <p>{it.name}</p>
+                  <p>{it.uuid}</p>
+                </Col>
+              </Row>
             );
           }),
       },
     ];
 
     return {
-      title: t('Containers'),
+      title: t('Containers Info'),
       options,
       labelCol: 0,
       contentCol: 24,
@@ -79,34 +87,17 @@ export class BaseDetail extends Base {
         dataIndex: 'cpu',
       },
       {
-        label: t('Memory'),
+        label: t('Memory (MiB)'),
         dataIndex: 'memory',
       },
       {
         label: t('Restart Policy'),
         dataIndex: 'restart_policy',
       },
-      {
-        label: t('Labels'),
-        dataIndex: 'labels',
-        render: (value) => value || ' - ',
-      },
-      {
-        label: t('Links'),
-        dataIndex: 'links',
-        render: (value) =>
-          value.map((it) => {
-            return (
-              <div key={it.href}>
-                {it.href} : {it.rel}
-              </div>
-            );
-          }),
-      },
       {
         label: t('Addresses'),
         dataIndex: 'addresses',
-        render: (value) => (value.length != null ? value : '-'),
+        render: stringifyContent,
       },
     ];
 
diff --git a/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx b/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx
index 493c7d66..aa3c33ad 100644
--- a/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx
+++ b/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx
@@ -16,6 +16,7 @@ import Base from 'containers/BaseDetail';
 import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { containerStatus } from 'resources/zun/container';
+import { stringifyContent } from 'utils/content';
 import { isEmpty } from 'lodash';
 
 export class BaseDetail extends Base {
@@ -32,17 +33,6 @@ export class BaseDetail extends Base {
     return [this.specCard];
   }
 
-  get stringifyContent() {
-    return (value) =>
-      isEmpty(value) ? (
-        '-'
-      ) : (
-        <div>
-          <pre>{JSON.stringify(value, null, 4)}</pre>
-        </div>
-      );
-  }
-
   get baseInfoCard() {
     const options = [
       {
@@ -61,7 +51,7 @@ export class BaseDetail extends Base {
       {
         label: t('Command'),
         dataIndex: 'command',
-        render: this.stringifyContent,
+        render: stringifyContent,
       },
     ];
 
@@ -84,18 +74,13 @@ export class BaseDetail extends Base {
       {
         label: t('Environment'),
         dataIndex: 'environment',
-        render: this.stringifyContent,
+        render: stringifyContent,
       },
       {
         label: t('Interactive'),
         dataIndex: 'interactive',
         valueRender: 'yesNo',
       },
-      {
-        label: t('Labels'),
-        dataIndex: 'labels',
-        render: this.stringifyContent,
-      },
     ];
 
     return {
@@ -141,7 +126,7 @@ export class BaseDetail extends Base {
       {
         label: t('Restart Policy'),
         dataIndex: 'restart_policy',
-        render: this.stringifyContent,
+        render: stringifyContent,
       },
       {
         label: t('Auto Remove'),
@@ -154,19 +139,21 @@ export class BaseDetail extends Base {
       {
         label: t('Addresses'),
         dataIndex: 'addresses',
-        render: this.stringifyContent,
+        render: 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>;
-            })}
+            {value.length
+              ? value.map((it) => {
+                  const link = this.getLinkRender('networkDetail', it, {
+                    id: it,
+                  });
+                  return <div key={it}>{link}</div>;
+                })
+              : '-'}
           </>
         ),
       },
@@ -175,12 +162,14 @@ export class BaseDetail extends Base {
         dataIndex: 'ports',
         render: (value = []) => (
           <>
-            {value.map((it) => {
-              const link = this.getLinkRender('virtualAdapterDetail', it, {
-                id: it,
-              });
-              return <div key={it}>{link}</div>;
-            })}
+            {value.length
+              ? value.map((it) => {
+                  const link = this.getLinkRender('virtualAdapterDetail', it, {
+                    id: it,
+                  });
+                  return <div key={it}>{link}</div>;
+                })
+              : '-'}
           </>
         ),
       },
@@ -189,12 +178,14 @@ export class BaseDetail extends Base {
         dataIndex: 'security_groups',
         render: (value = []) => (
           <>
-            {value.map((it) => {
-              const link = this.getLinkRender('securityGroupDetail', it, {
-                id: it,
-              });
-              return <div key={it}>{link}</div>;
-            })}
+            {value.length
+              ? value.map((it) => {
+                  const link = this.getLinkRender('securityGroupDetail', it, {
+                    id: it,
+                  });
+                  return <div key={it}>{link}</div>;
+                })
+              : '-'}
           </>
         ),
       },
diff --git a/src/pages/container-service/containers/Hosts/Detail/BaseDetail.jsx b/src/pages/container-service/containers/Hosts/Detail/BaseDetail.jsx
index 8a2ac0bc..bdb7a737 100644
--- a/src/pages/container-service/containers/Hosts/Detail/BaseDetail.jsx
+++ b/src/pages/container-service/containers/Hosts/Detail/BaseDetail.jsx
@@ -21,11 +21,6 @@ export class BaseDetail extends Base {
     return cards;
   }
 
-  get rightCards() {
-    const cards = [this.miscellaneousCard];
-    return cards;
-  }
-
   get containersInfoCard() {
     const options = [
       {
@@ -65,26 +60,6 @@ export class BaseDetail extends Base {
       options,
     };
   }
-
-  get miscellaneousCard() {
-    const options = [
-      {
-        label: t('Labels'),
-        dataIndex: 'labels',
-        render: (value = {}) => JSON.stringify(value),
-      },
-      {
-        label: t('Links'),
-        dataIndex: 'links',
-        render: (value = []) => JSON.stringify(value),
-      },
-    ];
-
-    return {
-      title: t('Miscellaneous'),
-      options,
-    };
-  }
 }
 
 export default inject('rootStore')(observer(BaseDetail));
diff --git a/src/utils/content.jsx b/src/utils/content.jsx
new file mode 100644
index 00000000..044aa157
--- /dev/null
+++ b/src/utils/content.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+export const stringifyContent = (value) =>
+  isEmpty(value) ? (
+    '-'
+  ) : (
+    <div>
+      <pre>{JSON.stringify(value, null, 4)}</pre>
+    </div>
+  );