From c2ce914541e694c7d1c8853b88936095e8b9ede4 Mon Sep 17 00:00:00 2001 From: miriame Date: Wed, 13 Feb 2019 15:17:26 +0200 Subject: Add 'Service Dependencies' tab in composition page Issue-ID: SDC-1987 Change-Id: Ib5b688c12234c81fe6f89b2b5d37dd16a75b0db9 Signed-off-by: miriame --- .../tabs/composition/composition-view-model.ts | 48 +++++--- .../tabs/composition/composition-view.html | 10 +- .../composition/tabs/details/details-view-model.ts | 46 +++++++- .../composition/tabs/details/details-view.html | 2 +- .../service-dependencies-view-model.ts | 125 +++++++++++++++++++++ .../service-dependencies-view.html | 25 +++++ 6 files changed, 235 insertions(+), 21 deletions(-) create mode 100644 catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts create mode 100644 catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html (limited to 'catalog-ui/src/app/view-models') diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts index a77377bac4..2270a7b06e 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts @@ -71,6 +71,11 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { isPNF():boolean; isConfiguration():boolean; preventMoveTab(state: boolean):void; + registerCreateInstanceEvent(callback: Function):void; + unregisterCreateInstanceEvent():void; + registerChangeComponentInstanceNameEvent(callback: Function):void; + unregisterChangeComponentInstanceNameEvent():void; + ComponentServiceNg2:ComponentServiceNg2, cacheComponentsInstancesFullData:Component; } @@ -116,7 +121,7 @@ export class CompositionViewModel { private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2, private ComponentServiceNg2:ComponentServiceNg2, private Notification:any - ) { + ) { this.$scope.setValidState(true); this.initScope(); @@ -165,12 +170,12 @@ export class CompositionViewModel { this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance); this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, scope.setSelectedZoneInstance); this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_START, () => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_START, () => { scope.isCanvasTagging = true; this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, true, this.showUnsavedChangesAlert); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_END, () => { - scope.isCanvasTagging = false; + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_END, () => { + scope.isCanvasTagging = false; this.resetUnsavedChanges(); }); this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, scope.changeZoneInstanceName); @@ -184,13 +189,13 @@ export class CompositionViewModel { title: "Unsaved Changes", size: 'sm', type: 'custom', - + buttons: [ {id: 'cancelButton', text: 'Cancel', type: 'secondary', size: 'xsm', closeModal: true, callback: () => reject()}, {id: 'discardButton', text: 'Discard', type: 'secondary', size: 'xsm', closeModal: true, callback: () => { this.resetUnsavedChanges(); resolve()}}, {id: 'saveButton', text: 'Save', type: 'primary', size: 'xsm', closeModal: true, callback: () => { reject(); this.saveUnsavedChanges(afterSave); }} - ] as IModalButtonComponent[] - }, UnsavedChangesComponent, { isValidChangedData: true}); + ] as IModalButtonComponent[] + }, UnsavedChangesComponent, { isValidChangedData: true}); }); return deferred; @@ -225,7 +230,7 @@ export class CompositionViewModel { testId: "renameInstanceModal", buttons: [ {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false}, - {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true} + {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true} ] }; @@ -274,7 +279,7 @@ export class CompositionViewModel { } else { this.ModalServiceSdcUI.closeModal(); } - + }; private removeSelectedComponentInstance = ():void => { @@ -372,12 +377,12 @@ export class CompositionViewModel { this.$scope.selectedZoneInstance = null; this.$scope.updateSelectedComponent(); - - - if (this.$state.current.name === 'workspace.composition.api') { this.$state.go('workspace.composition.details'); } + if(!selectedComponent.isServiceProxy() && (this.$state.current.name === 'workspace.composition.consumption' || this.$state.current.name === 'workspace.composition.dependencies')) { + this.$state.go('workspace.composition.details'); + } }; this.$scope.setSelectedZoneInstance = (zoneInstance: ZoneInstance): void => { @@ -390,7 +395,7 @@ export class CompositionViewModel { this.$scope.selectedZoneInstance = null; this.$scope.selectedComponent = this.$scope.currentComponent; - if (this.$state.current.name === 'workspace.composition.api') { + if (this.$state.current.name === 'workspace.composition.api' || this.$state.current.name === 'workspace.composition.consumption' || this.$state.current.name === 'workspace.composition.dependencies') { this.$state.go('workspace.composition.details'); } @@ -406,7 +411,7 @@ export class CompositionViewModel { this.$scope.changeZoneInstanceName = (newName:string):void => { this.$scope.selectedZoneInstance.instanceData.name = newName; }; - + this.$scope.deleteSelectedComponentInstance = ():void => { const {currentComponent} = this.$scope; const {title, message} = this.$scope.sdcMenu.alertMessages['deleteInstance']; @@ -477,5 +482,20 @@ export class CompositionViewModel { this.eventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload); + this.$scope.registerCreateInstanceEvent = (callback: Function): void => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE, callback); + }; + + this.$scope.unregisterCreateInstanceEvent = (): void => { + this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE); + }; + + this.$scope.registerChangeComponentInstanceNameEvent = (callback: Function): void => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, callback); + }; + + this.$scope.unregisterChangeComponentInstanceNameEvent = (): void => { + this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED); + }; } } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html index 75265d9137..a571fdca0d 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html @@ -103,7 +103,7 @@ +
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts index e389395142..36ceabfb42 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts @@ -20,7 +20,7 @@ 'use strict'; import * as _ from "lodash"; -import {Component} from "app/models"; +import {Component, ModalModel, ButtonModel} from "app/models"; import {GRAPH_EVENTS} from "app/utils"; import {LeftPaletteLoaderService, EventListenerService} from "app/services"; import {ICompositionViewModelScope} from "../../composition-view-model"; @@ -28,6 +28,7 @@ import {LeftPaletteComponent} from "../../../../../../models/components/displayC import {ComponentServiceFactoryNg2} from "app/ng2/services/component-services/component.service.factory"; import {ServiceServiceNg2} from 'app/ng2/services/component-services/service.service'; import {Service} from "app/models/components/service"; +import {ModalService} from 'app/ng2/services/modal.service'; export interface IEditResourceVersion { allVersions:any; @@ -41,24 +42,31 @@ interface IDetailsViewModelScope extends ICompositionViewModelScope { editForm:ng.IFormController; editResourceVersion:IEditResourceVersion; - changeResourceVersion():void; + onChangeResourceVersion():void; + alertBeforeChangeResourceVersion():void; + changeVersion():void; + cancelChangeResourceVersion():void; } export class DetailsViewModel { static '$inject' = [ '$scope', + '$filter', 'LeftPaletteLoaderService', 'EventListenerService', 'ComponentServiceFactoryNg2', - 'ServiceServiceNg2' + 'ServiceServiceNg2', + 'ModalServiceNg2' ]; constructor(private $scope:IDetailsViewModelScope, + private $filter:ng.IFilterService, private LeftPaletteLoaderService:LeftPaletteLoaderService, private eventListenerService:EventListenerService, private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2, - private serviceService: ServiceServiceNg2) { + private serviceService: ServiceServiceNg2, + private ModalServiceNg2: ModalService) { this.initScope(); } @@ -115,7 +123,35 @@ export class DetailsViewModel { } }); - this.$scope.changeResourceVersion = ():void => { + this.$scope.onChangeResourceVersion = ():void => { + if(this.$scope.isComponentInstanceSelected() && this.$scope.currentComponent.selectedInstance.isServiceProxy()) { + this.$scope.alertBeforeChangeResourceVersion(); + } + else { + this.$scope.changeVersion(); + } + }; + + this.$scope.alertBeforeChangeResourceVersion = ():void => { + let modalApproveTxt:string = this.$filter('translate')("MODAL_APPROVE"); + let modalCancelTxt:string = this.$filter('translate')("MODAL_CANCEL"); + let changeVersionModalTitle:string = this.$filter('translate')("DETAILS_TAB_CHANGE_VERSION_MODAL_TITLE"); + let changeVersionModalMsg:string = this.$filter('translate')("DETAILS_TAB_CHANGE_VERSION_MODAL_MSG"); + + let actionButton: ButtonModel = new ButtonModel(modalApproveTxt, 'blue', this.$scope.changeVersion); + let cancelButton: ButtonModel = new ButtonModel(modalCancelTxt, 'grey', this.$scope.cancelChangeResourceVersion); + let modalModel: ModalModel = new ModalModel('sm', changeVersionModalTitle, changeVersionModalMsg, [actionButton, cancelButton]); + let customModal = this.ModalServiceNg2.createCustomModal(modalModel); + customModal.instance.open(); + }; + + this.$scope.cancelChangeResourceVersion = () => { + this.ModalServiceNg2.closeCurrentModal(); + this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion; + }; + + this.$scope.changeVersion = ():void => { + this.ModalServiceNg2.closeCurrentModal(); this.$scope.isLoading = true; this.$scope.$parent.isLoading = true; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html index 145943e9fd..db5322a859 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html @@ -46,7 +46,7 @@ data-ng-disabled="$parent.isViewOnly || selectedComponent.uniqueId != editResourceVersion.allVersions[editResourceVersion.changeVersion] || selectedComponent.archived" class="i-sdc-designer-sidebar-section-content-item-value i-sdc-form-select" data-ng-class="{'minor': (editResourceVersion.changeVersion)%1, 'disabled':selectedComponent.archived}" - data-ng-change="changeResourceVersion()"> + data-ng-change="onChangeResourceVersion()"> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts new file mode 100644 index 0000000000..b634e6021f --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts @@ -0,0 +1,125 @@ +/*! + * Copyright © 2016-2018 European Support Limited + * + * 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. + */ + + +import {ICompositionViewModelScope} from "../../composition-view-model"; +import {Service, ComponentInstance, PropertiesGroup, ServiceInstanceObject, PropertyBEModel} from 'app/models'; +import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; +import {ConstraintObject} from "app/ng2/components/logic/service-dependencies/service-dependencies.component"; +import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response'; +import {DEPENDENCY_EVENTS} from "app/utils/constants"; +import {EventListenerService} from 'app/services'; + +interface IServiceDependenciesViewModelScope extends ICompositionViewModelScope { + service: Service; + selectedInstanceSiblings: Array; + componentInstancesConstraints: Array; + selectedInstanceConstraints: Array; + selectedInstanceProperties: Array; + updateSelectedInstanceConstraints(constraintsList:Array): void; + loadConstraints(): void; + componentInstanceProperties: PropertiesGroup; + notifyDependencyEventsObserver: Function; +} + + + +export class ServiceDependenciesViewModel { + + static '$inject' = [ + '$scope', + 'ComponentServiceNg2', + 'EventListenerService' + ]; + + constructor(private $scope:IServiceDependenciesViewModelScope, private ComponentServiceNg2:ComponentServiceNg2, private eventListenerService: EventListenerService) { + this.$scope.service = this.$scope.currentComponent; + this.$scope.notifyDependencyEventsObserver = this.notifyDependencyEventsObserver; + this.initInstancesWithProperties(); + this.loadConstraints(); + + this.initScope(); + } + + private initInstancesWithProperties = ():void => { + this.ComponentServiceNg2.getComponentInstanceProperties(this.$scope.currentComponent).subscribe((genericResponse:ComponentGenericResponse) => { + this.$scope.componentInstanceProperties = genericResponse.componentInstancesProperties; + this.updateInstanceAttributes(); + }); + } + + private updateInstanceAttributes = ():void => { + if (this.$scope.isComponentInstanceSelected() && this.$scope.componentInstanceProperties) { + let instancesMappedList = this.$scope.service.componentInstances.map(coInstance => new ServiceInstanceObject({ + id: coInstance.uniqueId, + name: coInstance.name, + properties: this.$scope.componentInstanceProperties[coInstance.uniqueId] || [] + })); + this.$scope.selectedInstanceProperties = this.$scope.componentInstanceProperties[this.$scope.currentComponent.selectedInstance.uniqueId]; + this.$scope.selectedInstanceSiblings = instancesMappedList.filter(coInstance => coInstance.id !== this.$scope.currentComponent.selectedInstance.uniqueId); + } + } + + private initScope = ():void => { + this.$scope.$watch('currentComponent.selectedInstance', (newInstance:ComponentInstance):void => { + if (angular.isDefined(newInstance) && this.$scope.componentInstancesConstraints) { + this.updateInstanceAttributes(); + this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId] ? + this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties : + []; + } + }); + this.$scope.$watch('componentInstancesConstraints', (constraints: Array):void => { + if (angular.isDefined(constraints)) { + if(this.$scope.isComponentInstanceSelected()) { + this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId] ? + this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties || [] : + []; + } + } + }); + + this.$scope.updateSelectedInstanceConstraints = (constraintsList:Array):void => { + this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties = constraintsList; + this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties; + } + + this.$scope.loadConstraints = ():void => { + this.loadConstraints(); + } + + this.$scope.registerCreateInstanceEvent(() => { + this.initInstancesWithProperties(); + }); + + this.$scope.registerChangeComponentInstanceNameEvent((updatedComponentInstance) => { + this.$scope.currentComponent.selectedInstance = updatedComponentInstance; + }); + + this.$scope.$on('$destroy', this.$scope.unregisterCreateInstanceEvent); + this.$scope.$on('$destroy', this.$scope.unregisterChangeComponentInstanceNameEvent); + } + + private loadConstraints = ():void => { + this.ComponentServiceNg2.getServiceFilterConstraints(this.$scope.service).subscribe((response) => { + this.$scope.componentInstancesConstraints = response.nodeFilterData; + }); + } + + public notifyDependencyEventsObserver = (isChecked: boolean):void => { + this.eventListenerService.notifyObservers(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, isChecked); + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html new file mode 100644 index 0000000000..ba50994529 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html @@ -0,0 +1,25 @@ + + +
+ + Service Dependencies +
+ +
+
+ + +
+
+
+ \ No newline at end of file -- cgit 1.2.3-korg