Reporting/diagnostics

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

@@ -16,6 +16,7 @@ export const API_BASE_URL_V1 = '/api/reporting/v1'; //
 export const API_BASE_GENERATE_V1 = `${API_BASE_URL_V1}/generate`;
 export const API_LIST_URL = '/api/reporting/jobs';
 export const API_GENERATE_IMMEDIATE = `${API_BASE_URL_V1}/generate/immediate/csv/saved-object`;
+export const API_DIAGNOSE_URL = `${API_BASE_URL}/diagnose`;
 
 export const CONTENT_TYPE_CSV = 'text/csv';
 export const CSV_REPORTING_ACTION = 'downloadCsvReport';

x-pack/plugins/reporting/constants.ts

@@ -37,3 +37,11 @@ export const USES_HEADLESS_JOB_TYPES = [PDF_JOB_TYPE, PNG_JOB_TYPE];
 
 // Actions
 export const CSV_REPORTING_ACTION = 'downloadCsvReport';
+
+// Diagnostic links/help for common reporting issues
+export const BROWSER_TEST_COMMON_ISSUES: Map<string, string> = new Map();
+
+BROWSER_TEST_COMMON_ISSUES.set(
+  'Could not find the default font',
+  `Chrome couldn't find a default font, please see https://www.elastic.co/guide/en/kibana/current/reporting-troubleshooting.html#reporting-troubleshooting-system-dependencies to fix this issue.`
+);

x-pack/plugins/reporting/public/components/report_helper.tsx

