TypeScript Reporting Layouts

src/server/index.d.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+export interface KbnServer {
+    config: () => configObject;
+  }
+
+export interface configObject {
+    get: (path: string) => any;
+}

x-pack/plugins/reporting/export_types/printable_pdf/common/constants.js → x-pack/plugins/reporting/export_types/printable_pdf/common/constants.ts

@@ -7,4 +7,4 @@
 export const LayoutTypes = {
   PRESERVE_LAYOUT: 'preserve_layout',
   PRINT: 'print',
-};
+};

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

@@ -11,7 +11,7 @@ import { pdf } from './pdf';
 import { groupBy } from 'lodash';
 import { oncePerServer } from '../../../../server/lib/once_per_server';
 import { screenshotsObservableFactory } from './screenshots';
-import { getLayoutFactory } from './layouts';
+import { createlayout } from './layouts/layout_factory';
 
 const getTimeRange = (urlScreenshots) => {
   const grouped = groupBy(urlScreenshots.map(u => u.timeRange));
@@ -31,7 +31,6 @@ const formatDate = (date, timezone) => {
 function generatePdfObservableFn(server) {
   const screenshotsObservable = screenshotsObservableFactory(server);
   const captureConcurrency = 1;
-  const getLayout = getLayoutFactory(server);
 
   const urlScreenshotsObservable = (urls, headers, layout) => {
     return Rx.from(urls).pipe(
@@ -68,7 +67,9 @@ function generatePdfObservableFn(server) {
 
 
   return function generatePdfObservable(title, urls, browserTimezone, headers, layoutParams, logo) {
-    const layout = getLayout(layoutParams);
+
+    const layout = createlayout(server, layoutParams);
+
     const screenshots$ = urlScreenshotsObservable(urls, headers, layout);
 
     return screenshots$.pipe(

x-pack/plugins/reporting/export_types/printable_pdf/server/lib/layouts/index.d.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 { Size } from '../../../../../types';
+
+export interface CaptureConfig {
+    zoom: number;
+    viewport: Size;
+  }
+
+export interface ViewZoomWidthHeight {
+    zoom: number;
+    width: number;
+    height: number;
+  }

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

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { createlayout } from './layout_factory';
+export { PrintLayout } from './print_layout';
+export { PreserveLayout } from './preserve_layout';

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

@@ -0,0 +1,43 @@
+/*
+ * 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 { Size } from '../../../../../types';
+import { ViewZoomWidthHeight } from './index.d';
+
+export interface PageSizeParams {
+  pageMarginTop: number;
+  pageMarginBottom: number;
+  pageMarginWidth: number;
+  tableBorderWidth: number;
+  headingHeight: number;
+  subheadingHeight: number;
+}
+
+export interface PdfImageSize {
+  width: number;
+  height?: number;
+}
+
+export abstract class Layout {
+  public id: string = '';
+
+  constructor(id: string) {
+    this.id = id;
+  }
+
+  public abstract getPdfImageSize(): PdfImageSize;
+
+  public abstract getPdfPageOrientation(): string | undefined;
+
+  public abstract getPdfPageSize(pageSizeParamsIn: PageSizeParams): string | Size;
+
+  public abstract getViewport(itemsCount: number): ViewZoomWidthHeight;
+
+  public abstract getBrowserZoom(): number;
+
+  public abstract getBrowserViewport(): Size;
+
+  public abstract getCssOverridesPath(): string;
+}

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

@@ -0,0 +1,32 @@
+/*
+ * 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 { KbnServer } from '../../../../../../../../src/server/index';
+import { LayoutTypes } from '../../../common/constants';
+import { Layout } from './layout';
+import { PreserveLayout } from './preserve_layout';
+import { PrintLayout } from './print_layout';
+
+// you'll notice that we aren't passing the zoom at this time, while it'd be possible to use
+// window.pixelDensity to figure out what the current user is seeing, if they're going to send the
+// PDF to someone else, I can see there being benefit to using a higher pixel density, so we're
+// going to leave this hard-coded for the time being
+
+interface LayoutParams {
+  id: string;
+  dimensions: {
+    height: number;
+    width: number;
+  };
+}
+
+export function createlayout(server: KbnServer, LayoutParamsin: LayoutParams): Layout {
+  if (LayoutParamsin && LayoutParamsin.id === LayoutTypes.PRESERVE_LAYOUT) {
+    return new PreserveLayout(LayoutParamsin.id, LayoutParamsin.dimensions);
+  }
+
+  // this is the default because some jobs won't have anything specified
+  return new PrintLayout(server, LayoutParamsin.id);
+}

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

@@ -0,0 +1,81 @@
+/*
+ * 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 path from 'path';
+import { Size } from '../../../../../types';
+import { Layout, PageSizeParams } from './layout';
+
+const ZOOM: number = 2;
+
+export class PreserveLayout extends Layout {
+  public selectors = {
+    screenshot: '[data-shared-items-container]',
+    renderComplete: '[data-shared-item]',
+    itemsCountAttribute: 'data-shared-items-count',
+    timefilterFromAttribute: 'data-shared-timefilter-from',
+    timefilterToAttribute: 'data-shared-timefilter-to',
+  };
+
+  public readonly groupCount = 1;
+  private readonly height: number;
+  private readonly width: number;
+  private readonly scaledHeight: number;
+  private readonly scaledWidth: number;
+
+  constructor(id: string, size: Size) {
+    super(id);
+    this.height = size.height;
+    this.width = size.width;
+    this.scaledHeight = size.height * ZOOM;
+    this.scaledWidth = size.width * ZOOM;
+  }
+
+  public getCssOverridesPath() {
+    return path.join(__dirname, 'preserve_layout.css');
+  }
+
+  public getBrowserViewport() {
+    return {
+      height: this.scaledHeight,
+      width: this.scaledWidth,
+    };
+  }
+
+  public getBrowserZoom() {
+    return ZOOM;
+  }
+
+  public getViewport() {
+    return {
+      height: this.scaledHeight,
+      width: this.scaledWidth,
+      zoom: ZOOM,
+    };
+  }
+
+  public getPdfImageSize() {
+    return {
+      height: this.height,
+      width: this.width,
+    };
+  }
+
+  public getPdfPageOrientation() {
+    return undefined;
+  }
+
+  public getPdfPageSize(pagesizeparams: PageSizeParams) {
+    return {
+      height:
+        this.height +
+        pagesizeparams.pageMarginTop +
+        pagesizeparams.pageMarginBottom +
+        pagesizeparams.tableBorderWidth * 2 +
+        pagesizeparams.headingHeight +
+        pagesizeparams.subheadingHeight,
+      width: this.width + pagesizeparams.pageMarginWidth * 2 + pagesizeparams.tableBorderWidth * 2,
+    };
+  }
+}