Merge branch 'master' of ssh://git.infini.ltd:64221/infini/search-center
This commit is contained in:
chenhua
commit
c45f58e49a
|
|
@ -32,7 +32,7 @@ export default [
|
|||
}, {
|
||||
path: '/platform/cluster',
|
||||
name: 'cluster',
|
||||
component: './Dashboard/Monitor',
|
||||
component: './Dashboard/ClusterMonitor',
|
||||
}, {
|
||||
path: '/platform/tasks',
|
||||
name: 'tasks',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
// use permission as a parameter
|
||||
const havePermissionAsync = new Promise(resolve => {
|
||||
// Call resolve on behalf of passed
|
||||
setTimeout(() => resolve(), 300);
|
||||
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);
|
||||
}
|
||||
|
||||
@Secured(havePermissionAsync)
|
||||
@connect(({ monitor, loading }) => ({
|
||||
monitor,
|
||||
loading: loading.models.monitor,
|
||||
}))
|
||||
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();
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue