Skip to content

Commit b998fca

Browse files
dgieselaardgieselaar
committed
Remove usage of react-router's useParams
1 parent d63b95e commit b998fca

9 files changed

Lines changed: 28 additions & 20 deletions

File tree

‎x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import {
1818
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
1919
import { i18n } from '@kbn/i18n';
2020
import React, { useState } from 'react';
21-
import { useParams } from 'react-router-dom';
2221
import { useUiTracker } from '../../../../../observability/public';
22+
import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
2323
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
2424
import { useLocalStorage } from '../../../hooks/useLocalStorage';
2525
import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
@@ -51,7 +51,7 @@ export function ErrorCorrelations({ onClose }: Props) {
5151
setSelectedSignificantTerm,
5252
] = useState<SelectedSignificantTerm | null>(null);
5353

54-
const { serviceName } = useParams<{ serviceName?: string }>();
54+
const { serviceName } = useApmServiceContext();
5555
const { urlParams } = useUrlParams();
5656
const {
5757
environment,

‎x-pack/plugins/apm/public/components/app/correlations/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
EuiBetaBadge,
2424
} from '@elastic/eui';
2525
import { i18n } from '@kbn/i18n';
26-
import { useHistory, useParams } from 'react-router-dom';
26+
import { useHistory } from 'react-router-dom';
2727
import { MlLatencyCorrelations } from './ml_latency_correlations';
2828
import { ErrorCorrelations } from './error_correlations';
2929
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
@@ -49,6 +49,7 @@ import {
4949
SERVICE_NAME,
5050
TRANSACTION_NAME,
5151
} from '../../../../common/elasticsearch_fieldnames';
52+
import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
5253

5354
const errorRateTab = {
5455
key: 'errorRate',
@@ -70,7 +71,7 @@ export function Correlations() {
7071
const license = useLicenseContext();
7172
const hasActivePlatinumLicense = isActivePlatinumLicense(license);
7273
const { urlParams } = useUrlParams();
73-
const { serviceName } = useParams<{ serviceName: string }>();
74+
const { serviceName } = useApmServiceContext();
7475

7576
const history = useHistory();
7677
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);

‎x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
Settings,
1515
} from '@elastic/charts';
1616
import React, { useState } from 'react';
17-
import { useParams } from 'react-router-dom';
1817
import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
1918
import { i18n } from '@kbn/i18n';
2019
import { getDurationFormatter } from '../../../../common/utils/formatters';
@@ -31,6 +30,7 @@ import { CustomFields, PercentileOption } from './custom_fields';
3130
import { useFieldNames } from './use_field_names';
3231
import { useLocalStorage } from '../../../hooks/useLocalStorage';
3332
import { useUiTracker } from '../../../../../observability/public';
33+
import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
3434

3535
type OverallLatencyApiResponse = NonNullable<
3636
APIReturnType<'GET /api/apm/correlations/latency/overall_distribution'>
@@ -50,7 +50,7 @@ export function LatencyCorrelations({ onClose }: Props) {
5050
setSelectedSignificantTerm,
5151
] = useState<SelectedSignificantTerm | null>(null);
5252

53-
const { serviceName } = useParams<{ serviceName?: string }>();
53+
const { serviceName } = useApmServiceContext();
5454
const { urlParams } = useUrlParams();
5555
const {
5656
environment,

‎x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import React, { useEffect, useMemo, useState } from 'react';
9-
import { useHistory, useParams } from 'react-router-dom';
9+
import { useHistory } from 'react-router-dom';
1010
import {
1111
EuiIcon,
1212
EuiBasicTableColumn,
@@ -36,6 +36,7 @@ import { useCorrelations } from './use_correlations';
3636
import { push } from '../../shared/Links/url_helpers';
3737
import { useUiTracker } from '../../../../../observability/public';
3838
import { asPreciseDecimal } from '../../../../common/utils/formatters';
39+
import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
3940

4041
const DEFAULT_PERCENTILE_THRESHOLD = 95;
4142
const isErrorMessage = (arg: unknown): arg is Error => {
@@ -59,7 +60,7 @@ export function MlLatencyCorrelations({ onClose }: Props) {
5960
core: { notifications },
6061
} = useApmPluginContext();
6162

62-
const { serviceName } = useParams<{ serviceName: string }>();
63+
const { serviceName } = useApmServiceContext();
6364
const { urlParams } = useUrlParams();
6465

6566
const fetchOptions = useMemo(

‎x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,9 @@ describe('ServiceOverview', () => {
137137
average: null,
138138
},
139139
},
140+
'GET /api/apm/services/{serviceName}/annotation/search': {
141+
annotations: [],
142+
},
140143
};
141144
/* eslint-enable @typescript-eslint/naming-convention */
142145

‎x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77

88
import React from 'react';
99
import { keyBy } from 'lodash';
10-
import { useParams } from 'react-router-dom';
1110
import { IUrlParams } from '../../../../../context/url_params_context/types';
1211
import {
1312
IWaterfall,
1413
WaterfallLegendType,
1514
} from './Waterfall/waterfall_helpers/waterfall_helpers';
1615
import { Waterfall } from './Waterfall';
1716
import { WaterfallLegends } from './WaterfallLegends';
17+
import { useApmServiceContext } from '../../../../../context/apm_service/use_apm_service_context';
1818

1919
interface Props {
2020
urlParams: IUrlParams;
@@ -27,7 +27,7 @@ export function WaterfallContainer({
2727
waterfall,
2828
exceedsMax,
2929
}: Props) {
30-
const { serviceName } = useParams<{ serviceName: string }>();
30+
const { serviceName } = useApmServiceContext();
3131

3232
if (!waterfall) {
3333
return null;

‎x-pack/plugins/apm/public/components/shared/charts/transaction_charts/ml_header.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { EuiFlexItem, EuiIconTip, EuiText } from '@elastic/eui';
99
import { i18n } from '@kbn/i18n';
1010
import { isEmpty } from 'lodash';
1111
import React from 'react';
12-
import { useParams } from 'react-router-dom';
1312
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
1413
import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
1514
import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
@@ -33,9 +32,8 @@ const ShiftedEuiText = euiStyled(EuiText)`
3332
`;
3433

3534
export function MLHeader({ hasValidMlLicense, mlJobId }: Props) {
36-
const { serviceName } = useParams<{ serviceName?: string }>();
3735
const { urlParams } = useUrlParams();
38-
const { transactionType } = useApmServiceContext();
36+
const { transactionType, serviceName } = useApmServiceContext();
3937

4038
if (!hasValidMlLicense || !mlJobId) {
4139
return null;

‎x-pack/plugins/apm/public/components/shared/kuery_bar/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@
88
import { i18n } from '@kbn/i18n';
99
import { startsWith, uniqueId } from 'lodash';
1010
import React, { useState } from 'react';
11-
import { useHistory, useLocation, useParams } from 'react-router-dom';
11+
import { useHistory, useLocation } from 'react-router-dom';
1212
import {
1313
esKuery,
1414
IIndexPattern,
1515
QuerySuggestion,
1616
} from '../../../../../../../src/plugins/data/public';
1717
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
1818
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
19+
import { useApmParams } from '../../../hooks/use_apm_params';
1920
import { useDynamicIndexPatternFetcher } from '../../../hooks/use_dynamic_index_pattern';
2021
import { fromQuery, toQuery } from '../Links/url_helpers';
2122
import { getBoolFilter } from './get_bool_filter';
@@ -34,10 +35,11 @@ function convertKueryToEsQuery(kuery: string, indexPattern: IIndexPattern) {
3435
}
3536

3637
export function KueryBar(props: { prepend?: React.ReactNode | string }) {
37-
const { groupId, serviceName } = useParams<{
38-
groupId?: string;
39-
serviceName?: string;
40-
}>();
38+
const { path } = useApmParams('/*');
39+
40+
const serviceName = 'serviceName' in path ? path.serviceName : undefined;
41+
const groupId = 'groupId' in path ? path.groupId : undefined;
42+
4143
const history = useHistory();
4244
const [state, setState] = useState<State>({
4345
suggestions: [],

‎x-pack/plugins/apm/public/context/annotations/annotations_context.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
*/
77

88
import React, { createContext } from 'react';
9-
import { useParams } from 'react-router-dom';
109
import { Annotation } from '../../../common/annotations';
10+
import { useApmParams } from '../../hooks/use_apm_params';
1111
import { useFetcher } from '../../hooks/use_fetcher';
1212
import { useUrlParams } from '../url_params_context/use_url_params';
1313

@@ -22,7 +22,10 @@ export function AnnotationsContextProvider({
2222
}: {
2323
children: React.ReactNode;
2424
}) {
25-
const { serviceName } = useParams<{ serviceName?: string }>();
25+
const { path } = useApmParams('/*');
26+
27+
const serviceName = 'serviceName' in path ? path.serviceName : undefined;
28+
2629
const {
2730
urlParams: { environment, start, end },
2831
} = useUrlParams();

0 commit comments

Comments
 (0)