Add property mapping feature to ONAP

Add service property assignment

Change-Id: I29748ce12bacab06b8bc27f8875b39d80ffe5af7
Issue-ID: SDC-1988
Signed-off-by: Talio <tali.orenbach@amdocs.com>

13 files changed, 361 insertions, 13 deletions

diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 7a845ef159..750563b092 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -27,6 +27,7 @@ import { UpgradeAdapter } from '@angular/upgrade';
 import { UpgradeModule } from '@angular/upgrade/static';
 import { SdcUiComponentsModule, SdcUiComponents } from "sdc-ui/lib/angular";
 import { PropertiesAssignmentModule } from './pages/properties-assignment/properties-assignment.module';
+import { PropertyCreatorModule } from './pages/properties-assignment/property-creator/property-creator.module';
 import {
     DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider, StateServiceFactory,
     StateParamsServiceFactory, CacheServiceProvider, EventListenerServiceProvider, ScopeServiceFactory,
@@ -102,6 +103,7 @@ export function configServiceFactory(config: ConfigService) {
         //We need to import them here since we use them in angular1
         ConnectionWizardModule,
         PropertiesAssignmentModule,
+        PropertyCreatorModule,
         PluginFrameModule,
         InterfaceOperationModule,
         OperationCreatorModule,
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index 65072f8185..2068b170b3 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -58,6 +58,9 @@
                     </div>
                     <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"
                         tooltipDelay="0"></span>
+                    <div class="delete-button-container">
+                        <span *ngIf="showDelete" class="sprite-new delete-btn" [ngClass]="{'disabled' : property.isDisabled || property.isDeclared}" (click)="openDeleteModal(property)" data-tests-id="delete-input-button"></span>
+                    </div>
                 </div>
                 <div class="table-cell col2" *ngIf="!hidePropertyType">
                     <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
index 0f6dd512e2..86832e57f0 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
@@ -189,6 +189,11 @@
         }
     }
 
