import { EuiFlexGroup , EuiFlexItem , EuiPanel , EuiSpacer } from '@elastic/eui' ; import React from 'react' ; import { useHistory } from 'react-router-dom' ; import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context' ; import { useApmParams } from '../../../hooks/use_apm_params' ; import { useTimeRange } from '../../../hooks/use_time_range' ; import { AggregatedTransactionsBadge } from '../../shared/aggregated_transactions_badge' ; import { TransactionCharts } from '../../shared/charts/transaction_charts' ; import { replace } from '../../shared/links/url_helpers' ; import { TransactionsTable } from '../../shared/transactions_table' ; export function TransactionOverview ( ) { const { query : { environment , kuery , rangeFrom , rangeTo , transactionType : transactionTypeFromUrl , } , } = useApmParams ( '/services/{serviceName}/transactions' ) ; const { start , end } = useTimeRange ( { rangeFrom , rangeTo } ) ; const { transactionType , serviceName , fallbackToTransactions } = useApmServiceContext ( ) ; const history = useHistory ( ) ; if ( ! transactionTypeFromUrl && transactionType ) { replace ( history , { query : { transactionType } } ) ; } if ( ! serviceName ) { return null ; } return ( < > { fallbackToTransactions && ( < > < EuiFlexGroup > < EuiFlexItem > < AggregatedTransactionsBadge /> < /EuiFlexItem> < /EuiFlexGroup> < EuiSpacer size = "s" / > < />)} < TransactionCharts kuery = { kuery } environment = { environment } start = { start } end = { end } / > < EuiSpacer size = "s" / > < EuiPanel hasBorder = { true } > < TransactionsTable hideViewTransactionsLink numberOfTransactionsPerPage = { 25 } showAggregationAccurateCallout environment = { environment } kuery = { kuery } start = { start } end = { end } / > < /EuiPanel> < />); }