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,8 +57,83 @@ 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:''}>
+
+    return (
+        <div>
+          <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"}>
@@ -94,7 +170,20 @@ class Overview extends  React.Component {
                 </Card>
               </Col>
             </Row>
-    </Card>)
+          </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>
+    )
   }
 }
 

web/src/pages/Cluster/Overview.less

@@ -17,3 +17,7 @@
         color: #666;
     }
 }
+
+.clusterItemCard {
+    text-align: center;
+}