import React , { FC , useEffect , useState } from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiFormRow , EuiPageBody , EuiSpacer , EuiSteps , EuiStepStatus , EuiSwitch , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { useMlContext } from '../../../contexts/ml' ; import { ml } from '../../../services/ml_api_service' ; import { useCreateAnalyticsForm } from '../analytics_management/hooks/use_create_analytics_form' ; import { CreateAnalyticsAdvancedEditor } from './components/create_analytics_advanced_editor' ; import { AdvancedStep , ConfigurationStep , CreateStep , DetailsStep , ValidationStepWrapper , } from './components' ; import { DataFrameAnalyticsId } from '../../../../../common/types/data_frame_analytics' ; import { MlPageHeader } from '../../../components/page_header' ; export enum ANALYTICS_STEPS { CONFIGURATION , ADVANCED , DETAILS , VALIDATION , CREATE } interface Props { jobId ? : DataFrameAnalyticsId ; } export const Page = ( { jobId } ) => { const [ currentStep , setCurrentStep ] = useState < ANALYTICS_STEPS > ( ANALYTICS_STEPS . CONFIGURATION ) ; const [ activatedSteps , setActivatedSteps ] = useState < boolean [ ] > ( [ true , false , false , false , false , ] ) ; const mlContext = useMlContext ( ) ; const { currentDataView } = mlContext ; const createAnalyticsForm = useCreateAnalyticsForm ( ) ; const { state } = createAnalyticsForm ; const { isAdvancedEditorEnabled , disableSwitchToForm , isJobCreated } = state ; const { jobType } = state . form ; const { initiateWizard , setJobClone , switchToAdvancedEditor , switchToForm } = createAnalyticsForm . actions ; useEffect ( ( ) => { initiateWizard ( ) ; if ( currentDataView ) { ( async function ( ) { if ( jobId !== undefined ) { const analyticsConfigs = await ml . dataFrameAnalytics . getDataFrameAnalytics ( jobId , true ) ; if ( Array . isArray ( analyticsConfigs . data_frame_analytics ) && analyticsConfigs . data_frame_analytics . length > 0 ) { const clonedJobConfig = analyticsConfigs . data_frame_analytics [ 0 ] ; await setJobClone ( clonedJobConfig ) ; } } } ) ( ) ; } } , [ ] ) ; useEffect ( ( ) => { if ( activatedSteps [ currentStep ] === false ) { activatedSteps . splice ( currentStep , 1 , true ) ; setActivatedSteps ( activatedSteps ) ; } } , [ currentStep ] ) ; const analyticsWizardSteps = [ { title : i18n . translate ( 'xpack.ml.dataframe.analytics.creation.configurationStepTitle' , { defaultMessage : 'Configuration' , } ) , children : ( < ConfigurationStep { ... createAnalyticsForm } isClone = { jobId !== undefined } setCurrentStep = { setCurrentStep } step = { currentStep } stepActivated = { activatedSteps [ ANALYTICS_STEPS . CONFIGURATION ] } / > ) , status : currentStep >= ANALYTICS_STEPS . CONFIGURATION ? undefined : ( 'incomplete' as EuiStepStatus ) , } , { title : i18n . translate ( 'xpack.ml.dataframe.analytics.creation.advancedStepTitle' , { defaultMessage : 'Additional options' , } ) , children : ( < AdvancedStep { ... createAnalyticsForm } setCurrentStep = { setCurrentStep } step = { currentStep } stepActivated = { activatedSteps [ ANALYTICS_STEPS . ADVANCED ] } / > ) , status : currentStep >= ANALYTICS_STEPS . ADVANCED ? undefined : ( 'incomplete' as EuiStepStatus ) , } , { title : i18n . translate ( 'xpack.ml.dataframe.analytics.creation.detailsStepTitle' , { defaultMessage : 'Job details' , } ) , children : ( < DetailsStep { ... createAnalyticsForm } setCurrentStep = { setCurrentStep } step = { currentStep } stepActivated = { activatedSteps [ ANALYTICS_STEPS . DETAILS ] } / > ) , status : currentStep >= ANALYTICS_STEPS . DETAILS ? undefined : ( 'incomplete' as EuiStepStatus ) , } , { title : i18n . translate ( 'xpack.ml.dataframe.analytics.creation.validationStepTitle' , { defaultMessage : 'Validation' , } ) , children : ( < ValidationStepWrapper { ... createAnalyticsForm } setCurrentStep = { setCurrentStep } step = { currentStep } stepActivated = { activatedSteps [ ANALYTICS_STEPS . VALIDATION ] } / > ) , status : currentStep >= ANALYTICS_STEPS . VALIDATION ? undefined : ( 'incomplete' as EuiStepStatus ) , } , { title : i18n . translate ( 'xpack.ml.dataframe.analytics.creation.createStepTitle' , { defaultMessage : 'Create' , } ) , children : < CreateStep { ... createAnalyticsForm } step = { currentStep } / > , status : currentStep >= ANALYTICS_STEPS . CREATE ? undefined : ( 'incomplete' as EuiStepStatus ) , } , ] ; return ( < div data - test - subj = "mlAnalyticsCreationContainer" > < MlPageHeader > < span data - test - subj = "mlDataFrameAnalyticsWizardHeaderTitle" > { jobId === undefined && ( < FormattedMessage id = "xpack.ml.dataframe.analytics.creationPageTitle" defaultMessage = "Create job" / > ) } { jobId !== undefined && ( < FormattedMessage id = "xpack.ml.dataframe.analytics.clone.creationPageTitle" defaultMessage = "Clone job from {jobId}" values = { { jobId } } />)} < /span> < /MlPageHeader> < EuiPageBody restrictWidth = { 1200 } > < EuiFlexGroup > < EuiFlexItem > < EuiFlexGroup direction = "column" gutterSize = "none" > < EuiFlexItem grow = { false } > < h2 > < FormattedMessage id = "xpack.ml.dataframe.analytics.creationPageSourceIndexTitle" defaultMessage = "Source data view: {dataViewTitle}" values = { { dataViewTitle : currentDataView . title } } /> < /h2> < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiFormRow helpText = { disableSwitchToForm && i18n . translate ( 'xpack.ml.dataframe.analytics.create.jsonEditorDisabledSwitchText' , { defaultMessage : 'Configuration contains advanced fields not supported by the form. You cannot switch back to the form.' , } ) } > < EuiSwitch disabled = { jobType === undefined || disableSwitchToForm || isJobCreated } label = { i18n . translate ( 'xpack.ml.dataframe.analytics.create.switchToJsonEditorSwitch' , { defaultMessage : 'Switch to json editor' , } ) } checked = { isAdvancedEditorEnabled } onChange = { ( e ) => { if ( e . target . checked === true ) { switchToAdvancedEditor ( ) ; } else { switchToForm ( ) ; } } } data - test - subj = "mlAnalyticsCreateJobWizardAdvancedEditorSwitch" / > < /EuiFormRow> < /EuiFlexItem> < /EuiFlexGroup> < EuiSpacer / > { isAdvancedEditorEnabled === true && ( < CreateAnalyticsAdvancedEditor { ... createAnalyticsForm } / > ) } { isAdvancedEditorEnabled === false && ( < EuiSteps data - test - subj = "mlAnalyticsCreateJobWizardSteps" steps = { analyticsWizardSteps } / > ) } < /EuiPageBody> < /div>); } ;