Support of get_property in property assignment

Refactors the current way store a get_input function allowing
to support different get functions (get_property in this case).
The information stored allows recreating and correctly validating
the get function.
Fix get function schema validation, the schema was being ignored.
Improve validation error status and messages.
Improve tosca get function dialog.

Change-Id: I5de5f96dfba3c7a0fbb458885af5528bea7835aa
Issue-ID: SDC-4014
Signed-off-by: andre.schmid <andre.schmid@est.tech>

15 files changed, 451 insertions, 191 deletions

diff --git a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
index 267a2adc71..a5bf3cb7a0 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
@@ -23,7 +23,9 @@ import {SchemaProperty, SchemaPropertyGroupModel} from '../schema-property';
 import {ToscaPresentationData} from '../tosca-presentation';
 import {PropertyInputDetail} from './property-input-detail';
 import {Metadata} from '../metadata';
-import {ToscaGetFunctionType} from "../tosca-get-function-type.enum";
+import {ToscaGetFunctionType} from "../tosca-get-function-type";
+import {ToscaGetFunctionDto} from '../tosca-get-function-dto';
+import {PropertySource} from '../property-source';
 
 export enum DerivedPropertyType {
     SIMPLE,
@@ -66,7 +68,9 @@ export class PropertyBEModel {
     inputPath: string;
     toscaPresentation: ToscaPresentationData;
     metadata: Metadata;
+    //deprecated
     toscaGetFunctionType: ToscaGetFunctionType;
+    toscaGetFunction: ToscaGetFunctionDto;
 
     constructor(property?: PropertyBEModel) {
         if (property) {
@@ -92,7 +96,13 @@ export class PropertyBEModel {
             this.getPolicyValues = property.getPolicyValues;
             this.inputPath = property.inputPath;
             this.metadata = property.metadata;
-            this.toscaGetFunctionType = property.toscaGetFunctionType;
+            if (property.toscaGetFunction) {
+                this.toscaGetFunction = property.toscaGetFunction;
+            } else if (property.toscaGetFunctionType) {
+                this.toscaGetFunction = new ToscaGetFunctionDto();
+                this.toscaGetFunction.functionType = property.toscaGetFunctionType;
+                this.toscaGetFunction.propertySource = PropertySource.SELF;
+            }
         }
 
         if (!this.schema || !this.schema.property) {
@@ -171,7 +181,7 @@ export class PropertyBEModel {
      * Checks whether the property value is a tosca get function (e.g. get_input, get_property, get_attribute)
      */
     public isToscaGetFunction(): boolean {
-        return this.toscaGetFunctionType != null;
+        return this.toscaGetFunction != null;
     }
 }
 
diff --git a/catalog-ui/src/app/models/property-source.ts b/catalog-ui/src/app/models/property-source.ts
new file mode 100644
index 0000000000..41ba1b6185
--- /dev/null
+++ b/catalog-ui/src/app/models/property-source.ts
@@ -0,0 +1,25 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2022 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+export enum PropertySource {
+  SELF = 'SELF',
+  INSTANCE = 'INSTANCE'
+}
diff --git a/catalog-ui/src/app/models/tosca-get-function-dto.ts b/catalog-ui/src/app/models/tosca-get-function-dto.ts
new file mode 100644
index 0000000000..b5ddad7b71
--- /dev/null
+++ b/catalog-ui/src/app/models/tosca-get-function-dto.ts
@@ -0,0 +1,76 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2022 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {ToscaGetFunctionType} from './tosca-get-function-type';
+import {PropertySource} from './property-source';
+
+export class ToscaGetFunctionDto {
+    propertyUniqueId: string;
+    propertyName: string;
+    propertySource: PropertySource;
+    sourceUniqueId: string;
+    sourceName: string;
+    functionType: ToscaGetFunctionType;
+    propertyPathFromSource: Array<string>;
+}
+
+export class ToscaGetFunctionDtoBuilder {
+    toscaGetFunctionDto: ToscaGetFunctionDto = new ToscaGetFunctionDto();
+
+    withPropertyUniqueId(propertyUniqueId: string): ToscaGetFunctionDtoBuilder {
+        this.toscaGetFunctionDto.propertyUniqueId = propertyUniqueId;
+        return this;
+    }
+
+    withPropertyName(propertyName: string): ToscaGetFunctionDtoBuilder {
+        this.toscaGetFunctionDto.propertyName = propertyName;
+        return this;
+    }
+
+    withPropertySource(propertySource: PropertySource): ToscaGetFunctionDtoBuilder {
+        this.toscaGetFunctionDto.propertySource = propertySource;
+        return this;
+    }
+
+    withSourceUniqueId(sourceUniqueId: string): ToscaGetFunctionDtoBuilder {
+        this.toscaGetFunctionDto.sourceUniqueId = sourceUniqueId;
+        return this;
+    }
+
+    withSourceName(sourceName: string): ToscaGetFunctionDtoBuilder {
+        this.toscaGetFunctionDto.sourceName = sourceName;
+        return this;
+    }
+
+    withFunctionType(functionType: ToscaGetFunctionType): ToscaGetFunctionDtoBuilder {
+        this.toscaGetFunctionDto.functionType = functionType;
+        return this;
+    }
+
+    withPropertyPathFromSource(propertyPathFromSource: Array<string>): ToscaGetFunctionDtoBuilder {
+        this.toscaGetFunctionDto.propertyPathFromSource = propertyPathFromSource;
+        return this;
+    }
+
+    build(): ToscaGetFunctionDto {
+        return this.toscaGetFunctionDto;
+    }
+}
diff --git a/catalog-ui/src/app/models/tosca-get-function-type-converter.ts b/catalog-ui/src/app/models/tosca-get-function-type-converter.ts
new file mode 100644
index 0000000000..0447c4bce3
--- /dev/null
+++ b/catalog-ui/src/app/models/tosca-get-function-type-converter.ts
@@ -0,0 +1,47 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2022 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {ToscaGetFunctionType} from './tosca-get-function-type';
+
+export class ToscaGetFunctionTypeConverter {
+
+  static convertFromString(toscaGetFunction: string): ToscaGetFunctionType {
+    if (!toscaGetFunction) {
+      return;
+    }
+
+    if (ToscaGetFunctionType.GET_INPUT === toscaGetFunction.toUpperCase()) {
+      return ToscaGetFunctionType.GET_INPUT;
+    }
+
+    if (ToscaGetFunctionType.GET_PROPERTY === toscaGetFunction.toUpperCase()) {
+      return ToscaGetFunctionType.GET_PROPERTY;
+    }
+
+    if (ToscaGetFunctionType.GET_ATTRIBUTE === toscaGetFunction.toUpperCase()) {
+      return ToscaGetFunctionType.GET_ATTRIBUTE;
+    }
+
+    return undefined;
+
+  }
+
+}
diff --git a/catalog-ui/src/app/models/tosca-get-function-type.enum.ts b/catalog-ui/src/app/models/tosca-get-function-type.ts
index 1ee4ae1eae..1ee4ae1eae 100644
--- a/catalog-ui/src/app/models/tosca-get-function-type.enum.ts
+++ b/catalog-ui/src/app/models/tosca-get-function-type.ts
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
index ba19e266b7..c0a883a1ed 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
@@ -93,12 +93,12 @@ class ModalTranslation {
     CLOSE_BUTTON: string;
     SAVE_BUTTON: string;
 
-    constructor(private TranslateService: TranslateService) {
-        this.TranslateService.languageChangedObservable.subscribe(lang => {
-            this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE');
-            this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON");
-            this.CLOSE_BUTTON = this.TranslateService.translate("INTERFACE_CLOSE_BUTTON");
-            this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON");
+    constructor(private translateService: TranslateService) {
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.EDIT_TITLE = this.translateService.translate('INTERFACE_EDIT_TITLE');
+            this.CANCEL_BUTTON = this.translateService.translate("INTERFACE_CANCEL_BUTTON");
+            this.CLOSE_BUTTON = this.translateService.translate("INTERFACE_CLOSE_BUTTON");
+            this.SAVE_BUTTON = this.translateService.translate("INTERFACE_SAVE_BUTTON");
         });
     }
 }
@@ -148,15 +148,15 @@ export class InterfaceOperationsComponent {
 
 
     constructor(
-        private TranslateService: TranslateService,
-        private PluginsService: PluginsService,
+        private translateService: TranslateService,
+        private pluginsService: PluginsService,
         private topologyTemplateService: TopologyTemplateService,
         private toscaArtifactService: ToscaArtifactService,
         private modalServiceNg2: ModalService,
         private workspaceService: WorkspaceService,
         @Inject("Notification") private Notification: any,
     ) {
-        this.modalTranslation = new ModalTranslation(TranslateService);
+        this.modalTranslation = new ModalTranslation(translateService);
     }
 
     ngOnInit(): void {
@@ -214,8 +214,8 @@ export class InterfaceOperationsComponent {
         ).length === 0;
     }
 
-    private enableOrDisableSaveButton = (): boolean => {
-        return this.isViewOnly;
+    private enableOrDisableSaveButton = (isValid): boolean => {
+        return isValid;
     }
 
     onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) {
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts
index dc16a12d3e..6bb697be2c 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts
@@ -12,7 +12,7 @@ import {
     InputsGroup,
     InputModel
 } from 'app/models';
-import {ToscaGetFunctionType} from "app/models/tosca-get-function-type.enum";
+import {ToscaGetFunctionType} from "app/models/tosca-get-function-type";
 import { CompositionService } from 'app/ng2/pages/composition/composition.service';
 import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
 import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index a6e0b51136..2d491cd544 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -19,7 +19,7 @@
  */
 
 import * as _ from "lodash";
-import {Component, Inject, ViewChild, ComponentRef} from "@angular/core";
+import {Component, Inject, ViewChild} from "@angular/core";
 import {PropertiesService} from "../../services/properties.service";
 import {
     ButtonModel,
@@ -37,7 +37,6 @@ import {
     PolicyInstance,
     PropertyBEModel,
     PropertyFEModel,
-    PropertyInputDetail,
     Service,
     SimpleFlatProperty
 } from "app/models";
@@ -62,13 +61,15 @@ import {UnsavedChangesComponent} from "app/ng2/components/ui/forms/unsaved-chang
 import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
 import {ModalService} from "../../services/modal.service";
 import {DeclareListComponent} from "./declare-list/declare-list.component";
-import {ToscaFunctionComponent} from "./tosca-function/tosca-function.component";
+import {PropertyDropdownValue, ToscaFunctionComponent} from "./tosca-function/tosca-function.component";
 import {CapabilitiesGroup, Capability} from "../../../models/capability";
 import {ToscaPresentationData} from "../../../models/tosca-presentation";
 import {Observable} from "rxjs";
-import {ToscaGetFunctionType} from "../../../models/tosca-get-function-type.enum";
+import {ToscaGetFunctionType} from "../../../models/tosca-get-function-type";
 import {TranslateService} from "../../shared/translator/translate.service";
-import {ModalComponent} from "../../components/ui/modal/modal.component";
+import {ToscaGetFunctionDtoBuilder} from '../../../models/tosca-get-function-dto';
+import {PropertySource} from '../../../models/property-source';
+import {ToscaGetFunctionTypeConverter} from '../../../models/tosca-get-function-type-converter';
 
 const SERVICE_SELF_TITLE = "SELF";
 @Component({
@@ -134,11 +135,11 @@ export class PropertiesAssignmentComponent {
                 @Inject("$stateParams") _stateParams,
                 @Inject("$scope") private $scope: ng.IScope,
                 @Inject("$state") private $state: ng.ui.IStateService,
-                @Inject("Notification") private Notification: any,
+                @Inject("Notification") private notification: any,
                 private componentModeService: ComponentModeService,
-                private EventListenerService: EventListenerService,
+                private eventListenerService: EventListenerService,
                 private ModalServiceSdcUI: SdcUiServices.ModalService,
-                private ModalService: ModalService,
+                private modalService: ModalService,
                 private keysPipe: KeysPipe,
                 private topologyTemplateService: TopologyTemplateService,
                 private translateService: TranslateService) {
@@ -147,7 +148,7 @@ export class PropertiesAssignmentComponent {
         /* This is the way you can access the component data, please do not use any data except metadata, all other data should be received from the new api calls on the first time
         than if the data is already exist, no need to call the api again - Ask orit if you have any questions*/
         this.component = _stateParams.component;
-        this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.onCheckout);
+        this.eventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.onCheckout);
         this.updateViewMode();
         this.changedData = [];
         this.updateHasChangedData();
@@ -155,7 +156,7 @@ export class PropertiesAssignmentComponent {
     }
 
     ngOnInit() {
-        console.log("==>" + this.constructor.name + ": ngOnInit");
+        console.debug("==>" + this.constructor.name + ": ngOnInit");
         this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
         this.loadingInputs = true;
         this.loadingPolicies = true;
@@ -223,10 +224,10 @@ export class PropertiesAssignmentComponent {
         });
 
       this.loadDataTypesByComponentModel(this.component.model);
-    };
+    }
 
     ngOnDestroy() {
-        this.EventListenerService.unRegisterObserver(EVENTS.ON_LIFECYCLE_CHANGE);
+        this.eventListenerService.unRegisterObserver(EVENTS.ON_LIFECYCLE_CHANGE);
         this.stateChangeStartUnregister();
     }
 
@@ -434,7 +435,7 @@ export class PropertiesAssignmentComponent {
      * Handle select node in navigation area, and select the row in table
      */
     onPropertySelectedUpdate = ($event) => {
-        console.log("==>" + this.constructor.name + ": onPropertySelectedUpdate");
+        console.debug("==>" + this.constructor.name + ": onPropertySelectedUpdate");
         this.selectedFlatProperty = $event;
         let parentProperty: PropertyFEModel = this.propertiesService.getParentPropertyFEModelFromPath(this.instanceFePropertiesMap[this.selectedFlatProperty.instanceName], this.selectedFlatProperty.path);
         parentProperty.expandedChildPropertyId = this.selectedFlatProperty.path;
@@ -444,7 +445,7 @@ export class PropertiesAssignmentComponent {
      * When user select row in table, this will prepare the hirarchy object for the tree.
      */
     selectPropertyRow = (propertyRowSelectedEvent: PropertyRowSelectedEvent) => {
-        console.log("==>" + this.constructor.name + ": selectPropertyRow " + propertyRowSelectedEvent.propertyModel.name);
+        console.debug("==>" + this.constructor.name + ": selectPropertyRow " + propertyRowSelectedEvent.propertyModel.name);
         let property = propertyRowSelectedEvent.propertyModel;
         let instanceName = propertyRowSelectedEvent.instanceName;
         this.propertyStructureHeader = null;
@@ -491,7 +492,7 @@ export class PropertiesAssignmentComponent {
             return;
         }
 
-        console.log("==>" + this.constructor.name + ": tabChanged " + event);
+        console.debug("==>" + this.constructor.name + ": tabChanged " + event);
         this.currentMainTab = this.propertyInputTabs.tabs.find((tab) => tab.title === event.title);
         this.isPropertiesTabSelected = this.currentMainTab.title === "Properties";
         this.isInputsTabSelected = this.currentMainTab.title === "Inputs";
@@ -500,78 +501,107 @@ export class PropertiesAssignmentComponent {
         this.searchQuery = '';
     };
 
-    /**Select Tosca function value from defined values**/
+    /**
+     * Select Tosca function value from defined values
+     */
     selectToscaFunctionAndValues = (): void => {
-        let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
-        angular.forEach(instancesIds, (instanceId: string): void => {
-            let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId
-                && instance instanceof ComponentInstance);
-            if (selectedInstanceData) {
-                let checkedProperties: PropertyBEModel[] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
-                angular.forEach(checkedProperties, (property: PropertyBEModel) => {
-                    this.propertiesService.setCheckedPropertyType(property.type);
-                    if (property.toscaGetFunctionType != null) {
-                        this.loadingProperties = true;
-                        property.getInputValues = null;
-                        property.value = null;
-                        property.toscaGetFunctionType = null;
-                        this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData);
-                    } else {
-                        const modalTitle = 'Set value using TOSCA functions';
-                        const modal = this.ModalService.createCustomModal(new ModalModel(
-                            'sm',
-                            modalTitle,
-                            null,
-                            [
-                                new ButtonModel('Save', 'blue',
-                                    () => {
-                                        const selectedToscaFunction: string = modal.instance.dynamicContent.instance.selectToscaFunction;
-                                        if (selectedToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
-                                            this.updateSelectInputValues(modal, property, checkedProperties, selectedInstanceData);
-                                        }
-                                        modal.instance.close();
-                                    }
-                                ),
-                                new ButtonModel('Cancel', 'outline grey', () => {
-                                    modal.instance.close();
-                                }),
-                            ],
-                            null /* type */
-                        )); //modal
-                        this.ModalService.addDynamicContentToModal(modal, ToscaFunctionComponent);
-                        modal.instance.open();
+        const selectedInstanceData: ComponentInstance = this.getSelectedComponentInstance();
+        if (!selectedInstanceData) {
+            return;
+        }
+        const property: PropertyBEModel = this.buildCheckedInstanceProperty();
+        if (property.isToscaGetFunction()) {
+            this.clearCheckedInstancePropertyValue();
+            return;
+        }
+        this.openToscaGetFunctionModal();
+    }
+
+    private getSelectedComponentInstance(): ComponentInstance {
+        const instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
+        const instanceId: string = instancesIds[0];
+        return <ComponentInstance> this.instances.find(instance => instance.uniqueId == instanceId && instance instanceof ComponentInstance);
+    }
+
+    private buildCheckedInstanceProperty(): PropertyBEModel {
+        return this.buildCheckedInstanceProperties()[0];
+    }
+
+    private buildCheckedInstanceProperties(): PropertyBEModel[] {
+        const instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
+        const instanceId: string = instancesIds[0];
+        return this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
+    }
+
+    private openToscaGetFunctionModal() {
+        const modalTitle = 'Set value using TOSCA functions';
+        const modal = this.modalService.createCustomModal(new ModalModel(
+            'sm',
+            modalTitle,
+            null,
+            [
+                new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
+                    () => {
+                        const selectedToscaFunction = modal.instance.dynamicContent.instance.selectToscaFunction;
+                        const selectedPropertyFromModal:PropertyDropdownValue = modal.instance.dynamicContent.instance.selectedProperty;
+                        const toscaFunctionType: ToscaGetFunctionType = ToscaGetFunctionTypeConverter.convertFromString(selectedToscaFunction);
+                        this.updateCheckedInstancePropertyGetFunctionValue(selectedPropertyFromModal, toscaFunctionType);
+                        modal.instance.close();
                     }
-                });
-            }
+                ),
+                new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
+                    modal.instance.close();
+                }),
+            ],
+            null /* type */
+        ));
+        const checkedInstanceProperty = this.buildCheckedInstanceProperty();
+        this.modalService.addDynamicContentToModalAndBindInputs(modal, ToscaFunctionComponent, {
+            'property': checkedInstanceProperty,
         });
-    };
+        modal.instance.open();
+    }
 
-    private updateSelectInputValues(modal:ComponentRef<ModalComponent>, property:PropertyBEModel, checkedProperties:PropertyBEModel[], selectedInstanceData:any) {
-        this.loadingProperties = true;
-        let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectValue;
-        property.getInputValues = [];
-        const propertyInputDetail = new PropertyInputDetail();
-        propertyInputDetail.inputId = selectInputValue.uniqueId;
-        propertyInputDetail.inputName = selectInputValue.name;
-        propertyInputDetail.inputType = selectInputValue.type;
-        property.getInputValues.push(propertyInputDetail);
-        property.value = selectInputValue.name.indexOf("->") !== -1
-            ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}'
-            : '{"get_input":"' + selectInputValue.name+ '"}' ;
-        property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT;
-        this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData);
+    private clearCheckedInstancePropertyValue() {
+        const checkedInstanceProperty: PropertyBEModel = this.buildCheckedInstanceProperty();
+        checkedInstanceProperty.getInputValues = null;
+        checkedInstanceProperty.value = null;
+        checkedInstanceProperty.toscaGetFunction = null;
+        this.updateInstanceProperty(checkedInstanceProperty);
+    }
+
+    private updateCheckedInstancePropertyGetFunctionValue(propertyToGet: PropertyDropdownValue, toscaGetFunctionType: ToscaGetFunctionType) {
+        const toscaGetFunctionBuilder: ToscaGetFunctionDtoBuilder =
+            new ToscaGetFunctionDtoBuilder()
+                .withPropertyUniqueId(propertyToGet.propertyId)
+                .withFunctionType(toscaGetFunctionType)
+                .withPropertySource(PropertySource.SELF)
+                .withPropertyName(propertyToGet.propertyName)
+                .withSourceName(this.component.name)
+                .withSourceUniqueId(this.component.uniqueId);
+
+        const checkedProperty: PropertyBEModel = this.buildCheckedInstanceProperty();
+        if (propertyToGet.propertyPath && propertyToGet.propertyPath.length) {
+            toscaGetFunctionBuilder.withPropertyPathFromSource(propertyToGet.propertyPath);
+        }
+        checkedProperty.toscaGetFunction = toscaGetFunctionBuilder.build();
+        this.updateInstanceProperty(checkedProperty);
     }
 
-    updateInstancePropertiesWithInput(checkedProperties: PropertyBEModel[], selectedInstanceData: any) {
+    updateInstanceProperty(instanceProperty: PropertyBEModel) {
+        this.loadingProperties = true;
         this.componentInstanceServiceNg2.updateInstanceProperties(this.component.componentType, this.component.uniqueId,
-            this.selectedInstanceData.uniqueId, checkedProperties)
+            this.selectedInstanceData.uniqueId, [instanceProperty])
         .subscribe(() => {
-            this.changeSelectedInstance(selectedInstanceData);
+            this.changeSelectedInstance(this.getSelectedComponentInstance());
         }, (error) => {
-            this.Notification.error({
-                message: 'Failed to select/deselect get_input call: ' + error,
-                title: 'Failure'
+            const errorMsg =
+                this.translateService.translate('TOSCA_FUNCTION_SELECT_ERROR', {'propertyName': instanceProperty.name, 'error': error});
+            this.notification.error({
+                title: this.translateService.translate('FAILURE_LABEL'),
+                message: errorMsg
             });
+            console.error(errorMsg, error);
         }, () => {
             this.loadingProperties = false;
             this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
@@ -584,10 +614,10 @@ export class PropertiesAssignmentComponent {
             let checkedProperties: PropertyBEModel[] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
             angular.forEach(checkedProperties, (property: PropertyBEModel) => {
                 if(this.checkedPropertiesCount == 1) {
-                    if (property.toscaGetFunctionType == null) {
-                        this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
+                    if (property.isToscaGetFunction()) {
+                        this.btnToscaFunctionText = this.translateService.translate('CLEAR_VALUE_LABEL');
                     } else {
-                        this.btnToscaFunctionText = this.translateService.translate('DESELECT_INPUT_LABEL');
+                        this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
                     }
                 } else {
                     this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
@@ -598,7 +628,7 @@ export class PropertiesAssignmentComponent {
 
     /*** DECLARE PROPERTIES/INPUTS ***/
     declareProperties = (): void => {
-        console.log("==>" + this.constructor.name + ": declareProperties");
+        console.debug("==>" + this.constructor.name + ": declareProperties");
 
         let selectedComponentInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         let selectedGroupInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
@@ -671,8 +701,6 @@ export class PropertiesAssignmentComponent {
     };
 
     declareListProperties = (): void => {
-        console.log('declareListProperties() - enter');
-
         // get selected properties
         let selectedComponentInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         let selectedGroupInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
@@ -683,7 +711,6 @@ export class PropertiesAssignmentComponent {
         let insId :string;
 
         angular.forEach(instancesIds, (instanceId: string): void => {
-            console.log("instanceId="+instanceId);
             insId = instanceId;
             let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId);
             let checkedProperties: PropertyBEModel[] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
@@ -709,7 +736,7 @@ export class PropertiesAssignmentComponent {
         let inputsToCreate: InstancePropertiesAPIMap = new InstancePropertiesAPIMap(selectedComponentInstancesInputs, selectedComponentInstancesProperties, selectedGroupInstancesProperties, selectedPolicyInstancesProperties);
 
         let modalTitle = 'Declare Properties as List Input';
-        const modal = this.ModalService.createCustomModal(new ModalModel(
+        const modal = this.modalService.createCustomModal(new ModalModel(
             'sm', /* size */
             modalTitle, /* title */
             null, /* content */
@@ -752,7 +779,6 @@ export class PropertiesAssignmentComponent {
                             componentInstInputsMap: content.inputsToCreate,
                             listInput: reglistInput
                         };
-                        console.log("save button clicked. input=", input);
 
                         this.topologyTemplateService
                         .createListInput(this.component, input, this.isSelf())
@@ -783,9 +809,8 @@ export class PropertiesAssignmentComponent {
             null /* type */
         ));
         // 3rd arg is passed to DeclareListComponent instance
-        this.ModalService.addDynamicContentToModal(modal, DeclareListComponent, {properties: inputsToCreate, propertyNameList: propertyNameList});
+        this.modalService.addDynamicContentToModal(modal, DeclareListComponent, {properties: inputsToCreate, propertyNameList: propertyNameList});
         modal.instance.open();
-        console.log('declareListProperties() - leave');
     };
 
      /*** DECLARE PROPERTIES/POLICIES ***/
@@ -879,11 +904,9 @@ export class PropertiesAssignmentComponent {
                                 const changedProp = <PropertyFEModel>this.changedData.shift();
                                 this.propertiesUtils.resetPropertyValue(changedProp, resInput.value);
                             });
-                            console.log('updated instance inputs:', response);
                         };
                     } else {
                         if (this.isSelf()) {
-                            console.log("changedProperties", changedProperties);
                             request = this.topologyTemplateService.updateServiceProperties(this.component.uniqueId,  _.map(changedProperties, cp => {
                                 delete cp.constraints;
                                 return cp;
@@ -899,7 +922,6 @@ export class PropertiesAssignmentComponent {
                                 this.propertiesUtils.resetPropertyValue(changedProp, resProp.value);
                             });
                             resolve(response);
-                            console.log("updated instance properties: ", response);
                         };
                     }
                 } else if (this.selectedInstanceData instanceof GroupInstance) {
@@ -912,7 +934,6 @@ export class PropertiesAssignmentComponent {
                             this.propertiesUtils.resetPropertyValue(changedProp, resProp.value);
                         });
                         resolve(response);
-                        console.log("updated group instance properties: ", response);
                     };
                 } else if (this.selectedInstanceData instanceof PolicyInstance) {
                     request = this.componentInstanceServiceNg2
@@ -924,7 +945,6 @@ export class PropertiesAssignmentComponent {
                             this.propertiesUtils.resetPropertyValue(changedProp, resProp.value);
                         });
                         resolve(response);
-                        console.log("updated policy instance properties: ", response);
                     };
                 }
             } else if (this.isInputsTabSelected) {
@@ -945,7 +965,6 @@ export class PropertiesAssignmentComponent {
                         changedInput.required = resInput.required;
                         changedInput.requiredOrig = resInput.required;
                     });
-                    console.log("updated the component inputs and got this response: ", response);
                 }
             }
 
@@ -1010,9 +1029,9 @@ export class PropertiesAssignmentComponent {
         if (curHasChangedData !== this.hasChangedData) {
             this.hasChangedData = curHasChangedData;
             if(this.hasChangedData) {
-                this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, this.hasChangedData, this.showUnsavedChangesAlert);
+                this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, this.hasChangedData, this.showUnsavedChangesAlert);
             } else {
-                this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, false);
+                this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, false);
             }
         } 
         return this.hasChangedData;
@@ -1021,14 +1040,14 @@ export class PropertiesAssignmentComponent {
     doSaveChangedData = (onSuccessFunction?:Function, onError?:Function):void => {
         this.saveChangedData().then(
             () => {
-                this.Notification.success({
+                this.notification.success({
                     message: 'Successfully saved changes',
                     title: 'Saved'
                 });
                 if(onSuccessFunction) onSuccessFunction();
             },
             () => {
-                this.Notification.error({
+                this.notification.error({
                     message: 'Failed to save changes!',
                     title: 'Failure'
                 });
@@ -1080,7 +1099,7 @@ export class PropertiesAssignmentComponent {
     //used for declare button, to keep count of newly checked properties (and ignore declared properties)
     updateCheckedPropertyCount = (increment: boolean): void => {
         this.checkedPropertiesCount += (increment) ? 1 : -1;
-        console.log("CheckedProperties count is now.... " + this.checkedPropertiesCount);
+        console.debug("CheckedProperties count is now.... " + this.checkedPropertiesCount);
         this.selectInputBtnLabel();
     };
 
@@ -1106,7 +1125,7 @@ export class PropertiesAssignmentComponent {
         //reset any unsaved changes to the input before deleting it
         this.resetUnsavedChangesForInput(input);
 
-        console.log("==>" + this.constructor.name + ": deleteInput");
+        console.debug("==>" + this.constructor.name + ": deleteInput");
         let inputToDelete = new InputBEModel(input);
 
         this.componentServiceNg2
@@ -1139,7 +1158,6 @@ export class PropertiesAssignmentComponent {
             .deletePolicy(this.component, policy)
             .subscribe((response) => {
                 this.policies = this.policies.filter(policy => policy.uniqueId !== response.uniqueId);
-                //Reload the whole instance for now - TODO: CHANGE THIS after the BE starts returning properties within the response, use commented code below instead!
                 this.changeSelectedInstance(this.selectedInstanceData);
                 this.loadingPolicies = false;
             });
@@ -1165,7 +1183,7 @@ export class PropertiesAssignmentComponent {
     addProperty = (model: string) => {
         this.loadDataTypesByComponentModel(model)
         let modalTitle = 'Add Property';
-        let modal = this.ModalService.createCustomModal(new ModalModel(
+        let modal = this.modalService.createCustomModal(new ModalModel(
             'sm',
             modalTitle,
             null,
@@ -1181,7 +1199,7 @@ export class PropertiesAssignmentComponent {
                             modal.instance.close();
                         }, (error) => {
                             modal.instance.dynamicContent.instance.isLoading = false;
-                            this.Notification.error({
+                            this.notification.error({
                                 message: 'Failed to add property:' + error,
                                 title: 'Failure'
                             });
@@ -1194,13 +1212,13 @@ export class PropertiesAssignmentComponent {
             null
         ));
         modal.instance.open();
-        this.ModalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {});
+        this.modalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {});
     }
 
     /*** addInput ***/
     addInput = () => {
         let modalTitle = 'Add Input';
-        let modal = this.ModalService.createCustomModal(new ModalModel(
+        let modal = this.modalService.createCustomModal(new ModalModel(
             'sm',
             modalTitle,
             null,
@@ -1216,7 +1234,7 @@ export class PropertiesAssignmentComponent {
                             modal.instance.close();
                         }, (error) => {
                             modal.instance.dynamicContent.instance.isLoading = false;
-                            this.Notification.error({
+                            this.notification.error({
                                 message: 'Failed to add input:' + error,
                                 title: 'Failure'
                             });
@@ -1228,7 +1246,7 @@ export class PropertiesAssignmentComponent {
             ],
             null
         ));
-        this.ModalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {});
+        this.modalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {});
         modal.instance.open();
     }
 
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
index ea52f20e91..851d7b6e77 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
@@ -27,12 +27,13 @@
                 [ngValue]="toscaFunction">{{toscaFunction}}</option>
       </select>
     </div>
-    <div *ngIf="selectToscaFunction" class="i-sdc-form-item">
+    <div *ngIf="showDropdown()" class="i-sdc-form-item">
       <label class="i-sdc-form-label required">{{dropdownValuesLabel}}</label>
-        <select [(ngModel)]="selectValue" name="selectValue">
-          <option *ngFor="let value of dropdownValues"
-                  [ngValue]="value">{{value.name}}</option>
-        </select>
+      <select [(ngModel)]="selectedProperty" name="selectedProperty">
+        <option *ngFor="let value of propertyDropdownList" [ngValue]="value">{{value.propertyLabel}}</option>
+      </select>
     </div>
+    <div *ngIf="dropDownErrorMsg">{{dropDownErrorMsg}}</div>
   </form>
+  <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
 </div>
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 22fb8cc358..6e013d7169 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,35 +17,35 @@
  *  ============LICENSE_END=========================================================
  */
 
-import {Component} from '@angular/core';
-import {
-    ComponentMetadata, DataTypeModel, PropertyBEModel
-} from 'app/models';
+import {Component, Input} from '@angular/core';
+import {ComponentMetadata, DataTypeModel, PropertyBEModel} from 'app/models';
 import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
 import {WorkspaceService} from "../../workspace/workspace.service";
 import {PropertiesService} from "../../../services/properties.service";
 import {PROPERTY_DATA} from "../../../../utils/constants";
 import {DataTypeService} from "../../../services/data-type.service";
-import {ToscaGetFunctionType} from "../../../../models/tosca-get-function-type.enum";
+import {ToscaGetFunctionType} from "../../../../models/tosca-get-function-type";
 import {TranslateService} from "../../../shared/translator/translate.service";
+import {ComponentGenericResponse} from '../../../services/responses/component-generic-response';
+import {Observable} from 'rxjs/Observable';
 
 @Component({
     selector: 'tosca-function',
     templateUrl: './tosca-function.component.html',
     styleUrls: ['./tosca-function.component.less'],
 })
-
 export class ToscaFunctionComponent {
 
+    @Input() property: PropertyBEModel;
+
     selectToscaFunction;
-    selectValue;
-    isLoading: boolean;
-    propertyType: string;
-    dropdownValues: Array<PropertyBEModel> = [];
+    selectedProperty: PropertyDropdownValue;
+    isLoading: boolean = false;
+    propertyDropdownList: Array<PropertyDropdownValue> = [];
     toscaFunctions: Array<string> = [];
     dropdownValuesLabel: string;
+    dropDownErrorMsg: string;
 
-    private dataTypeProperties: Array<PropertyBEModel> = [];
     private componentMetadata: ComponentMetadata;
 
     constructor(private topologyTemplateService: TopologyTemplateService,
@@ -57,12 +57,12 @@ export class ToscaFunctionComponent {
 
     ngOnInit() {
         this.componentMetadata = this.workspaceService.metadata;
-        this.propertyType = this.propertiesService.getCheckedPropertyType();
         this.loadToscaFunctions();
     }
 
     private loadToscaFunctions(): void {
         this.toscaFunctions.push(ToscaGetFunctionType.GET_INPUT.toLowerCase());
+        this.toscaFunctions.push(ToscaGetFunctionType.GET_PROPERTY.toLowerCase());
     }
 
     onToscaFunctionChange(): void {
@@ -71,50 +71,129 @@ export class ToscaFunctionComponent {
     }
 
     private loadDropdownValueLabel(): void {
-        if (this.selectToscaFunction) {
-            if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
-                this.dropdownValuesLabel = this.translateService.translate('INPUT_DROPDOWN_LABEL');
-            }
+        if (!this.selectToscaFunction) {
+            return;
+        }
+        if (this.isGetInputSelected()) {
+            this.dropdownValuesLabel = this.translateService.translate('INPUT_DROPDOWN_LABEL');
+        } else if (this.isGetPropertySelected()) {
+            this.dropdownValuesLabel = this.translateService.translate('TOSCA_FUNCTION_PROPERTY_DROPDOWN_LABEL');
         }
     }
 
     private loadDropdownValues(): void {
-        if (this.selectToscaFunction) {
-            this.dropdownValues = [];
-            if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
-                this.loadInputValues(this.propertyType);
-            }
+        if (!this.selectToscaFunction) {
+            return;
         }
+        this.resetDropDown();
+        this.loadPropertiesInDropdown();
     }
 
-    private loadInputValues(propertyType: string): void {
-        this.isLoading = true;
-        this.topologyTemplateService.getComponentInputsValues(this.componentMetadata.componentType, this.componentMetadata.uniqueId)
-        .subscribe((response) => {
-            response.inputs.forEach((inputProperty: any) => {
-                if (propertyType === inputProperty.type) {
-                    this.dropdownValues.push(inputProperty);
-                } else if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(inputProperty.type) === -1 && inputProperty.type !== propertyType) {
-                    this.buildInputDataForComplexType(inputProperty, propertyType);
-                }
-            });
-        }, () => {
-            //error ignored
-        }, () => {
-            this.isLoading = false;
-        });
+    private resetDropDown() {
+        this.dropDownErrorMsg = undefined;
+        this.propertyDropdownList = [];
     }
 
-    private buildInputDataForComplexType(inputProperty: PropertyBEModel, propertyType: string) {
-        let dataTypeFound: DataTypeModel = this.dataTypeService.getDataTypeByModelAndTypeName(this.componentMetadata.model, inputProperty.type);
-        if (dataTypeFound && dataTypeFound.properties) {
-            dataTypeFound.properties.forEach(dataTypeProperty => {
-                let inputData = inputProperty.name + "->" + dataTypeProperty.name;
-                dataTypeProperty.name = inputData;
-                if (this.dataTypeProperties.indexOf(dataTypeProperty) === -1 && dataTypeProperty.type === propertyType) {
-                    this.dropdownValues.push(dataTypeProperty);
+    private loadPropertiesInDropdown() {
+        this.startLoading();
+        let propertiesObservable: Observable<ComponentGenericResponse>
+        if (this.isGetInputSelected()) {
+            propertiesObservable = this.topologyTemplateService.getComponentInputsValues(this.componentMetadata.componentType, this.componentMetadata.uniqueId);
+        } else if (this.isGetPropertySelected()) {
+            propertiesObservable = this.topologyTemplateService.findAllComponentProperties(this.componentMetadata.componentType, this.componentMetadata.uniqueId);
+        }
+        propertiesObservable
+            .subscribe( (response: ComponentGenericResponse) => {
+                let properties: PropertyBEModel[] = this.isGetInputSelected() ? response.inputs : response.properties;
+                if (!properties || properties.length === 0) {
+                    const msgCode = this.isGetInputSelected() ? 'TOSCA_FUNCTION_NO_INPUT_FOUND' : 'TOSCA_FUNCTION_NO_PROPERTY_FOUND';
+                    this.dropDownErrorMsg = this.translateService.translate(msgCode, {type: this.property.type});
+                    return;
                 }
+                this.addPropertiesToDropdown(properties);
+                if (this.propertyDropdownList.length == 0) {
+                    const msgCode = this.isGetInputSelected() ? 'TOSCA_FUNCTION_NO_INPUT_FOUND' : 'TOSCA_FUNCTION_NO_PROPERTY_FOUND';
+                    this.dropDownErrorMsg = this.translateService.translate(msgCode, {type: this.property.type});
+                }
+            }, (error) => {
+                console.error('An error occurred while loading properties.', error);
+            }, () => {
+                this.stopLoading();
             });
+    }
+
+    private addPropertyToDropdown(propertyDropdownValue: PropertyDropdownValue) {
+        this.propertyDropdownList.push(propertyDropdownValue);
+        this.propertyDropdownList.sort((a, b) => a.propertyLabel.localeCompare(b.propertyLabel));
+    }
+
+    private addPropertiesToDropdown(properties: PropertyBEModel[]) {
+        for (const property of properties) {
+            if (this.property.type === property.type) {
+                this.addPropertyToDropdown({
+                    propertyName: property.name,
+                    propertyId: property.uniqueId,
+                    propertyLabel: property.name,
+                    toscaFunction: this.selectToscaFunction,
+                    propertyPath: [property.name]
+                });
+            } else if (this.isComplexType(property.type)) {
+                this.fillPropertyDropdownWithMatchingChildProperties(property);
+            }
         }
     }
+
+    private fillPropertyDropdownWithMatchingChildProperties(inputProperty: PropertyBEModel, parentPropertyList: Array<PropertyBEModel> = []) {
+        const dataTypeFound: DataTypeModel = this.dataTypeService.getDataTypeByModelAndTypeName(this.componentMetadata.model, inputProperty.type);
+        if (!dataTypeFound || !dataTypeFound.properties) {
+            return;
+        }
+        parentPropertyList.push(inputProperty);
+        dataTypeFound.properties.forEach(dataTypeProperty => {
+            if (dataTypeProperty.type === this.property.type) {
+                this.addPropertyToDropdown({
+                    propertyName: dataTypeProperty.name,
+                    propertyId: parentPropertyList[0].uniqueId,
+                    propertyLabel: parentPropertyList.map(property => property.name).join('->') + '->' + dataTypeProperty.name,
+                    toscaFunction: this.selectToscaFunction,
+                    propertyPath: [...parentPropertyList.map(property => property.name), dataTypeProperty.name]
+                });
+            } else if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(dataTypeProperty.type) === -1) {
+                this.fillPropertyDropdownWithMatchingChildProperties(dataTypeProperty, [...parentPropertyList])
+            }
+        });
+    }
+
+    private isGetPropertySelected() {
+        return this.selectToscaFunction === ToscaGetFunctionType.GET_PROPERTY.toLowerCase();
+    }
+
+    private isGetInputSelected() {
+        return this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase();
+    }
+
+    private isComplexType(propertyType: string) {
+        return PROPERTY_DATA.SIMPLE_TYPES.indexOf(propertyType) === -1;
+    }
+
+    private stopLoading() {
+        this.isLoading = false;
+    }
+
+    private startLoading() {
+        this.isLoading = true;
+    }
+
+    showDropdown(): boolean {
+        return this.selectToscaFunction && !this.isLoading && !this.dropDownErrorMsg;
+    }
+
+}
+
+export interface PropertyDropdownValue {
+    propertyName: string;
+    propertyId: string;
+    propertyLabel: string;
+    toscaFunction: ToscaGetFunctionType;
+    propertyPath: Array<string>;
 }
diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
index 2911164c4b..92a12c8305 100644
--- a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
@@ -162,7 +162,11 @@ export class TopologyTemplateService {
     }
 
     getComponentProperties(component: Component): Observable<ComponentGenericResponse> {
-        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
+        return this.findAllComponentProperties(component.componentType, component.uniqueId);
+    }
+
+    findAllComponentProperties(componentType: string, componentUniqueId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentUniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
     }
 
     getCapabilitiesAndRequirements(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
diff --git a/catalog-ui/src/app/ng2/services/dynamic-component.service.ts b/catalog-ui/src/app/ng2/services/dynamic-component.service.ts
index 29dd1e9e09..d53032435a 100644
--- a/catalog-ui/src/app/ng2/services/dynamic-component.service.ts
+++ b/catalog-ui/src/app/ng2/services/dynamic-component.service.ts
@@ -12,17 +12,15 @@ export class DynamicComponentService {
     //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root. 
     //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name));
     public createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<T> {
-
         viewContainerRef = viewContainerRef || this.getRootViewContainerRef();
         viewContainerRef.clear();
 
-        let factory: ComponentFactory<T> = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader
-        let componentRef: ComponentRef<T> = viewContainerRef.createComponent(factory);
-        return componentRef; 
+        const factory: ComponentFactory<T> = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader
+        return viewContainerRef.createComponent(factory);
     }
 
     
     private getRootViewContainerRef(): ViewContainerRef {
         return this.applicationRef.components[0].instance.viewContainerRef;
     }
-};
\ No newline at end of file
+};
diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts
index 897571b5ee..27d679facb 100644
--- a/catalog-ui/src/app/ng2/services/modal.service.ts
+++ b/catalog-ui/src/app/ng2/services/modal.service.ts
@@ -110,6 +110,18 @@ export class ModalService {
         return modalInstance;
     }
 
+    public addDynamicContentToModalAndBindInputs = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>,
+                                                    dynamicComponentInput?: Object) => {
+
+        const dynamicContent = this.dynamicComponentService
+            .createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer);
+        for (const key of Object.keys(dynamicComponentInput)) {
+            dynamicContent.instance[key] = dynamicComponentInput[key];
+        }
+        modalInstance.instance.dynamicContent = dynamicContent;
+        return modalInstance;
+    }
+
     public addDynamicTemplateToModal = (modalInstance: ComponentRef<ModalComponent>, templateRef: TemplateRef<void>) => {
         modalInstance.instance.dynamicContentContainer.clear();
         modalInstance.instance.dynamicContentContainer.createEmbeddedView(templateRef);
diff --git a/catalog-ui/src/app/ng2/services/properties.service.ts b/catalog-ui/src/app/ng2/services/properties.service.ts
index f6b77320df..c86d207915 100644
--- a/catalog-ui/src/app/ng2/services/properties.service.ts
+++ b/catalog-ui/src/app/ng2/services/properties.service.ts
@@ -25,8 +25,6 @@ import { PropertyFEModel, PropertyBEModel, PropertyDeclareAPIModel, DerivedFEPro
 @Injectable()
 export class PropertiesService {
 
-    checkedPropertyType: string;
-
     constructor() {
     }
 
@@ -83,13 +81,5 @@ export class PropertiesService {
         return selectedProps;
     }
 
-    setCheckedPropertyType(type: string){
-        this.checkedPropertyType = type;
-    }
-
-    getCheckedPropertyType(){
-        return this.checkedPropertyType;
-    }
-
 
 }
diff --git a/catalog-ui/src/app/services/data-types-service.ts b/catalog-ui/src/app/services/data-types-service.ts
index 1a0fc47aae..ad8dc59b8c 100644
--- a/catalog-ui/src/app/services/data-types-service.ts
+++ b/catalog-ui/src/app/services/data-types-service.ts
@@ -71,13 +71,13 @@ export class DataTypesService implements IDataTypesService {
     selectedInstance:ComponentInstance;
     selectedComponentInputs:Array<InputModel>;
 
-    public loadDataTypesCache = (modelName: string): void => {
+    public loadDataTypesCache = async (modelName: string): Promise<void> => {
         let model;
         if (modelName) {
             model = {'model': modelName}
         }
-        this.$http.get(this.baseUrl+"dataTypes", {params: model})
-        .then((response:any) => {
+        await this.$http.get(this.baseUrl + "dataTypes", {params: model})
+        .then((response: any) => {
             this.dataTypes = response.data;
             delete this.dataTypes['tosca.datatypes.Root'];
         });