-
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.
[Controls] Add ability to recover from non-fatal error state (#158087)
Closes #156430 ## Summary The only reason a control embeddable should enter a fatal error state is if, for some reason, the embeddable actually cannot be created (for example, trying to create a control with a type that doesn't exist) - every other error should be considered **recoverable** as much as possible. So, this PR ensures that both the options list and the range slider are able to recover from most errors by switching from calling `onFatalError` to instead handling most errors internally via component state. > **Note** > The time slider control does not have any errors that would be considered "recoverable" because it is actually **much more difficult** to enter an error state for this control; so, I did not need to change anything for this control type. ### Errors: - **Recoverable error:** - **Before:** https://github.com/elastic/kibana/assets/8698078/7737a3e8-1c97-47ba-92ab-55f5e1a6c30a - **After:** https://github.com/elastic/kibana/assets/8698078/e4ced721-2b84-497e-8608-965877409bf5 - **Unrecoverable error:** To test this, I've created a dashboard saved object with a control type that does not exist: [controlTypeDoesNotExistDashboard.ndjson.zip](https://github.com/elastic/kibana/files/11547128/controlTypeDoesNotExistDashboard.ndjson.zip). Try importing this dashboard and ensure that you can actually see an error unlike the "before" state: - **Before:** ![image](https://github.com/elastic/kibana/assets/8698078/27c581b1-3fa8-4c07-b102-c952355dfd32) - **After:** ![image](https://github.com/elastic/kibana/assets/8698078/626ed696-4f8e-44b2-b449-3c2fa1ee1327) ### Flaky Test Runner - [Options list dashboard interavction (`test/functional/apps/dashboard_elements/controls/options_list/options_list_dashboard_interaction.ts`)](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2316) ![image](https://github.com/elastic/kibana/assets/8698078/6b71c71c-a47b-4e84-834a-07b8c380a727) - [Range slider (`test/functional/apps/dashboard_elements/controls/range_slider.ts`)](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2317) ![image](https://github.com/elastic/kibana/assets/8698078/fe1c9752-68d3-4bca-b31a-361217b91d8e) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- Loading branch information
Showing
16 changed files
with
194 additions
and
128 deletions.
There are no files selected for viewing
57 changes: 57 additions & 0 deletions
57
src/plugins/controls/public/control_group/component/control_error_component.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,57 @@ | ||
/* | ||
* 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 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import React, { useState } from 'react'; | ||
|
||
import { EuiButtonEmpty, EuiPopover } from '@elastic/eui'; | ||
import { FormattedMessage, I18nProvider } from '@kbn/i18n-react'; | ||
import { Markdown } from '@kbn/kibana-react-plugin/public'; | ||
|
||
interface ControlErrorProps { | ||
error: Error | string; | ||
} | ||
|
||
export const ControlError = ({ error }: ControlErrorProps) => { | ||
const [isPopoverOpen, setPopoverOpen] = useState(false); | ||
const errorMessage = error instanceof Error ? error.message : error; | ||
|
||
const popoverButton = ( | ||
<EuiButtonEmpty | ||
color="danger" | ||
iconSize="m" | ||
iconType="error" | ||
data-test-subj="control-frame-error" | ||
onClick={() => setPopoverOpen((open) => !open)} | ||
className={'errorEmbeddableCompact__button'} | ||
textProps={{ className: 'errorEmbeddableCompact__text' }} | ||
> | ||
<FormattedMessage | ||
id="controls.frame.error.message" | ||
defaultMessage="An error occurred. View more" | ||
/> | ||
</EuiButtonEmpty> | ||
); | ||
|
||
return ( | ||
<I18nProvider> | ||
<EuiPopover | ||
button={popoverButton} | ||
isOpen={isPopoverOpen} | ||
className="errorEmbeddableCompact__popover" | ||
anchorClassName="errorEmbeddableCompact__popoverAnchor" | ||
closePopover={() => setPopoverOpen(false)} | ||
> | ||
<Markdown | ||
markdown={errorMessage} | ||
openLinksInNewTab={true} | ||
data-test-subj="errorMessageMarkdown" | ||
/> | ||
</EuiPopover> | ||
</I18nProvider> | ||
); | ||
}; |
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
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
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
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.