import { EuiCallOut , EuiSpacer } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import React , { FC } from 'react' ; import { ExplorerChartSeriesErrorMessages } from './explorer_charts_container_service' ; interface ExplorerChartsErrorCalloutsProps { errorMessagesByType : ExplorerChartSeriesErrorMessages ; } export const ExplorerChartsErrorCallOuts = ( { errorMessagesByType , } ) => { if ( ! errorMessagesByType || Object . keys ( errorMessagesByType ) . length === 0 ) return null ; const content = Object . keys ( errorMessagesByType ) . map ( ( errorType ) => ( < EuiCallOut color = { 'warning' } size = "s" key = { errorType } > < FormattedMessage id = "xpack.ml.explorerCharts.errorCallOutMessage" defaultMessage = "You can't view anomaly charts for {jobs} because {reason}." values = { { jobs : [ ... errorMessagesByType [ errorType ] ] . join ( ', ' ) , reason : errorType } } /> < /EuiCallOut>)); return ( < > { content } < EuiSpacer size = { 'm' } / > < />); } ;