import { useMemo } from 'react' ; import { useFetcher } from './use_fetcher' ; import { useLegacyUrlParams } from '../context/url_params_context/use_url_params' ; import { useApmServiceContext } from '../context/apm_service/use_apm_service_context' ; import { getLatencyChartSelector } from '../selectors/latency_chart_selectors' ; import { useTheme } from './use_theme' ; import { getTimeRangeComparison } from '../components/shared/time_comparison/get_time_range_comparison' ; import { useTimeRange } from './use_time_range' ; import { useApmParams } from './use_apm_params' ; export function useTransactionLatencyChartsFetcher ( { kuery , environment , } ) { const { transactionType , serviceName } = useApmServiceContext ( ) ; const theme = useTheme ( ) ; const { urlParams : { transactionName , latencyAggregationType , comparisonType , comparisonEnabled , } , } = useLegacyUrlParams ( ) ; const { query : { rangeFrom , rangeTo } , } = useApmParams ( '/services/{serviceName}' ) ; const { start , end } = useTimeRange ( { rangeFrom , rangeTo } ) ; const { comparisonStart , comparisonEnd } = getTimeRangeComparison ( { start , end , comparisonType , comparisonEnabled , } ) ; const { data , error , status } = useFetcher ( ( callApmApi ) => { if ( serviceName && start && end && transactionType && latencyAggregationType ) { return callApmApi ( { endpoint : 'GET /internal/apm/services/{serviceName}/transactions/charts/latency' , params : { path : { serviceName } , query : { environment , kuery , start , end , transactionType , transactionName , latencyAggregationType , comparisonStart , comparisonEnd , } , } , } ) ; } } , [ environment , kuery , serviceName , start , end , transactionName , transactionType , latencyAggregationType , comparisonStart , comparisonEnd , ] ) ; const memoizedData = useMemo ( ( ) => getLatencyChartSelector ( { latencyChart : data , theme , latencyAggregationType , } ) , [ data ] ) ; return { latencyChartsData : memoizedData , latencyChartsStatus : status , latencyChartsError : error , } ; }