fix-topology displaying redundant ports (#1538)

* changed base to 6.x-stable * fixed ports for other topology layers
FRINXio · May 13, 2024 · 30b9efa · 30b9efa
1 parent c531959
commit 30b9efa
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 7 deletions.
diff --git a/packages/frinx-device-topology/src/components/node-icons/net-node-icon.tsx b/packages/frinx-device-topology/src/components/node-icons/net-node-icon.tsx
@@ -6,6 +6,9 @@ import {
   PositionsWithGroupsMap,
   width,
   height,
+  GraphNode,
+  PtpGraphNode,
+  SynceGraphNode,
 } from '../../pages/topology/graph.helpers';
 import { TopologyMode } from '../../state.actions';
 import { GraphEdge } from '../../__generated__/graphql';
@@ -28,6 +31,7 @@ type Props = {
   selectedEdge: GraphEdge | null;
   onClick: (node: GraphNetNode) => void;
   isWeightVisible: boolean;
+  selectedNode: GraphNode | GraphNetNode | PtpGraphNode | SynceGraphNode | null;
 };
 
 type NetNodeNetworks = {
@@ -64,9 +68,12 @@ const NetNodeIcon: VoidFunctionComponent<Props> = ({
   netNodes,
   onClick,
   isWeightVisible,
+  selectedNode,
 }) => {
   const { x, y } = positions.nodes[node.name];
-  const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups);
+  const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups).filter((item) =>
+    selectedNode ? item[0].includes(selectedNode.name) : true,
+  );
   const { circleDiameter, sizeTransform } = getDeviceNodeTransformProperties('MEDIUM');
 
   const allNetworks = netNodes

diff --git a/packages/frinx-device-topology/src/components/node-icons/node-icon.tsx b/packages/frinx-device-topology/src/components/node-icons/node-icon.tsx
@@ -1,7 +1,14 @@
 import { chakra } from '@chakra-ui/react';
 import React, { PointerEvent, VoidFunctionComponent } from 'react';
 import { GraphNodeWithDiff } from '../../helpers/topology-helpers';
-import { GraphNodeInterface, PositionsWithGroupsMap } from '../../pages/topology/graph.helpers';
+import {
+  GraphNetNode,
+  GraphNode,
+  GraphNodeInterface,
+  PositionsWithGroupsMap,
+  PtpGraphNode,
+  SynceGraphNode,
+} from '../../pages/topology/graph.helpers';
 import { TopologyMode } from '../../state.actions';
 import { GraphEdge } from '../../__generated__/graphql';
 import NodeIconImage from './node-icon-image';
@@ -20,6 +27,7 @@ type Props = {
   isFocused: boolean;
   isSelectedForCommonSearch: boolean;
   node: GraphNodeWithDiff;
+  selectedNode: GraphNode | GraphNetNode | PtpGraphNode | SynceGraphNode | null;
   topologyMode: TopologyMode;
   onPointerDown: (event: PointerEvent<SVGRectElement>) => void;
   onPointerMove: (event: PointerEvent<SVGRectElement>) => void;
@@ -43,10 +51,14 @@ const NodeIcon: VoidFunctionComponent<Props> = ({
   onPointerMove,
   onPointerUp,
   selectedEdge,
+  selectedNode,
 }) => {
   const { change } = node;
   const { x, y } = positions.nodes[node.name];
-  const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups);
+  const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups).filter((item) =>
+    selectedNode ? item[0].includes(selectedNode.name) : true,
+  );
+
   const { circleDiameter, sizeTransform } = getDeviceNodeTransformProperties(node.device?.deviceSize ?? 'MEDIUM');
 
   return (

diff --git a/packages/frinx-device-topology/src/components/node-icons/ptp-node-icon.tsx b/packages/frinx-device-topology/src/components/node-icons/ptp-node-icon.tsx
@@ -1,6 +1,13 @@
 import { chakra } from '@chakra-ui/react';
 import React, { PointerEvent, VoidFunctionComponent } from 'react';
-import { GraphPtpNodeInterface, PositionsWithGroupsMap } from '../../pages/topology/graph.helpers';
+import {
+  GraphNetNode,
+  GraphNode,
+  GraphPtpNodeInterface,
+  PositionsWithGroupsMap,
+  PtpGraphNode,
+  SynceGraphNode,
+} from '../../pages/topology/graph.helpers';
 import { PtpGraphNodeWithDiff } from '../../helpers/topology-helpers';
 import { TopologyMode } from '../../state.actions';
 import { GraphEdge } from '../../__generated__/graphql';
@@ -19,6 +26,7 @@ type Props = {
   node: PtpGraphNodeWithDiff;
   topologyMode: TopologyMode;
   selectedEdge: GraphEdge | null;
+  selectedNode: GraphNode | GraphNetNode | PtpGraphNode | SynceGraphNode | null;
   onPointerDown: (event: PointerEvent<SVGRectElement>) => void;
   onPointerMove: (event: PointerEvent<SVGRectElement>) => void;
   onPointerUp: (event: PointerEvent<SVGRectElement>) => void;
@@ -39,12 +47,15 @@ const PtpNodeIcon: VoidFunctionComponent<Props> = ({
   node,
   topologyMode,
   selectedEdge,
+  selectedNode,
   onPointerDown,
   onPointerMove,
   onPointerUp,
 }) => {
   const { x, y } = positions.nodes[node.name];
-  const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups);
+  const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups).filter((item) =>
+    selectedNode ? item[0].includes(selectedNode.name) : true,
+  );
   const { circleDiameter, sizeTransform } = getDeviceNodeTransformProperties('MEDIUM');
 
   const ptpNodeBackgroundColor =

diff --git a/packages/frinx-device-topology/src/components/node-icons/synce-node-icon.tsx b/packages/frinx-device-topology/src/components/node-icons/synce-node-icon.tsx
@@ -1,7 +1,14 @@
 import { chakra } from '@chakra-ui/react';
 import React, { PointerEvent, VoidFunctionComponent } from 'react';
 import { SynceGraphNodeWithDiff } from '../../helpers/topology-helpers';
-import { GraphSynceNodeInterface, PositionsWithGroupsMap } from '../../pages/topology/graph.helpers';
+import {
+  GraphNetNode,
+  GraphNode,
+  GraphSynceNodeInterface,
+  PositionsWithGroupsMap,
+  PtpGraphNode,
+  SynceGraphNode,
+} from '../../pages/topology/graph.helpers';
 import { TopologyMode } from '../../state.actions';
 import { GraphEdge } from '../../__generated__/graphql';
 import NodeIconImage from './node-icon-image';
@@ -19,6 +26,7 @@ type Props = {
   onPointerMove: (event: PointerEvent<SVGRectElement>) => void;
   onPointerUp: (event: PointerEvent<SVGRectElement>) => void;
   selectedEdge: GraphEdge | null;
+  selectedNode: GraphNode | GraphNetNode | PtpGraphNode | SynceGraphNode | null;
   isSelected: boolean;
 };
 
@@ -37,10 +45,13 @@ const SynceNodeIcon: VoidFunctionComponent<Props> = ({
   onPointerMove,
   onPointerUp,
   selectedEdge,
+  selectedNode,
   isSelected,
 }) => {
   const { x, y } = positions.nodes[node.name];
-  const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups);
+  const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups).filter((item) =>
+    selectedNode ? item[0].includes(selectedNode.name) : true,
+  );
   const { circleDiameter, sizeTransform } = getDeviceNodeTransformProperties('MEDIUM');
 
   return (

diff --git a/packages/frinx-device-topology/src/pages/topology/lldp/nodes.tsx b/packages/frinx-device-topology/src/pages/topology/lldp/nodes.tsx
@@ -115,6 +115,7 @@ const Nodes: VoidFunctionComponent<Props> = ({ nodesWithDiff, onNodePositionUpda
           topologyMode={mode}
           node={node}
           selectedEdge={selectedEdge}
+          selectedNode={selectedNode}
         />
       ))}
     </g>

diff --git a/packages/frinx-device-topology/src/pages/topology/net/net-nodes.tsx b/packages/frinx-device-topology/src/pages/topology/net/net-nodes.tsx
@@ -40,6 +40,7 @@ const NetNodes: VoidFunctionComponent<Props> = ({ nodes }) => {
     <g>
       {nodes.map((node) => (
         <NetNodeIcon
+          selectedNode={selectedNode}
           isWeightVisible={isWeightVisible}
           onClick={handleClick}
           key={node.id}

diff --git a/packages/frinx-device-topology/src/pages/topology/ptp/ptp-nodes.tsx b/packages/frinx-device-topology/src/pages/topology/ptp/ptp-nodes.tsx
@@ -110,6 +110,7 @@ const PtpNodes: VoidFunctionComponent<Props> = ({
           node={node}
           selectedEdge={selectedEdge}
           onPointerMove={handlePointerMove}
+          selectedNode={selectedNode}
           onPointerUp={() => {
             handlePointerUp(node);
           }}

diff --git a/packages/frinx-device-topology/src/pages/topology/synce/synce-nodes.tsx b/packages/frinx-device-topology/src/pages/topology/synce/synce-nodes.tsx
@@ -100,6 +100,7 @@ const SynceNodes: VoidFunctionComponent<Props> = ({ nodes, onNodePositionUpdate,
           topologyMode={mode}
           node={node}
           selectedEdge={selectedEdge}
+          selectedNode={selectedNode}
           onPointerMove={handlePointerMove}
           onPointerUp={() => {
             handlePointerUp(node);