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 10:00:33 UTC
[incubator-skywalking-ui] branch 5.0.0/beta2 updated (f6fe3d3 ->
c960050)
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a change to branch 5.0.0/beta2
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git.
discard f6fe3d3 Link Heatmap of Dashboard to Trace
new c960050 Fix #173 Link Heatmap of Dashboard to Trace
This update added new revisions after undoing existing revisions.
That is to say, some revisions that were in the old version of the
branch are not in the new version. This situation occurs
when a user --force pushes a change and generates a repository
containing something like this:
* -- * -- B -- O -- O -- O (f6fe3d3)
\
N -- N -- N refs/heads/5.0.0/beta2 (c960050)
You should already have received notification emails for all of the O
revisions, and so the following emails describe only the N revisions
from the common base, B.
Any revisions marked "omit" are not gone; other references still
refer to them. Any revisions marked "discard" are gone forever.
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.
[incubator-skywalking-ui] 01/01: Fix #173 Link Heatmap of Dashboard
to Trace
Posted by ha...@apache.org.
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 <ha...@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
hanahmily@apache.org.