NETOBSERV-1969: Fix IcmpType & IcmpCode

Those fields should be correctly displayed when ICMP data is present,
and not displayed (in side panel) when ICMP data is absent.

Author: jotak

web/src/components/__tests-data__/columns.ts

@@ -497,6 +497,26 @@ export const ColumnConfigSampleDefs = [
     filter: 'dns_flag_response_code',
     default: false,
     width: 5
+  },
+  {
+    id: 'IcmpType',
+    group: 'ICMP',
+    name: 'Type',
+    tooltip: 'The type of the ICMP message.',
+    field: 'IcmpType',
+    filter: 'icmp_type',
+    default: false,
+    width: 10
+  },
+  {
+    id: 'IcmpCode',
+    group: 'ICMP',
+    name: 'Code',
+    tooltip: 'The code of the ICMP message.',
+    field: 'IcmpCode',
+    filter: 'icmp_code',
+    default: false,
+    width: 10
   }
 ];
 

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

@@ -30,7 +30,9 @@ describe('<RecordPanel />', () => {
     // sample contains 20 fields
     // JSON tab represent 1 extra field
     expect(wrapper.find('.record-field-container')).toHaveLength(20 + 1);
-
+    // No ICMP
+    expect(wrapper.find({ 'data-test-id': 'drawer-field-IcmpType' })).toHaveLength(0);
+    expect(wrapper.find({ 'data-test-id': 'drawer-field-IcmpCode' })).toHaveLength(0);
     // same with 4 valid fields + json
     wrapper.setProps({ record: UnknownFlow });
     expect(wrapper.find('.record-field-container')).toHaveLength(4 + 1);
@@ -43,4 +45,19 @@ describe('<RecordPanel />', () => {
     closeButton.simulate('click');
     expect(mocks.onClose).toHaveBeenCalled();
   });
+
+  it('should render ICMP', async () => {
+    const flowWithICMP = {
+      ...mocks.record,
+      fields: {
+        ...mocks.record.fields,
+        IcmpType: 8,
+        IcmpCode: 0,
+      }
+    }
+    const wrapper = shallow(<RecordPanel {...mocks} record={flowWithICMP} />);
+    expect(wrapper.find(RecordPanel)).toBeTruthy();
+    expect(wrapper.find({ 'data-test-id': 'drawer-field-IcmpType' })).toHaveLength(1);
+    expect(wrapper.find({ 'data-test-id': 'drawer-field-IcmpCode' })).toHaveLength(1);
+  });
 });

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

@@ -14,7 +14,6 @@ import {
   getICMPCode,
   getICMPDocUrl,
   getICMPType,
-  icmpAllCodesValues,
   icmpAllTypesValues,
   isValidICMPProto
 } from '../../../utils/icmp';
@@ -369,41 +368,40 @@ export const RecordField: React.FC<RecordFieldProps> = ({
       }
       case ColumnsId.icmptype: {
         let child = emptyText();
-        if (Array.isArray(value) && value.length) {
-          if (isValidICMPProto(Number(value[0]))) {
-            const type = getICMPType(Number(value[0]), Number(value[1]) as icmpAllTypesValues);
+        if (typeof value === 'number' && !isNaN(value)) {
+          const proto = Number(flow.fields.Proto);
+          if (isValidICMPProto(proto)) {
+            const type = getICMPType(proto, value as icmpAllTypesValues);
             if (type && detailed) {
-              child = clickableContent(type.name, type.description || '', getICMPDocUrl(Number(value[0])));
+              child = clickableContent(type.name, type.description || '', getICMPDocUrl(proto));
             } else {
-              child = simpleTextWithTooltip(type?.name || String(value[1]))!;
+              child = simpleTextWithTooltip(type?.name || String(value))!;
             }
           } else {
             child = errorTextValue(
-              String(value[1]),
-              t('ICMP type provided but protocol is {{proto}}', { proto: formatProtocol(value[0] as number, t) })
+              String(value),
+              t('ICMP type provided but protocol is {{proto}}', { proto: formatProtocol(proto, t) })
             );
           }
         }
         return singleContainer(child);
       }
       case ColumnsId.icmpcode: {
         let child = emptyText();
-        if (Array.isArray(value) && value.length) {
-          if (isValidICMPProto(Number(value[0]))) {
-            const code = getICMPCode(
-              Number(value[0]),
-              Number(value[1]) as icmpAllTypesValues,
-              Number(value[2]) as icmpAllCodesValues
-            );
+        if (typeof value === 'number' && !isNaN(value)) {
+          const proto = Number(flow.fields.Proto);
+          const typez = Number(flow.fields.IcmpType) as icmpAllTypesValues;
+          if (isValidICMPProto(proto)) {
+            const code = getICMPCode(proto, typez, value);
             if (code && detailed) {
-              child = clickableContent(code.name, code.description || '', getICMPDocUrl(Number(value[0])));
+              child = clickableContent(code.name, code.description || '', getICMPDocUrl(proto));
             } else {
-              child = simpleTextWithTooltip(code?.name || String(value[2]))!;
+              child = simpleTextWithTooltip(code?.name || String(value))!;
             }
           } else {
             child = errorTextValue(
-              String(value[1]),
-              t('ICMP code provided but protocol is {{proto}}', { proto: formatProtocol(value[0] as number, t) })
+              String(value),
+              t('ICMP code provided but protocol is {{proto}}', { proto: formatProtocol(proto, t) })
             );
           }
         }