[Unified observability] Fix refresh button in the overview page (#126927

) Co-authored-by: Kibana Machine <[email protected]>
elastic · Mar 16, 2022 · a13e99c · a13e99c
1 parent c1704d9
commit a13e99c
Show file tree

Hide file tree

Showing 29 changed files with 354 additions and 337 deletions.
diff --git a/x-pack/plugins/observability/public/application/application.test.tsx b/x-pack/plugins/observability/public/application/application.test.tsx
@@ -34,7 +34,13 @@ describe('renderApp', () => {
       data: {
         query: {
           timefilter: {
-            timefilter: { setTime: jest.fn(), getTime: jest.fn().mockImplementation(() => ({})) },
+            timefilter: {
+              setTime: jest.fn(),
+              getTime: jest.fn().mockReturnValue({}),
+              getTimeDefaults: jest.fn().mockReturnValue({}),
+              getRefreshInterval: jest.fn().mockReturnValue({}),
+              getRefreshIntervalDefaults: jest.fn().mockReturnValue({}),
+            },
           },
         },
       },

diff --git a/x-pack/plugins/observability/public/application/index.tsx b/x-pack/plugins/observability/public/application/index.tsx
@@ -19,6 +19,7 @@ import {
 } from '../../../../../src/plugins/kibana_react/public';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import type { LazyObservabilityPageTemplateProps } from '../components/shared/page_template/lazy_page_template';
+import { DatePickerContextProvider } from '../context/date_picker_context';
 import { HasDataContextProvider } from '../context/has_data_context';
 import { PluginContext } from '../context/plugin_context';
 import { useRouteParams } from '../hooks/use_route_params';
@@ -90,9 +91,11 @@ export const renderApp = ({
             <EuiThemeProvider darkMode={isDarkMode}>
               <i18nCore.Context>
                 <RedirectAppLinks application={core.application} className={APP_WRAPPER_CLASS}>
-                  <HasDataContextProvider>
-                    <App />
-                  </HasDataContextProvider>
+                  <DatePickerContextProvider>
+                    <HasDataContextProvider>
+                      <App />
+                    </HasDataContextProvider>
+                  </DatePickerContextProvider>
                 </RedirectAppLinks>
               </i18nCore.Context>
             </EuiThemeProvider>

diff --git a/x-pack/plugins/observability/public/components/app/section/apm/index.tsx b/x-pack/plugins/observability/public/components/app/section/apm/index.tsx
@@ -21,7 +21,7 @@ import moment from 'moment';
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import { ThemeContext } from 'styled-components';
-import { useTimeRange } from '../../../../hooks/use_time_range';
+import { useDatePickerContext } from '../../../../hooks/use_date_picker_context';
 import { SectionContainer } from '../';
 import { getDataHandler } from '../../../../data_handler';
 import { useChartTheme } from '../../../../hooks/use_chart_theme';
@@ -58,21 +58,22 @@ export function APMSection({ bucketSize }: Props) {
   const chartTheme = useChartTheme();
   const history = useHistory();
   const { forceUpdate, hasDataMap } = useHasData();
-  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
+  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } =
+    useDatePickerContext();
 
   const { data, status } = useFetcher(
     () => {
-      if (bucketSize) {
+      if (bucketSize && absoluteStart && absoluteEnd) {
         return getDataHandler('apm')?.fetchData({
           absoluteTime: { start: absoluteStart, end: absoluteEnd },
           relativeTime: { start: relativeStart, end: relativeEnd },
           ...bucketSize,
         });
       }
     },
-    // Absolute times shouldn't be used here, since it would refetch on every render
+    // `forceUpdate` and `lastUpdated` should trigger a reload
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [bucketSize, relativeStart, relativeEnd, forceUpdate]
+    [bucketSize, relativeStart, relativeEnd, absoluteStart, absoluteEnd, forceUpdate, lastUpdated]
   );
 
   if (!hasDataMap.apm?.hasData) {

diff --git a/x-pack/plugins/observability/public/components/app/section/logs/index.tsx b/x-pack/plugins/observability/public/components/app/section/logs/index.tsx
@@ -26,7 +26,7 @@ import { getDataHandler } from '../../../../data_handler';
 import { useChartTheme } from '../../../../hooks/use_chart_theme';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useHasData } from '../../../../hooks/use_has_data';
-import { useTimeRange } from '../../../../hooks/use_time_range';
+import { useDatePickerContext } from '../../../../hooks/use_date_picker_context';
 import { LogsFetchDataResponse } from '../../../../typings';
 import { formatStatValue } from '../../../../utils/format_stat_value';
 import { ChartContainer } from '../../chart_container';
@@ -57,21 +57,23 @@ export function LogsSection({ bucketSize }: Props) {
   const history = useHistory();
   const chartTheme = useChartTheme();
   const { forceUpdate, hasDataMap } = useHasData();
-  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
+  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } =
+    useDatePickerContext();
 
   const { data, status } = useFetcher(
     () => {
-      if (bucketSize) {
+      if (bucketSize && absoluteStart && absoluteEnd) {
         return getDataHandler('infra_logs')?.fetchData({
           absoluteTime: { start: absoluteStart, end: absoluteEnd },
           relativeTime: { start: relativeStart, end: relativeEnd },
           ...bucketSize,
         });
       }
     },
-    // Absolute times shouldn't be used here, since it would refetch on every render
+
+    // `forceUpdate` and `lastUpdated` trigger a reload
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [bucketSize, relativeStart, relativeEnd, forceUpdate]
+    [bucketSize, relativeStart, relativeEnd, absoluteStart, absoluteEnd, forceUpdate, lastUpdated]
   );
 
   if (!hasDataMap.infra_logs?.hasData) {

diff --git a/x-pack/plugins/observability/public/components/app/section/metrics/index.tsx b/x-pack/plugins/observability/public/components/app/section/metrics/index.tsx
@@ -25,7 +25,7 @@ import { SectionContainer } from '../';
 import { getDataHandler } from '../../../../data_handler';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useHasData } from '../../../../hooks/use_has_data';
-import { useTimeRange } from '../../../../hooks/use_time_range';
+import { useDatePickerContext } from '../../../../hooks/use_date_picker_context';
 import { HostLink } from './host_link';
 import { formatDuration } from './lib/format_duration';
 import { MetricWithSparkline } from './metric_with_sparkline';
@@ -51,25 +51,31 @@ const bytesPerSecondFormatter = (value: NumberOrNull) =>
 
 export function MetricsSection({ bucketSize }: Props) {
   const { forceUpdate, hasDataMap } = useHasData();
-  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
+  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } =
+    useDatePickerContext();
   const [sortDirection, setSortDirection] = useState<Direction>('asc');
   const [sortField, setSortField] = useState<keyof MetricsFetchDataSeries>('uptime');
   const [sortedData, setSortedData] = useState<MetricsFetchDataResponse | null>(null);
 
-  const { data, status } = useFetcher(
-    () => {
-      if (bucketSize) {
-        return getDataHandler('infra_metrics')?.fetchData({
-          absoluteTime: { start: absoluteStart, end: absoluteEnd },
-          relativeTime: { start: relativeStart, end: relativeEnd },
-          ...bucketSize,
-        });
-      }
-    },
-    // Absolute times shouldn't be used here, since it would refetch on every render
+  const { data, status } = useFetcher(() => {
+    if (bucketSize && absoluteStart && absoluteEnd) {
+      return getDataHandler('infra_metrics')?.fetchData({
+        absoluteTime: { start: absoluteStart, end: absoluteEnd },
+        relativeTime: { start: relativeStart, end: relativeEnd },
+        ...bucketSize,
+      });
+    }
+    // `forceUpdate` and `lastUpdated` should trigger a reload
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [bucketSize, relativeStart, relativeEnd, forceUpdate]
-  );
+  }, [
+    bucketSize,
+    relativeStart,
+    relativeEnd,
+    absoluteStart,
+    absoluteEnd,
+    forceUpdate,
+    lastUpdated,
+  ]);
 
   const handleTableChange = useCallback(
     ({ sort }: Criteria<MetricsFetchDataSeries>) => {
@@ -125,7 +131,7 @@ export function MetricsSection({ bucketSize }: Props) {
         <HostLink
           id={record.id}
           name={value}
-          timerange={{ from: absoluteStart, to: absoluteEnd }}
+          timerange={{ from: absoluteStart!, to: absoluteEnd! }}
         />
       ),
     },

diff --git a/x-pack/plugins/observability/public/components/app/section/uptime/index.tsx b/x-pack/plugins/observability/public/components/app/section/uptime/index.tsx
@@ -27,7 +27,7 @@ import { getDataHandler } from '../../../../data_handler';
 import { useChartTheme } from '../../../../hooks/use_chart_theme';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useHasData } from '../../../../hooks/use_has_data';
-import { useTimeRange } from '../../../../hooks/use_time_range';
+import { useDatePickerContext } from '../../../../hooks/use_date_picker_context';
 import { Series } from '../../../../typings';
 import { ChartContainer } from '../../chart_container';
 import { StyledStat } from '../../styled_stat';
@@ -43,21 +43,22 @@ export function UptimeSection({ bucketSize }: Props) {
   const chartTheme = useChartTheme();
   const history = useHistory();
   const { forceUpdate, hasDataMap } = useHasData();
-  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
+  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } =
+    useDatePickerContext();
 
   const { data, status } = useFetcher(
     () => {
-      if (bucketSize) {
+      if (bucketSize && absoluteStart && absoluteEnd) {
         return getDataHandler('synthetics')?.fetchData({
           absoluteTime: { start: absoluteStart, end: absoluteEnd },
           relativeTime: { start: relativeStart, end: relativeEnd },
           ...bucketSize,
         });
       }
     },
-    // Absolute times shouldn't be used here, since it would refetch on every render
+    // `forceUpdate` and `lastUpdated` should trigger a reload
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [bucketSize, relativeStart, relativeEnd, forceUpdate]
+    [bucketSize, relativeStart, relativeEnd, absoluteStart, absoluteEnd, forceUpdate, lastUpdated]
   );
 
   if (!hasDataMap.synthetics?.hasData) {

diff --git a/x-pack/plugins/observability/public/components/app/section/ux/index.tsx b/x-pack/plugins/observability/public/components/app/section/ux/index.tsx
@@ -11,7 +11,7 @@ import { SectionContainer } from '../';
 import { getDataHandler } from '../../../../data_handler';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useHasData } from '../../../../hooks/use_has_data';
-import { useTimeRange } from '../../../../hooks/use_time_range';
+import { useDatePickerContext } from '../../../../hooks/use_date_picker_context';
 import CoreVitals from '../../../shared/core_web_vitals';
 import { BucketSize } from '../../../../pages/overview';
 
@@ -21,13 +21,14 @@ interface Props {
 
 export function UXSection({ bucketSize }: Props) {
   const { forceUpdate, hasDataMap } = useHasData();
-  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
+  const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } =
+    useDatePickerContext();
   const uxHasDataResponse = hasDataMap.ux;
   const serviceName = uxHasDataResponse?.serviceName as string;
 
   const { data, status } = useFetcher(
     () => {
-      if (serviceName && bucketSize) {
+      if (serviceName && bucketSize && absoluteStart && absoluteEnd) {
         return getDataHandler('ux')?.fetchData({
           absoluteTime: { start: absoluteStart, end: absoluteEnd },
           relativeTime: { start: relativeStart, end: relativeEnd },
@@ -36,9 +37,18 @@ export function UXSection({ bucketSize }: Props) {
         });
       }
     },
-    // Absolute times shouldn't be used here, since it would refetch on every render
+    // `forceUpdate` and `lastUpdated` should trigger a reload
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [bucketSize, relativeStart, relativeEnd, forceUpdate, serviceName]
+    [
+      bucketSize,
+      relativeStart,
+      relativeEnd,
+      absoluteStart,
+      absoluteEnd,
+      forceUpdate,
+      serviceName,
+      lastUpdated,
+    ]
   );
 
   if (!uxHasDataResponse?.hasData) {

diff --git a/x-pack/plugins/observability/public/components/shared/date_picker/date_picker.test.tsx b/x-pack/plugins/observability/public/components/shared/date_picker/date_picker.test.tsx
@@ -15,6 +15,7 @@ import qs from 'query-string';
 import { DatePicker } from './';
 import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';
 import { of } from 'rxjs';
+import { DatePickerContextProvider } from '../../../context/date_picker_context';
 
 let history: MemoryHistory;
 
@@ -69,7 +70,13 @@ function mountDatePicker(initialParams: {
           data: {
             query: {
               timefilter: {
-                timefilter: { setTime: setTimeSpy, getTime: getTimeSpy },
+                timefilter: {
+                  setTime: setTimeSpy,
+                  getTime: getTimeSpy,
+                  getTimeDefaults: jest.fn().mockReturnValue({}),
+                  getRefreshIntervalDefaults: jest.fn().mockReturnValue({}),
+                  getRefreshInterval: jest.fn().mockReturnValue({}),
+                },
               },
             },
           },
@@ -79,7 +86,9 @@ function mountDatePicker(initialParams: {
           },
         }}
       >
-        <DatePickerWrapper />
+        <DatePickerContextProvider>
+          <DatePickerWrapper />
+        </DatePickerContextProvider>
       </KibanaContextProvider>
     </Router>
   );
@@ -106,15 +115,16 @@ describe('DatePicker', () => {
       rangeTo: 'now',
     });
 
-    expect(mockHistoryReplace).toHaveBeenCalledTimes(0);
+    // It updates the URL when it doesn't contain the range.
+    expect(mockHistoryPush).toHaveBeenCalledTimes(1);
 
     wrapper.find(EuiSuperDatePicker).props().onTimeChange({
       start: 'now-90m',
       end: 'now-60m',
       isInvalid: false,
       isQuickSelection: true,
     });
-    expect(mockHistoryPush).toHaveBeenCalledTimes(1);
+    expect(mockHistoryPush).toHaveBeenCalledTimes(2);
     expect(mockHistoryPush).toHaveBeenLastCalledWith(
       expect.objectContaining({
         search: 'rangeFrom=now-90m&rangeTo=now-60m',
@@ -152,17 +162,6 @@ describe('DatePicker', () => {
   });
 
   describe('if both `rangeTo` and `rangeFrom` is set', () => {
-    it('calls setTime ', async () => {
-      const { setTimeSpy } = mountDatePicker({
-        rangeTo: 'now-20m',
-        rangeFrom: 'now-22m',
-      });
-      expect(setTimeSpy).toHaveBeenCalledWith({
-        to: 'now-20m',
-        from: 'now-22m',
-      });
-    });
-
     it('does not update the url', () => {
       expect(mockHistoryReplace).toHaveBeenCalledTimes(0);
     });