import { EuiFlexGroup , EuiFlexItem , EuiSelect , EuiTitle } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import React from 'react' ; import { useHistory } from 'react-router-dom' ; import { ALERT_RULE_TYPE_ID } from '@kbn/rule-data-utils' ; import { AlertType } from '../../../../../common/alert_types' ; import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context' ; import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types' ; import { getDurationFormatter } from '../../../../../common/utils/formatters' ; import { useLicenseContext } from '../../../../context/license/use_license_context' ; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params' ; import { useTheme } from '../../../../hooks/use_theme' ; import { useTransactionLatencyChartsFetcher } from '../../../../hooks/use_transaction_latency_chart_fetcher' ; import { TimeseriesChart } from '../../../shared/charts/timeseries_chart' ; import { getMaxY , getResponseTimeTickFormatter , } from '../../../shared/charts/transaction_charts/helper' ; import { MLHeader } from '../../../shared/charts/transaction_charts/ml_header' ; import * as urlHelpers from '../../../shared/links/url_helpers' ; import { getComparisonChartTheme } from '../../time_comparison/get_time_range_comparison' ; import { useEnvironmentsContext } from '../../../../context/environments_context/use_environments_context' ; import { ApmMlDetectorType } from '../../../../../common/anomaly_detection/apm_ml_detectors' ; import { usePreferredServiceAnomalyTimeseries } from '../../../../hooks/use_preferred_service_anomaly_timeseries' ; interface Props { height ? : number ; kuery : string ; } const options = [ { value : LatencyAggregationType . avg , text : 'Average' } , { value : LatencyAggregationType . p95 , text : '95th percentile' } , { value : LatencyAggregationType . p99 , text : '99th percentile' } , ] ; function filterNil < T > ( value ) { return value != null ; } export function LatencyChart ( { height , kuery } ) { const history = useHistory ( ) ; const theme = useTheme ( ) ; const comparisonChartTheme = getComparisonChartTheme ( theme ) ; const { urlParams } = useLegacyUrlParams ( ) ; const { latencyAggregationType , comparisonEnabled } = urlParams ; const license = useLicenseContext ( ) ; const { environment } = useEnvironmentsContext ( ) ; const { latencyChartsData , latencyChartsStatus } = useTransactionLatencyChartsFetcher ( { kuery , environment , } ) ; const { currentPeriod , previousPeriod } = latencyChartsData ; const { alerts } = useApmServiceContext ( ) ; const preferredAnomalyTimeseries = usePreferredServiceAnomalyTimeseries ( ApmMlDetectorType . txLatency ) ; const timeseries = [ currentPeriod , comparisonEnabled ? previousPeriod : undefined , ] . filter ( filterNil ) ; const latencyMaxY = getMaxY ( timeseries ) ; const latencyFormatter = getDurationFormatter ( latencyMaxY ) ; return ( < EuiFlexGroup direction = "column" gutterSize = "s" > < EuiFlexItem > < EuiFlexGroup justifyContent = "spaceBetween" > < EuiFlexItem > < EuiFlexGroup alignItems = "center" responsive = { false } > < EuiFlexItem grow = { false } > < EuiTitle size = "xs" > < h2 > { i18n . translate ( 'xpack.apm.serviceOverview.latencyChartTitle' , { defaultMessage : 'Latency' , } ) } < /h2> < /EuiTitle> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiSelect compressed prepend = { i18n . translate ( 'xpack.apm.serviceOverview.latencyChartTitle.prepend' , { defaultMessage : 'Metric' } ) } options = { options } value = { latencyAggregationType } onChange = { ( nextOption ) => { urlHelpers . push ( history , { query : { latencyAggregationType : nextOption . target . value , } , } ) ; } } /> < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlexItem> < EuiFlexItem grow = { false } > < MLHeader hasValidMlLicense = { license ?. getFeature ( 'ml' ) . isAvailable } mlJobId = { preferredAnomalyTimeseries ?. jobId } / > < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlexItem> < EuiFlexItem > < TimeseriesChart height = { height } fetchStatus = { latencyChartsStatus } id = "latencyChart" customTheme = { comparisonChartTheme } timeseries = { timeseries } yLabelFormat = { getResponseTimeTickFormatter ( latencyFormatter ) } anomalyTimeseries = { preferredAnomalyTimeseries } alerts = { alerts . filter ( ( alert ) => alert [ ALERT_RULE_TYPE_ID ] ?. [ 0 ] === AlertType . TransactionDuration || alert [ ALERT_RULE_TYPE_ID ] ?. [ 0 ] === AlertType . TransactionDurationAnomaly ) } / > < /EuiFlexItem> < /EuiFlexGroup>); }