[Backport 1.3.2] Use front-end report generation instead of chromium

.github/workflows/dashboards-reports-test-and-build-workflow.yml

@@ -30,15 +30,6 @@ jobs:
       - name: Move Dashboards Reports to Plugins Dir
         run: mv dashboards-reports ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}
 
-      - name: Add Chromium Binary to Reporting for Testing
-        run: |
-          sudo apt update
-          sudo apt install -y libnss3-dev fonts-liberation libfontconfig1
-          cd ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}
-          wget https://github.com/opendistro-for-elasticsearch/kibana-reports/releases/download/chromium-1.12.0.0/chromium-linux-x64.zip 
-          unzip chromium-linux-x64.zip
-          rm chromium-linux-x64.zip
-
       - name: OpenSearch Dashboards Plugin Bootstrap
         uses: nick-invision/retry@v1
         with:
@@ -64,48 +55,10 @@ jobs:
         run: |
           cd ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}
           yarn build
-
-          cd build
-          mkdir -p ./{linux-x64,linux-arm64,windows-x64}/opensearch-dashboards/${{ env.PLUGIN_NAME }}
-          cp ./${{ env.PLUGIN_NAME }}-*.zip ./linux-x64/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}-linux-x64.zip
-          cp ./${{ env.PLUGIN_NAME }}-*.zip ./linux-arm64/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}-linux-arm64.zip
-          mv ./${{ env.PLUGIN_NAME }}-*.zip ./windows-x64/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}-windows-x64.zip
-
-          cd linux-x64
-          wget https://github.com/opensearch-project/dashboards-reports/releases/download/chromium-1.12.0.0/chromium-linux-x64.zip
-          unzip chromium-linux-x64.zip -d ./opensearch-dashboards/${{ env.PLUGIN_NAME }}
-          zip -ur ./${{ env.ARTIFACT_NAME }}-*.zip ./opensearch-dashboards
-          mv ./${{ env.ARTIFACT_NAME }}-*.zip ..
-          cd ..
-
-          cd linux-arm64
-          wget https://github.com/opensearch-project/dashboards-reports/releases/download/chromium-1.12.0.0/chromium-linux-arm64.zip
-          unzip chromium-linux-arm64.zip -d ./opensearch-dashboards/${{ env.PLUGIN_NAME }}
-          zip -ur ./${{ env.ARTIFACT_NAME }}-*.zip ./opensearch-dashboards
-          mv ./${{ env.ARTIFACT_NAME }}-*.zip ..
-          cd ..
-
-          cd windows-x64
-          wget https://github.com/opensearch-project/dashboards-reports/releases/download/chromium-1.12.0.0/chromium-windows-x64.zip
-          unzip chromium-windows-x64.zip -d ./opensearch-dashboards/${{ env.PLUGIN_NAME }}
-          zip -ur ./${{ env.ARTIFACT_NAME }}-*.zip ./opensearch-dashboards
-          mv ./${{ env.ARTIFACT_NAME }}-*.zip ..
-          cd ..
+          mv ./build/*.zip ./build/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}.zip
 
       - name: Upload Artifact For Linux x64
         uses: actions/upload-artifact@v1
         with:
           name: dashboards-reports-linux-x64
-          path: ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}/build/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}-linux-x64.zip
-
-      - name: Upload Artifact For Linux arm64
-        uses: actions/upload-artifact@v1
-        with:
-          name: dashboards-reports-linux-arm64
-          path: ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}/build/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}-linux-arm64.zip
-
-      - name: Upload Artifact For Windows
-        uses: actions/upload-artifact@v1
-        with:
-          name: dashboards-reports-windows-x64
-          path: ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}/build/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}-windows-x64.zip
+          path: ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}/build/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}.zip

README.md

@@ -6,7 +6,6 @@
 - [Contributing](#contributing)
 - [Setup](#setup-&-build)
 - [Notifications Integration](#notifications-integration)
-- [Troubleshooting](#troubleshooting)
 - [Code of Conduct](#code-of-conduct)
 - [Security](#security)
 - [License](#license)
@@ -106,39 +105,6 @@ Complete OpenSearch Dashboards Report feature is composed of 2 plugins.
 
 OpenSearch Dashboards Reports integration with [Notifications](https://github.com/opensearch-project/notifications) is currently in progress. Tracking [here](https://github.com/opensearch-project/dashboards-reports/issues/72)
 
-## Troubleshooting
-
-### Fail to launch Chromium
-
-There could be two reasons for this problem
-
-1. You are not having the correct version of headless-chrome matching to the OS that your OpenSearch Dashboards is running. Different versions of headless-chrome can be found [here](https://github.com/opensearch-project/dashboards-reports/releases/tag/chromium-1.12.0.0)
-
-2. Missing additional dependencies. Please refer to [additional dependencies section](./dashboards-reports/rendering-engine/headless-chrome/README.md#additional-libaries) to install required dependencies according to your operating system.
-
-### Missing Font Dependencies
-
-Chromium may not have all of the dependencies you may require to be able to view all of the content of your reports.
-
-If you are using a CentOS/RHEL system, install the following packages:
-
-- [`ipa-gothic-fonts`](https://centos.pkgs.org/7/centos-x86_64/ipa-gothic-fonts-003.03-5.el7.noarch.rpm.html)
-- [`xorg-x11-fonts-100dpi`](https://centos.pkgs.org/7/centos-x86_64/xorg-x11-fonts-100dpi-7.5-9.el7.noarch.rpm.html)
-- [`xorg-x11-fonts-75dpi`](https://centos.pkgs.org/7/centos-x86_64/xorg-x11-fonts-75dpi-7.5-9.el7.noarch.rpm.html)
-- [`xorg-x11-utils`](https://centos.pkgs.org/7/centos-x86_64/xorg-x11-utils-7.5-23.el7.x86_64.rpm.html)
-- [`xorg-x11-fonts-cyrillic`](https://centos.pkgs.org/7/centos-x86_64/xorg-x11-fonts-cyrillic-7.5-9.el7.noarch.rpm.html)
-- [`xorg-x11-fonts-Type1`](https://centos.pkgs.org/7/centos-x86_64/xorg-x11-fonts-Type1-7.5-9.el7.noarch.rpm.html)
-- [`xorg-x11-fonts-misc`](https://centos.pkgs.org/7/centos-x86_64/xorg-x11-fonts-misc-7.5-9.el7.noarch.rpm.html)
-- [`fontconfig`](https://www.freedesktop.org/wiki/Software/fontconfig/)
-- [`freetype`](https://freetype.org/)
-
-If you are using a Ubuntu/Debian system, install the following packages:
-
-- [`fonts-liberation`](https://packages.debian.org/search?keywords=fonts-liberation)
-- [`libfontconfig1`](https://packages.debian.org/sid/libfontconfig1)
-
-The installation command for both systems can be found [here](./dashboards-reports/rendering-engine/headless-chrome/README.md).
-
 ## Code of Conduct
 
 This project has adopted the [Amazon Open Source Code of Conduct](CODE_OF_CONDUCT.md). For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq), or contact [opensource-codeofconduct@amazon.com](mailto:opensource-codeofconduct@amazon.com) with any additional questions or comments.
@@ -153,4 +119,3 @@ See the [LICENSE](./LICENSE) file for our project's licensing. We will ask you t
 
 ## Copyright
 
-Copyright OpenSearch Contributors. See [NOTICE](NOTICE.txt) for details.

dashboards-reports/.gitignore

@@ -10,4 +10,3 @@ yarn-error.log
 .eslintcache
 package-lock.json
 /target/
-.chromium/

dashboards-reports/.opensearch_dashboards-plugin-helpers.json

@@ -5,6 +5,7 @@
     "yarn.lock",
     ".i18nrc.json",
     "common/**/*",
