Update comparison date handling

elastic · Mar 8, 2022 · af251d2 · af251d2
1 parent 7467638
commit af251d2
Show file tree

Hide file tree

Showing 36 changed files with 816 additions and 730 deletions.
diff --git a/...s/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx b/...s/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
@@ -9,30 +9,28 @@ 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 { useComparison } from '../../../hooks/use_comparison';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import { DependenciesTable } from '../../shared/dependencies_table';
 import { ServiceLink } from '../../shared/service_link';
 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 });
 
-  const { offset } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonEnabled,
-    comparisonType,
-  });
+  const { offset } = useComparison();
 
   const { data, status } = useFetcher(
     (callApmApi) => {

diff --git a/...pm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx b/...pm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx
@@ -10,33 +10,30 @@ 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 { useComparison } from '../../../../hooks/use_comparison';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../../hooks/use_time_range';
 import { BackendLink } from '../../../shared/backend_link';
 import { DependenciesTable } from '../../../shared/dependencies_table';
-import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 
 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 });
 
   const trackEvent = useUiTracker();
 
-  const { offset } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonEnabled,
-    comparisonType,
-  });
+  const { offset } = useComparison();
 
   const { data, status } = useFetcher(
     (callApmApi) => {

diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
@@ -20,10 +20,10 @@ import { ChartPointerEventContextProvider } from '../../../context/chart_pointer
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
+import { useComparison } from '../../../hooks/use_comparison';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
 import { FailedTransactionRateChart } from '../../shared/charts/failed_transaction_rate_chart';
-import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import { ErrorDistribution } from '../error_group_details/distribution';
 import { ErrorGroupList } from './error_group_list';
 
@@ -56,18 +56,12 @@ export function ErrorGroupOverview() {
       sortDirection,
       rangeFrom,
       rangeTo,
-      comparisonType,
       comparisonEnabled,
     },
   } = useApmParams('/services/{serviceName}/errors');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
-  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonType,
-    comparisonEnabled,
-  });
+  const { comparisonStart, comparisonEnd } = useComparison();
 
   const { errorDistributionData, status } = useErrorGroupDistributionFetcher({
     serviceName,

diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
@@ -10,13 +10,12 @@ 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 { useComparison } from '../../../hooks/use_comparison';
 import { useAnyOfApmParams } 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';
 
@@ -30,22 +29,13 @@ const initialData = {
 };
 
 function useServicesFetcher() {
-  const {
-    urlParams: { comparisonEnabled, comparisonType },
-  } = useLegacyUrlParams();
-
   const {
     query: { rangeFrom, rangeTo, environment, kuery },
   } = useAnyOfApmParams('/services/{serviceName}', '/services');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonEnabled,
-    comparisonType,
-  });
+  const { offset } = useComparison();
 
   const { data = initialData, status: mainStatisticsStatus } = useFetcher(
     (callApmApi) => {

diff --git a/x-pack/plugins/apm/public/components/app/service_map/popover/backend_contents.tsx b/x-pack/plugins/apm/public/components/app/service_map/popover/backend_contents.tsx
@@ -14,10 +14,10 @@ import { useUiTracker } from '../../../../../../observability/public';
 import { ContentsProps } from '.';
 import { useAnyOfApmParams } from '../../../../hooks/use_apm_params';
 import { useApmRouter } from '../../../../hooks/use_apm_router';
+import { useComparison } from '../../../../hooks/use_comparison';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { ApmRoutes } from '../../../routing/apm_route_config';
 import { StatsList } from './stats_list';
-import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 
 type BackendReturn = APIReturnType<'GET /internal/apm/service-map/backend'>;
@@ -38,14 +38,7 @@ export function BackendContents({
     '/services/{serviceName}/service-map'
   );
 
-  const { comparisonEnabled, comparisonType } = query;
-
-  const { offset } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonEnabled,
-    comparisonType,
-  });
+  const { offset } = useComparison();
 
   const apmRouter = useApmRouter();
 

diff --git a/x-pack/plugins/apm/public/components/app/service_map/popover/service_contents.tsx b/x-pack/plugins/apm/public/components/app/service_map/popover/service_contents.tsx
@@ -22,7 +22,7 @@ import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { AnomalyDetection } from './anomaly_detection';
 import { StatsList } from './stats_list';
 import { useTimeRange } from '../../../../hooks/use_time_range';
-import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
+import { useComparison } from '../../../../hooks/use_comparison';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 
 type ServiceNodeReturn =
@@ -51,16 +51,11 @@ export function ServiceContents({
     throw new Error('Expected rangeFrom and rangeTo to be set');
   }
 
-  const { rangeFrom, rangeTo, comparisonEnabled, comparisonType } = query;
+  const { rangeFrom, rangeTo, comparisonEnabled } = query;
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonEnabled,
-    comparisonType,
-  });
+  const { offset } = useComparison();
 
   const serviceName = nodeData.id!;
 

diff --git a/.../apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/.../apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
@@ -11,14 +11,13 @@ 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';
 import { BackendLink } from '../../../shared/backend_link';
 import { DependenciesTable } from '../../../shared/dependencies_table';
 import { ServiceLink } from '../../../shared/service_link';
-import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
+import { useComparison } from '../../../../hooks/use_comparison';
 
 interface ServiceOverviewDependenciesTableProps {
   fixedHeight?: boolean;
@@ -34,21 +33,20 @@ export function ServiceOverviewDependenciesTable({
   hidePerPageOptions = false,
 }: ServiceOverviewDependenciesTableProps) {
   const {
-    urlParams: { comparisonEnabled, comparisonType, latencyAggregationType },
-  } = useLegacyUrlParams();
-
-  const {
-    query: { environment, kuery, rangeFrom, rangeTo },
+    query: {
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      comparisonEnabled,
+      comparisonType,
+      latencyAggregationType,
+    },
   } = useApmParams('/services/{serviceName}/*');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonEnabled,
-    comparisonType,
-  });
+  const { offset } = useComparison();
 
   const { serviceName, transactionType } = useApmServiceContext();
 

diff --git a/...lugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/...lugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -16,9 +16,9 @@ import { orderBy } from 'lodash';
 import React, { useState } from 'react';
 import uuid from 'uuid';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
+import { useComparison } from '../../../../hooks/use_comparison';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 import { ErrorOverviewLink } from '../../../shared/links/apm/error_overview_link';
-import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { OverviewTableContainer } from '../../../shared/overview_table_container';
 import { getColumns } from './get_columns';
 import { useApmParams } from '../../../../hooks/use_apm_params';
@@ -81,12 +81,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonType,
-    comparisonEnabled,
-  });
+  const { comparisonStart, comparisonEnd } = useComparison();
 
   const { pageIndex, sort } = tableOptions;
   const { direction, field } = sort;

