Fix for aggregate edge selection

openshift · Jan 29, 2020 · d9abc4d · d9abc4d
1 parent 919f2db
commit d9abc4d
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 30 deletions.
diff --git a/frontend/packages/dev-console/src/components/topology/TopologyEdgePanel.tsx b/frontend/packages/dev-console/src/components/topology/TopologyEdgePanel.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import * as classNames from 'classnames';
 import * as _ from 'lodash';
-import { BaseEdge } from '@console/topology';
+import { Edge } from '@console/topology';
 import { RootState } from '@console/internal/redux';
 import { referenceFor, K8sResourceKind } from '@console/internal/module/k8s';
 import {
@@ -27,7 +27,7 @@ type StateProps = {
 };
 
 export type TopologyEdgePanelProps = {
-  edge: BaseEdge;
+  edge: Edge;
   data: TopologyDataModel;
 } & StateProps;
 
@@ -49,10 +49,11 @@ const connectorTypeToTitle = (type: string): string => {
 };
 
 const TopologyEdgePanel: React.FC<TopologyEdgePanelProps> = ({ edge, data, consoleLinks }) => {
-  const source: TopologyDataObject = edge.getSource().getData();
-  const target: TopologyDataObject = edge.getTarget().getData();
+  const panelEdge = edge.getChildren()?.length === 1 ? (edge.getChildren()[0] as Edge) : edge;
+  const source: TopologyDataObject = panelEdge.getSource().getData();
+  const target: TopologyDataObject = panelEdge.getTarget().getData();
   const resources = [source?.resources?.obj, target?.resources?.obj];
-  const nodes = data.graph.nodes.map((n) => edge.getController().getNodeById(n.id));
+  const nodes = data.graph.nodes.map((n) => panelEdge.getController().getNodeById(n.id));
   const {
     metadata: { namespace },
   } = resources[1];
@@ -62,10 +63,10 @@ const TopologyEdgePanel: React.FC<TopologyEdgePanelProps> = ({ edge, data, conso
       <div className="overview__sidebar-pane-head resource-overview__heading">
         <h1 className="co-m-pane__heading">
           <div className="co-m-pane__name co-resource-item">
-            {connectorTypeToTitle(edge.getType())}
+            {connectorTypeToTitle(panelEdge.getType())}
           </div>
           <div className="co-actions">
-            <ActionsMenu actions={edgeActions(edge, nodes)} />
+            <ActionsMenu actions={edgeActions(panelEdge, nodes)} />
           </div>
         </h1>
       </div>
@@ -99,7 +100,7 @@ const TopologyEdgePanel: React.FC<TopologyEdgePanelProps> = ({ edge, data, conso
           })}
         </ul>
 
-        {edge.getType() === TYPE_TRAFFIC_CONNECTOR && (
+        {panelEdge.getType() === TYPE_TRAFFIC_CONNECTOR && (
           <>
             <SidebarSectionHeading text="Kiali Link" />
             <ExternalLink href={getKialiLink(consoleLinks, namespace)} text="Kiali Graph View" />

diff --git a/frontend/packages/dev-console/src/components/topology/actions/edgeActions.ts b/frontend/packages/dev-console/src/components/topology/actions/edgeActions.ts
@@ -1,7 +1,7 @@
 import { KebabOption } from '@console/internal/components/utils/kebab';
 import { modelFor, referenceFor } from '@console/internal/module/k8s';
 import { asAccessReview } from '@console/internal/components/utils';
-import { BaseEdge, Node } from '@console/topology';
+import { Edge, Node } from '@console/topology';
 import { getTopologyResourceObject } from '../topology-utils';
 import { removeConnection } from '../components/removeConnection';
 import {
@@ -16,7 +16,7 @@ import {
 } from '../const';
 import { moveConnectionModal } from '../components/MoveConnectionModal';
 
-const moveConnection = (edge: BaseEdge, availableTargets: Node[]) => {
+const moveConnection = (edge: Edge, availableTargets: Node[]) => {
   const resourceObj = getTopologyResourceObject(edge.getSource().getData());
   const resourceModel = modelFor(referenceFor(resourceObj));
 
@@ -29,7 +29,7 @@ const moveConnection = (edge: BaseEdge, availableTargets: Node[]) => {
   };
 };
 
-const deleteConnection = (edge: BaseEdge) => {
+const deleteConnection = (edge: Edge) => {
   const resourceObj = getTopologyResourceObject(edge.getSource().getData());
   const resourceModel = modelFor(referenceFor(resourceObj));
   return {
@@ -41,7 +41,7 @@ const deleteConnection = (edge: BaseEdge) => {
   };
 };
 
-export const edgeActions = (edge: BaseEdge, nodes: Node[]): KebabOption[] => {
+export const edgeActions = (edge: Edge, nodes: Node[]): KebabOption[] => {
   const actions: KebabOption[] = [];
 
   const availableTargets = nodes

diff --git a/frontend/packages/dev-console/src/components/topology/components/MoveConnectionModal.tsx b/frontend/packages/dev-console/src/components/topology/components/MoveConnectionModal.tsx
@@ -11,7 +11,7 @@ import {
   ModalBody,
   ModalSubmitFooter,
 } from '@console/internal/components/factory/modal';
-import { BaseEdge, Node } from '@console/topology';
+import { Edge, Node } from '@console/topology';
 import FormSection from '../../import/section/FormSection';
 import { RootState } from '@console/internal/redux';
 import { ALLOW_SERVICE_BINDING } from '../../../const';
@@ -22,7 +22,7 @@ interface StateProps {
   serviceBinding: boolean;
 }
 type MoveConnectionModalProps = {
-  edge: BaseEdge;
+  edge: Edge;
   availableTargets: Node[];
   cancel?: () => void;
   close?: () => void;

diff --git a/frontend/packages/dev-console/src/components/topology/components/edges/AggregateEdge.scss b/frontend/packages/dev-console/src/components/topology/components/edges/AggregateEdge.scss
@@ -0,0 +1,3 @@
+.odc-base-edge.odc-aggregate-edge {
+  --edge--cursor: default;
+}
diff --git a/frontend/packages/dev-console/src/components/topology/components/edges/AggregateEdge.tsx b/frontend/packages/dev-console/src/components/topology/components/edges/AggregateEdge.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { Edge, Layer, useHover, EdgeConnectorArrow, observer } from '@console/topology';
 
+import './AggregateEdge.scss';
+
 type AggregateEdgeProps = {
   element: Edge;
 };
@@ -16,7 +18,7 @@ const AggregateEdge: React.FC<AggregateEdgeProps> = ({ element }) => {
       <g
         ref={hoverRef}
         data-test-id="edge-handler"
-        className={classNames('odc-connects-to odc-base-edge', {
+        className={classNames('odc-base-edge odc-aggregate-edge', {
           'is-hover': hover,
         })}
       >

diff --git a/frontend/packages/dev-console/src/components/topology/components/removeConnection.tsx b/frontend/packages/dev-console/src/components/topology/components/removeConnection.tsx
@@ -28,11 +28,12 @@ export const removeConnection = (edge: Edge): Promise<any> => {
     btnText: 'Delete',
     submitDanger: true,
     executeFn: () => {
+      const removeEdge = edge.getChildren()?.length === 1 ? (edge.getChildren()[0] as Edge) : edge;
       return removeTopologyResourceConnection(
-        edge.getSource().getData(),
-        edge.getTarget().getData(),
-        edge.getData().data && edge.getData().data.sbr,
-        edge.getType(),
+        removeEdge.getSource().getData(),
+        removeEdge.getTarget().getData(),
+        removeEdge.getData().data && removeEdge.getData().data.sbr,
+        removeEdge.getType(),
       ).catch((err) => {
         err && errorModal({ error: err.message });
       });

diff --git a/frontend/packages/topology/src/elements/BaseEdge.ts b/frontend/packages/topology/src/elements/BaseEdge.ts
@@ -1,6 +1,7 @@
 import { observable, computed } from 'mobx';
 import Point from '../geom/Point';
 import { Edge, Node, EdgeModel, ModelKind, AnchorEnd, Anchor } from '../types';
+import { getTopCollapsedParent } from '../utils';
 import BaseElement from './BaseElement';
 
 export default class BaseEdge<E extends EdgeModel = EdgeModel, D = any> extends BaseElement<E, D>
@@ -22,12 +23,12 @@ export default class BaseEdge<E extends EdgeModel = EdgeModel, D = any> extends
 
   @computed
   private get sourceAnchor(): Anchor {
-    return this.getSource().getAnchor(AnchorEnd.source, this.getType());
+    return this.getVisibleSource().getAnchor(AnchorEnd.source, this.getType());
   }
 
   @computed
   private get targetAnchor(): Anchor {
-    return this.getTarget().getAnchor(AnchorEnd.target, this.getType());
+    return this.getVisibleTarget().getAnchor(AnchorEnd.target, this.getType());
   }
 
   getKind(): ModelKind {
@@ -56,6 +57,20 @@ export default class BaseEdge<E extends EdgeModel = EdgeModel, D = any> extends
     this.target = target;
   }
 
+  getVisibleSource(): Node {
+    if (!this.source) {
+      throw new Error(`Edge with ID '${this.getId()}' has no source.`);
+    }
+    return getTopCollapsedParent(this.source);
+  }
+
+  getVisibleTarget(): Node {
+    if (!this.target) {
+      throw new Error(`Edge with ID '${this.getId()}' has no target.`);
+    }
+    return getTopCollapsedParent(this.target);
+  }
+
   getBendpoints(): Point[] {
     return this.bendpoints || [];
   }

diff --git a/frontend/packages/topology/src/utils/createAggregateEdges.ts b/frontend/packages/topology/src/utils/createAggregateEdges.ts
@@ -29,24 +29,46 @@ const createAggregateEdges = (
   edges: EdgeModel[] | undefined,
   nodes: NodeModel[] | undefined,
 ): EdgeModel[] => {
+  const aggregateEdges: EdgeModel[] = [];
+
   return _.reduce(
     edges,
     (newEdges: EdgeModel[], edge: EdgeModel) => {
       const source = getDisplayedNodeForNode(edge.source, nodes);
       const target = getDisplayedNodeForNode(edge.target, nodes);
       if (source !== edge.source || target !== edge.target) {
-        edge.visible = false;
         if (source !== target) {
-          const existing = newEdges.find(
+          const existing = aggregateEdges.find(
             (e) =>
               (e.source === source || e.source === target) &&
               (e.target === target || e.target === source),
           );
+
           if (existing) {
-            existing.type = aggregateEdgeType;
+            // At least one other edge, add this edge and add the aggregate edge to the edges
+
+            // Hide edges that are depicted by this aggregate edge
             existing.children && existing.children.push(edge.id);
-            if (existing.source !== edge.source) {
-              existing.data.bidirectional = true;
+            _.forEach(existing.children, (existingChild) => {
+              const updateEdge = newEdges.find((newEdge) => newEdge.id === existingChild);
+              if (updateEdge) {
+                updateEdge.visible = false;
+              }
+            });
+
+            // Update the aggregate edges bidirectional flag
+            existing.data.birectional =
+              existing.data.bidirectional || existing.source !== edge.source;
+
+            // Check if this edge has already been added
+            if (
+              !newEdges.find(
+                (e) =>
+                  (e.source === source || e.source === target) &&
+                  (e.target === target || e.target === source),
+              )
+            ) {
+              newEdges.push(existing);
             }
           } else {
             const newEdge: EdgeModel = {
@@ -55,13 +77,11 @@ const createAggregateEdges = (
               source,
               target,
               id: `${source}_${target}`,
-              type: edge.type,
+              type: aggregateEdgeType,
             };
-            newEdges.push(newEdge);
+            aggregateEdges.push(newEdge);
           }
         }
-      } else {
-        edge.visible = true;
       }
       newEdges.push(edge);
       return newEdges;