cluster item view

web/src/pages/Cluster/ClusterItem.less

@@ -0,0 +1,7 @@
+
+.clusterItem {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  height: 400px;
+}

web/src/pages/Cluster/ClusterList.js

@@ -4,6 +4,7 @@ import {Link} from 'umi';
 import {extendHex, defineGrid} from 'honeycomb-grid';
 import { SVG } from '@svgdotjs/svg.js'
 import { connect } from 'dva';
+import styles from './ClusterItem.less';
 
 @connect(({ clusterMonitor }) => ({
   clusterMonitor
@@ -64,7 +65,7 @@ class ClusterItem extends Component {
     const draw = SVG().addTo(this.root).size('100%', '100%')
 
     let data = this.props.data;
-    const rect = { width: 5, height: 3 };
+    const rect = { width: 4, height: 20 };
     
     const Hex = extendHex({
       size: 30,
@@ -116,9 +117,10 @@ class ClusterItem extends Component {
   }
   render(){
     return (
-      <div ref={ref=>this.root=ref}></div>
+      <div className={styles.clusterItem} ref={ref=>this.root=ref}></div>
     )
   }
 }
 
+export {ClusterItem};
 export default ClusterList;

web/src/pages/Cluster/Overview.js

@@ -1,9 +1,10 @@
 import React, {Fragment} from 'react';
-import {Card, Divider, Popconfirm, Row, Col, Table, Descriptions} from "antd";
+import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions} from "antd";
 import {Link} from "umi"
 import moment from "moment";
 import styles from "./Overview.less";
 import {connect} from "dva";
+import {ClusterItem} from "./ClusterList";
 
 let HealthCircle = (props)=>{
   return (
@@ -56,45 +57,133 @@ class Overview extends  React.Component {
       ),
     }
   ];
+
+  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'
+    }],
+  };
+
   render() {
-    return (<Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
+
-      <Row gutter={[16,16]}>
+    return (
-        <Col xs={24} sm={12} md={12} lg={8} >
+        <div>
-          <Card title="Summary" size={"small"}>
+          <Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
-            <Descriptions column={1} bordered colon={false} className={styles.overview}>
+            <Row gutter={[16,16]}>
-              <Descriptions.Item label="Health"><HealthCircle color="green"/>Healthy</Descriptions.Item>
+              <Col xs={24} sm={12} md={12} lg={8} >
-              <Descriptions.Item label="Version">7.10.0</Descriptions.Item>
+                <Card title="Summary" size={"small"}>
-              <Descriptions.Item label="Uptime">3 天</Descriptions.Item>
+                  <Descriptions column={1} bordered colon={false} className={styles.overview}>
-              <Descriptions.Item label="License">Basic</Descriptions.Item>
+                    <Descriptions.Item label="Health"><HealthCircle color="green"/>Healthy</Descriptions.Item>
-            </Descriptions>
+                    <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>
+              </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>
+            </Row>
           </Card>
-        </Col>
+
-        <Col xs={24} sm={12} md={12} lg={8}>
+          <Card title={this.clusterItem.name + ": "+ this.clusterItem.nodes.length}
-          <Card title="Nodes:2" size={"small"}>
+                extra={<Link to={"/cluster/monitoring/" + this.clusterItem.name}>查看更多</Link>}
-            <Descriptions column={1} bordered colon={false} size="small" className={styles.overview}>
+          >
-              <Descriptions.Item label="Disk Available">
+            <div className={styles.clusterItemCard}>
-                83.21%
+              {/* {item.nodes.map(node => {
-                <p className={styles.light}>775.1 GB / 931.5 GB</p>
+                    return (<a><Tag style={{marginBottom:5}} color={node.status}>{node.name}</Tag></a>);
-              </Descriptions.Item>
+                  })} */}
-              <Descriptions.Item label="JVM Heap">
+              <ClusterItem data={this.clusterItem} />
-                27.60%
+            </div>
-                <p className={styles.light}>565.3 GB / 2.0 GB</p>
-              </Descriptions.Item>
-            </Descriptions>
           </Card>
-        </Col>
+        </div>
-        <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>
-      </Row>
-    </Card>)
   }
 }
 

web/src/pages/Cluster/Overview.less

@@ -16,4 +16,8 @@
     .light{
         color: #666;
     }
+}
+
+.clusterItemCard {
+    text-align: center;
 }