Merge pull request #191 from alanconway/hook-refactor

NO-JIRA: refactor: Separate custom hooks for re-use

Author: openshift-merge-bot[bot]

Makefile

@@ -5,6 +5,9 @@ ORG         ?= openshift-observability-ui
 IMAGE       ?= quay.io/${ORG}/troubleshooting-panel-console-plugin:${VERSION}
 TAG         ?= $(VERSION)
 
+.PHONY: all
+all: build-frontend build-backend test-frontend
+
 .PHONY: test
 test: test-frontend
 

web/package.json

@@ -16,7 +16,7 @@
     "lint": "eslint ./src ./integration-tests --fix &&  stylelint \"src/**/*.css\" --allow-empty-input --fix",
     "lint:tsc": "tsc --noEmit",
     "test:e2e": "cd ./integration-tests && cypress open --env openshift=true",
-    "test:unit": "jest --runInBand --config jest.config.js",
+    "test:unit": "jest --runInBand --logHeapUsage --config jest.config.js",
     "test:unit:watch": "jest --config jest.config.js --watch",
     "test:unit:coverage": "jest --config jest.config.js --coverage"
   },

web/src/components/Korrel8rPanel.tsx

@@ -24,8 +24,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useLocationQuery } from '../hooks/useLocationQuery';
 import { usePluginAvailable } from '../hooks/usePluginAvailable';
 import { getGoalsGraph, getNeighborsGraph } from '../korrel8r-client';
-import { AlertDomain } from '../korrel8r/alert';
-import { allDomains } from '../korrel8r/all-domains';
 import * as api from '../korrel8r/client';
 import * as korrel8r from '../korrel8r/types';
 import {
@@ -51,16 +49,7 @@ export default function Korrel8rPanel() {
   });
   const dispatch = useDispatch();
 
