You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ak...@apache.org on 2020/07/01 17:32:39 UTC
[incubator-pinot] branch master updated: [TE] frontend -
harleyjj/alert-details - Align time picker on Alert Overview and Preview
with RCA (#5607)
This is an automated email from the ASF dual-hosted git repository.
akshayrai09 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 7405f38 [TE] frontend - harleyjj/alert-details - Align time picker on Alert Overview and Preview with RCA (#5607)
7405f38 is described below
commit 7405f38651f892991531f60790777097bd6196e6
Author: Harley Jackson <hj...@linkedin.com>
AuthorDate: Wed Jul 1 10:32:19 2020 -0700
[TE] frontend - harleyjj/alert-details - Align time picker on Alert Overview and Preview with RCA (#5607)
---
.../app/pods/components/alert-details/component.js | 57 ++++------
.../app/pods/components/alert-details/template.hbs | 118 ++++++++++++++-------
.../app/styles/components/alert-details.scss | 26 +++++
.../app/styles/shared/_styles.scss | 4 +
4 files changed, 132 insertions(+), 73 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 9149500..eb82429 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
@@ -30,17 +30,14 @@ import { getValueFromYaml } from 'thirdeye-frontend/utils/yaml-tools';
import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';
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 config from 'thirdeye-frontend/config/environment';
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
-const DEFAULT_ACTIVE_DURATION = '1m'; // setting this date range selection as default (Last 24 Hours)
const UI_DATE_FORMAT = 'MMM D, YYYY hh:mm a'; // format for date picker to use (usually varies by route or metric)
const DISPLAY_DATE_FORMAT = 'YYYY-MM-DD HH:mm'; // format used consistently across app to display custom date range
-const TIME_RANGE_OPTIONS = ['48h', '1w', '1m', '3m'];
const ANOMALY_LEGEND_THRESHOLD = 20; // If number of anomalies is larger than this threshold, don't show the legend
export default Component.extend({
@@ -602,7 +599,7 @@ export default Component.extend({
} = this.getProperties('anomaliesOld', 'anomaliesCurrent', 'analysisRange', 'stateOfAnomaliesAndTimeSeries');
let tableData = [];
const humanizedObject = {
- queryDuration: (get(this, 'duration') || DEFAULT_ACTIVE_DURATION),
+ queryDuration: analysisRange[1] - analysisRange[0],
queryStart: analysisRange[0],
queryEnd: analysisRange[1]
};
@@ -746,7 +743,7 @@ export default Component.extend({
component: 'custom/anomalies-table/investigation-link',
title: 'RCA',
propertyName: 'id'
- }]
+ }];
return [...settingsColumn, ...startColumn, ...dimensionColumn,
...middleColumns, ...rightmostColumns, ...rcaColumn];
}
@@ -831,24 +828,29 @@ export default Component.extend({
* @type {Object[]} - array of objects, each of which represents each date pill
*/
pill: computed(
- 'analysisRange', 'startDate', 'endDate', 'duration',
+ 'analysisRange', 'startDate', 'endDate',
function() {
const analysisRange = get(this, 'analysisRange');
const startDate = Number(analysisRange[0]);
const endDate = Number(analysisRange[1]);
- const duration = get(this, 'duration') || DEFAULT_ACTIVE_DURATION;
const predefinedRanges = {
- 'Today': [moment().startOf('day'), moment().startOf('day').add(1, 'days')],
- 'Last 24 hours': [moment().subtract(1, 'day'), moment()],
- 'Yesterday': [moment().subtract(1, 'day').startOf('day'), moment().startOf('day')],
- 'Last Week': [moment().subtract(1, 'week').startOf('day'), moment().startOf('day')]
+ 'Last 48 Hours': [moment().subtract(48, 'hour').startOf('hour'), moment().startOf('hour')],
+ 'Last Week': [moment().subtract(1, 'week').startOf('day'), moment().startOf('day')],
+ 'Last 30 Days': [moment().subtract(1, 'month').startOf('day'), moment().startOf('day')],
+ 'Last 3 Months': [moment().subtract(3, 'month').startOf('day'), moment().startOf('day')]
};
-
+ if (!this.get('isPreviewMode')) {
+ const futureRanges = {
+ 'Next 48 Hours': [moment().add(48, 'hour').startOf('hour'), moment().startOf('hour')],
+ 'Next Week': [moment().add(1, 'week').startOf('day'), moment().startOf('day')],
+ 'Next 30 Days': [moment().add(1, 'month').startOf('day'), moment().startOf('day')]
+ };
+ Object.assign(predefinedRanges, futureRanges);
+ }
return {
uiDateFormat: UI_DATE_FORMAT,
activeRangeStart: moment(startDate).format(DISPLAY_DATE_FORMAT),
activeRangeEnd: moment(endDate).format(DISPLAY_DATE_FORMAT),
- timeRangeOptions: setUpTimeRangeOptions(TIME_RANGE_OPTIONS, duration, !this.get('isPreviewMode')),
timePickerIncrement: TIME_PICKER_INCREMENT,
predefinedRanges
};
@@ -952,7 +954,6 @@ export default Component.extend({
this.setProperties({
analysisRange: [moment().subtract(timeWindowSize, 'milliseconds').startOf('day').valueOf(), moment().add(1, 'day').startOf('day').valueOf()],
displayRange: [moment().subtract(timeWindowSize, 'milliseconds').startOf('day').valueOf(), moment().add(1, 'day').startOf('day').valueOf()],
- duration: (timeWindowSize === 172800000) ? '48h' : 'custom',
selectedDimension: 'Choose a dimension',
// For now, we will only show predicted and bounds on daily and minutely metrics with no dimensions, for the Alert Overview page
selectedBaseline: (!dimensionExploration && ((granularity || '').includes('MINUTES') || (granularity || '').includes('DAYS'))) ? 'predicted' : 'wo1w',
@@ -966,7 +967,6 @@ export default Component.extend({
this.setProperties({
analysisRange: [moment().subtract(timeWindowSize, 'milliseconds').startOf('day').valueOf(), moment().add(1, 'day').startOf('day').valueOf()],
displayRange: [moment().subtract(timeWindowSize, 'milliseconds').startOf('day').valueOf(), moment().add(1, 'day').startOf('day').valueOf()],
- duration: 'custom',
selectedBaseline: 'predicted'
});
}
@@ -1449,32 +1449,13 @@ export default Component.extend({
* @method onRangeSelection
* @param {Object} rangeOption - the user-selected time range to load
*/
- onRangeSelection(timeRangeOptions) {
- const {
- start,
- end,
- value: duration
- } = timeRangeOptions;
-
+ onRangeSelection(start, end) {
const startDate = moment(start).valueOf();
const endDate = moment(end).valueOf();
+
//Update the time range option selected
set(this, 'analysisRange', [startDate, endDate]);
set(this, 'displayRange', [startDate, endDate]);
- set(this, 'duration', duration);
- // This makes sure we don't fetch if the preview is collapsed
- if(get(this, 'showDetails') && get(this, 'dataIsCurrent')){
- // With a new date range, we should reset the state of time series and anomalies for comparison
- if (get(this, 'isPreviewMode')) {
- this.setProperties({
- anomaliesOld: [],
- anomaliesOldSet: false,
- anomaliesCurrent: [],
- anomaliesCurrentSet: false
- });
- }
- this._fetchAnomalies();
- }
// With a new date range, we should reset the state of time series and anomalies for comparison
if (get(this, 'isPreviewMode')) {
this.setProperties({
@@ -1484,6 +1465,10 @@ export default Component.extend({
anomaliesCurrentSet: false
});
}
+ // This makes sure we don't fetch if the preview is collapsed
+ if(get(this, 'showDetails') && get(this, 'dataIsCurrent')){
+ this._fetchAnomalies();
+ }
},
/**
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 9f4544c..4f857e8 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
@@ -42,19 +42,33 @@
</div>
{{/if}}
{{#if dataIsCurrent}}
- {{range-pill-selectors
- title="Showing"
- uiDateFormat=pill.uiDateFormat
- activeRangeEnd=pill.activeRangeEnd
- activeRangeStart=pill.activeRangeStart
- timeRangeOptions=pill.timeRangeOptions
- timePickerIncrement=pill.timePickerIncrement
- predefinedRanges=pill.predefinedRanges
- selectAction=(action "onRangeSelection")
- triggerId='time-range-selector'
- placeholder="Last 48 Hours"
- }}
-
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ timePicker=true
+ timePicker24Hour=true
+ timePickerIncrement=pill.timePickerIncrement
+ start=pill.activeRangeStart
+ end=pill.activeRangeEnd
+ ranges=pill.predefinedRanges
+ showCustomRangeLabel=false
+ format=pill.uiDateFormat
+ serverFormat="YYYY-MM-DD HH:mm"
+ applyAction=(action "onRangeSelection")
+ }}
+ </div>
+ </div>
{{#if alertId}}
@@ -317,36 +331,66 @@
</div>
{{else}}
<div class="detection-yaml-msg">Alert configuration has changed.</div>
- {{range-pill-selectors
- title="Show me"
- uiDateFormat=pill.uiDateFormat
- activeRangeEnd=pill.activeRangeEnd
- activeRangeStart=pill.activeRangeStart
- timeRangeOptions=pill.timeRangeOptions
- timePickerIncrement=pill.timePickerIncrement
- predefinedRanges=pill.predefinedRanges
- selectAction=(action "onRangeSelection")
- triggerId='time-range-selector'
- placeholder="Last 48 Hours"
- }}
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ timePicker=true
+ timePicker24Hour=true
+ timePickerIncrement=pill.timePickerIncrement
+ start=pill.activeRangeStart
+ end=pill.activeRangeEnd
+ ranges=pill.predefinedRanges
+ showCustomRangeLabel=false
+ format=pill.uiDateFormat
+ serverFormat="YYYY-MM-DD HH:mm"
+ applyAction=(action "onRangeSelection")
+ }}
+ </div>
+ </div>
{{/if}}
{{/if}}
{{else}}
{{#if disablePreviewButton}}
<p>Enter YAML configuration to enable preview.</p>
{{else}}
- {{range-pill-selectors
- title="Show me"
- uiDateFormat=pill.uiDateFormat
- activeRangeEnd=pill.activeRangeEnd
- activeRangeStart=pill.activeRangeStart
- timeRangeOptions=pill.timeRangeOptions
- timePickerIncrement=pill.timePickerIncrement
- predefinedRanges=pill.predefinedRanges
- selectAction=(action "onRangeSelection")
- triggerId='time-range-selector'
- placeholder="Last 48 Hours"
- }}
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ timePicker=true
+ timePicker24Hour=true
+ timePickerIncrement=pill.timePickerIncrement
+ start=pill.activeRangeStart
+ end=pill.activeRangeEnd
+ ranges=pill.predefinedRanges
+ showCustomRangeLabel=false
+ format=pill.uiDateFormat
+ serverFormat="YYYY-MM-DD HH:mm"
+ applyAction=(action "onRangeSelection")
+ }}
+ </div>
+ </div>
{{/if}}
{{/if}}
{{/unless}}
diff --git a/thirdeye/thirdeye-frontend/app/styles/components/alert-details.scss b/thirdeye/thirdeye-frontend/app/styles/components/alert-details.scss
index 5ec68b7..e0c2b66 100644
--- a/thirdeye/thirdeye-frontend/app/styles/components/alert-details.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/components/alert-details.scss
@@ -26,10 +26,36 @@
}
}
+ .col-xs-2 {
+ &.no-padding {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ }
+
+ .col-xs-4 {
+ &.no-padding {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ }
+
.col-xs-12 {
&.no-padding {
padding-left: 0px;
padding-right: 0px;
}
+
+ &.margin-top {
+ margin-top: 12px;
+ padding-left: 24px;
+ padding-right: 24px;
+ }
+
+ &.preview {
+ margin-top: 12px;
+ padding-left: 24px;
+ padding-right: 24px;
+ }
}
}
diff --git a/thirdeye/thirdeye-frontend/app/styles/shared/_styles.scss b/thirdeye/thirdeye-frontend/app/styles/shared/_styles.scss
index e0d9231..c359ba0 100644
--- a/thirdeye/thirdeye-frontend/app/styles/shared/_styles.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/shared/_styles.scss
@@ -281,6 +281,10 @@ body {
color: app-shade(black, 9);
margin-bottom: 12px;
+ &--display {
+ font-size: 18px;
+ }
+
&--flush {
margin-bottom: 0;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org