From 23b238ef75adc3237ec87a843641d5fb4899c956 Mon Sep 17 00:00:00 2001
From: medcl <m@medcl.net>
Date: Mon, 7 Jun 2021 10:33:48 +0800
Subject: [PATCH] update cluster overview page

---
 web/src/pages/Cluster/Overview.js   | 255 ++++++++--------------------
 web/src/pages/Cluster/Overview.less |   6 +-
 2 files changed, 80 insertions(+), 181 deletions(-)

diff --git a/web/src/pages/Cluster/Overview.js b/web/src/pages/Cluster/Overview.js
index 97560b07..befd99da 100644
--- a/web/src/pages/Cluster/Overview.js
+++ b/web/src/pages/Cluster/Overview.js
@@ -5,200 +5,95 @@ import moment from "moment";
 import styles from "./Overview.less";
 import {connect} from "dva";
 import {ClusterItem} from "./ClusterList";
-
-let HealthCircle = (props)=>{
-  return (
-    <div style={{
-      background: props.color,
-      width: 12,
-      height: 12,
-      borderRadius: 12,
-      display: "inline-block",
-      marginRight: 3,
-    }}></div>
-  )
-}
+import CalendarHeatmap from 'react-calendar-heatmap';
+import 'react-calendar-heatmap/dist/styles.css';
+import { Avatar } from 'antd';
+import { Tabs } from 'antd';
+const { TabPane } = Tabs;
+import ClusterLoadMore from "../../components/List/LoadMoreList"
+const data = [
+    {
+        title: 'Ant Design Title 1',
+    },
+    {
+        title: 'Ant Design Title 2',
+    },
+    {
+        title: 'Ant Design Title 3',
+    },
+    {
+        title: 'Ant Design Title 4',
+    },
+];
 
 @connect(({global}) => ({
   selectedCluster: global.selectedCluster
 }))
 
