add dscp field + side panel details

netobserv · Sep 22, 2023 · a036c0e · a036c0e
1 parent 82c4ac9
commit a036c0e
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 18 deletions.
diff --git a/web/locales/en/plugin__netobserv-plugin.json b/web/locales/en/plugin__netobserv-plugin.json
@@ -228,6 +228,9 @@
   "Compare to total dropped": "Compare to total dropped",
   "Export panel": "Export panel",
   "n/a": "n/a",
+  "Type": "Type",
+  "Code": "Code",
+  "DSCP": "DSCP",
   "reporting": "reporting",
   "Ingress": "Ingress",
   "Egress": "Egress",
@@ -455,6 +458,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.",

diff --git a/web/src/api/ipfix.ts b/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 */

diff --git a/web/src/components/netflow-record/record-field.tsx b/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, getDSCPServiceClassName } from '../../utils/dscp';
 import { formatProtocol } from '../../utils/protocol';
 import { Size } from '../dropdowns/table-display-dropdown';
 import './record-field.css';
@@ -367,26 +368,42 @@ 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);
+            children.push(clickableContent(`${t('DSCP')}: ${flow.fields.Dscp}}`, serviceClassName, 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(

diff --git a/web/src/model/filters.ts b/web/src/model/filters.ts
@@ -34,6 +34,7 @@ export type FilterId =
   | 'direction'
   | 'interface'
   | 'type'
+  | 'dscp'
   | 'id'
   | 'pkt_drop_state'
   | 'pkt_drop_cause'

diff --git a/web/src/utils/dscp.ts b/web/src/utils/dscp.ts
@@ -0,0 +1,37 @@
+export const getDSCPDocUrl = () => {
+  return 'https://www.rfc-editor.org/rfc/rfc4594';
+};
+
+export const getDSCPServiceClassName = (dscp: number): string => {
+  switch (dscp) {
+    case 48:
+      return 'Network Control';
+    case 46:
+      return 'Telephony';
+    case 40:
+      return 'Multimedia Conferencing';
+    case 36:
+    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 'Standard';
+    case 8:
+      return 'Low-Priority Data';
+    default:
+      return '';
+  }
+};
diff --git a/web/src/utils/filter-definitions.ts b/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'),