add cluster monitor chart

web/config/router.config.js

@@ -32,7 +32,7 @@ export default [
             }, {
               path: '/platform/cluster',
               name: 'cluster',
-              component: './Dashboard/Monitor',
+              component: './Dashboard/ClusterMonitor',
             }, {
               path: '/platform/tasks',
               name: 'tasks',

web/src/pages/Dashboard/ClusterMonitor.js

@@ -1,46 +1,337 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent,Fragment } from 'react';
 import { connect } from 'dva';
 import { formatMessage, FormattedMessage } from 'umi/locale';
-import { Row, Col, Card, Tooltip } from 'antd';
+import { Row, Col, Card } from 'antd';
-import numeral from 'numeral';
-import { Pie, WaterWave, Gauge, TagCloud } from '@/components/Charts';
-import NumberInfo from '@/components/NumberInfo';
-import CountDown from '@/components/CountDown';
-import ActiveChart from '@/components/ActiveChart';
-import GridContent from '@/components/PageHeaderWrapper/GridContent';
 
-import Authorized from '@/utils/Authorized';
+import {
-import styles from './Monitor.less';
+  G2,
+  Chart,
+  Geom,
+  Axis,
+  Tooltip,
+  Legend,
+} from 'bizcharts';
 
-const { Secured } = Authorized;
+let generateHeapData = (target)=>{
+  let data = [];
+  setInterval(() => {
+    var now = new Date();
+    var time = now.getTime();
+    var heap1 = ~~(Math.random() * 500) + 200;
+    var heap2 = ~~(Math.random() * 300) + 512;
+    if (data.length >= 120) {
+      data.shift();
+      data.shift();
+    }
 
-const targetTime = new Date().getTime() + 3900000;
+    data.push({
+      time: time,
+      heap_ratio: (heap1 *100) /1024,
+      type: "node1"
+    });
+    data.push({
+      time: time,
+      heap_ratio: (heap2 *100)/1024,
+      type: "node2"
+    });
+    target.setState({
+      data
+    });
+  }, 30000);
+}
 
