NETOBSERV-1216 PacketDrop enhancements

pkg/loki/filter.go

@@ -160,17 +160,6 @@ func (f *lineFilter) asLabelFilters() []labelFilter {
 	return lfs
 }
 
-func numberMatchLineFilter(key string, strictKey bool, value string) lineFilter {
-	return lineFilter{
-		key:       key,
-		strictKey: strictKey,
-		values: []lineMatch{{
-			valueType: typeNumber,
-			value:     value,
-		}},
-	}
-}
-
 func regexMatchLineFilter(key string, strictKey bool, value string) lineFilter {
 	return lineFilter{
 		key:       key,

pkg/loki/flow_query.go

@@ -66,9 +66,10 @@ func NewFlowQueryBuilder(cfg *Config, start, end, limit string, reporter constan
 
 	lineFilters := []lineFilter{}
 	if packetLoss == constants.PacketLossDropped {
-		// match 0 packet sent and 1+ packets dropped
+		// match records that doesn't contains "Packets" field and 1+ packets dropped
+		// as FLP will ensure the filtering
 		lineFilters = append(lineFilters,
-			numberMatchLineFilter(fields.Packets, true, "0"),
+			notContainsKeyLineFilter(fields.Packets),
 			regexMatchLineFilter(fields.PktDropPackets, true, "[1-9][0-9]*"),
 		)
 	} else if packetLoss == constants.PacketLossHasDrop {

web/locales/en/plugin__netobserv-plugin.json

@@ -105,6 +105,7 @@
   "Equals": "Equals",
   "Not equals": "Not equals",
   "More than": "More than",
+  "Show related documentation": "Show related documentation",
   "Learn more": "Learn more",
   "Not": "Not",
   "more than": "more than",
@@ -220,12 +221,12 @@
   "Compare to total dropped": "Compare to total dropped",
   "Export panel": "Export panel",
   "n/a": "n/a",
+  "reporting": "reporting",
   "Ingress": "Ingress",
   "Egress": "Egress",
-  "sent": "sent",
-  "sent reporting {{type}} {{code}}": "sent reporting {{type}} {{code}}",
   "dropped": "dropped",
-  "dropped by {{reason}}": "dropped by {{reason}}",
+  "dropped by": "dropped by",
+  "sent": "sent",
   "Remove {{name}} filter": "Remove {{name}} filter",
   "Filter on {{name}}": "Filter on {{name}}",
   "Switch {{name}} option": "Switch {{name}} option",
@@ -425,7 +426,6 @@
   "Specify a single port following one of these rules:": "Specify a single port following one of these rules:",
   "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.",
@@ -436,13 +436,22 @@
   "Network interface": "Network interface",
   "Specify a network interface.": "Specify a network interface.",
   "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.",
+  "Specify a single TCP state name like:": "Specify a single TCP state name like:",
+  "A _LINUX_TCP_STATES_H number like 1, 2, 3": "A _LINUX_TCP_STATES_H number like 1, 2, 3",
+  "A _LINUX_TCP_STATES_H TCP name like ESTABLISHED, SYN_SENT, SYN_RECV": "A _LINUX_TCP_STATES_H TCP name like ESTABLISHED, SYN_SENT, SYN_RECV",
+  "Packet drop latest cause": "Packet drop latest cause",
+  "Specify a single packet drop cause.": "Specify a single packet drop cause.",
+  "Specify a single packet drop cause like:": "Specify a single packet drop cause like:",
+  "A _LINUX_DROPREASON_CORE_H number like 2, 3, 4": "A _LINUX_DROPREASON_CORE_H number like 2, 3, 4",
+  "A _LINUX_DROPREASON_CORE_H SKB_DROP_REASON name like NOT_SPECIFIED, NO_SOCKET, PKT_TOO_SMALL": "A _LINUX_DROPREASON_CORE_H SKB_DROP_REASON name like NOT_SPECIFIED, NO_SOCKET, PKT_TOO_SMALL",
   "Specify a single DNS Id.": "Specify a single DNS Id.",
   "Specify a DNS Latency in miliseconds.": "Specify a DNS Latency in miliseconds.",
   "Specify a single DNS RCODE name.": "Specify a single DNS RCODE name.",
   "Specify a single DNS RCODE name like:": "Specify a single DNS RCODE name like:",
   "A IANA RCODE number like 0, 3, 9": "A IANA RCODE number like 0, 3, 9",
   "A IANA RCODE name like NoError, NXDomain, NotAuth": "A IANA RCODE name like NoError, NXDomain, NotAuth",
-  "Empty double quotes \"\" for undefined response code": "Empty double quotes \"\" for undefined response code",
   "Ms": "Ms",
   "Pps": "Pps",
   "Network overview": "Network overview",

web/src/api/ipfix.ts

@@ -75,13 +75,13 @@ export interface Fields {
   /** TCP flags */
   Flags?: number;
   /** Number of packets in this flow */
-  Packets: number;
+  Packets?: number;
   /** In conversation tracking, A to B packets counter per conversation */
   Packets_AB?: number;
   /** In conversation tracking, B to A packets counter per conversation */
   Packets_BA?: number;
   /** Number of bytes in this flow */
-  Bytes: number;
+  Bytes?: number;
   /** In conversation tracking, A to B bytes counter per conversation */
   Bytes_AB?: number;
   /** In conversation tracking, B to A bytes counter per conversation */

web/src/components/filters/filter-hints.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Popover, Text, TextVariants } from '@patternfly/react-core';
 import { FilterDefinition } from '../../model/filters';
+import { Link } from 'react-router-dom';
 
 interface FilterHintsProps {
   def: FilterDefinition;
@@ -19,6 +20,18 @@ export const FilterHints: React.FC<FilterHintsProps> = ({ def }) => {
         <Popover
           aria-label="Hint popover"
           headerContent={def.name}
+          footerContent={
+            def.docUrl ? (
+              <Button
+                variant="link"
+                component={(props: React.FunctionComponent) => (
+                  <Link {...props} target="_blank" to={{ pathname: def.docUrl }} />
+                )}
+              >
+                {t('Show related documentation')}
+              </Button>
+            ) : undefined
+          }
           bodyContent={<div className="text-left-pre">{def.examples}</div>}
           hasAutoWidth={true}
           position={'bottom'}

web/src/components/filters/filters-dropdown.tsx

@@ -17,16 +17,18 @@ interface FiltersDropdownProps {
   setSelectedFilter: (f: FilterDefinition) => void;
   allowConnectionFilter?: boolean;
   allowDNSFilter?: boolean;
+  allowPktDrops?: boolean;
 }
 
 export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
   selectedFilter,
   setSelectedFilter,
   allowConnectionFilter,
-  allowDNSFilter
+  allowDNSFilter,
+  allowPktDrops
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
-  const groups = buildGroups(t, allowConnectionFilter, allowDNSFilter);
+  const groups = buildGroups(t, allowConnectionFilter, allowDNSFilter, allowPktDrops);
 
   const [isSearchFiltersOpen, setSearchFiltersOpen] = React.useState<boolean>(false);
   const [expandedGroup, setExpandedGroup] = React.useState(0);

web/src/components/filters/filters-helper.ts

@@ -9,8 +9,13 @@ export type FilterGroup = {
   filters: FilterDefinition[];
 };
 
-export const buildGroups = (t: TFunction, allowConnectionFilter?: boolean, allowDNSFilter?: boolean): FilterGroup[] => {
-  const defs = getFilterDefinitions(t, allowConnectionFilter, allowDNSFilter);
+export const buildGroups = (
+  t: TFunction,
+  allowConnectionFilter?: boolean,
+  allowDNSFilter?: boolean,
+  allowPktDrops?: boolean
+): FilterGroup[] => {
+  const defs = getFilterDefinitions(t, allowConnectionFilter, allowDNSFilter, allowPktDrops);
   return [
     {
       title: t('Source'),

web/src/components/filters/filters-toolbar.tsx

@@ -39,6 +39,7 @@ export interface FiltersToolbarProps {
   quickFilters: QuickFilter[];
   allowConnectionFilter?: boolean;
   allowDNSFilter?: boolean;
+  allowPktDrops?: boolean;
   isFullScreen: boolean;
   setFullScreen: (b: boolean) => void;
 }
@@ -54,6 +55,7 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
   quickFilters,
   allowConnectionFilter,
   allowDNSFilter,
+  allowPktDrops,
   isFullScreen,
   setFullScreen,
   ...props
@@ -174,6 +176,7 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
                       setSelectedFilter={setSelectedFilter}
                       allowConnectionFilter={allowConnectionFilter}
                       allowDNSFilter={allowDNSFilter}
+                      allowPktDrops={allowPktDrops}
                     />
                     <CompareFilter
                       value={selectedCompare}

web/src/components/netflow-overview/netflow-overview.css

@@ -19,6 +19,7 @@
 .overview-flex-item {
   margin: 0 !important;
   width: 50%;
+  align-self: flex-start;
 }
 
 .overview-flex-item.full {

web/src/components/netflow-overview/netflow-overview.tsx

@@ -188,6 +188,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
               tooltipsTruncate={false}
             />
           ),
+          kebab: <PanelKebab id={id} />,
           doubleWidth: false
         };
       case 'total_line':
@@ -206,6 +207,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
               tooltipsTruncate={false}
             />
           ),
+          kebab: <PanelKebab id={id} />,
           doubleWidth: false
         };
       case 'top_bar_total': {
@@ -326,6 +328,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
               tooltipsTruncate={false}
             />
           ),
+          kebab: <PanelKebab id={id} />,
           doubleWidth: false
         };
       case 'total_dropped_line':
@@ -346,6 +349,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
           ) : (
             emptyGraph()
           ),
+          kebab: <PanelKebab id={id} />,
           doubleWidth: false
         };
       case 'top_dropped_state_donut': {
@@ -358,7 +362,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
               id={id}
               limit={limit}
               metricType={metricType}
-              stat="avg"
+              stat="sum"
               topKMetrics={topKDroppedStateMetrics}
               totalMetric={namedTotalDroppedMetric}
               showOthers={options.showOthers!}
@@ -381,7 +385,7 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
               id={id}
               limit={limit}
               metricType={metricType}
-              stat="avg"
+              stat="sum"
               topKMetrics={topKDroppedCauseMetrics}
               totalMetric={namedTotalDroppedMetric}
               showOthers={options.showOthers!}
@@ -424,9 +428,6 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
           doubleWidth: true
         };
       case 'top_avg_dns_latency_donut': {
-        const options = kebabMap.get(id) || {
-          showOthers: true
-        };
         return {
           element: namedDnsLatencyTotalMetric ? (
             <LatencyDonut
@@ -435,16 +436,14 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
               metricType={'dnsLatencies'}
               topKMetrics={topKDnsLatencyMetrics}
               totalMetric={namedDnsLatencyTotalMetric}
-              showOthers={options.showOthers!}
+              showOthers={false}
               smallerTexts={smallerTexts}
               subTitle={t('Average latency')}
             />
           ) : (
             emptyGraph()
           ),
-          kebab: (
-            <PanelKebab id={id} options={options} setOptions={opts => setKebabOptions(id, opts)} isDark={isDark} />
-          ),
+          kebab: <PanelKebab id={id} />,
           bodyClassSmall: true
         };
       }

web/src/components/netflow-overview/panel-kebab.tsx

@@ -25,8 +25,8 @@ export type PanelKebabOptions = {
 
 export type PanelKebabProps = {
   id: OverviewPanelId;
-  options: PanelKebabOptions;
-  setOptions: (opts: PanelKebabOptions) => void;
+  options?: PanelKebabOptions;
+  setOptions?: (opts: PanelKebabOptions) => void;
   isDark?: boolean;
 };
 
@@ -36,42 +36,42 @@ export const PanelKebab: React.FC<PanelKebabProps> = ({ id, options, setOptions,
 
   const setShowTotal = React.useCallback(
     (checked: boolean) => {
-      setOptions({ ...options, showTotal: checked });
+      setOptions!({ ...options, showTotal: checked });
     },
     [setOptions, options]
   );
 
   const setShowOthers = React.useCallback(
     (checked: boolean) => {
-      setOptions({ ...options, showOthers: checked });
+      setOptions!({ ...options, showOthers: checked });
     },
     [setOptions, options]
   );
 
   const setShowNoError = React.useCallback(
     (checked: boolean) => {
-      setOptions({ ...options, showNoError: checked });
+      setOptions!({ ...options, showNoError: checked });
     },
     [setOptions, options]
   );
 
   const setShowInternal = React.useCallback(
     (checked: boolean) => {
-      setOptions({ ...options, showInternal: checked });
+      setOptions!({ ...options, showInternal: checked });
     },
     [setOptions, options]
   );
 
   const setShowOutOfScope = React.useCallback(
     (checked: boolean) => {
-      setOptions({ ...options, showOutOfScope: checked });
+      setOptions!({ ...options, showOutOfScope: checked });
     },
     [setOptions, options]
   );
 
   const setCompareToDropped = React.useCallback(
     (checked: boolean) => {
-      setOptions({ ...options, compareToDropped: checked });
+      setOptions!({ ...options, compareToDropped: checked });
     },
     [setOptions, options]
   );
@@ -84,7 +84,7 @@ export const PanelKebab: React.FC<PanelKebabProps> = ({ id, options, setOptions,
   }, [id, isDark]);
 
   const items = [];
-  if (options.showTotal !== undefined) {
+  if (options?.showTotal !== undefined) {
     items.push(
       <DropdownItem key={`${id}-show-total`}>
         <Tooltip content={<Text component={TextVariants.p}>{t('Show total traffic for the selected filters')}</Text>}>
@@ -99,7 +99,7 @@ export const PanelKebab: React.FC<PanelKebabProps> = ({ id, options, setOptions,
       </DropdownItem>
     );
   }
-  if (options.showOthers !== undefined) {
+  if (options?.showOthers !== undefined) {
     items.push(
       <DropdownItem key={`${id}-show-others`}>
         <Tooltip
@@ -116,7 +116,7 @@ export const PanelKebab: React.FC<PanelKebabProps> = ({ id, options, setOptions,
       </DropdownItem>
     );
   }
-  if (options.showNoError !== undefined) {
+  if (options?.showNoError !== undefined) {
     items.push(
       <DropdownItem key={`${id}-show-noerror`}>
         <Tooltip
@@ -133,7 +133,7 @@ export const PanelKebab: React.FC<PanelKebabProps> = ({ id, options, setOptions,
       </DropdownItem>
     );
   }
-  if (options.showInternal !== undefined) {
+  if (options?.showInternal !== undefined) {
     items.push(
       <DropdownItem key={`${id}-show-internal`}>
         <Tooltip
@@ -157,7 +157,7 @@ export const PanelKebab: React.FC<PanelKebabProps> = ({ id, options, setOptions,
       </DropdownItem>
     );
   }
-  if (options.showOutOfScope !== undefined) {
+  if (options?.showOutOfScope !== undefined) {
     items.push(
       <DropdownItem key={`${id}-show-out-of-scope`}>
         <Tooltip
@@ -178,7 +178,7 @@ export const PanelKebab: React.FC<PanelKebabProps> = ({ id, options, setOptions,
       </DropdownItem>
     );
   }
-  if (options.compareToDropped !== undefined) {
+  if (options?.compareToDropped !== undefined) {
     items.push(
       <DropdownItem key={`${id}-compare-to-dropped`}>
         <Tooltip