diff --git a/x-pack/plugins/apm/common/utils/formatters/duration.test.ts b/x-pack/plugins/apm/common/utils/formatters/duration.test.ts index 42ae4d54bced3e..a45582f42b5b21 100644 --- a/x-pack/plugins/apm/common/utils/formatters/duration.test.ts +++ b/x-pack/plugins/apm/common/utils/formatters/duration.test.ts @@ -5,7 +5,12 @@ * 2.0. */ -import { asDuration, toMicroseconds, asMillisecondDuration } from './duration'; +import { + asDuration, + getDurationFormatter, + toMicroseconds, + asMillisecondDuration, +} from './duration'; describe('duration formatters', () => { describe('asDuration', () => { @@ -35,6 +40,50 @@ describe('duration formatters', () => { }); }); + describe('getDurationFormatter', () => { + // Formatting with a default threshold of 10 for more detail for single values + it('formats correctly with defaults', () => { + expect(getDurationFormatter(987654)(987654).formatted).toEqual('988 ms'); + expect(getDurationFormatter(1000000)(1000000).formatted).toEqual( + '1,000 ms' + ); + expect(getDurationFormatter(1234567)(1234567).formatted).toEqual( + '1,235 ms' + ); + expect(getDurationFormatter(9876543)(9876543).formatted).toEqual( + '9,877 ms' + ); + expect(getDurationFormatter(10000000)(10000000).formatted).toEqual( + '10,000 ms' + ); + expect(getDurationFormatter(12345678)(12345678).formatted).toEqual( + '12 s' + ); + }); + + // Formatting useful for axis ticks with a lower threshold where less detail is sufficient + it('formats correctly with a threshold of 0.9999', () => { + expect(getDurationFormatter(987654, 0.9999)(987654).formatted).toEqual( + '988 ms' + ); + expect(getDurationFormatter(1000000, 0.9999)(1000000).formatted).toEqual( + '1 s' + ); + expect(getDurationFormatter(1234567, 0.9999)(1234567).formatted).toEqual( + '1 s' + ); + expect(getDurationFormatter(9876543, 0.9999)(9876543).formatted).toEqual( + '10 s' + ); + expect( + getDurationFormatter(10000000, 0.9999)(10000000).formatted + ).toEqual('10 s'); + expect( + getDurationFormatter(12345678, 0.9999)(12345678).formatted + ).toEqual('12 s'); + }); + }); + describe('toMicroseconds', () => { it('transformes to microseconds', () => { expect(toMicroseconds(1, 'hours')).toEqual(3600000000); diff --git a/x-pack/plugins/apm/common/utils/formatters/duration.ts b/x-pack/plugins/apm/common/utils/formatters/duration.ts index 917521117af4ef..bc4d58831ff353 100644 --- a/x-pack/plugins/apm/common/utils/formatters/duration.ts +++ b/x-pack/plugins/apm/common/utils/formatters/duration.ts @@ -33,12 +33,16 @@ export type TimeFormatter = ( options?: FormatterOptions ) => ConvertedDuration; -type TimeFormatterBuilder = (max: number) => TimeFormatter; +type TimeFormatterBuilder = (max: number, threshold?: number) => TimeFormatter; -export function getUnitLabelAndConvertedValue( +// threshold defines the value from which upwards there should be no decimal places. +function getUnitLabelAndConvertedValue( unitKey: DurationTimeUnit, - value: number + value: number, + threshold: number = 10 ) { + const ms = value / 1000; + switch (unitKey) { case 'hours': { return { @@ -46,7 +50,8 @@ export function getUnitLabelAndConvertedValue( defaultMessage: 'h', }), convertedValue: asDecimalOrInteger( - moment.duration(value / 1000).asHours() + moment.duration(ms).asHours(), + threshold ), }; } @@ -56,7 +61,8 @@ export function getUnitLabelAndConvertedValue( defaultMessage: 'min', }), convertedValue: asDecimalOrInteger( - moment.duration(value / 1000).asMinutes() + moment.duration(ms).asMinutes(), + threshold ), }; } @@ -66,7 +72,8 @@ export function getUnitLabelAndConvertedValue( defaultMessage: 's', }), convertedValue: asDecimalOrInteger( - moment.duration(value / 1000).asSeconds() + moment.duration(ms).asSeconds(), + threshold ), }; } @@ -76,7 +83,8 @@ export function getUnitLabelAndConvertedValue( defaultMessage: 'ms', }), convertedValue: asDecimalOrInteger( - moment.duration(value / 1000).asMilliseconds() + moment.duration(ms).asMilliseconds(), + threshold ), }; } @@ -98,10 +106,12 @@ function convertTo({ unit, microseconds, defaultValue = NOT_AVAILABLE_LABEL, + threshold = 10, }: { unit: DurationTimeUnit; microseconds: Maybe; defaultValue?: string; + threshold?: number; }): ConvertedDuration { if (!isFiniteNumber(microseconds)) { return { value: defaultValue, formatted: defaultValue }; @@ -109,7 +119,8 @@ function convertTo({ const { convertedValue, unitLabel } = getUnitLabelAndConvertedValue( unit, - microseconds + microseconds, + threshold ); return { @@ -122,10 +133,7 @@ function convertTo({ export const toMicroseconds = (value: number, timeUnit: TimeUnit) => moment.duration(value, timeUnit).asMilliseconds() * 1000; -export function getDurationUnitKey( - max: number, - threshold = 10 -): DurationTimeUnit { +function getDurationUnitKey(max: number, threshold = 10): DurationTimeUnit { if (max > toMicroseconds(threshold, 'hours')) { return 'hours'; } @@ -141,13 +149,16 @@ export function getDurationUnitKey( return 'microseconds'; } +// memoizer with a custom resolver to consider both arguments max/threshold. +// by default lodash's memoize only considers the first argument. export const getDurationFormatter: TimeFormatterBuilder = memoize( - (max: number) => { - const unit = getDurationUnitKey(max); - return (value, { defaultValue }: FormatterOptions = {}) => { - return convertTo({ unit, microseconds: value, defaultValue }); + (max: number, threshold: number = 10) => { + const unit = getDurationUnitKey(max, threshold); + return (value: Maybe, { defaultValue }: FormatterOptions = {}) => { + return convertTo({ unit, microseconds: value, defaultValue, threshold }); }; - } + }, + (max, threshold) => `${max}_${threshold}` ); export function asTransactionRate(value: Maybe) { diff --git a/x-pack/plugins/apm/common/utils/formatters/formatters.test.ts b/x-pack/plugins/apm/common/utils/formatters/formatters.test.ts index 230912045077de..f876b639c923dc 100644 --- a/x-pack/plugins/apm/common/utils/formatters/formatters.test.ts +++ b/x-pack/plugins/apm/common/utils/formatters/formatters.test.ts @@ -36,19 +36,40 @@ describe('formatters', () => { }); describe('asDecimalOrInteger', () => { - it('formats as integer when number equals to 0 ', () => { - expect(asDecimalOrInteger(0)).toEqual('0'); - }); - it('formats as integer when number is above or equals 10 ', () => { - expect(asDecimalOrInteger(10.123)).toEqual('10'); - expect(asDecimalOrInteger(15.123)).toEqual('15'); - }); - it('formats as decimal when number is below 10 ', () => { - expect(asDecimalOrInteger(0.25435632645)).toEqual('0.3'); - expect(asDecimalOrInteger(1)).toEqual('1.0'); - expect(asDecimalOrInteger(3.374329704990765)).toEqual('3.4'); - expect(asDecimalOrInteger(5)).toEqual('5.0'); - expect(asDecimalOrInteger(9)).toEqual('9.0'); + describe('with default threshold of 10', () => { + it('formats as integer when number equals to 0 ', () => { + expect(asDecimalOrInteger(0)).toEqual('0'); + }); + it('formats as integer when number is above or equals 10 ', () => { + expect(asDecimalOrInteger(10.123)).toEqual('10'); + expect(asDecimalOrInteger(15.123)).toEqual('15'); + }); + it('formats as decimal when number is below 10 ', () => { + expect(asDecimalOrInteger(0.25435632645)).toEqual('0.3'); + expect(asDecimalOrInteger(1)).toEqual('1.0'); + expect(asDecimalOrInteger(3.374329704990765)).toEqual('3.4'); + expect(asDecimalOrInteger(5)).toEqual('5.0'); + expect(asDecimalOrInteger(9)).toEqual('9.0'); + }); + }); + + describe('with custom threshold of 1', () => { + it('formats as integer when number equals to 0 ', () => { + expect(asDecimalOrInteger(0, 1)).toEqual('0'); + }); + it('formats as integer when number is above or equals 1 ', () => { + expect(asDecimalOrInteger(1, 1)).toEqual('1'); + expect(asDecimalOrInteger(1.123, 1)).toEqual('1'); + expect(asDecimalOrInteger(3.374329704990765, 1)).toEqual('3'); + expect(asDecimalOrInteger(5, 1)).toEqual('5'); + expect(asDecimalOrInteger(9, 1)).toEqual('9'); + expect(asDecimalOrInteger(10, 1)).toEqual('10'); + expect(asDecimalOrInteger(10.123, 1)).toEqual('10'); + expect(asDecimalOrInteger(15.123, 1)).toEqual('15'); + }); + it('formats as decimal when number is below 1 ', () => { + expect(asDecimalOrInteger(0.25435632645, 1)).toEqual('0.3'); + }); }); }); }); diff --git a/x-pack/plugins/apm/common/utils/formatters/formatters.ts b/x-pack/plugins/apm/common/utils/formatters/formatters.ts index 4da73a6d2c29a7..67a259caa25341 100644 --- a/x-pack/plugins/apm/common/utils/formatters/formatters.ts +++ b/x-pack/plugins/apm/common/utils/formatters/formatters.ts @@ -55,9 +55,9 @@ export function asPercent( return numeral(decimal).format('0.0%'); } -export function asDecimalOrInteger(value: number) { - // exact 0 or above 10 should not have decimal - if (value === 0 || value >= 10) { +export function asDecimalOrInteger(value: number, threshold = 10) { + // exact 0 or above threshold should not have decimal + if (value === 0 || value >= threshold) { return asInteger(value); } return asDecimal(value); diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.test.ts new file mode 100644 index 00000000000000..f541c16e655abe --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.test.ts @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { getFormattedSelection } from './index'; + +describe('transaction_details/distribution', () => { + describe('getFormattedSelection', () => { + it('displays only one unit if from and to share the same unit', () => { + expect(getFormattedSelection([10000, 100000])).toEqual('10 - 100 ms'); + }); + + it('displays two units when from and to have different units', () => { + expect(getFormattedSelection([100000, 1000000000])).toEqual( + '100 ms - 17 min' + ); + }); + }); +}); diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx index 49d28fec1a1361..2506ac69f7aa24 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx @@ -17,6 +17,7 @@ import { EuiTitle, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { getDurationFormatter } from '../../../../../common/utils/formatters'; import { useUrlParams } from '../../../../context/url_params_context/use_url_params'; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; import { useTransactionDistributionFetcher } from '../../../../hooks/use_transaction_distribution_fetcher'; @@ -28,11 +29,25 @@ import { isErrorMessage } from '../../correlations/utils/is_error_message'; const DEFAULT_PERCENTILE_THRESHOLD = 95; +type Selection = [number, number]; + +// Format the selected latency range for the "Clear selection" badge. +// If the two values share the same unit, it will only displayed once. +// For example: 12 - 23 ms / 12 ms - 3 s +export function getFormattedSelection(selection: Selection): string { + const from = getDurationFormatter(selection[0])(selection[0]); + const to = getDurationFormatter(selection[1])(selection[1]); + + return `${from.unit === to.unit ? from.value : from.formatted} - ${ + to.formatted + }`; +} + interface Props { markerCurrentTransaction?: number; onChartSelection: BrushEndListener; onClearSelection: () => void; - selection?: [number, number]; + selection?: Selection; } export function TransactionDistribution({ @@ -177,10 +192,9 @@ export function TransactionDistribution({ {i18n.translate( 'xpack.apm.transactionDetails.distribution.selectionText', { - defaultMessage: `Selection: {selectionFrom} - {selectionTo}ms`, + defaultMessage: `Selection: {formattedSelection}`, values: { - selectionFrom: Math.round(selection[0] / 1000), - selectionTo: Math.round(selection[1] / 1000), + formattedSelection: getFormattedSelection(selection), }, } )} diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx index 3e8a8cc260a56b..c511a708058d3f 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx @@ -15,11 +15,12 @@ import { CurveType, LineAnnotation, LineAnnotationDatum, + LineAnnotationStyle, Position, RectAnnotation, ScaleType, Settings, - LineAnnotationStyle, + TickFormatter, } from '@elastic/charts'; import { euiPaletteColorBlind } from '@elastic/eui'; @@ -28,10 +29,7 @@ import { i18n } from '@kbn/i18n'; import { useChartTheme } from '../../../../../../observability/public'; -import { - getDurationUnitKey, - getUnitLabelAndConvertedValue, -} from '../../../../../common/utils/formatters'; +import { getDurationFormatter } from '../../../../../common/utils/formatters'; import { HistogramItem } from '../../../../../common/search_strategies/correlations/types'; import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; @@ -39,7 +37,7 @@ import { useTheme } from '../../../../hooks/use_theme'; import { ChartContainer } from '../chart_container'; -interface CorrelationsChartProps { +interface TransactionDistributionChartProps { field?: string; value?: string; histogram?: HistogramItem[]; @@ -90,9 +88,15 @@ export const replaceHistogramDotsWithBars = ( } }; +// Create and call a duration formatter for every value since the durations for the +// x axis might have a wide range of values e.g. from low milliseconds to large seconds. +// This way we can get different suitable units across ticks. +const xAxisTickFormat: TickFormatter = (d) => + getDurationFormatter(d, 0.9999)(d).formatted; + export function TransactionDistributionChart({ - field, - value, + field: fieldName, + value: fieldValue, histogram: originalHistogram, markerCurrentTransaction, markerValue, @@ -100,7 +104,7 @@ export function TransactionDistributionChart({ overallHistogram, onChartSelection, selection, -}: CorrelationsChartProps) { +}: TransactionDistributionChartProps) { const chartTheme = useChartTheme(); const euiTheme = useTheme(); @@ -246,17 +250,7 @@ export function TransactionDistributionChart({ id="x-axis" title="" position={Position.Bottom} - tickFormat={(d) => { - const unit = getDurationUnitKey(d, 1); - const converted = getUnitLabelAndConvertedValue(unit, d); - const convertedValueParts = converted.convertedValue.split('.'); - const convertedValue = - convertedValueParts.length === 2 && - convertedValueParts[1] === '0' - ? convertedValueParts[0] - : converted.convertedValue; - return `${convertedValue}${converted.unitLabel}`; - }} + tickFormat={xAxisTickFormat} gridLine={{ visible: false }} /> {Array.isArray(histogram) && - field !== undefined && - value !== undefined && ( + fieldName !== undefined && + fieldValue !== undefined && (