import React , { FC , useCallback , useEffect , useMemo , useState } from 'react' ; import { EuiButtonEmpty } from '@elastic/eui' ; import { JobId } from '../../common/types/anomaly_detection_jobs' ; import { useMlKibana } from '../application/contexts/kibana' ; import { ML_ALERT_TYPES } from '../../common/constants/alerts' ; import { PLUGIN_ID } from '../../common/constants/app' ; import { MlAnomalyDetectionAlertRule } from '../../common/types/alerts' ; interface MlAnomalyAlertFlyoutProps { initialAlert ? : MlAnomalyDetectionAlertRule ; jobIds ? : JobId [ ] ; onSave ? : ( ) => void ; onCloseFlyout : ( ) => void ; } param initialAlert param jobIds param onCloseFlyout param onSave constructor export const MlAnomalyAlertFlyout = ( { initialAlert , jobIds , onCloseFlyout , onSave , } ) => { const { services : { triggersActionsUi } , } = useMlKibana ( ) ; const AlertFlyout = useMemo ( ( ) => { if ( ! triggersActionsUi ) return ; const commonProps = { onClose : ( ) => { onCloseFlyout ( ) ; } , onSave : async ( ) => { if ( onSave ) { onSave ( ) ; } } , } ; if ( initialAlert ) { return triggersActionsUi . getEditAlertFlyout ( { ... commonProps , initialAlert , } ) ; } return triggersActionsUi . getAddAlertFlyout ( { ... commonProps , consumer : PLUGIN_ID , canChangeTrigger : false , alertTypeId : ML_ALERT_TYPES . ANOMALY_DETECTION , metadata : { } , initialValues : { params : { jobSelection : { jobIds , } , } , } , } ) ; } , [ triggersActionsUi , initialAlert ?. id , jobIds ] ) ; return < > { AlertFlyout } < />; } ; interface JobListMlAnomalyAlertFlyoutProps { setShowFunction : ( callback : Function ) => void ; unsetShowFunction : ( ) => void ; onSave : ( ) => void ; } param setShowFunction param unsetShowFunction constructor export const JobListMlAnomalyAlertFlyout = ( { setShowFunction , unsetShowFunction , onSave , } ) => { const [ isVisible , setIsVisible ] = useState ( false ) ; const [ jobIds , setJobIds ] = useState < JobId [ ] | undefined > ( ) ; const showFlyoutCallback = useCallback ( ( jobIdsUpdate ) => { setJobIds ( jobIdsUpdate ) ; setIsVisible ( true ) ; } , [ ] ) ; useEffect ( ( ) => { setShowFunction ( showFlyoutCallback ) ; return ( ) => { unsetShowFunction ( ) ; } ; } , [ ] ) ; return isVisible && jobIds ? ( < MlAnomalyAlertFlyout jobIds = { jobIds } onCloseFlyout = { ( ) => setIsVisible ( false ) } onSave = { ( ) => { setIsVisible ( false ) ; onSave ( ) ; } } />) : null; } ; interface EditRuleFlyoutProps { initialAlert : MlAnomalyDetectionAlertRule ; onSave : ( ) => void ; } export const EditAlertRule = ( { initialAlert , onSave } ) => { const [ isVisible , setIsVisible ] = useState ( false ) ; return ( < > < EuiButtonEmpty size = "xs" onClick = { setIsVisible . bind ( null , ! isVisible ) } > { initialAlert . name } < /EuiButtonEmpty> { isVisible ? ( < MlAnomalyAlertFlyout initialAlert = { initialAlert } onCloseFlyout = { setIsVisible . bind ( null , false ) } onSave = { ( ) => { setIsVisible ( false ) ; onSave ( ) ; } } />) : null} < />); } ;