Support Capability Properties

This change includes following changes
1. Get capability properties from global types- BE
2. Show capability properties in cap/req screen
3. Support Capability Properties in assingment, operation and consumption screens

Change-Id: Ieb4fa5705007c8bed3d82eb4fe4604572aa202d7
Issue-ID: SDC-2294
Signed-off-by: Mojahidul Islam <mojahidul.islam@amdocs.com>

9 files changed, 271 insertions, 32 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
index 9db24b6071..c2a9582ed4 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
@@ -9,14 +9,20 @@ import {Observable} from "rxjs/Observable";
 
 import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
 import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalModel, ButtonModel, InputBEModel, OperationModel, InterfaceModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
+import {
+    InputBEModel,
+    OperationModel,
+    InterfaceModel,
+    WORKFLOW_ASSOCIATION_OPTIONS,
+    CapabilitiesGroup,
+    Capability
+} from 'app/models';
 
 import {IModalConfig, IModalButtonComponent} from "sdc-ui/lib/angular/modals/models/modal-config";
 import {SdcUiComponents} from "sdc-ui/lib/angular";
 import {ModalButtonComponent} from "sdc-ui/lib/angular/components";
 
 import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
 import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
 import {PluginsService} from "app/ng2/services/plugins.service";
 
@@ -114,6 +120,7 @@ export class InterfaceOperationComponent {
     modalTranslation: ModalTranslation;
     workflowIsOnline: boolean;
     workflows: Array<any>;
+    capabilities: CapabilitiesGroup;
 
     @Input() component: IComponent;
     @Input() readonly: boolean;
@@ -141,7 +148,8 @@ export class InterfaceOperationComponent {
         Observable.forkJoin(
             this.ComponentServiceNg2.getInterfaces(this.component),
             this.ComponentServiceNg2.getComponentInputs(this.component),
-            this.ComponentServiceNg2.getInterfaceTypes(this.component)
+            this.ComponentServiceNg2.getInterfaceTypes(this.component),
+            this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.component.componentType, this.component.uniqueId)
         ).subscribe((response: Array<any>) => {
             const callback = (workflows) => {
                 this.isLoading = false;
@@ -150,6 +158,7 @@ export class InterfaceOperationComponent {
                 this.inputs = response[1].inputs;
                 this.interfaceTypes = response[2];
                 this.workflows = workflows;
+                this.capabilities = response[3].capabilities;
             };
             if (this.enableWorkflowAssociation && this.workflowIsOnline) {
                 this.WorkflowServiceNg2.getWorkflows().subscribe(
@@ -267,7 +276,8 @@ export class InterfaceOperationComponent {
             readonly: this.readonly,
             interfaceTypes: this.interfaceTypes,
             validityChangedCallback: this.enableOrDisableSaveButton,
-            workflowIsOnline: this.workflowIsOnline
+            workflowIsOnline: this.workflowIsOnline,
+            capabilities: _.filter(CapabilitiesGroup.getFlattenedCapabilities(this.capabilities), (capability: Capability) => capability.ownerId === this.component.uniqueId)
         };
 
         const modalConfig: IModalConfig = {
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
index 8f70f7f584..ec056ad6f2 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
@@ -184,16 +184,17 @@
             </div>
 
             <param-row
-                *ngFor="let param of tableParameters"
-                class="data-row"
-                [isInputParam]="currentTab === TYPE_INPUT"
-                [isAssociateWorkflow]="isUsingExistingWF()"
-                [param]="param"
-                [inputProps]="inputProperties"
-                [operationOutputs]="operationOutputs"
-                [onRemoveParam]="onRemoveParam"
-                [readonly]="readonly"
-                [validityChanged]="validityChanged">
+                    *ngFor="let param of tableParameters"
+                    class="data-row"
+                    [isInputParam]="currentTab === TYPE_INPUT"
+                    [isAssociateWorkflow]="isUsingExistingWF()"
+                    [param]="param"
+                    [inputProps]="inputProperties"
+                    [capabilitiesProps]="componentCapabilities"
+                    [operationOutputs]="operationOutputs"
+                    [onRemoveParam]="onRemoveParam"
+                    [readonly]="readonly"
+                    [validityChanged]="validityChanged">
             </param-row>
         </div>
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
index a574460478..e12905654b 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -5,7 +5,15 @@ import {Subscription} from "rxjs/Subscription";
 
 import {TranslateService} from "app/ng2/shared/translator/translate.service";
 import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
-import {InterfaceModel, OperationModel, OperationParameter, InputBEModel, RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
+import {
+    InterfaceModel,
+    OperationModel,
+    OperationParameter,
+    InputBEModel,
+    RadioButtonModel,
+    WORKFLOW_ASSOCIATION_OPTIONS,
+    Capability
+} from 'app/models';
 
 import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
 import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component";
@@ -39,7 +47,8 @@ export interface OperationCreatorInput {
     readonly: boolean,
     interfaceTypes: { [interfaceType: string]: Array<string> },
     validityChangedCallback: Function,
-    workflowIsOnline: boolean;
+    workflowIsOnline: boolean,
+    capabilities: Array<Capability>
 }
 
 @Component({
@@ -59,6 +68,7 @@ export class OperationCreatorComponent implements OperationCreatorInput {
     interfaceTypes: { [interfaceType: string]: Array<string> };
     operationNames: Array<TypedDropDownOption> = [];
     validityChangedCallback: Function;
+    capabilities: Array<Capability>;
 
     allWorkflows: Array<any>;
     workflows: Array<DropdownValue> = [];
@@ -73,6 +83,7 @@ export class OperationCreatorComponent implements OperationCreatorInput {
     outputParameters: Array<OperationParameter> = [];
     noAssignOutputParameters: Array<OperationParameter> = [];
     assignOutputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
+    componentCapabilities: Array<Capability> = [];
 
     tableParameters: Array<OperationParameter> = [];
     operationOutputs: Array<OperationModel> = [];
@@ -171,6 +182,7 @@ export class OperationCreatorComponent implements OperationCreatorInput {
             }
         }
         this.reconstructOperation();
+        this.filterCapabilities();
         this.validityChanged();
         this.updateTable();
     }
@@ -217,6 +229,10 @@ export class OperationCreatorComponent implements OperationCreatorInput {
 
     }
 
+    filterCapabilities() {
+        this.componentCapabilities = _.filter(this.capabilities, (cap: Capability) => cap.properties);
+    }
+
     buildParams = () => {
 
         if (this.inputOperation.outputs) {
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
index 3ac9328487..4a4782eaee 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -58,6 +58,15 @@
                 {{output.label}}
             </option>
         </optgroup>
+        <optgroup
+                *ngFor="let cap of filteredCapabilitiesProps"
+                label="{{cap.capabilityName}}">
+            <option
+                    *ngFor="let prop of cap.properties"
+                    [ngValue]="prop.value">
+                {{prop.label}}
+            </option>
+        </optgroup>
     </select>
     <span
         *ngIf="!filteredInputProps.length && !operationOutputCats.length && isAssociateWorkflow"
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
index bdf1003a64..c18fb82094 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -1,7 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {DataTypeService} from "app/ng2/services/data-type.service";
-import {OperationModel, OperationParameter, InputBEModel, DataTypeModel} from 'app/models';
-import {DropDownOption} from "../operation-creator.component";
+import {OperationModel, OperationParameter, InputBEModel, DataTypeModel, Capability} from 'app/models';
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
 class DropdownValueType extends DropdownValue {
@@ -25,6 +24,7 @@ export class ParamRowComponent {
     @Input() param: OperationParameter;
     @Input() inputProps: Array<InputBEModel>;
     @Input() operationOutputs: Array<OperationModel>;
+    @Input() capabilitiesProps: Array<Capability>;
     @Input() onRemoveParam: Function;
     @Input() isAssociateWorkflow: boolean;
     @Input() readonly: boolean;
@@ -34,6 +34,7 @@ export class ParamRowComponent {
     propTypeEnum: Array<string> = [];
     operationOutputCats: Array<{ operationName: string, outputs: Array<DropdownValueType> }> = [];
     filteredInputProps: Array<DropdownValue> = [];
+    filteredCapabilitiesProps: Array<{capabilityName: string, properties: Array<DropdownValueType>}> = [];
 
     constructor(private dataTypeService: DataTypeService) {}
 
@@ -113,6 +114,26 @@ export class ParamRowComponent {
             category => category.outputs.length > 0
         );
 
+        this.filteredCapabilitiesProps = _.filter(
+            _.map(
+                this.capabilitiesProps,
+                cap => {
+                    return {
+                        capabilityName: cap.name,
+                        properties: _.map(
+                            _.filter(cap.properties, prop => !this.param.type || prop.type === this.param.type),
+                            prop => new DropdownValueType(
+                                prop.uniqueId,
+                                prop.name,
+                                prop.type
+                            )
+                        )
+                    };
+                }
+            ),
+            capability => capability.properties.length > 0
+        );
+
         if (this.param.inputId) {
             const selProp = this.getSelectedProp();
             if (selProp && selProp.type === this.param.type) {
@@ -181,6 +202,12 @@ export class ParamRowComponent {
                 (acc, cat) => [...acc, ...cat.outputs],
             []),
             (out: DropdownValueType) => this.param.inputId === out.value
+            ) || _.find(
+                _.reduce(
+                    this.filteredCapabilitiesProps,
+                    (acc, cap) => [...acc, ...cap.properties],
+                    []),
+                (prop: DropdownValueType) => this.param.inputId === prop.value
         );
     }
 
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 9f406f8c76..061439800f 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
@@ -21,11 +21,32 @@
 import * as _ from "lodash";
 import {Component, ViewChild, Inject, TemplateRef} from "@angular/core";
 import { PropertiesService } from "../../services/properties.service";
-import { PropertyFEModel, InstanceFePropertiesMap, InstanceBePropertiesMap, InstancePropertiesAPIMap, Component as ComponentData, FilterPropertiesAssignmentData, ModalModel, ButtonModel } from "app/models";
+import {
+    PropertyFEModel,
+    InstanceFePropertiesMap,
+    InstanceBePropertiesMap,
+    InstancePropertiesAPIMap,
+    Component as ComponentData,
+    FilterPropertiesAssignmentData,
+    ModalModel,
+    ButtonModel,
+    Capability,
+    ToscaPresentationData
+} from "app/models";
 import { ResourceType } from "app/utils";
 import {ComponentServiceNg2} from "../../services/component-services/component.service";
 import {ComponentInstanceServiceNg2} from "../../services/component-instance-services/component-instance.service"
-import { InputBEModel, InputFEModel, ComponentInstance, GroupInstance, PolicyInstance, PropertyBEModel, DerivedFEProperty, SimpleFlatProperty } from "app/models";
+import {
+    InputBEModel,
+    InputFEModel,
+    ComponentInstance,
+    GroupInstance,
+    PolicyInstance,
+    PropertyBEModel,
+    DerivedFEProperty,
+    SimpleFlatProperty,
+    CapabilitiesGroup
+} from "app/models";
 import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
 import {WorkspaceMode, EVENTS} from "../../../utils/constants";
 import {EventListenerService} from "app/services/event-listener-service"
@@ -45,6 +66,7 @@ import { SdcUiComponents } from "sdc-ui/lib/angular";
 //import { ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service";
 import { IModalButtonComponent } from "sdc-ui/lib/angular/modals/models/modal-config";
 import { UnsavedChangesComponent } from "app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component";
+import {Observable} from "rxjs";
 import { DataTypeService } from "app/ng2/services/data-type.service";
 import { DataTypeModel } from "app/models";
 import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
@@ -96,6 +118,8 @@ export class PropertiesAssignmentComponent {
     savingChangedData:boolean;
     stateChangeStartUnregister:Function;
     serviceBePropertiesMap: InstanceBePropertiesMap;
+    serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap;
+    selectedInstance_FlattenCapabilitiesList: Array<Capability>;
 
     @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
     @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -243,12 +267,14 @@ export class PropertiesAssignmentComponent {
         this.loadingProperties = true;
         if (instance instanceof ComponentInstance) {
             let instanceBePropertiesMap: InstanceBePropertiesMap = new InstanceBePropertiesMap();
+            this.selectedInstance_FlattenCapabilitiesList = instance.capabilities ? CapabilitiesGroup.getFlattenedCapabilities(instance.capabilities) : [];
             if (this.isInput(instance.originType)) {
                 this.componentInstanceServiceNg2
                     .getComponentInstanceInputs(this.component, instance)
                     .subscribe(response => {
                         instanceBePropertiesMap[instance.uniqueId] = response;
                         this.processInstancePropertiesResponse(instanceBePropertiesMap, true);
+                        this.processInstanceCapabilitiesPropertiesResponse(false);
                         this.loadingProperties = false;
                     }, error => {
                     }); //ignore error
@@ -260,6 +286,7 @@ export class PropertiesAssignmentComponent {
                     .subscribe(response => {
                         instanceBePropertiesMap[instance.uniqueId] = response;
                         this.processInstancePropertiesResponse(instanceBePropertiesMap, false);
+                        this.processInstanceCapabilitiesPropertiesResponse(false);
                         this.loadingProperties = false;
                     }, error => {
                     }); //ignore error
@@ -305,6 +332,40 @@ export class PropertiesAssignmentComponent {
         this.checkedChildPropertiesCount = 0;
     };
 
+    processInstanceCapabilitiesPropertiesResponse = (originTypeIsVF: boolean) => {
+        let selectedComponentInstanceData = <ComponentInstance>(this.selectedInstanceData);
+        let currentUniqueId = this.selectedInstanceData.uniqueId;
+        this.serviceBeCapabilitiesPropertiesMap = new InstanceBePropertiesMap();
+        let isCapabilityOwnedByInstance: boolean;
+        this.serviceBeCapabilitiesPropertiesMap[currentUniqueId] = _.reduce(
+            this.selectedInstance_FlattenCapabilitiesList,
+            (result, cap: Capability) => {
+                isCapabilityOwnedByInstance = cap.ownerId === currentUniqueId ||
+                    selectedComponentInstanceData.isServiceProxy() && cap.ownerId === selectedComponentInstanceData.sourceModelUid;
+                if (cap.properties && isCapabilityOwnedByInstance) {
+                    _.forEach(cap.properties, prop => {
+                        if (!prop.origName) {
+                            prop.origName = prop.name;
+                            prop.name = cap.name + '_' + prop.name;//for display. (before save - the name returns to its orig value: prop.name)
+                        }
+                    });
+                    return result.concat(cap.properties);
+                }
+                return result;
+            }, []);
+        let instanceFECapabilitiesPropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(this.serviceBeCapabilitiesPropertiesMap, originTypeIsVF, this.inputs); //create flattened children, disable declared props, and init values
+        //update FECapabilitiesProperties with their origName according to BeCapabilitiesProperties
+        _.forEach(instanceFECapabilitiesPropertiesMap[currentUniqueId], prop => {
+            prop.origName = _.find(this.serviceBeCapabilitiesPropertiesMap[currentUniqueId], p => p.uniqueId === prop.uniqueId).origName;
+        });
+        //concatenate capabilitiesProps to all props list
+        this.instanceFePropertiesMap[currentUniqueId] = (this.instanceFePropertiesMap[currentUniqueId] || []).concat(instanceFECapabilitiesPropertiesMap[currentUniqueId]);
+        this.checkedPropertiesCount = 0;
+    };
+
+    isCapabilityProperty = (prop: PropertyBEModel) => {
+        return _.find(this.selectedInstance_FlattenCapabilitiesList, cap => cap.uniqueId === prop.parentUniqueId);
+    };
 
     /*** VALUE CHANGE EVENTS ***/
     dataChanged = (item:PropertyFEModel|InputFEModel) => {
@@ -439,6 +500,33 @@ export class PropertiesAssignmentComponent {
 
         let inputsToCreate: InstancePropertiesAPIMap = new InstancePropertiesAPIMap(selectedComponentInstancesInputs, selectedComponentInstancesProperties, selectedGroupInstancesProperties, selectedPolicyInstancesProperties);
 
+        //move changed capabilities properties from componentInstanceInputsMap obj to componentInstanceProperties
+        inputsToCreate.componentInstanceProperties[this.selectedInstanceData.uniqueId] =
+            (inputsToCreate.componentInstanceProperties[this.selectedInstanceData.uniqueId] || []).concat(
+                _.filter(
+                    inputsToCreate.componentInstanceInputsMap[this.selectedInstanceData.uniqueId],
+                    (prop: PropertyBEModel) => this.isCapabilityProperty(prop)
+                )
+            );
+        inputsToCreate.componentInstanceInputsMap[this.selectedInstanceData.uniqueId] = _.filter(
+            inputsToCreate.componentInstanceInputsMap[this.selectedInstanceData.uniqueId],
+            prop => !this.isCapabilityProperty(prop)
+        );
+        if (inputsToCreate.componentInstanceInputsMap[this.selectedInstanceData.uniqueId].length === 0) {
+            delete inputsToCreate.componentInstanceInputsMap[this.selectedInstanceData.uniqueId];
+        }
+
+        let isCapabilityPropertyChanged = false;
+        _.forEach(
+            inputsToCreate.componentInstanceProperties[this.selectedInstanceData.uniqueId],
+            (prop: PropertyBEModel) => {
+                prop.name = prop.origName || prop.name;
+                if (this.isCapabilityProperty(prop)) {
+                    isCapabilityPropertyChanged = true;
+                }
+            }
+        );
+
         this.componentServiceNg2
             .createInput(this.component, inputsToCreate, this.isSelf())
             .subscribe(response => {
@@ -451,6 +539,9 @@ export class PropertiesAssignmentComponent {
                     this.inputs.push(newInput);
                     this.updatePropertyValueAfterDeclare(newInput);
                 });
+                if (isCapabilityPropertyChanged) {
+                    this.reloadInstanceCapabilities();
+                }
             }, error => {}); //ignore error
     };
 
@@ -625,18 +716,37 @@ export class PropertiesAssignmentComponent {
             // make request and its handlers
             let request;
             let handleSuccess, handleError;
+            let changedInputsProperties = [], changedCapabilitiesProperties = [];
             if (this.isPropertiesTabSelected) {
                 const changedProperties: PropertyBEModel[] = this.changedData.map((changedProp) => {
                     changedProp = <PropertyFEModel>changedProp;
                     const propBE = new PropertyBEModel(changedProp);
+                    propBE.toscaPresentation = new ToscaPresentationData();
+                    propBE.toscaPresentation.ownerId = changedProp.parentUniqueId;
                     propBE.value = changedProp.getJSONValue();
+                    propBE.name = changedProp.origName || changedProp.name;
+                    delete propBE.origName;
                     return propBE;
                 });
+                changedCapabilitiesProperties = _.filter(changedProperties, prop => this.isCapabilityProperty(prop));
 
                 if (this.selectedInstanceData instanceof ComponentInstance) {
                     if (this.isInput(this.selectedInstanceData.originType)) {
-                        request = this.componentInstanceServiceNg2
-                            .updateInstanceInputs(this.component, this.selectedInstanceData.uniqueId, changedProperties);
+                        changedInputsProperties = _.filter(changedProperties, prop => !this.isCapabilityProperty(prop));
+                        if (changedInputsProperties.length && changedCapabilitiesProperties.length) {
+                            request = Observable.forkJoin(
+                                this.componentInstanceServiceNg2.updateInstanceInputs(this.component, this.selectedInstanceData.uniqueId, changedInputsProperties),
+                                this.componentInstanceServiceNg2.updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedCapabilitiesProperties)
+                            );
+                        }
+                        else if (changedInputsProperties.length) {
+                            request = this.componentInstanceServiceNg2
+                                .updateInstanceInputs(this.component, this.selectedInstanceData.uniqueId, changedInputsProperties);
+                        }
+                        else if (changedCapabilitiesProperties.length) {
+                            request = this.componentInstanceServiceNg2
+                                .updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedCapabilitiesProperties);
+                        }
                         handleSuccess = (response) => {
                             // reset each changed property with new value and remove it from changed properties list
                             response.forEach((resInput) => {
@@ -714,6 +824,9 @@ export class PropertiesAssignmentComponent {
             request.subscribe(
                 (response) => {
                     this.savingChangedData = false;
+                    if (changedCapabilitiesProperties.length) {
+                        this.reloadInstanceCapabilities();
+                    }
                     handleSuccess && handleSuccess(response);
                     this.updateHasChangedData();
                     resolve(response);
@@ -728,6 +841,19 @@ export class PropertiesAssignmentComponent {
         });
     };
 
+    reloadInstanceCapabilities = (): void => {
+        let currentInstanceIndex = _.findIndex(this.instances, instance => instance.uniqueId == this.selectedInstanceData.uniqueId);
+        this.componentServiceNg2.getComponentResourceInstances(this.component).subscribe(result => {
+            let instanceCapabilitiesData: CapabilitiesGroup = _.reduce(result.componentInstances, (res, instance) => {
+                if (instance.uniqueId === this.selectedInstanceData.uniqueId) {
+                    return instance.capabilities;
+                }
+                return res;
+            }, new CapabilitiesGroup());
+            (<ComponentInstance>this.instances[currentInstanceIndex]).capabilities = instanceCapabilitiesData;
+        });
+    };
+
     reverseChangedData = ():void => {
         // make reverse item handler
         let handleReverseItem;
@@ -814,8 +940,10 @@ export class PropertiesAssignmentComponent {
 
     updatePropertyValueAfterDeclare = (input: InputFEModel) => {
         if (this.instanceFePropertiesMap[input.instanceUniqueId]) {
+            let instanceName = input.instanceUniqueId.slice(input.instanceUniqueId.lastIndexOf('.') + 1);
             let propertyForUpdatindVal = _.find(this.instanceFePropertiesMap[input.instanceUniqueId], (feProperty: PropertyFEModel) => {
-                return feProperty.name == input.relatedPropertyName;
+                return feProperty.uniqueId === input.propertyId &&
+                    (feProperty.name == input.relatedPropertyName || input.name === instanceName.concat('_').concat(feProperty.name.replace(/[.]/g, '_')));
             });
             let inputPath = (input.inputPath && input.inputPath != propertyForUpdatindVal.name) ? input.inputPath : undefined;
             propertyForUpdatindVal.setAsDeclared(inputPath); //set prop as declared before assigning value
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts
index 82e2e464cc..32a73efa85 100644
--- a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts
@@ -62,6 +62,10 @@ export class CapabilitiesEditorComponent {
             let selectedCapabilityTypeObj: CapabilityTypeModel = this.input.capabilityTypesList.find(capType => capType.toscaPresentation.type === selectedCapType.value);
             this.capabilityData.description = selectedCapabilityTypeObj.toscaPresentation.description;
             this.capabilityData.validSourceTypes = selectedCapabilityTypeObj.toscaPresentation.validTargetTypes;
+            this.capabilityData.properties = _.forEach(
+                _.toArray(selectedCapabilityTypeObj.properties),
+                prop => prop.uniqueId = null //a requirement for the BE
+            );
         }
         this.validityChanged();
     }
diff --git a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.html b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.html
index e77d880176..2c4e2886a1 100644
--- a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.html
+++ b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.html
@@ -77,6 +77,15 @@
                                     {{output.name}}
                                 </option>
                             </optgroup>
+                            <optgroup
+                                    *ngFor="let cap of consumptionInput.associatedCapabilities"
+                                    label="{{cap.name}}">
+                                <option
+                                        *ngFor="let prop of cap.properties"
+                                        [ngValue]="cap.name + '_' + prop.name">
+                                    {{prop.name}}
+                                </option>
+                            </optgroup>
                         </select>
                     </div>
                 </div>
diff --git a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.ts b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.ts
index 25f412671f..2c86cc5c5c 100644
--- a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.ts
+++ b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.ts
@@ -17,7 +17,17 @@
 import * as _ from "lodash";
 import { Component } from '@angular/core';
 import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
-import {Service, ServiceInstanceObject, InstanceFePropertiesMap, InstanceBePropertiesMap, PropertyBEModel, InputBEModel, OperationModel, InterfaceModel} from 'app/models';
+import {
+    Service,
+    ServiceInstanceObject,
+    InstanceFePropertiesMap,
+    InstanceBePropertiesMap,
+    PropertyBEModel,
+    InputBEModel,
+    OperationModel,
+    InterfaceModel,
+    Capability
+} from 'app/models';
 import {ConsumptionInput, ConsumptionInputDetails, ServiceOperation} from 'app/ng2/components/logic/service-consumption/service-consumption.component';
 import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
 import { PROPERTY_DATA } from 'app/utils';
@@ -33,7 +43,7 @@ import { PROPERTY_DATA } from 'app/utils';
 export class ServiceConsumptionCreatorComponent {
 
     input: {
-        interfaceId: string;
+        interfaceId: string,
         serviceOperationIndex: number,
         serviceOperations: Array<ServiceOperation>,
         parentService: Service,
@@ -41,7 +51,9 @@ export class ServiceConsumptionCreatorComponent {
         parentServiceInputs: Array<InputBEModel>,
         selectedServiceProperties: Array<PropertyBEModel>,
         selectedServiceInstanceId: String,
-        selectedInstanceSiblings: Array<ServiceInstanceObject>
+        selectedInstanceSiblings: Array<ServiceInstanceObject>,
+        selectedInstanceCapabilitisList: Array<Capability>,
+        siblingsCapabilitiesList: Map<string, Array<Capability>>
     };
     sourceTypes: Array<any> = [];
     serviceOperationsList: Array<ServiceOperation>;
@@ -80,16 +92,24 @@ export class ServiceConsumptionCreatorComponent {
 
     initSourceTypes() {
         this.sourceTypes = [
-            { label: this.SOURCE_TYPES.STATIC, value: this.SOURCE_TYPES.STATIC, options: [], interfaces: []},
+            {
+                label: this.SOURCE_TYPES.STATIC,
+                value: this.SOURCE_TYPES.STATIC,
+                options: [],
+                interfaces: [],
+                capabilities: []
+            },
             { label: this.SOURCE_TYPES.SELF + ' (' + this.selectedService.name + ')',
                 value: this.selectedServiceInstanceId,
                 options: this.selectedServiceProperties,
-                interfaces: this.selectedService.interfaces
+                interfaces: this.selectedService.interfaces,
+                capabilities: this.input.selectedInstanceCapabilitisList
             },
             { label: this.parentService.name,
                 value: this.parentService.uniqueId,
                 options: this.parentServiceInputs,
-                interfaces: []
+                interfaces: [],
+                capabilities: []
     }
         ];
         _.forEach(this.input.selectedInstanceSiblings, sib =>
@@ -97,7 +117,8 @@ export class ServiceConsumptionCreatorComponent {
                 label: sib.name,
                 value: sib.id,
                 options: _.unionBy(sib.inputs, sib.properties, 'uniqueId'),
-                interfaces: sib.interfaces
+                interfaces: sib.interfaces,
+                capabilities: this.input.siblingsCapabilitiesList[sib.id]
             })
         );
     }
@@ -160,6 +181,7 @@ export class ServiceConsumptionCreatorComponent {
                 consumptionInputDetails.assignValueLabel = this.getAssignValueLabel(sourceVal);
                 consumptionInputDetails.associatedProps = filteredListsObj.associatedPropsList;
                 consumptionInputDetails.associatedInterfaces = filteredListsObj.associatedInterfacesList;
+                consumptionInputDetails.associatedCapabilities = filteredListsObj.associatedCapabilitiesList;
                 return new ConsumptionInputDetails(consumptionInputDetails);
             });
         }
@@ -171,6 +193,7 @@ export class ServiceConsumptionCreatorComponent {
         let filteredListsObj = this.getFilteredProps(consumptionInput.source, consumptionInput.type);
         consumptionInput.associatedProps = filteredListsObj.associatedPropsList;
         consumptionInput.associatedInterfaces = filteredListsObj.associatedInterfacesList;
+        consumptionInput.associatedCapabilities = filteredListsObj.associatedCapabilitiesList;
         if(consumptionInput.source === this.SOURCE_TYPES.STATIC) {
             if(PROPERTY_DATA.SIMPLE_TYPES.indexOf(consumptionInput.type) !== -1) {
                 consumptionInput.value = consumptionInput.defaultValue || "";
@@ -184,7 +207,7 @@ export class ServiceConsumptionCreatorComponent {
 
     private getFilteredProps(sourceVal, inputType) {
         let currentSourceObj = this.sourceTypes.find(s => s.value === sourceVal);
-        let associatedInterfacesList = [], associatedPropsList = [];
+        let associatedInterfacesList = [], associatedPropsList = [], associatedCapabilitiesPropsList: Array<Capability> = [];
         if(currentSourceObj) {
             if (currentSourceObj.interfaces) {
                 associatedInterfacesList = this.getFilteredInterfaceOutputs(currentSourceObj, inputType);
@@ -195,10 +218,22 @@ export class ServiceConsumptionCreatorComponent {
                 }
                 return result;
             }, []);
+            associatedCapabilitiesPropsList =
+                _.reduce(currentSourceObj.capabilities,
+                    (filteredCapsList, capability: Capability) => {
+                        let filteredProps = _.filter(capability.properties, prop => prop.type === inputType);
+                        if (filteredProps.length) {
+                            let cap = new Capability(capability);
+                            cap.properties = filteredProps;
+                            filteredCapsList.push(cap);
+                        }
+                        return filteredCapsList
+                    }, []);
         }
         return {
             associatedPropsList: associatedPropsList,
-            associatedInterfacesList: associatedInterfacesList
+            associatedInterfacesList: associatedInterfacesList,
+            associatedCapabilitiesList: associatedCapabilitiesPropsList
         }
     }