From 039811fafdd2990a82a6f77d82791e02ae466b14 Mon Sep 17 00:00:00 2001
From: Julien Pinsonneau <jpinsonn@redhat.com>
Date: Wed, 15 Mar 2023 11:47:41 +0100
Subject: [PATCH] manage flows outputRecordTypes disabled

---
 web/locales/en/plugin__netobserv-plugin.json  |  5 ++--
 .../__tests__/query-options-dropdown.spec.tsx |  2 ++
 .../dropdowns/query-options-dropdown.tsx      | 24 ++++++++++++++-----
 .../__tests__/filters-toolbar.spec.tsx        |  1 +
 web/src/components/netflow-traffic.tsx        | 15 ++++++++++++
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/web/locales/en/plugin__netobserv-plugin.json b/web/locales/en/plugin__netobserv-plugin.json
index c08118f47..02b4ed369 100644
--- a/web/locales/en/plugin__netobserv-plugin.json
+++ b/web/locales/en/plugin__netobserv-plugin.json
@@ -39,10 +39,11 @@
   "Match any": "Match any",
   "Log type to query. A conversation is an aggregation of flows between same peers. Only ended conversations will appear in Overview and Topology tabs.": "Log type to query. A conversation is an aggregation of flows between same peers. Only ended conversations will appear in Overview and Topology tabs.",
   "Log type": "Log type",
-  "Only available when FlowCollector.processor.outputRecordTypes option includes at least \"newConnection\", \"heartbeat\" or \"endConnection\"": "Only available when FlowCollector.processor.outputRecordTypes option includes at least \"newConnection\", \"heartbeat\" or \"endConnection\"",
+  "Only available when FlowCollector.processor.outputRecordTypes option equals \"CONNECTIONS\", \"ENDED_CONNECTIONS\" or \"ALL\"": "Only available when FlowCollector.processor.outputRecordTypes option equals \"CONNECTIONS\", \"ENDED_CONNECTIONS\" or \"ALL\"",
+  "Only available when FlowCollector.processor.outputRecordTypes option equals \"FLOWS\" or \"ALL\"": "Only available when FlowCollector.processor.outputRecordTypes option equals \"FLOWS\" or \"ALL\"",
   "Every flow can be reported from the source node and/or the destination node. For in-cluster traffic, usually both source and destination nodes report flows, resulting in duplicated data. Cluster ingress traffic is only reported by destination nodes, and cluster egress by source nodes.": "Every flow can be reported from the source node and/or the destination node. For in-cluster traffic, usually both source and destination nodes report flows, resulting in duplicated data. Cluster ingress traffic is only reported by destination nodes, and cluster egress by source nodes.",
   "Reporter node": "Reporter node",
-  "Only available in Flow Table view": "Only available in Flow Table view",
+  "Only available using \"Flow\" log type. This option will be ignored for \"Conversation\".": "Only available using \"Flow\" log type. This option will be ignored for \"Conversation\".",
   "Whether each query result has to match all the filters or just any of them": "Whether each query result has to match all the filters or just any of them",
   "Match filters": "Match filters",
   "Top items for internal backend queries.": "Top items for internal backend queries.",
