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 bc2c066 [TE] frontend - harleyjj/rca - Phase 1 of custom baseline
selector (#5752)
bc2c066 is described below
commit bc2c0667a7df9c6c0f934eadc1389171f4e4a6c4
Author: Harley Jackson <hjack...@linkedin.com>
AuthorDate: Tue Jul 28 19:48:18 2020 -0700
[TE] frontend - harleyjj/rca - Phase 1 of custom baseline selector (#5752)
This PR allows the UI to lever the versatility of the RCA times series
endpoint to provide a broad range of baselines
Future addition to this modal will be a tab for selecting a previous range
by time stamp to compare to the current window.
---
.../rootcause-custom-baseline/component.js | 104 +++++++++++++++++++++
.../rootcause-custom-baseline/template.hbs | 53 +++++++++++
.../rootcause-select-comparison-range/component.js | 43 +++++----
.../rootcause-select-comparison-range/template.hbs | 16 ++++
thirdeye/thirdeye-frontend/app/styles/app.scss | 1 +
.../components/rootcause-custom-baseline.scss | 19 ++++
.../rootcause-select-comparison-range.scss | 7 ++
.../app/styles/components/te-modal.scss | 2 +-
8 files changed, 228 insertions(+), 17 deletions(-)
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-custom-baseline/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-custom-baseline/component.js
new file mode 100644
index 0000000..a1d5049
--- /dev/null
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-custom-baseline/component.js
@@ -0,0 +1,104 @@
+/**
+ * Component for "rootcause custom baseline" modal
+ * @module components/rootcause-custom-baseline
+ * @example
+ {{rootcause-custom-baseline}}
+ * @exports rootcause-custom-baseline
+ * @author hjackson
+ */
+
+import Component from '@ember/component';
+import {
+ set,
+ computed,
+ getProperties
+} from '@ember/object';
+
+const UNIT_OVER_UNIT = 'Unit over x units';
+const MEAN_UNIT = 'Mean of x units';
+const MEDIAN_UNIT = 'Median of x units';
+const MIN_UNIT = 'Min of x units';
+const MAX_UNIT = 'Max of x units';
+
+export default Component.extend({
+ tagName: 'main',
+ classNames: ['rootcause-custom-baseline-modal'],
+
+ selectedBaselineType: 'Unit over x units',
+
+ baselineTypes: [UNIT_OVER_UNIT, MEAN_UNIT, MEDIAN_UNIT, MAX_UNIT, MIN_UNIT],
+
+ selectedTimeUnit: 'Week',
+
+ timeUnits: ['Month', 'Week', 'Day', 'Hour'],
+
+ selectedNumber: 1,
+
+ /**
+ * Baseline derived from selections made by user
+ * @returns {String} baseline to request
+ */
+ configuredBaseline: computed(
+ 'selectedBaselineType',
+ 'selectedTimeUnit',
+ 'selectedNumber',
+ function() {
+ const {
+ selectedBaselineType,
+ selectedTimeUnit,
+ selectedNumber
+ } = getProperties(this, 'selectedBaselineType', 'selectedTimeUnit',
'selectedNumber');
+ const unitAbbreviation = selectedTimeUnit.charAt(0).toLowerCase();
+ switch(selectedBaselineType) {
+ case UNIT_OVER_UNIT: {
+ return `${unitAbbreviation}o${selectedNumber}${unitAbbreviation}`;
+ }
+ case MEAN_UNIT: {
+ return `mean${selectedNumber}${unitAbbreviation}`;
+ }
+ case MEDIAN_UNIT: {
+ return `median${selectedNumber}${unitAbbreviation}`;
+ }
+ case MAX_UNIT: {
+ return `max${selectedNumber}${unitAbbreviation}`;
+ }
+ case MIN_UNIT: {
+ return `min${selectedNumber}${unitAbbreviation}`;
+ }
+ default: {
+ return 'wo1w';
+ }
+ }
+ }
+ ),
+
+ actions: {
+
+ /**
+ * @method onSelectBaselineType
+ * @param {String} baselineType - the baseline type selected by user
+ */
+ onSelectBaselineType(baselineType) {
+ set(this, 'selectedBaselineType', baselineType);
+ this.get('bubbleBaseline')(this.get('configuredBaseline'));
+ },
+
+ /**
+ * @method onSelectTimeUnit
+ * @param {String} timeUnit - the unit of time selected by the user
+ */
+ onSelectTimeUnit(timeUnit) {
+ set(this, 'selectedTimeUnit', timeUnit);
+ this.get('bubbleBaseline')(this.get('configuredBaseline'));
+ },
+
+ /**
+ * @method onInputNumber
+ * @param {Number} numericValue - integer
+ */
+ onInputNumber(numericValue) {
+ set(this, 'selectedNumber', numericValue);
+ this.get('bubbleBaseline')(this.get('configuredBaseline'));
+ }
+ }
+});
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-custom-baseline/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-custom-baseline/template.hbs
new file mode 100644
index 0000000..409e17b
--- /dev/null
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-custom-baseline/template.hbs
@@ -0,0 +1,53 @@
+<fieldset class="te-form__section te-form__section--micro row">
+ <div class="te-form__group col-xs-12 baseline-type">
+ <label for="dimension-select-include" class="control-label te-label
te-label--small">
+ Baseline Type
+ </label>
+ <div class="btn-group">
+ {{#each baselineTypes as |type|}}
+ {{#radio-button value=type groupValue=selectedBaselineType
changed=(action "onSelectBaselineType")}}
+ {{type}}
+ {{/radio-button}}
+ {{/each}}
+ </div>
+ </div>
+</fieldset>
+
+<fieldset class="te-form__section te-form__section--micro row" id="time-unit">
+ <div class="te-form__group col-xs-12 baseline-type">
+ <label for="dimension-select-include" class="control-label te-label
te-label--small">
+ Unit of Time
+ </label>
+ <div class="btn-group">
+ {{#each timeUnits as |unit|}}
+ {{#radio-button value=unit groupValue=selectedTimeUnit changed=(action
"onSelectTimeUnit")}}
+ {{unit}}
+ {{/radio-button}}
+ {{/each}}
+ </div>
+ </div>
+</fieldset>
+
+<fieldset class="te-form__section te-form__section--micro row"
id="dimensions-settings">
+ <div class="te-form__group te-form__group--hz-micro col-xs-6">
+ <label for="num-top-contibutors" class="control-label te-label
te-label--small">
+ Number (x) of {{selectedTimeUnit}}s
+ </label>
+ {{input
+ type="number"
+ min="1"
+ step="1"
+ id="num-units"
+ class="form-control te-input"
+ focus-out=(action "onInputNumber")
+ value=selectedNumber
+ }}
+ <div class="te-form__sub-label te-form__sub-label--micro">Only accepts
integers greater than zero</div>
+ </div>
+</fieldset>
+
+<fieldset class="te-form__section te-form__section--micro row"
id="dimensions-error">
+ <div class="te-form__group col-xs-12">
+ <h2>Baseline configured as {{configuredBaseline}}</h2>
+ </div>
+</fieldset>
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-comparison-range/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-comparison-range/component.js
index a766bee..2a2925b 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-comparison-range/component.js
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-comparison-range/component.js
@@ -1,4 +1,4 @@
-import { computed } from '@ember/object';
+import { computed, set } from '@ember/object';
import Component from '@ember/component';
import $ from 'jquery';
import {
@@ -37,6 +37,8 @@ export default Component.extend({
onChange: null, // func (start, end, compareMode)
slider: null,
sliderOptionsCache: null,
+ showBaselineModal: false,
+ customBaselineValue: 'wo1w',
rangeOptions: {
'Last hour': [makeTime().subtract(1, 'hours').startOf('hour'),
makeTime().startOf('hours').add(1, 'hours')],
@@ -48,23 +50,15 @@ export default Component.extend({
compareModeOptions: [
{
groupName: 'Weekly',
- options: [ 'wo1w', 'wo2w', 'wo3w', 'wo4w', 'mean4w', 'median4w',
'min4w', 'max4w' ]
+ options: [ 'wo1w', 'wo2w', 'wo3w', 'mean4w', 'median4w' ]
},
{
- groupName: 'Hourly',
- options: [ 'ho1h', 'ho2h', 'ho3h', 'ho6h', 'mean6h', 'median6h',
'min6h', 'max6h' ]
- },
- {
- groupName: 'Daily',
- options: [ 'do1d', 'do2d', 'do3d', 'do4d', 'mean4d', 'median4d',
'min4d', 'max4d' ]
- },
- {
- groupName: 'Monthly',
- options: [ 'mo1m', 'mo2m', 'mo3m', 'mo6m', 'mean6m', 'median6m',
'min6m', 'max6m' ]
+ groupName: 'Algorithm',
+ options: [ 'predicted' ]
},
{
- groupName: 'Algorithm',
- options: [ 'predicted', 'none' ]
+ groupName: 'Custom Baseline Selector',
+ options: ['custom']
}
],
@@ -185,9 +179,26 @@ export default Component.extend({
onChange(makeTime(start).valueOf(), makeTime(end).valueOf(),
compareMode);
},
+ updateCustomBaseline(baseline) {
+ set(this, 'customBaselineValue', baseline);
+ },
+
+ onBaseline() {
+ set(this, 'showBaselineModal', false);
+ this.send('onCompareMode', this.get('customBaselineValue'));
+ },
+
+ onCancel() {
+ set(this, 'showBaselineModal', false);
+ },
+
onCompareMode(compareMode) {
- const { anomalyRange, onChange } = this.getProperties('anomalyRange',
'onChange');
- onChange(anomalyRange[0], anomalyRange[1], compareMode);
+ if (compareMode === 'custom') {
+ set(this, 'showBaselineModal', true);
+ } else {
+ const { anomalyRange, onChange } = this.getProperties('anomalyRange',
'onChange');
+ onChange(anomalyRange[0], anomalyRange[1], compareMode);
+ }
}
}
});
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-comparison-range/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-comparison-range/template.hbs
index 0d4ab24..ea5b962 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-comparison-range/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-select-comparison-range/template.hbs
@@ -18,6 +18,22 @@
{{mode}}
{{/power-select}}
</div>
+
+{{!-- Custom Baseline Modal --}}
+{{#te-modal
+ isMicroModal=true
+ cancelButtonText="Cancel"
+ submitButtonText="Submit"
+ submitAction=(action "onBaseline")
+ cancelAction=(action "onCancel")
+ isShowingModal=showBaselineModal
+ headerText="Custom Baseline"
+}}
+ {{rootcause-custom-baseline
+ bubbleBaseline=(action "updateCustomBaseline")
+ }}
+{{/te-modal}}
+
<div class="col-xs-9">
<!-- Investigation range slider -->
<div class="date-slider date-slider--offset">
diff --git a/thirdeye/thirdeye-frontend/app/styles/app.scss
b/thirdeye/thirdeye-frontend/app/styles/app.scss
index cca77e1..759a85c 100644
--- a/thirdeye/thirdeye-frontend/app/styles/app.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/app.scss
@@ -50,6 +50,7 @@ body {
@import 'components/rootcause-select-comparison-range';
@import 'components/rootcause-select-metric';
@import 'components/rootcause-chart';
+@import 'components/rootcause-custom-baseline';
@import 'components/rootcause-trend';
@import 'components/rootcause-dimensions';
@import 'components/rootcause-callgraph';
diff --git
a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-custom-baseline.scss
b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-custom-baseline.scss
new file mode 100644
index 0000000..85bb2bf
--- /dev/null
+++
b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-custom-baseline.scss
@@ -0,0 +1,19 @@
+.baseline-type input[type="radio"] {
+ opacity: 0;
+ position: fixed;
+ width: 0;
+}
+
+.baseline-type .ember-radio-button{
+ display: inline-block;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+ color: #333333;
+ border-radius: 4px;
+ margin-left: -1px;
+ margin-right: -1px;
+}
+
+.baseline-type .checked {
+ background-color:#e6e6e6;
+}
diff --git
a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-select-comparison-range.scss
b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-select-comparison-range.scss
index 13753d4..a17c530 100644
---
a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-select-comparison-range.scss
+++
b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-select-comparison-range.scss
@@ -51,3 +51,10 @@
}
}
+
+.rootcause-custom-baseline-modal {
+ height: auto;
+ margin-top: 0;
+ border: none;
+ padding: 20px 24px 12px 24px;
+}
diff --git a/thirdeye/thirdeye-frontend/app/styles/components/te-modal.scss
b/thirdeye/thirdeye-frontend/app/styles/components/te-modal.scss
index 969f75b..39d9b6d 100644
--- a/thirdeye/thirdeye-frontend/app/styles/components/te-modal.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/components/te-modal.scss
@@ -167,5 +167,5 @@
}
.te-modal-micro {
- width: 560px;
+ width: 680px;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@pinot.apache.org
For additional commands, e-mail: commits-h...@pinot.apache.org
