import { EuiPanel , EuiTitle , EuiIconTip , EuiFlexItem , EuiFlexGroup , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import React from 'react' ; import { ApmMlDetectorType } from '../../../../common/anomaly_detection/apm_ml_detectors' ; import { asExactTransactionRate } from '../../../../common/utils/formatters' ; import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context' ; import { useEnvironmentsContext } from '../../../context/environments_context/use_environments_context' ; import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_params' ; import { useApmParams } from '../../../hooks/use_apm_params' ; import { useFetcher } from '../../../hooks/use_fetcher' ; import { usePreferredServiceAnomalyTimeseries } from '../../../hooks/use_preferred_service_anomaly_timeseries' ; import { useTheme } from '../../../hooks/use_theme' ; import { useTimeRange } from '../../../hooks/use_time_range' ; import { TimeseriesChart } from '../../shared/charts/timeseries_chart' ; import { getComparisonChartTheme , getTimeRangeComparison , } from '../../shared/time_comparison/get_time_range_comparison' ; const INITIAL_STATE = { currentPeriod : [ ] , previousPeriod : [ ] , } ; export function ServiceOverviewThroughputChart ( { height , kuery , transactionName , } ) { const theme = useTheme ( ) ; const { urlParams : { comparisonEnabled , comparisonType } , } = useLegacyUrlParams ( ) ; const { query : { rangeFrom , rangeTo } , } = useApmParams ( '/services/{serviceName}' ) ; const { environment } = useEnvironmentsContext ( ) ; const preferredAnomalyTimeseries = usePreferredServiceAnomalyTimeseries ( ApmMlDetectorType . txThroughput ) ; const { start , end } = useTimeRange ( { rangeFrom , rangeTo } ) ; const { transactionType , serviceName } = useApmServiceContext ( ) ; const comparisonChartTheme = getComparisonChartTheme ( theme ) ; const { comparisonStart , comparisonEnd } = getTimeRangeComparison ( { start , end , comparisonType , comparisonEnabled , } ) ; const { data = INITIAL_STATE , status } = useFetcher ( ( callApmApi ) => { if ( serviceName && transactionType && start && end ) { return callApmApi ( { endpoint : 'GET /internal/apm/services/{serviceName}/throughput' , params : { path : { serviceName , } , query : { environment , kuery , start , end , transactionType , comparisonStart , comparisonEnd , transactionName , } , } , } ) ; } } , [ environment , kuery , serviceName , start , end , transactionType , comparisonStart , comparisonEnd , transactionName , ] ) ; const timeseries = [ { data : data . currentPeriod , type : 'linemark' , color : theme . eui . euiColorVis0 , title : i18n . translate ( 'xpack.apm.serviceOverview.throughtputChartTitle' , { defaultMessage : 'Throughput' , } ) , } , ... ( comparisonEnabled ? [ { data : data . previousPeriod , type : 'area' , color : theme . eui . euiColorMediumShade , title : i18n . translate ( 'xpack.apm.serviceOverview.throughtputChart.previousPeriodLabel' , { defaultMessage : 'Previous period' } ) , } , ] : [ ] ) , ] ; return ( < EuiPanel hasBorder = { true } > < EuiFlexGroup alignItems = "center" gutterSize = "s" responsive = { false } > < EuiFlexItem grow = { false } > < EuiTitle size = "xs" > < h2 > { i18n . translate ( 'xpack.apm.serviceOverview.throughtputChartTitle' , { defaultMessage : 'Throughput' } ) } < /h2> < /EuiTitle> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiIconTip content = { i18n . translate ( 'xpack.apm.serviceOverview.tpmHelp' , { defaultMessage : 'Throughput is measured in transactions per minute (tpm)' , } ) } position = "right" / > < /EuiFlexItem> < /EuiFlexGroup> < TimeseriesChart id = "throughput" height = { height } showAnnotations = { false } fetchStatus = { status } timeseries = { timeseries } yLabelFormat = { asExactTransactionRate } customTheme = { comparisonChartTheme } anomalyTimeseries = { preferredAnomalyTimeseries } / > < /EuiPanel>); }