Use flags list

Author: jotak

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?: string;
+  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

@@ -473,21 +473,23 @@ export const RecordField: React.FC<RecordFieldProps> = ({
       }
       case ColumnsId.tcpflags: {
         let child = emptyText();
-        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('; ');
+        if (Array.isArray(value) && value.length > 0) {
+          const flags = getFlagsList(value as string[]);
+          const joined = value.join(', ');
+          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(joined, description, getTCPFlagsDocUrl());
+          } else {
+            child = simpleTextWithTooltip(joined)!;
           }
-          child = clickableContent(sVal, description, getTCPFlagsDocUrl());
-        } else {
-          child = simpleTextWithTooltip(sVal)!;
         }
         return singleContainer(child);
       }

web/src/utils/tcp-flags.ts

@@ -16,7 +16,6 @@ export const tcpFlagsList = [
   { name: 'RST_ACK', description: 'Acknowledgement of RST (custom flag)' }
 ] as const;
 
-export const getFlagsList = (joined: string): { name: string, description: string}[] => {
-  const names = joined.split(',');
+export const getFlagsList = (names: string[]): { name: string, description: string}[] => {
   return tcpFlagsList.filter(f => names.includes(f.name));
 };