feat: Add additional_info for helm type cluster (#544)

fix #540

src/locales/zh/translation.json

@@ -369,6 +369,7 @@
   "Deployment Pods": "部署",
   "StatefulSet Pods": "有状态副本集",
   "DaemonSet Pods": "守护进程集",
+  "Additional Info": "附加信息",
   "Rollback cluster": "回滚集群",
   "Update_env cluster": "修改集群环境",
   "Update cluster env": "修改集群环境",

src/pages/Dashboard/Clusters/Detail/Helm/index.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';
 import { observer, inject } from 'mobx-react';
+import _ from 'lodash';
 
 import { Button, Icon, Table } from 'components/Base';
 import { Card } from 'components/Layout';
 import Status from 'components/Status';
 import DetailTabs from 'components/DetailTabs';
 import Toolbar from 'components/Toolbar';
+import NoData from 'components/base/Table/noData';
 
 import columns from './columns';
 import { getFilterOptions } from '../utils';
@@ -39,19 +41,23 @@ export default class HelmCluster extends React.Component {
 
     return (
       <DetailTabs
-        tabs={['Deployment Pods', 'StatefulSet Pods', 'DaemonSet Pods']}
+        tabs={['Deployment Pods', 'StatefulSet Pods', 'DaemonSet Pods', 'Additional Info']}
         changeTab={onChangeK8sTag}
       />
     );
   }
 
   renderToolbar() {
     const { clusterDetailStore, t } = this.props;
-    const { searchNode, onSearchNode, onClearNode, onRefreshNode } = clusterDetailStore;
+    const { nodeType, searchNode, onSearchNode, onClearNode, onRefreshNode } = clusterDetailStore;
+
+    if (nodeType === 'Additional') {
+      return null;
+    }
 
     return (
       <Toolbar
-        placeholder={t('Search Node')}
+        placeholder={t('Search Pods')}
         searchWord={searchNode}
         onSearch={onSearchNode}
         onClear={onClearNode}
@@ -65,6 +71,7 @@ export default class HelmCluster extends React.Component {
     const clusterNodes = clusterDetailStore.helmClusterNodes.toJSON();
 
     const {
+      nodeType,
       onChangeNodeStatus,
       selectNodeStatus,
       extendedRowKeys,
@@ -89,6 +96,10 @@ export default class HelmCluster extends React.Component {
       }
     };
 
+    if (nodeType === 'Additional') {
+      return this.renderAdditionInfo();
+    }
+
     props.rowKey = '';
     props.expandedRowRender = record =>
       record.nodes.map(({ name, status, host_id, host_ip, private_ip }) => (
@@ -122,6 +133,40 @@ export default class HelmCluster extends React.Component {
     return <Table {...props} />;
   }
 
+  renderAdditionInfo() {
+    const { clusterDetailStore, t } = this.props;
+    const additionalInfo = _.get(clusterDetailStore, 'cluster.additional_info');
+    if (!additionalInfo) return <NoData type="Clusters" />;
+
+    const info = JSON.parse(additionalInfo);
+
+    const renderTable = key => {
+      if (_.get(info, `${key}.length`) === 0) {
+        return null;
+      }
+      const columns = _.keys(_.first(info[key])).map(tableKey => ({
+        title: t(tableKey),
+        key: tableKey,
+        render: item => <div>{item[tableKey]}</div>
+      }));
+      const props = {
+        columns,
+        dataSource: info[key],
+        pagination: {
+          total: 0
+        }
+      };
+      return (
+        <div key={key}>
+          <h3 className={styles.additionalTitle}>{key}</h3>
+          <Table className={styles.additionalTable} {...props} />
+        </div>
+      );
+    };
+
+    return _.keys(info).map(key => renderTable(key));
+  }
+
   renderModals() {
     //
   }

src/pages/Dashboard/Clusters/Detail/index.scss

@@ -224,3 +224,10 @@
     }
   }
 }
+
+.additionalTitle {
+  margin-bottom: 10px;
+}
+.additionalTable {
+  margin-bottom: 50px;
+}