+
 class Overview extends  React.Component {
 
-  state = {
-    data: [{id:"JFpIbacZQamv9hkgQEDZ2Q", name:"single-es", endpoint:"http://localhost:9200", health: "green", version: "7.10.0", uptime:"320883955"}]
-  }
-
-  clusterColumns = [
-    {
-      title: '名称',
-      dataIndex: 'name',
-      render: (text, record) => (
-        <div>
-          <Link to='/cluster/monitoring'>{text}</Link>
-        </div>
-      ),
-    },
-    {
-      title: '集群访问 URL',
-      dataIndex: 'endpoint'
-    },
-    {
-      title: '健康状态',
-      dataIndex: 'health'
-    },
-    {
-      title: '版本',
-      dataIndex: 'version'
-    },
-    {
-      title: '运行时长',
-      dataIndex: 'uptime',
-      render: (text, record) => (
-        moment.duration(text).humanize()
-      ),
-    }
-  ];
-
-  clusterItem = {
-    name: 'cluster-test-name4',
-    nodes: [{
-      name: 'node-32',
-      status: 'green'
-    },{
-      name: 'node-33',
-      status: 'green'
-    },{
-      name: 'node-34',
-      status: 'green'
-    },{
-      name: 'node-35',
-      status: 'green'
-    },{
-      name: 'node-36',
-      status: 'green'
-    },{
-      name: 'node-37',
-      status: 'yellow'
-    },{
-      name: 'node-33',
-      status: 'green'
-    },{
-      name: 'node-34',
-      status: 'green'
-    },{
-      name: 'node-35',
-      status: 'green'
-    },{
-      name: 'node-36',
-      status: 'green'
-    },{
-      name: 'node-37',
-      status: 'yellow'
-    },{
-      name: 'node-33',
-      status: 'green'
-    },{
-      name: 'node-34',
-      status: 'green'
-    },{
-      name: 'node-35',
-      status: 'green'
-    },{
-      name: 'node-36',
-      status: 'green'
-    },{
-      name: 'node-37',
-      status: 'yellow'
-    },{
-      name: 'node-33',
-      status: 'green'
-    },{
-      name: 'node-34',
-      status: 'green'
-    },{
-      name: 'node-35',
-      status: 'green'
-    },{
-      name: 'node-36',
-      status: 'green'
-    },{
-      name: 'node-37',
-      status: 'yellow'
-    },{
-      name: 'node-38',
-      status: 'green'
-    }],
-  };
-
-  handleChangeClusterById = () =>{
-    const {dispatch} = this.props;
-    dispatch({
-      type: 'global/changeClusterById',
-      payload: {
-        id: "c0oc4kkgq9s8qss2uk51"
-      }
-    })
-  }
-
   render() {
-
-    // useEffect(() => {
-    //   console.log('Listening: ', name);
-    // }, [name]);
-
     return (
         <div>
-          <Button type="primary" onClick={this.handleChangeClusterById}>change cluster</Button>
-          <Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
-            <Row gutter={[16,16]}>
-              <Col xs={24} sm={12} md={12} lg={8} >
-                <Card title="Summary" size={"small"}>
-                  <Descriptions column={1} bordered colon={false} className={styles.overview}>
-                    <Descriptions.Item label="Health"><HealthCircle color="green"/>Healthy</Descriptions.Item>
-                    <Descriptions.Item label="Version">7.10.0</Descriptions.Item>
-                    <Descriptions.Item label="Uptime">3 天</Descriptions.Item>
-                    <Descriptions.Item label="License">Basic</Descriptions.Item>
-                  </Descriptions>
-                </Card>
+            <Row gutter={24}>
+              <Col lg={17} md={24}>
+                  <Card className={styles.card}  title={'Overall Platform Status'}>
+                    <CalendarHeatmap
+                        showMonthLabels={false}
+                        showWeekdayLabels={false}
+                        showOutOfRangeDays={true}
+                        startDate={new Date('2016-01-01')}
+                        endDate={new Date('2016-12-31')}
+                        monthLabels={['01','02','03','04','05','06',
+                          '07','08','09','10','11','12']}
+                        weekdayLabels={['周日','周一','周二','周三','周四'
+                          ,'周五','周六']}
+                        values={[
+                          { date: '2016-01-01', count: 12 },
+                          { date: '2016-01-22', count: 122 },
+                          { date: '2016-01-30', count: 38 },
+                        ]}
+                        // tooltipDataAttrs={
+                        //   (value) => (value.count > 0 ? 'blue' : 'white')
+                        // }
+                        // onClick={value => alert(`Clicked on value with count: ${value.count}`)}
+                    />
+                  </Card>
+
+                  <Card className={styles.card}  title={'Open Issues'}>
+                      <List
+                          itemLayout="horizontal"
+                          dataSource={data}
+                          renderItem={item => (
+                              <List.Item>
+                                  <List.Item.Meta
+                                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+                                      title={<a href="https://ant.design">{item.title}</a>}
+                                      description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+                                  />
+                              </List.Item>
+                          )}
+                      />
+                  </Card>
               </Col>
-              <Col xs={24} sm={12} md={12} lg={8}>
-                <Card title="Nodes:2" size={"small"}>
-                  <Descriptions column={1} bordered colon={false} size="small" className={styles.overview}>
-                    <Descriptions.Item label="Disk Available">
-                      83.21%
-                      <p className={styles.light}>775.1 GB / 931.5 GB</p>
-                    </Descriptions.Item>
-                    <Descriptions.Item label="JVM Heap">
-                      27.60%
-                      <p className={styles.light}>565.3 GB / 2.0 GB</p>
-                    </Descriptions.Item>
-                  </Descriptions>
-                </Card>
-              </Col>
-              <Col xs={24} sm={12} md={12} lg={8}>
-                <Card title="Indices:27" size={"small"}>
-                  <Descriptions column={1} bordered colon={false} className={styles.overview}>
-                    <Descriptions.Item label="Documents">20,812,087</Descriptions.Item>
-                    <Descriptions.Item label="Disk Usage">1.1 GB</Descriptions.Item>
-                    <Descriptions.Item label="Primary Shards">28</Descriptions.Item>
-                    <Descriptions.Item label="Replica Shards">26</Descriptions.Item>
-                  </Descriptions>
-                </Card>
+              <Col lg={7} md={24}>
+                  <Card>
+                      <Tabs defaultActiveKey="1" >
+                          <TabPane tab="Elasticsearch" key="1" >
+                            <ClusterLoadMore />
+
+                          </TabPane>
+                          <TabPane tab="业务部门" key="2">
+                              Content of Tab Pane 2
+                          </TabPane>
+                      </Tabs>
+                  </Card>
               </Col>
             </Row>
-          </Card>
 
-          <Card title={this.clusterItem.name + ": "+ this.clusterItem.nodes.length}
-                extra={<Link to={"/cluster/monitoring/" + this.clusterItem.name}>查看更多</Link>}
-          >
-            <div className={styles.clusterItemCard}>
-              {/* {item.nodes.map(node => {
-                    return (<a><Tag style={{marginBottom:5}} color={node.status}>{node.name}</Tag></a>);
-                  })} */}
-              <ClusterItem data={this.clusterItem} />
-            </div>
-          </Card>
+
+
         </div>
     )
   }
diff --git a/web/src/pages/Cluster/Overview.less b/web/src/pages/Cluster/Overview.less
index a85530ce..093d1072 100644
--- a/web/src/pages/Cluster/Overview.less
+++ b/web/src/pages/Cluster/Overview.less
@@ -20,4 +20,8 @@
 
 .clusterItemCard {
     text-align: center;
-}
\ No newline at end of file
+}
+
+.card {
+    margin-bottom: 24px;
+}