import React , { Fragment , FC , useContext , useState , useEffect } from 'react' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { AdvancedJobCreator } from '../../../../../common/job_creator' ; import { newJobCapsService } from '../../../../../../../services/new_job_capabilities/new_job_capabilities_service' ; import { Aggregation , Field } from '../../../../../../../../../common/types/fields' ; import { MetricSelector } from './metric_selector' ; import { RichDetector } from '../../../../../common/job_creator/advanced_job_creator' ; import { DetectorList } from './detector_list' ; import { ModalPayload } from '../advanced_detector_modal/advanced_detector_modal' ; interface Props { setIsValid : ( na : boolean ) => void ; } const emptyRichDetector = { agg : null , field : null , byField : null , overField : null , partitionField : null , excludeFrequent : null , description : null , customRules : null , useNull : null , } ; export const AdvancedDetectors = ( { setIsValid } ) => { const { jobCreator : jc , jobCreatorUpdate , jobCreatorUpdated } = useContext ( JobCreatorContext ) ; const jobCreator = jc as AdvancedJobCreator ; const { fields , aggs } = newJobCapsService ; const [ modalPayload , setModalPayload ] = useState < ModalPayload | null > ( null ) ; useEffect ( ( ) => { setIsValid ( jobCreator . detectors . length > 0 ) ; } , [ jobCreatorUpdated ] ) ; function closeModal ( ) { setModalPayload ( null ) ; } function detectorChangeHandler ( dtr , index ? ) { if ( index === undefined ) { jobCreator . addDetector ( dtr . agg as Aggregation , dtr . field as Field , dtr . byField , dtr . overField , dtr . partitionField , dtr . excludeFrequent , dtr . description , dtr . useNull ) ; } else { jobCreator . editDetector ( dtr . agg as Aggregation , dtr . field as Field , dtr . byField , dtr . overField , dtr . partitionField , dtr . excludeFrequent , dtr . description , index , dtr . useNull ) ; } jobCreatorUpdate ( ) ; setModalPayload ( null ) ; } function showModal ( ) { setModalPayload ( { detector : emptyRichDetector } ) ; } function onDeleteJob ( i ) { jobCreator . removeDetector ( i ) ; jobCreatorUpdate ( ) ; } function onEditJob ( i ) { const dtr = jobCreator . richDetectors [ i ] ; if ( dtr !== undefined ) { setModalPayload ( { detector : dtr , index : i } ) ; } } return ( < Fragment > < DetectorList isActive = { true } onEditJob = { onEditJob } onDeleteJob = { onDeleteJob } / > < MetricSelector payload = { modalPayload } fields = { fields } aggs = { aggs } detectorChangeHandler = { detectorChangeHandler } showModal = { showModal } closeModal = { closeModal } / > < /Fragment>); } ;