import React , { ReactNode } from 'react' ; import { EuiLink } from '@elastic/eui' ; import { UI_SETTINGS } from '../../../../../../../../src/plugins/data/common' ; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context' ; import { useMlHref , ML_PAGES } from '../../../../../../ml/public' ; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params' ; import { TimePickerRefreshInterval } from '../../date_picker/typings' ; interface Props { children ? : ReactNode ; jobId : string ; external ? : boolean ; } export function MLExplorerLink ( { jobId , external , children } ) { const href = useExplorerHref ( { jobId } ) ; return ( < EuiLink children = { children } href = { href } external = { external } target = { external ? '_blank' : undefined } / > ) ; } export function useExplorerHref ( { jobId } ) { const { core , plugins : { ml } , } = useApmPluginContext ( ) ; const { urlParams } = useLegacyUrlParams ( ) ; const timePickerRefreshIntervalDefaults = core . uiSettings . get < TimePickerRefreshInterval > ( UI_SETTINGS . TIMEPICKER_REFRESH_INTERVAL_DEFAULTS ) ; const { rangeFrom = 'now-1h' , rangeTo = 'now' , refreshInterval = timePickerRefreshIntervalDefaults . value , refreshPaused = timePickerRefreshIntervalDefaults . pause , } = urlParams ; const href = useMlHref ( ml , core . http . basePath . get ( ) , { page : ML_PAGES . ANOMALY_EXPLORER , pageState : { jobIds : [ jobId ] , timeRange : { from : rangeFrom , to : rangeTo } , refreshInterval : { pause : refreshPaused , value : refreshInterval } , } , } ) ; return href ; }