diff --git a/web/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsx
index f64db5ac3..93934b4ff 100644
--- a/web/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsx
+++ b/web/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsx
@@ -8,6 +8,7 @@ describe('<QueryOptionsDropdown />', () => {
   const props: QueryOptionsDropdownProps = {
     recordType: 'allConnections',
     reporter: 'destination',
+    allowFlow: true,
     allowConnection: true,
     allowReporterBoth: true,
     useTopK: false,
@@ -29,6 +30,7 @@ describe('<QueryOptionsPanel />', () => {
   const props: QueryOptionsDropdownProps = {
     recordType: 'allConnections',
     reporter: 'destination',
+    allowFlow: true,
     allowConnection: true,
     allowReporterBoth: true,
     useTopK: false,
diff --git a/web/src/components/dropdowns/query-options-dropdown.tsx b/web/src/components/dropdowns/query-options-dropdown.tsx
index 81a088ea2..6d95d1fe2 100644
--- a/web/src/components/dropdowns/query-options-dropdown.tsx
+++ b/web/src/components/dropdowns/query-options-dropdown.tsx
@@ -11,6 +11,7 @@ export interface QueryOptionsDropdownProps {
   setRecordType: (recordType: RecordType) => void;
   reporter: Reporter;
   setReporter: (reporter: Reporter) => void;
+  allowFlow: boolean;
   allowConnection: boolean;
   allowReporterBoth: boolean;
   useTopK: boolean;
@@ -32,6 +33,7 @@ export const QueryOptionsPanel: React.FC<QueryOptionsDropdownProps> = ({
   setRecordType,
   reporter,
   setReporter,
+  allowFlow,
   allowConnection,
   allowReporterBoth,
   useTopK,
@@ -97,7 +99,8 @@ export const QueryOptionsPanel: React.FC<QueryOptionsDropdownProps> = ({
           </div>
         </Tooltip>
         {recordTypeOptions.map(opt => {
-          const disabled = !allowConnection && opt.value === 'allConnections';
+          const disabled =
+            (!allowFlow && opt.value === 'flowLog') || (!allowConnection && opt.value === 'allConnections');
           return (
             <div key={`recordType-${opt.value}`}>
               <label className="pf-c-select__menu-item">
@@ -105,10 +108,15 @@ export const QueryOptionsPanel: React.FC<QueryOptionsDropdownProps> = ({
                   trigger={disabled ? 'mouseenter focus' : ''}
                   content={
                     disabled
-                      ? t(
-                          // eslint-disable-next-line max-len
-                          'Only available when FlowCollector.processor.outputRecordTypes option includes at least "newConnection", "heartbeat" or "endConnection"'
-                        )
+                      ? opt.value === 'allConnections'
+                        ? t(
+                            // eslint-disable-next-line max-len
+                            'Only available when FlowCollector.processor.outputRecordTypes option equals "CONNECTIONS", "ENDED_CONNECTIONS" or "ALL"'
+                          )
+                        : t(
+                            // eslint-disable-next-line max-len
+                            'Only available when FlowCollector.processor.outputRecordTypes option equals "FLOWS" or "ALL"'
+                          )
                       : undefined
                   }
                 >
@@ -148,7 +156,11 @@ export const QueryOptionsPanel: React.FC<QueryOptionsDropdownProps> = ({
               <label className="pf-c-select__menu-item">
                 <Tooltip
                   trigger={disabled ? 'mouseenter focus' : ''}
-                  content={disabled ? t('Only available in Flow Table view') : undefined}
+                  content={
+                    disabled
+                      ? t('Only available using "Flow" log type. This option will be ignored for "Conversation".')
+                      : undefined
+                  }
                 >
                   <Radio
                     isChecked={opt.value === reporter}
diff --git a/web/src/components/filters/__tests__/filters-toolbar.spec.tsx b/web/src/components/filters/__tests__/filters-toolbar.spec.tsx
index 619612178..94b8a2bdf 100644
--- a/web/src/components/filters/__tests__/filters-toolbar.spec.tsx
+++ b/web/src/components/filters/__tests__/filters-toolbar.spec.tsx
@@ -18,6 +18,7 @@ describe('<FiltersToolbar />', () => {
       limit: 100,
       recordType: 'allConnections',
       reporter: 'destination',
+      allowFlow: true,
       allowConnection: true,
       allowReporterBoth: true,
       useTopK: false,
diff --git a/web/src/components/netflow-traffic.tsx b/web/src/components/netflow-traffic.tsx
index de79dff85..965379974 100644
--- a/web/src/components/netflow-traffic.tsx
+++ b/web/src/components/netflow-traffic.tsx
@@ -468,10 +468,24 @@ export const NetflowTraffic: React.FC<{
 
   usePoll(tick, interval);
 
+  const isFlow = React.useCallback(() => {
+    return config.recordTypes.some(rt => rt === 'flowLog');
+  }, [config.recordTypes]);
+
   const isConnectionTracking = React.useCallback(() => {
     return config.recordTypes.some(rt => rt === 'newConnection' || rt === 'heartbeat' || rt === 'endConnection');
   }, [config.recordTypes]);
 
+  React.useEffect(() => {
+    if (initState.current.includes('configLoaded')) {
+      if (recordType === 'flowLog' && !isFlow() && isConnectionTracking()) {
+        setRecordType('allConnections');
+      } else if (recordType === 'allConnections' && isFlow() && !isConnectionTracking()) {
+        setRecordType('flowLog');
+      }
+    }
+  }, [config.recordTypes, isConnectionTracking, isFlow, recordType]);
+
   // tick on state change
   React.useEffect(() => {
     // init function will be triggered only once
@@ -1140,6 +1154,7 @@ export const NetflowTraffic: React.FC<{
           setRecordType,
           reporter,
           setReporter,
+          allowFlow: isFlow(),
           allowConnection: isConnectionTracking(),
           allowReporterBoth: selectedViewId === 'table',
           useTopK: selectedViewId === 'overview'