diff --git a/web/config/router.config.js b/web/config/router.config.js index e70f7d7c..08f6a880 100644 --- a/web/config/router.config.js +++ b/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', diff --git a/web/src/pages/Dashboard/ClusterMonitor.js b/web/src/pages/Dashboard/ClusterMonitor.js index 2f7a05d5..e98da12e 100644 --- a/web/src/pages/Dashboard/ClusterMonitor.js +++ b/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 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 { Row, Col, Card } from 'antd'; -import Authorized from '@/utils/Authorized'; -import styles from './Monitor.less'; +import { + 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, + heap_ratio: (heap1 *100) /1024, + type: "node1" + }); + 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); +} -// use permission as a parameter -const havePermissionAsync = new Promise(resolve => { - // Call resolve on behalf of passed - setTimeout(() => resolve(), 300); -}); +let generateCpuData = (target)=>{ + let data = []; + let generator = (initTime) => { + 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(); + } -@Secured(havePermissionAsync) -@connect(({ monitor, loading }) => ({ - monitor, - loading: loading.models.monitor, -})) + 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 = g2Chart; + // }} + > +

+ {this.props.title} +

+ + + + + + + + ); + } + } + +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 ( -

cluster monitor

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
); } } diff --git a/web/src/pages/Dashboard/GatewayMonitor.js b/web/src/pages/Dashboard/GatewayMonitor.js index 53da2579..4ddf83ff 100644 --- a/web/src/pages/Dashboard/GatewayMonitor.js +++ b/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 { + + + + +

+ 网关写入QPS +

+ + + + + + + + + + +
+ +

+ Top用户统计 +

+ + + + + +
+ + + ) }