diff options
Diffstat (limited to 'catalog-ui/src/app/directives')
42 files changed, 374 insertions, 4650 deletions
diff --git a/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts index 94f4643060..adec51f8e2 100644 --- a/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts +++ b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts @@ -67,12 +67,12 @@ export class ClickedOutsideDirective implements ng.IDirective { if (!container) { let clickedOutsideContainerSelector:string = clickedOutsideModel.getClickedOutsideContainerSelector(); if (!angular.isUndefined(clickedOutsideContainerSelector) && clickedOutsideContainerSelector !== '') { - container = element.parents(clickedOutsideContainerSelector + ':first')[0]; + container = <HTMLElement>element.parents(clickedOutsideContainerSelector + ':first')[0]; if (!container) { - container = element[0]; + container = <HTMLElement>element[0]; } } else { - container = element[0]; + container = <HTMLElement>element[0]; } } return container; @@ -85,7 +85,7 @@ export class ClickedOutsideDirective implements ng.IDirective { if (targetDomElementJq.hasClass('tooltip') || targetDomElementJq.parents('.tooltip:first').length) { return; } - let targetDomElement:HTMLElement = targetDomElementJq[0]; + let targetDomElement:HTMLElement = <HTMLElement>targetDomElementJq[0]; if (!containerDomElement.contains(targetDomElement)) { scope.$apply(() => { let onClickedOutsideGetter:Function = clickedOutsideModel.getOnClickedOutsideGetter(); diff --git a/catalog-ui/src/app/directives/download-artifact/download-artifact.ts b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts index deeb1f55d8..8f7735d1ec 100644 --- a/catalog-ui/src/app/directives/download-artifact/download-artifact.ts +++ b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts @@ -20,7 +20,8 @@ 'use strict'; import {IFileDownload, Component, ArtifactModel} from "app/models"; -import {EventListenerService, CacheService} from "app/services"; +import {EventListenerService} from "app/services"; +import {CacheService} from "app/services-ng2"; import {EVENTS, FileUtils} from "app/utils"; export class DOWNLOAD_CSS_CLASSES { diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts index 76bc1692b4..eb9e71fa30 100644 --- a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts +++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts @@ -23,6 +23,7 @@ import * as _ from "lodash"; import {IAppConfigurtaion, User, IUser} from "app/models"; import {IUserProperties} from "../../models/user"; import {UserService} from "../../ng2/services/user.service"; +import { AuthenticationService } from "../../ng2/services/authentication.service"; export class MenuItem { menuId:number; @@ -57,7 +58,8 @@ export class EcompHeaderDirective implements ng.IDirective { constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, - private userService:UserService) { + private userService:UserService, + private authService:AuthenticationService) { } @@ -92,7 +94,7 @@ export class EcompHeaderDirective implements ng.IDirective { let initUser = ():void => { let defaultUserId:string; - let userInfo:IUserProperties = this.userService.getLoggedinUser(); + let userInfo:IUserProperties = this.authService.getLoggedinUser(); if (!userInfo) { defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => { @@ -137,8 +139,9 @@ export class EcompHeaderDirective implements ng.IDirective { public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, - userService:UserService)=> { - return new EcompHeaderDirective($http, sdcConfig, userService); + userService:UserService, + authService:AuthenticationService)=> { + return new EcompHeaderDirective($http, sdcConfig, userService, authService); }; } @@ -231,7 +234,7 @@ export class EcompHeaderController { }; } -EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2']; +EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2', 'AuthenticationServiceNg2']; diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html index d59c44d67f..156192dd99 100644 --- a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html +++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html @@ -18,8 +18,8 @@ {{actualText}} <span class="ellipsis-directive-more-less" - data-ng-click="onMoreLessClick($event)" - data-ng-hide="ellipsis.length <= maxChars" - data-tests-id="ellipsis-more-less"> + data-ng-click="onMoreLessClick($event)" + data-ng-hide="ellipsis.length <= maxChars" + data-tests-id="ellipsis-more-less"> {{actualText ? (collapsed ? "More" : "Less") : ""}} </span> diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts index 21e074a8b9..be7547cd76 100644 --- a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts +++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts @@ -23,7 +23,6 @@ export interface IEllipsisScope extends ng.IScope { ellipsis:string; maxChars:number; toggleText():void; - onMoreLessClick(event): void; collapsed:boolean; actualText:string; diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html deleted file mode 100644 index b07668d6d9..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html +++ /dev/null @@ -1,28 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ - ~ Licensed under the Apache License, Version 2.0 (the "License"); - ~ you may not use this file except in compliance with the License. - ~ You may obtain a copy of the License at - ~ - ~ http://www.apache.org/licenses/LICENSE-2.0 - ~ - ~ Unless required by applicable law or agreed to in writing, software - ~ distributed under the License is distributed on an "AS IS" BASIS, - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - ~ See the License for the specific language governing permissions and - ~ limitations under the License. - --> - - -<div class="assetPopover" ng-class="assetPopoverObj.menuSide" ng-style="{left: assetPopoverObj.menuPosition.x, top: assetPopoverObj.menuPosition.y}"> - <div class="display-name-tooltip" >{{assetPopoverObj.displayName}}</div> - - <div class="assetMenu"> - <!--<div class="sprite-new expand-asset-icon" uib-tooltip="Open" tooltip-class="uib-custom-tooltip" tooltip-placement="{{tooltipSide}}"></div>--> - <div class="sprite-new view-info-icon" uib-tooltip="Information" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> - <div class="sprite-new cp-icon" uib-tooltip="Connection Points" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> - <div class="sprite-new vl-icon" uib-tooltip="Links" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> - <div class="sprite-new trash-icon" uib-tooltip="Delete" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}" ng-click="deleteAsset()" data-ng-class="{'disabled-icon': assetPopoverObj.isViewOnly}"></div> - </div> -</div> diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less deleted file mode 100644 index 1a113e5bdc..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less +++ /dev/null @@ -1,64 +0,0 @@ -.assetPopover { - font-family: @font-opensans-regular; - font-size: 13px; - width:230px; - padding:0 15px; - position:absolute; - display:flex; - flex-direction:column; - align-items:flex-start; - - &.left { - align-items:flex-end; - - .uib-custom-tooltip { - margin-left:-10px; - } - } - - .display-name-tooltip { - - border:solid 1px @main_color_p; - color: @main_color_p; - padding:5px 10px; - width:200px; - margin-bottom:10px; - border-radius: 2px; - background-color: rgba(80, 99, 113, 0.8); - box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33); - } - - .uib-custom-tooltip { - margin-left:20px; - font-family: @font-opensans-regular; - font-size: 13px; - } - - .assetMenu { - - border-radius: 2px; - border: solid 1px @main_color_p; - background-color: rgba(234, 234, 234, 0.7); - box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33); - display:flex; - flex-direction: column; - justify-content: center; - align-items:center; - - .sprite-new { - border-bottom:solid 1px #CCC; - &:hover:not(.disabled-icon) { - .hand; - } - &:active:not(.disabled-icon) { - background-color: @main_color_a; - border-bottom-color: @main_color_a; - } - &.trash-icon { - border-bottom: none; - } - } - - - } -} diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts deleted file mode 100644 index ad3197c6da..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts +++ /dev/null @@ -1,55 +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========================================================= - */ - -'use strict'; -import {AssetPopoverObj} from "app/models"; - -export interface IAssetPopoverScope extends ng.IScope { - assetPopoverObj:AssetPopoverObj; - deleteAsset:Function; -} - -export class AssetPopoverDirective implements ng.IDirective { - - constructor() { - } - - scope = { - assetPopoverObj: '=', - deleteAsset: '&' - }; - - restrict = 'E'; - replace = true; - template = ():string => { - return require('app/directives/graphs-v2/asset-popover/asset-popover.html'); - }; - - link = (scope:IAssetPopoverScope, element:JQuery, $attr:ng.IAttributes) => { - - }; - - public static factory = ()=> { - return new AssetPopoverDirective(); - }; -} - -AssetPopoverDirective.factory.$inject = []; - diff --git a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts deleted file mode 100644 index 81d41509e7..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts +++ /dev/null @@ -1,487 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import {CommonNodeBase, CompositionCiLinkBase, RelationshipModel, Relationship, CompositionCiNodeBase, NodesFactory, LinksFactory} from "app/models"; -import {GraphUIObjects} from "app/utils"; -import {CompositionCiServicePathLink} from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; -import {Requirement, Capability} from "app/models"; -/** - * Created by obarda on 12/21/2016. - */ -export class CommonGraphUtils { - - constructor(private NodesFactory:NodesFactory, private LinksFactory: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:CommonNodeBase, position?:Cy.Position):Cy.CollectionElements { - - let 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: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(); - } - }; - - /** - * Returns relation source and target nodes. - * @param nodes - all nodes in graph in order to find the edge connecting the two nodes - * @param fromNodeId - * @param toNodeId - * @returns [source, target] array of source node and target node. - */ - public getRelationNodes(nodes:Cy.CollectionNodes, fromNodeId:string, toNodeId:string) { - return [ - _.find(nodes, (node:Cy.CollectionFirst) => node.data().id === fromNodeId), - _.find(nodes, (node:Cy.CollectionFirst) => node.data().id === toNodeId) - ]; - } - - /** - * Add link to graph - only draw the link - * @param cy - * @param link - * @param getRelationRequirementCapability - */ - public insertLinkToGraph = (cy:Cy.Instance, link:CompositionCiLinkBase, getRelationRequirementCapability:Function) => { - const relationNodes = this.getRelationNodes(cy.nodes(), link.source, link.target); - const sourceNode:CompositionCiNodeBase = relationNodes[0] && relationNodes[0].data(); - const targetNode:CompositionCiNodeBase = relationNodes[1] && relationNodes[1].data(); - if ((sourceNode && !sourceNode.certified) || (targetNode && !targetNode.certified)) { - link.classes = 'not-certified-link'; - } - let linkElement = cy.add({ - group: 'edges', - data: link, - classes: link.classes - }); - const getLinkRequirementCapability = () => - getRelationRequirementCapability(link.relation.relationships[0], sourceNode.componentInstance, targetNode.componentInstance); - this.initLinkTooltip(linkElement, link.relation.relationships[0], getLinkRequirementCapability); - }; - - /** - * Add service path link to graph - only draw the link - * @param cy - * @param link - */ - public insertServicePathLinkToGraph = (cy:Cy.Instance, link:CompositionCiServicePathLink) => { - let linkElement = cy.add({ - group: 'edges', - data: link, - classes: link.classes - }); - this.initServicePathTooltip(linkElement, link); - }; - - /** - * Returns function for the link tooltip content - * @param {Relationship} linkRelation - * @param {Requirement} requirement - * @param {Capability} capability - * @returns {() => string} - * @private - */ - private _getLinkTooltipContent(linkRelation:Relationship, requirement?:Requirement, capability?:Capability):string { - return '<div class="line">' + - '<span class="req-cap-label">R: </span>' + - '<span>' + (requirement ? requirement.getTitle() : linkRelation.relation.requirement) + '</span>' + - '</div>' + - '<div class="line">' + - '<div class="sprite-new link-tooltip-arrow"></div>' + - '<span class="req-cap-label">C: </span>' + - '<span>' + (capability ? capability.getTitle() : linkRelation.relation.capability) + '</span>' + - '</div>'; - } - - /** - * This function will init qtip tooltip on the link - * @param linkElement - the link we want the tooltip to apply on, - * @param link - * @param getLinkRequirementCapability - * link - the link obj - */ - public initLinkTooltip(linkElement:Cy.CollectionElements, link:Relationship, getLinkRequirementCapability:Function) { - const content = () => this._getLinkTooltipContent(link); // base tooltip content without owner names - const render = (event, api) => { - // on render (called once at first show), get the link requirement and capability and change to full tooltip content (with owner names) - getLinkRequirementCapability().then((linkReqCap) => { - const fullContent = () => this._getLinkTooltipContent(link, linkReqCap.requirement, linkReqCap.capability); - api.set('content.text', fullContent); - }); - }; - linkElement.qtip(this.prepareInitTooltipData({content, events: {render}})); - }; - - /** - * - * @param linkElement - * @param link - */ - public initServicePathTooltip(linkElement:Cy.CollectionElements, link:CompositionCiServicePathLink) { - let content = function () { - return '<div class="line">' + - '<div>'+link.pathName+'</div>' + - '</div>'; - }; - linkElement.qtip(this.prepareInitTooltipData({content})); - }; - - private prepareInitTooltipData(options?:Object) { - return _.merge({ - position: { - my: 'top center', - at: 'bottom center', - adjust: {x:0, y:0}, - effect: false - }, - style: { - classes: 'qtip-dark qtip-rounded qtip-custom link-qtip', - tip: { - width: 16, - height: 8 - } - }, - show: { - event: 'mouseover', - delay: 1000 - }, - hide: {event: 'mouseout mousedown'}, - includeLabels: true, - events: {} - }, options); - } - - /** - * go over the relations and draw links on the graph - * @param cy - * @param instancesRelations - * @param getRelationRequirementCapability - function to get requirement and capability of a relation - */ - public initGraphLinks(cy:Cy.Instance, instancesRelations:Array<RelationshipModel>, getRelationRequirementCapability:Function) { - - if (instancesRelations) { - _.forEach(instancesRelations, (relationshipModel:RelationshipModel) => { - _.forEach(relationshipModel.relationships, (relationship:Relationship) => { - let linkToCreate = this.LinksFactory.createGraphLink(cy, relationshipModel, relationship); - this.insertLinkToGraph(cy, linkToCreate, getRelationRequirementCapability); - }); - }); - } - } - - /** - * 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) / cy.zoom(); - let y = (event.pageY - targetOffset.top) / cy.zoom(); - - 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; - } - - /** - * Generic function that can be used for any html elements overlaid on canvas - * Returns the html position of a node on canvas, including left palette and header offsets. Option to pass in additional offset to add to return position. - * @param node - * @param additionalOffset - * @returns {Cy.Position} - - public getNodePositionWithOffset = (node:Cy.CollectionFirstNode, additionalOffset?:Cy.Position): Cy.Position => { - if(!additionalOffset) additionalOffset = {x: 0, y:0}; - - let nodePosition = node.renderedPosition(); - let posWithOffset:Cy.Position = { - x: nodePosition.x + GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET + additionalOffset.x, - y: nodePosition.y + GraphUIObjects.COMPOSITION_HEADER_OFFSET + additionalOffset.y - }; - return posWithOffset; - };*/ - - /** - * 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<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']; diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts deleted file mode 100644 index dd50524444..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts +++ /dev/null @@ -1,361 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { GraphColors, GraphUIObjects} from "app/utils/constants"; -import constant = require("lodash/constant"); -import {ImagesUrl} from "app/utils/constants"; -import {AngularJSBridge} from "app/services/angular-js-bridge-service"; -import { CanvasHandleTypes } from "app/utils"; -/** - * Created by obarda on 12/18/2016. - */ -export class ComponentInstanceNodesStyle { - - public static 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': 'OpenSans-Regular,sans-serif', - - 'font-size': 14, - 'events': 'yes', - 'text-events': 'yes', - 'text-border-width': 15, - 'text-border-color': GraphColors.NODE_UCPE, - 'text-margin-y': 5 - } - }, - { - selector: '.vf-node', - css: { - 'background-color': 'transparent', - 'shape': 'rectangle', - 'label': 'data(displayName)', - 'background-image': 'data(img)', - 'width': GraphUIObjects.DEFAULT_RESOURCE_WIDTH, - 'height': GraphUIObjects.DEFAULT_RESOURCE_WIDTH, - 'background-opacity': 0, - "background-width": GraphUIObjects.DEFAULT_RESOURCE_WIDTH, - "background-height": GraphUIObjects.DEFAULT_RESOURCE_WIDTH, - 'text-valign': 'bottom', - 'text-halign': 'center', - 'background-fit': 'cover', - 'background-clip': 'node', - 'overlay-color': 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': 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': GraphUIObjects.SMALL_RESOURCE_WIDTH, - 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH, - 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE, - 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2, - 'background-position-x': GraphUIObjects.HANDLE_SIZE / 2, - 'background-position-y': GraphUIObjects.HANDLE_SIZE / 2, - 'text-valign': 'bottom', - 'text-halign': 'center', - 'background-opacity': 0, - 'overlay-color': 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': GraphUIObjects.SMALL_RESOURCE_WIDTH, - 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH, - 'background-position-x': GraphUIObjects.HANDLE_SIZE / 2, - 'background-position-y': GraphUIObjects.HANDLE_SIZE / 2, - 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE, - 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE / 2, - 'text-valign': 'bottom', - 'text-halign': 'center', - 'background-opacity': 0, - 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR, - 'overlay-opacity': 0 - } - }, - { - selector: '.ucpe-cp', - css: { - 'background-color': 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': GraphColors.BASE_LINK, - 'target-arrow-color': '#3b7b9b', - 'target-arrow-shape': 'triangle', - 'curve-style': 'bezier', - 'control-point-step-size': 30 - } - }, - { - selector: '.archived', - css: { - 'shape': 'rectangle', - 'background-image': (ele:Cy.Collection) => { - return ele.data().setArchivedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE); //Change name to setArchivedImageBgStyle ?? - }, - "border-width": 0 - } - }, - { - selector: '.vl-link', - css: { - 'width': 3, - 'line-color': GraphColors.VL_LINK, - 'curve-style': 'bezier', - 'control-point-step-size': 30 - } - }, - { - selector: '.vl-link-1', - css: { - 'width': 3, - 'line-color': GraphColors.ACTIVE_LINK, - 'curve-style': 'unbundled-bezier', - 'target-arrow-color': '#3b7b9b', - 'target-arrow-shape': 'triangle', - 'control-point-step-size': 30 - } - }, - { - selector: '.ucpe-host-link', - css: { - 'width': 0 - } - }, - { - selector: '.not-certified-link', - css: { - 'width': 1, - 'line-color': GraphColors.NOT_CERTIFIED_LINK, - 'curve-style': 'bezier', - 'control-point-step-size': 30, - 'line-style': 'dashed', - 'target-arrow-color': '#3b7b9b', - 'target-arrow-shape': 'triangle' - - } - }, - - { - selector: '.service-path-link', - css: { - 'width': 2, - 'line-color': GraphColors.SERVICE_PATH_LINK, - 'target-arrow-color': GraphColors.SERVICE_PATH_LINK, - 'target-arrow-shape': 'triangle', - 'curve-style': 'bezier', - 'control-point-step-size': 30 - } - }, - { - selector: '.not-certified', - css: { - 'shape': 'rectangle', - 'background-image': (ele:Cy.Collection) => { - return ele.data().initUncertifiedImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE); - }, - "border-width": 0 - } - }, - { - selector: '.dependent', - css: { - 'shape': 'rectangle', - 'background-image': (ele:Cy.Collection) => { - return ele.data().initDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE) - }, - "border-width": 0 - } - }, - { - selector: '.dependent.not-certified', - css: { - 'shape': 'rectangle', - 'background-image': (ele:Cy.Collection) => { - return ele.data().initUncertifiedDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE) - }, - "border-width": 0 - } - }, - { - selector: 'node:selected', - css: { - "border-width": 2, - "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR, - 'shape': 'rectangle' - } - }, - { - selector: 'edge:selected', - css: { - 'line-color': GraphColors.ACTIVE_LINK - - } - }, - { - selector: 'edge:active', - css: { - 'overlay-opacity': 0 - } - }, { - selector: '.configuration-node', - css: { - 'background-color': 'rgb(255,255,255)', - 'shape': 'rectangle', - 'label': 'data(displayName)', - 'background-image': 'data(img)', - 'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH, - 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH, - 'background-position-x': GraphUIObjects.HANDLE_SIZE / 2, - 'background-position-y': GraphUIObjects.HANDLE_SIZE / 2, - 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE, - 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2, - 'text-valign': 'bottom', - 'text-halign': 'center', - 'background-opacity': 0, - 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR, - 'overlay-opacity': 0 - } - } - ] - } - - public static getAddEdgeHandle = () => { - return { - - single: false, - type: CanvasHandleTypes.ADD_EDGE, - imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON, - lineColor: '#27a337', - lineWidth: 2, - lineStyle: 'dashed' - - } - } - - public static getTagHandle = () => { - return { - single: false, - type: CanvasHandleTypes.TAG_AVAILABLE, - imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_TAG_ICON, - } - } - - public static getTaggedPolicyHandle = () => { - return { - single: false, - type: CanvasHandleTypes.TAGGED_POLICY, - imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_POLICY_TAGGED_ICON, - } - } - - public static getTaggedGroupHandle = () => { - return { - single: false, - type: CanvasHandleTypes.TAGGED_GROUP, - imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_GROUP_TAGGED_ICON, - } - } - - - // public static getUcpeCpNodeHandle = () => { - // return { - // positionX: "center", - // positionY: "center", - // offsetX: -8, - // offsetY: -10, - // color: "#27a337", - // type: "default", - // single: false, - // nodeTypeNames: ["ucpe-cp-node"], - // imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON, - // lineWidth: 2, - // lineStyle: 'dashed' - // } - // } -} diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts deleted file mode 100644 index bf71e1c868..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts +++ /dev/null @@ -1,103 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {GraphColors} from "app/utils"; -export class ModulesNodesStyle { - - public static 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": 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': GraphColors.BASE_LINK, - } - }, - { - selector: '.vl-link:selected', - css: { - 'line-color': GraphColors.VL_LINK, - } - }, - { - selector: '.cy-expand-collapse-collapsed-node:selected', - css: { - "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR, - 'border-opacity': 1, - 'border-style': 'solid', - 'border-width': 2 - } - }, - { - selector: '.module-node:selected', - css: { - "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR, - 'border-opacity': 1 - } - }, - { - selector: '.dummy-node', - css: { - 'width': 20, - 'height': 20 - } - }, - ] - } -} diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts deleted file mode 100644 index e6c2fb395b..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts +++ /dev/null @@ -1,947 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { - Match, - LinkMenu, - ComponentInstance, - LeftPaletteComponent, - Relationship, - Component, - Service, - ConnectRelationModel, - CompositionCiNodeBase, - CompositionCiNodeVl, - ModalModel, - ButtonModel, - NodesFactory, - Point -} from "app/models"; -import { ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors, DEPENDENCY_EVENTS } from "app/utils"; -import { EventListenerService, LoaderService } from "app/services"; -import { CompositionGraphLinkUtils } from "./utils/composition-graph-links-utils"; -import { CompositionGraphGeneralUtils } from "./utils/composition-graph-general-utils"; -import { CompositionGraphNodesUtils } from "./utils/composition-graph-nodes-utils"; -import { CommonGraphUtils } from "../common/common-graph-utils"; -import { MatchCapabilitiesRequirementsUtils } from "./utils/match-capability-requierment-utils"; -import { CompositionGraphPaletteUtils } from "./utils/composition-graph-palette-utils"; -import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style"; -import { CytoscapeEdgeEditation } from 'third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js'; -import { ComponentServiceNg2 } from "../../../ng2/services/component-services/component.service"; -import { ComponentGenericResponse } from "../../../ng2/services/responses/component-generic-response"; -import { ModalService } from "../../../ng2/services/modal.service"; -import { ConnectionWizardService } from "../../../ng2/pages/connection-wizard/connection-wizard.service"; -import { StepModel } from "../../../models/wizard-step"; -import { FromNodeStepComponent } from "app/ng2/pages/connection-wizard/from-node-step/from-node-step.component"; -import { PropertiesStepComponent } from "app/ng2/pages/connection-wizard/properties-step/properties-step.component"; -import { ToNodeStepComponent } from "app/ng2/pages/connection-wizard/to-node-step/to-node-step.component"; -import { ConnectionWizardHeaderComponent } from "app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component"; -import { ConnectionPropertiesViewComponent } from "../../../ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component"; -import { ComponentInstanceServiceNg2 } from "../../../ng2/services/component-instance-services/component-instance.service"; -import { EVENTS } from "../../../utils/constants"; -import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model"; -import { ForwardingPath } from "app/models/forwarding-path"; -import { ServicePathGraphUtils } from "./utils/composition-graph-service-path-utils"; -import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; -import { - ZoneInstance, ZoneInstanceMode, ZoneInstanceType, - ZoneInstanceAssignmentType -} from "app/models/graph/zones/zone-instance"; - -import { Zone } from "app/models/graph/zones/zone"; -import { CompositionGraphZoneUtils } from "./utils/composition-graph-zone-utils"; -import { UIZoneInstanceObject } from "../../../models/ui-models/ui-zone-instance-object"; -import { GroupInstance } from "../../../models/graph/zones/group-instance"; -import { PolicyInstance } from "../../../models/graph/zones/policy-instance"; - - -export interface ICompositionGraphScope extends ng.IScope { - - component: Component; - isLoading: boolean; - isViewOnly: boolean; - withSidebar: boolean; - - //zones - newZoneInstance; - zoneTagMode: string; - activeZoneInstance: ZoneInstance; - zones: Array<Zone>; - zoneMinimizeToggle(zoneType: ZoneInstanceType): void; - zoneInstanceTagged(taggedInstance: ZoneInstance): void; - zoneBackgroundClicked() :void; - zoneInstanceModeChanged(newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType); - unsetActiveZoneInstance(): void; - clickOutsideZoneInstance(): void; - zoneAssignmentSaveStart(): void; - zoneAssignmentSaveComplete(success: boolean): void; - - // Link menu - create link menu - relationMenuDirectiveObj: ConnectRelationModel; - isLinkMenuOpen: boolean; - createLinkFromMenu: (chosenMatch: Match, vl: Component) => void; - saveChangedCapabilityProperties: () => Promise<PropertyBEModel[]>; - - //modify link menu - for now only delete menu - relationMenuTimeout: ng.IPromise<any>; - linkMenuObject: LinkMenu; - isOnDrag: boolean; - - //left palette functions callbacks - dropCallback(event: JQueryEventObject, ui: any): void; - beforeDropCallback(event: IDragDropEvent): void; - verifyDrop(event: JQueryEventObject, ui: any): void; - - //Links menus - viewRelation(link: Cy.CollectionEdges): void; - deleteRelation(link: Cy.CollectionEdges): void; - hideRelationMenu(); - - //search,zoom in/out/all - componentInstanceNames: Array<string>; //id, name - zoom(zoomIn: boolean): void; - zoomAllWithoutSidebar(): void; - getAutoCompleteValues(searchTerm: string): void; - highlightSearchMatches(searchTerm: string): void; - - canvasMenuProps: any; - - createOrUpdateServicePath(data: any): void; - deletePathsOnCy(): void; - drawPathOnCy(data: ForwardingPath): void; - selectedPathId: string; -} - -export class CompositionGraph implements ng.IDirective { - private _cy: Cy.Instance; - private _currentlyCLickedNodePosition: Cy.Position; - private dragElement: JQuery; - private dragComponent: ComponentInstance; - - constructor(private $q: ng.IQService, - private $log: ng.ILogService, - private $timeout: ng.ITimeoutService, - private NodesFactory: NodesFactory, - private CompositionGraphLinkUtils: CompositionGraphLinkUtils, - private GeneralGraphUtils: CompositionGraphGeneralUtils, - private ComponentInstanceFactory: ComponentInstanceFactory, - private NodesGraphUtils: CompositionGraphNodesUtils, - private eventListenerService: EventListenerService, - private ComponentFactory: ComponentFactory, - private LoaderService: LoaderService, - private commonGraphUtils: CommonGraphUtils, - private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils, - private CompositionGraphPaletteUtils: CompositionGraphPaletteUtils, - private compositionGraphZoneUtils: CompositionGraphZoneUtils, - private ComponentServiceNg2: ComponentServiceNg2, - private ModalServiceNg2: ModalService, - private ConnectionWizardServiceNg2: ConnectionWizardService, - private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2, - private servicePathGraphUtils: ServicePathGraphUtils) { - - } - - restrict = 'E'; - template = require('./composition-graph.html'); - scope = { - component: '=', - isViewOnly: '=', - withSidebar: '=' - }; - - link = (scope: ICompositionGraphScope, el: JQuery) => { - this.loadGraph(scope, el); - - if (!scope.component.groupInstances || !scope.component.policies) { - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED, () => { - this.loadGraphData(scope); - }); - } else { - this.loadGraphData(scope); - } - - - scope.$on('$destroy', () => { - this._cy.destroy(); - _.forEach(GRAPH_EVENTS, (event) => { - this.eventListenerService.unRegisterObserver(event); - }); - this.eventListenerService.unRegisterObserver(EVENTS.SHOW_LOADER_EVENT + 'composition-graph'); - this.eventListenerService.unRegisterObserver(EVENTS.HIDE_LOADER_EVENT + 'composition-graph'); - this.eventListenerService.unRegisterObserver(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE); - }); - - }; - - private loadGraphData = (scope: ICompositionGraphScope) => { - this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly); - this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component)); - this.commonGraphUtils.initUcpeChildren(this._cy); - this.compositionGraphZoneUtils.initZoneInstances(scope.zones, scope.component); - setTimeout(() => {//Need settimeout so that angular canvas changes will take effect before resize & center - this.GeneralGraphUtils.zoomAllWithMax(this._cy, 1); - }); - } - - private loadGraph = (scope: ICompositionGraphScope, el: JQuery) => { - let graphEl = el.find('.sdc-composition-graph-wrapper'); - this.initGraph(graphEl, scope.isViewOnly); - this.initDropZone(scope); - this.initZones(scope); - this.registerCytoscapeGraphEvents(scope); - this.registerCustomEvents(scope, el); - this.initViewMode(scope.isViewOnly); - }; - - private initGraph(graphEl: JQuery, isViewOnly: boolean) { - - this._cy = cytoscape({ - container: graphEl, - style: ComponentInstanceNodesStyle.getCompositionGraphStyle(), - zoomingEnabled: true, - maxZoom: 1.2, - minZoom: .1, - userZoomingEnabled: false, - userPanningEnabled: true, - selectionType: 'single', - boxSelectionEnabled: true, - autolock: isViewOnly, - autoungrabify: isViewOnly - }); - } - - private initViewMode(isViewOnly: boolean) { - - if (isViewOnly) { - //remove event listeners - this._cy.off('drag'); - this._cy.off('handlemouseout'); - this._cy.off('handlemouseover'); - this._cy.off('canvasredraw'); - this._cy.off('handletagclick') - this._cy.edges().unselectify(); - } - }; - - private registerCustomEvents(scope: ICompositionGraphScope, el: JQuery) { - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, (groupInstance: GroupInstance) => { - this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, groupInstance); - this.GeneralGraphUtils.showGroupUpdateSuccess(); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, (policyInstance: PolicyInstance) => { - this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, policyInstance); - this.GeneralGraphUtils.showPolicyUpdateSuccess(); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => { - if (scope.isOnDrag) { - return; - } - - this.$log.info(`composition-graph::registerEventServiceEvents:: palette hover on component: ${leftPaletteComponent.uniqueId}`); - - let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes()); - let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy); - - if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) { - let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId); - let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(cacheComponent, nodesData, nodesLinks); - - this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy); - this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy); - - return; - } - - //----------------------- ORIT TO FIX------------------------// - - this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => { - - let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType); - component.uniqueId = component.uniqueId; - component.capabilities = response.capabilities; - component.requirements = response.requirements; - this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component); - }); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, (component: Component, paletteComponent: LeftPaletteComponent, startPosition: Point) => { - - let zoneType: ZoneInstanceType = this.compositionGraphZoneUtils.getZoneTypeForPaletteComponent(paletteComponent.categoryType); - this.compositionGraphZoneUtils.showZone(scope.zones[zoneType]); - - this.LoaderService.showLoader('composition-graph'); - this.compositionGraphZoneUtils.createZoneInstanceFromLeftPalette(zoneType, component, paletteComponent.type).subscribe((zoneInstance: ZoneInstance) => { - this.LoaderService.hideLoader('composition-graph'); - this.compositionGraphZoneUtils.addInstanceToZone(scope.zones[zoneInstance.type], zoneInstance, true); - this.compositionGraphZoneUtils.createPaletteToZoneAnimation(startPosition, zoneType, zoneInstance); - }, (error) => { - this.LoaderService.hideLoader('composition-graph'); - }); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => { - - this._cy.emit('hidehandles'); - this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, (dragElement, dragComponent) => { - - this.dragElement = dragElement; - this.dragComponent = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, (event: IDragDropEvent) => { - this.CompositionGraphPaletteUtils.onComponentDrag(this._cy, event, this.dragElement, this.dragComponent); - - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component: ComponentInstance) => { - - let selectedNode = this._cy.getElementById(component.uniqueId); - selectedNode.data().componentInstance.name = component.name; - selectedNode.data('name', component.name); //used for tooltip - selectedNode.data('displayName', selectedNode.data().getDisplayName()); //abbreviated - - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstance: ComponentInstance) => { - let nodeToDelete = this._cy.getElementById(componentInstance.uniqueId); - this.NodesGraphUtils.deleteNode(this._cy, scope.component, nodeToDelete); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, (deletedInstance: UIZoneInstanceObject) => { - - if (deletedInstance.type === ZoneInstanceType.POLICY) { - scope.component.policies = scope.component.policies.filter(policy => policy.uniqueId !== deletedInstance.uniqueId); - } else if (deletedInstance.type === ZoneInstanceType.GROUP) { - scope.component.groupInstances = scope.component.groupInstances.filter(group => group.uniqueId !== deletedInstance.uniqueId); - } - //remove it from zones - scope.zones[deletedInstance.type].removeInstance(deletedInstance.uniqueId); - if (deletedInstance.type === ZoneInstanceType.GROUP && !_.isEmpty(scope.zones[ZoneInstanceType.POLICY])) { - this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(deletedInstance.uniqueId, [scope.zones[ZoneInstanceType.POLICY]], ZoneInstanceAssignmentType.GROUPS); - } - this.eventListenerService.notifyObservers(EVENTS.UPDATE_PANEL); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, (componentInstanceId: string) => { - if (!_.isEmpty(scope.zones)) { - this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(componentInstanceId, scope.zones, ZoneInstanceAssignmentType.COMPONENT_INSTANCES); - } - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_EDGE, (releaseLoading: boolean, linksToDelete: Cy.CollectionEdges) => { - this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, releaseLoading, linksToDelete); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, (node: Cy.CollectionNodes, ucpe: Cy.CollectionNodes, updateExistingNode: boolean) => { - - this.commonGraphUtils.initUcpeChildData(node, ucpe); - //check if item is a VL, and if so, skip adding the binding to ucpe - if (!(node.data() instanceof CompositionCiNodeVl)) { - this.CompositionGraphLinkUtils.createVfToUcpeLink(scope.component, this._cy, ucpe.data(), node.data()); //create link from the node to the ucpe - } - - if (updateExistingNode) { - let vlsPendingDeletion: Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); //delete connected VLs that no longer have 2 links - this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed - this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position - } - - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, (node: Cy.CollectionNodes, ucpe: Cy.CollectionNodes) => { - this.commonGraphUtils.removeUcpeChildData(node); - let vlsPendingDeletion: Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); - this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed - this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component: Component) => { - scope.component = component; - this._cy.elements().remove(); - this.loadGraphData(scope); - }); - - this.eventListenerService.registerObserverCallback(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, (ischecked: boolean) => { - if (ischecked) { - this._cy.$('node:selected').addClass('dependent'); - } else { - // due to defect in cytoscape, just changing the class does not replace the icon, and i need to revert to original icon with no markings. - this._cy.$('node:selected').removeClass('dependent'); - this._cy.$('node:selected').style({'background-image': this._cy.$('node:selected').data('originalImg')}); - } - }); - - scope.zoom = (zoomIn: boolean): void => { - let currentZoom: number = this._cy.zoom(); - if (zoomIn) { - this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom + .1); - } else { - this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom - .1); - } - } - - - scope.zoomAllWithoutSidebar = () => { - scope.withSidebar = false; - setTimeout(() => { //wait for sidebar changes to take effect before zooming - this.GeneralGraphUtils.zoomAll(this._cy); - }); - }; - - scope.getAutoCompleteValues = (searchTerm: string) => { - if (searchTerm.length > 1) { //US requirement: only display search results after 2nd letter typed. - let nodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); - scope.componentInstanceNames = _.map(nodes, node => node.data('name')); - } else { - scope.componentInstanceNames = []; - } - }; - - scope.highlightSearchMatches = (searchTerm: string) => { - this.NodesGraphUtils.highlightMatchingNodesByName(this._cy, searchTerm); - let matchingNodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); - this.GeneralGraphUtils.zoomAll(this._cy, matchingNodes); - }; - - scope.saveChangedCapabilityProperties = (): Promise<PropertyBEModel[]> => { - return new Promise<PropertyBEModel[]>((resolve) => { - const capabilityPropertiesBE: PropertyBEModel[] = this.ConnectionWizardServiceNg2.changedCapabilityProperties.map((prop) => { - prop.value = prop.getJSONValue(); - const propBE = new PropertyBEModel(prop); - propBE.parentUniqueId = this.ConnectionWizardServiceNg2.selectedMatch.relationship.relation.capabilityOwnerId; - return propBE; - }); - if (capabilityPropertiesBE.length > 0) { - // if there are capability properties to update, then first update capability properties and then resolve promise - this.ComponentInstanceServiceNg2 - .updateInstanceCapabilityProperties( - scope.component, - this.ConnectionWizardServiceNg2.selectedMatch.toNode, - this.ConnectionWizardServiceNg2.selectedMatch.capability, - capabilityPropertiesBE - ) - .subscribe((response) => { - console.log("Update resource instance capability properties response: ", response); - this.ConnectionWizardServiceNg2.changedCapabilityProperties = []; - resolve(capabilityPropertiesBE); - }); - } else { - // no capability properties to update, immediately resolve promise - resolve(capabilityPropertiesBE); - } - }); - }; - - scope.createLinkFromMenu = (): void => { - scope.isLinkMenuOpen = false; - - scope.saveChangedCapabilityProperties().then(() => { - //create link: - this.CompositionGraphLinkUtils - .createLinkFromMenu(this._cy, this.ConnectionWizardServiceNg2.selectedMatch, scope.component); - }); - }; - - scope.hideRelationMenu = () => { - this.commonGraphUtils.safeApply(scope, () => { - delete scope.canvasMenuProps; - this.$timeout.cancel(scope.relationMenuTimeout); - }); - }; - - scope.createOrUpdateServicePath = (data: any) => { - this.servicePathGraphUtils.createOrUpdateServicePath(scope, data); - }; - scope.deletePathsOnCy = () => { - this.servicePathGraphUtils.deletePathsFromGraph(this._cy, <Service>scope.component); - }; - scope.drawPathOnCy = (data: ForwardingPath) => { - this.servicePathGraphUtils.drawPath(this._cy, data, <Service>scope.component); - }; - - scope.viewRelation = (link: Cy.CollectionEdges) => { - scope.hideRelationMenu(); - - const linkData = link.data(); - const sourceNode: CompositionCiNodeBase = link.source().data(); - const targetNode: CompositionCiNodeBase = link.target().data(); - const relationship: Relationship = linkData.relation.relationships[0]; - - scope.component.getRelationRequirementCapability(relationship, sourceNode.componentInstance, targetNode.componentInstance).then((objReqCap) => { - const capability = objReqCap.capability; - const requirement = objReqCap.requirement; - - this.ConnectionWizardServiceNg2.currentComponent = scope.component; - this.ConnectionWizardServiceNg2.connectRelationModel = new ConnectRelationModel(sourceNode, targetNode, []); - this.ConnectionWizardServiceNg2.selectedMatch = new Match(requirement, capability, true, linkData.source, linkData.target); - this.ConnectionWizardServiceNg2.selectedMatch.relationship = relationship; - - const title = `Connection Properties`; - const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => { - scope.saveChangedCapabilityProperties().then(() => { - this.ModalServiceNg2.closeCurrentModal(); - }) - }); - const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => { - this.ModalServiceNg2.closeCurrentModal(); - }); - const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]); - const modalInstance = this.ModalServiceNg2.createCustomModal(modal); - this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent); - modalInstance.instance.open(); - - new Promise((resolve) => { - if (!this.ConnectionWizardServiceNg2.selectedMatch.capability.properties) { - this.ComponentInstanceServiceNg2.getInstanceCapabilityProperties(scope.component, linkData.target, capability) - .subscribe(() => { - resolve(); - }, (error) => { - }); - } else { - resolve(); - } - }).then(() => { - this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent); - }) - - }, (error) => { - }); - }; - - scope.deleteRelation = (link: Cy.CollectionEdges) => { - scope.hideRelationMenu(); - - //if multiple edges selected, delete the VL itself so edges get deleted automatically - if (this._cy.$('edge:selected').length > 1) { - this.NodesGraphUtils.deleteNode(this._cy, scope.component, this._cy.$('node:selected')); - } else { - this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, true, link); - } - }; - } - - private registerCytoscapeGraphEvents(scope: ICompositionGraphScope) { - - this._cy.on('addedgemouseup', (event, data) => { - scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target); - if (scope.relationMenuDirectiveObj != null) { - this.ConnectionWizardServiceNg2.setRelationMenuDirectiveObj(scope.relationMenuDirectiveObj); - this.ConnectionWizardServiceNg2.currentComponent = scope.component; - //TODO: init with the selected values - this.ConnectionWizardServiceNg2.selectedMatch = null; - - let steps: Array<StepModel> = []; - let fromNodeName: string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name; - let toNodeName: string = scope.relationMenuDirectiveObj.toNode.componentInstance.name; - steps.push(new StepModel(fromNodeName, FromNodeStepComponent)); - steps.push(new StepModel(toNodeName, ToNodeStepComponent)); - steps.push(new StepModel('Properties', PropertiesStepComponent)); - let wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName; - let modalInstance = this.ModalServiceNg2.createMultiStepsWizard(wizardTitle, steps, scope.createLinkFromMenu, ConnectionWizardHeaderComponent); - modalInstance.instance.open(); - } - }); - this._cy.on('tapstart', 'node', (event: Cy.EventObject) => { - scope.isOnDrag = true; - this._currentlyCLickedNodePosition = angular.copy(event.cyTarget[0].position()); //update node position on drag - if (event.cyTarget.data().isUcpe) { - this._cy.nodes('.ucpe-cp').unlock(); - event.cyTarget.style('opacity', 0.5); - } - }); - - this._cy.on('drag', 'node', (event: Cy.EventObject) => { - - if (event.cyTarget.data().isDraggable) { - event.cyTarget.style({ 'overlay-opacity': 0.24 }); - if (this.GeneralGraphUtils.isValidDrop(this._cy, event.cyTarget)) { - event.cyTarget.style({ 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR }); - } else { - event.cyTarget.style({ 'overlay-color': GraphColors.NODE_OVERLAPPING_BACKGROUND_COLOR }); - } - } - - if (event.cyTarget.data().isUcpe) { - let pos = event.cyTarget.position(); - - this._cy.nodes('[?isInsideGroup]').positions((i, node) => { - return { - x: pos.x + node.data("ucpeOffset").x, - y: pos.y + node.data("ucpeOffset").y - } - }); - } - }); - - this._cy.on('handlemouseover', (event, payload) => { - - if (payload.node.grabbed() || this._cy.scratch('_edge_editation_highlights') === true) { //no need to add opacity while we are dragging and hovering othe nodes- or if opacity was already calculated for these nodes - return; - } - - if (scope.zoneTagMode) { - scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId(); - return; - } - - let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes()); - let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy); - - let linkableNodes = this.commonGraphUtils.getLinkableNodes(this._cy, payload.node); - let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(payload.node.data().componentInstance, linkableNodes, nodesLinks); - this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy); - this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data()); - - this._cy.scratch()._edge_editation_highlights = true; - }); - - this._cy.on('handlemouseout', () => { - if (scope.zoneTagMode) { - scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getTagModeId(); - return; - } - if (this._cy.scratch('_edge_editation_highlights') === true) { - this._cy.removeScratch('_edge_editation_highlights'); - this._cy.emit('hidehandles'); - this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy); - } - }); - - - this._cy.on('tapend', (event: Cy.EventObject) => { - scope.isOnDrag = false; - if (scope.zoneTagMode) { - return; - } - if (event.cyTarget === this._cy) { //On Background clicked - if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged - if (scope.activeZoneInstance) { - scope.unsetActiveZoneInstance(); - } - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED); - } - scope.hideRelationMenu(); - } - - else if (event.cyTarget.isEdge()) { //On Edge clicked - this.CompositionGraphLinkUtils.handleLinkClick(this._cy, event); - if (event.cyTarget.data().type === CompositionCiServicePathLink.LINK_TYPE) { - return; - } - this.openModifyLinkMenu(scope, this.CompositionGraphLinkUtils.getModifyLinkMenu(event.cyTarget[0], event), 6000); - } - - else { //On Node clicked - - this._cy.nodes(':grabbed').style({ 'overlay-opacity': 0 }); - - let isUcpe: boolean = event.cyTarget.data().isUcpe; - let newPosition = event.cyTarget[0].position(); - //node position changed (drop after drag event) - we need to update position - if (this._currentlyCLickedNodePosition.x !== newPosition.x || this._currentlyCLickedNodePosition.y !== newPosition.y) { - let nodesMoved: Cy.CollectionNodes = this._cy.$(':grabbed'); - if (isUcpe) { - nodesMoved = nodesMoved.add(this._cy.nodes('[?isInsideGroup]:free')); //'child' nodes will not be recognized as "grabbed" elements within cytoscape. manually add them to collection of nodes moved. - } - this.NodesGraphUtils.onNodesPositionChanged(this._cy, scope.component, nodesMoved); - } else { - this.$log.debug('composition-graph::onNodeSelectedEvent:: fired'); - if (scope.activeZoneInstance) { - scope.unsetActiveZoneInstance(); - } - scope.$apply(() => { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance); - }); - } - - if (isUcpe) { - this._cy.nodes('.ucpe-cp').lock(); - event.cyTarget.style('opacity', 1); - } - - } - }); - - this._cy.on('boxselect', 'node', (event: Cy.EventObject) => { - scope.unsetActiveZoneInstance(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance); - }); - - this._cy.on('canvasredraw', (event: Cy.EventObject) => { - if (scope.zoneTagMode) { - this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, scope.activeZoneInstance); - } - }); - - this._cy.on('handletagclick', (event: Cy.EventObject, eventData: any) => { - this.compositionGraphZoneUtils.handleTagClick(this._cy, scope.activeZoneInstance, eventData.nodeId); - - - }); - } - - private openModifyLinkMenu = (scope: ICompositionGraphScope, linkMenuObject: LinkMenu, timeOutInMilliseconds?: number) => { - scope.hideRelationMenu(); - this.$timeout(() => { - scope.canvasMenuProps = { - open: true, - styleClass: 'w-sdc-canvas-menu-list', - items: [], - position: { - x: `${linkMenuObject.position.x}px`, - y: `${linkMenuObject.position.y}px` - } - }; - - if (this._cy.$('edge:selected').length === 1) { - scope.canvasMenuProps.items.push({ - contents: 'View', - styleClass: 'w-sdc-canvas-menu-item-view', - action: () => { - scope.viewRelation(<Cy.CollectionEdges>linkMenuObject.link); - } - }); - } - if (!scope.isViewOnly) { - scope.canvasMenuProps.items.push({ - contents: 'Delete', - styleClass: 'w-sdc-canvas-menu-item-delete', - action: () => { - scope.deleteRelation(<Cy.CollectionEdges>linkMenuObject.link); - } - }); - } - scope.relationMenuTimeout = this.$timeout(() => { - scope.hideRelationMenu(); - }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000); - }); - }; - - private initGraphNodes(componentInstances: ComponentInstance[], isViewOnly: boolean) { - - - setTimeout(() => { - let handles = new CytoscapeEdgeEditation; - handles.init(this._cy); - if (!isViewOnly) { //Init nodes handle extension - enable dynamic links - handles.initNodeEvents(); - handles.registerHandle(ComponentInstanceNodesStyle.getAddEdgeHandle()); - } - handles.registerHandle(ComponentInstanceNodesStyle.getTagHandle()); - handles.registerHandle(ComponentInstanceNodesStyle.getTaggedPolicyHandle()); - handles.registerHandle(ComponentInstanceNodesStyle.getTaggedGroupHandle()); - }, 0); - - - _.each(componentInstances, (instance) => { - let compositionGraphNode: CompositionCiNodeBase = this.NodesFactory.createNode(instance); - this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, compositionGraphNode); - }); - } - - - private initDropZone(scope: ICompositionGraphScope) { - - if (scope.isViewOnly) { - return; - } - scope.dropCallback = (event: IDragDropEvent) => { - this.$log.debug(`composition-graph::dropCallback:: fired`); - this.CompositionGraphPaletteUtils.addNodeFromPalette(this._cy, event, scope.component); - }; - - scope.verifyDrop = (event: JQueryEventObject) => { - - if (!this.dragElement || this.dragElement.hasClass('red')) { - return false; - } - return true; - }; - - scope.beforeDropCallback = (event: IDragDropEvent): ng.IPromise<void> => { - let deferred: ng.IDeferred<void> = this.$q.defer<void>(); - if (this.dragElement.hasClass('red')) { - deferred.reject(); - } else { - deferred.resolve(); - } - - return deferred.promise; - } - } - - - private initZones = (scope: ICompositionGraphScope): void => { - scope.zones = this.compositionGraphZoneUtils.createCompositionZones(); - - - scope.zoneMinimizeToggle = (zoneType: ZoneInstanceType): void => { - scope.zones[zoneType].minimized = !scope.zones[zoneType].minimized; - }; - - scope.zoneInstanceModeChanged = (newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType): void => { - if (scope.zoneTagMode) { //we're in tag mode. - if (instance == scope.activeZoneInstance && newMode == ZoneInstanceMode.NONE) { //we want to turn tag mode off. - scope.zoneTagMode = null; - scope.activeZoneInstance.mode = ZoneInstanceMode.SELECTED; - this.compositionGraphZoneUtils.endCyTagMode(this._cy); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_END, instance); - - } - } else { - if (instance != scope.activeZoneInstance || (instance == scope.activeZoneInstance && newMode > ZoneInstanceMode.HOVER)) { //when active zone instance gets hover/none,dont actually change mode, just show/hide indications - instance.mode = newMode; - } - - if (newMode == ZoneInstanceMode.NONE) { - this.compositionGraphZoneUtils.hideZoneTagIndications(this._cy); - if (scope.zones[ZoneInstanceType.GROUP]) { - this.compositionGraphZoneUtils.hideGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances); - } - } - if (newMode >= ZoneInstanceMode.HOVER) { - this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, instance); - if (instance.type == ZoneInstanceType.POLICY && scope.zones[ZoneInstanceType.GROUP]) { - this.compositionGraphZoneUtils.showGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances, instance); - } - } - if (newMode >= ZoneInstanceMode.SELECTED) { - this._cy.$('node:selected').unselect(); - if (scope.activeZoneInstance && scope.activeZoneInstance != instance && newMode >= ZoneInstanceMode.SELECTED) { - scope.activeZoneInstance.mode = ZoneInstanceMode.NONE; - } - scope.activeZoneInstance = instance; - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, instance); - } - if (newMode == ZoneInstanceMode.TAG) { - this.compositionGraphZoneUtils.startCyTagMode(this._cy); - scope.zoneTagMode = scope.zones[zoneId].getTagModeId(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_START, zoneId); - } - } - }; - - scope.zoneInstanceTagged = (taggedInstance: ZoneInstance) => { - scope.activeZoneInstance.addOrRemoveAssignment(taggedInstance.instanceData.uniqueId, ZoneInstanceAssignmentType.GROUPS); - let newHandle: string = this.compositionGraphZoneUtils.getCorrectHandleForNode(taggedInstance.instanceData.uniqueId, scope.activeZoneInstance); - taggedInstance.showHandle(newHandle); - } - - scope.zoneBackgroundClicked = (): void => { - if (!scope.zoneTagMode && scope.activeZoneInstance) { - scope.unsetActiveZoneInstance(); - } - }; - - scope.zoneAssignmentSaveStart = () => { - this.LoaderService.showLoader('composition-graph'); - } - - scope.zoneAssignmentSaveComplete = (success: boolean) => { - this.LoaderService.hideLoader('composition-graph'); - if (!success) { - this.GeneralGraphUtils.showUpdateFailure(); - } - }; - - scope.unsetActiveZoneInstance = (): void => { - if (scope.activeZoneInstance) { - scope.activeZoneInstance.mode = ZoneInstanceMode.NONE; - scope.activeZoneInstance = null; - scope.zoneTagMode = null; - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED); - } - }; - }; - - - public static factory = ($q, - $log, - $timeout, - NodesFactory, - LinksGraphUtils, - GeneralGraphUtils, - ComponentInstanceFactory, - NodesGraphUtils, - EventListenerService, - ComponentFactory, - LoaderService, - CommonGraphUtils, - MatchCapabilitiesRequirementsUtils, - CompositionGraphPaletteUtils, - CompositionGraphZoneUtils, - ComponentServiceNg2, - ModalService, - ConnectionWizardService, - ComponentInstanceServiceNg2, - ServicePathGraphUtils) => { - return new CompositionGraph( - $q, - $log, - $timeout, - NodesFactory, - LinksGraphUtils, - GeneralGraphUtils, - ComponentInstanceFactory, - NodesGraphUtils, - EventListenerService, - ComponentFactory, - LoaderService, - CommonGraphUtils, - MatchCapabilitiesRequirementsUtils, - CompositionGraphPaletteUtils, - CompositionGraphZoneUtils, - ComponentServiceNg2, - ModalService, - ConnectionWizardService, - ComponentInstanceServiceNg2, - ServicePathGraphUtils); - } -} - -CompositionGraph.factory.$inject = [ - '$q', - '$log', - '$timeout', - 'NodesFactory', - 'CompositionGraphLinkUtils', - 'CompositionGraphGeneralUtils', - 'ComponentInstanceFactory', - 'CompositionGraphNodesUtils', - 'EventListenerService', - 'ComponentFactory', - 'LoaderService', - 'CommonGraphUtils', - 'MatchCapabilitiesRequirementsUtils', - 'CompositionGraphPaletteUtils', - 'CompositionGraphZoneUtils', - 'ComponentServiceNg2', - 'ModalServiceNg2', - 'ConnectionWizardServiceNg2', - 'ComponentInstanceServiceNg2', - 'ServicePathGraphUtils' -]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html deleted file mode 100644 index b473f44628..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html +++ /dev/null @@ -1,67 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ - ~ Licensed under the Apache License, Version 2.0 (the "License"); - ~ you may not use this file except in compliance with the License. - ~ You may obtain a copy of the License at - ~ - ~ http://www.apache.org/licenses/LICENSE-2.0 - ~ - ~ Unless required by applicable law or agreed to in writing, software - ~ distributed under the License is distributed on an "AS IS" BASIS, - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - ~ See the License for the specific language governing permissions and - ~ limitations under the License. - --> - - -<loader display="isLoading" loader-type="composition-graph"></loader> -<div class="sdc-composition-graph-wrapper {{zoneTagMode}}" ng-class="{'with-sidebar': withSidebar, 'view-only':isViewOnly}" - data-drop="!zoneTagMode" - data-jqyoui-options="{accept: verifyDrop}" - data-jqyoui-droppable="{onDrop:'dropCallback', beforeDrop: 'beforeDropCallback'}"> -</div> - -<!-- <relation-menu relation-menu-directive-obj="relationMenuDirectiveObj" is-link-menu-open="isLinkMenuOpen" - create-relation="createLinkFromMenu" cancel="cancelRelationMenu()"></relation-menu> --> - -<menu-list-ng2 [props]="canvasMenuProps"></menu-list-ng2> - - <div class="w-sdc-search-menu" data-ng-class="{'with-sidebar': withSidebar}"> - - <ng2-service-path-selector - ng-if="component.isService()" - [service]="component" - [draw-path]="drawPathOnCy" - [delete-paths]="deletePathsOnCy" - [selected-path-id]="selectedPathId"> - </ng2-service-path-selector> - <ng2-service-path - ng-if="component.isService()" - [service]="component" - [on-create]="createOrUpdateServicePath" - [is-view-only]="isViewOnly"> - </ng2-service-path> - <ng2-search-with-autocomplete - [search-placeholder]="'Type to search'" - [auto-complete-values]="componentInstanceNames" - (search-changed)="getAutoCompleteValues($event)" - (search-button-clicked)="highlightSearchMatches($event)" - [search-bar-class]="'composition-search'"> - </ng2-search-with-autocomplete> - <div class="zoom-icons sprite-new canvas-fit-all" data-ng-click="zoomAllWithoutSidebar()"></div> - <div class="zoom-icons sprite-new zoom-plus" data-ng-click="zoom(true)"></div> - <div class="zoom-icons sprite-new zoom-minus" data-ng-click="zoom(false)"></div> - </div> -<!--<asset-popover ng-if="assetPopoverOpen" asset-popover-obj="assetPopoverObj" delete-asset="deleteNode(assetPopoverObj.nodeId)"></asset-popover>--> -<div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" data-ng-class="{'with-sidebar': withSidebar}"> - <ng2-zone-container data-ng-repeat="zone in zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length" - [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)" (background-click)="zoneBackgroundClicked()"> - <ng2-zone-instance - data-ng-repeat="instance in zone.instances" [hidden]="instance.hidden" - [zone-instance]="instance" [default-icon-text]="zone.defaultIconText" [is-active]="activeZoneInstance == instance" [active-instance-mode]="activeZoneInstance && activeZoneInstance.mode" - [is-view-only]="isViewOnly" [force-save]="instance.forceSave" (mode-change)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)" (tag-handle-click)="zoneInstanceTagged($event)" - (assignment-save-start)="zoneAssignmentSaveStart()" (assignment-save-complete)="zoneAssignmentSaveComplete($event)"> - </ng2-zone-instance> - </ng2-zone-container> -</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less deleted file mode 100644 index 7124a4b5a6..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less +++ /dev/null @@ -1,50 +0,0 @@ -composition-graph { - display: block; - height:100%; - width: 100%; - - .sdc-composition-graph-wrapper{ - height:100%; - width: 100%; - - &.with-sidebar { - width: calc(~'100% - 300px'); - } - } - - .view-only{ - background-color:rgb(248, 248, 248); - } - - .sdc-canvas-zones__wrapper { - position: absolute; - bottom: 10px; - right: 12px; - display:flex; - transition: right 0.2s; - - &.with-sidebar { - right:310px; - } - - ng2-zone-container { - display:flex; - margin-left: 10px; - } - } - - - .group-tagging { - cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_1.svg"), pointer; - } - .group-tagging-hover { - cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_2.svg"), pointer; - } - .policy-tagging { - cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_1.svg"), pointer; - } - .policy-tagging-hover { - cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer; - } - -} diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts deleted file mode 100644 index 329af56e87..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts +++ /dev/null @@ -1,323 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import {ComponentInstance, Component, Match, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models"; -import {QueueUtils, Dictionary, GraphUIObjects} from "app/utils"; -import {LoaderService} from "app/services"; -import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils"; -import {CommonGraphUtils} from "../../common/common-graph-utils"; - - -export class CompositionGraphGeneralUtils { - - public componentRequirementsAndCapabilitiesCaching = new Dictionary<string, Component>(); - protected static graphUtilsUpdateQueue:QueueUtils; - - constructor(private $q:ng.IQService, - private LoaderService:LoaderService, - private commonGraphUtils:CommonGraphUtils, - private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils, - private Notification:any) { - CompositionGraphGeneralUtils.graphUtilsUpdateQueue = new QueueUtils(this.$q); - } - - - /** - * Get the offset for the link creation Menu - * @param point - * @returns {Cy.Position} - */ - public calcMenuOffset:Function = (point:Cy.Position):Cy.Position => { - point.x = point.x + 60; - point.y = point.y + 105; - return point; - }; - - /** - * return the top left position of the link menu - * @param cy - * @param targetNodePosition - * @returns {Cy.Position} - */ - public getLinkMenuPosition = (cy:Cy.Instance, targetNodePosition:Cy.Position) => { - let menuPosition:Cy.Position = this.calcMenuOffset(targetNodePosition); //get the link mid point - if ($(document.body).height() < menuPosition.y + GraphUIObjects.LINK_MENU_HEIGHT + $(document.getElementsByClassName('sdc-composition-graph-wrapper')).offset().top) { // if position menu is overflow bottom - menuPosition.y = $(document.body).height() - GraphUIObjects.TOP_HEADER_HEIGHT - GraphUIObjects.LINK_MENU_HEIGHT; - } - return menuPosition; - }; - - - public zoomGraphTo = (cy:Cy.Instance, zoomLevel: number):void => { - let zy = cy.height() / 2; - let zx = cy.width() / 2; - cy.zoom({ - level: zoomLevel, - renderedPosition: { x: zx, y: zy } - }); - } - - - //saves the current zoom, and then sets a temporary maximum zoom for zoomAll, and then reverts to old value - public zoomAllWithMax = (cy:Cy.Instance, maxZoom:number):void => { - - let oldMaxZoom:number = cy.maxZoom(); - - cy.maxZoom(maxZoom); - this.zoomAll(cy); - cy.maxZoom(oldMaxZoom); - - }; - - - //Zooms to fit all of the nodes in the collection passed in. If no nodes are passed in, will zoom to fit all nodes on graph - public zoomAll = (cy:Cy.Instance, nodes?:Cy.CollectionNodes):void => { - - if (!nodes || !nodes.length) { - nodes = cy.nodes(); - } - - cy.resize(); - cy.animate({ - fit: { eles: nodes, padding: 20 }, - center: { eles: nodes } - }, { duration: 400 }); - }; - - /** - * will return true/false if two nodes overlapping - * - * @param graph node - */ - private isNodesOverlapping(node:Cy.CollectionFirstNode, draggedNode:Cy.CollectionFirstNode):boolean { - - let nodeBoundingBox:Cy.BoundingBox = node.renderedBoundingBox(); - let secondNodeBoundingBox:Cy.BoundingBox = draggedNode.renderedBoundingBox(); - - return this.isBBoxOverlapping(nodeBoundingBox, secondNodeBoundingBox); - } - - /** - * Checks whether the bounding boxes of two nodes are overlapping on any side - * @param nodeOneBBox - * @param nodeTwoBBox - * @returns {boolean} - */ - private isBBoxOverlapping(nodeOneBBox:Cy.BoundingBox, nodeTwoBBox:Cy.BoundingBox) { - return (((nodeOneBBox.x1 < nodeTwoBBox.x1 && nodeOneBBox.x2 > nodeTwoBBox.x1) || - (nodeOneBBox.x1 < nodeTwoBBox.x2 && nodeOneBBox.x2 > nodeTwoBBox.x2) || - (nodeTwoBBox.x1 < nodeOneBBox.x1 && nodeTwoBBox.x2 > nodeOneBBox.x2)) && - ((nodeOneBBox.y1 < nodeTwoBBox.y1 && nodeOneBBox.y2 > nodeTwoBBox.y1) || - (nodeOneBBox.y1 < nodeTwoBBox.y2 && nodeOneBBox.y2 > nodeTwoBBox.y2) || - (nodeTwoBBox.y1 < nodeOneBBox.y1 && nodeTwoBBox.y2 > nodeOneBBox.y2))) - } - - - /** - * Checks whether a specific component instance can be hosted on the UCPE instance - * @param cy - Cytoscape instance - * @param fromUcpeInstance - * @param toComponentInstance - * @returns {Match} - */ - public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):Match { - - let matches:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy)); - let hostedOnMatch:Match = _.find(matches, (match:Match) => { - return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container'; - }); - - return hostedOnMatch; - }; - - - /** - * Checks whether node can be dropped into UCPE - * @param cy - * @param nodeToInsert - * @param ucpeNode - * @returns {boolean} - */ - private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean { - - let hostedOnMatch:Match = this.canBeHostedOn(cy, ucpeNode, nodeToInsert); - let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation - return result; - - }; - - - /** - * For drops from palette, checks whether the node can be dropped. If node is being held over another node, check if capable of hosting - * @param cy - * @param pseudoNodeBBox - * @param paletteComponentInstance - * @returns {boolean} - */ - public isPaletteDropValid(cy:Cy.Instance, pseudoNodeBBox:Cy.BoundingBox, paletteComponentInstance:ComponentInstance) { - - let componentIsUCPE:boolean = (paletteComponentInstance.capabilities && paletteComponentInstance.capabilities['tosca.capabilities.Container'] && paletteComponentInstance.name.toLowerCase().indexOf('ucpe') > -1); - - if (componentIsUCPE && cy.nodes('[?isUcpe]').length > 0) { //second UCPE not allowed - return false; - } - - let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { - - if (this.isBBoxOverlapping(pseudoNodeBBox, graphNode.renderedBoundingBox())) { - if (!componentIsUCPE && graphNode.data().isUcpe) { - return !this.isValidDropInsideUCPE(cy, paletteComponentInstance, graphNode.data().componentInstance); //if this is valid insert into ucpe, we return false - no illegal overlapping nodes - } - return true; - } - - return false; - }); - - return illegalOverlappingNodes.length === 0; - } - - /** - * will return true/false if a drop of a single node is valid - * - * @param graph node - */ - public isValidDrop(cy:Cy.Instance, draggedNode:Cy.CollectionFirstNode):boolean { - - let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { //all sdc nodes, removing child nodes (childe node allways collaps - - if (draggedNode.data().isUcpe && (graphNode.isChild() || graphNode.data().isInsideGroup)) { //ucpe cps always inside ucpe, no overlapping - return false; - } - if (draggedNode.data().isInsideGroup && (!draggedNode.active() || graphNode.data().isUcpe)) { - return false; - } - - if (!draggedNode.data().isUcpe && !(draggedNode.data() instanceof CompositionCiNodeUcpeCp) && graphNode.data().isUcpe) { //case we are dragging a node into UCPE - let isEntirelyInUCPE:boolean = this.commonGraphUtils.isFirstBoxContainsInSecondBox(draggedNode.renderedBoundingBox(), graphNode.renderedBoundingBox()); - if (isEntirelyInUCPE) { - if (this.isValidDropInsideUCPE(cy, draggedNode.data().componentInstance, graphNode.data().componentInstance)) { //if this is valid insert into ucpe, we return false - no illegal overlapping nodes - return false; - } - } - } - return graphNode.data().id !== draggedNode.data().id && this.isNodesOverlapping(draggedNode, graphNode); - - }); - // return false; - return illegalOverlappingNodes.length === 0; - }; - - /** - * will return true/false if the move of the nodes is valid (no node overlapping and verifying if insert into UCPE is valid) - * - * @param nodesArray - the selected drags nodes - */ - public isGroupValidDrop(cy:Cy.Instance, nodesArray:Cy.CollectionNodes):boolean { - let filterDraggedNodes = nodesArray.filter('[?isDraggable]'); - let isValidDrop = _.every(filterDraggedNodes, (node:Cy.CollectionFirstNode) => { - return this.isValidDrop(cy, node); - - }); - return isValidDrop; - }; - - /** - * get all links in diagram - * @param cy - * @returns {any[]|boolean[]} - */ - public getAllCompositionCiLinks = (cy:Cy.Instance):Array<CompositionCiLinkBase> => { - return _.map(cy.edges("[isSdcElement]"), (edge:Cy.CollectionEdges) => { - return edge.data(); - }); - }; - - - public showPolicyUpdateSuccess = () => { - this.Notification.success({ - message: "Policy Updated", - title: "Success" - }); - } - - public showGroupUpdateSuccess = () => { - this.Notification.success({ - message: "Group Updated", - title: "Success" - }); - } - - public showUpdateFailure = () => { - this.Notification.error({ - message: "Update Failed", - title: "Error" - }); - }; - - /** - * Get Graph Utils server queue - * @returns {QueueUtils} - */ - public getGraphUtilsServerUpdateQueue():QueueUtils { - return CompositionGraphGeneralUtils.graphUtilsUpdateQueue; - } - ; - - /** - * - * @param blockAction - true/false if this is a block action - * @param instances - * @param component - */ - public pushMultipleUpdateComponentInstancesRequestToQueue = (blockAction:boolean, instances:Array<ComponentInstance>, component:Component):void => { - if (blockAction) { - this.getGraphUtilsServerUpdateQueue().addBlockingUIAction( - () => component.updateMultipleComponentInstances(instances) - ); - } else { - this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction( - () => component.updateMultipleComponentInstances(instances), - () => this.LoaderService.hideLoader('composition-graph')); - } - }; - - /** - * this function will update component instance data - * @param blockAction - true/false if this is a block action - * @param updatedInstance - */ - public pushUpdateComponentInstanceActionToQueue = (component:Component, blockAction:boolean, updatedInstance:ComponentInstance):void => { - - if (blockAction) { - this.LoaderService.showLoader('composition-graph'); - this.getGraphUtilsServerUpdateQueue().addBlockingUIAction( - () => component.updateComponentInstance(updatedInstance) - ); - } else { - this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction( - () => component.updateComponentInstance(updatedInstance), - () => this.LoaderService.hideLoader('composition-graph')); - } - }; -} - -CompositionGraphGeneralUtils.$inject = ['$q', 'LoaderService', 'CommonGraphUtils', 'MatchCapabilitiesRequirementsUtils', 'Notification']; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts deleted file mode 100644 index 705367c5f7..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts +++ /dev/null @@ -1,301 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by obarda on 6/28/2016. - */ -import * as _ from "lodash"; -import {GraphUIObjects} from "app/utils"; -import {LoaderService} from "app/services"; -import { - NodeUcpe, - CompositionCiNodeVf, - Match, - CompositionCiNodeBase, - RelationshipModel, - ConnectRelationModel, - LinksFactory, - Component, - LinkMenu, - Point, - CompositionCiLinkBase -} from "app/models"; -import {CommonGraphUtils} from "../../common/common-graph-utils"; -import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils"; -import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils"; -import {CompositionCiServicePathLink} from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; - -export class CompositionGraphLinkUtils { - - constructor(private linksFactory:LinksFactory, - private loaderService:LoaderService, - private generalGraphUtils:CompositionGraphGeneralUtils, - private commonGraphUtils:CommonGraphUtils, - private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils) { - } - - - /** - * Delete the link on server and then remove it from graph - * @param component - * @param releaseLoading - true/false release the loader when finished - * @param link - the link to delete - */ - public deleteLink = (cy:Cy.Instance, component:Component, releaseLoading:boolean, link:Cy.CollectionEdges) => { - - this.loaderService.showLoader('composition-graph'); - let onSuccessDeleteRelation = (response) => { - cy.remove(link); - }; - - if (!releaseLoading) { - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction( - () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation) - ); - } else { - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( - () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation), - () => this.loaderService.hideLoader('composition-graph')); - } - }; - - /** - * create the link on server and than draw it on graph - * @param link - the link to create - * @param cy - * @param component - */ - public createLink = (link:CompositionCiLinkBase, cy:Cy.Instance, component:Component):void => { - - this.loaderService.showLoader('composition-graph'); - - let onSuccess:(response:RelationshipModel) => void = (relation:RelationshipModel) => { - link.setRelation(relation); - this.commonGraphUtils.insertLinkToGraph(cy, link, component.getRelationRequirementCapability.bind(component)); - }; - - link.updateLinkDirection(); - - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( - () => component.createRelation(link.relation).then(onSuccess), - () => this.loaderService.hideLoader('composition-graph') - ); - }; - - private createSimpleLink = (match:Match, cy:Cy.Instance, component:Component):void => { - let newRelation:RelationshipModel = match.matchToRelationModel(); - let linkObg:CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]); - this.createLink(linkObg, cy, component); - }; - - public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Match, component:Component):void => { - - if (chosenMatch) { - if (chosenMatch && chosenMatch instanceof Match) { - this.createSimpleLink(chosenMatch, cy, component); - } - } - }; - - - /** - * Filters the matches for UCPE links so that shown requirements and capabilites are only related to the selected ucpe-cp - * @param fromNode - * @param toNode - * @param matchesArray - * @returns {Array<MatchBase>} - */ - public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<Match>):any { - - let matchLink:Array<Match>; - - if (fromNode.isUcpePart) { - matchLink = _.filter(matchesArray, (match:Match) => { - return match.isOwner(fromNode.id); - }); - } - - if (toNode.isUcpePart) { - matchLink = _.filter(matchesArray, (match:Match) => { - return match.isOwner(toNode.id); - }); - } - return matchLink ? matchLink : matchesArray; - } - - - /** - * open the connect link menu if the link drawn is valid - match requirements & capabilities - * @param cy - * @param fromNode - * @param toNode - * @returns {any} - */ - public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):ConnectRelationModel { - - if (!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)) { - return null; - } - let linkModel:Array<CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy); - - let possibleRelations:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance, - toNode.data().componentInstance, linkModel); - - //filter relations found to limit to specific ucpe-cp - possibleRelations = this.filterUcpeLinks(fromNode.data(), toNode.data(), possibleRelations); - - //if found possibleRelations between the nodes we create relation menu directive and open the link menu - if (possibleRelations.length) { - // let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint()); - return new ConnectRelationModel(fromNode.data(), toNode.data(), possibleRelations); - } - return null; - }; - - - /** - * when we drag instance in to UCPE or out of UCPE - get all links we need to delete - one node in ucpe and one node outside of ucpe - * @param node - the node we dragged into or out of the ucpe - */ - public deleteLinksWhenNodeMovedFromOrToUCPE(component:Component, cy:Cy.Instance, nodeMoved:Cy.CollectionNodes, vlsPendingDeletion?:Cy.CollectionNodes):void { - - - let linksToDelete:Cy.CollectionElements = cy.collection(); - _.forEach(nodeMoved.neighborhood('node'), (neighborNode)=> { - - if (neighborNode.data().isUcpePart) { //existing connections to ucpe or ucpe-cp - we want to delete even though nodeLocationsCompatible will technically return true - linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); // This will delete the ucpe-host-link, or the vl-ucpe-link if nodeMoved is vl - } else if (!this.commonGraphUtils.nodeLocationsCompatible(cy, nodeMoved, neighborNode)) { //connection to regular node or vl - check if locations are compatible - if (!vlsPendingDeletion || !vlsPendingDeletion.intersect(neighborNode).length) { //Check if this is a link to a VL pending deletion, to prevent double deletion of between the node moved and vl - linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); - } - } - }); - - linksToDelete.each((i, link)=> { - this.deleteLink(cy, component, false, link); - }); - - }; - - /** - * Creates a hostedOn link between a VF and UCPE - * @param component - * @param cy - * @param ucpeNode - * @param vfNode - */ - public createVfToUcpeLink = (component:Component, cy:Cy.Instance, ucpeNode:NodeUcpe, vfNode:CompositionCiNodeVf):void => { - let hostedOnMatch:Match = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance); - /* create relation */ - let newRelation = new RelationshipModel(); - newRelation.fromNode = ucpeNode.id; - newRelation.toNode = vfNode.id; - - let link:CompositionCiLinkBase = this.linksFactory.createUcpeHostLink(newRelation); - link.relation = hostedOnMatch.matchToRelationModel(); - this.createLink(link, cy, component); - }; - - private handlePathLink(cy:Cy.Instance, event:Cy.EventObject) { - let linkData = event.cyTarget.data(); - let selectedPathId = linkData.pathId; - let pathEdges = cy.collection(`[pathId='${selectedPathId}']`); - if (pathEdges.length > 1) { - setTimeout(() => { - pathEdges.select(); - }, 0); - } - } - - private handleVLLink(event:Cy.EventObject) { - let vl:Cy.CollectionNodes = event.cyTarget[0].target('.vl-node'); - let connectedEdges:Cy.CollectionEdges = vl.connectedEdges(`[type!="${CompositionCiServicePathLink.LINK_TYPE}"]`); - if (vl.length && connectedEdges.length > 1) { - setTimeout(() => { - vl.select(); - connectedEdges.select(); - }, 0); - } - } - - - /** - * Handles click event on links. - * If one edge selected: do nothing. - * Two or more edges: first click - select all, secondary click - select single. - * @param cy - * @param event - */ - public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) { - if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) { - cy.$(':selected').unselect(); - } else { - if (event.cyTarget[0].data().type === CompositionCiServicePathLink.LINK_TYPE) { - this.handlePathLink(cy, event); - } - else { - this.handleVLLink(event); - } - } - } - - - /** - * Calculates the position for the menu that modifies an existing link - * @param event - * @param elementWidth - * @param elementHeight - * @returns {Point} - */ - public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point { - let point:Point = new Point(event.originalEvent.clientX, event.originalEvent.clientY); - if (event.originalEvent.view.screen.height - elementHeight < point.y) { - point.y = event.originalEvent.view.screen.height - elementHeight; - } - if (event.originalEvent.view.screen.width - elementWidth < point.x) { - point.x = event.originalEvent.view.screen.width - elementWidth; - } - return point; - }; - - - /** - * Gets the menu that is displayed when you click an existing link. - * @param link - * @param event - * @returns {LinkMenu} - */ - public getModifyLinkMenu(link:Cy.CollectionFirstEdge, event:Cy.EventObject):LinkMenu { - let point:Point = this.calculateLinkMenuPosition(event, GraphUIObjects.MENU_LINK_VL_WIDTH_OFFSET, GraphUIObjects.MENU_LINK_VL_HEIGHT_OFFSET); - let menu:LinkMenu = new LinkMenu(point, true, link); - return menu; - }; - -} - - -CompositionGraphLinkUtils.$inject = [ - 'LinksFactory', - 'LoaderService', - 'CompositionGraphGeneralUtils', - 'CommonGraphUtils', - 'MatchCapabilitiesRequirementsUtils' -]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts deleted file mode 100644 index c6c732b7df..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts +++ /dev/null @@ -1,277 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { Component, NodesFactory, ComponentInstance, CompositionCiNodeVl, IAppMenu, AssetPopoverObj, Service } from "app/models"; -import { EventListenerService, LoaderService } from "app/services"; -import { GRAPH_EVENTS, ModalsHandler, GraphUIObjects } from "app/utils"; -import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils"; -import { CommonGraphUtils } from "../../common/common-graph-utils"; -import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; -import { ServiceGenericResponse } from "app/ng2/services/responses/service-generic-response"; -import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service'; -/** - * Created by obarda on 11/9/2016. - */ -export class CompositionGraphNodesUtils { - constructor(private NodesFactory: NodesFactory, private $log: ng.ILogService, - private GeneralGraphUtils: CompositionGraphGeneralUtils, - private commonGraphUtils: CommonGraphUtils, - private eventListenerService: EventListenerService, - private loaderService: LoaderService, - private serviceService: ServiceServiceNg2) { - - } - - /** - * Returns component instances for all nodes passed in - * @param nodes - Cy nodes - * @returns {any[]} - */ - public getAllNodesData(nodes: Cy.CollectionNodes) { - return _.map(nodes, (node: Cy.CollectionFirstNode) => { - return node.data(); - }) - }; - - - public highlightMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string) => { - - cy.batch(() => { - cy.nodes("[name !@^= '" + nameToMatch + "']").style({ 'background-image-opacity': 0.4 }); - cy.nodes("[name @^= '" + nameToMatch + "']").style({ 'background-image-opacity': 1 }); - }) - - } - - //Returns all nodes whose name starts with searchTerm - public getMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string): Cy.CollectionNodes => { - return cy.nodes("[name @^= '" + nameToMatch + "']"); - }; - - /** - * Deletes component instances on server and then removes it from the graph as well - * @param cy - * @param component - * @param nodeToDelete - */ - public deleteNode(cy: Cy.Instance, component: Component, nodeToDelete: Cy.CollectionNodes): void { - - this.loaderService.showLoader('composition-graph'); - let onSuccess: (response: ComponentInstance) => void = (response: ComponentInstance) => { - console.info('onSuccess', response); - - //if node to delete is a UCPE, remove all children (except UCPE-CPs) and remove their "hostedOn" links - if (nodeToDelete.data().isUcpe) { - _.each(cy.nodes('[?isInsideGroup]'), (node) => { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, nodeToDelete); - }); - } - - //check whether the node is connected to any VLs that only have one other connection. If so, delete that VL as well - if (!(nodeToDelete.data() instanceof CompositionCiNodeVl)) { - let connectedVls: Array<Cy.CollectionFirstNode> = this.getConnectedVlToNode(nodeToDelete); - this.handleConnectedVlsToDelete(connectedVls); - } - - // check whether there is a service path going through this node, and if so clean it from the graph. - let nodeId = nodeToDelete.data().id; - let connectedPathLinks = cy.collection(`[type="${CompositionCiServicePathLink.LINK_TYPE}"][source="${nodeId}"], [type="${CompositionCiServicePathLink.LINK_TYPE}"][target="${nodeId}"]`); - _.forEach(connectedPathLinks, (link, key) => { - cy.remove(`[pathId="${link.data().pathId}"]`); - }); - - // update service path list - this.serviceService.getComponentCompositionData(component).subscribe((response: ServiceGenericResponse) => { - (<Service>component).forwardingPaths = response.forwardingPaths; - }); - - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, nodeId); - - //update UI - cy.remove(nodeToDelete); - }; - - let onFailed: (response: any) => void = (response: any) => { - console.info('onFailed', response); - }; - - - this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( - () => component.deleteComponentInstance(nodeToDelete.data().componentInstance.uniqueId).then(onSuccess, onFailed), - () => this.loaderService.hideLoader('composition-graph') - ); - - }; - - /** - * Finds all VLs connected to a single node - * @param node - * @returns {Array<Cy.CollectionFirstNode>} - */ - public getConnectedVlToNode = (node: Cy.CollectionNodes): Array<Cy.CollectionFirstNode> => { - let connectedVls: Array<Cy.CollectionFirstNode> = new Array<Cy.CollectionFirstNode>(); - _.forEach(node.connectedEdges().connectedNodes(), (node: Cy.CollectionFirstNode) => { - if (node.data() instanceof CompositionCiNodeVl) { - connectedVls.push(node); - } - }); - return connectedVls; - }; - - - /** - * Delete all VLs that have only two connected nodes (this function is called when deleting a node) - * @param connectedVls - */ - public handleConnectedVlsToDelete = (connectedVls: Array<Cy.CollectionFirstNode>) => { - _.forEach(connectedVls, (vlToDelete: Cy.CollectionNodes) => { - - if (vlToDelete.connectedEdges().length === 2) { // if vl connected only to 2 nodes need to delete the vl - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, vlToDelete.data().componentInstance); - } - }); - }; - - - /** - * This function is called when moving a node in or out of UCPE. - * Deletes all connected VLs that have less than 2 valid connections remaining after the move - * Returns the collection of vls that are in the process of deletion (async) to prevent duplicate calls while deletion is in progress - * @param component - * @param cy - * @param node - node that was moved in/out of ucpe - */ - public deleteNodeVLsUponMoveToOrFromUCPE = (component: Component, cy: Cy.Instance, node: Cy.CollectionNodes): Cy.CollectionNodes => { - if (node.data() instanceof CompositionCiNodeVl) { - return; - } - - let connectedVLsToDelete: Cy.CollectionNodes = cy.collection(); - _.forEach(node.neighborhood('node'), (connectedNode) => { - - //Find all neighboring nodes that are VLs - if (connectedNode.data() instanceof CompositionCiNodeVl) { - - //check VL's neighbors to see if it has 2 or more nodes whose location is compatible with VL (regardless of whether VL is in or out of UCPE) - let compatibleNodeCount = 0; - let vlNeighborhood = connectedNode.neighborhood('node'); - _.forEach(vlNeighborhood, (vlNeighborNode) => { - if (this.commonGraphUtils.nodeLocationsCompatible(cy, connectedNode, vlNeighborNode)) { - compatibleNodeCount++; - } - }); - - if (compatibleNodeCount < 2) { - connectedVLsToDelete = connectedVLsToDelete.add(connectedNode); - } - } - }); - - connectedVLsToDelete.each((i, vlToDelete: Cy.CollectionNodes) => { - this.deleteNode(cy, component, vlToDelete); - }); - return connectedVLsToDelete; - }; - - /** - * This function will update nodes position. if the new position is into or out of ucpe, the node will trigger the ucpe events - * @param cy - * @param component - * @param nodesMoved - the node/multiple nodes now moved by the user - */ - public onNodesPositionChanged = (cy: Cy.Instance, component: Component, nodesMoved: Cy.CollectionNodes): void => { - - if (nodesMoved.length === 0) { - return; - } - - let isValidMove: boolean = this.GeneralGraphUtils.isGroupValidDrop(cy, nodesMoved); - if (isValidMove) { - - this.$log.debug(`composition-graph::ValidDrop:: updating node position`); - let instancesToUpdateInNonBlockingAction: Array<ComponentInstance> = new Array<ComponentInstance>(); - - _.each(nodesMoved, (node: Cy.CollectionFirstNode) => { //update all nodes new position - - if (node.data().isUcpePart && !node.data().isUcpe) { - return; - }//No need to update UCPE-CPs - - //update position - let newPosition: Cy.Position = this.commonGraphUtils.getNodePosition(node); - node.data().componentInstance.updatePosition(newPosition.x, newPosition.y); - - //check if node moved to or from UCPE - let ucpe = this.commonGraphUtils.isInUcpe(node.cy(), node.boundingbox()); - if (node.data().isInsideGroup || ucpe.length) { - this.handleUcpeChildMove(node, ucpe, instancesToUpdateInNonBlockingAction); - } else { - instancesToUpdateInNonBlockingAction.push(node.data().componentInstance); - } - - }); - - if (instancesToUpdateInNonBlockingAction.length > 0) { - this.GeneralGraphUtils.pushMultipleUpdateComponentInstancesRequestToQueue(false, instancesToUpdateInNonBlockingAction, component); - } - } else { - this.$log.debug(`composition-graph::notValidDrop:: node return to latest position`); - //reset nodes position - nodesMoved.positions((i, node) => { - return { - x: +node.data().componentInstance.posX, - y: +node.data().componentInstance.posY - }; - }) - } - - this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(() => { - }, () => { - this.loaderService.hideLoader('composition-graph'); - }); - - }; - - /** - * Checks whether the node has been added or removed from UCPE and triggers appropriate events - * @param node - node moved - * @param ucpeContainer - UCPE container that the node has been moved to. When moving a node out of ucpe, param will be empty - * @param instancesToUpdateInNonBlockingAction - */ - public handleUcpeChildMove(node: Cy.CollectionFirstNode, ucpeContainer: Cy.CollectionElements, instancesToUpdateInNonBlockingAction: Array<ComponentInstance>) { - - if (node.data().isInsideGroup) { - if (ucpeContainer.length) { //moving node within UCPE. Simply update position - this.commonGraphUtils.updateUcpeChildPosition(<Cy.CollectionNodes>node, ucpeContainer); - instancesToUpdateInNonBlockingAction.push(node.data().componentInstance); - } else { //removing node from UCPE. Notify observers - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, ucpeContainer); - } - } else if (!node.data().isInsideGroup && ucpeContainer.length && !node.data().isUcpePart) { //adding node to UCPE - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, node, ucpeContainer, true); - } - } - -} - - -CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService', 'ServiceServiceNg2' /*, 'sdcMenu', 'ModalsHandler'*/] - diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts deleted file mode 100644 index 10d0d42922..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts +++ /dev/null @@ -1,183 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { EventListenerService, LoaderService } from "app/services"; -import { CapabilitiesGroup, NodesFactory, ComponentInstance, Component, CompositionCiNodeBase, RequirementsGroup } from "app/models"; -import { ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects } from "app/utils"; -import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils"; -import { CommonGraphUtils } from "../../common/common-graph-utils"; -import 'sdc-angular-dragdrop'; -import { LeftPaletteComponent } from "../../../../models/components/displayComponent"; - -export class CompositionGraphPaletteUtils { - - constructor(private ComponentFactory: ComponentFactory, - private $filter: ng.IFilterService, - private loaderService: LoaderService, - private generalGraphUtils: CompositionGraphGeneralUtils, - private componentInstanceFactory: ComponentInstanceFactory, - private nodesFactory: NodesFactory, - private commonGraphUtils: CommonGraphUtils, - private eventListenerService: EventListenerService) { - } - - /** - * Calculate the dragged element (html element) position on canvas - * @param cy - * @param event - * @param position - * @returns {Cy.BoundingBox} - * @private - */ - private _getNodeBBox(cy: Cy.Instance, event: IDragDropEvent, position?: Cy.Position) { - let bbox = <Cy.BoundingBox>{}; - if (!position) { - position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event); - } - let cushionWidth: number = 40; - let cushionHeight: number = 40; - - bbox.x1 = position.x - cushionWidth / 2; - bbox.y1 = position.y - cushionHeight / 2; - bbox.x2 = position.x + cushionWidth / 2; - bbox.y2 = position.y + cushionHeight / 2; - return bbox; - } - - /** - * Create the component instance, update data from parent component in the left palette and notify on_insert_to_ucpe if component was dragg into ucpe - * @param cy - * @param fullComponent - * @param event - * @param component - */ - private _createComponentInstanceOnGraphFromPaletteComponent(cy: Cy.Instance, fullComponent: LeftPaletteComponent, event: IDragDropEvent, component: Component) { - - let componentInstanceToCreate: ComponentInstance = this.componentInstanceFactory.createComponentInstanceFromComponent(fullComponent); - let cytoscapePosition: Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event); - - componentInstanceToCreate.posX = cytoscapePosition.x; - componentInstanceToCreate.posY = cytoscapePosition.y; - - - let onFailedCreatingInstance: (error: any) => void = (error: any) => { - this.loaderService.hideLoader('composition-graph'); - }; - - //on success - update node data - let onSuccessCreatingInstance = (createInstance: ComponentInstance): void => { - - this.loaderService.hideLoader('composition-graph'); - - createInstance.name = this.$filter('resourceName')(createInstance.name); - createInstance.requirements = new RequirementsGroup(createInstance.requirements); - createInstance.capabilities = new CapabilitiesGroup(createInstance.capabilities); - createInstance.componentVersion = fullComponent.version; - createInstance.icon = fullComponent.icon; - createInstance.setInstanceRC(); - - let newNode: CompositionCiNodeBase = this.nodesFactory.createNode(createInstance); - let cyNode: Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode); - - //check if node was dropped into a UCPE - let ucpe: Cy.CollectionElements = this.commonGraphUtils.isInUcpe(cy, cyNode.boundingbox()); - if (ucpe.length > 0) { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false); - } - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE); - - }; - - this.loaderService.showLoader('composition-graph'); - - // Create the component instance on server - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => { - component.createComponentInstance(componentInstanceToCreate).then(onSuccessCreatingInstance, onFailedCreatingInstance); - }); - } - - /** - * Thid function applay red/green background when component dragged from palette - * @param cy - * @param event - * @param dragElement - * @param dragComponent - */ - public onComponentDrag(cy: Cy.Instance, event: IDragDropEvent, dragElement: JQuery, dragComponent: ComponentInstance) { - - if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop - dragElement.removeClass('red'); - return; - } - - let offsetPosition = { - x: event.clientX - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET, - y: event.clientY - GraphUIObjects.DIAGRAM_HEADER_OFFSET - }; - let bbox = this._getNodeBBox(cy, event, offsetPosition); - - if (this.generalGraphUtils.isPaletteDropValid(cy, bbox, dragComponent)) { - dragElement.removeClass('red'); - } else { - dragElement.addClass('red'); - } - } - - /** - * This function is called when after dropping node on canvas - * Check if the capability & requirements fulfilled and if not get from server - * @param cy - * @param event - * @param component - */ - public addNodeFromPalette(cy: Cy.Instance, event: IDragDropEvent, component: Component) { - this.loaderService.showLoader('composition-graph'); - - let draggedComponent: LeftPaletteComponent = event.dataTransfer.component; - - if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) { - let fullComponent = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId); - draggedComponent.capabilities = fullComponent.capabilities; - draggedComponent.requirements = fullComponent.requirements; - this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component); - - } else { - - this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId) - .then((fullComponent: Component) => { - draggedComponent.capabilities = fullComponent.capabilities; - draggedComponent.requirements = fullComponent.requirements; - this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component); - }); - } - } -} - - -CompositionGraphPaletteUtils.$inject = [ - 'ComponentFactory', - '$filter', - 'LoaderService', - 'CompositionGraphGeneralUtils', - 'ComponentInstanceFactory', - 'NodesFactory', - 'CommonGraphUtils', - 'EventListenerService' -]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts deleted file mode 100644 index 48befef22d..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts +++ /dev/null @@ -1,86 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { LoaderService } from "app/services"; -import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils"; -import { ICompositionGraphScope } from "../composition-graph.directive"; -import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service'; -import { Service } from "../../../../models/components/service"; -import { ForwardingPath } from "app/models/forwarding-path"; -import { ForwardingPathLink } from "app/models/forwarding-path-link"; -import { CompositionCiServicePathLink } from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; -import { CommonGraphUtils } from "app/directives/graphs-v2/common/common-graph-utils"; - -export class ServicePathGraphUtils { - - constructor( - private loaderService: LoaderService, - private generalGraphUtils: CompositionGraphGeneralUtils, - private serviceService: ServiceServiceNg2, - private commonGraphUtils: CommonGraphUtils - ) { } - - public deletePathsFromGraph(cy: Cy.Instance, service: Service) { - cy.remove(`[type="${CompositionCiServicePathLink.LINK_TYPE}"]`); - } - - public drawPath(cy: Cy.Instance, forwardingPath: ForwardingPath, service: Service) { - let pathElements = forwardingPath.pathElements.listToscaDataDefinition; - - _.forEach(pathElements, (link: ForwardingPathLink) => { - let data: CompositionCiServicePathLink = new CompositionCiServicePathLink(link); - data.source = _.find( - service.componentInstances, - instance => instance.name === data.forwardingPathLink.fromNode - ).uniqueId; - data.target = _.find( - service.componentInstances, - instance => instance.name === data.forwardingPathLink.toNode - ).uniqueId; - data.pathId = forwardingPath.uniqueId; - data.pathName = forwardingPath.name; - this.commonGraphUtils.insertServicePathLinkToGraph(cy, data); - }); - } - - public createOrUpdateServicePath = (scope: ICompositionGraphScope, path: any): void => { - let service = <Service>scope.component; - this.loaderService.showLoader('composition-graph'); - - let onSuccess: (response: ForwardingPath) => void = (response: ForwardingPath) => { - - service.forwardingPaths[response.uniqueId] = response; - scope.selectedPathId = response.uniqueId; - }; - - this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( - () => this.serviceService.createOrUpdateServicePath(service, path).subscribe(onSuccess), - () => this.loaderService.hideLoader('composition-graph') - ); - }; -} - -ServicePathGraphUtils.$inject = [ - 'LoaderService', - 'CompositionGraphGeneralUtils', - 'ServiceServiceNg2', - 'CommonGraphUtils' -]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts deleted file mode 100644 index cf6c7e3bd6..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts +++ /dev/null @@ -1,195 +0,0 @@ -import { PolicyInstance } from "app/models/graph/zones/policy-instance"; -import { ZoneInstance, ZoneInstanceType, ZoneInstanceAssignmentType } from "app/models/graph/zones/zone-instance"; -import { Zone } from "app/models/graph/zones/zone"; -import { DynamicComponentService } from "app/ng2/services/dynamic-component.service"; -import { PaletteAnimationComponent } from "app/ng2/components/ui/palette-animation/palette-animation.component"; -import { Point, LeftPaletteMetadataTypes, Component } from "../../../../models"; -import { CanvasHandleTypes } from "app/utils"; -import { PoliciesService } from "../../../../ng2/services/policies.service"; -import { Observable } from "rxjs"; -import { GroupsService } from "../../../../ng2/services/groups.service"; -import { GroupInstance } from "app/models/graph/zones/group-instance"; - - -export class CompositionGraphZoneUtils { - - constructor(private dynamicComponentService: DynamicComponentService, - private policiesService: PoliciesService, - private groupsService: GroupsService) { - } - - - public createCompositionZones = (): Array<Zone> => { - let zones: Array<Zone> = []; - - zones[ZoneInstanceType.POLICY] = new Zone('Policies', 'P', ZoneInstanceType.POLICY); - zones[ZoneInstanceType.GROUP] = new Zone('Groups', 'G', ZoneInstanceType.GROUP); - - return zones; - } - - public showZone = (zone: Zone): void => { - zone.visible = true; - zone.minimized = false; - } - - public getZoneTypeForPaletteComponent = (componentCategory: LeftPaletteMetadataTypes) => { - if (componentCategory == LeftPaletteMetadataTypes.Group) { - return ZoneInstanceType.GROUP; - } else if (componentCategory == LeftPaletteMetadataTypes.Policy) { - return ZoneInstanceType.POLICY; - } - }; - - public initZoneInstances(zones: Array<Zone>, component: Component) { - if (component.groupInstances && component.groupInstances.length) { - this.showZone(zones[ZoneInstanceType.GROUP]); - _.forEach(component.groupInstances, (group: GroupInstance) => { - let newInstance = new ZoneInstance(group, component); - this.addInstanceToZone(zones[ZoneInstanceType.GROUP], newInstance); - }); - } - - if (component.policies && component.policies.length) { - this.showZone(zones[ZoneInstanceType.POLICY]); - _.forEach(component.policies, (policy: PolicyInstance) => { - let newInstance = new ZoneInstance(policy, component); - this.addInstanceToZone(zones[ZoneInstanceType.POLICY], newInstance); - - }); - } - } - - public findAndUpdateZoneInstanceData(zones: Array<Zone>, instanceData: PolicyInstance | GroupInstance) { - _.forEach(zones, (zone: Zone) => { - _.forEach(zone.instances, (zoneInstance: ZoneInstance) => { - if (zoneInstance.instanceData.uniqueId === instanceData.uniqueId) { - zoneInstance.updateInstanceData(instanceData); - } - }); - }); - } - - public updateTargetsOrMembersOnCanvasDelete = (canvasNodeID: string, zones: Array<Zone>, type: ZoneInstanceAssignmentType): void => { - _.forEach(zones, (zone) => { - _.forEach(zone.instances, (zoneInstance: ZoneInstance) => { - if (zoneInstance.isAlreadyAssigned(canvasNodeID)) { - zoneInstance.addOrRemoveAssignment(canvasNodeID, type); - //remove it from our list of BE targets and members as well (so that it will not be sent in future calls to BE). - zoneInstance.instanceData.setSavedAssignments(zoneInstance.assignments); - } - }); - }); - }; - - public createZoneInstanceFromLeftPalette = (zoneType: ZoneInstanceType, component: Component, paletteComponentType: string): Observable<ZoneInstance> => { - if (zoneType === ZoneInstanceType.POLICY) { - return this.policiesService.createPolicyInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => { - let newInstance = new PolicyInstance(response); - component.policies.push(newInstance); - return new ZoneInstance(newInstance, component); - }); - } else if (zoneType === ZoneInstanceType.GROUP) { - return this.groupsService.createGroupInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => { - let newInstance = new GroupInstance(response); - component.groupInstances.push(newInstance); - return new ZoneInstance(newInstance, component); - }); - } - } - - public addInstanceToZone(zone: Zone, instance: ZoneInstance, hide?: boolean) { - if (hide) { - instance.hidden = true; - } - zone.instances.push(instance); - - }; - - private findZoneCoordinates(zoneType): Point { - let point: Point = new Point(0, 0); - let zone = angular.element(document.querySelector('.' + zoneType + '-zone')); - let wrapperZone = zone.offsetParent(); - point.x = zone.prop('offsetLeft') + wrapperZone.prop('offsetLeft'); - point.y = zone.prop('offsetTop') + wrapperZone.prop('offsetTop'); - return point; - } - - public createPaletteToZoneAnimation = (startPoint: Point, zoneType: ZoneInstanceType, newInstance: ZoneInstance) => { - let zoneTypeName = ZoneInstanceType[zoneType].toLowerCase(); - let paletteToZoneAnimation = this.dynamicComponentService.createDynamicComponent(PaletteAnimationComponent); - paletteToZoneAnimation.instance.from = startPoint; - paletteToZoneAnimation.instance.type = zoneType; - paletteToZoneAnimation.instance.to = this.findZoneCoordinates(zoneTypeName); - paletteToZoneAnimation.instance.zoneInstance = newInstance; - paletteToZoneAnimation.instance.iconName = zoneTypeName; - paletteToZoneAnimation.instance.runAnimation(); - } - - public startCyTagMode = (cy: Cy.Instance) => { - cy.autolock(true); - cy.nodes().unselectify(); - cy.emit('tagstart'); //dont need to show handles because they're already visible bcz of hover event - - }; - - public endCyTagMode = (cy: Cy.Instance) => { - cy.emit('tagend'); - cy.nodes().selectify(); - cy.autolock(false); - }; - - public handleTagClick = (cy: Cy.Instance, zoneInstance: ZoneInstance, nodeId: string) => { - zoneInstance.addOrRemoveAssignment(nodeId, ZoneInstanceAssignmentType.COMPONENT_INSTANCES); - this.showZoneTagIndicationForNode(nodeId, zoneInstance, cy); - }; - - public showGroupZoneIndications = (groupInstances: Array<ZoneInstance>, policyInstance: ZoneInstance) => { - groupInstances.forEach((groupInstance: ZoneInstance) => { - let handle: string = this.getCorrectHandleForNode(groupInstance.instanceData.uniqueId, policyInstance); - groupInstance.showHandle(handle); - }) - }; - - public hideGroupZoneIndications = (instances: Array<ZoneInstance>) => { - instances.forEach((instance) => { - instance.hideHandle(); - }) - } - - public showZoneTagIndications = (cy: Cy.Instance, zoneInstance: ZoneInstance) => { - - cy.nodes().forEach(node => { - let handleType: string = this.getCorrectHandleForNode(node.id(), zoneInstance); - cy.emit('showhandle', [node, handleType]); - }); - }; - - public showZoneTagIndicationForNode = (nodeId: string, zoneInstance: ZoneInstance, cy: Cy.Instance) => { - let node = cy.getElementById(nodeId); - let handleType: string = this.getCorrectHandleForNode(nodeId, zoneInstance); - cy.emit('showhandle', [node, handleType]); - } - - public hideZoneTagIndications = (cy: Cy.Instance) => { - cy.emit('hidehandles'); - }; - - public getCorrectHandleForNode = (nodeId: string, zoneInstance: ZoneInstance): string => { - if (zoneInstance.isAlreadyAssigned(nodeId)) { - if (zoneInstance.type == ZoneInstanceType.POLICY) { - return CanvasHandleTypes.TAGGED_POLICY; - } else { - return CanvasHandleTypes.TAGGED_GROUP; - } - } else { - return CanvasHandleTypes.TAG_AVAILABLE; - } - }; -} - -CompositionGraphZoneUtils.$inject = [ - 'DynamicComponentService', - 'PoliciesServiceNg2', - 'GroupsServiceNg2' -];
\ No newline at end of file diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts deleted file mode 100644 index aa1991069e..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts +++ /dev/null @@ -1,204 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { - Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match, - CompositionCiNodeBase, Component, Capability -} from "app/models"; -import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance"; -/** - * Created by obarda on 1/1/2017. - */ - -export class MatchCapabilitiesRequirementsUtils { - - /** - * Shows + icon in corner of each node passed in - * @param filteredNodesData - * @param cy - */ - public highlightMatchingComponents(filteredNodesData, cy: Cy.Instance) { - _.each(filteredNodesData, (data: any) => { - let node = cy.getElementById(data.id); - cy.emit('showhandle', [node]); - }); - } - - /** - * Adds opacity to each node that cannot be linked to hovered node - * @param filteredNodesData - * @param nodesData - * @param cy - * @param hoveredNodeData - */ - public fadeNonMachingComponents(filteredNodesData, nodesData, cy: Cy.Instance, hoveredNodeData?) { - let fadeNodes = _.xorWith(nodesData, filteredNodesData, (node1, node2) => { - return node1.id === node2.id; - }); - if (hoveredNodeData) { - _.remove(fadeNodes, hoveredNodeData); - } - cy.batch(() => { - _.each(fadeNodes, (node) => { - cy.getElementById(node.id).style({ 'background-image-opacity': 0.4 }); - }); - }) - } - - /** - * Resets all nodes to regular opacity - * @param cy - */ - public resetFadedNodes(cy: Cy.Instance) { - cy.batch(() => { - cy.nodes().style({ 'background-image-opacity': 1 }); - }) - } - - private static isRequirementFulfilled(fromNodeId: string, requirement: any, links: Array<CompositionCiLinkBase>): boolean { - if (requirement.maxOccurrences === 'UNBOUNDED') { - return false; - } - let linksWithThisReq: Array<CompositionCiLinkBase> = _.filter(links, { - 'relation': { - 'fromNode': fromNodeId, - 'relationships': [{ - 'relation': { - 'requirementOwnerId': requirement.ownerId, - 'requirement': requirement.name, - 'relationship': { - 'type': requirement.capability - } - - } - }] - } - }); - return linksWithThisReq.length == requirement.maxOccurrences; - }; - - private static isMatch(requirement: Requirement, capability: Capability): boolean { - if (capability.type === requirement.capability) { - if (requirement.node) { - if (_.includes(capability.capabilitySources, requirement.node)) { - return true; - } - } else { - return true; - } - } - return false; - }; - - public getMatchedRequirementsCapabilities(fromComponentInstance: ComponentInstance, - toComponentInstance: ComponentInstance, - links: Array<CompositionCiLinkBase>): Array<Match> { - let fromToMatches: Array<Match> = this.getMatches(fromComponentInstance.requirements, - toComponentInstance.capabilities, - links, - fromComponentInstance.uniqueId, - toComponentInstance.uniqueId, true); - let toFromMatches: Array<Match> = this.getMatches(toComponentInstance.requirements, - fromComponentInstance.capabilities, - links, - fromComponentInstance.uniqueId, - toComponentInstance.uniqueId, false); - - return fromToMatches.concat(toFromMatches); - } - - /***** REFACTORED FUNCTIONS START HERE *****/ - - public getMatches(requirements: RequirementsGroup, capabilities: CapabilitiesGroup, links: Array<CompositionCiLinkBase>, - fromId: string, toId: string, isFromTo: boolean): Array<Match> { - let matches: Array<Match> = []; - let unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links); - _.forEach(unfulfilledReqs, (req) => { - _.forEach(_.flatten(_.values(capabilities)), (capability: Capability) => { - if (MatchCapabilitiesRequirementsUtils.isMatch(req, capability)) { - if (isFromTo) { - matches.push(new Match(req, capability, isFromTo, fromId, toId)); - } else { - matches.push(new Match(req, capability, isFromTo, toId, fromId)); - } - } - }); - }); - return matches; - } - - public getUnfulfilledRequirements = (fromNodeId: string, requirements: RequirementsGroup, links: Array<CompositionCiLinkBase>): Array<Requirement> => { - - let requirementArray: Array<Requirement> = []; - _.forEach(_.flatten(_.values(requirements)), (requirement: Requirement) => { - if (requirement.name !== 'dependency' && requirement.parentName !== 'dependency' && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) { - requirementArray.push(requirement); - } - }); - return requirementArray; - }; - - - /** - * Returns true if there is a match between the capabilities and requirements that are passed in - * @param requirements - * @param capabilities - * @returns {boolean} - */ - public containsMatch = (requirements: Array<Requirement>, capabilities: CapabilitiesGroup): boolean => { - return _.some(requirements, (req: Requirement) => { - return _.some(_.flatten(_.values(capabilities)), (capability: Capability) => { - return MatchCapabilitiesRequirementsUtils.isMatch(req, capability); - }); - }); - }; - - /** - * Returns array of nodes that can connect to the component. - * In order to connect, one of the following conditions must be met: - * 1. component has an unfulfilled requirement that matches a node's capabilities - * 2. node has an unfulfilled requirement that matches the component's capabilities - * 3. vl is passed in which has the capability to fulfill requirement from component and requirement on node. - */ - public findMatchingNodes(component: Component, nodeDataArray: Array<CompositionCiNodeBase>, - links: Array<CompositionCiLinkBase>): Array<any> //TODO allow for VL array and TEST - { - let componentRequirements: Array<Requirement> = this.getUnfulfilledRequirements(component.uniqueId, component.requirements, links); - return _.filter(nodeDataArray, (node: any) => { - if (node && node.componentInstance) { - - //Check if component has an unfulfilled requirement that can be met by one of nodes's capabilities (#1) - if (componentRequirements.length && node.category !== 'groupCp' && this.containsMatch(componentRequirements, node.componentInstance.capabilities)) { - return true; - - } else { //Check if node has unfulfilled requirement that can be filled by component (#2) - let nodeRequirements: Array<Requirement> = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links); - if (!nodeRequirements.length) return false; - if (this.containsMatch(nodeRequirements, component.capabilities)) { - return true; - } - } - } - }); - } -} - -MatchCapabilitiesRequirementsUtils.$inject = []; diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts deleted file mode 100644 index 159a1c8347..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts +++ /dev/null @@ -1,155 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { Component, Module, NodesFactory, ComponentInstance } from "app/models"; -import { ComponentInstanceFactory } from "app/utils"; -import { DeploymentGraphGeneralUtils } from "./deployment-utils/deployment-graph-general-utils"; -import { CommonGraphUtils } from "../common/common-graph-utils"; -import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style"; -import { ModulesNodesStyle } from "../common/style/module-node-style"; -import { GRAPH_EVENTS } from "app/utils"; -import { EventListenerService } from "app/services"; -import '@bardit/cytoscape-expand-collapse'; -import { AngularJSBridge } from "../../../services/angular-js-bridge-service"; - -interface IDeploymentGraphScope extends ng.IScope { - component: Component; -} - -export class DeploymentGraph implements ng.IDirective { - private _cy: Cy.Instance; - - constructor(private NodesFactory: NodesFactory, - private commonGraphUtils: CommonGraphUtils, - private deploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, - private ComponentInstanceFactory: ComponentInstanceFactory, - private eventListenerService: EventListenerService) { - } - - restrict = 'E'; - template = require('./deployment-graph.html'); - scope = { - component: '=', - isViewOnly: '=' - }; - - link = (scope: IDeploymentGraphScope, el: JQuery) => { - - if (scope.component.isResource()) { - if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.modules) { - this.loadGraph(scope, el); - } else { - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED, () => { - this.loadGraph(scope, el); - }); - } - } - }; - - public initGraphNodes = (cy: Cy.Instance, component: Component): void => { - if (component.modules) { // Init module nodes - _.each(component.modules, (groupModule: Module) => { - let moduleNode = this.NodesFactory.createModuleNode(groupModule); - this.commonGraphUtils.addNodeToGraph(cy, moduleNode); - - }); - } - _.each(component.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes - let componentInstanceNode = this.NodesFactory.createNode(instance); - componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.modules, 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'); - const imagePath = AngularJSBridge.getAngularConfig().imagesPath; - this._cy = cytoscape({ - container: graphEl, - style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(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: imagePath + '/assets/styles/images/resource-icons/' + 'closeModule.png', - collapseCueImage: imagePath + '/assets/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, scope.component.getRelationRequirementCapability.bind(scope.component)); - this._cy.collapseAll(); - this.registerGraphEvents(); - - scope.$on('$destroy', () => { - this._cy.destroy(); - _.forEach(GRAPH_EVENTS, (event) => { - this.eventListenerService.unRegisterObserver(event); - }); - }); - - }; - - public static factory = (NodesFactory: NodesFactory, CommonGraphUtils: CommonGraphUtils, DeploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, ComponentInstanceFactory: ComponentInstanceFactory, EventListenerService: EventListenerService) => { - return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService) - } -} - -DeploymentGraph.factory.$inject = ['NodesFactory', 'CommonGraphUtils', 'DeploymentGraphGeneralUtils', 'ComponentInstanceFactory', 'EventListenerService']; diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html deleted file mode 100644 index 1bca4bb531..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html +++ /dev/null @@ -1,19 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ - ~ Licensed under the Apache License, Version 2.0 (the "License"); - ~ you may not use this file except in compliance with the License. - ~ You may obtain a copy of the License at - ~ - ~ http://www.apache.org/licenses/LICENSE-2.0 - ~ - ~ Unless required by applicable law or agreed to in writing, software - ~ distributed under the License is distributed on an "AS IS" BASIS, - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - ~ See the License for the specific language governing permissions and - ~ limitations under the License. - --> - - -<div class="sdc-deployment-graph-wrapper" ng-class="{'view-only':isViewOnly}"> -</div> diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less deleted file mode 100644 index f83ee8a891..0000000000 --- a/catalog-ui/src/app/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); - } -} diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts deleted file mode 100644 index 5d0f38fd5e..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts +++ /dev/null @@ -1,43 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import * as _ from "lodash"; -import { Module } from "app/models"; -/** - * Created by obarda on 12/21/2016. - */ - -export class DeploymentGraphGeneralUtils { - - constructor() { - - } - - public findInstanceModule = (groupsArray: Array<Module>, componentInstanceId: string): string => { - let parentGroup: Module = _.find(groupsArray, (group: Module) => { - return _.find((<any>Object).values(group.members), (member: string) => { - return member === componentInstanceId; - }); - }); - return parentGroup ? parentGroup.uniqueId : ""; - }; -} - -DeploymentGraphGeneralUtils.$inject = []; diff --git a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts deleted file mode 100644 index 19c86a254b..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts +++ /dev/null @@ -1,86 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -export interface ICanvasImage { - src: string; - width: number - height: number; - x: number; - y: number; -} - -'use strict'; -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); - } - - /** - * Create an image composed of different image layers - * @param canvasImages - * @param canvasWidth - * @param canvasHeight - * returns a PROMISE - */ - getMultiLayerBase64Image(canvasImages: ICanvasImage[], canvasWidth?: number, canvasHeight?: number): ng.IPromise<string> { - const deferred = this.$q.defer<string>(); - - if (canvasImages && canvasImages.length === 0) { - return null; - } - - //If only width was set, use it for height, otherwise use first canvasImage height - canvasHeight = canvasHeight || canvasImages[0].height; - canvasWidth = canvasWidth || canvasImages[0].width; - - const images = []; - let imagesLoaded = 0; - const onImageLoaded = () => { - imagesLoaded++; - if (imagesLoaded < canvasImages.length) { - return; - } - this._canvas.setAttribute('width', canvasWidth.toString()); - this._canvas.setAttribute('height', canvasHeight.toString()); - const canvasCtx = this._canvas.getContext('2d'); - canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height); - images.forEach((image, index) => { - const canvasImage = canvasImages[index]; - canvasCtx.drawImage(image, canvasImage.x, canvasImage.y, canvasImage.width, canvasImage.height); - }); - let base64Image = this._canvas.toDataURL(); - deferred.resolve(base64Image); - }; - canvasImages.forEach(canvasImage => { - let image = new Image(); - image.onload = onImageLoaded; - image.src = canvasImage.src; - images.push(image); - }); - return deferred.promise; - } -} diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts b/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts deleted file mode 100644 index 26c042611c..0000000000 --- a/catalog-ui/src/app/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/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts deleted file mode 100644 index 01ddb146ac..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts +++ /dev/null @@ -1,338 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ -import * as _ from "lodash"; -import { Component, IAppMenu, LeftPanelModel, NodesFactory, LeftPaletteComponent, CompositionCiNodeBase, ComponentInstance, Point } from "app/models"; -import { CompositionGraphGeneralUtils } from "../composition-graph/utils/composition-graph-general-utils"; -import { EventListenerService } from "app/services"; -import { ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler } from "app/utils"; -import 'sdc-angular-dragdrop'; -import { LeftPaletteLoaderService } from "../../../services/components/utils/composition-left-palette-service"; -import { Resource } from "app/models/components/resource"; -import { ComponentType } from "app/utils/constants"; -import { LeftPaletteMetadataTypes } from "../../../models/components/displayComponent"; -import { IDirectiveLinkFn, IScope } from "angular"; - - -interface IPaletteScope extends IScope { - components: Array<LeftPaletteComponent>; - currentComponent: Component; - model: any; - displaySortedCategories: any; - expandedSection: string; - dragElement: JQuery; - dragbleNode: { - event: JQueryEventObject, - components: LeftPaletteComponent, - ui: any - } - - addInstanceClick: () => void; // added code - onPopupMouseOver: () => void // added code - onPopupMouseOut: () => void // added code - - sectionClick: (section: string) => void; - searchComponents: (searchText: string) => void; - onMouseOver: (displayComponent: LeftPaletteComponent, elem: HTMLElement) => void; - onMouseOut: (displayComponent: LeftPaletteComponent) => void; - - dragStartCallback: (event: JQueryEventObject, ui, displayComponent: LeftPaletteComponent) => 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: LeftPaletteLoaderService, - private sdcConfig, - private ComponentFactory, - private ComponentInstanceFactory: ComponentInstanceFactory, - private NodesFactory: NodesFactory, - private CompositionGraphGeneralUtils: CompositionGraphGeneralUtils, - private EventListenerService: EventListenerService, - private sdcMenu: IAppMenu, - private ModalsHandler: ModalsHandler - ) { - } - - private fetchingComponentFromServer: boolean = false; - private nodeHtmlSubstitute: JQuery; - - scope = { - currentComponent: '=', - isViewOnly: '=', - isLoading: '=' - }; - restrict = 'E'; - template = require('./palette.html'); - - link: IDirectiveLinkFn = (scope: IPaletteScope, el: JQuery) => { - this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent); - this.nodeHtmlSubstitute = $('<div class="node-substitute"><span></span><img /></div>'); - el.append(this.nodeHtmlSubstitute); - this.registerEventListenerForLeftPalette(scope); - - this.initComponents(scope); - this.initEvents(scope); - this.initDragEvents(scope); - this._initExpandedSection(scope, ''); - el.on('$destroy', () => { - //remove listener of download event - this.unRegisterEventListenerForLeftPalette(scope); - }); - }; - - - private registerEventListenerForLeftPalette = (scope: IPaletteScope): void => { - this.EventListenerService.registerObserverCallback(EVENTS.LEFT_PALETTE_UPDATE_EVENT, () => { - this.updateLeftPanelDisplay(scope); - }); - }; - - private unRegisterEventListenerForLeftPalette = (scope: IPaletteScope): void => { - this.EventListenerService.unRegisterObserver(EVENTS.LEFT_PALETTE_UPDATE_EVENT); - }; - - private leftPanelResourceFilter(resourcesNotAbstract: Array<LeftPaletteComponent>, resourceFilterTypes: Array<string>): Array<LeftPaletteComponent> { - let filterResources = _.filter(resourcesNotAbstract, (component) => { - return resourceFilterTypes.indexOf(component.getComponentSubType()) > -1; - }); - return filterResources; - } - - private initLeftPanel(leftPanelComponents: Array<LeftPaletteComponent>, resourceFilterTypes: Array<string>): LeftPanelModel { - let leftPanelModel = new 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 initEvents(scope: IPaletteScope) { - scope.sectionClick = (section: string) => { - if (section === scope.expandedSection) { - scope.expandedSection = ''; - return; - } - scope.expandedSection = section; - }; - - scope.onMouseOver = (displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => { - if (this.isGroupOrPolicy(displayComponent)) { - this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, scope.currentComponent, displayComponent, sectionElem); - } else { - if (scope.isOnDrag) { - return; - } - scope.isOnDrag = true; - this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent); - this.$log.debug('palette::onMouseOver:: fired'); - } - - }; - - scope.onMouseOut = (displayComponent: LeftPaletteComponent) => { - if (this.isGroupOrPolicy(displayComponent)) { - this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL); - } else { - scope.isOnDrag = false; - this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT); - } - }; - } - - private isGroupOrPolicy(component: LeftPaletteComponent): boolean { - if (component && - (component.categoryType === LeftPaletteMetadataTypes.Group || - component.categoryType === LeftPaletteMetadataTypes.Policy)) { - return true; - } - return false; - } - - 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(); - this.updateLeftPanelDisplay(scope); - } - - private updateLeftPanelDisplay(scope: IPaletteScope) { - let entityType: string = scope.currentComponent.componentType.toLowerCase(); - let resourceFilterTypes: Array<string> = this.sdcConfig.resourceTypesFilter[entityType]; - scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent); - //remove the container component from the list - let componentTempToDisplay = angular.copy(scope.components); - componentTempToDisplay = _.remove(componentTempToDisplay, function (leftPalettecomponent) { - return leftPalettecomponent.invariantUUID !== scope.currentComponent.invariantUUID; - }); - scope.model = this.initLeftPanel(componentTempToDisplay, 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: LeftPaletteComponent): void => { - if (scope.isLoading || !scope.isDragable || scope.isViewOnly || this.isGroupOrPolicy(displayComponent)) { - return; - } - - let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent), (componentFullData: LeftPaletteComponent) => { - 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: LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent), - (fullComponent: LeftPaletteComponent) => { - return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId; - }); - let componentInstance: ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent); - let node: 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<LeftPaletteComponent>, subcategoryKey) { - let filteredResources = []; - angular.forEach(subcategory, function (component: LeftPaletteComponent) { - - let resourceFilterTerm: string = component.searchFilterTerms.toLowerCase(); - 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, - ModalsHandler - ) => { - return new Palette($log, - LeftPaletteLoaderService, - sdcConfig, - ComponentFactory, - ComponentInstanceFactory, - NodesFactory, - CompositionGraphGeneralUtils, - EventListenerService, - sdcMenu, - ModalsHandler - ); - }; -} - -Palette.factory.$inject = [ - '$log', - 'LeftPaletteLoaderService', - 'sdcConfig', - 'ComponentFactory', - 'ComponentInstanceFactory', - 'NodesFactory', - 'CompositionGraphGeneralUtils', - 'EventListenerService', - 'sdcMenu', - 'ModalsHandler' -]; diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html deleted file mode 100644 index 1fed02782f..0000000000 --- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html +++ /dev/null @@ -1,76 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ - ~ Licensed under the Apache License, Version 2.0 (the "License"); - ~ you may not use this file except in compliance with the License. - ~ You may obtain a copy of the License at - ~ - ~ http://www.apache.org/licenses/LICENSE-2.0 - ~ - ~ Unless required by applicable law or agreed to in writing, software - ~ distributed under the License is distributed on an "AS IS" BASIS, - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - ~ See the License for the specific language governing permissions and - ~ limitations under the License. - --> - - -<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, $event.currentTarget)" - data-ng-mouseleave="!isViewOnly && onMouseOut(component)" - data-drag="!isViewOnly && component.isDraggable" - 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 small {{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" - uib-tooltip="{{component.type}}" tooltip-class="uib-custom-tooltip" - tooltip-placement="top" tooltip-popup-delay="700"> Type: - {{component.componentSubType}} - </div> - </div> - </div> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.less b/catalog-ui/src/app/directives/graphs-v2/palette/palette.less deleted file mode 100644 index 85657a43a5..0000000000 --- a/catalog-ui/src/app/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/src/app/directives/loader/loader-directive.html b/catalog-ui/src/app/directives/loader/loader-directive.html index 3842721c77..abac6702ba 100644 --- a/catalog-ui/src/app/directives/loader/loader-directive.html +++ b/catalog-ui/src/app/directives/loader/loader-directive.html @@ -13,9 +13,8 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> + <div data-ng-if="display" data-tests-id="loader"> - -<div data-ng-if="display" data-tests-id="tlv-loader"> <div class="tlv-loader-back " data-ng-class="{'tlv-loader-relative':relative}"></div> <div class="tlv-loader {{size}}"></div> </div> diff --git a/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts new file mode 100644 index 0000000000..30b8c248c9 --- /dev/null +++ b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts @@ -0,0 +1,209 @@ +/*- + * ============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========================================================= + */ + +'use strict'; +import {IAppMenu, Component, IAppConfigurtaion} from "app/models"; +import {UrlToBase64Service} from "app/services"; + +export interface IPrintGraphScreenScope extends ng.IScope { + entity:Component; +} + + +export class PrintGraphScreenDirective implements ng.IDirective { + + constructor(private $filter:ng.IFilterService, + private sdcMenu:IAppMenu, + private sdcConfig:IAppConfigurtaion, + private urlToBase64Service:UrlToBase64Service) { + } + + scope = { + entity: '=' + }; + restrict = 'A'; + link = (scope:IPrintGraphScreenScope, element:any) => { + + + element.bind('click', function () { + printScreen(); + }); + + + let printScreen = ():void => { + // + // let pdf :any = new jsPDF('landscape', 'mm', 'a4'); + // pdf.setProperties({ + // title: scope.entity.name, + // subject: 'Design Snapshot for ' + scope.entity.name, + // author: scope.entity.creatorFullName, + // keywords: scope.entity.tags.join(', '), + // creator: scope.entity.creatorFullName + // }); + // + // // A4 measures is 210 × 297 millimeters + // let pdfWidth :number = 297, + // pdfHeight :number = 210, + // leftColumnWidth :number = 80; + // + // //left bar background + // pdf.setDrawColor(0); + // pdf.setFillColor(248, 249, 251); + // pdf.rect(0, 0, leftColumnWidth, pdfHeight, 'F'); + // + // //entity name + // pdf.setFontSize(12); + // pdf.setTextColor(38, 61, 77); + // let splitTitle :any = pdf.splitTextToSize(scope.entity.name, 50); + // pdf.text(22, 15 - (splitTitle.length - 1) * 2, splitTitle); + // + // //line + // pdf.setLineWidth(0.2); + // pdf.setDrawColor(208, 209, 213); + // pdf.line(0, 28, leftColumnWidth, 28); + // + // + // pdf.setFontSize(10); + // let properties :any = getPdfProperties(); + // + // let topOffset :number = 39, lines; + // properties.forEach( (item:any) => { + // if (!item.value) { + // return; + // } + // if (item.title === 'Description:') { + // topOffset += 5; + // } + // + // pdf.setTextColor(38, 61, 77); + // pdf.text(5, topOffset, item.title); + // pdf.setTextColor(102, 102, 102); + // lines = pdf.splitTextToSize(item.value, 49); + // pdf.text(5 + item.offset, topOffset, lines[0]); + // if (lines.length > 1) { + // lines = pdf.splitTextToSize(item.value.substring(lines[0].length + 1), 65); + // if (lines.length > 8) { + // lines = lines.slice(0, 7); + // lines[lines.length - 1] += '...'; + // } + // pdf.text(5, topOffset + 4, lines); + // topOffset += 4 * (lines.length); + // } + // + // topOffset += 6; + // }); + // + // + // //another background in case the text was too long + // let declarationLineOffset :number = 176; + // pdf.setDrawColor(0); + // pdf.setFillColor(248, 249, 251); + // pdf.rect(0, declarationLineOffset, leftColumnWidth, pdfHeight - declarationLineOffset, 'F'); + // //line + // pdf.setLineWidth(0.2); + // pdf.setDrawColor(208, 209, 213); + // pdf.line(0, declarationLineOffset, leftColumnWidth, declarationLineOffset); + // + // //declaration + // pdf.setFontSize(10.5); + // pdf.setTextColor(38, 61, 77); + // pdf.text(5, 185, 'Declaration'); + // pdf.setFontSize(9); + // pdf.setTextColor(102, 102, 102); + // pdf.setFontType('bold'); + // pdf.text(5, 190, this.$filter('translate')('PDF_FILE_DECLARATION_BOLD')); + // pdf.setFontType('normal'); + // pdf.text(5, 194, pdf.splitTextToSize(this.$filter('translate')('PDF_FILE_DECLARATION'), 65)); + // + // //entity icon + // let self = this; + // let addEntityIcon:Function = () => { + // let iconPath:string = self.sdcConfig.imagesPath + '/styles/images/'; + // if (scope.entity.isService()) { + // iconPath += 'service-icons/' + scope.entity.icon + '.png'; + // } else { + // iconPath += 'resource-icons/' + scope.entity.icon + '.png'; + // } + // self.urlToBase64Service.downloadUrl(iconPath, (base64string:string):void => { + // if (base64string) { + // pdf.addImage(base64string, 'JPEG', 5, 7, 15, 15); + // } + // pdf.save(scope.entity.name + '.pdf'); + // }); + // }; + // + // //actual snapshop of canvas + // let diagramDiv :any = document.getElementById('myDiagram'); + // let diagram :go.Diagram = go.Diagram.fromDiv(diagramDiv), canvasImg = new Image(); + // diagram.startTransaction('print screen'); + // let canvasImgBase64:any = diagram.makeImageData({ + // //scale: 1, + // size: new go.Size(pdfHeight * 5, NaN), + // background: 'white', + // type: 'image/jpeg' + // }); + // diagramDiv.firstElementChild.toDataURL(); + // diagram.commitTransaction('print screen'); + // + // canvasImg.onload = () => { + // if (canvasImg.height > 0) { + // let canvasImgRatio:number = Math.min((pdfWidth - leftColumnWidth - 15) / canvasImg.width, pdfHeight / canvasImg.height); + // let canvasImgWidth:number = canvasImg.width * canvasImgRatio, + // canvasImgHeight:number = canvasImg.height * canvasImgRatio; + // let canvasImgOffset:number = (pdfHeight - canvasImgHeight) / 2; + // pdf.addImage(canvasImg, 'JPEG', leftColumnWidth, canvasImgOffset, canvasImgWidth, canvasImgHeight); + // + // addEntityIcon(); + // } + // }; + // + // if(canvasImg.src === 'data:,') { //empty canvas + // addEntityIcon(); + // } else { + // canvasImg.src = canvasImgBase64; + // } + }; + + + let getPdfProperties = ():Array<any> => { + // return [ + // {title: this.$filter('translate')('GENERAL_LABEL_TYPE'), value: scope.entity.getComponentSubType(), offset: 10}, + // {title: this.$filter('translate')('GENERAL_LABEL_VERSION'), value: scope.entity.version, offset: 15}, + // {title: this.$filter('translate')('GENERAL_LABEL_CATEGORY'), value: scope.entity.categories.length ? scope.entity.categories[0].name : '', offset: 16}, + // {title: this.$filter('translate')('GENERAL_LABEL_CREATION_DATE'), value: this.$filter('date')(scope.entity.creationDate, 'MM/dd/yyyy'), offset: 24}, + // {title: this.$filter('translate')('GENERAL_LABEL_AUTHOR'), value: scope.entity.creatorFullName, offset: 13}, + // {title: this.$filter('translate')('GENERAL_LABEL_CONTACT_ID'), value: scope.entity.contactId, offset: 41}, + // {title: this.$filter('translate')('GENERAL_LABEL_STATUS'), value: (<any>this.sdcMenu).LifeCycleStatuses[scope.entity.lifecycleState].text, offset: 13}, + // {title: this.$filter('translate')('GENERAL_LABEL_DESCRIPTION'), value: scope.entity.description, offset: 20}, + // {title: this.$filter('translate')('GENERAL_LABEL_TAGS'), value: scope.entity.tags.join(', '), offset: 10} + // ]; + return null; + }; + + + }; + + public static factory = ($filter:ng.IFilterService, sdcMenu:IAppMenu, sdcConfig:IAppConfigurtaion, urlToBase64Service:UrlToBase64Service)=> { + return new PrintGraphScreenDirective($filter, sdcMenu, sdcConfig, urlToBase64Service); + }; + +} + +PrintGraphScreenDirective.factory.$inject = ['$filter', 'sdcMenu', 'sdcConfig', 'Sdc.Services.UrlToBase64Service']; diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html index 25e1891790..792919172e 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html @@ -13,8 +13,8 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - - + + <div class="data-type-fields-structure"> <div class="open-close"> <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" data-ng-click="expandAndCollapse()"></div> @@ -30,71 +30,89 @@ </div> </div> <!--<div class="property-value">--> - <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure"> - <fields-structure value-obj-ref="(valueObjRef[property.name])" - type-name="property.type" - parent-form-obj="parentFormObj" - fields-prefix-name="fieldsPrefixName+property.name" - read-only="readOnly" - default-value="{{currentTypeDefaultValue[property.name]}}"> + <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure"> + <fields-structure value-obj-ref="(valueObjRef[property.name])" + type-name="property.type" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}"> - </fields-structure> - </div> - <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type"> - <div ng-switch-when="map"> - <type-map value-obj-ref="valueObjRef[property.name]" - schema-property="property.schema.property" - parent-form-obj="parentFormObj" - fields-prefix-name="fieldsPrefixName+property.name" - read-only="readOnly" - default-value="{{currentTypeDefaultValue[property.name]}}" - types="types"></type-map> - </div> - <div ng-switch-when="list"> - <type-list value-obj-ref="valueObjRef[property.name]" + </fields-structure> + </div> + <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type"> + <div ng-switch-when="map"> + <type-map value-obj-ref="valueObjRef[property.name]" schema-property="property.schema.property" parent-form-obj="parentFormObj" fields-prefix-name="fieldsPrefixName+property.name" read-only="readOnly" default-value="{{currentTypeDefaultValue[property.name]}}" - types="types"></type-list> - </div> - <div ng-switch-default class="primitive-value-field"> - <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}"> - <input class="i-sdc-form-input" - data-tests-id="{{fieldsPrefixName+property.name}}" - ng-if="!((property.simpleType||property.type) == 'boolean')" - data-ng-maxlength="100" - data-ng-readonly="readOnly" - maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" - data-ng-model="valueObjRef[property.name]" - type="text" - name="{{fieldsPrefixName+property.name}}" - data-ng-pattern="getValidationPattern((property.simpleType||property.type))" - data-ng-model-options="{ debounce: 200 }" - data-ng-change="inputOnValueChange(property)" - autofocus /> - <select class="i-sdc-form-select" - data-tests-id="{{fieldsPrefixName+property.name}}" - ng-if="(property.simpleType||property.type) == 'boolean'" - data-ng-disabled="readOnly" - name="{{fieldsPrefixName+property.name}}" - data-ng-change="onValueChange(property.name,'boolean')" - data-ng-model="valueObjRef[property.name]" - data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> - </select> + types="types"></type-map> + </div> + <div ng-switch-when="list"> + <type-list value-obj-ref="valueObjRef[property.name]" + schema-property="property.schema.property" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + types="types"></type-list> + </div> + <div ng-switch-default class="primitive-value-field"> + <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}"> + <!-- Has Constraints --> + + <!--<select class="i-sdc-form-select"--> + <!--ng-if="(property.constraints)"--> + <!--data-ng-disabled="readOnly"--> + <!--name="{{fieldsPrefixName+property.name}}"--> + <!--data-ng-change="onValueChange(property.name,'constraintsChange')"--> + <!--data-ng-model="valueObjRef[property.name]"--> + <!-->--> + <!--<!– Get the default value in case exist –>--> + <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>--> + <!--{{valueObjRef[property.name]}}--> + <!--</option> --> + <!--<!– add all constratint to Select list –>--> + <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >--> + <!--{{value}}--> + <!--</option> --> + <!--</select>--> + <!-- Input without constraints --> + <input class="i-sdc-form-input" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="!((property.simpleType||property.type) == 'boolean')" + data-ng-maxlength="100" + data-ng-readonly="readOnly" + maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" + data-ng-model="valueObjRef[property.name]" + type="text" + name="{{fieldsPrefixName+property.name}}" + data-ng-pattern="getValidationPattern((property.simpleType||property.type))" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="inputOnValueChange(property)" + autofocus + /> + <select class="i-sdc-form-select" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="(property.simpleType||property.type) == 'boolean'" + data-ng-disabled="readOnly" + name="{{fieldsPrefixName+property.name}}" + data-ng-change="onValueChange(property.name,'boolean')" + data-ng-model="valueObjRef[property.name]" + data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> + </select> - <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid"> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span> - </div> + <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid"> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span> </div> </div> </div> + </div> <!--</div>--> </div> </div> - - diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts index eed209d438..ff2344534a 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts @@ -42,6 +42,7 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope { expand:boolean; expanded:boolean; dataTypesService:DataTypesService; + constraints:string[]; expandAndCollapse():void; getValidationPattern(type:string):RegExp; @@ -53,11 +54,15 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope { export class DataTypeFieldsStructureDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, private PropertyNameValidationPattern:RegExp, private ValidationUtils:ValidationUtils) { } + constraints: string[]; + scope = { valueObjRef: '=', typeName: '=', @@ -67,6 +72,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { defaultValue: '@', // types: '=', expandByDefault: '=' + }; restrict = 'E'; @@ -93,6 +99,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { return defaultValue; }; + private initDataOnScope = (scope:any, $attr:any):void => { scope.dataTypesService = this.DataTypesService; scope.dataTypeProperties = this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName); @@ -149,7 +156,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { return !value || this.ValidationUtils.validateIntRange(value); }; - scope.onValueChange = (propertyName:string, type:string):void => { + scope.onValueChange = (propertyName:string, type:string,):void => { scope.valueObjRef[propertyName] = !angular.isUndefined(scope.valueObjRef[propertyName]) ? scope.valueObjRef[propertyName] : scope.currentTypeDefaultValue[propertyName]; if (scope.valueObjRef[propertyName] && type != 'string') { scope.valueObjRef[propertyName] = JSON.parse(scope.valueObjRef[propertyName]); @@ -157,7 +164,10 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { }; scope.inputOnValueChange = (property:any) => { - + if (property.constraints){ + // this.constraints = property.constraints[0].validValues; + } + let value = !scope.parentFormObj[scope.fieldsPrefixName + property.name].$error.pattern && ('integer' == property.type && scope.parentFormObj[scope.fieldsPrefixName + property.name].$setValidity('pattern', scope.validateIntRange(scope.valueObjRef[property.name])) || scope.onValueChange(property.name, (property.simpleType || property.type))); diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html index 2363f57d80..661514f799 100644 --- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html @@ -20,7 +20,7 @@ <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}"> <input class="i-sdc-form-input" data-tests-id="listNewItem{{fieldsPrefixName}}" - ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" data-ng-disabled="readOnly" data-ng-model="listNewItem.value" type="text" @@ -34,13 +34,32 @@ autofocus /> <select class="i-sdc-form-select" data-tests-id="listNewItem{{fieldsPrefixName}}" - ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'" data-ng-disabled="readOnly" name="listNewItem{{fieldsPrefixName}}" data-ng-model="listNewItem.value"> <option value="true">true</option> <option value="false">false</option> </select> + + + <select class="i-sdc-form-select" + data-tests-id="constraints" + ng-if="constraints" + data-ng-disabled="readOnly" + data-ng-model="listNewItem.value"> + <!-- Get the default value in case exist --> + <option value = "{{listNewItem.value}" name = "{{listNewItem.value}}" hidden selected> + {{listNewItem.value}} + </option> + <!-- add all constratint to Select list --> + <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}"> + {{value}} + </option> + + + </select> + <div class="input-error" data-ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid"> <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span> diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts index f2288cfd07..997e28dabc 100644 --- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts @@ -37,6 +37,8 @@ export interface ITypeListScope extends ng.IScope { listDefaultValue:any; listNewItem:any; maxLength:number; + + constraints:string[]; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; @@ -49,7 +51,7 @@ export class TypeListDirective implements ng.IDirective { constructor(private DataTypesService:DataTypesService, private PropertyNameValidationPattern:RegExp, - private ValidationUtils:ValidationUtils) { + private ValidationUtils:ValidationUtils) { } scope = { @@ -59,7 +61,8 @@ export class TypeListDirective implements ng.IDirective { fieldsPrefixName: '=',//prefix for form fields names readOnly: '=',//is form read only defaultValue: '@',//this list default value - maxLength: '=' + maxLength: '=', + constraints: '=' }; restrict = 'E'; diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html index aa03cecb17..55a414e729 100644 --- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html @@ -41,8 +41,9 @@ </div> <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}"> <label class="i-sdc-form-label required">Value</label> + <input class="i-sdc-form-input" - ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" data-ng-readonly="readOnly" data-ng-model="valueObjRef[mapKeys[$index]]" type="text" @@ -57,7 +58,7 @@ autofocus /> <select class="i-sdc-form-select" data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}" - ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'" data-ng-disabled="readOnly" name="mapValue{{fieldsPrefixName}}{{$index}}" data-ng-model="valueObjRef[mapKeys[$index]]" @@ -65,6 +66,24 @@ <option value="true">true</option> <option value="false">false</option> </select> + + + <select class="i-sdc-form-select" + data-tests-id="constraints" + ng-if="constraints" + data-ng-disabled="readOnly" + data-ng-model="valueObjRef[mapKeys[$index]]"> + + <!-- Get the saved value for the relevant key --> + <option ng-if = "valueObjRef[mapKeys[$index]]" value = "{{valueObjRef[mapKeys[$index]]}}" name = "{{valueObjRef[mapKeys[$index]]}}" hidden selected> + {{valueObjRef[mapKeys[$index]]}} + </option> + <!-- add all constratint to Select list --> + <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}"> + {{value}} + </option> + </select> + <div class="input-error" data-ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid"> <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value' }"></span> <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts index 5718cdd9b5..080c13b87f 100644 --- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts @@ -39,6 +39,7 @@ export interface ITypeMapScope extends ng.IScope { readOnly:boolean; mapDefaultValue:any; maxLength:number; + constraints:string[]; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; @@ -65,7 +66,9 @@ export class TypeMapDirective implements ng.IDirective { fieldsPrefixName: '=',//prefix for form fields names readOnly: '=',//is form read only defaultValue: '@',//this map default value - maxLength: '=' + maxLength: '=', + constraints: '=' + }; restrict = 'E'; diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html index fbcbb396f4..f6bd1ca87c 100644 --- a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html @@ -90,6 +90,7 @@ data-ng-model="valueObjRef[property.name]" data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> </select> + </div> </div> diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts index 1367906e21..0200e3d510 100644 --- a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts +++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts @@ -21,6 +21,7 @@ 'use strict'; import {User, IUser, IAppConfigurtaion, IUserProperties} from "app/models"; import { UserService } from "../../ng2/services/user.service"; +import { AuthenticationService } from "app/ng2/services/authentication.service"; export interface IUserHeaderDetailsScope extends ng.IScope { iconUrl:string; user:IUser; @@ -29,7 +30,7 @@ export interface IUserHeaderDetailsScope extends ng.IScope { export class UserHeaderDetailsDirective implements ng.IDirective { - constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService) { + constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService, private authService: AuthenticationService) { } scope = { @@ -46,7 +47,7 @@ export class UserHeaderDetailsDirective implements ng.IDirective { scope.initUser = ():void => { let defaultUserId:string; - let userInfo:IUserProperties = this.userService.getLoggedinUser(); + let userInfo:IUserProperties = this.authService.getLoggedinUser(); if (!userInfo) { defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => { @@ -59,10 +60,10 @@ export class UserHeaderDetailsDirective implements ng.IDirective { scope.initUser(); }; - public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService)=> { - return new UserHeaderDetailsDirective($http, sdcConfig, userService); + public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService, authService:AuthenticationService)=> { + return new UserHeaderDetailsDirective($http, sdcConfig, userService, authService); }; } -UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2']; +UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2', 'AuthenticationServiceNg2']; diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts index 878de11e91..58743081fb 100644 --- a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts +++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts @@ -70,7 +70,7 @@ export class ExpandCollapseDirective implements ng.IDirective { $elem.addClass('expanded'); scope.collapsed = false; - let element = $(scope.expandedSelector)[0]; + let element = <HTMLElement>$(scope.expandedSelector)[0]; let prevWidth = element.style.height; element.style.height = 'auto'; let endWidth = getComputedStyle(element).height; @@ -92,7 +92,7 @@ export class ExpandCollapseDirective implements ng.IDirective { $elem.removeClass('expanded'); scope.collapsed = true; - let element = $(scope.expandedSelector)[0]; + let element = <HTMLElement>$(scope.expandedSelector)[0]; element.style.height = getComputedStyle(element).height; element.style.transition = 'height .5s ease-in-out'; element.offsetHeight; // force repaint diff --git a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts index 098134aaae..0c84af939b 100644 --- a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts +++ b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts @@ -43,7 +43,7 @@ export class SmartTooltipDirective implements ng.IDirective { } $elem.bind('mouseenter', () => { - if ($elem[0].offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) { + if ((<HTMLElement>$elem[0]).offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) { $attrs.$set('tooltips', 'tooltips'); if ($attrs['sdcSmartTooltip'] && $attrs['sdcSmartTooltip'].length > 0) { $elem.attr('tooltip-content', $attrs['sdcSmartTooltip']); |