From 07e0b6d5206914afea4ead69eda34c30f3cbd482 Mon Sep 17 00:00:00 2001 From: ilanap Date: Wed, 1 Apr 2020 14:25:35 +0300 Subject: bugfix for operations screen Add Operation Button is missing in Service management committing fix by Akiva Issue-ID: SDC-2843 Signed-off-by: ilanap Change-Id: I9a6c89e45ea425eb9abf827906562e14a39cf1ff --- .../interface-operation.page.component.ts | 69 +++++++++++++--------- .../operation-creator.component.html | 12 ++-- .../operation-creator.component.ts | 46 +++++++++++---- .../param-row/param-row.component.ts | 1 + .../responses/component-generic-response.ts | 3 +- catalog-ui/src/app/utils/constants.ts | 7 +++ 6 files changed, 94 insertions(+), 44 deletions(-) (limited to 'catalog-ui/src/app') diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts index 9d41c375f5..4f93e727ec 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts @@ -1,5 +1,5 @@ import * as _ from "lodash"; -import { Component, Input, Output, ComponentRef, Inject } from '@angular/core'; +import { Component, Input, Inject } from '@angular/core'; import {Component as IComponent } from 'app/models/components/component'; import { SdcConfigToken, ISdcConfig } from "app/ng2/config/sdc-config.config"; @@ -7,7 +7,7 @@ import {TranslateService } from "app/ng2/shared/translator/translate.service"; import {Observable } from "rxjs/Observable"; -import {ModalComponent } from 'app/ng2/components/ui/modal/modal.component'; +import { ModalComponent } from 'onap-ui-angular/dist/modals/modal.component'; import {ModalService } from 'app/ng2/services/modal.service'; import { InputBEModel, @@ -118,7 +118,7 @@ export class UIInterfaceModel extends InterfaceModel { export class InterfaceOperationComponent { interfaces: UIInterfaceModel[]; - modalInstance: ComponentRef; + modalInstance: ModalComponent; openOperation: OperationModel; enableWorkflowAssociation: boolean; inputs: InputBEModel[]; @@ -152,7 +152,6 @@ export class InterfaceOperationComponent { ngOnInit(): void { this.isLoading = true; this.workflowIsOnline = !_.isUndefined(this.PluginsService.getPluginByStateUrl('workflowDesigner')); - Observable.forkJoin( this.ComponentServiceNg2.getInterfaceOperations(this.component), this.ComponentServiceNg2.getComponentInputs(this.component), @@ -165,7 +164,7 @@ export class InterfaceOperationComponent { this.sortInterfaces(); this.inputs = response[1].inputs; this.interfaceTypes = response[2]; - this.workflows = workflows; + this.workflows = (workflows.items) ? workflows.items: workflows; this.capabilities = response[3].capabilities; }; if (this.enableWorkflowAssociation && this.workflowIsOnline) { @@ -216,7 +215,7 @@ export class InterfaceOperationComponent { } getDisabled = (): boolean => { - return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit(); + return !this.modalInstance.innerModalContent.instance.checkFormValidForSubmit(); } onEditOperation = (operation?: OperationModel): void => { @@ -260,7 +259,7 @@ export class InterfaceOperationComponent { size: 'small', closeModal: true, callback: () => { - const modalInstance = this.ModalServiceSdcUI.getCurrentInstance().innerModalContent.instance; + const modalInstance = this.modalInstance.innerModalContent.instance; const {operation, isUsingExistingWF, createParamLists} = modalInstance; createParamLists(); @@ -295,38 +294,54 @@ export class InterfaceOperationComponent { buttons: [saveButton, cancelButton] as IModalButtonComponent[] }; - this.ModalServiceSdcUI.openCustomModal(modalConfig, OperationCreatorComponent, input); - + this.modalInstance = this.ModalServiceSdcUI.openCustomModal(modalConfig, OperationCreatorComponent, input); } onRemoveOperation = (event: Event, operation: OperationModel): void => { event.stopPropagation(); - const confirmCallback = () => { - this.ComponentServiceNg2 - .deleteInterfaceOperation(this.component, operation) - .subscribe(() => { - const curInterf = _.find(this.interfaces, (interf) => interf.type === operation.interfaceType); - const index = _.findIndex(curInterf.operations, (el) => el.uniqueId === operation.uniqueId); - curInterf.operations.splice(index, 1); - if (!curInterf.operations.length) { - const interfIndex = _.findIndex(this.interfaces, (interf) => interf.type === operation.interfaceType); - this.interfaces.splice(interfIndex, 1); - } - }); - } + const deleteButton: IModalButtonComponent = { + id: 'deleteButton', + text: this.modalTranslation.DELETE_BUTTON, + type: 'primary', + size: 'small', + closeModal: true, + callback: () => { + this.ComponentServiceNg2 + .deleteInterfaceOperation(this.component, operation) + .subscribe(() => { + const curInterf = _.find(this.interfaces, (interf) => interf.type === operation.interfaceType); + const index = _.findIndex(curInterf.operations, (el) => el.uniqueId === operation.uniqueId); + curInterf.operations.splice(index, 1); + if (!curInterf.operations.length) { + const interfIndex = _.findIndex(this.interfaces, (interf) => interf.type === operation.interfaceType); + this.interfaces.splice(interfIndex, 1); + } + }); + } + }; + + const cancelButton: IModalButtonComponent = { + id: 'cancelButton', + text: this.modalTranslation.CANCEL_BUTTON, + type: 'secondary', + size: 'small', + closeModal: true, + callback: () => { + this.openOperation = null; + }, + }; - this.ModalServiceSdcUI.openAlertModal( + this.ModalServiceSdcUI.openWarningModal( this.modalTranslation.DELETE_TITLE, this.modalTranslation.deleteText(operation.name), - this.modalTranslation.DELETE_BUTTON, - confirmCallback, - 'deleteOperationModal' + 'deleteOperationModal', + [deleteButton, cancelButton], ); } private enableOrDisableSaveButton = (shouldEnable: boolean): void => { - const saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton'); + const saveButton = this.modalInstance.getButtonById('saveButton'); saveButton.disabled = !shouldEnable; } diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html index df2a505fe8..60cb1d4cfc 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html @@ -25,7 +25,7 @@ label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}" [required]="true" testId="interface-name" - selectedOption="{{operation.interfaceType}}" + [selectedOption]="getSelectedDropdown(interfaceNames, operation.interfaceType)" placeHolder="Select..." [disabled]="readonly" (changed)="onSelectInterface($event)" @@ -35,10 +35,11 @@
@@ -123,7 +125,7 @@ @@ -135,7 +137,7 @@ *ngIf="workflowIsOnline && workflows.length" label="{{ 'OPERATION_WORKFLOW_VERSION' | translate }}" testId="associated-workflow-version" - selectedOption="{{operation.workflowVersionId}}" + [selectedOption]="getSelectedDropdown(workflowVersions, operation.workflowVersionId)" [options]="workflowVersions" (changed)="changeWorkflowVersion($event)" [disabled]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly"> diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts index 12fba24e86..23b678177f 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts @@ -10,14 +10,15 @@ import { OperationModel, OperationParameter, InputBEModel, - RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS, Capability } from 'app/models'; -import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component"; -import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; +import { Tabs } from "app/ng2/components/ui/tabs/tabs.component"; +import { DropdownValue } from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; import { IDropDownOption } from 'onap-ui-angular'; +import { DropDownComponent } from "onap-ui-angular/dist/components"; +import { DROPDOWN_OPTION_TYPE } from "app/utils/constants"; export class DropDownOption implements IDropDownOption { value: string; @@ -30,9 +31,9 @@ export class DropDownOption implements IDropDownOption { } class TypedDropDownOption extends DropDownOption { - type: number; + type: string; - constructor(value: string, label?: string, type?: number) { + constructor(value: string, label?: string, type?: string) { super(value, label); this.type = type; } @@ -106,6 +107,8 @@ export class OperationCreatorComponent implements OperationCreatorInput { INTERFACE_OTHER = 'Local'; @ViewChild('propertyInputTabs') propertyInputTabs: Tabs; + @ViewChild('operationNamesDropdown') operationNamesDropdown: DropDownComponent; + @ViewChild('workflowAssignmentDropdown') workflowAssignmentDropdown: DropDownComponent; currentTab: String; constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) { @@ -117,7 +120,7 @@ export class OperationCreatorComponent implements OperationCreatorInput { new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")), ]; - this.workflowAssociationType = this.operation.workflowAssociationType || WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL; + this.workflowAssociationType = this.operation.workflowAssociationType; }); this.currentTab = this.TYPE_INPUT; @@ -137,13 +140,12 @@ export class OperationCreatorComponent implements OperationCreatorInput { _.keys(this.interfaceTypes), type => this.createInterfaceDropdown(type) ); - this.interfaceNames.unshift(new TypedDropDownOption('Existing Interfaces', 'Existing Interfaces', 1)); + this.interfaceNames.unshift(new TypedDropDownOption('Existing Interfaces', 'Existing Interfaces', DROPDOWN_OPTION_TYPE.HEADER)); this.interfaceNames = this.interfaceNames.concat([ - new TypedDropDownOption(' ', ' ', 3), - new TypedDropDownOption(this.INTERFACE_OTHER_HEADER, this.INTERFACE_OTHER_HEADER, 1), + new TypedDropDownOption(' ', ' ', DROPDOWN_OPTION_TYPE.HORIZONTAL_LINE), + new TypedDropDownOption(this.INTERFACE_OTHER_HEADER, this.INTERFACE_OTHER_HEADER, DROPDOWN_OPTION_TYPE.HEADER), new TypedDropDownOption(this.INTERFACE_OTHER) ]); - const inputOperation = this.inputOperation; this.operation = new OperationModel(inputOperation || {}); @@ -187,6 +189,17 @@ export class OperationCreatorComponent implements OperationCreatorInput { this.updateTable(); } + ngAfterViewInit() { + if(this.workflowAssignmentDropdown){ + this.workflowAssignmentDropdown.allOptions = this.associationOptions && this.associationOptions.length ? + this.associationOptions : + [ + new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL, this.translateService.translate("EXTERNAL_WORKFLOW_ASSOCIATION")), + new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")), + ]; + } + } + reconstructOperation = () => { const buildAndUpdate = () => { @@ -280,11 +293,14 @@ export class OperationCreatorComponent implements OperationCreatorInput { curInterf && curInterf.operations || [], op => op.name === name ); - const ddType = (existingOp && existingOp.uniqueId !== this.operation.uniqueId) ? 2 : 0; + const ddType = (existingOp && existingOp.uniqueId !== this.operation.uniqueId) ? DROPDOWN_OPTION_TYPE.HORIZONTAL_LINE : DROPDOWN_OPTION_TYPE.SIMPLE; return new TypedDropDownOption(name, name, ddType); } ) ); + if(this.operationNamesDropdown) { + this.operationNamesDropdown.allOptions = this.operationNames; + } this.validityChanged(); } @@ -522,4 +538,12 @@ export class OperationCreatorComponent implements OperationCreatorInput { this.validityChangedCallback(validState); } + getSelectedDropdown(options: DropdownValue[], selectedValue: string): DropdownValue { + const selectedDropdown = _.find(options, (option) => option.value === selectedValue); + return selectedDropdown || this.toDropDownOption(null); + } + + toDropDownOption(val: string) { + return { value : val, label: val }; + } } diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts index de6e703404..76cf73ff17 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts @@ -98,6 +98,7 @@ export class ParamRowComponent { ), prop => new DropdownValue(prop.uniqueId, prop.name) ); + this.filteredInputProps.unshift(new DropdownValue("","")); this.operationOutputCats = _.filter( _.map( diff --git a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts index f161babfa6..301b3a4c9b 100644 --- a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts +++ b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts @@ -78,7 +78,7 @@ export class ComponentGenericResponse implements Serializable