Merge branch 'master' of ssh://git.infini.ltd:64221/infini/search-center

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,370 @@
-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 = [];
+  let generator = (initTime) => {
+    var now = new Date();
+    var time = initTime||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,
-// use permission as a parameter
+      heap_ratio: (heap1 *100) /1024,
-const havePermissionAsync = new Promise(resolve => {
+      type: "node1"
-  // Call resolve on behalf of passed
-  setTimeout(() => resolve(), 300);
     });
+    data.push({
+      time: time,
+      heap_ratio: (heap2 *100)/1024,
+      type: "node2"
+    });
+    !initTime && target.setState({
+      data
+    });
+  };
+    let stime = new Date();
+    for(let i=120;i>0;i--){
+      generator(new Date(stime.valueOf()- i * 1000 * 30));
+    }
+    target.setState({
+      data
+    });
+  setInterval(()=>{generator(null)}, 30000);
+}
 
-@Secured(havePermissionAsync)
+let generateCpuData = (target)=>{
-@connect(({ monitor, loading }) => ({
+  let data = [];
-  monitor,
+  let generator = (initTime) => {
-  loading: loading.models.monitor,
+    var now = new Date();
-}))
+    var time = initTime || now.getTime();
+    var cpu1 = ~~(Math.random()*5) + 0.1;
+    var cpu2 = ~~(Math.random()*3) +0.2;
+    if (data.length >= 120) {
+      data.shift();
+      data.shift();
+    }
+
+    data.push({
+      time: time,
+      cpu_ratio: cpu1,
+      type: "node1"
+    });
+    data.push({
+      time: time,
+      cpu_ratio: cpu2,
+      type: "node2"
+    });
+    !initTime && target.setState({
+      data
+    });
+  };
+    let stime = new Date();
+    for(let i=120;i>0;i--){
+      generator(new Date(stime.valueOf()- i * 1000 * 30));
+    }
+    target.setState({
+      data
+    });
+  setInterval(()=>{generator(null)}, 30000);
+}
+
+let generateSearchLatencyData = (target)=>{
+  let data = [];
+  let generator = (initTime) => {
+    var now = new Date();
+    var time = initTime || 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"
+    });
+    !initTime && target.setState({
+      data
+    });
+  };
+  let stime = new Date();
+  for(let i=120;i>0;i--){
+    generator(new Date(stime.valueOf()- i * 1000 * 30));
+  }
+  target.setState({
+    data
+  });
+  setInterval(()=>{generator(null)}, 30000);
+}
+
+let generateIndexLatencyData = (target)=>{
+  let data = [];
+  let generator = (initTime) => {
+    var now = new Date();
+    var time = initTime || 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"
+    });
+    !initTime && target.setState({
+      data
+    });
+  };
+
+  let stime = new Date();
+  for(let i=120;i>0;i--){
+    generator(new Date(stime.valueOf()- i * 1000 * 30));
+  }
+  target.setState({
+    data
+  });
+  setInterval(()=>{generator(null)}, 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>
     );
   }
 }

web/src/pages/Dashboard/GatewayMonitor.js

@@ -53,6 +53,27 @@ class GatewayMonitor extends PureComponent {
     // 数据源
     const chartDataIndex = [];
     const chartDataQuery = [];
+    const chartDataGateway = [];
+    const chartDataTop = [{
+      user:"liugq",
+      count: 202989,
+    },{
+      user:"liaosy",
+      count: 342989,
+    },{
+      user:"medcl",
+      count: 285989,
+    },{
+      user:"blogsit",
+      count: 291989,
+    },{
+      user:"lucas",
+      count: 272489,
+    },{
+      user:"liming",
+      count: 312589,
+    }];
+
     for (let i = 0; i < 24; i += 1) {
       chartDataIndex.push({
         x_time: this.formatDate(new Date().getTime() + (1000 * 60 * 60 * (i-24))),
@@ -62,6 +83,10 @@ class GatewayMonitor extends PureComponent {
         x_time: this.formatDate(new Date().getTime() + (1000 * 60 * 60 * (i-24))),
         y_value: Math.floor(Math.random() * 100) * 500,
       });
+      chartDataGateway.push({
+        x_time: this.formatDate(new Date().getTime() + (1000 * 60 * 60 * (i-24))),
+        y_value: Math.floor(Math.random() * 100) * 3000,
+      });
     }
 
 // 定义度量
@@ -149,6 +174,62 @@ class GatewayMonitor extends PureComponent {
               </Card>
             </Col>
           </Row>
+          <Row gutter={24}>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Card
+                  loading={false}
+                  className={styles.offlineCard}
+                  bordered={false}
+                  bodyStyle={{ padding: '30px 0 10px' }}
+                  style={{ marginTop: 32 }}
+              >
+                <Chart height={400} data={chartDataGateway} scale={cols} forceFit>
+                  <h3 className='main-title' style={styles.mainTitle}>
+                    网关写入QPS
+                  </h3>
+                  <Axis name="year" title/>
+                  <Axis name="value" title/>
+                  <Tooltip
+                      crosshairs={{
+                        type: "y"
+                      }}
+                  />
+                  <Geom type="line" position="x_time*y_value" size={2} />
+                  <Geom
+                      type="point"
+                      position="x_time*y_value"
+                      size={4}
+                      shape={"circle"}
+                      style={{
+                        stroke: "#fff",
+                        lineWidth: 1
+                      }}
+                  />
+                </Chart>
+              </Card>
+            </Col>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Card
+                  loading={false}
+                  className={styles.offlineCard}
+                  bordered={false}
+                  bodyStyle={{ padding: '30px 0 10px' }}
+                  style={{ marginTop: 32 }}
+              >
+                <div style={{ padding: '0 24px' }}>
+                <Chart height={400} data={chartDataTop} scale={cols} forceFit>
+                <h3 className='main-title' style={styles.mainTitle}>
+                    Top用户统计
+                  </h3>
+                  <Axis name="user" />
+                  <Axis name="count" />
+                  <Tooltip/>
+                  <Geom type="interval" position="user*count" />
+                </Chart>
+                </div>
+              </Card>
+            </Col>
+          </Row>
         </GridContent>
     )
   }