-// use permission as a parameter
+let generateCpuData = (target)=>{
-const havePermissionAsync = new Promise(resolve => {
+  let data = [];
-  // Call resolve on behalf of passed
+  setInterval(() => {
-  setTimeout(() => resolve(), 300);
+    var now = new Date();
-});
+    var time = now.getTime();
+    var cpu1 = ~~(Math.random()*5) + 0.1;
+    var cpu2 = ~~(Math.random()*3) +0.2;
+    if (data.length >= 120) {
+      data.shift();
+      data.shift();
+    }
 
-@Secured(havePermissionAsync)
+    data.push({
-@connect(({ monitor, loading }) => ({
+      time: time,
-  monitor,
+      cpu_ratio: cpu1,
-  loading: loading.models.monitor,
+      type: "node1"
-}))
+    });
+    data.push({
+      time: time,
+      cpu_ratio: cpu2,
+      type: "node2"
+    });
+    target.setState({
+      data
+    });
+  }, 30000);
+}
+
+let generateSearchLatencyData = (target)=>{
+  let data = [];
+  setInterval(() => {
+    var now = new Date();
+    var time = now.getTime();
+    var latency1 = ~~(Math.random()*100) + 10;
+    var latency2 = ~~(Math.random()*150) +30;
+    if (data.length >= 120) {
+      data.shift();
+      data.shift();
+    }
+
+    data.push({
+      time: time,
+      latency: latency1,
+      type: "node1"
+    });
+    data.push({
+      time: time,
+      latency: latency2,
+      type: "node2"
+    });
+    target.setState({
+      data
+    });
+  }, 30000);
+}
+
+let generateIndexLatencyData = (target)=>{
+  let data = [];
+  setInterval(() => {
+    var now = new Date();
+    var time = now.getTime();
+    var latency1 = ~~(Math.random()*400) + 50;
+    var latency2 = ~~(Math.random()*500) +20;
+    if (data.length >= 120) {
+      data.shift();
+      data.shift();
+    }
+
+    data.push({
+      time: time,
+      latency: latency1,
+      type: "node1"
+    });
+    data.push({
+      time: time,
+      latency: latency2,
+      type: "node2"
+    });
+    target.setState({
+      data
+    });
+  }, 30000);
+}
+
+
+
+  class SliderChart extends React.Component {
+    constructor() {
+      super();
+      this.state = {
+        data:[],
+      };
+    }
+
+    componentDidMount() {
+      let {generateFunc }= this.props;
+      generateFunc(this);
+    }
+    render() {
+    //console.log(data.length)
+    const grid = {
+      align: 'center', 
+      type: 'line' ,
+      lineStyle: {
+        stroke: '#d9d9d9',
+        lineWidth: 1, 
+      }
+    };
+    let {xname, yname, scale, unit} = this.props;
+    const axisLabel = {
+      formatter(text){
+        return `${text}${unit}`;
+      }
+    };
+    const axisTitle = {
+      textStyle:{
+        fill: '#999',
+      },
+    }
+    
+    let  pos = `${xname}*${yname}`;
+      return (
+        <Chart
+          data={this.state.data}
+          scale={scale}
+          height={300}
+          forceFit
+          // onGetG2Instance={g2Chart => {
+          //   chart = g2Chart;
+          // }}
+        >
+           <h3 className='main-title' style={styles.mainTitle}>
+              {this.props.title}
+          </h3>
+          <Tooltip />
+          <Axis grid={grid} name={xname} title={axisTitle}/>
+          <Axis grid={grid} label={axisLabel} name={yname} title={axisTitle}/>
+          <Legend />
+          <Geom
+            type="line"
+            position={pos}
+            color={["type"]} //["#ff7f0e", "#2ca02c"]
+            shape="line"
+            size={2}
+          />
+					<Geom
+					    type="point"
+          position={pos}
+          size={3}
+          shape={'circle'}
+          style={{ stroke: '#fff', lineWidth: 1 }}
+          color="type"
+        />
+        </Chart>
+      );
+    }
+  }
+
+const styles ={
+  mainTitle:{
+    fontSize:20,
+    color:"black",
+    textAlign:"center"
+  },
+  subTitle:{
+    fontSize:16,
+    color:"gray",
+    textAlign:"center"
+  }
+};
+// @connect(({ monitor, loading }) => (
+//   monitor,
+//   loading: loading.models.monitor,
+// }))
 class ClusterMonitor extends PureComponent {
   componentDidMount() {
     const { dispatch } = this.props;
-    dispatch({
-      type: 'monitor/fetchTags',
-    });
   }
 
   render() {
-    const { monitor, loading } = this.props;
-    const { tags } = monitor;
-
     return (
-      <h1>cluster monitor</h1>
+      <div>
+          <Row gutter={24} style={{marginBottom:10}}>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Card>
+                <SliderChart title="节点内存使用占比(%)" xname="time" yname="heap_ratio"
+                  generateFunc={generateHeapData}
+                  unit="%"
+                  scale={{
+                    time: {
+                      alias: "时间",
+                      type: "time",
+                      mask: "HH:mm",
+                      tickCount: 10,
+                      nice: false,
+                    },
+                    heap_ratio: {
+                      alias: "内存使用百分比",
+                      min: 0,
+                  //    max: 100
+                    },
+                    type: {
+                      type: "cat"
+                    }
+                  }
+                }
+                />
+              </Card>        
+            </Col>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Card>
+              <SliderChart title="CPU使用占比(%)" xname="time" yname="cpu_ratio"
+                  generateFunc={generateCpuData}
+                  unit="%"
+                  scale={{
+                    time: {
+                      alias: "时间",
+                      type: "time",
+                      mask: "HH:mm",
+                      tickCount: 10,
+                      nice: false,
+                    },
+                    cpu_ratio: {
+                      alias: "CPU使用百分比",
+                      min: 0,
+                      // max: 1
+                    },
+                    type: {
+                      type: "cat"
+                    }
+                  }
+                }
+                />       
+              </Card>
+            </Col>
+            </Row>
+
+            <Row gutter={24}>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Card>
+                <SliderChart title="搜索延迟(ms)" xname="time" yname="latency"
+                  generateFunc={generateSearchLatencyData}
+                  unit="ms"
+                  scale={{
+                    time: {
+                      alias: "时间",
+                      type: "time",
+                      mask: "HH:mm",
+                      tickCount: 10,
+                      nice: false,
+                    },
+                    heap_ratio: {
+                      alias: "延迟时长",
+                      min: 0,
+                  //    max: 100
+                    },
+                    type: {
+                      type: "cat"
+                    }
+                  }
+                }
+                />
+              </Card>        
+            </Col>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Card>
+              <SliderChart title="索引延迟(ms)" xname="time" yname="latency"
+                  generateFunc={generateIndexLatencyData}
+                  unit="ms"
+                  scale={{
+                    time: {
+                      alias: "时间",
+                      type: "time",
+                      mask: "HH:mm",
+                      tickCount: 10,
+                      nice: false,
+                    },
+                    cpu_ratio: {
+                      alias: "延迟时长",
+                      min: 0,
+                      // max: 1
+                    },
+                    type: {
+                      type: "cat"
+                    }
+                  }
+                }
+                />       
+              </Card>
+            </Col>
+            </Row>
+      </div>
     );
   }
 }