import { useFetcher } from '../../../../hooks/use_fetcher' ; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params' ; import { PercentileRange } from './index' ; interface Props { percentileRange ? : PercentileRange ; field : string ; value : string ; } export const useBreakdowns = ( { percentileRange , field , value } ) => { const { urlParams , uxUiFilters } = useLegacyUrlParams ( ) ; const { start , end , searchTerm } = urlParams ; const { min : minP , max : maxP } = percentileRange ?? { } ; const { data , status } = useFetcher ( ( callApmApi ) => { if ( start && end && field && value ) { return callApmApi ( { endpoint : 'GET /internal/apm/ux/page-load-distribution/breakdown' , params : { query : { start , end , breakdown : value , uiFilters : JSON . stringify ( uxUiFilters ) , urlQuery : searchTerm , ... ( minP && maxP ? { minPercentile : String ( minP ) , maxPercentile : String ( maxP ) , } : { } ) , } , } , } ) ; } } , [ end , start , uxUiFilters , field , value , minP , maxP , searchTerm ] ) ; return { breakdowns : data ?. pageLoadDistBreakdown ?? [ ] , status } ; } ;