This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 6.0.0/dev
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit 8ad74f88c91b3b1ea5aed81ebff4a41769db513a
Author: Gao Hongtao <hanahm...@gmail.com>
AuthorDate: Thu Oct 11 21:49:07 2018 +0800
Remove alarm tread chart from Dashboard
---
src/models/dashboard.js | 6 ----
src/routes/Dashboard/Dashboard.js | 66 ++++++++++-----------------------------
2 files changed, 17 insertions(+), 55 deletions(-)
diff --git a/src/models/dashboard.js b/src/models/dashboard.js
index b3f8b75..6c0d60a 100644
--- a/src/models/dashboard.js
+++ b/src/models/dashboard.js
@@ -28,9 +28,6 @@ export default base({
numOfCache: 0,
numOfMQ: 0,
},
- getAlarmTrend: {
- numOfAlarm: [],
- },
getThermodynamic: {
nodes: [],
responseTimeStep: 0,
@@ -62,9 +59,6 @@ export default base({
numOfCache
numOfMQ
}
- getAlarmTrend(duration: $duration) {
- numOfAlarm
- }
getThermodynamic(duration: $duration, metric: {
name: "all_heatmap"
}) {
diff --git a/src/routes/Dashboard/Dashboard.js
b/src/routes/Dashboard/Dashboard.js
index 3c24d76..8f61465 100644
--- a/src/routes/Dashboard/Dashboard.js
+++ b/src/routes/Dashboard/Dashboard.js
@@ -20,10 +20,10 @@ import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Tooltip, Icon } from 'antd';
import {
- ChartCard, MiniArea, Field, HeatMap, Line,
+ ChartCard, HeatMap, Line,
} from '../../components/Charts';
-import { axis, generateDuration, axisMY } from '../../utils/time';
-import { avgTimeSeries, redirect } from '../../utils/utils';
+import { generateDuration, axisMY } from '../../utils/time';
+import { redirect } from '../../utils/utils';
import { Panel } from '../../components/Page';
import RankList from '../../components/RankList';
@@ -34,36 +34,26 @@ import RankList from '../../components/RankList';
}))
export default class Dashboard extends PureComponent {
handleDurationChange = (variables) => {
- this.props.dispatch({
+ const { dispatch } = this.props;
+ dispatch({
type: 'dashboard/fetchData',
payload: { variables },
});
}
renderAction = (prompt, path) => {
+ const { history } = this.props;
return (
<Tooltip title={prompt}>
- <Icon type="info-circle-o" onClick={() => redirect(this.props.history,
path)} />
+ <Icon type="info-circle-o" onClick={() => redirect(history, path)} />
</Tooltip>
);
}
render() {
- const { data } = this.props.dashboard;
- const { numOfAlarm } = data.getAlarmTrend;
- const accuracy = 100;
- let visitData = [];
- let avg = 0;
- let max = 0;
- let min = 0;
- if (numOfAlarm && numOfAlarm.length > 0) {
- visitData = axis(this.props.duration, numOfAlarm, ({ x, y }) => ({ x, y:
y / accuracy }));
- avg = avgTimeSeries(numOfAlarm) / accuracy;
- max = numOfAlarm.reduce((acc, curr) => { return acc < curr ? curr : acc;
}) / accuracy;
- min = numOfAlarm.reduce((acc, curr) => { return acc > curr ? curr : acc;
}) / accuracy;
- }
+ const { dashboard: { data }, globalVariables, duration } = this.props;
return (
- <Panel globalVariables={this.props.globalVariables}
onChange={this.handleDurationChange}>
+ <Panel globalVariables={globalVariables}
onChange={this.handleDurationChange}>
<Row gutter={8}>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<ChartCard
@@ -98,21 +88,21 @@ export default class Dashboard extends PureComponent {
</Col>
</Row>
<Row gutter={8}>
- <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8
}}>
+ <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 8
}}>
<ChartCard
title="Calls HeatMap"
contentHeight={200}
>
<HeatMap
data={data.getThermodynamic}
- duration={this.props.duration}
+ duration={duration}
height={200}
- onClick={(duration, responseTimeRange) =>
redirect(this.props.history, '/trace', { values: { duration: generateDuration({
+ onClick={(d, responseTimeRange) => redirect(history, '/trace',
{ values: { duration: generateDuration({
from() {
- return duration.start;
+ return d.start;
},
to() {
- return duration.end;
+ return d.end;
},
}),
minTraceDuration: responseTimeRange.min,
@@ -121,28 +111,6 @@ export default class Dashboard extends PureComponent {
/>
</ChartCard>
</Col>
- <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8
}}>
- <ChartCard
- title="Avg Application Alarm"
- avatar={<img style={{ width: 56, height: 56 }}
src="img/icon/alert.png" alt="app" />}
- total={`${avg.toFixed(2)}%`}
- footer={<div><Field label="Max" value={`${max}%`} /> <Field
label="Min" value={`${min}%`} /></div>}
- contentHeight={100}
- >
- <MiniArea
- animate={false}
- color="#D87093"
- borderColor="#B22222"
- line="true"
- data={visitData}
- yAxis={{
- formatter(val) {
- return `${val} %`;
- },
- }}
- />
- </ChartCard>
- </Col>
</Row>
<Row>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 8
}}>
@@ -152,7 +120,7 @@ export default class Dashboard extends PureComponent {
bodyStyle={{ padding: 5, height: 150}}
>
<Line
- data={axisMY(this.props.duration, [{ title: 'p99', value:
data.getP99}, { title: 'p95', value: data.getP95}
+ data={axisMY(duration, [{ title: 'p99', value: data.getP99}, {
title: 'p95', value: data.getP95}
, { title: 'p90', value: data.getP90}, { title: 'p75', value:
data.getP75}, { title: 'p50', value: data.getP50}])}
/>
</Card>
@@ -168,7 +136,7 @@ export default class Dashboard extends PureComponent {
<RankList
data={data.getTopNSlowEndpoint}
renderValue={_ => `${_.value} ms`}
- onClick={(key, item) => redirect(this.props.history,
'/monitor/endpoint', { key })}
+ onClick={(key) => redirect(history, '/monitor/endpoint', { key
})}
/>
</Card>
</Col>
@@ -182,7 +150,7 @@ export default class Dashboard extends PureComponent {
data={data.getTopNServiceThroughput}
renderValue={_ => `${_.value} cpm`}
color="#965fe466"
- onClick={(key, item) => redirect(this.props.history,
'/monitor/service', { key })}
+ onClick={(key) => redirect(history, '/monitor/service', { key
})}
/>
</Card>
</Col>
