import React , { useEffect , useState } from 'react' ; import { EuiLink } from '@elastic/eui' ; import { useMlLocator } from '../../../../contexts/kibana' ; import { ML_PAGES } from '../../../../../../common/constants/locator' ; import { AnomalyDetectionQueryState } from '../../../../../../common/types/locator' ; import { JobGroup } from '../job_group' ; interface JobIdLink { id : string ; } interface GroupIdLink { groupId : string ; children : string ; } type AnomalyDetectionJobIdLinkProps = JobIdLink | GroupIdLink ; function isGroupIdLink ( props ) { return ( props as GroupIdLink ) . groupId !== undefined ; } export const AnomalyDetectionJobIdLink = ( props ) => { const mlLocator = useMlLocator ( ) ; const [ href , setHref ] = useState < string > ( '' ) ; useEffect ( ( ) => { let isCancelled = false ; const generateLink = async ( ) => { const pageState = { } ; if ( isGroupIdLink ( props ) ) { pageState . groupIds = [ props . groupId ] ; } else { pageState . jobId = props . id ; } if ( mlLocator ) { const url = await mlLocator . getUrl ( { page : ML_PAGES . ANOMALY_DETECTION_JOBS_MANAGE , pageState : pageState as any , } ) ; if ( ! isCancelled ) { setHref ( url ) ; } } } ; generateLink ( ) ; return ( ) => { isCancelled = true ; } ; } , [ props , mlLocator ] ) ; if ( isGroupIdLink ( props ) ) { return ( < EuiLink style = { { marginLeft : '4px' } } key = { props . groupId } href = { href } > < JobGroup name = { props . groupId } /> < /EuiLink>); } else { return ( < EuiLink key = { props . id } href = { href } > { props . id } < /EuiLink>); } } ;