NETOBSERV-1890: read TCP flags as strings

pkg/model/fields/fields.go

@@ -69,8 +69,7 @@ func IsNumeric(v string) bool {
 		Packets,
 		Proto,
 		Bytes,
-		DSCP,
-		TCPFlags:
+		DSCP:
 		return true
 	default:
 		return false

web/src/api/ipfix.ts

@@ -118,7 +118,7 @@ export interface Fields {
   /** Network Events */
   NetworkEvents?: string[];
   /** Logical OR combination of unique TCP flags comprised in the flow, as per RFC-9293, with additional custom flags to represent the following per-packet combinations: SYN+ACK (0x100), FIN+ACK (0x200) and RST+ACK (0x400). */
-  Flags?: number;
+  Flags?: string;
   /** Number of packets */
   Packets?: number;
   /** In conversation tracking, A to B packets counter per conversation */

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

@@ -21,7 +21,7 @@ import {
 import { dropCausesNames, getDropCauseDescription, getDropCauseDocUrl } from '../../../utils/pkt-drop';
 import { formatPort } from '../../../utils/port';
 import { formatProtocol, getProtocolDocUrl } from '../../../utils/protocol';
-import { decomposeTCPFlagsBitfield, getTCPFlagsDocUrl } from '../../../utils/tcp-flags';
+import { getFlagsList, getTCPFlagsDocUrl } from '../../../utils/tcp-flags';
 import { Size } from '../../dropdowns/table-display-dropdown';
 import './record-field.css';
 
@@ -473,23 +473,21 @@ export const RecordField: React.FC<RecordFieldProps> = ({
       }
       case ColumnsId.tcpflags: {
         let child = emptyText();
-        if (typeof value === 'number' && !isNaN(value)) {
-          const flags = decomposeTCPFlagsBitfield(value);
-          const name = flags.length > 0 ? flags.map(f => f.name).join(', ') : String(value);
-          if (detailed) {
-            let description = `${t('Value')}: ${value}`;
-            if (flags.length === 1) {
-              description += '. ' + flags[0].description;
-            } else if (flags.length > 1) {
-              description +=
-                '. ' +
-                t('The flow contains packets with various flags: ') +
-                flags.map(f => f.name + ' (' + f.description + ')').join('; ');
-            }
-            child = clickableContent(name, description, getTCPFlagsDocUrl());
-          } else {
-            child = simpleTextWithTooltip(name)!;
+        const sVal = String(value);
+        const flags = getFlagsList(sVal);
+        if (detailed) {
+          let description = `${t('Value')}: ${value}`;
+          if (flags.length === 1) {
+            description += '. ' + flags[0].description;
+          } else if (flags.length > 1) {
+            description +=
+              '. ' +
+              t('The flow contains packets with various flags: ') +
+              flags.map(f => f.name + ' (' + f.description + ')').join('; ');
           }
+          child = clickableContent(sVal, description, getTCPFlagsDocUrl());
+        } else {
+          child = simpleTextWithTooltip(sVal)!;
         }
         return singleContainer(child);
       }

web/src/utils/filter-options.ts

@@ -174,8 +174,8 @@ export const getDSCPOptions = (value: string): Promise<FilterOption[]> => {
 export const getTCPFlagsOptions = (value: string): Promise<FilterOption[]> => {
   return Promise.resolve(
     tcpFlagsList
-      .filter(opt => String(opt.value).includes(value) || opt.name.toLowerCase().includes(value.toLowerCase()))
-      .map(v => ({ name: v.name, value: String(v.value) }))
+      .filter(opt => opt.name.toLowerCase().includes(value.toLowerCase()))
+      .map(v => ({ name: v.name, value: v.name }))
   );
 };
 

web/src/utils/tcp-flags.ts

@@ -1,29 +1,22 @@
-import { ReadOnlyValue, ReadOnlyValues } from './values';
-
 export const getTCPFlagsDocUrl = () => {
   return 'https://www.rfc-editor.org/rfc/rfc9293';
 };
 
-export const tcpFlagsList: ReadOnlyValues = [
-  { value: 1, name: 'FIN', description: 'No more data from sender' },
-  { value: 2, name: 'SYN', description: 'Synchronize sequence numbers' },
-  { value: 4, name: 'RST', description: 'Reset the connection' },
-  { 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: 'Acknowledgement of SYN (custom flag)' },
-  { value: 512, name: 'FIN_ACK', description: 'Acknowledgement of FIN (custom flag)' },
-  { value: 1024, name: 'RST_ACK', description: 'Acknowledgement of RST (custom flag)' }
+export const tcpFlagsList = [
+  { name: 'FIN', description: 'No more data from sender' },
+  { name: 'SYN', description: 'Synchronize sequence numbers' },
+  { name: 'RST', description: 'Reset the connection' },
+  { name: 'PSH', description: 'Push function' },
+  { name: 'ACK', description: 'Acknowledgement field is significant' },
+  { name: 'URG', description: 'Urgent pointer field is significant' },
+  { name: 'ECE', description: 'ECN-Echo' },
+  { name: 'CWR', description: 'Congestion Window Reduced' },
+  { name: 'SYN_ACK', description: 'Acknowledgement of SYN (custom flag)' },
+  { name: 'FIN_ACK', description: 'Acknowledgement of FIN (custom flag)' },
+  { name: 'RST_ACK', description: 'Acknowledgement of RST (custom flag)' }
 ] as const;
 
-export const decomposeTCPFlagsBitfield = (bitfield: number): ReadOnlyValues => {
-  const values: ReadOnlyValue[] = [];
-  tcpFlagsList.forEach(flag => {
-    if (bitfield & flag.value) {
-      values.push(flag);
-    }
-  });
-  return values;
+export const getFlagsList = (joined: string): { name: string, description: string}[] => {
+  const names = joined.split(',');
+  return tcpFlagsList.filter(f => names.includes(f.name));
 };