This is an automated email from the ASF dual-hosted git repository.
jihao 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 0c7a20f [TE] frontend - harleyjj/preview - ensure zoom buttons are
over shaded region (#4254)
0c7a20f is described below
commit 0c7a20f3d129edf3928c3d7f4bad12b2b1f58ae8
Author: Harley Jackson <[email protected]>
AuthorDate: Fri May 31 10:20:14 2019 -0700
[TE] frontend - harleyjj/preview - ensure zoom buttons are over shaded
region (#4254)
Targets bounds region to g element "below" where the slider buttons are
drawn
Moves slider button code onto Timeseries Chart for usability in other cases
than alert details
Show only the detector rule name in Preview
---
.../app/pods/components/alert-details/component.js | 59 ++++++----------------
.../app/pods/components/alert-details/template.hbs | 5 +-
.../pods/components/timeseries-chart/component.js | 57 +++++++++++++++++----
3 files changed, 65 insertions(+), 56 deletions(-)
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
index 3a0c3bb..1530ca5 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
@@ -33,7 +33,6 @@ import floatToPercent from
'thirdeye-frontend/utils/float-to-percent';
import { setUpTimeRangeOptions } from
'thirdeye-frontend/utils/manage-alert-utils';
import moment from 'moment';
import _ from 'lodash';
-import d3 from 'd3';
const TABLE_DATE_FORMAT = 'MMM DD, hh:mm A'; // format for anomaly table
const TIME_PICKER_INCREMENT = 5; // tells date picker hours field how
granularly to display time
@@ -157,7 +156,14 @@ export default Component.extend({
function() {
const uniqueTimeSeries = get(this, 'uniqueTimeSeries');
if (uniqueTimeSeries) {
- return [...new Set(uniqueTimeSeries.map(series =>
series.detectorName))];
+ return [...new Set(uniqueTimeSeries.map(series => {
+ const detectorName = series.detectorName;
+ const nameOnly = detectorName.split(':')[0];
+ return {
+ detectorName,
+ name: nameOnly
+ };
+ }))];
}
return [];
}
@@ -639,7 +645,12 @@ export default Component.extend({
set(this, 'metricUrnList', metricUrnList);
set(this, 'selectedDimension',
toMetricLabel(extractTail(decodeURIComponent(metricUrnList[0]))));
if (applicationAnomalies.predictions &&
Array.isArray(applicationAnomalies.predictions) && (typeof
applicationAnomalies.predictions[0] === 'object')){
- set(this, 'selectedRule',
applicationAnomalies.predictions[0].detectorName);
+ const detectorName =
applicationAnomalies.predictions[0].detectorName;
+ const selectedRule = {
+ detectorName,
+ name: detectorName.split(':')[0]
+ };
+ set(this, 'selectedRule', selectedRule);
}
set(this, 'metricUrn', metricUrnList[0]);
}
@@ -712,46 +723,6 @@ export default Component.extend({
}
},
- didRender(){
- this._super(...arguments);
-
- later(() => {
- this._buildSliderButton();
- });
- },
-
- // Helper function that builds the subchart region buttons
- _buildSliderButton() {
- const componentId = this.get('componentId');
- const resizeButtons = d3.select(`.${componentId}`).selectAll('.resize');
-
- resizeButtons.append('circle')
- .attr('cx', 0)
- .attr('cy', 30)
- .attr('r', 10)
- .attr('fill', '#0091CA');
- resizeButtons.append('line')
- .attr('class', 'anomaly-graph__slider-line')
- .attr("x1", 0)
- .attr("y1", 27)
- .attr("x2", 0)
- .attr("y2", 33);
-
- resizeButtons.append('line')
- .attr('class', 'anomaly-graph__slider-line')
- .attr("x1", -5)
- .attr("y1", 27)
- .attr("x2", -5)
- .attr("y2", 33);
-
- resizeButtons.append('line')
- .attr('class', 'anomaly-graph__slider-line')
- .attr("x1", 5)
- .attr("y1", 27)
- .attr("x2", 5)
- .attr("y2", 33);
- },
-
_formatAnomaly(anomaly) {
return `${moment(anomaly.startTime).format(TABLE_DATE_FORMAT)}`;
},
@@ -778,7 +749,7 @@ export default Component.extend({
if (isPreviewMode) {
const seriesSet = uniqueTimeSeries.find(series => {
- if (series.detectorName === selectedRule && series.metricUrn ===
metricUrn) {
+ if (series.detectorName === selectedRule.detectorName &&
series.metricUrn === metricUrn) {
return series;
}
});
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
index 4da1538..be93e9b 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
@@ -88,7 +88,7 @@
<div class="te-content-block">
{{#if isPreviewMode}}
- <h4 class="te-self-serve__block-title">{{selectedRule}} {{#if
alertHasDimensions}}/ {{selectedDimension}}{{/if}} anomalies over time
({{numCurrentAnomalies}})</h4>
+ <h4 class="te-self-serve__block-title">{{selectedRule.name}}
{{#if alertHasDimensions}}/ {{selectedDimension}}{{/if}} anomalies over time
({{numCurrentAnomalies}})</h4>
{{else}}
<h4 class="te-self-serve__block-title">{{#if
alertHasDimensions}}{{selectedDimension}} a{{else}}A{{/if}}nomalies over time
({{numCurrentAnomalies}})</h4>
{{/if}}
@@ -109,10 +109,11 @@
matchTriggerWidth=false
matchContentWidth=true
selected=selectedRule
+ searchField="name"
onchange=(action "onSelectRule")
as |rule|
}}
- {{rule}}
+ {{rule.name}}
{{/power-select}}
{{!-- Dimension selector --}}
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/timeseries-chart/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/timeseries-chart/component.js
index da45cd1..e7a3a1a 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/timeseries-chart/component.js
+++
b/thirdeye/thirdeye-frontend/app/pods/components/timeseries-chart/component.js
@@ -201,6 +201,8 @@ export default Component.extend({
_shadeBounds(){
d3.select(".confidence-bounds").remove();
d3.select(".sub-confidence-bounds").remove();
+ d3.select('.timeseries-graph__slider-circle').remove();
+ d3.selectAll('timeseries-graph__slider-line').remove();
const chart = this.api;
if (chart && chart.legend && chart.internal && chart.internal.data &&
chart.internal.data.targets) {
if (chart.internal.data.targets.length > 24) {
@@ -237,18 +239,53 @@ export default Component.extend({
.y0(d => yscaleSub(lowerBoundVals[d]))
.y1(d => yscaleSub(upperBoundVals[d]));
- d3.select(".c3-chart").append('path')
- .datum(indices)
- .attr('class', 'confidence-bounds')
- .attr('d', area_main);
-
- d3.select(".c3-brush").append('path')
- .datum(indices)
- .attr('class', 'sub-confidence-bounds')
- .attr('d', area_sub);
+ let i = 0;
+ const bothCharts = d3.selectAll('.c3-chart');
+ bothCharts.each(function() {
+ if (i === 0 && this) {
+ d3.select(this).append('path')
+ .datum(indices)
+ .attr('class', 'confidence-bounds')
+ .attr('d', area_main);
+ } else if (i === 1 && this) {
+ d3.select(this).append('path')
+ .datum(indices)
+ .attr('class', 'sub-confidence-bounds')
+ .attr('d', area_sub);
+ }
+ i++;
+ });
}
}
-
+ // add resize buttons after shading bounds
+ const resizeButtons = d3.selectAll('.resize');
+
+ resizeButtons.append('circle')
+ .attr('class', 'timeseries-graph__slider-circle')
+ .attr('cx', 0)
+ .attr('cy', 30)
+ .attr('r', 10)
+ .attr('fill', '#0091CA');
+ resizeButtons.append('line')
+ .attr('class', 'timeseries-graph__slider-line')
+ .attr("x1", 0)
+ .attr("y1", 27)
+ .attr("x2", 0)
+ .attr("y2", 33);
+
+ resizeButtons.append('line')
+ .attr('class', 'timeseries-graph__slider-line')
+ .attr("x1", -5)
+ .attr("y1", 27)
+ .attr("x2", -5)
+ .attr("y2", 33);
+
+ resizeButtons.append('line')
+ .attr('class', 'timeseries-graph__slider-line')
+ .attr("x1", 5)
+ .attr("y1", 27)
+ .attr("x2", 5)
+ .attr("y2", 33);
},
didUpdateAttrs() {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