diff --git a/...apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx b/...apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
@@ -10,17 +10,17 @@ 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 { useComparison } from '../../../hooks/use_comparison';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
 import { InstancesLatencyDistributionChart } from '../../shared/charts/instances_latency_distribution_chart';
-import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import {
   ServiceOverviewInstancesTable,
   TableOptions,
 } from './service_overview_instances_table';
+import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
 
 interface ServiceOverviewInstancesChartAndTableProps {
   chartHeight: number;
@@ -73,21 +73,20 @@ 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({
-    start,
-    end,
-    comparisonType,
-    comparisonEnabled,
-  });
+  const { comparisonStart, comparisonEnd } = useComparison();
 
   const {
     data: mainStatsData = INITIAL_STATE_MAIN_STATS,
@@ -108,7 +107,8 @@ export function ServiceOverviewInstancesChartAndTable({
             query: {
               environment,
               kuery,
-              latencyAggregationType,
+              latencyAggregationType:
+                latencyAggregationType as LatencyAggregationType,
               start,
               end,
               transactionType,
@@ -190,7 +190,8 @@ export function ServiceOverviewInstancesChartAndTable({
               query: {
                 environment,
                 kuery,
-                latencyAggregationType,
+                latencyAggregationType:
+                  latencyAggregationType as LatencyAggregationType,
                 start,
                 end,
                 numBuckets: 20,

diff --git a/...ins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx b/...ins/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,