OCPBUGS-42859: Interface with same name causes unexpected behavior in…

… NNS topology Signed-off-by: Aviv Turgeman <[email protected]>
nmstate · Oct 8, 2024 · 10bc2f8 · 10bc2f8
1 parent 237a2a9
commit 10bc2f8
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 160 deletions.
diff --git a/src/views/states/topology/Topology.tsx b/src/views/states/topology/Topology.tsx
@@ -14,6 +14,7 @@ import {
   VisualizationSurface,
 } from '@patternfly/react-topology';
 import { V1beta1NodeNetworkState } from '@types';
+import { isEmpty } from '@utils/helpers';
 
 import TopologySidebar from './components/TopologySidebar/TopologySidebar';
 import TopologyToolbar from './components/TopologyToolbar/TopologyToolbar';
@@ -39,84 +40,78 @@ const Topology: FC = () => {
   );
 
   useEffect(() => {
-    if (loaded && !error) {
-      const filteredStates =
-        selectedNodeFilters.length > 0
-          ? states.filter((state) => selectedNodeFilters.includes(state.metadata.name))
-          : undefined;
+    if (!loaded || error || isEmpty(states)) return;
 
-      const topologyModel = transformDataToTopologyModel(states, filteredStates);
+    const filteredStates =
+      selectedNodeFilters.length > 0
+        ? states.filter((state) => selectedNodeFilters.includes(state.metadata.name))
+        : undefined;
 
-      if (!visualization) {
-        const newVisualization = new Visualization();
-        newVisualization.registerLayoutFactory(layoutFactory);
-        newVisualization.registerComponentFactory(componentFactory);
-        newVisualization.addEventListener(SELECTION_EVENT, setSelectedIds);
-        newVisualization.setFitToScreenOnLayout(true);
-        newVisualization.fromModel(topologyModel);
-        restoreNodePositions(newVisualization);
+    const topologyModel = transformDataToTopologyModel(states, filteredStates);
 
-        setVisualization(newVisualization);
-      } else {
-        visualization.fromModel(topologyModel);
-        restoreNodePositions(visualization);
-      }
-    }
-  }, [states, loaded, error, selectedNodeFilters]);
-
-  useEffect(() => {
-    if (visualization) {
-      visualization.addEventListener(NODE_POSITIONING_EVENT, () =>
-        saveNodePositions(visualization),
+    if (!visualization) {
+      const newVisualization = new Visualization();
+      newVisualization.registerLayoutFactory(layoutFactory);
+      newVisualization.registerComponentFactory(componentFactory);
+      newVisualization.addEventListener(SELECTION_EVENT, setSelectedIds);
+      newVisualization.addEventListener(NODE_POSITIONING_EVENT, () =>
+        saveNodePositions(newVisualization),
       );
-      visualization.addEventListener(GRAPH_POSITIONING_EVENT, () =>
-        saveNodePositions(visualization),
+      newVisualization.addEventListener(GRAPH_POSITIONING_EVENT, () =>
+        saveNodePositions(newVisualization),
       );
+      newVisualization.setFitToScreenOnLayout(true);
+      newVisualization.fromModel(topologyModel, false);
+      restoreNodePositions(newVisualization);
+      setVisualization(newVisualization);
+    } else {
+      visualization.fromModel(topologyModel);
+      restoreNodePositions(visualization);
     }
-  }, [visualization]);
+  }, [states, loaded, error, selectedNodeFilters]);
 
   return (
-    <TopologyView
-      sideBar={
-        <TopologySidebar
-          states={states}
-          selectedIds={selectedIds}
-          setSelectedIds={setSelectedIds}
-        />
-      }
-      viewToolbar={
-        <TopologyToolbar
-          nodeNames={nodeNames}
-          selectedNodeFilters={selectedNodeFilters}
-          setSelectedNodeFilters={setSelectedNodeFilters}
-        />
-      }
-      controlBar={
-        <TopologyControlBar
-          controlButtons={createTopologyControlButtons({
-            ...defaultControlButtonsOptions,
-            zoomInCallback: action(() => {
-              visualization.getGraph().scaleBy(4 / 3);
-            }),
-            zoomOutCallback: action(() => {
-              visualization.getGraph().scaleBy(0.75);
-            }),
-            fitToScreenCallback: action(() => {
-              visualization.getGraph().fit(40);
-            }),
-            resetViewCallback: action(() => {
-              visualization.getGraph().reset();
-              visualization.getGraph().layout();
-            }),
-            legend: false,
-          })}
-        />
-      }
-    >
-      <VisualizationProvider controller={visualization}>
+    <VisualizationProvider controller={visualization}>
+      <TopologyView
+        sideBar={
+          <TopologySidebar
+            states={states}
+            selectedIds={selectedIds}
+            setSelectedIds={setSelectedIds}
+          />
+        }
+        viewToolbar={
+          <TopologyToolbar
+            nodeNames={nodeNames}
+            selectedNodeFilters={selectedNodeFilters}
+            setSelectedNodeFilters={setSelectedNodeFilters}
+          />
+        }
+        controlBar={
+          <TopologyControlBar
+            controlButtons={createTopologyControlButtons({
+              ...defaultControlButtonsOptions,
+              zoomInCallback: action(() => {
+                visualization.getGraph().scaleBy(4 / 3);
+              }),
+              zoomOutCallback: action(() => {
+                visualization.getGraph().scaleBy(0.75);
+              }),
+              fitToScreenCallback: action(() => {
+                visualization.getGraph().fit(40);
+              }),
+              resetViewCallback: action(() => {
+                visualization.getGraph().reset();
+                visualization.getGraph().layout();
+              }),
+              legend: false,
+            })}
+          />
+        }
+      >
         <VisualizationSurface state={{ selectedIds }} />
-      </VisualizationProvider>
-    </TopologyView>
+      </TopologyView>
+    </VisualizationProvider>
   );
 };
 

