[Reporting] Decouple screenshotting plugin from the reporting

docs/developer/plugin-list.asciidoc

@@ -540,6 +540,11 @@ Elastic.
 |Add tagging capability to saved objects
 
 
+|{kib-repo}blob/{branch}/x-pack/plugins/screenshotting/README.md[screenshotting]
+|This plugin provides functionality to take screenshots of the Kibana pages.
+It uses Chromium and Puppeteer underneath to run the browser in headless mode.
+
+
 |{kib-repo}blob/{branch}/x-pack/plugins/searchprofiler/README.md[searchprofiler]
 |The search profiler consumes the Profile API
 by sending a search API with profile: true enabled in the request body. The response contains

packages/kbn-cli-dev-mode/src/get_server_watch_paths.test.ts

@@ -65,7 +65,7 @@ it('produces the right watch and ignore list', () => {
       <absolute path>/x-pack/test/plugin_functional/plugins/resolver_test/target/**,
       <absolute path>/x-pack/test/plugin_functional/plugins/resolver_test/scripts/**,
       <absolute path>/x-pack/test/plugin_functional/plugins/resolver_test/docs/**,
-      <absolute path>/x-pack/plugins/reporting/chromium,
+      <absolute path>/x-pack/plugins/screenshotting/chromium,
       <absolute path>/x-pack/plugins/security_solution/cypress,
       <absolute path>/x-pack/plugins/apm/scripts,
       <absolute path>/x-pack/plugins/apm/ftr_e2e,

packages/kbn-cli-dev-mode/src/get_server_watch_paths.ts

@@ -56,7 +56,7 @@ export function getServerWatchPaths({ pluginPaths, pluginScanDirs }: Options) {
     /\.(md|sh|txt)$/,
     /debug\.log$/,
     ...pluginInternalDirsIgnore,
-    fromRoot('x-pack/plugins/reporting/chromium'),
+    fromRoot('x-pack/plugins/screenshotting/chromium'),
     fromRoot('x-pack/plugins/security_solution/cypress'),
     fromRoot('x-pack/plugins/apm/scripts'),
     fromRoot('x-pack/plugins/apm/ftr_e2e'), // prevents restarts for APM cypress tests

packages/kbn-optimizer/limits.yml

@@ -117,3 +117,4 @@ pageLoadAssetSize:
   dataViewManagement: 5000
   reporting: 57003
   visTypeHeatmap: 25340
+  screenshotting: 17017

src/dev/build/tasks/install_chromium.js

@@ -6,10 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { first } from 'rxjs/operators';
-
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { installBrowser } from '../../../../x-pack/plugins/reporting/server/browsers/install';
+import { install } from '../../../../x-pack/plugins/screenshotting/server/utils';
 
 export const InstallChromium = {
   description: 'Installing Chromium',
@@ -22,13 +20,23 @@ export const InstallChromium = {
       // revert after https://github.com/elastic/kibana/issues/109949
       if (target === 'darwin-arm64') continue;
 
-      const { binaryPath$ } = installBrowser(
-        log,
-        build.resolvePathForPlatform(platform, 'x-pack/plugins/reporting/chromium'),
+      const logger = {
+        get: log.withType.bind(log),
+        debug: log.debug.bind(log),
+        info: log.info.bind(log),
+        warn: log.warning.bind(log),
+        trace: log.verbose.bind(log),
+        error: log.error.bind(log),
+        fatal: log.error.bind(log),
+        log: log.write.bind(log),
+      };
+
+      await install(
+        logger,
+        build.resolvePathForPlatform(platform, 'x-pack/plugins/screenshotting/chromium'),
         platform.getName(),
         platform.getArchitecture()
       );
-      await binaryPath$.pipe(first()).toPromise();
     }
   },
 };

src/dev/code_coverage/ingest_coverage/__tests__/enumerate_patterns.test.js

@@ -15,16 +15,17 @@ const log = new ToolingLog({
 });
 
 describe(`enumeratePatterns`, () => {
-  it(`should resolve x-pack/plugins/reporting/server/browsers/extract/unzip.ts to kibana-reporting`, () => {
+  it(`should resolve x-pack/plugins/screenshotting/server/browsers/extract/unzip.ts to kibana-screenshotting`, () => {
     const actual = enumeratePatterns(REPO_ROOT)(log)(
-      new Map([['x-pack/plugins/reporting', ['kibana-reporting']]])
+      new Map([['x-pack/plugins/screenshotting', ['kibana-screenshotting']]])
     );
 
-    expect(
-      actual[0].includes(
-        'x-pack/plugins/reporting/server/browsers/extract/unzip.ts kibana-reporting'
-      )
-    ).toBe(true);
+    expect(actual).toHaveProperty(
+      '0',
+      expect.arrayContaining([
+        'x-pack/plugins/screenshotting/server/browsers/extract/unzip.ts kibana-screenshotting',
+      ])
+    );
   });
   it(`should resolve src/plugins/charts/common/static/color_maps/color_maps.ts to kibana-app`, () => {
     const actual = enumeratePatterns(REPO_ROOT)(log)(

x-pack/.gitignore

@@ -6,7 +6,7 @@
 /test/functional/apps/**/reports/session
 /test/reporting/configs/failure_debug/
 /plugins/reporting/.chromium/
-/plugins/reporting/chromium/
+/plugins/screenshotting/chromium/
 /plugins/reporting/.phantom/
 /.aws-config.json
 /.env

x-pack/.i18nrc.json

@@ -46,6 +46,7 @@
     "xpack.reporting": ["plugins/reporting"],
     "xpack.rollupJobs": ["plugins/rollup"],
     "xpack.runtimeFields": "plugins/runtime_fields",
+    "xpack.screenshotting": "plugins/screenshotting",
     "xpack.searchProfiler": "plugins/searchprofiler",
     "xpack.security": "plugins/security",
     "xpack.server": "legacy/server",

x-pack/examples/reporting_example/kibana.json

@@ -10,5 +10,6 @@
   },
   "description": "Example integration code for applications to feature reports.",
   "optionalPlugins": [],
-  "requiredPlugins": ["reporting", "developerExamples", "navigation", "screenshotMode", "share"]
+  "requiredPlugins": ["reporting", "developerExamples", "navigation", "screenshotMode", "share"],
+  "requiredBundles": ["screenshotting"]
 }

