NETOBSERV-1580 add update-config target (#621)

* add update-config target

* update config and manage drop columns

* keep features disabled to avoid cypress failures

* update config to fix icmp cols

Author: jpinsonneau

Makefile

@@ -135,6 +135,10 @@ endif
 generate-doc: ## Generate documentation of the flows JSON format
 	cd web && npm run generate-doc
 
+.PHONY: update-config
+update-config: ## Update sample config from operator repo
+	./scripts/update-config.sh
+
 ##@ Develop frontend
 
 .PHONY: install-frontend

config/sample-config.yaml

@@ -589,6 +589,7 @@ frontend:
     - id: Bytes
       name: Bytes
       tooltip: The total aggregated number of bytes.
+      field: Bytes
       fields:
         - Bytes
         - PktDropBytes
@@ -597,6 +598,7 @@ frontend:
     - id: Packets
       name: Packets
       tooltip: The total aggregated number of packets.
+      field: Packets
       fields:
         - Packets
         - PktDropPackets
@@ -622,6 +624,41 @@ frontend:
       calculated: substract(column.CollectionTime,TimeFlowEndMs)
       default: false
       width: 5
+    - id: PktDropBytes
+      name: Dropped Bytes
+      tooltip: The total aggregated number of bytes dropped.
+      field: PktDropBytes
+      default: false
+      width: 5
+      feature: pktDrop
+    - id: PktDropPackets
+      name: Dropped Packets
+      tooltip: The total aggregated number of packets dropped.
+      field: PktDropPackets
+      default: false
+      width: 5
+      feature: pktDrop
+    - id: PktDropLatestState
+      name: Drop State
+      tooltip: TCP state on last dropped packet.
+      field: PktDropLatestState
+      default: false
+      width: 10
+      feature: pktDrop
+    - id: PktDropLatestDropCause
+      name: Drop Cause
+      tooltip: TCP state on last dropped packet.
+      field: PktDropLatestDropCause
+      default: false
+      width: 10
+      feature: pktDrop
+    - id: PktDropLatestFlags
+      name: Drop Flags
+      tooltip: TCP flags on last dropped packet.
+      field: PktDropLatestFlags
+      default: false
+      width: 10
+      feature: pktDrop
     - id: DNSId
       group: DNS
       name: DNS Id
@@ -1036,7 +1073,7 @@ frontend:
       component: number
       hint: Specify a TCP smoothed Round Trip Time in nanoseconds.
     - id: network_events
-      name: Network events flow monitoring
+      name: Network Events
       component: text
       hint: Specify a single network event.
   scopes:

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

@@ -338,7 +338,8 @@ export const RecordField: React.FC<RecordFieldProps> = ({
         }
         return singleContainer(child);
       }
-      case ColumnsId.tcpflags: {
+      case ColumnsId.tcpflags:
+      case ColumnsId.dropflags: {
         let child = emptyText();
         if (Array.isArray(value) && value.length > 0) {
           const flags = getFlagsList(value as string[]);
@@ -485,6 +486,16 @@ export const RecordField: React.FC<RecordFieldProps> = ({
             simpleTextWithTooltip(detailed ? `${String(value)} ${c.name.toLowerCase()} ${t('sent')}` : String(value))
           );
         }
+      case ColumnsId.dropbytes:
+      case ColumnsId.droppackets:
+        const droppedText = t('dropped');
+        const droppedCount = String(value);
+        return singleContainer(
+          simpleTextWithTooltip(
+            detailed ? `${droppedCount} ${c.name.toLowerCase()} ${droppedText}` : droppedCount,
+            isDark ? '#C9190B' : '#A30000'
+          )
+        );
       case ColumnsId.dnsid: {
         return singleContainer(
           typeof value === 'number' && !isNaN(value) ? simpleTextWithTooltip(String(value)) : emptyDnsErrorText()

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

@@ -79,7 +79,15 @@ export const RecordPanel: React.FC<RecordDrawerProps> = ({
 
   // hide empty columns
   const getVisibleColumns = React.useCallback(() => {
-    const forbiddenColumns = [ColumnsId.ifdirs, ColumnsId.interfaces];
+    const forbiddenColumns = [
+      ColumnsId.ifdirs,
+      ColumnsId.interfaces,
+      ColumnsId.dropbytes,
+      ColumnsId.droppackets,
+      ColumnsId.dropstate,
+      ColumnsId.dropcause,
+      ColumnsId.dropflags
+    ];
     return columns.filter((c: Column) => {
       if (!c.fieldValue) {
         return false;

web/src/utils/columns.ts

@@ -44,6 +44,11 @@ export enum ColumnsId {
   tcpflags = 'TCPFlags',
   bytes = 'Bytes',
   packets = 'Packets',
+  dropbytes = 'PktDropBytes',
+  droppackets = 'PktDropPackets',
+  dropstate = 'PktDropLatestState',
+  dropcause = 'PktDropLatestDropCause',
+  dropflags = 'PktDropLatestFlags',
   owner = 'K8S_OwnerName',
   srcowner = 'SrcK8S_OwnerName',
   dstowner = 'DstK8S_OwnerName',