diff options
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2/composition-graph')
10 files changed, 0 insertions, 2633 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts deleted file mode 100644 index e6c2fb395b..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts +++ /dev/null @@ -1,947 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { - Match, - LinkMenu, - ComponentInstance, - LeftPaletteComponent, - Relationship, - Component, - Service, - ConnectRelationModel, - CompositionCiNodeBase, - CompositionCiNodeVl, - ModalModel, - ButtonModel, - NodesFactory, - Point -} from "app/models"; -import { ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors, DEPENDENCY_EVENTS } from "app/utils"; -import { EventListenerService, LoaderService } from "app/services"; -import { CompositionGraphLinkUtils } from "./utils/composition-graph-links-utils"; -import { CompositionGraphGeneralUtils } from "./utils/composition-graph-general-utils"; -import { CompositionGraphNodesUtils } from "./utils/composition-graph-nodes-utils"; -import { CommonGraphUtils } from "../common/common-graph-utils"; -import { MatchCapabilitiesRequirementsUtils } from "./utils/match-capability-requierment-utils"; -import { CompositionGraphPaletteUtils } from "./utils/composition-graph-palette-utils"; -import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style"; -import { CytoscapeEdgeEditation } from 'third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js'; -import { ComponentServiceNg2 } from "../../../ng2/services/component-services/component.service"; -import { ComponentGenericResponse } from "../../../ng2/services/responses/component-generic-response"; -import { ModalService } from "../../../ng2/services/modal.service"; -import { ConnectionWizardService } from "../../../ng2/pages/connection-wizard/connection-wizard.service"; -import { StepModel } from "../../../models/wizard-step"; -import { FromNodeStepComponent } from "app/ng2/pages/connection-wizard/from-node-step/from-node-step.component"; -import { PropertiesStepComponent } from "app/ng2/pages/connection-wizard/properties-step/properties-step.component"; -import { ToNodeStepComponent } from "app/ng2/pages/connection-wizard/to-node-step/to-node-step.component"; -import { ConnectionWizardHeaderComponent } from "app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component"; -import { ConnectionPropertiesViewComponent } from "../../../ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component"; -import { ComponentInstanceServiceNg2 } from "../../../ng2/services/component-instance-services/component-instance.service"; -import { EVENTS } from "../../../utils/constants"; -import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model"; -import { ForwardingPath } from "app/models/forwarding-path"; -import { ServicePathGraphUtils } from "./utils/composition-graph-service-path-utils"; -import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; -import { - ZoneInstance, ZoneInstanceMode, ZoneInstanceType, - ZoneInstanceAssignmentType -} from "app/models/graph/zones/zone-instance"; - -import { Zone } from "app/models/graph/zones/zone"; -import { CompositionGraphZoneUtils } from "./utils/composition-graph-zone-utils"; -import { UIZoneInstanceObject } from "../../../models/ui-models/ui-zone-instance-object"; -import { GroupInstance } from "../../../models/graph/zones/group-instance"; -import { PolicyInstance } from "../../../models/graph/zones/policy-instance"; - - -export interface ICompositionGraphScope extends ng.IScope { - - component: Component; - isLoading: boolean; - isViewOnly: boolean; - withSidebar: boolean; - - //zones - newZoneInstance; - zoneTagMode: string; - activeZoneInstance: ZoneInstance; - zones: Array<Zone>; - zoneMinimizeToggle(zoneType: ZoneInstanceType): void; - zoneInstanceTagged(taggedInstance: ZoneInstance): void; - zoneBackgroundClicked() :void; - zoneInstanceModeChanged(newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType); - unsetActiveZoneInstance(): void; - clickOutsideZoneInstance(): void; - zoneAssignmentSaveStart(): void; - zoneAssignmentSaveComplete(success: boolean): void; - - // Link menu - create link menu - relationMenuDirectiveObj: ConnectRelationModel; - isLinkMenuOpen: boolean; - createLinkFromMenu: (chosenMatch: Match, vl: Component) => void; - saveChangedCapabilityProperties: () => Promise<PropertyBEModel[]>; - - //modify link menu - for now only delete menu - relationMenuTimeout: ng.IPromise<any>; - linkMenuObject: LinkMenu; - isOnDrag: boolean; - - //left palette functions callbacks - dropCallback(event: JQueryEventObject, ui: any): void; - beforeDropCallback(event: IDragDropEvent): void; - verifyDrop(event: JQueryEventObject, ui: any): void; - - //Links menus - viewRelation(link: Cy.CollectionEdges): void; - deleteRelation(link: Cy.CollectionEdges): void; - hideRelationMenu(); - - //search,zoom in/out/all - componentInstanceNames: Array<string>; //id, name - zoom(zoomIn: boolean): void; - zoomAllWithoutSidebar(): void; - getAutoCompleteValues(searchTerm: string): void; - highlightSearchMatches(searchTerm: string): void; - - canvasMenuProps: any; - - createOrUpdateServicePath(data: any): void; - deletePathsOnCy(): void; - drawPathOnCy(data: ForwardingPath): void; - selectedPathId: string; -} - -export class CompositionGraph implements ng.IDirective { - private _cy: Cy.Instance; - private _currentlyCLickedNodePosition: Cy.Position; - private dragElement: JQuery; - private dragComponent: ComponentInstance; - - constructor(private $q: ng.IQService, - private $log: ng.ILogService, - private $timeout: ng.ITimeoutService, - private NodesFactory: NodesFactory, - private CompositionGraphLinkUtils: CompositionGraphLinkUtils, - private GeneralGraphUtils: CompositionGraphGeneralUtils, - private ComponentInstanceFactory: ComponentInstanceFactory, - private NodesGraphUtils: CompositionGraphNodesUtils, - private eventListenerService: EventListenerService, - private ComponentFactory: ComponentFactory, - private LoaderService: LoaderService, - private commonGraphUtils: CommonGraphUtils, - private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils, - private CompositionGraphPaletteUtils: CompositionGraphPaletteUtils, - private compositionGraphZoneUtils: CompositionGraphZoneUtils, - private ComponentServiceNg2: ComponentServiceNg2, - private ModalServiceNg2: ModalService, - private ConnectionWizardServiceNg2: ConnectionWizardService, - private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2, - private servicePathGraphUtils: ServicePathGraphUtils) { - - } - - restrict = 'E'; - template = require('./composition-graph.html'); - scope = { - component: '=', - isViewOnly: '=', - withSidebar: '=' - }; - - link = (scope: ICompositionGraphScope, el: JQuery) => { - this.loadGraph(scope, el); - - if (!scope.component.groupInstances || !scope.component.policies) { - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED, () => { - this.loadGraphData(scope); - }); - } else { - this.loadGraphData(scope); - } - - - scope.$on('$destroy', () => { - this._cy.destroy(); - _.forEach(GRAPH_EVENTS, (event) => { - this.eventListenerService.unRegisterObserver(event); - }); - this.eventListenerService.unRegisterObserver(EVENTS.SHOW_LOADER_EVENT + 'composition-graph'); - this.eventListenerService.unRegisterObserver(EVENTS.HIDE_LOADER_EVENT + 'composition-graph'); - this.eventListenerService.unRegisterObserver(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE); - }); - - }; - - private loadGraphData = (scope: ICompositionGraphScope) => { - this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly); - this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component)); - this.commonGraphUtils.initUcpeChildren(this._cy); - this.compositionGraphZoneUtils.initZoneInstances(scope.zones, scope.component); - setTimeout(() => {//Need settimeout so that angular canvas changes will take effect before resize & center - this.GeneralGraphUtils.zoomAllWithMax(this._cy, 1); - }); - } - - private loadGraph = (scope: ICompositionGraphScope, el: JQuery) => { - let graphEl = el.find('.sdc-composition-graph-wrapper'); - this.initGraph(graphEl, scope.isViewOnly); - this.initDropZone(scope); - this.initZones(scope); - this.registerCytoscapeGraphEvents(scope); - this.registerCustomEvents(scope, el); - this.initViewMode(scope.isViewOnly); - }; - - private initGraph(graphEl: JQuery, isViewOnly: boolean) { - - this._cy = cytoscape({ - container: graphEl, - style: ComponentInstanceNodesStyle.getCompositionGraphStyle(), - zoomingEnabled: true, - maxZoom: 1.2, - minZoom: .1, - userZoomingEnabled: false, - userPanningEnabled: true, - selectionType: 'single', - boxSelectionEnabled: true, - autolock: isViewOnly, - autoungrabify: isViewOnly - }); - } - - private initViewMode(isViewOnly: boolean) { - - if (isViewOnly) { - //remove event listeners - this._cy.off('drag'); - this._cy.off('handlemouseout'); - this._cy.off('handlemouseover'); - this._cy.off('canvasredraw'); - this._cy.off('handletagclick') - this._cy.edges().unselectify(); - } - }; - - private registerCustomEvents(scope: ICompositionGraphScope, el: JQuery) { - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, (groupInstance: GroupInstance) => { - this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, groupInstance); - this.GeneralGraphUtils.showGroupUpdateSuccess(); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, (policyInstance: PolicyInstance) => { - this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, policyInstance); - this.GeneralGraphUtils.showPolicyUpdateSuccess(); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => { - if (scope.isOnDrag) { - return; - } - - this.$log.info(`composition-graph::registerEventServiceEvents:: palette hover on component: ${leftPaletteComponent.uniqueId}`); - - let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes()); - let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy); - - if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) { - let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId); - let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(cacheComponent, nodesData, nodesLinks); - - this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy); - this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy); - - return; - } - - //----------------------- ORIT TO FIX------------------------// - - this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => { - - let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType); - component.uniqueId = component.uniqueId; - component.capabilities = response.capabilities; - component.requirements = response.requirements; - this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component); - }); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, (component: Component, paletteComponent: LeftPaletteComponent, startPosition: Point) => { - - let zoneType: ZoneInstanceType = this.compositionGraphZoneUtils.getZoneTypeForPaletteComponent(paletteComponent.categoryType); - this.compositionGraphZoneUtils.showZone(scope.zones[zoneType]); - - this.LoaderService.showLoader('composition-graph'); - this.compositionGraphZoneUtils.createZoneInstanceFromLeftPalette(zoneType, component, paletteComponent.type).subscribe((zoneInstance: ZoneInstance) => { - this.LoaderService.hideLoader('composition-graph'); - this.compositionGraphZoneUtils.addInstanceToZone(scope.zones[zoneInstance.type], zoneInstance, true); - this.compositionGraphZoneUtils.createPaletteToZoneAnimation(startPosition, zoneType, zoneInstance); - }, (error) => { - this.LoaderService.hideLoader('composition-graph'); - }); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => { - - this._cy.emit('hidehandles'); - this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, (dragElement, dragComponent) => { - - this.dragElement = dragElement; - this.dragComponent = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, (event: IDragDropEvent) => { - this.CompositionGraphPaletteUtils.onComponentDrag(this._cy, event, this.dragElement, this.dragComponent); - - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component: ComponentInstance) => { - - let selectedNode = this._cy.getElementById(component.uniqueId); - selectedNode.data().componentInstance.name = component.name; - selectedNode.data('name', component.name); //used for tooltip - selectedNode.data('displayName', selectedNode.data().getDisplayName()); //abbreviated - - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstance: ComponentInstance) => { - let nodeToDelete = this._cy.getElementById(componentInstance.uniqueId); - this.NodesGraphUtils.deleteNode(this._cy, scope.component, nodeToDelete); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, (deletedInstance: UIZoneInstanceObject) => { - - if (deletedInstance.type === ZoneInstanceType.POLICY) { - scope.component.policies = scope.component.policies.filter(policy => policy.uniqueId !== deletedInstance.uniqueId); - } else if (deletedInstance.type === ZoneInstanceType.GROUP) { - scope.component.groupInstances = scope.component.groupInstances.filter(group => group.uniqueId !== deletedInstance.uniqueId); - } - //remove it from zones - scope.zones[deletedInstance.type].removeInstance(deletedInstance.uniqueId); - if (deletedInstance.type === ZoneInstanceType.GROUP && !_.isEmpty(scope.zones[ZoneInstanceType.POLICY])) { - this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(deletedInstance.uniqueId, [scope.zones[ZoneInstanceType.POLICY]], ZoneInstanceAssignmentType.GROUPS); - } - this.eventListenerService.notifyObservers(EVENTS.UPDATE_PANEL); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, (componentInstanceId: string) => { - if (!_.isEmpty(scope.zones)) { - this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(componentInstanceId, scope.zones, ZoneInstanceAssignmentType.COMPONENT_INSTANCES); - } - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_EDGE, (releaseLoading: boolean, linksToDelete: Cy.CollectionEdges) => { - this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, releaseLoading, linksToDelete); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, (node: Cy.CollectionNodes, ucpe: Cy.CollectionNodes, updateExistingNode: boolean) => { - - this.commonGraphUtils.initUcpeChildData(node, ucpe); - //check if item is a VL, and if so, skip adding the binding to ucpe - if (!(node.data() instanceof CompositionCiNodeVl)) { - this.CompositionGraphLinkUtils.createVfToUcpeLink(scope.component, this._cy, ucpe.data(), node.data()); //create link from the node to the ucpe - } - - if (updateExistingNode) { - let vlsPendingDeletion: Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); //delete connected VLs that no longer have 2 links - this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed - this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position - } - - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, (node: Cy.CollectionNodes, ucpe: Cy.CollectionNodes) => { - this.commonGraphUtils.removeUcpeChildData(node); - let vlsPendingDeletion: Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); - this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed - this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component: Component) => { - scope.component = component; - this._cy.elements().remove(); - this.loadGraphData(scope); - }); - - this.eventListenerService.registerObserverCallback(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, (ischecked: boolean) => { - if (ischecked) { - this._cy.$('node:selected').addClass('dependent'); - } else { - // due to defect in cytoscape, just changing the class does not replace the icon, and i need to revert to original icon with no markings. - this._cy.$('node:selected').removeClass('dependent'); - this._cy.$('node:selected').style({'background-image': this._cy.$('node:selected').data('originalImg')}); - } - }); - - scope.zoom = (zoomIn: boolean): void => { - let currentZoom: number = this._cy.zoom(); - if (zoomIn) { - this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom + .1); - } else { - this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom - .1); - } - } - - - scope.zoomAllWithoutSidebar = () => { - scope.withSidebar = false; - setTimeout(() => { //wait for sidebar changes to take effect before zooming - this.GeneralGraphUtils.zoomAll(this._cy); - }); - }; - - scope.getAutoCompleteValues = (searchTerm: string) => { - if (searchTerm.length > 1) { //US requirement: only display search results after 2nd letter typed. - let nodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); - scope.componentInstanceNames = _.map(nodes, node => node.data('name')); - } else { - scope.componentInstanceNames = []; - } - }; - - scope.highlightSearchMatches = (searchTerm: string) => { - this.NodesGraphUtils.highlightMatchingNodesByName(this._cy, searchTerm); - let matchingNodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); - this.GeneralGraphUtils.zoomAll(this._cy, matchingNodes); - }; - - scope.saveChangedCapabilityProperties = (): Promise<PropertyBEModel[]> => { - return new Promise<PropertyBEModel[]>((resolve) => { - const capabilityPropertiesBE: PropertyBEModel[] = this.ConnectionWizardServiceNg2.changedCapabilityProperties.map((prop) => { - prop.value = prop.getJSONValue(); - const propBE = new PropertyBEModel(prop); - propBE.parentUniqueId = this.ConnectionWizardServiceNg2.selectedMatch.relationship.relation.capabilityOwnerId; - return propBE; - }); - if (capabilityPropertiesBE.length > 0) { - // if there are capability properties to update, then first update capability properties and then resolve promise - this.ComponentInstanceServiceNg2 - .updateInstanceCapabilityProperties( - scope.component, - this.ConnectionWizardServiceNg2.selectedMatch.toNode, - this.ConnectionWizardServiceNg2.selectedMatch.capability, - capabilityPropertiesBE - ) - .subscribe((response) => { - console.log("Update resource instance capability properties response: ", response); - this.ConnectionWizardServiceNg2.changedCapabilityProperties = []; - resolve(capabilityPropertiesBE); - }); - } else { - // no capability properties to update, immediately resolve promise - resolve(capabilityPropertiesBE); - } - }); - }; - - scope.createLinkFromMenu = (): void => { - scope.isLinkMenuOpen = false; - - scope.saveChangedCapabilityProperties().then(() => { - //create link: - this.CompositionGraphLinkUtils - .createLinkFromMenu(this._cy, this.ConnectionWizardServiceNg2.selectedMatch, scope.component); - }); - }; - - scope.hideRelationMenu = () => { - this.commonGraphUtils.safeApply(scope, () => { - delete scope.canvasMenuProps; - this.$timeout.cancel(scope.relationMenuTimeout); - }); - }; - - scope.createOrUpdateServicePath = (data: any) => { - this.servicePathGraphUtils.createOrUpdateServicePath(scope, data); - }; - scope.deletePathsOnCy = () => { - this.servicePathGraphUtils.deletePathsFromGraph(this._cy, <Service>scope.component); - }; - scope.drawPathOnCy = (data: ForwardingPath) => { - this.servicePathGraphUtils.drawPath(this._cy, data, <Service>scope.component); - }; - - scope.viewRelation = (link: Cy.CollectionEdges) => { - scope.hideRelationMenu(); - - const linkData = link.data(); - const sourceNode: CompositionCiNodeBase = link.source().data(); - const targetNode: CompositionCiNodeBase = link.target().data(); - const relationship: Relationship = linkData.relation.relationships[0]; - - scope.component.getRelationRequirementCapability(relationship, sourceNode.componentInstance, targetNode.componentInstance).then((objReqCap) => { - const capability = objReqCap.capability; - const requirement = objReqCap.requirement; - - this.ConnectionWizardServiceNg2.currentComponent = scope.component; - this.ConnectionWizardServiceNg2.connectRelationModel = new ConnectRelationModel(sourceNode, targetNode, []); - this.ConnectionWizardServiceNg2.selectedMatch = new Match(requirement, capability, true, linkData.source, linkData.target); - this.ConnectionWizardServiceNg2.selectedMatch.relationship = relationship; - - const title = `Connection Properties`; - const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => { - scope.saveChangedCapabilityProperties().then(() => { - this.ModalServiceNg2.closeCurrentModal(); - }) - }); - const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => { - this.ModalServiceNg2.closeCurrentModal(); - }); - const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]); - const modalInstance = this.ModalServiceNg2.createCustomModal(modal); - this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent); - modalInstance.instance.open(); - - new Promise((resolve) => { - if (!this.ConnectionWizardServiceNg2.selectedMatch.capability.properties) { - this.ComponentInstanceServiceNg2.getInstanceCapabilityProperties(scope.component, linkData.target, capability) - .subscribe(() => { - resolve(); - }, (error) => { - }); - } else { - resolve(); - } - }).then(() => { - this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent); - }) - - }, (error) => { - }); - }; - - scope.deleteRelation = (link: Cy.CollectionEdges) => { - scope.hideRelationMenu(); - - //if multiple edges selected, delete the VL itself so edges get deleted automatically - if (this._cy.$('edge:selected').length > 1) { - this.NodesGraphUtils.deleteNode(this._cy, scope.component, this._cy.$('node:selected')); - } else { - this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, true, link); - } - }; - } - - private registerCytoscapeGraphEvents(scope: ICompositionGraphScope) { - - this._cy.on('addedgemouseup', (event, data) => { - scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target); - if (scope.relationMenuDirectiveObj != null) { - this.ConnectionWizardServiceNg2.setRelationMenuDirectiveObj(scope.relationMenuDirectiveObj); - this.ConnectionWizardServiceNg2.currentComponent = scope.component; - //TODO: init with the selected values - this.ConnectionWizardServiceNg2.selectedMatch = null; - - let steps: Array<StepModel> = []; - let fromNodeName: string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name; - let toNodeName: string = scope.relationMenuDirectiveObj.toNode.componentInstance.name; - steps.push(new StepModel(fromNodeName, FromNodeStepComponent)); - steps.push(new StepModel(toNodeName, ToNodeStepComponent)); - steps.push(new StepModel('Properties', PropertiesStepComponent)); - let wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName; - let modalInstance = this.ModalServiceNg2.createMultiStepsWizard(wizardTitle, steps, scope.createLinkFromMenu, ConnectionWizardHeaderComponent); - modalInstance.instance.open(); - } - }); - this._cy.on('tapstart', 'node', (event: Cy.EventObject) => { - scope.isOnDrag = true; - this._currentlyCLickedNodePosition = angular.copy(event.cyTarget[0].position()); //update node position on drag - if (event.cyTarget.data().isUcpe) { - this._cy.nodes('.ucpe-cp').unlock(); - event.cyTarget.style('opacity', 0.5); - } - }); - - this._cy.on('drag', 'node', (event: Cy.EventObject) => { - - if (event.cyTarget.data().isDraggable) { - event.cyTarget.style({ 'overlay-opacity': 0.24 }); - if (this.GeneralGraphUtils.isValidDrop(this._cy, event.cyTarget)) { - event.cyTarget.style({ 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR }); - } else { - event.cyTarget.style({ 'overlay-color': GraphColors.NODE_OVERLAPPING_BACKGROUND_COLOR }); - } - } - - if (event.cyTarget.data().isUcpe) { - let pos = event.cyTarget.position(); - - this._cy.nodes('[?isInsideGroup]').positions((i, node) => { - return { - x: pos.x + node.data("ucpeOffset").x, - y: pos.y + node.data("ucpeOffset").y - } - }); - } - }); - - this._cy.on('handlemouseover', (event, payload) => { - - if (payload.node.grabbed() || this._cy.scratch('_edge_editation_highlights') === true) { //no need to add opacity while we are dragging and hovering othe nodes- or if opacity was already calculated for these nodes - return; - } - - if (scope.zoneTagMode) { - scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId(); - return; - } - - let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes()); - let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy); - - let linkableNodes = this.commonGraphUtils.getLinkableNodes(this._cy, payload.node); - let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(payload.node.data().componentInstance, linkableNodes, nodesLinks); - this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy); - this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data()); - - this._cy.scratch()._edge_editation_highlights = true; - }); - - this._cy.on('handlemouseout', () => { - if (scope.zoneTagMode) { - scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getTagModeId(); - return; - } - if (this._cy.scratch('_edge_editation_highlights') === true) { - this._cy.removeScratch('_edge_editation_highlights'); - this._cy.emit('hidehandles'); - this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy); - } - }); - - - this._cy.on('tapend', (event: Cy.EventObject) => { - scope.isOnDrag = false; - if (scope.zoneTagMode) { - return; - } - if (event.cyTarget === this._cy) { //On Background clicked - if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged - if (scope.activeZoneInstance) { - scope.unsetActiveZoneInstance(); - } - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED); - } - scope.hideRelationMenu(); - } - - else if (event.cyTarget.isEdge()) { //On Edge clicked - this.CompositionGraphLinkUtils.handleLinkClick(this._cy, event); - if (event.cyTarget.data().type === CompositionCiServicePathLink.LINK_TYPE) { - return; - } - this.openModifyLinkMenu(scope, this.CompositionGraphLinkUtils.getModifyLinkMenu(event.cyTarget[0], event), 6000); - } - - else { //On Node clicked - - this._cy.nodes(':grabbed').style({ 'overlay-opacity': 0 }); - - let isUcpe: boolean = event.cyTarget.data().isUcpe; - let newPosition = event.cyTarget[0].position(); - //node position changed (drop after drag event) - we need to update position - if (this._currentlyCLickedNodePosition.x !== newPosition.x || this._currentlyCLickedNodePosition.y !== newPosition.y) { - let nodesMoved: Cy.CollectionNodes = this._cy.$(':grabbed'); - if (isUcpe) { - nodesMoved = nodesMoved.add(this._cy.nodes('[?isInsideGroup]:free')); //'child' nodes will not be recognized as "grabbed" elements within cytoscape. manually add them to collection of nodes moved. - } - this.NodesGraphUtils.onNodesPositionChanged(this._cy, scope.component, nodesMoved); - } else { - this.$log.debug('composition-graph::onNodeSelectedEvent:: fired'); - if (scope.activeZoneInstance) { - scope.unsetActiveZoneInstance(); - } - scope.$apply(() => { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance); - }); - } - - if (isUcpe) { - this._cy.nodes('.ucpe-cp').lock(); - event.cyTarget.style('opacity', 1); - } - - } - }); - - this._cy.on('boxselect', 'node', (event: Cy.EventObject) => { - scope.unsetActiveZoneInstance(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance); - }); - - this._cy.on('canvasredraw', (event: Cy.EventObject) => { - if (scope.zoneTagMode) { - this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, scope.activeZoneInstance); - } - }); - - this._cy.on('handletagclick', (event: Cy.EventObject, eventData: any) => { - this.compositionGraphZoneUtils.handleTagClick(this._cy, scope.activeZoneInstance, eventData.nodeId); - - - }); - } - - private openModifyLinkMenu = (scope: ICompositionGraphScope, linkMenuObject: LinkMenu, timeOutInMilliseconds?: number) => { - scope.hideRelationMenu(); - this.$timeout(() => { - scope.canvasMenuProps = { - open: true, - styleClass: 'w-sdc-canvas-menu-list', - items: [], - position: { - x: `${linkMenuObject.position.x}px`, - y: `${linkMenuObject.position.y}px` - } - }; - - if (this._cy.$('edge:selected').length === 1) { - scope.canvasMenuProps.items.push({ - contents: 'View', - styleClass: 'w-sdc-canvas-menu-item-view', - action: () => { - scope.viewRelation(<Cy.CollectionEdges>linkMenuObject.link); - } - }); - } - if (!scope.isViewOnly) { - scope.canvasMenuProps.items.push({ - contents: 'Delete', - styleClass: 'w-sdc-canvas-menu-item-delete', - action: () => { - scope.deleteRelation(<Cy.CollectionEdges>linkMenuObject.link); - } - }); - } - scope.relationMenuTimeout = this.$timeout(() => { - scope.hideRelationMenu(); - }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000); - }); - }; - - private initGraphNodes(componentInstances: ComponentInstance[], isViewOnly: boolean) { - - - setTimeout(() => { - let handles = new CytoscapeEdgeEditation; - handles.init(this._cy); - if (!isViewOnly) { //Init nodes handle extension - enable dynamic links - handles.initNodeEvents(); - handles.registerHandle(ComponentInstanceNodesStyle.getAddEdgeHandle()); - } - handles.registerHandle(ComponentInstanceNodesStyle.getTagHandle()); - handles.registerHandle(ComponentInstanceNodesStyle.getTaggedPolicyHandle()); - handles.registerHandle(ComponentInstanceNodesStyle.getTaggedGroupHandle()); - }, 0); - - - _.each(componentInstances, (instance) => { - let compositionGraphNode: CompositionCiNodeBase = this.NodesFactory.createNode(instance); - this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, compositionGraphNode); - }); - } - - - private initDropZone(scope: ICompositionGraphScope) { - - if (scope.isViewOnly) { - return; - } - scope.dropCallback = (event: IDragDropEvent) => { - this.$log.debug(`composition-graph::dropCallback:: fired`); - this.CompositionGraphPaletteUtils.addNodeFromPalette(this._cy, event, scope.component); - }; - - scope.verifyDrop = (event: JQueryEventObject) => { - - if (!this.dragElement || this.dragElement.hasClass('red')) { - return false; - } - return true; - }; - - scope.beforeDropCallback = (event: IDragDropEvent): ng.IPromise<void> => { - let deferred: ng.IDeferred<void> = this.$q.defer<void>(); - if (this.dragElement.hasClass('red')) { - deferred.reject(); - } else { - deferred.resolve(); - } - - return deferred.promise; - } - } - - - private initZones = (scope: ICompositionGraphScope): void => { - scope.zones = this.compositionGraphZoneUtils.createCompositionZones(); - - - scope.zoneMinimizeToggle = (zoneType: ZoneInstanceType): void => { - scope.zones[zoneType].minimized = !scope.zones[zoneType].minimized; - }; - - scope.zoneInstanceModeChanged = (newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType): void => { - if (scope.zoneTagMode) { //we're in tag mode. - if (instance == scope.activeZoneInstance && newMode == ZoneInstanceMode.NONE) { //we want to turn tag mode off. - scope.zoneTagMode = null; - scope.activeZoneInstance.mode = ZoneInstanceMode.SELECTED; - this.compositionGraphZoneUtils.endCyTagMode(this._cy); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_END, instance); - - } - } else { - if (instance != scope.activeZoneInstance || (instance == scope.activeZoneInstance && newMode > ZoneInstanceMode.HOVER)) { //when active zone instance gets hover/none,dont actually change mode, just show/hide indications - instance.mode = newMode; - } - - if (newMode == ZoneInstanceMode.NONE) { - this.compositionGraphZoneUtils.hideZoneTagIndications(this._cy); - if (scope.zones[ZoneInstanceType.GROUP]) { - this.compositionGraphZoneUtils.hideGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances); - } - } - if (newMode >= ZoneInstanceMode.HOVER) { - this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, instance); - if (instance.type == ZoneInstanceType.POLICY && scope.zones[ZoneInstanceType.GROUP]) { - this.compositionGraphZoneUtils.showGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances, instance); - } - } - if (newMode >= ZoneInstanceMode.SELECTED) { - this._cy.$('node:selected').unselect(); - if (scope.activeZoneInstance && scope.activeZoneInstance != instance && newMode >= ZoneInstanceMode.SELECTED) { - scope.activeZoneInstance.mode = ZoneInstanceMode.NONE; - } - scope.activeZoneInstance = instance; - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, instance); - } - if (newMode == ZoneInstanceMode.TAG) { - this.compositionGraphZoneUtils.startCyTagMode(this._cy); - scope.zoneTagMode = scope.zones[zoneId].getTagModeId(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_START, zoneId); - } - } - }; - - scope.zoneInstanceTagged = (taggedInstance: ZoneInstance) => { - scope.activeZoneInstance.addOrRemoveAssignment(taggedInstance.instanceData.uniqueId, ZoneInstanceAssignmentType.GROUPS); - let newHandle: string = this.compositionGraphZoneUtils.getCorrectHandleForNode(taggedInstance.instanceData.uniqueId, scope.activeZoneInstance); - taggedInstance.showHandle(newHandle); - } - - scope.zoneBackgroundClicked = (): void => { - if (!scope.zoneTagMode && scope.activeZoneInstance) { - scope.unsetActiveZoneInstance(); - } - }; - - scope.zoneAssignmentSaveStart = () => { - this.LoaderService.showLoader('composition-graph'); - } - - scope.zoneAssignmentSaveComplete = (success: boolean) => { - this.LoaderService.hideLoader('composition-graph'); - if (!success) { - this.GeneralGraphUtils.showUpdateFailure(); - } - }; - - scope.unsetActiveZoneInstance = (): void => { - if (scope.activeZoneInstance) { - scope.activeZoneInstance.mode = ZoneInstanceMode.NONE; - scope.activeZoneInstance = null; - scope.zoneTagMode = null; - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED); - } - }; - }; - - - public static factory = ($q, - $log, - $timeout, - NodesFactory, - LinksGraphUtils, - GeneralGraphUtils, - ComponentInstanceFactory, - NodesGraphUtils, - EventListenerService, - ComponentFactory, - LoaderService, - CommonGraphUtils, - MatchCapabilitiesRequirementsUtils, - CompositionGraphPaletteUtils, - CompositionGraphZoneUtils, - ComponentServiceNg2, - ModalService, - ConnectionWizardService, - ComponentInstanceServiceNg2, - ServicePathGraphUtils) => { - return new CompositionGraph( - $q, - $log, - $timeout, - NodesFactory, - LinksGraphUtils, - GeneralGraphUtils, - ComponentInstanceFactory, - NodesGraphUtils, - EventListenerService, - ComponentFactory, - LoaderService, - CommonGraphUtils, - MatchCapabilitiesRequirementsUtils, - CompositionGraphPaletteUtils, - CompositionGraphZoneUtils, - ComponentServiceNg2, - ModalService, - ConnectionWizardService, - ComponentInstanceServiceNg2, - ServicePathGraphUtils); - } -} - -CompositionGraph.factory.$inject = [ - '$q', - '$log', - '$timeout', - 'NodesFactory', - 'CompositionGraphLinkUtils', - 'CompositionGraphGeneralUtils', - 'ComponentInstanceFactory', - 'CompositionGraphNodesUtils', - 'EventListenerService', - 'ComponentFactory', - 'LoaderService', - 'CommonGraphUtils', - 'MatchCapabilitiesRequirementsUtils', - 'CompositionGraphPaletteUtils', - 'CompositionGraphZoneUtils', - 'ComponentServiceNg2', - 'ModalServiceNg2', - 'ConnectionWizardServiceNg2', - 'ComponentInstanceServiceNg2', - 'ServicePathGraphUtils' -]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html deleted file mode 100644 index b473f44628..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html +++ /dev/null @@ -1,67 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ - ~ Licensed under the Apache License, Version 2.0 (the "License"); - ~ you may not use this file except in compliance with the License. - ~ You may obtain a copy of the License at - ~ - ~ http://www.apache.org/licenses/LICENSE-2.0 - ~ - ~ Unless required by applicable law or agreed to in writing, software - ~ distributed under the License is distributed on an "AS IS" BASIS, - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - ~ See the License for the specific language governing permissions and - ~ limitations under the License. - --> - - -<loader display="isLoading" loader-type="composition-graph"></loader> -<div class="sdc-composition-graph-wrapper {{zoneTagMode}}" ng-class="{'with-sidebar': withSidebar, 'view-only':isViewOnly}" - data-drop="!zoneTagMode" - data-jqyoui-options="{accept: verifyDrop}" - data-jqyoui-droppable="{onDrop:'dropCallback', beforeDrop: 'beforeDropCallback'}"> -</div> - -<!-- <relation-menu relation-menu-directive-obj="relationMenuDirectiveObj" is-link-menu-open="isLinkMenuOpen" - create-relation="createLinkFromMenu" cancel="cancelRelationMenu()"></relation-menu> --> - -<menu-list-ng2 [props]="canvasMenuProps"></menu-list-ng2> - - <div class="w-sdc-search-menu" data-ng-class="{'with-sidebar': withSidebar}"> - - <ng2-service-path-selector - ng-if="component.isService()" - [service]="component" - [draw-path]="drawPathOnCy" - [delete-paths]="deletePathsOnCy" - [selected-path-id]="selectedPathId"> - </ng2-service-path-selector> - <ng2-service-path - ng-if="component.isService()" - [service]="component" - [on-create]="createOrUpdateServicePath" - [is-view-only]="isViewOnly"> - </ng2-service-path> - <ng2-search-with-autocomplete - [search-placeholder]="'Type to search'" - [auto-complete-values]="componentInstanceNames" - (search-changed)="getAutoCompleteValues($event)" - (search-button-clicked)="highlightSearchMatches($event)" - [search-bar-class]="'composition-search'"> - </ng2-search-with-autocomplete> - <div class="zoom-icons sprite-new canvas-fit-all" data-ng-click="zoomAllWithoutSidebar()"></div> - <div class="zoom-icons sprite-new zoom-plus" data-ng-click="zoom(true)"></div> - <div class="zoom-icons sprite-new zoom-minus" data-ng-click="zoom(false)"></div> - </div> -<!--<asset-popover ng-if="assetPopoverOpen" asset-popover-obj="assetPopoverObj" delete-asset="deleteNode(assetPopoverObj.nodeId)"></asset-popover>--> -<div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" data-ng-class="{'with-sidebar': withSidebar}"> - <ng2-zone-container data-ng-repeat="zone in zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length" - [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)" (background-click)="zoneBackgroundClicked()"> - <ng2-zone-instance - data-ng-repeat="instance in zone.instances" [hidden]="instance.hidden" - [zone-instance]="instance" [default-icon-text]="zone.defaultIconText" [is-active]="activeZoneInstance == instance" [active-instance-mode]="activeZoneInstance && activeZoneInstance.mode" - [is-view-only]="isViewOnly" [force-save]="instance.forceSave" (mode-change)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)" (tag-handle-click)="zoneInstanceTagged($event)" - (assignment-save-start)="zoneAssignmentSaveStart()" (assignment-save-complete)="zoneAssignmentSaveComplete($event)"> - </ng2-zone-instance> - </ng2-zone-container> -</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less deleted file mode 100644 index 7124a4b5a6..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less +++ /dev/null @@ -1,50 +0,0 @@ -composition-graph { - display: block; - height:100%; - width: 100%; - - .sdc-composition-graph-wrapper{ - height:100%; - width: 100%; - - &.with-sidebar { - width: calc(~'100% - 300px'); - } - } - - .view-only{ - background-color:rgb(248, 248, 248); - } - - .sdc-canvas-zones__wrapper { - position: absolute; - bottom: 10px; - right: 12px; - display:flex; - transition: right 0.2s; - - &.with-sidebar { - right:310px; - } - - ng2-zone-container { - display:flex; - margin-left: 10px; - } - } - - - .group-tagging { - cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_1.svg"), pointer; - } - .group-tagging-hover { - cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_2.svg"), pointer; - } - .policy-tagging { - cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_1.svg"), pointer; - } - .policy-tagging-hover { - cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer; - } - -} diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts deleted file mode 100644 index 329af56e87..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts +++ /dev/null @@ -1,323 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import {ComponentInstance, Component, Match, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models"; -import {QueueUtils, Dictionary, GraphUIObjects} from "app/utils"; -import {LoaderService} from "app/services"; -import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils"; -import {CommonGraphUtils} from "../../common/common-graph-utils"; - - -export class CompositionGraphGeneralUtils { - - public componentRequirementsAndCapabilitiesCaching = new Dictionary<string, Component>(); - protected static graphUtilsUpdateQueue:QueueUtils; - - constructor(private $q:ng.IQService, - private LoaderService:LoaderService, - private commonGraphUtils:CommonGraphUtils, - private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils, - private Notification:any) { - CompositionGraphGeneralUtils.graphUtilsUpdateQueue = new QueueUtils(this.$q); - } - - - /** - * Get the offset for the link creation Menu - * @param point - * @returns {Cy.Position} - */ - public calcMenuOffset:Function = (point:Cy.Position):Cy.Position => { - point.x = point.x + 60; - point.y = point.y + 105; - return point; - }; - - /** - * return the top left position of the link menu - * @param cy - * @param targetNodePosition - * @returns {Cy.Position} - */ - public getLinkMenuPosition = (cy:Cy.Instance, targetNodePosition:Cy.Position) => { - let menuPosition:Cy.Position = this.calcMenuOffset(targetNodePosition); //get the link mid point - if ($(document.body).height() < menuPosition.y + GraphUIObjects.LINK_MENU_HEIGHT + $(document.getElementsByClassName('sdc-composition-graph-wrapper')).offset().top) { // if position menu is overflow bottom - menuPosition.y = $(document.body).height() - GraphUIObjects.TOP_HEADER_HEIGHT - GraphUIObjects.LINK_MENU_HEIGHT; - } - return menuPosition; - }; - - - public zoomGraphTo = (cy:Cy.Instance, zoomLevel: number):void => { - let zy = cy.height() / 2; - let zx = cy.width() / 2; - cy.zoom({ - level: zoomLevel, - renderedPosition: { x: zx, y: zy } - }); - } - - - //saves the current zoom, and then sets a temporary maximum zoom for zoomAll, and then reverts to old value - public zoomAllWithMax = (cy:Cy.Instance, maxZoom:number):void => { - - let oldMaxZoom:number = cy.maxZoom(); - - cy.maxZoom(maxZoom); - this.zoomAll(cy); - cy.maxZoom(oldMaxZoom); - - }; - - - //Zooms to fit all of the nodes in the collection passed in. If no nodes are passed in, will zoom to fit all nodes on graph - public zoomAll = (cy:Cy.Instance, nodes?:Cy.CollectionNodes):void => { - - if (!nodes || !nodes.length) { - nodes = cy.nodes(); - } - - cy.resize(); - cy.animate({ - fit: { eles: nodes, padding: 20 }, - center: { eles: nodes } - }, { duration: 400 }); - }; - - /** - * will return true/false if two nodes overlapping - * - * @param graph node - */ - private isNodesOverlapping(node:Cy.CollectionFirstNode, draggedNode:Cy.CollectionFirstNode):boolean { - - let nodeBoundingBox:Cy.BoundingBox = node.renderedBoundingBox(); - let secondNodeBoundingBox:Cy.BoundingBox = draggedNode.renderedBoundingBox(); - - return this.isBBoxOverlapping(nodeBoundingBox, secondNodeBoundingBox); - } - - /** - * Checks whether the bounding boxes of two nodes are overlapping on any side - * @param nodeOneBBox - * @param nodeTwoBBox - * @returns {boolean} - */ - private isBBoxOverlapping(nodeOneBBox:Cy.BoundingBox, nodeTwoBBox:Cy.BoundingBox) { - return (((nodeOneBBox.x1 < nodeTwoBBox.x1 && nodeOneBBox.x2 > nodeTwoBBox.x1) || - (nodeOneBBox.x1 < nodeTwoBBox.x2 && nodeOneBBox.x2 > nodeTwoBBox.x2) || - (nodeTwoBBox.x1 < nodeOneBBox.x1 && nodeTwoBBox.x2 > nodeOneBBox.x2)) && - ((nodeOneBBox.y1 < nodeTwoBBox.y1 && nodeOneBBox.y2 > nodeTwoBBox.y1) || - (nodeOneBBox.y1 < nodeTwoBBox.y2 && nodeOneBBox.y2 > nodeTwoBBox.y2) || - (nodeTwoBBox.y1 < nodeOneBBox.y1 && nodeTwoBBox.y2 > nodeOneBBox.y2))) - } - - - /** - * Checks whether a specific component instance can be hosted on the UCPE instance - * @param cy - Cytoscape instance - * @param fromUcpeInstance - * @param toComponentInstance - * @returns {Match} - */ - public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):Match { - - let matches:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy)); - let hostedOnMatch:Match = _.find(matches, (match:Match) => { - return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container'; - }); - - return hostedOnMatch; - }; - - - /** - * Checks whether node can be dropped into UCPE - * @param cy - * @param nodeToInsert - * @param ucpeNode - * @returns {boolean} - */ - private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean { - - let hostedOnMatch:Match = this.canBeHostedOn(cy, ucpeNode, nodeToInsert); - let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation - return result; - - }; - - - /** - * For drops from palette, checks whether the node can be dropped. If node is being held over another node, check if capable of hosting - * @param cy - * @param pseudoNodeBBox - * @param paletteComponentInstance - * @returns {boolean} - */ - public isPaletteDropValid(cy:Cy.Instance, pseudoNodeBBox:Cy.BoundingBox, paletteComponentInstance:ComponentInstance) { - - let componentIsUCPE:boolean = (paletteComponentInstance.capabilities && paletteComponentInstance.capabilities['tosca.capabilities.Container'] && paletteComponentInstance.name.toLowerCase().indexOf('ucpe') > -1); - - if (componentIsUCPE && cy.nodes('[?isUcpe]').length > 0) { //second UCPE not allowed - return false; - } - - let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { - - if (this.isBBoxOverlapping(pseudoNodeBBox, graphNode.renderedBoundingBox())) { - if (!componentIsUCPE && graphNode.data().isUcpe) { - return !this.isValidDropInsideUCPE(cy, paletteComponentInstance, graphNode.data().componentInstance); //if this is valid insert into ucpe, we return false - no illegal overlapping nodes - } - return true; - } - - return false; - }); - - return illegalOverlappingNodes.length === 0; - } - - /** - * will return true/false if a drop of a single node is valid - * - * @param graph node - */ - public isValidDrop(cy:Cy.Instance, draggedNode:Cy.CollectionFirstNode):boolean { - - let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { //all sdc nodes, removing child nodes (childe node allways collaps - - if (draggedNode.data().isUcpe && (graphNode.isChild() || graphNode.data().isInsideGroup)) { //ucpe cps always inside ucpe, no overlapping - return false; - } - if (draggedNode.data().isInsideGroup && (!draggedNode.active() || graphNode.data().isUcpe)) { - return false; - } - - if (!draggedNode.data().isUcpe && !(draggedNode.data() instanceof CompositionCiNodeUcpeCp) && graphNode.data().isUcpe) { //case we are dragging a node into UCPE - let isEntirelyInUCPE:boolean = this.commonGraphUtils.isFirstBoxContainsInSecondBox(draggedNode.renderedBoundingBox(), graphNode.renderedBoundingBox()); - if (isEntirelyInUCPE) { - if (this.isValidDropInsideUCPE(cy, draggedNode.data().componentInstance, graphNode.data().componentInstance)) { //if this is valid insert into ucpe, we return false - no illegal overlapping nodes - return false; - } - } - } - return graphNode.data().id !== draggedNode.data().id && this.isNodesOverlapping(draggedNode, graphNode); - - }); - // return false; - return illegalOverlappingNodes.length === 0; - }; - - /** - * will return true/false if the move of the nodes is valid (no node overlapping and verifying if insert into UCPE is valid) - * - * @param nodesArray - the selected drags nodes - */ - public isGroupValidDrop(cy:Cy.Instance, nodesArray:Cy.CollectionNodes):boolean { - let filterDraggedNodes = nodesArray.filter('[?isDraggable]'); - let isValidDrop = _.every(filterDraggedNodes, (node:Cy.CollectionFirstNode) => { - return this.isValidDrop(cy, node); - - }); - return isValidDrop; - }; - - /** - * get all links in diagram - * @param cy - * @returns {any[]|boolean[]} - */ - public getAllCompositionCiLinks = (cy:Cy.Instance):Array<CompositionCiLinkBase> => { - return _.map(cy.edges("[isSdcElement]"), (edge:Cy.CollectionEdges) => { - return edge.data(); - }); - }; - - - public showPolicyUpdateSuccess = () => { - this.Notification.success({ - message: "Policy Updated", - title: "Success" - }); - } - - public showGroupUpdateSuccess = () => { - this.Notification.success({ - message: "Group Updated", - title: "Success" - }); - } - - public showUpdateFailure = () => { - this.Notification.error({ - message: "Update Failed", - title: "Error" - }); - }; - - /** - * Get Graph Utils server queue - * @returns {QueueUtils} - */ - public getGraphUtilsServerUpdateQueue():QueueUtils { - return CompositionGraphGeneralUtils.graphUtilsUpdateQueue; - } - ; - - /** - * - * @param blockAction - true/false if this is a block action - * @param instances - * @param component - */ - public pushMultipleUpdateComponentInstancesRequestToQueue = (blockAction:boolean, instances:Array<ComponentInstance>, component:Component):void => { - if (blockAction) { - this.getGraphUtilsServerUpdateQueue().addBlockingUIAction( - () => component.updateMultipleComponentInstances(instances) - ); - } else { - this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction( - () => component.updateMultipleComponentInstances(instances), - () => this.LoaderService.hideLoader('composition-graph')); - } - }; - - /** - * this function will update component instance data - * @param blockAction - true/false if this is a block action - * @param updatedInstance - */ - public pushUpdateComponentInstanceActionToQueue = (component:Component, blockAction:boolean, updatedInstance:ComponentInstance):void => { - - if (blockAction) { - this.LoaderService.showLoader('composition-graph'); - this.getGraphUtilsServerUpdateQueue().addBlockingUIAction( - () => component.updateComponentInstance(updatedInstance) - ); - } else { - this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction( - () => component.updateComponentInstance(updatedInstance), - () => this.LoaderService.hideLoader('composition-graph')); - } - }; -} - -CompositionGraphGeneralUtils.$inject = ['$q', 'LoaderService', 'CommonGraphUtils', 'MatchCapabilitiesRequirementsUtils', 'Notification']; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts deleted file mode 100644 index 705367c5f7..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts +++ /dev/null @@ -1,301 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by obarda on 6/28/2016. - */ -import * as _ from "lodash"; -import {GraphUIObjects} from "app/utils"; -import {LoaderService} from "app/services"; -import { - NodeUcpe, - CompositionCiNodeVf, - Match, - CompositionCiNodeBase, - RelationshipModel, - ConnectRelationModel, - LinksFactory, - Component, - LinkMenu, - Point, - CompositionCiLinkBase -} from "app/models"; -import {CommonGraphUtils} from "../../common/common-graph-utils"; -import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils"; -import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils"; -import {CompositionCiServicePathLink} from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; - -export class CompositionGraphLinkUtils { - - constructor(private linksFactory:LinksFactory, - private loaderService:LoaderService, - private generalGraphUtils:CompositionGraphGeneralUtils, - private commonGraphUtils:CommonGraphUtils, - private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils) { - } - - - /** - * Delete the link on server and then remove it from graph - * @param component - * @param releaseLoading - true/false release the loader when finished - * @param link - the link to delete - */ - public deleteLink = (cy:Cy.Instance, component:Component, releaseLoading:boolean, link:Cy.CollectionEdges) => { - - this.loaderService.showLoader('composition-graph'); - let onSuccessDeleteRelation = (response) => { - cy.remove(link); - }; - - if (!releaseLoading) { - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction( - () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation) - ); - } else { - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( - () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation), - () => this.loaderService.hideLoader('composition-graph')); - } - }; - - /** - * create the link on server and than draw it on graph - * @param link - the link to create - * @param cy - * @param component - */ - public createLink = (link:CompositionCiLinkBase, cy:Cy.Instance, component:Component):void => { - - this.loaderService.showLoader('composition-graph'); - - let onSuccess:(response:RelationshipModel) => void = (relation:RelationshipModel) => { - link.setRelation(relation); - this.commonGraphUtils.insertLinkToGraph(cy, link, component.getRelationRequirementCapability.bind(component)); - }; - - link.updateLinkDirection(); - - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( - () => component.createRelation(link.relation).then(onSuccess), - () => this.loaderService.hideLoader('composition-graph') - ); - }; - - private createSimpleLink = (match:Match, cy:Cy.Instance, component:Component):void => { - let newRelation:RelationshipModel = match.matchToRelationModel(); - let linkObg:CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]); - this.createLink(linkObg, cy, component); - }; - - public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Match, component:Component):void => { - - if (chosenMatch) { - if (chosenMatch && chosenMatch instanceof Match) { - this.createSimpleLink(chosenMatch, cy, component); - } - } - }; - - - /** - * Filters the matches for UCPE links so that shown requirements and capabilites are only related to the selected ucpe-cp - * @param fromNode - * @param toNode - * @param matchesArray - * @returns {Array<MatchBase>} - */ - public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<Match>):any { - - let matchLink:Array<Match>; - - if (fromNode.isUcpePart) { - matchLink = _.filter(matchesArray, (match:Match) => { - return match.isOwner(fromNode.id); - }); - } - - if (toNode.isUcpePart) { - matchLink = _.filter(matchesArray, (match:Match) => { - return match.isOwner(toNode.id); - }); - } - return matchLink ? matchLink : matchesArray; - } - - - /** - * open the connect link menu if the link drawn is valid - match requirements & capabilities - * @param cy - * @param fromNode - * @param toNode - * @returns {any} - */ - public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):ConnectRelationModel { - - if (!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)) { - return null; - } - let linkModel:Array<CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy); - - let possibleRelations:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance, - toNode.data().componentInstance, linkModel); - - //filter relations found to limit to specific ucpe-cp - possibleRelations = this.filterUcpeLinks(fromNode.data(), toNode.data(), possibleRelations); - - //if found possibleRelations between the nodes we create relation menu directive and open the link menu - if (possibleRelations.length) { - // let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint()); - return new ConnectRelationModel(fromNode.data(), toNode.data(), possibleRelations); - } - return null; - }; - - - /** - * when we drag instance in to UCPE or out of UCPE - get all links we need to delete - one node in ucpe and one node outside of ucpe - * @param node - the node we dragged into or out of the ucpe - */ - public deleteLinksWhenNodeMovedFromOrToUCPE(component:Component, cy:Cy.Instance, nodeMoved:Cy.CollectionNodes, vlsPendingDeletion?:Cy.CollectionNodes):void { - - - let linksToDelete:Cy.CollectionElements = cy.collection(); - _.forEach(nodeMoved.neighborhood('node'), (neighborNode)=> { - - if (neighborNode.data().isUcpePart) { //existing connections to ucpe or ucpe-cp - we want to delete even though nodeLocationsCompatible will technically return true - linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); // This will delete the ucpe-host-link, or the vl-ucpe-link if nodeMoved is vl - } else if (!this.commonGraphUtils.nodeLocationsCompatible(cy, nodeMoved, neighborNode)) { //connection to regular node or vl - check if locations are compatible - if (!vlsPendingDeletion || !vlsPendingDeletion.intersect(neighborNode).length) { //Check if this is a link to a VL pending deletion, to prevent double deletion of between the node moved and vl - linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); - } - } - }); - - linksToDelete.each((i, link)=> { - this.deleteLink(cy, component, false, link); - }); - - }; - - /** - * Creates a hostedOn link between a VF and UCPE - * @param component - * @param cy - * @param ucpeNode - * @param vfNode - */ - public createVfToUcpeLink = (component:Component, cy:Cy.Instance, ucpeNode:NodeUcpe, vfNode:CompositionCiNodeVf):void => { - let hostedOnMatch:Match = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance); - /* create relation */ - let newRelation = new RelationshipModel(); - newRelation.fromNode = ucpeNode.id; - newRelation.toNode = vfNode.id; - - let link:CompositionCiLinkBase = this.linksFactory.createUcpeHostLink(newRelation); - link.relation = hostedOnMatch.matchToRelationModel(); - this.createLink(link, cy, component); - }; - - private handlePathLink(cy:Cy.Instance, event:Cy.EventObject) { - let linkData = event.cyTarget.data(); - let selectedPathId = linkData.pathId; - let pathEdges = cy.collection(`[pathId='${selectedPathId}']`); - if (pathEdges.length > 1) { - setTimeout(() => { - pathEdges.select(); - }, 0); - } - } - - private handleVLLink(event:Cy.EventObject) { - let vl:Cy.CollectionNodes = event.cyTarget[0].target('.vl-node'); - let connectedEdges:Cy.CollectionEdges = vl.connectedEdges(`[type!="${CompositionCiServicePathLink.LINK_TYPE}"]`); - if (vl.length && connectedEdges.length > 1) { - setTimeout(() => { - vl.select(); - connectedEdges.select(); - }, 0); - } - } - - - /** - * Handles click event on links. - * If one edge selected: do nothing. - * Two or more edges: first click - select all, secondary click - select single. - * @param cy - * @param event - */ - public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) { - if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) { - cy.$(':selected').unselect(); - } else { - if (event.cyTarget[0].data().type === CompositionCiServicePathLink.LINK_TYPE) { - this.handlePathLink(cy, event); - } - else { - this.handleVLLink(event); - } - } - } - - - /** - * Calculates the position for the menu that modifies an existing link - * @param event - * @param elementWidth - * @param elementHeight - * @returns {Point} - */ - public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point { - let point:Point = new Point(event.originalEvent.clientX, event.originalEvent.clientY); - if (event.originalEvent.view.screen.height - elementHeight < point.y) { - point.y = event.originalEvent.view.screen.height - elementHeight; - } - if (event.originalEvent.view.screen.width - elementWidth < point.x) { - point.x = event.originalEvent.view.screen.width - elementWidth; - } - return point; - }; - - - /** - * Gets the menu that is displayed when you click an existing link. - * @param link - * @param event - * @returns {LinkMenu} - */ - public getModifyLinkMenu(link:Cy.CollectionFirstEdge, event:Cy.EventObject):LinkMenu { - let point:Point = this.calculateLinkMenuPosition(event, GraphUIObjects.MENU_LINK_VL_WIDTH_OFFSET, GraphUIObjects.MENU_LINK_VL_HEIGHT_OFFSET); - let menu:LinkMenu = new LinkMenu(point, true, link); - return menu; - }; - -} - - -CompositionGraphLinkUtils.$inject = [ - 'LinksFactory', - 'LoaderService', - 'CompositionGraphGeneralUtils', - 'CommonGraphUtils', - 'MatchCapabilitiesRequirementsUtils' -]; 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 deleted file mode 100644 index c6c732b7df..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts +++ /dev/null @@ -1,277 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -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'; -/** - * 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) { - - } - - /** - * Returns component instances for all nodes passed in - * @param nodes - Cy nodes - * @returns {any[]} - */ - public getAllNodesData(nodes: Cy.CollectionNodes) { - return _.map(nodes, (node: Cy.CollectionFirstNode) => { - return node.data(); - }) - }; - - - public highlightMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string) => { - - cy.batch(() => { - 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 - public getMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string): Cy.CollectionNodes => { - return cy.nodes("[name @^= '" + nameToMatch + "']"); - }; - - /** - * Deletes component instances on server and then removes it from the graph as well - * @param cy - * @param component - * @param nodeToDelete - */ - public deleteNode(cy: Cy.Instance, component: Component, nodeToDelete: Cy.CollectionNodes): void { - - this.loaderService.showLoader('composition-graph'); - 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) => { - 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<Cy.CollectionFirstNode> = this.getConnectedVlToNode(nodeToDelete); - this.handleConnectedVlsToDelete(connectedVls); - } - - // check whether there is a service path going through this node, and if so clean it from the graph. - let nodeId = nodeToDelete.data().id; - let connectedPathLinks = cy.collection(`[type="${CompositionCiServicePathLink.LINK_TYPE}"][source="${nodeId}"], [type="${CompositionCiServicePathLink.LINK_TYPE}"][target="${nodeId}"]`); - _.forEach(connectedPathLinks, (link, key) => { - cy.remove(`[pathId="${link.data().pathId}"]`); - }); - - // update service path list - this.serviceService.getComponentCompositionData(component).subscribe((response: ServiceGenericResponse) => { - (<Service>component).forwardingPaths = response.forwardingPaths; - }); - - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, nodeId); - - //update UI - cy.remove(nodeToDelete); - }; - - let onFailed: (response: any) => void = (response: any) => { - console.info('onFailed', response); - }; - - - this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( - () => component.deleteComponentInstance(nodeToDelete.data().componentInstance.uniqueId).then(onSuccess, onFailed), - () => this.loaderService.hideLoader('composition-graph') - ); - - }; - - /** - * Finds all VLs connected to a single node - * @param node - * @returns {Array<Cy.CollectionFirstNode>} - */ - public getConnectedVlToNode = (node: Cy.CollectionNodes): Array<Cy.CollectionFirstNode> => { - let connectedVls: Array<Cy.CollectionFirstNode> = new Array<Cy.CollectionFirstNode>(); - _.forEach(node.connectedEdges().connectedNodes(), (node: Cy.CollectionFirstNode) => { - if (node.data() instanceof CompositionCiNodeVl) { - connectedVls.push(node); - } - }); - return connectedVls; - }; - - - /** - * Delete all VLs that have only two connected nodes (this function is called when deleting a node) - * @param connectedVls - */ - public handleConnectedVlsToDelete = (connectedVls: Array<Cy.CollectionFirstNode>) => { - _.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); - } - }); - }; - - - /** - * This function is called when moving a node in or out of UCPE. - * Deletes all connected VLs that have less than 2 valid connections remaining after the move - * Returns the collection of vls that are in the process of deletion (async) to prevent duplicate calls while deletion is in progress - * @param component - * @param cy - * @param node - node that was moved in/out of ucpe - */ - public deleteNodeVLsUponMoveToOrFromUCPE = (component: Component, cy: Cy.Instance, node: Cy.CollectionNodes): Cy.CollectionNodes => { - if (node.data() instanceof CompositionCiNodeVl) { - return; - } - - let connectedVLsToDelete: Cy.CollectionNodes = cy.collection(); - _.forEach(node.neighborhood('node'), (connectedNode) => { - - //Find all neighboring nodes that are VLs - if (connectedNode.data() instanceof CompositionCiNodeVl) { - - //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) => { - if (this.commonGraphUtils.nodeLocationsCompatible(cy, connectedNode, vlNeighborNode)) { - compatibleNodeCount++; - } - }); - - if (compatibleNodeCount < 2) { - connectedVLsToDelete = connectedVLsToDelete.add(connectedNode); - } - } - }); - - connectedVLsToDelete.each((i, vlToDelete: Cy.CollectionNodes) => { - this.deleteNode(cy, component, vlToDelete); - }); - return connectedVLsToDelete; - }; - - /** - * This function will update nodes position. if the new position is into or out of ucpe, the node will trigger the ucpe events - * @param cy - * @param component - * @param nodesMoved - the node/multiple nodes now moved by the user - */ - public onNodesPositionChanged = (cy: Cy.Instance, component: Component, nodesMoved: Cy.CollectionNodes): void => { - - if (nodesMoved.length === 0) { - return; - } - - let isValidMove: boolean = this.GeneralGraphUtils.isGroupValidDrop(cy, nodesMoved); - if (isValidMove) { - - this.$log.debug(`composition-graph::ValidDrop:: updating node position`); - let instancesToUpdateInNonBlockingAction: Array<ComponentInstance> = new Array<ComponentInstance>(); - - _.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); - node.data().componentInstance.updatePosition(newPosition.x, newPosition.y); - - //check if node moved to or from UCPE - let ucpe = this.commonGraphUtils.isInUcpe(node.cy(), node.boundingbox()); - if (node.data().isInsideGroup || ucpe.length) { - this.handleUcpeChildMove(node, ucpe, instancesToUpdateInNonBlockingAction); - } else { - instancesToUpdateInNonBlockingAction.push(node.data().componentInstance); - } - - }); - - if (instancesToUpdateInNonBlockingAction.length > 0) { - this.GeneralGraphUtils.pushMultipleUpdateComponentInstancesRequestToQueue(false, instancesToUpdateInNonBlockingAction, component); - } - } else { - this.$log.debug(`composition-graph::notValidDrop:: node return to latest position`); - //reset nodes position - nodesMoved.positions((i, node) => { - return { - x: +node.data().componentInstance.posX, - y: +node.data().componentInstance.posY - }; - }) - } - - this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(() => { - }, () => { - this.loaderService.hideLoader('composition-graph'); - }); - - }; - - /** - * Checks whether the node has been added or removed from UCPE and triggers appropriate events - * @param node - node moved - * @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<ComponentInstance>) { - - if (node.data().isInsideGroup) { - if (ucpeContainer.length) { //moving node within UCPE. Simply update position - this.commonGraphUtils.updateUcpeChildPosition(<Cy.CollectionNodes>node, ucpeContainer); - instancesToUpdateInNonBlockingAction.push(node.data().componentInstance); - } else { //removing node from UCPE. Notify observers - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, ucpeContainer); - } - } else if (!node.data().isInsideGroup && ucpeContainer.length && !node.data().isUcpePart) { //adding node to UCPE - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, node, ucpeContainer, true); - } - } - -} - - -CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService', 'ServiceServiceNg2' /*, 'sdcMenu', 'ModalsHandler'*/] - diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts deleted file mode 100644 index 10d0d42922..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts +++ /dev/null @@ -1,183 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { EventListenerService, LoaderService } from "app/services"; -import { CapabilitiesGroup, NodesFactory, ComponentInstance, Component, CompositionCiNodeBase, RequirementsGroup } from "app/models"; -import { ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects } from "app/utils"; -import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils"; -import { CommonGraphUtils } from "../../common/common-graph-utils"; -import 'sdc-angular-dragdrop'; -import { LeftPaletteComponent } from "../../../../models/components/displayComponent"; - -export class CompositionGraphPaletteUtils { - - constructor(private ComponentFactory: ComponentFactory, - private $filter: ng.IFilterService, - private loaderService: LoaderService, - private generalGraphUtils: CompositionGraphGeneralUtils, - private componentInstanceFactory: ComponentInstanceFactory, - private nodesFactory: NodesFactory, - private commonGraphUtils: CommonGraphUtils, - private eventListenerService: EventListenerService) { - } - - /** - * Calculate the dragged element (html element) position on canvas - * @param cy - * @param event - * @param position - * @returns {Cy.BoundingBox} - * @private - */ - private _getNodeBBox(cy: Cy.Instance, event: IDragDropEvent, position?: Cy.Position) { - let bbox = <Cy.BoundingBox>{}; - if (!position) { - position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event); - } - let cushionWidth: number = 40; - let cushionHeight: number = 40; - - bbox.x1 = position.x - cushionWidth / 2; - bbox.y1 = position.y - cushionHeight / 2; - bbox.x2 = position.x + cushionWidth / 2; - bbox.y2 = position.y + cushionHeight / 2; - return bbox; - } - - /** - * Create the component instance, update data from parent component in the left palette and notify on_insert_to_ucpe if component was dragg into ucpe - * @param cy - * @param fullComponent - * @param event - * @param component - */ - private _createComponentInstanceOnGraphFromPaletteComponent(cy: Cy.Instance, fullComponent: LeftPaletteComponent, event: IDragDropEvent, component: Component) { - - let componentInstanceToCreate: ComponentInstance = this.componentInstanceFactory.createComponentInstanceFromComponent(fullComponent); - let cytoscapePosition: Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event); - - componentInstanceToCreate.posX = cytoscapePosition.x; - componentInstanceToCreate.posY = cytoscapePosition.y; - - - let onFailedCreatingInstance: (error: any) => void = (error: any) => { - this.loaderService.hideLoader('composition-graph'); - }; - - //on success - update node data - let onSuccessCreatingInstance = (createInstance: ComponentInstance): void => { - - this.loaderService.hideLoader('composition-graph'); - - createInstance.name = this.$filter('resourceName')(createInstance.name); - createInstance.requirements = new RequirementsGroup(createInstance.requirements); - createInstance.capabilities = new CapabilitiesGroup(createInstance.capabilities); - createInstance.componentVersion = fullComponent.version; - createInstance.icon = fullComponent.icon; - createInstance.setInstanceRC(); - - let newNode: CompositionCiNodeBase = this.nodesFactory.createNode(createInstance); - let cyNode: Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode); - - //check if node was dropped into a UCPE - let ucpe: Cy.CollectionElements = this.commonGraphUtils.isInUcpe(cy, cyNode.boundingbox()); - if (ucpe.length > 0) { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false); - } - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE); - - }; - - this.loaderService.showLoader('composition-graph'); - - // Create the component instance on server - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => { - component.createComponentInstance(componentInstanceToCreate).then(onSuccessCreatingInstance, onFailedCreatingInstance); - }); - } - - /** - * Thid function applay red/green background when component dragged from palette - * @param cy - * @param event - * @param dragElement - * @param dragComponent - */ - public onComponentDrag(cy: Cy.Instance, event: IDragDropEvent, dragElement: JQuery, dragComponent: ComponentInstance) { - - if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop - dragElement.removeClass('red'); - return; - } - - let offsetPosition = { - x: event.clientX - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET, - y: event.clientY - GraphUIObjects.DIAGRAM_HEADER_OFFSET - }; - let bbox = this._getNodeBBox(cy, event, offsetPosition); - - if (this.generalGraphUtils.isPaletteDropValid(cy, bbox, dragComponent)) { - dragElement.removeClass('red'); - } else { - dragElement.addClass('red'); - } - } - - /** - * This function is called when after dropping node on canvas - * Check if the capability & requirements fulfilled and if not get from server - * @param cy - * @param event - * @param component - */ - public addNodeFromPalette(cy: Cy.Instance, event: IDragDropEvent, component: Component) { - this.loaderService.showLoader('composition-graph'); - - let draggedComponent: LeftPaletteComponent = event.dataTransfer.component; - - if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) { - let fullComponent = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId); - draggedComponent.capabilities = fullComponent.capabilities; - draggedComponent.requirements = fullComponent.requirements; - this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component); - - } else { - - this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId) - .then((fullComponent: Component) => { - draggedComponent.capabilities = fullComponent.capabilities; - draggedComponent.requirements = fullComponent.requirements; - this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component); - }); - } - } -} - - -CompositionGraphPaletteUtils.$inject = [ - 'ComponentFactory', - '$filter', - 'LoaderService', - 'CompositionGraphGeneralUtils', - 'ComponentInstanceFactory', - 'NodesFactory', - 'CommonGraphUtils', - 'EventListenerService' -]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts deleted file mode 100644 index 48befef22d..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts +++ /dev/null @@ -1,86 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { LoaderService } from "app/services"; -import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils"; -import { ICompositionGraphScope } from "../composition-graph.directive"; -import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service'; -import { Service } from "../../../../models/components/service"; -import { ForwardingPath } from "app/models/forwarding-path"; -import { ForwardingPathLink } from "app/models/forwarding-path-link"; -import { CompositionCiServicePathLink } from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; -import { CommonGraphUtils } from "app/directives/graphs-v2/common/common-graph-utils"; - -export class ServicePathGraphUtils { - - constructor( - private loaderService: LoaderService, - private generalGraphUtils: CompositionGraphGeneralUtils, - private serviceService: ServiceServiceNg2, - private commonGraphUtils: CommonGraphUtils - ) { } - - public deletePathsFromGraph(cy: Cy.Instance, service: Service) { - cy.remove(`[type="${CompositionCiServicePathLink.LINK_TYPE}"]`); - } - - public drawPath(cy: Cy.Instance, forwardingPath: ForwardingPath, service: Service) { - let pathElements = forwardingPath.pathElements.listToscaDataDefinition; - - _.forEach(pathElements, (link: ForwardingPathLink) => { - let data: CompositionCiServicePathLink = new CompositionCiServicePathLink(link); - data.source = _.find( - service.componentInstances, - instance => instance.name === data.forwardingPathLink.fromNode - ).uniqueId; - data.target = _.find( - service.componentInstances, - instance => instance.name === data.forwardingPathLink.toNode - ).uniqueId; - data.pathId = forwardingPath.uniqueId; - data.pathName = forwardingPath.name; - this.commonGraphUtils.insertServicePathLinkToGraph(cy, data); - }); - } - - public createOrUpdateServicePath = (scope: ICompositionGraphScope, path: any): void => { - let service = <Service>scope.component; - this.loaderService.showLoader('composition-graph'); - - let onSuccess: (response: ForwardingPath) => void = (response: ForwardingPath) => { - - service.forwardingPaths[response.uniqueId] = response; - scope.selectedPathId = response.uniqueId; - }; - - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( - () => this.serviceService.createOrUpdateServicePath(service, path).subscribe(onSuccess), - () => this.loaderService.hideLoader('composition-graph') - ); - }; -} - -ServicePathGraphUtils.$inject = [ - 'LoaderService', - 'CompositionGraphGeneralUtils', - 'ServiceServiceNg2', - 'CommonGraphUtils' -]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts deleted file mode 100644 index cf6c7e3bd6..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts +++ /dev/null @@ -1,195 +0,0 @@ -import { PolicyInstance } from "app/models/graph/zones/policy-instance"; -import { ZoneInstance, ZoneInstanceType, ZoneInstanceAssignmentType } from "app/models/graph/zones/zone-instance"; -import { Zone } from "app/models/graph/zones/zone"; -import { DynamicComponentService } from "app/ng2/services/dynamic-component.service"; -import { PaletteAnimationComponent } from "app/ng2/components/ui/palette-animation/palette-animation.component"; -import { Point, LeftPaletteMetadataTypes, Component } from "../../../../models"; -import { CanvasHandleTypes } from "app/utils"; -import { PoliciesService } from "../../../../ng2/services/policies.service"; -import { Observable } from "rxjs"; -import { GroupsService } from "../../../../ng2/services/groups.service"; -import { GroupInstance } from "app/models/graph/zones/group-instance"; - - -export class CompositionGraphZoneUtils { - - constructor(private dynamicComponentService: DynamicComponentService, - private policiesService: PoliciesService, - private groupsService: GroupsService) { - } - - - public createCompositionZones = (): Array<Zone> => { - let zones: Array<Zone> = []; - - zones[ZoneInstanceType.POLICY] = new Zone('Policies', 'P', ZoneInstanceType.POLICY); - zones[ZoneInstanceType.GROUP] = new Zone('Groups', 'G', ZoneInstanceType.GROUP); - - return zones; - } - - public showZone = (zone: Zone): void => { - zone.visible = true; - zone.minimized = false; - } - - public getZoneTypeForPaletteComponent = (componentCategory: LeftPaletteMetadataTypes) => { - if (componentCategory == LeftPaletteMetadataTypes.Group) { - return ZoneInstanceType.GROUP; - } else if (componentCategory == LeftPaletteMetadataTypes.Policy) { - return ZoneInstanceType.POLICY; - } - }; - - public initZoneInstances(zones: Array<Zone>, component: Component) { - if (component.groupInstances && component.groupInstances.length) { - this.showZone(zones[ZoneInstanceType.GROUP]); - _.forEach(component.groupInstances, (group: GroupInstance) => { - let newInstance = new ZoneInstance(group, component); - this.addInstanceToZone(zones[ZoneInstanceType.GROUP], newInstance); - }); - } - - if (component.policies && component.policies.length) { - this.showZone(zones[ZoneInstanceType.POLICY]); - _.forEach(component.policies, (policy: PolicyInstance) => { - let newInstance = new ZoneInstance(policy, component); - this.addInstanceToZone(zones[ZoneInstanceType.POLICY], newInstance); - - }); - } - } - - public findAndUpdateZoneInstanceData(zones: Array<Zone>, instanceData: PolicyInstance | GroupInstance) { - _.forEach(zones, (zone: Zone) => { - _.forEach(zone.instances, (zoneInstance: ZoneInstance) => { - if (zoneInstance.instanceData.uniqueId === instanceData.uniqueId) { - zoneInstance.updateInstanceData(instanceData); - } - }); - }); - } - - public updateTargetsOrMembersOnCanvasDelete = (canvasNodeID: string, zones: Array<Zone>, type: ZoneInstanceAssignmentType): void => { - _.forEach(zones, (zone) => { - _.forEach(zone.instances, (zoneInstance: ZoneInstance) => { - if (zoneInstance.isAlreadyAssigned(canvasNodeID)) { - zoneInstance.addOrRemoveAssignment(canvasNodeID, type); - //remove it from our list of BE targets and members as well (so that it will not be sent in future calls to BE). - zoneInstance.instanceData.setSavedAssignments(zoneInstance.assignments); - } - }); - }); - }; - - public createZoneInstanceFromLeftPalette = (zoneType: ZoneInstanceType, component: Component, paletteComponentType: string): Observable<ZoneInstance> => { - if (zoneType === ZoneInstanceType.POLICY) { - return this.policiesService.createPolicyInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => { - let newInstance = new PolicyInstance(response); - component.policies.push(newInstance); - return new ZoneInstance(newInstance, component); - }); - } else if (zoneType === ZoneInstanceType.GROUP) { - return this.groupsService.createGroupInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => { - let newInstance = new GroupInstance(response); - component.groupInstances.push(newInstance); - return new ZoneInstance(newInstance, component); - }); - } - } - - public addInstanceToZone(zone: Zone, instance: ZoneInstance, hide?: boolean) { - if (hide) { - instance.hidden = true; - } - zone.instances.push(instance); - - }; - - private findZoneCoordinates(zoneType): Point { - let point: Point = new Point(0, 0); - let zone = angular.element(document.querySelector('.' + zoneType + '-zone')); - let wrapperZone = zone.offsetParent(); - point.x = zone.prop('offsetLeft') + wrapperZone.prop('offsetLeft'); - point.y = zone.prop('offsetTop') + wrapperZone.prop('offsetTop'); - return point; - } - - public createPaletteToZoneAnimation = (startPoint: Point, zoneType: ZoneInstanceType, newInstance: ZoneInstance) => { - let zoneTypeName = ZoneInstanceType[zoneType].toLowerCase(); - let paletteToZoneAnimation = this.dynamicComponentService.createDynamicComponent(PaletteAnimationComponent); - paletteToZoneAnimation.instance.from = startPoint; - paletteToZoneAnimation.instance.type = zoneType; - paletteToZoneAnimation.instance.to = this.findZoneCoordinates(zoneTypeName); - paletteToZoneAnimation.instance.zoneInstance = newInstance; - paletteToZoneAnimation.instance.iconName = zoneTypeName; - paletteToZoneAnimation.instance.runAnimation(); - } - - public startCyTagMode = (cy: Cy.Instance) => { - cy.autolock(true); - cy.nodes().unselectify(); - cy.emit('tagstart'); //dont need to show handles because they're already visible bcz of hover event - - }; - - public endCyTagMode = (cy: Cy.Instance) => { - cy.emit('tagend'); - cy.nodes().selectify(); - cy.autolock(false); - }; - - public handleTagClick = (cy: Cy.Instance, zoneInstance: ZoneInstance, nodeId: string) => { - zoneInstance.addOrRemoveAssignment(nodeId, ZoneInstanceAssignmentType.COMPONENT_INSTANCES); - this.showZoneTagIndicationForNode(nodeId, zoneInstance, cy); - }; - - public showGroupZoneIndications = (groupInstances: Array<ZoneInstance>, policyInstance: ZoneInstance) => { - groupInstances.forEach((groupInstance: ZoneInstance) => { - let handle: string = this.getCorrectHandleForNode(groupInstance.instanceData.uniqueId, policyInstance); - groupInstance.showHandle(handle); - }) - }; - - public hideGroupZoneIndications = (instances: Array<ZoneInstance>) => { - instances.forEach((instance) => { - instance.hideHandle(); - }) - } - - public showZoneTagIndications = (cy: Cy.Instance, zoneInstance: ZoneInstance) => { - - cy.nodes().forEach(node => { - let handleType: string = this.getCorrectHandleForNode(node.id(), zoneInstance); - cy.emit('showhandle', [node, handleType]); - }); - }; - - public showZoneTagIndicationForNode = (nodeId: string, zoneInstance: ZoneInstance, cy: Cy.Instance) => { - let node = cy.getElementById(nodeId); - let handleType: string = this.getCorrectHandleForNode(nodeId, zoneInstance); - cy.emit('showhandle', [node, handleType]); - } - - public hideZoneTagIndications = (cy: Cy.Instance) => { - cy.emit('hidehandles'); - }; - - public getCorrectHandleForNode = (nodeId: string, zoneInstance: ZoneInstance): string => { - if (zoneInstance.isAlreadyAssigned(nodeId)) { - if (zoneInstance.type == ZoneInstanceType.POLICY) { - return CanvasHandleTypes.TAGGED_POLICY; - } else { - return CanvasHandleTypes.TAGGED_GROUP; - } - } else { - return CanvasHandleTypes.TAG_AVAILABLE; - } - }; -} - -CompositionGraphZoneUtils.$inject = [ - 'DynamicComponentService', - 'PoliciesServiceNg2', - 'GroupsServiceNg2' -];
\ No newline at end of file diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts deleted file mode 100644 index aa1991069e..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts +++ /dev/null @@ -1,204 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { - Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match, - CompositionCiNodeBase, Component, Capability -} from "app/models"; -import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance"; -/** - * Created by obarda on 1/1/2017. - */ - -export class MatchCapabilitiesRequirementsUtils { - - /** - * Shows + icon in corner of each node passed in - * @param filteredNodesData - * @param cy - */ - public highlightMatchingComponents(filteredNodesData, cy: Cy.Instance) { - _.each(filteredNodesData, (data: any) => { - let node = cy.getElementById(data.id); - cy.emit('showhandle', [node]); - }); - } - - /** - * Adds opacity to each node that cannot be linked to hovered node - * @param filteredNodesData - * @param nodesData - * @param cy - * @param hoveredNodeData - */ - public fadeNonMachingComponents(filteredNodesData, nodesData, cy: Cy.Instance, hoveredNodeData?) { - let fadeNodes = _.xorWith(nodesData, filteredNodesData, (node1, node2) => { - return node1.id === node2.id; - }); - if (hoveredNodeData) { - _.remove(fadeNodes, hoveredNodeData); - } - cy.batch(() => { - _.each(fadeNodes, (node) => { - cy.getElementById(node.id).style({ 'background-image-opacity': 0.4 }); - }); - }) - } - - /** - * Resets all nodes to regular opacity - * @param cy - */ - public resetFadedNodes(cy: Cy.Instance) { - cy.batch(() => { - cy.nodes().style({ 'background-image-opacity': 1 }); - }) - } - - private static isRequirementFulfilled(fromNodeId: string, requirement: any, links: Array<CompositionCiLinkBase>): boolean { - if (requirement.maxOccurrences === 'UNBOUNDED') { - return false; - } - let linksWithThisReq: Array<CompositionCiLinkBase> = _.filter(links, { - 'relation': { - 'fromNode': fromNodeId, - 'relationships': [{ - 'relation': { - 'requirementOwnerId': requirement.ownerId, - 'requirement': requirement.name, - 'relationship': { - 'type': requirement.capability - } - - } - }] - } - }); - return linksWithThisReq.length == requirement.maxOccurrences; - }; - - private static isMatch(requirement: Requirement, capability: Capability): boolean { - if (capability.type === requirement.capability) { - if (requirement.node) { - if (_.includes(capability.capabilitySources, requirement.node)) { - return true; - } - } else { - return true; - } - } - return false; - }; - - public getMatchedRequirementsCapabilities(fromComponentInstance: ComponentInstance, - toComponentInstance: ComponentInstance, - links: Array<CompositionCiLinkBase>): Array<Match> { - let fromToMatches: Array<Match> = this.getMatches(fromComponentInstance.requirements, - toComponentInstance.capabilities, - links, - fromComponentInstance.uniqueId, - toComponentInstance.uniqueId, true); - let toFromMatches: Array<Match> = this.getMatches(toComponentInstance.requirements, - fromComponentInstance.capabilities, - links, - fromComponentInstance.uniqueId, - toComponentInstance.uniqueId, false); - - return fromToMatches.concat(toFromMatches); - } - - /***** REFACTORED FUNCTIONS START HERE *****/ - - public getMatches(requirements: RequirementsGroup, capabilities: CapabilitiesGroup, links: Array<CompositionCiLinkBase>, - fromId: string, toId: string, isFromTo: boolean): Array<Match> { - let matches: Array<Match> = []; - let unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links); - _.forEach(unfulfilledReqs, (req) => { - _.forEach(_.flatten(_.values(capabilities)), (capability: Capability) => { - if (MatchCapabilitiesRequirementsUtils.isMatch(req, capability)) { - if (isFromTo) { - matches.push(new Match(req, capability, isFromTo, fromId, toId)); - } else { - matches.push(new Match(req, capability, isFromTo, toId, fromId)); - } - } - }); - }); - return matches; - } - - public getUnfulfilledRequirements = (fromNodeId: string, requirements: RequirementsGroup, links: Array<CompositionCiLinkBase>): Array<Requirement> => { - - let requirementArray: Array<Requirement> = []; - _.forEach(_.flatten(_.values(requirements)), (requirement: Requirement) => { - if (requirement.name !== 'dependency' && requirement.parentName !== 'dependency' && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) { - requirementArray.push(requirement); - } - }); - return requirementArray; - }; - - - /** - * Returns true if there is a match between the capabilities and requirements that are passed in - * @param requirements - * @param capabilities - * @returns {boolean} - */ - public containsMatch = (requirements: Array<Requirement>, capabilities: CapabilitiesGroup): boolean => { - return _.some(requirements, (req: Requirement) => { - return _.some(_.flatten(_.values(capabilities)), (capability: Capability) => { - return MatchCapabilitiesRequirementsUtils.isMatch(req, capability); - }); - }); - }; - - /** - * Returns array of nodes that can connect to the component. - * In order to connect, one of the following conditions must be met: - * 1. component has an unfulfilled requirement that matches a node's capabilities - * 2. node has an unfulfilled requirement that matches the component's capabilities - * 3. vl is passed in which has the capability to fulfill requirement from component and requirement on node. - */ - public findMatchingNodes(component: Component, nodeDataArray: Array<CompositionCiNodeBase>, - links: Array<CompositionCiLinkBase>): Array<any> //TODO allow for VL array and TEST - { - let componentRequirements: Array<Requirement> = this.getUnfulfilledRequirements(component.uniqueId, component.requirements, links); - return _.filter(nodeDataArray, (node: any) => { - if (node && node.componentInstance) { - - //Check if component has an unfulfilled requirement that can be met by one of nodes's capabilities (#1) - if (componentRequirements.length && node.category !== 'groupCp' && this.containsMatch(componentRequirements, node.componentInstance.capabilities)) { - return true; - - } else { //Check if node has unfulfilled requirement that can be filled by component (#2) - let nodeRequirements: Array<Requirement> = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links); - if (!nodeRequirements.length) return false; - if (this.containsMatch(nodeRequirements, component.capabilities)) { - return true; - } - } - } - }); - } -} - -MatchCapabilitiesRequirementsUtils.$inject = []; |