Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>

27 files changed, 472 insertions, 894 deletions

diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts
index 1c5c333d27..14cafa98c4 100644
--- a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts
@@ -28,7 +28,7 @@
  * Created by obarda on 1/8/2017.
  */
 'use strict';
-import {RequirementsGroup, Component} from "app/models";
+import {RequirementsGroup, Component, Relationship, RelationshipModel} from "app/models";
 
 export interface IRequirementsListScope extends ng.IScope {
 
@@ -62,12 +62,11 @@ export class RequirementsListDirective implements ng.IDirective {
 
         scope.getRelation = (requirement:any):any => {
             if (scope.isInstanceSelected() && scope.component.componentInstancesRelations) {
-                let relationItem = _.filter(scope.component.componentInstancesRelations, (relation:any) => {
+                let relationItem:Array<RelationshipModel> = _.filter((<Component>scope.component).componentInstancesRelations, (relation:RelationshipModel) => {
                     return relation.fromNode === scope.component.selectedInstance.uniqueId &&
-                        _.some(relation.relationships, {
-                            'requirement': requirement.name,
-                            'requirementOwnerId': requirement.ownerId
-                        });
+                        _.filter(relation.relationships, (relationship:Relationship) => {
+                            return relationship.relation.requirement == requirement.name && relationship.relation.requirementOwnerId == requirement.ownerId;
+                        }).length;
                 });
 
                 if (relationItem && relationItem.length) {
diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html
deleted file mode 100644
index a50731443d..0000000000
--- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="footer-wrapper">
-    <div class="divider-footer-bottom">
-        <div class="footer-copyright-text">
-            <p>
-            </p>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less
deleted file mode 100644
index 4c54a11fec..0000000000
--- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less
+++ /dev/null
@@ -1,47 +0,0 @@
-
-.footer-wrapper {
-    position: fixed;
-    bottom: 0px;
-    left: 0px;
-    width: 100%;
-    background-color: #222222;
-    color: #ffffff;
-    font-family: "Arial";
-    font-size: 11px;
-    height: @footer_height;
-}
-
-.footer-wrapper a {
-    color: #ffffff;
-    margin: 0;
-    padding: 0;
-    text-decoration: underline;
-}
-
-.divider-footer-bottom {
-    margin: 0 auto;
-    width: 1020px;
-}
-
-.footer-copyright-text {
-    display: inline-block;
-    width:612px;
-    margin-top: 18px;
-    margin-left: 50px;
-    text-align: left;
-    vertical-align: top;
-}
-
-.footer-logo1 {
-    display: inline-block;
-    margin-top: 20px;
-    margin-left: 124px;
-}
-
-.footer-logo2 {
-    margin-top: 22px;
-    margin-left: 9px;
-    display: inline-block;
-    font-size: 24px;
-    vertical-align: top;
-}
diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts
deleted file mode 100644
index 7796f60d70..0000000000
--- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts
+++ /dev/null
@@ -1,53 +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=========================================================
- */
-
-'use strict';
-import {IAppConfigurtaion} from "app/models";
-
-export interface IEcompFooterDirectiveScope extends ng.IScope {
-
-}
-
-export class EcompFooterDirective implements ng.IDirective {
-
-    constructor(private sdcConfig:IAppConfigurtaion) {
-
-    }
-
-    public replace = true;
-    public restrict = 'E';
-
-    public scope = {};
-
-    template = ():string => {
-        return require('./ecomp-footer.html');
-    };
-
-    link = (scope:IEcompFooterDirectiveScope, $elem:JQuery, attr:any) => {
-
-    };
-
-    public static factory = (sdcConfig:IAppConfigurtaion)=> {
-        return new EcompFooterDirective(sdcConfig);
-    };
-
-}
-
-EcompFooterDirective.factory.$inject = ['sdcConfig'];
diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
index 7d616afba6..f73c82a190 100644
--- a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
+++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
@@ -20,7 +20,8 @@
 
 'use strict';
 import {IAppConfigurtaion, User, IUser} from "app/models";
-import {IUserResourceClass, IUserResource} from "app/services";
+import {IUserProperties} from "../../models/user";
+import {UserService} from "../../ng2/services/user.service";
 
 export class MenuItem {
     menuId:number;
@@ -55,7 +56,7 @@ export class EcompHeaderDirective implements ng.IDirective {
 
     constructor(private $http:ng.IHttpService,
                 private sdcConfig:IAppConfigurtaion,
-                private UserResourceClass:IUserResourceClass) {
+                private userService:UserService) {
 
     }
 
@@ -90,14 +91,14 @@ export class EcompHeaderDirective implements ng.IDirective {
 
         let initUser = ():void => {
             let defaultUserId:string;
-            let user:IUserResource = this.UserResourceClass.getLoggedinUser();
-            if (!user) {
+            let userInfo:IUserProperties = this.userService.getLoggedinUser();
+            if (!userInfo) {
                 defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix];
-                user = this.UserResourceClass.get({id: defaultUserId}, ():void => {
-                    $scope.user = new User(user);
+                this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => {
+                    $scope.user = new User(defaultUserInfo);
                 });
             } else {
-                $scope.user = new User(user);
+                $scope.user = new User(userInfo);
             }
         };
 
@@ -135,8 +136,8 @@ export class EcompHeaderDirective implements ng.IDirective {
 
     public static factory = ($http:ng.IHttpService,
                              sdcConfig:IAppConfigurtaion,
-                             UserResourceClass:IUserResourceClass)=> {
-        return new EcompHeaderDirective($http, sdcConfig, UserResourceClass);
+                             userService:UserService)=> {
+        return new EcompHeaderDirective($http, sdcConfig, userService);
     };
 
 }
@@ -229,7 +230,7 @@ export class EcompHeaderController {
     };
 }
 
-EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService'];
+EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2'];
 
 
 
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
index f88db47524..2a7fd74e53 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
@@ -164,12 +164,54 @@ export class CommonGraphUtils {
         if (!this.isRelationCertified(cy.nodes(), link.source, link.target)) {
             link.classes = 'not-certified-link';
         }
-        cy.add({
+        let linkElement = cy.add({
             group: 'edges',
             data: link,
             classes: link.classes
         });
+        this.initLinkTooltip(linkElement, link);
+    };
+
+    /**
+     * This function will init qtip tooltip on the link
+     * @params linkElement - the link we want the tooltip to apply on,
+     * link - the link obj
+     */
+    public initLinkTooltip(linkElement:Cy.CollectionElements, link:CompositionCiLinkBase) {
+
+        let opts = {
+            content: function () {
+                return '<div class="line">' +
+                            '<span class="req-cap-label">R: </span>' +
+                            '<span>'+ link.relation.relationships[0].relation.requirement + '</span>' +
+                        '</div>' +
+                        '<div class="line">' +
+                            '<div class="sprite-new link-tooltip-arrow"></div>' +
+                            '<span class="req-cap-label">C: </span>' +
+                            '<span>' + link.relation.relationships[0].relation.capability + '</span>' +
+                        '</div>';
+            },
+            position: {
+                my: 'top center',
+                at: 'bottom center',
+                adjust: {x:0, y:0}
+            },
+            style: {
+                classes: 'qtip-dark qtip-rounded qtip-custom link-qtip',
+                tip: {
+                    width: 16,
+                    height: 8
+                }
+            },
+            show: {
+                event: 'mouseover',
+                delay: 1000
+            },
+            hide: {event: 'mouseout mousedown'},
+            includeLabels: true
+        };
 
+        linkElement.qtip(opts);
     };
 
     /**
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
index 7e21f8293b..36c75c55fc 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
@@ -225,6 +225,23 @@ export class ComponentInstanceNodesStyle {
                 css: {
                     'overlay-opacity': 0
                 }
+            }, {
+                selector: '.configuration-node',
+                css: {
+                    'background-color': 'rgb(255,255,255)',
+                    'shape': 'rectangle',
+                    'label': 'data(displayName)',
+                    'background-image': 'data(img)',
+                    'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+                    'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+                    'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+                    'height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'background-opacity': 0,
+                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
+                    'overlay-opacity': 0
+                }
             }
         ]
     }
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
index 8b3a59ec1f..cdb163bda1 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
@@ -19,14 +19,20 @@
  */
 
 import {
-    MatchBase,
+    Match,
     LinkMenu,
     ComponentInstance,
     LeftPaletteComponent,
+    Capability,
+    Requirement,
+    Relationship,
+    PropertyModel,
     Component,
-    RelationMenuDirectiveObj,
+    ConnectRelationModel,
     CompositionCiNodeBase,
     CompositionCiNodeVl,
+    ModalModel,
+    ButtonModel,
     NodesFactory/*,
     AssetPopoverObj*/
 } from "app/models";
@@ -42,6 +48,18 @@ import {ComponentInstanceNodesStyle} from "../common/style/component-instances-n
 import {CytoscapeEdgeEditation} from 'third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js';
 import {ComponentServiceNg2} from "../../../ng2/services/component-services/component.service";
 import {ComponentGenericResponse} from "../../../ng2/services/responses/component-generic-response";
+import {ModalService} from "../../../ng2/services/modal.service";
+
+import {ConnectionWizardService} from "../../../ng2/pages/connection-wizard/connection-wizard.service";
+import {StepModel} from "../../../models/wizard-step";
+import {FromNodeStepComponent} from "app/ng2/pages/connection-wizard/from-node-step/from-node-step.component";
+import {PropertiesStepComponent} from "app/ng2/pages/connection-wizard/properties-step/properties-step.component";
+import {ToNodeStepComponent} from "app/ng2/pages/connection-wizard/to-node-step/to-node-step.component";
+import {ConnectionWizardHeaderComponent} from "app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component";
+import {ConnectionPropertiesViewComponent} from "../../../ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component";
+import {ComponentInstanceServiceNg2} from "../../../ng2/services/component-instance-services/component-instance.service";
+import {EVENTS} from "../../../utils/constants";
+import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model";
 
 interface ICompositionGraphScope extends ng.IScope {
 
@@ -50,9 +68,10 @@ interface ICompositionGraphScope extends ng.IScope {
     isViewOnly: boolean;
     withSidebar: boolean;
     // Link menu - create link menu
-    relationMenuDirectiveObj:RelationMenuDirectiveObj;
+    relationMenuDirectiveObj:ConnectRelationModel;
     isLinkMenuOpen:boolean;
-    createLinkFromMenu:(chosenMatch:MatchBase, vl:Component)=>void;
+    createLinkFromMenu:(chosenMatch:Match, vl:Component)=>void;
+    saveChangedCapabilityProperties:()=>Promise<PropertyBEModel[]>;
 
     //modify link menu - for now only delete menu
     relationMenuTimeout:ng.IPromise<any>;
@@ -64,6 +83,7 @@ interface ICompositionGraphScope extends ng.IScope {
     verifyDrop(event:JQueryEventObject, ui:any):void;
 
     //Links menus
+    viewRelation(link:Cy.CollectionEdges):void;
     deleteRelation(link:Cy.CollectionEdges):void;
     hideRelationMenu();
 
@@ -73,6 +93,8 @@ interface ICompositionGraphScope extends ng.IScope {
     zoomAll(nodes?:Cy.CollectionNodes): void;
     getAutoCompleteValues(searchTerm: string):void;
     highlightSearchMatches(searchTerm: string): void;
+
+    canvasMenuProps:any;
     
     /*//asset popover menu
     assetPopoverObj:AssetPopoverObj;
@@ -102,7 +124,10 @@ export class CompositionGraph implements ng.IDirective {
                 private commonGraphUtils:CommonGraphUtils,
                 private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils,
                 private CompositionGraphPaletteUtils:CompositionGraphPaletteUtils,
-                private ComponentServiceNg2: ComponentServiceNg2) {
+                private ComponentServiceNg2: ComponentServiceNg2,
+                private ModalServiceNg2: ModalService,
+                private ConnectionWizardServiceNg2: ConnectionWizardService,
+                private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2) {
 
     }
 
@@ -131,6 +156,8 @@ export class CompositionGraph implements ng.IDirective {
             _.forEach(GRAPH_EVENTS, (event) => {
                 this.eventListenerService.unRegisterObserver(event);
             });
+            this.eventListenerService.unRegisterObserver(EVENTS.SHOW_LOADER_EVENT + 'composition-graph');
+            this.eventListenerService.unRegisterObserver(EVENTS.HIDE_LOADER_EVENT + 'composition-graph');
         });
 
     };
@@ -190,7 +217,7 @@ export class CompositionGraph implements ng.IDirective {
 
             if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) {
                 let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId);
-                let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(cacheComponent, nodesData, nodesLinks);
+                let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(cacheComponent, nodesData, nodesLinks);
 
                 this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
                 this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
@@ -207,7 +234,7 @@ export class CompositionGraph implements ng.IDirective {
                     component.capabilities = response.capabilities;
                     component.requirements = response.requirements;
                     this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component);
-                    let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(component, nodesData, nodesLinks);
+                    let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(component, nodesData, nodesLinks);
                     this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
                     this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy)
                 });
@@ -321,18 +348,124 @@ export class CompositionGraph implements ng.IDirective {
             scope.zoomAll(matchingNodes);
         };
 
-        scope.createLinkFromMenu = (chosenMatch:MatchBase):void => {
+        scope.saveChangedCapabilityProperties = ():Promise<PropertyBEModel[]> => {
+            return new Promise<PropertyBEModel[]>((resolve) => {
+                const capabilityPropertiesBE: PropertyBEModel[] = this.ConnectionWizardServiceNg2.changedCapabilityProperties.map((prop) => {
+                    prop.value = prop.getJSONValue();
+                    const propBE = new PropertyBEModel(prop);
+                    propBE.parentUniqueId = this.ConnectionWizardServiceNg2.selectedMatch.relationship.relation.capabilityOwnerId;
+                    return propBE;
+                });
+                if (capabilityPropertiesBE.length > 0) {
+                    // if there are capability properties to update, then first update capability properties and then resolve promise
+                    this.ComponentInstanceServiceNg2
+                        .updateInstanceCapabilityProperties(
+                            scope.component,
+                            this.ConnectionWizardServiceNg2.selectedMatch.toNode,
+                            this.ConnectionWizardServiceNg2.selectedMatch.capability.type,
+                            this.ConnectionWizardServiceNg2.selectedMatch.capability.name,
+                            capabilityPropertiesBE
+                        )
+                        .subscribe((response) => {
+                            console.log("Update resource instance capability properties response: ", response);
+                            response.forEach((resProperty) => {
+                                this.ConnectionWizardServiceNg2.selectedMatch.capabilityProperties.find((property) => {
+                                    return property.uniqueId == resProperty.uniqueId;
+                                }).value = resProperty.value;
+                            });
+                            this.ConnectionWizardServiceNg2.changedCapabilityProperties = [];
+                            resolve(capabilityPropertiesBE);
+                        });
+                } else {
+                    // no capability properties to update, immediately resolve promise
+                    resolve(capabilityPropertiesBE);
+                }
+            });
+        };
+
+        scope.createLinkFromMenu = ():void => {
             scope.isLinkMenuOpen = false;
-            this.CompositionGraphLinkUtils.createLinkFromMenu(this._cy, chosenMatch, scope.component);
+
+            scope.saveChangedCapabilityProperties().then(() => {
+                //create link:
+                this.CompositionGraphLinkUtils
+                    .createLinkFromMenu(this._cy, this.ConnectionWizardServiceNg2.selectedMatch, scope.component);
+            });
         };
 
         scope.hideRelationMenu = () => {
             this.commonGraphUtils.safeApply(scope, () => {
-                scope.linkMenuObject = null;
+                delete scope.canvasMenuProps;
                 this.$timeout.cancel(scope.relationMenuTimeout);
             });
         };
 
+        scope.viewRelation = (link:Cy.CollectionEdges) => {
+            scope.hideRelationMenu();
+
+            const linkData = link.data();
+            const sourceNode:CompositionCiNodeBase = link.source().data();
+            const targetNode:CompositionCiNodeBase = link.target().data();
+            const relationship:Relationship = linkData.relation.relationships[0];
+
+            let capability:Capability;
+            _.some(_.values(targetNode.componentInstance.capabilities), (capGroup) => {
+                //item.uniqueId + item.ownerId + item.name === (selectedReqOrCapModel.uniqueId + selectedReqOrCapModel.ownerId + selectedReqOrCapModel.name)
+                capability = _.find<Capability>(_.values<Capability>(capGroup), (cap:Capability) => (
+                    cap.uniqueId === relationship.relation.capabilityUid &&
+                    cap.ownerId === relationship.relation.capabilityOwnerId &&
+                    cap.name === relationship.relation.capability
+                ));
+                return capability;
+            });
+            let requirement:Requirement;
+            _.some(_.values(sourceNode.componentInstance.requirements), (reqGroup) => {
+                requirement = _.find<Requirement>(_.values<Requirement>(reqGroup), (req:Requirement) => (
+                    req.uniqueId === relationship.relation.requirementUid &&
+                    req.ownerId === relationship.relation.requirementOwnerId &&
+                    req.name === relationship.relation.requirement
+                ));
+                return requirement;
+            });
+
+            new Promise<{capability:Capability, requirement:Requirement}>((resolve, reject) => {
+                if (capability && requirement) {
+                    resolve({capability, requirement});
+                }
+                else {
+                    scope.component.fetchRelation(relationship.relation.id).then((fetchedRelation) => {
+                        resolve({
+                            capability: fetchedRelation.relationships[0].capability,
+                            requirement: fetchedRelation.relationships[0].requirement
+                        });
+                    }, reject);
+                }
+            }).then((objReqCap) => {
+                capability = objReqCap.capability;
+                requirement = objReqCap.requirement;
+
+                this.ConnectionWizardServiceNg2.currentComponent = scope.component;
+                this.ConnectionWizardServiceNg2.connectRelationModel = new ConnectRelationModel(sourceNode, targetNode, []);
+                this.ConnectionWizardServiceNg2.selectedMatch = new Match(requirement, capability, true, linkData.source, linkData.target);
+                this.ConnectionWizardServiceNg2.selectedMatch.relationship = relationship;
+
+                const title = `Connection Properties`;
+                const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => {
+                    scope.saveChangedCapabilityProperties().then(() => { this.ModalServiceNg2.closeCurrentModal(); })
+                });
+                const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => { this.ModalServiceNg2.closeCurrentModal(); });
+                const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]);
+                const modalInstance = this.ModalServiceNg2.createCustomModal(modal);
+                this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
+                modalInstance.instance.open();
+
+                this.ComponentInstanceServiceNg2.getInstanceCapabilityProperties(scope.component, linkData.target, capability.type, capability.name)
+                    .subscribe((response: Array<PropertyModel>) => {
+                        this.ConnectionWizardServiceNg2.selectedMatch.capabilityProperties = response;
+                        this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
+                    }, (error) => {});
+            }, (error) => {});
+        };
 
         scope.deleteRelation = (link:Cy.CollectionEdges) => {
             scope.hideRelationMenu();
@@ -367,9 +500,26 @@ export class CompositionGraph implements ng.IDirective {
         this._cy.on('addedgemouseup', (event, data) => {
             scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target);
             if (scope.relationMenuDirectiveObj != null) {
-                scope.$apply(() => {
-                    scope.isLinkMenuOpen = true;
-                });
+                this.ConnectionWizardServiceNg2.setRelationMenuDirectiveObj(scope.relationMenuDirectiveObj);
+                this.ConnectionWizardServiceNg2.currentComponent = scope.component;
+                //TODO: init with the selected values
+                this.ConnectionWizardServiceNg2.selectedMatch = null;
+                
+                let steps:Array<StepModel> = [];
+                let fromNodeName:string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name;
+                let toNodeName:string = scope.relationMenuDirectiveObj.toNode.componentInstance.name;
+                steps.push(new StepModel(fromNodeName, FromNodeStepComponent));
+                steps.push(new StepModel(toNodeName, ToNodeStepComponent));
+                steps.push(new StepModel('Properties', PropertiesStepComponent));
+                let wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName;
+                let modalInstance = this.ModalServiceNg2.createMultiStepsWizard(wizardTitle, steps, scope.createLinkFromMenu, ConnectionWizardHeaderComponent);
+                modalInstance.instance.open();
+
+                //
+                // this.ModalServiceNg2.createMultiStepsWizard('Connect', )Connect
+                // scope.$apply(() => {
+                //     scope.isLinkMenuOpen = true;
+                // });
             }
         });
         this._cy.on('tapstart', 'node', (event:Cy.EventObject) => {
@@ -424,7 +574,7 @@ export class CompositionGraph implements ng.IDirective {
             let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy);
 
             let linkableNodes = this.commonGraphUtils.getLinkableNodes(this._cy, payload.node);
-            let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(payload.node.data().componentInstance, linkableNodes, nodesLinks);
+            let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(payload.node.data().componentInstance, linkableNodes, nodesLinks);
             this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
             this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data());
             
@@ -498,14 +648,39 @@ export class CompositionGraph implements ng.IDirective {
 
     };*/
     private openModifyLinkMenu = (scope:ICompositionGraphScope, linkMenuObject:LinkMenu, timeOutInMilliseconds?:number) => {
+        scope.hideRelationMenu();
+        this.$timeout(() => {
+            scope.canvasMenuProps = {
+                open: true,
+                styleClass: 'w-sdc-canvas-menu-list',
+                items: [],
+                position: {
+                    x: `${linkMenuObject.position.x}px`,
+                    y: `${linkMenuObject.position.y}px`
+                }
+            };
+
+            if (this._cy.$('edge:selected').length === 1) {
+                scope.canvasMenuProps.items.push({
+                    contents: 'View',
+                    styleClass: 'w-sdc-canvas-menu-item-view',
+                    action: () => {
+                        scope.viewRelation(<Cy.CollectionEdges>linkMenuObject.link);
+                    }
+                });
+            }
+            scope.canvasMenuProps.items.push({
+                contents: 'Delete',
+                styleClass: 'w-sdc-canvas-menu-item-delete',
+                action: () => {
+                    scope.deleteRelation(<Cy.CollectionEdges>linkMenuObject.link);
+                }
+            });
 
-        this.commonGraphUtils.safeApply(scope, () => {
-            scope.linkMenuObject = linkMenuObject;
+            scope.relationMenuTimeout = this.$timeout(() => {
+                scope.hideRelationMenu();
+            }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
         });
-
-        scope.relationMenuTimeout = this.$timeout(() => {
-            scope.hideRelationMenu();
-        }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
     };
 
     private initGraphNodes(componentInstances:ComponentInstance[], isViewOnly:boolean) {
@@ -571,7 +746,10 @@ export class CompositionGraph implements ng.IDirective {
                              CommonGraphUtils,
                              MatchCapabilitiesRequirementsUtils,
                              CompositionGraphPaletteUtils,
-                             ComponentServiceNg2) => {
+                             ComponentServiceNg2,
+                             ModalService,
+                             ConnectionWizardService,
+                             ComponentInstanceServiceNg2) => {
         return new CompositionGraph(
             $q,
             $log,
@@ -587,7 +765,10 @@ export class CompositionGraph implements ng.IDirective {
             CommonGraphUtils,
             MatchCapabilitiesRequirementsUtils,
             CompositionGraphPaletteUtils,
-            ComponentServiceNg2);
+            ComponentServiceNg2,
+            ModalService,
+            ConnectionWizardService,
+            ComponentInstanceServiceNg2);
     }
 }
 
@@ -606,5 +787,8 @@ CompositionGraph.factory.$inject = [
     'CommonGraphUtils',
     'MatchCapabilitiesRequirementsUtils',
     'CompositionGraphPaletteUtils',
-    'ComponentServiceNg2'
+    'ComponentServiceNg2',
+    'ModalServiceNg2',
+    'ConnectionWizardServiceNg2',
+    'ComponentInstanceServiceNg2'
 ];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
index 248f19fb70..bbf2d6bbb2 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
@@ -8,17 +8,7 @@
 <relation-menu relation-menu-directive-obj="relationMenuDirectiveObj" is-link-menu-open="isLinkMenuOpen"
                create-relation="createLinkFromMenu" cancel="cancelRelationMenu()"></relation-menu>
 
-
-<div class="w-sdc-canvas-menu"
-     data-ng-show="linkMenuObject" ng-style="{left: linkMenuObject.position.x, top: linkMenuObject.position.y}"
-     id="relationMenu">
-
-    <div class="w-sdc-canvas-menu-content hand" data-ng-click="deleteRelation(linkMenuObject.link)">
-        <div class="w-sdc-canvas-menu-content-delete-button"></div>
-        Delete
-    </div>
-
-</div>
+<menu-list-ng2 [props]="canvasMenuProps"></menu-list-ng2>
 
     <div class="w-sdc-search-menu" data-ng-class="{'with-sidebar': withSidebar}">
         <ng2-search-with-autocomplete [search-placeholder]="'Type to search'" [auto-complete-values]="componentInstanceNames" (search-changed)="getAutoCompleteValues($event)" (search-button-clicked)="highlightSearchMatches($event)"
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
index 0ea38af825..da7d48e6ae 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
@@ -18,7 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 
-import {ComponentInstance, Component, MatchReqToCapability, MatchBase, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models";
+import {ComponentInstance, Component, Match, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models";
 import {QueueUtils, Dictionary, GraphUIObjects} from "app/utils";
 import {LoaderService} from "app/services";
 import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
@@ -106,16 +106,16 @@ export class CompositionGraphGeneralUtils {
      * @param cy - Cytoscape instance
      * @param fromUcpeInstance
      * @param toComponentInstance
-     * @returns {MatchReqToCapability}
+     * @returns {Match}
      */
-    public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):MatchReqToCapability {
+    public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):Match {
 
-        let matches:Array<MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
-        let hostedOnMatch:MatchBase = _.find(matches, (match:MatchReqToCapability) => {
+        let matches:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
+        let hostedOnMatch:Match = _.find(matches, (match:Match) => {
             return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container';
         });
 
-        return <MatchReqToCapability>hostedOnMatch;
+        return hostedOnMatch;
     };
 
 
@@ -128,7 +128,7 @@ export class CompositionGraphGeneralUtils {
      */
     private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean {
 
-        let hostedOnMatch:MatchReqToCapability = this.canBeHostedOn(cy, ucpeNode, nodeToInsert);
+        let hostedOnMatch:Match = this.canBeHostedOn(cy, ucpeNode, nodeToInsert);
         let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation
         return result;
 
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
index 05f99ae9ea..89c5e14602 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
@@ -21,25 +21,17 @@
 /**
  * Created by obarda on 6/28/2016.
  */
-import {GraphUIObjects, ComponentInstanceFactory, ResourceType} from "app/utils";
-import {LeftPaletteLoaderService, LoaderService} from "app/services";
+import {GraphUIObjects} from "app/utils";
+import {LoaderService} from "app/services";
 import {
     NodeUcpe,
     CompositionCiNodeVf,
-    MatchReqToCapability,
-    MatchBase,
-    MatchReqToReq,
-    ComponentInstance,
+    Match,
     CompositionCiNodeBase,
     RelationshipModel,
-    RelationMenuDirectiveObj,
-    CapabilitiesGroup,
+    ConnectRelationModel,
     LinksFactory,
-    NodesFactory,
-    RequirementsGroup,
     Component,
-    Relationship,
-    Capability,
     LinkMenu,
     Point,
     CompositionCiLinkBase
@@ -105,16 +97,16 @@ export class CompositionGraphLinkUtils {
         );
     };
 
-    private createSimpleLink = (match:MatchReqToCapability, cy:Cy.Instance, component:Component):void => {
+    private createSimpleLink = (match:Match, cy:Cy.Instance, component:Component):void => {
         let newRelation:RelationshipModel = match.matchToRelationModel();
         let linkObg:CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]);
         this.createLink(linkObg, cy, component);
     };
 
-    public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:MatchBase, component:Component):void => {
+    public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Match, component:Component):void => {
 
         if (chosenMatch) {
-            if (chosenMatch && chosenMatch instanceof MatchReqToCapability) {
+            if (chosenMatch && chosenMatch instanceof Match) {
                 this.createSimpleLink(chosenMatch, cy, component);
             }
         }
@@ -128,18 +120,18 @@ export class CompositionGraphLinkUtils {
      * @param matchesArray
      * @returns {Array<MatchBase>}
      */
-    public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<MatchBase>):any {
+    public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<Match>):any {
 
-        let matchLink:Array<MatchBase>;
+        let matchLink:Array<Match>;
 
         if (fromNode.isUcpePart) {
-            matchLink = _.filter(matchesArray, (match:MatchBase) => {
+            matchLink = _.filter(matchesArray, (match:Match) => {
                 return match.isOwner(fromNode.id);
             });
         }
 
         if (toNode.isUcpePart) {
-            matchLink = _.filter(matchesArray, (match:MatchBase) => {
+            matchLink = _.filter(matchesArray, (match:Match) => {
                 return match.isOwner(toNode.id);
             });
         }
@@ -154,14 +146,14 @@ export class CompositionGraphLinkUtils {
      * @param toNode
      * @returns {any}
      */
-    public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):RelationMenuDirectiveObj {
+    public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):ConnectRelationModel {
 
         if (!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)) {
             return null;
         }
         let linkModel:Array<CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy);
 
-        let possibleRelations:Array<MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance,
+        let possibleRelations:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance,
             toNode.data().componentInstance, linkModel);
 
         //filter relations found to limit to specific ucpe-cp
@@ -169,8 +161,8 @@ export class CompositionGraphLinkUtils {
 
         //if found possibleRelations between the nodes we create relation menu directive and open the link menu
         if (possibleRelations.length) {
-            let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint());
-            return new RelationMenuDirectiveObj(fromNode.data(), toNode.data(), menuPosition, possibleRelations);
+            // let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint());
+            return new ConnectRelationModel(fromNode.data(), toNode.data(), possibleRelations);
         }
         return null;
     };
@@ -209,7 +201,7 @@ export class CompositionGraphLinkUtils {
      * @param vfNode
      */
     public createVfToUcpeLink = (component:Component, cy:Cy.Instance, ucpeNode:NodeUcpe, vfNode:CompositionCiNodeVf):void => {
-        let hostedOnMatch:MatchReqToCapability = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance);
+        let hostedOnMatch:Match = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance);
         /* create relation */
         let newRelation = new RelationshipModel();
         newRelation.fromNode = ucpeNode.id;
@@ -224,13 +216,12 @@ export class CompositionGraphLinkUtils {
     /**
      * Handles click event on links.
      * If one edge selected: do nothing.
-     /*Two edges selected - always select all
-     /* Three or more edges: first click - select all, secondary click - select single.
+     * Two or more edges: first click - select all, secondary click - select single.
      * @param cy
      * @param event
      */
     public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) {
-        if (cy.$('edge:selected').length > 2 && event.cyTarget[0].selected()) {
+        if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) {
             cy.$(':selected').unselect();
         } else {
 
@@ -256,7 +247,7 @@ export class CompositionGraphLinkUtils {
      * @returns {Point}
      */
     public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point {
-        let point:Point = new Point(event.originalEvent.x, event.originalEvent.y);
+        let point:Point = new Point(event.originalEvent.clientX, event.originalEvent.clientY);
         if (event.originalEvent.view.screen.height - elementHeight < point.y) {
             point.y = event.originalEvent.view.screen.height - elementHeight;
         }
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
index 5f717512f5..6a02381902 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
@@ -18,22 +18,17 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Requirement, CompositionCiLinkBase, ComponentInstance, CapabilitiesGroup, RequirementsGroup, MatchReqToCapability, MatchBase,
-    MatchReqToReq,CompositionCiNodeBase, Component, Capability} from "app/models";
+import {
+    Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match,
+    CompositionCiNodeBase, Component, Capability
+} from "app/models";
+import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
 /**
  * Created by obarda on 1/1/2017.
  */
 
 export class MatchCapabilitiesRequirementsUtils {
 
-    constructor() {
-    }
-
-    public static linkable(requirement1:Requirement, requirement2:Requirement, vlCapability:Capability):boolean {
-        return MatchCapabilitiesRequirementsUtils.isMatch(requirement1, vlCapability) && MatchCapabilitiesRequirementsUtils.isMatch(requirement2, vlCapability);
-    };
-
-
     /**
      * Shows + icon in corner of each node passed in
      * @param filteredNodesData
@@ -77,9 +72,7 @@ export class MatchCapabilitiesRequirementsUtils {
         })
     }
 
-    // -------------------------------------------ALL FUNCTIONS NEED REFACTORING---------------------------------------------------------------//
-
-    private static requirementFulfilled(fromNodeId:string, requirement:any, links:Array<CompositionCiLinkBase>):boolean {
+    private static isRequirementFulfilled(fromNodeId:string, requirement:any, links:Array<CompositionCiLinkBase>):boolean {
         return _.some(links, {
             'relation': {
                 'fromNode': fromNodeId,
@@ -108,172 +101,97 @@ export class MatchCapabilitiesRequirementsUtils {
         return false;
     };
 
-    private getFromToMatches(requirements1:RequirementsGroup,
-                             requirements2:RequirementsGroup,
-                             capabilities:CapabilitiesGroup,
-                             links:Array<CompositionCiLinkBase>,
-                             fromId:string,
-                             toId:string,
-                             vlCapability?:Capability):Array<MatchBase> {
-        let matches:Array<MatchBase> = new Array<MatchBase>();
-        _.forEach(requirements1, (requirementValue:Array<Requirement>, key) => {
-            _.forEach(requirementValue, (requirement:Requirement) => {
-                if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromId, requirement, links)) {
-                    _.forEach(capabilities, (capabilityValue:Array<Capability>, key) => {
-                        _.forEach(capabilityValue, (capability:Capability) => {
-                            if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
-                                let match:MatchReqToCapability = new MatchReqToCapability(requirement, capability, true, fromId, toId);
-                                matches.push(match);
-                            }
-                        });
-                    });
-                    if (vlCapability) {
-                        _.forEach(requirements2, (requirement2Value:Array<Requirement>, key) => {
-                            _.forEach(requirement2Value, (requirement2:Requirement) => {
-                                if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement2, links) && MatchCapabilitiesRequirementsUtils.linkable(requirement, requirement2, vlCapability)) {
-                                    let match:MatchReqToReq = new MatchReqToReq(requirement, requirement2, true, fromId, toId);
-                                    matches.push(match);
-                                }
-                            });
-                        });
-                    }
-                }
-            });
-        });
-        return matches;
-    }
-
-    private getToFromMatches(requirements:RequirementsGroup, capabilities:CapabilitiesGroup, links:Array<CompositionCiLinkBase>, fromId:string, toId:string):Array<MatchReqToCapability> {
-        let matches:Array<MatchReqToCapability> = [];
-        _.forEach(requirements, (requirementValue:Array<Requirement>, key) => {
-            _.forEach(requirementValue, (requirement:Requirement) => {
-                if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement, links)) {
-                    _.forEach(capabilities, (capabilityValue:Array<Capability>, key) => {
-                        _.forEach(capabilityValue, (capability:Capability) => {
-                            if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
-                                let match:MatchReqToCapability = new MatchReqToCapability(requirement, capability, false, toId, fromId);
-                                matches.push(match);
-                            }
-                        });
-                    });
-                }
-            });
-        });
-        return matches;
-    }
-
     public getMatchedRequirementsCapabilities(fromComponentInstance:ComponentInstance,
                                               toComponentInstance:ComponentInstance,
-                                              links:Array<CompositionCiLinkBase>,
-                                              vl?:Component):Array<MatchBase> {//TODO allow for VL array
-        let linkCapability;
-        if (vl) {
-            let linkCapabilities:Array<Capability> = vl.capabilities.findValueByKey('linkable');
-            if (linkCapabilities) {
-                linkCapability = linkCapabilities[0];
-            }
-        }
-        let fromToMatches:Array<MatchBase> = this.getFromToMatches(fromComponentInstance.requirements,
-            toComponentInstance.requirements,
+                                              links:Array<CompositionCiLinkBase>):Array<Match> {
+        let fromToMatches:Array<Match> = this.getMatches(fromComponentInstance.requirements,
             toComponentInstance.capabilities,
             links,
             fromComponentInstance.uniqueId,
-            toComponentInstance.uniqueId,
-            linkCapability);
-        let toFromMatches:Array<MatchReqToCapability> = this.getToFromMatches(toComponentInstance.requirements,
+            toComponentInstance.uniqueId, true);
+        let toFromMatches:Array<Match> = this.getMatches(toComponentInstance.requirements,
             fromComponentInstance.capabilities,
             links,
             fromComponentInstance.uniqueId,
-            toComponentInstance.uniqueId);
+            toComponentInstance.uniqueId, false);
 
         return fromToMatches.concat(toFromMatches);
     }
 
+    /***** REFACTORED FUNCTIONS START HERE *****/
+
+    public getMatches(requirements:RequirementsGroup, capabilities:CapabilitiesGroup, links:Array<CompositionCiLinkBase>,
+                      fromId:string, toId:string, isFromTo: boolean):Array<Match> {
+        let matches:Array<Match> = [];
+        let unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links);
+        _.forEach(unfulfilledReqs, (req)=> {
+            _.forEach(_.flatten(_.values(capabilities)), (capability:Capability)=> {
+                if (MatchCapabilitiesRequirementsUtils.isMatch(req, capability)) {
+                    if(isFromTo) {
+                        matches.push(new Match(req, capability, isFromTo, fromId, toId));
+                    } else{
+                        matches.push(new Match(req, capability, isFromTo, toId, fromId));
+                    }
+                }
+            });
+        });
+        return matches;
+    }
+
+    public getUnfulfilledRequirements = (fromNodeId:string, requirements:RequirementsGroup, links:Array<CompositionCiLinkBase>):Array<Requirement>=> {
+
+        let requirementArray:Array<Requirement> = [];
+        _.forEach(_.flatten(_.values(requirements)), (requirement:Requirement)=> {
+            if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) {
+                requirementArray.push(requirement);
+            }
+        });
+        return requirementArray;
+    };
+
 
     /**
-     * Step I: Check if capabilities of component match requirements of nodeDataArray
-     * 1. Get component capabilities and loop on each capability
-     * 2. Inside the loop, perform another loop on all nodeDataArray, and fetch the requirements for each one
-     * 3. Loop on the requirements, and verify match (see in code the rules)
-     *
-     * Step II: Check if requirements of component match capabilities of nodeDataArray
-     * 1. Get component requirements and loop on each requirement
-     * 2.
-     *
-     * @param component         - this is the hovered resource of the left panel of composition screen
-     * @param nodeDataArray     - Array of resource instances that are on the canvas
-     * @param links             -getMatchedRequirementsCapabilities
-     * @param vl                -
-     * @returns {any[]|T[]}
+     * Returns true if there is a match between the capabilities and requirements that are passed in
+     * @param requirements
+     * @param capabilities
+     * @returns {boolean}
      */
-    public findByMatchingCapabilitiesToRequirements(component:Component,
-                                                    nodeDataArray:Array<CompositionCiNodeBase>,
-                                                    links:Array<CompositionCiLinkBase>,
-                                                    vl?:Component):Array<any> {//TODO allow for VL array
-        let res = [];
-
-        // STEP I
-        {
-            let capabilities:any = component.capabilities;
-            _.forEach(capabilities, (capabilityValue:Array<any>, capabilityKey)=> {
-                _.forEach(capabilityValue, (capability)=> {
-                    _.forEach(nodeDataArray, (node:CompositionCiNodeBase)=> {
-                        if (node && node.componentInstance) {
-                            let requirements:any = node.componentInstance.requirements;
-                            let fromNodeId:string = node.componentInstance.uniqueId;
-                            _.forEach(requirements, (requirementValue:Array<any>, requirementKey)=> {
-                                _.forEach(requirementValue, (requirement)=> {
-                                    if (requirement.name !== "dependency" && MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)
-                                        && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) {
-                                        res.push(node);
-                                    }
-                                });
-                            });
-                        }
-                    });
-                });
+    public containsMatch = (requirements:Array<Requirement>, capabilities:CapabilitiesGroup):boolean => {
+        return _.some(requirements, (req:Requirement)=> {
+            return _.some(_.flatten(_.values(capabilities)), (capability:Capability) => {
+                return MatchCapabilitiesRequirementsUtils.isMatch(req, capability);
             });
-        }
+        });
+    };
 
-        // STEP II
-        {
-            let requirements:any = component.requirements;
-            let fromNodeId:string = component.uniqueId;
-            let linkCapability:Array<Capability> = vl ? vl.capabilities.findValueByKey('linkable') : undefined;
+    /**
+     * Returns array of nodes that can connect to the component.
+     * In order to connect, one of the following conditions must be met:
+     * 1. component has an unfulfilled requirement that matches a node's capabilities
+     * 2. node has an unfulfilled requirement that matches the component's capabilities
+     * 3. vl is passed in which has the capability to fulfill requirement from component and requirement on node.
+     */
+    public findMatchingNodes(component:Component, nodeDataArray:Array<CompositionCiNodeBase>,
+                             links:Array<CompositionCiLinkBase>):Array<any> //TODO allow for VL array and TEST
+    {
+        let componentRequirements:Array<Requirement> = this.getUnfulfilledRequirements(component.uniqueId, component.requirements, links);
+        return _.filter(nodeDataArray, (node:any)=> {
+            if (node && node.componentInstance) {
+
+                //Check if component has an unfulfilled requirement that can be met by one of nodes's capabilities (#1)
+                if (componentRequirements.length && node.category !== 'groupCp' && this.containsMatch(componentRequirements, node.componentInstance.capabilities)) {
+                    return true;
 
-            _.forEach(requirements, (requirementValue:Array<any>, requirementKey)=> {
-                _.forEach(requirementValue, (requirement)=> {
-                    if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) {
-                        _.forEach(nodeDataArray, (node:any)=> {
-                            if (node && node.componentInstance && node.category !== 'groupCp') {
-                                let capabilities:any = node.componentInstance.capabilities;
-                                _.forEach(capabilities, (capabilityValue:Array<any>, capabilityKey)=> {
-                                    _.forEach(capabilityValue, (capability)=> {
-                                        if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) {
-                                            res.push(node);
-                                        }
-                                    });
-                                });
-                                if (linkCapability) {
-                                    let linkRequirements = node.componentInstance.requirements;
-                                    _.forEach(linkRequirements, (value:Array<any>, key)=> {
-                                        _.forEach(value, (linkRequirement)=> {
-                                            if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(node.componentInstance.uniqueId, linkRequirement, links)
-                                                && MatchCapabilitiesRequirementsUtils.linkable(requirement, linkRequirement, linkCapability[0])) {
-                                                res.push(node);
-                                            }
-                                        });
-                                    });
-                                }
-                            }
-                        });
+                } else { //Check if node has unfulfilled requirement that can be filled by component (#2)
+                    let nodeRequirements:Array<Requirement> = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links);
+                    if (!nodeRequirements.length) return false;
+                    if (this.containsMatch(nodeRequirements, component.capabilities)) {
+                        return true;
                     }
-                });
-            });
-        }
-
-        return _.uniq(res);
-    };
+                }
+            }
+        });
+    }
 }
 
 MatchCapabilitiesRequirementsUtils.$inject = [];
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
index ace9d1ce4c..127f43b734 100644
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
@@ -27,6 +27,7 @@ import { ModulesNodesStyle } from "../common/style/module-node-style";
 import { GRAPH_EVENTS } from "app/utils";
 import { EventListenerService } from "app/services";
 import '@bardit/cytoscape-expand-collapse';
+import {AngularJSBridge} from "../../../services/angular-js-bridge-service";
 
 interface IDeploymentGraphScope extends ng.IScope {
     component: Component;
@@ -105,6 +106,7 @@ export class DeploymentGraph implements ng.IDirective {
     private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => {
 
         let graphEl = el.find('.sdc-deployment-graph-wrapper');
+        const imagePath = AngularJSBridge.getAngularConfig().imagesPath;
         this._cy = cytoscape({
             container: graphEl,
             style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()),
@@ -124,8 +126,8 @@ export class DeploymentGraph implements ng.IDirective {
             fisheye: false,
             undoable: false,
             expandCollapseCueSize: 18,
-            expandCueImage: '/assets/styles/images/resource-icons/' + 'closeModule.png',
-            collapseCueImage: '/assets/styles/images/resource-icons/' + 'openModule.png',
+            expandCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
+            collapseCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'openModule.png',
             expandCollapseCueSensitivity: 2,
             cueOffset: -20
         });
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
index f46dc6c939..8abf968c82 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -132,7 +132,7 @@ export class Palette implements ng.IDirective {
 
     private initLeftPanel(leftPanelComponents:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):LeftPanelModel {
         let leftPanelModel = new LeftPanelModel();
-
+       
         if (resourceFilterTypes && resourceFilterTypes.length) {
             leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes);
         }
@@ -171,40 +171,6 @@ export class Palette implements ng.IDirective {
 
             this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent);
             this.$log.debug('palette::onMouseOver:: fired');
-            //
-            // if (this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.containsKey(displayComponent.uniqueId)) {
-            //     this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} found in cache`);
-            //     let cacheComponent:Component = this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.getValue(displayComponent.uniqueId);
-            //
-            //     //TODO: Danny: fire event to highlight matching nodes
-            //     //showMatchingNodes(cacheComponent);
-            //     return;
-            // }
-            //
-            // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} not found in cache, initiating server get`);
-            // // This will bring the component from the server including requirements and capabilities
-            // // Check that we do not fetch many times, because only in the success we add the component to componentRequirementsAndCapabilitiesCaching
-            // if (this.fetchingComponentFromServer) {
-            //     return;
-            // }
-            //
-            // this.fetchingComponentFromServer = true;
-            // this.ComponentFactory.getComponentFromServer(displayComponent.componentSubType, displayComponent.uniqueId)
-            //     .then((component:Component) => {
-            //         this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} fetch success`);
-            //         // this.LeftPaletteLoaderService.updateSpecificComponentLeftPalette(component, scope.currentComponent.componentType);
-            //         this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.setValue(component.uniqueId, component);
-            //         this.fetchingComponentFromServer = false;
-            //
-            //         //TODO: Danny: fire event to highlight matching nodes
-            //         //showMatchingNodes(component);
-            //     })
-            //     .catch(() => {
-            //         this.$log.debug('palette::onMouseOver:: component id fetch error');
-            //         this.fetchingComponentFromServer = false;
-            //     });
-
-
         };
 
         scope.onMouseOut = () => {
@@ -226,8 +192,13 @@ export class Palette implements ng.IDirective {
     private updateLeftPanelDisplay(scope:IPaletteScope) {
         let entityType:string = scope.currentComponent.componentType.toLowerCase();
         let resourceFilterTypes:Array<string> = this.sdcConfig.resourceTypesFilter[entityType];
-        scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent);
-        scope.model = this.initLeftPanel(scope.components, resourceFilterTypes);
+         scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent);
+        //remove the container component  from the list 
+        let componentTempToDisplay = angular.copy(scope.components);
+        componentTempToDisplay = _.remove(componentTempToDisplay, function (component) {
+            return component.component.invariantUUID !== scope.currentComponent.invariantUUID;
+        });
+        scope.model = this.initLeftPanel(componentTempToDisplay, resourceFilterTypes);
         scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
     };
 
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
index 4b123e5777..7f9bfd1e0d 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
@@ -32,7 +32,7 @@
                  data-ng-repeat="component in components | orderBy: 'displayName' track by $index"
                  data-tests-id={{component.displayName}}>
                 <div class="i-sdc-designer-leftbar-section-content-item-icon-ph">
-                    <div class="medium {{component.iconClass}}"
+                    <div class="medium small {{component.iconClass}}"
                          data-tests-id="leftbar-section-content-item-{{component.displayName}}">
                         <div class="{{component.certifiedIconClass}}" uib-tooltip="Not certified"
                              tooltip-class="uib-custom-tooltip" tooltip-placement="bottom" tooltip-popup-delay="700">
diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html
index a0a9e4af27..e1cdf499a0 100644
--- a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html
+++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html
@@ -1,46 +1,46 @@
-<div class="link-menu-open" data-tests-id="link-menu-open" data-ng-show="isLinkMenuOpen" ng-style="{left: relationMenuDirectiveObj.menuPosition.x, top: relationMenuDirectiveObj.menuPosition.y}" clicked-outside="{onClickedOutside: 'hideRelationMatch()', clickedOutsideEnable: 'isLinkMenuOpen'}" >
+<div class="link-menu-open" data-tests-id="link-menu-open" data-ng-show="isLinkMenuOpen" ng-style="{left: connectRelationModel.menuPosition.x, top: connectRelationModel.menuPosition.y}" clicked-outside="{onClickedOutside: 'hideRelationMatch()', clickedOutsideEnable: 'isLinkMenuOpen'}" >
     <h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.leftSideLink.componentInstance.name | resourceName}}</h4>
     <h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.rightSideLink.componentInstance.name | resourceName}}</h4>
 
     <p>Select one of the options below to connect</p>
 
     <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-        <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.leftSideLink.requirements, relationMenuDirectiveObj.rightSideLink.selectedMatch)">Requirements</div>
-        <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req ,matchArr) in relationMenuDirectiveObj.leftSideLink.requirements"
-             data-ng-click="relationMenuDirectiveObj.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
-             data-ng-show="showMatch(relationMenuDirectiveObj.rightSideLink.selectedMatch, matchArr)"
-             data-ng-class="{ 'selected': relationMenuDirectiveObj.leftSideLink.selectedMatch === matchArr}">
+        <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.leftSideLink.requirements, connectRelationModel.rightSideLink.selectedMatch)">Requirements</div>
+        <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req ,matchArr) in connectRelationModel.leftSideLink.requirements"
+             data-ng-click="connectRelationModel.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
+             data-ng-show="showMatch(connectRelationModel.rightSideLink.selectedMatch, matchArr)"
+             data-ng-class="{ 'selected': connectRelationModel.leftSideLink.selectedMatch === matchArr}">
             <div sdc-smart-tooltip>{{matchArr[0].requirement.getFullTitle()}}</div>
         </div>
 
-        <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.leftSideLink.capabilities, relationMenuDirectiveObj.rightSideLink.selectedMatch)">Capabilities</div>
-        <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in relationMenuDirectiveObj.leftSideLink.capabilities"
-             data-ng-click="relationMenuDirectiveObj.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
-             data-ng-show="showMatch(relationMenuDirectiveObj.rightSideLink.selectedMatch, matchArr)"
-             data-ng-class="{ 'selected': relationMenuDirectiveObj.leftSideLink.selectedMatch === matchArr}">
+        <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.leftSideLink.capabilities, connectRelationModel.rightSideLink.selectedMatch)">Capabilities</div>
+        <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in connectRelationModel.leftSideLink.capabilities"
+             data-ng-click="connectRelationModel.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
+             data-ng-show="showMatch(connectRelationModel.rightSideLink.selectedMatch, matchArr)"
+             data-ng-class="{ 'selected': connectRelationModel.leftSideLink.selectedMatch === matchArr}">
             <div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div>
         </div>
     </perfect-scrollbar>
 
     <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-        <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.rightSideLink.requirements, relationMenuDirectiveObj.leftSideLink.selectedMatch)">Requirements</div>
-        <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req, matchArr) in relationMenuDirectiveObj.rightSideLink.requirements"
-             data-ng-click="relationMenuDirectiveObj.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
-             data-ng-show="showMatch(relationMenuDirectiveObj.leftSideLink.selectedMatch, matchArr)"
-             data-ng-class="{ 'selected': relationMenuDirectiveObj.rightSideLink.selectedMatch === matchArr}">
+        <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.rightSideLink.requirements, connectRelationModel.leftSideLink.selectedMatch)">Requirements</div>
+        <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req, matchArr) in connectRelationModel.rightSideLink.requirements"
+             data-ng-click="connectRelationModel.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
+             data-ng-show="showMatch(connectRelationModel.leftSideLink.selectedMatch, matchArr)"
+             data-ng-class="{ 'selected': connectRelationModel.rightSideLink.selectedMatch === matchArr}">
             <div sdc-smart-tooltip>{{matchArr[0].secondRequirement ? matchArr[0].secondRequirement.getFullTitle() : matchArr[0].requirement.getFullTitle()}}</div>
         </div>
 
-        <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.rightSideLink.capabilities, relationMenuDirectiveObj.leftSideLink.selectedMatch)">Capabilities</div>
-        <div class="link-item"  data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in relationMenuDirectiveObj.rightSideLink.capabilities"
-             data-ng-click="relationMenuDirectiveObj.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
-             data-ng-show="showMatch(relationMenuDirectiveObj.leftSideLink.selectedMatch, matchArr)"
-             data-ng-class="{ 'selected': relationMenuDirectiveObj.rightSideLink.selectedMatch === matchArr}">
+        <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.rightSideLink.capabilities, connectRelationModel.leftSideLink.selectedMatch)">Capabilities</div>
+        <div class="link-item"  data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in connectRelationModel.rightSideLink.capabilities"
+             data-ng-click="connectRelationModel.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
+             data-ng-show="showMatch(connectRelationModel.leftSideLink.selectedMatch, matchArr)"
+             data-ng-class="{ 'selected': connectRelationModel.rightSideLink.selectedMatch === matchArr}">
             <div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div>
         </div>
     </perfect-scrollbar>
 
-    <div class="vl-type" data-ng-class="{'disabled': !relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement}">
+    <div class="vl-type" data-ng-class="{'disabled': !connectRelationModel.leftSideLink.selectedMatch[0].secondRequirement || !connectRelationModel.rightSideLink.selectedMatch[0].secondRequirement}">
         <sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="ptp"
                           disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.p2pVL"
                           text="Point to point" elem-id="radioPTP" elem-name="vlType"></sdc-radio-button>
@@ -57,7 +57,7 @@
     </div>
 
     <button class="tlv-btn grey" data-tests-id="link-menu-button-cancel" data-ng-click="hideRelationMatch()">Cancel</button>
-    <button class="tlv-btn blue" data-tests-id="link-menu-button-connect" data-ng-disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch || !relationMenuDirectiveObj.rightSideLink.selectedMatch ||
-                                                                    (relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement && !relationMenuDirectiveObj.vlType)"
+    <button class="tlv-btn blue" data-tests-id="link-menu-button-connect" data-ng-disabled="!connectRelationModel.leftSideLink.selectedMatch || !connectRelationModel.rightSideLink.selectedMatch ||
+                                                                    (connectRelationModel.leftSideLink.selectedMatch[0].secondRequirement && !connectRelationModel.vlType)"
             data-ng-click="saveRelation()">Connect</button>
 </div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts
index 6106d10c4e..f73e855c0e 100644
--- a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts
@@ -18,19 +18,19 @@
  * ============LICENSE_END=========================================================
  */
 'use strict'
-import {MatchBase, RelationMenuDirectiveObj} from "app/models";
+import {Match, ConnectRelationModel} from "app/models";
 import {Component} from "../../../models/components/component";
 
 export interface IRelationMenuScope extends ng.IScope {
-    relationMenuDirectiveObj:RelationMenuDirectiveObj;
+    relationMenuDirectiveObj:ConnectRelationModel;
     createRelation:Function;
     isLinkMenuOpen:boolean;
     hideRelationMatch:Function;
     cancel:Function;
 
     saveRelation();
-    showMatch(arr1:Array<MatchBase>, arr2:Array<MatchBase>):boolean;
-    hasMatchesToShow(matchesObj:MatchBase, selectedMatch:Array<MatchBase>);
+    showMatch(arr1:Array<Match>, arr2:Array<Match>):boolean;
+    hasMatchesToShow(matchesObj:Match, selectedMatch:Array<Match>);
     updateSelectionText():void;
 
 }
@@ -58,7 +58,7 @@ export class RelationMenuDirective implements ng.IDirective {
 
         scope.saveRelation = ():void=> {
             let chosenMatches:Array<any> = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch);
-            let chosenMatch:MatchBase = chosenMatches[0];
+            let chosenMatch:Match = chosenMatches[0];
             scope.createRelation()(chosenMatch);
         };
 
@@ -69,14 +69,14 @@ export class RelationMenuDirective implements ng.IDirective {
         };
 
         //to show options in link menu
-        scope.showMatch = (arr1:Array<MatchBase>, arr2:Array<MatchBase>):boolean => {
+        scope.showMatch = (arr1:Array<Match>, arr2:Array<Match>):boolean => {
             return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0;
         };
 
         //to show requirements/capabilities title
-        scope.hasMatchesToShow = (matchesObj:MatchBase, selectedMatch:Array<MatchBase>):boolean => {
+        scope.hasMatchesToShow = (matchesObj:Match, selectedMatch:Array<Match>):boolean => {
             let result:boolean = false;
-            _.forEach(matchesObj, (matchesArr:Array<MatchBase>) => {
+            _.forEach(matchesObj, (matchesArr:Array<Match>) => {
                 if (!result) {
                     result = scope.showMatch(matchesArr, selectedMatch);
                 }
diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html
deleted file mode 100644
index 60d3d63855..0000000000
--- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<nav class="top-nav">
-
-    <div class="asdc-app-title-wrapper">
-        <a class="asdc-app-title" translate="PROJECT_TITLE"></a>
-        <div class="asdc-version"> v.{{version}}</div>
-    </div>
-
-    <ul class="top-menu" data-ng-show="!menuModel">
-        <!-- no hierarchy & dropdowns mode -->
-        <li data-ng-repeat="item in topLvlMenu.menuItems"
-            data-ng-class="{'selected': $index == topLvlMenu.selectedIndex}">
-            <a data-ng-click="menuItemClick(topLvlMenu, item)"
-               data-tests-id="main-menu-button-{{item.text | lowercase}}">{{item.text}}</a>
-        </li>
-    </ul>
-
-    <ul class="top-menu" data-ng-show="menuModel">
-        <!-- with hierarchy & dropdowns mode -->
-        <li data-ng-repeat-start="groupItem in menuModel"
-            data-ng-class="{'selected': $last }">
-            <a data-ng-click="menuItemClick(groupItem, groupItem.menuItems[groupItem.selectedIndex])"
-               data-tests-id="breadcrumbs-button-{{$index}}">
-                {{groupItem.menuItems[groupItem.selectedIndex].text}}
-            </a>
-        </li>
-        <li data-ng-repeat-end="" class="triangle-dropdown"
-            data-ng-class="{'item-click': groupItem.itemClick}" data-ng-mouseover="groupItem.itemClick = true">
-            <div class="triangle"><span class="sprite-new arrow-right"></span></div>
-            <perfect-scrollbar scroll-y-margin-offset="15" include-padding="true">
-                <ul>
-                    <li data-ng-repeat="ddItem in groupItem.menuItems"
-                        data-ng-click="menuItemClick(groupItem, ddItem)"
-                        data-ng-class="{'selected': $index == groupItem.selectedIndex, 'disabled': ddItem.isDisabled}"
-                        data-tests-id="sub-menu-button-{{ddItem.text | lowercase}}">
-                        <span sdc-smart-tooltip="">{{ddItem.text}}</span>
-                    </li>
-                </ul>
-            </perfect-scrollbar>
-        </li>
-    </ul>
-
-    <div class="top-search" data-ng-hide="hideSearch === true">
-        <input type="text"
-               class="search-text"
-               placeholder="Search"
-               data-ng-model="searchBind"
-               data-tests-id="main-menu-input-search"
-               ng-model-options="{ debounce: 500 }" />
-        <span class="w-sdc-search-icon magnification"></span>
-    </div>
-
-    <div class="notification-icon"  data-ng-disabled= "progress > 0" data-ng-class="{'disabled' : progress > 0}" data-ng-if="user.role === 'DESIGNER' && notificationIconCallback" data-ng-click="notificationIconCallback()" tooltips tooltip-side="left" tooltip-content="Vendor Software Product Repository" data-tests-id="repository-icon"></div>
-
-</nav>
diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.less b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less
deleted file mode 100644
index 13b4a525f4..0000000000
--- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.less
+++ /dev/null
@@ -1,218 +0,0 @@
-.top-nav {
-    position: fixed;
-    top: @header_height;
-    background-color: @main_color_p;
-    .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33));
-    width: 100%;
-    height: @top_nav_height;
-    line-height: @top_nav_height;
-    z-index: 10;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .asdc-app-title-wrapper {
-        flex-grow: 1;
-        line-height: 16px;
-        margin: 0 20px;
-
-        a.asdc-app-title {
-            .m_18_r;
-            text-decoration: none;
-        }
-
-        .asdc-version {
-            .m_12_r;
-            .opacity(0.8);
-            line-height: 14px;
-            flex-grow: 1;
-        }
-
-    }
-
-    ul.top-menu {
-        list-style-type: none;
-        margin: 0 0 0 20px;
-        padding: 0;
-        flex-grow: 999;
-
-        & > li {
-            float: left;
-            cursor: pointer;
-            line-height: 50px;
-            height: 50px;
-            padding: 0 20px;
-
-            &.selected {
-                border-bottom: solid 4px @main_color_a;
-
-                a {
-                    color: @func_color_s;
-                }
-            }
-
-            /*&:hover {
-                border-bottom: solid 4px @main_color_a;
-            }*/
-
-            a {
-                font-family: @font-opensans-medium;
-                color: @main_color_m;
-                font-size: 16px;
-                display: block;
-                text-align: center;
-                text-decoration: none;
-            }
-
-            &.triangle-dropdown {
-                padding: 0;
-                position: relative;
-
-                div.triangle {
-                    margin-top: 15px;
-                    border-radius: 2px;
-                    width: 17px;
-                    height: 18px;
-
-                    //temp use - until new triangle gets in
-                    line-height: 18px;
-                    text-align: center;
-                    font-size: 10px;
-
-                    &:hover {
-                        background-color: rgba(156, 156, 156, 0.2);
-
-                        span {
-                            .arrow-right-hover;
-                        }
-                    }
-                }
-
-                + li a {
-                    font-size: 16px;
-                }
-
-                .ps-container {
-                    .perfect-scrollbar;
-                    position: absolute;
-                    left: 0;
-                    top: 40px;
-                    z-index: 1;
-
-                    overflow: hidden;
-                    max-height: 0;
-                    -webkit-transition: max-height 200ms ease-in;
-                    -moz-transition: max-height 200ms ease-in;
-                    -o-transition: max-height 200ms ease-in;
-                    transition: max-height 200ms ease-in;
-
-                    div ul {
-
-                        padding: 0;
-                        background-color: white;
-
-                        li {
-
-                            height: 35px;
-                            background-color: white;
-                            font-size: 13px;
-                            width: 150px;
-                            line-height: 35px;
-                            padding: 0 10px;
-
-                            &.disabled {
-                                opacity: 1;
-                            }
-                            &.selected {
-                                background-color: @tlv_color_v;
-                                font-weight: bold;
-                            }
-                            &:hover {
-                                color: @main_color_a;
-                            }
-                            span {
-                                height: 35px;
-                                width: 130px;
-                                display: inline-block;
-                            }
-                        }
-                    }
-                }
-                &.item-click:hover .ps-container,
-                &.item-click:active .ps-container {
-                    max-height: 500px;
-                    border: 1px solid @func_color_b;
-                    border-radius: 2px;
-                    box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);
-
-                    div ul {
-
-                    }
-                }
-            }
-        }
-
-    }
-
-    .top-search {
-        position: relative;
-        flex-grow: 1;
-        padding: 0 20px;
-
-        input.search-text {
-            .border-radius(2px);
-            width: 245px;
-            height: 32px;
-            line-height: 32px;
-            border: 1px solid @main_color_o;
-            outline: none;
-            text-indent: 10px;
-
-            &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
-            &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
-            &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
-            &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
-            &:-ms-input-placeholder { font-style: italic; } /* Edge */
-             /*   font-style: italic;
-            }*/
-            /* Firefox 18- */
-            &::-moz-placeholder {
-                font-style: italic;
-            }
-            /* Firefox 19+ */
-            &:-ms-input-placeholder {
-                font-style: italic;
-            }
-            /* IE 10+ */
-            &:-ms-input-placeholder {
-                font-style: italic;
-            }
-            /* Edge */
-        }
-
-        .magnification {
-            position: absolute;
-            top: 19px;
-            right: 26px;
-        }
-
-    }
-
-    .notification-icon {
-        cursor: pointer;
-        flex-grow: 1;
-        margin: 0 10px 6px 0;
-        .sprite-new;
-        .vsp-list-icon;
-
-        &:hover {
-            .vsp-list-icon-hover;
-        }
-
-        &:active {
-            .vsp-list-icon-active;
-        }
-
-    }
-
-}
diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts
deleted file mode 100644
index 59e4d49647..0000000000
--- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts
+++ /dev/null
@@ -1,161 +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=========================================================
- */
-
-'use strict';
-import {IAppConfigurtaion, IHostedApplication, IUserProperties} from "app/models";
-import {IUserResourceClass} from "app/services";
-import {MenuItemGroup, MenuItem} from "app/utils";
-
-export interface ITopNavScope extends ng.IScope {
-    topLvlSelectedIndex:number;
-    hideSearch:boolean;
-    searchBind:any;
-    menuModel:Array<MenuItemGroup>;
-
-    topLvlMenu:MenuItemGroup;
-    goToState(state:string, params:Array<any>):ng.IPromise<boolean>;
-    menuItemClick:Function;
-    user:IUserProperties;
-    version:string;
-}
-
-
-export class TopNavDirective implements ng.IDirective {
-
-    constructor(private $filter:ng.IFilterService,
-                private $state:ng.ui.IStateService,
-                private $q:ng.IQService,
-                private userResourceService:IUserResourceClass,
-                private sdcConfig:IAppConfigurtaion) {
-    }
-
-    public replace = true;
-    public restrict = 'E';
-    public transclude = false;
-
-
-    scope = {
-        topLvlSelectedIndex: '@?',
-        hideSearch: '=',
-        searchBind: '=',
-        version: '@',
-        notificationIconCallback: '=',
-        menuModel: '=?',
-    };
-
-    template = ():string => {
-        return require('./top-nav.html');
-    };
-
-    public link = (scope:ITopNavScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
-
-        let getTopLvlSelectedIndexByState = ():number => {
-            if (!scope.topLvlMenu.menuItems) {
-                return 0;
-            }
-
-            let result = -1;
-
-            //set result to current state
-            scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> {
-                if (item.state === this.$state.current.name) {
-                    result = index;
-                }
-            });
-
-            //if it's a different state , checking previous state param
-            if (result === -1) {
-                scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> {
-                    if (item.state === this.$state.params['previousState']) {
-                        result = index;
-                    }
-                });
-            }
-
-            if (result === -1) {
-                result = 0;
-            }
-
-            return result;
-        };
-
-        scope.user = this.userResourceService.getLoggedinUser();
-
-        let tmpArray:Array<MenuItem> = [
-            new MenuItem(this.$filter('translate')("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null),
-            new MenuItem(this.$filter('translate')("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null)
-        ];
-
-        // Only designer can perform onboarding
-        if (scope.user && scope.user.role === 'DESIGNER') {
-            tmpArray.push(new MenuItem(this.$filter('translate')("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null));
-            _.each(this.sdcConfig.hostedApplications, (hostedApp:IHostedApplication)=> {
-                if (hostedApp.exists) {
-                    tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null));
-                }
-            });
-        }
-
-        scope.topLvlMenu = new MenuItemGroup(0, tmpArray, true);
-        scope.topLvlMenu.selectedIndex = isNaN(scope.topLvlSelectedIndex) ? getTopLvlSelectedIndexByState() : scope.topLvlSelectedIndex;
-
-        let generateMenu = () => {
-            if (scope.menuModel && scope.menuModel[0] !== scope.topLvlMenu) {
-                scope.menuModel.unshift(scope.topLvlMenu);
-            }
-        };
-        scope.$watch('menuModel', generateMenu);
-
-        generateMenu();
-
-        /////scope functions////
-
-        scope.goToState = (state:string, params:Array<any>):ng.IPromise<boolean> => {
-            let deferred = this.$q.defer();
-            this.$state.go(state, params && params.length > 0 ? [0] : undefined);
-            deferred.resolve(true);
-            return deferred.promise;
-        };
-
-        scope.menuItemClick = (itemGroup:MenuItemGroup, item:MenuItem) => {
-
-            itemGroup.itemClick = false;
-
-            let onSuccess = ():void => {
-                itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item);
-            };
-            let onFailed = ():void => {
-            };
-
-            if (item.callback) {
-                (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed);
-            } else {
-                scope[item.action](item.state, item.params).then(onSuccess, onFailed);
-            }
-        };
-    };
-
-    public static factory = ($filter:ng.IFilterService, $state:ng.ui.IStateService, $q:ng.IQService, userResourceService:IUserResourceClass, sdcConfig:IAppConfigurtaion)=> {
-        return new TopNavDirective($filter, $state, $q, userResourceService, sdcConfig);
-    };
-
-}
-
-TopNavDirective.factory.$inject = ['$filter', '$state', '$q', 'Sdc.Services.UserResourceService', 'sdcConfig'];
diff --git a/catalog-ui/src/app/directives/loader/loader-directive.ts b/catalog-ui/src/app/directives/loader/loader-directive.ts
index 36efc22079..7e056c774f 100644
--- a/catalog-ui/src/app/directives/loader/loader-directive.ts
+++ b/catalog-ui/src/app/directives/loader/loader-directive.ts
@@ -56,19 +56,14 @@ export class LoaderDirective implements ng.IDirective {
 
         let interval;
 
-        this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT, (loaderType)=> {
-            if (scope.loaderType !== loaderType) {
-                return;
-            }
-            scope.display = true;
-        });
-        this.EventListenerService.registerObserverCallback(EVENTS.HIDE_LOADER_EVENT, (loaderType)=> {
-            if (scope.loaderType !== loaderType) {
-                return;
-            }
-            scope.display = false;
-        });
-
+        if(scope.loaderType) {
+            this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT + scope.loaderType, (loaderType)=> {
+                scope.display = true;
+            });
+            this.EventListenerService.registerObserverCallback(EVENTS.HIDE_LOADER_EVENT + scope.loaderType, (loaderType)=> {
+                scope.display = false;
+            });
+        }
         let calculateSizesForFixPosition = (positionStyle:string):void => {
             // This is problematic, I do not want to change the parent position.
             // set the loader on all the screen
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
index b62824d544..a2c29c5398 100644
--- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
@@ -8,7 +8,7 @@
             <div tooltips tooltip-content="{{property.name}}">
                 <input class="i-sdc-form-input"
                        type="text"
-                       data-ng-disabled="true"
+                       readonly="readonly"
                        value="{{property.name}}"/>
             </div>
         </div>
@@ -48,7 +48,7 @@
                                data-tests-id="{{fieldsPrefixName+property.name}}"
                                ng-if="!((property.simpleType||property.type) == 'boolean')"
                                data-ng-maxlength="100"
-                               data-ng-disabled="readOnly"
+                               data-ng-readonly="readOnly"
                                maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}"
                                data-ng-model="valueObjRef[property.name]"
                                type="text"
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less
index 5c65fdc9dc..abca49d7a3 100644
--- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less
@@ -29,6 +29,10 @@
     .i-sdc-form-input:disabled{
              .disabled;
          }
+    .i-sdc-form-input:read-only{
+        opacity: 0.4;
+        cursor: auto;
+    }
 
     .property{
         display: flex;
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
index ec9aaf1f7f..dde4e8f32e 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -12,7 +12,7 @@
                    data-ng-pattern="MapKeyValidationPattern"
                    data-ng-model-options="{ debounce: 200 }"
                    data-ng-change="changeKeyOfMap(mapKeys[$index], $index,'mapKey'+fieldsPrefixName+$index);$event.stopPropagation();"
-                   data-ng-disabled="readOnly"
+                   data-ng-readonly="readOnly"
                    data-required
                    autofocus/>
             <div class="input-error" data-ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$dirty && parentFormObj['mapKey'+fieldsPrefixName+$index].$invalid">
@@ -26,7 +26,7 @@
             <label class="i-sdc-form-label required">Value</label>
             <input class="i-sdc-form-input"
                    ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
-                   data-ng-disabled="readOnly"
+                   data-ng-readonly="readOnly"
                    data-ng-model="valueObjRef[mapKeys[$index]]"
                    type="text"
                    name="mapValue{{fieldsPrefixName}}{{$index}}"
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
index 2480b626f2..6dc481dd26 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
@@ -79,5 +79,10 @@
         &>.data-type-fields-structure{
             padding: 0;
         }
+
+        .i-sdc-form-input:read-only{
+            opacity: 0.4;
+            cursor: auto;
+        }
     }
 }
diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less
index 43d2d646a1..290a6468cb 100644
--- a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less
+++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less
@@ -45,9 +45,13 @@
         margin-left: 22px;
     }
 
-    .i-sdc-form-input:disabled{
-        .disabled;
-        &[type="text"]{
+    .i-sdc-form-input{
+        &:disabled{
+            .disabled;
+        }
+    }
+    .property-name{
+        .i-sdc-form-input:read-only{
             opacity: 1 !important;
             background-color: @tlv_color_t;
             color:black;
diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
index eadca96bfa..1367906e21 100644
--- a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
+++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
@@ -19,21 +19,17 @@
  */
 
 'use strict';
-import {User, IUser, IAppConfigurtaion} from "app/models";
-import {IUserResourceClass, IUserResource} from "app/services";
+import {User, IUser, IAppConfigurtaion, IUserProperties} from "app/models";
+import { UserService } from "../../ng2/services/user.service";
 export interface IUserHeaderDetailsScope extends ng.IScope {
-    name:string;
-    role:string;
     iconUrl:string;
-    UserResourceClass:IUserResourceClass;
     user:IUser;
-    sdcConfig:IAppConfigurtaion;
     initUser:Function;
 }
 
 export class UserHeaderDetailsDirective implements ng.IDirective {
 
-    constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private UserResourceClass:IUserResourceClass) {
+    constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService) {
     }
 
     scope = {
@@ -50,23 +46,23 @@ export class UserHeaderDetailsDirective implements ng.IDirective {
 
         scope.initUser = ():void => {
             let defaultUserId:string;
-            let user:IUserResource = this.UserResourceClass.getLoggedinUser();
-            if (!user) {
+            let userInfo:IUserProperties = this.userService.getLoggedinUser();
+            if (!userInfo) {
                 defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix];
-                user = this.UserResourceClass.get({id: defaultUserId}, ():void => {
-                    scope.user = new User(user);
+                this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => {
+                    scope.user = new User(defaultUserInfo);
                 });
             } else {
-                scope.user = new User(user);
+                scope.user = new User(userInfo);
             }
         };
         scope.initUser();
     };
 
-    public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, UserResourceClass:IUserResourceClass)=> {
-        return new UserHeaderDetailsDirective($http, sdcConfig, UserResourceClass);
+    public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService)=> {
+        return new UserHeaderDetailsDirective($http, sdcConfig, userService);
     };
 
 }
 
-UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService'];
+UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2'];