[8.x] [Reporting] Improvements to reporting diagnostics (#191790) (#195225)

# Backport This will backport the following commits from `main` to `8.x`: - [[Reporting] Improvements to reporting diagnostics (#191790)](https://github.com/elastic/kibana/pull/191790)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) \r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"20dcf5f7211c6e8ed166fc7bb9a61a733384a529","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-major","Feature:Reporting:Screenshot"],"title":"[Reporting] Improvements to reporting diagnostics","number":191790,"url":"https://github.com/elastic/kibana/pull/191790","mergeCommit":{"message":"[Reporting] Improvements to reporting diagnostics (#191790)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana/issues/186434\r\n\r\nThis PR adds a search within the output log whilst attempting to start\r\nthe browser (i.e chromium) bundled with Kibana to ascertain if it\r\nincludes a font config error log message as signal in reporting\r\ndiagnostics for potential issues with generating a report. This work is\r\ninformed from couple of support tickets with customers running the\r\ndiagnostics tool, getting a confirmation that the reporting system is\r\nfunctionality whilst missing font issues was actually preventing reports\r\nfrom being generated on the linux platform.\r\n\r\nAlso fixes an issue that prevented visual feedback for when an error is\r\ndetected during diagnosis.\r\n\r\n#### Visuals\r\n![ScreenRecording2024-09-26at15 04 19-ezgif\r\ncom-video-to-gif-converter](https://github.com/user-attachments/assets/c0320f2a-6802-435b-bae7-535f878113b3)\r\n\r\n\r\n\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"20dcf5f7211c6e8ed166fc7bb9a61a733384a529"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/191790","number":191790,"mergeCommit":{"message":"[Reporting] Improvements to reporting diagnostics (#191790)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana/issues/186434\r\n\r\nThis PR adds a search within the output log whilst attempting to start\r\nthe browser (i.e chromium) bundled with Kibana to ascertain if it\r\nincludes a font config error log message as signal in reporting\r\ndiagnostics for potential issues with generating a report. This work is\r\ninformed from couple of support tickets with customers running the\r\ndiagnostics tool, getting a confirmation that the reporting system is\r\nfunctionality whilst missing font issues was actually preventing reports\r\nfrom being generated on the linux platform.\r\n\r\nAlso fixes an issue that prevented visual feedback for when an error is\r\ndetected during diagnosis.\r\n\r\n#### Visuals\r\n![ScreenRecording2024-09-26at15 04 19-ezgif\r\ncom-video-to-gif-converter](https://github.com/user-attachments/assets/c0320f2a-6802-435b-bae7-535f878113b3)\r\n\r\n\r\n\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"20dcf5f7211c6e8ed166fc7bb9a61a733384a529"}}]}] BACKPORT--> Co-authored-by: Eyo O. Eyo <7893459+eokoneyo@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2024-10-07 23:39:30 +11:00 · 2024-10-07 23:39:30 +11:00 · 078f98c8b0
commit 078f98c8b0
parent 223fff59a7
4 changed files with 160 additions and 4 deletions
--- 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()
+    );
+  });
+});
--- 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"
--- 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;
--- 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);