This is an automated email from the ASF dual-hosted git repository.
apucher pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-pinot.git
The following commit(s) were added to refs/heads/master by this push:
new 3fcf8f2 [TE] rootcause - support metric selection from chart labels
(#3526)
3fcf8f2 is described below
commit 3fcf8f233630955fa6b812c97d19f2129c8bcef9
Author: Alexander Pucher <[email protected]>
AuthorDate: Tue Nov 20 11:56:20 2018 -0800
[TE] rootcause - support metric selection from chart labels (#3526)
This PR enables users to change/select the primary metric by clicking on
the metric labels in the chart area.
---
.../pods/components/rootcause-chart/component.js | 41 ++++++++++++++--------
.../pods/components/rootcause-chart/template.hbs | 4 ++-
.../app/pods/rootcause/template.hbs | 1 +
.../app/styles/components/rootcause-chart.scss | 1 +
4 files changed, 32 insertions(+), 15 deletions(-)
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/component.js
index 2f86200..23e3787 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/component.js
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/component.js
@@ -1,4 +1,4 @@
-import { computed } from '@ember/object';
+import { computed, get, getProperties } from '@ember/object';
import { equal } from '@ember/object/computed';
import Component from '@ember/component';
import d3 from 'd3';
@@ -6,6 +6,7 @@ import buildTooltip from
'thirdeye-frontend/utils/build-tooltip';
import {
toBaselineUrn,
toMetricUrn,
+ toCurrentUrn,
filterPrefix,
hasPrefix,
toMetricLabel,
@@ -32,6 +33,8 @@ export default Component.extend({
onHover: null, // function (urns)
+ onSelection: null, // function (updates)
+
timeseriesMode: null, // 'absolute', 'relative', 'log', 'split'
classNames: ['rootcause-chart'],
@@ -47,7 +50,7 @@ export default Component.extend({
* @returns {Set}
*/
focusedIds: computed('focusedUrns', function() {
- return this.get('focusedUrns');
+ return get(this, 'focusedUrns');
}),
legend: {
@@ -84,7 +87,7 @@ export default Component.extend({
const {
entities,
timeseries
- } = this.getProperties('entities', 'timeseries');
+ } = getProperties(this, 'entities', 'timeseries');
const tooltip = this.buildTooltip.create();
@@ -102,7 +105,7 @@ export default Component.extend({
axis: computed(
'context',
function () {
- const { context } = this.getProperties('context');
+ const { context } = getProperties(this, 'context');
const { analysisRange } = context;
@@ -147,7 +150,7 @@ export default Component.extend({
'selectedUrns',
function () {
const { entities, timeseries, selectedUrns } =
- this.getProperties('entities', 'timeseries', 'selectedUrns');
+ getProperties(this, 'entities', 'timeseries', 'selectedUrns');
return filterPrefix(selectedUrns, ['thirdeye:event:',
'frontend:metric:'])
.filter(urn => !hasPrefix(urn, 'thirdeye:event:') || entities[urn])
@@ -166,7 +169,7 @@ export default Component.extend({
'timeseriesMode',
function () {
const { timeseries, timeseriesMode, displayableUrns } =
- this.getProperties('timeseries', 'timeseriesMode', 'displayableUrns');
+ getProperties(this, 'timeseries', 'timeseriesMode', 'displayableUrns');
if (timeseriesMode === TIMESERIES_MODE_SPLIT) {
return {};
@@ -195,7 +198,7 @@ export default Component.extend({
'timeseriesMode',
function () {
const { displayableUrns, timeseriesMode } =
- this.getProperties('displayableUrns', 'timeseriesMode');
+ getProperties(this, 'displayableUrns', 'timeseriesMode');
if (timeseriesMode !== TIMESERIES_MODE_SPLIT) {
return {};
@@ -233,7 +236,7 @@ export default Component.extend({
'timeseriesMode',
function () {
const { entities, displayableUrns, timeseriesMode } =
- this.getProperties('entities', 'displayableUrns', 'timeseriesMode');
+ getProperties(this, 'entities', 'displayableUrns', 'timeseriesMode');
if (timeseriesMode !== TIMESERIES_MODE_SPLIT) {
return {};
@@ -254,7 +257,7 @@ export default Component.extend({
'timeseriesMode',
function () {
const { entities, displayableUrns, timeseriesMode } =
- this.getProperties('entities', 'displayableUrns', 'timeseriesMode');
+ getProperties(this, 'entities', 'displayableUrns', 'timeseriesMode');
if (timeseriesMode !== TIMESERIES_MODE_SPLIT) {
return {};
@@ -284,7 +287,7 @@ export default Component.extend({
* @param {Array} urns metric ref urns
*/
_makeChartSeries(urns) {
- const { context } = this.getProperties('context');
+ const { context } = getProperties(this, 'context');
const { anomalyRange } = context;
const series = {};
@@ -313,7 +316,7 @@ export default Component.extend({
'timeseries',
'displayableUrns',
function () {
- const { displayableUrns } = this.getProperties('displayableUrns');
+ const { displayableUrns } = getProperties(this, 'displayableUrns');
const bounds = {};
[...displayableUrns].forEach(urn => {
@@ -333,7 +336,7 @@ export default Component.extend({
'displayableUrns',
function () {
const { entities, displayableUrns, context } =
- this.getProperties('entities', 'displayableUrns', 'context');
+ getProperties(this, 'entities', 'displayableUrns', 'context');
const selectedEvents = filterPrefix(displayableUrns,
'thirdeye:event:').map(urn => entities[urn]);
@@ -398,7 +401,7 @@ export default Component.extend({
*/
_makeSeries(urn) {
const { entities, timeseries, timeseriesMode, _eventValues, context } =
- this.getProperties('entities', 'timeseries', 'timeseriesMode',
'_eventValues', 'context');
+ getProperties(this, 'entities', 'timeseries', 'timeseriesMode',
'_eventValues', 'context');
if (hasPrefix(urn, 'frontend:metric:current:')) {
const metricEntity = entities[toMetricUrn(urn)];
@@ -505,7 +508,7 @@ export default Component.extend({
*/
_onHover(d) {
const { _hoverBounds: bounds, displayableUrns, onHover } =
- this.getProperties('_hoverBounds', 'displayableUrns', 'onHover');
+ getProperties(this, '_hoverBounds', 'displayableUrns', 'onHover');
if (onHover != null) {
const urns = [...displayableUrns].filter(urn => bounds[urn] &&
bounds[urn][0] <= d && d <= bounds[urn][1]);
@@ -518,4 +521,14 @@ export default Component.extend({
return outputUrns;
}
},
+
+ actions: {
+ onSelect(urn) {
+ const { onSelection } = getProperties(this, 'onSelection');
+
+ if (onSelection) {
+ onSelection({ [toMetricUrn(urn)]: true, [toBaselineUrn(urn)]: true,
[toCurrentUrn(urn)]: true });
+ }
+ }
+ }
});
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/template.hbs
index 13de027..eb399a4 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/template.hbs
@@ -1,7 +1,9 @@
{{#if isSplit}}
{{#each splitUrns as |urn|}}
<div>
- <h4 class="rootcause-chart__title">{{get-safe splitLabels urn}}</h4>
+ <a {{action "onSelect" urn}}>
+ <h4 class="rootcause-chart__title">{{get-safe splitLabels urn}}</h4>
+ </a>
{{timeseries-chart
series=(get-safe splitSeries urn)
tooltip=tooltip
diff --git a/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
index 304a8f4..c4d3142 100644
--- a/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
@@ -72,6 +72,7 @@
focusedUrns=focusedUrns
context=context
onHover=(action "chartOnHover")
+ onSelection=(action "onPrimaryChange")
}}
</div>
</div>
diff --git
a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-chart.scss
b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-chart.scss
index 9912153..111446a 100644
--- a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-chart.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-chart.scss
@@ -3,6 +3,7 @@
&__title {
padding-left: 16px;
+ cursor: pointer;
}
g[class*='c3-target-frontend-metric-baseline'] > .c3-lines {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
