import React , { useCallback , useEffect , useState } from 'react' ; import { omit } from 'lodash' ; import { useHistory } from 'react-router-dom' ; import { XYBrushEvent } from '@elastic/charts' ; import { EuiPanel , EuiSpacer , EuiTabs , EuiTab } from '@elastic/eui' ; import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_params' ; import { useApmParams } from '../../../hooks/use_apm_params' ; import { useTransactionTraceSamplesFetcher } from '../../../hooks/use_transaction_trace_samples_fetcher' ; import { maybe } from '../../../../common/utils/maybe' ; import { fromQuery , push , toQuery } from '../../shared/links/url_helpers' ; import { failedTransactionsCorrelationsTab } from './failed_transactions_correlations_tab' ; import { latencyCorrelationsTab } from './latency_correlations_tab' ; import { traceSamplesTab } from './trace_samples_tab' ; const tabs = [ traceSamplesTab , latencyCorrelationsTab , failedTransactionsCorrelationsTab , ] ; export function TransactionDetailsTabs ( ) { const { query } = useApmParams ( '/services/{serviceName}/transactions/view' ) ; const { urlParams } = useLegacyUrlParams ( ) ; const history = useHistory ( ) ; const [ currentTab , setCurrentTab ] = useState ( traceSamplesTab . key ) ; const { component : TabContent } = tabs . find ( ( tab ) => tab . key === currentTab ) ?? traceSamplesTab ; const { environment , kuery , transactionName } = query ; const { traceSamplesData } = useTransactionTraceSamplesFetcher ( { transactionName , kuery , environment , } ) ; const selectSampleFromChartSelection = ( selection ) => { if ( selection !== undefined ) { const { x } = selection ; if ( Array . isArray ( x ) ) { history . push ( { ... history . location , search : fromQuery ( { ... toQuery ( history . location . search ) , sampleRangeFrom : Math . round ( x [ 0 ] ) , sampleRangeTo : Math . round ( x [ 1 ] ) , } ) , } ) ; } } } ; const { sampleRangeFrom , sampleRangeTo , transactionId , traceId } = urlParams ; const { traceSamples } = traceSamplesData ; const clearChartSelection = ( ) => { push ( history , { query : { sampleRangeFrom : '' , sampleRangeTo : '' , traceId : '' , transactionId : '' , } , } ) ; } ; const traceSamplesTabKey = traceSamplesTab . key ; const onFilter = useCallback ( ( ) => { window . scrollTo ( 0 , 0 ) ; setCurrentTab ( traceSamplesTabKey ) ; } , [ traceSamplesTabKey ] ) ; useEffect ( ( ) => { const selectedSample = traceSamples . find ( ( sample ) => sample . transactionId === transactionId && sample . traceId === traceId ) ; if ( ! selectedSample ) { const preferredSample = maybe ( traceSamples [ 0 ] ) ; history . replace ( { ... history . location , search : fromQuery ( { ... omit ( toQuery ( history . location . search ) , [ 'traceId' , 'transactionId' , ] ) , ... preferredSample , } ) , } ) ; } } , [ history , traceSamples , transactionId , traceId ] ) ; return ( < > < EuiTabs > { tabs . map ( ( { dataTestSubj , key , label } ) => ( < EuiTab data - test - subj = { dataTestSubj } key = { key } isSelected = { key === currentTab } onClick = { ( ) => { setCurrentTab ( key ) ; } } > { label } < /EuiTab>))} < /EuiTabs> < EuiSpacer size = "m" / > < EuiPanel hasBorder = { true } > < TabContent { ... { clearChartSelection , onFilter , sampleRangeFrom , sampleRangeTo , selectSampleFromChartSelection , traceSamples , } } / > < /EuiPanel> < />); }