Merge pull request #97 from alanconway/invalid-query

fix(COO-544): Troubleshooting panel shows "invalid query".

Author: openshift-merge-bot[bot]

Makefile

@@ -19,7 +19,7 @@ install-frontend-ci-clean: install-frontend-ci
 
 .PHONY: build-frontend
 build-frontend:
-	cd web && npm run build
+	cd web && npm run i18n && npm run build
 
 .PHONY: start-frontend
 start-frontend:

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

@@ -1,24 +1,23 @@
 {
+  "Cannot display in console": "Cannot display in console",
   "Correlation result was empty.": "Correlation result was empty.",
-  "Error Loading Data": "Error Loading Data",
   "Find related resources.": "Find related resources.",
   "Focus": "Focus",
   "Goal class: ": "Goal class: ",
   "Hide Query": "Hide Query",
   "Korrel8 query selecting the starting points for correlation.": "Korrel8 query selecting the starting points for correlation.",
   "Korrel8r Error": "Korrel8r Error",
-  "Logging Plugin Disabled": "Logging Plugin Disabled",
   "Neighbourhood depth: ": "Neighbourhood depth: ",
-  "Netflow Plugin Disabled": "Netflow Plugin Disabled",
   "No Correlated Signals Found": "No Correlated Signals Found",
   "Open the Troubleshooting Panel": "Open the Troubleshooting Panel",
+  "Plugin disabled: ": "Plugin disabled: ",
   "Query": "Query",
   "Re-calculate the correlation graph starting from resources on the current console page.": "Re-calculate the correlation graph starting from resources on the current console page.",
+  "Request Failed": "Request Failed",
   "Show graph of connected classes up to the specified depth.": "Show graph of connected classes up to the specified depth.",
   "Show graph of paths to signals of the specified class.": "Show graph of paths to signals of the specified class.",
   "Show Query": "Show Query",
   "The current console page does not show resources that are supported for correlation.": "The current console page does not show resources that are supported for correlation.",
   "Troubleshooting": "Troubleshooting",
-  "Troubleshooting Panel": "Troubleshooting Panel",
-  "Unable to find Console Link": "Unable to find Console Link"
+  "Troubleshooting Panel": "Troubleshooting Panel"
 }

