From eaa025e6eb416e01f7ea30008b0aa6afdc4f081c Mon Sep 17 00:00:00 2001 From: corpglory-dev <47055832+corpglory-dev@users.noreply.github.com> Date: Fri, 21 Feb 2020 20:05:43 +0300 Subject: [PATCH] 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 | 4 +- .../partials/reconnect_to_datasource.html | 7 +++ .../graph_panel/partials/tab_analytics.html | 8 +-- .../graph_panel/partials/tab_webhooks.html | 8 +-- .../graph_panel/services/analytic_service.ts | 62 ++++++++++--------- 5 files changed, 43 insertions(+), 46 deletions(-) create mode 100644 src/panel/graph_panel/partials/reconnect_to_datasource.html diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index 2dc4d49..dd879e3 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/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(); } } diff --git a/src/panel/graph_panel/partials/reconnect_to_datasource.html b/src/panel/graph_panel/partials/reconnect_to_datasource.html new file mode 100644 index 0000000..1d56393 --- /dev/null +++ b/src/panel/graph_panel/partials/reconnect_to_datasource.html @@ -0,0 +1,7 @@ +
+
Hastic server at "{{ctrl.hasticDatasource.url}}" is not available
+ +
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html index a5536f8..433df9d 100644 --- a/src/panel/graph_panel/partials/tab_analytics.html +++ b/src/panel/graph_panel/partials/tab_analytics.html @@ -10,13 +10,7 @@
-
-
Hastic server at "{{ctrl.hasticDatasource.url}}" is not available
- -
+
diff --git a/src/panel/graph_panel/partials/tab_webhooks.html b/src/panel/graph_panel/partials/tab_webhooks.html index 5a89a82..13d6e0d 100644 --- a/src/panel/graph_panel/partials/tab_webhooks.html +++ b/src/panel/graph_panel/partials/tab_webhooks.html @@ -1,10 +1,4 @@ -
-
Hastic server at "{{ctrl.hasticDatasource.url}}" is not available
- -
+
diff --git a/src/panel/graph_panel/services/analytic_service.ts b/src/panel/graph_panel/services/analytic_service.ts index f228e4e..7888f38 100644 --- a/src/panel/graph_panel/services/analytic_service.ts +++ b/src/panel/graph_panel/services/analytic_service.ts @@ -112,26 +112,30 @@ export class AnalyticService { return this.delete('/analyticUnits', { id }); } - private async _checkDatasourceAvailability(): Promise { + private async _isDatasourceAvailable(): Promise { 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 { - 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 { + 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) {