[7.x] [Metrics UI] Fix Alert Preview Error design (#71005) (#72499)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jul 20, 2020 · f36b044 · f36b044
1 parent 1918f37
commit f36b044
Showing 1 changed file with 25 additions and 33 deletions.
diff --git a/x-pack/plugins/infra/public/alerting/common/components/alert_preview.tsx b/x-pack/plugins/infra/public/alerting/common/components/alert_preview.tsx
@@ -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>
- )}
  </>
  )}
  </>