[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

134 files changed, 10555 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less b/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less
new file mode 100644
index 0000000000..0860261b97
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less
@@ -0,0 +1,113 @@
+.i-sdc-designer-sidebar-capabilities-requirements {
+
+        .b_7;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &.description {
+            margin-top: 28px;
+            white-space: normal;
+            word-wrap: break-word;
+        }
+
+    .i-sdc-designer-sidebar-section-content-item-relations {
+        border-bottom: 1px solid @color_e;
+        padding: 10px 10px 10px 18px;
+        position: relative;
+        cursor: default;
+
+        .i-sdc-designer-sidebar-section-content-item-button {
+            top: 15px;
+            line-height: 10px;
+        }
+
+        &:hover {
+            background-color: @color_c;
+
+            .i-sdc-designer-sidebar-section-content-item-button {
+                display: block;
+
+            }
+        }
+    }
+
+    .w-sdc-designer-sidebar-section-relations:not(:last-child) .i-sdc-designer-sidebar-section-content-item-relations-group:last-child .i-sdc-designer-sidebar-section-content-item-relations:last-child {
+        border-bottom: none;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations.hand {
+        .hand;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-group {
+        //border-bottom: 1px solid @color_e;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details {
+        display: inline-block;
+        margin-left: 5px;
+        vertical-align: middle;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details-name {
+        .b_1;
+        .bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        //width: 100%;
+        text-transform: capitalize;
+        max-width: 240px;
+        display: inline-block;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details-ownerName {
+        .b_13;
+        font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:before {
+            .sprite;
+            .arrow-left;
+            content: '';
+        }
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details-desc {
+        .p_1;
+        line-height: 14px;
+        word-wrap: break-word;
+        white-space: normal;
+        max-width: 265px;
+
+        .i-sdc-designer-sidebar-section-content-item-relations-details-indent-box {
+            border-left: 1px #848586 solid;
+            height: 40px;
+            margin-left: 2px;
+            margin-top: 5px;
+            border-bottom: 1px #848586 solid;
+            width: 25px;
+            float: left;
+        }
+        .i-sdc-designer-sidebar-section-content-item-relations-details-child {
+            margin-top: 30px;
+            float: left;
+            padding-left: 10px;
+            max-width: 230px;
+        }
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details-desc-label {
+        font-family: omnes-medium, sans-serif;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-view {
+        position: absolute;
+        right: 0;
+        top: 22px;
+        display: none;
+    }
+}
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts
new file mode 100644
index 0000000000..e71478fa4d
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts
@@ -0,0 +1,40 @@
+/**
+ * Created by ob0695 on 5/9/2017.
+ */
+/**
+ * Created by obarda on 1/8/2017.
+ */
+'use strict';
+import {CapabilitiesGroup} from "app/models";
+
+export interface ICapabilitiesListScope extends ng.IScope {
+    capabilities:CapabilitiesGroup;
+}
+
+
+export class CapabilitiesListDirective implements ng.IDirective {
+
+    constructor() {
+
+    }
+
+    scope = {
+        capabilities: '=',
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./capabilities-list-view.html');
+    };
+
+    link = (scope:ICapabilitiesListScope, element:any, $attr:any) => {
+
+    };
+
+    public static factory = ()=> {
+        return new CapabilitiesListDirective();
+    };
+}
+
+CapabilitiesListDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html
new file mode 100644
index 0000000000..c86a6df785
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html
@@ -0,0 +1,14 @@
+<div class="i-sdc-designer-sidebar-capabilities-requirements">
+    <div class="i-sdc-designer-sidebar-section-content-item-relations-group">
+        <div class="i-sdc-designer-sidebar-section-content-item-relations"
+             data-ng-repeat="capability in capabilities track by $index">
+            <div class="i-sdc-designer-sidebar-section-content-item-relations-details">
+                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{capability.name}}&nbsp;</div>
+                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc" sdc-smart-tooltip>
+                    {{capability.type}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
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
new file mode 100644
index 0000000000..9863b5d271
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts
@@ -0,0 +1,71 @@
+/**
+ * Created by ob0695 on 5/9/2017.
+ */
+/**
+ * Created by ob0695 on 5/9/2017.
+ */
+/**
+ * Created by obarda on 1/8/2017.
+ */
+'use strict';
+import {RequirementsGroup, Component} from "app/models";
+
+export interface IRequirementsListScope extends ng.IScope {
+
+    requirements:RequirementsGroup;
+    currentComponent: Component;
+}
+
+
+export class RequirementsListDirective implements ng.IDirective {
+
+    constructor(private $filter: ng.IFilterService) {
+
+    }
+
+    scope = {
+        requirements: '=',
+        component: '='
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./requirements-list-view.html');
+    };
+
+    link = (scope:IRequirementsListScope) => {
+
+        scope.isInstanceSelected = () : boolean => {
+            return  scope.component && scope.component.selectedInstance != undefined && scope.component.selectedInstance != null;
+        }
+
+        scope.getRelation = (requirement:any):any => {
+            if (scope.isInstanceSelected() && scope.component.componentInstancesRelations) {
+                let relationItem = _.filter(scope.component.componentInstancesRelations, (relation:any) => {
+                    return relation.fromNode === scope.component.selectedInstance.uniqueId &&
+                        _.some(relation.relationships, {
+                            'requirement': requirement.name,
+                            'requirementOwnerId': requirement.ownerId
+                        });
+                });
+
+                if (relationItem && relationItem.length) {
+                    return {
+                        type: requirement.relationship.split('.').pop(),
+                        requirementName: this.$filter('resourceName')(scope.component.componentInstances[_.map
+                        (scope.component.componentInstances, "uniqueId").indexOf(relationItem[0].toNode)].name)
+                    };
+                }
+            }
+            return null;
+        };
+
+    };
+
+    public static factory = ($filter: ng.IFilterService)=> {
+        return new RequirementsListDirective($filter);
+    };
+}
+
+RequirementsListDirective.factory.$inject = ['$filter'];
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html
new file mode 100644
index 0000000000..a6487fe72a
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html
@@ -0,0 +1,19 @@
+<div class="i-sdc-designer-sidebar-capabilities-requirements">
+    <div class="i-sdc-designer-sidebar-section-content-item-relations-group">
+        <div class="i-sdc-designer-sidebar-section-content-item-relations"
+             data-ng-repeat="requirement in requirements track by $index">
+            <div class="i-sdc-designer-sidebar-section-content-item-relations-details">
+                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{requirement.name}}&nbsp;</div>
+                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{requirement.node}}
+                    <div data-ng-if="getRelation(requirement) != null">
+                        <div class="i-sdc-designer-sidebar-section-content-item-relations-details-indent-box"></div>
+                        <div class="i-sdc-designer-sidebar-section-content-item-relations-details-child">
+                            <span class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{getRelation(requirement).type}} <br/></span>
+                            <span class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{getRelation(requirement).requirementName}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts
new file mode 100644
index 0000000000..009e104740
--- /dev/null
+++ b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts
@@ -0,0 +1,110 @@
+class ClickedOutsideModel {
+
+    private clickedOutsideContainerSelector:string;
+    private onClickedOutsideGetter:Function;
+    private clickedOutsideEnableGetter:Function;
+
+    constructor(clickedOutsideData:any) {
+        this.clickedOutsideContainerSelector = clickedOutsideData.clickedOutsideContainerSelector;
+        this.onClickedOutsideGetter = clickedOutsideData.onClickedOutsideGetter;
+        this.clickedOutsideEnableGetter = clickedOutsideData.clickedOutsideEnableGetter;
+    }
+
+    public getClickedOutsideContainerSelector = ():string => {
+        return this.clickedOutsideContainerSelector;
+    }
+
+    public getOnClickedOutsideGetter = ():Function => {
+        return this.onClickedOutsideGetter;
+    }
+
+    public getClickedOutsideEnableGetter = ():Function => {
+        return this.clickedOutsideEnableGetter;
+    }
+}
+
+export interface IClickedOutsideDirectiveScope extends ng.IScope {
+}
+
+export class ClickedOutsideDirective implements ng.IDirective {
+
+    constructor(private $document:JQuery, private $parse:ng.IParseService) {
+    }
+
+    restrict = 'A';
+
+    link = (scope:IClickedOutsideDirectiveScope, element:JQuery, attrs) => {
+
+        let container:HTMLElement;
+        let attrsAfterEval = scope.$eval(attrs.clickedOutside);
+        attrsAfterEval.onClickedOutsideGetter = this.$parse(attrsAfterEval.onClickedOutside);
+        attrsAfterEval.clickedOutsideEnableGetter = this.$parse(attrsAfterEval.clickedOutsideEnable);
+
+        let clickedOutsideModel:ClickedOutsideModel = new ClickedOutsideModel(attrsAfterEval);
+
+
+        let getContainer:Function = ():HTMLElement => {
+            if (!container) {
+                let clickedOutsideContainerSelector:string = clickedOutsideModel.getClickedOutsideContainerSelector();
+                if (!angular.isUndefined(clickedOutsideContainerSelector) && clickedOutsideContainerSelector !== '') {
+                    container = element.parents(clickedOutsideContainerSelector + ':first')[0];
+                    if (!container) {
+                        container = element[0];
+                    }
+                } else {
+                    container = element[0];
+                }
+            }
+            return container;
+        };
+
+
+        let onClickedOutside = (event:JQueryEventObject) => {
+            let containerDomElement:HTMLElement = getContainer();
+            let targetDomElementJq:JQuery = angular.element(event.target);
+            if (targetDomElementJq.hasClass('tooltip') || targetDomElementJq.parents('.tooltip:first').length) {
+                return;
+            }
+            let targetDomElement:HTMLElement = targetDomElementJq[0];
+            if (!containerDomElement.contains(targetDomElement)) {
+                scope.$apply(() => {
+                    let onClickedOutsideGetter:Function = clickedOutsideModel.getOnClickedOutsideGetter();
+                    onClickedOutsideGetter(scope);
+                });
+            }
+        };
+
+        let attachDomEvents:Function = () => {
+            this.$document.on('mousedown', onClickedOutside);
+        };
+
+        let detachDomEvents:Function = () => {
+            this.$document.off('mousedown', onClickedOutside);
+        };
+
+        //
+        scope.$on('$destroy', () => {
+            detachDomEvents();
+        });
+
+
+        scope.$watch(() => {
+            let clickedOutsideEnableGetter:Function = clickedOutsideModel.getClickedOutsideEnableGetter();
+            return clickedOutsideEnableGetter(scope);
+        }, (newValue:boolean) => {
+            if (newValue) {
+                attachDomEvents();
+                return;
+            }
+            detachDomEvents();
+        });
+
+
+    }
+
+    public static factory = ($document:JQuery, $parse:ng.IParseService) => {
+        return new ClickedOutsideDirective($document, $parse);
+    }
+}
+
+ClickedOutsideDirective.factory.$inject = ['$document', '$parse'];
diff --git a/catalog-ui/src/app/directives/custom-validation/custom-validation.ts b/catalog-ui/src/app/directives/custom-validation/custom-validation.ts
new file mode 100644
index 0000000000..e35a747e1b
--- /dev/null
+++ b/catalog-ui/src/app/directives/custom-validation/custom-validation.ts
@@ -0,0 +1,32 @@
+'use strict';
+export interface ICustomValidationScope extends ng.IScope {
+    validationFunc:Function;
+}
+
+export class CustomValidationDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    require = 'ngModel';
+    restrict = 'A';
+
+    scope = {
+        validationFunc: '='
+    };
+
+    link = (scope:ICustomValidationScope, elem, attrs, ngModel) => {
+
+        ngModel.$validators.customValidation = (modelValue, viewValue):boolean => {
+            return scope.validationFunc(viewValue);
+        };
+
+    };
+
+    public static factory = ()=> {
+        return new CustomValidationDirective();
+    };
+
+}
+
+CustomValidationDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/download-artifact/download-artifact.ts b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts
new file mode 100644
index 0000000000..7c817935cf
--- /dev/null
+++ b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts
@@ -0,0 +1,125 @@
+'use strict';
+import {IFileDownload, Component, ArtifactModel} from "app/models";
+import {EventListenerService, CacheService} from "app/services";
+import {EVENTS, FileUtils} from "app/utils";
+
+export class DOWNLOAD_CSS_CLASSES {
+    static DOWNLOAD_ICON = "table-download-btn tosca";
+    static LOADER_ICON = "tlv-loader small loader";
+}
+
+export interface IDownloadArtifactScope extends ng.IScope {
+    $window:any;
+    artifact:ArtifactModel;
+    component:Component;
+    instance:boolean;
+    download:Function;
+    showLoader:boolean;
+    downloadIconClass:string;
+    updateDownloadIcon:Function;
+}
+
+export class DownloadArtifactDirective implements ng.IDirective {
+
+    constructor(private $window:any, private cacheService:CacheService, private EventListenerService:EventListenerService, private fileUtils:FileUtils) {
+    }
+
+    scope = {
+        artifact: '=',
+        component: '=',
+        instance: '=',
+        showLoader: '=',
+        downloadIconClass: '@'
+    };
+    restrict = 'EA';
+
+    link = (scope:IDownloadArtifactScope, element:any) => {
+        scope.$window = this.$window;
+
+        element.on("click", function () {
+            scope.download(scope.artifact);
+        });
+
+
+        let initDownloadLoader = ()=> {
+            //if the artifact is in a middle of download progress register form callBack & change icon from download to loader
+            if (scope.showLoader && this.cacheService.get(scope.artifact.uniqueId)) {
+                this.EventListenerService.registerObserverCallback(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + scope.artifact.uniqueId, scope.updateDownloadIcon);
+                window.setTimeout(():void => {
+                    if (this.cacheService.get(scope.artifact.uniqueId)) {
+                        element[0].className = DOWNLOAD_CSS_CLASSES.LOADER_ICON;
+                    }
+                }, 1000);
+
+            }
+        };
+
+        let setDownloadedFileLoader = ()=> {
+            if (scope.showLoader) {
+                //set in cache service thet the artifact is in download progress
+                this.cacheService.set(scope.artifact.uniqueId, true);
+                initDownloadLoader();
+            }
+        };
+
+        let removeDownloadedFileLoader = ()=> {
+            if (scope.showLoader) {
+                this.cacheService.set(scope.artifact.uniqueId, false);
+                this.EventListenerService.notifyObservers(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + scope.artifact.uniqueId);
+            }
+        };
+
+
+        //replace the loader to download icon
+        scope.updateDownloadIcon = () => {
+            element[0].className = scope.downloadIconClass || DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+        };
+
+
+        initDownloadLoader();
+
+        scope.download = (artifact:ArtifactModel):void => {
+
+            let onFaild = (response):void => {
+                console.info('onFaild', response);
+                removeDownloadedFileLoader();
+            };
+
+            let onSuccess = (data:IFileDownload):void => {
+                downloadFile(data);
+                removeDownloadedFileLoader();
+            };
+
+            setDownloadedFileLoader();
+
+            if (scope.instance) {
+                scope.component.downloadInstanceArtifact(artifact.uniqueId).then(onSuccess, onFaild);
+            } else {
+                scope.component.downloadArtifact(artifact.uniqueId).then(onSuccess, onFaild);
+            }
+        };
+
+        let downloadFile = (file:IFileDownload):void => {
+            if (file) {
+                let blob = this.fileUtils.base64toBlob(file.base64Contents, '');
+                let fileName = file.artifactName;
+                this.fileUtils.downloadFile(blob, fileName);
+            }
+        };
+
+        element.on('$destroy', ()=> {
+            //remove listener of download event
+            if (scope.artifact && scope.artifact.uniqueId) {
+                this.EventListenerService.unRegisterObserver(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + scope.artifact.uniqueId);
+            }
+        });
+
+    };
+
+    public static factory = ($window:any, cacheService:CacheService, EventListenerService:EventListenerService, fileUtils:FileUtils)=> {
+        return new DownloadArtifactDirective($window, cacheService, EventListenerService, fileUtils);
+    };
+
+}
+
+DownloadArtifactDirective.factory.$inject = ['$window', 'Sdc.Services.CacheService', 'EventListenerService', 'FileUtils'];
diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html
new file mode 100644
index 0000000000..a50731443d
--- /dev/null
+++ b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html
@@ -0,0 +1,8 @@
+<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
new file mode 100644
index 0000000000..4c54a11fec
--- /dev/null
+++ b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less
@@ -0,0 +1,47 @@
+
+.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
new file mode 100644
index 0000000000..f104926fc6
--- /dev/null
+++ b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts
@@ -0,0 +1,33 @@
+'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.html b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.html
new file mode 100644
index 0000000000..67799420f4
--- /dev/null
+++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.html
@@ -0,0 +1,73 @@
+<div class="sdc-ecomp-header-wrapper">
+
+    <div class="sdc-ecomp-header">
+
+        <div class="sdc-ecomp-logo-wrapper">
+            <a class="sdc-ecomp-header-title" data-ng-if="clickableLogo==='true'" data-ui-sref="dashboard" translate="PROJECT_TITLE"><span class="sdc-ecomp-logo"></span></a>
+            <a class="sdc-ecomp-header-title" data-ng-if="clickableLogo==='false'"><span class="sdc-ecomp-logo"  translate="PROJECT_TITLE"></span></a>
+            <div class="sdc-ecomp-header-version"> v.{{version}}</div>
+        </div>
+
+        <div class="sdc-ecomp-menu">
+
+            <!-- Top level menu -->
+            <ul class="sdc-ecomp-menu-top-level">
+                <li class="sdc-ecomp-menu-top-level-item"
+                    ng-repeat="item in megaMenuDataObject"
+                    data-ng-if="item.children && item.children.length>0"
+                    >
+                    <span class="selected" data-ng-if="item.menuId === selectedTopMenu.menuId"></span>
+                    <a href data-ng-click="firstMenuLevelClick(item.menuId)">{{item.text}}</a>
+
+                    <!-- Second level menu -->
+                    <div class="sdc-ecomp-menu-second-level" data-ng-if="item.menuId === selectedTopMenu.menuId" data-ng-mouseleave="subMenuLeaveAction(item.menuId)">
+                        <ul>
+                            <li class="sdc-ecomp-menu-second-level-item"
+                                ng-repeat="subItem in selectedTopMenu.children | orderBy : 'column'"
+                                aria-label="{{subItem.text}}"
+                                data-ng-class="{'sdc-ecomp-menu-item-hover': menuItemHover===true}"
+                                ng-mouseover="subMenuEnterAction(subItem.menuId)"
+                                ng-mouseenter="menuItemHover=true"
+                                ng-mouseleave="menuItemHover=false">
+
+                                <!--<i ng-if="subItem.text=='Favorites'" id="favorite-star" class="icon-star favorites-icon-active"></i>-->
+
+                                <a href title="{{subItem.text}}" data-ng-click="memuItemClick(subItem)">{{subItem.text}}</a>
+
+                                <!-- Third and Four menu panel -->
+                                <ul class="sdc-ecomp-menu-third-level" data-ng-if="subItem.menuId === selectedSubMenu.menuId && (selectedSubMenu.children && selectedSubMenu.children.length>0)">
+                                    <li class="sdc-ecomp-menu-third-level-item"
+                                        ng-repeat="thirdItem in selectedSubMenu.children | orderBy : 'column'"
+                                        aria-label="{{thirdItem.text}}">
+                                        <a class="sdc-ecomp-menu-third-level-title" href title="{{thirdItem.text}}" data-ng-click="memuItemClick(thirdItem)">{{thirdItem.text}}</a>
+                                        <span class="sdc-ecomp-menu-four-level-seperator"></span>
+                                        <ul class="sdc-ecomp-menu-four-level">
+                                            <li class="sdc-ecomp-menu-four-level-item" data-ng-repeat="fourItem in thirdItem.children | orderBy : 'column'">
+                                                <a href title="{{fourItem.text}}" data-ng-click="memuItemClick(fourItem)">{{fourItem.text}}</a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+
+                            </li>
+                        </ul>
+                    </div>
+
+                </li>
+
+            </ul>
+
+        </div>
+        <div class="sdc-ecomp-user-wrapper">
+            <span class="sdc-ecomp-user-icon"></span>
+            <div class="sdc-ecomp-user-details">
+                <div class="sdc-ecomp-user-details-name-role">
+                    <div sdc-smart-tooltip class="sdc-ecomp-user-details-name" data-ng-bind="user.getName()"></div>
+                    <div class="sdc-ecomp-user-details-role" data-ng-bind="user.getRoleToView()"></div>
+                </div>
+                <div class="sdc-ecomp-user-details-last-login" data-ng-show="user.getLastLogin()!==''">Last Login: {{user.getLastLogin() | date: 'MMM dd &nbsp; hh:mm a' : 'UTC'}}&nbsp;UTC</div>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.less b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.less
new file mode 100644
index 0000000000..8fa80c4237
--- /dev/null
+++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.less
@@ -0,0 +1,296 @@
+@first-level-color: #067ab4;
+@second-level-color: #f8f8f8;
+
+@first-level-height: 60px;
+@second-level-height: 60px;
+@third-four-level-height: 370px;
+
+@max-item-width: 250px;
+
+.sdc-ecomp-header-wrapper {
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 999;
+
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+
+    .sdc-ecomp-header {
+
+        background-color: @first-level-color;
+        height: @first-level-height;
+        line-height: @first-level-height;
+        vertical-align: middle;
+        display: flex;
+        flex-direction: row;
+        padding: 0 20px;
+
+        .sdc-ecomp-menu {
+            flex-grow: 98;
+        }
+
+    }
+
+    /* LEVEL 1 */
+    .sdc-ecomp-menu-top-level {
+        list-style: none;
+
+        .sdc-ecomp-menu-top-level-item:first-child {
+            margin-left: 0;
+        }
+
+        .sdc-ecomp-menu-top-level-item {
+             display: inline-block;
+             margin: 0 20px;
+             position: relative;
+             a {
+                 .p_14_m;
+                 text-decoration: none;
+             }
+
+            span {
+                &.selected {
+                    position: absolute;
+                    bottom: 0;
+                    width: 0;
+                    height: 0;
+                    border-left: 15px solid transparent;
+                    border-right: 15px solid transparent;
+                    border-bottom: 15px solid @second-level-color;
+                }
+            }
+         }
+    }
+
+    /* LEVEL 2 */
+    .sdc-ecomp-menu-second-level {
+        background-color: @second-level-color;
+        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.33);
+        height: @second-level-height;
+        list-style: none;
+        line-height: @second-level-height;
+        vertical-align: middle;
+        display: flex;
+        flex-direction: row;
+        padding: 0 20px;
+        position: fixed;
+        left: 0;
+        right: 0;
+
+        .sdc-ecomp-menu-second-level-item:first-child {
+            margin-left: 0;
+        }
+
+        .sdc-ecomp-menu-second-level-item {
+            display: inline-block;
+            height: @second-level-height;
+            line-height: @second-level-height;
+
+            &.sdc-ecomp-menu-item-hover {
+                border-bottom: 4px solid #067ab4;
+            }
+
+            a {
+                .m_14_r;
+                text-decoration: none;
+                text-align:center;
+                padding: 0 20px;
+                display: block;
+
+                &:hover {
+                    .s_14_r;
+                    font-weight:bold;
+                }
+
+                &:active {
+                    font-weight: bold;
+                }
+
+                /* fix jump when hovering text */
+                &:after {
+                    display:block;
+                    content:attr(title);
+                    font-weight:bold;
+                    height:1px;
+                    color:transparent;
+                    overflow:hidden;
+                    visibility:hidden;
+                }
+            }
+
+        }
+
+    }
+
+    /* LEVEL 3 */
+    ul.sdc-ecomp-menu-third-level {
+        background-color:  #ffffff;
+        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+        min-height: @third-four-level-height;
+        list-style: none;
+
+        display: flex;
+        flex-direction: row;
+        /*flex-wrap: wrap;*/
+        position: fixed;
+        top: @first-level-height + @second-level-height;
+        left: 0;
+        right: 0;
+        padding: 0 40px;
+
+        li.sdc-ecomp-menu-third-level-item {
+            height: 40px;
+            line-height: 40px;
+            position: relative;
+            /*width: @max-item-width;*/
+            max-width: @max-item-width;
+
+            .sdc-ecomp-menu-third-level-title {
+                .m_14_m;
+                text-decoration: none;
+                text-align: left;
+                display: block;
+                padding: 0 20px;
+                line-height: 20px;
+                margin-top: 20px;
+                font-weight: bold;
+                cursor: pointer;
+            }
+
+            .sdc-ecomp-menu-four-level-seperator {
+                position: absolute;
+                border-right: solid 1px #e5e5e5;
+                height: @third-four-level-height - 20;
+                top: 10px;
+            }
+        }
+
+        li.sdc-ecomp-menu-third-level-item:first-child {
+            .sdc-ecomp-menu-four-level-seperator {
+                border: none;
+            }
+        }
+    }
+
+    /* LEVEL 4 */
+    ul.sdc-ecomp-menu-four-level {
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+
+        li.sdc-ecomp-menu-four-level-item {
+            display: block;
+            /*width: @max-item-width;*/
+            max-width: @max-item-width;
+            line-height: 20px;
+
+            a {
+                .m_14_r;
+                text-decoration: none;
+                text-align: left;
+                display: block;
+
+                &:hover {
+                    .s_14_r;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+
+}
+
+.sdc-ecomp-logo-wrapper {
+    flex-grow: 1;
+    .p_18_m;
+    white-space: nowrap;
+    min-width: 210px;
+    text-align: left;
+    position: relative;
+
+    .sdc-ecomp-logo {
+        background-image: url("/assets/styles/images/att_logo_white.png");
+        background-repeat: no-repeat;
+        display: inline-block;
+        vertical-align: middle;
+        width: 55px;
+        height: 55px;
+    }
+
+    .sdc-ecomp-header-version {
+        .c_16;
+        .opacity(0.8);
+        position: absolute;
+        top: 34px;
+        line-height: 20px;
+        left: 56px;
+    }
+
+    a.sdc-ecomp-header-title {
+        .p_24;
+        text-decoration: none;
+    }
+}
+
+
+.sdc-ecomp-user-wrapper {
+
+    flex-grow: 1;
+    .p_14_m;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: @first-level-height;
+
+    .sdc-ecomp-user-icon {
+        margin-right: 20px;
+        .tlv-sprite;
+        .tlv-sprite.user;
+    }
+
+    .sdc-ecomp-user-details {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .sdc-ecomp-user-details-name-role {
+        line-height: 20px;
+
+        .sdc-ecomp-user-details-name {
+            max-width: 160px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            vertical-align: bottom;
+
+            .bold;
+            display: inline-block;
+        }
+
+        .sdc-ecomp-user-details-role {
+            .bold;
+            display: inline-block;
+            margin-left: 6px;
+
+            &:before {
+                content: '';
+                margin-right: 8px;
+                border-left: 1px solid @color_m;
+            }
+        }
+    }
+
+    .sdc-ecomp-user-details-last-login {
+        .font-type._3;
+        display: block;
+        line-height: 20px;
+        height: 20px;
+    }
+
+}
diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
new file mode 100644
index 0000000000..ba96e80484
--- /dev/null
+++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
@@ -0,0 +1,217 @@
+'use strict';
+import {IAppConfigurtaion, User, IUser} from "app/models";
+import {IUserResourceClass, IUserResource} from "app/services";
+
+export class MenuItem {
+    menuId:number;
+    column:number;
+    text:string;
+    parentMenuId:number;
+    url:string;
+    children:Array<MenuItem>
+}
+
+export interface IEcompHeaderDirectiveScope extends ng.IScope {
+    menuData:Array<MenuItem>;
+    version:string;
+    clickableLogo:string;
+    contactUsUrl:string;
+    getAccessUrl:string;
+    megaMenuDataObjectTemp:Array<any>;
+    megaMenuDataObject:Array<any>;
+
+    selectedTopMenu:MenuItem;
+    selectedSubMenu:MenuItem;
+
+    firstMenuLevelClick:Function;
+    subMenuEnterAction:Function;
+    subMenuLeaveAction:Function;
+
+    memuItemClick:Function;
+    user:IUser;
+}
+
+export class EcompHeaderDirective implements ng.IDirective {
+
+    constructor(private $http:ng.IHttpService,
+                private sdcConfig:IAppConfigurtaion,
+                private UserResourceClass:IUserResourceClass) {
+
+    }
+
+    scope = {
+        menuData: '=',
+        version: '@',
+        clickableLogo: '@?'
+    };
+
+    public replace = true;
+    public restrict = 'E';
+    public controller = EcompHeaderController;
+
+    template = ():string => {
+        return 'src/app/directives/ecomp-header/ecomp-header.html';
+    };
+
+    link = ($scope:IEcompHeaderDirectiveScope, $elem:JQuery, attr:any) => {
+
+        if (!$scope.clickableLogo) {
+            $scope.clickableLogo = "true";
+        }
+
+        let findMenuItemById = (menuId):MenuItem => {
+            let selectedMenuItem:MenuItem = _.find($scope.menuData, (item:MenuItem)=> {
+                if (item.menuId === menuId) {
+                    return item;
+                }
+            });
+            return selectedMenuItem;
+        };
+
+        let initUser = ():void => {
+            let defaultUserId:string;
+            let user:IUserResource = this.UserResourceClass.getLoggedinUser();
+            if (!user) {
+                defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix];
+                user = this.UserResourceClass.get({id: defaultUserId}, ():void => {
+                    $scope.user = new User(user);
+                });
+            } else {
+                $scope.user = new User(user);
+            }
+        };
+
+        $scope.firstMenuLevelClick = (menuId:number):void => {
+            let selectedMenuItem:MenuItem = _.find($scope.megaMenuDataObjectTemp, (item:MenuItem)=> {
+                if (item.menuId === menuId) {
+                    return item;
+                }
+            });
+            if (selectedMenuItem) {
+                $scope.selectedTopMenu = selectedMenuItem;
+                //console.log("Selected menu item: " + selectedMenuItem.text);
+            }
+        };
+
+        $scope.subMenuEnterAction = (menuId:number):void => {
+            $scope.selectedSubMenu = findMenuItemById(menuId);
+        };
+
+        $scope.subMenuLeaveAction = (menuId:number):void => {
+            $scope.selectedTopMenu = undefined;
+        };
+
+        $scope.memuItemClick = (menuItem:MenuItem):void => {
+            if (menuItem.url) {
+                window.location.href = menuItem.url;
+            } else {
+                console.log("Menu item: " + menuItem.text + " does not have defined URL!");
+            }
+        };
+
+        initUser();
+
+    };
+
+    public static factory = ($http:ng.IHttpService,
+                             sdcConfig:IAppConfigurtaion,
+                             UserResourceClass:IUserResourceClass)=> {
+        return new EcompHeaderDirective($http, sdcConfig, UserResourceClass);
+    };
+
+}
+
+export class EcompHeaderController {
+
+    messages:any;
+    getAttachId:Function;
+    render:any;
+    reRender:Function;
+    register:Function;
+    deregister:Function;
+    head:any;
+
+    static '$inject' = [
+        '$element',
+        '$scope',
+        '$attrs',
+        '$animate'
+    ];
+
+    constructor(private $element:JQuery,
+                private $scope:IEcompHeaderDirectiveScope,
+                private $attrs:ng.IAttributes,
+                private $animate:any) {
+
+        this.$scope = $scope;
+
+        this.$scope.$watch('menuData', (newVal, oldVal) => {
+            if (newVal) {
+                this.init();
+            }
+        });
+
+    }
+
+    init = ():void => {
+
+        this.$scope.contactUsUrl = "https://wiki.web.att.com/display/EcompPortal/ECOMP+Portal+Home";
+        this.$scope.getAccessUrl = "http://ecomp-tlv-dev2.uccentral.att.com:8080/ecompportal/get_access";
+
+        let unflatten = (array, parent?, tree?) => {
+            tree = typeof tree !== 'undefined' ? tree : [];
+            parent = typeof parent !== 'undefined' ? parent : {menuId: null};
+            let children = _.filter(array, function (child) {
+                return child["parentMenuId"] == parent.menuId;
+            });
+            if (!_.isEmpty(children)) {
+                if (parent.menuId === null) {
+                    tree = children;
+                } else {
+                    parent['children'] = children
+                }
+                _.each(children, function (child) {
+                    unflatten(array, child)
+                });
+            }
+            return tree;
+        };
+
+        let menuStructureConvert = (menuItems) => {
+            console.log(menuItems);
+            this.$scope.megaMenuDataObjectTemp = [
+                {
+                    menuId: 1001,
+                    text: "ECOMP",
+                    children: menuItems
+                },
+                {
+                    menuId: 1002,
+                    text: "Help",
+                    children: [
+                        {
+                            text: "Contact Us",
+                            url: this.$scope.contactUsUrl
+                        }]
+                }
+            ];
+
+            /*{
+             text:"Get Access",
+             url: this.$scope.getAccessUrl
+             }*/
+            return this.$scope.megaMenuDataObjectTemp;
+        };
+
+        let a = unflatten(this.$scope.menuData);
+        this.$scope.megaMenuDataObject = menuStructureConvert(a);
+        //console.log(this.$scope.megaMenuDataObject);
+    };
+}
+
+EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService'];
+
+
+
+
+
diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html b/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html
new file mode 100644
index 0000000000..d90c52d9a6
--- /dev/null
+++ b/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html
@@ -0,0 +1,31 @@
+<div>
+    <form name="popoverForm" class="w-sdc-form" data-tests-id="popover-form">
+        <span class="tlv-sprite tlv-x-btn close-popover-btn" data-tests-id="popover-x-button" ng-click="closePopover()"></span>
+        <div class="form-group">
+            <span class="popover-label" data-tests-id="popover-vfinstance-name" tooltips tooltip-content="{{module.vfInstanceName}}">{{module.vfInstanceName}}</span>
+            <div class="popover-input">
+                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(popoverForm.heatName)}">
+                    <input type="text"
+                           data-ng-model="module.heatName"
+                           data-ng-maxlength="50"
+                           maxlength="50"
+                           name="heatName"
+                           placeholder="Enter Name"
+                           autocomplete="off"
+                           data-ng-init="onInit()"
+                           data-ng-pattern="heatNameValidationPattern"
+                           data-tests-id="popover-heat-name"
+                           class="form-control"
+                    />
+                </div>
+                <div class="input-error" data-ng-show="validateField(popoverForm.heatName)">
+                    <span ng-show="popoverForm.heatName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+                    <span ng-show="popoverForm.heatName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                </div>
+            </div>
+            <span class="popover-label" data-tests-id="popover-module-name" tooltips tooltip-content="{{module.moduleName}}">{{module.moduleName}}</span>
+            <button class="tlv-btn grey popover-btn" data-tests-id="popover-close-button" data-ng-click="closePopover()">Cancel</button>
+            <button class="tlv-btn blue popover-btn" data-tests-id="popover-save-button" data-ng-class="{'disabled': (validateField(popoverForm.heatName) || popoverForm.heatName.$viewValue === originalName)}" data-ng-click="updateHeatName()">Save</button>
+        </div>
+    </form>
+</div>
diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts
new file mode 100644
index 0000000000..b99f11fcf9
--- /dev/null
+++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts
@@ -0,0 +1,77 @@
+'use strict';
+
+export interface IEditNamePopoverDirectiveScope extends ng.IScope {
+    isOpen:boolean;
+    templateUrl:string;
+    module:any;
+    direction:string;
+    header:string;
+    heatNameValidationPattern:RegExp;
+    originalName:string;
+    onSave:any;
+
+    closePopover(isCancel:boolean):void;
+    validateField(field:any, originalName:string):boolean;
+    updateHeatName(heatName:string):void;
+    onInit():void;
+}
+
+export class EditNamePopoverDirective implements ng.IDirective {
+
+    constructor(private ValidationPattern:RegExp,private $templateCache:ng.ITemplateCacheService) {
+    }
+
+    scope = {
+        direction: "@?",
+        module: "=",
+        header: "@?",
+        onSave: "&"
+    };
+
+    link = (scope:IEditNamePopoverDirectiveScope) => {
+        if (!scope.direction) {
+            scope.direction = 'top';
+        }
+
+        scope.originalName = '';
+        this.$templateCache.put("edit-module-name-popover.html", require('./edit-module-name-popover.html'));
+        scope.templateUrl = "edit-module-name-popover.html";
+        scope.isOpen = false;
+
+        scope.closePopover = (isCancel:boolean = true) => {
+            scope.isOpen = !scope.isOpen;
+
+            if (isCancel) {
+                scope.module.heatName = scope.originalName;
+            }
+        };
+
+        scope.onInit = () => {
+            scope.originalName = scope.module.heatName;
+        };
+
+        scope.validateField = (field:any):boolean => {
+            return !!(field && field.$dirty && field.$invalid);
+        };
+
+        scope.heatNameValidationPattern = this.ValidationPattern;
+
+        scope.updateHeatName = () => {
+            scope.closePopover(false);
+            scope.onSave();
+        }
+
+    };
+
+    replace = true;
+    restrict = 'E';
+    template = ():string => {
+        return require('./edit-name-popover-view.html');
+    };
+
+    public static factory = (ValidationPattern:RegExp,$templateCache:ng.ITemplateCacheService)=> {
+        return new EditNamePopoverDirective(ValidationPattern,$templateCache);
+    }
+}
+
+EditNamePopoverDirective.factory.$inject = ['ValidationPattern','$templateCache'];
diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html
new file mode 100644
index 0000000000..23340ccee2
--- /dev/null
+++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html
@@ -0,0 +1 @@
+<div uib-popover-template="templateUrl" popover-class="edit-name-popover" popover-title="{{header}}" popover-placement="{{direction}}" popover-is-open="isOpen" popover-append-to-body="true"></div>
diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less
new file mode 100644
index 0000000000..55dcd80a27
--- /dev/null
+++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less
@@ -0,0 +1,74 @@
+.edit-name-popover{
+    max-width: none;
+    width: 310px;
+    left: initial !important;
+    right: 10px;
+    z-index: 100;
+
+    .arrow {
+        left: 95% !important;
+        border-width: 7px;
+        bottom: -8px !important;
+    }
+}
+
+.popover {
+    border-radius: 0;
+
+    .top > .arrow {
+        bottom: -8px !important;
+    }
+
+    .popover-title {
+        background-color: transparent;
+        border-bottom: 2px solid #40b7e4;
+        margin-left: 20px;
+        margin-right: 20px;
+        padding: 8px 14px 8px 0px;
+        font-family: @font-omnes-medium;
+        font-weight: bold;
+    }
+
+    .popover-content {
+        width: inherit;
+        padding: 9px 20px;
+    }
+
+    .form-group {
+        margin-top: 9px;
+    }
+
+    .popover-btn {
+        float:right;
+        margin-left: 10px;
+        margin-bottom: 20px;
+    }
+
+    .close-popover-btn {
+        position: absolute;
+        top: 11px;
+        right: 25px;
+    }
+
+    .close-popover-btn:hover {
+        cursor: pointer;
+    }
+
+    .popover-input {
+        height: 47px;
+        margin-bottom:5px;
+    }
+
+    .popover-label {
+        text-overflow: ellipsis;
+        display: block;
+        white-space: nowrap;
+        margin-bottom: 10px;
+        font-family: @font-omnes-medium;
+        color: @main_color_l;
+    }
+
+    .w-sdc-form .i-sdc-form-item {
+        margin-bottom: 0px;
+    }
+}
diff --git a/catalog-ui/src/app/directives/elements/checkbox/checkbox.html b/catalog-ui/src/app/directives/elements/checkbox/checkbox.html
new file mode 100644
index 0000000000..1e25408188
--- /dev/null
+++ b/catalog-ui/src/app/directives/elements/checkbox/checkbox.html
@@ -0,0 +1,14 @@
+<label class="tlv-checkbox" ng-class="{'disabled' : disabled}">
+    <input  id="{{elemId}}"
+            name="{{elemId}}"
+            class="tlv-checkbox-i"
+            type="checkbox"
+            checked=""
+            ng-disabled="disabled"
+            checklist-model="sdcChecklistModel"
+            checklist-value="sdcChecklistValue"
+            checklist-change="sdcChecklistChange()"
+        />
+
+    <span sdc-smart-tooltip class="tlv-checkbox-label" data-tests-id="{{elemId}}">{{text}}</span>
+</label>
diff --git a/catalog-ui/src/app/directives/elements/checkbox/checkbox.less b/catalog-ui/src/app/directives/elements/checkbox/checkbox.less
new file mode 100644
index 0000000000..0747a680a9
--- /dev/null
+++ b/catalog-ui/src/app/directives/elements/checkbox/checkbox.less
@@ -0,0 +1,35 @@
+label.tlv-checkbox {
+    font-weight: normal;
+}
+
+/*
+input[type="checkbox"] {
+    display:none;
+}
+
+input[type="checkbox"] + label span {
+    margin-right: 6px;
+    vertical-align: text-bottom;
+    .sprite-new;
+    .checkbox_unchecked;
+    cursor:pointer;
+}
+
+input[type="checkbox"]:checked + label span {
+    vertical-align: text-bottom;
+    .sprite-new;
+    .checkbox_checked;
+}
+
+input[type="checkbox"]:focus + label span {
+    vertical-align: text-bottom;
+    .sprite-new;
+    .checkbox_focus;
+}
+
+input[type="checkbox"][disabled] + label{
+    vertical-align: text-bottom;
+    .sprite-new;
+    .checkbox_disabled;
+}
+*/
diff --git a/catalog-ui/src/app/directives/elements/checkbox/checkbox.ts b/catalog-ui/src/app/directives/elements/checkbox/checkbox.ts
new file mode 100644
index 0000000000..ec0be8ab07
--- /dev/null
+++ b/catalog-ui/src/app/directives/elements/checkbox/checkbox.ts
@@ -0,0 +1,43 @@
+'use strict';
+
+export interface ICheckboxElementScope extends ng.IScope {
+    elemId:string;
+    text:string;
+    sdcChecklistModel:any;
+    sdcChecklistValue:string;
+    disabled:boolean;
+}
+
+export class CheckboxElementDirective implements ng.IDirective {
+
+    constructor(private $filter:ng.IFilterService) {
+    }
+
+    public replace = true;
+    public restrict = 'E';
+    public transclude = false;
+
+    scope = {
+        elemId: '@',
+        text: '@',
+        disabled: '=',
+        sdcChecklistModel: '=',
+        sdcChecklistValue: '=',
+        sdcChecklistChange: '&'
+    };
+
+    template = ():string => {
+        return require('./checkbox.html');
+    };
+
+    public link = (scope:ICheckboxElementScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+
+    };
+
+    public static factory = ($filter:ng.IFilterService)=> {
+        return new CheckboxElementDirective($filter);
+    };
+
+}
+
+CheckboxElementDirective.factory.$inject = ['$filter'];
diff --git a/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.html b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.html
new file mode 100644
index 0000000000..b31fae5d73
--- /dev/null
+++ b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.html
@@ -0,0 +1,5 @@
+<div class="tlv-radio">
+    <input name="{{elemName}}" id="{{elemId}}" class="tlv-radio-i" type="radio" ng-model="sdcModel" ng-click="onValueChange()"
+        ng-disabled="disabled" value="{{value}}" />
+    <label for="{{elemId}}" sdc-smart-tooltip class="tlv-radio-label">{{text}}</label>
+</div>
diff --git a/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.less b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.less
diff --git a/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.ts b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.ts
new file mode 100644
index 0000000000..1384a82674
--- /dev/null
+++ b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.ts
@@ -0,0 +1,48 @@
+import INgModelController = angular.INgModelController;
+'use strict';
+
+export interface IRadiobuttonElementScope extends ng.IScope {
+    elemId:string;
+    elemName:string;
+    text:string;
+    sdcModel:any;
+    value:any;
+    disabled:boolean;
+    onValueChange:Function;
+}
+
+export class RadiobuttonElementDirective implements ng.IDirective {
+
+    constructor(private $filter:ng.IFilterService) {
+    }
+
+    public replace = true;
+    public restrict = 'E';
+    public transclude = false;
+
+    scope = {
+        elemId: '@',
+        elemName: '@',
+        text: '@',
+        sdcModel: '=',
+        value: '@',
+        disabled: '=',
+        onValueChange: '&'
+    };
+
+    template = ():string => {
+        return require('./radiobutton.html');
+    };
+
+    public link = (scope:IRadiobuttonElementScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+        //$elem.removeAttr("id")
+        //console.log(scope.sdcChecklistValue);
+    };
+
+    public static factory = ($filter:ng.IFilterService)=> {
+        return new RadiobuttonElementDirective($filter);
+    };
+
+}
+
+RadiobuttonElementDirective.factory.$inject = ['$filter'];
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
new file mode 100644
index 0000000000..31fa06adda
--- /dev/null
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
@@ -0,0 +1,7 @@
+{{actualText}}
+
+<span class="ellipsis-directive-more-less"
+      data-ng-click="collapsed = !collapsed; toggleText()"
+      data-ng-hide="ellipsis.length <= maxChars">
+  {{collapsed ? "More" : "Less"}}
+</span>
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less
new file mode 100644
index 0000000000..d8dfdbb73b
--- /dev/null
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less
@@ -0,0 +1,10 @@
+.ellipsis-directive-more-less {
+    .a_9;
+    .bold;
+    .hand;
+    float: right;
+    margin-right: 17px;
+    line-height: 23px;
+    text-decoration: underline;
+    text-align: left;
+}
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
new file mode 100644
index 0000000000..8fbbd4d486
--- /dev/null
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
@@ -0,0 +1,57 @@
+'use strict';
+export interface IEllipsisScope extends ng.IScope {
+    ellipsis:string;
+    maxChars:number;
+    toggleText():void;
+    collapsed:boolean;
+    actualText:string;
+
+}
+
+export class EllipsisDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        ellipsis: '=',
+        moreClass: '@',
+        maxChars: '='
+    };
+
+    replace = false;
+    restrict = 'A';
+    template = ():string => {
+        return require('./ellipsis-directive.html');
+    };
+
+    link = (scope:IEllipsisScope, $elem:any) => {
+
+
+        scope.collapsed = true;
+
+        scope.toggleText = ():void => {
+            if (scope.ellipsis && scope.collapsed) {
+                scope.actualText = scope.ellipsis.substr(0, scope.maxChars);
+                scope.actualText += scope.ellipsis.length > scope.maxChars ? '...' : '';
+            }
+            else {
+                scope.actualText = scope.ellipsis;
+            }
+        };
+
+        scope.$watch("ellipsis", function () {
+            scope.collapsed = true;
+            scope.toggleText();
+        });
+
+
+    };
+
+    public static factory = ()=> {
+        return new EllipsisDirective();
+    };
+
+}
+
+EllipsisDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/events/on-last-repeat/on-last-repeat.ts b/catalog-ui/src/app/directives/events/on-last-repeat/on-last-repeat.ts
new file mode 100644
index 0000000000..84014159f0
--- /dev/null
+++ b/catalog-ui/src/app/directives/events/on-last-repeat/on-last-repeat.ts
@@ -0,0 +1,40 @@
+'use strict';
+
+/**
+ * Usage:
+ * In data-ng-repeat html: <ol ng-repeat="record in records" on-last-repeat>
+ * In the controller, catch the last repeat:
+ * $scope.$on('onRepeatLast', function(scope, element, attrs){
+     * //work your magic
+     * });
+ */
+export interface IOnLastRepeatDirectiveScope extends ng.IScope {
+    $last:any;
+}
+
+export class OnLastRepeatDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {};
+
+    restrict = 'AE';
+    replace = true;
+
+    link = (scope:IOnLastRepeatDirectiveScope, element:any, attrs:any) => {
+        let s:any = scope.$parent; // repeat scope
+        if (s.$last) {
+            setTimeout(function () {
+                s.$emit('onRepeatLast', element, attrs);
+            }, 1);
+        }
+    };
+
+    public static factory = ()=> {
+        return new OnLastRepeatDirective();
+    };
+
+}
+
+OnLastRepeatDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.html b/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.html
new file mode 100644
index 0000000000..55696b33fa
--- /dev/null
+++ b/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.html
@@ -0,0 +1,7 @@
+<span data-ng-click="export()"
+      class="sprite-new download-btn hand"
+      uib-tooltip="Download"
+      tooltip-class="uib-custom-tooltip"
+      tooltip-placement="bottom"
+      data-tests-id="download-excel"></span>
+
diff --git a/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.ts b/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.ts
new file mode 100644
index 0000000000..deb1c94936
--- /dev/null
+++ b/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.ts
@@ -0,0 +1,61 @@
+'use strict';
+import {FileUtils} from "app/utils";
+
+export interface IJsonExportExcelScope extends ng.IScope {
+    initExportExcelData:Function;
+    export:()=>void;
+}
+
+export class JsonExportExcelDirective implements ng.IDirective {
+
+    constructor(private fileUtils:FileUtils) {
+    }
+
+    scope = {
+        initExportExcelData: '&'//get function that init and returns Models.ExportExcel
+    };
+
+    public restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./export-json-to-excel.html');
+    };
+
+    private jsonToTableText = (headers:string, dataObj:Array<Object>):string=> {
+        let tableText = headers + "\n";
+        _.each(dataObj, (rowData:any) => {
+            tableText += _.values(rowData).join() + "\n";
+        });
+        return tableText;
+    };
+
+    link = (scope:IJsonExportExcelScope, $elem:any) => {
+        scope.export = ():void => {
+            let exportExcelData = scope.initExportExcelData();
+            exportExcelData.fileName = !!exportExcelData.fileName ? exportExcelData.fileName : 'export-excel';
+
+            let headers = exportExcelData.tableHeaders.join(",");
+            let tableData = "";
+            if (exportExcelData.groupByField) {
+                _.each(_.groupBy(exportExcelData.dataObj, exportExcelData.groupByField), (groupData:Array<Object>) => {
+                    tableData += this.jsonToTableText(headers, groupData);
+                    tableData += '\n';
+                });
+            } else {
+                tableData = this.jsonToTableText(headers, exportExcelData.dataObj);
+            }
+
+            let blob = new Blob([exportExcelData.metaData.join('\n\n') + '\n\n' + tableData], {type: "text/csv;charset=utf-8"});
+
+            return this.fileUtils.downloadFile(blob, exportExcelData.fileName + '.csv');
+        };
+
+    };
+
+    public static factory = (fileUtils:FileUtils)=> {
+        return new JsonExportExcelDirective( fileUtils);
+    };
+
+}
+
+JsonExportExcelDirective.factory.$inject = ['FileUtils'];
diff --git a/catalog-ui/src/app/directives/file-opener/file-opener.html b/catalog-ui/src/app/directives/file-opener/file-opener.html
new file mode 100644
index 0000000000..38f82554e9
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-opener/file-opener.html
@@ -0,0 +1,3 @@
+<div>
+<input class="i-sdc-dashboard-item-upload-input"  type="file" data-tests-id="file-{{testsId}}" data-ng-model="importFile"  base-sixty-four-input data-ng-change="onFileSelect()" accept="{{getExtensionsWithDot()}}"/>
+</div>
diff --git a/catalog-ui/src/app/directives/file-opener/file-opener.ts b/catalog-ui/src/app/directives/file-opener/file-opener.ts
new file mode 100644
index 0000000000..95e43262f5
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-opener/file-opener.ts
@@ -0,0 +1,54 @@
+'use strict';
+
+export interface IFileOpenerScope extends ng.IScope {
+    importFile:any;
+    testsId:any;
+    extensions:string;
+
+    onFileSelect():void;
+    onFileUpload(file:any):void;
+    getExtensionsWithDot():string;
+}
+
+export class FileOpenerDirective implements ng.IDirective {
+
+    constructor(private $compile:ng.ICompileService) {
+    }
+
+    scope = {
+        onFileUpload: '&',
+        testsId: '@',
+        extensions: '@'
+    };
+
+    restrict = 'AE';
+    replace = true;
+    template = ():string => {
+        return require('./file-opener.html');
+    };
+
+    link = (scope:IFileOpenerScope, element:any) => {
+
+        scope.onFileSelect = () => {
+            scope.onFileUpload({file: scope.importFile});
+            element.html('app/directives/file-opener/file-opener.html');
+            this.$compile(element.contents())(scope);
+        };
+
+        scope.getExtensionsWithDot = ():string => {
+            let ret = [];
+            _.each(scope.extensions.split(','), function (item) {
+                ret.push("." + item.toString());
+            });
+            return ret.join(",");
+        };
+
+    };
+
+    public static factory = ($compile:ng.ICompileService)=> {
+        return new FileOpenerDirective($compile);
+    };
+
+}
+
+FileOpenerDirective.factory.$inject = ['$compile'];
diff --git a/catalog-ui/src/app/directives/file-type/file-type.ts b/catalog-ui/src/app/directives/file-type/file-type.ts
new file mode 100644
index 0000000000..11795724d0
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-type/file-type.ts
@@ -0,0 +1,45 @@
+'use strict';
+
+export class FileTypeDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    require = 'ngModel';
+
+    link = (scope, elem, attrs, ngModel) => {
+
+        let typesToApprove = "";
+
+        attrs.$observe('fileType', (val:string) => {
+            typesToApprove = val;
+            validate(ngModel.$viewValue);
+        });
+
+        let validate:Function = function (value) {
+            let fileName:string = elem.val(), valid:boolean = true;
+
+            if (fileName && value && typesToApprove) {
+                let extension:string = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
+                valid = typesToApprove.split(',').indexOf(extension) > -1;
+            }
+
+            ngModel.$setValidity('filetype', valid);
+            if (!value) {
+                ngModel.$setPristine();
+            }
+            return value;
+        };
+
+        //For DOM -> model validation
+        ngModel.$parsers.unshift(validate);
+
+    };
+
+    public static factory = ()=> {
+        return new FileTypeDirective();
+    };
+
+}
+
+FileTypeDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.html b/catalog-ui/src/app/directives/file-upload/file-upload.html
new file mode 100644
index 0000000000..a69340d0ba
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-upload/file-upload.html
@@ -0,0 +1,23 @@
+<div class="i-sdc-form-item i-sdc-form-file-upload">
+    <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || defaultText}}</span>
+    <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
+    <label class="i-sdc-form-file-upload-label">
+        <input
+            type="file"
+            name="{{elementName}}"
+            ng-model="myFileModel"
+            base-sixty-four-input
+            accept="{{getExtensionsWithDot()}}"
+            file-type="{{extensions}}"
+            data-ng-change="onFileChange()"
+            onchange="angular.element(this).scope().setEmptyError(this)"
+            onclick="angular.element(this).scope().onFileClick(this)"
+            on-after-validate="onAfterValidate"
+            data-ng-required="{{elementRequired}}"
+            data-ng-disabled="elementDisabled==='true'"
+            data-tests-id="browseButton"
+            maxsize="10240"
+            />
+        <div class="file-upload-browse-btn" data-ng-class="{'disabled':elementDisabled==='true'}">Browse</div>
+    </label>
+</div>
diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.less b/catalog-ui/src/app/directives/file-upload/file-upload.less
new file mode 100644
index 0000000000..1c4b010853
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-upload/file-upload.less
@@ -0,0 +1,75 @@
+.i-sdc-form-file-upload {
+
+    display: flex;
+    margin-top: 0;
+    width: 100%;
+    .p_1;
+    .bg_c;
+    .border-radius(2px);
+    border: solid 1px @border_color_f;
+    height: 30px;
+
+    input[type="file"] {
+        cursor: inherit;
+        display: block;
+        filter: alpha(opacity=0);
+        width: 100px;
+        height: 30px;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        text-align: right;
+        top: 0;
+    }
+
+    .i-sdc-form-file-name{
+        flex-grow: 999;
+        text-align: left;
+        padding: 3px 10px;
+        opacity: 0.6;
+        width: 80%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+    }
+
+    .i-sdc-form-file-upload-x-btn{
+        flex-grow: 1;
+        .sprite;
+        .sprite.small-x-btn-black;
+        cursor: pointer;
+        top: 10px;
+        right: 9px;
+        width: 10px;
+        position: relative;
+    }
+    .i-sdc-form-file-upload-label {
+        float: right;
+        width: 100px;
+        height: 100%;
+        .bg_n;
+        .b_9;
+
+        .file-upload-browse-btn {
+            .noselect;
+            padding: 4px 6px;
+            cursor: pointer;
+            z-index: 999;
+            position: absolute;
+            width: 100px;
+            height: 28px;
+            text-align: center;
+
+            &.disabled {
+                cursor: default;
+            }
+        }
+    }
+
+    &.error {
+        border-color: #da1f3d;
+        outline: none;
+        box-sizing: border-box;
+    }
+}
diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.ts b/catalog-ui/src/app/directives/file-upload/file-upload.ts
new file mode 100644
index 0000000000..63a6f08062
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-upload/file-upload.ts
@@ -0,0 +1,130 @@
+/**
+ * Created by obarda on 1/27/2016.
+ */
+'use strict';
+import {IAppConfigurtaion} from "app/models";
+
+export class FileUploadModel {
+    filetype:string;
+    filename:string;
+    filesize:number;
+    base64:string;
+}
+
+export interface IFileUploadScope extends ng.IScope {
+    fileModel:FileUploadModel;
+    formElement:ng.IFormController;
+    extensions:string;
+    elementDisabled:string;
+    elementName:string;
+    elementRequired:string;
+    myFileModel:any; // From the ng bind to <input type=file
+    defaultText:string;
+    onFileChangedInDirective:Function;
+
+    getExtensionsWithDot():string;
+    onFileChange():void
+    onFileClick(element:any):void;
+    onAfterValidate():void;
+    setEmptyError(element):void;
+    validateField(field:any):boolean;
+    cancel():void;
+}
+
+
+export class FileUploadDirective implements ng.IDirective {
+
+    constructor(private sdcConfig:IAppConfigurtaion) {
+    }
+
+    scope = {
+        fileModel: '=',
+        formElement: '=',
+        extensions: '@',
+        elementDisabled: '@',
+        elementName: '@',
+        elementRequired: '@',
+        onFileChangedInDirective: '=?',
+        defaultText: '=',
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./file-upload.html');
+    };
+
+    link = (scope:IFileUploadScope, element:any, $attr:any) => {
+
+        // In case the browse has filename, set it valid.
+        // When editing artifact the file is not sent again, so if we have filename I do not want to show error.
+        if (scope.fileModel && scope.fileModel.filename && scope.fileModel.filename !== '') {
+            scope.formElement[scope.elementName].$setValidity('required', true);
+        }
+
+        scope.getExtensionsWithDot = ():string => {
+            let ret = [];
+            if (scope.extensions) {
+                _.each(scope.extensions.split(','), function (item) {
+                    ret.push("." + item.toString());
+                });
+            }
+            return ret.join(",");
+        };
+
+        scope.onFileChange = ():void => {
+            if (scope.onFileChangedInDirective) {
+                scope.onFileChangedInDirective();
+            }
+            if (scope.myFileModel) {
+                scope.fileModel = scope.myFileModel;
+                scope.formElement[scope.elementName].$setValidity('required', true);
+            }
+        };
+
+        scope.setEmptyError = (element):void => {
+            if (element.files[0].size) {
+                scope.formElement[scope.elementName].$setValidity('emptyFile', true);
+            } else {
+                scope.formElement[scope.elementName].$setValidity('emptyFile', false);
+                scope.fileModel = undefined;
+            }
+
+        };
+
+        // Prevent case-sensitivity in the upload-file accept parameter
+        // Workaround for github issue: https://github.com/adonespitogo/angular-base64-upload/issues/81
+        scope.onAfterValidate = () => {
+            if (!scope.formElement[scope.elementName].$valid && scope.extensions) {
+                let uploadfileExtension:string = scope.fileModel.filename.split('.').pop().toLowerCase();
+                if (scope.extensions.split(',').indexOf(uploadfileExtension) > -1) {
+                    scope.formElement[scope.elementName].$setValidity('accept', true);
+                }
+            }
+                // Adding fix for cases when we're changing file type for upload from file that requires certain
+                // extensions to a file that don't requires any extensions
+                if (!scope.formElement[scope.elementName].$valid && scope.formElement[scope.elementName].$error.accept && scope.extensions === "") {
+                    scope.formElement[scope.elementName].$setValidity('accept', true);
+                }
+        };
+
+        // Workaround, in case user select a file then cancel (X) then select the file again, the event onChange is not fired.
+        // This is a workaround to fix this issue.
+        scope.onFileClick = (element:any):void => {
+            element.value = null;
+        };
+
+        scope.cancel = ():void => {
+            scope.fileModel.filename = '';
+            scope.formElement[scope.elementName].$pristine;
+            scope.formElement[scope.elementName].$setValidity('required', false);
+        }
+    };
+
+    public static factory = (sdcConfig:IAppConfigurtaion)=> {
+        return new FileUploadDirective(sdcConfig);
+    };
+
+}
+
+FileUploadDirective.factory.$inject = [ 'sdcConfig'];
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html
new file mode 100644
index 0000000000..659ff7014f
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html
@@ -0,0 +1,11 @@
+<div class="assetPopover" ng-class="assetPopoverObj.menuSide" ng-style="{left: assetPopoverObj.menuPosition.x, top: assetPopoverObj.menuPosition.y}">
+    <div class="display-name-tooltip" >{{assetPopoverObj.displayName}}</div>
+
+    <div class="assetMenu">
+        <!--<div class="sprite-new expand-asset-icon" uib-tooltip="Open" tooltip-class="uib-custom-tooltip" tooltip-placement="{{tooltipSide}}"></div>-->
+        <div class="sprite-new view-info-icon" uib-tooltip="Information" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
+        <div class="sprite-new cp-icon" uib-tooltip="Connection Points" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
+        <div class="sprite-new vl-icon" uib-tooltip="Links" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
+        <div class="sprite-new trash-icon" uib-tooltip="Delete" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}" ng-click="deleteAsset()" data-ng-class="{'disabled-icon': assetPopoverObj.isViewOnly}"></div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less
new file mode 100644
index 0000000000..44de4dfed1
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less
@@ -0,0 +1,64 @@
+.assetPopover {
+    font-family: omnes-regular,sans-serif;
+    font-size: 13px;
+    width:230px;
+    padding:0 15px;
+    position:absolute;
+    display:flex;
+    flex-direction:column;
+    align-items:flex-start;
+
+    &.left {
+        align-items:flex-end;
+
+        .uib-custom-tooltip {
+            margin-left:-10px;
+        }
+    }
+
+    .display-name-tooltip {
+
+        border:solid 1px @main_color_p;
+        color: @main_color_p;
+        padding:5px 10px;
+        width:200px;
+        margin-bottom:10px;
+        border-radius: 2px;
+        background-color: rgba(80, 99, 113, 0.8);
+        box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33);
+    }
+
+    .uib-custom-tooltip {
+        margin-left:20px;
+        font-family: omnes-regular,sans-serif;
+        font-size: 13px;
+    }
+
+    .assetMenu {
+
+        border-radius: 2px;
+        border: solid 1px @main_color_p;
+        background-color:  rgba(234, 234, 234, 0.7);
+        box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33);
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items:center;
+
+        .sprite-new {
+            border-bottom:solid 1px #CCC;
+            &:hover:not(.disabled-icon) {
+                .hand;
+            }
+            &:active:not(.disabled-icon) {
+                background-color:  @main_color_a;
+                border-bottom-color: @main_color_a;
+            }
+            &.trash-icon {
+                border-bottom: none;
+            }
+        }
+
+
+    }
+}
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts
new file mode 100644
index 0000000000..c560161d6e
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts
@@ -0,0 +1,55 @@
+/*-
+ * ============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 {AssetPopoverObj} from "app/models";
+
+export interface IAssetPopoverScope extends ng.IScope {
+    assetPopoverObj:AssetPopoverObj;
+    deleteAsset:Function;
+}
+
+export class AssetPopoverDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        assetPopoverObj: '=',
+        deleteAsset: '&'
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('app/directives/graphs-v2/asset-popover/asset-popover.html');
+    };
+
+    link = (scope:IAssetPopoverScope, element:JQuery, $attr:ng.IAttributes) => {
+
+    };
+
+    public static factory = ()=> {
+        return new AssetPopoverDirective();
+    };
+}
+
+AssetPopoverDirective.factory.$inject = [];
+
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
new file mode 100644
index 0000000000..0b02173e9a
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
@@ -0,0 +1,372 @@
+import {CommonNodeBase, CompositionCiLinkBase, RelationshipModel, Relationship, CompositionCiNodeBase, NodesFactory, LinksFactory} from "app/models";
+import {GraphUIObjects} from "app/utils";
+/**
+ * Created by obarda on 12/21/2016.
+ */
+export class CommonGraphUtils {
+
+    constructor(private NodesFactory:NodesFactory, private LinksFactory:LinksFactory) {
+
+    }
+
+    public safeApply = (scope:ng.IScope, fn:any) => { //todo remove to general utils
+        let phase = scope.$root.$$phase;
+        if (phase == '$apply' || phase == '$digest') {
+            if (fn && (typeof(fn) === 'function')) {
+                fn();
+            }
+        } else {
+            scope.$apply(fn);
+        }
+    };
+
+    /**
+     * Draw node on the graph
+     * @param cy
+     * @param compositionGraphNode
+     * @param position
+     * @returns {CollectionElements}
+     */
+    public addNodeToGraph(cy:Cy.Instance, compositionGraphNode:CommonNodeBase, position?:Cy.Position):Cy.CollectionElements {
+
+        let node = cy.add(<Cy.ElementDefinition> {
+            group: 'nodes',
+            position: position,
+            data: compositionGraphNode,
+            classes: compositionGraphNode.classes
+        });
+
+            if(!node.data().isUcpe) { //ucpe should not have tooltip
+                this.initNodeTooltip(node);
+            }
+            return node;
+        };
+
+    /**
+     * The function will create a component instance node by the componentInstance position.
+     * If the node is UCPE the function will create all cp lan&wan for the ucpe
+     * @param cy
+     * @param compositionGraphNode
+     * @returns {Cy.CollectionElements}
+     */
+    public addComponentInstanceNodeToGraph(cy:Cy.Instance, compositionGraphNode:CompositionCiNodeBase):Cy.CollectionElements {
+
+        let nodePosition = {
+            x: +compositionGraphNode.componentInstance.posX,
+            y: +compositionGraphNode.componentInstance.posY
+        };
+
+        let node = this.addNodeToGraph(cy, compositionGraphNode, nodePosition);
+        if (compositionGraphNode.isUcpe) {
+            this.createUcpeCpNodes(cy, node);
+        }
+        return node;
+    };
+
+    /**
+     * This function will create CP_WAN & CP_LAN  for the UCPE. this is a special node on the group that will behave like ports on the ucpe
+     * @param cy
+     * @param ucpeGraphNode
+     */
+    private createUcpeCpNodes(cy:Cy.Instance, ucpeGraphNode:Cy.CollectionNodes):void {
+
+        let requirementsArray:Array<any> = ucpeGraphNode.data().componentInstance.requirements["tosca.capabilities.Node"];
+        //show only LAN or WAN requirements
+        requirementsArray = _.reject(requirementsArray, (requirement:any) => {
+            let name:string = requirement.ownerName.toLowerCase();
+            return name.indexOf('lan') === -1 && name.indexOf('wan') === -1;
+        });
+        requirementsArray.sort(function (a, b) {
+            let nameA = a.ownerName.toLowerCase().match(/[^ ]+/)[0];
+            let nameB = b.ownerName.toLowerCase().match(/[^ ]+/)[0];
+            let numA = _.last(a.ownerName.toLowerCase().split(' '));
+            let numB = _.last(b.ownerName.toLowerCase().split(' '));
+
+            if (nameA === nameB) return numA > numB ? 1 : -1;
+            return nameA < nameB ? 1 : -1;
+        });
+        let position = angular.copy(ucpeGraphNode.boundingbox());
+        //add CP nodes to group
+        let topCps:number = 0;
+        for (let i = 0; i < requirementsArray.length; i++) {
+
+            let cpNode = this.NodesFactory.createUcpeCpNode(angular.copy(ucpeGraphNode.data().componentInstance));
+            cpNode.componentInstance.capabilities = requirementsArray[i];
+            cpNode.id = requirementsArray[i].ownerId;
+            cpNode.group = ucpeGraphNode.data().componentInstance.uniqueId;
+            cpNode.name = requirementsArray[i].ownerName; //for tooltip
+            cpNode.displayName = requirementsArray[i].ownerName;
+            cpNode.displayName = cpNode.displayName.length > 5 ? cpNode.displayName.substring(0, 5) + '...' : cpNode.displayName;
+
+
+            if (cpNode.name.toLowerCase().indexOf('lan') > -1) {
+                cpNode.textPosition = "top";
+                cpNode.componentInstance.posX = position.x1 + (i * 90) - (topCps * 90) + 53;
+                cpNode.componentInstance.posY = position.y1 + 400 + 27;
+            } else {
+                cpNode.textPosition = "bottom";
+                cpNode.componentInstance.posX = position.x1 + (topCps * 90) + 53;
+                cpNode.componentInstance.posY = position.y1 + 27;
+                topCps++;
+            }
+            let cyCpNode = this.addComponentInstanceNodeToGraph(cy, cpNode);
+            cyCpNode.lock();
+        }
+    };
+
+    /**
+     *
+     * @param nodes - all nodes in graph in order to find the edge connecting the two nodes
+     * @param fromNodeId
+     * @param toNodeId
+     * @returns {boolean} true/false if the edge is certified (from node and to node are certified)
+     */
+    public isRelationCertified(nodes:Cy.CollectionNodes, fromNodeId:string, toNodeId:string):boolean {
+        let resourceTemp = _.filter(nodes, function (node:Cy.CollectionFirst) {
+            return node.data().id === fromNodeId || node.data().id === toNodeId;
+        });
+        let certified:boolean = true;
+
+        _.forEach(resourceTemp, (item) => {
+            certified = certified && item.data().certified;
+        });
+
+        return certified;
+    }
+
+    /**
+     * Add link to graph - only draw the link
+     * @param cy
+     * @param link
+     */
+    public insertLinkToGraph = (cy:Cy.Instance, link:CompositionCiLinkBase) => {
+
+        if (!this.isRelationCertified(cy.nodes(), link.source, link.target)) {
+            link.classes = 'not-certified-link';
+        }
+        cy.add({
+            group: 'edges',
+            data: link,
+            classes: link.classes
+        });
+
+    };
+
+    /**
+     *  go over the relations and draw links on the graph
+     * @param cy
+     * @param instancesRelations
+     */
+    public initGraphLinks(cy:Cy.Instance, instancesRelations:Array<RelationshipModel>) {
+
+        if (instancesRelations) {
+            _.forEach(instancesRelations, (relationshipModel:RelationshipModel) => {
+                _.forEach(relationshipModel.relationships, (relationship:Relationship) => {
+                    let linkToCreate = this.LinksFactory.createGraphLink(cy, relationshipModel, relationship);
+                    this.insertLinkToGraph(cy, linkToCreate);
+                });
+            });
+        }
+    }
+
+    /**
+     *  Determine which nodes are in the UCPE and set child data for them.
+     * @param cy
+     */
+    public initUcpeChildren(cy:Cy.Instance) {
+        let ucpe:Cy.CollectionNodes = cy.nodes('[?isUcpe]'); // Get ucpe on graph if exist
+        _.each(cy.edges('.ucpe-host-link'), (link)=> {
+
+            let ucpeChild:Cy.CollectionNodes = (link.source().id() == ucpe.id()) ? link.target() : link.source();
+            this.initUcpeChildData(ucpeChild, ucpe);
+
+            //vls dont have ucpe-host-link connection, so need to find them and iterate separately
+            let connectedVLs = ucpeChild.connectedEdges().connectedNodes('.vl-node');
+            _.forEach(connectedVLs, (vl)=> { //all connected vls must be UCPE children because not allowed to connect to a VL outside of the UCPE
+                this.initUcpeChildData(vl, ucpe);
+            });
+        });
+    }
+
+    /**
+     *  Set properties for nodes contained by the UCPE
+     * @param childNode- node contained in UCPE
+     * @param ucpe- ucpe container node
+     */
+    public initUcpeChildData(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) {
+
+        if (!childNode.data('isInsideGroup')) {
+            this.updateUcpeChildPosition(childNode, ucpe);
+            childNode.data({isInsideGroup: true});
+        }
+
+    }
+
+    /**
+     *  Updates UCPE child node offset, which allows child nodes to be dragged in synchronization with ucpe
+     * @param childNode- node contained in UCPE
+     * @param ucpe- ucpe container node
+     */
+    public updateUcpeChildPosition(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) {
+        let childPos:Cy.Position = childNode.relativePosition();
+        let ucpePos:Cy.Position = ucpe.relativePosition();
+        let offset:Cy.Position = {
+            x: childPos.x - ucpePos.x,
+            y: childPos.y - ucpePos.y
+        };
+        childNode.data("ucpeOffset", offset);
+    }
+
+    /**
+     *  Removes ucpe-child properties from the node
+     * @param childNode- node being removed from UCPE
+     */
+    public removeUcpeChildData(childNode:Cy.CollectionNodes) {
+        childNode.removeData("ucpeOffset");
+        childNode.data({isInsideGroup: false});
+
+    }
+
+
+    public HTMLCoordsToCytoscapeCoords(cytoscapeBoundingBox:Cy.Extent, mousePos:Cy.Position):Cy.Position {
+        return {x: mousePos.x + cytoscapeBoundingBox.x1, y: mousePos.y + cytoscapeBoundingBox.y1}
+    };
+
+
+    public getCytoscapeNodePosition = (cy:Cy.Instance, event:IDragDropEvent):Cy.Position => {
+        let targetOffset = $(event.target).offset();
+        let x = event.pageX - targetOffset.left;
+        let y = event.pageY - targetOffset.top;
+
+        return this.HTMLCoordsToCytoscapeCoords(cy.extent(), {
+            x: x,
+            y: y
+        });
+    };
+
+
+    public getNodePosition(node:Cy.CollectionFirstNode):Cy.Position {
+        let nodePosition = node.relativePoint();
+        if (node.data().isUcpe) { //UCPEs use bounding box and not relative point.
+            nodePosition = {x: node.boundingbox().x1, y: node.boundingbox().y1};
+        }
+
+        return nodePosition;
+    }
+
+        /**
+         * Generic function that can be used for any html elements overlaid on canvas
+         * Returns the html position of a node on canvas, including left palette and header offsets. Option to pass in additional offset to add to return position.
+         * @param node
+         * @param additionalOffset
+         * @returns {Cy.Position}
+         
+        public getNodePositionWithOffset = (node:Cy.CollectionFirstNode, additionalOffset?:Cy.Position): Cy.Position => {
+            if(!additionalOffset) additionalOffset = {x: 0, y:0};
+
+            let nodePosition = node.renderedPosition();
+            let posWithOffset:Cy.Position = {
+                x: nodePosition.x + GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET + additionalOffset.x,
+                y: nodePosition.y + GraphUIObjects.COMPOSITION_HEADER_OFFSET + additionalOffset.y
+            };
+            return posWithOffset;
+        };*/
+
+        /**
+         *  return true/false if first node contains in second - this used in order to verify is node is entirely inside ucpe
+         * @param firstBox
+         * @param secondBox
+         * @returns {boolean}
+         */
+        public isFirstBoxContainsInSecondBox(firstBox:Cy.BoundingBox, secondBox:Cy.BoundingBox) {
+
+        return firstBox.x1 > secondBox.x1 && firstBox.x2 < secondBox.x2 && firstBox.y1 > secondBox.y1 && firstBox.y2 < secondBox.y2;
+
+    };
+
+
+    /**
+     * Check if node node bounds position is inside any ucpe on graph, and return the ucpe
+     * @param {diagram} the diagram.
+     * @param {nodeActualBounds} the actual bound position of the node.
+     * @return the ucpe if found else return null
+     */
+    public isInUcpe = (cy:Cy.Instance, nodeBounds:Cy.BoundingBox):Cy.CollectionElements => {
+
+        let ucpeNodes = cy.nodes('[?isUcpe]').filterFn((ucpeNode) => {
+            return this.isFirstBoxContainsInSecondBox(nodeBounds, ucpeNode.boundingbox());
+        });
+        return ucpeNodes;
+    };
+
+    /**
+     *
+     * @param cy
+     * @param node
+     * @returns {Array}
+     */
+    public getLinkableNodes(cy:Cy.Instance, node:Cy.CollectionFirstNode):Array<CompositionCiNodeBase> {
+        let compatibleNodes = [];
+        _.each(cy.nodes(), (tempNode)=> {
+            if (this.nodeLocationsCompatible(cy, node, tempNode)) {
+                compatibleNodes.push(tempNode.data());
+            }
+        });
+        return compatibleNodes;
+    }
+
+    /**
+     * Checks whether node locations are compatible in reference to UCPEs.
+     * Returns true if both nodes are in UCPE or both nodes out, or one node is UCPEpart.
+     * @param node1
+     * @param node2
+     */
+    public nodeLocationsCompatible(cy:Cy.Instance, node1:Cy.CollectionFirstNode, node2:Cy.CollectionFirstNode) {
+
+            let ucpe = cy.nodes('[?isUcpe]');
+            if(!ucpe.length){ return true; }
+            if(node1.data().isUcpePart || node2.data().isUcpePart) { return true; }
+
+        return (this.isFirstBoxContainsInSecondBox(node1.boundingbox(), ucpe.boundingbox()) == this.isFirstBoxContainsInSecondBox(node2.boundingbox(), ucpe.boundingbox()));
+
+    }
+
+        /**
+         * This function will init qtip tooltip on the node
+         * @param node - the node we want the tooltip to apply on
+         */
+        public initNodeTooltip(node:Cy.CollectionNodes) {
+    
+            let opts = {
+                content: function () {
+                    return this.data('name');
+                },
+                position: {
+                    my: 'top center',
+                    at: 'bottom center',
+                    adjust: {x:0, y:-5}
+                },
+                style: {
+                    classes: 'qtip-dark qtip-rounded qtip-custom',
+                    tip: {
+                        width: 16,
+                        height: 8
+                    }
+                },
+                show: {
+                    event: 'mouseover',
+                    delay: 1000
+                },
+                hide: {event: 'mouseout mousedown'},
+                includeLabels: true
+            };
+    
+            if (node.data().isUcpePart){ //fix tooltip positioning for UCPE-cps
+                opts.position.adjust = {x:0, y:20};
+            }
+    
+            node.qtip(opts);
+        };
+}
+
+CommonGraphUtils.$inject = ['NodesFactory', 'LinksFactory'];
\ No newline at end of file
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
new file mode 100644
index 0000000000..971dabafe8
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
@@ -0,0 +1,256 @@
+import {GraphColors} from "app/utils/constants";
+/**
+ * Created by obarda on 12/18/2016.
+ */
+export class ComponentInstanceNodesStyle {
+
+    public static getCompositionGraphStyle = ():Array<Cy.Stylesheet>  => {
+        return [
+            {
+                selector: 'core',
+                css: {
+                    'shape': 'rectangle',
+                    'active-bg-size': 0,
+                    'selection-box-color': 'rgb(0, 159, 219)',
+                    'selection-box-opacity': 0.2,
+                    'selection-box-border-color': '#009fdb',
+                    'selection-box-border-width': 1
+
+                }
+            },
+            {
+                selector: 'node',
+                css: {
+                    'font-family': 'omnes-regular,sans-serif',
+                    'font-size': 14,
+                    'events': 'yes',
+                    'text-events': 'yes',
+                    'text-border-width': 15,
+                    'text-border-color': GraphColors.NODE_UCPE,
+                    'text-margin-y': 5
+                }
+            },
+            {
+                selector: '.vf-node',
+                css: {
+                    'background-color': 'transparent',
+                    'shape': 'rectangle',
+                    'label': 'data(displayName)',
+                    'background-image': 'data(img)',
+                    'width': 65,
+                    'height': 65,
+                    'background-opacity': 0,
+                    "background-width": 65,
+                    "background-height": 65,
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'background-fit': 'cover',
+                    'background-clip': 'node',
+                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
+                    'overlay-opacity': 0
+                }
+            },
+
+            {
+                selector: '.service-node',
+                css: {
+                    'background-color': 'transparent',
+                    'label': 'data(displayName)',
+                    'events': 'yes',
+                    'text-events': 'yes',
+                    'background-image': 'data(img)',
+                    'width': 64,
+                    'height': 64,
+                    "border-width": 0,
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'background-opacity': 0,
+                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
+                    'overlay-opacity': 0
+                }
+            },
+            {
+                selector: '.cp-node',
+                css: {
+                    'background-color': 'rgb(255,255,255)',
+                    'shape': 'rectangle',
+                    'label': 'data(displayName)',
+                    'background-image': 'data(img)',
+                    'background-width': 21,
+                    'background-height': 21,
+                    'width': 21,
+                    'height': 21,
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'background-opacity': 0,
+                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
+                    'overlay-opacity': 0
+                }
+            },
+            {
+                selector: '.vl-node',
+                css: {
+                    'background-color': 'rgb(255,255,255)',
+                    'shape': 'rectangle',
+                    'label': 'data(displayName)',
+                    'background-image': 'data(img)',
+                    'background-width': 21,
+                    'background-height': 21,
+                    'width': 21,
+                    'height': 21,
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'background-opacity': 0,
+                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
+                    'overlay-opacity': 0
+                }
+            },
+            {
+                selector: '.ucpe-cp',
+                css: {
+                    'background-color': GraphColors.NODE_UCPE_CP,
+                    'background-width': 15,
+                    'background-height': 15,
+                    'width': 15,
+                    'height': 15,
+                    'text-halign': 'center',
+                    'overlay-opacity': 0,
+                    'label': 'data(displayName)',
+                    'text-valign': 'data(textPosition)',
+                    'text-margin-y': (ele:Cy.Collection) => {
+                        return (ele.data('textPosition') == 'top') ? -5 : 5;
+                    },
+                    'font-size': 12
+                }
+            },
+            {
+                selector: '.ucpe-node',
+                css: {
+                    'background-fit': 'cover',
+                    'padding-bottom': 0,
+                    'padding-top': 0
+                }
+            },
+            {
+                selector: '.simple-link',
+                css: {
+                    'width': 1,
+                    'line-color': GraphColors.BASE_LINK,
+                    'target-arrow-color': '#3b7b9b',
+                    'target-arrow-shape': 'triangle',
+                    'curve-style': 'bezier',
+                    'control-point-step-size': 30
+                }
+            },
+            {
+                selector: '.vl-link',
+                css: {
+                    'width': 3,
+                    'line-color': GraphColors.VL_LINK,
+                    'curve-style': 'bezier',
+                    'control-point-step-size': 30
+                }
+            },
+            {
+                selector: '.ucpe-host-link',
+                css: {
+                    'width': 0
+                }
+            },
+            {
+                selector: '.not-certified-link',
+                css: {
+                    'width': 1,
+                    'line-color': GraphColors.NOT_CERTIFIED_LINK,
+                    'curve-style': 'bezier',
+                    'control-point-step-size': 30,
+                    'line-style': 'dashed',
+                    'target-arrow-color': '#3b7b9b',
+                    'target-arrow-shape': 'triangle'
+
+                }
+            },
+
+            {
+                selector: '.not-certified',
+                css: {
+                    'shape': 'rectangle',
+                    'background-image': (ele:Cy.Collection) => {
+                        return ele.data().initImage(ele)
+                    },
+                    "border-width": 0
+                }
+            },
+            {
+                selector: 'node:selected',
+                css: {
+                    "border-width": 2,
+                    "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
+                    'shape': 'rectangle'
+                }
+            },
+            {
+                selector: 'edge:selected',
+                css: {
+                    'line-color': GraphColors.ACTIVE_LINK
+
+                }
+            },
+            {
+                selector: 'edge:active',
+                css: {
+                    'overlay-opacity': 0
+                }
+            }
+        ]
+    }
+
+    public static getBasicNodeHanlde = () => {
+        return {
+            positionX: "center",
+            positionY: "top",
+            offsetX: 15,
+            offsetY: -20,
+            color: "#27a337",
+            type: "default",
+            single: false,
+            nodeTypeNames: ["basic-node"],
+            imageUrl: '/assets/styles/images/resource-icons/' + 'canvasPlusIcon.png',
+            lineWidth: 2,
+            lineStyle: 'dashed'
+
+        }
+    }
+
+    public static getBasicSmallNodeHandle = () => {
+        return {
+            positionX: "center",
+            positionY: "top",
+            offsetX: 3,
+            offsetY: -25,
+            color: "#27a337",
+            type: "default",
+            single: false,
+            nodeTypeNames: ["basic-small-node"],
+            imageUrl: '/assets/styles/images/resource-icons/' + 'canvasPlusIcon.png',
+            lineWidth: 2,
+            lineStyle: 'dashed'
+        }
+    }
+
+    public static getUcpeCpNodeHandle = () => {
+        return {
+            positionX: "center",
+            positionY: "center",
+            offsetX: -8,
+            offsetY: -10,
+            color: "#27a337",
+            type: "default",
+            single: false,
+            nodeTypeNames: ["ucpe-cp-node"],
+            imageUrl: '/assets/styles/images/resource-icons/' + 'canvasPlusIcon.png',
+            lineWidth: 2,
+            lineStyle: 'dashed'
+        }
+    }
+}
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts
new file mode 100644
index 0000000000..0c92c90538
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts
@@ -0,0 +1,83 @@
+import {GraphColors} from "app/utils";
+export class ModulesNodesStyle {
+
+    public static getModuleGraphStyle = ():Array<Cy.Stylesheet> => {
+
+        return [
+            {
+                selector: '.cy-expand-collapse-collapsed-node',
+                css: {
+                    'background-image': 'data(img)',
+                    'width': 34,
+                    'height': 32,
+                    'background-opacity': 0,
+                    'shape': 'rectangle',
+                    'label': 'data(displayName)',
+                    'events': 'yes',
+                    'text-events': 'yes',
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'text-margin-y': 5,
+                    'border-opacity': 0
+                }
+            },
+            {
+                selector: '.module-node',
+                css: {
+                    'background-color': 'transparent',
+                    'background-opacity': 0,
+                    "border-width": 2,
+                    "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
+                    'border-style': 'dashed',
+                    'label': 'data(displayName)',
+                    'events': 'yes',
+                    'text-events': 'yes',
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'text-margin-y': 8
+                }
+            },
+            {
+                selector: 'node:selected',
+                css: {
+                    "border-opacity": 0
+                }
+            },
+            {
+                selector: '.simple-link:selected',
+                css: {
+                    'line-color': GraphColors.BASE_LINK,
+                }
+            },
+            {
+                selector: '.vl-link:selected',
+                css: {
+                    'line-color': GraphColors.VL_LINK,
+                }
+            },
+            {
+                selector: '.cy-expand-collapse-collapsed-node:selected',
+                css: {
+                    "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
+                    'border-opacity': 1,
+                    'border-style': 'solid',
+                    'border-width': 2
+                }
+            },
+            {
+                selector: '.module-node:selected',
+                css: {
+                    "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
+                    'border-opacity': 1
+                }
+            },
+            {
+                selector: '.dummy-node',
+                css: {
+                    'width': 20,
+                    'height': 20
+                }
+            },
+        ]
+    }
+}
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
new file mode 100644
index 0000000000..db03aa53fb
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
@@ -0,0 +1,539 @@
+import {
+    MatchBase,
+    LinkMenu,
+    ComponentInstance,
+    LeftPaletteComponent,
+    Component,
+    RelationMenuDirectiveObj,
+    CompositionCiNodeBase,
+    CompositionCiNodeVl,
+    NodesFactory/*,
+    AssetPopoverObj*/
+} from "app/models";
+import {ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors} from "app/utils";
+import {EventListenerService, LoaderService} from "app/services";
+import {CompositionGraphLinkUtils} from "./utils/composition-graph-links-utils";
+import {CompositionGraphGeneralUtils} from "./utils/composition-graph-general-utils";
+import {CompositionGraphNodesUtils} from "./utils/composition-graph-nodes-utils";
+import {CommonGraphUtils} from "../common/common-graph-utils";
+import {MatchCapabilitiesRequirementsUtils} from "./utils/match-capability-requierment-utils";
+import {CompositionGraphPaletteUtils} from "./utils/composition-graph-palette-utils";
+import {ComponentInstanceNodesStyle} from "../common/style/component-instances-nodes-style";
+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";
+
+interface ICompositionGraphScope extends ng.IScope {
+
+    component:Component;
+    isLoading: boolean;
+    isViewOnly:boolean;
+    // Link menu - create link menu
+    relationMenuDirectiveObj:RelationMenuDirectiveObj;
+    isLinkMenuOpen:boolean;
+    createLinkFromMenu:(chosenMatch:MatchBase, vl:Component)=>void;
+
+    //modify link menu - for now only delete menu
+    relationMenuTimeout:ng.IPromise<any>;
+    linkMenuObject:LinkMenu;
+
+    //left palette functions callbacks
+    dropCallback(event:JQueryEventObject, ui:any):void;
+    beforeDropCallback(event:IDragDropEvent):void;
+    verifyDrop(event:JQueryEventObject, ui:any):void;
+
+    //Links menus
+    deleteRelation(link:Cy.CollectionEdges):void;
+    hideRelationMenu();
+    /*//asset popover menu
+    assetPopoverObj:AssetPopoverObj;
+    assetPopoverOpen:boolean;
+    hideAssetPopover():void;
+    deleteNode(nodeId:string):void;*/
+}
+
+export class CompositionGraph implements ng.IDirective {
+    private _cy:Cy.Instance;
+    private _currentlyCLickedNodePosition:Cy.Position;
+    // private $document:JQuery = $(document);
+    private dragElement:JQuery;
+    private dragComponent:ComponentInstance;
+
+    constructor(private $q:ng.IQService,
+                private $log:ng.ILogService,
+                private $timeout:ng.ITimeoutService,
+                private NodesFactory:NodesFactory,
+                private CompositionGraphLinkUtils:CompositionGraphLinkUtils,
+                private GeneralGraphUtils:CompositionGraphGeneralUtils,
+                private ComponentInstanceFactory:ComponentInstanceFactory,
+                private NodesGraphUtils:CompositionGraphNodesUtils,
+                private eventListenerService:EventListenerService,
+                private ComponentFactory:ComponentFactory,
+                private LoaderService:LoaderService,
+                private commonGraphUtils:CommonGraphUtils,
+                private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils,
+                private CompositionGraphPaletteUtils:CompositionGraphPaletteUtils,
+                private ComponentServiceNg2: ComponentServiceNg2) {
+
+    }
+
+    restrict = 'E';
+    template = require('./composition-graph.html');
+    scope = {
+        component: '=',
+        isViewOnly: '='
+    };
+
+    link = (scope:ICompositionGraphScope, el:JQuery) => {
+
+        this.loadGraph(scope, el);
+
+        if(scope.component.componentInstances && scope.component.componentInstancesRelations) {
+            this.loadGraphData(scope);
+        } else {
+            //when we don't have the data we register to on graph load event
+            this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED, () => {
+                this.loadGraphData(scope);
+            });
+        }
+        scope.$on('$destroy', () => {
+            this._cy.destroy();
+            _.forEach(GRAPH_EVENTS, (event) => {
+                this.eventListenerService.unRegisterObserver(event);
+            });
+        });
+
+    };
+
+    private loadGraphData = (scope:ICompositionGraphScope) => {
+        this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly);
+        this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations);
+        this.commonGraphUtils.initUcpeChildren(this._cy);
+    }
+
+    private loadGraph = (scope:ICompositionGraphScope, el:JQuery) => {
+
+        let graphEl = el.find('.sdc-composition-graph-wrapper');
+        this.initGraph(graphEl, scope.isViewOnly);
+        this.initDropZone(scope);
+        this.registerCytoscapeGraphEvents(scope);
+        this.registerCustomEvents(scope, el);
+        this.initViewMode(scope.isViewOnly);
+
+    };
+
+    private initGraph(graphEl:JQuery, isViewOnly:boolean) {
+
+        this._cy = cytoscape({
+            container: graphEl,
+            style: ComponentInstanceNodesStyle.getCompositionGraphStyle(),
+            zoomingEnabled: false,
+            selectionType: 'single',
+            boxSelectionEnabled: true,
+            autolock: isViewOnly,
+            autoungrabify: isViewOnly
+        });
+    }
+
+    private initViewMode(isViewOnly:boolean) {
+
+        if (isViewOnly) {
+            //remove event listeners
+            this._cy.off('drag');
+            this._cy.off('handlemouseout');
+            this._cy.off('handlemouseover');
+            this._cy.edges().unselectify();
+        }
+    };
+
+    private registerCustomEvents(scope:ICompositionGraphScope, el:JQuery) {
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent:LeftPaletteComponent) => {
+            this.$log.info(`composition-graph::registerEventServiceEvents:: palette hover on component: ${leftPaletteComponent.uniqueId}`);
+
+            let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes());
+            let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy);
+
+            if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) {
+                let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId);
+                let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(cacheComponent, nodesData, nodesLinks);
+
+                this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
+                this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
+
+                return;
+            }
+
+            //----------------------- ORIT TO FIX------------------------//
+
+            this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => {
+
+                    let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType); 
+                    component.uniqueId = component.uniqueId;
+                    component.capabilities = response.capabilities;
+                    component.requirements = response.requirements;
+                    this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component);
+                    let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(component, nodesData, nodesLinks);
+                    this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
+                    this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy)
+                });
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => {
+            this._cy.emit('hidehandles');
+            this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, (dragElement, dragComponent) => {
+
+            this.dragElement = dragElement;
+            this.dragComponent = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, (event:IDragDropEvent) => {
+            this.CompositionGraphPaletteUtils.onComponentDrag(this._cy, event, this.dragElement, this.dragComponent);
+
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component:ComponentInstance) => {
+
+            let selectedNode = this._cy.getElementById(component.uniqueId);
+            selectedNode.data().componentInstance.name = component.name;
+            selectedNode.data('name', component.name); //used for tooltip
+            selectedNode.data('displayName', selectedNode.data().getDisplayName()); //abbreviated
+
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstance:ComponentInstance) => {
+            let nodeToDelete = this._cy.getElementById(componentInstance.uniqueId);
+            this.NodesGraphUtils.deleteNode(this._cy, scope.component, nodeToDelete);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_MULTIPLE_COMPONENTS, () => {
+
+            this._cy.$('node:selected').each((i:number, node:Cy.CollectionNodes) => {
+                this.NodesGraphUtils.deleteNode(this._cy, scope.component, node);
+            });
+
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_EDGE, (releaseLoading:boolean, linksToDelete:Cy.CollectionEdges) => {
+            this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, releaseLoading, linksToDelete);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, (node:Cy.CollectionNodes, ucpe:Cy.CollectionNodes, updateExistingNode:boolean) => {
+
+            this.commonGraphUtils.initUcpeChildData(node, ucpe);
+            //check if item is a VL, and if so, skip adding the binding to ucpe
+            if (!(node.data() instanceof CompositionCiNodeVl)) {
+                this.CompositionGraphLinkUtils.createVfToUcpeLink(scope.component, this._cy, ucpe.data(), node.data()); //create link from the node to the ucpe
+            }
+
+            if (updateExistingNode) {
+                let vlsPendingDeletion:Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); //delete connected VLs that no longer have 2 links
+                this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed
+                this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position
+            }
+
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, (node:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) => {
+            this.commonGraphUtils.removeUcpeChildData(node);
+            let vlsPendingDeletion:Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node);
+            this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed
+            this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component:Component) => {
+            scope.component = component;
+            this.loadGraphData(scope);
+        });
+
+
+        scope.createLinkFromMenu = (chosenMatch:MatchBase):void => {
+            scope.isLinkMenuOpen = false;
+            this.CompositionGraphLinkUtils.createLinkFromMenu(this._cy, chosenMatch, scope.component);
+        };
+
+        scope.hideRelationMenu = () => {
+            this.commonGraphUtils.safeApply(scope, () => {
+                scope.linkMenuObject = null;
+                this.$timeout.cancel(scope.relationMenuTimeout);
+            });
+        };
+
+
+        scope.deleteRelation = (link:Cy.CollectionEdges) => {
+            scope.hideRelationMenu();
+
+            //if multiple edges selected, delete the VL itself so edges get deleted automatically
+            if (this._cy.$('edge:selected').length > 1) {
+                this.NodesGraphUtils.deleteNode(this._cy, scope.component, this._cy.$('node:selected'));
+            } else {
+                this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, true, link);
+            }
+        };
+
+        /*
+        scope.hideAssetPopover = ():void => {
+
+            this.commonGraphUtils.safeApply(scope, () => {
+                scope.assetPopoverOpen = false;
+                scope.assetPopoverObj = null;
+            });
+        };
+
+        scope.deleteNode = (nodeId:string):void => {
+            if (!scope.isViewOnly) {
+                this.NodesGraphUtils.confirmDeleteNode(nodeId, this._cy, scope.component);
+                //scope.hideAssetPopover();
+            }
+        };*/
+    }
+
+    private registerCytoscapeGraphEvents(scope:ICompositionGraphScope) {
+
+        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._cy.on('tapstart', 'node', (event:Cy.EventObject) => {
+            this._currentlyCLickedNodePosition = angular.copy(event.cyTarget[0].position()); //update node position on drag
+            if (event.cyTarget.data().isUcpe) {
+                this._cy.nodes('.ucpe-cp').unlock();
+                event.cyTarget.style('opacity', 0.5);
+            }
+            //scope.hideAssetPopover();
+        });
+
+        this._cy.on('drag', 'node', (event:Cy.EventObject) => {
+
+            if (event.cyTarget.data().isDraggable) {
+                event.cyTarget.style({'overlay-opacity': 0.24});
+                if (this.GeneralGraphUtils.isValidDrop(this._cy, event.cyTarget)) {
+                    event.cyTarget.style({'overlay-color': GraphColors.NODE_BACKGROUND_COLOR});
+                } else {
+                    event.cyTarget.style({'overlay-color': GraphColors.NODE_OVERLAPPING_BACKGROUND_COLOR});
+                }
+            }
+
+            if (event.cyTarget.data().isUcpe) {
+                let pos = event.cyTarget.position();
+
+                this._cy.nodes('[?isInsideGroup]').positions((i, node)=> {
+                    return {
+                        x: pos.x + node.data("ucpeOffset").x,
+                        y: pos.y + node.data("ucpeOffset").y
+                    }
+                });
+            }
+        });
+
+       /* this._cy.on('mouseover', 'node', (event:Cy.EventObject) => {
+            if (!this._cy.scratch('_edge_editation_highlights')) {
+                this.commonGraphUtils.safeApply(scope, () => {
+                    this.showNodePopoverMenu(scope, event.cyTarget[0]);
+                });
+            }
+        });
+
+        this._cy.on('mouseout', 'node', (event:Cy.EventObject) => {
+            scope.hideAssetPopover();
+        });*/
+        this._cy.on('handlemouseover', (event, payload) => {
+
+            if (payload.node.grabbed() /* || this._cy.scratch('_edge_editation_highlights') === true*/) { //no need to add opacity while we are dragging and hovering othe nodes- or if opacity was already calculated for these nodes
+                return;
+            }
+            let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes());
+            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);
+            this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
+            this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data());
+            /*
+            this._cy.scratch()._edge_editation_highlights = true;
+            scope.hideAssetPopover();*/
+        });
+
+        this._cy.on('handlemouseout', () => {
+            if (this._cy.scratch('_edge_editation_highlights') === true) {
+                this._cy.removeScratch('_edge_editation_highlights');
+                this._cy.emit('hidehandles');
+                this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
+            }
+        });
+
+
+        this._cy.on('tapend', (event:Cy.EventObject) => {
+
+            if (event.cyTarget === this._cy) { //On Background clicked
+                if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
+                }
+                scope.hideRelationMenu();
+            }
+
+            else if (event.cyTarget.isEdge()) { //On Edge clicked
+                if (scope.isViewOnly) return;
+                this.CompositionGraphLinkUtils.handleLinkClick(this._cy, event);
+                this.openModifyLinkMenu(scope, this.CompositionGraphLinkUtils.getModifyLinkMenu(event.cyTarget[0], event), 6000);
+            }
+
+            else { //On Node clicked
+                this._cy.nodes(':grabbed').style({'overlay-opacity': 0});
+
+                let isUcpe:boolean = event.cyTarget.data().isUcpe;
+                let newPosition = event.cyTarget[0].position();
+                //node position changed (drop after drag event) - we need to update position
+                if (this._currentlyCLickedNodePosition.x !== newPosition.x || this._currentlyCLickedNodePosition.y !== newPosition.y) {
+                    let nodesMoved:Cy.CollectionNodes = this._cy.$(':grabbed');
+                    if (isUcpe) {
+                        nodesMoved = nodesMoved.add(this._cy.nodes('[?isInsideGroup]:free')); //'child' nodes will not be recognized as "grabbed" elements within cytoscape. manually add them to collection of nodes moved.
+                    }
+                    this.NodesGraphUtils.onNodesPositionChanged(this._cy, scope.component, nodesMoved);
+                } else {
+                    this.$log.debug('composition-graph::onNodeSelectedEvent:: fired');
+                    scope.$apply(() => {
+                        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
+                        //open node popover menu
+                        //this.showNodePopoverMenu(scope, event.cyTarget[0]);
+                    });
+                }
+
+                if (isUcpe) {
+                    this._cy.nodes('.ucpe-cp').lock();
+                    event.cyTarget.style('opacity', 1);
+                }
+
+            }
+        });
+
+        this._cy.on('boxselect', 'node', (event:Cy.EventObject) => {
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
+        });
+    }
+
+    /*
+    private showNodePopoverMenu = (scope:ICompositionGraphScope, node:Cy.CollectionNodes) => {
+
+        scope.assetPopoverObj = this.NodesGraphUtils.createAssetPopover(this._cy, node, scope.isViewOnly);
+        scope.assetPopoverOpen = true;
+
+    };*/
+    private openModifyLinkMenu = (scope:ICompositionGraphScope, linkMenuObject:LinkMenu, timeOutInMilliseconds?:number) => {
+
+        this.commonGraphUtils.safeApply(scope, () => {
+            scope.linkMenuObject = linkMenuObject;
+        });
+
+        scope.relationMenuTimeout = this.$timeout(() => {
+            scope.hideRelationMenu();
+        }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
+    };
+
+    private initGraphNodes(componentInstances:ComponentInstance[], isViewOnly:boolean) {
+
+        if (!isViewOnly) { //Init nodes handle extension - enable dynamic links
+            setTimeout(()=> {
+                let handles = new CytoscapeEdgeEditation;
+                handles.init(this._cy, 18);
+                handles.registerHandle(ComponentInstanceNodesStyle.getBasicNodeHanlde());
+                handles.registerHandle(ComponentInstanceNodesStyle.getBasicSmallNodeHandle());
+                handles.registerHandle(ComponentInstanceNodesStyle.getUcpeCpNodeHandle());
+            }, 0);
+        }
+
+        _.each(componentInstances, (instance) => {
+            let compositionGraphNode:CompositionCiNodeBase = this.NodesFactory.createNode(instance);
+            this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, compositionGraphNode);
+        });
+    }
+
+
+    private initDropZone(scope:ICompositionGraphScope) {
+
+        if (scope.isViewOnly) {
+            return;
+        }
+        scope.dropCallback = (event:IDragDropEvent) => {
+            this.$log.debug(`composition-graph::dropCallback:: fired`);
+            this.CompositionGraphPaletteUtils.addNodeFromPalette(this._cy, event, scope.component);
+        };
+
+        scope.verifyDrop = (event:JQueryEventObject) => {
+
+            if (this.dragElement.hasClass('red')) {
+                return false;
+            }
+            return true;
+        };
+
+        scope.beforeDropCallback = (event:IDragDropEvent):ng.IPromise<void> => {
+            let deferred:ng.IDeferred<void> = this.$q.defer<void>();
+            if (this.dragElement.hasClass('red')) {
+                deferred.reject();
+            } else {
+                deferred.resolve();
+            }
+
+            return deferred.promise;
+        }
+    }
+
+    public static factory = ($q,
+                             $log,
+                             $timeout,
+                             NodesFactory,
+                             LinksGraphUtils,
+                             GeneralGraphUtils,
+                             ComponentInstanceFactory,
+                             NodesGraphUtils,
+                             EventListenerService,
+                             ComponentFactory,
+                             LoaderService,
+                             CommonGraphUtils,
+                             MatchCapabilitiesRequirementsUtils,
+                             CompositionGraphPaletteUtils,
+                             ComponentServiceNg2) => {
+        return new CompositionGraph(
+            $q,
+            $log,
+            $timeout,
+            NodesFactory,
+            LinksGraphUtils,
+            GeneralGraphUtils,
+            ComponentInstanceFactory,
+            NodesGraphUtils,
+            EventListenerService,
+            ComponentFactory,
+            LoaderService,
+            CommonGraphUtils,
+            MatchCapabilitiesRequirementsUtils,
+            CompositionGraphPaletteUtils,
+            ComponentServiceNg2);
+    }
+}
+
+CompositionGraph.factory.$inject = [
+    '$q',
+    '$log',
+    '$timeout',
+    'NodesFactory',
+    'CompositionGraphLinkUtils',
+    'CompositionGraphGeneralUtils',
+    'ComponentInstanceFactory',
+    'CompositionGraphNodesUtils',
+    'EventListenerService',
+    'ComponentFactory',
+    'LoaderService',
+    'CommonGraphUtils',
+    'MatchCapabilitiesRequirementsUtils',
+    'CompositionGraphPaletteUtils',
+    'ComponentServiceNg2'
+];
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
new file mode 100644
index 0000000000..1e69d3384a
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
@@ -0,0 +1,23 @@
+<loader display="isLoading" loader-type="composition-graph"></loader>
+<div class="sdc-composition-graph-wrapper" ng-class="{'view-only':isViewOnly}"
+     data-drop="true"
+     data-jqyoui-options="{accept: verifyDrop}"
+     data-jqyoui-droppable="{onDrop:'dropCallback', beforeDrop: 'beforeDropCallback'}">
+</div>
+
+<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>
+
+<!--<asset-popover ng-if="assetPopoverOpen" asset-popover-obj="assetPopoverObj" delete-asset="deleteNode(assetPopoverObj.nodeId)"></asset-popover>-->
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less
new file mode 100644
index 0000000000..56c8b5529d
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less
@@ -0,0 +1,14 @@
+composition-graph {
+  display: block;
+   height:100%;
+   width: 100%;
+
+  .sdc-composition-graph-wrapper{
+    height:100%;
+    width: 100%;
+  }
+
+  .view-only{
+    background-color:rgb(248, 248, 248);
+  }
+}
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
new file mode 100644
index 0000000000..1303e7a894
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
@@ -0,0 +1,244 @@
+import {ComponentInstance, Component, MatchReqToCapability, MatchBase, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models";
+import {QueueUtils, Dictionary, GraphUIObjects} from "app/utils";
+import {LoaderService} from "app/services";
+import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
+import {CommonGraphUtils} from "../../common/common-graph-utils";
+
+
+export class CompositionGraphGeneralUtils {
+
+    public componentRequirementsAndCapabilitiesCaching = new Dictionary<string, Component>();
+    protected static graphUtilsUpdateQueue:QueueUtils;
+
+    constructor(private $q:ng.IQService,
+                private LoaderService:LoaderService,
+                private commonGraphUtils:CommonGraphUtils,
+                private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils) {
+        CompositionGraphGeneralUtils.graphUtilsUpdateQueue = new QueueUtils(this.$q);
+    }
+
+
+    /**
+     * Get the offset for the link creation Menu
+     * @param point
+     * @returns {Cy.Position}
+     */
+    public calcMenuOffset:Function = (point:Cy.Position):Cy.Position => {
+        point.x = point.x + 60;
+        point.y = point.y + 105;
+        return point;
+    };
+
+    /**
+     *  return the top left position of the link menu
+     * @param cy
+     * @param targetNodePosition
+     * @returns {Cy.Position}
+     */
+    public getLinkMenuPosition = (cy:Cy.Instance, targetNodePosition:Cy.Position) => {
+        let menuPosition:Cy.Position = this.calcMenuOffset(targetNodePosition); //get the link mid point
+        if ($(document.body).height() < menuPosition.y + GraphUIObjects.LINK_MENU_HEIGHT + $(document.getElementsByClassName('sdc-composition-graph-wrapper')).offset().top) { // if position menu is overflow bottom
+            menuPosition.y = $(document.body).height() - GraphUIObjects.TOP_HEADER_HEIGHT - GraphUIObjects.LINK_MENU_HEIGHT;
+        }
+        return menuPosition;
+    };
+
+
+    /**
+     * will return true/false if two nodes overlapping
+     *
+     * @param graph node
+     */
+    private isNodesOverlapping(node:Cy.CollectionFirstNode, draggedNode:Cy.CollectionFirstNode):boolean {
+
+        let nodeBoundingBox:Cy.BoundingBox = node.renderedBoundingBox();
+        let secondNodeBoundingBox:Cy.BoundingBox = draggedNode.renderedBoundingBox();
+
+        return this.isBBoxOverlapping(nodeBoundingBox, secondNodeBoundingBox);
+    }
+
+    /**
+     * Checks whether the bounding boxes of two nodes are overlapping on any side
+     * @param nodeOneBBox
+     * @param nodeTwoBBox
+     * @returns {boolean}
+     */
+    private isBBoxOverlapping(nodeOneBBox:Cy.BoundingBox, nodeTwoBBox:Cy.BoundingBox) {
+        return (((nodeOneBBox.x1 < nodeTwoBBox.x1 && nodeOneBBox.x2 > nodeTwoBBox.x1) ||
+        (nodeOneBBox.x1 < nodeTwoBBox.x2 && nodeOneBBox.x2 > nodeTwoBBox.x2) ||
+        (nodeTwoBBox.x1 < nodeOneBBox.x1 && nodeTwoBBox.x2 > nodeOneBBox.x2)) &&
+        ((nodeOneBBox.y1 < nodeTwoBBox.y1 && nodeOneBBox.y2 > nodeTwoBBox.y1) ||
+        (nodeOneBBox.y1 < nodeTwoBBox.y2 && nodeOneBBox.y2 > nodeTwoBBox.y2) ||
+        (nodeTwoBBox.y1 < nodeOneBBox.y1 && nodeTwoBBox.y2 > nodeOneBBox.y2)))
+    }
+
+
+    /**
+     * Checks whether a specific component instance can be hosted on the UCPE instance
+     * @param cy - Cytoscape instance
+     * @param fromUcpeInstance
+     * @param toComponentInstance
+     * @returns {MatchReqToCapability}
+     */
+    public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):MatchReqToCapability {
+
+        let matches:Array<MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
+        let hostedOnMatch:MatchBase = _.find(matches, (match:MatchReqToCapability) => {
+            return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container';
+        });
+
+        return <MatchReqToCapability>hostedOnMatch;
+    };
+
+
+    /**
+     * Checks whether node can be dropped into UCPE
+     * @param cy
+     * @param nodeToInsert
+     * @param ucpeNode
+     * @returns {boolean}
+     */
+    private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean {
+
+        let hostedOnMatch:MatchReqToCapability = this.canBeHostedOn(cy, ucpeNode, nodeToInsert);
+        let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation
+        return result;
+
+    };
+
+
+    /**
+     * For drops from palette, checks whether the node can be dropped. If node is being held over another node, check if capable of hosting
+     * @param cy
+     * @param pseudoNodeBBox
+     * @param paletteComponentInstance
+     * @returns {boolean}
+     */
+    public isPaletteDropValid(cy:Cy.Instance, pseudoNodeBBox:Cy.BoundingBox, paletteComponentInstance:ComponentInstance) {
+
+        let componentIsUCPE:boolean = (paletteComponentInstance.capabilities && paletteComponentInstance.capabilities['tosca.capabilities.Container'] && paletteComponentInstance.name.toLowerCase().indexOf('ucpe') > -1);
+
+        if (componentIsUCPE && cy.nodes('[?isUcpe]').length > 0) { //second UCPE not allowed
+            return false;
+        }
+
+        let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => {
+
+            if (this.isBBoxOverlapping(pseudoNodeBBox, graphNode.renderedBoundingBox())) {
+                if (!componentIsUCPE && graphNode.data().isUcpe) {
+                    return !this.isValidDropInsideUCPE(cy, paletteComponentInstance, graphNode.data().componentInstance); //if this is valid insert into ucpe, we return false - no illegal overlapping nodes
+                }
+                return true;
+            }
+
+            return false;
+        });
+
+        return illegalOverlappingNodes.length === 0;
+    }
+
+    /**
+     * will return true/false if a drop of a single node is valid
+     *
+     * @param graph node
+     */
+    public isValidDrop(cy:Cy.Instance, draggedNode:Cy.CollectionFirstNode):boolean {
+
+        let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { //all sdc nodes, removing child nodes (childe node allways collaps
+
+            if (draggedNode.data().isUcpe && (graphNode.isChild() || graphNode.data().isInsideGroup)) { //ucpe cps always inside ucpe, no overlapping
+                return false;
+            }
+            if (draggedNode.data().isInsideGroup && (!draggedNode.active() || graphNode.data().isUcpe)) {
+                return false;
+            }
+
+            if (!draggedNode.data().isUcpe && !(draggedNode.data() instanceof CompositionCiNodeUcpeCp) && graphNode.data().isUcpe) { //case we are dragging a node into UCPE
+                let isEntirelyInUCPE:boolean = this.commonGraphUtils.isFirstBoxContainsInSecondBox(draggedNode.renderedBoundingBox(), graphNode.renderedBoundingBox());
+                if (isEntirelyInUCPE) {
+                    if (this.isValidDropInsideUCPE(cy, draggedNode.data().componentInstance, graphNode.data().componentInstance)) { //if this is valid insert into ucpe, we return false - no illegal overlapping nodes
+                        return false;
+                    }
+                }
+            }
+            return graphNode.data().id !== draggedNode.data().id && this.isNodesOverlapping(draggedNode, graphNode);
+
+        });
+        // return false;
+        return illegalOverlappingNodes.length === 0;
+    };
+
+    /**
+     * will return true/false if the move of the nodes is valid (no node overlapping and verifying if insert into UCPE is valid)
+     *
+     * @param  nodesArray - the selected drags nodes
+     */
+    public isGroupValidDrop(cy:Cy.Instance, nodesArray:Cy.CollectionNodes):boolean {
+        let filterDraggedNodes = nodesArray.filter('[?isDraggable]');
+        let isValidDrop = _.every(filterDraggedNodes, (node:Cy.CollectionFirstNode) => {
+            return this.isValidDrop(cy, node);
+
+        });
+        return isValidDrop;
+    };
+
+    /**
+     * get all links in diagram
+     * @param cy
+     * @returns {any[]|boolean[]}
+     */
+    public getAllCompositionCiLinks = (cy:Cy.Instance):Array<CompositionCiLinkBase> => {
+        return _.map(cy.edges("[isSdcElement]"), (edge:Cy.CollectionEdges) => {
+            return edge.data();
+        });
+    };
+
+
+    /**
+     * Get Graph Utils server queue
+     * @returns {QueueUtils}
+     */
+    public getGraphUtilsServerUpdateQueue():QueueUtils {
+        return CompositionGraphGeneralUtils.graphUtilsUpdateQueue;
+    }
+    ;
+
+    /**
+     *
+     * @param blockAction - true/false if this is a block action
+     * @param instances
+     * @param component
+     */
+    public pushMultipleUpdateComponentInstancesRequestToQueue = (blockAction:boolean, instances:Array<ComponentInstance>, component:Component):void => {
+        if (blockAction) {
+            this.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
+                () => component.updateMultipleComponentInstances(instances)
+            );
+        } else {
+            this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction(
+                () => component.updateMultipleComponentInstances(instances),
+                () => this.LoaderService.hideLoader('composition-graph'));
+        }
+    };
+
+    /**
+     * this function will update component instance data
+     * @param blockAction - true/false if this is a block action
+     * @param updatedInstance
+     */
+    public pushUpdateComponentInstanceActionToQueue = (component:Component, blockAction:boolean, updatedInstance:ComponentInstance):void => {
+
+        if (blockAction) {
+            this.LoaderService.showLoader('composition-graph');
+            this.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
+                () => component.updateComponentInstance(updatedInstance)
+            );
+        } else {
+            this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction(
+                () => component.updateComponentInstance(updatedInstance),
+                () => this.LoaderService.hideLoader('composition-graph'));
+        }
+    };
+}
+
+CompositionGraphGeneralUtils.$inject = ['$q', 'LoaderService', 'CommonGraphUtils', 'MatchCapabilitiesRequirementsUtils'];
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
new file mode 100644
index 0000000000..314c761edd
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
@@ -0,0 +1,271 @@
+/**
+ * Created by obarda on 6/28/2016.
+ */
+import {GraphUIObjects, ComponentInstanceFactory, ResourceType} from "app/utils";
+import {LeftPaletteLoaderService, LoaderService} from "app/services";
+import {
+    NodeUcpe,
+    CompositionCiNodeVf,
+    MatchReqToCapability,
+    MatchBase,
+    MatchReqToReq,
+    ComponentInstance,
+    CompositionCiNodeBase,
+    RelationshipModel,
+    RelationMenuDirectiveObj,
+    CapabilitiesGroup,
+    LinksFactory,
+    NodesFactory,
+    RequirementsGroup,
+    Component,
+    Relationship,
+    Capability,
+    LinkMenu,
+    Point,
+    CompositionCiLinkBase
+} from "app/models";
+import {CommonGraphUtils} from "../../common/common-graph-utils";
+import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
+import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
+
+export class CompositionGraphLinkUtils {
+
+    constructor(private linksFactory:LinksFactory,
+                private loaderService:LoaderService,
+                private generalGraphUtils:CompositionGraphGeneralUtils,
+                private commonGraphUtils:CommonGraphUtils,
+                private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils) {
+    }
+
+
+    /**
+     * Delete the link on server and then remove it from graph
+     * @param component
+     * @param releaseLoading - true/false release the loader when finished
+     * @param link - the link to delete
+     */
+    public deleteLink = (cy:Cy.Instance, component:Component, releaseLoading:boolean, link:Cy.CollectionEdges) => {
+
+        this.loaderService.showLoader('composition-graph');
+        let onSuccessDeleteRelation = (response) => {
+            cy.remove(link);
+        };
+
+        if (!releaseLoading) {
+            this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
+                () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation)
+            );
+        } else {
+            this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
+                () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation),
+                () => this.loaderService.hideLoader('composition-graph'));
+        }
+    };
+
+    /**
+     * create the link on server and than draw it on graph
+     * @param link - the link to create
+     * @param cy
+     * @param component
+     */
+    public createLink = (link:CompositionCiLinkBase, cy:Cy.Instance, component:Component):void => {
+
+        this.loaderService.showLoader('composition-graph');
+
+        let onSuccess:(response:RelationshipModel) => void = (relation:RelationshipModel) => {
+            link.setRelation(relation);
+            this.commonGraphUtils.insertLinkToGraph(cy, link);
+        };
+
+        link.updateLinkDirection();
+
+        this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
+            () => component.createRelation(link.relation).then(onSuccess),
+            () => this.loaderService.hideLoader('composition-graph')
+        );
+    };
+
+    private createSimpleLink = (match:MatchReqToCapability, 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 => {
+
+        if (chosenMatch) {
+            if (chosenMatch && chosenMatch instanceof MatchReqToCapability) {
+                this.createSimpleLink(chosenMatch, cy, component);
+            }
+        }
+    };
+
+
+    /**
+     * Filters the matches for UCPE links so that shown requirements and capabilites are only related to the selected ucpe-cp
+     * @param fromNode
+     * @param toNode
+     * @param matchesArray
+     * @returns {Array<MatchBase>}
+     */
+    public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<MatchBase>):any {
+
+        let matchLink:Array<MatchBase>;
+
+        if (fromNode.isUcpePart) {
+            matchLink = _.filter(matchesArray, (match:MatchBase) => {
+                return match.isOwner(fromNode.id);
+            });
+        }
+
+        if (toNode.isUcpePart) {
+            matchLink = _.filter(matchesArray, (match:MatchBase) => {
+                return match.isOwner(toNode.id);
+            });
+        }
+        return matchLink ? matchLink : matchesArray;
+    }
+
+
+    /**
+     * open the connect link menu if the link drawn is valid - match  requirements & capabilities
+     * @param cy
+     * @param fromNode
+     * @param toNode
+     * @returns {any}
+     */
+    public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):RelationMenuDirectiveObj {
+
+        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,
+            toNode.data().componentInstance, linkModel);
+
+        //filter relations found to limit to specific ucpe-cp
+        possibleRelations = this.filterUcpeLinks(fromNode.data(), toNode.data(), possibleRelations);
+
+        //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);
+        }
+        return null;
+    };
+
+
+    /**
+     *  when we drag instance in to UCPE or out of UCPE  - get all links we need to delete - one node in ucpe and one node outside of ucpe
+     * @param node - the node we dragged into or out of the ucpe
+     */
+    public deleteLinksWhenNodeMovedFromOrToUCPE(component:Component, cy:Cy.Instance, nodeMoved:Cy.CollectionNodes, vlsPendingDeletion?:Cy.CollectionNodes):void {
+
+
+        let linksToDelete:Cy.CollectionElements = cy.collection();
+        _.forEach(nodeMoved.neighborhood('node'), (neighborNode)=> {
+
+            if (neighborNode.data().isUcpePart) { //existing connections to ucpe or ucpe-cp - we want to delete even though nodeLocationsCompatible will technically return true
+                linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); // This will delete the ucpe-host-link, or the vl-ucpe-link if nodeMoved is vl
+            } else if (!this.commonGraphUtils.nodeLocationsCompatible(cy, nodeMoved, neighborNode)) { //connection to regular node or vl - check if locations are compatible
+                if (!vlsPendingDeletion || !vlsPendingDeletion.intersect(neighborNode).length) { //Check if this is a link to a VL pending deletion, to prevent double deletion of between the node moved and vl
+                    linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode));
+                }
+            }
+        });
+
+        linksToDelete.each((i, link)=> {
+            this.deleteLink(cy, component, false, link);
+        });
+
+    };
+
+    /**
+     * Creates a hostedOn link between a VF and UCPE
+     * @param component
+     * @param cy
+     * @param ucpeNode
+     * @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);
+        /* create relation */
+        let newRelation = new RelationshipModel();
+        newRelation.fromNode = ucpeNode.id;
+        newRelation.toNode = vfNode.id;
+
+        let link:CompositionCiLinkBase = this.linksFactory.createUcpeHostLink(newRelation);
+        link.relation = hostedOnMatch.matchToRelationModel();
+        this.createLink(link, cy, component);
+    };
+
+
+    /**
+     * 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.
+     * @param cy
+     * @param event
+     */
+    public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) {
+        if (cy.$('edge:selected').length > 2 && event.cyTarget[0].selected()) {
+            cy.$(':selected').unselect();
+        } else {
+
+            let vl:Cy.CollectionNodes = event.cyTarget[0].target('.vl-node');
+            let connectedEdges:Cy.CollectionEdges = vl.connectedEdges();
+            if (vl.length && connectedEdges.length > 1) {
+
+                setTimeout(() => {
+                    vl.select();
+                    connectedEdges.select();
+                }, 0);
+            }
+        }
+
+    }
+
+
+    /**
+     * Calculates the position for the menu that modifies an existing link
+     * @param event
+     * @param elementWidth
+     * @param elementHeight
+     * @returns {Point}
+     */
+    public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point {
+        let point:Point = new Point(event.originalEvent.x, event.originalEvent.y);
+        if (event.originalEvent.view.screen.height - elementHeight < point.y) {
+            point.y = event.originalEvent.view.screen.height - elementHeight;
+        }
+        if (event.originalEvent.view.screen.width - elementWidth < point.x) {
+            point.x = event.originalEvent.view.screen.width - elementWidth;
+        }
+        return point;
+    };
+
+
+    /**
+     * Gets the menu that is displayed when you click an existing link.
+     * @param link
+     * @param event
+     * @returns {LinkMenu}
+     */
+    public getModifyLinkMenu(link:Cy.CollectionFirstEdge, event:Cy.EventObject):LinkMenu {
+        let point:Point = this.calculateLinkMenuPosition(event, GraphUIObjects.MENU_LINK_VL_WIDTH_OFFSET, GraphUIObjects.MENU_LINK_VL_HEIGHT_OFFSET);
+        let menu:LinkMenu = new LinkMenu(point, true, link);
+        return menu;
+    };
+
+}
+
+
+CompositionGraphLinkUtils.$inject = [
+    'LinksFactory',
+    'LoaderService',
+    'CompositionGraphGeneralUtils',
+    'CommonGraphUtils',
+    'MatchCapabilitiesRequirementsUtils'
+];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
new file mode 100644
index 0000000000..96afc8a4ea
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
@@ -0,0 +1,266 @@
+import {Component, NodesFactory, ComponentInstance, CompositionCiNodeVl,IAppMenu,AssetPopoverObj} from "app/models";
+import {EventListenerService, LoaderService} from "app/services";
+import {GRAPH_EVENTS,ModalsHandler,GraphUIObjects} from "app/utils";
+import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
+import {CommonGraphUtils} from "../../common/common-graph-utils";
+/**
+ * Created by obarda on 11/9/2016.
+ */
+export class CompositionGraphNodesUtils {
+    constructor(private NodesFactory:NodesFactory, private $log:ng.ILogService,
+                private GeneralGraphUtils:CompositionGraphGeneralUtils,
+                private commonGraphUtils:CommonGraphUtils,
+                private eventListenerService:EventListenerService,
+                    private loaderService:LoaderService /*,
+                    private sdcMenu: IAppMenu,
+                    private ModalsHandler: ModalsHandler*/) {
+
+    }
+
+    /**
+     * Returns component instances for all nodes passed in
+     * @param nodes - Cy nodes
+     * @returns {any[]}
+     */
+    public getAllNodesData(nodes:Cy.CollectionNodes) {
+        return _.map(nodes, (node:Cy.CollectionFirstNode)=> {
+            return node.data();
+        })
+    };
+
+    /**
+     * Deletes component instances on server and then removes it from the graph as well
+     * @param cy
+     * @param component
+     * @param nodeToDelete
+     */
+    public deleteNode(cy:Cy.Instance, component:Component, nodeToDelete:Cy.CollectionNodes):void {
+
+        this.loaderService.showLoader('composition-graph');
+        let onSuccess:(response:ComponentInstance) => void = (response:ComponentInstance) => {
+            console.info('onSuccess', response);
+
+            //if node to delete is a UCPE, remove all children (except UCPE-CPs) and remove their "hostedOn" links
+            if (nodeToDelete.data().isUcpe) {
+                _.each(cy.nodes('[?isInsideGroup]'), (node)=> {
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, nodeToDelete);
+                });
+            }
+
+            //check whether the node is connected to any VLs that only have one other connection. If so, delete that VL as well
+            if (!(nodeToDelete.data() instanceof CompositionCiNodeVl)) {
+                let connectedVls:Array<Cy.CollectionFirstNode> = this.getConnectedVlToNode(nodeToDelete);
+                this.handleConnectedVlsToDelete(connectedVls);
+            }
+
+            //update UI
+            cy.remove(nodeToDelete);
+
+        };
+
+        let onFailed:(response:any) => void = (response:any) => {
+            console.info('onFailed', response);
+        };
+
+
+        this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
+            () => component.deleteComponentInstance(nodeToDelete.data().componentInstance.uniqueId).then(onSuccess, onFailed),
+            () => this.loaderService.hideLoader('composition-graph')
+        );
+
+    };
+
+/*
+        public confirmDeleteNode = (nodeId:string, cy:Cy.Instance, component:Component) => {
+            let node:Cy.CollectionNodes = cy.getElementById(nodeId);
+            let onOk = ():void => {
+                this.deleteNode(cy, component, node);
+            };
+
+            let componentInstance:ComponentInstance = node.data().componentInstance;
+            let state = "deleteInstance";
+            let title:string =  this.sdcMenu.alertMessages[state].title;
+            let message:string =  this.sdcMenu.alertMessages[state].message.format([componentInstance.name]);
+
+            this.ModalsHandler.openAlertModal(title, message).then(onOk);
+        };*/
+    /**
+     * Finds all VLs connected to a single node
+     * @param node
+     * @returns {Array<Cy.CollectionFirstNode>}
+     */
+    public getConnectedVlToNode = (node:Cy.CollectionNodes):Array<Cy.CollectionFirstNode> => {
+        let connectedVls:Array<Cy.CollectionFirstNode> = new Array<Cy.CollectionFirstNode>();
+        _.forEach(node.connectedEdges().connectedNodes(), (node:Cy.CollectionFirstNode) => {
+            if (node.data() instanceof CompositionCiNodeVl) {
+                connectedVls.push(node);
+            }
+        });
+        return connectedVls;
+    };
+
+
+    /**
+     * Delete all VLs that have only two connected nodes (this function is called when deleting a node)
+     * @param connectedVls
+     */
+    public handleConnectedVlsToDelete = (connectedVls:Array<Cy.CollectionFirstNode>) => {
+        _.forEach(connectedVls, (vlToDelete:Cy.CollectionNodes) => {
+
+            if (vlToDelete.connectedEdges().length === 2) { // if vl connected only to 2 nodes need to delete the vl
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, vlToDelete.data().componentInstance);
+            }
+        });
+    };
+
+
+    /**
+     * This function is called when moving a node in or out of UCPE.
+     * Deletes all connected VLs that have less than 2 valid connections remaining after the move
+     * Returns the collection of vls that are in the process of deletion (async) to prevent duplicate calls while deletion is in progress
+     * @param component
+     * @param cy
+     * @param node - node that was moved in/out of ucpe
+     */
+    public deleteNodeVLsUponMoveToOrFromUCPE = (component:Component, cy:Cy.Instance, node:Cy.CollectionNodes):Cy.CollectionNodes => {
+        if (node.data() instanceof CompositionCiNodeVl) {
+            return;
+        }
+
+        let connectedVLsToDelete:Cy.CollectionNodes = cy.collection();
+        _.forEach(node.neighborhood('node'), (connectedNode) => {
+
+            //Find all neighboring nodes that are VLs
+            if (connectedNode.data() instanceof CompositionCiNodeVl) {
+
+                //check VL's neighbors to see if it has 2 or more nodes whose location is compatible with VL (regardless of whether VL is in or out of UCPE)
+                let compatibleNodeCount = 0;
+                let vlNeighborhood = connectedNode.neighborhood('node');
+                _.forEach(vlNeighborhood, (vlNeighborNode)=> {
+                    if (this.commonGraphUtils.nodeLocationsCompatible(cy, connectedNode, vlNeighborNode)) {
+                        compatibleNodeCount++;
+                    }
+                });
+
+                if (compatibleNodeCount < 2) {
+                    connectedVLsToDelete = connectedVLsToDelete.add(connectedNode);
+                }
+            }
+        });
+
+        connectedVLsToDelete.each((i, vlToDelete:Cy.CollectionNodes)=> {
+            this.deleteNode(cy, component, vlToDelete);
+        });
+        return connectedVLsToDelete;
+    };
+
+    /**
+     * This function will update nodes position. if the new position is into or out of ucpe, the node will trigger the ucpe events
+     * @param cy
+     * @param component
+     * @param nodesMoved - the node/multiple nodes now moved by the user
+     */
+    public onNodesPositionChanged = (cy:Cy.Instance, component:Component, nodesMoved:Cy.CollectionNodes):void => {
+
+        if (nodesMoved.length === 0) {
+            return;
+        }
+
+        let isValidMove:boolean = this.GeneralGraphUtils.isGroupValidDrop(cy, nodesMoved);
+        if (isValidMove) {
+
+            this.$log.debug(`composition-graph::ValidDrop:: updating node position`);
+            let instancesToUpdateInNonBlockingAction:Array<ComponentInstance> = new Array<ComponentInstance>();
+
+            _.each(nodesMoved, (node:Cy.CollectionFirstNode)=> {  //update all nodes new position
+
+                if (node.data().isUcpePart && !node.data().isUcpe) {
+                    return;
+                }//No need to update UCPE-CPs
+
+                //update position
+                let newPosition:Cy.Position = this.commonGraphUtils.getNodePosition(node);
+                node.data().componentInstance.updatePosition(newPosition.x, newPosition.y);
+
+                //check if node moved to or from UCPE
+                let ucpe = this.commonGraphUtils.isInUcpe(node.cy(), node.boundingbox());
+                if (node.data().isInsideGroup || ucpe.length) {
+                    this.handleUcpeChildMove(node, ucpe, instancesToUpdateInNonBlockingAction);
+                } else {
+                    instancesToUpdateInNonBlockingAction.push(node.data().componentInstance);
+                }
+
+            });
+
+            if (instancesToUpdateInNonBlockingAction.length > 0) {
+                this.GeneralGraphUtils.pushMultipleUpdateComponentInstancesRequestToQueue(false, instancesToUpdateInNonBlockingAction, component);
+            }
+        } else {
+            this.$log.debug(`composition-graph::notValidDrop:: node return to latest position`);
+            //reset nodes position
+            nodesMoved.positions((i, node) => {
+                return {
+                    x: +node.data().componentInstance.posX,
+                    y: +node.data().componentInstance.posY
+                };
+            })
+        }
+
+        this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(() => {
+        }, () => {
+            this.loaderService.hideLoader('composition-graph');
+        });
+
+    };
+
+    /**
+     * Checks whether the node has been added or removed from UCPE and triggers appropriate events
+     * @param node - node moved
+     * @param ucpeContainer - UCPE container that the node has been moved to. When moving a node out of ucpe, param will be empty
+     * @param instancesToUpdateInNonBlockingAction
+     */
+    public handleUcpeChildMove(node:Cy.CollectionFirstNode, ucpeContainer:Cy.CollectionElements, instancesToUpdateInNonBlockingAction:Array<ComponentInstance>) {
+
+        if (node.data().isInsideGroup) {
+            if (ucpeContainer.length) { //moving node within UCPE. Simply update position
+                this.commonGraphUtils.updateUcpeChildPosition(<Cy.CollectionNodes>node, ucpeContainer);
+                instancesToUpdateInNonBlockingAction.push(node.data().componentInstance);
+            } else { //removing node from UCPE. Notify observers
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, ucpeContainer);
+            }
+        } else if (!node.data().isInsideGroup && ucpeContainer.length && !node.data().isUcpePart) { //adding node to UCPE
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, node, ucpeContainer, true);
+        }
+    }
+        /**
+         * Gets the position for the asset popover menu
+         * Then, check if right edge of menu would overlap horizontal screen edge (palette offset + canvas width - right panel)
+         * Then, check if bottom edge of menu would overlap the vertical end of the canvas.
+         * @param cy
+         * @param node
+         * @returns {Cy.Position}
+        
+        public createAssetPopover = (cy: Cy.Instance, node:Cy.CollectionFirstNode, isViewOnly:boolean):AssetPopoverObj => {
+
+            let menuOffset:Cy.Position = { x: node.renderedWidth() / 2, y: -(node.renderedWidth() / 2) };// getNodePositionWithOffset returns central point of node. First add node.renderedWidth()/2 to get its to border.
+            let menuPosition:Cy.Position = this.commonGraphUtils.getNodePositionWithOffset(node, menuOffset);
+            let menuSide:string = 'right';
+
+            if(menuPosition.x + GraphUIObjects.COMPOSITION_NODE_MENU_WIDTH >= cy.width() + GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET - GraphUIObjects.COMPOSITION_RIGHT_PANEL_OFFSET){
+                menuPosition.x -= menuOffset.x * 2 + GraphUIObjects.COMPOSITION_NODE_MENU_WIDTH; //menu position already includes offset to the right. Therefore, subtract double offset so we have same distance from node for menu on left
+                menuSide = 'left';
+            }
+
+            if(menuPosition.y + GraphUIObjects.COMPOSITION_NODE_MENU_HEIGHT >= cy.height()){
+                menuPosition.y = menuPosition.y - GraphUIObjects.COMPOSITION_NODE_MENU_HEIGHT - menuOffset.y * 2;
+            }
+
+            return new AssetPopoverObj(node.data().id, node.data().name, menuPosition, menuSide, isViewOnly);
+        };
+ */
+
+    }
+
+
+    CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService' /*, 'sdcMenu', 'ModalsHandler'*/]
+
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
new file mode 100644
index 0000000000..83bf747501
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
@@ -0,0 +1,163 @@
+import {EventListenerService, LoaderService} from "app/services";
+import {CapabilitiesGroup, NodesFactory, ComponentInstance, Component, CompositionCiNodeBase, RequirementsGroup} from "app/models";
+import {ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects} from "app/utils";
+import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
+import {CommonGraphUtils} from "../../common/common-graph-utils";
+import 'angular-dragdrop';
+import {LeftPaletteComponent} from "../../../../models/components/displayComponent";
+
+export class CompositionGraphPaletteUtils {
+
+    constructor(private ComponentFactory:ComponentFactory,
+                private $filter:ng.IFilterService,
+                private loaderService:LoaderService,
+                private generalGraphUtils:CompositionGraphGeneralUtils,
+                private componentInstanceFactory:ComponentInstanceFactory,
+                private nodesFactory:NodesFactory,
+                private commonGraphUtils:CommonGraphUtils,
+                private eventListenerService:EventListenerService) {
+    }
+
+    /**
+     * Calculate the dragged element (html element) position on canvas
+     * @param cy
+     * @param event
+     * @param position
+     * @returns {Cy.BoundingBox}
+     * @private
+     */
+    private _getNodeBBox(cy:Cy.Instance, event:IDragDropEvent, position?:Cy.Position) {
+        let bbox = <Cy.BoundingBox>{};
+        if (!position) {
+            position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event);
+        }
+        let cushionWidth:number = 40;
+        let cushionHeight:number = 40;
+
+        bbox.x1 = position.x - cushionWidth / 2;
+        bbox.y1 = position.y - cushionHeight / 2;
+        bbox.x2 = position.x + cushionWidth / 2;
+        bbox.y2 = position.y + cushionHeight / 2;
+        return bbox;
+    }
+
+    /**
+     * Create the component instance, update data from parent component in the left palette and notify on_insert_to_ucpe if component was dragg into ucpe
+     * @param cy
+     * @param fullComponent
+     * @param event
+     * @param component
+     */
+    private _createComponentInstanceOnGraphFromPaletteComponent(cy:Cy.Instance, fullComponent:LeftPaletteComponent, event:IDragDropEvent, component:Component) {
+
+        let componentInstanceToCreate:ComponentInstance = this.componentInstanceFactory.createComponentInstanceFromComponent(fullComponent);
+        let cytoscapePosition:Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event);
+
+        componentInstanceToCreate.posX = cytoscapePosition.x;
+        componentInstanceToCreate.posY = cytoscapePosition.y;
+
+
+        let onFailedCreatingInstance:(error:any) => void = (error:any) => {
+            this.loaderService.hideLoader('composition-graph');
+        };
+
+        //on success - update node data
+        let onSuccessCreatingInstance = (createInstance:ComponentInstance):void => {
+
+            this.loaderService.hideLoader('composition-graph');
+
+            createInstance.name = this.$filter('resourceName')(createInstance.name);
+            createInstance.requirements = new RequirementsGroup(createInstance.requirements);
+            createInstance.capabilities = new CapabilitiesGroup(createInstance.capabilities);
+            createInstance.componentVersion = fullComponent.version;
+            createInstance.icon = fullComponent.icon;
+            createInstance.setInstanceRC();
+
+            let newNode:CompositionCiNodeBase = this.nodesFactory.createNode(createInstance);
+            let cyNode:Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode);
+
+            //check if node was dropped into a UCPE
+            let ucpe:Cy.CollectionElements = this.commonGraphUtils.isInUcpe(cy, cyNode.boundingbox());
+            if (ucpe.length > 0) {
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false);
+            }
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE);
+
+        };
+
+        this.loaderService.showLoader('composition-graph');
+
+        // Create the component instance on server
+        this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => {
+            component.createComponentInstance(componentInstanceToCreate).then(onSuccessCreatingInstance, onFailedCreatingInstance);
+        });
+    }
+
+    /**
+     * Thid function applay red/green background when component dragged from palette
+     * @param cy
+     * @param event
+     * @param dragElement
+     * @param dragComponent
+     */
+    public onComponentDrag(cy:Cy.Instance, event:IDragDropEvent, dragElement:JQuery, dragComponent:ComponentInstance) {
+
+        if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop
+            dragElement.removeClass('red');
+            return;
+        }
+
+        let offsetPosition = {
+            x: event.clientX - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET,
+            y: event.clientY - GraphUIObjects.DIAGRAM_HEADER_OFFSET
+        };
+        let bbox = this._getNodeBBox(cy, event, offsetPosition);
+
+        if (this.generalGraphUtils.isPaletteDropValid(cy, bbox, dragComponent)) {
+            dragElement.removeClass('red');
+        } else {
+            dragElement.addClass('red');
+        }
+    }
+
+    /**
+     *  This function is called when after dropping node on canvas
+     *  Check if the capability & requirements fulfilled and if not get from server
+     * @param cy
+     * @param event
+     * @param component
+     */
+    public addNodeFromPalette(cy:Cy.Instance, event:IDragDropEvent, component:Component) {
+        this.loaderService.showLoader('composition-graph');
+
+        let draggedComponent:LeftPaletteComponent = event.dataTransfer.component;
+
+        if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) {
+            let fullComponent = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId);
+            draggedComponent.capabilities = fullComponent.capabilities;
+            draggedComponent.requirements = fullComponent.requirements;
+            this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component);
+
+        } else {
+
+            this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId)
+                .then((fullComponent:Component) => {
+                    draggedComponent.capabilities = fullComponent.capabilities;
+                    draggedComponent.requirements = fullComponent.requirements;
+                    this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component);
+                });
+        }
+    }
+}
+
+
+CompositionGraphPaletteUtils.$inject = [
+    'ComponentFactory',
+    '$filter',
+    'LoaderService',
+    'CompositionGraphGeneralUtils',
+    'ComponentInstanceFactory',
+    'NodesFactory',
+    'CommonGraphUtils',
+    'EventListenerService'
+];
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
new file mode 100644
index 0000000000..0e21f033be
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
@@ -0,0 +1,259 @@
+import {Requirement, CompositionCiLinkBase, ComponentInstance, CapabilitiesGroup, RequirementsGroup, MatchReqToCapability, MatchBase,
+    MatchReqToReq,CompositionCiNodeBase, Component, Capability} from "app/models";
+/**
+ * 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
+     * @param cy
+     */
+    public highlightMatchingComponents(filteredNodesData, cy:Cy.Instance) {
+        _.each(filteredNodesData, (data:any) => {
+            let node = cy.getElementById(data.id);
+            cy.emit('showhandle', [node]);
+        });
+    }
+
+    /**
+     * Adds opacity to each node that cannot be linked to hovered node
+     * @param filteredNodesData
+     * @param nodesData
+     * @param cy
+     * @param hoveredNodeData
+     */
+    public fadeNonMachingComponents(filteredNodesData, nodesData, cy:Cy.Instance, hoveredNodeData?) {
+        let fadeNodes = _.xorWith(nodesData, filteredNodesData, (node1, node2) => {
+            return node1.id === node2.id;
+        });
+        if (hoveredNodeData) {
+            _.remove(fadeNodes, hoveredNodeData);
+        }
+        cy.batch(()=> {
+            _.each(fadeNodes, (node) => {
+                cy.getElementById(node.id).style({'background-image-opacity': 0.4});
+            });
+        })
+    }
+
+    /**
+     * Resets all nodes to regular opacity
+     * @param cy
+     */
+    public resetFadedNodes(cy:Cy.Instance) {
+        cy.batch(()=> {
+            cy.nodes().style({'background-image-opacity': 1});
+        })
+    }
+
+    // -------------------------------------------ALL FUNCTIONS NEED REFACTORING---------------------------------------------------------------//
+
+    private static requirementFulfilled(fromNodeId:string, requirement:any, links:Array<CompositionCiLinkBase>):boolean {
+        return _.some(links, {
+            'relation': {
+                'fromNode': fromNodeId,
+                'relationships': [{
+                    'requirementOwnerId': requirement.ownerId,
+                    'requirement': requirement.name,
+                    'relationship': {
+                        'type': requirement.relationship
+                    }
+                }
+                ]
+            }
+        });
+    };
+
+    private static isMatch(requirement:Requirement, capability:Capability):boolean {
+        if (capability.type === requirement.capability) {
+            if (requirement.node) {
+                if (_.includes(capability.capabilitySources, requirement.node)) {
+                    return true;
+                }
+            } else {
+                return true;
+            }
+        }
+        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,
+            toComponentInstance.capabilities,
+            links,
+            fromComponentInstance.uniqueId,
+            toComponentInstance.uniqueId,
+            linkCapability);
+        let toFromMatches:Array<MatchReqToCapability> = this.getToFromMatches(toComponentInstance.requirements,
+            fromComponentInstance.capabilities,
+            links,
+            fromComponentInstance.uniqueId,
+            toComponentInstance.uniqueId);
+
+        return fromToMatches.concat(toFromMatches);
+    }
+
+
+    /**
+     * 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[]}
+     */
+    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);
+                                    }
+                                });
+                            });
+                        }
+                    });
+                });
+            });
+        }
+
+        // STEP II
+        {
+            let requirements:any = component.requirements;
+            let fromNodeId:string = component.uniqueId;
+            let linkCapability:Array<Capability> = vl ? vl.capabilities.findValueByKey('linkable') : undefined;
+
+            _.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);
+                                            }
+                                        });
+                                    });
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+        }
+
+        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
new file mode 100644
index 0000000000..5ad6570013
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
@@ -0,0 +1,122 @@
+import {Component, Module, NodesFactory, ComponentInstance} from "app/models";
+import {ComponentInstanceFactory} from "app/utils";
+import {DeploymentGraphGeneralUtils} from "./deployment-utils/deployment-graph-general-utils";
+import {CommonGraphUtils} from "../common/common-graph-utils";
+import {ComponentInstanceNodesStyle} from "../common/style/component-instances-nodes-style";
+import {ModulesNodesStyle} from "../common/style/module-node-style";
+import {GRAPH_EVENTS} from "app/utils";
+import {EventListenerService} from "app/services";
+import 'cytoscape-expand-collapse';
+
+interface IDeploymentGraphScope extends ng.IScope {
+    component:Component;
+}
+
+export class DeploymentGraph implements ng.IDirective {
+    private _cy:Cy.Instance;
+
+    constructor(private NodesFactory:NodesFactory, private commonGraphUtils:CommonGraphUtils,
+                private deploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, private ComponentInstanceFactory:ComponentInstanceFactory, private eventListenerService:EventListenerService) {
+    }
+
+    restrict = 'E';
+    template = require('./deployment-graph.html');
+    scope = {
+        component: '=',
+        isViewOnly: '='
+    };
+
+    link = (scope:IDeploymentGraphScope, el:JQuery) => {
+
+        if (scope.component.isResource()) {
+            if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.groups) {
+                this.loadGraph(scope, el);
+            } else {
+                this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED, () => {
+                    this.loadGraph(scope, el);
+                });
+            }
+        }
+    };
+
+
+    public initGraphNodes = (cy:Cy.Instance, component:Component):void => {
+        if (component.groups) { // Init module nodes
+            _.each(component.groups, (groupModule:Module) => {
+                let moduleNode = this.NodesFactory.createModuleNode(groupModule);
+                this.commonGraphUtils.addNodeToGraph(cy, moduleNode);
+
+            });
+        }
+        _.each(component.componentInstances, (instance:ComponentInstance) => { // Init component instance nodes
+            let componentInstanceNode = this.NodesFactory.createNode(instance);
+            componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.groups, instance.uniqueId);
+            if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
+                this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, componentInstanceNode);
+            }
+        });
+
+        // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
+        // so we must add an empty dummy child node
+        _.each(this._cy.nodes('[?isGroup]'), (moduleNode:Cy.CollectionFirstNode) => {
+            if (!moduleNode.isParent()) {
+                let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance();
+                let componentInstanceNode = this.NodesFactory.createNode(dummyInstance);
+                componentInstanceNode.parent = moduleNode.id();
+                let dummyNode = this.commonGraphUtils.addNodeToGraph(cy, componentInstanceNode, moduleNode.position());
+                dummyNode.addClass('dummy-node');
+            }
+        })
+    };
+
+    private registerGraphEvents() {
+
+        this._cy.on('afterExpand', (event) => {
+            event.cyTarget.qtip({});
+        });
+
+        this._cy.on('afterCollapse', (event) => {
+            this.commonGraphUtils.initNodeTooltip(event.cyTarget);
+        });
+    }
+
+    private loadGraph = (scope:IDeploymentGraphScope, el:JQuery) => {
+
+        let graphEl = el.find('.sdc-deployment-graph-wrapper');
+        this._cy = cytoscape({
+            container: graphEl,
+            style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()),
+            zoomingEnabled: false,
+            selectionType: 'single',
+
+        });
+
+        //adding expand collapse extension
+        this._cy.expandCollapse({
+            layoutBy: {
+                name: "grid",
+                animate: true,
+                randomize: false,
+                fit: true
+            },
+            fisheye: false,
+            undoable: false,
+            expandCollapseCueSize: 18,
+            expandCueImage: '/assets/styles/images/resource-icons/' + 'closeModule.png',
+            collapseCueImage: '/assets/styles/images/resource-icons/' + 'openModule.png',
+            expandCollapseCueSensitivity: 2,
+            cueOffset: -20
+        });
+
+        this.initGraphNodes(this._cy, scope.component); //creating instances nodes
+        this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations);
+        this._cy.collapseAll();
+        this.registerGraphEvents();
+    };
+
+    public static factory = (NodesFactory:NodesFactory, CommonGraphUtils:CommonGraphUtils, DeploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, ComponentInstanceFactory:ComponentInstanceFactory, EventListenerService:EventListenerService) => {
+        return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService)
+    }
+}
+
+DeploymentGraph.factory.$inject = ['NodesFactory', 'CommonGraphUtils', 'DeploymentGraphGeneralUtils', 'ComponentInstanceFactory', 'EventListenerService'];
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html
new file mode 100644
index 0000000000..56c2d8b200
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html
@@ -0,0 +1,2 @@
+<div  class="sdc-deployment-graph-wrapper"  ng-class="{'view-only':isViewOnly}">
+</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less
new file mode 100644
index 0000000000..f83ee8a891
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less
@@ -0,0 +1,14 @@
+deployment-graph {
+  display: block;
+  height:100%;
+  width: 100%;
+
+  .sdc-deployment-graph-wrapper {
+    height:100%;
+    width: 100%;
+  }
+
+  .view-only{
+    background-color:rgb(248, 248, 248);
+  }
+}
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
new file mode 100644
index 0000000000..368455cb24
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
@@ -0,0 +1,22 @@
+import {Module} from "app/models";
+/**
+ * Created by obarda on 12/21/2016.
+ */
+
+export class DeploymentGraphGeneralUtils {
+
+    constructor() {
+
+    }
+
+    public findInstanceModule = (groupsArray:Array<Module>, componentInstanceId:string):string => {
+        let parentGroup:Module = _.find(groupsArray, (group:Module) => {
+            return _.find(group.members, (member) => {
+                return member === componentInstanceId;
+            });
+        });
+        return parentGroup ? parentGroup.uniqueId : "";
+    };
+}
+
+DeploymentGraphGeneralUtils.$inject = [];
diff --git a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
new file mode 100644
index 0000000000..1bafb2f32b
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
@@ -0,0 +1,45 @@
+'use strict';
+export class ImageCreatorService {
+    static '$inject' = ['$q'];
+    private _canvas:HTMLCanvasElement;
+
+    constructor(private $q:ng.IQService) {
+        this._canvas = <HTMLCanvasElement>$('<canvas>')[0];
+        this._canvas.setAttribute('style', 'display:none');
+
+        let body = document.getElementsByTagName('body')[0];
+        body.appendChild(this._canvas);
+    }
+
+    getImageBase64(imageBaseUri:string, imageLayerUri:string):ng.IPromise<string> {
+        let deferred = this.$q.defer();
+        let imageBase = new Image();
+        let imageLayer = new Image();
+        let imagesLoaded = 0;
+        let onImageLoaded = () => {
+            imagesLoaded++;
+
+            if (imagesLoaded < 2) {
+                return;
+            }
+            this._canvas.setAttribute('width', imageBase.width.toString());
+            this._canvas.setAttribute('height', imageBase.height.toString());
+
+            let canvasCtx = this._canvas.getContext('2d');
+            canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+
+            canvasCtx.drawImage(imageBase, 0, 0, imageBase.width, imageBase.height);
+            canvasCtx.drawImage(imageLayer, imageBase.width - imageLayer.width, 0, imageLayer.width, imageLayer.height);
+
+            let base64Image = this._canvas.toDataURL();
+            deferred.resolve(base64Image);
+        };
+
+        imageBase.onload = onImageLoaded;
+        imageLayer.onload = onImageLoaded;
+        imageBase.src = imageBaseUri;
+        imageLayer.src = imageLayerUri;
+
+        return deferred.promise;
+    }
+}
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts b/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
new file mode 100644
index 0000000000..26c042611c
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
@@ -0,0 +1,7 @@
+interface IDragDropEvent extends JQueryEventObject {
+    dataTransfer: any;
+    toElement: {
+        naturalWidth: number;
+        naturalHeight: number;
+    }
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..4bfbe5270e
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -0,0 +1,349 @@
+import {
+    Component,
+    IAppMenu,
+    LeftPanelModel,
+    NodesFactory,
+    LeftPaletteComponent,
+    CompositionCiNodeBase,
+    ComponentInstance
+} from "app/models";
+import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils";
+import {EventListenerService} from "app/services";
+import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils";
+import 'angular-dragdrop';
+import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service";
+
+interface IPaletteScope {
+    components:Array<LeftPaletteComponent>;
+    currentComponent:Component;
+    model:any;
+    displaySortedCategories:any;
+    expandedSection:string;
+    dragElement:JQuery;
+    dragbleNode:{
+        event:JQueryEventObject,
+        components:LeftPaletteComponent,
+        ui:any
+    }
+
+    sectionClick:(section:string)=>void;
+    searchComponents:(searchText:string)=>void;
+    onMouseOver:(displayComponent:LeftPaletteComponent)=>void;
+    onMouseOut:(displayComponent:LeftPaletteComponent)=>void;
+    dragStartCallback:(event:JQueryEventObject, ui, displayComponent:LeftPaletteComponent)=>void;
+    dragStopCallback:()=>void;
+    onDragCallback:(event:JQueryEventObject) => void;
+
+    setElementTemplate:(e:JQueryEventObject)=>void;
+
+    isOnDrag:boolean;
+    isDragable:boolean;
+    isLoading:boolean;
+    isViewOnly:boolean;
+}
+
+export class Palette implements ng.IDirective {
+    constructor(private $log:ng.ILogService,
+                private LeftPaletteLoaderService: LeftPaletteLoaderService,
+                private sdcConfig,
+                private ComponentFactory,
+                private ComponentInstanceFactory:ComponentInstanceFactory,
+                private NodesFactory:NodesFactory,
+                private CompositionGraphGeneralUtils:CompositionGraphGeneralUtils,
+                private EventListenerService:EventListenerService,
+                private sdcMenu:IAppMenu,
+                private ModalsHandler:ModalsHandler) {
+
+    }
+
+    private fetchingComponentFromServer:boolean = false;
+    private nodeHtmlSubstitute:JQuery;
+
+    scope = {
+        currentComponent: '=',
+        isViewOnly: '=',
+        isLoading: '='
+    };
+    restrict = 'E';
+    template = require('./palette.html');
+
+    link = (scope:IPaletteScope, el:JQuery) => {
+        this.nodeHtmlSubstitute = $('<div class="node-substitute"><span></span><img /></div>');
+        el.append(this.nodeHtmlSubstitute);
+        this.registerEventListenerForLeftPalette(scope);
+        // this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent.componentType);
+                   
+        this.initComponents(scope);
+        this.initEvents(scope);
+        this.initDragEvents(scope);
+        this._initExpandedSection(scope, '');
+        el.on('$destroy', ()=> {
+            //remove listener of download event
+            this.unRegisterEventListenerForLeftPalette(scope);
+        });
+    };
+
+    private registerEventListenerForLeftPalette = (scope:IPaletteScope):void => {
+        if (scope.currentComponent.isResource()) {
+            this.EventListenerService.registerObserverCallback(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT, () => {
+                this.updateLeftPanelDisplay(scope);
+            });
+        }
+        if (scope.currentComponent.isService()) {
+            this.EventListenerService.registerObserverCallback(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT, () => {
+                this.updateLeftPanelDisplay(scope);
+            });
+        }
+        if (scope.currentComponent.isProduct()) {
+            this.EventListenerService.registerObserverCallback(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT, () => {
+                this.updateLeftPanelDisplay(scope);
+            });
+        }
+    };
+
+    private unRegisterEventListenerForLeftPalette = (scope:IPaletteScope):void => {
+        if (scope.currentComponent.isResource()) {
+            this.EventListenerService.unRegisterObserver(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT);
+        }
+        if (scope.currentComponent.isService()) {
+            this.EventListenerService.unRegisterObserver(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT);
+        }
+        if (scope.currentComponent.isProduct()) {
+            this.EventListenerService.unRegisterObserver(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT);
+        }
+    };
+
+    private leftPanelResourceFilter(resourcesNotAbstract:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):Array<LeftPaletteComponent> {
+        let filterResources = _.filter(resourcesNotAbstract, (component) => {
+            return resourceFilterTypes.indexOf(component.getComponentSubType()) > -1;
+        });
+        return filterResources;
+    }
+
+    private initLeftPanel(leftPanelComponents:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):LeftPanelModel {
+        let leftPanelModel = new LeftPanelModel();
+
+        if (resourceFilterTypes && resourceFilterTypes.length) {
+            leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes);
+        }
+        leftPanelModel.numberOfElements = leftPanelComponents && leftPanelComponents.length || 0;
+
+        if (leftPanelComponents && leftPanelComponents.length) {
+
+            let categories:any = _.groupBy(leftPanelComponents, 'mainCategory');
+            for (let category in categories)
+                categories[category] = _.groupBy(categories[category], 'subCategory');
+
+            leftPanelModel.sortedCategories = categories;
+        }
+        return leftPanelModel;
+    }
+
+
+    private initEvents(scope:IPaletteScope) {
+        /**
+         *
+         * @param section
+         */
+        scope.sectionClick = (section:string) => {
+            if (section === scope.expandedSection) {
+                scope.expandedSection = '';
+                return;
+            }
+            scope.expandedSection = section;
+        };
+
+        scope.onMouseOver = (displayComponent:LeftPaletteComponent) => {
+            if (scope.isOnDrag) {
+                return;
+            }
+            scope.isOnDrag = true;
+
+            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 = () => {
+            scope.isOnDrag = false;
+            this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
+        }
+    }
+
+    private initComponents(scope:IPaletteScope) {
+        scope.searchComponents = (searchText:any):void => {
+            scope.displaySortedCategories = this._searchComponents(searchText, scope.model.sortedCategories);
+            this._initExpandedSection(scope, searchText);
+        };
+
+        scope.isDragable = scope.currentComponent.isComplex();
+        this.updateLeftPanelDisplay(scope);
+    }
+
+    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.componentType);
+        scope.model = this.initLeftPanel(scope.components, resourceFilterTypes);
+        scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
+    };
+
+    private _initExpandedSection(scope:IPaletteScope, searchText:string):void {
+        if (searchText == '') {
+            let isContainingCategory:boolean = false;
+            let categoryToExpand:string;
+            if (scope.currentComponent && scope.currentComponent.categories && scope.currentComponent.categories[0]) {
+                categoryToExpand = this.sdcMenu.categoriesDictionary[scope.currentComponent.categories[0].name];
+                for (let category in scope.model.sortedCategories) {
+                    if (categoryToExpand == category) {
+                        isContainingCategory = true;
+                        break;
+                    }
+                }
+            }
+            isContainingCategory ? scope.expandedSection = categoryToExpand : scope.expandedSection = 'Generic';
+        }
+        else {
+            scope.expandedSection = Object.keys(scope.displaySortedCategories).sort()[0];
+        }
+    };
+
+    private initDragEvents(scope:IPaletteScope) {
+        scope.dragStartCallback = (event:IDragDropEvent, ui, displayComponent:LeftPaletteComponent):void => {
+            if (scope.isLoading || !scope.isDragable || scope.isViewOnly) {
+                return;
+            }
+
+            let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType), (componentFullData:LeftPaletteComponent) => {
+                return displayComponent.uniqueId === componentFullData.uniqueId;
+            });
+            this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component);
+
+            scope.isOnDrag = true;
+
+            // this.graphUtils.showMatchingNodes(component, myDiagram, scope.sdcConfig.imagesPath);
+            // document.addEventListener('mousemove', moveOnDocument);
+            event.dataTransfer.component = component;
+        };
+
+        scope.dragStopCallback = () => {
+            scope.isOnDrag = false;
+        };
+
+        scope.onDragCallback = (event:IDragDropEvent):void => {
+            this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, event);
+        };
+        scope.setElementTemplate = (e) => {
+            let dragComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType),
+                (fullComponent:LeftPaletteComponent) => {
+                    return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId;
+                });
+            let componentInstance:ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
+            let node:CompositionCiNodeBase = this.NodesFactory.createNode(componentInstance);
+
+            // myDiagram.dragFromPalette = node;
+            this.nodeHtmlSubstitute.find("img").attr('src', node.img);
+            scope.dragElement = this.nodeHtmlSubstitute.clone().show();
+
+            return scope.dragElement;
+        };
+    }
+
+    private _searchComponents = (searchText:string, categories:any):void => {
+        let displaySortedCategories = angular.copy(categories);
+        if (searchText != '') {
+            angular.forEach(categories, function (category:any, categoryKey) {
+
+                angular.forEach(category, function (subcategory:Array<LeftPaletteComponent>, subcategoryKey) {
+                    let filteredResources = [];
+                    angular.forEach(subcategory, function (component:LeftPaletteComponent) {
+
+                        let resourceFilterTerm:string = component.searchFilterTerms;
+                        if (resourceFilterTerm.indexOf(searchText.toLowerCase()) >= 0) {
+                            filteredResources.push(component);
+                        }
+                    });
+                    if (filteredResources.length > 0) {
+                        displaySortedCategories[categoryKey][subcategoryKey] = filteredResources;
+                    }
+                    else {
+                        delete  displaySortedCategories[categoryKey][subcategoryKey];
+                    }
+                });
+                if (!(Object.keys(displaySortedCategories[categoryKey]).length > 0)) {
+                    delete  displaySortedCategories[categoryKey];
+                }
+
+            });
+        }
+        return displaySortedCategories;
+    };
+
+    public static factory = ($log,
+                             LeftPaletteLoaderService,
+                             sdcConfig,
+                             ComponentFactory,
+                             ComponentInstanceFactory,
+                             NodesFactory,
+                             CompositionGraphGeneralUtils,
+                             EventListenerService,
+                             sdcMenu,
+                             ModalsHandler) => {
+        return new Palette($log,
+            LeftPaletteLoaderService,
+            sdcConfig,
+            ComponentFactory,
+            ComponentInstanceFactory,
+            NodesFactory,
+            CompositionGraphGeneralUtils,
+            EventListenerService,
+            sdcMenu,
+            ModalsHandler);
+    };
+}
+
+Palette.factory.$inject = [
+    '$log',
+    'LeftPaletteLoaderService',
+    'sdcConfig',
+    'ComponentFactory',
+    'ComponentInstanceFactory',
+    'NodesFactory',
+    'CompositionGraphGeneralUtils',
+    'EventListenerService',
+    'sdcMenu',
+    'ModalsHandler'
+];
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
new file mode 100644
index 0000000000..4b123e5777
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
@@ -0,0 +1,57 @@
+<div class="w-sdc-designer-leftbar">
+    <div class="w-sdc-designer-leftbar-title">Elements <span class="w-sdc-designer-leftbar-title-count">{{model.numberOfElements}}</span>
+    </div>
+
+    <div class="w-sdc-designer-leftbar-search">
+        <input type="text" class="w-sdc-designer-leftbar-search-input" placeholder="Search..."
+               data-ng-model="searchText" data-ng-change="searchComponents(searchText)"
+               ng-model-options="{ debounce: 500 }" data-tests-id="searchAsset"/>
+        <span class="w-sdc-search-icon leftbar" data-ng-class="{'cancel':searchText, 'magnification':!searchText}"
+              data-ng-click="searchText=''; searchComponents('',categories)"></span>
+    </div>
+    <div class="i-sdc-designer-leftbar-section"
+         data-ng-repeat="(entityCategory, objCategory) in displaySortedCategories track by $index"
+         data-ng-class="{'expanded': expandedSection.indexOf(entityCategory) !== -1}">
+        <div class="i-sdc-designer-leftbar-section-title pointer" data-ng-click="sectionClick(entityCategory)"
+             data-tests-id="leftbar-section-title-{{entityCategory}}">
+            {{entityCategory}}
+            <div class="i-sdc-designer-leftbar-section-title-icon"></div>
+        </div>
+        <div class="i-sdc-designer-leftbar-section-content"
+             data-ng-repeat="(subCategory, components) in objCategory track by $index">
+            <div class="i-sdc-designer-leftbar-section-content-subcat i-sdc-designer-leftbar-section-content-item">
+                {{subCategory}}
+            </div>
+            <div class="i-sdc-designer-leftbar-section-content-item"
+                 data-ng-class="{'default-pointer': isViewOnly}"
+                 data-ng-mouseover="!isViewOnly && onMouseOver(component)"
+                 data-ng-mouseleave="!isViewOnly && onMouseOut()"
+                 data-drag="{{!isViewOnly}}"
+                 data-jqyoui-options="{revert: 'invalid', helper:setElementTemplate, appendTo:'body', cursorAt: {left:38, top: 38}, cursor:'move'}"
+                 jqyoui-draggable="{index:{{$index}},animate:true,onStart:'dragStartCallback(component)',onStop:'dragStopCallback()', onDrag:'onDragCallback()'}"
+                 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}}"
+                         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">
+                        </div>
+                    </div>
+                </div>
+                <div class="i-sdc-designer-leftbar-section-content-item-info">
+                        <span class="i-sdc-designer-leftbar-section-content-item-info-title"
+                              uib-tooltip="{{component.displayName}}" tooltip-class="uib-custom-tooltip"
+                              tooltip-placement="bottom" tooltip-popup-delay="700">
+                            {{component.displayName}}</span>
+                    <div class="i-sdc-designer-leftbar-section-content-item-info-text">
+                        V.{{component.version}}
+                    </div>
+                    <div class="i-sdc-designer-leftbar-section-content-item-info-text"> Type:
+                        {{component.componentSubType}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.less b/catalog-ui/src/app/directives/graphs-v2/palette/palette.less
new file mode 100644
index 0000000000..85657a43a5
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.less
@@ -0,0 +1,92 @@
+.drag-icon-border{
+  border: 7px solid red;
+  border-radius: 500px;
+  -webkit-border-radius: 500px;
+  -moz-border-radius: 500px;
+  width: 53px;
+  height: 53px;
+}
+
+.drag-icon-circle{
+  width: 60px;
+  height: 60px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  position: relative;
+
+}
+
+
+@green-shadow: rgba(29, 154, 149, 0.3);
+@red-shadow: rgba(218, 31, 61, 0.3);
+.drag-icon-circle .sprite-resource-icons {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.drag-icon-circle.red {
+  background: @red-shadow;
+}
+
+.drag-icon-circle.green {
+  background: @green-shadow;
+}
+
+
+.node-substitute {
+  display: none;
+  position: absolute;
+  z-index: 9999;
+  height: 80px;
+  width: 80px;
+  border-radius: 50%;
+  text-align: center;
+
+  span {
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+  }
+
+  img {
+    height: 40px;
+    width: 40px;
+    box-shadow: 0 0 0 10px @green-shadow;
+    border-radius: 50%;
+
+    -webkit-user-drag: none;
+    -moz-user-drag: none;
+    user-drag: none;
+  }
+  &.red img {
+    box-shadow: 0 0 0 10px @red-shadow;
+  }
+  &.bounce img {
+    -moz-animation:bounceOut 0.3s linear;
+    -webkit-animation:bounceOut 0.3s linear;
+    animation:bounceOut 0.3s linear;
+  }
+}
+
+@keyframes bounceOut {
+  0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
+  60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
+  85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
+  100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
+}
+
+@-moz-keyframes bounceOut {
+  0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
+  60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
+  85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
+  100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
+}
+
+@-webkit-keyframes bounceOut {
+  0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
+  60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
+  85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
+  100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
+}
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
new file mode 100644
index 0000000000..a0a9e4af27
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html
@@ -0,0 +1,63 @@
+<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'}" >
+    <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 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 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 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 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}">
+        <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>
+
+        <sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="mptmp"
+                          disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.mp2mpVL"
+                          text="Multi point" elem-id="radioMPTMP" elem-name="vlType"></sdc-radio-button>
+
+        <span class="sprite-new info-icon" tooltips tooltip-content="You are required to choose the type of the Virtual Link."></span>
+    </div>
+
+    <div class="result" sdc-smart-tooltip>&#8203;{{relationMenuDirectiveObj.selectionText}}
+
+    </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)"
+            data-ng-click="saveRelation()">Connect</button>
+</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.less b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.less
new file mode 100644
index 0000000000..dea814dbec
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.less
@@ -0,0 +1,118 @@
+.link-menu-open {
+    display: block !important;
+    color: @main_color_m;
+    font-size: 14px;
+    position: absolute;
+    z-index: 99999;
+    border-radius: 2px;
+    background-color:  #ffffff;
+    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
+    width: 460px;
+    height: 418px;
+
+    h4 {
+        width: 50%;
+        float: left;
+        background-color: @tlv_color_u;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 36px;
+        margin: 0;
+        padding: 0 15px;
+
+        & + h4 {
+            border-left: #d8d8d8 1px solid;
+        }
+    }
+    p {
+        clear: both;
+        text-indent: 15px;
+        border-bottom: #d8d8d8 1px solid;
+        line-height: 34px;
+        margin: 0;
+        color: @func_color_s;
+    }
+
+    .scrollbar-container {
+        height: 232px;
+        width: 50%;
+        float: left;
+        margin-bottom: 5px;
+        .perfect-scrollbar;
+
+        & + .scrollbar-container {
+            border-left: #d8d8d8 1px solid;
+        }
+
+        .inner-title {
+            width: 189px;
+            margin: 5px auto 3px auto;
+            //text-indent: 10px;
+            color: @func_color_s;
+            text-transform: uppercase;
+            font-weight: bold;
+
+            //&:not(:first-child) {
+            //    margin-top: 10px;
+            //}
+        }
+
+        .link-item {
+            padding: 0 10px;
+            line-height: 23px;
+            height: 23px;
+            text-indent: 5px;
+            .hand;
+
+            &.selected {
+                background-color:  @tlv_color_v;
+            }
+        }
+    }
+
+    .vl-type {
+        height: 33px;
+        border-top: #d8d8d8 solid 1px;
+        clear: both;
+        padding: 0 10px;
+        line-height: 32px;
+        color: @main_color_m;
+
+        &.disabled {
+            background-color: #f2f2f2;
+            color: @color_m;
+        }
+        .info-icon {
+            float:right;
+            margin-top: 9px;
+        }
+        .tlv-radio {
+            margin-right: 10px;
+        }
+    }
+
+    .result {
+        background-color: @main_color_m;
+        line-height: 29px;
+        color:  #ffffff;
+        padding: 0 15px;
+    }
+
+    button {
+        float: right;
+        margin-top: 9px;
+        margin-right: 10px;
+    }
+}
+.link-menu-item {
+    cursor: pointer;
+    line-height: 24px;
+    padding: 0 10px;
+    &:hover {
+        color: @color_a;
+    }
+}
+.link-menu::before {
+    right: inherit !important;
+    left: 50px;
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..b05385b668
--- /dev/null
+++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts
@@ -0,0 +1,103 @@
+/*-
+ * ============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 {MatchBase, RelationMenuDirectiveObj} from "app/models";
+import {Component} from "../../../models/components/component";
+
+export interface IRelationMenuScope extends ng.IScope {
+    relationMenuDirectiveObj:RelationMenuDirectiveObj;
+    createRelation:Function;
+    isLinkMenuOpen:boolean;
+    hideRelationMatch:Function;
+    cancel:Function;
+
+    saveRelation();
+    showMatch(arr1:Array<MatchBase>, arr2:Array<MatchBase>):boolean;
+    hasMatchesToShow(matchesObj:MatchBase, selectedMatch:Array<MatchBase>);
+    updateSelectionText():void;
+
+}
+
+
+export class RelationMenuDirective implements ng.IDirective {
+
+    constructor(private $filter:ng.IFilterService) {
+    }
+
+    scope = {
+        relationMenuDirectiveObj: '=',
+        isLinkMenuOpen: '=',
+        createRelation: '&',
+        cancel: '&'
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./relation-menu.html');
+    };
+
+    link = (scope:IRelationMenuScope, element:JQuery, $attr:ng.IAttributes) => {
+
+        scope.saveRelation = ():void=> {
+            let chosenMatches:Array<any> = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch);
+            let chosenMatch:MatchBase = chosenMatches[0];
+            scope.createRelation()(chosenMatch);
+        };
+
+
+        scope.hideRelationMatch = () => {
+            scope.isLinkMenuOpen = false;
+            scope.cancel();
+        };
+
+        //to show options in link menu
+        scope.showMatch = (arr1:Array<MatchBase>, arr2:Array<MatchBase>):boolean => {
+            return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0;
+        };
+
+        //to show requirements/capabilities title
+        scope.hasMatchesToShow = (matchesObj:MatchBase, selectedMatch:Array<MatchBase>):boolean => {
+            let result:boolean = false;
+            _.forEach(matchesObj, (matchesArr:Array<MatchBase>) => {
+                if (!result) {
+                    result = scope.showMatch(matchesArr, selectedMatch);
+                }
+            });
+            return result;
+        };
+
+
+        scope.updateSelectionText = ():void => {
+            let left:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].getDisplayText('left')) : '';
+            let both:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch && scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? ' - ' +
+            this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].requirement.relationship) + ' - ' : '';
+            let right:string = scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch[0].getDisplayText('right')) : '';
+            scope.relationMenuDirectiveObj.selectionText = left + both + right;
+        };
+
+
+    }
+    public static factory = ($filter:ng.IFilterService)=> {
+        return new RelationMenuDirective($filter);
+    };
+}
+
+RelationMenuDirective.factory.$inject = ['$filter'];
diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html
new file mode 100644
index 0000000000..5c2bdcf5f1
--- /dev/null
+++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html
@@ -0,0 +1,10 @@
+<div>
+    <span class="sprite-new info-icon hand" data-ng-click="showMessage=!showMessage"></span>
+    <div class="info-tooltip" data-ng-show="showMessage">
+        <div class="info-tooltip-arrow"></div>
+        <div class="info-tooltip-content" data-ng-class="direction">
+            <span class="close-tooltip sprite-new close-info-tooltip-button" data-ng-click="showMessage=false"></span>
+            <p class="info-tooltip-message" translate="{{infoMessageTranslate}}"></p>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less
new file mode 100644
index 0000000000..cc3e3dc1ec
--- /dev/null
+++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less
@@ -0,0 +1,42 @@
+.info-tooltip {
+    position: fixed;
+    z-index: 1070;
+    display: block;
+    width: 250px;
+    .info-tooltip-arrow {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 5px 5px 5px;
+        border-color: transparent transparent @main_color_a transparent;
+        position: relative;
+        left: 2px;
+    }
+    .info-tooltip-content {
+        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+        border: 1px solid @main_color_o;
+        border-radius: 3px;
+        border-top: 3px solid @main_color_a;
+        position: relative;
+        background-color: white;
+        &.right{
+            left: -13px;
+        }
+        &.left{
+            left: -223px;
+        }
+        .close-tooltip{
+            float: right;
+            margin: 5px;
+        }
+
+        .info-tooltip-message{
+            margin: 15px;
+            word-break: normal;
+            font-size: 14px;
+            font-weight: normal;
+            text-align: left;
+            line-height: normal;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts
new file mode 100644
index 0000000000..63ecdc6091
--- /dev/null
+++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts
@@ -0,0 +1,37 @@
+/**
+ * Created by rcohen on 9/25/2016.
+ */
+'use strict';
+
+export interface IInfoTooltipScope extends ng.IScope {
+    infoMessageTranslate:string;
+    direction:string;
+}
+
+
+export class InfoTooltipDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        infoMessageTranslate: '@',
+        direction: '@'//get 'right' or 'left', the default is 'right'
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./info-tooltip.html');
+    };
+
+    link = (scope:IInfoTooltipScope, element:any, $attr:any) => {
+        scope.direction = scope.direction || 'right';
+    };
+
+    public static factory = ()=> {
+        return new InfoTooltipDirective();
+    };
+}
+
+InfoTooltipDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts
new file mode 100644
index 0000000000..221c20d08f
--- /dev/null
+++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts
@@ -0,0 +1,43 @@
+/**
+ * Created by obarda on 1/8/2017.
+ */
+'use strict';
+
+export interface IInputRowDirective extends ng.IScope {
+    showDeleteIcon:boolean;
+}
+
+
+export class InputRowDirective implements ng.IDirective {
+
+    constructor() {
+
+    }
+
+    scope = {
+        instanceInputsMap: '=',
+        input: '=',
+        instanceName: '=',
+        instanceId: '=',
+        isViewOnly: '=',
+        deleteInput: '&',
+        onNameClicked: '&',
+        onCheckboxClicked: '&'
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./input-row-view.html');
+    };
+
+    link = (scope:IInputRowDirective, element:any, $attr:any) => {
+        scope.showDeleteIcon = $attr.deleteInput ? true : false;
+    };
+
+    public static factory = ()=> {
+        return new InputRowDirective();
+    };
+}
+
+InputRowDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html
new file mode 100644
index 0000000000..872a26bc27
--- /dev/null
+++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html
@@ -0,0 +1,43 @@
+<div class="input-row">
+    <div class="title-text" ng-click="onNameClicked(input)" data-tests-id="inputName_{{input.name}}">
+        {{input.name}}
+    </div>
+    <div class="flex-container">
+        <div class="expand-collapse-inputs-table-icon"></div>
+        <div class="flex-item">
+            <div class="no-overflow">
+                <span class="title-text">Description:</span>
+                <span tooltips tooltip-content="{{input.description}}" data-tests-id="inputDescription_{{input.name}}">{{input.description}}</span>
+            </div>
+            <div class="text" tooltips tooltip-content="{{input.defaultValue}}">
+                <span class="title-text">Default Value:</span>
+                <span data-tests-id="inputDefaultValue_{{input.name}}">{{input.defaultValue}}</span>
+            </div>
+        </div>
+        <div class="flex-item ">
+            <div class="text">
+                <span class="title-text">VF Instance:</span>
+                <span tooltips tooltip-content="{{instanceName}}" data-tests-id="inputInstanceName_{{input.name}}">{{instanceName}}</span>
+            </div>
+            <div class="text">
+                <span class="title-text">Type:</span>
+                <span tooltips tooltip-content="{{input.type}}" data-tests-id="inputType_{{input.name}}">{{input.type}} </span>
+            </div>
+        </div>
+        <sdc-checkbox ng-if="instanceInputsMap"
+                      class="input-check-box"
+                      disabled="input.isAlreadySelected || isViewOnly"
+                      sdc-checklist-model="instanceInputsMap[instanceId]"
+                      sdc-checklist-value="input"
+                      sdc-checklist-change="onCheckboxClicked()"
+                      data-tests-id="inputsCheckbox_{{input.name}}"
+                      data-ng-click=" $event.stopPropagation()"></sdc-checkbox>
+
+        <div class="delete" ng-if="showDeleteIcon">
+            <span class="sprite-new delete-icon remove-input-icon"
+                  data-ng-class="{'disabled': isViewOnly || input.isDeleteDisabled}"
+                  data-ng-click="deleteInput(input); $event.stopPropagation();"
+                  data-tests-id="deleteInput_{{input.name}}"></span>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less
new file mode 100644
index 0000000000..fa79b45c3c
--- /dev/null
+++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less
@@ -0,0 +1,54 @@
+&.expanded {
+    .input-row {
+        background-color: @tlv_color_v;
+    }
+}
+
+.input-row {
+    padding-left: 45px;
+    background: @tlv_color_t;
+    border: @main_color_o solid 1px;
+    align-items: center;
+    .hand;
+    margin: 1px 0px 1px 0px;
+
+    &.selected {
+        background-color: @tlv_color_v;
+    }
+    .flex-item {
+        min-height: 60px;
+        padding: 0 15px;
+    }
+    .input-check-box {
+        padding-right: 10px;
+        margin-top: 9px;
+    }
+    & > .title-text {
+        text-align: start;
+        padding: 4px 35px 0 35px;
+    }
+
+    .expand-collapse-inputs-table-icon {
+        margin-top: 15px;
+    }
+
+    .delete {
+        width: 50px;
+        padding: 0;
+        position: relative;
+    }
+
+    .remove-input-icon {
+        position: absolute;
+        top: 12px;
+        right: 18px;
+    }
+
+    .remove-input-icon:hover {
+        .delete-icon-hover;
+    }
+}
+
+.input-row:hover {
+    .bg_j;
+}
diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts
new file mode 100644
index 0000000000..a9ff71cda5
--- /dev/null
+++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts
@@ -0,0 +1,42 @@
+/**
+ * Created by obarda on 1/8/2017.
+ */
+'use strict';
+
+export interface IPropertyRowDirective extends ng.IScope {
+    onNameClicked:Function;
+    isClickable:boolean;
+}
+
+export class PropertyRowDirective implements ng.IDirective {
+
+    constructor() {
+
+    }
+
+    scope = {
+        property: '=',
+        instanceName: '=',
+        instanceId: '=',
+        instancePropertiesMap: '=',
+        onNameClicked: '&',
+        onCheckboxClicked: '&'
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./property-row-view.html');
+    };
+
+    link = (scope:IPropertyRowDirective, element:any, $attr:any) => {
+        scope.isClickable = $attr.onNameClicked ? true : false;
+    };
+
+    public static factory = ()=> {
+        return new PropertyRowDirective();
+    };
+
+}
+
+PropertyRowDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html
new file mode 100644
index 0000000000..ff82a8b685
--- /dev/null
+++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html
@@ -0,0 +1,26 @@
+<div class="property-row flex-container">
+    <div class="flex-item text property-name-container">
+        <span class="title-blue-text property-name-text " data-ng-class="{'hand': isClickable}" data-tests-id="propertyName" data-ng-click="onNameClicked(property)" tooltips tooltip-content="{{property.name}}">{{property.name}}</span>
+    </div>
+    <div class="flex-item text property-name-container">
+        <span class="text instance-name-text" data-tests-id="instanceName" tooltips tooltip-content="{{instanceName}}">{{instanceName}}</span>
+    </div>
+    <div class="type-schema-container">
+        <div class="text">
+            <span tooltips tooltip-content="propertyName_{{property.type}}" data-tests-id="propertyType">{{property.type}}</span>
+        </div>
+    </div>
+    <div class="type-schema-container">
+        <div class="text">
+            <span tooltips tooltip-content="{{property.schema.property.type}}" data-tests-id="propertySchema">{{property.schema.property.type}} </span>
+        </div>
+    </div>
+    <sdc-checkbox ng-if="instancePropertiesMap"
+                  class="property-check-box"
+                  disabled="property.isAlreadySelected || isViewOnly"
+                  sdc-checklist-model="instancePropertiesMap[instanceId]"
+                  sdc-checklist-value="property"
+                  sdc-checklist-change="onCheckboxClicked()"
+                  data-tests-id="propertyCheckbox_{{property.name}}"
+                  data-ng-click=" $event.stopPropagation()"></sdc-checkbox>
+</div>
diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less
new file mode 100644
index 0000000000..e25427bda2
--- /dev/null
+++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less
@@ -0,0 +1,35 @@
+.property-row {
+    border-bottom: 1px solid @border_color_d;
+    padding-left: 10px;
+    .property-name-container {
+        display: flex;
+        flex-grow: 3;
+    }
+
+    .type-schema-container {
+        flex-grow: 2;
+        border-left: 1px solid @border_color_d;
+        text-align: left;
+        line-height: 30px;
+        text-transform: capitalize;
+        width: 10px;
+    }
+
+    .property-check-box {
+        padding-right: 10px;
+        margin-top: 9px;
+    }
+}
+
+.property-row:hover {
+    background-color: @func_color_r;
+}
+
+&.expanded {
+    .flex-container {
+        .expand-collapse-inputs-table-icon {
+            transform: rotate(180deg);
+            left: 0px;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/directives/invalid-characters/invalid-characters.ts b/catalog-ui/src/app/directives/invalid-characters/invalid-characters.ts
new file mode 100644
index 0000000000..20ed71e53f
--- /dev/null
+++ b/catalog-ui/src/app/directives/invalid-characters/invalid-characters.ts
@@ -0,0 +1,51 @@
+'use strict';
+
+export class InvalidCharactersDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    require = 'ngModel';
+
+    link = (scope, elem, attrs, ngModel) => {
+
+        let invalidCharacters = [];
+
+        attrs.$observe('invalidCharacters', (val:string) => {
+            invalidCharacters = val.split('');
+            validate(ngModel.$viewValue);
+        });
+
+        let validate:Function = function (value) {
+
+            let valid:boolean = true;
+
+            if (value) {
+                for (let i = 0; i < invalidCharacters.length; i++) {
+                    if (value.indexOf(invalidCharacters[i]) != -1) {
+                        valid = false;
+                    }
+                }
+            }
+
+            ngModel.$setValidity('invalidCharacters', valid);
+            if (!value) {
+                ngModel.$setPristine();
+            }
+            return value;
+        };
+
+        //For DOM -> model validation
+        ngModel.$parsers.unshift(validate);
+        //For model -> DOM validation
+        ngModel.$formatters.unshift(validate);
+
+    };
+
+    public static factory = ()=> {
+        return new InvalidCharactersDirective();
+    };
+
+}
+
+InvalidCharactersDirective.factory.$inject = [];
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
new file mode 100644
index 0000000000..60d3d63855
--- /dev/null
+++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html
@@ -0,0 +1,54 @@
+<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
new file mode 100644
index 0000000000..65021bdc4d
--- /dev/null
+++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less
@@ -0,0 +1,218 @@
+.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-omnes-medium;
+                color: @main_color_m;
+                font-size: 18px;
+                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
new file mode 100644
index 0000000000..c7208a909a
--- /dev/null
+++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts
@@ -0,0 +1,141 @@
+'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/layout/top-progress/top-progress.html b/catalog-ui/src/app/directives/layout/top-progress/top-progress.html
new file mode 100644
index 0000000000..ab2c8e364e
--- /dev/null
+++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.html
@@ -0,0 +1,22 @@
+<div class="top-progress">
+
+    <!--======================= Top progress var =======================-->
+    <div data-ng-if="progressValue>0 && progressValue<100">
+        <span class="sdc-progress-title">{{progressMessage}}<span class="progress-percentage">{{progressValue}}&nbsp;%</span></span>
+        <div class="sdc-progress">
+            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{progressValue}}" aria-valuemin="0" aria-valuemax="100" data-ng-style="{width: progressValue+'%'}"></div>
+        </div>
+    </div>
+
+    <div class="sdc-progress-success-wrapper" data-ng-if="progressValue===100">
+        <span class="sdc-progress-success"></span>
+        <span class="sdc-progress-success-title">{{progressMessage}}</span>
+    </div>
+
+    <div class="sdc-progress-error-wrapper" data-ng-if="progressValue===-1">
+        <span class="sdc-progress-error"></span>
+        <span class="sdc-progress-error-title">{{progressMessage}}</span>
+    </div>
+    <!--======================= Top progress var =======================-->
+
+</div>
diff --git a/catalog-ui/src/app/directives/layout/top-progress/top-progress.less b/catalog-ui/src/app/directives/layout/top-progress/top-progress.less
new file mode 100644
index 0000000000..ce70bd7378
--- /dev/null
+++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.less
@@ -0,0 +1,60 @@
+.top-progress {
+    text-align: left;
+
+    .sdc-progress-title {
+        .n_12_r;
+        height: 17px;
+        display: block;
+
+        .progress-percentage {
+            float: right;
+        }
+    }
+
+    .sdc-progress {
+        position: relative;
+        display: block;
+        height: 6px;
+        background-color: @main_color_o;
+        border-radius: 3px;
+        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+
+        .progress-bar {
+            border-radius: 3px;
+            background-color: @main_color_a;
+        }
+
+    }
+
+    .sdc-progress-success-wrapper {
+        display: flex;
+        align-items: flex-end;
+
+        .sdc-progress-success-title {
+            .d_12_r;
+            margin-left: 10px;
+        }
+
+        .sdc-progress-success {
+            .sprite-new;
+            .success-circle;
+        }
+    }
+
+    .sdc-progress-error-wrapper {
+        display: flex;
+        align-items: flex-end;
+
+        .sdc-progress-error-title {
+            .q_12_r;
+            margin-left: 10px;
+        }
+
+        .sdc-progress-error {
+            .sprite-new;
+            .error-icon;
+        }
+
+    }
+
+}
diff --git a/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts b/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts
new file mode 100644
index 0000000000..06beb43ea1
--- /dev/null
+++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts
@@ -0,0 +1,36 @@
+'use strict';
+
+export interface ITopProgressScope extends ng.IScope {
+    progressValue:number;
+    progressMessage:string;
+}
+
+export class TopProgressDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    public replace = true;
+    public restrict = 'E';
+    public transclude = false;
+
+    scope = {
+        progressValue: '=',
+        progressMessage: '='
+    };
+
+    template = ():string => {
+        return require('./top-progress.html');
+    };
+
+    public link = (scope:ITopProgressScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+
+    };
+
+    public static factory = ()=> {
+        return new TopProgressDirective();
+    };
+
+}
+
+TopProgressDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/loader/loader-directive.html b/catalog-ui/src/app/directives/loader/loader-directive.html
new file mode 100644
index 0000000000..e40b059a57
--- /dev/null
+++ b/catalog-ui/src/app/directives/loader/loader-directive.html
@@ -0,0 +1,4 @@
+<div data-ng-if="display" data-tests-id="tlv-loader">
+    <div class="tlv-loader-back " data-ng-class="{'tlv-loader-relative':relative}"></div>
+    <div class="tlv-loader {{size}}"></div>
+</div>
diff --git a/catalog-ui/src/app/directives/loader/loader-directive.less b/catalog-ui/src/app/directives/loader/loader-directive.less
new file mode 100644
index 0000000000..ae0b41aab1
--- /dev/null
+++ b/catalog-ui/src/app/directives/loader/loader-directive.less
@@ -0,0 +1,74 @@
+.tlv-loader-back {
+    background-color: @main_color_p;
+    position: fixed;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    opacity: 0.5;
+}
+
+.tlv-loader-relative { position: absolute; top: 0;}
+
+.tlv-loader {
+    z-index: 10002;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+@keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
diff --git a/catalog-ui/src/app/directives/loader/loader-directive.ts b/catalog-ui/src/app/directives/loader/loader-directive.ts
new file mode 100644
index 0000000000..aa9c4b09c4
--- /dev/null
+++ b/catalog-ui/src/app/directives/loader/loader-directive.ts
@@ -0,0 +1,155 @@
+/*-
+ * ============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 {EVENTS} from "app/utils";
+import {EventListenerService} from "app/services";
+
+export interface ILoaderScope extends ng.IScope {
+    display:boolean;        // Toggle show || hide scroll
+    size:string;            // small || medium || large
+    elementSelector:string; // Jquery selector to hide and scroll inside
+    relative:boolean;       // Will use the parent of <loader> element and hide it and scroll inside
+    loaderType:string;
+}
+
+export class LoaderDirective implements ng.IDirective {
+
+    constructor(private EventListenerService:EventListenerService) {
+    }
+
+    /*
+     * relative is used when inserting the HTML loader inside some div <loader data-display="isLoading" relative="true"></loader>
+     * elementSelector when we want to pass the Jquery selector of the loader.
+     */
+    scope = {
+        display: '=',
+        size: '@?',
+        elementSelector: '@?',
+        relative: '=?',
+        loaderType: '@?'
+    };
+
+    public replace = false;
+    public restrict = 'E';
+    template = ():string => {
+        return require('./loader-directive.html');
+    }
+
+    link = (scope:ILoaderScope, element:any) => {
+
+        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;
+        });
+
+        let calculateSizesForFixPosition = (positionStyle:string):void => {
+            // This is problematic, I do not want to change the parent position.
+            // set the loader on all the screen
+            let parentPosition = element.parent().position();
+            let parentWidth = element.parent().width();
+            let parentHeight = element.parent().height();
+            element.css('position', positionStyle);
+            element.css('top', parentPosition.top);
+            element.css('left', parentPosition.left);
+            element.css('width', parentWidth);
+            element.css('height', parentHeight);
+        };
+
+        let setStyle = (positionStyle:string):void => {
+
+            switch (positionStyle) {
+                case 'absolute':
+                case 'fixed':
+                    // The parent size is not set yet, still loading, so need to use interval to update the size.
+                    interval = window.setInterval(()=> {
+                        calculateSizesForFixPosition(positionStyle);
+                    }, 2000);
+                    break;
+                default:
+                    // Can change the parent position to relative without causing style issues.
+                    element.parent().css('position', 'relative');
+                    break;
+            }
+        };
+
+        // This should be executed after the dom loaded
+        window.setTimeout(():void => {
+
+            element.css('display', 'none');
+
+            if (scope.elementSelector) {
+                let elemParent = angular.element(scope.elementSelector);
+                let positionStyle:string = elemParent.css('position');
+                setStyle(positionStyle);
+            }
+
+            if (scope.relative === true) {
+                let positionStyle:string = element.parent().css('position');
+                setStyle(positionStyle);
+            }
+
+            if (!scope.size) {
+                scope.size = 'large';
+            }
+
+        }, 0);
+
+        if (scope.elementSelector) {
+
+        }
+
+        function cleanUp() {
+            clearInterval(interval);
+        }
+
+        scope.$watch("display", (newVal, oldVal) => {
+            element.css('display', 'none');
+            if (newVal === true) {
+                window.setTimeout(():void => {
+                    element.css('display', 'block');
+                }, 500);
+            } else {
+                window.setTimeout(():void => {
+                    element.css('display', 'none');
+                }, 0);
+            }
+        });
+
+        scope.$on('$destroy', cleanUp);
+
+    };
+
+    public static factory = (EventListenerService:EventListenerService)=> {
+        return new LoaderDirective( EventListenerService);
+    };
+
+}
+
+LoaderDirective.factory.$inject = ['EventListenerService'];
diff --git a/catalog-ui/src/app/directives/modal/sdc-modal.html b/catalog-ui/src/app/directives/modal/sdc-modal.html
new file mode 100644
index 0000000000..a8419f162d
--- /dev/null
+++ b/catalog-ui/src/app/directives/modal/sdc-modal.html
@@ -0,0 +1,18 @@
+<div data-ng-class="{'w-sdc-modal': type===undefined, 'w-sdc-classic-modal': type==='classic'}">
+    <div class="w-sdc-modal-head">
+        <span data-ng-if="header" class="w-sdc-modal-head-text">{{header}}</span>
+        <span data-ng-if="headerTranslate" class="w-sdc-modal-head-text" translate="{{headerTranslate}}" translate-values="{{headerTranslateValues}}"></span>
+        <div data-ng-if="showCloseButton==='true'" class="w-sdc-modal-close" data-ng-click="cancel()"></div>
+    </div>
+    <div class="w-sdc-modal-body" data-ng-class="{'classic': type==='classic'}">
+        <ng-transclude></ng-transclude>
+    </div>
+    <div class="w-sdc-modal-footer" data-ng-if="type==='classic' && buttons!==undefined">
+        <button data-ng-repeat="button in buttons"
+                data-tests-id="{{button.name}}"
+                class="tlv-btn {{button.css}}"
+                data-ng-class="{'disabled': button.disabled===true}"
+                data-ng-disabled="button.disabled===true"
+                data-ng-click="button.callback()">{{button.name}}</button>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/modal/sdc-modal.less b/catalog-ui/src/app/directives/modal/sdc-modal.less
new file mode 100644
index 0000000000..d8dfdbb73b
--- /dev/null
+++ b/catalog-ui/src/app/directives/modal/sdc-modal.less
@@ -0,0 +1,10 @@
+.ellipsis-directive-more-less {
+    .a_9;
+    .bold;
+    .hand;
+    float: right;
+    margin-right: 17px;
+    line-height: 23px;
+    text-decoration: underline;
+    text-align: left;
+}
diff --git a/catalog-ui/src/app/directives/modal/sdc-modal.ts b/catalog-ui/src/app/directives/modal/sdc-modal.ts
new file mode 100644
index 0000000000..aedc28262f
--- /dev/null
+++ b/catalog-ui/src/app/directives/modal/sdc-modal.ts
@@ -0,0 +1,80 @@
+'use strict';
+
+export interface ISdcModalScope extends ng.IScope {
+    modal:ng.ui.bootstrap.IModalServiceInstance;
+    hideBackground:string;
+    ok():void;
+    close(result:any):void;
+    cancel(reason:any):void;
+}
+
+export interface ISdcModalButton {
+    name:string;
+    css:string;
+    disabled?:boolean;
+    callback:Function;
+}
+
+export class SdcModalDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        modal: '=',
+        type: '@',
+        header: '@',
+        headerTranslate: '@',
+        headerTranslateValues: '@',
+        showCloseButton: '@',
+        hideBackground: '@',
+        buttons: '=',
+        getCloseModalResponse: '='
+    };
+
+    public replace = true;
+    public restrict = 'E';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./sdc-modal.html');
+    };
+
+    link = (scope:ISdcModalScope, $elem:any) => {
+
+        if (scope.hideBackground === "true") {
+            $(".modal-backdrop").css('opacity', '0');
+        }
+
+        scope.close = function (result:any) {
+            scope.modal.close(result);
+        };
+
+        scope.ok = function () {
+            scope.modal.close();
+        };
+
+        scope.cancel = function (reason:any) {
+            if (this.getCloseModalResponse)
+                scope.modal.dismiss(this.getCloseModalResponse());
+            else {
+                scope.modal.dismiss();
+            }
+        };
+
+        if (scope.modal) {
+            scope.modal.result.then(function (selectedItem) {
+                //$scope.selected = selectedItem;
+            }, function () {
+                //console.info('Modal dismissed at: ' + new Date());
+            });
+        }
+    }
+
+    public static factory = ()=> {
+        return new SdcModalDirective();
+    };
+
+}
+
+SdcModalDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts b/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts
new file mode 100644
index 0000000000..914a7049bb
--- /dev/null
+++ b/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts
@@ -0,0 +1,125 @@
+'use strict';
+
+export interface IPerfectScrollerScope extends ng.IScope {
+    //update(event:string): void;
+}
+
+export class PerfectScrollerDirective implements ng.IDirective {
+
+    constructor(private $parse:any) {
+
+    }
+
+    replace = true;
+    restrict = 'EA';
+    transclude = true;
+
+    template = ():string => {
+        return '<div><div ng-transclude=""></div></div>';
+    };
+
+    link = ($scope:IPerfectScrollerScope, $elem, $attr) => {
+        let self = this;
+        let options = {};
+
+        let psOptions = [
+            'wheelSpeed', 'wheelPropagation', 'minScrollbarLength', 'useBothWheelAxes',
+            'useKeyboard', 'suppressScrollX', 'suppressScrollY', 'scrollXMarginOffset',
+            'scrollYMarginOffset', 'includePadding'//, 'onScroll', 'scrollDown'
+        ];
+
+        for (let i = 0, l = psOptions.length; i < l; i++) {
+            let opt = psOptions[i];
+            if ($attr[opt] !== undefined) {
+                options[opt] = self.$parse($attr[opt])();
+            }
+        }
+
+        $scope.$evalAsync(function () {
+            $elem.perfectScrollbar(options);
+            let onScrollHandler = self.$parse($attr.onScroll)
+            $elem.scroll(function () {
+                let scrollTop = $elem.scrollTop()
+                let scrollHeight = $elem.prop('scrollHeight') - $elem.height()
+                $scope.$apply(function () {
+                    onScrollHandler($scope, {
+                        scrollTop: scrollTop,
+                        scrollHeight: scrollHeight
+                    })
+                })
+            });
+        });
+
+        /*
+         $scope.update = (event:string): void => {
+         $scope.$evalAsync(function() {
+         //if ($attr.scrollDown == 'true' && event != 'mouseenter') {
+         if (event != 'mouseenter') {
+         setTimeout(function () {
+         $($elem).scrollTop($($elem).prop("scrollHeight"));
+         }, 100);
+         }
+         $elem.perfectScrollbar('update');
+         });
+         };
+         */
+
+        // This is necessary when you don't watch anything with the scrollbar
+        $elem.bind('mouseenter', function () {
+            //console.log("mouseenter");
+            $elem.perfectScrollbar('update');
+        });
+
+        $elem.bind('mouseleave', function () {
+            //console.log("mouseleave");
+            setTimeout(function () {
+                $(window).trigger('mouseup');
+                $elem.perfectScrollbar('update');
+            }, 10);
+        });
+
+        $elem.bind('click', function () {
+            //console.log("click");
+            // Wait 500 milliseconds until the collapse finish closing and update.
+            setTimeout(function () {
+                $elem.perfectScrollbar('update');
+            }, 500);
+        });
+
+        /**
+         * Check if the content of the scroller was changed, and if changed update the scroller.
+         * Because DOMSubtreeModified event is fire many time (while filling the content), I'm checking that
+         * there is at least 100 milliseconds between DOMSubtreeModified events to update the scrollbar.
+         * @type {boolean}
+         */
+        let insideDOMSubtreeModified = false;
+        $elem.bind('DOMSubtreeModified', function () {
+            if (insideDOMSubtreeModified == false) {
+                insideDOMSubtreeModified = true;
+                setTimeout(function () {
+                    insideDOMSubtreeModified = false;
+                    $elem.perfectScrollbar('update');
+                }, 100);
+            }
+        });
+
+        // Possible future improvement - check the type here and use the appropriate watch for non-arrays
+        if ($attr.refreshOnChange) {
+            $scope.$watchCollection($attr.refreshOnChange, function () {
+                $elem.perfectScrollbar('update');
+            });
+        }
+
+        $elem.bind('$destroy', function () {
+            $elem.perfectScrollbar('destroy');
+        });
+
+    };
+
+    public static factory = ($parse:any)=> {
+        return new PerfectScrollerDirective($parse);
+    };
+
+}
+
+PerfectScrollerDirective.factory.$inject = ['$parse'];
diff --git a/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts
new file mode 100644
index 0000000000..a6e07eefee
--- /dev/null
+++ b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts
@@ -0,0 +1,190 @@
+'use strict';
+import {IAppMenu, Component, IAppConfigurtaion} from "app/models";
+import {UrlToBase64Service} from "app/services";
+
+export interface IPrintGraphScreenScope extends ng.IScope {
+    entity:Component;
+}
+
+
+export class PrintGraphScreenDirective implements ng.IDirective {
+
+    constructor(private $filter:ng.IFilterService,
+                private  sdcMenu:IAppMenu,
+                private sdcConfig:IAppConfigurtaion,
+                private urlToBase64Service:UrlToBase64Service) {
+    }
+
+    scope = {
+        entity: '='
+    };
+    restrict = 'A';
+    link = (scope:IPrintGraphScreenScope, element:any) => {
+
+
+        element.bind('click', function () {
+            printScreen();
+        });
+
+
+        let printScreen = ():void => {
+            //
+            //     let pdf :any = new jsPDF('landscape', 'mm', 'a4');
+            //     pdf.setProperties({
+            //         title: scope.entity.name,
+            //         subject: 'Design Snapshot for ' + scope.entity.name,
+            //         author: scope.entity.creatorFullName,
+            //         keywords: scope.entity.tags.join(', '),
+            //         creator: scope.entity.creatorFullName
+            //     });
+            //
+            //     // A4 measures is 210 × 297 millimeters
+            //     let pdfWidth :number = 297,
+            //         pdfHeight :number = 210,
+            //         leftColumnWidth :number = 80;
+            //
+            //     //left bar background
+            //     pdf.setDrawColor(0);
+            //     pdf.setFillColor(248, 249, 251);
+            //     pdf.rect(0, 0, leftColumnWidth, pdfHeight, 'F');
+            //
+            //     //entity name
+            //     pdf.setFontSize(12);
+            //     pdf.setTextColor(38, 61, 77);
+            //     let splitTitle :any = pdf.splitTextToSize(scope.entity.name, 50);
+            //     pdf.text(22, 15 - (splitTitle.length - 1) * 2, splitTitle);
+            //
+            //     //line
+            //     pdf.setLineWidth(0.2);
+            //     pdf.setDrawColor(208, 209, 213);
+            //     pdf.line(0, 28, leftColumnWidth, 28);
+            //
+            //
+            //     pdf.setFontSize(10);
+            //     let properties :any = getPdfProperties();
+            //
+            //     let topOffset :number = 39, lines;
+            //     properties.forEach( (item:any) => {
+            //         if (!item.value) {
+            //             return;
+            //         }
+            //         if (item.title === 'Description:') {
+            //             topOffset += 5;
+            //         }
+            //
+            //         pdf.setTextColor(38, 61, 77);
+            //         pdf.text(5, topOffset, item.title);
+            //         pdf.setTextColor(102, 102, 102);
+            //         lines = pdf.splitTextToSize(item.value, 49);
+            //         pdf.text(5 + item.offset, topOffset, lines[0]);
+            //         if (lines.length > 1) {
+            //             lines = pdf.splitTextToSize(item.value.substring(lines[0].length + 1), 65);
+            //             if (lines.length > 8) {
+            //                 lines = lines.slice(0, 7);
+            //                 lines[lines.length - 1] += '...';
+            //             }
+            //             pdf.text(5, topOffset + 4, lines);
+            //             topOffset += 4 * (lines.length);
+            //         }
+            //
+            //         topOffset += 6;
+            //     });
+            //
+            //
+            //     //another background in case the text was too long
+            //     let declarationLineOffset :number = 176;
+            //     pdf.setDrawColor(0);
+            //     pdf.setFillColor(248, 249, 251);
+            //     pdf.rect(0, declarationLineOffset, leftColumnWidth, pdfHeight - declarationLineOffset, 'F');
+            //     //line
+            //     pdf.setLineWidth(0.2);
+            //     pdf.setDrawColor(208, 209, 213);
+            //     pdf.line(0, declarationLineOffset, leftColumnWidth, declarationLineOffset);
+            //
+            //     //declaration
+            //     pdf.setFontSize(10.5);
+            //     pdf.setTextColor(38, 61, 77);
+            //     pdf.text(5, 185, 'Declaration');
+            //     pdf.setFontSize(9);
+            //     pdf.setTextColor(102, 102, 102);
+            //     pdf.setFontType('bold');
+            //     pdf.text(5, 190, this.$filter('translate')('PDF_FILE_DECLARATION_BOLD'));
+            //     pdf.setFontType('normal');
+            //     pdf.text(5, 194, pdf.splitTextToSize(this.$filter('translate')('PDF_FILE_DECLARATION'), 65));
+            //
+            //     //entity icon
+            //     let self = this;
+            //     let addEntityIcon:Function = () => {
+            //         let iconPath:string = self.sdcConfig.imagesPath + '/styles/images/';
+            //         if (scope.entity.isService()) {
+            //             iconPath += 'service-icons/' + scope.entity.icon + '.png';
+            //         } else {
+            //             iconPath += 'resource-icons/' + scope.entity.icon + '.png';
+            //         }
+            //         self.urlToBase64Service.downloadUrl(iconPath, (base64string:string):void => {
+            //             if (base64string) {
+            //                 pdf.addImage(base64string, 'JPEG', 5, 7, 15, 15);
+            //             }
+            //             pdf.save(scope.entity.name + '.pdf');
+            //         });
+            //     };
+            //
+            //     //actual snapshop of canvas
+            //     let diagramDiv :any = document.getElementById('myDiagram');
+            //     let diagram :go.Diagram = go.Diagram.fromDiv(diagramDiv), canvasImg = new Image();
+            //     diagram.startTransaction('print screen');
+            //     let canvasImgBase64:any = diagram.makeImageData({
+            //         //scale: 1,
+            //         size: new go.Size(pdfHeight * 5, NaN),
+            //         background: 'white',
+            //         type: 'image/jpeg'
+            //     });
+            //     diagramDiv.firstElementChild.toDataURL();
+            //     diagram.commitTransaction('print screen');
+            //
+            //     canvasImg.onload = () => {
+            //         if (canvasImg.height > 0) {
+            //             let canvasImgRatio:number = Math.min((pdfWidth - leftColumnWidth - 15) / canvasImg.width, pdfHeight / canvasImg.height);
+            //             let canvasImgWidth:number = canvasImg.width * canvasImgRatio,
+            //                 canvasImgHeight:number = canvasImg.height * canvasImgRatio;
+            //             let canvasImgOffset:number = (pdfHeight - canvasImgHeight) / 2;
+            //             pdf.addImage(canvasImg, 'JPEG', leftColumnWidth, canvasImgOffset, canvasImgWidth, canvasImgHeight);
+            //
+            //             addEntityIcon();
+            //         }
+            //     };
+            //
+            //     if(canvasImg.src === 'data:,') { //empty canvas
+            //         addEntityIcon();
+            //     } else {
+            //         canvasImg.src = canvasImgBase64;
+            //     }
+        };
+
+
+        let getPdfProperties = ():Array<any> => {
+            // return [
+            //     {title: this.$filter('translate')('GENERAL_LABEL_TYPE'), value: scope.entity.getComponentSubType(), offset: 10},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_VERSION'), value: scope.entity.version, offset: 15},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_CATEGORY'), value: scope.entity.categories.length ? scope.entity.categories[0].name : '', offset: 16},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_CREATION_DATE'), value: this.$filter('date')(scope.entity.creationDate, 'MM/dd/yyyy'), offset: 24},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_AUTHOR'), value: scope.entity.creatorFullName, offset: 13},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_CONTACT_ID'), value: scope.entity.contactId, offset: 41},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_STATUS'), value: (<any>this.sdcMenu).LifeCycleStatuses[scope.entity.lifecycleState].text, offset: 13},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_PROJECT_CODE'), value: scope.entity.projectCode, offset: 15},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_DESCRIPTION'), value: scope.entity.description, offset: 20},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_TAGS'), value: scope.entity.tags.join(', '), offset: 10}
+            // ];
+            return null;
+        };
+
+
+    };
+
+    public static factory = ($filter:ng.IFilterService, sdcMenu:IAppMenu, sdcConfig:IAppConfigurtaion, urlToBase64Service:UrlToBase64Service)=> {
+        return new PrintGraphScreenDirective($filter, sdcMenu, sdcConfig, urlToBase64Service);
+    };
+
+}
+
+PrintGraphScreenDirective.factory.$inject = ['$filter', 'sdcMenu', 'sdcConfig', 'Sdc.Services.UrlToBase64Service'];
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
new file mode 100644
index 0000000000..b62824d544
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
@@ -0,0 +1,83 @@
+<div class="data-type-fields-structure">
+    <div class="open-close">
+        <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" data-ng-click="expandAndCollapse()"></div>
+        <span class="data-type-name">{{typeName.replace("org.openecomp.datatypes.heat.","")}}</span>
+    </div>
+    <div data-ng-show="expand" data-ng-repeat="property in dataTypeProperties" class="property">
+        <div class="i-sdc-form-item property-name">
+            <div tooltips tooltip-content="{{property.name}}">
+                <input class="i-sdc-form-input"
+                       type="text"
+                       data-ng-disabled="true"
+                       value="{{property.name}}"/>
+            </div>
+        </div>
+        <!--<div class="property-value">-->
+            <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure">
+                <fields-structure value-obj-ref="(valueObjRef[property.name])"
+                                  type-name="property.type"
+                                  parent-form-obj="parentFormObj"
+                                  fields-prefix-name="fieldsPrefixName+property.name"
+                                  read-only="readOnly"
+                                  default-value="{{currentTypeDefaultValue[property.name]}}">
+
+                </fields-structure>
+            </div>
+            <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type">
+                <div ng-switch-when="map">
+                    <type-map value-obj-ref="valueObjRef[property.name]"
+                         schema-property="property.schema.property"
+                         parent-form-obj="parentFormObj"
+                         fields-prefix-name="fieldsPrefixName+property.name"
+                         read-only="readOnly"
+                         default-value="{{currentTypeDefaultValue[property.name]}}"
+                         types="types"></type-map>
+                </div>
+                <div ng-switch-when="list">
+                    <type-list value-obj-ref="valueObjRef[property.name]"
+                          schema-property="property.schema.property"
+                          parent-form-obj="parentFormObj"
+                          fields-prefix-name="fieldsPrefixName+property.name"
+                          read-only="readOnly"
+                          default-value="{{currentTypeDefaultValue[property.name]}}"
+                          types="types"></type-list>
+                </div>
+                <div ng-switch-default class="primitive-value-field">
+                    <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}">
+                        <input class="i-sdc-form-input"
+                               data-tests-id="{{fieldsPrefixName+property.name}}"
+                               ng-if="!((property.simpleType||property.type) == 'boolean')"
+                               data-ng-maxlength="100"
+                               data-ng-disabled="readOnly"
+                               maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}"
+                               data-ng-model="valueObjRef[property.name]"
+                               type="text"
+                               name="{{fieldsPrefixName+property.name}}"
+                               data-ng-pattern="getValidationPattern((property.simpleType||property.type))"
+                               data-ng-model-options="{ debounce: 200 }"
+                               data-ng-change="inputOnValueChange(property)"
+                               autofocus />
+                        <select class="i-sdc-form-select"
+                                data-tests-id="{{fieldsPrefixName+property.name}}"
+                                ng-if="(property.simpleType||property.type) == 'boolean'"
+                                data-ng-disabled="readOnly"
+                                name="{{fieldsPrefixName+property.name}}"
+                                data-ng-change="onValueChange(property.name,'boolean')"
+                                data-ng-model="valueObjRef[property.name]"
+                                data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
+                        </select>
+
+                        <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid">
+                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
+                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
+                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <!--</div>-->
+
+    </div>
+</div>
+
+
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
new file mode 100644
index 0000000000..5c65fdc9dc
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less
@@ -0,0 +1,90 @@
+.data-type-fields-structure{
+    background-color: @tlv_color_v;
+    padding:10px;
+    display: table-caption;
+    .open-close{
+        position: relative;
+        .open-close-button{
+            position: absolute;
+            top: 50%;
+            margin-top: -7px;
+            &.expand{
+                .sprite-new;
+                .expand-collapse-minus-icon;
+            }
+            &.collapse{
+                .sprite-new;
+                .expand-collapse-plus-icon;
+            }
+        }
+
+    }
+
+
+    .data-type-name{
+        .m_16_m;
+        margin-left: 22px;
+    }
+
+    .i-sdc-form-input:disabled{
+             .disabled;
+         }
+
+    .property{
+        display: flex;
+        min-width: 365px;
+        min-height: 46px;
+        input[type="text"],select{
+            width: 170px;
+        }
+        .property-name{
+            float: left;
+            margin-top: 8px;
+        }
+        .primitive-value-field{
+            float: right;
+            margin-top: 8px;
+            margin-left: 10px;
+        }
+        .inner-structure{
+            display: -webkit-box;
+        }
+    }
+
+    [ng-switch-when="map"]{
+        margin-top: 8px;
+        margin-left: 10px;
+        .map-item{
+            border: solid 1px @main_color_o;
+            min-width: 401px;
+            min-height: 69px;
+            float: none !important;
+        }
+        .add-map-item{
+            width: auto;
+            float: none;
+            &:nth-child(1){
+                position: relative;
+                top: 6px;
+            }
+            .add-btn{
+                float: none;
+            }
+        }
+
+    }
+
+    [ng-switch-when="list"]{
+        float: left;
+        margin-top: 8px;
+        margin-left: 10px;
+        min-width: 280px;
+        .dt-list-item {
+            border: solid 1px @main_color_o;
+        }
+        .list-value-items{
+            width:280px;
+        }
+    }
+}
+
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
new file mode 100644
index 0000000000..2506dbe400
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
@@ -0,0 +1,154 @@
+/**
+ * Created by obarda on 1/27/2016.
+ */
+'use strict';
+import {DataTypesService} from "app/services";
+import { ValidationUtils } from "app/utils";
+import { DataTypePropertyModel } from "app/models/data-type-properties";
+import { DataTypesMap} from "app/models";
+
+export interface IDataTypeFieldsStructureScope extends ng.IScope {
+    parentFormObj:ng.IFormController;
+    dataTypeProperties:Array<DataTypePropertyModel>;
+    typeName:string;
+    valueObjRef:any;
+    propertyNameValidationPattern:RegExp;
+    fieldsPrefixName:string;
+    readOnly:boolean;
+    currentTypeDefaultValue:any;
+    types:DataTypesMap;
+    expandByDefault:boolean;
+    expand:boolean;
+    expanded:boolean;
+    dataTypesService:DataTypesService;
+
+    expandAndCollapse():void;
+    getValidationPattern(type:string):RegExp;
+    validateIntRange(value:string):boolean;
+    onValueChange(propertyName:string, type:string):void
+    inputOnValueChange(property:any):void;
+}
+
+
+export class DataTypeFieldsStructureDirective implements ng.IDirective {
+
+    constructor(private DataTypesService:DataTypesService,
+                private PropertyNameValidationPattern:RegExp,
+                private ValidationUtils:ValidationUtils) {
+    }
+
+    scope = {
+        valueObjRef: '=',
+        typeName: '=',
+        parentFormObj: '=',
+        fieldsPrefixName: '=',
+        readOnly: '=',
+        defaultValue: '@',
+        //     types: '=',
+        expandByDefault: '='
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./data-type-fields-structure.html');
+    };
+    //public types=Utils.Constants.PROPERTY_DATA.TYPES;
+
+    //get data type properties array and return object with the properties and their default value
+    //(for example: get: [{name:"prop1",defaultValue:1 ...},{name:"prop2", defaultValue:"bla bla" ...}]
+    //              return: {prop1: 1, prop2: "bla bla"}
+    private getDefaultValue = (dataTypeProperties:Array<DataTypePropertyModel>):any => {
+        let defaultValue = {};
+        for (let i = 0; i < dataTypeProperties.length; i++) {
+            if (dataTypeProperties[i].type != 'string') {
+                if (!angular.isUndefined(dataTypeProperties[i].defaultValue)) {
+                    defaultValue[dataTypeProperties[i].name] = JSON.parse(dataTypeProperties[i].defaultValue);
+                }
+            } else {
+                defaultValue[dataTypeProperties[i].name] = dataTypeProperties[i].defaultValue;
+            }
+        }
+        return defaultValue;
+    };
+
+    private initDataOnScope = (scope:any, $attr:any):void => {
+        scope.dataTypesService = this.DataTypesService;
+        scope.dataTypeProperties = this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName);
+        if ($attr.defaultValue) {
+            scope.currentTypeDefaultValue = JSON.parse($attr.defaultValue);
+        } else {
+            scope.currentTypeDefaultValue = this.getDefaultValue(scope.dataTypeProperties);
+        }
+
+        if (!scope.valueObjRef) {
+            scope.valueObjRef = {};
+        }
+
+        _.forEach(scope.currentTypeDefaultValue, (value, key)=> {
+            if (angular.isUndefined(scope.valueObjRef[key])) {
+                if (typeof scope.currentTypeDefaultValue[key] == 'object') {
+                    angular.copy(scope.currentTypeDefaultValue[key], scope.valueObjRef[key]);
+                } else {
+                    scope.valueObjRef[key] = scope.currentTypeDefaultValue[key];
+                }
+            }
+        });
+    };
+
+    private rerender = (scope:any):void => {
+        scope.expanded = false;
+        scope.expand = false;
+        if (scope.expandByDefault) {
+            scope.expandAndCollapse();
+        }
+    };
+
+    link = (scope:IDataTypeFieldsStructureScope, element:any, $attr:any) => {
+        scope.propertyNameValidationPattern = this.PropertyNameValidationPattern;
+
+        scope.$watchCollection('[typeName,fieldsPrefixName]', (newData:any):void => {
+            this.rerender(scope);
+        });
+
+
+        scope.expandAndCollapse = ():void => {
+            if (!scope.expanded) {
+                this.initDataOnScope(scope, $attr);
+                scope.expanded = true;
+            }
+            scope.expand = !scope.expand;
+        };
+
+        scope.getValidationPattern = (type:string):RegExp => {
+            return this.ValidationUtils.getValidationPattern(type);
+        };
+
+        scope.validateIntRange = (value:string):boolean => {
+            return !value || this.ValidationUtils.validateIntRange(value);
+        };
+
+        scope.onValueChange = (propertyName:string, type:string):void => {
+            scope.valueObjRef[propertyName] = !angular.isUndefined(scope.valueObjRef[propertyName]) ? scope.valueObjRef[propertyName] : scope.currentTypeDefaultValue[propertyName];
+            if (scope.valueObjRef[propertyName] && type != 'string') {
+                scope.valueObjRef[propertyName] = JSON.parse(scope.valueObjRef[propertyName]);
+            }
+        };
+
+        scope.inputOnValueChange = (property:any) => {
+
+            let value = !scope.parentFormObj[scope.fieldsPrefixName + property.name].$error.pattern
+                && ('integer' == property.type && scope.parentFormObj[scope.fieldsPrefixName + property.name].$setValidity('pattern', scope.validateIntRange(scope.valueObjRef[property.name]))
+                || scope.onValueChange(property.name, (property.simpleType || property.type)));
+            return value;
+        }
+    };
+
+    public static factory = (DataTypesService:DataTypesService,
+                             PropertyNameValidationPattern:RegExp,
+                             ValidationUtils:ValidationUtils)=> {
+        return new DataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils);
+    };
+}
+
+DataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils'];
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
new file mode 100644
index 0000000000..138e848e59
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
@@ -0,0 +1,56 @@
+<div>
+    <div data-ng-if="!isSchemaTypeDataType">
+        <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}">
+            <input class="i-sdc-form-input"
+                   data-tests-id="listNewItem{{fieldsPrefixName}}"
+                   ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
+                   data-ng-disabled="readOnly"
+                   data-ng-model="listNewItem.value"
+                   type="text"
+                   name="listNewItem{{fieldsPrefixName}}"
+                   data-ng-pattern="getValidationPattern((schemaProperty.simpleType||schemaProperty.type))"
+                   data-ng-model-options="{ debounce: 200 }"
+                   placeholder="Type a value and then click ADD"
+                   data-ng-maxlength="maxLength"
+                   maxlength="{{maxLength}}"
+                   sdc-keyboard-events="" key-enter="schemaProperty.type && !parentFormObj['listNewItem'+fieldsPrefixName].$invalid && listNewItem.value && addListItem"
+                   autofocus />
+            <select class="i-sdc-form-select"
+                    data-tests-id="listNewItem{{fieldsPrefixName}}"
+                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    data-ng-disabled="readOnly"
+                    name="listNewItem{{fieldsPrefixName}}"
+                    data-ng-model="listNewItem.value">
+                <option value="true">true</option>
+                <option value="false">false</option>
+            </select>
+            <div class="input-error" data-ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid">
+                <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
+                <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span>
+            </div>
+        </div>
+        <div class="add-btn add-list-item" data-tests-id="add-list-item{{fieldsPrefixName}}"
+             data-ng-class="{'disabled': readOnly || !schemaProperty.type || parentFormObj['listNewItem'+fieldsPrefixName].$invalid || !listNewItem.value}" data-ng-click="addListItem()">Add</div>
+        <div class="list-value-items">
+                                    <span class="list-value-item" data-ng-repeat="value in valueObjRef track by $index">
+                                        {{value}}
+                                        <span ng-if="!readOnly" class="delete-list-item sprite-new small-x-button" data-ng-click="deleteListItem($index)"></span>
+                                    </span>
+        </div>
+    </div>
+    <div data-ng-if="isSchemaTypeDataType">
+        <div class="dt-list">
+            <div data-ng-repeat="value in valueObjRef track by $index" class="dt-list-item">
+                <span class="delete-dt-list-item" data-ng-click="deleteListItem($index)"></span>
+                <fields-structure value-obj-ref="valueObjRef[$index]"
+                                  type-name="schemaProperty.type"
+                                  parent-form-obj="parentFormObj"
+                                  fields-prefix-name="fieldsPrefixName+''+$index"
+                                  read-only="readOnly"></fields-structure>
+            </div>
+            <div class="add-btn add-list-item" data-tests-id="add-list-item"
+                       data-ng-class="{'disabled': readOnly}" data-ng-click="listNewItem.value='{}';addListItem();">Add</div>
+        </div>
+
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less
new file mode 100644
index 0000000000..71263f2642
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less
@@ -0,0 +1,85 @@
+.list-new-item{
+    float: left;
+    width: 50%;
+    min-width: 221px;
+    margin-right: 15px;
+    input{
+        min-width: 221px;
+    }
+}
+
+.list-value-items{
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    border: 1px solid @main_color_o;
+    padding-bottom: 10px;
+    min-height: 100px;
+    clear: both;
+    background-color: white;
+    .list-value-item{
+        display: inline-block;
+        background-color: @tlv_color_v;
+        margin: 10px 0 0 10px;
+        padding: 0 8px;
+        .delete-list-item{
+            margin: 0 0 0 2px;
+            .hand;
+        }
+    }
+}
+
+.add-btn {
+    .f-color.a;
+    .f-type._14_m;
+    .hand;
+
+    &.add-list-item {
+        float: left;
+        margin-top: 5px;
+        width: 44px;
+    }
+
+    &:before {
+        .sprite-new;
+        .plus-icon;
+        margin-right: 5px;
+        content: "";
+
+    }
+    &:hover {
+        .f-color.b;
+        &:before {
+            .sprite-new;
+            .plus-icon-hover;
+        }
+    }
+
+}
+
+.dt-list{
+    display: table-caption;
+    .dt-list-item {
+        border-radius: 3px;
+        background-color: @tlv_color_v;
+        display: inline-block;
+        .delete-dt-list-item{
+            float: right;
+            position: relative;
+            top: 5px;
+            right: 5px;
+            .sprite-new;
+            .delete-icon;
+            &:hover{
+                .delete-icon-hover;
+            }
+        }
+        .data-type-name{
+            margin-right: 16px;
+        }
+    }
+    &>.add-list-item{
+        float:none;
+    }
+}
+
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
new file mode 100644
index 0000000000..ac5da2be73
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
@@ -0,0 +1,106 @@
+/**
+ * Created by rcohen on 9/15/2016.
+ */
+'use strict';
+import {SchemaProperty} from "app/models";
+import {ValidationUtils, PROPERTY_TYPES} from "app/utils";
+import {DataTypesService} from "app/services";
+
+export interface ITypeListScope extends ng.IScope {
+    parentFormObj:ng.IFormController;
+    schemaProperty:SchemaProperty;
+    isSchemaTypeDataType:boolean;
+    valueObjRef:any;
+    propertyNameValidationPattern:RegExp;
+    fieldsPrefixName:string;
+    readOnly:boolean;
+    listDefaultValue:any;
+    listNewItem:any;
+    maxLength:number;
+
+    getValidationPattern(type:string):RegExp;
+    validateIntRange(value:string):boolean;
+    addListItem():void;
+    deleteListItem(listItemIndex:number):void
+}
+
+
+export class TypeListDirective implements ng.IDirective {
+
+    constructor(private DataTypesService:DataTypesService,
+                private PropertyNameValidationPattern:RegExp,
+                private ValidationUtils:ValidationUtils) {
+    }
+
+    scope = {
+        valueObjRef: '=',//ref to list object in the parent value object
+        schemaProperty: '=',//get the schema.property object
+        parentFormObj: '=',//ref to parent form (get angular form object)
+        fieldsPrefixName: '=',//prefix for form fields names
+        readOnly: '=',//is form read only
+        defaultValue: '@',//this list default value
+        maxLength: '='
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./type-list-directive.html');
+    };
+
+    link = (scope:ITypeListScope, element:any, $attr:any) => {
+        scope.propertyNameValidationPattern = this.PropertyNameValidationPattern;
+
+        //reset valueObjRef when schema type is changed
+        scope.$watchCollection('schemaProperty.type', (newData:any):void => {
+            scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty);
+            //insert 1 empty item dt by default
+            if (scope.isSchemaTypeDataType && (!scope.valueObjRef || !scope.valueObjRef.length)) {
+                scope.valueObjRef = scope.valueObjRef || [];
+                scope.valueObjRef.push({});
+            }
+        });
+
+        //when user brows between properties in "edit property form"
+        scope.$watchCollection('fieldsPrefixName', (newData:any):void => {
+            scope.listNewItem = {value: ''};
+
+            if ($attr.defaultValue) {
+                scope.listDefaultValue = JSON.parse($attr.defaultValue);
+            }
+        });
+
+        scope.getValidationPattern = (type:string):RegExp => {
+            return this.ValidationUtils.getValidationPattern(type);
+        };
+
+        scope.validateIntRange = (value:string):boolean => {
+            return !value || this.ValidationUtils.validateIntRange(value);
+        };
+
+        scope.addListItem = ():void => {
+            scope.valueObjRef = scope.valueObjRef || [];
+            let newVal = ((scope.schemaProperty.simpleType || scope.schemaProperty.type) == PROPERTY_TYPES.STRING ? scope.listNewItem.value : JSON.parse(scope.listNewItem.value));
+            scope.valueObjRef.push(newVal);
+            scope.listNewItem.value = "";
+        };
+
+        scope.deleteListItem = (listItemIndex:number):void => {
+            scope.valueObjRef.splice(listItemIndex, 1);
+            if (!scope.valueObjRef.length) {
+                if (scope.listDefaultValue) {
+                    angular.copy(scope.listDefaultValue, scope.valueObjRef);
+                }
+            }
+        };
+    };
+
+    public static factory = (DataTypesService:DataTypesService,
+                             PropertyNameValidationPattern:RegExp,
+                             ValidationUtils:ValidationUtils)=> {
+        return new TypeListDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils);
+    };
+}
+
+TypeListDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils'];
+
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
new file mode 100644
index 0000000000..37b076f26e
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -0,0 +1,73 @@
+<div>
+    <div data-ng-repeat="i in getNumber(mapKeys.length) track by $index" class="map-item" data-ng-class="{'primitive-value-map':!isSchemaTypeDataType}">
+        <div class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapKey'+fieldsPrefixName+$index].$dirty && parentFormObj['mapKey'+fieldsPrefixName+$index].$invalid)}">
+            <label class="i-sdc-form-label required">Key</label>
+            <input class="i-sdc-form-input"
+                   data-tests-id="mapKey{{fieldsPrefixName}}{{$index}}"
+                   data-ng-model="mapKeys[$index]"
+                   type="text"
+                   data-ng-maxlength="50"
+                   maxlength="50"
+                   name="mapKey{{fieldsPrefixName}}{{$index}}"
+                   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-required
+                   autofocus/>
+            <div class="input-error" data-ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$dirty && parentFormObj['mapKey'+fieldsPrefixName+$index].$invalid">
+                <span ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$error.keyExist" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span>
+                <span ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Key' }"></span>
+                <span ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+                <span ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+            </div>
+        </div>
+        <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}">
+            <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-model="valueObjRef[mapKeys[$index]]"
+                   type="text"
+                   name="mapValue{{fieldsPrefixName}}{{$index}}"
+                   data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}"
+                   data-ng-pattern="getValidationPattern((schemaProperty.simpleType||schemaProperty.type))"
+                   data-ng-change="!parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern && parseToCorrectType(valueObjRef, key, (schemaProperty.simpleType||schemaProperty.type))"
+                   data-ng-model-options="{ debounce: 200 }"
+                   data-ng-maxlength="maxLength"
+                   maxlength="{{maxLength}}"
+                   data-required
+                   autofocus />
+            <select class="i-sdc-form-select"
+                    data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}"
+                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    data-ng-disabled="readOnly"
+                    name="mapValue{{fieldsPrefixName}}{{$index}}"
+                    data-ng-model="valueObjRef[mapKeys[$index]]"
+                    data-required>
+                <option value="true">true</option>
+                <option value="false">false</option>
+            </select>
+            <div class="input-error" data-ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid">
+                <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value' }"></span>
+                <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
+                <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span>
+            </div>
+        </div>
+        <div data-ng-if="isSchemaTypeDataType" class="i-sdc-form-item map-item-field">
+            <label class="i-sdc-form-label">Value</label>
+            <fields-structure value-obj-ref="valueObjRef[mapKeys[$index]]"
+                              type-name="schemaProperty.type"
+                              parent-form-obj="parentFormObj"
+                              fields-prefix-name="'mapValue'+fieldsPrefixName+''+$index"
+                              read-only="readOnly"
+            ></fields-structure>
+        </div>
+        <span ng-click="deleteMapItem($index)" class="delete-map-item" data-tests-id="delete-map-item{{fieldsPrefixName}}{{$index}}" data-ng-class="{'disabled': readOnly}"></span>
+    </div>
+    <div class="add-map-item" data-ng-class="{'schema-data-type':isSchemaTypeDataType}">
+        <div class="add-btn" data-tests-id="add-map-item"
+             data-ng-class="{'disabled': readOnly || !schemaProperty.type || mapKeys.indexOf('')>-1}" data-ng-click="addMapItemFields()">Add</div>
+    </div>
+</div>
+
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
new file mode 100644
index 0000000000..2480b626f2
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
@@ -0,0 +1,83 @@
+.add-map-item{
+    &:nth-child(odd){
+        float: right;
+    }
+    &:nth-child(1){
+        float: none;
+        .add-btn{
+            float: none;
+        }
+    }
+    width: 400px;
+    .add-btn{
+        width: 44px;
+        float: right;
+    }
+    &.schema-data-type{
+        float:none;
+        .add-btn{
+            float: none;
+        }
+    }
+}
+
+.add-btn {
+    .f-color.a;
+    .f-type._14_m;
+    .hand;
+
+    &:before {
+        .sprite-new;
+        .plus-icon;
+        margin-right: 5px;
+        content: "";
+
+    }
+    &:hover {
+        .f-color.b;
+        &:before {
+            .sprite-new;
+            .plus-icon-hover;
+        }
+    }
+
+}
+
+.map-item{
+    min-width: 389px;
+    min-height: 65px;
+    background-color: @tlv_color_v;
+    border-radius: 3px;
+    margin-bottom: 8px;
+    float: left;
+    display: flex;
+    &:nth-child(even).primitive-value-map{
+        float: right;
+    }
+    .delete-map-item {
+        float: right;
+        position: relative;
+        top: 5px;
+        right: 5px;
+        .sprite-new;
+        .delete-icon;
+        &:hover{
+            .delete-icon-hover;
+        }
+    }
+    .map-item-field {
+        margin: 7px 12px !important;
+        float: left;
+        min-width: 170px;
+        min-height: 50px;
+        select{
+            width:171px;
+        }
+        input[type="text"]{
+            width: 170px;
+        }
+        &>.data-type-fields-structure{
+            padding: 0;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
new file mode 100644
index 0000000000..a0c9a6c460
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
@@ -0,0 +1,143 @@
+/**
+ * Created by rcohen on 9/15/2016.
+ */
+'use strict';
+import {ValidationUtils, PROPERTY_TYPES} from "app/utils";
+import {DataTypesService} from "app/services";
+import {SchemaProperty} from "app/models";
+
+export interface ITypeMapScope extends ng.IScope {
+    parentFormObj:ng.IFormController;
+    schemaProperty:SchemaProperty;
+    isSchemaTypeDataType:boolean;
+    valueObjRef:any;
+    mapKeys:Array<string>;//array of map keys
+    MapKeyValidationPattern:RegExp;
+    fieldsPrefixName:string;
+    readOnly:boolean;
+    mapDefaultValue:any;
+    maxLength:number;
+
+    getValidationPattern(type:string):RegExp;
+    validateIntRange(value:string):boolean;
+    changeKeyOfMap(newKey:string, index:number, fieldName:string):void;
+    deleteMapItem(index:number):void;
+    addMapItemFields():void;
+    parseToCorrectType(objectOfValues:any, locationInObj:string, type:string):void;
+    getNumber(num:number):Array<any>;
+}
+
+
+export class TypeMapDirective implements ng.IDirective {
+
+    constructor(private DataTypesService:DataTypesService,
+                private MapKeyValidationPattern:RegExp,
+                private ValidationUtils:ValidationUtils,
+                private $timeout:ng.ITimeoutService) {
+    }
+
+    scope = {
+        valueObjRef: '=',//ref to map object in the parent value object
+        schemaProperty: '=',//get the schema.property object
+        parentFormObj: '=',//ref to parent form (get angular form object)
+        fieldsPrefixName: '=',//prefix for form fields names
+        readOnly: '=',//is form read only
+        defaultValue: '@',//this map default value
+        maxLength: '='
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./type-map-directive.html');
+    };
+
+    link = (scope:ITypeMapScope, element:any, $attr:any) => {
+        scope.MapKeyValidationPattern = this.MapKeyValidationPattern;
+
+        //reset valueObjRef and mapKeys when schema type is changed
+        scope.$watchCollection('schemaProperty.type', (newData:any):void => {
+            scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty);
+            if (scope.valueObjRef) {
+                scope.mapKeys = Object.keys(scope.valueObjRef);
+            }
+        });
+
+        //when user brows between properties in "edit property form"
+        scope.$watchCollection('fieldsPrefixName', (newData:any):void => {
+            if (!scope.valueObjRef) {
+                scope.valueObjRef = {};
+            }
+            scope.mapKeys = Object.keys(scope.valueObjRef);
+
+            if ($attr.defaultValue) {
+                scope.mapDefaultValue = JSON.parse($attr.defaultValue);
+            }
+        });
+
+        //return dummy array in order to prevent rendering map-keys ng-repeat again when a map key is changed
+        scope.getNumber = (num:number):Array<any> => {
+            return new Array(num);
+        };
+
+        scope.getValidationPattern = (type:string):RegExp => {
+            return this.ValidationUtils.getValidationPattern(type);
+        };
+
+        scope.validateIntRange = (value:string):boolean => {
+            return !value || this.ValidationUtils.validateIntRange(value);
+        };
+
+        scope.changeKeyOfMap = (newKey:string, index:number, fieldName:string):void => {
+            let oldKey = Object.keys(scope.valueObjRef)[index];
+            let existsKeyIndex = Object.keys(scope.valueObjRef).indexOf(newKey);
+            if (existsKeyIndex > -1 && existsKeyIndex != index) {
+                scope.parentFormObj[fieldName].$setValidity('keyExist', false);
+            } else {
+                scope.parentFormObj[fieldName].$setValidity('keyExist', true);
+                if (!scope.parentFormObj[fieldName].$invalid) {
+                    let newObj = {};
+                    angular.forEach(scope.valueObjRef,function(value:any,key:string){
+                        if(key == oldKey){
+                            newObj[newKey] = value;
+                        }else{
+                            newObj[key] = value;
+                        }
+                    });
+                    scope.valueObjRef = newObj;
+                }
+            }
+        };
+
+        scope.deleteMapItem = (index:number):void=> {
+            delete scope.valueObjRef[scope.mapKeys[index]];
+            scope.mapKeys.splice(index, 1);
+            if (!scope.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default
+                if (scope.mapDefaultValue) {
+                    angular.copy(scope.mapDefaultValue, scope.valueObjRef);
+                    scope.mapKeys = Object.keys(scope.valueObjRef);
+                }
+            }
+        };
+
+        scope.addMapItemFields = ():void => {
+            scope.valueObjRef[''] = null;
+            scope.mapKeys = Object.keys(scope.valueObjRef);
+        };
+
+        scope.parseToCorrectType = (objectOfValues:any, locationInObj:string, type:string):void => {
+            if (objectOfValues[locationInObj] && type != PROPERTY_TYPES.STRING) {
+                objectOfValues[locationInObj] = JSON.parse(objectOfValues[locationInObj]);
+            }
+        }
+    };
+
+    public static factory = (DataTypesService:DataTypesService,
+                             MapKeyValidationPattern:RegExp,
+                             ValidationUtils:ValidationUtils,
+                             $timeout:ng.ITimeoutService)=> {
+        return new TypeMapDirective(DataTypesService, MapKeyValidationPattern, ValidationUtils, $timeout);
+    };
+}
+
+TypeMapDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'MapKeyValidationPattern', 'ValidationUtils', '$timeout'];
diff --git a/catalog-ui/src/app/directives/punch-out/punch-out.ts b/catalog-ui/src/app/directives/punch-out/punch-out.ts
new file mode 100644
index 0000000000..aa15f1f3e9
--- /dev/null
+++ b/catalog-ui/src/app/directives/punch-out/punch-out.ts
@@ -0,0 +1,80 @@
+'use strict';
+import {IUserProperties, IAppConfigurtaion} from "app/models";
+let PunchOutRegistry = require('third-party/PunchOutRegistry.js');
+
+export interface IPunchOutScope extends ng.IScope {
+    name:string;
+    data:any;
+    user:IUserProperties;
+    onEvent:Function;
+}
+
+export class PunchOutDirective implements ng.IDirective {
+
+    constructor(private sdcConfig:IAppConfigurtaion) {
+    }
+
+    scope = {
+        name: '=',
+        data: '=',
+        user: '=',
+        onEvent: '&'
+    };
+
+    replace = false;
+    restrict = 'E';
+
+    link = (scope:IPunchOutScope, element:ng.IAugmentedJQuery):void => {
+        // global registry object
+        let PunchOutRegistry = window['PunchOutRegistry'];
+
+        let render = ():void => {
+            let cookieConfig = this.sdcConfig.cookie;
+            let props = {
+                name: scope.name,
+                options: {
+                    data: scope.data,
+                    apiRoot: this.sdcConfig.api.root,
+                    apiHeaders: {
+                        userId: {
+                            name: cookieConfig.userIdSuffix,
+                            value: scope.user.userId
+                        },
+                        userFirstName: {
+                            name: cookieConfig.userFirstName,
+                            value: scope.user.firstName
+                        },
+                        userLastName: {
+                            name: cookieConfig.userLastName,
+                            value: scope.user.lastName
+                        },
+                        userEmail: {
+                            name: cookieConfig.userEmail,
+                            value: scope.user.email
+                        }
+                    }
+                },
+                onEvent: (...args) => {
+                    scope.$apply(() => {
+                        scope.onEvent().apply(null, args);
+                    });
+                }
+            };
+            PunchOutRegistry.render(props, element[0]);
+        };
+
+        let unmount = ():void => {
+            PunchOutRegistry.unmount(element[0]);
+        };
+
+        scope.$watch('data', render);
+        element.on('$destroy', unmount);
+    };
+
+    public static factory = (sdcConfig:IAppConfigurtaion) => {
+        return new PunchOutDirective(sdcConfig);
+    };
+
+}
+
+PunchOutDirective.factory.$inject = ['sdcConfig'];
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts
new file mode 100644
index 0000000000..a41d9c59e4
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts
@@ -0,0 +1,46 @@
+'use strict';
+
+export class SdcSingleTabDirective implements ng.IDirective {
+
+    constructor(private $compile:ng.ICompileService, private $parse:ng.IParseService) {
+    }
+
+    restrict = 'E';
+
+    link = (scope, elem:any, attrs:any, ctrl:any) => {
+        if (!elem.attr('inner-sdc-single-tab')) {
+            let name = this.$parse(elem.attr('ctrl'))(scope);
+            elem = elem.removeAttr('ctrl');
+            elem.attr('inner-sdc-single-tab', name);
+            this.$compile(elem)(scope);
+        }
+    };
+
+    public static factory = ($compile:ng.ICompileService, $parse:ng.IParseService)=> {
+        return new SdcSingleTabDirective($compile, $parse);
+    };
+}
+
+export class InnerSdcSingleTabDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        singleTab: "=",
+        isViewOnly: "="
+    };
+
+    replace = true;
+    restrict = 'A';
+    controller = '@';
+    template = '<div ng-include src="singleTab.templateUrl"></div>';
+
+    public static factory = ()=> {
+        return new InnerSdcSingleTabDirective();
+    };
+}
+
+SdcSingleTabDirective.factory.$inject = ['$compile', '$parse'];
+InnerSdcSingleTabDirective.factory.$inject = [];
+
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less
@@ -0,0 +1 @@
+
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html
new file mode 100644
index 0000000000..4dc71b8780
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html
@@ -0,0 +1,17 @@
+<div class="sdc-tabs-body">
+    <div class="sdc-tabs" ng-class="{'not-active': !isActive}">
+        <div class="sdc-tab-arrow" ng-click="isActive = !isActive">
+            <span class="sprite-new close-open-left-arrow" ng-class="{'close-open-right-arrow': !isActive}"></span>
+        </div>
+        <div ng-repeat="tab in tabs track by $index">
+            <div class="sdc-tab" ng-click="onTabSelected(tab)" data-tests-id="{{tab.name}}-tab" ng-mouseenter="hover = true"
+                 ng-mouseleave="hover = false"
+                 ng-class="{'last-tab':$last, 'first-tab': $first, 'selected' :tab.name === selectedTab.name }">
+                <div class="sdc-tab-icon sprite-new {{tab.icon}}"  ng-class="{'selected' :tab.name === selectedTab.name, 'hover': hover}"></div>
+            </div>
+        </div>
+    </div>
+    <div class="sdc-single-tab-content" ng-show="isActive">
+        <sdc-single-tab class="sdc-single-tab-content-body" ng-if="selectedTab" ctrl="selectedTab.controller" data-dests-id="selected-tab" single-tab="selectedTab" is-view-only="isViewOnly"></sdc-single-tab>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts
new file mode 100644
index 0000000000..1567bfba53
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts
@@ -0,0 +1,48 @@
+/**
+ * Created by obarda on 7/28/2016.
+ */
+'use strict';
+import {Tab} from "app/models";
+
+export interface ISdcTabsDirectiveScope extends ng.IScope {
+    tabs:Array<Tab>;
+    selectedTab:Tab;
+    isActive:boolean;
+    onTabSelected(selectedTab:Tab);
+}
+
+export class SdcTabsDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        tabs: "=",
+        selectedTab: "=?",
+        isViewOnly: "="
+    };
+
+    replace = true;
+    restrict = 'E';
+    template = ():string => {
+        return require('./sdc-tabs-directive-view.html');
+    };
+
+    link = (scope:ISdcTabsDirectiveScope) => {
+        scope.isActive = true;
+
+        if (!scope.selectedTab) {
+            scope.selectedTab = scope.tabs[0];
+        }
+
+        scope.onTabSelected = (selectedTab:Tab) => {
+            scope.selectedTab = selectedTab;
+        }
+    };
+
+    public static factory = ()=> {
+        return new SdcTabsDirective();
+    };
+}
+
+SdcTabsDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less
new file mode 100644
index 0000000000..15b6fe9e1d
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less
@@ -0,0 +1,67 @@
+.sdc-tabs-body {
+    height: 100%;
+    width: 330px;
+    .sdc-tabs {
+        display: inline-block;
+        width: 40px;
+        vertical-align: top;
+        position: relative;
+        z-index: 99;
+
+        .sdc-tab-arrow {
+            cursor: pointer;
+            width: 40px;
+            height: 20px;
+            background-color: @tlv_color_u;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.17);
+            text-align: center;
+            padding: 1px 4px 0px 0px;
+
+            &:hover {
+                background-color: @main_color_o;
+            }
+
+        }
+        .sdc-tab {
+            cursor: pointer;
+            width: 40px;
+            height: 43px;
+            background-color: @tlv_color_u;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.17);
+            text-align: center;
+
+            .sdc-tab-icon {
+                margin-top: 12px;
+            }
+        }
+        .selected {
+            background-color: @tlv_color_t;
+        }
+
+        .last-tab {
+            border-bottom-left-radius: 12px;
+        }
+    }
+
+    .not-active {
+        position: absolute;
+        right: 0px;
+    }
+
+    .sdc-single-tab-content {
+        padding: 15px 0px 0px 0px;
+        width: 290px;
+        background-color: @tlv_color_t;
+        height: 100%;
+        display: inline-block;
+        bottom: 0;
+        top: 0;
+        position: absolute;
+        box-shadow: 0.3px 1px 3px rgba(24, 24, 25, 0.42);
+
+        .sdc-single-tab-content-body {
+            height: 100%;
+            display: flex;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html
new file mode 100644
index 0000000000..8560e66978
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html
@@ -0,0 +1,81 @@
+<div class="data-type-fields-structure">
+    <div class="open-close">
+        <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}"
+             data-ng-click="expandAndCollapse()"></div>
+        <span class="data-type-name">{{typeName.replace("org.openecomp.datatypes.heat.","")}}</span>
+    </div>
+    <div data-ng-show="expand" data-ng-repeat="property in dataTypeProperties" class="property" data-ng-init="property.isAlreadyInput = isAlreadyInput(property)">
+
+            <sdc-radio-button sdc-model="dataTypesService.selectedPropertiesName" value="{{path + '#' + property.name}}" data-ng-if="path && !property.isAlreadyInput"
+                              disabled="false" elem-name="selectedPropertiesName" elem-id="{{path + '#' + property.name}}" class="selectPropertyType"
+                              on-value-change="setSelectedType(property)" data-tests-id="propertyRadioButton_{{property.name}}"></sdc-radio-button>
+        <div class="existInputContainer" data-ng-if="property.isAlreadyInput"><span class="existInput"></span></div>
+        <div class="i-sdc-form-item property-name">
+            <div tooltips tooltip-content="{{property.name}}">
+                <input class="i-sdc-form-input"
+                       type="text"
+                       data-ng-disabled="true"
+                       value="{{property.name}}"/>
+            </div>
+        </div>
+        <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure">
+            <select-fields-structure value-obj-ref="(valueObjRef[property.name])"
+                                     type-name="property.type"
+                                     parent-form-obj="parentFormObj"
+                                     fields-prefix-name="fieldsPrefixName+property.name"
+                                     read-only="readOnly"
+                                     default-value="{{currentTypeDefaultValue[property.name]}}"
+                                     path="{{path + '#' + property.name}}"
+                                     is-parent-already-input="isParentAlreadyInput"
+            ></select-fields-structure>
+
+        </div>
+        <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type">
+            <div ng-switch-when="map">
+                <select-type-map value-obj-ref="valueObjRef[property.name]"
+                                 schema-property="property.schema.property"
+                                 parent-form-obj="parentFormObj"
+                                 fields-prefix-name="fieldsPrefixName+property.name"
+                                 read-only="readOnly"
+                                 default-value="{{currentTypeDefaultValue[property.name]}}"
+                ></select-type-map>
+            </div>
+            <div ng-switch-when="list">
+                <select-type-list value-obj-ref="valueObjRef[property.name]"
+                                  schema-property="property.schema.property"
+                                  parent-form-obj="parentFormObj"
+                                  fields-prefix-name="fieldsPrefixName+property.name"
+                                  read-only="readOnly"
+                                  default-value="{{currentTypeDefaultValue[property.name]}}"
+                ></select-type-list>
+            </div>
+            <div ng-switch-default class="primitive-value-field">
+                <div class="i-sdc-form-item"
+                     data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}">
+                    <input class="i-sdc-form-input"
+                           data-tests-id="{{fieldsPrefixName+property.name}}"
+                           ng-if="!((property.simpleType||property.type) == 'boolean')"
+                           data-ng-maxlength="100"
+                           data-ng-disabled="readOnly"
+                           maxlength="100"
+                           data-ng-model="valueObjRef[property.name]"
+                           type="text"
+                           name="{{fieldsPrefixName+property.name}}"
+                           data-ng-model-options="{ debounce: 200 }"
+                           data-ng-change="!parentFormObj[fieldsPrefixName+property.name].$error.pattern && ('integer'==property.type && parentFormObj[fieldsPrefixName+property.name].$setValidity('pattern', validateIntRange(valueObjRef[property.name])) || onValueChange(property.name, (property.simpleType||property.type)))"
+                           autofocus/>
+                    <select class="i-sdc-form-select"
+                            data-tests-id="{{fieldsPrefixName+property.name}}"
+                            ng-if="(property.simpleType||property.type) == 'boolean'"
+                            data-ng-disabled="readOnly"
+                            name="{{fieldsPrefixName+property.name}}"
+                            data-ng-change="onValueChange(property.name,'boolean')"
+                            data-ng-model="valueObjRef[property.name]"
+                            data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
+                    </select>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
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
new file mode 100644
index 0000000000..43d2d646a1
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less
@@ -0,0 +1,117 @@
+
+.selectPropertyType {
+    .tlv-radio-label {
+        margin-top: -7px;
+    }
+}
+
+.data-type-fields-structure {
+    background-color: @tlv_color_v;
+    padding: 10px;
+    display: table-caption;
+    .open-close {
+        position: relative;
+        .open-close-button {
+            position: absolute;
+            top: 50%;
+            margin-top: -7px;
+            &.expand {
+                .sprite-new;
+                .expand-collapse-minus-icon;
+            }
+            &.collapse {
+                .sprite-new;
+                .expand-collapse-plus-icon;
+            }
+        }
+
+    }
+
+    .existInputContainer {
+        height: 30px;
+        width: 20px;
+        position: relative;
+    }
+    .existInput {
+        .sprite-new;
+        .sdc-success;
+        position: absolute;
+        top: 18px;
+        left: 3px;
+    }
+
+    .data-type-name {
+        .m_16_m;
+        margin-left: 22px;
+    }
+
+    .i-sdc-form-input:disabled{
+        .disabled;
+        &[type="text"]{
+            opacity: 1 !important;
+            background-color: @tlv_color_t;
+            color:black;
+        }
+    }
+
+    .property {
+        display: flex;
+        min-width: 365px;
+        min-height: 46px;
+        input[type="text"], select {
+            width: 170px;
+        }
+        .property-name {
+            float: left;
+            margin-top: 8px;
+        }
+        .primitive-value-field {
+            float: right;
+            margin-top: 8px;
+            margin-left: 10px;
+        }
+        .inner-structure {
+            display: -webkit-box;
+        }
+    }
+
+    [ng-switch-when="map"] {
+        margin-top: 8px;
+        margin-left: 10px;
+        .map-item {
+            border: solid 1px @main_color_o;
+            min-width: 401px;
+            min-height: 69px;
+            float: none !important;
+        }
+        .add-map-item {
+            width: auto;
+            float: none;
+            &:nth-child(1) {
+                position: relative;
+                top: 6px;
+            }
+            .add-btn {
+                float: none;
+            }
+        }
+
+    }
+
+    [ng-switch-when="list"] {
+        float: left;
+        margin-top: 8px;
+        margin-left: 10px;
+        min-width: 280px;
+        .dt-list-item {
+            border: solid 1px @main_color_o;
+        }
+        .list-value-items {
+            width: 280px;
+        }
+    }
+}
+
+
+
+
diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts
new file mode 100644
index 0000000000..aee4b3b6af
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts
@@ -0,0 +1,184 @@
+/**
+ * Created by obarda on 1/27/2016.
+ */
+'use strict';
+import {ValidationUtils} from "app/utils";
+import { DataTypesService } from "app/services";
+import { DataTypePropertyModel } from "app/models/data-type-properties";
+import {DataTypesMap, PropertyModel} from "app/models";
+
+export interface ISelectDataTypeFieldsStructureScope extends ng.IScope {
+    parentFormObj:ng.IFormController;
+    dataTypeProperties:Array<DataTypePropertyModel>;
+    typeName:string;
+    valueObjRef:any;
+    propertyNameValidationPattern:RegExp;
+    fieldsPrefixName:string;
+    readOnly:boolean;
+    currentTypeDefaultValue:any;
+    types:DataTypesMap;
+    expandByDefault:boolean;
+    expand:boolean;
+    expanded:boolean;
+    dataTypesService:DataTypesService;
+    path:string;
+    isParentAlreadyInput:boolean;
+
+    expandAndCollapse():void;
+    getValidationPattern(type:string):RegExp;
+    validateIntRange(value:string):boolean;
+    isAlreadyInput(property:PropertyModel):boolean;
+    setSelectedType(property:PropertyModel):void;
+    onValueChange(propertyName:string, type:string):void;
+}
+
+
+export class SelectDataTypeFieldsStructureDirective implements ng.IDirective {
+
+    constructor(private DataTypesService:DataTypesService,
+                private PropertyNameValidationPattern:RegExp,
+                private ValidationUtils:ValidationUtils) {
+    }
+
+    scope = {
+        valueObjRef: '=',
+        typeName: '=',
+        parentFormObj: '=',
+        fieldsPrefixName: '=',
+        readOnly: '=',
+        defaultValue: '@',
+        expandByDefault: '=',
+        path: '@',
+        isParentAlreadyInput: '='
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./select-data-type-fields-structure.html');
+    };
+    // public types=Utils.Constants.PROPERTY_DATA.TYPES;
+
+    //get data type properties array and return object with the properties and their default value
+    //(for example: get: [{name:"prop1",defaultValue:1 ...},{name:"prop2", defaultValue:"bla bla" ...}]
+    //              return: {prop1: 1, prop2: "bla bla"}
+    private getDefaultValue = (dataTypeProperties:Array<DataTypePropertyModel>):any => {
+        let defaultValue = {};
+        for (let i = 0; i < dataTypeProperties.length; i++) {
+            if (dataTypeProperties[i].type != 'string') {
+                if (!angular.isUndefined(dataTypeProperties[i].defaultValue)) {
+                    defaultValue[dataTypeProperties[i].name] = JSON.parse(dataTypeProperties[i].defaultValue);
+                }
+            } else {
+                defaultValue[dataTypeProperties[i].name] = dataTypeProperties[i].defaultValue;
+            }
+        }
+        return defaultValue;
+    };
+
+    private initDataOnScope = (scope:ISelectDataTypeFieldsStructureScope, $attr:any):void => {
+        scope.dataTypesService = this.DataTypesService;
+        scope.dataTypeProperties = angular.copy(this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName));
+        if ($attr.defaultValue) {
+            scope.currentTypeDefaultValue = JSON.parse($attr.defaultValue);
+        } else {
+            scope.currentTypeDefaultValue = this.getDefaultValue(scope.dataTypeProperties);
+        }
+
+        if (!scope.valueObjRef) {
+            scope.valueObjRef = {};
+        }
+
+        _.forEach(scope.currentTypeDefaultValue, (value, key)=> {
+            if (angular.isUndefined(scope.valueObjRef[key])) {
+                if (typeof scope.currentTypeDefaultValue[key] == 'object') {
+                    angular.copy(scope.currentTypeDefaultValue[key], scope.valueObjRef[key]);
+                } else {
+                    scope.valueObjRef[key] = scope.currentTypeDefaultValue[key];
+                }
+            }
+        });
+    };
+
+    private rerender = (scope:any):void => {
+        scope.expanded = false;
+        scope.expand = false;
+        if (scope.expandByDefault) {
+            scope.expandAndCollapse();
+        }
+    };
+
+    link = (scope:ISelectDataTypeFieldsStructureScope, element:any, $attr:any) => {
+        scope.propertyNameValidationPattern = this.PropertyNameValidationPattern;
+
+        scope.$watchCollection('[typeName,fieldsPrefixName]', (newData:any):void => {
+            this.rerender(scope);
+        });
+
+
+        scope.expandAndCollapse = ():void => {
+            if (!scope.expanded) {
+                this.initDataOnScope(scope, $attr);
+                scope.expanded = true;
+            }
+            scope.expand = !scope.expand;
+        };
+
+        scope.getValidationPattern = (type:string):RegExp => {
+            return this.ValidationUtils.getValidationPattern(type);
+        };
+
+        scope.validateIntRange = (value:string):boolean => {
+            return !value || this.ValidationUtils.validateIntRange(value);
+        };
+
+        /*
+         check if property is alrady declered on the service by meatching the input name & the property name
+
+         */
+        scope.isAlreadyInput = (property:PropertyModel):boolean => {
+            if (scope.path) {
+                if (scope.isParentAlreadyInput) {
+                    return true;
+                }
+                let parentInputName = this.DataTypesService.selectedInstance.normalizedName + '_' + scope.path.replace('#', '_');// set the input parent  as he need to declared as input
+                let inputName = parentInputName + '_' + property.name;// set the input name as he need to declared as input
+                let selectedProperty = _.find(this.DataTypesService.selectedComponentInputs, (componentInput)=> {
+                    if (componentInput.name == parentInputName) { //check if the parent(all the complex) is already declared
+                        scope.isParentAlreadyInput = true;
+                        return true;
+                    } else if (componentInput.name.substring(0, inputName.length) == inputName) { //check if specific property inside the complex
+                        return true;
+                    }
+                    //return componentInput.name == parentInputName || componentInput.name.substring(0,inputName.length) == inputName;//check if the parent(all the complex) is already declared or specific property inside the complex
+                });
+                if (selectedProperty) {
+                    return true;
+                }
+            }
+            return false;
+        };
+
+        scope.setSelectedType = (property:PropertyModel):void=> {
+            scope.dataTypesService.selectedInput = property;
+            scope.dataTypesService.selectedPropertiesName = scope.path + '#' + property.name;
+        };
+
+        scope.onValueChange = (propertyName:string, type:string):void => {
+            scope.valueObjRef[propertyName] = !angular.isUndefined(scope.valueObjRef[propertyName]) ? scope.valueObjRef[propertyName] : scope.currentTypeDefaultValue[propertyName];
+            if (scope.valueObjRef[propertyName] && type != 'string') {
+                scope.valueObjRef[propertyName] = JSON.parse(scope.valueObjRef[propertyName]);
+            }
+        };
+
+
+    };
+
+    public static factory = (DataTypesService:DataTypesService,
+                             PropertyNameValidationPattern:RegExp,
+                             ValidationUtils:ValidationUtils)=> {
+        return new SelectDataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils);
+    };
+}
+
+SelectDataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils'];
diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.html b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.html
new file mode 100644
index 0000000000..f439147301
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.html
@@ -0,0 +1,56 @@
+<div>
+    <div data-ng-if="!isSchemaTypeDataType">
+        <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}">
+            <input class="i-sdc-form-input"
+                   data-tests-id="listNewItem{{fieldsPrefixName}}"
+                   ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
+                   data-ng-disabled="readOnly"
+                   data-ng-model="listNewItem.value"
+                   type="text"
+                   name="listNewItem{{fieldsPrefixName}}"
+                   data-ng-model-options="{ debounce: 200 }"
+                   placeholder="Type a value and then click ADD"
+                   data-ng-maxlength="maxLength"
+                   maxlength="{{maxLength}}"
+                   sdc-keyboard-events="" key-enter="schemaProperty.type && !parentFormObj['listNewItem'+fieldsPrefixName].$invalid && listNewItem.value && addListItem"
+                   autofocus />
+            <select class="i-sdc-form-select"
+                    data-tests-id="listNewItem{{fieldsPrefixName}}"
+                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    data-ng-disabled="readOnly"
+                    name="listNewItem{{fieldsPrefixName}}"
+                    data-ng-model="listNewItem.value">
+                <option value="true">true</option>
+                <option value="false">false</option>
+            </select>
+            <div class="input-error" data-ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid">
+                <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
+                <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span>
+            </div>
+        </div>
+        <!--<div class="add-btn add-list-item" data-tests-id="add-list-item{{fieldsPrefixName}}"-->
+             <!--data-ng-class="{'disabled': readOnly || !schemaProperty.type || parentFormObj['listNewItem'+fieldsPrefixName].$invalid || !listNewItem.value}" data-ng-click="addListItem()">Add</div>-->
+        <div class="list-value-items">
+                                    <span class="list-value-item" data-ng-repeat="value in valueObjRef track by $index">
+                                        {{value}}
+                                        <span ng-if="!readOnly" class="delete-list-item sprite-new small-x-button" data-ng-click="deleteListItem($index)"></span>
+                                    </span>
+        </div>
+    </div>
+    <div data-ng-if="isSchemaTypeDataType">
+        <div class="dt-list">
+            <div data-ng-repeat="value in valueObjRef track by $index" class="dt-list-item">
+                <select-fields-structure value-obj-ref="valueObjRef[$index]"
+                                  type-name="schemaProperty.type"
+                                  parent-form-obj="parentFormObj"
+                                  fields-prefix-name="fieldsPrefixName+''+$index"
+                                  read-only="readOnly">
+                                         <!--path="{{path}}"-->
+                </select-fields-structure>
+            </div>
+            <!--<div class="add-btn add-list-item" data-tests-id="add-list-item"-->
+                       <!--data-ng-class="{'disabled': readOnly}" data-ng-click="listNewItem.value='{}';addListItem();">Add</div>-->
+        </div>
+
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less
new file mode 100644
index 0000000000..71263f2642
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less
@@ -0,0 +1,85 @@
+.list-new-item{
+    float: left;
+    width: 50%;
+    min-width: 221px;
+    margin-right: 15px;
+    input{
+        min-width: 221px;
+    }
+}
+
+.list-value-items{
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    border: 1px solid @main_color_o;
+    padding-bottom: 10px;
+    min-height: 100px;
+    clear: both;
+    background-color: white;
+    .list-value-item{
+        display: inline-block;
+        background-color: @tlv_color_v;
+        margin: 10px 0 0 10px;
+        padding: 0 8px;
+        .delete-list-item{
+            margin: 0 0 0 2px;
+            .hand;
+        }
+    }
+}
+
+.add-btn {
+    .f-color.a;
+    .f-type._14_m;
+    .hand;
+
+    &.add-list-item {
+        float: left;
+        margin-top: 5px;
+        width: 44px;
+    }
+
+    &:before {
+        .sprite-new;
+        .plus-icon;
+        margin-right: 5px;
+        content: "";
+
+    }
+    &:hover {
+        .f-color.b;
+        &:before {
+            .sprite-new;
+            .plus-icon-hover;
+        }
+    }
+
+}
+
+.dt-list{
+    display: table-caption;
+    .dt-list-item {
+        border-radius: 3px;
+        background-color: @tlv_color_v;
+        display: inline-block;
+        .delete-dt-list-item{
+            float: right;
+            position: relative;
+            top: 5px;
+            right: 5px;
+            .sprite-new;
+            .delete-icon;
+            &:hover{
+                .delete-icon-hover;
+            }
+        }
+        .data-type-name{
+            margin-right: 16px;
+        }
+    }
+    &>.add-list-item{
+        float:none;
+    }
+}
+
diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.ts b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.ts
new file mode 100644
index 0000000000..d277040798
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.ts
@@ -0,0 +1,108 @@
+/**
+ * Created by rcohen on 9/15/2016.
+ */
+'use strict';
+import {DataTypesService} from "app/services/data-types-service";
+import {SchemaProperty} from "app/models/aschema-property";
+import {ValidationUtils, PROPERTY_TYPES} from "app/utils";
+
+export interface ISelectTypeListScope extends ng.IScope {
+    parentFormObj:ng.IFormController;
+    schemaProperty:SchemaProperty;
+    isSchemaTypeDataType:boolean;
+    valueObjRef:any;
+    propertyNameValidationPattern:RegExp;
+    fieldsPrefixName:string;
+    readOnly:boolean;
+    listDefaultValue:any;
+    listNewItem:any;
+    maxLength:number;
+    dataTypesService:DataTypesService;
+
+    getValidationPattern(type:string):RegExp;
+    validateIntRange(value:string):boolean;
+    addListItem():void;
+    deleteListItem(listItemIndex:number):void
+}
+
+export class SelectTypeListDirective implements ng.IDirective {
+
+    constructor(private DataTypesService:DataTypesService,
+                private PropertyNameValidationPattern:RegExp,
+                private ValidationUtils:ValidationUtils) {
+    }
+
+    scope = {
+        valueObjRef: '=',//ref to list object in the parent value object
+        schemaProperty: '=',//get the schema.property object
+        parentFormObj: '=',//ref to parent form (get angular form object)
+        fieldsPrefixName: '=',//prefix for form fields names
+        readOnly: '=',//is form read only
+        defaultValue: '@',//this list default value
+        maxLength: '=',
+        path: '@'
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./select-type-list-directive.html');
+    };
+
+    link = (scope:ISelectTypeListScope, element:any, $attr:any) => {
+        scope.dataTypesService = this.DataTypesService;
+        scope.propertyNameValidationPattern = this.PropertyNameValidationPattern;
+
+        //reset valueObjRef when schema type is changed
+        scope.$watchCollection('schemaProperty.type', (newData:any):void => {
+            scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty);
+            //insert 1 empty item dt by default
+            if (scope.isSchemaTypeDataType && (!scope.valueObjRef || !scope.valueObjRef.length)) {
+                scope.valueObjRef = scope.valueObjRef || [];
+                scope.valueObjRef.push({});
+            }
+        });
+
+        //when user brows between properties in "edit property form"
+        scope.$watchCollection('fieldsPrefixName', (newData:any):void => {
+            scope.listNewItem = {value: ''};
+
+            if ($attr.defaultValue) {
+                scope.listDefaultValue = JSON.parse($attr.defaultValue);
+            }
+        });
+
+        scope.getValidationPattern = (type:string):RegExp => {
+            return this.ValidationUtils.getValidationPattern(type);
+        };
+
+        scope.validateIntRange = (value:string):boolean => {
+            return !value || this.ValidationUtils.validateIntRange(value);
+        };
+
+        scope.addListItem = ():void => {
+            scope.valueObjRef = scope.valueObjRef || [];
+            let newVal = ((scope.schemaProperty.simpleType || scope.schemaProperty.type) == PROPERTY_TYPES.STRING ? scope.listNewItem.value : JSON.parse(scope.listNewItem.value));
+            scope.valueObjRef.push(newVal);
+            scope.listNewItem.value = "";
+        };
+
+        scope.deleteListItem = (listItemIndex:number):void => {
+            scope.valueObjRef.splice(listItemIndex, 1);
+            if (!scope.valueObjRef.length) {
+                if (scope.listDefaultValue) {
+                    angular.copy(scope.listDefaultValue, scope.valueObjRef);
+                }
+            }
+        };
+    };
+
+    public static factory = (DataTypesService:DataTypesService,
+                             PropertyNameValidationPattern:RegExp,
+                             ValidationUtils:ValidationUtils)=> {
+        return new SelectTypeListDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils);
+    };
+}
+
+SelectTypeListDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils'];
+
diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.html b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.html
new file mode 100644
index 0000000000..a56428e5c2
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.html
@@ -0,0 +1,56 @@
+<div>
+    <div data-ng-repeat="i in getNumber(mapKeys.length) track by $index" class="map-item" data-ng-class="{'primitive-value-map':!isSchemaTypeDataType}">
+        <div class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapKey'+fieldsPrefixName+$index].$dirty && parentFormObj['mapKey'+fieldsPrefixName+$index].$invalid)}">
+            <label class="i-sdc-form-label required">Key</label>
+            <input class="i-sdc-form-input"
+                   data-tests-id="mapKey{{fieldsPrefixName}}{{$index}}"
+                   data-ng-model="mapKeys[$index]"
+                   type="text"
+                   data-ng-maxlength="50"
+                   maxlength="50"
+                   name="mapKey{{fieldsPrefixName}}{{$index}}"
+                   data-ng-model-options="{ debounce: 200 }"
+                   data-ng-change="changeKeyOfMap(mapKeys[$index], $index,'mapKey'+fieldsPrefixName+$index);$event.stopPropagation();"
+                   data-ng-disabled="readOnly"
+                   data-required
+                   autofocus/>
+        </div>
+        <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}">
+            <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-model="valueObjRef[mapKeys[$index]]"
+                   type="text"
+                   name="mapValue{{fieldsPrefixName}}{{$index}}"
+                   data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}"
+                   data-ng-change="!parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern && parseToCorrectType(valueObjRef, key, (schemaProperty.simpleType||schemaProperty.type))"
+                   data-ng-model-options="{ debounce: 200 }"
+                   data-ng-maxlength="maxLength"
+                   maxlength="{{maxLength}}"
+                   data-required
+                   autofocus />
+            <select class="i-sdc-form-select"
+                    data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}"
+                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    data-ng-disabled="readOnly"
+                    name="mapValue{{fieldsPrefixName}}{{$index}}"
+                    data-ng-model="valueObjRef[mapKeys[$index]]"
+                    data-required>
+                <option value="true">true</option>
+                <option value="false">false</option>
+            </select>
+        </div>
+        <div data-ng-if="isSchemaTypeDataType" class="i-sdc-form-item map-item-field">
+            <label class="i-sdc-form-label">Value</label>
+            <select-fields-structure value-obj-ref="valueObjRef[mapKeys[$index]]"
+                              type-name="schemaProperty.type"
+                              parent-form-obj="parentFormObj"
+                              fields-prefix-name="'mapValue'+fieldsPrefixName+''+$index"
+                              read-only="readOnly">
+                                     <!--path="{{path + '#' + mapKeys[$index]}}"-->
+            </select-fields-structure>
+        </div>
+    </div>
+</div>
+
diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.less b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.less
new file mode 100644
index 0000000000..2480b626f2
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.less
@@ -0,0 +1,83 @@
+.add-map-item{
+    &:nth-child(odd){
+        float: right;
+    }
+    &:nth-child(1){
+        float: none;
+        .add-btn{
+            float: none;
+        }
+    }
+    width: 400px;
+    .add-btn{
+        width: 44px;
+        float: right;
+    }
+    &.schema-data-type{
+        float:none;
+        .add-btn{
+            float: none;
+        }
+    }
+}
+
+.add-btn {
+    .f-color.a;
+    .f-type._14_m;
+    .hand;
+
+    &:before {
+        .sprite-new;
+        .plus-icon;
+        margin-right: 5px;
+        content: "";
+
+    }
+    &:hover {
+        .f-color.b;
+        &:before {
+            .sprite-new;
+            .plus-icon-hover;
+        }
+    }
+
+}
+
+.map-item{
+    min-width: 389px;
+    min-height: 65px;
+    background-color: @tlv_color_v;
+    border-radius: 3px;
+    margin-bottom: 8px;
+    float: left;
+    display: flex;
+    &:nth-child(even).primitive-value-map{
+        float: right;
+    }
+    .delete-map-item {
+        float: right;
+        position: relative;
+        top: 5px;
+        right: 5px;
+        .sprite-new;
+        .delete-icon;
+        &:hover{
+            .delete-icon-hover;
+        }
+    }
+    .map-item-field {
+        margin: 7px 12px !important;
+        float: left;
+        min-width: 170px;
+        min-height: 50px;
+        select{
+            width:171px;
+        }
+        input[type="text"]{
+            width: 170px;
+        }
+        &>.data-type-fields-structure{
+            padding: 0;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.ts b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.ts
new file mode 100644
index 0000000000..19df8dfb71
--- /dev/null
+++ b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.ts
@@ -0,0 +1,139 @@
+/**
+ * Created by rcohen on 9/15/2016.
+ */
+'use strict';
+import {SchemaProperty} from "app/models";
+import {DataTypesService} from "app/services";
+import {ValidationUtils, PROPERTY_TYPES} from "app/utils";
+
+export interface ISelectTypeMapScope extends ng.IScope {
+    parentFormObj:ng.IFormController;
+    schemaProperty:SchemaProperty;
+    isSchemaTypeDataType:boolean;
+    valueObjRef:any;
+    mapKeys:Array<string>;//array of map keys
+    MapKeyValidationPattern:RegExp;
+    fieldsPrefixName:string;
+    readOnly:boolean;
+    mapDefaultValue:any;
+    maxLength:number;
+    dataTypesService:DataTypesService;
+
+    getValidationPattern(type:string):RegExp;
+    validateIntRange(value:string):boolean;
+    changeKeyOfMap(newKey:string, index:number, fieldName:string):void;
+    deleteMapItem(index:number):void;
+    addMapItemFields():void;
+    parseToCorrectType(objectOfValues:any, locationInObj:string, type:string):void;
+    getNumber(num:number):Array<any>;
+}
+
+
+export class SelectTypeMapDirective implements ng.IDirective {
+
+    constructor(private DataTypesService:DataTypesService,
+                private MapKeyValidationPattern:RegExp,
+                private ValidationUtils:ValidationUtils,
+                private $timeout:ng.ITimeoutService) {
+    }
+
+    scope = {
+        valueObjRef: '=',//ref to map object in the parent value object
+        schemaProperty: '=',//get the schema.property object
+        parentFormObj: '=',//ref to parent form (get angular form object)
+        fieldsPrefixName: '=',//prefix for form fields names
+        readOnly: '=',//is form read only
+        defaultValue: '@',//this map default value
+        maxLength: '=',
+        path: '@'
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./select-type-map-directive.html');
+    };
+
+    link = (scope:ISelectTypeMapScope, element:any, $attr:any) => {
+
+        scope.dataTypesService = this.DataTypesService;
+        scope.MapKeyValidationPattern = this.MapKeyValidationPattern;
+
+        //reset valueObjRef and mapKeys when schema type is changed
+        scope.$watchCollection('schemaProperty.type', (newData:any):void => {
+            scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty);
+            if (scope.valueObjRef) {
+                scope.mapKeys = Object.keys(scope.valueObjRef);
+            }
+        });
+
+        //when user brows between properties in "edit property form"
+        scope.$watchCollection('fieldsPrefixName', (newData:any):void => {
+            if (!scope.valueObjRef) {
+                scope.valueObjRef = {};
+            }
+            scope.mapKeys = Object.keys(scope.valueObjRef);
+
+            if ($attr.defaultValue) {
+                scope.mapDefaultValue = JSON.parse($attr.defaultValue);
+            }
+        });
+
+        //return dummy array in order to prevent rendering map-keys ng-repeat again when a map key is changed
+        scope.getNumber = (num:number):Array<any> => {
+            return new Array(num);
+        };
+
+        scope.getValidationPattern = (type:string):RegExp => {
+            return this.ValidationUtils.getValidationPattern(type);
+        };
+
+        scope.validateIntRange = (value:string):boolean => {
+            return !value || this.ValidationUtils.validateIntRange(value);
+        };
+
+        scope.changeKeyOfMap = (newKey:string, index:number, fieldName:string):void => {
+            let oldKey = Object.keys(scope.valueObjRef)[index];
+            let existsKeyIndex = Object.keys(scope.valueObjRef).indexOf(newKey);
+            if (existsKeyIndex > -1 && existsKeyIndex != index) {
+                scope.parentFormObj[fieldName].$setValidity('keyExist', false);
+            } else {
+                scope.parentFormObj[fieldName].$setValidity('keyExist', true);
+                if (!scope.parentFormObj[fieldName].$invalid) {
+                    angular.copy(JSON.parse(JSON.stringify(scope.valueObjRef).replace('"' + oldKey + '":', '"' + newKey + '":')), scope.valueObjRef);//update key
+                }
+            }
+        };
+
+        scope.deleteMapItem = (index:number):void=> {
+            delete scope.valueObjRef[scope.mapKeys[index]];
+            scope.mapKeys.splice(index, 1);
+            if (!scope.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default
+                if (scope.mapDefaultValue) {
+                    angular.copy(scope.mapDefaultValue, scope.valueObjRef);
+                    scope.mapKeys = Object.keys(scope.valueObjRef);
+                }
+            }
+        };
+
+        scope.addMapItemFields = ():void => {
+            scope.valueObjRef[''] = null;
+            scope.mapKeys = Object.keys(scope.valueObjRef);
+        };
+
+        scope.parseToCorrectType = (objectOfValues:any, locationInObj:string, type:string):void => {
+            if (objectOfValues[locationInObj] && type != PROPERTY_TYPES.STRING) {
+                objectOfValues[locationInObj] = JSON.parse(objectOfValues[locationInObj]);
+            }
+        }
+    };
+
+    public static factory = (DataTypesService:DataTypesService,
+                             MapKeyValidationPattern:RegExp,
+                             ValidationUtils:ValidationUtils,
+                             $timeout:ng.ITimeoutService)=> {
+        return new SelectTypeMapDirective(DataTypesService, MapKeyValidationPattern, ValidationUtils, $timeout);
+    };
+}
+
+SelectTypeMapDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'MapKeyValidationPattern', 'ValidationUtils', '$timeout'];
diff --git a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html
new file mode 100644
index 0000000000..7d8a883b33
--- /dev/null
+++ b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html
@@ -0,0 +1,54 @@
+<div class="structure-tree">
+    <div class="component-container">
+        <div class="{{component.iconSprite}} small" ng-class="structureTree.serviceRoot.icon"></div>
+        <div class="component-container-text" tooltip-class="tooltip-custom break-word-tooltip" tooltips tooltip-content="&#8203;{{structureTree.serviceRoot.name}}"> {{structureTree.serviceRoot.name}}</div>
+    </div>
+    <ul>
+        <li  data-ng-repeat="firstLevelResourcesInstances in structureTree.serviceRoot.resourceInstancesList">
+            <div class="component-container">
+                <div class="small {{firstLevelResourcesInstances.icon}}" ng-class="{'sprite-resource-icons': !component.isProduct(), 'sprite-services-icons': component.isProduct()}">
+                    <div data-ng-class="{'non-certified':!firstLevelResourcesInstances.certified}"
+                         tooltips tooltip-side="top" tooltip-content="Not certified">
+                    </div>
+                </div>
+                <div class="component-container-text"  tooltips tooltip-content="{{firstLevelResourcesInstances.name}}" >   {{firstLevelResourcesInstances.name}} </div>
+            </div>
+            <ul>
+                <li data-ng-repeat="secondLevelResourcesInstances in firstLevelResourcesInstances.resourceInstancesList">
+                    <div class="component-container">
+                        <div class="sprite-resource-icons small" ng-class="secondLevelResourcesInstances.icon">
+                            <div data-ng-class="{'non-certified':!secondLevelResourcesInstances.certified}"
+                                 tooltips tooltip-side="top" tooltip-content="Not certified">
+                            </div>
+                        </div>
+                        <div class="component-container-text" tooltips tooltip-content="{{secondLevelResourcesInstances.name}}">   {{secondLevelResourcesInstances.name}} </div>
+                    </div>
+                    <ul>
+                        <li data-ng-repeat="thirdLevelResourcesInstances in secondLevelResourcesInstances.resourceInstancesList">
+                            <div class="component-container">
+                                <div class="sprite-resource-icons small" ng-class="thirdLevelResourcesInstances.icon">
+                                    <div data-ng-class="{'non-certified':!thirdLevelResourcesInstances.certified}"
+                                         tooltips tooltip-side="top" tooltip-content="Not certified">
+                                    </div>
+                                </div>
+                                <div class="component-container-text" tooltips tooltip-content="{{thirdLevelResourcesInstances.name}}" >   {{thirdLevelResourcesInstances.name}} </div>
+                            </div>
+                            <ul>
+                                <li data-ng-repeat="forthLevelResourcesInstances in thirdLevelResourcesInstances.resourceInstancesList">
+                                    <div class="component-container">
+                                        <div class="sprite-resource-icons small" ng-class="forthLevelResourcesInstances.icon">
+                                            <div data-ng-class="{'non-certified':!forthLevelResourcesInstances.certified}"
+                                                 tooltips tooltip-side="top" tooltip-content="Not certified">
+                                            </div>
+                                        </div>
+                                        <div class="component-container-text" tooltips tooltip-content="{{forthLevelResourcesInstances.name}}">   {{forthLevelResourcesInstances.name}} </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</div>
diff --git a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.less b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.less
new file mode 100644
index 0000000000..094c3f70ba
--- /dev/null
+++ b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.less
@@ -0,0 +1,68 @@
+.structure-tree{
+    padding: 9px 0px 10px 30px;
+    position: relative;
+    ul{
+        position: relative;
+        list-style: none;
+        padding-left:25px;
+        ::before{
+            content: "";
+            position: absolute;
+            left: -27px;
+        }
+        ::after{
+            content: "";
+            position: absolute;
+            left: -27px;
+        }
+        li{
+            position: relative;
+            &::before{
+                border-top: 1px solid #666666;
+                top: 20px;
+                width: 10px;
+                height: 0;
+            }
+            &::after{
+                border-left: 1px solid #666666;
+                height: 100%;
+                width: 0px;
+                top: -2px;
+            }
+            &:last-child::after{
+                height: 23px
+            }
+        }
+    }
+    .component-container{
+        display: inline-block;
+        margin: 6px 0px 0px -16px;
+    }
+    .component-container-icon{
+        display: inline-block;
+    }
+    .component-container-text{
+        padding-left: 8px;
+        float: right;
+
+        text-overflow: ellipsis;
+        max-width:120px;
+        display: inline-block;
+        white-space: nowrap;
+        font-size: 13px;
+        color: #666666;;
+        overflow: hidden;
+        line-height: 28px;
+        float: none;
+    }
+
+    .non-certified{
+        position: relative;
+        left: 18px;
+        bottom: 8px;
+        .sprite;
+        .s-sdc-state-non-certified;
+        display:block;
+    }
+
+}
diff --git a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.ts b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.ts
new file mode 100644
index 0000000000..4d6fbee4db
--- /dev/null
+++ b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.ts
@@ -0,0 +1,195 @@
+/*-
+ * ============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 {RelationshipModel, Component, ComponentInstance} from "app/models";
+import {Dictionary} from "app/utils";
+
+
+export interface IStructureTreeScope extends ng.IScope {
+
+    component:Component;
+    structureTree:StructureTree;
+}
+
+class StructureTree {
+
+    serviceRoot:ResourceInstanceNode;
+
+    constructor(private uniqueId:string, private resourceInstanceName:string, private resourceInstanceIcon:string, private certified:boolean) {
+        this.serviceRoot = new ResourceInstanceNode(uniqueId, resourceInstanceName, resourceInstanceIcon, certified);
+    }
+
+}
+
+class ResourceInstanceNode {
+    id:string;
+    icon:string;
+    name:string;
+    resourceInstancesList:Array<ResourceInstanceNode>;
+    isAlreadyInTree:boolean;
+    certified:boolean;
+
+
+    constructor(private uniqueId:string, private resourceInstanceName:string, private resourceInstanceIcon:string, certified:boolean) {
+        this.id = uniqueId;
+        this.name = resourceInstanceName;
+        this.icon = resourceInstanceIcon;
+        this.resourceInstancesList = [];
+        this.isAlreadyInTree = false;
+        this.certified = certified;
+    }
+}
+
+export class StructureTreeDirective implements ng.IDirective {
+
+
+    constructor() {
+    }
+
+    scope = {
+        component: '=',
+    };
+    restrict = 'E';
+    template = ():string => {
+        return require('./structure-tree-directive.html');
+    };
+
+    link = (scope:IStructureTreeScope, $elem:any) => {
+
+        let RESOURCE_INSTANCE_LIST:string = "resourceInstancesChildesList";
+        let resourceInstanceMap:Dictionary<string, ResourceInstanceNode>;
+        let relations:Array<RelationshipModel>;
+        //************* Start Building Tree Functions *******************//
+
+        //remove unnecessary instances
+        let initResourceInstanceMap = ():void => {
+
+            resourceInstanceMap = new Dictionary<string, ResourceInstanceNode>();
+
+            _.forEach(scope.component.componentInstances, (resourceInstance:ComponentInstance)=> {
+                if (_.some(Object.keys(resourceInstance.capabilities), (key:string)=> {
+                        return 'tosca.capabilities.container' == key.toLowerCase();
+                    }) || _.some(Object.keys(resourceInstance.requirements), (key:string)=> {
+                        return 'tosca.capabilities.container' == key.toLowerCase();
+                    })) {
+
+                    let isCertified = 0 === (parseFloat(resourceInstance.componentVersion) % 1);
+                    let node:ResourceInstanceNode = new ResourceInstanceNode(resourceInstance.uniqueId,
+                        resourceInstance.name,
+                        resourceInstance.icon,
+                        isCertified);
+                    resourceInstanceMap.setValue(resourceInstance.uniqueId, node);
+                }
+            });
+        };
+
+        //remove unnecessary relations
+        let initRelations = ():void => {
+            relations = _.filter(scope.component.componentInstancesRelations, (relation:RelationshipModel)=> {
+                return resourceInstanceMap.containsKey(relation.fromNode) && resourceInstanceMap.containsKey(relation.toNode);
+            });
+        };
+
+        let buildTree = ():void => {
+            if (scope.component) {
+                scope.structureTree = new StructureTree(scope.component.uniqueId, scope.component.name, scope.component.icon, 'CERTIFIED' === scope.component.lifecycleState);
+                initResourceInstanceMap();
+                initRelations();
+
+                let parentNodesList = _.groupBy(relations, (node:any)=> {
+                    return node.fromNode;
+                });
+
+                for (let parent in parentNodesList) {
+                    _.forEach(parentNodesList[parent], (childNode)=> {
+                        parentNodesList[parent][RESOURCE_INSTANCE_LIST] = [];
+                        parentNodesList[parent][RESOURCE_INSTANCE_LIST].push(mergeAllSubtrees(childNode, parentNodesList));
+                    });
+                }
+
+                //add the resourceInstanceList for the service root node
+                for (let parent in parentNodesList) {
+                    let resourceInstanceNode:ResourceInstanceNode = resourceInstanceMap.getValue(parent);
+                    resourceInstanceNode.resourceInstancesList = parentNodesList[parent];
+                    resourceInstanceNode.resourceInstancesList = parentNodesList[parent][RESOURCE_INSTANCE_LIST];
+                    resourceInstanceNode.isAlreadyInTree = true;
+                    scope.structureTree.serviceRoot.resourceInstancesList.push(resourceInstanceNode);
+                }
+
+                // Add all node that have no connection to the rootNode
+                resourceInstanceMap.forEach((key:string, value:ResourceInstanceNode) => {
+                    if (!value.isAlreadyInTree) {
+                        scope.structureTree.serviceRoot.resourceInstancesList.push(value);
+                    }
+                });
+            }
+        };
+
+        //this recursion is merging all the subtrees
+        let mergeAllSubtrees = (connectionData:any, parentNodesList:any):ResourceInstanceNode => {
+            let resourceInstanceNode:ResourceInstanceNode = resourceInstanceMap.getValue(connectionData.toNode);
+            resourceInstanceNode.isAlreadyInTree = true;
+            if (parentNodesList[resourceInstanceNode.id]) {
+                if (parentNodesList[resourceInstanceNode.id][RESOURCE_INSTANCE_LIST]) {
+                    resourceInstanceNode.resourceInstancesList = parentNodesList[resourceInstanceNode.id][RESOURCE_INSTANCE_LIST];
+                }
+                else {
+                    _.forEach(parentNodesList[resourceInstanceNode.id], (children)=> {
+                        resourceInstanceNode.resourceInstancesList.push(mergeAllSubtrees(children, parentNodesList));
+                    });
+                }
+                delete parentNodesList[resourceInstanceNode.id];
+            }
+            return resourceInstanceNode;
+        };
+        //************* End Building Tree Functions *******************//
+
+        //************* Start Watchers *******************//
+        scope.$watch('component.name', ():void => {
+            if (scope.structureTree)
+                scope.structureTree.serviceRoot.name = scope.component.name;
+        });
+
+        scope.$watch('component.icon', ():void => {
+            if (scope.structureTree)
+                scope.structureTree.serviceRoot.icon = scope.component.icon;
+        });
+
+        scope.$watchCollection('component.componentInstancesRelations', ():void => {
+            buildTree();
+        });
+
+        scope.$watchCollection('component.componentInstances', ():void => {
+            buildTree();
+        });
+
+        //************* End  Watchers *******************//
+
+        buildTree();
+
+    };
+
+
+    public static factory = () => {
+        return new StructureTreeDirective();
+    };
+}
+
+StructureTreeDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/tag/tag-directive.html b/catalog-ui/src/app/directives/tag/tag-directive.html
new file mode 100644
index 0000000000..28c22a7978
--- /dev/null
+++ b/catalog-ui/src/app/directives/tag/tag-directive.html
@@ -0,0 +1,10 @@
+<div class="sdc-tag">
+    <div class="tag" data-tests-id="i-sdc-tag-text" sdc-smart-tooltip data-ng-bind="tagData.tag"></div>
+    <div class="category" data-ng-hide="hideTooltip===true">
+        <span class="relation-categoty-icon" data-tooltips data-tooltip-side="bottom" data-tooltip="'<span class='tag-tooltip-wrap'>{{tagData.tooltip}}</span>'" data-tooltip-enable="false"></span>
+    </div>
+
+    <div class="delete" data-ng-if="!hideDelete && !sdcDisable" data-ng-click="delete()" data-tests-id="i-sdc-tag-delete">
+        <span class="delete-icon"></span>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/tag/tag-directive.less b/catalog-ui/src/app/directives/tag/tag-directive.less
new file mode 100644
index 0000000000..f72e366ac6
--- /dev/null
+++ b/catalog-ui/src/app/directives/tag/tag-directive.less
@@ -0,0 +1,51 @@
+.sdc-tag{
+
+    background-color:#F2F2F2 ;
+    .border-radius(4px);
+    min-width:150px;
+    height:30px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    margin: 2px;
+
+    .tag{
+        display: inline-block;
+    }
+
+    .category{
+        margin-right: 4px;
+        margin-left: 25px;
+        width: 25px;
+
+    }
+    .relation-categoty-icon{
+        .sprite;
+        .sprite.relation-icon;
+        .hand;
+        vertical-align: middle;
+
+    }
+
+    .relation-categoty-icon:hover{
+        .sprite;
+        .sprite.relation-icon-hover;
+    }
+
+    .delete{
+
+    }
+    .delete-icon{
+        .sprite;
+        .sprite.x-btn-black;
+        .hand;
+        vertical-align: middle;
+    }
+}
+
+.tag-tooltip-wrap {
+    background-color: rgba(80, 99, 113, 0.9);
+    position: relative;
+    display: inline-block;
+    margin: -5px -14px 0px -14px;
+}
diff --git a/catalog-ui/src/app/directives/tag/tag-directive.ts b/catalog-ui/src/app/directives/tag/tag-directive.ts
new file mode 100644
index 0000000000..77a26fc6f7
--- /dev/null
+++ b/catalog-ui/src/app/directives/tag/tag-directive.ts
@@ -0,0 +1,49 @@
+'use strict';
+
+export class TagData {
+    tag:string;
+    tooltip:string;
+    id:string;
+}
+
+export interface ITagScope extends ng.IScope {
+    tagData:TagData;
+    onDelete:Function;
+    delete:Function;
+    hideTooltip:boolean;
+    hideDelete:boolean;
+    sdcDisable:boolean;
+}
+
+export class TagDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        tagData: '=',
+        onDelete: '&',
+        hideTooltip: '=',
+        hideDelete: '=',
+        sdcDisable: '='
+    };
+
+    replace = true;
+    restrict = 'EA';
+    template = ():string => {
+        return require('./tag-directive.html');
+    };
+
+    link = (scope:ITagScope) => {
+        scope.delete = ()=> {
+            scope.onDelete({'uniqueId': scope.tagData.id});
+        }
+    };
+
+    public static factory = ()=> {
+        return new TagDirective();
+    };
+
+}
+
+TagDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.html b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.html
new file mode 100644
index 0000000000..1c99a18ab5
--- /dev/null
+++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.html
@@ -0,0 +1,9 @@
+<div class="w-sdc-header-user-container" data-tests-id="ffff">
+    <div class="w-sdc-header-user-icon"></div>
+    <div class="w-sdc-header-user-details">
+        <div sdc-smart-tooltip class="w-sdc-header-user-name" data-ng-bind="user.getName()"></div>
+        <div class="w-sdc-header-user-role" data-ng-bind="user.getRoleToView()"></div>
+        <div class="w-sdc-header-user-last-login" data-ng-show="user.getLastLogin()!==''">Last Login: {{user.getLastLogin() | date: 'MMM dd &nbsp; hh:mm a' : 'UTC'}}&nbsp;UTC</div>
+    </div>
+    <!--<div class="w-sdc-header-logout-icon"></div>-->
+</div>
diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.less b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.less
new file mode 100644
index 0000000000..e432581f3b
--- /dev/null
+++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.less
@@ -0,0 +1,62 @@
+.w-sdc-header-user-container {
+    .b_7;
+    width: 400px;
+    .flex-fixed(400px);
+    padding: 0 23px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.w-sdc-header-user-icon {
+    background: no-repeat url('/assets/styles/images/anonymous.jpg');
+    border-radius: 50%;
+    height: 47px;
+    width: 47px;
+    background-size: cover;
+    border: solid 2px @color_m;
+    .flex-fixed(47px);
+}
+
+.w-sdc-header-user-details {
+    padding: 4px 4px 4px 14px;
+    .vcenter;
+}
+
+.w-sdc-header-user-name {
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+
+    .bold;
+    display: inline-block;
+}
+
+.w-sdc-header-user-role {
+    .bold;
+    display: inline-block;
+    margin-left: 6px;
+
+    &:before {
+        content: '';
+        margin-right: 8px;
+        border-left: 1px solid @color_m;
+    }
+}
+
+.w-sdc-header-user-last-login {
+    .font-type._3;
+    display: block;
+}
+
+.w-sdc-header-logout-icon {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE5RjgxM0QxMDgzQTExRTVBQzA2OTg5ODlFNDVBNTZDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE5RjgxM0QyMDgzQTExRTVBQzA2OTg5ODlFNDVBNTZDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTlGODEzQ0YwODNBMTFFNUFDMDY5ODk4OUU0NUE1NkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTlGODEzRDAwODNBMTFFNUFDMDY5ODk4OUU0NUE1NkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Riq1bAAAA20lEQVR42mJ0CUv+z0Aa+AvEertXzrmGLMgCpZcD8S4iDfoDxHfQBWEGnQLasICBAsDEQCUwcAa5hqeEAHEKNVykB8SzgYZVUGpQPRDPAOJ2oGHNZBsEjF1QussC4mlAXAM0rAM5+tHDwQJIVRBh7m0gLgeql6ZarLHgcP4JIBWAJ+YYgdQUIPYH4k6g+gpyop8RGj6gcGoGGYLTRQRAIxBnAHEl0JAOvF4jAC4BcSrQkDkEw4hA9K8ZGpkW5jUzYGwkkFCwrQJ68Rc2gyKhmNii9hwQoxS1AAEGAO5PP/+ClIDAAAAAAElFTkSuQmCC');
+    height: 20px;
+    width: 18px;
+    position: absolute;
+    right: 20px;
+    top: 29px;
+}
+
+
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
new file mode 100644
index 0000000000..a1a54b0517
--- /dev/null
+++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
@@ -0,0 +1,52 @@
+'use strict';
+import {User, IUser, IAppConfigurtaion} from "app/models";
+import {IUserResourceClass, IUserResource} from "app/services";
+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) {
+    }
+
+    scope = {
+        iconUrl: '=?'
+    };
+
+    replace = true;
+    restrict = 'E';
+    template = ():string => {
+        return require('./user-header-details-directive.html');
+    };
+
+    link = (scope:IUserHeaderDetailsScope) => {
+
+        scope.initUser = ():void => {
+            let defaultUserId:string;
+            let user:IUserResource = this.UserResourceClass.getLoggedinUser();
+            if (!user) {
+                defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix];
+                user = this.UserResourceClass.get({id: defaultUserId}, ():void => {
+                    scope.user = new User(user);
+                });
+            } else {
+                scope.user = new User(user);
+            }
+        };
+        scope.initUser();
+    };
+
+    public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, UserResourceClass:IUserResourceClass)=> {
+        return new UserHeaderDetailsDirective($http, sdcConfig, UserResourceClass);
+    };
+
+}
+
+UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService'];
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html
new file mode 100644
index 0000000000..b351273c08
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html
@@ -0,0 +1,19 @@
+<div class="main-wrap" data-tests-id="list-of-{{title}}">
+    <div class="header">
+        <div class="title">{{title}}</div>
+        <div class="buttons">
+            <span class="order-by hand sprite-new"
+                  data-ng-show="expandCollapseListData.expandCollapse"
+                  data-ng-class="{'asc':!desc, 'desc':desc }"
+                  data-ng-click="swapOrderBy()"></span>
+            <span class="search hand sprite-new search-icon"
+                  data-ng-class="{'selected':showSearchBox}"
+                  data-ng-show="expandCollapseListData.expandCollapse"
+                  data-ng-click="showHideSearchBox()"></span>
+            <span class="hand sprite-new expand-list"
+                  data-ng-class="{'open':expandCollapseListData.expandCollapse}"
+                  data-ng-click="expandCollapseListData.expandCollapse=!expandCollapseListData.expandCollapse"></span>
+        </div>
+    </div>
+    <input type="text" id="list-search-box" class="search-box" data-ng-if="expandCollapseListData.expandCollapse && showSearchBox" data-ng-model="expandCollapseListData.filter" autofocus/>
+</div>
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less
new file mode 100644
index 0000000000..2a80f28007
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less
@@ -0,0 +1,43 @@
+.main-wrap{
+    text-align: center;
+    .header{
+        background-color: @tlv_color_w;
+        height: 42px;
+        border-bottom: 1px solid rgba(0, 159, 219, 0.6);
+        border-top: 1px solid rgba(0, 159, 219, 0.6);
+        .title{
+            .f-type._14_m;
+            color: @main_color_l;
+            font-weight: 400;
+            line-height: 42px;
+            padding-left: 18px;
+            float: left;
+        }
+        .buttons{
+            float: right;
+            padding-right: 11px;
+            line-height: 42px;
+            span{
+                vertical-align: middle;
+            }
+            .search,.order-by{
+                margin-right: 5px;
+            }
+            //temporary///
+            .search{
+                display: none;
+            }
+            //////////////
+        }
+    }
+
+    .search-box{
+        border-radius: 2px;
+        height: 30px;
+        width:275px;
+        border: 1px @tlv_color_x solid;
+        margin: 8px 0;
+        padding: 0 5px;
+    }
+}
+
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts
new file mode 100644
index 0000000000..73cb2def0b
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts
@@ -0,0 +1,66 @@
+/**
+ * Created by rcohen on 12/5/2016.
+ */
+'use strict';
+
+export class ExpandCollapseListData {
+    filter:string;//variable for filter text
+    orderByField:string;//order by field name
+    expandCollapse:boolean;//boolean param for expand collapse the list
+}
+
+export interface IExpandCollapseListHeaderScope extends ng.IScope {
+    title:string;//the title on the header
+    expandCollapseListData:ExpandCollapseListData;
+    showSearchBox:boolean;
+    desc:boolean;//order by desc or asc
+
+    swapOrderBy():void;
+    showHideSearchBox():void;
+}
+
+export class ExpandCollapseListHeaderDirective implements ng.IDirective {
+
+    constructor(private $timeout:ng.ITimeoutService) {
+    }
+
+    scope = {
+        title: '@',
+        expandCollapseListData: '='
+    };
+
+    public replace = false;
+    public restrict = 'AE';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./expand-collapse-list-header.html');
+    };
+
+    link = (scope:IExpandCollapseListHeaderScope, $elem:any) => {
+        scope.swapOrderBy = ():void => {
+            if (scope.expandCollapseListData.orderByField.charAt(0) === '-') {
+                scope.expandCollapseListData.orderByField = scope.expandCollapseListData.orderByField.substr(1);
+            } else {
+                scope.expandCollapseListData.orderByField = '-' + scope.expandCollapseListData.orderByField;
+            }
+            scope.desc = !scope.desc;
+        };
+
+        scope.showHideSearchBox = ():void => {
+            scope.showSearchBox = !scope.showSearchBox;
+            if (scope.showSearchBox) {
+                this.$timeout(function () {
+                    angular.element("#list-search-box").focus();
+                }, 0);
+            }
+        };
+    };
+
+    public static factory = ($timeout:ng.ITimeoutService)=> {
+        return new ExpandCollapseListHeaderDirective($timeout);
+    };
+
+}
+
+ExpandCollapseListHeaderDirective.factory.$inject = ['$timeout'];
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
new file mode 100644
index 0000000000..2a2432fcea
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
@@ -0,0 +1,47 @@
+'use strict';
+import {MenuItem, MenuItemGroup} from "app/utils";
+
+export interface IExpandCollapseMenuBoxDirectiveScope extends ng.IScope {
+    menuItemsGroup:MenuItemGroup;
+    menuTitle:string;
+    parentScope:ng.IScope;
+    onMenuItemClick(menuItem:MenuItem):void;
+}
+
+export class ExpandCollapseMenuBoxDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        menuTitle: '@',
+        menuItemsGroup: '=',
+        parentScope: '='
+    };
+
+    public replace = false;
+    public restrict = 'AE';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./expand-collapse-menu-box.html');
+    };
+
+    link = (scope:IExpandCollapseMenuBoxDirectiveScope) => {
+        scope.onMenuItemClick = (menuItem:MenuItem):void => {
+            let onSuccess = ():void => {
+                scope.menuItemsGroup.selectedIndex = scope.menuItemsGroup.menuItems.indexOf(menuItem);
+            };
+            let onFailed = ():void => {
+            };
+            scope.parentScope[menuItem.action](menuItem.state).then(onSuccess, onFailed);
+        }
+    };
+
+    public static factory = ()=> {
+        return new ExpandCollapseMenuBoxDirective();
+    };
+
+}
+
+ExpandCollapseMenuBoxDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
new file mode 100644
index 0000000000..f90f00f230
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
@@ -0,0 +1,17 @@
+<div class="expand-collapse-menu-box">
+    <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" class="expand-collapse-menu-box-title">
+        <div class="expand-collapse-header">
+            <div class="expand-collapse-menu-box-title-icon"></div>
+            <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="menuTitle" tooltips tooltip-content="{{menuTitle}}"></span>
+        </div>
+    </expand-collapse>
+
+    <div class="w-sdc-designer-sidebar-section-content" >
+        <div class="i-sdc-designer-sidebar-section-content-item expand-collapse-menu-box-item second-level"
+             ng-class="{'selected': $index == menuItemsGroup.selectedIndex}" ng-repeat="(key, menuItem) in menuItemsGroup.menuItems track by $index">
+            <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemClick(menuItem)"  ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}step" >{{menuItem.text}}</div>
+        </div>
+    </div>
+
+</div>
+
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
new file mode 100644
index 0000000000..13ec1c99be
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
@@ -0,0 +1,67 @@
+.expand-collapse-menu-box {
+    line-height: 20px;
+    //padding: 13px 0px 5px 10px;
+    background-color: @tlv_color_t;
+    //margin: 3px 3px 5px 0px;
+
+    .expand-collapse-header{
+        border-bottom: 1px solid @main_color_o;
+        height: @action_nav_height;
+        background-color:@main_color_p;
+        display:flex;
+        align-items:center;
+    }
+
+    .expand-collapse-menu-box-title {
+        .f-type._18_m;
+        color: @main_color_a;
+        //font-weight: bold;
+        .hand;
+        .w-sdc-designer-sidebar-section-title-text{
+            max-width: 185px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            white-space: nowrap;
+            padding: 8px 0;
+        }
+
+        &.expanded {
+            .expand-collapse-menu-box-title-icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    .expand-collapse-menu-box-title-icon {
+        .hand;
+        .sprite-new;
+        .arrow-up;
+        margin-right: 6px;
+        transition: .3s all;
+        position: relative;
+        vertical-align: text-top;
+        margin-left: 14px;
+        vertical-align: 14px;
+    }
+    .w-sdc-designer-sidebar-section-content {
+        overflow: hidden;
+        //padding-top: 13px;
+        .expand-collapse-menu-box-item {
+            .hand;
+            padding-left: 14px;
+            //margin: 0px 0px 10px 10px;
+            font-family: @font-omnes-medium;
+            color: @main_color_m;
+
+            line-height: 18px;
+            &.selected {
+                //padding-left: 10px;
+                //font-weight: bold;
+                //border-left: 4px solid @main_color_a;
+                background-color: #009fdb;
+                color: #ffffff;
+            }
+
+        }
+    }
+}
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html
new file mode 100644
index 0000000000..a2358ea2b7
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html
@@ -0,0 +1 @@
+<ng-transclude></ng-transclude>
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less
new file mode 100644
index 0000000000..e6b7b7d516
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less
@@ -0,0 +1,11 @@
+.ellipsis-directive-more-less {
+    .a_9;
+    .bold;
+    .hand;
+    float: right;
+    margin-right: 10px;
+    line-height: 23px;
+    text-decoration: underline;
+    text-align: left;
+}
+
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
new file mode 100644
index 0000000000..3993f06036
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
@@ -0,0 +1,115 @@
+'use strict';
+export interface IExpandCollapseScope extends ng.IScope {
+    toggle():void;
+    collapsed:boolean;
+    expandedSelector:string;
+    content:string;
+    isCloseOnInit:boolean;
+    loadDataFunction:Function;
+    isLoadingData:boolean;
+}
+
+export class ExpandCollapseDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        expandedSelector: '@',
+        loadDataFunction: '&?',
+        isCloseOnInit: '=?'
+    };
+
+    public replace = false;
+    public restrict = 'AE';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./expand-collapse.html');
+    };
+
+    link = (scope:IExpandCollapseScope, $elem:any) => {
+        scope.collapsed = false;
+        scope.isLoadingData = false;
+        $elem.addClass('expanded');
+
+
+        if (scope.isCloseOnInit) {
+            window.setTimeout(function () {
+                toggle();
+            }, 0);
+        }
+        //
+        // $elem.click(function () {
+        //     toggle();
+        // });
+        $elem.bind('click', function() {
+            toggle();
+        })
+        let expand = ():void => {
+            $elem.addClass('expanded');
+            scope.collapsed = false;
+
+            let element = $(scope.expandedSelector)[0];
+            let prevWidth = element.style.height;
+            element.style.height = 'auto';
+            let endWidth = getComputedStyle(element).height;
+            element.style.height = prevWidth;
+            element.offsetHeight; // force repaint
+            element.style.transition = 'height .3s ease-in-out';
+            element.style.height = endWidth;
+            element.hidden = false;
+            element.addEventListener('transitionend', function transitionEnd(event) {
+                if (event['propertyName'] == 'height') {
+                    element.style.transition = '';
+                    element.style.height = 'auto';
+                    element.removeEventListener('transitionend', transitionEnd, false);
+                }
+            }, false)
+        };
+
+        let collapse = ():void => {
+            $elem.removeClass('expanded');
+            scope.collapsed = true;
+
+            let element = $(scope.expandedSelector)[0];
+            element.style.height = getComputedStyle(element).height;
+            element.style.transition = 'height .5s ease-in-out';
+            element.offsetHeight; // force repaint
+            element.style.height = '0px';
+            element.hidden = true;
+        };
+
+        let toggle = ():void => {
+            if (scope.collapsed === true) {
+                if (scope.loadDataFunction) {
+                    scope.isLoadingData = true;
+                    let onSuccess = () => {
+                        window.setTimeout(function () {
+                            expand();
+                            scope.isLoadingData = false;
+                        }, 0);
+                    };
+                    scope.loadDataFunction().then(onSuccess);
+                }
+                else {
+                    if (scope.isLoadingData === false) {
+                        expand();
+                    }
+                }
+
+            } else {
+                if (scope.isLoadingData === false) {
+                    collapse();
+                }
+            }
+        }
+
+    };
+
+    public static factory = ()=> {
+        return new ExpandCollapseDirective();
+    };
+}
+
+ExpandCollapseDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts b/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts
new file mode 100644
index 0000000000..71a963a492
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts
@@ -0,0 +1,84 @@
+'use strict';
+
+export interface ISdcKeyboardEventsScope extends ng.IScope {
+    keyEnter:Function;
+    keyShift:Function;
+    keyCtrl:Function;
+    keyEscape:Function;
+    keySpace:Function;
+}
+
+export class SdcKeyboardEventsDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        keyEnter: '=',
+        keyShift: '=',
+        keyCtrl: '=',
+        keyEscape: '=',
+        keySpace: '='
+    };
+
+    public replace = false;
+    public restrict = 'A';
+    public transclude = false;
+
+    link = (scope:ISdcKeyboardEventsScope, element:ng.IAugmentedJQuery, attrs:angular.IAttributes) => {
+
+        element.bind("keydown keypress", function (event) {
+            //console.log(event.which);
+            switch (event.which) {
+                case 13: // enter key
+                    scope.$apply(function () {
+                        if (scope.keyEnter) {
+                            scope.keyEnter();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+                case 16: // shift key
+                    scope.$apply(function () {
+                        if (scope.keyShift) {
+                            scope.keyShift();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+                case 17: // ctrl key
+                    scope.$apply(function () {
+                        if (scope.keyCtrl) {
+                            scope.keyCtrl();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+                case 27: // escape key
+                    scope.$apply(function () {
+                        if (scope.keyEscape) {
+                            scope.keyEscape();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+                case 32: // space key
+                    scope.$apply(function () {
+                        if (scope.keySpace) {
+                            scope.keySpace();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+            }
+        });
+
+    };
+
+    public static factory = ()=> {
+        return new SdcKeyboardEventsDirective();
+    };
+
+}
+
+SdcKeyboardEventsDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html
new file mode 100644
index 0000000000..fb1ada69c3
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html
@@ -0,0 +1,27 @@
+<div class="tags-box" >
+    <input type="text"
+           name="{{elementName}}"
+           class="new-tag-input"
+           data-ng-class="{'view-mode':sdcDisabled}"
+           data-ng-change="validateName()"
+           data-ng-model="newTag"
+           data-ng-maxlength="50"
+           data-ng-pattern="pattern"
+           data-tests-id="i-sdc-tag-input"
+           maxlength="50"
+           sdc-keyboard-events
+           key-enter="addTag"
+
+        />
+    <perfect-scrollbar class="perfect-scrollbar tags-wrapper"  data-ng-class="{'view-mode':sdcDisabled}" include-padding="true">
+        <div data-tests-id="i-sdc-tags-wrapper" >
+            <div class="group-tag" data-ng-show="specialTag">
+                <sdc-tag data-hide-tooltip="true" data-hide-delete="true"
+                         data-tag-data="{tag: specialTag, id: specialTag }"></sdc-tag>
+            </div>
+            <div class="group-tag" ng-repeat="tag in tags track by $index">
+                <sdc-tag ng-if="tag != specialTag" data-on-delete="deleteTag(tag)" sdc-disable="sdcDisabled" data-hide-delete="sdcDisabled" data-hide-tooltip="true" data-tag-data="{tag: tag, id: tag }"></sdc-tag>
+            </div>
+        </div>
+    </perfect-scrollbar>
+</div>
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
new file mode 100644
index 0000000000..942196e663
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
@@ -0,0 +1,61 @@
+.tags-box {
+
+    height: 297px;
+    .bg_c;
+
+    .perfect-scrollbar {
+        height: 265px;
+    }
+
+    .new-tag-input {
+        display: block;
+
+        -webkit-border-bottom-left-radius: 0 !important;
+        -moz-border-radius-bottomleft: 0 !important;
+        -khtml-border-bottom-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+
+        -webkit-border-bottom-right-radius: 0 !important;
+        -moz-border-radius-bottomright: 0 !important;
+        -khtml-border-bottom-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+
+        border: solid 1px #d8d8d8;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        padding: 2px 10px;
+        outline: none;
+    }
+
+    .tags-wrapper {
+        padding: 10px;
+        .border-radius-bottom-left(2px);
+        .border-radius-bottom-right(2px);
+        border: solid 1px #d8d8d8;
+        border-top: none;
+
+        .group-tag {
+            display: inline-block;
+
+            .sdc-tag {
+                border: solid 1px @main_color_n;
+                background-color: @main_color_p;
+                min-width: auto;
+                .tag {
+                    margin-right: 10px;
+                }
+            }
+        }
+        &.view-mode .group-tag {
+            opacity: 1;
+            background-color: #f8f8f8 !important;
+            .sdc-tag {
+                background: none;
+                border-color: @main_color_o;
+            }
+        }
+    }
+
+}
+
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts
new file mode 100644
index 0000000000..082a77dd9f
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts
@@ -0,0 +1,75 @@
+'use strict';
+
+export interface ISdcTagsScope extends ng.IScope {
+    tags:Array<string>;
+    specialTag:string;
+    newTag:string;
+    formElement:ng.IFormController;
+    elementName:string;
+    pattern:any;
+    sdcDisabled:boolean;
+    maxTags:number;
+    deleteTag(tag:string):void;
+    addTag(tag:string):void;
+    validateName():void;
+}
+
+export class SdcTagsDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        tags: '=',
+        specialTag: '=',
+        pattern: '=',
+        sdcDisabled: '=',
+        formElement: '=',
+        elementName: '@',
+        maxTags: '@'
+    };
+
+    public replace = false;
+    public restrict = 'E';
+    public transclude = false;
+
+    template = ():string => {
+        return require('./sdc-tags.html');
+    };
+
+    link = (scope:ISdcTagsScope, element:ng.INgModelController) => {
+
+        scope.deleteTag = (tag:string):void => {
+            scope.tags.splice(scope.tags.indexOf(tag), 1);
+        };
+
+        scope.addTag = ():void => {
+            let valid = scope.formElement[scope.elementName].$valid;
+            if (valid &&
+                scope.tags.length < scope.maxTags &&
+                scope.newTag &&
+                scope.newTag !== '' &&
+                scope.tags.indexOf(scope.newTag) === -1 &&
+                scope.newTag !== scope.specialTag) {
+                scope.tags.push(scope.newTag);
+                scope.newTag = '';
+            }
+        };
+
+        scope.validateName = ():void => {
+            if (scope.tags.indexOf(scope.newTag) > -1) {
+                scope.formElement[scope.elementName].$setValidity('nameExist', false);
+            } else {
+                scope.formElement[scope.elementName].$setValidity('nameExist', true);
+            }
+        }
+
+    };
+
+    public static factory = ()=> {
+        return new SdcTagsDirective();
+    };
+
+}
+
+SdcTagsDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
new file mode 100644
index 0000000000..d0177b4094
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
@@ -0,0 +1,61 @@
+'use strict';
+
+export interface ISmartTooltipScope extends ng.IScope {
+    sdcSmartToolip;
+}
+
+export class SmartTooltipDirective implements ng.IDirective {
+
+    constructor(private $compile:ng.ICompileService) {
+    }
+
+    public replace = false;
+    public restrict = 'A';
+    public transclude = false;
+
+    public link = (scope:ISmartTooltipScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+
+        if ($elem[0].hasAttribute('style') === false) {
+            $elem[0].setAttribute("style", "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;");
+        } else {
+            let styles = $elem.attr('style');
+            $elem[0].setAttribute("style", styles + ";overflow: hidden; white-space: nowrap; text-overflow: ellipsis;");
+        }
+
+        $elem.bind('mouseenter', () => {
+            if ($elem[0].offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) {
+                $attrs.$set('tooltips', 'tooltips');
+                if ($attrs['sdcSmartTooltip'] && $attrs['sdcSmartTooltip'].length > 0) {
+                    $elem.attr('tooltip-content', $attrs['sdcSmartTooltip']);
+                } else {
+                    $attrs.$set('tooltip-content', $elem.text());
+                }
+
+                //One possible problem arises when the ngIf is placed on the root element of the template.
+                //ngIf removes the node and places a comment in it's place. Then it watches over the expression and adds/removes the actual HTML element as necessary.
+                //The problem seems to be that if it is placed on the root element of the template, then a single comment is what is left from the
+                //whole template (even if only temporarily), which gets ignored (I am not sure if this is browser-specific behaviour), resulting in an empty template.
+
+                // Remove ng-if attribute and its value (if we reach here, we pass ng-if (ng-if===true), so we can remove it).
+                $elem.removeAttr('ng-if');
+                $elem.removeAttr('data-ng-if');
+
+                // Remove me (the directive from the element)
+                let template = $elem[0].outerHTML;
+                template = template.replace('sdc-smart-tooltip=""', '');
+                template = template.replace('sdc-smart-tooltip="' + $elem.text() + '"', '');
+                //console.log(template);
+
+                let el = this.$compile(template)(scope);
+                console.log(el);
+                $elem.replaceWith(el);
+            }
+        });
+    };
+
+    public static factory = ($compile:ng.ICompileService)=> {
+        return new SmartTooltipDirective($compile);
+    };
+}
+
+SmartTooltipDirective.factory.$inject = ['$compile'];
diff --git a/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts b/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts
new file mode 100644
index 0000000000..d489efa928
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts
@@ -0,0 +1,48 @@
+'use strict';
+
+export interface IValidationOnLoadScope extends ng.IScope {
+    formToValidate:ng.IFormController;
+}
+
+export class ValidationOnLoadDirective implements ng.IDirective {
+
+    constructor(private $timeout:ng.ITimeoutService) {
+    }
+
+    scope = {
+        formToValidate: '='
+    };
+
+    public replace = false;
+    public restrict = 'A';
+
+
+    public link = (scope:IValidationOnLoadScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+
+        let init = ()=> {
+            //validate errors
+            if (scope.formToValidate.$error) {
+                angular.forEach(scope.formToValidate.$error, (value, key)=> {
+                    //skip on the required error if its a new form
+                    if (key != 'required') {
+                        angular.forEach(value, function (field) {
+                            field.$setDirty();//trigger to show the error label
+                        });
+                    }
+                })
+            }
+        };
+
+        this.$timeout(()=> {
+            init();
+        }, 0);
+
+    };
+
+    public static factory = ($timeout:ng.ITimeoutService)=> {
+        return new ValidationOnLoadDirective($timeout);
+    };
+
+}
+
+ValidationOnLoadDirective.factory.$inject = ['$timeout'];