From e3455ce35bec43b1c5b744770a46a37a22056d8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
<55978943+cauemarcondes@users.noreply.github.com>
Date: Mon, 11 Jan 2021 18:31:16 +0100
Subject: [PATCH] [APM] latencyAggregationType is not persisted when navigation
to Transaction overview to detail (#87046)
* persisting latency aggregation type
* addressing PR comments
* removing useLatencyAggregationType hook
* addressing PR comments
* addressing PR comments
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
.../ErrorGroupDetails/DetailView/index.tsx | 2 +-
.../app/TraceOverview/TraceList.tsx | 2 +-
.../MaybeViewTraceLink.tsx | 9 ++-
.../Waterfall/FlyoutTopLevelProperties.tsx | 10 +++-
.../SpanFlyout/StickySpanProperties.tsx | 13 +++--
.../service_details/service_detail_tabs.tsx | 6 +-
.../service_overview.test.tsx | 7 ++-
.../index.tsx | 34 +++++------
.../TransactionList/index.tsx | 9 ++-
.../Links/apm/TransactionDetailLink.tsx | 49 ----------------
.../Links/apm/transaction_detail_link.tsx | 57 +++++++++++++++++++
.../apm/transaction_overview_link.test.tsx | 43 +++++++-------
.../Links/apm/transaction_overview_link.tsx | 38 ++++++++++---
.../components/shared/Links/url_helpers.ts | 3 +-
.../url_params_context/resolve_url_params.ts | 3 +-
.../use_latency_Aggregation_type.test.ts | 46 ---------------
.../hooks/use_latency_Aggregation_type.ts | 24 --------
.../use_transaction_latency_chart_fetcher.ts | 7 +--
.../selectors/latency_chart_selectors.ts | 5 +-
19 files changed, 178 insertions(+), 189 deletions(-)
delete mode 100644 x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx
create mode 100644 x-pack/plugins/apm/public/components/shared/Links/apm/transaction_detail_link.tsx
delete mode 100644 x-pack/plugins/apm/public/hooks/use_latency_Aggregation_type.test.ts
delete mode 100644 x-pack/plugins/apm/public/hooks/use_latency_Aggregation_type.ts
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
index c0ce2ed388a1..57a6061cc6c9 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
@@ -24,7 +24,7 @@ import { APIReturnType } from '../../../../services/rest/createCallApmApi';
import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
import type { IUrlParams } from '../../../../context/url_params_context/types';
import { px, unit, units } from '../../../../style/variables';
-import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
+import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
import { DiscoverErrorLink } from '../../../shared/Links/DiscoverLinks/DiscoverErrorLink';
import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
import { ErrorMetadata } from '../../../shared/MetadataTable/ErrorMetadata';
diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx b/x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
index eebd03772f23..b216ab5498cf 100644
--- a/x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
+++ b/x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
@@ -17,7 +17,7 @@ import { EmptyMessage } from '../../shared/EmptyMessage';
import { ImpactBar } from '../../shared/ImpactBar';
import { ITableColumn, ManagedTable } from '../../shared/ManagedTable';
import { LoadingStatePrompt } from '../../shared/LoadingStatePrompt';
-import { TransactionDetailLink } from '../../shared/Links/apm/TransactionDetailLink';
+import { TransactionDetailLink } from '../../shared/Links/apm/transaction_detail_link';
import { APIReturnType } from '../../../services/rest/createCallApmApi';
type TraceGroup = APIReturnType<'GET /api/apm/traces'>['items'][0];
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx
index 9a40d7834d18..49a016f33888 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx
@@ -4,11 +4,12 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
import { EuiButton, EuiFlexItem, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
import { Transaction as ITransaction } from '../../../../../typings/es_schemas/ui/transaction';
-import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
+import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
export const MaybeViewTraceLink = ({
@@ -18,6 +19,9 @@ export const MaybeViewTraceLink = ({
transaction: ITransaction;
waterfall: IWaterfall;
}) => {
+ const {
+ urlParams: { latencyAggregationType },
+ } = useUrlParams();
const viewFullTraceButtonLabel = i18n.translate(
'xpack.apm.transactionDetails.viewFullTraceButtonLabel',
{
@@ -77,6 +81,7 @@ export const MaybeViewTraceLink = ({
traceId={rootTransaction.trace.id}
transactionName={rootTransaction.transaction.name}
transactionType={rootTransaction.transaction.type}
+ latencyAggregationType={latencyAggregationType}
>
{viewFullTraceButtonLabel}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
index 0568930f8157..a67ec0a69ed8 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
@@ -6,20 +6,25 @@
import { i18n } from '@kbn/i18n';
import React from 'react';
+import { useUrlParams } from '../../../../../../context/url_params_context/use_url_params';
import {
SERVICE_NAME,
TRANSACTION_NAME,
} from '../../../../../../../common/elasticsearch_fieldnames';
import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction';
-import { TransactionDetailLink } from '../../../../../shared/Links/apm/TransactionDetailLink';
-import { StickyProperties } from '../../../../../shared/StickyProperties';
import { ServiceOrTransactionsOverviewLink } from '../../../../../shared/Links/apm/service_transactions_overview_link';
+import { TransactionDetailLink } from '../../../../../shared/Links/apm/transaction_detail_link';
+import { StickyProperties } from '../../../../../shared/StickyProperties';
interface Props {
transaction?: Transaction;
}
export function FlyoutTopLevelProperties({ transaction }: Props) {
+ const {
+ urlParams: { latencyAggregationType },
+ } = useUrlParams();
+
if (!transaction) {
return null;
}
@@ -51,6 +56,7 @@ export function FlyoutTopLevelProperties({ transaction }: Props) {
traceId={transaction.trace.id}
transactionName={transaction.transaction.name}
transactionType={transaction.transaction.type}
+ latencyAggregationType={latencyAggregationType}
>
{transaction.transaction.name}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
index 6bcb9a764a35..5a1f6e3d2a24 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
@@ -6,17 +6,18 @@
import { i18n } from '@kbn/i18n';
import React from 'react';
-import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
+import { useUrlParams } from '../../../../../../../context/url_params_context/use_url_params';
import {
+ SERVICE_NAME,
SPAN_NAME,
TRANSACTION_NAME,
- SERVICE_NAME,
} from '../../../../../../../../common/elasticsearch_fieldnames';
import { NOT_AVAILABLE_LABEL } from '../../../../../../../../common/i18n';
import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
-import { StickyProperties } from '../../../../../../shared/StickyProperties';
+import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
import { ServiceOrTransactionsOverviewLink } from '../../../../../../shared/Links/apm/service_transactions_overview_link';
-import { TransactionDetailLink } from '../../../../../../shared/Links/apm/TransactionDetailLink';
+import { TransactionDetailLink } from '../../../../../../shared/Links/apm/transaction_detail_link';
+import { StickyProperties } from '../../../../../../shared/StickyProperties';
interface Props {
span: Span;
@@ -24,6 +25,9 @@ interface Props {
}
export function StickySpanProperties({ span, transaction }: Props) {
+ const {
+ urlParams: { latencyAggregationType },
+ } = useUrlParams();
const spanName = span.span.name;
const transactionStickyProperties = transaction
? [
@@ -56,6 +60,7 @@ export function StickySpanProperties({ span, transaction }: Props) {
traceId={transaction.trace.id}
transactionName={transaction.transaction.name}
transactionType={transaction.transaction.type}
+ latencyAggregationType={latencyAggregationType}
>
{transaction.transaction.name}
diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
index 958d25a88434..fe3cb541617a 100644
--- a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
@@ -11,6 +11,7 @@ import { isJavaAgentName, isRumAgentName } from '../../../../common/agent_name';
import { enableServiceOverview } from '../../../../common/ui_settings_keys';
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
+import { useUrlParams } from '../../../context/url_params_context/use_url_params';
import { useErrorOverviewHref } from '../../shared/Links/apm/ErrorOverviewLink';
import { useMetricOverviewHref } from '../../shared/Links/apm/MetricOverviewLink';
import { useServiceMapHref } from '../../shared/Links/apm/ServiceMapLink';
@@ -46,6 +47,9 @@ interface Props {
export function ServiceDetailTabs({ serviceName, tab }: Props) {
const { agentName } = useApmServiceContext();
const { uiSettings } = useApmPluginContext().core;
+ const {
+ urlParams: { latencyAggregationType },
+ } = useUrlParams();
const overviewTab = {
key: 'overview',
@@ -60,7 +64,7 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
const transactionsTab = {
key: 'transactions',
- href: useTransactionsOverviewHref(serviceName),
+ href: useTransactionsOverviewHref({ serviceName, latencyAggregationType }),
text: i18n.translate('xpack.apm.serviceDetails.transactionsTabLabel', {
defaultMessage: 'Transactions',
}),
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx
index c02f72245cdf..46c2a4c322c9 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx
@@ -23,6 +23,7 @@ import { ServiceOverview } from './';
import { waitFor } from '@testing-library/dom';
import * as callApmApiModule from '../../../services/rest/createCallApmApi';
import * as useApmServiceContextHooks from '../../../context/apm_service/use_apm_service_context';
+import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
const KibanaReactContext = createKibanaReactContext({
usageCollection: { reportUiCounter: () => {} },
@@ -45,7 +46,11 @@ function Wrapper({ children }: { children?: ReactNode }) {
{children}
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
index 7c90ea68d6f8..307997731e5e 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
@@ -23,7 +23,6 @@ import {
import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
-import { useLatencyAggregationType } from '../../../../hooks/use_latency_Aggregation_type';
import {
APIReturnType,
callApmApi,
@@ -31,7 +30,7 @@ import {
import { px, unit } from '../../../../style/variables';
import { SparkPlot } from '../../../shared/charts/spark_plot';
import { ImpactBar } from '../../../shared/ImpactBar';
-import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
+import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
import { TransactionOverviewLink } from '../../../shared/Links/apm/transaction_overview_link';
import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
@@ -54,10 +53,16 @@ const DEFAULT_SORT = {
field: 'impact' as const,
};
-function getLatencyAggregationTypeLabel(
- latencyAggregationType?: LatencyAggregationType
-) {
+function getLatencyAggregationTypeLabel(latencyAggregationType?: string) {
switch (latencyAggregationType) {
+ case 'avg': {
+ i18n.translate(
+ 'xpack.apm.serviceOverview.transactionsTableColumnLatency.avg',
+ {
+ defaultMessage: 'Latency (avg.)',
+ }
+ );
+ }
case 'p95': {
return i18n.translate(
'xpack.apm.serviceOverview.transactionsTableColumnLatency.p95',
@@ -74,24 +79,15 @@ function getLatencyAggregationTypeLabel(
}
);
}
- default: {
- return i18n.translate(
- 'xpack.apm.serviceOverview.transactionsTableColumnLatency.avg',
- {
- defaultMessage: 'Latency (avg.)',
- }
- );
- }
}
}
export function ServiceOverviewTransactionsTable(props: Props) {
const { serviceName } = props;
const { transactionType } = useApmServiceContext();
- const latencyAggregationType = useLatencyAggregationType();
const {
uiFilters,
- urlParams: { start, end },
+ urlParams: { start, end, latencyAggregationType },
} = useUrlParams();
const [tableOptions, setTableOptions] = useState<{
@@ -135,7 +131,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
sortField: tableOptions.sort.field,
sortDirection: tableOptions.sort.direction,
transactionType,
- latencyAggregationType,
+ latencyAggregationType: latencyAggregationType as LatencyAggregationType,
},
},
}).then((response) => {
@@ -187,6 +183,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
serviceName={serviceName}
transactionName={name}
transactionType={type}
+ latencyAggregationType={latencyAggregationType}
>
{name}
@@ -282,7 +279,10 @@ export function ServiceOverviewTransactionsTable(props: Props) {
-
+
{i18n.translate(
'xpack.apm.serviceOverview.transactionsTableLinkText',
{
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx
index ade0a0563b0d..1699b7e7474f 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx
@@ -8,6 +8,7 @@ import { EuiToolTip, EuiIconTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useMemo } from 'react';
import styled from 'styled-components';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
import { APIReturnType } from '../../../../services/rest/createCallApmApi';
import {
asMillisecondDuration,
@@ -18,7 +19,7 @@ import { ImpactBar } from '../../../shared/ImpactBar';
import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
import { EmptyMessage } from '../../../shared/EmptyMessage';
-import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
+import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
type TransactionGroup = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups'>['items'][0];
@@ -40,6 +41,9 @@ interface Props {
}
export function TransactionList({ items, isLoading }: Props) {
+ const {
+ urlParams: { latencyAggregationType },
+ } = useUrlParams();
const columns: Array> = useMemo(
() => [
{
@@ -58,6 +62,7 @@ export function TransactionList({ items, isLoading }: Props) {
serviceName={serviceName}
transactionName={transactionName}
transactionType={transactionType}
+ latencyAggregationType={latencyAggregationType}
>
,
},
],
- []
+ [latencyAggregationType]
);
const noItemsMessage = (
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx
deleted file mode 100644
index ee798e0208c2..000000000000
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx
+++ /dev/null
@@ -1,49 +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 from 'react';
-import { APMLink, APMLinkExtendProps } from './APMLink';
-import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
-import { pickKeys } from '../../../../../common/utils/pick_keys';
-
-interface Props extends APMLinkExtendProps {
- serviceName: string;
- traceId?: string;
- transactionId?: string;
- transactionName: string;
- transactionType: string;
-}
-
-export function TransactionDetailLink({
- serviceName,
- traceId,
- transactionId,
- transactionName,
- transactionType,
- ...rest
-}: Props) {
- const { urlParams } = useUrlParams();
-
- const persistedFilters = pickKeys(
- urlParams,
- 'transactionResult',
- 'serviceVersion'
- );
-
- return (
-
- );
-}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_detail_link.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_detail_link.tsx
new file mode 100644
index 000000000000..8108dcf41321
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_detail_link.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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 from 'react';
+import { useLocation } from 'react-router-dom';
+import { EuiLink } from '@elastic/eui';
+import { getAPMHref, APMLinkExtendProps } from './APMLink';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { pickKeys } from '../../../../../common/utils/pick_keys';
+import { APMQueryParams } from '../url_helpers';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+
+interface Props extends APMLinkExtendProps {
+ serviceName: string;
+ traceId?: string;
+ transactionId?: string;
+ transactionName: string;
+ transactionType: string;
+ latencyAggregationType?: string;
+}
+
+const persistedFilters: Array = [
+ 'transactionResult',
+ 'serviceVersion',
+];
+
+export function TransactionDetailLink({
+ serviceName,
+ traceId,
+ transactionId,
+ transactionName,
+ transactionType,
+ latencyAggregationType,
+ ...rest
+}: Props) {
+ const { urlParams } = useUrlParams();
+ const { core } = useApmPluginContext();
+ const location = useLocation();
+ const href = getAPMHref({
+ basePath: core.http.basePath,
+ path: `/services/${serviceName}/transactions/view`,
+ query: {
+ traceId,
+ transactionId,
+ transactionName,
+ transactionType,
+ ...(latencyAggregationType ? { latencyAggregationType } : {}),
+ ...pickKeys(urlParams as APMQueryParams, ...persistedFilters),
+ },
+ search: location.search,
+ });
+
+ return ;
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_link.test.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_link.test.tsx
index 3ab6feaf5ae1..5ca94884462d 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_link.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_link.test.tsx
@@ -17,13 +17,11 @@ import {
const history = createMemoryHistory();
-function wrapper({ queryParams }: { queryParams?: Record }) {
- return ({ children }: { children: React.ReactElement }) => (
+function Wrapper({ children }: { children: React.ReactElement }) {
+ return (
-
- {children}
-
+ {children}
);
@@ -32,18 +30,24 @@ function wrapper({ queryParams }: { queryParams?: Record }) {
describe('Transactions overview link', () => {
describe('useTransactionsOverviewHref', () => {
it('returns transaction link', () => {
- const { result } = renderHook(() => useTransactionsOverviewHref('foo'), {
- wrapper: wrapper({}),
- });
+ const { result } = renderHook(
+ () => useTransactionsOverviewHref({ serviceName: 'foo' }),
+ { wrapper: Wrapper }
+ );
expect(result.current).toEqual(
'/basepath/app/apm/services/foo/transactions'
);
});
it('returns transaction link with persisted query items', () => {
- const { result } = renderHook(() => useTransactionsOverviewHref('foo'), {
- wrapper: wrapper({ queryParams: { latencyAggregationType: 'avg' } }),
- });
+ const { result } = renderHook(
+ () =>
+ useTransactionsOverviewHref({
+ serviceName: 'foo',
+ latencyAggregationType: 'avg',
+ }),
+ { wrapper: Wrapper }
+ );
expect(result.current).toEqual(
'/basepath/app/apm/services/foo/transactions?latencyAggregationType=avg'
);
@@ -55,13 +59,12 @@ describe('Transactions overview link', () => {
.href;
}
it('returns transaction link', () => {
- const Component = wrapper({});
const { container } = render(
-
+
Service name
-
+
);
expect(getHref(container)).toEqual(
'http://localhost/basepath/app/apm/services/foo/transactions'
@@ -69,15 +72,15 @@ describe('Transactions overview link', () => {
});
it('returns transaction link with persisted query items', () => {
- const Component = wrapper({
- queryParams: { latencyAggregationType: 'avg' },
- });
const { container } = render(
-
-
+
+
Service name
-
+
);
expect(getHref(container)).toEqual(
'http://localhost/basepath/app/apm/services/foo/transactions?latencyAggregationType=avg'
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_link.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_link.tsx
index cd6d70b2e2e6..dd53c5ab1526 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_link.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_link.tsx
@@ -6,22 +6,42 @@
import { EuiLink } from '@elastic/eui';
import React from 'react';
-import { APMQueryParams } from '../url_helpers';
-import { APMLinkExtendProps, useAPMHref } from './APMLink';
+import { useLocation } from 'react-router-dom';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { APMLinkExtendProps, getAPMHref } from './APMLink';
interface Props extends APMLinkExtendProps {
serviceName: string;
+ latencyAggregationType?: string;
}
-const persistedFilters: Array = [
- 'latencyAggregationType',
-];
+export function useTransactionsOverviewHref({
+ serviceName,
+ latencyAggregationType,
+}: {
+ serviceName: string;
+ latencyAggregationType?: string;
+}) {
+ const { core } = useApmPluginContext();
+ const location = useLocation();
+ const { search } = location;
-export function useTransactionsOverviewHref(serviceName: string) {
- return useAPMHref(`/services/${serviceName}/transactions`, persistedFilters);
+ return getAPMHref({
+ basePath: core.http.basePath,
+ path: `/services/${serviceName}/transactions`,
+ query: { ...(latencyAggregationType ? { latencyAggregationType } : {}) },
+ search,
+ });
}
-export function TransactionOverviewLink({ serviceName, ...rest }: Props) {
- const href = useTransactionsOverviewHref(serviceName);
+export function TransactionOverviewLink({
+ serviceName,
+ latencyAggregationType,
+ ...rest
+}: Props) {
+ const href = useTransactionsOverviewHref({
+ serviceName,
+ latencyAggregationType,
+ });
return ;
}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts b/x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts
index aa3881b81cc3..8576d9ee8635 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts
+++ b/x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts
@@ -6,7 +6,6 @@
import { History } from 'history';
import { parse, stringify } from 'query-string';
-import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
import { url } from '../../../../../../../src/plugins/kibana_utils/public';
import { LocalUIFilterName } from '../../../../common/ui_filter';
@@ -85,7 +84,7 @@ export type APMQueryParams = {
refreshInterval?: string | number;
searchTerm?: string;
percentile?: 50 | 75 | 90 | 95 | 99;
- latencyAggregationType?: LatencyAggregationType;
+ latencyAggregationType?: string;
} & { [key in LocalUIFilterName]?: string };
// forces every value of T[K] to be type: string
diff --git a/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts b/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts
index ee0ea7f601f6..6d9f982f9275 100644
--- a/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts
+++ b/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts
@@ -5,6 +5,7 @@
*/
import { Location } from 'history';
+import { LatencyAggregationType } from '../../../common/latency_aggregation_types';
import { pickKeys } from '../../../common/utils/pick_keys';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { localUIFilterNames } from '../../../server/lib/ui_filters/local_ui_filters/config';
@@ -48,7 +49,7 @@ export function resolveUrlParams(location: Location, state: TimeUrlParams) {
environment,
searchTerm,
percentile,
- latencyAggregationType,
+ latencyAggregationType = LatencyAggregationType.avg,
} = query;
const localUIFilters = pickKeys(query, ...localUIFilterNames);
diff --git a/x-pack/plugins/apm/public/hooks/use_latency_Aggregation_type.test.ts b/x-pack/plugins/apm/public/hooks/use_latency_Aggregation_type.test.ts
deleted file mode 100644
index 901877ca6746..000000000000
--- a/x-pack/plugins/apm/public/hooks/use_latency_Aggregation_type.test.ts
+++ /dev/null
@@ -1,46 +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 { LatencyAggregationType } from '../../common/latency_aggregation_types';
-import { UIFilters } from '../../typings/ui_filters';
-import { IUrlParams } from '../context/url_params_context/types';
-import * as urlParams from '../context/url_params_context/use_url_params';
-import { useLatencyAggregationType } from './use_latency_Aggregation_type';
-
-describe('useLatencyAggregationType', () => {
- afterAll(() => {
- jest.clearAllMocks();
- });
- it('returns avg when no value was given', () => {
- jest.spyOn(urlParams, 'useUrlParams').mockReturnValue({
- urlParams: { latencyAggregationType: undefined } as IUrlParams,
- refreshTimeRange: jest.fn(),
- uiFilters: {} as UIFilters,
- });
- const latencyAggregationType = useLatencyAggregationType();
- expect(latencyAggregationType).toEqual(LatencyAggregationType.avg);
- });
-
- it('returns avg when no value does not match any of the availabe options', () => {
- jest.spyOn(urlParams, 'useUrlParams').mockReturnValue({
- urlParams: { latencyAggregationType: 'invalid_type' } as IUrlParams,
- refreshTimeRange: jest.fn(),
- uiFilters: {} as UIFilters,
- });
- const latencyAggregationType = useLatencyAggregationType();
- expect(latencyAggregationType).toEqual(LatencyAggregationType.avg);
- });
-
- it('returns the value in the url', () => {
- jest.spyOn(urlParams, 'useUrlParams').mockReturnValue({
- urlParams: { latencyAggregationType: 'p95' } as IUrlParams,
- refreshTimeRange: jest.fn(),
- uiFilters: {} as UIFilters,
- });
- const latencyAggregationType = useLatencyAggregationType();
- expect(latencyAggregationType).toEqual(LatencyAggregationType.p95);
- });
-});
diff --git a/x-pack/plugins/apm/public/hooks/use_latency_Aggregation_type.ts b/x-pack/plugins/apm/public/hooks/use_latency_Aggregation_type.ts
deleted file mode 100644
index 72d07c9e4c22..000000000000
--- a/x-pack/plugins/apm/public/hooks/use_latency_Aggregation_type.ts
+++ /dev/null
@@ -1,24 +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 { LatencyAggregationType } from '../../common/latency_aggregation_types';
-import { useUrlParams } from '../context/url_params_context/use_url_params';
-
-export function useLatencyAggregationType(): LatencyAggregationType {
- const {
- urlParams: { latencyAggregationType },
- } = useUrlParams();
-
- if (!latencyAggregationType) {
- return LatencyAggregationType.avg;
- }
-
- if (latencyAggregationType in LatencyAggregationType) {
- return latencyAggregationType as LatencyAggregationType;
- }
-
- return LatencyAggregationType.avg;
-}
diff --git a/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts b/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
index 7b1e7b06ac28..de3e68620b6e 100644
--- a/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
+++ b/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
@@ -11,15 +11,14 @@ import { useUrlParams } from '../context/url_params_context/use_url_params';
import { useApmServiceContext } from '../context/apm_service/use_apm_service_context';
import { getLatencyChartSelector } from '../selectors/latency_chart_selectors';
import { useTheme } from './use_theme';
-import { useLatencyAggregationType } from './use_latency_Aggregation_type';
+import { LatencyAggregationType } from '../../common/latency_aggregation_types';
export function useTransactionLatencyChartsFetcher() {
const { serviceName } = useParams<{ serviceName?: string }>();
const { transactionType } = useApmServiceContext();
- const latencyAggregationType = useLatencyAggregationType();
const theme = useTheme();
const {
- urlParams: { start, end, transactionName },
+ urlParams: { start, end, transactionName, latencyAggregationType },
uiFilters,
} = useUrlParams();
@@ -43,7 +42,7 @@ export function useTransactionLatencyChartsFetcher() {
transactionType,
transactionName,
uiFilters: JSON.stringify(uiFilters),
- latencyAggregationType,
+ latencyAggregationType: latencyAggregationType as LatencyAggregationType,
},
},
});
diff --git a/x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts b/x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts
index dee92bbffd27..a5c25cfa3e07 100644
--- a/x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts
+++ b/x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts
@@ -6,7 +6,6 @@
import { i18n } from '@kbn/i18n';
import { rgba } from 'polished';
import { EuiTheme } from '../../../observability/public';
-import { LatencyAggregationType } from '../../common/latency_aggregation_types';
import { asDuration } from '../../common/utils/formatters';
import {
Coordinate,
@@ -33,7 +32,7 @@ export function getLatencyChartSelector({
}: {
latencyChart?: LatencyChartsResponse;
theme: EuiTheme;
- latencyAggregationType?: LatencyAggregationType;
+ latencyAggregationType?: string;
}): LatencyChart {
if (!latencyChart?.latencyTimeseries || !latencyAggregationType) {
return {
@@ -63,7 +62,7 @@ function getLatencyTimeseries({
}: {
latencyChart: LatencyChartsResponse;
theme: EuiTheme;
- latencyAggregationType: LatencyAggregationType;
+ latencyAggregationType: string;
}) {
const { overallAvgDuration } = latencyChart;
const { latencyTimeseries } = latencyChart;