-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* WIP: Adding in new reporting diag tool * WIP: chrome-binary test + log capturing/error handling * More wip on diagnostic tool * More work adding in diagnose routes * Alter link in description + minor rename of chrome => browser * Wiring UI to API + some polish on UI flow * WIP: Add in screenshot diag route * Adding in screenshot diag route, hooking up client to it * Add missing lib check + memory check * Working screenshot test + config check for RAM * Small test helper consolidation + screenshot diag test * Delete old i18n translations * PR feedback, browser tests, rename, re-organize import statements and lite fixes * Lite rename for consistency * Remove old validate check i18n * Add config check * i18n all the things! * Docs on diagnostics tool * Fixes, better readability, spelling and more for diagnostic tool * Translate a few error messages * Rename of test => start_logs for clarity. Move to observables * Gathering logs even during process exit or crash * Adds a test case for the browser exiting during the diag check * Tap into browser logs for checking output * Rename asciidoc diag id * Remove duplicate shared object message * Add better comment as to why we merge events + wait for a period of time * Cloning logger for mirroring browser stderr to kibana output Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
- Loading branch information
1 parent
9d69007
commit 94c13f6
Showing
32 changed files
with
1,295 additions
and
253 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
281 changes: 281 additions & 0 deletions
281
x-pack/plugins/reporting/public/components/report_diagnostic.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,281 @@ | ||
| /* | ||
| * 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 { i18n } from '@kbn/i18n'; | ||
| import React, { useState, Fragment } from 'react'; | ||
| import { FormattedMessage } from '@kbn/i18n/react'; | ||
| import { | ||
| EuiButton, | ||
| EuiButtonEmpty, | ||
| EuiCallOut, | ||
| EuiCodeBlock, | ||
| EuiFlyout, | ||
| EuiFlyoutBody, | ||
| EuiFlyoutHeader, | ||
| EuiSpacer, | ||
| EuiSteps, | ||
| EuiText, | ||
| EuiTitle, | ||
| } from '@elastic/eui'; | ||
| import { ReportingAPIClient, DiagnoseResponse } from '../lib/reporting_api_client'; | ||
|
|
||
| interface Props { | ||
| apiClient: ReportingAPIClient; | ||
| } | ||
|
|
||
| type ResultStatus = 'danger' | 'incomplete' | 'complete'; | ||
|
|
||
| enum statuses { | ||
| configStatus = 'configStatus', | ||
| chromeStatus = 'chromeStatus', | ||
| screenshotStatus = 'screenshotStatus', | ||
| } | ||
|
|
||
| interface State { | ||
| isFlyoutVisible: boolean; | ||
| configStatus: ResultStatus; | ||
| chromeStatus: ResultStatus; | ||
| screenshotStatus: ResultStatus; | ||
| help: string[]; | ||
| logs: string; | ||
| isBusy: boolean; | ||
| success: boolean; | ||
| } | ||
|
|
||
| const initialState: State = { | ||
| [statuses.configStatus]: 'incomplete', | ||
| [statuses.chromeStatus]: 'incomplete', | ||
| [statuses.screenshotStatus]: 'incomplete', | ||
| isFlyoutVisible: false, | ||
| help: [], | ||
| logs: '', | ||
| isBusy: false, | ||
| success: true, | ||
| }; | ||
|
|
||
| export const ReportDiagnostic = ({ apiClient }: Props) => { | ||
| const [state, setStateBase] = useState(initialState); | ||
| const setState = (s: Partial<typeof state>) => | ||
| setStateBase({ | ||
| ...state, | ||
| ...s, | ||
| }); | ||
| const { | ||
| configStatus, | ||
| isBusy, | ||
| screenshotStatus, | ||
| chromeStatus, | ||
| isFlyoutVisible, | ||
| help, | ||
| logs, | ||
| success, | ||
| } = state; | ||
|
|
||
| const closeFlyout = () => setState({ ...initialState, isFlyoutVisible: false }); | ||
| const showFlyout = () => setState({ isFlyoutVisible: true }); | ||
| const apiWrapper = (apiMethod: () => Promise<DiagnoseResponse>, statusProp: statuses) => () => { | ||
| setState({ isBusy: true, [statusProp]: 'incomplete' }); | ||
| apiMethod() | ||
| .then((response) => { | ||
| setState({ | ||
| isBusy: false, | ||
| help: response.help, | ||
| logs: response.logs, | ||
| success: response.success, | ||
| [statusProp]: response.success ? 'complete' : 'danger', | ||
| }); | ||
| }) | ||
| .catch((error) => { | ||
| setState({ | ||
| isBusy: false, | ||
| help: [ | ||
| i18n.translate('xpack.reporting.listing.diagnosticApiCallFailure', { | ||
| defaultMessage: `There was a problem running the diagnostic: {error}`, | ||
| values: { error }, | ||
| }), | ||
| ], | ||
| logs: `${error.message}`, | ||
| success: false, | ||
| [statusProp]: 'danger', | ||
| }); | ||
| }); | ||
| }; | ||
|
|
||
| const steps = [ | ||
| { | ||
| title: i18n.translate('xpack.reporting.listing.diagnosticConfigTitle', { | ||
| defaultMessage: 'Verify Kibana Configuration', | ||
| }), | ||
| children: ( | ||
| <Fragment> | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticConfigMessage" | ||
| defaultMessage="This check ensures your Kibana configuration is setup properly for reports." | ||
| /> | ||
| <EuiSpacer /> | ||
| <EuiButton | ||
| disabled={isBusy || configStatus === 'complete'} | ||
| isLoading={isBusy && configStatus === 'incomplete'} | ||
| onClick={apiWrapper(apiClient.verifyConfig, statuses.configStatus)} | ||
| iconType={configStatus === 'complete' ? 'check' : undefined} | ||
| > | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticConfigButton" | ||
| defaultMessage="Verify Configuration" | ||
| /> | ||
| </EuiButton> | ||
| </Fragment> | ||
| ), | ||
| status: !success && configStatus !== 'complete' ? 'danger' : configStatus, | ||
| }, | ||
| ]; | ||
|
|
||
| if (configStatus === 'complete') { | ||
| steps.push({ | ||
| title: i18n.translate('xpack.reporting.listing.diagnosticBrowserTitle', { | ||
| defaultMessage: 'Check Browser', | ||
| }), | ||
| children: ( | ||
| <Fragment> | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticBrowserMessage" | ||
| defaultMessage="Reporting utilizes a headless browser to generate PDF and PNGS. This check validates | ||
| that the browser can launch successfully." | ||
| /> | ||
| <EuiSpacer /> | ||
| <EuiButton | ||
| disabled={isBusy || chromeStatus === 'complete'} | ||
| onClick={apiWrapper(apiClient.verifyBrowser, statuses.chromeStatus)} | ||
| isLoading={isBusy && chromeStatus === 'incomplete'} | ||
| iconType={chromeStatus === 'complete' ? 'check' : undefined} | ||
| > | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticBrowserButton" | ||
| defaultMessage="Check Browser" | ||
| /> | ||
| </EuiButton> | ||
| </Fragment> | ||
| ), | ||
| status: !success && chromeStatus !== 'complete' ? 'danger' : chromeStatus, | ||
| }); | ||
| } | ||
|
|
||
| if (chromeStatus === 'complete') { | ||
| steps.push({ | ||
| title: i18n.translate('xpack.reporting.listing.diagnosticScreenshotTitle', { | ||
| defaultMessage: 'Check Screen Capture Capabilities', | ||
| }), | ||
| children: ( | ||
| <Fragment> | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticScreenshotMessage" | ||
| defaultMessage="This check ensures the headless browser can capture a screenshot of a page." | ||
| /> | ||
| <EuiSpacer /> | ||
| <EuiButton | ||
| disabled={isBusy || screenshotStatus === 'complete'} | ||
| onClick={apiWrapper(apiClient.verifyScreenCapture, statuses.screenshotStatus)} | ||
| isLoading={isBusy && screenshotStatus === 'incomplete'} | ||
| iconType={screenshotStatus === 'complete' ? 'check' : undefined} | ||
| > | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticScreenshotButton" | ||
| defaultMessage="Capture Screenshot" | ||
| /> | ||
| </EuiButton> | ||
| </Fragment> | ||
| ), | ||
| status: !success && screenshotStatus !== 'complete' ? 'danger' : screenshotStatus, | ||
| }); | ||
| } | ||
|
|
||
| if (screenshotStatus === 'complete') { | ||
| steps.push({ | ||
| title: i18n.translate('xpack.reporting.listing.diagnosticSuccessTitle', { | ||
| defaultMessage: 'All set!', | ||
| }), | ||
| children: ( | ||
| <Fragment> | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticSuccessMessage" | ||
| defaultMessage="Excellent! Everything looks like shipshape for reporting to function!" | ||
| /> | ||
| </Fragment> | ||
| ), | ||
| status: !success ? 'danger' : screenshotStatus, | ||
| }); | ||
| } | ||
|
|
||
| if (!success) { | ||
| steps.push({ | ||
| title: i18n.translate('xpack.reporting.listing.diagnosticFailureTitle', { | ||
| defaultMessage: "Whoops! Looks like something isn't working properly.", | ||
| }), | ||
| children: ( | ||
| <Fragment> | ||
| {help.length ? ( | ||
| <Fragment> | ||
| <EuiCallOut color="danger" iconType="alert"> | ||
| <p>{help.join('\n')}</p> | ||
| </EuiCallOut> | ||
| </Fragment> | ||
| ) : null} | ||
| {logs.length ? ( | ||
| <Fragment> | ||
| <EuiSpacer /> | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticFailureDescription" | ||
| defaultMessage="Here are some more details about the issue:" | ||
| /> | ||
| <EuiSpacer /> | ||
| <EuiCodeBlock>{logs}</EuiCodeBlock> | ||
| </Fragment> | ||
| ) : null} | ||
| </Fragment> | ||
| ), | ||
| status: 'danger', | ||
| }); | ||
| } | ||
|
|
||
| let flyout; | ||
| if (isFlyoutVisible) { | ||
| flyout = ( | ||
| <EuiFlyout onClose={closeFlyout} aria-labelledby="reportingHelperTitle" size="m"> | ||
| <EuiFlyoutHeader hasBorder> | ||
| <EuiTitle size="m"> | ||
| <h2> | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticTitle" | ||
| defaultMessage="Reporting Diagnostics" | ||
| /> | ||
| </h2> | ||
| </EuiTitle> | ||
| <EuiSpacer size="s" /> | ||
| <EuiText color="subdued"> | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticDescription" | ||
| defaultMessage="Automatically run a series of diagnostics to troubleshoot common reporting problems." | ||
| /> | ||
| </EuiText> | ||
| </EuiFlyoutHeader> | ||
| <EuiFlyoutBody> | ||
| <EuiSteps steps={steps} /> | ||
| </EuiFlyoutBody> | ||
| </EuiFlyout> | ||
| ); | ||
| } | ||
| return ( | ||
| <div> | ||
| {flyout} | ||
| <EuiButtonEmpty size="xs" flush="left" onClick={showFlyout}> | ||
| <FormattedMessage | ||
| id="xpack.reporting.listing.diagnosticButton" | ||
| defaultMessage="Run reporting diagnostics..." | ||
| /> | ||
| </EuiButtonEmpty> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.