From 86a41dda50a02edeb97f0d2b57da8e6ef8eae71e Mon Sep 17 00:00:00 2001
From: Alexandr Velikiy <39257464+VargBurz@users.noreply.github.com>
Date: Tue, 7 May 2019 18:21:30 +0300
Subject: [PATCH 01/21] Broken Detect button in Threshold / Anomaly analytic
 units #283 (#284)

---
 src/panel/graph_panel/partials/tab_analytics.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 97c08f6..5d00411 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -147,7 +147,7 @@
         <label class="gf-form-label"
           ng-if="analyticUnit.detectorType === 'threshold' || analyticUnit.detectorType === 'anomaly'"
         >
-          <a class="pointer" ng-click="ctrl.runDetect(analyticUnit.id)">
+          <a class="pointer" ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)">
             <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
             <b ng-if="!analyticUnit.saving"> Detect </b>
             <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>

From 1ffaa8344d1aafe1cde03842119685110b2683cd Mon Sep 17 00:00:00 2001
From: Alexandr Velikiy <39257464+VargBurz@users.noreply.github.com>
Date: Wed, 8 May 2019 14:42:19 +0300
Subject: [PATCH 02/21] "Add analytic unit" button style #285 (#286)

---
 src/panel/graph_panel/partials/tab_analytics.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 5d00411..3c054ec 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -245,7 +245,7 @@
     </div>
 
     <div class="gf-form-button-row" ng-if="!ctrl.analyticsController.creatingAnalyticUnit">
-      <button class="btn btn-inverse width-12" ng-click="ctrl.createNew()">
+      <button class="btn btn-secondary width-12" ng-click="ctrl.createNew()">
         <i class="fa fa-plus"></i>
         Add Analytic Unit
       </button>

