Merge pull request #203 from alanconway/coo-1650-metric-blank

COO-1650: Troubleshooting panel not updated by internal URL changes.

Author: openshift-merge-bot[bot]

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

@@ -5,16 +5,18 @@
   "Advanced search parameters": "Advanced search parameters",
   "Cancel": "Cancel",
   "Correlation graph already matches search": "Correlation graph already matches search",
-  "Correlation graph is focused on the main view.": "Correlation graph is focused on the main view.",
+  "Correlation graph is already focused on the current view.": "Correlation graph is already focused on the current view.",
   "Correlation result was empty.": "Correlation result was empty.",
-  "Current view does not allow correlation.": "Current view does not allow correlation.",
+  "Current view does not provide a starting point for correlation": "Current view does not provide a starting point for correlation",
   "Custom": "Custom",
   "Custom duration": "Custom duration",
   "Custom time range": "Custom time range",
+  "Empty Query": "Empty Query",
+  "Empty Result": "Empty Result",
   "End time must be after start time": "End time must be after start time",
   "Fix validation errors before searching": "Fix validation errors before searching",
   "Focus": "Focus",
-  "Focus the correlation on the main view.": "Focus the correlation on the main view.",
+  "Focus the correlation on the current view.": "Focus the correlation on the current view.",
   "From": "From",
   "Goals": "Goals",
   "Include data from this time range": "Include data from this time range",
@@ -24,7 +26,9 @@
   "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 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.",

web/src/components/Korrel8rPanel.tsx

@@ -62,46 +62,66 @@ export default function Korrel8rPanel() {
     return new korrel8r.Constraint({ start: pStart, end: pEnd });
   }, [search.period]);
 
-  const initialized = React.useRef(false);
+  // Call korrel8r service to get results for the current search.
   React.useEffect(() => {
-    if (initialized.current) return; // Run once on mount
-    initialized.current = true;
-    if (!search?.queryStr && locationQuery) {
-      dispatch(setSearch({ ...defaultSearch, queryStr: locationQuery.toString() }));
-    }
-  }, [search?.queryStr, locationQuery, dispatch]);
-
-  React.useEffect(() => {
-    // Leave stored result in place if there is one.
-    // Dispatching SetSearch clears result to null, triggering a new fetch.
+    // If we already have a stored result, do nothing.
+    // Dispatching SetSearch sets result=null, triggering a new fetch.
     if (result) return;
 
-    const queryStr = search?.queryStr?.trim();
-    const start: api.Start = {
-      queries: queryStr ? [queryStr] : undefined,
-      constraint: constraint?.toAPI(),
-    };
     let cancelled = false;
     const onResult = (newResult: Result) => {
       if (!cancelled) dispatch(setResult(newResult));
     };
+
+    const queryStr = (search?.queryStr ?? '').trim();
+
+    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'),
+          }),
+        );
+      }
+      return;
+    }
+
+    const start: api.Start = {
+      queries: queryStr ? [queryStr] : undefined,
+      constraint: constraint?.toAPI(),
+    };
+
     const fetch =
       search.searchType === SearchType.Goal
         ? getGoalsGraph({ start, goals: [search.goal] })
         : getNeighborsGraph({ start, depth: search.depth });
     fetch
-      .then((response: api.Graph) => onResult({ graph: new korrel8r.Graph(response) }))
+      .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'),
+          });
+        }
+      })
       .catch((e: api.ApiError) => {
         onResult({
           title: e?.body?.error ? t('Korrel8r Error') : t('Request Failed'),
           message: e?.body?.error || e.message || 'Unknown Error',
+          isError: true,
         });
       });
     return () => {
       cancelled = true;
       fetch.cancel();
     };
-  }, [search, t, result, constraint, dispatch]);
+  }, [search, t, result, constraint, dispatch, locationQuery]);
 
   const advancedToggleID = 'query-toggle';
   const advancedContentID = 'query-content';
@@ -124,9 +144,9 @@ export default function Korrel8rPanel() {
             content={
               locationQuery
                 ? isFocused
-                  ? t('Correlation graph is focused on the main view.')
-                  : t('Focus the correlation on the main view.')
-                : t('Current view does not allow correlation.')
+                  ? t('Correlation graph is already focused on the current view.')
+                  : t('Focus the correlation on the current view.')
+                : t('Current view does not provide a starting point for correlation')
             }
           >
             <Button

web/src/hooks/useLocationQuery.ts

@@ -1,11 +1,48 @@
-import { useLocation } from 'react-router-dom-v5-compat';
+import * as React from 'react';
 import { Query, URIRef } from '../korrel8r/types';
 import { useDomains } from './useDomains';
 
+/** Get a snapshot of the current browser location */
+const getLocation = () => ({
+  pathname: window.location.pathname,
+  search: window.location.search,
+});
+
+/**
+ * Hook that tracks the browser location, reacting to all navigation changes.
+ *
+ * Uses requestAnimationFrame polling to detect URL changes rather than patching
+ * history.pushState/replaceState, avoiding conflicts with other code that may
+ * also intercept history methods (e.g. the console's router).
+ *
+ * react-router-dom-v5-compat's useLocation() doesn't update when the panel is
+ * rendered via useModal(), because the modal may not receive router context updates.
+ */
+const useBrowserLocation = () => {
+  const [location, setLocation] = React.useState(getLocation);
+  const lastHref = React.useRef(window.location.href);
+
+  React.useEffect(() => {
+    let rafId: number;
+    const check = () => {
+      const href = window.location.href;
+      if (href !== lastHref.current) {
+        lastHref.current = href;
+        setLocation(getLocation());
+      }
+      rafId = requestAnimationFrame(check);
+    };
+    rafId = requestAnimationFrame(check);
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  return location;
+};
+
 /** Returns the Korrel8r query for the current browser location or undefined */
 export const useLocationQuery = (): Query | undefined => {
   const domains = useDomains();
-  const location = useLocation();
+  const location = useBrowserLocation();
   try {
     const link = new URIRef(location.pathname + location.search);
     const q = domains.linkToQuery(link);