import React , { FC , useReducer , useState , useEffect } from 'react' ; import { useModelMemoryEstimator } from '../../common/job_creator/util/model_memory_estimator' ; import { WIZARD_STEPS } from '../components/step_types' ; import { TimeBuckets } from '../../../../util/time_buckets' ; import { JobCreatorContext , JobCreatorContextValue } from '../components/job_creator_context' ; import { ExistingJobsAndGroups } from '../../../../services/job_service' ; import { JobCreatorType } from '../../common/job_creator' ; import { ChartLoader } from '../../common/chart_loader' ; import { ResultsLoader } from '../../common/results_loader' ; import { JobValidator } from '../../common/job_validator' ; import { newJobCapsService } from '../../../../services/new_job_capabilities/new_job_capabilities_service' ; import { WizardSteps } from './wizard_steps' ; import { WizardHorizontalSteps } from './wizard_horizontal_steps' ; import { JOB_TYPE } from '../../../../../../common/constants/new_job' ; interface Props { jobCreator : JobCreatorType ; chartLoader : ChartLoader ; resultsLoader : ResultsLoader ; chartInterval : TimeBuckets ; jobValidator : JobValidator ; existingJobsAndGroups : ExistingJobsAndGroups ; firstWizardStep : WIZARD_STEPS ; } export const Wizard = ( { jobCreator , chartLoader , resultsLoader , chartInterval , jobValidator , existingJobsAndGroups , firstWizardStep = WIZARD_STEPS . TIME_RANGE , } ) => { const [ jobCreatorUpdated , setJobCreatorUpdate ] = useReducer < ( s : number , action : any ) => number > ( ( s ) => s + 1 , 0 ) ; const jobCreatorUpdate = ( ) => setJobCreatorUpdate ( jobCreatorUpdated ) ; const [ jobValidatorUpdated , setJobValidatorUpdate ] = useReducer < ( s : number , action : any ) => number > ( ( s ) => s + 1 , 0 ) ; const jobCreatorContext = { jobCreatorUpdated , jobCreatorUpdate , jobCreator , chartLoader , resultsLoader , chartInterval , jobValidator , jobValidatorUpdated , fields : newJobCapsService . fields , aggs : newJobCapsService . aggs , existingJobsAndGroups , } ; const firstStep = jobCreator . type === JOB_TYPE . ADVANCED ? WIZARD_STEPS . ADVANCED_CONFIGURE_DATAFEED : WIZARD_STEPS . TIME_RANGE ; const [ currentStep , setCurrentStep ] = useState ( firstStep ) ; const [ highestStep , setHighestStep ] = useState ( firstStep ) ; const [ disableSteps , setDisableSteps ] = useState ( false ) ; const [ progress , setProgress ] = useState ( resultsLoader . progress ) ; const [ stringifiedConfigs , setStringifiedConfigs ] = useState ( stringifyConfigs ( jobCreator . jobConfig , jobCreator . datafeedConfig ) ) ; useEffect ( ( ) => { const subscription = jobValidator . validationResult$ . subscribe ( ( ) => { setJobValidatorUpdate ( jobValidatorUpdated ) ; } ) ; return ( ) => { return subscription . unsubscribe ( ) ; } ; } , [ ] ) ; useEffect ( ( ) => { jobValidator . validate ( ( ) => { setJobValidatorUpdate ( jobValidatorUpdated ) ; } ) ; const tempConfigs = stringifyConfigs ( jobCreator . jobConfig , jobCreator . datafeedConfig ) ; if ( tempConfigs !== stringifiedConfigs ) { setHighestStep ( currentStep ) ; setStringifiedConfigs ( tempConfigs ) ; } } , [ jobCreatorUpdated ] ) ; useEffect ( ( ) => { jobCreator . subscribeToProgress ( setProgress ) ; setCurrentStep ( firstWizardStep ) ; } , [ ] ) ; useEffect ( ( ) => { setDisableSteps ( progress > 0 ) ; } , [ progress ] ) ; useEffect ( ( ) => { if ( currentStep >= highestStep ) { setHighestStep ( currentStep ) ; } } , [ currentStep ] ) ; useModelMemoryEstimator ( jobCreator , jobValidator , jobCreatorUpdate , jobCreatorUpdated ) ; return ( < JobCreatorContext . Provider value = { jobCreatorContext } > < WizardHorizontalSteps currentStep = { currentStep } highestStep = { highestStep } setCurrentStep = { setCurrentStep } disableSteps = { disableSteps } jobType = { jobCreator . type } / > < WizardSteps currentStep = { currentStep } setCurrentStep = { setCurrentStep } / > < /JobCreatorContext.Provider>); } ; function stringifyConfigs ( jobConfig , datafeedConfig ) { return JSON . stringify ( jobConfig ) + JSON . stringify ( datafeedConfig ) ; }