diff options
Diffstat (limited to 'catalog-ui/src/app')
5 files changed, 334 insertions, 153 deletions
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<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); @Input() allowClear: boolean = true; + @Output() onValidFunction: EventEmitter<ToscaGetFunction> = new EventEmitter<ToscaGetFunction>(); + @Output() onValidityChange: EventEmitter<boolean> = new EventEmitter<boolean>(); + + 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<ComponentGenericResponse> = 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<string>; simpleTypes:Array<string>; + hasGetFunctionValue: boolean; + isGetFunctionValid: boolean; } interface IPropertyFormViewModelScope extends ng.IScope { @@ -43,11 +47,12 @@ interface IPropertyFormViewModelScope extends ng.IScope { footerButtons:Array<any>; isNew:boolean; isLoading:boolean; - isService:boolean; + componentMetadata: { isService: boolean, isVfc: boolean } validationPattern:RegExp; propertyNameValidationPattern:RegExp; commentValidationPattern:RegExp; - editPropertyModel:IEditPropertyModel; + editPropertyModel: IEditPropertyModel; + componentInstanceMap: Map<string, InstanceFeDetails>; 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<string, InstanceFeDetails>(); + if (this.compositionService.componentInstances) { + this.compositionService.componentInstances.forEach(value => { + this.$scope.componentInstanceMap.set(value.uniqueId, <InstanceFeDetails>{ + 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(<PropertyModel>propertiesFromBE[0])}, error => onPropertyFaild(error)); + .subscribe((propertiesFromBE) => { onPropertySuccess(<PropertyModel>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(<PropertyModel>propertiesFromBE[0])}, error => onPropertyFaild(error)); + .subscribe((propertiesFromBE) => { onPropertySuccess(<PropertyModel>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<PropertyModel[]> => { 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<void> => { 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 @@ <!-- Name --> <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.propertyName.$dirty && forms.editForm.propertyName.$invalid)}"> - <label class="i-sdc-form-label" ng-class="{'required': !isService}">Name</label> + <label class="i-sdc-form-label" ng-class="{'required': !componentMetadata.isService}">Name</label> <input class="i-sdc-form-input" data-tests-id="propertyName" data-ng-maxlength="50" @@ -61,7 +61,7 @@ <div class="w-sdc-form-column"> <!-- Type --> <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}"> - <label class="i-sdc-form-label" ng-class="{'required': !isService}">Type</label> + <label class="i-sdc-form-label" ng-class="{'required': !componentMetadata.isService}">Type</label> <select class="i-sdc-form-select" data-tests-id="propertyType" data-required @@ -141,94 +141,121 @@ <div class="default-value-section i-sdc-form-item"> <label class="i-sdc-form-label">Default Value</label> - <div data-ng-if="isTypeDataType"> - <fields-structure value-obj-ref="myValue" - type-name="editPropertyModel.property.type" + <ng-container ng-if="!componentMetadata.isVfc"> + <input type="hidden" ng-model="editPropertyModel.isGetFunctionValid" required="required"/> + <input type="radio" name="hasGetFunctionValue" + ng-model="editPropertyModel.hasGetFunctionValue" + ng-value="false" + ng-change="onValueTypeChange()"/> Value + <input type="radio" name="hasGetFunctionValue" + ng-model="editPropertyModel.hasGetFunctionValue" + ng-value="true" + ng-change="onValueTypeChange()"/> {{'TOSCA_FUNCTION_LABEL' | translate}} + <div data-ng-if="editPropertyModel.hasGetFunctionValue"> + <tosca-function [property]="editPropertyModel.property" + [component-instance-map]="componentInstanceMap" + [allow-clear]="false" + (on-valid-function)="onGetFunctionValidFunction($event)" + (on-validity-change)="onGetFunctionValidityChange($event)" + > + </tosca-function> + </div> + </ng-container> + <div data-ng-if="!editPropertyModel.hasGetFunctionValue"> + <div data-ng-if="isTypeDataType"> + <fields-structure value-obj-ref="myValue" + type-name="editPropertyModel.property.type" + parent-form-obj="forms.editForm" + fields-prefix-name="currentPropertyIndex" + read-only="editPropertyModel.property.readonly && !isPropertyValueOwner" + default-value="{{getDefaultValue()}}" + expand-by-default="true"></fields-structure> + + </div> + <div data-ng-if="!isTypeDataType" ng-switch="editPropertyModel.property.type"> + <div ng-switch-when="map"> + <type-map value-obj-ref="myValue" + schema-property="editPropertyModel.property.schema.property" parent-form-obj="forms.editForm" fields-prefix-name="currentPropertyIndex" - read-only="editPropertyModel.property.readonly && !isPropertyValueOwner" + read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration" default-value="{{getDefaultValue()}}" - expand-by-default="true"></fields-structure> + max-length="maxLength" + constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"> + </type-map> + </div> - </div> - <div data-ng-if="!isTypeDataType" ng-switch="editPropertyModel.property.type"> - <div ng-switch-when="map"> - <type-map value-obj-ref="myValue" - schema-property="editPropertyModel.property.schema.property" - parent-form-obj="forms.editForm" - fields-prefix-name="currentPropertyIndex" - read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration" - default-value="{{getDefaultValue()}}" - max-length="maxLength" - constraints = "editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"> - </type-map> - </div> - - <div ng-switch-when="list"> - <type-list value-obj-ref="myValue" - schema-property="editPropertyModel.property.schema.property" - parent-form-obj="forms.editForm" - fields-prefix-name="currentPropertyIndex" - read-only="editPropertyModel.property.readonly && !isPropertyValueOwner" - default-value="{{getDefaultValue()}}" - max-length="maxLength" - constraints = "editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"></type-list> - </div> - - <div ng-switch-default> - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid), 'input-group' : editPropertyModel.property.addOn}"> - <span ng-if="editPropertyModel.property.addOn" class="input-group-addon">{{editPropertyModel.property.addOn}}</span> - <!-- Has Constraints --> - <select class="i-sdc-form-select" - data-tests-id="constraints" - ng-if="(editPropertyModel.property.constraints)" - data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" - - data-ng-change="onValueChange()" - data-ng-model="editPropertyModel.property.value"> - <!-- Get the default value in case exist --> - <option value = "{{editPropertyModel.property.value}}" name = "{{editPropertyModel.property.value}}" hidden selected> + <div ng-switch-when="list"> + <type-list value-obj-ref="myValue" + schema-property="editPropertyModel.property.schema.property" + parent-form-obj="forms.editForm" + fields-prefix-name="currentPropertyIndex" + read-only="editPropertyModel.property.readonly && !isPropertyValueOwner" + default-value="{{getDefaultValue()}}" + max-length="maxLength" + constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"></type-list> + </div> + + <div ng-switch-default> + <div class="i-sdc-form-item" + data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid), 'input-group' : editPropertyModel.property.addOn}"> + <span ng-if="editPropertyModel.property.addOn" + class="input-group-addon">{{editPropertyModel.property.addOn}}</span> + <!-- Has Constraints --> + <select class="i-sdc-form-select" + data-tests-id="constraints" + ng-if="(editPropertyModel.property.constraints)" + data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" + + data-ng-change="onValueChange()" + data-ng-model="editPropertyModel.property.value"> + <!-- Get the default value in case exist --> + <option value="{{editPropertyModel.property.value}}" name="{{editPropertyModel.property.value}}" hidden + selected> {{editPropertyModel.property.value}} - </option> - <!-- add all constratint to Select list --> - <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}"> - {{value}} - </option> - </select> - - - <!-- No Constraints --> - <input class="i-sdc-form-input" - data-tests-id="defaultvalue" - ng-if="!(editPropertyModel.property.constraints) && !((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')" - data-ng-maxlength="maxLength" - data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" - maxlength="{{maxLength}}" - data-ng-model="editPropertyModel.property.value" - type="text" - name="value" - data-ng-pattern="getValidationPattern((editPropertyModel.property.simpleType||editPropertyModel.property.type))" - data-ng-model-options="{ debounce: 200 }" - data-ng-change="('json'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateJson(editPropertyModel.property.value))) + </option> + <!-- add all constratint to Select list --> + <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}"> + {{value}} + </option> + </select> + + + <!-- No Constraints --> + <input class="i-sdc-form-input" + data-tests-id="defaultvalue" + ng-if="!(editPropertyModel.property.constraints) && !((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')" + data-ng-maxlength="maxLength" + data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" + maxlength="{{maxLength}}" + data-ng-model="editPropertyModel.property.value" + type="text" + name="value" + data-ng-pattern="getValidationPattern((editPropertyModel.property.simpleType||editPropertyModel.property.type))" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="('json'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateJson(editPropertyModel.property.value))) ||(!forms.editForm.value.$error.pattern && ('integer'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editPropertyModel.property.value)) || onValueChange()))" - data-ng-change="" - autofocus /> - <!-- Boolean --> - <select class="i-sdc-form-select" - data-tests-id="booleantype" - ng-if="(editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean'" - data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" - name="value" - data-ng-change="onValueChange()" - data-ng-model="editPropertyModel.property.value"> - <option value="true">true</option> - <option value="false">false</option> - </select> - - <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid"> - <span ng-show="forms.editForm.value.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Property' }"></span> - <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span> - <span ng-show="forms.editForm.value.$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + data-ng-change="" + autofocus/> + <!-- Boolean --> + <select class="i-sdc-form-select" + data-tests-id="booleantype" + ng-if="(editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean'" + data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" + name="value" + data-ng-change="onValueChange()" + data-ng-model="editPropertyModel.property.value"> + <option value="true">true</option> + <option value="false">false</option> + </select> + + <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid"> + <span ng-show="forms.editForm.value.$error.required" translate="VALIDATION_ERROR_REQUIRED" + translate-values="{'field': 'Property' }"></span> + <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" + translate-values="{'max': '{{maxLength}}' }"></span> + <span ng-show="forms.editForm.value.$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + </div> </div> </div> </div> |