NETOBSERV-1756 Allow filtering based on TCPFlags values (#554)

* Allow filtering based on TCPFlags values

Signed-off-by: Mohamed Mahmoud <[email protected]>

* Use string format in columns and details instead of intg

Signed-off-by: Mohamed Mahmoud <[email protected]>

---------

Signed-off-by: Mohamed Mahmoud <[email protected]>

Author: msherif1234

pkg/model/fields/fields.go

@@ -52,6 +52,7 @@ const (
 	DNSCode                = "DnsFlagsResponseCode"
 	Duplicate              = "Duplicate"
 	TimeFlowRTT            = "TimeFlowRttNs"
+	TCPFlags               = "Flags"
 )
 
 func IsNumeric(v string) bool {
@@ -67,7 +68,8 @@ func IsNumeric(v string) bool {
 		Packets,
 		Proto,
 		Bytes,
-		DSCP:
+		DSCP,
+		TCPFlags:
 		return true
 	default:
 		return false

web/src/components/drawer/record/record-field.tsx

@@ -21,6 +21,11 @@ import {
 import { dropCausesNames, getDropCauseDescription, getDropCauseDocUrl } from '../../../utils/pkt-drop';
 import { formatPort } from '../../../utils/port';
 import { formatProtocol, getProtocolDocUrl } from '../../../utils/protocol';
+import {
+  getTCPFlagsDocUrl,
+  gettcpFlagsServiceClassDescription,
+  gettcpFlagsServiceClassName
+} from '../../../utils/tcp_flags';
 import { Size } from '../../dropdowns/table-display-dropdown';
 import './record-field.css';
 
@@ -470,6 +475,22 @@ export const RecordField: React.FC<RecordFieldProps> = ({
         }
         return singleContainer(child);
       }
+      case ColumnsId.tcpflags: {
+        let child = emptyText();
+        if (typeof value === 'number' && !isNaN(value)) {
+          const serviceClassName = gettcpFlagsServiceClassName(value);
+          if (serviceClassName && detailed) {
+            child = clickableContent(
+              serviceClassName,
+              `${t('Value')}: ${value} ${t('Examples')}: ${gettcpFlagsServiceClassDescription(value)}`,
+              getTCPFlagsDocUrl()
+            );
+          } else {
+            child = simpleTextWithTooltip(serviceClassName || String(value))!;
+          }
+        }
+        return singleContainer(child);
+      }
       case ColumnsId.icmptype: {
         let child = emptyText();
         if (Array.isArray(value) && value.length) {

web/src/utils/columns.ts

@@ -42,6 +42,7 @@ export enum ColumnsId {
   icmptype = 'IcmpType',
   icmpcode = 'IcmpCode',
   dscp = 'Dscp',
+  tcpflags = 'TCPFlags',
   bytes = 'Bytes',
   packets = 'Packets',
   owner = 'K8S_OwnerName',

web/src/utils/filter-definitions.ts

@@ -29,6 +29,7 @@ import {
   getPortOptions,
   getProtocolOptions,
   getResourceOptions,
+  getTCPFlagsOptions,
   getZoneOptions,
   noOption
 } from './filter-options';
@@ -299,7 +300,10 @@ export const getFilterDefinitions = (
       getOptions = getDnsErrorCodeOptions;
     } else if (d.id.includes('dscp')) {
       getOptions = getDSCPOptions;
+    } else if (d.id.includes('flags')) {
+      getOptions = getTCPFlagsOptions;
     }
+
     return { getOptions, validate, encoder, checkCompletion };
   };
 

web/src/utils/filter-options.ts

@@ -10,6 +10,7 @@ import { dnsErrors, dnsRCodes } from './dns';
 import { DSCP_VALUES } from './dscp';
 import { dropCauses, dropStates } from './pkt-drop';
 import { getPort, getService } from './port';
+import { TCPFlags_VALUES } from './tcp_flags';
 
 export const noOption: (value: string) => Promise<FilterOption[]> = () => Promise.resolve([]);
 
@@ -169,6 +170,14 @@ export const getDSCPOptions = (value: string): Promise<FilterOption[]> => {
   );
 };
 
+export const getTCPFlagsOptions = (value: string): Promise<FilterOption[]> => {
+  return Promise.resolve(
+    TCPFlags_VALUES.filter(
+      opt => String(opt.value).includes(value) || opt.name.toLowerCase().includes(value.toLowerCase())
+    ).map(v => ({ name: v.name, value: String(v.value) }))
+  );
+};
+
 export const findProtocolOption = (nameOrVal: string) => {
   return protocolOptions.find(p => p.name.toLowerCase() === nameOrVal.toLowerCase() || p.value === nameOrVal);
 };

web/src/utils/tcp_flags.ts

@@ -0,0 +1,37 @@
+import { ReadOnlyValues } from './values';
+
+export const getTCPFlagsDocUrl = () => {
+  return 'https://www.rfc-editor.org/rfc/rfc9293';
+};
+
+export const TCPFlags_VALUES: ReadOnlyValues = [
+  { value: 1, name: 'FIN', description: 'No more data from sender' },
+  { value: 2, name: 'SYN', description: 'Synchronize sequence numbers' },
+  { value: 3, name: 'FIN_SYN', description: 'Custom flag indicating both FIN and SYN flags are set' },
+  { value: 4, name: 'RST', description: 'Reset the connection' },
+  { value: 5, name: 'FIN_RST', description: 'Custom flag indicating both FIN and RST flags are set' },
+  { value: 6, name: 'SYN_RST', description: 'Custom flag indicating both SYN and RST flags are set' },
+  { value: 7, name: 'FIN_SYN_RST', description: 'Custom flag indicating FIN, SYN and RST flags are set' },
+  { value: 8, name: 'PSH', description: 'Push function' },
+  { value: 16, name: 'ACK', description: 'Acknowledgement field is significant' },
+  { value: 32, name: 'URG', description: 'Urgent pointer field is significant' },
+  { value: 64, name: 'ECE', description: 'ECN-Echo' },
+  { value: 128, name: 'CWR', description: 'Congestion Window Reduced' },
+  { value: 256, name: 'SYN_ACK', description: 'Custom flag indicating both SYN and ACK flags are set' },
+  { value: 512, name: 'FIN_ACK', description: 'Custom flag indicating both FIN and ACK flags are set' },
+  { value: 1024, name: 'RST_ACK', description: 'Custom flag indicating both RST and ACK flags are set' }
+] as const;
+
+const tcpFlagsNames = TCPFlags_VALUES.map(v => v.name);
+export type TCPFLAGS_SERVICE_CLASS_NAMES = typeof tcpFlagsNames[number];
+
+export const gettcpFlagsServiceClassName = (flags: number): TCPFLAGS_SERVICE_CLASS_NAMES | undefined => {
+  return TCPFlags_VALUES.find(v => v.value === flags)?.name;
+};
+
+const tcpFlagsDescriptions = TCPFlags_VALUES.map(v => v.description);
+export type TCPFLAGS_SERVICE_CLASS_DESCRIPTIONS = typeof tcpFlagsDescriptions[number];
+
+export const gettcpFlagsServiceClassDescription = (flags: number): TCPFLAGS_SERVICE_CLASS_DESCRIPTIONS | undefined => {
+  return TCPFlags_VALUES.find(v => v.value === flags)?.description;
+};