diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition')
5 files changed, 372 insertions, 267 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less index 4c7f8aba48..ac917134f2 100644 --- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less @@ -20,7 +20,7 @@ @import '../../../../../../../assets/styles/variables.less'; @import '../../../../../../../assets/styles/override.less'; -.operation-creator { +.operation-creator-interface-definition { font-family: @font-opensans-regular; user-select: none; padding-top: 12px; diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts index 07d8fd6eea..c17c130d92 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts @@ -20,7 +20,9 @@ */ import {Component, ComponentRef, Inject, Input} from '@angular/core'; -import {TopologyTemplateService} from '../../../services/component-services/topology-template.service'; +import { + TopologyTemplateService +} from '../../../services/component-services/topology-template.service'; import {TranslateService} from "../../../shared/translator/translate.service"; import {ModalService} from 'app/ng2/services/modal.service'; import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; @@ -29,265 +31,282 @@ import {PluginsService} from "app/ng2/services/plugins.service"; import {SelectedComponentType} from "../common/store/graph.actions"; import {WorkspaceService} from "../../workspace/workspace.service"; -import {ComponentInterfaceDefinitionModel, InterfaceOperationModel} from "../../../../models/interfaceOperation"; -import {InterfaceOperationHandlerComponent} from "./operation-creator/interface-operation-handler.component"; - -import {ArtifactModel, ButtonModel, ComponentInstance, ComponentMetadata, InputBEModel, InterfaceModel, ModalModel} from 'app/models'; +import { + ComponentInterfaceDefinitionModel, + InterfaceOperationModel +} from "../../../../models/interfaceOperation"; +import { + InterfaceOperationHandlerComponent +} from "./operation-creator/interface-operation-handler.component"; + +import { + ArtifactModel, + ButtonModel, + ComponentInstance, + ComponentMetadata, + InputBEModel, + InterfaceModel, + ModalModel +} from 'app/models'; import {ArtifactGroupType} from "../../../../utils/constants"; -import {DropdownValue} from "../../../components/ui/form-components/dropdown/ui-element-dropdown.component"; +import { + DropdownValue +} from "../../../components/ui/form-components/dropdown/ui-element-dropdown.component"; import {ToscaArtifactService} from "../../../services/tosca-artifact.service"; import {ToscaArtifactModel} from "../../../../models/toscaArtifact"; export class UIInterfaceOperationModel extends InterfaceOperationModel { - isCollapsed: boolean = true; - isEllipsis: boolean; - MAX_LENGTH = 75; - constructor(operation: InterfaceOperationModel) { - super(operation); - - if (!operation.description) { - this.description = ''; - } + isCollapsed: boolean = true; + isEllipsis: boolean; + MAX_LENGTH = 75; + + constructor(operation: InterfaceOperationModel) { + super(operation); - if (this.description.length > this.MAX_LENGTH) { - this.isEllipsis = true; - } else { - this.isEllipsis = false; + if (!operation.description) { + this.description = ''; + } + + if (this.description.length > this.MAX_LENGTH) { + this.isEllipsis = true; + } else { + this.isEllipsis = false; + } } - } - getDescriptionEllipsis(): string { - if (this.isCollapsed && this.description.length > this.MAX_LENGTH) { - return this.description.substr(0, this.MAX_LENGTH - 3) + '...'; + getDescriptionEllipsis(): string { + if (this.isCollapsed && this.description.length > this.MAX_LENGTH) { + return this.description.substr(0, this.MAX_LENGTH - 3) + '...'; + } + return this.description; } - return this.description; - } - toggleCollapsed(e) { - e.stopPropagation(); - this.isCollapsed = !this.isCollapsed; - } + toggleCollapsed(e) { + e.stopPropagation(); + this.isCollapsed = !this.isCollapsed; + } } class ModalTranslation { - EDIT_TITLE: string; - CANCEL_BUTTON: string; - CLOSE_BUTTON: string; - SAVE_BUTTON: string; - - constructor(private TranslateService: TranslateService) { - this.TranslateService.languageChangedObservable.subscribe(lang => { - this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE'); - this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON"); - this.CLOSE_BUTTON = this.TranslateService.translate("INTERFACE_CLOSE_BUTTON"); - this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON"); - }); - } + EDIT_TITLE: string; + CANCEL_BUTTON: string; + CLOSE_BUTTON: string; + SAVE_BUTTON: string; + + constructor(private TranslateService: TranslateService) { + this.TranslateService.languageChangedObservable.subscribe(lang => { + this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE'); + this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON"); + this.CLOSE_BUTTON = this.TranslateService.translate("INTERFACE_CLOSE_BUTTON"); + this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON"); + }); + } } export class UIInterfaceModel extends ComponentInterfaceDefinitionModel { - isCollapsed: boolean = false; - - constructor(interf?: any) { - super(interf); - this.operations = _.map( - this.operations, - (operation) => new UIInterfaceOperationModel(operation) - ); - } - - toggleCollapse() { - this.isCollapsed = !this.isCollapsed; - } + isCollapsed: boolean = false; + + constructor(interf?: any) { + super(interf); + this.operations = _.map( + this.operations, + (operation) => new UIInterfaceOperationModel(operation) + ); + } + + toggleCollapse() { + this.isCollapsed = !this.isCollapsed; + } } @Component({ - selector: 'app-interface-operations', - templateUrl: './interface-operations.component.html', - styleUrls: ['./interface-operations.component.less'], - providers: [ModalService, TranslateService] + selector: 'app-interface-operations', + templateUrl: './interface-operations.component.html', + styleUrls: ['./interface-operations.component.less'], + providers: [ModalService, TranslateService] }) export class InterfaceOperationsComponent { - interfaces: UIInterfaceModel[]; - inputs: Array<InputBEModel>; - isLoading: boolean; - interfaceTypes: { [interfaceType: string]: string[] }; - topologyTemplate: TopologyTemplate; - componentMetaData: ComponentMetadata; - componentInstanceSelected: ComponentInstance; - modalInstance: ComponentRef<ModalComponent>; - modalTranslation: ModalTranslation; - componentInstancesInterfaces: Map<string, InterfaceModel[]>; - - deploymentArtifactsFilePath: Array<DropdownValue> = []; - toscaArtifactTypes: Array<DropdownValue> = []; - - @Input() component: ComponentInstance; - @Input() isViewOnly: boolean; - @Input() enableMenuItems: Function; - @Input() disableMenuItems: Function; - @Input() componentType: SelectedComponentType; - - - constructor( - private TranslateService: TranslateService, - private PluginsService: PluginsService, - private topologyTemplateService: TopologyTemplateService, - private toscaArtifactService: ToscaArtifactService, - private modalServiceNg2: ModalService, - private workspaceService: WorkspaceService, - @Inject("Notification") private Notification: any, - ) { - this.modalTranslation = new ModalTranslation(TranslateService); - } - - ngOnInit(): void { - this.componentMetaData = this.workspaceService.metadata; - this.loadComponentInstances(); - this.loadDeployedArtifacts(); - this.loadToscaArtifacts() - } - - private loadComponentInstances() { - this.isLoading = true; - this.topologyTemplateService.getComponentInstances(this.componentMetaData.componentType, this.componentMetaData.uniqueId) - .subscribe((response) => { - this.componentInstanceSelected = response.componentInstances.find(ci => ci.uniqueId === this.component.uniqueId); - this.initComponentInstanceInterfaceOperations(); - this.isLoading = false; - }); - } - - private initComponentInstanceInterfaceOperations() { - this.initInterfaces(this.componentInstanceSelected.interfaces); - this.sortInterfaces(); - } - - private initInterfaces(interfaces: ComponentInterfaceDefinitionModel[]): void { - this.interfaces = _.map(interfaces, (interfaceModel) => new UIInterfaceModel(interfaceModel)); - } - - private sortInterfaces(): void { - this.interfaces = _.filter(this.interfaces, (interf) => interf.operations && interf.operations.length > 0); // remove empty interfaces - this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically - _.forEach(this.interfaces, (interf) => { - interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically - }); - } - - collapseAll(value: boolean = true): void { - _.forEach(this.interfaces, (interf) => { - interf.isCollapsed = value; - }); - } - - isAllCollapsed(): boolean { - return _.every(this.interfaces, (interf) => interf.isCollapsed); - } - - isAllExpanded(): boolean { - return _.every(this.interfaces, (interf) => !interf.isCollapsed); - } - - isListEmpty(): boolean { - return _.filter( - this.interfaces, - (interf) => interf.operations && interf.operations.length > 0 - ).length === 0; - } - - private enableOrDisableSaveButton = (): boolean => { - return this.isViewOnly; - } - - onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) { - - const buttonList = []; - if (this.isViewOnly) { - const closeButton: ButtonModel = new ButtonModel(this.modalTranslation.CLOSE_BUTTON, 'outline white', this.cancelAndCloseModal); - buttonList.push(closeButton); - } else { - const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () => - this.updateInterfaceOperation(), this.enableOrDisableSaveButton); - const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal); - buttonList.push(saveButton); - buttonList.push(cancelButton); + interfaces: UIInterfaceModel[]; + inputs: Array<InputBEModel>; + isLoading: boolean; + interfaceTypes: { [interfaceType: string]: string[] }; + topologyTemplate: TopologyTemplate; + componentMetaData: ComponentMetadata; + componentInstanceSelected: ComponentInstance; + modalInstance: ComponentRef<ModalComponent>; + modalTranslation: ModalTranslation; + componentInstancesInterfaces: Map<string, InterfaceModel[]>; + + deploymentArtifactsFilePath: Array<DropdownValue> = []; + toscaArtifactTypes: Array<DropdownValue> = []; + + @Input() component: ComponentInstance; + @Input() isViewOnly: boolean; + @Input() enableMenuItems: Function; + @Input() disableMenuItems: Function; + @Input() componentType: SelectedComponentType; + + + constructor( + private TranslateService: TranslateService, + private PluginsService: PluginsService, + private topologyTemplateService: TopologyTemplateService, + private toscaArtifactService: ToscaArtifactService, + private modalServiceNg2: ModalService, + private workspaceService: WorkspaceService, + @Inject("Notification") private Notification: any, + ) { + this.modalTranslation = new ModalTranslation(TranslateService); + } + + ngOnInit(): void { + this.componentMetaData = this.workspaceService.metadata; + this.loadComponentInstances(); + this.loadDeployedArtifacts(); + this.loadToscaArtifacts() + } + + private loadComponentInstances() { + this.isLoading = true; + this.topologyTemplateService.getComponentInstances(this.componentMetaData.componentType, this.componentMetaData.uniqueId) + .subscribe((response) => { + this.componentInstanceSelected = response.componentInstances.find(ci => ci.uniqueId === this.component.uniqueId); + this.initComponentInstanceInterfaceOperations(); + this.isLoading = false; + }); + } + + private initComponentInstanceInterfaceOperations() { + this.initInterfaces(this.componentInstanceSelected.interfaces); + this.sortInterfaces(); + } + + private initInterfaces(interfaces: ComponentInterfaceDefinitionModel[]): void { + this.interfaces = _.map(interfaces, (interfaceModel) => new UIInterfaceModel(interfaceModel)); + } + + private sortInterfaces(): void { + this.interfaces = _.filter(this.interfaces, (interf) => interf.operations && interf.operations.length > 0); // remove empty interfaces + this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically + _.forEach(this.interfaces, (interf) => { + interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically + }); + } + + collapseAll(value: boolean = true): void { + _.forEach(this.interfaces, (interf) => { + interf.isCollapsed = value; + }); + } + + isAllCollapsed(): boolean { + return _.every(this.interfaces, (interf) => interf.isCollapsed); + } + + isAllExpanded(): boolean { + return _.every(this.interfaces, (interf) => !interf.isCollapsed); + } + + isListEmpty(): boolean { + return _.filter( + this.interfaces, + (interf) => interf.operations && interf.operations.length > 0 + ).length === 0; + } + + private enableOrDisableSaveButton = (): boolean => { + return this.isViewOnly; } - const modalModel: ModalModel = new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', buttonList, 'custom'); - this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); - - this.modalServiceNg2.addDynamicContentToModal( - this.modalInstance, - InterfaceOperationHandlerComponent, - { - deploymentArtifactsFilePath: this.deploymentArtifactsFilePath, - toscaArtifactTypes: this.toscaArtifactTypes, - selectedInterface: interfaceModel, - selectedInterfaceOperation: operation, - validityChangedCallback: this.enableOrDisableSaveButton, - isViewOnly: this.isViewOnly + + onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) { + + const buttonList = []; + if (this.isViewOnly) { + const closeButton: ButtonModel = new ButtonModel(this.modalTranslation.CLOSE_BUTTON, 'outline white', this.cancelAndCloseModal); + buttonList.push(closeButton); + } else { + const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () => + this.updateInterfaceOperation(), this.enableOrDisableSaveButton); + const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal); + buttonList.push(saveButton); + buttonList.push(cancelButton); } - ); - this.modalInstance.instance.open(); - } - - private cancelAndCloseModal = () => { - this.loadComponentInstances(); - return this.modalServiceNg2.closeCurrentModal(); - } - - private updateInterfaceOperation() { - this.isLoading = true; - const interfaceOperationHandlerComponentInstance: InterfaceOperationHandlerComponent = this.modalInstance.instance.dynamicContent.instance; - const operationUpdated: InterfaceOperationModel = interfaceOperationHandlerComponentInstance.operationToUpdate; - const isArtifactChecked = interfaceOperationHandlerComponentInstance.enableAddArtifactImplementation; - if (!isArtifactChecked) { - let artifactName = interfaceOperationHandlerComponentInstance.artifactName; - artifactName = artifactName === undefined ? '' : artifactName; - operationUpdated.implementation = new ArtifactModel({'artifactName': artifactName} as ArtifactModel); + const modalModel: ModalModel = new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', buttonList, 'custom'); + this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); + + this.modalServiceNg2.addDynamicContentToModal( + this.modalInstance, + InterfaceOperationHandlerComponent, + { + deploymentArtifactsFilePath: this.deploymentArtifactsFilePath, + toscaArtifactTypes: this.toscaArtifactTypes, + selectedInterface: interfaceModel ? interfaceModel : new UIInterfaceModel(), + selectedInterfaceOperation: operation ? operation : new InterfaceOperationModel(), + validityChangedCallback: this.enableOrDisableSaveButton, + isViewOnly: this.isViewOnly + } + ); + this.modalInstance.instance.open(); + } + + private cancelAndCloseModal = () => { + this.loadComponentInstances(); + return this.modalServiceNg2.closeCurrentModal(); } - this.topologyTemplateService.updateComponentInstanceInterfaceOperation( - this.componentMetaData.uniqueId, - this.componentMetaData.componentType, - this.componentInstanceSelected.uniqueId, - operationUpdated) + + private updateInterfaceOperation() { + this.isLoading = true; + const interfaceOperationHandlerComponentInstance: InterfaceOperationHandlerComponent = this.modalInstance.instance.dynamicContent.instance; + const operationUpdated: InterfaceOperationModel = interfaceOperationHandlerComponentInstance.operationToUpdate; + const isArtifactChecked = interfaceOperationHandlerComponentInstance.enableAddArtifactImplementation; + if (!isArtifactChecked) { + let artifactName = interfaceOperationHandlerComponentInstance.artifactName; + artifactName = artifactName === undefined ? '' : artifactName; + operationUpdated.implementation = new ArtifactModel({'artifactName': artifactName} as ArtifactModel); + } + this.topologyTemplateService.updateComponentInstanceInterfaceOperation( + this.componentMetaData.uniqueId, + this.componentMetaData.componentType, + this.componentInstanceSelected.uniqueId, + operationUpdated) .subscribe((updatedComponentInstance: ComponentInstance) => { this.componentInstanceSelected = new ComponentInstance(updatedComponentInstance); this.initComponentInstanceInterfaceOperations(); }); - this.modalServiceNg2.closeCurrentModal(); - this.isLoading = false; - } - - loadDeployedArtifacts() { - this.topologyTemplateService.getArtifactsByType(this.componentMetaData.componentType, this.componentMetaData.uniqueId, ArtifactGroupType.DEPLOYMENT) - .subscribe(response => { - let artifactsDeployment = response.deploymentArtifacts; - if (artifactsDeployment) { - let deploymentArtifactsFound = <ArtifactModel[]>_.values(artifactsDeployment) - deploymentArtifactsFound.forEach(value => { - this.deploymentArtifactsFilePath.push(new DropdownValue(value, value.artifactType.concat('->').concat(value.artifactName))); + this.modalServiceNg2.closeCurrentModal(); + this.isLoading = false; + } + + loadDeployedArtifacts() { + this.topologyTemplateService.getArtifactsByType(this.componentMetaData.componentType, this.componentMetaData.uniqueId, ArtifactGroupType.DEPLOYMENT) + .subscribe(response => { + let artifactsDeployment = response.deploymentArtifacts; + if (artifactsDeployment) { + let deploymentArtifactsFound = <ArtifactModel[]>_.values(artifactsDeployment) + deploymentArtifactsFound.forEach(value => { + this.deploymentArtifactsFilePath.push(new DropdownValue(value, value.artifactType.concat('->').concat(value.artifactName))); + }); + } + }, error => { + this.Notification.error({ + message: 'Failed to Load the Deployed Artifacts:' + error, + title: 'Failure' + }); + }); + } + + loadToscaArtifacts() { + this.toscaArtifactService.getToscaArtifacts(this.componentMetaData.model).subscribe(response => { + if (response) { + let toscaArtifactsFound = <ToscaArtifactModel[]>_.values(response); + toscaArtifactsFound.forEach(value => this.toscaArtifactTypes.push(new DropdownValue(value, value.type))); + } + }, error => { + this.Notification.error({ + message: 'Failed to Load Tosca Artifacts:' + error, + title: 'Failure' + }); }); - }}, error => { - this.Notification.error({ - message: 'Failed to Load the Deployed Artifacts:' + error, - title: 'Failure' - }); - }); - } - - loadToscaArtifacts() { - this.toscaArtifactService.getToscaArtifacts(this.componentMetaData.model).subscribe(response => { - if (response) { - let toscaArtifactsFound = <ToscaArtifactModel[]>_.values(response); - toscaArtifactsFound.forEach(value => this.toscaArtifactTypes.push(new DropdownValue(value, value.type))); - } - }, error => { - this.Notification.error({ - message: 'Failed to Load Tosca Artifacts:' + error, - title: 'Failure' - }); - }); - } + } } diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html index 7a73a5babc..5f02bc2bf7 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html @@ -25,19 +25,30 @@ <div class="side-by-side"> <div class="form-item"> - <sdc-input + <sdc-dropdown label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}" - [(value)]="interfaceType" - [disabled]=!isViewOnly> - </sdc-input> + [required]="true" + [testId]="'interface-name'" + [selectedOption]="selectedInterfaceType" + [placeHolder]="'Select...'" + [disabled]="isViewOnly || isEdit" + (changed)="onSelectInterface($event)" + [options]="interfaceTypeOptions"> + </sdc-dropdown> </div> <div class="form-item"> - <sdc-input + <sdc-dropdown + #interfaceOperationDropDown label="{{ 'OPERATION_NAME' | translate }}" - [(value)]="operationToUpdate.name" - [disabled]=!isViewOnly> - </sdc-input> + [required]="true" + [testId]="'operation-name'" + [selectedOption]="selectedInterfaceOperation" + [placeHolder]="'Select...'" + [disabled]="isViewOnly || isEdit" + (changed)="onSelectOperation($event)" + [options]="interfaceOperationOptions"> + </sdc-dropdown> </div> </div> diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts index 059708592e..5cc7f691aa 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts @@ -18,17 +18,18 @@ * SPDX-License-Identifier: Apache-2.0 * ============LICENSE_END========================================================= */ - -import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'; import {UIInterfaceModel} from "../interface-operations.component"; import {InputOperationParameter, InterfaceOperationModel, IOperationParamsList} from "../../../../../models/interfaceOperation"; import {TranslateService} from "../../../../shared/translator/translate.service"; -import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models"; import {DropdownValue} from "../../../../components/ui/form-components/dropdown/ui-element-dropdown.component"; import {ArtifactModel} from "../../../../../models/artifacts"; import {PropertyBEModel} from "../../../../../models/properties-inputs/property-be-model"; import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component"; import {PropertyFEModel} from "../../../../../models/properties-inputs/property-fe-model"; +import {IDropDownOption} from 'onap-ui-angular'; +import {ComponentServiceNg2} from "../../../../services/component-services/component.service"; +import {DropDownComponent} from "onap-ui-angular/dist/form-elements/dropdown/dropdown.component"; import {DataTypeService} from "../../../../services/data-type.service"; import {Observable} from "rxjs/Observable"; import {DataTypeModel} from "../../../../../models/data-types"; @@ -43,13 +44,15 @@ export class InterfaceOperationHandlerComponent { @Input() private modelName: string; @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>(); + @ViewChild('interfaceOperationDropDown') interfaceOperationDropDown: DropDownComponent; + input: { toscaArtifactTypes: Array<DropdownValue>; selectedInterface: UIInterfaceModel; selectedInterfaceOperation: InterfaceOperationModel; validityChangedCallback: Function; isViewOnly: boolean; - interfaceTypesMap: Map<string, string[]>; + isEdit: boolean; }; dataTypeMap$: Observable<Map<string, DataTypeModel>>; @@ -64,10 +67,13 @@ export class InterfaceOperationHandlerComponent { isLoading: boolean = false; readonly: boolean; isViewOnly: boolean; + isEdit: boolean; interfaceTypes: Array<DropdownValue> = []; - interfaceOperations: Array<DropdownValue> = []; - - interfaceTypesMap: Map<string, string[]>; + interfaceTypeOptions: Array<DropDownOption> = []; + selectedInterfaceType: DropDownOption = undefined; + interfaceOperationMap: Map<string, Array<string>> = new Map<string, Array<string>>(); + interfaceOperationOptions: Array<DropDownOption> = []; + selectedInterfaceOperation: DropDownOption = undefined; toscaArtifactTypeSelected: string; toscaArtifactTypeProperties: Array<PropertyBEModel> = []; @@ -80,7 +86,7 @@ export class InterfaceOperationHandlerComponent { propertyValueValid: boolean = true; inputTypeOptions: any[]; - constructor(private dataTypeService: DataTypeService) { + constructor(private dataTypeService: DataTypeService, private componentServiceNg2: ComponentServiceNg2) { this.dataTypeMap$ = new Observable<Map<string, DataTypeModel>>(subscriber => { this.dataTypeService.findAllDataTypesByModel(this.modelName) .then((dataTypesMap: Map<string, DataTypeModel>) => { @@ -95,6 +101,7 @@ export class InterfaceOperationHandlerComponent { ngOnInit() { this.isViewOnly = this.input.isViewOnly; + this.isEdit = this.input.isEdit; this.interfaceType = this.input.selectedInterface.type; this.operationToUpdate = this.input.selectedInterfaceOperation; this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId; @@ -113,18 +120,56 @@ export class InterfaceOperationHandlerComponent { } this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition); - this.interfaceTypesMap = this.input.interfaceTypesMap; - this.loadInterfaceTypesAndOperations(); this.removeImplementationQuote(); this.validityChanged(); this.loadInterfaceOperationImplementation(); + this.loadInterfaceType(); + } + + private loadInterfaceType() { + this.componentServiceNg2.getInterfaceTypesByModel(undefined) + .subscribe(response => { + if (response) { + this.interfaceOperationMap = new Map<string, Array<string>>(); + for (const interfaceType of Object.keys(response).sort()) { + const operationList = response[interfaceType]; + operationList.sort(); + this.interfaceOperationMap.set(interfaceType, operationList); + const operationDropDownOption: DropDownOption = new DropDownOption(interfaceType); + this.interfaceTypeOptions.push(operationDropDownOption); + if (this.interfaceType == interfaceType) { + this.selectedInterfaceType = operationDropDownOption; + } + } + this.loadInterfaceTypeOperations(); + } + }); + } + + loadInterfaceTypeOperations() { + this.interfaceOperationOptions = new Array<DropDownOption>(); + const interfaceOperationList = this.interfaceOperationMap.get(this.interfaceType); + + if (interfaceOperationList) { + interfaceOperationList.forEach(operationName => { + const operationOption = new DropDownOption(operationName, operationName); + this.interfaceOperationOptions.push(operationOption); + if (this.operationToUpdate.name == operationName) { + this.selectedInterfaceOperation = operationOption + } + }); + } + + this.interfaceOperationDropDown.allOptions = this.interfaceOperationOptions; } private loadInterfaceOperationImplementation() { this.toscaArtifactTypes = this.input.toscaArtifactTypes; - this.artifactVersion = this.operationToUpdate.implementation.artifactVersion; - this.artifactName = this.operationToUpdate.implementation.artifactName; - this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties; + if (this.operationToUpdate.implementation) { + this.artifactVersion = this.operationToUpdate.implementation.artifactVersion; + this.artifactName = this.operationToUpdate.implementation.artifactName; + this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties; + } this.artifactTypeProperties = this.convertArtifactsPropertiesToInput(); this.getArtifactTypesSelected(); } @@ -348,11 +393,43 @@ export class InterfaceOperationHandlerComponent { return inputList; } - private loadInterfaceTypesAndOperations() { - console.log("loadInterfaceTypesAndOperations ", this.interfaceTypesMap.keys()); + onSelectInterface(dropDownOption: DropDownOption) { + if (dropDownOption) { + this.setInterfaceType(dropDownOption); + } else { + this.setInterfaceType(undefined); + } + this.setInterfaceOperation(undefined); + this.interfaceOperationDropDown.selectOption({} as IDropDownOption); + this.loadInterfaceTypeOperations(); + } - Array.from(this.interfaceTypesMap.keys()).forEach(value => this.interfaceTypes.push(new DropdownValue(value, value))); - console.log("loadInterfaceTypesAndOperations interfaceType ", this.interfaceTypes); + onSelectOperation(dropDownOption: DropDownOption) { + if (this.selectedInterfaceType && dropDownOption) { + this.setInterfaceOperation(dropDownOption); + } } + private setInterfaceType(dropDownOption: DropDownOption) { + this.selectedInterfaceType = dropDownOption ? dropDownOption : undefined; + this.interfaceType = dropDownOption ? dropDownOption.value : undefined; + this.operationToUpdate.interfaceType = dropDownOption ? dropDownOption.value : undefined; + this.operationToUpdate.interfaceId = dropDownOption ? dropDownOption.value : undefined; + } + + private setInterfaceOperation(dropDownOption: DropDownOption) { + this.operationToUpdate.name = dropDownOption ? dropDownOption.value : undefined; + this.operationToUpdate.operationType = dropDownOption ? dropDownOption.value : undefined; + this.selectedInterfaceOperation = dropDownOption ? dropDownOption : undefined; + } } + +class DropDownOption implements IDropDownOption { + value: string; + label: string; + + constructor(value: string, label?: string) { + this.value = value; + this.label = label || value; + } +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts index b212eec034..bcc797c64c 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts @@ -25,16 +25,14 @@ import {CommonModule} from "@angular/common"; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module"; import {TranslateModule} from "app/ng2/shared/translator/translate.module"; - - +import {AddInputComponent} from './add-input/add-input.component'; +import {InputListComponent} from './input-list/input-list.component'; +import {InputListItemComponent} from './input-list/input-list-item/input-list-item.component'; +import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component"; +import {InterfaceOperationHandlerComponent} from "./interface-operation-handler.component"; import {SdcUiComponentsModule} from "onap-ui-angular/dist"; -import { InterfaceOperationHandlerComponent } from "app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component"; -import { PropertyParamRowComponent } from "app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component"; -import { UiElementsModule } from "app/ng2/components/ui/ui-elements.module"; -import { PropertyTableModule } from "app/ng2/components/logic/properties-table/property-table.module"; -import { AddInputComponent } from './add-input/add-input.component'; -import { InputListComponent } from './input-list/input-list.component'; -import { InputListItemComponent } from './input-list/input-list-item/input-list-item.component'; +import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; +import {PropertyTableModule} from "app/ng2/components/logic/properties-table/property-table.module"; @NgModule({ declarations: [ |