-  const alertRules = useSelector((state: State) => state.observe?.get('rules'));
-  const alertIDs = React.useMemo(() => {
-    if (!alertRules) return new Map<string, string>();
-    return new Map<string, string>(alertRules.map(({ id, name }) => [id, name]));
-  }, [alertRules]);
-  const domains = React.useMemo(
-    () => new korrel8r.Domains(...allDomains, new AlertDomain(alertIDs)),
-    [alertIDs],
-  );
-  const locationQuery = useLocationQuery(domains);
+  const locationQuery = useLocationQuery();
 
   // Search parameters.
   const [search, setSearch] = React.useState<Search>({
@@ -232,13 +221,7 @@ export default function Korrel8rPanel() {
   );
 
   const topologySection = (
-    <Topology
-      domains={domains}
-      result={result}
-      constraint={search.constraint}
-      t={t}
-      setSearch={setSearch}
-    />
+    <Topology result={result} constraint={search.constraint} t={t} setSearch={setSearch} />
   );
 
   return (
@@ -260,14 +243,13 @@ export default function Korrel8rPanel() {
 }
 
 interface TopologyProps {
-  domains: korrel8r.Domains;
   result?: Result;
   constraint: korrel8r.Constraint;
   t: TFunction;
   setSearch: (search: Search) => void;
 }
 
-const Topology: React.FC<TopologyProps> = ({ domains, result, t, constraint }) => {
+const Topology: React.FC<TopologyProps> = ({ result, t, constraint }) => {
   const [loggingAvailable, loggingAvailableLoading] = usePluginAvailable('logging-view-plugin');
   const [netobserveAvailable, netobserveAvailableLoading] = usePluginAvailable('netobserv-plugin');
 
@@ -280,7 +262,6 @@ const Topology: React.FC<TopologyProps> = ({ domains, result, t, constraint }) =
     // Non-empty graph
     return (
       <Korrel8rTopology
-        domains={domains}
         graph={result.graph}
         loggingAvailable={loggingAvailable}
         netobserveAvailable={netobserveAvailable}

web/src/components/topology/Korrel8rTopology.tsx

@@ -33,7 +33,7 @@ import {
 } from '@patternfly/react-topology';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigateToQuery } from '../../hooks/useNavigateToQuery';
 import * as korrel8r from '../../korrel8r/types';
 import { getIcon } from '../icons';
 import './korrel8rtopology.css';
@@ -93,14 +93,13 @@ const NODE_DIAMETER = 75;
 const PADDING = 30;
 
 export const Korrel8rTopology: React.FC<{
-  domains: korrel8r.Domains;
   graph: korrel8r.Graph;
   loggingAvailable: boolean;
   netobserveAvailable: boolean;
   constraint: korrel8r.Constraint;
-}> = ({ domains, graph, loggingAvailable, netobserveAvailable, constraint }) => {
+}> = ({ graph, loggingAvailable, netobserveAvailable, constraint }) => {
   const { t } = useTranslation('plugin__troubleshooting-panel-console-plugin');
-  const navigate = useNavigate();
+  const navigateToQuery = useNavigateToQuery();
   const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
 
   const nodes = React.useMemo(
@@ -141,31 +140,6 @@ export const Korrel8rTopology: React.FC<{
     [graph],
   );
 
-  const navigateToQuery = React.useCallback(
-    (query: korrel8r.Query, constraint: korrel8r.Constraint) => {
-      try {
-        let link = domains.queryToLink(query, constraint)?.toString();
-        if (!link) return;
-        if (!link.startsWith('/')) link = '/' + link;
-        // eslint-disable-next-line no-console
-        console.debug(
-          'korrel8r navigate',
-          '\nquery',
-          query,
-          '\nconstraint',
-          constraint,
-          '\nlink',
-          link,
-        );
-        navigate(link);
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(`korrel8r navigateToQuery: ${e} `, '\nquery', query);
-      }
-    },
-    [navigate, domains],
-  );
-
   const selectionAction = React.useCallback(
     (selected: Array<string>) => {
       const id = selected?.[0]; // Select only one at a time.

web/src/hooks/useDomains.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { AlertDomain } from '../korrel8r/alert';
+import { allDomains } from '../korrel8r/all-domains';
+import { Domains } from '../korrel8r/types';
+import { State } from '../redux-reducers';
+
+// The alert domain is dependent on alert Rules state , so we need a hook for domains
+export const useDomains = () => {
+  const alertRules = useSelector((state: State) => state.observe?.get('rules'));
+
+  const alertIDs = React.useMemo(() => {
+    if (!alertRules) return new Map<string, string>();
+    return new Map<string, string>(alertRules.map(({ id, name }) => [id, name]));
+  }, [alertRules]);
+
+  const domains = React.useMemo(() => {
+    // Alert domain with IDs loaded from state.
+    const alert = new AlertDomain(alertIDs);
+    // Replace the default alert domain.
+    return new Domains(...allDomains.filter((d) => d.name !== alert.name), alert);
+  }, [alertIDs]);
+  return domains;
+};

web/src/hooks/useLocationQuery.ts

@@ -1,8 +1,10 @@
 import { useLocation } from 'react-router-dom-v5-compat';
-import { Domains, Query, URIRef } from '../korrel8r/types';
+import { Query, URIRef } from '../korrel8r/types';
+import { useDomains } from './useDomains';
 
 /** Returns the Korrel8r query for the current browser location or undefined */
-export const useLocationQuery = (domains: Domains): Query | undefined => {
+export const useLocationQuery = (): Query | undefined => {
+  const domains = useDomains();
   const location = useLocation();
   try {
     const link = new URIRef(location.pathname + location.search);

web/src/hooks/useNavigateToQuery.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import * as korrel8r from '../korrel8r/types';
+import { useDomains } from './useDomains';
+
+/**
+ * Custom hook for navigating from Korrel8r queries to console web pages.
+ * @returns A function to navigate to a query with given constraints
+ */
+export const useNavigateToQuery = () => {
+  const navigate = useNavigate();
+  const domains = useDomains();
+
+  const navigateToQuery = useCallback(
+    (query: korrel8r.Query, constraint: korrel8r.Constraint) => {
+      try {
+        let link = domains.queryToLink(query, constraint)?.toString();
+        // eslint-disable-next-line no-console
+        console.debug(`korrel8r navigateToQuery ${query}, ${constraint} => ${link}`);
+        if (!link) return;
+        if (!link.startsWith('/')) link = '/' + link;
+        navigate(link);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(`korrel8r navigateToQuery ${query}, ${constraint}: error: ${e}`);
+      }
+    },
+    [navigate, domains],
+  );
+
+  return navigateToQuery;
+};