diff options
Diffstat (limited to 'catalog-ui/src/app/directives')
27 files changed, 472 insertions, 894 deletions
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts index 1c5c333d27..14cafa98c4 100644 --- a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts +++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts @@ -28,7 +28,7 @@ * Created by obarda on 1/8/2017. */ 'use strict'; -import {RequirementsGroup, Component} from "app/models"; +import {RequirementsGroup, Component, Relationship, RelationshipModel} from "app/models"; export interface IRequirementsListScope extends ng.IScope { @@ -62,12 +62,11 @@ export class RequirementsListDirective implements ng.IDirective { scope.getRelation = (requirement:any):any => { if (scope.isInstanceSelected() && scope.component.componentInstancesRelations) { - let relationItem = _.filter(scope.component.componentInstancesRelations, (relation:any) => { + let relationItem:Array<RelationshipModel> = _.filter((<Component>scope.component).componentInstancesRelations, (relation:RelationshipModel) => { return relation.fromNode === scope.component.selectedInstance.uniqueId && - _.some(relation.relationships, { - 'requirement': requirement.name, - 'requirementOwnerId': requirement.ownerId - }); + _.filter(relation.relationships, (relationship:Relationship) => { + return relationship.relation.requirement == requirement.name && relationship.relation.requirementOwnerId == requirement.ownerId; + }).length; }); if (relationItem && relationItem.length) { diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html deleted file mode 100644 index a50731443d..0000000000 --- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html +++ /dev/null @@ -1,8 +0,0 @@ -<div class="footer-wrapper"> - <div class="divider-footer-bottom"> - <div class="footer-copyright-text"> - <p> - </p> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less deleted file mode 100644 index 4c54a11fec..0000000000 --- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less +++ /dev/null @@ -1,47 +0,0 @@ - -.footer-wrapper { - position: fixed; - bottom: 0px; - left: 0px; - width: 100%; - background-color: #222222; - color: #ffffff; - font-family: "Arial"; - font-size: 11px; - height: @footer_height; -} - -.footer-wrapper a { - color: #ffffff; - margin: 0; - padding: 0; - text-decoration: underline; -} - -.divider-footer-bottom { - margin: 0 auto; - width: 1020px; -} - -.footer-copyright-text { - display: inline-block; - width:612px; - margin-top: 18px; - margin-left: 50px; - text-align: left; - vertical-align: top; -} - -.footer-logo1 { - display: inline-block; - margin-top: 20px; - margin-left: 124px; -} - -.footer-logo2 { - margin-top: 22px; - margin-left: 9px; - display: inline-block; - font-size: 24px; - vertical-align: top; -} diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts deleted file mode 100644 index 7796f60d70..0000000000 --- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts +++ /dev/null @@ -1,53 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -'use strict'; -import {IAppConfigurtaion} from "app/models"; - -export interface IEcompFooterDirectiveScope extends ng.IScope { - -} - -export class EcompFooterDirective implements ng.IDirective { - - constructor(private sdcConfig:IAppConfigurtaion) { - - } - - public replace = true; - public restrict = 'E'; - - public scope = {}; - - template = ():string => { - return require('./ecomp-footer.html'); - }; - - link = (scope:IEcompFooterDirectiveScope, $elem:JQuery, attr:any) => { - - }; - - public static factory = (sdcConfig:IAppConfigurtaion)=> { - return new EcompFooterDirective(sdcConfig); - }; - -} - -EcompFooterDirective.factory.$inject = ['sdcConfig']; diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts index 7d616afba6..f73c82a190 100644 --- a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts +++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts @@ -20,7 +20,8 @@ 'use strict'; import {IAppConfigurtaion, User, IUser} from "app/models"; -import {IUserResourceClass, IUserResource} from "app/services"; +import {IUserProperties} from "../../models/user"; +import {UserService} from "../../ng2/services/user.service"; export class MenuItem { menuId:number; @@ -55,7 +56,7 @@ export class EcompHeaderDirective implements ng.IDirective { constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, - private UserResourceClass:IUserResourceClass) { + private userService:UserService) { } @@ -90,14 +91,14 @@ export class EcompHeaderDirective implements ng.IDirective { let initUser = ():void => { let defaultUserId:string; - let user:IUserResource = this.UserResourceClass.getLoggedinUser(); - if (!user) { + let userInfo:IUserProperties = this.userService.getLoggedinUser(); + if (!userInfo) { defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; - user = this.UserResourceClass.get({id: defaultUserId}, ():void => { - $scope.user = new User(user); + this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => { + $scope.user = new User(defaultUserInfo); }); } else { - $scope.user = new User(user); + $scope.user = new User(userInfo); } }; @@ -135,8 +136,8 @@ export class EcompHeaderDirective implements ng.IDirective { public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, - UserResourceClass:IUserResourceClass)=> { - return new EcompHeaderDirective($http, sdcConfig, UserResourceClass); + userService:UserService)=> { + return new EcompHeaderDirective($http, sdcConfig, userService); }; } @@ -229,7 +230,7 @@ export class EcompHeaderController { }; } -EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService']; +EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2']; 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); } diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html deleted file mode 100644 index 60d3d63855..0000000000 --- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html +++ /dev/null @@ -1,54 +0,0 @@ -<nav class="top-nav"> - - <div class="asdc-app-title-wrapper"> - <a class="asdc-app-title" translate="PROJECT_TITLE"></a> - <div class="asdc-version"> v.{{version}}</div> - </div> - - <ul class="top-menu" data-ng-show="!menuModel"> - <!-- no hierarchy & dropdowns mode --> - <li data-ng-repeat="item in topLvlMenu.menuItems" - data-ng-class="{'selected': $index == topLvlMenu.selectedIndex}"> - <a data-ng-click="menuItemClick(topLvlMenu, item)" - data-tests-id="main-menu-button-{{item.text | lowercase}}">{{item.text}}</a> - </li> - </ul> - - <ul class="top-menu" data-ng-show="menuModel"> - <!-- with hierarchy & dropdowns mode --> - <li data-ng-repeat-start="groupItem in menuModel" - data-ng-class="{'selected': $last }"> - <a data-ng-click="menuItemClick(groupItem, groupItem.menuItems[groupItem.selectedIndex])" - data-tests-id="breadcrumbs-button-{{$index}}"> - {{groupItem.menuItems[groupItem.selectedIndex].text}} - </a> - </li> - <li data-ng-repeat-end="" class="triangle-dropdown" - data-ng-class="{'item-click': groupItem.itemClick}" data-ng-mouseover="groupItem.itemClick = true"> - <div class="triangle"><span class="sprite-new arrow-right"></span></div> - <perfect-scrollbar scroll-y-margin-offset="15" include-padding="true"> - <ul> - <li data-ng-repeat="ddItem in groupItem.menuItems" - data-ng-click="menuItemClick(groupItem, ddItem)" - data-ng-class="{'selected': $index == groupItem.selectedIndex, 'disabled': ddItem.isDisabled}" - data-tests-id="sub-menu-button-{{ddItem.text | lowercase}}"> - <span sdc-smart-tooltip="">{{ddItem.text}}</span> - </li> - </ul> - </perfect-scrollbar> - </li> - </ul> - - <div class="top-search" data-ng-hide="hideSearch === true"> - <input type="text" - class="search-text" - placeholder="Search" - data-ng-model="searchBind" - data-tests-id="main-menu-input-search" - ng-model-options="{ debounce: 500 }" /> - <span class="w-sdc-search-icon magnification"></span> - </div> - - <div class="notification-icon" data-ng-disabled= "progress > 0" data-ng-class="{'disabled' : progress > 0}" data-ng-if="user.role === 'DESIGNER' && notificationIconCallback" data-ng-click="notificationIconCallback()" tooltips tooltip-side="left" tooltip-content="Vendor Software Product Repository" data-tests-id="repository-icon"></div> - -</nav> diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.less b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less deleted file mode 100644 index 13b4a525f4..0000000000 --- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.less +++ /dev/null @@ -1,218 +0,0 @@ -.top-nav { - position: fixed; - top: @header_height; - background-color: @main_color_p; - .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33)); - width: 100%; - height: @top_nav_height; - line-height: @top_nav_height; - z-index: 10; - display: flex; - flex-direction: row; - align-items: center; - - .asdc-app-title-wrapper { - flex-grow: 1; - line-height: 16px; - margin: 0 20px; - - a.asdc-app-title { - .m_18_r; - text-decoration: none; - } - - .asdc-version { - .m_12_r; - .opacity(0.8); - line-height: 14px; - flex-grow: 1; - } - - } - - ul.top-menu { - list-style-type: none; - margin: 0 0 0 20px; - padding: 0; - flex-grow: 999; - - & > li { - float: left; - cursor: pointer; - line-height: 50px; - height: 50px; - padding: 0 20px; - - &.selected { - border-bottom: solid 4px @main_color_a; - - a { - color: @func_color_s; - } - } - - /*&:hover { - border-bottom: solid 4px @main_color_a; - }*/ - - a { - font-family: @font-opensans-medium; - color: @main_color_m; - font-size: 16px; - display: block; - text-align: center; - text-decoration: none; - } - - &.triangle-dropdown { - padding: 0; - position: relative; - - div.triangle { - margin-top: 15px; - border-radius: 2px; - width: 17px; - height: 18px; - - //temp use - until new triangle gets in - line-height: 18px; - text-align: center; - font-size: 10px; - - &:hover { - background-color: rgba(156, 156, 156, 0.2); - - span { - .arrow-right-hover; - } - } - } - - + li a { - font-size: 16px; - } - - .ps-container { - .perfect-scrollbar; - position: absolute; - left: 0; - top: 40px; - z-index: 1; - - overflow: hidden; - max-height: 0; - -webkit-transition: max-height 200ms ease-in; - -moz-transition: max-height 200ms ease-in; - -o-transition: max-height 200ms ease-in; - transition: max-height 200ms ease-in; - - div ul { - - padding: 0; - background-color: white; - - li { - - height: 35px; - background-color: white; - font-size: 13px; - width: 150px; - line-height: 35px; - padding: 0 10px; - - &.disabled { - opacity: 1; - } - &.selected { - background-color: @tlv_color_v; - font-weight: bold; - } - &:hover { - color: @main_color_a; - } - span { - height: 35px; - width: 130px; - display: inline-block; - } - } - } - } - &.item-click:hover .ps-container, - &.item-click:active .ps-container { - max-height: 500px; - border: 1px solid @func_color_b; - border-radius: 2px; - box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); - - div ul { - - } - } - } - } - - } - - .top-search { - position: relative; - flex-grow: 1; - padding: 0 20px; - - input.search-text { - .border-radius(2px); - width: 245px; - height: 32px; - line-height: 32px; - border: 1px solid @main_color_o; - outline: none; - text-indent: 10px; - - &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ - &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ - &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ - &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ - &:-ms-input-placeholder { font-style: italic; } /* Edge */ - /* font-style: italic; - }*/ - /* Firefox 18- */ - &::-moz-placeholder { - font-style: italic; - } - /* Firefox 19+ */ - &:-ms-input-placeholder { - font-style: italic; - } - /* IE 10+ */ - &:-ms-input-placeholder { - font-style: italic; - } - /* Edge */ - } - - .magnification { - position: absolute; - top: 19px; - right: 26px; - } - - } - - .notification-icon { - cursor: pointer; - flex-grow: 1; - margin: 0 10px 6px 0; - .sprite-new; - .vsp-list-icon; - - &:hover { - .vsp-list-icon-hover; - } - - &:active { - .vsp-list-icon-active; - } - - } - -} diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts deleted file mode 100644 index 59e4d49647..0000000000 --- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts +++ /dev/null @@ -1,161 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -'use strict'; -import {IAppConfigurtaion, IHostedApplication, IUserProperties} from "app/models"; -import {IUserResourceClass} from "app/services"; -import {MenuItemGroup, MenuItem} from "app/utils"; - -export interface ITopNavScope extends ng.IScope { - topLvlSelectedIndex:number; - hideSearch:boolean; - searchBind:any; - menuModel:Array<MenuItemGroup>; - - topLvlMenu:MenuItemGroup; - goToState(state:string, params:Array<any>):ng.IPromise<boolean>; - menuItemClick:Function; - user:IUserProperties; - version:string; -} - - -export class TopNavDirective implements ng.IDirective { - - constructor(private $filter:ng.IFilterService, - private $state:ng.ui.IStateService, - private $q:ng.IQService, - private userResourceService:IUserResourceClass, - private sdcConfig:IAppConfigurtaion) { - } - - public replace = true; - public restrict = 'E'; - public transclude = false; - - - scope = { - topLvlSelectedIndex: '@?', - hideSearch: '=', - searchBind: '=', - version: '@', - notificationIconCallback: '=', - menuModel: '=?', - }; - - template = ():string => { - return require('./top-nav.html'); - }; - - public link = (scope:ITopNavScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { - - let getTopLvlSelectedIndexByState = ():number => { - if (!scope.topLvlMenu.menuItems) { - return 0; - } - - let result = -1; - - //set result to current state - scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { - if (item.state === this.$state.current.name) { - result = index; - } - }); - - //if it's a different state , checking previous state param - if (result === -1) { - scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { - if (item.state === this.$state.params['previousState']) { - result = index; - } - }); - } - - if (result === -1) { - result = 0; - } - - return result; - }; - - scope.user = this.userResourceService.getLoggedinUser(); - - let tmpArray:Array<MenuItem> = [ - new MenuItem(this.$filter('translate')("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null), - new MenuItem(this.$filter('translate')("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null) - ]; - - // Only designer can perform onboarding - if (scope.user && scope.user.role === 'DESIGNER') { - tmpArray.push(new MenuItem(this.$filter('translate')("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null)); - _.each(this.sdcConfig.hostedApplications, (hostedApp:IHostedApplication)=> { - if (hostedApp.exists) { - tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); - } - }); - } - - scope.topLvlMenu = new MenuItemGroup(0, tmpArray, true); - scope.topLvlMenu.selectedIndex = isNaN(scope.topLvlSelectedIndex) ? getTopLvlSelectedIndexByState() : scope.topLvlSelectedIndex; - - let generateMenu = () => { - if (scope.menuModel && scope.menuModel[0] !== scope.topLvlMenu) { - scope.menuModel.unshift(scope.topLvlMenu); - } - }; - scope.$watch('menuModel', generateMenu); - - generateMenu(); - - /////scope functions//// - - scope.goToState = (state:string, params:Array<any>):ng.IPromise<boolean> => { - let deferred = this.$q.defer(); - this.$state.go(state, params && params.length > 0 ? [0] : undefined); - deferred.resolve(true); - return deferred.promise; - }; - - scope.menuItemClick = (itemGroup:MenuItemGroup, item:MenuItem) => { - - itemGroup.itemClick = false; - - let onSuccess = ():void => { - itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item); - }; - let onFailed = ():void => { - }; - - if (item.callback) { - (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed); - } else { - scope[item.action](item.state, item.params).then(onSuccess, onFailed); - } - }; - }; - - public static factory = ($filter:ng.IFilterService, $state:ng.ui.IStateService, $q:ng.IQService, userResourceService:IUserResourceClass, sdcConfig:IAppConfigurtaion)=> { - return new TopNavDirective($filter, $state, $q, userResourceService, sdcConfig); - }; - -} - -TopNavDirective.factory.$inject = ['$filter', '$state', '$q', 'Sdc.Services.UserResourceService', 'sdcConfig']; diff --git a/catalog-ui/src/app/directives/loader/loader-directive.ts b/catalog-ui/src/app/directives/loader/loader-directive.ts index 36efc22079..7e056c774f 100644 --- a/catalog-ui/src/app/directives/loader/loader-directive.ts +++ b/catalog-ui/src/app/directives/loader/loader-directive.ts @@ -56,19 +56,14 @@ export class LoaderDirective implements ng.IDirective { let interval; - this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT, (loaderType)=> { - if (scope.loaderType !== loaderType) { - return; - } - scope.display = true; - }); - this.EventListenerService.registerObserverCallback(EVENTS.HIDE_LOADER_EVENT, (loaderType)=> { - if (scope.loaderType !== loaderType) { - return; - } - scope.display = false; - }); - + if(scope.loaderType) { + this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT + scope.loaderType, (loaderType)=> { + scope.display = true; + }); + this.EventListenerService.registerObserverCallback(EVENTS.HIDE_LOADER_EVENT + scope.loaderType, (loaderType)=> { + scope.display = false; + }); + } let calculateSizesForFixPosition = (positionStyle:string):void => { // This is problematic, I do not want to change the parent position. // set the loader on all the screen diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html index b62824d544..a2c29c5398 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html @@ -8,7 +8,7 @@ <div tooltips tooltip-content="{{property.name}}"> <input class="i-sdc-form-input" type="text" - data-ng-disabled="true" + readonly="readonly" value="{{property.name}}"/> </div> </div> @@ -48,7 +48,7 @@ data-tests-id="{{fieldsPrefixName+property.name}}" ng-if="!((property.simpleType||property.type) == 'boolean')" data-ng-maxlength="100" - data-ng-disabled="readOnly" + data-ng-readonly="readOnly" maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" data-ng-model="valueObjRef[property.name]" type="text" diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less index 5c65fdc9dc..abca49d7a3 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less @@ -29,6 +29,10 @@ .i-sdc-form-input:disabled{ .disabled; } + .i-sdc-form-input:read-only{ + opacity: 0.4; + cursor: auto; + } .property{ display: flex; diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html index ec9aaf1f7f..dde4e8f32e 100644 --- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html @@ -12,7 +12,7 @@ data-ng-pattern="MapKeyValidationPattern" data-ng-model-options="{ debounce: 200 }" data-ng-change="changeKeyOfMap(mapKeys[$index], $index,'mapKey'+fieldsPrefixName+$index);$event.stopPropagation();" - data-ng-disabled="readOnly" + data-ng-readonly="readOnly" data-required autofocus/> <div class="input-error" data-ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$dirty && parentFormObj['mapKey'+fieldsPrefixName+$index].$invalid"> @@ -26,7 +26,7 @@ <label class="i-sdc-form-label required">Value</label> <input class="i-sdc-form-input" ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" - data-ng-disabled="readOnly" + data-ng-readonly="readOnly" data-ng-model="valueObjRef[mapKeys[$index]]" type="text" name="mapValue{{fieldsPrefixName}}{{$index}}" diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less index 2480b626f2..6dc481dd26 100644 --- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less @@ -79,5 +79,10 @@ &>.data-type-fields-structure{ padding: 0; } + + .i-sdc-form-input:read-only{ + opacity: 0.4; + cursor: auto; + } } } diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less index 43d2d646a1..290a6468cb 100644 --- a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less @@ -45,9 +45,13 @@ margin-left: 22px; } - .i-sdc-form-input:disabled{ - .disabled; - &[type="text"]{ + .i-sdc-form-input{ + &:disabled{ + .disabled; + } + } + .property-name{ + .i-sdc-form-input:read-only{ opacity: 1 !important; background-color: @tlv_color_t; color:black; diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts index eadca96bfa..1367906e21 100644 --- a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts +++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts @@ -19,21 +19,17 @@ */ 'use strict'; -import {User, IUser, IAppConfigurtaion} from "app/models"; -import {IUserResourceClass, IUserResource} from "app/services"; +import {User, IUser, IAppConfigurtaion, IUserProperties} from "app/models"; +import { UserService } from "../../ng2/services/user.service"; export interface IUserHeaderDetailsScope extends ng.IScope { - name:string; - role:string; iconUrl:string; - UserResourceClass:IUserResourceClass; user:IUser; - sdcConfig:IAppConfigurtaion; initUser:Function; } export class UserHeaderDetailsDirective implements ng.IDirective { - constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private UserResourceClass:IUserResourceClass) { + constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService) { } scope = { @@ -50,23 +46,23 @@ export class UserHeaderDetailsDirective implements ng.IDirective { scope.initUser = ():void => { let defaultUserId:string; - let user:IUserResource = this.UserResourceClass.getLoggedinUser(); - if (!user) { + let userInfo:IUserProperties = this.userService.getLoggedinUser(); + if (!userInfo) { defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; - user = this.UserResourceClass.get({id: defaultUserId}, ():void => { - scope.user = new User(user); + this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => { + scope.user = new User(defaultUserInfo); }); } else { - scope.user = new User(user); + scope.user = new User(userInfo); } }; scope.initUser(); }; - public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, UserResourceClass:IUserResourceClass)=> { - return new UserHeaderDetailsDirective($http, sdcConfig, UserResourceClass); + public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService)=> { + return new UserHeaderDetailsDirective($http, sdcConfig, userService); }; } -UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService']; +UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2']; |