Skip to content

Commit

Permalink
[Reporting/Tech Debt] Convert PdfMaker class to TypeScript (#81242)
Browse files Browse the repository at this point in the history
* convert pdf.js to TS

* more typescript

* simplify caller

* more typescript

* more typescript

* fix the code to match the expected interface

* very cool comment

* interface correction

* remove unused class method

* add unit test for PdfMaker

* file rename for typo correction

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
tsullivan and kibanamachine authored Oct 21, 2020
1 parent 99e90aa commit ae95bf2
Show file tree
Hide file tree
Showing 14 changed files with 448 additions and 333 deletions.
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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[]) => {
Expand Down Expand Up @@ -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}` : '';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
},
},
};
}
Original file line number Diff line number Diff line change
@@ -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';
}
}
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
Loading

0 comments on commit ae95bf2

Please sign in to comment.