Fix #173 Link Heatmap of Dashboard to Trace

A node of Heatmap represents a range of Trace.
apache · Jun 8, 2018 · c960050 · c960050
1 parent 9750aec
commit c960050
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,19 +29,21 @@ 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),
       end: end.format(format),
       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)),
     },
   };
 }