aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/graphs-v2
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2')
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts44
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts17
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts230
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html12
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts14
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts47
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts238
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts6
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts45
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/palette/palette.html2
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html48
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts16
12 files changed, 417 insertions, 302 deletions
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
index f88db47524..2a7fd74e53 100644
--- 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
@@ -164,12 +164,54 @@ export class CommonGraphUtils {
if (!this.isRelationCertified(cy.nodes(), link.source, link.target)) {
link.classes = 'not-certified-link';
}
- cy.add({
+ let linkElement = cy.add({
group: 'edges',
data: link,
classes: link.classes
});
+ this.initLinkTooltip(linkElement, link);
+ };
+
+ /**
+ * This function will init qtip tooltip on the link
+ * @params linkElement - the link we want the tooltip to apply on,
+ * link - the link obj
+ */
+ public initLinkTooltip(linkElement:Cy.CollectionElements, link:CompositionCiLinkBase) {
+
+ let opts = {
+ content: function () {
+ return '<div class="line">' +
+ '<span class="req-cap-label">R: </span>' +
+ '<span>'+ link.relation.relationships[0].relation.requirement + '</span>' +
+ '</div>' +
+ '<div class="line">' +
+ '<div class="sprite-new link-tooltip-arrow"></div>' +
+ '<span class="req-cap-label">C: </span>' +
+ '<span>' + link.relation.relationships[0].relation.capability + '</span>' +
+ '</div>';
+ },
+ position: {
+ my: 'top center',
+ at: 'bottom center',
+ adjust: {x:0, y:0}
+ },
+ 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
+ };
+ linkElement.qtip(opts);
};
/**
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
index 7e21f8293b..36c75c55fc 100644
--- 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
@@ -225,6 +225,23 @@ export class ComponentInstanceNodesStyle {
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,
+ 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+ 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+ 'text-valign': 'bottom',
+ 'text-halign': 'center',
+ 'background-opacity': 0,
+ 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
+ 'overlay-opacity': 0
+ }
}
]
}
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 8b3a59ec1f..cdb163bda1 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
@@ -19,14 +19,20 @@
*/
import {
- MatchBase,
+ Match,
LinkMenu,
ComponentInstance,
LeftPaletteComponent,
+ Capability,
+ Requirement,
+ Relationship,
+ PropertyModel,
Component,
- RelationMenuDirectiveObj,
+ ConnectRelationModel,
CompositionCiNodeBase,
CompositionCiNodeVl,
+ ModalModel,
+ ButtonModel,
NodesFactory/*,
AssetPopoverObj*/
} from "app/models";
@@ -42,6 +48,18 @@ import {ComponentInstanceNodesStyle} from "../common/style/component-instances-n
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";
interface ICompositionGraphScope extends ng.IScope {
@@ -50,9 +68,10 @@ interface ICompositionGraphScope extends ng.IScope {
isViewOnly: boolean;
withSidebar: boolean;
// Link menu - create link menu
- relationMenuDirectiveObj:RelationMenuDirectiveObj;
+ relationMenuDirectiveObj:ConnectRelationModel;
isLinkMenuOpen:boolean;
- createLinkFromMenu:(chosenMatch:MatchBase, vl:Component)=>void;
+ createLinkFromMenu:(chosenMatch:Match, vl:Component)=>void;
+ saveChangedCapabilityProperties:()=>Promise<PropertyBEModel[]>;
//modify link menu - for now only delete menu
relationMenuTimeout:ng.IPromise<any>;
@@ -64,6 +83,7 @@ interface ICompositionGraphScope extends ng.IScope {
verifyDrop(event:JQueryEventObject, ui:any):void;
//Links menus
+ viewRelation(link:Cy.CollectionEdges):void;
deleteRelation(link:Cy.CollectionEdges):void;
hideRelationMenu();
@@ -73,6 +93,8 @@ interface ICompositionGraphScope extends ng.IScope {
zoomAll(nodes?:Cy.CollectionNodes): void;
getAutoCompleteValues(searchTerm: string):void;
highlightSearchMatches(searchTerm: string): void;
+
+ canvasMenuProps:any;
/*//asset popover menu
assetPopoverObj:AssetPopoverObj;
@@ -102,7 +124,10 @@ export class CompositionGraph implements ng.IDirective {
private commonGraphUtils:CommonGraphUtils,
private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils,
private CompositionGraphPaletteUtils:CompositionGraphPaletteUtils,
- private ComponentServiceNg2: ComponentServiceNg2) {
+ private ComponentServiceNg2: ComponentServiceNg2,
+ private ModalServiceNg2: ModalService,
+ private ConnectionWizardServiceNg2: ConnectionWizardService,
+ private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2) {
}
@@ -131,6 +156,8 @@ export class CompositionGraph implements ng.IDirective {
_.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');
});
};
@@ -190,7 +217,7 @@ export class CompositionGraph implements ng.IDirective {
if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) {
let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId);
- let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(cacheComponent, nodesData, nodesLinks);
+ let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(cacheComponent, nodesData, nodesLinks);
this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
@@ -207,7 +234,7 @@ export class CompositionGraph implements ng.IDirective {
component.capabilities = response.capabilities;
component.requirements = response.requirements;
this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component);
- let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(component, nodesData, nodesLinks);
+ let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(component, nodesData, nodesLinks);
this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy)
});
@@ -321,18 +348,124 @@ export class CompositionGraph implements ng.IDirective {
scope.zoomAll(matchingNodes);
};
- scope.createLinkFromMenu = (chosenMatch:MatchBase):void => {
+ 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.type,
+ this.ConnectionWizardServiceNg2.selectedMatch.capability.name,
+ 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);
+ });
+ } else {
+ // no capability properties to update, immediately resolve promise
+ resolve(capabilityPropertiesBE);
+ }
+ });
+ };
+
+ scope.createLinkFromMenu = ():void => {
scope.isLinkMenuOpen = false;
- this.CompositionGraphLinkUtils.createLinkFromMenu(this._cy, chosenMatch, scope.component);
+
+ scope.saveChangedCapabilityProperties().then(() => {
+ //create link:
+ this.CompositionGraphLinkUtils
+ .createLinkFromMenu(this._cy, this.ConnectionWizardServiceNg2.selectedMatch, scope.component);
+ });
};
scope.hideRelationMenu = () => {
this.commonGraphUtils.safeApply(scope, () => {
- scope.linkMenuObject = null;
+ delete scope.canvasMenuProps;
this.$timeout.cancel(scope.relationMenuTimeout);
});
};
+ 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];
+
+ 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;
+
+ 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();
+
+ 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) => {});
+ }, (error) => {});
+ };
scope.deleteRelation = (link:Cy.CollectionEdges) => {
scope.hideRelationMenu();
@@ -367,9 +500,26 @@ export class CompositionGraph implements ng.IDirective {
this._cy.on('addedgemouseup', (event, data) => {
scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target);
if (scope.relationMenuDirectiveObj != null) {
- scope.$apply(() => {
- scope.isLinkMenuOpen = true;
- });
+ this.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.ModalServiceNg2.createMultiStepsWizard('Connect', )Connect
+ // scope.$apply(() => {
+ // scope.isLinkMenuOpen = true;
+ // });
}
});
this._cy.on('tapstart', 'node', (event:Cy.EventObject) => {
@@ -424,7 +574,7 @@ export class CompositionGraph implements ng.IDirective {
let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy);
let linkableNodes = this.commonGraphUtils.getLinkableNodes(this._cy, payload.node);
- let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(payload.node.data().componentInstance, linkableNodes, nodesLinks);
+ 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());
@@ -498,14 +648,39 @@ export class CompositionGraph implements ng.IDirective {
};*/
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);
+ }
+ });
+ }
+ scope.canvasMenuProps.items.push({
+ contents: 'Delete',
+ styleClass: 'w-sdc-canvas-menu-item-delete',
+ action: () => {
+ scope.deleteRelation(<Cy.CollectionEdges>linkMenuObject.link);
+ }
+ });
- this.commonGraphUtils.safeApply(scope, () => {
- scope.linkMenuObject = linkMenuObject;
+ scope.relationMenuTimeout = this.$timeout(() => {
+ scope.hideRelationMenu();
+ }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
});
-
- scope.relationMenuTimeout = this.$timeout(() => {
- scope.hideRelationMenu();
- }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
};
private initGraphNodes(componentInstances:ComponentInstance[], isViewOnly:boolean) {
@@ -571,7 +746,10 @@ export class CompositionGraph implements ng.IDirective {
CommonGraphUtils,
MatchCapabilitiesRequirementsUtils,
CompositionGraphPaletteUtils,
- ComponentServiceNg2) => {
+ ComponentServiceNg2,
+ ModalService,
+ ConnectionWizardService,
+ ComponentInstanceServiceNg2) => {
return new CompositionGraph(
$q,
$log,
@@ -587,7 +765,10 @@ export class CompositionGraph implements ng.IDirective {
CommonGraphUtils,
MatchCapabilitiesRequirementsUtils,
CompositionGraphPaletteUtils,
- ComponentServiceNg2);
+ ComponentServiceNg2,
+ ModalService,
+ ConnectionWizardService,
+ ComponentInstanceServiceNg2);
}
}
@@ -606,5 +787,8 @@ CompositionGraph.factory.$inject = [
'CommonGraphUtils',
'MatchCapabilitiesRequirementsUtils',
'CompositionGraphPaletteUtils',
- 'ComponentServiceNg2'
+ 'ComponentServiceNg2',
+ 'ModalServiceNg2',
+ 'ConnectionWizardServiceNg2',
+ 'ComponentInstanceServiceNg2'
];
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 248f19fb70..bbf2d6bbb2 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
@@ -8,17 +8,7 @@
<relation-menu relation-menu-directive-obj="relationMenuDirectiveObj" is-link-menu-open="isLinkMenuOpen"
create-relation="createLinkFromMenu" cancel="cancelRelationMenu()"></relation-menu>
-
-<div class="w-sdc-canvas-menu"
- data-ng-show="linkMenuObject" ng-style="{left: linkMenuObject.position.x, top: linkMenuObject.position.y}"
- id="relationMenu">
-
- <div class="w-sdc-canvas-menu-content hand" data-ng-click="deleteRelation(linkMenuObject.link)">
- <div class="w-sdc-canvas-menu-content-delete-button"></div>
- Delete
- </div>
-
-</div>
+<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)"
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 0ea38af825..da7d48e6ae 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,7 +18,7 @@
* ============LICENSE_END=========================================================
*/
-import {ComponentInstance, Component, MatchReqToCapability, MatchBase, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models";
+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";
@@ -106,16 +106,16 @@ export class CompositionGraphGeneralUtils {
* @param cy - Cytoscape instance
* @param fromUcpeInstance
* @param toComponentInstance
- * @returns {MatchReqToCapability}
+ * @returns {Match}
*/
- public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):MatchReqToCapability {
+ public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):Match {
- let matches:Array<MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
- let hostedOnMatch:MatchBase = _.find(matches, (match:MatchReqToCapability) => {
+ 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 <MatchReqToCapability>hostedOnMatch;
+ return hostedOnMatch;
};
@@ -128,7 +128,7 @@ export class CompositionGraphGeneralUtils {
*/
private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean {
- let hostedOnMatch:MatchReqToCapability = this.canBeHostedOn(cy, ucpeNode, nodeToInsert);
+ let hostedOnMatch:Match = this.canBeHostedOn(cy, ucpeNode, nodeToInsert);
let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation
return result;
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 05f99ae9ea..89c5e14602 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,25 +21,17 @@
/**
* Created by obarda on 6/28/2016.
*/
-import {GraphUIObjects, ComponentInstanceFactory, ResourceType} from "app/utils";
-import {LeftPaletteLoaderService, LoaderService} from "app/services";
+import {GraphUIObjects} from "app/utils";
+import {LoaderService} from "app/services";
import {
NodeUcpe,
CompositionCiNodeVf,
- MatchReqToCapability,
- MatchBase,
- MatchReqToReq,
- ComponentInstance,
+ Match,
CompositionCiNodeBase,
RelationshipModel,
- RelationMenuDirectiveObj,
- CapabilitiesGroup,
+ ConnectRelationModel,
LinksFactory,
- NodesFactory,
- RequirementsGroup,
Component,
- Relationship,
- Capability,
LinkMenu,
Point,
CompositionCiLinkBase
@@ -105,16 +97,16 @@ export class CompositionGraphLinkUtils {
);
};
- private createSimpleLink = (match:MatchReqToCapability, cy:Cy.Instance, component:Component):void => {
+ 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:MatchBase, component:Component):void => {
+ public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Match, component:Component):void => {
if (chosenMatch) {
- if (chosenMatch && chosenMatch instanceof MatchReqToCapability) {
+ if (chosenMatch && chosenMatch instanceof Match) {
this.createSimpleLink(chosenMatch, cy, component);
}
}
@@ -128,18 +120,18 @@ export class CompositionGraphLinkUtils {
* @param matchesArray
* @returns {Array<MatchBase>}
*/
- public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<MatchBase>):any {
+ public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<Match>):any {
- let matchLink:Array<MatchBase>;
+ let matchLink:Array<Match>;
if (fromNode.isUcpePart) {
- matchLink = _.filter(matchesArray, (match:MatchBase) => {
+ matchLink = _.filter(matchesArray, (match:Match) => {
return match.isOwner(fromNode.id);
});
}
if (toNode.isUcpePart) {
- matchLink = _.filter(matchesArray, (match:MatchBase) => {
+ matchLink = _.filter(matchesArray, (match:Match) => {
return match.isOwner(toNode.id);
});
}
@@ -154,14 +146,14 @@ export class CompositionGraphLinkUtils {
* @param toNode
* @returns {any}
*/
- public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):RelationMenuDirectiveObj {
+ 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<MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance,
+ let possibleRelations:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance,
toNode.data().componentInstance, linkModel);
//filter relations found to limit to specific ucpe-cp
@@ -169,8 +161,8 @@ export class CompositionGraphLinkUtils {
//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 RelationMenuDirectiveObj(fromNode.data(), toNode.data(), menuPosition, possibleRelations);
+ // let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint());
+ return new ConnectRelationModel(fromNode.data(), toNode.data(), possibleRelations);
}
return null;
};
@@ -209,7 +201,7 @@ export class CompositionGraphLinkUtils {
* @param vfNode
*/
public createVfToUcpeLink = (component:Component, cy:Cy.Instance, ucpeNode:NodeUcpe, vfNode:CompositionCiNodeVf):void => {
- let hostedOnMatch:MatchReqToCapability = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance);
+ let hostedOnMatch:Match = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance);
/* create relation */
let newRelation = new RelationshipModel();
newRelation.fromNode = ucpeNode.id;
@@ -224,13 +216,12 @@ export class CompositionGraphLinkUtils {
/**
* Handles click event on links.
* If one edge selected: do nothing.
- /*Two edges selected - always select all
- /* Three or more edges: first click - select all, secondary click - select single.
+ * 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 > 2 && event.cyTarget[0].selected()) {
+ if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) {
cy.$(':selected').unselect();
} else {
@@ -256,7 +247,7 @@ export class CompositionGraphLinkUtils {
* @returns {Point}
*/
public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point {
- let point:Point = new Point(event.originalEvent.x, event.originalEvent.y);
+ 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;
}
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 5f717512f5..6a02381902 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,22 +18,17 @@
* ============LICENSE_END=========================================================
*/
-import {Requirement, CompositionCiLinkBase, ComponentInstance, CapabilitiesGroup, RequirementsGroup, MatchReqToCapability, MatchBase,
- MatchReqToReq,CompositionCiNodeBase, Component, Capability} from "app/models";
+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 {
- constructor() {
- }
-
- public static linkable(requirement1:Requirement, requirement2:Requirement, vlCapability:Capability):boolean {
- return MatchCapabilitiesRequirementsUtils.isMatch(requirement1, vlCapability) && MatchCapabilitiesRequirementsUtils.isMatch(requirement2, vlCapability);
- };
-
-
/**
* Shows + icon in corner of each node passed in
* @param filteredNodesData
@@ -77,9 +72,7 @@ export class MatchCapabilitiesRequirementsUtils {
})
}
- // -------------------------------------------ALL FUNCTIONS NEED REFACTORING---------------------------------------------------------------//
-
- private static requirementFulfilled(fromNodeId:string, requirement:any, links:Array<CompositionCiLinkBase>):boolean {
+ private static isRequirementFulfilled(fromNodeId:string, requirement:any, links:Array<CompositionCiLinkBase>):boolean {
return _.some(links, {
'relation': {
'fromNode': fromNodeId,
@@ -108,172 +101,97 @@ export class MatchCapabilitiesRequirementsUtils {
return false;
};
- private getFromToMatches(requirements1:RequirementsGroup,
- requirements2:RequirementsGroup,
- capabilities:CapabilitiesGroup,
- links:Array<CompositionCiLinkBase>,
- fromId:string,
- toId:string,
- vlCapability?:Capability):Array<MatchBase> {
- let matches:Array<MatchBase> = new Array<MatchBase>();
- _.forEach(requirements1, (requirementValue:Array<Requirement>, key) => {
- _.forEach(requirementValue, (requirement:Requirement) => {
- if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromId, requirement, links)) {
- _.forEach(capabilities, (capabilityValue:Array<Capability>, key) => {
- _.forEach(capabilityValue, (capability:Capability) => {
- if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
- let match:MatchReqToCapability = new MatchReqToCapability(requirement, capability, true, fromId, toId);
- matches.push(match);
- }
- });
- });
- if (vlCapability) {
- _.forEach(requirements2, (requirement2Value:Array<Requirement>, key) => {
- _.forEach(requirement2Value, (requirement2:Requirement) => {
- if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement2, links) && MatchCapabilitiesRequirementsUtils.linkable(requirement, requirement2, vlCapability)) {
- let match:MatchReqToReq = new MatchReqToReq(requirement, requirement2, true, fromId, toId);
- matches.push(match);
- }
- });
- });
- }
- }
- });
- });
- return matches;
- }
-
- private getToFromMatches(requirements:RequirementsGroup, capabilities:CapabilitiesGroup, links:Array<CompositionCiLinkBase>, fromId:string, toId:string):Array<MatchReqToCapability> {
- let matches:Array<MatchReqToCapability> = [];
- _.forEach(requirements, (requirementValue:Array<Requirement>, key) => {
- _.forEach(requirementValue, (requirement:Requirement) => {
- if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement, links)) {
- _.forEach(capabilities, (capabilityValue:Array<Capability>, key) => {
- _.forEach(capabilityValue, (capability:Capability) => {
- if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
- let match:MatchReqToCapability = new MatchReqToCapability(requirement, capability, false, toId, fromId);
- matches.push(match);
- }
- });
- });
- }
- });
- });
- return matches;
- }
-
public getMatchedRequirementsCapabilities(fromComponentInstance:ComponentInstance,
toComponentInstance:ComponentInstance,
- links:Array<CompositionCiLinkBase>,
- vl?:Component):Array<MatchBase> {//TODO allow for VL array
- let linkCapability;
- if (vl) {
- let linkCapabilities:Array<Capability> = vl.capabilities.findValueByKey('linkable');
- if (linkCapabilities) {
- linkCapability = linkCapabilities[0];
- }
- }
- let fromToMatches:Array<MatchBase> = this.getFromToMatches(fromComponentInstance.requirements,
- toComponentInstance.requirements,
+ links:Array<CompositionCiLinkBase>):Array<Match> {
+ let fromToMatches:Array<Match> = this.getMatches(fromComponentInstance.requirements,
toComponentInstance.capabilities,
links,
fromComponentInstance.uniqueId,
- toComponentInstance.uniqueId,
- linkCapability);
- let toFromMatches:Array<MatchReqToCapability> = this.getToFromMatches(toComponentInstance.requirements,
+ toComponentInstance.uniqueId, true);
+ let toFromMatches:Array<Match> = this.getMatches(toComponentInstance.requirements,
fromComponentInstance.capabilities,
links,
fromComponentInstance.uniqueId,
- toComponentInstance.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" && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) {
+ requirementArray.push(requirement);
+ }
+ });
+ return requirementArray;
+ };
+
/**
- * Step I: Check if capabilities of component match requirements of nodeDataArray
- * 1. Get component capabilities and loop on each capability
- * 2. Inside the loop, perform another loop on all nodeDataArray, and fetch the requirements for each one
- * 3. Loop on the requirements, and verify match (see in code the rules)
- *
- * Step II: Check if requirements of component match capabilities of nodeDataArray
- * 1. Get component requirements and loop on each requirement
- * 2.
- *
- * @param component - this is the hovered resource of the left panel of composition screen
- * @param nodeDataArray - Array of resource instances that are on the canvas
- * @param links -getMatchedRequirementsCapabilities
- * @param vl -
- * @returns {any[]|T[]}
+ * Returns true if there is a match between the capabilities and requirements that are passed in
+ * @param requirements
+ * @param capabilities
+ * @returns {boolean}
*/
- public findByMatchingCapabilitiesToRequirements(component:Component,
- nodeDataArray:Array<CompositionCiNodeBase>,
- links:Array<CompositionCiLinkBase>,
- vl?:Component):Array<any> {//TODO allow for VL array
- let res = [];
-
- // STEP I
- {
- let capabilities:any = component.capabilities;
- _.forEach(capabilities, (capabilityValue:Array<any>, capabilityKey)=> {
- _.forEach(capabilityValue, (capability)=> {
- _.forEach(nodeDataArray, (node:CompositionCiNodeBase)=> {
- if (node && node.componentInstance) {
- let requirements:any = node.componentInstance.requirements;
- let fromNodeId:string = node.componentInstance.uniqueId;
- _.forEach(requirements, (requirementValue:Array<any>, requirementKey)=> {
- _.forEach(requirementValue, (requirement)=> {
- if (requirement.name !== "dependency" && MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)
- && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) {
- res.push(node);
- }
- });
- });
- }
- });
- });
+ 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);
});
- }
+ });
+ };
- // STEP II
- {
- let requirements:any = component.requirements;
- let fromNodeId:string = component.uniqueId;
- let linkCapability:Array<Capability> = vl ? vl.capabilities.findValueByKey('linkable') : undefined;
+ /**
+ * 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;
- _.forEach(requirements, (requirementValue:Array<any>, requirementKey)=> {
- _.forEach(requirementValue, (requirement)=> {
- if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) {
- _.forEach(nodeDataArray, (node:any)=> {
- if (node && node.componentInstance && node.category !== 'groupCp') {
- let capabilities:any = node.componentInstance.capabilities;
- _.forEach(capabilities, (capabilityValue:Array<any>, capabilityKey)=> {
- _.forEach(capabilityValue, (capability)=> {
- if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
- res.push(node);
- }
- });
- });
- if (linkCapability) {
- let linkRequirements = node.componentInstance.requirements;
- _.forEach(linkRequirements, (value:Array<any>, key)=> {
- _.forEach(value, (linkRequirement)=> {
- if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(node.componentInstance.uniqueId, linkRequirement, links)
- && MatchCapabilitiesRequirementsUtils.linkable(requirement, linkRequirement, linkCapability[0])) {
- res.push(node);
- }
- });
- });
- }
- }
- });
+ } 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;
}
- });
- });
- }
-
- return _.uniq(res);
- };
+ }
+ }
+ });
+ }
}
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
index ace9d1ce4c..127f43b734 100644
--- 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
@@ -27,6 +27,7 @@ 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;
@@ -105,6 +106,7 @@ export class DeploymentGraph implements ng.IDirective {
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()),
@@ -124,8 +126,8 @@ export class DeploymentGraph implements ng.IDirective {
fisheye: false,
undoable: false,
expandCollapseCueSize: 18,
- expandCueImage: '/assets/styles/images/resource-icons/' + 'closeModule.png',
- collapseCueImage: '/assets/styles/images/resource-icons/' + 'openModule.png',
+ expandCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
+ collapseCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'openModule.png',
expandCollapseCueSensitivity: 2,
cueOffset: -20
});
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
index f46dc6c939..8abf968c82 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -132,7 +132,7 @@ export class Palette implements ng.IDirective {
private initLeftPanel(leftPanelComponents:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):LeftPanelModel {
let leftPanelModel = new LeftPanelModel();
-
+
if (resourceFilterTypes && resourceFilterTypes.length) {
leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes);
}
@@ -171,40 +171,6 @@ export class Palette implements ng.IDirective {
this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent);
this.$log.debug('palette::onMouseOver:: fired');
- //
- // if (this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.containsKey(displayComponent.uniqueId)) {
- // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} found in cache`);
- // let cacheComponent:Component = this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.getValue(displayComponent.uniqueId);
- //
- // //TODO: Danny: fire event to highlight matching nodes
- // //showMatchingNodes(cacheComponent);
- // return;
- // }
- //
- // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} not found in cache, initiating server get`);
- // // This will bring the component from the server including requirements and capabilities
- // // Check that we do not fetch many times, because only in the success we add the component to componentRequirementsAndCapabilitiesCaching
- // if (this.fetchingComponentFromServer) {
- // return;
- // }
- //
- // this.fetchingComponentFromServer = true;
- // this.ComponentFactory.getComponentFromServer(displayComponent.componentSubType, displayComponent.uniqueId)
- // .then((component:Component) => {
- // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} fetch success`);
- // // this.LeftPaletteLoaderService.updateSpecificComponentLeftPalette(component, scope.currentComponent.componentType);
- // this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.setValue(component.uniqueId, component);
- // this.fetchingComponentFromServer = false;
- //
- // //TODO: Danny: fire event to highlight matching nodes
- // //showMatchingNodes(component);
- // })
- // .catch(() => {
- // this.$log.debug('palette::onMouseOver:: component id fetch error');
- // this.fetchingComponentFromServer = false;
- // });
-
-
};
scope.onMouseOut = () => {
@@ -226,8 +192,13 @@ export class Palette implements ng.IDirective {
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);
- scope.model = this.initLeftPanel(scope.components, resourceFilterTypes);
+ scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent);
+ //remove the container component from the list
+ let componentTempToDisplay = angular.copy(scope.components);
+ componentTempToDisplay = _.remove(componentTempToDisplay, function (component) {
+ return component.component.invariantUUID !== scope.currentComponent.invariantUUID;
+ });
+ scope.model = this.initLeftPanel(componentTempToDisplay, resourceFilterTypes);
scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
};
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
index 4b123e5777..7f9bfd1e0d 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
@@ -32,7 +32,7 @@
data-ng-repeat="component in components | orderBy: 'displayName' track by $index"
data-tests-id={{component.displayName}}>
<div class="i-sdc-designer-leftbar-section-content-item-icon-ph">
- <div class="medium {{component.iconClass}}"
+ <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">
diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html
index a0a9e4af27..e1cdf499a0 100644
--- a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html
+++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html
@@ -1,46 +1,46 @@
-<div class="link-menu-open" data-tests-id="link-menu-open" data-ng-show="isLinkMenuOpen" ng-style="{left: relationMenuDirectiveObj.menuPosition.x, top: relationMenuDirectiveObj.menuPosition.y}" clicked-outside="{onClickedOutside: 'hideRelationMatch()', clickedOutsideEnable: 'isLinkMenuOpen'}" >
+<div class="link-menu-open" data-tests-id="link-menu-open" data-ng-show="isLinkMenuOpen" ng-style="{left: connectRelationModel.menuPosition.x, top: connectRelationModel.menuPosition.y}" clicked-outside="{onClickedOutside: 'hideRelationMatch()', clickedOutsideEnable: 'isLinkMenuOpen'}" >
<h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.leftSideLink.componentInstance.name | resourceName}}</h4>
<h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.rightSideLink.componentInstance.name | resourceName}}</h4>
<p>Select one of the options below to connect</p>
<perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
- <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.leftSideLink.requirements, relationMenuDirectiveObj.rightSideLink.selectedMatch)">Requirements</div>
- <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req ,matchArr) in relationMenuDirectiveObj.leftSideLink.requirements"
- data-ng-click="relationMenuDirectiveObj.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
- data-ng-show="showMatch(relationMenuDirectiveObj.rightSideLink.selectedMatch, matchArr)"
- data-ng-class="{ 'selected': relationMenuDirectiveObj.leftSideLink.selectedMatch === matchArr}">
+ <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.leftSideLink.requirements, connectRelationModel.rightSideLink.selectedMatch)">Requirements</div>
+ <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req ,matchArr) in connectRelationModel.leftSideLink.requirements"
+ data-ng-click="connectRelationModel.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
+ data-ng-show="showMatch(connectRelationModel.rightSideLink.selectedMatch, matchArr)"
+ data-ng-class="{ 'selected': connectRelationModel.leftSideLink.selectedMatch === matchArr}">
<div sdc-smart-tooltip>{{matchArr[0].requirement.getFullTitle()}}</div>
</div>
- <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.leftSideLink.capabilities, relationMenuDirectiveObj.rightSideLink.selectedMatch)">Capabilities</div>
- <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in relationMenuDirectiveObj.leftSideLink.capabilities"
- data-ng-click="relationMenuDirectiveObj.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
- data-ng-show="showMatch(relationMenuDirectiveObj.rightSideLink.selectedMatch, matchArr)"
- data-ng-class="{ 'selected': relationMenuDirectiveObj.leftSideLink.selectedMatch === matchArr}">
+ <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.leftSideLink.capabilities, connectRelationModel.rightSideLink.selectedMatch)">Capabilities</div>
+ <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in connectRelationModel.leftSideLink.capabilities"
+ data-ng-click="connectRelationModel.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
+ data-ng-show="showMatch(connectRelationModel.rightSideLink.selectedMatch, matchArr)"
+ data-ng-class="{ 'selected': connectRelationModel.leftSideLink.selectedMatch === matchArr}">
<div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div>
</div>
</perfect-scrollbar>
<perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
- <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.rightSideLink.requirements, relationMenuDirectiveObj.leftSideLink.selectedMatch)">Requirements</div>
- <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req, matchArr) in relationMenuDirectiveObj.rightSideLink.requirements"
- data-ng-click="relationMenuDirectiveObj.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
- data-ng-show="showMatch(relationMenuDirectiveObj.leftSideLink.selectedMatch, matchArr)"
- data-ng-class="{ 'selected': relationMenuDirectiveObj.rightSideLink.selectedMatch === matchArr}">
+ <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.rightSideLink.requirements, connectRelationModel.leftSideLink.selectedMatch)">Requirements</div>
+ <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req, matchArr) in connectRelationModel.rightSideLink.requirements"
+ data-ng-click="connectRelationModel.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
+ data-ng-show="showMatch(connectRelationModel.leftSideLink.selectedMatch, matchArr)"
+ data-ng-class="{ 'selected': connectRelationModel.rightSideLink.selectedMatch === matchArr}">
<div sdc-smart-tooltip>{{matchArr[0].secondRequirement ? matchArr[0].secondRequirement.getFullTitle() : matchArr[0].requirement.getFullTitle()}}</div>
</div>
- <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.rightSideLink.capabilities, relationMenuDirectiveObj.leftSideLink.selectedMatch)">Capabilities</div>
- <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in relationMenuDirectiveObj.rightSideLink.capabilities"
- data-ng-click="relationMenuDirectiveObj.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
- data-ng-show="showMatch(relationMenuDirectiveObj.leftSideLink.selectedMatch, matchArr)"
- data-ng-class="{ 'selected': relationMenuDirectiveObj.rightSideLink.selectedMatch === matchArr}">
+ <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.rightSideLink.capabilities, connectRelationModel.leftSideLink.selectedMatch)">Capabilities</div>
+ <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in connectRelationModel.rightSideLink.capabilities"
+ data-ng-click="connectRelationModel.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
+ data-ng-show="showMatch(connectRelationModel.leftSideLink.selectedMatch, matchArr)"
+ data-ng-class="{ 'selected': connectRelationModel.rightSideLink.selectedMatch === matchArr}">
<div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div>
</div>
</perfect-scrollbar>
- <div class="vl-type" data-ng-class="{'disabled': !relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement}">
+ <div class="vl-type" data-ng-class="{'disabled': !connectRelationModel.leftSideLink.selectedMatch[0].secondRequirement || !connectRelationModel.rightSideLink.selectedMatch[0].secondRequirement}">
<sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="ptp"
disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.p2pVL"
text="Point to point" elem-id="radioPTP" elem-name="vlType"></sdc-radio-button>
@@ -57,7 +57,7 @@
</div>
<button class="tlv-btn grey" data-tests-id="link-menu-button-cancel" data-ng-click="hideRelationMatch()">Cancel</button>
- <button class="tlv-btn blue" data-tests-id="link-menu-button-connect" data-ng-disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch || !relationMenuDirectiveObj.rightSideLink.selectedMatch ||
- (relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement && !relationMenuDirectiveObj.vlType)"
+ <button class="tlv-btn blue" data-tests-id="link-menu-button-connect" data-ng-disabled="!connectRelationModel.leftSideLink.selectedMatch || !connectRelationModel.rightSideLink.selectedMatch ||
+ (connectRelationModel.leftSideLink.selectedMatch[0].secondRequirement && !connectRelationModel.vlType)"
data-ng-click="saveRelation()">Connect</button>
</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts
index 6106d10c4e..f73e855c0e 100644
--- a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts
@@ -18,19 +18,19 @@
* ============LICENSE_END=========================================================
*/
'use strict'
-import {MatchBase, RelationMenuDirectiveObj} from "app/models";
+import {Match, ConnectRelationModel} from "app/models";
import {Component} from "../../../models/components/component";
export interface IRelationMenuScope extends ng.IScope {
- relationMenuDirectiveObj:RelationMenuDirectiveObj;
+ relationMenuDirectiveObj:ConnectRelationModel;
createRelation:Function;
isLinkMenuOpen:boolean;
hideRelationMatch:Function;
cancel:Function;
saveRelation();
- showMatch(arr1:Array<MatchBase>, arr2:Array<MatchBase>):boolean;
- hasMatchesToShow(matchesObj:MatchBase, selectedMatch:Array<MatchBase>);
+ showMatch(arr1:Array<Match>, arr2:Array<Match>):boolean;
+ hasMatchesToShow(matchesObj:Match, selectedMatch:Array<Match>);
updateSelectionText():void;
}
@@ -58,7 +58,7 @@ export class RelationMenuDirective implements ng.IDirective {
scope.saveRelation = ():void=> {
let chosenMatches:Array<any> = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch);
- let chosenMatch:MatchBase = chosenMatches[0];
+ let chosenMatch:Match = chosenMatches[0];
scope.createRelation()(chosenMatch);
};
@@ -69,14 +69,14 @@ export class RelationMenuDirective implements ng.IDirective {
};
//to show options in link menu
- scope.showMatch = (arr1:Array<MatchBase>, arr2:Array<MatchBase>):boolean => {
+ scope.showMatch = (arr1:Array<Match>, arr2:Array<Match>):boolean => {
return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0;
};
//to show requirements/capabilities title
- scope.hasMatchesToShow = (matchesObj:MatchBase, selectedMatch:Array<MatchBase>):boolean => {
+ scope.hasMatchesToShow = (matchesObj:Match, selectedMatch:Array<Match>):boolean => {
let result:boolean = false;
- _.forEach(matchesObj, (matchesArr:Array<MatchBase>) => {
+ _.forEach(matchesObj, (matchesArr:Array<Match>) => {
if (!result) {
result = scope.showMatch(matchesArr, selectedMatch);
}