fix(#98): NO-JIRA: Persist query result

Speed up re-opening of the panel.
Fixes #98

Author: alanconway

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

@@ -4,8 +4,8 @@
   "Create a graph of correlated items from resources in the current view.": "Create a graph of correlated items from resources in the curret view.",
   "Distance": "Distance",
   "Find all paths to items of the specified goal class.": "Find all paths to items of the specified goal class.",
-  "Find all related data that can be reached by following up to N correlation rules. Follows rules from the start to directly related data, then from there to indirectly related data, up to the disance you specify.": "Find all related data that can be reached by following up to N correlation rules. Follows rules from the start to directly related data, then from there to indirectly related data, up to the disance you specify.",
   "Focus": "Focus",
+  "Follows correlation rules from the starting point to find related data, then continues the search from that data, up to the number of steps you specify.": "Follows correlation rules from the starting point to find related data, then continues the search from that data, up to the number of steps you specify.",
   "Goal Class": "Goal Class",
   "Korrel8r Error": "Korrel8r Error",
   "Logging Plugin Disabled": "Logging Plugin Disabled",
@@ -28,4 +28,4 @@
   "Troubleshooting": "Troubleshooting",
   "Troubleshooting Panel": "Troubleshooting Panel",
   "Unable to find Console Link": "Unable to find Console Link"
-}
+}

web/src/components/Korrel8rPanel.tsx

@@ -26,7 +26,14 @@ import { AlertDomain } from '../korrel8r/alert';
 import { allDomains } from '../korrel8r/all-domains';
 import * as api from '../korrel8r/client';
 import * as korrel8r from '../korrel8r/types';
-import { defaultSearch, Search, SearchType, setPersistedSearch } from '../redux-actions';
+import {
+  defaultSearch,
+  Result,
+  Search,
+  SearchResult,
+  SearchType,
+  setPersistedSearch,
+} from '../redux-actions';
 import { State } from '../redux-reducers';
 import * as time from '../time';
 import { HelpPopover as FieldLevelHelp } from './HelpPopover';
@@ -36,18 +43,11 @@ import TimeRangeFormGroup from './TimeRangeFormGroup';
 import { Korrel8rTopology } from './topology/Korrel8rTopology';
 import { LoadingTopology } from './topology/LoadingTopology';
 
