[APM] Use useTimeRange where possible (#109572) (#109803)

Co-authored-by: Dario Gieselaar <dario.gieselaar@elastic.co>
elastic · Aug 24, 2021 · c3a387d · c3a387d
1 parent c4f35a2
commit c3a387d
Show file tree

Hide file tree

Showing 63 changed files with 668 additions and 322 deletions.
diff --git a/x-pack/plugins/apm/public/components/alerting/alerting_flyout/index.tsx b/x-pack/plugins/apm/public/components/alerting/alerting_flyout/index.tsx
@@ -16,8 +16,8 @@ import { ApmPluginStartDeps } from '../../../plugin';
 import { useServiceName } from '../../../hooks/use_service_name';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { AlertMetadata } from '../helper';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
+import { useTimeRange } from '../../../hooks/use_time_range';
 
 interface Props {
   addFlyoutVisible: boolean;
@@ -30,9 +30,12 @@ export function AlertingFlyout(props: Props) {
 
   const serviceName = useServiceName();
   const { query } = useApmParams('/*');
-  const {
-    urlParams: { start, end },
-  } = useUrlParams();
+
+  const rangeFrom = 'rangeFrom' in query ? query.rangeFrom : undefined;
+  const rangeTo = 'rangeTo' in query ? query.rangeTo : undefined;
+
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo, optional: true });
+
   const environment =
     'environment' in query ? query.environment : ENVIRONMENT_ALL.value;
   const transactionType =

diff --git a/x-pack/plugins/apm/public/components/app/TraceLink/trace_link.test.tsx b/x-pack/plugins/apm/public/components/app/TraceLink/trace_link.test.tsx
@@ -16,7 +16,6 @@ import {
   MockApmPluginContextWrapper,
 } from '../../../context/apm_plugin/mock_apm_plugin_context';
 import * as hooks from '../../../hooks/use_fetcher';
-import * as urlParamsHooks from '../../../context/url_params_context/use_url_params';
 import * as useApmParamsHooks from '../../../hooks/use_apm_params';
 
 function Wrapper({ children }: { children?: ReactNode }) {
@@ -69,15 +68,6 @@ describe('TraceLink', () => {
 
   describe('when no transaction is found', () => {
     it('renders a trace page', () => {
-      jest.spyOn(urlParamsHooks, 'useUrlParams').mockReturnValue({
-        rangeId: 0,
-        refreshTimeRange: jest.fn(),
-        uxUiFilters: {},
-        urlParams: {
-          rangeFrom: 'now-24h',
-          rangeTo: 'now',
-        },
-      });
       jest.spyOn(hooks, 'useFetcher').mockReturnValue({
         data: { transaction: undefined },
         status: hooks.FETCH_STATUS.SUCCESS,
@@ -103,15 +93,6 @@ describe('TraceLink', () => {
   });
 
   describe('transaction page', () => {
-    beforeAll(() => {
-      jest.spyOn(urlParamsHooks, 'useUrlParams').mockReturnValue({
-        rangeId: 0,
-        refreshTimeRange: jest.fn(),
-        uxUiFilters: {},
-        urlParams: {},
-      });
-    });
-
     it('renders with date range params', () => {
       const transaction = {
         service: { name: 'foo' },

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
@@ -15,16 +15,19 @@ import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_ra
 import { DependenciesTable } from '../../shared/dependencies_table';
 import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
 import { ServiceLink } from '../../shared/service_link';
+import { useTimeRange } from '../../../hooks/use_time_range';
 
 export function BackendDetailDependenciesTable() {
   const {
-    urlParams: { start, end, comparisonEnabled, comparisonType },
+    urlParams: { comparisonEnabled, comparisonType },
   } = useUrlParams();
 
   const {
     query: { rangeFrom, rangeTo, kuery, environment },
   } = useApmParams('/backends/:backendName/overview');
 
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+
   const { offset } = getTimeRangeComparison({
     start,
     end,

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
@@ -13,19 +13,22 @@ import { getNodeName, NodeType } from '../../../../../common/connections';
 import { useUrlParams } 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 { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 
 export function BackendInventoryDependenciesTable() {
   const {
-    urlParams: { start, end, comparisonEnabled, comparisonType },
+    urlParams: { comparisonEnabled, comparisonType },
   } = useUrlParams();
 
   const {
     query: { rangeFrom, rangeTo, environment, kuery },
   } = useApmParams('/backends');
 
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+
   const trackEvent = useUiTracker();
 
   const { offset } = getTimeRangeComparison({

diff --git a/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx
@@ -45,6 +45,7 @@ import type { SearchServiceParams } from '../../../../common/search_strategies/c
 import type { FailedTransactionsCorrelationValue } from '../../../../common/search_strategies/failure_correlations/types';
 import { Summary } from '../../shared/Summary';
 import { asPercent } from '../../../../common/utils/formatters';
+import { useTimeRange } from '../../../hooks/use_time_range';
 
 export function FailedTransactionsCorrelations({
   onFilter,
@@ -59,11 +60,13 @@ export function FailedTransactionsCorrelations({
   const { serviceName, transactionType } = useApmServiceContext();
 
   const {
-    query: { kuery, environment },
+    query: { kuery, environment, rangeFrom, rangeTo },
   } = useApmParams('/services/:serviceName');
 
   const { urlParams } = useUrlParams();
-  const { transactionName, start, end } = urlParams;
+  const { transactionName } = urlParams;
+
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
   const inspectEnabled = uiSettings.get<boolean>(enableInspectEsQueries);
 

diff --git a/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx
@@ -40,6 +40,7 @@ import { CorrelationsLog } from './correlations_log';
 import { CorrelationsEmptyStatePrompt } from './empty_state_prompt';
 import { CrossClusterSearchCompatibilityWarning } from './cross_cluster_search_warning';
 import { CorrelationsProgressControls } from './progress_controls';
+import { useTimeRange } from '../../../hooks/use_time_range';
 
 const DEFAULT_PERCENTILE_THRESHOLD = 95;
 
@@ -59,12 +60,14 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
   const { serviceName, transactionType } = useApmServiceContext();
 
   const {
-    query: { kuery, environment },
+    query: { kuery, environment, rangeFrom, rangeTo },
   } = useApmParams('/services/:serviceName');
 
   const { urlParams } = useUrlParams();
 
-  const { transactionName, start, end } = urlParams;
+  const { transactionName } = urlParams;
+
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
   const displayLog = uiSettings.get<boolean>(enableInspectEsQueries);
 

diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/index.tsx
@@ -25,6 +25,7 @@ import { useApmParams } from '../../../hooks/use_apm_params';
 import { useApmRouter } from '../../../hooks/use_apm_router';
 import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
+import { useTimeRange } from '../../../hooks/use_time_range';
 import { DetailView } from './detail_view';
 import { ErrorDistribution } from './Distribution';
 
@@ -94,7 +95,7 @@ function ErrorGroupHeader({
 
 export function ErrorGroupDetails() {
   const { urlParams } = useUrlParams();
-  const { start, end } = urlParams;
+
   const { serviceName } = useApmServiceContext();
 
   const apmRouter = useApmRouter();
@@ -104,6 +105,8 @@ export function ErrorGroupDetails() {
     query: { rangeFrom, rangeTo, environment, kuery },
   } = useApmParams('/services/:serviceName/errors/:groupId');
 
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+
   useBreadcrumb({
     title: groupId,
     href: apmRouter.link('/services/:serviceName/errors/:groupId', {

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
@@ -15,23 +15,21 @@ import {
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
+import { useTimeRange } from '../../../hooks/use_time_range';
 import { ErrorDistribution } from '../error_group_details/Distribution';
 import { ErrorGroupList } from './List';
 
 export function ErrorGroupOverview() {
   const { serviceName } = useApmServiceContext();
 
   const {
-    query: { environment, kuery, sortField, sortDirection },
+    query: { environment, kuery, sortField, sortDirection, rangeFrom, rangeTo },
   } = useApmParams('/services/:serviceName/errors');
 
-  const {
-    urlParams: { start, end },
-  } = useUrlParams();
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
   const { errorDistributionData } = 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
@@ -16,6 +16,7 @@ import { useUrlParams } from '../../../context/url_params_context/use_url_params
 import { useLocalStorage } from '../../../hooks/useLocalStorage';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
+import { useTimeRange } from '../../../hooks/use_time_range';
 import { useUpgradeAssistantHref } from '../../shared/Links/kibana';
 import { SearchBar } from '../../shared/search_bar';
 import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
@@ -34,16 +35,17 @@ const initialData = {
 
 let hasDisplayedToast = false;
 
-function useServicesFetcher({
-  environment,
-  kuery,
-}: {
-  environment: string;
-  kuery: string;
-}) {
+function useServicesFetcher() {
   const {
-    urlParams: { start, end, comparisonEnabled, comparisonType },
+    urlParams: { comparisonEnabled, comparisonType },
   } = useUrlParams();
+
+  const {
+    query: { rangeFrom, rangeTo, environment, kuery },
+  } = useApmParams('/services/:serviceName', '/services');
+
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+
   const { core } = useApmPluginContext();
   const upgradeAssistantHref = useUpgradeAssistantHref();
 
@@ -153,15 +155,11 @@ function useServicesFetcher({
 export function ServiceInventory() {
   const { core } = useApmPluginContext();
 
-  const {
-    query: { environment, kuery },
-  } = useApmParams('/services');
-
   const {
     mainStatisticsData,
     mainStatisticsStatus,
     comparisonData,
-  } = useServicesFetcher({ environment, kuery });
+  } = useServicesFetcher();
 
   const {
     anomalyDetectionJobsData,

diff --git a/x-pack/plugins/apm/public/components/app/service_logs/index.tsx b/x-pack/plugins/apm/public/components/app/service_logs/index.tsx
@@ -10,7 +10,6 @@ import { EuiLoadingSpinner, EuiEmptyPrompt } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { LogStream } from '../../../../../infra/public';
@@ -22,17 +21,16 @@ import {
   POD_NAME,
 } from '../../../../common/elasticsearch_fieldnames';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import { useTimeRange } from '../../../hooks/use_time_range';
 
 export function ServiceLogs() {
   const { serviceName } = useApmServiceContext();
 
   const {
-    query: { environment, kuery },
+    query: { environment, kuery, rangeFrom, rangeTo },
   } = useApmParams('/services/:serviceName/logs');
 
-  const {
-    urlParams: { start, end },
-  } = useUrlParams();
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
   const { data, status } = useFetcher(
     (callApmApi) => {

diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx
@@ -98,7 +98,14 @@ const stories: Meta<Args> = {
 export default stories;
 
 export const Backend: Story<Args> = () => {
-  return <Popover environment={ENVIRONMENT_ALL.value} kuery="" />;
+  return (
+    <Popover
+      environment={ENVIRONMENT_ALL.value}
+      kuery=""
+      start="2021-08-20T10:00:00.000Z"
+      end="2021-08-20T10:15:00.000Z"
+    />
+  );
 };
 Backend.args = {
   nodeData: {
@@ -111,7 +118,14 @@ Backend.args = {
 };
 
 export const BackendWithLongTitle: Story<Args> = () => {
-  return <Popover environment={ENVIRONMENT_ALL.value} kuery="" />;
+  return (
+    <Popover
+      environment={ENVIRONMENT_ALL.value}
+      kuery=""
+      start="2021-08-20T10:00:00.000Z"
+      end="2021-08-20T10:15:00.000Z"
+    />
+  );
 };
 BackendWithLongTitle.args = {
   nodeData: {
@@ -125,14 +139,28 @@ BackendWithLongTitle.args = {
 };
 
 export const ExternalsList: Story<Args> = () => {
-  return <Popover environment={ENVIRONMENT_ALL.value} kuery="" />;
+  return (
+    <Popover
+      environment={ENVIRONMENT_ALL.value}
+      kuery=""
+      start="2021-08-20T10:00:00.000Z"
+      end="2021-08-20T10:15:00.000Z"
+    />
+  );
 };
 ExternalsList.args = {
   nodeData: exampleGroupedConnectionsData,
 };
 
 export const Resource: Story<Args> = () => {
-  return <Popover environment={ENVIRONMENT_ALL.value} kuery="" />;
+  return (
+    <Popover
+      environment={ENVIRONMENT_ALL.value}
+      kuery=""
+      start="2021-08-20T10:00:00.000Z"
+      end="2021-08-20T10:15:00.000Z"
+    />
+  );
 };
 Resource.args = {
   nodeData: {
@@ -145,7 +173,14 @@ Resource.args = {
 };
 
 export const Service: Story<Args> = () => {
-  return <Popover environment={ENVIRONMENT_ALL.value} kuery="" />;
+  return (
+    <Popover
+      environment={ENVIRONMENT_ALL.value}
+      kuery=""
+      start="2021-08-20T10:00:00.000Z"
+      end="2021-08-20T10:15:00.000Z"
+    />
+  );
 };
 Service.args = {
   nodeData: {