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