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 7832abf [TE] frontend - harleyjj/alert-details - add duration to
anomaly table and hide preview when yaml field updated (#3823)
7832abf is described below
commit 7832abf7eaa42bac85455f9fffd05ac4ce01d494
Author: Harley Jackson <harleyy...@gmail.com>
AuthorDate: Wed Feb 13 16:11:32 2019 -0800
[TE] frontend - harleyjj/alert-details - add duration to anomaly table and
hide preview when yaml field updated (#3823)
---
.../app/pods/components/alert-details/component.js | 11 +-
.../app/pods/components/alert-details/template.hbs | 384 +++++++++++----------
2 files changed, 199 insertions(+), 196 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 dc647a9..9b5d3d4 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
@@ -18,6 +18,7 @@ import { computed, observer, set, get, getProperties } from
'@ember/object';
import { later } from '@ember/runloop';
import { checkStatus, humanizeFloat } from 'thirdeye-frontend/utils/utils';
import { colorMapping, toColor, makeTime } from
'thirdeye-frontend/utils/rca-utils';
+import { getFormatedDuration } from 'thirdeye-frontend/utils/anomaly';
import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';
import floatToPercent from 'thirdeye-frontend/utils/float-to-percent';
@@ -293,8 +294,9 @@ export default Component.extend({
anomalies.forEach(a => {
let tableRow = {
number: i,
- start: a,
+ start: a.startTime,
startDateStr: this._formatAnomaly(a),
+ durationStr: getFormatedDuration(a.startTime, a.endTime),
shownCurrent: humanizeFloat(a.avgCurrentVal),
shownBaseline: humanizeFloat(a.avgBaselineVal),
change: ((a.avgCurrentVal/a.avgBaselineVal - 1.0) * 100.0),
@@ -603,7 +605,8 @@ export default Component.extend({
getPreview() {
this.setProperties({
isLoading: true,
- showPreview: true
+ showPreview: true,
+ disableYamlSave: true
});
this._fetchAnomalies();
},
@@ -646,9 +649,5 @@ export default Component.extend({
//On sort, set table to first pagination page
this.set('currentPage', 1);
},
-
- refreshPreview(){
- set(this, 'disableYamlSave', true);
- }
}
});
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 c26f846..1a323b3 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
@@ -15,213 +15,217 @@
{{#if isLoading}}
{{ember-spinner scale=0.5 rotate=10 speed='1.1'
color='#3498DB'}}Please wait while we compile the data.
{{else}}
- {{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")
- }}
- <div class="te-horizontal-cards">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed
anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- <div class="te-horizontal-cards__container">
- {{!-- Alert anomaly stats cards --}}
- {{stats-cards stats=stats}}
- </div>
-
- {{#if repRunStatus}}
- <p class="te-self-serve__block-subtext
te-self-serve__block-subtext--normal">Replay in progress. Please check back
later...</p>
- {{/if}}
- </div>
- {{timeseries-chart
- series=series
- colorMapping=colorMapping
- axis=axis
- zoom=zoom
- legend=legend
- }}
- {{#if anomalies}}
- {{!-- Baseline type selector --}}
+ {{#if disableYamlSave}}
{{range-pill-selectors
- title="Baseline"
- timeRangeOptions=baselineOptions
- selectAction=(action "onBaselineOptionClick")
+ title="Showing"
+ uiDateFormat=pill.uiDateFormat
+ activeRangeEnd=pill.activeRangeEnd
+ activeRangeStart=pill.activeRangeStart
+ timeRangeOptions=pill.timeRangeOptions
+ timePickerIncrement=pill.timePickerIncrement
+ predefinedRanges=pill.predefinedRanges
+ selectAction=(action "onRangeSelection")
+ }}
+ <div class="te-horizontal-cards">
+ <h4 class="te-self-serve__block-title">
+ <label for="select-dimension" class="control-label te-label">
+ Alert Performance
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ All estimated performance numbers are based on reviewed
anomalies.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </h4>
+ <div class="te-horizontal-cards__container">
+ {{!-- Alert anomaly stats cards --}}
+ {{stats-cards stats=stats}}
+ </div>
+
+ {{#if repRunStatus}}
+ <p class="te-self-serve__block-subtext
te-self-serve__block-subtext--normal">Replay in progress. Please check back
later...</p>
+ {{/if}}
+ </div>
+ {{timeseries-chart
+ series=series
+ colorMapping=colorMapping
+ axis=axis
+ zoom=zoom
+ legend=legend
}}
- {{!-- Alert anomaly table --}}
- <div class="te-block-container">
- <table class="te-anomaly-table">
- {{#if anomalies}}
- <thead>
- <tr class="te-anomaly-table__row te-anomaly-table__head">
- <th class="te-anomaly-table__cell-head
te-anomaly-table__cell-head--left">
- <a class="te-anomaly-table__cell-link" {{action
"toggleSortDirection" "number"}}>#
- <i class="te-anomaly-table__icon glyphicon {{if
sortColumnNumberUp "glyphicon-menu-down" "glyphicon-menu-up"}}"></i>
- </a>
- </th>
- <th class="te-anomaly-table__cell-head
te-anomaly-table__cell-head--left">
- <a class="te-anomaly-table__cell-link" {{action
"toggleSortDirection" "start"}}>
- Start/Duration (PDT)
- <i class="te-anomaly-table__icon glyphicon {{if
sortColumnStartUp "glyphicon-menu-up" "glyphicon-menu-down"}}"></i>
- </a>
- </th>
- {{#if alertHasDimensions}}
- <th class="te-anomaly-table__cell-head
te-anomaly-table__cell-head--fixed">Dimensions</th>
- {{/if}}
- <th class="te-anomaly-table__cell-head">
- <a class="te-anomaly-table__cell-link" {{action
"toggleSortDirection" "change"}}>
- Average Current / Average Predicted
- <i class="te-anomaly-table__icon glyphicon {{if
sortColumnChangeUp "glyphicon-menu-up" "glyphicon-menu-down"}}"></i>
- </a>
- </th>
- {{#if notPreview}}
+ {{#if anomalies}}
+ {{!-- Baseline type selector --}}
+ {{range-pill-selectors
+ title="Baseline"
+ timeRangeOptions=baselineOptions
+ selectAction=(action "onBaselineOptionClick")
+ }}
+ {{!-- Alert anomaly table --}}
+ <div class="te-block-container">
+ <table class="te-anomaly-table">
+ {{#if anomalies}}
+ <thead>
+ <tr class="te-anomaly-table__row te-anomaly-table__head">
+ <th class="te-anomaly-table__cell-head
te-anomaly-table__cell-head--left">
+ <a class="te-anomaly-table__cell-link" {{action
"toggleSortDirection" "number"}}>#
+ <i class="te-anomaly-table__icon glyphicon {{if
sortColumnNumberUp "glyphicon-menu-down" "glyphicon-menu-up"}}"></i>
+ </a>
+ </th>
+ <th class="te-anomaly-table__cell-head
te-anomaly-table__cell-head--left">
+ <a class="te-anomaly-table__cell-link" {{action
"toggleSortDirection" "start"}}>
+ Start/Duration (PDT)
+ <i class="te-anomaly-table__icon glyphicon {{if
sortColumnStartUp "glyphicon-menu-up" "glyphicon-menu-down"}}"></i>
+ </a>
+ </th>
+ {{#if alertHasDimensions}}
+ <th class="te-anomaly-table__cell-head
te-anomaly-table__cell-head--fixed">Dimensions</th>
+ {{/if}}
<th class="te-anomaly-table__cell-head">
- <a class="te-anomaly-table__cell-link" {{action
"toggleSortDirection" "resolution"}}>
- Resolution
- <i class="te-anomaly-table__icon glyphicon {{if
sortColumnResolutionUp "glyphicon-menu-up" "glyphicon-menu-down"}}"></i>
+ <a class="te-anomaly-table__cell-link" {{action
"toggleSortDirection" "change"}}>
+ Average Current / Average Predicted
+ <i class="te-anomaly-table__icon glyphicon {{if
sortColumnChangeUp "glyphicon-menu-up" "glyphicon-menu-down"}}"></i>
</a>
</th>
- <th class="te-anomaly-table__cell-head"></th>
- {{/if}}
- </tr>
- </thead>
- {{/if}}
- <tbody>
- {{#each paginatedFilteredAnomalies as |anomaly|}}
- <tr class="te-anomaly-table__row">
- <td class="te-anomaly-table__cell
te-anomaly-table__cell--index">{{anomaly.number}}</td>
- <td class="te-anomaly-table__cell">
- <ul class="te-anomaly-table__list
te-anomaly-table__list--left">
- <li class="te-anomaly-table__list-item
te-anomaly-table__list-item--stronger">
- {{#if notPreview}}
- <a target="_blank" class="te-anomaly-table__link"
href="/app/#/rootcause?anomalyId={{anomaly.anomalyId}}">
- {{anomaly.startDateStr}}
- </a>
- {{else}}
- {{anomaly.startDateStr}}
- {{/if}}
- </li>
- <li class="te-anomaly-table__list-item
te-anomaly-table__list-item--lighter">{{anomaly.durationStr}}</li>
- </ul>
- </td>
- {{#if alertHasDimensions}}
+ {{#if notPreview}}
+ <th class="te-anomaly-table__cell-head">
+ <a class="te-anomaly-table__cell-link" {{action
"toggleSortDirection" "resolution"}}>
+ Resolution
+ <i class="te-anomaly-table__icon glyphicon {{if
sortColumnResolutionUp "glyphicon-menu-up" "glyphicon-menu-down"}}"></i>
+ </a>
+ </th>
+ <th class="te-anomaly-table__cell-head"></th>
+ {{/if}}
+ </tr>
+ </thead>
+ {{/if}}
+ <tbody>
+ {{#each paginatedFilteredAnomalies as |anomaly|}}
+ <tr class="te-anomaly-table__row">
+ <td class="te-anomaly-table__cell
te-anomaly-table__cell--index">{{anomaly.number}}</td>
<td class="te-anomaly-table__cell">
- <ul class="te-anomaly-table__list">
- {{#each anomaly.dimensionList as |dimension|}}
- <li class="te-anomaly-table__list-item
te-anomaly-table__list-item--smaller" title="{{dimension.dimensionVal}}">
- {{dimension.dimensionKey}}: <span
class="stronger">{{dimension.dimensionVal}}</span>
- </li>
- {{else}}
- -
- {{/each}}
+ <ul class="te-anomaly-table__list
te-anomaly-table__list--left">
+ <li class="te-anomaly-table__list-item
te-anomaly-table__list-item--stronger">
+ {{#if notPreview}}
+ <a target="_blank"
class="te-anomaly-table__link"
href="/app/#/rootcause?anomalyId={{anomaly.anomalyId}}">
+ {{anomaly.startDateStr}}
+ </a>
+ {{else}}
+ {{anomaly.startDateStr}}
+ {{/if}}
+ </li>
+ <li class="te-anomaly-table__list-item
te-anomaly-table__list-item--lighter">{{anomaly.durationStr}}</li>
</ul>
</td>
- {{/if}}
- <td class="te-anomaly-table__cell">
- <ul class="te-anomaly-table__list">
- <li>{{anomaly.shownCurrent}} /
{{anomaly.shownBaseline}}</li>
- <li class="te-anomaly-table__value-label
te-anomaly-table__value-label--{{calculate-direction anomaly.shownChangeRate}}">
- {{#if (not anomaly.isNullChangeRate)}}
- ({{anomaly.shownChangeRate}}%)
- {{else}}
- (N/A)
- {{/if}}
- </li>
- </ul>
- </td>
- {{#if notPreview}}
+ {{#if alertHasDimensions}}
+ <td class="te-anomaly-table__cell">
+ <ul class="te-anomaly-table__list">
+ {{#each anomaly.dimensionList as |dimension|}}
+ <li class="te-anomaly-table__list-item
te-anomaly-table__list-item--smaller" title="{{dimension.dimensionVal}}">
+ {{dimension.dimensionKey}}: <span
class="stronger">{{dimension.dimensionVal}}</span>
+ </li>
+ {{else}}
+ -
+ {{/each}}
+ </ul>
+ </td>
+ {{/if}}
<td class="te-anomaly-table__cell">
- {{#if renderStatusIcon}}
- {{#if anomaly.showResponseSaved}}
- <i class="te-anomaly-table__icon--status
glyphicon glyphicon-ok-circle"></i>
+ <ul class="te-anomaly-table__list">
+ <li>{{anomaly.shownCurrent}} /
{{anomaly.shownBaseline}}</li>
+ <li class="te-anomaly-table__value-label
te-anomaly-table__value-label--{{calculate-direction anomaly.shownChangeRate}}">
+ {{#if (not anomaly.isNullChangeRate)}}
+ ({{anomaly.shownChangeRate}}%)
+ {{else}}
+ (N/A)
{{/if}}
- {{#if anomaly.showResponseFailed}}
- <i class="te-anomaly-table__icon--status
te-anomaly-table__icon--error glyphicon glyphicon-remove-circle"></i>
+ </li>
+ </ul>
+ </td>
+ {{#if notPreview}}
+ <td class="te-anomaly-table__cell">
+ {{#if renderStatusIcon}}
+ {{#if anomaly.showResponseSaved}}
+ <i class="te-anomaly-table__icon--status
glyphicon glyphicon-ok-circle"></i>
+ {{/if}}
+ {{#if anomaly.showResponseFailed}}
+ <i class="te-anomaly-table__icon--status
te-anomaly-table__icon--error glyphicon glyphicon-remove-circle"></i>
+ {{/if}}
{{/if}}
- {{/if}}
- {{#if anomaly.isUserReported}}
- <div class="te-anomaly-table__text
te-anomaly-table__text--explore">User Reported</div>
- <div class="te-anomaly-table__comment">
- <i class="glyphicon glyphicon-th-list"></i>
- {{#tooltip-on-element
class="te-anomaly-table__tooltip"}}
- {{anomaly.anomalyFeedbackComments}}
- {{/tooltip-on-element}}
+ {{#if anomaly.isUserReported}}
+ <div class="te-anomaly-table__text
te-anomaly-table__text--explore">User Reported</div>
+ <div class="te-anomaly-table__comment">
+ <i class="glyphicon glyphicon-th-list"></i>
+ {{#tooltip-on-element
class="te-anomaly-table__tooltip"}}
+ {{anomaly.anomalyFeedbackComments}}
+ {{/tooltip-on-element}}
+ </div>
+ {{else}}
+ {{#power-select
+ triggerId=anomaly.anomalyId
+ triggerClass="te-anomaly-table__select"
+ options=responseOptions
+ searchEnabled=false
+ selected=(get labelMap anomaly.anomalyFeedback)
+ onchange=(action "onChangeAnomalyResponse"
anomaly)
+ as |response|
+ }}
+ {{response}}
+ {{/power-select}}
+ {{/if}}
+ </td>
+ <td class="te-anomaly-table__cell
te-anomaly-table__cell--feedback">
+ <div class="te-anomaly-table__link-wrapper">
+ {{#link-to 'rootcause' (query-params
anomalyId=anomaly.anomalyId) target="_blank" class="te-anomaly-table__link"}}
+ Investigate
+ {{/link-to}}
</div>
- {{else}}
- {{#power-select
- triggerId=anomaly.anomalyId
- triggerClass="te-anomaly-table__select"
- options=responseOptions
- searchEnabled=false
- selected=(get labelMap anomaly.anomalyFeedback)
- onchange=(action "onChangeAnomalyResponse"
anomaly)
- as |response|
- }}
- {{response}}
- {{/power-select}}
- {{/if}}
- </td>
- <td class="te-anomaly-table__cell
te-anomaly-table__cell--feedback">
- <div class="te-anomaly-table__link-wrapper">
- {{#link-to 'rootcause' (query-params
anomalyId=anomaly.anomalyId) target="_blank" class="te-anomaly-table__link"}}
- Investigate
- {{/link-to}}
- </div>
- </td>
- {{/if}}
- </tr>
- {{/each}}
- </tbody>
- </table>
- </div>
+ </td>
+ {{/if}}
+ </tr>
+ {{/each}}
+ </tbody>
+ </table>
+ </div>
- {{!--pagination--}}
- {{#if (gt pagesNum 1)}}
- <nav class="text-center" aria-label="Page navigation">
- <ul class="pagination">
- <li class={{if (eq currentPage 1) 'active disabled'}} >
- <a href="#" {{action "onPaginationClick" 1}}
aria-label="First">
- <span aria-hidden="true">First</span>
- </a>
- </li>
- <li class={{if (eq currentPage 1) 'active disabled'}}>
- <a href="#" {{action "onPaginationClick" "previous"}}
aria-label="Previous">
- <span aria-hidden="true">Previous</span>
- </a>
- </li>
- {{#each viewPages as |page|}}
- <li class={{if (eq page currentPage) 'active'}}><a href="#"
{{action "onPaginationClick" page}}>{{page}}</a></li>
- {{/each}}
- <li class={{if (eq currentPage pagesNum) 'disabled'}} >
- <a href="#" {{action "onPaginationClick" "next"}}
aria-label="Next">
- <span aria-hidden="true">Next</span>
- </a>
- </li>
- <li class={{if (eq currentPage pagesNum) 'disabled'}} >
- <a href="#" {{action "onPaginationClick" pagesNum}}
aria-label="Last">
- <span aria-hidden="true">Last</span>
- </a>
- </li>
- </ul>
- </nav>
- {{/if}}
+ {{!--pagination--}}
+ {{#if (gt pagesNum 1)}}
+ <nav class="text-center" aria-label="Page navigation">
+ <ul class="pagination">
+ <li class={{if (eq currentPage 1) 'active disabled'}} >
+ <a href="#" {{action "onPaginationClick" 1}}
aria-label="First">
+ <span aria-hidden="true">First</span>
+ </a>
+ </li>
+ <li class={{if (eq currentPage 1) 'active disabled'}}>
+ <a href="#" {{action "onPaginationClick" "previous"}}
aria-label="Previous">
+ <span aria-hidden="true">Previous</span>
+ </a>
+ </li>
+ {{#each viewPages as |page|}}
+ <li class={{if (eq page currentPage) 'active'}}><a
href="#" {{action "onPaginationClick" page}}>{{page}}</a></li>
+ {{/each}}
+ <li class={{if (eq currentPage pagesNum) 'disabled'}} >
+ <a href="#" {{action "onPaginationClick" "next"}}
aria-label="Next">
+ <span aria-hidden="true">Next</span>
+ </a>
+ </li>
+ <li class={{if (eq currentPage pagesNum) 'disabled'}} >
+ <a href="#" {{action "onPaginationClick" pagesNum}}
aria-label="Last">
+ <span aria-hidden="true">Last</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ {{/if}}
+ {{/if}}
+ {{else}}
+ <div class="yaml-editor-msg">Alert configuration has changed.</div>
{{/if}}
{{/if}}
- {{else}}
+ {{else}}
{{#if disablePreviewButton}}
<p>Enter YAML configuration to enable preview.</p>
{{/if}}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@pinot.apache.org
For additional commands, e-mail: commits-h...@pinot.apache.org
