This is an automated email from the ASF dual-hosted git repository.
xhsun 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 f267c86 [TE] frontend - harleyjj/rca - add tooltip for Dimensions tab
to explain Cube Algorithm (#5098)
f267c86 is described below
commit f267c86017fad0e02b6d44a1da45b64abe2864ec
Author: Xiaohui Sun <[email protected]>
AuthorDate: Thu Mar 5 08:29:01 2020 -0800
[TE] frontend - harleyjj/rca - add tooltip for Dimensions tab to explain
Cube Algorithm (#5098)
---
.../app/pods/components/cube-tooltip/component.js | 23 +++
.../app/pods/components/cube-tooltip/template.hbs | 20 ++
.../pods/components/rootcause-heatmap/component.js | 7 +-
.../pods/components/rootcause-heatmap/template.hbs | 10 +-
.../pods/components/rootcause-slider/component.js | 216 ---------------------
.../pods/components/rootcause-slider/template.hbs | 78 --------
thirdeye/thirdeye-frontend/config/environment.js | 3 +-
7 files changed, 56 insertions(+), 301 deletions(-)
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/cube-tooltip/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/cube-tooltip/component.js
new file mode 100644
index 0000000..cb6a22e
--- /dev/null
+++ b/thirdeye/thirdeye-frontend/app/pods/components/cube-tooltip/component.js
@@ -0,0 +1,23 @@
+/**
+ * Cube-Tooltip Component
+ * Displays the tooltip contents for Cube Algorithm formulas and wiki
+ * (should be placed inside a tooltip or bs-popover)
+ * @example
+ * {{#bs-popover}}
+ * {{cube-tooltip}}
+ * {{/bs-popover}}
+ * @exports cube-tooltip
+ */
+import Component from '@ember/component';
+import config from 'thirdeye-frontend/config/environment';
+
+export default Component.extend({
+ actions: {
+ /**
+ * Links to cube algorithm wiki
+ */
+ triggerDoc() {
+ window.open(config.docs.cubeWiki);
+ }
+ }
+});
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/cube-tooltip/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/cube-tooltip/template.hbs
new file mode 100644
index 0000000..b8d8014
--- /dev/null
+++ b/thirdeye/thirdeye-frontend/app/pods/components/cube-tooltip/template.hbs
@@ -0,0 +1,20 @@
+<div class="te-tooltip__body te-tooltip__body--large">
+ <div>
+ <span class="te-tooltip__title te-tooltip__title--small">Formulas</span>
+ </div>
+ <p>Percentage Change: (CV - PV) * 100 / PV<br/>
+ Change in Contribution: (CV/SUM_CV - PV/ SUM_PV) * 100<br/>
+ Contribution to Overall Change: (CV - PV) * 100 / (SUM_CV - SUM_PV)
+ </p>
+ <div>
+ <span class="te-tooltip__title te-tooltip__title--small">Definition of
Terms</span>
+ </div>
+ <p>CV: current value<br/>
+ PV: previous (baseline) value<br/>
+ SUM_CV: total value<br/>
+ SUM_PV: total previous (baseline) value
+ </p>
+ <div>
+ <a {{action "triggerDoc"}}>More Details</a>
+ </div>
+</div>
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-heatmap/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-heatmap/component.js
index 50d55a7..6f86c07 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-heatmap/component.js
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-heatmap/component.js
@@ -1,5 +1,5 @@
import Component from '@ember/component';
-import { observer, get, getProperties, computed } from '@ember/object';
+import { get, getProperties, computed } from '@ember/object';
import {
toCurrentUrn,
toBaselineUrn,
@@ -7,10 +7,7 @@ import {
isInverse,
isAdditive,
filterPrefix,
- toMetricLabel,
- stripTail,
- extractTail,
- appendTail
+ toMetricLabel
} from 'thirdeye-frontend/utils/rca-utils';
import {
humanizeChange,
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-heatmap/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-heatmap/template.hbs
index 2c88ae0..a664dfd 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-heatmap/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-heatmap/template.hbs
@@ -13,7 +13,15 @@
{{/unless}}
</div>
<div class="col-xs-4 pull-right">
- <label class="te-label te-label--small" for="select-heatmap-mode">Color
heatmap by: </label>
+ <label class="te-label te-label--small" for="select-heatmap-mode">
+ Color heatmap by:
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#bs-popover placement="bottom" title="Definition of change ratios"}}
+ {{cube-tooltip}}
+ {{/bs-popover}}
+ </span>
+ </label>
{{#power-select
triggerId="select-heatmap-mode"
selected=selectedMode
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-slider/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-slider/component.js
deleted file mode 100644
index 4c8f32a..0000000
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-slider/component.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { computed } from '@ember/object';
-import Component from '@ember/component';
-import $ from 'jquery';
-import {
- makeTime,
- dateFormatFull
-} from 'thirdeye-frontend/utils/rca-utils';
-
-// TODO merge this with rootcause-select-comparison-range
-
-/**
- * Date format the date picker component expects
- * @type String
- *
- */
-const serverDateFormat = 'YYYY-MM-DD HH:mm';
-
-/**
- * @summary Mapping between values that are named on the backend to epoc time
value in millis
- * @type {Object}
- * @example `1_HOURS=3600000=1hr , 1800000=30mins` etc since we using epoc
time values in millis
- */
-const namedToEpocMapping = {
- '5_MINUTES': 300000,
- '15_MINUTES': 900000,
- '30_MINUTES': 1800000,
- '1_HOURS': 3600000,
- '3_HOURS': 10800000,
- '1_DAYS': 86400000
-};
-
-
-export default Component.extend({
- timeFormat: "MMM D, hh:mm a z",//slider
- range: null, // [0, 0]
- compareMode: null, // ""
- onChange: null, // func (start, end, compareMode)
- slider: null,
- originalMinInvestigatePeriod: null,
- originalMaxInvestigatePeriod: null,
-
- rangeOptions: {
- 'Last hour': [makeTime().subtract(1, 'hours').startOf('hour'),
makeTime().startOf('hours').add(1, 'hours')],
- 'Last 3 hours': [makeTime().subtract(3, 'hours').startOf('hour'),
makeTime().startOf('hours').add(1, 'hours')],
- 'Last 6 hours': [makeTime().subtract(6, 'hours').startOf('hour'),
makeTime().startOf('hours').add(1, 'hours')],
- 'Last 24 hours': [makeTime().subtract(24, 'hours').startOf('hour'),
makeTime().startOf('hours').add(1, 'hours')]
- },
-
- compareModeOptions: [
- 'WoW',
- 'Wo2W',
- 'Wo3W',
- 'Wo4W',
- 'mean4w',
- 'median4w',
- 'min4w',
- 'max4w',
- 'predicted',
- 'none'
- ],
-
- minDisplayWindow: computed('displayRange.[]', function() {//display window
start - slider
- return makeTime(this.get('displayRange')[0]);
- }),
-
- maxDisplayWindow: computed('displayRange.[]', function() {//display window
end - slider
- return makeTime(this.get('displayRange')[1]);
- }),
-
- minInvestigatePeriod: computed('anomalyRange.[]', function()
{//Investigation period start - slider
- return makeTime(this.get('anomalyRange')[0]);
- }),
-
- maxInvestigatePeriod: computed('anomalyRange.[]', function()
{//Investigation period - slider
- return makeTime(this.get('anomalyRange')[1]);
- }),
-
- granularityOneWay: computed('granularity', function() {
- return namedToEpocMapping[this.get('granularity')];
- }),
-
-
- startFormatted: computed('anomalyRange.[]', function() {//investigation start
- return makeTime(this.get('anomalyRange')[0]).format(serverDateFormat);
- }),
-
- endFormatted: computed('anomalyRange.[]', function() {//investigation end
- return makeTime(this.get('anomalyRange')[1]).format(serverDateFormat);
- }),
-
- maxDateFormatted: computed(function() {
- return makeTime().startOf('hour').add(1, 'hours').format(serverDateFormat);
- }),
-
- compareModeFormatted: computed('compareMode', function() {
- return this.get('compareMode');
- }),
-
- /**
- * Default after elements are inserted
- */
- didInsertElement() {
- this._super(...arguments);
- let $range = $('.js-range-slider');
- const timeFormat = this.get('timeFormat');
- const { compareMode, onChange } = this.getProperties('compareMode',
'onChange');
-
- $range.ionRangeSlider({
- type: 'double',
- grid: true,
- grid_num: 1,
- hide_min_max: true,
- step: this.get('granularityOneWay'),
- min: this.get('minDisplayWindow').format('x'),
- max: this.get('maxDisplayWindow').format('x'),
- from: this.get('minInvestigatePeriod').format('x'),
- to: this.get('maxInvestigatePeriod').format('x'),
- prettify: function (num) {
- return makeTime(num).format(timeFormat);
- },
- onFinish: function (data) {
- // Update the display window's investigation period on the chart
- onChange(makeTime(data.from).valueOf(), makeTime(data.to).valueOf(),
compareMode);
- }
- });
-
- // Save slider instance to var
- this.set('slider', $range.data('ionRangeSlider'));
- },
-
- didRender() {
- this._super(...arguments);
-
- // Set oneway assignment from these existing CPs
- this.setProperties({
- startFormattedOneWay: this.get('startFormatted'),
- endFormattedOneWay: this.get('endFormatted'),
- maxDateFormattedOneWay: this.get('maxDateFormatted'),
- // granularityOneWay: this.get('granularity')
- });
-
- // Save original investigation periods
- this.setProperties({
- originalMinInvestigatePeriod: this.get('minInvestigatePeriod'),
- originalMaxInvestigatePeriod: this.get('maxInvestigatePeriod')
- });
-
- // Update the slider, by calling it's update method
- if (this.get('slider')) {
- this.get('slider').update({
- step: this.get('granularityOneWay'),
- min: this.get('minDisplayWindow').format('x'),
- max: this.get('maxDisplayWindow').format('x')
- });
- }
- },
-
- actions: {
- onRange(start, end) {
- const { compareMode, onChange } = this.getProperties('compareMode',
'onChange');
-
- // Update anomalyRange for computed to recalculate
- this.set('anomalyRange', [makeTime(start).valueOf(),
makeTime(end).valueOf()]);
-
- // Investigation period changed on date picker. Update the slider's min
and max.
- this.get('slider').update({
- from: this.get('minInvestigatePeriod').format('x'),
- to: this.get('maxInvestigatePeriod').format('x')
- });
-
- // Update the display window's investiation period on the chart
- onChange(makeTime(start).valueOf(), makeTime(end).valueOf(),
compareMode);
- },
-
- onPickerRange(type, time) {
- const { compareMode, onChange } = this.getProperties('compareMode',
'onChange');
-
- // Update anomalyRange for computed to recalculate
- const start = type === 'start' ? makeTime(time).valueOf() :
this.get('minInvestigatePeriod').valueOf();
- const end = type === 'start' ?
this.get('maxInvestigatePeriod').valueOf() : makeTime(time).valueOf();
-
- // Update for the date picker to be in sync
- this.set('anomalyRange', [makeTime(start).valueOf(),
makeTime(end).valueOf()]);
-
- // Investigation period changed on date picker. Update the slider's min
and max.
- let sliderOptions = type === 'start' ? { from:
this.get('minInvestigatePeriod').format('x') } : { to:
this.get('maxInvestigatePeriod').format('x') };
- this.get('slider').update(sliderOptions);
-
- // Update the display window's investiation period on the chart
- onChange(makeTime(start).valueOf(), makeTime(end).valueOf(),
compareMode);
- },
-
- onCompareMode(compareMode) {
- const { anomalyRange, onChange } = this.getProperties('anomalyRange',
'onChange');
- onChange(anomalyRange[0], anomalyRange[1], compareMode);
- },
-
- resetSlider() {
- const slider = this.get('slider');
- // RESET - reset slider to it's first values
- slider.reset();
- // get original investigation periods
- this.setProperties({
- minInvestigatePeriod: this.get('originalMinInvestigatePeriod'),
- maxInvestigatePeriod: this.get('originalMaxInvestigatePeriod')
- });
-
- // Update the slider, by calling it's update method
- this.get('slider').update({
- from: this.get('minInvestigatePeriod').format('x'),
- to: this.get('maxInvestigatePeriod').format('x')
- });
- }
-
- }
-});
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-slider/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-slider/template.hbs
deleted file mode 100644
index d8db1cd..0000000
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-slider/template.hbs
+++ /dev/null
@@ -1,78 +0,0 @@
-{{!-- <div class="col-xs-3">
- <label class="te-label te-label--small">Baseline
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the compare mode for computing the baseline in the charts
above and below. For example, "Wo2W" uses data from the analysis period shifted
by two weeks.
- {{/tooltip-on-element}}
- </span>
- </label>
- {{#power-select
- selected=compareModeFormatted
- options=compareModeOptions
- searchEnabled=false
- triggerId="select-compare-mode"
- onchange=(action "onCompareMode")
- as |mode|
- }}
- {{mode}}
- {{/power-select}}
-</div> --}}
-{{!-- <div class="col-xs-9"> --}}
-<div class="col-xs-12">
- <!-- Investigation range slider -->
- <div class="date-slider date-slider--offset" style="margin-right: 0;">
- <div class="date-slider__picker">
- <div class="date-slider__picker-item">
- <label class="te-label te-label--small">Investigation Period
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- Typically, this is your anomaly period. It is highlighted in
orange in the graph above. It also affects the data in views below.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="date-slider__picker-item">
- {{date-range-picker
- class="te-range-picker te-range-picker__from"
- singleDatePicker=true
- showDropdowns=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=5
- start=startFormattedOneWay
- end=startFormattedOneWay
- maxDate=maxDateFormatted
- ranges=rangeOptions
- format=timeFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onPickerRange" "start")
- }}
- </div>
- <div class="date-slider__picker-item">
- <label class="te-label te-label--small">to</label>
- </div>
- <div class="date-slider__picker-item">
- {{date-range-picker
- class="te-range-picker te-range-picker__to"
- singleDatePicker=true
- showDropdowns=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=5
- start=endFormattedOneWay
- end=endFormattedOneWay
- maxDate=maxDateFormatted
- ranges=rangeOptions
- format=timeFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onPickerRange" "end")
- }}
- </div>
- </div>
- <div class="range-slider">
- <input type="text" class="js-range-slider" value="" />
- </div>
- </div>
-</div>
diff --git a/thirdeye/thirdeye-frontend/config/environment.js
b/thirdeye/thirdeye-frontend/config/environment.js
index 2458b24..531ee61 100644
--- a/thirdeye/thirdeye-frontend/config/environment.js
+++ b/thirdeye/thirdeye-frontend/config/environment.js
@@ -37,7 +37,8 @@ module.exports = function(environment) {
docs: {
createAlert: "/link/to/create/alert/wiki",
detectionConfig: "/link/to/DetectionConfiguration/wiki",
- subscriptionConfig: "/link/to/NotificationConfiguration/wiki"
+ subscriptionConfig: "/link/to/NotificationConfiguration/wiki",
+ cubeWiki: "/link/to/cubeAlgorithm/wiki"
},
EmberENV: {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
