From 8ba5da982de0d43a0633741461b142256bbf6c3d Mon Sep 17 00:00:00 2001 From: Anjali walsatwar Date: Wed, 10 Oct 2018 11:42:17 +0530 Subject: Refactoring Catalog UI code Issue-ID: SDC-1789 Change-Id: I9e1f5b436d234e113505bb461991ff90cca2b955 Signed-off-by: Anjali walsatwar --- .../utils/composition-graph-nodes-utils.ts | 122 +++++++-------------- 1 file changed, 40 insertions(+), 82 deletions(-) (limited to 'catalog-ui/src/app/directives/graphs-v2/composition-graph') diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts index cfec49267a..c6c732b7df 100644 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts @@ -19,26 +19,24 @@ */ import * as _ from "lodash"; -import {Component, NodesFactory, ComponentInstance, CompositionCiNodeVl,IAppMenu,AssetPopoverObj, Service} from "app/models"; -import {EventListenerService, LoaderService} from "app/services"; -import {GRAPH_EVENTS,ModalsHandler,GraphUIObjects} from "app/utils"; -import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils"; -import {CommonGraphUtils} from "../../common/common-graph-utils"; -import {CompositionCiServicePathLink} from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; -import {ServiceGenericResponse} from "app/ng2/services/responses/service-generic-response"; -import {ServiceServiceNg2} from 'app/ng2/services/component-services/service.service'; +import { Component, NodesFactory, ComponentInstance, CompositionCiNodeVl, IAppMenu, AssetPopoverObj, Service } from "app/models"; +import { EventListenerService, LoaderService } from "app/services"; +import { GRAPH_EVENTS, ModalsHandler, GraphUIObjects } from "app/utils"; +import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils"; +import { CommonGraphUtils } from "../../common/common-graph-utils"; +import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; +import { ServiceGenericResponse } from "app/ng2/services/responses/service-generic-response"; +import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service'; /** * Created by obarda on 11/9/2016. */ export class CompositionGraphNodesUtils { - constructor(private NodesFactory:NodesFactory, private $log:ng.ILogService, - private GeneralGraphUtils:CompositionGraphGeneralUtils, - private commonGraphUtils:CommonGraphUtils, - private eventListenerService:EventListenerService, - private loaderService:LoaderService, - private serviceService:ServiceServiceNg2, - /*private sdcMenu: IAppMenu, - private ModalsHandler: ModalsHandler*/) { + constructor(private NodesFactory: NodesFactory, private $log: ng.ILogService, + private GeneralGraphUtils: CompositionGraphGeneralUtils, + private commonGraphUtils: CommonGraphUtils, + private eventListenerService: EventListenerService, + private loaderService: LoaderService, + private serviceService: ServiceServiceNg2) { } @@ -47,8 +45,8 @@ export class CompositionGraphNodesUtils { * @param nodes - Cy nodes * @returns {any[]} */ - public getAllNodesData(nodes:Cy.CollectionNodes) { - return _.map(nodes, (node:Cy.CollectionFirstNode)=> { + public getAllNodesData(nodes: Cy.CollectionNodes) { + return _.map(nodes, (node: Cy.CollectionFirstNode) => { return node.data(); }) }; @@ -60,7 +58,7 @@ export class CompositionGraphNodesUtils { cy.nodes("[name !@^= '" + nameToMatch + "']").style({ 'background-image-opacity': 0.4 }); cy.nodes("[name @^= '" + nameToMatch + "']").style({ 'background-image-opacity': 1 }); }) - + } //Returns all nodes whose name starts with searchTerm @@ -74,22 +72,22 @@ export class CompositionGraphNodesUtils { * @param component * @param nodeToDelete */ - public deleteNode(cy:Cy.Instance, component:Component, nodeToDelete:Cy.CollectionNodes):void { + public deleteNode(cy: Cy.Instance, component: Component, nodeToDelete: Cy.CollectionNodes): void { this.loaderService.showLoader('composition-graph'); - let onSuccess:(response:ComponentInstance) => void = (response:ComponentInstance) => { + let onSuccess: (response: ComponentInstance) => void = (response: ComponentInstance) => { console.info('onSuccess', response); //if node to delete is a UCPE, remove all children (except UCPE-CPs) and remove their "hostedOn" links if (nodeToDelete.data().isUcpe) { - _.each(cy.nodes('[?isInsideGroup]'), (node)=> { + _.each(cy.nodes('[?isInsideGroup]'), (node) => { this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, nodeToDelete); }); } //check whether the node is connected to any VLs that only have one other connection. If so, delete that VL as well if (!(nodeToDelete.data() instanceof CompositionCiNodeVl)) { - let connectedVls:Array = this.getConnectedVlToNode(nodeToDelete); + let connectedVls: Array = this.getConnectedVlToNode(nodeToDelete); this.handleConnectedVlsToDelete(connectedVls); } @@ -101,7 +99,7 @@ export class CompositionGraphNodesUtils { }); // update service path list - this.serviceService.getComponentCompositionData(component).subscribe((response:ServiceGenericResponse) => { + this.serviceService.getComponentCompositionData(component).subscribe((response: ServiceGenericResponse) => { (component).forwardingPaths = response.forwardingPaths; }); @@ -111,7 +109,7 @@ export class CompositionGraphNodesUtils { cy.remove(nodeToDelete); }; - let onFailed:(response:any) => void = (response:any) => { + let onFailed: (response: any) => void = (response: any) => { console.info('onFailed', response); }; @@ -123,28 +121,14 @@ export class CompositionGraphNodesUtils { }; -/* - public confirmDeleteNode = (nodeId:string, cy:Cy.Instance, component:Component) => { - let node:Cy.CollectionNodes = cy.getElementById(nodeId); - let onOk = ():void => { - this.deleteNode(cy, component, node); - }; - - let componentInstance:ComponentInstance = node.data().componentInstance; - let state = "deleteInstance"; - let title:string = this.sdcMenu.alertMessages[state].title; - let message:string = this.sdcMenu.alertMessages[state].message.format([componentInstance.name]); - - this.ModalsHandler.openAlertModal(title, message).then(onOk); - };*/ /** * Finds all VLs connected to a single node * @param node * @returns {Array} */ - public getConnectedVlToNode = (node:Cy.CollectionNodes):Array => { - let connectedVls:Array = new Array(); - _.forEach(node.connectedEdges().connectedNodes(), (node:Cy.CollectionFirstNode) => { + public getConnectedVlToNode = (node: Cy.CollectionNodes): Array => { + let connectedVls: Array = new Array(); + _.forEach(node.connectedEdges().connectedNodes(), (node: Cy.CollectionFirstNode) => { if (node.data() instanceof CompositionCiNodeVl) { connectedVls.push(node); } @@ -157,8 +141,8 @@ export class CompositionGraphNodesUtils { * Delete all VLs that have only two connected nodes (this function is called when deleting a node) * @param connectedVls */ - public handleConnectedVlsToDelete = (connectedVls:Array) => { - _.forEach(connectedVls, (vlToDelete:Cy.CollectionNodes) => { + public handleConnectedVlsToDelete = (connectedVls: Array) => { + _.forEach(connectedVls, (vlToDelete: Cy.CollectionNodes) => { if (vlToDelete.connectedEdges().length === 2) { // if vl connected only to 2 nodes need to delete the vl this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, vlToDelete.data().componentInstance); @@ -175,12 +159,12 @@ export class CompositionGraphNodesUtils { * @param cy * @param node - node that was moved in/out of ucpe */ - public deleteNodeVLsUponMoveToOrFromUCPE = (component:Component, cy:Cy.Instance, node:Cy.CollectionNodes):Cy.CollectionNodes => { + public deleteNodeVLsUponMoveToOrFromUCPE = (component: Component, cy: Cy.Instance, node: Cy.CollectionNodes): Cy.CollectionNodes => { if (node.data() instanceof CompositionCiNodeVl) { return; } - let connectedVLsToDelete:Cy.CollectionNodes = cy.collection(); + let connectedVLsToDelete: Cy.CollectionNodes = cy.collection(); _.forEach(node.neighborhood('node'), (connectedNode) => { //Find all neighboring nodes that are VLs @@ -189,7 +173,7 @@ export class CompositionGraphNodesUtils { //check VL's neighbors to see if it has 2 or more nodes whose location is compatible with VL (regardless of whether VL is in or out of UCPE) let compatibleNodeCount = 0; let vlNeighborhood = connectedNode.neighborhood('node'); - _.forEach(vlNeighborhood, (vlNeighborNode)=> { + _.forEach(vlNeighborhood, (vlNeighborNode) => { if (this.commonGraphUtils.nodeLocationsCompatible(cy, connectedNode, vlNeighborNode)) { compatibleNodeCount++; } @@ -201,7 +185,7 @@ export class CompositionGraphNodesUtils { } }); - connectedVLsToDelete.each((i, vlToDelete:Cy.CollectionNodes)=> { + connectedVLsToDelete.each((i, vlToDelete: Cy.CollectionNodes) => { this.deleteNode(cy, component, vlToDelete); }); return connectedVLsToDelete; @@ -213,26 +197,26 @@ export class CompositionGraphNodesUtils { * @param component * @param nodesMoved - the node/multiple nodes now moved by the user */ - public onNodesPositionChanged = (cy:Cy.Instance, component:Component, nodesMoved:Cy.CollectionNodes):void => { + public onNodesPositionChanged = (cy: Cy.Instance, component: Component, nodesMoved: Cy.CollectionNodes): void => { if (nodesMoved.length === 0) { return; } - let isValidMove:boolean = this.GeneralGraphUtils.isGroupValidDrop(cy, nodesMoved); + let isValidMove: boolean = this.GeneralGraphUtils.isGroupValidDrop(cy, nodesMoved); if (isValidMove) { this.$log.debug(`composition-graph::ValidDrop:: updating node position`); - let instancesToUpdateInNonBlockingAction:Array = new Array(); + let instancesToUpdateInNonBlockingAction: Array = new Array(); - _.each(nodesMoved, (node:Cy.CollectionFirstNode)=> { //update all nodes new position + _.each(nodesMoved, (node: Cy.CollectionFirstNode) => { //update all nodes new position if (node.data().isUcpePart && !node.data().isUcpe) { return; }//No need to update UCPE-CPs //update position - let newPosition:Cy.Position = this.commonGraphUtils.getNodePosition(node); + let newPosition: Cy.Position = this.commonGraphUtils.getNodePosition(node); node.data().componentInstance.updatePosition(newPosition.x, newPosition.y); //check if node moved to or from UCPE @@ -272,7 +256,7 @@ export class CompositionGraphNodesUtils { * @param ucpeContainer - UCPE container that the node has been moved to. When moving a node out of ucpe, param will be empty * @param instancesToUpdateInNonBlockingAction */ - public handleUcpeChildMove(node:Cy.CollectionFirstNode, ucpeContainer:Cy.CollectionElements, instancesToUpdateInNonBlockingAction:Array) { + public handleUcpeChildMove(node: Cy.CollectionFirstNode, ucpeContainer: Cy.CollectionElements, instancesToUpdateInNonBlockingAction: Array) { if (node.data().isInsideGroup) { if (ucpeContainer.length) { //moving node within UCPE. Simply update position @@ -285,35 +269,9 @@ export class CompositionGraphNodesUtils { this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, node, ucpeContainer, true); } } - /** - * Gets the position for the asset popover menu - * Then, check if right edge of menu would overlap horizontal screen edge (palette offset + canvas width - right panel) - * Then, check if bottom edge of menu would overlap the vertical end of the canvas. - * @param cy - * @param node - * @returns {Cy.Position} - - public createAssetPopover = (cy: Cy.Instance, node:Cy.CollectionFirstNode, isViewOnly:boolean):AssetPopoverObj => { - - let menuOffset:Cy.Position = { x: node.renderedWidth() / 2, y: -(node.renderedWidth() / 2) };// getNodePositionWithOffset returns central point of node. First add node.renderedWidth()/2 to get its to border. - let menuPosition:Cy.Position = this.commonGraphUtils.getNodePositionWithOffset(node, menuOffset); - let menuSide:string = 'right'; - - if(menuPosition.x + GraphUIObjects.COMPOSITION_NODE_MENU_WIDTH >= cy.width() + GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET - GraphUIObjects.COMPOSITION_RIGHT_PANEL_OFFSET){ - menuPosition.x -= menuOffset.x * 2 + GraphUIObjects.COMPOSITION_NODE_MENU_WIDTH; //menu position already includes offset to the right. Therefore, subtract double offset so we have same distance from node for menu on left - menuSide = 'left'; - } - - if(menuPosition.y + GraphUIObjects.COMPOSITION_NODE_MENU_HEIGHT >= cy.height()){ - menuPosition.y = menuPosition.y - GraphUIObjects.COMPOSITION_NODE_MENU_HEIGHT - menuOffset.y * 2; - } - return new AssetPopoverObj(node.data().id, node.data().name, menuPosition, menuSide, isViewOnly); - }; - */ - - } +} - CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService', 'ServiceServiceNg2' /*, 'sdcMenu', 'ModalsHandler'*/] +CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService', 'ServiceServiceNg2' /*, 'sdcMenu', 'ModalsHandler'*/] -- cgit 1.2.3-korg