Fix topology issues

Signed-off-by: Aviv Turgeman <[email protected]>

src/views/states/topology/components/CustomGroup/CustomGroup.scss

@@ -0,0 +1,10 @@
+.custom-group {
+  .pf-topology__group__label > text {
+    fill: var(--pf-topology__node__label__text--Fill);
+  }
+
+  .pf-topology__node__label__background {
+    fill: var(--pf-topology__node__label__background--Fill);
+    stroke: var(--pf-topology__node__background--Stroke);
+  }
+}

src/views/states/topology/components/CustomGroup.tsx → src/views/states/topology/components/CustomGroup/CustomGroup.tsx

@@ -8,6 +8,8 @@ import {
   WithSelectionProps,
 } from '@patternfly/react-topology';
 
+import './CustomGroup.scss';
+
 type CustomGroupProps = {
   element: Node;
 } & WithSelectionProps &
@@ -17,7 +19,7 @@ type CustomGroupProps = {
 const CustomGroup: FC<CustomGroupProps> = ({ element, ...rest }) => {
   const data = element.getData();
 
-  return <DefaultGroup badge={data?.badge} element={element} {...rest} />;
+  return <DefaultGroup className="custom-group" badge={data?.badge} element={element} {...rest} />;
 };
 
 export default CustomGroup;

src/views/states/topology/components/CustomNode/CustomNode.scss

@@ -0,0 +1,13 @@
+.custom-node {
+  .pf-topology__node__background {
+    stroke-width: 4px;
+  }
+
+  .pf-topology__node__label__background {
+    stroke-width: 2px;
+  }
+}
+
+.custom-node.pf-topology__node.pf-m-selected .pf-topology__node__background {
+  stroke-width: 4px;
+}

src/views/states/topology/components/CustomNode.tsx → src/views/states/topology/components/CustomNode/CustomNode.tsx

@@ -8,15 +8,16 @@ import {
   WithSelectionProps,
 } from '@patternfly/react-topology';
 
-import { ICON_SIZE } from '../utils/constants';
+import { ICON_SIZE } from '../../utils/constants';
+import './CustomNode.scss';
 
 type CustomNodeProps = {
   element: Node;
 } & WithSelectionProps &
   WithDragNodeProps &
   WithDndDropProps;
 
-const CustomNode: FC<CustomNodeProps> = ({ element, onSelect, selected }) => {
+const CustomNode: FC<CustomNodeProps> = ({ element, onSelect, selected, ...rest }) => {
   const data = element.getData();
   const Icon = data.icon;
   const { width, height } = element.getBounds();
@@ -26,11 +27,13 @@ const CustomNode: FC<CustomNodeProps> = ({ element, onSelect, selected }) => {
 
   return (
     <DefaultNode
+      className="custom-node"
       badge={data.badge}
       element={element}
       onSelect={onSelect}
       selected={selected}
       truncateLength={8}
+      {...rest}
     >
       <g transform={`translate(${xCenter}, ${yCenter})`}>
         <Icon width={ICON_SIZE} height={ICON_SIZE} />

src/views/states/topology/utils/constants.ts

@@ -1,4 +1,5 @@
-export const NODE_DIAMETER = 35;
+export const NODE_DIAMETER = 70;
+export const ICON_SIZE = 30;
+
 export const CONNECTOR_TARGET_DROP = 'connector-target-drop';
 export const GROUP = 'group';
-export const ICON_SIZE = 15;

src/views/states/topology/utils/factory.ts

@@ -1,77 +1,40 @@
 import {
-  ColaLayout,
+  ColaGroupsLayout,
   ComponentFactory,
   DefaultEdge,
-  DragObjectWithType,
-  Edge,
   Graph,
   GraphComponent,
-  GraphElement,
-  groupDropTargetSpec,
   Layout,
   LayoutFactory,
   ModelKind,
-  Node,
   nodeDragSourceSpec,
-  nodeDropTargetSpec,
-  withDndDrop,
   withDragNode,
   withPanZoom,
   withSelection,
-  withTargetDrag,
 } from '@patternfly/react-topology';
 
-import CustomGroup from '../components/CustomGroup';
-import CustomNode from '../components/CustomNode';
+import CustomGroup from '../components/CustomGroup/CustomGroup';
+import CustomNode from '../components/CustomNode/CustomNode';
 
-import { CONNECTOR_TARGET_DROP, GROUP } from './constants';
+import { GROUP } from './constants';
 
 export const layoutFactory: LayoutFactory = (type: string, graph: Graph): Layout | undefined =>
-  new ColaLayout(graph, { layoutOnDrag: false });
+  new ColaGroupsLayout(graph, { layoutOnDrag: false });
 
 export const componentFactory: ComponentFactory = (kind: ModelKind, type: string) => {
   switch (type) {
     case GROUP:
-      return withDndDrop(groupDropTargetSpec)(
-        withDragNode(nodeDragSourceSpec(GROUP))(withSelection()(CustomGroup)),
-      );
+      return withDragNode(nodeDragSourceSpec(GROUP))(withSelection()(CustomGroup));
     default:
       switch (kind) {
         case ModelKind.graph:
           return withPanZoom()(GraphComponent);
         case ModelKind.node:
-          return withDndDrop(nodeDropTargetSpec([CONNECTOR_TARGET_DROP]))(
-            withDragNode(nodeDragSourceSpec(ModelKind.node, true, true))(
-              withSelection()(CustomNode),
-            ),
+          return withDragNode(nodeDragSourceSpec(ModelKind.node, true, true))(
+            withSelection()(CustomNode),
           );
         case ModelKind.edge:
-          return withTargetDrag<
-            DragObjectWithType,
-            Node,
-            { dragging?: boolean },
-            {
-              element: GraphElement;
-            }
-          >({
-            item: { type: CONNECTOR_TARGET_DROP },
-            begin: (monitor, props) => {
-              props.element.raise();
-              return props.element;
-            },
-            drag: (event, monitor, props) => {
-              (props.element as Edge).setEndPoint(event.x, event.y);
-            },
-            end: (dropResult, monitor, props) => {
-              if (monitor.didDrop() && dropResult && props) {
-                (props.element as Edge).setTarget(dropResult);
-              }
-              (props.element as Edge).setEndPoint();
-            },
-            collect: (monitor) => ({
-              dragging: monitor.isDragging(),
-            }),
-          })(DefaultEdge);
+          return DefaultEdge;
         default:
           return undefined;
       }

src/views/states/topology/utils/utils.ts

@@ -1,4 +1,4 @@
-import { NetworkIcon } from '@patternfly/react-icons';
+import { NetworkIcon, EthernetIcon, LinkIcon } from '@patternfly/react-icons';
 import {
   EdgeModel,
   Model,
@@ -7,7 +7,7 @@ import {
   NodeShape,
   NodeStatus,
 } from '@patternfly/react-topology';
-import { NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
+import { InterfaceType, NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
 
 import { GROUP, NODE_DIAMETER } from './constants';
 
@@ -17,37 +17,46 @@ const statusMap: { [key: string]: NodeStatus } = {
   absent: NodeStatus.warning,
 };
 
-export const getStatus = (iface: NodeNetworkConfigurationInterface): NodeStatus => {
+const getStatus = (iface: NodeNetworkConfigurationInterface): NodeStatus => {
   return statusMap[iface.state.toLowerCase()] || NodeStatus.default;
 };
 
+const getIcon = (iface: NodeNetworkConfigurationInterface) => {
+  if (iface.ethernet || iface.type === InterfaceType.ETHERNET) return EthernetIcon;
+  if (iface.type === InterfaceType.BOND) return LinkIcon;
+  return NetworkIcon;
+};
+
 const createNodes = (
   nnsName: string,
   interfaces: NodeNetworkConfigurationInterface[],
 ): NodeModel[] => {
-  return interfaces.map((iface) => ({
-    id: `${nnsName}~${iface.name}`,
-    type: ModelKind.node,
-    label: iface.name,
-    width: NODE_DIAMETER,
-    height: NODE_DIAMETER,
-    visible: !iface.patch,
-    shape: NodeShape.ellipse,
-    status: getStatus(iface),
-    data: {
-      badge: 'I',
-      icon: NetworkIcon,
-    },
-    parent: nnsName,
-  }));
+  return interfaces.map((iface, index) => {
+    const icon = getIcon(iface);
+    return {
+      id: `${nnsName}~${iface.name}`,
+      type: ModelKind.node,
+      label: iface.name,
+      width: NODE_DIAMETER,
+      height: NODE_DIAMETER,
+      visible: !iface.patch && iface.type !== InterfaceType.LOOPBACK,
+      shape: NodeShape.circle,
+      status: getStatus(iface),
+      data: {
+        badge: 'I',
+        icon,
+      },
+      parent: nnsName,
+    };
+  });
 };
 
 const createEdges = (
   nnsName: string,
   interfaces: NodeNetworkConfigurationInterface[],
 ): EdgeModel[] => {
   const edges: EdgeModel[] = [];
-  const patchConnections: { [key: string]: string } = {}; // Track patch connections
+  const patchConnections: { [key: string]: string } = {};
 
   interfaces.forEach((iface: NodeNetworkConfigurationInterface) => {
     if (iface.patch?.peer) {
@@ -152,7 +161,7 @@ export const transformDataToTopologyModel = (data: V1beta1NodeNetworkState[]): M
     graph: {
       id: 'nns-topology',
       type: ModelKind.graph,
-      layout: 'Cola',
+      layout: 'ColaGroups',
     },
   };
 };