Should respect pinned filters (#13019) (#13189)

elastic · Jul 28, 2017 · fc0f098 · fc0f098
1 parent e55ac10
commit fc0f098
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 99 deletions.
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js b/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js
@@ -7,7 +7,7 @@ const MetricsRequestHandlerProvider = function (Private, Notifier, config, timef
 
   return {
     name: 'metrics',
-    handler: function (vis /*, appState, uiState*/) {
+    handler: function (vis /*, appState, uiState, queryFilter*/) {
 
       return new Promise((resolve) => {
         const panel = vis.params;

diff --git a/src/core_plugins/timelion/public/vis/timelion_request_handler.js b/src/core_plugins/timelion/public/vis/timelion_request_handler.js
@@ -11,7 +11,7 @@ const TimelionRequestHandlerProvider = function (Private, Notifier, $http, $root
 
   return {
     name: 'timelion',
-    handler: function (vis /*, appState, uiState */) {
+    handler: function (vis /*, appState, uiState, queryFilter*/) {
 
       return new Promise((resolve, reject) => {
         console.log('[timelion] get');

diff --git a/src/ui/public/vis/request_handlers/courier.js b/src/ui/public/vis/request_handlers/courier.js
@@ -5,10 +5,14 @@ import { VisRequestHandlersRegistryProvider } from 'ui/registry/vis_request_hand
 const CourierRequestHandlerProvider = function (Private, courier, timefilter) {
   return {
     name: 'courier',
-    handler: function (vis, appState, uiState, searchSource) {
-      if (appState && vis.editorMode) {
-        searchSource.set('filter', appState.filters);
-        if (!appState.linked) searchSource.set('query', appState.query);
+    handler: function (vis, appState, uiState, queryFilter, searchSource) {
+
+
+      if (queryFilter && vis.editorMode) {
+        searchSource.set('filter', queryFilter.getFilters());
+        if (!appState.linked) {
+          searchSource.set('query', appState.query);
+        }
       }
 
       const shouldQuery = () => {

diff --git a/src/ui/public/visualize/visualize.js b/src/ui/public/visualize/visualize.js
@@ -8,51 +8,54 @@ import { ResizeCheckerProvider } from 'ui/resize_checker';
 import 'angular-sanitize';
 import './visualization';
 import './visualization_editor';
+import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter';
+
 
 import {
   isTermSizeZeroError,
 } from '../elasticsearch_errors';
 
 uiModules
 .get('kibana/directive', ['ngSanitize'])
-.directive('visualize', function (Notifier, Private, timefilter, getAppState) {
-  const notify = new Notifier({ location: 'Visualize' });
-  const requestHandlers = Private(VisRequestHandlersRegistryProvider);
-  const responseHandlers = Private(VisResponseHandlersRegistryProvider);
-  const ResizeChecker = Private(ResizeCheckerProvider);
-
-  function getHandler(from, name) {
-    if (typeof name === 'function') return name;
-    return from.find(handler => handler.name === name).handler;
-  }
-
-  return {
-    restrict: 'E',
-    scope : {
-      showSpyPanel: '=?',
-      editorMode: '=?',
-      savedObj: '=',
-      appState: '=',
-      uiState: '=?'
-    },
-    template: visualizeTemplate,
-    link: function ($scope, $el) {
-      const resizeChecker = new ResizeChecker($el);
-
-      $scope.vis = $scope.savedObj.vis;
-      $scope.editorMode = $scope.editorMode || false;
-      $scope.vis.editorMode = $scope.editorMode;
-      $scope.vis.visualizeScope = true;
-
-      if (!$scope.appState) $scope.appState = getAppState();
-
-      const requestHandler = getHandler(requestHandlers, $scope.vis.type.requestHandler);
-      const responseHandler = getHandler(responseHandlers, $scope.vis.type.responseHandler);
-
-      $scope.fetch = _.debounce(function () {
+  .directive('visualize', function (Notifier, Private, timefilter, getAppState) {
+    const notify = new Notifier({ location: 'Visualize' });
+    const requestHandlers = Private(VisRequestHandlersRegistryProvider);
+    const responseHandlers = Private(VisResponseHandlersRegistryProvider);
+    const ResizeChecker = Private(ResizeCheckerProvider);
+    const queryFilter = Private(FilterBarQueryFilterProvider);
+
+    function getHandler(from, name) {
+      if (typeof name === 'function') return name;
+      return from.find(handler => handler.name === name).handler;
+    }
+
+    return {
+      restrict: 'E',
+      scope : {
+        showSpyPanel: '=?',
+        editorMode: '=?',
+        savedObj: '=',
+        appState: '=',
+        uiState: '=?'
+      },
+      template: visualizeTemplate,
+      link: function ($scope, $el) {
+        const resizeChecker = new ResizeChecker($el);
+
+        $scope.vis = $scope.savedObj.vis;
+        $scope.editorMode = $scope.editorMode || false;
+        $scope.vis.editorMode = $scope.editorMode;
+        $scope.vis.visualizeScope = true;
+
+        if (!$scope.appState) $scope.appState = getAppState();
+
+        const requestHandler = getHandler(requestHandlers, $scope.vis.type.requestHandler);
+        const responseHandler = getHandler(responseHandlers, $scope.vis.type.responseHandler);
+
+        $scope.fetch = _.debounce(function () {
 
         // searchSource is only there for courier request handler
-        requestHandler($scope.vis, $scope.appState, $scope.uiState, $scope.savedObj.searchSource)
+          requestHandler($scope.vis, $scope.appState, $scope.uiState, queryFilter, $scope.savedObj.searchSource)
           .then(requestHandlerResponse => {
 
             //No need to call the response handler when there have been no data nor has been there changes
@@ -83,73 +86,74 @@ uiModules
             $scope.$broadcast('render');
             return resp;
           });
-      }, 100);
+        }, 100);
 
-      $scope.vis.on('update', () => {
-        if ($scope.editorMode) {
-          $scope.appState.vis = $scope.vis.getState();
-          $scope.appState.save();
-        } else {
-          $scope.fetch();
-        }
-      });
+        $scope.vis.on('update', () => {
+          if ($scope.editorMode) {
+            $scope.appState.vis = $scope.vis.getState();
+            $scope.appState.save();
+          } else {
+            $scope.fetch();
+          }
+        });
 
-      const reload = () => {
-        $scope.vis.reload = true;
-        $scope.fetch();
-      };
-      $scope.vis.on('reload', reload);
+        const reload = () => {
+          $scope.vis.reload = true;
+          $scope.fetch();
+        };
+        $scope.vis.on('reload', reload);
       // auto reload will trigger this event
-      $scope.$on('courier:searchRefresh', reload);
+        $scope.$on('courier:searchRefresh', reload);
       // dashboard will fire fetch event when it wants to refresh
-      $scope.$on('fetch', reload);
-
-      if ($scope.appState) {
-        let oldUiState;
-        const stateMonitor = stateMonitorFactory.create($scope.appState);
-        stateMonitor.onChange((status, type, keys) => {
-          if (keys[0] === 'vis') {
-            if ($scope.appState.vis) $scope.vis.setState($scope.appState.vis);
-            $scope.fetch();
-          }
-          if ($scope.vis.type.requiresSearch && ['query', 'filters'].includes(keys[0])) {
-            $scope.fetch();
-          }
-          if (keys[0] === 'uiState') {
+        $scope.$on('fetch', reload);
+        queryFilter.on('update', $scope.fetch);
+
+        if ($scope.appState) {
+          let oldUiState;
+          const stateMonitor = stateMonitorFactory.create($scope.appState);
+          stateMonitor.onChange((status, type, keys) => {
+            if (keys[0] === 'vis') {
+              if ($scope.appState.vis) $scope.vis.setState($scope.appState.vis);
+              $scope.fetch();
+            }
+            if ($scope.vis.type.requiresSearch && ['query', 'filters'].includes(keys[0])) {
+              $scope.fetch();
+            }
+            if (keys[0] === 'uiState') {
             // uiState can be changed by other visualizations on dashboard. this makes sure this fires only if
             // current visualizations uiState changed.
-            if (!oldUiState || oldUiState !== JSON.stringify($scope.uiState.toJSON())) {
-              oldUiState = JSON.stringify($scope.uiState.toJSON());
-              $scope.fetch();
+              if (!oldUiState || oldUiState !== JSON.stringify($scope.uiState.toJSON())) {
+                oldUiState = JSON.stringify($scope.uiState.toJSON());
+                $scope.fetch();
+              }
             }
-          }
-        });
+          });
 
-        $scope.$on('$destroy', () => {
-          stateMonitor.destroy();
-        });
-      }
+          $scope.$on('$destroy', () => {
+            stateMonitor.destroy();
+          });
+        }
 
-      let resizeInit = false;
-      const resizeFunc = _.debounce(() => {
-        if (!resizeInit) return resizeInit = true;
-        $scope.vis.size = [$el.width(), $el.height()];
-        $scope.$broadcast('render');
-      }, 200);
-      resizeChecker.on('resize',  resizeFunc);
+        let resizeInit = false;
+        const resizeFunc = _.debounce(() => {
+          if (!resizeInit) return resizeInit = true;
+          $scope.vis.size = [$el.width(), $el.height()];
+          $scope.$broadcast('render');
+        }, 200);
+        resizeChecker.on('resize',  resizeFunc);
 
       // visualize needs to know about timeFilter
-      $scope.$listen(timefilter, 'fetch', $scope.fetch);
-      $scope.$on('renderComplete', () => {
-        $el.trigger('renderComplete');
-      });
+        $scope.$listen(timefilter, 'fetch', $scope.fetch);
+        $scope.$on('renderComplete', () => {
+          $el.trigger('renderComplete');
+        });
 
-      $scope.$on('$destroy', () => {
-        resizeChecker.destroy();
-      });
+        $scope.$on('$destroy', () => {
+          resizeChecker.destroy();
+        });
 
-      $scope.fetch();
-      $scope.$root.$broadcast('ready:vis');
-    }
-  };
-});
+        $scope.fetch();
+        $scope.$root.$broadcast('ready:vis');
+      }
+    };
+  });