Legend for detection statuses #260 (#263)

src/panel/graph_panel/colors.ts

@@ -1,4 +1,5 @@
 import tinycolor from 'tinycolor2';
+import { DetectionStatus } from './models/detection_span';
 
 export const PALETTE_ROWS = 4;
 export const PALETTE_COLUMNS = 14;
@@ -86,6 +87,12 @@ export const SEGMENT_FILL_ALPHA = 0.5;
 export const SEGMENT_STROKE_ALPHA = 0.8;
 export const LABELING_MODE_ALPHA = 0.7;
 
+export const DETECTION_STATUS_COLORS = new Map<DetectionStatus, string>([
+  [DetectionStatus.READY, 'green'],
+  [DetectionStatus.RUNNING, 'gold'],
+  [DetectionStatus.FAILED, 'red']
+]);
+
 export function hexToHsl(color) {
   return tinycolor(color).toHsl();
 }

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -14,7 +14,7 @@ import { SegmentsSet } from '../models/segment_set';
 import { SegmentArray } from '../models/segment_array';
 import { HasticServerInfo, HasticServerInfoUnknown } from '../models/hastic_server_info';
 import { Threshold, Condition } from '../models/threshold';
-import { DetectionStatus } from '../models/detection_span';
+import { DetectionStatus, DETECTION_STATUS_TEXT } from '../models/detection_span';
 import text from '../partials/help_section.html';
 
 import {
@@ -23,7 +23,8 @@ import {
   DELETED_SEGMENT_BORDER_COLOR,
   SEGMENT_FILL_ALPHA,
   SEGMENT_STROKE_ALPHA,
-  LABELING_MODE_ALPHA
+  LABELING_MODE_ALPHA,
+  DETECTION_STATUS_COLORS
 } from '../colors';
 
 import { Emitter } from 'grafana/app/core/utils/emitter';
@@ -378,20 +379,8 @@ export class AnalyticController {
       }
       const minValue = _.min(_.map(plot.getYAxes(), axis => axis.min));
       detectionSpans.forEach(detectionSpan => {
-        let underlineColor;
-        switch(detectionSpan.status) {
-          case DetectionStatus.READY:
-            underlineColor = 'green'
-            break;
-          case DetectionStatus.RUNNING:
-            underlineColor = 'yellow'
-            break;
-          case DetectionStatus.FAILED:
-            underlineColor = 'red'
-            break;
-          default:
-            break;
-        }
+        const underlineColor = DETECTION_STATUS_COLORS.get(detectionSpan.status);;
+
         options.grid.markings.push({
           xaxis: { from: detectionSpan.from, to: detectionSpan.to },
           color: underlineColor,
@@ -399,7 +388,29 @@ export class AnalyticController {
         });
       });
     }
+  }
 
+  updateLegend($elem: any) {
+    let detectionStatuses: DetectionStatus[] = [];
+    this.analyticUnits
+      .filter(analyticUnit => analyticUnit.inspect)
+      .forEach(analyticUnit => {
+        const statuses = analyticUnit.detectionSpans.map(span => span.status);
+        detectionStatuses = _.concat(detectionStatuses, statuses);
+      });
+    detectionStatuses = _.uniq(detectionStatuses);
+
+    detectionStatuses.forEach(status => {
+      const html = `
+        <div class="graph-legend-series">
+          <div class="graph-legend-icon">
+            <i class="fa fa-minus" style="color:${DETECTION_STATUS_COLORS.get(status)}"></i>
+          </div>
+          <a class="graph-legend-alias">${DETECTION_STATUS_TEXT.get(status)}</a>
+        </div>
+      `;
+      $elem.append(html);
+    });
   }
 
   deleteLabelingAnalyticUnitSegmentsInRange(from: number, to: number): void {

src/panel/graph_panel/graph_ctrl.ts

@@ -332,8 +332,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     this._graphRenderer = new GraphRenderer(
       this.$graphElem, this.timeSrv, this.contextSrv, this.$scope, this.analyticsController
     );
-    this._graphLegend = new GraphLegend(this.$legendElem, this.popoverSrv, this.$scope);
-
+    this._graphLegend = new GraphLegend(this.$legendElem, this.popoverSrv, this.$scope, this.analyticsController);
   }
 
   issueQueries(datasource) {

src/panel/graph_panel/graph_legend.ts

@@ -1,3 +1,5 @@
+import { AnalyticController } from './controllers/analytic_controller';
+
 import PerfectScrollbar from 'perfect-scrollbar';
 import _ from 'lodash';
 
@@ -10,11 +12,16 @@ export class GraphLegend {
   seriesList;
   legendScrollbar;
 
-  constructor(private $elem: JQuery<HTMLElement>, private popoverSrv, private scope) {
-    this.ctrl = scope.ctrl;
+  constructor(
+    private $elem: JQuery<HTMLElement>,
+    private popoverSrv,
+    private scope,
+    private _analyticsController: AnalyticController
+  ) {
+    this.ctrl = this.scope.ctrl;
     this.panel = this.ctrl.panel;
-    scope.$on('$destroy', () => {
-      if (this.legendScrollbar) {
+    this.scope.$on('$destroy', () => {
+      if(this.legendScrollbar) {
         this.legendScrollbar.destroy();
       }
     });
@@ -142,8 +149,8 @@ export class GraphLegend {
       this.seriesList = _.sortBy(this.seriesList, series => series.stats[this.panel.legend.sort]);
       if (this.panel.legend.sortDesc) {
         this.seriesList = this.seriesList.reverse();
+      }
     }
-  }
 
     // render first time for getting proper legend height
     if (!this.panel.legend.rightSide) {
@@ -152,6 +159,8 @@ export class GraphLegend {
     }
 
     this.renderLegendElement(tableHeaderElem);
+
+    this._analyticsController.updateLegend(this.$elem);
   }
 
   renderSeriesLegendElements() {

src/panel/graph_panel/models/detection_span.ts

@@ -12,3 +12,9 @@ export type DetectionSpan = {
   from: number,
   to: number
 };
+
+export const DETECTION_STATUS_TEXT = new Map<DetectionStatus, string>([
+  [DetectionStatus.READY, 'Detection is done'],
+  [DetectionStatus.RUNNING, 'Detection is running...'],
+  [DetectionStatus.FAILED, 'Detection failed']
+]);