TypeScript Reporting Layouts (#22454)

* wip

WIP

* Changed any ypes to actual types

Made sure all types are set on the new layout classes.

* Changes recommended from code review

Changed location of type interfaces and fixed naming errors

* Latest Code Review Changes

Fix naming on properties and methods as well as a few other fixes

* Name Changes and spacing

Name Changes and spacing

* Name Change

Name Change

* Changes for typescript import and direct reference to layout_factory

Changes for typescript import and direct reference to layout_factory

* Move types locally

* Evaluate function changes for puppeteer

* Removed String as a type and renamed index.d.ts to types.d.ts for consistency

Removed String as a type and renamed index.d.ts to types.d.ts for consistency

* Changed layout_factoy to create_layout

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';
 
 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/create_layout.ts

@@ -0,0 +1,24 @@
+/*
+ * 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, Size } from '../../../../../types';
+import { LayoutTypes } from '../../../common/constants';
+import { Layout } from './layout';
+import { PreserveLayout } from './preserve_layout';
+import { PrintLayout } from './print_layout';
+
+interface LayoutParams {
+  id: string;
+  dimensions: Size;
+}
+
+export function createLayout(server: KbnServer, layoutParams: LayoutParams): Layout {
+  if (layoutParams && layoutParams.id === LayoutTypes.PRESERVE_LAYOUT) {
+    return new PreserveLayout(layoutParams.id, layoutParams.dimensions);
+  }
+
+  // this is the default because some jobs won't have anything specified
+  return new PrintLayout(server, layoutParams.id);
+}

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 './create_layout';
+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 './types';
+
+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(pageSizeParams: 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/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 readonly 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,
+    };
+  }
+}