summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/graphs-v2
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
committerMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
commited64b5edff15e702493df21aa3230b81593e6133 (patch)
treea4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/app/scripts/directives/graphs-v2
parent280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff)
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/app/scripts/directives/graphs-v2')
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/common/common-graph-utils.ts361
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/common/style/component-instances-nodes-style.ts259
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/common/style/module-node-style.ts92
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.directive.ts555
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.html22
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.less14
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts243
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts347
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts220
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts265
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts114
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html2
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.less14
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts24
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/image-creator/image-creator.service.ts46
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts7
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/palette/palette.directive.ts327
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/palette/palette.html59
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/palette/palette.less92
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html63
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.less118
-rw-r--r--catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts113
22 files changed, 0 insertions, 3357 deletions
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/app/scripts/directives/graphs-v2/common/common-graph-utils.ts
deleted file mode 100644
index e01e455e93..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/common/common-graph-utils.ts
+++ /dev/null
@@ -1,361 +0,0 @@
-/**
- * Created by obarda on 12/21/2016.
- */
-/**
- * Created by obarda on 12/13/2016.
- */
-/// <reference path="../../../references"/>
-module Sdc.Graph.Utils {
-
- export class CommonGraphUtils {
-
- constructor(private NodesFactory:Sdc.Utils.NodesFactory, private LinksFactory:Sdc.Utils.LinksFactory) {
-
- }
-
- public safeApply = (scope:ng.IScope, fn:any) => { //todo remove to general utils
- let phase = scope.$root.$$phase;
- if (phase == '$apply' || phase == '$digest') {
- if (fn && (typeof(fn) === 'function')) {
- fn();
- }
- } else {
- scope.$apply(fn);
- }
- };
-
- /**
- * Draw node on the graph
- * @param cy
- * @param compositionGraphNode
- * @param position
- * @returns {CollectionElements}
- */
- public addNodeToGraph(cy:Cy.Instance, compositionGraphNode:Models.Graph.CommonNodeBase, position?:Cy.Position):Cy.CollectionElements {
-
- var node = cy.add(<Cy.ElementDefinition> {
- group: 'nodes',
- position: position,
- data: compositionGraphNode,
- classes: compositionGraphNode.classes
- });
-
- if(!node.data().isUcpe) { //ucpe should not have tooltip
- this.initNodeTooltip(node);
- }
- return node;
- };
-
- /**
- * The function will create a component instance node by the componentInstance position.
- * If the node is UCPE the function will create all cp lan&wan for the ucpe
- * @param cy
- * @param compositionGraphNode
- * @returns {Cy.CollectionElements}
- */
- public addComponentInstanceNodeToGraph(cy:Cy.Instance, compositionGraphNode:Models.Graph.CompositionCiNodeBase):Cy.CollectionElements {
-
- let nodePosition = {
- x: +compositionGraphNode.componentInstance.posX,
- y: +compositionGraphNode.componentInstance.posY
- };
-
- let node = this.addNodeToGraph(cy, compositionGraphNode, nodePosition);
- if (compositionGraphNode.isUcpe) {
- this.createUcpeCpNodes(cy, node);
- }
- return node;
- };
-
- /**
- * This function will create CP_WAN & CP_LAN for the UCPE. this is a special node on the group that will behave like ports on the ucpe
- * @param cy
- * @param ucpeGraphNode
- */
- private createUcpeCpNodes(cy:Cy.Instance, ucpeGraphNode:Cy.CollectionNodes):void {
-
- let requirementsArray:Array<any> = ucpeGraphNode.data().componentInstance.requirements["tosca.capabilities.Node"];
- //show only LAN or WAN requirements
- requirementsArray = _.reject(requirementsArray, (requirement:any) => {
- let name:string = requirement.ownerName.toLowerCase();
- return name.indexOf('lan') === -1 && name.indexOf('wan') === -1;
- });
- requirementsArray.sort(function (a, b) {
- let nameA = a.ownerName.toLowerCase().match(/[^ ]+/)[0];
- let nameB = b.ownerName.toLowerCase().match(/[^ ]+/)[0];
- let numA = _.last(a.ownerName.toLowerCase().split(' '));
- let numB = _.last(b.ownerName.toLowerCase().split(' '));
-
- if (nameA === nameB) return numA > numB ? 1 : -1;
- return nameA < nameB ? 1 : -1;
- });
- let position = angular.copy(ucpeGraphNode.boundingbox());
- //add CP nodes to group
- let topCps:number = 0;
- for (let i = 0; i < requirementsArray.length; i++) {
-
- let cpNode = this.NodesFactory.createUcpeCpNode(angular.copy(ucpeGraphNode.data().componentInstance));
- cpNode.componentInstance.capabilities = requirementsArray[i];
- cpNode.id = requirementsArray[i].ownerId;
- cpNode.group = ucpeGraphNode.data().componentInstance.uniqueId;
- cpNode.name = requirementsArray[i].ownerName; //for tooltip
- cpNode.displayName = requirementsArray[i].ownerName;
- cpNode.displayName = cpNode.displayName.length > 5 ? cpNode.displayName.substring(0, 5) + '...' : cpNode.displayName;
-
-
- if (cpNode.name.toLowerCase().indexOf('lan') > -1) {
- cpNode.textPosition = "top";
- cpNode.componentInstance.posX = position.x1 + (i * 90) - (topCps * 90) + 53;
- cpNode.componentInstance.posY = position.y1 + 400 + 27;
- } else {
- cpNode.textPosition = "bottom";
- cpNode.componentInstance.posX = position.x1 + (topCps * 90) + 53;
- cpNode.componentInstance.posY = position.y1 + 27;
- topCps++;
- }
- let cyCpNode = this.addComponentInstanceNodeToGraph(cy, cpNode);
- cyCpNode.lock();
- }
- };
-
- /**
- *
- * @param nodes - all nodes in graph in order to find the edge connecting the two nodes
- * @param fromNodeId
- * @param toNodeId
- * @returns {boolean} true/false if the edge is certified (from node and to node are certified)
- */
- public isRelationCertified(nodes:Cy.CollectionNodes, fromNodeId:string, toNodeId:string):boolean {
- let resourceTemp = _.filter(nodes, function (node:Cy.CollectionFirst) {
- return node.data().id === fromNodeId || node.data().id === toNodeId;
- });
- let certified:boolean = true;
-
- _.forEach(resourceTemp, (item) => {
- certified = certified && item.data().certified;
- });
-
- return certified;
- }
-
- /**
- * Add link to graph - only draw the link
- * @param cy
- * @param link
- */
- public insertLinkToGraph = (cy:Cy.Instance, link:Models.CompositionCiLinkBase) => {
-
- if (!this.isRelationCertified(cy.nodes(), link.source, link.target)) {
- link.classes = 'not-certified-link';
- }
- cy.add({
- group: 'edges',
- data: link,
- classes: link.classes
- });
-
- };
-
- /**
- * go over the relations and draw links on the graph
- * @param cy
- * @param instancesRelations
- */
- public initGraphLinks(cy:Cy.Instance, instancesRelations:Array<Models.RelationshipModel>) {
-
- if (instancesRelations) {
- _.forEach(instancesRelations, (relationshipModel:Models.RelationshipModel) => {
- _.forEach(relationshipModel.relationships, (relationship:Models.Relationship) => {
- let linkToCreate = this.LinksFactory.createGraphLink(cy, relationshipModel, relationship);
- this.insertLinkToGraph(cy, linkToCreate);
- });
- });
- }
- }
-
- /**
- * Determine which nodes are in the UCPE and set child data for them.
- * @param cy
- */
- public initUcpeChildren(cy:Cy.Instance){
- let ucpe:Cy.CollectionNodes = cy.nodes('[?isUcpe]'); // Get ucpe on graph if exist
- _.each(cy.edges('.ucpe-host-link'), (link)=>{
-
- let ucpeChild:Cy.CollectionNodes = (link.source().id() == ucpe.id())? link.target() : link.source();
- this.initUcpeChildData(ucpeChild, ucpe);
-
- //vls dont have ucpe-host-link connection, so need to find them and iterate separately
- let connectedVLs = ucpeChild.connectedEdges().connectedNodes('.vl-node');
- _.forEach(connectedVLs, (vl)=>{ //all connected vls must be UCPE children because not allowed to connect to a VL outside of the UCPE
- this.initUcpeChildData(vl, ucpe);
- });
- });
- }
-
- /**
- * Set properties for nodes contained by the UCPE
- * @param childNode- node contained in UCPE
- * @param ucpe- ucpe container node
- */
- public initUcpeChildData(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes){
-
- if(!childNode.data('isInsideGroup')){
- this.updateUcpeChildPosition(childNode, ucpe);
- childNode.data({isInsideGroup: true});
- }
-
- }
-
- /**
- * Updates UCPE child node offset, which allows child nodes to be dragged in synchronization with ucpe
- * @param childNode- node contained in UCPE
- * @param ucpe- ucpe container node
- */
- public updateUcpeChildPosition(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes){
- let childPos:Cy.Position = childNode.relativePosition();
- let ucpePos:Cy.Position = ucpe.relativePosition();
- let offset:Cy.Position = {
- x: childPos.x - ucpePos.x,
- y: childPos.y - ucpePos.y
- };
- childNode.data("ucpeOffset", offset);
- }
-
- /**
- * Removes ucpe-child properties from the node
- * @param childNode- node being removed from UCPE
- */
- public removeUcpeChildData(childNode:Cy.CollectionNodes){
- childNode.removeData("ucpeOffset");
- childNode.data({isInsideGroup: false});
-
- }
-
-
- public HTMLCoordsToCytoscapeCoords(cytoscapeBoundingBox:Cy.Extent, mousePos:Cy.Position):Cy.Position {
- return {x: mousePos.x + cytoscapeBoundingBox.x1, y: mousePos.y + cytoscapeBoundingBox.y1}
- };
-
-
- public getCytoscapeNodePosition = (cy: Cy.Instance, event:IDragDropEvent):Cy.Position => {
- let targetOffset = $(event.target).offset();
- let x = event.pageX - targetOffset.left;
- let y = event.pageY - targetOffset.top;
-
- return this.HTMLCoordsToCytoscapeCoords(cy.extent(), {
- x: x,
- y: y
- });
- };
-
-
- public getNodePosition(node:Cy.CollectionFirstNode):Cy.Position{
- let nodePosition = node.relativePoint();
- if(node.data().isUcpe){ //UCPEs use bounding box and not relative point.
- nodePosition = {x: node.boundingbox().x1, y: node.boundingbox().y1};
- }
-
- return nodePosition;
- }
-
- /**
- * return true/false if first node contains in second - this used in order to verify is node is entirely inside ucpe
- * @param firstBox
- * @param secondBox
- * @returns {boolean}
- */
- public isFirstBoxContainsInSecondBox(firstBox:Cy.BoundingBox, secondBox:Cy.BoundingBox) {
-
- return firstBox.x1 > secondBox.x1 && firstBox.x2 < secondBox.x2 && firstBox.y1 > secondBox.y1 && firstBox.y2 < secondBox.y2;
-
- };
-
-
- /**
- * Check if node node bounds position is inside any ucpe on graph, and return the ucpe
- * @param {diagram} the diagram.
- * @param {nodeActualBounds} the actual bound position of the node.
- * @return the ucpe if found else return null
- */
- public isInUcpe = (cy: Cy.Instance, nodeBounds: Cy.BoundingBox): Cy.CollectionElements => {
-
- let ucpeNodes = cy.nodes('[?isUcpe]').filterFn((ucpeNode) => {
- return this.isFirstBoxContainsInSecondBox(nodeBounds, ucpeNode.boundingbox());
- });
- return ucpeNodes;
- };
-
- /**
- *
- * @param cy
- * @param node
- * @returns {Array}
- */
- public getLinkableNodes(cy:Cy.Instance, node:Cy.CollectionFirstNode):Array<Models.Graph.CompositionCiNodeBase>{
- let compatibleNodes = [];
- _.each(cy.nodes(), (tempNode)=>{
- if(this.nodeLocationsCompatible(cy, node, tempNode)){
- compatibleNodes.push(tempNode.data());
- }
- });
- return compatibleNodes;
- }
-
- /**
- * Checks whether node locations are compatible in reference to UCPEs.
- * Returns true if both nodes are in UCPE or both nodes out, or one node is UCPEpart.
- * @param node1
- * @param node2
- */
- public nodeLocationsCompatible(cy:Cy.Instance, node1:Cy.CollectionFirstNode, node2:Cy.CollectionFirstNode){
-
- let ucpe = cy.nodes('[?isUcpe]');
- if(!ucpe.length){ return true; }
- if(node1.data().isUcpePart || node2.data().isUcpePart) { return true; }
-
- return (this.isFirstBoxContainsInSecondBox(node1.boundingbox(), ucpe.boundingbox()) == this.isFirstBoxContainsInSecondBox(node2.boundingbox(), ucpe.boundingbox()));
-
- }
-
- /**
- * This function will init qtip tooltip on the node
- * @param node - the node we want the tooltip to apply on
- */
- public initNodeTooltip(node:Cy.CollectionNodes) {
-
- let opts = {
- content: function () {
- return this.data('name');
- },
- position: {
- my: 'top center',
- at: 'bottom center',
- adjust: {x:0, y:-5}
- },
- style: {
- classes: 'qtip-dark qtip-rounded qtip-custom',
- tip: {
- width: 16,
- height: 8
- }
- },
- show: {
- event: 'mouseover',
- delay: 1000
- },
- hide: {event: 'mouseout mousedown'},
- includeLabels: true
- };
-
- if (node.data().isUcpePart){ //fix tooltip positioning for UCPE-cps
- opts.position.adjust = {x:0, y:20};
- }
-
- node.qtip(opts);
- };
- };
-
-
-
- CommonGraphUtils.$inject = ['NodesFactory', 'LinksFactory'];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/app/scripts/directives/graphs-v2/common/style/component-instances-nodes-style.ts
deleted file mode 100644
index 2ec0174aa9..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/common/style/component-instances-nodes-style.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-/**
- * Created by obarda on 12/18/2016.
- */
-/**
- * Created by obarda on 12/13/2016.
- */
-/// <reference path="../../../../references"/>
-module Sdc.Graph.Utils.ComponentIntanceNodesStyle {
-
- export function getCompositionGraphStyle():Array<Cy.Stylesheet> {
- return [
- {
- selector: 'core',
- css: {
- 'shape': 'rectangle',
- 'active-bg-size': 0,
- 'selection-box-color': 'rgb(0, 159, 219)',
- 'selection-box-opacity': 0.2,
- 'selection-box-border-color': '#009fdb',
- 'selection-box-border-width': 1
-
- }
- },
- {
- selector: 'node',
- css: {
- 'font-family': 'omnes-regular,sans-serif',
- 'font-size': 14,
- 'events': 'yes',
- 'text-events': 'yes',
- 'text-border-width': 15,
- 'text-border-color': Sdc.Utils.Constants.GraphColors.NODE_UCPE,
- 'text-margin-y': 5
- }
- },
- {
- selector: '.vf-node',
- css: {
- 'background-color': 'transparent',
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'background-image': 'data(img)',
- 'width': 65,
- 'height': 65,
- 'background-opacity': 0,
- "background-width": 65,
- "background-height": 65,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-fit': 'cover',
- 'background-clip': 'node',
- 'overlay-color': Sdc.Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- },
-
- {
- selector: '.service-node',
- css: {
- 'background-color': 'transparent',
- 'label': 'data(displayName)',
- 'events': 'yes',
- 'text-events': 'yes',
- 'background-image': 'data(img)',
- 'width': 64,
- 'height': 64,
- "border-width": 0,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-opacity': 0,
- 'overlay-color': Sdc.Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- },
- {
- selector: '.cp-node',
- css: {
- 'background-color': 'rgb(255,255,255)',
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'background-image': 'data(img)',
- 'background-width': 21,
- 'background-height': 21,
- 'width': 21,
- 'height': 21,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-opacity': 0,
- 'overlay-color': Sdc.Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- },
- {
- selector: '.vl-node',
- css: {
- 'background-color': 'rgb(255,255,255)',
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'background-image': 'data(img)',
- 'background-width': 21,
- 'background-height': 21,
- 'width': 21,
- 'height': 21,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-opacity': 0,
- 'overlay-color': Sdc.Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- },
- {
- selector: '.ucpe-cp',
- css: {
- 'background-color': Sdc.Utils.Constants.GraphColors.NODE_UCPE_CP,
- 'background-width': 15,
- 'background-height': 15,
- 'width': 15,
- 'height': 15,
- 'text-halign': 'center',
- 'overlay-opacity': 0,
- 'label': 'data(displayName)',
- 'text-valign': 'data(textPosition)',
- 'text-margin-y': (ele:Cy.Collection) => {
- return (ele.data('textPosition') == 'top')? -5 : 5;
- },
- 'font-size': 12
- }
- },
- {
- selector: '.ucpe-node',
- css: {
- 'background-fit': 'cover',
- 'padding-bottom': 0,
- 'padding-top': 0
- }
- },
- {
- selector: '.simple-link',
- css: {
- 'width': 1,
- 'line-color': Sdc.Utils.Constants.GraphColors.BASE_LINK,
- 'target-arrow-color': '#3b7b9b',
- 'target-arrow-shape': 'triangle',
- 'curve-style': 'bezier',
- 'control-point-step-size': 30
- }
- },
- {
- selector: '.vl-link',
- css: {
- 'width': 3,
- 'line-color': Sdc.Utils.Constants.GraphColors.VL_LINK,
- 'curve-style': 'bezier',
- 'control-point-step-size': 30
- }
- },
- {
- selector: '.ucpe-host-link',
- css: {
- 'width': 0
- }
- },
- {
- selector: '.not-certified-link',
- css: {
- 'width': 1,
- 'line-color': Sdc.Utils.Constants.GraphColors.NOT_CERTIFIED_LINK,
- 'curve-style': 'bezier',
- 'control-point-step-size': 30,
- 'line-style': 'dashed',
- 'target-arrow-color': '#3b7b9b',
- 'target-arrow-shape': 'triangle'
-
- }
- },
-
- {
- selector: '.not-certified',
- css: {
- 'shape': 'rectangle',
- 'background-image': (ele:Cy.Collection) => {
- return ele.data().initImage(ele)
- },
- "border-width": 0
- }
- },
- {
- selector: 'node:selected',
- css: {
- "border-width": 2,
- "border-color": Sdc.Utils.Constants.GraphColors.NODE_SELECTED_BORDER_COLOR,
- 'shape': 'rectangle'
- }
- },
- {
- selector: 'edge:selected',
- css: {
- 'line-color': Sdc.Utils.Constants.GraphColors.ACTIVE_LINK
-
- }
- },
- {
- selector: 'edge:active',
- css: {
- 'overlay-opacity': 0
- }
- }
- ]
- }
-
- export function getBasicNodeHanlde() {
- return {
- positionX: "center",
- positionY: "top",
- offsetX: 15,
- offsetY: -20,
- color: "#27a337",
- type: "default",
- single: false,
- nodeTypeNames: ["basic-node"],
- imageUrl: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'canvasPlusIcon.png',
- lineWidth: 2,
- lineStyle: 'dashed'
-
- }
- }
-
- export function getBasicSmallNodeHandle() {
- return {
- positionX: "center",
- positionY: "top",
- offsetX: 3,
- offsetY: -25,
- color: "#27a337",
- type: "default",
- single: false,
- nodeTypeNames: ["basic-small-node"],
- imageUrl: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'canvasPlusIcon.png',
- lineWidth: 2,
- lineStyle: 'dashed'
- }
- }
-
- export function getUcpeCpNodeHandle() {
- return {
- positionX: "center",
- positionY: "center",
- offsetX: -8,
- offsetY: -10,
- color: "#27a337",
- type: "default",
- single: false,
- nodeTypeNames: ["ucpe-cp-node"],
- imageUrl: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'canvasPlusIcon.png',
- lineWidth: 2,
- lineStyle: 'dashed'
- }
- }
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/common/style/module-node-style.ts b/catalog-ui/app/scripts/directives/graphs-v2/common/style/module-node-style.ts
deleted file mode 100644
index 62436fbf74..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/common/style/module-node-style.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Created by obarda on 1/1/2017.
- */
-/**
- * Created by obarda on 12/18/2016.
- */
-/**
- * Created by obarda on 12/13/2016.
- */
-/// <reference path="../../../../references"/>
-module Sdc.Graph.Utils.ModulesNodesStyle {
-
- export function getModuleGraphStyle():Array<Cy.Stylesheet> {
-
- return [
- {
- selector: '.cy-expand-collapse-collapsed-node',
- css: {
- 'background-image': 'data(img)',
- 'width': 34,
- 'height': 32,
- 'background-opacity': 0,
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'events': 'yes',
- 'text-events': 'yes',
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'text-margin-y': 5,
- 'border-opacity': 0
- }
- },
- {
- selector: '.module-node',
- css: {
- 'background-color': 'transparent',
- 'background-opacity': 0,
- "border-width": 2,
- "border-color": Sdc.Utils.Constants.GraphColors.NODE_SELECTED_BORDER_COLOR,
- 'border-style': 'dashed',
- 'label': 'data(displayName)',
- 'events': 'yes',
- 'text-events': 'yes',
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'text-margin-y': 8
- }
- },
- {
- selector: 'node:selected',
- css: {
- "border-opacity": 0
- }
- },
- {
- selector: '.simple-link:selected',
- css: {
- 'line-color': Sdc.Utils.Constants.GraphColors.BASE_LINK,
- }
- },
- {
- selector: '.vl-link:selected',
- css: {
- 'line-color': Sdc.Utils.Constants.GraphColors.VL_LINK,
- }
- },
- {
- selector: '.cy-expand-collapse-collapsed-node:selected',
- css: {
- "border-color": Sdc.Utils.Constants.GraphColors.NODE_SELECTED_BORDER_COLOR,
- 'border-opacity': 1,
- 'border-style': 'solid',
- 'border-width': 2
- }
- },
- {
- selector: '.module-node:selected',
- css: {
- "border-color": Sdc.Utils.Constants.GraphColors.NODE_SELECTED_BORDER_COLOR,
- 'border-opacity': 1
- }
- },
- {
- selector: '.dummy-node',
- css: {
- 'width': 20,
- 'height': 20
- }
- },
- ]
- }
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.directive.ts
deleted file mode 100644
index 708f1d091a..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.directive.ts
+++ /dev/null
@@ -1,555 +0,0 @@
-/// <reference path="../../../references"/>
-module Sdc.Directives {
-
- import ComponentFactory = Sdc.Utils.ComponentFactory;
- import LoaderService = Sdc.Services.LoaderService;
- import GRAPH_EVENTS = Sdc.Utils.Constants.GRAPH_EVENTS;
-
- interface ICompositionGraphScope extends ng.IScope {
-
- component:Models.Components.Component;
- isViewOnly:boolean;
- // Link menu - create link menu
- relationMenuDirectiveObj:Models.RelationMenuDirectiveObj;
- isLinkMenuOpen:boolean;
- createLinkFromMenu:(chosenMatch:Models.MatchBase, vl:Models.Components.Component)=>void;
-
- //modify link menu - for now only delete menu
- relationMenuTimeout:ng.IPromise<any>;
- linkMenuObject:Models.LinkMenu;
-
- //left palette functions callbacks
- dropCallback(event:JQueryEventObject, ui:any):void;
- beforeDropCallback(event:IDragDropEvent):void;
- verifyDrop(event:JQueryEventObject, ui:any):void;
-
- //Links menus
- deleteRelation(link:Cy.CollectionEdges):void;
- hideRelationMenu();
- }
-
- export class CompositionGraph implements ng.IDirective {
- private _cy:Cy.Instance;
- private _currentlyCLickedNodePosition:Cy.Position;
- private $document:JQuery = $(document);
- private dragElement:JQuery;
- private dragComponent: Sdc.Models.ComponentsInstances.ComponentInstance;
-
- constructor(private $q:ng.IQService,
- private $filter:ng.IFilterService,
- private $log:ng.ILogService,
- private $timeout:ng.ITimeoutService,
- private NodesFactory:Sdc.Utils.NodesFactory,
- private CompositionGraphLinkUtils:Sdc.Graph.Utils.CompositionGraphLinkUtils,
- private GeneralGraphUtils:Graph.Utils.CompositionGraphGeneralUtils,
- private ComponentInstanceFactory:Utils.ComponentInstanceFactory,
- private NodesGraphUtils:Sdc.Graph.Utils.CompositionGraphNodesUtils,
- private eventListenerService:Services.EventListenerService,
- private ComponentFactory:ComponentFactory,
- private LoaderService:LoaderService,
- private commonGraphUtils:Graph.Utils.CommonGraphUtils,
- private matchCapabilitiesRequirementsUtils:Graph.Utils.MatchCapabilitiesRequirementsUtils) {
-
- }
-
- restrict = 'E';
- templateUrl = '/app/scripts/directives/graphs-v2/composition-graph/composition-graph.html';
- scope = {
- component: '=',
- isViewOnly: '='
- };
-
- link = (scope:ICompositionGraphScope, el:JQuery) => {
- this.loadGraph(scope, el);
-
- scope.$on('$destroy', () => {
- this._cy.destroy();
- _.forEach(GRAPH_EVENTS, (event) => {
- this.eventListenerService.unRegisterObserver(event);
- });
- });
-
- };
-
- private loadGraph = (scope:ICompositionGraphScope, el:JQuery) => {
-
-
- let graphEl = el.find('.sdc-composition-graph-wrapper');
- this.initGraph(graphEl, scope.isViewOnly);
- this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly);
- this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations);
- this.commonGraphUtils.initUcpeChildren(this._cy);
- this.initDropZone(scope);
- this.registerCytoscapeGraphEvents(scope);
- this.registerCustomEvents(scope, el);
- this.initViewMode(scope.isViewOnly);
-
- };
-
- private initGraph(graphEl:JQuery, isViewOnly:boolean) {
-
- this._cy = cytoscape({
- container: graphEl,
- style: Sdc.Graph.Utils.ComponentIntanceNodesStyle.getCompositionGraphStyle(),
- zoomingEnabled: false,
- 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.edges().unselectify();
- }
- };
-
- private registerCustomEvents(scope:ICompositionGraphScope, el:JQuery) {
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (component:Models.DisplayComponent) => {
- this.$log.info(`composition-graph::registerEventServiceEvents:: palette hover on component: ${component.uniqueId}`);
-
- let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes());
- let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy);
-
- if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(component.uniqueId)) {
- let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(component.uniqueId);
- let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(cacheComponent, nodesData, nodesLinks);
-
- this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
- this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
-
- return;
- }
-
- component.component.updateRequirementsCapabilities()
- .then((res) => {
- component.component.capabilities = res.capabilities;
- component.component.requirements = res.requirements;
-
- let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(component.component, nodesData, nodesLinks);
- this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
- this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy)
- });
- });
-
- 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._onComponentDrag(event);
-
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component:Models.ComponentsInstances.ComponentInstance) => {
-
- let selectedNode = this._cy.getElementById(component.uniqueId);
- selectedNode.data().componentInstance.name = component.name;
- selectedNode.data('displayName', selectedNode.data().getDisplayName());
-
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstance:Models.ComponentsInstances.ComponentInstance) => {
- let nodeToDelete = this._cy.getElementById(componentInstance.uniqueId);
- this.NodesGraphUtils.deleteNode(this._cy, scope.component, nodeToDelete);
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_MULTIPLE_COMPONENTS, () => {
-
- this._cy.$('node:selected').each((i:number, node:Cy.CollectionNodes) => {
- this.NodesGraphUtils.deleteNode(this._cy, scope.component, node);
- });
-
- });
-
- 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 Sdc.Models.Graph.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:Models.Components.Component) => {
- scope.component = component;
- this.loadGraph(scope, el);
- });
-
-
- scope.createLinkFromMenu = (chosenMatch:Models.MatchBase, vl:Models.Components.Component):void => {
- scope.isLinkMenuOpen = false;
-
- this.CompositionGraphLinkUtils.createLinkFromMenu(this._cy, chosenMatch, vl, scope.component);
- };
-
- scope.hideRelationMenu = () => {
- this.commonGraphUtils.safeApply(scope, () => {
- scope.linkMenuObject = null;
- this.$timeout.cancel(scope.relationMenuTimeout);
- });
- };
-
-
- 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) {
- scope.$apply(() => {
- scope.isLinkMenuOpen = true;
- });
- }
- });
- this._cy.on('tapstart', 'node', (event:Cy.EventObject) => {
- 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': Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR});
- } else {
- event.cyTarget.style({'overlay-color': Utils.Constants.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()) { //no need to add opacity while we are dragging and hovering othe nodes
- 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.findByMatchingCapabilitiesToRequirements(payload.node.data().componentInstance, linkableNodes, nodesLinks);
- this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
- this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data());
-
- });
-
- this._cy.on('handlemouseout', () => {
- this._cy.emit('hidehandles');
- this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
- });
-
-
- this._cy.on('tapend', (event:Cy.EventObject) => {
-
- if (event.cyTarget === this._cy) { //On Background clicked
- if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged
- this.eventListenerService.notifyObservers(Sdc.Utils.Constants.GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
- }
- scope.hideRelationMenu();
- }
-
- else if (event.cyTarget.isEdge()) { //On Edge clicked
- if (scope.isViewOnly) return;
- this.CompositionGraphLinkUtils.handleLinkClick(this._cy, event);
- 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');
- scope.$apply(() => {
- this.eventListenerService.notifyObservers(Sdc.Utils.Constants.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) => {
- this.eventListenerService.notifyObservers(Utils.Constants.GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
- });
- }
-
- private openModifyLinkMenu = (scope:ICompositionGraphScope, linkMenuObject:Models.LinkMenu, timeOutInMilliseconds?:number) => {
-
- this.commonGraphUtils.safeApply(scope, () => {
- scope.linkMenuObject = linkMenuObject;
- });
-
- scope.relationMenuTimeout = this.$timeout(() => {
- scope.hideRelationMenu();
- }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
- };
-
- private initGraphNodes(componentInstances:Models.ComponentsInstances.ComponentInstance[], isViewOnly:boolean) {
-
- if (!isViewOnly) { //Init nodes handle extension - enable dynamic links
- setTimeout(()=> {
- let handles = new CytoscapeEdgeEditation;
- handles.init(this._cy, 18);
- handles.registerHandle(Sdc.Graph.Utils.ComponentIntanceNodesStyle.getBasicNodeHanlde());
- handles.registerHandle(Sdc.Graph.Utils.ComponentIntanceNodesStyle.getBasicSmallNodeHandle());
- handles.registerHandle(Sdc.Graph.Utils.ComponentIntanceNodesStyle.getUcpeCpNodeHandle());
- }, 0);
- }
-
- _.each(componentInstances, (instance) => {
- let compositionGraphNode:Models.Graph.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.addNode(event, scope);
- };
-
- scope.verifyDrop = (event:JQueryEventObject) => {
-
- if(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 _getNodeBBox(event:IDragDropEvent, position?:Cy.Position) {
- let bbox = <Cy.BoundingBox>{};
- if (!position) {
- position = this.commonGraphUtils.getCytoscapeNodePosition(this._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;
- }
-
- private createComponentInstanceOnGraphFromComponent(fullComponent:Models.Components.Component, event:IDragDropEvent, scope:ICompositionGraphScope) {
-
- let componentInstanceToCreate:Models.ComponentsInstances.ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(fullComponent);
- let cytoscapePosition:Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(this._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:Models.ComponentsInstances.ComponentInstance):void => {
-
- this.LoaderService.hideLoader('composition-graph');
-
- createInstance.name = this.$filter('resourceName')(createInstance.name);
- createInstance.requirements = new Models.RequirementsGroup(fullComponent.requirements);
- createInstance.capabilities = new Models.CapabilitiesGroup(fullComponent.capabilities);
- createInstance.componentVersion = fullComponent.version;
- createInstance.icon = fullComponent.icon;
- createInstance.setInstanceRC();
-
- let newNode:Models.Graph.CompositionCiNodeBase = this.NodesFactory.createNode(createInstance);
- let cyNode:Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, newNode);
-
- //check if node was dropped into a UCPE
- let ucpe:Cy.CollectionElements = this.commonGraphUtils.isInUcpe(this._cy, cyNode.boundingbox());
- if (ucpe.length > 0) {
- this.eventListenerService.notifyObservers(Utils.Constants.GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false);
- }
-
- };
-
- // Create the component instance on server
- this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => {
- scope.component.createComponentInstance(componentInstanceToCreate).then(onSuccessCreatingInstance, onFailedCreatingInstance);
- });
- }
-
- private _onComponentDrag(event:IDragDropEvent) {
-
- if(event.clientX < Sdc.Utils.Constants.GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < Sdc.Utils.Constants.GraphUIObjects.DIAGRAM_HEADER_OFFSET){ //hovering over palette. Dont bother computing validity of drop
- this.dragElement.removeClass('red');
- return;
- }
-
- let offsetPosition = {x: event.clientX - Sdc.Utils.Constants.GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET, y: event.clientY - Sdc.Utils.Constants.GraphUIObjects.DIAGRAM_HEADER_OFFSET}
- let bbox = this._getNodeBBox(event, offsetPosition);
-
- if (this.GeneralGraphUtils.isPaletteDropValid(this._cy, bbox, this.dragComponent)) {
- this.dragElement.removeClass('red');
- } else {
- this.dragElement.addClass('red');
- }
- }
-
- private addNode(event:IDragDropEvent, scope:ICompositionGraphScope) {
- this.LoaderService.showLoader('composition-graph');
-
- this.$log.debug('composition-graph::addNode:: fired');
- let draggedComponent:Models.Components.Component = event.dataTransfer.component;
-
- if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) {
- this.$log.debug('composition-graph::addNode:: capabilities found in cache, creating component');
- let fullComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId);
- this.createComponentInstanceOnGraphFromComponent(fullComponent, event, scope);
- return;
- }
-
- this.$log.debug('composition-graph::addNode:: capabilities not found, requesting from server');
- this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId)
- .then((fullComponent:Models.Components.Component) => {
- this.createComponentInstanceOnGraphFromComponent(fullComponent, event, scope);
- });
- }
-
- public static factory = ($q,
- $filter,
- $log,
- $timeout,
- NodesFactory,
- LinksGraphUtils,
- GeneralGraphUtils,
- ComponentInstanceFactory,
- NodesGraphUtils,
- EventListenerService,
- ComponentFactory,
- LoaderService,
- CommonGraphUtils,
- MatchCapabilitiesRequirementsUtils) => {
- return new CompositionGraph(
- $q,
- $filter,
- $log,
- $timeout,
- NodesFactory,
- LinksGraphUtils,
- GeneralGraphUtils,
- ComponentInstanceFactory,
- NodesGraphUtils,
- EventListenerService,
- ComponentFactory,
- LoaderService,
- CommonGraphUtils,
- MatchCapabilitiesRequirementsUtils);
- }
- }
-
- CompositionGraph.factory.$inject = [
- '$q',
- '$filter',
- '$log',
- '$timeout',
- 'NodesFactory',
- 'CompositionGraphLinkUtils',
- 'CompositionGraphGeneralUtils',
- 'ComponentInstanceFactory',
- 'CompositionGraphNodesUtils',
- 'EventListenerService',
- 'ComponentFactory',
- 'LoaderService',
- 'CommonGraphUtils',
- 'MatchCapabilitiesRequirementsUtils'
- ];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.html b/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.html
deleted file mode 100644
index 5f2c488341..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<loader display="isLoading" loader-type="composition-graph"></loader>
-<div class="sdc-composition-graph-wrapper" ng-class="{'view-only':isViewOnly}"
- data-drop="true"
- 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>
-
-
-<div class="w-sdc-canvas-menu"
- data-ng-show="linkMenuObject" ng-style="{left: linkMenuObject.position.x, top: linkMenuObject.position.y}"
- id="relationMenu">
-
- <div class="w-sdc-canvas-menu-content hand" data-ng-click="deleteRelation(linkMenuObject.link)">
- <div class="w-sdc-canvas-menu-content-delete-button"></div>
- <!--{{relationComponent.data.relation.relationships[0].relationship.type | relationName }}-->
- Delete
- </div>
-
-</div>
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.less b/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.less
deleted file mode 100644
index 7b999967b7..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/composition-graph.less
+++ /dev/null
@@ -1,14 +0,0 @@
-composition-graph {
- display: block;
-
- height:100%;
- width: 100%;
- .sdc-composition-graph-wrapper{
- height:100%;
- width: 100%;
- }
-
- &.view-only{
- background-color:rgb(248, 248, 248);
- }
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts b/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
deleted file mode 100644
index 495a243d75..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-/// <reference path="../../../../references"/>
-module Sdc.Graph.Utils {
-
- import Dictionary = Sdc.Utils.Dictionary;
-
- export class CompositionGraphGeneralUtils {
-
- public componentRequirementsAndCapabilitiesCaching = new Dictionary<string, Models.Components.Component>();
- protected static graphUtilsUpdateQueue: Sdc.Utils.Functions.QueueUtils;
-
- constructor(private $q: ng.IQService,
- private LoaderService: Services.LoaderService,
- private commonGraphUtils: Sdc.Graph.Utils.CommonGraphUtils,
- private matchCapabilitiesRequirementsUtils: Graph.Utils.MatchCapabilitiesRequirementsUtils) {
- CompositionGraphGeneralUtils.graphUtilsUpdateQueue = new Sdc.Utils.Functions.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.scrollHeight < menuPosition.y + Sdc.Utils.Constants.GraphUIObjects.LINK_MENU_HEIGHT + $(document.getElementsByClassName('sdc-composition-graph-wrapper')).offset().top) { // if position menu is overflow bottom
- menuPosition.y = document.body.scrollHeight - Sdc.Utils.Constants.GraphUIObjects.TOP_HEADER_HEIGHT - Sdc.Utils.Constants.GraphUIObjects.LINK_MENU_HEIGHT;
- }
- return menuPosition;
- };
-
-
- /**
- * 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 {Models.MatchReqToCapability}
- */
- public canBeHostedOn(cy: Cy.Instance, fromUcpeInstance: Models.ComponentsInstances.ComponentInstance, toComponentInstance: Models.ComponentsInstances.ComponentInstance): Models.MatchReqToCapability {
-
- let matches: Array<Models.MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
- let hostedOnMatch: Models.MatchBase = _.find(matches, (match: Models.MatchReqToCapability) => {
- return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container';
- });
-
- return <Models.MatchReqToCapability>hostedOnMatch;
- };
-
-
- /**
- * Checks whether node can be dropped into UCPE
- * @param cy
- * @param nodeToInsert
- * @param ucpeNode
- * @returns {boolean}
- */
- private isValidDropInsideUCPE(cy: Cy.Instance, nodeToInsert: Models.ComponentsInstances.ComponentInstance, ucpeNode: Models.ComponentsInstances.ComponentInstance): boolean {
-
- let hostedOnMatch: Models.MatchReqToCapability = 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:Sdc.Models.ComponentsInstances.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 Sdc.Models.Graph.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 {
- var 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<Models.CompositionCiLinkBase> => {
- return _.map(cy.edges("[isSdcElement]"), (edge: Cy.CollectionEdges) => {
- return edge.data();
- });
- };
-
-
- /**
- * Get Graph Utils server queue
- * @returns {Sdc.Utils.Functions.QueueUtils}
- */
- public getGraphUtilsServerUpdateQueue(): Sdc.Utils.Functions.QueueUtils {
- return CompositionGraphGeneralUtils.graphUtilsUpdateQueue;
- }
- ;
-
- /**
- *
- * @param blockAction - true/false if this is a block action
- * @param instances
- * @param component
- */
- public pushMultipleUpdateComponentInstancesRequestToQueue = (blockAction: boolean, instances: Array<Models.ComponentsInstances.ComponentInstance>, component: Models.Components.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: Models.Components.Component, blockAction: boolean, updatedInstance: Models.ComponentsInstances.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'];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts b/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
deleted file mode 100644
index 602e6b6def..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-/**
- * Created by obarda on 6/28/2016.
- */
-/// <reference path="../../../../references"/>
-module Sdc.Graph.Utils {
-
- import ImageCreatorService = Sdc.Utils.ImageCreatorService;
- import Module = Sdc.Models.Module;
- export class CompositionGraphLinkUtils {
-
- private p2pVL:Models.Components.Component;
- private mp2mpVL:Models.Components.Component;
-
- constructor(private linksFactory:Sdc.Utils.LinksFactory,
- private loaderService:Services.LoaderService,
- private generalGraphUtils:Sdc.Graph.Utils.CompositionGraphGeneralUtils,
- private leftPaletteLoaderService:Services.Components.LeftPaletteLoaderService,
- private componentInstanceFactory:Sdc.Utils.ComponentInstanceFactory,
- private nodesFactory:Sdc.Utils.NodesFactory,
- private commonGraphUtils: Sdc.Graph.Utils.CommonGraphUtils,
- private matchCapabilitiesRequirementsUtils: Graph.Utils.MatchCapabilitiesRequirementsUtils) {
-
- this.initScopeVls();
-
- }
-
-
- /**
- * 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:Models.Components.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:Models.CompositionCiLinkBase, cy:Cy.Instance, component:Models.Components.Component):void => {
-
- this.loaderService.showLoader('composition-graph');
-
- let onSuccess:(response:Models.RelationshipModel) => void = (relation:Models.RelationshipModel) => {
- link.setRelation(relation);
- this.commonGraphUtils.insertLinkToGraph(cy, link);
- };
-
- link.updateLinkDirection();
-
- this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
- () => component.createRelation(link.relation).then(onSuccess),
- () => this.loaderService.hideLoader('composition-graph')
- );
- };
-
-
- public initScopeVls = ():void => {
-
- let vls = this.leftPaletteLoaderService.getFullDataComponentList(Sdc.Utils.Constants.ResourceType.VL);
- vls.forEach((item) => {
- let key = _.find(Object.keys(item.capabilities), (key) => {
- return _.includes(key.toLowerCase(), 'linkable');
- });
- let linkable = item.capabilities[key];
- if (linkable) {
- if (linkable[0].maxOccurrences == '2') {
- this.p2pVL = _.find(vls, (component:Models.Components.Component) => {
- return component.uniqueId === item.uniqueId;
- });
-
- } else {//assuming unbounded occurrences
- this.mp2mpVL = _.find(vls, (component:Models.Components.Component) => {
- return component.uniqueId === item.uniqueId;
- });
- }
- }
- });
- };
-
- private setVLlinks = (match:Models.MatchReqToReq, vl:Models.ComponentsInstances.ComponentInstance):Array<Models.RelationshipModel> => {
-
- let relationship1 = new Models.Relationship();
- let relationship2 = new Models.Relationship();
- let newRelationshipModel1 = new Models.RelationshipModel();
- let newRelationshipModel2 = new Models.RelationshipModel();
-
- let capability:Models.Capability = vl.capabilities.findValueByKey('linkable')[0];
- relationship1.setRelationProperties(capability, match.requirement);
- relationship2.setRelationProperties(capability, match.secondRequirement);
-
- newRelationshipModel1.setRelationshipModelParams(match.fromNode, vl.uniqueId, [relationship1]);
- newRelationshipModel2.setRelationshipModelParams(match.toNode, vl.uniqueId, [relationship2]);
-
- return [newRelationshipModel1, newRelationshipModel2];
- };
-
- private createVlinks = (cy:Cy.Instance, component:Models.Components.Component, matchReqToReq:Models.MatchReqToReq, vl:Models.Components.Component):void => {
-
- let componentInstance:Models.ComponentsInstances.ComponentInstance = this.componentInstanceFactory.createComponentInstanceFromComponent(vl);
- let fromNodePosition:Cy.Position = cy.getElementById(matchReqToReq.fromNode).relativePosition();
- let toNodePosition:Cy.Position = cy.getElementById(matchReqToReq.toNode).relativePosition();
- let location:Cy.Position = {
- x: 0.5 * (fromNodePosition.x + toNodePosition.x),
- y: 0.5 * (fromNodePosition.y + toNodePosition.y)
- }
-
- componentInstance.posX = location.x;
- componentInstance.posY = location.y;
-
- let onFailed:(error:any) => void = (error:any) => {
- this.loaderService.hideLoader('composition-graph');
- console.info('onFailed', error);
- };
-
- let onSuccess = (response:Models.ComponentsInstances.ComponentInstance):void => {
-
- console.info('onSuccses', response);
- response.requirements = new Models.RequirementsGroup(vl.requirements);
- response.capabilities = new Models.CapabilitiesGroup(vl.capabilities);
- response.componentVersion = vl.version;
- response.setInstanceRC();
-
- let newLinks = this.setVLlinks(matchReqToReq, response);
- let newNode = this.nodesFactory.createNode(response);
-
- this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode);
-
- _.forEach(newLinks, (link) => {
- let linkObg:Models.CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, link, link.relationships[0]);
- this.createLink(linkObg, cy, component);
- });
- };
- component.createComponentInstance(componentInstance).then(onSuccess, onFailed);
- };
-
- private createSimpleLink = (match:Models.MatchReqToCapability, cy:Cy.Instance, component:Models.Components.Component):void => {
- let newRelation:Models.RelationshipModel = match.matchToRelationModel();
- let linkObg:Models.CompositionCiLinkBase = this.linksFactory.createGraphLink(cy,newRelation, newRelation.relationships[0]);
- this.createLink(linkObg, cy, component);
- };
-
- public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Models.MatchBase, vl:Models.Components.Component, component:Models.Components.Component):void => {
-
- if (chosenMatch) {
- if (chosenMatch && chosenMatch instanceof Models.MatchReqToReq) {
- this.createVlinks(cy, component, chosenMatch, vl); //TODO orit implement
- }
- if (chosenMatch && chosenMatch instanceof Models.MatchReqToCapability) {
- 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<Models.MatchBase>}
- */
- public filterUcpeLinks(fromNode: Models.Graph.CompositionCiNodeBase, toNode: Models.Graph.CompositionCiNodeBase, matchesArray: Array<Models.MatchBase>): any {
-
- let matchLink: Array<Models.MatchBase>;
-
- if (fromNode.isUcpePart) {
- matchLink = _.filter(matchesArray, (match: Models.MatchBase) => {
- return match.isOwner(fromNode.id);
- });
- }
-
- if (toNode.isUcpePart) {
- matchLink = _.filter(matchesArray, (match: Models.MatchBase) => {
- 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):Models.RelationMenuDirectiveObj {
-
- if(!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)){ return null; }
- let linkModel:Array<Models.CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy);
-
- let possibleRelations:Array<Models.MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance,
- toNode.data().componentInstance, linkModel, this.mp2mpVL); //TODO orit - add p2p and mp2mp
-
- //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 Models.RelationMenuDirectiveObj(fromNode.data(), toNode.data(), this.mp2mpVL, this.p2pVL, menuPosition, 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:Models.Components.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: Models.Components.Component, cy:Cy.Instance, ucpeNode:Models.Graph.NodeUcpe, vfNode:Models.Graph.CompositionCiNodeVf):void => {
- let hostedOnMatch:Models.MatchReqToCapability = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance);
- /* create relation */
- let newRelation = new Models.RelationshipModel();
- newRelation.fromNode = ucpeNode.id;
- newRelation.toNode = vfNode.id;
-
- let link:Models.CompositionCiLinkBase = this.linksFactory.createUcpeHostLink(newRelation);
- link.relation = hostedOnMatch.matchToRelationModel();
- this.createLink(link, cy, component);
- };
-
-
- /**
- * Handles click event on links.
- * If one edge selected: do nothing.
- /*Two edges selected - always select all
- /* Three 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 > 2 && event.cyTarget[0].selected()) {
- cy.$(':selected').unselect();
- } else {
-
- let vl: Cy.CollectionNodes = event.cyTarget[0].target('.vl-node');
- let connectedEdges:Cy.CollectionEdges = vl.connectedEdges();
- if (vl.length && connectedEdges.length > 1) {
-
- setTimeout(() => {
- vl.select();
- connectedEdges.select();
- }, 0);
- }
- }
-
- }
-
-
- /**
- * Calculates the position for the menu that modifies an existing link
- * @param event
- * @param elementWidth
- * @param elementHeight
- * @returns {Sdc.Models.Graph.Point}
- */
- public calculateLinkMenuPosition(event, elementWidth, elementHeight): Sdc.Models.Graph.Point {
- let point: Sdc.Models.Graph.Point = new Sdc.Models.Graph.Point(event.originalEvent.x,event.originalEvent.y);
- 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 {Models.LinkMenu}
- */
- public getModifyLinkMenu(link:Cy.CollectionFirstEdge, event:Cy.EventObject):Models.LinkMenu{
- let point:Sdc.Models.Graph.Point = this.calculateLinkMenuPosition(event,Sdc.Utils.Constants.GraphUIObjects.MENU_LINK_VL_WIDTH_OFFSET,Sdc.Utils.Constants.GraphUIObjects.MENU_LINK_VL_HEIGHT_OFFSET);
- let menu:Models.LinkMenu = new Models.LinkMenu(point, true, link);
- return menu;
- };
-
- }
-
-
-
- CompositionGraphLinkUtils.$inject = [
- 'LinksFactory',
- 'LoaderService',
- 'CompositionGraphGeneralUtils',
- 'LeftPaletteLoaderService',
- 'ComponentInstanceFactory',
- 'NodesFactory',
- 'CommonGraphUtils',
- 'MatchCapabilitiesRequirementsUtils'
- ];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
deleted file mode 100644
index 95c31d16b1..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * Created by obarda on 11/9/2016.
- */
-
-/// <reference path="../../../../references"/>
-module Sdc.Graph.Utils {
-
- export class CompositionGraphNodesUtils {
- constructor(private NodesFactory:Sdc.Utils.NodesFactory, private $log:ng.ILogService,
- private GeneralGraphUtils:Graph.Utils.CompositionGraphGeneralUtils,
- private commonGraphUtils: Sdc.Graph.Utils.CommonGraphUtils,
- private eventListenerService: Services.EventListenerService,
- private loaderService:Services.LoaderService) {
-
- }
-
- /**
- * 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();
- })
- };
-
- /**
- * 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:Models.Components.Component, nodeToDelete:Cy.CollectionNodes):void {
-
- this.loaderService.showLoader('composition-graph');
- let onSuccess:(response:Models.ComponentsInstances.ComponentInstance) => void = (response:Models.ComponentsInstances.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(Sdc.Utils.Constants.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 Sdc.Models.Graph.CompositionCiNodeVl)){
- let connectedVls:Array<Cy.CollectionFirstNode> = this.getConnectedVlToNode(nodeToDelete);
- this.handleConnectedVlsToDelete(connectedVls);
- }
-
- //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 Models.Graph.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(Sdc.Utils.Constants.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:Models.Components.Component, cy:Cy.Instance, node:Cy.CollectionNodes):Cy.CollectionNodes =>{
- if(node.data() instanceof Models.Graph.CompositionCiNodeVl){ return;}
-
- let connectedVLsToDelete:Cy.CollectionNodes = cy.collection();
- _.forEach(node.neighborhood('node'), (connectedNode) => {
-
- //Find all neighboring nodes that are VLs
- if(connectedNode.data() instanceof Models.Graph.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:Models.Components.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<Models.ComponentsInstances.ComponentInstance> = new Array<Models.ComponentsInstances.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<Models.ComponentsInstances.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(Sdc.Utils.Constants.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(Sdc.Utils.Constants.GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, node, ucpeContainer, true);
- }
- }
-
- }
-
-
- CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService'];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
deleted file mode 100644
index 5a401df317..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-/**
- * Created by obarda on 1/1/2017.
- */
-/// <reference path="../../../../references"/>
-module Sdc.Graph.Utils {
-
- export class MatchCapabilitiesRequirementsUtils {
-
- constructor() {
- }
-
-
-
- public static linkable(requirement1:Models.Requirement, requirement2:Models.Requirement, vlCapability:Models.Capability):boolean {
- return MatchCapabilitiesRequirementsUtils.isMatch(requirement1, vlCapability) && MatchCapabilitiesRequirementsUtils.isMatch(requirement2, vlCapability);
- };
-
-
- /**
- * 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});
- })
- }
-
- // -------------------------------------------ALL FUNCTIONS NEED REFACTORING---------------------------------------------------------------//
-
- private static requirementFulfilled(fromNodeId:string, requirement:any, links:Array<Models.CompositionCiLinkBase>):boolean {
- return _.some(links, {
- 'relation': {
- 'fromNode': fromNodeId,
- 'relationships': [{
- 'requirementOwnerId': requirement.ownerId,
- 'requirement': requirement.name,
- 'relationship': {
- 'type': requirement.relationship
- }
- }
- ]
- }
- });
- };
-
- private static isMatch(requirement:Models.Requirement, capability:Models.Capability):boolean {
- if (capability.type === requirement.capability) {
- if (requirement.node) {
- if (_.includes(capability.capabilitySources, requirement.node)) {
- return true;
- }
- } else {
- return true;
- }
- }
- return false;
- };
-
- private getFromToMatches(requirements1:Models.RequirementsGroup,
- requirements2:Models.RequirementsGroup,
- capabilities:Models.CapabilitiesGroup,
- links:Array<Models.CompositionCiLinkBase>,
- fromId:string,
- toId:string,
- vlCapability?:Models.Capability):Array<Models.MatchBase> {
- let matches:Array<Models.MatchBase> = new Array<Models.MatchBase>();
- _.forEach(requirements1, (requirementValue:Array<Models.Requirement>, key) => {
- _.forEach(requirementValue, (requirement:Models.Requirement) => {
- if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromId, requirement, links)) {
- _.forEach(capabilities, (capabilityValue:Array<Models.Capability>, key) => {
- _.forEach(capabilityValue, (capability:Models.Capability) => {
- if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
- let match:Models.MatchReqToCapability = new Models.MatchReqToCapability(requirement, capability, true, fromId, toId);
- matches.push(match);
- }
- });
- });
- if (vlCapability) {
- _.forEach(requirements2, (requirement2Value:Array<Models.Requirement>, key) => {
- _.forEach(requirement2Value, (requirement2:Models.Requirement) => {
- if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement2, links) && MatchCapabilitiesRequirementsUtils.linkable(requirement, requirement2, vlCapability)) {
- let match:Models.MatchReqToReq = new Models.MatchReqToReq(requirement, requirement2, true, fromId, toId);
- matches.push(match);
- }
- });
- });
- }
- }
- });
- });
- return matches;
- }
-
- private getToFromMatches(requirements:Models.RequirementsGroup, capabilities:Models.CapabilitiesGroup, links:Array<Models.CompositionCiLinkBase>, fromId:string, toId:string):Array<Models.MatchReqToCapability> {
- let matches:Array<Models.MatchReqToCapability> = [];
- _.forEach(requirements, (requirementValue:Array<Models.Requirement>, key) => {
- _.forEach(requirementValue, (requirement:Models.Requirement) => {
- if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement, links)) {
- _.forEach(capabilities, (capabilityValue:Array<Models.Capability>, key) => {
- _.forEach(capabilityValue, (capability:Models.Capability) => {
- if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
- let match:Models.MatchReqToCapability = new Models.MatchReqToCapability(requirement, capability, false, toId, fromId);
- matches.push(match);
- }
- });
- });
- }
- });
- });
- return matches;
- }
-
- public getMatchedRequirementsCapabilities(fromComponentInstance:Models.ComponentsInstances.ComponentInstance,
- toComponentInstance:Models.ComponentsInstances.ComponentInstance,
- links:Array<Models.CompositionCiLinkBase>,
- vl?:Models.Components.Component):Array<Models.MatchBase> {//TODO allow for VL array
- let linkCapability;
- if (vl) {
- let linkCapabilities:Array<Models.Capability> = vl.capabilities.findValueByKey('linkable');
- if (linkCapabilities) {
- linkCapability = linkCapabilities[0];
- }
- }
- let fromToMatches:Array<Models.MatchBase> = this.getFromToMatches(fromComponentInstance.requirements,
- toComponentInstance.requirements,
- toComponentInstance.capabilities,
- links,
- fromComponentInstance.uniqueId,
- toComponentInstance.uniqueId,
- linkCapability);
- let toFromMatches:Array<Models.MatchReqToCapability> = this.getToFromMatches(toComponentInstance.requirements,
- fromComponentInstance.capabilities,
- links,
- fromComponentInstance.uniqueId,
- toComponentInstance.uniqueId);
-
- return fromToMatches.concat(toFromMatches);
- }
-
-
-
-
-
- /**
- * Step I: Check if capabilities of component match requirements of nodeDataArray
- * 1. Get component capabilities and loop on each capability
- * 2. Inside the loop, perform another loop on all nodeDataArray, and fetch the requirements for each one
- * 3. Loop on the requirements, and verify match (see in code the rules)
- *
- * Step II: Check if requirements of component match capabilities of nodeDataArray
- * 1. Get component requirements and loop on each requirement
- * 2.
- *
- * @param component - this is the hovered resource of the left panel of composition screen
- * @param nodeDataArray - Array of resource instances that are on the canvas
- * @param links -getMatchedRequirementsCapabilities
- * @param vl -
- * @returns {any[]|T[]}
- */
- public findByMatchingCapabilitiesToRequirements(component:Models.Components.Component,
- nodeDataArray:Array<Models.Graph.CompositionCiNodeBase>,
- links:Array<Models.CompositionCiLinkBase>,
- vl?:Models.Components.Component):Array<any> {//TODO allow for VL array
- let res = [];
-
- // STEP I
- {
- let capabilities:any = component.capabilities;
- _.forEach(capabilities, (capabilityValue:Array<any>, capabilityKey)=> {
- _.forEach(capabilityValue, (capability)=> {
- _.forEach(nodeDataArray, (node:Models.Graph.CompositionCiNodeBase)=> {
- if (node && node.componentInstance) {
- let requirements:any = node.componentInstance.requirements;
- let fromNodeId:string = node.componentInstance.uniqueId;
- _.forEach(requirements, (requirementValue:Array<any>, requirementKey)=> {
- _.forEach(requirementValue, (requirement)=> {
- if (requirement.name !== "dependency" && MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)
- && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) {
- res.push(node);
- }
- });
- });
- }
- });
- });
- });
- }
-
- // STEP II
- {
- let requirements:any = component.requirements;
- let fromNodeId:string = component.uniqueId;
- let linkCapability:Array<Models.Capability> = vl ? vl.capabilities.findValueByKey('linkable') : undefined;
-
- _.forEach(requirements, (requirementValue:Array<any>, requirementKey)=> {
- _.forEach(requirementValue, (requirement)=> {
- if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) {
- _.forEach(nodeDataArray, (node:any)=> {
- if (node && node.componentInstance && node.category !== 'groupCp') {
- let capabilities:any = node.componentInstance.capabilities;
- _.forEach(capabilities, (capabilityValue:Array<any>, capabilityKey)=> {
- _.forEach(capabilityValue, (capability)=> {
- if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
- res.push(node);
- }
- });
- });
- if (linkCapability) {
- let linkRequirements = node.componentInstance.requirements;
- _.forEach(linkRequirements, (value:Array<any>, key)=> {
- _.forEach(value, (linkRequirement)=> {
- if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(node.componentInstance.uniqueId, linkRequirement, links)
- && MatchCapabilitiesRequirementsUtils.linkable(requirement, linkRequirement, linkCapability[0])) {
- res.push(node);
- }
- });
- });
- }
- }
- });
- }
- });
- });
- }
-
- return _.uniq(res);
- };
- }
-
- MatchCapabilitiesRequirementsUtils.$inject = [];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
deleted file mode 100644
index d6d4aef374..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Created by obarda on 12/19/2016.
- */
-/// <reference path="../../../references"/>
-module Sdc.Directives {
-
- import Util = jasmine.Util;
-
- interface IDeploymentGraphScope extends ng.IScope {
- component:Models.Components.Component;
- }
-
- export class DeploymentGraph implements ng.IDirective {
- private _cy:Cy.Instance;
-
- constructor(private NodesFactory:Utils.NodesFactory, private commonGraphUtils:Graph.Utils.CommonGraphUtils,
- private deploymentGraphGeneralUtils:Graph.Utils.DeploymentGraphGeneralUtils, private ComponentInstanceFactory: Sdc.Utils.ComponentInstanceFactory) {
- }
-
- restrict = 'E';
- templateUrl = '/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html';
- scope = {
- component: '=',
- isViewOnly: '='
- };
-
- link = (scope:IDeploymentGraphScope, el:JQuery) => {
- if(scope.component.isResource()) {
- this.loadGraph(scope, el);
- this.registerGraphEvents();
- }
- };
-
-
- public initGraphNodes = (cy:Cy.Instance, component:Models.Components.Component):void => {
- if (component.groups) { // Init module nodes
- _.each(component.groups, (groupModule:Models.Module) => {
- let moduleNode = this.NodesFactory.createModuleNode(groupModule);
- this.commonGraphUtils.addNodeToGraph(cy, moduleNode);
-
- });
- }
- _.each(component.componentInstances, (instance:Models.ComponentsInstances.ComponentInstance) => { // Init component instance nodes
- let componentInstanceNode = this.NodesFactory.createNode(instance);
- componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.groups, instance.uniqueId);
- if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
- this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, componentInstanceNode);
- }
- });
-
- // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
- // so we must add an empty dummy child node
- _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
- if (!moduleNode.isParent()) {
- let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance();
- let componentInstanceNode = this.NodesFactory.createNode(dummyInstance);
- componentInstanceNode.parent = moduleNode.id();
- let dummyNode = this.commonGraphUtils.addNodeToGraph(cy, componentInstanceNode, moduleNode.position());
- dummyNode.addClass('dummy-node');
- }
- })
- };
-
- private registerGraphEvents() {
-
- this._cy.on('afterExpand', (event) => {
- event.cyTarget.qtip({});
- });
-
- this._cy.on('afterCollapse', (event) => {
- this.commonGraphUtils.initNodeTooltip(event.cyTarget);
- });
- }
-
- private loadGraph = (scope:IDeploymentGraphScope, el:JQuery) => {
-
- let graphEl = el.find('.sdc-deployment-graph-wrapper');
- this._cy = cytoscape({
- container: graphEl,
- style: Sdc.Graph.Utils.ComponentIntanceNodesStyle.getCompositionGraphStyle().concat(Sdc.Graph.Utils.ModulesNodesStyle.getModuleGraphStyle()),
- zoomingEnabled: false,
- selectionType: 'single',
-
- });
-
- //adding expand collapse extension
- this._cy.expandCollapse({
- layoutBy: {
- name: "grid",
- animate: true,
- randomize: false,
- fit: true
- },
- fisheye: false,
- undoable: false,
- expandCollapseCueSize: 18,
- expandCueImage: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'closeModule.png',
- collapseCueImage: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'openModule.png',
- expandCollapseCueSensitivity: 2,
- cueOffset: -20
- });
-
- this.initGraphNodes(this._cy, scope.component); //creating instances nodes
- this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations);
- this._cy.collapseAll();
- };
-
- public static factory = (NodesFactory:Utils.NodesFactory, CommonGraphUtils:Graph.Utils.CommonGraphUtils, DeploymentGraphGeneralUtils:Graph.Utils.DeploymentGraphGeneralUtils, ComponentInstanceFactory: Utils.ComponentInstanceFactory) => {
- return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory)
- }
- }
-
- DeploymentGraph.factory.$inject = ['NodesFactory', 'CommonGraphUtils', 'DeploymentGraphGeneralUtils', 'ComponentInstanceFactory'];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html
deleted file mode 100644
index 55e1c131f4..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<div class="sdc-deployment-graph-wrapper" ng-class="{'view-only':isViewOnly}">
-</div> \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.less b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.less
deleted file mode 100644
index ff8fc46380..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.less
+++ /dev/null
@@ -1,14 +0,0 @@
-deployment-graph {
- display: block;
- height:100%;
- width: 100%;
-
- .sdc-deployment-graph-wrapper {
- height:100%;
- width: 100%;
- }
-
- .view-only{
- background-color:rgb(248, 248, 248);
- }
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
deleted file mode 100644
index 3ad9da56be..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Created by obarda on 12/21/2016.
- */
-/// <reference path="../../../../references"/>
-module Sdc.Graph.Utils {
-
- export class DeploymentGraphGeneralUtils {
-
- constructor() {
-
- }
-
- public findInstanceModule = (groupsArray:Array<Models.Module>, componentInstanceId:string):string => {
- let parentGroup:Sdc.Models.Module = _.find(groupsArray, (group:Sdc.Models.Module) => {
- return _.find(group.members, (member) => {
- return member === componentInstanceId;
- });
- });
- return parentGroup ? parentGroup.uniqueId : "";
- };
- }
-
- DeploymentGraphGeneralUtils.$inject = [];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/image-creator/image-creator.service.ts b/catalog-ui/app/scripts/directives/graphs-v2/image-creator/image-creator.service.ts
deleted file mode 100644
index e3b17e163d..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/image-creator/image-creator.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-module Sdc.Utils {
- export class ImageCreatorService {
- static '$inject' = ['$q'];
- private _canvas: HTMLCanvasElement;
-
- constructor(private $q: ng.IQService) {
- this._canvas = <HTMLCanvasElement>$('<canvas>')[0];
- this._canvas.setAttribute('style', 'display:none');
-
- let body = document.getElementsByTagName('body')[0];
- body.appendChild(this._canvas);
- }
-
- getImageBase64(imageBaseUri: string, imageLayerUri: string): ng.IPromise<string> {
- let deferred = this.$q.defer();
- let imageBase = new Image();
- let imageLayer = new Image();
- let imagesLoaded = 0;
- let onImageLoaded = () => {
- imagesLoaded++;
-
- if (imagesLoaded < 2) {
- return;
- }
- this._canvas.setAttribute('width', imageBase.width.toString());
- this._canvas.setAttribute('height', imageBase.height.toString());
-
- let canvasCtx = this._canvas.getContext('2d');
- canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-
- canvasCtx.drawImage(imageBase, 0, 0, imageBase.width, imageBase.height);
- canvasCtx.drawImage(imageLayer, imageBase.width - imageLayer.width, 0, imageLayer.width, imageLayer.height);
-
- let base64Image = this._canvas.toDataURL();
- deferred.resolve(base64Image);
- };
-
- imageBase.onload = onImageLoaded;
- imageLayer.onload = onImageLoaded;
- imageBase.src = imageBaseUri;
- imageLayer.src = imageLayerUri;
-
- return deferred.promise;
- }
- }
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts b/catalog-ui/app/scripts/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
deleted file mode 100644
index 26c042611c..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-interface IDragDropEvent extends JQueryEventObject {
- dataTransfer: any;
- toElement: {
- naturalWidth: number;
- naturalHeight: number;
- }
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.directive.ts
deleted file mode 100644
index c00da6d1df..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.directive.ts
+++ /dev/null
@@ -1,327 +0,0 @@
-/// <reference path="../../../references"/>
-
-module Sdc.Directives {
- import Dictionary = Sdc.Utils.Dictionary;
- import GRAPH_EVENTS = Sdc.Utils.Constants.GRAPH_EVENTS;
- import ImageCreatorService = Sdc.Utils.ImageCreatorService;
- interface IPaletteScope {
- components: any;
- currentComponent: any;
- model: any;
- displaySortedCategories: any;
- expandedSection: string;
-
- p2pVL: Models.Components.Component;
- mp2mpVL: Models.Components.Component;
- vlType: string;
- dragElement: JQuery;
- dragbleNode: {
- event: JQueryEventObject,
- components: Models.DisplayComponent,
- ui: any
- }
-
- sectionClick: (section: string)=>void;
- searchComponents: (searchText: string)=>void;
- onMouseOver: (displayComponent: Models.DisplayComponent)=>void;
- onMouseOut: (displayComponent: Models.DisplayComponent)=>void;
- dragStartCallback: (event: JQueryEventObject, ui, displayComponent: Models.DisplayComponent)=>void;
- dragStopCallback: ()=>void;
- onDragCallback: (event:JQueryEventObject) => void;
- setElementTemplate: (e: JQueryEventObject)=>void;
-
- isOnDrag: boolean;
- isDragable: boolean;
- isLoading: boolean;
- isViewOnly: boolean;
- }
-
- export class Palette implements ng.IDirective {
- constructor(private $log: ng.ILogService,
- private LeftPaletteLoaderService,
- private sdcConfig,
- private ComponentFactory,
- private ComponentInstanceFactory: Utils.ComponentInstanceFactory,
- private NodesFactory: Utils.NodesFactory,
- private CompositionGraphGeneralUtils: Graph.Utils.CompositionGraphGeneralUtils,
- private EventListenerService: Services.EventListenerService,
- private sdcMenu: Models.IAppMenu) {
-
- }
-
- private fetchingComponentFromServer: boolean = false;
- private nodeHtmlSubstitute: JQuery;
-
- scope = {
- components: '=',
- currentComponent: '=',
- isViewOnly: '=',
- isLoading: '='
- };
- restrict = 'E';
- templateUrl = '/app/scripts/directives/graphs-v2/palette/palette.html';
-
- link = (scope: IPaletteScope, el: JQuery) => {
- this.nodeHtmlSubstitute = $('<div class="node-substitute"><span></span><img /></div>');
- el.append(this.nodeHtmlSubstitute);
-
- this.initComponents(scope);
- this.initScopeVls(scope);
- this.initEvents(scope);
- this.initDragEvents(scope);
- this._initExpandedSection(scope, '');
- };
-
- private leftPanelResourceFilter(resourcesNotAbstract: Array<Models.DisplayComponent>, resourceFilterTypes: Array<string>): Array<Models.DisplayComponent> {
- let filterResources = _.filter(resourcesNotAbstract, (component) => {
- return resourceFilterTypes.indexOf(component.getComponentSubType()) > -1;
- });
- return filterResources;
- }
-
- private initLeftPanel(leftPanelComponents: Array<Models.DisplayComponent>, resourceFilterTypes: Array<string>): Models.LeftPanelModel {
- let leftPanelModel = new Models.LeftPanelModel();
-
- if (resourceFilterTypes && resourceFilterTypes.length) {
- leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes);
- }
- leftPanelModel.numberOfElements = leftPanelComponents && leftPanelComponents.length || 0;
-
- if (leftPanelComponents && leftPanelComponents.length) {
-
- let categories: any = _.groupBy(leftPanelComponents, 'mainCategory');
- for (let category in categories)
- categories[category] = _.groupBy(categories[category], 'subCategory');
-
- leftPanelModel.sortedCategories = categories;
- }
- return leftPanelModel;
- }
-
- private initScopeVls(scope: IPaletteScope): void {
- let vls = this.LeftPaletteLoaderService.getFullDataComponentList(Utils.Constants.ResourceType.VL);
- scope.vlType = null;
- vls.forEach((item) => {
- let key = _.find(Object.keys(item.capabilities), (key) => {
- return _.includes(key.toLowerCase(), 'linkable');
- });
- let linkable = item.capabilities[key];
- if (linkable) {
- if (linkable[0].maxOccurrences == '2') {
- scope.p2pVL = _.find(vls, (component: Models.Components.Component) => {
- return component.uniqueId === item.uniqueId;
- });
-
- } else {//assuming unbounded occurrences
- scope.mp2mpVL = _.find(vls, (component: Models.Components.Component) => {
- return component.uniqueId === item.uniqueId;
- });
- }
- }
- });
- };
-
- private initEvents(scope: IPaletteScope) {
- /**
- *
- * @param section
- */
- scope.sectionClick = (section: string) => {
- if (section === scope.expandedSection) {
- scope.expandedSection = '';
- return;
- }
- scope.expandedSection = section;
- };
-
- scope.onMouseOver = (displayComponent: Models.DisplayComponent) => {
- if (scope.isOnDrag) {
- return;
- }
- scope.isOnDrag = true;
-
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent);
- this.$log.debug('palette::onMouseOver:: fired');
-
- if (this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.containsKey(displayComponent.uniqueId)) {
- this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} found in cache`);
- let cacheComponent: Models.Components.Component = this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.getValue(displayComponent.uniqueId);
-
- //TODO: Danny: fire event to highlight matching nodes
- //showMatchingNodes(cacheComponent);
- return;
- }
-
- this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} not found in cache, initiating server get`);
- // This will bring the component from the server including requirements and capabilities
- // Check that we do not fetch many times, because only in the success we add the component to componentRequirementsAndCapabilitiesCaching
- if (this.fetchingComponentFromServer) {
- return;
- }
-
- this.fetchingComponentFromServer = true;
- this.ComponentFactory.getComponentFromServer(displayComponent.componentSubType, displayComponent.uniqueId)
- .then((component: Models.Components.Component) => {
- this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} fetch success`);
- this.LeftPaletteLoaderService.updateSpecificComponentLeftPalette(component, scope.currentComponent.componentType);
- this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.setValue(component.uniqueId, component);
- this.fetchingComponentFromServer = false;
-
- //TODO: Danny: fire event to highlight matching nodes
- //showMatchingNodes(component);
- })
- .catch(() => {
- this.$log.debug('palette::onMouseOver:: component id fetch error');
- this.fetchingComponentFromServer = false;
- });
-
-
- };
-
- scope.onMouseOut = () => {
- scope.isOnDrag = false;
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
- }
- }
-
- private initComponents(scope: IPaletteScope) {
- scope.searchComponents = (searchText: any): void => {
- scope.displaySortedCategories = this._searchComponents(searchText, scope.model.sortedCategories);
- this._initExpandedSection(scope, searchText);
- };
-
- scope.isDragable = scope.currentComponent.isComplex();
- let entityType: string = scope.currentComponent.componentType.toLowerCase();
- let resourceFilterTypes: Array<string> = this.sdcConfig.resourceTypesFilter[entityType];
-
- scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType);
- scope.model = this.initLeftPanel(scope.components, resourceFilterTypes);
- scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
- }
-
- private _initExpandedSection(scope: IPaletteScope, searchText: string): void {
- if (searchText == '') {
- let isContainingCategory: boolean = false;
- let categoryToExpand: string;
- if (scope.currentComponent && scope.currentComponent.categories && scope.currentComponent.categories[0]) {
- categoryToExpand = this.sdcMenu.categoriesDictionary[scope.currentComponent.categories[0].name];
- for (let category in scope.model.sortedCategories) {
- if (categoryToExpand == category) {
- isContainingCategory = true;
- break;
- }
- }
- }
- isContainingCategory ? scope.expandedSection = categoryToExpand : scope.expandedSection = 'Generic';
- }
- else {
- scope.expandedSection = Object.keys(scope.displaySortedCategories).sort()[0];
- }
- };
-
- private initDragEvents(scope: IPaletteScope) {
- scope.dragStartCallback = (event: IDragDropEvent, ui, displayComponent: Models.DisplayComponent): void => {
- if (scope.isLoading || !scope.isDragable || scope.isViewOnly) {
- return;
- }
-
- let component = _.find(this.LeftPaletteLoaderService.getFullDataComponentListWithVls(scope.currentComponent.componentType), (componentFullData: Models.DisplayComponent) => {
- return displayComponent.uniqueId === componentFullData.uniqueId;
- });
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component);
-
- scope.isOnDrag = true;
-
-
-
- // this.graphUtils.showMatchingNodes(component, myDiagram, scope.sdcConfig.imagesPath);
- // document.addEventListener('mousemove', moveOnDocument);
- event.dataTransfer.component = component;
- };
-
- scope.dragStopCallback = () => {
- scope.isOnDrag = false;
- };
-
- scope.onDragCallback = (event:IDragDropEvent): void => {
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, event);
- };
- scope.setElementTemplate = (e) => {
- let dragComponent: Models.Components.Component = _.find(this.LeftPaletteLoaderService.getFullDataComponentListWithVls(scope.currentComponent.componentType),
- (fullComponent: Models.Components.Component) => {
- return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId;
- });
- let componentInstance: Models.ComponentsInstances.ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
- let node: Models.Graph.CompositionCiNodeBase = this.NodesFactory.createNode(componentInstance);
-
- // myDiagram.dragFromPalette = node;
- this.nodeHtmlSubstitute.find("img").attr('src', node.img);
- scope.dragElement = this.nodeHtmlSubstitute.clone().show();
-
- return scope.dragElement;
- };
- }
-
- private _searchComponents = (searchText: string, categories: any): void => {
- let displaySortedCategories = angular.copy(categories);
- if (searchText != '') {
- angular.forEach(categories, function (category: any, categoryKey) {
-
- angular.forEach(category, function (subcategory: Array<Models.DisplayComponent>, subcategoryKey) {
- let filteredResources = [];
- angular.forEach(subcategory, function (component: Models.DisplayComponent) {
-
- let resourceFilterTerm: string = component.searchFilterTerms;
- if (resourceFilterTerm.indexOf(searchText.toLowerCase()) >= 0) {
- filteredResources.push(component);
- }
- });
- if (filteredResources.length > 0) {
- displaySortedCategories[categoryKey][subcategoryKey] = filteredResources;
- }
- else {
- delete displaySortedCategories[categoryKey][subcategoryKey];
- }
- });
- if (!(Object.keys(displaySortedCategories[categoryKey]).length > 0)) {
- delete displaySortedCategories[categoryKey];
- }
-
- });
- }
- return displaySortedCategories;
- };
-
- public static factory = ($log,
- LeftPaletteLoaderService,
- sdcConfig,
- ComponentFactory,
- ComponentInstanceFactory,
- NodesFactory,
- CompositionGraphGeneralUtils,
- EventListenerService,
- sdcMenu) => {
- return new Palette($log,
- LeftPaletteLoaderService,
- sdcConfig,
- ComponentFactory,
- ComponentInstanceFactory,
- NodesFactory,
- CompositionGraphGeneralUtils,
- EventListenerService,
- sdcMenu);
- };
- }
-
- Palette.factory.$inject = [
- '$log',
- 'LeftPaletteLoaderService',
- 'sdcConfig',
- 'ComponentFactory',
- 'ComponentInstanceFactory',
- 'NodesFactory',
- 'CompositionGraphGeneralUtils',
- 'EventListenerService',
- 'sdcMenu'
- ];
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.html b/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.html
deleted file mode 100644
index a8dd827927..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<div class="w-sdc-designer-leftbar">
- <div class="w-sdc-designer-leftbar-title">Elements <span class="w-sdc-designer-leftbar-title-count">{{model.numberOfElements}}</span>
- </div>
-
- <div class="w-sdc-designer-leftbar-search">
- <input type="text" class="w-sdc-designer-leftbar-search-input" placeholder="Search..."
- data-ng-model="searchText" data-ng-change="searchComponents(searchText)"
- ng-model-options="{ debounce: 500 }" data-tests-id="searchAsset"/>
- <span class="w-sdc-search-icon leftbar" data-ng-class="{'cancel':searchText, 'magnification':!searchText}"
- data-ng-click="searchText=''; searchComponents('',categories)"></span>
- </div>
- <div class="i-sdc-designer-leftbar-section"
- data-ng-repeat="(entityCategory, objCategory) in displaySortedCategories track by $index"
- data-ng-class="{'expanded': expandedSection.indexOf(entityCategory) !== -1}">
- <div class="i-sdc-designer-leftbar-section-title pointer" data-ng-click="sectionClick(entityCategory)"
- data-tests-id="leftbar-section-title-{{entityCategory}}">
- {{entityCategory}}
- <div class="i-sdc-designer-leftbar-section-title-icon"></div>
- </div>
- <div class="i-sdc-designer-leftbar-section-content"
- data-ng-repeat="(subCategory, components) in objCategory track by $index">
- <div class="i-sdc-designer-leftbar-section-content-subcat i-sdc-designer-leftbar-section-content-item">
- {{subCategory}}
- </div>
- <div class="i-sdc-designer-leftbar-section-content-item"
- data-ng-class="{'default-pointer': isViewOnly}"
- data-ng-mouseover="!isViewOnly && onMouseOver(component)"
- data-ng-mouseleave="!isViewOnly && onMouseOut()"
- data-drag="{{!isViewOnly}}"
- data-jqyoui-options="{revert: 'invalid', helper:setElementTemplate, appendTo:'body', cursorAt: {left:38, top: 38}, cursor:'move'}"
- jqyoui-draggable="{index:{{$index}},animate:true,onStart:'dragStartCallback(component)',onStop:'dragStopCallback()', onDrag:'onDragCallback()'}"
- data-ng-repeat="component in components | orderBy: 'displayName' track by $index"
- data-tests-id={{component.displayName}}>
- <div class="i-sdc-designer-leftbar-section-content-item-icon-ph">
- <div class="medium {{component.iconClass}}"
- data-tests-id="leftbar-section-content-item-{{component.displayName}}">
- <div class="{{component.certifiedIconClass}}" uib-tooltip="Not certified"
- tooltip-class="uib-custom-tooltip" tooltip-placement="bottom" tooltip-popup-delay="700">
- </div>
- </div>
- </div>
- <div class="i-sdc-designer-leftbar-section-content-item-info">
- <span class="i-sdc-designer-leftbar-section-content-item-info-title"
- uib-tooltip="{{component.displayName}}" tooltip-class="uib-custom-tooltip"
- tooltip-placement="bottom" tooltip-popup-delay="700">
- {{component.displayName}}</span>
- <div class="i-sdc-designer-leftbar-section-content-item-info-text">
- V.{{component.version}}
- </div>
- <div class="i-sdc-designer-leftbar-section-content-item-info-text"> Type:
- {{component.componentSubType}}
- <a data-ng-click="openViewerModal(component)"
- class="i-sdc-designer-leftbar-section-content-item-info-text-link hand">More</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div> \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.less b/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.less
deleted file mode 100644
index 85657a43a5..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/palette/palette.less
+++ /dev/null
@@ -1,92 +0,0 @@
-.drag-icon-border{
- border: 7px solid red;
- border-radius: 500px;
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- width: 53px;
- height: 53px;
-}
-
-.drag-icon-circle{
- width: 60px;
- height: 60px;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border-radius: 50%;
- position: relative;
-
-}
-
-
-@green-shadow: rgba(29, 154, 149, 0.3);
-@red-shadow: rgba(218, 31, 61, 0.3);
-.drag-icon-circle .sprite-resource-icons {
- position: absolute;
- top: 10px;
- left: 10px;
-}
-
-.drag-icon-circle.red {
- background: @red-shadow;
-}
-
-.drag-icon-circle.green {
- background: @green-shadow;
-}
-
-
-.node-substitute {
- display: none;
- position: absolute;
- z-index: 9999;
- height: 80px;
- width: 80px;
- border-radius: 50%;
- text-align: center;
-
- span {
- display: inline-block;
- vertical-align: middle;
- height: 100%;
- }
-
- img {
- height: 40px;
- width: 40px;
- box-shadow: 0 0 0 10px @green-shadow;
- border-radius: 50%;
-
- -webkit-user-drag: none;
- -moz-user-drag: none;
- user-drag: none;
- }
- &.red img {
- box-shadow: 0 0 0 10px @red-shadow;
- }
- &.bounce img {
- -moz-animation:bounceOut 0.3s linear;
- -webkit-animation:bounceOut 0.3s linear;
- animation:bounceOut 0.3s linear;
- }
-}
-
-@keyframes bounceOut {
- 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
- 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
- 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
- 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}
-
-@-moz-keyframes bounceOut {
- 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
- 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
- 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
- 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}
-
-@-webkit-keyframes bounceOut {
- 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
- 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
- 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
- 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html
deleted file mode 100644
index a0a9e4af27..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<div class="link-menu-open" data-tests-id="link-menu-open" data-ng-show="isLinkMenuOpen" ng-style="{left: relationMenuDirectiveObj.menuPosition.x, top: relationMenuDirectiveObj.menuPosition.y}" clicked-outside="{onClickedOutside: 'hideRelationMatch()', clickedOutsideEnable: 'isLinkMenuOpen'}" >
- <h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.leftSideLink.componentInstance.name | resourceName}}</h4>
- <h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.rightSideLink.componentInstance.name | resourceName}}</h4>
-
- <p>Select one of the options below to connect</p>
-
- <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
- <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.leftSideLink.requirements, relationMenuDirectiveObj.rightSideLink.selectedMatch)">Requirements</div>
- <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req ,matchArr) in relationMenuDirectiveObj.leftSideLink.requirements"
- data-ng-click="relationMenuDirectiveObj.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
- data-ng-show="showMatch(relationMenuDirectiveObj.rightSideLink.selectedMatch, matchArr)"
- data-ng-class="{ 'selected': relationMenuDirectiveObj.leftSideLink.selectedMatch === matchArr}">
- <div sdc-smart-tooltip>{{matchArr[0].requirement.getFullTitle()}}</div>
- </div>
-
- <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.leftSideLink.capabilities, relationMenuDirectiveObj.rightSideLink.selectedMatch)">Capabilities</div>
- <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in relationMenuDirectiveObj.leftSideLink.capabilities"
- data-ng-click="relationMenuDirectiveObj.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
- data-ng-show="showMatch(relationMenuDirectiveObj.rightSideLink.selectedMatch, matchArr)"
- data-ng-class="{ 'selected': relationMenuDirectiveObj.leftSideLink.selectedMatch === matchArr}">
- <div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div>
- </div>
- </perfect-scrollbar>
-
- <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
- <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.rightSideLink.requirements, relationMenuDirectiveObj.leftSideLink.selectedMatch)">Requirements</div>
- <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req, matchArr) in relationMenuDirectiveObj.rightSideLink.requirements"
- data-ng-click="relationMenuDirectiveObj.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
- data-ng-show="showMatch(relationMenuDirectiveObj.leftSideLink.selectedMatch, matchArr)"
- data-ng-class="{ 'selected': relationMenuDirectiveObj.rightSideLink.selectedMatch === matchArr}">
- <div sdc-smart-tooltip>{{matchArr[0].secondRequirement ? matchArr[0].secondRequirement.getFullTitle() : matchArr[0].requirement.getFullTitle()}}</div>
- </div>
-
- <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.rightSideLink.capabilities, relationMenuDirectiveObj.leftSideLink.selectedMatch)">Capabilities</div>
- <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in relationMenuDirectiveObj.rightSideLink.capabilities"
- data-ng-click="relationMenuDirectiveObj.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
- data-ng-show="showMatch(relationMenuDirectiveObj.leftSideLink.selectedMatch, matchArr)"
- data-ng-class="{ 'selected': relationMenuDirectiveObj.rightSideLink.selectedMatch === matchArr}">
- <div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div>
- </div>
- </perfect-scrollbar>
-
- <div class="vl-type" data-ng-class="{'disabled': !relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement}">
- <sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="ptp"
- disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.p2pVL"
- text="Point to point" elem-id="radioPTP" elem-name="vlType"></sdc-radio-button>
-
- <sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="mptmp"
- disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.mp2mpVL"
- text="Multi point" elem-id="radioMPTMP" elem-name="vlType"></sdc-radio-button>
-
- <span class="sprite-new info-icon" tooltips tooltip-content="You are required to choose the type of the Virtual Link."></span>
- </div>
-
- <div class="result" sdc-smart-tooltip>&#8203;{{relationMenuDirectiveObj.selectionText}}
-
- </div>
-
- <button class="tlv-btn grey" data-tests-id="link-menu-button-cancel" data-ng-click="hideRelationMatch()">Cancel</button>
- <button class="tlv-btn blue" data-tests-id="link-menu-button-connect" data-ng-disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch || !relationMenuDirectiveObj.rightSideLink.selectedMatch ||
- (relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement && !relationMenuDirectiveObj.vlType)"
- data-ng-click="saveRelation()">Connect</button>
-</div>
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.less b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.less
deleted file mode 100644
index dea814dbec..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.less
+++ /dev/null
@@ -1,118 +0,0 @@
-.link-menu-open {
- display: block !important;
- color: @main_color_m;
- font-size: 14px;
- position: absolute;
- z-index: 99999;
- border-radius: 2px;
- background-color: #ffffff;
- box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
- width: 460px;
- height: 418px;
-
- h4 {
- width: 50%;
- float: left;
- background-color: @tlv_color_u;
- font-size: 14px;
- font-weight: bold;
- line-height: 36px;
- margin: 0;
- padding: 0 15px;
-
- & + h4 {
- border-left: #d8d8d8 1px solid;
- }
- }
- p {
- clear: both;
- text-indent: 15px;
- border-bottom: #d8d8d8 1px solid;
- line-height: 34px;
- margin: 0;
- color: @func_color_s;
- }
-
- .scrollbar-container {
- height: 232px;
- width: 50%;
- float: left;
- margin-bottom: 5px;
- .perfect-scrollbar;
-
- & + .scrollbar-container {
- border-left: #d8d8d8 1px solid;
- }
-
- .inner-title {
- width: 189px;
- margin: 5px auto 3px auto;
- //text-indent: 10px;
- color: @func_color_s;
- text-transform: uppercase;
- font-weight: bold;
-
- //&:not(:first-child) {
- // margin-top: 10px;
- //}
- }
-
- .link-item {
- padding: 0 10px;
- line-height: 23px;
- height: 23px;
- text-indent: 5px;
- .hand;
-
- &.selected {
- background-color: @tlv_color_v;
- }
- }
- }
-
- .vl-type {
- height: 33px;
- border-top: #d8d8d8 solid 1px;
- clear: both;
- padding: 0 10px;
- line-height: 32px;
- color: @main_color_m;
-
- &.disabled {
- background-color: #f2f2f2;
- color: @color_m;
- }
- .info-icon {
- float:right;
- margin-top: 9px;
- }
- .tlv-radio {
- margin-right: 10px;
- }
- }
-
- .result {
- background-color: @main_color_m;
- line-height: 29px;
- color: #ffffff;
- padding: 0 15px;
- }
-
- button {
- float: right;
- margin-top: 9px;
- margin-right: 10px;
- }
-}
-.link-menu-item {
- cursor: pointer;
- line-height: 24px;
- padding: 0 10px;
- &:hover {
- color: @color_a;
- }
-}
-.link-menu::before {
- right: inherit !important;
- left: 50px;
-} \ No newline at end of file
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts
deleted file mode 100644
index 22a2d078b7..0000000000
--- a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts
+++ /dev/null
@@ -1,113 +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=========================================================
- */
-/// <reference path="../../../references"/>
-module Sdc.Directives {
- 'use strict';
-
-
- export interface IRelationMenuScope extends ng.IScope {
- relationMenuDirectiveObj:Models.RelationMenuDirectiveObj;
- createRelation:Function;
- isLinkMenuOpen:boolean;
- hideRelationMatch:Function;
- cancel:Function;
-
- saveRelation();
- showMatch(arr1:Array<Models.MatchBase>, arr2:Array<Models.MatchBase>):boolean;
- hasMatchesToShow(matchesObj:Models.MatchBase, selectedMatch:Array<Models.MatchBase>);
- updateSelectionText():void;
-
- }
-
-
- export class RelationMenuDirective implements ng.IDirective {
-
- constructor(private $templateCache:ng.ITemplateCacheService,
- private $filter:ng.IFilterService
- ) {
- }
-
- scope = {
- relationMenuDirectiveObj: '=',
- isLinkMenuOpen: '=',
- createRelation: '&',
- cancel:'&'
- };
-
- restrict = 'E';
- replace = true;
- template = ():string => {
- return this.$templateCache.get('/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html');
- };
-
- link = (scope:IRelationMenuScope, element:JQuery, $attr:ng.IAttributes) => {
-
- scope.saveRelation = ():void=> {
- let chosenMatches:Array<any> = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch);
- let chosenMatch:Models.MatchBase = chosenMatches[0];
- let chosenVL:Models.Components.Component;
- if ("mptmp" === scope.relationMenuDirectiveObj.vlType) {
- chosenVL = scope.relationMenuDirectiveObj.mp2mpVL;
- } else {
- chosenVL = scope.relationMenuDirectiveObj.p2pVL;
- }
- scope.createRelation()(chosenMatch,chosenVL);
- };
-
-
- scope.hideRelationMatch = () => {
- scope.isLinkMenuOpen = false;
- scope.cancel();
- };
-
- //to show options in link menu
- scope.showMatch = (arr1:Array<Models.MatchBase>, arr2:Array<Models.MatchBase>):boolean => {
- return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0;
- };
-
- //to show requirements/capabilities title
- scope.hasMatchesToShow = (matchesObj:Models.MatchBase, selectedMatch:Array<Models.MatchBase>):boolean => {
- let result:boolean = false;
- _.forEach(matchesObj, (matchesArr:Array<Models.MatchBase>) => {
- if (!result) {
- result = scope.showMatch(matchesArr, selectedMatch);
- }
- });
- return result;
- };
-
-
- scope.updateSelectionText = ():void => {
- let left:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].getDisplayText('left')) : '';
- let both:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch && scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? ' - ' +
- this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].requirement.relationship) + ' - ' : '';
- let right:string = scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch[0].getDisplayText('right')) : '';
- scope.relationMenuDirectiveObj.selectionText = left + both + right;
- };
-
-
- }
- public static factory = ($templateCache:ng.ITemplateCacheService , $filter:ng.IFilterService)=> {
- return new RelationMenuDirective($templateCache, $filter);
- };
- }
-
- RelationMenuDirective.factory.$inject = ['$templateCache', '$filter'];
-}