Import analytic units: display import errors #406 (#408)

src/panel/graph_panel/graph_ctrl.ts

@@ -578,12 +578,37 @@ class GraphCtrl extends MetricsPanelCtrl {
       panelId: string,
       datasourceUrl: string
     ) => {
-      // TODO: use template variables from form
-      await this.importPanel(JSON.parse(panelTemplate), {
-        grafanaUrl: this._grafanaUrl,
-        panelId: this._panelId,
-        datasourceUrl: this._datasourceRequest.url
-      });
+      try {
+        // TODO: use template variables from form (or not?)
+        await this.importPanel(JSON.parse(panelTemplate), {
+          grafanaUrl: this._grafanaUrl,
+          panelId: this._panelId,
+          datasourceUrl: this._datasourceRequest.url
+        });
+
+        appEvents.emit(
+          'alert-success',
+          [
+            // TODO: analytic units count?
+            'Analytic units are imported successfully'
+          ]
+        );
+
+        await this.onHasticDatasourceChange();
+      } catch(e) {
+        let status = e.status !== undefined ? `Status code: ${e.status}` : '';
+        let message = e.message;
+        if(e.data !== undefined && e.data.message !== undefined) {
+          message = e.data.message;
+        }
+        appEvents.emit(
+          'alert-error',
+          [
+            `Error while importing analytic units. ${status}`,
+            message
+          ]
+        );
+      }
     };
 
     this.publishAppEvent('show-modal', {
@@ -594,7 +619,7 @@ class GraphCtrl extends MetricsPanelCtrl {
 
   async importPanel(panelTemplate: PanelTemplate, templateVariables: TemplateVariables): Promise<void> {
     // TODO: show import errors properly
-    await this.analyticsController.importPanel(panelTemplate, templateVariables);
+    return this.analyticsController.importPanel(panelTemplate, templateVariables);
   }
 
   // getAnnotationsByTag(tag) {

src/panel/graph_panel/services/analytic_service.ts

@@ -74,7 +74,8 @@ export class AnalyticService {
     panelTemplate: PanelTemplate,
     templateVariables: TemplateVariables
   ): Promise<void> {
-    await this.post('/panels/template', { panelTemplate, templateVariables });
+    const rawError = true;
+    return this.post('/panels/template', { panelTemplate, templateVariables }, rawError);
   }
 
   async postNewAnalyticUnit(
@@ -282,7 +283,7 @@ export class AnalyticService {
     return this.post('/analyticUnits/detect', { ids, from, to });
   }
 
-  private async _analyticRequest(method: string, url: string, data?: any) {
+  private async _analyticRequest(method: string, url: string, data?: any, rawError: boolean = false) {
     try {
       method = method.toUpperCase();
       url = this._hasticDatasourceURL + url;
@@ -296,6 +297,9 @@ export class AnalyticService {
       this._isUp = true;
       return response.data;
     } catch(error) {
+      if(rawError) {
+        throw 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' || error.status > 500) {
@@ -336,20 +340,20 @@ export class AnalyticService {
     return true;
   }
 
-  private async get(url, params?) {
-    return this._analyticRequest('GET', url, params);
+  private async get(url: string, params?: any, rawError: boolean = false): Promise<any> {
+    return this._analyticRequest('GET', url, params, rawError);
   }
 
-  private async post(url, data?) {
-    return this._analyticRequest('POST', url, data);
+  private async post(url: string, data?: any, rawError: boolean = false): Promise<any> {
+    return this._analyticRequest('POST', url, data, rawError);
   }
 
-  private async patch(url, data?) {
-    return this._analyticRequest('PATCH', url, data);
+  private async patch(url: string, data?: any, rawError: boolean = false): Promise<any> {
+    return this._analyticRequest('PATCH', url, data, rawError);
   }
 
-  private async delete(url, data?) {
-    return this._analyticRequest('DELETE', url, data);
+  private async delete(url: string, data?: any, rawError: boolean = false): Promise<any> {
+    return this._analyticRequest('DELETE', url, data, rawError);
   }
 
   private _displayNoConnectionAlert(statusText: string): void {