Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

33 files changed, 819 insertions, 714 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap
new file mode 100644
index 0000000000..02e98e2219
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter-properties-assignemnt component should match current snapshot of artifact-tab component 1`] = `
+<filter-properties-assignment
+  allSelected="false"
+  clearAll={[Function Function]}
+  close={[Function Function]}
+  filterData={[Function FilterPropertiesAssignmentData]}
+  filterPopover={[Function ElementRef]}
+  footerButtons={[Function Object]}
+  onTypeSelected={[Function Function]}
+  search={[Function Function]}
+  searchProperties={[Function EventEmitter]}
+  selectAll={[Function Function]}
+  selectedTypes={[Function Object]}
+  someTypesSelectedAndThereIsPropertyName={[Function Function]}
+>
+  <popover-content
+    placement="bottom-right"
+  >
+    <form>
+      <div
+        class="field"
+      >
+        <label>
+          Resource Type
+        </label>
+        <div>
+          <checkbox
+            data-tests-id="filter-checkbox-all"
+          />
+        </div>
+        
+      </div>
+      <div
+        class="field"
+      >
+        <label>
+          Property Name
+        </label>
+        <input
+          class="i-sdc-form-input"
+          data-tests-id="filter-box"
+          name="propertyName"
+          placeholder="Type here"
+          required=""
+        />
+      </div>
+    </form>
+  </popover-content><div
+    class="open-filter-button"
+  >
+    <div
+      class="sprite-new filter-icon"
+      data-tests-id="filter-button"
+    />
+  </div>
+</filter-properties-assignment>
+`;
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
index 9593ade48b..1c2d77a728 100644
--- a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
@@ -38,6 +38,6 @@
         </div>
     </form>
 </popover-content>
-<div class="open-filter-button" [popover]="filterPopover" [ngClass]="{'open':showPopover}" (onShown)="showPopover = true" (onHidden)="showPopover = false">
+<div class="open-filter-button" [popover]="filterPopover" >
     <div class="sprite-new filter-icon" data-tests-id="filter-button"></div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts
new file mode 100644
index 0000000000..bcc5535b32
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts
@@ -0,0 +1,141 @@
+import {async, ComponentFixture} from "@angular/core/testing";
+import {FilterPropertiesAssignmentComponent} from "./filter-properties-assignment.component";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {FilterPropertiesAssignmentData} from "../../../../models/filter-properties-assignment-data";
+import {PopoverComponent} from "../../ui/popover/popover.component";
+
+
+
+describe('filter-properties-assignemnt component', () => {
+
+    let fixture: ComponentFixture<FilterPropertiesAssignmentComponent>;
+
+    beforeEach(
+        async(() => {
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [FilterPropertiesAssignmentComponent],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(FilterPropertiesAssignmentComponent);
+
+            });
+        })
+    );
+
+
+    it('should match current snapshot of artifact-tab component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('on selectAll', () => {
+        let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+        filterData.propertyName = 'testVal';
+        let typesOptions:Array<string> = ['option1', 'option2', 'option3'];
+        let selectedTypes:Object = {};
+
+        fixture.componentInstance.filterData = filterData;
+        fixture.componentInstance.typesOptions = typesOptions;
+        fixture.componentInstance.selectedTypes = selectedTypes;
+
+        fixture.componentInstance.selectAll();
+
+        let expectedRes = {"option1": false,"option2": false,"option3": false};
+        expect(fixture.componentInstance.selectedTypes).toEqual(expectedRes);
+    });
+
+
+    it ('on onTypeSelected allSelected set to False', () => {
+        let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+        fixture.componentInstance.selectedTypes = selectedTypes;
+        fixture.componentInstance.allSelected = true;
+        fixture.componentInstance.onTypeSelected('option2');
+
+        expect(fixture.componentInstance.allSelected).toBe(false);
+    });
+
+    it ('on onTypeSelected allSelected remains True', () => {
+        let selectedTypes:Object = {"option1": true,"option2": true,"option3": true};
+        fixture.componentInstance.selectedTypes = selectedTypes;
+        fixture.componentInstance.allSelected = true;
+        fixture.componentInstance.onTypeSelected('option2');
+
+        expect(fixture.componentInstance.allSelected).toBe(true);
+    });
+
+    it ('on clearAll', () => {
+        let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+        filterData.propertyName = 'testVal';
+        let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+
+        fixture.componentInstance.filterData = filterData;
+        fixture.componentInstance.selectedTypes = selectedTypes;
+        fixture.componentInstance.allSelected = true;
+
+        fixture.componentInstance.clearAll();
+
+        expect(fixture.componentInstance.filterData.propertyName).toBe('');
+        expect(fixture.componentInstance.allSelected).toBe(false);
+    });
+
+    it ('someTypesSelectedAndThereIsPropertyName return True', ()=> {
+        let res = fixture.componentInstance.someTypesSelectedAndThereIsPropertyName();
+
+        expect(res).toBe(true)
+    });
+
+    it ('someTypesSelectedAndThereIsPropertyName return Null', ()=> {
+        let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+        let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+        filterData.propertyName = 'testVal';
+
+        fixture.componentInstance.selectedTypes = selectedTypes;
+        fixture.componentInstance.filterData = filterData;
+
+        let res = fixture.componentInstance.someTypesSelectedAndThereIsPropertyName();
+
+        expect(res).toBe(null)
+    });
+
+    it ('search', ()=> {
+
+        let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+        filterData.selectedTypes = ["CP"];
+        fixture.componentInstance.filterData = filterData;
+
+        let componentType: string = 'resource';
+        fixture.componentInstance.componentType = componentType;
+
+        let selectedTypes:Object = {"option1": true,"CP": true,"option3": true};
+        fixture.componentInstance.selectedTypes = selectedTypes;
+
+        let temp:any;
+        let filterPopover: PopoverComponent = new PopoverComponent(temp , temp );
+        fixture.componentInstance.filterPopover = filterPopover;
+        fixture.componentInstance.filterPopover.hide = jest.fn();
+
+        fixture.componentInstance.search();
+
+        expect(fixture.componentInstance.filterData.selectedTypes).toEqual(["CP"]);
+        expect(fixture.componentInstance.filterPopover.hide).toHaveBeenCalled();
+    });
+
+    it('close', () => {
+        let temp:any;
+        let filterPopover: PopoverComponent = new PopoverComponent(temp , temp );
+        fixture.componentInstance.filterPopover = filterPopover;
+        fixture.componentInstance.filterPopover.hide = jest.fn();
+
+        fixture.componentInstance.close();
+
+        expect(fixture.componentInstance.filterPopover.hide).toHaveBeenCalled();
+    });
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
index 41ecaa899e..9d1a2fa734 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
@@ -29,8 +29,8 @@
       [rowHeight]="200"
       [reorderable]="false"
   >
-    <ngx-datatable-column prop="{{col.prop}}" [minWidth]="100" *ngFor="let col of columns">
-      <template let-column="column" height="100" ngx-datatable-header-template>
+    <ngx-datatable-column *ngFor="let col of columns" prop="{{col.prop}}" [minWidth]="100" >
+      <ng-template let-column="column" height="100" ngx-datatable-header-template>
             <span class="datatable-column-span">
               <b>{{col.name}}</b>
               <div *ngIf="canBeDeleted(col.name)" style="width: 45px !important; color: red; "
@@ -44,23 +44,23 @@
             placeholder='Filter column...'
             (keyup)='updateColumnFilter($event, col.prop)'
         />
-      </template>
+      </ng-template>
     </ngx-datatable-column>
 
     <ngx-datatable-column *ngIf="addNewColumn" class="datatable-white-body-cell" [minWidth]="220" [maxWidth]="220" [width]="220" >
-      <template ngx-datatable-header-template>
+      <ng-template ngx-datatable-header-template>
         <gab-column-provider [pathsAndNames]="pathsandnames" (onCancel)="hideAddNewColumn()" (onSave)="refresh()"></gab-column-provider>
-      </template>
-      <template class="datatable-white-body-cell" ngx-datatable-cell-template>
-      </template>
+      </ng-template>
+      <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
+      </ng-template>
     </ngx-datatable-column>
 
     <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="50" [width]="50" >
-      <template ngx-datatable-header-template>
+      <ng-template ngx-datatable-header-template>
         <div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div>
-      </template>
-      <template class="datatable-white-body-cell" ngx-datatable-cell-template>
-      </template>
+      </ng-template>
+      <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
+      </ng-template>
     </ngx-datatable-column>
   </ngx-datatable>
-</div>
\ No newline at end of file
+</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
index 4de7ff07d9..ea8039e1b4 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
@@ -64,8 +64,8 @@ export class GenericArtifactBrowserComponent {
     this.gabService.getArtifact(this.artifactid, this.resourceid, paths)
     .subscribe(
         response => {
-          let typedServerResponse: IServerResponse = response.json() as IServerResponse;
-          this.normalizeDataForNgxDatatable(typedServerResponse.data);
+          // let typedServerResponse: IServerResponse = response.json() as IServerResponse;
+          this.normalizeDataForNgxDatatable(response['data']);
         },
         () => {
             this.ready = false;
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts
new file mode 100644
index 0000000000..fc76463970
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts
@@ -0,0 +1,52 @@
+import { async, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import 'jest-dom/extend-expect';
+import {HierarchyNavigationComponent} from "./hierarchy-navigation.component";
+import {HierarchyDisplayOptions} from "./hierarchy-display-options";
+
+
+describe('hierarchyNavigationComponent', () => {
+  let fixture: ComponentFixture<HierarchyNavigationComponent>;
+    let hierarchyDisplayOptions: HierarchyDisplayOptions;
+  beforeEach(
+    async(() => {
+      const configure: ConfigureFn = testBed => {
+        testBed.configureTestingModule({
+          declarations: [HierarchyNavigationComponent]
+        });
+      };
+
+      configureTests(configure).then(testBed => {
+        fixture = testBed.createComponent(HierarchyNavigationComponent);
+        hierarchyDisplayOptions = new HierarchyDisplayOptions("id", "name", "children");
+          fixture.componentInstance.displayOptions = hierarchyDisplayOptions;
+          fixture.detectChanges();
+          fixture.componentInstance.displayData = [{name: "aaa", id: "1", children: [{name: "bbb", id: "1.1"}, {name: "ccc", id: "1.2", children: [{name: "aaa", id: "1.2.1"}]}]}, {name: "bbb", id: "2"}];
+          fixture.detectChanges();
+      });
+    })
+  );
+
+  it('should have a selected class after user click on a tree node',
+    () => {
+        let firstNodeElement = fixture.debugElement.query(By.css('.node-item'));
+        fixture.componentInstance.updateSelected.subscribe((item) => {
+            fixture.componentInstance.selectedItem = item.id;
+            fixture.detectChanges();
+        });
+        firstNodeElement.nativeElement.click();
+        fixture.whenStable().then(() => {
+            expect(firstNodeElement.children[0].nativeElement).toHaveClass('selected');
+        });
+    });
+
+    it('should call onClick function when user click on a tree node',
+        () => {
+            spyOn(fixture.componentInstance, 'onClick');
+            let firstNodeElement = fixture.debugElement.query(By.css('.node-item')).nativeElement;
+            firstNodeElement.click();
+            expect(fixture.componentInstance.onClick).toHaveBeenCalled();
+        });
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
index 1698157e90..8b20aa28f8 100644
--- a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
@@ -21,7 +21,6 @@
 import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {HierarchyDisplayOptions} from './hierarchy-display-options';
 
-
 @Component({
     selector: 'hierarchy-navigation',
     templateUrl: './hierarchy-navigation.component.html',
@@ -32,7 +31,6 @@ export class HierarchyNavigationComponent {
     @Input() displayData: Array<any>;
     @Input() selectedItem: any;
     @Input() displayOptions: HierarchyDisplayOptions;
-
     @Output() updateSelected:EventEmitter<any> =  new EventEmitter();
 
     onClick = ($event, item) => {
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
index 3ef1f57bf2..eeba590046 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
@@ -35,33 +35,37 @@
         <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
         <div>
             <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}">
+                <!-- Property Name -->
                 <div class="table-cell col1">
                     <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div>
                     <span *ngIf="input.description"
                           class="property-description-icon sprite-new show-desc"
                           tooltip="{{input.description}}" tooltipDelay="0"></span>
                 </div>
+                <!-- From Instance -->
                 <div class="table-cell col3">
                     <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]?.name}}">
                         <span>{{instanceNamesMap[input.instanceUniqueId]?.name}}</span>
                     </div>
                 </div>
+                <!-- Type -->
                 <div class="table-cell col2">
                     <div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
                         <span>{{input.type | contentAfterLastDot}}</span>
                     </div>
                 </div>
+                <!-- Value -->
                 <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
                     <dynamic-element class="value-input"
-                                     *ngIf="input.isSimpleType"
+                                     *ngIf="checkInstanceFePropertiesMapIsFilled() && input.isSimpleType"
                                      pattern="validationUtils.getValidationPattern(input.type)"
                                      [value]="input.defaultValueObj"
                                      [type]="input.type"
-                                     [constraints]="input.constraints"
                                      [name]="input.name"
                                      (elementChanged)="onInputChanged(input, $event)"
                                      [readonly]="readonly"
-                                     [testId]="'input-' + input.name">
+                                     [testId]="'input-' + input.name"
+                                     [constraints] = "getConstraints(input)">
                     </dynamic-element>
                     <div class="delete-button-container">
                         <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
index d95198f162..f45d5a85c7 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
@@ -26,6 +26,8 @@ import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { InputFEModel } from "app/models";
 import { ModalService } from "../../../services/modal.service";
 import { InstanceFeDetails } from "app/models/instance-fe-details";
+import { InstanceFePropertiesMap } from "../../../../models/properties-inputs/property-fe-map";
+import { DataTypeService } from "../../../services/data-type.service";
 
 @Component({
     selector: 'inputs-table',
@@ -41,6 +43,8 @@ export class InputsTableComponent {
     @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
 
+    @Input() fePropertiesMap: InstanceFePropertiesMap;
+    
     sortBy: String;
     reverse: boolean;
     selectedInputToDelete: InputFEModel;    
@@ -74,7 +78,8 @@ export class InputsTableComponent {
     };
 
 
-    constructor(private modalService: ModalService) {
+    constructor(private modalService: ModalService, private dataTypeService: DataTypeService){
+        var x = 5
     }
 
 
@@ -89,9 +94,40 @@ export class InputsTableComponent {
     };
 
     openDeleteModal = (input: InputFEModel) => {
+        console.log('exist inputs: ' + this.inputs)
+        
+        
         this.selectedInputToDelete = input;
         this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open();
     }
+
+    getConstraints(input:InputFEModel): string[]{
+        
+        if (input.inputPath){
+            const pathValuesName = input.inputPath.split('#');
+            const rootPropertyName = pathValuesName[0];
+            const propertyName = pathValuesName[1];
+            let filterredRootPropertyType = _.values(this.fePropertiesMap)[0].filter(property => 
+                property.name == rootPropertyName);
+            if (filterredRootPropertyType.length > 0){
+                let rootPropertyType = filterredRootPropertyType[0].type;
+                return this.dataTypeService.getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName);
+            }else{
+                return null;
+            }
+                
+        }
+        // else if(input.constraints.length > 0){
+        //     return input.constraints[0].validValues
+        // }
+        else{
+            return null;
+        }
+    }
+
+    checkInstanceFePropertiesMapIsFilled(){
+        return _.keys(this.fePropertiesMap).length > 0
+    }
 }
 
 
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
index aa5f2420b3..9613439859 100644
--- a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
@@ -14,12 +14,11 @@
  * permissions and limitations under the License.
  */
 
-
-import { Component, Input, Output, EventEmitter } from "@angular/core";
-import { PolicyInstance } from "app/models";
-import { ModalService } from "../../../services/modal.service";
-import { InstanceFeDetails } from "app/models/instance-fe-details";
-import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PolicyInstance } from 'app/models';
+import { InstanceFeDetails } from 'app/models/instance-fe-details';
+import { TranslateService } from 'app/ng2/shared/translator/translate.service';
+import { ModalService } from '../../../services/modal.service';
 
 @Component({
     selector: 'policies-table',
@@ -28,13 +27,13 @@ import {TranslateService} from 'app/ng2/shared/translator/translate.service';
 })
 export class PoliciesTableComponent {
 
-    @Input() policies: Array<PolicyInstance>;
+    @Input() policies: PolicyInstance[];
     @Input() instanceNamesMap: Map<string, InstanceFeDetails>;
     @Input() readonly: boolean;
     @Input() isLoading: boolean;
     @Output() deletePolicy: EventEmitter<any> = new EventEmitter<any>();
 
-    sortBy: String;
+    sortBy: string;
     reverse: boolean;
     selectedPolicyToDelete: PolicyInstance;
     deleteMsgTitle: string;
@@ -42,43 +41,39 @@ export class PoliciesTableComponent {
     modalDeleteBtn: string;
     modalCancelBtn: string;
 
+    constructor(private modalService: ModalService, private translateService: TranslateService) {
+    }
+
     sort = (sortBy) => {
         this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
-        let reverse = this.reverse ? 1 : -1;
+        const reverse = this.reverse ? 1 : -1;
         this.sortBy = sortBy;
-        let instanceNameMapTemp = this.instanceNamesMap;
-        let itemIdx1Val = "";
-        let itemIdx2Val = "";
-        this.policies.sort(function (itemIdx1, itemIdx2) {
-            if (sortBy == 'instanceUniqueId') {
-                itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : "";
-                itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : "";
-            }
-            else {
+        const instanceNameMapTemp = this.instanceNamesMap;
+        let itemIdx1Val = '';
+        let itemIdx2Val = '';
+        this.policies.sort((itemIdx1, itemIdx2) => {
+            if (sortBy === 'instanceUniqueId') {
+                itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : '';
+                itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : '';
+            } else {
                 itemIdx1Val = itemIdx1[sortBy];
                 itemIdx2Val = itemIdx2[sortBy];
-            }            
+            }
             if (itemIdx1Val < itemIdx2Val) {
                 return -1 * reverse;
-            }
-            else if (itemIdx1Val > itemIdx2Val) {
+            } else if (itemIdx1Val > itemIdx2Val) {
                 return 1 * reverse;
-            }
-            else {
+            } else {
                 return 0;
             }
         });
-    };
-
-
-    constructor(private modalService: ModalService, private translateService: TranslateService) {
     }
 
     ngOnInit() {
-        this.translateService.languageChangedObservable.subscribe(lang => {
-            this.deleteMsgTitle = this.translateService.translate("DELETE_POLICY_TITLE");
-            this.modalDeleteBtn = this.translateService.translate("MODAL_DELETE");
-            this.modalCancelBtn = this.translateService.translate("MODAL_CANCEL");
+        this.translateService.languageChangedObservable.subscribe((lang) => {
+            this.deleteMsgTitle = this.translateService.translate('DELETE_POLICY_TITLE');
+            this.modalDeleteBtn = this.translateService.translate('MODAL_DELETE');
+            this.modalCancelBtn = this.translateService.translate('MODAL_CANCEL');
 
         });
     }
@@ -86,15 +81,13 @@ export class PoliciesTableComponent {
     onDeletePolicy = () => {
         this.deletePolicy.emit(this.selectedPolicyToDelete);
         this.modalService.closeCurrentModal();
-    };
+    }
 
     openDeleteModal = (policy: PolicyInstance) => {
         this.selectedPolicyToDelete = policy;
-        this.translateService.languageChangedObservable.subscribe(lang => {
-            this.deleteMsgBodyTxt = this.translateService.translate("DELETE_POLICY_MSG", {policyName: policy.name});
+        this.translateService.languageChangedObservable.subscribe((lang) => {
+            this.deleteMsgBodyTxt = this.translateService.translate('DELETE_POLICY_MSG', {policyName: policy.name});
             this.modalService.createActionModal(this.deleteMsgTitle, this.deleteMsgBodyTxt, this.modalDeleteBtn, this.onDeletePolicy, this.modalCancelBtn).instance.open();
         });
     }
 }
-
-
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
index f780c62c0b..57cb13c281 100644
--- a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
@@ -14,12 +14,12 @@
  * permissions and limitations under the License.
  */
 
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {PoliciesTableComponent} from "./policies-table.component";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { GlobalPipesModule } from '../../../pipes/global-pipes.module';
+import { PoliciesTableComponent } from './policies-table.component';
 
 @NgModule({
     declarations: [
@@ -38,4 +38,4 @@ import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
     providers: []
 })
 export class PoliciesTableModule {
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index c4639aeda0..f6396e6f2c 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -12,8 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  -->
-
-
+ 
+ 
 <div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
     [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName, 'readonly':  property.isDisabled ||property.isDeclared}"
     [class.with-top-border]="property.isChildOfListOrMap"
@@ -48,13 +48,13 @@
                 pattern="validationUtils.getValidationPattern(property.type)"
                 [value]="property.isDeclared ? property.value : property.valueObj"
                 [type]="property.isDeclared ? 'string' : property.type"
-                [childType]="property.schema.property.type"
                 [name]="property.name"
                 [path]="property.propertiesName"
-                [constraints]="property.constraints"
                 (elementChanged)="onElementChanged($event)"
                 [readonly]="readonly || property.isDeclared || property.isDisabled"
                 [testId]="'prop-' + propertyTestsId"
+                [declared] = "property.isDeclared"
+                [constraints] = "constraints"
             ></dynamic-element>
         </div>
     </ng-container>
@@ -69,7 +69,7 @@
     <ng-container *ngIf="!property.isDeclared">
             <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to list</a>
             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'delete-from-list-' + propertyTestsId"></span>
-            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId"></span>
+            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId" ></span>
     </ng-container>
 
 </div>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
index 0adce2c99d..1007292854 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
@@ -60,7 +60,7 @@
         align-self:center;
         cursor:pointer;
     }
-
+    
 }
 
 .filtered {
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index 6e19c95003..715426f212 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -23,7 +23,7 @@ import {Component, Input, Output, EventEmitter, ViewChild, ComponentRef} from "@
 import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models";
 import { PROPERTY_TYPES } from 'app/utils';
 import { DataTypeService } from "../../../../services/data-type.service";
-import { trigger, state, style, transition, animate } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils";
 import {IUiElementChangeEvent} from "../../../ui/form-components/ui-element-base.component";
 import {DynamicElementComponent} from "../../../ui/dynamic-element/dynamic-element.component";
@@ -42,6 +42,7 @@ export class DynamicPropertyComponent {
     isPropertyFEModel: boolean;
     nestedLevel: number;
     propertyTestsId: string;
+    constraints:string[];
 
     @Input() canBeDeclared: boolean;
     @Input() property: PropertyFEModel | DerivedFEProperty;
@@ -72,7 +73,30 @@ export class DynamicPropertyComponent {
         this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName;
         this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length;
         this.rootProperty = (this.rootProperty) ? this.rootProperty : <PropertyFEModel>this.property;
-        this.propertyTestsId = this.getPropertyTestsId();
+        this.propertyTestsId = this.getPropertyTestsId(); 
+        
+        this.initConsraintsValues();
+        
+        
+    }
+
+    initConsraintsValues(){
+        let primitiveProperties = ['string', 'integer', 'float', 'boolean'];
+
+        //Property has constraints
+        if(this.property.constraints){
+            this.constraints = this.property.constraints[0].validValues
+        }
+
+        //Complex Type
+        else if (primitiveProperties.indexOf(this.rootProperty.type) == -1 && primitiveProperties.indexOf(this.property.type) >= 0 ){
+            this.constraints = this.dataTypeService.getConstraintsByParentTypeAndUniqueID(this.rootProperty.type, this.property.name);           
+        }
+ 
+        else{
+            this.constraints = null;
+        }
+        
     }
 
     ngDoCheck() {
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 2068b170b3..89b85d3578 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
@@ -37,18 +37,18 @@
         <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
 
         <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:vspId">
+            <!-- Icon & Instance Name -->
             <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">
-
-
                 <span [ngClass]="['prop-instance-icon', feInstanceNamesMap[instanceId].iconClass, 'small']"></span>
-                {{feInstanceNamesMap[instanceId].name}}
+                {{feInstanceNamesMap[instanceId].name}} 
                 <div class="sprite-new archive-label" *ngIf="feInstanceNamesMap[instanceId].originArchived == true"></div>
             </div>
-
-            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | orderBy:{path: path, direction: direction}; trackBy:property?.name "
+            
+            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name "
                 (click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
 
                 <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
+                <!-- Property Name -->
                     <div class="property-name">
                         <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled || property.isDeclared || readonly"
                             (checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></checkbox>
@@ -62,16 +62,19 @@
                         <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>
+                <!-- Property Type -->
                 <div class="table-cell col2" *ngIf="!hidePropertyType">
                     <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
                         <span>{{property.type | contentAfterLastDot}}</span>
                     </div>
                 </div>
+                <!-- Property ES (Entry Schema) -->
                 <div class="table-cell col3" *ngIf="!hidePropertyType">
                     <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
                         <span>{{property.schema.property.type | contentAfterLastDot}}</span>
                     </div>
                 </div>
+                <!-- Property Value -->
                 <div class="table-cell valueCol">
                     <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
                     <dynamic-property
@@ -86,9 +89,10 @@
                         (expandChild)="property.updateExpandedChildPropertyId($event)"
                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
                         (checkProperty)="propertyChecked(property, $event)"
+
                         >
+                        
                     </dynamic-property>
-
                 </div>
             </div>
         </ng-container>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts
new file mode 100644
index 0000000000..ea524e54b1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts
@@ -0,0 +1,175 @@
+import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { DerivedFEProperty } from '../../../../models/properties-inputs/derived-fe-property';
+import { PropertyBEModel } from '../../../../models/properties-inputs/property-be-model';
+import { PropertyFEModel } from '../../../../models/properties-inputs/property-fe-model';
+import { ContentAfterLastDotPipe } from '../../../pipes/contentAfterLastDot.pipe';
+import { KeysPipe } from '../../../pipes/keys.pipe';
+import { PropertiesOrderByPipe } from '../../../pipes/properties-order-by.pipe';
+import { SearchFilterPipe } from '../../../pipes/searchFilter.pipe';
+import { ModalService } from '../../../services/modal.service';
+import { PropertiesService } from '../../../services/properties.service';
+import { PropertiesTableComponent, PropertyRowSelectedEvent } from './properties-table.component';
+
+describe('properties-table component', () => {
+
+    let fixture: ComponentFixture<PropertiesTableComponent>;
+    let propertiesServiceMock: Partial<PropertiesService>;
+    let modalServiceMock: Partial<ModalService>;
+
+    beforeEach(
+        () => {
+            propertiesServiceMock = {
+                undoDisableRelatedProperties: jest.fn(),
+                disableRelatedProperties: jest.fn()
+            };
+            modalServiceMock = {
+
+            };
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [
+                        PropertiesTableComponent,
+                        KeysPipe,
+                        PropertiesOrderByPipe,
+                        SearchFilterPipe,
+                        ContentAfterLastDotPipe
+                    ],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: PropertiesService, useValue: propertiesServiceMock},
+                        {provide: ModalService, useValue: modalServiceMock}
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(PropertiesTableComponent);
+            });
+        }
+    );
+
+    it('When Properties assignment page is loaded, it is sorted by property name (acsending)', () => {
+        const fePropertiesMapValues = new SimpleChange('previousValue', 'currentValue', true);
+        const changes = {
+            fePropertiesMap: fePropertiesMapValues
+        };
+
+        // init values before ngOnChanges was called
+        fixture.componentInstance.sortBy = 'existingValue';
+
+        fixture.componentInstance.ngOnChanges(changes);
+
+        expect (fixture.componentInstance.reverse).toEqual(true);
+        // expect (fixture.componentInstance.direction).toEqual(1);
+        expect (fixture.componentInstance.direction).toEqual(fixture.componentInstance.ascUpperLettersFirst);
+        expect (fixture.componentInstance.sortBy).toEqual('name');
+        expect (fixture.componentInstance.path.length).toEqual(1);
+        expect (fixture.componentInstance.path[0]).toEqual('name');
+    });
+
+    it('When ngOnChanges is called without fePropertiesMap,' +
+        ' sortBy will remain as it was', () => {
+        const fePropertiesMapValues = new SimpleChange('previousValue', 'currentValue', true);
+        const changes = {
+            dummyKey: fePropertiesMapValues
+        };
+
+        // init values before ngOnChanges was called
+        fixture.componentInstance.sortBy = 'existingValue';
+        fixture.componentInstance.sort = jest.fn();
+
+        fixture.componentInstance.ngOnChanges(changes);
+
+        expect (fixture.componentInstance.sortBy).toEqual('existingValue');
+    });
+
+    it ('When sort is called init this.direction to 1', () => {
+        // init values
+        fixture.componentInstance.reverse = false;
+        fixture.componentInstance.direction = 0;
+        fixture.componentInstance.sortBy = 'initialize.Value';
+        fixture.componentInstance.path = [];
+
+        // call sore function
+        fixture.componentInstance.sort('initialize.Value');
+
+        // expect that
+        expect (fixture.componentInstance.reverse).toBe(true);
+        expect (fixture.componentInstance.direction).toBe(fixture.componentInstance.ascUpperLettersFirst);
+        expect (fixture.componentInstance.sortBy).toBe('initialize.Value');
+        expect (fixture.componentInstance.path.length).toBe(2);
+        expect (fixture.componentInstance.path[0]).toBe('initialize');
+        expect (fixture.componentInstance.path[1]).toBe('Value');
+    });
+
+    it ('When sort is called init this.direction to -1', () => {
+        // init values
+        fixture.componentInstance.reverse = true;
+        fixture.componentInstance.direction = 0;
+        fixture.componentInstance.sortBy = 'initialize.Value';
+        fixture.componentInstance.path = [];
+
+        // call sore function
+        fixture.componentInstance.sort('initialize.Value');
+
+        // expect that
+        expect (fixture.componentInstance.reverse).toBe(false);
+        expect (fixture.componentInstance.direction).toBe(fixture.componentInstance.descLowerLettersFirst);
+    });
+
+    it ('When onPropertyChanged is called, event is emitted' , () => {
+        spyOn(fixture.componentInstance.emitter, 'emit');
+        fixture.componentInstance.onPropertyChanged('testProperty');
+        expect(fixture.componentInstance.emitter.emit).toHaveBeenCalledWith('testProperty');
+    });
+
+    it ('When onClickPropertyRow is called, selectedPropertyId is updated and event is emitted.' , () => {
+        const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+        propertyFEModel.name = 'propertyName';
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName');
+
+        spyOn(fixture.componentInstance.selectPropertyRow, 'emit');
+        fixture.componentInstance.onClickPropertyRow(propertyFEModel, 'instanceName');
+
+        expect (fixture.componentInstance.selectedPropertyId).toBe('propertyName');
+        expect (fixture.componentInstance.selectPropertyRow.emit).toHaveBeenCalledWith(propertyRowSelectedEvent);
+    });
+
+    it ('When onClickPropertyInnerRow is called, event is emitted.' , () => {
+        const derivedFEProperty = new DerivedFEProperty(new PropertyBEModel());
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(derivedFEProperty, 'instanceName');
+        spyOn(fixture.componentInstance.selectPropertyRow, 'emit');
+        fixture.componentInstance.onClickPropertyInnerRow(derivedFEProperty, 'instanceName');
+
+        expect (fixture.componentInstance.selectPropertyRow.emit).toHaveBeenCalledWith(propertyRowSelectedEvent);
+    });
+
+    it ('When propertyChecked is called, propertiesService.undoDisableRelatedProperties is called and event is emitted.' , () => {
+
+        const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+        propertyFEModel.isSelected = false;
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName1');
+
+        spyOn(fixture.componentInstance.updateCheckedPropertyCount, 'emit');
+        fixture.componentInstance.propertyChecked(propertyFEModel);
+        expect (propertiesServiceMock.undoDisableRelatedProperties).toHaveBeenCalledWith(propertyFEModel, undefined);
+        expect (fixture.componentInstance.updateCheckedPropertyCount.emit).toHaveBeenCalledWith(false);
+    });
+
+    it ('When propertyChecked is called, propertiesService.disableRelatedProperties is called and event is emitted.' , () => {
+
+        const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+        propertyFEModel.isSelected = true;
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName1');
+
+        spyOn(fixture.componentInstance.updateCheckedPropertyCount, 'emit');
+        fixture.componentInstance.propertyChecked(propertyFEModel);
+        expect (propertiesServiceMock.disableRelatedProperties).toHaveBeenCalledWith(propertyFEModel, undefined);
+        expect (fixture.componentInstance.updateCheckedPropertyCount.emit).toHaveBeenCalledWith(true);
+    });
+
+});
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 0cc188134f..e499b3786b 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
@@ -8,9 +8,9 @@
  * 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.
@@ -19,33 +19,33 @@
  * ============LICENSE_END=========================================================
  */
 
-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";
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { DerivedFEProperty, InstanceFePropertiesMap, PropertyFEModel } from 'app/models';
+import { InstanceFeDetails } from '../../../../models/instance-fe-details';
+import { PropertiesService } from '../../../services/properties.service';
+import { ModalService } from '../../../services/modal.service';
 
 @Component({
     selector: 'properties-table',
     templateUrl: './properties-table.component.html',
     styleUrls: ['./properties-table.component.less']
 })
-export class PropertiesTableComponent {
+export class PropertiesTableComponent implements OnChanges {
 
     @Input() fePropertiesMap: InstanceFePropertiesMap;
     @Input() feInstanceNamesMap: Map<string, InstanceFeDetails>;
     @Input() selectedPropertyId: string;
-    @Input() propertyNameSearchText:string;
-    @Input() searchTerm:string;
-    @Input() readonly:boolean;
-    @Input() isLoading:boolean;
-    @Input() hasDeclareOption:boolean;
-    @Input() hidePropertyType:boolean;
+    @Input() propertyNameSearchText: string;
+    @Input() searchTerm: string;
+    @Input() readonly: boolean;
+    @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 and hasDeclareListOption
+    @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>(); // only for hasDeclareOption
     @Output() updateCheckedChildPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareListOption
     @Output() deleteProperty: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
     private selectedPropertyToDelete: PropertyFEModel;
@@ -53,41 +53,48 @@ export class PropertiesTableComponent {
     sortBy: String;
     reverse: boolean;
     direction: number;
-    path:string[];
+    path: string[];
 
-    sort(sortBy){
-        this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
-        this.direction = this.reverse ? 1 : -1;
-        this.sortBy = sortBy;
-        this.path = sortBy.split('.');
+    readonly ascUpperLettersFirst = 1;
+    readonly descLowerLettersFirst = -1;
+
+    constructor(private propertiesService: PropertiesService, private modalService: ModalService ) {
     }
 
-    constructor (private propertiesService:PropertiesService, private modalService: ModalService){
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.fePropertiesMap) {
+            this.sortBy = '';
+            this.sort('name');
+        }
     }
-    
-    ngOnInit() {
+
+    sort(sortBy) {
+        this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
+        this.direction = this.reverse ? this.ascUpperLettersFirst : this.descLowerLettersFirst;
+        this.sortBy = sortBy;
+        this.path = sortBy.split('.');
     }
 
     onPropertyChanged = (property) => {
         this.emitter.emit(property);
-    };
+    }
 
     // Click on main row (row of propertyFEModel)
-    onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => {
-        //event && event.stopPropagation();
+    onClickPropertyRow = (property: PropertyFEModel, instanceName: string, event?) => {
+        // event && event.stopPropagation();
         this.selectedPropertyId = property.name;
-        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
         this.selectPropertyRow.emit(propertyRowSelectedEvent);
-    };
+    }
 
     // Click on inner row (row of DerivedFEProperty)
-    onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => {
-        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+    onClickPropertyInnerRow = (property: DerivedFEProperty, instanceName: string) => {
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
         this.selectPropertyRow.emit(propertyRowSelectedEvent);
     }
 
     propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
-        let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
+        const isChecked: boolean = (!childPropName) ? prop.isSelected : prop.flattenedChildren.find((prop) => prop.propertiesName == childPropName).isSelected;
 
         if (!isChecked) {
             this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
@@ -116,11 +123,10 @@ export class PropertiesTableComponent {
 }
 
 export class PropertyRowSelectedEvent {
-    propertyModel:PropertyFEModel | DerivedFEProperty;
-    instanceName:string;
-    constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){
+    propertyModel: PropertyFEModel | DerivedFEProperty;
+    instanceName: string;
+    constructor( propertyModel: PropertyFEModel | DerivedFEProperty, instanceName: string ) {
         this.propertyModel = propertyModel;
         this.instanceName = instanceName;
     }
 }
-
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
index cb8c9a694b..4d968a088c 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
@@ -4,7 +4,6 @@ import {DynamicPropertyComponent} from "./dynamic-property/dynamic-property.comp
 import {FormsModule} from "@angular/forms";
 import {UiElementsModule} from "../../ui/ui-elements.module";
 import {CommonModule} from "@angular/common";
-import {HttpModule} from "@angular/http";
 import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe";
 import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
 import {PropertiesService} from "../../../services/properties.service";
@@ -13,7 +12,6 @@ import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multil
 @NgModule({
     imports: [
         FormsModule,
-        HttpModule,
         CommonModule,
         GlobalPipesModule,
         UiElementsModule,
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
index 2e3c21c210..d41b580514 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
@@ -9,6 +9,7 @@ import {ComponentInstanceServiceNg2} from "../../../services/component-instance-
 import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
 import {Requirement} from "../../../../models/requirement";
 import {Capability, RequirementCapabilityModel} from "../../../../models/capability";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
 
 const REQUIREMENT = 'Requirement';
 const CAPABILITY = 'Capability';
@@ -24,14 +25,9 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
 
     @Input() optionalRequirementsMap:Dictionary<Requirement[]>; //optional requirement map - key is type, value is array of requirements
     @Input() optionalCapabilitiesMap:Dictionary<Capability[]>; //optional capabilities map - key is type, value is array of capabilities
-
     @Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability )
-
-    @Input() currentComponent:ComponentModel;
     @Input() componentInstanceId:string;
-
     @Input() selectedReqOrCapModel:RequirementCapabilityModel;
-
     @Output() updateSelectedReqOrCap:EventEmitter<RequirementCapabilityModel> = new EventEmitter<RequirementCapabilityModel>();
 
     types:Array<string> = [];
@@ -51,7 +47,8 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
     private _loadingCapabilityProperties: Array<Capability>;
 
     constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2,
-                private propertiesUtils:PropertiesUtils) {
+                private propertiesUtils:PropertiesUtils,
+                private workspaceService: WorkspaceService) {
         this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)];
         this._loadingCapabilityProperties = [];
     }
@@ -171,14 +168,13 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
         }
     }
 
-
     private setCapabilityProperties = ():void => {
         let selectedCapability = <Capability>this.selectedReqOrCapModel;
         if (!selectedCapability.properties) {
             this.loadingCapabilityProperties = true;
             if (this._loadingCapabilityProperties.indexOf(selectedCapability) == -1) {
                 this._loadingCapabilityProperties.push(selectedCapability);
-                this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability)
+                this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentInstanceId, selectedCapability)
                     .subscribe((response: Array<PropertyModel>) => {
                         if (this.selectedReqOrCapModel === selectedCapability) {
                             delete this.loadingCapabilityProperties;
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
index 5830c06972..f4d673d695 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
@@ -50,7 +50,7 @@
     }
 
     .operation-name {
-      .s_1;
+      // .s_1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
index ebcf9eba22..08e6c36db1 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
@@ -14,34 +14,38 @@
  * permissions and limitations under the License.
  */
 
-import {Component, Input, ComponentRef} from '@angular/core';
-import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {ComponentInstanceServiceNg2} from 'app/ng2/services/component-instance-services/component-instance.service';
-import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
-import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+import { Component, ComponentRef, Input } from '@angular/core';
 import {
-    ModalModel,
     ButtonModel,
-    OperationModel,
-    Service,
-    ServiceInstanceObject,
-    PropertyFEModel,
-    PropertyBEModel,
+    CapabilitiesGroup,
+    Capability,
+    Component as TopologyTemplate,
     InputBEModel,
     InterfaceModel,
-    CapabilitiesGroup,
-    Capability
+    ModalModel,
+    OperationModel,
+    PropertyBEModel,
+    PropertyFEModel
 } from 'app/models';
-import {ServiceConsumptionCreatorComponent} from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component';
-
+import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
+import { ServiceConsumptionCreatorComponent } from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component';
+import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service';
+import { ComponentServiceNg2 } from 'app/ng2/services/component-services/component.service';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { Resource } from '../../../../models/components/resource';
+import { FullComponentInstance } from '../../../../models/componentsInstances/fullComponentInstance';
+import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
+import { ComponentFactory } from '../../../../utils/component-factory';
+import { ComponentType } from '../../../../utils/constants';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
 
 export class ConsumptionInput extends PropertyFEModel{
     inputId: string;
     type: string;
     source: string;
     value: any;
-    constraints: Array<any>;
+    constraints: any[];
 
     constructor(input?: any) {
         super(input);
@@ -49,19 +53,20 @@ export class ConsumptionInput extends PropertyFEModel{
             this.inputId = input.inputId;
             this.type = input.type;
             this.source = input.source;
-            this.value = input.value || "";
+            this.value = input.value || '';
             this.constraints = input.constraints;
         }
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class ConsumptionInputDetails extends ConsumptionInput {
     name: string;
     expanded: boolean;
     assignValueLabel: string;
-    associatedProps: Array<string>;
-    associatedInterfaces: Array<any>;
-    associatedCapabilities: Array<Capability>;
+    associatedProps: string[];
+    associatedInterfaces: any[];
+    associatedCapabilities: Capability[];
     origVal: string;
     isValid: boolean;
 
@@ -74,7 +79,7 @@ export class ConsumptionInputDetails extends ConsumptionInput {
             this.associatedProps = input.associatedProps;
             this.associatedInterfaces = input.associatedInterfaces;
             this.associatedCapabilities = input.associatedCapabilities;
-            this.origVal = input.value || "";
+            this.origVal = input.value || '';
             this.isValid = input.isValid;
         }
     }
@@ -84,9 +89,10 @@ export class ConsumptionInputDetails extends ConsumptionInput {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class ServiceOperation {
     operation: OperationModel;
-    consumptionInputs: Array<ConsumptionInputDetails>;
+    consumptionInputs: ConsumptionInputDetails[];
 
     constructor(input?: any) {
         if (input) {
@@ -96,24 +102,24 @@ export class ServiceOperation {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class InterfaceWithServiceOperation {
     interfaceId: string;
     displayName: string;
-    operationsList: Array<ServiceOperation>;
+    operationsList: ServiceOperation[];
     isExpanded: boolean;
 
     constructor(input?: InterfaceModel) {
         if (input) {
             this.interfaceId = input.uniqueId;
             this.displayName = input.displayType();
-            this.operationsList = _.map(input.operations, operation => new ServiceOperation({operation: operation}));
+            this.operationsList = _.map(input.operations, (operation) => new ServiceOperation({operation: operation}));
             this.isExpanded = true;
         }
     }
 }
 
-
-
+// tslint:disable-next-line:max-classes-per-file
 @Component({
     selector: 'service-consumption',
     templateUrl: './service-consumption.component.html',
@@ -125,21 +131,23 @@ export class ServiceConsumptionComponent {
 
     modalInstance: ComponentRef<ModalComponent>;
     isLoading: boolean = false;
-    interfacesList: Array<InterfaceWithServiceOperation>;
-    operationsGroup: Array<ServiceOperation>;
-    @Input() parentServiceInputs: Array<InputBEModel> = [];
-    @Input() parentService: Service;
-    @Input() selectedService: Service;
+    interfacesList: InterfaceWithServiceOperation[];
+    operationsGroup: ServiceOperation[];
+    @Input() parentServiceInputs: InputBEModel[] = [];
+    @Input() parentService: ComponentMetadata;
+    @Input() selectedService: TopologyTemplate | FullComponentInstance;
     @Input() selectedServiceInstanceId: string;
-    @Input() instancesMappedList: Array<ServiceInstanceObject>;
-    @Input() instancesCapabilitiesMap: Map<string, Array<Capability>>;
+    @Input() instancesMappedList: ServiceInstanceObject[];
+    @Input() instancesCapabilitiesMap: Map<string, Capability[]>;
     @Input() readonly: boolean;
 
-    selectedInstanceSiblings: Array<ServiceInstanceObject>;
-    selectedInstancePropertiesList: Array<PropertyBEModel> = [];
-    selectedInstanceCapabilitisList: Array<Capability> = [];
+    selectedInstanceSiblings: ServiceInstanceObject[];
+    selectedInstancePropertiesList: PropertyBEModel[] = [];
+    selectedInstanceCapabilitisList: Capability[] = [];
 
-    constructor(private ModalServiceNg2: ModalService, private serviceServiceNg2: ServiceServiceNg2, private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2:ComponentInstanceServiceNg2) {}
+    constructor(private modalServiceNg2: ModalService, private topologyTemplateService: TopologyTemplateService,
+                private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2: ComponentInstanceServiceNg2,
+                private componentFactory: ComponentFactory) {}
 
     ngOnInit() {
         this.updateSelectedInstancePropertiesAndSiblings();
@@ -147,15 +155,15 @@ export class ServiceConsumptionComponent {
     }
 
     ngOnChanges(changes) {
-        if(changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) {
+        if (changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) {
             this.selectedServiceInstanceId = changes.selectedServiceInstanceId.currentValue;
-            if(changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) {
+            if (changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) {
                 this.selectedService = changes.selectedService.currentValue;
             }
             this.updateSelectedInstancePropertiesAndSiblings();
             this.updateSelectedServiceCapabilities();
         }
-        if(changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) {
+        if (changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) {
             this.updateSelectedInstancePropertiesAndSiblings();
             this.updateSelectedServiceCapabilities();
         }
@@ -163,22 +171,22 @@ export class ServiceConsumptionComponent {
 
     updateSelectedInstancePropertiesAndSiblings() {
         this.interfacesList = [];
-        let selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, coInstance => coInstance.id === this.selectedServiceInstanceId);
+        const selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, (coInstance) => coInstance.id === this.selectedServiceInstanceId);
         if (selectedInstanceMetadata) {
-            _.forEach(selectedInstanceMetadata.interfaces, (interfaceData:InterfaceModel) => {
+            _.forEach(selectedInstanceMetadata.interfaces, (interfaceData: InterfaceModel) => {
                 this.interfacesList.push(new InterfaceWithServiceOperation(interfaceData));
             });
         }
-        this.interfacesList.sort((interf1:InterfaceWithServiceOperation, interf2:InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName));
+        this.interfacesList.sort((interf1: InterfaceWithServiceOperation, interf2: InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName));
 
         this.selectedInstancePropertiesList = selectedInstanceMetadata && selectedInstanceMetadata.properties;
-        this.selectedInstanceSiblings = _.filter(this.instancesMappedList, coInstance => coInstance.id !== this.selectedServiceInstanceId);
+        this.selectedInstanceSiblings = _.filter(this.instancesMappedList, (coInstance) => coInstance.id !== this.selectedServiceInstanceId);
     }
 
     updateSelectedServiceCapabilities() {
         this.selectedInstanceCapabilitisList = _.filter(
             CapabilitiesGroup.getFlattenedCapabilities(this.selectedService.capabilities),
-            cap => cap.properties && cap.ownerId === this.selectedService.uniqueId
+            (cap) => cap.properties && cap.ownerId === this.selectedService.uniqueId
         );
     }
 
@@ -186,15 +194,15 @@ export class ServiceConsumptionComponent {
         currInterface.isExpanded = !currInterface.isExpanded;
     }
 
-    onSelectOperation(event, currInterface:InterfaceWithServiceOperation, opIndex: number) {
+    onSelectOperation(event, currInterface: InterfaceWithServiceOperation, opIndex: number) {
         event.stopPropagation();
-        if(!this.readonly) {
+        if (!this.readonly) {
             this.operationsGroup = currInterface.operationsList;
-            let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
-            let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled);
-            let modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard');
-            this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-            this.ModalServiceNg2.addDynamicContentToModal(
+            const cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.modalServiceNg2.closeCurrentModal);
+            const saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled);
+            const modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard');
+            this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+            this.modalServiceNg2.addDynamicContentToModal(
                 this.modalInstance,
                 ServiceConsumptionCreatorComponent,
                 {
@@ -215,11 +223,11 @@ export class ServiceConsumptionComponent {
         }
     }
 
-    createOrUpdateOperationInput  = ():void => {
+    createOrUpdateOperationInput  = (): void => {
         this.isLoading = true;
-        let consumptionInputsList:Array<{[id: string]: Array<ConsumptionInput>}> = _.map(this.operationsGroup, (serviceOp) => {
-            let consumptionInputsArr: Array<any> = [];
-            if(serviceOp.consumptionInputs) {
+        const consumptionInputsList: Array<{[id: string]: ConsumptionInput[]}> = _.map(this.operationsGroup, (serviceOp) => {
+            let consumptionInputsArr: any[] = [];
+            if (serviceOp.consumptionInputs) {
                 consumptionInputsArr = _.map(serviceOp.consumptionInputs, (input: ConsumptionInputDetails) => {
                     return {
                         inputId: input.inputId,
@@ -233,16 +241,24 @@ export class ServiceConsumptionComponent {
                 [serviceOp.operation.uniqueId]: consumptionInputsArr
             };
         });
-        this.serviceServiceNg2.createOrUpdateServiceConsumptionInputs(this.parentService,this.selectedServiceInstanceId, consumptionInputsList).subscribe(() => {
+        this.topologyTemplateService.createOrUpdateServiceConsumptionInputs(this.convertMetaDataToComponent(this.parentService).uniqueId, this.selectedServiceInstanceId, consumptionInputsList)
+            .subscribe(() => {
             this.isLoading = false;
-        }, err=> {
+        }, (err) => {
             this.isLoading = false;
         });
-        this.ModalServiceNg2.closeCurrentModal();
-    };
+        this.modalServiceNg2.closeCurrentModal();
+    }
 
-    getDisabled = ():boolean =>  {
+    getDisabled = (): boolean =>  {
         return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
-    };
+    }
+
+     //TODO remove when workspace page convert to angular5
+     convertMetaDataToComponent(componentMetadata: ComponentMetadata) {
+        const newResource: Resource = this.componentFactory.createEmptyComponent(ComponentType.RESOURCE) as Resource;
+        newResource.setComponentMetadata(componentMetadata);
+        return newResource;
+    }
 
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
index 8593bef3eb..70b5911779 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
@@ -14,11 +14,11 @@
  * permissions and limitations under the License.
  */
 
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServiceConsumptionComponent} from "./service-consumption.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { ServiceConsumptionComponent } from './service-consumption.component';
 
 @NgModule({
     declarations: [
@@ -29,11 +29,13 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
         UiElementsModule,
         TranslateModule
     ],
-    exports: [],
+    exports: [
+        ServiceConsumptionComponent
+    ],
     entryComponents: [
         ServiceConsumptionComponent
     ],
     providers: []
 })
 export class ServiceConsumptionModule {
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
index ae990dc85f..2fccfb414b 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
@@ -38,7 +38,7 @@
       justify-content: space-between;
 
       .rule-details {
-        .s_1;
+        // .s_1;
         display: flex;
         flex: 1;
         align-items: center;
@@ -67,4 +67,13 @@
 
     }
   }
+  .w-sdc-designer-sidebar-section-footer {
+    margin-top: 10px;
+    text-align: center;
+    width: 100%;
+  }
+  .w-sdc-designer-sidebar-section-footer-action {
+    width: 180px;
+    margin-top: 10px;
+  }
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
index bc3531dc58..fa75a275aa 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
@@ -13,22 +13,22 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {Component, Input, Output, EventEmitter, ComponentRef} from '@angular/core';
-import {ModalService} from 'app/ng2/services/modal.service';
+import { Component, ComponentRef, EventEmitter, Input, Output } from '@angular/core';
 import {
-    Service,
+    ButtonModel,
     ComponentInstance,
+    InputBEModel,
     ModalModel,
-    ButtonModel,
     PropertyBEModel,
-    InputBEModel,
-    ServiceInstanceObject
 } from 'app/models';
-import {ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {TranslateService} from 'app/ng2/shared/translator/translate.service';
-import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
+import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
+import { ServiceDependenciesEditorComponent } from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response';
+import { TranslateService } from 'app/ng2/shared/translator/translate.service';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
 
 export class ConstraintObject {
     servicePropertyName: string;
@@ -48,12 +48,13 @@ export class ConstraintObject {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class ConstraintObjectUI extends ConstraintObject{
     isValidValue: boolean;
 
     constructor(input?: any) {
         super(input);
-        if(input) {
+        if (input) {
             this.isValidValue = input.isValidValue ? input.isValidValue : input.value !== '';
         }
     }
@@ -63,7 +64,7 @@ export class ConstraintObjectUI extends ConstraintObject{
     }
 
     public isValidRule(isStatic) {
-        let isValidValue = isStatic ? this.isValidValue : true;
+        const isValidValue = isStatic ? this.isValidValue : true;
         return this.servicePropertyName != null && this.servicePropertyName !== ''
             && this.value != null && this.value !== '' && isValidValue;
     }
@@ -75,6 +76,7 @@ export const OPERATOR_TYPES = {
     LESS_THAN: 'less_than'
 };
 
+// tslint:disable-next-line:max-classes-per-file
 class I18nTexts {
     static uncheckModalTitle: string;
     static uncheckModalText: string;
@@ -89,21 +91,21 @@ class I18nTexts {
     static deleteRuleMsg: string;
 
     public static translateTexts(translateService) {
-            I18nTexts.uncheckModalTitle = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TITLE");
-            I18nTexts.uncheckModalText = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TEXT");
-            I18nTexts.modalApprove = translateService.translate("MODAL_APPROVE");
-            I18nTexts.modalCancel = translateService.translate("MODAL_CANCEL");
-            I18nTexts.modalCreate = translateService.translate("MODAL_CREATE");
-            I18nTexts.modalSave = translateService.translate("MODAL_SAVE");
-            I18nTexts.modalDelete = translateService.translate("MODAL_DELETE");
-            I18nTexts.addRuleTxt = translateService.translate("SERVICE_DEPENDENCY_ADD_RULE");
-            I18nTexts.updateRuleTxt = translateService.translate("SERVICE_DEPENDENCY_UPDATE_RULE");
-            I18nTexts.deleteRuleTxt = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE");
-            I18nTexts.deleteRuleMsg = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE_MSG");
+            I18nTexts.uncheckModalTitle = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TITLE');
+            I18nTexts.uncheckModalText = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TEXT');
+            I18nTexts.modalApprove = translateService.translate('MODAL_APPROVE');
+            I18nTexts.modalCancel = translateService.translate('MODAL_CANCEL');
+            I18nTexts.modalCreate = translateService.translate('MODAL_CREATE');
+            I18nTexts.modalSave = translateService.translate('MODAL_SAVE');
+            I18nTexts.modalDelete = translateService.translate('MODAL_DELETE');
+            I18nTexts.addRuleTxt = translateService.translate('SERVICE_DEPENDENCY_ADD_RULE');
+            I18nTexts.updateRuleTxt = translateService.translate('SERVICE_DEPENDENCY_UPDATE_RULE');
+            I18nTexts.deleteRuleTxt = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE');
+            I18nTexts.deleteRuleMsg = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE_MSG');
     }
 }
 
-
+// tslint:disable-next-line:max-classes-per-file
 @Component({
     selector: 'service-dependencies',
     templateUrl: './service-dependencies.component.html',
@@ -115,56 +117,55 @@ export class ServiceDependenciesComponent {
     modalInstance: ComponentRef<ModalComponent>;
     isDependent: boolean;
     isLoading: boolean;
-    parentServiceInputs: Array<InputBEModel> = [];
-    rulesList: Array<ConstraintObject> = [];
-    operatorTypes: Array<any>;
+    parentServiceInputs: InputBEModel[] = [];
+    rulesList: ConstraintObject[] = [];
+    operatorTypes: any[];
 
     @Input() readonly: boolean;
-    @Input() compositeService: Service;
+    @Input() compositeService: ComponentMetadata;
     @Input() currentServiceInstance: ComponentInstance;
-    @Input() selectedInstanceSiblings: Array<ServiceInstanceObject>;
-    @Input() selectedInstanceConstraints: Array<ConstraintObject> = [];
-    @Input() selectedInstanceProperties: Array<PropertyBEModel> = [];
-    @Output() updateRulesListEvent:EventEmitter<Array<ConstraintObject>> = new EventEmitter<Array<ConstraintObject>>();
+    @Input() selectedInstanceSiblings: ServiceInstanceObject[];
+    @Input() selectedInstanceConstraints: ConstraintObject[] = [];
+    @Input() selectedInstanceProperties: PropertyBEModel[] = [];
+    @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
     @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter();
     @Output() dependencyStatus = new EventEmitter<boolean>();
 
-
-    constructor(private componentServiceNg2: ComponentServiceNg2, private ModalServiceNg2: ModalService, private translateService: TranslateService) {
+    constructor(private topologyTemplateService: TopologyTemplateService, private modalServiceNg2: ModalService, private translateService: TranslateService) {
     }
 
     ngOnInit() {
         this.isLoading = false;
         this.operatorTypes = [
-            {label: ">", value: OPERATOR_TYPES.GREATER_THAN},
-            {label: "<", value: OPERATOR_TYPES.LESS_THAN},
-            {label: "=", value: OPERATOR_TYPES.EQUAL}
+            {label: '>', value: OPERATOR_TYPES.GREATER_THAN},
+            {label: '<', value: OPERATOR_TYPES.LESS_THAN},
+            {label: '=', value: OPERATOR_TYPES.EQUAL}
         ];
-        this.componentServiceNg2.getComponentInputsWithProperties(this.compositeService).subscribe((result: ComponentGenericResponse) => {
+        this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((result: ComponentGenericResponse) => {
             this.parentServiceInputs = result.inputs;
         });
         this.loadRules();
-        this.translateService.languageChangedObservable.subscribe(lang => {
+        this.translateService.languageChangedObservable.subscribe((lang) => {
             I18nTexts.translateTexts(this.translateService);
         });
     }
 
     ngOnChanges(changes) {
-        if(changes.currentServiceInstance) {
+        if (changes.currentServiceInstance) {
             this.currentServiceInstance = changes.currentServiceInstance.currentValue;
             this.isDependent = this.currentServiceInstance.isDependent();
         }
-        if(changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) {
+        if (changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) {
             this.selectedInstanceConstraints = changes.selectedInstanceConstraints.currentValue;
             this.loadRules();
         }
     }
 
     public openRemoveDependencyModal = (): ComponentRef<ModalComponent> => {
-        let actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency);
-        let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
-        let modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]);
-        return this.ModalServiceNg2.createCustomModal(modalModel);
+        const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency);
+        const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
+        const modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]);
+        return this.modalServiceNg2.createCustomModal(modalModel);
     }
 
     loadRules() {
@@ -178,60 +179,59 @@ export class ServiceDependenciesComponent {
     }
 
     onUncheckDependency = () => {
-        this.ModalServiceNg2.closeCurrentModal();
+        this.modalServiceNg2.closeCurrentModal();
         this.isLoading = true;
-        let isDepOrig = this.isDependent;
-        let rulesListOrig = this.rulesList;
+        const isDepOrig = this.isDependent;
+        const rulesListOrig = this.rulesList;
         this.currentServiceInstance.unmarkAsDependent();
         this.updateComponentInstance(isDepOrig, rulesListOrig);
     }
 
     onCloseRemoveDependencyModal = () => {
         this.isDependent = true;
-        this.ModalServiceNg2.closeCurrentModal();
+        this.modalServiceNg2.closeCurrentModal();
     }
 
     onCheckDependency = () => {
-        let isDepOrig = this.isDependent;
-        let rulesListOrig = this.rulesList;
+        const isDepOrig = this.isDependent;
+        const rulesListOrig = this.rulesList;
         this.currentServiceInstance.markAsDependent();
         this.rulesList = [];
         this.updateComponentInstance(isDepOrig, rulesListOrig);
     }
 
     onMarkAsDependent() {
-        if(!this.currentServiceInstance.isDependent()) {
+        if (!this.currentServiceInstance.isDependent()) {
             this.onCheckDependency();
-        }
-        else {
+        } else {
             this.openRemoveDependencyModal().instance.open();
         }
     }
 
-    updateComponentInstance(isDependent_origVal : boolean, rulesList_orig: Array<ConstraintObject>) {
+    updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) {
         this.isLoading = true;
-        this.componentServiceNg2.updateComponentInstance(this.compositeService, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => {
+        this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => {
             this.currentServiceInstance = new ComponentInstance(updatedServiceIns);
             this.isDependent = this.currentServiceInstance.isDependent();
             this.dependencyStatus.emit(this.isDependent);
-            if(this.isDependent) {
+            if (this.isDependent) {
                 this.loadRulesListEvent.emit();
             }
             this.isLoading = false;
-        }, err=> {
-            this.isDependent = isDependent_origVal;
-            this.rulesList = rulesList_orig;
+        }, (err) => {
+            this.isDependent = isDependentOrigVal;
+            this.rulesList = rulesListOrig;
             this.isLoading = false;
             console.log('An error has occurred.');
         });
     }
 
-    onAddRule () {
-        let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal);
-        let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled);
-        let modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard');
-        this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-        this.ModalServiceNg2.addDynamicContentToModal(
+    onAddRule() {
+        const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
+        const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled);
+        const modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard');
+        this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+        this.modalServiceNg2.addDynamicContentToModal(
             this.modalInstance,
             ServiceDependenciesEditorComponent,
             {
@@ -247,16 +247,16 @@ export class ServiceDependenciesComponent {
     }
 
     onSelectRule(index: number) {
-        let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal);
-        let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled);
-        let modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard');
-        this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-        this.ModalServiceNg2.addDynamicContentToModal(
+        const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
+        const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled);
+        const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard');
+        this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+        this.modalServiceNg2.addDynamicContentToModal(
             this.modalInstance,
             ServiceDependenciesEditorComponent,
             {
                 serviceRuleIndex: index,
-                serviceRules: _.map(this.rulesList, rule => new ConstraintObjectUI(rule)),
+                serviceRules: _.map(this.rulesList, (rule) => new ConstraintObjectUI(rule)),
                 currentServiceName: this.currentServiceInstance.name,
                 operatorTypes: this.operatorTypes,
                 compositeServiceName: this.compositeService.name,
@@ -268,40 +268,40 @@ export class ServiceDependenciesComponent {
         this.modalInstance.instance.open();
     }
 
-    getDisabled = ():boolean =>  {
+    getDisabled = (): boolean =>  {
         return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
-    };
+    }
 
-    createRule  = ():void => {
-        let newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
+    createRule  = (): void => {
+        const newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
         this.isLoading = true;
-        this.componentServiceNg2.createServiceFilterConstraints(
-            this.compositeService,
-            this.currentServiceInstance,
+        this.topologyTemplateService.createServiceFilterConstraints(
+            this.compositeService.uniqueId,
+            this.currentServiceInstance.uniqueId,
             newRuleToCreate
         ).subscribe( (response) => {
             this.updateRulesListEvent.emit(response.properties);
             this.isLoading = false;
-        }, err=> {
+        }, (err) => {
             this.isLoading = false;
         });
-        this.ModalServiceNg2.closeCurrentModal();
-    };
+        this.modalServiceNg2.closeCurrentModal();
+    }
 
-    updateRules = ():void => {
-        let allRulesToUpdate: Array<ConstraintObject> = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map(rule => new ConstraintObject(rule));
+    updateRules = (): void => {
+        const allRulesToUpdate: ConstraintObject[] = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule));
         this.isLoading = true;
-        this.componentServiceNg2.updateServiceFilterConstraints(
-            this.compositeService,
-            this.currentServiceInstance,
+        this.topologyTemplateService.updateServiceFilterConstraints(
+            this.compositeService.uniqueId,
+            this.currentServiceInstance.uniqueId,
             allRulesToUpdate
         ).subscribe((response) => {
             this.updateRulesListEvent.emit(response.properties);
             this.isLoading = false;
-        }, err => {
+        }, (err) => {
             this.isLoading = false;
         });
-        this.ModalServiceNg2.closeCurrentModal();
+        this.modalServiceNg2.closeCurrentModal();
     }
 
     getSymbol(constraintOperator) {
@@ -312,23 +312,23 @@ export class ServiceDependenciesComponent {
         }
     }
 
-    onDeleteRule = (index:number) => {
+    onDeleteRule = (index: number) => {
         this.isLoading = true;
-        this.componentServiceNg2.deleteServiceFilterConstraints(
-            this.compositeService,
-            this.currentServiceInstance,
+        this.topologyTemplateService.deleteServiceFilterConstraints(
+            this.compositeService.uniqueId,
+            this.currentServiceInstance.uniqueId,
             index
         ).subscribe( (response) => {
             this.updateRulesListEvent.emit(response.properties);
             this.isLoading = false;
-        }, err=> {
+        }, (err) => {
             this.isLoading = false;
         });
-        this.ModalServiceNg2.closeCurrentModal();
-    };
+        this.modalServiceNg2.closeCurrentModal();
+    }
 
-    openDeleteModal = (index:number) => {
-        this.ModalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg,
+    openDeleteModal = (index: number) => {
+        this.modalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg,
             I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open();
     }
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
index 7e66ed99c7..5e2d03d26c 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
@@ -1,9 +1,9 @@
 
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServiceDependenciesComponent} from "./service-dependencies.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { ServiceDependenciesComponent } from './service-dependencies.component';
 
 @NgModule({
     declarations: [
@@ -14,11 +14,13 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
         UiElementsModule,
         TranslateModule
     ],
-    exports: [],
+    exports: [
+        ServiceDependenciesComponent
+    ],
     entryComponents: [
         ServiceDependenciesComponent
     ],
     providers: []
 })
 export class ServiceDependenciesModule {
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html
deleted file mode 100644
index e1a4f68a9b..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ 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.
-  -->
-  
-<div class="service-path-selector">
-	<label>Service Flows:</label>
-	<ui-element-dropdown
-		class="path-dropdown"
-		data-tests-id="service-path-selector"
-		[readonly]="dropdownOptions.length < 3"
-		[(value)]="selectedPathId"
-		[values]="dropdownOptions"
-		(valueChange)="onSelectPath()">
-	</ui-element-dropdown>
-</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less
deleted file mode 100644
index f3cb4a3c34..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less
+++ /dev/null
@@ -1,24 +0,0 @@
-@import './../../../../../assets/styles/variables.less';
-.service-path-selector {
-	margin: 10px 35px 10px 0;
-	display: flex;
-	font-size: 12px;
-
-	/deep/ .path-dropdown {
-		width: 150px;
-		select {
-			font-size: 14px;
-			font-family: @font-opensans-regular;
-			padding: 4px 10px;
-		}
-	}
-
-	label {
-		margin-right: 10px;
-		align-self: center;
-		font-size: 14px;
-		font-family: @font-opensans-regular;
-		font-weight: normal;
-		margin-bottom: initial;
-	}
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts
deleted file mode 100644
index e09001fc6c..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import {Component, Input, KeyValueDiffer, IterableDiffers, KeyValueDiffers, DoCheck} from '@angular/core';
-import {Service} from "app/models/components/service";
-import {TranslateService} from "app/ng2/shared/translator/translate.service";
-import {ForwardingPath} from "app/models/forwarding-path";
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-
-@Component({
-	selector: 'service-path-selector',
-	templateUrl: './service-path-selector.component.html',
-	styleUrls:['service-path-selector.component.less'],
-	providers: [TranslateService]
-})
-
-export class ServicePathSelectorComponent implements DoCheck {
-
-	defaultSelectedId: string;
-	hideAllValue: string;
-	hideAllId: string = '0';
-	showAllValue: string;
-	showAllId: string = '1';
-
-	paths: Array<ForwardingPath> = [];
-	dropdownOptions: Array<DropdownValue>;
-	differ: KeyValueDiffer;
-
-	@Input() service: Service;
-	@Input() drawPath: Function;
-	@Input() deletePaths: Function;
-	@Input() selectedPathId: string;
-
-	constructor(private differs: KeyValueDiffers, private translateService: TranslateService) {
-
-		this.defaultSelectedId = this.hideAllId;
-		this.convertPathsToDropdownOptions();
-
-		this.translateService.languageChangedObservable.subscribe(lang => {
-			this.hideAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE");
-			this.showAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE");
-			this.convertPathsToDropdownOptions();
-		});
-
-	}
-
-	ngOnInit(): void {
-
-		this.selectedPathId = this.defaultSelectedId;
-		this.differ = this.differs.find(this.service.forwardingPaths).create(null);
-
-	}
-
-	ngDoCheck(): void {
-
-		const pathsChanged = this.differ.diff(this.service.forwardingPaths);
-
-		if (pathsChanged) {
-			let oldPaths = _.cloneDeep(this.paths);
-			this.populatePathsFromService();
-
-			if (!(_.isEqual(oldPaths, this.paths))) {
-				this.convertPathsToDropdownOptions();
-
-				let temp = this.selectedPathId;
-				this.selectedPathId = '-1';
-
-				setTimeout(() => {
-					this.selectedPathId = temp;
-					this.onSelectPath();
-				}, 0);
-			}
-		}
-
-	}
-
-	populatePathsFromService(): void {
-
-		this.paths = [];
-		let {forwardingPaths} = this.service;
-
-		_.forEach(forwardingPaths, path => {
-			this.paths.push(path);
-		});
-		this.paths.sort((a:ForwardingPath, b:ForwardingPath)=> {
-			return a.name.localeCompare(b.name);
-		});
-
-	}
-
-	convertPathsToDropdownOptions(): void {
-
-		let result = [
-			new DropdownValue(this.hideAllId, this.hideAllValue),
-			new DropdownValue(this.showAllId, this.showAllValue)
-		];
-
-		_.forEach(this.paths, (value: ForwardingPath) => {
-			result[result.length] = new DropdownValue(value.uniqueId, value.name);
-		});
-
-		this.dropdownOptions = result;
-
-	}
-
-	onSelectPath = (): void => {
-
-		if (this.selectedPathId !== '-1') {
-			this.deletePaths();
-
-			switch (this.selectedPathId) {
-				case this.hideAllId:
-					break;
-
-				case this.showAllId:
-					_.forEach(this.paths, path =>
-						this.drawPath(path)
-					);
-					break;
-
-				default:
-					let path = this.paths.find(path =>
-						path.uniqueId === this.selectedPathId
-					);
-					if (!path) {
-						this.selectedPathId = this.defaultSelectedId;
-						this.onSelectPath(); // currently does nothing in default case, but if one day it does, we want the selection to behave accordingly.
-						break;
-					}
-					this.drawPath(path);
-					break;
-			}
-		}
-
-	}
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts
deleted file mode 100644
index c07061ce9a..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServicePathSelectorComponent} from "./service-path-selector.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-
-@NgModule({
-    declarations: [
-        ServicePathSelectorComponent
-    ],
-    imports: [
-    	CommonModule,
-    	UiElementsModule
-    ],
-    exports: [],
-    entryComponents: [
-        ServicePathSelectorComponent
-    ],
-    providers: []
-})
-export class ServicePathSelectorModule {
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html
deleted file mode 100644
index 2a6a72ab7a..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ 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.
-  -->
-  
-<div class='service-path'>
-	<button class='zoom-icons create-path-button' data-tests-id="pathsMenuBtn" (click)="showServicePathMenu = !showServicePathMenu">...</button>
-	<div class="service-path-menu" *ngIf="showServicePathMenu">
-		<div >
-			<ul>
-				<li *ngIf='!isViewOnly'><div class="hand" (click)="onCreateServicePath()" data-tests-id="createPathMenuItem">
-					Create Service Flow
-				</div></li>
-				<li><div class="hand" (click)="onListServicePath()" data-tests-id="pathsListMenuItem">
-					Service Flows List
-				</div></li>
-			</ul>
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less
deleted file mode 100644
index 777b206714..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less
+++ /dev/null
@@ -1,51 +0,0 @@
-//@import 'src/assets/styles/variables.less';
-@import './../../../../../assets/styles/variables.less';
-.service-path {
-	position: relative;
-	.create-path-button{
-		&:extend(.search-bar-button);
-		width: 30px;
-		height: 30px;
-		&:hover {
-			color: @main_color_a;
-		}
-		&:active {
-			background: @main_color_a;
-			color: @main_color_p;
-		}
-		&:focus {
-			outline: none;
-		}
-	}
-	.service-path-menu {
-		border: 1px solid @main_color_o;
-		border-radius: 0 0 2px 2px;
-		border-top-color: @main_color_a;
-		border-top-width: 3px;
-
-		box-sizing: border-box;
-		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
-
-		background-color: @main_color_p;
-
-		padding: 5px 0;
-		right: 34px;
-		position: absolute;
-		top: 10px;
-		width: 150px;
-		font-size: 13px;
-		font-family: @font-opensans-regular;
-
-		li {
-			color: @main_color_m;
-			padding: 0 10px;
-			line-height: 20px;
-			&:hover {
-				cursor: pointer;
-				color: @main_color_a;
-				background-color: fade(@main_color_a, 5%);
-			}
-		}
-
-	}
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts
deleted file mode 100644
index d66c5f0132..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import {Component, Input, ComponentRef} from '@angular/core';
-import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalModel, ButtonModel} from 'app/models';
-import {ServicePathCreatorComponent} from 'app/ng2/pages/service-path-creator/service-path-creator.component';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import ServicePathsListComponent from "app/ng2/pages/service-paths-list/service-paths-list.component";
-import {Service} from "app/models/components/service";
-
-@Component({
-    selector: 'service-path',
-    templateUrl: './service-path.component.html',
-    styleUrls: ['service-path.component.less'],
-    providers: [ModalService]
-})
-
-export class ServicePathComponent {
-	showServicePathMenu: boolean = false;
-	modalInstance: ComponentRef<ModalComponent>;
-	@Input() service: Service;
-	@Input() onCreate: Function;
-	@Input() onSave: Function;
-	@Input() isViewOnly:boolean;
-
-	constructor(private ModalServiceNg2: ModalService) {}
-
-	onCreateServicePath = ():void => {
-		this.showServicePathMenu = false;
-		let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
-		let saveButton: ButtonModel = new ButtonModel('Create', 'blue', this.createPath, this.getDisabled );
-		let modalModel: ModalModel = new ModalModel('l', 'Create Service Flow', '', [saveButton, cancelButton], 'standard', true);
-		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service});
-		this.modalInstance.instance.open();
-	};
-
-	onListServicePath = ():void => {
-		this.showServicePathMenu = false;
-		let cancelButton: ButtonModel = new ButtonModel('Close', 'outline white', this.ModalServiceNg2.closeCurrentModal);
-		let modalModel: ModalModel = new ModalModel('md', 'Service Flows List','', [cancelButton], 'standard', true);
-		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathsListComponent, {service: this.service,
-			onCreateServicePath: this.onCreateServicePath, onEditServicePath: this.onEditServicePath, isViewOnly: this.isViewOnly});
-		this.modalInstance.instance.open();
-	};
-
-	createPath  = ():void => {
-		this.onCreate(this.modalInstance.instance.dynamicContent.instance.createServicePathData());
-		this.ModalServiceNg2.closeCurrentModal();
-	};
-
-	onEditServicePath = (id:string):void =>   {
-		let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
-		let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createPath, this.getDisabled );
-		let modalModel: ModalModel = new ModalModel('l', 'Edit Path', '', [saveButton, cancelButton], 'standard', true);
-		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service, pathId: id});
-		this.modalInstance.instance.open();
-	};
-
-	getDisabled = ():boolean =>  {
-		return this.isViewOnly || !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
-	};
-}
-
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts
deleted file mode 100644
index 96af247086..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServicePathComponent} from "./service-path.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-
-@NgModule({
-    declarations: [
-        ServicePathComponent
-    ],
-    imports: [CommonModule,
-        UiElementsModule],
-    exports: [],
-    entryComponents: [
-        ServicePathComponent
-    ],
-    providers: []
-})
-export class ServicePathModule {
-}
\ No newline at end of file