display empty UDNs

Author: jpinsonneau

web/locales/en/plugin__netobserv-plugin.json

@@ -10,6 +10,7 @@
   "No information available for this content. Change scope to get more details.": "No information available for this content. Change scope to get more details.",
   "Cluster name": "Cluster name",
   "UDN": "UDN",
+  "Can't find metrics for this element. Check your capture filters to ensure we can monitor it. Else it probably means there is no traffic here.": "Can't find metrics for this element. Check your capture filters to ensure we can monitor it. Else it probably means there is no traffic here.",
   "Source": "Source",
   "Destination": "Destination",
   "Stats": "Stats",

web/src/components/drawer/element/element-panel-content.tsx

@@ -103,6 +103,25 @@ export const ElementPanelContent: React.FC<ElementPanelContentProps> = ({
     [filterDefinitions, filters, setFilters, t]
   );
 
+  const metricsInfo = React.useCallback(
+    (d: NodeData) => {
+      if (!d.noMetrics) {
+        return <></>;
+      }
+
+      return (
+        <TextContent id="noMetrics" className="record-field-container">
+          <Text component={TextVariants.p}>
+            {t(
+              "Can't find metrics for this element. Check your capture filters to ensure we can monitor it. Else it probably means there is no traffic here."
+            )}
+          </Text>
+        </TextContent>
+      );
+    },
+    [t]
+  );
+
   if (element instanceof BaseNode && data) {
     return (
       <>
@@ -116,6 +135,7 @@ export const ElementPanelContent: React.FC<ElementPanelContentProps> = ({
           setFilters={setFilters}
           filterDefinitions={filterDefinitions}
         />
+        {metricsInfo(data)}
       </>
     );
   } else if (element instanceof BaseEdge) {

web/src/components/drawer/element/element-panel.tsx

@@ -57,6 +57,7 @@ export const ElementPanel: React.FC<ElementPanelProps> = ({
   const [activeTab, setActiveTab] = React.useState<string>('details');
 
   const data = element.getData();
+  const noMetrics = data && data.noMetrics === true;
   let aData: NodeData;
   let bData: NodeData | undefined;
   if (element instanceof BaseEdge) {
@@ -114,7 +115,7 @@ export const ElementPanel: React.FC<ElementPanelProps> = ({
               filterDefinitions={filterDefinitions}
             />
           </Tab>
-          {!_.isEmpty(metrics) && (
+          {!noMetrics && !_.isEmpty(metrics) && (
             <Tab className="drawer-tab" eventKey={'metrics'} title={<TabTitleText>{t('Metrics')}</TabTitleText>}>
               <ElementPanelMetrics
                 aData={aData}
@@ -127,7 +128,7 @@ export const ElementPanel: React.FC<ElementPanelProps> = ({
               />
             </Tab>
           )}
-          {!_.isEmpty(droppedMetrics) && (
+          {!noMetrics && !_.isEmpty(droppedMetrics) && (
             <Tab className="drawer-tab" eventKey={'dropped'} title={<TabTitleText>{t('Drops')}</TabTitleText>}>
               <ElementPanelMetrics
                 aData={aData}

web/src/components/drawer/netflow-traffic-drawer.tsx

@@ -73,6 +73,7 @@ export interface NetflowTrafficDrawerProps {
   k8sModels: { [key: string]: K8sModel };
   topologyMetricFunction: StatFunction;
   topologyMetricType: MetricType;
+  topologyUDNIds: string[];
   metricScope: FlowScope;
   setMetricScope: (ms: FlowScope) => void;
   topologyOptions: TopologyOptions;
@@ -293,6 +294,7 @@ export const NetflowTrafficDrawer: React.FC<NetflowTrafficDrawerProps> = React.f
                 metricFunction={props.topologyMetricFunction}
                 metricType={props.topologyMetricType}
                 metricScope={props.metricScope}
+                expectedNodes={[...props.topologyUDNIds]} // concat all expected nodes here
                 setMetricScope={props.setMetricScope}
                 metrics={getTopologyMetrics() || []}
                 droppedMetrics={getTopologyDroppedMetrics() || []}

web/src/components/netflow-traffic.tsx

@@ -438,8 +438,20 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({
             clearFlows
           );
 
-        // TODO: do something with UDN Ids to highlight empty / unused
-        drawerRef.current?.getTopologyHandle()?.fetchUDNs();
+        if (model.metricScope === 'udn') {
+          drawerRef.current
+            ?.getTopologyHandle()
+            ?.fetchUDNs()
+            .then(ids => {
+              model.setTopologyUDNIds(ids);
+            })
+            .catch(err => {
+              console.error('fetchUDNs error', err);
+              model.setTopologyUDNIds([]);
+            });
+        } else {
+          model.setTopologyUDNIds([]);
+        }
         break;
       default:
         console.error('tick called on not implemented view Id', model.selectedViewId);

web/src/components/tabs/netflow-topology/2d/styles/styleNode.tsx

@@ -2,6 +2,7 @@ import {
   ClusterIcon,
   CubeIcon,
   CubesIcon,
+  NetworkIcon,
   OutlinedHddIcon,
   QuestionCircleIcon,
   ServiceIcon,
@@ -63,6 +64,8 @@ const getTypeIcon = (resourceKind?: string): React.ComponentClass<any, any> => {
       return ClusterIcon;
     case 'Zone':
       return ZoneIcon;
+    case 'UDN':
+      return NetworkIcon;
     case 'CatalogSource':
     case 'DaemonSet':
     case 'Deployment':

web/src/components/tabs/netflow-topology/2d/topology-content.tsx

@@ -55,6 +55,7 @@ const fitPadding = 80;
 
 export interface TopologyContentProps {
   k8sModels: { [key: string]: K8sModel };
+  expectedNodes: string[];
   metricFunction: StatFunction;
   metricType: MetricType;
   metricScope: FlowScope;
@@ -78,6 +79,7 @@ export interface TopologyContentProps {
 
 export const TopologyContent: React.FC<TopologyContentProps> = ({
   k8sModels,
+  expectedNodes,
   metricFunction,
   metricType,
   metricScope,
@@ -345,6 +347,7 @@ export const TopologyContent: React.FC<TopologyContentProps> = ({
       t,
       filterDefinitions,
       k8sModels,
+      expectedNodes,
       isDark
     );
     const allIds = [...(updatedModel.nodes || []), ...(updatedModel.edges || [])].map(item => item.id);
@@ -387,6 +390,7 @@ export const TopologyContent: React.FC<TopologyContentProps> = ({
     t,
     filterDefinitions,
     k8sModels,
+    expectedNodes,
     isDark
   ]);
 

web/src/components/tabs/netflow-topology/__tests__/netflow-topology.spec.tsx

@@ -37,7 +37,8 @@ describe('<NetflowTopology />', () => {
     onSelect: jest.fn(),
     searchHandle: null,
     searchEvent: undefined,
-    scopes: ScopeDefSample
+    scopes: ScopeDefSample,
+    expectedNodes: []
   };
 
   it('should render component', async () => {

web/src/components/tabs/netflow-topology/netflow-topology.tsx

@@ -53,7 +53,7 @@ export type NetflowTopologyHandle = {
     setWarning: (v?: Warning) => void,
     initFunction: () => void
   ) => Promise<Stats[]> | undefined;
-  fetchUDNs: () => void;
+  fetchUDNs: () => Promise<string[]>;
 };
 
 export interface NetflowTopologyProps {
@@ -63,6 +63,7 @@ export interface NetflowTopologyProps {
   metricFunction: StatFunction;
   metricType: MetricType;
   metricScope: FlowScope;
+  expectedNodes: string[];
   setMetricScope: (ms: FlowScope) => void;
   metrics: TopologyMetrics[];
   droppedMetrics: TopologyMetrics[];
@@ -185,13 +186,7 @@ export const NetflowTopology: React.FC<NetflowTopologyProps> = React.forwardRef(
     );
 
     const fetchUDNs = React.useCallback(() => {
-      getK8SUDNIds()
-        .then(ids => {
-          console.log('fetchUDNs', ids);
-        })
-        .catch(err => {
-          console.error('fetchUDNs', err);
-        });
+      return getK8SUDNIds();
     }, []);
 
     React.useImperativeHandle(ref, () => ({
@@ -237,6 +232,7 @@ export const NetflowTopology: React.FC<NetflowTopologyProps> = React.forwardRef(
             />
             <TopologyContent
               k8sModels={props.k8sModels}
+              expectedNodes={props.expectedNodes}
               metricFunction={props.metricFunction}
               metricType={props.metricType}
               metricScope={props.metricScope}

web/src/model/netflow-traffic.ts

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React from 'react';
+import React, { useState } from 'react';
 import { Record } from '../api/ipfix';
 import { defaultNetflowMetrics, NetflowMetrics, Stats } from '../api/loki';
 import { rateMetricFunctions, timeMetricFunctions } from '../components/dropdowns/metric-function-dropdown';
@@ -91,6 +91,7 @@ export function netflowTrafficModel() {
     localStorageMetricTypeKey,
     defaultMetricType
   );
+  const [topologyUDNIds, setTopologyUDNIds] = useState<string[]>([]);
   const [interval, setInterval] = useLocalStorage<number | undefined>(localStorageRefreshKey);
   const [showViewOptions, setShowViewOptions] = useLocalStorage<boolean>(localStorageShowOptionsKey, false);
   const [showHistogram, setShowHistogram] = useLocalStorage<boolean>(localStorageShowHistogramKey, false);
@@ -203,6 +204,8 @@ export function netflowTrafficModel() {
     setTopologyMetricFunction,
     topologyMetricType,
     setTopologyMetricType: updateTopologyMetricType,
+    topologyUDNIds,
+    setTopologyUDNIds,
     interval,
     setInterval,
     showViewOptions,