NETOBSERV-1337 DSCP filter & side panel details (#401)

* add dscp field + side panel details

* add DSCP as numeric field

pkg/model/fields/fields.go

@@ -34,6 +34,7 @@ const (
 	PktDropPackets = "PktDropPackets"
 	Proto          = "Proto"
 	Bytes          = "Bytes"
+	DSCP           = "Dscp"
 	PktDropBytes   = "PktDropBytes"
 	FlowDirection  = "FlowDirection"
 	DNSID          = "DnsId"
@@ -53,7 +54,8 @@ func IsNumeric(v string) bool {
 		DstPort,
 		Packets,
 		Proto,
-		Bytes:
+		Bytes,
+		DSCP:
 		return true
 	default:
 		return false

web/locales/en/plugin__netobserv-plugin.json

@@ -228,6 +228,12 @@
   "Compare to total dropped": "Compare to total dropped",
   "Export panel": "Export panel",
   "n/a": "n/a",
+  "Type": "Type",
+  "Code": "Code",
+  "DSCP Service Class Name": "DSCP Service Class Name",
+  "Value": "Value",
+  "Examples": "Examples",
+  "DSCP": "DSCP",
   "reporting": "reporting",
   "Ingress": "Ingress",
   "Egress": "Egress",
@@ -458,6 +464,8 @@
   "Specify the direction of the Flow observed at the Node observation point.": "Specify the direction of the Flow observed at the Node observation point.",
   "Network interface": "Network interface",
   "Specify a network interface.": "Specify a network interface.",
+  "DSCP value": "DSCP value",
+  "Specify a Differentiated Services Code Point value as integer number.": "Specify a Differentiated Services Code Point value as integer number.",
   "Specify a single conversation hash Id.": "Specify a single conversation hash Id.",
   "Packet drop TCP state": "Packet drop TCP state",
   "Specify a single TCP state.": "Specify a single TCP state.",

web/src/api/ipfix.ts

@@ -96,6 +96,8 @@ export interface Fields {
   Bytes_AB?: number;
   /** In conversation tracking, B to A bytes counter per conversation */
   Bytes_BA?: number;
+  /** Differentiated Services Code Point Value  */
+  Dscp?: number;
   /** ICMP type */
   IcmpType?: number;
   /** ICMP code */

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

@@ -18,6 +18,7 @@ import {
 import { DROP_CAUSES_NAMES, getDropCauseDescription, getDropCauseDocUrl } from '../../utils/pkt-drop';
 import { formatDurationAboveMillisecond, formatDurationAboveNanosecond } from '../../utils/duration';
 import { formatPort } from '../../utils/port';
+import { getDSCPDocUrl, getDSCPServiceClassDescription, getDSCPServiceClassName } from '../../utils/dscp';
 import { formatProtocol } from '../../utils/protocol';
 import { Size } from '../dropdowns/table-display-dropdown';
 import './record-field.css';
@@ -367,26 +368,54 @@ export const RecordField: React.FC<{
       }
       case ColumnsId.proto:
         const text = value ? formatProtocol(value as number) : t('n/a');
-        let child: JSX.Element | undefined = undefined;
+        const children: JSX.Element[] = [];
 
-        if (detailed && flow.fields.IcmpType !== undefined) {
-          const type = getICMPType(flow.fields.Proto, flow.fields.IcmpType as ICMP_ALL_TYPES_VALUES);
-          const code = getICMPCode(
-            flow.fields.Proto,
-            flow.fields.IcmpType as ICMP_ALL_TYPES_VALUES,
-            flow.fields.IcmpCode as ICMP_ALL_CODES_VALUES
-          );
-          const docUrl = getICMPDocUrl(flow.fields.Proto);
-          child = type ? (
-            <>
-              {clickableContent(type.name, type.description || '', docUrl)}
-              {code ? clickableContent(code.name, code.description || '', docUrl) : <></>}
-            </>
-          ) : (
-            clickableContent(`Type: ${flow.fields.IcmpType} Code: ${flow.fields.IcmpCode}`, '', docUrl)
-          );
+        if (detailed) {
+          if (flow.fields.IcmpType !== undefined) {
+            const type = getICMPType(flow.fields.Proto, flow.fields.IcmpType as ICMP_ALL_TYPES_VALUES);
+            const code = getICMPCode(
+              flow.fields.Proto,
+              flow.fields.IcmpType as ICMP_ALL_TYPES_VALUES,
+              flow.fields.IcmpCode as ICMP_ALL_CODES_VALUES
+            );
+            const docUrl = getICMPDocUrl(flow.fields.Proto);
+            if (type) {
+              children.push(clickableContent(type.name, type.description || '', docUrl));
+              if (code) {
+                children.push(clickableContent(code.name, code.description || '', docUrl));
+              }
+            } else {
+              children.push(
+                clickableContent(
+                  `${t('Type')}: ${flow.fields.IcmpType} ${t('Code')}: ${flow.fields.IcmpCode}`,
+                  '',
+                  docUrl
+                )
+              );
+            }
+          }
+
+          if (flow.fields.Dscp !== undefined) {
+            const docUrl = getDSCPDocUrl();
+            const serviceClassName = getDSCPServiceClassName(flow.fields.Dscp);
+            if (serviceClassName) {
+              children.push(
+                clickableContent(
+                  `${t('DSCP Service Class Name')}: ${serviceClassName}`,
+                  `${t('Value')}: ${flow.fields.Dscp} ${t('Examples')}: ${getDSCPServiceClassDescription(
+                    serviceClassName
+                  )}`,
+                  docUrl
+                )
+              );
+            } else {
+              children.push(clickableContent(`${t('DSCP')}: ${flow.fields.Dscp}`, '', docUrl));
+            }
+          }
         }
-        return singleContainer(simpleTextWithTooltip(child ? `${text} ${t('reporting')}` : text, undefined, child));
+        return singleContainer(
+          simpleTextWithTooltip(children.length ? `${text} ${t('reporting')}` : text, undefined, <>{children}</>)
+        );
       case ColumnsId.flowdir:
         return singleContainer(
           simpleTextWithTooltip(

web/src/model/filters.ts

@@ -34,6 +34,7 @@ export type FilterId =
   | 'direction'
   | 'interface'
   | 'type'
+  | 'dscp'
   | 'id'
   | 'pkt_drop_state'
   | 'pkt_drop_cause'

web/src/utils/dscp.ts

@@ -0,0 +1,85 @@
+export const getDSCPDocUrl = () => {
+  return 'https://www.rfc-editor.org/rfc/rfc4594';
+};
+
+export type DSCP_SERVICE_CLASS_NAMES =
+  | 'Network Control'
+  | 'Telephony'
+  | 'Signaling'
+  | 'Multimedia Conferencing'
+  | 'Real-Time Interactive'
+  | 'Multimedia Streaming'
+  | 'Broadcast Video'
+  | 'Low-Latency Data'
+  | 'OAM'
+  | 'High-Throughput Data'
+  | 'Standard'
+  | 'Low-Priority Data';
+
+export const getDSCPServiceClassName = (dscp: number): DSCP_SERVICE_CLASS_NAMES | undefined => {
+  switch (dscp) {
+    case 48:
+      return 'Network Control';
+    case 46:
+      return 'Telephony';
+    case 40:
+      return 'Signaling';
+    case 38:
+    case 34:
+    case 36:
+      return 'Multimedia Conferencing';
+    case 32:
+      return 'Real-Time Interactive';
+    case 30:
+    case 28:
+    case 26:
+      return 'Multimedia Streaming';
+    case 24:
+      return 'Broadcast Video';
+    case 22:
+    case 20:
+    case 18:
+      return 'Low-Latency Data';
+    case 16:
+      return 'OAM';
+    case 14:
+    case 12:
+    case 10:
+      return 'High-Throughput Data';
+    case 0:
+      return 'Standard';
+    case 8:
+      return 'Low-Priority Data';
+    default:
+      return undefined;
+  }
+};
+
+export const getDSCPServiceClassDescription = (serviceClassName: DSCP_SERVICE_CLASS_NAMES): string => {
+  switch (serviceClassName) {
+    case 'Network Control':
+      return 'Network routing';
+    case 'Telephony':
+      return 'IP Telephony bearer';
+    case 'Signaling':
+      return 'IP Telephony signaling';
+    case 'Multimedia Conferencing':
+      return 'H.323/V2 video conferencing (adaptive)';
+    case 'Real-Time Interactive':
+      return 'Video conferencing and nteractive gaming';
+    case 'Multimedia Streaming':
+      return 'Streaming video and audio on demand';
+    case 'Broadcast Video':
+      return 'Broadcast TV & live events';
+    case 'Low-Latency Data':
+      return 'Client/server transactions Web-based ordering';
+    case 'OAM':
+      return 'OAM&P';
+    case 'High-Throughput Data':
+      return 'Store and forward applications';
+    case 'Standard':
+      return 'Undifferentiated applications';
+    case 'Low-Priority Data':
+      return 'Any flow that has no BW assurance';
+  }
+};

web/src/utils/filter-definitions.ts

@@ -456,6 +456,16 @@ export const getFilterDefinitions = (
         hint: t('Specify a network interface.'),
         encoder: simpleFiltersEncoder('Interface')
       },
+      {
+        id: 'dscp',
+        name: t('DSCP value'),
+        category: FilterCategory.None,
+        component: FilterComponent.Number,
+        getOptions: noOption,
+        validate: rejectEmptyValue,
+        hint: t('Specify a Differentiated Services Code Point value as integer number.'),
+        encoder: simpleFiltersEncoder('Dscp')
+      },
       {
         id: 'id',
         name: t('Conversation Id'),