Merge pull request #172 from jpinsonneau/372_warnings

NETOBSERV-372 Warning messages

Author: jpinsonneau

web/locales/en/plugin__network-observability-plugin.json

@@ -60,15 +60,22 @@
   "Learn more": "Learn more",
   "Common": "Common",
   "Filter already exists": "Filter already exists",
-  "Clear all filters": "Clear all filters",
+  "Enable": "Enable",
+  "Disable": "Disable",
+  "group filter": "group filter",
+  "filter": "filter",
   "Edit filters": "Edit filters",
+  "Clear all filters": "Clear all filters",
   "Build info": "Build info",
   "Configuration limits": "Configuration limits",
   "Metrics": "Metrics",
+  "Loki '/ready' endpoint returned the following error": "Loki '/ready' endpoint returned the following error",
   "You may consider the following query changes to avoid this error": "You may consider the following query changes to avoid this error",
+  "Check if Loki is running correctly. '/ready' endpoint should respond \"ready\"": "Check if Loki is running correctly. '/ready' endpoint should respond \"ready\"",
   "Reduce the Query Options -> limit to reduce the number of results": "Reduce the Query Options -> limit to reduce the number of results",
   "Increase Loki \"max_entries_limit_per_query\" entry in configuration file": "Increase Loki \"max_entries_limit_per_query\" entry in configuration file",
-  "Add some filters like Namespace or Name to reduce the number of results": "Add some filters like Namespace or Name to reduce the number of results",
+  "Add Namespace, Owner or Resource filters (which use indexed fields) to improve the query performance": "Add Namespace, Owner or Resource filters (which use indexed fields) to improve the query performance",
+  "Reduce limit and time range to decrease the number of results": "Reduce limit and time range to decrease the number of results",
   "Reduce the time range to decrease the number of results": "Reduce the time range to decrease the number of results",
   "Increase Loki \"max_query_length\" entry in configuration file": "Increase Loki \"max_query_length\" entry in configuration file",
   "Configuring Grafana Loki": "Configuring Grafana Loki",
@@ -140,13 +147,15 @@
   "Truncate labels": "Truncate labels",
   "Kind": "Kind",
   "Name": "Name",
+  "Query is slow": "Query is slow",
   "Flow Table": "Flow Table",
   "Topology": "Topology",
   "Collapse": "Collapse",
   "Expand": "Expand",
   "Actions": "Actions",
   "View": "View",
   "Network Traffic": "Network Traffic",
+  "Add more filters or decrease limit / range to improve the query performance": "Add more filters or decrease limit / range to improve the query performance",
   "Query limit reached": "Query limit reached",
   "Filtered flows count": "Filtered flows count",
   "{{count}} flows": "{{count}} flows",

web/src/components/netflow-traffic.css

@@ -94,4 +94,11 @@ span.pf-c-button__icon.pf-m-start {
 .pf-c-dropdown__group>ul {
     list-style: none;
     padding-left: 10px;
+}
+
+#netflow-warning {
+    position: absolute;
+    right: 2em;
+    bottom: 3em;
+    z-index: 999;
 }

web/src/components/netflow-traffic.tsx

