import { EuiEmptyPrompt } from '@elastic/eui' ; import React from 'react' ; import { Redirect } from 'react-router-dom' ; import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common' ; import { FETCH_STATUS , useFetcher } from '../../../hooks/use_fetcher' ; import { getRedirectToTransactionDetailPageUrl } from '../TraceLink/get_redirect_to_transaction_detail_page_url' ; import { useApmParams } from '../../../hooks/use_apm_params' ; const CentralizedContainer = euiStyled . div `
  height: 100%;
  display: flex;
` ; export function TransactionLink ( ) { const { path : { transactionId } , query : { rangeFrom , rangeTo } , } = useApmParams ( '/link-to/transaction/{transactionId}' ) ; const { data = { transaction : null } , status } = useFetcher ( ( callApmApi ) => { if ( transactionId ) { return callApmApi ( { endpoint : 'GET /internal/apm/transactions/{transactionId}' , params : { path : { transactionId , } , } , } ) ; } } , [ transactionId ] ) ; if ( transactionId && status === FETCH_STATUS . SUCCESS ) { if ( data . transaction ) { return ( < Redirect to = { getRedirectToTransactionDetailPageUrl ( { transaction : data . transaction , rangeFrom , rangeTo , } ) } />); } return < CentralizedContainer />; } return ( < CentralizedContainer > < EuiEmptyPrompt iconType = "apmTrace" title = { < h2 > Fetching transaction ... < /h2>}/ > < /CentralizedContainer>); }