Fix issues about visible fields in side panel

Previously, visible fields were determined out of several criteria
including:
- fields with calculated values were filtered out
- record with null value was filtered out (as opposed to undefined)

Also, "Common" columns was determined by having a calculated value (ie.
non-common columns were prohibited to use calculated)

This must change since columns can now have calculated and still must be
visible (e.g. SrcK8S_Name is a kubeObject calculated value)

- So, Common now is when calculated in the form of "[a,b]"
- Visible columns for side panel is now based on being tied to fields

Author: jotak

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

@@ -37,7 +37,9 @@ export const FlowsSample: Record[] = [
       _RecordType: 'flowLog',
       FlowDirection: FlowDirection.Egress,
       SrcK8S_Namespace: 'default',
-      DstK8S_Namespace: 'default'
+      DstK8S_Namespace: 'default',
+      SrcK8S_Type: 'Pod',
+      DstK8S_Type: 'Pod'
     },
     key: 1,
     fields: {

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

@@ -27,14 +27,15 @@ describe('<RecordPanel />', () => {
     expect(wrapper.find(RecordPanel)).toBeTruthy();
     expect(wrapper.find('#record-panel-test')).toHaveLength(1);
     // all columns with data + JSON field
-    // sample contains 18 fields
+    // sample contains 20 fields
     // JSON tab represent 1 extra field
-    expect(wrapper.find('.record-field-container')).toHaveLength(18 + 1);
+    expect(wrapper.find('.record-field-container')).toHaveLength(20 + 1);
 
     // same with 4 valid fields + json
     wrapper.setProps({ record: UnknownFlow });
     expect(wrapper.find('.record-field-container')).toHaveLength(4 + 1);
   });
+
   it('should close on click', async () => {
     const wrapper = shallow(<RecordPanel {...mocks} />);
     const closeButton = wrapper.find(DrawerCloseButton);

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

@@ -81,10 +81,10 @@ export const RecordPanel: React.FC<RecordDrawerProps> = ({
   const getVisibleColumns = React.useCallback(() => {
     const forbiddenColumns = [ColumnsId.ifdirs, ColumnsId.interfaces];
     return columns.filter((c: Column) => {
-      if (!c.value) {
+      if (!c.fieldValue) {
         return false;
       }
-      const value = c.value(record);
+      const value = c.fieldValue(record);
       return !forbiddenColumns.includes(c.id) && value !== '' && !Number.isNaN(value);
     });
   }, [columns, record]);

web/src/components/netflow-traffic.tsx

@@ -201,17 +201,13 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({
     return getAvailablePanels().filter(panel => panel.isSelected);
   }, [getAvailablePanels]);
 
-  const getAvailableColumns = React.useCallback(
-    (isSidePanel = false) => {
-      return model.columns.filter(
-        col =>
-          (!isSidePanel || !col.isCommon) &&
-          (isConnectionTracking() || ![ColumnsId.recordtype, ColumnsId.hashid].includes(col.id)) &&
-          (!col.feature || model.config.features.includes(col.feature))
-      );
-    },
-    [model.columns, model.config.features, isConnectionTracking]
-  );
+  const getAvailableColumns = React.useCallback(() => {
+    return model.columns.filter(
+      col =>
+        (isConnectionTracking() || ![ColumnsId.recordtype, ColumnsId.hashid].includes(col.id)) &&
+        (!col.feature || model.config.features.includes(col.feature))
+    );
+  }, [model.columns, model.config.features, isConnectionTracking]);
 
   const getSelectedColumns = React.useCallback(() => {
     return getAvailableColumns().filter(column => column.isSelected);
@@ -911,7 +907,7 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({
           allowedScopes={getAllowedScopes()}
           canSwitchTypes={isFlow() && isConnectionTracking()}
           clearSelections={clearSelections}
-          availableColumns={getAvailableColumns(true)}
+          availableColumns={getAvailableColumns()}
           maxChunkAge={model.config.maxChunkAgeMs}
           selectedColumns={getSelectedColumns()}
         />

web/src/components/query-summary/__tests__/summary-panel.spec.tsx

@@ -37,11 +37,13 @@ describe('<SummaryPanel />', () => {
     const wrapper = mount(<SummaryPanelContent {...mocks} />);
 
     expect(wrapper.find(Accordion)).toHaveLength(1);
-    expect(wrapper.find(AccordionItem)).toHaveLength(3);
+    expect(wrapper.find(AccordionItem)).toHaveLength(5);
 
     expect(wrapper.find('#addresses').last().text()).toBe('5 IP(s)');
     expect(wrapper.find('#ports').last().text()).toBe('4 Port(s)');
     expect(wrapper.find('#protocols').last().text()).toBe('1 Protocol(s)');
+    expect(wrapper.find('#Pod').last().text()).toBe('2 Pod(s)');
+    expect(wrapper.find('#Namespace').last().text()).toBe('1 Namespace(s)');
   });
 
   it('should toggle panel', async () => {

web/src/utils/__tests__/columns.spec.ts

@@ -45,11 +45,11 @@ describe('Columns', () => {
     expect(value).toEqual({ kind: 'Pod', name: 'client', namespace: 'foo', showNamespace: false });
   });
 
-  it('should calculate k8s service name when empty', () => {
+  it('should calculate k8s owner name when empty', () => {
     const col = defColumns.find(c => c.id === ('DstK8S_OwnerName' as ColumnsId));
     expect(col).toBeDefined();
     const value = col?.value!(flow);
-    expect(value).toEqual(undefined);
+    expect(value).toBeUndefined();
   });
 
   it('should calculate k8s namespace values', () => {
@@ -90,4 +90,11 @@ describe('Columns', () => {
       { kind: 'Service', name: 'server', namespace: 'bar', showNamespace: true }
     ]);
   });
+
+  it('should calculate src+dst K8S owner objects when empty', () => {
+    const col = defColumns.find(c => c.id === ('K8S_OwnerObject' as ColumnsId));
+    expect(col).toBeDefined();
+    const value = col?.value!(flow);
+    expect(value).toEqual([undefined, undefined]);
+  });
 });

web/src/utils/column-parser.ts

@@ -104,6 +104,29 @@ const forceType = (id: ColumnsId, value: ColValue, type?: FieldType): ColValue =
 };
 
 export type ValueFunc = (record: Record) => ColValue;
+
+export const fromFieldFunc = (
+  def: ColumnConfigDef,
+  fields: FieldConfig[] | undefined,
+  field: FieldConfig | undefined
+): ValueFunc | undefined => {
+  if (fields) {
+    return (r: Record) => {
+      const result: ColValue[] = fields.map(fc => {
+        const value = getRecordValue(r, fc.name, undefined);
+        return forceType(def.id as ColumnsId, value, fc.type);
+      });
+      return result.flatMap(r => r) as ColValue;
+    };
+  } else if (field) {
+    return (r: Record) => {
+      const value = getRecordValue(r, field!.name, '');
+      return forceType(def.id as ColumnsId, value, field!.type);
+    };
+  }
+  return undefined;
+};
+
 export const computeValueFunc = (
   def: ColumnConfigDef,
   columns: Column[],
@@ -128,20 +151,11 @@ export const computeValueFunc = (
       }
       return undefined;
     };
-  } else if (fields) {
-    return (r: Record) => {
-      const result: ColValue[] = fields.map(fc => {
-        const value = getRecordValue(r, fc.name, undefined);
-        return forceType(def.id as ColumnsId, value, fc.type);
-      });
-      return result.flatMap(r => r) as ColValue;
-    };
-  } else if (field) {
-    return (r: Record) => {
-      const value = getRecordValue(r, field!.name, '');
-      return forceType(def.id as ColumnsId, value, field!.type);
-    };
   }
-  console.warn('column.value called on ' + def.id + ' but not configured');
-  return undefined;
+
+  const fromField = fromFieldFunc(def, fields, field);
+  if (fromField === undefined) {
+    console.warn('column.value called on ' + def.id + ' but not configured');
+  }
+  return fromField;
 };

web/src/utils/columns.ts

@@ -3,7 +3,7 @@ import { Record } from '../api/ipfix';
 import { Feature } from '../model/config';
 import { FilterId } from '../model/filters';
 import { compareNumbers, compareStrings } from './base-compare';
-import { computeValueFunc } from './column-parser';
+import { computeValueFunc, fromFieldFunc } from './column-parser';
 import { FieldConfig } from './fields';
 import { compareIPs } from './ip';
 import { comparePorts } from './port';
@@ -119,6 +119,7 @@ export interface Column {
   isSelected: boolean;
   isCommon?: boolean;
   value?: (flow: Record) => ColValue;
+  fieldValue?: (flow: Record) => ColValue;
   sort(a: Record, b: Record, col: Column): number;
   // width in "em"
   width: number;
@@ -226,31 +227,29 @@ export const getDefaultColumns = (columnDefs: ColumnConfigDef[], fieldConfigs: F
       docURL: !_.isEmpty(d.docURL) ? d.docURL : undefined,
       quickFilter: !_.isEmpty(d.filter) ? (d.filter as FilterId) : undefined,
       isSelected: d.default === true,
-      isCommon: !_.isEmpty(d.calculated),
+      isCommon: d.calculated !== undefined && d.calculated.startsWith('['),
       value: computeValueFunc(d, columns, fields, field),
+      fieldValue: fromFieldFunc(d, fields, field),
       sort: (a: Record, b: Record, col: Column) => {
-        if (d.calculated) {
+        if (!col.fieldValue) {
           return -1;
-        } else {
-          if (col.value) {
-            const valA = col.value(a);
-            const valB = col.value(b);
-            if (typeof valA === 'number' && typeof valB === 'number') {
-              if (col.id.includes('Port')) {
-                return comparePorts(valA, valB);
-              } else if (col.id.includes('Proto')) {
-                return compareProtocols(valA, valB);
-              }
-              return compareNumbers(valA, valB);
-            } else if (typeof valA === 'string' && typeof valB === 'string') {
-              if (col.id.includes('IP')) {
-                return compareIPs(valA, valB);
-              }
-              return compareStrings(valA, valB);
-            }
+        }
+        const valA = col.fieldValue(a);
+        const valB = col.fieldValue(b);
+        if (typeof valA === 'number' && typeof valB === 'number') {
+          if (col.id.includes('Port')) {
+            return comparePorts(valA, valB);
+          } else if (col.id.includes('Proto')) {
+            return compareProtocols(valA, valB);
+          }
+          return compareNumbers(valA, valB);
+        } else if (typeof valA === 'string' && typeof valB === 'string') {
+          if (col.id.includes('IP')) {
+            return compareIPs(valA, valB);
           }
-          return 0;
+          return compareStrings(valA, valB);
         }
+        return 0;
       },
       width: d.width || 15,
       feature: d.feature