From ca30916132c62fa6488b8f891776d262c3eac529 Mon Sep 17 00:00:00 2001 From: KrupaNagabhushan Date: Mon, 9 May 2022 20:03:56 +0100 Subject: [PATCH] Generalise Select Input button in Properties Assignment view Issue-ID: SDC-3996 Signed-off-by: KrupaNagabhushan Change-Id: Idb7ff3552ffb68748c688c374625b216ac273499 --- catalog-ui/src/app/ng2/app.module.ts | 4 +- .../properties-assignment.page.component.html | 4 +- .../properties-assignment.page.component.ts | 61 ++++++++++++---------- .../tosca-function.component.html} | 17 ++++-- .../tosca-function.component.less} | 0 .../tosca-function.component.ts} | 52 ++++++++++++++---- .../tosca-function.module.ts} | 8 +-- catalog-ui/src/assets/languages/en_US.json | 5 +- 8 files changed, 98 insertions(+), 53 deletions(-) rename catalog-ui/src/app/ng2/pages/properties-assignment/{input-list/input-list.component.html => tosca-function/tosca-function.component.html} (62%) rename catalog-ui/src/app/ng2/pages/properties-assignment/{input-list/input-list.component.less => tosca-function/tosca-function.component.less} (100%) rename catalog-ui/src/app/ng2/pages/properties-assignment/{input-list/input-list.component.ts => tosca-function/tosca-function.component.ts} (67%) rename catalog-ui/src/app/ng2/pages/properties-assignment/{input-list/input-list.module.ts => tosca-function/tosca-function.module.ts} (90%) diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index 37167b4360..707e328a52 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -94,7 +94,7 @@ import {ServiceDependenciesModule} from './components/logic/service-dependencies import {ServiceDependenciesEditorModule} from './pages/service-dependencies-editor/service-dependencies-editor.module'; import {PropertyCreatorModule} from './pages/properties-assignment/property-creator/property-creator.module'; import {DeclareListModule} from './pages/properties-assignment/declare-list/declare-list.module'; -import { InputListModule } from "./pages/properties-assignment/input-list/input-list.module"; +import { ToscaFunctionModule } from "./pages/properties-assignment/tosca-function/tosca-function.module"; import {WorkflowServiceNg2} from './services/workflow.service'; import {ToscaTypesServiceNg2} from "./services/tosca-types.service"; import {CapabilitiesFilterPropertiesEditorComponentModule} from "./pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module"; @@ -153,7 +153,7 @@ export function configServiceFactory(config: ConfigService, authService: Authent AttributesOutputsModule, PropertyCreatorModule, DeclareListModule, - InputListModule, + ToscaFunctionModule, PluginFrameModule, PluginsModule, InterfaceOperationModule, diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html index d04ddf5c91..c1a1ae5b57 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html @@ -75,11 +75,11 @@ - + data-tests-id="declare-button select-tosca-function">{{btnToscaFunctionText}} diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 4baae199c4..a6e0b51136 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -19,7 +19,7 @@ */ import * as _ from "lodash"; -import {Component, Inject, ViewChild} from "@angular/core"; +import {Component, Inject, ViewChild, ComponentRef} from "@angular/core"; import {PropertiesService} from "../../services/properties.service"; import { ButtonModel, @@ -62,12 +62,13 @@ import {UnsavedChangesComponent} from "app/ng2/components/ui/forms/unsaved-chang import {PropertyCreatorComponent} from "./property-creator/property-creator.component"; import {ModalService} from "../../services/modal.service"; import {DeclareListComponent} from "./declare-list/declare-list.component"; -import {InputListComponent} from "./input-list/input-list.component"; +import {ToscaFunctionComponent} from "./tosca-function/tosca-function.component"; import {CapabilitiesGroup, Capability} from "../../../models/capability"; import {ToscaPresentationData} from "../../../models/tosca-presentation"; import {Observable} from "rxjs"; import {ToscaGetFunctionType} from "../../../models/tosca-get-function-type.enum"; import {TranslateService} from "../../shared/translator/translate.service"; +import {ModalComponent} from "../../components/ui/modal/modal.component"; const SERVICE_SELF_TITLE = "SELF"; @Component({ @@ -102,7 +103,6 @@ export class PropertiesAssignmentComponent { currentMainTab: Tab; isInputsTabSelected: boolean; isPropertiesTabSelected: boolean; - isInputValueSelected: boolean = false; isPoliciesTabSelected: boolean; isReadonly: boolean; resourceIsReadonly: boolean; @@ -118,8 +118,7 @@ export class PropertiesAssignmentComponent { serviceBePropertiesMap: InstanceBePropertiesMap; serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap; selectedInstance_FlattenCapabilitiesList: Capability[]; - propertyType: string; - btnSelectInputText: string; + btnToscaFunctionText: string; @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs; @ViewChild('propertyInputTabs') propertyInputTabs: Tabs; @@ -157,7 +156,7 @@ export class PropertiesAssignmentComponent { ngOnInit() { console.log("==>" + this.constructor.name + ": ngOnInit"); - this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL'); this.loadingInputs = true; this.loadingPolicies = true; this.loadingInstances = true; @@ -501,8 +500,8 @@ export class PropertiesAssignmentComponent { this.searchQuery = ''; }; - /**Select Properties value from defined input values**/ - selectInput = (): void => { + /**Select Tosca function value from defined values**/ + selectToscaFunctionAndValues = (): void => { let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []); angular.forEach(instancesIds, (instanceId: string): void => { let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId @@ -518,7 +517,7 @@ export class PropertiesAssignmentComponent { property.toscaGetFunctionType = null; this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData); } else { - let modalTitle = 'Select value from Input'; + const modalTitle = 'Set value using TOSCA functions'; const modal = this.ModalService.createCustomModal(new ModalModel( 'sm', modalTitle, @@ -526,19 +525,10 @@ export class PropertiesAssignmentComponent { [ new ButtonModel('Save', 'blue', () => { - this.loadingProperties = true; - let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectInputValue; - property.getInputValues = []; - const propertyInputDetail = new PropertyInputDetail(); - propertyInputDetail.inputId = selectInputValue.uniqueId; - propertyInputDetail.inputName = selectInputValue.name; - propertyInputDetail.inputType = selectInputValue.type; - property.getInputValues.push(propertyInputDetail); - property.value = selectInputValue.name.indexOf("->") !== -1 - ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}' - : '{"get_input":"' + selectInputValue.name+ '"}' ; - property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT; - this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData); + const selectedToscaFunction: string = modal.instance.dynamicContent.instance.selectToscaFunction; + if (selectedToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) { + this.updateSelectInputValues(modal, property, checkedProperties, selectedInstanceData); + } modal.instance.close(); } ), @@ -548,7 +538,7 @@ export class PropertiesAssignmentComponent { ], null /* type */ )); //modal - this.ModalService.addDynamicContentToModal(modal, InputListComponent); + this.ModalService.addDynamicContentToModal(modal, ToscaFunctionComponent); modal.instance.open(); } }); @@ -556,6 +546,22 @@ export class PropertiesAssignmentComponent { }); }; + private updateSelectInputValues(modal:ComponentRef, property:PropertyBEModel, checkedProperties:PropertyBEModel[], selectedInstanceData:any) { + this.loadingProperties = true; + let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectValue; + property.getInputValues = []; + const propertyInputDetail = new PropertyInputDetail(); + propertyInputDetail.inputId = selectInputValue.uniqueId; + propertyInputDetail.inputName = selectInputValue.name; + propertyInputDetail.inputType = selectInputValue.type; + property.getInputValues.push(propertyInputDetail); + property.value = selectInputValue.name.indexOf("->") !== -1 + ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}' + : '{"get_input":"' + selectInputValue.name+ '"}' ; + property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT; + this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData); + } + updateInstancePropertiesWithInput(checkedProperties: PropertyBEModel[], selectedInstanceData: any) { this.componentInstanceServiceNg2.updateInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, checkedProperties) @@ -568,7 +574,7 @@ export class PropertiesAssignmentComponent { }); }, () => { this.loadingProperties = false; - this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL'); }); } @@ -579,18 +585,17 @@ export class PropertiesAssignmentComponent { angular.forEach(checkedProperties, (property: PropertyBEModel) => { if(this.checkedPropertiesCount == 1) { if (property.toscaGetFunctionType == null) { - this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL'); } else { - this.btnSelectInputText = this.translateService.translate('DESELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('DESELECT_INPUT_LABEL'); } } else { - this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL'); } }); }); } - /*** DECLARE PROPERTIES/INPUTS ***/ declareProperties = (): void => { console.log("==>" + this.constructor.name + ": declareProperties"); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html similarity index 62% rename from catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html rename to catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html index b61d25cb25..ea52f20e91 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html @@ -17,14 +17,21 @@ ~ ============LICENSE_END========================================================= --> -
+
- - + + +
+
+ +
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less similarity index 100% rename from catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less rename to catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts similarity index 67% rename from catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts rename to catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts index 0bdd028d93..22fb8cc358 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts @@ -26,19 +26,24 @@ import {WorkspaceService} from "../../workspace/workspace.service"; import {PropertiesService} from "../../../services/properties.service"; import {PROPERTY_DATA} from "../../../../utils/constants"; import {DataTypeService} from "../../../services/data-type.service"; +import {ToscaGetFunctionType} from "../../../../models/tosca-get-function-type.enum"; +import {TranslateService} from "../../../shared/translator/translate.service"; @Component({ - selector: 'input-list', - templateUrl: './input-list.component.html', - styleUrls: ['./input-list.component.less'], + selector: 'tosca-function', + templateUrl: './tosca-function.component.html', + styleUrls: ['./tosca-function.component.less'], }) -export class InputListComponent { +export class ToscaFunctionComponent { - selectInputValue; + selectToscaFunction; + selectValue; isLoading: boolean; propertyType: string; - inputs: Array = []; + dropdownValues: Array = []; + toscaFunctions: Array = []; + dropdownValuesLabel: string; private dataTypeProperties: Array = []; private componentMetadata: ComponentMetadata; @@ -46,13 +51,40 @@ export class InputListComponent { constructor(private topologyTemplateService: TopologyTemplateService, private workspaceService: WorkspaceService, private propertiesService: PropertiesService, - private dataTypeService: DataTypeService) { + private dataTypeService: DataTypeService, + private translateService: TranslateService) { } ngOnInit() { this.componentMetadata = this.workspaceService.metadata; this.propertyType = this.propertiesService.getCheckedPropertyType(); - this.loadInputValues(this.propertyType); + this.loadToscaFunctions(); + } + + private loadToscaFunctions(): void { + this.toscaFunctions.push(ToscaGetFunctionType.GET_INPUT.toLowerCase()); + } + + onToscaFunctionChange(): void { + this.loadDropdownValueLabel(); + this.loadDropdownValues(); + } + + private loadDropdownValueLabel(): void { + if (this.selectToscaFunction) { + if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) { + this.dropdownValuesLabel = this.translateService.translate('INPUT_DROPDOWN_LABEL'); + } + } + } + + private loadDropdownValues(): void { + if (this.selectToscaFunction) { + this.dropdownValues = []; + if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) { + this.loadInputValues(this.propertyType); + } + } } private loadInputValues(propertyType: string): void { @@ -61,7 +93,7 @@ export class InputListComponent { .subscribe((response) => { response.inputs.forEach((inputProperty: any) => { if (propertyType === inputProperty.type) { - this.inputs.push(inputProperty); + this.dropdownValues.push(inputProperty); } else if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(inputProperty.type) === -1 && inputProperty.type !== propertyType) { this.buildInputDataForComplexType(inputProperty, propertyType); } @@ -80,7 +112,7 @@ export class InputListComponent { let inputData = inputProperty.name + "->" + dataTypeProperty.name; dataTypeProperty.name = inputData; if (this.dataTypeProperties.indexOf(dataTypeProperty) === -1 && dataTypeProperty.type === propertyType) { - this.inputs.push(dataTypeProperty); + this.dropdownValues.push(dataTypeProperty); } }); } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts similarity index 90% rename from catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts rename to catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts index 50d7b08314..efe45c3d27 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts @@ -23,12 +23,12 @@ import { FormsModule } from '@angular/forms'; import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module'; import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; import { TranslateModule } from '../../../shared/translator/translate.module'; -import { InputListComponent } from './input-list.component'; +import { ToscaFunctionComponent } from './tosca-function.component'; import { SdcUiComponentsModule } from 'onap-ui-angular'; @NgModule({ declarations: [ - InputListComponent, + ToscaFunctionComponent, ], imports: [ CommonModule, @@ -40,9 +40,9 @@ import { SdcUiComponentsModule } from 'onap-ui-angular'; ], exports: [], entryComponents: [ - InputListComponent + ToscaFunctionComponent ], providers: [] }) -export class InputListModule {} +export class ToscaFunctionModule {} diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json index fe855c168e..3c659dcf06 100644 --- a/catalog-ui/src/assets/languages/en_US.json +++ b/catalog-ui/src/assets/languages/en_US.json @@ -508,9 +508,10 @@ "=========== PROPERTIES ASSIGNMENT DECLARE AS POLICY ===========": "", "DELETE_POLICY_TITLE": "Delete Policy", "DELETE_POLICY_MSG": "Are you sure you want to delete policy '{{policyName}}'?", - "=========== PROPERTIES ASSIGNMENT SELECT INPUT BUTTON ===========": "", - "SELECT_INPUT_LABEL": "Select Input", + "=========== PROPERTIES ASSIGNMENT TOSCA FUNCTION BUTTON ===========": "", + "TOSCA_FUNCTION_LABEL": "TOSCA function", "DESELECT_INPUT_LABEL": "Deselect Input", + "INPUT_DROPDOWN_LABEL": "Input", "=========== AUTOMATED UPGRADE ===========": "", "RESOURCE_UPGRADE_TITLE": "Upgrade Services", "SERVICE_UPGRADE_TITLE": "Update Service References", -- 2.16.6