Refactor discover totalHits code

elastic · Oct 14, 2024 · 3f08047 · 3f08047
1 parent 2b7c72c
commit 3f08047
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 11 deletions.
diff --git a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts
@@ -62,6 +62,7 @@ export const useDiscoverHistogram = ({
 }: UseDiscoverHistogramProps) => {
   const services = useDiscoverServices();
   const savedSearchData$ = stateContainer.dataState.data$;
+  const savedSearchHits$ = savedSearchData$.totalHits$;
   const savedSearchState = useSavedSearch();
   const isEsqlMode = useIsEsqlMode();
 
@@ -153,10 +154,7 @@ export const useDiscoverHistogram = ({
    * Total hits
    */
 
-  const setTotalHitsError = useMemo(
-    () => sendErrorTo(savedSearchData$.totalHits$),
-    [savedSearchData$.totalHits$]
-  );
+  const setTotalHitsError = useMemo(() => sendErrorTo(savedSearchHits$), [savedSearchHits$]);
 
   useEffect(() => {
     const subscription = createTotalHitsObservable(unifiedHistogram?.state$)?.subscribe(
@@ -172,7 +170,7 @@ export const useDiscoverHistogram = ({
           return;
         }
 
-        const { result: totalHitsResult } = savedSearchData$.totalHits$.getValue();
+        const { result: totalHitsResult } = savedSearchHits$.getValue();
 
         if (
           (status === UnifiedHistogramFetchStatus.loading ||
@@ -184,11 +182,34 @@ export const useDiscoverHistogram = ({
           return;
         }
 
-        // Sync the totalHits$ observable with the unified histogram state
-        savedSearchData$.totalHits$.next({
-          fetchStatus: status.toString() as FetchStatus,
-          result,
-        });
+        const fetchStatus = status.toString() as FetchStatus;
+        if (
+          fetchStatus === FetchStatus.COMPLETE &&
+          savedSearchHits$.getValue().fetchStatus === FetchStatus.COMPLETE &&
+          result !== savedSearchHits$.getValue().result
+        ) {
+          // this is a workaround to make sure the new total hits value is displayed
+          // a different value without a loading state in between would lead to be ignored by useDataState
+          addLog(
+            '[UnifiedHistogram] send loading to totalHits$ to make sure the new value is displayed',
+            { status, result }
+          );
+          savedSearchHits$.next({
+            fetchStatus: FetchStatus.LOADING,
+          });
+        }
+
+        const isSavedSearchLoading =
+          savedSearchHits$.getValue().fetchStatus === FetchStatus.LOADING;
+        const isUnifiedHistogramLoading = status === UnifiedHistogramFetchStatus.loading;
+
+        // Sync the totalHits$ observable with the unified histogram state unless both are set to loading
+        if (isSavedSearchLoading !== isUnifiedHistogramLoading) {
+          savedSearchHits$.next({
+            fetchStatus,
+            result,
+          });
+        }
 
         if (status !== UnifiedHistogramFetchStatus.complete || typeof result !== 'number') {
           return;
@@ -205,7 +226,7 @@ export const useDiscoverHistogram = ({
   }, [
     isEsqlMode,
     savedSearchData$.main$,
-    savedSearchData$.totalHits$,
+    savedSearchHits$,
     setTotalHitsError,
     stateContainer.appState,
     unifiedHistogram?.state$,

diff --git a/src/plugins/discover/public/application/main/data_fetching/fetch_all.ts b/src/plugins/discover/public/application/main/data_fetching/fetch_all.ts
@@ -98,6 +98,8 @@ export function fetchAll(
       sendLoadingMsg(dataSubjects.totalHits$, {
         result: dataSubjects.totalHits$.getValue().result,
       });
+    } else {
+      sendLoadingMsg(dataSubjects.totalHits$);
     }
 
     // Start fetching all required requests

diff --git a/...lugins/discover/public/application/main/state_management/discover_data_state_container.ts b/...lugins/discover/public/application/main/state_management/discover_data_state_container.ts
@@ -185,6 +185,12 @@ export function getDataStateContainer({
     documents$: new BehaviorSubject<DataDocumentsMsg>(initialState),
     totalHits$: new BehaviorSubject<DataTotalHitsMsg>(initialState),
   };
+  // This is debugging code, helping you to understand which messages are sent to the data observables
+  // Adding a debugger in the functions can be helpful to understand what triggers a message
+  // dataSubjects.main$.subscribe((msg) => addLog('dataSubjects.main$', msg));
+  // dataSubjects.documents$.subscribe((msg) => addLog('dataSubjects.documents$', msg));
+  // dataSubjects.totalHits$.subscribe((msg) => addLog('dataSubjects.totalHits$', msg););
+  // Add window.ELASTIC_DISCOVER_LOGGER = 'debug' to see messages in console
 
   let autoRefreshDone: AutoRefreshDoneFn | undefined | null = null;
   /**