[APM] Fix time comparison types when relative time range is selected

x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx

@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { getNodeName, NodeType } from '../../../../common/connections';
 import { useApmParams } from '../../../hooks/use_apm_params';
-import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import { DependenciesTable } from '../../shared/dependencies_table';
@@ -18,11 +17,15 @@ import { useTimeRange } from '../../../hooks/use_time_range';
 
 export function BackendDetailDependenciesTable() {
   const {
-    urlParams: { comparisonEnabled, comparisonType },
-  } = useLegacyUrlParams();
-
-  const {
-    query: { backendName, rangeFrom, rangeTo, kuery, environment },
+    query: {
+      backendName,
+      rangeFrom,
+      rangeTo,
+      kuery,
+      environment,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/backends/overview');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });

x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx

@@ -7,7 +7,6 @@
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { asPercent } from '../../../../common/utils/formatters';
-import { useComparison } from '../../../hooks/use_comparison';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
@@ -17,6 +16,10 @@ import {
   ChartType,
   getTimeSeriesColor,
 } from '../../shared/charts/helper/get_timeseries_color';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 
 function yLabelFormat(y?: number | null) {
   return asPercent(y || 0, 1);
@@ -28,12 +31,26 @@ export function BackendFailedTransactionRateChart({
   height: number;
 }) {
   const {
-    query: { backendName, kuery, environment, rangeFrom, rangeTo },
+    query: {
+      backendName,
+      kuery,
+      environment,
+      rangeFrom,
+      rangeTo,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/backends/overview');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset, comparisonChartTheme } = useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {

x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx

@@ -7,7 +7,6 @@
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { getDurationFormatter } from '../../../../common/utils/formatters';
-import { useComparison } from '../../../hooks/use_comparison';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
@@ -21,15 +20,33 @@ import {
   ChartType,
   getTimeSeriesColor,
 } from '../../shared/charts/helper/get_timeseries_color';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 
 export function BackendLatencyChart({ height }: { height: number }) {
   const {
-    query: { backendName, rangeFrom, rangeTo, kuery, environment },
+    query: {
+      backendName,
+      rangeFrom,
+      rangeTo,
+      kuery,
+      environment,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/backends/overview');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset, comparisonChartTheme } = useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {

x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx

@@ -7,7 +7,6 @@
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { asTransactionRate } from '../../../../common/utils/formatters';
-import { useComparison } from '../../../hooks/use_comparison';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
@@ -17,15 +16,33 @@ import {
   ChartType,
   getTimeSeriesColor,
 } from '../../shared/charts/helper/get_timeseries_color';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 
 export function BackendThroughputChart({ height }: { height: number }) {
   const {
-    query: { backendName, rangeFrom, rangeTo, kuery, environment },
+    query: {
+      backendName,
+      rangeFrom,
+      rangeTo,
+      kuery,
+      environment,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/backends/overview');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset, comparisonChartTheme } = useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {

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

@@ -10,7 +10,6 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useUiTracker } from '../../../../../../observability/public';
 import { getNodeName, NodeType } from '../../../../../common/connections';
-import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../../hooks/use_time_range';
@@ -20,11 +19,14 @@ import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time
 
 export function BackendInventoryDependenciesTable() {
   const {
-    urlParams: { comparisonEnabled, comparisonType },
-  } = useLegacyUrlParams();
-
-  const {
-    query: { rangeFrom, rangeTo, environment, kuery },
+    query: {
+      rangeFrom,
+      rangeTo,
+      environment,
+      kuery,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/backends');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });

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

@@ -68,7 +68,6 @@ export function ErrorGroupOverview() {
     comparisonType,
     comparisonEnabled,
   });
-
   const { errorDistributionData, status } = useErrorGroupDistributionFetcher({
     serviceName,
     groupId: undefined,

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

@@ -10,16 +10,15 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import uuid from 'uuid';
 import { useAnomalyDetectionJobsContext } from '../../../context/anomaly_detection_jobs/use_anomaly_detection_jobs_context';
-import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useLocalStorage } from '../../../hooks/use_local_storage';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { SearchBar } from '../../shared/search_bar';
-import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import { ServiceList } from './service_list';
 import { MLCallout, shouldDisplayMlCallout } from '../../shared/ml_callout';
 import { joinByKey } from '../../../../common/utils/join_by_key';
+import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 
 const initialData = {
   requestId: '',
@@ -30,11 +29,15 @@ const initialData = {
 
 function useServicesFetcher() {
   const {
-    urlParams: { comparisonEnabled, comparisonType },
-  } = useLegacyUrlParams();
-
-  const {
-    query: { rangeFrom, rangeTo, environment, kuery, serviceGroup },
+    query: {
+      rangeFrom,
+      rangeTo,
+      environment,
+      kuery,
+      serviceGroup,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/services');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });

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

@@ -11,7 +11,6 @@ import React, { ReactNode } from 'react';
 import { useUiTracker } from '../../../../../../observability/public';
 import { getNodeName, NodeType } from '../../../../../common/connections';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
-import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../../hooks/use_time_range';
@@ -34,11 +33,16 @@ export function ServiceOverviewDependenciesTable({
   hidePerPageOptions = false,
 }: ServiceOverviewDependenciesTableProps) {
   const {
-    urlParams: { comparisonEnabled, comparisonType, latencyAggregationType },
-  } = useLegacyUrlParams();
-
-  const {
-    query: { environment, kuery, rangeFrom, rangeTo, serviceGroup },
+    query: {
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      serviceGroup,
+      comparisonEnabled,
+      comparisonType,
+      latencyAggregationType,
+    },
   } = useApmParams('/services/{serviceName}/*');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });

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

@@ -10,7 +10,6 @@ import { orderBy } from 'lodash';
 import React, { useState } from 'react';
 import uuid from 'uuid';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
-import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
@@ -21,6 +20,7 @@ import {
   ServiceOverviewInstancesTable,
   TableOptions,
 } from './service_overview_instances_table';
+import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
 
 interface ServiceOverviewInstancesChartAndTableProps {
   chartHeight: number;
@@ -73,13 +73,17 @@ export function ServiceOverviewInstancesChartAndTable({
   const { direction, field } = sort;
 
   const {
-    query: { environment, kuery, rangeFrom, rangeTo },
+    query: {
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      comparisonEnabled,
+      comparisonType,
+      latencyAggregationType,
+    },
   } = useApmParams('/services/{serviceName}/overview');
 
-  const {
-    urlParams: { latencyAggregationType, comparisonType, comparisonEnabled },
-  } = useLegacyUrlParams();
-
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
   const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
@@ -108,7 +112,8 @@ export function ServiceOverviewInstancesChartAndTable({
             query: {
               environment,
               kuery,
-              latencyAggregationType,
+              latencyAggregationType:
+                latencyAggregationType as LatencyAggregationType,
               start,
               end,
               transactionType,
@@ -190,7 +195,8 @@ export function ServiceOverviewInstancesChartAndTable({
               query: {
                 environment,
                 kuery,
-                latencyAggregationType,
+                latencyAggregationType:
+                  latencyAggregationType as LatencyAggregationType,
                 start,
                 end,
                 numBuckets: 20,

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

@@ -14,7 +14,6 @@ import {
 import { i18n } from '@kbn/i18n';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
-import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 import {
@@ -27,6 +26,7 @@ import { getColumns } from './get_columns';
 import { InstanceDetails } from './intance_details';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useBreakpoints } from '../../../../hooks/use_breakpoints';
+import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
 
 type ServiceInstanceMainStatistics =
   APIReturnType<'GET /internal/apm/services/{serviceName}/service_overview_instances/main_statistics'>;
@@ -71,13 +71,9 @@ export function ServiceOverviewInstancesTable({
   const { agentName } = useApmServiceContext();
 
   const {
-    query: { kuery },
+    query: { kuery, latencyAggregationType, comparisonEnabled },
   } = useApmParams('/services/{serviceName}');
 
-  const {
-    urlParams: { latencyAggregationType, comparisonEnabled },
-  } = useLegacyUrlParams();
-
   const [itemIdToOpenActionMenuRowMap, setItemIdToOpenActionMenuRowMap] =
     useState<Record<string, boolean>>({});
 
@@ -127,7 +123,7 @@ export function ServiceOverviewInstancesTable({
     agentName,
     serviceName,
     kuery,
-    latencyAggregationType,
+    latencyAggregationType: latencyAggregationType as LatencyAggregationType,
     detailedStatsData,
     comparisonEnabled,
     toggleRowDetails,

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

@@ -18,7 +18,6 @@ import { ApmMlDetectorType } from '../../../../common/anomaly_detection/apm_ml_d
 import { asExactTransactionRate } from '../../../../common/utils/formatters';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useEnvironmentsContext } from '../../../context/environments_context/use_environments_context';
-import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { usePreferredServiceAnomalyTimeseries } from '../../../hooks/use_preferred_service_anomaly_timeseries';
@@ -48,11 +47,7 @@ export function ServiceOverviewThroughputChart({
   transactionName?: string;
 }) {
   const {
-    urlParams: { comparisonEnabled, comparisonType },
-  } = useLegacyUrlParams();
-
-  const {
-    query: { rangeFrom, rangeTo },
+    query: { rangeFrom, rangeTo, comparisonEnabled, comparisonType },
   } = useApmParams('/services/{serviceName}');
 
   const { environment } = useEnvironmentsContext();