You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ji...@apache.org on 2019/02/28 19:51:02 UTC

[incubator-pinot] branch master updated: [TE] frondend - hide anomaly legend if the anomalies is too much. (#3896)

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 9791a3d  [TE] frondend - hide anomaly legend if the anomalies is too much. (#3896)
9791a3d is described below

commit 9791a3d0a2d6492b658f639be2e2ec1c5d8dbf53
Author: Jihao Zhang <ji...@linkedin.com>
AuthorDate: Thu Feb 28 11:50:57 2019 -0800

    [TE] frondend - hide anomaly legend if the anomalies is too much. (#3896)
    
    If the number of anomalies is above a threshold, hide the legend, so that the legend won't take too much space from the graph itself.
---
 .../app/pods/components/alert-details/component.js | 30 +++++++++++++++-------
 .../app/pods/self-serve/create-alert/template.hbs  |  2 --
 2 files changed, 21 insertions(+), 11 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 8e967f0..30b82e3 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/alert-details/component.js
@@ -40,6 +40,7 @@ const DEFAULT_ACTIVE_DURATION = '1m'; // setting this date range selection as de
 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 = ['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({
   anomaliesApiService: service('services/api/anomalies'),
@@ -263,26 +264,37 @@ export default Component.extend({
   ),
 
   series: computed(
-    'paginatedFilteredAnomalies',
+    'anomalies',
     'timeseries',
     'baseline',
     'analysisRange',
     function () {
       const {
-        metricUrn, paginatedFilteredAnomalies, timeseries, baseline
-      } = getProperties(this, 'metricUrn', 'paginatedFilteredAnomalies', 'timeseries',
+        metricUrn, anomalies, timeseries, baseline
+      } = getProperties(this, 'metricUrn', 'anomalies', 'timeseries',
         'baseline');
 
       const series = {};
 
-      if (!_.isEmpty(paginatedFilteredAnomalies)) {
+      if (!_.isEmpty(anomalies)) {
+
+        const anomaliesInGraph = anomalies.filter(anomaly => anomaly.metricUrn === metricUrn);
+        if (anomaliesInGraph.length > ANOMALY_LEGEND_THRESHOLD) {
+          this.setProperties({legend: {
+              show: false,
+              position: 'right'
+          }})
+        } else {
+          this.setProperties({legend: {
+              show: true,
+              position: 'right'
+            }})
 
-        paginatedFilteredAnomalies
-          .filter(anomaly => anomaly.metricUrn === metricUrn)
-          .forEach(anomaly => {
-            const key = anomaly.startDateStr;
+        }
+        anomaliesInGraph.forEach(anomaly => {
+            const key = this._formatAnomaly(anomaly);
             series[key] = {
-              timestamps: [anomaly.start, anomaly.end],
+              timestamps: [anomaly.startTime, anomaly.endTime],
               values: [1, 1],
               type: 'line',
               color: 'teal',
diff --git a/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/template.hbs b/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/template.hbs
index 228ae0a..cf785e0 100644
--- a/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/template.hbs
@@ -1,5 +1,4 @@
 <h1 class="te-title">Create Alert
-  {{#if (eq debug "show")}}
     {{#x-toggle
       value=isForm
       classNames="te-toggle te-toggle--form te-toggle--left report-toggle pull-right"
@@ -17,7 +16,6 @@
           <span class="te-label te-label--flush">Form</span>
         {{/toggle.label}}
     {{/x-toggle}}
-  {{/if}}
 </h1>
 <main class="alert-create card-container card-container--padded te-form">
   {{#if isForm}}


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org