COO-1689: fix: prevent repeated reload of fetch useEffect

Reduce dependencies of useEffect, use a Ref for the result.

Author: alanconway

web/locales/en/plugin__troubleshooting-panel-console-plugin.json

@@ -20,23 +20,23 @@
   "From": "From",
   "Goals": "Goals",
   "Include data from this time range": "Include data from this time range",
-  "Korrel8r Error": "Korrel8r Error",
   "Last": "Last",
   "Logging Plugin Disabled": "Logging Plugin Disabled",
   "Neighbours": "Neighbours",
   "Neighbours or Goal search": "Neighbours or Goal search",
   "Netflow Plugin Disabled": "Netflow Plugin Disabled",
-  "No correlated data was found": "No correlated data was found",
+  "No correlated data found": "No correlated data found",
   "No Correlated Signals Found": "No Correlated Signals Found",
   "No starting point for correlation": "No starting point for correlation",
   "Open the Troubleshooting Panel": "Open the Troubleshooting Panel",
   "Other duration": "Other duration",
   "Quickly diagnose and resolve issues by exploring correlated observability signals for resources.": "Quickly diagnose and resolve issues by exploring correlated observability signals for resources.",
   "Refresh": "Refresh",
   "Refresh the graph by re-running the current search.": "Refresh the graph by re-running the current search.",
-  "Request Failed": "Request Failed",
   "Save": "Save",
   "Search": "Search",
+  "Search Error": "Search Error",
+  "Search Failed": "Search Failed",
   "Search Type": "Search Type",
   "Searching": "Searching",
   "Select starting data": "Select starting data",

web/src/components/Korrel8rPanel.tsx

@@ -55,43 +55,40 @@ export default function Korrel8rPanel() {
   // Showing advanced query
   const [showAdvanced, setShowAdvanced] = React.useState(false);
 
-  // Compute constraint from period for the API call and topology navigation.
+  // Compute constraint from search period.
   const constraint = React.useMemo((): korrel8r.Constraint | undefined => {
     if (!search.period) return undefined;
-    const [pStart, pEnd] = search.period.startEnd();
-    return new korrel8r.Constraint({ start: pStart, end: pEnd });
-  }, [search.period]);
+    const [start, end] = search.period.startEnd();
+    return new korrel8r.Constraint({ start, end });
+  }, [search?.period]);
 
-  // Call korrel8r service to get results for the current search.
-  React.useEffect(() => {
-    // If we already have a stored result, do nothing.
-    // Dispatching SetSearch sets result=null, triggering a new fetch.
-    if (result) return;
-
-    let cancelled = false;
-    const onResult = (newResult: Result) => {
-      if (!cancelled) dispatch(setResult(newResult));
-    };
+  // Dispatch a new search value, making a new reference (reducer clears result automatically).
+  const dispatchSearch = React.useCallback(
+    (search: Search) => dispatch(setSearch({ ...search })),
+    [dispatch],
+  );
+  // Dispatch a new result, no special actions.
+  const dispatchResult = React.useCallback(
+    (result: Result) => dispatch(setResult(result)),
+    [dispatch],
+  );
 
-    const queryStr = (search?.queryStr ?? '').trim();
+  // Set up default locationQuery search on mount, when query is blank.
+  React.useEffect(() => {
+    if (!search?.queryStr && locationQuery?.toString())
+      dispatchSearch({ ...defaultSearch, queryStr: locationQuery.toString() });
+  }, [locationQuery, dispatchSearch, search?.queryStr]);
 
+  // Fetch a new result from the korrel8r service when the search changes.
+  React.useEffect(() => {
+    const queryStr = search?.queryStr;
     if (!queryStr) {
-      // Default query or empty result
-      if (locationQuery?.toString()) {
-        dispatch(setSearch({ ...defaultSearch, queryStr: locationQuery?.toString() }));
-      } else {
-        dispatch(
-          setResult({
-            title: t('Empty Query'),
-            message: t('No starting point for correlation'),
-          }),
-        );
-      }
+      dispatchResult({ title: t('Empty Query'), message: t('No starting point for correlation') });
       return;
     }
-
+    let cancelled = false;
     const start: api.Start = {
-      queries: queryStr ? [queryStr] : undefined,
+      queries: [queryStr],
       constraint: constraint?.toAPI(),
     };
 
@@ -101,18 +98,17 @@ export default function Korrel8rPanel() {
         : getNeighborsGraph({ start, depth: search.depth });
     fetch
       .then((response: api.Graph) => {
-        if (Array.isArray(response?.nodes) && response.nodes.length > 0) {
-          onResult({ graph: new korrel8r.Graph(response) });
-        } else {
-          onResult({
-            title: t('Empty Result'),
-            message: t('No correlated data was found'),
-          });
-        }
+        if (cancelled) return;
+        dispatchResult(
+          Array.isArray(response?.nodes) && response.nodes.length > 0
+            ? { graph: new korrel8r.Graph(response) }
+            : { title: t('Empty Result'), message: t('No correlated data found') },
+        );
       })
       .catch((e: api.ApiError) => {
-        onResult({
-          title: e?.body?.error ? t('Korrel8r Error') : t('Request Failed'),
+        if (cancelled) return;
+        dispatchResult({
+          title: e?.body?.error ? t('Search Error') : t('Search Failed'),
           message: e?.body?.error || e.message || 'Unknown Error',
           isError: true,
         });
@@ -121,22 +117,18 @@ export default function Korrel8rPanel() {
       cancelled = true;
       fetch.cancel();
     };
-  }, [search, t, result, constraint, dispatch, locationQuery]);
+  }, [search, constraint, dispatchResult, t]);
 
   const advancedToggleID = 'query-toggle';
   const advancedContentID = 'query-content';
 
-  // Dispatch a new search.
-  // The SetSearch reducer clears result, triggering the fetch effect.
-  const doSearch = React.useCallback((s: Search) => dispatch(setSearch(s)), [dispatch]);
-
   return (
     <>
       <Stack>
         <Flex
           className="tp-plugin__panel-toolbar"
           direction={{ default: 'row' }}
-          flexWrap={{ default: 'nowrap' }}
+          flexWrap={{ default: 'wrap' }}
           alignItems={{ default: 'alignItemsCenter' }}
           spaceItems={{ default: 'spaceItemsXs' }}
         >
@@ -154,7 +146,7 @@ export default function Korrel8rPanel() {
               isAriaDisabled={!locationQuery || isFocused}
               size="sm"
               onClick={() => {
-                doSearch({
+                dispatchSearch({
                   ...defaultSearch,
                   queryStr: locationQuery?.toString(),
                   period: search?.period,
@@ -172,7 +164,7 @@ export default function Korrel8rPanel() {
               <TimeRangeDropdown
                 className="tp-plugin__compact-control"
                 period={search.period ?? defaultSearch.period}
-                onChange={(period: time.Period) => doSearch({ ...search, period })}
+                onChange={(period: time.Period) => dispatchSearch({ ...search, period })}
               />
             </Tooltip>
           </Flex>
@@ -198,7 +190,7 @@ export default function Korrel8rPanel() {
                 variant="link"
                 size="sm"
                 isAriaDisabled={!search?.queryStr}
-                onClick={() => doSearch(search)}
+                onClick={() => dispatchSearch(search)}
                 aria-label={t('Refresh')}
               >
                 <SyncIcon />
@@ -216,7 +208,7 @@ export default function Korrel8rPanel() {
         >
           <AdvancedSearchForm
             search={search}
-            onSearch={doSearch}
+            onSearch={dispatchSearch}
             onCancel={() => setShowAdvanced(false)}
           />
         </ExpandableSection>