+    "scripts/**/*",
     "public/**/*",
     "server/**/*",
     "translations/**/*"

dashboards-reports/package.json

@@ -13,20 +13,21 @@
     "test": "../../node_modules/.bin/jest --config ./test/jest.config.js",
     "cypress:run": "cypress run",
     "cypress:open": "cypress open",
-    "plugin_helpers": "node ../../scripts/plugin_helpers"
+    "plugin_helpers": "node ../../scripts/plugin_helpers",
+    "postinstall": "node ./scripts/patch-html2canvas.js"
   },
   "dependencies": {
-    "async-mutex": "^0.2.6",
     "babel-polyfill": "^6.26.0",
     "cron-validator": "^1.1.1",
-    "dompurify": "^2.3.8",
+    "dompurify": "^2.4.1",
     "elastic-builder": "^2.7.1",
     "enzyme-adapter-react-16": "^1.15.2",
+    "html2canvas": "1.4.1",
     "jest-fetch-mock": "^3.0.3",
     "jquery": "^3.5.0",
     "jsdom": "13.1.0",
     "json-2-csv": "^3.7.6",
-    "puppeteer-core": "^13.7.0",
+    "jspdf": "^2.5.1",
     "react-addons-test-utils": "^15.6.2",
     "react-id-generator": "^3.0.1",
     "react-markdown": "^4.3.1",
@@ -37,15 +38,15 @@
     "react-router-dom": "^5.2.0",
     "react-toast-notifications": "^2.4.0",
     "set-interval-async": "1.0.33",
-    "showdown": "^1.9.1"
+    "showdown": "^1.9.1",
+    "svg-pathdata": "5.0.5"
   },
   "devDependencies": {
     "@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
     "@types/dompurify": "^2.3.3",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jsdom": "^16.2.3",
-    "@types/puppeteer-core": "^5.4.0",
-    "@types/react": "^16.9.36",
+    "@types/react": "^16.14.23",
     "@types/react-addons-test-utils": "^0.14.25",
     "@types/react-dom": "^16.9.8",
     "@types/react-test-renderer": "^16.9.1",
@@ -60,6 +61,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest-dom": "^4.0.0",
     "react-test-renderer": "^16.12.0",
+    "replace-in-file": "^6.3.5",
     "ts-jest": "^26.1.0"
   },
   "resolutions": {
@@ -73,6 +75,7 @@
     "ansi-regex": "5.0.1",
     "json-schema": "0.4.0",
     "ws": "^7.4.6",
-    "minimist": "^1.2.6"
+    "minimist": "^1.2.6",
+    "yargs": "16.2.0"
   }
 }

