From b7338243b1214aa31dc22151a2d4a793e32f2af5 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 28 Jul 2017 13:27:41 -0400 Subject: [PATCH] Should respect pinned filters (#13019) --- .../public/kbn_vis_types/request_handler.js | 2 +- .../public/vis/timelion_request_handler.js | 2 +- src/ui/public/vis/request_handlers/courier.js | 12 +- src/ui/public/visualize/visualize.js | 190 +++++++++--------- 4 files changed, 107 insertions(+), 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 index 41b296ed0bc3e..839b79c56fcf1 100644 --- 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 index 312de599a3bd0..978c7d4163cd1 100644 --- 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 index 120839835a0c0..2d79342d3dd3a 100644 --- 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 index c911ab623aa98..a97422455ff62 100644 --- a/src/ui/public/visualize/visualize.js +++ b/src/ui/public/visualize/visualize.js @@ -8,6 +8,8 @@ import { ResizeCheckerProvider } from 'ui/resize_checker'; import 'angular-sanitize'; import './visualization'; import './visualization_editor'; +import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter'; + import { isTermSizeZeroError, @@ -15,44 +17,45 @@ import { 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'); + } + }; + });