maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Metrics UI] Fix Alert Preview Error design (#71005)

Browse source 
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Zacqary Adam Xeper 2020-07-20 13:18:43 -05:00 committed by GitHub
parent a42a6d02fc
commit 85d8ec8905
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
x-pack/plugins/infra/public/alerting/common/components/alert_preview.tsx
View file

@ -14,13 +14,9 @@ import {
EuiFlexGroup, EuiFlexGroup,
EuiFlexItem, EuiFlexItem,
EuiCallOut, EuiCallOut,
EuiOverlayMask, EuiAccordion,
EuiModal,
EuiModalHeader,
EuiModalHeaderTitle,
EuiModalBody,
EuiCodeBlock, EuiCodeBlock,
EuiLink, EuiText,
} from '@elastic/eui'; } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react'; import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n'; import { i18n } from '@kbn/i18n';
@ -61,9 +57,6 @@ export const AlertPreview: React.FC<Props> = (props) => {
const [previewResult, setPreviewResult] = useState< const [previewResult, setPreviewResult] = useState<
(AlertPreviewSuccessResponsePayload & Record<string, any>) | null (AlertPreviewSuccessResponsePayload & Record<string, any>) | null
>(null); >(null);
const [isErrorModalVisible, setIsErrorModalVisible] = useState<boolean>(false);
const onOpenModal = useCallback(() => setIsErrorModalVisible(true), [setIsErrorModalVisible]);
const onCloseModal = useCallback(() => setIsErrorModalVisible(false), [setIsErrorModalVisible]);
const onSelectPreviewLookbackInterval = useCallback((e) => { const onSelectPreviewLookbackInterval = useCallback((e) => {
setPreviewLookbackInterval(e.target.value); setPreviewLookbackInterval(e.target.value);
@ -271,33 +264,32 @@ export const AlertPreview: React.FC<Props> = (props) => {
iconType="alert" iconType="alert"
> >
{previewError.body && ( {previewError.body && (
<FormattedMessage <>
id="xpack.infra.metrics.alertFlyout.alertPreviewErrorDesc" <FormattedMessage
defaultMessage="Try again later, or {viewTheError}." id="xpack.infra.metrics.alertFlyout.alertPreviewErrorDesc"
values={{ defaultMessage="Please try again later or see details for more information."
viewTheError: <EuiLink onClick={onOpenModal}>view the error</EuiLink>, />
}} <EuiSpacer size={'s'} />
/> <EuiAccordion
id="alertErrorDetailsAccordion"
buttonContent={
<>
<EuiText size="s">
<FormattedMessage
id="xpack.infra.metrics.alertFlyout.errorDetails"
defaultMessage="Details"
/>
</EuiText>
</>
}
>
<EuiSpacer size={'s'} />
<EuiCodeBlock>{previewError.body.message}</EuiCodeBlock>
</EuiAccordion>
</>
)} )}
</EuiCallOut> </EuiCallOut>
)} )}
{isErrorModalVisible && (
<EuiOverlayMask>
<EuiModal onClose={onCloseModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.infra.metrics.alertFlyout.alertPreviewErrorModalTitle"
defaultMessage="Alert preview error"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiCodeBlock>{previewError.body.message}</EuiCodeBlock>
</EuiModalBody>
</EuiModal>
</EuiOverlayMask>
)}
</> </>
)} )}
</> </>