dashboards-reports/public/components/context_menu/context_menu.js

@@ -4,24 +4,30 @@
  */
 
 /* eslint-disable no-restricted-globals */
-import $ from 'jquery';
+//@ts-check
 import { i18n } from '@osd/i18n';
+import $ from 'jquery';
+import { parse } from 'url';
 import { readStreamToFile } from '../main/main_utils';
+import { uiSettingsService } from '../utils/settings_service';
+import {
+  GENERATE_REPORT_PARAM,
+  GENERATE_REPORT_PARAM_REGEX,
+} from '../visual_report/constants';
+import { generateReport } from '../visual_report/generate_report';
 import {
-  contextMenuCreateReportDefinition,
-  getTimeFieldsFromUrl,
-  displayLoadingModal,
   addSuccessOrFailureToast,
+  contextMenuCreateReportDefinition,
   contextMenuViewReports,
+  displayLoadingModal,
+  getTimeFieldsFromUrl,
   replaceQueryURL,
 } from './context_menu_helpers';
 import {
+  getMenuItem,
   popoverMenu,
   popoverMenuDiscover,
-  getMenuItem,
 } from './context_menu_ui';
-import { parse } from 'url';
-import { uiSettingsService } from '../utils/settings_service';
 
 const generateInContextReport = async (
   timeRanges,
@@ -102,23 +108,28 @@ const generateInContextReport = async (
       credentials: 'include',
     }
   )
-    .then((response) => {
-      if (response.status === 200) {
-        $('#reportGenerationProgressModal').remove();
-        addSuccessOrFailureToast('success');
-      } else {
-        if (response.status === 403) {
+    .then(async (response) => [response.status, await response.json()])
+    .then(async ([status, data]) => {
+      if (status !== 200) {
+        if (status === 403) {
           addSuccessOrFailureToast('permissionsFailure');
-        } else if (response.status === 503) {
+        } else if (status === 503) {
           addSuccessOrFailureToast('timeoutFailure', reportSource);
         } else {
           addSuccessOrFailureToast('failure');
         }
+      } else if (fileFormat === 'pdf' || fileFormat === 'png') {
+        try {
+          await generateReport(data.reportId);
+          addSuccessOrFailureToast('success');
+        } catch (error) {
+          console.error(error);
+          addSuccessOrFailureToast('failure');
+        }
+      } else if (data.data) {
+        await readStreamToFile(data.data, fileFormat, data.filename);
       }
-      return response.json();
-    })
-    .then(async (data) => {
-      await readStreamToFile(data.data, fileFormat, data.filename);
+      $('#reportGenerationProgressModal').remove();
     });
 };
 
@@ -213,9 +224,34 @@ $(function () {
     });
   });
 
+  checkURLParams();
   locationHashChanged();
 });
 