-type Result = {
-  graph?: korrel8r.Graph;
-  message?: string;
-  title?: string;
-  isError?: boolean;
-};
-
 export default function Korrel8rPanel() {
   const { t } = useTranslation('plugin__troubleshooting-panel-console-plugin');
-  const persistedSearch = useSelector((state: State) => {
+  const searchResult: SearchResult = useSelector((state: State) => {
     return state.plugins?.tp?.get('persistedSearch');
-  }) as Search;
+  });
   const dispatch = useDispatch();
 
   // State
@@ -61,23 +61,19 @@ export default function Korrel8rPanel() {
     [alertIDs],
   );
   const locationQuery = useLocationQuery(domains);
-  const [search, setSearch] = React.useState<Search>(
-    persistedSearch?.queryStr
-      ? persistedSearch
-      : ({
-          ...defaultSearch,
-          queryStr: locationQuery?.toString(),
-          constraint: persistedSearch?.constraint,
-        } as Search),
-  );
-  const [result, setResult] = React.useState<Result | null>(null);
+  const [search, setSearch] = React.useState<Search>({
+    ...defaultSearch, // Default search parameters.
+    queryStr: locationQuery?.toString(), // Default query string.
+    ...searchResult?.search, // Use persisted search if available.
+  });
+  const [result, setResult] = React.useState<Result | null>(searchResult?.result ?? null);
   const [showQuery, setShowQuery] = React.useState(false);
 
   const focusTip = t('Create a graph of correlated items from resources in the current view.');
   const cannotFocus = t('The current view does not support correlation.');
 
   React.useEffect(() => {
-    // Set result = null to trigger a reload, don't run the query till then.
+    // Set result = null to trigger a new client request, don't run the query till then.
     if (result !== null) {
       return;
     }
@@ -86,7 +82,7 @@ export default function Korrel8rPanel() {
       return;
     }
     // eslint-disable-next-line no-console
-    console.log('korrel8r search', search);
+    console.debug('korrel8r search', search);
     const queryStr = search?.queryStr?.trim();
     const start: api.Start = {
       queries: queryStr ? [queryStr] : undefined,
@@ -99,17 +95,21 @@ export default function Korrel8rPanel() {
 
     cancellableFetch
       .then((response: api.Graph) => {
-        setResult({ graph: new korrel8r.Graph(response) });
-        // Only set the persisted search upon a successful query. It would be a
-        // poor feeling to create a query that fails, and then be forced to rerun it
-        // when opening the panel later
-        dispatch(setPersistedSearch(search));
+        const result: Result = { graph: new korrel8r.Graph(response) };
+        // eslint-disable-next-line no-console
+        console.debug('korrel8r result', result);
+        setResult(result);
+        dispatch(setPersistedSearch({ search, result }));
       })
       .catch((e: api.ApiError) => {
-        setResult({
+        const result = {
           message: e.body?.error || e.message || 'Unknown Error',
           title: e?.body?.error ? t('Korrel8r Error') : t('Request Failed'),
-        });
+        };
+        // eslint-disable-next-line no-console
+        console.debug('korrel8r result', result);
+        setResult(result);
+        dispatch(setPersistedSearch({ search, result }));
       });
     return () => cancellableFetch.cancel();
   }, [result, t, dispatch, search, cannotFocus, locationQuery]);
@@ -159,8 +159,8 @@ export default function Korrel8rPanel() {
               runSearch({
                 ...defaultSearch,
                 queryStr: locationQuery?.toString(),
-                constraint: persistedSearch?.constraint,
-                period: persistedSearch?.period,
+                constraint: searchResult?.search?.constraint,
+                period: searchResult?.search?.period,
               })
             }
           >
@@ -320,16 +320,6 @@ const TopologyInfoState: React.FC<TopologyInfoStateProps> = ({ titleText, text,
   );
 };
 
-const applyBounds = (minValue: number, maxValue: number) => {
-  return (val: number) => {
-    if (!val || val < minValue) {
-      return minValue;
-    } else if (val > maxValue) {
-      return maxValue;
-    } else {
-      return val;
-    }
-  };
+const applyBounds = (min: number, max: number) => {
+  return (val: number) => Math.max(min, Math.min(val, max));
 };
-
-//          {/* FIXME Tooltips or popovers uniformly */}

web/src/components/topology/Korrel8rTopology.tsx

@@ -153,7 +153,7 @@ export const Korrel8rTopology: React.FC<{
         if (!link) return;
         if (!link.startsWith('/')) link = '/' + link;
         // eslint-disable-next-line no-console
-        console.log(
+        console.debug(
           'korrel8r navigate',
           '\nquery',
           query,

web/src/hooks/useTroubleshootingPanel.tsx

@@ -3,7 +3,7 @@ import { InfrastructureIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
-import { defaultSearch, openTP, setPersistedSearch } from '../redux-actions';
+import { openTP } from '../redux-actions';
 import { useKorrel8r } from './useKorrel8r';
 
 const useTroubleshootingPanel: ExtensionHook<Array<Action>> = () => {
@@ -12,7 +12,6 @@ const useTroubleshootingPanel: ExtensionHook<Array<Action>> = () => {
   const [perspective] = useActivePerspective();
   const dispatch = useDispatch();
   const open = React.useCallback(() => {
-    dispatch(setPersistedSearch(defaultSearch));
     dispatch(openTP());
   }, [dispatch]);
 

web/src/redux-actions.ts

@@ -1,5 +1,5 @@
 import { action, ActionType as Action } from 'typesafe-actions';
-import { Constraint } from './korrel8r/types';
+import { Constraint, Graph } from './korrel8r/types';
 import { DAY, Duration, Period } from './time';
 
 export enum ActionType {
@@ -23,7 +23,21 @@ export type Search = {
   period?: Period; // Constraint is updated from period on each call.
 };
 
-// Default search parameters for new searches.
+// Result displayed in troubleshooting panel, graph or error.
+export type Result = {
+  graph?: Graph;
+  message?: string;
+  title?: string;
+  isError?: boolean;
+};
+
+// Search parameters and result of the last search.
+export type SearchResult = {
+  search: Search;
+  result?: Result;
+};
+
+// Default search parameters do a neighbourhood search of depth 3.
 export const defaultSearch = {
   type: SearchType.Distance,
   depth: 3,
@@ -32,8 +46,8 @@ export const defaultSearch = {
 
 export const closeTP = () => action(ActionType.CloseTroubleshootingPanel);
 export const openTP = () => action(ActionType.OpenTroubleshootingPanel);
-export const setPersistedSearch = (query: Search) =>
-  action(ActionType.SetPersistedSearch, { query });
+export const setPersistedSearch = (searchResult: SearchResult) =>
+  action(ActionType.SetPersistedSearch, searchResult);
 
 export const actions = {
   closeTP,

web/src/redux-reducers.ts

@@ -28,7 +28,7 @@ const reducer = (state: TPState, action: TPAction): TPState => {
       return state.set('isOpen', true);
 
     case ActionType.SetPersistedSearch:
-      return state.set('persistedSearch', action.payload.query);
+      return state.set('persistedSearch', action.payload);
 
     default:
       break;