import React , { FC } from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiButtonEmpty , EuiDescriptionList , EuiFlexGroup , EuiFlexItem , EuiIcon , EuiSpacer , EuiText , } from '@elastic/eui' ; import { State } from '../../../analytics_management/hooks/use_create_analytics_form/state' ; import { ANALYTICS_STEPS } from '../../page' ; import { ValidationSummary } from './validation_step_wrapper' ; export const ValidationStepDetails = ( { setCurrentStep , state , validationSummary } ) => { const { isJobCreated } = state ; const detailsFirstCol = [ { title : i18n . translate ( 'xpack.ml.dataframe.analytics.create.validatioinDetails.successfulChecks' , { defaultMessage : 'Successful checks' , } ) , description : ( < > < EuiFlexGroup gutterSize = "xs" alignItems = "center" > < EuiFlexItem grow = { false } > < EuiText size = "s" > { validationSummary . success } < /EuiText> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiIcon type = "check" / > < /EuiFlexItem> < /EuiFlexGroup> < />), } , ] ; const detailsSecondCol = [ { title : i18n . translate ( 'xpack.ml.dataframe.analytics.create.validatioinDetails.warnings' , { defaultMessage : 'Warnings' , } ) , description : ( < > < EuiFlexGroup gutterSize = "xs" > < EuiFlexItem grow = { false } > < EuiText size = "s" > { validationSummary . warning } < /EuiText> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiIcon type = "alert" / > < /EuiFlexItem> < /EuiFlexGroup> < />), } , ] ; return ( < > < EuiFlexGroup style = { { width : '70%' } } > < EuiFlexItem grow = { false } > < EuiDescriptionList compressed listItems = { detailsFirstCol } / > < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiDescriptionList style = { { wordBreak : 'break-word' } } compressed listItems = { detailsSecondCol } / > < /EuiFlexItem> < /EuiFlexGroup> < EuiSpacer / > { ! isJobCreated && ( < EuiButtonEmpty size = "s" onClick = { ( ) => { setCurrentStep ( ANALYTICS_STEPS . VALIDATION ) ; } } > { i18n . translate ( 'xpack.ml.dataframe.analytics.create.validationDetails.viewButtonText' , { defaultMessage : 'View' , } ) } < /EuiButtonEmpty>)} < />); } ;