From 80c2cf3c70db2605eb9c2e28515a73567f3404ee Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Thu, 2 Jun 2022 16:34:57 +0100 Subject: Support get functions in composition property modal Allow to assign get functions values to properties in the composition properties modal. Change-Id: I470be63e2980994f43be255d8056af7392baab75 Issue-ID: SDC-4031 Signed-off-by: andre.schmid --- catalog-ui/src/app/models/component-metadata.ts | 6 +- catalog-ui/src/app/modules/directive-module.ts | 18 +- .../tosca-function/tosca-function.component.ts | 63 ++++++- .../property-form-view-model.ts | 205 +++++++++++++++------ .../property-form-view.html | 195 +++++++++++--------- 5 files changed, 334 insertions(+), 153 deletions(-) (limited to 'catalog-ui/src') diff --git a/catalog-ui/src/app/models/component-metadata.ts b/catalog-ui/src/app/models/component-metadata.ts index c79552844d..e3d03a549e 100644 --- a/catalog-ui/src/app/models/component-metadata.ts +++ b/catalog-ui/src/app/models/component-metadata.ts @@ -19,7 +19,7 @@ */ import { CapabilitiesGroup, RequirementsGroup } from 'app/models'; -import {ComponentState, ComponentType} from 'app/utils'; +import {ComponentState, ComponentType, ResourceType} from 'app/utils'; import { IMainCategory } from './category'; import { Metadata } from "app/models/metadata"; /** @@ -212,6 +212,10 @@ export class ComponentMetadata implements IComponentMetadata { return this.componentType === ComponentType.SERVICE; } + public isVfc(): boolean { + return this.resourceType === ResourceType.VFC; + } + public getTypeUrl(): string { return this.componentType === ComponentType.RESOURCE ? 'resources/' : 'services/'; } diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts index ed1463af74..25d8607b6b 100644 --- a/catalog-ui/src/app/modules/directive-module.ts +++ b/catalog-ui/src/app/modules/directive-module.ts @@ -43,16 +43,15 @@ import {EditNamePopoverDirective} from "../directives/edit-name-popover/edit-nam import {DataTypeFieldsStructureDirective} from "../directives/property-types/data-type-fields-structure/data-type-fields-structure"; import {TypeMapDirective} from "../directives/property-types/type-map/type-map-directive"; import {TypeListDirective} from "../directives/property-types/type-list/type-list-directive"; -import {SelectDataTypeFieldsStructureDirective} from "../directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure"; +import { + SelectDataTypeFieldsStructureDirective +} from "../directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure"; import {SelectTypeMapDirective} from "../directives/select-property-types/select-type-map/select-type-map-directive"; import {SelectTypeListDirective} from "../directives/select-property-types/select-type-list/select-type-list-directive"; import {ValidationOnLoadDirective} from "../directives/utils/validation-on-load/validation-on-load"; import {InfoTooltipDirective} from "../directives/info-tooltip/info-tooltip"; import {SdcTabsDirective} from "../directives/sdc-tabs/sdc-tabs-directive"; -import { - InnerSdcSingleTabDirective, - SdcSingleTabDirective -} from "../directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive"; +import {InnerSdcSingleTabDirective, SdcSingleTabDirective} from "../directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive"; import {ExpandCollapseListHeaderDirective} from "../directives/utils/expand-collapse-list-header/expand-collapse-list-header"; import {JsonExportExcelDirective} from "../directives/export-json-to-excel/export-json-to-excel"; import {TopProgressDirective} from "../directives/layout/top-progress/top-progress"; @@ -96,6 +95,7 @@ import {ReqAndCapabilitiesComponent} from "../ng2/pages/workspace/req-and-capabi import {DistributionComponent} from '../ng2/pages/workspace/disribution/distribution.component'; import {AttributesOutputsComponent} from "../ng2/pages/attributes-outputs/attributes-outputs.page.component"; import {InterfaceDefinitionComponent} from "../ng2/pages/interface-definition/interface-definition.page.component"; +import {ToscaFunctionComponent} from '../ng2/pages/properties-assignment/tosca-function/tosca-function.component'; let moduleName: string = 'Sdc.Directives'; let directiveModule: ng.IModule = angular.module(moduleName, []); @@ -314,4 +314,10 @@ directiveModule.directive('deploymentArtifactPage', downgradeComponent({ component: DeploymentArtifactsPageComponent, inputs: [], outputs: [] -}) as angular.IDirectiveFactory); \ No newline at end of file +}) as angular.IDirectiveFactory); + +directiveModule.directive('toscaFunction', downgradeComponent({ + component: ToscaFunctionComponent, + inputs: ['componentInstanceMap', 'property'], + outputs: [] +}) as angular.IDirectiveFactory); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts index 6b0cdd04d9..e44c29fc5c 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts @@ -17,7 +17,7 @@ * ============LICENSE_END========================================================= */ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {ComponentMetadata, DataTypeModel, PropertyBEModel, PropertyModel} from 'app/models'; import {TopologyTemplateService} from "../../../services/component-services/topology-template.service"; import {WorkspaceService} from "../../workspace/workspace.service"; @@ -31,6 +31,7 @@ import {Observable} from 'rxjs/Observable'; import {PropertySource} from "../../../../models/property-source"; import {InstanceFeDetails} from "../../../../models/instance-fe-details"; import {ToscaGetFunction} from "../../../../models/tosca-get-function"; +import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn} from "@angular/forms"; @Component({ selector: 'tosca-function', @@ -42,6 +43,40 @@ export class ToscaFunctionComponent implements OnInit { @Input() property: PropertyBEModel; @Input() componentInstanceMap: Map = new Map(); @Input() allowClear: boolean = true; + @Output() onValidFunction: EventEmitter = new EventEmitter(); + @Output() onValidityChange: EventEmitter = new EventEmitter(); + + toscaGetFunctionValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + const toscaGetFunction: ToscaGetFunction = control.value; + const errors: ValidationErrors = {}; + if (!toscaGetFunction.sourceName) { + errors.sourceName = { required: true }; + } + if (!toscaGetFunction.functionType) { + errors.functionType = { required: true }; + } + if (!toscaGetFunction.sourceUniqueId) { + errors.sourceUniqueId = { required: true }; + } + if (!toscaGetFunction.sourceName) { + errors.sourceName = { required: true }; + } + if (!toscaGetFunction.propertyPathFromSource) { + errors.propertyPathFromSource = { required: true }; + } + if (!toscaGetFunction.propertyName) { + errors.propertyName = { required: true }; + } + if (!toscaGetFunction.propertySource) { + errors.propertySource = { required: true }; + } + return errors ? errors : null; + }; + + toscaGetFunctionForm: FormControl = new FormControl(new ToscaGetFunction(undefined), [this.toscaGetFunctionValidator]); + formGroup: FormGroup = new FormGroup({ + 'toscaGetFunction': this.toscaGetFunctionForm + }); TOSCA_FUNCTION_GET_PROPERTY = ToscaGetFunctionType.GET_PROPERTY; @@ -70,6 +105,12 @@ export class ToscaFunctionComponent implements OnInit { this.loadToscaFunctions(); this.loadPropertySourceDropdown(); this.initToscaGetFunction(); + this.toscaGetFunctionForm.valueChanges.subscribe(toscaGetFunction => { + this.onValidityChange.emit(this.toscaGetFunctionForm.valid); + if (this.toscaGetFunctionForm.valid) { + this.onValidFunction.emit(toscaGetFunction); + } + }) } private initToscaGetFunction(): void { @@ -77,6 +118,7 @@ export class ToscaFunctionComponent implements OnInit { return; } this.toscaGetFunction = new ToscaGetFunction(this.property.toscaGetFunction); + this.toscaGetFunctionForm.setValue(this.toscaGetFunction); if (this.toscaGetFunction.functionType === ToscaGetFunctionType.GET_PROPERTY) { if (this.toscaGetFunction.propertySource === PropertySource.SELF) { this.propertySource = PropertySource.SELF; @@ -89,7 +131,6 @@ export class ToscaFunctionComponent implements OnInit { this.selectedProperty = this.propertyDropdownList.find(property => property.propertyName === this.toscaGetFunction.propertyName) }); } - } private loadToscaFunctions(): void { @@ -129,13 +170,14 @@ export class ToscaFunctionComponent implements OnInit { } } - private loadPropertyDropdown(onComplete: () => any = () => {}): void { + private loadPropertyDropdown(onComplete?: () => any): void { this.loadPropertyDropdownLabel(); this.loadPropertyDropdownValues(onComplete); } private resetForm(): void { this.toscaGetFunction = new ToscaGetFunction(undefined); + this.toscaGetFunctionForm.setValue(new ToscaGetFunction(undefined)); this.propertySource = undefined; this.selectedProperty = undefined; } @@ -149,6 +191,10 @@ export class ToscaFunctionComponent implements OnInit { this.toscaGetFunction.propertyPathFromSource = undefined; this.propertySource = undefined; this.selectedProperty = undefined; + + const toscaGetFunction1 = new ToscaGetFunction(undefined); + toscaGetFunction1.functionType = this.toscaGetFunction.functionType; + this.toscaGetFunctionForm.setValue(toscaGetFunction1); } private loadPropertyDropdownLabel(): void { @@ -162,7 +208,7 @@ export class ToscaFunctionComponent implements OnInit { } } - private loadPropertyDropdownValues(onComplete: () => any = () => {}): void { + private loadPropertyDropdownValues(onComplete?: () => any): void { if (!this.toscaGetFunction.functionType) { return; } @@ -176,7 +222,7 @@ export class ToscaFunctionComponent implements OnInit { this.propertyDropdownList = []; } - private fillPropertyDropdownValues(onComplete: () => any = () => {}): void { + private fillPropertyDropdownValues(onComplete?: () => any): void { this.startLoading(); const propertiesObservable: Observable = this.getPropertyObservable(); propertiesObservable.subscribe( (response: ComponentGenericResponse) => { @@ -194,7 +240,9 @@ export class ToscaFunctionComponent implements OnInit { }, (error) => { console.error('An error occurred while loading properties.', error); }, () => { - onComplete(); + if (onComplete) { + onComplete(); + } this.stopLoading(); }); } @@ -316,6 +364,7 @@ export class ToscaFunctionComponent implements OnInit { this.toscaGetFunction.sourceName = this.propertySource; this.toscaGetFunction.sourceUniqueId = this.instanceNameAndIdMap.get(this.propertySource); } + this.toscaGetFunctionForm.setValue(this.toscaGetFunction); this.loadPropertyDropdown(); } @@ -323,12 +372,14 @@ export class ToscaFunctionComponent implements OnInit { this.toscaGetFunction.propertySource = PropertySource.SELF; this.toscaGetFunction.sourceName = this.componentMetadata.name; this.toscaGetFunction.sourceUniqueId = this.componentMetadata.uniqueId; + this.toscaGetFunctionForm.setValue(this.toscaGetFunction); } onPropertyChange(): void { this.toscaGetFunction.propertyUniqueId = this.selectedProperty.propertyId; this.toscaGetFunction.propertyName = this.selectedProperty.propertyName; this.toscaGetFunction.propertyPathFromSource = this.selectedProperty.propertyPath; + this.toscaGetFunctionForm.setValue(this.toscaGetFunction); } onClearValues() { diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts index 4218123215..2741c464c8 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts +++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts @@ -20,21 +20,25 @@ 'use strict'; import * as _ from "lodash"; -import { PROPERTY_TYPES, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS, FormState, PROPERTY_DATA } from "app/utils"; -import { DataTypesService } from "app/services"; -import { PropertyModel, DataTypesMap, Component, GroupInstance, PolicyInstance, PropertyBEModel, ComponentMetadata } from "app/models"; -import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance"; -import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service"; -import { SdcUiCommon, SdcUiServices, SdcUiComponents } from "onap-ui-angular"; -import { CompositionService } from "app/ng2/pages/composition/composition.service"; -import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service"; -import { Observable } from "rxjs"; -import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service"; +import {FormState, PROPERTY_DATA, PROPERTY_TYPES, PROPERTY_VALUE_CONSTRAINTS, ValidationUtils} from "app/utils"; +import {DataTypesService} from "app/services"; +import {DataTypesMap, PropertyModel} from "app/models"; +import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance"; +import {ComponentInstanceServiceNg2} from "app/ng2/services/component-instance-services/component-instance.service"; +import {SdcUiCommon, SdcUiComponents, SdcUiServices} from "onap-ui-angular"; +import {CompositionService} from "app/ng2/pages/composition/composition.service"; +import {WorkspaceService} from "app/ng2/pages/workspace/workspace.service"; +import {Observable} from "rxjs"; +import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service"; +import {InstanceFeDetails} from "../../../../models/instance-fe-details"; +import {ToscaGetFunction} from "../../../../models/tosca-get-function"; export interface IEditPropertyModel { property:PropertyModel; types:Array; simpleTypes:Array; + hasGetFunctionValue: boolean; + isGetFunctionValid: boolean; } interface IPropertyFormViewModelScope extends ng.IScope { @@ -43,11 +47,12 @@ interface IPropertyFormViewModelScope extends ng.IScope { footerButtons:Array; isNew:boolean; isLoading:boolean; - isService:boolean; + componentMetadata: { isService: boolean, isVfc: boolean } validationPattern:RegExp; propertyNameValidationPattern:RegExp; commentValidationPattern:RegExp; - editPropertyModel:IEditPropertyModel; + editPropertyModel: IEditPropertyModel; + componentInstanceMap: Map; modalInstanceProperty:ng.ui.bootstrap.IModalServiceInstance; currentPropertyIndex:number; isLastProperty:boolean; @@ -60,6 +65,7 @@ interface IPropertyFormViewModelScope extends ng.IScope { isVnfConfiguration:boolean; constraints:string[]; modelNameFilter:string; + isGetFunctionValueType: boolean; validateJson(json:string):boolean; save(doNotCloseModal?:boolean):void; @@ -75,6 +81,7 @@ interface IPropertyFormViewModelScope extends ng.IScope { getNext():void; isSimpleType(typeName:string):boolean; getDefaultValue():any; + onValueTypeChange(): void; } export class PropertyFormViewModel { @@ -134,43 +141,77 @@ export class PropertyFormViewModel { this.$scope.editPropertyModel.property.type = this.property.type ? this.property.type : null; this.$scope.editPropertyModel.property.value = this.$scope.editPropertyModel.property.value || this.$scope.editPropertyModel.property.defaultValue; this.$scope.constraints = this.property.constraints && this.property.constraints[0] ? this.property.constraints[0]["validValues"] : null; + this.initToscaGetFunction(); this.setMaxLength(); }; - //init property add-ons labels that show up at the left side of the input. - private initAddOnLabels = () => { - if (this.$scope.editPropertyModel.property.name == 'network_role' && this.$scope.isService) { - //the server sends back the normalized name. Remove it (to prevent interference with validation) and set the addon label to the component name directly. - //Note: this cant be done in properties.ts because we dont have access to the component - if (this.$scope.editPropertyModel.property.value) { - let splitProp = this.$scope.editPropertyModel.property.value.split(new RegExp(this.workspaceService.metadata.normalizedName + '.', "gi")); - this.$scope.editPropertyModel.property.value = splitProp.pop(); - } - this.$scope.editPropertyModel.property.addOn = this.workspaceService.metadata.name; - } + private initToscaGetFunction() { + this.$scope.editPropertyModel.hasGetFunctionValue = this.$scope.editPropertyModel.property.isToscaGetFunction(); + this.$scope.editPropertyModel.isGetFunctionValid = true; } private initForNotSimpleType = ():void => { - let property = this.$scope.editPropertyModel.property; + const property = this.$scope.editPropertyModel.property; this.$scope.isTypeDataType = this.DataTypesService.isDataTypeForPropertyType(this.$scope.editPropertyModel.property); - if (property.type && this.$scope.editPropertyModel.simpleTypes.indexOf(property.type) == -1) { - if (!(property.value || property.defaultValue)) { - switch (property.type) { - case PROPERTY_TYPES.MAP: - this.$scope.myValue = {'': null}; - break; - case PROPERTY_TYPES.LIST: - this.$scope.myValue = []; - break; - default: - this.$scope.myValue = {}; - } - } else { + if (property.isToscaGetFunction()) { + this.initValueForGetFunction(); + return; + } + + if (this.isComplexType(property.type)) { + if (property.value || property.defaultValue) { this.$scope.myValue = JSON.parse(property.value || property.defaultValue); + } else { + this.initEmptyComplexValue(property.type); } } }; + private initValueForGetFunction(): void { + const property = this.$scope.editPropertyModel.property; + if (property.defaultValue) { + this.$scope.myValue = JSON.parse(property.defaultValue); + return; + } + if (this.isComplexType(property.type)) { + this.initEmptyComplexValue(property.type); + return; + } + + this.$scope.myValue = undefined; + } + + private initComponentInstanceMap() { + this.$scope.componentInstanceMap = new Map(); + if (this.compositionService.componentInstances) { + this.compositionService.componentInstances.forEach(value => { + this.$scope.componentInstanceMap.set(value.uniqueId, { + name: value.name + }); + }); + } + } + + private initEmptyComplexValue(type: string): any { + switch (type) { + case PROPERTY_TYPES.MAP: + this.$scope.myValue = {'': null}; + break; + case PROPERTY_TYPES.LIST: + this.$scope.myValue = []; + break; + default: + this.$scope.myValue = {}; + } + } + + private isComplexType(type: string): boolean { + if (!type) { + return false; + } + return PROPERTY_DATA.SIMPLE_TYPES.indexOf(type) == -1; + } + private setMaxLength = ():void => { switch (this.$scope.editPropertyModel.property.type) { case PROPERTY_TYPES.MAP: @@ -197,21 +238,28 @@ export class PropertyFormViewModel { this.$scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; this.$scope.commentValidationPattern = this.CommentValidationPattern; this.$scope.isNew = (this.formState === FormState.CREATE); - this.$scope.isService = this.workspaceService.metadata.isService(); + this.$scope.componentMetadata = { + isService: this.workspaceService.metadata.isService(), + isVfc: this.workspaceService.metadata.isVfc() + } this.$scope.modalInstanceProperty = this.$uibModalInstance; this.$scope.currentPropertyIndex = _.findIndex(this.filteredProperties, i=> i.name == this.property.name); this.$scope.isLastProperty = this.$scope.currentPropertyIndex == (this.filteredProperties.length - 1); + const property = new PropertyModel(this.property); this.$scope.editPropertyModel = { - property : new PropertyModel(this.property), - types : PROPERTY_DATA.TYPES, - simpleTypes : PROPERTY_DATA.SIMPLE_TYPES}; //All simple types + 'property': property, + types: PROPERTY_DATA.TYPES, + simpleTypes: PROPERTY_DATA.SIMPLE_TYPES, + hasGetFunctionValue: property.isToscaGetFunction(), + isGetFunctionValid: true, + }; this.$scope.isPropertyValueOwner = this.isPropertyValueOwner; this.$scope.propertyOwnerType = this.propertyOwnerType; this.$scope.modelNameFilter = this.workspaceService.metadata.model; //check if property of VnfConfiguration this.$scope.isVnfConfiguration = false; if(this.propertyOwnerType == "component" && angular.isArray(this.compositionService.componentInstances)) { - var componentPropertyOwner:ComponentInstance = this.compositionService.componentInstances.find((ci:ComponentInstance) => { + const componentPropertyOwner:ComponentInstance = this.compositionService.componentInstances.find((ci:ComponentInstance) => { return ci.uniqueId === this.property.resourceInstanceUniqueId; }); if (componentPropertyOwner && componentPropertyOwner.componentName === 'vnfConfiguration') { @@ -220,6 +268,7 @@ export class PropertyFormViewModel { } this.initResource(); this.initForNotSimpleType(); + this.initComponentInstanceMap(); this.$scope.validateJson = (json:string):boolean => { if (!json) { @@ -251,8 +300,8 @@ export class PropertyFormViewModel { this.$scope.isLoading = true; - let onPropertyFaild = (response):void => { - console.info('onFaild', response); + let onPropertyFailure = (response):void => { + console.error('Failed to update property', response); this.$scope.isLoading = false; }; @@ -270,7 +319,7 @@ export class PropertyFormViewModel { //Not clean, but doing this as a temporary fix until we update the property right panel modals if (this.propertyOwnerType === "group"){ this.ComponentInstanceServiceNg2.updateComponentGroupInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.propertyOwnerId, [property]) - .subscribe((propertiesFromBE) => { onPropertySuccess(propertiesFromBE[0])}, error => onPropertyFaild(error)); + .subscribe((propertiesFromBE) => { onPropertySuccess(propertiesFromBE[0])}, error => onPropertyFailure(error)); } else if (this.propertyOwnerType === "policy"){ if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(this.$scope.editPropertyModel.property.type) && @@ -278,24 +327,22 @@ export class PropertyFormViewModel { property.value = JSON.stringify(this.$scope.myValue); } this.ComponentInstanceServiceNg2.updateComponentPolicyInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.propertyOwnerId, [property]) - .subscribe((propertiesFromBE) => { onPropertySuccess(propertiesFromBE[0])}, error => onPropertyFaild(error)); + .subscribe((propertiesFromBE) => { onPropertySuccess(propertiesFromBE[0])}, error => onPropertyFailure(error)); } else { //in case we have uniqueId we call update method if (this.$scope.isPropertyValueOwner) { if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(property.type)) { - let myValueString:string = JSON.stringify(this.$scope.myValue); - property.value = myValueString; + property.value = JSON.stringify(this.$scope.myValue); } this.updateInstanceProperties(property.resourceInstanceUniqueId, [property]).subscribe((propertiesFromBE) => onPropertySuccess(propertiesFromBE[0]), - error => onPropertyFaild(error)); + error => onPropertyFailure(error)); } else { if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(property.type)) { - let myValueString:string = JSON.stringify(this.$scope.myValue); - property.defaultValue = myValueString; + property.defaultValue = JSON.stringify(this.$scope.myValue); } else { this.$scope.editPropertyModel.property.defaultValue = this.$scope.editPropertyModel.property.value; } - this.addOrUpdateProperty(property).subscribe(onPropertySuccess, error => onPropertyFaild(error)); + this.addOrUpdateProperty(property).subscribe(onPropertySuccess, error => onPropertyFailure(error)); } } }; @@ -349,8 +396,20 @@ export class PropertyFormViewModel { {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close} ]; - this.$scope.$watch("forms.editForm.$invalid", (newVal, oldVal) => { - this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid; + this.$scope.$watch("forms.editForm.$invalid", (newVal) => { + if (this.$scope.editPropertyModel.hasGetFunctionValue) { + this.$scope.footerButtons[0].disabled = newVal || !this.$scope.editPropertyModel.property.toscaGetFunction; + } else { + this.$scope.footerButtons[0].disabled = newVal; + } + }); + + this.$scope.$watch("forms.editForm.$valid", (newVal) => { + if (this.$scope.editPropertyModel.hasGetFunctionValue) { + this.$scope.footerButtons[0].disabled = !newVal || !this.$scope.editPropertyModel.property.toscaGetFunction; + } else { + this.$scope.footerButtons[0].disabled = !newVal; + } }); this.$scope.getDefaultValue = ():any => { @@ -384,8 +443,41 @@ export class PropertyFormViewModel { const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.info, callback: onOk, closeModal: true} as SdcUiComponents.ModalButtonComponent; this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]); }; + + this.$scope.onValueTypeChange = (): void => { + this.setEmptyValue(); + if (this.$scope.editPropertyModel.hasGetFunctionValue) { + this.$scope.editPropertyModel.isGetFunctionValid = undefined; + } else { + this.$scope.editPropertyModel.property.toscaGetFunction = undefined; + this.$scope.editPropertyModel.isGetFunctionValid = true; + } + } + + this.$scope.onGetFunctionValidFunction = (toscaGetFunction: ToscaGetFunction): void => { + this.$scope.editPropertyModel.property.toscaGetFunction = toscaGetFunction; + } + + this.$scope.onGetFunctionValidityChange = (isValid: boolean): void => { + if (isValid) { + this.$scope.editPropertyModel.isGetFunctionValid = true; + return; + } + this.$scope.editPropertyModel.isGetFunctionValid = undefined; + } + }; + private setEmptyValue() { + const property1 = this.$scope.editPropertyModel.property; + property1.value = undefined; + if (this.isComplexType(property1.type)) { + this.initEmptyComplexValue(property1.type); + return; + } + this.$scope.myValue = ''; + } + private updateInstanceProperties = (componentInstanceId:string, properties:PropertyModel[]):Observable => { return this.ComponentInstanceServiceNg2.updateInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, componentInstanceId, properties) @@ -428,12 +520,13 @@ export class PropertyFormViewModel { public deleteProperty = (propertyId:string):Observable => { let onSuccess = ():void => { - console.log("Property deleted"); + console.debug("Property deleted"); delete _.remove(this.filteredProperties, {uniqueId: propertyId})[0]; }; let onFailed = ():void => { - console.log("Failed to delete property"); + console.debug("Failed to delete property"); }; return this.topologyTemplateService.deleteProperty(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, propertyId).map(onSuccess, onFailed); }; + } \ No newline at end of file diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html index 49ff38bb76..cb46abee56 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html +++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html @@ -34,7 +34,7 @@
- +
- + + Value + {{'TOSCA_FUNCTION_LABEL' | translate}} +
+ + +
+ +
+
+ + +
+
+
+ + max-length="maxLength" + constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"> + +
-
-
-
- - -
- -
- -
- -
-
- {{editPropertyModel.property.addOn}} - - + + - - - - - - - + {{value}} + + + + + + - - - -
- - - + data-ng-change="" + autofocus/> + + + +
+ + + +
-- cgit 1.2.3-korg