Alerting web hooks tab hastic version #101 (#104)

* Add Webhooks tab

* Remove old unused method

* Change alert status and send it to server

src/controllers/analytic_controller.ts

@@ -330,6 +330,11 @@ export class AnalyticController {
     }
   }
 
+  async toggleAnalyticUnitAlert(analyticUnit: AnalyticUnit) {
+    analyticUnit.alert = analyticUnit.alert ? true : false;
+    await this._analyticService.setAnalyticUnitAlert(analyticUnit);
+  }
+
   private async _runStatusWaiter(analyticUnit: AnalyticUnit) {
     if(analyticUnit === undefined || analyticUnit === null) {
       throw new Error('analyticUnit not defined');

src/models/analytic_unit.ts

@@ -37,7 +37,10 @@ export class AnalyticUnit {
       this._panelObject = {};
     }
     _.defaults(this._panelObject, {
-      name: 'AnalyticUnitName', confidence: 0.2, color: ANALYTIC_UNIT_COLORS[0], type: 'GENERAL'
+      name: 'AnalyticUnitName',
+      color: ANALYTIC_UNIT_COLORS[0],
+      type: 'GENERAL',
+      alert: false
     });
 
     //this._metric = new Metric(_panelObject.metric);
@@ -58,6 +61,9 @@ export class AnalyticUnit {
   set color(value: string) { this._panelObject.color = value; }
   get color(): string { return this._panelObject.color; }
 
+  set alert(value: boolean) { this._panelObject.alert = value; }
+  get alert(): boolean { return this._panelObject.alert; }
+
   get selected(): boolean { return this._selected; }
   set selected(value: boolean) { this._selected = value; }
 

src/module.ts

@@ -254,10 +254,11 @@ class GraphCtrl extends MetricsPanelCtrl {
 
     const partialPath = this.panelPath + 'partials';
     this.addEditorTab('Analytics', `${partialPath}/tab_analytics.html`, 2);
-    this.addEditorTab('Axes', axesEditorComponent, 3);
+    this.addEditorTab('Webhooks', `${partialPath}/tab_webhooks.html`, 3);
-    this.addEditorTab('Legend', `${partialPath}/tab_legend.html`, 4);
+    this.addEditorTab('Axes', axesEditorComponent, 4);
-    this.addEditorTab('Display', `${partialPath}/tab_display.html`, 5);
+    this.addEditorTab('Legend', `${partialPath}/tab_legend.html`, 5);
-    this.addEditorTab('Plugin info', `${partialPath}/tab_info.html`, 6);
+    this.addEditorTab('Display', `${partialPath}/tab_display.html`, 6);
+    this.addEditorTab('Plugin info', `${partialPath}/tab_info.html`, 7);
 
     this.subTabIndex = 0;
   }
@@ -303,8 +304,6 @@ class GraphCtrl extends MetricsPanelCtrl {
       range: this.range,
     });
 
-    //this.onPredictionReceived(this.seriesList);
-
     this.dataWarning = null;
     const hasSomePoint = this.seriesList.some(s => s.datapoints.length > 0);
 
@@ -337,41 +336,6 @@ class GraphCtrl extends MetricsPanelCtrl {
 
   }
 
-  onPredictionReceived(spanList) {
-    var predictions = [];
-    for (var span of spanList) {
-      var predictionLow = {
-        target: '',
-        color: '',
-        datapoints: []
-      };
-      var predictionHigh = {
-        target: '',
-        color: '',
-        datapoints: []
-      };
-
-      for (var datapoint of span.datapoints) {
-        predictionHigh.datapoints.push([datapoint[0] + 2, datapoint[1]]);
-        predictionLow.datapoints.push([datapoint[0] - 2, datapoint[1]]);
-      }
-
-      predictionHigh.target = `${span.label} high`;
-      predictionLow.target = `${span.label} low`;
-      predictionHigh.color = span.color;
-      predictionLow.color = span.color;
-      predictions.push(predictionHigh, predictionLow);
-    }
-    var predictionSeries = this.processor.getSeriesList({
-      dataList: predictions,
-      range: this.range
-    });
-    for (var serie of predictionSeries) {
-      serie.prediction = true;
-      this.seriesList.push(serie);
-    }
-  }
-
   onRender(data) {
     if (!this.seriesList) {
       return;
@@ -551,6 +515,10 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.render(this.seriesList);
   }
 
+  onAnalyticUnitAlertChange(analyticUnit: AnalyticUnit) {
+    this.analyticsController.toggleAnalyticUnitAlert(analyticUnit);
+  }
+
   onColorChange(id: AnalyticUnitId, value: string) {
     if(id === undefined) {
       throw new Error('id is undefined');

src/partials/tab_webhooks.html

@@ -0,0 +1,20 @@
+<div class="gf-form-button-row" ng-if="ctrl.analyticsController.serverStatus === false">
+  <h5>Hastic server at "{{ctrl.backendURL}}" is not available</h5>
+  <button class="btn btn-inverse" ng-click="ctrl.runBackendConnectivityCheck()">
+    <i class="fa fa-plug"></i>
+    Reconnect to Hastic server
+  </button>
+</div>
+
+<div ng-if="ctrl.analyticsController.serverStatus === true">
+  <h5> Enable webhooks </h5>
+  <div class="editor-row">
+    <div class="gf-form" ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits">
+      <label class="gf-form-label max-width-15"> {{ analyticUnit.name }} ({{ analyticUnit.type }}) </label>
+      <gf-form-switch
+        on-change="ctrl.onAnalyticUnitAlertChange(analyticUnit)"
+        checked="analyticUnit.alert"
+      />
+    </div>
+  </div>
+</div>

src/services/analytic_service.ts

@@ -127,7 +127,14 @@ export class AnalyticService {
     };
   }
 
-  private async _analyticRequest(method: string, url: string, data?) {
+  async setAnalyticUnitAlert(analyticUnit: AnalyticUnit) {
+    return this.patch('/analyticUnits/alert', {
+      analyticUnitId: analyticUnit.id,
+      alert: analyticUnit.alert
+    });
+  }
+
+  private async _analyticRequest(method: string, url: string, data?: any) {
     try {
       method = method.toUpperCase();
       url = this._backendURL + url;