@@ -1,5 +1,7 @@
 import { isModelFeatureFlag, ModelFeatureFlag, useResolvedExtensions } from '@openshift-console/dynamic-plugin-sdk';
 import {
+  Alert,
+  AlertActionCloseButton,
   Button,
   Drawer,
   DrawerContent,
@@ -45,7 +47,7 @@ import { DefaultOptions, TopologyGroupTypes, TopologyOptions } from '../model/to
 import { Column, getDefaultColumns } from '../utils/columns';
 import { TimeRange } from '../utils/datetime';
 import { getHTTPErrorDetails } from '../utils/errors';
-import { DisabledFilters, Filter, getDisabledFiltersRecord, getEnabledFilters } from '../model/filters';
+import { DisabledFilters, Filter, hasIndexFields, getDisabledFiltersRecord, getEnabledFilters } from '../model/filters';
 import {
   LOCAL_STORAGE_COLS_KEY,
   LOCAL_STORAGE_DISABLED_FILTERS_KEY,
@@ -119,6 +121,8 @@ export const NetflowTraffic: React.FC<{
     setURLParams(queryParams);
   }
 
+  const warningTimeOut = React.useRef<NodeJS.Timeout | undefined>();
+  const [warningMessage, setWarningMessage] = React.useState<string | undefined>();
   const [isOverflowMenuOpen, setOverflowMenuOpen] = React.useState(false);
   const [isFullScreen, setFullScreen] = React.useState(false);
   const [loading, setLoading] = React.useState(true);
@@ -240,45 +244,67 @@ export const NetflowTraffic: React.FC<{
     topologyOptions.groupTypes
   ]);
 
+  const manageWarnings = React.useCallback(
+    (query: Promise<unknown>) => {
+      Promise.race([query, new Promise((resolve, reject) => setTimeout(reject, 2000, 'slow'))]).then(
+        null,
+        (reason: string) => {
+          if (reason === 'slow') {
+            setWarningMessage(`${t('Query is slow')}`);
+          }
+        }
+      );
+    },
+    // i18n t dependency kills jest
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
   const tick = React.useCallback(() => {
     setLoading(true);
     setError(undefined);
     const fq = buildFlowQuery();
     switch (selectedViewId) {
       case 'table':
-        getFlows(fq)
-          .then(result => {
-            setFlows(result.records);
-            setStats(result.stats);
-          })
-          .catch(err => {
-            setFlows([]);
-            setError(getHTTPErrorDetails(err));
-          })
-          .finally(() => {
-            setLoading(false);
-          });
+        manageWarnings(
+          getFlows(fq)
+            .then(result => {
+              setFlows(result.records);
+              setStats(result.stats);
+            })
+            .catch(err => {
+              setFlows([]);
+              setError(getHTTPErrorDetails(err));
+              setWarningMessage(undefined);
+            })
+            .finally(() => {
+              setLoading(false);
+            })
+        );
         break;
       case 'topology':
-        getTopology(fq, range)
-          .then(result => {
-            setMetrics(result.metrics);
-            setStats(result.stats);
-          })
-          .catch(err => {
-            setMetrics([]);
-            setError(getHTTPErrorDetails(err));
-          })
-          .finally(() => {
-            setLoading(false);
-          });
+        manageWarnings(
+          getTopology(fq, range)
+            .then(result => {
+              setMetrics(result.metrics);
+              setStats(result.stats);
+            })
+            .catch(err => {
+              setMetrics([]);
+              setError(getHTTPErrorDetails(err));
+              setWarningMessage(undefined);
+            })
+            .finally(() => {
+              setLoading(false);
+            })
+        );
         break;
       default:
         console.error('tick called on not implemented view Id', selectedViewId);
         setLoading(false);
         break;
     }
-  }, [buildFlowQuery, range, selectedViewId]);
+  }, [buildFlowQuery, manageWarnings, range, selectedViewId]);
 
   usePoll(tick, interval);
 
@@ -333,11 +359,21 @@ export const NetflowTraffic: React.FC<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filters]);
 
+  //clear warning message after 10s
+  React.useEffect(() => {
+    if (warningTimeOut.current) {
+      clearTimeout(warningTimeOut.current);
+    }
+
+    warningTimeOut.current = setTimeout(() => setWarningMessage(undefined), 10000);
+  }, [warningMessage]);
+
   // updates table filters and clears up the table for proper visualization of the
   // updating process
   const updateTableFilters = (f: Filter[]) => {
     setFilters(f);
     setFlows([]);
+    setWarningMessage(undefined);
   };
 
   const clearFilters = () => {
@@ -711,6 +747,18 @@ export const NetflowTraffic: React.FC<{
         range={range}
         filters={forcedFilters ? forcedFilters : filters}
       />
+      {!_.isEmpty(warningMessage) && (
+        <Alert
+          id="netflow-warning"
+          title={warningMessage}
+          variant="warning"
+          actionClose={<AlertActionCloseButton onClose={() => setWarningMessage(undefined)} />}
+        >
+          {hasIndexFields(filters)
+            ? t('Add more filters or decrease limit / range to improve the query performance')
+            : t('Add Namespace, Owner or Resource filters (which use indexed fields) to improve the query performance')}
+        </Alert>
+      )}
     </PageSection>
   ) : null;
 };

web/src/model/filters.ts

@@ -123,3 +123,14 @@ export const getDisabledFiltersRecord = (filters: Filter[]) => {
   });
   return disabledFilters;
 };
+
+export const hasIndexFields = (filters: Filter[]) => {
+  return (
+    filters.find(
+      f =>
+        f.def.id.includes('namespace') ||
+        f.def.id.includes('owner') ||
+        ['name', 'src_name', 'dst_name'].includes(f.def.id.toString())
+    ) !== undefined
+  );
+};