You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/06/08 09:58:05 UTC
[incubator-skywalking-ui] branch 5.0.0/beta2 updated: Link Heatmap
of Dashboard to Trace
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 5.0.0/beta2
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/5.0.0/beta2 by this push:
new f6fe3d3 Link Heatmap of Dashboard to Trace
f6fe3d3 is described below
commit f6fe3d399e2b3c7e6bb181f54ab3dcf365a45c6d
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Fri Jun 8 17:56:46 2018 +0800
Link Heatmap of Dashboard to Trace
A node of Heatmap represents a range of Trace.
---
src/components/Charts/HeatMap/index.js | 25 +++++++++++++++++++++++--
src/models/global.js | 1 +
src/models/trace.js | 8 ++------
src/routes/Dashboard/Dashboard.js | 13 ++++++++++++-
src/utils/time.js | 7 +++++--
5 files changed, 43 insertions(+), 11 deletions(-)
diff --git a/src/components/Charts/HeatMap/index.js b/src/components/Charts/HeatMap/index.js
index feecd02..a79d054 100644
--- a/src/components/Charts/HeatMap/index.js
+++ b/src/components/Charts/HeatMap/index.js
@@ -53,6 +53,19 @@ class HeatMap extends Component {
}
mapXAxisData = (reducedData, datetime) =>
reducedData.map((count, i) => ({ datetime, responseTime: i, count }))
+ handlePlotClick = (dtStart, dtEnd, responseTime) => {
+ const removedUnit = responseTime.slice(0, responseTime.indexOf('ms'));
+ let min;
+ let max;
+ if (removedUnit.indexOf('>') === 0) {
+ min = parseInt(removedUnit.slice(1), 10);
+ } else {
+ const value = parseInt(removedUnit, 10);
+ min = value - 100 < 0 ? 0 : value - 100;
+ max = value;
+ }
+ this.props.onClick({ start: dtStart, end: dtEnd }, { min, max });
+ }
render() {
const {
height,
@@ -63,7 +76,7 @@ class HeatMap extends Component {
if (!nodes || nodes.length < 1) {
return (<span style={{ display: 'none' }} />);
}
- const { display: { range } } = duration;
+ const { display: { range }, raw: { range: rawRange } } = duration;
const source = [];
let maxResponseTimeOffset = 0;
@@ -118,7 +131,15 @@ class HeatMap extends Component {
return (
<div className={styles.chart} style={{ height }}>
<div>
- <Chart data={mergeSource} scale={cols} forceFit height={height * 1.4}>
+ <Chart
+ data={mergeSource}
+ scale={cols}
+ forceFit
+ height={height * 1.4}
+ onPlotClick={({ data: { _origin: { datetime, responseTime } } }) =>
+ this.handlePlotClick(rawRange[datetime], rawRange[datetime + 1]
+ , responseTimeAxis[responseTime])}
+ >
<Axis
name="datetime"
grid={{
diff --git a/src/models/global.js b/src/models/global.js
index 5e08384..816fc4b 100644
--- a/src/models/global.js
+++ b/src/models/global.js
@@ -96,6 +96,7 @@ export default {
collapsed: true,
selected: payload,
display: value.display,
+ raw: value.raw,
},
globalVariables: { duration: value.input },
};
diff --git a/src/models/trace.js b/src/models/trace.js
index 1ae7d0c..ddabbf6 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -156,12 +156,8 @@ export default generateModal({
dispatch({
type: 'saveVariables',
payload: {
- values: {
- applicationId: state.key,
- },
- labels: {
- applicationId: state.label,
- },
+ values: state.values,
+ labels: state.labels,
},
});
}
diff --git a/src/routes/Dashboard/Dashboard.js b/src/routes/Dashboard/Dashboard.js
index aa4285f..6b454d9 100644
--- a/src/routes/Dashboard/Dashboard.js
+++ b/src/routes/Dashboard/Dashboard.js
@@ -22,7 +22,7 @@ import { Row, Col, Card, Tooltip, Icon } from 'antd';
import {
ChartCard, MiniArea, Field, HeatMap,
} from '../../components/Charts';
-import { axis } from '../../utils/time';
+import { axis, generateDuration } from '../../utils/time';
import { avgTimeSeries, redirect } from '../../utils/utils';
import { Panel } from '../../components/Page';
import RankList from '../../components/RankList';
@@ -105,6 +105,17 @@ export default class Dashboard extends PureComponent {
data={data.getThermodynamic}
duration={this.props.duration}
height={200}
+ onClick={(duration, responseTimeRange) => redirect(this.props.history, '/trace', { values: { duration: generateDuration({
+ from() {
+ return duration.start;
+ },
+ to() {
+ return duration.end;
+ },
+ }),
+ minTraceDuration: responseTimeRange.min,
+ maxTraceDuration: responseTimeRange.max,
+ } })}
/>
</ChartCard>
</Col>
diff --git a/src/utils/time.js b/src/utils/time.js
index a547acb..e2476ca 100644
--- a/src/utils/time.js
+++ b/src/utils/time.js
@@ -15,6 +15,7 @@
* limitations under the License.
*/
+import moment from 'moment';
export function axis({ display }, data, tranformFunc) {
return display.range.map((v, i) =>
@@ -28,6 +29,8 @@ export function generateDuration({ from, to }) {
const lenght = mlist.length;
const { measureType, step, format, displayFormat } = mlist
.find((_, index) => ((index + 1 >= lenght) || end.diff(start, _.measureType) > 1));
+ const range = Array.from({ length: end.diff(start, measureType) + 2 },
+ (v, i) => start.clone().add(i, measureType).format(displayFormat));
return {
input: {
start: start.format(format),
@@ -35,12 +38,12 @@ export function generateDuration({ from, to }) {
step,
},
display: {
- range: Array.from({ length: end.diff(start, measureType) + 1 },
- (v, i) => start.clone().add(i, measureType).format(displayFormat)),
+ range: range.slice(0, range.length - 1),
},
raw: {
start,
end,
+ range: range.map(_ => moment(_, displayFormat)),
},
};
}
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.