Merge pull request #175 from jpinsonneau/376

NETOBSERV-376 UI: add mac address column / filter

Author: jpinsonneau

web/locales/en/plugin__network-observability-plugin.json

@@ -178,6 +178,7 @@
   "Kinds": "Kinds",
   "Owner Kinds": "Owner Kinds",
   "Ports": "Ports",
+  "MAC": "MAC",
   "Node IP": "Node IP",
   "Node Name": "Node Name",
   "Kubernetes Objects": "Kubernetes Objects",
@@ -229,6 +230,7 @@
   "A CIDR specification like 192.51.100.0/24, 2001:db8::/32": "A CIDR specification like 192.51.100.0/24, 2001:db8::/32",
   "Empty double quotes \"\" for an empty IP": "Empty double quotes \"\" for an empty IP",
   "Not a valid IPv4 or IPv6, nor a CIDR, nor an IP range separated by hyphen": "Not a valid IPv4 or IPv6, nor a CIDR, nor an IP range separated by hyphen",
+  "Not a valid MAC address": "Not a valid MAC address",
   "Owner Name": "Owner Name",
   "Incomplete resource name, either kind, namespace or name is missing.": "Incomplete resource name, either kind, namespace or name is missing.",
   "Kind is empty": "Kind is empty",
@@ -246,6 +248,7 @@
   "A port number like 80, 21": "A port number like 80, 21",
   "A IANA name like HTTP, FTP": "A IANA name like HTTP, FTP",
   "Empty double quotes \"\" for undefined port": "Empty double quotes \"\" for undefined port",
+  "Specify a single MAC address.": "Specify a single MAC address.",
   "Unknown protocol": "Unknown protocol",
   "Specify a single protocol number or name.": "Specify a single protocol number or name.",
   "Specify a single protocol following one of these rules:": "Specify a single protocol following one of these rules:",

web/src/model/filters.ts

@@ -40,6 +40,9 @@ export type FilterId =
   | 'address'
   | 'src_address'
   | 'dst_address'
+  | 'mac'
+  | 'src_mac'
+  | 'dst_mac'
   | 'port'
   | 'src_port'
   | 'dst_port'

web/src/utils/columns.ts

@@ -25,6 +25,9 @@ export enum ColumnsId {
   addr = 'Addr',
   srcaddr = 'SrcAddr',
   dstaddr = 'DstAddr',
+  mac = 'Mac',
+  srcmac = 'SrcMac',
+  dstmac = 'DstMac',
   port = 'Port',
   srcport = 'SrcPort',
   dstport = 'DstPort',
@@ -212,6 +215,14 @@ export const getCommonColumns = (t: TFunction, withConcatenatedFields = true): C
         ),
       width: 10
     },
+    {
+      id: ColumnsId.mac,
+      name: t('MAC'),
+      isSelected: false,
+      value: f => getSrcOrDstValue(f.fields.SrcMac, f.fields.DstMac),
+      sort: (a, b, col) => compareStrings((col.value(a) as string[]).join(''), (col.value(b) as string[]).join('')),
+      width: 10
+    },
     {
       id: ColumnsId.hostaddr,
       name: t('Node IP'),
@@ -375,6 +386,17 @@ export const getSrcColumns = (t: TFunction): Column[] => {
       sort: (a, b, col) => comparePorts(col.value(a) as number, col.value(b) as number),
       width: 10
     },
+    {
+      id: ColumnsId.srcmac,
+      group: t('Source'),
+      name: t('MAC'),
+      fieldName: 'SrcMac',
+      quickFilter: 'src_mac',
+      isSelected: false,
+      value: f => f.fields.SrcMac,
+      sort: (a, b, col) => compareStrings(col.value(a) as string, col.value(b) as string),
+      width: 10
+    },
     {
       id: ColumnsId.srchostaddr,
       group: t('Source'),
@@ -479,6 +501,17 @@ export const getDstColumns = (t: TFunction): Column[] => {
       sort: (a, b, col) => comparePorts(col.value(a) as number, col.value(b) as number),
       width: 10
     },
+    {
+      id: ColumnsId.dstmac,
+      group: t('Destination'),
+      name: t('MAC'),
+      fieldName: 'DstMac',
+      quickFilter: 'dst_mac',
+      isSelected: false,
+      value: f => f.fields.DstMac,
+      sort: (a, b, col) => compareStrings(col.value(a) as string, col.value(b) as string),
+      width: 10
+    },
     {
       id: ColumnsId.dsthostaddr,
       group: t('Destination'),

web/src/utils/filter-definitions.ts

@@ -140,6 +140,7 @@ export const getFilterDefinitions = (t: TFunction): FilterDefinition[] => {
     - ${t('Empty double quotes "" for an empty IP')}`;
 
     const invalidIPMessage = t('Not a valid IPv4 or IPv6, nor a CIDR, nor an IP range separated by hyphen');
+    const invalidMACMessage = t('Not a valid MAC address');
 
     filterDefinitions = [
       ...peers(
@@ -303,6 +304,25 @@ export const getFilterDefinitions = (t: TFunction): FilterDefinition[] => {
         singleFieldMapping('SrcPort'),
         singleFieldMapping('DstPort')
       ),
+      ...peers(
+        {
+          id: 'mac',
+          name: t('MAC'),
+          component: FilterComponent.Text,
+          category: FilterCategory.Common,
+          getOptions: noOption,
+          validate: (value: string) => {
+            if (_.isEmpty(value)) {
+              return invalid(t('Value is empty'));
+            }
+            return /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})/.test(value) ? valid(value) : invalid(invalidMACMessage);
+          },
+          hint: t('Specify a single MAC address.'),
+          fieldMatching: {}
+        },
+        singleFieldMapping('SrcMac'),
+        singleFieldMapping('DstMac')
+      ),
       ...peers(
         {
           id: 'host_address',