import React , { FC } from 'react' ; import { EuiCallOut , EuiLink , EuiSpacer } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { CalloutMessage , VALIDATION_STATUS } from '../../../../common/constants/validation' ; export const defaultIconType = 'questionInCircle' ; const statusToEuiColor = ( status ) => { switch ( status ) { case VALIDATION_STATUS . INFO : return 'primary' ; case VALIDATION_STATUS . ERROR : return 'danger' ; default : return status ; } } ; export const statusToEuiIconType = ( status ) => { switch ( status ) { case VALIDATION_STATUS . INFO : return 'iInCircle' ; case VALIDATION_STATUS . ERROR : return 'cross' ; case VALIDATION_STATUS . SUCCESS : return 'check' ; case VALIDATION_STATUS . WARNING : return 'alert' ; default : return status ; } } ; const Link = ( { url } ) => ( < EuiLink href = { url } target = "_BLANK" > < FormattedMessage id = "xpack.ml.validateJob.learnMoreLinkText" defaultMessage = "Learn more" / > < /EuiLink>); const Message = ( { text , url } ) => ( < > { text } { url && < Link url = { url } />} < />); export const Callout = ( { heading , status , text , url } ) => ( < > < EuiCallOut data - test - subj = { 'mlValidationCallout' } color = { statusToEuiColor ( status ) } size = "s" title = { heading || < Message text = { text } url = { url } / > } iconType = { status ? statusToEuiIconType ( status ) : defaultIconType } > { heading && < Message text = { text } url = { url } / > } < /EuiCallOut> < EuiSpacer size = "m" / > < />);