apucher closed pull request #3567: [TE] rootcause - rich metric selector
URL: https://github.com/apache/incubator-pinot/pull/3567
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/thirdeye/thirdeye-frontend/app/mirage/endpoints/rootcause.js
b/thirdeye/thirdeye-frontend/app/mirage/endpoints/rootcause.js
index 9a158e7b90..2041a1057a 100644
--- a/thirdeye/thirdeye-frontend/app/mirage/endpoints/rootcause.js
+++ b/thirdeye/thirdeye-frontend/app/mirage/endpoints/rootcause.js
@@ -185,7 +185,8 @@ export default function(server) {
server.get('/rootcause/metric/aggregate', () => {});
server.get('/rootcause/metric/aggregate/cache', () => {});
server.get('/rootcause/metric/breakdown', () => {});
- server.get('rootcause/metric/aggregate/batch', () => {});
+ server.get('/rootcause/metric/aggregate/batch', () => {});
+ server.get('/rootcause/metric/aggregate/chunk', () => {});
server.get('/rootcause/metric/timeseries', () => {
return {
timestamp: [moment().valueOf()],
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/filter-select/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/filter-select/component.js
index cf91bf8c94..2fb0114dab 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/filter-select/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/filter-select/component.js
@@ -152,15 +152,13 @@ export default Component.extend({
// Selected Filters Serializer
selectedFilters: computed('selected', {
get() {
- const filters = JSON.parse(this.get('selected'));
+ const selected = this.get('selected') || '{}';
+ const filters = JSON.parse(selected);
return convertHashToFilters(filters);
},
set(key, value) {
- const filters = convertFiltersToHash(value);
- this.set('selected', filters);
-
- return value;
+ this.set('selected', value);
}
}),
@@ -201,10 +199,12 @@ export default Component.extend({
// Action handler for filter Selection/Deselection
onFilterChange(filters) {
const onChangeHandler = this.get('onChange');
- this.set('selectedFilters', filters);
+
+ const newSelected = convertFiltersToHash(filters);
+ this.set('selected', newSelected);
if (onChangeHandler) {
- onChangeHandler(this.get('selected'));
+ onChangeHandler(newSelected);
}
}
}
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric-dimension/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric-dimension/component.js
index 412c8f7a6f..6b855b8221 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric-dimension/component.js
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric-dimension/component.js
@@ -208,11 +208,14 @@ export default Component.extend({
const baseUrn = metricUrns[0];
const { selectedUrn, baseUrnCache } = getProperties(this, 'selectedUrn',
'baseUrnCache');
- const filterMap = toFilterMap(toFilters(selectedUrn));
- if (!_.isEqual(baseUrn, baseUrnCache)) {
+ const previousFilterMap = toFilterMap(toFilters(selectedUrn));
+ const incomingFilterMap = toFilterMap(toFilters(baseUrn));
+ const newFilterMap = _.isEmpty(incomingFilterMap) ? previousFilterMap :
incomingFilterMap;
+
+ if (!_.isEqual(baseUrn, baseUrnCache) || !_.isEqual(previousFilterMap,
newFilterMap)) {
setProperties(this, { baseUrn, baseUrnCache: baseUrn });
- this._fetchFilters(baseUrn, filterMap);
+ this._fetchFilters(baseUrn, newFilterMap);
}
},
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric-dimension/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric-dimension/template.hbs
index c155cce605..61716d5ae3 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric-dimension/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric-dimension/template.hbs
@@ -1,7 +1,7 @@
<div class="row">
<div class="col-xs-6">
<label class="te-label te-label--small" for="select-metric">
- Metrics to Investigate
+ Metric under Investigation
<span>
<i class="glyphicon glyphicon-question-sign"></i>
{{#tooltip-on-element class="te-tooltip"}}
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric/component.js
index d5c78af999..b8a087b5ee 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric/component.js
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric/component.js
@@ -1,6 +1,6 @@
import Component from '@ember/component';
import fetch from 'fetch';
-import { toBaselineUrn, toCurrentUrn, filterPrefix } from
'thirdeye-frontend/utils/rca-utils';
+import { toBaselineUrn, toCurrentUrn, filterPrefix, toMetricLabel } from
'thirdeye-frontend/utils/rca-utils';
import { selfServeApiCommon } from 'thirdeye-frontend/utils/api/self-serve';
import { task, timeout } from 'ember-concurrency';
import _ from 'lodash';
@@ -40,24 +40,40 @@ export default Component.extend({
'entities', 'selectedUrns',
function() {
const { selectedUrns, entities } = this.getProperties('selectedUrns',
'entities');
+
+ // NOTE: all of this is very hacky as it merges data from two different
sources - entities and the autocomplete
+
const selectedMetrics = filterPrefix(selectedUrns, 'thirdeye:metric:')
.filter(urn => urn in entities)
.map((urn) => {
const entity = entities[urn];
- const agg = { alias: entity.label, id: entity.urn.split(':')[2] };
- return agg;
+ const labelParts = entity.label.split('::');
+ return {
+ alias: entity.label,
+ urn: entity.urn,
+ name: toMetricLabel(urn, entities),
+ dataset: labelParts[0],
+ isSelected: true
+ };
});
+
const relatedMetrics = filterPrefix(Object.keys(entities),
'thirdeye:metric:')
- .filter(urn => urn in entities)
- .map((urn) => {
- const entity = entities[urn];
- const agg = { alias: entity.label, id: entity.urn.split(':')[2] };
- return agg;
- });
+ .filter(urn => urn in entities && !selectedUrns.has(urn))
+ .map((urn) => {
+ const entity = entities[urn];
+ const labelParts = entity.label.split('::');
+ return {
+ alias: entity.label,
+ urn: entity.urn,
+ name: toMetricLabel(urn, entities),
+ dataset: labelParts[0],
+ isSelected: false
+ };
+ });
return [
- { groupName: 'Selected Metrics', options: _.sortBy(selectedMetrics,
(row) => row.alias) || [] },
- { groupName: 'Related Metrics', options: _.sortBy(relatedMetrics,
(row) => row.alias) || [] }
+ { groupName: 'Selected Metrics', options: _.sortBy(selectedMetrics ||
[], (row) => row.alias) },
+ { groupName: 'Related Metrics', options: _.sortBy(relatedMetrics ||
[], (row) => row.alias) }
];
}
),
@@ -103,6 +119,7 @@ export default Component.extend({
recommendedMetricsAction(metric) {
this.send('onChange', metric);
},
+
/**
* Action handler for metric search changes
* @param {Object} metric
@@ -111,10 +128,11 @@ export default Component.extend({
const { onSelection } = this.getProperties('onSelection');
if (!onSelection) { return; }
- const { id } = metric;
- if (!id) { return; }
+ const { urn, id } = metric;
+ if (!urn && !id) { return; }
+
+ const metricUrn = urn ? urn : `thirdeye:metric:${id}`;
- const metricUrn = `thirdeye:metric:${id}`;
const updates = { [metricUrn]: true, [toBaselineUrn(metricUrn)]: true,
[toCurrentUrn(metricUrn)]: true };
onSelection(updates);
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric/template.hbs
index 6d4d1eae41..a495ac1352 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-metric/template.hbs
@@ -10,9 +10,5 @@
matchTriggerWidth=false
as |metric|
}}
-{{#if (eq selectedMetric.alias metric.alias)}}
- <span class="bluelink">{{metric.alias}}</span>
-{{else}}
- {{metric.alias}}
-{{/if}}
+ {{partial 'partials/rootcause/select-metric-label'}}
{{/power-select}}
diff --git
a/thirdeye/thirdeye-frontend/app/pods/custom/metrics-table-metric/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/custom/metrics-table-metric/template.hbs
index 3a90a3e624..948efb00bf 100644
---
a/thirdeye/thirdeye-frontend/app/pods/custom/metrics-table-metric/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/custom/metrics-table-metric/template.hbs
@@ -5,5 +5,5 @@
{{/if}}
</p>
<p class="metrics-table__value--small">
- ({{get record 'dataset'}})
+ {{get record 'dataset'}}
</p>
diff --git
a/thirdeye/thirdeye-frontend/app/pods/partials/rootcause/select-metric-label/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/partials/rootcause/select-metric-label/template.hbs
new file mode 100644
index 0000000000..8e43434572
--- /dev/null
+++
b/thirdeye/thirdeye-frontend/app/pods/partials/rootcause/select-metric-label/template.hbs
@@ -0,0 +1,6 @@
+<p class="rootcause-select-metric__value {{if (get-safe metric "isSelected")
"rootcause-select-metric__value--bluelink"}}">
+ {{get-safe metric "name"}}
+</p>
+<p class="rootcause-select-metric__value--small">
+ {{get-safe metric "dataset"}}
+</p>
diff --git
a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-select-metric.scss
b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-select-metric.scss
index bf6bef31a0..c8695bd630 100644
---
a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-select-metric.scss
+++
b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-select-metric.scss
@@ -3,8 +3,30 @@
}
.ember-power-select-option {
- .bluelink {
- font-weight: bold;
- color: $te-blue;
+
+}
+
+#select-metric .ember-power-select-selected-item {
+ margin-left: 0;
+}
+
+.rootcause-select-metric {
+ &__value {
+ margin: 0;
+ padding: 0;
+ height: 21px;
+
+ &--small {
+ margin: 0;
+ padding: 0;
+ height: 18px;
+ font-size: 10px;
+ color: app-shade(black, 0.60);
+ }
+
+ &--bluelink {
+ font-weight: bold;
+ color: $te-blue;
+ }
}
}
diff --git a/thirdeye/thirdeye-frontend/tests/acceptance/rootcause-test.js
b/thirdeye/thirdeye-frontend/tests/acceptance/rootcause-test.js
index d429204a56..d646111aab 100644
--- a/thirdeye/thirdeye-frontend/tests/acceptance/rootcause-test.js
+++ b/thirdeye/thirdeye-frontend/tests/acceptance/rootcause-test.js
@@ -17,7 +17,7 @@ module('Acceptance | rootcause', async function(hooks) {
test(`visiting /rootcause on anomalyId shows correct header title`, async
assert => {
await visit('/rootcause?anomalyId=1');
-
+
assert.ok(
$('.rootcause-header__major').get(0).value.includes('Investigation on
pageViews'),
'title is correct');
@@ -53,11 +53,6 @@ module('Acceptance | rootcause', async function(hooks) {
'pageViews',
'metric label is correct'
);
- assert.equal(
- $(rcEl.SELECTED_METRIC).get(0).innerText.trim(),
- 'pageViews',
- 'selected metric is correct'
- );
});
test('visiting rootcause page and making changes to the title and comment
should create a session with saved changes',
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
