diff --git a/web/config/router.config.js b/web/config/router.config.js
index faf8c20d..d51bf07a 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..617167a8 100644
--- a/web/src/pages/Dashboard/ClusterMonitor.js
+++ b/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 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 = [];
+ 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
-const havePermissionAsync = new Promise(resolve => {
- // Call resolve on behalf of passed
- setTimeout(() => resolve(), 300);
-});
+let generateCpuData = (target)=>{
+ let data = [];
+ setInterval(() => {
+ 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)
-@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"
+ });
+ 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 = 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
}