Refactor refresh logic in useMetricsExplorerState

elastic · Mar 20, 2023 · 400557f · 400557f
1 parent 653471d
commit 400557f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 28 deletions.
diff --git a/...gins/infra/public/pages/metrics/metrics_explorer/hooks/use_metric_explorer_state.test.tsx b/...gins/infra/public/pages/metrics/metrics_explorer/hooks/use_metric_explorer_state.test.tsx
@@ -101,7 +101,7 @@ describe('useMetricsExplorerState', () => {
       expect(result.all.length).toBe(2);
       const numberOfHookCalls = result.all.length;
       act(() => {
-        result.current.refetch();
+        result.current.refresh();
       });
       expect(result.all.length).toBe(numberOfHookCalls + 1);
     });

diff --git a/...ck/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metric_explorer_state.ts b/...ck/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metric_explorer_state.ts
@@ -28,16 +28,6 @@ export interface MetricExplorerViewState {
   id?: string;
 }
 
-const getTimestamps = (from: string, to: string) => {
-  const fromTimestamp = DateMath.parse(from)!.valueOf();
-  const toTimestamp = DateMath.parse(to, { roundUp: true })!.valueOf();
-
-  return {
-    fromTimestamp,
-    toTimestamp,
-  };
-};
-
 export const useMetricsExplorerState = (
   source: MetricsSourceConfigurationProperties,
   derivedIndexPattern: DataViewBase,
@@ -55,6 +45,17 @@ export const useMetricsExplorerState = (
     setTimestamps,
   } = useMetricsExplorerOptionsContainerContext();
 
+  const refreshTimestamps = useCallback(() => {
+    const fromTimestamp = DateMath.parse(timeRange.from)!.valueOf();
+    const toTimestamp = DateMath.parse(timeRange.to, { roundUp: true })!.valueOf();
+
+    setTimestamps({
+      interval: timeRange.interval,
+      fromTimestamp,
+      toTimestamp,
+    });
+  }, [setTimestamps, timeRange]);
+
   const { data, error, fetchNextPage, isLoading } = useMetricsExplorerData(
     options,
     source,
@@ -64,11 +65,10 @@ export const useMetricsExplorerState = (
   );
 
   useEffect(() => {
-    setTimestamps({
-      interval: timeRange.interval,
-      ...getTimestamps(timeRange.from, timeRange.to),
-    });
-  }, [timeRange, setTimestamps, options, setOptions]);
+    refreshTimestamps();
+    // options, setOptions are added to dependencies since we need to refresh the timestamps
+    // every time options change
+  }, [options, setOptions, refreshTimestamps]);
 
   const handleTimeChange = useCallback(
     (start: string, end: string) => {
@@ -77,13 +77,6 @@ export const useMetricsExplorerState = (
     [setTimeRange, timeRange.interval]
   );
 
-  const refetch = useCallback(() => {
-    setTimestamps({
-      interval: timeRange.interval,
-      ...getTimestamps(timeRange.from, timeRange.to),
-    });
-  }, [setTimestamps, timeRange]);
-
   const handleGroupByChange = useCallback(
     (groupBy: string | null | string[]) => {
       setOptions({
@@ -165,6 +158,6 @@ export const useMetricsExplorerState = (
     onViewStateChange,
     options,
     setChartOptions,
-    refetch,
+    refresh: refreshTimestamps,
   };
 };
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx
@@ -43,7 +43,7 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
     handleTimeChange,
     handleLoadMore,
     onViewStateChange,
-    refetch,
+    refresh,
   } = useMetricsExplorerState(source, derivedIndexPattern, enabled);
   const { currentView, shouldLoadDefault } = useSavedViewContext();
 
@@ -92,7 +92,7 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
           timeRange={timeRange}
           options={options}
           chartOptions={chartOptions}
-          onRefresh={refetch}
+          onRefresh={refresh}
           onTimeChange={handleTimeChange}
           onGroupByChange={handleGroupByChange}
           onFilterQuerySubmit={handleFilterQuerySubmit}
@@ -107,7 +107,7 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
               defaultMessage: 'It looks like the request failed with "{message}"',
               values: { message: error.message },
             })}
-            onRefetch={refetch}
+            onRefetch={refresh}
             refetchText="Try Again"
           />
         ) : (
@@ -120,7 +120,7 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
             chartOptions={chartOptions}
             onLoadMore={handleLoadMore}
             onFilter={handleFilterQuerySubmit}
-            onRefetch={refetch}
+            onRefetch={refresh}
             onTimeChange={handleTimeChange}
           />
         )}