diff --git a/x-pack/plugins/apm/common/utils/formatters/formatters.ts b/x-pack/plugins/apm/common/utils/formatters/formatters.ts index 50ce9db09661..7b21a686209a 100644 --- a/x-pack/plugins/apm/common/utils/formatters/formatters.ts +++ b/x-pack/plugins/apm/common/utils/formatters/formatters.ts @@ -8,11 +8,19 @@ import { Maybe } from '../../../typings/common'; import { NOT_AVAILABLE_LABEL } from '../../i18n'; import { isFiniteNumber } from '../is_finite_number'; -export function asDecimal(value: number) { +export function asDecimal(value?: number | null) { + if (!isFiniteNumber(value)) { + return NOT_AVAILABLE_LABEL; + } + return numeral(value).format('0,0.0'); } -export function asInteger(value: number) { +export function asInteger(value?: number | null) { + if (!isFiniteNumber(value)) { + return NOT_AVAILABLE_LABEL; + } + return numeral(value).format('0,0'); } diff --git a/x-pack/plugins/apm/public/components/shared/ManagedTable/index.tsx b/x-pack/plugins/apm/public/components/shared/ManagedTable/index.tsx index 6f62fd24e71e..8033b6415319 100644 --- a/x-pack/plugins/apm/public/components/shared/ManagedTable/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/ManagedTable/index.tsx @@ -102,8 +102,8 @@ function UnoptimizedManagedTable(props: Props) { ...toQuery(history.location.search), page: options.page.index, pageSize: options.page.size, - sortField: options.sort!.field, - sortDirection: options.sort!.direction, + sortField: options.sort?.field, + sortDirection: options.sort?.direction, }), }); }, diff --git a/x-pack/plugins/apm/public/components/shared/charts/metrics_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/metrics_chart/index.tsx index 506c27051b51..a135bff14d3c 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/metrics_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/metrics_chart/index.tsx @@ -16,7 +16,6 @@ import { import { GenericMetricsChart } from '../../../../../server/lib/metrics/transform_metrics_chart'; import { Maybe } from '../../../../../typings/common'; import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; -import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue'; import { TimeseriesChart } from '../timeseries_chart'; function getYTickFormatter(chart: GenericMetricsChart) { @@ -33,15 +32,13 @@ function getYTickFormatter(chart: GenericMetricsChart) { return (y: Maybe) => asPercent(y || 0, 1); } case 'time': { - return (y: Maybe) => asDuration(y); + return asDuration; } case 'integer': { - return (y: Maybe) => - isValidCoordinateValue(y) ? asInteger(y) : y; + return asInteger; } default: { - return (y: Maybe) => - isValidCoordinateValue(y) ? asDecimal(y) : y; + return asDecimal; } } } @@ -63,7 +60,7 @@ export function MetricsChart({ chart, fetchStatus }: Props) { fetchStatus={fetchStatus} id={chart.key} timeseries={chart.series} - yLabelFormat={getYTickFormatter(chart) as (y: number) => string} + yLabelFormat={getYTickFormatter(chart)} /> ); diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/helper.test.ts b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/helper.test.ts index e92ecd2aeefd..6d7e279f47e0 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/helper.test.ts +++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/helper.test.ts @@ -4,11 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { - getResponseTimeTickFormatter, - getResponseTimeTooltipFormatter, - getMaxY, -} from './helper'; +import { getResponseTimeTickFormatter, getMaxY } from './helper'; import { TimeSeries, Coordinate } from '../../../../../typings/timeseries'; import { @@ -25,35 +21,26 @@ describe('transaction chart helper', () => { '1.0 min' ); }); + it('formattes time tick in seconds', () => { const formatter = getDurationFormatter(toMicroseconds(11, 'seconds')); const timeTickFormatter = getResponseTimeTickFormatter(formatter); expect(timeTickFormatter(toMicroseconds(6, 'seconds'))).toEqual('6.0 s'); }); }); - describe('getResponseTimeTooltipFormatter', () => { - const formatter = getDurationFormatter(toMicroseconds(11, 'minutes')); - const tooltipFormatter = getResponseTimeTooltipFormatter(formatter); - it("doesn't format invalid y coordinate", () => { - expect(tooltipFormatter({ x: 1, y: undefined })).toEqual('N/A'); - expect(tooltipFormatter({ x: 1, y: null })).toEqual('N/A'); - }); - it('formattes tooltip in minutes', () => { - expect( - tooltipFormatter({ x: 1, y: toMicroseconds(60, 'seconds') }) - ).toEqual('1.0 min'); - }); - }); + describe('getMaxY', () => { it('returns zero when empty time series', () => { expect(getMaxY([])).toEqual(0); }); + it('returns zero for invalid y coordinate', () => { const timeSeries = ([ { data: [{ x: 1 }, { x: 2 }, { x: 3, y: -1 }] }, ] as unknown) as Array>; expect(getMaxY(timeSeries)).toEqual(0); }); + it('returns the max y coordinate', () => { const timeSeries = ([ { diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/helper.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/helper.tsx index 4d2a60c49417..a8583b4b0dad 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/helper.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/helper.tsx @@ -4,23 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n'; -import { TimeFormatter } from '../../../../../common/utils/formatters'; import { Coordinate, TimeSeries } from '../../../../../typings/timeseries'; -import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue'; +import { TimeFormatter } from '../../../../../common/utils/formatters'; export function getResponseTimeTickFormatter(formatter: TimeFormatter) { - return (t: number) => { - return formatter(t).formatted; - }; -} - -export function getResponseTimeTooltipFormatter(formatter: TimeFormatter) { - return (coordinate: Coordinate) => { - return isValidCoordinateValue(coordinate.y) - ? formatter(coordinate.y).formatted - : NOT_AVAILABLE_LABEL; - }; + return (t: number) => formatter(t).formatted; } export function getMaxY(timeSeries?: Array>) { diff --git a/x-pack/plugins/apm/public/utils/isValidCoordinateValue.ts b/x-pack/plugins/apm/public/utils/isValidCoordinateValue.ts deleted file mode 100644 index c36efc232b78..000000000000 --- a/x-pack/plugins/apm/public/utils/isValidCoordinateValue.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ -import { Maybe } from '../../typings/common'; - -export const isValidCoordinateValue = (value: Maybe): value is number => - value !== null && value !== undefined;