+/* generate a report if flagged in URL params */
+const checkURLParams = async () => {
+  const [hash, query] = location.href.split('#')[1].split('?');
+  const params = new URLSearchParams(query);
+  const id = params.get(GENERATE_REPORT_PARAM);
+  if (!id) return;
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  displayLoadingModal();
+  try {
+    await generateReport(id, 30000);
+    window.history.replaceState(
+      {},
+      '',
+      `#${hash}?${query.replace(GENERATE_REPORT_PARAM_REGEX, '')}`
+    );
+    addSuccessOrFailureToast('success');
+  } catch (error) {
+    console.error(error);
+    addSuccessOrFailureToast('failure');
+  } finally {
+    $('#reportGenerationProgressModal').remove();
+  }
+};
+
 const isDiscoverNavMenu = (navMenu) => {
   return (
     navMenu[0].children.length === 5 &&

dashboards-reports/public/components/context_menu/context_menu_ui.js

@@ -246,7 +246,7 @@ export const popoverMenuDiscover = (savedObjectAvailable) => {
 
 export const permissionsMissingOnGeneration = () => {
   return `
-  <div class="euiToast euiToast--danger" id="permissionsMissingErrorToast">
+  <div class="euiToast euiToast--danger" id="permissionsMissingErrorToast" data-html2canvas-ignore>
   <p class="euiScreenReaderOnly">${i18n.translate(
     'opensearch.reports.menu.newNotificationAppears',
     { defaultMessage: 'A new notification appears' }
@@ -277,7 +277,7 @@ export const permissionsMissingOnGeneration = () => {
 
 export const reportGenerationSuccess = () => {
   return `
-  <div class="euiToast euiToast--success" id="reportSuccessToast">
+  <div class="euiToast euiToast--success" id="reportSuccessToast" data-html2canvas-ignore>
     <p class="euiScreenReaderOnly">A new notification appears</p>
     <div class="euiToastHeader euiToastHeader--withBody"
     aria-label="Notification" data-test-subj="euiToastHeader">
@@ -319,7 +319,7 @@ export const reportGenerationFailure = (
   })
 ) => {
   return `
-  <div class="euiToast euiToast--danger" id="reportFailureToast">
+  <div class="euiToast euiToast--danger" id="reportFailureToast" data-html2canvas-ignore>
     <p class="euiScreenReaderOnly">A new notification appears</p>
     <div class="euiToastHeader euiToastHeader--withBody"
     aria-label="Notification" data-test-subj="euiToastHeader">
@@ -346,7 +346,7 @@ export const reportGenerationFailure = (
 
 export const reportGenerationInProgressModal = () => {
   return `
-  <div class="euiOverlayMask" id="reportGenerationProgressModal">
+  <div class="euiOverlayMask" id="reportGenerationProgressModal" data-html2canvas-ignore>
   <div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div>
   <div data-focus-guard="true" tabindex="1" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div>
   <div data-focus-lock-disabled="false">
@@ -377,17 +377,14 @@ export const reportGenerationInProgressModal = () => {
                    'opensearch.reports.menu.progress.youCanClose',
                    {
                      defaultMessage:
-                       'You can close this dialog while we continue in the background.',
+                       'Please keep this dialog open while report is being generated.',
                    }
                  )}</div>
                  <div class="euiSpacer euiSpacer--l"></div>
                  <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive">
                     <div class="euiFlexItem euiFlexItem--flexGrowZero"><span class="euiLoadingSpinner euiLoadingSpinner--xLarge" style="min-width: 75px; min-height: 75px;"></span></div>
                  </div>
                  <div class="euiSpacer euiSpacer--l"></div>
-                 <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive">
-                    <div class="euiFlexItem euiFlexItem--flexGrowZero"><button class="euiButton euiButton--primary" type="button" id="closeReportGenerationModalButton"><span class="euiButton__content"><span class="euiButton__text">Close</span></span></button></div>
-                 </div>
               </div>
            </div>
         </div>

dashboards-reports/public/components/main/loading_modal/loading_modal.tsx

@@ -59,7 +59,7 @@ export function GenerateReportLoadingModal(props: { setShowLoading: any }) {
             <EuiText>
               {i18n.translate('opensearch.reports.loading.youCanClose', {
                 defaultMessage:
-                  'You can close this dialog while we continue in the background.',
+                  'Please keep this dialog open while report is being generated.',
               })}
             </EuiText>
             <EuiSpacer />
@@ -72,15 +72,6 @@ export function GenerateReportLoadingModal(props: { setShowLoading: any }) {
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiSpacer size="l" />
-            <EuiFlexGroup alignItems="flexEnd" justifyContent="flexEnd">
-              <EuiFlexItem grow={false}>
-                <EuiButton onClick={closeModal}>
-                  {i18n.translate('opensearch.reports.loading.close', {
-                    defaultMessage: 'Close',
-                  })}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
           </EuiModalBody>
         </EuiModal>
       </EuiOverlayMask>