[APM] Abort browser requests when appropriate

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

@@ -57,7 +57,9 @@ export function AnomalyDetectionSetupLink() {
 export function MissingJobsAlert({ environment }: { environment?: string }) {
   const { data = DEFAULT_DATA, status } = useFetcher(
     (callApmApi) =>
-      callApmApi({ endpoint: `GET /api/apm/settings/anomaly-detection/jobs` }),
+      callApmApi({
+        endpoint: `GET /api/apm/settings/anomaly-detection/jobs`,
+      }),
     [],
     { preservePreviousData: false, showToastOnError: false }
   );

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

@@ -13,7 +13,6 @@ import { asInteger } from '../../../../common/utils/formatters';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { ChartPreview } from '../chart_preview';
 import { EnvironmentField, IsAboveField, ServiceField } from '../fields';
 import { getAbsoluteTimeRange } from '../helper';
@@ -46,20 +45,23 @@ export function ErrorCountAlertTrigger(props: Props) {
 
   const { threshold, windowSize, windowUnit, environment } = alertParams;
 
-  const { data } = useFetcher(() => {
-    if (windowSize && windowUnit) {
-      return callApmApi({
-        endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_count',
-        params: {
-          query: {
-            ...getAbsoluteTimeRange(windowSize, windowUnit),
-            environment,
-            serviceName,
+  const { data } = useFetcher(
+    (callApmApi) => {
+      if (windowSize && windowUnit) {
+        return callApmApi({
+          endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_count',
+          params: {
+            query: {
+              ...getAbsoluteTimeRange(windowSize, windowUnit),
+              environment,
+              serviceName,
+            },
           },
-        },
-      });
-    }
-  }, [windowSize, windowUnit, environment, serviceName]);
+        });
+      }
+    },
+    [windowSize, windowUnit, environment, serviceName]
+  );
 
   const defaults = {
     threshold: 25,

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

@@ -8,15 +8,14 @@ import { i18n } from '@kbn/i18n';
 import { map } from 'lodash';
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { useFetcher } from '../../../../../observability/public';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
 import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { getDurationFormatter } from '../../../../common/utils/formatters';
 import { TimeSeries } from '../../../../typings/timeseries';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
-import { callApmApi } from '../../../services/rest/createCallApmApi';
+import { useFetcher } from '../../../hooks/use_fetcher';
 import {
   getMaxY,
   getResponseTimeTickFormatter,
@@ -88,29 +87,32 @@ export function TransactionDurationAlertTrigger(props: Props) {
     windowUnit,
   } = alertParams;
 
-  const { data } = useFetcher(() => {
-    if (windowSize && windowUnit) {
-      return callApmApi({
-        endpoint: 'GET /api/apm/alerts/chart_preview/transaction_duration',
-        params: {
-          query: {
-            ...getAbsoluteTimeRange(windowSize, windowUnit),
-            aggregationType,
-            environment,
-            serviceName,
-            transactionType: alertParams.transactionType,
+  const { data } = useFetcher(
+    (callApmApi) => {
+      if (windowSize && windowUnit) {
+        return callApmApi({
+          endpoint: 'GET /api/apm/alerts/chart_preview/transaction_duration',
+          params: {
+            query: {
+              ...getAbsoluteTimeRange(windowSize, windowUnit),
+              aggregationType,
+              environment,
+              serviceName,
+              transactionType: alertParams.transactionType,
+            },
           },
-        },
-      });
-    }
-  }, [
-    aggregationType,
-    environment,
-    serviceName,
-    alertParams.transactionType,
-    windowSize,
-    windowUnit,
-  ]);
+        });
+      }
+    },
+    [
+      aggregationType,
+      environment,
+      serviceName,
+      alertParams.transactionType,
+      windowSize,
+      windowUnit,
+    ]
+  );
 
   const maxY = getMaxY([
     { data: data ?? [] } as TimeSeries<{ x: number; y: number | null }>,

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

@@ -12,7 +12,6 @@ import { useApmServiceContext } from '../../../context/apm_service/use_apm_servi
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { ChartPreview } from '../chart_preview';
 import {
   EnvironmentField,
@@ -54,27 +53,30 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
 
   const thresholdAsPercent = (threshold ?? 0) / 100;
 
-  const { data } = useFetcher(() => {
-    if (windowSize && windowUnit) {
-      return callApmApi({
-        endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_rate',
-        params: {
-          query: {
-            ...getAbsoluteTimeRange(windowSize, windowUnit),
-            environment,
-            serviceName,
-            transactionType: alertParams.transactionType,
+  const { data } = useFetcher(
+    (callApmApi) => {
+      if (windowSize && windowUnit) {
+        return callApmApi({
+          endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_rate',
+          params: {
+            query: {
+              ...getAbsoluteTimeRange(windowSize, windowUnit),
+              environment,
+              serviceName,
+              transactionType: alertParams.transactionType,
+            },
           },
-        },
-      });
-    }
-  }, [
-    alertParams.transactionType,
-    environment,
-    serviceName,
-    windowSize,
-    windowUnit,
-  ]);
+        });
+      }
+    },
+    [
+      alertParams.transactionType,
+      environment,
+      serviceName,
+      windowSize,
+      windowUnit,
+    ]
+  );
 
   if (serviceName && !transactionTypes.length) {
     return null;

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

@@ -25,10 +25,7 @@ import {
 } from '@elastic/eui';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
-import {
-  APIReturnType,
-  callApmApi,
-} from '../../../services/rest/createCallApmApi';
+import { APIReturnType } from '../../../services/rest/createCallApmApi';
 import { px } from '../../../style/variables';
 import { SignificantTermsTable } from './SignificantTermsTable';
 import { ChartContainer } from '../../shared/charts/chart_container';
@@ -65,32 +62,35 @@ export function ErrorCorrelations() {
   const { urlParams, uiFilters } = useUrlParams();
   const { transactionName, transactionType, start, end } = urlParams;
 
-  const { data, status } = useFetcher(() => {
-    if (start && end) {
-      return callApmApi({
-        endpoint: 'GET /api/apm/correlations/failed_transactions',
-        params: {
-          query: {
-            serviceName,
-            transactionName,
-            transactionType,
-            start,
-            end,
-            uiFilters: JSON.stringify(uiFilters),
-            fieldNames: fieldNames.map((field) => field.label).join(','),
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          endpoint: 'GET /api/apm/correlations/failed_transactions',
+          params: {
+            query: {
+              serviceName,
+              transactionName,
+              transactionType,
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              fieldNames: fieldNames.map((field) => field.label).join(','),
+            },
           },
-        },
-      });
-    }
-  }, [
-    serviceName,
-    start,
-    end,
-    transactionName,
-    transactionType,
-    uiFilters,
-    fieldNames,
-  ]);
+        });
+      }
+    },
+    [
+      serviceName,
+      start,
+      end,
+      transactionName,
+      transactionType,
+      uiFilters,
+      fieldNames,
+    ]
+  );
 
   return (
     <>

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

@@ -26,10 +26,7 @@ import {
 import { getDurationFormatter } from '../../../../common/utils/formatters';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
-import {
-  APIReturnType,
-  callApmApi,
-} from '../../../services/rest/createCallApmApi';
+import { APIReturnType } from '../../../services/rest/createCallApmApi';
 import { SignificantTermsTable } from './SignificantTermsTable';
 import { ChartContainer } from '../../shared/charts/chart_container';
 
@@ -65,34 +62,37 @@ export function LatencyCorrelations() {
   const { urlParams, uiFilters } = useUrlParams();
   const { transactionName, transactionType, start, end } = urlParams;
 
-  const { data, status } = useFetcher(() => {
-    if (start && end) {
-      return callApmApi({
-        endpoint: 'GET /api/apm/correlations/slow_transactions',
-        params: {
-          query: {
-            serviceName,
-            transactionName,
-            transactionType,
-            start,
-            end,
-            uiFilters: JSON.stringify(uiFilters),
-            durationPercentile,
-            fieldNames: fieldNames.map((field) => field.label).join(','),
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          endpoint: 'GET /api/apm/correlations/slow_transactions',
+          params: {
+            query: {
+              serviceName,
+              transactionName,
+              transactionType,
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              durationPercentile,
+              fieldNames: fieldNames.map((field) => field.label).join(','),
+            },
           },
-        },
-      });
-    }
-  }, [
-    serviceName,
-    start,
-    end,
-    transactionName,
-    transactionType,
-    uiFilters,
-    durationPercentile,
-    fieldNames,
-  ]);
+        });
+      }
+    },
+    [
+      serviceName,
+      start,
+      end,
+      transactionName,
+      transactionType,
+      uiFilters,
+      durationPercentile,
+      fieldNames,
+    ]
+  );
 
   return (
     <>

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

@@ -23,7 +23,6 @@ import { useTrackPageview } from '../../../../../observability/public';
 import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { SearchBar } from '../../shared/search_bar';
@@ -70,24 +69,27 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
   const { urlParams, uiFilters } = useUrlParams();
   const { start, end } = urlParams;
 
-  const { data: errorGroupData } = useFetcher(() => {
-    if (start && end) {
-      return callApmApi({
-        endpoint: 'GET /api/apm/services/{serviceName}/errors/{groupId}',
-        params: {
-          path: {
-            serviceName,
-            groupId,
+  const { data: errorGroupData } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          endpoint: 'GET /api/apm/services/{serviceName}/errors/{groupId}',
+          params: {
+            path: {
+              serviceName,
+              groupId,
+            },
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+            },
           },
-          query: {
-            start,
-            end,
-            uiFilters: JSON.stringify(uiFilters),
-          },
-        },
-      });
-    }
-  }, [serviceName, start, end, groupId, uiFilters]);
+        });
+      }
+    },
+    [serviceName, start, end, groupId, uiFilters]
+  );
 
   const { errorDistributionData } = useErrorGroupDistributionFetcher({
     serviceName,