import React , { FC , useEffect , useMemo , useState } from 'react' ; import { EuiForm } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { debounce } from 'lodash' ; import { CreateAnalyticsStepProps } from '../../../analytics_management/hooks/use_create_analytics_form' ; import { ValidationStep } from './validation_step' ; import { ValidationStepDetails } from './validation_step_details' ; import { ANALYTICS_STEPS } from '../../page' ; import { useMlApiContext } from '../../../../../contexts/kibana' ; import { getJobConfigFromFormState } from '../../../analytics_management/hooks/use_create_analytics_form/state' ; import { extractErrorMessage } from '../../../../../../../common/util/errors' ; import { CalloutMessage , ValidateAnalyticsJobResponse , VALIDATION_STATUS , } from '../../../../../../../common/constants/validation' ; export interface ValidationSummary { warning : number ; success : number ; } export const ValidationStepWrapper = ( { state , setCurrentStep , step , stepActivated , } ) => { const [ checksInProgress , setChecksInProgress ] = useState < boolean > ( false ) ; const [ validationMessages , setValidationMessages ] = useState < CalloutMessage [ ] > ( [ ] ) ; const [ errorMessage , setErrorMessage ] = useState < CalloutMessage | undefined > ( ) ; const { form , jobConfig , isAdvancedEditorEnabled } = state ; const { dependentVariable , jobType , trainingPercent , numTopFeatureImportanceValues , numTopClasses , includes , } = form ; const showValidationStep = step === ANALYTICS_STEPS . VALIDATION ; const showDetails = step !== ANALYTICS_STEPS . VALIDATION && stepActivated === true ; const { dataFrameAnalytics : { validateDataFrameAnalytics } , } = useMlApiContext ( ) ; const dataTestSubj = `mlAnalyticsCreateJobWizardValidationStepWrapper${ showValidationStep ? ' active' : '' }${ showDetails ? ' summary' : '' }` ; const debouncedValidationChecks = debounce ( async ( ) => { setChecksInProgress ( true ) ; try { const analyticsJobConfig = isAdvancedEditorEnabled ? jobConfig : getJobConfigFromFormState ( form ) ; const validationResults = await validateDataFrameAnalytics ( analyticsJobConfig ) ; setValidationMessages ( validationResults ) ; setErrorMessage ( undefined ) ; setChecksInProgress ( false ) ; } catch ( err ) { setErrorMessage ( { heading : i18n . translate ( 'xpack.ml.dataframe.analytics.validation.validationFetchErrorMessage' , { defaultMessage : 'Error validating job' , } ) , id : 'error' , status : VALIDATION_STATUS . ERROR , text : extractErrorMessage ( err ) , } ) ; setChecksInProgress ( false ) ; } } , 500 ) ; useEffect ( function beginValidationChecks ( ) { if ( jobType !== undefined && ( showValidationStep || stepActivated === true ) ) { debouncedValidationChecks ( ) ; } } , [ showValidationStep , dependentVariable , trainingPercent , numTopFeatureImportanceValues , numTopClasses , includes , ] ) ; if ( errorMessage !== undefined ) { validationMessages . push ( errorMessage ) ; } const validationSummary = useMemo ( ( ) => validationMessages . reduce ( ( acc , message ) => { if ( message ?. status === VALIDATION_STATUS . WARNING ) { acc . warning += 1 ; } else if ( message ?. status === VALIDATION_STATUS . SUCCESS ) { acc . success += 1 ; } return acc ; } , { warning : 0 , success : 0 } ) , [ validationMessages ] ) ; return ( < EuiForm className = "mlDataFrameAnalyticsCreateForm" data - test - subj = { dataTestSubj } > { showValidationStep && ( < ValidationStep checksInProgress = { checksInProgress } validationMessages = { validationMessages } setCurrentStep = { setCurrentStep } / > ) } { showDetails && ( < ValidationStepDetails setCurrentStep = { setCurrentStep } state = { state } validationSummary = { validationSummary } / > ) } < /EuiForm>); } ;