diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/workspace/tabs/composition')
8 files changed, 177 insertions, 43 deletions
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 5236259f30..46c2d2edf9 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 @@ -18,14 +18,18 @@ * ============LICENSE_END========================================================= */ 'use strict'; +import * as _ from "lodash"; import {Component, ComponentInstance, IAppMenu} from "app/models"; import {SharingService, CacheService, EventListenerService, LeftPaletteLoaderService} from "app/services"; import {ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS} from "app/utils"; import {IWorkspaceViewModelScope} from "../../workspace-view-model"; -import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response"; import {Resource} from "app/models/components/resource"; -import {ResourceType,ComponentType} from "../../../../utils/constants"; +import {ResourceType,ComponentType} from "app/utils/constants"; +import {ComponentServiceFactoryNg2} from "app/ng2/services/component-services/component.service.factory"; +import {ServiceGenericResponse} from "app/ng2/services/responses/service-generic-response"; +import {Service} from "app/models/components/service"; + export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { @@ -39,6 +43,8 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { version:string; isViewOnly:boolean; isLoadingRightPanel:boolean; + disabledTabs:boolean; + openVersionChangeModal(pathsToDelete:string[]):ng.IPromise<any>; onComponentInstanceVersionChange(component:Component); isComponentInstanceSelected():boolean; updateSelectedComponent():void @@ -49,6 +55,7 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { printScreen():void; isPNF():boolean; isConfiguration():boolean; + preventMoveTab(state: boolean):void; cacheComponentsInstancesFullData:Component; } @@ -70,7 +77,7 @@ export class CompositionViewModel { 'LeftPaletteLoaderService', 'ModalsHandler', 'EventListenerService', - 'ComponentServiceNg2' + 'ComponentServiceFactoryNg2' ]; constructor(private $scope:ICompositionViewModelScope, @@ -87,7 +94,7 @@ export class CompositionViewModel { private LeftPaletteLoaderService:LeftPaletteLoaderService, private ModalsHandler:ModalsHandler, private eventListenerService:EventListenerService, - private ComponentServiceNg2: ComponentServiceNg2) { + private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2) { this.$scope.setValidState(true); this.initScope(); @@ -99,9 +106,14 @@ export class CompositionViewModel { private initGraphData = ():void => { if(!this.$scope.component.componentInstances || !this.$scope.component.componentInstancesRelations ) { this.$scope.isLoading = true; - this.ComponentServiceNg2.getComponentInstancesAndRelation(this.$scope.component).subscribe((response:ComponentGenericResponse) => { + let service = this.ComponentServiceFactoryNg2.getComponentService(this.$scope.component); + service.getComponentCompositionData(this.$scope.component).subscribe((response:ComponentGenericResponse) => { + if (this.$scope.component.isService()) { + (<Service> this.$scope.component).forwardingPaths = (<ServiceGenericResponse>response).forwardingPaths; + } this.$scope.component.componentInstances = response.componentInstances; this.$scope.component.componentInstancesRelations = response.componentInstancesRelations; + this.$scope.component.policies = response.policies; this.$scope.isLoading = false; this.initComponent(); this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED); @@ -116,17 +128,15 @@ export class CompositionViewModel { private cacheComponentsInstancesFullData:Array<Component>; private initComponent = ():void => { - this.$scope.currentComponent = this.$scope.component; this.$scope.selectedComponent = this.$scope.currentComponent; this.updateUuidMap(); this.$scope.isViewOnly = this.$scope.isViewMode(); }; - private registerGraphEvents = (scope:ICompositionViewModelScope):void => { + private registerGraphEvents = (scope:ICompositionViewModelScope):void => { this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance); this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick); - }; private openUpdateComponentInstanceNameModal = ():void => { @@ -136,7 +146,7 @@ export class CompositionViewModel { }; private removeSelectedComponentInstance = ():void => { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_MULTIPLE_COMPONENTS); + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, this.$scope.currentComponent.selectedInstance) this.$scope.currentComponent.selectedInstance = null; this.$scope.selectedComponent = this.$scope.currentComponent; }; @@ -151,7 +161,6 @@ export class CompositionViewModel { }; private initScope = ():void => { - this.$scope.sharingService = this.sharingService; this.$scope.sdcMenu = this.sdcMenu; this.$scope.isLoading = false; @@ -231,20 +240,60 @@ export class CompositionViewModel { }; this.$scope.deleteSelectedComponentInstance = ():void => { - let state = "deleteInstance"; - let onOk = ():void => { - this.removeSelectedComponentInstance(); - //this.$scope.graphApi.deleteSelectedNodes(); - }; - let title:string = this.$scope.sdcMenu.alertMessages[state].title; - let message:string = this.$scope.sdcMenu.alertMessages[state].message.format([this.$scope.currentComponent.selectedInstance.name]); - this.ModalsHandler.openAlertModal(title, message).then(onOk); + const {currentComponent} = this.$scope; + const {title, message} = this.$scope.sdcMenu.alertMessages['deleteInstance']; + let modalText = message.format([currentComponent.selectedInstance.name]); + + if (currentComponent.isService()) { + const {forwardingPaths} = (<Service>currentComponent); + const instanceId = currentComponent.selectedInstance.uniqueId; + + const relatedPaths = _.filter(forwardingPaths, forwardingPath => { + const pathElements = forwardingPath.pathElements.listToscaDataDefinition; + return pathElements.find(path => path.fromNode === instanceId || path.toNode === instanceId); + }); + + if (relatedPaths.length) { + const pathNames = _.map(relatedPaths, path => path.name).join(', '); + modalText += `<p>The following service paths will be erased: ${pathNames}</p>`; + } + } + + this.ModalsHandler.openAlertModal(title, modalText).then(this.removeSelectedComponentInstance); + }; + + this.$scope.openVersionChangeModal = (pathsToDelete:string[]):ng.IPromise<any> => { + const {currentComponent} = this.$scope; + const {forwardingPaths} = <Service>currentComponent; + + const relatedPaths = _.filter(forwardingPaths, path => + _.find(pathsToDelete, id => + path.uniqueId === id + ) + ).map(path => path.name); + const pathNames = _.join(relatedPaths, ', ') || 'none'; + + const {title, message} = this.$scope.sdcMenu.alertMessages['upgradeInstance']; + return this.ModalsHandler.openConfirmationModal(title, message.format([pathNames]), false); }; this.$scope.onComponentInstanceVersionChange = (component:Component):void => { - this.$scope.currentComponent = component; - this.$scope.setComponent(this.$scope.currentComponent); - this.$scope.updateSelectedComponent(); + let onChange = () => { + this.$scope.currentComponent = component; + this.$scope.setComponent(this.$scope.currentComponent); + this.$scope.updateSelectedComponent(); + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_VERSION_CHANGED, this.$scope.currentComponent); + }; + + if (component.isService()) { + const service = this.ComponentServiceFactoryNg2.getComponentService(component); + service.getComponentCompositionData(component).subscribe((response:ServiceGenericResponse) => { + (<Service>component).forwardingPaths = response.forwardingPaths; + onChange(); + }); + } else { + onChange(); + } }; this.$scope.isPNF = (): boolean => { @@ -255,6 +304,10 @@ export class CompositionViewModel { return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.CONFIGURATION; }; + this.$scope.preventMoveTab = (state: boolean): void => { + this.$scope.disabledTabs = state; + }; + this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload); } 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 bfb2865348..fceb73b882 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 @@ -5,6 +5,8 @@ is-view-only="isViewOnly" is-loading="isLoading"></palette> + <ng2-palette-popup-panel></ng2-palette-popup-panel> + <composition-graph component="currentComponent" data-tests-id="canvas" is-view-only="isViewOnly" with-sidebar="displayDesignerRightSidebar"></composition-graph> </div> @@ -46,7 +48,8 @@ <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" data-ui-sref="workspace.composition.details" tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information" - data-tests-id="information-tab"> + data-tests-id="information-tab" + data-ng-class="{'disabled': disabledTabs}"> <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div> </button> <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"--> @@ -58,32 +61,38 @@ data-ui-sref="workspace.composition.deployment" tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts" data-tests-id="deployment-artifact-tab" - data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"> + data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" + data-ng-class="{'disabled': disabledTabs}"> <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div> </button> <button tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="{{selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'Properties and Attributes': 'Inputs'}}" class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" data-ui-sref="workspace.composition.properties" - data-tests-id="properties-and-attributes-tab"> + data-tests-id="properties-and-attributes-tab" + data-ng-class="{'disabled': disabledTabs}"> <div class="i-sdc-designer-sidebar-tab-icon sprite-new" ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div> </button> <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" data-ui-sref="workspace.composition.artifacts" data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" - tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts"> + tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts" + data-ng-class="{'disabled': disabledTabs}"> <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div> </button> <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" ui-sref="workspace.composition.relations" tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" - tooltip-content="Requirements and Capabilities"> + data-tests-id="requirements-and-capabilities" + tooltip-content="Requirements and Capabilities" + data-ng-class="{'disabled': disabledTabs}"> <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div> </button> <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api" - tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API"> + tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API" + data-ng-class="{'disabled': disabledTabs}"> <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div> </button> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less index 624ed03431..f351450e6d 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less @@ -1,3 +1,33 @@ + .i-sdc-designer-leftbar-section-popup-panel { + position: absolute; + display: inline-block; + background-color: white; + border: solid 1px #d2d2d2; + border-top: solid 3px #13a7df; + width: 140px; + height: 40px; + z-index: 10000; + } + + .i-sdc-designer-leftbar-section-popup-panel-group { + padding-left: 8px; + padding-top: 8px; + } + + .i-sdc-designer-leftbar-section-popup-panel-plus { + border-radius: 50%; + color: white; + background-color: #13a7df; + width: 20px; + text-align: center; + display: inline-block; + cursor: pointer; + } + + .i-sdc-designer-leftbar-section-popup-panel-title { + padding-left: 10px; + display: inline-block; + } .composition{ .sdc-workspace-container{ @@ -791,7 +821,16 @@ .g_1; line-height: 18px; } - + + .service-path-buttons { + margin-top: 12px; + position: absolute; + right: 70px; + top: 53px; + &.with-sidebar { + right: 380px; + } + } //Canvas search menu .w-sdc-search-menu { position:absolute; @@ -815,8 +854,8 @@ padding:2px 50px 2px 10px; transition:all 0.4s; } - .clear-search-x { - top: 17px + .search-bar-container { + position:relative; } &:not(:hover):not(.autocomplete-visible):not(.active){ diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts index b80b63cac9..627d20528e 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts @@ -19,6 +19,7 @@ */ 'use strict'; +import * as _ from "lodash"; import { ArtifactModel, Service, @@ -131,6 +132,7 @@ export class ResourceArtifactsViewModel { this.$scope.allowDeleteAndUpdateArtifactMap[artifact.artifactLabel] = this.allowDeleteAndUpdateArtifact(artifact); }); this.$scope.isLoading = false; + this.$scope.preventMoveTab(false); }; @@ -213,6 +215,7 @@ export class ResourceArtifactsViewModel { }; this.$scope.isLoading = true; + this.$scope.preventMoveTab(true); if (this.$scope.isComponentInstanceSelected()) { this.$scope.component.getComponentInstanceArtifactsByGroupType(this.$scope.component.selectedInstance.uniqueId, this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetInstanceArtifactsSuccess, onError); } else { 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 0d8d17ec73..6e3258f69b 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 @@ -19,11 +19,15 @@ */ 'use strict'; +import * as _ from "lodash"; import {Component} from "app/models"; import {GRAPH_EVENTS} from "app/utils"; import {LeftPaletteLoaderService, EventListenerService} from "app/services"; import {ICompositionViewModelScope} from "../../composition-view-model"; import {LeftPaletteComponent} from "../../../../../../models/components/displayComponent"; +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"; export interface IEditResourceVersion { allVersions:any; @@ -45,13 +49,16 @@ export class DetailsViewModel { static '$inject' = [ '$scope', 'LeftPaletteLoaderService', - 'EventListenerService' - + 'EventListenerService', + 'ComponentServiceFactoryNg2', + 'ServiceServiceNg2' ]; constructor(private $scope:IDetailsViewModelScope, private LeftPaletteLoaderService:LeftPaletteLoaderService, - private eventListenerService:EventListenerService) { + private eventListenerService:EventListenerService, + private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2, + private serviceService: ServiceServiceNg2) { this.initScope(); } @@ -112,22 +119,43 @@ export class DetailsViewModel { this.$scope.isLoading = true; this.$scope.$parent.isLoading = true; - let onSuccess = (component:Component)=> { + let service = <Service>this.$scope.currentComponent; + let {changeVersion} = this.$scope.editResourceVersion; + let componentUid:string = this.$scope.editResourceVersion.allVersions[changeVersion]; + + let onCancel = (error:any) => { this.$scope.isLoading = false; this.$scope.$parent.isLoading = false; - this.$scope.onComponentInstanceVersionChange(component); + this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion; - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_VERSION_CHANGED, this.$scope.currentComponent); + if (error) { + console.log(error); + } }; - let onFailed = (error:any)=> { - this.$scope.isLoading = false; - this.$scope.$parent.isLoading = false; - console.log(error); + let onUpdate = () => { + let onSuccess = (component:Component) => { + this.$scope.isLoading = false; + this.$scope.$parent.isLoading = false; + this.$scope.onComponentInstanceVersionChange(component); + }; + + this.$scope.currentComponent.changeComponentInstanceVersion(componentUid).then(onSuccess, onCancel); }; - let componentUid:string = this.$scope.editResourceVersion.allVersions[this.$scope.editResourceVersion.changeVersion]; - this.$scope.currentComponent.changeComponentInstanceVersion(componentUid).then(onSuccess, onFailed); + this.serviceService.checkComponentInstanceVersionChange(service, componentUid).subscribe((pathsToDelete:string[]) => { + if (pathsToDelete && pathsToDelete.length) { + this.$scope.isLoading = false; + this.$scope.$parent.isLoading = false; + this.$scope.$parent.openVersionChangeModal(pathsToDelete).then(() => { + this.$scope.isLoading = true; + this.$scope.$parent.isLoading = true; + onUpdate(); + }, onCancel); + } else { + onUpdate(); + } + }, onCancel); }; } } 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 5020c73df4..033c4668f3 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 @@ -26,7 +26,7 @@ data-ng-if="!isComponentInstanceSelected()" data-tests-id="rightTab_version" data-ng-bind="selectedComponent.version"></span> <ng-form name="editForm" data-ng-if="isComponentInstanceSelected()"> - <select data-ng-model="editResourceVersion.changeVersion" name="changeVersion" data-tests-id="changeVersion" data-ng-disabled="$parent.isViewOnly" + <select data-ng-model="editResourceVersion.changeVersion" name="changeVersion" data-tests-id="changeVersion" data-ng-disabled="$parent.isViewOnly || selectedComponent.uniqueId != editResourceVersion.allVersions[editResourceVersion.changeVersion]" class="i-sdc-designer-sidebar-section-content-item-value i-sdc-form-select" data-ng-class="{'minor': (editResourceVersion.changeVersion)%1}" data-ng-change="changeResourceVersion()"> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts index 99bbd8d7ac..efd5cfd84d 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts @@ -19,6 +19,7 @@ */ 'use strict'; +import * as _ from "lodash"; import { AttributeModel, AttributesGroup, diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts index 4c53edf6bd..ce44aaff50 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts @@ -19,6 +19,7 @@ */ 'use strict'; +import * as _ from "lodash"; import {ICompositionViewModelScope} from "../../composition-view-model"; import {CapabilitiesGroup, Requirement, RequirementsGroup} from "app/models"; import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; |