+    .delete-button-container {
+        max-height: 24px;
+        cursor: pointer;
+    }
+
     .filtered {
         /deep/ .checkbox-label-content{
             background-color: yellow;
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
index b11bc02fb9..167509b1e6 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
@@ -22,6 +22,7 @@
 import { Component, Input, Output, EventEmitter} from "@angular/core";
 import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models";
 import {PropertiesService} from "../../../services/properties.service";
+import {ModalService} from "../../../services/modal.service";
 import { InstanceFeDetails } from "../../../../models/instance-fe-details";
 
 @Component({
@@ -40,10 +41,13 @@ export class PropertiesTableComponent {
     @Input() isLoading:boolean;
     @Input() hasDeclareOption:boolean;
     @Input() hidePropertyType:boolean;
+    @Input() showDelete:boolean;
     
     @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
     @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
     @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption
+    @Output() deleteProperty: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
+    private selectedPropertyToDelete: PropertyFEModel;
 
     sortBy: String;
     reverse: boolean;
@@ -57,7 +61,7 @@ export class PropertiesTableComponent {
         this.path = sortBy.split('.');
     }
 
-    constructor (private propertiesService:PropertiesService ){
+    constructor (private propertiesService:PropertiesService, private modalService: ModalService){
     }
     
     ngOnInit() {
@@ -92,6 +96,17 @@ export class PropertiesTableComponent {
         this.updateCheckedPropertyCount.emit(isChecked);
     }
 
+    onDeleteProperty = () => {
+        this.deleteProperty.emit(this.selectedPropertyToDelete);
+        this.modalService.closeCurrentModal();
+    };
+
+    openDeleteModal = (property:PropertyFEModel) => {
+        this.selectedPropertyToDelete = property;
+        this.modalService.createActionModal("Delete Property", "Are you sure you want to delete this property?",
+            "Delete", this.onDeleteProperty, "Close").instance.open();
+    }
+
 }
 
 export class PropertyRowSelectedEvent {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index ca3e90fbc2..8a3e8d23ee 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -29,12 +29,14 @@
                             [readonly]="isReadonly || resourceIsReadonly"
                             [isLoading]="loadingProperties || savingChangedData"
                             [hasDeclareOption]="true"
+                            [showDelete]="!isReadOnly && isSelf()"
                             (propertyChanged)="dataChanged($event)"
                             (propertySelected)="propertySelected($event)"
                             (selectPropertyRow)="selectPropertyRow($event)"
                             (selectChildProperty)="selectChildProperty($event)"
                             (updateCheckedPropertyCount)="updateCheckedPropertyCount($event)"
-                            (selectInstanceRow)="selectInstanceRow($event)">
+                            (selectInstanceRow)="selectInstanceRow($event)"
+                            (deleteProperty)="deleteProperty($event)">
                         </properties-table>
                     </tab>
                     <tab tabTitle="Inputs">
@@ -63,8 +65,10 @@
                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData" (click)="declareProperties()" data-tests-id="declare-button">Declare</button>
             </div>
         </div>
-        <div class="right-column gray-border">
-            <tabs #hierarchyNavTabs tabStyle="simple-tabs">
+        <div class="right-column">
+            <div *ngIf="!isReadonly" class="add-btn"
+                 (click)="addProperty()" [ngClass]="{'disabled': !isSelf()}">Add Property</div>
+            <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
                 <tab tabTitle="Composition">
                     <div class="hierarchy-nav-container">
                         <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index 6de6dda7bb..95ff94317c 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -131,8 +131,14 @@
         display:flex;
         flex:0 0 350px;
         flex-direction:column;
-        margin: 45px 0 0 1em;
+        margin: 0px 0 0 1em;
         overflow-x:auto;
+         .add-btn{
+
+            align-self: flex-end;
+            margin-top: 10px;
+            margin-bottom: 19px;
+        }
 
         /deep/ .tabs {
             border-bottom: solid 1px #d0d0d0;
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 5a21e86879..953c973d1a 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
@@ -38,12 +38,14 @@ import {ComponentModeService} from "../../services/component-services/component-
 import {ModalService} from "../../services/modal.service";
 import {Tabs, Tab} from "../../components/ui/tabs/tabs.component";
 import {InputsUtils} from "./services/inputs.utils";
+import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
 import { InstanceFeDetails } from "../../../models/instance-fe-details";
 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";
 
+const SERVICE_SELF_TITLE = "SELF";
 @Component({
     templateUrl: './properties-assignment.page.component.html',
     styleUrls: ['./properties-assignment.page.component.less']
@@ -84,6 +86,7 @@ export class PropertiesAssignmentComponent {
     isValidChangedData:boolean;
     savingChangedData:boolean;
     stateChangeStartUnregister:Function;
+    serviceBePropertiesMap: InstanceBePropertiesMap;
 
     @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
     @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -132,7 +135,7 @@ export class PropertiesAssignmentComponent {
                 });
                 this.loadingInputs = false;
 
-            }, error => {}); //ignore error
+            });
         this.componentServiceNg2
             .getComponentResourcePropertiesData(this.component)
             .subscribe(response => {
@@ -141,6 +144,12 @@ export class PropertiesAssignmentComponent {
                 this.instances.push(...response.groupInstances);
                 this.instances.push(...response.policies);
 
+                // add the service self instance to the top of the list.
+                const serviceInstance = new ComponentInstance();
+                serviceInstance.name = SERVICE_SELF_TITLE;
+                serviceInstance.uniqueId = this.component.uniqueId;
+                this.instances.unshift(serviceInstance);
+
                 _.forEach(this.instances, (instance) => {
                     this.instancesNavigationData.push(instance);
                     this.componentInstanceNamesMap[instance.uniqueId] = <InstanceFeDetails>{name: instance.name, iconClass:instance.iconClass, originArchived:instance.originArchived};
@@ -150,7 +159,7 @@ export class PropertiesAssignmentComponent {
                     this.loadingProperties = false;
                 }
                 this.selectFirstInstanceByDefault();
-            }, error => {}); //ignore error
+            });
 
         this.stateChangeStartUnregister = this.$scope.$on('$stateChangeStart', (event, toState, toParams) => {
             // stop if has changed properties
@@ -183,6 +192,23 @@ export class PropertiesAssignmentComponent {
         this.updateViewMode();
     }
 
+    isSelf = ():boolean => {
+        return this.selectedInstanceData && this.selectedInstanceData.uniqueId == this.component.uniqueId;
+    }
+
+    getServiceProperties(){
+        this.loadingProperties = false;
+        this.componentServiceNg2
+            .getServiceProperties(this.component)
+            .subscribe(response => {
+                this.serviceBePropertiesMap = new InstanceBePropertiesMap();
+                this.serviceBePropertiesMap[this.component.uniqueId] = response;
+                this.processInstancePropertiesResponse(this.serviceBePropertiesMap, false);
+                this.loadingProperties = false;
+            }, error => {
+                this.loadingProperties = false;
+            });
+    }
 
     onInstanceSelectedUpdate = (instance: ComponentInstance|GroupInstance|PolicyInstance) => {
         // stop if has changed properties
@@ -210,6 +236,8 @@ export class PropertiesAssignmentComponent {
                         this.loadingProperties = false;
                     }, error => {
                     }); //ignore error
+            } else if (this.isSelf()) {
+                this.getServiceProperties();
             } else {
                 this.componentInstanceServiceNg2
                     .getComponentInstanceProperties(this.component, instance.uniqueId)
@@ -391,7 +419,7 @@ export class PropertiesAssignmentComponent {
         let inputsToCreate: InstancePropertiesAPIMap = new InstancePropertiesAPIMap(selectedComponentInstancesInputs, selectedComponentInstancesProperties, selectedGroupInstancesProperties, selectedPolicyInstancesProperties);
 
         this.componentServiceNg2
-            .createInput(this.component, inputsToCreate)
+            .createInput(this.component, inputsToCreate, this.isSelf())
             .subscribe(response => {
                 this.setInputTabIndication(response.length);
                 this.checkedPropertiesCount = 0;
@@ -439,8 +467,12 @@ export class PropertiesAssignmentComponent {
                             console.log('updated instance inputs:', response);
                         };
                     } else {
-                        request = this.componentInstanceServiceNg2
-                            .updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedProperties)
+                        if (this.isSelf()) {
+                            request = this.componentServiceNg2.updateServiceProperties(this.component, changedProperties);
+                        } else {
+                            request = this.componentInstanceServiceNg2
+                                .updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedProperties);
+                        }
                         handleSuccess = (response) => {
                             // reset each changed property with new value and remove it from changed properties list
                             response.forEach((resProp) => {
@@ -650,7 +682,57 @@ export class PropertiesAssignmentComponent {
             }, error => {}); //ignore error
     };
 
+    deleteProperty = (property: PropertyFEModel) => {
+        let propertyToDelete = new PropertyFEModel(property);
+        this.loadingProperties = true;
+        let feMap = this.instanceFePropertiesMap;
+        this.componentServiceNg2
+            .deleteServiceProperty(this.component, propertyToDelete)
+            .subscribe(response => {
+                const props = feMap[this.component.uniqueId];
+                props.splice(props.findIndex(p => p.uniqueId === response),1);
+                this.loadingProperties = false;
+            }, error => {
+                this.loadingProperties = false;
+                console.error(error);
+            });
+    };
+
+    /*** addProperty ***/
+    addProperty = () => {
+        let modalTitle = 'Add Property';
+        const modal = this.ModalService.createCustomModal(new ModalModel(
+            'sm',
+            modalTitle,
+            null,
+            [
+                new ButtonModel('Save', 'blue', () => {
+                    modal.instance.dynamicContent.instance.isLoading = true;
+                    const newProperty: PropertyBEModel = modal.instance.dynamicContent.instance.propertyModel;
+                    this.componentServiceNg2.createServiceProperty(this.component, newProperty)
+                        .subscribe(response => {
+                            modal.instance.dynamicContent.instance.isLoading = false;
+                            let newProp: PropertyFEModel = this.propertiesUtils.convertAddPropertyBAToPropertyFE(response);
+                            this.instanceFePropertiesMap[this.component.uniqueId].push(newProp);
+                            modal.instance.close();
+                        }, (error) => {
+                            modal.instance.dynamicContent.instance.isLoading = false;
+                            this.Notification.error({
+                                message: 'Failed to add property:' + error,
+                                title: 'Failure'
+                            });
+                        });
 
+                }, () => !modal.instance.dynamicContent.instance.checkFormValidForSubmit()),
+                new ButtonModel('Cancel', 'outline grey', () => {
+                    modal.instance.close();
+                }),
+            ],
+            null
+        ));
+        this.ModalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {});
+        modal.instance.open();
+    };
 
     /*** SEARCH RELATED FUNCTIONS ***/
     searchPropertiesInstances = (filterData:FilterPropertiesAssignmentData) => {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.html
new file mode 100644
index 0000000000..e97ec79c04
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.html
@@ -0,0 +1,46 @@
+<div class="property-creator">
+    <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
+    <form class="w-sdc-form">
+
+        <div class="side-by-side">
+            <div class="i-sdc-form-item">
+                <label class="i-sdc-form-label required">Name</label>
+                <input class="i-sdc-form-input"
+                       type="text"
+                       name="propertyName"
+                       data-tests-id="property-name"
+                       [(ngModel)]="propertyModel.name"
+                       [ngModelOptions]="{ debounce: 200 }"
+                       autofocus/>
+            </div>
+            <!-- Type -->
+            <div class="i-sdc-form-item">
+                <label class="i-sdc-form-label required">Type</label>
+                <ui-element-dropdown [testId]="'property-type'"
+                                     class="cell link-selector"
+                                     [values]="typesProperties"
+                                     [(value)]="propertyModel.type"></ui-element-dropdown>
+            </div>
+            <div class="i-sdc-form-item propertySchemaType" *ngIf="showSchema()">
+                <label class="i-sdc-form-label required">Schema Type</label>
+                <ui-element-dropdown [testId]="'property-type'"
+                                     class="cell link-selector"
+                                     [values]="typesSchemaProperties"
+                                     [(value)]="propertyModel.schema.property.type"></ui-element-dropdown>
+            </div>
+        </div>
+
+        <!-- Description -->
+        <div class="i-sdc-form-item">
+            <label class="i-sdc-form-label">Description</label>
+            <textarea  class="i-sdc-form-textarea"
+                       [pattern]="commentValidationPattern"
+                       name="propertyDescription"
+                       [(ngModel)]="propertyModel.description"
+                       [ngModelOptions]="{ debounce: 200 }"
+                       data-tests-id="property-description"
+            ></textarea>
+        </div>
+
+    </form>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.less
new file mode 100644
index 0000000000..d17a45e2c9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.less
@@ -0,0 +1,35 @@
+@import '../../../../../assets/styles/variables.less';
+
+.property-creator {
+    font-family: @font-opensans-regular;
+    user-select: none;
+    padding-top: 12px;
+    padding-bottom: 20px;
+
+    .i-sdc-form-label {
+        font-size: 12px;
+    }
+
+    .w-sdc-form .i-sdc-form-item {
+        margin-bottom: 15px;
+    }
+
+    .side-by-side {
+        display: flex;
+
+        .i-sdc-form-item {
+            flex-basis: 100%;
+
+            &:first-child {
+                flex-basis: 50%;
+                margin-right: 10px;
+            }
+
+        }
+        .propertySchemaType{
+            margin-left: 10px;
+        }
+    }
+
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
new file mode 100644
index 0000000000..d5946d2e4a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
@@ -0,0 +1,78 @@
+import * as _ from "lodash";
+import {Component} from '@angular/core';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import { DataTypeService } from "app/ng2/services/data-type.service";
+import {PropertyBEModel, DataTypesMap} from "app/models";
+import {PROPERTY_DATA} from "app/utils";
+import {PROPERTY_TYPES} from "../../../../utils";
+
+
+
+@Component({
+    selector: 'property-creator',
+    templateUrl: './property-creator.component.html',
+    styleUrls:['./property-creator.component.less'],
+})
+
+export class PropertyCreatorComponent {
+
+    typesProperties: Array<DropdownValue>;
+    typesSchemaProperties: Array<DropdownValue>;
+    propertyModel: PropertyBEModel;
+    //propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
+    //commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
+    //types:Array<string>;
+    dataTypes:DataTypesMap;
+    isLoading:boolean;
+
+    constructor(protected dataTypeService:DataTypeService) {}
+
+    ngOnInit() {
+        this.propertyModel = new PropertyBEModel();
+        this.propertyModel.type = '';
+        this.propertyModel.schema.property.type = '';
+        const types: Array<string> =  PROPERTY_DATA.TYPES; //All types - simple type + map + list
+        this.dataTypes = this.dataTypeService.getAllDataTypes(); //Get all data types in service
+        const nonPrimitiveTypes :Array<string> = _.filter(Object.keys(this.dataTypes), (type:string)=> {
+            return types.indexOf(type) == -1;
+        });
+
+        this.typesProperties = _.map(PROPERTY_DATA.TYPES,
+            (type: string) => new DropdownValue(type, type)
+        );
+        let typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
+            (type: string) => new DropdownValue(type, type)
+        );
+        let nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
+            (type: string) => new DropdownValue(type,
+                    type.replace("org.openecomp.datatypes.heat.",""))
+        );
+        this.typesProperties = _.concat(this.typesProperties,nonPrimitiveTypesValues);
+        this.typesSchemaProperties = _.concat(typesSimpleProperties,nonPrimitiveTypesValues);
+        this.typesProperties.unshift(new DropdownValue('','Select Type...'));
+        this.typesSchemaProperties.unshift(new DropdownValue('','Select Schema Type...'));
+
+    }
+
+    checkFormValidForSubmit(){
+        const showSchema:boolean = this.showSchema();
+        let isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type)? false : true;
+        if (!showSchema){
+            this.propertyModel.schema.property.type = '';
+        }
+        return this.propertyModel.name && this.propertyModel.type && isSchemaValid;
+    }
+
+    showSchema():boolean {
+        return [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP].indexOf(this.propertyModel.type) > -1;
+    };
+
+    onSchemaTypeChange():void {
+        if (this.propertyModel.type == PROPERTY_TYPES.MAP) {
+            this.propertyModel.value = JSON.stringify({'': null});
+        } else if (this.propertyModel.type == PROPERTY_TYPES.LIST) {
+            this.propertyModel.value = JSON.stringify([]);
+        }
+    };
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
new file mode 100644
index 0000000000..92accb26b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
@@ -0,0 +1,27 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {PropertyCreatorComponent} from "./property-creator.component";
+import {FormsModule} from "@angular/forms";
+import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {TranslateModule} from "../../../shared/translator/translate.module";
+
+@NgModule({
+    declarations: [
+        PropertyCreatorComponent,
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        FormElementsModule,
+        UiElementsModule,
+        TranslateModule
+    ],
+    exports: [],
+    entryComponents: [
+        PropertyCreatorComponent
+    ],
+    providers: []
+})
+
+export class PropertyCreatorModule {}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
index e7b59b96ba..3ed535d6a0 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
@@ -75,6 +75,14 @@ export class PropertiesUtils {
         return instanceFePropertiesMap;
     }
 
+    public convertAddPropertyBAToPropertyFE = (property: PropertyBEModel):PropertyFEModel => {
+        let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
+        this.initValueObjectRef(newFEProp);
+        newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
+        this.dataTypeService.checkForCustomBehavior(newFEProp);
+        return newFEProp;
+    }
+
     public createListOrMapChildren = (property:PropertyFEModel | DerivedFEProperty, key: string, valueObj: any): Array<DerivedFEProperty> => {
         let newProps: Array<DerivedFEProperty> = [];
         let parentProp = new DerivedFEProperty(property, property.propertiesName, true, key, valueObj);
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index 97e62daba7..69871abe04 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -24,7 +24,7 @@ import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
 import {Response, URLSearchParams} from '@angular/http';
-import { Component, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData, OperationModel, BEOperationModel, CreateOperationResponse} from "app/models";
+import { Component, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData, PropertyBEModel, OperationModel, BEOperationModel, CreateOperationResponse} from "app/models";
 import {downgradeInjectable} from '@angular/upgrade/static';
 import {COMPONENT_FIELDS, CommonUtils} from "app/utils";
 import {ComponentGenericResponse} from "../responses/component-generic-response";
@@ -205,8 +205,9 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
     }
 
-    createInput(component:Component, inputsToCreate:InstancePropertiesAPIMap):Observable<any> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputsToCreate)
+    createInput(component:Component, inputsToCreate:InstancePropertiesAPIMap, isSelf:boolean):Observable<any> {
+        let inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs)
             .map(res => {
                 return res.json();
             })
@@ -247,6 +248,42 @@ export class ComponentServiceNg2 {
             });
     }
 
+    createServiceProperty(component: Component, propertyModel:PropertyBEModel): Observable<PropertyBEModel> {
+        let serverObject = {};
+        serverObject[propertyModel.name] = propertyModel;
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', serverObject)
+            .map(res => {
+                let property:PropertyBEModel = new PropertyBEModel(res.json());
+                return property;
+            })
+    }
+
+    getServiceProperties(component: Component): Observable<Array<PropertyBEModel>> {
+        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties')
+            .map((res: Response) => {
+                if (!res.text()){
+                    return new Array<PropertyBEModel>();
+                }
+                return CommonUtils.initBeProperties(res.json());
+            });
+    }
+
+    updateServiceProperties(component: Component, properties: PropertyBEModel[]) {
+        return this.http.put( this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', properties)
+            .map((res: Response) => {
+                const resJson = res.json();
+                return _.map(resJson,
+                    (resValue:PropertyBEModel) => new PropertyBEModel(resValue));
+            });
+    }
+
+    deleteServiceProperty(component:Component, property:PropertyBEModel):Observable<string> {
+        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties/' + property.uniqueId )
+            .map((res:Response) => {
+                return property.uniqueId;
+            })
+    }
+
     getDependencies(componentType:string, componentId: string):Observable<Array<IDependenciesServerResponse>> {
         return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies')
             .map((res:Response) => {