Ensure saved filters from searchSource are always passed to response handlers (#33074)

src/legacy/core_plugins/interpreter/public/functions/kibana_context.js

@@ -71,7 +71,7 @@ export const kibanaContext = () => ({
     }
 
     if (context.filters) {
-      filters = filters.concat(context.filters);
+      filters = filters.concat(context.filters).filter(f => !f.meta.disabled);
     }
 
     const timeRange = args.timeRange ? JSON.parse(args.timeRange) : context.timeRange;

src/legacy/ui/public/visualize/loader/visualize_data_loader.ts

@@ -73,17 +73,23 @@ export class VisualizeDataLoader {
       timeRange: params.timeRange,
     });
 
+    const filters = params.filters || [];
+    const savedFilters = params.searchSource.getField('filter') || [];
+
+    const query = params.query || params.searchSource.getField('query');
+
     // searchSource is only there for courier request handler
     const requestHandlerResponse = await this.requestHandler({
       partialRows: this.vis.params.partialRows || this.vis.type.requiresPartialRows,
       metricsAtAllLevels: this.vis.isHierarchical(),
       visParams,
       ...params,
-      filters: params.filters ? params.filters.filter(filter => !filter.meta.disabled) : undefined,
+      query,
+      filters: filters.concat(savedFilters).filter(f => !f.meta.disabled),
     });
 
-    // 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
+    // No need to call the response handler when there have been no data nor has there been changes
+    // in the vis-state (response handler does not depend on uiState)
     const canSkipResponseHandler =
       this.previousRequestHandlerResponse &&
       this.previousRequestHandlerResponse === requestHandlerResponse &&

test/functional/apps/visualize/_vega_chart.js

@@ -20,9 +20,13 @@
 import expect from 'expect.js';
 
 export default function ({ getService, getPageObjects }) {
-  const log = getService('log');
+  const PageObjects = getPageObjects(['common', 'header', 'timePicker', 'visualize']);
+  const filterBar = getService('filterBar');
   const inspector = getService('inspector');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header']);
+  const log = getService('log');
+
+  const fromTime = '2015-09-19 06:31:44.000';
+  const toTime = '2015-09-23 18:31:44.000';
 
   describe('visualize app', () => {
     before(async () => {
@@ -33,28 +37,46 @@ export default function ({ getService, getPageObjects }) {
     });
 
     describe('vega chart', () => {
-      it('should not have inspector enabled', async function () {
-        await inspector.expectIsNotEnabled();
+      describe('initial render', () => {
+        it('should not have inspector enabled', async function () {
+          await inspector.expectIsNotEnabled();
+        });
+
+        it.skip('should have some initial vega spec text', async function () {
+          const vegaSpec = await PageObjects.visualize.getVegaSpec();
+          expect(vegaSpec).to.contain('{').and.to.contain('data');
+          expect(vegaSpec.length).to.be.above(500);
+        });
+
+        it('should have view and control containers', async function () {
+          const view = await PageObjects.visualize.getVegaViewContainer();
+          expect(view).to.be.ok();
+          const size = await view.getSize();
+          expect(size).to.have.property('width').and.to.have.property('height');
+          expect(size.width).to.be.above(0);
+          expect(size.height).to.be.above(0);
+
+          const controls = await PageObjects.visualize.getVegaControlContainer();
+          expect(controls).to.be.ok();
+        });
       });
 
-      it.skip('should have some initial vega spec text', async function () {
-        const vegaSpec = await PageObjects.visualize.getVegaSpec();
-        expect(vegaSpec).to.contain('{').and.to.contain('data');
-        expect(vegaSpec.length).to.be.above(500);
+      describe('with filters', () => {
+        before(async () => {
+          log.debug('setAbsoluteRange');
+          await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
+        });
+
+        afterEach(async () => {
+          await filterBar.removeAllFilters();
+        });
+
+        it.skip('should render different data in response to filter change', async function () {
+          await PageObjects.visualize.expectVisToMatchScreenshot('vega_chart');
+          await filterBar.addFilter('@tags.raw', 'is', 'error');
+          await PageObjects.visualize.expectVisToMatchScreenshot('vega_chart_filtered');
+        });
       });
-
-      it('should have view and control containers', async function () {
-        const view = await PageObjects.visualize.getVegaViewContainer();
-        expect(view).to.be.ok();
-        const size = await view.getSize();
-        expect(size).to.have.property('width').and.to.have.property('height');
-        expect(size.width).to.be.above(0);
-        expect(size.height).to.be.above(0);
-
-        const controls = await PageObjects.visualize.getVegaControlContainer();
-        expect(controls).to.be.ok();
-      });
-
     });
   });
 }

test/functional/page_objects/visualize_page.js

@@ -21,7 +21,7 @@ import { VisualizeConstants } from '../../../src/legacy/core_plugins/kibana/publ
 import Bluebird from 'bluebird';
 import expect from 'expect.js';
 
-export function VisualizePageProvider({ getService, getPageObjects }) {
+export function VisualizePageProvider({ getService, getPageObjects, updateBaselines }) {
   const browser = getService('browser');
   const config = getService('config');
   const testSubjects = getService('testSubjects');
@@ -29,6 +29,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
   const find = getService('find');
   const log = getService('log');
   const inspector = getService('inspector');
+  const screenshot = getService('screenshots');
   const table = getService('table');
   const globalNav = getService('globalNav');
   const PageObjects = getPageObjects(['common', 'header']);
@@ -823,6 +824,39 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       return $('.y > g > text').toArray().map(tick => $(tick).text().trim());
     }
 
+    /**
+     * Removes chrome and takes a small screenshot of a vis to compare against a baseline.
+     * @param {string} name The name of the baseline image.
+     * @param {object} opts Options object.
+     * @param {number} opts.threshold Threshold for allowed variance when comparing images.
+     */
+    async expectVisToMatchScreenshot(name, opts = { threshold: 0.05 }) {
+      log.debug(`expectVisToMatchScreenshot(${name})`);
+
+      // Collapse sidebar and inject some CSS to hide the nav so we have a focused screenshot
+      await this.clickEditorSidebarCollapse();
+      await this.waitForVisualizationRenderingStabilized();
+      await browser.execute(`
+        var el = document.createElement('style');
+        el.id = '__data-test-style';
+        el.innerHTML = '[data-test-subj="headerGlobalNav"] { display: none; } ';
+        el.innerHTML += '[data-test-subj="top-nav"] { display: none; } ';
+        el.innerHTML += '[data-test-subj="experimentalVisInfo"] { display: none; } ';
+        document.body.appendChild(el);
+      `);
+
+      const percentDifference = await screenshot.compareAgainstBaseline(name, updateBaselines);
+
+      // Reset the chart to its original state
+      await browser.execute(`
+        var el = document.getElementById('__data-test-style');
+        document.body.removeChild(el);
+      `);
+      await this.clickEditorSidebarCollapse();
+      await this.waitForVisualizationRenderingStabilized();
+      expect(percentDifference).to.be.lessThan(opts.threshold);
+    }
+
     /*
      ** This method gets the chart data and scales it based on chart height and label.
      ** Returns an array of height values