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
commit c96005041c22194601054735853fff2ffd6f02e4 Author: gaohongtao <hanahm...@gmail.com> AuthorDate: Fri Jun 8 17:56:46 2018 +0800 Fix #173 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 hanahm...@apache.org.