Add call-out react directive and use it to surface rollup errors in t…

…he visualization editor sidebar.
elastic · Jul 6, 2018 · 3d979e6 · 3d979e6
1 parent 7c2e762
commit 3d979e6
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 5 deletions.
diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js
@@ -28,6 +28,7 @@ import {
   EuiIcon,
   EuiColorPicker,
   EuiIconTip,
+  EuiCallOut,
 } from '@elastic/eui';
 
 import { uiModules } from './modules';
@@ -43,3 +44,5 @@ app.directive('icon', reactDirective => reactDirective(EuiIcon));
 app.directive('colorPicker', reactDirective => reactDirective(EuiColorPicker));
 
 app.directive('iconTip', reactDirective => reactDirective(EuiIconTip, ['content', 'type', 'position', 'title']));
+
+app.directive('callOut', reactDirective => reactDirective(EuiCallOut, ['title', 'color', 'size', 'iconType', 'children']));
diff --git a/src/ui/public/vis/editors/default/sidebar.html b/src/ui/public/vis/editors/default/sidebar.html
@@ -19,6 +19,15 @@
     </div>
 
     <nav class="navbar navbar-default subnav">
+      <div class="visEditorSidebarError" ng-if="sidebar.persistentError">
+        <call-out
+          color="'danger'"
+          iconType="'alert'"
+          title="sidebar.persistentError"
+          size="'s'"
+        />
+      </div>
+
       <div class="container-fluid">
 
         <!-- tabs -->

diff --git a/src/ui/public/vis/editors/default/sidebar.js b/src/ui/public/vis/editors/default/sidebar.js
@@ -23,17 +23,18 @@ import './vis_options';
 import { uiModules } from '../../../modules';
 import sidebarTemplate from './sidebar.html';
 
+import './sidebar.less';
+
 uiModules
   .get('app/visualize')
   .directive('visEditorSidebar', function () {
-
-
     return {
       restrict: 'E',
       template: sidebarTemplate,
       scope: true,
       controllerAs: 'sidebar',
       controller: function ($scope) {
+        this.persistentError = undefined;
 
         $scope.$watch('vis.type', (visType) => {
           if (visType) {
@@ -49,6 +50,20 @@ uiModules
             this.section = this.section || (this.showData ? 'data' : _.get(visType, 'editorConfig.optionTabs[0].name'));
           }
         });
+
+        $scope.$watch('vis.requestError', (requestError) => {
+          if (requestError) {
+            const { resp: { message } } = requestError;
+            const isRollupError = message.includes('rollup');
+
+            if (isRollupError) {
+              this.persistentError = message;
+              return;
+            }
+          }
+
+          this.persistentError = undefined;
+        });
       }
     };
   });
diff --git a/src/ui/public/vis/editors/default/sidebar.less b/src/ui/public/vis/editors/default/sidebar.less
@@ -0,0 +1,3 @@
+.visEditorSidebarError {
+  padding: 8px;
+}
diff --git a/src/ui/public/visualize/visualize.js b/src/ui/public/visualize/visualize.js
@@ -100,16 +100,27 @@ uiModules
               //No need to call the response handler when there have been no data nor has been there changes
               //in the vis-state (response handler does not depend on uiStat
               const canSkipResponseHandler = (
-                $scope.previousRequestHandlerResponse && $scope.previousRequestHandlerResponse === requestHandlerResponse &&
-              $scope.previousVisState && _.isEqual($scope.previousVisState, $scope.vis.getState())
+                $scope.previousRequestHandlerResponse
+                  && $scope.previousRequestHandlerResponse === requestHandlerResponse
+                  && $scope.previousVisState
+                  && _.isEqual($scope.previousVisState, $scope.vis.getState())
               );
 
               $scope.previousVisState = $scope.vis.getState();
               $scope.previousRequestHandlerResponse = requestHandlerResponse;
+
+              $scope.$evalAsync(() => {
+                $scope.vis.requestError = undefined;
+              });
+
               return canSkipResponseHandler ? $scope.visData : Promise.resolve(responseHandler($scope.vis, requestHandlerResponse));
             }, e => {
               $scope.savedObj.searchSource.cancelQueued();
-              $scope.vis.requestError = e;
+
+              $scope.$evalAsync(() => {
+                $scope.vis.requestError = e;
+              });
+
               if (isTermSizeZeroError(e)) {
                 return toastNotifications.addDanger({
                   title: `Visualization '${$scope.vis.title}' has an error`,