elastic · jloleysens · May 10, 2022 · Mar 21, 2022 · Mar 21, 2022 · Mar 21, 2022
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -83,6 +83,7 @@
 /x-pack/plugins/ui_actions_enhanced/ @elastic/kibana-app-services
 /x-pack/plugins/runtime_fields @elastic/kibana-app-services
 /x-pack/test/search_sessions_integration/ @elastic/kibana-app-services
+/src/plugins/dashboard/public/application/embeddable/viewport/print_media @elastic/kibana-app-services
 
 ### Observability Plugins
 

diff --git a/package.json b/package.json
@@ -338,6 +338,7 @@
     "p-retry": "^4.2.0",
     "papaparse": "^5.2.0",
     "pbf": "3.2.1",
+    "pdfjs-dist": "^2.13.216",
     "pdfmake": "^0.2.4",
     "peggy": "^1.2.0",
     "pluralize": "3.1.0",

@@ -146,10 +146,10 @@ export const TEMPORARILY_IGNORED_PATHS = [
   'x-pack/plugins/monitoring/public/icons/health-green.svg',
   'x-pack/plugins/monitoring/public/icons/health-red.svg',
   'x-pack/plugins/monitoring/public/icons/health-yellow.svg',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/noto/NotoSansCJKtc-Medium.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/noto/NotoSansCJKtc-Regular.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/roboto/Roboto-Italic.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/roboto/Roboto-Medium.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/roboto/Roboto-Regular.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/img/logo-grey.png',
+  'x-pack/plugins/screenshotting/server/assets/fonts/noto/NotoSansCJKtc-Medium.ttf',
+  'x-pack/plugins/screenshotting/server/assets/fonts/noto/NotoSansCJKtc-Regular.ttf',
+  'x-pack/plugins/screenshotting/server/assets/fonts/roboto/Roboto-Italic.ttf',
+  'x-pack/plugins/screenshotting/server/assets/fonts/roboto/Roboto-Medium.ttf',
+  'x-pack/plugins/screenshotting/server/assets/fonts/roboto/Roboto-Regular.ttf',
+  'x-pack/plugins/screenshotting/server/assets/img/logo-grey.png',
 ];
