Fix analytic units fetching (#221)

- Show preloader while fetching analytic units from server #219
- Fetch analytic units' statuses on load #220

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -47,6 +47,7 @@ export class AnalyticController {
   private _currentMetric: MetricExpanded;
   private _currentDatasource: DatasourceRequest;
   private _thresholds: Threshold[];
+  private _loading = true;
 
   constructor(
     private _grafanaUrl: string,
@@ -65,6 +66,10 @@ export class AnalyticController {
 
   get helpSectionText() { return text; }
 
+  get loading() {
+    return this._loading;
+  }
+
   getSegmentsSearcher(): AnalyticSegmentsSearcher {
     return this._segmentsSearcher.bind(this);
   }
@@ -90,7 +95,7 @@ export class AnalyticController {
     this._newAnalyticUnit = new AnalyticUnit();
     this._creatingNewAnalyticType = true;
     this._savingNewAnalyticUnit = false;
-    if (this.analyticUnits.length === 0) {
+    if(this.analyticUnits.length === 0) {
       this._newAnalyticUnit.labeledColor = ANALYTIC_UNIT_COLORS[0];
     } else {
       let colorIndex = ANALYTIC_UNIT_COLORS.indexOf(_.last(this.analyticUnits).labeledColor) + 1;
@@ -229,7 +234,7 @@ export class AnalyticController {
     if(!_.isNumber(+to)) {
       throw new Error('to isn`t number');
     }
-    var tasks = this.analyticUnits.map(a => this.fetchSegments(a, from, to));
+    const tasks = this.analyticUnits.map(a => this.fetchSegments(a, from, to));
     return Promise.all(tasks);
   }
 
@@ -286,7 +291,7 @@ export class AnalyticController {
       options.markings = [];
     }
 
-    for(var i = 0; i < this.analyticUnits.length; i++) {
+    for(let i = 0; i < this.analyticUnits.length; i++) {
       const analyticUnit = this.analyticUnits[i];
       if(!analyticUnit.visible) {
         continue;
@@ -401,6 +406,8 @@ export class AnalyticController {
   async fetchAnalyticUnits(): Promise<void> {
     const units = await this.getAnalyticUnits();
     this._analyticUnitsSet = new AnalyticUnitsSet(units);
+    this._loading = false;
+    this.fetchAnalyticUnitsStatuses();
   }
 
   async updateThresholds(): Promise<void> {

src/panel/graph_panel/partials/tab_analytics.html

@@ -18,7 +18,7 @@
     </button>
   </div>
 
-  <div ng-if="ctrl.analyticsController.serverStatus === true">
+  <div ng-if="ctrl.analyticsController.serverStatus === true && !ctrl.analyticsController.loading">
     <h5> Analytic Units </h5>
     <div class="editor-row">
       <div class="gf-form" ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits">
@@ -88,7 +88,7 @@
         <select class="gf-form-input width-12"
           ng-model="ctrl.analyticsController.labelingMode"
           ng-options="type.value as type.name for type in [
-            { name:'Label Positive', value: 'LABELING' }, 
+            { name:'Label Positive', value: 'LABELING' },
             { name:'Label Negative', value: 'DELETING' },
             { name:'Unlabel', value: 'UNLABELING' }
           ]"
@@ -222,8 +222,12 @@
         <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
       </button>
     </div>
+
+    <div class="gf-form" ng-show="ctrl.showHelp" ng-bind-html="ctrl.analyticsController.helpSectionText"></div>
   </div>
-</div>
 
-<div class="gf-form" ng-show="ctrl.showHelp" ng-bind-html="ctrl.analyticsController.helpSectionText"></div>
+  <div ng-if="ctrl.analyticsController.serverStatus === true && ctrl.analyticsController.loading">
+    <i class="fa fa-spinner fa-spin" /> Fetching analytic units...
+  </div>
+</div>