[Metrics UI] Fix Alert Preview Error design (#71005)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
a42a6d02fc
commit
85d8ec8905
|
@ -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>,
|
||||
}}
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
Loading…
Reference in a new issue