@@ -119,13 +119,12 @@ export function DashboardApp({
     <>
       {isCompleteDashboardAppState(dashboardAppState) && (
         <>
-          {!printMode && (
-            <DashboardTopNav
-              redirectTo={redirectTo}
-              embedSettings={embedSettings}
-              dashboardAppState={dashboardAppState}
-            />
-          )}
+          <DashboardTopNav
+            printMode={printMode}
+            redirectTo={redirectTo}
+            embedSettings={embedSettings}
+            dashboardAppState={dashboardAppState}
+          />
 
           {dashboardAppState.savedDashboard.outcome === 'conflict' &&
           dashboardAppState.savedDashboard.id &&

@@ -1,9 +1,68 @@
-.printViewport {
-  &__vis {
-    height: 600px; // These values might need to be passed in as dimensions for the report. I.e., print should use layout dimensions.
-    width: 975px;
+@import './print_media/styling/index';
 
-    // Some vertical space between vis, but center horizontally
-    margin: 10px auto;
+$visualisationsPerPage: 2;
+$visPadding: 4mm;
+
+/*
+We set the same visual padding on the browser and print versions of the UI so that
+we don't hit a race condition where padding is being updated while the print image
+is being formed. This can result in parts of the vis being cut out.
+*/
+@mixin visualizationPadding {
+  // Open space from page margin
+  padding-left: $visPadding;
+  padding-right: $visPadding;
+
+  // Last vis on the page
+  &:nth-child(#{$visualisationsPerPage}n) {
+    page-break-after: always;
+    padding-top: $visPadding;
+    padding-bottom: $visPadding;
+  }
+
+  &:last-child {
+    page-break-after: avoid;
+  }
+}
+
+@media screen, projection {
+  .printViewport {
+    &__vis {
+      @include visualizationPadding();
+
+      & .embPanel__header button {
+        display: none;
+      }
+
+      margin: $euiSizeL auto;
+      height: calc(#{$a4PageContentHeight} / #{$visualisationsPerPage});
+      width: $a4PageContentWidth;
+      padding: $visPadding;
+    }
+  }
+}
+
+@media print {
+  .printViewport {
+    &__vis {
+      @include visualizationPadding();
+
+      height: calc(#{$a4PageContentHeight} / #{$visualisationsPerPage});
+      width: $a4PageContentWidth;
+
+      & .euiPanel {
+        box-shadow: none !important;
+      }
+
+      & .embPanel__header button {
+        display: none;
+      }
+
+      page-break-inside: avoid;
+
+      & * {
+        overflow: hidden !important;
+      }
+    }
   }
 }
@@ -0,0 +1,7 @@
+# Print media
+
+The code here is designed to be movable outside the domain of Dashboard. Currently,
+the components and styles are only used by Dashboard but we may choose to move them to,
+for example, a Kibana package in the future.
+
+Any changes to this code must be tested by generating a print-optimized PDF in dashboard.
@@ -0,0 +1,52 @@
+@import './vars';
+
+/*
+This styling contains utility and minimal layout styles to help plugins create
+print-ready HTML.
+
+Observations:
+1. We currently do not control the user-agent's header and footer content
+   (including the style of fonts) for client-side printing.
+
+2. Page box model is quite different from what we have in browsers - page
+   margins define where the "no-mans-land" exists for actual content. Moving
+   content into this space by, for example setting negative margins resulted
+   in slightly unpredictable behaviour because the browser wants to either
+   move this content to another page or it may get split across two
+   pages.
+
+3. page-break-* is your friend!
+*/
+
+// Currently we cannot control or style the content the browser places in
+// margins, this might change in the future:
+// See https://drafts.csswg.org/css-page-3/#margin-boxes
+@page {
+  size: A4;
+  orientation: portrait;
+  margin: 0;
+  margin-top: $a4PageHeaderHeight;
+  margin-bottom: $a4PageFooterHeight;
+}
+
+@media print {
+
+  html {
+    background-color: #FFF;
+  }
+
+  // It is good practice to show the full URL in the final, printed output
+  a[href]:after {
+    content: ' [' attr(href) ']';
+  }
+
+  figure {
+    page-break-inside: avoid;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari, Edge */
+    color-adjust: exact !important;                 /*Firefox*/
+  }
+
+}
@@ -0,0 +1,10 @@
+
+$a4PageHeight: 297mm;
+$a4PageWidth: 210mm;
+$a4PageMargin: 0;
+$a4PagePadding: 0;
+$a4PageHeaderHeight: 15mm;
+$a4PageFooterHeight: 20mm;
+
+$a4PageContentHeight: $a4PageHeight - $a4PageHeaderHeight - $a4PageFooterHeight;
+$a4PageContentWidth: $a4PageWidth;
@@ -183,8 +183,7 @@ export const useDashboardAppState = ({
         savedDashboard,
       });
 
-      // Backwards compatible way of detecting that we are taking a screenshot
-      const legacyPrintLayoutDetected =
+      const printLayoutDetected =
         screenshotModeService?.isScreenshotMode() &&
         screenshotModeService.getScreenshotContext('layout') === 'print';
 
@@ -194,8 +193,7 @@ export const useDashboardAppState = ({
         ...initialDashboardStateFromUrl,
         ...forwardedAppState,
 
-        // if we are in legacy print mode, dashboard needs to be in print viewMode
-        ...(legacyPrintLayoutDetected ? { viewMode: ViewMode.PRINT } : {}),
+        ...(printLayoutDetected ? { viewMode: ViewMode.PRINT } : {}),
 
         // if there is an incoming embeddable, dashboard always needs to be in edit mode to receive it.
         ...(incomingEmbeddable ? { viewMode: ViewMode.EDIT } : {}),

@@ -82,6 +82,7 @@ export interface DashboardTopNavProps {
   dashboardAppState: CompleteDashboardAppState;
   embedSettings?: DashboardEmbedSettings;
   redirectTo: DashboardRedirect;
+  printMode: boolean;
 }
 
 const LabsFlyout = withSuspense(LazyLabsFlyout, null);
@@ -90,6 +91,7 @@ export function DashboardTopNav({
   dashboardAppState,
   embedSettings,
   redirectTo,
+  printMode,
 }: DashboardTopNavProps) {
   const {
     core,
@@ -488,7 +490,9 @@ export function DashboardTopNav({
 
     const isFullScreenMode = dashboardState.fullScreenMode;
     const showTopNavMenu = shouldShowNavBarComponent(Boolean(embedSettings?.forceShowTopNavMenu));
-    const showQueryInput = shouldShowNavBarComponent(Boolean(embedSettings?.forceShowQueryInput));
+    const showQueryInput = shouldShowNavBarComponent(
+      Boolean(embedSettings?.forceShowQueryInput || printMode)
+    );
     const showDatePicker = shouldShowNavBarComponent(Boolean(embedSettings?.forceShowDatePicker));
     const showFilterBar = shouldShowFilterBar(Boolean(embedSettings?.forceHideFilterBar));
     const showQueryBar = showQueryInput || showDatePicker;
@@ -535,6 +539,7 @@ export function DashboardTopNav({
       useDefaultBehaviors: true,
       savedQuery: state.savedQuery,
       savedQueryId: dashboardState.savedQuery,
+      visible: printMode !== true,
       onQuerySubmit: (_payload, isUpdate) => {
         if (isUpdate === false) {
           dashboardAppState.$triggerDashboardRefresh.next({ force: true });
@@ -585,10 +590,10 @@ export function DashboardTopNav({
   return (
     <>
       <TopNavMenu {...getNavBarProps()} />
-      {isLabsEnabled && isLabsShown ? (
+      {!printMode && isLabsEnabled && isLabsShown ? (
         <LabsFlyout solutions={['dashboard']} onClose={() => setIsLabsShown(false)} />
       ) : null}
-      {dashboardState.viewMode !== ViewMode.VIEW ? (
+      {dashboardState.viewMode !== ViewMode.VIEW && !printMode ? (
         <>
           <EuiHorizontalRule margin="none" />
           <SolutionToolbar isDarkModeEnabled={IS_DARK_THEME}>

@@ -4,6 +4,12 @@
   }
 }
 
+.kbnTopNavMenu__wrapper {
+  &--hidden {
+    display: none;
+  }
+}
+
 .kbnTopNavMenu__badgeWrapper {
   display: flex;
   align-items: baseline;

@@ -28,6 +28,7 @@ export type TopNavMenuProps = StatefulSearchBarProps &
     showFilterBar?: boolean;
     unifiedSearch?: UnifiedSearchPublicPluginStart;
     className?: string;
+    visible?: boolean;
     /**
      * If provided, the menu part of the component will be rendered as a portal inside the given mount point.
      *
@@ -105,9 +106,11 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
   }
 
   function renderLayout() {
-    const { setMenuMountPoint } = props;
+    const { setMenuMountPoint, visible } = props;
     const menuClassName = classNames('kbnTopNavMenu', props.className);
-    const wrapperClassName = 'kbnTopNavMenu__wrapper';
+    const wrapperClassName = classNames('kbnTopNavMenu__wrapper', {
+      'kbnTopNavMenu__wrapper--hidden': visible === false,
+    });
     if (setMenuMountPoint) {
       return (
         <>

@@ -25,7 +25,8 @@
     "mapsEms",
     "savedObjects",
     "share",
-    "presentationUtil"
+    "presentationUtil",
+    "screenshotMode"
   ],
   "optionalPlugins": [
     "cloud",

@@ -41,6 +41,7 @@ import type { SecurityPluginStart } from '@kbn/security-plugin/public';
 import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import type { CloudSetup } from '@kbn/cloud-plugin/public';
 import type { LensPublicSetup } from '@kbn/lens-plugin/public';
+import { ScreenshotModePluginSetup } from '@kbn/screenshot-mode-plugin/public';
 import {
   createRegionMapFn,
   regionMapRenderer,
@@ -88,6 +89,7 @@ export interface MapsPluginSetupDependencies {
   share: SharePluginSetup;
   licensing: LicensingPluginSetup;
   usageCollection?: UsageCollectionSetup;
+  screenshotMode: ScreenshotModePluginSetup;
 }
 
 export interface MapsPluginStartDependencies {
@@ -144,7 +146,15 @@ export class MapsPlugin
     registerLicensedFeatures(plugins.licensing);
 
     const config = this._initializerContext.config.get<MapsConfigType>();
-    setMapAppConfig(config);
+    setMapAppConfig({
+      ...config,
+
+      // Override this when we know we are taking a screenshot (i.e. no user interaction)
+      // to avoid a blank-canvas issue when rendering maps on a PDF
+      preserveDrawingBuffer: plugins.screenshotMode.isScreenshotMode()
+        ? true
+        : config.preserveDrawingBuffer,
+    });
 
     const locator = plugins.share.url.locators.create(
       new MapsAppLocatorDefinition({

@@ -33,6 +33,7 @@
     { "path": "../../../src/plugins/kibana_react/tsconfig.json" },
     { "path": "../../../src/plugins/kibana_utils/tsconfig.json" },
     { "path": "../../../src/plugins/shared_ux/tsconfig.json" },
+    { "path": "../../../src/plugins/screenshot_mode/tsconfig.json" },
     { "path": "../cloud/tsconfig.json" },
     { "path": "../features/tsconfig.json" },
     { "path": "../lens/tsconfig.json" },

@@ -17,6 +17,7 @@ import {
 import { ConfigType } from '../../config';
 import { allowRequest } from '../network_policy';
 import { stripUnsafeHeaders } from './strip_unsafe_headers';
+import { getFooterTemplate, getHeaderTemplate } from './templates';
 
 export type Context = Record<string, unknown>;
 
@@ -155,6 +156,18 @@ export class HeadlessChromiumDriver {
     return !this.page.isClosed();
   }
 
+  async printA4Pdf({ title, logo }: { title: string; logo?: string }): Promise<Buffer> {
+    return this.page.pdf({
+      format: 'a4',
+      preferCSSPageSize: true,
+      scale: 1,
+      landscape: false,
+      displayHeaderFooter: true,
+      headerTemplate: await getHeaderTemplate({ title }),
+      footerTemplate: await getFooterTemplate({ logo }),
+    });
+  }
+
   /*
    * Call Page.screenshot and return a base64-encoded string of the image
    */