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

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

@@ -36,15 +36,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:
@@ -70,114 +61,10 @@ jobs:
         run: |
           cd ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}
           yarn build
-
-          cd build
-          mkdir -p ./{linux-x64,linux-arm64}/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
-
-          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 ..
+          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
-
-  windows-build:
-    runs-on: windows-latest
-    steps:
-      - name: Checkout Plugin
-        uses: actions/checkout@v1
-
-      # Enable longer filenames for windows
-      - name: Enable longer filenames
-        run: git config --system core.longpaths true
-
-      - name: Checkout OpenSearch Dashboards
-        uses: actions/checkout@v1
-        with:
-          repository: opensearch-project/Opensearch-Dashboards
-          ref: ${{ env.OPENSEARCH_VERSION }}
-          path: OpenSearch-Dashboards
-
-      - name: Get node version
-        id: versions_step
-        run:
-          echo "::set-output name=node_version::$(node -p "(require('../OpenSearch-Dashboards/package.json').engines.node).match(/[.0-9]+/)[0]")"
-
-      - name: Setup Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ steps.versions_step.outputs.node_version }}
-          registry-url: 'https://registry.npmjs.org'
-
-
-      - 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: |
-          cd ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}
-          curl.exe -LO https://github.com/opensearch-project/dashboards-reports/releases/download/chromium-1.12.0.0/chromium-windows-x64.zip
-          Expand-Archive -Path 'chromium-windows-x64.zip'
-          Move-Item -Path "./chromium-windows-x64/.chromium" -Destination "./.chromium"
-          rd chromium-windows-x64.zip
-          rd chromium-windows-x64
-
-      - name: OpenSearch Dashboards Plugin Bootstrap
-        uses: nick-invision/retry@v1
-        with:
-          timeout_minutes: 30
-          max_attempts: 3
-          command: cd ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }} && yarn osd bootstrap
-
-      - name: Test
-        uses: nick-invision/retry@v1
-        with:
-          timeout_minutes: 30
-          max_attempts: 3
-          command: cd ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }} && yarn test
-
-      - name: Build Artifact
-        run: |
-          cd ../OpenSearch-Dashboards/plugins/${{ env.PLUGIN_NAME }}
-          yarn build
-
-          cd build
-          mkdir -p ./windows-x64/opensearch-dashboards/${{ env.PLUGIN_NAME }}
-          mv ./${{ env.PLUGIN_NAME }}-*.zip ./windows-x64/${{ env.ARTIFACT_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}-windows-x64.zip
-
-          cd windows-x64
-          curl.exe -LO https://github.com/opensearch-project/dashboards-reports/releases/download/chromium-1.12.0.0/chromium-windows-x64.zip
-          Expand-Archive -Path 'chromium-windows-x64.zip'
-          Move-Item -Path "./chromium-windows-x64/.chromium" -Destination "./opensearch-dashboards/${{ env.PLUGIN_NAME }}"
-          rd chromium-windows-x64.zip
-          rd chromium-windows-x64
-          Compress-Archive -Path "./${{ env.ARTIFACT_NAME }}-*.zip" -Destination "./opensearch-dashboards"
-          mv ./${{ env.ARTIFACT_NAME }}-*.zip ..
-          cd ..
-
-      - 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": "^16.5.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,14 +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.14.23",
     "@types/react-addons-test-utils": "^0.14.25",
     "@types/react-dom": "^16.9.8",
     "@types/react-test-renderer": "^16.9.1",
@@ -59,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 +76,7 @@
     "json-schema": "0.4.0",
     "ws": "^7.4.6",
     "minimist": "^1.2.6",
-    "execa": "^4.0.2"
+    "execa": "^4.0.2",
+    "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 &&