netobserv · openshift-merge-bot · Dec 11, 2023 · Dec 11, 2023
diff --git a/config/sample-config.yaml b/config/sample-config.yaml
@@ -393,13 +393,17 @@ frontend:
     - id: Bytes
       name: Bytes
       tooltip: The total aggregated number of bytes.
-      field: Bytes
+      fields: 
+        - Bytes
+        - PktDropBytes
       default: true
       width: 5
     - id: Packets
       name: Packets
       tooltip: The total aggregated number of packets.
-      field: Packets
+      fields: 
+        - Packets
+        - PktDropPackets
       filter: pkt_drop_cause
       default: true
       width: 5

diff --git a/pkg/handler/config.go b/pkg/handler/config.go
@@ -46,14 +46,15 @@ type Column struct {
 	ID   string `yaml:"id" json:"id"`
 	Name string `yaml:"name" json:"name"`
 
-	Group      string `yaml:"group,omitempty" json:"group,omitempty"`
-	Field      string `yaml:"field,omitempty" json:"field,omitempty"`
-	Calculated string `yaml:"calculated,omitempty" json:"calculated,omitempty"`
-	Tooltip    string `yaml:"tooltip,omitempty" json:"tooltip,omitempty"`
-	DocURL     string `yaml:"docURL,omitempty" json:"docURL,omitempty"`
-	Filter     string `yaml:"filter,omitempty" json:"filter,omitempty"`
-	Default    bool   `yaml:"default,omitempty" json:"default,omitempty"`
-	Width      int    `yaml:"width,omitempty" json:"width,omitempty"`
+	Group      string   `yaml:"group,omitempty" json:"group,omitempty"`
+	Field      string   `yaml:"field,omitempty" json:"field,omitempty"`
+	Fields     []string `yaml:"fields,omitempty" json:"fields,omitempty"`
+	Calculated string   `yaml:"calculated,omitempty" json:"calculated,omitempty"`
+	Tooltip    string   `yaml:"tooltip,omitempty" json:"tooltip,omitempty"`
+	DocURL     string   `yaml:"docURL,omitempty" json:"docURL,omitempty"`
+	Filter     string   `yaml:"filter,omitempty" json:"filter,omitempty"`
+	Default    bool     `yaml:"default,omitempty" json:"default,omitempty"`
+	Width      int      `yaml:"width,omitempty" json:"width,omitempty"`
 }
 
 type Filter struct {

diff --git a/web/src/api/ipfix.ts b/web/src/api/ipfix.ts
@@ -11,7 +11,7 @@ export interface Record {
   fields: Fields;
 }
 
-export const getRecordValue = (record: Record, fieldOrLabel: string, defaultValue: string | number) => {
+export const getRecordValue = (record: Record, fieldOrLabel: string, defaultValue?: string | number) => {
   // check if label exists
   if (record.labels[fieldOrLabel as keyof Labels] !== undefined) {
     return record.labels[fieldOrLabel as keyof Labels];

diff --git a/web/src/components/netflow-record/__tests__/record-field.spec.tsx b/web/src/components/netflow-record/__tests__/record-field.spec.tsx
@@ -15,6 +15,7 @@ describe('<RecordField />', () => {
     isDelete: false
   };
   const mocks = {
+    allowPktDrops: true,
     size: 'm' as Size,
     useLinks: true
   };

diff --git a/web/src/components/netflow-record/record-field.tsx b/web/src/components/netflow-record/record-field.tsx
@@ -31,14 +31,15 @@ export type RecordFieldFilter = {
 };
 
 export const RecordField: React.FC<{
+  allowPktDrops: boolean;
   flow: Record;
   column: Column;
   size?: Size;
   useLinks: boolean;
   filter?: RecordFieldFilter;
   detailed?: boolean;
   isDark?: boolean;
-}> = ({ flow, column, size, filter, useLinks, detailed, isDark }) => {
+}> = ({ allowPktDrops, flow, column, size, filter, useLinks, detailed, isDark }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
   const onMouseOver = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, className: string) => {
@@ -483,7 +484,7 @@ export const RecordField: React.FC<{
       case ColumnsId.packets:
       case ColumnsId.bytes:
         //show both sent / dropped counts
-        if (Array.isArray(value) && value.length) {
+        if (Array.isArray(value)) {
           let droppedText = t('dropped');
           let child: JSX.Element | undefined = undefined;
           if (detailed && c.id === ColumnsId.packets && flow.fields.PktDropLatestDropCause) {
@@ -494,15 +495,22 @@ export const RecordField: React.FC<{
               getDropCauseDocUrl(flow.fields.PktDropLatestDropCause as DROP_CAUSES_NAMES)
             );
           }
+
+          const sentCount = value.length >= 1 && value[0] ? String(value[0]) : String(0);
+          const droppedCount = allowPktDrops && value.length >= 2 && value[1] ? String(value[1]) : undefined;
           return doubleContainer(
             simpleTextWithTooltip(
-              detailed ? `${String(value[0])} ${c.name.toLowerCase()} ${t('sent')}` : String(value[0]),
-              isDark ? '#3E8635' : '#1E4F18'
+              detailed ? `${sentCount} ${c.name.toLowerCase()} ${t('sent')}` : sentCount,
+              allowPktDrops ? (isDark ? '#3E8635' : '#1E4F18') : undefined
             ),
-            simpleTextWithTooltip(
-              detailed ? `${String(value[1])} ${c.name.toLowerCase()} ${droppedText}` : String(value[1]),
-              isDark ? '#C9190B' : '#A30000',
-              child
+            droppedCount ? (
+              simpleTextWithTooltip(
+                detailed ? `${droppedCount} ${c.name.toLowerCase()} ${droppedText}` : droppedCount,
+                isDark ? '#C9190B' : '#A30000',
+                child
+              )
+            ) : (
+              <></>
             ),
             true,
             false

diff --git a/web/src/components/netflow-record/record-panel.tsx b/web/src/components/netflow-record/record-panel.tsx
@@ -328,6 +328,7 @@ export const RecordPanel: React.FC<RecordDrawerProps> = ({
                           </Text>
                         )}
                         <RecordField
+                          allowPktDrops={allowPktDrops}
                           flow={record}
                           column={c}
                           filter={getFilter(c)}

diff --git a/web/src/components/netflow-table/__tests__/netflow-table-row.spec.tsx b/web/src/components/netflow-table/__tests__/netflow-table-row.spec.tsx
@@ -11,6 +11,7 @@ import { Size } from '../../dropdowns/table-display-dropdown';
 describe('<NetflowTableRow />', () => {
   let flows: Record[] = [];
   const mocks = {
+    allowPktDrops: true,
     size: 'm' as Size,
     onSelect: jest.fn(),
     tableWidth: 100,

diff --git a/web/src/components/netflow-table/__tests__/netflow-table.spec.tsx b/web/src/components/netflow-table/__tests__/netflow-table.spec.tsx
@@ -19,6 +19,7 @@ const noResultsFoundQuery = `Bullseye[data-test="no-results-found"]`;
 
 describe('<NetflowTable />', () => {
   const mocks = {
+    allowPktDrops: true,
     size: 'm' as Size,
     onSelect: jest.fn(),
     filterActionLinks: <></>,

diff --git a/web/src/components/netflow-table/netflow-table-row.tsx b/web/src/components/netflow-table/netflow-table-row.tsx
@@ -8,6 +8,7 @@ import './netflow-table-row.css';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 const NetflowTableRow: React.FC<{
+  allowPktDrops: boolean;
   lastRender?: string;
   flow: Record;
   selectedRecord?: Record;
@@ -20,6 +21,7 @@ const NetflowTableRow: React.FC<{
   tableWidth: number;
   isDark?: boolean;
 }> = ({
+  allowPktDrops,
   lastRender,
   flow,
   selectedRecord,
@@ -55,7 +57,16 @@ const NetflowTableRow: React.FC<{
               key={c.id}
               style={{ height: '100%', width: `${Math.floor((100 * c.width) / tableWidth)}%` }}
             >
-              {<RecordField flow={flow} column={c} size={size} useLinks={false} isDark={isDark} />}
+              {
+                <RecordField
+                  allowPktDrops={allowPktDrops}
+                  flow={flow}
+                  column={c}
+                  size={size}
+                  useLinks={false}
+                  isDark={isDark}
+                />
+              }
             </Td>
           ))}
       </Tr>

diff --git a/web/src/components/netflow-table/netflow-table.tsx b/web/src/components/netflow-table/netflow-table.tsx
@@ -29,6 +29,7 @@ import { LokiError } from '../messages/loki-error';
 import { convertRemToPixels } from '../../utils/panel';
 
 const NetflowTable: React.FC<{
+  allowPktDrops: boolean;
   flows: Record[];
   selectedRecord?: Record;
   columns: Column[];
@@ -42,6 +43,7 @@ const NetflowTable: React.FC<{
   filterActionLinks: JSX.Element;
   isDark?: boolean;
 }> = ({
+  allowPktDrops,
   flows,
   selectedRecord,
   columns,
@@ -186,6 +188,7 @@ const NetflowTable: React.FC<{
     return getSortedFlows().map((f, i) => (
       <NetflowTableRow
         key={f.key}
+        allowPktDrops={allowPktDrops}
         flow={f}
         lastRender={lastRender}
         columns={columns}
@@ -206,6 +209,7 @@ const NetflowTable: React.FC<{
       />
     ));
   }, [
+    allowPktDrops,
     lastRender,
     activeSortDirection,
     activeSortId,

diff --git a/web/src/components/netflow-traffic.tsx b/web/src/components/netflow-traffic.tsx
@@ -1390,6 +1390,7 @@ export const NetflowTraffic: React.FC<{
           <NetflowTable
             loading={loading}
             error={error}
+            allowPktDrops={isPktDrop()}
             flows={flows}
             selectedRecord={selectedRecord}
             size={size}

diff --git a/web/src/utils/columns.ts b/web/src/utils/columns.ts
@@ -80,6 +80,7 @@ export interface ColumnConfigDef {
   group?: string;
   name: string;
   field?: string;
+  fields?: string[];
   calculated?: string;
   tooltip?: string;
   docURL?: string;
@@ -301,6 +302,12 @@ export const getDefaultColumns = (columnDefs: ColumnConfigDef[]): Column[] => {
           } else {
             return calculatedValue(r, d.calculated!);
           }
+        } else if (d.fields) {
+          const arr: (string | number | undefined)[] = [];
+          d.fields.forEach(f => {
+            arr.push(getRecordValue(r, f, undefined) as number);
+          });
+          return arr;
         } else {
           return getRecordValue(r, d.field!, '');
         }