timeFormatter(time).formatted}
- formatYShort={(t) => `${asInteger(t)} occ.`}
- formatYLong={(t) => `${asInteger(t)} occurrences`}
- tooltipHeader={(bucket) => {
- const xFormatted = timeFormatter(bucket.x);
- const x0Formatted = timeFormatter(bucket.x0);
- return `${x0Formatted.value} - ${xFormatted.value} ${xFormatted.unit}`;
- }}
- width={800}
- />
- );
- });
-
- describe('Initially', () => {
- it('should have default markup', () => {
- expect(toJson(wrapper)).toMatchSnapshot();
- });
-
- it('should not show tooltip', () => {
- expect(wrapper.find('Tooltip').length).toBe(0);
- });
- });
-
- describe('when hovering over an empty bucket', () => {
- beforeEach(() => {
- wrapper.find('.rv-voronoi__cell').at(2).simulate('mouseOver');
- });
-
- it('should not display tooltip', () => {
- expect(wrapper.find('Tooltip').length).toBe(0);
- });
- });
-
- describe('when hovering over a non-empty bucket', () => {
- beforeEach(() => {
- wrapper.find('.rv-voronoi__cell').at(7).simulate('mouseOver');
- });
-
- it('should display tooltip', () => {
- const tooltips = wrapper.find('Tooltip');
-
- expect(tooltips.length).toBe(1);
- expect(tooltips.prop('header')).toBe('811 - 927 ms');
- expect(tooltips.prop('tooltipPoints')).toEqual([
- { value: '49 occurrences' },
- ]);
- expect(tooltips.prop('x')).toEqual(869010);
- expect(tooltips.prop('y')).toEqual(27.5);
- });
-
- it('should have correct markup for tooltip', () => {
- const tooltips = wrapper.find('Tooltip');
- expect(toJson(tooltips)).toMatchSnapshot();
- });
- });
-
- describe('when clicking on a non-empty bucket', () => {
- beforeEach(() => {
- wrapper.find('.rv-voronoi__cell').at(7).simulate('click');
- });
-
- it('should call onClick with bucket', () => {
- expect(onClick).toHaveBeenCalledWith({
- style: { cursor: 'pointer' },
- xCenter: 869010,
- x0: 811076,
- x: 926944,
- y: 49,
- });
- });
- });
-});
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
deleted file mode 100644
index a31b9735628ab..0000000000000
--- a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
+++ /dev/null
@@ -1,1504 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Histogram Initially should have default markup 1`] = `
-.c0 {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- position: absolute;
- top: 0;
- left: 0;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
- 811 - 927 ms
-
-
-
-
-
-
- 49 occurrences
-
-
-
-
-
-
-
-
-
- {noHits ? (
- <>{emptyStateChart}
- ) : (
- <>
-
-
-
-
-
- {showBackgroundHover && (
-
- )}
-
- {shouldShowTooltip && (
-
- )}
-
- {selectedBucket && (
-
- )}
-
-
-
- {showVerticalLineHover && hoveredBucket?.x && (
-
- )}
-
- {
- return {
- ...bucket,
- xCenter: (bucket.x0 + bucket.x) / 2,
- };
- })}
- onClick={this.onClick}
- onHover={this.onHover}
- onBlur={this.onBlur}
- x={(d) => x(d.xCenter)}
- y={() => 1}
- />
-
-
- {legends && (
- {}}
- truncateLegends={false}
- noHits={noHits}
- />
- )}
-
- )}
-
-
- );
- }
-}
-
-HistogramInner.propTypes = {
- backgroundHover: PropTypes.func,
- bucketIndex: PropTypes.number,
- buckets: PropTypes.array.isRequired,
- bucketSize: PropTypes.number.isRequired,
- formatX: PropTypes.func,
- formatYLong: PropTypes.func,
- formatYShort: PropTypes.func,
- onClick: PropTypes.func,
- tooltipFooter: PropTypes.func,
- tooltipHeader: PropTypes.func,
- verticalLineHover: PropTypes.func,
- width: PropTypes.number.isRequired,
- height: PropTypes.number,
- xType: PropTypes.string,
- legends: PropTypes.array,
- noHits: PropTypes.bool,
-};
-
-HistogramInner.defaultProps = {
- backgroundHover: () => null,
- formatYLong: (value) => value,
- formatYShort: (value) => value,
- tooltipFooter: () => null,
- tooltipHeader: () => null,
- verticalLineHover: () => null,
- xType: 'linear',
- noHits: false,
- height: XY_HEIGHT,
-};
-
-export default makeWidthFlexible(HistogramInner);
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx
deleted file mode 100644
index 2e4b51af00d6b..0000000000000
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx
+++ /dev/null
@@ -1,70 +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 React, { useCallback } from 'react';
-import { Coordinate, TimeSeries } from '../../../../../../typings/timeseries';
-import { useLegacyChartsSync as useChartsSync } from '../../../../../hooks/use_charts_sync';
-// @ts-expect-error
-import CustomPlot from '../../CustomPlot';
-
-interface Props {
- series: TimeSeries[];
- truncateLegends?: boolean;
- tickFormatY: (y: number) => React.ReactNode;
- formatTooltipValue: (c: Coordinate) => React.ReactNode;
- yMax?: string | number;
- height?: number;
- stacked?: boolean;
- onHover?: () => void;
- visibleLegendCount?: number;
- onToggleLegend?: (disabledSeriesState: boolean[]) => void;
-}
-
-function TransactionLineChart(props: Props) {
- const {
- series,
- tickFormatY,
- formatTooltipValue,
- yMax = 'max',
- height,
- truncateLegends,
- stacked = false,
- onHover,
- visibleLegendCount,
- onToggleLegend,
- } = props;
-
- const syncedChartsProps = useChartsSync();
-
- // combine callback for syncedChartsProps.onHover and props.onHover
- const combinedOnHover = useCallback(
- (hoverX: number) => {
- if (onHover) {
- onHover();
- }
- return syncedChartsProps.onHover(hoverX);
- },
- [syncedChartsProps, onHover]
- );
-
- return (
-
- );
-}
-
-export { TransactionLineChart };
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
index b3c0c3b6de857..2a5948d0ebf0b 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
@@ -20,104 +20,107 @@ import {
TRANSACTION_REQUEST,
TRANSACTION_ROUTE_CHANGE,
} from '../../../../../common/transaction_types';
+import { asDecimal, tpmUnit } from '../../../../../common/utils/formatters';
import { Coordinate } from '../../../../../typings/timeseries';
+import { ChartsSyncContextProvider } from '../../../../context/charts_sync_context';
import { LicenseContext } from '../../../../context/LicenseContext';
import { IUrlParams } from '../../../../context/UrlParamsContext/types';
+import { FETCH_STATUS } from '../../../../hooks/useFetcher';
import { ITransactionChartData } from '../../../../selectors/chartSelectors';
-import { asDecimal, tpmUnit } from '../../../../../common/utils/formatters';
import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
-import { ErroneousTransactionsRateChart } from '../erroneous_transactions_rate_chart/legacy';
import { TransactionBreakdown } from '../../TransactionBreakdown';
-import {
- getResponseTimeTickFormatter,
- getResponseTimeTooltipFormatter,
-} from './helper';
+import { LineChart } from '../line_chart';
+import { TransactionErrorRateChart } from '../transaction_error_rate_chart/';
+import { getResponseTimeTickFormatter } from './helper';
import { MLHeader } from './ml_header';
-import { TransactionLineChart } from './TransactionLineChart';
import { useFormatter } from './use_formatter';
interface TransactionChartProps {
charts: ITransactionChartData;
urlParams: IUrlParams;
+ fetchStatus: FETCH_STATUS;
}
export function TransactionCharts({
charts,
urlParams,
+ fetchStatus,
}: TransactionChartProps) {
const getTPMFormatter = (t: number) => {
- const unit = tpmUnit(urlParams.transactionType);
- return `${asDecimal(t)} ${unit}`;
+ return `${asDecimal(t)} ${tpmUnit(urlParams.transactionType)}`;
};
- const getTPMTooltipFormatter = (p: Coordinate) => {
- return isValidCoordinateValue(p.y)
- ? getTPMFormatter(p.y)
- : NOT_AVAILABLE_LABEL;
+ const getTPMTooltipFormatter = (y: Coordinate['y']) => {
+ return isValidCoordinateValue(y) ? getTPMFormatter(y) : NOT_AVAILABLE_LABEL;
};
const { transactionType } = urlParams;
const { responseTimeSeries, tpmSeries } = charts;
- const { formatter, setDisabledSeriesState } = useFormatter(
- responseTimeSeries
- );
+ const { formatter, toggleSerie } = useFormatter(responseTimeSeries);
return (
<>
-
-
-
-
-
-
- {responseTimeLabel(transactionType)}
-
-
-
- {(license) => (
-
- )}
-
-
-
-
-
+
+
+
+
+
+
+
+ {responseTimeLabel(transactionType)}
+
+
+
+ {(license) => (
+
+ )}
+
+
+ {
+ if (serie) {
+ toggleSerie(serie);
+ }
+ }}
+ />
+
+
-
-
-
- {tpmLabel(transactionType)}
-
-
-
-
-
+
+
+
+ {tpmLabel(transactionType)}
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/use_formatter.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/use_formatter.test.tsx
index fc873cbda7bf2..958a5db6b66c9 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/use_formatter.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/use_formatter.test.tsx
@@ -3,38 +3,17 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
+import { SeriesIdentifier } from '@elastic/charts';
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-test-renderer';
+import { toMicroseconds } from '../../../../../common/utils/formatters';
import { TimeSeries } from '../../../../../typings/timeseries';
import { useFormatter } from './use_formatter';
-import { render, fireEvent, act } from '@testing-library/react';
-import { toMicroseconds } from '../../../../../common/utils/formatters';
-
-function MockComponent({
- timeSeries,
- disabledSeries,
- value,
-}: {
- timeSeries: TimeSeries[];
- disabledSeries: boolean[];
- value: number;
-}) {
- const { formatter, setDisabledSeriesState } = useFormatter(timeSeries);
-
- const onDisableSeries = () => {
- setDisabledSeriesState(disabledSeries);
- };
-
- return (
-
-
- {formatter(value).formatted}
-
- );
-}
describe('useFormatter', () => {
const timeSeries = ([
{
+ title: 'avg',
data: [
{ x: 1, y: toMicroseconds(11, 'minutes') },
{ x: 2, y: toMicroseconds(1, 'minutes') },
@@ -42,6 +21,7 @@ describe('useFormatter', () => {
],
},
{
+ title: '95th percentile',
data: [
{ x: 1, y: toMicroseconds(120, 'seconds') },
{ x: 2, y: toMicroseconds(1, 'minutes') },
@@ -49,6 +29,7 @@ describe('useFormatter', () => {
],
},
{
+ title: '99th percentile',
data: [
{ x: 1, y: toMicroseconds(60, 'seconds') },
{ x: 2, y: toMicroseconds(5, 'minutes') },
@@ -56,54 +37,47 @@ describe('useFormatter', () => {
],
},
] as unknown) as TimeSeries[];
+
it('returns new formatter when disabled series state changes', () => {
- const { getByText } = render(
-
- );
- expect(getByText('2.0 min')).toBeInTheDocument();
+ const { result } = renderHook(() => useFormatter(timeSeries));
+ expect(
+ result.current.formatter(toMicroseconds(120, 'seconds')).formatted
+ ).toEqual('2.0 min');
+
act(() => {
- fireEvent.click(getByText('disable series'));
+ result.current.toggleSerie({
+ specId: 'avg',
+ } as SeriesIdentifier);
});
- expect(getByText('120 s')).toBeInTheDocument();
+
+ expect(
+ result.current.formatter(toMicroseconds(120, 'seconds')).formatted
+ ).toEqual('120 s');
});
+
it('falls back to the first formatter when disabled series is empty', () => {
- const { getByText } = render(
-
- );
- expect(getByText('2.0 min')).toBeInTheDocument();
+ const { result } = renderHook(() => useFormatter(timeSeries));
+ expect(
+ result.current.formatter(toMicroseconds(120, 'seconds')).formatted
+ ).toEqual('2.0 min');
+
act(() => {
- fireEvent.click(getByText('disable series'));
+ result.current.toggleSerie({
+ specId: 'avg',
+ } as SeriesIdentifier);
});
- expect(getByText('2.0 min')).toBeInTheDocument();
- // const { formatter, setDisabledSeriesState } = useFormatter(timeSeries);
- // expect(formatter(toMicroseconds(120, 'seconds'))).toEqual('2.0 min');
- // setDisabledSeriesState([true, true, false]);
- // expect(formatter(toMicroseconds(120, 'seconds'))).toEqual('2.0 min');
- });
- it('falls back to the first formatter when disabled series is all true', () => {
- const { getByText } = render(
-
- );
- expect(getByText('2.0 min')).toBeInTheDocument();
+
+ expect(
+ result.current.formatter(toMicroseconds(120, 'seconds')).formatted
+ ).toEqual('120 s');
+
act(() => {
- fireEvent.click(getByText('disable series'));
+ result.current.toggleSerie({
+ specId: 'avg',
+ } as SeriesIdentifier);
});
- expect(getByText('2.0 min')).toBeInTheDocument();
- // const { formatter, setDisabledSeriesState } = useFormatter(timeSeries);
- // expect(formatter(toMicroseconds(120, 'seconds'))).toEqual('2.0 min');
- // setDisabledSeriesState([true, true, false]);
- // expect(formatter(toMicroseconds(120, 'seconds'))).toEqual('2.0 min');
+ expect(
+ result.current.formatter(toMicroseconds(120, 'seconds')).formatted
+ ).toEqual('2.0 min');
});
});
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/use_formatter.ts b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/use_formatter.ts
index d4694bc3caf1d..1475ec2934e95 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/use_formatter.ts
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/use_formatter.ts
@@ -4,8 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import { useState, Dispatch, SetStateAction } from 'react';
-import { isEmpty } from 'lodash';
+import { SeriesIdentifier } from '@elastic/charts';
+import { omit } from 'lodash';
+import { useState } from 'react';
import {
getDurationFormatter,
TimeFormatter,
@@ -14,17 +15,36 @@ import { TimeSeries } from '../../../../../typings/timeseries';
import { getMaxY } from './helper';
export const useFormatter = (
- series: TimeSeries[]
+ series?: TimeSeries[]
): {
formatter: TimeFormatter;
- setDisabledSeriesState: Dispatch>;
+ toggleSerie: (disabledSerie: SeriesIdentifier) => void;
} => {
- const [disabledSeriesState, setDisabledSeriesState] = useState([]);
- const visibleSeries = series.filter(
- (serie, index) => disabledSeriesState[index] !== true
+ const [disabledSeries, setDisabledSeries] = useState<
+ Record
+ >({});
+
+ const visibleSeries = series?.filter(
+ (serie) => disabledSeries[serie.title] === undefined
);
- const maxY = getMaxY(isEmpty(visibleSeries) ? series : visibleSeries);
+
+ const maxY = getMaxY(visibleSeries || series || []);
const formatter = getDurationFormatter(maxY);
- return { formatter, setDisabledSeriesState };
+ const toggleSerie = ({ specId }: SeriesIdentifier) => {
+ if (disabledSeries[specId] !== undefined) {
+ setDisabledSeries((prevState) => {
+ return omit(prevState, specId);
+ });
+ } else {
+ setDisabledSeries((prevState) => {
+ return { ...prevState, [specId]: 0 };
+ });
+ }
+ };
+
+ return {
+ formatter,
+ toggleSerie,
+ };
};
diff --git a/x-pack/plugins/apm/public/components/shared/charts/annotations/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/annotations/index.tsx
new file mode 100644
index 0000000000000..683c66b2a96fe
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/charts/annotations/index.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 {
+ AnnotationDomainTypes,
+ LineAnnotation,
+ Position,
+} from '@elastic/charts';
+import { EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { asAbsoluteDateTime } from '../../../../../common/utils/formatters';
+import { useTheme } from '../../../../hooks/useTheme';
+import { useAnnotations } from '../../../../hooks/use_annotations';
+
+export function Annotations() {
+ const { annotations } = useAnnotations();
+ const theme = useTheme();
+
+ if (!annotations.length) {
+ return null;
+ }
+
+ const color = theme.eui.euiColorSecondary;
+
+ return (
+ ({
+ dataValue: annotation['@timestamp'],
+ header: asAbsoluteDateTime(annotation['@timestamp']),
+ details: `${i18n.translate('xpack.apm.chart.annotation.version', {
+ defaultMessage: 'Version',
+ })} ${annotation.text}`,
+ }))}
+ style={{ line: { strokeWidth: 1, stroke: color, opacity: 1 } }}
+ marker={}
+ markerPosition={Position.Top}
+ />
+ );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/chart_container.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/chart_container.test.tsx
index 409cb69575ca9..c0e8f869ce647 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/chart_container.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/chart_container.test.tsx
@@ -5,30 +5,97 @@
*/
import { render } from '@testing-library/react';
import React from 'react';
+import { FETCH_STATUS } from '../../../hooks/useFetcher';
import { ChartContainer } from './chart_container';
describe('ChartContainer', () => {
- describe('when isLoading is true', () => {
- it('shows loading the indicator', () => {
- const component = render(
-
+ describe('loading indicator', () => {
+ it('shows loading when status equals to Loading or Pending and has no data', () => {
+ [FETCH_STATUS.PENDING, FETCH_STATUS.LOADING].map((status) => {
+ const { queryAllByTestId } = render(
+
+ My amazing component
+
+ );
+
+ expect(queryAllByTestId('loading')[0]).toBeInTheDocument();
+ });
+ });
+ it('does not show loading when status equals to Loading or Pending and has data', () => {
+ [FETCH_STATUS.PENDING, FETCH_STATUS.LOADING].map((status) => {
+ const { queryAllByText } = render(
+
+ My amazing component
+
+ );
+ expect(queryAllByText('My amazing component')[0]).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('failure indicator', () => {
+ it('shows failure message when status equals to Failure and has data', () => {
+ const { getByText } = render(
+
My amazing component
);
-
- expect(component.getByTestId('loading')).toBeInTheDocument();
+ expect(
+ getByText(
+ 'An error happened when trying to fetch data. Please try again'
+ )
+ ).toBeInTheDocument();
+ });
+ it('shows failure message when status equals to Failure and has no data', () => {
+ const { getByText } = render(
+
+ My amazing component
+
+ );
+ expect(
+ getByText(
+ 'An error happened when trying to fetch data. Please try again'
+ )
+ ).toBeInTheDocument();
});
});
- describe('when isLoading is false', () => {
- it('does not show the loading indicator', () => {
- const component = render(
-
+ describe('render component', () => {
+ it('shows children component when status Success and has data', () => {
+ const { getByText } = render(
+
My amazing component
);
-
- expect(component.queryByTestId('loading')).not.toBeInTheDocument();
+ expect(getByText('My amazing component')).toBeInTheDocument();
+ });
+ it('shows children component when status Success and has no data', () => {
+ const { getByText } = render(
+
+ My amazing component
+
+ );
+ expect(getByText('My amazing component')).toBeInTheDocument();
});
});
});
diff --git a/x-pack/plugins/apm/public/components/shared/charts/chart_container.tsx b/x-pack/plugins/apm/public/components/shared/charts/chart_container.tsx
index a6f579308597f..b4486f1e9b94a 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/chart_container.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/chart_container.tsx
@@ -3,27 +3,56 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
-import { EuiLoadingChart } from '@elastic/eui';
+
+import { EuiLoadingChart, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
import React from 'react';
+import { FETCH_STATUS } from '../../../hooks/useFetcher';
interface Props {
- isLoading: boolean;
+ hasData: boolean;
+ status: FETCH_STATUS;
height: number;
children: React.ReactNode;
}
-export function ChartContainer({ isLoading, children, height }: Props) {
+export function ChartContainer({ children, height, status, hasData }: Props) {
+ if (
+ !hasData &&
+ (status === FETCH_STATUS.LOADING || status === FETCH_STATUS.PENDING)
+ ) {
+ return ;
+ }
+
+ if (status === FETCH_STATUS.FAILURE) {
+ return ;
+ }
+
+ return {children}
;
+}
+
+function LoadingChartPlaceholder({ height }: { height: number }) {
return (
- {isLoading && }
- {children}
+
);
}
+
+function FailedChartPlaceholder({ height }: { height: number }) {
+ return (
+
+ {i18n.translate('xpack.apm.chart.error', {
+ defaultMessage:
+ 'An error happened when trying to fetch data. Please try again',
+ })}
+
+ );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/erroneous_transactions_rate_chart/legacy.tsx b/x-pack/plugins/apm/public/components/shared/charts/erroneous_transactions_rate_chart/legacy.tsx
deleted file mode 100644
index 29102f606414f..0000000000000
--- a/x-pack/plugins/apm/public/components/shared/charts/erroneous_transactions_rate_chart/legacy.tsx
+++ /dev/null
@@ -1,112 +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 { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
-import { i18n } from '@kbn/i18n';
-import { max } from 'lodash';
-import React, { useCallback } from 'react';
-import { useParams } from 'react-router-dom';
-import { asPercent } from '../../../../../common/utils/formatters';
-import { useLegacyChartsSync as useChartsSync } from '../../../../hooks/use_charts_sync';
-import { useFetcher } from '../../../../hooks/useFetcher';
-import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { callApmApi } from '../../../../services/rest/createCallApmApi';
-// @ts-expect-error
-import CustomPlot from '../CustomPlot';
-
-const tickFormatY = (y?: number | null) => {
- return asPercent(y || 0, 1);
-};
-
-/**
- * "Legacy" version of this chart using react-vis charts. See index.tsx for the
- * Elastic Charts version.
- *
- * This will be removed with #70290.
- */
-export function ErroneousTransactionsRateChart() {
- const { serviceName } = useParams<{ serviceName?: string }>();
- const { urlParams, uiFilters } = useUrlParams();
- const syncedChartsProps = useChartsSync();
-
- const { start, end, transactionType, transactionName } = urlParams;
-
- const { data } = useFetcher(() => {
- if (serviceName && start && end) {
- return callApmApi({
- pathname:
- '/api/apm/services/{serviceName}/transaction_groups/error_rate',
- params: {
- path: {
- serviceName,
- },
- query: {
- start,
- end,
- transactionType,
- transactionName,
- uiFilters: JSON.stringify(uiFilters),
- },
- },
- });
- }
- }, [serviceName, start, end, uiFilters, transactionType, transactionName]);
-
- const combinedOnHover = useCallback(
- (hoverX: number) => {
- return syncedChartsProps.onHover(hoverX);
- },
- [syncedChartsProps]
- );
-
- const errorRates = data?.transactionErrorRate || [];
- const maxRate = max(errorRates.map((errorRate) => errorRate.y));
-
- return (
-
-
-
- {i18n.translate('xpack.apm.errorRateChart.title', {
- defaultMessage: 'Transaction error rate',
- })}
-
-
-
-
- Number.isFinite(y) ? tickFormatY(y) : 'N/A'
- }
- />
-
- );
-}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/line_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/line_chart/index.tsx
index 3f2a08ecb7641..507acc49d89db 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/line_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/line_chart/index.tsx
@@ -20,15 +20,17 @@ import moment from 'moment';
import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { TimeSeries } from '../../../../../typings/timeseries';
+import { FETCH_STATUS } from '../../../../hooks/useFetcher';
import { useUrlParams } from '../../../../hooks/useUrlParams';
import { useChartsSync } from '../../../../hooks/use_charts_sync';
import { unit } from '../../../../style/variables';
+import { Annotations } from '../annotations';
import { ChartContainer } from '../chart_container';
import { onBrushEnd } from '../helper/helper';
interface Props {
id: string;
- isLoading: boolean;
+ fetchStatus: FETCH_STATUS;
onToggleLegend?: LegendItemListener;
timeseries: TimeSeries[];
/**
@@ -38,18 +40,20 @@ interface Props {
/**
* Formatter for legend and tooltip values
*/
- yTickFormat: (y: number) => string;
+ yTickFormat?: (y: number) => string;
+ showAnnotations?: boolean;
}
const XY_HEIGHT = unit * 16;
export function LineChart({
id,
- isLoading,
+ fetchStatus,
onToggleLegend,
timeseries,
yLabelFormat,
yTickFormat,
+ showAnnotations = true,
}: Props) {
const history = useHistory();
const chartRef = React.createRef();
@@ -84,7 +88,7 @@ export function LineChart({
);
return (
-
+
onBrushEnd({ x, history })}
@@ -115,11 +119,13 @@ export function LineChart({
id="y-axis"
ticks={3}
position={Position.Left}
- tickFormat={yTickFormat}
+ tickFormat={yTickFormat ? yTickFormat : yLabelFormat}
labelFormat={yLabelFormat}
showGridLines
/>
+ {showAnnotations && }
+
{timeseries.map((serie) => {
return (
();
const { urlParams, uiFilters } = useUrlParams();
@@ -56,25 +61,32 @@ export function ErroneousTransactionsRateChart() {
const errorRates = data?.transactionErrorRate || [];
return (
-
+
+
+
+ {i18n.translate('xpack.apm.errorRate', {
+ defaultMessage: 'Error rate',
+ })}
+
+
+
+
);
}
diff --git a/x-pack/plugins/apm/public/hooks/useTransactionBreakdown.ts b/x-pack/plugins/apm/public/hooks/useTransactionBreakdown.ts
index 08d2300c3254a..0705383ecb0ca 100644
--- a/x-pack/plugins/apm/public/hooks/useTransactionBreakdown.ts
+++ b/x-pack/plugins/apm/public/hooks/useTransactionBreakdown.ts
@@ -15,7 +15,7 @@ export function useTransactionBreakdown() {
uiFilters,
} = useUrlParams();
- const { data = { timeseries: [] }, error, status } = useFetcher(
+ const { data = { timeseries: undefined }, error, status } = useFetcher(
(callApmApi) => {
if (serviceName && start && end && transactionType) {
return callApmApi({
diff --git a/x-pack/plugins/apm/public/hooks/useTransactionDistribution.ts b/x-pack/plugins/apm/public/hooks/useTransactionDistribution.ts
index a5096a314388c..8c76225d03486 100644
--- a/x-pack/plugins/apm/public/hooks/useTransactionDistribution.ts
+++ b/x-pack/plugins/apm/public/hooks/useTransactionDistribution.ts
@@ -10,7 +10,7 @@ import { IUrlParams } from '../context/UrlParamsContext/types';
import { useFetcher } from './useFetcher';
import { useUiFilters } from '../context/UrlParamsContext';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { TransactionDistributionAPIResponse } from '../../server/lib/transactions/distribution';
+import type { TransactionDistributionAPIResponse } from '../../server/lib/transactions/distribution';
import { toQuery, fromQuery } from '../components/shared/Links/url_helpers';
import { maybe } from '../../common/utils/maybe';
diff --git a/x-pack/plugins/apm/public/hooks/useTransactionList.ts b/x-pack/plugins/apm/public/hooks/useTransactionList.ts
index 9c3a18b9c0d0d..b2c2cc30f78ec 100644
--- a/x-pack/plugins/apm/public/hooks/useTransactionList.ts
+++ b/x-pack/plugins/apm/public/hooks/useTransactionList.ts
@@ -14,8 +14,8 @@ type TransactionsAPIResponse = APIReturnType<
'/api/apm/services/{serviceName}/transaction_groups'
>;
-const DEFAULT_RESPONSE: TransactionsAPIResponse = {
- items: [],
+const DEFAULT_RESPONSE: Partial = {
+ items: undefined,
isAggregationAccurate: true,
bucketSize: 0,
};
diff --git a/x-pack/plugins/apm/public/hooks/use_annotations.ts b/x-pack/plugins/apm/public/hooks/use_annotations.ts
new file mode 100644
index 0000000000000..2b1c2bec52b3d
--- /dev/null
+++ b/x-pack/plugins/apm/public/hooks/use_annotations.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 { useParams } from 'react-router-dom';
+import { callApmApi } from '../services/rest/createCallApmApi';
+import { useFetcher } from './useFetcher';
+import { useUrlParams } from './useUrlParams';
+
+const INITIAL_STATE = { annotations: [] };
+
+export function useAnnotations() {
+ const { serviceName } = useParams<{ serviceName?: string }>();
+ const { urlParams, uiFilters } = useUrlParams();
+ const { start, end } = urlParams;
+ const { environment } = uiFilters;
+
+ const { data = INITIAL_STATE } = useFetcher(() => {
+ if (start && end && serviceName) {
+ return callApmApi({
+ pathname: '/api/apm/services/{serviceName}/annotation/search',
+ params: {
+ path: {
+ serviceName,
+ },
+ query: {
+ start,
+ end,
+ environment,
+ },
+ },
+ });
+ }
+ }, [start, end, environment, serviceName]);
+
+ return data;
+}
diff --git a/x-pack/plugins/apm/public/selectors/chartSelectors.ts b/x-pack/plugins/apm/public/selectors/chartSelectors.ts
index 8c6093859f969..450f02f70c6a4 100644
--- a/x-pack/plugins/apm/public/selectors/chartSelectors.ts
+++ b/x-pack/plugins/apm/public/selectors/chartSelectors.ts
@@ -31,40 +31,37 @@ export interface ITpmBucket {
}
export interface ITransactionChartData {
- tpmSeries: ITpmBucket[];
- responseTimeSeries: TimeSeries[];
+ tpmSeries?: ITpmBucket[];
+ responseTimeSeries?: TimeSeries[];
mlJobId: string | undefined;
}
-const INITIAL_DATA = {
- apmTimeseries: {
- responseTimes: {
- avg: [],
- p95: [],
- p99: [],
- },
- tpmBuckets: [],
- overallAvgDuration: null,
- },
+const INITIAL_DATA: Partial = {
+ apmTimeseries: undefined,
anomalyTimeseries: undefined,
};
export function getTransactionCharts(
{ transactionType }: IUrlParams,
- { apmTimeseries, anomalyTimeseries }: TimeSeriesAPIResponse = INITIAL_DATA
+ charts = INITIAL_DATA
): ITransactionChartData {
- const tpmSeries = getTpmSeries(apmTimeseries, transactionType);
-
- const responseTimeSeries = getResponseTimeSeries({
- apmTimeseries,
- anomalyTimeseries,
- });
+ const { apmTimeseries, anomalyTimeseries } = charts;
- return {
- tpmSeries,
- responseTimeSeries,
+ const transactionCharts: ITransactionChartData = {
+ tpmSeries: undefined,
+ responseTimeSeries: undefined,
mlJobId: anomalyTimeseries?.jobId,
};
+
+ if (apmTimeseries) {
+ transactionCharts.tpmSeries = getTpmSeries(apmTimeseries, transactionType);
+
+ transactionCharts.responseTimeSeries = getResponseTimeSeries({
+ apmTimeseries,
+ anomalyTimeseries,
+ });
+ }
+ return transactionCharts;
}
export function getResponseTimeSeries({
diff --git a/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts b/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
index a42710947a792..b12dd73a20986 100644
--- a/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
+++ b/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
@@ -73,6 +73,6 @@ export async function getBuckets({
return {
noHits: resp.hits.total.value === 0,
- buckets,
+ buckets: resp.hits.total.value > 0 ? buckets : [],
};
}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index e7784846598e4..f87f21b27de30 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4875,22 +4875,15 @@
"xpack.apm.error.prompt.title": "申し訳ございませんが、エラーが発生しました :(",
"xpack.apm.errorCountAlert.name": "エラー数しきい値",
"xpack.apm.errorCountAlertTrigger.errors": " エラー",
- "xpack.apm.errorGroupDetails.avgLabel": "平均",
"xpack.apm.errorGroupDetails.culpritLabel": "原因",
"xpack.apm.errorGroupDetails.errorGroupTitle": "エラーグループ {errorGroupId}",
"xpack.apm.errorGroupDetails.errorOccurrenceTitle": "エラーのオカレンス",
"xpack.apm.errorGroupDetails.exceptionMessageLabel": "例外メッセージ",
"xpack.apm.errorGroupDetails.logMessageLabel": "ログメッセージ",
- "xpack.apm.errorGroupDetails.noErrorsLabel": "エラーが見つかりませんでした",
"xpack.apm.errorGroupDetails.occurrencesChartLabel": "オカレンス",
- "xpack.apm.errorGroupDetails.occurrencesLongLabel": "{occCount} {occCount, plural, one {件の発生} other {件の発生}}",
- "xpack.apm.errorGroupDetails.occurrencesShortLabel": "{occCount} 件",
"xpack.apm.errorGroupDetails.relatedTransactionSample": "関連トランザクションサンプル",
"xpack.apm.errorGroupDetails.unhandledLabel": "未対応",
"xpack.apm.errorGroupDetails.viewOccurrencesInDiscoverButtonLabel": "ディスカバリで {occurrencesCount} 件の{occurrencesCount, plural, one {ドキュメント} other {ドキュメント}}を表示。",
- "xpack.apm.errorRateChart.avgLabel": "平均",
- "xpack.apm.errorRateChart.rateLabel": "レート",
- "xpack.apm.errorRateChart.title": "トランザクションエラー率",
"xpack.apm.errorsTable.errorMessageAndCulpritColumnLabel": "エラーメッセージと原因",
"xpack.apm.errorsTable.groupIdColumnDescription": "スタックトレースのハッシュ。動的パラメータのため、エラーメッセージが異なる場合でも、類似したエラーをグループ化します。",
"xpack.apm.errorsTable.groupIdColumnLabel": "グループ ID",
@@ -4917,7 +4910,6 @@
"xpack.apm.header.badge.readOnly.text": "読み込み専用",
"xpack.apm.header.badge.readOnly.tooltip": "を保存できませんでした",
"xpack.apm.helpMenu.upgradeAssistantLink": "アップグレードアシスタント",
- "xpack.apm.histogram.plot.noDataLabel": "この時間範囲のデータがありません。",
"xpack.apm.home.alertsMenu.alerts": "アラート",
"xpack.apm.home.alertsMenu.createAnomalyAlert": "異常アラートを作成",
"xpack.apm.home.alertsMenu.createThresholdAlert": "しきい値アラートを作成",
@@ -5256,7 +5248,6 @@
"xpack.apm.transactionDetails.traceNotFound": "選択されたトレースが見つかりません",
"xpack.apm.transactionDetails.traceSampleTitle": "トレースのサンプル",
"xpack.apm.transactionDetails.transactionLabel": "トランザクション",
- "xpack.apm.transactionDetails.transactionsDurationDistributionChart.noSampleTooltip": "このバケットに利用可能なサンプルがありません",
"xpack.apm.transactionDetails.transactionsDurationDistributionChart.requestTypeUnitLongLabel": "{transCount, plural, =0 {# request} 1 {# 件のリクエスト} other {# 件のリクエスト}}",
"xpack.apm.transactionDetails.transactionsDurationDistributionChart.transactionTypeUnitLongLabel": "{transCount, plural, =0 {# transaction} 1 {# 件のトランザクション} other {# 件のトランザクション}}",
"xpack.apm.transactionDetails.transactionsDurationDistributionChart.unitShortLabel": "{transCount} {transType, select, request {件のリクエスト} other {件のトランザクション}}",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index f3cd662bacba7..fa0e4317cb568 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4877,22 +4877,15 @@
"xpack.apm.error.prompt.title": "抱歉，发生错误 :(",
"xpack.apm.errorCountAlert.name": "错误计数阈值",
"xpack.apm.errorCountAlertTrigger.errors": " 错误",
- "xpack.apm.errorGroupDetails.avgLabel": "平均",
"xpack.apm.errorGroupDetails.culpritLabel": "原因",
"xpack.apm.errorGroupDetails.errorGroupTitle": "错误组 {errorGroupId}",
"xpack.apm.errorGroupDetails.errorOccurrenceTitle": "错误发生",
"xpack.apm.errorGroupDetails.exceptionMessageLabel": "异常消息",
"xpack.apm.errorGroupDetails.logMessageLabel": "日志消息",
- "xpack.apm.errorGroupDetails.noErrorsLabel": "未找到任何错误",
"xpack.apm.errorGroupDetails.occurrencesChartLabel": "发生次数",
- "xpack.apm.errorGroupDetails.occurrencesLongLabel": "{occCount} 次{occCount, plural, one {出现} other {出现}}",
- "xpack.apm.errorGroupDetails.occurrencesShortLabel": "{occCount} 次发生",
"xpack.apm.errorGroupDetails.relatedTransactionSample": "相关的事务样本",
"xpack.apm.errorGroupDetails.unhandledLabel": "未处理",
"xpack.apm.errorGroupDetails.viewOccurrencesInDiscoverButtonLabel": "在 Discover 查看 {occurrencesCount} 个 {occurrencesCount, plural, one {匹配项} other {匹配项}}。",
- "xpack.apm.errorRateChart.avgLabel": "平均",
- "xpack.apm.errorRateChart.rateLabel": "比率",
- "xpack.apm.errorRateChart.title": "事务错误率",
"xpack.apm.errorsTable.errorMessageAndCulpritColumnLabel": "错误消息和原因",
"xpack.apm.errorsTable.groupIdColumnDescription": "堆栈跟踪的哈希。将类似错误分组在一起，即使因动态参数造成错误消息不同。",
"xpack.apm.errorsTable.groupIdColumnLabel": "组 ID",
@@ -4919,7 +4912,6 @@
"xpack.apm.header.badge.readOnly.text": "只读",
"xpack.apm.header.badge.readOnly.tooltip": "无法保存",
"xpack.apm.helpMenu.upgradeAssistantLink": "升级助手",
- "xpack.apm.histogram.plot.noDataLabel": "此时间范围内没有数据。",
"xpack.apm.home.alertsMenu.alerts": "告警",
"xpack.apm.home.alertsMenu.createAnomalyAlert": "创建异常告警",
"xpack.apm.home.alertsMenu.createThresholdAlert": "创建阈值告警",
@@ -5260,7 +5252,6 @@
"xpack.apm.transactionDetails.traceNotFound": "找不到所选跟踪",
"xpack.apm.transactionDetails.traceSampleTitle": "跟踪样例",
"xpack.apm.transactionDetails.transactionLabel": "事务",
- "xpack.apm.transactionDetails.transactionsDurationDistributionChart.noSampleTooltip": "此存储桶没有可用样例",
"xpack.apm.transactionDetails.transactionsDurationDistributionChart.requestTypeUnitLongLabel": "{transCount, plural, =0 {# 个请求} one {# 个请求} other {# 个请求}}",
"xpack.apm.transactionDetails.transactionsDurationDistributionChart.transactionTypeUnitLongLabel": "{transCount, plural, =0 {# 个事务} one {# 个事务} other {# 个事务}}",
"xpack.apm.transactionDetails.transactionsDurationDistributionChart.unitShortLabel": "{transCount} 个{transType, select, request {请求} other {事务}}",