aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui
diff options
context:
space:
mode:
authorandre.schmid <andre.schmid@est.tech>2022-06-02 16:34:57 +0100
committerMichael Morris <michael.morris@est.tech>2022-06-07 13:10:52 +0000
commit80c2cf3c70db2605eb9c2e28515a73567f3404ee (patch)
treeddec78db9cd3f90ce9af1ff0e747cb97573b677e /catalog-ui
parent90d6e2ddd348afd42b08d66c6e2308c63535e8de (diff)
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 <andre.schmid@est.tech>
Diffstat (limited to 'catalog-ui')
-rw-r--r--catalog-ui/src/app/models/component-metadata.ts6
-rw-r--r--catalog-ui/src/app/modules/directive-module.ts18
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts63
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts205
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html195
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>