From b44fbffc5ebcb4e3f819e285319bbc506087986b Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Thu, 9 May 2019 16:38:24 +0300
Subject: [PATCH 03/21] series-color-picker -> series-color-picker-popover
 (#289)

---
 src/panel/graph_panel/graph_legend.ts          | 2 +-
 src/panel/graph_panel/series_overrides_ctrl.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panel/graph_panel/graph_legend.ts b/src/panel/graph_panel/graph_legend.ts
index 1f887da..394c351 100644
--- a/src/panel/graph_panel/graph_legend.ts
+++ b/src/panel/graph_panel/graph_legend.ts
@@ -46,7 +46,7 @@ export class GraphLegend {
       position: 'bottom left',
       targetAttachment: 'top left',
       template:
-        '<series-color-picker series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected"/>',
+        '<series-color-picker-popover series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected"/>',
       openOn: 'hover',
       model: {
         series: series,
diff --git a/src/panel/graph_panel/series_overrides_ctrl.ts b/src/panel/graph_panel/series_overrides_ctrl.ts
index fdf6edb..c5c8f99 100644
--- a/src/panel/graph_panel/series_overrides_ctrl.ts
+++ b/src/panel/graph_panel/series_overrides_ctrl.ts
@@ -54,7 +54,7 @@ export class SeriesOverridesCtrl {
         element: $element.find('.dropdown')[0],
         position: 'top center',
         openOn: 'click',
-        template: '<series-color-picker series="series" onColorChange="colorSelected" />',
+        template: '<series-color-picker-popover series="series" onColorChange="colorSelected" />',
         model: {
           autoClose: true,
           colorSelected: $scope.colorSelected,

From 4ddba127f38cee7b7a691ffaf5ff10439aa0b178 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Thu, 9 May 2019 20:49:03 +0300
Subject: [PATCH 04/21] HSR in Inspect mode #279 (#291)

* Remove HSR

* Show HSR for inspected analytic unit

* fix toggleInspect

* Update checkbox style
---
 .../controllers/analytic_controller.ts        | 37 +++++--------------
 src/panel/graph_panel/graph_ctrl.ts           |  5 ---
 .../models/analytic_units/analytic_unit.ts    |  4 --
 .../graph_panel/partials/tab_analytics.html   | 20 +++-------
 4 files changed, 15 insertions(+), 51 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index e27ffc4..311fbf9 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -504,13 +504,13 @@ export class AnalyticController {
   }
 
   async getHSR(from: number, to: number): Promise<HSRTimeSeries | null> {
-    // Returns HSR (Hastic Signal Representation) for analytic unit with enabled "Show HSR"
-    // Returns null when there is no analytic units which have "Show HSR" enabled
-    if(this.hsrAnalyticUnit === null) {
+    // Returns HSR (Hastic Signal Representation) for analytic unit in "Inspect" mode
+    // Returns null when there is no analytic units in "Inspect" mode
+    if(this.inspectedAnalyticUnit === null) {
       return null;
     }
 
-    const hsr = await this._analyticService.getHSR(this.hsrAnalyticUnit.id, from, to);
+    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 };
   }
@@ -521,8 +521,8 @@ export class AnalyticController {
     if(hsr === null) {
       return [];
     }
-    if(this.hsrAnalyticUnit.detectorType === DetectorType.ANOMALY) {
-      const confidence = (this.hsrAnalyticUnit as AnomalyAnalyticUnit).confidence;
+    if(this.inspectedAnalyticUnit.detectorType === DetectorType.ANOMALY) {
+      const confidence = (this.inspectedAnalyticUnit as AnomalyAnalyticUnit).confidence;
       // TODO: looks bad
       return [
         {
@@ -562,16 +562,6 @@ export class AnalyticController {
     return null;
   }
 
-  get hsrAnalyticUnit(): AnalyticUnit | null {
-    // TODO: remove inspectedAnalyticUnit duplication
-    for(let analyticUnit of this.analyticUnits) {
-      if(analyticUnit.showHSR) {
-        return analyticUnit;
-      }
-    };
-    return null;
-  }
-
   public get conditions() {
     return _.values(Condition);
   }
@@ -682,18 +672,9 @@ export class AnalyticController {
   }
 
   public toggleInspect(id: AnalyticUnitId) {
-    const analyticUnit = this._analyticUnitsSet.byId(id);
-    if(!analyticUnit.inspect) {
-      this.analyticUnits.forEach(unit => unit.inspect = false);
-    }
-  }
-
-  public toggleHSR(id: AnalyticUnitId) {
-    // TODO: remove toggleInspect duplication
-    const analyticUnit = this._analyticUnitsSet.byId(id);
-    if(!analyticUnit.showHSR) {
-      this.analyticUnits.forEach(unit => unit.showHSR = false);
-    }
+    this.analyticUnits
+      .filter(analyticUnit => analyticUnit.id !== id)
+      .forEach(unit => unit.inspect = false);
   }
 
   public onAnalyticUnitDetectorChange(analyticUnitTypes: any) {
diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts
index 4c08c41..8ef5d9b 100644
--- a/src/panel/graph_panel/graph_ctrl.ts
+++ b/src/panel/graph_panel/graph_ctrl.ts
@@ -683,11 +683,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.refresh();
   }
 
-  onToggleHSR(id: AnalyticUnitId) {
-    this.analyticsController.toggleHSR(id);
-    this.refresh();
-  }
-
   private async _updatePanelInfo() {
     let datasource = undefined;
     if(this.panel.datasource) {
diff --git a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
index a395706..b2fddee 100644
--- a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
+++ b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
@@ -55,7 +55,6 @@ export class AnalyticUnit {
   private _segmentSet = new SegmentArray<AnalyticSegment>();
   private _detectionSpans: DetectionSpan[];
   private _inspect = false;
-  private _showHSR = false;
   private _status: string;
   private _error: string;
 
@@ -116,9 +115,6 @@ export class AnalyticUnit {
   get inspect(): boolean { return this._inspect; }
   set inspect(value: boolean) { this._inspect = value; }
 
-  get showHSR(): boolean { return this._showHSR; }
-  set showHSR(value: boolean) { this._showHSR = value; }
-
   get visible(): boolean {
     return (this._serverObject.visible === undefined) ? true : this._serverObject.visible
   }
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 3c054ec..5001cd1 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -106,24 +106,16 @@
           ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
         />
 
-        <label class="gf-form-label" ng-if="analyticUnit.status === 'READY' && analyticUnit.visible">
-          Inspect
-        </label>
-
-        <gf-form-switch ng-if="analyticUnit.status === 'READY' && analyticUnit.visible"
+        <!-- TODO: Remove hack with "margin-bottom: 0" -->
+        <gf-form-switch ng-if="analyticUnit.visible"
+          class="gf-form"
+          style="margin-bottom: 0"
+          label="Inspect"
+          label-class="width-5"
           on-change="ctrl.onToggleInspect(analyticUnit.id)"
           checked="analyticUnit.inspect"
         />
 
-        <label class="gf-form-label" ng-if="analyticUnit.visible">
-          HSR
-        </label>
-
-        <gf-form-switch ng-if="analyticUnit.visible"
-          on-change="ctrl.onToggleHSR(analyticUnit.id)"
-          checked="analyticUnit.showHSR"
-        />
-
         <label class="gf-form-label" ng-hide="analyticUnit.selected">
           <a
             ng-if="analyticUnit.visible"

From 3132a5ab9ef8c767da29fc8cf1a0cf8ebd323d4e Mon Sep 17 00:00:00 2001
From: Alexandr Velikiy <39257464+VargBurz@users.noreply.github.com>
Date: Fri, 10 May 2019 16:48:36 +0300
Subject: [PATCH 05/21] Confusing save/label/apply/detect buttons #280 (#288)

---
 .../graph_panel/partials/tab_analytics.html   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 5001cd1..58cdf34 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -148,7 +148,7 @@
 
         <label
           class="gf-form-label"
-          ng-if="analyticUnit.detectorType === 'pattern'"
+          ng-if="analyticUnit.detectorType === 'pattern' && !analyticUnit.selected"
           ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
         >
           <a class="pointer" tabindex="1"
@@ -157,8 +157,8 @@
           >
             <i class="fa fa-bar-chart" ng-if="!analyticUnit.saving"></i>
             <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
-            <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
           </a>
+          Label
         </label>
 
         <select class="gf-form-input width-12"
@@ -172,6 +172,23 @@
           ng-disabled="analyticUnit.status === 'LEARNING'"
         />
 
+        <!-- Standard way to add conditions to ng-style: https://stackoverflow.com/a/29470439 -->
+        <label
+          class="gf-form-label"
+          ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
+          ng-if="analyticUnit.selected && !analyticUnit.saving"
+          ng-disabled="analyticUnit.status === 'LEARNING'"
+        >
+          <a class="pointer"
+            ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
+            ng-disabled="analyticUnit.status === 'LEARNING'"
+          >
+            <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
+            <b ng-if="!analyticUnit.saving"> Detect </b>
+            <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
+            </a>
+        </label>
+
         <label class="gf-form-label">
           <a
             ng-if="!analyticUnit.selected"

From 6a8d1b6f7d67f482e2a6fc092059362dfa253fec Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Fri, 10 May 2019 16:48:55 +0300
Subject: [PATCH 06/21] HSR is not updated when anomaly analytic unit options
 are changed #292 (#294)

---
 .../controllers/analytic_controller.ts        |  6 +++++-
 src/panel/graph_panel/graph_ctrl.ts           | 19 +++++++++----------
 .../graph_panel/services/analytic_service.ts  |  5 ++++-
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index 311fbf9..93e2c97 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -505,12 +505,16 @@ export class AnalyticController {
 
   async getHSR(from: number, to: number): Promise<HSRTimeSeries | null> {
     // Returns HSR (Hastic Signal Representation) for analytic unit in "Inspect" mode
-    // Returns null when there is no analytic units in "Inspect" mode
+    // Returns null when there are no analytic units in "Inspect" mode
+    // or if there is no response from server
     if(this.inspectedAnalyticUnit === null) {
       return null;
     }
 
     const hsr = await this._analyticService.getHSR(this.inspectedAnalyticUnit.id, from, to);
+    if(hsr === null) {
+      return null;
+    }
     const datapoints = hsr.values.map(value => value.reverse() as [number, number]);
     return { target: 'HSR', datapoints };
   }
diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts
index 8ef5d9b..4b7fc16 100644
--- a/src/panel/graph_panel/graph_ctrl.ts
+++ b/src/panel/graph_panel/graph_ctrl.ts
@@ -398,6 +398,13 @@ class GraphCtrl extends MetricsPanelCtrl {
           };
           break;
         }
+        const from = _.find(series.datapoints, datapoint => datapoint[0] !== null);
+        const to = _.findLast(series.datapoints, datapoint => datapoint[0] !== null);
+
+        this._dataTimerange = {};
+        if(from !== undefined && to !== undefined) {
+          this._dataTimerange = { from: from[1], to: to[1] };
+        }
       }
     }
 
@@ -410,11 +417,11 @@ class GraphCtrl extends MetricsPanelCtrl {
 
       await Promise.all(loadTasks);
       // this.annotations = results[0].annotations;
-      this.render(this.seriesList);
-      this.analyticsController.fetchAnalyticUnitsDetections(
+      await this.analyticsController.fetchAnalyticUnitsDetections(
         this._dataTimerange.from,
         this._dataTimerange.to
       );
+      this.render(this.seriesList);
     }
 
     this.loading = false;
@@ -426,14 +433,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     }
 
     for(let series of this.seriesList) {
-      const from = _.find(series.datapoints, datapoint => datapoint[0] !== null);
-      const to = _.findLast(series.datapoints, datapoint => datapoint[0] !== null);
-
-      this._dataTimerange = {};
-      if(from !== undefined && to !== undefined) {
-        this._dataTimerange = { from: from[1], to: to[1] };
-      }
-
       if (series.unit) {
         this.panel.yaxes[series.yaxis - 1].format = series.unit;
       }
diff --git a/src/panel/graph_panel/services/analytic_service.ts b/src/panel/graph_panel/services/analytic_service.ts
index 2935efa..3b87ac3 100644
--- a/src/panel/graph_panel/services/analytic_service.ts
+++ b/src/panel/graph_panel/services/analytic_service.ts
@@ -203,8 +203,11 @@ export class AnalyticService {
   async getHSR(analyticUnitId: AnalyticUnitId, from: number, to: number): Promise<{
     values: [number, number][];
     columns: string[];
-  }> {
+  } | null> {
     const data = await this.get('/query', { analyticUnitId, from, to });
+    if(data === undefined) {
+      return null;
+    }
     return data.results;
   }
 

From ac5816064a1f8e299e3838c442c00f386d271fd6 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Fri, 10 May 2019 18:33:14 +0300
Subject: [PATCH 07/21] Minor ui fix

---
 src/panel/graph_panel/partials/tab_analytics.html | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 58cdf34..b0a927b 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -147,17 +147,14 @@
         </label>
 
         <label
-          class="gf-form-label"
+          class="gf-form-label pointer"
           ng-if="analyticUnit.detectorType === 'pattern' && !analyticUnit.selected"
           ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
+          ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
+          ng-disabled="analyticUnit.status === 'LEARNING'"
         >
-          <a class="pointer" tabindex="1"
-            ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
-            ng-disabled="analyticUnit.status === 'LEARNING'"
-          >
-            <i class="fa fa-bar-chart" ng-if="!analyticUnit.saving"></i>
-            <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
-          </a>
+          <i class="fa fa-bar-chart" ng-if="!analyticUnit.saving"></i>
+          <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
           Label
         </label>
 

From 5a86d1723e56091bf765d38a548c5ca0ff616bb6 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Tue, 14 May 2019 23:50:51 +0300
Subject: [PATCH 08/21] Labeling for anomalies #281 (#299)

---
 .../controllers/analytic_controller.ts        |  24 +-
 src/panel/graph_panel/graph_ctrl.ts           |   5 +
 src/panel/graph_panel/graph_renderer.ts       |   4 +-
 .../models/analytic_units/analytic_unit.ts    |  17 +-
 .../analytic_units/anomaly_analytic_unit.ts   |  49 ++-
 .../analytic_units/pattern_analytic_unit.ts   |  12 +-
 .../analytic_units/threshold_analytic_unit.ts |   6 +
 .../graph_panel/partials/tab_analytics.html   | 409 ++++++++++--------
 8 files changed, 333 insertions(+), 193 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index 93e2c97..705bd30 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -106,7 +106,7 @@ export class AnalyticController {
 
   async saveNew(metric: MetricExpanded, datasource: DatasourceRequest) {
     this._savingNewAnalyticUnit = true;
-    const newAnalyticUnit = createAnalyticUnit(this._newAnalyticUnit.serverObject);
+    const newAnalyticUnit = createAnalyticUnit(this._newAnalyticUnit.toJSON());
     newAnalyticUnit.id = await this._analyticService.postNewAnalyticUnit(
       newAnalyticUnit, metric, datasource, this._grafanaUrl, this._panelId
     );
@@ -143,7 +143,8 @@ export class AnalyticController {
     await this.disableLabeling();
     this._selectedAnalyticUnitId = id;
     this.labelingUnit.selected = true;
-    this.toggleLabelingMode(LabelingMode.LABELING);
+    const labelingModes = this.labelingUnit.labelingModes;
+    this.toggleLabelingMode(labelingModes[0].value);
   }
 
   async disableLabeling() {
@@ -196,9 +197,9 @@ export class AnalyticController {
     this.labelingUnit.labelingMode = labelingMode;
   }
 
-  addLabelSegment(segment: Segment, deleted = false) {
-    const asegment = this.labelingUnit.addLabeledSegment(segment, deleted);
-    this._labelingDataAddedSegments.addSegment(asegment);
+  addSegment(segment: Segment, deleted = false) {
+    const addedSegment = this.labelingUnit.addSegment(segment, deleted);
+    this._labelingDataAddedSegments.addSegment(addedSegment);
   }
 
   get analyticUnits(): AnalyticUnit[] {
@@ -453,11 +454,7 @@ export class AnalyticController {
     if(!this.inLabelingMode) {
       throw new Error(`Can't enter ${labelingMode} mode when labeling mode is disabled`);
     }
-    if(this.labelingUnit.labelingMode === labelingMode) {
-      this.labelingUnit.labelingMode = LabelingMode.LABELING;
-    } else {
-      this.labelingUnit.labelingMode = labelingMode;
-    }
+    this.labelingUnit.labelingMode = labelingMode;
   }
 
   async removeAnalyticUnit(id: AnalyticUnitId, silent: boolean = false): Promise<void> {
@@ -484,7 +481,7 @@ export class AnalyticController {
     }
 
     analyticUnit.saving = true;
-    await this._analyticService.updateAnalyticUnit(analyticUnit.serverObject);
+    await this._analyticService.updateAnalyticUnit(analyticUnit.toJSON());
     analyticUnit.saving = false;
   }
 
@@ -681,6 +678,11 @@ export class AnalyticController {
       .forEach(unit => unit.inspect = false);
   }
 
+  public async updateSeasonality(id: AnalyticUnitId) {
+    const analyticUnit = this._analyticUnitsSet.byId(id) as AnomalyAnalyticUnit;
+    await this.saveAnalyticUnit(analyticUnit);
+  }
+
   public onAnalyticUnitDetectorChange(analyticUnitTypes: any) {
     // TODO: looks bad
     this._newAnalyticUnit.type = analyticUnitTypes[this._newAnalyticUnit.detectorType][0].value;
diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts
index 4b7fc16..60dc7ef 100644
--- a/src/panel/graph_panel/graph_ctrl.ts
+++ b/src/panel/graph_panel/graph_ctrl.ts
@@ -682,6 +682,11 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.refresh();
   }
 
+  onSeasonalityChange(id: AnalyticUnitId) {
+    this.analyticsController.updateSeasonality(id);
+    this.refresh();
+  }
+
   private async _updatePanelInfo() {
     let datasource = undefined;
     if(this.panel.datasource) {
diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts
index 231695a..c4000fc 100644
--- a/src/panel/graph_panel/graph_renderer.ts
+++ b/src/panel/graph_panel/graph_renderer.ts
@@ -153,10 +153,10 @@ export class GraphRenderer {
         this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange(
           segment.from, segment.to
         );
-        this._analyticController.addLabelSegment(segment, true);
+        this._analyticController.addSegment(segment, true);
       }
       if(this._analyticController.labelingMode === LabelingMode.LABELING) {
-        this._analyticController.addLabelSegment(segment, false);
+        this._analyticController.addSegment(segment, false);
       }
       if(this._analyticController.labelingMode === LabelingMode.UNLABELING) {
         this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange(
diff --git a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
index b2fddee..1d39cc1 100644
--- a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
+++ b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
@@ -33,6 +33,9 @@ export class AnalyticSegment extends Segment {
     if(!_.isBoolean(this.labeled)) {
       throw new Error('labeled value is not boolean');
     }
+    if(labeled && deleted) {
+      throw new Error('Segment can`t be both labeled and deleted');
+    }
   }
 }
 
@@ -47,6 +50,8 @@ const DEFAULTS = {
   visible: true
 };
 
+const LABELING_MODES = [];
+
 export class AnalyticUnit {
 
   private _labelingMode: LabelingMode = LabelingMode.LABELING;
@@ -122,10 +127,10 @@ export class AnalyticUnit {
     this._serverObject.visible = value;
   }
 
-  addLabeledSegment(segment: Segment, deleted: boolean): AnalyticSegment {
-    const asegment = new AnalyticSegment(!deleted, segment.id, segment.from, segment.to, deleted);
-    this._segmentSet.addSegment(asegment);
-    return asegment;
+  addSegment(segment: Segment, deleted: boolean): AnalyticSegment {
+    const addedSegment = new AnalyticSegment(!deleted, segment.id, segment.from, segment.to, deleted);
+    this._segmentSet.addSegment(addedSegment);
+    return addedSegment;
   }
 
   removeSegmentsInRange(from: number, to: number): AnalyticSegment[] {
@@ -172,4 +177,8 @@ export class AnalyticUnit {
 
   get serverObject() { return this._serverObject; }
 
+  // TODO: make it abstract
+  get labelingModes() {
+    return LABELING_MODES;
+  }
 }
diff --git a/src/panel/graph_panel/models/analytic_units/anomaly_analytic_unit.ts b/src/panel/graph_panel/models/analytic_units/anomaly_analytic_unit.ts
index 2d185d6..cacfa1e 100644
--- a/src/panel/graph_panel/models/analytic_units/anomaly_analytic_unit.ts
+++ b/src/panel/graph_panel/models/analytic_units/anomaly_analytic_unit.ts
@@ -1,14 +1,30 @@
-import { AnalyticUnit, DetectorType } from './analytic_unit';
+import { AnalyticUnit, DetectorType, LabelingMode } from './analytic_unit';
 
 import _ from 'lodash';
+import moment from 'moment';
+
+type TimePeriod = {
+  value: number,
+  unit: string
+};
 
 const DEFAULTS = {
   detectorType: DetectorType.ANOMALY,
   type: 'ANOMALY',
   alpha: 0.5,
-  confidence: 1
+  confidence: 1,
+  seasonality: 0,
+  seasonalityPeriod: {
+    value: 0,
+    unit: 'seconds'
+  }
 };
 
+const LABELING_MODES = [
+  { name: 'Label Negative', value: LabelingMode.DELETING },
+  { name: 'Unlabel', value: LabelingMode.UNLABELING }
+];
+
 export class AnomalyAnalyticUnit extends AnalyticUnit {
 
   constructor(_serverObject?: any) {
@@ -21,7 +37,9 @@ export class AnomalyAnalyticUnit extends AnalyticUnit {
     return {
       ...baseJSON,
       alpha: this.alpha,
-      confidence: this.confidence
+      confidence: this.confidence,
+      seasonality: this.seasonality,
+      seasonalityPeriod: this.seasonalityPeriod
     };
   }
 
@@ -30,4 +48,29 @@ export class AnomalyAnalyticUnit extends AnalyticUnit {
 
   set confidence(val: number) { this._serverObject.confidence = val; }
   get confidence(): number { return this._serverObject.confidence; }
+
+  get seasonality(): number {
+    let seasonalityObj = {};
+    seasonalityObj[this.seasonalityPeriod.unit] = this.seasonalityPeriod.value;
+    return moment.duration(seasonalityObj).asMilliseconds();
+  }
+
+  set seasonalityPeriod(val: TimePeriod) { this._serverObject.seasonalityPeriod = val; }
+  get seasonalityPeriod(): TimePeriod { return this._serverObject.seasonalityPeriod; }
+
+  // TODO: merge seasonality and hasSeasonality
+  set hasSeasonality(val: boolean) {
+    if(val) {
+      this.seasonalityPeriod = { value: 1, unit: 'seconds' };
+    } else {
+      this.seasonalityPeriod = { value: 0, unit: 'seconds' };
+    }
+  }
+  get hasSeasonality(): boolean {
+    return this.seasonality > 0;
+  }
+
+  get labelingModes() {
+    return LABELING_MODES;
+  }
 }
diff --git a/src/panel/graph_panel/models/analytic_units/pattern_analytic_unit.ts b/src/panel/graph_panel/models/analytic_units/pattern_analytic_unit.ts
index c0f6787..5222b20 100644
--- a/src/panel/graph_panel/models/analytic_units/pattern_analytic_unit.ts
+++ b/src/panel/graph_panel/models/analytic_units/pattern_analytic_unit.ts
@@ -1,4 +1,4 @@
-import { AnalyticUnit, DetectorType } from './analytic_unit';
+import { AnalyticUnit, DetectorType, LabelingMode } from './analytic_unit';
 
 import _ from 'lodash';
 
@@ -7,6 +7,12 @@ const DEFAULTS = {
   type: 'GENERAL'
 };
 
+const LABELING_MODES = [
+  { name: 'Label Positive', value: LabelingMode.LABELING },
+  { name: 'Label Negative', value: LabelingMode.DELETING },
+  { name: 'Unlabel', value: LabelingMode.UNLABELING }
+];
+
 export class PatternAnalyticUnit extends AnalyticUnit {
 
   constructor(_serverObject?: any) {
@@ -20,4 +26,8 @@ export class PatternAnalyticUnit extends AnalyticUnit {
       ...baseJSON
     };
   }
+
+  get labelingModes() {
+    return LABELING_MODES;
+  }
 }
diff --git a/src/panel/graph_panel/models/analytic_units/threshold_analytic_unit.ts b/src/panel/graph_panel/models/analytic_units/threshold_analytic_unit.ts
index 3af8a5c..73d8f3a 100644
--- a/src/panel/graph_panel/models/analytic_units/threshold_analytic_unit.ts
+++ b/src/panel/graph_panel/models/analytic_units/threshold_analytic_unit.ts
@@ -19,6 +19,8 @@ const DEFAULTS = {
   condition: Condition.ABOVE_OR_EQUAL
 };
 
+const LABELING_MODES = [];
+
 export class ThresholdAnalyticUnit extends AnalyticUnit {
 
   constructor(_serverObject?: any) {
@@ -40,4 +42,8 @@ export class ThresholdAnalyticUnit extends AnalyticUnit {
 
   set condition(val: Condition) { this._serverObject.condition = val; }
   get condition(): Condition { return this._serverObject.condition; }
+
+  get labelingModes() {
+    return LABELING_MODES;
+  }
 }
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index b0a927b..b4f0792 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -1,7 +1,7 @@
 <div class="gf-form-group">
   <div class="gf-form">
     <label class="gf-form-label">Select Hastic datasource</label>
-    <select class="gf-form-input max-width-15"
+    <select class="gf-form-input width-15"
       ng-model="ctrl.panel.hasticDatasource"
       ng-options="ds.id as ds.name for ds in ctrl.hasticDatasources"
       ng-change="ctrl.onHasticDatasourceChange()"
@@ -20,217 +20,282 @@
 
   <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">
-
-        <label class="gf-form-label width-5">
-          <i class="fa fa-info" bs-tooltip="'Analytic unit id: ' + analyticUnit.id"></i>
-          &nbsp; Name
-        </label>
-        <input
-          type="text" class="gf-form-input max-width-15"
-          ng-model="analyticUnit.name"
-          ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
-        >
-
-        <label class="gf-form-label width-4"> Type </label>
-        <div class="gf-form-select-wrapper">
-          <select class="gf-form-input width-10"
-            ng-model="analyticUnit.type"
-            ng-options="type.value as type.name for type in ctrl.analyticUnitTypes[analyticUnit.detectorType]"
-            ng-disabled="true"
-          />
+    <div ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits">
+      <div class="gf-form-inline">
+        <div class="gf-form">
+          <label class="gf-form-label width-5">
+            <i class="fa fa-info" bs-tooltip="'Analytic unit id: ' + analyticUnit.id"></i>
+            &nbsp; Name
+          </label>
+          <input
+            type="text" class="gf-form-input width-15"
+            ng-model="analyticUnit.name"
+            ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
+          >
         </div>
 
-        <!--
-        <label class="gf-form-label width-6"> Confidence </label>
-        <input
-          type="number" class="gf-form-input width-5 ng-valid ng-scope ng-empty ng-dirty ng-valid-number ng-touched"
-          placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'"
-          data-placement="right" ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur="" data-original-title="" title=""
-        />
-        -->
+        <div class="gf-form">
+          <label class="gf-form-label width-5"> Type </label>
+          <div class="gf-form-select-wrapper">
+            <select class="gf-form-input width-10"
+              ng-model="analyticUnit.type"
+              ng-options="type.value as type.name for type in ctrl.analyticUnitTypes[analyticUnit.detectorType]"
+              ng-disabled="true"
+            />
+          </div>
+        </div>
 
-        <label class="gf-form-label width-8"> Positive Color </label>
-        <span class="gf-form-label">
-          <color-picker
-            color="analyticUnit.labeledColor"
-            onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, false)"
-          />
-        </span>
+        <div class="gf-form">
+          <label class="gf-form-label width-8"> Positive Color </label>
+          <span class="gf-form-label">
+            <color-picker
+              color="analyticUnit.labeledColor"
+              onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, false)"
+            />
+          </span>
+        </div>
 
-        <!-- Hack to avoid Grafana's .gf-form-label + .gf-form-label css. Fix for https://github.com/hastic/hastic-grafana-app/issues/192 -->
-        <div ng-if="analyticUnit.detectorType === 'pattern'"></div>
+        <div class="gf-form"
+          ng-if="analyticUnit.detectorType === 'pattern' || analyticUnit.detectorType === 'anomaly'"
+        >
+          <label class="gf-form-label width-8"> Negative Color </label>
+          <span class="gf-form-label">
+            <color-picker
+              color="analyticUnit.deletedColor"
+              onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, true)"
+            />
+          </span>
+        </div>
 
-        <label ng-if="analyticUnit.detectorType === 'pattern'" class="gf-form-label width-8"> Negative Color </label>
-        <span ng-if="analyticUnit.detectorType === 'pattern'"  class="gf-form-label">
-          <color-picker
-            color="analyticUnit.deletedColor"
-            onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, true)"
+        <div class="gf-form" ng-if="analyticUnit.visible">
+          <!-- TODO: Remove hack with "margin-bottom: 0" -->
+          <gf-form-switch
+            class="gf-form"
+            style="margin-bottom: 0"
+            label="Inspect"
+            label-class="width-7"
+            on-change="ctrl.onToggleInspect(analyticUnit.id)"
+            checked="analyticUnit.inspect"
           />
-        </span>
+        </div>
 
-        <!-- TODO: move analytic-unit-specific fields rendering to class -->
-        <select class="gf-form-input width-9"
-          ng-if="analyticUnit.detectorType === 'threshold'"
-          ng-model="analyticUnit.condition"
-          ng-options="type for type in ctrl.analyticsController.conditions"
-          ng-change="ctrl.onAnalyticUnitChange(analyticUnit)"
-        />
-        <input class="gf-form-input width-5"
+        <div
+          class="gf-form"
           ng-if="
-            analyticUnit.detectorType === 'threshold' &&
-            analyticUnit.condition !== 'NO_DATA'
+            analyticUnit.detectorType === 'pattern' ||
+            (analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality)
           "
-          type="number"
-          ng-model="analyticUnit.value"
-          ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
-        />
+        >
+          <label
+            class="gf-form-label pointer"
+            ng-if="!analyticUnit.selected"
+            ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
+            ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
+            ng-disabled="analyticUnit.status === 'LEARNING'"
+          >
+            <i class="fa fa-bar-chart" ng-if="!analyticUnit.saving"></i>
+            <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
+            Label
+          </label>
+          <select class="gf-form-input width-12"
+            ng-if="analyticUnit.selected && !analyticUnit.saving"
+            ng-model="ctrl.analyticsController.labelingMode"
+            ng-options="type.value as type.name for type in analyticUnit.labelingModes"
+            ng-disabled="analyticUnit.status === 'LEARNING'"
+          />
+        </div>
 
-        <label class="gf-form-label width-6" ng-if="analyticUnit.detectorType === 'anomaly'"> Alpha </label>
-        <input class="gf-form-input width-5"
-          ng-if="analyticUnit.detectorType === 'anomaly'"
-          min="0"
-          max="1"
-          type="number"
-          ng-model="analyticUnit.alpha"
-          ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
-        />
+        <div class="gf-form" ng-if="!analyticUnit.selected">
+          <label class="gf-form-label">
+            <a
+              ng-if="analyticUnit.visible"
+              bs-tooltip="'Hide. It`s visible now.'"
+              ng-click="ctrl.onToggleVisibility(analyticUnit.id)"
+              class="pointer"
+            >
+              <i class="fa fa-eye"></i>
+            </a>
 
-        <label class="gf-form-label width-6" ng-if="analyticUnit.detectorType === 'anomaly'"> Confidence </label>
-        <input class="gf-form-input width-5"
-          ng-if="analyticUnit.detectorType === 'anomaly'"
-          min="0"
-          type="number"
-          ng-model="analyticUnit.confidence"
-          ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
-        />
+            <a
+              ng-if="!analyticUnit.visible"
+              bs-tooltip="'Show. It`s hidden now.'"
+              ng-click="ctrl.onToggleVisibility(analyticUnit.id)"
+              class="pointer"
+            >
+              <i class="fa fa-eye-slash"></i>
+            </a>
+          </label>
+        </div>
 
-        <!-- TODO: Remove hack with "margin-bottom: 0" -->
-        <gf-form-switch ng-if="analyticUnit.visible"
-          class="gf-form"
-          style="margin-bottom: 0"
-          label="Inspect"
-          label-class="width-5"
-          on-change="ctrl.onToggleInspect(analyticUnit.id)"
-          checked="analyticUnit.inspect"
-        />
+        <div class="gf-form">
+          <label class="gf-form-label">
+            <a
+              ng-if="!analyticUnit.selected"
+              ng-click="ctrl.onRemove(analyticUnit.id)"
+              class="pointer"
+            >
+              <i class="fa fa-trash"></i>
+            </a>
 
-        <label class="gf-form-label" ng-hide="analyticUnit.selected">
-          <a
-            ng-if="analyticUnit.visible"
-            bs-tooltip="'Hide. It`s visible now.'"
-            ng-click="ctrl.onToggleVisibility(analyticUnit.id)"
-            class="pointer"
-          >
-            <i class="fa fa-eye"></i>
-          </a>
+            <a
+              ng-if="analyticUnit.selected"
+              ng-click="ctrl.onCancelLabeling(analyticUnit.id)"
+              class="pointer"
+            >
+              <i class="fa fa-ban"></i>
+            </a>
+          </label>
+        </div>
 
-          <a
-            ng-if="!analyticUnit.visible"
-            bs-tooltip="'Show. It`s hidden now.'"
-            ng-click="ctrl.onToggleVisibility(analyticUnit.id)"
-            class="pointer"
+        <div class="gf-form" ng-if="analyticUnit.selected && !analyticUnit.saving">
+          <!-- Standard way to add conditions to ng-style: https://stackoverflow.com/a/29470439 -->
+          <label
+            class="gf-form-label"
+            ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
+            ng-disabled="analyticUnit.status === 'LEARNING'"
           >
-            <i class="fa fa-eye-slash"></i>
-          </a>
-        </label>
+            <a class="pointer"
+              ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
+              ng-disabled="analyticUnit.status === 'LEARNING'"
+            >
+              <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
+              <b ng-if="!analyticUnit.saving"> Detect </b>
+              <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
+              </a>
+          </label>
+        </div>
 
-        <label class="gf-form-label"
-          ng-if="analyticUnit.detectorType === 'threshold' || analyticUnit.detectorType === 'anomaly'"
+        <div class="gf-form"
+          ng-if="
+            analyticUnit.detectorType === 'threshold' ||
+            (analyticUnit.detectorType === 'anomaly' && !analyticUnit.hasSeasonality)
+          "
         >
-          <a class="pointer" ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)">
-            <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
-            <b ng-if="!analyticUnit.saving"> Detect </b>
-            <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
-          </a>
-        </label>
+          <label class="gf-form-label">
+            <a class="pointer" ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)">
+              <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
+              <b ng-if="!analyticUnit.saving"> Detect </b>
+              <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
+            </a>
+          </label>
+        </div>
 
-        <label
-          class="gf-form-label pointer"
-          ng-if="analyticUnit.detectorType === 'pattern' && !analyticUnit.selected"
-          ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
-          ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
-          ng-disabled="analyticUnit.status === 'LEARNING'"
-        >
-          <i class="fa fa-bar-chart" ng-if="!analyticUnit.saving"></i>
-          <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
-          Label
-        </label>
+        <div class="gf-form">
+          <label>
+            <i ng-if="analyticUnit.status === 'READY'" class="grafana-tip fa fa-check-circle ng-scope" bs-tooltip="'Ready'"></i>
+            <i ng-if="analyticUnit.status === 'LEARNING'" class="grafana-tip fa fa-leanpub ng-scope" bs-tooltip="'Learning'"></i>
+            <i ng-if="analyticUnit.status === 'PENDING'" class="grafana-tip fa fa-list-ul ng-scope" bs-tooltip="'Pending'"></i>
+            <i ng-if="analyticUnit.status === 'FAILED'" class="grafana-tip fa fa-exclamation-circle ng-scope" bs-tooltip="'Error: ' + analyticUnit.error"></i>
+          </label>
+        </div>
+      </div>
 
-        <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 Negative', value: 'DELETING' },
-            { name:'Unlabel', value: 'UNLABELING' }
-          ]"
-          ng-if="analyticUnit.selected && !analyticUnit.saving"
-          ng-disabled="analyticUnit.status === 'LEARNING'"
-        />
+      <div class="gf-form-inline">
+        <div class="gf-form width-20"/>
+        <!-- TODO: move analytic-unit-specific fields rendering to class -->
+        <div class="gf-form" ng-if="analyticUnit.detectorType === 'threshold'">
+          <label class="gf-form-label width-5"> Condition </label>
+          <select class="gf-form-input width-5"
+            ng-class="{
+              'width-5': analyticUnit.condition !== 'NO_DATA',
+              'width-10': analyticUnit.condition === 'NO_DATA'
+            }"
+            ng-model="analyticUnit.condition"
+            ng-options="type for type in ctrl.analyticsController.conditions"
+            ng-change="ctrl.onAnalyticUnitChange(analyticUnit)"
+          />
+          <input class="gf-form-input width-5"
+            ng-if="analyticUnit.condition !== 'NO_DATA'"
+            type="number"
+            ng-model="analyticUnit.value"
+            ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
+          />
+        </div>
 
-        <!-- Standard way to add conditions to ng-style: https://stackoverflow.com/a/29470439 -->
-        <label
-          class="gf-form-label"
-          ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
-          ng-if="analyticUnit.selected && !analyticUnit.saving"
-          ng-disabled="analyticUnit.status === 'LEARNING'"
-        >
-          <a class="pointer"
-            ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
-            ng-disabled="analyticUnit.status === 'LEARNING'"
-          >
-            <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
-            <b ng-if="!analyticUnit.saving"> Detect </b>
-            <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
-            </a>
-        </label>
+        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly' && !analyticUnit.selected">
+          <label class="gf-form-label width-5"> Alpha </label>
+          <input class="gf-form-input width-10"
+            ng-hide="analyticUnit.selected"
+            min="0"
+            max="1"
+            type="number"
+            ng-model="analyticUnit.alpha"
+            ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
+          />
+        </div>
 
-        <label class="gf-form-label">
-          <a
-            ng-if="!analyticUnit.selected"
-            ng-click="ctrl.onRemove(analyticUnit.id)"
-            class="pointer"
-          >
-            <i class="fa fa-trash"></i>
-          </a>
+        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly' && !analyticUnit.selected">
+          <label class="gf-form-label width-6"> Confidence </label>
+          <input class="gf-form-input width-5"
+            min="0"
+            type="number"
+            ng-model="analyticUnit.confidence"
+            ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
+          />
+        </div>
 
-          <a
-            ng-if="analyticUnit.selected"
-            ng-click="ctrl.onCancelLabeling(analyticUnit.id)"
-            class="pointer"
+        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly' && !analyticUnit.selected">
+          <!-- TODO: Remove hack with "margin-bottom: 0" -->
+          <gf-form-switch
+            class="gf-form"
+            style="margin-bottom: 0"
+            label="Seasonality"
+            label-class="width-7"
+            on-change="ctrl.onAnalyticUnitChange(analyticUnit)"
+            checked="analyticUnit.hasSeasonality"
+          />
+        </div>
+
+        <div
+          class="gf-form"
+          ng-if="analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality && !analyticUnit.selected"
+        >
+          <label class="gf-form-label width-9"> Seasonality Period </label>
+          <input
+            type="number" class="gf-form-input width-5"
+            ng-model="analyticUnit.seasonalityPeriod.value"
+            ng-blur="ctrl.onSeasonalityChange(analyticUnit.id)"
+            min="0"
           >
-            <i class="fa fa-ban"></i>
-          </a>
-        </label>
+        </div>
 
-        <label>
-          <i ng-if="analyticUnit.status === 'READY'" class="grafana-tip fa fa-check-circle ng-scope" bs-tooltip="'Ready'"></i>
-          <i ng-if="analyticUnit.status === 'LEARNING'" class="grafana-tip fa fa-leanpub ng-scope" bs-tooltip="'Learning'"></i>
-          <i ng-if="analyticUnit.status === 'PENDING'" class="grafana-tip fa fa-list-ul ng-scope" bs-tooltip="'Pending'"></i>
-          <i ng-if="analyticUnit.status === 'FAILED'" class="grafana-tip fa fa-exclamation-circle ng-scope" bs-tooltip="'Error: ' + analyticUnit.error"></i>
-        </label>
+        <div class="gf-form"
+          ng-if="
+            analyticUnit.detectorType === 'anomaly' &&
+            analyticUnit.hasSeasonality &&
+            !analyticUnit.selected
+          "
+        >
+          <div class="gf-form-select-wrapper">
+            <!-- TODO: move periods from ng-options -->
+            <select class="gf-form-input width-8"
+              ng-model="analyticUnit.seasonalityPeriod.unit"
+              ng-change="ctrl.onSeasonalityChange(analyticUnit.id)"
+              ng-options="type for type in ['seconds', 'minutes', 'days', 'hours', 'days', 'years']"
+            />
+          </div>
+        </div>
       </div>
     </div>
 
     <div class="editor-row" ng-if="ctrl.analyticsController.creatingNew">
       <div class="gf-form">
-        <label class="gf-form-label width-4"> Name </label>
+        <label class="gf-form-label width-5"> Name </label>
         <input
-          type="text" class="gf-form-input max-width-15"
+          type="text" class="gf-form-input width-15"
           ng-model="ctrl.analyticsController.newAnalyticUnit.name"
         >
 
         <label class="gf-form-label width-8"> Detector Type </label>
         <div class="gf-form-select-wrapper">
-          <select class="gf-form-input width-10"
+          <select class="gf-form-input width-7"
             ng-model="ctrl.analyticsController.newAnalyticUnit.detectorType"
             ng-options="analyticUnitDetectorType for analyticUnitDetectorType in ctrl.analyticUnitDetectorTypes"
             ng-change="ctrl.analyticsController.onAnalyticUnitDetectorChange(ctrl.analyticUnitTypes);"
           />
         </div>
 
-        <label class="gf-form-label width-8"> Type </label>
+        <label class="gf-form-label width-5"> Type </label>
         <div class="gf-form-select-wrapper">
           <select class="gf-form-input width-10"
             ng-model="ctrl.analyticsController.newAnalyticUnit.type"
@@ -256,7 +321,7 @@
         Add Analytic Unit
       </button>
     </div>
-    <div class="gf-form-button-row">
+    <div class="gf-form-button-row" ng-if="ctrl.analyticsController.analyticUnits.length > 0">
       <button class="gf-form-label width-12 pointer" ng-click="ctrl.redetectAll()">
         Re-detect all analytic units
       </button>

From ea969dd952d4a8e484004e78a67f99098f84c1b2 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Wed, 15 May 2019 03:42:04 +0300
Subject: [PATCH 09/21] HSR for anomaly analytic unit #302 (#303)

---
 .../controllers/analytic_controller.ts        | 62 ++++++++++++-------
 src/panel/graph_panel/models/detection.ts     |  6 +-
 .../graph_panel/services/analytic_service.ts  |  8 ++-
 3 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index 705bd30..d5c600c 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -500,7 +500,10 @@ export class AnalyticController {
     this.fetchAnalyticUnitsStatuses();
   }
 
-  async getHSR(from: number, to: number): Promise<HSRTimeSeries | null> {
+  async getHSR(from: number, to: number): Promise<{
+    hsr: HSRTimeSeries,
+    smoothed?: HSRTimeSeries
+  } | null> {
     // Returns HSR (Hastic Signal Representation) for analytic unit in "Inspect" mode
     // Returns null when there are no analytic units in "Inspect" mode
     // or if there is no response from server
@@ -508,50 +511,65 @@ export class AnalyticController {
       return null;
     }
 
-    const hsr = await this._analyticService.getHSR(this.inspectedAnalyticUnit.id, from, to);
-    if(hsr === null) {
+    const response = await this._analyticService.getHSR(this.inspectedAnalyticUnit.id, from, to);
+    if(response === null) {
       return null;
     }
-    const datapoints = hsr.values.map(value => value.reverse() as [number, number]);
-    return { target: 'HSR', datapoints };
+
+    const hsrDatapoints = response.hsr.values.map(value => value.reverse() as [number, number]);
+    const hsrTimeSeries = { target: 'HSR', datapoints: hsrDatapoints };
+
+    let smoothed: HSRTimeSeries;
+    if(response.smoothed !== undefined) {
+      // TODO: remove duplication with hsrDatapoints
+      const smoothedDatapoints = response.smoothed.values.map(value => value.reverse() as [number, number]);
+      smoothed = { target: 'Smoothed data', datapoints: smoothedDatapoints };
+    }
+
+    return {
+      hsr: hsrTimeSeries,
+      smoothed
+    };
   }
 
   async getHSRSeries(from: number, to: number) {
-    const hsr = await this.getHSR(from, to);
+    const response = await this.getHSR(from, to);
 
-    if(hsr === null) {
+    if(response === null) {
       return [];
     }
-    if(this.inspectedAnalyticUnit.detectorType === DetectorType.ANOMALY) {
+    const hsrSerie = {
+      ...response.hsr,
+      color: ANALYTIC_UNIT_COLORS[0],
+      // TODO: render it separately from Metric series
+      overrides: [
+        { alias: 'HSR', linewidth: 3, fill: 0 }
+      ]
+    };
+    if(response.smoothed !== undefined) {
       const confidence = (this.inspectedAnalyticUnit as AnomalyAnalyticUnit).confidence;
       // TODO: looks bad
       return [
         {
-          target: 'Confidence interval lower',
-          datapoints: hsr.datapoints.map(datapoint =>
+          target: '[AnomalyDetector]: lower bound',
+          datapoints: response.smoothed.datapoints.map(datapoint =>
             [datapoint[0] - confidence, datapoint[1]]
           ),
           color: ANALYTIC_UNIT_COLORS[0],
-          overrides: [{ alias: 'Confidence interval lower', linewidth: 1, fill: 0 }]
+          overrides: [{ alias: '[AnomalyDetector]: lower bound', linewidth: 1, fill: 0 }]
         },
         {
-          target: 'Confidence interval upper',
-          datapoints: hsr.datapoints.map(datapoint =>
+          target: '[AnomalyDetector]: upper bound',
+          datapoints: response.smoothed.datapoints.map(datapoint =>
             [datapoint[0] + confidence, datapoint[1]]
           ),
           color: ANALYTIC_UNIT_COLORS[0],
-          overrides: [{ alias: 'Confidence interval upper', linewidth: 1, fill: 0 }]
+          overrides: [{ alias: '[AnomalyDetector]: upper bound', linewidth: 1, fill: 0 }]
         },
+        hsrSerie
       ];
     }
-    return {
-      ...hsr,
-      color: ANALYTIC_UNIT_COLORS[0],
-      // TODO: render it separately from Metric series
-      overrides: [
-        { alias: 'HSR', linewidth: 3, fill: 0 }
-      ]
-    };
+    return hsrSerie;
   }
 
   get inspectedAnalyticUnit(): AnalyticUnit | null {
diff --git a/src/panel/graph_panel/models/detection.ts b/src/panel/graph_panel/models/detection.ts
index 166f8f0..9447aea 100644
--- a/src/panel/graph_panel/models/detection.ts
+++ b/src/panel/graph_panel/models/detection.ts
@@ -14,7 +14,7 @@ export type DetectionSpan = {
 };
 
 export const DETECTION_STATUS_TEXT = new Map<DetectionStatus, string>([
-  [DetectionStatus.READY, 'Detection is done'],
-  [DetectionStatus.RUNNING, 'Detection is running...'],
-  [DetectionStatus.FAILED, 'Detection failed']
+  [DetectionStatus.READY, '[DetectionStatus]: done'],
+  [DetectionStatus.RUNNING, '[DetectionStatus]: running...'],
+  [DetectionStatus.FAILED, '[DetectionStatus]: failed']
 ]);
diff --git a/src/panel/graph_panel/services/analytic_service.ts b/src/panel/graph_panel/services/analytic_service.ts
index 3b87ac3..401c502 100644
--- a/src/panel/graph_panel/services/analytic_service.ts
+++ b/src/panel/graph_panel/services/analytic_service.ts
@@ -12,6 +12,10 @@ import { appEvents } from 'grafana/app/core/core';
 
 import * as _ from 'lodash';
 
+type TableTimeSeries = {
+  values: [number, number][];
+  columns: string[];
+};
 
 export class AnalyticService {
   private _isUp: boolean = false;
@@ -201,8 +205,8 @@ export class AnalyticService {
   }
 
   async getHSR(analyticUnitId: AnalyticUnitId, from: number, to: number): Promise<{
-    values: [number, number][];
-    columns: string[];
+    hsr: TableTimeSeries,
+    smoothed?: TableTimeSeries
   } | null> {
     const data = await this.get('/query', { analyticUnitId, from, to });
     if(data === undefined) {

From 9e2255e9f11daffd29fdf775c577b870f3f9b6c1 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Wed, 15 May 2019 04:14:41 +0300
Subject: [PATCH 10/21] Seasonality checkbox is disabled on clearing
 seasonality period input #304 (#305)

---
 src/panel/graph_panel/controllers/analytic_controller.ts | 5 ++++-
 src/panel/graph_panel/graph_ctrl.ts                      | 4 ++--
 src/panel/graph_panel/partials/tab_analytics.html        | 5 +++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index d5c600c..65cf5c9 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -696,8 +696,11 @@ export class AnalyticController {
       .forEach(unit => unit.inspect = false);
   }
 
-  public async updateSeasonality(id: AnalyticUnitId) {
+  public async updateSeasonality(id: AnalyticUnitId, value?: number) {
     const analyticUnit = this._analyticUnitsSet.byId(id) as AnomalyAnalyticUnit;
+    if(value !== undefined) {
+      analyticUnit.seasonalityPeriod.value = value;
+    }
     await this.saveAnalyticUnit(analyticUnit);
   }
 
diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts
index 60dc7ef..700a607 100644
--- a/src/panel/graph_panel/graph_ctrl.ts
+++ b/src/panel/graph_panel/graph_ctrl.ts
@@ -682,8 +682,8 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.refresh();
   }
 
-  onSeasonalityChange(id: AnalyticUnitId) {
-    this.analyticsController.updateSeasonality(id);
+  onSeasonalityChange(id: AnalyticUnitId, value?: number) {
+    this.analyticsController.updateSeasonality(id, value);
     this.refresh();
   }
 
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index b4f0792..6b04f39 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -253,8 +253,9 @@
           <label class="gf-form-label width-9"> Seasonality Period </label>
           <input
             type="number" class="gf-form-input width-5"
-            ng-model="analyticUnit.seasonalityPeriod.value"
-            ng-blur="ctrl.onSeasonalityChange(analyticUnit.id)"
+            ng-init="seasonalityValue = analyticUnit.seasonalityPeriod.value"
+            ng-model="seasonalityValue"
+            ng-blur="ctrl.onSeasonalityChange(analyticUnit.id, seasonalityValue)"
             min="0"
           >
         </div>

From 9aeb8630575b8a5966e1c5c32e26afd325d64aae Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Wed, 15 May 2019 15:34:19 +0300
Subject: [PATCH 11/21] Minor UI fix

---
 src/panel/graph_panel/partials/tab_analytics.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 6b04f39..2ae57b1 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -272,7 +272,7 @@
             <select class="gf-form-input width-8"
               ng-model="analyticUnit.seasonalityPeriod.unit"
               ng-change="ctrl.onSeasonalityChange(analyticUnit.id)"
-              ng-options="type for type in ['seconds', 'minutes', 'days', 'hours', 'days', 'years']"
+              ng-options="type for type in ['seconds', 'minutes', 'hours', 'days', 'years']"
             />
           </div>
         </div>

From 7f73db071666af9d4eb802b10b05f154136ba415 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Thu, 16 May 2019 13:38:24 +0300
Subject: [PATCH 12/21] Anomaly analytic unit: fetch confidence bounds from
 server #306 (#307)

---
 .../controllers/analytic_controller.ts        | 46 +++++++++----------
 .../graph_panel/services/analytic_service.ts  |  6 ++-
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index 65cf5c9..730e630 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -1,12 +1,11 @@
 // Corresponds to https://github.com/hastic/hastic-server/blob/master/server/src/models/analytic_units/analytic_unit.ts
 
-import { AnalyticService } from '../services/analytic_service';
+import { AnalyticService, TableTimeSeries } from '../services/analytic_service';
 
 import {
   AnalyticUnitId, AnalyticUnit,
   AnalyticSegment, AnalyticSegmentsSearcher, AnalyticSegmentPair,
-  LabelingMode,
-  DetectorType
+  LabelingMode
 } from '../models/analytic_units/analytic_unit';
 import { AnomalyAnalyticUnit } from '../models/analytic_units/anomaly_analytic_unit';
 import { AnalyticUnitsSet } from '../models/analytic_units/analytic_units_set';
@@ -502,7 +501,8 @@ export class AnalyticController {
 
   async getHSR(from: number, to: number): Promise<{
     hsr: HSRTimeSeries,
-    smoothed?: HSRTimeSeries
+    lowerBound?: HSRTimeSeries,
+    upperBound?: HSRTimeSeries
   } | null> {
     // Returns HSR (Hastic Signal Representation) for analytic unit in "Inspect" mode
     // Returns null when there are no analytic units in "Inspect" mode
@@ -516,19 +516,14 @@ export class AnalyticController {
       return null;
     }
 
-    const hsrDatapoints = response.hsr.values.map(value => value.reverse() as [number, number]);
-    const hsrTimeSeries = { target: 'HSR', datapoints: hsrDatapoints };
-
-    let smoothed: HSRTimeSeries;
-    if(response.smoothed !== undefined) {
-      // TODO: remove duplication with hsrDatapoints
-      const smoothedDatapoints = response.smoothed.values.map(value => value.reverse() as [number, number]);
-      smoothed = { target: 'Smoothed data', datapoints: smoothedDatapoints };
-    }
+    const hsr = convertTableToTimeSeries('HSR', response.hsr);
+    const lowerBound = convertTableToTimeSeries('Lower bound', response.lowerBound);
+    const upperBound = convertTableToTimeSeries('Upper bound', response.upperBound);
 
     return {
-      hsr: hsrTimeSeries,
-      smoothed
+      hsr,
+      lowerBound,
+      upperBound
     };
   }
 
@@ -546,23 +541,19 @@ export class AnalyticController {
         { alias: 'HSR', linewidth: 3, fill: 0 }
       ]
     };
-    if(response.smoothed !== undefined) {
-      const confidence = (this.inspectedAnalyticUnit as AnomalyAnalyticUnit).confidence;
+
+    if(response.lowerBound !== undefined && response.upperBound !== undefined) {
       // TODO: looks bad
       return [
         {
           target: '[AnomalyDetector]: lower bound',
-          datapoints: response.smoothed.datapoints.map(datapoint =>
-            [datapoint[0] - confidence, datapoint[1]]
-          ),
+          datapoints: response.lowerBound.datapoints,
           color: ANALYTIC_UNIT_COLORS[0],
           overrides: [{ alias: '[AnomalyDetector]: lower bound', linewidth: 1, fill: 0 }]
         },
         {
           target: '[AnomalyDetector]: upper bound',
-          datapoints: response.smoothed.datapoints.map(datapoint =>
-            [datapoint[0] + confidence, datapoint[1]]
-          ),
+          datapoints: response.upperBound.datapoints,
           color: ANALYTIC_UNIT_COLORS[0],
           overrides: [{ alias: '[AnomalyDetector]: upper bound', linewidth: 1, fill: 0 }]
         },
@@ -738,3 +729,12 @@ function addAlphaToRGB(colorString: string, alpha: number): string {
     return colorString;
   }
 }
+
+function convertTableToTimeSeries(target: string, tableData?: TableTimeSeries): HSRTimeSeries {
+  if(tableData === undefined) {
+    return undefined;
+  }
+  const datapoints = tableData.values.map(value => value.reverse() as [number, number]);
+
+  return { target, datapoints };
+}
diff --git a/src/panel/graph_panel/services/analytic_service.ts b/src/panel/graph_panel/services/analytic_service.ts
index 401c502..fb16d93 100644
--- a/src/panel/graph_panel/services/analytic_service.ts
+++ b/src/panel/graph_panel/services/analytic_service.ts
@@ -12,7 +12,8 @@ import { appEvents } from 'grafana/app/core/core';
 
 import * as _ from 'lodash';
 
-type TableTimeSeries = {
+// TODO: TableTimeSeries is bad name
+export type TableTimeSeries = {
   values: [number, number][];
   columns: string[];
 };
@@ -206,7 +207,8 @@ export class AnalyticService {
 
   async getHSR(analyticUnitId: AnalyticUnitId, from: number, to: number): Promise<{
     hsr: TableTimeSeries,
-    smoothed?: TableTimeSeries
+    lowerBound?: TableTimeSeries,
+    upperBound?: TableTimeSeries
   } | null> {
     const data = await this.get('/query', { analyticUnitId, from, to });
     if(data === undefined) {

From e868fb60d7ad9467f9e766cc48ee17c0e56811fb Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Thu, 16 May 2019 21:38:14 +0300
Subject: [PATCH 13/21] Missing detections on a bigger zoom #269 (#308)

---
 .../controllers/analytic_controller.ts        |  4 ++--
 src/panel/graph_panel/graph_ctrl.ts           | 21 ++++++-------------
 .../graph_panel/partials/tab_analytics.html   |  2 +-
 .../graph_panel/services/analytic_service.ts  |  2 +-
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index 730e630..ba7e1f6 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -319,7 +319,7 @@ export class AnalyticController {
     const ids = this.analyticUnits.map(analyticUnit => analyticUnit.id);
     await this._analyticService.runDetect(ids);
 
-    _.each(this.analyticUnits, analyticUnit => this._runStatusWaiter(analyticUnit));
+    this.fetchAnalyticUnitsStatuses();
   }
 
   async runDetect(analyticUnitId: AnalyticUnitId, from?: number, to?: number) {
@@ -617,7 +617,7 @@ export class AnalyticController {
         }
         analyticUnit.detectionSpans = data;
         let isFinished = true;
-        for (let detection of data) {
+        for(let detection of data) {
           if(detection.status === DetectionStatus.RUNNING) {
             isFinished = false;
           }
diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts
index 700a607..53106fe 100644
--- a/src/panel/graph_panel/graph_ctrl.ts
+++ b/src/panel/graph_panel/graph_ctrl.ts
@@ -272,12 +272,7 @@ class GraphCtrl extends MetricsPanelCtrl {
       if(analyticUnit.status === '404') {
         await this.analyticsController.removeAnalyticUnit(analyticUnit.id, true);
       }
-      if(analyticUnit.status === 'READY') {
-        const { from, to } = this.rangeTimestamp;
-        await this.analyticsController.fetchSegments(analyticUnit, from, to);
-      }
-      this.render(this.seriesList);
-      this.$scope.$digest();
+      this.refresh();
     });
 
     appEvents.on('ds-request-response', data => {
@@ -326,7 +321,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     }
 
     this.analyticsController = new AnalyticController(this._grafanaUrl, this._panelId, this.panel, this.events, this.analyticService);
-    this.analyticsController.fetchAnalyticUnitsStatuses();
 
     this._updatePanelInfo();
     this.analyticsController.updateServerInfo();
@@ -409,15 +403,12 @@ class GraphCtrl extends MetricsPanelCtrl {
     }
 
     if(this.analyticsController !== undefined) {
+      await this.analyticsController.fetchAnalyticUnitsSegments(from, to);
+      // TODO: make statuses and detection spans connected
+      this.analyticsController.fetchAnalyticUnitsStatuses();
       this.analyticsController.stopAnalyticUnitsDetectionsFetching();
-      const loadTasks = [
-        // this.annotationsPromise,
-        this.analyticsController.fetchAnalyticUnitsSegments(from, to)
-      ];
-
-      await Promise.all(loadTasks);
-      // this.annotations = results[0].annotations;
-      await this.analyticsController.fetchAnalyticUnitsDetections(
+      // TODO: re-run detection waiters if this._dataTimerange is changed
+      this.analyticsController.fetchAnalyticUnitsDetections(
         this._dataTimerange.from,
         this._dataTimerange.to
       );
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 2ae57b1..624e1b8 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -12,7 +12,7 @@
 <div class="gf-form">
   <div class="gf-form-button-row" ng-if="ctrl.analyticsController.serverStatus === false">
     <h5>Hastic server at "{{ctrl.hasticDatasource.url}}" is not available</h5>
-    <button class="btn btn-inverse" ng-click="ctrl.runDatasourceConnectivityCheck()">
+    <button class="btn btn-inverse" ng-click="ctrl.onHasticDatasourceChange()">
       <i class="fa fa-plug"></i>
       Reconnect to Hastic server
     </button>
diff --git a/src/panel/graph_panel/services/analytic_service.ts b/src/panel/graph_panel/services/analytic_service.ts
index fb16d93..bc6b2a2 100644
--- a/src/panel/graph_panel/services/analytic_service.ts
+++ b/src/panel/graph_panel/services/analytic_service.ts
@@ -251,7 +251,7 @@ export class AnalyticService {
     } catch(error) {
       // xhrStatus may be one of: ('complete', 'error', 'timeout' or 'abort')
       // See: https://github.com/angular/angular.js/blob/55075b840c9194b8524627a293d6166528b9a1c2/src/ng/http.js#L919-L920
-      if(error.xhrStatus !== 'complete') {
+      if(error.xhrStatus !== 'complete' || error.status === 502) {
         this.displayConnectionErrorAlert();
         this._isUp = false;
       } else {

From d965d0b00f27481bf96a78d570e6f5bfb7c7dfc8 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Mon, 20 May 2019 11:52:04 +0300
Subject: [PATCH 14/21] UI improvements (#310)

* disable Add Analytic Unit button

* width fixes

* cancel word instead of icon

* Save button

* Cancel creation

* Disable Detect if not saved
---
 .../controllers/analytic_controller.ts        |  18 +-
 src/panel/graph_panel/graph_ctrl.ts           |  10 +-
 .../models/analytic_units/analytic_unit.ts    |   4 +
 .../graph_panel/partials/tab_analytics.html   | 162 ++++++++++--------
 4 files changed, 119 insertions(+), 75 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index ba7e1f6..0312108 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -103,6 +103,11 @@ export class AnalyticController {
     }
   }
 
+  cancelCreation() {
+    delete this._newAnalyticUnit;
+    this._creatingNewAnalyticUnit = false;
+  }
+
   async saveNew(metric: MetricExpanded, datasource: DatasourceRequest) {
     this._savingNewAnalyticUnit = true;
     const newAnalyticUnit = createAnalyticUnit(this._newAnalyticUnit.toJSON());
@@ -215,7 +220,7 @@ export class AnalyticController {
     } else {
       analyticUnit.labeledColor = value;
     }
-    await this.saveAnalyticUnit(analyticUnit);
+    analyticUnit.changed = true;
   }
 
   fetchAnalyticUnitsStatuses() {
@@ -474,6 +479,10 @@ export class AnalyticController {
     await this._analyticService.setAnalyticUnitAlert(analyticUnit);
   }
 
+  toggleAnalyticUnitChange(analyticUnit: AnalyticUnit, value: boolean): void {
+    analyticUnit.changed = value;
+  }
+
   async saveAnalyticUnit(analyticUnit: AnalyticUnit): Promise<void> {
     if(analyticUnit.id === null || analyticUnit.id === undefined) {
       throw new Error('Cannot save analytic unit without id');
@@ -482,6 +491,7 @@ export class AnalyticController {
     analyticUnit.saving = true;
     await this._analyticService.updateAnalyticUnit(analyticUnit.toJSON());
     analyticUnit.saving = false;
+    analyticUnit.changed = false;
   }
 
   async getAnalyticUnits(): Promise<any[]> {
@@ -671,14 +681,14 @@ export class AnalyticController {
     return this._tempIdCounted.toString();
   }
 
-  public async toggleVisibility(id: AnalyticUnitId, value?: boolean) {
+  public toggleVisibility(id: AnalyticUnitId, value?: boolean) {
     const analyticUnit = this._analyticUnitsSet.byId(id);
     if(value !== undefined) {
       analyticUnit.visible = value;
     } else {
       analyticUnit.visible = !analyticUnit.visible;
     }
-    await this.saveAnalyticUnit(analyticUnit);
+    analyticUnit.changed = true;
   }
 
   public toggleInspect(id: AnalyticUnitId) {
@@ -692,7 +702,7 @@ export class AnalyticController {
     if(value !== undefined) {
       analyticUnit.seasonalityPeriod.value = value;
     }
-    await this.saveAnalyticUnit(analyticUnit);
+    analyticUnit.changed = true;
   }
 
   public onAnalyticUnitDetectorChange(analyticUnitTypes: any) {
diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts
index 53106fe..0f06577 100644
--- a/src/panel/graph_panel/graph_ctrl.ts
+++ b/src/panel/graph_panel/graph_ctrl.ts
@@ -562,6 +562,10 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.analyticsController.createNew();
   }
 
+  cancelCreation() {
+    this.analyticsController.cancelCreation();
+  }
+
   redetectAll() {
     this.analyticsController.redetectAll();
   }
@@ -600,7 +604,11 @@ class GraphCtrl extends MetricsPanelCtrl {
     await this.analyticsController.toggleAnalyticUnitAlert(analyticUnit);
   }
 
-  async onAnalyticUnitChange(analyticUnit: AnalyticUnit) {
+  onAnalyticUnitChange(analyticUnit: AnalyticUnit) {
+    this.analyticsController.toggleAnalyticUnitChange(analyticUnit, true);
+  }
+
+  async onAnalyticUnitSave(analyticUnit: AnalyticUnit) {
     await this.analyticsController.saveAnalyticUnit(analyticUnit);
     this.refresh();
   }
diff --git a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
index 1d39cc1..491b822 100644
--- a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
+++ b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
@@ -60,6 +60,7 @@ export class AnalyticUnit {
   private _segmentSet = new SegmentArray<AnalyticSegment>();
   private _detectionSpans: DetectionSpan[];
   private _inspect = false;
+  private _changed = false;
   private _status: string;
   private _error: string;
 
@@ -117,6 +118,9 @@ export class AnalyticUnit {
   get saving(): boolean { return this._saving; }
   set saving(value: boolean) { this._saving = value; }
 
+  get changed(): boolean { return this._changed; }
+  set changed(value: boolean) { this._changed = value; }
+
   get inspect(): boolean { return this._inspect; }
   set inspect(value: boolean) { this._inspect = value; }
 
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 624e1b8..0f14006 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -37,7 +37,7 @@
         <div class="gf-form">
           <label class="gf-form-label width-5"> Type </label>
           <div class="gf-form-select-wrapper">
-            <select class="gf-form-input width-10"
+            <select class="gf-form-input width-9"
               ng-model="analyticUnit.type"
               ng-options="type.value as type.name for type in ctrl.analyticUnitTypes[analyticUnit.detectorType]"
               ng-disabled="true"
@@ -73,7 +73,7 @@
             class="gf-form"
             style="margin-bottom: 0"
             label="Inspect"
-            label-class="width-7"
+            label-class="width-5"
             on-change="ctrl.onToggleInspect(analyticUnit.id)"
             checked="analyticUnit.inspect"
           />
@@ -127,57 +127,24 @@
           </label>
         </div>
 
-        <div class="gf-form">
-          <label class="gf-form-label">
-            <a
-              ng-if="!analyticUnit.selected"
-              ng-click="ctrl.onRemove(analyticUnit.id)"
-              class="pointer"
-            >
-              <i class="fa fa-trash"></i>
-            </a>
+        <div class="gf-form" ng-if="!analyticUnit.selected">
+          <a
+            class="btn btn-danger"
+            ng-click="ctrl.onRemove(analyticUnit.id)"
+          >
+            <i class="fa fa-trash"></i>
+          </a>
+        </div>
 
+        <div class="gf-form" ng-if="analyticUnit.selected">
+          <div class="gf-form-label">
             <a
-              ng-if="analyticUnit.selected"
-              ng-click="ctrl.onCancelLabeling(analyticUnit.id)"
               class="pointer"
+              ng-click="ctrl.onCancelLabeling(analyticUnit.id)"
             >
-              <i class="fa fa-ban"></i>
-            </a>
-          </label>
-        </div>
-
-        <div class="gf-form" ng-if="analyticUnit.selected && !analyticUnit.saving">
-          <!-- Standard way to add conditions to ng-style: https://stackoverflow.com/a/29470439 -->
-          <label
-            class="gf-form-label"
-            ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
-            ng-disabled="analyticUnit.status === 'LEARNING'"
-          >
-            <a class="pointer"
-              ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
-              ng-disabled="analyticUnit.status === 'LEARNING'"
-            >
-              <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
-              <b ng-if="!analyticUnit.saving"> Detect </b>
-              <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
-              </a>
-          </label>
-        </div>
-
-        <div class="gf-form"
-          ng-if="
-            analyticUnit.detectorType === 'threshold' ||
-            (analyticUnit.detectorType === 'anomaly' && !analyticUnit.hasSeasonality)
-          "
-        >
-          <label class="gf-form-label">
-            <a class="pointer" ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)">
-              <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
-              <b ng-if="!analyticUnit.saving"> Detect </b>
-              <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
+              Cancel
             </a>
-          </label>
+          </div>
         </div>
 
         <div class="gf-form">
@@ -195,16 +162,16 @@
         <!-- TODO: move analytic-unit-specific fields rendering to class -->
         <div class="gf-form" ng-if="analyticUnit.detectorType === 'threshold'">
           <label class="gf-form-label width-5"> Condition </label>
-          <select class="gf-form-input width-5"
+          <select class="gf-form-input"
             ng-class="{
               'width-5': analyticUnit.condition !== 'NO_DATA',
-              'width-10': analyticUnit.condition === 'NO_DATA'
+              'width-9': analyticUnit.condition === 'NO_DATA'
             }"
             ng-model="analyticUnit.condition"
             ng-options="type for type in ctrl.analyticsController.conditions"
             ng-change="ctrl.onAnalyticUnitChange(analyticUnit)"
           />
-          <input class="gf-form-input width-5"
+          <input class="gf-form-input width-4"
             ng-if="analyticUnit.condition !== 'NO_DATA'"
             type="number"
             ng-model="analyticUnit.value"
@@ -212,10 +179,9 @@
           />
         </div>
 
-        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly' && !analyticUnit.selected">
+        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly'">
           <label class="gf-form-label width-5"> Alpha </label>
-          <input class="gf-form-input width-10"
-            ng-hide="analyticUnit.selected"
+          <input class="gf-form-input width-9"
             min="0"
             max="1"
             type="number"
@@ -224,7 +190,7 @@
           />
         </div>
 
-        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly' && !analyticUnit.selected">
+        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly'">
           <label class="gf-form-label width-6"> Confidence </label>
           <input class="gf-form-input width-5"
             min="0"
@@ -234,7 +200,7 @@
           />
         </div>
 
-        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly' && !analyticUnit.selected">
+        <div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly'">
           <!-- TODO: Remove hack with "margin-bottom: 0" -->
           <gf-form-switch
             class="gf-form"
@@ -248,7 +214,7 @@
 
         <div
           class="gf-form"
-          ng-if="analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality && !analyticUnit.selected"
+          ng-if="analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality"
         >
           <label class="gf-form-label width-9"> Seasonality Period </label>
           <input
@@ -263,8 +229,7 @@
         <div class="gf-form"
           ng-if="
             analyticUnit.detectorType === 'anomaly' &&
-            analyticUnit.hasSeasonality &&
-            !analyticUnit.selected
+            analyticUnit.hasSeasonality
           "
         >
           <div class="gf-form-select-wrapper">
@@ -277,28 +242,75 @@
           </div>
         </div>
       </div>
+      
+      <div class="gf-form-inline">
+        <div class="gf-form width-20"/>
+        <div class="gf-form">
+          <button class="btn btn-secondary"
+            ng-click="ctrl.onAnalyticUnitSave(analyticUnit)"
+            ng-disabled="!analyticUnit.changed"
+          >
+            <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
+            <b ng-if="!analyticUnit.saving"> Save </b>
+            <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
+          </button>
+        </div>
+
+        <!-- TODO: Leave one Detect button instead of 2 -->
+        <div class="gf-form"
+          ng-if="
+            analyticUnit.detectorType === 'pattern' ||
+            (analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality)
+          "
+        >
+          <button class="btn btn-secondary"
+            ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
+            ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed || !analyticUnit.segments.length"
+          >
+            <b> Detect </b>
+          </button>
+        </div>
+
+        <div class="gf-form"
+          ng-if="
+            analyticUnit.detectorType === 'threshold' ||
+            (analyticUnit.detectorType === 'anomaly' && !analyticUnit.hasSeasonality)
+          "
+        >
+          <button class="btn btn-secondary"
+            ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)"
+            ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed"
+          >
+            <b> Detect </b>
+          </button>
+        </div>
+      </div>
     </div>
 
-    <div class="editor-row" ng-if="ctrl.analyticsController.creatingNew">
+    <div class="gf-form-inline" ng-if="ctrl.analyticsController.creatingNew">
       <div class="gf-form">
         <label class="gf-form-label width-5"> Name </label>
         <input
           type="text" class="gf-form-input width-15"
           ng-model="ctrl.analyticsController.newAnalyticUnit.name"
         >
+      </div>
 
+      <div class="gf-form">
         <label class="gf-form-label width-8"> Detector Type </label>
         <div class="gf-form-select-wrapper">
-          <select class="gf-form-input width-7"
+          <select class="gf-form-input width-8"
             ng-model="ctrl.analyticsController.newAnalyticUnit.detectorType"
             ng-options="analyticUnitDetectorType for analyticUnitDetectorType in ctrl.analyticUnitDetectorTypes"
             ng-change="ctrl.analyticsController.onAnalyticUnitDetectorChange(ctrl.analyticUnitTypes);"
           />
         </div>
+      </div>
 
+      <div class="gf-form">
         <label class="gf-form-label width-5"> Type </label>
         <div class="gf-form-select-wrapper">
-          <select class="gf-form-input width-10"
+          <select class="gf-form-input width-9"
             ng-model="ctrl.analyticsController.newAnalyticUnit.type"
             ng-options="
               type.value as type.name
@@ -306,18 +318,28 @@
             "
           />
         </div>
+      </div>
 
-        <label class="gf-form-label">
-          <a class="pointer" tabindex="1" ng-click="ctrl.saveNew()">
-            <b ng-if="!ctrl.analyticsController.saving"> create </b>
-            <b ng-if="ctrl.analyticsController.saving" ng-disabled="true"> saving... </b>
-          </a>
-        </label>
+      <div class="gf-form">
+        <a class="btn btn-danger" ng-click="ctrl.cancelCreation()">
+          <b> Cancel </b>
+        </a>
+      </div>
+
+      <div class="gf-form">
+        <a class="btn btn-secondary" ng-click="ctrl.saveNew()">
+          <b ng-if="!ctrl.analyticsController.saving"> Create </b>
+          <b ng-if="ctrl.analyticsController.saving" ng-disabled="true"> Saving... </b>
+        </a>
       </div>
     </div>
 
-    <div class="gf-form-button-row" ng-if="!ctrl.analyticsController.creatingAnalyticUnit">
-      <button class="btn btn-secondary width-12" ng-click="ctrl.createNew()">
+    <div class="gf-form-button-row">
+      <button
+        class="btn btn-secondary width-12"
+        ng-click="ctrl.createNew()"
+        ng-disabled="ctrl.analyticsController.creatingNew"
+      >
         <i class="fa fa-plus"></i>
         Add Analytic Unit
       </button>

From 8904074114110ef314071953140df743dd989b8e Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Mon, 20 May 2019 13:29:52 +0300
Subject: [PATCH 15/21] Minor UI fix

---
 src/panel/graph_panel/partials/tab_analytics.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 0f14006..54f488e 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -265,7 +265,7 @@
         >
           <button class="btn btn-secondary"
             ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
-            ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed || !analyticUnit.segments.length"
+            ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed || !analyticUnit.selected"
           >
             <b> Detect </b>
           </button>

From 581558a0fe7cc0e9d0ae58d442e1e5721656cda2 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Mon, 20 May 2019 14:58:27 +0300
Subject: [PATCH 16/21] Send dashboard timerange on "Redetect all"

---
 src/panel/graph_panel/controllers/analytic_controller.ts | 4 ++--
 src/panel/graph_panel/graph_ctrl.ts                      | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index 0312108..f8a4fec 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -314,7 +314,7 @@ export class AnalyticController {
     return newIds;
   }
 
-  async redetectAll() {
+  async redetectAll(from?: number, to?: number) {
     this.analyticUnits.forEach(unit => {
       // TODO: remove duplication with runDetect
       unit.segments.clear();
@@ -322,7 +322,7 @@ export class AnalyticController {
       unit.status = null;
     });
     const ids = this.analyticUnits.map(analyticUnit => analyticUnit.id);
-    await this._analyticService.runDetect(ids);
+    await this._analyticService.runDetect(ids, from, to);
 
     this.fetchAnalyticUnitsStatuses();
   }
diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts
index 0f06577..8472b35 100644
--- a/src/panel/graph_panel/graph_ctrl.ts
+++ b/src/panel/graph_panel/graph_ctrl.ts
@@ -567,7 +567,8 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   redetectAll() {
-    this.analyticsController.redetectAll();
+    const { from, to } = this.rangeTimestamp;
+    this.analyticsController.redetectAll(from, to);
   }
 
   async runDetectInCurrentRange(analyticUnitId: AnalyticUnitId) {

From cf45f224aa51380d9b7eb6a7d2bd1e052938a3e3 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@hastic.io>
Date: Mon, 20 May 2019 16:10:13 +0300
Subject: [PATCH 17/21] DETECTION and SUCCESS statuses (#314)

---
 src/panel/graph_panel/models/analytic_units/analytic_unit.ts | 2 ++
 src/panel/graph_panel/partials/tab_analytics.html            | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
index 491b822..a7c48b6 100644
--- a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
+++ b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts
@@ -157,8 +157,10 @@ export class AnalyticUnit {
       value !== '404' &&
       value !== 'READY' &&
       value !== 'LEARNING' &&
+      value !== 'DETECTION' &&
       value !== 'PENDING' &&
       value !== 'FAILED' &&
+      value !== 'SUCCESS' &&
       value !== null
     ) {
       throw new Error('Unsupported status value: ' + value);
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 54f488e..65a0e4f 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -150,7 +150,9 @@
         <div class="gf-form">
           <label>
             <i ng-if="analyticUnit.status === 'READY'" class="grafana-tip fa fa-check-circle ng-scope" bs-tooltip="'Ready'"></i>
+            <i ng-if="analyticUnit.status === 'SUCCESS'" class="grafana-tip fa fa-check ng-scope" bs-tooltip="'Learning succeeded'"></i>
             <i ng-if="analyticUnit.status === 'LEARNING'" class="grafana-tip fa fa-leanpub ng-scope" bs-tooltip="'Learning'"></i>
+            <i ng-if="analyticUnit.status === 'DETECTION'" class="grafana-tip fa fa-search ng-scope" bs-tooltip="'Detection'"></i>
             <i ng-if="analyticUnit.status === 'PENDING'" class="grafana-tip fa fa-list-ul ng-scope" bs-tooltip="'Pending'"></i>
             <i ng-if="analyticUnit.status === 'FAILED'" class="grafana-tip fa fa-exclamation-circle ng-scope" bs-tooltip="'Error: ' + analyticUnit.error"></i>
           </label>

From c5b5fa509e04158074d6baaab3c4fba225f8471b Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Mon, 20 May 2019 16:31:23 +0300
Subject: [PATCH 18/21] Bump version to 0.3.4

---
 package.json    | 2 +-
 src/plugin.json | 2 +-
 src/utlis.ts    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index cfc93cc..cfe37e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "grafana-hastic-app",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Hastic app: labeling and rendeting analytics from hastic-server",
   "main": "dist/module",
   "scripts": {
diff --git a/src/plugin.json b/src/plugin.json
index e22778d..0d70fef 100644
--- a/src/plugin.json
+++ b/src/plugin.json
@@ -11,7 +11,7 @@
       "small": "img/icn-graph-panel.png",
       "large": "img/icn-graph-panel.png"
     },
-    "version": "0.3.3"
+    "version": "0.3.4"
   },
   "includes": [
     { "type": "panel", "name": "Hastic Graph Panel" },
diff --git a/src/utlis.ts b/src/utlis.ts
index 83cbca5..f2190c8 100644
--- a/src/utlis.ts
+++ b/src/utlis.ts
@@ -1,7 +1,7 @@
 import url from 'url-parse';
 import * as _ from 'lodash';
 
-export const SUPPORTED_SERVER_VERSION = '0.3.3-beta';
+export const SUPPORTED_SERVER_VERSION = '0.3.4-beta';
 
 export function normalizeUrl(inputUrl: string) {
   if(!inputUrl) {

From 644cfd5c698efecc252e5498c451cdc4d979fcff Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <av@corpglory.com>
Date: Sat, 25 May 2019 23:29:26 +0300
Subject: [PATCH 19/21] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7ce9591..388b07a 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ See also:
 # Prerequisites
 
 * [hastic-server](https://github.com/hastic/hastic-server)
-* [Grafana >= 5.4.0](https://grafana.com/grafana/download)
+* [Grafana >= 5.4.0](https://grafana.com/grafana/download), we don't support Grafana 6.x.x yet
 
 ## Support and Consulting
 

From 17e4a272b71c6e0e1058b5560bb09d364cc51854 Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <av@corpglory.com>
Date: Sat, 25 May 2019 23:36:15 +0300
Subject: [PATCH 20/21] fx broken "Installation from source"

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 388b07a..2daf408 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ See also:
 * [Wiki](https://github.com/hastic/hastic-grafana-app/wiki)
 * [FAQ](https://github.com/hastic/hastic-grafana-app/wiki/FAQ)
 * [Hastic-server](https://github.com/hastic/hastic-server)
-* [Installation from source](https://github.com/hastic/hastic-grafana-app/wiki/Installation-from-source)
+* [Installation from source](https://github.com/hastic/hastic-grafana-app/wiki/Development#install-from-source)
 * [Changelog](https://github.com/hastic/hastic-grafana-app/wiki/Changelog)
 
 # Prerequisites

From c7227c997f4daaf18bff3ca47bbd9f46136b4ca2 Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <av@corpglory.com>
Date: Sat, 25 May 2019 23:36:39 +0300
Subject: [PATCH 21/21] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2daf408..0951533 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ See also:
 * [Wiki](https://github.com/hastic/hastic-grafana-app/wiki)
 * [FAQ](https://github.com/hastic/hastic-grafana-app/wiki/FAQ)
 * [Hastic-server](https://github.com/hastic/hastic-server)
-* [Installation from source](https://github.com/hastic/hastic-grafana-app/wiki/Development#install-from-source)
+* [Install from source](https://github.com/hastic/hastic-grafana-app/wiki/Development#install-from-source)
 * [Changelog](https://github.com/hastic/hastic-grafana-app/wiki/Changelog)
 
 # Prerequisites