Remove useComparison hook

elastic · Mar 14, 2022 · 367fa6b · 367fa6b
1 parent ad01aeb
commit 367fa6b
Show file tree

Hide file tree

Showing 20 changed files with 182 additions and 92 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,8 +9,8 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { getNodeName, NodeType } from '../../../../common/connections';
 import { useApmParams } from '../../../hooks/use_apm_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';
@@ -30,7 +30,12 @@ export function BackendDetailDependenciesTable() {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = useComparison();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {

diff --git a/...ck/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx b/...ck/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) => {

diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx b/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) => {

diff --git a/...ck/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx b/...ck/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) => {

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
@@ -11,11 +11,11 @@ import React from 'react';
 import { useUiTracker } from '../../../../../../observability/public';
 import { getNodeName, NodeType } from '../../../../../common/connections';
 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 {
@@ -33,7 +33,12 @@ export function BackendInventoryDependenciesTable() {
 
   const trackEvent = useUiTracker();
 
-  const { offset } = useComparison();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   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,13 +56,18 @@ export function ErrorGroupOverview() {
       sortDirection,
       rangeFrom,
       rangeTo,
+      comparisonType,
       comparisonEnabled,
     },
   } = useApmParams('/services/{serviceName}/errors');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
-  const { comparisonStart, comparisonEnd } = useComparison();
-
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
   const { errorDistributionData, status } = useErrorGroupDistributionFetcher({
     serviceName,
     groupId: undefined,

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,7 +38,14 @@ export function BackendContents({
     '/services/{serviceName}/service-map'
   );
 
-  const { offset } = useComparison();
+  const { comparisonEnabled, comparisonType } = query;
+
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   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 { useComparison } from '../../../../hooks/use_comparison';
+import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 
 type ServiceNodeReturn =
@@ -51,11 +51,16 @@ export function ServiceContents({
     throw new Error('Expected rangeFrom and rangeTo to be set');
   }
 
-  const { rangeFrom, rangeTo, comparisonEnabled } = query;
+  const { rangeFrom, rangeTo, comparisonEnabled, comparisonType } = query;
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = useComparison();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   const serviceName = nodeData.id!;
   const serviceGroup = ('serviceGroup' in query && query.serviceGroup) || '';

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
@@ -17,7 +17,7 @@ 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 { useComparison } from '../../../../hooks/use_comparison';
+import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 
 interface ServiceOverviewDependenciesTableProps {
   fixedHeight?: boolean;
@@ -46,7 +46,12 @@ export function ServiceOverviewDependenciesTable({
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = useComparison();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   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,7 +81,12 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { comparisonStart, comparisonEnd } = useComparison();
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   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
@@ -11,11 +11,11 @@ import React, { useState } from 'react';
 import uuid from 'uuid';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 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,
@@ -86,7 +86,12 @@ export function ServiceOverviewInstancesChartAndTable({
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { comparisonStart, comparisonEnd } = useComparison();
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const {
     data: mainStatsData = INITIAL_STATE_MAIN_STATS,

diff --git a/.../plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx b/.../plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx
@@ -20,10 +20,13 @@ import { useApmServiceContext } from '../../../context/apm_service/use_apm_servi
 import { useEnvironmentsContext } from '../../../context/environments_context/use_environments_context';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { useComparison } from '../../../hooks/use_comparison';
 import { usePreferredServiceAnomalyTimeseries } from '../../../hooks/use_preferred_service_anomaly_timeseries';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 import {
   ChartType,
   getTimeSeriesColor,
@@ -44,7 +47,7 @@ export function ServiceOverviewThroughputChart({
   transactionName?: string;
 }) {
   const {
-    query: { rangeFrom, rangeTo, comparisonEnabled },
+    query: { rangeFrom, rangeTo, comparisonEnabled, comparisonType },
   } = useApmParams('/services/{serviceName}');
 
   const { environment } = useEnvironmentsContext();
@@ -57,8 +60,13 @@ export function ServiceOverviewThroughputChart({
 
   const { transactionType, serviceName } = useApmServiceContext();
 
-  const { comparisonStart, comparisonEnd, comparisonChartTheme } =
-    useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {