Anomaly detector: option for disabling upper / lower bound hastic/hastic-server#701 (#350)

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -551,19 +551,18 @@ export class AnalyticController {
     if(response === null) {
       return [];
     }
-    const hsrSerie = {
+
+    let series: any[] = [{
       ...response.hsr,
       color: ANALYTIC_UNIT_COLORS[0],
       // TODO: render it separately from Metric series
       overrides: [
         { alias: 'HSR', linewidth: 3, fill: 0 }
       ]
-    };
-
-    if(response.lowerBound !== undefined && response.upperBound !== undefined) {
+    }];
+    if(response.lowerBound !== undefined) {
       // TODO: looks bad
-      return [
-        {
+      series.push({
         target: '[AnomalyDetector]: lower bound',
         datapoints: response.lowerBound.datapoints,
         color: ANALYTIC_UNIT_COLORS[1],
@@ -573,23 +572,25 @@ export class AnalyticController {
           fill: 0,
           legend: false
         }]
-        },
-        {
+      });
+    }
+
+    if(response.upperBound !== undefined) {
+      series.push({
         target: '[AnomalyDetector]: upper bound',
         datapoints: response.upperBound.datapoints,
         color: ANALYTIC_UNIT_COLORS[1],
         overrides: [{
           alias: '[AnomalyDetector]: upper bound',
           linewidth: 1,
-            fill: 0,
-            fillBelowTo: '[AnomalyDetector]: lower bound',
+          fill: response.lowerBound === undefined ? 1 : 0,
+          fillBelowTo: response.lowerBound === undefined ? '' : '[AnomalyDetector]: lower bound',
           legend: false
         }]
-        },
-        hsrSerie
-      ];
+      });
     }
-    return [hsrSerie];
+
+    return series;
   }
 
   get inspectedAnalyticUnit(): AnalyticUnit | null {

src/panel/graph_panel/graph_ctrl.ts

@@ -8,6 +8,7 @@ import { DataProcessor } from './data_processor';
 import { MetricExpanded } from './models/metric';
 import { DatasourceRequest } from './models/datasource';
 import { AnalyticUnitId, AnalyticUnit, LabelingMode } from './models/analytic_units/analytic_unit';
+import { BOUND_TYPES } from './models/analytic_units/anomaly_analytic_unit';
 import { AnalyticService } from './services/analytic_service';
 import { AnalyticController } from './controllers/analytic_controller';
 import { HasticPanelInfo } from './models/hastic_panel_info';
@@ -809,6 +810,10 @@ class GraphCtrl extends MetricsPanelCtrl {
 
   get renderError(): boolean { return this._renderError; }
   set renderError(value: boolean) { this._renderError = value; }
+
+  get boundTypes() {
+    return BOUND_TYPES;
+  }
 }
 
 export { GraphCtrl, GraphCtrl as PanelCtrl };

src/panel/graph_panel/models/analytic_units/anomaly_analytic_unit.ts

@@ -8,6 +8,18 @@ type TimePeriod = {
   unit: string
 };
 
+enum Bound {
+  NONE = 'NONE',
+  UPPER = 'UPPER',
+  LOWER = 'LOWER'
+};
+
+export const BOUND_TYPES = [
+  { name: 'None', value: Bound.NONE },
+  { name: 'Upper', value: Bound.UPPER },
+  { name: 'Lower', value: Bound.LOWER }
+];
+
 const DEFAULTS = {
   detectorType: DetectorType.ANOMALY,
   type: 'ANOMALY',
@@ -17,7 +29,8 @@ const DEFAULTS = {
   seasonalityPeriod: {
     value: 0,
     unit: 'seconds'
-  }
+  },
+  disableBound: Bound.NONE
 };
 
 const LABELING_MODES = [
@@ -39,7 +52,8 @@ export class AnomalyAnalyticUnit extends AnalyticUnit {
       alpha: this.alpha,
       confidence: this.confidence,
       seasonality: this.seasonality,
-      seasonalityPeriod: this.seasonalityPeriod
+      seasonalityPeriod: this.seasonalityPeriod,
+      disableBound: this.disableBound
     };
   }
 
@@ -58,6 +72,9 @@ export class AnomalyAnalyticUnit extends AnalyticUnit {
   set seasonalityPeriod(val: TimePeriod) { this._serverObject.seasonalityPeriod = val; }
   get seasonalityPeriod(): TimePeriod { return this._serverObject.seasonalityPeriod; }
 
+  set disableBound(val: Bound) { this._serverObject.disableBound = val; }
+  get disableBound(): Bound { return this._serverObject.disableBound; }
+
   // TODO: merge seasonality and hasSeasonality
   set hasSeasonality(val: boolean) {
     if(val) {

src/panel/graph_panel/partials/analytic_unit.html

@@ -146,3 +146,19 @@
     <div class="gf-form-label gf-form-label--grow"></div>
   </div>
 </div>
+
+<div class="gf-form-inline" ng-if="analyticUnit.detectorType === 'anomaly'">
+  <div class="gf-form">
+    <label class="gf-form-label query-keyword width-8"> Disable bound </label>
+    <div class="gf-form-select-wrapper">
+      <select class="gf-form-input width-12"
+        ng-model="analyticUnit.disableBound"
+        ng-change="ctrl.onAnalyticUnitChange(analyticUnit)"
+        ng-options="bound.value as bound.name for bound in ctrl.boundTypes"
+      />
+    </div>
+  </div>
+  <div class="gf-form gf-form--grow">
+    <div class="gf-form-label gf-form-label--grow"></div>
+  </div>
+</div>