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

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}>
+              <Row key={it.uuid}>
-                <b>{t('Container Name')}</b> : {it.name}
+                <Col style={{ marginRight: 8 }}>{t('ID/Name')}:</Col>
-                <br />
+                <Col>
-                <b>{t('Container ID')}</b>: {it.uuid}
+                  <p>{it.name}</p>
-              </div>
+                  <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,
       },
     ];
 

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) => {
+            {value.length
-              const link = this.getLinkRender('networkDetail', it, {
+              ? value.map((it) => {
-                id: it,
+                  const link = this.getLinkRender('networkDetail', it, {
-              });
+                    id: it,
-              return <div key={it}>{link}</div>;
+                  });
-            })}
+                  return <div key={it}>{link}</div>;
+                })
+              : '-'}
           </>
         ),
       },
@@ -175,12 +162,14 @@ export class BaseDetail extends Base {
         dataIndex: 'ports',
         render: (value = []) => (
           <>
-            {value.map((it) => {
+            {value.length
-              const link = this.getLinkRender('virtualAdapterDetail', it, {
+              ? value.map((it) => {
-                id: it,
+                  const link = this.getLinkRender('virtualAdapterDetail', it, {
-              });
+                    id: it,
-              return <div key={it}>{link}</div>;
+                  });
-            })}
+                  return <div key={it}>{link}</div>;
+                })
+              : '-'}
           </>
         ),
       },
@@ -189,12 +178,14 @@ export class BaseDetail extends Base {
         dataIndex: 'security_groups',
         render: (value = []) => (
           <>
-            {value.map((it) => {
+            {value.length
-              const link = this.getLinkRender('securityGroupDetail', it, {
+              ? value.map((it) => {
-                id: it,
+                  const link = this.getLinkRender('securityGroupDetail', it, {
-              });
+                    id: it,
-              return <div key={it}>{link}</div>;
+                  });
-            })}
+                  return <div key={it}>{link}</div>;
+                })
+              : '-'}
           </>
         ),
       },

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));

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>
+  );