x-pack/examples/reporting_example/public/containers/main.tsx

@@ -39,7 +39,8 @@ import type {
   JobParamsPDFV2,
   JobParamsPNGV2,
 } from '../../../../plugins/reporting/public';
-import { constants, ReportingStart } from '../../../../plugins/reporting/public';
+import { LayoutTypes } from '../../../../plugins/screenshotting/public';
+import { ReportingStart } from '../../../../plugins/reporting/public';
 
 import { REPORTING_EXAMPLE_LOCATOR_ID } from '../../common';
 
@@ -87,7 +88,7 @@ export const Main = ({ basename, reporting, screenshotMode }: ReportingExampleAp
   const getPDFJobParamsDefault = (): JobAppParamsPDF => {
     return {
       layout: {
-        id: constants.LAYOUT_TYPES.PRESERVE_LAYOUT,
+        id: LayoutTypes.PRESERVE_LAYOUT,
       },
       relativeUrls: ['/app/reportingExample#/intended-visualization'],
       objectType: 'develeloperExample',
@@ -99,7 +100,7 @@ export const Main = ({ basename, reporting, screenshotMode }: ReportingExampleAp
     return {
       version: '8.0.0',
       layout: {
-        id: constants.LAYOUT_TYPES.PRESERVE_LAYOUT,
+        id: LayoutTypes.PRESERVE_LAYOUT,
       },
       locatorParams: [
         { id: REPORTING_EXAMPLE_LOCATOR_ID, version: '0.5.0', params: { myTestState: {} } },
@@ -114,7 +115,7 @@ export const Main = ({ basename, reporting, screenshotMode }: ReportingExampleAp
     return {
       version: '8.0.0',
       layout: {
-        id: constants.LAYOUT_TYPES.PRESERVE_LAYOUT,
+        id: LayoutTypes.PRESERVE_LAYOUT,
       },
       locatorParams: {
         id: REPORTING_EXAMPLE_LOCATOR_ID,
@@ -131,7 +132,7 @@ export const Main = ({ basename, reporting, screenshotMode }: ReportingExampleAp
     return {
       version: '8.0.0',
       layout: {
-        id: constants.LAYOUT_TYPES.PRESERVE_LAYOUT,
+        id: LayoutTypes.PRESERVE_LAYOUT,
       },
       locatorParams: {
         id: REPORTING_EXAMPLE_LOCATOR_ID,
@@ -148,7 +149,7 @@ export const Main = ({ basename, reporting, screenshotMode }: ReportingExampleAp
     return {
       version: '8.0.0',
       layout: {
-        id: print ? constants.LAYOUT_TYPES.PRINT : constants.LAYOUT_TYPES.PRESERVE_LAYOUT,
+        id: print ? LayoutTypes.PRINT : LayoutTypes.PRESERVE_LAYOUT,
         dimensions: {
           // Magic numbers based on height of components not rendered on this screen :(
           height: 2400,

x-pack/plugins/reporting/common/constants.ts

@@ -55,17 +55,6 @@ export const UI_SETTINGS_CSV_SEPARATOR = 'csv:separator';
 export const UI_SETTINGS_CSV_QUOTE_VALUES = 'csv:quoteValues';
 export const UI_SETTINGS_DATEFORMAT_TZ = 'dateFormat:tz';
 
-export const LAYOUT_TYPES = {
-  CANVAS: 'canvas',
-  PRESERVE_LAYOUT: 'preserve_layout',
-  PRINT: 'print',
-};
-
-export const DEFAULT_VIEWPORT = {
-  width: 1950,
-  height: 1200,
-};
-
 // Export Type Definitions
 export const CSV_REPORT_TYPE = 'CSV';
 export const CSV_JOB_TYPE = 'csv_searchsource';

x-pack/plugins/reporting/common/test/fixtures.ts

@@ -11,7 +11,6 @@ import type { ReportMock } from './types';
 const buildMockReport = (baseObj: ReportMock) => ({
   index: '.reporting-2020.04.12',
   migration_version: '7.15.0',
-  browser_type: 'chromium',
   max_attempts: 1,
   timeout: 300000,
   created_by: 'elastic',

x-pack/plugins/reporting/common/types/base.ts

@@ -6,7 +6,7 @@
  */
 
 import type { Ensure, SerializableRecord } from '@kbn/utility-types';
-import type { LayoutParams } from './layout';
+import type { LayoutParams } from '../../../screenshotting/common';
 import { LocatorParams } from './url';
 
 export type JobId = string;

x-pack/plugins/reporting/common/types/export_types/png.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { LayoutParams } from '../layout';
+import type { LayoutParams } from '../../../../screenshotting/common';
 import type { BaseParams, BasePayload } from '../base';
 
 interface BaseParamsPNG {

x-pack/plugins/reporting/common/types/export_types/png_v2.ts

@@ -6,7 +6,7 @@
  */
 
 import type { LocatorParams } from '../url';
-import type { LayoutParams } from '../layout';
+import type { LayoutParams } from '../../../../screenshotting/common';
 import type { BaseParams, BasePayload } from '../base';
 
 // Job params: structure of incoming user request data

x-pack/plugins/reporting/common/types/export_types/printable_pdf.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { LayoutParams } from '../layout';
+import type { LayoutParams } from '../../../../screenshotting/common';
 import type { BaseParams, BasePayload } from '../base';
 
 interface BaseParamsPDF {

x-pack/plugins/reporting/common/types/export_types/printable_pdf_v2.ts

@@ -6,7 +6,7 @@
  */
 
 import type { LocatorParams } from '../url';
-import type { LayoutParams } from '../layout';
+import type { LayoutParams } from '../../../../screenshotting/common';
 import type { BaseParams, BasePayload } from '../base';
 
 interface BaseParamsPDFV2 {

x-pack/plugins/reporting/common/types/index.ts

@@ -5,11 +5,9 @@
  * 2.0.
  */
 
-import type { Size, LayoutParams } from './layout';
 import type { JobId, BaseParams, BaseParamsV2, BasePayload, BasePayloadV2 } from './base';
 
 export type { JobId, BaseParams, BaseParamsV2, BasePayload, BasePayloadV2 };
-export type { Size, LayoutParams };
 export type {
   DownloadReportFn,
   IlmPolicyMigrationStatus,
@@ -20,20 +18,6 @@ export type {
 } from './url';
 export * from './export_types';
 
-export interface PageSizeParams {
-  pageMarginTop: number;
-  pageMarginBottom: number;
-  pageMarginWidth: number;
-  tableBorderWidth: number;
-  headingHeight: number;
-  subheadingHeight: number;
-}
-
-export interface PdfImageSize {
-  width: number;
-  height?: number;
-}
-
 export interface ReportDocumentHead {
   _id: string;
   _index: string;
@@ -83,7 +67,6 @@ export interface ReportSource {
    */
   kibana_name?: string; // for troubleshooting
   kibana_id?: string; // for troubleshooting
-  browser_type?: string; // no longer used since chromium is the only option (used to allow phantomjs)
   timeout?: number; // for troubleshooting: the actual comparison uses the config setting xpack.reporting.queue.timeout
   max_attempts?: number; // for troubleshooting: the actual comparison uses the config setting xpack.reporting.capture.maxAttempts
   started_at?: string; // timestamp in UTC

x-pack/plugins/reporting/kibana.json

@@ -18,6 +18,7 @@
     "uiActions",
     "taskManager",
     "embeddable",
+    "screenshotting",
     "screenshotMode",
     "share",
     "features"

x-pack/plugins/reporting/public/lib/job.tsx

@@ -51,7 +51,6 @@ export class Job {
   public timeout: ReportSource['timeout'];
   public kibana_name: ReportSource['kibana_name'];
   public kibana_id: ReportSource['kibana_id'];
-  public browser_type: ReportSource['browser_type'];
 
   public size?: ReportOutput['size'];
   public content_type?: TaskRunResult['content_type'];
@@ -80,7 +79,6 @@ export class Job {
     this.timeout = report.timeout;
     this.kibana_name = report.kibana_name;
     this.kibana_id = report.kibana_id;
-    this.browser_type = report.browser_type;
     this.browserTimezone = report.payload.browserTimezone;
     this.size = report.output?.size;
     this.content_type = report.output?.content_type;

x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx

@@ -141,12 +141,6 @@ export const ReportInfoFlyoutContent: FunctionComponent<Props> = ({ info }) => {
       }),
       description: info.layout?.id || UNKNOWN,
     },
-    {
-      title: i18n.translate('xpack.reporting.listing.infoPanel.browserTypeInfo', {
-        defaultMessage: 'Browser type',
-      }),
-      description: info.browser_type || NA,
-    },
   ];
 
   const warnings = info.getWarnings();

x-pack/plugins/reporting/public/plugin.ts

@@ -18,6 +18,7 @@ import {
   Plugin,
   PluginInitializerContext,
 } from 'src/core/public';
+import type { ScreenshottingSetup } from '../../screenshotting/public';
 import { CONTEXT_MENU_TRIGGER } from '../../../../src/plugins/embeddable/public';
 import {
   FeatureCatalogueCategory,
@@ -73,6 +74,7 @@ export interface ReportingPublicPluginSetupDendencies {
   management: ManagementSetup;
   licensing: LicensingPluginSetup;
   uiActions: UiActionsSetup;
+  screenshotting: ScreenshottingSetup;
   share: SharePluginSetup;
 }
 
@@ -145,6 +147,7 @@ export class ReportingPublicPlugin
       home,
       management,
       licensing: { license$ }, // FIXME: 'license$' is deprecated
+      screenshotting,
       share,
       uiActions,
     } = setupDeps;
@@ -203,7 +206,7 @@ export class ReportingPublicPlugin
       id: 'reportingRedirect',
       mount: async (params) => {
         const { mountRedirectApp } = await import('./redirect');
-        return mountRedirectApp({ ...params, share, apiClient });
+        return mountRedirectApp({ ...params, apiClient, screenshotting, share });
       },
       title: 'Reporting redirect app',
       searchable: false,