Add data rendering count for visualisation (#28936) (#29196)

* add RENDERING_COUNT_ATTRIBUTE

* update tests with new wait for visualization

* update 'tile map visualize app' tests with await and waitForVisualization

* update tests with waitForVisualization

* remove waitVisualisationLoaded

* fix naming suggestion

* remove redundant waiting in functional tests

src/ui/public/visualize/loader/embedded_visualize_handler.ts

@@ -44,6 +44,7 @@ interface EmbeddedVisualizeHandlerParams extends VisualizeLoaderParams {
 
 const RENDER_COMPLETE_EVENT = 'render_complete';
 const LOADING_ATTRIBUTE = 'data-loading';
+const RENDERING_COUNT_ATTRIBUTE = 'data-rendering-count';
 
 /**
  * A handler to the embedded visualization. It offers several methods to interact
@@ -123,6 +124,7 @@ export class EmbeddedVisualizeHandler {
     });
 
     element.setAttribute(LOADING_ATTRIBUTE, '');
+    element.setAttribute(RENDERING_COUNT_ATTRIBUTE, '0');
     element.addEventListener('renderComplete', this.onRenderCompleteListener);
 
     this.appState = appState;
@@ -305,9 +307,15 @@ export class EmbeddedVisualizeHandler {
     this.fetchAndRender(true);
   };
 
+  private incrementRenderingCount = () => {
+    const renderingCount = Number(this.element.getAttribute(RENDERING_COUNT_ATTRIBUTE) || 0);
+    this.element.setAttribute(RENDERING_COUNT_ATTRIBUTE, `${renderingCount + 1}`);
+  };
+
   private onRenderCompleteListener = () => {
     this.listeners.emit(RENDER_COMPLETE_EVENT);
     this.element.removeAttribute(LOADING_ATTRIBUTE);
+    this.incrementRenderingCount();
   };
 
   private onUiStateChange = () => {

test/functional/apps/discover/_discover.js

@@ -26,7 +26,7 @@ export default function ({ getService, getPageObjects }) {
   const browser = getService('browser');
   const kibanaServer = getService('kibanaServer');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects(['common', 'discover', 'header']);
+  const PageObjects = getPageObjects(['common', 'discover', 'header', 'visualize']);
   const defaultSettings = {
     'dateFormat:tz': 'UTC',
     defaultIndex: 'logstash-*',
@@ -132,14 +132,18 @@ export default function ({ getService, getPageObjects }) {
 
       it('should modify the time range when a bar is clicked', async function () {
         await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+        await PageObjects.visualize.waitForVisualization();
         await PageObjects.discover.clickHistogramBar(0);
+        await PageObjects.visualize.waitForVisualization();
         const actualTimeString = await PageObjects.header.getPrettyDuration();
         expect(actualTimeString).to.be('September 20th 2015, 00:00:00.000 to September 20th 2015, 03:00:00.000');
       });
 
       it('should modify the time range when the histogram is brushed', async function () {
         await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+        await PageObjects.visualize.waitForVisualization();
         await PageObjects.discover.brushHistogram(0, 1);
+        await PageObjects.visualize.waitForVisualization();
         const actualTimeString = await PageObjects.header.getPrettyDuration();
         expect(actualTimeString).to.be('September 19th 2015, 23:52:17.080 to September 20th 2015, 02:59:51.112');
       });

test/functional/apps/getting_started/_shakespeare.js

@@ -86,7 +86,6 @@ export default function ({ getService, getPageObjects }) {
       // then increment the aggIndex for the next one we create
       aggIndex = aggIndex + 1;
       await PageObjects.visualize.clickGo();
-      await PageObjects.visualize.waitForVisualization();
       const expectedChartValues = [935];
       await retry.try(async () => {
         const data = await PageObjects.visualize.getBarChartData('Speaking Parts');

test/functional/apps/visualize/_heatmap_chart.js

@@ -45,14 +45,12 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.selectField('@timestamp');
       // leaving Interval set to Auto
       await PageObjects.visualize.clickGo();
-      await PageObjects.visualize.waitForVisualization();
     });
 
     it('should save and load', async function () {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
       await PageObjects.visualize.waitForVisualizationSavedToastGone();
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.visualize.waitForVisualization();
     });
 

test/functional/apps/visualize/_pie_chart.js

@@ -144,9 +144,7 @@ export default function ({ getService, getPageObjects }) {
     describe('disabled aggs', () => {
       before(async () => {
         await PageObjects.visualize.loadSavedVisualization(vizName1);
-        await PageObjects.visualize.waitForVisualization();
-        // sleep a bit before trying to get the pie chart data below
-        await PageObjects.common.sleep(2000);
+        await PageObjects.visualize.waitForRenderingCount();
       });
 
       it('should show correct result with one agg disabled', async () => {
@@ -166,7 +164,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
         await PageObjects.visualize.waitForVisualizationSavedToastGone();
         await PageObjects.visualize.loadSavedVisualization(vizName1);
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visualize.waitForRenderingCount();
 
         const expectedTableData =  [ 'win 8', 'win xp', 'win 7', 'ios', 'osx'  ];
         await pieChart.expectPieChartLabels(expectedTableData);
@@ -264,7 +262,6 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.selectAggregation('Terms');
         await PageObjects.visualize.selectField('geo.src');
         await PageObjects.visualize.clickGo();
-        await PageObjects.visualize.waitForVisualization();
       });
 
       it ('shows correct split chart', async () => {

test/functional/apps/visualize/_tile_map.js

@@ -34,7 +34,7 @@ export default function ({ getService, getPageObjects }) {
     describe('incomplete config', function describeIndexTests() {
 
       before(async function () {
-        browser.setWindowSize(1280, 1000);
+        await browser.setWindowSize(1280, 1000);
 
         const fromTime = '2015-09-19 06:31:44.000';
         const toTime = '2015-09-23 18:31:44.000';
@@ -60,7 +60,7 @@ export default function ({ getService, getPageObjects }) {
 
     describe('complete config', function describeIndexTests() {
       before(async function () {
-        browser.setWindowSize(1280, 1000);
+        await browser.setWindowSize(1280, 1000);
 
         const fromTime = '2015-09-19 06:31:44.000';
         const toTime = '2015-09-23 18:31:44.000';
@@ -224,7 +224,7 @@ export default function ({ getService, getPageObjects }) {
       const toastDefaultLife = 6000;
 
       before(async function () {
-        browser.setWindowSize(1280, 1000);
+        await browser.setWindowSize(1280, 1000);
 
         log.debug('navigateToApp visualize');
         await PageObjects.visualize.navigateToNewVisualization();
@@ -243,7 +243,6 @@ export default function ({ getService, getPageObjects }) {
       });
 
       beforeEach(async function () {
-        await PageObjects.common.sleep(2000);
         await PageObjects.visualize.clickMapZoomIn(waitForLoading);
       });
 
@@ -256,25 +255,24 @@ export default function ({ getService, getPageObjects }) {
 
       it('should show warning at zoom 10',
         async () => {
-          testSubjects.existOrFail('maxZoomWarning');
+          await testSubjects.existOrFail('maxZoomWarning');
         });
 
       it('should continue providing zoom warning if left alone',
         async () => {
-          testSubjects.existOrFail('maxZoomWarning');
+          await testSubjects.existOrFail('maxZoomWarning');
         });
 
       it('should suppress zoom warning if suppress warnings button clicked',
         async () => {
           last = true;
+          await PageObjects.visualize.waitForVisualization();
           await find.clickByCssSelector('[data-test-subj="suppressZoomWarnings"]');
-
-          await PageObjects.common.sleep(toastDefaultLife + 2000);
           await PageObjects.visualize.clickMapZoomOut(waitForLoading);
-          await PageObjects.common.sleep(1000);
+          await testSubjects.waitForDeleted('suppressZoomWarnings');
           await PageObjects.visualize.clickMapZoomIn(waitForLoading);
 
-          testSubjects.missingOrFail('maxZoomWarning');
+          await testSubjects.missingOrFail('maxZoomWarning');
         });
     });
   });

test/functional/apps/visualize/_tsvb_chart.js

@@ -96,6 +96,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('should show correct data', async function () {
         const expectedMetricValue =  '156';
+        await PageObjects.visualize.waitForVisualization();
         const value = await PageObjects.visualBuilder.getMetricValue();
         log.debug(`metric value: ${value}`);
         expect(value).to.eql(expectedMetricValue);
@@ -113,6 +114,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('should verify gauge label and count display', async function () {
         await retry.try(async () => {
+          await PageObjects.visualize.waitForVisualization();
           const labelString = await PageObjects.visualBuilder.getGaugeLabel();
           expect(labelString).to.be('Count');
           const gaugeCount = await PageObjects.visualBuilder.getGaugeCount();
@@ -130,6 +132,7 @@ export default function ({ getService, getPageObjects }) {
       });
 
       it('should verify topN label and count display', async function () {
+        await PageObjects.visualize.waitForVisualization();
         const labelString = await PageObjects.visualBuilder.getTopNLabel();
         expect(labelString).to.be('Count');
         const gaugeCount = await PageObjects.visualBuilder.getTopNCount();

test/functional/apps/visualize/_vertical_bar_chart.js

@@ -46,8 +46,6 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.selectField('@timestamp');
       // leaving Interval set to Auto
       await PageObjects.visualize.clickGo();
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      await PageObjects.visualize.waitForVisualization();
     };
 
 
@@ -57,7 +55,6 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
       await PageObjects.visualize.waitForVisualizationSavedToastGone();
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.visualize.waitForVisualization();
     });
 

test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js

@@ -43,8 +43,6 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.selectField('@timestamp');
       await PageObjects.visualize.setCustomInterval('3h');
       await PageObjects.visualize.clickGo();
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      await PageObjects.visualize.waitForVisualization();
     };
 
 
@@ -54,7 +52,6 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
       await PageObjects.visualize.waitForVisualizationSavedToastGone();
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.visualize.waitForVisualization();
     });
 

test/functional/page_objects/visualize_page.js

@@ -30,7 +30,6 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
   const find = getService('find');
   const log = getService('log');
   const inspector = getService('inspector');
-  const renderable = getService('renderable');
   const table = getService('table');
   const PageObjects = getPageObjects(['common', 'header']);
   const defaultFindTimeout = config.get('timeouts.find');
@@ -131,6 +130,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
     }
 
     async getTextTag() {
+      await this.waitForVisualization();
       const elements = await find.allByCssSelector('text');
       return await Promise.all(elements.map(async element => await element.getVisibleText()));
     }
@@ -581,15 +581,15 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
     }
 
     async clickGo() {
+      const prevRenderingCount = await this.getVisualizationRenderingCount();
+      log.debug(`Before Rendering count ${prevRenderingCount}`);
       await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton');
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      // For some reason there are two `data-render-complete` tags on each visualization in the visualize page.
-      const countOfDataCompleteFlags = 2;
-      await renderable.waitForRender(countOfDataCompleteFlags);
+      await this.waitForRenderingCount(prevRenderingCount);
     }
 
     async clickReset() {
       await testSubjects.click('visualizeEditorResetButton');
+      await this.waitForVisualization();
     }
 
     async toggleAutoMode() {
@@ -943,7 +943,33 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       await find.clickByCssSelector('div.schemaEditors > div > div > button:nth-child(2)');
     }
 
+    async getVisualizationRenderingCount() {
+      const visualizationLoader = await testSubjects.find('visualizationLoader');
+      const renderingCount = await visualizationLoader.getAttribute('data-rendering-count');
+      return Number(renderingCount);
+    }
+
+    async waitForRenderingCount(previousCount = 0, increment = 1) {
+      await retry.try(async () => {
+        const currentRenderingCount = await this.getVisualizationRenderingCount();
+        log.debug(`Readed rendering count ${previousCount} ${currentRenderingCount}`);
+        expect(currentRenderingCount).to.be(previousCount + increment);
+      });
+    }
+
+    async waitForVisualizationRenderingStabilized() {
+      //assuming rendering is done when data-rendering-count is constant within 1000 ms
+      await retry.try(async () => {
+        const previousCount = await this.getVisualizationRenderingCount();
+        await PageObjects.common.sleep(1000);
+        const currentCount = await this.getVisualizationRenderingCount();
+        log.debug(`Readed rendering count ${previousCount} ${currentCount}`);
+        expect(currentCount).to.be(previousCount);
+      });
+    }
+
     async waitForVisualization() {
+      await this.waitForVisualizationRenderingStabilized();
       return await find.byCssSelector('.visualization');
     }
 
@@ -1060,10 +1086,12 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
     }
 
     async openLegendOptionColors(name) {
+      await this.waitForVisualizationRenderingStabilized();
       await retry.try(async () => {
         // This click has been flaky in opening the legend, hence the retry.  See
         // https://github.com/elastic/kibana/issues/17468
         await testSubjects.click(`legend-${name}`);
+        await this.waitForVisualizationRenderingStabilized();
         // arbitrary color chosen, any available would do
         const isOpen = await this.doesLegendColorChoiceExist('#EF843C');
         if (!isOpen) {
@@ -1095,6 +1123,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       await this.toggleLegend();
       await testSubjects.click(`legend-${name}`);
       await testSubjects.click(`legend-${name}-filterIn`);
+      await this.waitForVisualizationRenderingStabilized();
     }
 
     async doesLegendColorChoiceExist(color) {