UX fixes (#413)

* do not show reconnect button if hastic datasource is not selected

* human-readable hastic datasource availability errors

src/panel/graph_panel/graph_ctrl.ts

@@ -323,8 +323,8 @@ class GraphCtrl extends MetricsPanelCtrl {
       delete this.analyticService;
     } else {
       this.analyticService = new AnalyticService(hasticDatasource.url, this.$http);
-      const isDatasourceAvailable = await this.analyticService.isDatasourceAvailable();
-      if(isDatasourceAvailable) {
+      const isHasticAvailable = await this.analyticService.checkDatasourceAvailability();
+      if(isHasticAvailable) {
         this.updateAnalyticUnitTypes();
       }
     }

src/panel/graph_panel/partials/reconnect_to_datasource.html

@@ -0,0 +1,7 @@
+<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>

src/panel/graph_panel/partials/tab_analytics.html

@@ -10,13 +10,7 @@
 </div>
 
 <div>
-  <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.onHasticDatasourceChange()">
-      <i class="fa fa-plug"></i>
-      Reconnect to Hastic server
-    </button>
-  </div>
+  <ng-include src="ctrl.partialsPath + '/reconnect_to_datasource.html'" />
 
   <div ng-if="ctrl.analyticsController.serverStatus === true && !ctrl.analyticsController.loading">
     <ng-include src="ctrl.getTemplatePath('analytic_units')">

src/panel/graph_panel/partials/tab_webhooks.html

@@ -1,10 +1,4 @@
-<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.runBackendConnectivityCheck()">
-    <i class="fa fa-plug"></i>
-    Reconnect to Hastic server
-  </button>
-</div>
+<ng-include src="ctrl.partialsPath + '/reconnect_to_datasource.html'" />
 
 <div ng-if="ctrl.analyticsController.serverStatus === true">
   <div ng-if="!ctrl.analyticsController.analyticUnits.length">

src/panel/graph_panel/services/analytic_service.ts

@@ -112,26 +112,30 @@ export class AnalyticService {
     return this.delete('/analyticUnits', { id });
   }
 
-  private async _checkDatasourceAvailability(): Promise<void> {
+  private async _isDatasourceAvailable(): Promise<boolean> {
     if(!this._checkDatasourceConfig()) {
-      this._isUp = false;
-      return;
+      return false;
     }
     try {
       const response = await this.get('/');
       if(!isHasticServerResponse(response)) {
         this.displayWrongUrlAlert();
-        this._isUp = false;
+        return false
       } else if(!isSupportedServerVersion(response)) {
         this.displayUnsupportedVersionAlert(response.packageVersion);
-        this._isUp = false;
+        return false;
       }
 
-      this._isUp = true;
+      const message = [
+        'Connected to Hastic Datasource',
+        `Hastic datasource URL: "${this._hasticDatasourceURL}"`
+      ];
+      this._displayConnectionAlert(HasticDatasourceStatus.AVAILABLE, message);
+
+      return true;
     } catch(e) {
       console.error(e);
-      this.displayNoConnectionAlert();
-      this._isUp = false;
+      return false;
     }
   }
 
@@ -262,17 +266,9 @@ export class AnalyticService {
     });
   }
 
-  async isDatasourceAvailable(): Promise<boolean> {
-    await this._checkDatasourceAvailability();
-    if(!this._isUp) {
-      return false;
-    }
-    const message = [
-      'Connected to Hastic Datasource',
-      `Hastic datasource URL: "${this._hasticDatasourceURL}"`
-    ];
-    this._displayConnectionAlert(HasticDatasourceStatus.AVAILABLE, message);
-    return true;
+  async checkDatasourceAvailability(): Promise<boolean> {
+    this._isUp = await this._isDatasourceAvailable();
+    return this._isUp;
   }
 
   async updateAnalyticUnit(updateObj: any) {
@@ -303,13 +299,19 @@ export class AnalyticService {
       // 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' || error.status > 500) {
-        if(error.status === 504) {
-          this.displayConnectionTimeoutAlert();
+        let statusText = error.status;
+        if (error.statusText !== '') {
+          status += ` (${error.statusText})`;
+        }
+        // -1 usually means the request was aborted, e.g. using a config.timeout
+        // See: https://docs.angularjs.org/api/ng/service/$http#$http-returns
+        if(error.status === 504 || error.status === -1) {
+          this._displayConnectionTimeoutAlert(statusText);
         } else {
-          this.displayNoConnectionAlert();
+          this._displayNoConnectionAlert(statusText);
         }
         this._isUp = false;
-        throw new Error(`Fetching error: ${error.status}: ${error.statusText}`);
+        throw new Error(`Fetching error: ${statusText}`);
       } else {
         this._isUp = true;
       }
@@ -350,23 +352,23 @@ export class AnalyticService {
     return this._analyticRequest('DELETE', url, data);
   }
 
-  private displayNoConnectionAlert() {
+  private _displayNoConnectionAlert(statusText: string): void {
     const message = [
-      'No connection to Hastic Server',
+      `No connection to Hastic Server. Status: ${statusText}`,
       `Hastic Datasource URL: "${this._hasticDatasourceURL}"`,
     ]
     this._displayConnectionAlert(HasticDatasourceStatus.NOT_AVAILABLE, message);
   }
 
-  private displayConnectionTimeoutAlert() {
+  private _displayConnectionTimeoutAlert(statusText: string): void {
     const message = [
-      'Timeout when connecting to Hastic Server',
+      `Timeout when connecting to Hastic Server. Status: ${statusText}`,
       `Hastic Datasource URL: "${this._hasticDatasourceURL}"`,
     ]
     this._displayConnectionAlert(HasticDatasourceStatus.NOT_AVAILABLE, message);
   }
 
-  private displayWrongUrlAlert() {
+  private displayWrongUrlAlert(): void {
     const message = [
       'Please check Hastic Server URL',
       `Something is working at "${this._hasticDatasourceURL}" but it's not Hastic Server`,
@@ -374,7 +376,7 @@ export class AnalyticService {
     this._displayConnectionAlert(HasticDatasourceStatus.NOT_AVAILABLE, message);
   }
 
-  private displayUnsupportedVersionAlert(actual: string) {
+  private displayUnsupportedVersionAlert(actual: string): void {
     const message = [
       'Unsupported Hastic Server version',
       `Hastic Server at "${this._hasticDatasourceURL}" has unsupported version (got ${actual}, should be ${SUPPORTED_SERVER_VERSION})`,
@@ -386,7 +388,7 @@ export class AnalyticService {
     return this._isUp;
   }
 
-  private _displayConnectionAlert(status: HasticDatasourceStatus, message: string[]) {
+  private _displayConnectionAlert(status: HasticDatasourceStatus, message: string[]): void {
     const statusChanged = this._updateHasticUrlStatus(status);
 
     if(!statusChanged) {