Add dynamic wait to allow page content to render (opendistro-for-elas…

…ticsearch#331)

kibana-reports/server/routes/utils/visual_report/visualReportHelper.ts

@@ -59,6 +59,24 @@ export const createVisualReport = async (
     ? DOMPurify.sanitize(header)
     : DEFAULT_REPORT_HEADER;
   const reportFooter = footer ? DOMPurify.sanitize(footer) : '';
+
+  // add waitForDynamicContent function
+  const waitForDynamicContent = async(page, timeout = 30000, interval = 1000, checks = 5) => {
+    const maxChecks    = timeout / interval;
+    let passedChecks   = 0;
+    let previousLength = 0;
+
+    let i=0; while(i++ <= maxChecks){
+      let pageContent   = await page.content();
+      let currentLength = pageContent.length;
+
+      (previousLength === 0 || previousLength != currentLength) ? passedChecks = 0 : passedChecks++;
+      if (passedChecks >= checks) { break; }
+
+      previousLength = currentLength;
+      await page.waitFor(interval);
+    }
+  }
 
   // set up puppeteer
   const browser = await puppeteer.launch({
@@ -142,6 +160,9 @@ export const createVisualReport = async (
         `report source can only be one of [Dashboard, Visualization]`
       );
   }
+
+  // wait for dynamic page content to render
+  await waitForDynamicContent(page);
 
   const screenshot = await page.screenshot({ fullPage: true });