@@ -0,0 +1,195 @@
+/*
+ * 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 React, { useState, Fragment } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { ReportingAPIClient } from '../lib/reporting_api_client';
+
+interface Props {
+  apiClient: ReportingAPIClient;
+}
+
+type status = 'danger' | 'incomplete' | 'complete';
+
+interface State {
+  isFlyoutVisible: boolean;
+  configStatus: status;
+  chromeStatus: status;
+  screenshotStatus: status;
+  error: string;
+  isBusy: boolean;
+}
+
+const diceRoll = () => {
+  return Math.floor(Math.random() * Math.floor(10)) <= 7;
+};
+
+const initialState: State = {
+  isFlyoutVisible: false,
+  configStatus: 'incomplete',
+  chromeStatus: 'incomplete',
+  screenshotStatus: 'incomplete',
+  error: '',
+  isBusy: false,
+};
+
+export const ReportHelper = ({ apiClient }: Props) => {
+  const [state, setStateBase] = useState(initialState);
+  const { configStatus, isBusy, screenshotStatus, chromeStatus, error, isFlyoutVisible } = state;
+  const setState = (s: Partial<typeof state>) =>
+    setStateBase({
+      ...state,
+      ...s,
+    });
+
+  const closeFlyout = () => setState({ ...initialState, isFlyoutVisible: false });
+  const showFlyout = () => setState({ isFlyoutVisible: true });
+  const sleepRun = (fn: any) => () => {
+    setState({ isBusy: true });
+    setTimeout(() => {
+      const isGood = diceRoll();
+      setState({ isBusy: false });
+
+      if (isGood) {
+        setState({ error: '' });
+        return fn();
+      }
+      setState({ error: 'Unable to load configuration properly for user...' });
+    }, 1500);
+  };
+
+  const steps = [
+    {
+      title: 'Verify Kibana Configuration',
+      children: (
+        <Fragment>
+          <p>This ensure your Kibana configuration is setup properly for reports</p>
+          <EuiSpacer />
+          <EuiButton
+            disabled={isBusy || configStatus === 'complete'}
+            isLoading={isBusy && configStatus === 'incomplete'}
+            onClick={sleepRun(() => setState({ configStatus: 'complete' }))}
+            iconType={configStatus === 'complete' ? 'check' : undefined}
+          >
+            Verify Configuration
+          </EuiButton>
+        </Fragment>
+      ),
+      status: error && configStatus !== 'complete' ? 'danger' : configStatus,
+    },
+  ];
+
+  if (configStatus === 'complete') {
+    steps.push({
+      title: 'Check Chromium',
+      children: (
+        <Fragment>
+          <p>This validates that the chromium binary can run properly</p>
+          <EuiSpacer />
+          <EuiButton
+            disabled={isBusy || chromeStatus === 'complete'}
+            onClick={sleepRun(() => setState({ chromeStatus: 'complete' }))}
+            isLoading={isBusy && chromeStatus === 'incomplete'}
+            iconType={chromeStatus === 'complete' ? 'check' : undefined}
+          >
+            Check Chromium
+          </EuiButton>
+        </Fragment>
+      ),
+      status: error && chromeStatus !== 'complete' ? 'danger' : chromeStatus,
+    });
+  }
+
+  if (chromeStatus === 'complete') {
+    steps.push({
+      title: 'Check Screen Capture Capabilities',
+      children: (
+        <Fragment>
+          <p>The final step checks if we can properly capture Kibana screens.</p>
+          <EuiSpacer />
+          <EuiButton
+            disabled={isBusy || screenshotStatus === 'complete'}
+            onClick={sleepRun(() => setState({ screenshotStatus: 'complete' }))}
+            isLoading={isBusy && screenshotStatus === 'incomplete'}
+            iconType={screenshotStatus === 'complete' ? 'check' : undefined}
+          >
+            Capture Screen
+          </EuiButton>
+        </Fragment>
+      ),
+      status: error && screenshotStatus !== 'complete' ? 'danger' : screenshotStatus,
+    });
+  }
+
+  if (screenshotStatus === 'complete') {
+    steps.push({
+      title: 'All set!',
+      children: (
+        <Fragment>
+          <p>Excellent! Everything looks like shipshape for reporting to function!</p>
+        </Fragment>
+      ),
+      status: error ? 'danger' : screenshotStatus,
+    });
+  }
+
+  if (error) {
+    steps.push({
+      title: "Whoops! Looks like something isn't working properly.",
+      children: (
+        <EuiCallOut color="danger" iconType="alert">
+          <p>{error}</p>
+        </EuiCallOut>
+      ),
+      status: 'danger',
+    });
+  }
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyout onClose={closeFlyout} aria-labelledby="reportingHelperTitle" size="m">
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2>Report Helper</h2>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText color="subdued">
+            <p>
+              Automatically run a series of diagnostics to troubleshoot common reporting problems.
+            </p>
+          </EuiText>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <EuiSteps steps={steps} />
+        </EuiFlyoutBody>
+      </EuiFlyout>
+    );
+  }
+  return (
+    <div>
+      {flyout}
+      <EuiButtonEmpty size="xs" flush="left" onClick={showFlyout}>
+        <FormattedMessage
+          id="xpack.reporting.listing.helpButtonText"
+          defaultMessage="Check Reporting"
+        />
+      </EuiButtonEmpty>
+    </div>
+  );
+};

x-pack/plugins/reporting/public/components/report_listing.tsx

@@ -6,6 +6,8 @@
 
 import {
   EuiBasicTable,
+  EuiFlexItem,
+  EuiFlexGroup,
   EuiPageContent,
   EuiSpacer,
   EuiText,
@@ -31,6 +33,7 @@ import {
   ReportErrorButton,
   ReportInfoButton,
 } from './buttons';
+import { ReportHelper } from './report_helper';
 
 export interface Job {
   id: string;
@@ -135,19 +138,27 @@ class ReportListingUi extends Component<Props, State> {
   public render() {
     return (
       <EuiPageContent horizontalPosition="center" className="euiPageBody--restrictWidth-default">
-        <EuiTitle>
-          <h1>
-            <FormattedMessage id="xpack.reporting.listing.reportstitle" defaultMessage="Reports" />
-          </h1>
-        </EuiTitle>
-        <EuiText color="subdued" size="s">
-          <p>
-            <FormattedMessage
-              id="xpack.reporting.listing.reports.subtitle"
-              defaultMessage="Find reports generated in Kibana applications here"
-            />
-          </p>
-        </EuiText>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h1>
+                <FormattedMessage
+                  id="xpack.reporting.listing.reportstitle"
+                  defaultMessage="Reports"
+                />
+              </h1>
+            </EuiTitle>
+            <EuiText color="subdued" size="s">
+              <p>
+                <FormattedMessage
+                  id="xpack.reporting.listing.reports.subtitle"
+                  defaultMessage="Find reports generated in Kibana applications here"
+                />
+                <ReportHelper apiClient={this.props.apiClient} />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
         <EuiSpacer />
         {this.renderTable()}
       </EuiPageContent>

x-pack/plugins/reporting/public/lib/reporting_api_client.ts

@@ -157,4 +157,28 @@ export class ReportingAPIClient {
    * provides the raw server basePath to allow it to be stripped out from relativeUrls in job params
    */
   public getServerBasePath = () => this.http.basePath.serverBasePath;
+
+  /*
+   * Diagnostic-related API calls
+   */
+  public verifyConfig = () =>
+    this.http.post(`${API_LIST_URL}/diagnose/config`, {
+      asSystemRequest: true,
+    });
+
+  /*
+   * Diagnostic-related API calls
+   */
+  public verifyBrowser = () =>
+    this.http.post(`${API_LIST_URL}/diagnose/browser`, {
+      asSystemRequest: true,
+    });
+
+  /*
+   * Diagnostic-related API calls
+   */
+  public verifyScreenCapture = () =>
+    this.http.post(`${API_LIST_URL}/diagnose/screen-capture`, {
+      asSystemRequest: true,
+    });
 }