Show progress when reconnecting to hastic datasource #412 (#417)

src/panel/graph_panel/graph_ctrl.ts

@@ -9,7 +9,7 @@ import { MetricExpanded } from './models/metric';
 import { DatasourceRequest } from './models/datasource';
 import { AnalyticUnitId, AnalyticUnit, LabelingMode } from './models/analytic_units/analytic_unit';
 import { BOUND_TYPES } from './models/analytic_units/anomaly_analytic_unit';
-import { AnalyticService } from './services/analytic_service';
+import { AnalyticService, HasticDatasourceConnectionStatus } from './services/analytic_service';
 import { AnalyticController } from './controllers/analytic_controller';
 import { HasticPanelInfo } from './models/hastic_panel_info';
 import { PanelTemplate, TemplateVariables } from './models/panel';
@@ -363,6 +363,10 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.refresh();
   }
 
+  get connectionStatus(): HasticDatasourceConnectionStatus {
+    return this.analyticService.connectionStatus;
+  }
+
   issueQueries(datasource) {
     // this.annotationsPromise = this.annotationsSrv.getAnnotations({
     //   dashboard: this.dashboard,

src/panel/graph_panel/partials/reconnect_to_datasource.html

@@ -1,7 +1,20 @@
 <div class="gf-form-button-row" ng-if="ctrl.hasticDatasource !== undefined && ctrl.analyticsController.serverStatus === false">
-  <h5>Hastic server at "{{ctrl.hasticDatasource.url}}" is not available</h5>
-  <button class="btn btn-inverse" ng-click="ctrl.onHasticDatasourceChange()">
-    <i class="fa fa-plug"></i>
-    Reconnect to Hastic server
-  </button>
+  <div class="gf-form-group">
+    <div class="alert-{{ctrl.connectionStatus.status}} alert"">
+      <div class="alert-icon">
+        <i class="fa fa-spiner fa-spin" ng-show="ctrl.connectionStatus.status === 'info'"></i>
+        <i class="fa fa-exclamation-triangle" ng-show="ctrl.connectionStatus.status === 'error'"></i>
+        <i class="fa fa-check" ng-show="ctrl.connectionStatus.status !== 'error'"></i>
+      </div>
+      <div class="alert-body">
+        <div class="alert-title" ng-bind-html="ctrl.connectionStatus.message" />
+      </div>
+    </div>
+    <div ng-hide="ctrl.connectionStatus.status === 'info'">
+      <button class="btn btn-secondary" ng-click="ctrl.onHasticDatasourceChange()">
+        <i class="fa fa-plug"></i>
+        &nbsp; Connect to Hastic Datasource
+      </button>
+    </div>
+  </div>
 </div>

src/panel/graph_panel/partials/tab_webhooks.html

@@ -1,5 +1,3 @@
-<ng-include src="ctrl.partialsPath + '/reconnect_to_datasource.html'" />
-
 <div ng-if="ctrl.analyticsController.serverStatus === true">
   <div ng-if="!ctrl.analyticsController.analyticUnits.length">
     <h5> Please create at least 1 analytic unit to enable webhooks </h5>

src/panel/graph_panel/services/analytic_service.ts

@@ -25,16 +25,22 @@ export type TableTimeSeries = {
 };
 
 export enum HasticDatasourceStatus {
-  AVAILABLE,
-  NOT_AVAILABLE
+  AVAILABLE = 'success',
+  NOT_AVAILABLE = 'error',
+  CONNECTING = 'info'
 };
 
-const STATUS_TO_ALERT_TYPE_MAPPING = new Map<HasticDatasourceStatus, string>([
-  [HasticDatasourceStatus.AVAILABLE, 'alert-success'],
-  [HasticDatasourceStatus.NOT_AVAILABLE, 'alert-error']
-]);
+export type HasticDatasourceConnectionStatus = {
+  status: HasticDatasourceStatus,
+  message: string
+}
 
 export class AnalyticService {
+  public connectionStatus: HasticDatasourceConnectionStatus = {
+    status: HasticDatasourceStatus.CONNECTING,
+    message: 'Connecting...'
+  };
+
   private _isUp: boolean = false;
 
   constructor(
@@ -268,6 +274,9 @@ export class AnalyticService {
   }
 
   async checkDatasourceAvailability(): Promise<boolean> {
+    this.connectionStatus.status = HasticDatasourceStatus.CONNECTING;
+    this.connectionStatus.message = 'Connecting...';
+
     this._isUp = await this._isDatasourceAvailable();
     return this._isUp;
   }
@@ -393,6 +402,9 @@ export class AnalyticService {
   }
 
   private _displayConnectionAlert(status: HasticDatasourceStatus, message: string[]): void {
+    this.connectionStatus.status = status;
+    this.connectionStatus.message = message.join('<br />');
+
     const statusChanged = this._updateHasticUrlStatus(status);
 
     if(!statusChanged) {
@@ -400,7 +412,7 @@ export class AnalyticService {
     }
 
     appEvents.emit(
-      STATUS_TO_ALERT_TYPE_MAPPING.get(status),
+      `alert-${status}`,
       message
     );
   }