diff --git a/src/views/states/topology/components/CustomNode/CustomNode.tsx b/src/views/states/topology/components/CustomNode/CustomNode.tsx
@@ -18,24 +18,15 @@ type CustomNodeProps = {
   WithDragNodeProps &
   WithDndDropProps;
 
-const CustomNode: FC<CustomNodeProps> = ({ element, onSelect, selected, ...rest }) => {
+const CustomNode: FC<CustomNodeProps> = ({ element, ...rest }) => {
   const data = element.getData();
   const Icon = data.icon;
   const { width, height } = element.getBounds();
 
   const xCenter = (width - ICON_SIZE) / 2;
   const yCenter = (height - ICON_SIZE) / 2;
-
   return (
-    <DefaultNode
-      className="custom-node"
-      badge={data.badge}
-      element={element}
-      onSelect={onSelect}
-      selected={selected}
-      truncateLength={8}
-      {...rest}
-    >
+    <DefaultNode className="custom-node" element={element} truncateLength={8} {...rest}>
       <g transform={`translate(${xCenter}, ${yCenter})`}>
         <Icon width={ICON_SIZE} height={ICON_SIZE} />
       </g>

diff --git a/src/views/states/topology/utils/position.ts b/src/views/states/topology/utils/position.ts
@@ -8,16 +8,11 @@ export const saveNodePositions = (visualization: Visualization) => {
 
   // Traverse all nodes and their children
   graph.getNodes().forEach((node) => {
+    nodePositions[node.getId()] = node.getPosition();
     if (node.isGroup()) {
-      // Save the group node position
-      nodePositions[node.getId()] = node.getPosition();
-
-      // Save all child node positions
       node.getAllNodeChildren().forEach((childNode) => {
         nodePositions[childNode.getId()] = childNode.getPosition();
       });
-    } else {
-      nodePositions[node.getId()] = node.getPosition();
     }
   });