HSR: Hastic signal representation #258 (#272)

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -32,6 +32,8 @@ import { Emitter } from 'grafana/app/core/utils/emitter';
 import _ from 'lodash';
 import * as tinycolor from 'tinycolor2';
 
+export type HSRTimeSeries = { datapoints: [number, number][]; target: string; };
+
 export class AnalyticController {
 
   private _analyticUnitsSet: AnalyticUnitsSet;
@@ -407,15 +409,16 @@ export class AnalyticController {
   }
 
   updateLegend($elem: any) {
+    const analyticUnit = this.inspectedAnalyticUnit;
+    if(analyticUnit === null) {
+      return;
+    }
+
     let detectionStatuses: DetectionStatus[] = [];
-    this.analyticUnits
-      .filter(analyticUnit => analyticUnit.inspect)
-      .forEach(analyticUnit => {
-        if(analyticUnit.detectionSpans !== undefined) {
-          const statuses = analyticUnit.detectionSpans.map(span => span.status);
-          detectionStatuses = _.concat(detectionStatuses, statuses);
-        }
-      });
+    if(analyticUnit.detectionSpans !== undefined) {
+      const statuses = analyticUnit.detectionSpans.map(span => span.status);
+      detectionStatuses = _.concat(detectionStatuses, statuses);
+    }
     detectionStatuses = _.uniq(detectionStatuses);
 
     detectionStatuses.forEach(status => {
@@ -495,6 +498,44 @@ export class AnalyticController {
     this.fetchAnalyticUnitsStatuses();
   }
 
+  async getHSR(from: number, to: number): Promise<HSRTimeSeries | null> {
+    // Returns HSR (Hastic Signal Representation) for inspected analytic unit
+    // Returns null when there is no analytic units in Inspect mode
+    if(this.inspectedAnalyticUnit === null) {
+      return null;
+    }
+
+    const hsr = await this._analyticService.getHSR(this.inspectedAnalyticUnit.id, from, to);
+    const datapoints = hsr.values.map(value => value.reverse() as [number, number]);
+    return { target: 'HSR', datapoints };
+  }
+
+  async getHSRSeries(from: number, to: number) {
+    const hsr = await this.getHSR(from, to);
+
+    if(hsr === null) {
+      return [];
+    }
+    return {
+      ...hsr,
+      color: ANALYTIC_UNIT_COLORS[0],
+      // TODO: render it separately from series
+      overrides: [{
+        alias: 'HSR',
+        linewidth: 3
+      }]
+    };
+  }
+
+  get inspectedAnalyticUnit(): AnalyticUnit | null {
+    for(let analyticUnit of this.analyticUnits) {
+      if(analyticUnit.inspect) {
+        return analyticUnit;
+      }
+    };
+    return null;
+  }
+
   async updateThresholds(): Promise<void> {
     if(this._analyticService === undefined) {
       return;

src/panel/graph_panel/data_processor.ts

@@ -111,6 +111,10 @@ export class DataProcessor {
       unit: seriesData.unit,
     });
 
+    if(seriesData.overrides !== undefined) {
+      series.applySeriesOverrides(seriesData.overrides);
+    }
+
     if (datapoints && datapoints.length > 0) {
       var last = datapoints[datapoints.length - 1][1];
       var from = options.range.from;

src/panel/graph_panel/graph_ctrl.ts

@@ -371,8 +371,17 @@ class GraphCtrl extends MetricsPanelCtrl {
   async onDataReceived(dataList) {
 
     this.dataList = dataList;
+    this.loading = true;
+
+    const from = +this.range.from;
+    const to = +this.range.to;
+
+    if(this.analyticsController !== undefined) {
+      const hsrSeries = await this.analyticsController.getHSRSeries(from, to);
+      this.dataList = _.concat(this.dataList, hsrSeries);
+    }
     this.seriesList = this.processor.getSeriesList({
-      dataList: dataList,
+      dataList: this.dataList,
       range: this.range,
     });
 
@@ -398,15 +407,12 @@ class GraphCtrl extends MetricsPanelCtrl {
 
     if(this.analyticsController !== undefined) {
       this.analyticsController.stopAnalyticUnitsDetectionsFetching();
-      const from = +this.range.from;
-      const to = +this.range.to;
       const loadTasks = [
         // this.annotationsPromise,
         this.analyticsController.fetchAnalyticUnitsSegments(from, to)
       ];
 
       await Promise.all(loadTasks);
-      this.loading = false;
       // this.annotations = results[0].annotations;
       this.render(this.seriesList);
       this.analyticsController.fetchAnalyticUnitsDetections(
@@ -415,9 +421,10 @@ class GraphCtrl extends MetricsPanelCtrl {
       );
     }
 
+    this.loading = false;
   }
 
-  onRender(data) {
+  onRender() {
     if(!this.seriesList) {
       return;
     }
@@ -438,7 +445,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     }
 
     if(!this.analyticsController.graphLocked) {
-      this._graphRenderer.render(data);
+      this._graphRenderer.render(this.seriesList);
       this._graphLegend.render();
       this._graphRenderer.renderPanel();
     }

src/panel/graph_panel/services/analytic_service.ts

@@ -219,6 +219,14 @@ export class AnalyticService {
     };
   }
 
+  async getHSR(analyticUnitId: AnalyticUnitId, from: number, to: number): Promise<{
+    values: [number, number][];
+    columns: string[];
+  }> {
+    const data = await this.get('/query', { analyticUnitId, from, to });
+    return data.results;
+  }
+
   async setAnalyticUnitAlert(analyticUnit: AnalyticUnit) {
     return this.patch('/analyticUnits/alert', {
       analyticUnitId: analyticUnit.id,