NETOBSERV-631: show subnet labels in topology

Author: jotak

web/src/api/ipfix.ts

@@ -53,6 +53,8 @@ export interface Flow {
   DstK8S_Zone?: string;
   SrcK8S_NetworkName?: string;
   DstK8S_NetworkName?: string;
+  SrcSubnetLabel?: string;
+  DstSubnetLabel?: string;
   K8S_ClusterName?: string;
   Proto?: number;
   Interfaces?: string[];

web/src/api/loki.ts

@@ -68,12 +68,13 @@ export interface TopologyMetricPeer {
   resourceKind?: string;
   isAmbiguous: boolean;
   getDisplayName: (inclNamespace: boolean, disambiguate: boolean) => string | undefined;
-  // any FlowScope can appear here as optionnal field
+  // any FlowScope can appear here as optional field
   [name: string]: unknown;
   namespace?: string;
   host?: string;
   cluster?: string;
   udn?: string;
+  subnetLabel?: string;
 }
 
 export type GenericMetric = {

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

@@ -81,6 +81,20 @@ export const ElementFields: React.FC<ElementFieldsProps> = ({
       forceLabel = forceAsText = undefined;
     }
   });
+  if (data.peer.subnetLabel) {
+    fragments.push(
+      <ElementField
+        id={id + '-subnet-label'}
+        key={id + '-subnet-label'}
+        label={t('Subnet label')}
+        activeFilters={activeFilters}
+        filterType={'resource'}
+        peer={createPeer({ subnetLabel: data.peer.subnetLabel })}
+        setFilters={setFilters}
+        filterDefinitions={filterDefinitions}
+      />
+    );
+  }
   if (data.peer.addr) {
     fragments.push(
       <ElementField

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

@@ -72,10 +72,11 @@ export const ElementPanel: React.FC<ElementPanelProps> = ({
       return <Text component={TextVariants.h2}>{t('Edge')}</Text>;
     } else {
       const data = element.getData();
-      if (data?.nodeType === 'unknown') {
-        return <Text component={TextVariants.h2}>{t('Unknown')}</Text>;
+      const name = data?.peer.getDisplayName(false, false);
+      if (data && name) {
+        return <PeerResourceLink peer={data.peer} />
       }
-      return <>{data && <PeerResourceLink peer={data.peer} />}</>;
+      return <Text component={TextVariants.h2}>{t('Unknown')}</Text>;
     }
   }, [element, t]);
 

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

@@ -2,6 +2,7 @@ import {
   ClusterIcon,
   CubeIcon,
   CubesIcon,
+  ExternalLinkAltIcon,
   NetworkIcon,
   OutlinedHddIcon,
   QuestionCircleIcon,
@@ -30,6 +31,7 @@ import * as React from 'react';
 import { Decorated, NodeData } from '../../../../../model/topology';
 import DefaultNode from '../components/node';
 import { NodeDecorators } from './styleDecorators';
+import { TopologyMetricPeer } from '../../../../../api/loki';
 
 export enum DataTypes {
   Default
@@ -50,8 +52,8 @@ type StyleNodeProps = {
   WithSelectionProps;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getTypeIcon = (resourceKind?: string): React.ComponentClass<any, any> => {
-  switch (resourceKind) {
+const getTypeIcon = (peer: TopologyMetricPeer): React.ComponentClass<any, any> => {
+  switch (peer.resourceKind) {
     case 'Service':
       return ServiceIcon;
     case 'Pod':
@@ -72,9 +74,11 @@ const getTypeIcon = (resourceKind?: string): React.ComponentClass<any, any> => {
     case 'StatefulSet':
     case 'Job':
       return CubesIcon;
-    default:
-      return QuestionCircleIcon;
+    }
+  if (peer.addr || peer.subnetLabel) {
+    return ExternalLinkAltIcon;
   }
+  return QuestionCircleIcon;
 };
 
 const renderIcon = (data: Decorated<NodeData>, element: NodePeer): React.ReactNode => {
@@ -83,7 +87,7 @@ const renderIcon = (data: Decorated<NodeData>, element: NodePeer): React.ReactNo
   const iconSize =
     (shape === NodeShape.trapezoid ? width : Math.min(width, height)) -
     (shape === NodeShape.stadium ? 5 : iconPadding) * 2;
-  const Component = getTypeIcon(data.peer.resourceKind);
+  const Component = getTypeIcon(data.peer);
 
   return (
     <g transform={`translate(${(width - iconSize) / 2}, ${(height - iconSize) / 2})`}>

web/src/utils/ids.ts

@@ -41,6 +41,8 @@ export const getPeerId = (fields: Partial<TopologyMetricPeer>): string => {
     parts.push('r=' + fields.resource.type + '.' + fields.resource.name);
   } else if (fields.addr) {
     parts.push('a=' + fields.addr);
+  } else if (fields.subnetLabel) {
+    parts.push('sl=' + fields.subnetLabel);
   }
   return parts.length > 0 ? parts.join(',') : idUnknown;
 };

web/src/utils/metrics.ts

@@ -114,6 +114,7 @@ export const createPeer = (fields: Partial<TopologyMetricPeer>): TopologyMetricP
     addr: fields.addr,
     resource: fields.resource,
     owner: fields.owner,
+    subnetLabel: fields.subnetLabel,
     isAmbiguous: false,
     getDisplayName: () => undefined
   };
@@ -146,9 +147,15 @@ export const createPeer = (fields: Partial<TopologyMetricPeer>): TopologyMetricP
       }
     });
 
-  // fallback on address if nothing else available
-  if (!newPeer.resourceKind && fields.addr) {
-    newPeer.getDisplayName = () => fields.addr;
+  // fallback on address and/or subnet label if nothing else available
+  if (!newPeer.resourceKind) {
+    if (fields.subnetLabel && fields.addr) {
+      newPeer.getDisplayName = () => `${fields.subnetLabel} (${fields.addr})`;
+    } else if (fields.subnetLabel) {
+      newPeer.getDisplayName = () => fields.subnetLabel;
+    } else if (fields.addr) {
+      newPeer.getDisplayName = () => fields.addr;
+    }
   }
   return newPeer;
 };
@@ -173,15 +180,17 @@ const parseTopologyMetric = (
     owner:
       raw.metric.SrcK8S_Type !== raw.metric.SrcK8S_OwnerType
         ? nameAndType(raw.metric.SrcK8S_OwnerName, raw.metric.SrcK8S_OwnerType)
-        : undefined
+        : undefined,
+    subnetLabel: raw.metric.SrcSubnetLabel
   };
   const destFields: Partial<TopologyMetricPeer> = {
     addr: raw.metric.DstAddr,
     resource: nameAndType(raw.metric.DstK8S_Name, raw.metric.DstK8S_Type),
     owner:
       raw.metric.DstK8S_Type !== raw.metric.DstK8S_OwnerType
         ? nameAndType(raw.metric.DstK8S_OwnerName, raw.metric.DstK8S_OwnerType)
-        : undefined
+        : undefined,
+    subnetLabel: raw.metric.DstSubnetLabel
   };
   getCustomScopes().forEach(sc => {
     if (!sc.labels.length) {