[ML] Explain log rate spikes: Fix hooks caching. (#136645)

Fixes issues where hooks would return stale data (index pattern, time ranges, total docs etc.).
elastic · Jul 19, 2022 · b264dbc · b264dbc
1 parent b31b076
commit b264dbc
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 49 deletions.
diff --git a/...ugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_wrapper.tsx b/...ugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_wrapper.tsx
@@ -52,17 +52,9 @@ export interface ExplainLogRateSpikesWrapperProps {
 export const ExplainLogRateSpikesWrapper: FC<ExplainLogRateSpikesWrapperProps> = ({ dataView }) => {
   const [globalState, setGlobalState] = useUrlState('_g');
 
-  const { docStats, timefilter } = useData(dataView, setGlobalState);
+  const { docStats, timefilter, earliest, latest } = useData(dataView, setGlobalState);
   const [windowParameters, setWindowParameters] = useState<WindowParameters | undefined>();
 
-  const activeBounds = timefilter.getActiveBounds();
-  let earliest: number | undefined;
-  let latest: number | undefined;
-  if (activeBounds !== undefined) {
-    earliest = activeBounds.min?.valueOf();
-    latest = activeBounds.max?.valueOf();
-  }
-
   useEffect(() => {
     if (globalState?.time !== undefined) {
       timefilter.setTime({

diff --git a/x-pack/plugins/aiops/public/hooks/use_data.ts b/x-pack/plugins/aiops/public/hooks/use_data.ts
@@ -24,6 +24,9 @@ export const useData = (
   const { services } = useAiOpsKibana();
   const { uiSettings } = services;
   const [lastRefresh, setLastRefresh] = useState(0);
+  const [fieldStatsRequest, setFieldStatsRequest] = useState<
+    DocumentStatsSearchStrategyParams | undefined
+  >();
 
   const _timeBuckets = useMemo(() => {
     return new TimeBuckets({
@@ -39,47 +42,31 @@ export const useData = (
     autoRefreshSelector: true,
   });
 
-  const fieldStatsRequest: DocumentStatsSearchStrategyParams | undefined = useMemo(
-    () => {
-      // Obtain the interval to use for date histogram aggregations
-      // (such as the document count chart). Aim for 75 bars.
-      const buckets = _timeBuckets;
-      const tf = timefilter;
-      if (!buckets || !tf || !currentDataView) return;
-      const activeBounds = tf.getActiveBounds();
-      let earliest: number | undefined;
-      let latest: number | undefined;
-      if (activeBounds !== undefined && currentDataView.timeFieldName !== undefined) {
-        earliest = activeBounds.min?.valueOf();
-        latest = activeBounds.max?.valueOf();
-      }
-      const bounds = tf.getActiveBounds();
-      const BAR_TARGET = 75;
-      buckets.setInterval('auto');
-      if (bounds) {
-        buckets.setBounds(bounds);
-        buckets.setBarTarget(BAR_TARGET);
-      }
-      const aggInterval = buckets.getInterval();
+  const { docStats } = useDocumentCountStats(fieldStatsRequest, lastRefresh);
 
-      return {
-        earliest,
-        latest,
-        intervalMs: aggInterval?.asMilliseconds(),
+  function updateFieldStatsRequest() {
+    const timefilterActiveBounds = timefilter.getActiveBounds();
+    if (timefilterActiveBounds !== undefined) {
+      const BAR_TARGET = 75;
+      _timeBuckets.setInterval('auto');
+      _timeBuckets.setBounds(timefilterActiveBounds);
+      _timeBuckets.setBarTarget(BAR_TARGET);
+      setFieldStatsRequest({
+        earliest: timefilterActiveBounds.min?.valueOf(),
+        latest: timefilterActiveBounds.max?.valueOf(),
+        intervalMs: _timeBuckets.getInterval()?.asMilliseconds(),
         index: currentDataView.title,
         timeFieldName: currentDataView.timeFieldName,
         runtimeFieldMap: currentDataView.getRuntimeMappings(),
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_timeBuckets, timefilter, currentDataView.id, lastRefresh]
-  );
-  const { docStats } = useDocumentCountStats(fieldStatsRequest, lastRefresh);
+      });
+      setLastRefresh(Date.now());
+    }
+  }
 
   useEffect(() => {
     const timeUpdateSubscription = merge(
-      timefilter.getTimeUpdate$(),
       timefilter.getAutoRefreshFetch$(),
+      timefilter.getTimeUpdate$(),
       aiopsRefresh$
     ).subscribe(() => {
       if (onUpdate) {
@@ -88,7 +75,19 @@ export const useData = (
           refreshInterval: timefilter.getRefreshInterval(),
         });
       }
-      setLastRefresh(Date.now());
+      updateFieldStatsRequest();
+    });
+    return () => {
+      timeUpdateSubscription.unsubscribe();
+    };
+  });
+
+  // This hook listens just for an initial update of the timefilter to be switched on.
+  useEffect(() => {
+    const timeUpdateSubscription = timefilter.getEnabledUpdated$().subscribe(() => {
+      if (fieldStatsRequest === undefined) {
+        updateFieldStatsRequest();
+      }
     });
     return () => {
       timeUpdateSubscription.unsubscribe();
@@ -98,5 +97,7 @@ export const useData = (
   return {
     docStats,
     timefilter,
+    earliest: fieldStatsRequest?.earliest,
+    latest: fieldStatsRequest?.latest,
   };
 };
diff --git a/x-pack/plugins/aiops/public/hooks/use_document_count_stats.ts b/x-pack/plugins/aiops/public/hooks/use_document_count_stats.ts
@@ -72,7 +72,7 @@ export function useDocumentCountStats<TParams extends DocumentStatsSearchStrateg
     try {
       const resp: any = await lastValueFrom(
         data.search.search({
-          params: getDocumentCountStatsRequest(searchParams).body,
+          params: getDocumentCountStatsRequest(searchParams),
         })
       );
       const documentCountStats = processDocumentCountStats(resp?.rawResponse, searchParams);

diff --git a/x-pack/plugins/aiops/public/hooks/use_storage.ts b/x-pack/plugins/aiops/public/hooks/use_storage.ts
@@ -8,7 +8,7 @@
 import { useCallback, useState } from 'react';
 import { useAiOpsKibana } from '../kibana_context';
 
-export const AIOPS_FROZEN_TIER_PREFERENCE = 'aiop.frozenDataTierPreference';
+export const AIOPS_FROZEN_TIER_PREFERENCE = 'aiops.frozenDataTierPreference';
 
 export type AiOps = Partial<{
   [AIOPS_FROZEN_TIER_PREFERENCE]: 'exclude_frozen' | 'include_frozen';

diff --git a/x-pack/plugins/aiops/public/hooks/use_time_filter.ts b/x-pack/plugins/aiops/public/hooks/use_time_filter.ts
@@ -21,15 +21,15 @@ export const useTimefilter = ({
   const { timefilter } = services.data.query.timefilter;
 
   useEffect(() => {
-    if (timeRangeSelector === true) {
+    if (timeRangeSelector === true && !timefilter.isTimeRangeSelectorEnabled()) {
       timefilter.enableTimeRangeSelector();
-    } else if (timeRangeSelector === false) {
+    } else if (timeRangeSelector === false && timefilter.isTimeRangeSelectorEnabled()) {
       timefilter.disableTimeRangeSelector();
     }
 
-    if (autoRefreshSelector === true) {
+    if (autoRefreshSelector === true && !timefilter.isAutoRefreshSelectorEnabled()) {
       timefilter.enableAutoRefreshSelector();
-    } else if (autoRefreshSelector === false) {
+    } else if (autoRefreshSelector === false && timefilter.isAutoRefreshSelectorEnabled()) {
       timefilter.disableAutoRefreshSelector();
     }
   }, [timeRangeSelector, autoRefreshSelector, timefilter]);