[Reporting/Tech Debt] Convert PdfMaker class to TypeScript

package.json

@@ -124,18 +124,19 @@
     "@elastic/safer-lodash-set": "0.0.0",
     "@hapi/good-squeeze": "5.2.1",
     "@hapi/wreck": "^15.0.2",
+    "@kbn/ace": "1.0.0",
     "@kbn/analytics": "1.0.0",
     "@kbn/apm-config-loader": "1.0.0",
     "@kbn/config": "1.0.0",
     "@kbn/config-schema": "1.0.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/interpreter": "1.0.0",
     "@kbn/logging": "1.0.0",
+    "@kbn/monaco": "1.0.0",
     "@kbn/std": "1.0.0",
     "@kbn/ui-framework": "1.0.0",
-    "@kbn/ace": "1.0.0",
-    "@kbn/monaco": "1.0.0",
     "@kbn/ui-shared-deps": "1.0.0",
+    "@types/pdfmake": "^0.1.15",
     "@types/yauzl": "^2.9.1",
     "JSONStream": "1.3.5",
     "abortcontroller-polyfill": "^1.4.0",

x-pack/plugins/reporting/server/export_types/printable_pdf/lib/generate_pdf.ts

@@ -12,8 +12,7 @@ import { LevelLogger } from '../../../lib';
 import { createLayout, LayoutParams } from '../../../lib/layouts';
 import { ScreenshotResults } from '../../../lib/screenshots';
 import { ConditionalHeaders } from '../../common';