web/src/components/Korrel8rPanel.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-import { CancellableFetch } from '../cancellable-fetch';
 import {
   Button,
   Divider,
@@ -16,25 +14,36 @@ import {
   Radio,
   TextArea,
   TextInput,
-  Tooltip,
+  Tooltip
 } from '@patternfly/react-core';
-import { Korrel8rTopology } from './topology/Korrel8rTopology';
-import './korrel8rpanel.css';
-import { getGoalsGraph, getNeighborsGraph } from '../korrel8r-client';
-import { Korrel8rGraphResponse } from '../korrel8r/query.types';
-import { LoadingTopology } from './topology/LoadingTopology';
-import { TFunction, useTranslation } from 'react-i18next';
 import { CubesIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
-import { useURLState } from '../hooks/useURLState';
-import { usePluginAvailable } from '../hooks/usePluginAvailable';
+import * as React from 'react';
+import { TFunction, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../redux-reducers';
+import { usePluginAvailable } from '../hooks/usePluginAvailable';
+import { useURLState } from '../hooks/useURLState';
+import { getGoalsGraph, getNeighborsGraph } from '../korrel8r-client';
+import { Korrel8rGraphResponse } from '../korrel8r/query.types';
 import { Query, QueryType, setPersistedQuery } from '../redux-actions';
+import { State } from '../redux-reducers';
+import './korrel8rpanel.css';
+import { Korrel8rTopology } from './topology/Korrel8rTopology';
+import { LoadingTopology } from './topology/LoadingTopology';
 
 type Result = {
   graph?: Korrel8rGraphResponse;
   message?: string;
   title?: string;
+  isError?: boolean;
+};
+
+const focusQuery = (urlQuery: string): Query => {
+  return {
+    query: urlQuery,
+    queryType: QueryType.Neighbour,
+    depth: 3,
+    goal: null,
+  };
 };
 
 export default function Korrel8rPanel() {
@@ -46,34 +55,28 @@ export default function Korrel8rPanel() {
 
   // State
   const { korrel8rQueryFromURL } = useURLState();
-  // Initial value from persisted query if available (when opened from anywhere but
-  // the alerts page or if never opened before), otherwise URL
-  const initialQuery = persistedQuery.query
-    ? persistedQuery
-    : {
-        query: korrel8rQueryFromURL,
-        queryType: QueryType.Neighbour,
-        depth: 3,
-        goal: null,
-      };
-  const [query, setQuery] = React.useState<Query>(initialQuery);
+  const [query, setQuery] = React.useState<Query>(
+    persistedQuery.query ? persistedQuery : focusQuery(korrel8rQueryFromURL),
+  );
   const [result, setResult] = React.useState<Result | null>(null);
   const [showQuery, setShowQuery] = React.useState(false);
 
+  const cannotFocus = t(
+    'The current console page does not show resources that are supported for correlation.',
+  );
+
   React.useEffect(() => {
     // Set result = null to trigger a reload, don't run the query till then.
     if (result !== null) {
       return;
     }
-    let fetch: CancellableFetch<Korrel8rGraphResponse>;
-    if (query.queryType === QueryType.Neighbour) {
-      fetch = getNeighborsGraph(query);
-    } else if (query.queryType === QueryType.Goal) {
-      fetch = getGoalsGraph(query);
-    } else {
+    if (!query?.query && !korrel8rQueryFromURL) {
+      setResult({ message: cannotFocus });
       return;
     }
-    const { request, abort } = fetch;
+    // Make the query request
+    const { request, abort } =
+      query.queryType === QueryType.Goal ? getGoalsGraph(query) : getNeighborsGraph(query);
     request()
       .then((response: Korrel8rGraphResponse) => {
         setResult({ graph: { nodes: response.nodes, edges: response.edges } });
@@ -84,22 +87,23 @@ export default function Korrel8rPanel() {
       })
       .catch((e: Error) => {
         try {
-          setResult({ message: JSON.parse(e.message).error, title: t('Korrel8r Error') });
+          setResult({
+            isError: true,
+            message: JSON.parse(e.message).error,
+            title: t('Korrel8r Error'),
+          });
         } catch {
-          setResult({ message: e.message, title: t('Error Loading Data') });
+          setResult({ isError: true, message: e.message, title: t('Request Failed') });
         }
       });
     return abort;
-  }, [result, t, dispatch, query]);
+  }, [result, t, dispatch, query, cannotFocus, korrel8rQueryFromURL]);
 
   const queryToggleID = 'query-toggle';
   const queryContentID = 'query-content';
   const queryInputID = 'query-input';
   const queryTypeOptions = 'query-type-options';
 
-  const cannotFocus = t(
-    'The current console page does not show resources that are supported for correlation.',
-  );
   const focusTip = korrel8rQueryFromURL
     ? t('Re-calculate the correlation graph starting from resources on the current console page.')
     : cannotFocus;
@@ -110,7 +114,6 @@ export default function Korrel8rPanel() {
     (newQuery: Query) => {
       newQuery.depth = depthBounds(newQuery.depth);
       newQuery.queryType = !newQuery.goal ? QueryType.Neighbour : newQuery.queryType;
-
       setQuery(newQuery);
       setResult(null);
     },
@@ -123,14 +126,7 @@ export default function Korrel8rPanel() {
         <Tooltip content={focusTip}>
           <Button
             isAriaDisabled={!korrel8rQueryFromURL}
-            onClick={() => {
-              runQuery({
-                query: korrel8rQueryFromURL,
-                queryType: QueryType.Neighbour,
-                depth: 3,
-                goal: null,
-              });
-            }}
+            onClick={() => runQuery(focusQuery(korrel8rQueryFromURL))}
           >
             {t('Focus')}
           </Button>
@@ -244,7 +240,7 @@ export default function Korrel8rPanel() {
             </FlexItem>
           </Flex>
         </Flex>
-        <Button isAriaDisabled={!query} onClick={() => runQuery(query)} variant="secondary">
+        <Button isAriaDisabled={!query?.query} onClick={() => runQuery(query)} variant="secondary">
           {t('Query')}
         </Button>
       </ExpandableSection>
@@ -284,23 +280,12 @@ const Topology: React.FC<TopologyProps> = ({ result, t, setQuery }) => {
     );
   }
 
-  if (result.message) {
-    // Error returned from korrel8r
-    return (
-      <TopologyInfoState
-        titleText={result.title}
-        // Only display fisrt 400 characters of error to prevent repeating errors
-        text={result.message.slice(0, 400)}
-        isError={true}
-      />
-    );
-  }
-
   return (
     <TopologyInfoState
-      titleText={t('No Correlated Signals Found')}
-      text={t('Correlation result was empty.')}
-      isError={false}
+      titleText={result.title || t('No Correlated Signals Found')}
+      // Only display fisrt 400 characters of error to prevent repeating errors
+      text={result.message ? result.message.slice(0, 400) : t('Correlation result was empty.')}
+      isError={result.isError}
     />
   );
 };

web/src/components/topology/Korrel8rTopology.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ClusterIcon } from '@patternfly/react-icons';
 import {
   action,
   BreadthFirstLayout,
@@ -24,16 +24,16 @@ import {
   withPanZoom,
   withSelection,
 } from '@patternfly/react-topology';
-import { ClusterIcon } from '@patternfly/react-icons';
-import { QueryEdge, QueryNode } from '../../korrel8r/query.types';
-import { nodeToLabel } from '../../korrel8r-utils';
-import { Korrel8rNodeFactory } from '../../korrel8r/node-factory';
+import * as React from 'react';
+import { TFunction, useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router';
-import { Korrel8rNode } from '../../korrel8r/korrel8r.types';
+import { nodeToLabel } from '../../korrel8r-utils';
 import { InvalidNode } from '../../korrel8r/invalid';
-import { TFunction, useTranslation } from 'react-i18next';
-import './korrel8rtopology.css';
+import { Korrel8rNode } from '../../korrel8r/korrel8r.types';
+import { Korrel8rNodeFactory } from '../../korrel8r/node-factory';
+import { QueryEdge, QueryNode } from '../../korrel8r/query.types';
 import { Query, QueryType } from '../../redux-actions';
+import './korrel8rtopology.css';
 
 interface Korrel8rTopologyNodeProps {
   element: Node;
@@ -284,7 +284,7 @@ export const Korrel8rTopology: React.FC<{
     setTimeout(() => {
       // Center the graph on the next render tick once the graph elements have been sized and placed
       controller.getGraph().fit(30);
-    }, 1);
+    }, 100); // FIXME this timeout is racy, need to reliably centre graph after layout is done.
     return controller;
   }, [controller, selectionAction]);
 

web/src/korrel8r-utils.ts

@@ -1,10 +1,10 @@
-import { QueryNode } from './korrel8r/query.types';
 import { Korrel8rDomain } from './korrel8r/korrel8r.types';
+import { QueryNode } from './korrel8r/query.types';
 
-const getDomain = (node: QueryNode) => node.class.split(':')[0] ?? '';
+export const getDomain = (classOrQuery: string) => classOrQuery.split(':')[0] ?? '';
 
 export const nodeToLabel = (node: QueryNode): string => {
-  const domain = getDomain(node);
+  const domain = getDomain(node.class);
   switch (domain) {
     case Korrel8rDomain.Alert:
       return `Alert (${node.count})`;

web/src/korrel8r/invalid.ts

@@ -11,11 +11,11 @@ export class InvalidNode extends Korrel8rNode {
   }
 
   static fromURL(url: string): Korrel8rNode {
-    return new InvalidNode(url, 'invalid');
+    return new InvalidNode(url, '');
   }
 
   static fromQuery(query: string): Korrel8rNode {
-    return new InvalidNode('invalid', query);
+    return new InvalidNode('', query);
   }
 
   toURL(): string {