[Reporting] Improvements to reporting diagnostics (#191790)

## Summary Closes #186434 This PR adds a search within the output log whilst attempting to start the browser (i.e chromium) bundled with Kibana to ascertain if it includes a font config error log message as signal in reporting diagnostics for potential issues with generating a report. This work is informed from couple of support tickets with customers running the diagnostics tool, getting a confirmation that the reporting system is functionality whilst missing font issues was actually preventing reports from being generated on the linux platform. Also fixes an issue that prevented visual feedback for when an error is detected during diagnosis. #### Visuals ![ScreenRecording2024-09-26at15 04 19-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/c0320f2a-6802-435b-bae7-535f878113b3)  --------- Co-authored-by: Elastic Machine <[email protected]>
elastic · Oct 7, 2024 · 20dcf5f · 20dcf5f
1 parent 3c1c646
commit 20dcf5f
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 4 deletions.
diff --git a/x-pack/plugins/reporting/public/management/components/report_diagnostic.test.tsx b/x-pack/plugins/reporting/public/management/components/report_diagnostic.test.tsx
@@ -0,0 +1,118 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { type ComponentProps } from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import { ReportDiagnostic } from './report_diagnostic';
+
+const mockedApiClient: jest.Mocked<
+  Pick<ComponentProps<typeof ReportDiagnostic>['apiClient'], 'verifyBrowser'>
+> = {
+  verifyBrowser: jest.fn(),
+};
+
+const defaultProps: Pick<ComponentProps<typeof ReportDiagnostic>, 'apiClient'> = {
+  // @ts-expect-error we don't need to provide the full apiClient for the test
+  apiClient: mockedApiClient,
+};
+
+const renderComponent = (props: Pick<ComponentProps<typeof ReportDiagnostic>, 'clientConfig'>) => {
+  render(
+    <IntlProvider locale="en">
+      <ReportDiagnostic {...defaultProps} {...props} />
+    </IntlProvider>
+  );
+};
+
+describe('ReportDiagnostic', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("does not render the component, if image exports aren't supported", () => {
+    renderComponent({
+      clientConfig: {
+        export_types: { pdf: { enabled: false }, png: { enabled: false } },
+      } as unknown as ComponentProps<typeof ReportDiagnostic>['clientConfig'],
+    });
+
+    expect(screen.queryByTestId('screenshotDiagnosticLink')).not.toBeInTheDocument();
+  });
+
+  it('renders the component if image exports are supported', () => {
+    renderComponent({
+      clientConfig: {
+        export_types: {
+          png: { enabled: true },
+          pdf: { enabled: true },
+        },
+      } as unknown as ComponentProps<typeof ReportDiagnostic>['clientConfig'],
+    });
+
+    expect(screen.getByTestId('screenshotDiagnosticLink')).toBeInTheDocument();
+  });
+
+  it('renders a callout with a warning if a problem is detected during diagnosis', async () => {
+    const user = userEvent.setup();
+
+    mockedApiClient.verifyBrowser.mockResolvedValue({
+      success: false,
+      help: ['help'],
+      logs: 'logs',
+    });
+
+    renderComponent({
+      clientConfig: {
+        export_types: {
+          png: { enabled: true },
+          pdf: { enabled: true },
+        },
+      } as unknown as ComponentProps<typeof ReportDiagnostic>['clientConfig'],
+    });
+
+    await user.click(screen.getByTestId('screenshotDiagnosticLink'));
+
+    await waitFor(() => expect(screen.getByTestId('reportDiagnosisFlyout')).toBeInTheDocument());
+
+    user.click(screen.getByTestId('reportingDiagnosticInitiationButton'));
+
+    await waitFor(() =>
+      expect(screen.getByTestId('reportingDiagnosticFailureCallout')).toBeInTheDocument()
+    );
+  });
+
+  it('renders a success callout if no problem is detected during diagnosis', async () => {
+    const user = userEvent.setup();
+
+    mockedApiClient.verifyBrowser.mockResolvedValue({
+      success: true,
+      help: [],
+      logs: 'logs',
+    });
+
+    renderComponent({
+      clientConfig: {
+        export_types: {
+          png: { enabled: true },
+          pdf: { enabled: true },
+        },
+      } as unknown as ComponentProps<typeof ReportDiagnostic>['clientConfig'],
+    });
+
+    await user.click(screen.getByTestId('screenshotDiagnosticLink'));
+
+    await waitFor(() => expect(screen.getByTestId('reportDiagnosisFlyout')).toBeInTheDocument());
+
+    user.click(screen.getByTestId('reportingDiagnosticInitiationButton'));
+
+    await waitFor(() =>
+      expect(screen.getByTestId('reportingDiagnosticSuccessCallout')).toBeInTheDocument()
+    );
+  });
+});
diff --git a/x-pack/plugins/reporting/public/management/components/report_diagnostic.tsx b/x-pack/plugins/reporting/public/management/components/report_diagnostic.tsx
@@ -100,17 +100,17 @@ export const ReportDiagnostic = ({ apiClient, clientConfig }: Props) => {
     if (state.success && chromeStatus === 'complete') {
       outcomeCallout = (
         <EuiCallOut
-          id="xpack.reporting.listing.diagnosticSuccessMessage"
+          data-test-subj="reportingDiagnosticSuccessCallout"
           color="success"
           title={i18n.translate('xpack.reporting.listing.diagnosticSuccessMessage', {
             defaultMessage: 'Everything looks good for screenshot reports to function.',
           })}
         />
       );
-    } else if (!state.success && chromeStatus === 'complete') {
+    } else if (!state.success && chromeStatus === 'danger') {
       outcomeCallout = (
         <EuiCallOut
-          id="xpack.reporting.listing.diagnosticFailureTitle"
+          data-test-subj="reportingDiagnosticFailureCallout"
           iconType="warning"
           color="danger"
           title={i18n.translate('xpack.reporting.listing.diagnosticFailureTitle', {
@@ -121,7 +121,12 @@ export const ReportDiagnostic = ({ apiClient, clientConfig }: Props) => {
     }
 
     flyout = (
-      <EuiFlyout onClose={closeFlyout} aria-labelledby="reportingHelperTitle" size="m">
+      <EuiFlyout
+        onClose={closeFlyout}
+        data-test-subj="reportDiagnosisFlyout"
+        aria-labelledby="reportingHelperTitle"
+        size="m"
+      >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
             <h2>
@@ -161,6 +166,7 @@ export const ReportDiagnostic = ({ apiClient, clientConfig }: Props) => {
             onClick={apiWrapper(() => apiClient.verifyBrowser(), statuses.chromeStatus)}
             isLoading={isBusy && chromeStatus === 'incomplete'}
             iconType={chromeStatus === 'complete' ? 'check' : undefined}
+            data-test-subj="reportingDiagnosticInitiationButton"
           >
             <FormattedMessage
               id="xpack.reporting.listing.diagnosticBrowserButton"

diff --git a/x-pack/plugins/reporting/server/routes/internal/diagnostic/browser.ts b/x-pack/plugins/reporting/server/routes/internal/diagnostic/browser.ts
@@ -34,6 +34,14 @@ const logsToHelpMapFactory = (docLinks: DocLinksServiceSetup) => ({
     defaultMessage: `Unable to use Chromium sandbox. This can be disabled at your own risk with 'xpack.screenshotting.browser.chromium.disableSandbox'. Please see {url}`,
     values: { url: docLinks.links.reporting.browserSandboxDependencies },
   }),
+
+  'Fontconfig error: Cannot load default config file': i18n.translate(
+    'xpack.reporting.diagnostic.fontconfigError',
+    {
+      defaultMessage: `The browser couldn't start properly due to missing system font dependencies. Please see {url}`,
+      values: { url: docLinks.links.reporting.browserSystemDependencies },
+    }
+  ),
 });
 
 const path = INTERNAL_ROUTES.DIAGNOSE.BROWSER;

diff --git a/x-pack/plugins/reporting/server/routes/internal/diagnostic/integration_tests/browser.test.ts b/x-pack/plugins/reporting/server/routes/internal/diagnostic/integration_tests/browser.test.ts
@@ -120,6 +120,30 @@ describe(`GET ${INTERNAL_ROUTES.DIAGNOSE.BROWSER}`, () => {
       });
   });
 
+  it('returns a response including log received from the browser + helpful link on font config error', async () => {
+    const fontErrorLog = `Fontconfig error: Cannot load default config file: No such file: (null)`;
+
+    registerDiagnoseBrowser(core, mockLogger);
+
+    await server.start();
+    screenshotting.diagnose.mockReturnValue(Rx.of(fontErrorLog));
+
+    return supertest(httpSetup.server.listener)
+      .get(INTERNAL_ROUTES.DIAGNOSE.BROWSER)
+      .expect(200)
+      .then(({ body }) => {
+        expect(body).toMatchInlineSnapshot(`
+          Object {
+            "help": Array [
+              "The browser couldn't start properly due to missing system font dependencies. Please see https://www.elastic.co/guide/en/kibana/test-branch/secure-reporting.html#install-reporting-packages",
+            ],
+            "logs": "${fontErrorLog}",
+            "success": false,
+          }
+        `);
+      });
+  });
+
   it('logs a message when the browser starts, but then has problems later', async () => {
     registerDiagnoseBrowser(core, mockLogger);