Add a couple tests with queries and saved searches linked to visualizations (#14878)

* Add a couple tests with queries and saved searches linked to visualizations

Fix issue when edit link is clicked too soon and embeddable hasn't finished loading

* attempt to fix flakiness

* remove duplicate lines

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js

@@ -43,7 +43,7 @@ export class PanelOptionsMenu extends React.Component {
           aria-hidden="true"
           className="kuiButton__icon kuiIcon fa-edit"
         />,
-        onClick: this.onEditPanel,
+        onClick: this.props.editUrl ? this.onEditPanel : undefined,
       },
       {
         name: 'Customize panel',
@@ -138,7 +138,7 @@ PanelOptionsMenu.propTypes = {
   panelTitle: PropTypes.string,
   onUpdatePanelTitle: PropTypes.func.isRequired,
   onResetPanelTitle: PropTypes.func.isRequired,
-  editUrl: PropTypes.string.isRequired,
+  editUrl: PropTypes.string, // May be empty if the embeddable is still loading
   toggleExpandedPanel: PropTypes.func.isRequired,
   isExpanded: PropTypes.bool.isRequired,
   onDeletePanel: PropTypes.func, // Not available when the panel is expanded.

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_container.js

@@ -25,7 +25,7 @@ const mapStateToProps = ({ dashboard }, { panelId }) => {
   const embeddableTitle = embeddable ? embeddable.title : '';
   return {
     panelTitle: panel.title === undefined ? embeddableTitle : panel.title,
-    editUrl: embeddable ? getEmbeddableEditUrl(dashboard, panelId) : '',
+    editUrl: embeddable ? getEmbeddableEditUrl(dashboard, panelId) : null,
     isExpanded: getMaximizedPanelId(dashboard) === panelId,
   };
 };

test/functional/apps/dashboard/_dashboard.js

@@ -37,7 +37,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.clickNewDashboard();
       await dashboardVisualizations.createAndAddTSVBVisualization('TSVB');
       await PageObjects.dashboard.addVisualizations(PageObjects.dashboard.getTestVisualizationNames());
-      await dashboardVisualizations.createAndAddSavedSearch('saved search');
+      await dashboardVisualizations.createAndAddSavedSearch({ name: 'saved search', fields: ['bytes', 'agent'] });
       testVisualizationTitles.push('TSVB');
       testVisualizationTitles.splice(1, 0, ...PageObjects.dashboard.getTestVisualizationNames());
       testVisualizationTitles.push('saved search');

test/functional/apps/dashboard/_dashboard_queries.js

@@ -0,0 +1,91 @@
+import expect from 'expect.js';
+
+import { PIE_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
+
+/**
+ * Test the querying capabilities of dashboard, and make sure visualizations show the expected results, especially
+ * with nested queries and filters on the visualizations themselves.
+ */
+export default function ({ getService, getPageObjects }) {
+  const retry = getService('retry');
+  const dashboardVisualizations = getService('dashboardVisualizations');
+  const PageObjects = getPageObjects(['dashboard', 'header', 'visualize']);
+
+  describe('dashboard queries', function describeIndexTests() {
+    before(async function () {
+      return PageObjects.dashboard.initTests();
+    });
+
+    after(async function () {
+      // avoids any 'Object with id x not found' errors when switching tests.
+      await PageObjects.header.clickVisualize();
+      await PageObjects.visualize.gotoLandingPage();
+      await PageObjects.header.clickDashboard();
+      await PageObjects.dashboard.gotoDashboardLandingPage();
+    });
+
+    it('Nested visualization query filters data as expected', async () => {
+      // This flip between apps fixes the url so state is preserved when switching apps in test mode.
+      // Without this flip the url in test mode looks something like
+      // "http://localhost:5620/app/kibana?_t=1486069030837#/dashboard?_g=...."
+      // after the initial flip, the url will look like this: "http://localhost:5620/app/kibana#/dashboard?_g=...."
+      await PageObjects.header.clickVisualize();
+      await PageObjects.header.clickDashboard();
+
+      await PageObjects.dashboard.clickNewDashboard();
+      await PageObjects.dashboard.setTimepickerInDataRange();
+
+      await PageObjects.dashboard.addVisualizations([PIE_CHART_VIS_NAME]);
+      await PageObjects.dashboard.clickEditVisualization();
+      await PageObjects.dashboard.setQuery('memory:<80000');
+      await PageObjects.dashboard.clickFilterButton();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+
+      await PageObjects.visualize.saveVisualization(PIE_CHART_VIS_NAME);
+
+      await PageObjects.header.clickDashboard();
+
+      const pieSlicesCount = await PageObjects.dashboard.getPieSliceCount();
+      expect(pieSlicesCount).to.equal(2);
+    });
+
+    it('Pie chart attached to saved search filters data as expected', async () => {
+      await dashboardVisualizations.createAndAddSavedSearch({
+        name: 'bytes < 90',
+        query: 'bytes:<90',
+        fields: ['bytes']
+      });
+
+      await PageObjects.header.clickDashboard();
+      await PageObjects.dashboard.gotoDashboardLandingPage();
+      await PageObjects.dashboard.clickNewDashboard();
+
+      await PageObjects.dashboard.clickAddVisualization();
+      await PageObjects.dashboard.clickAddNewVisualizationLink();
+      await PageObjects.visualize.clickPieChart();
+      await PageObjects.visualize.selectSearch('bytes < 90');
+      await PageObjects.visualize.clickBucket('Split Slices');
+      await PageObjects.visualize.selectAggregation('Terms');
+      await PageObjects.visualize.selectField('memory');
+      await PageObjects.visualize.clickGo();
+      await PageObjects.visualize.saveVisualization('memory with bytes < 90 pie');
+      await PageObjects.header.clickToastOK();
+
+      const pieSlicesCount = await PageObjects.dashboard.getPieSliceCount();
+      expect(pieSlicesCount).to.equal(3);
+    });
+
+    it('Pie chart attached to saved search filters shows no data with conflicting dashboard query', async () => {
+      await PageObjects.dashboard.setQuery('bytes:>100');
+      await PageObjects.dashboard.clickFilterButton();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+
+      // There appears to be a slight delay between the page loading and the visualization reacting to the
+      // filter which is causing this to sometimes be greater than 0, hence the retry.
+      retry.try(async () => {
+        const pieSlicesCount = await PageObjects.dashboard.getPieSliceCount();
+        expect(pieSlicesCount).to.equal(0);
+      });
+    });
+  });
+}

test/functional/apps/dashboard/index.js

@@ -4,6 +4,7 @@ export default function ({ getService, loadTestFile }) {
   describe('dashboard app', function () {
     before(() => remote.setWindowSize(1200, 900));
 
+    loadTestFile(require.resolve('./_dashboard_queries'));
     loadTestFile(require.resolve('./_dashboard_grid'));
     loadTestFile(require.resolve('./_panel_controls'));
     loadTestFile(require.resolve('./_view_edit'));

test/functional/page_objects/dashboard_page.js

@@ -34,9 +34,10 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
     async clickEditVisualization() {
       log.debug('clickEditVisualization');
       await testSubjects.click('dashboardPanelToggleMenuIcon');
-      await testSubjects.click('dashboardPanelEditLink');
 
+      // Edit link may sometimes be disabled if the embeddable isn't rendered yet.
       await retry.try(async () => {
+        await testSubjects.click('dashboardPanelEditLink');
         const current = await remote.getCurrentUrl();
         if (current.indexOf('visualize') < 0) {
           throw new Error('not on visualize page');
@@ -512,6 +513,14 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
       return _.map(filters, async (filter) => await filter.getVisibleText());
     }
 
+    async getPieSliceCount() {
+      log.debug('getPieSliceCount');
+      return await retry.try(async () => {
+        const slices = await find.allByCssSelector('svg > g > path.slice');
+        return slices.length;
+      });
+    }
+
     async filterOnPieSlice() {
       log.debug('Filtering on a pie slice');
       await retry.try(async () => {

test/functional/page_objects/visualize_page.js

@@ -264,10 +264,6 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       await input.type(newValue);
     }
 
-    async clickSavedSearch() {
-      await find.clickByCssSelector('li[ng-click="stepTwoMode=\'saved\'"]');
-    }
-
     async selectSearch(searchName) {
       await find.clickByLinkText(searchName);
     }

test/functional/services/dashboard/visualizations.js

@@ -17,15 +17,31 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }) {
       await PageObjects.header.clickToastOK();
     }
 
-    async createAndAddSavedSearch(name) {
-      log.debug(`createAndAddSavedSearch(${name})`);
+    async createSavedSearch({ name, query, fields }) {
+      log.debug(`createSavedSearch(${name})`);
       await PageObjects.header.clickDiscover();
+
       await PageObjects.dashboard.setTimepickerInDataRange();
-      await PageObjects.discover.clickFieldListItemAdd('bytes');
-      await PageObjects.discover.clickFieldListItemAdd('agent');
+
+      if (query) {
+        await PageObjects.dashboard.setQuery(query);
+        await PageObjects.dashboard.clickFilterButton();
+      }
+
+      if (fields) {
+        for (let i = 0; i < fields.length; i++) {
+          await PageObjects.discover.clickFieldListItemAdd(fields[i]);
+        }
+      }
+
       await PageObjects.discover.saveSearch(name);
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.header.clickToastOK();
+    }
+
+    async createAndAddSavedSearch({ name, query, fields }) {
+      log.debug(`createAndAddSavedSearch(${name})`);
+      await this.createSavedSearch({ name, query, fields });
 
       await PageObjects.header.clickDashboard();