-// @ts-ignore untyped module
-import { pdf } from './pdf';
+import { PdfMaker } from './pdf';
 import { getTracker } from './tracker';
 
 const getTimeRange = (urlScreenshots: ScreenshotResults[]) => {
@@ -58,7 +57,7 @@ export async function generatePdfObservableFactory(reporting: ReportingCore) {
         tracker.endScreenshots();
 
         tracker.startSetup();
-        const pdfOutput = pdf.create(layout, logo);
+        const pdfOutput = new PdfMaker(layout, logo);
         if (title) {
           const timeRange = getTimeRange(results);
           title += timeRange ? ` - ${timeRange}` : '';

x-pack/plugins/reporting/server/export_types/printable_pdf/lib/get_custom_logo.test.ts

@@ -31,7 +31,7 @@ test(`gets logo from uiSettings`, async () => {
   };
 
   const mockGet = jest.fn();
-  mockGet.mockImplementationOnce((...args: any[]) => {
+  mockGet.mockImplementationOnce((...args: string[]) => {
     if (args[0] === 'xpackReporting:customPdfLogo') {
       return 'purple pony';
     }

x-pack/plugins/reporting/server/export_types/printable_pdf/lib/pdf/get_doc_options.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { BufferOptions } from 'pdfmake/interfaces';
+
+export function getDocOptions(tableBorderWidth: number): BufferOptions {
+  return {
+    tableLayouts: {
+      noBorder: {
+        // format is function (i, node) { ... };
+        hLineWidth: () => 0,
+        vLineWidth: () => 0,
+        paddingLeft: () => 0,
+        paddingRight: () => 0,
+        paddingTop: () => 0,
+        paddingBottom: () => 0,
+      },
+      simpleBorder: {
+        // format is function (i, node) { ... };
+        hLineWidth: () => tableBorderWidth,
+        vLineWidth: () => tableBorderWidth,
+        hLineColor: () => 'silver',
+        vLineColor: () => 'silver',
+        paddingLeft: () => 0,
+        paddingRight: () => 0,
+        paddingTop: () => 0,
+        paddingBottom: () => 0,
+      },
+    },
+  };
+}

x-pack/plugins/reporting/server/export_types/printable_pdf/lib/pdf/get_font.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// @ts-ignore: no module definition
+import xRegExp from 'xregexp';
+
+export function getFont(text: string) {
+  // Once unicode regex scripts are fully supported we should be able to get rid of the dependency
+  // on xRegExp library.  See https://github.com/tc39/proposal-regexp-unicode-property-escapes
+  // for more information. We are matching Han characters which is one of the supported unicode scripts
+  // (you can see the full list of supported scripts here: http://www.unicode.org/standard/supported.html).
+  // This will match Chinese, Japanese, Korean and some other Asian languages.
+  const isCKJ = xRegExp('\\p{Han}').test(text, 'g');
+  if (isCKJ) {
+    return 'noto-cjk';
+  } else {
+    return 'Roboto';
+  }
+}

x-pack/plugins/reporting/server/export_types/printable_pdf/lib/pdf/get_tempate.ts

@@ -0,0 +1,130 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import path from 'path';
+import { TDocumentDefinitions } from 'pdfmake/interfaces';
+import { LayoutInstance } from '../../../../lib/layouts';
+import { getFont } from './get_font';
+
+export function getTemplate(
+  layout: LayoutInstance,
+  logo: string | undefined,
+  title: string,
+  tableBorderWidth: number,
+  assetPath: string
+): Partial<TDocumentDefinitions> {
+  const pageMarginTop = 40;
+  const pageMarginBottom = 80;
+  const pageMarginWidth = 40;
+  const headingFontSize = 14;
+  const headingMarginTop = 10;
+  const headingMarginBottom = 5;
+  const headingHeight = headingFontSize * 1.5 + headingMarginTop + headingMarginBottom;
+  const subheadingFontSize = 12;
+  const subheadingMarginTop = 0;
+  const subheadingMarginBottom = 5;
+  const subheadingHeight = subheadingFontSize * 1.5 + subheadingMarginTop + subheadingMarginBottom;
+
+  return {
+    // define page size
+    pageOrientation: layout.getPdfPageOrientation(),
+    pageSize: layout.getPdfPageSize({
+      pageMarginTop,
+      pageMarginBottom,
+      pageMarginWidth,
+      tableBorderWidth,
+      headingHeight,
+      subheadingHeight,
+    }),
+    pageMargins: [pageMarginWidth, pageMarginTop, pageMarginWidth, pageMarginBottom],
+
+    header() {
+      return {
+        margin: [pageMarginWidth, pageMarginTop / 4, pageMarginWidth, 0],
+        text: title,
+        font: getFont(title),
+        style: {
+          color: '#aaa',
+        },
+        fontSize: 10,
+        alignment: 'center',
+      };
+    },
+
+    footer(currentPage: number, pageCount: number) {
+      const logoPath = path.resolve(assetPath, 'img', 'logo-grey.png'); // Default Elastic Logo
+      return {
+        margin: [pageMarginWidth, pageMarginBottom / 4, pageMarginWidth, 0],
+        layout: 'noBorder',
+        table: {
+          widths: [100, '*', 100],
+          body: [
+            [
+              {
+                fit: [100, 35],
+                image: logo || logoPath,
+              },
+              {
+                alignment: 'center',
+                text: i18n.translate('xpack.reporting.exportTypes.printablePdf.pagingDescription', {
+                  defaultMessage: 'Page {currentPage} of {pageCount}',
+                  values: { currentPage: currentPage.toString(), pageCount },
+                }),
+                style: {
+                  color: '#aaa',
+                },
+              },
+              '',
+            ],
+            [
+              logo
+                ? {
+                    text: i18n.translate(
+                      'xpack.reporting.exportTypes.printablePdf.logoDescription',
+                      {
+                        defaultMessage: 'Powered by Elastic',
+                      }
+                    ),
+                    fontSize: 10,
+                    style: {
+                      color: '#aaa',
+                    },
+                    margin: [0, 2, 0, 0],
+                  }
+                : '',
+              '',
+              '',
+            ],
+          ],
+        },
+      };
+    },
+
+    styles: {
+      heading: {
+        alignment: 'left',
+        fontSize: headingFontSize,
+        bold: true,
+        margin: [headingMarginTop, 0, headingMarginBottom, 0],
+      },
+      subheading: {
+        alignment: 'left',
+        fontSize: subheadingFontSize,
+        italics: true,
+        margin: [0, 0, subheadingMarginBottom, 20],
+      },
+      warning: {
+        color: '#f39c12', // same as @brand-warning in Kibana colors.less
+      },
+    },
+
+    defaultStyle: {
+      fontSize: 12,
+      font: 'Roboto',
+    },
+  };
+}