[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,
|
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>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
Loading…
Reference in a new issue