From 71d758215e0ae619968d46b85427f60bc3b1736e Mon Sep 17 00:00:00 2001 From: aribeiro Date: Wed, 13 May 2020 13:49:31 +0100 Subject: Add support for directives on VFC This change also updates the directives values according to Tosca 1.3 spec Issue-ID: SDC-3074 Change-Id: Ia6a68c9a23a71a2c17ba2c006990342811aa7b4e Signed-off-by: aribeiro --- .../componentsInstances/componentInstance.ts | 25 +++--- .../componentsInstances/fullComponentInstance.ts | 18 ----- .../composition-ci-node-vfc.ts | 45 ++++++++--- .../src/app/models/graph/nodes/nodes-factory.ts | 20 ++++- .../logic/service-dependencies/directive-option.ts | 15 ++++ .../service-dependencies.component.html | 67 +++++++++------- .../service-dependencies.component.less | 6 ++ .../service-dependencies.component.ts | 92 +++++++++++++++------- .../service-dependencies.module.ts | 1 - .../sdc-element-icon/sdc-element-icon.component.ts | 1 + .../pages/composition/common/store/graph.state.ts | 2 +- .../style/component-instances-nodes-style.ts | 15 ++++ .../service-paths-list.component.ts | 2 +- .../composition-panel.component.spec.ts.snap | 1 + .../panel/composition-panel.component.html | 23 ++++-- .../panel/composition-panel.component.less | 1 + .../panel/composition-panel.component.ts | 8 +- .../composition/panel/panel-tabs/panel-tabs.less | 2 +- .../topology-template.service.ts | 4 +- 19 files changed, 239 insertions(+), 109 deletions(-) create mode 100644 catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts (limited to 'catalog-ui/src/app') diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts index d3a99e5390..e311589637 100644 --- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts +++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts @@ -34,6 +34,7 @@ import { import {ResourceType, ComponentType} from "../../utils/constants"; import {Capability} from "../capability"; import {Requirement} from "../requirement"; +import {DirectivesEnum} from "../../ng2/components/logic/service-dependencies/directive-option"; export interface IComponentInstance { @@ -104,10 +105,6 @@ export class ComponentInstance implements IComponentInstance{ public originArchived:boolean; public directives: string[]; - DIRECTIVES_TYPES = { - SELECTABLE: 'selectable' - }; - constructor(componentInstance?:ComponentInstance) { if (componentInstance) { @@ -161,6 +158,10 @@ export class ComponentInstance implements IComponentInstance{ return this.originType === ComponentType.SERVICE_PROXY; } + public isVFC = ():boolean => { + return this.originType === ResourceType.VFC; + } + public getComponentUid = ():string => { return this.isServiceProxy()? this.sourceModelUid : this.componentUid; } @@ -229,17 +230,23 @@ export class ComponentInstance implements IComponentInstance{ return this.iconSprite + ' ' + this.icon; } public isDependent = () : boolean => { - return this.directives && this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE) !== -1; + return Array.isArray(this.directives) && this.directives.length > 0; + } + + public markAsSelect = () : void => { + this.directives.push(DirectivesEnum.SELECT); } - public markAsDependent = () : void => { - this.directives.push(this.DIRECTIVES_TYPES.SELECTABLE); + public markAsSubstitute = () : void => { + this.directives.push(DirectivesEnum.SUBSTITUTE); } - public unmarkAsDependent = () : void => { - let index = this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE); + public unmarkAsDependent = (actualDirectiveValue: string) : void => { + console.info("[START] this.directives: ", this.directives) + let index = this.directives.indexOf(actualDirectiveValue); if(index >= 0) { this.directives.splice(index, 1); } + console.info("[STOP] this.directives: ", this.directives) } } diff --git a/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts b/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts index ce5aa1dae9..ab9015d949 100644 --- a/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts +++ b/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts @@ -25,10 +25,6 @@ export class FullComponentInstance extends ComponentInstance { public isResourceInstance: boolean; public directives: string[]; - DIRECTIVES_TYPES = { - SELECTABLE: 'selectable' - }; - //service public serviceApiArtifacts:ArtifactGroupModel; public serviceType:string; @@ -92,19 +88,5 @@ export class FullComponentInstance extends ComponentInstance { public isService = ():boolean => { return this.isServiceInstance; } - public isDependent = () : boolean => { - return this.directives && this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE) !== -1; - } - - public markAsDependent = () : void => { - this.directives.push(this.DIRECTIVES_TYPES.SELECTABLE); - } - - public unmarkAsDependent = () : void => { - const index = this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE); - if(index >= 0) { - this.directives.splice(index, 1); - } - } } \ No newline at end of file diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts index 4c16661548..ce95486ce3 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts @@ -17,19 +17,44 @@ * limitations under the License. * ============LICENSE_END========================================================= */ -import {CompositionCiNodeBase} from "./composition-ci-node-base"; +import {ImagesUrl, GraphUIObjects} from "../../../../utils/constants"; +import {ComponentInstance, CompositionCiNodeBase} from "../../../../models"; import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service"; -import {ComponentInstance} from "../../../componentsInstances/componentInstance"; -import {ImagesUrl} from "../../../../utils/constants"; export class CompositionCiNodeVfc extends CompositionCiNodeBase { - constructor(instance:ComponentInstance, imageCreator:ImageCreatorService) { - super(instance, imageCreator); - this.initVfc(); - } + private isDependent: boolean; + private originalImg: string; + + constructor(instance: ComponentInstance, imageCreator: ImageCreatorService) { + super(instance, imageCreator); + this.isDependent = instance.isDependent(); + this.initVfc(); + } - private initVfc():void { - this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; - this.img = this.imagesPath + this.componentInstance.icon + '.png'; + private initVfc(): void { + this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; + this.img = this.imagesPath + this.componentInstance.icon + '.png'; + this.originalImg = this.img; + this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; + this.classes = 'vfc-node'; + if (this.archived) { + this.classes = this.classes + ' archived'; + return; + } + if (this.isDependent) { + this.classes += ' dependent'; + } + if (!this.certified) { + this.classes = this.classes + ' not-certified'; } + } + + public initUncertifiedDependentImage(node:Cy.Collection, nodeMinSize:number):string { + return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'uncertified_dependent.png'); + } + + public initDependentImage(node:Cy.Collection, nodeMinSize:number):string { + return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'dependent.png'); + } + } diff --git a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts index bcd2f7e111..fbcd479603 100644 --- a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts +++ b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts @@ -19,8 +19,21 @@ */ 'use strict'; -import {CompositionCiNodeUcpeCp, Module, ModuleNodeBase, CompositionCiNodeVf, CompositionCiNodeVl, CompositionCiNodeCp, CompositionCiNodeConfiguration, - NodeUcpe, CompositionCiNodeService,CompositionCiNodeServiceProxy, CompositionCiNodeBase, ComponentInstance} from "./../../../models"; +import { + CompositionCiNodeUcpeCp, + Module, + ModuleNodeBase, + CompositionCiNodeVf, + CompositionCiNodeVl, + CompositionCiNodeCp, + CompositionCiNodeConfiguration, + NodeUcpe, + CompositionCiNodeService, + CompositionCiNodeServiceProxy, + CompositionCiNodeBase, + ComponentInstance, + CompositionCiNodeVfc +} from "./../../../models"; import {ComponentType, ResourceType} from "../../../utils/constants"; import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service"; import {Injectable} from "@angular/core"; @@ -42,6 +55,9 @@ export class NodesFactory { if (instance.originType === ComponentType.SERVICE_PROXY) { return new CompositionCiNodeServiceProxy(instance, this.imageCreator); } + if (instance.originType == ResourceType.VFC) { + return new CompositionCiNodeVfc(instance, this.imageCreator); + } if (instance.originType === ResourceType.CP) { return new CompositionCiNodeCp(instance, this.imageCreator); } diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts new file mode 100644 index 0000000000..f2c4b1f895 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts @@ -0,0 +1,15 @@ +export enum DirectivesEnum { + SELECT = 'select', + SELECTABLE = 'selectable', + SUBSTITUTE = 'substitute', + SUBSTITUTABLE = 'substitutable', +} + +export namespace DirectiveValue { + + export function values() { + return Object.keys(DirectivesEnum).filter( + (type) => isNaN(type) && type !== 'values' + ); + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html index d71a4fbecb..833f6f3c62 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html @@ -1,35 +1,44 @@
- -
- - -
-
+ +
+ +
-
-
-
- {{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}} -
- -
-
+
+ + + +
+ +
-
- +
+
+
+ {{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}}
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less index 2fccfb414b..21c2b3aadc 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less @@ -21,12 +21,18 @@ .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content { opacity: 0.5; } + .delete-btn { + background-position: -137px -415px; + width: 24px; + height: 24px + } loader { top: 20px; } } + .i-sdc-designer-sidebar-section-content-item-rules-section { .i-sdc-designer-sidebar-section-content-item-rule { border-bottom: 1px solid @main_color_o; diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts index fa75a275aa..f3fd36364a 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts @@ -29,6 +29,7 @@ import { TranslateService } from 'app/ng2/shared/translator/translate.service'; import { ComponentMetadata } from '../../../../models/component-metadata'; import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces'; import { TopologyTemplateService } from '../../../services/component-services/topology-template.service'; +import {DirectivesEnum, DirectiveValue} from "./directive-option"; export class ConstraintObject { servicePropertyName: string; @@ -78,30 +79,34 @@ export const OPERATOR_TYPES = { // tslint:disable-next-line:max-classes-per-file class I18nTexts { - static uncheckModalTitle: string; - static uncheckModalText: string; + static removeDirectiveModalTitle: string; + static removeDirectiveModalText: string; + static updateDirectiveModalTitle: string; + static updateDirectiveModalText: string; static modalApprove: string; static modalCancel: string; static modalCreate: string; static modalSave: string; static modalDelete: string; - static addRuleTxt: string; - static updateRuleTxt: string; - static deleteRuleTxt: string; - static deleteRuleMsg: string; + static addNodeFilterTxt: string; + static updateNodeFilterTxt: string; + static deleteNodeFilterTxt: string; + static deleteNodeFilterMsg: string; public static translateTexts(translateService) { - I18nTexts.uncheckModalTitle = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TITLE'); - I18nTexts.uncheckModalText = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TEXT'); + I18nTexts.removeDirectiveModalTitle = translateService.translate('DIRECTIVES_AND_NODE_FILTER_REMOVE_TITLE'); + I18nTexts.removeDirectiveModalText = translateService.translate('DIRECTIVES_AND_NODE_FILTER_REMOVE_TEXT'); + I18nTexts.updateDirectiveModalTitle = translateService.translate('DIRECTIVES_AND_NODE_FILTER_UPDATE_TITLE'); + I18nTexts.updateDirectiveModalText = translateService.translate('DIRECTIVES_AND_NODE_FILTER_UPDATE_TEXT'); I18nTexts.modalApprove = translateService.translate('MODAL_APPROVE'); I18nTexts.modalCancel = translateService.translate('MODAL_CANCEL'); I18nTexts.modalCreate = translateService.translate('MODAL_CREATE'); I18nTexts.modalSave = translateService.translate('MODAL_SAVE'); I18nTexts.modalDelete = translateService.translate('MODAL_DELETE'); - I18nTexts.addRuleTxt = translateService.translate('SERVICE_DEPENDENCY_ADD_RULE'); - I18nTexts.updateRuleTxt = translateService.translate('SERVICE_DEPENDENCY_UPDATE_RULE'); - I18nTexts.deleteRuleTxt = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE'); - I18nTexts.deleteRuleMsg = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE_MSG'); + I18nTexts.addNodeFilterTxt = translateService.translate('DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER'); + I18nTexts.updateNodeFilterTxt = translateService.translate('DIRECTIVES_AND_NODE_FILTER_UPDATE_NODE_FILTER'); + I18nTexts.deleteNodeFilterTxt = translateService.translate('DIRECTIVES_AND_NODE_FILTER_DELETE_NODE_FILTER'); + I18nTexts.deleteNodeFilterMsg = translateService.translate('DIRECTIVES_AND_NODE_FILTER_DELETE_NODE_FILTER_MSG'); } } @@ -127,6 +132,7 @@ export class ServiceDependenciesComponent { @Input() selectedInstanceSiblings: ServiceInstanceObject[]; @Input() selectedInstanceConstraints: ConstraintObject[] = []; @Input() selectedInstanceProperties: PropertyBEModel[] = []; + @Input() directiveValues: any = DirectiveValue; @Output() updateRulesListEvent: EventEmitter = new EventEmitter(); @Output() loadRulesListEvent:EventEmitter = new EventEmitter(); @Output() dependencyStatus = new EventEmitter(); @@ -161,10 +167,27 @@ export class ServiceDependenciesComponent { } } + private getActualDirectiveValue = (): string => { + return this.currentServiceInstance.directives.length > 0 ? this.currentServiceInstance.directives[0] : ""; + } + + private isServiceProxy = (): boolean => { + return this.currentServiceInstance.isServiceProxy(); + } + public openRemoveDependencyModal = (): ComponentRef => { const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency); const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); - const modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]); + const modalModel: ModalModel = new ModalModel('sm', I18nTexts.removeDirectiveModalTitle, + I18nTexts.removeDirectiveModalText, [actionButton, cancelButton]); + return this.modalServiceNg2.createCustomModal(modalModel); + } + + public openUpdateDependencyModal = (): ComponentRef => { + const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency); + const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); + const modalModel: ModalModel = new ModalModel('sm', I18nTexts.updateDirectiveModalTitle, + I18nTexts.updateDirectiveModalText, [actionButton, cancelButton]); return this.modalServiceNg2.createCustomModal(modalModel); } @@ -183,7 +206,7 @@ export class ServiceDependenciesComponent { this.isLoading = true; const isDepOrig = this.isDependent; const rulesListOrig = this.rulesList; - this.currentServiceInstance.unmarkAsDependent(); + this.currentServiceInstance.unmarkAsDependent(this.getActualDirectiveValue()); this.updateComponentInstance(isDepOrig, rulesListOrig); } @@ -192,25 +215,39 @@ export class ServiceDependenciesComponent { this.modalServiceNg2.closeCurrentModal(); } - onCheckDependency = () => { - const isDepOrig = this.isDependent; - const rulesListOrig = this.rulesList; - this.currentServiceInstance.markAsDependent(); + onOptionsSelected(event: any) { + const newDirectiveValue = event.target.value; + if (newDirectiveValue.toLowerCase() !== this.getActualDirectiveValue()) { + const rulesListOrig = this.rulesList; + this.setDirectiveValue(newDirectiveValue); + this.rulesList = []; + this.updateComponentInstance(this.isDependent, rulesListOrig); + } + } + + private onRemoveDirective() { + this.openRemoveDependencyModal().instance.open(); this.rulesList = []; - this.updateComponentInstance(isDepOrig, rulesListOrig); } - onMarkAsDependent() { - if (!this.currentServiceInstance.isDependent()) { - this.onCheckDependency(); + private setDirectiveValue(newDirectiveValue: string) { + if (this.isDependent) { + this.openUpdateDependencyModal().instance.open(); + } + if (DirectivesEnum.SELECT == newDirectiveValue.toLowerCase() || + DirectivesEnum.SELECTABLE == newDirectiveValue.toLowerCase()) { + this.currentServiceInstance.markAsSelect(); } else { - this.openRemoveDependencyModal().instance.open(); + this.currentServiceInstance.markAsSubstitute(); } } updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) { this.isLoading = true; - this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => { + this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId, + this.compositeService.componentType, + this.currentServiceInstance) + .subscribe((updatedServiceIns: ComponentInstance) => { this.currentServiceInstance = new ComponentInstance(updatedServiceIns); this.isDependent = this.currentServiceInstance.isDependent(); this.dependencyStatus.emit(this.isDependent); @@ -229,7 +266,7 @@ export class ServiceDependenciesComponent { onAddRule() { const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal); const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled); - const modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard'); + const modalModel: ModalModel = new ModalModel('l', I18nTexts.addNodeFilterTxt, '', [saveButton, cancelButton], 'standard'); this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); this.modalServiceNg2.addDynamicContentToModal( this.modalInstance, @@ -249,7 +286,7 @@ export class ServiceDependenciesComponent { onSelectRule(index: number) { const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal); const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled); - const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard'); + const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateNodeFilterTxt, '', [saveButton, cancelButton], 'standard'); this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); this.modalServiceNg2.addDynamicContentToModal( this.modalInstance, @@ -328,7 +365,8 @@ export class ServiceDependenciesComponent { } openDeleteModal = (index: number) => { - this.modalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg, + this.modalServiceNg2.createActionModal(I18nTexts.deleteNodeFilterTxt, I18nTexts.deleteNodeFilterMsg, I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open(); } + } diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts index 5e2d03d26c..10cd141a87 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts @@ -1,4 +1,3 @@ - import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts index baadbd8e02..dd48af2f89 100644 --- a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts @@ -51,6 +51,7 @@ export class SdcElementIconComponent { case SdcElementType.POLICY: this.elementIcon = new ElementIcon("policy", "resources_24", "darkBlue2", 'white', 'rectangle'); break; + case ResourceType.VFC: case ResourceType.CP: case ResourceType.VL: this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", '', '', 'medium'); diff --git a/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts index d58bb446df..7c352a61dc 100644 --- a/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts +++ b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts @@ -39,7 +39,7 @@ export class GraphState { setSelectedComponent({dispatch, getState, patchState}:StateContext, action: SetSelectedComponentAction) { const state:CompositionStateModel = getState(); - + patchState({ panelLoading: true }); if(action.payload.component instanceof ComponentInstance){ diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts index cc9cac16e6..4a975dab77 100644 --- a/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts +++ b/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts @@ -134,6 +134,21 @@ export class ComponentInstanceNodesStyle { 'overlay-opacity': 0 } }, + { + selector: '.vfc-node', + css: { + 'background-color': 'transparent', + 'label': 'data(displayName)', + 'background-image': 'data(img)', + 'width': 64, + 'height': 64, + 'text-valign': 'bottom', + 'text-halign': 'center', + 'background-opacity': 0, + 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR, + 'overlay-opacity': 0 + } + }, { selector: '.ucpe-cp', css: { diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts index 81abe42cb3..fc31cd9dc3 100644 --- a/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts @@ -55,7 +55,7 @@ export class ServicePathsListComponent { }); this.onAddServicePath = this.input.onCreateServicePath; this.onEditServicePath = this.input.onEditServicePath; - this.isViewOnly = this.input.isViewOnly; + this.isViewOnly = this.input.isViewOnly; } deletePath = (id:string):void => { diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap index 5f10806315..fdede9d09e 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap +++ b/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap @@ -9,6 +9,7 @@ exports[`composition-panel component should match current snapshot of compositio isConfiguration={[Function Function]} isPNF={[Function Function]} selectedComponentIsServiceProxyInstance={[Function Function]} + selectedComponentIsVfcInstance={[Function Function]} setActive={[Function Function]} store={[Function Store]} toggleSidebarDisplay={[Function Function]} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html index bd90b9a814..5511dc0ea8 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html +++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html @@ -1,17 +1,26 @@ - + +
- - + + + +
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less index 776ef68944..124d606079 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less +++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less @@ -14,6 +14,7 @@ .component-details-panel-tabs /deep/ sdc-tabs { display:flex; flex-direction:column; + width: 100%; /deep/ sdc-tab { display: flex; diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts index c5ea41bcd1..348dc9f8c1 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts @@ -53,7 +53,7 @@ const tabs = { inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'}, settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'}, consumption: {titleIcon: 'api-o', component: ServiceConsumptionTabComponent, input: {title: 'OPERATION CONSUMPTION'}, isActive: false, tooltipText: 'Service Consumption'}, - dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'SERVICE DEPENDENCIES'}, isActive: false, tooltipText: 'Service Dependencies'} + dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'DIRECTIVES AND NODE FILTER'}, isActive: false, tooltipText: 'Service Dependencies'} }; @Component({ @@ -144,6 +144,8 @@ export class CompositionPanelComponent { if (component.isService() && this.selectedComponentIsServiceProxyInstance()) { this.tabs.push(tabs.consumption); this.tabs.push(tabs.dependencies); + } else if (component.isResource() && this.selectedComponentIsVfcInstance()) { + this.tabs.push(tabs.dependencies); } } @@ -168,4 +170,8 @@ export class CompositionPanelComponent { private selectedComponentIsServiceProxyInstance = (): boolean => { return this.isComponentInstanceSelected() && this.selectedComponent.isServiceProxy(); } + + private selectedComponentIsVfcInstance = (): boolean => { + return this.isComponentInstanceSelected() && this.selectedComponent.isVFC(); + } } diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less index b3c03f85c5..16767c2211 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less @@ -20,7 +20,7 @@ border-left: none; border-bottom: none; height: 36px; - width: 60px; + width: 100%; display: flex; align-content: center; justify-content: center; diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts index 0abb163404..6d19ed8bcc 100644 --- a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts @@ -233,8 +233,8 @@ export class TopologyTemplateService { return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade); } - updateComponentInstance(componentMetaDataId: string, componentInstance:ComponentInstance): Observable { - return this.http.post(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance); + updateComponentInstance(componentMetaDataId: string, componentType: string, componentInstance:ComponentInstance): Observable { + return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance); } updateMultipleComponentInstances(componentId: string, componentType: string, instances: ComponentInstance[]): Observable { -- cgit 1.2.3-korg