Skip to content

Commit 2a4d39a

Browse files
dgieselaarkibanamachine
dgieselaar
and
kibanamachine
authored
[APM] Abort browser requests when appropriate (#89557)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
1 parent f3d7d37 commit 2a4d39a

File tree

36 files changed

+512
-424
lines changed

36 files changed

+512
-424
lines changed

‎x-pack/plugins/apm/public/application/action_menu/anomaly_detection_setup_link.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ export function AnomalyDetectionSetupLink() {
5757
export function MissingJobsAlert({ environment }: { environment?: string }) {
5858
const { data = DEFAULT_DATA, status } = useFetcher(
5959
(callApmApi) =>
60-
callApmApi({ endpoint: `GET /api/apm/settings/anomaly-detection/jobs` }),
60+
callApmApi({
61+
endpoint: `GET /api/apm/settings/anomaly-detection/jobs`,
62+
}),
6163
[],
6264
{ preservePreviousData: false, showToastOnError: false }
6365
);

‎x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { asInteger } from '../../../../common/utils/formatters';
1313
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
1414
import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
1515
import { useFetcher } from '../../../hooks/use_fetcher';
16-
import { callApmApi } from '../../../services/rest/createCallApmApi';
1716
import { ChartPreview } from '../chart_preview';
1817
import { EnvironmentField, IsAboveField, ServiceField } from '../fields';
1918
import { getAbsoluteTimeRange } from '../helper';
@@ -46,20 +45,23 @@ export function ErrorCountAlertTrigger(props: Props) {
4645

4746
const { threshold, windowSize, windowUnit, environment } = alertParams;
4847

49-
const { data } = useFetcher(() => {
50-
if (windowSize && windowUnit) {
51-
return callApmApi({
52-
endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_count',
53-
params: {
54-
query: {
55-
...getAbsoluteTimeRange(windowSize, windowUnit),
56-
environment,
57-
serviceName,
48+
const { data } = useFetcher(
49+
(callApmApi) => {
50+
if (windowSize && windowUnit) {
51+
return callApmApi({
52+
endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_count',
53+
params: {
54+
query: {
55+
...getAbsoluteTimeRange(windowSize, windowUnit),
56+
environment,
57+
serviceName,
58+
},
5859
},
59-
},
60-
});
61-
}
62-
}, [windowSize, windowUnit, environment, serviceName]);
60+
});
61+
}
62+
},
63+
[windowSize, windowUnit, environment, serviceName]
64+
);
6365

6466
const defaults = {
6567
threshold: 25,

‎x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ import { i18n } from '@kbn/i18n';
88
import { map } from 'lodash';
99
import React from 'react';
1010
import { useParams } from 'react-router-dom';
11-
import { useFetcher } from '../../../../../observability/public';
1211
import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
1312
import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
1413
import { getDurationFormatter } from '../../../../common/utils/formatters';
1514
import { TimeSeries } from '../../../../typings/timeseries';
1615
import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
1716
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
1817
import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
19-
import { callApmApi } from '../../../services/rest/createCallApmApi';
18+
import { useFetcher } from '../../../hooks/use_fetcher';
2019
import {
2120
getMaxY,
2221
getResponseTimeTickFormatter,
@@ -88,29 +87,32 @@ export function TransactionDurationAlertTrigger(props: Props) {
8887
windowUnit,
8988
} = alertParams;
9089

91-
const { data } = useFetcher(() => {
92-
if (windowSize && windowUnit) {
93-
return callApmApi({
94-
endpoint: 'GET /api/apm/alerts/chart_preview/transaction_duration',
95-
params: {
96-
query: {
97-
...getAbsoluteTimeRange(windowSize, windowUnit),
98-
aggregationType,
99-
environment,
100-
serviceName,
101-
transactionType: alertParams.transactionType,
90+
const { data } = useFetcher(
91+
(callApmApi) => {
92+
if (windowSize && windowUnit) {
93+
return callApmApi({
94+
endpoint: 'GET /api/apm/alerts/chart_preview/transaction_duration',
95+
params: {
96+
query: {
97+
...getAbsoluteTimeRange(windowSize, windowUnit),
98+
aggregationType,
99+
environment,
100+
serviceName,
101+
transactionType: alertParams.transactionType,
102+
},
102103
},
103-
},
104-
});
105-
}
106-
}, [
107-
aggregationType,
108-
environment,
109-
serviceName,
110-
alertParams.transactionType,
111-
windowSize,
112-
windowUnit,
113-
]);
104+
});
105+
}
106+
},
107+
[
108+
aggregationType,
109+
environment,
110+
serviceName,
111+
alertParams.transactionType,
112+
windowSize,
113+
windowUnit,
114+
]
115+
);
114116

115117
const maxY = getMaxY([
116118
{ data: data ?? [] } as TimeSeries<{ x: number; y: number | null }>,

‎x-pack/plugins/apm/public/components/alerting/transaction_error_rate_alert_trigger/index.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { useApmServiceContext } from '../../../context/apm_service/use_apm_servi
1212
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
1313
import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
1414
import { useFetcher } from '../../../hooks/use_fetcher';
15-
import { callApmApi } from '../../../services/rest/createCallApmApi';
1615
import { ChartPreview } from '../chart_preview';
1716
import {
1817
EnvironmentField,
@@ -54,27 +53,30 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
5453

5554
const thresholdAsPercent = (threshold ?? 0) / 100;
5655

57-
const { data } = useFetcher(() => {
58-
if (windowSize && windowUnit) {
59-
return callApmApi({
60-
endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_rate',
61-
params: {
62-
query: {
63-
...getAbsoluteTimeRange(windowSize, windowUnit),
64-
environment,
65-
serviceName,
66-
transactionType: alertParams.transactionType,
56+
const { data } = useFetcher(
57+
(callApmApi) => {
58+
if (windowSize && windowUnit) {
59+
return callApmApi({
60+
endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_rate',
61+
params: {
62+
query: {
63+
...getAbsoluteTimeRange(windowSize, windowUnit),
64+
environment,
65+
serviceName,
66+
transactionType: alertParams.transactionType,
67+
},
6768
},
68-
},
69-
});
70-
}
71-
}, [
72-
alertParams.transactionType,
73-
environment,
74-
serviceName,
75-
windowSize,
76-
windowUnit,
77-
]);
69+
});
70+
}
71+
},
72+
[
73+
alertParams.transactionType,
74+
environment,
75+
serviceName,
76+
windowSize,
77+
windowUnit,
78+
]
79+
);
7880

7981
if (serviceName && !transactionTypes.length) {
8082
return null;

‎x-pack/plugins/apm/public/components/app/Correlations/ErrorCorrelations.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,7 @@ import {
2525
} from '@elastic/eui';
2626
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
2727
import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
28-
import {
29-
APIReturnType,
30-
callApmApi,
31-
} from '../../../services/rest/createCallApmApi';
28+
import { APIReturnType } from '../../../services/rest/createCallApmApi';
3229
import { px } from '../../../style/variables';
3330
import { SignificantTermsTable } from './SignificantTermsTable';
3431
import { ChartContainer } from '../../shared/charts/chart_container';
@@ -65,32 +62,35 @@ export function ErrorCorrelations() {
6562
const { urlParams, uiFilters } = useUrlParams();
6663
const { transactionName, transactionType, start, end } = urlParams;
6764

68-
const { data, status } = useFetcher(() => {
69-
if (start && end) {
70-
return callApmApi({
71-
endpoint: 'GET /api/apm/correlations/failed_transactions',
72-
params: {
73-
query: {
74-
serviceName,
75-
transactionName,
76-
transactionType,
77-
start,
78-
end,
79-
uiFilters: JSON.stringify(uiFilters),
80-
fieldNames: fieldNames.map((field) => field.label).join(','),
65+
const { data, status } = useFetcher(
66+
(callApmApi) => {
67+
if (start && end) {
68+
return callApmApi({
69+
endpoint: 'GET /api/apm/correlations/failed_transactions',
70+
params: {
71+
query: {
72+
serviceName,
73+
transactionName,
74+
transactionType,
75+
start,
76+
end,
77+
uiFilters: JSON.stringify(uiFilters),
78+
fieldNames: fieldNames.map((field) => field.label).join(','),
79+
},
8180
},
82-
},
83-
});
84-
}
85-
}, [
86-
serviceName,
87-
start,
88-
end,
89-
transactionName,
90-
transactionType,
91-
uiFilters,
92-
fieldNames,
93-
]);
81+
});
82+
}
83+
},
84+
[
85+
serviceName,
86+
start,
87+
end,
88+
transactionName,
89+
transactionType,
90+
uiFilters,
91+
fieldNames,
92+
]
93+
);
9494

9595
return (
9696
<>

‎x-pack/plugins/apm/public/components/app/Correlations/LatencyCorrelations.tsx‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,7 @@ import {
2626
import { getDurationFormatter } from '../../../../common/utils/formatters';
2727
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
2828
import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
29-
import {
30-
APIReturnType,
31-
callApmApi,
32-
} from '../../../services/rest/createCallApmApi';
29+
import { APIReturnType } from '../../../services/rest/createCallApmApi';
3330
import { SignificantTermsTable } from './SignificantTermsTable';
3431
import { ChartContainer } from '../../shared/charts/chart_container';
3532

@@ -65,34 +62,37 @@ export function LatencyCorrelations() {
6562
const { urlParams, uiFilters } = useUrlParams();
6663
const { transactionName, transactionType, start, end } = urlParams;
6764

68-
const { data, status } = useFetcher(() => {
69-
if (start && end) {
70-
return callApmApi({
71-
endpoint: 'GET /api/apm/correlations/slow_transactions',
72-
params: {
73-
query: {
74-
serviceName,
75-
transactionName,
76-
transactionType,
77-
start,
78-
end,
79-
uiFilters: JSON.stringify(uiFilters),
80-
durationPercentile,
81-
fieldNames: fieldNames.map((field) => field.label).join(','),
65+
const { data, status } = useFetcher(
66+
(callApmApi) => {
67+
if (start && end) {
68+
return callApmApi({
69+
endpoint: 'GET /api/apm/correlations/slow_transactions',
70+
params: {
71+
query: {
72+
serviceName,
73+
transactionName,
74+
transactionType,
75+
start,
76+
end,
77+
uiFilters: JSON.stringify(uiFilters),
78+
durationPercentile,
79+
fieldNames: fieldNames.map((field) => field.label).join(','),
80+
},
8281
},
83-
},
84-
});
85-
}
86-
}, [
87-
serviceName,
88-
start,
89-
end,
90-
transactionName,
91-
transactionType,
92-
uiFilters,
93-
durationPercentile,
94-
fieldNames,
95-
]);
82+
});
83+
}
84+
},
85+
[
86+
serviceName,
87+
start,
88+
end,
89+
transactionName,
90+
transactionType,
91+
uiFilters,
92+
durationPercentile,
93+
fieldNames,
94+
]
95+
);
9696

9797
return (
9898
<>

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

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import { useTrackPageview } from '../../../../../observability/public';
2323
import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
2424
import { useFetcher } from '../../../hooks/use_fetcher';
2525
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
26-
import { callApmApi } from '../../../services/rest/createCallApmApi';
2726
import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
2827
import { ApmHeader } from '../../shared/ApmHeader';
2928
import { SearchBar } from '../../shared/search_bar';
@@ -70,24 +69,27 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
7069
const { urlParams, uiFilters } = useUrlParams();
7170
const { start, end } = urlParams;
7271

73-
const { data: errorGroupData } = useFetcher(() => {
74-
if (start && end) {
75-
return callApmApi({
76-
endpoint: 'GET /api/apm/services/{serviceName}/errors/{groupId}',
77-
params: {
78-
path: {
79-
serviceName,
80-
groupId,
72+
const { data: errorGroupData } = useFetcher(
73+
(callApmApi) => {
74+
if (start && end) {
75+
return callApmApi({
76+
endpoint: 'GET /api/apm/services/{serviceName}/errors/{groupId}',
77+
params: {
78+
path: {
79+
serviceName,
80+
groupId,
81+
},
82+
query: {
83+
start,
84+
end,
85+
uiFilters: JSON.stringify(uiFilters),
86+
},
8187
},
82-
query: {
83-
start,
84-
end,
85-
uiFilters: JSON.stringify(uiFilters),
86-
},
87-
},
88-
});
89-
}
90-
}, [serviceName, start, end, groupId, uiFilters]);
88+
});
89+
}
90+
},
91+
[serviceName, start, end, groupId, uiFilters]
92+
);
9193

9294
const { errorDistributionData } = useErrorGroupDistributionFetcher({
9395
serviceName,

0 commit comments

Comments
 (0)