From 7691a81974771f5bea77108bcc39b5b2b0f6e57a Mon Sep 17 00:00:00 2001
From: shiyang <liaosy21@gmail.com>
Date: Mon, 6 Dec 2021 18:01:55 +0800
Subject: [PATCH] add table ExpandedRowRender Descriptions

---
 web/src/pages/System/Cluster/Index.js   | 40 +++++++++++++++++++++----
 web/src/pages/System/Cluster/Index.less |  5 ++++
 2 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 web/src/pages/System/Cluster/Index.less

diff --git a/web/src/pages/System/Cluster/Index.js b/web/src/pages/System/Cluster/Index.js
index d283371f..78314a84 100644
--- a/web/src/pages/System/Cluster/Index.js
+++ b/web/src/pages/System/Cluster/Index.js
@@ -12,11 +12,13 @@ import {
   Icon,
   Popconfirm,
   message,
+  Descriptions,
 } from "antd";
 import Link from "umi/link";
 import { connect } from "dva";
 import { HealthStatusCircle } from "@/components/infini/health_status_circle";
 import PageHeaderWrapper from "@/components/PageHeaderWrapper";
+import indexStyles from "./index.less";
 import styles from "./step.less";
 import clusterBg from "@/assets/cluster_bg.png";
 import { formatMessage } from "umi/locale";
@@ -206,6 +208,37 @@ class Index extends React.Component {
     },
   ];
 
+  componentDidMount() {
+    const { pageSize } = this.props.clusterConfig;
+    this.fetchData({
+      size: pageSize,
+    });
+  }
+
+  formatExpandedRowRender = (item) => {
+    return (
+        <div>
+          <Descriptions
+              size='small'
+          >
+            <Descriptions.Item className={indexStyles.descriptionsItem} label="TLS">
+              {formatMessage({id: item.schema === 'https'
+                  ? "cluster.regist.step.complete.tls.yes"
+                  : "cluster.regist.step.complete.tls.no"})}
+            </Descriptions.Item>
+            <Descriptions.Item className={indexStyles.descriptionsItem} label={formatMessage({id: "cluster.regist.step.connect.label.auth"})}>
+              {(item.basic_auth && typeof item.basic_auth.username !=='undefined' && item.basic_auth.username !== '')
+                  ? formatMessage({id: "cluster.regist.step.complete.tls.yes"})
+                  : formatMessage({id: "cluster.regist.step.complete.tls.no"})}
+            </Descriptions.Item>
+            <Descriptions.Item className={indexStyles.descriptionsItem} label={formatMessage({id: "cluster.manage.table.column.description"})}>
+              {item.description}
+            </Descriptions.Item>
+          </Descriptions>
+        </div>
+    );
+  };
+
   fetchData = (params) => {
     const { dispatch } = this.props;
     dispatch({
@@ -213,12 +246,6 @@ class Index extends React.Component {
       payload: params,
     });
   };
-  componentDidMount() {
-    const { pageSize } = this.props.clusterConfig;
-    this.fetchData({
-      size: pageSize,
-    });
-  }
 
   handleSearchClick = () => {
     const { form } = this.props;
@@ -356,6 +383,7 @@ class Index extends React.Component {
           <Table
             bordered
             columns={this.columns}
+            expandedRowRender={this.formatExpandedRowRender}
             dataSource={data}
             onChange={this.handleTableChange}
             rowKey="id"
diff --git a/web/src/pages/System/Cluster/Index.less b/web/src/pages/System/Cluster/Index.less
new file mode 100644
index 00000000..c8363cfe
--- /dev/null
+++ b/web/src/pages/System/Cluster/Index.less
@@ -0,0 +1,5 @@
+.descriptionsItem {
+  >span:first-child {
+    font-weight: 500;
+  }
+}