aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/graphs-v2/composition-graph
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-03-04 14:53:33 +0200
committerMichael Lando <ml636r@att.com>2018-03-07 13:19:05 +0000
commita5445100050e49e83f73424198d73cd72d672a4d (patch)
treecacf4df817df31be23e4e790d1dda857bdae061e /catalog-ui/src/app/directives/graphs-v2/composition-graph
parent51157f92c21976cba4914c378aaa3cba49826931 (diff)
Sync Integ to Master
Change-Id: I71e3acc26fa612127756ac04073a522b9cc6cd74 Issue-ID: SDC-977 Signed-off-by: Gitelman, Tal (tg851x) <tg851x@intl.att.com>
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2/composition-graph')
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts225
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html33
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less24
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts1
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts41
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts28
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts80
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts55
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts3
9 files changed, 403 insertions, 87 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
index cdb163bda1..2144ecfbfa 100644
--- 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
@@ -18,6 +18,7 @@
* ============LICENSE_END=========================================================
*/
+import * as _ from "lodash";
import {
Match,
LinkMenu,
@@ -28,13 +29,15 @@ import {
Relationship,
PropertyModel,
Component,
+ Service,
ConnectRelationModel,
CompositionCiNodeBase,
CompositionCiNodeVl,
ModalModel,
ButtonModel,
NodesFactory/*,
- AssetPopoverObj*/
+ AssetPopoverObj*/,
+ Point
} from "app/models";
import {ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors} from "app/utils";
import {EventListenerService, LoaderService} from "app/services";
@@ -60,13 +63,32 @@ import {ConnectionPropertiesViewComponent} from "../../../ng2/pages/connection-w
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 {ComponentType} from "app/utils";
+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 { ZoneConfig, ZoneInstanceConfig, ZoneInstanceMode } from "app/models/graph/zones/zone-child";
+import { PoliciesService } from "app/ng2/services/policies.service";
+import { PaletteAnimationComponent } from "app/ng2/components/ui/palette-animation/palette-animation.component";
+import { CompositionGraphZoneUtils } from "./utils/composition-graph-zone-utils";
+import {LeftPaletteMetadataTypes} from "../../../models/components/displayComponent";
-interface ICompositionGraphScope extends ng.IScope {
+
+export interface ICompositionGraphScope extends ng.IScope {
component:Component;
isLoading: boolean;
isViewOnly: boolean;
withSidebar: boolean;
+
+ //zones
+ newZoneInstance;
+ zoneTagMode:string;
+ activeZoneInstance:ZoneInstanceConfig;
+ zones:any;
+ zoneInstanceModeChanged(newMode:ZoneInstanceMode, instance:ZoneInstanceConfig, zoneId:string);
+ clickOutsideZoneInstance():void;
+
// Link menu - create link menu
relationMenuDirectiveObj:ConnectRelationModel;
isLinkMenuOpen:boolean;
@@ -76,6 +98,7 @@ interface ICompositionGraphScope extends ng.IScope {
//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;
@@ -95,7 +118,12 @@ interface ICompositionGraphScope extends ng.IScope {
highlightSearchMatches(searchTerm: string): void;
canvasMenuProps:any;
-
+
+ createOrUpdateServicePath(data: any):void;
+ deletePathsOnCy():void;
+ drawPathOnCy(data: ForwardingPath):void;
+ selectedPathId: string;
+
/*//asset popover menu
assetPopoverObj:AssetPopoverObj;
assetPopoverOpen:boolean;
@@ -124,10 +152,13 @@ export class CompositionGraph implements ng.IDirective {
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 ComponentInstanceServiceNg2: ComponentInstanceServiceNg2,
+ private servicePathGraphUtils: ServicePathGraphUtils,
+ private policiesService:PoliciesService) {
}
@@ -140,7 +171,6 @@ export class CompositionGraph implements ng.IDirective {
};
link = (scope:ICompositionGraphScope, el:JQuery) => {
-
this.loadGraph(scope, el);
if(scope.component.componentInstances && scope.component.componentInstancesRelations) {
@@ -164,15 +194,16 @@ export class CompositionGraph implements ng.IDirective {
private loadGraphData = (scope:ICompositionGraphScope) => {
this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly);
- this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations);
+ this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component));
this.commonGraphUtils.initUcpeChildren(this._cy);
+ this.compositionGraphZoneUtils.initPolicyInstances(scope.zones.policy, scope.component.policies);
}
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);
@@ -210,6 +241,12 @@ export class CompositionGraph implements ng.IDirective {
private registerCustomEvents(scope:ICompositionGraphScope, el:JQuery) {
this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent:LeftPaletteComponent) => {
+ if(scope.isOnDrag ||
+ leftPaletteComponent.categoryType === LeftPaletteMetadataTypes.Group ||
+ leftPaletteComponent.categoryType === LeftPaletteMetadataTypes.Policy) {
+ return;
+ }
+
this.$log.info(`composition-graph::registerEventServiceEvents:: palette hover on component: ${leftPaletteComponent.uniqueId}`);
let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes());
@@ -240,6 +277,33 @@ export class CompositionGraph implements ng.IDirective {
});
});
+ this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_COMPONENT_INSTANCE_ZONE_START, (component:Component, paletteComponent:LeftPaletteComponent, startPosition:Point) => {
+ this.LoaderService.showLoader('composition-graph');
+
+ let zoneType:string = LeftPaletteMetadataTypes[paletteComponent.categoryType].toLowerCase();
+ scope.zones[zoneType].showZone = true;
+ if(scope.minifyZone) scope.minifyZone = false;
+
+ this.policiesService.createPolicyInstance(component.componentType, component.uniqueId, paletteComponent.type).subscribe((newInstance)=>{
+
+ this.LoaderService.hideLoader('composition-graph');
+ scope.newZoneInstance = newInstance;
+ this.compositionGraphZoneUtils.showAnimationToZone(startPosition, zoneType);
+ }, (error) => {
+ this.LoaderService.hideLoader('composition-graph');
+ });
+ });
+
+ this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_FINISH_ANIMATION_ZONE, () => {
+ if(scope.newZoneInstance){
+ this.compositionGraphZoneUtils.addInstanceToZone(scope.zones['policy'], scope.newZoneInstance);
+ }
+ })
+
+ this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_SIZE_CHANGE, () => {
+ scope.minifyZone = true;
+ })
+
this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => {
this._cy.emit('hidehandles');
this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
@@ -362,17 +426,11 @@ export class CompositionGraph implements ng.IDirective {
.updateInstanceCapabilityProperties(
scope.component,
this.ConnectionWizardServiceNg2.selectedMatch.toNode,
- this.ConnectionWizardServiceNg2.selectedMatch.capability.type,
- this.ConnectionWizardServiceNg2.selectedMatch.capability.name,
+ this.ConnectionWizardServiceNg2.selectedMatch.capability,
capabilityPropertiesBE
)
.subscribe((response) => {
console.log("Update resource instance capability properties response: ", response);
- response.forEach((resProperty) => {
- this.ConnectionWizardServiceNg2.selectedMatch.capabilityProperties.find((property) => {
- return property.uniqueId == resProperty.uniqueId;
- }).value = resProperty.value;
- });
this.ConnectionWizardServiceNg2.changedCapabilityProperties = [];
resolve(capabilityPropertiesBE);
});
@@ -400,6 +458,16 @@ export class CompositionGraph implements ng.IDirective {
});
};
+ 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();
@@ -408,41 +476,9 @@ export class CompositionGraph implements ng.IDirective {
const targetNode:CompositionCiNodeBase = link.target().data();
const relationship:Relationship = linkData.relation.relationships[0];
- let capability:Capability;
- _.some(_.values(targetNode.componentInstance.capabilities), (capGroup) => {
- //item.uniqueId + item.ownerId + item.name === (selectedReqOrCapModel.uniqueId + selectedReqOrCapModel.ownerId + selectedReqOrCapModel.name)
- capability = _.find<Capability>(_.values<Capability>(capGroup), (cap:Capability) => (
- cap.uniqueId === relationship.relation.capabilityUid &&
- cap.ownerId === relationship.relation.capabilityOwnerId &&
- cap.name === relationship.relation.capability
- ));
- return capability;
- });
- let requirement:Requirement;
- _.some(_.values(sourceNode.componentInstance.requirements), (reqGroup) => {
- requirement = _.find<Requirement>(_.values<Requirement>(reqGroup), (req:Requirement) => (
- req.uniqueId === relationship.relation.requirementUid &&
- req.ownerId === relationship.relation.requirementOwnerId &&
- req.name === relationship.relation.requirement
- ));
- return requirement;
- });
-
- new Promise<{capability:Capability, requirement:Requirement}>((resolve, reject) => {
- if (capability && requirement) {
- resolve({capability, requirement});
- }
- else {
- scope.component.fetchRelation(relationship.relation.id).then((fetchedRelation) => {
- resolve({
- capability: fetchedRelation.relationships[0].capability,
- requirement: fetchedRelation.relationships[0].requirement
- });
- }, reject);
- }
- }).then((objReqCap) => {
- capability = objReqCap.capability;
- requirement = objReqCap.requirement;
+ 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, []);
@@ -459,11 +495,19 @@ export class CompositionGraph implements ng.IDirective {
this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
modalInstance.instance.open();
- this.ComponentInstanceServiceNg2.getInstanceCapabilityProperties(scope.component, linkData.target, capability.type, capability.name)
- .subscribe((response: Array<PropertyModel>) => {
- this.ConnectionWizardServiceNg2.selectedMatch.capabilityProperties = response;
- this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
- }, (error) => {});
+ 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) => {});
};
@@ -504,7 +548,7 @@ export class CompositionGraph implements ng.IDirective {
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;
@@ -523,6 +567,7 @@ export class CompositionGraph implements ng.IDirective {
}
});
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();
@@ -592,7 +637,7 @@ export class CompositionGraph implements ng.IDirective {
this._cy.on('tapend', (event:Cy.EventObject) => {
-
+ scope.isOnDrag = false;
if (event.cyTarget === this._cy) { //On Background clicked
if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged
this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
@@ -603,6 +648,9 @@ export class CompositionGraph implements ng.IDirective {
else if (event.cyTarget.isEdge()) { //On Edge clicked
if (scope.isViewOnly) return;
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);
}
@@ -640,13 +688,6 @@ export class CompositionGraph implements ng.IDirective {
});
}
- /*
- private showNodePopoverMenu = (scope:ICompositionGraphScope, node:Cy.CollectionNodes) => {
-
- scope.assetPopoverObj = this.NodesGraphUtils.createAssetPopover(this._cy, node, scope.isViewOnly);
- scope.assetPopoverOpen = true;
-
- };*/
private openModifyLinkMenu = (scope:ICompositionGraphScope, linkMenuObject:LinkMenu, timeOutInMilliseconds?:number) => {
scope.hideRelationMenu();
this.$timeout(() => {
@@ -732,6 +773,49 @@ export class CompositionGraph implements ng.IDirective {
}
}
+
+ private initZones = (scope:ICompositionGraphScope):void => {
+ scope.zones = this.compositionGraphZoneUtils.createCompositionZones();
+
+ scope.zoneInstanceModeChanged = (newMode:ZoneInstanceMode, instance:ZoneInstanceConfig, zoneId:string):void => {
+ if(scope.zoneTagMode) { //we're in tag mode.
+ if(instance == scope.activeZoneInstance && newMode == ZoneInstanceMode.TAG){ //we want to toggle tag mode off.
+ scope.unsetActiveZoneInstance();
+ }
+ } else {
+ scope.setZoneInstanceMode(newMode, instance, zoneId);
+ }
+ };
+
+ scope.setZoneInstanceMode = (newMode:ZoneInstanceMode, instance:ZoneInstanceConfig, zoneId:string):void => {
+ instance.mode = newMode;
+ switch(newMode){
+ case ZoneInstanceMode.TAG: {
+ scope.zoneTagMode = zoneId + "-tagging";
+ }
+ case ZoneInstanceMode.SELECTED: { //case TAG flows into here as well
+ scope.activeZoneInstance = instance;
+ break;
+ }
+ }
+ };
+
+ scope.unsetActiveZoneInstance = ():void => {
+ scope.activeZoneInstance.mode = ZoneInstanceMode.NONE;
+ scope.activeZoneInstance = null;
+ scope.zoneTagMode = null;
+ };
+
+ scope.clickOutsideZoneInstance = ():void => {
+ if(!scope.zoneTagMode)
+ scope.unsetActiveZoneInstance();
+ };
+
+ };
+
+
+
+
public static factory = ($q,
$log,
$timeout,
@@ -746,10 +830,13 @@ export class CompositionGraph implements ng.IDirective {
CommonGraphUtils,
MatchCapabilitiesRequirementsUtils,
CompositionGraphPaletteUtils,
+ CompositionGraphZoneUtils,
ComponentServiceNg2,
ModalService,
ConnectionWizardService,
- ComponentInstanceServiceNg2) => {
+ ComponentInstanceServiceNg2,
+ ServicePathGraphUtils,
+ PoliciesService) => {
return new CompositionGraph(
$q,
$log,
@@ -765,10 +852,13 @@ export class CompositionGraph implements ng.IDirective {
CommonGraphUtils,
MatchCapabilitiesRequirementsUtils,
CompositionGraphPaletteUtils,
+ CompositionGraphZoneUtils,
ComponentServiceNg2,
ModalService,
ConnectionWizardService,
- ComponentInstanceServiceNg2);
+ ComponentInstanceServiceNg2,
+ ServicePathGraphUtils,
+ PoliciesService);
}
}
@@ -787,8 +877,11 @@ CompositionGraph.factory.$inject = [
'CommonGraphUtils',
'MatchCapabilitiesRequirementsUtils',
'CompositionGraphPaletteUtils',
+ 'CompositionGraphZoneUtils',
'ComponentServiceNg2',
'ModalServiceNg2',
'ConnectionWizardServiceNg2',
- 'ComponentInstanceServiceNg2'
+ 'ComponentInstanceServiceNg2',
+ 'ServicePathGraphUtils',
+ 'PoliciesServiceNg2'
];
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
index bbf2d6bbb2..487e4cb65a 100644
--- 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
@@ -1,5 +1,5 @@
<loader display="isLoading" loader-type="composition-graph"></loader>
-<div class="sdc-composition-graph-wrapper" ng-class="{'view-only':isViewOnly}"
+<div class="sdc-composition-graph-wrapper {{zoneTagMode}}" ng-class="{'view-only':isViewOnly}"
data-drop="true"
data-jqyoui-options="{accept: verifyDrop}"
data-jqyoui-droppable="{onDrop:'dropCallback', beforeDrop: 'beforeDropCallback'}">
@@ -11,10 +11,37 @@
<menu-list-ng2 [props]="canvasMenuProps"></menu-list-ng2>
<div class="w-sdc-search-menu" data-ng-class="{'with-sidebar': withSidebar}">
- <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>
+
+ <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">
+ </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="zoomAll()"></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="zoneConfig in zones" [title]="zoneConfig.title" [class]="zoneConfig.type" [count]="zoneConfig.instances.length" [show-zone] = "zoneConfig.showZone" [minify-zone] = "minifyZone">
+ <ng2-zone-instance
+ data-ng-repeat="instance in zoneConfig.instances" clicked-outside="{onClickedOutside: 'clickOutsideZoneInstance()', clickedOutsideEnable: 'activeZoneInstance == instance'}"
+ [config]="instance" [default-icon-text]="zoneConfig.defaultIconText" [is-active]="activeZoneInstance == instance" [active-instance-mode]="activeZoneInstance && activeZoneInstance.mode"
+ (mode-change)="zoneInstanceModeChanged($event.newMode, $event.instance, zoneConfig.type)">
+ </ng2-zone-instance>
+ </ng2-zone-container>
+</div>
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
index 56c8b5529d..5a6a104670 100644
--- 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
@@ -11,4 +11,28 @@ composition-graph {
.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/adding_group.svg"), pointer;
+ }
+ .policy-tagging {
+ cursor: url("/assets/styles/images/canvas-tagging-icons/adding_policy.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
index da7d48e6ae..73e03e954d 100644
--- 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
@@ -18,6 +18,7 @@
* ============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";
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
index 89c5e14602..705367c5f7 100644
--- 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
@@ -21,6 +21,7 @@
/**
* Created by obarda on 6/28/2016.
*/
+import * as _ from "lodash";
import {GraphUIObjects} from "app/utils";
import {LoaderService} from "app/services";
import {
@@ -39,6 +40,7 @@ import {
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 {
@@ -86,7 +88,7 @@ export class CompositionGraphLinkUtils {
let onSuccess:(response:RelationshipModel) => void = (relation:RelationshipModel) => {
link.setRelation(relation);
- this.commonGraphUtils.insertLinkToGraph(cy, link);
+ this.commonGraphUtils.insertLinkToGraph(cy, link, component.getRelationRequirementCapability.bind(component));
};
link.updateLinkDirection();
@@ -212,6 +214,28 @@ export class CompositionGraphLinkUtils {
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.
@@ -224,18 +248,13 @@ export class CompositionGraphLinkUtils {
if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) {
cy.$(':selected').unselect();
} else {
-
- let vl:Cy.CollectionNodes = event.cyTarget[0].target('.vl-node');
- let connectedEdges:Cy.CollectionEdges = vl.connectedEdges();
- if (vl.length && connectedEdges.length > 1) {
-
- setTimeout(() => {
- vl.select();
- connectedEdges.select();
- }, 0);
+ if (event.cyTarget[0].data().type === CompositionCiServicePathLink.LINK_TYPE) {
+ this.handlePathLink(cy, event);
+ }
+ else {
+ this.handleVLLink(event);
}
}
-
}
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
index 449d551cc0..fb1e6650bd 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
@@ -18,11 +18,15 @@
* ============LICENSE_END=========================================================
*/
-import {Component, NodesFactory, ComponentInstance, CompositionCiNodeVl,IAppMenu,AssetPopoverObj} from "app/models";
+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.
*/
@@ -31,9 +35,10 @@ export class CompositionGraphNodesUtils {
private GeneralGraphUtils:CompositionGraphGeneralUtils,
private commonGraphUtils:CommonGraphUtils,
private eventListenerService:EventListenerService,
- private loaderService:LoaderService /*,
- private sdcMenu: IAppMenu,
- private ModalsHandler: ModalsHandler*/) {
+ private loaderService:LoaderService,
+ private serviceService:ServiceServiceNg2,
+ /*private sdcMenu: IAppMenu,
+ private ModalsHandler: ModalsHandler*/) {
}
@@ -88,9 +93,20 @@ export class CompositionGraphNodesUtils {
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;
+ });
+
//update UI
cy.remove(nodeToDelete);
-
};
let onFailed:(response:any) => void = (response:any) => {
@@ -297,5 +313,5 @@ export class CompositionGraphNodesUtils {
}
- CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService' /*, 'sdcMenu', 'ModalsHandler'*/]
+ 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-service-path-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts
new file mode 100644
index 0000000000..ef047d7dd3
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts
@@ -0,0 +1,80 @@
+/*-
+ * ============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 = data.forwardingPathLink.fromNode;
+ data.target = data.forwardingPathLink.toNode;
+ 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
new file mode 100644
index 0000000000..28f2dc85d2
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts
@@ -0,0 +1,55 @@
+import { PolicyInstance } from "app/models/graph/zones/policy-instance";
+import { ZoneConfig, ZoneInstanceConfig } from "app/models/graph/zones/zone-child";
+import { DynamicComponentService } from "app/ng2/services/dynamic-component.service";
+import { PaletteAnimationComponent } from "app/ng2/components/ui/palette-animation/palette-animation.component";
+import { Point } from "../../../../models";
+
+export class CompositionGraphZoneUtils {
+
+ constructor(private dynamicComponentService: DynamicComponentService) {}
+
+ public createCompositionZones(){
+ let zones = {
+ 'policy': new ZoneConfig('Policies', 'P', 'policy', false),
+ 'group': new ZoneConfig('Groups', 'G', 'group', false)
+ };
+ return zones;
+ }
+
+ public initPolicyInstances(policyZone:ZoneConfig, policies:Array<PolicyInstance>) {
+ if(policies && policies.length){
+ policyZone.showZone = true;
+ }
+ _.forEach(policies, (policy:PolicyInstance) => {
+ policyZone.instances.push(new ZoneInstanceConfig(policy));
+ });
+ }
+
+ public addInstanceToZone(zone:ZoneConfig, instance:PolicyInstance){
+ zone.instances.push(new ZoneInstanceConfig(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 showAnimationToZone = (startPoint:Point, zoneType:string) => {
+
+ let paletteToZoneAnimation = this.dynamicComponentService.createDynamicComponent(PaletteAnimationComponent);
+ paletteToZoneAnimation.instance.from = startPoint;
+ paletteToZoneAnimation.instance.to = this.findZoneCoordinates(zoneType);
+ paletteToZoneAnimation.instance.iconName = zoneType;
+ paletteToZoneAnimation.instance.runAnimation();
+ }
+
+
+}
+
+CompositionGraphZoneUtils.$inject = [
+ 'DynamicComponentService'
+]; \ 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
index 6a02381902..3a05ce901f 100644
--- 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
@@ -18,6 +18,7 @@
* ============LICENSE_END=========================================================
*/
+import * as _ from "lodash";
import {
Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match,
CompositionCiNodeBase, Component, Capability
@@ -142,7 +143,7 @@ export class MatchCapabilitiesRequirementsUtils {
let requirementArray:Array<Requirement> = [];
_.forEach(_.flatten(_.values(requirements)), (requirement:Requirement)=> {
- if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) {
+ if (requirement.name !== 'dependency' && requirement.parentName !== 'dependency' && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) {
requirementArray.push(requirement);
}
});