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>

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>