feat: [ZNO-2045] Download dashboard in PDF and Word(doc) formats

docker-compose.yml

@@ -91,6 +91,27 @@ services:
       - REDIS_PORT=6379
       - REDIS_SSL=false
 
+  superset-pdf-report:
+    container_name: superset_pdf_report
+    build:
+      target: development_build
+      context: .
+      dockerfile: ./superset-pdf-report/Dockerfile
+      args:
+        NODE_ENV: development
+    image: superset-pdf-report
+    ports:
+      - 8890:8890
+    depends_on: *superset-depends-on
+    volumes:
+      - ./superset-pdf-report:/app
+      - /app/node_modules
+    command: npm run start:dev
+    environment:
+      - PORT=8890
+    stdin_open: true
+    tty: true
+
   superset-init:
     image: *superset-image
     container_name: superset_init

docker/pythonpath_dev/superset_config.py

@@ -95,6 +95,7 @@ class CeleryConfig:
 FEATURE_FLAGS = {"ALERT_REPORTS": True}
 ALERT_REPORTS_NOTIFICATION_DRY_RUN = True
 WEBDRIVER_BASEURL = "http://superset:8088/"
+PDF_GENERATOR_BASEURL = "http://superset-pdf-report:8890/"
 # The base URL for the email report hyperlinks.
 WEBDRIVER_BASEURL_USER_FRIENDLY = WEBDRIVER_BASEURL
 

requirements/base.txt

@@ -229,6 +229,8 @@ paramiko==2.11.0
     # via sshtunnel
 parsedatetime==2.6
     # via apache-superset
+pdf2docx==0.5.6
+    # via apache-superset
 pgsanity==0.2.9
     # via apache-superset
 polyline==2.0.0

superset-frontend/src/assets/stylesheets/less/index.less

@@ -45,3 +45,17 @@ header {
   display: flex;
   flex-direction: column;
 }
+
+@media print {
+  a[href]::after {
+    content: none !important;
+  }
+
+  .header-controls {
+    display: none !important;
+  }
+
+  .grid-row--empty > div {
+    color: transparent !important;
+  }
+}

superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx

@@ -112,7 +112,8 @@ test('should render', () => {
 test('should render the dropdown button', () => {
   const mockedProps = createProps();
   setup(mockedProps);
-  expect(screen.getByRole('button')).toBeInTheDocument();
+  const dropdownButtons = screen.getAllByRole('button');
+  expect(dropdownButtons[0]).toBeInTheDocument();
 });
 
 test('should render the menu items', async () => {
@@ -121,7 +122,7 @@ test('should render the menu items', async () => {
   expect(screen.getAllByRole('menuitem')).toHaveLength(4);
   expect(screen.getByText('Refresh dashboard')).toBeInTheDocument();
   expect(screen.getByText('Set auto-refresh interval')).toBeInTheDocument();
-  expect(screen.getByText('Download as image')).toBeInTheDocument();
+  expect(screen.getByText('Download')).toBeInTheDocument();
   expect(screen.getByText('Enter fullscreen')).toBeInTheDocument();
 });
 

superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import {
+  css,
   isFeatureEnabled,
   FeatureFlag,
   SupersetClient,
@@ -29,6 +30,7 @@ import { Menu } from 'src/components/Menu';
 import { URL_PARAMS } from 'src/constants';
 import ShareMenuItems from 'src/dashboard/components/menu/ShareMenuItems';
 import CssEditor from 'src/dashboard/components/CssEditor';
+import Icons from 'src/components/Icons';
 import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
 import SaveModal from 'src/dashboard/components/SaveModal';
 import HeaderReportDropdown from 'src/features/reports/ReportModal/HeaderReportDropdown';
@@ -40,6 +42,7 @@ import getDashboardUrl from 'src/dashboard/util/getDashboardUrl';
 import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE } from 'src/logger/LogUtils';
+import { exportDashboard } from 'src/explore/exploreUtils';
 
 const propTypes = {
   addSuccessToast: PropTypes.func.isRequired,
@@ -91,13 +94,24 @@ const MENU_KEYS = {
   EDIT_PROPERTIES: 'edit-properties',
   EDIT_CSS: 'edit-css',
   DOWNLOAD_AS_IMAGE: 'download-as-image',
+  DOWNLOAD_AS_PDF_PORTRAIT: 'download-as-pdf-portrait',
+  DOWNLOAD_AS_PDF_LANDSCAPE: 'download-as-pdf-landscape',
+  DOWNLOAD_AS_DOC_PORTRAIT: 'download-as-doc-portrait',
+  DOWNLOAD_AS_DOC_LANDSCAPE: 'download-as-doc-landscape',
   TOGGLE_FULLSCREEN: 'toggle-fullscreen',
   MANAGE_EMBEDDED: 'manage-embedded',
   MANAGE_EMAIL_REPORT: 'manage-email-report',
 };
 
 const SCREENSHOT_NODE_SELECTOR = '.dashboard';
 
+const iconReset = css`
+  .ant-dropdown-menu-item > & > .anticon:first-child {
+    margin-right: 0;
+    vertical-align: 0;
+  }
+`;
+
 class HeaderActionsDropdown extends React.PureComponent {
   static discardChanges() {
     window.location.reload();
@@ -167,6 +181,38 @@ class HeaderActionsDropdown extends React.PureComponent {
       case MENU_KEYS.EDIT_PROPERTIES:
         this.props.showPropertiesModal();
         break;
+      case MENU_KEYS.DOWNLOAD_AS_PDF_PORTRAIT: {
+        exportDashboard({
+          formData: { id: this.props.dashboardId },
+          resultFormat: 'pdf',
+          landscape: false,
+        });
+        break;
+      }
+      case MENU_KEYS.DOWNLOAD_AS_PDF_LANDSCAPE: {
+        exportDashboard({
+          formData: { id: this.props.dashboardId },
+          resultFormat: 'pdf',
+          landscape: true,
+        });
+        break;
+      }
+      case MENU_KEYS.DOWNLOAD_AS_DOC_PORTRAIT: {
+        exportDashboard({
+          formData: { id: this.props.dashboardId },
+          resultFormat: 'doc',
+          landscape: false,
+        });
+        break;
+      }
+      case MENU_KEYS.DOWNLOAD_AS_DOC_LANDSCAPE: {
+        exportDashboard({
+          formData: { id: this.props.dashboardId },
+          resultFormat: 'doc',
+          landscape: true,
+        });
+        break;
+      }
       case MENU_KEYS.DOWNLOAD_AS_IMAGE: {
         // menu closes with a delay, we need to hide it manually,
         // so that we don't capture it on the screenshot
@@ -312,12 +358,53 @@ class HeaderActionsDropdown extends React.PureComponent {
           </Menu.Item>
         )}
         {!editMode && (
-          <Menu.Item
-            key={MENU_KEYS.DOWNLOAD_AS_IMAGE}
-            onClick={this.handleMenuClick}
-          >
-            {t('Download as image')}
-          </Menu.Item>
+          <Menu.SubMenu title={t('Download')} key={MENU_KEYS.DOWNLOAD_SUBMENU}>
+            <Menu.SubMenu
+              title={t('Download as PDF')}
+              key={MENU_KEYS.DOWNLOAD_SUBMENU}
+            >
+              <Menu.Item
+                key={MENU_KEYS.DOWNLOAD_AS_PDF_PORTRAIT}
+                icon={<Icons.FilePdfOutlined css={iconReset} />}
+                onClick={this.handleMenuClick}
+              >
+                {t('Portrait')}
+              </Menu.Item>
+              <Menu.Item
+                key={MENU_KEYS.DOWNLOAD_AS_PDF_LANDSCAPE}
+                icon={<Icons.FilePdfOutlined css={iconReset} />}
+                onClick={this.handleMenuClick}
+              >
+                {t('Landscape')}
+              </Menu.Item>
+            </Menu.SubMenu>
+            <Menu.SubMenu
+              title={t('Download as Doc')}
+              key={MENU_KEYS.DOWNLOAD_SUBMENU}
+            >
+              <Menu.Item
+                key={MENU_KEYS.DOWNLOAD_AS_DOC_PORTRAIT}
+                icon={<Icons.FileWordOutlined css={iconReset} />}
+                onClick={this.handleMenuClick}
+              >
+                {t('Portrait')}
+              </Menu.Item>
+              <Menu.Item
+                key={MENU_KEYS.DOWNLOAD_AS_DOC_LANDSCAPE}
+                icon={<Icons.FileWordOutlined css={iconReset} />}
+                onClick={this.handleMenuClick}
+              >
+                {t('Landscape')}
+              </Menu.Item>
+            </Menu.SubMenu>
+            <Menu.Item
+              key={MENU_KEYS.DOWNLOAD_AS_IMAGE}
+              icon={<Icons.FileOutlined css={iconReset} />}
+              onClick={this.handleMenuClick}
+            >
+              {t('Download as image')}
+            </Menu.Item>
+          </Menu.SubMenu>
         )}
         {userCanShare && (
           <Menu.SubMenu

superset-frontend/src/explore/exploreUtils/index.js

@@ -270,6 +270,22 @@ export const exportChart = ({
   SupersetClient.postForm(url, { form_data: safeStringify(payload) });
 };
 
+export const exportDashboard = ({
+  formData,
+  resultFormat = 'pdf',
+  landscape = false,
+}) => {
+  const url = '/api/v1/dashboard/data';
+
+  const payload = {
+    ...formData,
+    result_format: resultFormat,
+    landscape,
+  };
+
+  SupersetClient.postForm(url, { form_data: safeStringify(payload) });
+};
+
 export const exploreChart = (formData, requestParams) => {
   const url = getExploreUrl({
     formData,

superset-pdf-report/.eslintrc

@@ -0,0 +1,21 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:node/recommended"
+    ],
+    "parserOptions": {
+        // Only ESLint 6.2.0 and later support ES2020.
+        "ecmaVersion": 2020
+    },
+    "rules": {
+        "node/exports-style": ["error", "module.exports"],
+        "node/file-extension-in-import": ["error", "always"],
+        "node/prefer-global/buffer": ["error", "always"],
+        "node/prefer-global/console": ["error", "always"],
+        "node/prefer-global/process": ["error", "always"],
+        "node/prefer-global/url-search-params": ["error", "always"],
+        "node/prefer-global/url": ["error", "always"],
+        "node/prefer-promises/dns": "error",
+        "node/prefer-promises/fs": "error"
+    }
+}

superset-pdf-report/.jscsrc

@@ -0,0 +1,46 @@
+{
+    "disallowKeywords": ["with"],
+    "disallowKeywordsOnNewLine": ["else"],
+    "disallowMixedSpacesAndTabs": true,
+    "disallowMultipleVarDecl": false,
+    "disallowNewlineBeforeBlockStatements": true,
+    "disallowQuotedKeysInObjects": true,
+    "disallowSpaceAfterObjectKeys": true,
+    "disallowSpaceAfterPrefixUnaryOperators": true,
+    "disallowSpacesInFunction": false,
+    "disallowSpacesInsideParentheses": true,
+    "disallowTrailingWhitespace": true,
+    "maximumLineLength": 120,
+    "requireCamelCaseOrUpperCaseIdentifiers": true,
+    "requireCapitalizedComments": true,
+    "requireCapitalizedConstructors": true,
+    "requireCurlyBraces": true,
+    "requireSpaceAfterKeywords": [
+        "if",
+        "else",
+        "for",
+        "while",
+        "do",
+        "switch",
+        "case",
+        "return",
+        "try",
+        "catch",
+        "typeof"
+    ],
+    "requireSpaceAfterLineComment": true,
+    "requireSpaceAfterBinaryOperators": true,
+    "requireSpaceBeforeBinaryOperators": true,
+    "requireSpaceBeforeBlockStatements": true,
+    "requireSpaceBeforeObjectValues": true,
+    "requireSpacesInFunction": {
+        "beforeOpeningCurlyBrace": true
+    },
+    "requireTrailingComma": {
+        "ignoreSingleLine": true
+    },
+    "requireEarlyReturn": true,
+    "validateIndentation": 4,
+    "validateLineBreaks": "LF",
+    "validateQuoteMarks": "'"
+}

superset-pdf-report/.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion": 9
+}

superset-pdf-report/Dockerfile

@@ -0,0 +1,43 @@
+# This Dockerfile uses multi-stage build to customize DEV and PROD images:
+# https://docs.docker.com/develop/develop-images/multistage-build/
+
+FROM node:16 AS base
+
+LABEL maintainer="[email protected]"
+LABEL vendor="Prozori solutions"
+
+# Install latest chrome dev package and fonts to support major
+# charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
+# Note: this installs the necessary libs to make the bundled version
+# of Chromium that Puppeteer
+# installs, work.
+RUN apt-get update \
+    && apt-get install -y wget gnupg \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1 \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+
+
+## It's a good idea to use dumb-init to help prevent zombie chrome processes.
+ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.0/dumb-init_1.2.0_amd64 /usr/local/bin/dumb-init
+RUN chmod +x /usr/local/bin/dumb-init
+
+ARG NODE_ENV
+
+ENV NODE_ENV=${NODE_ENV}
+
+WORKDIR /app
+
+COPY ./superset-pdf-report/package.json /app/package.json
+COPY ./superset-pdf-report/package-lock.json /app/package-lock.json
+
+FROM base as development_build
+RUN npm install -g nodemon && npm install
+
+FROM base as production_build
+USER root
+RUN npm ci
+COPY . /app