Catalog alignment

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

726 files changed, 28026 insertions, 25724 deletions

diff --git a/catalog-ui/src/app/_favicon.png b/catalog-ui/src/app/_favicon.png
deleted file mode 100644
index 6e9f04df69..0000000000
--- a/catalog-ui/src/app/_favicon.png
+++ /dev/null
diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts
index a147f8cab4..f2ad73893e 100644
--- a/catalog-ui/src/app/app.ts
+++ b/catalog-ui/src/app/app.ts
@@ -20,8 +20,6 @@
 
 'use strict';
 
-//import 'restangular';
-//import 'angular-ui-router';
 import * as _ from "lodash";
 import "reflect-metadata";
 import 'ng-infinite-scroll';
@@ -30,34 +28,22 @@ import './modules/utils.ts';
 import './modules/directive-module.ts';
 import './modules/service-module';
 import './modules/view-model-module.ts';
-import {SdcUiComponentsNg1Module} from 'sdc-ui/lib/angular';
-
+import {SdcUiCommon, SdcUiComponents, SdcUiServices} from 'onap-ui-angular';
 import {
+    AngularJSBridge,
+    CookieService,
     DataTypesService,
-    LeftPaletteLoaderService,
     EcompHeaderService,
-    CookieService,
-    ConfigurationUiService,
-    CacheService,
-    SdcVersionService,
-    ICategoryResourceClass,
-    EntityService
+    LeftPaletteLoaderService
 } from "./services";
-import { UserService } from "./ng2/services/user.service";
-import {forwardRef} from '@angular/core';
-import {UpgradeAdapter} from '@angular/upgrade';
-import {CHANGE_COMPONENT_CSAR_VERSION_FLAG, States, PREVIOUS_CSAR_COMPONENT} from "./utils";
-import {IAppConfigurtaion, IAppMenu, IMainCategory, Resource, IHostedApplication} from "./models";
+import {CacheService, CatalogService, HomeService} from "./services-ng2";
+import {AuthenticationService} from "app/ng2/services/authentication.service";
+import {CHANGE_COMPONENT_CSAR_VERSION_FLAG, PREVIOUS_CSAR_COMPONENT, States} from "./utils";
+import {IAppConfigurtaion, IAppMenu, IHostedApplication, Resource} from "./models";
 import {ComponentFactory} from "./utils/component-factory";
-import {ModalsHandler} from "./utils/modals-handler";
-import {downgradeComponent} from "@angular/upgrade/static";
-
-import {AppModule} from './ng2/app.module';
 import {Component} from "./models/components/component";
-import {ComponentServiceNg2} from "./ng2/services/component-services/component.service";
-import {ComponentMetadata} from "./models/component-metadata";
-import {Categories} from "./models/categories";
 import {IUserProperties} from "./models/user";
+import {WorkspaceService} from "./ng2/pages/workspace/workspace.service";
 
 let moduleName:string = 'sdcApp';
 let viewModelsModuleName:string = 'Sdc.ViewModels';
@@ -100,7 +86,6 @@ let dependentModules:Array<string> = [
     'angular-clipboard',
     'angularResizable',
     'infinite-scroll',
-    SdcUiComponentsNg1Module.name,
     viewModelsModuleName,
     directivesModuleName,
     servicesModuleName,
@@ -181,47 +166,40 @@ ng1appModule.config([
         $translateProvider.preferredLanguage('en_US');
 
         $httpProvider.interceptors.push('Sdc.Services.HeaderInterceptor');
-        $httpProvider.interceptors.push('Sdc.Services.HttpErrorInterceptor');
-        $urlRouterProvider.otherwise('welcome');
+        $urlRouterProvider.otherwise('dashboard');
 
         $stateProvider.state(
             'dashboard', {
                 url: '/dashboard?show&folder&filter.term&filter.status&filter.distributed',
-                templateUrl: "./view-models/dashboard/dashboard-view.html",
-                controller: viewModelsModuleName + '.DashboardViewModel',
-            }
-        );
+                template: '<home-page></home-page>',
+                permissions: ['DESIGNER']
+            },
 
-        $stateProvider.state(
-            'welcome', {
-                url: '/welcome',
-                templateUrl: "./view-models/welcome/welcome-view.html",
-                controller: viewModelsModuleName + '.WelcomeViewModel'
-            }
         );
 
-        let componentsParam:Array<any> = ['$stateParams', 'Sdc.Services.EntityService', 'Sdc.Services.CacheService', ($stateParams:any, EntityService:EntityService, cacheService:CacheService) => {
+
+        let componentsParam:Array<any> = ['$stateParams', 'HomeService', 'CatalogService', 'Sdc.Services.CacheService', ($stateParams:any, HomeService:HomeService, CatalogService:CatalogService, cacheService:CacheService) => {
             if (cacheService.get('breadcrumbsComponentsState') === $stateParams.previousState) {
                 const breadcrumbsComponents = cacheService.get('breadcrumbsComponents');
                 if (breadcrumbsComponents) {
                     return breadcrumbsComponents;
                 }
             } else {
-                let breadcrumbsComponentsPromise;
+                let breadcrumbsComponentsObservable;
                 if ($stateParams.previousState === 'dashboard') {
-                    breadcrumbsComponentsPromise = EntityService.getAllComponents(true);
+                    breadcrumbsComponentsObservable = HomeService.getAllComponents(true);
                 } else if ($stateParams.previousState === 'catalog') {
-                    breadcrumbsComponentsPromise = EntityService.getCatalog();
+                    breadcrumbsComponentsObservable = CatalogService.getCatalog();
                 } else {
                     cacheService.remove('breadcrumbsComponentsState');
                     cacheService.remove('breadcrumbsComponents');
                     return [];
                 }
-                breadcrumbsComponentsPromise.then((components) => {
+                breadcrumbsComponentsObservable.subscribe((components) => {
                     cacheService.set('breadcrumbsComponentsState', $stateParams.previousState);
                     cacheService.set('breadcrumbsComponents', components);
                 });
-                return breadcrumbsComponentsPromise;
+                return breadcrumbsComponentsObservable;
             }
         }];
 
@@ -246,19 +224,20 @@ ng1appModule.config([
                 templateUrl: './view-models/workspace/workspace-view.html',
                 controller: viewModelsModuleName + '.WorkspaceViewModel',
                 resolve: {
-                    injectComponent: ['$stateParams', 'ComponentFactory', 'Sdc.Services.CacheService', 'ComponentServiceNg2', function ($stateParams, ComponentFactory:ComponentFactory, cacheService:CacheService, ComponentServiceNg2:ComponentServiceNg2) {
+                    injectComponent: ['$stateParams', 'ComponentFactory', 'workspaceService', 'Sdc.Services.CacheService', function ($stateParams, ComponentFactory:ComponentFactory, workspaceService:WorkspaceService, cacheService: CacheService) {
 
                         if ($stateParams.id && $stateParams.id.length) { //need to check length in case ID is an empty string
                             return ComponentFactory.getComponentWithMetadataFromServer($stateParams.type.toUpperCase(), $stateParams.id).then(
                                 (component:Component)=> {
-                                if ($stateParams.componentCsar && component.isResource()){
-                                    if((<Resource>component).csarVersion != $stateParams.componentCsar.csarVersion) {
-                                        cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component));
+                                    if ($stateParams.componentCsar && component.isResource()){
+                                        if((<Resource>component).csarVersion != $stateParams.componentCsar.csarVersion) {
+                                            cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component));
+                                        }
+                                        component = ComponentFactory.updateComponentFromCsar($stateParams.componentCsar, <Resource>component);
                                     }
-                                    component = ComponentFactory.updateComponentFromCsar($stateParams.componentCsar, <Resource>component);
-                                }
-                                return component;
-                            });
+                                    workspaceService.setComponentMetadata(component.componentMetadata);
+                                    return component;
+                                });
                         } else if ($stateParams.componentCsar && $stateParams.componentCsar.csarUUID) {
                             return $stateParams.componentCsar;
                         } else {
@@ -288,48 +267,29 @@ ng1appModule.config([
             }
         );
 
-        $stateProvider.state(
-            States.WORKSPACE_ACTIVITY_LOG, {
-                url: 'activity_log',
-                parent: 'workspace',
-                controller: viewModelsModuleName + '.ActivityLogViewModel',
-                templateUrl: './view-models/workspace/tabs/activity-log/activity-log.html',
-            }
-        );
 
         $stateProvider.state(
-            States.WORKSPACE_DEPLOYMENT_ARTIFACTS, {
-                url: 'deployment_artifacts',
+            States.WORKSPACE_INFORMATION_ARTIFACTS, {
+                url: 'information_artifacts',
                 parent: 'workspace',
-                controller: viewModelsModuleName + '.DeploymentArtifactsViewModel',
-                templateUrl: './view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html',
-                data: {
-                    bodyClass: 'deployment_artifacts'
-                }
+                template:'<information-artifact-page></information-artifact-page>'
             }
         );
 
         $stateProvider.state(
-            States.WORKSPACE_INFORMATION_ARTIFACTS, {
-                url: 'information_artifacts',
+            States.WORKSPACE_TOSCA_ARTIFACTS, {
+                url: 'tosca_artifacts',
                 parent: 'workspace',
-                controller: viewModelsModuleName + '.InformationArtifactsViewModel',
-                templateUrl: './view-models/workspace/tabs/information-artifacts/information-artifacts-view.html',
-                data: {
-                    bodyClass: 'information_artifacts'
-                }
+                template:'<tosca-artifact-page></tosca-artifact-page>'
             }
         );
 
+
         $stateProvider.state(
-            States.WORKSPACE_TOSCA_ARTIFACTS, {
-                url: 'tosca_artifacts',
+            States.WORKSPACE_DEPLOYMENT_ARTIFACTS, {
+                url: 'deployment_artifacts',
                 parent: 'workspace',
-                controller: viewModelsModuleName + '.ToscaArtifactsViewModel',
-                templateUrl: './view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html',
-                data: {
-                    bodyClass: 'tosca_artifacts'
-                }
+                template:'<deployment-artifact-page></deployment-artifact-page>'
             }
         );
 
@@ -368,11 +328,7 @@ ng1appModule.config([
             States.WORKSPACE_ATTRIBUTES, {
                 url: 'attributes',
                 parent: 'workspace',
-                controller: viewModelsModuleName + '.AttributesViewModel',
-                templateUrl: './view-models/workspace/tabs/attributes/attributes-view.html',
-                data: {
-                    bodyClass: 'attributes'
-                }
+                template: '<attributes></attributes>',
             }
         );
 
@@ -380,20 +336,17 @@ ng1appModule.config([
             States.WORKSPACE_REQUIREMENTS_AND_CAPABILITIES, {
                 url: 'req_and_capabilities',
                 parent: 'workspace',
-                controller: viewModelsModuleName + '.ReqAndCapabilitiesViewModel',
-                templateUrl: './view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html',
+                template: '<req-and-capabilities></req-and-capabilities>',
                 data: {
                     bodyClass: 'attributes'
                 }
             }
         );
-
         $stateProvider.state(
             States.WORKSPACE_REQUIREMENTS_AND_CAPABILITIES_EDITABLE, {
                 url: 'req_and_capabilities_editable',
                 parent: 'workspace',
-                controller: viewModelsModuleName + '.ReqAndCapabilitiesViewModel',
-                templateUrl: './view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html',
+                template: '<req-and-capabilities></req-and-capabilities>',
                 data: {
                     bodyClass: 'attributes'
                 }
@@ -419,44 +372,50 @@ ng1appModule.config([
             }
         );
 
-        $stateProvider.state(
-            States.WORKSPACE_DISTRIBUTION, {
-                parent: 'workspace',
-                url: 'distribution',
-                templateUrl: './view-models/workspace/tabs/distribution/distribution-view.html',
-                controller: viewModelsModuleName + '.DistributionViewModel'
-            }
-        );
 
         $stateProvider.state(
             States.WORKSPACE_COMPOSITION, {
                 url: 'composition/',
+                params: {'component': null},
                 parent: 'workspace',
-                controller: viewModelsModuleName + '.CompositionViewModel',
-                templateUrl: './view-models/workspace/tabs/composition/composition-view.html',
+                template: '<composition-page></composition-page>',
+                resolve: {
+                    componentData: ['injectComponent', '$stateParams', function (injectComponent:Component, $stateParams) {
+                        //injectComponent.componentService = null; // this is for not passing the service so no one will use old api and start using new api
+                        $stateParams.component = injectComponent;
+                        return injectComponent;
+                    }],
+                },
                 data: {
                     bodyClass: 'composition'
                 }
             }
         );
 
-        // $stateProvider.state(
-        //     States.WORKSPACE_NG2, {
-        //         url: 'ng2/',
-        //        component: downgradeComponent({component: NG2Example2Component}), //viewModelsModuleName + '.NG2Example',
-        //        templateUrl: './ng2/view-ng2/ng2.example2/ng2.example2.component.html'
-        //     }
-        // );
+        $stateProvider.state(
+            States.WORKSPACE_ACTIVITY_LOG, {
+                url: 'activity_log/',
+                parent: 'workspace',
+                template: '<activity-log></activity-log>',
+            }
+
+        );
+
+        $stateProvider.state(
+            States.WORKSPACE_DISTRIBUTION, {
+                url: 'distribution',
+                parent: 'workspace',
+                template: '<distribution></distribution>',
+            }
+
+        );
 
         $stateProvider.state(
             States.WORKSPACE_DEPLOYMENT, {
                 url: 'deployment/',
                 parent: 'workspace',
-                templateUrl: './view-models/workspace/tabs/deployment/deployment-view.html',
-                controller: viewModelsModuleName + '.DeploymentViewModel',
-                data: {
-                    bodyClass: 'composition'
-                }
+                template: '<deployment-page></deployment-page>',
+
             }
         );
 
@@ -464,85 +423,61 @@ ng1appModule.config([
             'workspace.composition.details', {
                 url: 'details',
                 parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/details/details-view.html',
-                controller: viewModelsModuleName + '.DetailsViewModel'
+                resolve: {
+                    componentData: ['injectComponent', '$stateParams', function (injectComponent:Component, $stateParams) {
+                        $stateParams.component = injectComponent;
+                        return injectComponent;
+                    }],
+                }
+
             }
         );
 
         $stateProvider.state(
             'workspace.composition.properties', {
                 url: 'properties',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html',
-                controller: viewModelsModuleName + '.ResourcePropertiesViewModel'
+                parent: 'workspace.composition'
             }
         );
 
         $stateProvider.state(
             'workspace.composition.artifacts', {
                 url: 'artifacts',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html',
-                controller: viewModelsModuleName + '.ResourceArtifactsViewModel'
+                parent: 'workspace.composition'
+
             }
         );
 
         $stateProvider.state(
             'workspace.composition.relations', {
                 url: 'relations',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/relations/relations-view.html',
-                controller: viewModelsModuleName + '.RelationsViewModel'
+                parent: 'workspace.composition'
             }
         );
 
         $stateProvider.state(
             'workspace.composition.structure', {
                 url: 'structure',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/structure/structure-view.html',
-                controller: viewModelsModuleName + '.StructureViewModel'
+                parent: 'workspace.composition'
             }
         );
         $stateProvider.state(
             'workspace.composition.lifecycle', {
                 url: 'lifecycle',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html',
-                controller: viewModelsModuleName + '.ResourceArtifactsViewModel'
+                parent: 'workspace.composition'
             }
         );
 
         $stateProvider.state(
             'workspace.composition.api', {
                 url: 'api',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html',
-                controller: viewModelsModuleName + '.ResourceArtifactsViewModel'
+                parent: 'workspace.composition'
             }
         );
         $stateProvider.state(
             'workspace.composition.deployment', {
                 url: 'deployment',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html',
-                controller: viewModelsModuleName + '.ResourceArtifactsViewModel'
-            }
-        );
-        $stateProvider.state(
-            'workspace.composition.consumption', {
-                url: 'consumption',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html',
-                controller: viewModelsModuleName + '.ServiceConsumptionViewModel'
-            }
-        );
-        $stateProvider.state(
-            'workspace.composition.dependencies', {
-                url: 'dependencies',
-                parent: 'workspace.composition',
-                templateUrl: './view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html',
-                controller: viewModelsModuleName + '.ServiceDependenciesViewModel'
+                parent: 'workspace.composition'
             }
         );
 
@@ -562,9 +497,14 @@ ng1appModule.config([
             'workspace.plugins', {
                 url: 'plugins/*path',
                 parent: 'workspace',
-                params: {'queryParams': null},
-                templateUrl: './view-models/workspace/tabs/plugins/plugins-context-view.html',
-                controller: viewModelsModuleName + '.PluginsContextViewModel'
+                template: '<plugin-context-view></plugin-context-view>',
+                resolve: {
+                    componentData: ['injectComponent', '$stateParams', function (injectComponent:Component, $stateParams) {
+                        $stateParams.component = injectComponent;
+                        return injectComponent;
+                    }],
+                }
+
             }
         );
 
@@ -581,15 +521,14 @@ ng1appModule.config([
             'onboardVendor', {
                 url: '/onboardVendor',
                 templateUrl: './view-models/onboard-vendor/onboard-vendor-view.html',
-                controller: viewModelsModuleName + '.OnboardVendorViewModel'//,
+                controller: viewModelsModuleName + '.OnboardVendorViewModel'
             }
         );
 
         $stateProvider.state(
             'plugins', {
                 url: '/plugins/*path',
-                templateUrl: './view-models/plugins/plugins-tab-view.html',
-                controller: viewModelsModuleName + '.PluginsTabViewModel'
+                template: '<plugin-tab-view></plugin-tab-view>'
             }
         );
 
@@ -609,11 +548,10 @@ ng1appModule.config([
         $stateProvider.state(
             'catalog', {
                 url: '/catalog?filter.components&filter.resourceSubTypes&filter.categories&filter.statuses&filter.order&filter.term&filter.active',
-                templateUrl: './view-models/catalog/catalog-view.html',
-                controller: viewModelsModuleName + '.CatalogViewModel',
+                template: '<catalog-page></catalog-page>',
                 resolve: {
-                    auth: ["$q", "UserServiceNg2", ($q:any, userService:UserService) => {
-                        let userInfo:IUserProperties = userService.getLoggedinUser();
+                    auth: ["$q", "AuthenticationServiceNg2", ($q:any, authService:AuthenticationService) => {
+                        let userInfo:IUserProperties = authService.getLoggedinUser();
                         if (userInfo) {
                             return $q.when(userInfo);
                         } else {
@@ -625,14 +563,6 @@ ng1appModule.config([
         );
 
         $stateProvider.state(
-            'support', {
-                url: '/support',
-                templateUrl: './view-models/support/support-view.html',
-                controller: viewModelsModuleName + '.SupportViewModel'
-            }
-        );
-
-        $stateProvider.state(
             'error-403', {
                 url: '/error-403',
                 templateUrl: "./view-models/modals/error-modal/error-403-view.html",
@@ -661,7 +591,6 @@ ng1appModule.value('VendorModelNumberValidationPattern', /^[\x20-\x21\x23-\x29\x
 ng1appModule.value('ServiceTypeAndRoleValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,256}$/);
 ng1appModule.value('ContactIdValidationPattern', /^[\s\w-]{1,50}$/);
 ng1appModule.value('UserIdValidationPattern', /^[\s\w-]{1,50}$/);
-ng1appModule.value('ProjectCodeValidationPattern', /^[\s\w-]{5,50}$/);
 ng1appModule.value('LabelValidationPattern', /^[\sa-zA-Z0-9+-]{1,25}$/);
 ng1appModule.value('UrlValidationPattern', /^(https?|ftp):\/\/(((([A-Za-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([A-Za-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([A-Za-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([A-Za-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([A-Za-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([A-Za-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([A-Za-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([A-Za-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([A-Za-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([A-Za-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([A-Za-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([A-Za-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/);
 ng1appModule.value('IntegerValidationPattern', /^(([-+]?\d+)|([-+]?0x[0-9a-fA-F]+))$/);
@@ -680,93 +609,42 @@ ng1appModule.run([
     '$http',
     'Sdc.Services.CacheService',
     'Sdc.Services.CookieService',
-    'Sdc.Services.ConfigurationUiService',
-    'UserServiceNg2',
-    'Sdc.Services.CategoryResourceService',
-    'Sdc.Services.SdcVersionService',
+    'AuthenticationServiceNg2',
     '$state',
     '$rootScope',
     '$location',
     'sdcMenu',
-    'ModalsHandler',
     'Sdc.Services.EcompHeaderService',
     'LeftPaletteLoaderService',
     'Sdc.Services.DataTypesService',
     'AngularJSBridge',
     '$templateCache',
+    'ModalServiceSdcUI',
     ($http:ng.IHttpService,
      cacheService:CacheService,
      cookieService:CookieService,
-     ConfigurationUi:ConfigurationUiService,
-     userService:UserService,
-     categoryResourceService:ICategoryResourceClass,
-     sdcVersionService:SdcVersionService,
+     authService:AuthenticationService,
      $state:ng.ui.IStateService,
      $rootScope:ng.IRootScopeService,
      $location:ng.ILocationService,
      sdcMenu:IAppMenu,
-     ModalsHandler:ModalsHandler,
      ecompHeaderService:EcompHeaderService,
      LeftPaletteLoaderService:LeftPaletteLoaderService,
      DataTypesService:DataTypesService,
      AngularJSBridge,
-     $templateCache:ng.ITemplateCacheService):void => {
+     $templateCache:ng.ITemplateCacheService,
+     ModalServiceSdcUI:SdcUiServices.ModalService):void => {
         $templateCache.put('notification-custom-template.html', require('./view-models/shared/notification-custom-template.html'));
         $templateCache.put('notification-custom-template.html', require('./view-models/shared/notification-custom-template.html'));
-        //handle cache data - version
-        let initAsdcVersion:Function = ():void => {
-
-            let onFailed = (response) => {
-                console.info('onFailed initAsdcVersion', response);
-                cacheService.set('version', 'N/A');
-            };
-
-            let onSuccess = (version:any) => {
-                let tmpVerArray = version.version.split(".");
-                let ver = tmpVerArray[0] + "." + tmpVerArray[1] + "." + tmpVerArray[2];
-                cacheService.set('version', ver);
-            };
-
-            sdcVersionService.getVersion().then(onSuccess, onFailed);
-
-        };
-
-        let initEcompMenu:Function = (user):void => {
-            ecompHeaderService.getMenuItems(user.userId).then((data)=> {
-                $rootScope['menuItems'] = data;
-            });
-        };
-
-        let initConfigurationUi:Function = ():void => {
-            ConfigurationUi
-                .getConfigurationUi()
-                .then((configurationUi:any) => {
-                    cacheService.set('UIConfiguration', configurationUi);
-                });
-        };
-
-        let initCategories:Function = ():void => {
-            let onError = ():void => {
-                console.log('Failed to init categories');
-            };
-
-            categoryResourceService.getAllCategories((categories: Categories):void => {
-                cacheService.set('serviceCategories', categories.serviceCategories);
-                cacheService.set('resourceCategories', categories.resourceCategories);
-            }, onError);
-        };
 
         // Add hosted applications to sdcConfig
         sdcConfig.hostedApplications = hostedApplications;
 
         //handle http config
         $http.defaults.withCredentials = true;
-        $http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';
+        // $http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';
         $http.defaults.headers.common[cookieService.getUserIdSuffix()] = cookieService.getUserId();
 
-        initAsdcVersion();
-        initConfigurationUi();
-       // initLeftPalette();
         DataTypesService.initDataTypes();
 
         //handle stateChangeStart
@@ -794,41 +672,44 @@ ng1appModule.run([
         };
 
         let onNavigateOut:Function = (toState, toParams):void => {
-            let onOk = ():void => {
+            let onOk:Function = ():void => {
                 $state.current.data.unsavedChanges = false;
                 $state.go(toState.name, toParams);
             };
 
             let data = sdcMenu.alertMessages.exitWithoutSaving;
+            const okButton = {
+                testId: "OK",
+                text: sdcMenu.alertMessages.okButton,
+                type: SdcUiCommon.ButtonType.warning,
+                callback: onOk,
+                closeModal: true
+            } as SdcUiComponents.ModalButtonComponent;
             //open notify to user if changes are not saved
-            ModalsHandler.openAlertModal(data.title, data.message).then(onOk);
+            ModalServiceSdcUI.openWarningModal(data.title,
+                data.message,
+                'navigate-modal',
+                [okButton]);
         };
 
         let onStateChangeStart:Function = (event, toState, toParams, fromState, fromParams):void => {
             console.info((new Date()).getTime());
             console.info('$stateChangeStart', toState.name);
+            if (toState.name !== 'error-403' && !authService.getLoggedinUser()) {
 
-            if (toState.name !== 'error-403' && !userService.getLoggedinUser()) {
-                if (toState.name !== 'welcome') {
-                    event.preventDefault();
-                }
 
-                userService.authorize().subscribe((userInfo:IUserProperties) => {
+                authService.authenticate().subscribe((userInfo:IUserProperties) => {
                     if (!doesUserHasAccess(toState, userInfo)) {
                         $state.go('error-403');
                         console.info('User has no permissions');
                         return;
                     }
-                    userService.setLoggedinUser(userInfo);
-                    cacheService.set('user', userInfo);
-                    initCategories();
-                    //   initEcompMenu(userInfo);
+                    authService.setLoggedinUser(userInfo);
                     setTimeout(function () {
 
                         removeLoader();
 
-                        // initCategories();
-                        if (userService.getLoggedinUser().role === 'ADMIN') {
+                        if (authService.getLoggedinUser().role === 'ADMIN') {
                             // toState.name = "adminDashboard";
                             $state.go("adminDashboard", toParams);
                             return;
@@ -850,16 +731,25 @@ ng1appModule.run([
                     $state.go('error-403');
                 });
             }
-            else if (userService.getLoggedinUser()) {
-                if (!doesUserHasAccess(toState, userService.getLoggedinUser())) {
+            else if (authService.getLoggedinUser()) {
+                let user:IUserProperties =  authService.getLoggedinUser();
+                if(!cacheService.contains('user')){
+                    cacheService.set('user', user);
+                }
+
+                if (!doesUserHasAccess(toState, authService.getLoggedinUser())) {
                     event.preventDefault();
                     $state.go('error-403');
                     console.info('User has no permissions');
                 }
-                if (toState.name === "welcome") {
-                    $state.go("dashboard");
+
+                if (authService.getLoggedinUser().role === 'ADMIN') {
+                    // toState.name = "adminDashboard";
+                    $state.go("adminDashboard", toParams);
+                    return;
                 }
 
+
                 //if form is dirty and not save  - notify to user
                 if (fromState.data && fromState.data.unsavedChanges && fromParams.id != toParams.id) {
                     event.preventDefault();
@@ -920,7 +810,6 @@ ng1appModule.run([
                 onStateChangeSuccess(event, toState, toParams, fromState, fromParams);
             });
         };
-
         registerStateChangeStartWatcher();
     }]);
 
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
index 94f4643060..adec51f8e2 100644
--- a/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts
+++ b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts
@@ -67,12 +67,12 @@ export class ClickedOutsideDirective implements ng.IDirective {
             if (!container) {
                 let clickedOutsideContainerSelector:string = clickedOutsideModel.getClickedOutsideContainerSelector();
                 if (!angular.isUndefined(clickedOutsideContainerSelector) && clickedOutsideContainerSelector !== '') {
-                    container = element.parents(clickedOutsideContainerSelector + ':first')[0];
+                    container = <HTMLElement>element.parents(clickedOutsideContainerSelector + ':first')[0];
                     if (!container) {
-                        container = element[0];
+                        container = <HTMLElement>element[0];
                     }
                 } else {
-                    container = element[0];
+                    container = <HTMLElement>element[0];
                 }
             }
             return container;
@@ -85,7 +85,7 @@ export class ClickedOutsideDirective implements ng.IDirective {
             if (targetDomElementJq.hasClass('tooltip') || targetDomElementJq.parents('.tooltip:first').length) {
                 return;
             }
-            let targetDomElement:HTMLElement = targetDomElementJq[0];
+            let targetDomElement:HTMLElement = <HTMLElement>targetDomElementJq[0];
             if (!containerDomElement.contains(targetDomElement)) {
                 scope.$apply(() => {
                     let onClickedOutsideGetter:Function = clickedOutsideModel.getOnClickedOutsideGetter();
diff --git a/catalog-ui/src/app/directives/download-artifact/download-artifact.ts b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts
index deeb1f55d8..8f7735d1ec 100644
--- a/catalog-ui/src/app/directives/download-artifact/download-artifact.ts
+++ b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts
@@ -20,7 +20,8 @@
 
 'use strict';
 import {IFileDownload, Component, ArtifactModel} from "app/models";
-import {EventListenerService, CacheService} from "app/services";
+import {EventListenerService} from "app/services";
+import {CacheService} from "app/services-ng2";
 import {EVENTS, FileUtils} from "app/utils";
 
 export class DOWNLOAD_CSS_CLASSES {
diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
index 76bc1692b4..eb9e71fa30 100644
--- a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
+++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
@@ -23,6 +23,7 @@ import * as _ from "lodash";
 import {IAppConfigurtaion, User, IUser} from "app/models";
 import {IUserProperties} from "../../models/user";
 import {UserService} from "../../ng2/services/user.service";
+import { AuthenticationService } from "../../ng2/services/authentication.service";
 
 export class MenuItem {
     menuId:number;
@@ -57,7 +58,8 @@ export class EcompHeaderDirective implements ng.IDirective {
 
     constructor(private $http:ng.IHttpService,
                 private sdcConfig:IAppConfigurtaion,
-                private userService:UserService) {
+                private userService:UserService,
+                private authService:AuthenticationService) {
 
     }
 
@@ -92,7 +94,7 @@ export class EcompHeaderDirective implements ng.IDirective {
 
         let initUser = ():void => {
             let defaultUserId:string;
-            let userInfo:IUserProperties = this.userService.getLoggedinUser();
+            let userInfo:IUserProperties = this.authService.getLoggedinUser();
             if (!userInfo) {
                 defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix];
                 this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => {
@@ -137,8 +139,9 @@ export class EcompHeaderDirective implements ng.IDirective {
 
     public static factory = ($http:ng.IHttpService,
                              sdcConfig:IAppConfigurtaion,
-                             userService:UserService)=> {
-        return new EcompHeaderDirective($http, sdcConfig, userService);
+                             userService:UserService, 
+                             authService:AuthenticationService)=> {
+        return new EcompHeaderDirective($http, sdcConfig, userService, authService);
     };
 
 }
@@ -231,7 +234,7 @@ export class EcompHeaderController {
     };
 }
 
-EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2'];
+EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2', 'AuthenticationServiceNg2'];
 
 
 
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
index d59c44d67f..156192dd99 100644
--- a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
@@ -18,8 +18,8 @@
 {{actualText}}
 
 <span class="ellipsis-directive-more-less"
-      data-ng-click="onMoreLessClick($event)"
-      data-ng-hide="ellipsis.length <= maxChars"
-      data-tests-id="ellipsis-more-less">
+  data-ng-click="onMoreLessClick($event)"
+  data-ng-hide="ellipsis.length <= maxChars"
+  data-tests-id="ellipsis-more-less">
   {{actualText ? (collapsed ? "More" : "Less") : ""}}
 </span>
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
index 21e074a8b9..be7547cd76 100644
--- a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
@@ -23,7 +23,6 @@ export interface IEllipsisScope extends ng.IScope {
     ellipsis:string;
     maxChars:number;
     toggleText():void;
-    onMoreLessClick(event): void;
     collapsed:boolean;
     actualText:string;
 
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
deleted file mode 100644
index b07668d6d9..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
- 
-<div class="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
deleted file mode 100644
index 1a113e5bdc..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less
+++ /dev/null
@@ -1,64 +0,0 @@
-.assetPopover {
-    font-family: @font-opensans-regular;
-    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: @font-opensans-regular;
-        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
deleted file mode 100644
index ad3197c6da..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {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/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
deleted file mode 100644
index e6c2fb395b..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
+++ /dev/null
@@ -1,947 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {
-    Match,
-    LinkMenu,
-    ComponentInstance,
-    LeftPaletteComponent,
-    Relationship,
-    Component,
-    Service,
-    ConnectRelationModel,
-    CompositionCiNodeBase,
-    CompositionCiNodeVl,
-    ModalModel,
-    ButtonModel,
-    NodesFactory,
-    Point
-} from "app/models";
-import { ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors, DEPENDENCY_EVENTS } 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";
-import { ModalService } from "../../../ng2/services/modal.service";
-import { ConnectionWizardService } from "../../../ng2/pages/connection-wizard/connection-wizard.service";
-import { StepModel } from "../../../models/wizard-step";
-import { FromNodeStepComponent } from "app/ng2/pages/connection-wizard/from-node-step/from-node-step.component";
-import { PropertiesStepComponent } from "app/ng2/pages/connection-wizard/properties-step/properties-step.component";
-import { ToNodeStepComponent } from "app/ng2/pages/connection-wizard/to-node-step/to-node-step.component";
-import { ConnectionWizardHeaderComponent } from "app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component";
-import { ConnectionPropertiesViewComponent } from "../../../ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component";
-import { ComponentInstanceServiceNg2 } from "../../../ng2/services/component-instance-services/component-instance.service";
-import { EVENTS } from "../../../utils/constants";
-import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
-import { ForwardingPath } from "app/models/forwarding-path";
-import { ServicePathGraphUtils } from "./utils/composition-graph-service-path-utils";
-import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import {
-    ZoneInstance, ZoneInstanceMode, ZoneInstanceType,
-    ZoneInstanceAssignmentType
-} from "app/models/graph/zones/zone-instance";
-
-import { Zone } from "app/models/graph/zones/zone";
-import { CompositionGraphZoneUtils } from "./utils/composition-graph-zone-utils";
-import { UIZoneInstanceObject } from "../../../models/ui-models/ui-zone-instance-object";
-import { GroupInstance } from "../../../models/graph/zones/group-instance";
-import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
-
-
-export interface ICompositionGraphScope extends ng.IScope {
-
-    component: Component;
-    isLoading: boolean;
-    isViewOnly: boolean;
-    withSidebar: boolean;
-
-    //zones
-    newZoneInstance;
-    zoneTagMode: string;
-    activeZoneInstance: ZoneInstance;
-    zones: Array<Zone>;
-    zoneMinimizeToggle(zoneType: ZoneInstanceType): void;
-    zoneInstanceTagged(taggedInstance: ZoneInstance): void;
-    zoneBackgroundClicked() :void;
-    zoneInstanceModeChanged(newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType);
-    unsetActiveZoneInstance(): void;
-    clickOutsideZoneInstance(): void;
-    zoneAssignmentSaveStart(): void;
-    zoneAssignmentSaveComplete(success: boolean): void;
-
-    // Link menu - create link menu
-    relationMenuDirectiveObj: ConnectRelationModel;
-    isLinkMenuOpen: boolean;
-    createLinkFromMenu: (chosenMatch: Match, vl: Component) => void;
-    saveChangedCapabilityProperties: () => Promise<PropertyBEModel[]>;
-
-    //modify link menu - for now only delete menu
-    relationMenuTimeout: ng.IPromise<any>;
-    linkMenuObject: LinkMenu;
-    isOnDrag: boolean;
-
-    //left palette functions callbacks
-    dropCallback(event: JQueryEventObject, ui: any): void;
-    beforeDropCallback(event: IDragDropEvent): void;
-    verifyDrop(event: JQueryEventObject, ui: any): void;
-
-    //Links menus
-    viewRelation(link: Cy.CollectionEdges): void;
-    deleteRelation(link: Cy.CollectionEdges): void;
-    hideRelationMenu();
-
-    //search,zoom in/out/all
-    componentInstanceNames: Array<string>; //id, name
-    zoom(zoomIn: boolean): void;
-    zoomAllWithoutSidebar(): void;
-    getAutoCompleteValues(searchTerm: string): void;
-    highlightSearchMatches(searchTerm: string): void;
-
-    canvasMenuProps: any;
-
-    createOrUpdateServicePath(data: any): void;
-    deletePathsOnCy(): void;
-    drawPathOnCy(data: ForwardingPath): void;
-    selectedPathId: string;
-}
-
-export class CompositionGraph implements ng.IDirective {
-    private _cy: Cy.Instance;
-    private _currentlyCLickedNodePosition: Cy.Position;
-    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 compositionGraphZoneUtils: CompositionGraphZoneUtils,
-        private ComponentServiceNg2: ComponentServiceNg2,
-        private ModalServiceNg2: ModalService,
-        private ConnectionWizardServiceNg2: ConnectionWizardService,
-        private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2,
-        private servicePathGraphUtils: ServicePathGraphUtils) {
-
-    }
-
-    restrict = 'E';
-    template = require('./composition-graph.html');
-    scope = {
-        component: '=',
-        isViewOnly: '=',
-        withSidebar: '='
-    };
-
-    link = (scope: ICompositionGraphScope, el: JQuery) => {
-        this.loadGraph(scope, el);
-
-        if (!scope.component.groupInstances || !scope.component.policies) {
-            this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED, () => {
-                this.loadGraphData(scope);
-            });
-        } else {
-            this.loadGraphData(scope);
-        }
-
-
-        scope.$on('$destroy', () => {
-            this._cy.destroy();
-            _.forEach(GRAPH_EVENTS, (event) => {
-                this.eventListenerService.unRegisterObserver(event);
-            });
-            this.eventListenerService.unRegisterObserver(EVENTS.SHOW_LOADER_EVENT + 'composition-graph');
-            this.eventListenerService.unRegisterObserver(EVENTS.HIDE_LOADER_EVENT + 'composition-graph');
-            this.eventListenerService.unRegisterObserver(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE);
-        });
-
-    };
-
-    private loadGraphData = (scope: ICompositionGraphScope) => {
-        this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly);
-        this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component));
-        this.commonGraphUtils.initUcpeChildren(this._cy);
-        this.compositionGraphZoneUtils.initZoneInstances(scope.zones, scope.component);
-        setTimeout(() => {//Need settimeout so that angular canvas changes will take effect before resize & center
-            this.GeneralGraphUtils.zoomAllWithMax(this._cy, 1);
-        });
-    }
-
-    private loadGraph = (scope: ICompositionGraphScope, el: JQuery) => {
-        let graphEl = el.find('.sdc-composition-graph-wrapper');
-        this.initGraph(graphEl, scope.isViewOnly);
-        this.initDropZone(scope);
-        this.initZones(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: true,
-            maxZoom: 1.2,
-            minZoom: .1,
-            userZoomingEnabled: false,
-            userPanningEnabled: true,
-            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.off('canvasredraw');
-            this._cy.off('handletagclick')
-            this._cy.edges().unselectify();
-        }
-    };
-
-    private registerCustomEvents(scope: ICompositionGraphScope, el: JQuery) {
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, (groupInstance: GroupInstance) => {
-            this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, groupInstance);
-            this.GeneralGraphUtils.showGroupUpdateSuccess();
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, (policyInstance: PolicyInstance) => {
-            this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, policyInstance);
-            this.GeneralGraphUtils.showPolicyUpdateSuccess();
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => {
-            if (scope.isOnDrag) {
-                return;
-            }
-
-            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.findMatchingNodes(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);
-            });
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, (component: Component, paletteComponent: LeftPaletteComponent, startPosition: Point) => {
-
-            let zoneType: ZoneInstanceType = this.compositionGraphZoneUtils.getZoneTypeForPaletteComponent(paletteComponent.categoryType);
-            this.compositionGraphZoneUtils.showZone(scope.zones[zoneType]);
-
-            this.LoaderService.showLoader('composition-graph');
-            this.compositionGraphZoneUtils.createZoneInstanceFromLeftPalette(zoneType, component, paletteComponent.type).subscribe((zoneInstance: ZoneInstance) => {
-                this.LoaderService.hideLoader('composition-graph');
-                this.compositionGraphZoneUtils.addInstanceToZone(scope.zones[zoneInstance.type], zoneInstance, true);
-                this.compositionGraphZoneUtils.createPaletteToZoneAnimation(startPosition, zoneType, zoneInstance);
-            }, (error) => {
-                this.LoaderService.hideLoader('composition-graph');
-            });
-        });
-
-        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_ZONE_INSTANCE, (deletedInstance: UIZoneInstanceObject) => {
-
-            if (deletedInstance.type === ZoneInstanceType.POLICY) {
-                scope.component.policies = scope.component.policies.filter(policy => policy.uniqueId !== deletedInstance.uniqueId);
-            } else if (deletedInstance.type === ZoneInstanceType.GROUP) {
-                scope.component.groupInstances = scope.component.groupInstances.filter(group => group.uniqueId !== deletedInstance.uniqueId);
-            }
-            //remove it from zones
-            scope.zones[deletedInstance.type].removeInstance(deletedInstance.uniqueId);
-            if (deletedInstance.type === ZoneInstanceType.GROUP && !_.isEmpty(scope.zones[ZoneInstanceType.POLICY])) {
-                this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(deletedInstance.uniqueId, [scope.zones[ZoneInstanceType.POLICY]], ZoneInstanceAssignmentType.GROUPS);
-            }
-            this.eventListenerService.notifyObservers(EVENTS.UPDATE_PANEL);
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, (componentInstanceId: string) => {
-            if (!_.isEmpty(scope.zones)) {
-                this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(componentInstanceId, scope.zones, ZoneInstanceAssignmentType.COMPONENT_INSTANCES);
-            }
-        });
-
-        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._cy.elements().remove();
-            this.loadGraphData(scope);
-        });
-
-        this.eventListenerService.registerObserverCallback(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, (ischecked: boolean) => {
-            if (ischecked) {
-                this._cy.$('node:selected').addClass('dependent');
-            } else {
-                // due to defect in cytoscape, just changing the class does not replace the icon, and i need to revert to original icon with no markings.
-                this._cy.$('node:selected').removeClass('dependent');
-                this._cy.$('node:selected').style({'background-image': this._cy.$('node:selected').data('originalImg')});
-            }
-        });
-
-        scope.zoom = (zoomIn: boolean): void => {
-            let currentZoom: number = this._cy.zoom();
-            if (zoomIn) {
-                this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom + .1);
-            } else {
-                this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom - .1);
-            }
-        }
-
-
-        scope.zoomAllWithoutSidebar = () => {
-            scope.withSidebar = false;
-            setTimeout(() => { //wait for sidebar changes to take effect before zooming
-                this.GeneralGraphUtils.zoomAll(this._cy);
-            });
-        };
-
-        scope.getAutoCompleteValues = (searchTerm: string) => {
-            if (searchTerm.length > 1) { //US requirement: only display search results after 2nd letter typed.
-                let nodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm);
-                scope.componentInstanceNames = _.map(nodes, node => node.data('name'));
-            } else {
-                scope.componentInstanceNames = [];
-            }
-        };
-
-        scope.highlightSearchMatches = (searchTerm: string) => {
-            this.NodesGraphUtils.highlightMatchingNodesByName(this._cy, searchTerm);
-            let matchingNodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm);
-            this.GeneralGraphUtils.zoomAll(this._cy, matchingNodes);
-        };
-
-        scope.saveChangedCapabilityProperties = (): Promise<PropertyBEModel[]> => {
-            return new Promise<PropertyBEModel[]>((resolve) => {
-                const capabilityPropertiesBE: PropertyBEModel[] = this.ConnectionWizardServiceNg2.changedCapabilityProperties.map((prop) => {
-                    prop.value = prop.getJSONValue();
-                    const propBE = new PropertyBEModel(prop);
-                    propBE.parentUniqueId = this.ConnectionWizardServiceNg2.selectedMatch.relationship.relation.capabilityOwnerId;
-                    return propBE;
-                });
-                if (capabilityPropertiesBE.length > 0) {
-                    // if there are capability properties to update, then first update capability properties and then resolve promise
-                    this.ComponentInstanceServiceNg2
-                        .updateInstanceCapabilityProperties(
-                            scope.component,
-                            this.ConnectionWizardServiceNg2.selectedMatch.toNode,
-                            this.ConnectionWizardServiceNg2.selectedMatch.capability,
-                            capabilityPropertiesBE
-                        )
-                        .subscribe((response) => {
-                            console.log("Update resource instance capability properties response: ", response);
-                            this.ConnectionWizardServiceNg2.changedCapabilityProperties = [];
-                            resolve(capabilityPropertiesBE);
-                        });
-                } else {
-                    // no capability properties to update, immediately resolve promise
-                    resolve(capabilityPropertiesBE);
-                }
-            });
-        };
-
-        scope.createLinkFromMenu = (): void => {
-            scope.isLinkMenuOpen = false;
-
-            scope.saveChangedCapabilityProperties().then(() => {
-                //create link:
-                this.CompositionGraphLinkUtils
-                    .createLinkFromMenu(this._cy, this.ConnectionWizardServiceNg2.selectedMatch, scope.component);
-            });
-        };
-
-        scope.hideRelationMenu = () => {
-            this.commonGraphUtils.safeApply(scope, () => {
-                delete scope.canvasMenuProps;
-                this.$timeout.cancel(scope.relationMenuTimeout);
-            });
-        };
-
-        scope.createOrUpdateServicePath = (data: any) => {
-            this.servicePathGraphUtils.createOrUpdateServicePath(scope, data);
-        };
-        scope.deletePathsOnCy = () => {
-            this.servicePathGraphUtils.deletePathsFromGraph(this._cy, <Service>scope.component);
-        };
-        scope.drawPathOnCy = (data: ForwardingPath) => {
-            this.servicePathGraphUtils.drawPath(this._cy, data, <Service>scope.component);
-        };
-
-        scope.viewRelation = (link: Cy.CollectionEdges) => {
-            scope.hideRelationMenu();
-
-            const linkData = link.data();
-            const sourceNode: CompositionCiNodeBase = link.source().data();
-            const targetNode: CompositionCiNodeBase = link.target().data();
-            const relationship: Relationship = linkData.relation.relationships[0];
-
-            scope.component.getRelationRequirementCapability(relationship, sourceNode.componentInstance, targetNode.componentInstance).then((objReqCap) => {
-                const capability = objReqCap.capability;
-                const requirement = objReqCap.requirement;
-
-                this.ConnectionWizardServiceNg2.currentComponent = scope.component;
-                this.ConnectionWizardServiceNg2.connectRelationModel = new ConnectRelationModel(sourceNode, targetNode, []);
-                this.ConnectionWizardServiceNg2.selectedMatch = new Match(requirement, capability, true, linkData.source, linkData.target);
-                this.ConnectionWizardServiceNg2.selectedMatch.relationship = relationship;
-
-                const title = `Connection Properties`;
-                const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => {
-                    scope.saveChangedCapabilityProperties().then(() => {
-                        this.ModalServiceNg2.closeCurrentModal();
-                    })
-                });
-                const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => {
-                    this.ModalServiceNg2.closeCurrentModal();
-                });
-                const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]);
-                const modalInstance = this.ModalServiceNg2.createCustomModal(modal);
-                this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
-                modalInstance.instance.open();
-
-                new Promise((resolve) => {
-                    if (!this.ConnectionWizardServiceNg2.selectedMatch.capability.properties) {
-                        this.ComponentInstanceServiceNg2.getInstanceCapabilityProperties(scope.component, linkData.target, capability)
-                            .subscribe(() => {
-                                resolve();
-                            }, (error) => {
-                            });
-                    } else {
-                        resolve();
-                    }
-                }).then(() => {
-                    this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
-                })
-
-            }, (error) => {
-            });
-        };
-
-        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);
-            }
-        };
-    }
-
-    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) {
-                this.ConnectionWizardServiceNg2.setRelationMenuDirectiveObj(scope.relationMenuDirectiveObj);
-                this.ConnectionWizardServiceNg2.currentComponent = scope.component;
-                //TODO: init with the selected values
-                this.ConnectionWizardServiceNg2.selectedMatch = null;
-
-                let steps: Array<StepModel> = [];
-                let fromNodeName: string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name;
-                let toNodeName: string = scope.relationMenuDirectiveObj.toNode.componentInstance.name;
-                steps.push(new StepModel(fromNodeName, FromNodeStepComponent));
-                steps.push(new StepModel(toNodeName, ToNodeStepComponent));
-                steps.push(new StepModel('Properties', PropertiesStepComponent));
-                let wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName;
-                let modalInstance = this.ModalServiceNg2.createMultiStepsWizard(wizardTitle, steps, scope.createLinkFromMenu, ConnectionWizardHeaderComponent);
-                modalInstance.instance.open();
-            }
-        });
-        this._cy.on('tapstart', 'node', (event: Cy.EventObject) => {
-            scope.isOnDrag = true;
-            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);
-            }
-        });
-
-        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('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;
-            }
-
-            if (scope.zoneTagMode) {
-                scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId();
-                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.findMatchingNodes(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;
-        });
-
-        this._cy.on('handlemouseout', () => {
-            if (scope.zoneTagMode) {
-                scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getTagModeId();
-                return;
-            }
-            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) => {
-            scope.isOnDrag = false;
-            if (scope.zoneTagMode) {
-                return;
-            }
-            if (event.cyTarget === this._cy) { //On Background clicked
-                if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged
-                    if (scope.activeZoneInstance) {
-                        scope.unsetActiveZoneInstance();
-                    }
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
-                }
-                scope.hideRelationMenu();
-            }
-
-            else if (event.cyTarget.isEdge()) { //On Edge clicked
-                this.CompositionGraphLinkUtils.handleLinkClick(this._cy, event);
-                if (event.cyTarget.data().type === CompositionCiServicePathLink.LINK_TYPE) {
-                    return;
-                }
-                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');
-                    if (scope.activeZoneInstance) {
-                        scope.unsetActiveZoneInstance();
-                    }
-                    scope.$apply(() => {
-                        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
-                    });
-                }
-
-                if (isUcpe) {
-                    this._cy.nodes('.ucpe-cp').lock();
-                    event.cyTarget.style('opacity', 1);
-                }
-
-            }
-        });
-
-        this._cy.on('boxselect', 'node', (event: Cy.EventObject) => {
-            scope.unsetActiveZoneInstance();
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
-        });
-
-        this._cy.on('canvasredraw', (event: Cy.EventObject) => {
-            if (scope.zoneTagMode) {
-                this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, scope.activeZoneInstance);
-            }
-        });
-
-        this._cy.on('handletagclick', (event: Cy.EventObject, eventData: any) => {
-            this.compositionGraphZoneUtils.handleTagClick(this._cy, scope.activeZoneInstance, eventData.nodeId);
-
-
-        });
-    }
-
-    private openModifyLinkMenu = (scope: ICompositionGraphScope, linkMenuObject: LinkMenu, timeOutInMilliseconds?: number) => {
-        scope.hideRelationMenu();
-        this.$timeout(() => {
-            scope.canvasMenuProps = {
-                open: true,
-                styleClass: 'w-sdc-canvas-menu-list',
-                items: [],
-                position: {
-                    x: `${linkMenuObject.position.x}px`,
-                    y: `${linkMenuObject.position.y}px`
-                }
-            };
-
-            if (this._cy.$('edge:selected').length === 1) {
-                scope.canvasMenuProps.items.push({
-                    contents: 'View',
-                    styleClass: 'w-sdc-canvas-menu-item-view',
-                    action: () => {
-                        scope.viewRelation(<Cy.CollectionEdges>linkMenuObject.link);
-                    }
-                });
-            }
-            if (!scope.isViewOnly) {
-                scope.canvasMenuProps.items.push({
-                    contents: 'Delete',
-                    styleClass: 'w-sdc-canvas-menu-item-delete',
-                    action: () => {
-                        scope.deleteRelation(<Cy.CollectionEdges>linkMenuObject.link);
-                    }
-                });
-            }
-            scope.relationMenuTimeout = this.$timeout(() => {
-                scope.hideRelationMenu();
-            }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
-        });
-    };
-
-    private initGraphNodes(componentInstances: ComponentInstance[], isViewOnly: boolean) {
-
-
-        setTimeout(() => {
-            let handles = new CytoscapeEdgeEditation;
-            handles.init(this._cy);
-            if (!isViewOnly) { //Init nodes handle extension - enable dynamic links
-                handles.initNodeEvents();
-                handles.registerHandle(ComponentInstanceNodesStyle.getAddEdgeHandle());
-            }
-            handles.registerHandle(ComponentInstanceNodesStyle.getTagHandle());
-            handles.registerHandle(ComponentInstanceNodesStyle.getTaggedPolicyHandle());
-            handles.registerHandle(ComponentInstanceNodesStyle.getTaggedGroupHandle());
-        }, 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 || 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;
-        }
-    }
-
-
-    private initZones = (scope: ICompositionGraphScope): void => {
-        scope.zones = this.compositionGraphZoneUtils.createCompositionZones();
-
-
-        scope.zoneMinimizeToggle = (zoneType: ZoneInstanceType): void => {
-            scope.zones[zoneType].minimized = !scope.zones[zoneType].minimized;
-        };
-
-        scope.zoneInstanceModeChanged = (newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType): void => {
-            if (scope.zoneTagMode) { //we're in tag mode.
-                if (instance == scope.activeZoneInstance && newMode == ZoneInstanceMode.NONE) { //we want to turn tag mode off.
-                    scope.zoneTagMode = null;
-                    scope.activeZoneInstance.mode = ZoneInstanceMode.SELECTED;
-                    this.compositionGraphZoneUtils.endCyTagMode(this._cy);
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_END, instance);
-
-                }
-            } else {
-                if (instance != scope.activeZoneInstance || (instance == scope.activeZoneInstance && newMode > ZoneInstanceMode.HOVER)) { //when active zone instance gets hover/none,dont actually change mode, just show/hide indications
-                    instance.mode = newMode;
-                }
-
-                if (newMode == ZoneInstanceMode.NONE) {
-                    this.compositionGraphZoneUtils.hideZoneTagIndications(this._cy);
-                    if (scope.zones[ZoneInstanceType.GROUP]) {
-                        this.compositionGraphZoneUtils.hideGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances);
-                    }
-                }
-                if (newMode >= ZoneInstanceMode.HOVER) {
-                    this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, instance);
-                    if (instance.type == ZoneInstanceType.POLICY && scope.zones[ZoneInstanceType.GROUP]) {
-                        this.compositionGraphZoneUtils.showGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances, instance);
-                    }
-                }
-                if (newMode >= ZoneInstanceMode.SELECTED) {
-                    this._cy.$('node:selected').unselect();
-                    if (scope.activeZoneInstance && scope.activeZoneInstance != instance && newMode >= ZoneInstanceMode.SELECTED) {
-                        scope.activeZoneInstance.mode = ZoneInstanceMode.NONE;
-                    }
-                    scope.activeZoneInstance = instance;
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, instance);
-                }
-                if (newMode == ZoneInstanceMode.TAG) {
-                    this.compositionGraphZoneUtils.startCyTagMode(this._cy);
-                    scope.zoneTagMode = scope.zones[zoneId].getTagModeId();
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_START, zoneId);
-                }
-            }
-        };
-
-        scope.zoneInstanceTagged = (taggedInstance: ZoneInstance) => {
-            scope.activeZoneInstance.addOrRemoveAssignment(taggedInstance.instanceData.uniqueId, ZoneInstanceAssignmentType.GROUPS);
-            let newHandle: string = this.compositionGraphZoneUtils.getCorrectHandleForNode(taggedInstance.instanceData.uniqueId, scope.activeZoneInstance);
-            taggedInstance.showHandle(newHandle);
-        }
-
-        scope.zoneBackgroundClicked = (): void => {
-            if (!scope.zoneTagMode && scope.activeZoneInstance) {
-                scope.unsetActiveZoneInstance();
-            }
-        };
-
-        scope.zoneAssignmentSaveStart = () => {
-            this.LoaderService.showLoader('composition-graph');
-        }
-
-        scope.zoneAssignmentSaveComplete = (success: boolean) => {
-            this.LoaderService.hideLoader('composition-graph');
-            if (!success) {
-                this.GeneralGraphUtils.showUpdateFailure();
-            }
-        };
-
-        scope.unsetActiveZoneInstance = (): void => {
-            if (scope.activeZoneInstance) {
-                scope.activeZoneInstance.mode = ZoneInstanceMode.NONE;
-                scope.activeZoneInstance = null;
-                scope.zoneTagMode = null;
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
-            }
-        };
-    };
-
-
-    public static factory = ($q,
-        $log,
-        $timeout,
-        NodesFactory,
-        LinksGraphUtils,
-        GeneralGraphUtils,
-        ComponentInstanceFactory,
-        NodesGraphUtils,
-        EventListenerService,
-        ComponentFactory,
-        LoaderService,
-        CommonGraphUtils,
-        MatchCapabilitiesRequirementsUtils,
-        CompositionGraphPaletteUtils,
-        CompositionGraphZoneUtils,
-        ComponentServiceNg2,
-        ModalService,
-        ConnectionWizardService,
-        ComponentInstanceServiceNg2,
-        ServicePathGraphUtils) => {
-        return new CompositionGraph(
-            $q,
-            $log,
-            $timeout,
-            NodesFactory,
-            LinksGraphUtils,
-            GeneralGraphUtils,
-            ComponentInstanceFactory,
-            NodesGraphUtils,
-            EventListenerService,
-            ComponentFactory,
-            LoaderService,
-            CommonGraphUtils,
-            MatchCapabilitiesRequirementsUtils,
-            CompositionGraphPaletteUtils,
-            CompositionGraphZoneUtils,
-            ComponentServiceNg2,
-            ModalService,
-            ConnectionWizardService,
-            ComponentInstanceServiceNg2,
-            ServicePathGraphUtils);
-    }
-}
-
-CompositionGraph.factory.$inject = [
-    '$q',
-    '$log',
-    '$timeout',
-    'NodesFactory',
-    'CompositionGraphLinkUtils',
-    'CompositionGraphGeneralUtils',
-    'ComponentInstanceFactory',
-    'CompositionGraphNodesUtils',
-    'EventListenerService',
-    'ComponentFactory',
-    'LoaderService',
-    'CommonGraphUtils',
-    'MatchCapabilitiesRequirementsUtils',
-    'CompositionGraphPaletteUtils',
-    'CompositionGraphZoneUtils',
-    'ComponentServiceNg2',
-    'ModalServiceNg2',
-    'ConnectionWizardServiceNg2',
-    'ComponentInstanceServiceNg2',
-    'ServicePathGraphUtils'
-];
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
deleted file mode 100644
index b473f44628..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
- 
-<loader display="isLoading" loader-type="composition-graph"></loader>
-<div class="sdc-composition-graph-wrapper {{zoneTagMode}}" ng-class="{'with-sidebar': withSidebar, 'view-only':isViewOnly}"
-     data-drop="!zoneTagMode"
-     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> -->
-
-<menu-list-ng2 [props]="canvasMenuProps"></menu-list-ng2>
-
-    <div class="w-sdc-search-menu" data-ng-class="{'with-sidebar': withSidebar}">
-
-    <ng2-service-path-selector
-        ng-if="component.isService()"
-        [service]="component"
-        [draw-path]="drawPathOnCy"
-        [delete-paths]="deletePathsOnCy"
-        [selected-path-id]="selectedPathId">
-    </ng2-service-path-selector>
-    <ng2-service-path 
-        ng-if="component.isService()"
-        [service]="component"
-        [on-create]="createOrUpdateServicePath"
-        [is-view-only]="isViewOnly">
-    </ng2-service-path>
-    <ng2-search-with-autocomplete
-        [search-placeholder]="'Type to search'"
-        [auto-complete-values]="componentInstanceNames"
-        (search-changed)="getAutoCompleteValues($event)"
-        (search-button-clicked)="highlightSearchMatches($event)"
-        [search-bar-class]="'composition-search'">
-    </ng2-search-with-autocomplete>
-        <div class="zoom-icons sprite-new canvas-fit-all" data-ng-click="zoomAllWithoutSidebar()"></div>
-        <div class="zoom-icons sprite-new zoom-plus" data-ng-click="zoom(true)"></div>
-        <div class="zoom-icons sprite-new zoom-minus" data-ng-click="zoom(false)"></div>
-    </div>
-<!--<asset-popover ng-if="assetPopoverOpen" asset-popover-obj="assetPopoverObj" delete-asset="deleteNode(assetPopoverObj.nodeId)"></asset-popover>-->
-<div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" data-ng-class="{'with-sidebar': withSidebar}">
-    <ng2-zone-container data-ng-repeat="zone in zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length"
-                        [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)" (background-click)="zoneBackgroundClicked()">
-        <ng2-zone-instance
-            data-ng-repeat="instance in zone.instances" [hidden]="instance.hidden"
-            [zone-instance]="instance" [default-icon-text]="zone.defaultIconText" [is-active]="activeZoneInstance == instance" [active-instance-mode]="activeZoneInstance && activeZoneInstance.mode"
-            [is-view-only]="isViewOnly" [force-save]="instance.forceSave" (mode-change)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)" (tag-handle-click)="zoneInstanceTagged($event)"
-            (assignment-save-start)="zoneAssignmentSaveStart()" (assignment-save-complete)="zoneAssignmentSaveComplete($event)">
-        </ng2-zone-instance>
-    </ng2-zone-container>
-</div>
\ No newline at end of file
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
deleted file mode 100644
index 7124a4b5a6..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less
+++ /dev/null
@@ -1,50 +0,0 @@
-composition-graph {
-  display: block;
-   height:100%;
-   width: 100%;
-
-  .sdc-composition-graph-wrapper{
-    height:100%;
-    width: 100%;
-
-    &.with-sidebar {
-      width: calc(~'100% - 300px');
-    }
-  }
-
-  .view-only{
-    background-color:rgb(248, 248, 248);
-  }
-
-  .sdc-canvas-zones__wrapper {
-    position: absolute;
-    bottom: 10px;
-    right: 12px;
-    display:flex;
-    transition: right 0.2s;
-
-    &.with-sidebar {
-      right:310px;
-    }
-
-    ng2-zone-container {
-      display:flex;
-      margin-left: 10px;
-    }
-  }
-
- 
-  .group-tagging {
-    cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_1.svg"), pointer;
-  }
-  .group-tagging-hover {
-    cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_2.svg"), pointer;
-  }
-  .policy-tagging {
-    cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_1.svg"), pointer;
-  }
-  .policy-tagging-hover {
-    cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
-  }
-
-}
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
deleted file mode 100644
index 329af56e87..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {ComponentInstance, Component, Match, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models";
-import {QueueUtils, Dictionary, GraphUIObjects} from "app/utils";
-import {LoaderService} from "app/services";
-import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
-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, 
-                private Notification:any) {
-        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;
-    };
-
-
-    public zoomGraphTo = (cy:Cy.Instance, zoomLevel: number):void => {
-        let zy = cy.height() / 2;
-        let zx = cy.width() / 2;
-        cy.zoom({
-            level: zoomLevel,
-            renderedPosition: { x: zx, y: zy }
-        });
-    }
-
-
-    //saves the current zoom, and then sets a temporary maximum zoom for zoomAll, and then reverts to old value
-    public zoomAllWithMax = (cy:Cy.Instance, maxZoom:number):void => {
-
-        let oldMaxZoom:number = cy.maxZoom();
-        
-        cy.maxZoom(maxZoom);
-        this.zoomAll(cy);
-        cy.maxZoom(oldMaxZoom);
-
-    };
-
-
-    //Zooms to fit all of the nodes in the collection passed in. If no nodes are passed in, will zoom to fit all nodes on graph
-    public zoomAll = (cy:Cy.Instance, nodes?:Cy.CollectionNodes):void => {
-
-        if (!nodes || !nodes.length) {
-            nodes = cy.nodes();
-        }
-
-        cy.resize();
-        cy.animate({
-            fit: { eles: nodes, padding: 20 },
-            center: { eles: nodes }
-        }, { duration: 400 });
-    };
-
-    /**
-     * 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 {Match}
-     */
-    public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):Match {
-
-        let matches:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
-        let hostedOnMatch:Match = _.find(matches, (match:Match) => {
-            return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container';
-        });
-
-        return 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:Match = 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();
-        });
-    };
-
-
-    public showPolicyUpdateSuccess = () => {
-        this.Notification.success({
-            message: "Policy Updated",
-            title: "Success"
-        });
-    }
-    
-    public showGroupUpdateSuccess = () => {
-        this.Notification.success({
-            message: "Group Updated",
-            title: "Success"
-        });
-    }
-
-    public showUpdateFailure = () => {
-        this.Notification.error({
-            message: "Update Failed",
-            title: "Error"
-        });
-    };
-
-    /**
-     * 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', 'Notification'];
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
deleted file mode 100644
index 705367c5f7..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
+++ /dev/null
@@ -1,301 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by obarda on 6/28/2016.
- */
-import * as _ from "lodash";
-import {GraphUIObjects} from "app/utils";
-import {LoaderService} from "app/services";
-import {
-    NodeUcpe,
-    CompositionCiNodeVf,
-    Match,
-    CompositionCiNodeBase,
-    RelationshipModel,
-    ConnectRelationModel,
-    LinksFactory,
-    Component,
-    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";
-import {CompositionCiServicePathLink} from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-
-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, component.getRelationRequirementCapability.bind(component));
-        };
-
-        link.updateLinkDirection();
-
-        this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
-            () => component.createRelation(link.relation).then(onSuccess),
-            () => this.loaderService.hideLoader('composition-graph')
-        );
-    };
-
-    private createSimpleLink = (match:Match, cy:Cy.Instance, component:Component):void => {
-        let newRelation:RelationshipModel = match.matchToRelationModel();
-        let linkObg:CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]);
-        this.createLink(linkObg, cy, component);
-    };
-
-    public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Match, component:Component):void => {
-
-        if (chosenMatch) {
-            if (chosenMatch && chosenMatch instanceof Match) {
-                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<Match>):any {
-
-        let matchLink:Array<Match>;
-
-        if (fromNode.isUcpePart) {
-            matchLink = _.filter(matchesArray, (match:Match) => {
-                return match.isOwner(fromNode.id);
-            });
-        }
-
-        if (toNode.isUcpePart) {
-            matchLink = _.filter(matchesArray, (match:Match) => {
-                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):ConnectRelationModel {
-
-        if (!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)) {
-            return null;
-        }
-        let linkModel:Array<CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy);
-
-        let possibleRelations:Array<Match> = 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 ConnectRelationModel(fromNode.data(), toNode.data(), 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:Match = 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);
-    };
-
-    private handlePathLink(cy:Cy.Instance, event:Cy.EventObject) {
-        let linkData = event.cyTarget.data();
-        let selectedPathId = linkData.pathId;
-        let pathEdges = cy.collection(`[pathId='${selectedPathId}']`);
-        if (pathEdges.length > 1) {
-            setTimeout(() => {
-                pathEdges.select();
-            }, 0);
-        }
-    }
-
-    private handleVLLink(event:Cy.EventObject) {
-        let vl:Cy.CollectionNodes = event.cyTarget[0].target('.vl-node');
-        let connectedEdges:Cy.CollectionEdges = vl.connectedEdges(`[type!="${CompositionCiServicePathLink.LINK_TYPE}"]`);
-        if (vl.length && connectedEdges.length > 1) {
-            setTimeout(() => {
-                vl.select();
-                connectedEdges.select();
-            }, 0);
-        }
-    }
-
-
-    /**
-     * Handles click event on links.
-     * If one edge selected: do nothing.
-     * Two or more edges: first click - select all, secondary click - select single.
-     * @param cy
-     * @param event
-     */
-    public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) {
-        if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) {
-            cy.$(':selected').unselect();
-        } else {
-            if (event.cyTarget[0].data().type === CompositionCiServicePathLink.LINK_TYPE) {
-                this.handlePathLink(cy, event);
-            }
-            else {
-                this.handleVLLink(event);
-            }
-        }
-    }
-
-
-    /**
-     * 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.clientX, event.originalEvent.clientY);
-        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
deleted file mode 100644
index c6c732b7df..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, NodesFactory, ComponentInstance, CompositionCiNodeVl, IAppMenu, AssetPopoverObj, Service } 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";
-import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import { ServiceGenericResponse } from "app/ng2/services/responses/service-generic-response";
-import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
-/**
- * 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 serviceService: ServiceServiceNg2) {
-
-    }
-
-    /**
-     * 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();
-        })
-    };
-
-
-    public highlightMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string) => {
-
-        cy.batch(() => {
-            cy.nodes("[name !@^= '" + nameToMatch + "']").style({ 'background-image-opacity': 0.4 });
-            cy.nodes("[name @^= '" + nameToMatch + "']").style({ 'background-image-opacity': 1 });
-        })
-
-    }
-
-    //Returns all nodes whose name starts with searchTerm
-    public getMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string): Cy.CollectionNodes => {
-        return cy.nodes("[name @^= '" + nameToMatch + "']");
-    };
-
-    /**
-     * 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);
-            }
-
-            // check whether there is a service path going through this node, and if so clean it from the graph.
-            let nodeId = nodeToDelete.data().id;
-            let connectedPathLinks = cy.collection(`[type="${CompositionCiServicePathLink.LINK_TYPE}"][source="${nodeId}"], [type="${CompositionCiServicePathLink.LINK_TYPE}"][target="${nodeId}"]`);
-            _.forEach(connectedPathLinks, (link, key) => {
-                cy.remove(`[pathId="${link.data().pathId}"]`);
-            });
-
-            // update service path list
-            this.serviceService.getComponentCompositionData(component).subscribe((response: ServiceGenericResponse) => {
-                (<Service>component).forwardingPaths = response.forwardingPaths;
-            });
-
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, nodeId);
-
-            //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')
-        );
-
-    };
-
-    /**
-     * 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);
-        }
-    }
-
-}
-
-
-CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService', 'ServiceServiceNg2' /*, '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
deleted file mode 100644
index 10d0d42922..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { 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 'sdc-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/composition-graph-service-path-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts
deleted file mode 100644
index 48befef22d..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { LoaderService } from "app/services";
-import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils";
-import { ICompositionGraphScope } from "../composition-graph.directive";
-import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
-import { Service } from "../../../../models/components/service";
-import { ForwardingPath } from "app/models/forwarding-path";
-import { ForwardingPathLink } from "app/models/forwarding-path-link";
-import { CompositionCiServicePathLink } from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import { CommonGraphUtils } from "app/directives/graphs-v2/common/common-graph-utils";
-
-export class ServicePathGraphUtils {
-
-    constructor(
-        private loaderService: LoaderService,
-        private generalGraphUtils: CompositionGraphGeneralUtils,
-        private serviceService: ServiceServiceNg2,
-        private commonGraphUtils: CommonGraphUtils
-    ) { }
-
-    public deletePathsFromGraph(cy: Cy.Instance, service: Service) {
-        cy.remove(`[type="${CompositionCiServicePathLink.LINK_TYPE}"]`);
-    }
-
-    public drawPath(cy: Cy.Instance, forwardingPath: ForwardingPath, service: Service) {
-        let pathElements = forwardingPath.pathElements.listToscaDataDefinition;
-
-        _.forEach(pathElements, (link: ForwardingPathLink) => {
-            let data: CompositionCiServicePathLink = new CompositionCiServicePathLink(link);
-            data.source = _.find(
-                service.componentInstances,
-                instance => instance.name === data.forwardingPathLink.fromNode
-            ).uniqueId;
-            data.target = _.find(
-                service.componentInstances,
-                instance => instance.name === data.forwardingPathLink.toNode
-            ).uniqueId;
-            data.pathId = forwardingPath.uniqueId;
-            data.pathName = forwardingPath.name;
-            this.commonGraphUtils.insertServicePathLinkToGraph(cy, data);
-        });
-    }
-
-    public createOrUpdateServicePath = (scope: ICompositionGraphScope, path: any): void => {
-        let service = <Service>scope.component;
-        this.loaderService.showLoader('composition-graph');
-
-        let onSuccess: (response: ForwardingPath) => void = (response: ForwardingPath) => {
-
-            service.forwardingPaths[response.uniqueId] = response;
-            scope.selectedPathId = response.uniqueId;
-        };
-
-        this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
-            () => this.serviceService.createOrUpdateServicePath(service, path).subscribe(onSuccess),
-            () => this.loaderService.hideLoader('composition-graph')
-        );
-    };
-}
-
-ServicePathGraphUtils.$inject = [
-    'LoaderService',
-    'CompositionGraphGeneralUtils',
-    'ServiceServiceNg2',
-    'CommonGraphUtils'
-];
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
deleted file mode 100644
index 159a1c8347..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-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 '@bardit/cytoscape-expand-collapse';
-import { AngularJSBridge } from "../../../services/angular-js-bridge-service";
-
-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.modules) {
-                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.modules) { // Init module nodes
-            _.each(component.modules, (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.modules, 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');
-        const imagePath = AngularJSBridge.getAngularConfig().imagesPath;
-        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: imagePath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
-            collapseCueImage: imagePath + '/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, scope.component.getRelationRequirementCapability.bind(scope.component));
-        this._cy.collapseAll();
-        this.registerGraphEvents();
-
-        scope.$on('$destroy', () => {
-            this._cy.destroy();
-            _.forEach(GRAPH_EVENTS, (event) => {
-                this.eventListenerService.unRegisterObserver(event);
-            });
-        });
-
-    };
-
-    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
deleted file mode 100644
index 1bca4bb531..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
- 
-<div  class="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
deleted file mode 100644
index f83ee8a891..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less
+++ /dev/null
@@ -1,14 +0,0 @@
-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/image-creator/image-creator.service.ts b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
deleted file mode 100644
index 19c86a254b..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-export interface ICanvasImage {
-    src: string;
-    width: number
-    height: number;
-    x: number;
-    y: number;
-}
-
-'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);
-    }
-
-    /**
-     * Create an image composed of different image layers
-     * @param canvasImages
-     * @param canvasWidth 
-     * @param canvasHeight 
-     * returns a PROMISE
-     */
-    getMultiLayerBase64Image(canvasImages: ICanvasImage[], canvasWidth?: number, canvasHeight?: number): ng.IPromise<string> {
-        const deferred = this.$q.defer<string>();
-
-        if (canvasImages && canvasImages.length === 0) {
-            return null;
-        }
-
-        //If only width was set, use it for height, otherwise use first canvasImage height
-        canvasHeight = canvasHeight || canvasImages[0].height;
-        canvasWidth = canvasWidth || canvasImages[0].width;
-
-        const images = [];
-        let imagesLoaded = 0;
-        const onImageLoaded = () => {
-            imagesLoaded++;
-            if (imagesLoaded < canvasImages.length) {
-                return;
-            }
-            this._canvas.setAttribute('width', canvasWidth.toString());
-            this._canvas.setAttribute('height', canvasHeight.toString());
-            const canvasCtx = this._canvas.getContext('2d');
-            canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-            images.forEach((image, index) => {
-                const canvasImage = canvasImages[index];
-                canvasCtx.drawImage(image, canvasImage.x, canvasImage.y, canvasImage.width, canvasImage.height);
-            });
-            let base64Image = this._canvas.toDataURL();
-            deferred.resolve(base64Image);
-        };
-        canvasImages.forEach(canvasImage => {
-            let image = new Image();
-            image.onload = onImageLoaded;
-            image.src = canvasImage.src;
-            images.push(image);
-        });
-        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
deleted file mode 100644
index 26c042611c..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-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
deleted file mode 100644
index 01ddb146ac..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ /dev/null
@@ -1,338 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-import * as _ from "lodash";
-import { Component, IAppMenu, LeftPanelModel, NodesFactory, LeftPaletteComponent, CompositionCiNodeBase, ComponentInstance, Point } 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 'sdc-angular-dragdrop';
-import { LeftPaletteLoaderService } from "../../../services/components/utils/composition-left-palette-service";
-import { Resource } from "app/models/components/resource";
-import { ComponentType } from "app/utils/constants";
-import { LeftPaletteMetadataTypes } from "../../../models/components/displayComponent";
-import { IDirectiveLinkFn, IScope } from "angular";
-
-
-interface IPaletteScope extends IScope {
-    components: Array<LeftPaletteComponent>;
-    currentComponent: Component;
-    model: any;
-    displaySortedCategories: any;
-    expandedSection: string;
-    dragElement: JQuery;
-    dragbleNode: {
-        event: JQueryEventObject,
-        components: LeftPaletteComponent,
-        ui: any
-    }
-
-    addInstanceClick: () => void; // added code
-    onPopupMouseOver: () => void  // added code
-    onPopupMouseOut: () => void   // added code
-
-    sectionClick: (section: string) => void;
-    searchComponents: (searchText: string) => void;
-    onMouseOver: (displayComponent: LeftPaletteComponent, elem: HTMLElement) => 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: IDirectiveLinkFn = (scope: IPaletteScope, el: JQuery) => {
-        this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent);
-        this.nodeHtmlSubstitute = $('<div class="node-substitute"><span></span><img /></div>');
-        el.append(this.nodeHtmlSubstitute);
-        this.registerEventListenerForLeftPalette(scope);
-
-        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 => {
-        this.EventListenerService.registerObserverCallback(EVENTS.LEFT_PALETTE_UPDATE_EVENT, () => {
-            this.updateLeftPanelDisplay(scope);
-        });
-    };
-
-    private unRegisterEventListenerForLeftPalette = (scope: IPaletteScope): void => {
-        this.EventListenerService.unRegisterObserver(EVENTS.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) {
-        scope.sectionClick = (section: string) => {
-            if (section === scope.expandedSection) {
-                scope.expandedSection = '';
-                return;
-            }
-            scope.expandedSection = section;
-        };
-
-        scope.onMouseOver = (displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
-            if (this.isGroupOrPolicy(displayComponent)) {
-                this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, scope.currentComponent, displayComponent, sectionElem);
-            } else {
-                if (scope.isOnDrag) {
-                    return;
-                }
-                scope.isOnDrag = true;
-                this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent);
-                this.$log.debug('palette::onMouseOver:: fired');
-            }
-
-        };
-
-        scope.onMouseOut = (displayComponent: LeftPaletteComponent) => {
-            if (this.isGroupOrPolicy(displayComponent)) {
-                this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL);
-            } else {
-                scope.isOnDrag = false;
-                this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
-            }
-        };
-    }
-
-    private isGroupOrPolicy(component: LeftPaletteComponent): boolean {
-        if (component &&
-            (component.categoryType === LeftPaletteMetadataTypes.Group ||
-                component.categoryType === LeftPaletteMetadataTypes.Policy)) {
-            return true;
-        }
-        return false;
-    }
-
-    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);
-        //remove the container component  from the list
-        let componentTempToDisplay = angular.copy(scope.components);
-        componentTempToDisplay = _.remove(componentTempToDisplay, function (leftPalettecomponent) {
-            return leftPalettecomponent.invariantUUID !== scope.currentComponent.invariantUUID;
-        });
-        scope.model = this.initLeftPanel(componentTempToDisplay, 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 || this.isGroupOrPolicy(displayComponent)) {
-                return;
-            }
-
-            let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent), (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),
-                (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.toLowerCase();
-                        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
deleted file mode 100644
index 1fed02782f..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
- 
-<div class="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, $event.currentTarget)"
-                 data-ng-mouseleave="!isViewOnly && onMouseOut(component)"
-                 data-drag="!isViewOnly && component.isDraggable"
-                 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 small {{component.iconClass}}"
-                         data-tests-id="leftbar-section-content-item-{{component.displayName}}">
-                        <div class="{{component.certifiedIconClass}}" uib-tooltip="Not certified"
-                             tooltip-class="uib-custom-tooltip" tooltip-placement="bottom" tooltip-popup-delay="700">
-                        </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"
-                        uib-tooltip="{{component.type}}" tooltip-class="uib-custom-tooltip"
-                        tooltip-placement="top" tooltip-popup-delay="700"> 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
deleted file mode 100644
index 85657a43a5..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.less
+++ /dev/null
@@ -1,92 +0,0 @@
-.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/loader/loader-directive.html b/catalog-ui/src/app/directives/loader/loader-directive.html
index 3842721c77..abac6702ba 100644
--- a/catalog-ui/src/app/directives/loader/loader-directive.html
+++ b/catalog-ui/src/app/directives/loader/loader-directive.html
@@ -13,9 +13,8 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
+ <div data-ng-if="display" data-tests-id="loader">
  
- 
-<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/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..30b8c248c9
--- /dev/null
+++ b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts
@@ -0,0 +1,209 @@
+/*-
+ * ============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 {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_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
index 25e1891790..792919172e 100644
--- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
@@ -13,8 +13,8 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
- 
+
+
 <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>
@@ -30,71 +30,89 @@
             </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]}}">
+        <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]"
+            </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-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-readonly="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>
+                          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)}">
+                    <!-- Has Constraints -->
+
+                    <!--<select class="i-sdc-form-select"-->
+                    <!--ng-if="(property.constraints)"-->
+                    <!--data-ng-disabled="readOnly"-->
+                    <!--name="{{fieldsPrefixName+property.name}}"-->
+                    <!--data-ng-change="onValueChange(property.name,'constraintsChange')"-->
+                    <!--data-ng-model="valueObjRef[property.name]"-->
+                    <!--&gt;-->
+                    <!--&lt;!&ndash; Get the default value in case exist &ndash;&gt;-->
+                    <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>-->
+                    <!--{{valueObjRef[property.name]}}-->
+                    <!--</option> -->
+                    <!--&lt;!&ndash; add all constratint to Select list &ndash;&gt;-->
+                    <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >-->
+                    <!--{{value}}-->
+                    <!--</option> -->
+                    <!--</select>-->
+                    <!-- Input without constraints -->
+                    <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-readonly="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 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.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
index eed209d438..ff2344534a 100644
--- 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
@@ -42,6 +42,7 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope {
     expand:boolean;
     expanded:boolean;
     dataTypesService:DataTypesService;
+    constraints:string[];
 
     expandAndCollapse():void;
     getValidationPattern(type:string):RegExp;
@@ -53,11 +54,15 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope {
 
 export class DataTypeFieldsStructureDirective implements ng.IDirective {
 
+    
+
     constructor(private DataTypesService:DataTypesService,
                 private PropertyNameValidationPattern:RegExp,
                 private ValidationUtils:ValidationUtils) {
     }
 
+    constraints: string[];
+
     scope = {
         valueObjRef: '=',
         typeName: '=',
@@ -67,6 +72,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
         defaultValue: '@',
         //     types: '=',
         expandByDefault: '='
+        
     };
 
     restrict = 'E';
@@ -93,6 +99,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
         return defaultValue;
     };
 
+
     private initDataOnScope = (scope:any, $attr:any):void => {
         scope.dataTypesService = this.DataTypesService;
         scope.dataTypeProperties = this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName);
@@ -149,7 +156,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
             return !value || this.ValidationUtils.validateIntRange(value);
         };
 
-        scope.onValueChange = (propertyName:string, type:string):void => {
+        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]);
@@ -157,7 +164,10 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
         };
 
         scope.inputOnValueChange = (property:any) => {
-
+            if (property.constraints){
+                // this.constraints = property.constraints[0].validValues;
+            }
+            
             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)));
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
index 2363f57d80..661514f799 100644
--- 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
@@ -20,7 +20,7 @@
         <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')"
+                   ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
                    data-ng-disabled="readOnly"
                    data-ng-model="listNewItem.value"
                    type="text"
@@ -34,13 +34,32 @@
                    autofocus />
             <select class="i-sdc-form-select"
                     data-tests-id="listNewItem{{fieldsPrefixName}}"
-                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    ng-if="!constraints && (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>
+
+
+            <select class="i-sdc-form-select"
+                data-tests-id="constraints"
+                ng-if="constraints"
+                data-ng-disabled="readOnly"
+                data-ng-model="listNewItem.value">
+                <!-- Get the default value in case exist -->
+                <option value = "{{listNewItem.value}" name = "{{listNewItem.value}}" hidden selected>
+                        {{listNewItem.value}}
+                </option> 
+                <!-- add all constratint to Select list -->
+                <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}">
+                    {{value}}
+                </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>
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
index f2288cfd07..997e28dabc 100644
--- 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
@@ -37,6 +37,8 @@ export interface ITypeListScope extends ng.IScope {
     listDefaultValue:any;
     listNewItem:any;
     maxLength:number;
+    
+    constraints:string[];
 
     getValidationPattern(type:string):RegExp;
     validateIntRange(value:string):boolean;
@@ -49,7 +51,7 @@ export class TypeListDirective implements ng.IDirective {
 
     constructor(private DataTypesService:DataTypesService,
                 private PropertyNameValidationPattern:RegExp,
-                private ValidationUtils:ValidationUtils) {
+                private ValidationUtils:ValidationUtils) {  
     }
 
     scope = {
@@ -59,7 +61,8 @@ export class TypeListDirective implements ng.IDirective {
         fieldsPrefixName: '=',//prefix for form fields names
         readOnly: '=',//is form read only
         defaultValue: '@',//this list default value
-        maxLength: '='
+        maxLength: '=',
+        constraints: '='
     };
 
     restrict = 'E';
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
index aa03cecb17..55a414e729 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -41,8 +41,9 @@
         </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')"
+                   ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
                    data-ng-readonly="readOnly"
                    data-ng-model="valueObjRef[mapKeys[$index]]"
                    type="text"
@@ -57,7 +58,7 @@
                    autofocus />
             <select class="i-sdc-form-select"
                     data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}"
-                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
                     data-ng-disabled="readOnly"
                     name="mapValue{{fieldsPrefixName}}{{$index}}"
                     data-ng-model="valueObjRef[mapKeys[$index]]"
@@ -65,6 +66,24 @@
                 <option value="true">true</option>
                 <option value="false">false</option>
             </select>
+
+
+            <select class="i-sdc-form-select"
+                data-tests-id="constraints"
+                ng-if="constraints"
+                data-ng-disabled="readOnly"
+                data-ng-model="valueObjRef[mapKeys[$index]]">
+
+                <!-- Get the saved value for the relevant key -->
+                <option ng-if = "valueObjRef[mapKeys[$index]]" value = "{{valueObjRef[mapKeys[$index]]}}" name = "{{valueObjRef[mapKeys[$index]]}}" hidden selected>
+                        {{valueObjRef[mapKeys[$index]]}}
+                </option> 
+                <!-- add all constratint to Select list -->
+                <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}">
+                    {{value}}
+                </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>
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
index 5718cdd9b5..080c13b87f 100644
--- 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
@@ -39,6 +39,7 @@ export interface ITypeMapScope extends ng.IScope {
     readOnly:boolean;
     mapDefaultValue:any;
     maxLength:number;
+    constraints:string[];
 
     getValidationPattern(type:string):RegExp;
     validateIntRange(value:string):boolean;
@@ -65,7 +66,9 @@ export class TypeMapDirective implements ng.IDirective {
         fieldsPrefixName: '=',//prefix for form fields names
         readOnly: '=',//is form read only
         defaultValue: '@',//this map default value
-        maxLength: '='
+        maxLength: '=',
+        constraints: '='
+        
     };
 
     restrict = 'E';
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
index fbcbb396f4..f6bd1ca87c 100644
--- 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
@@ -90,6 +90,7 @@
                             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>
diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
index 1367906e21..0200e3d510 100644
--- a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
+++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
@@ -21,6 +21,7 @@
 'use strict';
 import {User, IUser, IAppConfigurtaion, IUserProperties} from "app/models";
 import { UserService } from "../../ng2/services/user.service";
+import { AuthenticationService } from "app/ng2/services/authentication.service";
 export interface IUserHeaderDetailsScope extends ng.IScope {
     iconUrl:string;
     user:IUser;
@@ -29,7 +30,7 @@ export interface IUserHeaderDetailsScope extends ng.IScope {
 
 export class UserHeaderDetailsDirective implements ng.IDirective {
 
-    constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService) {
+    constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService, private authService: AuthenticationService) {
     }
 
     scope = {
@@ -46,7 +47,7 @@ export class UserHeaderDetailsDirective implements ng.IDirective {
 
         scope.initUser = ():void => {
             let defaultUserId:string;
-            let userInfo:IUserProperties = this.userService.getLoggedinUser();
+            let userInfo:IUserProperties = this.authService.getLoggedinUser();
             if (!userInfo) {
                 defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix];
                 this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => {
@@ -59,10 +60,10 @@ export class UserHeaderDetailsDirective implements ng.IDirective {
         scope.initUser();
     };
 
-    public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService)=> {
-        return new UserHeaderDetailsDirective($http, sdcConfig, userService);
+    public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService, authService:AuthenticationService)=> {
+        return new UserHeaderDetailsDirective($http, sdcConfig, userService, authService);
     };
 
 }
 
-UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2'];
+UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2', 'AuthenticationServiceNg2'];
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
index 878de11e91..58743081fb 100644
--- a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
@@ -70,7 +70,7 @@ export class ExpandCollapseDirective implements ng.IDirective {
             $elem.addClass('expanded');
             scope.collapsed = false;
 
-            let element = $(scope.expandedSelector)[0];
+            let element = <HTMLElement>$(scope.expandedSelector)[0];
             let prevWidth = element.style.height;
             element.style.height = 'auto';
             let endWidth = getComputedStyle(element).height;
@@ -92,7 +92,7 @@ export class ExpandCollapseDirective implements ng.IDirective {
             $elem.removeClass('expanded');
             scope.collapsed = true;
 
-            let element = $(scope.expandedSelector)[0];
+            let element = <HTMLElement>$(scope.expandedSelector)[0];
             element.style.height = getComputedStyle(element).height;
             element.style.transition = 'height .5s ease-in-out';
             element.offsetHeight; // force repaint
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
index 098134aaae..0c84af939b 100644
--- a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
+++ b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
@@ -43,7 +43,7 @@ export class SmartTooltipDirective implements ng.IDirective {
         }
 
         $elem.bind('mouseenter', () => {
-            if ($elem[0].offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) {
+            if ((<HTMLElement>$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']);
diff --git a/catalog-ui/src/app/filters/category-type-filter.ts b/catalog-ui/src/app/filters/category-type-filter.ts
index 763b4a94e2..d02c0b9d85 100644
--- a/catalog-ui/src/app/filters/category-type-filter.ts
+++ b/catalog-ui/src/app/filters/category-type-filter.ts
@@ -20,7 +20,8 @@
 
 import * as _ from "lodash";
 import {ComponentType} from "../utils/constants";
-import {CacheService} from "../services/cache-service";
+import {CacheService} from "app/services-ng2";
+
 export class CategoryTypeFilter {
 
     static $inject = ['Sdc.Services.CacheService'];
diff --git a/catalog-ui/src/app/filters/resource-type-filter.ts b/catalog-ui/src/app/filters/resource-type-filter.ts
index 51bf071b41..ca61ee1cef 100644
--- a/catalog-ui/src/app/filters/resource-type-filter.ts
+++ b/catalog-ui/src/app/filters/resource-type-filter.ts
@@ -18,7 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 
-import {CacheService} from "../services/cache-service";
+import {CacheService} from "app/services-ng2";
 
 export class ResourceTypeFilter {
     static '$inject' = ['Sdc.Services.CacheService'];
diff --git a/catalog-ui/src/app/models.ts b/catalog-ui/src/app/models.ts
index ad1da27c62..91fa4a7f33 100644
--- a/catalog-ui/src/app/models.ts
+++ b/catalog-ui/src/app/models.ts
@@ -44,6 +44,8 @@ export * from './models/componentsInstances/serviceInstance';
 export * from './models/componentsInstances/serviceProxyInstance';
 export * from './models/graph/zones/group-instance';
 export * from './models/graph/zones/policy-instance';
+export * from './models/graph/zones/zone';
+export * from './models/graph/zones/zone-instance';
 export * from './models/csar-component';
 //export * from './models/data-type-properties';
 export * from './models/properties-inputs/property-be-model';
@@ -108,15 +110,19 @@ export * from './models/tooltip-data';
 export * from './models/user';
 export * from './models/validate';
 export * from './models/component-metadata';
+export * from './models/components-array';
 export * from './models/modal';
 export * from './models/button';
 export * from './models/wizard-step';
 export * from './models/radio-button';
 export * from './models/filter-properties-assignment-data';
 export * from './models/properties-inputs/input-be-model';
+export * from './models/catalogSelector';
+export * from './models/componentsInstances/fullComponentInstance';
+export * from './models/catalogSelector';
+export * from './models/componentsInstances/fullComponentInstance';
 export * from './models/service-instance-properties-and-interfaces';
 export * from './models/relationship-types';
 export * from './models/tosca-presentation';
 export * from './models/node-types';
-export * from './models/capability-types';
-
+export * from './models/capability-types';
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/activity.ts b/catalog-ui/src/app/models/activity.ts
index 5d37e0f608..768ef0ae85 100644
--- a/catalog-ui/src/app/models/activity.ts
+++ b/catalog-ui/src/app/models/activity.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,30 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-/**
- * Created by obarda on 19/11/2015.
- */
 'use strict';
 
 /*this is in uppercase because of the server response*/
-export class Activity {
-    TIMESTAMP:string;
-    ACTION:string;
-    MODIFIER:string;
-    STATUS:string;
-    DESC:string;
-    COMMENT:string;
-    //custom data
-    public dateFormat:string;
-
-    constructor() {
-    }
-
-    public toJSON = ():any => {
-        this.dateFormat = undefined;
-        return this;
-    };
-
+export interface Activity {
+    TIMESTAMP: string;
+    ACTION: string;
+    MODIFIER: string;
+    STATUS: string;
+    COMMENT: string;
 }
-
-
diff --git a/catalog-ui/src/app/models/app-config.ts b/catalog-ui/src/app/models/app-config.ts
index 4754cbaa01..a31c31f4cc 100644
--- a/catalog-ui/src/app/models/app-config.ts
+++ b/catalog-ui/src/app/models/app-config.ts
@@ -3,7 +3,6 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * Modifications Copyright (C) 2019 Nokia. 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.
@@ -20,225 +19,214 @@
  */
 
 'use strict';
+// tslint:disable-next-line:interface-name
 export interface IApi {
-    baseUrl:string;
-
-    //***** NEW API *******//
-    GET_component:string;
-    PUT_component:string;
-    GET_component_validate_name:string;
-    POST_changeLifecycleState:string;
-    component_api_root:string;
-    //*********//
-
-    GET_user:string;
-    GET_user_authorize:string;
-    GET_all_users:string;
+    baseUrl: string;
+
+    GET_SDC_Setup_Data: string;
+    GET_component: string;
+    PUT_component: string;
+    GET_component_validate_name: string;
+    POST_changeLifecycleState: string;
+    component_api_root: string;
+    GET_user: string;
+    GET_user_authorize: string;
+    GET_all_users: string;
     POST_create_user;
     DELETE_delete_user;
     POST_edit_user_role;
-    GET_resource:string;
-    GET_resources_latestversion_notabstract:string;
-    GET_resources_certified_not_abstract:string;
-    GET_resources_certified_abstract:string;
-    PUT_resource:string;
-    GET_resource_property:string;
-    GET_resource_artifact:string;
-    GET_download_instance_artifact:string;
-    POST_instance_artifact:string;
-    GET_resource_additional_information:string;
-    GET_service_artifact:string;
-    GET_resource_interface_artifact:string;
-    GET_resource_api_artifact:string;
-    GET_resource_validate_name:string;
-    GET_resource_artifact_types:string;
-    GET_activity_log:string;
-    GET_configuration_ui:string;
-    GET_plugins_configuration:string;
-    GET_plugin_online_state:string;
-    GET_service:string;
-    GET_ecomp_menu_items:string;
-    GET_service_validate_name:string;
-    GET_service_distributions:string;
-    GET_service_distributions_components:string;
-    POST_service_distribution_deploy:string;
-    GET_element:string;
-    GET_catalog:string;
-    GET_resource_category:string;
-    GET_service_category:string;
-    resource_instance:string;
-    GET_resource_instance_property:string;
-    GET_relationship:string;
-    GET_lifecycle_state_resource:string;
-    GET_lifecycle_state_CHECKIN:string;
-    GET_lifecycle_state_CERTIFICATIONREQUEST:string;
-    GET_lifecycle_state_UNDOCHECKOUT:string;
-    root:string;
-    no_proxy_root:string;
-    PUT_service:string;
-    GET_download_artifact:string;
-    GET_SDC_Version:string;
-    GET_categories:string;
-    POST_category:string;
-    POST_subcategory:string;
-    POST_change_instance_version:string;
-    GET_requirements_capabilities:string;
-    GET_onboarding:string;
-    GET_component_from_csar_uuid:string;
-    POST_GAB_Search:string;
-    kibana:string;
-    services_api_root:string;
-}
-
+    GET_resource: string;
+    GET_resources_latestversion_notabstract: string;
+    GET_resources_certified_not_abstract: string;
+    GET_resources_certified_abstract: string;
+    PUT_resource: string;
+    GET_resource_property: string;
+    GET_resource_artifact: string;
+    GET_download_instance_artifact: string;
+    POST_instance_artifact: string;
+    GET_resource_additional_information: string;
+    GET_service_artifact: string;
+    GET_resource_interface_artifact: string;
+    GET_resource_api_artifact: string;
+    GET_resource_validate_name: string;
+    GET_resource_artifact_types: string;
+    GET_activity_log: string;
+    GET_configuration_ui: string;
+    GET_plugins_configuration: string;
+    GET_plugin_online_state: string;
+    GET_service: string;
+    GET_ecomp_menu_items: string;
+    GET_service_validate_name: string;
+    GET_service_distributions: string;
+    GET_service_distributions_components: string;
+    POST_service_distribution_deploy: string;
+    GET_element: string;
+    GET_catalog: string;
+    GET_resource_category: string;
+    GET_service_category: string;
+    resource_instance: string;
+    GET_resource_instance_property: string;
+    GET_relationship: string;
+    GET_lifecycle_state_resource: string;
+    GET_lifecycle_state_CHECKIN: string;
+    GET_lifecycle_state_UNDOCHECKOUT: string;
+    root: string;
+    no_proxy_root: string;
+    PUT_service: string;
+    GET_download_artifact: string;
+    GET_SDC_Version: string;
+    GET_categories: string;
+    POST_category: string;
+    POST_subcategory: string;
+    POST_change_instance_version: string;
+    GET_requirements_capabilities: string;
+    GET_onboarding: string;
+    GET_component_from_csar_uuid: string;
+    POST_GAB_Search: string;
+    kibana: string;
+    services_api_root: string;
+    uicache_root: string;
+    GET_uicache_catalog: string;
+    GET_uicache_left_palette: string;
+}
+
+// tslint:disable-next-line:interface-name
 export interface ILogConfig {
-    minLogLevel:string;
-    prefix:string;
+    minLogLevel: string;
+    prefix: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface ICookie {
-    junctionName:string;
-    prefix:string;
-    userIdSuffix:string;
-    userFirstName:string;
-    userLastName:string;
-    userEmail:string;
-}
-export interface IUserTypes {
-    admin:any;
-    designer:any;
-    tester:any;
+    junctionName: string;
+    prefix: string;
+    userIdSuffix: string;
+    userFirstName: string;
+    userLastName: string;
+    userEmail: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfigStatuses {
-    inDesign:IConfigStatus;
-    readyForCertification:IConfigStatus;
-    inCertification:IConfigStatus;
-    certified:IConfigStatus;
-    distributed:IConfigStatus;
+    inDesign: IConfigStatus;
+    certified: IConfigStatus;
+    distributed: IConfigStatus;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfigStatus {
-    name:string;
-    values:Array<string>;
+    name: string;
+    values: string[];
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfigRoles {
-    ADMIN:IConfigRole;
-    DESIGNER:IConfigRole;
-    TESTER:IConfigRole;
-    OPS:IConfigRole;
-    GOVERNOR:IConfigRole;
+    ADMIN: IConfigRole;
+    DESIGNER: IConfigRole;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfigRole {
-    changeLifecycleStateButtons:any;
-}
-
-export interface IConfigState {
-    NOT_CERTIFIED_CHECKOUT:Array<IConfigDistribution>;
-    NOT_CERTIFIED_CHECKIN:Array<IConfigDistribution>;
-    READY_FOR_CERTIFICATION:Array<IConfigDistribution>;
-    CERTIFICATION_IN_PROGRESS:Array<IConfigDistribution>;
-    CERTIFIED:Array<IConfigDistribution>;
-}
-
-export interface IConfigDistribution {
-    DISTRIBUTION_NOT_APPROVED:Array<ConfigMenuItem>;
-    DISTRIBUTION_APPROVED:Array<ConfigMenuItem>;
-    DISTRIBUTED:Array<ConfigMenuItem>;
-    DISTRIBUTION_REJECTED:Array<ConfigMenuItem>;
+    changeLifecycleStateButtons: any;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfirmationMessage {
-    showComment:boolean;
-    title:string;
-    message:string;
+    showComment: boolean;
+    title: string;
+    message: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfirmationMessages {
-    checkin:IConfirmationMessage;
-    checkout:IConfirmationMessage;
-    certify:IConfirmationMessage;
-    failCertification:IConfirmationMessage;
-    certificationRequest:IConfirmationMessage;
-    approve:IConfirmationMessage;
-    reject:IConfirmationMessage;
+    checkin: IConfirmationMessage;
+    checkout: IConfirmationMessage;
+    certify: IConfirmationMessage;
+    failCertification: IConfirmationMessage;
+    certificationRequest: IConfirmationMessage;
+    approve: IConfirmationMessage;
+    reject: IConfirmationMessage;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IAlertMessage {
-    title:string;
-    message:string;
+    title: string;
+    message: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IAlertMessages {
-    deleteInstance:IAlertMessage;
-    exitWithoutSaving:IConfirmationMessage;
+    deleteInstance: IAlertMessage;
+    exitWithoutSaving: IConfirmationMessage;
+    okButton: string;
 }
 
 class ConfigMenuItem {
-    text:string;
-    action:string;
-    url:string;
-    disable:boolean = false;
+    text: string;
+    action: string;
+    url: string;
+    disable = false;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IAppConfigurtaion {
-    environment:string;
-    api:IApi;
-    hostedApplications:Array<IHostedApplication>;
-    resourceTypesFilter:IResourceTypesFilter;
-    logConfig:ILogConfig;
-    cookie:ICookie;
-    imagesPath:string;
-    toscaFileExtension:string;
-    csarFileExtension:string;
-    testers:Array<ITester>
-    tutorial:any;
-    roles:Array<string>;
-    cpEndPointInstances:Array<string>;
-    openSource:boolean;
-    showOutlook:boolean;
-    validationConfigPath:string;
-}
-
+    environment: string;
+    api: IApi;
+    hostedApplications: IHostedApplication[];
+    resourceTypesFilter: IResourceTypesFilter;
+    logConfig: ILogConfig;
+    cookie: ICookie;
+    imagesPath: string;
+    toscaFileExtension: string;
+    csarFileExtension: string;
+    testers: ITester[];
+    tutorial: any;
+    roles: string[];
+    cpEndPointInstances: string[];
+    openSource: boolean;
+    showOutlook: boolean;
+    validationConfigPath: string;
+}
+
+// tslint:disable-next-line:interface-name
 export interface IResourceTypesFilter {
-    resource:Array<string>;
+    resource: string[];
 }
 
+// tslint:disable-next-line:interface-name
 export interface IHostedApplication {
-    moduleName:string;
-    navTitle:string;
-    defaultState:string;
-    exists?:boolean;
-    state:IHostedApplicationState;
+    moduleName: string;
+    navTitle: string;
+    defaultState: string;
+    exists?: boolean;
+    state: IHostedApplicationState;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IHostedApplicationState {
-    name:string;
-    url:string;
-    relativeHtmlPath:string;
-    controllerName:string;
+    name: string;
+    url: string;
+    relativeHtmlPath: string;
+    controllerName: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface ITester {
-    email:string;
-}
-
-export interface IComponentType {
-    RESOURCE:any;
-    SERVICE:any;
+    email: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IAppMenu {
-    roles:IConfigRoles;
-    confirmationMessages:IConfirmationMessages;
-    alertMessages:IAlertMessages;
-    statuses:IConfigStatuses;
-    catalogMenuItem:any;
-    categoriesDictionary:any;
-    canvas_buttons:Object;
-    component_workspace_menu_option:any;
-    LifeCycleStatuses:any;
-    DistributionStatuses:any;
-    ChangeLifecycleStateButton:any;
+    roles: IConfigRoles;
+    confirmationMessages: IConfirmationMessages;
+    alertMessages: IAlertMessages;
+    statuses: IConfigStatuses;
+    catalogMenuItem: any;
+    categoriesDictionary: any;
+    // tslint:disable-next-line:ban-types
+    canvas_buttons: Object;
+    component_workspace_menu_option: any;
+    LifeCycleStatuses: any;
+    DistributionStatuses: any;
+    ChangeLifecycleStateButton: any;
 }
diff --git a/catalog-ui/src/app/models/artifacts.ts b/catalog-ui/src/app/models/artifacts.ts
index 27c0dd6c49..7b93470de3 100644
--- a/catalog-ui/src/app/models/artifacts.ts
+++ b/catalog-ui/src/app/models/artifacts.ts
@@ -69,11 +69,13 @@ export class ArtifactModel {
     apiUrl:string;
     heatParameters:Array<HeatParameterModel>;
     generatedFromId:string;
+    isFromCsar: boolean;
 
     //custom properties
     selected:boolean;
     originalDescription:string;
     envArtifact:ArtifactModel;
+    allowDeleteAndUpdate: boolean;
 
     constructor(artifact?:ArtifactModel) {
         if (artifact) {
@@ -97,10 +99,11 @@ export class ArtifactModel {
             this["Content-MD5"] = artifact["Content-MD5"];
             this.artifactChecksum = artifact.artifactChecksum;
             this.apiUrl = artifact.apiUrl;
-            this.heatParameters = _.sortBy(artifact.heatParameters, 'name');
+            this.heatParameters = _.sortBy(_.cloneDeep(artifact.heatParameters), 'name');
             this.generatedFromId = artifact.generatedFromId;
             this.selected = artifact.selected ? artifact.selected : false;
             this.originalDescription = artifact.description;
+            this.isFromCsar = artifact.isFromCsar;
         }
     }
 
@@ -120,6 +123,7 @@ export class ArtifactModel {
         this.selected = undefined;
         this.originalDescription = undefined;
         this.envArtifact = undefined;
+        this.allowDeleteAndUpdate = undefined;
         return this;
     };
 }
diff --git a/catalog-ui/src/app/models/aschema-property.ts b/catalog-ui/src/app/models/aschema-property.ts
index 5e99b33193..b0d22d7f91 100644
--- a/catalog-ui/src/app/models/aschema-property.ts
+++ b/catalog-ui/src/app/models/aschema-property.ts
@@ -22,36 +22,36 @@
  * Created by osonsino on 16/05/2016.
  */
 'use strict';
-import { PROPERTY_DATA } from "app/utils";
+import { PROPERTY_DATA } from 'app/utils/constants';
 
 export class SchemaPropertyGroupModel {
-    property:SchemaProperty;
+    property: SchemaProperty;
 
-    constructor(schemaProperty?:SchemaProperty) {
+    constructor(schemaProperty?: SchemaProperty) {
         this.property = schemaProperty;
     }
 }
 
 export class SchemaProperty {
 
-    type:string;
-    required:boolean;
-    definition:boolean;
-    description:string;
-    password:boolean;
-    //custom properties
-    simpleType:string;
+    type: string;
+    required: boolean;
+    definition: boolean;
+    description: string;
+    password: boolean;
+    // custom properties
+    simpleType: string;
     isSimpleType: boolean;
     isDataType: boolean;
-    private _derivedFromSimpleTypeName:string;
-    get derivedFromSimpleTypeName():string {
+    private _derivedFromSimpleTypeName: string;
+    get derivedFromSimpleTypeName(): string {
         return this._derivedFromSimpleTypeName;
     }
-    set derivedFromSimpleTypeName(derivedFromSimpleTypeName:string) {
+    set derivedFromSimpleTypeName(derivedFromSimpleTypeName: string) {
         this._derivedFromSimpleTypeName = derivedFromSimpleTypeName;
     }
 
-    constructor(schemaProperty?:SchemaProperty) {
+    constructor(schemaProperty?: SchemaProperty) {
         if (schemaProperty) {
             this.type = schemaProperty.type;
             this.required = schemaProperty.required;
@@ -60,17 +60,15 @@ export class SchemaProperty {
             this.password = schemaProperty.password;
             this.simpleType = schemaProperty.simpleType;
             this.isSimpleType = (-1 < PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type));
-            this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) == -1;
+            this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) === -1;
         }
     }
 
-    public toJSON = ():any => {
+    public toJSON = (): any => {
         this.simpleType = undefined;
         this.isSimpleType = undefined;
         this.isDataType = undefined;
         this._derivedFromSimpleTypeName = undefined;
         return this;
-    };
+    }
 }
-
-
diff --git a/catalog-ui/src/app/models/attributes.ts b/catalog-ui/src/app/models/attributes.ts
index 9e5828ae69..80af540ef3 100644
--- a/catalog-ui/src/app/models/attributes.ts
+++ b/catalog-ui/src/app/models/attributes.ts
@@ -88,6 +88,9 @@ export class AttributeModel implements IAttributeModel {
             this.resourceInstanceUniqueId = attribute.resourceInstanceUniqueId;
             this.readonly = attribute.readonly;
             this.valueUniqueUid = attribute.valueUniqueUid;
+        } else {
+            this.defaultValue = '';
+            this.hidden = false;
         }
 
         if (!this.schema || !this.schema.property) {
@@ -100,7 +103,7 @@ export class AttributeModel implements IAttributeModel {
         this.convertValueToView();
     }
 
-    public convertToServerObject:Function = ():string => {
+    public convertToServerObject():string {
         if (this.defaultValue && this.type === 'map') {
             this.defaultValue = '{' + this.defaultValue + '}';
         }
diff --git a/catalog-ui/src/app/models/capability.ts b/catalog-ui/src/app/models/capability.ts
index 4a4f821e0c..f365dc4940 100644
--- a/catalog-ui/src/app/models/capability.ts
+++ b/catalog-ui/src/app/models/capability.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -22,30 +22,23 @@
  * Created by obarda on 4/20/2016.
  */
 'use strict';
-import * as _ from "lodash";
-import {PropertyModel} from "./properties";
-import {Requirement} from "./requirement";
+import * as _ from 'lodash';
+import { PropertyModel } from './properties';
 
-export interface RequirementCapabilityModel{};
-//this is an object contains keys, when each key has matching array.
+export interface RequirementCapabilityModel {}
+
+// this is an object contains keys, when each key has matching array.
 // for example: key = tosca.capabilities.network.Linkable and the match array is array of capabilities objects
 export class CapabilitiesGroup {
-    constructor(capabilityGroupObj?:CapabilitiesGroup) {
-        _.forEach(capabilityGroupObj, (capabilitiesArrayObj:Array<Capability>, instance) => {
+    constructor(capabilityGroupObj?: CapabilitiesGroup) {
+        _.forEach(capabilityGroupObj, (capabilitiesArrayObj: Capability[], instance) => {
             this[instance] = [];
-            _.forEach(capabilitiesArrayObj, (capability:Capability):void => {
+            _.forEach(capabilitiesArrayObj, (capability: Capability): void => {
                 this[instance].push(new Capability(capability));
             });
         });
     }
-
-    public findValueByKey(keySubstring:string):Array<Capability> {
-        let key:string = _.find(Object.keys(this), (key)=> {
-            return _.includes(key.toLowerCase(), keySubstring);
-        });
-        return this[key];
-    }
-
+    
     public static getFlattenedCapabilities(capabilitiesGroup: CapabilitiesGroup): Array<Capability> {
         return _.reduce(
             _.toArray(capabilitiesGroup),
@@ -54,29 +47,30 @@ export class CapabilitiesGroup {
     }
 }
 
-export class Capability implements RequirementCapabilityModel{
-
-    //server data
-    name:string;
-    ownerId:string;
-    ownerName:string;
-    type:string;
-    uniqueId:string;
-    capabilitySources:Array<String>;
-    leftOccurrences:string;
-    minOccurrences: number;
-    maxOccurrences:string;
-    description:string;
-    validSourceTypes:Array<string>;
-    properties:Array<PropertyModel>;
-    //custom
-    selected:boolean;
-    filterTerm:string;
-
-    constructor(capability?:Capability) {
+export class Capability implements RequirementCapabilityModel {
+
+    // server data
+    name: string;
+    ownerId: string;
+    ownerName: string;
+    type: string;
+    uniqueId: string;
+    capabilitySources: string[];
+    leftOccurrences: string;
+    minOccurrences: string | number;
+    maxOccurrences: string;
+    description: string;
+    validSourceTypes: string[];
+    properties: PropertyModel[];
+
+    // custom
+    selected: boolean;
+    filterTerm: string;
+
+    constructor(capability?: Capability) {
 
         if (capability) {
-            //server data
+            // server data
             this.name = capability.name;
             this.ownerId = capability.ownerId;
             this.ownerName = capability.ownerName;
@@ -95,40 +89,49 @@ export class Capability implements RequirementCapabilityModel{
         }
     }
 
-    public getTitle():string {
+    public getTitle(): string {
         return this.ownerName + ': ' + this.name;
     }
 
-    public getFullTitle():string {
-        let maxOccurrences:string = this.maxOccurrences === 'UNBOUNDED' ? '∞' : this.maxOccurrences;
+    public getFullTitle(): string {
+        const maxOccurrences: string = this.maxOccurrences === 'UNBOUNDED' ? '∞' : this.maxOccurrences;
         return this.getTitle() + ': [' + this.minOccurrences + ', ' + maxOccurrences + ']';
     }
 
-    public toJSON = ():any => {
+    public toJSON = (): any => {
         this.selected = undefined;
         this.filterTerm = undefined;
         return this;
-    };
-
-    private initFilterTerm = ():void => {
-        this.filterTerm = this.name + " " +
-            (this.type ? (this.type.replace("tosca.capabilities.", "") + " " ) : "") +
-            (this.description || "") + " " +
-            (this.ownerName || "") + " " +
-            (this.validSourceTypes ? (this.validSourceTypes.join(',') + " ") : "") +
-            this.minOccurrences + "," + this.maxOccurrences;
+    }
+
+    public isFulfilled() {
+        return parseInt(this.leftOccurrences) === 0;
+    }
+
+    private initFilterTerm = (): void => {
+        this.filterTerm = this.name + ' ' +
+            (this.type ? (this.type.replace('tosca.capabilities.', '') + ' ' ) : '') +
+            (this.description || '') + ' ' +
+            (this.ownerName || '') + ' ' +
+            (this.validSourceTypes ? (this.validSourceTypes.join(',') + ' ') : '') +
+            this.minOccurrences + ',' + this.maxOccurrences;
         if (this.properties && this.properties.length) {
-            _.forEach(this.properties, (prop:PropertyModel)=> {
-                this.filterTerm += " " + prop.name +
-                    " " + (prop.description || "") +
-                    " " + prop.type +
-                    (prop.schema && prop.schema.property ? (" " + prop.schema.property.type) : "");
+            _.forEach(this.properties, (prop: PropertyModel) => {
+                this.filterTerm += ' ' + prop.name +
+                    ' ' + (prop.description || '') +
+                    ' ' + prop.type +
+                    (prop.schema && prop.schema.property ? (' ' + prop.schema.property.type) : '');
             });
         }
     }
+}
 
-    public isFulfilled() {
-        return parseInt(this.leftOccurrences) === 0;
+export class CapabilityUI extends Capability {
+    isCreatedManually: boolean;
+
+    constructor(input: Capability, componentUniqueId: string) {
+        super(input);
+        this.isCreatedManually = input.ownerId === componentUniqueId;
     }
 }
 
diff --git a/catalog-ui/src/app/models/component-metadata.ts b/catalog-ui/src/app/models/component-metadata.ts
index 0f0a30d529..8a4b257f55 100644
--- a/catalog-ui/src/app/models/component-metadata.ts
+++ b/catalog-ui/src/app/models/component-metadata.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,65 +18,135 @@
  * ============LICENSE_END=========================================================
  */
 
-import {IMainCategory} from "./category";
+import { CapabilitiesGroup, RequirementsGroup } from 'app/models';
+import { ComponentType } from 'app/utils';
+import { IMainCategory } from './category';
 /**
  * Created by obarda on 4/18/2017.
  */
-export class ComponentMetadata {
-
-    public abstract:string;
-    public uniqueId:string;
-    public uuid:string;
-    public invariantUUID:string;
-    public name:string;
-    public version:string;
-    public creationDate:number;
-    public lastUpdateDate:number;
-    public description:string;
-    public lifecycleState:string;
-    public tags:Array<string>;
-    public icon:string;
-    public contactId:string;
-    public allVersions:any;
-    public creatorUserId:string;
-    public creatorFullName:string;
-    public lastUpdaterUserId:string;
-    public lastUpdaterFullName:string;
-    public componentType:string;
-    public categories:Array<IMainCategory>;
-    public highestVersion:boolean;
-    public normalizedName:string;
-    public systemName:string;
-    public archived:boolean;
+export interface IComponentMetadata {
+
+    abstract: string;
+    uniqueId: string;
+    uuid: string;
+    invariantUUID: string;
+    name: string;
+    version: string;
+    creationDate: number;
+    lastUpdateDate: number;
+    description: string;
+    lifecycleState: string;
+    tags: string[];
+    icon: string;
+    contactId: string;
+    allVersions: any;
+    creatorUserId: string;
+    creatorFullName: string;
+    lastUpdaterUserId: string;
+    lastUpdaterFullName: string;
+    componentType: string;
+    categories: IMainCategory[];
+    highestVersion: boolean;
+    normalizedName: string;
+    systemName: string;
+    archived: boolean;
+    vspArchived: boolean;
+    selectedCategory: string;
+    filterTerm: string;
+
+    // Resource only
+    resourceType: string;
+    csarUUID: string;
+    csarVersion: string;
+    derivedList: string[];
+    vendorName: string;
+    vendorRelease: string;
+    derivedFrom: string[];
+    resourceVendorModelNumber: string;
+    csarPackageType: string;
+    packageId: string;
+    iconSprite: string;
+
+    // Service only
+    serviceFunction: string;
+    distributionStatus: string;
+    ecompGeneratedNaming: boolean;
+    namingPolicy: string;
+    serviceType: string;
+    serviceRole: string;
+    environmentContext: string;
+    instantiationType: string;
+
+    // backend lifecycleState
+    state: string;
+
+    capabilities: CapabilitiesGroup;
+    requirements: RequirementsGroup;
+
+}
+
+export class ComponentMetadata implements IComponentMetadata {
+
+    public abstract: string;
+    public uniqueId: string;
+    public uuid: string;
+    public invariantUUID: string;
+    public name: string;
+    public version: string;
+    public creationDate: number;
+    public lastUpdateDate: number;
+    public description: string;
+    public lifecycleState: string;
+    public tags: string[];
+    public icon: string;
+    public contactId: string;
+    public allVersions: any;
+    public creatorUserId: string;
+    public creatorFullName: string;
+    public lastUpdaterUserId: string;
+    public lastUpdaterFullName: string;
+    public componentType: string;
+    public categories: IMainCategory[];
+    public highestVersion: boolean;
+    public normalizedName: string;
+    public systemName: string;
+    public archived: boolean;
     public vspArchived: boolean;
     public toscaResourceName: string;
+    public selectedCategory: string;
+    public filterTerm: string;
 
-    //Resource only
+    // Resource only
     public resourceType: string;
-    public csarUUID:string;
-    public csarVersion:string;
+    public csarUUID: string;
+    public csarVersion: string;
     public derivedList: string[];
-    public vendorName:string;
-    public vendorRelease:string;
-    public derivedFrom: Array<string>;
-    public resourceVendorModelNumber:string;
-
-    //Service only
-    public projectCode:string;
-    public distributionStatus:string;
+    public vendorName: string;
+    public vendorRelease: string;
+    public derivedFrom: string[];
+    public resourceVendorModelNumber: string;
+    public csarPackageType: string;
+    public packageId: string;
+    public iconSprite: string;
+
+    // Service only
+    public serviceFunction: string;
+    public distributionStatus: string;
     public ecompGeneratedNaming: boolean;
     public namingPolicy: string;
-    public serviceType:string;
-    public serviceRole:string;
-    public environmentContext:string;
-    public instantiationType:string;
-
+    public serviceType: string;
+    public serviceRole: string;
+    public environmentContext: string;
+    public instantiationType: string;
 
+    // backend lifecycleState
+    public state: string;
 
-        //backend lifecycleState
-    public state:string;
+    // requirements
+    public capabilities;
+    public requirements;
 
-    deserialize (response): ComponentMetadata {
+    deserialize(response): ComponentMetadata {
         this.abstract = response.abstract;
         this.uniqueId = response.uniqueId;
         this.uuid = response.uuid;
@@ -104,7 +174,7 @@ export class ComponentMetadata {
         this.derivedList = response.derivedList;
         this.normalizedName = response.normalizedName;
         this.systemName = response.systemName;
-        this.projectCode = response.projectCode;
+        this.serviceFunction = response.serviceFunction;
         this.resourceType = response.resourceType;
         this.csarUUID = response.csarUUID;
         this.csarVersion = response.csarVersion;
@@ -120,7 +190,16 @@ export class ComponentMetadata {
         this.instantiationType = response.instantiationType;
         this.vspArchived = response.vspArchived;
         this.toscaResourceName = response.toscaResourceName;
+        this.capabilities = response.capabilities;
+        this.requirements = response.requirements;
         return this;
     }
 
+    public isService = (): boolean => {
+        return this.componentType === ComponentType.SERVICE;
+    }
+
+    public getTypeUrl(): string {
+        return this.componentType === ComponentType.RESOURCE ? 'resources/' : 'services/';
+    }
 }
diff --git a/catalog-ui/src/app/models/components-array.ts b/catalog-ui/src/app/models/components-array.ts
new file mode 100644
index 0000000000..17f67b6edf
--- /dev/null
+++ b/catalog-ui/src/app/models/components-array.ts
@@ -0,0 +1,7 @@
+import {Service} from "./components/service";
+import {Resource} from "./components/resource";
+
+export interface IComponentsArray {
+    services:Array<Service>;
+    resources:Array<Resource>;
+}
diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts
index 8f0fa33c42..b76d29c8c6 100644
--- a/catalog-ui/src/app/models/components/component.ts
+++ b/catalog-ui/src/app/models/components/component.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -48,67 +48,33 @@ export interface IComponent {
     createComponentOnServer():ng.IPromise<Component>;
     changeLifecycleState(state:string, commentObj:AsdcComment):ng.IPromise<Component>;
     validateName(newName:string):ng.IPromise<IValidate>;
-    updateRequirementsCapabilities():ng.IPromise<any>;
 
     //Artifacts API
     addOrUpdateArtifact(artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
-    updateMultipleArtifacts(artifacts:Array<ArtifactModel>):ng.IPromise<any>;
     deleteArtifact(artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel>;
     downloadInstanceArtifact(artifactId:string):ng.IPromise<IFileDownload>;
     downloadArtifact(artifactId:string):ng.IPromise<IFileDownload>;
-    getArtifactByGroupType(artifactGroupType:string):ng.IPromise<ArtifactGroupModel>;
-
 
     //Property API
     addOrUpdateProperty(property:PropertyModel):ng.IPromise<PropertyModel>;
     deleteProperty(propertyId:string):ng.IPromise<PropertyModel>;
-    updateInstanceProperties(componentInstanceId:string, properties:PropertyModel[]):ng.IPromise<PropertyModel[]>;
 
     //Attribute API
     deleteAttribute(attributeId:string):ng.IPromise<AttributeModel>;
     addOrUpdateAttribute(attribute:AttributeModel):ng.IPromise<AttributeModel>;
-    updateInstanceAttribute(attribute:AttributeModel):ng.IPromise<AttributeModel>;
-
-
-
-
-    //Component Instance API
-    createComponentInstance(componentInstance:ComponentInstance):ng.IPromise<ComponentInstance>;
-    deleteComponentInstance(componentInstanceId:string):ng.IPromise<ComponentInstance>;
-    addOrUpdateInstanceArtifact(artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
-    deleteInstanceArtifact(artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel>;
-    uploadInstanceEnvFile(artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
-    checkComponentInstanceVersionChange(componentUid:string):ng.IPromise<any>;
-    changeComponentInstanceVersion(componentUid:string):ng.IPromise<Component>;
-    updateComponentInstance(componentInstance:ComponentInstance):ng.IPromise<ComponentInstance>;
-    updateMultipleComponentInstances(instances:Array<ComponentInstance>):ng.IPromise<Array<ComponentInstance>>;
-
-    //Inputs API
-    getComponentInstanceInputProperties(componentInstanceId:string, inputId:string):ng.IPromise<Array<PropertyModel>>
-    getComponentInstanceProperties(componentInstanceId:string):ng.IPromise<Array<PropertyModel>>
-    getComponentInputs(componentId:string):ng.IPromise<Array<InputModel>>;
-
-    createRelation(link:RelationshipModel):ng.IPromise<RelationshipModel>;
-    deleteRelation(link:RelationshipModel):ng.IPromise<RelationshipModel>;
-    fetchRelation(linkId:string):ng.IPromise<RelationshipModel>;
-
 
     //Modules
     getModuleForDisplay(moduleId:string):ng.IPromise<DisplayModule>;
     getModuleInstanceForDisplay(componentInstanceId:string, moduleId:string):ng.IPromise<DisplayModule>;
     updateGroupMetadata(group:Module):ng.IPromise<Module>;
-    
 
     //---------------------------------------------- HELP FUNCTIONS ----------------------------------------------------//
 
-
-
     getComponentSubType():string;
     isAlreadyCertified():boolean;
     isService():boolean;
     isResource():boolean;
     isComplex():boolean;
-    getAdditionalInformation():Array<AdditionalInformationModel>;
     getAllVersionsAsSortedArray():Array<any>;
     getStatus(sdcMenu:IAppMenu):string;
 }
@@ -161,7 +127,6 @@ export abstract class Component implements IComponent {
     public interfaces:any;
     public normalizedName:string;
     public systemName:string;
-    public projectCode:string;
     public policies:Array<PolicyInstance>;
     public groupInstances:Array<GroupInstance>
     public modules:Array<Module>;
@@ -176,6 +141,7 @@ export abstract class Component implements IComponent {
     public showMenu:boolean;
     public archived:boolean;
     public vspArchived: boolean;
+    public componentMetadata: ComponentMetadata;
 
     constructor(componentService:IComponentService, protected $q:ng.IQService, component?:Component) {
         if (component) {
@@ -220,7 +186,6 @@ export abstract class Component implements IComponent {
             this.interfaces = component.interfaces;
             this.normalizedName = component.normalizedName;
             this.systemName = component.systemName;
-            this.projectCode = component.projectCode;
             this.inputs = component.inputs;
             this.componentInstances = CommonUtils.initComponentInstances(component.componentInstances);
             this.properties = CommonUtils.initProperties(component.properties, this.uniqueId);
@@ -243,11 +208,6 @@ export abstract class Component implements IComponent {
         this.uniqueId = uniqueId;
     };
 
-    public setSelectedInstance = (componentInstance:ComponentInstance):void => {
-        this.selectedInstance = componentInstance;
-    };
-
-
     //------------------------------------------ API Calls ----------------------------------------------------------------//
     public changeLifecycleState = (state:string, commentObj:AsdcComment):ng.IPromise<Component> => {
         let deferred = this.$q.defer<Component>();
@@ -302,23 +262,6 @@ export abstract class Component implements IComponent {
         return deferred.promise;
     };
 
-    public updateMultipleArtifacts = (artifacts:Array<ArtifactModel>):ng.IPromise<any>=> {
-        let deferred = this.$q.defer();
-        let onSuccess = (response:any):void => {
-            deferred.resolve(response);
-        };
-        let onError = (error:any):void => {
-            deferred.reject(error);
-        };
-        let q = new QueueUtils(this.$q);
-
-        _.forEach(artifacts, (artifact)=> {
-            q.addBlockingUIAction(()=> this.addOrUpdateArtifact(artifact).then(onSuccess, onError));
-        });
-        return deferred.promise;
-    };
-
-
     public deleteArtifact = (artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel> => {
         let deferred = this.$q.defer<ArtifactModel>();
         let onSuccess = (artifactObj:ArtifactModel):void => {
@@ -336,32 +279,6 @@ export abstract class Component implements IComponent {
         return deferred.promise;
     };
 
-    public getArtifactByGroupType = (artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
-
-        let deferred = this.$q.defer<ArtifactGroupModel>();
-        let onSuccess = (response:ArtifactGroupModel):void => {
-            deferred.resolve(response);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.getArtifactByGroupType(this.uniqueId, artifactGroupType).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public getComponentInstanceArtifactsByGroupType = (componentInstanceId:string, artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
-
-        let deferred = this.$q.defer<ArtifactGroupModel>();
-        let onSuccess = (response:ArtifactGroupModel):void => {
-            deferred.resolve(response);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.getComponentInstanceArtifactsByGroupType(this.uniqueId, componentInstanceId, artifactGroupType).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
     public addOrUpdateProperty = (property:PropertyModel):ng.IPromise<PropertyModel> => {
         let deferred = this.$q.defer<PropertyModel>();
 
@@ -446,348 +363,10 @@ export abstract class Component implements IComponent {
         return deferred.promise;
     };
 
-
-    public updateInstancePropertiesSuccess = (newProperties:PropertyModel[]):void => {
-        newProperties.forEach((newProperty) => {
-            // find exist instance property in parent component for update the new value ( find bu uniqueId & path)
-            let existProperty: PropertyModel = <PropertyModel>_.find(this.componentInstancesProperties[newProperty.resourceInstanceUniqueId], {
-                uniqueId: newProperty.uniqueId,
-                path: newProperty.path
-            });
-            let index = this.componentInstancesProperties[newProperty.resourceInstanceUniqueId].indexOf(existProperty);
-            this.componentInstancesProperties[newProperty.resourceInstanceUniqueId][index] = newProperty;
-        });
-    }
-
-    public updateInstanceProperties = (componentInstanceId:string, properties:PropertyModel[]):ng.IPromise<PropertyModel[]> => {
-        let deferred = this.$q.defer<PropertyModel[]>();
-        let onSuccess = (newProperties:PropertyModel[]):void => {
-            this.updateInstancePropertiesSuccess(newProperties);
-            deferred.resolve(newProperties);
-        };
-        let onFailed = (error:any):void => {
-            console.log('Failed to update property value');
-            deferred.reject(error);
-        };
-        this.componentService.updateInstanceProperties(this.uniqueId, componentInstanceId, properties).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public updateInstanceAttribute = (attribute:AttributeModel):ng.IPromise<AttributeModel> => {
-        let deferred = this.$q.defer<AttributeModel>();
-        let onSuccess = (newAttribute:AttributeModel):void => {
-            let existAttribute:AttributeModel = <AttributeModel>_.find(this.componentInstancesAttributes[newAttribute.resourceInstanceUniqueId], {uniqueId: newAttribute.uniqueId});
-            let index = this.componentInstancesAttributes[newAttribute.resourceInstanceUniqueId].indexOf(existAttribute);
-            this.componentInstancesAttributes[newAttribute.resourceInstanceUniqueId][index] = newAttribute;
-            deferred.resolve(newAttribute);
-        };
-        let onFailed = (error:any):void => {
-            console.log('Failed to update attribute value');
-            deferred.reject(error);
-        };
-        this.componentService.updateInstanceAttribute(this.uniqueId, attribute).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
     public downloadInstanceArtifact = (artifactId:string):ng.IPromise<IFileDownload> => {
         return this.componentService.downloadInstanceArtifact(this.uniqueId, this.selectedInstance.uniqueId, artifactId);
     };
 
-    public deleteInstanceArtifact = (artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel> => {
-        let deferred = this.$q.defer<ArtifactModel>();
-        let onSuccess = (artifactObj:ArtifactModel):void => {
-            let newArtifact = new ArtifactModel(artifactObj);
-            let artifacts = this.selectedInstance.deploymentArtifacts;
-            if (newArtifact.mandatory || newArtifact.serviceApi) {//?????????
-                artifacts[newArtifact.artifactLabel] = newArtifact;
-            }
-            else {
-                delete artifacts[artifactLabel];
-            }
-            deferred.resolve(newArtifact);
-        };
-        this.componentService.deleteInstanceArtifact(this.uniqueId, this.selectedInstance.uniqueId, artifactId, artifactLabel).then(onSuccess);
-        return deferred.promise;
-    };
-
-    public addOrUpdateInstanceArtifact = (artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
-        let deferred = this.$q.defer<ArtifactModel>();
-        let onSuccess = (artifactObj:ArtifactModel):void => {
-            switch (artifactObj.artifactGroupType) {
-                case ArtifactGroupType.DEPLOYMENT:
-                    this.selectedInstance.deploymentArtifacts[artifactObj.artifactLabel] = artifactObj;
-                    break;
-                case ArtifactGroupType.INFORMATION:
-                    this.selectedInstance.artifacts[artifactObj.artifactLabel] = artifactObj;
-                    break;
-            }
-            deferred.resolve(artifactObj);
-        };
-        let onError = (error:any):void => {
-            deferred.reject(error);
-        };
-        if (artifact.uniqueId) {
-            this.componentService.updateInstanceArtifact(this.uniqueId, this.selectedInstance.uniqueId, artifact).then(onSuccess, onError);
-        } else {
-            this.componentService.addInstanceArtifact(this.uniqueId, this.selectedInstance.uniqueId, artifact).then(onSuccess, onError);
-        }
-        return deferred.promise;
-    };
-
-    public uploadInstanceEnvFile = (artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
-        let deferred = this.$q.defer<ArtifactModel>();
-        let onSuccess = (artifactObj:ArtifactModel):void => {
-            this.selectedInstance.deploymentArtifacts[artifactObj.artifactLabel] = artifactObj;
-            deferred.resolve(artifactObj);
-        };
-        let onError = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.uploadInstanceEnvFile(this.uniqueId, this.selectedInstance.uniqueId, artifact).then(onSuccess, onError);
-        return deferred.promise;
-    };
-
-    //this function will update the instance version than the function call getComponent to update the current component and return the new instance version
-    public changeComponentInstanceVersion = (componentUid:string):ng.IPromise<Component> => {
-        let deferred = this.$q.defer<Component>();
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        let onSuccess = (componentInstance:ComponentInstance):void => {
-            let onSuccess = (component:Component):void => {
-                component.setSelectedInstance(componentInstance);
-                deferred.resolve(component);
-            };
-            this.getComponent().then(onSuccess, onFailed);
-        };
-        this.componentService.changeResourceInstanceVersion(this.uniqueId, this.selectedInstance.uniqueId, componentUid).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public checkComponentInstanceVersionChange = (componentUid:string):ng.IPromise<any> => {
-        return this.componentService.checkResourceInstanceVersionChange(this.uniqueId, this.selectedInstance.uniqueId, componentUid);
-    };
-
-    public createComponentInstance = (componentInstance:ComponentInstance):ng.IPromise<ComponentInstance> => {
-        let deferred = this.$q.defer<ComponentInstance>();
-        let onSuccess = (instance:ComponentInstance):void => {
-            this.componentInstances.push(instance);
-            deferred.resolve(instance);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.createComponentInstance(this.uniqueId, componentInstance).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public updateComponentInstance = (componentInstance:ComponentInstance):ng.IPromise<ComponentInstance> => {
-        let deferred = this.$q.defer<ComponentInstance>();
-        let onSuccess = (updatedInstance:ComponentInstance):void => {
-            let componentInstance:ComponentInstance = _.find(this.componentInstances, (instance:ComponentInstance) => {
-                return instance.uniqueId === updatedInstance.uniqueId;
-            });
-
-            let index = this.componentInstances.indexOf(componentInstance);
-            this.componentInstances[index] = componentInstance;
-            deferred.resolve(updatedInstance);
-
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.updateComponentInstance(this.uniqueId, componentInstance).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public updateMultipleComponentInstances = (instances:Array<ComponentInstance>):ng.IPromise<Array<ComponentInstance>> => {
-        let deferred = this.$q.defer<Array<ComponentInstance>>();
-        let onSuccess = (updatedInstances:Array<ComponentInstance>):void => {
-            _.forEach(updatedInstances, (updatedComponentInstance) => {
-                let componentInstance:ComponentInstance = _.find(this.componentInstances, (instance:ComponentInstance) => {
-                    return instance.uniqueId === updatedComponentInstance.uniqueId;
-                });
-
-                let index = this.componentInstances.indexOf(componentInstance);
-                this.componentInstances[index] = componentInstance;
-
-            });
-            deferred.resolve(updatedInstances);
-
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.updateMultipleComponentInstances(this.uniqueId, instances).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public deleteComponentInstance = (componentInstanceId:string):ng.IPromise<ComponentInstance> => {
-        let deferred = this.$q.defer<ComponentInstance>();
-        let onSuccess = ():void => {
-            let onSuccess = (component:Component):void => {
-                this.componentInstances = CommonUtils.initComponentInstances(component.componentInstances);
-                this.componentInstancesProperties = new PropertiesGroup(component.componentInstancesProperties);
-                this.componentInstancesAttributes = new AttributesGroup(component.componentInstancesAttributes);
-                this.modules = component.modules;
-                this.componentInstancesRelations = CommonUtils.initComponentInstanceRelations(component.componentInstancesRelations);
-                deferred.resolve();
-            };
-            this.getComponent().then(onSuccess);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.deleteComponentInstance(this.uniqueId, componentInstanceId).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-
-    public syncComponentByRelation(relation:RelationshipModel) {
-        relation.relationships.forEach((rel) => {
-            if (rel.capability) {
-                const toComponentInstance:ComponentInstance = this.componentInstances.find((inst) => inst.uniqueId === relation.toNode);
-                const toComponentInstanceCapability:Capability = toComponentInstance.findCapability(
-                    rel.capability.type, rel.capability.uniqueId, rel.capability.ownerId, rel.capability.name);
-                const isCapabilityFulfilled:boolean = rel.capability.isFulfilled();
-                if (isCapabilityFulfilled && toComponentInstanceCapability) {
-                    // if capability is fulfilled and in component, then remove it
-                    console.log('Capability is fulfilled', rel.capability.getFullTitle(), rel.capability.leftOccurrences);
-                    toComponentInstance.capabilities[rel.capability.type].splice(
-                        toComponentInstance.capabilities[rel.capability.type].findIndex((cap) => cap === toComponentInstanceCapability), 1
-                    )
-                } else if (!isCapabilityFulfilled && !toComponentInstanceCapability) {
-                    // if capability is unfulfilled and not in component, then add it
-                    console.log('Capability is unfulfilled', rel.capability.getFullTitle(), rel.capability.leftOccurrences);
-                    toComponentInstance.capabilities[rel.capability.type].push(rel.capability);
-                }
-            }
-            if (rel.requirement) {
-                const fromComponentInstance:ComponentInstance = this.componentInstances.find((inst) => inst.uniqueId === relation.fromNode);
-                const fromComponentInstanceRequirement:Requirement = fromComponentInstance.findRequirement(
-                    rel.requirement.capability, rel.requirement.uniqueId, rel.requirement.ownerId, rel.requirement.name);
-                const isRequirementFulfilled:boolean = rel.requirement.isFulfilled();
-                if (isRequirementFulfilled && fromComponentInstanceRequirement) {
-                    // if requirement is fulfilled and in component, then remove it
-                    console.log('Requirement is fulfilled', rel.requirement.getFullTitle(), rel.requirement.leftOccurrences);
-                    fromComponentInstance.requirements[rel.requirement.capability].splice(
-                        fromComponentInstance.requirements[rel.requirement.capability].findIndex((req) => req === fromComponentInstanceRequirement), 1
-                    )
-                } else if (!isRequirementFulfilled && !fromComponentInstanceRequirement) {
-                    // if requirement is unfulfilled and not in component, then add it
-                    console.log('Requirement is unfulfilled', rel.requirement.getFullTitle(), rel.requirement.leftOccurrences);
-                    fromComponentInstance.requirements[rel.requirement.capability].push(rel.requirement);
-                }
-            }
-        });
-    }
-
-    public fetchRelation = (linkId:string):ng.IPromise<RelationshipModel> => {
-        let deferred = this.$q.defer<RelationshipModel>();
-        let onSuccess = (relation:RelationshipModel):void => {
-            this.syncComponentByRelation(relation);
-            deferred.resolve(relation);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.fetchRelation(this.uniqueId, linkId).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public createRelation = (relation:RelationshipModel):ng.IPromise<RelationshipModel> => {
-        let deferred = this.$q.defer<RelationshipModel>();
-        let onSuccess = (relation:RelationshipModel):void => {
-            console.info('Link created successfully', relation);
-            if (!this.componentInstancesRelations) {
-                this.componentInstancesRelations = [];
-            }
-            this.componentInstancesRelations.push(new RelationshipModel(relation));
-            this.syncComponentByRelation(relation);
-            deferred.resolve(relation);
-        };
-        let onFailed = (error:any):void => {
-            console.info('Failed to create relation', error);
-            deferred.reject(error);
-        };
-        this.componentService.createRelation(this.uniqueId, relation).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public deleteRelation = (relation:RelationshipModel):ng.IPromise<RelationshipModel> => {
-        let deferred = this.$q.defer<RelationshipModel>();
-        let onSuccess = (relation:RelationshipModel):void => {
-            console.log("Link Deleted In Server");
-            let relationToDelete = _.find(this.componentInstancesRelations, (item) => {
-                return item.fromNode === relation.fromNode && item.toNode === relation.toNode && _.some(item.relationships, (relationship)=> {
-                        return angular.equals(relation.relationships[0].relation, relationship.relation);
-                    });
-            });
-            let index = this.componentInstancesRelations.indexOf(relationToDelete);
-            if (relationToDelete != undefined && index > -1) {
-                if (relationToDelete.relationships.length == 1) {
-                    this.componentInstancesRelations.splice(index, 1);
-                } else {
-                    this.componentInstancesRelations[index].relationships =
-                        _.reject(this.componentInstancesRelations[index].relationships, (relationship) => {
-                            return angular.equals(relation.relationships[0].relation, relationship.relation);
-                        });
-                }
-            } else {
-                console.error("Error while deleting relation - the return delete relation from server was not found in UI")
-            }
-            this.syncComponentByRelation(relation);
-            deferred.resolve(relation);
-        };
-        let onFailed = (error:any):void => {
-            console.error("Failed To Delete Link");
-            deferred.reject(error);
-        };
-        this.componentService.deleteRelation(this.uniqueId, relation).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public getRelationRequirementCapability(relationship: Relationship, sourceNode:ComponentInstance, targetNode:ComponentInstance): Promise<{requirement:Requirement, capability:Capability}> {
-        // try find the requirement and capability in the source and target component instances:
-        let capability:Capability = targetNode.findCapability(undefined,
-            relationship.relation.capabilityUid,
-            relationship.relation.capabilityOwnerId,
-            relationship.relation.capability);
-        let requirement:Requirement = sourceNode.findRequirement(undefined,
-            relationship.relation.requirementUid,
-            relationship.relation.requirementOwnerId,
-            relationship.relation.requirement);
-
-        return new Promise<{requirement:Requirement, capability:Capability}>((resolve, reject) => {
-            if (capability && requirement) {
-                resolve({capability, requirement});
-            }
-            else {
-                // if requirement and/or capability is missing, then fetch the full relation with its requirement and capability:
-                this.fetchRelation(relationship.relation.id).then((fetchedRelation) => {
-                    resolve({
-                        capability: capability || fetchedRelation.relationships[0].capability,
-                        requirement: requirement || fetchedRelation.relationships[0].requirement
-                    });
-                }, reject);
-            }
-        });
-    }
-
-    public updateRequirementsCapabilities = ():ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let onSuccess = (response:any):void => {
-            this.capabilities = new CapabilitiesGroup(response.capabilities);
-            this.requirements = new RequirementsGroup(response.requirements);
-            deferred.resolve(response);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.getRequirementsCapabilities(this.uniqueId).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
     public getModuleForDisplay = (moduleId:string):ng.IPromise<DisplayModule> => {
 
         let deferred = this.$q.defer<DisplayModule>();
@@ -814,82 +393,6 @@ export abstract class Component implements IComponent {
         return deferred.promise;
     };
 
-
-    // this function get all instances filtered by inputs and properties (optional) - if no search string insert - this function will
-    // get all the instances of the component (in service only VF instances)
-    public getComponentInstancesFilteredByInputsAndProperties = (searchText?:string):ng.IPromise<Array<ComponentInstance>> => {
-
-        let deferred = this.$q.defer<Array<ComponentInstance>>();
-        let onSuccess = (response:Array<ComponentInstance>):void => {
-            deferred.resolve(response);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.getComponentInstancesFilteredByInputsAndProperties(this.uniqueId, searchText).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-
-    // get inputs for instance - Pagination function
-    public getComponentInputs = ():ng.IPromise<Array<InputModel>> => {
-
-        let deferred = this.$q.defer<Array<InputModel>>();
-        let onSuccess = (inputsRes:Array<InputModel>):void => {
-            this.inputs = inputsRes;
-            deferred.resolve(inputsRes);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.getComponentInputs(this.uniqueId).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-
-    // get inputs instance - Pagination function
-    public getComponentInstanceInputs = (componentInstanceId:string, originComponentUid:string):ng.IPromise<Array<InputModel>> => {
-
-        let deferred = this.$q.defer<Array<InputModel>>();
-        let onSuccess = (response:Array<InputModel>):void => {
-            deferred.resolve(response);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.getComponentInstanceInputs(this.uniqueId, componentInstanceId, originComponentUid).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    // get inputs inatnce - Pagination function
-    public getComponentInstanceInputProperties = (componentInstanceId:string, inputId:string):ng.IPromise<Array<PropertyModel>> => {
-
-        let deferred = this.$q.defer<Array<PropertyModel>>();
-        let onSuccess = (response:Array<PropertyModel>):void => {
-            deferred.resolve(response);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.getComponentInstanceInputProperties(this.uniqueId, componentInstanceId, inputId).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    // get inputs inatnce - Pagination function
-    public getComponentInstanceProperties = (componentInstanceId:string):ng.IPromise<Array<PropertyModel>> => {
-
-        let deferred = this.$q.defer<Array<PropertyModel>>();
-        let onSuccess = (response:Array<PropertyModel>):void => {
-            deferred.resolve(response);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.getComponentInstanceProperties(this.uniqueId, componentInstanceId).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-
     public updateGroupMetadata = (module:Module):ng.IPromise<Module> => {
 
         let deferred = this.$q.defer<Module>();
@@ -969,15 +472,6 @@ export abstract class Component implements IComponent {
 
     };
 
-    public getAdditionalInformation = ():Array<AdditionalInformationModel> => {
-        let additionalInformationObject:any = _.find(this.additionalInformation, (obj:any):boolean => {
-            return obj.parentUniqueId == this.uniqueId;
-        });
-        if (additionalInformationObject) {
-            return additionalInformationObject.parameters;
-        }
-        return [];
-    };
 
     public handleTags = ():void => {
         let isContainTag = _.find(this.tags, (tag)=> {
@@ -1036,10 +530,10 @@ export abstract class Component implements IComponent {
         this.derivedList = componentMetadata.derivedList;
         this.normalizedName = componentMetadata.normalizedName;
         this.systemName = componentMetadata.systemName;
-        this.projectCode = componentMetadata.projectCode;
         this.categories = componentMetadata.categories;
         this.archived = componentMetadata.archived || false;
         this.vspArchived = componentMetadata.vspArchived;
+        this.componentMetadata = componentMetadata;
     }
 
     public toJSON = ():any => {
diff --git a/catalog-ui/src/app/models/components/displayComponent.ts b/catalog-ui/src/app/models/components/displayComponent.ts
index f96e0bf14b..4e946954f3 100644
--- a/catalog-ui/src/app/models/components/displayComponent.ts
+++ b/catalog-ui/src/app/models/components/displayComponent.ts
@@ -22,47 +22,42 @@
  */
 
 'use strict';
-import {ComponentType} from "../../utils/constants";
-import {ComponentMetadata} from "../component-metadata";
-import {PolicyMetadata} from "../policy-metadata";
-import {GroupMetadata} from "../group-metadata";
-import {RequirementsGroup} from "../requirement";
-import {CapabilitiesGroup} from "../capability";
+import { ComponentType, SdcElementType } from '../../utils/constants';
+import { ComponentMetadata } from '../component-metadata';
+import { PolicyMetadata } from '../policy-metadata';
+import { GroupMetadata } from '../group-metadata';
+import { RequirementsGroup } from '../requirement';
+import { CapabilitiesGroup } from '../capability';
 
 export enum LeftPaletteMetadataTypes {
-    Component,
-    Group,
-    Policy
+    Component = 'COMPONENT',
+    Group = 'GROUP',
+    Policy = 'POLICY'
 }
 
 export class LeftPaletteComponent {
-    uniqueId:string;
-    type:string;
-    displayName:string;
-    version:string;
-    mainCategory:string;
-    subCategory:string;
-    iconClass:string;
-    componentSubType:string;
-    searchFilterTerms:string;
-    certifiedIconClass:string;
-    icon:string;
-    isDraggable:boolean;
-    isRequirmentAndCapabilitiesLoaded:boolean;
 
-    uuid:string;
-    name:string;
-    lifecycleState:string;
-    allVersions:any;
-    componentType:string;
-    systemName:string;
-
-    invariantUUID:string;
-
-    capabilities:CapabilitiesGroup;
-    requirements:RequirementsGroup;
-
-    categoryType:LeftPaletteMetadataTypes;
+    uniqueId: string;
+    type: string;
+    version: string;
+    mainCategory: string;
+    subCategory: string;
+    componentSubType: string;
+    searchFilterTerms: string;
+    certifiedIconClass: string;
+    isDraggable: boolean;
+    uuid: string;
+    name: string;
+    lifecycleState: string;
+    allVersions: any;
+    componentType: string;
+    systemName: string;
+    invariantUUID: string;
+    capabilities: CapabilitiesGroup;
+    requirements: RequirementsGroup;
+    categoryType: LeftPaletteMetadataTypes;
+    resourceType: string;
+    icon: string;
 
     constructor(metadataType: LeftPaletteMetadataTypes, item: ComponentMetadata | PolicyMetadata | GroupMetadata) {
         if (metadataType === LeftPaletteMetadataTypes.Policy) {
@@ -81,13 +76,10 @@ export class LeftPaletteComponent {
         }
     }
 
-    private initComponent(component:ComponentMetadata): void {
-        this.categoryType = LeftPaletteMetadataTypes.Component;
+    private initComponent(component: ComponentMetadata): void {
 
-        this.icon = component.icon;
         this.version = component.version;
         this.uniqueId = component.uniqueId;
-        this.isRequirmentAndCapabilitiesLoaded = false;
         this.uuid = component.uuid;
         this.name = component.name;
         this.allVersions = component.allVersions;
@@ -95,7 +87,6 @@ export class LeftPaletteComponent {
         this.systemName = component.systemName;
         this.invariantUUID = component.invariantUUID;
         this.isDraggable = true;
-
         if (component.categories && component.categories[0] && component.categories[0].subcategories && component.categories[0].subcategories[0]) {
             this.mainCategory = component.categories[0].name;
             this.subCategory = component.categories[0].subcategories[0].name;
@@ -103,75 +94,43 @@ export class LeftPaletteComponent {
             this.mainCategory = 'Generic';
             this.subCategory = 'Generic';
         }
+        // this.categoryType = LeftPaletteMetadataTypes.Component;
+        // this.componentSubType = component. ? component.resourceType: ComponentType.SERVICE_PROXY;
+        this.searchFilterTerms = (this.name + ' ' + component.description + ' ' + component.tags.join(' ')).toLowerCase() + ' ' + component.version;
+        this.icon = component.icon;
+        this.certifiedIconClass = component.lifecycleState != 'CERTIFIED' ? 'non-certified' : ''; // need to fix after onap fix
 
-        this.componentSubType = component.resourceType ? component.resourceType: 'SERVICE';
-
-        this.initDisplayName(component.name);
-        this.searchFilterTerms = (this.displayName + ' ' + component.description + ' ' + component.tags.join(' ')).toLowerCase() + ' ' + component.version;
-        this.initIconSprite(component.icon);
-        this.certifiedIconClass = component.lifecycleState != 'CERTIFIED' ? 'non-certified' : '';
-        if (component.icon === 'vl' || component.icon === 'cp') {
-            this.certifiedIconClass = this.certifiedIconClass + " " + 'smaller-icon';
-        }
     }
 
-    private initGroup(group:GroupMetadata): void {
+    private initGroup(group: GroupMetadata): void {
         this.categoryType = LeftPaletteMetadataTypes.Group;
-
         this.uniqueId = group.uniqueId;
-        this.displayName = group.name;
-        this.mainCategory = "Groups";
-        this.subCategory = "Groups";
-        this.iconClass = "sprite-group-icons group";
+        this.name = group.name;
+        this.mainCategory = 'Groups';
+        this.subCategory = 'Groups';
         this.version = group.version;
-
         this.type = group.type;
-        this.componentSubType = 'GROUP';
-
+        this.componentSubType = SdcElementType.GROUP;
+        this.icon = SdcElementType.GROUP;
         this.searchFilterTerms = this.type + ' ' + group.name + ' ' + group.version;
         this.isDraggable = false;
     }
 
-    private initPolicy(policy:PolicyMetadata): void {
+    private initPolicy(policy: PolicyMetadata): void {
         this.categoryType = LeftPaletteMetadataTypes.Policy;
-
         this.uniqueId = policy.uniqueId;
-        this.displayName = policy.name;
-        this.mainCategory = "Policies";
-        this.subCategory = "Policies";
-        this.iconClass = "sprite-policy-icons policy";
+        this.name = policy.name;
+        this.mainCategory = 'Policies';
+        this.subCategory = 'Policies';
         this.version = policy.version;
-
         this.type = policy.type;
-        this.componentSubType = 'POLICY';
-
+        this.componentSubType = SdcElementType.POLICY;
+        this.icon = SdcElementType.POLICY;
         this.searchFilterTerms = this.type + ' ' + policy.name + ' ' + policy.version;
         this.isDraggable = false;
     }
 
-    public initDisplayName = (name:string):void => {
-        let newName =
-            _.last(_.last(_.last(_.last(_.last(_.last(_.last(_.last(name.split('tosca.nodes.'))
-                .split('network.')).split('relationships.')).split('org.openecomp.')).split('resource.nfv.'))
-                .split('nodes.module.')).split('cp.')).split('vl.'));
-        if (newName) {
-            this.displayName = newName;
-        } else {
-            this.displayName = name;
-        }
-    };
-
-    public initIconSprite = (icon:string):void => {
-        switch (this.componentSubType) {
-            case ComponentType.SERVICE:
-                this.iconClass = "sprite-services-icons " + icon;
-                break;
-            default:
-                this.iconClass = "sprite-resource-icons " + icon;
-        }
-    }
-
-    public getComponentSubType = ():string => {
+    public getComponentSubType = (): string => {
         return this.componentSubType;
     };
 }
diff --git a/catalog-ui/src/app/models/components/service.ts b/catalog-ui/src/app/models/components/service.ts
index a947e81716..911a43204f 100644
--- a/catalog-ui/src/app/models/components/service.ts
+++ b/catalog-ui/src/app/models/components/service.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -38,6 +38,7 @@ export class Service extends Component {
     public namingPolicy:string;
     public serviceType:string;
     public serviceRole:string;
+    public serviceFunction:string;
     public environmentContext:string;
     public instantiationType:string;
     public forwardingPaths:{ [key:string]:ForwardingPath } = {};
@@ -52,6 +53,7 @@ export class Service extends Component {
             this.namingPolicy = component.namingPolicy;
             this.serviceType = component.serviceType;
             this.serviceRole = component.serviceRole;
+            this.serviceFunction = component.serviceFunction;
             this.instantiationType = component.instantiationType;
             this.environmentContext = component.environmentContext;
             if (component.categories && component.categories[0]) {
@@ -168,6 +170,7 @@ export class Service extends Component {
         this.namingPolicy = componentMetadata.namingPolicy;
         this.serviceType = componentMetadata.serviceType;
         this.serviceRole = componentMetadata.serviceRole;
+        this.serviceFunction = componentMetadata.serviceFunction;
         this.environmentContext = componentMetadata.environmentContext;
         this.instantiationType = componentMetadata.instantiationType;
         this.setComponentDisplayData();
@@ -195,6 +198,7 @@ export class Service extends Component {
         temp.selectedCategory = undefined;
         temp.modules = undefined;
         temp.groupInstances = undefined;
+        temp.policies = undefined;
         return temp;
     };
 }
diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
index f95d6553cd..d3a99e5390 100644
--- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
+++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
@@ -23,12 +23,53 @@
  */
 'use strict';
 import * as _ from "lodash";
-import {ArtifactGroupModel, CapabilitiesGroup,RequirementsGroup, PropertyModel, InputModel, Module} from "../../models";
-import {ResourceType,ComponentType} from "../../utils/constants";
+import {
+    ArtifactGroupModel,
+    CapabilitiesGroup,
+    RequirementsGroup,
+    PropertyModel,
+    InputModel,
+    Module
+} from "../../models";
+import {ResourceType, ComponentType} from "../../utils/constants";
 import {Capability} from "../capability";
 import {Requirement} from "../requirement";
 
-export class ComponentInstance {
+export interface IComponentInstance {
+
+    componentUid:string;
+    componentName:string;
+    posX:number;
+    posY:number;
+    componentVersion:string;
+    description:string;
+    icon:string;
+    name:string;
+    normalizedName:string;
+    originType:string;
+    deploymentArtifacts:ArtifactGroupModel;
+    artifacts:ArtifactGroupModel;
+    propertyValueCounter:number;
+    uniqueId:string;
+    creationTime:number;
+    modificationTime:number;
+    capabilities:CapabilitiesGroup;
+    requirements:RequirementsGroup;
+    customizationUUID:string;
+    sourceModelInvariant:string;
+    sourceModelName:string;
+    sourceModelUid:string;
+    sourceModelUuid:string;
+    //custom properties
+    certified:boolean;
+    iconSprite:string;
+    inputs:Array<InputModel>;
+    properties:Array<PropertyModel>;
+    groupInstances:Array<Module>;
+    invariantName:string;
+    originArchived:boolean;
+}
+export class ComponentInstance implements IComponentInstance{
 
     public componentUid:string;
     public componentName:string;
@@ -61,7 +102,7 @@ export class ComponentInstance {
     public groupInstances:Array<Module>;
     public invariantName:string;
     public originArchived:boolean;
-    public directives: Array<string>;
+    public directives: string[];
 
     DIRECTIVES_TYPES = {
         SELECTABLE: 'selectable'
@@ -112,14 +153,18 @@ export class ComponentInstance {
         return this.originType === 'VL';
     };
 
-    public isComplex = () : boolean => {
-        return this.originType === ResourceType.VF || this.originType === ResourceType.PNF || this.originType === ResourceType.CVFC || this.originType === ResourceType.CR ;
+    public isComplex = ():boolean => {
+        return this.originType === ResourceType.VF || this.originType === ResourceType.PNF || this.originType === ResourceType.CVFC || this.originType === ResourceType.CR;
     }
 
-    public isServiceProxy = () :boolean => {
+    public isServiceProxy = ():boolean => {
         return this.originType === ComponentType.SERVICE_PROXY;
     }
 
+    public getComponentUid = ():string => {
+        return this.isServiceProxy()? this.sourceModelUid : this.componentUid;
+    }
+
     public setInstanceRC = ():void=> {
         _.forEach(this.requirements, (requirementValue:Array<any>, requirementKey)=> {
             _.forEach(requirementValue, (requirement)=> {
@@ -183,7 +228,6 @@ export class ComponentInstance {
     public get iconClass() {
         return this.iconSprite + ' ' + this.icon;
     }
-
     public isDependent = () : boolean => {
         return this.directives && this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE) !== -1;
     }
diff --git a/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts b/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts
new file mode 100644
index 0000000000..ce5aa1dae9
--- /dev/null
+++ b/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts
@@ -0,0 +1,110 @@
+import { ComponentInstance, Component, ArtifactGroupModel, Service, Resource, IMainCategory, ArtifactModel, AttributeModel } from "app/models";
+import { ComponentType } from '../../utils/constants';
+import * as _ from 'lodash';
+
+
+export class FullComponentInstance extends ComponentInstance {
+    public contactId: string;
+    public componentType: string;
+    public interfaces:any;
+    public tags:Array<string>;
+    public version:string;
+    public allVersions:any;
+    public highestVersion:boolean;
+    public categories:Array<IMainCategory>;
+    public creationDate:number;
+    public creatorFullName:string;
+    public vendorName:string;
+    public vendorRelease:string;
+    public systemName:string;
+    public uuid:string;
+    public lifecycleState: string;
+    public archived: boolean;
+
+    public isServiceInstance: boolean;
+    public isResourceInstance: boolean;
+    public directives: string[];
+
+    DIRECTIVES_TYPES = {
+        SELECTABLE: 'selectable'
+    };
+
+    //service
+    public serviceApiArtifacts:ArtifactGroupModel;
+    public serviceType:string;
+    public serviceRole:string;
+
+    //resource
+    public csarUUID:string;
+    public isCsarComponent: boolean;
+    public csarVersion:string;
+    public csarPackageType:string;
+    public packageId:string;
+    public resourceType:string;
+    public resourceVendorModelNumber:string;
+
+    public attributes: Array<AttributeModel>;
+
+    constructor(componentInstance:ComponentInstance, originComponent:Component) {
+        super(componentInstance);
+
+        this.componentType = originComponent.componentType;
+        this.interfaces = originComponent.interfaces;
+        this.tags = [];
+        this.tags = _.clone(originComponent.tags);
+        this.version = originComponent.version;
+        this.allVersions = originComponent.allVersions;
+        this.highestVersion = originComponent.highestVersion;
+        this.categories = originComponent.categories;
+        this.creationDate = originComponent.creationDate;
+        this.creatorFullName = originComponent.creatorFullName;
+        this.vendorName = originComponent.vendorName;
+        this.vendorRelease = originComponent.vendorRelease;
+        this.contactId = originComponent.contactId;
+        this.description = originComponent.description;
+        this.systemName = originComponent.systemName;
+        this.uuid = originComponent.uuid;
+        this.lifecycleState = originComponent.lifecycleState;
+        this.archived = originComponent.archived;
+        this.attributes = originComponent.attributes;
+        this.directives = componentInstance.directives;
+
+
+        if(originComponent.componentType === ComponentType.SERVICE || originComponent.componentType === ComponentType.SERVICE_PROXY){
+            this.isServiceInstance = true;
+            this.serviceApiArtifacts = (<Service>originComponent).serviceApiArtifacts;
+            this.serviceType = (<Service>originComponent).serviceType;
+            this.serviceRole = (<Service>originComponent).serviceRole;
+        }
+        if(originComponent.componentType === ComponentType.RESOURCE) {
+            this.isResourceInstance = true;
+            this.csarUUID = (<Resource>originComponent).csarUUID;
+            this.isCsarComponent = !!this.csarUUID;
+            this.resourceType = (<Resource>originComponent).resourceType;
+            this.resourceVendorModelNumber = (<Resource>originComponent).resourceVendorModelNumber;
+        }
+    }
+
+    public isResource = ():boolean => {
+        return this.isResourceInstance;
+    }
+
+    public isService = ():boolean => {
+        return this.isServiceInstance;
+    }
+    public isDependent = () : boolean => {
+        return this.directives && this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE) !== -1;
+    }
+
+    public markAsDependent = () : void => {
+        this.directives.push(this.DIRECTIVES_TYPES.SELECTABLE);
+    }
+
+    public unmarkAsDependent = () : void => {
+        const index = this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE);
+        if(index >= 0) {
+            this.directives.splice(index, 1);
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
index cc037a7e22..d690eca02c 100644
--- a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
+++ b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
@@ -22,60 +22,49 @@
  */
 'use strict';
 import * as _ from "lodash";
-import {RelationshipModel, Relationship, CompositionCiLinkBase, CompositionCiNodeBase, LinkUcpeHost, CompositionCiUcpeLink,
-    CompositionCiVlUcpeLink, CompositionCiSimpleLink, ModuleCiLinkBase, ModuleCiVlLink, CompositionCiVLink} from "../../../models";
+import {
+    RelationshipModel, Relationship, CompositionCiLinkBase, CompositionCiNodeBase, LinkUcpeHost, CompositionCiUcpeLink,
+    CompositionCiVlUcpeLink, CompositionCiSimpleLink, ModuleCiLinkBase, ModuleCiVlLink, CompositionCiVLink
+} from "app/models";
+import {Injectable} from "@angular/core";
 
+@Injectable()
 export class LinksFactory {
 
-  constructor() {
-  }
-
-  public createGraphLink = (cy:Cy.Instance, relation:RelationshipModel, singleRelation:Relationship):CompositionCiLinkBase => {
-
-    let newRelation:CompositionCiLinkBase;
-
-    // let fromNode:CompositionCiNodeBase = cy.getElementById(relation.fromNode).data();
-    // let toNode:CompositionCiNodeBase = cy.getElementById(relation.toNode).data();
-    //
-    // if ((relation.fromNode && fromNode.isUcpePart) || (relation.toNode && toNode.isUcpePart )) { //Link from or to node inside ucpe
-    //
-    //   if (singleRelation && singleRelation.relationship.type && singleRelation.relationship.type == 'tosca.relationships.HostedOn') {
-    //     newRelation = new LinkUcpeHost(relation, singleRelation);
-    //   } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
-    //     newRelation = new CompositionCiVlUcpeLink(relation, fromNode.isUcpePart, singleRelation);
-    //   } else {
-    //     newRelation = new CompositionCiUcpeLink(relation, fromNode.isUcpePart, singleRelation);
-    //   }
-    // } else
-     if (singleRelation.relation.relationship.type && _.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) {
-      newRelation = new CompositionCiVLink(relation, singleRelation);
-    } else {
-      newRelation = new CompositionCiSimpleLink(relation, singleRelation);
+    constructor() {
     }
 
-    return newRelation;
-  };
+    public createGraphLink = (cy:Cy.Instance, relation:RelationshipModel, singleRelation:Relationship):CompositionCiLinkBase => {
 
-  public createUcpeHostLink = (relation:RelationshipModel):LinkUcpeHost => {
-    return new LinkUcpeHost(relation);
-  };
+        let newRelation:CompositionCiLinkBase;
+        if (singleRelation.relation.relationship.type && _.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) {
+            newRelation = new CompositionCiVLink(relation, singleRelation);
+        } else {
+            newRelation = new CompositionCiSimpleLink(relation, singleRelation);
+        }
 
-  public createVLLink = (relation:RelationshipModel):CompositionCiVLink => {
-    return new CompositionCiVLink(relation);
-  }
+        return newRelation;
+    };
 
+    public createUcpeHostLink = (relation:RelationshipModel):LinkUcpeHost => {
+        return new LinkUcpeHost(relation);
+    };
 
-  public createModuleGraphLinks = (relation:RelationshipModel, singleRelation:Relationship):ModuleCiLinkBase => {
+    public createVLLink = (relation:RelationshipModel):CompositionCiVLink => {
+        return new CompositionCiVLink(relation);
+    }
 
-    let newRelation:ModuleCiLinkBase;
+    public createModuleGraphLinks = (relation:RelationshipModel, singleRelation:Relationship):ModuleCiLinkBase => {
 
-    if (_.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) {
-      newRelation = new ModuleCiVlLink(relation, singleRelation);
-    } else {
-      newRelation = new ModuleCiLinkBase(relation, singleRelation);
-    }
+        let newRelation:ModuleCiLinkBase;
+
+        if (_.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) {
+            newRelation = new ModuleCiVlLink(relation, singleRelation);
+        } else {
+            newRelation = new ModuleCiLinkBase(relation, singleRelation);
+        }
 
-    return newRelation;
-  };
+        return newRelation;
+    };
 
 }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
index 51a0c7b3e5..69605507e7 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
@@ -20,9 +20,11 @@
 
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
 import {CommonCINodeBase} from "../common-ci-node-base";
-import {ICanvasImage, ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service";
 import {ImagesUrl, GraphUIObjects} from "app/utils";
 import {AngularJSBridge} from "app/services";
+import {ResourceNamePipe} from "app/ng2/pipes/resource-name.pipe";
+import {ComponentInstanceNodesStyle} from "app/ng2/pages/composition/graph/common/style/component-instances-nodes-style";
+import {ImageCreatorService, ICanvasImage} from "app/ng2/pages/composition/graph/common/image-creator.service";
 
 export interface ICompositionCiNodeBase {
 
@@ -48,14 +50,16 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
         this.isUcpePart = false;
         this.isInsideGroup = false;
     }
-
-
+    
+    
     protected enhanceImage(node:Cy.Collection, nodeMinSize:number, imgUrl: string):string {
+
         let infoIconWidth:number = GraphUIObjects.HANDLE_SIZE;
         let nodeWidth:number = node.data('imgWidth') || node.width();
+        // let uncertifiedCanvasWidth: number = nodeWidth;
         let infoCanvasWidth: number = nodeWidth;
 
-        if (nodeWidth < nodeMinSize) { //info icon will overlap too much of the node, need to expand canvas.
+        if (nodeWidth < nodeMinSize) { //uncertified icon will overlap too much of the node, need to expand canvas.
             infoCanvasWidth = nodeWidth + infoIconWidth/2; //expand canvas so that only half of the icon overlaps with the node
         }
 
@@ -66,13 +70,14 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
             { src: imgUrl, x: 0, y: 0, width: infoIconWidth, height: infoIconWidth}
         ];
 
+
        //Create the image and update the node background styles
         this.imageCreator.getMultiLayerBase64Image(canvasImages, infoCanvasWidth, infoCanvasWidth).then(img => this.updateNodeStyles(node,infoCanvasWidth,img));
         return this.img; // Return the referance to the image (in Base64 format)
     }
 
-
-    public setArchivedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string {
+    
+    public setArchivedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string {        
         let archivedIconWidth:number = GraphUIObjects.HANDLE_SIZE;
         let nodeWidth:number = node.data('imgWidth') || node.width();
         let archivedCanvasWidth: number = nodeWidth;
@@ -95,13 +100,12 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
     }
 
     protected getDisplayName():string {
-        let graphResourceName = AngularJSBridge.getFilter('graphResourceName');
-        let resourceName = AngularJSBridge.getFilter('resourceName');
-        return graphResourceName(resourceName(this.componentInstance.name));
+        let resourceName = ResourceNamePipe.getDisplayName(this.componentInstance.name);
+        return ComponentInstanceNodesStyle.getGraphDisplayName(resourceName);
     }
 
     //TODO:: move to Base class ???
-    private updateNodeStyles(node,canvasWidth,imageBase64){
+    private updateNodeStyles(node,canvasWidth,imageBase64){     
         this.img = imageBase64;
         node.style({
             'background-image': this.img,
@@ -109,7 +113,7 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
             'background-height': canvasWidth,
             'background-position-x':0,
             'background-position-y':0
-        });
+        });        
     }
 
 }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts
index 78bcc17186..cac48df632 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts
@@ -20,7 +20,7 @@
 
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 import {ComponentInstance, CompositionCiNodeBase} from "../../../../models";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 export class CompositionCiNodeConfiguration extends CompositionCiNodeBase {
 
     constructor(instance:ComponentInstance,
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
index 05a6d790ab..9b6a4ed0aa 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
@@ -20,7 +20,7 @@
 
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import {AngularJSBridge} from "../../../../services/angular-js-bridge-service";
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts
index 5ef3a733b2..a46e0c4d32 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts
@@ -18,9 +18,9 @@
  * ============LICENSE_END=========================================================
  */
 
-import {ComponentInstance, CompositionCiNodeBase} from "app/models";
-import {ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service";
-import {ImagesUrl, GraphUIObjects} from "app/utils";
+import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
+import {ComponentInstance, CompositionCiNodeBase} from "../../../../models";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase {
     private isDependent: boolean;
     private originalImg: string;
@@ -50,7 +50,6 @@ export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase {
         }
 
     }
-
     public initUncertifiedDependentImage(node:Cy.Collection, nodeMinSize:number):string {
         return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'uncertified_dependent.png');
     }
@@ -58,5 +57,4 @@ export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase {
     public initDependentImage(node:Cy.Collection, nodeMinSize:number):string {
         return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'dependent.png');
     }
-
 }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
index bf8facf002..5b6281560c 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
@@ -20,7 +20,7 @@
 
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 import {ComponentInstance, CompositionCiNodeBase} from "../../../../models";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 export class CompositionCiNodeService extends CompositionCiNodeBase {
 
     constructor(instance:ComponentInstance,
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
index a79b183db4..f769e69ec1 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
@@ -19,7 +19,7 @@
  */
 
 import {CompositionCiNodeCp, ComponentInstance} from "./../../../../models";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import { ImagesUrl} from "../../../../utils/constants";
 
 export class CompositionCiNodeUcpeCp extends CompositionCiNodeCp {
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
index d4172c0eaa..242e96857d 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
@@ -19,7 +19,7 @@
  */
 
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
 import { ImagesUrl} from "../../../../utils/constants";
 
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
index 4aff85e6c3..c5d2d9e34b 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
@@ -19,7 +19,7 @@
  */
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 
 export class CompositionCiNodeVf extends CompositionCiNodeBase {
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
index 5f07986d5c..4c16661548 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
@@ -18,7 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
 import {ImagesUrl} from "../../../../utils/constants";
 
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
index a440f09156..2407593665 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
@@ -19,7 +19,7 @@
  */
 import * as _ from "lodash";
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 
diff --git a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
index 245f2e10d9..bcd2f7e111 100644
--- a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
+++ b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
@@ -22,8 +22,10 @@
 import {CompositionCiNodeUcpeCp, Module, ModuleNodeBase, CompositionCiNodeVf, CompositionCiNodeVl, CompositionCiNodeCp, CompositionCiNodeConfiguration,
     NodeUcpe, CompositionCiNodeService,CompositionCiNodeServiceProxy, CompositionCiNodeBase, ComponentInstance} from "./../../../models";
 import {ComponentType, ResourceType} from "../../../utils/constants";
-import {ImageCreatorService} from "../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
+import {Injectable} from "@angular/core";
 
+@Injectable()
 export class NodesFactory {
 
     constructor(private imageCreator:ImageCreatorService) {
@@ -54,7 +56,6 @@ export class NodesFactory {
     };
 
     public createModuleNode = (module:Module):ModuleNodeBase => {
-
         return new ModuleNodeBase(module);
     };
 
@@ -64,6 +65,3 @@ export class NodesFactory {
     }
 }
 
-NodesFactory.$inject = [
-    'ImageCreatorService'
-];
diff --git a/catalog-ui/src/app/models/graph/relationship.ts b/catalog-ui/src/app/models/graph/relationship.ts
index 8d56272fa0..13a1bd13e0 100644
--- a/catalog-ui/src/app/models/graph/relationship.ts
+++ b/catalog-ui/src/app/models/graph/relationship.ts
@@ -119,4 +119,11 @@ export class Relationship {
         this.capability = capability;
         this.requirement = requirement;
     };
+
+    public toJSON = ():any => {
+        let temp = angular.copy(this);
+        temp.capability = undefined;
+        temp.requirement = undefined;
+        return temp;
+    }
 }
diff --git a/catalog-ui/src/app/models/graph/zones/group-instance.ts b/catalog-ui/src/app/models/graph/zones/group-instance.ts
index 92d850b894..4001b94df3 100644
--- a/catalog-ui/src/app/models/graph/zones/group-instance.ts
+++ b/catalog-ui/src/app/models/graph/zones/group-instance.ts
@@ -27,24 +27,24 @@ export class GroupInstance {
     public originArchived?:boolean;
 
 
-    constructor(group:GroupInstance) {
-
-        this.name = group.name;
-        this.groupUUID = group.groupUUID;
-        this.invariantUUID = group.invariantUUID;
-        this.propertyValueCounter = group.propertyValueCounter;
-        this.type = group.type;
-        this.typeUid = group.typeUid;
-        this.uniqueId = group.uniqueId;
-        this.version = group.version;
-        this.artifacts = group.artifacts;
-        this.artifactsUuid = group.artifactsUuid;
-        this.properties = CommonUtils.initProperties(group.properties);
-        this.members = _.values(group.members);
-        this.description = group.description;
-        this.empty = group.empty;
-        this.ownerId = group.ownerId;
-
+    constructor(group?:GroupInstance) {
+        if (group) {
+            this.name = group.name;
+            this.groupUUID = group.groupUUID;
+            this.invariantUUID = group.invariantUUID;
+            this.propertyValueCounter = group.propertyValueCounter;
+            this.type = group.type;
+            this.typeUid = group.typeUid;
+            this.uniqueId = group.uniqueId;
+            this.version = group.version;
+            this.artifacts = group.artifacts;
+            this.artifactsUuid = group.artifactsUuid;
+            this.properties = CommonUtils.initProperties(group.properties);
+            this.members = _.values(group.members);
+            this.description = group.description;
+            this.empty = group.empty;
+            this.ownerId = group.ownerId;
+        }
         this.iconSprite = '';
         this.icon = 'icon-group';
     }
diff --git a/catalog-ui/src/app/models/graph/zones/policy-instance.ts b/catalog-ui/src/app/models/graph/zones/policy-instance.ts
index cef1705a41..9dd2d5f212 100644
--- a/catalog-ui/src/app/models/graph/zones/policy-instance.ts
+++ b/catalog-ui/src/app/models/graph/zones/policy-instance.ts
@@ -5,6 +5,7 @@ import {GroupInstance} from "./group-instance";
 import {ComponentInstance} from "../../componentsInstances/componentInstance";
 import {TargetUiObject} from "../../ui-models/ui-target-object";
 import {TargetOrMemberType} from "../../../utils/constants";
+import * as _ from 'lodash';
 
 /* The request and response should be same model, need to fix in BE */
 export class PolicyTargetsMap {
@@ -66,24 +67,25 @@ export class PolicyInstance implements IZoneInstanceMethod {
 
 
     constructor(policy?:PolicyInstance) {
-        this.componentName = policy.componentName;
-        this.description = policy.description;
-        this.empty = policy.empty;
-        this.invariantName = policy.invariantName;
-        this.invariantUUID = policy.invariantUUID;
-        this.isFromCsar = policy.isFromCsar;
-        
-        this.name = policy.name;
-        this.normalizedName =policy.normalizedName;
-        this.type = policy.type;
-        this.policyTypeUid = policy.policyTypeUid;
-        this.policyUUID = policy.policyUUID;
-        this.properties = CommonUtils.initProperties(policy.properties);
-        this.targets = policy.targets;
-        this.uniqueId = policy.uniqueId;
-        this.version = policy.version;
-        this.instanceUniqueId = policy.instanceUniqueId;
-
+        if(policy){
+            this.componentName = policy.componentName;
+            this.description = policy.description;
+            this.empty = policy.empty;
+            this.invariantName = policy.invariantName;
+            this.invariantUUID = policy.invariantUUID;
+            this.isFromCsar = policy.isFromCsar;
+            
+            this.name = policy.name;
+            this.normalizedName =policy.normalizedName;
+            this.type = policy.type;
+            this.policyTypeUid = policy.policyTypeUid;
+            this.policyUUID = policy.policyUUID;
+            this.properties = CommonUtils.initProperties(policy.properties);
+            this.targets = policy.targets;
+            this.uniqueId = policy.uniqueId;
+            this.version = policy.version;
+            this.instanceUniqueId = policy.instanceUniqueId;           
+        }
         this.iconSprite = '';
         this.icon = 'icon-policy';
     }
diff --git a/catalog-ui/src/app/models/graph/zones/zone-instance.ts b/catalog-ui/src/app/models/graph/zones/zone-instance.ts
index fb8ec7761a..ee6473a20c 100644
--- a/catalog-ui/src/app/models/graph/zones/zone-instance.ts
+++ b/catalog-ui/src/app/models/graph/zones/zone-instance.ts
@@ -43,11 +43,11 @@ export class ZoneInstance {
     hidden:boolean;
     forceSave:Subject<Function>;
 
-    constructor(instance: PolicyInstance | GroupInstance, topologyTemplate:TopologyTemplate) {
+    constructor(instance: PolicyInstance | GroupInstance, topologyTemplateType: string, topologyTemplateId: string) {
 
         this.instanceData = instance;
-        this.parentComponentType = topologyTemplate.componentType;
-        this.parentComponentID = topologyTemplate.uniqueId;
+        this.parentComponentType = topologyTemplateType;
+        this.parentComponentID = topologyTemplateId;
 
         if (instance instanceof PolicyInstance) {
             this.type = ZoneInstanceType.POLICY;
diff --git a/catalog-ui/src/app/models/heat-parameters.ts b/catalog-ui/src/app/models/heat-parameters.ts
index 153108a5f4..a6784ae79d 100644
--- a/catalog-ui/src/app/models/heat-parameters.ts
+++ b/catalog-ui/src/app/models/heat-parameters.ts
@@ -30,6 +30,7 @@ export class HeatParameterModel {
     description:string;
     currentValue:string;
     defaultValue:string;
+    envDisplayName:string;
 
     filterTerm:string;
     constructor(parameter?:HeatParameterModel) {
diff --git a/catalog-ui/src/app/models/home-filter.ts b/catalog-ui/src/app/models/home-filter.ts
new file mode 100644
index 0000000000..2aa509b3d8
--- /dev/null
+++ b/catalog-ui/src/app/models/home-filter.ts
@@ -0,0 +1,30 @@
+import { IEntityFilterObject, ISearchFilter } from "app/ng2/pipes/entity-filter.pipe";
+
+export interface IHomeFilterParams {
+    'filter.term': string;
+    'filter.distributed': string;
+    'filter.status': string
+}
+
+
+export class HomeFilter implements IEntityFilterObject{
+    selectedStatuses: Array<string>;
+    distributed: Array<string>;
+    search: ISearchFilter;
+
+    constructor(params = {}) {
+        this.search = { filterTerm : params['filter.term'] || "" };
+        this.selectedStatuses = params['filter.status']? params['filter.status'].split(',') : [];
+        this.distributed = params['filter.distributed']? params['filter.distributed'].split(',') : []
+        
+    }
+
+    public toUrlParam = ():IHomeFilterParams => {
+        return {
+            'filter.term': this.search.filterTerm,
+            'filter.distributed': this.distributed && this.distributed.join(',') || null,
+            'filter.status': this.selectedStatuses && this.selectedStatuses.join(',') || null
+        };
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/inputs.ts b/catalog-ui/src/app/models/inputs.ts
index e5b2274835..49fd16dfaf 100644
--- a/catalog-ui/src/app/models/inputs.ts
+++ b/catalog-ui/src/app/models/inputs.ts
@@ -27,7 +27,7 @@ import {InputPropertyBase} from "./input-property-base";
 import {SchemaPropertyGroupModel} from "./aschema-property";
 
 export class InputsGroup {
-    constructor(inputsObj?:InputsGroup) {
+    constructor(inputsObj?: InputsGroup) {
         _.forEach(inputsObj, (inputs:Array<InputModel>, instance) => {
             this[instance] = [];
             _.forEach(inputs, (input:InputModel):void => {
diff --git a/catalog-ui/src/app/models/modules/base-module.ts b/catalog-ui/src/app/models/modules/base-module.ts
index e27065bbfa..b016427394 100644
--- a/catalog-ui/src/app/models/modules/base-module.ts
+++ b/catalog-ui/src/app/models/modules/base-module.ts
@@ -48,7 +48,7 @@ export class Module {
     public groupInstanceUniqueId:string; // This will only have a value if this is a group instance
 
     constructor(module?:Module) {
-        if (module) {
+        if (module) {   
             this.name = module.name;
             this.groupUUID = module.groupUUID;
             this.invariantUUID = module.invariantUUID;
diff --git a/catalog-ui/src/app/models/operation.ts b/catalog-ui/src/app/models/operation.ts
index bf037729e4..30095b92ef 100644
--- a/catalog-ui/src/app/models/operation.ts
+++ b/catalog-ui/src/app/models/operation.ts
@@ -2,16 +2,20 @@
 
 export class OperationParameter {
     name: string;
-    type: String;
-    inputId: string;
-    required: boolean;
+    type: string;
+    inputId?: string;
+    required?: boolean;
+    property?: string;
+    mandatory?: boolean;
 
     constructor(param?: any) {
         if (param) {
             this.name = param.name;
             this.type = param.type;
-            this.inputId = param.inputId;
+            this.inputId = param.inputId ;
             this.required = param.required;
+            this.property = param.property;
+            this.mandatory = param.mandatory;
         }
     }
 }
@@ -76,17 +80,41 @@ export class BEOperationModel {
     }
 }
 
-export class OperationModel extends BEOperationModel {
+export class OperationModel extends BEOperationModel{
     interfaceType: string;
     interfaceId: string;
-    artifactFileName: string;
-    artifactData: any;
+    operationType: string;
+    description: string;
+    uniqueId: string;
+    artifactFileName?: string;
+    artifactData?: any;
+
+    inputParams: IOperationParamsList;
+    outputParams: IOperationParamsList;
+
+    workflowId: string;
+    workflowVersionId: string;
+
+    protected OperationTypeEnum: Array<String> = [
+        'Create',
+        'Delete',
+        'Instantiate',
+        'Start',
+        'Stop'
+    ];
 
     constructor(operation?: any) {
         super(operation);
         if (operation) {
             this.interfaceId = operation.interfaceId;
             this.interfaceType = operation.interfaceType;
+            this.description = operation.description;
+            this.inputParams = operation.inputParams;
+            this.operationType = operation.operationType;
+            this.outputParams = operation.outputParams;
+            this.uniqueId = operation.uniqueId;
+            this.workflowId = operation.workflowId;
+            this.workflowVersionId = operation.workflowVersionId;
             this.artifactFileName = operation.artifactFileName;
             this.artifactData = operation.artifactData;
         }
@@ -95,6 +123,22 @@ export class OperationModel extends BEOperationModel {
     public displayType(): string {
         return displayType(this.interfaceType);
     }
+
+    public createInputParamsList(inputParams: Array<OperationParameter>): void {
+        this.inputParams = {
+            listToscaDataDefinition: inputParams
+        };
+    }
+
+    public createOutputParamsList(outputParams: Array<OperationParameter>): void {
+        this.outputParams = {
+            listToscaDataDefinition: outputParams
+        };
+    }
+}
+
+export interface CreateOperationResponse extends OperationModel {
+    artifactUUID: string;
 }
 
 export class InterfaceModel {
@@ -115,4 +159,4 @@ export class InterfaceModel {
     }
 }
 
-const displayType = (type:string) => type && type.substr(type.lastIndexOf('.') + 1);
+const displayType = (type:string) => type && type.substr(type.lastIndexOf('.') + 1);
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/paths-and-names.ts b/catalog-ui/src/app/models/paths-and-names.ts
index 7304d9641f..1e151647a6 100644
--- a/catalog-ui/src/app/models/paths-and-names.ts
+++ b/catalog-ui/src/app/models/paths-and-names.ts
@@ -20,4 +20,4 @@
 
 export class PathsAndNamesDefinition {
   constructor(public path: string, public friendlyName: string, public searchable: boolean = true) {}
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
index 33e83ce00a..82f15a83d4 100644
--- a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
+++ b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
@@ -55,7 +55,6 @@ export class DerivedFEProperty extends PropertyBEModel {
             this.name = UUID.UUID();
             this.parentName = parentName;
             this.propertiesName = parentName + '#' + this.name;
-
             
             if (property.type == PROPERTY_TYPES.LIST) {
                 this.mapKey = property.schema.property.type.split('.').pop();
@@ -75,6 +74,7 @@ export class DerivedFEProperty extends PropertyBEModel {
             this.schema = new SchemaPropertyGroupModel(new SchemaProperty(property.schema.property));
             this.updateValueObjOrig();
         }
+        // this.constraints = property ? property.constraints : null;
         this.valueObjIsValid = true;
         this.derivedDataType = this.getDerivedPropertyType();
     }
diff --git a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
index 5d25142e5a..1d263bd8b0 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
@@ -18,8 +18,11 @@
  * ============LICENSE_END=========================================================
  */
 
-import {PropertyInputDetail, SchemaPropertyGroupModel, SchemaProperty, ToscaPresentationData} from "app/models";
-import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
+import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils/constants';
+import { SchemaProperty, SchemaPropertyGroupModel } from '../aschema-property';
+import { ToscaPresentationData } from '../tosca-presentation';
+import { PropertyInputDetail } from './property-input-detail';
+
 export enum DerivedPropertyType {
     SIMPLE,
     LIST,
@@ -29,7 +32,7 @@ export enum DerivedPropertyType {
 export class PropertyPolicyDetail {
     policyId: string;
     propertyName: string;
-    constructor(propertyPolicy?:PropertyPolicyDetail) {
+    constructor(propertyPolicy?: PropertyPolicyDetail) {
         if(propertyPolicy) {
             this.policyId = propertyPolicy.policyId;
             this.propertyName = propertyPolicy.propertyName;
@@ -39,13 +42,13 @@ export class PropertyPolicyDetail {
 
 export class PropertyBEModel {
 
-    constraints: Array<any>;
+    constraints: any[];
     defaultValue: string;
     definition: boolean;
     description: string;
     fromDerived: boolean;
-    getInputValues: Array<PropertyInputDetail>;
-    getPolicyValues: Array<PropertyPolicyDetail>;
+    getInputValues: PropertyInputDetail[];
+    getPolicyValues: PropertyPolicyDetail[];
     name: string;
     origName: string;
     parentUniqueId: string;
@@ -88,54 +91,28 @@ export class PropertyBEModel {
 
         if (!this.schema || !this.schema.property) {
             this.schema = new SchemaPropertyGroupModel(new SchemaProperty());
-        } else { //forcing creating new object, so editing different one than the object in the table
+        } else { // forcing creating new object, so editing different one than the object in the table
             this.schema = new SchemaPropertyGroupModel(new SchemaProperty(this.schema.property));
         }
     }
 
-
-
     public toJSON = (): any => {
-        let temp = angular.copy(this);
-        temp.value = temp.value === "{}" || temp.value === "[]" ? undefined : temp.value;
-        temp.defaultValue = temp.defaultValue === "{}" || temp.defaultValue === "[]" ? undefined : temp.defaultValue;
+        const temp = angular.copy(this);
+        temp.value = temp.value === '{}' || temp.value === '[]' ? undefined : temp.value;
+        temp.defaultValue = temp.defaultValue === '{}' || temp.defaultValue === '[]' ? undefined : temp.defaultValue;
         return temp;
-    };
+    }
 
     public getDerivedPropertyType = () => {
         if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1) {
             return DerivedPropertyType.SIMPLE;
-        } else if (this.type == PROPERTY_TYPES.LIST) {
+        } else if (this.type === PROPERTY_TYPES.LIST) {
             return DerivedPropertyType.LIST;
-        } else if (this.type == PROPERTY_TYPES.MAP) {
+        } else if (this.type === PROPERTY_TYPES.MAP) {
             return DerivedPropertyType.MAP;
         } else {
             return DerivedPropertyType.COMPLEX;
         }
     }
-
 }
 
-
-// EXTRAS FROM CONSTRUCTOR:
-//         this.source = property.source;
-//         this.valueUniqueUid = property.valueUniqueUid;
-//         this.path = property.path;
-//         this.rules = property.rules;
-//         this.resourceInstanceUniqueId = property.resourceInstanceUniqueId;
-//         this.readonly = property.readonly;
-//         this.simpleType = property.simpleType;
-//         this.componentInstanceId = property.componentInstanceId;
-//         this.parentValue = property.parentValue;
-//NEW PROPERTIES MAY NEED:
-// export class PropertyFEModel extends PropertyBEModel {
-//     componentInstanceId: string;
-//     isAlreadySelected: boolean;
-//     filterTerm: string;
-// }
-//FOR INPUTS, BE ALSO INCLUDES:
-//export class InputFEModel extends PropertyBEModel {
-//     hidden: boolean;
-//     label: string;
-//     immutable: boolean;
-// }
diff --git a/catalog-ui/src/app/models/properties.ts b/catalog-ui/src/app/models/properties.ts
index 016c5b9f20..b87edff0c1 100644
--- a/catalog-ui/src/app/models/properties.ts
+++ b/catalog-ui/src/app/models/properties.ts
@@ -40,6 +40,7 @@ export class PropertiesGroup {
 export interface IPropertyModel extends InputPropertyBase {
 
     //server data
+    //constraints:Array<Object>;
     source:string;
 
     //instance properties
@@ -59,6 +60,7 @@ export class PropertyModel extends PropertyBEModel implements IPropertyModel {
     //server data
     uniqueId:string;
     name:string;
+    constraints:Array<Object>;
     defaultValue:string;
     description:string;
     password:boolean;
@@ -91,6 +93,7 @@ export class PropertyModel extends PropertyBEModel implements IPropertyModel {
     constructor(property?:PropertyModel) {
         super(property);
         if (property) {
+            // this.constraints = property.constraints;
             this.source = property.source;
             this.valueUniqueUid = property.valueUniqueUid;
             this.path = property.path;
diff --git a/catalog-ui/src/app/models/relationship-types.ts b/catalog-ui/src/app/models/relationship-types.ts
index 8ae827bff4..72e64024f7 100644
--- a/catalog-ui/src/app/models/relationship-types.ts
+++ b/catalog-ui/src/app/models/relationship-types.ts
@@ -14,7 +14,7 @@
  * permissions and limitations under the License.
  */
 
-import {ToscaPresentationData} from "./tosca-presentation";
+import {ToscaPresentationData} from './tosca-presentation';
 
 export class RelationshipTypesMap {
     relationshipTypesMap: RelationshipTypesMapData;
diff --git a/catalog-ui/src/app/models/requirement.ts b/catalog-ui/src/app/models/requirement.ts
index 3cc0cf22e4..d58aabd457 100644
--- a/catalog-ui/src/app/models/requirement.ts
+++ b/catalog-ui/src/app/models/requirement.ts
@@ -51,7 +51,7 @@ export class Requirement implements RequirementCapabilityModel{
     uniqueId:string;
     relationship:string;
     leftOccurrences:string;
-    minOccurrences: number;
+    minOccurrences:string | number;
     maxOccurrences:string;
     //custom
     filterTerm:string;
@@ -102,4 +102,14 @@ export class Requirement implements RequirementCapabilityModel{
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
+export class RequirementUI extends Requirement {
+    isCreatedManually: boolean;
+
+    constructor(input: Requirement, componentUniqueId: string) {
+        super(input);
+        this.isCreatedManually = input.ownerId === componentUniqueId;
+    }
+}
+
 
diff --git a/catalog-ui/src/app/models/schema-attribute.ts b/catalog-ui/src/app/models/schema-attribute.ts
index c635203e17..35211d4db8 100644
--- a/catalog-ui/src/app/models/schema-attribute.ts
+++ b/catalog-ui/src/app/models/schema-attribute.ts
@@ -19,12 +19,13 @@
  */
 
 'use strict';
-import {SchemaProperty} from "./aschema-property";
+
+import { SchemaProperty } from './aschema-property';
 
 export class SchemaAttributeGroupModel {
-    property:SchemaAttribute;
+    property: SchemaAttribute;
 
-    constructor(schemaAttribute?:SchemaAttribute) {
+    constructor(schemaAttribute?: SchemaAttribute) {
         this.property = schemaAttribute;
     }
 }
diff --git a/catalog-ui/src/app/models/server-error-response.spec.ts b/catalog-ui/src/app/models/server-error-response.spec.ts
new file mode 100644
index 0000000000..c5c465d1ca
--- /dev/null
+++ b/catalog-ui/src/app/models/server-error-response.spec.ts
@@ -0,0 +1,74 @@
+import { ServerErrors } from '../utils/constants';
+import { ServerErrorResponse } from './server-error-response';
+
+describe('Test Error Response', () => {
+
+    const requestError = {
+        serviceException: {
+            ecompRequestId: 'd01d4bca-2afa-4394-97c5-6d1b04409545',
+            messageId: 'SVC4558',
+            text: 'Error: Action is not permitted as your \'%1\' includes non-validated \'%2\' resource.',
+            variables: ['service', 'vf1']
+        }
+    };
+
+    const ng1ErrorResponse = {
+        status: 403,
+        data: { requestError },
+        statusText: 'Forbidden'
+    };
+
+    const ng5ErrorResponse = {
+        status: 403,
+        error: { requestError },
+        statusText: 'Forbidden'
+    };
+
+    const ng5InternalServerError = {
+        status: 500,
+        error: 'Oops, server error has occurred...',
+        statusText: 'Internal Server Error'
+    };
+
+    const ng1InternalServerError = {
+        status: 500,
+        data: 'Oops, server error has occurred...',
+        statusText: 'Internal Server Error'
+    };
+
+    it('NG1: Verify that server error response is constructed correctly from NG1 structure', () => {
+        const response: ServerErrorResponse = new ServerErrorResponse(ng1ErrorResponse, true);
+        const formatterMessage = 'Action is not permitted as your \'service\' includes non-validated \'vf1\' resource.';
+
+        expect(response.ecompRequestId).toEqual(ng1ErrorResponse.data.requestError.serviceException.ecompRequestId);
+        expect(response.message).toEqual(formatterMessage);
+        expect(response.status).toEqual(ng1ErrorResponse.status);
+        expect(response.title).toEqual(ServerErrors.ERROR_TITLE);
+    });
+
+    it('NG5: Verify that server error response is constructed correctly from NG5 structure', () => {
+        const response: ServerErrorResponse = new ServerErrorResponse(ng5ErrorResponse);
+        const formatterMessage = 'Action is not permitted as your \'service\' includes non-validated \'vf1\' resource.';
+
+        expect(response.ecompRequestId).toEqual(ng5ErrorResponse.error.requestError.serviceException.ecompRequestId);
+        expect(response.message).toEqual(formatterMessage);
+        expect(response.status).toEqual(ng5ErrorResponse.status);
+        expect(response.title).toEqual(ServerErrors.ERROR_TITLE);
+    });
+
+    it('NG1: Verify that internal server error produce generic message', () => {
+        const response: ServerErrorResponse = new ServerErrorResponse(ng1InternalServerError, true);
+
+        expect(response.message).toEqual(ServerErrors.DEFAULT_ERROR);
+        expect(response.status).toEqual(ng5InternalServerError.status);
+        expect(response.title).toEqual(ServerErrors.ERROR_TITLE);
+    });
+
+    it('NG5: Verify that internal server error produce generic message', () => {
+        const response: ServerErrorResponse = new ServerErrorResponse(ng5InternalServerError);
+
+        expect(response.message).toEqual(ServerErrors.DEFAULT_ERROR);
+        expect(response.status).toEqual(ng5InternalServerError.status);
+        expect(response.title).toEqual(ServerErrors.ERROR_TITLE);
+    });
+});
diff --git a/catalog-ui/src/app/models/server-error-response.ts b/catalog-ui/src/app/models/server-error-response.ts
index 61d09af48b..247774ce2a 100644
--- a/catalog-ui/src/app/models/server-error-response.ts
+++ b/catalog-ui/src/app/models/server-error-response.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -21,9 +21,8 @@
 /**
  * Created by ngordon on 7/27/2017.
  */
-
-import { Response } from '@angular/http';
-import { SEVERITY, ServerErrors } from "../utils/constants";
+import { ServerErrors } from '../utils/constants';
+import '../utils/prototypes';
 
 export class ServerErrorResponse {
 
@@ -31,48 +30,72 @@ export class ServerErrorResponse {
     message: string;
     messageId: string;
     status: number;
-    severity: SEVERITY;
-
-    constructor(response?: Response) {
+    ecompRequestId: string;
 
+    constructor(response?: any, isNg1Response?: boolean) {
         if (response) {
-            let rejectionObj: any = {};
-            if (response.text().length) {
-                let rejection = response.json();
-                rejectionObj = rejection.serviceException || rejection.requestError && (rejection.requestError.serviceException || rejection.requestError.policyException);
-                rejectionObj.text = this.getFormattedMessage(rejectionObj.text || ServerErrors.MESSAGE_ERROR, rejectionObj.variables);
+            if (isNg1Response) {
+                // Shall handle the case where this error response is generated from the NG1 http interceptor
+                this.setValuesByRejectionObject(response, response.data);
+            } else {
+                // Shall handle NG5 http error responses
+                this.setValuesByRejectionObject(response, response.error);
             }
+        }
+    }
+
+    private setValuesByRejectionObject(response: any, errorResponseBody: any) {
+        let rejectionObj: any = {};
 
+        // If it is an internal server error, we dont want to expose anything to the user, just display a default error an return
+        if (response.status === 500) {
             this.title = ServerErrors.ERROR_TITLE;
-            this.message = rejectionObj.text || response.statusText || ServerErrors.DEFAULT_ERROR;
-            this.messageId = rejectionObj.messageId;
+            this.message = ServerErrors.DEFAULT_ERROR;
             this.status = response.status;
-            this.severity = SEVERITY.ERROR;
+            return;
         }
-    }
 
+        if (errorResponseBody) {
+            if (errorResponseBody.requestError || errorResponseBody.serviceException) {
+                rejectionObj = errorResponseBody.serviceException || errorResponseBody.requestError.serviceException || errorResponseBody.requestError.policyException;
+                rejectionObj.text = this.getFormattedMessage(rejectionObj.text || ServerErrors.MESSAGE_ERROR, rejectionObj.variables);
+            } else if (errorResponseBody.type === 'application/octet-stream') {
+                rejectionObj.text = 'Error downloading file';
+                rejectionObj.title = ServerErrors.DOWNLOAD_ERROR;
+            } else if (errorResponseBody.message) {
+                rejectionObj.text = response.error.message;
+            } else {
+                rejectionObj.text = response.error;
+            }
+        }
+        this.title = rejectionObj.title || ServerErrors.ERROR_TITLE;
+        this.message = rejectionObj.text || response.statusText || ServerErrors.DEFAULT_ERROR;
+        this.messageId = rejectionObj.messageId;
+        this.status = response.status;
+        this.ecompRequestId = rejectionObj.ecompRequestId;
+    }
 
-    private getFormattedMessage = (text: string, variables: Array<string>): string => { //OLD CODE
-        // Remove the "Error: " text at the begining
-        if (text.trim().indexOf("Error:") === 0) {
-            text = text.replace("Error:", "").trim();
+    private getFormattedMessage = (text: string, variables: string[]): string => {
+        // Remove the "Error: " text at the beginning
+        if (text.trim().indexOf('Error:') === 0) {
+            text = text.replace('Error:', '').trim();
         }
 
-        //mshitrit DE199895 bug fix
+        // mshitrit DE199895 bug fix
         let count: number = 0;
-        variables.forEach(function (item) {
+        variables.forEach( (item) => {
             variables[count] = item ? item.replace('<', '&lt').replace('>', '&gt') : '';
             count++;
         });
 
         // Format the message in case has array to <ul><li>
-        text = text.replace(/\[%(\d+)\]/g, function (_, m) {
-            let tmp = [];
-            let list = variables[--m].split(";");
-            list.forEach(function (item) {
-                tmp.push("<li>" + item + "</li>");
+        text = text.replace(/\[%(\d+)\]/g, (_, m) => {
+            const tmp = [];
+            const list = variables[--m].split(';');
+            list.forEach((item) => {
+                tmp.push('<li>' + item + '</li>');
             });
-            return "<ul>" + tmp.join("") + "</ul>";
+            return '<ul>' + tmp.join('') + '</ul>';
         });
 
         // Format the message %1 %2
@@ -80,5 +103,5 @@ export class ServerErrorResponse {
 
         return text;
 
-    };
-}
\ No newline at end of file
+    }
+}
diff --git a/catalog-ui/src/app/models/service-instance-properties-and-interfaces.ts b/catalog-ui/src/app/models/service-instance-properties-and-interfaces.ts
index 168b0af215..41bd18481f 100644
--- a/catalog-ui/src/app/models/service-instance-properties-and-interfaces.ts
+++ b/catalog-ui/src/app/models/service-instance-properties-and-interfaces.ts
@@ -13,8 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-
-import {PropertyModel, InputModel, InterfaceModel} from 'app/models';
+import { PropertyModel, InputModel, InterfaceModel} from 'app/models';
 
 export class ServiceInstanceObject {
     id: string;
@@ -23,8 +22,8 @@ export class ServiceInstanceObject {
     inputs: Array<InputModel> = [];
     interfaces: Array<InterfaceModel> = [];
 
-    constructor(input?:any) {
-        if(input) {
+    constructor(input?: any) {
+        if (input) {
             this.id = input.id;
             this.name = input.name;
             this.properties = input.properties;
diff --git a/catalog-ui/src/app/models/service-instance-properties.ts b/catalog-ui/src/app/models/service-instance-properties.ts
deleted file mode 100644
index 9e9f1cce7f..0000000000
--- a/catalog-ui/src/app/models/service-instance-properties.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*!
- * Copyright © 2016-2018 European Support Limited
- *
- * 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.
- */
-
-import {PropertyModel} from 'app/models';
-
-export class ServiceInstanceObject {
-    id: string;
-    name: string;
-    properties: Array<PropertyModel> = [];
-
-    constructor(input?:any) {
-        if(input) {
-            this.id = input.id;
-            this.name = input.name;
-            this.properties = input.properties;
-        }
-    }
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/user.ts b/catalog-ui/src/app/models/user.ts
index 0fb5364290..7a9bed80f3 100644
--- a/catalog-ui/src/app/models/user.ts
+++ b/catalog-ui/src/app/models/user.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -17,69 +17,68 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-
 'use strict';
 
 export enum UserRole {
     ADMIN,
-    DESIGNER,
-    TESTER,
-    GOVERNOR,
-    OPS
+    DESIGNER
 }
 
+// tslint:disable-next-line:interface-name
 export interface IUserManager {
-    isInEditMode:boolean;
-    filterTerm:string;
+    isInEditMode: boolean;
+    filterTerm: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IUserProperties extends IUserManager {
-    firstName:string;
-    lastName:string;
-    userId:string;
-    email:string;
-    role:string;
-    tempRole:string;
-    lastLoginTime:string;
-    status:string;
+    firstName: string;
+    lastName: string;
+    userId: string;
+    email: string;
+    role: string;
+    tempRole: string;
+    lastLoginTime: string;
+    status: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IUser {
-    userInfo:IUserProperties;
-    getRole():UserRole;
-    getRoleToView():string;
-    getName():string;
-    getFirstName():string;
-    getLastName():string;
+    userInfo: IUserProperties;
+    getRole(): UserRole;
+    getRoleToView(): string;
+    getName(): string;
+    getFirstName(): string;
+    getLastName(): string;
 }
 
 export class User implements IUser {
 
-    constructor(public userInfo:IUserProperties) {
+    constructor(public userInfo: IUserProperties) {
     }
 
     public getLastName = () => {
         return this.userInfo.lastName;
-    };
+    }
 
     public getFirstName = () => {
         return this.userInfo.firstName;
-    };
+    }
 
     public getName = () => {
         return this.userInfo.firstName + ' ' + this.userInfo.lastName;
-    };
+    }
 
     public getLastLogin = () => {
-        if (!this.userInfo.lastLoginTime || this.userInfo.lastLoginTime === "0") {
-            return "";
+        if (!this.userInfo.lastLoginTime || this.userInfo.lastLoginTime === '0') {
+            return '';
         } else {
             return this.userInfo.lastLoginTime;
         }
-    };
+    }
 
-    public getRole = ():UserRole => {
-        let role:UserRole;
+    public getRole = (): UserRole => {
+        let role: UserRole;
         switch (UserRole[this.userInfo.role.toUpperCase()]) {
             case UserRole.ADMIN:
                 role = UserRole.ADMIN;
@@ -87,21 +86,12 @@ export class User implements IUser {
             case UserRole.DESIGNER:
                 role = UserRole.DESIGNER;
                 break;
-            case UserRole.TESTER:
-                role = UserRole.TESTER;
-                break;
-            case UserRole.GOVERNOR:
-                role = UserRole.GOVERNOR;
-                break;
-            case UserRole.OPS:
-                role = UserRole.OPS;
-                break;
         }
         return role;
-    };
+    }
 
-    public getRoleToView = ():string => {
-        let role:string = this.userInfo.role.toLowerCase().replace('governor', 'governance_Rep');
+    public getRoleToView = (): string => {
+        const role: string = this.userInfo.role.toLowerCase().replace('governor', 'governance_Rep');
         return role.charAt(0).toUpperCase() + role.slice(1).replace('_', ' ');
     }
 }
diff --git a/catalog-ui/src/app/models/validation-config.ts b/catalog-ui/src/app/models/validation-config.ts
index ac15d2850e..0e594fd63c 100644
--- a/catalog-ui/src/app/models/validation-config.ts
+++ b/catalog-ui/src/app/models/validation-config.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -24,9 +24,16 @@ class PropertyValue {
 }
 
 class validationPatterns {
-    string: string;
-    comment:string;
-    integer: string;
+    vendorRelease: RegExp;
+    stringOrEmpty: string;
+    vendorName: RegExp;
+    vendorModelNumber: RegExp;
+    tag: RegExp;
+    contactId: RegExp;
+    componentName: RegExp;
+    string: RegExp;
+    comment:RegExp;
+    integer: RegExp;
 }
 
 export class Validations {
@@ -38,3 +45,25 @@ export class ValidationConfiguration {
     static validation: Validations;
 
 }
+
+export class Validation {
+    componentNameValidationPattern:RegExp;
+    contactIdValidationPattern:RegExp;
+    tagValidationPattern:RegExp;
+    VendorReleaseValidationPattern:RegExp;
+    VendorNameValidationPattern:RegExp;
+    VendorModelNumberValidationPattern:RegExp;
+    commentValidationPattern:RegExp;
+
+    constructor(validationData?:Validations) {
+        if(validationData) {
+            this.commentValidationPattern = validationData.validationPatterns.comment;
+            this.componentNameValidationPattern = validationData.validationPatterns.componentName;
+            this.contactIdValidationPattern = validationData.validationPatterns.contactId;
+            this.tagValidationPattern = validationData.validationPatterns.tag;
+            this.VendorModelNumberValidationPattern = validationData.validationPatterns.vendorModelNumber;
+            this.VendorNameValidationPattern = validationData.validationPatterns.vendorName;
+            this.VendorReleaseValidationPattern = validationData.validationPatterns.vendorRelease;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts
index 720d29f8ce..23dc3cff48 100644
--- a/catalog-ui/src/app/modules/directive-module.ts
+++ b/catalog-ui/src/app/modules/directive-module.ts
@@ -3,7 +3,6 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * Modifications Copyright (C) 2019 Nokia. 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.
@@ -50,7 +49,10 @@ import {SelectTypeListDirective} from "../directives/select-property-types/selec
 import {ValidationOnLoadDirective} from "../directives/utils/validation-on-load/validation-on-load";
 import {InfoTooltipDirective} from "../directives/info-tooltip/info-tooltip";
 import {SdcTabsDirective} from "../directives/sdc-tabs/sdc-tabs-directive";
-import {SdcSingleTabDirective, InnerSdcSingleTabDirective} from "../directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive";
+import {
+    SdcSingleTabDirective,
+    InnerSdcSingleTabDirective
+} from "../directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive";
 import {ExpandCollapseListHeaderDirective} from "../directives/utils/expand-collapse-list-header/expand-collapse-list-header";
 import {JsonExportExcelDirective} from "../directives/export-json-to-excel/export-json-to-excel";
 import {TopProgressDirective} from "../directives/layout/top-progress/top-progress";
@@ -61,21 +63,8 @@ import {InputRowDirective} from "../directives/inputs-and-properties/inputs/inpu
 import {PropertyRowDirective} from "../directives/inputs-and-properties/properties/property-row-directive";
 import {NodesFactory} from "../models/graph/nodes/nodes-factory";
 import {LinksFactory} from "../models/graph/graph-links/links-factory";
-import {ImageCreatorService} from "../directives/graphs-v2/image-creator/image-creator.service";
-import {Palette} from "../directives/graphs-v2/palette/palette.directive";
-import {CompositionGraph} from "../directives/graphs-v2/composition-graph/composition-graph.directive";
-import {DeploymentGraph} from "../directives/graphs-v2/deployment-graph/deployment-graph.directive";
-import {CommonGraphUtils} from "../directives/graphs-v2/common/common-graph-utils";
-import {CompositionGraphNodesUtils} from "../directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils";
-import {CompositionGraphGeneralUtils} from "../directives/graphs-v2/composition-graph/utils/composition-graph-general-utils";
-import {CompositionGraphLinkUtils} from "../directives/graphs-v2/composition-graph/utils/composition-graph-links-utils";
-import {DeploymentGraphGeneralUtils} from "../directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils";
-import {CompositionGraphPaletteUtils} from "../directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils";
-import {CompositionGraphZoneUtils} from "../directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils";
-import {MatchCapabilitiesRequirementsUtils} from "../directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils";
 import {CapabilitiesListDirective} from "../directives/capabilities-and-requirements/capability/capabilities-list-directive";
 import {RequirementsListDirective} from "../directives/capabilities-and-requirements/requirement/requirements-list-directive";
-import {ServicePathGraphUtils} from "../directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils";
 import {PreventDoubleClickDirective} from "../directives/prevent-double-click/prevent-double-click";
 
 let moduleName:string = 'Sdc.Directives';
@@ -139,31 +128,6 @@ directiveModule.directive('propertyRow', PropertyRowDirective.factory);
 // //Util service for Graph
 directiveModule.service('NodesFactory', NodesFactory);
 directiveModule.service('LinksFactory', LinksFactory);
-directiveModule.service('ImageCreatorService', ImageCreatorService);
-//
-// //composition
-directiveModule.directive('palette', Palette.factory);
-directiveModule.directive('compositionGraph', CompositionGraph.factory);
-
-//
-// //deployment
-directiveModule.directive('deploymentGraph', DeploymentGraph.factory);
-//
-// //Graph Utils - Common
-directiveModule.service('CommonGraphUtils', CommonGraphUtils);
-//
-// //Composition Graph Utils
-directiveModule.service('CompositionGraphNodesUtils', CompositionGraphNodesUtils);
-directiveModule.service('CompositionGraphGeneralUtils', CompositionGraphGeneralUtils);
-directiveModule.service('CompositionGraphLinkUtils', CompositionGraphLinkUtils);
-directiveModule.service('CompositionGraphPaletteUtils', CompositionGraphPaletteUtils);
-directiveModule.service('CompositionGraphZoneUtils', CompositionGraphZoneUtils);
-directiveModule.service('MatchCapabilitiesRequirementsUtils', MatchCapabilitiesRequirementsUtils);
-directiveModule.service('ServicePathGraphUtils', ServicePathGraphUtils);
-
-//
-// //Deployment Graph Utils
-directiveModule.service('DeploymentGraphGeneralUtils', DeploymentGraphGeneralUtils);
 
 
 //Compoisiton right tab directives
@@ -172,24 +136,34 @@ directiveModule.directive('requirementsList', RequirementsListDirective.factory)
 
 
 // *** NG2 Components (downgraded) *** //
-import { downgradeComponent } from "@angular/upgrade/static";
-import { MenuListNg2Component } from "../ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component";
-import { TopNavComponent } from "../ng2/components/layout/top-nav/top-nav.component";
-import { ZoneContainerComponent } from "../ng2/components/ui/canvas-zone/zone-container.component";
-import { ZoneInstanceComponent } from "../ng2/components/ui/canvas-zone/zone-instance/zone-instance.component";
-import { CompositionPanelComponent } from 'app/ng2/pages/composition/panel/panel.component';
-import { PropertiesAssignmentComponent } from "../ng2/pages/properties-assignment/properties-assignment.page.component";
-import { SearchWithAutoCompleteComponent } from "../ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component";
-import { PalettePopupPanelComponent } from "../ng2/components/ui/palette-popup-panel/palette-popup-panel.component";
-import { ServicePathComponent } from '../ng2/components/logic/service-path/service-path.component';
-import { ServicePathSelectorComponent } from '../ng2/components/logic/service-path-selector/service-path-selector.component';
-import { ServiceConsumptionComponent } from '../ng2/components/logic/service-consumption/service-consumption.component';
-import { ServiceDependenciesComponent } from '../ng2/components/logic/service-dependencies/service-dependencies.component';
-import { MultilineEllipsisComponent } from "../ng2/shared/multiline-ellipsis/multiline-ellipsis.component";
+import {downgradeComponent} from "@angular/upgrade/static";
+import {MenuListNg2Component} from "../ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component";
+import {TopNavComponent} from "../ng2/components/layout/top-nav/top-nav.component";
+import {ZoneContainerComponent} from "../ng2/pages/composition/graph/canvas-zone/zone-container.component";
+import {ZoneInstanceComponent} from "../ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component";
+import {CompositionPanelComponent} from 'app/ng2/pages/composition/panel/composition-panel.component';
+import {PropertiesAssignmentComponent} from "../ng2/pages/properties-assignment/properties-assignment.page.component";
+import {SearchWithAutoCompleteComponent} from "../ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component";
+import {PalettePopupPanelComponent} from "../ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component";
+import {ServicePathSelectorComponent} from '../ng2/pages/composition/graph/service-path-selector/service-path-selector.component';
+import {MultilineEllipsisComponent} from "../ng2/shared/multiline-ellipsis/multiline-ellipsis.component";
 import { InterfaceOperationComponent } from '../ng2/pages/interface-operation/interface-operation.page.component';
 import { PluginFrameComponent } from "../ng2/components/ui/plugin/plugin-frame.component";
-import { TileComponent } from "../ng2/components/ui/tile/tile.component";
-
+import {TileComponent} from "../ng2/components/ui/tile/tile.component";
+import {CompositionPageComponent} from "../ng2/pages/composition/composition-page.component";
+import {CatalogComponent} from "../ng2/pages/catalog/catalog.component";
+import {HomeComponent} from "../ng2/pages/home/home.component";
+import {PluginContextViewPageComponent} from "../ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component";
+import {PluginTabViewPageComponent} from "../ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component";
+import {CompositionGraphComponent} from "../ng2/pages/composition/graph/composition-graph.component";
+import {DeploymentPageComponent} from "../ng2/pages/workspace/deployment/deployment-page.component";
+import {ActivityLogComponent} from "../ng2/pages/workspace/activity-log/activity-log.component";
+import {ToscaArtifactPageComponent} from "../ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component";
+import {InformationArtifactPageComponent} from "../ng2/pages/workspace/information-artifact/information-artifact-page.component";
+import {AttributesComponent} from "../ng2/pages/workspace/attributes/attributes.component";
+import {DeploymentArtifactsPageComponent} from "../ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component";
+import { ReqAndCapabilitiesComponent } from "../ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component";
+import { DistributionComponent } from '../ng2/pages/workspace/disribution/distribution.component';
 
 directiveModule.directive('menuListNg2', downgradeComponent({
     component: MenuListNg2Component,
@@ -204,14 +178,14 @@ directiveModule.directive('topNav', downgradeComponent({
 
 directiveModule.directive('ng2ZoneContainer', downgradeComponent({
     component: ZoneContainerComponent,
-        inputs: ['title', 'count', 'type', 'visible', 'minimized'],
+    inputs: ['title', 'count', 'type', 'visible', 'minimized'],
     outputs: ['minimize', 'backgroundClick']
 }) as angular.IDirectiveFactory);
 
 directiveModule.directive('ng2ZoneInstance', downgradeComponent({
-        component: ZoneInstanceComponent,
-        inputs: ['zoneInstance', 'isActive', 'activeInstanceMode', 'defaultIconText', 'isViewOnly', 'hidden', 'forceSave'],
-        outputs: ['modeChange', 'tagHandleClick', 'assignmentSaveStart', 'assignmentSaveComplete']
+    component: ZoneInstanceComponent,
+    inputs: ['zoneInstance', 'isActive', 'activeInstanceMode', 'defaultIconText', 'isViewOnly', 'hidden', 'forceSave'],
+    outputs: ['modeChange', 'tagHandleClick', 'assignmentSaveStart', 'assignmentSaveComplete']
 }) as angular.IDirectiveFactory);
 
 directiveModule.directive('ng2CompositionPanel', downgradeComponent({
@@ -223,6 +197,26 @@ directiveModule.directive('propertiesAssignment', downgradeComponent({
     component: PropertiesAssignmentComponent
 }) as angular.IDirectiveFactory);
 
+directiveModule.directive('compositionPage', downgradeComponent({
+    component: CompositionPageComponent
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('activityLog', downgradeComponent({
+    component: ActivityLogComponent
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('distribution', downgradeComponent({
+    component: DistributionComponent
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('attributes', downgradeComponent({
+    component: AttributesComponent
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('reqAndCapabilities', downgradeComponent({
+    component: ReqAndCapabilitiesComponent
+}) as angular.IDirectiveFactory);
+
 directiveModule.directive('ng2SearchWithAutocomplete', downgradeComponent({
     component: SearchWithAutoCompleteComponent,
     inputs: ['searchPlaceholder', 'searchBarClass', 'autoCompleteValues'],
@@ -235,31 +229,13 @@ directiveModule.directive('ng2PalettePopupPanel', downgradeComponent({
     outputs: []
 }) as angular.IDirectiveFactory);
 
-directiveModule.directive('ng2ServicePath', downgradeComponent({
-    component: ServicePathComponent,
-    inputs: ['onCreate', 'service', 'isViewOnly'],
-    outputs: []
-}) as angular.IDirectiveFactory);
-
 directiveModule.directive('ng2ServicePathSelector', downgradeComponent({
     component: ServicePathSelectorComponent,
     inputs: ['drawPath', 'deletePaths', 'service', 'selectedPathId'],
     outputs: []
 }) as angular.IDirectiveFactory);
 
-directiveModule.directive('ng2ServiceConsumption', downgradeComponent({
-    component: ServiceConsumptionComponent,
-    inputs: ['parentService', 'selectedService', 'selectedServiceInstanceId', 'instancesMappedList', 'parentServiceInputs', 'instancesCapabilitiesMap', 'readonly'],
-    outputs: []
-}) as angular.IDirectiveFactory);
-
-directiveModule.directive('ng2ServiceDependencies', downgradeComponent({
-    component: ServiceDependenciesComponent,
-    inputs: ['compositeService', 'currentServiceInstance', 'selectedInstanceProperties', 'selectedInstanceSiblings', 'selectedInstanceConstraints', 'readonly'],
-    outputs: ['updateRulesListEvent', 'loadRulesListEvent','dependencyStatus']
-}) as angular.IDirectiveFactory);
-
-directiveModule.directive('interfaceOperation', downgradeComponent({
+directiveModule.directive('ng2InterfaceOperation', downgradeComponent({
     component: InterfaceOperationComponent,
     inputs: ['component', 'readonly'],
     outputs: []
@@ -277,8 +253,60 @@ directiveModule.directive('ng2UiTile', downgradeComponent({
     outputs: ['onTileClick']
 }) as angular.IDirectiveFactory);
 
-directiveModule.directive('pluginFrame', downgradeComponent( {
+directiveModule.directive('pluginFrame', downgradeComponent({
     component: PluginFrameComponent,
     inputs: ['plugin', 'queryParams'],
     outputs: ['onLoadingDone']
 }) as angular.IDirectiveFactory);
+
+directiveModule.directive('catalogPage', downgradeComponent({
+    component: CatalogComponent,
+    inputs: [],
+    outputs: []
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('homePage', downgradeComponent({
+    component: HomeComponent,
+    inputs: [],
+    outputs: []
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('pluginContextView', downgradeComponent({
+    component: PluginContextViewPageComponent,
+    inputs: [],
+    outputs: []
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('pluginTabView', downgradeComponent({
+    component: PluginTabViewPageComponent,
+    inputs: [],
+    outputs: []
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('compositionGraph', downgradeComponent({
+    component: CompositionGraphComponent,
+    inputs: ['topologyTemplate', 'isViewOnly'],
+    outputs: []
+}) as angular.IDirectiveFactory);
+directiveModule.directive('toscaArtifactPage', downgradeComponent({
+    component: ToscaArtifactPageComponent,
+    inputs: [],
+    outputs: []
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('deploymentPage', downgradeComponent({
+    component: DeploymentPageComponent,
+    inputs: [],
+    outputs: []
+}) as angular.IDirectiveFactory);
+
+directiveModule.directive('informationArtifactPage', downgradeComponent({
+    component: InformationArtifactPageComponent,
+    inputs: [],
+    outputs: []
+}) as angular.IDirectiveFactory);
+directiveModule.directive('deploymentArtifactPage', downgradeComponent({
+    component: DeploymentArtifactsPageComponent,
+    inputs: [],
+    outputs: []
+}) as angular.IDirectiveFactory);
\ No newline at end of file
diff --git a/catalog-ui/src/app/modules/service-module.ts b/catalog-ui/src/app/modules/service-module.ts
index 7240682ae9..e2f4f1654a 100644
--- a/catalog-ui/src/app/modules/service-module.ts
+++ b/catalog-ui/src/app/modules/service-module.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,104 +18,112 @@
  * ============LICENSE_END=========================================================
  */
 
-import {ConfigurationUiService} from "../services/configuration-ui-service";
-import {CookieService} from "../services/cookie-service";
-import {EntityService} from "../services/entity-service";
-import {AvailableIconsService} from "../services/available-icons-service";
-import {UrlToBase64Service} from "../services/url-tobase64-service";
-import {CacheService} from "../services/cache-service";
-import {HeaderInterceptor} from "../services/header-interceptor";
-import {HttpErrorInterceptor} from "../services/http-error-interceptor";
-import {SharingService} from "../services/sharing-service";
-import {SdcVersionService} from "../services/sdc-version-service";
-import {ActivityLogService} from "../services/activity-log-service";
-import {OnboardingService} from "../services/onboarding-service";
-import {EcompHeaderService} from "../services/ecomp-service";
-import {DataTypesService} from "../services/data-types-service";
-import {ComponentService} from "../services/components/component-service";
-import {ServiceService} from "../services/components/service-service";
-import {ResourceService} from "../services/components/resource-service";
-import {LeftPaletteLoaderService} from "../services/components/utils/composition-left-palette-service";
-import {EventListenerService} from "../services/event-listener-service";
-import {ProgressService} from "../services/progress-service";
-import {ArtifactsUtils} from "../utils/artifacts-utils";
-import {FileUtils} from "../utils/file-utils";
-import {ValidationUtils} from "../utils/validation-utils";
-import {AngularJSBridge} from "../services/angular-js-bridge-service";
-import {LoaderService} from "../services/loader-service";
-import {CategoryResourceService} from "../services/category-resource-service";
-import {downgradeInjectable} from "@angular/upgrade/static";
-import {ModalService} from "../ng2/services/modal.service";
-import {SdcUiComponents} from "sdc-ui/lib/angular";
-import {ComponentServiceNg2} from "../ng2/services/component-services/component.service";
-import {ServiceServiceNg2} from "../ng2/services/component-services/service.service";
-import {ComponentServiceFactoryNg2} from "../ng2/services/component-services/component.service.factory";
-import {ConnectionWizardService} from "../ng2/pages/connection-wizard/connection-wizard.service";
-import {ComponentInstanceServiceNg2} from "../ng2/services/component-instance-services/component-instance.service";
-import {UserService as UserServiceNg2} from "../ng2/services/user.service";
-import {PoliciesService as PoliciesServiceNg2} from "../ng2/services/policies.service";
-import {GroupsService as GroupsServiceNg2} from "../ng2/services/groups.service";
-import {PluginsService} from "../ng2/services/plugins.service";
-import {EventBusService} from "../ng2/services/event-bus.service";
-import {DynamicComponentService} from "app/ng2/services/dynamic-component.service";
-import {AutomatedUpgradeService} from "../ng2/pages/automated-upgrade/automated-upgrade.service";
-import {ArchiveService as ArchiveServiceNg2} from "app/ng2/services/archive.service";
+import { downgradeInjectable } from '@angular/upgrade/static';
+import { CompositionService } from 'app/ng2/pages/composition/composition.service';
+import { CatalogService } from 'app/ng2/services/catalog.service';
+import { TopologyTemplateService } from 'app/ng2/services/component-services/topology-template.service';
+import { DynamicComponentService } from 'app/ng2/services/dynamic-component.service';
 import {GabService as GabServiceNg2} from "app/ng2/services/gab.service";
-import {ComponentFactory} from "app/utils/component-factory";
-import {ToscaTypesServiceNg2} from "app/ng2/services/tosca-types.service";
+import { ComponentFactory } from 'app/utils/component-factory';
+import { SdcUiServices } from 'onap-ui-angular';
+import { NodesFactory } from '../models/graph/nodes/nodes-factory';
+import { ImportVSPService } from '../ng2/components/modals/onboarding-modal/import-vsp.service';
+import { AutomatedUpgradeService } from '../ng2/pages/automated-upgrade/automated-upgrade.service';
+import { ConnectionWizardService } from '../ng2/pages/composition/graph/connection-wizard/connection-wizard.service';
+import { WorkspaceNg1BridgeService } from '../ng2/pages/workspace/workspace-ng1-bridge-service';
+import { WorkspaceService } from '../ng2/pages/workspace/workspace.service';
+import { AuthenticationService as AuthenticationServiceNg2 } from '../ng2/services/authentication.service';
+import { CacheService } from '../ng2/services/cache.service';
+import { ComponentInstanceServiceNg2 } from '../ng2/services/component-instance-services/component-instance.service';
+import { ComponentServiceNg2 } from '../ng2/services/component-services/component.service';
+import { ComponentServiceFactoryNg2 } from '../ng2/services/component-services/component.service.factory';
+import { ServiceServiceNg2 } from '../ng2/services/component-services/service.service';
+import { EventBusService } from '../ng2/services/event-bus.service';
+import { GroupsService as GroupsServiceNg2 } from '../ng2/services/groups.service';
+import { HomeService } from '../ng2/services/home.service';
+import { ModalService } from '../ng2/services/modal.service';
+import { OnboardingService } from '../ng2/services/onboarding.service';
+import { PluginsService } from '../ng2/services/plugins.service';
+import { PoliciesService as PoliciesServiceNg2 } from '../ng2/services/policies.service';
+import { SharingService } from '../ng2/services/sharing.service';
+import { ToscaTypesServiceNg2 } from '../ng2/services/tosca-types.service';
+import { UserService as UserServiceNg2 } from '../ng2/services/user.service';
+import { AngularJSBridge } from '../services/angular-js-bridge-service';
+import { AvailableIconsService } from '../services/available-icons-service';
+import { CategoryResourceService } from '../services/category-resource-service';
+import { ComponentService } from '../services/components/component-service';
+import { ResourceService } from '../services/components/resource-service';
+import { ServiceService } from '../services/components/service-service';
+import { LeftPaletteLoaderService } from '../services/components/utils/composition-left-palette-service';
+import { ConfigurationUiService } from '../services/configuration-ui-service';
+import { CookieService } from '../services/cookie-service';
+import { DataTypesService } from '../services/data-types-service';
+import { EcompHeaderService } from '../services/ecomp-service';
+import { EventListenerService } from '../services/event-listener-service';
+import { HeaderInterceptor } from '../services/header-interceptor';
+import { LoaderService } from '../services/loader-service';
+import { ProgressService } from '../services/progress-service';
+import { SdcVersionService } from '../services/sdc-version-service';
+import { UrlToBase64Service } from '../services/url-tobase64-service';
+import { FileUtils } from '../utils/file-utils';
+import { ValidationUtils } from '../utils/validation-utils';
+import {ReqAndCapabilitiesService} from "../ng2/pages/workspace/req-and-capabilities/req-and-capabilities.service";
 
-let moduleName:string = 'Sdc.Services';
-let serviceModule:ng.IModule = angular.module(moduleName, []);
+const moduleName: string = 'Sdc.Services';
+const serviceModule: ng.IModule = angular.module(moduleName, []);
 
 serviceModule.service('Sdc.Services.ConfigurationUiService', ConfigurationUiService);
 serviceModule.service('Sdc.Services.CookieService', CookieService);
 serviceModule.service('Sdc.Services.ComponentFactory', ComponentFactory); // Why you need to declare it again, already done in utils.ts
-serviceModule.service('Sdc.Services.EntityService', EntityService);
 serviceModule.service('Sdc.Services.AvailableIconsService', AvailableIconsService);
 serviceModule.service('Sdc.Services.UrlToBase64Service', UrlToBase64Service);
-serviceModule.service('Sdc.Services.CacheService', CacheService);
 serviceModule.service('Sdc.Services.HeaderInterceptor', HeaderInterceptor);
-serviceModule.service('Sdc.Services.HttpErrorInterceptor', HttpErrorInterceptor);
-serviceModule.service('Sdc.Services.SharingService', SharingService);
 serviceModule.service('Sdc.Services.SdcVersionService', SdcVersionService);
-serviceModule.service('Sdc.Services.ActivityLogService', ActivityLogService);
-serviceModule.service('Sdc.Services.OnboardingService', OnboardingService);
 serviceModule.service('Sdc.Services.EcompHeaderService', EcompHeaderService);
 serviceModule.service('Sdc.Services.DataTypesService', DataTypesService);
 
-//Components Services
+// Components Services
 serviceModule.service('Sdc.Services.Components.ComponentService', ComponentService);
-serviceModule.service('Sdc.Services.Components.ServiceService',ServiceService);
+serviceModule.service('Sdc.Services.Components.ServiceService', ServiceService);
 serviceModule.service('Sdc.Services.Components.ResourceService', ResourceService);
 serviceModule.service('LeftPaletteLoaderService', LeftPaletteLoaderService);
-serviceModule.service('EventListenerService', EventListenerService);
 serviceModule.service('Sdc.Services.ProgressService', ProgressService);
 
-//Utils
-serviceModule.service('ArtifactsUtils', ArtifactsUtils);
+// Utils
 serviceModule.service('FileUtils', FileUtils);
 serviceModule.service('ValidationUtils', ValidationUtils);
-
-serviceModule.service('AngularJSBridge',AngularJSBridge);
+serviceModule.service('AngularJSBridge', AngularJSBridge);
 serviceModule.service('LoaderService', LoaderService);
-
 serviceModule.factory('Sdc.Services.CategoryResourceService', CategoryResourceService.getResource);
 
 // Angular2 upgraded services - This is in order to use the service in angular1 till we finish remove all angular1 code
+serviceModule.service('Sdc.Services.SharingService', downgradeInjectable(SharingService));
+serviceModule.service('Sdc.Services.CacheService', downgradeInjectable(CacheService));
 serviceModule.factory('ComponentServiceNg2', downgradeInjectable(ComponentServiceNg2));
+serviceModule.factory('TopologyTemplateService', downgradeInjectable(TopologyTemplateService));
+serviceModule.factory('WorkspaceNg1BridgeService', downgradeInjectable(WorkspaceNg1BridgeService));
+serviceModule.factory('workspaceService', downgradeInjectable(WorkspaceService));
 serviceModule.factory('ComponentServiceFactoryNg2', downgradeInjectable(ComponentServiceFactoryNg2));
 serviceModule.factory('ServiceServiceNg2', downgradeInjectable(ServiceServiceNg2));
 serviceModule.factory('ModalServiceNg2', downgradeInjectable(ModalService));
-serviceModule.factory('ModalServiceSdcUI', downgradeInjectable(SdcUiComponents.ModalService));
+serviceModule.factory('ModalServiceSdcUI', downgradeInjectable(SdcUiServices.ModalService));
 serviceModule.factory('ConnectionWizardServiceNg2', downgradeInjectable(ConnectionWizardService));
 serviceModule.factory('ComponentInstanceServiceNg2', downgradeInjectable(ComponentInstanceServiceNg2));
 serviceModule.factory('UserServiceNg2', downgradeInjectable(UserServiceNg2));
+serviceModule.factory('AuthenticationServiceNg2', downgradeInjectable(AuthenticationServiceNg2));
 serviceModule.factory('PoliciesServiceNg2', downgradeInjectable(PoliciesServiceNg2));
 serviceModule.factory('GroupsServiceNg2', downgradeInjectable(GroupsServiceNg2));
 serviceModule.factory('PluginsService', downgradeInjectable(PluginsService));
 serviceModule.factory('EventBusService', downgradeInjectable(EventBusService));
 serviceModule.factory('DynamicComponentService', downgradeInjectable(DynamicComponentService));
-serviceModule.factory('ArchiveServiceNg2', downgradeInjectable(ArchiveServiceNg2));
+serviceModule.factory('HomeService', downgradeInjectable(HomeService));
+serviceModule.factory('CatalogService', downgradeInjectable(CatalogService));
 serviceModule.factory('GabServiceNg2', downgradeInjectable(GabServiceNg2));
 serviceModule.factory('AutomatedUpgradeService', downgradeInjectable(AutomatedUpgradeService));
 serviceModule.factory('ToscaTypesServiceNg2', downgradeInjectable(ToscaTypesServiceNg2));
+serviceModule.factory('EventListenerService', downgradeInjectable(EventListenerService));
+serviceModule.factory('CompositionService', downgradeInjectable(CompositionService));
+serviceModule.factory('ReqAndCapabilitiesService', downgradeInjectable(ReqAndCapabilitiesService));
+serviceModule.factory('NodesFactory', downgradeInjectable(NodesFactory));
+serviceModule.service('OnboardingService', downgradeInjectable(OnboardingService));
+serviceModule.service('ImportVSPService', downgradeInjectable(ImportVSPService));
diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts
index c633201673..5b8fc5944a 100644
--- a/catalog-ui/src/app/modules/view-model-module.ts
+++ b/catalog-ui/src/app/modules/view-model-module.ts
@@ -3,7 +3,6 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * Modifications Copyright (C) 2019 Nokia. 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.
@@ -20,127 +19,44 @@
  */
 
 import {AddCategoryModalViewModel} from "../view-models/admin-dashboard/add-category-modal/add-category-modal-view-model";
-import {DashboardViewModel} from "../view-models/dashboard/dashboard-view-model";
 import {WorkspaceViewModel} from "../view-models/workspace/workspace-view-model";
-import {CompositionViewModel} from "../view-models/workspace/tabs/composition/composition-view-model";
-import {DetailsViewModel} from "../view-models/workspace/tabs/composition/tabs/details/details-view-model";
-import {ResourceArtifactsViewModel} from "../view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model";
-import {ServiceConsumptionViewModel} from "../view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model";
-import {ServiceDependenciesViewModel} from "../view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model";
 import {PropertyFormBaseView} from "../view-models/forms/property-forms/base-property-form/property-form-base-model";
 import {PropertyFormViewModel} from "../view-models/forms/property-forms/component-property-form/property-form-view-model";
 import {ModulePropertyView} from "../view-models/forms/property-forms/module-property-modal/module-property-model";
-import {ArtifactResourceFormViewModel} from "../view-models/forms/artifact-form/artifact-form-view-model";
 import {SelectDataTypeViewModel} from "../view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view-model";
-import {AttributeFormViewModel} from "../view-models/forms/attribute-form/attribute-from-view-model";
-import {ResourcePropertiesViewModel} from "../view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model";
-import {CatalogViewModel} from "../view-models/catalog/catalog-view-model";
 import {OnboardVendorViewModel} from "../view-models/onboard-vendor/onboard-vendor-view-model";
-import {DistributionViewModel} from "../view-models/workspace/tabs/distribution/distribution-view-model";
-import {SupportViewModel} from "../view-models/support/support-view-model";
-import {ConfirmationModalViewModel} from "../view-models/modals/confirmation-modal/confirmation-modal-view-model";
-import {EmailModalViewModel} from "../view-models/modals/email-modal/email-modal-view-model";
-import {MessageModalViewModel} from "../view-models/modals/message-modal/message-base-modal-model";
-import {ServerMessageModalViewModel} from "../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model";
-import {ClientMessageModalViewModel} from "../view-models/modals/message-modal/message-client-modal/client-message-modal-view-model";
 import {ErrorViewModel} from "../view-models/modals/error-modal/error-view-model";
-import {RelationsViewModel} from "../view-models/workspace/tabs/composition/tabs/relations/relations-view-model";
-import {ResourceInstanceNameViewModel} from "../view-models/forms/resource-instance-name-form/resource-instance-name-model";
-import {WelcomeViewModel} from "../view-models/welcome/welcome-view";
-import {PreLoadingViewModel} from "../view-models/preloading/preloading-view";
-import {TutorialEndViewModel} from "../view-models/tutorial-end/tutorial-end";
 import {AdminDashboardViewModel} from "../view-models/admin-dashboard/admin-dashboard-view-model";
-import {EnvParametersFormViewModel} from "../view-models/forms/env-parameters-form/env-parameters-form";
-import {StructureViewModel} from "../view-models/workspace/tabs/composition/tabs/structure/structure-view";
 import {UserManagementViewModel} from "../view-models/admin-dashboard/user-management/user-management-view-model";
 import {CategoryManagementViewModel} from "../view-models/admin-dashboard/category-management/category-management-view-model";
-
-import {OnboardingModalViewModel} from "../view-models/modals/onboarding-modal/onboarding-modal-view-model";
-import {DistributionStatusModalViewModel} from "../view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model";
 import {DcaeAppViewModel} from "../view-models/dcae-app/dcae-app-view-model";
 import {GeneralViewModel} from "../view-models/workspace/tabs/general/general-view-model";
 import {IconsModalViewModel} from "../view-models/modals/icons-modal/icons-modal-view";
-import {DeploymentArtifactsViewModel} from "../view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model";
-import {InformationArtifactsViewModel} from "../view-models/workspace/tabs/information-artifacts/information-artifacts-view-model";
-import {ToscaArtifactsViewModel} from "../view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model";
 import {PropertiesViewModel} from "../view-models/workspace/tabs/properties/properties-view-model";
-import {AttributesViewModel} from "../view-models/workspace/tabs/attributes/attributes-view-model";
-import {ActivityLogViewModel} from "../view-models/workspace/tabs/activity-log/activity-log";
 import {ManagementWorkflowViewModel} from "../view-models/workspace/tabs/management-workflow/management-workflow-view-model";
 import {InterfaceOperationViewModel} from "../view-models/workspace/tabs/interface-operation/interface-operation-view-model";
 import {NetworkCallFlowViewModel} from "../view-models/workspace/tabs/network-call-flow/network-call-flow-view-model";
-import {DeploymentViewModel} from "../view-models/workspace/tabs/deployment/deployment-view-model";
-import {ReqAndCapabilitiesViewModel} from "../view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model";
-import {InputFormViewModel} from "../view-models/forms/input-form/input-form-view-modal";
-import {HierarchyViewModel} from "../view-models/tabs/hierarchy/hierarchy-view-model";
-import {ConformanceLevelModalViewModel} from "../view-models/modals/conformance-level-modal/conformance-level-modal-view-model";
-import {PluginsTabViewModel} from "../view-models/plugins/plugins-tab-view-model";
-import {PluginsContextViewModel} from "../view-models/workspace/tabs/plugins/plugins-context-view-model";
 let moduleName:string = 'Sdc.ViewModels';
 let viewModelModule:ng.IModule = angular.module(moduleName, []);
 
 viewModelModule
-  .controller(moduleName + '.DashboardViewModel', DashboardViewModel)
-
-  .controller(moduleName + '.DetailsViewModel', DetailsViewModel)
-  .controller(moduleName + '.ResourceArtifactsViewModel', ResourceArtifactsViewModel)
-  .controller(moduleName + '.ServiceConsumptionViewModel', ServiceConsumptionViewModel)
-  .controller(moduleName + '.ServiceDependenciesViewModel', ServiceDependenciesViewModel)
   .controller(moduleName + '.PropertyFormBaseView', PropertyFormBaseView)
   .controller(moduleName + '.PropertyFormViewModel', PropertyFormViewModel)
   .controller(moduleName + '.ModulePropertyView', ModulePropertyView)
   .controller(moduleName + '.SelectDataTypeViewModel', SelectDataTypeViewModel)
-  .controller(moduleName + '.ArtifactResourceFormViewModel', ArtifactResourceFormViewModel)
-  .controller(moduleName + '.AttributeFormViewModel', AttributeFormViewModel)
-  .controller(moduleName + '.ResourcePropertiesViewModel', ResourcePropertiesViewModel)
-  .controller(moduleName + '.CatalogViewModel', CatalogViewModel)
   .controller(moduleName + '.OnboardVendorViewModel', OnboardVendorViewModel)
-  .controller(moduleName + '.DistributionViewModel', DistributionViewModel)
-  .controller(moduleName + '.SupportViewModel', SupportViewModel)
-  .controller(moduleName + '.ConfirmationModalViewModel', ConfirmationModalViewModel)
-  .controller(moduleName + '.EmailModalViewModel', EmailModalViewModel)
-  .controller(moduleName + '.MessageModalViewModel', MessageModalViewModel)
-  .controller(moduleName + '.ServerMessageModalViewModel', ServerMessageModalViewModel)
-  .controller(moduleName + '.ClientMessageModalViewModel', ClientMessageModalViewModel)
   .controller(moduleName + '.ErrorViewModel', ErrorViewModel)
-  .controller(moduleName + '.RelationsViewModel', RelationsViewModel)
-  .controller(moduleName + '.ResourceInstanceNameViewModel', ResourceInstanceNameViewModel)
-  .controller(moduleName + '.WelcomeViewModel', WelcomeViewModel)
-  .controller(moduleName + '.PreLoadingViewModel', PreLoadingViewModel)
-  .controller(moduleName + '.TutorialEndViewModel', TutorialEndViewModel)
   .controller(moduleName + '.AdminDashboardViewModel', AdminDashboardViewModel)
-  .controller(moduleName + '.EnvParametersFormViewModel', EnvParametersFormViewModel)
-  .controller(moduleName + '.StructureViewModel', StructureViewModel)
   .controller(moduleName + '.AddCategoryModalViewModel', AddCategoryModalViewModel)
   .controller(moduleName + '.UserManagementViewModel', UserManagementViewModel)
   .controller(moduleName + '.CategoryManagementViewModel', CategoryManagementViewModel)
-  .controller(moduleName + '.OnboardingModalViewModel', OnboardingModalViewModel)
   .controller(moduleName + '.IconsModalViewModel', IconsModalViewModel)
-  .controller(moduleName + '.DistributionStatusModalViewModel', DistributionStatusModalViewModel)
   .controller(moduleName + '.DcaeAppViewModel', DcaeAppViewModel)
   //
   // //NEW
   .controller(moduleName + '.WorkspaceViewModel', WorkspaceViewModel)
-  .controller(moduleName + '.ConformanceLevelModalViewModel', ConformanceLevelModalViewModel)
-  .controller(moduleName + '.CompositionViewModel', CompositionViewModel)
   .controller(moduleName + '.GeneralViewModel', GeneralViewModel)
-  .controller(moduleName + '.DeploymentArtifactsViewModel', DeploymentArtifactsViewModel)
-  .controller(moduleName + '.InformationArtifactsViewModel', InformationArtifactsViewModel)
-  .controller(moduleName + '.ToscaArtifactsViewModel', ToscaArtifactsViewModel)
   .controller(moduleName + '.PropertiesViewModel', PropertiesViewModel)
-  .controller(moduleName + '.AttributesViewModel', AttributesViewModel)
-  .controller(moduleName + '.ActivityLogViewModel', ActivityLogViewModel)
   .controller(moduleName + '.ManagementWorkflowViewModel', ManagementWorkflowViewModel)
   .controller(moduleName + '.InterfaceOperationViewModel', InterfaceOperationViewModel)
-  .controller(moduleName + '.NetworkCallFlowViewModel', NetworkCallFlowViewModel)
-  .controller(moduleName + '.DeploymentViewModel', DeploymentViewModel)
-  .controller(moduleName + '.ReqAndCapabilitiesViewModel', ReqAndCapabilitiesViewModel)
-  .controller(moduleName + '.InputFormViewModel', InputFormViewModel)
-  .controller(moduleName + '.PluginsTabViewModel', PluginsTabViewModel)
-  .controller(moduleName + '.PluginsContextViewModel', PluginsContextViewModel)
-  //
-  // //TABS
-  .controller(moduleName + '.HierarchyViewModel', HierarchyViewModel);
-
-// NG2
-//.controller(moduleName +  '.NG2Example',  downgradeComponent({component: NG2Example2Component}) );
+  .controller(moduleName + '.NetworkCallFlowViewModel', NetworkCallFlowViewModel);
diff --git a/catalog-ui/src/app/ng2/app.component.html b/catalog-ui/src/app/ng2/app.component.html
index c98da88fb3..c66c360843 100644
--- a/catalog-ui/src/app/ng2/app.component.html
+++ b/catalog-ui/src/app/ng2/app.component.html
@@ -13,11 +13,5 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
- 
-<!--<nav>
-  <app-navbar></app-navbar>
-</nav>
-<main>
-  <router-outlet></router-outlet>
-</main>-->
\ No newline at end of file
+
+<sdc-loader global="true" name="general" testId="loader"></sdc-loader>
diff --git a/catalog-ui/src/app/ng2/app.component.ts b/catalog-ui/src/app/ng2/app.component.ts
index cb10581c93..06139ca9af 100644
--- a/catalog-ui/src/app/ng2/app.component.ts
+++ b/catalog-ui/src/app/ng2/app.component.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -17,18 +17,16 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-
-import { Component, Inject, ViewContainerRef } from '@angular/core';
+import { Component, ViewContainerRef} from '@angular/core';
 import { AuthenticationService } from './services/authentication.service';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
 
-  constructor(auth:AuthenticationService, public viewContainerRef:ViewContainerRef){
+  constructor(auth: AuthenticationService, public viewContainerRef: ViewContainerRef){
 
   }
 
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index b541beb3d7..3f43feb7b2 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -3,7 +3,6 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * Modifications Copyright (C) 2019 Nokia. 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.
@@ -19,6 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -26,84 +26,110 @@ import { forwardRef } from '@angular/core';
 import { AppComponent } from './app.component';
 import { UpgradeAdapter } from '@angular/upgrade';
 import { UpgradeModule } from '@angular/upgrade/static';
-import { SdcUiComponentsModule, SdcUiComponents } from "sdc-ui/lib/angular";
+import { SdcUiComponentsModule, SdcUiComponents } from 'onap-ui-angular';
 import { PropertiesAssignmentModule } from './pages/properties-assignment/properties-assignment.module';
-import { PropertyCreatorModule } from './pages/properties-assignment/property-creator/property-creator.module';
 import {
-    DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider, StateServiceFactory,
-    StateParamsServiceFactory, CacheServiceProvider, EventListenerServiceProvider, ScopeServiceFactory,
+    DataTypesServiceProvider, CookieServiceProvider, StateServiceFactory,
+    StateParamsServiceFactory, ScopeServiceFactory,
     NotificationServiceProvider, ComponentFactoryProvider
-} from "./utils/ng1-upgraded-provider";
-import { ConfigService } from "./services/config.service";
-import { HttpModule } from '@angular/http';
-import { HttpService } from './services/http.service';
+} from './utils/ng1-upgraded-provider';
+import { ConfigService } from './services/config.service';
 import { AuthenticationService } from './services/authentication.service';
-import { Cookie2Service } from "./services/cookie.service";
-import { ComponentServiceNg2 } from "./services/component-services/component.service";
-import { ComponentServiceFactoryNg2 } from "./services/component-services/component.service.factory";
-import { ServiceServiceNg2 } from "./services/component-services/service.service";
-import { ComponentInstanceServiceNg2 } from "./services/component-instance-services/component-instance.service";
-import { WorkflowServiceNg2 } from './services/workflow.service';
-import {ToscaTypesServiceNg2} from "./services/tosca-types.service";
-import { ModalService } from "./services/modal.service";
-import { UiElementsModule } from "./components/ui/ui-elements.module";
-import { ConnectionWizardModule } from "./pages/connection-wizard/connection-wizard.module";
-import { InterfaceOperationModule } from "./pages/interface-operation/interface-operation.module";
-import { OperationCreatorModule } from "./pages/interface-operation/operation-creator/operation-creator.module";
-import { LayoutModule } from "./components/layout/layout.module";
-import { UserService } from "./services/user.service";
-import { DynamicComponentService } from "./services/dynamic-component.service";
-import { SdcConfig } from "./config/sdc-config.config";
-import { SdcMenu } from "./config/sdc-menu.config";
-import { TranslateModule } from "./shared/translator/translate.module";
-import { TranslationServiceConfig } from "./config/translation.service.config";
-import { MultilineEllipsisModule } from "./shared/multiline-ellipsis/multiline-ellipsis.module";
-import { ServicePathCreatorModule } from './pages/service-path-creator/service-path-creator.module';
-import { ServicePathsListModule } from './pages/service-paths-list/service-paths-list.module';
-import { ServicePathModule } from 'app/ng2/components/logic/service-path/service-path.module';
-import { ServicePathSelectorModule } from 'app/ng2/components/logic/service-path-selector/service-path-selector.module';
-import { ServiceConsumptionModule } from 'app/ng2/components/logic/service-consumption/service-consumption.module';
-import { ServiceConsumptionCreatorModule } from './pages/service-consumption-editor/service-consumption-editor.module';
-import {ServiceDependenciesModule} from 'app/ng2/components/logic/service-dependencies/service-dependencies.module';
-import {ServiceDependenciesEditorModule} from './pages/service-dependencies-editor/service-dependencies-editor.module';
-import { CompositionPanelModule } from 'app/ng2/pages/composition/panel/panel.module';
-import { WindowRef } from "./services/window.service";
-import {ArchiveService} from "./services/archive.service";
+import { Cookie2Service } from './services/cookie.service';
+import { ComponentServiceNg2 } from './services/component-services/component.service';
+import { ComponentServiceFactoryNg2 } from './services/component-services/component.service.factory';
+import { ServiceServiceNg2 } from './services/component-services/service.service';
+import { ComponentInstanceServiceNg2 } from './services/component-instance-services/component-instance.service';
+import { ModalService } from './services/modal.service';
+import { UiElementsModule } from './components/ui/ui-elements.module';
+import { ConnectionWizardModule } from './pages/composition/graph/connection-wizard/connection-wizard.module';
+import { InterfaceOperationModule } from './pages/interface-operation/interface-operation.module';
+import { OperationCreatorModule } from './pages/interface-operation/operation-creator/operation-creator.module';
+import { LayoutModule } from './components/layout/layout.module';
+import { UserService } from './services/user.service';
+import { DynamicComponentService } from './services/dynamic-component.service';
+import { SdcConfig } from './config/sdc-config.config';
+import { SdcMenu } from './config/sdc-menu.config';
+import { TranslateModule } from './shared/translator/translate.module';
+import { TranslationServiceConfig } from './config/translation.service.config';
+import { MultilineEllipsisModule } from './shared/multiline-ellipsis/multiline-ellipsis.module';
+import { ServicePathCreatorModule } from './pages/composition/graph/service-path-creator/service-path-creator.module';
+import { ServicePathsListModule } from './pages/composition/graph/service-paths-list/service-paths-list.module';
+import { ServicePathSelectorModule } from 'app/ng2/pages/composition/graph/service-path-selector/service-path-selector.module';
+import { CompositionPanelModule } from 'app/ng2/pages/composition/panel/composition-panel.module';
+import { CatalogModule } from './pages/catalog/catalog.module';
+import { HomeModule } from './pages/home/home.module';
+import { WindowRef } from './services/window.service';
+import { CatalogService } from './services/catalog.service';
 import { ModalsHandlerProvider } from './utils/ng1-upgraded-provider';
-import {PluginFrameModule} from "./components/ui/plugin/plugin-frame.module";
-import {PluginsService} from "./services/plugins.service";
-import {EventBusService} from "./services/event-bus.service";
-import {GroupsService} from "./services/groups.service";
-import {PoliciesService} from "./services/policies.service";
-import {AutomatedUpgradeService} from "./pages/automated-upgrade/automated-upgrade.service";
-import {AutomatedUpgradeModule} from "./pages/automated-upgrade/automated-upgrade.module";
-import {RequirementsEditorModule} from "./pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module"
-import {CapabilitiesEditorModule} from "./pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module"
-import {GenericArtifactBrowserModule} from "./components/logic/generic-artifact-browser/generic-artifact-browser.module";
-import {GabService} from "./services/gab.service";
-import {DeclareListModule} from "./pages/properties-assignment/declare-list/declare-list.module"
+import { PluginFrameModule } from './components/ui/plugin/plugin-frame.module';
+import { PluginsService } from './services/plugins.service';
+import { EventBusService } from './services/event-bus.service';
+import { GroupsService } from './services/groups.service';
+import { PoliciesService } from './services/policies.service';
+import { AutomatedUpgradeService } from './pages/automated-upgrade/automated-upgrade.service';
+import { AutomatedUpgradeModule } from './pages/automated-upgrade/automated-upgrade.module';
+import {WorkspaceModule} from './pages/workspace/workspace.module';
+import { ModalsModule } from './components/modals/modals.module';
+import { SharingService, CacheService, HomeService } from 'app/services-ng2';
+import { IUserProperties } from 'app/models';
+import { PluginsModule } from './pages/plugins/plugins-module';
+import {WorkspaceNg1BridgeService} from './pages/workspace/workspace-ng1-bridge-service';
+import {NgxsModule} from '@ngxs/store';
+import {NgxsLoggerPluginModule} from '@ngxs/logger-plugin';
+import {NgxsReduxDevtoolsPluginModule} from '@ngxs/devtools-plugin';
+import {EventListenerService} from '../services/event-listener-service';
+import { HttpClientModule } from '@angular/common/http';
+import { httpInterceptorProviders } from './http-interceptor';
+import { HttpHelperService } from './services/http-hepler.service';
+import { ModulesService } from "./services/modules.service";
+import { TranslateService } from 'app/ng2/shared/translator/translate.service';
+import { FileUtilsService } from './services/file-utils.service';
+import { ImportVSPService } from './components/modals/onboarding-modal/import-vsp.service';
+import { OnboardingService } from './services/onboarding.service';
+import { ServiceConsumptionCreatorModule } from './pages/service-consumption-editor/service-consumption-editor.module';
+import { ServiceDependenciesModule } from './components/logic/service-dependencies/service-dependencies.module';
+import { ServiceDependenciesEditorModule } from './pages/service-dependencies-editor/service-dependencies-editor.module';
+import { PropertyCreatorModule } from './pages/properties-assignment/property-creator/property-creator.module';
+import { DeclareListModule } from './pages/properties-assignment/declare-list/declare-list.module';
+import { WorkflowServiceNg2 } from './services/workflow.service';
+import { ToscaTypesServiceNg2 } from "./services/tosca-types.service";
+
+
+declare const __ENV__: string;
 
 export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
 
-export function configServiceFactory(config: ConfigService) {
+export function configServiceFactory(config: ConfigService, authService: AuthenticationService, eventListener: EventListenerService) {
+
     return () => {
-        return Promise.all([
-            config.loadValidationConfiguration(),
-            config.loadPluginsConfiguration()
-        ]);
-    }
+        return authService.authenticate().toPromise()
+            .then((userInfo: IUserProperties) => {
+                authService.setLoggedinUser(userInfo);
+                return Promise.all([
+                    config.loadSdcSetupData(),
+                    config.loadValidationConfiguration(),
+                    config.loadPluginsConfiguration(),
+                ])
+            }).then(() => {
+                eventListener.notifyObservers('ON_FINISH_LOADING');
+            })
+            .catch(() => {
+                console.log('AUTH FAILED! from app module');
+            });
+    };
 }
 
-
 @NgModule({
     declarations: [
         AppComponent
     ],
     imports: [
+        BrowserAnimationsModule,
         BrowserModule,
         UpgradeModule,
         FormsModule,
-        HttpModule,
+        HttpClientModule,
         LayoutModule,
         TranslateModule,
         MultilineEllipsisModule,
@@ -111,80 +137,90 @@ export function configServiceFactory(config: ConfigService) {
         CompositionPanelModule,
         SdcUiComponentsModule,
         AutomatedUpgradeModule,
-        //We need to import them here since we use them in angular1
+
+        // We need to import them here since we use them in angular1
         ConnectionWizardModule,
         PropertiesAssignmentModule,
         PropertyCreatorModule,
         DeclareListModule,
         PluginFrameModule,
+        PluginsModule,
         InterfaceOperationModule,
         OperationCreatorModule,
         ServicePathCreatorModule,
         ServicePathsListModule,
-        ServicePathModule,
         ServicePathSelectorModule,
-        ServiceConsumptionModule,
         ServiceConsumptionCreatorModule,
         ServiceDependenciesModule,
         ServiceDependenciesEditorModule,
-        RequirementsEditorModule,
-        CapabilitiesEditorModule,
-        GenericArtifactBrowserModule
+        WorkspaceModule,
+        ModalsModule,
+        CatalogModule,
+        HomeModule,
+        NgxsModule.forRoot([]),
+        NgxsLoggerPluginModule.forRoot({ logger: console, collapsed: false }),
+        NgxsReduxDevtoolsPluginModule.forRoot({
+            disabled: __ENV__ === 'prod'
+        })
     ],
     exports: [],
     entryComponents: [
-        // *** sdc-ui components to be used as downgraded:
-        SdcUiComponents.SvgIconComponent
     ],
     providers: [
         WindowRef,
+        httpInterceptorProviders,
         DataTypesServiceProvider,
-        SharingServiceProvider,
+        SharingService,
+        CacheService,
+        HomeService,
         ComponentFactoryProvider,
         CookieServiceProvider,
         StateServiceFactory,
         StateParamsServiceFactory,
         ScopeServiceFactory,
-        CacheServiceProvider,
-        EventListenerServiceProvider,
         NotificationServiceProvider,
         ModalsHandlerProvider,
-        AuthenticationService,
+        UserService,
         Cookie2Service,
         ConfigService,
         ComponentServiceNg2,
         ComponentServiceFactoryNg2,
         ModalService,
+        ImportVSPService,
+        OnboardingService,
         ServiceServiceNg2,
         AutomatedUpgradeService,
         WorkflowServiceNg2,
         ToscaTypesServiceNg2,
-        HttpService,
-        UserService,
+        WorkspaceNg1BridgeService,
+        HttpHelperService,
+        AuthenticationService,
         PoliciesService,
         GroupsService,
+        ModulesService,
         DynamicComponentService,
         SdcConfig,
         SdcMenu,
         ComponentInstanceServiceNg2,
+        EventListenerService,
         TranslationServiceConfig,
+        TranslateService,
         PluginsService,
-        GabService,
-        ArchiveService,
+        CatalogService,
         EventBusService,
+        FileUtilsService,
         {
             provide: APP_INITIALIZER,
             useFactory: configServiceFactory,
-            deps: [ConfigService],
+            deps: [ConfigService, AuthenticationService, EventListenerService],
             multi: true
         },
     ],
     bootstrap: [AppComponent]
 })
 
-
 export class AppModule {
-    constructor(public upgrade: UpgradeModule, public eventBusService:EventBusService) {
+    constructor(public upgrade: UpgradeModule) {
 
     }
 }
diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts
index 85d1899d96..269a8708fe 100644
--- a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts
+++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts
@@ -1,21 +1,19 @@
 /*-
- * ============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=========================================================
+  <!--
+  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
  */
 
 import { Component, Input } from '@angular/core';
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/__snapshots__/artifact-form.component.spec.ts.snap b/catalog-ui/src/app/ng2/components/forms/artifacts-form/__snapshots__/artifact-form.component.spec.ts.snap
new file mode 100644
index 0000000000..8cd085e248
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/__snapshots__/artifact-form.component.spec.ts.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`artifact form component should match current snapshot of artifact form component 1`] = `
+<artifact-form
+  artifactTypesOptions={[Function Array]}
+  cacheService={[Function Object]}
+  initArtifactTypes={[Function Function]}
+  onDescriptionChange={[Function Function]}
+  onLabelChange={[Function Function]}
+  onTypeChange={[Function Function]}
+  onUploadFile={[Function Function]}
+  onValidationChange={[Function Subject]}
+  verifyTypeAndFileWereFilled={[Function Function]}
+>
+  <form
+    class="artifact-form"
+    name="artifactForm"
+    novalidate=""
+  >
+    <onap-file-upload />
+    <div
+      class="artifact-form-container"
+    >
+      
+      <div
+        class="right-form-container"
+      >
+        <sdc-textarea
+          label="Description"
+          testid="description"
+        />
+        <sdc-validation>
+          <sdc-required-validator />
+          <sdc-regex-validator />
+        </sdc-validation>
+      </div>
+    </div>
+  </form>
+</artifact-form>
+`;
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.html b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.html
new file mode 100644
index 0000000000..c84d6de512
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.html
@@ -0,0 +1,55 @@
+<form class="artifact-form" novalidate name="artifactForm">
+
+    <onap-file-upload [disabled]="isViewOnly || showTypeFields && !artifact.artifactType" [convertToBase64]="true" [(value)]="artifact.artifactName" (fileUpload)="onUploadFile($event)" [placeHolder]="'Select File'" [label]="'Upload File'" [testId]="'fileUploadElement'" [required]="true">
+
+    </onap-file-upload>
+    <div class="artifact-form-container">
+        <div class="left-form-container" *ngIf="showTypeFields">
+            <sdc-input #artifactLabel
+                       required="true"
+                       [(value)]="artifact.artifactLabel"
+                       [maxLength]="25"
+                       [label]="'Artifact Label'"
+                       [disabled]="isViewOnly || artifact && artifact.uniqueId"
+                       [testId]="'artifactLabel'"
+                       (keyup)="verifyTypeAndFileWereFilled()">
+            </sdc-input>
+            <sdc-validation [validateElement]="artifactLabel" (validityChanged)="onLabelChange($event)">
+                <sdc-required-validator [message]="'ADD_ARTIFACT_ERROR_LABEL_REQUIRED' | translate"></sdc-required-validator>
+                              <sdc-regex-validator [message]="'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate"
+                                     [pattern]="validationPatterns['label']"></sdc-regex-validator>
+            </sdc-validation>
+
+            <sdc-dropdown #artifactType [disabled]="isViewOnly || artifact && artifact.uniqueId" label="Type" [required]="true"
+                          [selectedOption]="selectedFileType" placeHolder="Please choose type" (changed)="onTypeChange($event)"
+                          [options]="artifactTypesOptions" [testId]="'artifacttype'"></sdc-dropdown>
+            <sdc-validation [validateElement]="artifactType">
+                <sdc-required-validator
+                        [message]="'ADD_ARTIFACT_ERROR_TYPE_REQUIRED' | translate"></sdc-required-validator>
+            </sdc-validation>
+        </div>
+
+        <div class="right-form-container">
+            <sdc-textarea #artifactDescription
+                          [(value)]="artifact.description"
+                          [required]="true"
+                          testId="description"
+                          [maxLength]="256"
+                          label="Description"
+                          [disabled]="isViewOnly"
+                          (keyup)="verifyTypeAndFileWereFilled()">
+            </sdc-textarea>
+            <sdc-validation [validateElement]="artifactDescription" (validityChanged)="onDescriptionChange($event)">
+                <sdc-required-validator
+                        [message]="'ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED' | translate:{'field': 'Message' }"></sdc-required-validator>
+                <sdc-regex-validator [message]="'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate"
+                                     [pattern]="validationPatterns['comment']"></sdc-regex-validator>
+            </sdc-validation>
+        </div>
+    </div>
+</form>
+
+<div *ngIf="artifact && artifact.esId">
+    <div>UUID: {{artifact.artifactUUID}}</div>
+    <div>Version: {{artifact.artifactVersion}}</div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.less b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.less
new file mode 100644
index 0000000000..3b04122085
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.less
@@ -0,0 +1,23 @@
+.artifact-form {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  .artifact-form-container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: row;
+    .left-form-container {
+      flex: 1;
+      padding-right: 10px;
+    }
+
+    .right-form-container {
+      flex: 1;
+
+      /deep/.sdc-textarea .sdc-textarea__textarea{
+        min-height: 110px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.spec.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.spec.ts
new file mode 100644
index 0000000000..fc69509ee9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.spec.ts
@@ -0,0 +1,242 @@
+import {ArtifactFormComponent} from "./artifact-form.component";
+import {async, ComponentFixture} from "@angular/core/testing";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {TranslateModule} from "../../../shared/translator/translate.module";
+import {CacheService} from "../../../services/cache.service";
+import {TranslateService} from "../../../shared/translator/translate.service";
+import {ArtifactModel} from "../../../../models/artifacts";
+import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
+import {Observable, Subject} from "rxjs";
+import {getValue} from "@ngxs/store";
+
+
+describe('artifact form component', () => {
+
+    let fixture: ComponentFixture<ArtifactFormComponent>;
+    let cacheServiceMock: Partial<CacheService>;
+    let onValidationChangeMock: Partial<Subject<boolean>>;
+
+    let artifactModel = new ArtifactModel();
+
+
+    beforeEach(
+        async(() => {
+
+            onValidationChangeMock = {
+                next: jest.fn()
+            }
+
+            cacheServiceMock = {
+                contains: jest.fn(),
+                remove: jest.fn(),
+                set: jest.fn(),
+                get: jest.fn()
+            }
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [ArtifactFormComponent],
+                    imports: [TranslateModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: CacheService, useValue: cacheServiceMock},
+                        {provide: TranslateService, useValue: {}}
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(ArtifactFormComponent);
+            });
+        })
+    );
+
+
+    it('should verify initArtifactTypes for DEPLOYMENT and ArtifactType = HEAT_ENV', () =>{
+
+        cacheServiceMock.get.mockImplementation(() =>{
+            return {
+                artifacts: {
+                    deployment:{
+                        resourceInstanceDeploymentArtifacts: [{name: "Dummy Value Returned from ui api"}],
+                    }
+                }
+            }
+        });
+
+        fixture.componentInstance.artifactType = 'DEPLOYMENT';
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.artifact.artifactType = 'HEAT_ENV';
+
+        fixture.componentInstance.initArtifactTypes();
+
+        expect(fixture.componentInstance.selectedFileType).toEqual(undefined);
+
+    });
+
+    it('should verify initArtifactTypes for DEPLOYMENT and ComponentType = RESOURCE', () =>{
+
+        cacheServiceMock.get.mockImplementation(() =>{
+            return {
+                artifacts: {
+                    deployment:{
+                        resourceDeploymentArtifacts: [{name: "Dummy Value Returned from ui api"}],
+                    }
+                }
+            }
+        });
+
+        fixture.componentInstance.artifactType = 'DEPLOYMENT';
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.componentType = 'RESOURCE';
+
+        fixture.componentInstance.initArtifactTypes();
+
+        expect(fixture.componentInstance.selectedFileType).toEqual(undefined);
+
+    });
+
+    it('should verify initArtifactTypes for DEPLOYMENT and NOT ComponentType = RESOURCE OR NOT ArtifactType = HEAT_ENV', () =>{
+
+        cacheServiceMock.get.mockImplementation(() =>{
+            return {
+                artifacts: {
+                    deployment:{
+                        serviceDeploymentArtifacts: [{name: "Dummy Value Returned from ui api"}],
+                    }
+                }
+            }
+        });
+
+        fixture.componentInstance.artifactType = 'DEPLOYMENT';
+        fixture.componentInstance.artifact = artifactModel;
+        // fixture.componentInstance.componentType = 'RESOURCE';
+
+        fixture.componentInstance.initArtifactTypes();
+
+        expect(fixture.componentInstance.selectedFileType).toEqual(undefined);
+
+    });
+
+    it('should verify initArtifactTypes for INFORMATION', () =>{
+
+        cacheServiceMock.get.mockImplementation(() =>{
+            return {
+                artifacts: {
+                    other: [{name: "Val1"}, {name: "ExpectedValToBeSelected"}, {name: "Val3"}]
+                }
+            }
+        });
+
+        fixture.componentInstance.artifactType = 'INFORMATIONAL';
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.artifact.artifactType = 'ExpectedValToBeSelected';
+
+        fixture.componentInstance.initArtifactTypes();
+
+        expect(fixture.componentInstance.selectedFileType).toEqual({"label": "ExpectedValToBeSelected", "value": "ExpectedValToBeSelected"});
+
+    });
+
+
+    it('should match current snapshot of artifact form component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should verify onUploadFile -> file gets file name', () => {
+        let file = {
+            filename:'dummyFileName'
+        }
+
+        fixture.componentInstance.verifyTypeAndFileWereFilled = jest.fn();
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.onUploadFile(file);
+
+        expect(fixture.componentInstance.artifact.artifactName).toBe('dummyFileName');
+
+        const spy1 = jest.spyOn(fixture.componentInstance,'verifyTypeAndFileWereFilled');
+        expect(spy1).toHaveBeenCalled();
+    });
+
+    it('should verify onUploadFile -> file is null', () => {
+        let file = null;
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.onUploadFile(file);
+
+        expect(fixture.componentInstance.artifact.artifactName).toBe(null);
+    });
+
+    it('should verify onTypeChange -> verifyTypeAndFileWereFilled is being called', () => {
+        let selectedFileType:IDropDownOption;
+        selectedFileType = {"label": "dummyLabel", "value": "dummyValue"};
+        fixture.componentInstance.verifyTypeAndFileWereFilled = jest.fn();
+
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.onTypeChange(selectedFileType);
+
+        const spy1 = jest.spyOn(fixture.componentInstance,'verifyTypeAndFileWereFilled');
+        expect(spy1).toHaveBeenCalled();
+    });
+
+    it('should verify onDescriptionChange -> verifyTypeAndFileWereFilled is being called', () => {
+        fixture.componentInstance.verifyTypeAndFileWereFilled = jest.fn();
+        fixture.componentInstance.onValidationChange.next = jest.fn(() => true);
+
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.onDescriptionChange();
+
+        const spy1 = jest.spyOn(fixture.componentInstance,'verifyTypeAndFileWereFilled');
+        expect(spy1).toHaveBeenCalled();
+    });
+
+    it('should verify onLabelChange -> verifyTypeAndFileWereFilled is being called', () => {
+        fixture.componentInstance.verifyTypeAndFileWereFilled = jest.fn();
+        fixture.componentInstance.onValidationChange.next = jest.fn(() => true);
+
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.onLabelChange(true);
+
+        const spy1 = jest.spyOn(fixture.componentInstance,'verifyTypeAndFileWereFilled');
+        expect(spy1).toHaveBeenCalled();
+    });
+
+    it('should verify verifyTypeAndFileWereFilled -> verify branch this.artifact.artifactType !== \'DEPLOYMENT\' ==>> onValidationChange.next(false)', () => {
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.artifact.artifactType = 'NOT_DEPLOYMENT';
+        fixture.componentInstance.artifact.mandatory = true;
+        fixture.componentInstance.descriptionIsValid = false;
+
+        let onValidationChangeResult;
+
+        fixture.componentInstance.onValidationChange.subscribe((data) => {
+            onValidationChangeResult = data;
+            // console.log("Subscriber got data >>>>> "+ data);
+        });
+
+        fixture.componentInstance.verifyTypeAndFileWereFilled();
+
+        expect(onValidationChangeResult).toBe(false);
+    });
+
+    it('should verify verifyTypeAndFileWereFilled -> verify branch this.artifact.artifactType !== \'DEPLOYMENT\' ==>> onValidationChange.next(true)', () => {
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.artifact.artifactType = 'NOT_DEPLOYMENT';
+        fixture.componentInstance.artifact.mandatory = true;
+        fixture.componentInstance.artifact.artifactName = 'Something';
+        fixture.componentInstance.descriptionIsValid = true;
+
+        let onValidationChangeResult;
+
+        fixture.componentInstance.onValidationChange.subscribe((data) => {
+            onValidationChangeResult = data;
+            // console.log("Subscriber got data >>>>> "+ data);
+        });
+
+        fixture.componentInstance.verifyTypeAndFileWereFilled();
+
+        expect(onValidationChangeResult).toBe(true);
+    });
+
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.ts
new file mode 100644
index 0000000000..905d1a25ad
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.ts
@@ -0,0 +1,132 @@
+/**
+ * Created by rc2122 on 5/31/2018.
+ */
+import { Component, Input } from '@angular/core';
+import * as _ from 'lodash';
+import { IDropDownOption } from 'onap-ui-angular/dist/form-elements/dropdown/dropdown-models';
+import { Subject } from 'rxjs/Subject';
+import { ArtifactModel } from '../../../../models';
+import { ArtifactType, ComponentType } from '../../../../utils';
+import { Dictionary } from '../../../../utils/dictionary/dictionary';
+import { CacheService } from '../../../services/cache.service';
+
+@Component({
+    selector: 'artifact-form',
+    templateUrl: './artifact-form.component.html',
+    styleUrls: ['./artifact-form.component.less']
+})
+export class ArtifactFormComponent {
+
+    @Input() artifact: ArtifactModel;
+    @Input() artifactType: ArtifactType;
+    @Input() componentType: string;
+    @Input() instanceId: string;
+    @Input() isViewOnly: boolean;
+
+    public artifactTypesOptions: IDropDownOption[] = [];
+    public validationPatterns: Dictionary<string, RegExp>;
+    public selectedFileType: IDropDownOption;
+    public showTypeFields: boolean;
+    private onValidationChange: Subject<boolean> = new Subject();
+    private descriptionIsValid: boolean;
+    private labelIsValid: boolean;
+
+    constructor(private cacheService: CacheService) {
+    }
+
+    ngOnInit(): void {
+        this.validationPatterns = this.cacheService.get('validation').validationPatterns;
+        this.initArtifactTypes();
+        this.artifact.artifactGroupType = this.artifact.artifactGroupType || this.artifactType.toString();
+        this.showTypeFields = (this.artifact.artifactGroupType === 'DEPLOYMENT' || !this.artifact.mandatory) && this.artifact.artifactGroupType !== 'SERVICE_API';
+    }
+
+    public onTypeChange = (selectedFileType: IDropDownOption) => {
+        this.artifact.artifactType = selectedFileType.value;
+        this.verifyTypeAndFileWereFilled();
+    }
+
+    public onUploadFile = (file) => {
+        if (file) {
+            this.artifact.artifactName = file.filename;
+            this.artifact.payloadData = file.base64;
+            console.log('FILE UPLOADED', file);
+        } else {
+            this.artifact.artifactName = null;
+        }
+        this.verifyTypeAndFileWereFilled();
+    }
+
+    private initArtifactTypes = (): void => {
+        const artifactTypes: any = this.cacheService.get('UIConfiguration');
+        let validExtensions: string[];
+        let artifactTypesList: string[];
+
+        switch (this.artifactType) {
+            case ArtifactType.DEPLOYMENT:
+                if (this.artifact.artifactType === ArtifactType.HEAT_ENV || this.instanceId) {
+                    validExtensions = artifactTypes.artifacts.deployment.resourceInstanceDeploymentArtifacts;
+                } else if (this.componentType === ComponentType.RESOURCE) {
+                    validExtensions = artifactTypes.artifacts.deployment.resourceDeploymentArtifacts;
+                } else {
+                    validExtensions = artifactTypes.artifacts.deployment.serviceDeploymentArtifacts;
+                }
+                if (validExtensions) {
+                    artifactTypesList = Object.keys(validExtensions);
+                }
+                break;
+            case ArtifactType.INFORMATION:
+                artifactTypesList = artifactTypes.artifacts.other.map((element: any) => {
+                    return element.name;
+                });
+                _.remove(artifactTypesList, (item: string) => {
+                    return _.has(ArtifactType.THIRD_PARTY_RESERVED_TYPES, item) ||
+                        _.has(ArtifactType.TOSCA, item);
+                });
+                break;
+        }
+
+        _.forEach(artifactTypesList, (artifactType: string) => {
+            this.artifactTypesOptions.push({ label: artifactType, value: artifactType });
+        });
+
+        this.selectedFileType = _.find(this.artifactTypesOptions, (artifactType) => {
+            return artifactType.value === this.artifact.artifactType;
+        });
+
+    }
+
+    // Verify that the Type and the Name (file) are filled in the Modal
+    // For Description and Label - I used this.descriptionIsValid:boolean & this.labelIsValid:boolean as part of the sdc-validation Element
+    private verifyTypeAndFileWereFilled = () => {
+        if (this.artifact.artifactType === 'DEPLOYMENT' || !this.artifact.mandatory && this.artifact.artifactGroupType !== 'SERVICE_API') {
+            // In case of all fields are required:
+            // File, Description, Type and Label
+            if (this.artifact.artifactType && this.artifact.artifactName && this.descriptionIsValid && this.labelIsValid) {
+                this.onValidationChange.next(true);
+            } else {
+                this.onValidationChange.next(false);
+            }
+        } else {
+            // In case of like Information Artifact
+            // Only file and description are required
+            if (this.descriptionIsValid && this.artifact.artifactName) {
+                this.onValidationChange.next(true);
+            } else {
+                this.onValidationChange.next(false);
+            }
+        }
+    }
+
+    // sdc-validation for Description
+    private onDescriptionChange = (isValid: boolean): void => {
+        this.descriptionIsValid = isValid;
+        this.onValidationChange.next(isValid) && this.verifyTypeAndFileWereFilled();
+    }
+
+    // sdc-validation for Label
+    private onLabelChange = (isValid: boolean): void => {
+        this.labelIsValid = isValid;
+        this.onValidationChange.next(isValid) && this.verifyTypeAndFileWereFilled();
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.module.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.module.ts
new file mode 100644
index 0000000000..dba801212e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.module.ts
@@ -0,0 +1,21 @@
+/**
+ * Created by rc2122 on 5/24/2018.
+ */
+import { NgModule } from "@angular/core";
+import { TranslateModule } from "app/ng2/shared/translator/translate.module";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { CommonModule } from '@angular/common';
+import {ArtifactFormComponent} from "./artifact-form.component";
+
+@NgModule({
+    declarations: [ArtifactFormComponent],
+    imports: [TranslateModule,
+        SdcUiComponentsModule,
+        CommonModule],
+    exports: [ArtifactFormComponent],
+    entryComponents: [ArtifactFormComponent]
+})
+
+
+export class ArtifactFormModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts
new file mode 100644
index 0000000000..f9400e9d18
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts
@@ -0,0 +1,175 @@
+import { Injectable } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { ArtifactModel } from '../../../../models';
+import { ArtifactGroupType, ArtifactType } from '../../../../utils/constants';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { CreateOrUpdateArtifactAction, DeleteArtifactAction } from '../../../store/actions/artifacts.action';
+import { EnvParamsComponent } from '../env-params/env-params.component';
+import { ArtifactFormComponent } from './artifact-form.component';
+
+import {
+    CreateInstanceArtifactAction,
+    DeleteInstanceArtifactAction,
+    UpdateInstanceArtifactAction
+} from '../../../store/actions/instance-artifacts.actions';
+
+@Injectable()
+export class ArtifactsService {
+
+    constructor(private serviceLoader: SdcUiServices.LoaderService,
+                private modalService: SdcUiServices.ModalService,
+                private topologyTemplateService: TopologyTemplateService,
+                private translateService: TranslateService,
+                private store: Store) {
+    }
+
+    public dispatchArtifactAction = (componentId: string, componentType: string, artifact: ArtifactModel, artifactType: ArtifactGroupType, instanceId: string) => {
+        const artifactObj = {
+            componentType,
+            componentId,
+            instanceId,
+            artifact
+        };
+
+        // Create or update instance artifact
+        if (instanceId) {
+            if (!artifact.uniqueId) {
+                // create instance artifact
+                return this.store.dispatch(new CreateInstanceArtifactAction(artifactObj));
+            } else {
+                // update instance artifact
+                return this.store.dispatch(new UpdateInstanceArtifactAction(artifactObj));
+            }
+        } else {
+            // Create or update artifact
+            return this.store.dispatch(new CreateOrUpdateArtifactAction(artifactObj));
+        }
+    }
+
+    public openArtifactModal = (componentId: string, componentType: string, artifact: ArtifactModel, artifactType: ArtifactGroupType, isViewOnly?: boolean, instanceId?: string) => {
+
+        let modalInstance;
+
+        const onOkPressed = () => {
+            const updatedArtifact = modalInstance.innerModalContent.instance.artifact;
+            this.serviceLoader.activate();
+            this.dispatchArtifactAction(componentId, componentType, updatedArtifact, artifactType, instanceId)
+                    .subscribe().add(() => this.serviceLoader.deactivate());
+        };
+
+        const addOrUpdateArtifactModalConfig = {
+            title: (artifact && artifact.uniqueId) ? 'Update Artifact' : 'Create Artifact',
+            size: 'md',
+            type: SdcUiCommon.ModalType.custom,
+            testId: 'upgradeVspModal',
+            buttons: [
+                {
+                    id: 'done',
+                    text: 'DONE',
+                    disabled: isViewOnly,
+                    size: 'Add Another',
+                    closeModal: true,
+                    callback: onOkPressed
+                },
+                {text: 'CANCEL', size: 'sm', closeModal: true, type: 'secondary'}
+            ] as SdcUiCommon.IModalButtonComponent[]
+        } as SdcUiCommon.IModalConfig;
+
+        modalInstance = this.modalService.openCustomModal(addOrUpdateArtifactModalConfig, ArtifactFormComponent, {
+            artifact: new ArtifactModel(artifact),
+            artifactType,
+            instanceId,
+            componentType,
+            isViewOnly
+        });
+
+        if (!isViewOnly) {
+            modalInstance.innerModalContent.instance.onValidationChange.subscribe((isValid) => {
+                modalInstance.getButtonById('done').disabled = !isValid;
+            });
+        }
+    }
+
+    public openViewEnvParams(componentType: string, componentId: string, artifact: ArtifactModel, instanceId?: string) {
+        const envParamsModal = {
+            title: artifact.artifactDisplayName,
+            size: 'xl',
+            type: SdcUiCommon.ModalType.custom,
+            testId: 'viewEnvParams',
+            isDisabled: false,
+        } as SdcUiCommon.IModalConfig;
+
+        this.modalService.openCustomModal(envParamsModal, EnvParamsComponent, {
+            isInstanceSelected: !!instanceId,    // equals to instanceId ? true : false
+            artifact: new ArtifactModel(artifact),
+            isViewOnly: true
+        });
+    }
+
+    public openUpdateEnvParams(componentType: string, componentId: string, artifact: ArtifactModel, instanceId?: string) {
+        let modalInstance;
+        const onOkPressed = () => {
+            const updatedArtifact = modalInstance.innerModalContent.instance.artifact;
+            this.serviceLoader.activate();
+            this.dispatchArtifactAction(componentId, componentType, updatedArtifact, ArtifactType.DEPLOYMENT, instanceId)
+                    .subscribe().add(() => this.serviceLoader.deactivate());
+        };
+
+        const envParamsModal = {
+            title: artifact.artifactDisplayName,
+            size: 'xl',
+            type: SdcUiCommon.ModalType.custom,
+            testId: 'envParams',
+            isDisabled: false,
+            buttons: [
+                {
+                    id: 'save',
+                    text: 'Save',
+                    spinner_position: 'left',
+                    size: 'sm',
+                    callback: onOkPressed,
+                    closeModal: true
+                },
+                {text: 'Cancel', size: 'sm', closeModal: true, type: 'secondary'}
+            ] as SdcUiCommon.IModalButtonComponent[]
+        } as SdcUiCommon.IModalConfig;
+
+        modalInstance = this.modalService.openCustomModal(envParamsModal, EnvParamsComponent, {
+            isInstanceSelected: !!instanceId,    // equals to instanceId ? true : false
+            artifact: new ArtifactModel(artifact)
+        });
+
+        modalInstance.innerModalContent.instance.onValidationChange.subscribe((isValid) => {
+            modalInstance.getButtonById('save').disabled = !isValid;
+        });
+    }
+
+    public deleteArtifact = (componentType: string, componentId: string, artifact: ArtifactModel, instanceId?: string) => {
+
+        const artifactObject = {
+            componentType,
+            componentId,
+            artifact,
+            instanceId
+        };
+
+        const onOkPressed: Function = () => {
+            this.serviceLoader.activate();
+            this.store.dispatch((instanceId) ? new DeleteInstanceArtifactAction(artifactObject) : new DeleteArtifactAction(artifactObject))
+                    .subscribe().add(() => this.serviceLoader.deactivate());
+        };
+
+        const title = this.translateService.translate('ARTIFACT_VIEW_DELETE_MODAL_TITLE');
+        const text = this.translateService.translate('ARTIFACT_VIEW_DELETE_MODAL_TEXT', {name: artifact.artifactDisplayName});
+        const okButton = {
+            testId: 'OK',
+            text: 'OK',
+            type: SdcUiCommon.ButtonType.warning,
+            callback: onOkPressed,
+            closeModal: true
+        } as SdcUiComponents.ModalButtonComponent;
+        this.modalService.openWarningModal(title, text, 'delete-information-artifact-modal', [okButton]);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/__snapshots__/env-params.component.spec.ts.snap b/catalog-ui/src/app/ng2/components/forms/env-params/__snapshots__/env-params.component.spec.ts.snap
new file mode 100644
index 0000000000..aa567bbef2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/__snapshots__/env-params.component.spec.ts.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`environment parameters component should match current snapshot of env-params component 1`] = `
+<env-params
+  cacheService={[Function Object]}
+  clearCurrentValue={[Function Function]}
+  copiedWorkingArtifactHeatParameters={[Function Array]}
+  defaultDeploymentTimeout={[Function Number]}
+  displayRegexValid={[Function String]}
+  maxDeploymentTimeout={[Function Number]}
+  minDeploymentTimeout={[Function Number]}
+  onValidationChange={[Function Subject]}
+  onValidityChange={[Function Function]}
+  openPopOver={[Function Function]}
+  popoverService={[Function Object]}
+  textArea="undefined"
+>
+  <div
+    class="filter-bar"
+  >
+    <sdc-filter-bar />
+  </div><ngx-datatable
+    class="material ngx-datatable"
+  >
+    <div
+      visibilityobserver=""
+    >
+      
+      <datatable-body
+        class="datatable-body"
+      >
+        <datatable-selection>
+          
+          
+          
+        </datatable-selection>
+      </datatable-body>
+      
+    </div>
+  </ngx-datatable>
+</env-params>
+`;
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.html b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.html
new file mode 100644
index 0000000000..f55aff5132
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.html
@@ -0,0 +1,71 @@
+<div class="filter-bar">
+    <sdc-filter-bar
+            [placeHolder]="'Search...'"
+            [testId]="'search-env-param-name'"
+            (keyup)="updateFilter($event)">
+    </sdc-filter-bar>
+</div>
+
+<ngx-datatable
+        class='material'
+        [rows]='artifact.heatParameters'
+        [columnMode]="'flex'"
+        [headerHeight]="40"
+        [rowHeight]="'auto'"
+        [scrollbarV]="false">
+
+    <ngx-datatable-column name="Parameter" [flexGrow]="2">
+        <ng-template let-row="row" ngx-datatable-cell-template prop="name">
+            {{row.name}}
+            <span *ngIf="row.description.length > 0" class="info">
+                <svg-icon [name]="'comment'" (click)="openPopOver('',row.description,{x:$event.pageX , y:$event.pageY },'bottom')"></svg-icon>
+            </span>
+        </ng-template>
+    </ngx-datatable-column>
+
+    <ngx-datatable-column name="DefaultValue"[flexGrow]="1">
+        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+            {{row.defaultValue}}
+        </ng-template>
+    </ngx-datatable-column>
+
+    <ngx-datatable-column name="CurrentValue" [flexGrow]="2">
+        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+            <sdc-input class="sdc-input-wrapper" #numberValidator
+                [placeHolder]="'Enter text'"
+                [isViewMode]="isViewOnly"
+                [size]="'medium'"
+                [(value)]=row.currentValue
+                [isIconClickable]="true"
+                (onRighIconClicked)="clearCurrentValue(row.name)"
+                [righIconName]="'trash-o'"
+                [testId] = "'value-field-of-' + row.name">
+            </sdc-input>
+
+            <sdc-validation [validateElement]="numberValidator" (validityChanged)="onValidityChange($event)" [disabled]="false" [testId]="_testId">
+                <sdc-regex-validator *ngIf="displayRegexValid && row.type == 'number' && row.currentValue !== null" [message]="'Value should be of type number.'" [pattern]="displayRegexValid" [disabled]="false"></sdc-regex-validator>
+            </sdc-validation>
+        </ng-template>
+    </ngx-datatable-column>
+
+</ngx-datatable>
+
+<div *ngIf="isInstanceSelected" class="artifactTimeout">
+
+    <sdc-number-input
+               label="Deployment Timeout ({{minDeploymentTimeout}}-{{maxDeploymentTimeout}} minutes)"
+               [required]="true"
+               [disabled]="false"
+               name="artifactTimeout"
+               testId="deploymentTimeout"
+               value="{{artifact.timeout}}"
+               [maxValue]="maxDeploymentTimeout"
+               [minValue]="minDeploymentTimeout"
+               (valueChange)="timeoutChanged($event)"
+               [isViewMode]="isViewOnly"
+               [step]="1"
+               >
+
+    </sdc-number-input>
+
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.less b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.less
new file mode 100644
index 0000000000..48b4cba184
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.less
@@ -0,0 +1,21 @@
+.filter-bar {
+  padding-bottom: 25px;
+}
+
+:host ::ng-deep {
+
+  .ngx-datatable {
+    //border: 1px solid red;
+    .datatable-body-cell {
+      .info {
+        float: right;
+      }
+    }
+  }
+}
+
+.artifactTimeout{
+  padding-top: 25px;
+  justify-content: start;
+  width: 230px;
+}
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.spec.ts b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.spec.ts
new file mode 100644
index 0000000000..f6b0eb4a21
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.spec.ts
@@ -0,0 +1,98 @@
+import {async, ComponentFixture} from "@angular/core/testing";
+import {EnvParamsComponent} from "./env-params.component";
+import {SdcUiServices, SdcUiCommon} from "onap-ui-angular";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {ArtifactModel} from "../../../../models/artifacts";
+import { CacheService } from '../../../services/cache.service';
+
+describe('environment parameters component', () => {
+
+    let fixture: ComponentFixture<EnvParamsComponent>;
+    let popoverServiceMock: Partial<SdcUiServices.PopoverService>;
+    let regexPatterns: any;
+
+    let artifactModel = new ArtifactModel();
+
+    let mockHeatParameters = [
+        {currentValue: "1", defaultValue: null, description: "Description 1", empty:false, name: "Param1", ownerId: null, type: "string", uniqueId: null, envDisplayName:null, version: null, filterTerm:null},
+        {currentValue: "2", defaultValue: null, description: "Description 2", empty:false, name: "Param2", ownerId: null, type: "string", uniqueId: null, envDisplayName:null, version: null, filterTerm:null},
+        {currentValue: "3", defaultValue: null, description: "Description 3", empty:false, name: "Param3", ownerId: null, type: "string", uniqueId: null, envDisplayName:null, version: null, filterTerm:null}
+        ];
+
+    let keyboardEvent = new KeyboardEvent("keyup");
+
+    beforeEach(
+        async(() => {
+
+            popoverServiceMock = {
+                createPopOver : jest.fn()
+            }
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [EnvParamsComponent],
+                    imports: [NgxDatatableModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        { provide: SdcUiServices.PopoverService, useValue: popoverServiceMock },
+                        { provide: CacheService, useValue: { get: jest.fn() } }
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(EnvParamsComponent);
+            });
+        })
+    );
+
+    it('should match current snapshot of env-params component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should clear CurrentValue for a given name in the heat parameter', () => {
+         fixture.componentInstance.artifact = artifactModel;
+         fixture.componentInstance.artifact.heatParameters = mockHeatParameters;
+         expect(fixture.componentInstance.artifact.heatParameters.length).toBe(3);
+         expect(fixture.componentInstance.artifact.heatParameters[0].currentValue).toBe("1");
+         fixture.componentInstance.clearCurrentValue("Param1");
+         expect(fixture.componentInstance.artifact.heatParameters[0].currentValue).toBe("");
+    });
+
+    it("should update filter heatParameters so there won''t be any value to be displayed", () => {
+
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.artifact.heatParameters = mockHeatParameters;
+        fixture.componentInstance.ngOnInit();
+
+        let event = {
+             target : {
+                value: 'paramNotExist'
+             }
+        }
+
+        expect(fixture.componentInstance.artifact.heatParameters.length).toBe(3);
+        fixture.componentInstance.updateFilter(event);
+        expect(fixture.componentInstance.artifact.heatParameters.length).toBe(0);
+    });
+
+    it("should update filter heatParameters so there will be only 1 value to be displayed", () => {
+
+        fixture.componentInstance.artifact = artifactModel;
+        fixture.componentInstance.artifact.heatParameters = mockHeatParameters;
+        fixture.componentInstance.ngOnInit();
+
+        let event = {
+            target : {
+                value: 'param1'
+            }
+        }
+
+        expect(fixture.componentInstance.artifact.heatParameters.length).toBe(3);
+        fixture.componentInstance.updateFilter(event);
+        expect(fixture.componentInstance.artifact.heatParameters.length).toBe(1);
+    });
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.ts b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.ts
new file mode 100644
index 0000000000..58d266a01d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.ts
@@ -0,0 +1,91 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { SdcUiCommon, SdcUiServices } from 'onap-ui-angular';
+import { Subject } from 'rxjs/Rx';
+import { ArtifactModel } from '../../../../models/artifacts';
+import { CacheService } from '../../../services/cache.service';
+
+export interface IPoint {
+    x: number;
+    y: number;
+}
+
+@Component({
+    selector: 'env-params',
+    templateUrl: './env-params.component.html',
+    styleUrls: ['../../../../../assets/styles/table-style.less', './env-params.component.less']
+})
+export class EnvParamsComponent implements OnInit {
+
+    @Input() public artifact: ArtifactModel;
+    @Input() public isInstanceSelected: boolean;
+    @Input() public isViewOnly: boolean;
+
+    @ViewChild('textArea') textArea: ElementRef;
+    private copiedWorkingArtifactHeatParameters = [];
+    private onValidationChange: Subject<boolean> = new Subject();
+    private displayRegexValid = SdcUiCommon.RegexPatterns.numberOrEmpty;
+
+    // Deployment timeout in minutes
+    private maxDeploymentTimeout: number = 120;
+    private minDeploymentTimeout: number = 1;
+    private defaultDeploymentTimeout: number = 60;
+
+    constructor(private cacheService: CacheService, private popoverService: SdcUiServices.PopoverService) {
+        const configuration = cacheService.get('UIConfiguration');
+        if (configuration && configuration.heatDeploymentTimeout) {
+            this.maxDeploymentTimeout = configuration.heatDeploymentTimeout.maxMinutes;
+            this.minDeploymentTimeout = configuration.heatDeploymentTimeout.minMinutes;
+            this.defaultDeploymentTimeout = configuration.heatDeploymentTimeout.defaultMinutes;
+        }
+    }
+
+    ngOnInit(): void {
+        this.copiedWorkingArtifactHeatParameters = [...this.artifact.heatParameters];
+    }
+
+    public clearCurrentValue = (name: string) => {
+        this.artifact.heatParameters.filter((param) => param.name === name)[0].currentValue = '';
+    }
+
+    public timeoutChanged(timeout) {
+        this.artifact.timeout = timeout;
+    }
+
+    updateFilter(event) {
+        const val = event.target.value.toLowerCase();
+        // filter our data
+        const temp = this.copiedWorkingArtifactHeatParameters.filter((param) => {
+            return !val || param.name ? param.name.toLowerCase().indexOf(val) !== -1 : -1 || param.currentValue ? param.currentValue.toLowerCase().indexOf(val) !== -1 : -1;
+        });
+        // update the rows
+        this.artifact.heatParameters = temp;
+    }
+
+    private openPopOver = (title: string, content: string, positionOnPage: IPoint, location: string) => {
+        this.popoverService.createPopOver(title, content, positionOnPage, location);
+    }
+
+    private onValidityChange = (isValid: boolean): void => {
+        this.onValidationChange.next(isValid);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.module.ts b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.module.ts
new file mode 100644
index 0000000000..85797bd45f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from "@angular/core";
+import { EnvParamsComponent } from "./env-params.component";
+import { NgxDatatableModule } from "@swimlane/ngx-datatable";
+import { SdcUiComponentsModule, SdcUiServices } from "onap-ui-angular";
+
+
+@NgModule({
+    declarations: [
+        EnvParamsComponent
+    ],
+    imports: [
+        NgxDatatableModule,
+        SdcUiComponentsModule
+    ],
+    exports: [
+        EnvParamsComponent
+    ],
+    entryComponents: [ //need to add anything that will be dynamically created
+        EnvParamsComponent
+    ],
+    providers: [
+        SdcUiServices.ModalService
+    ]
+})
+
+export class EnvParamsModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/layout/layout.module.ts b/catalog-ui/src/app/ng2/components/layout/layout.module.ts
index 827209326c..f6d2cf487e 100644
--- a/catalog-ui/src/app/ng2/components/layout/layout.module.ts
+++ b/catalog-ui/src/app/ng2/components/layout/layout.module.ts
@@ -13,7 +13,9 @@ import { TopNavComponent } from "./top-nav/top-nav.component";
         FormsModule,
         TranslateModule
     ],
-    exports: [],
+    exports: [
+        TopNavComponent
+    ],
     entryComponents: [ //need to add anything that will be dynamically created
         TopNavComponent
     ],
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap b/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap
new file mode 100644
index 0000000000..c650a9ca56
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`artifact form component should match current snapshot of top-nav component 1`] = `
+<top-nav
+  $state={[Function Object]}
+  _getTopLvlSelectedIndexByState={[Function Function]}
+  authService={[Function Object]}
+  sdcConfig={[Function Object]}
+  searchTermChange={[Function EventEmitter]}
+  translateService={[Function Object]}
+>
+  <nav
+    class="top-nav"
+  >
+    <div
+      class="asdc-app-title-wrapper"
+    >
+      <a
+        class="asdc-app-title"
+      >
+        
+      </a>
+      <div
+        class="asdc-version"
+      >
+         v.
+      </div>
+    </div>
+    
+    
+    <div
+      class="top-search"
+    >
+      <input
+        class="search-text"
+        data-tests-id="main-menu-input-search"
+        placeholder="Search"
+        type="text"
+      />
+      <span
+        class="w-sdc-search-icon magnification"
+      />
+    </div>
+    
+  </nav>
+</top-nav>
+`;
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts
new file mode 100644
index 0000000000..54fbb36dcf
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts
@@ -0,0 +1,161 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { PluginsConfiguration } from 'app/models';
+import { Observable } from 'rxjs';
+import { Mock } from 'ts-mockery';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { MenuItem, MenuItemGroup } from '../../../../utils/menu-handler';
+import { SdcConfigToken } from '../../../config/sdc-config.config';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { TopNavComponent } from './top-nav.component';
+
+describe('artifact form component', () => {
+
+    let fixture: ComponentFixture<TopNavComponent>;
+    let translateServiceMock: Partial<TranslateService>;
+    let mockStateService;
+    let authServiceMock;
+
+    const designerUser = {
+        email: 'designer@sdc.com',
+        firstName: 'Carlos',
+        fullName: 'Carlos Santana',
+        lastLoginTime: 1555587266566,
+        lastName: 'Santana',
+        role: 'DESIGNER',
+        status: 'ACTIVE',
+        userId: 'cs0008'
+    };
+
+    const pluginDisplayOptions = {
+        displayName : '',
+        displayContext : new Array<string>(),
+        displayRoles :  new Array<string>()
+    };
+
+    let roleToReturn = designerUser;
+
+    const map1 =  new Map();
+    map1.otherValue =  pluginDisplayOptions;
+
+    const map2 = new Map();
+    pluginDisplayOptions.displayRoles = ['DESIGNER'];
+    pluginDisplayOptions.displayName = 'DCAE-DS';
+    map2.tab =  pluginDisplayOptions;
+
+    PluginsConfiguration.plugins =
+        [
+            {pluginId: 'DCAED', pluginDiscoveryUrl: 'DCAED_discoveryURL', pluginSourceUrl: 'DCAED_sourceURL', pluginStateUrl: 'DCAED_stateURL', pluginDisplayOptions:  map1, isOnline: true},
+            {pluginId: 'DCAE-DS', pluginDiscoveryUrl: 'DCAE-DS_discoveryURL', pluginSourceUrl: 'DCAE-DS_sourceURL', pluginStateUrl: 'DCAE-DS_stateURL', pluginDisplayOptions: map2, isOnline: true}
+        ];
+
+    beforeEach(
+        async(() => {
+            authServiceMock = {
+                getLoggedinUser: jest.fn().mockImplementation(() => {
+                    return roleToReturn;
+                })
+            };
+
+            mockStateService = {
+                go: jest.fn(),
+                includes: jest.fn(() => true),
+                current : {
+                    name : 'plugins'
+                },
+                params : {}
+            };
+
+            translateServiceMock = {
+                languageChangedObservable: Mock.of<Observable<string>>( {
+                    subscribe : jest.fn().mockImplementation((cb) => {
+                        cb();
+                    })
+                }),
+                translate: jest.fn((str: string) => {
+                    if (str === 'TOP_MENU_HOME_BUTTON') {
+                        return 'HOME';
+                    } else if (str === 'TOP_MENU_CATALOG_BUTTON') {
+                        return 'CATALOG';
+                    } else if (str === 'TOP_MENU_ON_BOARD_BUTTON') {
+                        return 'ONBOARD';
+                    } else {
+                        return 'TBD...';
+                    }
+                })
+            };
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [TopNavComponent],
+                    imports: [TranslateModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: TranslateService, useValue: translateServiceMock},
+                        {provide: '$state', useValue: mockStateService},
+                        {provide: AuthenticationService, useValue: authServiceMock},
+                        {provide: SdcConfigToken, useValue: {csarFileExtension: 'csar', toscaFileExtension: 'yaml,yml'}},
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(TopNavComponent);
+            });
+        })
+    );
+
+    it('should match current snapshot of top-nav component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('Once a Designer logged in, Menu Items will contain HOME, CATALOG, ONBOARD & DCAE-DS; HOME will be selected', () => {
+
+        // topLvlSelectedIndex = 1 => Ignore the inner call to  _getTopLvlSelectedIndexByState.
+        fixture.componentInstance.topLvlSelectedIndex = 0;
+        fixture.componentInstance.ngOnInit();
+
+        expect(fixture.componentInstance.topLvlMenu.itemClick).toBe(true);
+
+        expect(fixture.componentInstance.topLvlMenu.menuItems.length).toBe(4);
+
+        expect(fixture.componentInstance.topLvlMenu.menuItems[0]).toEqual({
+            action: 'goToState',
+            blockedForTypes: null,
+            callback: null,
+            params: null,
+            state: 'dashboard',
+            text: 'HOME'
+        });
+        expect(fixture.componentInstance.topLvlMenu.menuItems[1]).toEqual({
+            action: 'goToState',
+            blockedForTypes: null,
+            callback: null,
+            params: null,
+            state: 'catalog',
+            text: 'CATALOG'
+        });
+        expect(fixture.componentInstance.topLvlMenu.menuItems[2]).toEqual({
+            action: 'goToState',
+            blockedForTypes: null,
+            callback: null,
+            params: null,
+            state: 'onboardVendor',
+            text: 'ONBOARD'
+        });
+        expect(fixture.componentInstance.topLvlMenu.menuItems[3]).toEqual({
+            action: 'goToState',
+            blockedForTypes: null,
+            callback: null,
+            params:
+                {path: 'DCAE-DS_stateURL'},
+            state: 'plugins',
+            text: 'DCAE-DS'
+        });
+
+        expect(fixture.componentInstance.topLvlMenu.selectedIndex).toBe(0);
+    });
+
+});
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
index f82e110f1f..2636dd96bb 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
@@ -65,6 +65,6 @@
         <span class="w-sdc-search-icon magnification"></span>
     </div>
 
-    <div class="notification-icon" [ngClass]="{'disabled' : progress > 0}" *ngIf="user.role === 'DESIGNER' && notificationIconCallback" (click)="notificationIconCallback()" tooltip="Vendor Software Product Repository" tooltipPlacement="left" data-tests-id="repository-icon"></div>
+    <div class="notification-icon" [ngClass]="{'disabled' : progress > 0}" *ngIf="user && user.role === 'DESIGNER' && notificationIconCallback" (click)="notificationIconCallback()" tooltip="Vendor Software Product Repository" tooltipPlacement="left" data-tests-id="repository-icon"></div>
 
 </nav>
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
index 5c99015e7d..2bcdfc28d5 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
@@ -120,7 +120,7 @@
             height: 35px;
             background-color: white;
             font-size: 13px;
-            width: 150px;
+            width: auto;
             line-height: 35px;
             padding: 0 10px;
 
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
index a253b3a933..3bd2255488 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
@@ -19,14 +19,17 @@
  */
 
 import * as _ from "lodash";
-import {Component, Inject, Input, Output, EventEmitter} from "@angular/core";
+import {Component, Inject, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges} from "@angular/core";
 import {IHostedApplication, IUserProperties} from "app/models";
 import {MenuItemGroup, MenuItem} from "app/utils";
-import {UserService} from "../../../services/user.service";
+import {AuthenticationService} from "../../../services/authentication.service";
 import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config";
 import {TranslateService} from "../../../shared/translator/translate.service";
 import {PluginsConfiguration, Plugin} from "app/models";
-
+import { Subscription } from "rxjs";
+// import { Store } from "@ngrx/store";
+// import { AppState } from "app/ng2/store/app.state";
+// import * as unsavedChangesReducer from 'app/ng2/store/reducers/unsaved-changes.reducer';
 
 declare const window:any;
 @Component({
@@ -34,7 +37,7 @@ declare const window:any;
     templateUrl: './top-nav.component.html',
     styleUrls:['./top-nav.component.less']
 })
-export class TopNavComponent {
+export class TopNavComponent implements OnInit, OnChanges {
     @Input() public version:string;
     @Input() public menuModel:Array<MenuItemGroup>;
     @Input() public topLvlSelectedIndex:number;
@@ -48,15 +51,18 @@ export class TopNavComponent {
         this.searchTermChange.emit(event);
     }
 
+    private subscription: Subscription;
+    private hasUnsavedChanges: boolean;
     public topLvlMenu:MenuItemGroup;
     public user:IUserProperties;
     private topNavPlugins: Array<Plugin>;
 
     constructor(private translateService:TranslateService,
                 @Inject('$state') private $state:ng.ui.IStateService,
-                private userService:UserService,
+                private authService:AuthenticationService,
                 @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
         window.nav = this;
+
     }
 
     private _getTopLvlSelectedIndexByState = ():number => {
@@ -112,7 +118,7 @@ export class TopNavComponent {
 
     ngOnInit() {
         console.log('Nav is init!', this.menuModel);
-        this.user = this.userService.getLoggedinUser();
+        this.user = this.authService.getLoggedinUser();
         this.topNavPlugins = _.filter(PluginsConfiguration.plugins, (plugin: Plugin) => {
             return plugin.pluginDisplayOptions["tab"] !== undefined;
         });
@@ -142,7 +148,6 @@ export class TopNavComponent {
 
             this.topLvlMenu = new MenuItemGroup(0, tmpArray, true);
             this.topLvlMenu.selectedIndex = isNaN(this.topLvlSelectedIndex) ? this._getTopLvlSelectedIndexByState() : this.topLvlSelectedIndex;
-
             this.generateMenu();
         });
     }
@@ -160,6 +165,7 @@ export class TopNavComponent {
         });
     }
 
+
     menuItemClick(itemGroup:MenuItemGroup, item:MenuItem) {
 
         let onSuccessFunction = () => {
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap
new file mode 100644
index 0000000000..02e98e2219
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter-properties-assignemnt component should match current snapshot of artifact-tab component 1`] = `
+<filter-properties-assignment
+  allSelected="false"
+  clearAll={[Function Function]}
+  close={[Function Function]}
+  filterData={[Function FilterPropertiesAssignmentData]}
+  filterPopover={[Function ElementRef]}
+  footerButtons={[Function Object]}
+  onTypeSelected={[Function Function]}
+  search={[Function Function]}
+  searchProperties={[Function EventEmitter]}
+  selectAll={[Function Function]}
+  selectedTypes={[Function Object]}
+  someTypesSelectedAndThereIsPropertyName={[Function Function]}
+>
+  <popover-content
+    placement="bottom-right"
+  >
+    <form>
+      <div
+        class="field"
+      >
+        <label>
+          Resource Type
+        </label>
+        <div>
+          <checkbox
+            data-tests-id="filter-checkbox-all"
+          />
+        </div>
+        
+      </div>
+      <div
+        class="field"
+      >
+        <label>
+          Property Name
+        </label>
+        <input
+          class="i-sdc-form-input"
+          data-tests-id="filter-box"
+          name="propertyName"
+          placeholder="Type here"
+          required=""
+        />
+      </div>
+    </form>
+  </popover-content><div
+    class="open-filter-button"
+  >
+    <div
+      class="sprite-new filter-icon"
+      data-tests-id="filter-button"
+    />
+  </div>
+</filter-properties-assignment>
+`;
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
index 9593ade48b..1c2d77a728 100644
--- a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
@@ -38,6 +38,6 @@
         </div>
     </form>
 </popover-content>
-<div class="open-filter-button" [popover]="filterPopover" [ngClass]="{'open':showPopover}" (onShown)="showPopover = true" (onHidden)="showPopover = false">
+<div class="open-filter-button" [popover]="filterPopover" >
     <div class="sprite-new filter-icon" data-tests-id="filter-button"></div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts
new file mode 100644
index 0000000000..bcc5535b32
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts
@@ -0,0 +1,141 @@
+import {async, ComponentFixture} from "@angular/core/testing";
+import {FilterPropertiesAssignmentComponent} from "./filter-properties-assignment.component";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {FilterPropertiesAssignmentData} from "../../../../models/filter-properties-assignment-data";
+import {PopoverComponent} from "../../ui/popover/popover.component";
+
+
+
+describe('filter-properties-assignemnt component', () => {
+
+    let fixture: ComponentFixture<FilterPropertiesAssignmentComponent>;
+
+    beforeEach(
+        async(() => {
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [FilterPropertiesAssignmentComponent],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(FilterPropertiesAssignmentComponent);
+
+            });
+        })
+    );
+
+
+    it('should match current snapshot of artifact-tab component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('on selectAll', () => {
+        let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+        filterData.propertyName = 'testVal';
+        let typesOptions:Array<string> = ['option1', 'option2', 'option3'];
+        let selectedTypes:Object = {};
+
+        fixture.componentInstance.filterData = filterData;
+        fixture.componentInstance.typesOptions = typesOptions;
+        fixture.componentInstance.selectedTypes = selectedTypes;
+
+        fixture.componentInstance.selectAll();
+
+        let expectedRes = {"option1": false,"option2": false,"option3": false};
+        expect(fixture.componentInstance.selectedTypes).toEqual(expectedRes);
+    });
+
+
+    it ('on onTypeSelected allSelected set to False', () => {
+        let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+        fixture.componentInstance.selectedTypes = selectedTypes;
+        fixture.componentInstance.allSelected = true;
+        fixture.componentInstance.onTypeSelected('option2');
+
+        expect(fixture.componentInstance.allSelected).toBe(false);
+    });
+
+    it ('on onTypeSelected allSelected remains True', () => {
+        let selectedTypes:Object = {"option1": true,"option2": true,"option3": true};
+        fixture.componentInstance.selectedTypes = selectedTypes;
+        fixture.componentInstance.allSelected = true;
+        fixture.componentInstance.onTypeSelected('option2');
+
+        expect(fixture.componentInstance.allSelected).toBe(true);
+    });
+
+    it ('on clearAll', () => {
+        let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+        filterData.propertyName = 'testVal';
+        let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+
+        fixture.componentInstance.filterData = filterData;
+        fixture.componentInstance.selectedTypes = selectedTypes;
+        fixture.componentInstance.allSelected = true;
+
+        fixture.componentInstance.clearAll();
+
+        expect(fixture.componentInstance.filterData.propertyName).toBe('');
+        expect(fixture.componentInstance.allSelected).toBe(false);
+    });
+
+    it ('someTypesSelectedAndThereIsPropertyName return True', ()=> {
+        let res = fixture.componentInstance.someTypesSelectedAndThereIsPropertyName();
+
+        expect(res).toBe(true)
+    });
+
+    it ('someTypesSelectedAndThereIsPropertyName return Null', ()=> {
+        let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+        let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+        filterData.propertyName = 'testVal';
+
+        fixture.componentInstance.selectedTypes = selectedTypes;
+        fixture.componentInstance.filterData = filterData;
+
+        let res = fixture.componentInstance.someTypesSelectedAndThereIsPropertyName();
+
+        expect(res).toBe(null)
+    });
+
+    it ('search', ()=> {
+
+        let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+        filterData.selectedTypes = ["CP"];
+        fixture.componentInstance.filterData = filterData;
+
+        let componentType: string = 'resource';
+        fixture.componentInstance.componentType = componentType;
+
+        let selectedTypes:Object = {"option1": true,"CP": true,"option3": true};
+        fixture.componentInstance.selectedTypes = selectedTypes;
+
+        let temp:any;
+        let filterPopover: PopoverComponent = new PopoverComponent(temp , temp );
+        fixture.componentInstance.filterPopover = filterPopover;
+        fixture.componentInstance.filterPopover.hide = jest.fn();
+
+        fixture.componentInstance.search();
+
+        expect(fixture.componentInstance.filterData.selectedTypes).toEqual(["CP"]);
+        expect(fixture.componentInstance.filterPopover.hide).toHaveBeenCalled();
+    });
+
+    it('close', () => {
+        let temp:any;
+        let filterPopover: PopoverComponent = new PopoverComponent(temp , temp );
+        fixture.componentInstance.filterPopover = filterPopover;
+        fixture.componentInstance.filterPopover.hide = jest.fn();
+
+        fixture.componentInstance.close();
+
+        expect(fixture.componentInstance.filterPopover.hide).toHaveBeenCalled();
+    });
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
index 41ecaa899e..9d1a2fa734 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
@@ -29,8 +29,8 @@
       [rowHeight]="200"
       [reorderable]="false"
   >
-    <ngx-datatable-column prop="{{col.prop}}" [minWidth]="100" *ngFor="let col of columns">
-      <template let-column="column" height="100" ngx-datatable-header-template>
+    <ngx-datatable-column *ngFor="let col of columns" prop="{{col.prop}}" [minWidth]="100" >
+      <ng-template let-column="column" height="100" ngx-datatable-header-template>
             <span class="datatable-column-span">
               <b>{{col.name}}</b>
               <div *ngIf="canBeDeleted(col.name)" style="width: 45px !important; color: red; "
@@ -44,23 +44,23 @@
             placeholder='Filter column...'
             (keyup)='updateColumnFilter($event, col.prop)'
         />
-      </template>
+      </ng-template>
     </ngx-datatable-column>
 
     <ngx-datatable-column *ngIf="addNewColumn" class="datatable-white-body-cell" [minWidth]="220" [maxWidth]="220" [width]="220" >
-      <template ngx-datatable-header-template>
+      <ng-template ngx-datatable-header-template>
         <gab-column-provider [pathsAndNames]="pathsandnames" (onCancel)="hideAddNewColumn()" (onSave)="refresh()"></gab-column-provider>
-      </template>
-      <template class="datatable-white-body-cell" ngx-datatable-cell-template>
-      </template>
+      </ng-template>
+      <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
+      </ng-template>
     </ngx-datatable-column>
 
     <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="50" [width]="50" >
-      <template ngx-datatable-header-template>
+      <ng-template ngx-datatable-header-template>
         <div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div>
-      </template>
-      <template class="datatable-white-body-cell" ngx-datatable-cell-template>
-      </template>
+      </ng-template>
+      <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
+      </ng-template>
     </ngx-datatable-column>
   </ngx-datatable>
-</div>
\ No newline at end of file
+</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
index 4de7ff07d9..ea8039e1b4 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
@@ -64,8 +64,8 @@ export class GenericArtifactBrowserComponent {
     this.gabService.getArtifact(this.artifactid, this.resourceid, paths)
     .subscribe(
         response => {
-          let typedServerResponse: IServerResponse = response.json() as IServerResponse;
-          this.normalizeDataForNgxDatatable(typedServerResponse.data);
+          // let typedServerResponse: IServerResponse = response.json() as IServerResponse;
+          this.normalizeDataForNgxDatatable(response['data']);
         },
         () => {
             this.ready = false;
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts
new file mode 100644
index 0000000000..fc76463970
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts
@@ -0,0 +1,52 @@
+import { async, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import 'jest-dom/extend-expect';
+import {HierarchyNavigationComponent} from "./hierarchy-navigation.component";
+import {HierarchyDisplayOptions} from "./hierarchy-display-options";
+
+
+describe('hierarchyNavigationComponent', () => {
+  let fixture: ComponentFixture<HierarchyNavigationComponent>;
+    let hierarchyDisplayOptions: HierarchyDisplayOptions;
+  beforeEach(
+    async(() => {
+      const configure: ConfigureFn = testBed => {
+        testBed.configureTestingModule({
+          declarations: [HierarchyNavigationComponent]
+        });
+      };
+
+      configureTests(configure).then(testBed => {
+        fixture = testBed.createComponent(HierarchyNavigationComponent);
+        hierarchyDisplayOptions = new HierarchyDisplayOptions("id", "name", "children");
+          fixture.componentInstance.displayOptions = hierarchyDisplayOptions;
+          fixture.detectChanges();
+          fixture.componentInstance.displayData = [{name: "aaa", id: "1", children: [{name: "bbb", id: "1.1"}, {name: "ccc", id: "1.2", children: [{name: "aaa", id: "1.2.1"}]}]}, {name: "bbb", id: "2"}];
+          fixture.detectChanges();
+      });
+    })
+  );
+
+  it('should have a selected class after user click on a tree node',
+    () => {
+        let firstNodeElement = fixture.debugElement.query(By.css('.node-item'));
+        fixture.componentInstance.updateSelected.subscribe((item) => {
+            fixture.componentInstance.selectedItem = item.id;
+            fixture.detectChanges();
+        });
+        firstNodeElement.nativeElement.click();
+        fixture.whenStable().then(() => {
+            expect(firstNodeElement.children[0].nativeElement).toHaveClass('selected');
+        });
+    });
+
+    it('should call onClick function when user click on a tree node',
+        () => {
+            spyOn(fixture.componentInstance, 'onClick');
+            let firstNodeElement = fixture.debugElement.query(By.css('.node-item')).nativeElement;
+            firstNodeElement.click();
+            expect(fixture.componentInstance.onClick).toHaveBeenCalled();
+        });
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
index 1698157e90..8b20aa28f8 100644
--- a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
@@ -21,7 +21,6 @@
 import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {HierarchyDisplayOptions} from './hierarchy-display-options';
 
-
 @Component({
     selector: 'hierarchy-navigation',
     templateUrl: './hierarchy-navigation.component.html',
@@ -32,7 +31,6 @@ export class HierarchyNavigationComponent {
     @Input() displayData: Array<any>;
     @Input() selectedItem: any;
     @Input() displayOptions: HierarchyDisplayOptions;
-
     @Output() updateSelected:EventEmitter<any> =  new EventEmitter();
 
     onClick = ($event, item) => {
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
index 3ef1f57bf2..eeba590046 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
@@ -35,33 +35,37 @@
         <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
         <div>
             <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}">
+                <!-- Property Name -->
                 <div class="table-cell col1">
                     <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div>
                     <span *ngIf="input.description"
                           class="property-description-icon sprite-new show-desc"
                           tooltip="{{input.description}}" tooltipDelay="0"></span>
                 </div>
+                <!-- From Instance -->
                 <div class="table-cell col3">
                     <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]?.name}}">
                         <span>{{instanceNamesMap[input.instanceUniqueId]?.name}}</span>
                     </div>
                 </div>
+                <!-- Type -->
                 <div class="table-cell col2">
                     <div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
                         <span>{{input.type | contentAfterLastDot}}</span>
                     </div>
                 </div>
+                <!-- Value -->
                 <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
                     <dynamic-element class="value-input"
-                                     *ngIf="input.isSimpleType"
+                                     *ngIf="checkInstanceFePropertiesMapIsFilled() && input.isSimpleType"
                                      pattern="validationUtils.getValidationPattern(input.type)"
                                      [value]="input.defaultValueObj"
                                      [type]="input.type"
-                                     [constraints]="input.constraints"
                                      [name]="input.name"
                                      (elementChanged)="onInputChanged(input, $event)"
                                      [readonly]="readonly"
-                                     [testId]="'input-' + input.name">
+                                     [testId]="'input-' + input.name"
+                                     [constraints] = "getConstraints(input)">
                     </dynamic-element>
                     <div class="delete-button-container">
                         <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
index d95198f162..f45d5a85c7 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
@@ -26,6 +26,8 @@ import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { InputFEModel } from "app/models";
 import { ModalService } from "../../../services/modal.service";
 import { InstanceFeDetails } from "app/models/instance-fe-details";
+import { InstanceFePropertiesMap } from "../../../../models/properties-inputs/property-fe-map";
+import { DataTypeService } from "../../../services/data-type.service";
 
 @Component({
     selector: 'inputs-table',
@@ -41,6 +43,8 @@ export class InputsTableComponent {
     @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
 
+    @Input() fePropertiesMap: InstanceFePropertiesMap;
+    
     sortBy: String;
     reverse: boolean;
     selectedInputToDelete: InputFEModel;    
@@ -74,7 +78,8 @@ export class InputsTableComponent {
     };
 
 
-    constructor(private modalService: ModalService) {
+    constructor(private modalService: ModalService, private dataTypeService: DataTypeService){
+        var x = 5
     }
 
 
@@ -89,9 +94,40 @@ export class InputsTableComponent {
     };
 
     openDeleteModal = (input: InputFEModel) => {
+        console.log('exist inputs: ' + this.inputs)
+        
+        
         this.selectedInputToDelete = input;
         this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open();
     }
+
+    getConstraints(input:InputFEModel): string[]{
+        
+        if (input.inputPath){
+            const pathValuesName = input.inputPath.split('#');
+            const rootPropertyName = pathValuesName[0];
+            const propertyName = pathValuesName[1];
+            let filterredRootPropertyType = _.values(this.fePropertiesMap)[0].filter(property => 
+                property.name == rootPropertyName);
+            if (filterredRootPropertyType.length > 0){
+                let rootPropertyType = filterredRootPropertyType[0].type;
+                return this.dataTypeService.getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName);
+            }else{
+                return null;
+            }
+                
+        }
+        // else if(input.constraints.length > 0){
+        //     return input.constraints[0].validValues
+        // }
+        else{
+            return null;
+        }
+    }
+
+    checkInstanceFePropertiesMapIsFilled(){
+        return _.keys(this.fePropertiesMap).length > 0
+    }
 }
 
 
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
index aa5f2420b3..9613439859 100644
--- a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
@@ -14,12 +14,11 @@
  * permissions and limitations under the License.
  */
 
-
-import { Component, Input, Output, EventEmitter } from "@angular/core";
-import { PolicyInstance } from "app/models";
-import { ModalService } from "../../../services/modal.service";
-import { InstanceFeDetails } from "app/models/instance-fe-details";
-import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PolicyInstance } from 'app/models';
+import { InstanceFeDetails } from 'app/models/instance-fe-details';
+import { TranslateService } from 'app/ng2/shared/translator/translate.service';
+import { ModalService } from '../../../services/modal.service';
 
 @Component({
     selector: 'policies-table',
@@ -28,13 +27,13 @@ import {TranslateService} from 'app/ng2/shared/translator/translate.service';
 })
 export class PoliciesTableComponent {
 
-    @Input() policies: Array<PolicyInstance>;
+    @Input() policies: PolicyInstance[];
     @Input() instanceNamesMap: Map<string, InstanceFeDetails>;
     @Input() readonly: boolean;
     @Input() isLoading: boolean;
     @Output() deletePolicy: EventEmitter<any> = new EventEmitter<any>();
 
-    sortBy: String;
+    sortBy: string;
     reverse: boolean;
     selectedPolicyToDelete: PolicyInstance;
     deleteMsgTitle: string;
@@ -42,43 +41,39 @@ export class PoliciesTableComponent {
     modalDeleteBtn: string;
     modalCancelBtn: string;
 
+    constructor(private modalService: ModalService, private translateService: TranslateService) {
+    }
+
     sort = (sortBy) => {
         this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
-        let reverse = this.reverse ? 1 : -1;
+        const reverse = this.reverse ? 1 : -1;
         this.sortBy = sortBy;
-        let instanceNameMapTemp = this.instanceNamesMap;
-        let itemIdx1Val = "";
-        let itemIdx2Val = "";
-        this.policies.sort(function (itemIdx1, itemIdx2) {
-            if (sortBy == 'instanceUniqueId') {
-                itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : "";
-                itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : "";
-            }
-            else {
+        const instanceNameMapTemp = this.instanceNamesMap;
+        let itemIdx1Val = '';
+        let itemIdx2Val = '';
+        this.policies.sort((itemIdx1, itemIdx2) => {
+            if (sortBy === 'instanceUniqueId') {
+                itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : '';
+                itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : '';
+            } else {
                 itemIdx1Val = itemIdx1[sortBy];
                 itemIdx2Val = itemIdx2[sortBy];
-            }            
+            }
             if (itemIdx1Val < itemIdx2Val) {
                 return -1 * reverse;
-            }
-            else if (itemIdx1Val > itemIdx2Val) {
+            } else if (itemIdx1Val > itemIdx2Val) {
                 return 1 * reverse;
-            }
-            else {
+            } else {
                 return 0;
             }
         });
-    };
-
-
-    constructor(private modalService: ModalService, private translateService: TranslateService) {
     }
 
     ngOnInit() {
-        this.translateService.languageChangedObservable.subscribe(lang => {
-            this.deleteMsgTitle = this.translateService.translate("DELETE_POLICY_TITLE");
-            this.modalDeleteBtn = this.translateService.translate("MODAL_DELETE");
-            this.modalCancelBtn = this.translateService.translate("MODAL_CANCEL");
+        this.translateService.languageChangedObservable.subscribe((lang) => {
+            this.deleteMsgTitle = this.translateService.translate('DELETE_POLICY_TITLE');
+            this.modalDeleteBtn = this.translateService.translate('MODAL_DELETE');
+            this.modalCancelBtn = this.translateService.translate('MODAL_CANCEL');
 
         });
     }
@@ -86,15 +81,13 @@ export class PoliciesTableComponent {
     onDeletePolicy = () => {
         this.deletePolicy.emit(this.selectedPolicyToDelete);
         this.modalService.closeCurrentModal();
-    };
+    }
 
     openDeleteModal = (policy: PolicyInstance) => {
         this.selectedPolicyToDelete = policy;
-        this.translateService.languageChangedObservable.subscribe(lang => {
-            this.deleteMsgBodyTxt = this.translateService.translate("DELETE_POLICY_MSG", {policyName: policy.name});
+        this.translateService.languageChangedObservable.subscribe((lang) => {
+            this.deleteMsgBodyTxt = this.translateService.translate('DELETE_POLICY_MSG', {policyName: policy.name});
             this.modalService.createActionModal(this.deleteMsgTitle, this.deleteMsgBodyTxt, this.modalDeleteBtn, this.onDeletePolicy, this.modalCancelBtn).instance.open();
         });
     }
 }
-
-
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
index f780c62c0b..57cb13c281 100644
--- a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
@@ -14,12 +14,12 @@
  * permissions and limitations under the License.
  */
 
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {PoliciesTableComponent} from "./policies-table.component";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { GlobalPipesModule } from '../../../pipes/global-pipes.module';
+import { PoliciesTableComponent } from './policies-table.component';
 
 @NgModule({
     declarations: [
@@ -38,4 +38,4 @@ import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
     providers: []
 })
 export class PoliciesTableModule {
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index c4639aeda0..f6396e6f2c 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -12,8 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  -->
-
-
+ 
+ 
 <div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
     [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName, 'readonly':  property.isDisabled ||property.isDeclared}"
     [class.with-top-border]="property.isChildOfListOrMap"
@@ -48,13 +48,13 @@
                 pattern="validationUtils.getValidationPattern(property.type)"
                 [value]="property.isDeclared ? property.value : property.valueObj"
                 [type]="property.isDeclared ? 'string' : property.type"
-                [childType]="property.schema.property.type"
                 [name]="property.name"
                 [path]="property.propertiesName"
-                [constraints]="property.constraints"
                 (elementChanged)="onElementChanged($event)"
                 [readonly]="readonly || property.isDeclared || property.isDisabled"
                 [testId]="'prop-' + propertyTestsId"
+                [declared] = "property.isDeclared"
+                [constraints] = "constraints"
             ></dynamic-element>
         </div>
     </ng-container>
@@ -69,7 +69,7 @@
     <ng-container *ngIf="!property.isDeclared">
             <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to list</a>
             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'delete-from-list-' + propertyTestsId"></span>
-            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId"></span>
+            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId" ></span>
     </ng-container>
 
 </div>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
index 0adce2c99d..1007292854 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
@@ -60,7 +60,7 @@
         align-self:center;
         cursor:pointer;
     }
-
+    
 }
 
 .filtered {
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index 6e19c95003..715426f212 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -23,7 +23,7 @@ import {Component, Input, Output, EventEmitter, ViewChild, ComponentRef} from "@
 import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models";
 import { PROPERTY_TYPES } from 'app/utils';
 import { DataTypeService } from "../../../../services/data-type.service";
-import { trigger, state, style, transition, animate } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils";
 import {IUiElementChangeEvent} from "../../../ui/form-components/ui-element-base.component";
 import {DynamicElementComponent} from "../../../ui/dynamic-element/dynamic-element.component";
@@ -42,6 +42,7 @@ export class DynamicPropertyComponent {
     isPropertyFEModel: boolean;
     nestedLevel: number;
     propertyTestsId: string;
+    constraints:string[];
 
     @Input() canBeDeclared: boolean;
     @Input() property: PropertyFEModel | DerivedFEProperty;
@@ -72,7 +73,30 @@ export class DynamicPropertyComponent {
         this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName;
         this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length;
         this.rootProperty = (this.rootProperty) ? this.rootProperty : <PropertyFEModel>this.property;
-        this.propertyTestsId = this.getPropertyTestsId();
+        this.propertyTestsId = this.getPropertyTestsId(); 
+        
+        this.initConsraintsValues();
+        
+        
+    }
+
+    initConsraintsValues(){
+        let primitiveProperties = ['string', 'integer', 'float', 'boolean'];
+
+        //Property has constraints
+        if(this.property.constraints){
+            this.constraints = this.property.constraints[0].validValues
+        }
+
+        //Complex Type
+        else if (primitiveProperties.indexOf(this.rootProperty.type) == -1 && primitiveProperties.indexOf(this.property.type) >= 0 ){
+            this.constraints = this.dataTypeService.getConstraintsByParentTypeAndUniqueID(this.rootProperty.type, this.property.name);           
+        }
+ 
+        else{
+            this.constraints = null;
+        }
+        
     }
 
     ngDoCheck() {
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index 2068b170b3..89b85d3578 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -37,18 +37,18 @@
         <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
 
         <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:vspId">
+            <!-- Icon & Instance Name -->
             <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">
-
-
                 <span [ngClass]="['prop-instance-icon', feInstanceNamesMap[instanceId].iconClass, 'small']"></span>
-                {{feInstanceNamesMap[instanceId].name}}
+                {{feInstanceNamesMap[instanceId].name}} 
                 <div class="sprite-new archive-label" *ngIf="feInstanceNamesMap[instanceId].originArchived == true"></div>
             </div>
-
-            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | orderBy:{path: path, direction: direction}; trackBy:property?.name "
+            
+            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name "
                 (click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
 
                 <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
+                <!-- Property Name -->
                     <div class="property-name">
                         <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled || property.isDeclared || readonly"
                             (checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></checkbox>
@@ -62,16 +62,19 @@
                         <span *ngIf="showDelete" class="sprite-new delete-btn" [ngClass]="{'disabled' : property.isDisabled || property.isDeclared}" (click)="openDeleteModal(property)" data-tests-id="delete-input-button"></span>
                     </div>
                 </div>
+                <!-- Property Type -->
                 <div class="table-cell col2" *ngIf="!hidePropertyType">
                     <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
                         <span>{{property.type | contentAfterLastDot}}</span>
                     </div>
                 </div>
+                <!-- Property ES (Entry Schema) -->
                 <div class="table-cell col3" *ngIf="!hidePropertyType">
                     <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
                         <span>{{property.schema.property.type | contentAfterLastDot}}</span>
                     </div>
                 </div>
+                <!-- Property Value -->
                 <div class="table-cell valueCol">
                     <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
                     <dynamic-property
@@ -86,9 +89,10 @@
                         (expandChild)="property.updateExpandedChildPropertyId($event)"
                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
                         (checkProperty)="propertyChecked(property, $event)"
+
                         >
+                        
                     </dynamic-property>
-
                 </div>
             </div>
         </ng-container>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts
new file mode 100644
index 0000000000..ea524e54b1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts
@@ -0,0 +1,175 @@
+import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { DerivedFEProperty } from '../../../../models/properties-inputs/derived-fe-property';
+import { PropertyBEModel } from '../../../../models/properties-inputs/property-be-model';
+import { PropertyFEModel } from '../../../../models/properties-inputs/property-fe-model';
+import { ContentAfterLastDotPipe } from '../../../pipes/contentAfterLastDot.pipe';
+import { KeysPipe } from '../../../pipes/keys.pipe';
+import { PropertiesOrderByPipe } from '../../../pipes/properties-order-by.pipe';
+import { SearchFilterPipe } from '../../../pipes/searchFilter.pipe';
+import { ModalService } from '../../../services/modal.service';
+import { PropertiesService } from '../../../services/properties.service';
+import { PropertiesTableComponent, PropertyRowSelectedEvent } from './properties-table.component';
+
+describe('properties-table component', () => {
+
+    let fixture: ComponentFixture<PropertiesTableComponent>;
+    let propertiesServiceMock: Partial<PropertiesService>;
+    let modalServiceMock: Partial<ModalService>;
+
+    beforeEach(
+        () => {
+            propertiesServiceMock = {
+                undoDisableRelatedProperties: jest.fn(),
+                disableRelatedProperties: jest.fn()
+            };
+            modalServiceMock = {
+
+            };
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [
+                        PropertiesTableComponent,
+                        KeysPipe,
+                        PropertiesOrderByPipe,
+                        SearchFilterPipe,
+                        ContentAfterLastDotPipe
+                    ],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: PropertiesService, useValue: propertiesServiceMock},
+                        {provide: ModalService, useValue: modalServiceMock}
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(PropertiesTableComponent);
+            });
+        }
+    );
+
+    it('When Properties assignment page is loaded, it is sorted by property name (acsending)', () => {
+        const fePropertiesMapValues = new SimpleChange('previousValue', 'currentValue', true);
+        const changes = {
+            fePropertiesMap: fePropertiesMapValues
+        };
+
+        // init values before ngOnChanges was called
+        fixture.componentInstance.sortBy = 'existingValue';
+
+        fixture.componentInstance.ngOnChanges(changes);
+
+        expect (fixture.componentInstance.reverse).toEqual(true);
+        // expect (fixture.componentInstance.direction).toEqual(1);
+        expect (fixture.componentInstance.direction).toEqual(fixture.componentInstance.ascUpperLettersFirst);
+        expect (fixture.componentInstance.sortBy).toEqual('name');
+        expect (fixture.componentInstance.path.length).toEqual(1);
+        expect (fixture.componentInstance.path[0]).toEqual('name');
+    });
+
+    it('When ngOnChanges is called without fePropertiesMap,' +
+        ' sortBy will remain as it was', () => {
+        const fePropertiesMapValues = new SimpleChange('previousValue', 'currentValue', true);
+        const changes = {
+            dummyKey: fePropertiesMapValues
+        };
+
+        // init values before ngOnChanges was called
+        fixture.componentInstance.sortBy = 'existingValue';
+        fixture.componentInstance.sort = jest.fn();
+
+        fixture.componentInstance.ngOnChanges(changes);
+
+        expect (fixture.componentInstance.sortBy).toEqual('existingValue');
+    });
+
+    it ('When sort is called init this.direction to 1', () => {
+        // init values
+        fixture.componentInstance.reverse = false;
+        fixture.componentInstance.direction = 0;
+        fixture.componentInstance.sortBy = 'initialize.Value';
+        fixture.componentInstance.path = [];
+
+        // call sore function
+        fixture.componentInstance.sort('initialize.Value');
+
+        // expect that
+        expect (fixture.componentInstance.reverse).toBe(true);
+        expect (fixture.componentInstance.direction).toBe(fixture.componentInstance.ascUpperLettersFirst);
+        expect (fixture.componentInstance.sortBy).toBe('initialize.Value');
+        expect (fixture.componentInstance.path.length).toBe(2);
+        expect (fixture.componentInstance.path[0]).toBe('initialize');
+        expect (fixture.componentInstance.path[1]).toBe('Value');
+    });
+
+    it ('When sort is called init this.direction to -1', () => {
+        // init values
+        fixture.componentInstance.reverse = true;
+        fixture.componentInstance.direction = 0;
+        fixture.componentInstance.sortBy = 'initialize.Value';
+        fixture.componentInstance.path = [];
+
+        // call sore function
+        fixture.componentInstance.sort('initialize.Value');
+
+        // expect that
+        expect (fixture.componentInstance.reverse).toBe(false);
+        expect (fixture.componentInstance.direction).toBe(fixture.componentInstance.descLowerLettersFirst);
+    });
+
+    it ('When onPropertyChanged is called, event is emitted' , () => {
+        spyOn(fixture.componentInstance.emitter, 'emit');
+        fixture.componentInstance.onPropertyChanged('testProperty');
+        expect(fixture.componentInstance.emitter.emit).toHaveBeenCalledWith('testProperty');
+    });
+
+    it ('When onClickPropertyRow is called, selectedPropertyId is updated and event is emitted.' , () => {
+        const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+        propertyFEModel.name = 'propertyName';
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName');
+
+        spyOn(fixture.componentInstance.selectPropertyRow, 'emit');
+        fixture.componentInstance.onClickPropertyRow(propertyFEModel, 'instanceName');
+
+        expect (fixture.componentInstance.selectedPropertyId).toBe('propertyName');
+        expect (fixture.componentInstance.selectPropertyRow.emit).toHaveBeenCalledWith(propertyRowSelectedEvent);
+    });
+
+    it ('When onClickPropertyInnerRow is called, event is emitted.' , () => {
+        const derivedFEProperty = new DerivedFEProperty(new PropertyBEModel());
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(derivedFEProperty, 'instanceName');
+        spyOn(fixture.componentInstance.selectPropertyRow, 'emit');
+        fixture.componentInstance.onClickPropertyInnerRow(derivedFEProperty, 'instanceName');
+
+        expect (fixture.componentInstance.selectPropertyRow.emit).toHaveBeenCalledWith(propertyRowSelectedEvent);
+    });
+
+    it ('When propertyChecked is called, propertiesService.undoDisableRelatedProperties is called and event is emitted.' , () => {
+
+        const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+        propertyFEModel.isSelected = false;
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName1');
+
+        spyOn(fixture.componentInstance.updateCheckedPropertyCount, 'emit');
+        fixture.componentInstance.propertyChecked(propertyFEModel);
+        expect (propertiesServiceMock.undoDisableRelatedProperties).toHaveBeenCalledWith(propertyFEModel, undefined);
+        expect (fixture.componentInstance.updateCheckedPropertyCount.emit).toHaveBeenCalledWith(false);
+    });
+
+    it ('When propertyChecked is called, propertiesService.disableRelatedProperties is called and event is emitted.' , () => {
+
+        const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+        propertyFEModel.isSelected = true;
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName1');
+
+        spyOn(fixture.componentInstance.updateCheckedPropertyCount, 'emit');
+        fixture.componentInstance.propertyChecked(propertyFEModel);
+        expect (propertiesServiceMock.disableRelatedProperties).toHaveBeenCalledWith(propertyFEModel, undefined);
+        expect (fixture.componentInstance.updateCheckedPropertyCount.emit).toHaveBeenCalledWith(true);
+    });
+
+});
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
index 0cc188134f..e499b3786b 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
@@ -8,9 +8,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -19,33 +19,33 @@
  * ============LICENSE_END=========================================================
  */
 
-import { Component, Input, Output, EventEmitter} from "@angular/core";
-import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models";
-import {PropertiesService} from "../../../services/properties.service";
-import {ModalService} from "../../../services/modal.service";
-import { InstanceFeDetails } from "../../../../models/instance-fe-details";
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { DerivedFEProperty, InstanceFePropertiesMap, PropertyFEModel } from 'app/models';
+import { InstanceFeDetails } from '../../../../models/instance-fe-details';
+import { PropertiesService } from '../../../services/properties.service';
+import { ModalService } from '../../../services/modal.service';
 
 @Component({
     selector: 'properties-table',
     templateUrl: './properties-table.component.html',
     styleUrls: ['./properties-table.component.less']
 })
-export class PropertiesTableComponent {
+export class PropertiesTableComponent implements OnChanges {
 
     @Input() fePropertiesMap: InstanceFePropertiesMap;
     @Input() feInstanceNamesMap: Map<string, InstanceFeDetails>;
     @Input() selectedPropertyId: string;
-    @Input() propertyNameSearchText:string;
-    @Input() searchTerm:string;
-    @Input() readonly:boolean;
-    @Input() isLoading:boolean;
-    @Input() hasDeclareOption:boolean;
-    @Input() hidePropertyType:boolean;
+    @Input() propertyNameSearchText: string;
+    @Input() searchTerm: string;
+    @Input() readonly: boolean;
+    @Input() isLoading: boolean;
+    @Input() hasDeclareOption: boolean;
+    @Input() hidePropertyType: boolean;
     @Input() showDelete:boolean;
-    
+
     @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
     @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
-    @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption and hasDeclareListOption
+    @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>(); // only for hasDeclareOption
     @Output() updateCheckedChildPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareListOption
     @Output() deleteProperty: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
     private selectedPropertyToDelete: PropertyFEModel;
@@ -53,41 +53,48 @@ export class PropertiesTableComponent {
     sortBy: String;
     reverse: boolean;
     direction: number;
-    path:string[];
+    path: string[];
 
-    sort(sortBy){
-        this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
-        this.direction = this.reverse ? 1 : -1;
-        this.sortBy = sortBy;
-        this.path = sortBy.split('.');
+    readonly ascUpperLettersFirst = 1;
+    readonly descLowerLettersFirst = -1;
+
+    constructor(private propertiesService: PropertiesService, private modalService: ModalService ) {
     }
 
-    constructor (private propertiesService:PropertiesService, private modalService: ModalService){
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.fePropertiesMap) {
+            this.sortBy = '';
+            this.sort('name');
+        }
     }
-    
-    ngOnInit() {
+
+    sort(sortBy) {
+        this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
+        this.direction = this.reverse ? this.ascUpperLettersFirst : this.descLowerLettersFirst;
+        this.sortBy = sortBy;
+        this.path = sortBy.split('.');
     }
 
     onPropertyChanged = (property) => {
         this.emitter.emit(property);
-    };
+    }
 
     // Click on main row (row of propertyFEModel)
-    onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => {
-        //event && event.stopPropagation();
+    onClickPropertyRow = (property: PropertyFEModel, instanceName: string, event?) => {
+        // event && event.stopPropagation();
         this.selectedPropertyId = property.name;
-        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
         this.selectPropertyRow.emit(propertyRowSelectedEvent);
-    };
+    }
 
     // Click on inner row (row of DerivedFEProperty)
-    onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => {
-        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+    onClickPropertyInnerRow = (property: DerivedFEProperty, instanceName: string) => {
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
         this.selectPropertyRow.emit(propertyRowSelectedEvent);
     }
 
     propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
-        let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
+        const isChecked: boolean = (!childPropName) ? prop.isSelected : prop.flattenedChildren.find((prop) => prop.propertiesName == childPropName).isSelected;
 
         if (!isChecked) {
             this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
@@ -116,11 +123,10 @@ export class PropertiesTableComponent {
 }
 
 export class PropertyRowSelectedEvent {
-    propertyModel:PropertyFEModel | DerivedFEProperty;
-    instanceName:string;
-    constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){
+    propertyModel: PropertyFEModel | DerivedFEProperty;
+    instanceName: string;
+    constructor( propertyModel: PropertyFEModel | DerivedFEProperty, instanceName: string ) {
         this.propertyModel = propertyModel;
         this.instanceName = instanceName;
     }
 }
-
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
index cb8c9a694b..4d968a088c 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
@@ -4,7 +4,6 @@ import {DynamicPropertyComponent} from "./dynamic-property/dynamic-property.comp
 import {FormsModule} from "@angular/forms";
 import {UiElementsModule} from "../../ui/ui-elements.module";
 import {CommonModule} from "@angular/common";
-import {HttpModule} from "@angular/http";
 import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe";
 import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
 import {PropertiesService} from "../../../services/properties.service";
@@ -13,7 +12,6 @@ import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multil
 @NgModule({
     imports: [
         FormsModule,
-        HttpModule,
         CommonModule,
         GlobalPipesModule,
         UiElementsModule,
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
index 2e3c21c210..d41b580514 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
@@ -9,6 +9,7 @@ import {ComponentInstanceServiceNg2} from "../../../services/component-instance-
 import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
 import {Requirement} from "../../../../models/requirement";
 import {Capability, RequirementCapabilityModel} from "../../../../models/capability";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
 
 const REQUIREMENT = 'Requirement';
 const CAPABILITY = 'Capability';
@@ -24,14 +25,9 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
 
     @Input() optionalRequirementsMap:Dictionary<Requirement[]>; //optional requirement map - key is type, value is array of requirements
     @Input() optionalCapabilitiesMap:Dictionary<Capability[]>; //optional capabilities map - key is type, value is array of capabilities
-
     @Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability )
-
-    @Input() currentComponent:ComponentModel;
     @Input() componentInstanceId:string;
-
     @Input() selectedReqOrCapModel:RequirementCapabilityModel;
-
     @Output() updateSelectedReqOrCap:EventEmitter<RequirementCapabilityModel> = new EventEmitter<RequirementCapabilityModel>();
 
     types:Array<string> = [];
@@ -51,7 +47,8 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
     private _loadingCapabilityProperties: Array<Capability>;
 
     constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2,
-                private propertiesUtils:PropertiesUtils) {
+                private propertiesUtils:PropertiesUtils,
+                private workspaceService: WorkspaceService) {
         this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)];
         this._loadingCapabilityProperties = [];
     }
@@ -171,14 +168,13 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
         }
     }
 
-
     private setCapabilityProperties = ():void => {
         let selectedCapability = <Capability>this.selectedReqOrCapModel;
         if (!selectedCapability.properties) {
             this.loadingCapabilityProperties = true;
             if (this._loadingCapabilityProperties.indexOf(selectedCapability) == -1) {
                 this._loadingCapabilityProperties.push(selectedCapability);
-                this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability)
+                this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentInstanceId, selectedCapability)
                     .subscribe((response: Array<PropertyModel>) => {
                         if (this.selectedReqOrCapModel === selectedCapability) {
                             delete this.loadingCapabilityProperties;
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
index 5830c06972..f4d673d695 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
@@ -50,7 +50,7 @@
     }
 
     .operation-name {
-      .s_1;
+      // .s_1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
index ebcf9eba22..08e6c36db1 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
@@ -14,34 +14,38 @@
  * permissions and limitations under the License.
  */
 
-import {Component, Input, ComponentRef} from '@angular/core';
-import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {ComponentInstanceServiceNg2} from 'app/ng2/services/component-instance-services/component-instance.service';
-import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
-import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+import { Component, ComponentRef, Input } from '@angular/core';
 import {
-    ModalModel,
     ButtonModel,
-    OperationModel,
-    Service,
-    ServiceInstanceObject,
-    PropertyFEModel,
-    PropertyBEModel,
+    CapabilitiesGroup,
+    Capability,
+    Component as TopologyTemplate,
     InputBEModel,
     InterfaceModel,
-    CapabilitiesGroup,
-    Capability
+    ModalModel,
+    OperationModel,
+    PropertyBEModel,
+    PropertyFEModel
 } from 'app/models';
-import {ServiceConsumptionCreatorComponent} from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component';
-
+import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
+import { ServiceConsumptionCreatorComponent } from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component';
+import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service';
+import { ComponentServiceNg2 } from 'app/ng2/services/component-services/component.service';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { Resource } from '../../../../models/components/resource';
+import { FullComponentInstance } from '../../../../models/componentsInstances/fullComponentInstance';
+import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
+import { ComponentFactory } from '../../../../utils/component-factory';
+import { ComponentType } from '../../../../utils/constants';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
 
 export class ConsumptionInput extends PropertyFEModel{
     inputId: string;
     type: string;
     source: string;
     value: any;
-    constraints: Array<any>;
+    constraints: any[];
 
     constructor(input?: any) {
         super(input);
@@ -49,19 +53,20 @@ export class ConsumptionInput extends PropertyFEModel{
             this.inputId = input.inputId;
             this.type = input.type;
             this.source = input.source;
-            this.value = input.value || "";
+            this.value = input.value || '';
             this.constraints = input.constraints;
         }
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class ConsumptionInputDetails extends ConsumptionInput {
     name: string;
     expanded: boolean;
     assignValueLabel: string;
-    associatedProps: Array<string>;
-    associatedInterfaces: Array<any>;
-    associatedCapabilities: Array<Capability>;
+    associatedProps: string[];
+    associatedInterfaces: any[];
+    associatedCapabilities: Capability[];
     origVal: string;
     isValid: boolean;
 
@@ -74,7 +79,7 @@ export class ConsumptionInputDetails extends ConsumptionInput {
             this.associatedProps = input.associatedProps;
             this.associatedInterfaces = input.associatedInterfaces;
             this.associatedCapabilities = input.associatedCapabilities;
-            this.origVal = input.value || "";
+            this.origVal = input.value || '';
             this.isValid = input.isValid;
         }
     }
@@ -84,9 +89,10 @@ export class ConsumptionInputDetails extends ConsumptionInput {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class ServiceOperation {
     operation: OperationModel;
-    consumptionInputs: Array<ConsumptionInputDetails>;
+    consumptionInputs: ConsumptionInputDetails[];
 
     constructor(input?: any) {
         if (input) {
@@ -96,24 +102,24 @@ export class ServiceOperation {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class InterfaceWithServiceOperation {
     interfaceId: string;
     displayName: string;
-    operationsList: Array<ServiceOperation>;
+    operationsList: ServiceOperation[];
     isExpanded: boolean;
 
     constructor(input?: InterfaceModel) {
         if (input) {
             this.interfaceId = input.uniqueId;
             this.displayName = input.displayType();
-            this.operationsList = _.map(input.operations, operation => new ServiceOperation({operation: operation}));
+            this.operationsList = _.map(input.operations, (operation) => new ServiceOperation({operation: operation}));
             this.isExpanded = true;
         }
     }
 }
 
-
-
+// tslint:disable-next-line:max-classes-per-file
 @Component({
     selector: 'service-consumption',
     templateUrl: './service-consumption.component.html',
@@ -125,21 +131,23 @@ export class ServiceConsumptionComponent {
 
     modalInstance: ComponentRef<ModalComponent>;
     isLoading: boolean = false;
-    interfacesList: Array<InterfaceWithServiceOperation>;
-    operationsGroup: Array<ServiceOperation>;
-    @Input() parentServiceInputs: Array<InputBEModel> = [];
-    @Input() parentService: Service;
-    @Input() selectedService: Service;
+    interfacesList: InterfaceWithServiceOperation[];
+    operationsGroup: ServiceOperation[];
+    @Input() parentServiceInputs: InputBEModel[] = [];
+    @Input() parentService: ComponentMetadata;
+    @Input() selectedService: TopologyTemplate | FullComponentInstance;
     @Input() selectedServiceInstanceId: string;
-    @Input() instancesMappedList: Array<ServiceInstanceObject>;
-    @Input() instancesCapabilitiesMap: Map<string, Array<Capability>>;
+    @Input() instancesMappedList: ServiceInstanceObject[];
+    @Input() instancesCapabilitiesMap: Map<string, Capability[]>;
     @Input() readonly: boolean;
 
-    selectedInstanceSiblings: Array<ServiceInstanceObject>;
-    selectedInstancePropertiesList: Array<PropertyBEModel> = [];
-    selectedInstanceCapabilitisList: Array<Capability> = [];
+    selectedInstanceSiblings: ServiceInstanceObject[];
+    selectedInstancePropertiesList: PropertyBEModel[] = [];
+    selectedInstanceCapabilitisList: Capability[] = [];
 
-    constructor(private ModalServiceNg2: ModalService, private serviceServiceNg2: ServiceServiceNg2, private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2:ComponentInstanceServiceNg2) {}
+    constructor(private modalServiceNg2: ModalService, private topologyTemplateService: TopologyTemplateService,
+                private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2: ComponentInstanceServiceNg2,
+                private componentFactory: ComponentFactory) {}
 
     ngOnInit() {
         this.updateSelectedInstancePropertiesAndSiblings();
@@ -147,15 +155,15 @@ export class ServiceConsumptionComponent {
     }
 
     ngOnChanges(changes) {
-        if(changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) {
+        if (changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) {
             this.selectedServiceInstanceId = changes.selectedServiceInstanceId.currentValue;
-            if(changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) {
+            if (changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) {
                 this.selectedService = changes.selectedService.currentValue;
             }
             this.updateSelectedInstancePropertiesAndSiblings();
             this.updateSelectedServiceCapabilities();
         }
-        if(changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) {
+        if (changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) {
             this.updateSelectedInstancePropertiesAndSiblings();
             this.updateSelectedServiceCapabilities();
         }
@@ -163,22 +171,22 @@ export class ServiceConsumptionComponent {
 
     updateSelectedInstancePropertiesAndSiblings() {
         this.interfacesList = [];
-        let selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, coInstance => coInstance.id === this.selectedServiceInstanceId);
+        const selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, (coInstance) => coInstance.id === this.selectedServiceInstanceId);
         if (selectedInstanceMetadata) {
-            _.forEach(selectedInstanceMetadata.interfaces, (interfaceData:InterfaceModel) => {
+            _.forEach(selectedInstanceMetadata.interfaces, (interfaceData: InterfaceModel) => {
                 this.interfacesList.push(new InterfaceWithServiceOperation(interfaceData));
             });
         }
-        this.interfacesList.sort((interf1:InterfaceWithServiceOperation, interf2:InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName));
+        this.interfacesList.sort((interf1: InterfaceWithServiceOperation, interf2: InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName));
 
         this.selectedInstancePropertiesList = selectedInstanceMetadata && selectedInstanceMetadata.properties;
-        this.selectedInstanceSiblings = _.filter(this.instancesMappedList, coInstance => coInstance.id !== this.selectedServiceInstanceId);
+        this.selectedInstanceSiblings = _.filter(this.instancesMappedList, (coInstance) => coInstance.id !== this.selectedServiceInstanceId);
     }
 
     updateSelectedServiceCapabilities() {
         this.selectedInstanceCapabilitisList = _.filter(
             CapabilitiesGroup.getFlattenedCapabilities(this.selectedService.capabilities),
-            cap => cap.properties && cap.ownerId === this.selectedService.uniqueId
+            (cap) => cap.properties && cap.ownerId === this.selectedService.uniqueId
         );
     }
 
@@ -186,15 +194,15 @@ export class ServiceConsumptionComponent {
         currInterface.isExpanded = !currInterface.isExpanded;
     }
 
-    onSelectOperation(event, currInterface:InterfaceWithServiceOperation, opIndex: number) {
+    onSelectOperation(event, currInterface: InterfaceWithServiceOperation, opIndex: number) {
         event.stopPropagation();
-        if(!this.readonly) {
+        if (!this.readonly) {
             this.operationsGroup = currInterface.operationsList;
-            let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
-            let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled);
-            let modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard');
-            this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-            this.ModalServiceNg2.addDynamicContentToModal(
+            const cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.modalServiceNg2.closeCurrentModal);
+            const saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled);
+            const modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard');
+            this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+            this.modalServiceNg2.addDynamicContentToModal(
                 this.modalInstance,
                 ServiceConsumptionCreatorComponent,
                 {
@@ -215,11 +223,11 @@ export class ServiceConsumptionComponent {
         }
     }
 
-    createOrUpdateOperationInput  = ():void => {
+    createOrUpdateOperationInput  = (): void => {
         this.isLoading = true;
-        let consumptionInputsList:Array<{[id: string]: Array<ConsumptionInput>}> = _.map(this.operationsGroup, (serviceOp) => {
-            let consumptionInputsArr: Array<any> = [];
-            if(serviceOp.consumptionInputs) {
+        const consumptionInputsList: Array<{[id: string]: ConsumptionInput[]}> = _.map(this.operationsGroup, (serviceOp) => {
+            let consumptionInputsArr: any[] = [];
+            if (serviceOp.consumptionInputs) {
                 consumptionInputsArr = _.map(serviceOp.consumptionInputs, (input: ConsumptionInputDetails) => {
                     return {
                         inputId: input.inputId,
@@ -233,16 +241,24 @@ export class ServiceConsumptionComponent {
                 [serviceOp.operation.uniqueId]: consumptionInputsArr
             };
         });
-        this.serviceServiceNg2.createOrUpdateServiceConsumptionInputs(this.parentService,this.selectedServiceInstanceId, consumptionInputsList).subscribe(() => {
+        this.topologyTemplateService.createOrUpdateServiceConsumptionInputs(this.convertMetaDataToComponent(this.parentService).uniqueId, this.selectedServiceInstanceId, consumptionInputsList)
+            .subscribe(() => {
             this.isLoading = false;
-        }, err=> {
+        }, (err) => {
             this.isLoading = false;
         });
-        this.ModalServiceNg2.closeCurrentModal();
-    };
+        this.modalServiceNg2.closeCurrentModal();
+    }
 
-    getDisabled = ():boolean =>  {
+    getDisabled = (): boolean =>  {
         return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
-    };
+    }
+
+     //TODO remove when workspace page convert to angular5
+     convertMetaDataToComponent(componentMetadata: ComponentMetadata) {
+        const newResource: Resource = this.componentFactory.createEmptyComponent(ComponentType.RESOURCE) as Resource;
+        newResource.setComponentMetadata(componentMetadata);
+        return newResource;
+    }
 
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
index 8593bef3eb..70b5911779 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
@@ -14,11 +14,11 @@
  * permissions and limitations under the License.
  */
 
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServiceConsumptionComponent} from "./service-consumption.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { ServiceConsumptionComponent } from './service-consumption.component';
 
 @NgModule({
     declarations: [
@@ -29,11 +29,13 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
         UiElementsModule,
         TranslateModule
     ],
-    exports: [],
+    exports: [
+        ServiceConsumptionComponent
+    ],
     entryComponents: [
         ServiceConsumptionComponent
     ],
     providers: []
 })
 export class ServiceConsumptionModule {
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
index ae990dc85f..2fccfb414b 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
@@ -38,7 +38,7 @@
       justify-content: space-between;
 
       .rule-details {
-        .s_1;
+        // .s_1;
         display: flex;
         flex: 1;
         align-items: center;
@@ -67,4 +67,13 @@
 
     }
   }
+  .w-sdc-designer-sidebar-section-footer {
+    margin-top: 10px;
+    text-align: center;
+    width: 100%;
+  }
+  .w-sdc-designer-sidebar-section-footer-action {
+    width: 180px;
+    margin-top: 10px;
+  }
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
index bc3531dc58..fa75a275aa 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
@@ -13,22 +13,22 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {Component, Input, Output, EventEmitter, ComponentRef} from '@angular/core';
-import {ModalService} from 'app/ng2/services/modal.service';
+import { Component, ComponentRef, EventEmitter, Input, Output } from '@angular/core';
 import {
-    Service,
+    ButtonModel,
     ComponentInstance,
+    InputBEModel,
     ModalModel,
-    ButtonModel,
     PropertyBEModel,
-    InputBEModel,
-    ServiceInstanceObject
 } from 'app/models';
-import {ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {TranslateService} from 'app/ng2/shared/translator/translate.service';
-import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
+import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
+import { ServiceDependenciesEditorComponent } from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response';
+import { TranslateService } from 'app/ng2/shared/translator/translate.service';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
 
 export class ConstraintObject {
     servicePropertyName: string;
@@ -48,12 +48,13 @@ export class ConstraintObject {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class ConstraintObjectUI extends ConstraintObject{
     isValidValue: boolean;
 
     constructor(input?: any) {
         super(input);
-        if(input) {
+        if (input) {
             this.isValidValue = input.isValidValue ? input.isValidValue : input.value !== '';
         }
     }
@@ -63,7 +64,7 @@ export class ConstraintObjectUI extends ConstraintObject{
     }
 
     public isValidRule(isStatic) {
-        let isValidValue = isStatic ? this.isValidValue : true;
+        const isValidValue = isStatic ? this.isValidValue : true;
         return this.servicePropertyName != null && this.servicePropertyName !== ''
             && this.value != null && this.value !== '' && isValidValue;
     }
@@ -75,6 +76,7 @@ export const OPERATOR_TYPES = {
     LESS_THAN: 'less_than'
 };
 
+// tslint:disable-next-line:max-classes-per-file
 class I18nTexts {
     static uncheckModalTitle: string;
     static uncheckModalText: string;
@@ -89,21 +91,21 @@ class I18nTexts {
     static deleteRuleMsg: string;
 
     public static translateTexts(translateService) {
-            I18nTexts.uncheckModalTitle = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TITLE");
-            I18nTexts.uncheckModalText = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TEXT");
-            I18nTexts.modalApprove = translateService.translate("MODAL_APPROVE");
-            I18nTexts.modalCancel = translateService.translate("MODAL_CANCEL");
-            I18nTexts.modalCreate = translateService.translate("MODAL_CREATE");
-            I18nTexts.modalSave = translateService.translate("MODAL_SAVE");
-            I18nTexts.modalDelete = translateService.translate("MODAL_DELETE");
-            I18nTexts.addRuleTxt = translateService.translate("SERVICE_DEPENDENCY_ADD_RULE");
-            I18nTexts.updateRuleTxt = translateService.translate("SERVICE_DEPENDENCY_UPDATE_RULE");
-            I18nTexts.deleteRuleTxt = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE");
-            I18nTexts.deleteRuleMsg = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE_MSG");
+            I18nTexts.uncheckModalTitle = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TITLE');
+            I18nTexts.uncheckModalText = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TEXT');
+            I18nTexts.modalApprove = translateService.translate('MODAL_APPROVE');
+            I18nTexts.modalCancel = translateService.translate('MODAL_CANCEL');
+            I18nTexts.modalCreate = translateService.translate('MODAL_CREATE');
+            I18nTexts.modalSave = translateService.translate('MODAL_SAVE');
+            I18nTexts.modalDelete = translateService.translate('MODAL_DELETE');
+            I18nTexts.addRuleTxt = translateService.translate('SERVICE_DEPENDENCY_ADD_RULE');
+            I18nTexts.updateRuleTxt = translateService.translate('SERVICE_DEPENDENCY_UPDATE_RULE');
+            I18nTexts.deleteRuleTxt = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE');
+            I18nTexts.deleteRuleMsg = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE_MSG');
     }
 }
 
-
+// tslint:disable-next-line:max-classes-per-file
 @Component({
     selector: 'service-dependencies',
     templateUrl: './service-dependencies.component.html',
@@ -115,56 +117,55 @@ export class ServiceDependenciesComponent {
     modalInstance: ComponentRef<ModalComponent>;
     isDependent: boolean;
     isLoading: boolean;
-    parentServiceInputs: Array<InputBEModel> = [];
-    rulesList: Array<ConstraintObject> = [];
-    operatorTypes: Array<any>;
+    parentServiceInputs: InputBEModel[] = [];
+    rulesList: ConstraintObject[] = [];
+    operatorTypes: any[];
 
     @Input() readonly: boolean;
-    @Input() compositeService: Service;
+    @Input() compositeService: ComponentMetadata;
     @Input() currentServiceInstance: ComponentInstance;
-    @Input() selectedInstanceSiblings: Array<ServiceInstanceObject>;
-    @Input() selectedInstanceConstraints: Array<ConstraintObject> = [];
-    @Input() selectedInstanceProperties: Array<PropertyBEModel> = [];
-    @Output() updateRulesListEvent:EventEmitter<Array<ConstraintObject>> = new EventEmitter<Array<ConstraintObject>>();
+    @Input() selectedInstanceSiblings: ServiceInstanceObject[];
+    @Input() selectedInstanceConstraints: ConstraintObject[] = [];
+    @Input() selectedInstanceProperties: PropertyBEModel[] = [];
+    @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
     @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter();
     @Output() dependencyStatus = new EventEmitter<boolean>();
 
-
-    constructor(private componentServiceNg2: ComponentServiceNg2, private ModalServiceNg2: ModalService, private translateService: TranslateService) {
+    constructor(private topologyTemplateService: TopologyTemplateService, private modalServiceNg2: ModalService, private translateService: TranslateService) {
     }
 
     ngOnInit() {
         this.isLoading = false;
         this.operatorTypes = [
-            {label: ">", value: OPERATOR_TYPES.GREATER_THAN},
-            {label: "<", value: OPERATOR_TYPES.LESS_THAN},
-            {label: "=", value: OPERATOR_TYPES.EQUAL}
+            {label: '>', value: OPERATOR_TYPES.GREATER_THAN},
+            {label: '<', value: OPERATOR_TYPES.LESS_THAN},
+            {label: '=', value: OPERATOR_TYPES.EQUAL}
         ];
-        this.componentServiceNg2.getComponentInputsWithProperties(this.compositeService).subscribe((result: ComponentGenericResponse) => {
+        this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((result: ComponentGenericResponse) => {
             this.parentServiceInputs = result.inputs;
         });
         this.loadRules();
-        this.translateService.languageChangedObservable.subscribe(lang => {
+        this.translateService.languageChangedObservable.subscribe((lang) => {
             I18nTexts.translateTexts(this.translateService);
         });
     }
 
     ngOnChanges(changes) {
-        if(changes.currentServiceInstance) {
+        if (changes.currentServiceInstance) {
             this.currentServiceInstance = changes.currentServiceInstance.currentValue;
             this.isDependent = this.currentServiceInstance.isDependent();
         }
-        if(changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) {
+        if (changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) {
             this.selectedInstanceConstraints = changes.selectedInstanceConstraints.currentValue;
             this.loadRules();
         }
     }
 
     public openRemoveDependencyModal = (): ComponentRef<ModalComponent> => {
-        let actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency);
-        let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
-        let modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]);
-        return this.ModalServiceNg2.createCustomModal(modalModel);
+        const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency);
+        const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
+        const modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]);
+        return this.modalServiceNg2.createCustomModal(modalModel);
     }
 
     loadRules() {
@@ -178,60 +179,59 @@ export class ServiceDependenciesComponent {
     }
 
     onUncheckDependency = () => {
-        this.ModalServiceNg2.closeCurrentModal();
+        this.modalServiceNg2.closeCurrentModal();
         this.isLoading = true;
-        let isDepOrig = this.isDependent;
-        let rulesListOrig = this.rulesList;
+        const isDepOrig = this.isDependent;
+        const rulesListOrig = this.rulesList;
         this.currentServiceInstance.unmarkAsDependent();
         this.updateComponentInstance(isDepOrig, rulesListOrig);
     }
 
     onCloseRemoveDependencyModal = () => {
         this.isDependent = true;
-        this.ModalServiceNg2.closeCurrentModal();
+        this.modalServiceNg2.closeCurrentModal();
     }
 
     onCheckDependency = () => {
-        let isDepOrig = this.isDependent;
-        let rulesListOrig = this.rulesList;
+        const isDepOrig = this.isDependent;
+        const rulesListOrig = this.rulesList;
         this.currentServiceInstance.markAsDependent();
         this.rulesList = [];
         this.updateComponentInstance(isDepOrig, rulesListOrig);
     }
 
     onMarkAsDependent() {
-        if(!this.currentServiceInstance.isDependent()) {
+        if (!this.currentServiceInstance.isDependent()) {
             this.onCheckDependency();
-        }
-        else {
+        } else {
             this.openRemoveDependencyModal().instance.open();
         }
     }
 
-    updateComponentInstance(isDependent_origVal : boolean, rulesList_orig: Array<ConstraintObject>) {
+    updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) {
         this.isLoading = true;
-        this.componentServiceNg2.updateComponentInstance(this.compositeService, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => {
+        this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => {
             this.currentServiceInstance = new ComponentInstance(updatedServiceIns);
             this.isDependent = this.currentServiceInstance.isDependent();
             this.dependencyStatus.emit(this.isDependent);
-            if(this.isDependent) {
+            if (this.isDependent) {
                 this.loadRulesListEvent.emit();
             }
             this.isLoading = false;
-        }, err=> {
-            this.isDependent = isDependent_origVal;
-            this.rulesList = rulesList_orig;
+        }, (err) => {
+            this.isDependent = isDependentOrigVal;
+            this.rulesList = rulesListOrig;
             this.isLoading = false;
             console.log('An error has occurred.');
         });
     }
 
-    onAddRule () {
-        let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal);
-        let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled);
-        let modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard');
-        this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-        this.ModalServiceNg2.addDynamicContentToModal(
+    onAddRule() {
+        const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
+        const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled);
+        const modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard');
+        this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+        this.modalServiceNg2.addDynamicContentToModal(
             this.modalInstance,
             ServiceDependenciesEditorComponent,
             {
@@ -247,16 +247,16 @@ export class ServiceDependenciesComponent {
     }
 
     onSelectRule(index: number) {
-        let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal);
-        let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled);
-        let modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard');
-        this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-        this.ModalServiceNg2.addDynamicContentToModal(
+        const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
+        const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled);
+        const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard');
+        this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+        this.modalServiceNg2.addDynamicContentToModal(
             this.modalInstance,
             ServiceDependenciesEditorComponent,
             {
                 serviceRuleIndex: index,
-                serviceRules: _.map(this.rulesList, rule => new ConstraintObjectUI(rule)),
+                serviceRules: _.map(this.rulesList, (rule) => new ConstraintObjectUI(rule)),
                 currentServiceName: this.currentServiceInstance.name,
                 operatorTypes: this.operatorTypes,
                 compositeServiceName: this.compositeService.name,
@@ -268,40 +268,40 @@ export class ServiceDependenciesComponent {
         this.modalInstance.instance.open();
     }
 
-    getDisabled = ():boolean =>  {
+    getDisabled = (): boolean =>  {
         return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
-    };
+    }
 
-    createRule  = ():void => {
-        let newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
+    createRule  = (): void => {
+        const newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
         this.isLoading = true;
-        this.componentServiceNg2.createServiceFilterConstraints(
-            this.compositeService,
-            this.currentServiceInstance,
+        this.topologyTemplateService.createServiceFilterConstraints(
+            this.compositeService.uniqueId,
+            this.currentServiceInstance.uniqueId,
             newRuleToCreate
         ).subscribe( (response) => {
             this.updateRulesListEvent.emit(response.properties);
             this.isLoading = false;
-        }, err=> {
+        }, (err) => {
             this.isLoading = false;
         });
-        this.ModalServiceNg2.closeCurrentModal();
-    };
+        this.modalServiceNg2.closeCurrentModal();
+    }
 
-    updateRules = ():void => {
-        let allRulesToUpdate: Array<ConstraintObject> = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map(rule => new ConstraintObject(rule));
+    updateRules = (): void => {
+        const allRulesToUpdate: ConstraintObject[] = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule));
         this.isLoading = true;
-        this.componentServiceNg2.updateServiceFilterConstraints(
-            this.compositeService,
-            this.currentServiceInstance,
+        this.topologyTemplateService.updateServiceFilterConstraints(
+            this.compositeService.uniqueId,
+            this.currentServiceInstance.uniqueId,
             allRulesToUpdate
         ).subscribe((response) => {
             this.updateRulesListEvent.emit(response.properties);
             this.isLoading = false;
-        }, err => {
+        }, (err) => {
             this.isLoading = false;
         });
-        this.ModalServiceNg2.closeCurrentModal();
+        this.modalServiceNg2.closeCurrentModal();
     }
 
     getSymbol(constraintOperator) {
@@ -312,23 +312,23 @@ export class ServiceDependenciesComponent {
         }
     }
 
-    onDeleteRule = (index:number) => {
+    onDeleteRule = (index: number) => {
         this.isLoading = true;
-        this.componentServiceNg2.deleteServiceFilterConstraints(
-            this.compositeService,
-            this.currentServiceInstance,
+        this.topologyTemplateService.deleteServiceFilterConstraints(
+            this.compositeService.uniqueId,
+            this.currentServiceInstance.uniqueId,
             index
         ).subscribe( (response) => {
             this.updateRulesListEvent.emit(response.properties);
             this.isLoading = false;
-        }, err=> {
+        }, (err) => {
             this.isLoading = false;
         });
-        this.ModalServiceNg2.closeCurrentModal();
-    };
+        this.modalServiceNg2.closeCurrentModal();
+    }
 
-    openDeleteModal = (index:number) => {
-        this.ModalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg,
+    openDeleteModal = (index: number) => {
+        this.modalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg,
             I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open();
     }
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
index 7e66ed99c7..5e2d03d26c 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
@@ -1,9 +1,9 @@
 
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServiceDependenciesComponent} from "./service-dependencies.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { ServiceDependenciesComponent } from './service-dependencies.component';
 
 @NgModule({
     declarations: [
@@ -14,11 +14,13 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
         UiElementsModule,
         TranslateModule
     ],
-    exports: [],
+    exports: [
+        ServiceDependenciesComponent
+    ],
     entryComponents: [
         ServiceDependenciesComponent
     ],
     providers: []
 })
 export class ServiceDependenciesModule {
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts
deleted file mode 100644
index e09001fc6c..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import {Component, Input, KeyValueDiffer, IterableDiffers, KeyValueDiffers, DoCheck} from '@angular/core';
-import {Service} from "app/models/components/service";
-import {TranslateService} from "app/ng2/shared/translator/translate.service";
-import {ForwardingPath} from "app/models/forwarding-path";
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-
-@Component({
-	selector: 'service-path-selector',
-	templateUrl: './service-path-selector.component.html',
-	styleUrls:['service-path-selector.component.less'],
-	providers: [TranslateService]
-})
-
-export class ServicePathSelectorComponent implements DoCheck {
-
-	defaultSelectedId: string;
-	hideAllValue: string;
-	hideAllId: string = '0';
-	showAllValue: string;
-	showAllId: string = '1';
-
-	paths: Array<ForwardingPath> = [];
-	dropdownOptions: Array<DropdownValue>;
-	differ: KeyValueDiffer;
-
-	@Input() service: Service;
-	@Input() drawPath: Function;
-	@Input() deletePaths: Function;
-	@Input() selectedPathId: string;
-
-	constructor(private differs: KeyValueDiffers, private translateService: TranslateService) {
-
-		this.defaultSelectedId = this.hideAllId;
-		this.convertPathsToDropdownOptions();
-
-		this.translateService.languageChangedObservable.subscribe(lang => {
-			this.hideAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE");
-			this.showAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE");
-			this.convertPathsToDropdownOptions();
-		});
-
-	}
-
-	ngOnInit(): void {
-
-		this.selectedPathId = this.defaultSelectedId;
-		this.differ = this.differs.find(this.service.forwardingPaths).create(null);
-
-	}
-
-	ngDoCheck(): void {
-
-		const pathsChanged = this.differ.diff(this.service.forwardingPaths);
-
-		if (pathsChanged) {
-			let oldPaths = _.cloneDeep(this.paths);
-			this.populatePathsFromService();
-
-			if (!(_.isEqual(oldPaths, this.paths))) {
-				this.convertPathsToDropdownOptions();
-
-				let temp = this.selectedPathId;
-				this.selectedPathId = '-1';
-
-				setTimeout(() => {
-					this.selectedPathId = temp;
-					this.onSelectPath();
-				}, 0);
-			}
-		}
-
-	}
-
-	populatePathsFromService(): void {
-
-		this.paths = [];
-		let {forwardingPaths} = this.service;
-
-		_.forEach(forwardingPaths, path => {
-			this.paths.push(path);
-		});
-		this.paths.sort((a:ForwardingPath, b:ForwardingPath)=> {
-			return a.name.localeCompare(b.name);
-		});
-
-	}
-
-	convertPathsToDropdownOptions(): void {
-
-		let result = [
-			new DropdownValue(this.hideAllId, this.hideAllValue),
-			new DropdownValue(this.showAllId, this.showAllValue)
-		];
-
-		_.forEach(this.paths, (value: ForwardingPath) => {
-			result[result.length] = new DropdownValue(value.uniqueId, value.name);
-		});
-
-		this.dropdownOptions = result;
-
-	}
-
-	onSelectPath = (): void => {
-
-		if (this.selectedPathId !== '-1') {
-			this.deletePaths();
-
-			switch (this.selectedPathId) {
-				case this.hideAllId:
-					break;
-
-				case this.showAllId:
-					_.forEach(this.paths, path =>
-						this.drawPath(path)
-					);
-					break;
-
-				default:
-					let path = this.paths.find(path =>
-						path.uniqueId === this.selectedPathId
-					);
-					if (!path) {
-						this.selectedPathId = this.defaultSelectedId;
-						this.onSelectPath(); // currently does nothing in default case, but if one day it does, we want the selection to behave accordingly.
-						break;
-					}
-					this.drawPath(path);
-					break;
-			}
-		}
-
-	}
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html
deleted file mode 100644
index 2a6a72ab7a..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-  
-<div class='service-path'>
-	<button class='zoom-icons create-path-button' data-tests-id="pathsMenuBtn" (click)="showServicePathMenu = !showServicePathMenu">...</button>
-	<div class="service-path-menu" *ngIf="showServicePathMenu">
-		<div >
-			<ul>
-				<li *ngIf='!isViewOnly'><div class="hand" (click)="onCreateServicePath()" data-tests-id="createPathMenuItem">
-					Create Service Flow
-				</div></li>
-				<li><div class="hand" (click)="onListServicePath()" data-tests-id="pathsListMenuItem">
-					Service Flows List
-				</div></li>
-			</ul>
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less
deleted file mode 100644
index 777b206714..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less
+++ /dev/null
@@ -1,51 +0,0 @@
-//@import 'src/assets/styles/variables.less';
-@import './../../../../../assets/styles/variables.less';
-.service-path {
-	position: relative;
-	.create-path-button{
-		&:extend(.search-bar-button);
-		width: 30px;
-		height: 30px;
-		&:hover {
-			color: @main_color_a;
-		}
-		&:active {
-			background: @main_color_a;
-			color: @main_color_p;
-		}
-		&:focus {
-			outline: none;
-		}
-	}
-	.service-path-menu {
-		border: 1px solid @main_color_o;
-		border-radius: 0 0 2px 2px;
-		border-top-color: @main_color_a;
-		border-top-width: 3px;
-
-		box-sizing: border-box;
-		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
-
-		background-color: @main_color_p;
-
-		padding: 5px 0;
-		right: 34px;
-		position: absolute;
-		top: 10px;
-		width: 150px;
-		font-size: 13px;
-		font-family: @font-opensans-regular;
-
-		li {
-			color: @main_color_m;
-			padding: 0 10px;
-			line-height: 20px;
-			&:hover {
-				cursor: pointer;
-				color: @main_color_a;
-				background-color: fade(@main_color_a, 5%);
-			}
-		}
-
-	}
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts
deleted file mode 100644
index d66c5f0132..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {Component, Input, ComponentRef} from '@angular/core';
-import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalModel, ButtonModel} from 'app/models';
-import {ServicePathCreatorComponent} from 'app/ng2/pages/service-path-creator/service-path-creator.component';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import ServicePathsListComponent from "app/ng2/pages/service-paths-list/service-paths-list.component";
-import {Service} from "app/models/components/service";
-
-@Component({
-    selector: 'service-path',
-    templateUrl: './service-path.component.html',
-    styleUrls: ['service-path.component.less'],
-    providers: [ModalService]
-})
-
-export class ServicePathComponent {
-	showServicePathMenu: boolean = false;
-	modalInstance: ComponentRef<ModalComponent>;
-	@Input() service: Service;
-	@Input() onCreate: Function;
-	@Input() onSave: Function;
-	@Input() isViewOnly:boolean;
-
-	constructor(private ModalServiceNg2: ModalService) {}
-
-	onCreateServicePath = ():void => {
-		this.showServicePathMenu = false;
-		let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
-		let saveButton: ButtonModel = new ButtonModel('Create', 'blue', this.createPath, this.getDisabled );
-		let modalModel: ModalModel = new ModalModel('l', 'Create Service Flow', '', [saveButton, cancelButton], 'standard', true);
-		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service});
-		this.modalInstance.instance.open();
-	};
-
-	onListServicePath = ():void => {
-		this.showServicePathMenu = false;
-		let cancelButton: ButtonModel = new ButtonModel('Close', 'outline white', this.ModalServiceNg2.closeCurrentModal);
-		let modalModel: ModalModel = new ModalModel('md', 'Service Flows List','', [cancelButton], 'standard', true);
-		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathsListComponent, {service: this.service,
-			onCreateServicePath: this.onCreateServicePath, onEditServicePath: this.onEditServicePath, isViewOnly: this.isViewOnly});
-		this.modalInstance.instance.open();
-	};
-
-	createPath  = ():void => {
-		this.onCreate(this.modalInstance.instance.dynamicContent.instance.createServicePathData());
-		this.ModalServiceNg2.closeCurrentModal();
-	};
-
-	onEditServicePath = (id:string):void =>   {
-		let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
-		let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createPath, this.getDisabled );
-		let modalModel: ModalModel = new ModalModel('l', 'Edit Path', '', [saveButton, cancelButton], 'standard', true);
-		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service, pathId: id});
-		this.modalInstance.instance.open();
-	};
-
-	getDisabled = ():boolean =>  {
-		return this.isViewOnly || !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
-	};
-}
-
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts
deleted file mode 100644
index 96af247086..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServicePathComponent} from "./service-path.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-
-@NgModule({
-    declarations: [
-        ServicePathComponent
-    ],
-    imports: [CommonModule,
-        UiElementsModule],
-    exports: [],
-    entryComponents: [
-        ServicePathComponent
-    ],
-    providers: []
-})
-export class ServicePathModule {
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html
new file mode 100644
index 0000000000..127531bfab
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html
@@ -0,0 +1,18 @@
+<form>
+    <div>
+        <div class="comment-modal-text" [innerHTML]="message"></div>
+        <sdc-textarea #comment1
+                      [(value)]="comment.text"
+                      placeHolder="{{'CONFIRMATION_MODAL_PLACEHOLDER' | translate }}"
+                      [required]="true"
+                      name="comment1"
+                      testId="checkindialog"
+                      [maxLength]="256">
+        </sdc-textarea>
+        <sdc-validation [validateElement]="comment1" (validityChanged)="onValidityChange($event)">
+            <sdc-required-validator message="{{ 'VALIDATION_ERROR_REQUIRED' | translate:{'field': 'Comment' } }}"></sdc-required-validator>
+            <sdc-regex-validator message="{{ 'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate}}"
+                                 [pattern]="commentValidationPattern"></sdc-regex-validator>
+        </sdc-validation>
+    </div>
+</form>
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts
new file mode 100644
index 0000000000..c66f60b5e7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts
@@ -0,0 +1,25 @@
+/**
+ * Created by rc2122 on 5/31/2018.
+ */
+import { Component, Input } from "@angular/core";
+import { ValidationConfiguration } from "app/models";
+import { Subject } from "rxjs/Subject";
+
+@Component({
+    selector: 'comment-modal',
+    templateUrl: './comment-modal.component.html',
+    styleUrls: ['./comment-modal.less']
+})
+
+export class CommentModalComponent {
+
+    @Input() message:string;
+    onValidationChange: Subject<boolean> = new Subject();
+    //@Input() showComment:boolean;
+    private comment = {"text": ''};
+    private commentValidationPattern = ValidationConfiguration.validation.validationPatterns.comment;
+
+    private onValidityChange = (isValid: boolean):void => {
+        this.onValidationChange.next(isValid);
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less
new file mode 100644
index 0000000000..8e20e81115
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less
@@ -0,0 +1,3 @@
+.comment-modal-text {
+  padding-bottom: 5px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/modals.module.ts b/catalog-ui/src/app/ng2/components/modals/modals.module.ts
new file mode 100644
index 0000000000..5aa7f08b60
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/modals.module.ts
@@ -0,0 +1,29 @@
+/**
+ * Created by rc2122 on 5/24/2018.
+ */
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { CommentModalComponent } from 'app/ng2/components/modals/comment-modal/comment-modal.component';
+import { PopoverModule } from 'app/ng2/components/ui/popover/popover.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+import { OnboardingService } from '../../services/onboarding.service';
+import { ImportVSPService } from './onboarding-modal/import-vsp.service';
+import { OnboardingModalComponent } from './onboarding-modal/onboarding-modal.component';
+
+@NgModule({
+    declarations: [CommentModalComponent, OnboardingModalComponent],
+    imports: [TranslateModule,
+        SdcUiComponentsModule,
+        CommonModule,
+        PopoverModule,
+        NgxDatatableModule],
+    exports: [CommentModalComponent, OnboardingModalComponent],
+    entryComponents: [CommentModalComponent, OnboardingModalComponent],
+    providers: [OnboardingService, ImportVSPService],
+    bootstrap: []
+})
+
+export class ModalsModule {
+}
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts
new file mode 100644
index 0000000000..8e7364660f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts
@@ -0,0 +1,36 @@
+import { Injectable, Inject } from "@angular/core";
+import { OnboardingModalComponent } from "./onboarding-modal.component";
+import { SdcUiServices, SdcUiCommon } from "onap-ui-angular";
+import { Observable, Subject } from "rxjs";
+import { CHANGE_COMPONENT_CSAR_VERSION_FLAG } from "../../../../utils/constants";
+import { CacheService } from "../../../services/cache.service";
+
+
+@Injectable()
+export class ImportVSPService {
+
+    constructor(private modalService: SdcUiServices.ModalService,
+                private cacheService:CacheService,
+                @Inject("$state") private $state:ng.ui.IStateService){
+
+    }
+    
+    openOnboardingModal(csarUUID?: string, csarVersion?: string): Observable<any> {
+        var subject = new Subject<any>();
+        const onboardingModalConfig = {
+            size: SdcUiCommon.ModalSize.xlarge,
+            title: 'Import VSP',      
+            type: SdcUiCommon.ModalType.custom,
+            testId: 'sampleTestIdModal1',
+        } as SdcUiCommon.IModalConfig;
+        const onboardingModalInstance = this.modalService.openCustomModal(onboardingModalConfig, OnboardingModalComponent, {currentCsarUUID: csarUUID, currentCsarVersion: csarVersion});
+        onboardingModalInstance.innerModalContent.instance.closeModalEvent.subscribe(
+            (result: any) => {
+                subject.next(result);
+                onboardingModalInstance.closeModal(); 
+            }, (err) =>{}
+        )
+        return subject.asObservable();
+    }
+}
+   
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html
new file mode 100644
index 0000000000..6ba1f428a1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html
@@ -0,0 +1,106 @@
+<div class="onboarding-modal">
+    <div class="search-wrapper">
+        <span class="sub-title-wrapper">
+            <svg-icon class="info-button" 
+                (click) = "openPopover($event, 'ON_BOARDING_GENERAL_INFO')"
+                [name]="'info-circle-o'" [mode]="'primary'"
+                [size]="'medium'"></svg-icon>
+            <span class="sub-title">{{ 'ON_BOARDING_MODAL_SUB_TITLE' | translate }}</span>
+        </span>
+        <span class="sdc-filter-bar-wrapper">
+            <sdc-filter-bar
+                [placeHolder]="'Search'"
+                (keyup)="updateFilter($event)"
+                [testId]="'onboarding-search'">
+            </sdc-filter-bar>
+        </span>   
+    </div>
+    <div class="datatable-components-wapper">
+    <ngx-datatable #componentsMetadataTable 
+        columnMode="flex" 
+        [headerHeight]="40"  
+        [rowHeight]="35" 
+        [rows]="componentsMetadataList"
+        [sorts]="[{prop: 'name', dir: 'asc'}]"
+        (select)='onSelectComponent($event)' 
+        [selectionType]="'single'">
+        <ngx-datatable-row-detail [rowHeight]="undefiend">
+            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template  >
+                <div class="onboarding-components-details">
+                    <span class="row-details-description">
+                        <div>
+                            <div class="th">VSP Description:</div>
+                            <div>{{row.description}}</div>
+                        </div>
+                    </span>
+                    <span class="row-details-metadata1">
+                        <div *ngIf="isCsarComponentExists">
+                            <div class="th">VF'S Meta Data:</div>
+                            <div><span class="th">Name:</span>{{componentFromServer.name}}</div>
+                            <div><span class="th">Lifecycle:</span>{{componentFromServer.lifecycleState}}</div>
+                            <div><span class="th">Creator:</span>{{componentFromServer.creatorFullName}}</div>
+                        </div>
+                    </span>
+                    <span class="row-details-metadata2">
+                        <div *ngIf="isCsarComponentExists">
+                            <div class="th">&nbsp;</div>
+                            <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div>
+                            <div><span class="th">Version:</span> {{componentFromServer.version}}</div>
+                            <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div>
+                            <div *ngIf="checkNotCertified()">
+                                <span class="note">Designers cannot update a VSP if the VF is <br>checked out by another user.</span>
+                            </div>
+                        </div>
+                    </span>
+                    <span class="row-details-metadata3">
+                        <svg-icon class="info-button" 
+                        (click) = "openPopover($event, isCsarComponentExists ? 'ON_BOARDING_UPDATE_INFO' : 'ON_BOARDING_IMPORT_INFO')"
+                        [name]="'info-circle-o'" [mode]="'primary'"
+                        [size]="'medium'"></svg-icon>
+                    </span>
+                    <span class="row-details-icon">
+                        <div>
+                            <sdc-button class="import-update-file-btn"
+                            [text]="isCsarComponentExists ? 'Update VSP' : 'Import VSP'"
+                            [testId]="isCsarComponentExists ? 'update-csar' : 'import-csar'"
+                            [type]="'primary'"
+                            [icon_name]="isCsarComponentExists ? 'sync-o' : 'alert-triangle-o'"
+                            [icon_position]="'left'"
+                            [icon_mode] = "'white'"
+                            [size] = "'medium'"
+                            (click)="importOrUpdateCsar()"
+                            [disabled]="checkNotCertified()"
+                          >
+                        </sdc-button>
+                            <svg-icon class="download-file-btn" sdc-tooltip [tooltip-text]="'Download-csar'"
+                                [mode]="'primary'"  [clickable]="true" [name]="'download-o'" 
+                                [testId]="'download-csar'" [size]="'medium'" (click)="downloadCsar(row.packageId)">
+                            </svg-icon>
+                        </div>
+                    </span>     
+                </div>
+                <sdc-loader [global]="false" [active]="isLoad" [size]="'small'"[relative]="true"></sdc-loader>
+            </ng-template>
+        </ngx-datatable-row-detail>
+        <ngx-datatable-column *ngFor="let column of columns" [ngSwitch]="column.prop" [resizeable]="false" [draggable]="false" name={{column.name}}
+            [flexGrow]="column.flexGrow">
+            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'name'">
+                <span data-tests-id="csar-row" class="sprite table-arrow" [ngClass]="{'opened': selectedComponent && row.packageId === selectedComponent.packageId}"></span>
+                    {{row[column.prop]}}
+            </ng-template>
+            <ng-template  ngx-datatable-cell-template let-row="row" *ngSwitchCase="'categories'">
+                <span *ngIf="row[column.prop][0]">
+                    {{row[column.prop][0].name}}&nbsp;
+                    <span *ngIf="row[column.prop][0].subcategories[0]">{{row[column.prop][0].subcategories[0].name}}</span>
+                </span> 
+            </ng-template>
+            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchDefault>
+                {{row[column.prop]}}
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+</div>
+</div>
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less
new file mode 100644
index 0000000000..2e4abda35e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less
@@ -0,0 +1,97 @@
+@import "../../../../../assets/styles/variables";
+@import "../../../../../assets/styles/mixins";
+
+
+.onboarding-components-details{
+    display: flex;
+}
+.row-details-description,
+.row-details-metadata1,
+.row-details-metadata2,
+.row-details-metadata3{
+    .th { .m_14_m; }
+    flex-basis: 0;
+    overflow: hidden;
+    padding: 5px 15px;
+    white-space: normal;
+}
+.row-details-description,
+.row-details-metadata3 {
+    border-right: 1px solid @main_color_o;
+}
+
+.row-details-icon {
+    flex-basis: 0;
+    overflow: hidden;
+    padding: 5px 10px;
+    align-self: center;
+}
+
+.row-details-description {
+    flex-grow: 19;
+}
+.row-details-metadata1 {
+    flex-grow: 26.5;
+}
+.row-details-metadata2 {
+    flex-grow: 35;
+    .note {
+        color: @func_color_q;
+    }
+}
+.row-details-metadata3 {
+    flex-grow: 8;  
+}
+.info-button{
+    cursor: pointer;
+    float: right;
+}
+.row-details-icon {
+    flex-grow: 18; 
+}
+.download-file-btn {
+    cursor: pointer;
+    margin-left: 6px;
+}
+
+.import-update-file-btn {
+    cursor: pointer;
+}
+.sprite.table-arrow{
+    margin-right: 7px;
+}
+.search-wrapper {
+    .sdc-filter-bar-wrapper {
+      flex: 0 0 30%;
+    }
+    .sub-title-wrapper {
+        flex: 0 0 70%;
+        font-size: 15px;
+        line-height: 35px;
+        font-family: OpenSans-Regular, sans-serif;
+        align-items: center;
+        display: inline-flex;
+        .sub-title{
+            padding-left: 5px;
+        }
+    }
+    display: flex;
+    margin-top: 15px;
+    margin-bottom: 10px;
+  }
+
+  :host ::ng-deep {
+    .datatable-row-detail{
+        width: 1120px;
+    }
+    .datatable-body-row {
+        cursor: pointer;
+    }
+  }
+
+
+
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts
new file mode 100644
index 0000000000..565398b6ad
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts
@@ -0,0 +1,122 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import { NO_ERRORS_SCHEMA} from "@angular/core";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+
+import {Observable} from "rxjs/Observable";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {SdcUiServices, SdcUiCommon} from "onap-ui-angular";
+import 'rxjs/add/observable/of';
+import {OnboardingService} from "../../../services/onboarding.service";
+import {TranslateService} from "../../../shared/translator/translate.service";
+import {CacheService} from "../../../services/cache.service";
+import {FileUtilsService} from "../../../services/file-utils.service";
+import {onboardingModalVSPMock, onboardingModalUniqueVSPMock, vspFromServerMock} from "../../../../../jest/mocks/onboarding-vsp.mock";
+import {OnboardingModalComponent} from "./onboarding-modal.component";
+import {TranslatePipe} from "../../../shared/translator/translate.pipe";
+
+describe('onboarding modal component', () => {
+
+    let fixture: ComponentFixture<OnboardingModalComponent>;
+    let onboardingServiceMock: Partial<OnboardingService>;
+    let translateServiceMock: Partial<TranslateService>;
+    let cacheServiceMock: Partial<CacheService>;
+    let fileUtilsServiceMock: Partial<FileUtilsService>;
+    let popoverServiceMock: Partial<SdcUiServices.PopoverService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+
+    beforeEach(
+        async(() => {
+
+            onboardingServiceMock = {
+                getOnboardingComponents: jest.fn().mockImplementation(()=>  Observable.of(onboardingModalUniqueVSPMock)),
+                getComponentFromCsarUuid: jest.fn().mockImplementation(()=>  Observable.of(vspFromServerMock))
+            };
+
+            cacheServiceMock = {
+                set: jest.fn()
+            };
+
+            loaderServiceMock = {
+                activate: jest.fn(),
+                deactivate: jest.fn()
+            }
+
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [OnboardingModalComponent, TranslatePipe],
+                    imports: [NgxDatatableModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        { provide: OnboardingService, useValue: onboardingServiceMock },
+                        { provide: TranslateService, useValue: translateServiceMock },
+                        { provide: CacheService, useValue: cacheServiceMock },
+                        { provide: FileUtilsService, useValue: fileUtilsServiceMock },
+                        { provide: SdcUiServices.PopoverService, useValue: popoverServiceMock },
+                        { provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+                    ],
+                });
+            };
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(OnboardingModalComponent);
+            });
+        })
+    );
+
+    /*it('should match current snapshot of onboarding modal component', () => {
+        expect(fixture).toMatchSnapshot();
+    });*/
+
+    it('should see exactly 2 vsp in onboarding modal and call initOnboardingComponentsList', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+    });
+
+    it('should see exactly 1 vsp in onboarding modal and call initOnboardingComponentsList', () => {
+        fixture.componentInstance.currentCsarUUID = "6348841e79a64871ba064ce340a968a4";
+        fixture.componentInstance.initOnboardingComponentsList();
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(1);
+    });
+
+    it('when get a list of vsp initMaxVersionOfItemsInList will return a list with unique items with the latest versions for each packageId', () => {
+        onboardingServiceMock.getOnboardingComponents = jest.fn().mockImplementation(() => Observable.of(onboardingModalVSPMock));
+        fixture.componentInstance.initOnboardingComponentsList();
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+    });
+
+    it('should filter out 1 vsp when searching and call updateFilter function', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        let event = {
+            target : {
+                value : 'test new vsp'
+            }
+        }
+
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+        fixture.componentInstance.updateFilter(event);
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(1);
+    });
+
+    it('When select the selected vsp the row details closed and call onSelectComponent function', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        fixture.componentInstance.onSelectComponent({selected: []});
+        expect(fixture.componentInstance.selectedComponent).toEqual(undefined);
+        expect(fixture.componentInstance.componentFromServer).toEqual(undefined);
+    });
+
+    it('When select vsp a row with its details will be opened and call onSelectComponent function', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        fixture.componentInstance.onSelectComponent({selected: onboardingModalVSPMock});
+        expect(fixture.componentInstance.selectedComponent).not.toEqual(null);
+        expect(fixture.componentInstance.componentFromServer).not.toEqual(undefined);
+        expect(fixture.componentInstance.isCsarComponentExists).toEqual(true);
+    });
+    it('When select new vsp a row with import and download buttons will be opened and call onSelectComponent function', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        onboardingServiceMock.getComponentFromCsarUuid.mockImplementation(() => Observable.of(undefined));
+        fixture.componentInstance.onSelectComponent({selected: onboardingModalVSPMock});
+        expect(fixture.componentInstance.selectedComponent).not.toEqual(null);
+        expect(fixture.componentInstance.componentFromServer).toEqual(undefined);
+        expect(fixture.componentInstance.isCsarComponentExists).toEqual(false);
+    });
+});
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts
new file mode 100644
index 0000000000..2e41716e0b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts
@@ -0,0 +1,193 @@
+/**
+ * Created by rc2122 on 6/3/2018.
+ */
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import * as _ from 'lodash';
+import { SdcUiServices } from 'onap-ui-angular';
+import { ComponentMetadata, IComponentMetadata } from '../../../../models/component-metadata';
+import { IUserProperties } from '../../../../models/user';
+
+import { Resource } from '../../../../models/components/resource';
+import { ComponentType } from '../../../../utils/constants';
+import { CacheService } from '../../../services/cache.service';
+import { FileUtilsService } from '../../../services/file-utils.service';
+import { OnboardingService } from '../../../services/onboarding.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+
+export interface ImportVSPdata {
+    componentCsar: Resource;
+    previousComponent?: Resource;
+    type: string;
+}
+
+// tslint:disable-next-line:interface-name
+export interface IPoint {
+    x: number;
+    y: number;
+}
+
+@Component({
+    selector: 'onboarding-modal',
+    templateUrl: './onboarding-modal.component.html',
+    styleUrls: ['onboarding-modal.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class OnboardingModalComponent implements OnInit {
+    @Input() currentCsarUUID: string;
+    @Input() currentCsarVersion: string;
+    @ViewChild('componentsMetadataTable') table: any;
+    @Output() closeModalEvent: EventEmitter<ImportVSPdata> = new EventEmitter<ImportVSPdata>();
+
+    private columns = [
+        {name: 'Name', prop: 'name', flexGrow: 22},
+        {name: 'Vendor', prop: 'vendorName', flexGrow: 26},
+        {name: 'Category', prop: 'categories', flexGrow: 33},
+        {name: 'Version', prop: 'csarVersion', flexGrow: 10},
+        {name: 'Type', prop: 'resourceType', flexGrow: 10},
+        {name: '#', prop: '', flexGrow: 20}
+    ];
+    private componentsMetadataList: IComponentMetadata[] = [];
+    private temp: IComponentMetadata[] = [];
+    private componentFromServer: ComponentMetadata;
+    private isCsarComponentExists: boolean = false;
+    private selectedComponent: ComponentMetadata;
+    private isLoading: boolean;
+    private user: IUserProperties;
+
+    constructor(private onBoardingService: OnboardingService,
+                private translateService: TranslateService,
+                private cacheService: CacheService,
+                private fileUtilsService: FileUtilsService,
+                private popoverService: SdcUiServices.PopoverService,
+                private loaderService: SdcUiServices.LoaderService) {
+    }
+
+    public ngOnInit(): void {
+        this.initOnboardingComponentsList();
+        this.user = this.cacheService.get('user');
+    }
+
+    initMaxVersionOfItemsInList = (onboardingResponse: IComponentMetadata[]): void => {
+        // Get only the latest version of each item
+        this.componentsMetadataList = [];
+
+        // group all items according to packageId
+        const groupByPackageIdItems = _.groupBy(onboardingResponse, 'packageId');
+        // Loop on all the groups and push to componentsMetadataList the max version for each package
+        _.each(groupByPackageIdItems, (items: any): void => {
+            let maxItem: any = items[0];
+            items.forEach((item) => {
+                if (parseFloat(maxItem.csarVersion) < parseFloat(item.csarVersion)) {
+                    maxItem = item;
+                }
+            });
+            if (maxItem) {
+                this.componentsMetadataList.push(maxItem);
+            }
+        });
+    }
+
+    onSelectComponent({selected}) {
+        this.table.rowDetail.collapseAllRows();
+        if (selected[0] === this.selectedComponent) {
+            this.selectedComponent = undefined;
+            this.componentFromServer = undefined;
+            this.table.rowDetail.toggleExpandRow(null);
+            return;
+        }
+        this.isLoading = true;
+        this.componentFromServer = undefined;
+        this.selectedComponent = selected[0];
+        this.onBoardingService.getComponentFromCsarUuid(this.selectedComponent.csarUUID).subscribe(
+            (componentFromServer: ComponentMetadata) => {
+                this.isLoading = false;
+                if (componentFromServer) {
+                    this.componentFromServer = componentFromServer;
+                    this.populateRowDetails(true);
+                } else {
+                    this.populateRowDetails(false);
+                }
+            }, (error) => {
+                this.isLoading = false;
+                this.populateRowDetails(false);
+            });
+    }
+
+    populateRowDetails(isCsarComponentExists: boolean) {
+        this.isCsarComponentExists = isCsarComponentExists;
+        this.table.rowDetail.toggleExpandRow(this.selectedComponent);
+    }
+
+    importOrUpdateCsar = (): void => {
+        const selectedComponentConverted = this.onBoardingService.convertMetaDataToComponent(this.selectedComponent);
+        const componentFromServerConverted = this.componentFromServer ?
+            this.onBoardingService.convertMetaDataToComponent(this.componentFromServer) : undefined;
+        const importVSPdata: ImportVSPdata = {
+            componentCsar: selectedComponentConverted,
+            previousComponent: componentFromServerConverted,
+            type: ComponentType.RESOURCE.toLowerCase()
+        };
+        this.closeModalEvent.emit(importVSPdata);
+    }
+
+    downloadCsar = (packageId: string): void => {
+        this.isLoading = true;
+        this.onBoardingService.downloadOnboardingCsar(packageId).subscribe(
+            (file: any): void => {
+                this.isLoading = false;
+                if (file.body) {
+                    this.fileUtilsService.downloadFile(file.body, packageId + '.csar');
+                }
+            }, (): void => {
+                this.isLoading = false;
+            }
+        );
+    }
+
+    updateFilter(event) {
+        const val = event.target.value.toLowerCase();
+
+        // filter our data
+        const temp = this.temp.filter((componentMetadata: ComponentMetadata) => {
+            return !val ||
+                (componentMetadata.name && componentMetadata.name.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.vendorName && componentMetadata.vendorName.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.categories[0] && componentMetadata.categories[0].name.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.categories[0] && componentMetadata.categories[0].subcategories[0] && componentMetadata.categories[0].subcategories[0].name.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.csarVersion && componentMetadata.csarVersion.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.description && componentMetadata.description.toLowerCase().indexOf(val) !== -1);
+        });
+
+        // update the rows
+        this.componentsMetadataList = temp;
+    }
+
+    checkNotCertified = (): boolean => {
+        return this.componentFromServer && this.componentFromServer.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' &&
+            this.componentFromServer.lastUpdaterUserId !== this.user.userId;
+    }
+
+    openPopover = ($event: any, popoverContent): void => {
+        this.popoverService.createPopOver('', this.translateService.translate(popoverContent), {
+            x: $event.pageX,
+            y: $event.pageY
+        }, 'bottom');
+    }
+
+    private initOnboardingComponentsList = (): void => {
+        this.loaderService.activate();
+        this.onBoardingService.getOnboardingComponents().subscribe(
+            (onboardingResponse: IComponentMetadata[]) => {
+                this.loaderService.deactivate();
+                if (this.currentCsarUUID) {
+                    onboardingResponse = _.filter(onboardingResponse, (input): boolean => {
+                        return (input as ComponentMetadata).csarUUID === this.currentCsarUUID;
+                    });
+                }
+                this.initMaxVersionOfItemsInList(onboardingResponse);
+                this.temp = [...this.componentsMetadataList];
+            }, (error) => {
+                this.loaderService.deactivate();
+            }
+        );
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts
new file mode 100644
index 0000000000..8f47456a8f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts
@@ -0,0 +1,145 @@
+import { Component, Input } from "@angular/core";
+import {IFileDownload, Component as TopologyTemplate, ArtifactModel, FullComponentInstance} from "app/models";
+import {EventListenerService} from "app/services";
+import {CacheService} from "app/services-ng2";
+import {EVENTS} from "app/utils";
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+
+@Component({
+    selector: 'download-artifact',
+    template: `
+	<svg-icon [mode]="'primary2'" [disabled]="disabled" [clickable]="!disabled" [name]="iconType" [testId]="testId" mode="info" clickable="true" size="medium" (click)="download($event)"></svg-icon>
+`
+})
+export class DownloadArtifactComponent {
+    
+    @Input() showLoader:boolean;
+    @Input() artifact:ArtifactModel;
+    @Input() isInstance: boolean;
+    @Input() downloadIconClass: string;
+    @Input() componentType: string;
+    @Input() componentId: string;
+    @Input() testId: string;
+    @Input() disabled: boolean;
+
+    public iconType:string;
+
+    private DOWNLOAD_CSS_CLASSES = {
+        DOWNLOAD_ICON: "download-o",
+        LOADER_ICON: "spinner"
+    }
+    constructor(private cacheService:CacheService, private EventListenerService:EventListenerService, private topologyTemplateService:TopologyTemplateService,
+                private componentInstanceService: ComponentInstanceServiceNg2, private workspaceService:WorkspaceService) {
+        
+    }
+
+    ngOnInit () {
+        this.iconType = this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+        this.initDownloadLoader();
+
+    }
+
+    private initDownloadLoader = ()=> {
+        //if the artifact is in a middle of download progress register form callBack & change icon from download to loader
+        if (this.showLoader && this.cacheService.get(this.artifact.uniqueId)) {
+            this.EventListenerService.registerObserverCallback(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + this.artifact.uniqueId, this.updateDownloadIcon);
+            window.setTimeout(():void => {
+                if (this.cacheService.get(this.artifact.uniqueId)) {
+                    this.iconType = this.DOWNLOAD_CSS_CLASSES.LOADER_ICON;
+                }
+            }, 1000);
+        }
+    };
+
+    private updateDownloadIcon = () => {
+        this.iconType = this.downloadIconClass || this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+    };
+
+    public download = (event) => {
+        event.stopPropagation();
+        let onFaild = (response):void => {
+            console.info('onFaild', response);
+            this.removeDownloadedFileLoader();
+        };
+
+        let onSuccess = (data:IFileDownload):void => {
+            this.downloadFile(data);
+            this.removeDownloadedFileLoader();
+        };
+
+        this.setDownloadedFileLoader();
+
+        if (this.isInstance) {
+            this.componentInstanceService.downloadInstanceArtifact(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild);
+        } else {
+            this.topologyTemplateService.downloadArtifact(this.componentType, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild);
+        }
+    };
+
+    private setDownloadedFileLoader = ()=> {
+        if (this.showLoader) {
+            //set in cache service thet the artifact is in download progress
+            this.cacheService.set(this.artifact.uniqueId, true);
+            this.initDownloadLoader();
+        }
+    };
+
+    private removeDownloadedFileLoader = ()=> {
+        if (this.showLoader) {
+            this.cacheService.set(this.artifact.uniqueId, false);
+            this.EventListenerService.notifyObservers(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + this.artifact.uniqueId);
+        }
+    };
+
+    private downloadFile = (file:IFileDownload):void => {
+        if (file) {
+            let blob = this.base64toBlob(file.base64Contents, '');
+            let fileName = file.artifactName;
+            this.triggerFileDownload(blob, fileName);
+        }
+    };
+
+    public base64toBlob = (base64Data, contentType):any => {
+        let byteCharacters = atob(base64Data);
+        return this.byteCharactersToBlob(byteCharacters, contentType);
+    };
+
+    public byteCharactersToBlob = (byteCharacters, contentType):any => {
+        contentType = contentType || '';
+        let sliceSize = 1024;
+        let bytesLength = byteCharacters.length;
+        let slicesCount = Math.ceil(bytesLength / sliceSize);
+        let byteArrays = new Array(slicesCount);
+
+        for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+            let begin = sliceIndex * sliceSize;
+            let end = Math.min(begin + sliceSize, bytesLength);
+
+            let bytes = new Array(end - begin);
+            for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+                bytes[i] = byteCharacters[offset].charCodeAt(0);
+            }
+            byteArrays[sliceIndex] = new Uint8Array(bytes);
+        }
+        return new Blob(byteArrays, {type: contentType});
+    };
+
+    public triggerFileDownload = (blob, fileName):void=> {
+        let url = window.URL.createObjectURL(blob);
+        let downloadLink = document.createElement("a");
+
+        downloadLink.setAttribute('href', url);
+        downloadLink.setAttribute('download', fileName);
+        document.body.appendChild(downloadLink);
+
+        var clickEvent = new MouseEvent("click", {
+            "view": window,
+            "bubbles": true,
+            "cancelable": true
+        });
+        downloadLink.dispatchEvent(clickEvent);
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
index 049d40831a..5e3214d888 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
@@ -37,11 +37,13 @@ enum DynamicElementComponentCreatorIdentifier {
     BOOLEAN,
     SUBNETPOOLID,
     ENUM,
+    LIST,
     DEFAULT
 }
 
 @Component({
     selector: 'dynamic-element',
+    // Span - if constraints not empty
     template: `<div #target></div>`,
     styleUrls: ['./dynamic-element.component.less'],
     entryComponents: [
@@ -61,6 +63,7 @@ export class DynamicElementComponent {
     @Input() readonly:boolean;
     @Input() constraints: Array<any>;
     @Input() path:string;//optional param. used only for for subnetpoolid type
+    @Input() declared:boolean;
 
     @Input() value: any;
     @Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
@@ -72,16 +75,19 @@ export class DynamicElementComponent {
     validation = ValidationConfiguration.validation;
 
     constructor(
+        
         private componentFactoryResolver: ComponentFactoryResolver,
         private compiler: Compiler,
         private el: ElementRef) {
+           
+            
     }
 
     updateComponent() {
         if (!this.isViewInitialized) {
             return;
         }
-
+        
         // Factory to create component based on type or other property attributes.
         const prevElementCreatorIdentifier: DynamicElementComponentCreatorIdentifier = this.elementCreatorIdentifier;
         switch(true) {
@@ -112,7 +118,7 @@ export class DynamicElementComponent {
         }
 
         // In case the dynamic element creator is changed, then destroy old and build new.
-        if (this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
+        if (this.declared || this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
             if (this.cmpRef) {
                 this.cmpRef.destroy();
             }
@@ -149,64 +155,81 @@ export class DynamicElementComponent {
     }
 
     createComponentByIdentifier() {
-        switch(this.elementCreatorIdentifier) {
-            case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
-                if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
-                    let pathArray = this.path.split("#");
-                    this.name = pathArray[pathArray.length - 2];
-                }
-                this.createComponent(UiElementPopoverInputComponent);
-                break;
+        // if(!this.constraints || this.declared){
+            switch(this.elementCreatorIdentifier) {
+                case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
+                    if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
+                        let pathArray = this.path.split("#");
+                        this.name = pathArray[pathArray.length - 2];
+                    }
+                    this.createComponent(UiElementPopoverInputComponent);
+                    break;
+                case DynamicElementComponentCreatorIdentifier.ENUM:
+                    this.createComponent(UiElementDropDownComponent);
+                    let validVals:Array<DropdownValue> = [...this.getValidValues()].map(val => new DropdownValue(val, val));
+                    if (this.type === 'float' || this.type === 'integer') {
+                        this.value = this.value && Number(this.value);
+                        validVals = _.map(
+                            validVals,
+                            (val) => new DropdownValue(Number(val.value), val.value)
+                        );
+                    }
+                    this.cmpRef.instance.values = validVals;
+                    break;
+                case DynamicElementComponentCreatorIdentifier.INTEGER:
+                    this.createComponent(UiElementIntegerInputComponent);
+                    this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
+                    break;
 
-            case DynamicElementComponentCreatorIdentifier.ENUM:
-                this.createComponent(UiElementDropDownComponent);
-                let validVals:Array<DropdownValue> = [...this.getValidValues()].map(val => new DropdownValue(val, val));
-                if (this.type === 'float' || this.type === 'integer') {
-                    this.value = this.value && Number(this.value);
-                    validVals = _.map(
-                        validVals,
-                        val => new DropdownValue(Number(val.value), val.value)
-                    );
-                }
-                this.cmpRef.instance.values = validVals;
-                break;
+                case DynamicElementComponentCreatorIdentifier.FLOAT:
+                    this.createComponent(UiElementIntegerInputComponent);
+                    this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
+                    break;
 
-            case DynamicElementComponentCreatorIdentifier.INTEGER:
-                this.createComponent(UiElementIntegerInputComponent);
-                this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
-                break;
+                case DynamicElementComponentCreatorIdentifier.STRING:
+                    this.createComponent(UiElementInputComponent);
+                    break;
 
-            case DynamicElementComponentCreatorIdentifier.FLOAT:
-                this.createComponent(UiElementIntegerInputComponent);
-                this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
-                break;
+                case DynamicElementComponentCreatorIdentifier.BOOLEAN:
+                    this.createComponent(UiElementDropDownComponent);
 
-            case DynamicElementComponentCreatorIdentifier.STRING:
-                this.createComponent(UiElementInputComponent);
-                break;
-
-            case DynamicElementComponentCreatorIdentifier.BOOLEAN:
-                this.createComponent(UiElementDropDownComponent);
-
-                // Build drop down values
-                let tmp = [];
-                tmp.push(new DropdownValue(true,'TRUE'));
-                tmp.push(new DropdownValue(false,'FALSE'));
-                this.cmpRef.instance.values = tmp;
-                try {
-                    if (typeof this.value === 'string') {
-                        this.value = JSON.parse(this.value);
+                    // Build drop down values
+                    let tmp = [];
+                    tmp.push(new DropdownValue(true,'TRUE'));
+                    tmp.push(new DropdownValue(false,'FALSE'));
+                    this.cmpRef.instance.values = tmp;
+                    try {
+                        if(typeof this.value === 'string'){
+                            this.value = JSON.parse(this.value);
+                        }
+                    } catch (err) {
+                        this.value = null;
                     }
-                } catch(err) {
-                    this.value = null;
-                }
-                break;
+                    break;
 
-            case DynamicElementComponentCreatorIdentifier.DEFAULT:
-            default:
-                this.createComponent(UiElementInputComponent);
-                console.log("ERROR: No ui-models component to handle type: " + this.type);
-        }
+                case DynamicElementComponentCreatorIdentifier.DEFAULT:
+                default:
+                    this.createComponent(UiElementInputComponent);
+                    console.log("ERROR: No ui-models component to handle type: " + this.type);
+            }
+        // }
+        // //There are consraints
+        // else {
+            
+        //     this.createComponent(UiElementDropDownComponent);
+
+        //     // Build drop down values
+        //     let items = [];
+        //     this.constraints.forEach( (element) => {
+        //         items.push(new DropdownValue(element,element));
+        //     });
+
+        //     items.push(new DropdownValue(this.value,this.value, true, true));
+        //     this.cmpRef.instance.values = items;
+            
+            
+            
+        // }
 
         // Subscribe to change event of of ui-models-element-basic and fire event to change the value
         this.cmpRef.instance.baseEmitter.subscribe((event) => { this.emitter.emit(event); });
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
index 50b22505a9..dc12551e8f 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
@@ -23,6 +23,12 @@ import {PopoverModule} from "../popover/popover.module";
 import {TooltipModule} from "../tooltip/tooltip.module";
 import {DynamicElementComponent} from "./dynamic-element.component";
 import {FormElementsModule} from "../form-components/form-elements.module";
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular";
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+// import {SdcUiComponentsModule} from "onap-ui/lib/angular";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+
+import { CommonModule } from '@angular/common';
 
 @NgModule({
     declarations: [
@@ -31,7 +37,9 @@ import {FormElementsModule} from "../form-components/form-elements.module";
     imports: [
         PopoverModule,
         TooltipModule,
-        FormElementsModule
+        FormElementsModule,
+        SdcUiComponentsModule,
+        CommonModule
     ],
     exports: [
         DynamicElementComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
index fde7bca6d2..9b678b2790 100644
--- a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
@@ -14,16 +14,15 @@
   ~ limitations under the License.
   -->
   
-<h1 class="w-sdc-designer-sidebar-section-title"
-    tooltip="{{titleTooltip}}"
-    [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
-    (click)="toggleState()">
-    {{caption}}<span class="w-sdc-designer-sidebar-section-title-icon"></span>
-    <ng-content select="header"></ng-content>
-    <span class="w-sdc-designer-sidebar-section-title-icon"></span>
-</h1>
+<div class="expand-collapse-container">
+    <h1 class="expand-collapse-title" [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
+        tooltip="{{titleTooltip}}" (click)="toggleState()">{{caption}}
+        <ng-content select="header"></ng-content>
+        <svg-icon name="caret1-down-o" mode="info" size="small" class="expand-collapse-title-icon"></svg-icon>
+    </h1>
 
-<div class="expand-collapse-content" [ngClass]="{'visible': state === 0, 'hidden': state === 1}">
-    <ng-content></ng-content>
-    <ng-content select="content"></ng-content>
-</div>
+    <div class="expand-collapse-content" [ngClass]="{'expanded': state === 0, 'collapsed': state === 1}">
+        <ng-content></ng-content>
+        <ng-content select="content"></ng-content>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
index e5dd2527c1..deda687a09 100644
--- a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
@@ -5,3 +5,51 @@
     text-decoration: underline;
     text-align: left;
 }
+
+
+.expand-collapse-title {
+    display:flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    text-transform: uppercase;
+    line-height: 32px;
+    padding: 0 10px 0 20px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    header {
+        flex: 1;
+    }
+
+    .expand-collapse-title-icon {
+        padding-top: 10px;
+        padding-left: 2px; 
+        transition: transform .3s ease-out;
+        
+    }
+
+    &.expanded .expand-collapse-title-icon {
+        transform: rotate(0);
+    }
+
+    &.collapsed .expand-collapse-title-icon {
+        transform: rotate(-180deg);
+    }
+    
+} 
+
+.expand-collapse-content {
+    overflow: hidden;
+    transition: max-height .3s ease-in;
+
+    &.collapsed {
+        max-height: 0px;
+        overflow:hidden;
+        transition: all .3s cubic-bezier(0, 1, 0, 1);
+
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html
new file mode 100644
index 0000000000..14fc6eefc7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html
@@ -0,0 +1,6 @@
+<label>
+    <input type="file" class="i-sdc-dashboard-item-upload-input"
+        (change)="onFileSelect($event)"
+        [accept]="extensionsWithDot"
+        [attr.data-tests-id]="'file-' + testsId" />
+</label>
diff --git a/catalog-ui/src/app/ng2/app.component.css b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less
index e69de29bb2..e69de29bb2 100644
--- a/catalog-ui/src/app/ng2/app.component.css
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts
new file mode 100644
index 0000000000..1d1d4cef0d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts
@@ -0,0 +1,45 @@
+import {Component, Input, Output, EventEmitter, SimpleChanges} from "@angular/core";
+
+@Component({
+    selector: 'file-opener',
+    templateUrl: './file-opener.component.html',
+    styleUrls: ['./file-opener.component.less']
+})
+export class FileOpenerComponent {
+    @Input() public testsId: string;
+    @Input() public extensions: string;
+    @Output() public onFileUpload: EventEmitter<any>;
+
+    public extensionsWithDot: string;
+
+    constructor() {
+        this.onFileUpload = new EventEmitter<any>();
+    }
+
+    public ngOnChanges(changes:SimpleChanges) {
+        if (changes.extensions) {
+            this.extensionsWithDot = this.getExtensionsWithDot(changes.extensions.currentValue);
+        }
+    }
+
+    public onFileSelect(event) {
+        const importFile:any = event.target.files[0];
+        const reader = new FileReader();
+        reader.readAsBinaryString(importFile);
+        reader.onload = () => {
+            this.onFileUpload.emit({
+                filename: importFile.name,
+                filetype: importFile.type,
+                filesize: importFile.size,
+                base64: btoa(reader.result)
+            });
+        };
+    }
+
+    public getExtensionsWithDot(extensions:string):string {
+        extensions = extensions || this.extensions || '';
+        return extensions.split(',')
+            .map(ext => '.' + ext.toString())
+            .join(',');
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
index c8da016174..c7b0af6ecf 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
@@ -19,7 +19,7 @@
  */
 
 import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-//import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+//import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
 
 @Component({
     selector: 'checkbox',
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
index 45fd77ee61..9dca01eb61 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
@@ -15,5 +15,5 @@
   -->
   
 <select name='{{name}}' [(ngModel)]="value" (change)="onChange()"  [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'value-' + testId">
-  <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue">{{ddvalue.label||ddvalue}}</option>
+  <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue" [hidden]="ddvalue.hidden" [selected] = "ddvalue.selected">{{ddvalue.label||ddvalue}}</option>
 </select>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
index 03a1fc6040..6db233529b 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
@@ -24,11 +24,21 @@ import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.comp
 export class DropdownValue {
   value:any;
   label:string;
+  hidden?: boolean;
+  selected?: boolean;
 
-  constructor(value:any,label:string) {
+
+  constructor(value:any,label:string, hidden: boolean = false, selected: boolean = false) {
     this.value = value;
     this.label = label;
+    this.hidden = hidden;
+    this.selected = selected;
+    
+    // this.hidden = hidden ? true : "hidden": "";
+    // this.selected = selected ? true : "selected": "";
   }
+
+
 }
 
 @Component({
@@ -37,8 +47,8 @@ export class DropdownValue {
   styleUrls: ['./ui-element-dropdown.component.less'],
 })
 export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface  {
-  @Input()
-  values: DropdownValue[]|string[];
+  
+  @Input() values: DropdownValue[];
 
   constructor() {
     super();
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
index e5bdf1f557..b35d3ae3f4 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
@@ -1,19 +1,19 @@
 /**
  * Created by rc2122 on 9/5/2017.
  */
-import {NgModule} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {UiElementPopoverInputComponent} from "./popover-input/ui-element-popover-input.component";
-import {UiElementIntegerInputComponent} from "./integer-input/ui-element-integer-input.component";
-import {UiElementInputComponent} from "./input/ui-element-input.component";
-import {UiElementDropDownComponent} from "./dropdown/ui-element-dropdown.component";
-import {UiElementBase} from "./ui-element-base.component";
-import {CheckboxModule} from "./checkbox/checkbox.module";
-import {RadioButtonComponent} from "./radio-buttons/radio-buttons.component";
-import {PopoverModule} from "../popover/popover.module";
-import {TooltipModule} from "../tooltip/tooltip.module";
-
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { SdcUiComponentsModule } from 'onap-ui-angular/dist';
+import { PopoverModule } from '../popover/popover.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { CheckboxModule } from './checkbox/checkbox.module';
+import { UiElementDropDownComponent } from './dropdown/ui-element-dropdown.component';
+import { UiElementInputComponent } from './input/ui-element-input.component';
+import { UiElementIntegerInputComponent } from './integer-input/ui-element-integer-input.component';
+import { UiElementPopoverInputComponent } from './popover-input/ui-element-popover-input.component';
+import { RadioButtonComponent } from './radio-buttons/radio-buttons.component';
+import { UiElementBase } from './ui-element-base.component';
 
 @NgModule({
     imports: [
@@ -22,7 +22,8 @@ import {TooltipModule} from "../tooltip/tooltip.module";
         PopoverModule,
         ReactiveFormsModule,
         TooltipModule,
-        CheckboxModule],
+        CheckboxModule,
+        SdcUiComponentsModule],
 
     declarations: [UiElementDropDownComponent,
         UiElementInputComponent,
@@ -39,4 +40,4 @@ import {TooltipModule} from "../tooltip/tooltip.module";
         TooltipModule,
         CheckboxModule]
 })
-export class FormElementsModule { }
\ No newline at end of file
+export class FormElementsModule { }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
index 85089f12b8..f9cf17f087 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
@@ -13,19 +13,18 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-  
-<input
-    class="value-input"
-    [ngClass]="{'error': control.invalid, 'disabled':readonly}"
-    type="text"
-    [name]="name"
-    [(ngModel)]="value"
-    (input)="onChange()"
-    [attr.maxlength]="validation.propertyValue.max"
-    [attr.minlength]="validation.propertyValue.min"
-    [pattern]="pattern"
-    [formControl]="control"
-    tooltip="{{value}}"
-    [readonly]="readonly"
-    [attr.data-tests-id]="'value-' + testId"
-    />
+<div sdc-tooltip [tooltip-text]="value">
+    <input
+        class="value-input"
+        [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+        type="text"
+        [name]="name"
+        [(ngModel)]="value"
+        (input)="onChange()"
+        [attr.maxlength]="validation.propertyValue.max"
+        [attr.minlength]="validation.propertyValue.min"
+        [pattern]="pattern"
+        [formControl]="control"
+        [attr.data-tests-id]="'value-' + testId"
+        />
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
index 34404e50a5..b401778bc2 100644
--- a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
@@ -1,15 +1,11 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from '@angular/common';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { ValueEditComponent } from './value-edit/value-edit.component';
+import { SdcUiComponentsModule } from "onap-ui-angular";
 import { UnsavedChangesComponent } from "./unsaved-changes/unsaved-changes.component";
 import { UiElementsModule } from "../ui-elements.module";
 
-
-
 @NgModule({
     declarations: [
-        ValueEditComponent,
         UnsavedChangesComponent
     ],
     imports: [
@@ -17,7 +13,7 @@ import { UiElementsModule } from "../ui-elements.module";
         SdcUiComponentsModule,
         UiElementsModule
     ],
-    exports: [ValueEditComponent, UnsavedChangesComponent],
+    exports: [UnsavedChangesComponent],
     entryComponents: [ UnsavedChangesComponent
     ],
     providers: []
diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
index bfb9e1b1ae..00083050d8 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
@@ -14,7 +14,7 @@
   ~ limitations under the License.
   -->
   
-<div *ngIf="isVisible"  data-tests-id="tlv-loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'" 
+<div *ngIf="isVisible"  data-tests-id="loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'"
         [style.top]="offset.top" [style.left]="offset.left" [style.width]="offset.width"  [style.height]="offset.height">
     <div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div>
     <div class="tlv-loader {{size}}"></div>
diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
index 585c36660e..9658e6b65c 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
@@ -79,6 +79,13 @@ export class LoaderComponent {
                 width: (parentElement.offsetWidth !== undefined) ? parentElement.offsetWidth + "px" : undefined,
                 height: (parentElement.offsetHeight !== undefined) ? parentElement.offsetHeight + "px" : undefined
             };
+        } else {
+            this.offset = {
+                left: '0px',
+                top: '0px',
+                width: '100%',
+                height: '100%'
+            }
         }
         this.isVisible = true;
     }
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
index 3820573e58..8b2006634e 100644
--- a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
@@ -1,5 +1,9 @@
 /*-
+ * ============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
@@ -11,9 +15,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
+ * ============LICENSE_END=========================================================
  */
 
- 
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
index 939599f0bc..290c8d06af 100644
--- a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
@@ -1,5 +1,9 @@
 /*-
+ * ============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
@@ -11,9 +15,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
+ * ============LICENSE_END=========================================================
  */
 
- 
 import { Component, Input, ContentChildren, SimpleChanges, QueryList } from '@angular/core';
 import { MenuItemComponent } from "./menu-item.component";
 import { Point } from "app/models";
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
index 1d05b27d68..ab367529d8 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
@@ -1,9 +1,9 @@
 /**
  * Created by ob0695 on 11.04.2018.
  */
-import {Component, Input} from "@angular/core";
-import {UiBaseObject} from "../../../../../models/ui-models/ui-base-object";
-import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
+import { Component, Input } from "@angular/core";
+import { UiBaseObject } from "../../../../../models/ui-models/ui-base-object";
+import { IDropDownOption } from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
 
 @Component({
     selector: 'add-elements',
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
index a1c34f5686..70ad0a389c 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
@@ -1,14 +1,11 @@
 /**
  * Created by ob0695 on 11.04.2018.
  */
-import {NgModule} from "@angular/core";
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
-import {AddElementsComponent} from "./add-elements.component";
-import {CommonModule} from "@angular/common";
+import { NgModule } from "@angular/core";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { AddElementsComponent } from "./add-elements.component";
+import { CommonModule } from "@angular/common";
 
-/**
- * Created by ob0695 on 9.04.2018.
- */
 @NgModule({
     declarations: [
         AddElementsComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
index 777e9bdc06..2432c3bb37 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
@@ -36,7 +36,7 @@ export class ModalComponent implements OnInit, OnDestroy {
     @Input() isMovable: boolean;
     @Input() input: ModalModel;
     @Input() dynamicContent: any;
-    @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example.
+    @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpHelperService's catchError() for example.
     private modalElement: JQuery;
 
     constructor( el: ElementRef ) {
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
index 9219a30738..1986e34914 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
@@ -20,10 +20,8 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-import {
-    Component, ElementRef, forwardRef, Inject, Input, trigger, state, style,
-    transition, animate, ViewChild, ViewContainerRef, ComponentRef
-} from "@angular/core";
+import { Component, ElementRef, forwardRef, Inject, Input, ViewChild, ViewContainerRef, ComponentRef} from "@angular/core";
+import {trigger, state, style, transition, animate} from '@angular/animations';
 import {StepModel} from "app/models";
 import {ModalService} from "../../../services/modal.service";
 import {ModalComponent} from "../modal/modal.component";
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
index 3db217d282..81a90b8a9b 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
@@ -4,7 +4,7 @@
 import { NgModule } from "@angular/core";
 import {MultiStepsWizardComponent} from "./multi-steps-wizard.component";
 import {CommonModule} from "@angular/common";
-import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module";
+import {ConnectionWizardModule} from "app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module";
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html
new file mode 100644
index 0000000000..277702e336
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html
@@ -0,0 +1,11 @@
+<div class="w-sdc-designer-sidebar-toggle" [class.active]="(withSidebar$ | async)" (click)="toggleSidebarDisplay()">
+    <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div>
+</div>
+
+<div class="w-sdc-designer-sidebar">
+    <ng-content></ng-content>
+</div>
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less
new file mode 100644
index 0000000000..cacb85d6b1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less
@@ -0,0 +1,55 @@
+@import '../../../../../assets/styles/variables';
+
+.w-sdc-designer-sidebar {
+  background-color:@main_color_p ;
+  font-family: @font-opensans-regular;
+  font-size: 13px;
+  color: #191919;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  bottom: 0;
+  position: fixed;
+  right: -302px;
+  width: 302px;
+  top: 103px;
+  transition: right 0.2s;
+  z-index: 1010;
+  box-shadow: -7px -3px 6px -8px @main_color_n;
+}
+
+.w-sdc-designer-sidebar-toggle {
+  background-color: @main_color_p;
+  border-left: 1px solid @main_color_o;
+  border-bottom: 1px solid @main_color_o;
+  height: 21px;
+  position: absolute;
+  right: 0;
+  top: 53px;
+  width: 17px;
+  transition: right 0.2s;
+  z-index: 1005;
+  box-shadow: -1px 1px 3px 0  @main_color_n;
+  cursor: pointer;
+
+  &.active {
+    right: 302px;
+    .w-sdc-designer-sidebar-toggle-icon{
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.w-sdc-designer-sidebar-toggle-icon {
+  margin-left: 6px;
+  margin-top: 6px;
+}
+
+.w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar {
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts
new file mode 100644
index 0000000000..e9c4a7d354
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts
@@ -0,0 +1,25 @@
+import {Component} from "@angular/core";
+import {Select, Store} from "@ngxs/store";
+import {Subscription} from "rxjs/Subscription";
+import {GraphState} from "../../../pages/composition/common/store/graph.state";
+import {OnSidebarOpenOrCloseAction} from "../../../pages/composition/common/store/graph.actions";
+
+@Component({
+    selector: 'panel-wrapper-component',
+    templateUrl: './panel-wrapper.component.html',
+    styleUrls: ['./panel-wrapper.component.less']
+})
+export class PanelWrapperComponent {
+    @Select(GraphState.withSidebar) withSidebar$: boolean;
+
+    tabs: Array<any>;
+    subscription: Subscription;
+
+    constructor(public store: Store) {
+    }
+
+    private toggleSidebarDisplay = () => {
+        // this.withSidebar = !this.withSidebar;
+        this.store.dispatch(new OnSidebarOpenOrCloseAction());
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
new file mode 100644
index 0000000000..ccc1e2181e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
@@ -0,0 +1,51 @@
+import {Directive, Input, ElementRef} from '@angular/core';
+import * as PerfectScrollbar from 'perfect-scrollbar';
+
+interface IPerfectScrollbarOptions {
+    wheelSpeed?: number;
+    wheelPropagation?: boolean;
+    minScrollbarLength?: number;
+    useBothWheelAxes?: boolean;
+    useKeyboard?: boolean;
+    suppressScrollX?: boolean;
+    suppressScrollY?: boolean;
+    scrollXMarginOffset?: number;
+    scrollYMarginOffset?: number;
+    includePadding?: boolean;
+}
+
+@Directive({
+    selector: '[perfectScrollbar]'
+})
+export class PerfectScrollbarDirective {
+    @Input() public perfectScrollbarOptions: IPerfectScrollbarOptions;
+
+    private psOptions: IPerfectScrollbarOptions;
+    private updatingPS: boolean;
+
+    constructor(public elemRef:ElementRef) {
+        console.log('PSbar: Constructor');
+        this.psOptions = Object.assign({}, this.perfectScrollbarOptions);
+        this.updatingPS = false;
+    }
+
+    public ngOnInit() {
+        console.log('PSbar: Initializing');
+        PerfectScrollbar.initialize(this.elemRef.nativeElement, this.psOptions);
+    }
+
+    public ngAfterContentChecked() {
+        // update perfect-scrollbar after content is checked (updated) - bounced
+        if (!this.updatingPS) {
+            this.updatingPS = true;
+            setTimeout(() => {
+                this.updatingPS = false;
+                PerfectScrollbar.update(this.elemRef.nativeElement);
+            }, 100);
+        }
+    }
+
+    public ngOnDestroy() {
+        PerfectScrollbar.destroy(this.elemRef.nativeElement);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
index cce1c40765..5294c67e31 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
@@ -17,6 +17,7 @@
 <div class="plugin-frame">
     <div class="w-sdc-main-container">
         <iframe *ngIf="plugin.isOnline" class="plugin-iframe" [src]="pluginUrl | safeUrlSanitizer"></iframe>
-        <plugin-not-connected [pluginName]="plugin.pluginId" *ngIf="!plugin.isOnline && isPluginCheckDone"></plugin-not-connected>
+        <plugin-not-connected [pluginName]="plugin.pluginId"
+                              *ngIf="!plugin.isOnline && isPluginCheckDone"></plugin-not-connected>
     </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
index d70c448984..d94f24da28 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
@@ -38,8 +38,7 @@ export class PluginFrameComponent implements OnInit {
             } else {
                 this.onLoadingDone.emit();
             }
-        })
-
+        });
     }
 
     private initPlugin() {
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
index 88906d96fa..9a280e169d 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
@@ -19,7 +19,7 @@
      [style.left]="left + 'px'"
      [class.in]="isIn"
      [class.fade]="animation"
-     style="display: block"
+     [style.display] = "displayType"
      role="popover"
      [ngClass]="{'hide-arrow':hideArrow}">
     <div [hidden]="!closeOnMouseOutside" class="virtual-area"></div>
@@ -29,13 +29,11 @@
         <span class="close-button" (click)="popover.hide()"></span>
     </div>
     <ng-content></ng-content>
-    <div class="popover-footer">
+    <div class="popover-footer" *ngIf="buttons">
         <button *ngFor="let buttonName of buttonsNames"
-                class="tlv-btn {{buttons[buttonName].cssClass}}" 
+                class="tlv-btn {{buttons[buttonName].cssClass}}"
                 [attr.data-tests-id]="'filter-' + buttons[buttonName].text.toLowerCase() + '-button'"
                 [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
                 (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
     </div>
 </div>
-
-
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
index 6eb36287d0..bea592d2a6 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,25 +18,25 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core";
-import {ButtonsModelMap} from "app/models";
-import {PopoverComponent} from "./popover.component";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, Output, Renderer, ViewChild } from '@angular/core';
+import { ButtonsModelMap } from 'app/models';
+import { PopoverComponent } from './popover.component';
 
 @Component({
-    selector: "popover-content",
-    templateUrl:'./popover-content.component.html',
-    styleUrls:['popover-content.component.less']
+    selector: 'popover-content',
+    templateUrl: './popover-content.component.html',
+    styleUrls: ['popover-content.component.less']
 })
 export class PopoverContentComponent implements AfterViewInit, OnDestroy {
 
     @Input() public title: string;
-    @Input() public buttons:ButtonsModelMap;
+    @Input() public buttons: ButtonsModelMap;
 
     @Input()
     content: string;
 
     @Input()
-    placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom";
+    placement: 'top'|'bottom'|'left'|'right'|'auto'|'auto top'|'auto bottom'|'auto left'|'auto right' = 'bottom';
 
     @Input()
     animation: boolean = true;
@@ -50,52 +50,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     @Input()
     hideArrow: boolean = false;
 
-    @ViewChild("popoverDiv")
+    @ViewChild('popoverDiv')
     popoverDiv: ElementRef;
 
-    buttonsNames:Array<string>;
+    buttonsNames: string[];
 
     popover: PopoverComponent;
     onCloseFromOutside = new EventEmitter();
-    top: number = -10000;
-    left: number = -10000;
+    top: number = 250;
+    left: number = 300;
     isIn: boolean = false;
-    displayType: string = "none";
+    displayType: string = 'none';
     effectivePlacement: string;
 
-    onDocumentMouseDown = (event: any) => {
-        const element = this.element.nativeElement;
-        if (!element || !this.popover) return;
-        if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return;
-        this.hide();
-        this.onCloseFromOutside.emit(undefined);
-    };
-
+    listenClickFunc: any;
+    listenMouseFunc: any;
 
     constructor(protected element: ElementRef,
                 protected cdr: ChangeDetectorRef,
                 protected renderer: Renderer) {
     }
 
-    listenClickFunc: any;
-    listenMouseFunc: any;
+    onDocumentMouseDown = (event: any) => {
+        const element = this.element.nativeElement;
+        if (!element || !this.popover) { return; }
+        if (element.contains(event.target) || this.popover.getElement().contains(event.target)) { return; }
+        this.hide();
+        this.onCloseFromOutside.emit(undefined);
+    }
 
     ngAfterViewInit(): void {
-        this.buttonsNames = Object.keys(this.buttons);
-        if (this.closeOnClickOutside)
-            this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event));
-        if (this.closeOnMouseOutside)
-            this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event));
+        if ( this.buttons ) {
+            this.buttonsNames = Object.keys(this.buttons);
+        }
+        if (this.closeOnClickOutside) {
+            this.listenClickFunc = this.renderer.listenGlobal('document', 'mousedown', (event: any) => this.onDocumentMouseDown(event));
+        }
+        if (this.closeOnMouseOutside) {
+            this.listenMouseFunc = this.renderer.listenGlobal('document', 'mouseover', (event: any) => this.onDocumentMouseDown(event));
+        }
 
-        this.show();
         this.cdr.detectChanges();
     }
 
     ngOnDestroy() {
-        if (this.closeOnClickOutside)
+        if (this.closeOnClickOutside) {
             this.listenClickFunc();
-        if (this.closeOnMouseOutside)
+        }
+        if (this.closeOnMouseOutside) {
             this.listenMouseFunc();
+        }
     }
 
     // -------------------------------------------------------------------------
@@ -103,11 +107,12 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     // -------------------------------------------------------------------------
 
     show(): void {
-        if (!this.popover || !this.popover.getElement())
+        if (!this.popover || !this.popover.getElement()) {
             return;
+        }
 
         const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
-        this.displayType = "block";
+        this.displayType = 'block';
         this.top = p.top;
         this.left = p.left;
         this.isIn = true;
@@ -121,8 +126,7 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     hideFromPopover() {
-        this.top = -10000;
-        this.left = -10000;
+        this.displayType = 'none';
         this.isIn = true;
     }
 
@@ -131,56 +135,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     // -------------------------------------------------------------------------
 
     protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } {
-        let positionStrParts = positionStr.split("-");
+        const positionStrParts = positionStr.split('-');
         let pos0 = positionStrParts[0];
-        let pos1 = positionStrParts[1] || "center";
-        let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
-        let targetElWidth = targetEl.offsetWidth;
-        let targetElHeight = targetEl.offsetHeight;
+        const pos1 = positionStrParts[1] || 'center';
+        const hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+        const targetElWidth = targetEl.offsetWidth;
+        const targetElHeight = targetEl.offsetHeight;
 
         this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl);
 
-        let shiftWidth: any = {
-            center: function (): number {
+        const shiftWidth: any = {
+            center(): number {
                 return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
             },
-            left: function (): number {
+            left(): number {
                 return hostElPos.left;
             },
-            right: function (): number {
+            right(): number {
                 return hostElPos.left + hostElPos.width - targetElWidth;
             }
         };
 
-        let shiftHeight: any = {
-            center: function (): number {
+        const shiftHeight: any = {
+            center(): number {
                 return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
             },
-            top: function (): number {
+            top(): number {
                 return hostElPos.top;
             },
-            bottom: function (): number {
+            bottom(): number {
                 return hostElPos.top + hostElPos.height - targetElHeight;
             }
         };
 
         let targetElPos: { top: number, left: number };
         switch (pos0) {
-            case "right":
+            case 'right':
                 targetElPos = {
                     top: shiftHeight[pos1](),
                     left: hostElPos.left + hostElPos.width
                 };
                 break;
 
-            case "left":
+            case 'left':
                 targetElPos = {
                     top: shiftHeight[pos1](),
                     left: hostElPos.left - targetElWidth
                 };
                 break;
 
-            case "bottom":
+            case 'bottom':
                 targetElPos = {
                     top: hostElPos.top + hostElPos.height,
                     left: shiftWidth[pos1]()
@@ -228,18 +232,20 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     protected getStyle(nativeEl: HTMLElement, cssProp: string): string {
-        if ((nativeEl as any).currentStyle) // IE
+        if ((nativeEl as any).currentStyle) { // IE
             return (nativeEl as any).currentStyle[cssProp];
+        }
 
-        if (window.getComputedStyle)
+        if (window.getComputedStyle) {
             return (window.getComputedStyle as any)(nativeEl)[cssProp];
+        }
 
         // finally try and get inline style
         return (nativeEl.style as any)[cssProp];
     }
 
     protected isStaticPositioned(nativeEl: HTMLElement): boolean {
-        return (this.getStyle(nativeEl, "position") || "static" ) === "static";
+        return (this.getStyle(nativeEl, 'position') || 'static' ) === 'static';
     }
 
     protected parentOffsetEl(nativeEl: HTMLElement): any {
@@ -251,26 +257,26 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string {
-        const placementParts = placement.split(" ");
-        if (placementParts[0] !== "auto") {
+        const placementParts = placement.split(' ');
+        if (placementParts[0] !== 'auto') {
             return placement;
         }
 
         const hostElBoundingRect = hostElement.getBoundingClientRect();
 
-        const desiredPlacement = placementParts[1] || "bottom";
+        const desiredPlacement = placementParts[1] || 'bottom';
 
-        if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
-            return "bottom";
+        if (desiredPlacement === 'top' && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
+            return 'bottom';
         }
-        if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
-            return "top";
+        if (desiredPlacement === 'bottom' && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
+            return 'top';
         }
-        if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
-            return "right";
+        if (desiredPlacement === 'left' && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
+            return 'right';
         }
-        if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
-            return "left";
+        if (desiredPlacement === 'right' && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
+            return 'left';
         }
 
         return desiredPlacement;
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html
new file mode 100644
index 0000000000..fba99ca8b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html
@@ -0,0 +1,12 @@
+<div class="sdc-element-icon">
+    <svg-icon [ngClass]="{'service-proxy': elementType === 'ServiceProxy'}"
+            [type]="elementIcon.type"
+            [name]="elementIcon.iconName"
+            [mode]="elementIcon.color"
+            [size]="elementIcon.size"
+            [backgroundShape]="elementIcon.shape"
+            [backgroundColor]="elementIcon.backgroundColor"></svg-icon>
+    <span *ngIf="uncertified" class="uncertified-icon-wapper">
+        <svg-icon class="element-non-certified" [name]="'alert-circle'" [mode]="'error'"></svg-icon>
+    </span>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less
new file mode 100644
index 0000000000..7fd5cbd53e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less
@@ -0,0 +1,25 @@
+@import "./../../../../../assets/styles/override";
+.service-proxy {
+  /deep/.svg-icon.bg-type-circle {
+    border: 2px solid @sdcui_color_blue;
+  }
+}
+
+.element-non-certified {
+  position: absolute;
+    top: 0.4px;
+    left: 0.4px;
+}
+.sdc-element-icon {
+  position: relative;
+}
+
+.uncertified-icon-wapper{
+      height: 17px;
+      width: 17px;
+      background-color: white;
+      border-radius: 50%;
+      position: absolute;
+      top: -2px;
+      left: -1px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts
new file mode 100644
index 0000000000..baadbd8e02
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts
@@ -0,0 +1,69 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {ComponentType, SdcElementType, ResourceType} from "../../../../utils/constants";
+
+
+export class ElementIcon {
+    iconName: string;
+    color: string;
+    backgroundColor: string;
+    type: string
+    shape: string;
+    size: string;
+
+    constructor(name?: string, type?:string,  backgroundColor?:string, color?:string, shape?: string, size?:string) {
+        this.iconName = name || 'default';
+        this.type = type || 'resource_24';
+        this.backgroundColor = backgroundColor || 'primary';
+        this.color = color || "white";
+        this.shape = shape || "circle";
+        this.size = size || "x_large";
+    }
+}
+
+@Component({
+    selector: 'sdc-element-icon',
+    templateUrl: './sdc-element-icon.component.html',
+    styleUrls: ['./sdc-element-icon.component.less']
+})
+export class SdcElementIconComponent {
+
+    @Input() iconName: string;
+    @Input() elementType: string;
+    @Input() uncertified: boolean = false;
+
+    public elementIcon;
+
+    private createIconForDisplay = () => {
+        switch (this.elementType) {
+
+            case ComponentType.SERVICE:
+                this.elementIcon = new ElementIcon(this.iconName, "services_24", "lightBlue");
+                break;
+            case ComponentType.SERVICE_PROXY:
+                this.elementIcon = new ElementIcon(this.iconName, "services_24", "white", "primary");
+                break;
+            case ResourceType.CONFIGURATION:
+                this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", "white", 'circle', "medium");
+                break;
+            case SdcElementType.GROUP:
+                this.elementIcon = new ElementIcon("group", "resources_24", "blue", 'white', 'rectangle');
+                break;
+            case SdcElementType.POLICY:
+                this.elementIcon = new ElementIcon("policy", "resources_24", "darkBlue2", 'white', 'rectangle');
+                break;
+            case ResourceType.CP:
+            case ResourceType.VL:
+                this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", '', '', 'medium');
+                break;
+            default:
+                this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple");
+        }
+    }
+
+    ngOnChanges():void {
+        this.createIconForDisplay();
+    }
+}
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
index 8682473d14..1f952c46f5 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
@@ -1,21 +1,5 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<div class="search-bar-container {{class}}">
-    <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
-    <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
-    <button class="search-bar-button" (click)="searchButtonClick()"></button>
+<div class="sdc-search-bar-container {{class}}">
+    <input class="sdc-search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
+    <span class="sdc-clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
+    <button class="sdc-search-bar-button" (click)="searchButtonClick()"></button>
 </div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
index 751fceec35..c09951a284 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
@@ -1,9 +1,9 @@
-.search-bar-container {
+.sdc-search-bar-container {
     display:flex;
     border-radius: 4px;
     box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
 
-    .search-bar-input {
+    .sdc-search-bar-input {
         border: 1px solid #cdcdcd;
         border-radius: 4px;
         border-right:none;
@@ -14,9 +14,11 @@
         color:  #5a5a5a;
         font-size: 1em;
         font-style: italic;
+
+
     }
 
-    .clear-search-x {
+    .sdc-clear-search-x {
         position:absolute;
         right:40px;
         top:5px;
@@ -29,7 +31,7 @@
         }
     }
 
-    .search-bar-button {
+    .sdc-search-bar-button {
         background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px;
         background-color:  rgba(234, 234, 234, 0.88);
         width: 30px;
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
index 82dbbf33d3..da9b2c9e24 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
@@ -14,9 +14,9 @@
   ~ limitations under the License.
   -->
  
-<div class="search-with-autocomplete-container {{searchBarClass}}" [class.autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
+<div class="sdc-search-with-autocomplete-container {{searchBarClass}}" [class.sdc-autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
     <search-bar [placeholder]="searchPlaceholder" [searchQuery]="searchQuery" (searchButtonClicked)="updateSearch($event)" (searchChanged)="searchChange($event)"></search-bar>
-    <div class="autocomplete-results">
-        <div *ngFor="let item of autoCompleteValues" class="autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
+    <div class="sdc-autocomplete-results">
+        <div *ngFor="let item of autoCompleteValues" class="sdc-autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
     </div>
 </div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
index f1830846d3..9cd312adcb 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
@@ -1,13 +1,13 @@
-.search-with-autocomplete-container{
-    &.autocomplete-visible {
+.sdc-search-with-autocomplete-container{
+    &.sdc-autocomplete-visible {
 
-        .search-bar-input {
+        .sdc-search-bar-input {
             border-bottom-left-radius: 0;
         }
-        .search-bar-button {
+        .sdc-search-bar-button {
             border-bottom-right-radius: 0;
         }
-        .autocomplete-results {
+        .sdc-autocomplete-results {
             border: solid 1px #d2d2d2;
             border-top:none;
             border-bottom-left-radius: 4px;
@@ -20,7 +20,7 @@
             overflow-y: scroll;
         }
 
-        .autocomplete-result-item {
+        .sdc-autocomplete-result-item {
             color:#5a5a5a;
             padding: 5px 0;
             cursor:pointer;
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
index f4b410347b..cabac121f7 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
@@ -21,7 +21,7 @@
 import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core';
 import { Tab } from './tab/tab.component';
 import { ViewEncapsulation } from '@angular/core';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
 
 export {Tab};
 
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts
index 55b34400d6..5dec67e495 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts
@@ -3,13 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { TileComponent } from './tile.component';
 import { GlobalPipesModule } from "../../../pipes/global-pipes.module";
 import { TooltipModule } from "../tooltip/tooltip.module";
-import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multiline-ellipsis.module";
+import {SdcUiComponentsModule} from "onap-ui-angular";
 
 
 @NgModule({
-    imports: [BrowserModule, GlobalPipesModule, TooltipModule, MultilineEllipsisModule],
+    imports: [BrowserModule, GlobalPipesModule, SdcUiComponentsModule, TooltipModule],
     declarations: [TileComponent],
     exports: [TileComponent],
     entryComponents: [TileComponent]
 })
-export class TileModule { }
+export class SdcTileModule { }
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
index 018384db1f..239053e9f8 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
@@ -23,15 +23,21 @@
 
     <div class='sdc-tile-content' data-tests-id="dashboard-Elements" (click)="tileClicked()">
         <div class='sdc-tile-content-icon'>
-            <div [ngClass]="[component.iconSprite, component.icon]" [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
+            <div [ngClass]="[component.iconSprite, component.icon]"
+                 [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
                  [attr.data-tests-id]="component.name"></div>
         </div>
 
         <div class='sdc-tile-content-info'>
-            <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName" [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis">
-                <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3" (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}</multiline-ellipsis>
+            <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName"
+                 [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis">
+                <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3"
+                                    (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}
+                </multiline-ellipsis>
+            </div>
+            <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V
+                {{component.version}}
             </div>
-            <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V {{component.version}}</div>
         </div>
     </div>
 
@@ -42,3 +48,32 @@
     </div>
 
 </div>
+
+<!--<sdc-tile>-->
+<!--<sdc-tile-header>-->
+<!--<div [ngClass]="{'blue': component.isService(), 'purple':  component.isResource()}">{{component.isResource() ?-->
+<!--component.getComponentSubType(): 'S' }}-->
+<!--</div>-->
+<!--</sdc-tile-header>-->
+<!--<sdc-tile-content>-->
+<!--<div class='sdc-tile-content-icon blue'>-->
+<!--<svg-icon-->
+<!--[type]="catalogIcon.type"-->
+<!--[name]="catalogIcon.iconName"-->
+<!--[size]="catalogIcon.size"-->
+<!--[mode]="catalogIcon.color"-->
+<!--[backgroundShape]="catalogIcon.shape"-->
+<!--[backgroundColor]="catalogIcon.backgroundColor"-->
+<!--[disabled]="false"-->
+<!--&gt;-->
+<!--</svg-icon>-->
+<!--</div>-->
+<!--<div class="sdc-tile-content-info">-->
+<!--<span class="sdc-tile-info-line title">{{component.name | resourceName}}</span>-->
+<!--<div class="sdc-tile-info-line subtitle">{{'V'+ component.version}}</div>-->
+<!--</div>-->
+<!--</sdc-tile-content>-->
+<!--<sdc-tile-footer>-->
+<!--<span class="sdc-tile-footer-cell">{{component.getStatus(sdcMenu)}}</span>-->
+<!--</sdc-tile-footer>-->
+<!--</sdc-tile>-->
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
index e69de29bb2..febf46e99c 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
@@ -0,0 +1,15 @@
+
+
+//This was done as a fix for the wrong dispaly that was in every ui-tile.
+//All other styles located in mail.less
+
+.sdc-tile {
+  display: block;
+
+  .sdc-tile-content {
+    overflow: visible;
+    height: 80%;
+    .sdc-tile-content-icon {
+    }
+  }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
index b6f63584be..f5d9e88934 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -1,6 +1,8 @@
 import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
 import {Component as ComponentModel} from 'app/models';
 import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
+import {ElementIcon} from "../sdc-element-icon/sdc-element-icon.component";
+import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/constants";
 
 @Component({
     selector: 'ui-tile',
@@ -10,14 +12,42 @@ import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
 export class TileComponent {
     @Input() public component: ComponentModel;
     @Output() public onTileClick: EventEmitter<ComponentModel>;
-
+    public catalogIcon: ElementIcon;
     public hasEllipsis: boolean;
 
-    constructor(@Inject(SdcMenuToken) public sdcMenu:IAppMenu) {
+    constructor(@Inject(SdcMenuToken) public sdcMenu: IAppMenu) {
         this.onTileClick = new EventEmitter<ComponentModel>();
         this.hasEllipsis = false;
     }
 
+    ngOnInit(): void {
+        switch (this.component.componentType) {
+
+            case ComponentType.SERVICE:
+                if (this.component.icon === 'defaulticon') {
+                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", 'lightBlue', 'white');
+                } else {
+                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", '', 'lightBlue');
+                }
+                break;
+            case ComponentType.RESOURCE:
+                switch (this.component.getComponentSubType()) {
+                    case ResourceType.CP:
+                    case ResourceType.VL:
+                        this.catalogIcon = new ElementIcon(this.component.icon, "resources_24", "purple", "white", "circle", 'medium');
+                        break;
+                    default:
+                        if (this.component.icon === 'defaulticon') {
+                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", "purple", "white", "circle", 'x_large');
+                        } else {
+                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", '', "error");
+                        }
+
+                }
+
+        }
+    }
+
     public tileClicked() {
         this.onTileClick.emit(this.component);
     }
diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
index e905db73a6..cdb173cb12 100644
--- a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
@@ -18,82 +18,89 @@
  * ============LICENSE_END=========================================================
  */
 
-import { NgModule } from '@angular/core';
-import { NavbarModule } from "./navbar/navbar.module";
-import { DynamicElementModule } from "./dynamic-element/dynamic-element.module";
-import { FormElementsModule } from "./form-components/form-elements.module";
-import { LoaderComponent } from "./loader/loader.component";
-import { ModalModule } from "./modal/modal.module";
-import { PopoverModule } from "./popover/popover.module";
-import { SearchBarComponent } from "./search-bar/search-bar.component";
-import { SearchWithAutoCompleteComponent } from "./search-with-autocomplete/search-with-autocomplete.component";
-import { PalettePopupPanelComponent } from "./palette-popup-panel/palette-popup-panel.component";
-import { ZoneContainerComponent } from "./canvas-zone/zone-container.component";
-import { ZoneInstanceComponent } from "./canvas-zone/zone-instance/zone-instance.component";
-import { PaletteAnimationComponent } from "./palette-animation/palette-animation.component"
-import { TabModule } from "./tabs/tabs.module";
-import { TooltipModule } from "./tooltip/tooltip.module";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-import { BrowserModule } from "@angular/platform-browser";
-import { MultiStepsWizardModule } from "./multi-steps-wizard/multi-steps-wizard.module";
-import { MenuListModule } from "./menu/menu-list.module";
-import { MenuListNg2Module } from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
-import { ExpandCollapseComponent } from './expand-collapse/expand-collapse.component';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { TileModule } from "./tile/tile.module";
+import {NgModule} from '@angular/core';
+import {NavbarModule} from "./navbar/navbar.module";
+import {DynamicElementModule} from "./dynamic-element/dynamic-element.module";
+import {FormElementsModule} from "./form-components/form-elements.module";
+import {LoaderComponent} from "./loader/loader.component";
+import {ModalModule} from "./modal/modal.module";
+import {PopoverModule} from "./popover/popover.module";
+import {SearchBarComponent} from "./search-bar/search-bar.component";
+import {SearchWithAutoCompleteComponent} from "./search-with-autocomplete/search-with-autocomplete.component";
+import { PaletteAnimationComponent } from "app/ng2/pages/composition/palette/palette-animation/palette-animation.component";
+import {TabModule} from "./tabs/tabs.module";
+import {TooltipModule} from "./tooltip/tooltip.module";
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+import {BrowserModule} from "@angular/platform-browser";
+import {MultiStepsWizardModule} from "./multi-steps-wizard/multi-steps-wizard.module";
+import {MenuListModule} from "./menu/menu-list.module";
+import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
+import {ExpandCollapseComponent} from './expand-collapse/expand-collapse.component';
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {SdcTileModule} from "./tile/sdc-tile.module";
+import {PerfectScrollbarDirective} from "./perfect-scroll-bar/perfect-scrollbar.directive";
+import {FileOpenerComponent} from "./file-opener/file-opener.component";
+import {DownloadArtifactComponent} from "app/ng2/components/ui/download-artifact/download-artifact.component";
+import {SdcElementIconComponent} from "./sdc-element-icon/sdc-element-icon.component";
+import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
 
 @NgModule({
-  declarations: [
-    LoaderComponent,
-    SearchBarComponent,
-    SearchWithAutoCompleteComponent,
-    PalettePopupPanelComponent,
-    ZoneContainerComponent,
-    ZoneInstanceComponent,
-    PaletteAnimationComponent,
-    ExpandCollapseComponent
-],
-  
-  imports: [
-    SdcUiComponentsModule,
-    BrowserModule,
-    FormsModule,
-    CommonModule,
-    DynamicElementModule,
-    NavbarModule,
-    FormElementsModule,
-    ModalModule,
-    PopoverModule,
-    TabModule,
-    TooltipModule,
-    MultiStepsWizardModule,
-    MenuListModule,
-    MenuListNg2Module,
-    TileModule
-  ],
-  exports: [
-    LoaderComponent,
-    MultiStepsWizardModule,
-    SearchBarComponent,
-    SearchWithAutoCompleteComponent,
-    PalettePopupPanelComponent,
-    ZoneContainerComponent,
-    ZoneInstanceComponent,
-    DynamicElementModule,
-    NavbarModule,
-    FormElementsModule,
-    ModalModule,
-    PopoverModule,
-    TabModule,
-    TooltipModule,
-    MenuListModule,
-    MenuListNg2Module,
-    PaletteAnimationComponent,
-    ExpandCollapseComponent,
-    TileModule
-  ],
-  entryComponents: [SearchWithAutoCompleteComponent, PalettePopupPanelComponent, ZoneContainerComponent, ZoneInstanceComponent, PaletteAnimationComponent]
+    declarations: [
+        LoaderComponent,
+        SearchBarComponent,
+        SearchWithAutoCompleteComponent,
+        PaletteAnimationComponent,
+        ExpandCollapseComponent,
+        PerfectScrollbarDirective,
+        FileOpenerComponent,
+        SdcElementIconComponent,
+        DownloadArtifactComponent,
+        PanelWrapperComponent
+    ],
+
+    imports: [
+        SdcUiComponentsModule,
+        BrowserModule,
+        FormsModule,
+        CommonModule,
+        DynamicElementModule,
+        NavbarModule,
+        FormElementsModule,
+        ModalModule,
+        PopoverModule,
+        TabModule,
+        TooltipModule,
+        MultiStepsWizardModule,
+        MenuListModule,
+        MenuListNg2Module,
+        SdcTileModule
+    ],
+    exports: [
+        LoaderComponent,
+        MultiStepsWizardModule,
+        SearchBarComponent,
+        SearchWithAutoCompleteComponent,
+        DynamicElementModule,
+        NavbarModule,
+        FormElementsModule,
+        ModalModule,
+        PopoverModule,
+        TabModule,
+        TooltipModule,
+        MenuListModule,
+        MenuListNg2Module,
+        PaletteAnimationComponent,
+        ExpandCollapseComponent,
+        SdcTileModule,
+        PerfectScrollbarDirective,
+        SdcElementIconComponent,
+        FileOpenerComponent,
+        DownloadArtifactComponent,
+        PanelWrapperComponent
+    ],
+    entryComponents: [SearchWithAutoCompleteComponent, SdcElementIconComponent, PaletteAnimationComponent]
 })
 
-export class UiElementsModule {}
+export class UiElementsModule {
+}
diff --git a/catalog-ui/src/app/ng2/config/sdc-config.config.ts b/catalog-ui/src/app/ng2/config/sdc-config.config.ts
index b10a87882f..76e81b2333 100644
--- a/catalog-ui/src/app/ng2/config/sdc-config.config.ts
+++ b/catalog-ui/src/app/ng2/config/sdc-config.config.ts
@@ -13,13 +13,12 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -- */
-
-  import {Provider, OpaqueToken} from "@angular/core";
+import {Provider, InjectionToken} from "@angular/core";
 import {getSdcConfig, ISdcConfig} from "./sdc-config.config.factory";
 
 export { ISdcConfig };
 
-export const SdcConfigToken = new OpaqueToken('SdcConfigToken');
+export const SdcConfigToken = new InjectionToken('SdcConfigToken');
 
 export const SdcConfig:Provider = {
     provide: SdcConfigToken,
diff --git a/catalog-ui/src/app/ng2/config/sdc-menu.config.ts b/catalog-ui/src/app/ng2/config/sdc-menu.config.ts
index 44c2d288b5..9dd83e52ea 100644
--- a/catalog-ui/src/app/ng2/config/sdc-menu.config.ts
+++ b/catalog-ui/src/app/ng2/config/sdc-menu.config.ts
@@ -15,13 +15,13 @@
   -- */
   
 
-import {Provider, OpaqueToken} from "@angular/core";
+import {Provider, InjectionToken} from "@angular/core";
 import {getSdcMenu} from "./sdc-menu.config.factory";
 import {IAppMenu} from "app/models";
 
 export { IAppMenu };
 
-export const SdcMenuToken = new OpaqueToken('SdcMenuToken');
+export const SdcMenuToken = new InjectionToken('SdcMenuToken');
 
 export const SdcMenu:Provider = {
     provide: SdcMenuToken,
diff --git a/catalog-ui/src/app/ng2/http-interceptor/headers-interceptor.ts b/catalog-ui/src/app/ng2/http-interceptor/headers-interceptor.ts
new file mode 100644
index 0000000000..00e2fd8fcd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/http-interceptor/headers-interceptor.ts
@@ -0,0 +1,61 @@
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Injectable, Injector } from '@angular/core';
+import { SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { ButtonType } from 'onap-ui-angular/dist/common';
+import { Observable } from 'rxjs/Observable';
+import { ServerErrorResponse } from '../../models/server-error-response';
+import { Cookie2Service } from '../services/cookie.service';
+import { HttpHelperService } from '../services/http-hepler.service';
+import { TranslateService } from '../shared/translator/translate.service';
+
+@Injectable()
+export class HeadersInterceptor implements HttpInterceptor {
+
+    constructor(private injector: Injector, private cookieService: Cookie2Service, private httpHelperService: HttpHelperService) {}
+
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        let authReq = req.clone({ headers: req.headers.set(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId())
+            .set('Content-Type', 'application/json; charset=UTF-8')
+            .set(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId())
+            .set(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId())
+        });
+
+        const uuidValue = this.httpHelperService.getUuidValue(authReq.url);
+        if (uuidValue !== '') {
+            authReq = authReq.clone({ headers: authReq.headers.set(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId())});
+        }
+        return next.handle(authReq).do(
+
+            (event: HttpEvent<any>) => { /* Do Nothing */ },
+
+            (err: any) => {
+                if (err instanceof HttpErrorResponse) {
+                    const errorResponse: ServerErrorResponse = new ServerErrorResponse(err);
+                    const modalService = this.injector.get(SdcUiServices.ModalService);
+                    const translateService = this.injector.get(TranslateService);
+
+                    const errorDetails = {
+                        'Error Code': errorResponse.messageId,
+                        'Status Code': errorResponse.status
+                    };
+
+                    if (errorResponse.ecompRequestId) {
+                        errorDetails['Transaction ID'] = errorResponse.ecompRequestId;
+                    }
+
+                    if (errorResponse.messageId === 'POL5005') {
+                        // Session and Role expiration special handling
+                        modalService.openWarningModal(
+                            'Warning',
+                            translateService.translate('ERROR_MODAL_TEXT', errorResponse),
+                            'warn-modal',
+                            [ ] );
+                    } else {
+                        modalService.openErrorDetailModal('Error', errorResponse.message, 'error-modal', errorDetails);
+                    }
+
+                    return Observable.throwError(err);
+                }
+            });
+    }
+}
diff --git a/catalog-ui/src/app/ng2/http-interceptor/index.ts b/catalog-ui/src/app/ng2/http-interceptor/index.ts
new file mode 100644
index 0000000000..57eb238890
--- /dev/null
+++ b/catalog-ui/src/app/ng2/http-interceptor/index.ts
@@ -0,0 +1,7 @@
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HeadersInterceptor } from './headers-interceptor';
+import IStateService = angular.ui.IStateService;
+
+export const httpInterceptorProviders = [
+    { provide: HTTP_INTERCEPTORS, useClass: HeadersInterceptor, multi: true },
+];
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-models/ui-component-to-upgrade.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-models/ui-component-to-upgrade.ts
index 97fb71e210..17e5ea7ef1 100644
--- a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-models/ui-component-to-upgrade.ts
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-models/ui-component-to-upgrade.ts
@@ -21,7 +21,7 @@ export class ServiceContainerToUpgradeUiObject extends UiBaseObject {
         this.icon = componentToUpgrade.icon;
         this.version = componentToUpgrade.version;
         this.isAlreadyUpgrade = true;
-        this.isLock = componentToUpgrade.state === ComponentState.CERTIFICATION_IN_PROGRESS || componentToUpgrade.state === ComponentState.NOT_CERTIFIED_CHECKOUT;
+        this.isLock = componentToUpgrade.state === ComponentState.NOT_CERTIFIED_CHECKOUT;
         this.vspInstances = [];
     }
 
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.html b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.html
index f77c3410a6..c1e9529869 100644
--- a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.html
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
 <div class="components-to-upgrade-list-item">
     <div class="component-to-upgrade-data">
         <div class="component-to-upgrade-icon small sprite-services-icons {{upgradedComponent.icon}}"></div>
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.html b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.html
index b97e41444c..5c49735a81 100644
--- a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.html
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.html
@@ -13,8 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
- 
 <div class="components-to-upgrade-list-item ">
     <div class="component-to-upgrade-data">
         <sdc-checkbox class="component-to-upgrade-checkbox"
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.ts
index 9ae73497ef..613caa4b8d 100644
--- a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.ts
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.ts
@@ -29,8 +29,7 @@ import {AutomatedUpgradeService} from "./automated-upgrade.service";
 @Component({
     selector: 'upgrade-vsp',
     templateUrl: './automated-upgrade.component.html',
-    styleUrls: ['./automated-upgrade.component.less'],
-    providers: [TranslateService]
+    styleUrls: ['./automated-upgrade.component.less']
 })
 export class AutomatedUpgradeComponent {
 
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.module.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.module.ts
index 19f6412071..8a4e8fb660 100644
--- a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.module.ts
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.module.ts
@@ -2,16 +2,15 @@
  * Created by ob0695 on 4/18/2018.
  */
 import { NgModule } from "@angular/core";
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
-import {CommonModule} from "@angular/common";
-import {AutomatedUpgradeStatusComponent} from "./automated-upgrade-status/automated-upgrade-status.component";
-import {AutomatedUpgradeComponent} from "./automated-upgrade.component";
-import {UpgradeListItemComponent} from "./automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component";
-import {UpgradeListItemStatusComponent} from "./automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component";
-import {TranslateService} from "../../shared/translator/translate.service";
-import {UpgradeListItemInnerContent} from "./automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component";
-import {UpgradeLineItemComponent} from "./automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component";
-import {UpgradeListItemOrderPipe} from "./automated-upgrade-ui-components/list-item-order-pipe/list-item-order-pipe";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { CommonModule } from "@angular/common";
+import { AutomatedUpgradeStatusComponent } from "./automated-upgrade-status/automated-upgrade-status.component";
+import { AutomatedUpgradeComponent } from "./automated-upgrade.component";
+import { UpgradeListItemComponent } from "./automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component";
+import { UpgradeListItemStatusComponent } from "./automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component";
+import { UpgradeListItemInnerContent } from "./automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component";
+import { UpgradeLineItemComponent } from "./automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component";
+import { UpgradeListItemOrderPipe } from "./automated-upgrade-ui-components/list-item-order-pipe/list-item-order-pipe";
 
 @NgModule({
     declarations: [
@@ -27,8 +26,7 @@ import {UpgradeListItemOrderPipe} from "./automated-upgrade-ui-components/list-i
     exports: [],
     entryComponents: [
         AutomatedUpgradeComponent, AutomatedUpgradeStatusComponent
-    ],
-    providers: [TranslateService]
+    ]
 })
 export class AutomatedUpgradeModule {
 }   
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.service.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.service.ts
index 0acfececaa..14ca7f0947 100644
--- a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.service.ts
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.service.ts
@@ -1,19 +1,15 @@
-import {SdcUiComponents} from "sdc-ui/lib/angular";
-import {Injectable, Inject} from "@angular/core";
-import {IModalConfig} from "sdc-ui/lib/angular/modals/models/modal-config";
-import {AutomatedUpgradeComponent} from "./automated-upgrade.component";
-import {Component} from "../../../models/components/component";
-import {ComponentServiceNg2} from "../../services/component-services/component.service";
-import {GeneralStatus, ComponentType} from "../../../utils/constants";
-import {IDependenciesServerResponse} from "../../services/responses/dependencies-server-response";
-import {AutomatedUpgradeStatusComponent} from "./automated-upgrade-status/automated-upgrade-status.component";
-import {AutomatedUpgradeStatusResponse} from "../../services/responses/automated-upgrade-response";
+import { SdcUiComponents, SdcUiCommon, SdcUiServices } from "onap-ui-angular";
+import { Injectable, ComponentRef } from "@angular/core";
+import { AutomatedUpgradeComponent } from "./automated-upgrade.component";
+import { Component } from "../../../models/components/component";
+import { ComponentServiceNg2 } from "../../services/component-services/component.service";
+import { GeneralStatus, ComponentType } from "../../../utils/constants";
+import { IDependenciesServerResponse } from "../../services/responses/dependencies-server-response";
+import { AutomatedUpgradeStatusComponent } from "./automated-upgrade-status/automated-upgrade-status.component";
+import { AutomatedUpgradeStatusResponse } from "../../services/responses/automated-upgrade-response";
+import { TranslateService, ITranslateArgs } from "../../shared/translator/translate.service";
+import { ServiceContainerToUpgradeUiObject, AllottedResourceInstanceUiObject, VspInstanceUiObject } from "./automated-upgrade-models/ui-component-to-upgrade";
 import Dictionary = _.Dictionary;
-import {TranslateService, ITranslateArgs} from "../../shared/translator/translate.service";
-import {
-    ServiceContainerToUpgradeUiObject,
-    AllottedResourceInstanceUiObject, VspInstanceUiObject
-} from "./automated-upgrade-models/ui-component-to-upgrade";
 
 export interface IAutomatedUpgradeRequestObj {
     serviceId:string;
@@ -30,8 +26,9 @@ export class AutomatedUpgradeService {
     private vspComponent:Component;
     private uiComponentsToUpgrade:Array<ServiceContainerToUpgradeUiObject>;
     private componentType:string;
+    private modalInstance: ComponentRef<SdcUiComponents.ModalComponent>;
 
-    constructor(private modalService:SdcUiComponents.ModalService,
+    constructor(private modalService:SdcUiServices.ModalService,
                 private componentService:ComponentServiceNg2,
                 private translateService:TranslateService) {
     }
@@ -69,21 +66,21 @@ export class AutomatedUpgradeService {
     }
 
     private disabledAllModalButtons = ():void => {
-        this.modalService.getCurrentInstance().innerModalContent.instance.disabled = true;
-        this.modalService.getCurrentInstance().buttons[0].show_spinner = true;
-        this.modalService.getCurrentInstance().buttons[1].disabled = true;
+        this.modalInstance.instance.innerModalContent.instance.disabled = true;
+        this.modalInstance.instance.buttons[0].show_spinner = true;
+        this.modalInstance.instance.buttons[1].disabled = true;
     }
 
     public changeUpgradeButtonState = (isDisabled:boolean):void => {
-        if (this.modalService.getCurrentInstance().buttons[0].disabled !== isDisabled) {
-            this.modalService.getCurrentInstance().buttons[0].disabled = isDisabled;
+        if (this.modalInstance.instance.buttons[0].disabled !== isDisabled) {
+            this.modalInstance.instance.buttons[0].disabled = isDisabled;
         }
     }
 
     //TODO We will need to replace this function after sdc-ui modal new design, this is just a workaround
     public automatedUpgrade = ():void => {
 
-        let selectedServices = this.modalService.getCurrentInstance().innerModalContent.instance.selectedComponentsToUpgrade;
+        let selectedServices = this.modalInstance.instance.innerModalContent.instance.selectedComponentsToUpgrade;
         this.disabledAllModalButtons();
         this.componentService.automatedUpgrade(this.vspComponent.componentType, this.vspComponent.uniqueId, this.convertToServerRequest(selectedServices)).subscribe((automatedUpgradeStatus:any) => {
 
@@ -105,11 +102,11 @@ export class AutomatedUpgradeService {
                 });
 
                 let statusModalTitle = this.getTextByComponentType("_UPGRADE_STATUS_TITLE");
-                this.modalService.getCurrentInstance().setTitle(statusModalTitle);
-                this.modalService.getCurrentInstance().getButtons().splice(0, 1); // Remove the upgrade button
-                this.modalService.getCurrentInstance().buttons[0].disabled = false; // enable close again
-                this.modalService.getCurrentInstance().innerModalContent.destroy();
-                this.modalService.createInnnerComponent(AutomatedUpgradeStatusComponent, {
+                this.modalInstance.instance.setTitle(statusModalTitle);
+                this.modalInstance.instance.getButtons().splice(0, 1); // Remove the upgrade button
+                this.modalInstance.instance.buttons[0].disabled = false; // enable close again
+                this.modalInstance.instance.innerModalContent.destroy();
+                this.modalService.createInnnerComponent(this.modalInstance, AutomatedUpgradeStatusComponent, {
                     upgradedComponentsList: upgradedComponent,
                     upgradeStatusMap: statusMap,
                     statusText: this.getStatusText(statusMap)
@@ -250,10 +247,10 @@ export class AutomatedUpgradeService {
         let modalTitle = this.getTextByComponentType("_UPGRADE_TITLE");
         let certificationText = isAfterCertification ? this.getTextByComponentType("_CERTIFICATION_STATUS_TEXT", {resourceName: this.vspComponent.name}) : undefined;
 
-        let upgradeVspModalConfig:IModalConfig = {
+        let upgradeVspModalConfig = {
             title: modalTitle,
             size: "md",
-            type: "custom",
+            type: SdcUiCommon.ModalType.custom,
             testId: "upgradeVspModal",
             buttons: [
                 {
@@ -266,10 +263,11 @@ export class AutomatedUpgradeService {
 
                 },
                 {text: 'CLOSE', size: 'sm', closeModal: true, type: 'secondary'}
-            ]
-        };
+            ] as SdcUiCommon.IModalButtonComponent[]
+        } as SdcUiCommon.IModalConfig;
 
-        this.modalService.openCustomModal(upgradeVspModalConfig, AutomatedUpgradeComponent, {
+        this.modalInstance = this.modalService.openModal(upgradeVspModalConfig);
+        this.modalService.createInnnerComponent(this.modalInstance, AutomatedUpgradeComponent, {
             componentsToUpgrade: this.uiComponentsToUpgrade,
             informationText: informationalText,
             certificationStatusText: certificationText
diff --git a/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap
new file mode 100644
index 0000000000..d6091cd599
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap
@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`catalog component should match current snapshot of catalog component 1`] = `
+<catalog
+  $state={[Function Object]}
+  cacheService={[Function Object]}
+  catalogService={[Function Object]}
+  componentShouldReload={[Function Function]}
+  defaultFilterParams={[Function Object]}
+  getTestIdForCheckboxByText={[Function Function]}
+  initCatalogData={[Function Function]}
+  initLeftSwitch={[Function Function]}
+  initScopeMembers={[Function Function]}
+  isDefaultFilter={[Function Function]}
+  loaderService={[Function Object]}
+  resourceNamePipe={[Function Object]}
+  sdcConfig={[Function Object]}
+  sdcMenu={[Function Object]}
+  updateCatalogItems={[Function Function]}
+>
+  <div
+    class="sdc-catalog-container"
+  >
+    <div
+      class="w-sdc-main-container"
+    >
+      <div
+        class="i-sdc-designer-leftbar-section-left-switch-header"
+      >
+        <div
+          class="i-sdc-designer-leftbar-section-left-switch-header-text"
+        >
+           
+        </div>
+        <div
+          class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small"
+        >
+           
+        </div>
+        
+      </div>
+      <div
+        class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar"
+        perfectscrollbar=""
+      >
+        <div
+          class="sdc-catalog-leftbar-container"
+        >
+          <div
+            class="sdc-catalog-type-filter-container"
+          >
+            <div
+              class="i-sdc-designer-leftbar-section-title pointer"
+            >
+              <span
+                class="i-sdc-designer-leftbar-section-title-icon"
+              />
+              <span
+                class="i-sdc-designer-leftbar-section-title-text"
+                data-tests-id="typeFilterTitle"
+              >
+                Type
+              </span>
+            </div>
+            <div
+              class="i-sdc-designer-leftbar-section-content"
+            >
+              <sdc-checklist />
+            </div>
+          </div>
+          <div
+            class="sdc-catalog-categories-filter-container"
+          >
+            <div
+              class="i-sdc-designer-leftbar-section-title pointer"
+            >
+              <span
+                class="i-sdc-designer-leftbar-section-title-icon"
+              />
+              <span
+                class="i-sdc-designer-leftbar-section-title-text"
+                data-tests-id="categoriesFilterTitle"
+              >
+                Categories
+              </span>
+            </div>
+            <div
+              class="i-sdc-designer-leftbar-section-content"
+            >
+              <sdc-checklist />
+            </div>
+          </div>
+          <div
+            class="sdc-catalog-status-filter-container"
+          >
+            <div
+              class="i-sdc-designer-leftbar-section-title pointer"
+            >
+              <span
+                class="i-sdc-designer-leftbar-section-title-icon"
+              />
+              <span
+                class="i-sdc-designer-leftbar-section-title-text"
+                data-tests-id="statusFilterTitle"
+              >
+                Status
+              </span>
+            </div>
+            <div
+              class="i-sdc-designer-leftbar-section-content"
+            >
+              <sdc-checklist />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="w-sdc-main-right-container w-sdc-catalog-main"
+        infinitescroll=""
+      >
+        <div
+          class="catalog-top-bar"
+        >
+          <div
+            class="w-sdc-dashboard-catalog-items-header"
+          />
+          <div
+            class="catalog-top-right-bar"
+          >
+            <span
+              class="w-sdc-dashboard-catalog-header-order1"
+            >
+              
+            </span>
+               
+            <a
+              class="w-sdc-dashboard-catalog-sort"
+              data-tests-id="sort-by-last-update"
+            >
+              
+            </a>
+              
+            
+            <a
+              class="w-sdc-dashboard-catalog-sort"
+              data-tests-id="sort-by-alphabetical"
+            >
+              
+            </a>
+              
+            
+          </div>
+        </div>
+        <div
+          class="catalog-elements-list"
+        >
+          
+        </div>
+      </div>
+    </div>
+    <top-nav />
+  </div>
+</catalog>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html
new file mode 100644
index 0000000000..4a13bee973
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html
@@ -0,0 +1,101 @@
+<div class="sdc-catalog-container">
+    <div class="w-sdc-main-container">
+        <div class="i-sdc-designer-leftbar-section-left-switch-header"
+             (click)="showCatalogSelector=!showCatalogSelector">
+            <div class="i-sdc-designer-leftbar-section-left-switch-header-text">
+                {{selectedCatalogItem.title}}
+            </div>
+            <div class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small">&nbsp;</div>
+
+            <div class="sdc-catalog-selector-wrapper" *ngIf="showCatalogSelector">
+                <div class="sdc-catalog-selector-item"
+                     *ngFor="let leftSwitchItem of catalogSelectorItems"
+                     (click)="selectLeftSwitchItem(leftSwitchItem)">
+                    <span>{{leftSwitchItem.title}}</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- LEFT SIDE -->
+        <div perfectScrollbar class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar">
+            <div class="sdc-catalog-leftbar-container">
+                <div class="sdc-catalog-type-filter-container">
+                    <div class="i-sdc-designer-leftbar-section-title pointer"
+                         (click)="sectionClick('type')"
+                         [ngClass]="{'expanded': expandedSection.indexOf('type') !== -1}">
+                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
+                        <span class="i-sdc-designer-leftbar-section-title-text"
+                              data-tests-id="typeFilterTitle">Type</span>
+                    </div>
+                    <div class="i-sdc-designer-leftbar-section-content">
+                        <sdc-checklist [checklistModel]="typesChecklistModel" [testId]="'checklist-type'"
+                                       (checkedChange)="gui.onComponentTypeClick()"></sdc-checklist>
+                    </div>
+                </div>
+
+                <div class="sdc-catalog-categories-filter-container">
+                    <div class="i-sdc-designer-leftbar-section-title pointer" (click)="sectionClick('category')"
+                         [ngClass]="{'expanded': expandedSection.indexOf('category') !== -1}">
+                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
+                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span>
+                    </div>
+                    <div class="i-sdc-designer-leftbar-section-content">
+                        <sdc-checklist [checklistModel]="categoriesChecklistModel" [testId]="'checklist-category'"
+                                       (checkedChange)="gui.onCategoryClick()"></sdc-checklist>
+                    </div>
+                </div>
+
+                <!-- STATUS -->
+                <div class="sdc-catalog-status-filter-container">
+                    <div class="i-sdc-designer-leftbar-section-title pointer" (click)="sectionClick('status')"
+                         [ngClass]="{'expanded': expandedSection.indexOf('status') !== -1}">
+                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
+                        <span class="i-sdc-designer-leftbar-section-title-text"
+                              data-tests-id="statusFilterTitle">Status</span>
+                    </div>
+
+                    <div class="i-sdc-designer-leftbar-section-content">
+                        <sdc-checklist [checklistModel]="statusChecklistModel" [testId]="'checklist-status'"
+                                       (checkedChange)="gui.onStatusClick()"></sdc-checklist>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <!-- RIGHT SIDE -->
+        <div class="w-sdc-main-right-container w-sdc-catalog-main" infiniteScroll
+             (infiniteScroll)="raiseNumberOfElementToDisplay()" [infiniteScrollDistance]="100">
+                <!-- HEADER -->
+                <div class="catalog-top-bar">
+                    <div class="w-sdc-dashboard-catalog-items-header"
+                         [innerHTML]="getNumOfElements(catalogFilteredItems.length)">
+
+                    </div>
+                    <div class="catalog-top-right-bar">
+                        <span class="w-sdc-dashboard-catalog-header-order1">{{'SORT_CAPTION'|translate}}</span>&nbsp;&nbsp;
+                        <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update"
+                           [ngClass]="{'blue' : sortBy==='lastUpdateDate'}"
+                           (click)="order('lastUpdateDate')">{{'SORT_BY_UPDATE_DATE'|translate}}</a>&nbsp;
+                        <span *ngIf="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow"
+                              [ngClass]="{'down': reverse, 'up':!reverse}"></span>
+                        <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical"
+                           [ngClass]="{'blue' : sortBy!=='lastUpdateDate'}"
+                           (click)="order('resourceName')">{{'SORT_ALPHABETICAL'|translate}}</a>&nbsp;
+                        <span *ngIf="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow"
+                              [ngClass]="{'down': reverse, 'up':!reverse}"></span>
+                    </div>
+                </div>
+
+                <div class='catalog-elements-list'>
+                    <!-- Tile new -->
+                    <ui-tile *ngFor="let component of catalogFilteredSlicedItems"
+                             [component]="component" (onTileClick)="goToComponent(component)"></ui-tile>
+                    <!-- Tile new -->
+                </div>
+        </div>
+    </div>
+
+    <top-nav [topLvlSelectedIndex]="1" [searchTerm]="search.filterTerm"
+             (searchTermChange)="gui.changeFilterTerm($event)" [version]="version"></top-nav>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less
new file mode 100644
index 0000000000..036db8d94d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less
@@ -0,0 +1,113 @@
+@import '../../../../assets/styles/variables';
+@import '../../../../assets/styles/mixins';
+
+.w-sdc-catalog-main {
+  height: 100%;
+  overflow-y: scroll;
+  padding: 10px 50px;
+
+  .catalog-top-bar {
+    display: flex;
+    justify-content:space-between;
+    padding: 0px 10px;
+  }
+
+  .catalog-elements-list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+
+}
+
+
+.i-sdc-designer-left-sidebar {
+  margin-top: 43px;
+}
+
+.sdc-catalog-selector-item {
+  text-transform: none;
+  line-height: 40px;
+  font-family: OpenSans-Bold, sans-serif;
+  font-size: 14px;
+  color: #000000;
+  background-color: #ffffff;
+  padding-left: 20px;
+}
+
+.sdc-catalog-selector-wrapper {
+  position: absolute;
+  left: 0px;
+  top: 42px;
+  width: 241px;
+  height: auto;
+  cursor: pointer;
+  opacity: 1;
+  z-index: 1000;
+  box-shadow: 1px 2px 3px #b1b1b1;
+}
+
+.sdc-catalog-selector-item {
+  text-transform: none;
+  line-height: 40px;
+  font-family: OpenSans-Bold, sans-serif;
+  font-size: 14px;
+  color: @main_color_l;
+  background-color: @main_color_p;
+  padding-left: 20px;
+}
+
+.sdc-catalog-selector-item:hover {
+  color: @main_color_a;
+  background-color: @tlv_color_v;
+}
+
+.i-sdc-designer-leftbar-section-left-switch-header {
+  text-transform: uppercase;
+  .l_14_m;
+  line-height: 40px;
+  width: 243px;
+
+  font-family: OpenSans-Bold, sans-serif;
+  font-size: 14px;
+
+  color:  @main_color_a;
+  background-color: @tlv_color_t;
+  border: solid 1px fade(@main_color_t, 40%);
+  cursor: pointer;
+  opacity: 1;
+  z-index: 9999;
+  position: relative;
+}
+
+.i-sdc-designer-leftbar-section-left-switch-header-text {
+  display: inline-block;
+  width: 180px;
+  margin-left: 20px;
+}
+
+.i-sdc-designer-leftbar-section-left-switch-header-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.w-sdc-dashboard-catalog-items-header {
+  color: @main_color_m;
+  font-family: OpenSans-Regular, sans-serif;
+  font-size: 12px;
+  display: inline-block;
+  font-style: normal; size: 12px;
+  margin-left: 11px;
+  font-weight: normal;
+  b {
+    font-family: OpenSans-Bold, sans-serif;
+    color: @main_color_l;
+    font-weight: bold;
+  }
+}
+
+.w-sdc-dashboard-catalog-header-order1 {
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 800;
+}
diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts
new file mode 100644
index 0000000000..ff27ec77fd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts
@@ -0,0 +1,649 @@
+
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import {ConfigureFn, configureTests} from "../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import { CacheService} from "../../../../app/services-ng2";
+import {CatalogComponent} from "./catalog.component";
+import {  SdcUiServices } from "onap-ui-angular";
+import { SdcConfigToken } from "../../config/sdc-config.config";
+import { SdcMenuToken} from "../../config/sdc-menu.config";
+import { ResourceNamePipe } from "../../pipes/resource-name.pipe";
+import { CatalogService } from "../../services/catalog.service";
+import {TranslatePipe} from "../../shared/translator/translate.pipe";
+import {TranslateService} from "../../shared/translator/translate.service";
+import {Observable} from "rxjs";
+import {LoaderService} from "onap-ui-angular/dist/loader/loader.service";
+import {categoriesElements} from "../../../../jest/mocks/categories.mock";
+import {sdcMenu} from "../../../../jest/mocks/sdc-menu.mock";
+import {IEntityFilterObject} from "../../pipes/entity-filter.pipe";
+
+
+
+
+
+describe('catalog component', () => {
+
+    let fixture: ComponentFixture<CatalogComponent>;
+
+    //Data variables
+    let catalogSelectorItemsMock;
+    let checkListModelMock;
+    let filterParamsMock;
+    let checkboxesFilterMock;
+    let checkboxesFilterKeysMock;
+
+
+    //Service variables
+    let stateServiceMock;
+    let cacheServiceMock: Partial<CacheService>;
+    let loaderServiceMock: Partial<LoaderService>;
+    let catalogServiceMock: Partial<CatalogService>;
+
+
+    beforeEach(
+
+        async(() => {
+            console.info = jest.fn();
+            catalogSelectorItemsMock = [
+                {
+                    value: 0,
+                    title: 'Active Items',
+                    header: 'Active'
+                },
+                {
+                    value: 1,
+                    title: 'Archive',
+                    header: 'Archived'
+                }
+            ];
+            checkListModelMock = {
+                checkboxes: [
+                    {label: "VF", disabled: false, isChecked: false, testId: "checkbox-vf", value: "Resource.VF"},
+                    {label: "VFC", disabled: false, isChecked: false, testId: "checkbox-vfc", value: "Resource.VFC",
+                        subLevelChecklist: {checkboxes:[{label: "VFD", disabled: false, isChecked: false, testId: "checkbox-vfd", value: "Resource.VFD"}],
+                        selectedValues: ["Resource.VFD"]}
+                        },
+                    {label: "CR", disabled: false, isChecked: false, testId: "checkbox-cr", value: "Resource.CR",
+                        subLevelChecklist: { checkboxes:[{label: "VF", disabled: false, isChecked: false, testId: "checkbox-vf", value: "Resource.VF"}],
+                        selectedValues: []}
+                    }],
+                selectedValues: ["Resource.VF"]
+            }
+            filterParamsMock = {
+                active: true,
+                categories: ["resourceNewCategory.allotted resource.allotted resource", "resourceNewCategory.allotted resource.contrail route", "resourceNewCategory.application l4+.application server"],
+                components: ["Resource.VF", "Resource.VFC"],
+                order:  ["lastUpdateDate", true],
+                statuses: ["inDesign"],
+                term: "Vf"
+            }
+            checkboxesFilterMock = {
+                selectedCategoriesModel: ["serviceNewCategory.network l4+", "resourceNewCategory.allotted resource.allotted resource"],
+                selectedComponentTypes: ["Resource.VF", "Resource.VFC"],
+                selectedResourceSubTypes: ["VF", "VFC"],
+                selectedStatuses: ["NOT_CERTIFIED_CHECKOUT", "NOT_CERTIFIED_CHECKIN"]
+            };
+            checkboxesFilterKeysMock = {
+                categories:{_main: ["serviceNewCategory.network l4+"]},
+                componentTypes: { Resource: ["Resource.VF", "Resource.VFC"], _main: ["Resource.VFC"]},
+                statuses: {_main: ["inDesign"]}
+            }
+
+            stateServiceMock = {
+                go: jest.fn(),
+                current: jest.fn()
+            };
+            cacheServiceMock = {
+                get: jest.fn().mockImplementation(()=> categoriesElements),
+                set: jest.fn(),
+                contains: jest.fn().mockImplementation(()=> true)
+            };
+            loaderServiceMock = {
+                activate: jest.fn(),
+                deactivate: jest.fn()
+            };
+            catalogServiceMock = {
+                //TODO create mock function of archive
+                getCatalog: jest.fn().mockImplementation(()=>  Observable.of(categoriesElements)),
+                getArchiveCatalog: jest.fn().mockImplementation(()=>  Observable.of(categoriesElements))
+            };
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [CatalogComponent, TranslatePipe],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: SdcConfigToken, useValue: {}},
+                        {provide: SdcMenuToken, useValue: sdcMenu},
+                        {provide: "$state", useValue: stateServiceMock },
+                        {provide: CacheService, useValue: cacheServiceMock },
+                        {provide: CatalogService, useValue: catalogServiceMock },
+                        {provide: ResourceNamePipe, useValue: {}},
+                        {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock },
+                        {provide: TranslateService, useValue: {}}
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(CatalogComponent);
+            });
+        })
+    );
+
+
+    it('should match current snapshot of catalog component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it ('should call on catalog component onInit' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.initGui = jest.fn();
+        component.componentInstance.initLeftSwitch = jest.fn();
+        component.componentInstance.initScopeMembers = jest.fn();
+        component.componentInstance.loadFilterParams = jest.fn();
+        component.componentInstance.initCatalogData = jest.fn();
+        component.componentInstance.ngOnInit();
+        expect(component.componentInstance.initGui).toHaveBeenCalled();
+        expect(component.componentInstance.initLeftSwitch).toHaveBeenCalled();
+        expect(component.componentInstance.initScopeMembers).toHaveBeenCalled();
+        expect(component.componentInstance.loadFilterParams).toHaveBeenCalled();
+        expect(component.componentInstance.initCatalogData).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component initLeftSwitch' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.initLeftSwitch();
+        expect(component.componentInstance.showCatalogSelector).toEqual(false);
+        expect(component.componentInstance.catalogSelectorItems).toEqual(catalogSelectorItemsMock);
+        expect(component.componentInstance.selectedCatalogItem).toEqual(catalogSelectorItemsMock[0]);
+    });
+
+    it ('should call on catalog component initCatalogData and selectedCatalogItem is archive ' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.getArchiveCatalogItems = jest.fn();
+        component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[1];
+        component.componentInstance.initCatalogData();
+        expect(component.componentInstance.getArchiveCatalogItems).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component initCatalogData and selectedCatalogItem is active ' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.getActiveCatalogItems = jest.fn();
+        component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[0];
+        component.componentInstance.initCatalogData();
+        expect(component.componentInstance.getActiveCatalogItems).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component initScopeMembers' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.makeSortedCategories = jest.fn().mockImplementation(()=> categoriesElements);
+        component.componentInstance.initCategoriesMap = jest.fn();
+        component.componentInstance.initCheckboxesFilter = jest.fn();
+        component.componentInstance.initCheckboxesFilterKeys = jest.fn();
+        component.componentInstance.buildCheckboxLists = jest.fn();
+        component.componentInstance.initScopeMembers();
+        expect(component.componentInstance.numberOfItemToDisplay).toEqual(0);
+        expect(component.componentInstance.categories).toEqual(categoriesElements);
+        expect(component.componentInstance.confStatus).toEqual(component.componentInstance.sdcMenu.statuses);
+        expect(component.componentInstance.expandedSection).toEqual( ["type", "category", "status"]);
+        expect(component.componentInstance.catalogItems).toEqual([]);
+        expect(component.componentInstance.search).toEqual({FilterTerm: ""});
+        expect(component.componentInstance.initCategoriesMap).toHaveBeenCalled();
+        expect(component.componentInstance.initCheckboxesFilter).toHaveBeenCalled();
+        expect(component.componentInstance.initCheckboxesFilterKeys).toHaveBeenCalled();
+        expect(component.componentInstance.buildCheckboxLists).toHaveBeenCalled();
+        expect(component.componentInstance.version).toEqual(categoriesElements);
+        expect(component.componentInstance.sortBy).toEqual('lastUpdateDate');
+        expect(component.componentInstance.reverse).toEqual(true);
+    });
+
+    it ('should call on catalog component buildCheckboxLists ' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.buildChecklistModelForTypes = jest.fn();
+        component.componentInstance.buildChecklistModelForCategories = jest.fn();
+        component.componentInstance.buildChecklistModelForStatuses = jest.fn();
+        component.componentInstance.buildCheckboxLists();
+        expect(component.componentInstance.buildChecklistModelForTypes).toHaveBeenCalled();
+        expect(component.componentInstance.buildChecklistModelForCategories).toHaveBeenCalled();
+        expect(component.componentInstance.buildChecklistModelForStatuses).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component getTestIdForCheckboxByText ' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        let testId = component.componentInstance.getTestIdForCheckboxByText("catalog filter");
+        expect(testId).toEqual("checkbox-catalogfilter");
+    });
+
+    it ('should call on catalog component selectLeftSwitchItem with active catalog' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[1];
+        component.componentInstance.getActiveCatalogItems = jest.fn();
+        component.componentInstance.changeFilterParams = jest.fn();
+        component.componentInstance.selectLeftSwitchItem(catalogSelectorItemsMock[0]);
+        expect(component.componentInstance.getActiveCatalogItems).toBeCalledWith(true);
+        expect(component.componentInstance.changeFilterParams).toBeCalledWith({"active": true});
+    });
+
+    it ('should call on catalog component selectLeftSwitchItem with archive catalog' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[0];
+        component.componentInstance.getArchiveCatalogItems = jest.fn();
+        component.componentInstance.changeFilterParams = jest.fn();
+        component.componentInstance.selectLeftSwitchItem(catalogSelectorItemsMock[1]);
+        expect(component.componentInstance.getArchiveCatalogItems).toBeCalledWith(true);
+        expect(component.componentInstance.changeFilterParams).toBeCalledWith({"active": false});
+    });
+
+    it ('should call on catalog component buildChecklistModelForTypes' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock;
+        component.componentInstance.buildChecklistModelForTypes();
+        expect(component.componentInstance.componentTypes).toEqual({ Resource: ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'],
+            Service: null})
+        expect(component.componentInstance.typesChecklistModel.checkboxes.length).toEqual(2);
+    });
+
+    it ('should call on catalog component buildChecklistModelForCategories' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock;
+        component.componentInstance.categories = categoriesElements;
+        component.componentInstance.buildChecklistModelForCategories();
+        expect(component.componentInstance.categoriesChecklistModel.checkboxes).not.toEqual(null);
+    });
+
+    it ('should call on catalog component buildChecklistModelForStatuses' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock;
+        component.componentInstance.categories = categoriesElements;
+        component.componentInstance.confStatus = sdcMenu.statuses;
+        component.componentInstance.buildChecklistModelForStatuses();
+        expect(component.componentInstance.statusChecklistModel.checkboxes.length).toEqual(3);
+    });
+
+    it ('should call on catalog component initCheckboxesFilter' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.initCheckboxesFilter();
+        expect(component.componentInstance.checkboxesFilter.selectedComponentTypes).toEqual([]);
+        expect(component.componentInstance.checkboxesFilter.selectedResourceSubTypes).toEqual([]);
+        expect(component.componentInstance.checkboxesFilter.selectedCategoriesModel).toEqual([]);
+        expect(component.componentInstance.checkboxesFilter.selectedStatuses).toEqual([]);
+    });
+
+    it ('should call on catalog component initCheckboxesFilterKeys' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.initCheckboxesFilterKeys();
+        expect(component.componentInstance.checkboxesFilterKeys.componentTypes).toEqual({ _main: [] });
+        expect(component.componentInstance.checkboxesFilterKeys.categories).toEqual({ _main: [] });
+        expect(component.componentInstance.checkboxesFilterKeys.statuses).toEqual({ _main: [] });
+    });
+
+    it ('should call on catalog component initCategoriesMap' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        const categoriesMap = component.componentInstance.initCategoriesMap(categoriesElements);
+        expect(categoriesMap["resourceNewCategory.allotted resource.allotted resource"].parent.name).toEqual("Allotted Resource");
+        expect(categoriesMap["resourceNewCategory.generic"].category.uniqueId).toEqual("resourceNewCategory.generic");
+        expect(categoriesMap["serviceNewCategory.voip call control"].category.name).toEqual("VoIP Call Control");
+
+    });
+
+
+    it ('should call on catalog component selectLeftSwitchItem with active and selectedCatalogItem equal to archived' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.getActiveCatalogItems = jest.fn();
+        component.componentInstance.changeFilterParams = jest.fn();
+        component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[1]
+        component.componentInstance.selectLeftSwitchItem(catalogSelectorItemsMock[0]);
+        expect(component.componentInstance.getActiveCatalogItems).toHaveBeenCalledWith(true);
+        expect(component.componentInstance.changeFilterParams).toHaveBeenCalledWith({active: true})
+    });
+
+    it ('should call on catalog component selectLeftSwitchItem with archived and selectedCatalogItem equal to active' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.getArchiveCatalogItems = jest.fn();
+        component.componentInstance.changeFilterParams = jest.fn();
+        component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[0]
+        component.componentInstance.selectLeftSwitchItem(catalogSelectorItemsMock[1]);
+        expect(component.componentInstance.getArchiveCatalogItems).toBeCalledWith(true);
+        expect(component.componentInstance.changeFilterParams).toHaveBeenCalledWith({active: false})
+    });
+
+    it ('should call on catalog component sectionClick with section contains in expandedSection' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.expandedSection =  ["type", "category", "status"];
+        component.componentInstance.sectionClick("type");
+        expect(component.componentInstance.expandedSection).toEqual(["category", "status"])
+    });
+
+    it ('should call on catalog component sectionClick with section not contains in expandedSection' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.expandedSection =  ["type", "category", "status"];
+        component.componentInstance.sectionClick("newItem");
+        expect(component.componentInstance.expandedSection).toEqual(["type", "category", "status", "newItem"])
+    });
+
+    it ('should call on catalog component makeFilterParamsFromCheckboxes with selected values' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        expect(component.componentInstance.makeFilterParamsFromCheckboxes(checkListModelMock)).toEqual(["Resource.VF", "Resource.VFD"])
+    });
+
+    it ('should call on catalog component order with resourceName value' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.changeFilterParams = jest.fn();
+        component.componentInstance.filterParams = filterParamsMock
+        component.componentInstance.order("resourceName");
+        expect(component.componentInstance.changeFilterParams).toHaveBeenCalledWith( {"order": ["resourceName", false]})
+    });
+
+    it ('should call on catalog component goToComponent' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+       const componentMock = { uniqueId: "d3e80fed-12f6-4f29-aeb1-771050e5db72", componentType: "RESOURCE"}
+        component.componentInstance.goToComponent(componentMock);
+       expect(stateServiceMock.go).toHaveBeenCalledWith('workspace.general', {id: componentMock.uniqueId, type: componentMock.componentType.toLowerCase()})
+
+    });
+
+    it ('should call on catalog component getNumOfElements for active catalog' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[0]
+        expect(component.componentInstance.getNumOfElements(3)).toEqual("3 <b>Active</b> Elements found")
+
+    });
+
+    it ('should call on catalog component raiseNumberOfElementToDisplay with empty catalogFilteredItems' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.catalogFilteredItems = []
+        component.componentInstance.raiseNumberOfElementToDisplay(true);
+        expect(component.componentInstance.numberOfItemToDisplay).toEqual(NaN);
+        expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([]);
+    });
+
+    it ('should call on catalog component raiseNumberOfElementToDisplay with full catalogFilteredItems' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.catalogFilteredItems = [1 , 2 , 3, 4, 5, 6]
+        component.componentInstance.numberOfItemToDisplay = 2;
+        component.componentInstance.raiseNumberOfElementToDisplay(false);
+         expect(component.componentInstance.numberOfItemToDisplay).toEqual(6);
+         expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([1 , 2 , 3, 4, 5, 6]);
+    });
+
+    it ('should call on catalog component componentShouldReload return false' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.isDefaultFilter = jest.fn().mockImplementation(() => false);
+        cacheServiceMock.get.mockImplementation(()=> "mockConstructor");
+        let componentShouldReload = component.componentInstance.componentShouldReload();
+        expect(component.componentInstance.cacheService.get()).toEqual(component.componentInstance.$state.current.name);
+        expect(component.componentInstance.cacheService.contains()).toEqual(true);
+        expect(component.componentInstance.isDefaultFilter).toHaveBeenCalled();
+        expect(componentShouldReload).toEqual(false);
+    });
+
+    it ('should call on catalog component componentShouldReload return true' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.isDefaultFilter = jest.fn();
+        let componentShouldReload = component.componentInstance.componentShouldReload();
+        expect(component.componentInstance.cacheService.get()).not.toEqual(component.componentInstance.$state.current.name);
+        expect(component.componentInstance.cacheService.contains()).toEqual(true);
+        expect(componentShouldReload).toEqual(true);
+    });
+
+    it ('should call on catalog component getActiveCatalogItems with true' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        let resp = component.componentInstance.cacheService.get();
+        component.componentInstance.updateCatalogItems = jest.fn().mockImplementation((resp) => {});
+        component.componentInstance.getActiveCatalogItems(true);
+        expect(component.componentInstance.loaderService.activate).toHaveBeenCalled();
+        expect(component.componentInstance.updateCatalogItems).toHaveBeenCalledWith(resp);
+        expect(component.componentInstance.loaderService.deactivate).toHaveBeenCalled();
+        expect(component.componentInstance.cacheService.set).toHaveBeenCalledWith('breadcrumbsComponentsState', "mockConstructor");
+        expect(component.componentInstance.cacheService.set).toHaveBeenCalledWith('breadcrumbsComponents', categoriesElements);
+        expect(component.componentInstance.catalogService.getCatalog).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component getActiveCatalogItems with false' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.componentShouldReload = jest.fn();
+        component.componentInstance.updateCatalogItems = jest.fn().mockImplementation((resp) => {});
+        component.componentInstance.getActiveCatalogItems(false);
+        expect(component.componentInstance.componentShouldReload).toHaveBeenCalled();
+        let resp = component.componentInstance.cacheService.get();
+        expect(component.componentInstance.updateCatalogItems).toHaveBeenCalledWith(resp);
+    });
+
+    it ('should call on catalog component getActiveCatalogItems with true observable return error' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        catalogServiceMock.getCatalog.mockImplementation(()=>  Observable.throwError('error'));
+        component.componentInstance.getActiveCatalogItems(true);
+        expect(component.componentInstance.loaderService.activate).toHaveBeenCalled();
+        expect(console.info).toHaveBeenCalledWith('Failed to load catalog CatalogViewModel::getActiveCatalogItems');
+        expect(component.componentInstance.loaderService.deactivate).toHaveBeenCalled();
+        expect(component.componentInstance.catalogService.getCatalog).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component getArchiveCatalogItems with true' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        const resp = component.componentInstance.cacheService.get();
+        component.componentInstance.updateCatalogItems = jest.fn().mockImplementation((resp) => {});
+        component.componentInstance.getArchiveCatalogItems(true);
+        expect(component.componentInstance.loaderService.activate).toHaveBeenCalled();
+        expect(component.componentInstance.catalogService.getArchiveCatalog).toHaveBeenCalled();
+        expect(component.componentInstance.cacheService.set).toHaveBeenCalledWith('archiveComponents', categoriesElements);
+        expect(component.componentInstance.loaderService.deactivate).toHaveBeenCalled();
+        expect(component.componentInstance.updateCatalogItems).toHaveBeenCalledWith(resp)
+    });
+
+    it ('should call on catalog component getArchiveCatalogItems with false' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.updateCatalogItems = jest.fn().mockImplementation((resp) => Observable.of());
+        component.componentInstance.getArchiveCatalogItems(false);
+        expect(component.componentInstance.cacheService.contains).toHaveBeenCalled();
+        expect(component.componentInstance.cacheService.get).toHaveBeenCalled();
+        let resp = component.componentInstance.cacheService.get();
+        expect(component.componentInstance.updateCatalogItems).toHaveBeenCalledWith(resp);
+    });
+
+    it ('should call on catalog component getArchiveCatalogItems with true observable return error' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        catalogServiceMock.getArchiveCatalog.mockImplementation(()=>  Observable.throwError('error'));
+        component.componentInstance.getArchiveCatalogItems(true);
+        expect(component.componentInstance.loaderService.activate).toHaveBeenCalled();
+        expect(component.componentInstance.catalogService.getArchiveCatalog).toHaveBeenCalled();
+        expect(component.componentInstance.loaderService.deactivate).toHaveBeenCalled();
+        expect(console.info).toHaveBeenCalledWith('Failed to load catalog CatalogViewModel::getArchiveCatalogItems');
+    });
+
+    it ('should call on catalog component updateCatalogItems' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.filterCatalogItems = jest.fn();
+        component.componentInstance.addFilterTermToComponent = jest.fn();
+        component.componentInstance.updateCatalogItems([1, 2, 3]);
+        expect(component.componentInstance.catalogItems).toEqual([1, 2, 3]);
+        expect(component.componentInstance.addFilterTermToComponent).toHaveBeenCalled();
+        expect(component.componentInstance.filterCatalogItems).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component applyFilterParamsToView' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.initCheckboxesFilter = jest.fn();
+        component.componentInstance.filterCatalogCategories = jest.fn();
+        component.componentInstance.applyFilterParamsComponents = jest.fn();
+        component.componentInstance.applyFilterParamsCategories = jest.fn();
+        component.componentInstance.applyFilterParamsStatuses = jest.fn();
+        component.componentInstance.applyFilterParamsOrder = jest.fn();
+        component.componentInstance.applyFilterParamsTerm = jest.fn();
+        component.componentInstance.filterCatalogItems = jest.fn();
+        component.componentInstance.applyFilterParamsToView(filterParamsMock);
+        expect(component.componentInstance.initCheckboxesFilter).toHaveBeenCalled();
+        expect(component.componentInstance.filterCatalogCategories).toHaveBeenCalled();
+        expect(component.componentInstance.applyFilterParamsComponents).toHaveBeenCalledWith(filterParamsMock);
+        expect(component.componentInstance.applyFilterParamsCategories).toHaveBeenCalledWith(filterParamsMock);
+        expect(component.componentInstance.applyFilterParamsStatuses).toHaveBeenCalledWith(filterParamsMock);
+        expect(component.componentInstance.applyFilterParamsOrder).toHaveBeenCalledWith(filterParamsMock);
+        expect(component.componentInstance.applyFilterParamsTerm).toHaveBeenCalledWith(filterParamsMock);
+        expect(component.componentInstance.filterCatalogItems).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component filterCatalogCategories' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.makeFilteredCategories = jest.fn();
+        component.componentInstance.buildChecklistModelForCategories = jest.fn();
+        component.componentInstance.categories = categoriesElements;
+        component.componentInstance.checkboxesFilter = {selectedComponentTypes: ["firstType", "secondType"]};
+        component.componentInstance.filterCatalogCategories();
+        expect(component.componentInstance.makeFilteredCategories).toHaveBeenCalledWith(categoriesElements, ["firstType", "secondType"]);
+        expect(component.componentInstance.buildChecklistModelForCategories).toHaveBeenCalled();
+    });
+
+    it ('should call on catalog component filterCatalogItems' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.makeFilteredItems = jest.fn().mockImplementation(() => [1,2,3]);
+        component.componentInstance.raiseNumberOfElementToDisplay = jest.fn();
+        component.componentInstance.catalogItems = ["firstComponent", "secondComponent"];
+        component.componentInstance.checkboxesFilter = {};
+        component.componentInstance.search = {};
+        component.componentInstance.sortBy = "";
+        component.componentInstance.reverse = true;
+        component.componentInstance.numberOfItemToDisplay = 2;
+       // component.componentInstance.catalogFilteredItems = component.componentInstance.makeFilteredItems();
+        component.componentInstance.filterCatalogItems();
+        expect(component.componentInstance.makeFilteredItems).toHaveBeenCalledWith(["firstComponent", "secondComponent"], {}, {}, "",true);
+        expect(component.componentInstance.raiseNumberOfElementToDisplay).toHaveBeenCalledWith(true);
+        expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([1,2]);
+    });
+
+    it ('should call on catalog component applyFilterParamsToCheckboxes' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsToCheckboxes(checkListModelMock, ["Resource.CR", "Resource.VFD", "Resource.VF"]);
+        expect(checkListModelMock.selectedValues).toEqual(["Resource.VF","Resource.CR"]);
+        expect(checkListModelMock.checkboxes[1].subLevelChecklist.selectedValues).toEqual(["Resource.VFD"]);
+        expect(checkListModelMock.checkboxes[2].subLevelChecklist.selectedValues).toEqual(["Resource.VF"])
+    });
+
+    it ('should call on catalog component applyFilterParamsComponents and filterParams.active equal true' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsToCheckboxes = jest.fn();
+        component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock;
+        component.componentInstance.checkboxesFilter = checkboxesFilterMock;
+        component.componentInstance.catalogSelectorItems = catalogSelectorItemsMock;
+        component.componentInstance.typesChecklistModel = checkListModelMock;
+        component.componentInstance.applyFilterParamsComponents(filterParamsMock);
+        expect(component.componentInstance.applyFilterParamsToCheckboxes).toHaveBeenCalledWith(checkListModelMock, filterParamsMock.components);
+        expect(component.componentInstance.checkboxesFilter.selectedComponentTypes).toEqual(["Resource.VFC"]);
+        expect(component.componentInstance.checkboxesFilter.selectedResourceSubTypes).toEqual(["VF", "VFC"]);
+        expect(component.componentInstance.selectedCatalogItem).toEqual(catalogSelectorItemsMock[0]);
+    });
+
+    it ('should call on catalog component applyFilterParamsComponents and filterParams.active equal false' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsToCheckboxes = jest.fn();
+        filterParamsMock.active = false;
+        component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock;
+        component.componentInstance.checkboxesFilter = checkboxesFilterMock;
+        component.componentInstance.catalogSelectorItems = catalogSelectorItemsMock;
+        component.componentInstance.typesChecklistModel = checkListModelMock;
+        component.componentInstance.applyFilterParamsComponents(filterParamsMock);
+        expect(component.componentInstance.applyFilterParamsToCheckboxes).toHaveBeenCalledWith(checkListModelMock, filterParamsMock.components);
+        expect(component.componentInstance.checkboxesFilter.selectedComponentTypes).toEqual(["Resource.VFC"]);
+        expect(component.componentInstance.checkboxesFilter.selectedResourceSubTypes).toEqual(["VF", "VFC"]);
+        expect(component.componentInstance.selectedCatalogItem).toEqual(catalogSelectorItemsMock[1]);
+    });
+
+    it ('should call on catalog component applyFilterParamsCategories' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsToCheckboxes = jest.fn();
+        component.componentInstance.categoriesChecklistModel = checkListModelMock;
+        component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock;
+        component.componentInstance.checkboxesFilter = checkboxesFilterMock;
+        component.componentInstance.applyFilterParamsCategories(filterParamsMock);
+        expect(component.componentInstance.applyFilterParamsToCheckboxes).toHaveBeenCalledWith(checkListModelMock, filterParamsMock.categories);
+        expect(component.componentInstance.checkboxesFilter.selectedCategoriesModel).toEqual(["serviceNewCategory.network l4+"]);
+    });
+
+    it ('should call on catalog component applyFilterParamsStatuses' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsToCheckboxes = jest.fn();
+
+        component.componentInstance.statusChecklistModel = checkListModelMock;
+        component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock;
+        component.componentInstance.checkboxesFilter = checkboxesFilterMock;
+        component.componentInstance.confStatus = sdcMenu.statuses;
+        component.componentInstance.applyFilterParamsStatuses(filterParamsMock);
+        expect(component.componentInstance.applyFilterParamsToCheckboxes).toHaveBeenCalledWith(checkListModelMock, filterParamsMock.statuses);
+        expect(component.componentInstance.checkboxesFilter.selectedStatuses).toEqual(["NOT_CERTIFIED_CHECKOUT", "NOT_CERTIFIED_CHECKIN"]);
+    });
+
+    it ('should call on catalog component applyFilterParamsOrder' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsOrder(filterParamsMock);
+        expect(component.componentInstance.sortBy).toEqual("lastUpdateDate");
+        expect(component.componentInstance.reverse).toEqual( true);
+    });
+
+    it ('should call on catalog component applyFilterParamsTerm' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsTerm(filterParamsMock);
+        expect(component.componentInstance.search.filterTerm).toEqual("Vf");
+    });
+
+    // it ('should call on catalog component loadFilterParams' , () => {
+    //     const component = TestBed.createComponent(CatalogComponent);
+    //     component.componentInstance.$state = {params: {}};
+    //     component.componentInstance.loadFilterParams();
+    // });
+
+    it ('should call on catalog component changeFilterParams' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsToView = jest.fn();
+        component.componentInstance.filterParams =  { active: true, categories: [], components: [], order:  ["lastUpdateDate", true], statuses: [], term: ""};
+        component.componentInstance.$state.go = jest.fn().mockImplementation(() => Promise.resolve({ json: () => [] }));
+        const newParams = {"filter.active": true, "filter.categories": "resourceNewCategory.allotted resource.allotted resource,resourceNewCategory.allotted resource.contrail route,resourceNewCategory.application l4+.application server", "filter.components": "Resource.VF,Resource.VFC", "filter.order": "-lastUpdateDate", "filter.statuses": "inDesign", "filter.term": "Vf"}
+        component.componentInstance.changeFilterParams(filterParamsMock);
+        expect(component.componentInstance.filterParams).toEqual(filterParamsMock);
+        expect(component.componentInstance.$state.go).toHaveBeenCalledWith('.',newParams, {location: 'replace', notify: false});
+        expect(component.componentInstance.applyFilterParamsToView).toHaveBeenCalledWith(filterParamsMock);
+    });
+
+    it ('should call on catalog component changeFilterParams and rebuild equal true' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        component.componentInstance.applyFilterParamsToView = jest.fn();
+        component.componentInstance.makeFilterParamsFromCheckboxes = jest.fn();
+        component.componentInstance.buildCheckboxLists = jest.fn();
+        component.componentInstance.filterParams =  { active: true, categories: [], components: [], order:  ["lastUpdateDate", true], statuses: [], term: ""};
+        component.componentInstance.$state.go = jest.fn().mockImplementation(() => Promise.resolve({ json: () => [] }));
+        const newParams = {"filter.active": true, "filter.categories": "resourceNewCategory.allotted resource.allotted resource,resourceNewCategory.allotted resource.contrail route,resourceNewCategory.application l4+.application server", "filter.components": "Resource.VF,Resource.VFC", "filter.order": "-lastUpdateDate", "filter.statuses": "inDesign", "filter.term": "Vf"}
+        component.componentInstance.typesChecklistModel = checkListModelMock;
+        component.componentInstance.categoriesChecklistModel = checkListModelMock;
+        component.componentInstance.statusChecklistModel = checkListModelMock;
+        component.componentInstance.changeFilterParams(filterParamsMock, true);
+        expect(component.componentInstance.filterParams).toEqual(filterParamsMock);
+        expect(component.componentInstance.$state.go).toHaveBeenCalledWith('.',newParams, {location: 'replace', notify: false});
+        //expect(component.componentInstance.makeFilterParamsFromCheckboxes).toHaveBeenCalledWith(component.componentInstance.typesChecklistModel);
+        //expect(component.componentInstance.buildCheckboxLists).toHaveBeenCalled();
+        expect(component.componentInstance.applyFilterParamsToView).toHaveBeenCalledWith(filterParamsMock);
+    });
+
+    it ('should call on catalog component makeFilteredCategories' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        const categoryMock = [{"name":"Network L1-3","normalizedName":"network l1-3","uniqueId":"serviceNewCategory.network l1-3","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}];
+        cacheServiceMock.get.mockImplementation(()=> categoryMock);
+        const resp = component.componentInstance.makeFilteredCategories(categoriesElements, checkboxesFilterMock.selectedComponentTypes);
+        expect(component.componentInstance.cacheService.get).toHaveBeenCalledWith("resourceCategories");
+        expect(resp).toEqual(categoryMock);
+    });
+
+    it ('should call on catalog component makeFilteredCategories return unique elements' , () => {
+        const component = TestBed.createComponent(CatalogComponent);
+        const categoryMock = [{"name":"Network L1-3","normalizedName":"network l1-3","uniqueId":"serviceNewCategory.network l1-3","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null},
+            {"name":"Network L1-3","normalizedName":"network l1-3","uniqueId":"serviceNewCategory.network l1-3","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null},
+            {"name":"Network Service","normalizedName":"network service","uniqueId":"serviceNewCategory.network service","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}];
+        const categoryUniqueMock = [{"name":"Network L1-3","normalizedName":"network l1-3","uniqueId":"serviceNewCategory.network l1-3","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null},
+            {"name":"Network Service","normalizedName":"network service","uniqueId":"serviceNewCategory.network service","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}];
+        cacheServiceMock.get.mockImplementation(()=> categoryMock);
+        checkboxesFilterMock.selectedComponentTypes = ["SERVICE", "Resource.VF"];
+        const resp = component.componentInstance.makeFilteredCategories(categoriesElements, checkboxesFilterMock.selectedComponentTypes);
+        expect(component.componentInstance.cacheService.get).toHaveBeenCalledWith("resourceCategories");
+        expect(resp).toEqual(categoryUniqueMock);
+    });
+
+
+});
diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts
new file mode 100644
index 0000000000..527764862a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts
@@ -0,0 +1,666 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import * as _ from "lodash";
+import { Component as NgComponent, Inject } from '@angular/core';
+import { SdcUiCommon, SdcUiServices } from "onap-ui-angular";
+import { CacheService, CatalogService } from "app/services-ng2";
+import { SdcConfigToken, ISdcConfig } from "../../config/sdc-config.config";
+import { SdcMenuToken, IAppMenu } from "../../config/sdc-menu.config";
+import { Component, ICategoryBase, IMainCategory, ISubCategory, IConfigStatuses, ICatalogSelector, CatalogSelectorTypes } from "app/models";
+import { ResourceNamePipe } from "../../pipes/resource-name.pipe";
+import { EntityFilterPipe, IEntityFilterObject, ISearchFilter} from "../../pipes/entity-filter.pipe";
+
+interface Gui {
+    onComponentSubTypesClick:Function;
+    onComponentTypeClick:Function;
+    onCategoryClick:Function;
+    onStatusClick:Function;
+    changeFilterTerm:Function;
+}
+
+interface IFilterParams {
+    components: string[];
+    categories: string[];
+    statuses: (string)[];
+    order: [string, boolean];
+    term: string;
+    active: boolean;
+}
+
+interface ICheckboxesFilterMap {
+    [key: string]: Array<string>;
+    _main: Array<string>;
+}
+
+interface ICheckboxesFilterKeys {
+    componentTypes: ICheckboxesFilterMap;
+    categories: ICheckboxesFilterMap;
+    statuses: ICheckboxesFilterMap;
+}
+
+interface ICategoriesMap {
+    [key: string]: {
+        category: ICategoryBase,
+        parent: ICategoryBase
+    }
+}
+
+@NgComponent({
+    selector: 'catalog',
+    templateUrl: './catalog.component.html',
+    styleUrls:['./catalog.component.less']
+})
+export class CatalogComponent {
+    public checkboxesFilter:IEntityFilterObject;
+    public checkboxesFilterKeys:ICheckboxesFilterKeys;
+    public gui:Gui;
+    public categories:Array<IMainCategory>;
+    public filteredCategories:Array<IMainCategory>;
+    public confStatus:IConfigStatuses;
+    public componentTypes:{[key:string]: Array<string>};
+    public catalogItems:Array<Component>;
+    public catalogFilteredItems:Array<Component>;
+    public catalogFilteredSlicedItems:Array<Component>;
+    public expandedSection:Array<string>;
+    public version:string;
+    public sortBy:string;
+    public reverse:boolean;
+    public filterParams:IFilterParams;
+    public search:ISearchFilter;
+
+    //this is for UI paging
+    public numberOfItemToDisplay:number;
+
+    public selectedCatalogItem: ICatalogSelector;
+    public catalogSelectorItems: Array<ICatalogSelector>;
+    public showCatalogSelector: boolean;
+
+    public typesChecklistModel: SdcUiCommon.ChecklistModel;
+    public categoriesChecklistModel: SdcUiCommon.ChecklistModel;
+    public statusChecklistModel: SdcUiCommon.ChecklistModel;
+
+    private defaultFilterParams:IFilterParams = {
+        components: [],
+        categories: [],
+        statuses: [],
+        order: ['lastUpdateDate', true],
+        term: '',
+        active: true
+    };
+    private categoriesMap:ICategoriesMap;
+
+    constructor(
+        @Inject(SdcConfigToken) private sdcConfig:ISdcConfig,
+        @Inject(SdcMenuToken) public sdcMenu:IAppMenu,
+        @Inject("$state") private $state:ng.ui.IStateService,
+        private cacheService:CacheService,
+        private catalogService:CatalogService,
+        private resourceNamePipe:ResourceNamePipe,
+        private loaderService: SdcUiServices.LoaderService
+    ) {}
+
+    ngOnInit(): void {
+        this.initGui();
+        this.initLeftSwitch();
+        this.initScopeMembers();
+        this.loadFilterParams();
+        this.initCatalogData(); // Async task to get catalog from server.
+    }
+
+    private initLeftSwitch = ():void => {
+        this.showCatalogSelector = false;
+
+        this.catalogSelectorItems = [
+            {value: CatalogSelectorTypes.Active, title: "Active Items", header: "Active"},
+            {value: CatalogSelectorTypes.Archive, title: "Archive", header: "Archived"}
+        ];
+        // set active items is default
+        this.selectedCatalogItem = this.catalogSelectorItems[0];
+    };
+
+    private initCatalogData = ():void => {
+        if(this.selectedCatalogItem.value === CatalogSelectorTypes.Archive){
+            this.getArchiveCatalogItems();
+        } else {
+            this.getActiveCatalogItems();
+        }
+    };
+
+
+    private initScopeMembers = ():void => {
+        this.numberOfItemToDisplay = 0;
+        this.categories = this.makeSortedCategories(this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')))
+            .map((cat) => <IMainCategory>cat);
+        this.confStatus = this.sdcMenu.statuses;
+        this.expandedSection = ["type", "category", "status"];
+        this.catalogItems = [];
+        this.search = {FilterTerm: ""};
+        this.categoriesMap = this.initCategoriesMap();
+        this.initCheckboxesFilter();
+        this.initCheckboxesFilterKeys();
+        this.buildCheckboxLists();
+
+        this.version = this.cacheService.get('version');
+        this.sortBy = 'lastUpdateDate';
+        this.reverse = true;
+    };
+
+    private buildCheckboxLists() {
+        this.buildChecklistModelForTypes();
+        this.buildChecklistModelForCategories();
+        this.buildChecklistModelForStatuses();
+    }
+
+    private getTestIdForCheckboxByText = ( text: string ):string => {
+        return 'checkbox-' + text.toLowerCase().replace(/ /g, '');
+    }
+
+    private buildChecklistModelForTypes() {
+        this.componentTypes = {
+            Resource: ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'],
+            Service: null
+        };
+        this.typesChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.componentTypes._main,
+            Object.keys(this.componentTypes).map((ct) => {
+                let subChecklist = null;
+                if (this.componentTypes[ct]) {
+                    this.checkboxesFilterKeys.componentTypes[ct] = this.checkboxesFilterKeys.componentTypes[ct] || [];
+                    subChecklist = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.componentTypes[ct],
+                        this.componentTypes[ct].map((st) => {
+                            const stKey = [ct, st].join('.');
+                            const testId = this.getTestIdForCheckboxByText(st);
+                            return new SdcUiCommon.ChecklistItemModel(st, false, this.checkboxesFilterKeys.componentTypes[ct].indexOf(stKey) !== -1, null, testId, stKey);
+                        })
+                    );
+                }
+                const testId = this.getTestIdForCheckboxByText(ct);
+                return new SdcUiCommon.ChecklistItemModel(ct, false, this.checkboxesFilterKeys.componentTypes._main.indexOf(ct) !== -1, subChecklist, testId, ct);
+            })
+        );
+    }
+
+    private buildChecklistModelForCategories() {
+        this.categoriesChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.categories._main,
+            (this.filteredCategories || this.categories).map((cat) => {
+                this.checkboxesFilterKeys.categories[cat.uniqueId] = this.checkboxesFilterKeys.categories[cat.uniqueId] || [];
+                const subCategoriesChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.categories[cat.uniqueId],
+                    (cat.subcategories || []).map((scat) => {
+                        this.checkboxesFilterKeys.categories[scat.uniqueId] = this.checkboxesFilterKeys.categories[scat.uniqueId] || [];
+                        const groupingsChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.categories[scat.uniqueId],
+                            (scat.groupings || []).map(gcat =>
+                                new SdcUiCommon.ChecklistItemModel(gcat.name, false, this.checkboxesFilterKeys.categories[scat.uniqueId].indexOf(gcat.uniqueId) !== -1, null, this.getTestIdForCheckboxByText(gcat.uniqueId), gcat.uniqueId))
+                        );
+                        return new SdcUiCommon.ChecklistItemModel(scat.name, false, this.checkboxesFilterKeys.categories[cat.uniqueId].indexOf(scat.uniqueId) !== -1, groupingsChecklistModel, this.getTestIdForCheckboxByText(scat.uniqueId), scat.uniqueId);
+                    })
+                );
+                return new SdcUiCommon.ChecklistItemModel(cat.name, false, this.checkboxesFilterKeys.categories._main.indexOf(cat.uniqueId) !== -1, subCategoriesChecklistModel, this.getTestIdForCheckboxByText(cat.uniqueId), cat.uniqueId);
+            })
+        );
+    }
+
+    private buildChecklistModelForStatuses() {
+        // For statuses checklist model, use the statuses keys as values. On applying filtering map the statuses keys to statuses values.
+        this.statusChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.statuses._main,
+            Object.keys(this.confStatus).map((sKey) => new SdcUiCommon.ChecklistItemModel(
+                this.confStatus[sKey].name, 
+                false, 
+                this.checkboxesFilterKeys.statuses._main.indexOf(sKey) !== -1, 
+                null, 
+                this.getTestIdForCheckboxByText(sKey), 
+                sKey))
+        );
+    }
+
+    private initCheckboxesFilter() {
+        // Checkboxes filter init
+        this.checkboxesFilter = <IEntityFilterObject>{};
+        this.checkboxesFilter.selectedComponentTypes = [];
+        this.checkboxesFilter.selectedResourceSubTypes = [];
+        this.checkboxesFilter.selectedCategoriesModel = [];
+        this.checkboxesFilter.selectedStatuses = [];
+    }
+
+    private initCheckboxesFilterKeys() {
+        // init checkboxes filter keys (for checklists values):
+        this.checkboxesFilterKeys = <ICheckboxesFilterKeys>{};
+        this.checkboxesFilterKeys.componentTypes = { _main: [] };
+        this.checkboxesFilterKeys.categories = { _main: [] };
+        this.checkboxesFilterKeys.statuses = { _main: [] };
+    }
+
+    private initCategoriesMap(categoriesList?:(ICategoryBase)[], parentCategory:ICategoryBase=null): ICategoriesMap {
+        categoriesList = (categoriesList) ? categoriesList : this.categories;
+
+        // Init categories map
+        return categoriesList.reduce((acc, cat) => {
+            acc[cat.uniqueId] = {
+                category: cat,
+                parent: parentCategory
+            };
+            const catChildren = ((<IMainCategory>cat).subcategories)
+                ? (<IMainCategory>cat).subcategories
+                : (((<ISubCategory>cat).groupings)
+                    ? (<ISubCategory>cat).groupings
+                    : null);
+            if (catChildren) {
+                Object.assign(acc, this.initCategoriesMap(catChildren, cat));
+            }
+            return acc;
+        }, <ICategoriesMap>{});
+    }
+
+    public selectLeftSwitchItem(item: ICatalogSelector): void {
+        if (this.selectedCatalogItem.value !== item.value) {
+            this.selectedCatalogItem = item;
+            switch (item.value) {
+                case CatalogSelectorTypes.Active:
+                    this.getActiveCatalogItems(true);
+                    break;
+
+                case CatalogSelectorTypes.Archive:
+                    this.getArchiveCatalogItems(true);
+                    break;
+            }
+            this.changeFilterParams({active: (item.value === CatalogSelectorTypes.Active)});
+        }
+    }
+
+    public sectionClick(section: string): void {
+        let index: number = this.expandedSection.indexOf(section);
+        if (index !== -1) {
+            this.expandedSection.splice(index, 1);
+        } else {
+            this.expandedSection.push(section);
+        }
+    }
+
+
+    private makeFilterParamsFromCheckboxes(checklistModel:SdcUiCommon.ChecklistModel): Array<string> {
+        return checklistModel.checkboxes.reduce((acc, chbox) => {
+            if (checklistModel.selectedValues.indexOf(chbox.value) !== -1) {
+                acc.push(chbox.value);
+            } else if (chbox.subLevelChecklist) {  // else, if checkbox is not checked, then try to get values from sub checklists
+                acc.push(...this.makeFilterParamsFromCheckboxes(chbox.subLevelChecklist));
+            }
+            return acc;
+        }, []);
+    }
+
+    //default sort by descending last update. default for alphabetical = ascending
+    public order(sortBy: string): void {
+        this.changeFilterParams({
+            order: (this.filterParams.order[0] === sortBy)
+                ? [sortBy, !this.filterParams.order[1]]
+                : [sortBy, sortBy === 'lastUpdateDate']
+        });
+    }
+
+
+    public goToComponent(component: Component): void {
+        this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()});
+    }
+
+
+    // Will print the number of elements found in catalog
+    public getNumOfElements(num:number):string {
+        if (!num || num === 0) {
+            return `No <b>${this.selectedCatalogItem.header}</b> Elements found`;
+        } else if (num === 1) {
+            return `1 <b>${this.selectedCatalogItem.header}</b> Element found`;
+        } else {
+            return num + ` <b>${this.selectedCatalogItem.header}</b> Elements found`;
+        }
+    }
+
+    public initGui(): void {
+        this.gui = <Gui>{};
+
+        /**
+         * Select | unselect sub resource when resource is clicked | unclicked.
+         * @param type
+         */
+        this.gui.onComponentTypeClick = (): void => {
+            this.changeFilterParams({
+                components: this.makeFilterParamsFromCheckboxes(this.typesChecklistModel)
+            });
+        };
+
+        this.gui.onCategoryClick = (): void => {
+            this.changeFilterParams({
+                categories: this.makeFilterParamsFromCheckboxes(this.categoriesChecklistModel)
+            });
+        };
+
+        this.gui.onStatusClick = (statusChecklistItem: SdcUiCommon.ChecklistItemModel) => {
+            this.changeFilterParams({
+                statuses: this.makeFilterParamsFromCheckboxes(this.statusChecklistModel)
+            });
+        };
+
+        this.gui.changeFilterTerm = (filterTerm: string) => {
+            this.changeFilterParams({
+                term: filterTerm
+            });
+        };
+    }
+
+    public raiseNumberOfElementToDisplay(recalculate:boolean = false): void {
+        const scrollPageAmount = 35;
+        if (!this.catalogFilteredItems) {
+            this.numberOfItemToDisplay = 0;
+        } else if (this.catalogFilteredItems.length > this.numberOfItemToDisplay || recalculate) {
+            let fullPagesAmount = Math.ceil(this.numberOfItemToDisplay / scrollPageAmount) * scrollPageAmount;
+            if (!recalculate || fullPagesAmount === 0) {  //TODO trigger infiniteScroll to check bottom and fire onBottomHit by itself (sdc-ui)
+                fullPagesAmount += scrollPageAmount;
+            }
+            this.numberOfItemToDisplay = Math.min(this.catalogFilteredItems.length, fullPagesAmount);
+            this.catalogFilteredSlicedItems = this.catalogFilteredItems.slice(0, this.numberOfItemToDisplay);
+        }
+    }
+
+    private isDefaultFilter = (): boolean => {
+        return angular.equals(this.defaultFilterParams, this.filterParams);
+    }
+
+    private componentShouldReload = ():boolean => {
+        let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents'));
+        return !breadcrumbsValid || this.isDefaultFilter();
+    }
+
+    private getActiveCatalogItems(forceReload?: boolean): void {
+        if (forceReload || this.componentShouldReload()) {
+            this.loaderService.activate();
+
+            let onSuccess = (followedResponse:Array<Component>):void => {
+                this.updateCatalogItems(followedResponse);
+                this.loaderService.deactivate();
+                this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name);  //catalog
+                this.cacheService.set('breadcrumbsComponents', followedResponse);
+                
+            };
+
+            let onError = ():void => {
+                console.info('Failed to load catalog CatalogViewModel::getActiveCatalogItems');
+                this.loaderService.deactivate();
+            };
+            this.catalogService.getCatalog().subscribe(onSuccess, onError);
+        } else {
+            let cachedComponents = this.cacheService.get('breadcrumbsComponents');
+            this.updateCatalogItems(cachedComponents);
+        }
+    }
+
+    private getArchiveCatalogItems(forceReload?: boolean): void {
+        if(forceReload || !this.cacheService.contains("archiveComponents")) {
+            this.loaderService.activate();
+            let onSuccess = (followedResponse:Array<Component>):void => {
+                this.cacheService.set("archiveComponents", followedResponse);
+                this.loaderService.deactivate();
+                this.updateCatalogItems(followedResponse);
+            };
+
+            let onError = ():void => {
+                console.info('Failed to load catalog CatalogViewModel::getArchiveCatalogItems');
+                this.loaderService.deactivate();
+            };
+
+            this.catalogService.getArchiveCatalog().subscribe(onSuccess, onError);
+        } else {
+            let archiveCache = this.cacheService.get("archiveComponents");
+            this.updateCatalogItems(archiveCache);
+        }
+    }
+
+    private updateCatalogItems = (items:Array<Component>):void => {
+        this.catalogItems = items;
+        this.catalogItems.forEach(this.addFilterTermToComponent);
+        this.filterCatalogItems();
+    }
+
+    private applyFilterParamsToView(filterParams:IFilterParams) {
+        // reset checkboxes filter
+        this.initCheckboxesFilter();
+
+        this.filterCatalogCategories();
+
+        this.applyFilterParamsComponents(filterParams);
+        this.applyFilterParamsCategories(filterParams);
+        this.applyFilterParamsStatuses(filterParams);
+        this.applyFilterParamsOrder(filterParams);
+        this.applyFilterParamsTerm(filterParams);
+
+        // do filters when filter params are changed:
+        this.filterCatalogItems();
+    }
+
+    private filterCatalogCategories() {
+        this.filteredCategories = this.makeFilteredCategories(this.categories, this.checkboxesFilter.selectedComponentTypes);
+        this.buildChecklistModelForCategories();
+    }
+
+    private filterCatalogItems() {
+        this.catalogFilteredItems = this.makeFilteredItems(this.catalogItems, this.checkboxesFilter, this.search, this.sortBy, this.reverse);
+        this.raiseNumberOfElementToDisplay(true);
+        this.catalogFilteredSlicedItems = this.catalogFilteredItems.slice(0, this.numberOfItemToDisplay);
+    }
+
+    private applyFilterParamsToCheckboxes(checklistModel:SdcUiCommon.ChecklistModel, filterParamsList:Array<string>) {
+        checklistModel.checkboxes.forEach((chbox) => {
+            // if checkbox is checked, then add it to selected values if not there, and select all sub checkboxes
+            if (filterParamsList.indexOf(chbox.value) !== -1 && checklistModel.selectedValues.indexOf(chbox.value) === -1) {
+                checklistModel.selectedValues.push(chbox.value);
+                if (chbox.subLevelChecklist) {
+                    this.applyFilterParamsToCheckboxes(chbox.subLevelChecklist, chbox.subLevelChecklist.checkboxes.map((subchbox) => subchbox.value));
+                }
+            } else if ( chbox.subLevelChecklist ) {
+                this.applyFilterParamsToCheckboxes(chbox.subLevelChecklist, filterParamsList);
+            }
+        });
+    }
+
+    private applyFilterParamsComponents(filterParams:IFilterParams) {
+        this.applyFilterParamsToCheckboxes(this.typesChecklistModel, filterParams.components);
+        this.checkboxesFilter.selectedComponentTypes = this.checkboxesFilterKeys.componentTypes._main;
+        Object.keys(this.checkboxesFilterKeys.componentTypes).forEach((chKey) => {
+            if (chKey !== '_main') {
+                this.checkboxesFilter['selected' + chKey + 'SubTypes'] = this.checkboxesFilterKeys.componentTypes[chKey].map((st) => st.substr(chKey.length + 1));
+            }
+        });
+
+        let selectedCatalogIndex = filterParams.active ? CatalogSelectorTypes.Active : CatalogSelectorTypes.Archive;
+        this.selectedCatalogItem = this.catalogSelectorItems[selectedCatalogIndex];
+    }
+
+    private applyFilterParamsCategories(filterParams:IFilterParams) {
+        this.applyFilterParamsToCheckboxes(this.categoriesChecklistModel, filterParams.categories);
+        this.checkboxesFilter.selectedCategoriesModel = <Array<string>>_.flatMap(this.checkboxesFilterKeys.categories);
+    }
+
+    private applyFilterParamsStatuses(filterParams: IFilterParams) {
+        this.applyFilterParamsToCheckboxes(this.statusChecklistModel, filterParams.statuses);
+        this.checkboxesFilter.selectedStatuses = _.reduce(_.flatMap(this.checkboxesFilterKeys.statuses), (stats, st:string) => [...stats, ...this.confStatus[st].values], []);
+    }
+
+    private applyFilterParamsOrder(filterParams: IFilterParams) {
+        this.sortBy = filterParams.order[0];
+        this.reverse = filterParams.order[1];
+    }
+
+    private applyFilterParamsTerm(filterParams: IFilterParams) {
+        this.search = {
+            filterTerm: filterParams.term
+        };
+    }
+
+    private loadFilterParams() {
+        const params = this.$state.params;
+        this.filterParams = angular.copy(this.defaultFilterParams);
+        Object.keys(params).forEach((k) => {
+            if (!angular.isUndefined(params[k])) {
+                let newVal;
+                let paramsChecklist: SdcUiCommon.ChecklistModel = null;
+                let filterKey = k.substr('filter.'.length);
+                switch (k) {
+                    case 'filter.components':
+                        paramsChecklist = paramsChecklist || this.typesChecklistModel;
+                    case 'filter.categories':
+                        paramsChecklist = paramsChecklist || this.categoriesChecklistModel;
+                    case 'filter.statuses':
+                        paramsChecklist = paramsChecklist || this.statusChecklistModel;
+
+                        // for those cases above - split param by comma and make reduced checklist values for filter params (url)
+                        newVal = _.uniq(params[k].split(','));
+                        break;
+                    case 'filter.order':
+                        newVal = params[k].startsWith('-') ? [params[k].substr(1), true] : [params[k], false];
+                        break;
+                    case 'filter.term':
+                        newVal = params[k];
+                        break;
+                    case 'filter.active':
+                        newVal = (params[k] === "true" || params[k] === true)? true : false;
+                        break;
+                    default:
+                        // unknown filter key
+                        filterKey = null;
+                }
+                if (filterKey) {
+                    this.filterParams[filterKey] = newVal;
+                }
+            }
+        });
+        // re-set filter params with valid values, and then re-build checklists
+        this.changeFilterParams(this.filterParams, true);
+    }
+
+    private changeFilterParams(changedFilterParams, rebuild:boolean = false) {
+        const newParams = {};
+        Object.keys(changedFilterParams).forEach((k) => {
+            let newVal;
+            switch (k) {
+                case 'components':
+                case 'categories':
+                case 'statuses':
+                    newVal = changedFilterParams[k] && changedFilterParams[k].length ? changedFilterParams[k].join(',') : null;
+                    break;
+                case 'order':
+                    newVal = (changedFilterParams[k][1] ? '-' : '') + changedFilterParams[k][0];
+                    break;
+                case 'term':
+                    newVal = changedFilterParams[k] ? changedFilterParams[k] : null;
+                    break;
+                case 'active':
+                    newVal = (changedFilterParams[k] === "true" || changedFilterParams[k] === true);
+                    break;
+                default:
+                    return;
+            }
+            this.filterParams[k] = changedFilterParams[k];
+            newParams['filter.' + k] = newVal;
+        });
+        this.$state.go('.', newParams, {location: 'replace', notify: false}).then(() => {
+            if (rebuild) {
+                // fix the filter params to only valid values for checkboxes
+                this.changeFilterParams({
+                    components: this.makeFilterParamsFromCheckboxes(this.typesChecklistModel),
+                    categories: this.makeFilterParamsFromCheckboxes(this.categoriesChecklistModel),
+                    statuses: this.makeFilterParamsFromCheckboxes(this.statusChecklistModel)
+                });
+                // rebuild the checkboxes to show selected
+                this.buildCheckboxLists();
+            }
+        });
+        this.applyFilterParamsToView(this.filterParams);
+    }
+
+    private makeFilteredCategories(categories:Array<IMainCategory>, selectedTypes:Array<string>=[]): Array<IMainCategory> {
+        let filteredCategories = categories.slice();
+
+        const filteredMainTypes = selectedTypes.reduce((acc, st) => {
+            const mainType = st.split('.')[0];
+            if (acc.indexOf(mainType) === -1) {
+                acc.push(mainType);
+            }
+            return acc;
+        }, []);
+
+        // filter by selected types
+        if (filteredMainTypes.length) {
+            const filteredTypesCategories = filteredMainTypes.reduce((acc, mainType: string) => {
+                acc.push(...this.cacheService.get(mainType.toLowerCase() + 'Categories'));
+                return acc;
+            }, []);
+
+            filteredCategories = _.intersectionBy(filteredCategories, filteredTypesCategories, c => c.uniqueId);
+        }
+
+        return filteredCategories;
+    }
+
+    private makeSortedCategories(categories:Array<IMainCategory|ISubCategory|ICategoryBase>, sortBy?:any): Array<IMainCategory|ISubCategory|ICategoryBase> {
+        sortBy = (sortBy !== undefined) ? sortBy : ['name'];
+        let sortedCategories = categories.map(cat => Object.assign({}, cat));  // copy each object in the array
+        sortedCategories = _.sortBy(sortedCategories, sortBy);
+
+        // inner sort of subcategories and groupings
+        sortedCategories.forEach((cat) => {
+            if ('subcategories' in cat && cat['subcategories'] && cat['subcategories'].length > 0) {
+                cat['subcategories'] = this.makeSortedCategories(cat['subcategories'], sortBy);
+            }
+            if ('groupings' in cat && cat['groupings'] && cat['groupings'].length > 0) {
+                cat['groupings'] = this.makeSortedCategories(cat['groupings'], sortBy);
+            }
+        });
+
+        return sortedCategories;
+    }
+
+    private addFilterTermToComponent(component:Component) {
+        component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version;
+        component.filterTerm = component.filterTerm.toLowerCase();
+    }
+
+    private makeFilteredItems(catalogItems:Array<Component>, filter:IEntityFilterObject, search:ISearchFilter, sortBy:string, reverse:boolean) {
+        let filteredComponents:Array<Component> = catalogItems;
+
+        // common entity filter
+        // --------------------------------------------------------------------------
+        filter = Object.assign({ search }, filter);  // add search to entity filter object
+        filteredComponents = EntityFilterPipe.transform(filteredComponents, filter);
+
+        // sort
+        // --------------------------------------------------------------------------
+        if (sortBy) {
+            switch (sortBy) {
+                case 'resourceName':
+                    filteredComponents = _.sortBy(filteredComponents, cat => this.resourceNamePipe.transform(cat.name));
+                    break;
+                default:
+                    filteredComponents = _.sortBy(filteredComponents, [sortBy]);
+            }
+            if (reverse) {
+                _.reverse(filteredComponents);
+            }
+        }
+
+        return filteredComponents;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.module.ts b/catalog-ui/src/app/ng2/pages/catalog/catalog.module.ts
new file mode 100644
index 0000000000..5ef8de01e3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CatalogComponent } from "./catalog.component";
+import { LayoutModule } from "../../components/layout/layout.module";
+import { UiElementsModule } from "../../components/ui/ui-elements.module";
+import { GlobalPipesModule } from "../../pipes/global-pipes.module";
+import { TranslateModule } from "../../shared/translator/translate.module";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import {SdcTileModule} from "../../components/ui/tile/sdc-tile.module";
+
+@NgModule({
+    declarations: [
+        CatalogComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        LayoutModule,
+        UiElementsModule,
+        GlobalPipesModule,
+        TranslateModule,
+        SdcTileModule
+    ],
+    exports: [
+        CatalogComponent
+    ],
+    entryComponents: [
+        CatalogComponent
+    ],
+    providers: []
+})
+export class CatalogModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/common/common-graph-data.service.ts b/catalog-ui/src/app/ng2/pages/composition/common/common-graph-data.service.ts
new file mode 100644
index 0000000000..d4caa5e9ed
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/common/common-graph-data.service.ts
@@ -0,0 +1,64 @@
+import {Injectable} from "@angular/core";
+import 'rxjs/add/observable/forkJoin';
+import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
+import {SelectedComponentType} from "./store/graph.actions";
+import {RelationshipModel} from "../../../../models/graph/relationship";
+
+@Injectable()
+export class CommonGraphDataService {
+
+    public componentInstances: Array<ComponentInstance>;
+    public componentInstancesRelations: RelationshipModel[];
+    public selectedComponentType: SelectedComponentType;
+
+    constructor() {
+    }
+
+    //------------------------ RELATIONS ---------------------------------//
+    public setRelations = (componentInstancesRelations: RelationshipModel[]) => {
+        this.componentInstancesRelations = this.componentInstancesRelations;
+    }
+
+    public getRelations = (): RelationshipModel[] => {
+        return this.componentInstancesRelations;
+    }
+
+    public addRelation = (componentInstancesRelations: RelationshipModel) => {
+        this.componentInstancesRelations.push(componentInstancesRelations);
+    }
+
+    public deleteRelation(relationToDelete: RelationshipModel) {
+        this.componentInstancesRelations = _.filter(this.componentInstancesRelations, (relationship: RelationshipModel) => {
+            return relationship.relationships[0].relation.id !== relationToDelete.relationships[0].relation.id;
+        });
+    }
+
+    //---------------------------- COMPONENT INSTANCES ------------------------------------//
+    public getComponentInstances = (): Array<ComponentInstance> => {
+        return this.componentInstances;
+    }
+
+    public addComponentInstance = (instance: ComponentInstance) => {
+        return this.componentInstances.push(instance);
+    }
+
+    public updateComponentInstances = (componentInstances: ComponentInstance[]) => {
+        _.unionBy(this.componentInstances, componentInstances, 'uniqueId');
+    }
+
+    public updateInstance = (instance: ComponentInstance) => {
+        this.componentInstances = this.componentInstances.map(componentInstance => instance.uniqueId === componentInstance.uniqueId? instance : componentInstance);
+    }
+
+    public deleteComponentInstance(instanceToDelete: string) {
+        this.componentInstances = _.filter(this.componentInstances, (instance: ComponentInstance) => {
+            return instance.uniqueId !== instanceToDelete;
+        });
+    }
+
+    //----------------------------SELECTED COMPONENT -----------------------//
+
+    public setSelectedComponentType = (selectedType: SelectedComponentType) => {
+        this.selectedComponentType = selectedType;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/common/store/graph.actions.ts b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.actions.ts
new file mode 100644
index 0000000000..9bd5d0db62
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.actions.ts
@@ -0,0 +1,33 @@
+export enum SelectedComponentType {
+    COMPONENT_INSTANCE = "COMPONENT_INSTANCE",
+    GROUP = "GROUP",
+    POLICY = "POLICY",
+    TOPOLOGY_TEMPLATE = "TOPOLOGY_TEMPLATE"
+}
+
+export class UpdateSelectedComponentAction {
+    static readonly type = '[COMPOSITION] UpdateSelectedComponent';
+
+        constructor(public payload: {uniqueId?: string, type?: string}) {
+    }
+}
+    
+export class SetSelectedComponentAction {
+    static readonly type = '[COMPOSITION] SetSelectedComponent';
+
+    constructor(public payload: {component?: any, type?: SelectedComponentType}) {
+        }
+}
+
+export class OnSidebarOpenOrCloseAction {
+    static readonly type = '[COMPOSITION] OnSidebarOpenOrCloseAction';
+
+    constructor() {
+    }
+}
+
+export class TogglePanelLoadingAction {
+    static readonly type = '[COMPOSITION] TogglePanelLoading';
+    constructor(public payload: { isLoading: boolean}) {
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts
new file mode 100644
index 0000000000..d58bb446df
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts
@@ -0,0 +1,170 @@
+import { Action, Selector, State, StateContext} from '@ngxs/store';
+import {
+    OnSidebarOpenOrCloseAction,
+    SelectedComponentType,
+    SetSelectedComponentAction,
+    TogglePanelLoadingAction
+} from "./graph.actions";
+import { PolicyInstance, GroupInstance, Component as TopologyTemplate, ComponentInstance, LeftPaletteComponent, FullComponentInstance} from "app/models";
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
+import { tap } from "rxjs/operators";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import {GroupsService} from "../../../../services/groups.service";
+import {PoliciesService} from "../../../../services/policies.service";
+import {WorkspaceService} from "../../../workspace/workspace.service";
+
+export class CompositionStateModel {
+
+    isViewOnly?: boolean;
+    panelLoading?: boolean;
+    selectedComponentType?: SelectedComponentType;
+    selectedComponent?: PolicyInstance | GroupInstance | TopologyTemplate | ComponentInstance;
+    withSidebar?: boolean;
+}
+
+@State<CompositionStateModel>({
+    name: 'composition',
+    defaults: {
+         withSidebar: true
+    }
+})
+export class GraphState {
+
+    constructor(private topologyTemplateService: TopologyTemplateService,
+                private compositionService: CompositionService,
+         private policiesService:PoliciesService, private groupsService:GroupsService,
+                 private workspaceService: WorkspaceService) {}
+
+    @Action(SetSelectedComponentAction)
+    setSelectedComponent({dispatch, getState, patchState}:StateContext<CompositionStateModel>, action: SetSelectedComponentAction) {
+        
+        const state:CompositionStateModel = getState();
+        
+        patchState({ panelLoading: true });
+
+        if(action.payload.component instanceof ComponentInstance){
+            let originComponent = this.compositionService.getOriginComponentById(action.payload.component.getComponentUid());
+            if(!originComponent) {
+                return this.topologyTemplateService.getFullComponent(action.payload.component.originType, action.payload.component.getComponentUid())
+                .pipe(tap(resp => {
+                    this.compositionService.addOriginComponent(resp);
+                    this.compositionService.setSelectedComponentType(SelectedComponentType.COMPONENT_INSTANCE);
+                    patchState({
+                        selectedComponent: new FullComponentInstance(action.payload.component, resp), 
+                        selectedComponentType: action.payload.type,
+                        panelLoading: false
+                    });
+                    }, err => {
+                        patchState({
+                            panelLoading: false
+                        })
+                    }
+                ));
+            } else {
+                patchState({
+                    selectedComponent: new FullComponentInstance(action.payload.component, originComponent), 
+                    selectedComponentType: action.payload.type,
+                    panelLoading: false
+                });
+            }
+        } else if (action.payload.component instanceof PolicyInstance) {
+            let topologyTemplate = this.workspaceService.metadata;
+            return this.policiesService.getSpecificPolicy(topologyTemplate.componentType, topologyTemplate.uniqueId, action.payload.component.uniqueId).pipe(tap(resp => 
+                {
+                    this.compositionService.updatePolicy(resp);
+                    patchState({
+                        selectedComponent: resp, 
+                        selectedComponentType: action.payload.type,
+                        panelLoading: false
+                    })
+                }, err => {
+                    patchState({
+                        panelLoading: false
+                    })
+                 }
+            ));
+        
+        } else if (action.payload.component instanceof GroupInstance) {
+            let topologyTemplate = this.workspaceService.metadata;
+            return this.groupsService.getSpecificGroup(topologyTemplate.componentType, topologyTemplate.uniqueId, action.payload.component.uniqueId).pipe(tap(resp => {
+                this.compositionService.updateGroup(resp);
+                patchState({
+                    selectedComponent: resp,
+                    selectedComponentType: action.payload.type,
+                    panelLoading: false
+                });
+            }, err => {
+                patchState({
+                    panelLoading: false
+                })
+             }
+            ));
+        } else { //TopologyTemplate
+            patchState({
+                selectedComponent: action.payload.component,
+                selectedComponentType: action.payload.type,
+                panelLoading: false
+            })
+        }
+    }
+
+
+    // @Action(UpdateSelectedComponentNameAction)
+    // UpdateSelectedComponentNameAction({patchState}:StateContext<CompositionStateModel>, action: UpdateSelectedComponentNameAction) {
+
+    //     switch(action.payload.type){
+    //         case SelectedComponentType.COMPONENT_INSTANCE:
+    //             this.store.dispatch(new UpdateComponentInstancesAction([action.payload.component]));
+    //             break;
+    //         case SelectedComponentType.POLICY:
+    //             this.store.dispatch(new UpdatePolicyNameAction(action.payload.uniqueId, action.payload.newName));
+    //             break;
+    //         case SelectedComponentType.GROUP:
+    //             this.store.dispatch(new UpdateGroupInstancesAction)
+
+    //     }
+    //     if(action.payload.type === SelectedComponentType.COMPONENT_INSTANCE){
+            
+    //     } 
+    
+    // }
+
+    @Selector() 
+    static getSelectedComponent(state:CompositionStateModel) {
+        return state.selectedComponent;
+    }
+
+    @Selector() 
+    static getSelectedComponentId(state:CompositionStateModel) {
+        return state.selectedComponent.uniqueId;
+    }
+
+    @Selector() 
+    static getSelectedComponentType(state:CompositionStateModel) {
+        return state.selectedComponentType;
+    }
+
+
+    @Action(OnSidebarOpenOrCloseAction)
+    onSidebarOpenOrCloseAction({getState, setState}:StateContext<CompositionStateModel>) {
+        const state:CompositionStateModel = getState();
+
+        setState({
+            ...state,
+            withSidebar: !state.withSidebar
+        });
+    }
+    
+    @Action(TogglePanelLoadingAction)
+    TogglePanelLoading({patchState}:StateContext<CompositionStateModel>, action: TogglePanelLoadingAction) {
+
+        patchState({
+            panelLoading: action.payload.isLoading
+        });
+    }
+
+    @Selector() static withSidebar(state):boolean {
+        return state.withSidebar;
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html
new file mode 100644
index 0000000000..e1851d5c0c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html
@@ -0,0 +1,8 @@
+<div class="workspace-composition-page">
+    <div class="composition-graph">
+        <composition-palette></composition-palette>
+        <app-palette-popup-panel></app-palette-popup-panel>
+        <composition-graph dndDropzone [dndAllowExternal]=true [topologyTemplate]="topologyTemplate" [testId]="'canvas'"></composition-graph>
+        <ng2-composition-panel [topologyTemplate]="topologyTemplate"></ng2-composition-panel>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/composition-page.component.less b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.less
new file mode 100644
index 0000000000..a80333e2be
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.less
@@ -0,0 +1,26 @@
+@import "./../../../../assets/styles/override";
+.workspace-composition-page {
+    height:100%;
+    display: block;
+    text-align: left;
+    align-items: left;
+    padding: 0;
+
+    .composition-graph {
+        height:100%;
+        background-color: @sdcui_color_white;
+        bottom: 0;
+        display:flex;
+        flex-direction: row;
+        
+        .view-mode{
+            background-color: #f8f8f8;
+            border:0;
+        }
+    }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.ts
index 3639639c88..ed1b82e1df 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.ts
@@ -17,23 +17,31 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-
-import * as _ from "lodash";
-import { Component, Inject, Input, Output, EventEmitter } from "@angular/core";
-import { TranslateService } from './../../../../../shared/translator/translate.service';
-import { PolicyInstance } from 'app/models/graph/zones/policy-instance';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component as TopologyTemplate } from 'app/models';
+import * as Constants from 'constants';
+import { EventListenerService } from '../../../services/event-listener-service';
+import { EVENTS } from '../../../utils';
 
 @Component({
-    selector: 'policy-information-tab',
-    templateUrl: './policy-information-tab.component.html',
-    styleUrls: ['./../base/base-tab.component.less']
+    templateUrl: './composition-page.component.html',
+    styleUrls: ['composition-page.component.less']
 })
-export class PolicyInformationTabComponent {
- 
-    @Input() policy:PolicyInstance;
-    @Input() isViewOnly: boolean;
+export class CompositionPageComponent implements OnInit, OnDestroy {
+
+    private topologyTemplate: TopologyTemplate;
 
-    constructor(private translateService:TranslateService) {
+    constructor(@Inject('$stateParams') private stateParams, private eventListenerService: EventListenerService) {
+        this.topologyTemplate = stateParams.component;
     }
 
+    ngOnInit(): void {
+        this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, (comp) => {
+            this.topologyTemplate = comp;
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.eventListenerService.unRegisterObserver(EVENTS.ON_CHECKOUT);
+    }
 }
diff --git a/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts b/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts
new file mode 100644
index 0000000000..d0ca05b2be
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts
@@ -0,0 +1,30 @@
+/**
+ * Created by ob0695 on 6/4/2018.
+ */
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {CompositionGraphModule} from "./graph/composition-graph.module";
+import {CompositionPageComponent} from "./composition-page.component";
+import {NgxsModule} from "@ngxs/store";
+import {PaletteModule} from "./palette/palette.module";
+import {PalettePopupPanelComponent} from "./palette/palette-popup-panel/palette-popup-panel.component";
+import { CompositionPanelModule } from "app/ng2/pages/composition/panel/composition-panel.module";
+import {CompositionService} from "./composition.service";
+import {DndModule} from "ngx-drag-drop";
+import {GraphState} from "./common/store/graph.state";
+
+@NgModule({
+    declarations: [CompositionPageComponent, PalettePopupPanelComponent],
+    imports: [CommonModule,
+        CompositionGraphModule,
+        CompositionPanelModule,
+        PaletteModule,
+        DndModule,
+        NgxsModule.forFeature([
+            GraphState])],
+    exports: [CompositionPageComponent],
+    entryComponents: [CompositionPageComponent],
+    providers: [CompositionService]
+})
+export class CompositionPageModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/composition.service.ts b/catalog-ui/src/app/ng2/pages/composition/composition.service.ts
new file mode 100644
index 0000000000..e5e9d2dca8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/composition.service.ts
@@ -0,0 +1,59 @@
+import {Injectable} from "@angular/core";
+import 'rxjs/add/observable/forkJoin';
+import {Component, PropertiesGroup, AttributesGroup, PolicyInstance} from "app/models";
+import {GroupInstance} from "app/models/graph/zones/group-instance";
+import {CommonGraphDataService} from "./common/common-graph-data.service";
+import {ForwardingPath} from "../../../models/forwarding-path";
+import {SelectedComponentType} from "./common/store/graph.actions";
+
+@Injectable()
+export class CompositionService extends CommonGraphDataService{
+
+    public originComponents: Array<Component>; //This contains the full data set after specifically requesting it. The uniqueId matches the 'componentUid' in the componentInstances array
+    public componentInstancesProperties:PropertiesGroup;
+    public componentInstancesAttributes:AttributesGroup;
+    public groupInstances: GroupInstance[];
+    public policies: PolicyInstance[];
+    public forwardingPaths:  { [key:string]:ForwardingPath };
+    public selectedComponentType: SelectedComponentType;
+
+    //---------------------------- COMPONENT INSTANCES ------------------------------------//
+
+    public getOriginComponentById = (uniqueId:string):Component => {
+        return this.originComponents && this.originComponents.find(instance => instance.uniqueId === uniqueId);
+    }
+
+    public addOriginComponent = (originComponent:Component) => {
+        if(!this.originComponents) this.originComponents = [];
+        if(!this.getOriginComponentById(originComponent.uniqueId)){
+            this.originComponents.push(originComponent);
+        }
+    }
+
+
+    public updateGroup = (instance: GroupInstance) => {
+        this.groupInstances = this.groupInstances.map(group => instance.uniqueId === group.uniqueId? instance : group);
+    }
+
+    public updatePolicy = (instance: PolicyInstance) => {
+        this.policies = this.policies.map(policy => instance.uniqueId === policy.uniqueId? instance : policy);
+    }
+
+    //---------------------------- POLICIES---------------------------------//
+    public addPolicyInstance = (instance: PolicyInstance) => {
+        return this.policies.push(instance);
+    }
+
+
+    //---------------------------- POLICIES---------------------------------//
+    public addGroupInstance = (instance: GroupInstance) => {
+        return this.groupInstances.push(instance);
+    }
+
+
+   //----------------------------SELECTED COMPONENT -----------------------//
+
+    public setSelectedComponentType = (selectedType: SelectedComponentType) => {
+        this.selectedComponentType = selectedType;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.html b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.html
new file mode 100644
index 0000000000..4a163ee24b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.html
@@ -0,0 +1 @@
+<div class="sdc-deployment-graph-wrapper"></div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.less b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.less
new file mode 100644
index 0000000000..9b80fcd651
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.less
@@ -0,0 +1,13 @@
+.sdc-deployment-graph-wrapper {
+   height: 100%;
+   width: 100%;
+
+  ::ng-deep canvas {
+    /*canvas z-index is initialized to 999 while top-nav z-Index is 10, which makes top-nav disappear, so z-Index must be overwritten here*/
+    z-index: 10 !important;
+  }
+ }
+
+::ng-deep .sdc-workspace-container .w-sdc-main-right-container .w-sdc-main-container-body-content.deploy-body-content{
+   padding: 0px;  
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.spec.ts
new file mode 100644
index 0000000000..823086fbbf
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.spec.ts
@@ -0,0 +1,92 @@
+import {async, ComponentFixture} from '@angular/core/testing';
+import 'jest-dom/extend-expect';
+import {DeploymentGraphComponent} from "./deployment-graph.component";
+import {DeploymentGraphService} from "./deployment-graph.service";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import * as cytoscape from "cytoscape/dist/cytoscape"
+import {AngularJSBridge} from "../../../../services/angular-js-bridge-service";
+import {NodesFactory} from "../../../../models/graph/nodes/nodes-factory";
+import {CommonGraphUtils} from "../graph/common/common-graph-utils";
+import {groupsMock} from "../../../../../jest/mocks/groups.mock";
+import {Module} from "../../../../models/modules/base-module";
+import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
+import {componentInstancesMock} from "../../../../../jest/mocks/component-instance.mock";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
+import {WorkspaceService} from "../../workspace/workspace.service";
+import {SdcConfigToken} from "../../../config/sdc-config.config";
+import {CompositionGraphLinkUtils} from "../graph/utils";
+
+describe('DeploymentGraphComponent', () => {
+
+    let fixture: ComponentFixture<DeploymentGraphComponent>;
+    let deploymentGraphServiceMock: Partial<DeploymentGraphService>;
+    let nodeFactoryServiceMock: Partial<NodesFactory>;
+    let commonGraphUtilsServiceMock: Partial<CommonGraphUtils>;
+    let angularJsBridgeServiceMock: Partial<AngularJSBridge>;
+    let sdcConfigTokenMock: Partial<AngularJSBridge>;
+
+    beforeEach(
+        async(() => {
+
+            deploymentGraphServiceMock = {
+                modules: <Array<Module>>groupsMock,
+                componentInstances: <Array<ComponentInstance>>componentInstancesMock
+            }
+
+            nodeFactoryServiceMock = {
+                createModuleNode: jest.fn().mockResolvedValue(() => {
+                }),
+                createNode: jest.fn().mockResolvedValue(() => {
+                })
+            }
+
+            commonGraphUtilsServiceMock = {
+                addNodeToGraph: jest.fn(),
+                addComponentInstanceNodeToGraph: jest.fn()
+            }
+
+            sdcConfigTokenMock = {
+                imagePath: ''
+            }
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [DeploymentGraphComponent],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: DeploymentGraphService, useValue: deploymentGraphServiceMock},
+                        {provide: NodesFactory, useValue: nodeFactoryServiceMock},
+                        {provide: TopologyTemplateService, useValue: {}},
+                        {provide: WorkspaceService, useValue: {}},
+                        {provide: CommonGraphUtils, useValue: commonGraphUtilsServiceMock},
+                        {provide: CompositionGraphLinkUtils, useValue: {}},
+                        {provide: AngularJSBridge, useValue: angularJsBridgeServiceMock},
+                        {provide: SdcConfigToken, useValue: SdcConfigToken}
+                    ]
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(DeploymentGraphComponent);
+            });
+        })
+    );
+
+    it('expected deployment graph component to be defined', () => {
+        expect(fixture).toBeDefined();
+    });
+
+
+    it('expected to addNodeToGraph to haveBeenCalled 6 times out of 7 cause one of the instances have no parent module', () => {
+        fixture.componentInstance._cy = cytoscape({
+            zoomingEnabled: false,
+            selectionType: 'single',
+        });
+        jest.spyOn(fixture.componentInstance, 'findInstanceModule');
+        fixture.componentInstance.initGraphComponentInstances();
+        expect(fixture.componentInstance.findInstanceModule).toHaveBeenCalledTimes(7);
+        expect(commonGraphUtilsServiceMock.addComponentInstanceNodeToGraph).toHaveBeenCalledTimes(6);
+    });
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.ts b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.ts
new file mode 100644
index 0000000000..143a759960
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.ts
@@ -0,0 +1,127 @@
+import {Component, ElementRef, Inject, OnInit} from "@angular/core";
+import {DeploymentGraphService} from "./deployment-graph.service";
+import '@bardit/cytoscape-expand-collapse';
+import * as _ from "lodash";
+import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
+import {WorkspaceService} from "../../workspace/workspace.service";
+import {NodesFactory} from "../../../../models/graph/nodes/nodes-factory";
+import {CommonGraphUtils} from "../graph/common/common-graph-utils";
+import {ISdcConfig, SdcConfigToken} from "../../../config/sdc-config.config";
+import {Module} from "../../../../models/modules/base-module";
+import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
+import {ComponentGenericResponse} from "../../../services/responses/component-generic-response";
+import {ComponentInstanceFactory} from "../../../../utils/component-instance-factory";
+import {ModulesNodesStyle} from "../graph/common/style/module-node-style";
+import {ComponentInstanceNodesStyle} from "../graph/common/style/component-instances-nodes-style";
+import {CompositionGraphLinkUtils} from "../graph/utils/composition-graph-links-utils";
+
+@Component({
+    selector: 'deployment-graph',
+    templateUrl: './deployment-graph.component.html',
+    styleUrls: ['./deployment-graph.component.less']
+})
+
+export class DeploymentGraphComponent implements OnInit {
+    constructor(private elRef: ElementRef,
+                private topologyTemplateService: TopologyTemplateService,
+                private workspaceService: WorkspaceService,
+                private deploymentService: DeploymentGraphService,
+                private commonGraphUtils: CommonGraphUtils,
+                private nodeFactory: NodesFactory,
+                private commonGraphLinkUtils: CompositionGraphLinkUtils,
+                @Inject(SdcConfigToken) private sdcConfig: ISdcConfig) {
+
+    }
+
+    public _cy: Cy.Instance;
+
+    ngOnInit(): void {
+        this.topologyTemplateService.getDeploymentGraphData(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId).subscribe((response: ComponentGenericResponse) => {
+            this.deploymentService.componentInstances = response.componentInstances;
+            this.deploymentService.componentInstancesRelations = response.componentInstancesRelations;
+            this.deploymentService.modules = response.modules;
+            this.loadGraph();
+        });
+    }
+
+    public findInstanceModule = (groupsArray: Array<Module>, componentInstanceId: string): string => {
+        let parentGroup: Module = _.find(groupsArray, (group: Module) => {
+            return _.find(_.values(group.members), (member: string) => {
+                return member === componentInstanceId;
+            });
+        });
+        return parentGroup ? parentGroup.uniqueId : "";
+    };
+
+    public initGraphModules = () => {
+        if (this.deploymentService.modules) { // Init module nodes
+            _.each(this.deploymentService.modules, (groupModule: Module) => {
+                let moduleNode = this.nodeFactory.createModuleNode(groupModule);
+                this.commonGraphUtils.addNodeToGraph(this._cy, moduleNode);
+            });
+        }
+    }
+
+    public initGraphComponentInstances = () => {
+        _.each(this.deploymentService.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
+            let componentInstanceNode = this.nodeFactory.createNode(instance);
+            componentInstanceNode.parent = this.findInstanceModule(this.deploymentService.modules, instance.uniqueId);
+            if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
+                this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, componentInstanceNode);
+            }
+        });
+    }
+
+    public handleEmptyModule = () => {
+        // 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 = ComponentInstanceFactory.createEmptyComponentInstance();
+                let componentInstanceNode = this.nodeFactory.createNode(dummyInstance);
+                componentInstanceNode.parent = moduleNode.id();
+                let dummyNode = this.commonGraphUtils.addNodeToGraph(this._cy, componentInstanceNode, moduleNode.position());
+                dummyNode.addClass('dummy-node');
+            }
+        })
+    }
+
+    public initGraphNodes = (): void => {
+        this.initGraphModules();
+        this.initGraphComponentInstances();
+        this.handleEmptyModule();
+    };
+
+    private loadGraph = () => {
+
+        let graphEl = this.elRef.nativeElement.querySelector('.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: this.sdcConfig.imagesPath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
+            collapseCueImage: this.sdcConfig.imagesPath + '/assets/styles/images/resource-icons/' + 'openModule.png',
+            expandCollapseCueSensitivity: 2,
+            cueOffset: -20
+        });
+
+        this.initGraphNodes(); //creating instances nodes
+        this.commonGraphLinkUtils.initGraphLinks(this._cy, this.deploymentService.componentInstancesRelations);
+        this._cy.collapseAll();
+    };
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.module.ts b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.module.ts
new file mode 100644
index 0000000000..91f97db8c3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.module.ts
@@ -0,0 +1,15 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {DeploymentGraphComponent} from "./deployment-graph.component";
+
+@NgModule({
+    declarations: [DeploymentGraphComponent],
+    imports: [CommonModule],
+    exports: [DeploymentGraphComponent],
+    entryComponents: [DeploymentGraphComponent],
+    providers: [
+
+    ]
+})
+export class DeploymentGraphModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.service.ts b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.service.ts
new file mode 100644
index 0000000000..7ec346c20b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.service.ts
@@ -0,0 +1,8 @@
+import {Injectable} from "@angular/core";
+import 'rxjs/add/observable/forkJoin';
+import {CommonGraphDataService} from "../common/common-graph-data.service";
+import {Module} from "../../../../models/modules/base-module";
+@Injectable()
+export class DeploymentGraphService extends CommonGraphDataService {
+    public modules:Array<Module>;
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.html
new file mode 100644
index 0000000000..a8645dc5f0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.html
@@ -0,0 +1,23 @@
+<div class="canvas-search-component" [ngClass]="{'results-shown': autoCompleteResults.length}"
+     [class.canvas-search-visible]="autoCompleteValues && autoCompleteValues.length" [attr.data-tests-id]="testId">
+    <div class="canvas-search-bar-container" [attr.data-tests-id]="testId"
+         [class.active]="searchQuery && searchQuery.length">
+        <sdc-search-bar class="canvas-search-bar"
+              [placeHolder]="placeholder"
+              (onSearchClicked)="onSearchClicked($event)"
+              [size]="'medium'"
+              [value]="searchQuery"
+              (valueChange)="onSearchQueryChanged($event)">
+        </sdc-search-bar>
+        <svg-icon class="canvas-clear-search"
+              [name]="'close'"
+              [clickable]="true"
+              [mode]="'secondary'"
+              [size]="'small'"
+              (click)="onClearSearch()">
+        </svg-icon>
+    </div>
+    <dropdown-results *ngIf="autoCompleteResults && autoCompleteResults.length" [options]="autoCompleteResults"
+                      (onItemSelected)="onItemSelected($event)"></dropdown-results>
+</div>
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less
new file mode 100644
index 0000000000..247f2a3913
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less
@@ -0,0 +1,42 @@
+.canvas-search-component {
+
+  .canvas-search-bar-container {
+    display:flex;
+    border-radius: 4px;
+    align-items: center;
+    box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
+
+    /deep/.sdc-search-bar .search-bar-container .search-button {
+      border: solid 1px #d2d2d2;
+    }
+
+    /deep/.sdc-input__input {
+      width: 250px;
+      transition: all 0.4s;
+    }
+
+    .canvas-clear-search {
+      position: absolute;
+      right: 45px;
+    }
+  }
+
+  &:not(:hover):not(.canvas-search-visible):not(.active) {
+    border-radius: 0;
+    box-shadow: none;
+
+    /deep/.sdc-input__input:not(:focus) {
+      border: none;
+      padding: 0px;
+      width: 0px;
+    }
+    .canvas-clear-search {
+      display: none;
+    }
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.ts
new file mode 100644
index 0000000000..c1a45a9a4b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.ts
@@ -0,0 +1,25 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {AutoCompleteComponent} from "onap-ui-angular/dist/autocomplete/autocomplete.component";
+
+@Component({
+    selector: 'canvas-search',
+    templateUrl: './canvas-search.component.html',
+    styleUrls: ['./canvas-search.component.less']
+})
+export class CanvasSearchComponent extends AutoCompleteComponent {
+
+    @Output() public searchButtonClicked: EventEmitter<string> = new EventEmitter<string>();
+    @Output() public onSelectedItem: EventEmitter<string> = new EventEmitter<string>();
+
+    public onSearchClicked = (searchText:string)=> {
+        this.searchButtonClicked.emit(searchText);
+    }
+
+    public onItemSelected = (selectedItem) => {
+        this.searchQuery = selectedItem.value;
+        this.autoCompleteResults = [];
+        this.searchButtonClicked.emit(this.searchQuery);
+        this.onSelectedItem.emit(selectedItem);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.module.ts
new file mode 100644
index 0000000000..6df06067a6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.module.ts
@@ -0,0 +1,30 @@
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import { NgModule } from "@angular/core";
+import {CanvasSearchComponent} from "./canvas-search.component";
+import {CommonModule} from "@angular/common";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {HttpClientModule} from "@angular/common/http";
+import {BrowserModule} from "@angular/platform-browser";
+import {AutocompletePipe} from "onap-ui-angular/dist/autocomplete/autocomplete.pipe";
+
+@NgModule({
+    declarations: [
+        CanvasSearchComponent
+    ],
+    imports: [
+        CommonModule,
+        BrowserModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        SdcUiComponentsModule,
+    ],
+    exports: [
+        CanvasSearchComponent
+    ],
+    entryComponents: [
+        CanvasSearchComponent
+    ],
+    providers: [AutocompletePipe]
+})
+export class CanvasSearchModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/__snapshots__/zone-container.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/__snapshots__/zone-container.component.spec.ts.snap
new file mode 100644
index 0000000000..d4e2a7a359
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/__snapshots__/zone-container.component.spec.ts.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ZoneContainerComponent should match current snapshot of palette element component 1`] = `
+<zone-container
+  backgroundClick={[Function EventEmitter]}
+  backgroundClicked={[Function Function]}
+  minimize={[Function EventEmitter]}
+  unminifyZone={[Function Function]}
+>
+  <div>
+    <div
+      class="sdc-canvas-zone__header"
+    >
+      <div
+        class="sdc-canvas-zone__title"
+      >
+        
+        <span
+          class="sdc-canvas-zone__counter"
+        >
+          
+        </span>
+      </div>
+      <span
+        class="sdc-canvas-zone__state-button"
+      >
+        –
+      </span>
+    </div>
+    <div
+      class="sdc-canvas-zone__container"
+    />
+  </div>
+</zone-container>
+`;
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.html
index 50a93fac3c..d6343a4a4f 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.html
@@ -15,14 +15,16 @@
   -->
  
  
-<div class="sdc-canvas-zone {{class}}-zone" [class.minimized]="minimized" [class.hidden]="!visible" (click)="backgroundClicked()">
-    <div class="sdc-canvas-zone__header" (click)="unminifyZone(); $event.stopPropagation();" >
-        <div class="sdc-canvas-zone__title">{{title}} 
+<div class="sdc-canvas-zone {{class}}-zone" [class.minimized]="minimized" [class.hidden]="!visible"
+     (click)="backgroundClicked()">
+    <div class="sdc-canvas-zone__header" (click)="unminifyZone(); $event.stopPropagation();">
+        <div class="sdc-canvas-zone__title">{{title}}
             <span class="sdc-canvas-zone__counter">{{count}}</span>
         </div>
         <span class="sdc-canvas-zone__state-button">&ndash;</span>
     </div>
-    <div class="sdc-canvas-zone__container" #scrollDiv >
+    <div class="sdc-canvas-zone__container" #scrollDiv>
         <ng-content></ng-content>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.less
index 02880a9202..827786cc49 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.less
@@ -3,12 +3,12 @@
     max-height:186px;
     display:flex;
     flex-direction:column;
-    align-self: flex-end;
     color:white;
     font-family:OpenSans-Regular, sans-serif;
     transition: width .2s ease-in-out, max-height .2s ease-in-out .1s;
     position:relative;
     bottom:0px;
+    margin-right: 5px; 
     
     .sdc-canvas-zone__header {
         background: #5A5A5A;
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.spec.ts
new file mode 100644
index 0000000000..c432054492
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.spec.ts
@@ -0,0 +1,46 @@
+import {async, ComponentFixture} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {ConfigureFn, configureTests} from '../../../../../../jest/test-config.helper';
+import 'jest-dom/extend-expect';
+import {ZoneInstanceType} from '../../../../../../app/models/graph/zones/zone-instance';
+import {ZoneContainerComponent} from './zone-container.component';
+
+
+describe('ZoneContainerComponent', () => {
+    let fixture: ComponentFixture<ZoneContainerComponent>;
+
+    beforeEach(
+        async(() => {
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [ZoneContainerComponent]
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(ZoneContainerComponent);
+            });
+        })
+    );
+
+
+    it('should match current snapshot of palette element component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should have a group-zone class when the ZoneInstanceType is GROUP',
+        () => {
+            fixture.componentInstance.type = ZoneInstanceType.GROUP;
+            fixture.detectChanges();
+            const compiled = fixture.debugElement.query(By.css('.sdc-canvas-zone'));
+            expect(compiled.nativeElement).toHaveClass('group-zone');
+        });
+
+    it('should have a policy-zone class when the ZoneInstanceType is POLICY',
+        () => {
+            fixture.componentInstance.type = ZoneInstanceType.POLICY;
+            fixture.detectChanges();
+            const compiled = fixture.debugElement.query(By.css('.sdc-canvas-zone'));
+            expect(compiled.nativeElement).toHaveClass('policy-zone');
+        });
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.ts
index 4059ad6cae..4757c1f36d 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, Output, ViewEncapsulation, EventEmitter, OnInit } from '@angular/core';
-import { ZoneInstanceType } from '../../../../models/graph/zones/zone-instance';
+import { ZoneInstanceType } from 'app/models/graph/zones/zone-instance';
 
 @Component({
     selector: 'zone-container',
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.html
index 728764c427..d97be69e34 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.html
@@ -12,15 +12,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  -->
- 
- 
-<div tooltip="{{zoneInstance.instanceData.name}}"  #currentComponent
-        class="zone-instance mode-{{zoneInstance.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER" [class.hiding]="hidden"
+
+
+<div #currentComponent class="zone-instance mode-{{zoneInstance.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER"
+     [class.hiding]="hidden"
      (mouseenter)="setMode(MODE.HOVER)" (mouseleave)="setMode(MODE.NONE)" (click)="setMode(MODE.SELECTED, $event)">
-        <div *ngIf="zoneInstance.handle" class="target-handle {{zoneInstance.handle}}" (click)="tagHandleClicked($event)"></div>
+    <div class="zone-instance__body" sdc-tooltip tooltip-text="{{zoneInstance.instanceData.name}}" [attr.data-tests-id]="zoneInstance.instanceData.name">
+        <div *ngIf="zoneInstance.handle" class="target-handle {{zoneInstance.handle}}"
+             (click)="tagHandleClicked($event)"></div>
         <div *ngIf="!isViewOnly" class="zone-instance__handle" (click)="setMode(MODE.TAG, $event)">+</div>
-        <div class="zone-instance__body">
-            <div class="zone-instance__body-content">{{zoneInstance.assignments.length || defaultIconText}}</div>
-        </div>
-        <div class="zone-instance__name">{{zoneInstance.instanceData.name}}</div>
-</div>
\ No newline at end of file
+        <div class="zone-instance__body-content">{{zoneInstance.assignments.length || defaultIconText}}</div>
+    </div>
+    <div class="zone-instance__name">{{zoneInstance.instanceData.name}}</div>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.less
index b562c08514..c34b8e149a 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.less
@@ -1,7 +1,7 @@
-@import '../../../../../../assets/styles/variables';
+@import '../../../../../../../assets/styles/variables';
 
 .zone-instance {
-    position:relative;
+    
     width:76px;
     margin:5px;
     opacity:1;
@@ -9,8 +9,8 @@
     .zone-instance__handle {
         display:none;
         position:absolute;
-        right:4px;
-        top:10px;
+        left: 31px;
+        top: 8px;
         width:22px;
         height:22px;
         cursor:pointer;
@@ -21,6 +21,7 @@
     }
 
     .zone-instance__body {
+        position:relative;
         margin:0 auto;
         width:43px;
         height:43px;
@@ -55,16 +56,16 @@
         height:18px;
         display:block;
         top: -4px;
-        right: 10px;
+        right: -6px;
         background-size: 100% 100%;
-        cursor: url("../../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
+        cursor: url("../../../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
 
         &.tagged-policy {
-            background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/policy_added.svg');
+            background-image: url('../../../../../../../assets/styles/images/canvas-tagging-icons/policy_added.svg');
         }
     
         &.tag-available {
-            background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/indication.svg');
+            background-image: url('../../../../../../../assets/styles/images/canvas-tagging-icons/indication.svg');
         }
     }
 
@@ -99,8 +100,8 @@
     &.mode-3 .zone-instance__handle {
         width:24px;
         height:24px;
-        right:3px;
-        top:9px;
+        right:-6px;
+        top:7px;
         display:block;
         background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%);
         border: 2px solid @main_color_p;
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.spec.ts
new file mode 100644
index 0000000000..f5a5f6f546
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.spec.ts
@@ -0,0 +1,132 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { SimpleChanges } from '@angular/core';
+import { PoliciesService } from 'app/ng2/services/policies.service';
+import { GroupsService } from 'app/ng2/services/groups.service';
+import { EventListenerService } from 'app/services';
+import { Store } from '@ngxs/store';
+import { CompositionService } from 'app/ng2/pages/composition/composition.service';
+import { ZoneInstanceComponent } from './zone-instance.component';
+import { ZoneInstanceType, ZoneInstance, ZoneInstanceMode, ZoneInstanceAssignmentType, IZoneInstanceAssignment } from "app/models";
+import { PolicyInstance } from "app/models/graph/zones/policy-instance";
+import { Subject, of } from 'rxjs';
+import { _throw } from 'rxjs/observable/throw';
+
+describe('ZoneInstanceComponent', () => {
+  let component: ZoneInstanceComponent;
+  let fixture: ComponentFixture<ZoneInstanceComponent>;
+
+  let createPolicyInstance = () => {
+    let policy = new PolicyInstance();
+    policy.targets = {COMPONENT_INSTANCES: [], GROUPS: []};
+    return new ZoneInstance(policy, '', '');
+  }
+
+  beforeEach(() => {
+    const policiesServiceStub = {updateZoneInstanceAssignments : jest.fn()};
+    const groupsServiceStub = {};
+    const eventListenerServiceStub = {};
+    const storeStub = {};
+    const compositionServiceStub = {};
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [ZoneInstanceComponent],
+      providers: [
+        { provide: PoliciesService, useValue: policiesServiceStub },
+        { provide: GroupsService, useValue: groupsServiceStub },
+        { provide: EventListenerService, useValue: eventListenerServiceStub },
+        { provide: Store, useValue: storeStub },
+        { provide: CompositionService, useValue: compositionServiceStub }
+      ]
+    }).compileComponents().then(() => {
+      fixture = TestBed.createComponent(ZoneInstanceComponent);
+      component = fixture.componentInstance;
+    });
+  });
+
+  it('can load instance',  async((done) => {
+    component.zoneInstance = <ZoneInstance>{type : ZoneInstanceType.POLICY, instanceData: {name: 'test policy'}, assignments: []};
+    component.forceSave = new Subject<Function>();
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  }));
+  
+
+  it('if another instance is already tagging, i cannot change my mode', ()=> {
+    component.zoneInstance = <ZoneInstance>{ mode: ZoneInstanceMode.NONE };
+    component.isActive = false;
+    component.activeInstanceMode = ZoneInstanceMode.TAG;
+    component.setMode(ZoneInstanceMode.SELECTED);
+    expect(component.zoneInstance.mode).toBe(ZoneInstanceMode.NONE);
+  });
+  
+  it('if i am active(selected) and NOT in tag mode, I can set another mode', ()=> {
+    component.isActive = true;
+    component.zoneInstance = <ZoneInstance>{ mode: ZoneInstanceMode.SELECTED };
+    jest.spyOn(component.modeChange, 'emit');
+    component.setMode(ZoneInstanceMode.NONE);
+    expect(component.modeChange.emit).toHaveBeenCalledWith({instance: component.zoneInstance, newMode: ZoneInstanceMode.NONE });
+  });
+
+  it('if i am active and in tag mode and i try to set mode other than tag, I am not allowed', ()=> {
+    component.isActive = true;
+    component.zoneInstance = <ZoneInstance>{ mode: ZoneInstanceMode.TAG };
+    component.setMode(ZoneInstanceMode.SELECTED);
+    expect(component.zoneInstance.mode).toBe(ZoneInstanceMode.TAG);
+  });
+
+  it('if i am active and in tag mode and click tag again and no changes, does NOT call save, but DOES turn tagging off', ()=> {
+    component.isActive = true;
+    component.zoneInstance = createPolicyInstance();
+    component.zoneService = component.policiesService;
+    component.zoneInstance.mode = ZoneInstanceMode.TAG;
+    jest.spyOn(component.zoneService, 'updateZoneInstanceAssignments');
+    jest.spyOn(component.modeChange, 'emit');
+
+    component.setMode(ZoneInstanceMode.TAG);
+
+    expect(component.zoneService.updateZoneInstanceAssignments).not.toHaveBeenCalled();
+    expect(component.modeChange.emit).toHaveBeenCalledWith({instance: component.zoneInstance, newMode: ZoneInstanceMode.NONE });
+
+  });
+  it('if i am active and in tag mode and click tag again and HAVE changes, calls save AND turns tagging off', ()=> {
+    component.isActive = true;
+    component.zoneInstance = createPolicyInstance();
+    component.zoneService = component.policiesService;
+    component.zoneInstance.mode = ZoneInstanceMode.TAG;
+    component.zoneInstance.assignments.push(<IZoneInstanceAssignment>{uniqueId: '123', type: ZoneInstanceAssignmentType.COMPONENT_INSTANCES});
+    jest.spyOn(component.zoneService, 'updateZoneInstanceAssignments').mockReturnValue(of(true));
+    jest.spyOn(component.modeChange, 'emit');
+
+    component.setMode(ZoneInstanceMode.TAG);
+
+    expect(component.zoneService.updateZoneInstanceAssignments).toHaveBeenCalled();
+    expect(component.modeChange.emit).toHaveBeenCalledWith({instance: component.zoneInstance, newMode: ZoneInstanceMode.NONE });
+  });
+
+  it('on save error, temporary assignment list is reverted to saved assignments', ()=> {
+    component.isActive = true;
+    component.zoneInstance = createPolicyInstance();
+    component.zoneService = component.policiesService;
+    component.zoneInstance.mode = ZoneInstanceMode.TAG;
+    component.zoneInstance.assignments.push(<IZoneInstanceAssignment>{uniqueId: '123', type: ZoneInstanceAssignmentType.COMPONENT_INSTANCES});
+    jest.spyOn(component.zoneService, 'updateZoneInstanceAssignments').mockReturnValue(_throw({status: 404}));
+
+    component.setMode(ZoneInstanceMode.TAG);
+
+    expect(component.zoneInstance.assignments.length).toEqual(0);
+  });
+
+  it('on save success, all changes are saved to zoneInstance.savedAssignments', ()=> {
+    component.isActive = true;
+    component.zoneInstance = createPolicyInstance();
+    component.zoneService = component.policiesService;
+    component.zoneInstance.mode = ZoneInstanceMode.TAG;
+    component.zoneInstance.assignments.push(<IZoneInstanceAssignment>{uniqueId: '123', type: ZoneInstanceAssignmentType.COMPONENT_INSTANCES});
+    jest.spyOn(component.zoneService, 'updateZoneInstanceAssignments').mockReturnValue(of(true));
+
+    component.setMode(ZoneInstanceMode.TAG);
+
+    expect(component.zoneInstance.instanceData.getSavedAssignments().length).toEqual(1);
+  });
+});
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.ts
index 3c2dd45db5..1b1363e576 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-instance/zone-instance.component.ts
@@ -3,12 +3,17 @@ import {
     ZoneInstance, ZoneInstanceMode, ZoneInstanceType,
     IZoneInstanceAssignment
 } from 'app/models/graph/zones/zone-instance';
-import { PoliciesService } from '../../../../services/policies.service';
-import { GroupsService } from '../../../../services/groups.service';
-import { IZoneService } from "../../../../../models/graph/zones/zone";
+import { PoliciesService } from 'app/ng2/services/policies.service';
+import { GroupsService } from 'app/ng2/services/groups.service';
+import { IZoneService } from "app/models/graph/zones/zone";
 import { EventListenerService } from 'app/services';
-import { GRAPH_EVENTS } from '../../../../../utils';
-import { Subject, Observable } from 'rxjs';
+import { GRAPH_EVENTS } from 'app/utils';
+import { Subject } from 'rxjs';
+import { Store } from "@ngxs/store";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import { PolicyInstance } from "app/models";
+import {SelectedComponentType, SetSelectedComponentAction} from "../../../common/store/graph.actions";
+
 
 @Component({
     selector: 'zone-instance',
@@ -33,7 +38,7 @@ export class ZoneInstanceComponent implements OnInit {
     private MODE = ZoneInstanceMode;
     private zoneService:IZoneService;
 
-    constructor(private policiesService:PoliciesService, private groupsService:GroupsService, private eventListenerService:EventListenerService){}
+    constructor(private policiesService:PoliciesService, private groupsService:GroupsService, private eventListenerService:EventListenerService, private compositionService:CompositionService, private store:Store){}
 
     ngOnInit(){
         if(this.zoneInstance.type == ZoneInstanceType.POLICY){
@@ -41,9 +46,11 @@ export class ZoneInstanceComponent implements OnInit {
         } else {
             this.zoneService = this.groupsService;
         }
-        this.forceSave.subscribe((afterSaveFunction:Function) => {
-            this.setMode(ZoneInstanceMode.TAG, null, afterSaveFunction);
-        })
+        if(this.forceSave) {
+            this.forceSave.subscribe((afterSaveFunction:Function) => {
+                this.setMode(ZoneInstanceMode.TAG, null, afterSaveFunction);
+            })
+        }
     }
 
     ngOnChanges(changes:SimpleChanges) {
@@ -53,7 +60,9 @@ export class ZoneInstanceComponent implements OnInit {
     }
 
     ngOnDestroy() {
-        this.forceSave.unsubscribe();
+        if(this.forceSave) {
+            this.forceSave.unsubscribe();
+        }
     }
 
     private setMode = (mode:ZoneInstanceMode, event?:any, afterSaveCallback?:Function):void => {
@@ -79,11 +88,17 @@ export class ZoneInstanceComponent implements OnInit {
                 this.zoneService.updateZoneInstanceAssignments(this.zoneInstance.parentComponentType, this.zoneInstance.parentComponentID, this.zoneInstance.instanceData.uniqueId, this.zoneInstance.assignments).subscribe(
                     (success) => {
                         this.zoneInstance.instanceData.setSavedAssignments(this.zoneInstance.assignments);
-                        if(this.zoneInstance.type === ZoneInstanceType.POLICY){
+                        
+                        if(this.zoneInstance.instanceData instanceof PolicyInstance){
+                            this.compositionService.updatePolicy(this.zoneInstance.instanceData);
                             this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.zoneInstance.instanceData);
+                            this.store.dispatch(new SetSelectedComponentAction({component: this.zoneInstance.instanceData, type: SelectedComponentType.POLICY}));
                         } else {
+                            this.compositionService.updateGroup(this.zoneInstance.instanceData);
                             this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.zoneInstance.instanceData);
+                            this.store.dispatch(new SetSelectedComponentAction({component: this.zoneInstance.instanceData, type: SelectedComponentType.GROUP}));
                         }
+
                         this.assignmentSaveComplete.emit(true);
                         if(afterSaveCallback) afterSaveCallback();
                     }, (error) => {
@@ -94,12 +109,15 @@ export class ZoneInstanceComponent implements OnInit {
                 if(afterSaveCallback) afterSaveCallback();
             }
             this.modeChange.emit({newMode: ZoneInstanceMode.NONE, instance: this.zoneInstance});
+            // this.store.dispatch(new unsavedChangesActions.RemoveUnsavedChange(this.zoneInstance.instanceData.uniqueId));
+
 
         } else {
             this.modeChange.emit({newMode: mode, instance: this.zoneInstance});
+            if(mode == ZoneInstanceMode.TAG){
+                // this.store.dispatch(new unsavedChangesActions.AddUnsavedChange(this.zoneInstance.instanceData.uniqueId));
+            }
         }         
-        
-
     } 
 
     private tagHandleClicked = (event:Event) => {
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zones-module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zones-module.ts
new file mode 100644
index 0000000000..3287c01f5a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zones-module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ZoneContainerComponent } from "./zone-container.component";
+import { ZoneInstanceComponent } from "./zone-instance/zone-instance.component";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+
+@NgModule({
+    declarations: [ZoneContainerComponent, ZoneInstanceComponent],
+    imports: [CommonModule, SdcUiComponentsModule],
+    entryComponents: [ZoneContainerComponent, ZoneInstanceComponent],
+    exports: [ZoneContainerComponent, ZoneInstanceComponent],
+    providers: []
+})
+export class ZoneModules {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/common/common-graph-utils.ts
index 81d41509e7..bfc540e97e 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/common/common-graph-utils.ts
@@ -19,16 +19,21 @@
  */
 
 import * as _ from "lodash";
-import {CommonNodeBase, CompositionCiLinkBase, RelationshipModel, Relationship, CompositionCiNodeBase, NodesFactory, LinksFactory} from "app/models";
-import {GraphUIObjects} from "app/utils";
+import {
+    CommonNodeBase,
+    Relationship,
+    CompositionCiNodeBase
+} from "app/models";
 import {CompositionCiServicePathLink} from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
 import {Requirement, Capability} from "app/models";
-/**
- * Created by obarda on 12/21/2016.
- */
+import {Injectable} from "@angular/core";
+
+
+
+@Injectable()
 export class CommonGraphUtils {
 
-    constructor(private NodesFactory:NodesFactory, private LinksFactory:LinksFactory) {
+    constructor() {
 
     }
 
@@ -59,9 +64,7 @@ export class CommonGraphUtils {
             classes: compositionGraphNode.classes
         });
 
-        if(!node.data().isUcpe) { //ucpe should not have tooltip
-            this.initNodeTooltip(node);
-        }
+        this.initNodeTooltip(node);
         return node;
     };
 
@@ -80,101 +83,10 @@ export class CommonGraphUtils {
         };
 
         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();
-        }
-    };
-
-    /**
-     * Returns relation source and target nodes.
-     * @param nodes - all nodes in graph in order to find the edge connecting the two nodes
-     * @param fromNodeId
-     * @param toNodeId
-     * @returns [source, target] array of source node and target node.
-     */
-    public getRelationNodes(nodes:Cy.CollectionNodes, fromNodeId:string, toNodeId:string) {
-        return [
-            _.find(nodes, (node:Cy.CollectionFirst) => node.data().id === fromNodeId),
-            _.find(nodes, (node:Cy.CollectionFirst) => node.data().id === toNodeId)
-        ];
-    }
-
-    /**
-     * Add link to graph - only draw the link
-     * @param cy
-     * @param link
-     * @param getRelationRequirementCapability
-     */
-    public insertLinkToGraph = (cy:Cy.Instance, link:CompositionCiLinkBase, getRelationRequirementCapability:Function) => {
-        const relationNodes = this.getRelationNodes(cy.nodes(), link.source, link.target);
-        const sourceNode:CompositionCiNodeBase = relationNodes[0] && relationNodes[0].data();
-        const targetNode:CompositionCiNodeBase = relationNodes[1] && relationNodes[1].data();
-        if ((sourceNode && !sourceNode.certified) || (targetNode && !targetNode.certified)) {
-            link.classes = 'not-certified-link';
-        }
-        let linkElement = cy.add({
-            group: 'edges',
-            data: link,
-            classes: link.classes
-        });
-        const getLinkRequirementCapability = () =>
-            getRelationRequirementCapability(link.relation.relationships[0], sourceNode.componentInstance, targetNode.componentInstance);
-        this.initLinkTooltip(linkElement, link.relation.relationships[0], getLinkRequirementCapability);
-    };
-
-    /**
      * Add service path link to graph - only draw the link
      * @param cy
      * @param link
@@ -235,7 +147,7 @@ export class CommonGraphUtils {
     public initServicePathTooltip(linkElement:Cy.CollectionElements, link:CompositionCiServicePathLink) {
         let content = function () {
             return '<div class="line">' +
-                '<div>'+link.pathName+'</div>' +
+                '<div>' + link.pathName + '</div>' +
                 '</div>';
         };
         linkElement.qtip(this.prepareInitTooltipData({content}));
@@ -246,7 +158,7 @@ export class CommonGraphUtils {
             position: {
                 my: 'top center',
                 at: 'bottom center',
-                adjust: {x:0, y:0},
+                adjust: {x: 0, y: 0},
                 effect: false
             },
             style: {
@@ -266,90 +178,17 @@ export class CommonGraphUtils {
         }, options);
     }
 
-    /**
-     *  go over the relations and draw links on the graph
-     * @param cy
-     * @param instancesRelations
-     * @param getRelationRequirementCapability - function to get requirement and capability of a relation
-     */
-    public initGraphLinks(cy:Cy.Instance, instancesRelations:Array<RelationshipModel>, getRelationRequirementCapability:Function) {
-
-        if (instancesRelations) {
-            _.forEach(instancesRelations, (relationshipModel:RelationshipModel) => {
-                _.forEach(relationshipModel.relationships, (relationship:Relationship) => {
-                    let linkToCreate = this.LinksFactory.createGraphLink(cy, relationshipModel, relationship);
-                    this.insertLinkToGraph(cy, linkToCreate, getRelationRequirementCapability);
-                });
-            });
-        }
-    }
-
-    /**
-     *  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 => {
+    public getCytoscapeNodePosition = (cy:Cy.Instance, event:DragEvent | MouseEvent):Cy.Position => {
         let targetOffset = $(event.target).offset();
+        if(event instanceof DragEvent) {
+            targetOffset = $('canvas').offset();
+        }
+        
         let x = (event.pageX - targetOffset.left) / cy.zoom();
         let y = (event.pageY - targetOffset.top) / cy.zoom();
 
@@ -399,21 +238,6 @@ export class CommonGraphUtils {
 
     };
 
-
-    /**
-     * 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
@@ -423,7 +247,7 @@ export class CommonGraphUtils {
     public getLinkableNodes(cy:Cy.Instance, node:Cy.CollectionFirstNode):Array<CompositionCiNodeBase> {
         let compatibleNodes = [];
         _.each(cy.nodes(), (tempNode)=> {
-            if (this.nodeLocationsCompatible(cy, node, tempNode)) {
+            if (this.nodeLocationsCompatible(node, tempNode)) {
                 compatibleNodes.push(tempNode.data());
             }
         });
@@ -436,14 +260,8 @@ export class CommonGraphUtils {
      * @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()));
-
+    public nodeLocationsCompatible(node1:Cy.CollectionFirstNode, node2:Cy.CollectionFirstNode) {
+        return (this.isFirstBoxContainsInSecondBox(node1.boundingbox(), node2.boundingbox()));
     }
 
     /**
@@ -459,7 +277,7 @@ export class CommonGraphUtils {
             position: {
                 my: 'top center',
                 at: 'bottom center',
-                adjust: {x:0, y:-5}
+                adjust: {x: 0, y: -5}
             },
             style: {
                 classes: 'qtip-dark qtip-rounded qtip-custom',
@@ -476,12 +294,11 @@ export class CommonGraphUtils {
             includeLabels: true
         };
 
-        if (node.data().isUcpePart){ //fix tooltip positioning for UCPE-cps
-            opts.position.adjust = {x:0, y:20};
+        if (node.data().isUcpePart) { //fix tooltip positioning for UCPE-cps
+            opts.position.adjust = {x: 0, y: 20};
         }
 
         node.qtip(opts);
     };
 }
 
-CommonGraphUtils.$inject = ['NodesFactory', 'LinksFactory'];
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/common/image-creator.service.ts b/catalog-ui/src/app/ng2/pages/composition/graph/common/image-creator.service.ts
new file mode 100644
index 0000000000..2be92c782b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/common/image-creator.service.ts
@@ -0,0 +1,92 @@
+/*-
+ * ============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 {Injectable} from "@angular/core";
+
+export interface ICanvasImage {
+    src: string;
+    width: number
+    height: number;
+    x: number;
+    y: number;
+}
+
+@Injectable()
+export class ImageCreatorService {
+
+    private _canvas:HTMLCanvasElement;
+
+    constructor() {
+        this._canvas = <HTMLCanvasElement>$('<canvas>')[0];
+        this._canvas.setAttribute('style', 'display:none');
+
+        let body = document.getElementsByTagName('body')[0];
+        body.appendChild(this._canvas);
+    }
+
+    /**
+     * Create an image composed of different image layers
+     * @param canvasImages
+     * @param canvasWidth 
+     * @param canvasHeight 
+     * returns a PROMISE
+     */
+    getMultiLayerBase64Image(canvasImages: ICanvasImage[], canvasWidth?:number, canvasHeight?:number):Promise<string> {
+
+        var promise = new Promise<string>((resolve, reject) => {
+            if(canvasImages && canvasImages.length === 0){
+                return null;
+            }
+
+            //If only width was set, use it for height, otherwise use first canvasImage height
+            canvasHeight = canvasHeight || canvasImages[0].height;
+            canvasWidth = canvasWidth || canvasImages[0].width;
+
+            const images = [];
+            let imagesLoaded = 0;
+            const onImageLoaded = () => {
+                imagesLoaded++;
+                if(imagesLoaded < canvasImages.length){
+                    return;
+                }
+                this._canvas.setAttribute('width', (canvasWidth * 4).toString());
+                this._canvas.setAttribute('height', (canvasHeight * 4).toString());
+                const canvasCtx = this._canvas.getContext('2d');
+                canvasCtx.scale(4,4);
+                canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+                images.forEach((image, index) => {
+                    const canvasImage = canvasImages[index];
+                    canvasCtx.drawImage(image, canvasImage.x, canvasImage.y, canvasImage.width, canvasImage.height);
+                });
+
+                let base64Image = this._canvas.toDataURL();
+                resolve(base64Image)
+            };
+            canvasImages.forEach(canvasImage => {
+                let image = new Image();
+                image.onload = onImageLoaded;
+                image.src = canvasImage.src;
+                images.push(image);
+            });
+        });
+
+        return promise;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.spec.ts
new file mode 100644
index 0000000000..54b3dbed24
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.spec.ts
@@ -0,0 +1,37 @@
+import {async} from "@angular/core/testing";
+import {ComponentInstanceNodesStyle} from "./component-instances-nodes-style";
+
+
+describe('component instance nodes style component', () => {
+
+    beforeEach(
+        async(() => {
+            const createElement = document.createElement.bind(document);
+            document.createElement = (tagName) => {
+                if (tagName === 'canvas') {
+                    return {
+                        getContext: () => ({
+                            font: "",
+                            measureText: (x) => ({width: x.length})
+                        }),
+                    };
+                }
+                return createElement(tagName);
+            };
+        })
+    );
+
+    it('verify getGraphDisplayName for String.length smaller than 67 chars', () => {
+        let inputString = 'SomeText';
+        let expectedRes = inputString;
+        let res = ComponentInstanceNodesStyle.getGraphDisplayName(inputString);
+        expect(res).toBe(expectedRes);
+    });
+
+    it('verify getGraphDisplayName for String.length greater than 67 chars', () => {
+        let inputString = 'AAAAAAAAAABBBBBBBBBBCCCCCCCCCCDDDDDDDDDDEEEEEEEEEEFFFFFFFFFFGGGGGGGGGG12345678';
+        let expectedRes = 'AAAAAAAAAABBBBBBBBBBCCCCCCCCCCDDDDDDDDDDEEEEEEEEEEFFFFFFFFF...';
+        let res = ComponentInstanceNodesStyle.getGraphDisplayName(inputString);
+        expect(res).toBe(expectedRes);
+    });
+}
\ 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/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts
index dd50524444..cc9cac16e6 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts
@@ -172,16 +172,6 @@ export class ComponentInstanceNodesStyle {
                 }
             },
             {
-                selector: '.archived',
-                css: {
-                    'shape': 'rectangle',
-                    'background-image': (ele:Cy.Collection) => {
-                        return ele.data().setArchivedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE); //Change name to setArchivedImageBgStyle ??
-                    },
-                    "border-width": 0
-                }
-            },
-            {
                 selector: '.vl-link',
                 css: {
                     'width': 3,
@@ -237,9 +227,10 @@ export class ComponentInstanceNodesStyle {
                 css: {
                     'shape': 'rectangle',
                     'background-image': (ele:Cy.Collection) => {
+                        // return ele.data().setUncertifiedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE);//Change name to setUncertifiedImageBgStyle??
                         return ele.data().initUncertifiedImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE);
                     },
-                    "border-width": 0
+                    'border-width': 0
                 }
             },
             {
@@ -249,7 +240,7 @@ export class ComponentInstanceNodesStyle {
                     'background-image': (ele:Cy.Collection) => {
                         return ele.data().initDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
                     },
-                    "border-width": 0
+                    'border-width': 0
                 }
             },
             {
@@ -259,7 +250,7 @@ export class ComponentInstanceNodesStyle {
                     'background-image': (ele:Cy.Collection) => {
                         return ele.data().initUncertifiedDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
                     },
-                    "border-width": 0
+                    'border-width': 0
                 }
             },
             {
@@ -301,6 +292,16 @@ export class ComponentInstanceNodesStyle {
                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
                     'overlay-opacity': 0
                 }
+            },
+            {
+                selector: '.archived',
+                css: {
+                    'shape': 'rectangle',
+                    'background-image': (ele:Cy.Collection) => {
+                        return ele.data().setArchivedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE); //Change name to setArchivedImageBgStyle ??
+                    },
+                    "border-width": 0
+                }
             }
         ]
     }
@@ -341,21 +342,21 @@ export class ComponentInstanceNodesStyle {
             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_GROUP_TAGGED_ICON,
         }        
     }
+    
+    public static getGraphDisplayName(name:string):string {
+        let context = document.createElement("canvas").getContext("2d");
+        context.font = "13px Arial";
+
+        if (67 < context.measureText(name).width) {
+            let newLen = name.length - 3;
+            let newName = name.substring(0, newLen);
 
+            while (59 < (context.measureText(newName).width)) {
+                newName = newName.substring(0, (--newLen));
+            }
+            return newName + '...';
+        }
+        return name;
+    }
 
-    // public static getUcpeCpNodeHandle = () => {
-    //     return {
-    //         positionX: "center",
-    //         positionY: "center",
-    //         offsetX: -8,
-    //         offsetY: -10,
-    //         color: "#27a337",
-    //         type: "default",
-    //         single: false,
-    //         nodeTypeNames: ["ucpe-cp-node"],
-    //         imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
-    //         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/ng2/pages/composition/graph/common/style/module-node-style.ts
index bf71e1c868..bf71e1c868 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/common/style/module-node-style.ts
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.html
new file mode 100644
index 0000000000..5a0ca3e43f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.html
@@ -0,0 +1,57 @@
+<div class="sdc-composition-graph-wrapper {{zoneTagMode}}"
+     [ngClass]="{'with-sidebar': withSidebar$ | async, 'view-only':isViewOnly$ | async}">
+</div>
+
+<div class="sdc-composition-menu" [ngClass]="{'with-sidebar': withSidebar$ | async}">
+
+    <service-path-selector
+            *ngIf="topologyTemplate.isService() && compositionService.forwardingPaths"
+            [drawPath]="drawPathOnCy"
+            [deletePaths]="deletePathsOnCy"
+            [selectedPathId]="selectedPathId">
+    </service-path-selector>
+
+    <canvas-search *ngIf="componentInstanceNames" class="composition-search"
+                   [placeholder]="'Type to search'"
+                   [data]="componentInstanceNames"
+                   (searchChanged)="getAutoCompleteValues($event)"
+                   (searchButtonClicked)="highlightSearchMatches($event)">
+    </canvas-search>
+
+    <!--<service-path class="zoom-icons"-->
+                  <!--*ngIf="!(isViewOnly$ | async) && topologyTemplate.isService()"-->
+                  <!--[service]="topologyTemplate"-->
+                  <!--[onCreate]="createOrUpdateServicePath">-->
+    <!--</service-path>-->
+
+    <svg-icon  *ngIf="!(isViewOnly$ | async) && topologyTemplate.isService()" class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
+               [backgroundColor]="'silver'" [name]="'browse'" [clickable]="true" [testId]="'pathsMenuBtn'"
+               (click)="openServicePathMenu($event)"></svg-icon>
+    <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
+              [backgroundColor]="'silver'" [name]="'expand-o'" [clickable]="true"
+              (click)="zoomAllWithoutSidebar()"></svg-icon>
+    <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
+              [backgroundColor]="'silver'" [name]="'plus'" [clickable]="true"
+              (click)="zoom(true)"></svg-icon>
+    <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
+              [backgroundColor]="'silver'" [name]="'minus'" [clickable]="true"
+              (click)="zoom(false)"></svg-icon>
+</div>
+
+<div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" [ngClass]="{'with-sidebar': withSidebar$ | async}">
+    <zone-container *ngFor="let zone of zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length"
+                    [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)"
+                    (backgroundClick)="zoneBackgroundClicked()">
+        <zone-instance *ngFor="let instance of zone.instances" [hidden]="instance.hidden"
+                       [zoneInstance]="instance" [defaultIconText]="zone.defaultIconText"
+                       [isActive]="activeZoneInstance == instance"
+                       [activeInstanceMode]="activeZoneInstance && activeZoneInstance.mode"
+                       [isViewOnly]="isViewOnly$ | async"
+                       [forceSave]="instance.forceSave"
+                       (modeChange)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)"
+                       (tagHandleClick)="zoneInstanceTagged($event)"
+                       (assignmentSaveStart)="zoneAssignmentSaveStart()"
+                       (assignmentSaveComplete)="zoneAssignmentSaveComplete($event)">
+        </zone-instance>
+    </zone-container>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less
new file mode 100644
index 0000000000..b3e5ef3a0c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less
@@ -0,0 +1,93 @@
+:host(composition-graph) {
+  flex: 1;
+  padding-top: 53px;
+}
+
+.composition {
+  .custom-modal {
+    /* Hack solution to hide canvas tooltips under modals */
+    z-index: 20000 !important;
+  }
+}
+
+.sdc-composition-graph-wrapper {
+  height: 100%;
+  width: 100%;
+
+  &.with-sidebar {
+    width: calc(~'100% - 300px');
+  }
+}
+
+.view-only {
+  background-color: rgb(248, 248, 248);
+}
+
+.sdc-canvas-zones__wrapper {
+  position: absolute;
+  bottom: 10px;
+  right: 12px;
+  display: flex;
+  transition: right 0.2s;
+
+  &.with-sidebar {
+    right: 310px;
+  }
+
+  ng2-zone-container {
+    display: flex;
+    margin-left: 10px;
+  }
+}
+
+.group-tagging {
+  cursor: url("../../../../../assets/styles/images/canvas-tagging-icons/group_1.svg"), pointer;
+}
+
+.group-tagging-hover {
+  cursor: url("../../../../../assets/styles/images/canvas-tagging-icons/group_2.svg"), pointer;
+}
+
+.policy-tagging {
+  cursor: url("../../../../../assets/styles/images/canvas-tagging-icons/policy_1.svg"), pointer;
+}
+
+.policy-tagging-hover {
+  cursor: url("../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
+}
+
+//Canvas menu
+.sdc-composition-menu {
+  position: absolute;
+  right: 18px;
+  top: 53px;
+  transition: right 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 10px;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: all;
+  }
+
+  &.with-sidebar {
+    right: 320px;
+  }
+
+  .composition-search {
+    margin-top: 12px;
+  }
+
+  .zoom-icons {
+    border: solid 1px #d2d2d2;
+    border-radius: 2px;
+    box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
+    margin-top: 10px;
+
+    /deep/ .svg-icon {
+      box-sizing: content-box;
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.spec.ts
new file mode 100644
index 0000000000..9a15ecba69
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.spec.ts
@@ -0,0 +1,354 @@
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {async, ComponentFixture} from '@angular/core/testing';
+import {SdcUiServices} from 'onap-ui-angular';
+import 'rxjs/add/observable/of';
+import {ConfigureFn, configureTests} from '../../../../../jest/test-config.helper';
+import {CompositionGraphComponent} from "./composition-graph.component";
+import {WorkspaceService} from "../../workspace/workspace.service";
+import {ComponentInstance, GroupInstance, NodesFactory, ZoneInstance, ZoneInstanceMode} from "../../../../models";
+import {EventListenerService} from "../../../../services";
+import {
+    CompositionGraphGeneralUtils,
+    CompositionGraphNodesUtils,
+    CompositionGraphZoneUtils,
+    MatchCapabilitiesRequirementsUtils, ServicePathGraphUtils
+} from "./utils";
+import {CompositionGraphLinkUtils} from "./utils/composition-graph-links-utils";
+import {ConnectionWizardService} from "./connection-wizard/connection-wizard.service";
+import {CommonGraphUtils} from "./common/common-graph-utils";
+import {CompositionGraphPaletteUtils} from "./utils/composition-graph-palette-utils";
+import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
+import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service";
+import {CompositionService} from "../composition.service";
+import {ModalService} from '../../../services/modal.service';
+import {Store} from '@ngxs/store';
+import {PoliciesService} from '../../../services/policies.service';
+import {GroupsService} from '../../../services/groups.service';
+import {PolicyInstance} from "../../../../models/graph/zones/policy-instance";
+import {ZoneInstanceType} from "../../../../models/graph/zones/zone-instance";
+import {GRAPH_EVENTS} from "../../../../utils/constants";
+import * as cytoscape from "cytoscape";
+import {ComponentMetadata} from "../../../../models/component-metadata";
+import {Zone} from "../../../../models/graph/zones/zone";
+import {SelectedComponentType, SetSelectedComponentAction} from "../common/store/graph.actions";
+
+describe('composition graph component', () => {
+
+    let fixture: ComponentFixture<CompositionGraphComponent>;
+    let instance: CompositionGraphComponent;
+    let eventServiceMock: Partial<EventListenerService>;
+    let compositionGraphZoneUtils: Partial<CompositionGraphZoneUtils>;
+    let generalGraphUtils: Partial<CompositionGraphGeneralUtils>;
+    let workspaceServiceMock: Partial<WorkspaceService>;
+    let policyService: Partial<PoliciesService>;
+    let storeStub;
+    let compositionGraphLinkUtils: Partial<CompositionGraphLinkUtils>;
+    let nodesGraphUtils: Partial<CompositionGraphNodesUtils>;
+
+    let createPolicyInstance = () => {
+        let policy = new PolicyInstance();
+        policy.targets = {COMPONENT_INSTANCES: [], GROUPS: []};
+        return new ZoneInstance(policy, '', '');
+    }
+
+    beforeEach(
+        async(() => {
+
+            eventServiceMock = {
+                notifyObservers: jest.fn(),
+                unRegisterObserver: jest.fn()
+            }
+
+            compositionGraphZoneUtils = {
+                endCyTagMode: jest.fn(),
+                showZoneTagIndications: jest.fn(),
+                hideZoneTagIndications: jest.fn(),
+                hideGroupZoneIndications: jest.fn(),
+                showGroupZoneIndications: jest.fn(),
+                startCyTagMode: jest.fn()
+            }
+
+            workspaceServiceMock = {
+                metadata: <ComponentMetadata>{
+                    uniqueId: 'service_unique_id',
+                    componentType: 'SERVICE'
+                }
+            }
+
+            compositionGraphLinkUtils = {
+                handleLinkClick: jest.fn(),
+                getModifyLinkMenu: jest.fn()
+            }
+
+            storeStub = {
+                dispatch: jest.fn()
+            }
+            policyService = {
+                getSpecificPolicy: jest.fn()
+            }
+
+            generalGraphUtils = {
+                zoomGraphTo: jest.fn()
+            }
+
+            nodesGraphUtils = {
+                onNodesPositionChanged: jest.fn()
+            }
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [CompositionGraphComponent],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: NodesFactory, useValue: {}},
+                        {provide: EventListenerService, useValue: eventServiceMock},
+                        {provide: CompositionGraphZoneUtils, useValue: compositionGraphZoneUtils},
+                        {provide: CompositionGraphGeneralUtils, useValue: generalGraphUtils},
+                        {provide: CompositionGraphLinkUtils, useValue: compositionGraphLinkUtils},
+                        {provide: CompositionGraphNodesUtils, useValue: nodesGraphUtils},
+                        {provide: ConnectionWizardService, useValue: {}},
+                        {provide: CommonGraphUtils, useValue: {}},
+                        {provide: CompositionGraphPaletteUtils, useValue: {}},
+                        {provide: TopologyTemplateService, useValue: {}},
+                        {provide: ComponentInstanceServiceNg2, useValue: {}},
+                        {provide: MatchCapabilitiesRequirementsUtils, useValue: {}},
+                        {provide: CompositionService, useValue: {}},
+                        {provide: SdcUiServices.LoaderService, useValue: {}},
+                        {provide: WorkspaceService, useValue: workspaceServiceMock},
+                        {provide: SdcUiServices.NotificationsService, useValue: {}},
+                        {provide: SdcUiServices.simplePopupMenuService, useValue: {}},
+                        {provide: ServicePathGraphUtils, useValue: {}},
+                        {provide: ModalService, useValue: {}},
+                        {provide: PoliciesService, useValue: policyService},
+                        {provide: GroupsService, useValue: {}},
+                        {provide: Store, useValue: storeStub},
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(CompositionGraphComponent);
+                instance = fixture.componentInstance;
+                instance._cy = cytoscape({});
+            });
+        })
+    );
+
+    it('composition graph component should be defined', () => {
+        expect(fixture).toBeDefined();
+    });
+
+    describe('on zone instance mode changed', () => {
+        let newZoneInstance: ZoneInstance;
+
+        beforeEach(
+            async(() => {
+                newZoneInstance = createPolicyInstance();
+                instance.zoneTagMode = null;
+                instance.zones = [];
+                instance.zones[ZoneInstanceType.POLICY] = new Zone('Policies', 'P', ZoneInstanceType.POLICY);
+                instance.zones[ZoneInstanceType.GROUP] = new Zone('Groups', 'G', ZoneInstanceType.GROUP);
+                instance.activeZoneInstance = createPolicyInstance();
+            }))
+
+        it('zone instance in tag mode and we want to turn tag mode off', () => {
+            instance.zoneTagMode = 'some_zone_id';
+            instance.activeZoneInstance = newZoneInstance;
+            instance.zoneInstanceModeChanged(ZoneInstanceMode.NONE, newZoneInstance, ZoneInstanceType.POLICY);
+            expect(instance.eventListenerService.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_CANVAS_TAG_END, newZoneInstance);
+            expect(instance.activeZoneInstance.mode).toBe(ZoneInstanceMode.SELECTED)
+        })
+
+        it('we are not in tag mode and policy instance mode changed to NONE - group and zone tag indication need to be removed', () => {
+            instance.zoneInstanceModeChanged(ZoneInstanceMode.NONE, newZoneInstance, ZoneInstanceType.POLICY);
+            expect(instance.compositionGraphZoneUtils.hideZoneTagIndications).toHaveBeenCalledWith(instance._cy);
+            expect(instance.compositionGraphZoneUtils.hideGroupZoneIndications).toHaveBeenCalledWith(instance.zones[ZoneInstanceType.GROUP].instances);
+        })
+
+        it('we are not in tag mode and active zone instance gets hover/none - we dont actually change mode', () => {
+            let newMode = ZoneInstanceMode.SELECTED;
+            instance.zoneInstanceModeChanged(newMode, newZoneInstance, ZoneInstanceType.POLICY);
+            expect(newZoneInstance.mode).toBe(newMode);
+        })
+
+        it('we are not in tag mode and zone instance mode changed to HOVER mode', () => {
+            instance.zoneInstanceModeChanged(ZoneInstanceMode.HOVER, newZoneInstance, ZoneInstanceType.POLICY);
+            expect(instance.compositionGraphZoneUtils.showZoneTagIndications).toHaveBeenCalledWith(instance._cy, newZoneInstance);
+            expect(instance.compositionGraphZoneUtils.showGroupZoneIndications).toHaveBeenCalledWith(instance.zones[ZoneInstanceType.GROUP].instances, newZoneInstance);
+            expect(instance.eventListenerService.notifyObservers).not.toHaveBeenCalled();
+        })
+
+        it('we are not in tag mode and mode changed to SELECTED', () => {
+            instance.zoneInstanceModeChanged(ZoneInstanceMode.SELECTED, newZoneInstance, ZoneInstanceType.POLICY);
+            expect(instance.compositionGraphZoneUtils.showZoneTagIndications).toHaveBeenCalledWith(instance._cy, newZoneInstance);
+            expect(instance.compositionGraphZoneUtils.showGroupZoneIndications).toHaveBeenCalledWith(instance.zones[ZoneInstanceType.GROUP].instances, newZoneInstance);
+            expect(instance.activeZoneInstance).toBe(newZoneInstance);
+            expect(instance.eventListenerService.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, newZoneInstance);
+            expect(instance.store.dispatch).toHaveBeenCalledWith(new SetSelectedComponentAction({
+                component: newZoneInstance.instanceData,
+                type: SelectedComponentType[ZoneInstanceType[newZoneInstance.type]]
+            }));
+            expect(instance.eventListenerService.notifyObservers).not.toHaveBeenCalledWith(GRAPH_EVENTS.ON_CANVAS_TAG_START, ZoneInstanceType.POLICY);
+        })
+
+
+        it('we are not in tag mode and and zone instance mode changed to TAG', () => {
+            instance.zoneInstanceModeChanged(ZoneInstanceMode.TAG, newZoneInstance, ZoneInstanceType.POLICY);
+            expect(instance.compositionGraphZoneUtils.showZoneTagIndications).toHaveBeenCalledWith(instance._cy, newZoneInstance);
+            expect(instance.compositionGraphZoneUtils.showGroupZoneIndications).toHaveBeenCalledWith(instance.zones[ZoneInstanceType.GROUP].instances, newZoneInstance);
+            expect(instance.activeZoneInstance).toBe(newZoneInstance);
+            expect(instance.eventListenerService.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, newZoneInstance);
+            expect(instance.store.dispatch).toHaveBeenCalledWith(new SetSelectedComponentAction({
+                component: newZoneInstance.instanceData,
+                type: SelectedComponentType[ZoneInstanceType[newZoneInstance.type]]
+            }));
+            expect(instance.compositionGraphZoneUtils.startCyTagMode).toHaveBeenCalledWith(instance._cy);
+            expect(instance.eventListenerService.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_CANVAS_TAG_START, ZoneInstanceType.POLICY);
+        })
+    })
+
+    it('unset active zone instance', () => {
+        instance.activeZoneInstance = createPolicyInstance();
+        instance.unsetActiveZoneInstance();
+        expect(instance.activeZoneInstance).toBeNull();
+        expect(instance.zoneTagMode).toBeNull();
+    })
+
+    it('zone background clicked - we are not in tag mode and active zone instance exist', () => {
+        instance.activeZoneInstance = createPolicyInstance();
+        jest.spyOn(instance, 'unsetActiveZoneInstance');
+        jest.spyOn(instance, 'selectTopologyTemplate');
+        instance.zoneBackgroundClicked();
+        expect(instance.unsetActiveZoneInstance).toHaveBeenCalled();
+        expect(instance.selectTopologyTemplate).toHaveBeenCalled();
+    })
+
+    it('zone background clicked - we are not in tag mode and no active zone instance exist', () => {
+        jest.spyOn(instance, 'unsetActiveZoneInstance');
+        jest.spyOn(instance, 'selectTopologyTemplate');
+        instance.zoneBackgroundClicked();
+        expect(instance.unsetActiveZoneInstance).not.toHaveBeenCalled();
+        expect(instance.selectTopologyTemplate).not.toHaveBeenCalled();
+    })
+
+    it('on zoom in', () => {
+        jest.spyOn(instance, 'zoom');
+        instance.zoom(true);
+        expect(instance.generalGraphUtils.zoomGraphTo).toHaveBeenCalledWith(instance._cy, instance._cy.zoom() + .1);
+    })
+
+    it('on zoom out', () => {
+        jest.spyOn(instance, 'zoom');
+        instance.zoom(false);
+        expect(instance.generalGraphUtils.zoomGraphTo).toHaveBeenCalledWith(instance._cy, instance._cy.zoom() - .1);
+    })
+
+    describe('cytoscape tap end event have been called', () => {
+
+        it('canvas background was clicked while zone instance in tag mode, zone instance still selected in tag mode)', () => {
+            let event = <Cy.EventObject>{cyTarget: instance._cy};
+            instance.zoneTagMode = 'instance_in_tag'
+            instance.onTapEnd(event);
+            expect(instance.zoneTagMode).toBe('instance_in_tag');
+        })
+
+        it('canvas background was clicked and no zone instance selected, topology template is now selected', () => {
+            let event = <Cy.EventObject>{cyTarget: instance._cy};
+            jest.spyOn(instance, 'selectTopologyTemplate');
+            instance.onTapEnd(event);
+            expect(instance.selectTopologyTemplate).toHaveBeenCalled();
+            expect(instance.eventListenerService.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
+        })
+
+        it('canvas background was clicked and zone instance was selected, topology template is now selected and zone instance is unselected', () => {
+            let event = <Cy.EventObject>{cyTarget: instance._cy};
+            instance.activeZoneInstance = createPolicyInstance();
+            jest.spyOn(instance, 'selectTopologyTemplate');
+            jest.spyOn(instance, 'unsetActiveZoneInstance');
+            instance.onTapEnd(event);
+            expect(instance.selectTopologyTemplate).toHaveBeenCalled();
+            expect(instance.unsetActiveZoneInstance).toHaveBeenCalled();
+        })
+
+
+        it('canvas background was clicked and zone instance was selected, topology template is now selected and zone instance is unselected', () => {
+            let event = <Cy.EventObject>{cyTarget: instance._cy};
+            instance.activeZoneInstance = createPolicyInstance();
+            jest.spyOn(instance, 'selectTopologyTemplate');
+            jest.spyOn(instance, 'unsetActiveZoneInstance');
+            instance.onTapEnd(event);
+            expect(instance.selectTopologyTemplate).toHaveBeenCalled();
+            expect(instance.unsetActiveZoneInstance).toHaveBeenCalled();
+        })
+
+        it('on simple edge clicked, open link menu and handle link click', () => {
+            let event = <Cy.EventObject>{
+                cyTarget: [{
+                    isEdge: jest.fn().mockReturnValue(true),
+                    data: jest.fn().mockReturnValue({type: 'simple'})
+                }
+            }];
+            instance.openModifyLinkMenu = jest.fn();
+            instance.onTapEnd(event);
+            expect(instance.compositionGraphLinkUtils.handleLinkClick).toHaveBeenCalledWith(instance._cy, event);
+            expect(instance.openModifyLinkMenu).toHaveBeenCalled();
+        })
+
+        it('on service path edge clicked, no menu is opened', () => {
+            let event = <Cy.EventObject>{
+                cyTarget: [{
+                    isEdge: jest.fn().mockReturnValue(true),
+                    data: jest.fn().mockReturnValue({type: 'service-path-link'})
+                }]
+            };
+            instance.openModifyLinkMenu = jest.fn();
+            instance.onTapEnd(event);
+            expect(instance.compositionGraphLinkUtils.handleLinkClick).toHaveBeenCalledWith(instance._cy, event);
+            expect(instance.openModifyLinkMenu).not.toHaveBeenCalled();
+        })
+
+        it('on drop after drag event (position has changed), call onNodesPositionChanged to update node position', () => {
+            let event = <Cy.EventObject>{
+                cyTarget: [{
+                    isEdge: jest.fn().mockReturnValue(false),
+                    position: jest.fn().mockReturnValue({x:2.11, y:2.44})
+                }]
+            };
+            instance.currentlyClickedNodePosition = <Cy.Position>{x:2.33, y:2.44};
+            instance.onTapEnd(event);
+            let nodesMoved: Cy.CollectionNodes = instance._cy.$(':grabbed');
+            expect(instance.nodesGraphUtils.onNodesPositionChanged).toHaveBeenCalledWith(instance._cy, instance.topologyTemplate, nodesMoved);
+
+        })
+
+        it('on node clicked (position not changed) while zone instance selected, unset active zone and call set selected instance', () => {
+            let event = <Cy.EventObject>{
+                cyTarget: [{
+                    isEdge: jest.fn().mockReturnValue(false),
+                    position: jest.fn().mockReturnValue({x:2.11, y:2.44}),
+                    data: jest.fn().mockReturnValue({componentInstance: new ComponentInstance()})
+                }],
+            };
+            instance.currentlyClickedNodePosition = <Cy.Position>{x:2.11, y:2.44};
+            instance.activeZoneInstance = createPolicyInstance();
+            jest.spyOn(instance, 'unsetActiveZoneInstance');
+            jest.spyOn(instance, 'selectComponentInstance');
+            instance.onTapEnd(event);
+            expect(instance.unsetActiveZoneInstance).toHaveBeenCalled();
+            expect(instance.selectComponentInstance).toHaveBeenCalledWith(event.cyTarget[0].data().componentInstance);
+        })
+    })
+
+    it('initial view mode will turn off all cytoscape events', () => {
+        jest.spyOn(instance, 'isViewOnly').mockReturnValue(true);
+        jest.spyOn(instance._cy, 'off');
+        instance.initViewMode();
+        expect(instance._cy.off).toHaveBeenCalledWith('drag');
+        expect(instance._cy.off).toHaveBeenCalledWith('handlemouseout');
+        expect(instance._cy.off).toHaveBeenCalledWith('handlemouseover');
+        expect(instance._cy.off).toHaveBeenCalledWith('canvasredraw');
+        expect(instance._cy.off).toHaveBeenCalledWith('handletagclick');
+
+    })
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
new file mode 100644
index 0000000000..69ca3faaf5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
@@ -0,0 +1,768 @@
+/**
+ * Created by ob0695 on 4/24/2018.
+ */
+import { AfterViewInit, Component, ElementRef, HostBinding, Input } from '@angular/core';
+import { Select, Store } from '@ngxs/store';
+import {
+    ButtonModel,
+    Component as TopologyTemplate,
+    ComponentInstance,
+    CompositionCiNodeBase,
+    ConnectRelationModel,
+    GroupInstance,
+    LeftPaletteComponent,
+    LinkMenu,
+    Match,
+    ModalModel,
+    NodesFactory,
+    Point,
+    PolicyInstance,
+    PropertyBEModel,
+    Relationship,
+    StepModel,
+    Zone,
+    ZoneInstance,
+    ZoneInstanceAssignmentType,
+    ZoneInstanceMode,
+    ZoneInstanceType
+} from 'app/models';
+import { ForwardingPath } from 'app/models/forwarding-path';
+import { CompositionCiServicePathLink } from 'app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link';
+import { UIZoneInstanceObject } from 'app/models/ui-models/ui-zone-instance-object';
+import { CompositionService } from 'app/ng2/pages/composition/composition.service';
+import { CommonGraphUtils } from 'app/ng2/pages/composition/graph/common/common-graph-utils';
+import { ComponentInstanceNodesStyle } from 'app/ng2/pages/composition/graph/common/style/component-instances-nodes-style';
+import { ConnectionPropertiesViewComponent } from 'app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component';
+import { ConnectionWizardHeaderComponent } from 'app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component';
+import { ConnectionWizardService } from 'app/ng2/pages/composition/graph/connection-wizard/connection-wizard.service';
+import { FromNodeStepComponent } from 'app/ng2/pages/composition/graph/connection-wizard/from-node-step/from-node-step.component';
+import { PropertiesStepComponent } from 'app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component';
+import { ToNodeStepComponent } from 'app/ng2/pages/composition/graph/connection-wizard/to-node-step/to-node-step.component';
+import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
+import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service';
+import { TopologyTemplateService } from 'app/ng2/services/component-services/topology-template.service';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response';
+import { ServiceGenericResponse } from 'app/ng2/services/responses/service-generic-response';
+import { WorkspaceState } from 'app/ng2/store/states/workspace.state';
+import { EventListenerService } from 'app/services';
+import { ComponentInstanceFactory, EVENTS, SdcElementType } from 'app/utils';
+import { ComponentType, GRAPH_EVENTS, GraphColors, DEPENDENCY_EVENTS } from 'app/utils/constants';
+import * as _ from 'lodash';
+import { DndDropEvent } from 'ngx-drag-drop/ngx-drag-drop';
+import { SdcUiServices } from 'onap-ui-angular';
+import { NotificationSettings } from 'onap-ui-angular/dist/notifications/utilities/notification.config';
+import { menuItem } from 'onap-ui-angular/dist/simple-popup-menu/menu-data.interface';
+import { CytoscapeEdgeEditation } from '../../../../../third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js';
+import { SelectedComponentType, SetSelectedComponentAction } from '../common/store/graph.actions';
+import { GraphState } from '../common/store/graph.state';
+import {
+    CompositionGraphGeneralUtils,
+    CompositionGraphNodesUtils,
+    CompositionGraphZoneUtils,
+    MatchCapabilitiesRequirementsUtils
+} from './utils';
+import { CompositionGraphLinkUtils } from './utils/composition-graph-links-utils';
+import { CompositionGraphPaletteUtils } from './utils/composition-graph-palette-utils';
+import { ServicePathGraphUtils } from './utils/composition-graph-service-path-utils';
+
+declare const window: any;
+
+@Component({
+    selector: 'composition-graph',
+    templateUrl: './composition-graph.component.html',
+    styleUrls: ['./composition-graph.component.less']
+})
+
+export class CompositionGraphComponent implements AfterViewInit {
+
+    @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
+    @Select(GraphState.withSidebar) withSidebar$: boolean;
+    @Input() topologyTemplate: TopologyTemplate;
+    @HostBinding('attr.data-tests-id') dataTestId: string;
+    @Input() testId: string;
+
+    // tslint:disable:variable-name
+    private _cy: Cy.Instance;
+    private zoneTagMode: string;
+    private activeZoneInstance: ZoneInstance;
+    private zones: Zone[];
+    private currentlyClickedNodePosition: Cy.Position;
+    private dragElement: JQuery;
+    private dragComponent: ComponentInstance;
+    private componentInstanceNames: string[];
+    private topologyTemplateId: string;
+    private topologyTemplateType: string;
+
+    constructor(private elRef: ElementRef,
+                private nodesFactory: NodesFactory,
+                private eventListenerService: EventListenerService,
+                private compositionGraphZoneUtils: CompositionGraphZoneUtils,
+                private generalGraphUtils: CompositionGraphGeneralUtils,
+                private compositionGraphLinkUtils: CompositionGraphLinkUtils,
+                private nodesGraphUtils: CompositionGraphNodesUtils,
+                private connectionWizardService: ConnectionWizardService,
+                private commonGraphUtils: CommonGraphUtils,
+                private modalService: ModalService,
+                private compositionGraphPaletteUtils: CompositionGraphPaletteUtils,
+                private topologyTemplateService: TopologyTemplateService,
+                private componentInstanceService: ComponentInstanceServiceNg2,
+                private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils,
+                private store: Store,
+                private compositionService: CompositionService,
+                private loaderService: SdcUiServices.LoaderService,
+                private workspaceService: WorkspaceService,
+                private notificationService: SdcUiServices.NotificationsService,
+                private simplePopupMenuService: SdcUiServices.simplePopupMenuService,
+                private servicePathGraphUtils: ServicePathGraphUtils) {
+    }
+
+    ngOnInit() {
+        this.dataTestId = this.testId;
+        this.topologyTemplateId = this.workspaceService.metadata.uniqueId;
+        this.topologyTemplateType = this.workspaceService.metadata.componentType;
+
+        this.store.dispatch(new SetSelectedComponentAction({
+            component: this.topologyTemplate,
+            type: SelectedComponentType.TOPOLOGY_TEMPLATE
+        }));
+        this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, () => {
+            this.loadGraphData();
+        });
+        this.loadCompositionData();
+    }
+
+    ngAfterViewInit() {
+        this.loadGraph();
+    }
+
+    ngOnDestroy() {
+        this._cy.destroy();
+        _.forEach(GRAPH_EVENTS, (event) => {
+            this.eventListenerService.unRegisterObserver(event);
+        });
+        this.eventListenerService.unRegisterObserver(EVENTS.ON_CHECKOUT);
+        this.eventListenerService.unRegisterObserver(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE);
+    }
+
+    public isViewOnly = (): boolean => {
+        return this.store.selectSnapshot((state) => state.workspace.isViewOnly);
+    }
+
+    public zoom = (zoomIn: boolean): void => {
+        const currentZoom: number = this._cy.zoom();
+        if (zoomIn) {
+            this.generalGraphUtils.zoomGraphTo(this._cy, currentZoom + .1);
+        } else {
+            this.generalGraphUtils.zoomGraphTo(this._cy, currentZoom - .1);
+        }
+    }
+
+    public zoomAllWithoutSidebar = () => {
+        setTimeout(() => { // wait for sidebar changes to take effect before zooming
+            this.generalGraphUtils.zoomAll(this._cy);
+        });
+    }
+
+    public getAutoCompleteValues = (searchTerm: string) => {
+        if (searchTerm.length > 1) { // US requirement: only display search results after 2nd letter typed.
+            const nodes: Cy.CollectionNodes = this.nodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm);
+            this.componentInstanceNames = _.map(nodes, (node) => node.data('name'));
+        } else {
+            this.componentInstanceNames = [];
+        }
+    }
+
+    public highlightSearchMatches = (searchTerm: string) => {
+        this.nodesGraphUtils.highlightMatchingNodesByName(this._cy, searchTerm);
+        const matchingNodes: Cy.CollectionNodes = this.nodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm);
+        this.generalGraphUtils.zoomAll(this._cy, matchingNodes);
+    }
+
+    public onDrop = (dndEvent: DndDropEvent) => {
+        this.compositionGraphPaletteUtils.addNodeFromPalette(this._cy, dndEvent);
+    }
+
+    public openServicePathMenu = ($event): void => {
+
+        const menuConfig: menuItem[] = [];
+        if (!this.isViewOnly()) {
+            menuConfig.push({
+                text: 'Create Service Flow',
+                action: () => this.servicePathGraphUtils.onCreateServicePath()
+            });
+        }
+        menuConfig.push({
+            text: 'Service Flows List',
+            type: '',
+            action: () => this.servicePathGraphUtils.onListServicePath()
+        });
+        const popup = this.simplePopupMenuService.openBaseMenu(menuConfig, {
+            x: $event.x,
+            y: $event.y
+        });
+
+    }
+
+    public deletePathsOnCy = () => {
+        this.servicePathGraphUtils.deletePathsFromGraph(this._cy);
+    }
+
+    public drawPathOnCy = (data: ForwardingPath) => {
+        this.servicePathGraphUtils.drawPath(this._cy, data);
+    }
+
+    public onTapEnd = (event: Cy.EventObject) => {
+        if (this.zoneTagMode) {
+            return;
+        }
+        if (event.cyTarget === this._cy) { // On Background clicked
+            if (this._cy.$('node:selected').length === 0) { // if the background click but not dragged
+                if (this.activeZoneInstance) {
+                    this.unsetActiveZoneInstance();
+                    this.selectTopologyTemplate();
+                } else {
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
+                    this.selectTopologyTemplate();
+                }
+
+            }
+        } else if (event.cyTarget[0].isEdge()) { // and Edge clicked
+            this.compositionGraphLinkUtils.handleLinkClick(this._cy, event);
+            if (event.cyTarget[0].data().type === CompositionCiServicePathLink.LINK_TYPE) {
+                return;
+            }
+            this.openModifyLinkMenu(this.compositionGraphLinkUtils.getModifyLinkMenu(event.cyTarget[0], event), event);
+        } else { // On Node clicked
+
+            this._cy.nodes(':grabbed').style({'overlay-opacity': 0});
+
+            const 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) {
+                const nodesMoved: Cy.CollectionNodes = this._cy.$(':grabbed');
+                this.nodesGraphUtils.onNodesPositionChanged(this._cy, this.topologyTemplate, nodesMoved);
+            } else {
+                if (this.activeZoneInstance) {
+                    this.unsetActiveZoneInstance();
+                }
+                this.selectComponentInstance(event.cyTarget[0].data().componentInstance);
+            }
+        }
+    }
+
+    private registerCytoscapeGraphEvents() {
+
+        this._cy.on('addedgemouseup', (event, data) => {
+            const connectRelationModel: ConnectRelationModel = this.compositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target);
+            if (connectRelationModel != null) {
+                this.connectionWizardService.setRelationMenuDirectiveObj(connectRelationModel);
+                this.connectionWizardService.selectedMatch = null;
+
+                const steps: StepModel[] = [];
+                const fromNodeName: string = connectRelationModel.fromNode.componentInstance.name;
+                const toNodeName: string = connectRelationModel.toNode.componentInstance.name;
+                steps.push(new StepModel(fromNodeName, FromNodeStepComponent));
+                steps.push(new StepModel(toNodeName, ToNodeStepComponent));
+                steps.push(new StepModel('Properties', PropertiesStepComponent));
+                const wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName;
+                const modalInstance = this.modalService.createMultiStepsWizard(wizardTitle, steps, this.createLinkFromMenu, ConnectionWizardHeaderComponent);
+                modalInstance.instance.open();
+            }
+        });
+
+        this._cy.on('tapstart', 'node', (event: Cy.EventObject) => {
+            this.currentlyClickedNodePosition = angular.copy(event.cyTarget[0].position()); // update node position on drag
+        });
+
+        this._cy.on('drag', 'node', (event: Cy.EventObject) => {
+            if (event.cyTarget.data().componentSubType !== SdcElementType.POLICY && event.cyTarget.data().componentSubType !== SdcElementType.GROUP) {
+                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});
+                }
+            }
+        });
+
+        this._cy.on('handlemouseover', (event, payload) => {
+            // no need to add opacity while we are dragging and hovering othe nodes- or if opacity was already calculated for these nodes
+            if (payload.node.grabbed() || this._cy.scratch('_edge_editation_highlights') === true) {
+                return;
+            }
+
+            if (this.zoneTagMode) {
+                this.zoneTagMode = this.zones[this.activeZoneInstance.type].getHoverTagModeId();
+                return;
+            }
+
+            const nodesData = this.nodesGraphUtils.getAllNodesData(this._cy.nodes());
+            const nodesLinks = this.generalGraphUtils.getAllCompositionCiLinks(this._cy);
+            const instance = payload.node.data().componentInstance;
+            const filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodesToComponentInstance(instance, nodesData, nodesLinks);
+            this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
+            this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data());
+
+            this._cy.scratch()._edge_editation_highlights = true;
+        });
+
+        this._cy.on('handlemouseout', () => {
+            if (this.zoneTagMode) {
+                this.zoneTagMode = this.zones[this.activeZoneInstance.type].getTagModeId();
+                return;
+            }
+            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) => {
+            this.onTapEnd(event);
+        });
+
+        this._cy.on('boxselect', 'node', (event: Cy.EventObject) => {
+            this.unsetActiveZoneInstance();
+            this.selectComponentInstance(event.cyTarget.data().componentInstance);
+        });
+
+        this._cy.on('canvasredraw', (event: Cy.EventObject) => {
+            if (this.zoneTagMode) {
+                this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, this.activeZoneInstance);
+            }
+        });
+
+        this._cy.on('handletagclick', (event: Cy.EventObject, eventData: any) => {
+            this.compositionGraphZoneUtils.handleTagClick(this._cy, this.activeZoneInstance, eventData.nodeId);
+        });
+    }
+
+    private initViewMode() {
+
+        if (this.isViewOnly()) {
+            // remove event listeners
+            this._cy.off('drag');
+            this._cy.off('handlemouseout');
+            this._cy.off('handlemouseover');
+            this._cy.off('canvasredraw');
+            this._cy.off('handletagclick');
+            this._cy.edges().unselectify();
+        }
+    }
+
+    private saveChangedCapabilityProperties = (): Promise<PropertyBEModel[]> => {
+        return new Promise<PropertyBEModel[]>((resolve) => {
+            const capabilityPropertiesBE: PropertyBEModel[] = this.connectionWizardService.changedCapabilityProperties.map((prop) => {
+                prop.value = prop.getJSONValue();
+                const propBE = new PropertyBEModel(prop);
+                propBE.parentUniqueId = this.connectionWizardService.selectedMatch.relationship.relation.capabilityOwnerId;
+                return propBE;
+            });
+            if (capabilityPropertiesBE.length > 0) {
+                // if there are capability properties to update, then first update capability properties and then resolve promise
+                this.componentInstanceService
+                    .updateInstanceCapabilityProperties(
+                        this.topologyTemplate,
+                        this.connectionWizardService.selectedMatch.toNode,
+                        this.connectionWizardService.selectedMatch.capability,
+                        capabilityPropertiesBE
+                    )
+                    .subscribe((response) => {
+                        console.log('Update resource instance capability properties response: ', response);
+                        this.connectionWizardService.changedCapabilityProperties = [];
+                        resolve(capabilityPropertiesBE);
+                    });
+            } else {
+                // no capability properties to update, immediately resolve promise
+                resolve(capabilityPropertiesBE);
+            }
+        });
+    }
+
+    private loadCompositionData = () => {
+        this.loaderService.activate();
+        this.topologyTemplateService.getComponentCompositionData(this.topologyTemplateId, this.topologyTemplateType).subscribe((response: ComponentGenericResponse) => {
+            if (this.topologyTemplateType === ComponentType.SERVICE) {
+                this.compositionService.forwardingPaths = (response as ServiceGenericResponse).forwardingPaths;
+            }
+            this.compositionService.componentInstances = response.componentInstances;
+            this.compositionService.componentInstancesRelations = response.componentInstancesRelations;
+            this.compositionService.groupInstances = response.groupInstances;
+            this.compositionService.policies = response.policies;
+            this.loadGraphData();
+            this.loaderService.deactivate();
+        }, (error) => { this.loaderService.deactivate(); });
+    }
+
+    private loadGraph = () => {
+        const graphEl = this.elRef.nativeElement.querySelector('.sdc-composition-graph-wrapper');
+        this.initGraph(graphEl);
+        this.zones = this.compositionGraphZoneUtils.createCompositionZones();
+        this.registerCytoscapeGraphEvents();
+        this.registerCustomEvents();
+        this.initViewMode();
+    }
+
+    private initGraphNodes() {
+
+        setTimeout(() => {
+            const handles = new CytoscapeEdgeEditation();
+            handles.init(this._cy);
+            if (!this.isViewOnly()) { // Init nodes handle extension - enable dynamic links
+                handles.initNodeEvents();
+                handles.registerHandle(ComponentInstanceNodesStyle.getAddEdgeHandle());
+            }
+            handles.registerHandle(ComponentInstanceNodesStyle.getTagHandle());
+            handles.registerHandle(ComponentInstanceNodesStyle.getTaggedPolicyHandle());
+            handles.registerHandle(ComponentInstanceNodesStyle.getTaggedGroupHandle());
+        }, 0);
+
+        _.each(this.compositionService.componentInstances, (instance) => {
+            const compositionGraphNode: CompositionCiNodeBase = this.nodesFactory.createNode(instance);
+            this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, compositionGraphNode);
+        });
+
+    }
+
+    private loadGraphData = () => {
+        this.initGraphNodes();
+        this.compositionGraphLinkUtils.initGraphLinks(this._cy, this.compositionService.componentInstancesRelations);
+        this.compositionGraphZoneUtils.initZoneInstances(this.zones);
+        setTimeout(() => { // Need setTimeout so that angular canvas changes will take effect before resize & center
+            this.generalGraphUtils.zoomAllWithMax(this._cy, 1);
+        });
+        this.componentInstanceNames = _.map(this._cy.nodes(), (node) => node.data('name'));
+    }
+
+    private initGraph(graphEl: JQuery) {
+
+        this._cy = cytoscape({
+            container: graphEl,
+            style: ComponentInstanceNodesStyle.getCompositionGraphStyle(),
+            zoomingEnabled: true,
+            maxZoom: 1.2,
+            minZoom: .1,
+            userZoomingEnabled: false,
+            userPanningEnabled: true,
+            selectionType: 'single',
+            boxSelectionEnabled: true,
+            autolock: this.isViewOnly(),
+            autoungrabify: this.isViewOnly()
+        });
+
+        // Testing Bridge that allows Cypress tests to select a component on canvas not via DOM
+        if (window.Cypress) {
+            window.testBridge = this.createCanvasTestBridge();
+        }
+    }
+
+    private createCanvasTestBridge(): any {
+        return {
+            selectComponentInstance: (componentName: string) => {
+                const matchingNodesByName = this.nodesGraphUtils.getMatchingNodesByName(this._cy, componentName);
+                const component = new ComponentInstance(matchingNodesByName.first().data().componentInstance);
+                this.selectComponentInstance(component);
+            }
+        };
+    }
+
+    // -------------------------------------------- ZONES---------------------------------------------------------//
+    private zoneMinimizeToggle = (zoneType: ZoneInstanceType): void => {
+        this.zones[zoneType].minimized = !this.zones[zoneType].minimized;
+    }
+
+    private zoneInstanceModeChanged = (newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType): void => {
+        if (this.zoneTagMode) { // we're in tag mode.
+            if (instance === this.activeZoneInstance && newMode === ZoneInstanceMode.NONE) { // we want to turn tag mode off.
+                this.zoneTagMode = null;
+                this.activeZoneInstance.mode = ZoneInstanceMode.SELECTED;
+                this.compositionGraphZoneUtils.endCyTagMode(this._cy);
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_END, instance);
+
+            }
+        } else {
+            // when active zone instance gets hover/none, don't actually change mode, just show/hide indications
+            if (instance !== this.activeZoneInstance || (instance === this.activeZoneInstance && newMode > ZoneInstanceMode.HOVER)) {
+                instance.mode = newMode;
+            }
+
+            if (newMode === ZoneInstanceMode.NONE) {
+                this.compositionGraphZoneUtils.hideZoneTagIndications(this._cy);
+                if (this.zones[ZoneInstanceType.GROUP]) {
+                    this.compositionGraphZoneUtils.hideGroupZoneIndications(this.zones[ZoneInstanceType.GROUP].instances);
+                }
+            }
+            if (newMode >= ZoneInstanceMode.HOVER) {
+                this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, instance);
+                if (instance.type === ZoneInstanceType.POLICY && this.zones[ZoneInstanceType.GROUP]) {
+                    this.compositionGraphZoneUtils.showGroupZoneIndications(this.zones[ZoneInstanceType.GROUP].instances, instance);
+                }
+            }
+            if (newMode >= ZoneInstanceMode.SELECTED) {
+                this._cy.$('node:selected').unselect();
+                if (this.activeZoneInstance && this.activeZoneInstance !== instance && newMode >= ZoneInstanceMode.SELECTED) {
+                    this.activeZoneInstance.mode = ZoneInstanceMode.NONE;
+                }
+                this.activeZoneInstance = instance;
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, instance);
+                this.store.dispatch(new SetSelectedComponentAction({
+                    component: instance.instanceData,
+                    type: SelectedComponentType[ZoneInstanceType[instance.type]]
+                }));
+            }
+            if (newMode === ZoneInstanceMode.TAG) {
+                this.compositionGraphZoneUtils.startCyTagMode(this._cy);
+                this.zoneTagMode = this.zones[zoneId].getTagModeId();
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_START, zoneId);
+            }
+        }
+    }
+
+    private zoneInstanceTagged = (taggedInstance: ZoneInstance) => {
+        this.activeZoneInstance.addOrRemoveAssignment(taggedInstance.instanceData.uniqueId, ZoneInstanceAssignmentType.GROUPS);
+        const newHandle: string = this.compositionGraphZoneUtils.getCorrectHandleForNode(taggedInstance.instanceData.uniqueId, this.activeZoneInstance);
+        taggedInstance.showHandle(newHandle);
+    }
+
+    private unsetActiveZoneInstance = (): void => {
+        if (this.activeZoneInstance) {
+            this.activeZoneInstance.mode = ZoneInstanceMode.NONE;
+            this.activeZoneInstance = null;
+            this.zoneTagMode = null;
+        }
+    }
+
+    private selectComponentInstance = (componentInstance: ComponentInstance) => {
+        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, componentInstance);
+        this.store.dispatch(new SetSelectedComponentAction({
+            component: componentInstance,
+            type: SelectedComponentType.COMPONENT_INSTANCE
+        }));
+    }
+
+    private selectTopologyTemplate = () => {
+        this.store.dispatch(new SetSelectedComponentAction({
+            component: this.topologyTemplate,
+            type: SelectedComponentType.TOPOLOGY_TEMPLATE
+        }));
+    }
+
+    private zoneBackgroundClicked = (): void => {
+        if (!this.zoneTagMode && this.activeZoneInstance) {
+            this.unsetActiveZoneInstance();
+            this.selectTopologyTemplate();
+        }
+    }
+
+    private zoneAssignmentSaveStart = () => {
+        this.loaderService.activate();
+    }
+
+    private zoneAssignmentSaveComplete = (success: boolean) => {
+        this.loaderService.deactivate();
+        if (!success) {
+            this.notificationService.push(new NotificationSettings('error', 'Update Failed', 'Error'));
+        }
+    }
+
+    private deleteZoneInstance = (deletedInstance: UIZoneInstanceObject) => {
+        if (deletedInstance.type === ZoneInstanceType.POLICY) {
+            this.compositionService.policies = this.compositionService.policies.filter((policy) => policy.uniqueId !== deletedInstance.uniqueId);
+        } else if (deletedInstance.type === ZoneInstanceType.GROUP) {
+            this.compositionService.groupInstances = this.compositionService.groupInstances.filter((group) => group.uniqueId !== deletedInstance.uniqueId);
+        }
+        // remove it from zones
+        this.zones[deletedInstance.type].removeInstance(deletedInstance.uniqueId);
+        if (deletedInstance.type === ZoneInstanceType.GROUP && !_.isEmpty(this.zones[ZoneInstanceType.POLICY])) {
+            this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(deletedInstance.uniqueId, [this.zones[ZoneInstanceType.POLICY]], ZoneInstanceAssignmentType.GROUPS);
+        }
+        this.selectTopologyTemplate();
+    }
+    // -------------------------------------------------------------------------------------------------------------//
+
+    private registerCustomEvents() {
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, (groupInstance: GroupInstance) => {
+            this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(this.zones, groupInstance);
+            this.notificationService.push(new NotificationSettings('success', 'Group Updated', 'Success'));
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, (policyInstance: PolicyInstance) => {
+            this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(this.zones, policyInstance);
+            this.notificationService.push(new NotificationSettings('success', 'Policy Updated', 'Success'));
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => {
+            this.compositionGraphPaletteUtils.onComponentHoverIn(leftPaletteComponent, this._cy);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE,
+            (component: TopologyTemplate, paletteComponent: LeftPaletteComponent, startPosition: Point) => {
+
+                const zoneType: ZoneInstanceType = this.compositionGraphZoneUtils.getZoneTypeForPaletteComponent(paletteComponent.categoryType);
+                this.compositionGraphZoneUtils.showZone(this.zones[zoneType]);
+
+                this.loaderService.activate();
+                this.compositionGraphZoneUtils.createZoneInstanceFromLeftPalette(zoneType, paletteComponent.type).subscribe((zoneInstance: ZoneInstance) => {
+                    this.loaderService.deactivate();
+                    this.compositionGraphZoneUtils.addInstanceToZone(this.zones[zoneInstance.type], zoneInstance, true);
+                    this.compositionGraphZoneUtils.createPaletteToZoneAnimation(startPosition, zoneType, zoneInstance);
+                }, (error) => {
+                    this.loaderService.deactivate();
+                });
+            });
+
+        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 = ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, (position: Point) => {
+            const draggedElement = document.getElementById('draggable_element');
+            draggedElement.className = this.compositionGraphPaletteUtils.isDragValid(this._cy, position) ? 'valid-drag' : 'invalid-drag';
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DROP, (event: DndDropEvent) => {
+            this.onDrop(event);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component: ComponentInstance) => {
+            const 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, (componentInstanceId: string) => {
+            const nodeToDelete = this._cy.getElementById(componentInstanceId);
+            this.nodesGraphUtils.deleteNode(this._cy, this.topologyTemplate, nodeToDelete);
+            this.selectTopologyTemplate();
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, (deletedInstance: UIZoneInstanceObject) => {
+            this.deleteZoneInstance(deletedInstance);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, (componentInstanceId: string) => {
+            if (!_.isEmpty(this.zones)) {
+                this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(componentInstanceId, this.zones, ZoneInstanceAssignmentType.COMPONENT_INSTANCES);
+            }
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_EDGE, (releaseLoading: boolean, linksToDelete: Cy.CollectionEdges) => {
+            this.compositionGraphLinkUtils.deleteLink(this._cy, this.topologyTemplate, releaseLoading, linksToDelete);
+        });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component: ComponentInstance) => {
+            // Remove everything from graph and reload it all
+            this._cy.elements().remove();
+            this.loadCompositionData();
+            setTimeout(() => { this._cy.getElementById(component.uniqueId).select(); }, 1000);
+            this.selectComponentInstance(component);
+        });
+        this.eventListenerService.registerObserverCallback(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, (ischecked: boolean) => {
+            if (ischecked) {
+                this._cy.$('node:selected').addClass('dependent');
+            } else {
+                // due to defect in cytoscape, just changing the class does not replace the icon, and i need to revert to original icon with no markings.
+                this._cy.$('node:selected').removeClass('dependent');
+                this._cy.$('node:selected').style({'background-image': this._cy.$('node:selected').data('originalImg')});
+            }
+        });
+    }
+    private createLinkFromMenu = (): void => {
+        this.saveChangedCapabilityProperties().then(() => {
+            this.compositionGraphLinkUtils.createLinkFromMenu(this._cy, this.connectionWizardService.selectedMatch);
+        });
+    }
+
+    private deleteRelation = (link: Cy.CollectionEdges) => {
+        // 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, this.topologyTemplate, this._cy.$('node:selected'));
+        } else {
+            this.compositionGraphLinkUtils.deleteLink(this._cy, this.topologyTemplate, true, link);
+        }
+    }
+
+    private viewRelation = (link: Cy.CollectionEdges) => {
+
+        const linkData = link.data();
+        const sourceNode: CompositionCiNodeBase = link.source().data();
+        const targetNode: CompositionCiNodeBase = link.target().data();
+        const relationship: Relationship = linkData.relation.relationships[0];
+
+        this.compositionGraphLinkUtils.getRelationRequirementCapability(relationship, sourceNode.componentInstance, targetNode.componentInstance).then((objReqCap) => {
+            const capability = objReqCap.capability;
+            const requirement = objReqCap.requirement;
+
+            this.connectionWizardService.connectRelationModel = new ConnectRelationModel(sourceNode, targetNode, []);
+            this.connectionWizardService.selectedMatch = new Match(requirement, capability, true, linkData.source, linkData.target);
+            this.connectionWizardService.selectedMatch.relationship = relationship;
+
+            const title = `Connection Properties`;
+            const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => {
+                this.saveChangedCapabilityProperties().then(() => {
+                    this.modalService.closeCurrentModal();
+                });
+            });
+            const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => {
+                this.modalService.closeCurrentModal();
+            });
+            const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]);
+            const modalInstance = this.modalService.createCustomModal(modal);
+            this.modalService.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
+            modalInstance.instance.open();
+
+            new Promise((resolve) => {
+                if (!this.connectionWizardService.selectedMatch.capability.properties) {
+                    this.componentInstanceService.getInstanceCapabilityProperties(this.topologyTemplateType, this.topologyTemplateId, linkData.target, capability)
+                        .subscribe(() => {
+                            resolve();
+                        }, () => { /* do nothing */ });
+                } else {
+                    resolve();
+                }
+            }).then(() => {
+                this.modalService.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
+            });
+        }, () => { /* do nothing */ });
+    }
+
+    private openModifyLinkMenu = (linkMenuObject: LinkMenu, $event) => {
+
+        const menuConfig: menuItem[] = [{
+            text: 'View',
+            iconName: 'eye-o',
+            iconType: 'common',
+            iconMode: 'secondary',
+            iconSize: 'small',
+            type: '',
+            action: () => this.viewRelation(linkMenuObject.link as Cy.CollectionEdges)
+        }];
+
+        if (!this.isViewOnly()) {
+            menuConfig.push({
+                text: 'Delete',
+                iconName: 'trash-o',
+                iconType: 'common',
+                iconMode: 'secondary',
+                iconSize: 'small',
+                type: '',
+                action: () => this.deleteRelation(linkMenuObject.link as Cy.CollectionEdges)
+            });
+        }
+        this.simplePopupMenuService.openBaseMenu(menuConfig, {
+            x: $event.originalEvent.x,
+            y: $event.originalEvent.y
+        });
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.module.ts
new file mode 100644
index 0000000000..e58d160c4d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.module.ts
@@ -0,0 +1,55 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {CompositionGraphComponent} from "./composition-graph.component";
+import {ZoneModules} from "./canvas-zone/zones-module";
+import {CompositionGraphZoneUtils} from "./utils/composition-graph-zone-utils";
+import {CompositionGraphGeneralUtils} from "./utils/composition-graph-general-utils";
+import {CommonGraphUtils} from "./common/common-graph-utils";
+import {LinksFactory} from "app/models/graph/graph-links/links-factory";
+import {NodesFactory} from "app/models/graph/nodes/nodes-factory";
+import {ImageCreatorService} from "./common/image-creator.service";
+import {MatchCapabilitiesRequirementsUtils} from "./utils/match-capability-requierment-utils";
+import {CompositionGraphNodesUtils} from "./utils/composition-graph-nodes-utils";
+import {ConnectionWizardService} from "app/ng2/pages/composition/graph/connection-wizard/connection-wizard.service";
+import {CompositionGraphPaletteUtils} from "./utils/composition-graph-palette-utils";
+import {QueueServiceUtils} from "app/ng2/utils/queue-service-utils";
+import {DndModule} from "ngx-drag-drop";
+import { MenuListNg2Module } from "app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
+import { UiElementsModule } from "app/ng2/components/ui/ui-elements.module";
+import {ServicePathSelectorModule} from "./service-path-selector/service-path-selector.module";
+import {SdcUiComponentsModule, SdcUiServices} from "onap-ui-angular";
+import {CanvasSearchModule} from "./canvas-search/canvas-search.module";
+import {CompositionGraphLinkUtils, ServicePathGraphUtils} from "./utils";
+
+
+@NgModule({
+    declarations: [CompositionGraphComponent],
+    imports: [CommonModule,
+        ServicePathSelectorModule,
+        SdcUiComponentsModule,
+        MenuListNg2Module,
+        UiElementsModule,
+        ZoneModules,
+        CanvasSearchModule,
+        DndModule],
+    exports: [CompositionGraphComponent],
+    entryComponents: [CompositionGraphComponent],
+    providers: [
+        CompositionGraphZoneUtils,
+        CompositionGraphGeneralUtils,
+        MatchCapabilitiesRequirementsUtils,
+        CompositionGraphNodesUtils,
+        CompositionGraphLinkUtils,
+        CommonGraphUtils,
+        NodesFactory,
+        LinksFactory,
+        ImageCreatorService,
+        ConnectionWizardService,
+        CompositionGraphPaletteUtils,
+        QueueServiceUtils,
+        SdcUiServices.simplePopupMenuService,
+        ServicePathGraphUtils
+    ]
+})
+export class CompositionGraphModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.html
index b24e469554..b24e469554 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.html
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less
index 07f9aa2135..07f9aa2135 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.ts
index 5abb879013..5abb879013 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.ts
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.html
index 7e7e82d85f..7e7e82d85f 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.html
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
index 72fa6e813f..d8bab288d3 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
@@ -1,5 +1,5 @@
-@import '../../../../../assets/styles/sprite-proxy-services-icons';
-@import '../../../../../assets/styles/variables';
+@import '../../../../../../../assets/styles/sprite-proxy-services-icons';
+@import '../../../../../../../assets/styles/variables';
 .header-main-container{
   background-color: #f8f8f8;
   width: 100%;
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts
index f5bc3b7ca4..f5bc3b7ca4 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module.ts
index 6b4b4128c1..80464dc970 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module.ts
@@ -3,9 +3,9 @@ import {NgModule} from "@angular/core";
 import {FromNodeStepComponent} from "./from-node-step/from-node-step.component";
 import {PropertiesStepComponent} from "./properties-step/properties-step.component";
 import {ConnectionWizardService} from "./connection-wizard.service";
-import {SelectRequirementOrCapabilityModule} from "../../components/logic/select-requirement-or-capability/select-requirement-or-capability.module";
-import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module";
-import {FormElementsModule} from "../../components/ui/form-components/form-elements.module";
+import {SelectRequirementOrCapabilityModule} from "../../../../components/logic/select-requirement-or-capability/select-requirement-or-capability.module";
+import {PropertyTableModule} from "../../../../components/logic/properties-table/property-table.module";
+import {FormElementsModule} from "../../../../components/ui/form-components/form-elements.module";
 import {ConnectionWizardHeaderComponent} from "./connection-wizard-header/connection-wizard-header.component";
 import {ConnectionPropertiesViewComponent} from "./connection-properties-view/connection-properties-view.component";
 import {BrowserModule} from "@angular/platform-browser";
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.service.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.service.spec.ts
new file mode 100644
index 0000000000..8a5c5fcefb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.service.spec.ts
@@ -0,0 +1,85 @@
+import {TestBed} from "@angular/core/testing";
+import {WorkspaceService} from "../../../../pages/workspace/workspace.service";
+import { ConnectionWizardService } from "app/ng2/pages/composition/graph/connection-wizard/connection-wizard.service";
+import { ConnectRelationModel, Match, Requirement, Capability } from "app/models";
+import { Mock } from "ts-mockery/dist";
+
+describe('Connection Wizard Service', () => {
+
+    let service: ConnectionWizardService;
+
+    const connectRelationModelMock = Mock.of<ConnectRelationModel>({
+        possibleRelations: [
+            Mock.of<Match>({isFromTo: true, requirement: Mock.of<Requirement>({uniqueId: 'requirement1', capability: "cap1"}), capability: Mock.of<Capability>({uniqueId: 'capability1', type: 'othertype'})}),
+            Mock.of<Match>({isFromTo: true, requirement: Mock.of<Requirement>({uniqueId: 'requirement2', capability: "cap1"}), capability: Mock.of<Capability>({uniqueId: 'capability2', type: 'tosca'})}),
+            Mock.of<Match>({isFromTo: true, requirement: Mock.of<Requirement>({uniqueId: 'requirement3', capability: "cap1"}), capability: Mock.of<Capability>({uniqueId: 'capability3', type: 'tosca'})}),
+            Mock.of<Match>({isFromTo: true, requirement: Mock.of<Requirement>({uniqueId: 'requirement4', capability: "cap1"}), capability: Mock.of<Capability>({uniqueId: 'capability2', type: 'tosca'})}),
+            Mock.of<Match>({isFromTo: true, requirement: Mock.of<Requirement>({uniqueId: 'requirement5', capability: "cap2"}), capability: Mock.of<Capability>({uniqueId: 'capability1', type: 'tosca'})}),
+            Mock.of<Match>({isFromTo: false, requirement: Mock.of<Requirement>({uniqueId: 'requirement6', capability: "cap2"}), capability: Mock.of<Capability>({uniqueId: 'capability2', type: 'tosca'})}),
+            Mock.of<Match>({isFromTo: false, requirement: Mock.of<Requirement>({uniqueId: 'requirement7', capability: "cap2"}), capability: Mock.of<Capability>({uniqueId: 'capability1', type: 'othertype'})})
+        ]
+    });
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            providers: [ConnectionWizardService,
+				{provide: WorkspaceService, useValue: {}}
+            ]
+        });
+
+        service = TestBed.get(ConnectionWizardService);
+        service.connectRelationModel = connectRelationModelMock;
+    });
+
+    describe('getOptionalRequirementsByInstanceUniqueId', ()  => {
+        it('if no capability to match is sent in and isFromTo is true, ALL isFromTo==true requirements are returned', () => {
+            const requirements = service.getOptionalRequirementsByInstanceUniqueId(true);
+            expect(requirements['cap1'].length).toBe(4);
+            expect(requirements['cap2'].length).toBe(1);
+        });
+
+        it('if no capability to match is sent in and isFromTo is false, ALL isFromTo==false requirements are returned', () => {
+            const requirements = service.getOptionalRequirementsByInstanceUniqueId(false);
+            expect(requirements['cap1']).toBeUndefined();
+            expect(requirements['cap2'].length).toBe(2);
+        });
+
+        it('if capability to match IS sent in and isFromTo is true, matches with the same uniqueID and isFromTo==true are returned', () => {
+            const capability = Mock.of<Capability>({uniqueId: 'capability1'});
+            const requirements = service.getOptionalRequirementsByInstanceUniqueId(true, capability);
+            expect(requirements['cap1'].length).toBe(1);
+            expect(requirements['cap2'].length).toBe(1);
+        });
+
+        it('if capability to match IS sent in and isFromTo is false, requirements with the same uniqueID and isFromTo==false are returned', () => {
+            const capability = Mock.of<Capability>({uniqueId: 'capability1'});
+            const requirements = service.getOptionalRequirementsByInstanceUniqueId(false, capability);
+            expect(requirements['cap1']).toBeUndefined();
+            expect(requirements['cap2'].length).toBe(1);
+        });
+    })
+
+    describe('getOptionalCapabilitiesByInstanceUniqueId', ()  => {
+        it('if requirement to match IS sent in and isFromTo is true, matches with the same uniqueID and isFromTo==true are returned', () => {
+            const requirement = Mock.of<Requirement>({uniqueId: 'requirement1'});
+            const capabilities = service.getOptionalCapabilitiesByInstanceUniqueId(true, requirement);
+            expect(capabilities['othertype'].length).toBe(1);
+            expect(capabilities['tosca']).toBeUndefined();
+        });
+
+        it('if no requirement to match is sent in and isFromTo is true, a UNIQUE list of all capabilities with isFromTo==true are returned', () => {
+            const capabilities = service.getOptionalCapabilitiesByInstanceUniqueId(true);
+            expect(capabilities['othertype'].length).toBe(1);
+            expect(capabilities['tosca'].length).toBe(2);
+        });
+
+        it('if no requirement to match is sent in and isFromTo is false, all capabilities with isFromTo==false are returned', () => {
+            const capabilities = service.getOptionalCapabilitiesByInstanceUniqueId(false);
+            expect(capabilities['othertype'].length).toBe(1);
+            expect(capabilities['tosca'].length).toBe(1);
+        });
+    });
+
+});
+
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.service.ts
index af8dcb4956..2eb5428f61 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.service.ts
@@ -1,20 +1,23 @@
 import * as _ from "lodash";
-import {ConnectRelationModel} from "../../../models/graph/connectRelationModel";
+import {ConnectRelationModel} from "app/models/graph/connectRelationModel";
 import {Injectable} from "@angular/core";
 import { Requirement, Capability} from "app/models";
 import {Dictionary} from "lodash";
 import {Match, Component, PropertyFEModel} from "app/models";
+import {Store} from "@ngxs/store";
+import {WorkspaceService} from "../../../workspace/workspace.service";
 
 @Injectable()
 export class ConnectionWizardService {
     
     connectRelationModel:ConnectRelationModel;
-    currentComponent:Component;
     selectedMatch:Match;
     changedCapabilityProperties:PropertyFEModel[];
 
-    constructor() {
+
+    constructor(private workspaceService: WorkspaceService) {
         this.changedCapabilityProperties = [];
+
     }
 
     public setRelationMenuDirectiveObj = (connectRelationModel:ConnectRelationModel) => {
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/__snapshots__/from-node-step.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/__snapshots__/from-node-step.component.spec.ts.snap
new file mode 100644
index 0000000000..739ce3d8fe
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/__snapshots__/from-node-step.component.spec.ts.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`from-node-step component should match current snapshot 1`] = `
+<from-node-step
+  connectWizardService={[Function Object]}
+  preventBack={[Function Function]}
+  preventNext={[Function Function]}
+  updateSelectedReqOrCap={[Function Function]}
+>
+  <select-requirement-or-capability />
+</from-node-step>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/from-node-step.component.html
index 1cb3df735c..0a70069748 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/from-node-step.component.html
@@ -17,7 +17,6 @@
 <select-requirement-or-capability [optionalRequirementsMap]="optionalRequirementsMap"
                                   [optionalCapabilitiesMap]="optionalCapabilitiesMap"
                                   [selectedReqOrCapModel]="connectWizardService.selectedMatch && (connectWizardService.selectedMatch.isFromTo ? connectWizardService.selectedMatch.requirement : connectWizardService.selectedMatch.capability)"
-                                  [currentComponent]="connectWizardService.currentComponent"
                                   [componentInstanceId]="connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId"
                                   (updateSelectedReqOrCap)="updateSelectedReqOrCap($event)">
 </select-requirement-or-capability>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/from-node-step.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/from-node-step.component.spec.ts
new file mode 100644
index 0000000000..59ff72adda
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/from-node-step.component.spec.ts
@@ -0,0 +1,114 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Capability, Match } from 'app/models';
+import { ConfigureFn, configureTests } from '../../../../../../../jest/test-config.helper';
+import { Requirement } from '../../../../../../models/requirement';
+import { ConnectionWizardService } from '../connection-wizard.service';
+import { FromNodeStepComponent } from './from-node-step.component';
+
+describe('from-node-step component', () => {
+
+    let fixture: ComponentFixture<FromNodeStepComponent>;
+    let connectionWizardServiceMockWithoutSelectedMatch: Partial<ConnectionWizardService>;
+    let connectionWizardServiceMockWithSelectedMatch: Partial<ConnectionWizardService>;
+
+    const connectionWizardServiceMockSelectedMatchWithRequirements = {requirement: 'val'};
+
+    connectionWizardServiceMockWithoutSelectedMatch = {
+        getOptionalRequirementsByInstanceUniqueId: jest.fn().mockReturnValue(5),
+        getOptionalCapabilitiesByInstanceUniqueId: jest.fn().mockReturnValue(10),
+
+        connectRelationModel: {
+            fromNode: {
+                componentInstance: {
+                    uniqueId : 'testUniqueID'
+                }
+            }
+        }
+    };
+
+    connectionWizardServiceMockWithSelectedMatch = {
+        selectedMatch: connectionWizardServiceMockSelectedMatchWithRequirements,
+        getOptionalRequirementsByInstanceUniqueId: jest.fn().mockReturnValue(5),
+        getOptionalCapabilitiesByInstanceUniqueId: jest.fn().mockReturnValue(10)
+    };
+
+    let expectedConnectionWizardServiceMock = connectionWizardServiceMockWithoutSelectedMatch;
+
+    beforeEach(
+        async(() => {
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [FromNodeStepComponent],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: ConnectionWizardService, useValue: expectedConnectionWizardServiceMock}
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(FromNodeStepComponent);
+            });
+        })
+    );
+
+
+    it('should match current snapshot', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('preventBack return true - always', () => {
+        fixture.componentInstance.ngOnInit();
+        const result = fixture.componentInstance.preventBack();
+        expect(result).toEqual(true);
+    });
+
+    it('preventNext return true since selectedMatch does not exist in connectionWizardServiceMock', () => {
+        fixture.componentInstance.ngOnInit();
+        const result = fixture.componentInstance.preventNext();
+        expect(result).toEqual(true);
+    });
+
+    it('preventNext return false since to selectedMatch or selectedMatch.capability & selectedMatch.requirement does exist in connectionWizardServiceMock', () => {
+        fixture.componentInstance.connectWizardService = connectionWizardServiceMockWithSelectedMatch;
+        fixture.componentInstance.ngOnInit();
+        const result = fixture.componentInstance.preventNext();
+        expect(result).toEqual(false);
+    });
+
+    it('updateSelectedReqOrCap is called with instance of requirement, the selectMatch will be set to an Instance of Match of type Requirement', () => {
+        const requirement = new Requirement();
+        fixture.componentInstance.updateSelectedReqOrCap(requirement);
+        const expectedSelectedMatch = fixture.componentInstance.connectWizardService.selectedMatch;
+
+        expect(expectedSelectedMatch).toBeInstanceOf(Match);
+        expect(expectedSelectedMatch.capability).toBe(null);
+        expect(expectedSelectedMatch.fromNode).toBe('testUniqueID');
+        expect(expectedSelectedMatch.isFromTo).toBe(true);
+        expect(expectedSelectedMatch.toNode).toBe(null);
+        expect(expectedSelectedMatch.requirement).toBeInstanceOf(Requirement);
+    });
+
+    it('updateSelectedReqOrCap is called with instance of capability, the selectMatch will be set to an Instance of Match of type Capability', () => {
+        const capability = new Capability();
+        fixture.componentInstance.updateSelectedReqOrCap(capability);
+        const expectedSelectedMatch = fixture.componentInstance.connectWizardService.selectedMatch;
+
+        expect(expectedSelectedMatch).toBeInstanceOf(Match);
+        expect(expectedSelectedMatch.requirement).toBe(null);
+        expect(expectedSelectedMatch.fromNode).toBe(null);
+        expect(expectedSelectedMatch.isFromTo).toBe(false);
+        expect(expectedSelectedMatch.toNode).toBe('testUniqueID');
+        expect(expectedSelectedMatch.capability).toBeInstanceOf(Capability);
+    });
+
+    it('updateSelectedReqOrCap is called with null, the selectMatch will be set to null', () => {
+        fixture.componentInstance.updateSelectedReqOrCap(null);
+        const expectedSelectedMatch = fixture.componentInstance.connectWizardService.selectedMatch;
+
+        expect(expectedSelectedMatch).toBe(null);
+    });
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/from-node-step.component.ts
index 054d38b063..cffd58c9ea 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/from-node-step/from-node-step.component.ts
@@ -1,11 +1,10 @@
-import {Component, OnInit, Inject, forwardRef} from "@angular/core";
-import {IStepComponent} from "../../../../models/wizard-step";
-import {Dictionary} from "lodash";
-import { Match} from "app/models";
-import {ConnectionWizardService} from "../connection-wizard.service";
-import {Requirement} from "../../../../models/requirement";
-import {Capability} from "../../../../models/capability";
-import {PropertyModel} from "../../../../models/properties";
+import { Component, forwardRef, Inject, OnInit } from '@angular/core';
+import { Match } from 'app/models';
+import { Capability } from 'app/models/capability';
+import { Requirement } from 'app/models/requirement';
+import { IStepComponent } from 'app/models/wizard-step';
+import { Dictionary } from 'lodash';
+import { ConnectionWizardService } from '../connection-wizard.service';
 
 @Component({
     selector: 'from-node-step',
@@ -14,31 +13,31 @@ import {PropertyModel} from "../../../../models/properties";
 
 export class FromNodeStepComponent implements IStepComponent, OnInit{
 
-    constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {}
-
     optionalRequirementsMap: Dictionary<Requirement[]>;
     optionalCapabilitiesMap: Dictionary<Capability[]>;
 
-    ngOnInit(){
+    constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {}
+
+    ngOnInit() {
         this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(true);
         this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(false);
     }
 
-    preventNext = ():boolean => {
+    preventNext = (): boolean => {
         return !this.connectWizardService.selectedMatch || (!this.connectWizardService.selectedMatch.capability && !this.connectWizardService.selectedMatch.requirement);
     }
 
-    preventBack = ():boolean => {
+    preventBack = (): boolean => {
         return true;
     }
 
-    private updateSelectedReqOrCap = (selected:Requirement|Capability):void => {
-        if(!selected){
+    private updateSelectedReqOrCap = (selected: Requirement|Capability): void => {
+        if (!selected) {
             this.connectWizardService.selectedMatch = null;
-        } else if(selected instanceof Requirement){
+        } else if (selected instanceof Requirement) {
             this.connectWizardService.selectedMatch = new Match(<Requirement>selected, null, true, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId, null);
-        } else{
-            this.connectWizardService.selectedMatch = new Match(null,<Capability>selected , false, null, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId);
+        } else {
+            this.connectWizardService.selectedMatch = new Match(null, <Capability>selected , false, null, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId);
         }
     }
 
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.html
index 293ebf9822..a8177595a5 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.html
@@ -13,8 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
- 
 <div class="title">
     <span class="capability-name">
         {{(connectWizardService.selectedMatch.capability && connectWizardService.selectedMatch.capability.getTitle()) || connectWizardService.selectedMatch.relationship.relation.capability}}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.less
index 8e9e07c0d5..c8ad4d38d2 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.less
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/variables';
+@import '../../../../../../../assets/styles/variables';
 .title{
   margin-bottom: 20px;
   .capability-name-label{
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.ts
index 946d1858dc..2c12e0daed 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.ts
@@ -7,10 +7,10 @@
 import {Component, Inject, forwardRef} from '@angular/core';
 import {IStepComponent} from "app/models"
 import {ConnectionWizardService} from "../connection-wizard.service";
-import {PropertyFEModel} from "../../../../models/properties-inputs/property-fe-model";
-import {InstanceFePropertiesMap} from "../../../../models/properties-inputs/property-fe-map";
-import {PropertiesUtils} from "../../properties-assignment/services/properties.utils";
-import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service";
+import {PropertyFEModel} from "app/models/properties-inputs/property-fe-model";
+import {InstanceFePropertiesMap} from "app/models/properties-inputs/property-fe-map";
+import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
 
 @Component({
     selector: 'properties-step',
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/__snapshots__/to-node-step.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/__snapshots__/to-node-step.component.spec.ts.snap
new file mode 100644
index 0000000000..ea587bce71
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/__snapshots__/to-node-step.component.spec.ts.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`to-node-step component should match current snapshot 1`] = `
+<to-node-step
+  connectWizardService={[Function Object]}
+  optionalCapabilitiesMap={[Function Object]}
+  optionalRequirementsMap={[Function Object]}
+  preventBack={[Function Function]}
+  preventNext={[Function Function]}
+  updateSelectedReqOrCap={[Function Function]}
+>
+  <select-requirement-or-capability />
+</to-node-step>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/to-node-step.component.html
index 775a1a7fc2..4892b7fadc 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/to-node-step.component.html
@@ -13,13 +13,10 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
- 
 <select-requirement-or-capability [optionalRequirementsMap]="optionalRequirementsMap"
                                   [optionalCapabilitiesMap]="optionalCapabilitiesMap"
                                   [selectedReqOrCapModel]="connectWizardService.selectedMatch.isFromTo ? connectWizardService.selectedMatch.capability : connectWizardService.selectedMatch.requirement"
                                   [selectedReqOrCapOption]="displayRequirementsOrCapabilities"
-                                  [currentComponent]="connectWizardService.currentComponent"
                                   [componentInstanceId]="connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId"
                                   (updateSelectedReqOrCap)="updateSelectedReqOrCap($event)">
 </select-requirement-or-capability>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/to-node-step.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/to-node-step.component.spec.ts
new file mode 100644
index 0000000000..9d453f21dd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/to-node-step.component.spec.ts
@@ -0,0 +1,71 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {ToNodeStepComponent} from "./to-node-step.component";
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {ConfigureFn, configureTests} from "../../../../../../../jest/test-config.helper";
+import {Match} from "../../../../../../models/graph/match-relation";
+
+
+describe('to-node-step component', () => {
+
+    let fixture: ComponentFixture<ToNodeStepComponent>;
+    let connectionWizardServiceMock: Partial<ConnectionWizardService>;
+
+    beforeEach(
+        async(() => {
+
+            connectionWizardServiceMock = {
+                // selectedMatch: new Match(null, null, true, '',''),
+                selectedMatch: {
+                    isFromTo: false
+                },
+                getOptionalRequirementsByInstanceUniqueId: jest.fn().mockReturnValue(5),
+                getOptionalCapabilitiesByInstanceUniqueId: jest.fn().mockReturnValue(10)
+            }
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [ToNodeStepComponent],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: ConnectionWizardService, useValue: connectionWizardServiceMock}
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(ToNodeStepComponent);
+            });
+        })
+    );
+
+
+    it('should match current snapshot', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should test the ngOnInit with isFromTo = false', () => {
+        const component = TestBed.createComponent(ToNodeStepComponent);
+        let service = TestBed.get(ConnectionWizardService);
+        service.selectedMatch.isFromTo = false;
+        component.componentInstance.ngOnInit();
+        expect(component.componentInstance.displayRequirementsOrCapabilities).toEqual("Requirement");
+        expect(connectionWizardServiceMock.getOptionalRequirementsByInstanceUniqueId).toHaveBeenCalledWith(false, connectionWizardServiceMock.selectedMatch.capability);
+        expect(component.componentInstance.optionalRequirementsMap).toEqual(5);
+        expect(component.componentInstance.optionalCapabilitiesMap).toEqual({});
+    });
+
+
+    it('should test the ngOnInit with isFromTo = true', () => {
+        const component = TestBed.createComponent(ToNodeStepComponent);
+        let service = TestBed.get(ConnectionWizardService);
+        service.selectedMatch.isFromTo = true;
+        component.componentInstance.ngOnInit();
+        expect(component.componentInstance.displayRequirementsOrCapabilities).toEqual("Capability");
+        expect(connectionWizardServiceMock.getOptionalCapabilitiesByInstanceUniqueId).toHaveBeenCalledWith(true, connectionWizardServiceMock.selectedMatch.requirement);
+        expect(component.componentInstance.optionalCapabilitiesMap).toEqual(10);
+        expect(component.componentInstance.optionalRequirementsMap).toEqual({});
+    });
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/to-node-step.component.ts
index ea3b129c7b..67dc381284 100644
--- a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/to-node-step/to-node-step.component.ts
@@ -2,10 +2,10 @@ import {Component, forwardRef, Inject} from '@angular/core';
 import {IStepComponent} from "app/models"
 import {Dictionary} from "lodash";
 import {ConnectionWizardService} from "../connection-wizard.service";
-import {Match} from "../../../../models/graph/match-relation";
-import {Requirement} from "../../../../models/requirement";
-import {Capability} from "../../../../models/capability";
-import {PropertyModel} from "../../../../models/properties";
+import {Match} from "app/models/graph/match-relation";
+import {Requirement} from "app/models/requirement";
+import {Capability} from "app/models/capability";
+import {PropertyModel} from "app/models/properties";
 
 @Component({
     selector: 'to-node-step',
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/__snapshots__/link-row.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/__snapshots__/link-row.component.spec.ts.snap
new file mode 100644
index 0000000000..094f41bd84
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/__snapshots__/link-row.component.spec.ts.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`artifact form component should match current snapshot of artifact form component 1`] = `
+<link-row
+  source={[Function Array]}
+  srcCP={[Function Array]}
+  target={[Function Array]}
+  targetCP={[Function Array]}
+>
+  <ui-element-dropdown
+    class="cell link-selector"
+    data-tests-id="linkSrc"
+  /><ui-element-dropdown
+    class="cell link-selector"
+    data-tests-id="linkSrcCP"
+  /><ui-element-dropdown
+    class="cell link-selector"
+    data-tests-id="linkTarget"
+  /><ui-element-dropdown
+    class="cell link-selector"
+    data-tests-id="linkTargetCP"
+  /><div
+    class="cell remove"
+    data-tests-id="removeLnk"
+  >
+    
+  </div>
+</link-row>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.html
index 0abdda1cc6..0abdda1cc6 100644
--- a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.html
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.less
index beec9bd567..2a1d0d98c8 100644
--- a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.less
@@ -1,4 +1,4 @@
-@import './../../../../../assets/styles/variables.less';
+@import './../../../../../../../assets/styles/variables.less';
 .remove {
     display: flex;
     align-items: center;
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.spec.ts
new file mode 100644
index 0000000000..5cbad6ea5d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.spec.ts
@@ -0,0 +1,478 @@
+import {async, ComponentFixture} from "@angular/core/testing";
+import {CacheService} from "../../../../../services/cache.service";
+import {ConfigureFn, configureTests} from "../../../../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {LinkRowComponent} from "./link-row.component";
+import {DropdownValue} from "../../../../../components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {MapItemData, ServicePathMapItem} from "../../../../../../models/graph/nodes-and-links-map";
+
+describe('artifact form component', () => {
+
+    let fixture: ComponentFixture<LinkRowComponent>;
+    let cacheServiceMock: Partial<CacheService>;
+
+    beforeEach(
+        async(() => {
+
+
+            cacheServiceMock = {
+                contains: jest.fn(),
+                remove: jest.fn(),
+                set: jest.fn(),
+                get: jest.fn()
+            }
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [LinkRowComponent],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: []
+                    ,
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(LinkRowComponent);
+            });
+        })
+    );
+
+
+    it('should match current snapshot of artifact form component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+
+    it('ngOnChanges() -> in case data exist -> call to parseInitialData()' ,() => {
+        // init values / mock functions
+        let data = 'something';
+        fixture.componentInstance.parseInitialData = jest.fn();
+        fixture.componentInstance.data = data;
+
+        // call to the tested function
+        fixture.componentInstance.ngOnChanges();
+
+        // expect that
+        expect(fixture.componentInstance.parseInitialData).toHaveBeenCalledWith(data);
+    });
+
+    it('onSourceSelected() -> in case id -> srcCP, link.fromCP, link.toNode, link.toCP, target, targetCP should be updated accordingly' ,() => {
+        // init values / mock functions
+        let id = 'id';
+        let data = 'data';
+        let link = {
+            fromCP:'testVal',
+            toNode:'testVal',
+            toCP:'testVal'
+        }
+        let target = ['val1', 'val2'];
+        let targetCP = ['val1', 'val2'];
+
+        fixture.componentInstance.findOptions = jest.fn();
+        fixture.componentInstance.convertValuesToDropDownOptions = jest.fn(() => 'dummyConvertedVal');
+        fixture.componentInstance.data = data;
+        fixture.componentInstance.link = link;
+        fixture.componentInstance.target = target;
+        fixture.componentInstance.targetCP = targetCP;
+
+        // call to the tested function
+        fixture.componentInstance.onSourceSelected(id);
+
+        // expect that
+        expect(fixture.componentInstance.findOptions).toHaveBeenCalledWith(data, id);
+        expect(fixture.componentInstance.srcCP).toBe('dummyConvertedVal');
+        expect(fixture.componentInstance.link.fromCP).toBe('');
+        expect(fixture.componentInstance.link.toNode).toBe('');
+        expect(fixture.componentInstance.link.toCP).toBe('');
+        expect(fixture.componentInstance.target.length).toBe(0);
+        expect(fixture.componentInstance.targetCP.length).toBe(0);
+    });
+
+    it('onSourceSelected() -> in case id undefined -> No Change to srcCP, link.fromCP, link.toNode, link.toCP, target, targetCP' ,() => {
+        // init values / mock functions
+        let id;
+        let data = 'data';
+        let link = {
+            fromCP:'testVal',
+            toNode:'testVal',
+            toCP:'testVal'
+        }
+        let target = ['val1', 'val2'];
+        let targetCP = ['val1', 'val2'];
+
+        fixture.componentInstance.findOptions = jest.fn();
+        fixture.componentInstance.convertValuesToDropDownOptions = jest.fn(() => 'dummyConvertedVal');
+        fixture.componentInstance.data = data;
+        fixture.componentInstance.link = link;
+        fixture.componentInstance.target = target;
+        fixture.componentInstance.targetCP = targetCP;
+
+        // call to the tested function
+        fixture.componentInstance.onSourceSelected(id);
+
+        // expect that
+        expect(fixture.componentInstance.link.fromCP).toBe(link.fromCP);
+        expect(fixture.componentInstance.link.toNode).toBe(link.toNode);
+        expect(fixture.componentInstance.link.toCP).toBe(link.toCP);
+        expect(fixture.componentInstance.target.length).toBe(2);
+        expect(fixture.componentInstance.target[0]).toBe('val1')
+        expect(fixture.componentInstance.targetCP.length).toBe(2);
+        expect(fixture.componentInstance.targetCP[1]).toBe('val2');
+    });
+
+    it('onSrcCPSelected() -> in case id  -> Verify target, link.fromCPOriginId, link.toNode, link.toCP, targetCP.length' ,() => {
+        // init values / mock functions
+        let id = 'id';
+        let link = {
+            fromNode:'testVal',
+            toCPOriginId: 'initValue_ShouldBeChanged'
+        };
+        let option1 = {
+            id: 'something'
+        };
+        let option2 = {
+            id: 'id',
+            data: {"ownerId":1}
+        };
+
+        fixture.componentInstance.link = link;
+        fixture.componentInstance.findOptions = jest.fn(() => [option1, option2]);
+        fixture.componentInstance.convertValuesToDropDownOptions = jest.fn(() => 'dummyConvertedVal');
+
+        // call to the tested function
+        fixture.componentInstance.onSrcCPSelected(id);
+
+        // expect that
+        expect(fixture.componentInstance.target).toBe('dummyConvertedVal');
+        expect(fixture.componentInstance.link.fromCPOriginId).toBe(option2.data.ownerId);
+        expect(fixture.componentInstance.link.toNode).toBe('');
+        expect(fixture.componentInstance.link.toCP).toBe('');
+        expect(fixture.componentInstance.targetCP.length).toBe(0);
+
+    });
+
+    it('onSrcCPSelected() -> in case id undefined -> Verify target, link.fromCPOriginId, link.toNode, link.toCP, targetCP.length' ,() => {
+        // init values / mock functions
+        let id;
+
+        let targetInput:Array<DropdownValue> = [{value:'Value', label:'Label', hidden:true, selected:true}];
+
+        let linkInput = {
+            fromCPOriginId:'expectedLinkFromCPOriginId',
+            toNode:'expectedLinkToNode',
+            toCP:'expectedLinkToCP',
+            // Link Object
+            canEdit:true,
+            canRemove:true,
+            isFirst:true,
+            // ForwardingPathLink Object
+            ownerId:'',
+            fromNode:'',
+            fromCP:'',
+            toCPOriginId:''
+        }
+
+        fixture.componentInstance.target = targetInput;
+        fixture.componentInstance.link = linkInput;
+        fixture.componentInstance.targetCP = targetInput;
+
+
+        // call to the tested function
+        fixture.componentInstance.onSrcCPSelected(id);
+
+        // expect that
+        expect(fixture.componentInstance.target).toBe(targetInput);
+        expect(fixture.componentInstance.link.fromCPOriginId).toBe('expectedLinkFromCPOriginId');
+        expect(fixture.componentInstance.link.toNode).toBe('expectedLinkToNode');
+        expect(fixture.componentInstance.link.toCP).toBe('expectedLinkToCP');
+        expect(fixture.componentInstance.targetCP.length).toBe(1);
+    });
+
+    it('onTargetSelected() -> in case id  -> Verify targetCP & link.toCP' ,() => {
+        // init values / mock functions
+        let id = 'id';
+        let link = {
+            toCP:'testVal'
+        }
+        let targetCP = ['val1', 'val2'];
+
+        fixture.componentInstance.findOptions = jest.fn();
+        fixture.componentInstance.convertValuesToDropDownOptions = jest.fn(() => 'dummyConvertedVal');
+        fixture.componentInstance.link = link;
+        fixture.componentInstance.targetCP = targetCP;
+
+        // call to the tested function
+        fixture.componentInstance.onTargetSelected(id);
+
+        // expect that
+        expect(fixture.componentInstance.targetCP).toBe('dummyConvertedVal');
+        expect(fixture.componentInstance.link.toCP).toBe('');
+
+    });
+
+    it('onTargetSelected() -> in case id undefined -> Verify targetCP & link.toCP' ,() => {
+        // init values / mock functions
+        let id;
+        let link = {
+            toCP:'toCP_testVal'
+        }
+        let targetCP = ['val1', 'val2'];
+
+        fixture.componentInstance.findOptions = jest.fn();
+        fixture.componentInstance.convertValuesToDropDownOptions = jest.fn(() => 'dummyConvertedVal');
+        fixture.componentInstance.link = link;
+        fixture.componentInstance.targetCP = targetCP;
+
+        // call to the tested function
+        fixture.componentInstance.onTargetSelected(id);
+
+        // expect that
+        expect(fixture.componentInstance.targetCP.length).toBe(2);
+        expect(fixture.componentInstance.targetCP).toEqual(['val1', 'val2']);
+        expect(fixture.componentInstance.link.toCP).toBe('toCP_testVal');
+    });
+
+    it('onTargetCPSelected() -> in case id  -> Validate toCPOriginId' ,() => {
+        // init values / mock functions
+        let id = 'id';
+        let link = {
+            toNode:'testVal',
+            toCPOriginId: 'initValue_ShouldBeChanged'
+        };
+        let option1 = {
+             id: 'something'
+        };
+        let option2 = {
+             id: 'id',
+             data: {"ownerId":1}
+        };
+        fixture.componentInstance.link = link;
+        fixture.componentInstance.findOptions = jest.fn(() => [option1, option2]);
+
+        // call to the tested function
+        fixture.componentInstance.onTargetCPSelected(id);
+
+        // expect that
+        expect(fixture.componentInstance.link.toCPOriginId).toBe(option2.data.ownerId);
+    });
+
+    it('onTargetCPSelected() -> in case id undefined -> Validate toCPOriginId' ,() => {
+        // init values / mock functions
+        let id;
+        let link = {
+            toNode:'testVal',
+            toCPOriginId: 'initValue_ShouldRemain'
+        };
+        let option1 = {
+            id: 'something'
+        };
+        let option2 = {
+            id: 'id',
+            data: {"ownerId":1}
+        };
+        fixture.componentInstance.link = link;
+        fixture.componentInstance.findOptions = jest.fn(() => [option1, option2]);
+
+        // call to the tested function
+        fixture.componentInstance.onTargetCPSelected(id);
+
+        // expect that
+        expect(fixture.componentInstance.link.toCPOriginId).toBe('initValue_ShouldRemain');
+    });
+
+
+    it('findOptions() -> in case item.data.options -> Validate return item.data.options' ,() => {
+        // init values / mock functions
+        const innerMapItemData1: MapItemData = { id: 'innerMapItemData1_id', name: 'innerMapItemData1_name', options: []};
+        const innerServicePathItem: ServicePathMapItem = { id: 'innerServicePathItem_id', data: innerMapItemData1 };
+        const mapItemData1: MapItemData = { id: 'mapItemData1_id', name: 'mapItemData1_name', options: [innerServicePathItem]};
+
+        const servicePathItem: ServicePathMapItem = { id: 'servicePathItem_id', data: mapItemData1 };
+        const arrServicePathItems: ServicePathMapItem[] = [servicePathItem];
+
+        let nodeOrCPId: string = servicePathItem.id;
+
+        // call to the tested function
+        let res = fixture.componentInstance.findOptions(arrServicePathItems, nodeOrCPId);
+
+        // expect that
+        expect(res).toEqual([innerServicePathItem]);
+    });
+
+    it('findOptions() -> in case NOT item || item.data || item.data.options -> Validate return null' ,() => {
+        // init values / mock functions
+        let item = [{
+            // data: {
+                data:{
+                    name:'data_name',
+                    id: 'data_id'
+                },
+                name:'name',
+                id: 'id'
+            // }
+        }];
+        let items: Array<ServicePathMapItem> = item;
+        let nodeOrCPId: string = 'someString';
+
+        // call to the tested function
+        let res = fixture.componentInstance.findOptions(items, nodeOrCPId);
+
+        // expect that
+        expect(res).toBe(null);
+    });
+
+    it('convertValuesToDropDownOptions() -> Verify that the result is sorted' ,() => {
+        // init values / mock functions
+        const mapItemData1: MapItemData = { id: 'Z_ID', name: 'Z_NAME'};
+        const servicePathItem1: ServicePathMapItem = { id: 'Z_servicePathItem_id', data: mapItemData1 };
+
+        const mapItemData2: MapItemData = { id: 'A_ID', name: 'A_NAME'};
+        const servicePathItem2: ServicePathMapItem = { id: 'A_servicePathItem_id', data: mapItemData2 };
+
+        const mapItemData3: MapItemData = { id: 'M_ID', name: 'M_NAME'};
+        const servicePathItem3: ServicePathMapItem = { id: 'M_servicePathItem_id', data: mapItemData3 };
+
+        const arrServicePathItems: ServicePathMapItem[] = [servicePathItem1, servicePathItem2, servicePathItem3];
+
+        // call to the tested function
+        let res = fixture.componentInstance.convertValuesToDropDownOptions(arrServicePathItems);
+
+        // expect that
+        expect(res.length).toBe(3);
+        expect(res[0].value).toBe("A_servicePathItem_id");
+        expect(res[0].label).toBe("A_NAME");
+        expect(res[1].value).toBe("M_servicePathItem_id");
+        expect(res[1].label).toBe("M_NAME");
+        expect(res[2].value).toBe("Z_servicePathItem_id");
+        expect(res[2].label).toBe("Z_NAME");
+
+    });
+
+    it('parseInitialData() -> link.fromNode Exist => Verify srcCP' ,() => {
+        // init values / mock functions
+
+        //Simulate Array<ServicePathMapItem to pass to the function
+        const mapItemData1: MapItemData = { id: 'mapItemID', name: 'mapItemName'};
+        const servicePathItem1: ServicePathMapItem = { id: 'servicePathItemId', data: mapItemData1 };
+        const arrServicePathItems: ServicePathMapItem[] = [servicePathItem1];
+
+        //Simulate link
+        let link = {
+            fromNode:'testVal'
+        };
+        fixture.componentInstance.link = link;
+
+        //Simulate the response from convertValuesToDropDownOptions()
+        const value = "expected_id_fromNode";
+        const label = "expected_label_fromNode"
+        let result:Array<DropdownValue> = [];
+        result[0] =  new DropdownValue(value, label);
+        fixture.componentInstance.convertValuesToDropDownOptions = jest.fn(() => result);
+
+        //Simulate the response from findOptions()
+        const innerMapItemData1: MapItemData = { id: 'innerMapItemData1_id', name: 'innerMapItemData1_name', options: []};
+        const options: ServicePathMapItem = { id: 'innerServicePathItem_id', data: innerMapItemData1 };
+        fixture.componentInstance.findOptions = jest.fn(() => options);
+
+
+        // call to the tested function
+        fixture.componentInstance.parseInitialData(arrServicePathItems);
+
+        // expect that
+        expect(fixture.componentInstance.srcCP.length).toBe(1);
+        expect(fixture.componentInstance.srcCP[0]).toEqual({
+            "value": value,
+            "label": label,
+            "hidden": false,
+            "selected": false
+        });
+    });
+
+    it('parseInitialData() -> link.fromNode & link.fromCP Exist => Verify srcCP' ,() => {
+        // init values / mock functions
+
+        //Simulate Array<ServicePathMapItem to pass to the function
+        const mapItemData1: MapItemData = { id: 'mapItemID', name: 'mapItemName'};
+        const servicePathItem1: ServicePathMapItem = { id: 'servicePathItemId', data: mapItemData1 };
+        const arrServicePathItems: ServicePathMapItem[] = [servicePathItem1];
+
+        //Simulate link
+        let link = {
+            fromNode:'testVal',
+            fromCP: 'testVal'
+        };
+        fixture.componentInstance.link = link;
+
+        //Simulate the response from convertValuesToDropDownOptions()
+        const value = "expected_id_fromNode_and_fromCP";
+        const label = "expected_label_fromNode_and_fromCP"
+        let result:Array<DropdownValue> = [];
+        result[0] =  new DropdownValue(value, label);
+        fixture.componentInstance.convertValuesToDropDownOptions = jest.fn(() => result);
+
+        //Simulate the response from findOptions()
+        const innerMapItemData1: MapItemData = { id: 'innerMapItemData1_id', name: 'innerMapItemData1_name', options: []};
+        const options: ServicePathMapItem = { id: 'innerServicePathItem_id', data: innerMapItemData1 };
+        fixture.componentInstance.findOptions = jest.fn(() => options);
+
+
+        // call to the tested function
+        fixture.componentInstance.parseInitialData(arrServicePathItems);
+
+        // expect that
+        expect(fixture.componentInstance.srcCP.length).toBe(1);
+        expect(fixture.componentInstance.srcCP[0]).toEqual({
+            "value": value,
+            "label": label,
+            "hidden": false,
+            "selected": false
+        });
+    });
+
+
+    it('parseInitialData() -> link.fromNode & link.fromCP & link.toNode Exist => Verify srcCP' ,() => {
+        // init values / mock functions
+
+        //Simulate Array<ServicePathMapItem to pass to the function
+        const mapItemData1: MapItemData = { id: 'mapItemID', name: 'mapItemName'};
+        const servicePathItem1: ServicePathMapItem = { id: 'servicePathItemId', data: mapItemData1 };
+        const arrServicePathItems: ServicePathMapItem[] = [servicePathItem1];
+
+        //Simulate link
+        let link = {
+            fromNode:'testVal',
+            fromCP: 'testVal',
+            toNode: 'testVal'
+        };
+        fixture.componentInstance.link = link;
+
+        //Simulate the response from convertValuesToDropDownOptions()
+        const value = "expected_id_fromNode_and_fromCP_and_toNode";
+        const label = "expected_label_fromNode_and_fromCP_and_toNode"
+        let result:Array<DropdownValue> = [];
+        result[0] =  new DropdownValue(value, label);
+        fixture.componentInstance.convertValuesToDropDownOptions = jest.fn(() => result);
+
+        //Simulate the response from findOptions()
+        const innerMapItemData1: MapItemData = { id: 'innerMapItemData1_id', name: 'innerMapItemData1_name', options: []};
+        const options: ServicePathMapItem = { id: 'innerServicePathItem_id', data: innerMapItemData1 };
+        fixture.componentInstance.findOptions = jest.fn(() => options);
+
+
+        // call to the tested function
+        fixture.componentInstance.parseInitialData(arrServicePathItems);
+
+        // expect that
+        expect(fixture.componentInstance.srcCP.length).toBe(1);
+        expect(fixture.componentInstance.srcCP[0]).toEqual({
+            "value": value,
+            "label": label,
+            "hidden": false,
+            "selected": false
+        });
+    });
+
+
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.ts
index e4fc1d4522..83c30b1a60 100644
--- a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link-row.component.ts
@@ -2,6 +2,7 @@ import {Component, Input} from '@angular/core';
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 import {Link} from './link.model';
 import {ServicePathMapItem} from "app/models/graph/nodes-and-links-map";
+import * as _ from "lodash";
 
 @Component({
     selector: 'link-row',
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link.model.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link.model.ts
index 80128eb42e..80128eb42e 100644
--- a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link.model.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/link-row/link.model.ts
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/service-path-creator.component.html
index cc14b4961f..db0d912934 100644
--- a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/service-path-creator.component.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
 <div class="service-path-creator">
 	<form class="w-sdc-form">
 		<div class="i-sdc-form-item" >
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/service-path-creator.component.less
index 5c9e53e229..2a3efbdd3c 100644
--- a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/service-path-creator.component.less
@@ -1,4 +1,4 @@
-@import './../../../../assets/styles/variables.less';
+@import './../../../../../../assets/styles/variables.less';
 .service-path-creator {
     font-family: @font-opensans-regular;
     .separator-buttons {
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/service-path-creator.component.ts
index bffb1c5e7e..17c2081a75 100644
--- a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/service-path-creator.component.ts
@@ -25,6 +25,7 @@ import {ForwardingPath} from 'app/models/forwarding-path';
 import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
 import {ForwardingPathLink} from "app/models/forwarding-path-link";
 import {ServicePathMapItem} from "app/models/graph/nodes-and-links-map";
+import {CompositionService} from "app/ng2/pages/composition/composition.service";
 
 @Component({
     selector: 'service-path-creator',
@@ -43,7 +44,8 @@ export class ServicePathCreatorComponent {
     forwardingPath:ForwardingPath;
     //isExtendAllowed:boolean = false;
 
-    constructor(private serviceService: ServiceServiceNg2) {
+    constructor(private serviceService: ServiceServiceNg2,
+                private compositionService: CompositionService) {
         this.forwardingPath = new ForwardingPath();
         this.links = [new Link(new ForwardingPathLink('', '', '', '', '', ''), true, false, true)];
         this.headers = ['Source', 'Source Connection Point', 'Target', 'Target Connection Point', ' '];
@@ -57,7 +59,7 @@ export class ServicePathCreatorComponent {
     }
 
     ngOnInit() {
-        this.serviceService.getNodesAndLinksMap(this.input.service).subscribe((res:any) => {
+        this.serviceService.getNodesAndLinksMap(this.input.serviceId).subscribe((res:any) => {
             this.linksMap = res;
         });
         this.processExistingPath();
@@ -66,7 +68,7 @@ export class ServicePathCreatorComponent {
 
     private processExistingPath() {
         if (this.input.pathId) {
-            let forwardingPath = <ForwardingPath>{...this.input.service.forwardingPaths[this.input.pathId]};
+            let forwardingPath = <ForwardingPath>{...this.compositionService.forwardingPaths[this.input.pathId]};
             this.forwardingPath.name = forwardingPath.name;
             this.forwardingPath.destinationPortNumber = forwardingPath.destinationPortNumber;
             this.forwardingPath.protocol = forwardingPath.protocol;
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/service-path-creator.module.ts
index 78005317a2..78005317a2 100644
--- a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-creator/service-path-creator.module.ts
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.html
index e1a4f68a9b..e1a4f68a9b 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.html
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.less
index f3cb4a3c34..f618d6b6f4 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.less
@@ -1,4 +1,4 @@
-@import './../../../../../assets/styles/variables.less';
+@import './../../../../../../assets/styles/variables.less';
 .service-path-selector {
 	margin: 10px 35px 10px 0;
 	display: flex;
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.ts
new file mode 100644
index 0000000000..0dba906f64
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.ts
@@ -0,0 +1,142 @@
+import {Component, Input, KeyValueDiffer, IterableDiffers, KeyValueDiffers, DoCheck} from '@angular/core';
+import {Service} from "app/models/components/service";
+import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import {ForwardingPath} from "app/models/forwarding-path";
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {CompositionService} from "app/ng2/pages/composition/composition.service";
+import {EventListenerService} from "app/services/event-listener-service";
+import {GRAPH_EVENTS} from "app/utils/constants";
+
+@Component({
+    selector: 'service-path-selector',
+    templateUrl: './service-path-selector.component.html',
+    styleUrls: ['service-path-selector.component.less']
+})
+
+export class ServicePathSelectorComponent {
+
+    defaultSelectedId: string;
+    hideAllValue: string;
+    hideAllId: string = '0';
+    showAllValue: string;
+    showAllId: string = '1';
+
+    paths: Array<ForwardingPath> = [];
+    dropdownOptions: Array<DropdownValue>;
+    differ: KeyValueDiffer<string, ForwardingPath>;
+
+    @Input() drawPath: Function;
+    @Input() deletePaths: Function;
+    @Input() selectedPathId: string;
+
+    constructor(private differs: KeyValueDiffers,
+                private translateService: TranslateService,
+                private compositionService: CompositionService,
+                private eventListenerService: EventListenerService
+    ) {
+
+        this.defaultSelectedId = this.hideAllId;
+        this.convertPathsToDropdownOptions();
+
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.hideAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE");
+            this.showAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE");
+            this.convertPathsToDropdownOptions();
+        });
+
+    }
+
+    ngOnInit(): void {
+
+        this.selectedPathId = this.defaultSelectedId;
+        this.differ = this.differs.find(this.compositionService.forwardingPaths).create();
+        this.updatePaths();
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_SERVICE_PATH_CREATED, (createdId) => {
+            this.selectedPathId = createdId;
+            this.updatePaths();
+        } )
+
+    }
+
+    updatePaths(): void {
+
+        const pathsChanged = this.differ.diff(this.compositionService.forwardingPaths);
+
+        if (pathsChanged) {
+            let oldPaths = _.cloneDeep(this.paths);
+            this.populatePathsFromService();
+
+            if (!(_.isEqual(oldPaths, this.paths))) {
+                this.convertPathsToDropdownOptions();
+
+                let temp = this.selectedPathId;
+                this.selectedPathId = '-1';
+
+                setTimeout(() => {
+                    this.selectedPathId = temp;
+                    this.onSelectPath();
+                }, 0);
+            }
+        }
+
+    }
+
+    populatePathsFromService(): void {
+
+        this.paths = [];
+
+        _.forEach(this.compositionService.forwardingPaths, path => {
+            this.paths.push(path);
+        });
+        this.paths.sort((a: ForwardingPath, b: ForwardingPath) => {
+            return a.name.localeCompare(b.name);
+        });
+
+    }
+
+    convertPathsToDropdownOptions(): void {
+
+        let result = [
+            new DropdownValue(this.hideAllId, this.hideAllValue),
+            new DropdownValue(this.showAllId, this.showAllValue)
+        ];
+
+        _.forEach(this.paths, (value: ForwardingPath) => {
+            result[result.length] = new DropdownValue(value.uniqueId, value.name);
+        });
+
+        this.dropdownOptions = result;
+
+    }
+
+    onSelectPath = (): void => {
+
+        if (this.selectedPathId !== '-1') {
+            this.deletePaths();
+
+            switch (this.selectedPathId) {
+                case this.hideAllId:
+                    break;
+
+                case this.showAllId:
+                    _.forEach(this.paths, path =>
+                        this.drawPath(path)
+                    );
+                    break;
+
+                default:
+                    let path = this.paths.find(path =>
+                        path.uniqueId === this.selectedPathId
+                    );
+                    if (!path) {
+                        this.selectedPathId = this.defaultSelectedId;
+                        this.onSelectPath(); // currently does nothing in default case, but if one day it does, we want the selection to behave accordingly.
+                        break;
+                    }
+                    this.drawPath(path);
+                    break;
+            }
+        }
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.module.ts
index c07061ce9a..6782c88b76 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {ServicePathSelectorComponent} from "./service-path-selector.component";
 import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {CompositionService} from "app/ng2/pages/composition/composition.service";
 
 @NgModule({
     declarations: [
@@ -11,11 +12,11 @@ import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
     	CommonModule,
     	UiElementsModule
     ],
-    exports: [],
+    exports: [ServicePathSelectorComponent],
     entryComponents: [
         ServicePathSelectorComponent
     ],
-    providers: []
+    providers: [CompositionService]
 })
 export class ServicePathSelectorModule {
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/service-paths-list/service-paths-list.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.html
index 33a0090372..39c41916a2 100644
--- a/catalog-ui/src/app/ng2/pages/service-paths-list/service-paths-list.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.html
@@ -1,19 +1,3 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
 <div class="service-path-list">
     <div class="add-path-link" *ngIf="!isViewOnly"><a (click)="onAddServicePath()" data-tests-id="add-service-path-lnk" >+ Add Flow</a></div>
     <div class="generic-table table-container" >
diff --git a/catalog-ui/src/app/ng2/pages/service-paths-list/service-paths-list.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.less
index 291119f58c..17f70926ff 100644
--- a/catalog-ui/src/app/ng2/pages/service-paths-list/service-paths-list.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.less
@@ -1,4 +1,4 @@
-@import './../../../../assets/styles/variables.less';
+@import './../../../../../../assets/styles/variables.less';
 
 .add-path-link {
   display: flex;
diff --git a/catalog-ui/src/app/ng2/pages/service-paths-list/service-paths-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts
index 1625ab4b66..81abe42cb3 100644
--- a/catalog-ui/src/app/ng2/pages/service-paths-list/service-paths-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts
@@ -24,6 +24,7 @@ import {ForwardingPath} from "app/models/forwarding-path";
 import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
 import {ModalService} from "app/ng2/services/modal.service";
 import {ModalComponent} from "app/ng2/components/ui/modal/modal.component";
+import {CompositionService} from "app/ng2/pages/composition/composition.service";
 
 @Component({
     selector: 'service-paths-list',
@@ -31,7 +32,7 @@ import {ModalComponent} from "app/ng2/components/ui/modal/modal.component";
     styleUrls:['service-paths-list.component.less'],
     providers: [ServiceServiceNg2, ModalService]
 })
-export default class ServicePathsListComponent {
+export class ServicePathsListComponent {
     modalInstance: ComponentRef<ModalComponent>;
     headers: Array<string> = [];
     paths: Array<ForwardingPath> = [];
@@ -40,12 +41,13 @@ export default class ServicePathsListComponent {
     onEditServicePath: Function;
     isViewOnly: boolean;
 
-    constructor(private serviceService:ServiceServiceNg2) {
+    constructor(private serviceService:ServiceServiceNg2,
+                private compositionService: CompositionService) {
         this.headers = ['Flow Name','Actions'];
     }
 
     ngOnInit() {
-        _.forEach(this.input.service.forwardingPaths, (path: ForwardingPath)=> {
+        _.forEach(this.compositionService.forwardingPaths, (path: ForwardingPath)=> {
             this.paths[this.paths.length] = path;
         });
         this.paths.sort((a:ForwardingPath, b:ForwardingPath)=> {
@@ -57,8 +59,8 @@ export default class ServicePathsListComponent {
     }
 
     deletePath = (id:string):void =>   {
-        this.serviceService.deleteServicePath(this.input.service, id).subscribe((res:any) => {
-            delete this.input.service.forwardingPaths[id];
+        this.serviceService.deleteServicePath(this.input.serviceId, id).subscribe((res:any) => {
+            delete this.compositionService.forwardingPaths[id];
             this.paths = this.paths.filter(function(path){
                 return path.uniqueId !== id;
             });
diff --git a/catalog-ui/src/app/ng2/pages/service-paths-list/service-paths-list.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.module.ts
index c236934002..5121627a9d 100644
--- a/catalog-ui/src/app/ng2/pages/service-paths-list/service-paths-list.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import {CommonModule} from "@angular/common";
-import ServicePathsListComponent from "./service-paths-list.component";
+import { ServicePathsListComponent } from "./service-paths-list.component";
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-general-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-general-utils.ts
new file mode 100644
index 0000000000..bc8bd691c9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-general-utils.ts
@@ -0,0 +1,268 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import * as _ from "lodash";
+import {ComponentInstance, Match, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models";
+import {Dictionary, GraphUIObjects} from "app/utils";
+import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
+import {CommonGraphUtils} from "../common/common-graph-utils";
+import {Injectable} from "@angular/core";
+import {QueueServiceUtils} from "app/ng2/utils/queue-service-utils";
+import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
+import {RequirementsGroup} from "app/models/requirement";
+import {CapabilitiesGroup} from "app/models/capability";
+import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service";
+import {CompositionService} from "../../composition.service";
+import {WorkspaceService} from "app/ng2/pages/workspace/workspace.service";
+import {NotificationsService} from "onap-ui-angular/dist/notifications/services/notifications.service";
+import {NotificationSettings} from "onap-ui-angular/dist/notifications/utilities/notification.config";
+
+export interface RequirementAndCapabilities {
+    capabilities: CapabilitiesGroup;
+    requirements: RequirementsGroup;
+}
+
+@Injectable()
+export class CompositionGraphGeneralUtils {
+
+    public componentRequirementsAndCapabilitiesCaching = new Dictionary<string, RequirementAndCapabilities>();
+
+    constructor(private commonGraphUtils: CommonGraphUtils,
+                private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils,
+                private queueServiceUtils: QueueServiceUtils,
+                private componentService: ComponentServiceNg2,
+                private topologyTemplateService: TopologyTemplateService,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService) {
+    }
+
+    /**
+     * 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;
+    };
+
+    public zoomGraphTo = (cy: Cy.Instance, zoomLevel: number): void => {
+        let zy = cy.height() / 2;
+        let zx = cy.width() / 2;
+        cy.zoom({
+            level: zoomLevel,
+            renderedPosition: {x: zx, y: zy}
+        });
+    }
+
+    //saves the current zoom, and then sets a temporary maximum zoom for zoomAll, and then reverts to old value
+    public zoomAllWithMax = (cy: Cy.Instance, maxZoom: number): void => {
+
+        let oldMaxZoom: number = cy.maxZoom();
+
+        cy.maxZoom(maxZoom);
+        this.zoomAll(cy);
+        cy.maxZoom(oldMaxZoom);
+
+    };
+
+    //Zooms to fit all of the nodes in the collection passed in. If no nodes are passed in, will zoom to fit all nodes on graph
+    public zoomAll = (cy: Cy.Instance, nodes?: Cy.CollectionNodes): void => {
+
+        if (!nodes || !nodes.length) {
+            nodes = cy.nodes();
+        }
+
+        cy.resize();
+        cy.animate({
+            fit: {eles: nodes, padding: 20},
+            center: {eles: nodes}
+        }, {duration: 400});
+    };
+
+    /**
+     * 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 topologyTemplate instance can be hosted on the UCPE instance
+     * @param cy - Cytoscape instance
+     * @param fromUcpeInstance
+     * @param toComponentInstance
+     * @returns {Match}
+     */
+    public canBeHostedOn(cy: Cy.Instance, fromUcpeInstance: ComponentInstance, toComponentInstance: ComponentInstance): Match {
+
+        let matches: Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
+        let hostedOnMatch: Match = _.find(matches, (match: Match) => {
+            return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container';
+        });
+
+        return 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: Match = 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) {
+
+        let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode: Cy.CollectionFirstNode) => {
+            if (this.isBBoxOverlapping(pseudoNodeBBox, graphNode.renderedBoundingBox())) {
+                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();
+        });
+    };
+
+    /**
+     *
+     * @param blockAction - true/false if this is a block action
+     * @param instances
+     * @param component
+     */
+    public pushMultipleUpdateComponentInstancesRequestToQueue = (instances: Array<ComponentInstance>): void => {
+        this.queueServiceUtils.addNonBlockingUIAction(() => {
+            return new Promise<boolean>((resolve, reject) => {
+                let uniqueId = this.workspaceService.metadata.uniqueId;
+                let topologyType = this.workspaceService.metadata.componentType;
+                this.topologyTemplateService.updateMultipleComponentInstances(uniqueId, topologyType, instances).subscribe(instancesResult => {
+                    this.compositionService.updateComponentInstances(instancesResult);
+                    resolve(true);
+                });
+            });
+        });
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-links-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-links-utils.ts
new file mode 100644
index 0000000000..6035d05b7f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-links-utils.ts
@@ -0,0 +1,342 @@
+/*-
+ * ============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=========================================================
+ */
+
+/**
+ * Created by obarda on 6/28/2016.
+ */
+import * as _ from "lodash";
+import {GraphUIObjects} from "app/utils";
+import {
+    Match,
+    CompositionCiNodeBase,
+    RelationshipModel,
+    ConnectRelationModel,
+    LinksFactory,
+    Component,
+    LinkMenu,
+    Point,
+    CompositionCiLinkBase,
+    Requirement,
+    Capability,
+    Relationship,
+    ComponentInstance
+} from "app/models";
+import {CommonGraphUtils} from "../common/common-graph-utils";
+import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
+import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
+import {CompositionCiServicePathLink} from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
+import {Injectable} from "@angular/core";
+import {QueueServiceUtils} from "app/ng2/utils/queue-service-utils";
+import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service";
+import {SdcUiServices} from "onap-ui-angular";
+import {CompositionService} from "../../composition.service";
+import {WorkspaceService} from "app/ng2/pages/workspace/workspace.service";
+
+@Injectable()
+export class CompositionGraphLinkUtils {
+
+    constructor(private linksFactory: LinksFactory,
+                private generalGraphUtils: CompositionGraphGeneralUtils,
+                private commonGraphUtils: CommonGraphUtils,
+                private queueServiceUtils: QueueServiceUtils,
+                private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils,
+                private topologyTemplateService: TopologyTemplateService,
+                private loaderService: SdcUiServices.LoaderService,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService) {
+
+
+    }
+
+    /**
+     * 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.activate();
+        this.queueServiceUtils.addBlockingUIAction(() => {
+            this.topologyTemplateService.deleteRelation(this.workspaceService.metadata.uniqueId, this.workspaceService.metadata.componentType, link.data().relation).subscribe((deletedRelation) => {
+                this.compositionService.deleteRelation(deletedRelation);
+                cy.remove(link);
+                this.loaderService.deactivate();
+            }, (error) => {this.loaderService.deactivate()});
+        });
+    };
+
+    /**
+     * 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): void => {
+
+        this.loaderService.activate();
+        link.updateLinkDirection();
+
+        this.queueServiceUtils.addBlockingUIAction(() => {
+            this.topologyTemplateService.createRelation(this.workspaceService.metadata.uniqueId, this.workspaceService.metadata.componentType, link.relation).subscribe((relation) => {
+                link.setRelation(relation);
+                this.insertLinkToGraph(cy, link);
+                this.compositionService.addRelation(relation);
+                this.loaderService.deactivate();
+            }, (error) => {this.loaderService.deactivate()})
+        });
+    };
+
+    private createSimpleLink = (match: Match, cy: Cy.Instance): void => {
+        let newRelation: RelationshipModel = match.matchToRelationModel();
+        let linkObg: CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]);
+        this.createLink(linkObg, cy);
+    };
+
+    public createLinkFromMenu = (cy: Cy.Instance, chosenMatch: Match): void => {
+
+        if (chosenMatch) {
+            if (chosenMatch && chosenMatch instanceof Match) {
+                this.createSimpleLink(chosenMatch, cy);
+            }
+        }
+    }
+
+    /**
+     * 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): ConnectRelationModel {
+
+        let linkModel: Array<CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy);
+
+        let possibleRelations: Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance,
+            toNode.data().componentInstance, linkModel);
+
+        //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 ConnectRelationModel(fromNode.data(), toNode.data(), possibleRelations);
+        }
+        return null;
+    };
+
+    private handlePathLink(cy: Cy.Instance, event: Cy.EventObject) {
+        let linkData = event.cyTarget.data();
+        let selectedPathId = linkData.pathId;
+        let pathEdges = cy.collection(`[pathId='${selectedPathId}']`);
+        if (pathEdges.length > 1) {
+            setTimeout(() => {
+                pathEdges.select();
+            }, 0);
+        }
+    }
+
+    private handleVLLink(event: Cy.EventObject) {
+        let vl: Cy.CollectionNodes = event.cyTarget[0].target('.vl-node');
+        let connectedEdges: Cy.CollectionEdges = vl.connectedEdges(`[type!="${CompositionCiServicePathLink.LINK_TYPE}"]`);
+        if (vl.length && connectedEdges.length > 1) {
+            setTimeout(() => {
+                vl.select();
+                connectedEdges.select();
+            }, 0);
+        }
+    }
+
+
+    /**
+     * Handles click event on links.
+     * If one edge selected: do nothing.
+     * Two or more edges: first click - select all, secondary click - select single.
+     * @param cy
+     * @param event
+     */
+    public handleLinkClick(cy: Cy.Instance, event: Cy.EventObject) {
+        if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) {
+            cy.$(':selected').unselect();
+        } else {
+            if (event.cyTarget[0].data().type === CompositionCiServicePathLink.LINK_TYPE) {
+                this.handlePathLink(cy, event);
+            }
+            else {
+                this.handleVLLink(event);
+            }
+        }
+    }
+
+
+    /**
+     * 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.clientX, event.originalEvent.clientY);
+        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;
+    };
+
+    /**
+     * Returns relation source and target nodes.
+     * @param nodes - all nodes in graph in order to find the edge connecting the two nodes
+     * @param fromNodeId
+     * @param toNodeId
+     * @returns [source, target] array of source node and target node.
+     */
+    public getRelationNodes(nodes: Cy.CollectionNodes, fromNodeId: string, toNodeId: string) {
+        return [
+            _.find(nodes, (node: Cy.CollectionFirst) => node.data().id === fromNodeId),
+            _.find(nodes, (node: Cy.CollectionFirst) => node.data().id === toNodeId)
+        ];
+    }
+
+
+    /**
+     *  go over the relations and draw links on the graph
+     * @param cy
+     * @param getRelationRequirementCapability - function to get requirement and capability of a relation
+     */
+    public initGraphLinks(cy: Cy.Instance, relations: RelationshipModel[]) {
+        if (relations) {
+            _.forEach(relations, (relationshipModel: RelationshipModel) => {
+                _.forEach(relationshipModel.relationships, (relationship: Relationship) => {
+                    let linkToCreate = this.linksFactory.createGraphLink(cy, relationshipModel, relationship);
+                    this.insertLinkToGraph(cy, linkToCreate);
+                });
+            });
+        }
+    }
+
+    /**
+     * Add link to graph - only draw the link
+     * @param cy
+     * @param link
+     * @param getRelationRequirementCapability
+     */
+    public insertLinkToGraph = (cy: Cy.Instance, link: CompositionCiLinkBase) => {
+        const relationNodes = this.getRelationNodes(cy.nodes(), link.source, link.target);
+        const sourceNode: CompositionCiNodeBase = relationNodes[0] && relationNodes[0].data();
+        const targetNode: CompositionCiNodeBase = relationNodes[1] && relationNodes[1].data();
+        if ((sourceNode && !sourceNode.certified) || (targetNode && !targetNode.certified)) {
+            link.classes = 'not-certified-link';
+        }
+        let linkElement = cy.add({
+            group: 'edges',
+            data: link,
+            classes: link.classes
+        });
+
+        const getLinkRequirementCapability = () =>
+            this.getRelationRequirementCapability(link.relation.relationships[0], sourceNode.componentInstance, targetNode.componentInstance);
+        this.commonGraphUtils.initLinkTooltip(linkElement, link.relation.relationships[0], getLinkRequirementCapability);
+    };
+
+    public syncComponentByRelation(relation: RelationshipModel) {
+        let componentInstances = this.compositionService.getComponentInstances();
+        relation.relationships.forEach((rel) => {
+            if (rel.capability) {
+                const toComponentInstance: ComponentInstance = componentInstances.find((inst) => inst.uniqueId === relation.toNode);
+                const toComponentInstanceCapability: Capability = toComponentInstance.findCapability(
+                    rel.capability.type, rel.capability.uniqueId, rel.capability.ownerId, rel.capability.name);
+                const isCapabilityFulfilled: boolean = rel.capability.isFulfilled();
+                if (isCapabilityFulfilled && toComponentInstanceCapability) {
+                    // if capability is fulfilled and in component, then remove it
+                    console.log('Capability is fulfilled', rel.capability.getFullTitle(), rel.capability.leftOccurrences);
+                    toComponentInstance.capabilities[rel.capability.type].splice(
+                        toComponentInstance.capabilities[rel.capability.type].findIndex((cap) => cap === toComponentInstanceCapability), 1
+                    )
+                } else if (!isCapabilityFulfilled && !toComponentInstanceCapability) {
+                    // if capability is unfulfilled and not in component, then add it
+                    console.log('Capability is unfulfilled', rel.capability.getFullTitle(), rel.capability.leftOccurrences);
+                    toComponentInstance.capabilities[rel.capability.type].push(rel.capability);
+                }
+            }
+            if (rel.requirement) {
+                const fromComponentInstance: ComponentInstance = componentInstances.find((inst) => inst.uniqueId === relation.fromNode);
+                const fromComponentInstanceRequirement: Requirement = fromComponentInstance.findRequirement(
+                    rel.requirement.capability, rel.requirement.uniqueId, rel.requirement.ownerId, rel.requirement.name);
+                const isRequirementFulfilled: boolean = rel.requirement.isFulfilled();
+                if (isRequirementFulfilled && fromComponentInstanceRequirement) {
+                    // if requirement is fulfilled and in component, then remove it
+                    console.log('Requirement is fulfilled', rel.requirement.getFullTitle(), rel.requirement.leftOccurrences);
+                    fromComponentInstance.requirements[rel.requirement.capability].splice(
+                        fromComponentInstance.requirements[rel.requirement.capability].findIndex((req) => req === fromComponentInstanceRequirement), 1
+                    )
+                } else if (!isRequirementFulfilled && !fromComponentInstanceRequirement) {
+                    // if requirement is unfulfilled and not in component, then add it
+                    console.log('Requirement is unfulfilled', rel.requirement.getFullTitle(), rel.requirement.leftOccurrences);
+                    fromComponentInstance.requirements[rel.requirement.capability].push(rel.requirement);
+                }
+            }
+        });
+    }
+
+    public getRelationRequirementCapability(relationship: Relationship, sourceNode: ComponentInstance, targetNode: ComponentInstance): Promise<{ requirement: Requirement, capability: Capability }> {
+        // try find the requirement and capability in the source and target component instances:
+        let capability: Capability = targetNode.findCapability(undefined,
+            relationship.relation.capabilityUid,
+            relationship.relation.capabilityOwnerId,
+            relationship.relation.capability);
+        let requirement: Requirement = sourceNode.findRequirement(undefined,
+            relationship.relation.requirementUid,
+            relationship.relation.requirementOwnerId,
+            relationship.relation.requirement);
+
+        return new Promise<{ requirement: Requirement, capability: Capability }>((resolve, reject) => {
+            if (capability && requirement) {
+                resolve({capability, requirement});
+            }
+            else {
+                // if requirement and/or capability is missing, then fetch the full relation with its requirement and capability:
+                this.topologyTemplateService.fetchRelation(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, relationship.relation.id).subscribe((fetchedRelation) => {
+                    this.syncComponentByRelation(fetchedRelation);
+                    resolve({
+                        capability: capability || fetchedRelation.relationships[0].capability,
+                        requirement: requirement || fetchedRelation.relationships[0].requirement
+                    });
+                }, reject);
+            }
+        });
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-nodes-utils.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-nodes-utils.spec.ts
new file mode 100644
index 0000000000..9dcc47f7cc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-nodes-utils.spec.ts
@@ -0,0 +1,158 @@
+import { TestBed } from '@angular/core/testing';
+import { SdcUiServices } from 'onap-ui-angular';
+import { Observable } from 'rxjs/Rx';
+import CollectionNodes = Cy.CollectionNodes;
+import { Mock } from 'ts-mockery';
+import { ComponentInstance } from '../../../../../models';
+import { ComponentMetadata } from '../../../../../models/component-metadata';
+import { Resource } from '../../../../../models/components/resource';
+import { CompositionCiNodeCp } from '../../../../../models/graph/nodes/composition-graph-nodes/composition-ci-node-cp';
+import { CompositionCiNodeVl } from '../../../../../models/graph/nodes/composition-graph-nodes/composition-ci-node-vl';
+import { EventListenerService } from '../../../../../services';
+import CollectionEdges = Cy.CollectionEdges;
+import { GRAPH_EVENTS } from '../../../../../utils/constants';
+import { ServiceServiceNg2 } from '../../../../services/component-services/service.service';
+import { TopologyTemplateService } from '../../../../services/component-services/topology-template.service';
+import { ComponentGenericResponse } from '../../../../services/responses/component-generic-response';
+import { QueueServiceUtils } from '../../../../utils/queue-service-utils';
+import { WorkspaceService } from '../../../workspace/workspace.service';
+import { CompositionService } from '../../composition.service';
+import { CommonGraphUtils } from '../common/common-graph-utils';
+import { CompositionGraphGeneralUtils } from './composition-graph-general-utils';
+import { CompositionGraphNodesUtils } from './composition-graph-nodes-utils';
+
+describe('composition graph nodes utils', () => {
+
+    const CP_TO_DELETE_ID = 'cp1';
+    const VL_TO_DELETE_ID = 'vl';
+    const CP2_ID = 'cp2';
+
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+    let service: CompositionGraphNodesUtils;
+    let topologyServiceMock: TopologyTemplateService;
+    let queueServiceMock: QueueServiceUtils;
+    let workspaceServiceMock: WorkspaceService;
+    let compositionServiceMock: CompositionService;
+    let eventListenerServiceMock: EventListenerService;
+    const cpInstanceMock: ComponentInstance = Mock.of<ComponentInstance>({
+        uniqueId: CP_TO_DELETE_ID,
+        isVl: () => false
+    });
+    const vlInstanceMock: ComponentInstance = Mock.of<ComponentInstance>({
+        uniqueId: VL_TO_DELETE_ID,
+        isVl: () => true
+    });
+    const cp2InstanceMock: ComponentInstance = Mock.of<ComponentInstance>({
+        uniqueId: CP2_ID,
+        isVl: () => false
+    });
+
+    const cyMock = Mock.of<Cy.Instance>({
+        remove: jest.fn(),
+        collection: jest.fn()
+    });
+
+    const serviceServiceMock = Mock.of<ServiceServiceNg2>({
+        getComponentCompositionData : () => Observable.of(Mock.of<ComponentGenericResponse>())
+    });
+
+    // Instances on the graph cp, vl, cp2
+    const cp = Mock.from<CompositionCiNodeCp>({ id: CP_TO_DELETE_ID, componentInstance: cpInstanceMock });
+    const vl = Mock.from<CompositionCiNodeVl>({ id: VL_TO_DELETE_ID, componentInstance: vlInstanceMock });
+    const cp2 = Mock.from<CompositionCiNodeCp>({ id: CP2_ID, componentInstance: cp2InstanceMock });
+
+    beforeEach(() => {
+
+        loaderServiceMock = {
+            activate: jest.fn(),
+            deactivate: jest.fn()
+        };
+
+        topologyServiceMock = Mock.of<TopologyTemplateService>({
+            deleteComponentInstance : () => Observable.of(cpInstanceMock)
+        });
+
+        queueServiceMock = Mock.of<QueueServiceUtils>({
+            addBlockingUIAction : ( (f) => f() )
+        });
+
+        workspaceServiceMock = Mock.of<WorkspaceService>({
+            metadata: Mock.of<ComponentMetadata>( { uniqueId: 'topologyTemplateUniqueId' } )
+        });
+
+        compositionServiceMock = Mock.of<CompositionService>({
+            deleteComponentInstance : jest.fn()
+        });
+
+        eventListenerServiceMock = Mock.of<EventListenerService>({
+            notifyObservers : jest.fn()
+        });
+
+        TestBed.configureTestingModule({
+            imports: [],
+            providers: [
+                CompositionGraphNodesUtils,
+                {provide: WorkspaceService, useValue: workspaceServiceMock},
+                {provide: TopologyTemplateService, useValue: topologyServiceMock},
+                {provide: CompositionService, useValue: compositionServiceMock},
+                {provide: CompositionGraphGeneralUtils, useValue: {}},
+                {provide: CommonGraphUtils, useValue: {}},
+                {provide: EventListenerService, useValue: eventListenerServiceMock},
+                {provide: QueueServiceUtils, useValue: queueServiceMock},
+                {provide: ServiceServiceNg2, useValue: serviceServiceMock},
+                {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock}
+            ]
+        });
+        service = TestBed.get(CompositionGraphNodesUtils);
+    });
+
+    it('When a CP is deleted which is connected to a VL that has another leg to another CP, the VL is deleted as well', () => {
+        // Prepare a VL that is connected to both CP and CP2
+        const vlToDelete = Mock.of<CollectionNodes>({
+            data:  () => vl,
+            connectedEdges: () => Mock.of<CollectionEdges>({
+                length: 2,
+                connectedNodes: () => [cp, cp2] as CollectionNodes
+            })
+        });
+
+        // Prepare a CP which is connected to a VL
+        const cpToDelete = Mock.of<CollectionNodes>({
+            data:  () => cp,
+            connectedEdges: () => Mock.of<CollectionEdges>({
+                length: 1,
+                connectedNodes: () => [vlToDelete] as CollectionNodes
+            })
+        });
+        service.deleteNode(cyMock, Mock.of<Resource>(), cpToDelete);
+        expect(compositionServiceMock.deleteComponentInstance).toHaveBeenCalledWith(CP_TO_DELETE_ID);
+        expect(eventListenerServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, VL_TO_DELETE_ID);
+        expect(eventListenerServiceMock.notifyObservers).toHaveBeenLastCalledWith(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, CP_TO_DELETE_ID);
+        expect(cyMock.remove).toHaveBeenCalled();
+    });
+
+    it('When a CP is deleted which is solely connected to another VL the VL is not deleted', () => {
+        // Prepare a VL that is connected only to 1 CP
+        const vlToDelete = Mock.of<CollectionNodes>({
+            data:  () => vl,
+            connectedEdges: () => Mock.of<CollectionEdges>({
+                length: 1,
+                connectedNodes: () => [cp] as CollectionNodes
+            })
+        });
+
+        // Prepare a CP which is connected to a VL
+        const cpToDelete = Mock.of<CollectionNodes>({
+            data:  () => cp,
+            connectedEdges: () => Mock.of<CollectionEdges>({
+                length: 1,
+                connectedNodes: () => [vlToDelete] as CollectionNodes
+            })
+        });
+        service.deleteNode(cyMock, Mock.of<Resource>(), cpToDelete);
+        expect(compositionServiceMock.deleteComponentInstance).toHaveBeenCalledWith(CP_TO_DELETE_ID);
+        expect(eventListenerServiceMock.notifyObservers).toHaveBeenLastCalledWith(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, CP_TO_DELETE_ID);
+        expect(eventListenerServiceMock.notifyObservers).toHaveBeenCalledTimes(1);
+        expect(cyMock.remove).toHaveBeenCalled();
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-nodes-utils.ts
new file mode 100644
index 0000000000..ea876c6d1a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-nodes-utils.ts
@@ -0,0 +1,202 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Injectable } from '@angular/core';
+import { Component as TopologyTemplate } from 'app/models';
+import {
+    ComponentInstance,
+    CompositionCiNodeVl, Service
+} from 'app/models';
+import { CompositionCiServicePathLink } from 'app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link';
+import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
+import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
+import { TopologyTemplateService } from 'app/ng2/services/component-services/topology-template.service';
+import { ServiceGenericResponse } from 'app/ng2/services/responses/service-generic-response';
+import { QueueServiceUtils } from 'app/ng2/utils/queue-service-utils';
+import { EventListenerService } from 'app/services';
+import { GRAPH_EVENTS } from 'app/utils';
+import * as _ from 'lodash';
+import { SdcUiServices } from 'onap-ui-angular';
+import { CompositionService } from '../../composition.service';
+import { CommonGraphUtils } from '../common/common-graph-utils';
+import { CompositionGraphGeneralUtils } from './composition-graph-general-utils';
+
+/**
+ * Created by obarda on 11/9/2016.
+ */
+@Injectable()
+export class CompositionGraphNodesUtils {
+    constructor(private generalGraphUtils: CompositionGraphGeneralUtils,
+                private commonGraphUtils: CommonGraphUtils,
+                private eventListenerService: EventListenerService,
+                private queueServiceUtils: QueueServiceUtils,
+                private serviceService: ServiceServiceNg2,
+                private loaderService: SdcUiServices.LoaderService,
+                private compositionService: CompositionService,
+                private topologyTemplateService: TopologyTemplateService,
+                private workspaceService: WorkspaceService) {
+    }
+
+    /**
+     * 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();
+        });
+    }
+
+    public highlightMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string) => {
+
+        cy.batch(() => {
+            cy.nodes("[name !@^= '" + nameToMatch + "']").style({'background-image-opacity': 0.4});
+            cy.nodes("[name @^= '" + nameToMatch + "']").style({'background-image-opacity': 1});
+        });
+
+    }
+
+    // Returns all nodes whose name starts with searchTerm
+    public getMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string): Cy.CollectionNodes => {
+        return cy.nodes("[name @^= '" + nameToMatch + "']");
+    }
+
+    /**
+     * 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: TopologyTemplate, nodeToDelete: Cy.CollectionNodes): void {
+
+        this.loaderService.activate();
+        const onSuccess: (response: ComponentInstance) => void = (response: ComponentInstance) => {
+            // check whether the node is connected to any VLs that only have one other connection. If so, delete that VL as well
+            this.loaderService.deactivate();
+            this.compositionService.deleteComponentInstance(response.uniqueId);
+
+            const nodeToDeleteIsNotVl = nodeToDelete.data().componentInstance && !(nodeToDelete.data().componentInstance.isVl());
+            if (nodeToDeleteIsNotVl) {
+                const connectedVls: Cy.CollectionFirstNode[] = this.getConnectedVlToNode(nodeToDelete);
+                this.handleConnectedVlsToDelete(connectedVls);
+            }
+
+            // check whether there is a service path going through this node, and if so clean it from the graph.
+            const nodeId = nodeToDelete.data().id;
+            const connectedPathLinks = cy.collection(`[type="${CompositionCiServicePathLink.LINK_TYPE}"][source="${nodeId}"], [type="${CompositionCiServicePathLink.LINK_TYPE}"][target="${nodeId}"]`);
+            _.forEach(connectedPathLinks, (link, key) => {
+                cy.remove(`[pathId="${link.data().pathId}"]`);
+            });
+
+            // update service path list
+            this.serviceService.getComponentCompositionData(component).subscribe((serviceResponse: ServiceGenericResponse) => {
+                (component as Service).forwardingPaths = serviceResponse.forwardingPaths;
+            });
+
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, nodeId);
+
+            // update UI
+            cy.remove(nodeToDelete);
+        };
+
+        const onFailed: (response: any) => void = (response: any) => {
+            this.loaderService.deactivate();
+        };
+
+        this.queueServiceUtils.addBlockingUIAction(
+            () => {
+                const uniqueId = this.workspaceService.metadata.uniqueId;
+                const componentType = this.workspaceService.metadata.componentType;
+                this.topologyTemplateService.deleteComponentInstance(componentType, uniqueId, nodeToDelete.data().componentInstance.uniqueId).subscribe(onSuccess, onFailed);
+            }
+        );
+    }
+
+    /**
+     * Finds all VLs connected to a single node
+     * @param node
+     * @returns {Array<Cy.CollectionFirstNode>}
+     */
+    public getConnectedVlToNode = (node: Cy.CollectionNodes): Cy.CollectionFirstNode[] => {
+        const connectedVls: Cy.CollectionFirstNode[] = new Array<Cy.CollectionFirstNode>();
+        _.forEach(node.connectedEdges().connectedNodes(), (connectedNode: Cy.CollectionFirstNode) => {
+            const connectedNodeIsVl = connectedNode.data().componentInstance.isVl();
+            if (connectedNodeIsVl) {
+                connectedVls.push(connectedNode);
+            }
+        });
+        return connectedVls;
+    }
+
+    /**
+     * Delete all VLs that have only two connected nodes (this function is called when deleting a node)
+     * @param connectedVls
+     */
+    public handleConnectedVlsToDelete = (connectedVls: 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.uniqueId);
+            }
+        });
+    }
+
+    /**
+     * This function will update nodes position.
+     * @param cy
+     * @param component
+     * @param nodesMoved - the node/multiple nodes now moved by the user
+     */
+    public onNodesPositionChanged = (cy: Cy.Instance, component: TopologyTemplate, nodesMoved: Cy.CollectionNodes): void => {
+
+        if (nodesMoved.length === 0) {
+            return;
+        }
+
+        const isValidMove: boolean = this.generalGraphUtils.isGroupValidDrop(cy, nodesMoved);
+        if (isValidMove) {
+
+            const instancesToUpdate: ComponentInstance[] = new Array<ComponentInstance>();
+
+            _.each(nodesMoved, (node: Cy.CollectionFirstNode) => {  // update all nodes new position
+
+                // update position
+                const newPosition: Cy.Position = this.commonGraphUtils.getNodePosition(node);
+                node.data().componentInstance.updatePosition(newPosition.x, newPosition.y);
+                instancesToUpdate.push(node.data().componentInstance);
+
+            });
+
+            if (instancesToUpdate.length > 0) {
+                this.generalGraphUtils.pushMultipleUpdateComponentInstancesRequestToQueue(instancesToUpdate);
+            }
+        } else {
+            // reset nodes position
+            nodesMoved.positions((i, node) => {
+                return {
+                    x: +node.data().componentInstance.posX,
+                    y: +node.data().componentInstance.posY
+                };
+            });
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts
new file mode 100644
index 0000000000..1776c2f9b9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts
@@ -0,0 +1,233 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Injectable} from "@angular/core";
+import {CompositionGraphGeneralUtils, RequirementAndCapabilities} from "./composition-graph-general-utils";
+import {CommonGraphUtils} from "../common/common-graph-utils";
+import {EventListenerService} from "../../../../../services/event-listener-service";
+import {ResourceNamePipe} from "app/ng2/pipes/resource-name.pipe";
+import {ComponentInstanceFactory} from "app/utils/component-instance-factory";
+import {GRAPH_EVENTS, GraphUIObjects} from "app/utils/constants";
+import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service";
+import {DndDropEvent} from "ngx-drag-drop/ngx-drag-drop";
+import {SdcUiServices} from "onap-ui-angular"
+import { Component as TopologyTemplate, NodesFactory, CapabilitiesGroup, RequirementsGroup,
+     CompositionCiNodeBase, ComponentInstance, LeftPaletteComponent, Point } from "app/models";
+import {CompositionService} from "../../composition.service";
+import {WorkspaceService} from "app/ng2/pages/workspace/workspace.service";
+import { QueueServiceUtils } from "app/ng2/utils/queue-service-utils";
+import {ComponentGenericResponse} from "../../../../services/responses/component-generic-response";
+import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
+import {CompositionGraphNodesUtils} from "./index";
+
+@Injectable()
+export class CompositionGraphPaletteUtils {
+
+    constructor(private generalGraphUtils:CompositionGraphGeneralUtils,
+                private nodesFactory:NodesFactory,
+                private commonGraphUtils:CommonGraphUtils,
+                private queueServiceUtils:QueueServiceUtils,
+                private eventListenerService:EventListenerService,
+                private topologyTemplateService: TopologyTemplateService,
+                private loaderService: SdcUiServices.LoaderService,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService,
+                private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils,
+                private nodesGraphUtils: CompositionGraphNodesUtils) {
+    }
+
+    /**
+     *
+     * @param Calculate matching nodes, highlight the matching nodes and fade the non matching nodes
+     * @param leftPaletteComponent
+     * @param _cy
+     * @returns void
+     * @private
+     */
+
+    public onComponentHoverIn = (leftPaletteComponent: LeftPaletteComponent, _cy: Cy.Instance) => {
+        const nodesData = this.nodesGraphUtils.getAllNodesData(_cy.nodes());
+        const nodesLinks = this.generalGraphUtils.getAllCompositionCiLinks(_cy);
+
+        if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) {
+            const reqAndCap: RequirementAndCapabilities = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId);
+            const filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodesToComponentInstance(
+                { uniqueId: leftPaletteComponent.uniqueId, requirements: reqAndCap.requirements, capabilities: reqAndCap.capabilities} as ComponentInstance, nodesData, nodesLinks);
+
+            this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, _cy);
+            this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, _cy);
+        } else {
+
+            this.topologyTemplateService.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => {
+                let reqAndCap: RequirementAndCapabilities = {
+                    capabilities: response.capabilities,
+                    requirements: response.requirements
+                }
+                this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, reqAndCap);
+            });
+        }
+    }
+
+    /**
+     * 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:DragEvent, position?:Cy.Position, eventPosition?: Point) {
+        let bbox = <Cy.BoundingBox>{};
+        if (!position) {
+            position = event ? this.commonGraphUtils.getCytoscapeNodePosition(cy, event) : eventPosition;
+        }
+        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:DragEvent) {
+
+        let componentInstanceToCreate:ComponentInstance = 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.deactivate();
+        };
+
+        //on success - update node data
+        let onSuccessCreatingInstance = (createInstance:ComponentInstance):void => {
+
+            this.loaderService.deactivate();
+            this.compositionService.addComponentInstance(createInstance);
+            createInstance.name = ResourceNamePipe.getDisplayName(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);
+            this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode);
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE);
+        };
+
+        this.queueServiceUtils.addBlockingUIAction(() => {
+            let uniqueId = this.workspaceService.metadata.uniqueId;
+            let componentType = this.workspaceService.metadata.componentType;
+            this.topologyTemplateService.createComponentInstance(componentType, uniqueId, componentInstanceToCreate).subscribe(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) {
+    //     let draggedElement = document.getElementById("draggable_element");
+    //     // event.dataTransfer.setDragImage(draggableElement, 0, 0);
+    //     if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop
+    //         draggedElement.className = 'invalid-drag';
+    //         event.dataTransfer.setDragImage(draggedElement.cloneNode(true), 0, 0);
+    //         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)) {
+    //         draggedElement.className = 'valid-drag';
+    //         event.dataTransfer.setDragImage(draggedElement.cloneNode(true), 0, 0);
+    //         // event.dataTransfer.setDragImage(draggedElement, 0, 0);
+    //         // event.dataTransfer.setDragImage(draggedElement, 0, 0);
+    //
+    //     } else {
+    //         draggedElement.className = 'invalid-drag';
+    //         event.dataTransfer.setDragImage(draggedElement.cloneNode(true), 0, 0);
+    //     }
+    // }
+
+    public isDragValid(cy:Cy.Instance, position: Point):boolean {
+        if (position.x < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || position.y < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop
+            return false;
+        }
+        
+        let offsetPosition = {
+            x: position.x - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET,
+            y: position.y - GraphUIObjects.DIAGRAM_HEADER_OFFSET
+        };
+        let bbox = this._getNodeBBox(cy, null, offsetPosition, position);
+
+        if (this.generalGraphUtils.isPaletteDropValid(cy, bbox)) {
+            return true;
+        } else {
+            return false;
+        }
+    } 
+    /**
+     *  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 dragEvent
+     * @param component
+     */
+    public addNodeFromPalette(cy:Cy.Instance, dragEvent:DndDropEvent) {
+        this.loaderService.activate();
+
+        let draggedComponent:LeftPaletteComponent = dragEvent.data;
+
+        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, dragEvent.event);
+
+        } else {
+
+            this.topologyTemplateService.getFullComponent(draggedComponent.componentType, draggedComponent.uniqueId).subscribe((topologyTemplate:TopologyTemplate) => {
+                draggedComponent.capabilities = topologyTemplate.capabilities;
+                draggedComponent.requirements = topologyTemplate.requirements;
+                this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, dragEvent.event);
+            });
+        }
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-service-path-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-service-path-utils.ts
new file mode 100644
index 0000000000..bc124fe9d1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-service-path-utils.ts
@@ -0,0 +1,148 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import * as _ from "lodash";
+import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
+import {ServiceServiceNg2} from 'app/ng2/services/component-services/service.service';
+import {Service} from "app/models/components/service";
+import {ForwardingPath} from "app/models/forwarding-path";
+import {ForwardingPathLink} from "app/models/forwarding-path-link";
+import {ComponentRef, Injectable} from "@angular/core";
+import {CompositionCiServicePathLink} from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
+import {SdcUiServices} from "onap-ui-angular";
+import {QueueServiceUtils} from "app/ng2/utils/queue-service-utils";
+import {ServicePathsListComponent} from "app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component";
+import {ButtonModel, ModalModel} from "app/models";
+import {ServicePathCreatorComponent} from "app/ng2/pages/composition/graph/service-path-creator/service-path-creator.component";
+import {ModalService} from "app/ng2/services/modal.service";
+import {ModalComponent} from "app/ng2/components/ui/modal/modal.component";
+import {Select, Store} from "@ngxs/store";
+import {WorkspaceState} from "app/ng2/store/states/workspace.state";
+import {WorkspaceService} from "app/ng2/pages/workspace/workspace.service";
+import {CompositionService} from "../../composition.service";
+import {CommonGraphUtils} from "../common/common-graph-utils";
+import {GRAPH_EVENTS} from "app/utils/constants";
+import {EventListenerService} from "app/services/event-listener-service";
+
+@Injectable()
+export class ServicePathGraphUtils {
+
+    constructor(
+        private generalGraphUtils: CompositionGraphGeneralUtils,
+        private serviceService: ServiceServiceNg2,
+        private commonGraphUtils: CommonGraphUtils,
+        private loaderService: SdcUiServices.LoaderService,
+        private queueServiceUtils: QueueServiceUtils,
+        private modalService: ModalService,
+        private workspaceService: WorkspaceService,
+        private compositionService: CompositionService,
+        private store:Store,
+        private eventListenerService: EventListenerService
+    ) {
+    }
+
+    private isViewOnly = (): boolean => {
+        return this.store.selectSnapshot(state => state.workspace.isViewOnly);
+    }
+    private modalInstance: ComponentRef<ModalComponent>;
+
+    public deletePathsFromGraph(cy: Cy.Instance) {
+        cy.remove(`[type="${CompositionCiServicePathLink.LINK_TYPE}"]`);
+    }
+
+    public drawPath(cy: Cy.Instance, forwardingPath: ForwardingPath) {
+        let pathElements = forwardingPath.pathElements.listToscaDataDefinition;
+
+        _.forEach(pathElements, (link: ForwardingPathLink) => {
+            let data: CompositionCiServicePathLink = new CompositionCiServicePathLink(link);
+            data.source = _.find(
+                this.compositionService.componentInstances,
+                instance => instance.name === data.forwardingPathLink.fromNode
+            ).uniqueId;
+            data.target = _.find(
+                this.compositionService.componentInstances,
+                instance => instance.name === data.forwardingPathLink.toNode
+            ).uniqueId;
+            data.pathId = forwardingPath.uniqueId;
+            data.pathName = forwardingPath.name;
+            this.commonGraphUtils.insertServicePathLinkToGraph(cy, data);
+        });
+    }
+
+    public createOrUpdateServicePath = (path: any): void => {
+        this.loaderService.activate();
+
+        let onSuccess: (response: ForwardingPath) => void = (response: ForwardingPath) => {
+            this.loaderService.deactivate();
+            this.compositionService.forwardingPaths[response.uniqueId] = response;
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_SERVICE_PATH_CREATED, response.uniqueId)
+        };
+
+        this.queueServiceUtils.addBlockingUIAction(
+            () => this.serviceService.createOrUpdateServicePath(this.workspaceService.metadata.uniqueId, path).subscribe(onSuccess
+            , (error) => {this.loaderService.deactivate()})
+        );
+    };
+
+    public onCreateServicePath = (): void => {
+        // this.showServicePathMenu = false;
+        let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.modalService.closeCurrentModal);
+        let saveButton: ButtonModel = new ButtonModel('Create', 'blue', this.createPath, this.getDisabled);
+        let modalModel: ModalModel = new ModalModel('l', 'Create Service Flow', '', [saveButton, cancelButton], 'standard', true);
+        this.modalInstance = this.modalService.createCustomModal(modalModel);
+        this.modalService.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {serviceId: this.workspaceService.metadata.uniqueId});
+        this.modalInstance.instance.open();
+    };
+
+    public onListServicePath = (): void => {
+        // this.showServicePathMenu = false;
+        let cancelButton: ButtonModel = new ButtonModel('Close', 'outline white', this.modalService.closeCurrentModal);
+        let modalModel: ModalModel = new ModalModel('md', 'Service Flows List', '', [cancelButton], 'standard', true);
+        this.modalInstance = this.modalService.createCustomModal(modalModel);
+        this.modalService.addDynamicContentToModal(this.modalInstance, ServicePathsListComponent, {
+            serviceId: this.workspaceService.metadata.uniqueId,
+            onCreateServicePath: this.onCreateServicePath,
+            onEditServicePath: this.onEditServicePath,
+            isViewOnly: this.isViewOnly()
+        });
+        this.modalInstance.instance.open();
+    };
+
+    public onEditServicePath = (id: string): void => {
+        let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.modalService.closeCurrentModal);
+        let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createPath, this.getDisabled);
+        let modalModel: ModalModel = new ModalModel('l', 'Edit Path', '', [saveButton, cancelButton], 'standard', true);
+        this.modalInstance = this.modalService.createCustomModal(modalModel);
+        this.modalService.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {
+            serviceId: this.workspaceService.metadata.uniqueId,
+            pathId: id
+        });
+        this.modalInstance.instance.open();
+    };
+
+    public getDisabled = (): boolean => {
+        return this.isViewOnly() || !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
+    };
+
+    public createPath = (): void => {
+        this.createOrUpdateServicePath(this.modalInstance.instance.dynamicContent.instance.createServicePathData());
+        this.modalService.closeCurrentModal();
+    };
+}
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-zone-utils.ts
index cf6c7e3bd6..9e97ec0f00 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-zone-utils.ts
@@ -1,21 +1,32 @@
-import { PolicyInstance } from "app/models/graph/zones/policy-instance";
-import { ZoneInstance, ZoneInstanceType, ZoneInstanceAssignmentType } from "app/models/graph/zones/zone-instance";
-import { Zone } from "app/models/graph/zones/zone";
-import { DynamicComponentService } from "app/ng2/services/dynamic-component.service";
-import { PaletteAnimationComponent } from "app/ng2/components/ui/palette-animation/palette-animation.component";
-import { Point, LeftPaletteMetadataTypes, Component } from "../../../../models";
-import { CanvasHandleTypes } from "app/utils";
-import { PoliciesService } from "../../../../ng2/services/policies.service";
-import { Observable } from "rxjs";
-import { GroupsService } from "../../../../ng2/services/groups.service";
-import { GroupInstance } from "app/models/graph/zones/group-instance";
-
-
+import {
+    Point,
+    PolicyInstance,
+    Zone,
+    LeftPaletteMetadataTypes,
+    ZoneInstance,
+    ZoneInstanceType,
+    ZoneInstanceAssignmentType
+} from "app/models";
+import {CanvasHandleTypes} from "app/utils";
+import {Observable} from "rxjs";
+import {GroupInstance} from "app/models/graph/zones/group-instance";
+import {Injectable} from "@angular/core";
+import {DynamicComponentService} from "app/ng2/services/dynamic-component.service";
+import {PoliciesService} from "app/ng2/services/policies.service";
+import {GroupsService} from "app/ng2/services/groups.service";
+import {Store} from "@ngxs/store";
+import {CompositionService} from "../../composition.service";
+import {WorkspaceService} from "app/ng2/pages/workspace/workspace.service";
+import { PaletteAnimationComponent } from "app/ng2/pages/composition/palette/palette-animation/palette-animation.component";
+
+@Injectable()
 export class CompositionGraphZoneUtils {
 
     constructor(private dynamicComponentService: DynamicComponentService,
-        private policiesService: PoliciesService,
-        private groupsService: GroupsService) {
+                private policiesService: PoliciesService,
+                private groupsService: GroupsService,
+                private workspaceService: WorkspaceService,
+                private compositionService: CompositionService) {
     }
 
 
@@ -41,19 +52,22 @@ export class CompositionGraphZoneUtils {
         }
     };
 
-    public initZoneInstances(zones: Array<Zone>, component: Component) {
-        if (component.groupInstances && component.groupInstances.length) {
+    public initZoneInstances(zones: Array<Zone>) {
+
+        if (this.compositionService.groupInstances && this.compositionService.groupInstances.length) {
             this.showZone(zones[ZoneInstanceType.GROUP]);
-            _.forEach(component.groupInstances, (group: GroupInstance) => {
-                let newInstance = new ZoneInstance(group, component);
+            zones[ZoneInstanceType.GROUP].instances = [];
+            _.forEach(this.compositionService.groupInstances, (group: GroupInstance) => {
+                let newInstance = new ZoneInstance(group, this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId);
                 this.addInstanceToZone(zones[ZoneInstanceType.GROUP], newInstance);
             });
         }
 
-        if (component.policies && component.policies.length) {
+        if (this.compositionService.policies && this.compositionService.policies.length) {
             this.showZone(zones[ZoneInstanceType.POLICY]);
-            _.forEach(component.policies, (policy: PolicyInstance) => {
-                let newInstance = new ZoneInstance(policy, component);
+            zones[ZoneInstanceType.POLICY].instances = [];
+            _.forEach(this.compositionService.policies, (policy: PolicyInstance) => {
+                let newInstance = new ZoneInstance(policy, this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId);
                 this.addInstanceToZone(zones[ZoneInstanceType.POLICY], newInstance);
 
             });
@@ -82,18 +96,19 @@ export class CompositionGraphZoneUtils {
         });
     };
 
-    public createZoneInstanceFromLeftPalette = (zoneType: ZoneInstanceType, component: Component, paletteComponentType: string): Observable<ZoneInstance> => {
+    public createZoneInstanceFromLeftPalette = (zoneType: ZoneInstanceType, paletteComponentType: string): Observable<ZoneInstance> => {
+
         if (zoneType === ZoneInstanceType.POLICY) {
-            return this.policiesService.createPolicyInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => {
+            return this.policiesService.createPolicyInstance(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, paletteComponentType).map(response => {
                 let newInstance = new PolicyInstance(response);
-                component.policies.push(newInstance);
-                return new ZoneInstance(newInstance, component);
+                this.compositionService.addPolicyInstance(newInstance);
+                return new ZoneInstance(newInstance, this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId);
             });
         } else if (zoneType === ZoneInstanceType.GROUP) {
-            return this.groupsService.createGroupInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => {
+            return this.groupsService.createGroupInstance(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, paletteComponentType).map(response => {
                 let newInstance = new GroupInstance(response);
-                component.groupInstances.push(newInstance);
-                return new ZoneInstance(newInstance, component);
+                this.compositionService.addGroupInstance(newInstance);
+                return new ZoneInstance(newInstance, this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId);
             });
         }
     }
@@ -187,9 +202,3 @@ export class CompositionGraphZoneUtils {
         }
     };
 }
-
-CompositionGraphZoneUtils.$inject = [
-    'DynamicComponentService',
-    'PoliciesServiceNg2',
-    'GroupsServiceNg2'
-];
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/index.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/index.ts
new file mode 100644
index 0000000000..e7f11af248
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/index.ts
@@ -0,0 +1,29 @@
+/**
+ * Created by ob0695 on 6/3/2018.
+ */
+// export * from './composition-graph-general-utils';
+// export * from './composition-graph-links-utils';
+// export * from './composition-graph-nodes-utils';
+// export * from './composition-graph-palette-utils';
+// export * from './composition-graph-service-path-utils';
+// export * from './composition-graph-zone-utils';
+
+
+import {CompositionGraphGeneralUtils} from './composition-graph-general-utils';
+import {CompositionGraphNodesUtils} from './composition-graph-nodes-utils';
+import {MatchCapabilitiesRequirementsUtils} from './match-capability-requierment-utils'
+import {CompositionGraphPaletteUtils} from './composition-graph-palette-utils';
+import {CompositionGraphZoneUtils} from './composition-graph-zone-utils';
+import {ServicePathGraphUtils} from './composition-graph-service-path-utils';
+import {CompositionGraphLinkUtils} from "./composition-graph-links-utils";
+
+
+export {
+    CompositionGraphGeneralUtils,
+    CompositionGraphLinkUtils,
+    CompositionGraphNodesUtils,
+    MatchCapabilitiesRequirementsUtils,
+    CompositionGraphPaletteUtils,
+    CompositionGraphZoneUtils,
+    ServicePathGraphUtils
+};
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/match-capability-requierment-utils.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/match-capability-requierment-utils.spec.ts
new file mode 100644
index 0000000000..dbfc3e7219
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/match-capability-requierment-utils.spec.ts
@@ -0,0 +1,342 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Mock } from 'ts-mockery';
+import {
+    CapabilitiesGroup,
+    Capability, ComponentInstance, CompositionCiLinkBase, CompositionCiNodeBase, CompositionCiNodeCp,
+    CompositionCiNodeVf, CompositionCiNodeVl,
+    Requirement, RequirementsGroup
+} from '../../../../../models';
+import { MatchCapabilitiesRequirementsUtils } from './match-capability-requierment-utils';
+
+describe('match capability requirements utils service ', () => {
+
+    const bindableReq = Mock.of<Requirement>({
+        capability : 'tosca.capabilities.network.Bindable',
+        name: 'virtualBinding',
+        relationship: 'tosca.relationships.network.BindsTo',
+        uniqueId: 'eef99154-8039-4227-ba68-62a32e6b0d98.virtualBinding',
+        ownerId : 'extcp0',
+        ownerName : 's'
+    });
+
+    const virtualLinkReq = Mock.of<Requirement>({
+        capability: 'tosca.capabilities.network.Linkable',
+        name: 'virtualLink',
+        relationship: 'tosca.relationships.network.LinksTo',
+        uniqueId: 'eef99154-8039-4227-ba68-62a32e6b0d98.virtualLink',
+        ownerId : '',
+        ownerName : 's'
+    });
+
+    const storeAttachmentReq = Mock.of<Requirement>({
+        capability: 'tosca.capabilities.Attachment',
+        name: 'local_storage',
+        relationship: 'tosca.relationships.AttachesTo',
+        uniqueId: 'eef99154-8039-4227-ba68-62a32e6b0d98.local_storage',
+        node: 'tosca.nodes.BlockStorage',
+        ownerId : '',
+        ownerName : 's'
+    });
+
+    const vlAttachmentReq = Mock.of<Requirement>({
+        capability: 'tosca.capabilities.Attachment',
+        name: 'local_storage',
+        relationship: 'tosca.relationships.AttachesTo',
+        uniqueId: 'eef99154-8039-4227-ba68-62a32e6b0d98.local_storage',
+        node: 'tosca.nodes.BlockStorage',
+        ownerId : '',
+        ownerName : 's'
+    });
+
+    const extVirtualLinkReq = Mock.of<Requirement>({
+        capability: 'tosca.capabilities.network.Linkable',
+        name: 'external_virtualLink',
+        relationship: 'tosca.relationships.network.LinksTo',
+        uniqueId: 'eef99154-8039-4227-ba68-62a32e6b0d98.external_virtualLink'
+    });
+
+    const dependencyReq = Mock.of<Requirement>({
+        capability: 'tosca.capabilities.Node',
+        name: 'dependency',
+        relationship: 'tosca.relationships.DependsOn',
+        uniqueId: 'eef99154-8039-4227-ba68-62a32e6b0d98.dependency'
+    });
+
+    const featureCap = Mock.of<Capability>({
+        type: 'tosca.capabilities.Node',
+        name: 'feature',
+        uniqueId: 'capability.ddf1301e-866b-4fa3-bc4f-edbd81e532cd.feature',
+        maxOccurrences: 'UNBOUNDED',
+        minOccurrences: '1'
+    });
+
+    const internalConnPointCap = Mock.of<Capability>({
+        type: 'tosca.capabilities.Node',
+        name: 'internal_connectionPoint',
+        capabilitySources : ['org.openecomp.resource.cp.extCP'],
+        uniqueId: 'capability.ddf1301e-866b-4fa3-bc4f-edbd81e532cd.internal_connectionPoint',
+        maxOccurrences: 'UNBOUNDED',
+        minOccurrences: '1'
+    });
+
+    const blockStoreAttachmentCap = Mock.of<Capability>({
+        type: 'tosca.capabilities.Attachment',
+        name: 'attachment',
+        capabilitySources: ['tosca.nodes.BlockStorage'],
+        uniqueId: 'capability.ddf1301e-866b-4fa3-bc4f-edbd81e532cd.attachment',
+        maxOccurrences: 'UNBOUNDED',
+        minOccurrences: '1'
+    });
+
+    const bindingCap = Mock.of<Capability>({
+        type: 'tosca.capabilities.network.Bindable',
+        name: 'binding',
+        capabilitySources: ['tosca.nodes.Compute'],
+        uniqueId: 'capability.ddf1301e-866b-4fa3-bc4f-edbd81e532cd.binding',
+        maxOccurrences: 'UNBOUNDED',
+        minOccurrences: '1',
+    });
+
+    const linkableCap = Mock.of<Capability>({
+        type: 'tosca.capabilities.network.Linkable',
+        capabilitySources: ['org.openecomp.resource.vl.extVL'],
+        uniqueId: 'capability.ddf1301e-866b-4fa3-bc4f-edbd81e532cd.virtual_linkable',
+        maxOccurrences: 'UNBOUNDED',
+        minOccurrences: '1'
+    });
+
+    const nodeCompute = Mock.of<CompositionCiNodeVf>({
+        name: 'Compute 0',
+        componentInstance: Mock.of<ComponentInstance>({
+            componentName: 'Compute',
+            uniqueId : 'compute0',
+            requirements: Mock.of<RequirementsGroup>({
+                'tosca.capabilities.Node' : [ dependencyReq ],
+                'tosca.capabilities.Attachment' : [ storeAttachmentReq ]
+            }),
+            capabilities: Mock.of<CapabilitiesGroup>({
+                'tosca.capabilities.network.Bindable' : [ bindingCap ],
+                'tosca.capabilities.Node' : [ featureCap ]
+            })
+        })
+    });
+
+    const nodeBlockStorage = Mock.of<CompositionCiNodeVf>({
+        name: 'BlockStorage 0',
+        componentInstance: Mock.of<ComponentInstance>({
+            componentName: 'BlockStorage',
+            uniqueId : 'blockstorage0',
+            requirements: Mock.of<RequirementsGroup>({
+                'tosca.capabilities.Node' : [ dependencyReq ]
+            }),
+            capabilities: Mock.of<CapabilitiesGroup>({
+                'tosca.capabilities.Attachment' : [ blockStoreAttachmentCap ],
+                'tosca.capabilities.Node' : [ featureCap ]
+            })
+        })
+    });
+
+    const nodeVl = Mock.of<CompositionCiNodeVl>({
+        name: 'ExtVL 0',
+        componentInstance: Mock.of<ComponentInstance>({
+            componentName: 'BlockStorage',
+            uniqueId : 'extvl0',
+            requirements: Mock.of<RequirementsGroup>({
+                'tosca.capabilities.Node' : [ dependencyReq ]
+            }),
+            capabilities: Mock.of<CapabilitiesGroup>({
+                'tosca.capabilities.network.Linkable' : [ linkableCap ],
+                'tosca.capabilities.Node' : [ featureCap ]
+            })
+        })
+    });
+
+    const nodeCp = Mock.of<CompositionCiNodeCp>({
+        name: 'ExtCP 0',
+        componentInstance: Mock.of<ComponentInstance>({
+            componentName: 'ExtCP',
+            uniqueId : 'extcp0',
+            requirements: Mock.of<RequirementsGroup>({
+                'tosca.capabilities.network.Linkable' : [ virtualLinkReq ],
+                'tosca.capabilities.network.Bindable' : [ bindableReq ]
+            }),
+            capabilities: Mock.of<CapabilitiesGroup>({
+                'tosca.capabilities.Node' : [ featureCap ]
+            })
+        })
+    });
+
+    let service: MatchCapabilitiesRequirementsUtils;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            providers: [MatchCapabilitiesRequirementsUtils]
+        });
+
+        service = TestBed.get(MatchCapabilitiesRequirementsUtils);
+    });
+
+    it('match capability requirements utils should be defined', () => {
+        console.log(JSON.stringify(service));
+        expect(service).toBeDefined();
+    });
+
+    describe('isMatch function ', () => {
+
+        it('capability type not equal to requirement capability, match is false', () => {
+            const requirement = Mock.of<Requirement>({capability: 'tosca.capabilities.network.Linkable11'});
+            const capability = Mock.of<Capability>({type: 'tosca.capabilities.network.Linkable'});
+            expect(service.isMatch(requirement, capability)).toBeFalsy();
+        });
+
+        it('capability type equal to requirement capability and requirement node not exist, match is true', () => {
+            const requirement = Mock.of<Requirement>({capability: 'tosca.capabilities.network.Linkable'});
+            const capability = Mock.of<Capability>({type: 'tosca.capabilities.network.Linkable'});
+            expect(service.isMatch(requirement, capability)).toBeTruthy();
+        });
+
+        it('is match - capability type equal to requirement capability and requirement node exist and includes in capability sources, match is true', () => {
+            const requirement = Mock.of<Requirement>({capability: 'tosca.capabilities.network.Linkable', node: 'node1'});
+            const capability = Mock.of<Capability>({
+                type: 'tosca.capabilities.network.Linkable',
+                capabilitySources: ['node1', 'node2', 'node3']
+            });
+            expect(service.isMatch(requirement, capability)).toBeTruthy();
+        });
+
+        it('no match - capability type equal to requirement capability and requirement node but not includes in capability sources, match is false', () => {
+            const requirement = Mock.of<Requirement>({capability: 'tosca.capabilities.network.Linkable', node: 'node4'});
+            const capability = Mock.of<Capability>({
+                type: 'tosca.capabilities.network.Linkable',
+                capabilitySources: ['node1', 'node2', 'node3']
+            });
+            expect(service.isMatch(requirement, capability)).toBeFalsy();
+        });
+    });
+
+    describe('hasUnfulfilledRequirementContainingMatch function ', () => {
+
+        it('node have no componentInstance, return false', () => {
+            const node = Mock.of<CompositionCiNodeVf>({componentInstance: undefined});
+            expect(service.hasUnfulfilledRequirementContainingMatch(node, [], {}, [])).toBeFalsy();
+        });
+
+        it('node have componentInstance data but no unfulfilled requirements, return false', () => {
+            const node = Mock.of<CompositionCiNodeVf>({componentInstance: Mock.of<ComponentInstance>()});
+            jest.spyOn(service, 'getUnfulfilledRequirements').mockReturnValue([]);
+            expect(service.hasUnfulfilledRequirementContainingMatch(node, [], {}, [])).toBeFalsy();
+        });
+
+        it('node have componentInstance data and unfulfilled requirements but no match found, return false', () => {
+            const node = Mock.of<CompositionCiNodeVf>({componentInstance: Mock.of<ComponentInstance>()});
+            jest.spyOn(service, 'getUnfulfilledRequirements').mockReturnValue([Mock.of<Requirement>(), Mock.of<Requirement>()]);
+            jest.spyOn(service, 'containsMatch').mockReturnValue(false);
+            expect(service.hasUnfulfilledRequirementContainingMatch(node, [], {}, [])).toBeFalsy();
+        });
+
+        it('node have componentInstance data with unfulfilled requirements and match found, return true', () => {
+            const node = Mock.of<CompositionCiNodeVf>({componentInstance: Mock.of<ComponentInstance>()});
+            jest.spyOn(service, 'getUnfulfilledRequirements').mockReturnValue([Mock.of<Requirement>(), Mock.of<Requirement>()]);
+            jest.spyOn(service, 'containsMatch').mockReturnValue(true);
+            expect(service.hasUnfulfilledRequirementContainingMatch(node, [], {}, [])).toBeTruthy();
+        });
+    });
+
+    describe('getMatches function ', () => {
+        let fromId: string;
+        let toId: string;
+
+        beforeEach(() => {
+            fromId = 'from_id';
+            toId = 'to_id';
+        });
+
+        it('node have no unfulfilled requirements, return empty match array', () => {
+            jest.spyOn(service, 'getUnfulfilledRequirements').mockReturnValue([]);
+            expect(service.getMatches({}, {}, [], fromId, toId, true)).toHaveLength(0);
+        });
+
+        it('node have unfulfilled requirements but no capabilities, return empty match array', () => {
+            jest.spyOn(service, 'getUnfulfilledRequirements').mockReturnValue([Mock.of<Requirement>(), Mock.of<Requirement>()]);
+            expect(service.getMatches({}, {}, [], fromId, toId, true)).toHaveLength(0);
+        });
+
+        it('node have unfulfilled requirements and capabilities but no match found, return empty match array', () => {
+            jest.spyOn(service, 'getUnfulfilledRequirements').mockReturnValue([Mock.of<Requirement>(), Mock.of<Requirement>()]);
+            jest.spyOn(service, 'isMatch').mockReturnValue(false);
+            expect(service.getMatches({}, {}, [], fromId, toId, true)).toHaveLength(0);
+        });
+
+        it('node have 2 unfulfilled requirements and 2 capabilities and match found, return 4 matches', () => {
+            jest.spyOn(service, 'getUnfulfilledRequirements').mockReturnValue([Mock.of<Requirement>(), Mock.of<Requirement>()]);
+            const capabilities = {aaa: Mock.of<Capability>(), bbb: Mock.of<Capability>()};
+            jest.spyOn(service, 'isMatch').mockReturnValue(true);
+            expect(service.getMatches({}, capabilities, [], fromId, toId, true)).toHaveLength(4);
+        });
+    });
+
+    describe('Find matching nodes ===>', () => {
+
+       it('should find matching nodes with component instance', () => {
+           const nodes = [ nodeBlockStorage, nodeCompute, nodeVl ];
+           let matchingNodes: any;
+
+           // Compute can connect to Block Store
+           matchingNodes = service.findMatchingNodesToComponentInstance(nodeCompute.componentInstance, nodes, []);
+           expect(matchingNodes).toHaveLength(1);
+           expect(matchingNodes).toContain(nodeBlockStorage);
+
+           // Block Storage can connect to Compute
+           matchingNodes = service.findMatchingNodesToComponentInstance(nodeBlockStorage.componentInstance, nodes, []);
+           expect(matchingNodes).toHaveLength(1);
+           expect(matchingNodes).toContain(nodeCompute);
+
+           // Vl has no matches
+           matchingNodes = service.findMatchingNodesToComponentInstance(nodeVl.componentInstance, nodes, []);
+           expect(matchingNodes).toHaveLength(0);
+
+           // CP should be able to connect to VL and Compute
+           matchingNodes = service.findMatchingNodesToComponentInstance(nodeCp.componentInstance, nodes, []);
+           expect(matchingNodes).toHaveLength(2);
+           expect(matchingNodes).toContain(nodeCompute);
+           expect(matchingNodes).toContain(nodeVl);
+       });
+
+       it('try with empty list of nodes', () => {
+            const nodes = [ ];
+            let matchingNodes: any;
+
+            // Compute can connect to Block Store
+            matchingNodes = service.findMatchingNodesToComponentInstance(nodeCompute.componentInstance, nodes, []);
+            expect(matchingNodes).toHaveLength(0);
+        });
+
+       it('should detect fulfilled connection with compute node', () => {
+            const nodes = [ nodeBlockStorage, nodeCompute, nodeVl ];
+            let matchingNodes: any;
+            const link = {
+                relation: {
+                    fromNode: 'extcp0',
+                    toNode: 'compute0',
+                    relationships: [{
+                        relation: {
+                            requirementOwnerId: 'extcp0',
+                            requirement: 'virtualBinding',
+                            relationship: {
+                                type: 'tosca.relationships.network.BindsTo'
+                            }
+
+                        }
+                    }]
+                }
+            };
+
+            const links = [link];
+            // CP should be able to connect to VL only since it already has a link with compute
+            matchingNodes = service.findMatchingNodesToComponentInstance(nodeCp.componentInstance, nodes, links as CompositionCiLinkBase[]);
+            expect(matchingNodes).toHaveLength(1);
+            expect(matchingNodes).toContain(nodeVl);
+        });
+    });
+});
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/match-capability-requierment-utils.ts
index aa1991069e..c3a1286a97 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/match-capability-requierment-utils.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -17,17 +17,17 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-
-import * as _ from "lodash";
+import { Injectable } from '@angular/core';
 import {
-    Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match,
-    CompositionCiNodeBase, Component, Capability
-} from "app/models";
-import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance";
+    CapabilitiesGroup, Capability, ComponentInstance, CompositionCiLinkBase,
+    CompositionCiNodeBase, Match, Requirement, RequirementsGroup
+} from 'app/models';
+import * as _ from 'lodash';
+
 /**
  * Created by obarda on 1/1/2017.
  */
-
+@Injectable()
 export class MatchCapabilitiesRequirementsUtils {
 
     /**
@@ -37,7 +37,7 @@ export class MatchCapabilitiesRequirementsUtils {
      */
     public highlightMatchingComponents(filteredNodesData, cy: Cy.Instance) {
         _.each(filteredNodesData, (data: any) => {
-            let node = cy.getElementById(data.id);
+            const node = cy.getElementById(data.id);
             cy.emit('showhandle', [node]);
         });
     }
@@ -50,7 +50,7 @@ export class MatchCapabilitiesRequirementsUtils {
      * @param hoveredNodeData
      */
     public fadeNonMachingComponents(filteredNodesData, nodesData, cy: Cy.Instance, hoveredNodeData?) {
-        let fadeNodes = _.xorWith(nodesData, filteredNodesData, (node1, node2) => {
+        const fadeNodes = _.xorWith(nodesData, filteredNodesData, (node1, node2) => {
             return node1.id === node2.id;
         });
         if (hoveredNodeData) {
@@ -58,9 +58,9 @@ export class MatchCapabilitiesRequirementsUtils {
         }
         cy.batch(() => {
             _.each(fadeNodes, (node) => {
-                cy.getElementById(node.id).style({ 'background-image-opacity': 0.4 });
+                cy.getElementById(node.id).style({'background-image-opacity': 0.4});
             });
-        })
+        });
     }
 
     /**
@@ -69,71 +69,36 @@ export class MatchCapabilitiesRequirementsUtils {
      */
     public resetFadedNodes(cy: Cy.Instance) {
         cy.batch(() => {
-            cy.nodes().style({ 'background-image-opacity': 1 });
-        })
-    }
-
-    private static isRequirementFulfilled(fromNodeId: string, requirement: any, links: Array<CompositionCiLinkBase>): boolean {
-        if (requirement.maxOccurrences === 'UNBOUNDED') {
-            return false;
-        }
-        let linksWithThisReq: Array<CompositionCiLinkBase> = _.filter(links, {
-            'relation': {
-                'fromNode': fromNodeId,
-                'relationships': [{
-                    'relation': {
-                        'requirementOwnerId': requirement.ownerId,
-                        'requirement': requirement.name,
-                        'relationship': {
-                            'type': requirement.capability
-                        }
-
-                    }
-                }]
-            }
+            cy.nodes().style({'background-image-opacity': 1});
         });
-        return linksWithThisReq.length == requirement.maxOccurrences;
-    };
-
-    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;
-    };
+    }
 
     public getMatchedRequirementsCapabilities(fromComponentInstance: ComponentInstance,
-        toComponentInstance: ComponentInstance,
-        links: Array<CompositionCiLinkBase>): Array<Match> {
-        let fromToMatches: Array<Match> = this.getMatches(fromComponentInstance.requirements,
+                                              toComponentInstance: ComponentInstance,
+                                              links: CompositionCiLinkBase[]): Match[] {
+        const fromToMatches: Match[] = this.getMatches(fromComponentInstance.requirements,
             toComponentInstance.capabilities,
             links,
             fromComponentInstance.uniqueId,
             toComponentInstance.uniqueId, true);
-        let toFromMatches: Array<Match> = this.getMatches(toComponentInstance.requirements,
+        const toFromMatches: Match[] = this.getMatches(toComponentInstance.requirements,
             fromComponentInstance.capabilities,
             links,
-            fromComponentInstance.uniqueId,
-            toComponentInstance.uniqueId, false);
+            toComponentInstance.uniqueId,
+            fromComponentInstance.uniqueId, false);
 
         return fromToMatches.concat(toFromMatches);
     }
 
     /***** REFACTORED FUNCTIONS START HERE *****/
 
-    public getMatches(requirements: RequirementsGroup, capabilities: CapabilitiesGroup, links: Array<CompositionCiLinkBase>,
-        fromId: string, toId: string, isFromTo: boolean): Array<Match> {
-        let matches: Array<Match> = [];
-        let unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links);
+    public getMatches(requirements: RequirementsGroup, capabilities: CapabilitiesGroup, links: CompositionCiLinkBase[],
+                      fromId: string, toId: string, isFromTo: boolean): Match[] {
+        const matches: Match[] = [];
+        const unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links);
         _.forEach(unfulfilledReqs, (req) => {
             _.forEach(_.flatten(_.values(capabilities)), (capability: Capability) => {
-                if (MatchCapabilitiesRequirementsUtils.isMatch(req, capability)) {
+                if (this.isMatch(req, capability)) {
                     if (isFromTo) {
                         matches.push(new Match(req, capability, isFromTo, fromId, toId));
                     } else {
@@ -145,17 +110,16 @@ export class MatchCapabilitiesRequirementsUtils {
         return matches;
     }
 
-    public getUnfulfilledRequirements = (fromNodeId: string, requirements: RequirementsGroup, links: Array<CompositionCiLinkBase>): Array<Requirement> => {
-
-        let requirementArray: Array<Requirement> = [];
+    public getUnfulfilledRequirements = (fromNodeId: string, requirements: RequirementsGroup, links: CompositionCiLinkBase[]): Requirement[] => {
+        const requirementArray: Requirement[] = [];
         _.forEach(_.flatten(_.values(requirements)), (requirement: Requirement) => {
-            if (requirement.name !== 'dependency' && requirement.parentName !== 'dependency' && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) {
+            const reqFulfilled = this.isRequirementFulfilled(fromNodeId, requirement, links);
+            if (requirement.name !== 'dependency' && requirement.parentName !== 'dependency' && !reqFulfilled) {
                 requirementArray.push(requirement);
             }
         });
         return requirementArray;
-    };
-
+    }
 
     /**
      * Returns true if there is a match between the capabilities and requirements that are passed in
@@ -163,13 +127,26 @@ export class MatchCapabilitiesRequirementsUtils {
      * @param capabilities
      * @returns {boolean}
      */
-    public containsMatch = (requirements: Array<Requirement>, capabilities: CapabilitiesGroup): boolean => {
+    public containsMatch = (requirements: Requirement[], capabilities: CapabilitiesGroup): boolean => {
         return _.some(requirements, (req: Requirement) => {
             return _.some(_.flatten(_.values(capabilities)), (capability: Capability) => {
-                return MatchCapabilitiesRequirementsUtils.isMatch(req, capability);
+                return this.isMatch(req, capability);
             });
         });
-    };
+    }
+
+    public hasUnfulfilledRequirementContainingMatch = (node: CompositionCiNodeBase, componentRequirements: Requirement[], capabilities: CapabilitiesGroup, links: CompositionCiLinkBase[]) => {
+        if (node && node.componentInstance) {
+            // Check if node has unfulfilled requirement that can be filled by component (#2)
+            const nodeRequirements: Requirement[] = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links);
+            if (!nodeRequirements.length) {
+                return false;
+            }
+            if (this.containsMatch(nodeRequirements, capabilities)) {
+                return true;
+            }
+        }
+    }
 
     /**
      * Returns array of nodes that can connect to the component.
@@ -178,27 +155,42 @@ export class MatchCapabilitiesRequirementsUtils {
      * 2. node has an unfulfilled requirement that matches the component's capabilities
      * 3. vl is passed in which has the capability to fulfill requirement from component and requirement on node.
      */
-    public findMatchingNodes(component: Component, nodeDataArray: Array<CompositionCiNodeBase>,
-        links: Array<CompositionCiLinkBase>): Array<any> //TODO allow for VL array and TEST
-    {
-        let componentRequirements: Array<Requirement> = this.getUnfulfilledRequirements(component.uniqueId, component.requirements, links);
-        return _.filter(nodeDataArray, (node: any) => {
-            if (node && node.componentInstance) {
-
-                //Check if component has an unfulfilled requirement that can be met by one of nodes's capabilities (#1)
-                if (componentRequirements.length && node.category !== 'groupCp' && this.containsMatch(componentRequirements, node.componentInstance.capabilities)) {
+    public findMatchingNodesToComponentInstance(componentInstance: ComponentInstance, nodeDataArray: CompositionCiNodeBase[], links: CompositionCiLinkBase[]): any[] {
+        return _.filter(nodeDataArray, (node: CompositionCiNodeBase) => {
+            const matchedRequirementsCapabilities = this.getMatchedRequirementsCapabilities(node.componentInstance, componentInstance, links);
+            return matchedRequirementsCapabilities && matchedRequirementsCapabilities.length > 0;
+        });
+    }
+
+    public 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 isRequirementFulfilled(fromNodeId: string, requirement: any, links: CompositionCiLinkBase[]): boolean {
+        return _.some(links, {
+            relation: {
+                fromNode: fromNodeId,
+                relationships: [{
+                    relation: {
+                        requirementOwnerId: requirement.ownerId,
+                        requirement: requirement.name,
+                        relationship: {
+                            type: requirement.relationship
+                        }
 
-                } else { //Check if node has unfulfilled requirement that can be filled by component (#2)
-                    let nodeRequirements: Array<Requirement> = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links);
-                    if (!nodeRequirements.length) return false;
-                    if (this.containsMatch(nodeRequirements, component.capabilities)) {
-                        return true;
                     }
-                }
+                }]
             }
         });
     }
-}
 
-MatchCapabilitiesRequirementsUtils.$inject = [];
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap
new file mode 100644
index 0000000000..74517e1eb0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`palette component should match current snapshot of palette component 1`] = `
+<composition-palette
+  buildPaletteByCategories={[Function Function]}
+  compositionPaletteService={[Function Object]}
+  eventListenerService={[Function Object]}
+  numberOfElements="0"
+  onDragStart={[Function Function]}
+  onDraggableMoved={[Function Function]}
+  onDrop={[Function Function]}
+  onMouseOut={[Function Function]}
+  onMouseOver={[Function Function]}
+  onSearchChanged={[Function Function]}
+  position={[Function Point]}
+>
+  <div
+    class="composition-palette-component"
+  >
+    <div
+      class="palette-elements-count"
+    >
+      Elements 
+      <span
+        class="palette-elements-count-value"
+      >
+        
+      </span>
+    </div>
+    <sdc-filter-bar
+      placeholder="Search..."
+      testid="searchAsset"
+    />
+    <div
+      class="palette-elements-list"
+    >
+      <sdc-loader
+        name="palette-loader"
+        testid="palette-loader"
+      />
+      
+      
+    </div>
+  </div><div
+    dnddropzone=""
+    id="draggable_element"
+  >
+    
+  </div>
+</composition-palette>
+`;
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html b/catalog-ui/src/app/ng2/pages/composition/palette/palette-animation/palette-animation.component.html
index efd619687c..efd619687c 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-animation/palette-animation.component.html
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less b/catalog-ui/src/app/ng2/pages/composition/palette/palette-animation/palette-animation.component.less
index 54f04189c0..54f04189c0 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-animation/palette-animation.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette-animation/palette-animation.component.ts
index 7e45b9e55b..a445c87f42 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-animation/palette-animation.component.ts
@@ -24,7 +24,7 @@ import { setTimeout } from 'core-js/library/web/timers';
 import { EventListenerService } from 'app/services';
 import { GRAPH_EVENTS } from 'app/utils';
 import { Point } from 'app/models';
-import { ZoneInstanceType, ZoneInstance } from '../../../../models/graph/zones/zone-instance';
+import { ZoneInstanceType, ZoneInstance } from 'app/models/graph/zones/zone-instance';
  
 
 
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette-animation/palette-animation.module.ts
index 8674571138..8674571138 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-animation/palette-animation.module.ts
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/__snapshots__/palette-element.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/__snapshots__/palette-element.component.spec.ts.snap
new file mode 100644
index 0000000000..40df575519
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/__snapshots__/palette-element.component.spec.ts.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`palette element component should match current snapshot of palette element component 1`] = `
+<palette-element>
+  <div
+    class="palette-element"
+  >
+    <sdc-element-icon
+      class="palette-element-icon"
+    />
+    <div
+      class="palette-element-text"
+    >
+      <div
+        class="palette-element-name"
+        sdc-tooltip=""
+      >
+        
+      </div>
+      <span>
+         V.
+      </span>
+      <span>
+        
+      </span>
+    </div>
+  </div>
+</palette-element>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.html b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.html
new file mode 100644
index 0000000000..3a6be5d082
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.html
@@ -0,0 +1,11 @@
+<div class="palette-element" >
+        <sdc-element-icon class="palette-element-icon" [iconName]="paletteElement.icon"
+            [elementType]="paletteElement.componentSubType"[uncertified]="this.paletteElement.certifiedIconClass"></sdc-element-icon>
+    <div class="palette-element-text">
+        <div class="palette-element-name" sdc-tooltip
+                            tooltip-text='{{paletteElement.name | resourceName}}'>{{paletteElement.name | resourceName}}
+        </div>
+        <span> V.{{paletteElement.version}}</span>
+        <span>{{paletteElement.componentSubType}}</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.less b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.less
new file mode 100644
index 0000000000..e9c3253fbd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.less
@@ -0,0 +1,32 @@
+@import "./../../../../../../assets/styles/override";
+.palette-element {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  max-height: 65px;
+  border-bottom: 1px solid @sdcui_color_silver;
+  padding: 10px;
+  align-items: center;
+  .palette-element-icon {
+    min-width: 45px;
+    text-align: center;
+  }
+
+  .palette-element-text {
+    display: flex;
+    flex-direction: column;
+    font-size: 13px;
+    line-height: 15px;
+    padding-left: 10px;
+    font-family: OpenSans-Regular, sans-serif;
+    overflow: hidden;
+
+    .palette-element-name {
+      color: @sdcui_color_dark-gray;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.spec.ts
new file mode 100644
index 0000000000..64ed45ba9c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.spec.ts
@@ -0,0 +1,30 @@
+import {async, ComponentFixture} from "@angular/core/testing";
+import {ConfigureFn, configureTests} from "../../../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {PaletteElementComponent} from "./palette-element.component";
+import {ResourceNamePipe} from "../../../../pipes/resource-name.pipe";
+
+describe('palette element component', () => {
+
+    let fixture: ComponentFixture<PaletteElementComponent>;
+
+    beforeEach(
+        async(() => {
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [PaletteElementComponent, ResourceNamePipe],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA]
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(PaletteElementComponent);
+            });
+        })
+    );
+
+    it('should match current snapshot of palette element component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.ts
index 41f24dc8e8..9e9e5a29da 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-element/palette-element.component.ts
@@ -1,3 +1,6 @@
+/**
+ * Created by ob0695 on 6/28/2018.
+ */
 /*-
  * ============LICENSE_START=======================================================
  * SDC
@@ -7,9 +10,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,17 +21,15 @@
  * ============LICENSE_END=========================================================
  */
 
-'use strict';
-import {ICompositionViewModelScope} from "../../composition-view-model";
-
-interface IStructureViewModel extends ICompositionViewModelScope {
-}
+import {Component, Input} from "@angular/core";
+import {LeftPaletteComponent} from "app/models/components/displayComponent";
 
-export class StructureViewModel {
-    static '$inject' = [
-        '$scope'
-    ];
+@Component({
+    selector: 'palette-element',
+    templateUrl: './palette-element.component.html',
+    styleUrls: ['./palette-element.component.less']
+})
+export class PaletteElementComponent {
 
-    constructor(private $scope:IStructureViewModel) {
-    }
+    @Input() paletteElement: LeftPaletteComponent;
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.html
index 11261e95b4..86847eb28a 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.html
@@ -23,3 +23,8 @@
         <div class="popup-panel-title">{{panelTitle}}</div>
     </div>
 </div>
+<!--<popup-menu-list [menuItemsData]="getMenuItems()">-->
+
+
+
+<!--</popup-menu-list>-->
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.less
index 24f0485e76..24f0485e76 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.ts
index a10ca7dc81..5d98fc7f78 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.ts
@@ -1,8 +1,8 @@
 import {Component, OnInit} from '@angular/core';
-import {GRAPH_EVENTS} from "app/utils";
+import {GRAPH_EVENTS, SdcElementType} from "app/utils";
 import {LeftPaletteComponent, Point} from "app/models";
 import {EventListenerService} from "app/services";
-import {LeftPaletteMetadataTypes} from "../../../../models/components/displayComponent";
+import {LeftPaletteMetadataTypes} from "app/models/components/displayComponent";
 
 @Component({
     selector: 'app-palette-popup-panel',
@@ -29,6 +29,18 @@ export class PalettePopupPanelComponent implements OnInit {
         this.isShowPanel = true;
     }
 
+    public getMenuItems = () => {
+        return [{
+            text: 'Delete',
+            iconName: 'trash-o',
+            iconType: 'common',
+            iconMode: 'secondary',
+            iconSize: 'small',
+            type: '',
+            action: () => this.addZoneInstance()
+        }];
+    }
+
     public onMouseLeave() {
         this.isShowPanel = false;
     }
@@ -43,9 +55,7 @@ export class PalettePopupPanelComponent implements OnInit {
     private registerObserverCallbacks() {
 
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL,
-            (component: Component, displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
-
-                this.component = component;
+            (displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
                 this.showPopupPanel(displayComponent, sectionElem);
             });
 
@@ -60,12 +70,12 @@ export class PalettePopupPanelComponent implements OnInit {
     };
 
     private setPopupPanelTitle(component: LeftPaletteComponent): void {
-        if (component.categoryType === LeftPaletteMetadataTypes.Group) {
+        if (component.componentSubType === SdcElementType.GROUP) {
             this.panelTitle = "Add Group";
             return;
         }
 
-        if (component.categoryType === LeftPaletteMetadataTypes.Policy) {
+        if (component.componentSubType === SdcElementType.POLICY) {
             this.panelTitle = "Add Policy";
             return;
         }
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html
new file mode 100644
index 0000000000..7963dd18b7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html
@@ -0,0 +1,41 @@
+<div class="composition-palette-component">
+    <div class="palette-elements-count">Elements
+        <span class="palette-elements-count-value">{{numberOfElements}}</span>
+    </div>
+
+    <sdc-filter-bar placeholder="Search..." (valueChange)="onSearchChanged($event)" testId="searchAsset"></sdc-filter-bar>
+
+    <div class="palette-elements-list">
+        <sdc-loader [global]="false" name="palette-loader" testId="palette-loader" [active]="this.isPaletteLoading" [class.inactive]="!this.isPaletteLoading"></sdc-loader>
+        <div *ngIf="numberOfElements === 0 && searchText" class="no-elements-found">No Elements Found</div>
+        <sdc-accordion *ngFor="let mapByCategory of paletteElements | keyValue; let first = first" [attr.data-tests-id]="'leftPalette.category.'+mapByCategory.key" [title]="mapByCategory.key" [css-class]="'palette-category'">
+            <div *ngFor="let mapBySubCategory of mapByCategory.value | keyValue">
+                <div class="palette-subcategory">{{mapBySubCategory.key}}</div>
+                <ng-container *ngIf="!(isViewOnly$ | async)">
+                    <div *ngFor="let paletteElement of mapBySubCategory.value"
+                        [dndDraggable]="paletteElement"
+                        [dndDisableIf]="paletteElement.componentSubType == 'GROUP' && paletteElement.componentSubType == 'POLICY'"
+                        (dndStart)="onDragStart($event, paletteElement)"
+                        (drag)="onDraggableMoved($event)"
+                        [dndEffectAllowed]="'copyMove'"
+                        (mouseenter)="onMouseOver($event, paletteElement)"
+                        (mouseleave)="onMouseOut(paletteElement)"
+                        [attr.data-tests-id]="paletteElement.name">
+                       <palette-element [paletteElement]="paletteElement"></palette-element>
+                   </div>
+                </ng-container>
+                <ng-container *ngIf="(isViewOnly$ | async)">
+                    <div *ngFor="let paletteElement of mapBySubCategory.value"
+                        [attr.data-tests-id]="paletteElement.name">
+                        <palette-element [paletteElement]="paletteElement"></palette-element>
+                    </div>
+                </ng-container>
+            </div>
+        </sdc-accordion>
+    </div>
+</div>
+
+<div id="draggable_element" dndDropzone (dndDrop)="onDrop($event)" [dndAllowExternal]="true">
+    <sdc-element-icon *ngIf="paletteDraggedElement" [iconName]="paletteDraggedElement.icon"
+        [elementType]="paletteDraggedElement.componentSubType" [uncertified]="paletteDraggedElement.certifiedIconClass"></sdc-element-icon>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less
new file mode 100644
index 0000000000..37461ba1c5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less
@@ -0,0 +1,84 @@
+@import "./../../../../../assets/styles/override";
+
+:host(composition-palette) {
+  display:flex;
+  flex: 0 0 244px;
+}
+
+sdc-loader.inactive {
+  display:none;
+}
+
+:host ::ng-deep .sdc-filter-bar .sdc-input {
+  margin-bottom:0px;
+}
+:host ::ng-deep .sdc-loader-wrapper {
+  position:static; 
+}
+
+.composition-palette-component {
+  background-color: @sdcui_color_white;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  position:relative;
+  width: 244px;
+  box-shadow: 7px -3px 6px -8px @sdcui_color_gray;
+
+  .palette-elements-count {
+    background-color: @sdcui_color_gray;
+    line-height: 40px;
+    padding: 0 17px;
+    color: @sdcui_color_white;
+    .palette-elements-count-value {
+      float: right;
+    }
+  }
+
+  .palette-elements-list {
+
+    .no-elements-found {
+      padding-left: 40px;
+    }
+    /deep/ .palette-category {
+      display: flex;
+      margin: 0px;
+      .sdc-accordion-header {
+        background-color: @sdcui_color_silver;
+        margin: 0px;
+        line-height: 40px;
+        padding: 0px 10px;
+      }
+      .sdc-accordion-body {
+        padding: 0px;
+      }
+    }
+    .palette-subcategory {
+      padding: 0 10px;
+      background-color: @sdcui_color_lighter-silver;
+      line-height: 35px;
+    }
+  }
+}
+
+#draggable_element {
+  display: inline-block;
+  border-radius: 50%;
+  background: transparent;
+  position: absolute;
+  top: -9999px;
+  left: 0;
+  z-index: 100;
+}
+
+.invalid-drag {
+  border: 7px solid @red-shadow;
+}
+
+.valid-drag {
+  border: 7px solid @green-shadow;
+}
+
+@green-shadow: rgba(29, 154, 149, 0.3);
+@red-shadow: rgba(218, 31, 61, 0.3);
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts
new file mode 100644
index 0000000000..efa9cd3370
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts
@@ -0,0 +1,102 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {CompositionPaletteService} from "./services/palette.service";
+import {EventListenerService} from "../../../../services/event-listener-service";
+import {PaletteElementComponent} from "./palette-element/palette-element.component";
+import {PaletteComponent} from "./palette.component";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {GRAPH_EVENTS} from "../../../../utils/constants";
+import {KeyValuePipe} from "../../../pipes/key-value.pipe";
+import {ResourceNamePipe} from "../../../pipes/resource-name.pipe";
+import {LeftPaletteComponent} from "../../../../models/components/displayComponent";
+import {Observable} from "rxjs/Observable";
+import {leftPaletteElements} from "../../../../../jest/mocks/left-paeltte-elements.mock";
+import {NgxsModule, Select} from '@ngxs/store';
+import { WorkspaceState } from 'app/ng2/store/states/workspace.state';
+
+
+describe('palette component', () => {
+
+    const mockedEvent = <MouseEvent>{ target: {} }
+    let fixture: ComponentFixture<PaletteComponent>;
+    let eventServiceMock: Partial<EventListenerService>;
+    let compositionPaletteMockService: Partial<CompositionPaletteService>;
+
+    beforeEach(
+        async(() => {
+            eventServiceMock = {
+                notifyObservers: jest.fn()
+            }
+            compositionPaletteMockService = {
+                subscribeToLeftPaletteElements:  jest.fn().mockImplementation(()=>  Observable.of(leftPaletteElements)),
+                getLeftPaletteElements: jest.fn().mockImplementation(()=>  leftPaletteElements)
+            }
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [PaletteComponent, PaletteElementComponent, KeyValuePipe, ResourceNamePipe],
+                    imports: [NgxsModule.forRoot([WorkspaceState])],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: CompositionPaletteService, useValue: compositionPaletteMockService},
+                        {provide: EventListenerService, useValue: eventServiceMock}
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(PaletteComponent);
+            });
+        })
+    );
+
+    it('should match current snapshot of palette component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should call on palette component hover in event', () => {
+        let paletteObject =  <LeftPaletteComponent>{categoryType: 'COMPONENT'};
+        fixture.componentInstance.onMouseOver(mockedEvent, paletteObject);
+        expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, paletteObject);
+    });
+
+    it('should call on palette component hover out event', () => {
+        let paletteObject =  <LeftPaletteComponent>{categoryType: 'COMPONENT'};
+        fixture.componentInstance.onMouseOut(paletteObject);
+        expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
+    });
+
+    it('should call show popup panel event', () => {
+        let paletteObject =  <LeftPaletteComponent>{categoryType: 'GROUP'};
+        fixture.componentInstance.onMouseOver(mockedEvent, paletteObject);
+        expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, paletteObject, mockedEvent.target);
+    });
+
+    it('should call  hide popup panel event', () => {
+        let paletteObject =  <LeftPaletteComponent>{categoryType: 'GROUP'};
+        fixture.componentInstance.onMouseOut(paletteObject);
+        expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL);
+    });
+
+    it('should build Palette By Categories without searchText', () => {
+        fixture.componentInstance.buildPaletteByCategories();
+        expect(fixture.componentInstance.paletteElements["Generic"]["Network"].length).toBe(5);
+        expect(fixture.componentInstance.paletteElements["Generic"]["Network"][0].searchFilterTerms).toBe("extvirtualmachineinterfacecp external port for virtual machine interface extvirtualmachineinterfacecp 3.0");
+        expect(fixture.componentInstance.paletteElements["Generic"]["Network"][1].searchFilterTerms).toBe("newservice2 asdfasdfa newservice2 0.3");
+
+        expect(fixture.componentInstance.paletteElements["Generic"]["Configuration"].length).toBe(1);
+        expect(fixture.componentInstance.paletteElements["Generic"]["Configuration"][0].systemName).toBe("Extvirtualmachineinterfacecp");
+    });
+
+    it('should build Palette By Categories with searchText', () => {
+        fixture.componentInstance.buildPaletteByCategories("testVal");
+        expect(fixture.componentInstance.paletteElements["Generic"]["Network"].length).toBe(1);
+        expect(fixture.componentInstance.paletteElements["Generic"]["Network"][0].searchFilterTerms).toBe("testVal and other values");
+    });
+
+    it('should change numbers of elements', () => {
+        fixture.componentInstance.buildPaletteByCategories();
+        expect(fixture.componentInstance.numberOfElements).toEqual(6);
+        fixture.componentInstance.buildPaletteByCategories("testVal");
+        expect(fixture.componentInstance.numberOfElements).toEqual(1);
+    });
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts
new file mode 100644
index 0000000000..02d270b39a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts
@@ -0,0 +1,172 @@
+/**
+ * Created by ob0695 on 6/28/2018.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Component, HostListener } from '@angular/core';
+import { Select } from '@ngxs/store';
+import { LeftPaletteComponent, LeftPaletteMetadataTypes } from 'app/models/components/displayComponent';
+import { Point } from 'app/models/graph/point';
+import { WorkspaceState } from 'app/ng2/store/states/workspace.state';
+import Dictionary = _.Dictionary;
+import { EventListenerService } from 'app/services/event-listener-service';
+import { GRAPH_EVENTS } from 'app/utils/constants';
+import { DndDropEvent } from 'ngx-drag-drop/ngx-drag-drop';
+import { CompositionPaletteService } from './services/palette.service';
+import {PolicyMetadata} from "../../../../models/policy-metadata";
+import {GenericBrowserDomAdapter} from "@angular/platform-browser/src/browser/generic_browser_adapter";
+
+@Component({
+    selector: 'composition-palette',
+    templateUrl: './palette.component.html',
+    styleUrls: ['./palette.component.less']
+})
+export class PaletteComponent {
+
+    constructor(private compositionPaletteService: CompositionPaletteService, private eventListenerService: EventListenerService) {}
+
+    @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
+    private paletteElements: Dictionary<Dictionary<LeftPaletteComponent[]>>;
+    public numberOfElements: number = 0;
+    public isPaletteLoading: boolean;
+    private paletteDraggedElement: LeftPaletteComponent;
+    public position: Point = new Point();
+
+    ngOnInit() {
+        this.isPaletteLoading = true;
+
+        this.compositionPaletteService.subscribeToLeftPaletteElements((leftPaletteElementsResponse) => {
+            this.paletteElements = leftPaletteElementsResponse;
+            this.numberOfElements = this.countLeftPalleteElements(this.paletteElements);
+            this.isPaletteLoading = false;
+        }, () => {
+            this.isPaletteLoading = false;
+        });
+
+    }
+
+    public buildPaletteByCategories = (searchText?: string) => { // create nested by category & subcategory, filtered by search parans
+        // Flat the object and run on its leaves
+        if (searchText) {
+            searchText = searchText.toLowerCase();
+            const paletteElementsAfterSearch = {};
+            this.paletteElements = this.compositionPaletteService.getLeftPaletteElements();
+            for (const category in this.paletteElements) {
+                for (const subCategory in this.paletteElements[category]) {
+                    const subCategoryToCheck = this.paletteElements[category][subCategory];
+                    const res = subCategoryToCheck.filter((item) => item.searchFilterTerms.toLowerCase().indexOf(searchText) >= 0)
+                    if (res.length > 0) {
+                        paletteElementsAfterSearch[category] = {};
+                        paletteElementsAfterSearch[category][subCategory] = res;
+                    }
+                }
+            }
+            this.paletteElements = paletteElementsAfterSearch;
+        } else {
+            this.paletteElements = this.compositionPaletteService.getLeftPaletteElements();
+        }
+        this.numberOfElements = this.countLeftPalleteElements(this.paletteElements);
+    }
+
+    public onSearchChanged = (searchText: string) => {
+
+        if (this.compositionPaletteService.getLeftPaletteElements()) {
+            this.buildPaletteByCategories(searchText);
+        }
+    }
+
+    private countLeftPalleteElements(leftPalleteElements: Dictionary<Dictionary<LeftPaletteComponent[]>>) {
+        // Use _ & flat map
+        let counter = 0;
+        for (const category in leftPalleteElements) {
+            for (const subCategory in leftPalleteElements[category]) {
+                counter += leftPalleteElements[category][subCategory].length;
+            }
+        }
+        return counter;
+    }
+
+    private isGroupOrPolicy(component: LeftPaletteComponent): boolean {
+        if (component &&
+            (component.categoryType === LeftPaletteMetadataTypes.Group ||
+            component.categoryType === LeftPaletteMetadataTypes.Policy)) {
+            return true;
+        }
+        return false;
+    }
+    @HostListener('document:dragover', ['$event'])
+    public onDrag(event) {
+        this.position.x = event.clientX;
+        this.position.y = event.clientY;
+    }
+    
+    //---------------------------------------Palette Events-----------------------------------------//
+
+    public onDraggableMoved = (event:DragEvent) => {  
+          let draggedElement = document.getElementById("draggable_element");
+          draggedElement.style.top = (this.position.y - 80) + "px";
+          draggedElement.style.left = (this.position.x - 30) + "px";
+          this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, this.position);
+    }
+
+    public onDragStart = (event, draggedElement:LeftPaletteComponent) => { // Applying the dragged svg component to the draggable element
+        
+        this.paletteDraggedElement = draggedElement;
+        event.dataTransfer.dropEffect = "copy";
+        let hiddenImg = document.createElement("span");
+        event.dataTransfer.setDragImage(hiddenImg, 0, 0);
+    }
+
+
+    public onDrop = (event:DndDropEvent) => {
+        let draggedElement = document.getElementById("draggable_element");
+        draggedElement.style.top = "-9999px";
+        if(draggedElement.classList.contains('valid-drag')) {
+            if(!event.data){
+                event.data = this.paletteDraggedElement;
+            }
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DROP, event);
+        } else {
+            console.log("INVALID drop");
+        }
+        this.paletteDraggedElement = undefined;
+        
+    }
+
+    public onMouseOver = (sectionElem:MouseEvent, displayComponent:LeftPaletteComponent) => {
+        console.debug("On palette element MOUSE HOVER: ", displayComponent);
+        if (this.isGroupOrPolicy(displayComponent)) {
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, displayComponent, sectionElem.target);
+        } else {
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent);
+        }
+    };
+
+    public onMouseOut = (displayComponent:LeftPaletteComponent) => {
+        console.debug("On palette element MOUSE OUT: ", displayComponent);
+        if (this.isGroupOrPolicy(displayComponent)) {
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL);
+        } else {
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
+        }
+    };
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.module.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette.module.ts
new file mode 100644
index 0000000000..aeb4c4c60b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import { CompositionPaletteService } from "./services/palette.service";
+import { PaletteComponent } from "./palette.component";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { GlobalPipesModule } from "app/ng2/pipes/global-pipes.module";
+import { CommonModule } from "@angular/common";
+import { DndModule } from "ngx-drag-drop";
+import {PaletteElementComponent} from "./palette-element/palette-element.component";
+import {EventListenerService} from "app/services/event-listener-service";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+
+@NgModule({
+    declarations: [PaletteComponent, PaletteElementComponent],
+    imports: [CommonModule, SdcUiComponentsModule, GlobalPipesModule, UiElementsModule, DndModule],
+    exports: [PaletteComponent],
+    entryComponents: [PaletteComponent],
+    providers: [CompositionPaletteService, EventListenerService]
+})
+export class PaletteModule {
+
+    constructor() {
+
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/services/palette.service.spec.ts b/catalog-ui/src/app/ng2/pages/composition/palette/services/palette.service.spec.ts
new file mode 100644
index 0000000000..3a660c1de7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/services/palette.service.spec.ts
@@ -0,0 +1,41 @@
+import {TestBed} from "@angular/core/testing";
+import {CompositionPaletteService} from "./palette.service";
+import {ISdcConfig, SdcConfigToken} from "../../../../config/sdc-config.config";
+import {WorkspaceService} from "../../../../pages/workspace/workspace.service";
+import { HttpClient } from "@angular/common/http";
+describe('palette component', () => {
+
+    let service: CompositionPaletteService;
+
+    let httpServiceMock: Partial<HttpClient> = {
+        get: jest.fn()
+    }
+
+    let sdcConfigToken: Partial<ISdcConfig> = {
+        "api": {
+            "root": ''
+        }
+    }
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            providers: [CompositionPaletteService,
+                {provide: HttpClient, useValue: httpServiceMock},
+                {provide: SdcConfigToken, useValue: sdcConfigToken},
+				{provide: WorkspaceService, useValue{}}
+            ]
+        });
+
+        service = TestBed.get(CompositionPaletteService);
+    });
+
+    it('should create an instance', () => {
+        expect(service).toBeDefined();
+    });
+
+    // it('should create an instance2', async () => {
+    //     expect(await service.subscribeToLeftPaletteElements("resources")).toEqual([]);
+    // });
+});
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/services/palette.service.ts b/catalog-ui/src/app/ng2/pages/composition/palette/services/palette.service.ts
new file mode 100644
index 0000000000..7587c5206f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/services/palette.service.ts
@@ -0,0 +1,98 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { LeftPaletteComponent, LeftPaletteMetadataTypes } from 'app/models/components/displayComponent';
+import { GroupMetadata } from 'app/models/group-metadata';
+import { PolicyMetadata } from 'app/models/policy-metadata';
+import { SdcConfigToken } from 'app/ng2/config/sdc-config.config';
+import { ISdcConfig } from 'app/ng2/config/sdc-config.config.factory';
+import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
+import 'rxjs/add/observable/forkJoin';
+import { Observable } from 'rxjs/Rx';
+import Dictionary = _.Dictionary;
+
+
+
+@Injectable()
+export class CompositionPaletteService {
+
+    protected baseUrl = '';
+
+    private leftPaletteComponents: Dictionary<Dictionary<LeftPaletteComponent[]>>;
+    private facadeUrl: string;
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig, private workspaceService: WorkspaceService) {
+        this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
+        this.facadeUrl = sdcConfig.api.uicache_root + sdcConfig.api.GET_uicache_left_palette;
+
+    }
+
+    public subscribeToLeftPaletteElements(next, error) {
+
+        let params = new HttpParams();
+        params = params.append('internalComponentType', this.workspaceService.getMetadataType());
+
+        const loadInstances = this.http.get(this.facadeUrl, {params});
+        const loadGroups = this.http.get(this.baseUrl + 'groupTypes', {params});
+        const loadPolicies = this.http.get(this.baseUrl + 'policyTypes', {params});
+
+        Observable.forkJoin(
+            loadInstances, loadGroups, loadPolicies
+        ).subscribe( ([resInstances, resGrouops, resPolicies]) => {
+            const combinedDictionary = this.combineResoponses(resInstances, resGrouops, resPolicies);
+            this.leftPaletteComponents = combinedDictionary;
+            next(this.leftPaletteComponents);
+        });
+    }
+
+    public getLeftPaletteElements = (): Dictionary<Dictionary<LeftPaletteComponent[]>> => {
+        return this.leftPaletteComponents;
+    }
+
+
+    public convertPoliciesOrGroups = (paletteListResult, type: string ) => {
+        const components: LeftPaletteComponent[] = [];
+
+        if (type === 'Policies') {
+            _.forEach(paletteListResult, (policyMetadata: PolicyMetadata) => {
+                components.push(new LeftPaletteComponent(LeftPaletteMetadataTypes.Policy, policyMetadata));
+            });
+            return {
+                Policies: components
+            };
+        }
+
+        if (type === 'Groups') {
+            _.forEach(paletteListResult, (groupMetadata: GroupMetadata) => {
+                const item = new LeftPaletteComponent(LeftPaletteMetadataTypes.Group, groupMetadata);
+                components.push(item);
+            });
+            return {
+                Groups: components
+            };
+        }
+
+        return {};
+    }
+
+    private combineResoponses(resInstances: object, resGrouops: object, resPolicies: object) {
+        const retValObject = {};
+        // Generic will be the 1st category in the left Pallete
+        if (resInstances['Generic']) {
+            retValObject['Generic'] = resInstances['Generic'];
+        }
+        // Add all other categories
+        for (const category in resInstances) {
+            if (category === 'Generic') {
+                continue;
+            }
+            retValObject[category] = resInstances[category];
+        }
+
+        // Add Groups
+        retValObject["Groups"] = this.convertPoliciesOrGroups(resGrouops, 'Groups');
+
+        // Add policies
+        retValObject["Policies"] = this.convertPoliciesOrGroups(resPolicies, 'Policies');
+
+        return retValObject;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap
new file mode 100644
index 0000000000..5f10806315
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`composition-panel component should match current snapshot of composition-panel component. 1`] = `
+<ng2-composition-panel
+  activatePreviousActiveTab={[Function Function]}
+  classes={[Function String]}
+  initTabs={[Function Function]}
+  isComponentInstanceSelected={[Function Function]}
+  isConfiguration={[Function Function]}
+  isPNF={[Function Function]}
+  selectedComponentIsServiceProxyInstance={[Function Function]}
+  setActive={[Function Function]}
+  store={[Function Store]}
+  toggleSidebarDisplay={[Function Function]}
+>
+  
+</ng2-composition-panel>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html
new file mode 100644
index 0000000000..bd90b9a814
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html
@@ -0,0 +1,21 @@
+<panel-wrapper-component *ngIf="compositionState$ | async as state">   <!-- HEADER -->
+
+    <ng2-composition-panel-header [isViewOnly]="state.isViewOnly"
+                                    [selectedComponent]="state.selectedComponent"></ng2-composition-panel-header>
+
+    <!-- TABS -->
+    <div class="component-details-panel-tabs">
+        <sdc-loader [global]="false" name="panel" testId="panel-loader" [active]="state.panelLoading"></sdc-loader>
+        <sdc-tabs (selectedTab)="setActive($event)" [iconsSize]="'large'">
+            <sdc-tab *ngFor="let tab of tabs" [titleIcon]="tab.titleIcon" [active]="tab.isActive"
+                        [tooltipText]="tab.tooltipText">
+                <panel-tab [isActive]="tab.isActive" [component]="selectedComponent"
+                            [componentType]="state.selectedComponentType" [isViewOnly]="isViewOnly$ | async"
+                            [input]="tab.input" [panelTabType]="tab.component"></panel-tab>
+            </sdc-tab>
+        </sdc-tabs>
+    </div>
+
+</panel-wrapper-component>
+
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
new file mode 100644
index 0000000000..776ef68944
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
@@ -0,0 +1,27 @@
+@import '../../../../../assets/styles/variables';
+@import '../../../../../assets/styles/mixins_old';
+
+:host ::ng-deep .sdc-loader-wrapper {
+    position:static; 
+}
+
+.component-details-panel-tabs {
+    flex: 1;
+    display:flex;
+    overflow:hidden;
+  }
+
+.component-details-panel-tabs /deep/ sdc-tabs {
+    display:flex;
+    flex-direction:column;
+
+    /deep/ sdc-tab {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+    }
+    .svg-icon-wrapper.label-placement-left .svg-icon-label {
+        margin-right: 0;
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts
new file mode 100644
index 0000000000..25a0c728a8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts
@@ -0,0 +1,228 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { NgxsModule, Store } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { Mock } from 'ts-mockery';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { Service } from '../../../../models/components/service';
+import { Resource } from '../../../../models/components/resource';
+import { GroupInstance } from '../../../../models/graph/zones/group-instance';
+import { PolicyInstance } from '../../../../models/graph/zones/policy-instance';
+import { ArtifactGroupType, ResourceType } from '../../../../utils/constants';
+import { WorkspaceState } from '../../../store/states/workspace.state';
+import { CompositionPanelComponent } from './composition-panel.component';
+import { ArtifactsTabComponent } from './panel-tabs/artifacts-tab/artifacts-tab.component';
+import { GroupMembersTabComponent } from './panel-tabs/group-members-tab/group-members-tab.component';
+import { GroupOrPolicyPropertiesTab } from './panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component';
+import { InfoTabComponent } from './panel-tabs/info-tab/info-tab.component';
+import { PolicyTargetsTabComponent } from './panel-tabs/policy-targets-tab/policy-targets-tab.component';
+import { PropertiesTabComponent } from './panel-tabs/properties-tab/properties-tab.component';
+import { ReqAndCapabilitiesTabComponent } from './panel-tabs/req-capabilities-tab/req-capabilities-tab.component';
+
+describe('composition-panel component', () => {
+
+    let fixture: ComponentFixture<CompositionPanelComponent>;
+    let store: Store;
+
+    const tabs = {
+            infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'},
+            policyProperties: {
+                titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'policy'}, isActive: false, tooltipText: 'Properties'
+            },
+            policyTargets: {titleIcon: 'inputs-o', component: PolicyTargetsTabComponent, input: {}, isActive: false, tooltipText: 'Targets'},
+            groupMembers: {titleIcon: 'inputs-o', component: GroupMembersTabComponent, input: {}, isActive: false, tooltipText: 'Members'},
+            groupProperties: {
+                titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'group'}, isActive: false, tooltipText: 'Properties'
+            },
+            deploymentArtifacts: {
+                titleIcon: 'deployment-artifacts-o', component: ArtifactsTabComponent,
+                input: { type: ArtifactGroupType.DEPLOYMENT}, isActive: false, tooltipText: 'Deployment Artifacts'
+            },
+            apiArtifacts: {
+                titleIcon: 'api-o', component: ArtifactsTabComponent,
+                input: { type:  ArtifactGroupType.SERVICE_API}, isActive: false, tooltipText: 'API Artifacts'
+            },
+            infoArtifacts: {
+                titleIcon: 'info-square-o', component: ArtifactsTabComponent,
+                input: { type: ArtifactGroupType.INFORMATION}, isActive: false, tooltipText: 'Information Artifacts'
+            },
+            properties: {
+                titleIcon: 'settings-o', component: PropertiesTabComponent,
+                input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties'
+            },
+            reqAndCapabilities : {
+                titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {},
+                isActive: false, tooltipText: 'Requirements and Capabilities'
+            },
+            inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'},
+            settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'},
+        };
+
+    beforeEach(
+        async(() => {
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [CompositionPanelComponent],
+                    imports: [NgxsModule.forRoot([WorkspaceState])],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(CompositionPanelComponent);
+                store = testBed.get(Store);
+            });
+        })
+    );
+
+    it('When PolicyInstance Selected => Expect (info, policyTargets and policyProperties) tabs appear', () => {
+
+        const testInstance = new PolicyInstance();
+
+        fixture.componentInstance.initTabs(testInstance);
+
+        expect (fixture.componentInstance.tabs.length).toBe(3);
+        expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect (fixture.componentInstance.tabs[1]).toEqual(tabs.policyTargets);
+        expect (fixture.componentInstance.tabs[2]).toEqual(tabs.policyProperties);
+    });
+
+    it('should match current snapshot of composition-panel component.', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('When Topology Template is Service and no instance is selected Expect (info, deployment, inputs, info and api)', () => {
+
+        const selectedComponent: Service = new Service(null, null);
+        selectedComponent.isResource = jest.fn(() => false);
+        selectedComponent.isService = jest.fn(() => true );
+
+        fixture.componentInstance.store.select = jest.fn(() => Observable.of(selectedComponent));
+
+        // const pnfMock = Mock.of<Service>({ isResource : () => false });
+        fixture.componentInstance.topologyTemplate = selectedComponent;
+
+        // Call ngOnInit
+        fixture.componentInstance.ngOnInit();
+
+        // Expect that
+        expect (fixture.componentInstance.tabs.length).toBe(5);
+        expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect (fixture.componentInstance.tabs[1]).toEqual(tabs.deploymentArtifacts);
+        expect (fixture.componentInstance.tabs[2]).toEqual(tabs.inputs);
+        expect (fixture.componentInstance.tabs[3]).toEqual(tabs.infoArtifacts);
+        expect (fixture.componentInstance.tabs[4]).toEqual(tabs.apiArtifacts);
+
+    });
+
+    it('When Topology Template is Resource and no instance is selected Expect (info, deployment, inputs, info and api)', () => {
+
+        const selectedComponent: Service = new Service(null, null);
+        selectedComponent.isResource = jest.fn(() => true);
+        selectedComponent.isService = jest.fn(() => false );
+
+        fixture.componentInstance.store.select = jest.fn(() => Observable.of(selectedComponent));
+
+        fixture.componentInstance.topologyTemplate = selectedComponent;
+
+        // Call ngOnInit
+        fixture.componentInstance.ngOnInit();
+
+        // Expect that
+        expect (fixture.componentInstance.tabs.length).toBe(5);
+        expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect (fixture.componentInstance.tabs[1]).toEqual(tabs.deploymentArtifacts);
+        expect (fixture.componentInstance.tabs[2]).toEqual(tabs.properties);
+        expect (fixture.componentInstance.tabs[3]).toEqual(tabs.infoArtifacts);
+        expect (fixture.componentInstance.tabs[4]).toEqual(tabs.reqAndCapabilities);
+
+    });
+
+    it('When Topology Template is Service and proxyService instance is selected ' +
+        'Expect (info, deployment, inputs, info and api)', () => {
+
+        const selectedComponent: Service = new Service(null, null);
+        selectedComponent.isResource = jest.fn(() => false);
+        selectedComponent.isService = jest.fn(() => true );
+
+        fixture.componentInstance.store.select = jest.fn(() => Observable.of(selectedComponent));
+        fixture.componentInstance.selectedComponentIsServiceProxyInstance = jest.fn(() => true);
+
+        // const pnfMock = Mock.of<Service>({ isResource : () => false });
+        fixture.componentInstance.topologyTemplate = selectedComponent;
+
+        // Call ngOnInit
+        fixture.componentInstance.ngOnInit();
+
+        // Expect that
+        expect (fixture.componentInstance.tabs.length).toBe(5);
+        expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect (fixture.componentInstance.tabs[1]).toEqual(tabs.properties);
+        expect (fixture.componentInstance.tabs[2]).toEqual(tabs.reqAndCapabilities);
+
+    });
+
+    it('When Topology Template is Resource and VL is selected ' +
+        'Expect (info, deployment, inputs, info and api)', () => {
+
+        const topologyTemplate: Resource = new Resource(null, null);
+        topologyTemplate.isResource = jest.fn(() => true);
+        topologyTemplate.isService = jest.fn(() => false );
+
+        const vlMock = Mock.of<Resource>({ resourceType : 'VL', isResource : () => true, isService : () => false });
+        fixture.componentInstance.store.select = jest.fn(() => Observable.of(vlMock));
+
+        fixture.componentInstance.topologyTemplate = topologyTemplate;
+
+        // Call ngOnInit
+        fixture.componentInstance.ngOnInit();
+
+        // Expect that
+        expect (fixture.componentInstance.tabs.length).toBe(5);
+        expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect (fixture.componentInstance.tabs[1]).toEqual(tabs.deploymentArtifacts);
+        expect (fixture.componentInstance.tabs[2]).toEqual(tabs.properties);
+        expect (fixture.componentInstance.tabs[3]).toEqual(tabs.infoArtifacts);
+        expect (fixture.componentInstance.tabs[4]).toEqual(tabs.reqAndCapabilities);
+
+    });
+
+    it('When Topology Template is Service and VL is selected ' +
+        'Expect (info, deployment, inputs, info and api)', () => {
+
+        const topologyTemplate: Service = new Service(null, null);
+        topologyTemplate.isResource = jest.fn(() => true);
+        topologyTemplate.isService = jest.fn(() => false );
+
+        const vlMock = Mock.of<Resource>({ resourceType : 'VL', isResource : () => true, isService : () => false });
+        fixture.componentInstance.store.select = jest.fn(() => Observable.of(vlMock));
+
+        fixture.componentInstance.topologyTemplate = topologyTemplate;
+
+        // Call ngOnInit
+        fixture.componentInstance.ngOnInit();
+
+        // Expect that
+        expect (fixture.componentInstance.tabs.length).toBe(5);
+        expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect (fixture.componentInstance.tabs[1]).toEqual(tabs.deploymentArtifacts);
+        expect (fixture.componentInstance.tabs[2]).toEqual(tabs.properties);
+        expect (fixture.componentInstance.tabs[3]).toEqual(tabs.infoArtifacts);
+        expect (fixture.componentInstance.tabs[4]).toEqual(tabs.reqAndCapabilities);
+
+    });
+
+    it('When GroupInstance Selected => Expect (info, groupMembers and groupProperties) tabs appear.', () => {
+
+        const testInstance = new GroupInstance();
+        fixture.componentInstance.initTabs(testInstance);
+
+        expect (fixture.componentInstance.tabs.length).toBe(3);
+        expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect (fixture.componentInstance.tabs[1]).toEqual(tabs.groupMembers);
+        expect (fixture.componentInstance.tabs[2]).toEqual(tabs.groupProperties);
+    });
+
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
new file mode 100644
index 0000000000..c5ea41bcd1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
@@ -0,0 +1,171 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Component, HostBinding, Input } from '@angular/core';
+import { Select, Store } from '@ngxs/store';
+import { Component as TopologyTemplate, ComponentInstance, FullComponentInstance, GroupInstance, PolicyInstance, Resource, Service } from 'app/models';
+import { ArtifactsTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component';
+import { GroupMembersTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component';
+import { GroupOrPolicyPropertiesTab } from 'app/ng2/pages/composition/panel/panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component';
+import { InfoTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component';
+import { PolicyTargetsTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component';
+import { PropertiesTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component';
+import { ReqAndCapabilitiesTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component';
+import { ComponentType, ResourceType } from 'app/utils';
+import * as _ from 'lodash';
+import { Subscription } from 'rxjs';
+import { Observable } from 'rxjs/Observable';
+import { ArtifactGroupType, COMPONENT_FIELDS } from '../../../../utils/constants';
+import { WorkspaceState } from '../../../store/states/workspace.state';
+import { OnSidebarOpenOrCloseAction } from '../common/store/graph.actions';
+import { CompositionStateModel, GraphState } from '../common/store/graph.state';
+import { ServiceConsumptionTabComponent } from './panel-tabs/service-consumption-tab/service-consumption-tab.component';
+import { ServiceDependenciesTabComponent } from './panel-tabs/service-dependencies-tab/service-dependencies-tab.component';
+
+const tabs = {
+    infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'},
+    policyProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'policy'}, isActive: false, tooltipText: 'Properties'},
+    policyTargets: {titleIcon: 'inputs-o', component: PolicyTargetsTabComponent, input: {}, isActive: false, tooltipText: 'Targets'},
+    groupMembers: {titleIcon: 'inputs-o', component: GroupMembersTabComponent, input: {}, isActive: false, tooltipText: 'Members'},
+    groupProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'group'}, isActive: false, tooltipText: 'Properties'},
+    deploymentArtifacts: {titleIcon: 'deployment-artifacts-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.DEPLOYMENT}, isActive: false, tooltipText: 'Deployment Artifacts'},
+    apiArtifacts: {titleIcon: 'api-o', component: ArtifactsTabComponent, input: { type:  ArtifactGroupType.SERVICE_API}, isActive: false, tooltipText: 'API Artifacts'},
+    infoArtifacts: {titleIcon: 'info-square-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.INFORMATION}, isActive: false, tooltipText: 'Information Artifacts'},
+    properties: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties'},
+    reqAndCapabilities : { titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {}, isActive: false, tooltipText: 'Requirements and Capabilities'},
+    inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'},
+    settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'},
+    consumption: {titleIcon: 'api-o', component: ServiceConsumptionTabComponent, input: {title: 'OPERATION CONSUMPTION'}, isActive: false, tooltipText: 'Service Consumption'},
+    dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'SERVICE DEPENDENCIES'}, isActive: false, tooltipText: 'Service Dependencies'}
+};
+
+@Component({
+    selector: 'ng2-composition-panel',
+    templateUrl: './composition-panel.component.html',
+    styleUrls: ['./composition-panel.component.less', './panel-tabs/panel-tabs.less'],
+})
+export class CompositionPanelComponent {
+
+    @Input() topologyTemplate: TopologyTemplate;
+    @HostBinding('class') classes = 'component-details-panel';
+    @Select(GraphState) compositionState$: Observable<CompositionStateModel>;
+    @Select(GraphState.withSidebar) withSidebar$: boolean;
+    @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
+    tabs: any[];
+    subscription: Subscription;
+
+    private selectedComponent;
+
+    constructor(public store: Store) {
+    }
+
+    ngOnInit() {
+        this.subscription = this.store.select(GraphState.getSelectedComponent).subscribe((component) => {
+            this.selectedComponent = component;
+            this.initTabs(component);
+            this.activatePreviousActiveTab();
+        });
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+    public setActive = (tabToSelect) => {
+        this.tabs.map((tab) => tab.isActive = (tab.titleIcon === tabToSelect.titleIcon) ? true : false);
+    }
+
+    public activatePreviousActiveTab = () => { // sets the info tab to active if no other tab selected
+
+        this.setActive(this.tabs.find((tab) => tab.isActive) || tabs.infoTab);
+
+    }
+
+    private initTabs = (component) => {
+        this.tabs = [];
+
+        // Information
+        this.tabs.push(tabs.infoTab);
+
+        if (component instanceof PolicyInstance) {
+            this.tabs.push(tabs.policyTargets);
+            this.tabs.push(tabs.policyProperties);
+            return;
+        }
+
+        if (component instanceof GroupInstance) {
+            this.tabs.push(tabs.groupMembers);
+            this.tabs.push(tabs.groupProperties);
+            return;
+        }
+
+        // Deployment artifacts
+        if (!this.isPNF() && !this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance()) {
+            this.tabs.push(tabs.deploymentArtifacts);
+        }
+
+        // Properties or Inputs
+        if (component.isResource() || this.selectedComponentIsServiceProxyInstance()) {
+            this.tabs.push(tabs.properties);
+        } else {
+            this.tabs.push(tabs.inputs);
+        }
+
+        if (!this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance()) {
+            this.tabs.push(tabs.infoArtifacts);
+        }
+
+        if (!(component.isService()) || this.selectedComponentIsServiceProxyInstance()) {
+            this.tabs.push(tabs.reqAndCapabilities);
+        }
+
+        if (component.isService() && !this.selectedComponentIsServiceProxyInstance()) {
+            this.tabs.push(tabs.apiArtifacts);
+        }
+        if (component.isService() && this.selectedComponentIsServiceProxyInstance()) {
+            this.tabs.push(tabs.consumption);
+            this.tabs.push(tabs.dependencies);
+        }
+
+    }
+
+    private toggleSidebarDisplay = () => {
+        // this.withSidebar = !this.withSidebar;
+        this.store.dispatch(new OnSidebarOpenOrCloseAction());
+    }
+
+    private isPNF = (): boolean => {
+        return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.PNF;
+    }
+
+    private isConfiguration = (): boolean => {
+        return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.CONFIGURATION;
+    }
+
+    private isComponentInstanceSelected = (): boolean => {
+        return this.selectedComponent instanceof FullComponentInstance;
+    }
+
+    private selectedComponentIsServiceProxyInstance = (): boolean => {
+        return this.isComponentInstanceSelected() && this.selectedComponent.isServiceProxy();
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.module.ts
new file mode 100644
index 0000000000..0fd1e51fa5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.module.ts
@@ -0,0 +1,106 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { BrowserModule } from "@angular/platform-browser";
+import { CompositionPanelComponent } from "./composition-panel.component";
+import { CompositionPanelHeaderModule } from "app/ng2/pages/composition/panel/panel-header/panel-header.module";
+import { SdcUiComponentsModule, SdcUiServices } from "onap-ui-angular";
+// import { SdcUiServices } from "onap-ui-angular/";
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { AddElementsModule } from "../../../components/ui/modal/add-elements/add-elements.module";
+import { TranslateModule } from "app/ng2/shared/translator/translate.module";
+import { InfoTabComponent } from './panel-tabs/info-tab/info-tab.component';
+import { PanelTabComponent } from "app/ng2/pages/composition/panel/panel-tabs/panel-tab.component";
+import { ArtifactsTabComponent } from "app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component";
+import { PropertiesTabComponent } from "app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component";
+import { ReqAndCapabilitiesTabComponent } from "app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component";
+import { RequirementListComponent } from "app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component";
+import { PolicyTargetsTabComponent } from "app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component";
+import { GroupMembersTabComponent } from "app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component";
+import { GroupOrPolicyPropertiesTab } from "app/ng2/pages/composition/panel/panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component";
+import { GlobalPipesModule } from "app/ng2/pipes/global-pipes.module";
+import {ModalModule} from "../../../components/ui/modal/modal.module";
+import {EnvParamsComponent} from "../../../components/forms/env-params/env-params.component";
+import {ModalsModule} from "../../../components/modals/modals.module";
+// import {EnvParamsModule} from "../../../components/forms/env-params/env-params.module";
+import { NgxDatatableModule } from "@swimlane/ngx-datatable";
+import {EnvParamsModule} from "../../../components/forms/env-params/env-params.module";
+import { ServiceConsumptionTabComponent } from "./panel-tabs/service-consumption-tab/service-consumption-tab.component";
+import { ServiceDependenciesTabComponent } from "./panel-tabs/service-dependencies-tab/service-dependencies-tab.component";
+import { ServiceDependenciesModule } from "../../../components/logic/service-dependencies/service-dependencies.module";
+import { ServiceConsumptionModule } from "../../../components/logic/service-consumption/service-consumption.module";
+
+
+
+@NgModule({
+    declarations: [
+        CompositionPanelComponent,
+        PolicyTargetsTabComponent,
+        GroupOrPolicyPropertiesTab,
+        GroupMembersTabComponent,
+        InfoTabComponent,
+        PanelTabComponent,
+        ArtifactsTabComponent,
+        PropertiesTabComponent,
+        ReqAndCapabilitiesTabComponent,
+        ServiceConsumptionTabComponent,
+        ServiceDependenciesTabComponent,
+        RequirementListComponent,
+        EnvParamsComponent
+    ],
+    imports: [
+        GlobalPipesModule,
+        BrowserModule,
+        FormsModule,
+        CompositionPanelHeaderModule,
+        SdcUiComponentsModule,
+        UiElementsModule,
+        AddElementsModule,
+        TranslateModule,
+        NgxDatatableModule,
+        ServiceDependenciesModule,
+        ServiceConsumptionModule
+        // EnvParamsModule
+    ],
+    entryComponents: [
+        CompositionPanelComponent,
+        PolicyTargetsTabComponent,
+        GroupOrPolicyPropertiesTab,
+        GroupMembersTabComponent,
+        InfoTabComponent,
+        ArtifactsTabComponent,
+        PropertiesTabComponent,
+        ReqAndCapabilitiesTabComponent,
+        ServiceConsumptionTabComponent,
+        ServiceDependenciesTabComponent,
+        RequirementListComponent,
+        PanelTabComponent,
+        EnvParamsComponent
+        ],
+    exports: [
+        CompositionPanelComponent
+        // EnvParamsModule
+    ],
+    providers: [SdcUiServices.ModalService]
+})
+export class CompositionPanelModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.html
index 75ee2d520f..75ee2d520f 100644
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.html
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.less
index b958ca17b7..b958ca17b7 100644
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.ts
index 08bc0586c7..9c4aab206e 100644
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.ts
@@ -1,11 +1,11 @@
 import { Component, Input } from "@angular/core";
 
 @Component({
-    selector: 'value-edit',
-    templateUrl: './value-edit.component.html',
-    styleUrls: ['./value-edit.component.less']
+    selector: 'edit-name-modal',
+    templateUrl: './edit-name-modal.component.html',
+    styleUrls: ['./edit-name-modal.component.less']
 })
-export class ValueEditComponent {
+export class EditNameModalComponent {
 
     @Input() name:String;
     @Input() validityChangedCallback: Function;
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
index 67c82389cc..d9c56198ea 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
@@ -1,30 +1,23 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<div class="component-details-panel-header" data-tests-id="w-sdc-designer-sidebar-head">
-    
+<div *ngIf="selectedComponent" class="component-details-panel-header" data-tests-id="w-sdc-designer-sidebar-head">
     <div class="icon">
-        <div class="large {{iconClassName}}">
-            <div [ngClass]="{'non-certified': nonCertified}" tooltip="Not certified"></div>
-        </div>
+        <div *ngIf="iconClassName; else svgIcon" class="large {{iconClassName}}"></div>
+        <ng-template #svgIcon>
+            <sdc-element-icon
+                    [elementType]="selectedComponent.componentType === 'RESOURCE' ? selectedComponent.resourceType: (selectedComponent.originType || selectedComponent.componentType)"
+                    [iconName]="selectedComponent.icon"
+                    [uncertified]="!isTopologyTemplateSelected && selectedComponent.lifecycleState && 'CERTIFIED' !== selectedComponent.lifecycleState"></sdc-element-icon>
+        </ng-template>
     </div>
 
-    <div class="title" data-tests-id="selectedCompTitle" tooltip="&#8203;{{name}}">{{name}}</div>
+    <div class="title" data-tests-id="selectedCompTitle" tooltip="&#8203;{{selectedComponent.name}}">
+        {{selectedComponent.name}}
+    </div>
+
+    <svg-icon-label *ngIf="!isViewOnly && !isTopologyTemplateSelected && !selectedComponent.archived" name="edit-file-o"
+                    clickable="true" size="small" class="rename-instance" data-tests-id="renameInstance"
+                    (click)="renameInstance()"></svg-icon-label>
+    <svg-icon-label *ngIf="!isViewOnly && !isTopologyTemplateSelected && !selectedComponent.archived" name="trash-o"
+                    clickable="true" size="small" class="delete-instance" data-tests-id="deleteInstance"
+                    (click)="deleteInstance()"></svg-icon-label>
 
-    <svg-icon-label *ngIf="!isViewOnly" name="edit-file-o" clickable="true" size="small" class="rename-instance" data-tests-id="renameInstance" (click)="renameInstance()"></svg-icon-label>
-    <svg-icon-label *ngIf="!isViewOnly" name="trash-o" clickable="true" size="small" class="delete-instance" data-tests-id="deleteInstance" (click)="deleteInstance()"></svg-icon-label>
-    
 </div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
index 9bbc765761..6685f74009 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
@@ -7,6 +7,7 @@
 
     .icon {
         margin: 0 20px;
+        display:flex;
     }
 
     .title {
@@ -31,4 +32,17 @@
         cursor: pointer;
     }
 
+
+    .non-certified {
+        position: absolute;
+        background-image: url('../../../../../../assets/styles/images/sprites/sprite-global-old.png');
+        background-position: -157px -3386px; width: 15px; height: 15px;
+    
+        &.smaller-icon {
+            left: 35px;
+            bottom: -14px;
+        }
+    }
+    
+    
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.spec.ts
new file mode 100644
index 0000000000..76e84a2323
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.spec.ts
@@ -0,0 +1,123 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CompositionService } from 'app/ng2/pages/composition/composition.service';
+import { EventListenerService } from '../../../../../services/event-listener-service';
+import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service';
+import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
+import { GroupsService } from 'app/services-ng2';
+import { PoliciesService } from 'app/services-ng2';
+import { CompositionPanelHeaderComponent } from './panel-header.component';
+import {SdcUiServices} from 'onap-ui-angular';
+import { Capability, Requirement, RequirementsGroup, CapabilitiesGroup, ComponentInstance, Component, FullComponentInstance, PolicyInstance, GroupInstance } from "app/models";
+import { of, Observable } from "rxjs";
+
+describe('CompositionPanelHeaderComponent', () => {
+  let component: CompositionPanelHeaderComponent;
+  let fixture: ComponentFixture<CompositionPanelHeaderComponent>;
+  const componentInstanceServiceNg2Stub = {
+    updateComponentInstance: jest.fn()
+  };
+  const valueEditModalInstance = {
+    innerModalContent : {
+      instance: { name : "VF Test" }
+    },
+    buttons: [{id: 'saveButton', text: 'OK', size: 'xsm', callback: jest.fn(), closeModal: false}],
+    closeModal : jest.fn()
+  };
+
+  beforeEach(
+    () => {
+      const compositionServiceStub = {};
+      const eventListenerServiceStub = {};
+
+      const workspaceServiceStub = {
+        metadata: {
+          componentType: "SERVICE",
+          uniqueId: "123"
+        }
+      };
+      const groupsServiceStub = {
+        updateName: jest.fn()
+      };
+      const policiesServiceStub = {
+        updateName: jest.fn()
+      };
+
+      TestBed.configureTestingModule({
+        schemas: [NO_ERRORS_SCHEMA],
+        declarations: [CompositionPanelHeaderComponent],
+        providers: [
+          { provide: CompositionService, useValue: compositionServiceStub },
+          { provide: EventListenerService, useValue: eventListenerServiceStub },
+          {
+            provide: ComponentInstanceServiceNg2,
+            useValue: componentInstanceServiceNg2Stub
+          },
+          { provide: WorkspaceService, useValue: workspaceServiceStub },
+          { provide: GroupsService, useValue: groupsServiceStub },
+          { provide: PoliciesService, useValue: policiesServiceStub },
+          { provide: SdcUiServices.ModalService, useValue: {}}
+        ]
+      });
+      fixture = TestBed.createComponent(CompositionPanelHeaderComponent);
+      component = fixture.componentInstance;
+    }
+  );
+
+  it('can load instance', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should close the modal without saving if the name has not changed', () => {
+    component.selectedComponent = <FullComponentInstance>{name: "VF Test"};
+    component.valueEditModalInstance = valueEditModalInstance;
+
+    component.saveInstanceName();
+    expect(component.componentInstanceService.updateComponentInstance).not.toHaveBeenCalled();
+    expect(component.valueEditModalInstance.closeModal).toHaveBeenCalled();
+  });
+
+  it('after editing instance name, capabilities/requirements should be updated with new name', () => {
+    const newName = "New VF NAME";
+    component.selectedComponent = new FullComponentInstance(<ComponentInstance>{
+      name: "VF Test",
+      requirements: <RequirementsGroup>{"key": [<Requirement>{ownerName: "VF Test"}, <Requirement>{ownerName: "VF Test"}]},
+      capabilities: new CapabilitiesGroup()
+    }, <Component>{});
+    component.selectedComponent.capabilities['key'] =  [<Capability>{ownerName: "VF Test"}];      
+    component.valueEditModalInstance = valueEditModalInstance;
+    component.valueEditModalInstance.innerModalContent.instance.name = newName;
+    jest.spyOn(component.componentInstanceService, 'updateComponentInstance').mockReturnValue(of(<ComponentInstance>{name: newName}));
+    component.saveInstanceName();
+    
+    expect(component.selectedComponent.name).toBe(newName);
+    expect(component.selectedComponent.requirements['key'][0].ownerName).toEqual(newName);
+    expect(component.selectedComponent.requirements['key'][1].ownerName).toEqual(newName);
+    expect(component.selectedComponent.capabilities['key'][0].ownerName).toEqual(newName);
+  });
+
+  it('if update fails, name is reverted to old value', () => { 
+    component.selectedComponent = new GroupInstance(<GroupInstance>{name: "GROUP NAME"});
+    component.valueEditModalInstance = valueEditModalInstance;
+    jest.spyOn(component.groupService, 'updateName').mockReturnValue(Observable.throw(new Error('Error')));
+    component.saveInstanceName();
+    expect(component.selectedComponent.name).toEqual("GROUP NAME");
+  });
+
+  it('policy instance uses policies service for update name', () => { 
+    component.selectedComponent = new PolicyInstance(<PolicyInstance>{name: "Policy OLD NAME"});
+    component.valueEditModalInstance = valueEditModalInstance;
+    jest.spyOn(component.policiesService, 'updateName').mockReturnValue(of(true));
+    component.saveInstanceName();
+    expect(component.policiesService.updateName).toHaveBeenCalledTimes(1);
+  });
+
+  it('group instance uses groups service for update name', () => { 
+    component.selectedComponent = new GroupInstance(<GroupInstance>{name: "GROUP NAME"});
+    component.valueEditModalInstance = valueEditModalInstance;
+    jest.spyOn(component.groupService, 'updateName').mockReturnValue(of(true));
+    component.saveInstanceName();
+    expect(component.groupService.updateName).toHaveBeenCalledTimes(1);
+  });
+
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
index ab659a3b8f..90a98147e9 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
@@ -18,64 +18,70 @@
  * ============LICENSE_END=========================================================
  */
 
-import { Component,  Input,  AfterViewInit, SimpleChanges, OnInit, OnChanges } from "@angular/core";
-import {  SdcUiComponents } from "sdc-ui/lib/angular";
-import { IModalConfig } from 'sdc-ui/lib/angular/modals/models/modal-config';
-import { ZoneInstanceType } from 'app/models/graph/zones/zone-instance';
-import { ValueEditComponent } from './../../../../components/ui/forms/value-edit/value-edit.component';
-import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
-import { PoliciesService } from '../../../../services/policies.service';
-import { GroupsService } from '../../../../services/groups.service';
-import {IZoneService} from "../../../../../models/graph/zones/zone";
-import { EventListenerService, LoaderService } from "../../../../../services";
-import { GRAPH_EVENTS, EVENTS } from "../../../../../utils";
+import { Component, Input, OnInit } from "@angular/core";
+import { SdcUiComponents, SdcUiCommon, SdcUiServices } from "onap-ui-angular";
+import { EditNameModalComponent } from "app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component";
+import {Component as TopologyTemplate, FullComponentInstance, GroupInstance, PolicyInstance, Requirement, Capability, ComponentInstance} from "app/models";
+import { Select } from "@ngxs/store";
+import { Observable } from "rxjs/Observable";
+import { Subscription } from "rxjs";
+import {GRAPH_EVENTS} from "../../../../../utils/constants";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import {EventListenerService} from "../../../../../services/event-listener-service";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { GroupsService, PoliciesService } from "app/services-ng2";
 import { UIZoneInstanceObject } from "../../../../../models/ui-models/ui-zone-instance-object";
-import { ModalButtonComponent } from "sdc-ui/lib/angular/components";
+import {SelectedComponentType} from "../../common/store/graph.actions";
+import * as _ from 'lodash';
+import {GraphState} from "../../common/store/graph.state";
+
 
 @Component({
     selector: 'ng2-composition-panel-header',
     templateUrl: './panel-header.component.html',
     styleUrls: ['./panel-header.component.less']
 })
-export class CompositionPanelHeaderComponent implements OnInit, OnChanges {
-
-    @Input() topologyTemplate: TopologyTemplate;
-    @Input() selectedZoneInstanceType: ZoneInstanceType;
-    @Input() selectedZoneInstanceId: string;
-    @Input() name: string;
-    @Input() nonCertified: boolean;
+export class CompositionPanelHeaderComponent implements OnInit {
     @Input() isViewOnly: boolean;
-    @Input() isLoading: boolean;
+    @Input() selectedComponent: FullComponentInstance | TopologyTemplate | GroupInstance | PolicyInstance;
+    @Select(GraphState.getSelectedComponentType) selectedComponentType$:Observable<SelectedComponentType>;
+
 
-    constructor(private groupsService:GroupsService, private policiesService: PoliciesService, 
-                private modalService:SdcUiComponents.ModalService, private eventListenerService:EventListenerService) { }
+    constructor(private modalService: SdcUiServices.ModalService,
+                private groupService: GroupsService,
+                private policiesService: PoliciesService,
+                private eventListenerService: EventListenerService,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService,
+                private componentInstanceService: ComponentInstanceServiceNg2) { }
 
-    private service:IZoneService;
     private iconClassName: string;
+    private valueEditModalInstance: SdcUiComponents.ModalComponent;
+    private isTopologyTemplateSelected: boolean;
+    private componentTypeSubscription: Subscription;
 
     ngOnInit(): void {
-        this.init();
-    }
+        this.componentTypeSubscription = this.selectedComponentType$.subscribe((newComponentType) => {
 
-    ngOnChanges (changes:SimpleChanges):void {
-        if(changes.selectedZoneInstanceId){
-            this.init();
-        }
+            this.initClasses(newComponentType);
+            this.isTopologyTemplateSelected = (newComponentType === SelectedComponentType.TOPOLOGY_TEMPLATE) ? true : false;
+        });
     }
 
     ngOnDestroy() {
-        
-        
+        if(this.componentTypeSubscription) {
+            this.componentTypeSubscription.unsubscribe();
+        }
     }
-    private init = (): void => {
-        if (this.selectedZoneInstanceType === ZoneInstanceType.POLICY) {
+
+    private initClasses = (componentType:SelectedComponentType): void => {
+        if (componentType === SelectedComponentType.POLICY) {
             this.iconClassName = "sprite-policy-icons policy";
-            this.service = this.policiesService;
-        } else if (this.selectedZoneInstanceType === ZoneInstanceType.GROUP) {
+        } else if (componentType === SelectedComponentType.GROUP) {
             this.iconClassName = "sprite-group-icons group";
-            this.service = this.groupsService;
         } else {
-            this.iconClassName = "sprite-resource-icons defaulticon";
+            this.iconClassName = undefined;
         }
     }
 
@@ -83,53 +89,95 @@ export class CompositionPanelHeaderComponent implements OnInit, OnChanges {
         const modalConfig = {
             title: "Edit Name",
             size: "sm",
-            type: "custom",
+            type: SdcUiCommon.ModalType.custom,
             testId: "renameInstanceModal",
             buttons: [
                 {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false},
-                {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true} 
-            ] as ModalButtonComponent[]
-        } as IModalConfig;
-        this.modalService.openCustomModal(modalConfig, ValueEditComponent, {name: this.name, validityChangedCallback: this.enableOrDisableSaveButton});
+                {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true}
+            ] as SdcUiCommon.IModalButtonComponent[]
+        } as SdcUiCommon.IModalConfig;
+        this.valueEditModalInstance = this.modalService.openCustomModal(modalConfig, EditNameModalComponent, {name: this.selectedComponent.name, validityChangedCallback: this.enableOrDisableSaveButton});
     };
 
     private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
-        let saveButton: ModalButtonComponent = this.modalService.getCurrentInstance().getButtonById('saveButton');
+        let saveButton: SdcUiComponents.ModalButtonComponent = this.valueEditModalInstance.getButtonById('saveButton');
         saveButton.disabled = !shouldEnable;
     }
 
     private saveInstanceName = ():void => {
-        let currentModal = this.modalService.getCurrentInstance();
-        let nameFromModal:string = currentModal.innerModalContent.instance.name;
-
-        if(nameFromModal != this.name){
-            currentModal.buttons[0].disabled = true;
-            this.service.updateName(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId, nameFromModal).subscribe((success)=>{
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, nameFromModal);
-                this.modalService.closeModal();
-            }, (error)=> {
-                currentModal.buttons[0].disabled = false;
-            });
-        } else {
-            this.modalService.closeModal();
+        let nameFromModal:string = this.valueEditModalInstance.innerModalContent.instance.name;
+
+        if(nameFromModal != this.selectedComponent.name){
+            let oldName = this.selectedComponent.name;
+            this.selectedComponent.name = nameFromModal;
+            this.valueEditModalInstance.buttons[0].disabled = true;
+
+            let onFailed = (error) => { 
+                this.selectedComponent.name = oldName;
+                this.valueEditModalInstance.buttons[0].disabled = false;
+            };
+
+            if(this.selectedComponent instanceof FullComponentInstance){
+                let onSuccess = (componentInstance:ComponentInstance) => {
+                    //update requirements and capabilities owner name
+                    _.forEach((<FullComponentInstance>this.selectedComponent).requirements, (requirementsArray:Array<Requirement>) => {
+                        _.forEach(requirementsArray, (requirement:Requirement):void => {
+                            requirement.ownerName = componentInstance.name;
+                        });
+                    });
+
+                    _.forEach((<FullComponentInstance>this.selectedComponent).capabilities, (capabilitiesArray:Array<Capability>) => {
+                        _.forEach(capabilitiesArray, (capability:Capability):void => {
+                            capability.ownerName = componentInstance.name;
+                        });
+                    });
+                    this.valueEditModalInstance.closeModal();
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.selectedComponent);
+                };
+
+                this.componentInstanceService.updateComponentInstance(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, new ComponentInstance(this.selectedComponent))
+                    .subscribe(onSuccess, onFailed);
+            } else if (this.selectedComponent instanceof PolicyInstance) {
+                this.policiesService.updateName(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId, nameFromModal).subscribe((success)=>{
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.selectedComponent);
+                    this.valueEditModalInstance.closeModal();
+                }, onFailed);
+            } else if (this.selectedComponent instanceof GroupInstance){
+                this.groupService.updateName(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId, nameFromModal).subscribe((success)=>{
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.selectedComponent);
+                    this.valueEditModalInstance.closeModal();
+                }, onFailed);
+            }
+        }  else {
+            this.valueEditModalInstance.closeModal();
         }
     };
-    
+
     private deleteInstance = (): void => {
         let title:string = "Delete Confirmation";
-        let message:string = "Are you sure you would like to delete "+ this.name + "?";
-        this.modalService.openAlertModal(title, message, "OK", this.deleteInstanceConfirmed, "deleteInstanceModal");
+        let message:string = "Are you sure you would like to delete "+ this.selectedComponent.name + "?";
+        const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.warning, callback: this.deleteInstanceConfirmed, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+        this.modalService.openWarningModal(title, message, "delete-modal", [okButton]);
     };
 
-    private deleteInstanceConfirmed = () => {
-        this.eventListenerService.notifyObservers(EVENTS.SHOW_LOADER_EVENT + 'composition-graph');
-        this.service.deleteZoneInstance(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId).finally(()=> {
-            this.eventListenerService.notifyObservers(EVENTS.HIDE_LOADER_EVENT + 'composition-graph');
-        }).subscribe(()=> {
-            let deletedItem:UIZoneInstanceObject = new UIZoneInstanceObject(this.selectedZoneInstanceId, this.selectedZoneInstanceType, this.name);
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, deletedItem);
-        });
-    };
+    private deleteInstanceConfirmed: Function = () => {
+        if(this.selectedComponent instanceof FullComponentInstance){
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE , this.selectedComponent.uniqueId);
+        }
+        else if(this.selectedComponent instanceof PolicyInstance){
+            this.policiesService.deletePolicy(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId).subscribe((success)=>{
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE ,
+                    new UIZoneInstanceObject(this.selectedComponent.uniqueId, 1));
+            }, (err) => {});
+
+        }
+        else if(this.selectedComponent instanceof GroupInstance){
+            this.groupService.deleteGroup(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId).subscribe((success)=>{
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE ,
+                    new UIZoneInstanceObject(this.selectedComponent.uniqueId, 0));
+            }, (err) => {});
 
+        }
+    };
 }
 
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
index bde0a14669..a11bc99fee 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
@@ -18,29 +18,26 @@
  * ============LICENSE_END=========================================================
  */
 import { NgModule } from "@angular/core";
-import { HttpModule } from "@angular/http";
 import { FormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { CompositionPanelHeaderComponent } from "./panel-header.component";
 import { UiElementsModule } from './../../../../components/ui/ui-elements.module';
-import { ValueEditComponent } from './../../../../components/ui/forms/value-edit/value-edit.component';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { ModalFormsModule } from "app/ng2/components/ui/forms/modal-forms.module";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { EditNameModalComponent } from "app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component";
 
 @NgModule({
     declarations: [
-        CompositionPanelHeaderComponent
+        CompositionPanelHeaderComponent,
+        EditNameModalComponent
     ],
     imports: [
         BrowserModule,
         FormsModule,
-        HttpModule,
         UiElementsModule,
-        SdcUiComponentsModule,
-        ModalFormsModule
+        SdcUiComponentsModule
     ],
     entryComponents: [
-        CompositionPanelHeaderComponent, ValueEditComponent
+        CompositionPanelHeaderComponent, EditNameModalComponent
     ],
     exports: [
         CompositionPanelHeaderComponent
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/__snapshots__/artifact-tab.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/__snapshots__/artifact-tab.component.spec.ts.snap
new file mode 100644
index 0000000000..c143e8106b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/__snapshots__/artifact-tab.component.spec.ts.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`artifact-tab component should match current snapshot of artifact-tab component 1`] = `
+<artifacts-tab
+  addOrUpdate={[Function Function]}
+  allowDeleteAndUpdateArtifact={[Function Function]}
+  artifactService={[Function Object]}
+  componentInstanceService="undefined"
+  compositionService={[Function Object]}
+  delete={[Function Function]}
+  getEnvArtifact={[Function Function]}
+  getTitle={[Function Function]}
+  heatToEnv={[Function Map]}
+  isLicenseArtifact={[Function Function]}
+  loadArtifacts={[Function Function]}
+  store={[Function Store]}
+  topologyTemplateService="undefined"
+  updateEnvParams={[Function Function]}
+  viewEnvParams={[Function Function]}
+  workspaceService="undefined"
+>
+  <div
+    class="w-sdc-designer-sidebar-tab-content artifacts"
+  >
+    <div
+      class="w-sdc-designer-sidebar-section"
+    >
+      <ng2-expand-collapse
+        state="0"
+      >
+        <header
+          sdc-tooltip=""
+        >
+          
+        </header>
+        <content
+          class="artifacts-container"
+        >
+          <div
+            class="w-sdc-designer-sidebar-section-content"
+          >
+            
+          </div>
+          
+        </content>
+      </ng2-expand-collapse>
+    </div>
+  </div>
+</artifacts-tab>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifact-tab.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifact-tab.component.spec.ts
new file mode 100644
index 0000000000..258f2295ab
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifact-tab.component.spec.ts
@@ -0,0 +1,303 @@
+import { async, ComponentFixture } from '@angular/core/testing';
+import { ConfigureFn, configureTests } from '../../../../../../../jest/test-config.helper';
+import { NgxsModule, Store } from '@ngxs/store';
+import { WorkspaceState } from '../../../../../store/states/workspace.state';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ArtifactsTabComponent } from './artifacts-tab.component';
+import { CompositionService } from '../../../composition.service';
+import { WorkspaceService } from '../../../../workspace/workspace.service';
+import { ComponentInstanceServiceNg2 } from '../../../../../services/component-instance-services/component-instance.service';
+import { TopologyTemplateService } from '../../../../../services/component-services/topology-template.service';
+import { ArtifactsService } from '../../../../../components/forms/artifacts-form/artifacts.service';
+import { ArtifactModel } from '../../../../../../models/artifacts';
+import { ArtifactType } from '../../../../../../utils/constants';
+import { FullComponentInstance } from '../../../../../../models/componentsInstances/fullComponentInstance';
+import { ComponentInstance } from '../../../../../../models/componentsInstances/componentInstance';
+import { Component } from '../../../../../../models/components/component';
+import { GetInstanceArtifactsByTypeAction } from '../../../../../store/actions/instance-artifacts.actions';
+import { Observable } from 'rxjs';
+
+
+describe('artifact-tab component', () => {
+
+    let fixture: ComponentFixture<ArtifactsTabComponent>;
+    let compositionMockService: Partial<CompositionService>;
+    const workspaceMockService: Partial<WorkspaceService>;
+    const componentInstanceMockService: Partial<ComponentInstanceServiceNg2>;
+    const topologyTemplateMockService: Partial<TopologyTemplateService>;
+    let artifactsServiceMockService: Partial<ArtifactsService>;
+    let store: Store;
+
+    beforeEach(
+        async(() => {
+            compositionMockService = {
+                updateInstance:  jest.fn()
+            }
+
+            artifactsServiceMockService = {
+                deleteArtifact: jest.fn(),
+                openUpdateEnvParams: jest.fn(),
+                openArtifactModal: jest.fn()
+            }
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [ArtifactsTabComponent],
+                    imports: [NgxsModule.forRoot([WorkspaceState])],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: CompositionService, useValue: compositionMockService},
+                        {provide: WorkspaceService, useValue: workspaceMockService},
+                        {provide: ComponentInstanceServiceNg2, useValue: componentInstanceMockService},
+                        {provide: TopologyTemplateService, useValue: topologyTemplateMockService},
+                        {provide: ArtifactsService, useValue: artifactsServiceMockService}
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(ArtifactsTabComponent);
+                store = testBed.get(Store);
+            });
+        })
+    );
+
+    it ('on delete -> deleteArtifact is being called from artifactService', () => {
+        const artifact = new ArtifactModel();
+        const topologyTemplateType: string = undefined;
+        const topologyTemplateId: string = undefined;
+
+        fixture.componentInstance.delete(artifact);
+        expect(artifactsServiceMockService.deleteArtifact).toHaveBeenCalledWith(topologyTemplateType, topologyTemplateId, artifact);
+    });
+
+    it('should match current snapshot of artifact-tab component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+
+    it ('should get API Artifacts as Title', () => {
+        const artifactType = ArtifactType.SERVICE_API;
+
+        const res = fixture.componentInstance.getTitle(artifactType);
+        expect(res).toBe('API Artifacts');
+    });
+
+
+    it ('should get Deployment Artifacts as Title', () => {
+        const artifactType = ArtifactType.DEPLOYMENT;
+
+        const res = fixture.componentInstance.getTitle(artifactType);
+        expect(res).toBe('Deployment Artifacts');
+    });
+
+    it ('should get Informational Artifacts as Title', () => {
+        const artifactType = ArtifactType.INFORMATION;
+
+        const res = fixture.componentInstance.getTitle(artifactType);
+        expect(res).toBe('Informational Artifacts');
+    });
+
+    it ('should get SomeString as Title - This is the default case (return the last val)', () => {
+        // So the last value will be "SomeString"
+        fixture.componentInstance.getTitle('SomeString');
+
+        const res = fixture.componentInstance.getTitle('SomeString');
+        expect(res).toBe('SomeString Artifacts');
+    });
+
+
+    it ('should return isLicenseArtifact false', () => {
+        const artifact = new ArtifactModel();
+        const componentInstance = new ComponentInstance();
+        const component = new Component();
+        fixture.componentInstance.component = new FullComponentInstance(componentInstance, component);
+
+        let res = fixture.componentInstance.isLicenseArtifact(artifact);
+        expect(res).toBe(false);
+    });
+
+    it ('should return isLicenseArtifact true', () => {
+        const artifact = new ArtifactModel();
+        const componentInstance = new ComponentInstance();
+        const component = new Component();
+        fixture.componentInstance.component = new FullComponentInstance(componentInstance, component);
+        fixture.componentInstance.component.isResource =  jest.fn(() => true);
+        fixture.componentInstance.component.isCsarComponent =  true;
+
+        artifact.artifactType = ArtifactType.VENDOR_LICENSE;
+        const res = fixture.componentInstance.isLicenseArtifact(artifact);
+        expect(res).toBe(true);
+    });
+
+    it ('should verify getEnvArtifact with match', () => {
+        const artifact = new ArtifactModel();
+        artifact.uniqueId = 'matchUniqueID';
+
+        const testItem1 = new ArtifactModel();
+        testItem1.generatedFromId = 'matchUniqueID';
+
+        const testItem2 = new ArtifactModel();
+        testItem2.generatedFromId = '123456';
+
+        const artifacts: ArtifactModel[] = [testItem1, testItem2];
+
+        const res = fixture.componentInstance.getEnvArtifact(artifact, artifacts);
+        expect(res.generatedFromId).toBe('matchUniqueID');
+    });
+
+    it ('should verify getEnvArtifact with no match', () => {
+        const artifact = new ArtifactModel();
+        artifact.uniqueId = 'matchUniqueID';
+
+        const testItem1 = new ArtifactModel();
+        testItem1.generatedFromId = '654321';
+
+        const testItem2 = new ArtifactModel();
+        testItem2.generatedFromId = '123456';
+
+        const artifacts: ArtifactModel[] = [testItem1, testItem2];
+
+        const res = fixture.componentInstance.getEnvArtifact(artifact, artifacts);
+        expect(res).toBe(undefined);
+    });
+
+    it ('on updateEnvParams -> openUpdateEnvParams is being called from artifactService when isComponentInstanceSelected = true', () => {
+        const artifact = new ArtifactModel();
+        artifact.envArtifact = new ArtifactModel();
+
+        const topologyTemplateType: string = undefined;
+        const topologyTemplateId: string = undefined;
+
+        const component = new Component();
+        component.uniqueId = 'id';
+
+        const isComponentInstanceSelected = true;
+
+        fixture.componentInstance.component = component;
+        fixture.componentInstance.isComponentInstanceSelected = isComponentInstanceSelected;
+        fixture.componentInstance.updateEnvParams(artifact);
+
+        expect(artifactsServiceMockService.openUpdateEnvParams).toHaveBeenCalledWith(topologyTemplateType, topologyTemplateId, undefined, component.uniqueId);
+    });
+
+    it ('on updateEnvParams -> openUpdateEnvParams is being called from artifactService when isComponentInstanceSelected = false', () => {
+        const artifact = new ArtifactModel();
+
+        const topologyTemplateType: string = undefined
+        const topologyTemplateId: string = undefined;
+
+        const component = new Component();
+
+        const isComponentInstanceSelected = false;
+
+        fixture.componentInstance.component = component;
+        fixture.componentInstance.isComponentInstanceSelected = isComponentInstanceSelected;
+        fixture.componentInstance.updateEnvParams(artifact);
+
+        expect(artifactsServiceMockService.openUpdateEnvParams).toHaveBeenCalledWith(topologyTemplateType, topologyTemplateId, artifact);
+    });
+
+    it ('on addOrUpdate -> openArtifactModal is being called from artifactService when isComponentInstanceSelected = true', () => {
+        const artifact = new ArtifactModel();
+
+        const topologyTemplateType: string = 'testType';
+        const topologyTemplateId: string = 'testID';
+        const type: string = 'testType';
+        const isViewOnly: boolean = false;
+
+        const component = new Component();
+        component.uniqueId = 'id';
+
+        const isComponentInstanceSelected = true;
+
+        fixture.componentInstance.component = component;
+        fixture.componentInstance.type = type;
+        fixture.componentInstance.topologyTemplateId = topologyTemplateId;
+        fixture.componentInstance.topologyTemplateType = topologyTemplateType;
+        fixture.componentInstance.isComponentInstanceSelected = isComponentInstanceSelected;
+        fixture.componentInstance.isViewOnly = isViewOnly;
+        fixture.componentInstance.addOrUpdate(artifact);
+
+
+        expect(artifactsServiceMockService.openArtifactModal).toHaveBeenCalledWith(topologyTemplateId, topologyTemplateType, artifact, type, isViewOnly, component.uniqueId);
+    });
+
+    it ('on addOrUpdate -> openArtifactModal is being called from artifactService when isComponentInstanceSelected = false', () => {
+        const artifact = new ArtifactModel();
+
+        const topologyTemplateType: string = 'testType';
+        const topologyTemplateId: string = 'testID';
+        const type: string = 'testType';
+        const isViewOnly: boolean = false;
+
+        const isComponentInstanceSelected = false;
+
+        fixture.componentInstance.type = type;
+        fixture.componentInstance.isComponentInstanceSelected = isComponentInstanceSelected;
+        fixture.componentInstance.topologyTemplateId = topologyTemplateId;
+        fixture.componentInstance.topologyTemplateType = topologyTemplateType;
+        fixture.componentInstance.isViewOnly = isViewOnly;
+        fixture.componentInstance.addOrUpdate(artifact);
+
+        expect(artifactsServiceMockService.openArtifactModal).toHaveBeenCalledWith(topologyTemplateId, topologyTemplateType, artifact, type, isViewOnly);
+    });
+
+
+    it ('verify allowDeleteAndUpdateArtifact return false since isViewOnly=true', () => {
+        const artifact = new ArtifactModel();
+        fixture.componentInstance.isViewOnly = true;
+
+        const res = fixture.componentInstance.allowDeleteAndUpdateArtifact(artifact);
+        expect(res).toBe(false)
+    });
+
+    it ('verify allowDeleteAndUpdateArtifact return artifact.isFromCsar since isViewOnly=false && artifactGroupType = DEPLOYMENT', () => {
+        const artifact = new ArtifactModel();
+        artifact.artifactGroupType = ArtifactType.DEPLOYMENT;
+        artifact.isFromCsar = false;
+
+        fixture.componentInstance.isViewOnly = false;
+
+        const res = fixture.componentInstance.allowDeleteAndUpdateArtifact(artifact);
+        expect(res).toBe(!artifact.isFromCsar);
+    });
+
+    it ('verify allowDeleteAndUpdateArtifact return !artifact.isHEAT() && !artifact.isThirdParty() &&' +
+        ' !this.isLicenseArtifact(artifact) since isViewOnly=false && artifactGroupType != DEPLOYMENT', () => {
+        const artifact = new ArtifactModel();
+        artifact.artifactGroupType = 'NOT_DEPLOYMENT';
+        artifact.isHEAT = () =>  false;
+        artifact.isThirdParty = () =>  false;
+
+        fixture.componentInstance.isLicenseArtifact = jest.fn(() => false);
+
+        fixture.componentInstance.isViewOnly = false;
+
+        const res = fixture.componentInstance.allowDeleteAndUpdateArtifact(artifact);
+        expect(res).toBe(true )
+    });
+
+    it('verify action on loadArtifacts in case isComponentInstanceSelected = true', () => {
+        fixture.componentInstance.isComponentInstanceSelected = true;
+        fixture.componentInstance.topologyTemplateType = 'topologyTemplateType';
+        fixture.componentInstance.topologyTemplateId = 'topologyTemplateId';
+        const component = new Component();
+        component.uniqueId = 'uniqueId';
+        fixture.componentInstance.component = component;
+        fixture.componentInstance.type = 'type';
+
+        const action = new GetInstanceArtifactsByTypeAction(({
+            componentType: 'topologyTemplateType',
+            componentId: 'topologyTemplateId',
+            instanceId: 'uniqueId',
+            artifactType: 'type'
+        }))
+
+        fixture.componentInstance.store.dispatch = jest.fn(() => Observable.of(true));
+        fixture.componentInstance.loadArtifacts();
+
+        expect(store.dispatch).toBeCalledWith(action);
+
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.html
new file mode 100644
index 0000000000..264444b674
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.html
@@ -0,0 +1,119 @@
+<div class="w-sdc-designer-sidebar-tab-content artifacts">
+    <div class="w-sdc-designer-sidebar-section">
+        <ng2-expand-collapse state="0">
+            <header sdc-tooltip tooltip-text="{{title}}">{{title}}</header>
+            <content class="artifacts-container">
+                <div class="w-sdc-designer-sidebar-section-content">
+                    <div class="i-sdc-designer-sidebar-section-content-item" *ngFor="let artifact of artifacts$ | async">
+                        <div class="i-sdc-designer-sidebar-section-content-item-artifact"
+                             *ngIf="(!isComponentInstanceSelected || artifact.esId) && 'HEAT_ENV' !== artifact.artifactType"
+                             attr.data-tests-id="'artifact-item-' + artifact.artifactDisplayName">
+                            <span *ngIf="artifact.heatParameters?.length"
+                                  class="i-sdc-designer-sidebar-section-content-item-file-link"></span>
+                            <div class="i-sdc-designer-sidebar-section-content-item-artifact-details"
+                                 [class.heat]="artifact.isHEAT() && artifact.heatParameters?.length">
+                                <div *ngIf="artifact.artifactName"
+                                     class="i-sdc-designer-sidebar-section-content-item-artifact-filename"
+                                     attr.data-tests-id="artifactName-{{artifact.artifactDisplayName}}"
+                                     sdc-tooltip tooltip-text="{{artifact.artifactName}}">{{artifact.artifactName}}
+                                </div>
+                                <div class="artifact-buttons-container upper-buttons">
+
+
+                                    <svg-icon
+                                            *ngIf="!isViewOnly && !artifact.isFromCsar && artifact.artifactName"
+                                            name="trash-o" clickable="true" size="medium" mode="info"
+                                            class="artifact-button" testId="delete_{{artifact.artifactDisplayName}}"
+                                            (click)="delete(artifact)"></svg-icon>
+
+                                    <!--Display env parameters edit button for Instance -->
+                                    <svg-icon
+                                            *ngIf="!isViewOnly  && artifact.isHEAT() && isComponentInstanceSelected && artifact.heatParameters?.length"
+                                            name="indesign_status" clickable="true" size="medium" mode="info"
+                                            class="artifact-button"
+                                            testId="edit-parameters-of-{{artifact.artifactDisplayName}}"
+                                            (click)="updateEnvParams(artifact)"
+                                            tooltip="Edit ENV Params"
+                                    ></svg-icon>
+
+                                    <!--Display env parameters VIEW button for Instance -->
+                                    <svg-icon
+                                            *ngIf="isViewOnly && artifact.isHEAT() && isComponentInstanceSelected && artifact.heatParameters?.length"
+                                            name="inputs-o" clickable="true" size="medium" mode="info"
+                                            class="artifact-button"
+                                            testId="view-parameters-of-{{artifact.artifactDisplayName}}"
+                                            (click)="viewEnvParams(artifact)"
+                                            tooltip="View ENV Params"
+                                    ></svg-icon>
+
+                                    <!--Display env parameters edit button for VF -->
+                                    <svg-icon
+                                            *ngIf = "!isViewOnly && !isComponentInstanceSelected && artifact.heatParameters?.length"
+                                            name="indesign_status" clickable="true" size="medium" mode="info"
+                                            class="artifact-button"
+                                            testId="edit-parameters-of-{{artifact.artifactDisplayName}}"
+                                            (click)="updateEnvParams(artifact)"></svg-icon>
+
+
+                                    <download-artifact *ngIf="artifact.esId && 'deployment' != type"
+                                                       class="artifact-button"
+                                                       [artifact]="artifact" [componentType]="component.componentType"
+                                                       [componentId]="component.uniqueId"
+                                                       testId="download_{{artifact.artifactDisplayName}}"
+                                                       [isInstance]="isComponentInstanceSelected"></download-artifact>
+                                    <download-artifact *ngIf="artifact.esId && 'deployment' == type"
+                                                       class="artifact-button"
+                                                       [artifact]="artifact" [componentType]="component.componentType"
+                                                       [componentId]="component.uniqueId"
+                                                       [isInstance]="isComponentInstanceSelected"
+                                                       testId="download_{{artifact.artifactDisplayName}}"
+                                                       [showLoader]="artifact.isHEAT()"></download-artifact>
+
+                                    <button *ngIf="!isViewOnly && !artifact.esId && type==='deployment' && !isComponentInstanceSelected && !artifact.isThirdParty()"
+                                            class="artifact-button attach sprite e-sdc-small-icon-upload"
+                                            (click)="addOrUpdate(artifact)" type="button"
+                                            attr.data-tests-id="add_Artifact"></button>
+                                </div>
+                                <div>
+                                <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-name"
+                                      attr.data-tests-id="artifact_Display_Name-{{artifact.artifactDisplayName}}"
+                                      [ngClass]="{'hand enabled': artifact.allowDeleteAndUpdate}"
+                                      (click)="artifact.allowDeleteAndUpdate && addOrUpdate(artifact)"
+                                      sdc-tooltip tooltip-text="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span>
+                                    <div class="i-sdc-designer-sidebar-section-content-item-artifact-heat-env"
+                                         *ngIf="artifact.heatParameters?.length">
+                                        <span attr.data-tests-id="heat_env_{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}} (ENV)</span>
+                                        <div class="artifact-buttons-container">
+                                            <svg-icon *ngIf="!isViewOnly && envArtifactOf(artifact)"
+                                                      name="edit-o" clickable="true" size="medium"
+                                                      mode="info" class="artifact-button edit-pencil"
+                                                      testId="edit_{{artifact.artifactDisplayName}}"
+                                                      (click)="addOrUpdate(envArtifactOf(artifact))"></svg-icon>
+
+                                            <download-artifact [artifact]="envArtifactOf(artifact)"
+                                                               class="artifact-button"
+                                                               [componentType]="component.componentType"
+                                                               [componentId]="component.uniqueId"
+                                                               [isInstance]="isComponentInstanceSelected"
+                                                               testId="download_env_{{artifact.artifactDisplayName}}"></download-artifact>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc">
+                                    <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label"
+                                          *ngIf="artifact.description">Description:</span>{{artifact.description}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-sdc-designer-sidebar-section-footer"
+                     *ngIf="!isViewOnly && type!=='api' && (!isComponentInstanceSelected || isVfOrPnf() && (type !== 'deployment') || isComplex)">
+                    <sdc-button testId="add_Artifact_Button" size="large" type="primary" text="Add Artifact"
+                                (click)="addOrUpdate({})"></sdc-button>
+                </div>
+            </content>
+        </ng2-expand-collapse>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.less
new file mode 100644
index 0000000000..fef199dd97
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.less
@@ -0,0 +1,169 @@
+@import '../../../../../../../assets/styles/override';
+
+
+.artifacts /deep/ .expand-collapse-content {
+    padding: 10px 0px;
+
+    &.collapsed {
+        padding: 0 0;
+    }
+}
+
+.i-sdc-designer-sidebar-section-content-item-artifact {
+
+    &:not(:hover) .artifact-button {
+        display:none;
+    }
+    .artifact-buttons-container {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        position: absolute;
+        right:0;
+
+        &.upper-buttons {
+            margin-top: 8px;
+        }
+
+        .artifact-button {
+            cursor:pointer;
+            padding-right:5px;
+
+            &.edit-pencil {
+                margin-top: 10px;
+            }
+        }
+    }
+}
+
+.w-sdc-designer-sidebar-section-footer {
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    
+}
+
+
+.w-sdc-designer-sidebar-tab-content.artifacts {
+
+    .i-sdc-designer-sidebar-section-content-item-artifact.hand {
+      cursor: pointer;
+    }
+
+    .w-sdc-designer-sidebar-section-content {
+        padding: 0;
+    }
+    .w-sdc-designer-sidebar-section-title {
+        &.expanded {
+            margin-bottom: 0;
+        }
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-artifact-details {
+        display: inline-block;
+        margin-left: 5px;
+        vertical-align: middle;
+        width: 180px;
+        &.heat {
+            line-height: 18px;
+            width: 250px;
+        }
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-artifact-details-name {
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width:220px;
+        display: inline-block;
+        //text-transform: capitalize;
+        &.enabled {
+            &:hover {
+                color: @sdcui_color_dark-blue;
+            }
+        }
+
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-artifact-heat-env {
+        color: @sdcui_color_dark-gray;
+        margin-top: 6px;
+        line-height: 42px;
+        padding-top: 10px;
+        border-top:1px solid #c8cdd1;
+        .enabled {
+            &:hover {
+                cursor: pointer;
+                color: @sdcui_color_dark-blue;
+            }
+        }
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-artifact-filename {
+        color: @sdcui_color_dark-gray;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 225px;
+        display: inline-block;
+        font-weight: bold;
+        &.enabled {
+            &:hover {
+                color: @sdcui_color_dark-blue;
+            }
+        }
+    }
+
+
+    .i-sdc-designer-sidebar-section-content-item-file-link{
+        border-left: 1px #848586 solid;
+        height: 58px;
+        margin-left: -11px;
+        margin-top: 11px;
+        border-top: 1px #848586 solid;
+        border-bottom: 1px #848586 solid;
+        width: 12px;
+        float: left;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-artifact-details-desc {
+        display: none;
+        line-height: 16px;
+        word-wrap: break-word;
+        white-space: normal;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label {
+        color: @sdcui_color_dark-gray;
+    }
+
+
+    .i-sdc-designer-sidebar-section-content-item-artifact {
+        border-bottom: 1px solid #c8cdd1;
+        padding: 5px 10px 5px 18px;
+        position: relative;
+        // line-height: 36px;
+        min-height: 61px;
+        //cursor: default;
+        display: flex;
+        align-items: center;
+
+
+        .i-sdc-designer-sidebar-section-content-item-button {
+            top: 20px;
+            line-height: 10px;
+        }
+
+        &:hover {
+            //background-color: @color_c;
+            background-color: white;
+            transition: all .3s;
+
+            .i-sdc-designer-sidebar-section-content-item-button {
+                display: block;
+
+            }
+
+        }
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.ts
new file mode 100644
index 0000000000..53a6c267e2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component.ts
@@ -0,0 +1,204 @@
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { ArtifactModel, Component as TopologyTemplate, FullComponentInstance, Resource } from 'app/models';
+import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
+import { ResourceNamePipe } from 'app/ng2/pipes/resource-name.pipe';
+import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service';
+import { TopologyTemplateService } from 'app/ng2/services/component-services/topology-template.service';
+import { ArtifactType } from 'app/utils';
+import * as _ from 'lodash';
+import { SdcUiServices } from 'onap-ui-angular';
+import { Observable } from 'rxjs/Observable';
+import { map } from 'rxjs/operators';
+import { ArtifactsService } from '../../../../../components/forms/artifacts-form/artifacts.service';
+import { GetArtifactsByTypeAction } from '../../../../../store/actions/artifacts.action';
+import { GetInstanceArtifactsByTypeAction } from '../../../../../store/actions/instance-artifacts.actions';
+import { ArtifactsState } from '../../../../../store/states/artifacts.state';
+import { InstanceArtifactsState } from '../../../../../store/states/instance-artifacts.state';
+import { SelectedComponentType, TogglePanelLoadingAction } from '../../../common/store/graph.actions';
+import { CompositionService } from '../../../composition.service';
+
+@Component({
+    selector: 'artifacts-tab',
+    styleUrls: ['./artifacts-tab.component.less'],
+    templateUrl: './artifacts-tab.component.html',
+    providers: [SdcUiServices.ModalService]
+})
+
+export class ArtifactsTabComponent {
+
+    @Input() component: FullComponentInstance | TopologyTemplate;
+    @Input() isViewOnly: boolean;
+    @Input() input: any;
+    @Input() componentType: SelectedComponentType;
+
+    public title: string;
+    public type: string;
+    public isComponentInstanceSelected: boolean;
+    public artifacts$: Observable<ArtifactModel[]>;
+    private topologyTemplateType: string;
+    private topologyTemplateId: string;
+    private heatToEnv: Map<string, ArtifactModel>;
+    private resourceType: string;
+    private isComplex: boolean;
+
+    constructor(private store: Store,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService,
+                private componentInstanceService: ComponentInstanceServiceNg2,
+                private topologyTemplateService: TopologyTemplateService,
+                private artifactService: ArtifactsService) {
+        this.heatToEnv = new Map();
+    }
+
+    ngOnInit() {
+        this.topologyTemplateType = this.workspaceService.metadata.componentType;
+        this.topologyTemplateId = this.workspaceService.metadata.uniqueId;
+        this.type = this.input.type;
+        this.title = this.getTitle(this.type);
+        this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
+        this.resourceType = this.component['resourceType'];
+        this.isComplex = this.component.isComplex();
+        this.loadArtifacts();
+    }
+
+    public addOrUpdate = (artifact: ArtifactModel): void => {
+        if (this.isComponentInstanceSelected) {
+            this.artifactService.openArtifactModal(this.topologyTemplateId, this.topologyTemplateType, artifact, this.type, this.isViewOnly, this.component.uniqueId);
+        } else {
+            this.artifactService.openArtifactModal(this.topologyTemplateId, this.topologyTemplateType, artifact, this.type, this.isViewOnly);
+        }
+    }
+
+    public updateEnvParams = (artifact: ArtifactModel) => {
+        if (this.isComponentInstanceSelected) {
+            this.artifactService.openUpdateEnvParams(this.topologyTemplateType, this.topologyTemplateId, this.heatToEnv.get(artifact.uniqueId), this.component.uniqueId);
+        } else {
+            this.artifactService.openUpdateEnvParams(this.topologyTemplateType, this.topologyTemplateId, artifact);
+        }
+    }
+
+    public viewEnvParams = (artifact: ArtifactModel) => {
+        if (this.isComponentInstanceSelected) {
+            this.artifactService.openViewEnvParams(this.topologyTemplateType, this.topologyTemplateId, this.heatToEnv.get(artifact.uniqueId), this.component.uniqueId);
+        } else {
+            this.artifactService.openViewEnvParams(this.topologyTemplateType, this.topologyTemplateId, artifact);
+        }
+    }
+
+    public getEnvArtifact = (heatArtifact: ArtifactModel, artifacts: ArtifactModel[]): ArtifactModel => {
+        const envArtifact = _.find(artifacts, (item: ArtifactModel) => {
+            return item.generatedFromId === heatArtifact.uniqueId;
+        });
+        if (envArtifact && heatArtifact) {
+            envArtifact.artifactDisplayName = heatArtifact.artifactDisplayName;
+            envArtifact.timeout = heatArtifact.timeout;
+        }
+        return envArtifact;
+    }
+
+    public delete = (artifact: ArtifactModel): void => {
+        if (this.isComponentInstanceSelected) {
+            this.artifactService.deleteArtifact(this.topologyTemplateType, this.topologyTemplateId, artifact, this.component.uniqueId);
+        } else {
+            this.artifactService.deleteArtifact(this.topologyTemplateType, this.topologyTemplateId, artifact);
+        }
+    }
+
+    public isVfOrPnf(): boolean {
+        if (this.component.isResource()){
+            if (this.resourceType) {
+                return this.resourceType === 'VF' || this.resourceType == 'PNF';
+            }
+            return false;
+        }
+
+        return false;
+    }
+
+    private envArtifactOf(artifact: ArtifactModel): ArtifactModel {
+        return this.heatToEnv.get(artifact.uniqueId);
+    }
+
+    private isLicenseArtifact = (artifact: ArtifactModel): boolean => {
+        let isLicense: boolean = false;
+        if (this.component.isResource && (this.component as Resource).isCsarComponent) {
+            if (ArtifactType.VENDOR_LICENSE === artifact.artifactType || ArtifactType.VF_LICENSE === artifact.artifactType) {
+                isLicense = true;
+            }
+        }
+
+        return isLicense;
+    }
+
+    private getTitle = (artifactType: string): string => {
+        switch (artifactType) {
+            case ArtifactType.SERVICE_API:
+                return 'API Artifacts';
+            case ArtifactType.DEPLOYMENT:
+                return 'Deployment Artifacts';
+            case ArtifactType.INFORMATION:
+                return 'Informational Artifacts';
+            default:
+                return ResourceNamePipe.getDisplayName(artifactType) + ' Artifacts';
+        }
+    }
+
+    private loadArtifacts = (forceLoad?: boolean): void => {
+
+        this.store.dispatch(new TogglePanelLoadingAction({isLoading: true}));
+
+        let action;
+        if (this.isComponentInstanceSelected) {
+            action = new GetInstanceArtifactsByTypeAction(({
+                componentType: this.topologyTemplateType,
+                componentId: this.topologyTemplateId,
+                instanceId: this.component.uniqueId,
+                artifactType: this.type
+            }));
+        } else {
+            action = new GetArtifactsByTypeAction({
+                componentType: this.topologyTemplateType,
+                componentId: this.topologyTemplateId,
+                artifactType: this.type
+            });
+        }
+        this.store.dispatch(action).subscribe(() => {
+            const stateSelector = this.isComponentInstanceSelected ? InstanceArtifactsState.getArtifactsByType : ArtifactsState.getArtifactsByType;
+            this.artifacts$ = this.store.select(stateSelector).pipe(map((filterFn) => filterFn(this.type))).pipe(map((artifacts) => {
+                _.forEach(artifacts, (artifact: ArtifactModel): void => {
+                    const envArtifact = this.getEnvArtifact(artifact, artifacts); // Extract the env artifact (if exist) of the HEAT artifact
+                    if (envArtifact) {
+                        // Set a mapping between HEAT to HEAT_ENV
+                        this.heatToEnv.set(artifact.uniqueId, envArtifact);
+                    }
+                });
+                return _.orderBy(artifacts, ['mandatory', 'artifactDisplayName'], ['desc', 'asc']);
+            }));
+
+            this.artifacts$.subscribe((artifacts) => {
+                _.forEach(artifacts, (artifact: ArtifactModel) => {
+                    artifact.allowDeleteAndUpdate = this.allowDeleteAndUpdateArtifact(artifact);
+                });
+                if (this.component instanceof FullComponentInstance) {
+                    this.compositionService.updateInstance(this.component);
+                }
+            });
+            this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+        }, () => {
+            this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+        });
+    }
+
+    private allowDeleteAndUpdateArtifact = (artifact: ArtifactModel): boolean => {
+        if (!this.isViewOnly) {
+            if (artifact.artifactGroupType === ArtifactType.DEPLOYMENT) {
+                return !artifact.isFromCsar;
+            } else {
+
+                return (!artifact.isHEAT() && !artifact.isThirdParty() && !this.isLicenseArtifact(artifact));
+            }
+        }
+        return false;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component.html
index 6585ad2da9..8c5c9c7663 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component.html
@@ -14,7 +14,7 @@
   ~ limitations under the License.
   -->
  
-<div class="w-sdc-designer-sidebar-section-title" tooltip="Members">Members
+<h1 class="w-sdc-designer-sidebar-section-title" tooltip="Members">Members
     <svg-icon-label *ngIf="!isViewOnly"
                     class="add-members-btn"
                     name="plus-circle-o"
@@ -24,7 +24,7 @@
                     labelPlacement="right"
                     (click)="openAddMembersModal()">
     </svg-icon-label>
-</div>
+</h1>
 <div class="expand-collapse-content">
     <ul>
         <li *ngFor="let member of members; let i = index" class="component-details-panel-large-item"
@@ -40,7 +40,7 @@
         </li>
     </ul>
 
-    <div *ngIf="members.length===0" class="component-details-panel-tab-no-data">
+    <div *ngIf="!members || members.length===0" class="component-details-panel-tab-no-data">
         <div class="component-details-panel-tab-no-data-title">No data to display yet</div>
         <div class="component-details-panel-tab-no-data-content">Add members to group to see members</div>
     </div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component.spec.ts
new file mode 100644
index 0000000000..43f6aac2c7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component.spec.ts
@@ -0,0 +1,127 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { Observable } from 'rxjs/Rx';
+import { Mock } from 'ts-mockery';
+import { ConfigureFn, configureTests } from '../../../../../../../jest/test-config.helper';
+import { ComponentMetadata } from '../../../../../../models/component-metadata';
+import { GroupInstance } from '../../../../../../models/graph/zones/group-instance';
+import { EventListenerService } from '../../../../../../services/event-listener-service';
+import { GroupsService } from '../../../../../services/groups.service';
+import { TranslateService } from '../../../../../shared/translator/translate.service';
+import { WorkspaceService } from '../../../../workspace/workspace.service';
+import { CompositionService } from '../../../composition.service';
+import { GroupMembersTabComponent } from './group-members-tab.component';
+
+describe('group members tab component', () => {
+
+    let fixture: ComponentFixture<GroupMembersTabComponent>;
+
+    // Mocks
+    let workspaceServiceMock: Partial<WorkspaceService>;
+    let eventsListenerServiceMock: Partial<EventListenerService>;
+    let groupServiceMock: Partial<GroupsService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+    let compositionServiceMock: Partial<CompositionService>;
+    let modalServiceMock: Partial<SdcUiServices.ModalService>;
+
+    const membersToAdd = [
+        {uniqueId: '1', name: 'inst1'},
+        {uniqueId: '2', name: 'inst2'},
+    ];
+
+    beforeEach(
+        async(() => {
+
+            eventsListenerServiceMock = {};
+
+            groupServiceMock = Mock.of<GroupsService>(
+                {
+                    updateMembers: jest.fn().mockImplementation((compType, uid, groupUniqueId, updatedMembers) => {
+                            if (updatedMembers === undefined) {
+                                return Observable.throwError('error');
+                            } else {
+                                return Observable.of(updatedMembers);
+                            }
+                        }
+                    )});
+
+            compositionServiceMock = {
+                getComponentInstances: jest.fn().mockImplementation( () => {
+                        return [{uniqueId: '1', name: 'inst1'},
+                            {uniqueId: '2', name: 'inst2'},
+                            {uniqueId: '3', name: 'inst3'},
+                            {uniqueId: '4', name: 'inst4'},
+                            {uniqueId: '5', name: 'inst5'}
+                        ];
+                    }
+                )
+            };
+
+            workspaceServiceMock = {
+                metadata: Mock.of<ComponentMetadata>()
+            };
+
+            const addMemberModalInstance = {
+                innerModalContent: { instance: { existingElements: membersToAdd }},
+                closeModal: jest.fn()
+            };
+
+            modalServiceMock = {
+                openInfoModal: jest.fn(),
+                openCustomModal: jest.fn().mockImplementation(() => addMemberModalInstance)
+            };
+
+            loaderServiceMock = {
+                activate: jest.fn(),
+                deactivate: jest.fn()
+            };
+
+            const groupInstanceMock = Mock.of<GroupInstance>();
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [GroupMembersTabComponent],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: TranslateService, useValue: { translate: jest.fn() }},
+                        {provide: GroupsService, useValue: groupServiceMock},
+                        {provide: SdcUiServices.ModalService, useValue: modalServiceMock },
+                        {provide: EventListenerService, useValue: eventsListenerServiceMock },
+                        {provide: CompositionService, useValue: compositionServiceMock },
+                        {provide: WorkspaceService, useValue: workspaceServiceMock},
+                        {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(GroupMembersTabComponent);
+                fixture.componentInstance.group = groupInstanceMock;
+            });
+        })
+    );
+
+    it('test that initially all members are available for adding', () => {
+        const testedComponent = fixture.componentInstance;
+
+        // No members are currently in the group, all 5 members should be returned
+        const optionalMembersToAdd = testedComponent.getOptionalsMembersToAdd();
+        expect(optionalMembersToAdd).toHaveLength(5);
+    });
+
+    it('test list of available instances to add does not include existing members', () => {
+        const testedComponent = fixture.componentInstance;
+
+        // Mock the group instance to return the members that we are about to add
+        testedComponent.group.getMembersAsUiObject = jest.fn().mockImplementation( () => membersToAdd);
+
+        // The opened modal shall return 2 members to be added
+        testedComponent.openAddMembersModal();
+        testedComponent.addMembers(); // Shall add 2 members (1,2)
+
+        // Now the getOptionalsMembersToAdd shall return 3 which are the members that were no added yet
+        const optionalMembersToAdd = testedComponent.getOptionalsMembersToAdd();
+        expect(optionalMembersToAdd).toHaveLength(3);
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component.ts
new file mode 100644
index 0000000000..7f1222367d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component.ts
@@ -0,0 +1,158 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Select } from '@ngxs/store';
+import { GroupInstance } from 'app/models/graph/zones/group-instance';
+import { CompositionService } from 'app/ng2/pages/composition/composition.service';
+import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
+import { EventListenerService } from 'app/services/event-listener-service';
+import { GRAPH_EVENTS } from 'app/utils';
+import * as _ from 'lodash';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { Observable, Subscription } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { ComponentInstance } from '../../../../../../models/componentsInstances/componentInstance';
+import { MemberUiObject } from '../../../../../../models/ui-models/ui-member-object';
+import { AddElementsComponent } from '../../../../../components/ui/modal/add-elements/add-elements.component';
+import {GraphState} from "../../../common/store/graph.state";
+import { GroupsService } from '../../../../../services/groups.service';
+import { TranslateService } from '../../../../../shared/translator/translate.service';
+
+@Component({
+    selector: 'group-members-tab',
+    templateUrl: './group-members-tab.component.html',
+    styleUrls: ['./../policy-targets-tab/policy-targets-tab.component.less']
+})
+
+export class GroupMembersTabComponent implements OnInit, OnDestroy {
+
+    @Input() group: GroupInstance;
+    @Input() isViewOnly: boolean;
+    @Select(GraphState.getSelectedComponent) group$: Observable<GroupInstance>;
+    @HostBinding('class') classes = 'component-details-panel-tab-group-members';
+
+    private members: MemberUiObject[];
+    private addMemberModalInstance: SdcUiComponents.ModalComponent;
+    private subscription: Subscription;
+
+    constructor(
+        private translateService: TranslateService,
+        private groupsService: GroupsService,
+        private modalService: SdcUiServices.ModalService,
+        private eventListenerService: EventListenerService,
+        private compositionService: CompositionService,
+        private workspaceService: WorkspaceService,
+        private loaderService: SdcUiServices.LoaderService
+    ) {
+    }
+
+    ngOnInit() {
+        this.subscription = this.group$.pipe(
+            tap((group) => {
+                this.group = group;
+                this.members = this.group.getMembersAsUiObject(this.compositionService.componentInstances);
+            })).subscribe();
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+    deleteMember = (member: MemberUiObject): void => {
+        this.loaderService.activate();
+        this.groupsService.deleteGroupMember(
+            this.workspaceService.metadata.componentType,
+            this.workspaceService.metadata.uniqueId,
+            this.group,
+            member.uniqueId).subscribe(
+            (updatedMembers: string[]) => {
+                this.group.members = updatedMembers;
+                this.initMembers();
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.group);
+            },
+            () => console.log('Error deleting member!'),
+            () => this.loaderService.deactivate()
+        );
+    }
+
+    addMembers = (): void => {
+        // TODO refactor sdc-ui modal in order to return the data
+        const membersToAdd: MemberUiObject[] = this.addMemberModalInstance.innerModalContent.instance.existingElements;
+        if (membersToAdd.length > 0) {
+            this.addMemberModalInstance.closeModal();
+            this.loaderService.activate();
+            const locallyUpdatedMembers: MemberUiObject[] = _.union(this.members, membersToAdd);
+            this.groupsService.updateMembers(
+                this.workspaceService.metadata.componentType,
+                this.workspaceService.metadata.uniqueId,
+                this.group.uniqueId,
+                locallyUpdatedMembers).subscribe(
+                (updatedMembers: string[]) => {
+                    this.group.members = updatedMembers;
+                    this.initMembers();
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.group);
+                },
+                () => {
+                    console.log('Error updating members!');
+                }, () =>
+                this.loaderService.deactivate()
+            );
+        }
+    }
+
+    getOptionalsMembersToAdd(): MemberUiObject[] {
+        const optionalsMembersToAdd: MemberUiObject[] = [];
+        // adding all instances as optional members to add if not already exist
+        _.forEach(this.compositionService.getComponentInstances(), (instance: ComponentInstance) => {
+            if (!_.some(this.members, (member: MemberUiObject) => {
+                    return member.uniqueId === instance.uniqueId;
+                })) {
+                optionalsMembersToAdd.push(new MemberUiObject(instance.uniqueId, instance.name));
+            }
+        });
+        return optionalsMembersToAdd;
+    }
+
+    openAddMembersModal(): void {
+        const addMembersModalConfig = {
+            title: this.group.name + ' ADD MEMBERS',
+            size: 'md',
+            type: SdcUiCommon.ModalType.custom,
+            testId: 'addMembersModal',
+            buttons: [
+                {text: 'ADD MEMBERS', size: 'medium', callback: this.addMembers, closeModal: false},
+                {text: 'CANCEL', size: 'sm', type: 'secondary', closeModal: true}
+            ]
+        } as SdcUiCommon.IModalConfig;
+        const optionalsMembersToAdd = this.getOptionalsMembersToAdd();
+        this.addMemberModalInstance = this.modalService.openCustomModal(addMembersModalConfig, AddElementsComponent, {
+            elementsToAdd: optionalsMembersToAdd,
+            elementName: 'member'
+        });
+    }
+
+    private initMembers = (groupInstance?: GroupInstance) => {
+        this.group = groupInstance ? groupInstance : this.group;
+        this.members = this.group.getMembersAsUiObject(this.compositionService.getComponentInstances());
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component.html
index fe1f6b4f0d..c57f99786c 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component.html
@@ -18,7 +18,7 @@
     <header tooltip="Properties">Properties</header>
     <content>
         <ul>
-            <li *ngFor="let property of properties; let i = index"
+            <li *ngFor="let property of component.properties; let i = index"
                 class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow">
                 <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label hand"
                      [attr.data-tests-id]="'propertyName_'+property.name"
@@ -32,7 +32,7 @@
             </li>
         </ul>
 
-        <div *ngIf="properties.length===0" class="component-details-panel-tab-no-data">
+        <div *ngIf="!component.properties || component.properties.length===0" class="component-details-panel-tab-no-data">
             <div class="component-details-panel-tab-no-data-title">No properties to display</div>
         </div>
     </content>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component.ts
index 5862135df2..24ae8b2833 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component.ts
@@ -19,44 +19,32 @@
  */
 
 import * as _ from "lodash";
-import { Component, Inject, Input, Output, EventEmitter, OnChanges, SimpleChanges } from "@angular/core";
+import { Component, Inject, Input} from "@angular/core";
 import { TranslateService } from './../../../../../shared/translator/translate.service';
 import { PolicyInstance } from 'app/models/graph/zones/policy-instance';
-import { PropertyBEModel } from 'app/models';
 import { PropertyModel } from './../../../../../../models/properties';
 import { ModalsHandler } from "app/utils";
-import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
+import { Component as TopologyTemplate, GroupInstance } from "app/models";
 
 @Component({
-    selector: 'policy-properties-tab',
-    templateUrl: './policy-properties-tab.component.html',
-    styleUrls: ['./../base/base-tab.component.less', 'policy-properties-tab.component.less'],
-    host: {'class': 'component-details-panel-tab-policy-properties'}
+    selector: 'group-or-policy-properties-tab',
+    templateUrl: './group-or-policy-properties-tab.component.html',
+    styleUrls: ['./../properties-tab/properties-tab.component.less'],
 })
-export class PolicyPropertiesTabComponent implements OnChanges {
+export class GroupOrPolicyPropertiesTab {
  
-    @Input() policy:PolicyInstance;
+    @Input() component: GroupInstance | PolicyInstance;
     @Input() topologyTemplate:TopologyTemplate;
     @Input() isViewOnly: boolean;
+    @Input() input: {type: string};
 
-    private properties:Array<PropertyModel>;
 
     constructor(private translateService:TranslateService, private ModalsHandler:ModalsHandler) {
     }
 
-    ngOnChanges(changes: SimpleChanges): void {
-        console.log("PolicyPropertiesTabComponent: ngAfterViewInit: ");        
-        console.log("policy: " + this.policy);  
-        this.properties = [];
-        this.initProperties();
-    }
-
-    initProperties = ():void => {
-        this.properties= this.policy.properties;
-    }
 
     editProperty = (property?:PropertyModel):void => {
-        this.ModalsHandler.openEditPropertyModal((property ? property : new PropertyModel()), this.topologyTemplate, this.properties, false, 'policy', this.policy.uniqueId).then((updatedProperty:PropertyModel) => {
+        this.ModalsHandler.openEditPropertyModal((property ? property : new PropertyModel()), this.topologyTemplate, this.component.properties, false, this.input.type, this.component.uniqueId).then((updatedProperty:PropertyModel) => {
             console.log("ok");
         });
     }
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.html
deleted file mode 100644
index 953b57bda1..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
- 
-<ng2-expand-collapse state="0">
-
-    <header tooltip="General Information">General Info</header>
-
-    <content>
-    <!-- CATEGORY -->
-    <div class="component-details-panel-item">
-        <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
-        <span class="value" data-tests-id="rightTab_category" tooltip="Group">Group</span>
-    </div>
-
-    <!-- SUB CATEGORY -->
-    <div class="component-details-panel-item">
-        <span class="name" [innerHTML]="'GENERAL_LABEL_SUB_CATEGORY' | translate"></span>
-        <span class="value" data-tests-id="rightTab_subCategory" tooltip="Group">Group</span>
-    </div>
-
-    <!-- VERSION -->
-    <div class="component-details-panel-item">
-        <span class="name" [innerHTML]="'GENERAL_LABEL_VERSION' | translate"></span>
-        <span class="value" data-tests-id="rightTab_version" tooltip="{{group.version}}">{{group.version}}</span>
-    </div>
-
-    <!-- DESCRIPTION -->
-    <div class="component-details-panel-item description">
-        <span class="name" [innerHTML]="'GENERAL_LABEL_DESCRIPTION' | translate"></span>
-        <span class="value" ellipsis="group.description" max-chars="55" data-tests-id="rightTab_description">{{group.description}}</span>
-    </div>
-    </content>
-</ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.less
deleted file mode 100644
index 1006e864fa..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.less
+++ /dev/null
@@ -1,13 +0,0 @@
-/deep/ 
-.component-details-panel-tab-group-members {
-    .component-details-panel-large-item {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    .w-sdc-designer-sidebar-section-title {
-        display: flex;
-        justify-content: space-between;
-    }
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.ts
deleted file mode 100644
index 148f2133e8..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, Input, Output, EventEmitter, OnChanges, HostBinding } from "@angular/core";
-import { TranslateService } from './../../../../../shared/translator/translate.service';
-import { Component as TopologyTemplate } from "app/models";
-import { GroupInstance } from "app/models/graph/zones/group-instance";
-import { GroupsService } from "../../../../../services/groups.service";
-import { SimpleChanges } from "@angular/core/src/metadata/lifecycle_hooks";
-import { MemberUiObject } from "../../../../../../models/ui-models/ui-member-object";
-import { IModalConfig } from "sdc-ui/lib/angular/modals/models/modal-config";
-import { AddElementsComponent } from "../../../../../components/ui/modal/add-elements/add-elements.component";
-import { GRAPH_EVENTS } from 'app/utils';
-import { EventListenerService } from 'app/services/event-listener-service';
-import { ComponentInstance } from "../../../../../../models/componentsInstances/componentInstance";
-import { SdcUiComponents } from "sdc-ui/lib/angular";
-
-@Component({
-    selector: 'group-members-tab',
-    templateUrl: './group-members-tab.component.html',
-    styleUrls: ['./../base/base-tab.component.less', 'group-members-tab.component.less']
-})
-
-export class GroupMembersTabComponent implements OnChanges {
-    
-
-    private members: Array<MemberUiObject>;
-
-    @Input() group: GroupInstance;
-    @Input() topologyTemplate: TopologyTemplate;
-    @Input() isViewOnly: boolean;
-    @Output() isLoading: EventEmitter<boolean> = new EventEmitter<boolean>();
-    @HostBinding('class') classes = 'component-details-panel-tab-group-members';
-
-    constructor(private translateService: TranslateService,
-        private groupsService: GroupsService,
-        private modalService: SdcUiComponents.ModalService,
-        private eventListenerService: EventListenerService
-    ) {
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.initMembers)
-    }
-
-    ngOnChanges(changes:SimpleChanges):void {
-        this.initMembers();
-    }
-
-    deleteMember = (member: MemberUiObject):void => {
-        this.isLoading.emit(true);
-        this.groupsService.deleteGroupMember(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.group, member.uniqueId).subscribe(
-            (updatedMembers:Array<string>) => {
-                this.group.members = updatedMembers;
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.group);
-            },
-            error => console.log("Error deleting member!"),
-            () => this.isLoading.emit(false)
-        );
-    }
-
-    private initMembers = (groupInstance?: GroupInstance) => {
-        this.group = groupInstance ? groupInstance : this.group;
-        this.members = this.group.getMembersAsUiObject(this.topologyTemplate.componentInstances);
-    }
-
-    addMembers = ():void => {
-        var membersToAdd:Array<MemberUiObject> = this.modalService.getCurrentInstance().innerModalContent.instance.existingElements; //TODO refactor sdc-ui modal in order to return the data
-        if(membersToAdd.length > 0) {
-            this.modalService.closeModal();
-            this.isLoading.emit(true);
-            var updatedMembers: Array<MemberUiObject> = _.union(this.members, membersToAdd);
-            this.groupsService.updateMembers(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.group.uniqueId, updatedMembers).subscribe(
-                (updatedMembers:Array<string>) => {
-                    this.group.members = updatedMembers;
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.group);
-                },
-                error => {
-                    console.log("Error updating members!");
-                }, () =>
-                    this.isLoading.emit(false)
-            );
-        }
-    }
-
-    getOptionalsMembersToAdd():Array<MemberUiObject> {
-        
-        let optionalsMembersToAdd:Array<MemberUiObject> = [];
-
-        // adding all instances as optional members to add if not already exist
-        _.forEach(this.topologyTemplate.componentInstances, (instance:ComponentInstance) => {
-            if (!_.some(this.members, (member:MemberUiObject) => {
-                    return member.uniqueId === instance.uniqueId
-                })) {
-                optionalsMembersToAdd.push(new MemberUiObject(instance.uniqueId, instance.name));
-            }
-        });
-        return optionalsMembersToAdd;
-    }
-
-    openAddMembersModal():void {
-        let addMembersModalConfig:IModalConfig = {
-            title: this.group.name + " ADD MEMBERS",
-            size: "md",
-            type: "custom",
-            testId: "addMembersModal",
-            buttons: [
-                {text: 'ADD MEMBERS', size: 'xsm', callback: this.addMembers, closeModal: false},
-                {text: 'CANCEL', size: 'sm', type: "secondary", closeModal: true}
-            ]
-        };
-        var optionalsMembersToAdd = this.getOptionalsMembersToAdd();
-        this.modalService.openCustomModal(addMembersModalConfig, AddElementsComponent, {
-            elementsToAdd: optionalsMembersToAdd,
-            elementName: "member"
-        });
-    }
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.ts
deleted file mode 100644
index 69079347c4..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, Inject, Input, Output, EventEmitter, OnChanges, SimpleChanges } from "@angular/core";
-import { TranslateService } from './../../../../../shared/translator/translate.service';
-import { GroupInstance } from 'app/models/graph/zones/group-instance';
-import { PropertyBEModel } from 'app/models';
-import { PropertyModel } from './../../../../../../models/properties';
-import { ModalsHandler } from "app/utils";
-import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
-
-@Component({
-    selector: 'group-properties-tab',
-    templateUrl: './group-properties-tab.component.html',
-    styleUrls: ['./../base/base-tab.component.less', 'group-properties-tab.component.less'],
-    host: {'class': 'component-details-panel-tab-group-properties'}
-})
-export class GroupPropertiesTabComponent implements OnChanges {
- 
-    @Input() group:GroupInstance;
-    @Input() topologyTemplate:TopologyTemplate;
-    @Input() isViewOnly: boolean;
-
-    private properties:Array<PropertyModel>;
-
-    constructor(private translateService:TranslateService, private ModalsHandler:ModalsHandler) {
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        console.log("GroupPropertiesTabComponent: ngAfterViewInit: ");        
-        console.log("group: " + JSON.stringify(this.group));  
-        this.properties = [];
-        this.initProperties();
-    }
-
-    initProperties = ():void => {
-        this.properties= this.group.properties;
-    }
-
-    editProperty = (property?:PropertyModel):void => {
-        this.ModalsHandler.openEditPropertyModal((property ? property : new PropertyModel()), this.topologyTemplate, this.properties, false, 'group', this.group.uniqueId).then((updatedProperty:PropertyModel) => {
-            console.log("ok");
-        });
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.html
deleted file mode 100644
index 482de5eacf..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<sdc-tabs>
-    <sdc-tab titleIcon="info-circle">
-        <group-information-tab [group]="group" [isViewOnly]="isViewOnly" *ngIf="group"></group-information-tab>
-    </sdc-tab>
-    <sdc-tab titleIcon="inputs-o">
-        <group-members-tab [group]="group" [topologyTemplate]="topologyTemplate" [isViewOnly]="isViewOnly" (isLoading)="setIsLoading($event)" *ngIf="group"></group-members-tab>
-    </sdc-tab>
-    <sdc-tab titleIcon="settings-o">
-        <group-properties-tab [group]="group" [topologyTemplate]="topologyTemplate" [isViewOnly]="isViewOnly" *ngIf="group"></group-properties-tab>
-    </sdc-tab>
-</sdc-tabs>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.ts
deleted file mode 100644
index 975d5c6153..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, Inject, Input, Output, EventEmitter, SimpleChanges, OnChanges } from "@angular/core";
-import { TranslateService } from './../../../../../shared/translator/translate.service';
-import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
-import { GroupsService } from '../../../../../services/groups.service';
-import { GroupInstance } from "app/models/graph/zones/group-instance";
-
-@Component({
-    selector: 'group-tabs',
-    templateUrl: './group-tabs.component.html'
-})
-export class GroupTabsComponent implements OnChanges {
- 
-    @Input() topologyTemplate:TopologyTemplate;
-    @Input() selectedZoneInstanceType:string;
-    @Input() selectedZoneInstanceId:string;
-    @Input() isViewOnly: boolean;
-    @Output() isLoading: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private group:GroupInstance;
-
-    constructor(private translateService:TranslateService,
-                private groupsService:GroupsService
-        ) {
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.initGroup();
-    }
-
-    private initGroup = ():void => {
-        this.isLoading.emit(true);
-        this.groupsService.getSpecificGroup(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId).subscribe(
-            group => {
-                this.group = group;
-                console.log(JSON.stringify(group));
-            },
-            error => console.log("Error getting group!"),
-            () => this.isLoading.emit(false)
-        );
-    }
-
-    private setIsLoading = (value) :void => {
-        this.isLoading.emit(value);
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.module.ts
deleted file mode 100644
index 50797f862c..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.module.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-import { NgModule } from "@angular/core";
-import { HttpModule } from "@angular/http";
-import { FormsModule } from "@angular/forms";
-import { BrowserModule } from "@angular/platform-browser";
-import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
-import { ExpandCollapseComponent } from 'app/ng2/components/ui/expand-collapse/expand-collapse.component';
-import { PoliciesService } from "../../../../../services/policies.service";
-import { GroupInformationTabComponent } from './group-information-tab.component';
-import { TooltipModule } from './../../../../../components/ui/tooltip/tooltip.module';
-import { GroupTabsComponent } from "./group-tabs.component";
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { GroupMembersTabComponent } from './group-members-tab.component';
-import { TranslateModule } from './../../../../../shared/translator/translate.module';
-import { GroupPropertiesTabComponent } from "./group-properties-tab.component";
-
-@NgModule({
-    declarations: [
-        GroupInformationTabComponent,
-        GroupMembersTabComponent,
-        GroupTabsComponent,
-        GroupPropertiesTabComponent
-    ],
-    imports: [
-        BrowserModule,
-        FormsModule,
-        HttpModule,
-        TooltipModule,
-        UiElementsModule,
-        SdcUiComponentsModule,
-        TranslateModule
-    ],
-    entryComponents: [
-        GroupInformationTabComponent,
-        GroupMembersTabComponent,
-        GroupTabsComponent,
-        GroupPropertiesTabComponent,
-        ExpandCollapseComponent
-    ],
-    exports: [
-        TooltipModule,
-        GroupInformationTabComponent,
-        GroupMembersTabComponent,
-        GroupTabsComponent,
-        GroupPropertiesTabComponent
-    ],
-    providers: [
-        PoliciesService
-    ]
-})
-export class GroupTabsModule {
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/__snapshots__/info-tab.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/__snapshots__/info-tab.component.spec.ts.snap
new file mode 100644
index 0000000000..fdd0dcf75c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/__snapshots__/info-tab.component.spec.ts.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoTabComponent can load instance 1`] = `
+<panel-info-tab
+  componentInstanceService={[Function Object]}
+  compositionPaletteService={[Function Object]}
+  compositionService={[Function Object]}
+  eventListenerService={[Function Object]}
+  flatLeftPaletteElementsFromService={[Function Function]}
+  getPathNamesVersionChangeModal={[Function Function]}
+  initEditResourceVersion={[Function Function]}
+  modalService={[Function Object]}
+  onChangeVersion={[Function Function]}
+  sdcMenu={[Function Object]}
+  serviceService={[Function Object]}
+  store={[Function Object]}
+  versioning={[Function Function]}
+  workspaceService={[Function Object]}
+>
+  <ng2-expand-collapse
+    state="0"
+  >
+    <header
+      tooltip="General Information"
+    >
+      General Info
+    </header>
+    <content
+      class="general-info-container"
+    >
+      
+      
+      <div
+        class="component-details-panel-item"
+      >
+        <span
+          class="name"
+        />
+        
+        
+      </div>
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      <div
+        class="component-details-panel-item description"
+      >
+        <span
+          class="name"
+        />
+        <chars-ellipsis />
+      </div>
+      
+      
+    </content>
+  </ng2-expand-collapse>
+</panel-info-tab>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.html
new file mode 100644
index 0000000000..71545f8143
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.html
@@ -0,0 +1,174 @@
+<!--
+  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+ 
+<ng2-expand-collapse state="0">
+    <header tooltip="General Information">General Info</header>
+    <content class="general-info-container">
+        <!-- TYPE -->
+        <div class="component-details-panel-item" *ngIf="component.componentType">
+            <span class="name" [innerHTML]="'Type:'"></span>
+            <span class="value" data-tests-id="rightTab_componentType" tooltip="{{component.componentType}}">{{component.componentType}}</span>
+        </div>
+
+        <!-- RESOURCE TYPE-->
+        <div class="component-details-panel-item" *ngIf="component.resourceType">
+            <span class="name" [innerHTML]="'Resource Type:'"></span>
+            <span class="value" data-tests-id="rightTab_resourceType" tooltip="{{component.resourceType}}">{{component.resourceType}}</span>
+        </div>
+
+        <!-- VERSION -->
+        <div class="component-details-panel-item" >
+            <span class="name" [innerHTML]="'GENERAL_LABEL_VERSION' | translate"></span>
+            <span class="value" *ngIf="!isComponentSelectedFlag" data-tests-id="rightTab_version" tooltip="{{component.version}}">{{component.version}}</span>
+            <ng-container *ngIf="isComponentSelectedFlag">
+                <select #versionDropdown (change)="onChangeVersion(versionDropdown)" [ngModel]="component.getComponentUid()" data-tests-id="changeVersion">
+                    <option *ngFor="let version of versions" value="{{version.value}}"
+                            [disabled]="isDisabledFlag" [class.minor]="(component.componentVersion)%1"
+                    >{{version.label}}</option>
+                </select>
+            </ng-container>
+        </div>
+
+        <!-- CATEGORY -->
+        <ng-container *ngIf="component.categories && component.categories[0]">
+            <div class="component-details-panel-item">
+                <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
+                <span class="value" data-tests-id="rightTab_category" tooltip="{{component.categories[0].name}}">{{component.categories[0].name}}</span>
+            </div>
+
+            <!-- SUB CATEGORY -->
+            <div class="component-details-panel-item" *ngIf="component.categories[0].subcategories && component.categories[0].subcategories[0]">
+                <span class="name" [innerHTML]="'GENERAL_LABEL_SUB_CATEGORY' | translate"></span>
+                <span class="value" data-tests-id="rightTab_subCategory" tooltip="{{component.categories[0].subcategories[0].name}}">{{component.categories[0].subcategories[0].name}}</span>
+            </div>
+        </ng-container>
+
+        <!-- CREATION DATE -->
+        <div class="component-details-panel-item" *ngIf="component.creationDate">
+            <span class="name" [innerHTML]="'Creation Date:'"></span>
+            <span class="value" data-tests-id="rightTab_version" tooltip="{{component.creationDate | date: 'MM/dd/yyyy'}}">{{component.creationDate | date: 'MM/dd/yyyy'}}</span>
+        </div>
+
+        <!-- AUTHOR -->
+        <div class="component-details-panel-item" *ngIf="component.creatorFullName">
+            <span class="name" [innerHTML]="'Author:'"></span>
+            <span class="value" data-tests-id="rightTab_author" tooltip="{{component.creatorFullName}}">{{component.creatorFullName}}</span>
+        </div>
+
+        <!-- Vendor Name data-ng-if="selectedComponent.isResource()"-->
+        <div class="component-details-panel-item" *ngIf="component.vendorName">
+            <span class="name" [innerHTML]="'Vendor Name:'"></span>
+            <span class="value" data-tests-id="rightTab_vendorName" tooltip="{{component.vendorName}}">{{component.vendorName}}</span>
+        </div>
+
+        <!-- Vendor Release data-ng-if="selectedComponent.isResource()"-->
+        <div class="component-details-panel-item" *ngIf="component.vendorRelease">
+            <span class="name" [innerHTML]="'Vendor Release:'"></span>
+            <span class="value" data-tests-id="rightTab_vendorRelease" tooltip="{{component.vendorRelease}}">{{component.vendorRelease}}</span>
+        </div>
+
+        <!-- Vendor Release data-ng-if="selectedComponent.isResource()"-->
+        <div class="component-details-panel-item" *ngIf="component.resourceVendorModelNumber">
+            <span class="name" [innerHTML]="'GENERAL_LABEL_RESOURCE_MODEL_NUMBER' | translate"></span>
+            <span class="value" data-tests-id="rightTab_resourceVendorModelNumber" tooltip="{{component.resourceVendorModelNumber}}">{{component.resourceVendorModelNumber}}</span>
+        </div>
+
+        <!-- Service Type data-ng-if="selectedComponent.isService()"-->
+        <div class="component-details-panel-item" *ngIf="component.serviceType">
+            <span class="name" [innerHTML]="'GENERAL_LABEL_SERVICE_TYPE' | translate"></span>
+            <span class="value" data-tests-id="rightTab_serviceType" tooltip="{{component.serviceType}}">{{component.serviceType}}</span>
+        </div>
+
+        <!-- Service Role data-ng-if="selectedComponent.isService()"-->
+        <div class="component-details-panel-item" *ngIf="component.serviceRole">
+            <span class="name" [innerHTML]="'GENERAL_LABEL_SERVICE_ROLE' | translate"></span>
+            <span class="value" data-tests-id="rightTab_serviceRole" tooltip="{{component.serviceRole}}">{{component.serviceRole}}</span>
+        </div>
+
+        <!-- Contact ID -->
+        <div class="component-details-panel-item" *ngIf="component.contactId">
+            <span class="name" [innerHTML]="'GENERAL_LABEL_CONTACT_ID' | translate"></span>
+            <span class="value" data-tests-id="rightTab_contactId" tooltip="{{component.contactId}}">{{component.contactId}}</span>
+        </div>
+
+        <!-- Service Name data-ng-if="isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()"-->
+        <div class="component-details-panel-item" *ngIf="component.sourceModelName">
+            <span class="name" [innerHTML]="'GENERAL_LABEL_SOURCE_SERVICE_NAME' | translate"></span>
+            <span class="value" data-tests-id="rightTab_sourceModelName" tooltip="{{component.sourceModelName}}">{{component.sourceModelName}}</span>
+        </div>
+
+        <!-- Customization UUID data-ng-if="isViewMode() && currentComponent.isService() && selectedComponent.isResource()"-->
+        <div class="component-details-panel-item" *ngIf="component.customizationUUID">
+            <span class="name" [innerHTML]="'GENERAL_LABEL_RESOURCE_CUSTOMIZATION_UUID' | translate"></span>
+            <span class="value" data-tests-id="rightTab_customizationModuleUUID" tooltip="{{component.customizationUUID}}">{{component.customizationUUID}}</span>
+        </div>
+
+        <!-- DESCRIPTION -->
+        <div class="component-details-panel-item description">
+            <span class="name" [innerHTML]="'GENERAL_LABEL_DESCRIPTION' | translate"></span>
+            <chars-ellipsis [text]="component.description" [maxChars]="55" [testId]="'rightTab_description'"></chars-ellipsis>
+        </div>
+
+
+        <!--TODO: move to separate component!-->
+        <ng-container *ngIf="componentType == 'POLICY'">
+            <!-- TYPE -->
+            <div class="component-details-panel-item policy-item">
+                <span class="name" [innerHTML]="'GENERAL_LABEL_TYPE' | translate"></span>
+                <span class="value" data-tests-id="rightTab_componentType" tooltip="{{component.policyTypeUid}}">{{component.policyTypeUid}}</span>
+            </div>
+
+            <!-- CATEGORY -->
+            <div class="component-details-panel-item policy-item">
+                <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
+                <span class="value" data-tests-id="rightTab_category" tooltip="Policy">Policy</span>
+            </div>
+
+            <!-- SUB CATEGORY -->
+            <div class="component-details-panel-item policy-item">
+                <span class="name" [innerHTML]="'GENERAL_LABEL_SUB_CATEGORY' | translate"></span>
+                <span class="value" data-tests-id="rightTab_subCategory" tooltip="Policy">Policy</span>
+            </div>
+        </ng-container>
+
+        <!--TODO: move to separate component!-->
+        <ng-container *ngIf="componentType == 'GROUP'">
+            <!-- CATEGORY -->
+            <div class="component-details-panel-item group-item">
+                <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
+                <span class="value" data-tests-id="rightTab_category" tooltip="Group">Group</span>
+            </div>
+
+            <!-- SUB CATEGORY -->
+            <div class="component-details-panel-item group-item">
+                <span class="name" [innerHTML]="'GENERAL_LABEL_SUB_CATEGORY' | translate"></span>
+                <span class="value" data-tests-id="rightTab_subCategory" tooltip="Group">Group</span>
+            </div>
+
+        </ng-container>
+
+    </content>
+</ng2-expand-collapse>
+
+<ng2-expand-collapse *ngIf="component.tags || isComponentInstanceSelected()">
+    <header tooltip="Tags">Tags</header>
+    <content class="tags-container">
+        <span *ngIf="component.tags?.indexOf(component.name)===-1" class="i-sdc-designer-sidebar-section-content-item-tag"
+              data-tests-id="rightTab_tag" tooltip="{{component.name}}">{{component.name}}</span>
+        <span class="i-sdc-designer-sidebar-section-content-item-tag" *ngFor="let tag of component.tags"
+              data-tests-id="rightTab_tag" tooltip="{{tag}}">{{tag}}</span>
+    </content>
+</ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.less
new file mode 100644
index 0000000000..c8da4e3e68
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.less
@@ -0,0 +1,51 @@
+@import '../../../../../../../assets/styles/variables';
+
+.general-info-container {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 20px;
+}
+
+.component-details-panel-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 5px;
+    order:1;
+
+    .name { font-family: OpenSans-Semibold, sans-serif; }
+    .value { padding-left: 10px; }
+
+
+    &.description {
+        margin-top: 28px;
+        white-space: normal;
+        word-wrap: break-word;
+        overflow: ellipsis;
+
+        .value {
+            padding-left: 0;
+            max-width: none;
+            font-weight: normal;
+            font-family: @font-opensans-regular;
+        }
+    }
+
+    &.group-item, &.policy-item {
+        order:0;
+    }
+}
+
+.tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px 20px;
+
+    .i-sdc-designer-sidebar-section-content-item-tag {
+        padding: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        user-select: all;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.spec.ts
new file mode 100644
index 0000000000..6915d651f1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.spec.ts
@@ -0,0 +1,98 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { CompositionPaletteService } from '../../../../../pages/composition/palette/services/palette.service';
+import { IAppMenu, SdcMenuToken } from '../../../../../../../app/ng2/config/sdc-menu.config';
+import { CompositionService } from '../../../../../pages/composition/composition.service';
+import { ServiceServiceNg2 } from '../../../../../../../app/services-ng2';
+import { WorkspaceService } from '../../../../../../../app/ng2/pages/workspace/workspace.service';
+import { ComponentInstanceServiceNg2 } from '../../../../../../../app/ng2/services/component-instance-services/component-instance.service';
+import { EventListenerService } from '../../../../../../../app/services';
+import { InfoTabComponent } from './info-tab.component';
+import { ConfigureFn, configureTests } from "../../../../../../../jest/test-config.helper";
+import { Observable } from "rxjs";
+import { leftPaletteElements } from "../../../../../../../jest/mocks/left-paeltte-elements.mock";
+import { TranslatePipe } from "../../../../../shared/translator/translate.pipe";
+import { HttpClientModule } from "@angular/common/http";
+import { TranslateModule } from "../../../../../../../app/ng2/shared/translator/translate.module";
+import _ from "lodash";
+import { TranslateService } from "../../../../../shared/translator/translate.service";
+import { SdcUiServices } from "onap-ui-angular";
+import { Component as TopologyTemplate, FullComponentInstance, ComponentInstance } from '../../../../../../../app/models';
+
+
+describe('InfoTabComponent', () => {
+    // let comp: InfoTabComponent;
+    let fixture: ComponentFixture<InfoTabComponent>;
+
+    // let eventServiceMock: Partial<EventListenerService>;
+    let storeStub:Partial<Store>;
+    let compositionPaletteServiceStub:Partial<CompositionPaletteService>;
+    let iAppMenuStub:Partial<IAppMenu>;
+    let compositionServiceStub:Partial<CompositionService>;
+    let serviceServiceNg2Stub:Partial<ServiceServiceNg2>;
+    let workspaceServiceStub:Partial<WorkspaceService>;
+    let componentInstanceServiceNg2Stub:Partial<ComponentInstanceServiceNg2>;
+    let eventListenerServiceStub:Partial<EventListenerService>;
+
+    beforeEach(
+        async(() => {
+            storeStub = {};
+            iAppMenuStub = {};
+            eventListenerServiceStub = {
+                notifyObservers: jest.fn()
+            }
+            compositionPaletteServiceStub = {
+                getLeftPaletteElements:  jest.fn().mockImplementation(()=>  Observable.of(leftPaletteElements))
+            }
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    imports: [ ],
+                    declarations: [ InfoTabComponent, TranslatePipe ],
+                    schemas: [ NO_ERRORS_SCHEMA ],
+                    providers: [
+                        { provide: Store, useValue: {} },
+                        { provide: CompositionPaletteService, useValue: compositionPaletteServiceStub },
+                        { provide: SdcMenuToken, useValue: {} },
+                        { provide: CompositionService, useValue: {} },
+                        { provide: SdcUiServices.ModalService, useValue: {}},
+                        { provide: ServiceServiceNg2, useValue: {} },
+                        { provide: WorkspaceService, useValue: {} },
+                        { provide: ComponentInstanceServiceNg2, useValue: {} },
+                        { provide: EventListenerService, useValue: eventListenerServiceStub },
+                        { provide: TranslateService, useValue: {}}
+                    ]
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(InfoTabComponent);
+                let comp = fixture.componentInstance;
+
+            });
+        })
+    );
+
+
+    it('can load instance', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    describe('Version dropdown', () => {
+        it('is undefined for topologyTemplate', () => {
+            fixture.componentInstance.component = <TopologyTemplate>{};
+            fixture.componentInstance.initEditResourceVersion(fixture.componentInstance.component, fixture.componentInstance.flatLeftPaletteElementsFromService(leftPaletteElements));
+            expect(fixture.componentInstance.versions).toBe(undefined);
+        });
+        it('does not contain the highest minor version if it is checked out', () => {
+            fixture.componentInstance.component = new ComponentInstance();
+            fixture.componentInstance.component.allVersions =  
+            {'1.0': "9c829122-af05-4bc9-b537-5d84f4c8ae25", '1.1': "930d56cb-868d-4e35-bd0f-e737d2fdb171"};
+            fixture.componentInstance.component.version = "1.0";
+            fixture.componentInstance.component.uuid = "a8cf015e-e4e5-4d4b-a01e-8624e8d36095";
+            fixture.componentInstance.initEditResourceVersion(fixture.componentInstance.component, fixture.componentInstance.flatLeftPaletteElementsFromService(leftPaletteElements));
+            expect(fixture.componentInstance.versions).toHaveLength(1);
+        });
+    });
+
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.ts
new file mode 100644
index 0000000000..45f31e7b35
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.ts
@@ -0,0 +1,189 @@
+import { Component, OnInit, Input, Inject, OnDestroy } from '@angular/core';
+import {
+    PolicyInstance,
+    GroupInstance,
+    Component as TopologyTemplate,
+    ComponentInstance,
+    LeftPaletteComponent,
+    FullComponentInstance
+} from "app/models";
+import {Store} from "@ngxs/store";
+import { EVENTS, GRAPH_EVENTS } from 'app/utils';
+import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
+import { CompositionPaletteService } from "app/ng2/pages/composition/palette/services/palette.service";
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from "onap-ui-angular";
+import { SdcMenuToken, IAppMenu } from "app/ng2/config/sdc-menu.config";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import { ServiceServiceNg2 } from "app/services-ng2";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+import { EventListenerService } from "app/services";
+import * as _ from 'lodash';
+import {SelectedComponentType, TogglePanelLoadingAction} from "../../../common/store/graph.actions";
+import Dictionary = _.Dictionary;
+
+
+@Component({
+    selector: 'panel-info-tab',
+    templateUrl: './info-tab.component.html',
+    styleUrls: ['./info-tab.component.less'],
+    // providers: [SdcUiServices.ModalService]
+})
+export class InfoTabComponent implements OnInit, OnDestroy {
+
+    @Input() isViewOnly: boolean;
+    @Input() componentType: SelectedComponentType;
+    @Input() component: TopologyTemplate | PolicyInstance | GroupInstance | ComponentInstance;
+    public versions: IDropDownOption[];
+    private leftPalletElements: LeftPaletteComponent[];
+    private isDisabledFlag: boolean;
+    private isComponentSelectedFlag: boolean;
+
+    constructor(private store: Store,
+                private compositionPaletteService: CompositionPaletteService,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService,
+                private modalService: SdcUiServices.ModalService,
+                private componentInstanceService: ComponentInstanceServiceNg2,
+                private serviceService: ServiceServiceNg2,
+                private eventListenerService: EventListenerService,
+                @Inject(SdcMenuToken) public sdcMenu:IAppMenu) {
+    }
+
+    ngOnInit() {
+        this.leftPalletElements = this.flatLeftPaletteElementsFromService(this.compositionPaletteService.getLeftPaletteElements());
+        this.initEditResourceVersion(this.component, this.leftPalletElements);
+        this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, (comp) => {
+            this.component = comp;
+        });
+        this.isComponentSelectedFlag = this.isComponentInstanceSelected();
+        this.isDisabledFlag = this.isDisabled();
+
+    }
+
+    ngOnDestroy() {
+        this.eventListenerService.unRegisterObserver(EVENTS.ON_CHECKOUT);
+    }
+
+    flatLeftPaletteElementsFromService = (leftPalleteElementsFromService: Dictionary<Dictionary<LeftPaletteComponent[]>>): LeftPaletteComponent[] => {
+        let retValArr = [];
+        for (const category in leftPalleteElementsFromService) {
+            for (const subCategory in leftPalleteElementsFromService[category]) {
+                retValArr = retValArr.concat(leftPalleteElementsFromService[category][subCategory].slice(0));
+            }
+        }
+        return retValArr;
+    }
+
+    private isComponentInstanceSelected () {
+        return this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
+    }
+
+    private versioning: Function = (versionNumber: string): string => {
+        let version: Array<string> = versionNumber && versionNumber.split('.');
+        return '00000000'.slice(version[0].length) + version[0] + '.' + '00000000'.slice(version[1].length) + version[1];
+    };
+
+
+    private onChangeVersion = (versionDropdown) => {
+        let newVersionValue = versionDropdown.value;
+        versionDropdown.value = (<FullComponentInstance>this.component).getComponentUid();
+
+        this.store.dispatch(new TogglePanelLoadingAction({isLoading: true}));
+
+        // let service = <Service>this.$scope.currentComponent;
+        if(this.component instanceof FullComponentInstance) {
+
+            let onCancel = (error:any) => {
+                this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+                if (error) {
+                    console.log(error);
+                }
+            };
+
+            let onUpdate = () => {
+                //this function will update the instance version than the function call getComponent to update the current component and return the new instance version
+                this.componentInstanceService.changeResourceInstanceVersion(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.component.uniqueId, newVersionValue)
+                    .subscribe((component) => {
+                        this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+                        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_VERSION_CHANGED, component);
+                    }, onCancel);
+            };
+
+            if (this.component.isService() || this.component.isServiceProxy()) {
+                this.serviceService.checkComponentInstanceVersionChange(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId,
+                    this.component.uniqueId, newVersionValue).subscribe((pathsToDelete:string[]) => {
+                    if (pathsToDelete && pathsToDelete.length) {
+                        this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+
+
+                        const {title, message} = this.sdcMenu.alertMessages['upgradeInstance'];
+                        let pathNames:string = this.getPathNamesVersionChangeModal(pathsToDelete);
+                        let onOk: Function = () => {
+                            this.store.dispatch(new TogglePanelLoadingAction({isLoading: true}));
+
+                            onUpdate();
+                        };
+                        const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.info, callback: onOk, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+                        const cancelButton = {testId: "Cancel", text: "Cancel", type: SdcUiCommon.ButtonType.secondary, callback: <Function>onCancel, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+                        const modal = this.modalService.openInfoModal(title, message.format([pathNames]), 'confirm-modal', [okButton, cancelButton]);
+                        modal.getCloseButton().onClick(onCancel);
+                    } else {
+                        onUpdate();
+                    }
+                }, onCancel);
+            } else {
+                onUpdate();
+            }
+        }
+    };
+
+
+    private getPathNamesVersionChangeModal = (pathsToDelete:string[]):string => {
+        const relatedPaths = _.filter(this.compositionService.forwardingPaths, path =>
+            _.find(pathsToDelete, id =>
+                path.uniqueId === id
+            )
+        ).map(path => path.name);
+        const pathNames = _.join(relatedPaths, ', ') || 'none';
+        return pathNames;
+    };
+
+
+    private initEditResourceVersion = (component, leftPaletteComponents): void => {
+        if(this.component instanceof ComponentInstance) {
+
+            this.versions = [];
+            let sorted:any = _.sortBy(_.toPairs(component.allVersions), (item) => {
+                return item[0] !== "undefined" && this.versioning(item[0]);
+            });
+            _.forEach(sorted, (item) => {
+                this.versions.push({label: item[0], value: item[1]});
+            });
+
+            let highestVersion = _.last(sorted)[0];
+
+            if (parseFloat(highestVersion) % 1) { //if highest is minor, make sure it is the latest checked in -
+                let latestVersionComponent: LeftPaletteComponent = _.maxBy(
+                    _.filter(leftPaletteComponents, (leftPaletteComponent: LeftPaletteComponent) => { //latest checked in
+                        return (leftPaletteComponent.systemName === component.systemName || leftPaletteComponent.uuid === component.uuid);
+                    })
+                    , (component) => {
+                        return component.version
+                    });
+
+                let latestVersion: string = latestVersionComponent ? latestVersionComponent.version : highestVersion;
+
+                if (latestVersion && highestVersion != latestVersion) { //highest is checked out - remove from options
+                    this.versions = this.versions.filter(version => version.label != highestVersion);
+                }
+            }
+        }
+    }
+
+    private isDisabled() {
+        return this.isViewOnly || this.component['archived'] || this.component['resourceType'] === 'CVFC'
+    }
+
+};
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tab.component.ts
new file mode 100644
index 0000000000..c148a4e579
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tab.component.ts
@@ -0,0 +1,55 @@
+import { NgModule, Component, Compiler, ViewContainerRef, ViewChild, Input, ComponentRef, ComponentFactoryResolver, ChangeDetectorRef } from '@angular/core';
+import {Component as TopologyTemplate} from "app/models";
+import { SdcUiServices } from "onap-ui-angular";
+
+// Helper component to add dynamic tabs
+@Component({
+  selector: 'panel-tab',
+  template: `<div #content></div>`
+})
+export class PanelTabComponent {
+  @ViewChild('content', { read: ViewContainerRef }) content;
+  @Input() isActive:boolean;
+  @Input() panelTabType;
+  @Input() input;
+  @Input() isViewOnly:boolean;
+  @Input() component:TopologyTemplate;
+  @Input() componentType;
+  cmpRef: ComponentRef<any>;
+  private isViewInitialized: boolean = false;
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver,
+    private cdRef: ChangeDetectorRef) { }
+
+  updateComponent() {
+    if (!this.isViewInitialized || !this.isActive) {
+      return;
+    }
+    if (this.cmpRef) {
+      this.cmpRef.destroy();
+    }
+
+    let factory = this.componentFactoryResolver.resolveComponentFactory(this.panelTabType);
+    this.cmpRef = this.content.createComponent(factory);
+    this.cmpRef.instance.input = this.input;
+    this.cmpRef.instance.isViewOnly = this.isViewOnly;
+    this.cmpRef.instance.component = this.component;
+    this.cmpRef.instance.componentType = this.componentType;
+    this.cdRef.detectChanges();
+  }
+
+  ngOnChanges() {
+    this.updateComponent();
+  }
+
+  ngAfterViewInit() {
+    this.isViewInitialized = true;
+    this.updateComponent();
+  }
+
+  ngOnDestroy() {
+    if (this.cmpRef) {
+      this.cmpRef.destroy();
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less
new file mode 100644
index 0000000000..b3c03f85c5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less
@@ -0,0 +1,65 @@
+@import '../../../../../../assets/styles/variables';
+@import '../../../../../../assets/styles/override';
+
+
+// ---------------------------------------------------------------------------------------------------
+///* override sdc-ui library tabs */
+// ---------------------------------------------------------------------------------------------------
+
+
+:host ::ng-deep .sdc-tabs {
+
+    .sdc-tabs-list {
+        display: flex;
+        border-bottom: 1px solid @sdcui_color_silver;
+        min-height: min-content;
+    }
+    .sdc-tab {
+        background-color: @sdcui_color_white;
+        border: 1px solid @sdcui_color_silver;
+        border-left: none;
+        border-bottom: none;
+        height: 36px;
+        width: 60px;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+
+
+        &.sdc-tab-active {
+            background-color: @sdcui_color_silver;
+            border-bottom: none;
+        }
+        &[disabled] {
+            opacity: 0.3;
+            cursor: default;
+        }
+    }
+    &.sdc-tabs-header {
+        .sdc-tab {
+            font-size: 24px;
+        }
+    }
+    &.sdc-tabs-menu {
+        .sdc-tab {
+            font-size: 14px;
+            padding: 0px 10px 4px 10px;          
+        }
+    }
+    .sdc-tab-content {
+        margin-top: 0;
+        flex:1;
+        overflow-y:auto;
+    }
+}
+
+
+:host ::ng-deep .expand-collapse-title {
+    margin-top: 1px;
+    background-color: #eaeaea;
+    color: #5a5a5a;
+    font-family: OpenSans-Semibold, sans-serif;
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.html
deleted file mode 100644
index 2a1c58c4cf..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<ng2-expand-collapse state="0">
-    <header tooltip="General Information">General Info</header>
-    <content>
-        <!-- TYPE -->
-        <div class="component-details-panel-item">
-            <span class="name" [innerHTML]="'GENERAL_LABEL_TYPE' | translate"></span>
-            <span class="value" data-tests-id="rightTab_componentType" tooltip="{{policy.policyTypeUid}}">{{policy.policyTypeUid}}</span>
-        </div>
-
-        <!-- CATEGORY -->
-        <div class="component-details-panel-item">
-            <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
-            <span class="value" data-tests-id="rightTab_category" tooltip="Policy">Policy</span>
-        </div>
-
-        <!-- SUB CATEGORY -->
-        <div class="component-details-panel-item">
-            <span class="name" [innerHTML]="'GENERAL_LABEL_SUB_CATEGORY' | translate"></span>
-            <span class="value" data-tests-id="rightTab_subCategory" tooltip="Policy">Policy</span>
-        </div>
-
-        <!-- VERSION -->
-        <div class="component-details-panel-item">
-            <span class="name" [innerHTML]="'GENERAL_LABEL_VERSION' | translate"></span>
-            <span class="value" data-tests-id="rightTab_version" tooltip="{{policy.version}}">{{policy.version}}</span>
-        </div>
-
-        <!-- DESCRIPTION -->
-        <div class="component-details-panel-item description">
-            <span class="name" [innerHTML]="'GENERAL_LABEL_DESCRIPTION' | translate"></span>
-            <span class="value" ellipsis="policy.description" max-chars="55" data-tests-id="rightTab_description">{{policy.description}}</span>
-        </div>
-    </content>
-</ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.html
deleted file mode 100644
index fe1f6b4f0d..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<ng2-expand-collapse state="0">
-    <header tooltip="Properties">Properties</header>
-    <content>
-        <ul>
-            <li *ngFor="let property of properties; let i = index"
-                class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow">
-                <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label hand"
-                     [attr.data-tests-id]="'propertyName_'+property.name"
-                     tooltip="{{property.name}}"
-                     (click)="!isViewOnly && editProperty(property)">{{property.name}}
-                </div>
-                <div class="i-sdc-designer-sidebar-section-content-item-property-value"
-                     [attr.data-tests-id]="'value_'+property.name"
-                     tooltip="{{property.value || property.defaultValue}}">{{property.value || property.defaultValue}}
-                </div>
-            </li>
-        </ul>
-
-        <div *ngIf="properties.length===0" class="component-details-panel-tab-no-data">
-            <div class="component-details-panel-tab-no-data-title">No properties to display</div>
-        </div>
-    </content>
-</ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.less
deleted file mode 100644
index e69de29bb2..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.less
+++ /dev/null
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.html
deleted file mode 100644
index 8d1730f68c..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<sdc-tabs>
-    <sdc-tab titleIcon="info-circle">
-        <policy-information-tab [policy]="policy" [isViewOnly]="isViewOnly" *ngIf="policy"></policy-information-tab>
-    </sdc-tab>
-    <sdc-tab titleIcon="inputs-o">
-        <policy-targets-tab [policy]="policy" [topologyTemplate]="topologyTemplate" [isViewOnly]="isViewOnly" (isLoading)="setIsLoading($event)" *ngIf="policy"></policy-targets-tab>
-    </sdc-tab>
-    <sdc-tab titleIcon="settings-o">
-        <policy-properties-tab [policy]="policy" [topologyTemplate]="topologyTemplate" [isViewOnly]="isViewOnly" *ngIf="policy"></policy-properties-tab>
-    </sdc-tab>
-</sdc-tabs>
-
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.ts
deleted file mode 100644
index 1e2739901d..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, Inject, Input, Output, EventEmitter, AfterViewInit, OnChanges } from "@angular/core";
-import { TranslateService } from './../../../../../shared/translator/translate.service';
-import { PoliciesService } from "../../../../../services/policies.service";
-import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
-import { PolicyInstance } from 'app/models/graph/zones/policy-instance';
-import { GRAPH_EVENTS } from './../../../../../../utils/constants';
-import { EventListenerService } from 'app/services/event-listener-service';
-import { ZoneInstance } from 'app/models/graph/zones/zone-instance';
-import { SimpleChanges } from "@angular/core/src/metadata/lifecycle_hooks";
-
-@Component({
-    selector: 'policy-tabs',
-    templateUrl: './policy-tabs.component.html'
-})
-export class PolicyTabsComponent implements OnChanges {
- 
-    @Input() topologyTemplate:TopologyTemplate;
-    @Input() selectedZoneInstanceType:string;
-    @Input() selectedZoneInstanceId:string;
-    @Input() isViewOnly: boolean;
-    @Output() isLoading: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private policy:PolicyInstance;
-
-    constructor(private translateService:TranslateService, 
-                private policiesService:PoliciesService
-            ) {
-
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.initPolicy();
-    }
-
-    private initPolicy = ():void => {
-        this.isLoading.emit(true);
-        this.policiesService.getSpecificPolicy(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId).subscribe(
-            policy => {
-                this.policy = policy;
-                console.log(JSON.stringify(policy));
-            },
-            error => console.log("Error getting policy!"),
-            () => this.isLoading.emit(false)
-        );
-    }
-
-    private setIsLoading = (value) :void => {
-        this.isLoading.emit(value);
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.module.ts
deleted file mode 100644
index 38dc19e1af..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.module.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-import { NgModule } from "@angular/core";
-import { HttpModule } from "@angular/http";
-import { FormsModule } from "@angular/forms";
-import { BrowserModule } from "@angular/platform-browser";
-import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
-import { ExpandCollapseComponent } from 'app/ng2/components/ui/expand-collapse/expand-collapse.component';
-import { PoliciesService } from "../../../../../services/policies.service";
-import { PolicyInformationTabComponent } from "./policy-information-tab.component";
-import { PolicyTargetsTabComponent } from "./policy-targets-tab.component";
-import { PolicyTabsComponent } from "./policy-tabs.component";
-import { PolicyPropertiesTabComponent } from "./policy-properties-tab.component";
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { TranslateModule } from './../../../../../shared/translator/translate.module';
-
-@NgModule({
-    declarations: [
-        PolicyInformationTabComponent,
-        PolicyTargetsTabComponent,
-        PolicyPropertiesTabComponent,
-        PolicyTabsComponent
-    ],
-    imports: [
-        BrowserModule,
-        FormsModule,
-        HttpModule,
-        SdcUiComponentsModule,
-        TranslateModule,
-        UiElementsModule
-    ],
-    entryComponents: [
-        PolicyInformationTabComponent,
-        PolicyTargetsTabComponent,
-        PolicyPropertiesTabComponent,
-        PolicyTabsComponent,
-        ExpandCollapseComponent
-    ],
-    exports: [
-        PolicyInformationTabComponent,
-        PolicyTargetsTabComponent,
-        PolicyPropertiesTabComponent,
-        PolicyTabsComponent
-    ],
-    providers: [
-        PoliciesService
-    ]
-})
-export class PolicyTabsModule {
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.less
deleted file mode 100644
index cd7ace2b6f..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.less
+++ /dev/null
@@ -1,12 +0,0 @@
-/deep/ 
-.component-details-panel-tab-policy-targets {
-    .component-details-panel-large-item {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-    .w-sdc-designer-sidebar-section-title {
-        display: flex;
-        justify-content: space-between;
-    }
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.html
index e263836fb1..838fd8bb51 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.html
@@ -14,7 +14,7 @@
   ~ limitations under the License.
   -->
  
-<div class="w-sdc-designer-sidebar-section-title" titleTooltip="Targets">Targets
+<h1 class="w-sdc-designer-sidebar-section-title" titleTooltip="Targets">Targets
     <svg-icon-label *ngIf="!isViewOnly"
                     class="add-policy-button"
                     name="plus-circle-o"
@@ -24,7 +24,7 @@
                     labelPlacement="right"
                     (click)="openAddTargetModal()">
     </svg-icon-label>
-</div>
+</h1>
 <div class="expand-collapse-content">
     <ul>
         <li *ngFor="let target of targets; let i = index" class="component-details-panel-large-item"
@@ -40,7 +40,7 @@
         </li>
     </ul>
 
-    <div *ngIf="targets.length===0" class="component-details-panel-tab-no-data">
+    <div *ngIf="!targets || targets.length===0" class="component-details-panel-tab-no-data">
         <div class="component-details-panel-tab-no-data-title">No data to display yet</div>
         <div class="component-details-panel-tab-no-data-content">Add targets to policy to see targets</div>
     </div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/base/base-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.less
index aa8e75115f..d16a1595df 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/base/base-tab.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.less
@@ -1,8 +1,6 @@
 @import './../../../../../../../assets/styles/mixins';
-@import "./../../../../../../../assets/styles/variables-old";
-@import './../../../../../../../assets/styles/mixins_old';
 
-/deep/ 
+
 .expand-collapse-content {
     padding: 20px;
 }
@@ -25,7 +23,9 @@
     white-space: nowrap;
     height: 32px;
     line-height: 32px;
-    vertical-align: middle;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
     &:hover {
         background-color: #f8f8f8;
@@ -37,30 +37,25 @@
     }
 }
 
-.component-details-panel-item {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    height: 22px;
-    line-height: 22px;
-    vertical-align: middle;
-
-    &.description {
-        margin-top: 28px;
-        white-space: normal;
-        word-wrap: break-word;
-        .value {
-            max-width: none;
-            font-weight: normal;
-            font-family: @font-opensans-regular;
-        }
-    }
-
-    .name { font-family: OpenSans-Semibold, sans-serif; }
-    .value { }
-}
-
 .component-details-panel-item-delete {
     cursor: pointer;
     visibility: hidden;
 }
+
+/deep/ .w-sdc-designer-sidebar-section-title {
+    color: #5a5a5a;
+    font-family: OpenSans-Semibold, sans-serif;
+    font-size: 14px;
+    background-color: #eaeaea;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-transform: uppercase;
+    line-height: 32px;
+    padding: 0 10px 0 20px;
+    margin-top: 1px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.spec.ts
new file mode 100644
index 0000000000..7774138cab
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.spec.ts
@@ -0,0 +1,113 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { Observable } from 'rxjs/Rx';
+import { Mock } from 'ts-mockery';
+import { ConfigureFn, configureTests } from '../../../../../../../jest/test-config.helper';
+import { ComponentMetadata } from '../../../../../../models/component-metadata';
+import { EventListenerService } from '../../../../../../services/event-listener-service';
+import { TranslateService } from '../../../../../shared/translator/translate.service';
+import { WorkspaceService } from '../../../../workspace/workspace.service';
+import { CompositionService } from '../../../composition.service';
+import { PolicyTargetsTabComponent } from "app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component";
+import { PoliciesService } from "app/services-ng2";
+import { PolicyInstance, GroupInstance } from "app/models";
+import { NgxsModule } from "@ngxs/store";
+import { GraphState } from "app/ng2/pages/composition/common/store/graph.state";
+import { WorkspaceState } from "app/ng2/store/states/workspace.state";
+import { TargetUiObject } from "app/models/ui-models/ui-target-object";
+import { TargetOrMemberType } from "app/utils";
+
+
+
+
+describe('policy targets tab component', () => {
+
+    let fixture: ComponentFixture<PolicyTargetsTabComponent>;
+    let component: PolicyTargetsTabComponent;
+
+    let policiesServiceMock = Mock.of<PoliciesService>(
+        {
+            updateTargets: jest.fn().mockImplementation((compType, uid, policyUniqueId, updatedTargets) => {
+                    if (updatedTargets === undefined) {
+                        return Observable.throwError('error');
+                    } else {
+                        return Observable.of(updatedTargets);
+                    }
+                }
+    )});
+
+    let compositionServiceMock = {
+        componentInstances: [{uniqueId: '1', name: 'inst1'},
+                    {uniqueId: '2', name: 'inst2'},
+                    {uniqueId: '3', name: 'inst3'},
+                    {uniqueId: '4', name: 'inst4'},
+                    {uniqueId: '5', name: 'inst5'}
+        ],
+        groupInstances : [
+            Mock.of<GroupInstance>({uniqueId: "group1", name: "group1"}),
+            Mock.of<GroupInstance>({uniqueId: "group2", name: "group2"}),
+            Mock.of<GroupInstance>({uniqueId: "group3", name: "group3"})
+        ]
+    };
+
+    let workspaceServiceMock = {
+        metadata: Mock.of<ComponentMetadata>()
+    };
+
+    let modalServiceMock = {
+        openInfoModal: jest.fn(),
+        openCustomModal: jest.fn().mockImplementation(() => { return  {
+            innerModalContent: { instance: { existingElements: targetsToAdd }},
+            closeModal: jest.fn()
+        }})
+    };
+
+    let loaderServiceMock = {
+        activate: jest.fn(),
+        deactivate: jest.fn()
+    };
+
+    const targetsToAdd = [
+        <TargetUiObject>{uniqueId: '1', name: 'inst1', type: TargetOrMemberType.COMPONENT_INSTANCES},
+        <TargetUiObject>{uniqueId: "group1", name: "group1", type: TargetOrMemberType.GROUPS}
+    ];
+
+    const policyInstanceMock = Mock.of<PolicyInstance>(
+        { getTargetsAsUiObject: jest.fn().mockImplementation( () => targetsToAdd)
+    });
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+                declarations: [PolicyTargetsTabComponent],
+                imports: [NgxsModule.forRoot([WorkspaceState])],
+                schemas: [NO_ERRORS_SCHEMA],
+                providers: [
+                    {provide: TranslateService, useValue: { translate: jest.fn() }},
+                    {provide: PoliciesService, useValue: policiesServiceMock},
+                    {provide: SdcUiServices.ModalService, useValue: modalServiceMock },
+                    {provide: EventListenerService, useValue: {} },
+                    {provide: CompositionService, useValue: compositionServiceMock },
+                    {provide: WorkspaceService, useValue: workspaceServiceMock},
+                    {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+                ],
+        });
+        
+        fixture = TestBed.createComponent(PolicyTargetsTabComponent);
+        component = fixture.componentInstance;
+        component.policy = policyInstanceMock;
+    });
+    
+
+    it('if there are no existing targets, all component instances AND all groups are available for adding', () => {
+        component.targets = [];
+        const optionalTargetsToAdd = component.getOptionalsTargetsToAdd();
+        expect(optionalTargetsToAdd).toHaveLength(8);
+    });
+
+    it('list of available instances to add does not include existing targets', () => {
+        component.targets = targetsToAdd;
+        const optionalMembersToAdd = component.getOptionalsTargetsToAdd();
+        expect(optionalMembersToAdd).toHaveLength(6);
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.ts
index b79f4d9e07..f117290397 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.ts
@@ -19,84 +19,106 @@
  */
 
 import * as _ from "lodash";
-import { Component, Input, Output, EventEmitter, OnChanges, HostBinding, OnDestroy } from "@angular/core";
+import { Component, Input, Output, EventEmitter, OnChanges, HostBinding, OnDestroy, OnInit } from "@angular/core";
 import { TranslateService } from './../../../../../shared/translator/translate.service';
-import { Component as TopologyTemplate } from "app/models";
 import { PoliciesService } from "../../../../../services/policies.service";
-import { PolicyInstance, PolicyTargetsMap } from './../../../../../../models/graph/zones/policy-instance';
-import { SimpleChanges } from "@angular/core/src/metadata/lifecycle_hooks";
-import { SdcUiComponents } from "sdc-ui/lib/angular";
-import { IModalConfig } from "sdc-ui/lib/angular/modals/models/modal-config";
+import { PolicyInstance } from './../../../../../../models/graph/zones/policy-instance';
+import { SdcUiComponents, SdcUiCommon, SdcUiServices } from "onap-ui-angular";
 import { AddElementsComponent } from "../../../../../components/ui/modal/add-elements/add-elements.component";
 import { TargetUiObject } from "../../../../../../models/ui-models/ui-target-object";
 import { ComponentInstance } from "../../../../../../models/componentsInstances/componentInstance";
 import { TargetOrMemberType } from "../../../../../../utils/constants";
 import { GRAPH_EVENTS } from 'app/utils';
 import { EventListenerService } from 'app/services/event-listener-service';
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { Store } from "@ngxs/store";
+import { Select } from "@ngxs/store";
+import { Observable } from "rxjs";
+import { tap } from "rxjs/operators";
+import {GraphState} from "../../../common/store/graph.state";
 
 @Component({
     selector: 'policy-targets-tab',
     templateUrl: './policy-targets-tab.component.html',
-    styleUrls: ['./../base/base-tab.component.less', 'policy-targets-tab.component.less']
+    styleUrls: ['policy-targets-tab.component.less']
 })
+ 
+export class PolicyTargetsTabComponent implements OnInit {
 
-export class PolicyTargetsTabComponent implements OnChanges, OnDestroy {
+    @Input() input:any;
 
-    private targets: Array<TargetUiObject>; // UI object to hold all targets with names.
 
-    @Input() policy: PolicyInstance;
-    @Input() topologyTemplate: TopologyTemplate;
     @Input() isViewOnly: boolean;
-    @Output() isLoading: EventEmitter<boolean> = new EventEmitter<boolean>();
     @HostBinding('class') classes = 'component-details-panel-tab-policy-targets';
+    @Select(GraphState.getSelectedComponent) policy$: Observable<PolicyInstance>;
+    public policy: PolicyInstance;
+    private subscription;
+    
+    private addModalInstance: SdcUiComponents.ModalComponent;
+    public targets: Array<TargetUiObject>; // UI object to hold all targets with names.
+
 
     constructor(private translateService: TranslateService,
         private policiesService: PoliciesService,
-        private modalService: SdcUiComponents.ModalService,
-        private eventListenerService: EventListenerService
-    ) {
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.initTargets)
-    }
+        private modalService: SdcUiServices.ModalService,
+        private eventListenerService: EventListenerService,
+        private compositionService: CompositionService,
+        private workspaceService: WorkspaceService,
+        private loaderService: SdcUiServices.LoaderService,
+        private store: Store
+    ) { }
 
-    ngOnChanges(changes:SimpleChanges):void {
-        this.initTargets();
+    ngOnInit() {
+        this.subscription = this.policy$.pipe(
+            tap((policy) => {
+                if(policy instanceof PolicyInstance){
+                    this.policy = policy;
+                    this.targets = this.policy.getTargetsAsUiObject(<ComponentInstance[]>this.compositionService.componentInstances, this.compositionService.groupInstances);                      
+                }
+            })).subscribe(); 
     }
 
-    ngOnDestroy() {
-        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE);
+    ngOnDestroy () {
+        if(this.subscription)
+            this.subscription.unsubscribe();
     }
 
     deleteTarget(target: TargetUiObject): void {
-        this.isLoading.emit(true);
-        this.policiesService.deletePolicyTarget(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.policy, target.uniqueId, target.type).subscribe(
+        this.loaderService.activate();
+        this.policiesService.deletePolicyTarget(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.policy, target.uniqueId, target.type).subscribe(
             (policyInstance:PolicyInstance) => {
+                this.targets = this.targets.filter(item => item.uniqueId !== target.uniqueId);
                 this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, policyInstance);
+                // this.store.dispatch(new UpdateSelectedComponentAction({uniqueId: policyInstance.uniqueId, type:ComponentType.}));
+            },
+            error => {
+                console.log("Error deleting target!");
+                this.loaderService.deactivate();
             },
-            error => console.log("Error deleting target!"),
-            () => this.isLoading.emit(false)
+            () => this.loaderService.deactivate()
         );
     }
 
-    private initTargets = (policyInstance?: PolicyInstance) => {
-        this.policy = policyInstance ? policyInstance : this.policy;
-        this.targets = this.policy.getTargetsAsUiObject(this.topologyTemplate.componentInstances, this.topologyTemplate.groupInstances);
-    }
    
     addTargets = ():void => {
         
-        var targetsToAdd:Array<TargetUiObject> = this.modalService.getCurrentInstance().innerModalContent.instance.existingElements; //TODO refactor sdc-ui modal in order to return the data
+        var targetsToAdd:Array<TargetUiObject> = this.addModalInstance.innerModalContent.instance.existingElements; //TODO refactor sdc-ui modal in order to return the data
         if(targetsToAdd.length > 0) {
-            this.modalService.closeModal();
-            this.isLoading.emit(true);
-            var updatedTarget: Array<TargetUiObject> = _.union(this.targets, targetsToAdd);
-            this.policiesService.updateTargets(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.policy.uniqueId, updatedTarget).subscribe(
+            this.addModalInstance.closeModal();
+            this.loaderService.activate();
+            var updatedTargets: Array<TargetUiObject> = _.union(this.targets, targetsToAdd);
+            this.policiesService.updateTargets(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.policy.uniqueId, updatedTargets).subscribe(
                 (updatedPolicyInstance:PolicyInstance) => {
+                    this.targets = updatedTargets;
                     this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, updatedPolicyInstance);
+                    // this.store.dispatch(new UpdateSelectedComponentAction({component: updatedPolicyInstance}));
                 },
                 error => {
                     console.log("Error updating targets!");
+                    this.loaderService.deactivate();
                 },
-                () => this.isLoading.emit(false)
+                () => this.loaderService.deactivate()
             );
         }
     }
@@ -104,7 +126,7 @@ export class PolicyTargetsTabComponent implements OnChanges, OnDestroy {
     getOptionalsTargetsToAdd():Array<TargetUiObject> {
         let optionalsTargetsToAdd:Array<TargetUiObject> = [];
         // adding all instances as optional targets to add if not already exist
-        _.forEach(this.topologyTemplate.componentInstances, (instance:ComponentInstance) => {
+        _.forEach(this.compositionService.componentInstances, (instance:ComponentInstance) => {
             if (!_.some(this.targets, (target:TargetUiObject) => {
                     return target.uniqueId === instance.uniqueId
                 })) {
@@ -113,7 +135,7 @@ export class PolicyTargetsTabComponent implements OnChanges, OnDestroy {
         });
 
         // adding all groups as optional targets to add if not already exist
-        _.forEach(this.topologyTemplate.groupInstances, (groupInstance:ComponentInstance) => { // adding all instances as optional targets to add if not already exist
+        _.forEach(this.compositionService.groupInstances, (groupInstance:ComponentInstance) => { // adding all instances as optional targets to add if not already exist
             if (!_.some(this.targets, (target:TargetUiObject) => {
                     return target.uniqueId === groupInstance.uniqueId
                 })) {
@@ -125,21 +147,20 @@ export class PolicyTargetsTabComponent implements OnChanges, OnDestroy {
     }
 
     openAddTargetModal(): void {
-        let addTargetModalConfig: IModalConfig = {
+        let addTargetModalConfig = {
             title: this.policy.name + " ADD TARGETS",
             size: "md",
-            type: "custom",
+            type: SdcUiCommon.ModalType.custom,
             testId: "addTargetsModal",
             buttons: [
                 {text: "ADD TARGETS", size: 'xsm', callback: this.addTargets, closeModal: false},
                 {text: 'CANCEL', size: 'sm', type: "secondary", closeModal: true}
             ]
-        };
+        } as SdcUiCommon.IModalConfig;
         var optionalTargetsToAdd = this.getOptionalsTargetsToAdd();
-        this.modalService.openCustomModal(addTargetModalConfig, AddElementsComponent, {
+        this.addModalInstance = this.modalService.openCustomModal(addTargetModalConfig, AddElementsComponent, {
             elementsToAdd: optionalTargetsToAdd,
             elementName: "target"
         });
-
     }
 }
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html
new file mode 100644
index 0000000000..86c6fea1ef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html
@@ -0,0 +1,97 @@
+<ng2-expand-collapse state="0">
+    <header sdc-tooltip tooltip-text="{{input.title}}">{{input.title}}</header>
+    <content>
+    <div class="w-sdc-designer-sidebar-section">
+        <div *ngIf="properties">
+        <ng-container *ngFor="let key of objectKeys(properties); let idx = index">
+            <sdc-accordion [title]="groupNameByKey(key) + ' Properties'" [css-class]="'properties-accordion'" [arrow-direction]="'right'" [testId]="groupNameByKey(key) + 'properties'" [open]="true">
+                
+                <!--ng-show="isShowDetailsSection" -->
+                <div class="i-sdc-designer-sidebar-section-content-item" *ngIf="!groupPropertiesByInstance">
+                    <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" attr.data-tests-id="propertyRow"
+                            *ngFor="let property of properties[key]">
+
+                        <div class="property-details">
+                            <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
+                                    [ngClass]="{'hand enabled': !isViewOnly}"
+                                    sdc-tooltip tooltip-text="{{property.name}}"
+                                    (click)="!isViewOnly && updateProperty(property)"
+                                    attr.data-tests-id="{{property.name}}">{{property.name}}</span>
+                            <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="isPropertyOwner()"
+                                    sdc-tooltip tooltip-text="{{property.defaultValue}}">{{property.defaultValue}}</span>
+                            <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="!isPropertyOwner()"
+                                    sdc-tooltip tooltip-text="{{property.value}}"
+                                    attr.data-tests-id="value_{{property.name}}">{{property.value}}</span>
+                        </div>
+                        <div class="property-buttons">
+                            <svg-icon *ngIf="!isViewOnly && (isPropertyOwner() && !property.readonly)" name="trash-o" clickable="true" size="medium" mode="info" testId="delete_{{property.name}}" (click)="deleteProperty(property)"></svg-icon>
+                        </div>
+                    </div>
+                </div>
+                <div class="i-sdc-designer-sidebar-section-content-item" *ngIf="groupPropertiesByInstance">
+                    <ng-container *ngFor="let InstanceProperties of properties[key]; let propIndex = index">
+                        <div class="vfci-properties-group">
+                            <div class="second-level">
+                                <div class="expand-collapse-title-icon"></div>
+                                <span class="w-sdc-designer-sidebar-section-title-text" sdc-tooltip tooltip-text="{{getComponentInstanceNameFromInstanceByKey(InstanceProperties.key)}}&nbsp;Properties"
+                                        attr.data-tests-id="vfci-properties">{{getComponentInstanceNameFromInstanceByKey(InstanceProperties.key) + ' Properties'}}</span>
+                            </div>
+                        </div>
+                        <div  class="w-sdc-designer-sidebar-section-content instance-properties {{propIndex}}">
+                            <div class="i-sdc-designer-sidebar-section-content-item">
+                                <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" attr.data-tests-id="propertyRow"
+                                        *ngFor="let instanceProperty of InstanceProperties.value">
+                                    <div>
+                                        <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
+                                                [ngClass]="{'hand enabled': !isViewOnly}"
+                                                sdc-tooltip tooltip-text="{{instanceProperty.name}}"
+                                                attr.data-tests-id="vfci-property">{{instanceProperty.name}}</span>
+                                    </div>
+                                    <div>
+                                        <span class="i-sdc-designer-sidebar-section-content-item-property-value"
+                                                sdc-tooltip tooltip-text="{{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}">
+                                            {{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+                <!--<div  class="w-sdc-designer-sidebar-section-footer" *ngIf="(!isViewOnly && isPropertyOwner()) || showAddPropertyButton">-->
+                    <!--<button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" attr.data-tests-id="addGrey" (click)="addProperty()" type="button">-->
+                        <!--Add Property-->
+                    <!--</button>-->
+                <!--</div>-->
+            </sdc-accordion>
+        </ng-container>
+        </div>
+
+        <!--attributes-->
+        <div *ngIf="attributes">
+        <ng-container *ngFor="let key of objectKeys(attributes); let attrIndex = index">
+            <sdc-accordion [title]="groupNameByKey(key) + ' Attributes'" [arrow-direction]="'right'" [testId]="groupNameByKey(key) + 'attributes'" [css-class]="'attributes-accordion'">
+                <!--ng-show="isShowDetailsSection" -->
+                    <div class="i-sdc-designer-sidebar-section-content-item">
+                        <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute"
+                                *ngFor="let attribute of attributes[key]">
+                            <div>
+                                <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
+                                        [ngClass]="{'hand enabled': !isViewOnly}"
+                                        sdc-tooltip tooltip-text="{{attribute.name}}"
+                                        (click)="!isViewOnly && viewAttribute(attribute)"
+                                        attr.data-tests-id="{{attribute.name}}-attr">{{attribute.name}}</span>
+                            </div>
+                            <div>
+                                <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="isPropertyOwner()"
+                                        sdc-tooltip tooltip-text="{{attribute.defaultValue}}">{{attribute.defaultValue}}</span>
+                                <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="!isPropertyOwner()"
+                                        sdc-tooltip tooltip-text="{{attribute.value}}" attr.data-tests-id="value-of-{{attribute.name}}">{{attribute.value}}</span>
+                            </div>
+                        </div>
+                    </div>
+            </sdc-accordion>
+        </ng-container>
+        </div>
+    </div>            
+    </content>
+</ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less
new file mode 100644
index 0000000000..5cb0697da1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less
@@ -0,0 +1,66 @@
+.scroll-container {
+    display: flex;
+    overflow-y: auto;
+}
+
+.i-sdc-designer-sidebar-section-content-item-property-and-attribute {
+    color: #666666;
+    font-family: OpenSans-Semibold, sans-serif;
+    font-size: 14px;
+    border-bottom: 1px solid #cdcdcd;
+    min-height: 72px;
+    padding: 15px 10px 10px 18px;
+    // position: relative;
+    display:flex;
+
+    .property-details {
+        flex:1;
+    }
+
+    .property-buttons {
+        flex: 0 0 auto;
+        align-self: center;
+    }
+}
+
+.i-sdc-designer-sidebar-section-content-item-property-and-attribute-label {
+    display: block;
+    font-weight: bold;
+    &:hover {
+        color: #3b7b9b;
+    }
+}
+
+.i-sdc-designer-sidebar-section-content-item-property-and-attribute-label, .i-sdc-designer-sidebar-section-content-item-property-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 245px;
+    white-space: nowrap;
+    display: block;
+}
+
+
+
+/deep/ .expand-collapse-content {
+    max-height: max-content;
+    padding: 10px 0;
+
+    .sdc-accordion .sdc-accordion-header {
+        
+            background-color: #e6f6fb;
+            border-left: solid #009fdb 4px;
+            box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3);
+            margin-bottom: 2px;
+            width: auto;
+            height: auto;
+            padding: 10px;
+            color: #666666;
+            font-family: OpenSans-Semibold, sans-serif;
+            font-size: 14px;
+        
+    }
+
+    /deep/.sdc-accordion .sdc-accordion-body {
+        padding-left: 0;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts
new file mode 100644
index 0000000000..b4b8248ed0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts
@@ -0,0 +1,212 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Store } from '@ngxs/store';
+import {
+    AttributeModel,
+    AttributesGroup,
+    Component as TopologyTemplate,
+    ComponentMetadata,
+    FullComponentInstance,
+    PropertiesGroup,
+    PropertyModel
+} from 'app/models';
+import { CompositionService } from 'app/ng2/pages/composition/composition.service';
+import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
+import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
+import { ResourceNamePipe } from 'app/ng2/pipes/resource-name.pipe';
+import { TopologyTemplateService } from 'app/ng2/services/component-services/topology-template.service';
+import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response';
+import { TranslateService } from 'app/ng2/shared/translator/translate.service';
+import { ModalsHandler } from 'app/utils';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import {SelectedComponentType, TogglePanelLoadingAction} from "../../../common/store/graph.actions";
+
+@Component({
+    selector: 'properties-tab',
+    templateUrl: './properties-tab.component.html',
+    styleUrls: ['./properties-tab.component.less']
+})
+export class PropertiesTabComponent implements OnInit {
+    attributes: AttributesGroup;
+    isComponentInstanceSelected: boolean;
+    properties: PropertiesGroup;
+    groupPropertiesByInstance: boolean;
+    propertiesMessage: string;
+    metadata: ComponentMetadata;
+    objectKeys = Object.keys;
+
+    @Input() isViewOnly: boolean;
+    @Input() componentType: SelectedComponentType;
+    @Input() component: FullComponentInstance | TopologyTemplate;
+    @Input() input: {title: string};
+
+    constructor(private store: Store,
+                private workspaceService: WorkspaceService,
+                private compositionService: CompositionService,
+                private modalsHandler: ModalsHandler,
+                private topologyTemplateService: TopologyTemplateService,
+                private modalService: SdcUiServices.ModalService,
+                private translateService: TranslateService,
+                private groupByPipe: GroupByPipe) {
+    }
+
+    ngOnInit() {
+        this.metadata = this.workspaceService.metadata;
+        this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
+        this.getComponentInstancesPropertiesAndAttributes();
+    }
+
+    public isPropertyOwner = (): boolean => {
+        return this.component instanceof TopologyTemplate && this.component.isResource();
+    }
+
+    public updateProperty = (property: PropertyModel): void => {
+        this.openEditPropertyModal(property);
+    }
+
+    public deleteProperty = (property: PropertyModel): void => {
+
+        const onOk: Function = (): void => {
+            this.store.dispatch(new TogglePanelLoadingAction({isLoading: true}));
+            this.topologyTemplateService.deleteProperty(this.component.componentType, this.component.uniqueId, property.uniqueId)
+                .subscribe((response) => {
+                    this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+                    this.component.properties = this.component.properties.filter((prop) => prop.uniqueId !==  property.uniqueId);
+                    this.initComponentProperties();
+                }, () => {
+                    this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+                });
+        };
+
+        const title: string = this.translateService.translate('PROPERTY_VIEW_DELETE_MODAL_TITLE');
+        const message: string = this.translateService.translate('PROPERTY_VIEW_DELETE_MODAL_TEXT', {name: property.name});
+        const okButton = {
+            testId: 'OK',
+            text: 'OK',
+            type: SdcUiCommon.ButtonType.info,
+            callback: onOk,
+            closeModal: true} as SdcUiComponents.ModalButtonComponent;
+        this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]);
+    }
+
+    public groupNameByKey = (key: string): string => {
+        switch (key) {
+            case 'derived':
+                return 'Derived';
+
+            case this.metadata.uniqueId:
+                return ResourceNamePipe.getDisplayName(this.metadata.name);
+
+            default:
+                return this.getComponentInstanceNameFromInstanceByKey(key);
+        }
+    }
+
+    public getComponentInstanceNameFromInstanceByKey = (key: string): string => {
+        let instanceName: string = '';
+        const componentInstance = this.compositionService.getComponentInstances().find((item) => item.uniqueId === key);
+        if (key !== undefined && componentInstance) {
+
+            instanceName = ResourceNamePipe.getDisplayName(componentInstance.name);
+        }
+        return instanceName;
+    }
+
+    private getComponentInstancesPropertiesAndAttributes = () => {
+        this.topologyTemplateService.getComponentInstanceAttributesAndProperties(
+            this.workspaceService.metadata.uniqueId,
+            this.workspaceService.metadata.componentType)
+            .subscribe((genericResponse: ComponentGenericResponse) => {
+                this.compositionService.componentInstancesAttributes = genericResponse.componentInstancesAttributes || new AttributesGroup();
+                this.compositionService.componentInstancesProperties = genericResponse.componentInstancesProperties;
+                this.initPropertiesAndAttributes();
+            });
+    }
+
+    private initComponentProperties = (): void => {
+        let result: PropertiesGroup = {};
+
+        this.propertiesMessage = undefined;
+        this.groupPropertiesByInstance = false;
+        if (this.component instanceof FullComponentInstance) {
+            result[this.component.uniqueId] = _.orderBy(this.compositionService.componentInstancesProperties[this.component.uniqueId], ['name']);
+            if (this.component.originType === 'VF') {
+                this.groupPropertiesByInstance = true;
+                result[this.component.uniqueId] = Array.from(this.groupByPipe.transform(result[this.component.uniqueId], 'path'));
+            }
+        } else if (this.metadata.isService()) {
+            // Temporally fix to hide properties for service (UI stack when there are many properties)
+            result = this.compositionService.componentInstancesProperties;
+            this.propertiesMessage = 'Note: properties for service are disabled';
+        } else {
+            const componentUid = this.component.uniqueId;
+            result[componentUid] = Array<PropertyModel>();
+            const derived = Array<PropertyModel>();
+            _.forEach(this.component.properties, (property: PropertyModel) => {
+                if (componentUid === property.parentUniqueId) {
+                    result[componentUid].push(property);
+                } else {
+                    property.readonly = true;
+                    derived.push(property);
+                }
+            });
+            if (derived.length) {
+                result['derived'] = derived;
+            }
+            this.objectKeys(result).forEach((key) => { result[key] =  _.orderBy(result[key], ['name']); });
+        }
+        this.properties = result;
+    }
+
+    private initComponentAttributes = (): void => {
+        let result: AttributesGroup = {};
+
+        if (this.component) {
+            if (this.component instanceof FullComponentInstance) {
+                result[this.component.uniqueId] = this.compositionService.componentInstancesAttributes[this.component.uniqueId] || [];
+            } else if (this.metadata.isService()) {
+                result = this.compositionService.componentInstancesAttributes;
+            } else {
+                result[this.component.uniqueId] = (this.component as TopologyTemplate).attributes;
+            }
+            this.attributes = result;
+            this.objectKeys(this.attributes).forEach((key) => {
+                this.attributes[key] =  _.orderBy(this.attributes[key], ['name']);
+            });
+
+        }
+    }
+
+    /**
+     * This function is checking if the component is the value owner of the current property
+     * in order to notify the edit property modal which fields to disable
+     */
+    private isPropertyValueOwner = (): boolean => {
+        return this.metadata.isService() || !!this.component;
+    }
+
+    /**
+     *  The function opens the edit property modal.
+     *  It checks if the property is from the VF or from one of it's resource instances and sends the needed property list.
+     *  For create property reasons an empty array is transferd
+     *
+     * @param property the wanted property to edit/create
+     */
+    private openEditPropertyModal = (property: PropertyModel): void => {
+        this.modalsHandler.newOpenEditPropertyModal(property,
+            (this.isPropertyOwner() ?
+                this.properties[property.parentUniqueId] :
+                this.properties[property.resourceInstanceUniqueId]) || [],
+            this.isPropertyValueOwner(), 'component', property.resourceInstanceUniqueId).then((updatedProperty: PropertyModel) => {
+                if (updatedProperty) {
+                    const oldProp = _.find(this.properties[updatedProperty.resourceInstanceUniqueId],
+                                 (prop: PropertyModel) => prop.uniqueId === updatedProperty.uniqueId);
+                    oldProp.value = updatedProperty.value;
+                }
+        });
+    }
+
+    private initPropertiesAndAttributes = (): void => {
+        this.initComponentProperties();
+        this.initComponentAttributes();
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html
new file mode 100644
index 0000000000..27e05ec1f0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html
@@ -0,0 +1,36 @@
+<div class="w-sdc-designer-sidebar-tab-content sdc-general-tab relations">
+    <div *ngIf="!isCurrentDisplayComponentIsComplex(); else complexComponentTemplate">
+        <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
+            <sdc-accordion [title]="'Capabilities'" [arrow-direction]="'right'" [testId]="'Capabilities-accordion'">
+                <div *ngFor="let capability of capabilities" class="relations-details-container">
+                    <div class="relations-name">{{capability.name}}&nbsp;</div>
+                    <div class="relations-desc"> {{capability.type}} </div>
+                </div>
+            </sdc-accordion>
+        </div>
+        <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
+            <sdc-accordion [title]="'Requirements'" [arrow-direction]="'right'" [testId]="'Requirements-accordion'">
+                <requirement-list [component]='component' [requirements]="requirements" [isInstanceSelected]="isComponentInstanceSelected"></requirement-list>
+            </sdc-accordion>
+
+        </div>
+    </div>
+
+    <ng-template #complexComponentTemplate>
+        <sdc-accordion *ngIf="capabilitiesInstancesMap" [title]="'Capabilities'" [arrow-direction]="'right'" [testId]="'Capabilities-accordion'">
+            <sdc-accordion *ngFor="let key of objectKeys(capabilitiesInstancesMap); let i = index" [title]="key">
+                    <div *ngFor="let capability of capabilitiesInstancesMap[key]" class="relations-details-container">
+                            <div class="relations-name">{{capability.name}}&nbsp;</div>
+                            <div class="relations-desc"> {{capability.type}} </div>
+                        </div>
+            </sdc-accordion>
+        </sdc-accordion>
+
+        <sdc-accordion *ngIf="requirementsInstancesMap" [title]="'Requirements'" [arrow-direction]="'right'" [testId]="'Requirements-accordion'">
+                <sdc-accordion *ngFor="let key of objectKeys(requirementsInstancesMap); let i = index" [title]="key">
+                    <requirement-list [component]='component' [requirements]="requirementsInstancesMap[key]" [isInstanceSelected]="isComponentInstanceSelected"></requirement-list>
+                </sdc-accordion>
+        </sdc-accordion>
+
+    </ng-template>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.less
new file mode 100644
index 0000000000..fe4573aadc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.less
@@ -0,0 +1,57 @@
+
+/deep/.sdc-accordion {
+    margin-bottom: 0;
+    display: grid;
+
+    .sdc-accordion-header {
+        background-color: #e6f6fb;
+        border-left: solid #009fdb 4px;
+        box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3);
+        margin-bottom: 2px;
+        width: auto;
+        height: auto;
+        padding: 10px;
+        color: #666666;
+        font-family: OpenSans-Semibold, sans-serif;
+        font-size: 14px;
+    }
+
+    .sdc-accordion-body.open {
+        padding-left: 0;
+        padding-top: 0;
+        .sdc-accordion-header { /*Second level - nested accordion */
+            background-color: #f8f8f8;
+            padding: 4px 20px 4px 37px;
+            border-bottom: 1px solid #d2d2d2;
+            border-left:none;
+            height: 30px;
+        }
+    }
+}
+
+
+.relations-details-container {
+    border-bottom: 1px solid #cdcdcd;
+    padding: 10px 10px 10px 18px;
+
+    font-size: 14px;
+    font-family: OpenSans-Regular, sans-serif;
+
+    .relations-name {
+        color: #666666;
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-transform: capitalize;
+        max-width: 240px;
+        display: inline-block;
+    }
+
+    .relations-desc {
+        color: #8c8c8c;
+        word-wrap: break-word;
+        white-space: normal;
+        max-width: 265px;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.ts
new file mode 100644
index 0000000000..03697b38f2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.ts
@@ -0,0 +1,165 @@
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Component as TopologyTemplate, Capability, Requirement, CapabilitiesGroup, RequirementsGroup, ComponentInstance, FullComponentInstance } from "app/models";
+import { Store } from "@ngxs/store";
+import { GRAPH_EVENTS } from "app/utils";
+import { ComponentGenericResponse } from "app/ng2/services/responses/component-generic-response";
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
+import { EventListenerService } from "app/services";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import {SelectedComponentType, TogglePanelLoadingAction} from "../../../common/store/graph.actions";
+
+
+export class InstanceCapabilitiesMap {
+    [key:string]:Array<Capability>;
+}
+
+export class InstanceRequirementsMap {
+    [key:string]:Array<Requirement>;
+}
+
+@Component({
+    selector: 'req-capabilities-tab',
+    templateUrl: './req-capabilities-tab.component.html',
+    styleUrls: ['./req-capabilities-tab.component.less']
+})
+export class ReqAndCapabilitiesTabComponent implements OnInit, OnDestroy {
+
+    isComponentInstanceSelected: boolean;
+    capabilities:Array<Capability>;
+    requirements:Array<Requirement>;
+    capabilitiesInstancesMap:InstanceCapabilitiesMap;
+    requirementsInstancesMap:InstanceRequirementsMap;
+    objectKeys = Object.keys;
+    
+    @Input() isViewOnly: boolean;
+    @Input() componentType: SelectedComponentType;
+    @Input() component: TopologyTemplate | FullComponentInstance;
+    @Input() input: any;
+
+
+    constructor(private store: Store,
+        private topologyTemplateService:TopologyTemplateService,
+        private workspaceService: WorkspaceService,
+        private compositionService: CompositionService,
+        private eventListenerService:EventListenerService) { }
+
+    ngOnInit(): void {
+
+        this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
+
+        this.requirements = [];
+        this.capabilities = [];
+        this.initEvents();
+        this.initRequirementsAndCapabilities();
+        
+     }
+
+     private initEvents = ():void => {
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, this.initRequirementsAndCapabilities);
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.updateRequirementCapabilities);
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE,  this.updateRequirementCapabilities);
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE,  this.updateRequirementCapabilities);
+    }
+    
+     ngOnDestroy(): void {
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, this.initRequirementsAndCapabilities);
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.updateRequirementCapabilities);
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE, this.updateRequirementCapabilities);
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, this.updateRequirementCapabilities);
+     }
+
+     public isCurrentDisplayComponentIsComplex = ():boolean => {
+        
+        if (this.component instanceof FullComponentInstance) {
+            if (this.component.originType === 'VF') {
+                return true;
+            }
+            return false;
+        } else {
+            return this.component.isComplex();
+        }
+    }
+
+    private loadComplexComponentData = () => {
+        this.store.dispatch(new TogglePanelLoadingAction({isLoading: true}));
+
+        this.topologyTemplateService.getCapabilitiesAndRequirements(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId).subscribe((response:ComponentGenericResponse) => {
+            this.workspaceService.metadata.capabilities = response.capabilities;
+            this.workspaceService.metadata.requirements = response.requirements;
+            this.setScopeCapabilitiesRequirements(response.capabilities, response.requirements);
+            this.initInstancesMap();
+            this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+        }, (error) => { this.store.dispatch(new TogglePanelLoadingAction({isLoading: false})); });
+    }
+
+
+    private extractValuesFromMap = (map:CapabilitiesGroup | RequirementsGroup):Array<any> => {
+        let values = [];
+        _.forEach(map, (capabilitiesOrRequirements:Array<Capability> | Array<Requirement>, key) => {
+                values = values.concat(capabilitiesOrRequirements)
+            }
+        );
+        return values;
+    }
+
+    private setScopeCapabilitiesRequirements = (capabilities:CapabilitiesGroup, requirements:RequirementsGroup) => {
+        this.capabilities = this.extractValuesFromMap(capabilities);
+        this.requirements = this.extractValuesFromMap(requirements);
+    }
+
+
+    private initInstancesMap = ():void => {
+
+        this.capabilitiesInstancesMap = new InstanceCapabilitiesMap();
+        _.forEach(this.capabilities, (capability:Capability) => {
+            if (this.capabilitiesInstancesMap[capability.ownerName]) {
+                this.capabilitiesInstancesMap[capability.ownerName] = this.capabilitiesInstancesMap[capability.ownerName].concat(capability);
+            } else {
+                this.capabilitiesInstancesMap[capability.ownerName] = new Array<Capability>(capability);
+            }
+        });
+
+        this.requirementsInstancesMap = new InstanceRequirementsMap();
+        _.forEach(this.requirements, (requirement:Requirement) => {
+            if (this.requirementsInstancesMap[requirement.ownerName]) {
+                this.requirementsInstancesMap[requirement.ownerName] = this.requirementsInstancesMap[requirement.ownerName].concat(requirement);
+            } else {
+                this.requirementsInstancesMap[requirement.ownerName] = new Array<Requirement>(requirement);
+            }
+        });
+    }
+
+    private initRequirementsAndCapabilities = (needUpdate?: boolean) => {
+
+        // if instance selected, we take the requirement and capabilities of the instance - always exist because we load them with the graph
+        if (this.component instanceof FullComponentInstance) {
+            this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+            this.setScopeCapabilitiesRequirements(this.component.capabilities, this.component.requirements);
+            if (this.component.originType === 'VF') {
+                this.initInstancesMap();
+            }
+        } else {
+            // if instance not selected, we take the requirement and capabilities of the VF/SERVICE, if not exist we call api
+            if (needUpdate || !this.component.capabilities || !this.component.requirements) {
+                this.loadComplexComponentData();
+
+            } else {
+                this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+                this.setScopeCapabilitiesRequirements(this.component.capabilities, this.component.requirements);
+                this.initInstancesMap();
+            }
+        }
+    }
+
+    private updateRequirementCapabilities = () => {
+        if (!this.isComponentInstanceSelected) {
+            this.loadComplexComponentData();
+        }
+    }
+
+
+
+
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.html
new file mode 100644
index 0000000000..8292729cf8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.html
@@ -0,0 +1,20 @@
+<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"
+                 *ngFor="let requirement of requirements">
+                <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 *ngIf="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>
+    
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.ts
new file mode 100644
index 0000000000..e167c47dcc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.ts
@@ -0,0 +1,40 @@
+import { Component, Input } from '@angular/core';
+import { Component as TopologyTemplate, RelationshipModel, Relationship, Requirement } from "app/models";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import { ResourceNamePipe } from "app/ng2/pipes/resource-name.pipe";
+
+@Component({
+    selector: 'requirement-list',
+    templateUrl: './requirement-list.component.html'
+})
+export class RequirementListComponent  {
+    @Input() component: TopologyTemplate;
+    @Input() requirements: Array<Requirement>;
+    @Input() isInstanceSelected:boolean;
+    
+    
+    constructor(private compositionService: CompositionService) { }
+
+
+    public getRelation = (requirement:any):any => {
+        if (this.isInstanceSelected && this.component.componentInstancesRelations) {
+            let relationItem:Array<RelationshipModel> = _.filter(this.component.componentInstancesRelations, (relation:RelationshipModel) => {
+                return relation.fromNode === this.component.uniqueId &&
+                    _.filter(relation.relationships, (relationship:Relationship) => {
+                        return relationship.relation.requirement == requirement.name && relationship.relation.requirementOwnerId == requirement.ownerId;
+                    }).length;
+            });
+
+            if (relationItem && relationItem.length) {
+                return {
+                    type: requirement.relationship.split('.').pop(),
+                    requirementName: ResourceNamePipe.getDisplayName(this.compositionService.componentInstances[_.map
+                    (this.compositionService.componentInstances, "uniqueId").indexOf(relationItem[0].toNode)].name)
+                };
+            }
+        }
+        return null;
+    };
+
+};
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-consumption-tab/service-consumption-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-consumption-tab/service-consumption-tab.component.html
new file mode 100644
index 0000000000..a52c841156
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-consumption-tab/service-consumption-tab.component.html
@@ -0,0 +1,15 @@
+<ng2-expand-collapse state="0">
+    <header sdc-tooltip tooltip-text="{{input.title}}">{{input.title}}</header>
+    <content>
+        <service-consumption
+        [parentService]="metadata"
+        [selectedService]="component"
+        [selectedServiceInstanceId]="component.uniqueId"
+        [instancesMappedList]="instancesMappedList"
+        [parentServiceInputs]="componentInputs"
+        [instancesCapabilitiesMap]="instancesCapabilitiesMap"
+        [readonly]="isViewOnly">
+        </service-consumption>
+    </content>
+</ng2-expand-collapse>
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-consumption-tab/service-consumption-tab.component.less
index e69de29bb2..e69de29bb2 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-consumption-tab/service-consumption-tab.component.less
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-consumption-tab/service-consumption-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-consumption-tab/service-consumption-tab.component.ts
new file mode 100644
index 0000000000..8715afd047
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-consumption-tab/service-consumption-tab.component.ts
@@ -0,0 +1,89 @@
+
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngxs/store';
+import {
+    CapabilitiesGroup,
+    Capability,
+    Component as TopologyTemplate,
+    ComponentInstance,
+    FullComponentInstance,
+    InputBEModel,
+    InputsGroup,
+    InterfaceModel,
+    PropertiesGroup
+} from 'app/models';
+import { ComponentMetadata } from '../../../../../../models/component-metadata';
+import { ServiceInstanceObject } from '../../../../../../models/service-instance-properties-and-interfaces';
+import { EventListenerService } from '../../../../../../services/event-listener-service';
+import { TopologyTemplateService } from '../../../../../services/component-services/topology-template.service';
+import { ComponentGenericResponse } from '../../../../../services/responses/component-generic-response';
+import { WorkspaceService } from '../../../../workspace/workspace.service';
+import { SelectedComponentType } from '../../../common/store/graph.actions';
+import { CompositionService } from '../../../composition.service';
+
+@Component({
+    selector: 'service-consumption-tab',
+    templateUrl: './service-consumption-tab.component.html',
+    styleUrls: ['./service-consumption-tab.component.less'],
+})
+export class ServiceConsumptionTabComponent {
+    isComponentInstanceSelected: boolean;
+
+    instancesMappedList: ServiceInstanceObject[];
+    componentInstancesProperties: PropertiesGroup;
+    componentInstancesInputs: InputsGroup;
+    componentInstancesInterfaces: Map<string, InterfaceModel[]>;
+    componentInputs: InputBEModel[];
+    componentCapabilities: Capability[];
+    instancesCapabilitiesMap: Map<string, Capability[]>;
+    metadata: ComponentMetadata;
+
+    @Input() isViewOnly: boolean;
+    @Input() componentType: SelectedComponentType;
+    @Input() component: TopologyTemplate | FullComponentInstance;
+    @Input() input: any;
+
+    constructor(private store: Store,
+                private topologyTemplateService: TopologyTemplateService,
+                private workspaceService: WorkspaceService,
+                private compositionService: CompositionService,
+                private eventListenerService: EventListenerService ) {}
+    ngOnInit() {
+        this.metadata = this.workspaceService.metadata;
+        this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
+        this.initInstances();
+    }
+
+    private initInstances = (): void => {
+        this.topologyTemplateService.getServiceConsumptionData(this.metadata.componentType, this.metadata.uniqueId).subscribe((genericResponse: ComponentGenericResponse) => {
+            this.componentInstancesProperties = genericResponse.componentInstancesProperties;
+            this.componentInstancesInputs = genericResponse.componentInstancesInputs;
+            this.componentInstancesInterfaces = genericResponse.componentInstancesInterfaces;
+            this.componentInputs = genericResponse.inputs;
+            this.buildInstancesCapabilitiesMap(genericResponse.componentInstances);
+            this.updateInstanceAttributes();
+        });
+    }
+
+    private buildInstancesCapabilitiesMap = (componentInstances: Array<ComponentInstance>): void => {
+        this.instancesCapabilitiesMap = new Map();
+        let flattenCapabilities = [];
+        _.forEach(componentInstances, (componentInstance) => {
+            flattenCapabilities = CapabilitiesGroup.getFlattenedCapabilities(componentInstance.capabilities);
+            this.instancesCapabilitiesMap[componentInstance.uniqueId] = _.filter(flattenCapabilities, cap => cap.properties && cap.ownerId === componentInstance.uniqueId);
+        });
+    }
+
+    private updateInstanceAttributes = (): void => {
+        if (this.isComponentInstanceSelected && this.componentInstancesProperties) {
+            this.instancesMappedList = this.compositionService.componentInstances.map((coInstance) => new ServiceInstanceObject({
+                id: coInstance.uniqueId,
+                name: coInstance.name,
+                properties: this.componentInstancesProperties[coInstance.uniqueId] || [],
+                inputs: this.componentInstancesInputs[coInstance.uniqueId] || [],
+                interfaces: this.componentInstancesInterfaces[coInstance.uniqueId] || []
+            }));
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html
new file mode 100644
index 0000000000..47351a46a1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html
@@ -0,0 +1,18 @@
+<ng2-expand-collapse state="0">
+    <header sdc-tooltip tooltip-text="{{input.title}}">{{input.title}}</header>
+    <content>
+        <div *ngIf="isComponentInstanceSelected">
+                <service-dependencies
+                    [compositeService]="metaData"
+                    [currentServiceInstance]="component"
+                    [selectedInstanceProperties]="selectedInstanceProperties"
+                    [selectedInstanceSiblings]="selectedInstanceSiblings"
+                    [selectedInstanceConstraints]="selectedInstanceConstraints"
+                    [readonly]="isViewOnly"
+                    (dependencyStatus)="notifyDependencyEventsObserver($event)"
+                    (updateRulesListEvent)="updateSelectedInstanceConstraints($event)"
+                    (loadRulesListEvent)="loadConstraints()">
+                </service-dependencies>
+        </div>
+    </content>
+</ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.less
new file mode 100644
index 0000000000..47e26e2d64
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.less
@@ -0,0 +1,3 @@
+:host /deep/ .expand-collapse-content {
+    padding: 0 0 10px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
new file mode 100644
index 0000000000..5171e3b607
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
@@ -0,0 +1,95 @@
+
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngxs/store';
+import {
+    CapabilitiesGroup,
+    Capability,
+    Component as TopologyTemplate,
+    ComponentInstance,
+    FullComponentInstance,
+    InputBEModel,
+    InputsGroup,
+    InterfaceModel,
+    PropertiesGroup,
+    PropertyBEModel,
+} from 'app/models';
+import { DEPENDENCY_EVENTS } from 'app/utils/constants';
+import { ComponentMetadata } from '../../../../../../models/component-metadata';
+import { ServiceInstanceObject } from '../../../../../../models/service-instance-properties-and-interfaces';
+import { EventListenerService } from '../../../../../../services/event-listener-service';
+import { ConstraintObject } from '../../../../../components/logic/service-dependencies/service-dependencies.component';
+import { TopologyTemplateService } from '../../../../../services/component-services/topology-template.service';
+import { ComponentGenericResponse } from '../../../../../services/responses/component-generic-response';
+import { WorkspaceService } from '../../../../workspace/workspace.service';
+import { SelectedComponentType } from '../../../common/store/graph.actions';
+import { CompositionService } from '../../../composition.service';
+
+@Component({
+    selector: 'service-dependencies-tab',
+    templateUrl: 'service-dependencies-tab.component.html',
+    styleUrls: ['service-dependencies-tab.component.less']
+})
+export class ServiceDependenciesTabComponent {
+    isComponentInstanceSelected: boolean;
+
+    selectedInstanceSiblings: ServiceInstanceObject[];
+    componentInstancesConstraints: any[];
+    selectedInstanceConstraints: ConstraintObject[];
+    selectedInstanceProperties: PropertyBEModel[];
+    componentInstanceProperties: PropertiesGroup;
+    metaData: ComponentMetadata;
+
+    @Input() isViewOnly: boolean;
+    @Input() componentType: SelectedComponentType;
+    @Input() component: FullComponentInstance | TopologyTemplate;
+    @Input() input: any;
+
+    constructor(private store: Store,
+                private topologyTemplateService: TopologyTemplateService,
+                private workspaceService: WorkspaceService,
+                private compositionService: CompositionService,
+                private eventListenerService: EventListenerService) {
+    }
+
+    ngOnInit() {
+        this.metaData = this.workspaceService.metadata;
+        this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
+        this.initInstancesWithProperties();
+        this.loadConstraints();
+        this.initInstancesWithProperties();
+    }
+
+    public loadConstraints = (): void => {
+        this.topologyTemplateService.getServiceFilterConstraints(this.metaData.componentType, this.metaData.uniqueId).subscribe((response) => {
+            this.componentInstancesConstraints = response.nodeFilterData;
+        });
+    }
+
+    public notifyDependencyEventsObserver = (isChecked: boolean): void => {
+        this.eventListenerService.notifyObservers(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, isChecked);
+    }
+
+    public updateSelectedInstanceConstraints = (constraintsList:Array<ConstraintObject>):void => {
+        this.componentInstancesConstraints[this.component.uniqueId].properties = constraintsList;
+        this.selectedInstanceConstraints = this.componentInstancesConstraints[this.component.uniqueId].properties;
+    }
+
+    private initInstancesWithProperties = (): void => {
+        this.topologyTemplateService.getComponentInstanceProperties(this.metaData.componentType, this.metaData.uniqueId).subscribe((genericResponse: ComponentGenericResponse) => {
+            this.componentInstanceProperties = genericResponse.componentInstancesProperties;
+            this.updateInstanceAttributes();
+        });
+    }
+
+    private updateInstanceAttributes = (): void => {
+        if (this.isComponentInstanceSelected && this.componentInstanceProperties) {
+            const instancesMappedList = this.compositionService.componentInstances.map((coInstance) => new ServiceInstanceObject({
+                id: coInstance.uniqueId,
+                name: coInstance.name,
+                properties: this.componentInstanceProperties[coInstance.uniqueId] || []
+            }));
+            this.selectedInstanceProperties = this.componentInstanceProperties[this.component.uniqueId];
+            this.selectedInstanceSiblings = instancesMappedList.filter((coInstance) => coInstance.id !== this.component.uniqueId);
+        }
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.html
deleted file mode 100644
index 9bb809249a..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<ng2-composition-panel-header 
-    [name]="selectedZoneInstanceName" 
-    [topologyTemplate]="topologyTemplate"
-    [selectedZoneInstanceType]="selectedZoneInstanceType"
-    [selectedZoneInstanceId]="selectedZoneInstanceId"
-    [nonCertified]="nonCertified"
-    [isViewOnly]="isViewOnly" 
-    [isLoading]="isLoading"
-></ng2-composition-panel-header>
-
-<div class="component-details-panel-tabs">
-    <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
-
-    <div *ngIf="selectedZoneInstanceType === zoneInstanceType.POLICY">
-        <policy-tabs 
-           [topologyTemplate]="topologyTemplate"
-           [selectedZoneInstanceType]="selectedZoneInstanceType"
-           [selectedZoneInstanceId]="selectedZoneInstanceId"
-           [isViewOnly]="isViewOnly"
-           (isLoading)="setIsLoading($event)"
-        ></policy-tabs>
-    </div>
-    
-    <div *ngIf="selectedZoneInstanceType === zoneInstanceType.GROUP">
-        <group-tabs 
-            [topologyTemplate]="topologyTemplate"
-            [selectedZoneInstanceType]="selectedZoneInstanceType"
-            [selectedZoneInstanceId]="selectedZoneInstanceId"
-            [isViewOnly]="isViewOnly"
-            (isLoading)="setIsLoading($event)"
-         ></group-tabs>
-    </div>
-
-</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.less
deleted file mode 100644
index 1777d54486..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.less
+++ /dev/null
@@ -1,11 +0,0 @@
-/deep/ 
-.component-details-panel {
-
-    color: #666666;
-    font-family: OpenSans-Regular, sans-serif;
-    font-size: 14px;
-
-    .component-details-panel-tabs {
-
-    }
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.ts
deleted file mode 100644
index 53599d6366..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel.component.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, Inject, Input, Output, EventEmitter, AfterViewInit, SimpleChanges, HostBinding } from "@angular/core";
-import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
-import { PolicyInstance } from 'app/models/graph/zones/policy-instance';
-import { TranslateService } from 'app/ng2/shared/translator/translate.service';
-import { ZoneInstanceType } from "app/models/graph/zones/zone-instance";
-import { GroupsService } from "../../../services/groups.service";
-import { PoliciesService } from "../../../services/policies.service";
-import { SdcUiComponents } from "sdc-ui/lib/angular";
-import { IZoneService } from "../../../../models/graph/zones/zone";
-
-@Component({
-    selector: 'ng2-composition-panel',
-    templateUrl: './panel.component.html',
-    styleUrls: ['./panel.component.less'],
-    providers: [TranslateService]
-})
-export class CompositionPanelComponent {
-
-    @Input() topologyTemplate: TopologyTemplate;
-    @Input() selectedZoneInstanceType: ZoneInstanceType;
-    @Input() selectedZoneInstanceId: string;
-    @Input() selectedZoneInstanceName: string;
-    @Input() nonCertified: boolean;
-    @Input() isViewOnly: boolean;
-    @Input() isLoading: boolean;
-
-
-    @HostBinding('class') classes = 'component-details-panel';
-
-    private zoneInstanceType = ZoneInstanceType; // Expose ZoneInstanceType to use in template.
-
-    constructor(){
-    }
-
-    private setIsLoading = (value):void => {
-        this.isLoading = value;
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel.module.ts
deleted file mode 100644
index 57f6be8b8e..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel.module.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-import {NgModule} from "@angular/core";
-import {HttpModule} from "@angular/http";
-import {FormsModule} from "@angular/forms";
-import {BrowserModule} from "@angular/platform-browser";
-import {CompositionPanelComponent} from "./panel.component";
-import {CompositionPanelHeaderModule} from "app/ng2/pages/composition/panel/panel-header/panel-header.module";
-import {GroupTabsModule} from "./panel-tabs/groups/group-tabs.module";
-import {PolicyTabsModule} from "./panel-tabs/policies/policy-tabs.module";
-import {SdcUiComponents} from "sdc-ui/lib/angular";
-import {UiElementsModule} from 'app/ng2/components/ui/ui-elements.module';
-import {AddElementsModule} from "../../../components/ui/modal/add-elements/add-elements.module";
-
-@NgModule({
-    declarations: [
-        CompositionPanelComponent
-    ],
-    imports: [
-        BrowserModule,
-        FormsModule,
-        HttpModule,
-        CompositionPanelHeaderModule,
-        PolicyTabsModule,
-        GroupTabsModule,
-        UiElementsModule,
-        AddElementsModule
-    ],
-    entryComponents: [
-        CompositionPanelComponent
-    ],
-    exports: [],
-    providers: [SdcUiComponents.ModalService]
-})
-export class CompositionPanelModule {
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap
new file mode 100644
index 0000000000..ae5445e546
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`home component should match current snapshot 1`] = `
+<home-page
+  $state={[Function Object]}
+  authService={[Function Object]}
+  cacheService={[Function Object]}
+  componentShouldReload={[Function Function]}
+  homeService={[Function Object]}
+  importVSPService={[Function Object]}
+  initFolders={[Function Function]}
+  isDefaultFilter={[Function Function]}
+  loaderService={[Function Object]}
+  modalService={[Function Object]}
+  modalsHandler={[Function Object]}
+  sdcConfig={[Function Object]}
+  sdcMenu={[Function Object]}
+  translateService={[Function Object]}
+  updateFilter={[Function Function]}
+>
+  <div
+    class="sdc-catalog-container"
+  >
+    
+    <top-nav />
+  </div>
+</home-page>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/home/folders.ts b/catalog-ui/src/app/ng2/pages/home/folders.ts
new file mode 100644
index 0000000000..036ae329b7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/home/folders.ts
@@ -0,0 +1,93 @@
+
+export interface IItemMenu {
+
+}
+
+export interface IMenuItemProperties {
+    text:string;
+    group:string;
+    state:string;
+    dist:string;
+    groupname:string;
+    states:Array<any>;
+}
+
+export class FoldersMenu {
+    private _folders:Array<FoldersItemsMenu> = [];
+
+    constructor(folders:Array<IMenuItemProperties>) {
+        let self = this;
+        folders.forEach(function (folder:IMenuItemProperties) {
+            if (folder.groupname) {
+                self._folders.push(new FoldersItemsMenuGroup(folder));
+            } else {
+                self._folders.push(new FoldersItemsMenu(folder));
+            }
+        });
+        self._folders[0].setSelected(true);
+    }
+
+    public getFolders():Array<FoldersItemsMenu> {
+        return this._folders;
+    }
+
+    public getCurrentFolder():FoldersItemsMenu {
+        let menuItem:FoldersItemsMenu = undefined;
+        this.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) {
+            if (tmpFolder.isSelected()) {
+                menuItem = tmpFolder;
+            }
+        });
+        return menuItem;
+    }
+
+    public setSelected(folder:FoldersItemsMenu):void {
+        this.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) {
+            tmpFolder.setSelected(false);
+        });
+        folder.setSelected(true);
+    }
+}
+
+export class FoldersItemsMenu implements IItemMenu {
+    public text:string;
+    public group:string;
+    public state:string;
+    public dist:string;
+    public states:Array<any>;
+
+    private selected:boolean = false;
+
+    constructor(menuProperties:IMenuItemProperties) {
+        this.text = menuProperties.text;
+        this.group = menuProperties.group;
+        this.state = menuProperties.state;
+        this.states = menuProperties.states;
+        this.dist = menuProperties.dist;
+    }
+
+    public isSelected():boolean {
+        return this.selected;
+    }
+
+    public setSelected(value:boolean):void {
+        this.selected = value;
+    }
+
+    public isGroup():boolean {
+        return false;
+    }
+}
+
+export class FoldersItemsMenuGroup extends FoldersItemsMenu {
+    public groupname:string;
+
+    constructor(menuProperties:IMenuItemProperties) {
+        super(menuProperties);
+        this.groupname = menuProperties.groupname;
+    }
+
+    public isGroup():boolean {
+        return true;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.html b/catalog-ui/src/app/ng2/pages/home/home.component.html
new file mode 100644
index 0000000000..1c8c2b4373
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.html
@@ -0,0 +1,88 @@
+<div class="sdc-catalog-container">
+    <div class="w-sdc-main-container" *ngIf="user">
+
+        <div id="dashboard-main-scroll" infiniteScroll class="w-sdc-main-right-container" (infiniteScroll)="raiseNumberOfElementToDisplay()" [infiniteScrollDistance]="100">
+
+            <div class='w-sdc-row-flex-items'>
+
+                <!-- ADD Component -->
+                <div *ngIf="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new"
+                     (mouseleave)="setDisplayActions(false)"
+                     (mouseover)="setDisplayActions(true)">
+                    <div class="w-sdc-dashboard-card-new-content" data-tests-id="AddButtonsArea">
+                        <div class="w-sdc-dashboard-card-new-content-plus" [hidden]="displayActions"></div>
+                        <div class="sdc-dashboard-create-element-container" [hidden]="!displayActions">
+                            <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="createResourceButton" size="medium" type="secondary" text="Add VF" (click)="openCreateModal('RESOURCE')"></sdc-button>
+                            <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="createCRButton" size="medium" type="secondary" text="Add CR" (click)="createCR()"></sdc-button>
+                            <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="createPNFButton" size="medium" type="secondary" text="Add PNF" (click)="createPNF()"></sdc-button>
+                            <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="createServiceButton" size="medium" type="secondary" text="Add Service" (click)="openCreateModal('SERVICE')"></sdc-button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Import Component -->
+                <div *ngIf="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new"
+                     (mouseleave)="setDisplayActions(false)"
+                     (mouseover)="setDisplayActions(true)">
+                    <div class="w-sdc-dashboard-card-new-content" data-tests-id="importButtonsArea"  >
+                        <div class="w-sdc-dashboard-card-import-content-plus" [hidden]="displayActions"></div>
+                        <div class="sdc-dashboard-import-element-container" [hidden]="!displayActions">
+                            <sdc-button-file-opener
+                                *ngIf="roles[user.role].dashboard.showCreateNew"
+                                size="medium"
+                                type="secondary"
+                                text="Import VFC"
+                                testId="importVFCbutton"
+                                [extensions]="sdcConfig.toscaFileExtension"
+                                (fileUpload)="onImportVfc($event)"
+                                [convertToBase64]="true"
+                            ></sdc-button-file-opener>
+                            <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" data-tests-id="importButtonsVSP" size="medium" type="secondary" text="Import VSP" (click)="notificationIconCallback()"></sdc-button>
+                            <sdc-button-file-opener
+                                *ngIf="roles[user.role].dashboard.showCreateNew"
+                                size="medium"
+                                type="secondary"
+                                text="Import DCAE"
+                                testId="importDCAE"
+                                [extensions]="sdcConfig.csarFileExtension"
+                                (fileUpload)="onImportVf($event)"
+                                [convertToBase64]="true"
+                            ></sdc-button-file-opener>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Tile new -->
+                <ui-tile *ngFor="let item of homeFilteredSlicedItems"
+                    [component]="item" (onTileClick)="goToComponent(item)"></ui-tile>
+                <!-- Tile new -->
+
+            </div>
+
+        </div>
+
+        <div class="w-sdc-left-sidebar">
+            <div class="i-sdc-left-sidebar-item "
+                 *ngFor="let folder of folders.getFolders()"
+                 [ngClass]="{'category-title': folder.isGroup(), 'selectedLink': folder.isSelected()}">
+
+                <span *ngIf="folder.isGroup()" class="title-text">{{folder.text}}</span>
+                <sdc-checkbox *ngIf="!folder.isGroup() && !folder.dist"
+                    [label]="folder.text"
+                    [attr.data-tests-id]="'filter-' + folder.state"
+                    [checked]="homeFilter.selectedStatuses.indexOf(folder.state) !== -1"
+                    (checkedChange)="changeCheckboxesFilter(homeFilter.selectedStatuses, folder.state, $event)"></sdc-checkbox>
+
+                <sdc-checkbox *ngIf="!folder.isGroup() && folder.dist"
+                    [label]="folder.text"
+                    [checked]="homeFilter.distributed.indexOf(folder.dist) !== -1"
+                    (checkedChange)="changeCheckboxesFilter(homeFilter.distributed, folder.dist, $event)"></sdc-checkbox>
+                <span class="i-sdc-left-sidebar-item-state-count" [attr.data-tests-id]="'count-' + folder.state">{{entitiesCount(folder)}}</span>
+            </div>
+        </div>
+
+    </div>
+
+    <top-nav [topLvlSelectedIndex]="0" [version]="version" [searchTerm]="homeFilter.search.filterTerm" (searchTermChange)="changeFilterTerm($event)" [notificationIconCallback]="notificationIconCallback"></top-nav>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.less b/catalog-ui/src/app/ng2/pages/home/home.component.less
new file mode 100644
index 0000000000..c5b73748ba
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.less
@@ -0,0 +1,126 @@
+@import '../../../../assets/styles/mixins_old';
+@import '../../../../assets/styles/sprite';
+.w-sdc-left-sidebar-nav {
+  margin-top: 46px;
+}
+
+.w-sdc-main-right-container {
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.w-sdc-main-right-container-element {
+  float: left;
+  height: 217px;
+  width: 217px;
+  margin: 10px;
+  position: relative;
+}
+
+.w-sdc-main-right-container-element-details-container {
+  position: absolute;
+  top: 165px;
+  left: 50px;
+}
+
+.w-sdc-main-right-container-element-name {
+  font-weight: bold;
+}
+
+.i-sdc-left-sidebar-item{
+  display: flex;
+  &.category-title .title-text, sdc-checkbox{
+    flex-grow: 1;
+  }
+  &:not(.category-title).i-sdc-left-sidebar-item-state-count {
+    line-height: 14px;
+  }
+}
+
+
+//////////////////////////////Cards////////////////////
+.w-sdc-dashboard-card-new {
+  border: 2px dashed @color_m;
+  .border-radius(2px);
+  cursor: pointer;
+  display: inline-block;
+  height: 198px;
+  margin: 11px;
+  position: relative;
+  vertical-align: middle;
+  width: 202px;
+}
+
+.w-sdc-dashboard-card-new-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+}
+
+.w-sdc-dashboard-card-new-content-plus {
+  .sprite-new;
+  .add-icon;
+  position: relative;
+  margin-bottom: 20px;
+
+  &:after {
+    .n_14_m;
+    content: 'ADD';
+    position: absolute;
+    top: 25px;
+    left: -3px;
+    vertical-align: -50%;
+  }
+}
+
+.w-sdc-dashboard-card-import-content-plus {
+  .sprite-new;
+  .import-icon;
+  position: relative;
+  margin-bottom: 20px;
+
+  &:after {
+    .n_14_m;
+    content: 'IMPORT';
+    position: absolute;
+    top: 25px;
+    left: -16px;
+    vertical-align: -50%;
+  }
+}
+
+.sdc-dashboard-create-element-container,
+.sdc-dashboard-import-element-container {
+
+  width: 140px;
+
+  sdc-button, 
+  sdc-button-file-opener {
+    padding-bottom: 5px;
+    &:last-child{
+      padding-bottom: 0;
+    }
+  }
+  
+  .import-file{
+    position: relative;
+    file-opener{
+      position: absolute;
+      top: 0;
+      /deep/ input[type="file"] {
+          .hand;
+          filter: alpha(opacity=0);
+          opacity: 0;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 140px;
+          height: 36px;
+      }
+    }
+  }
+}
+
+
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts b/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts
new file mode 100644
index 0000000000..df854024fa
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts
@@ -0,0 +1,270 @@
+
+import { SdcConfigToken, ISdcConfig } from "../../config/sdc-config.config";
+import { SdcMenuToken, IAppMenu } from "../../config/sdc-menu.config";
+
+
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { HomeComponent } from "./home.component";
+import {ConfigureFn, configureTests} from "../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import { TranslateService } from "../../shared/translator/translate.service";
+import { HomeService, CacheService, AuthenticationService, ImportVSPService } from '../../../../app/services-ng2';
+import { ModalsHandler } from "../../../../app/utils";
+import { SdcUiServices } from "onap-ui-angular";
+import {ComponentType, ResourceType} from "../../../utils/constants";
+import { FoldersMenu, FoldersItemsMenu, FoldersItemsMenuGroup } from './folders';
+import { HomeFilter } from "../../../../app/models/home-filter";
+import {Component} from "../../../models/components/component";
+
+
+
+
+describe('home component', () => {
+
+    // const mockedEvent = <MouseEvent>{ target: {} }
+    let fixture: ComponentFixture<HomeComponent>;
+    // let eventServiceMock: Partial<EventListenerService>;
+
+    let importVspService: Partial<ImportVSPService>;
+    let mockStateService;
+    let modalServiceMock :Partial<SdcUiServices.ModalService>;
+    let translateServiceMock : Partial<TranslateService>;
+    let foldersItemsMenuMock;
+    let homeFilterMock :Partial<HomeFilter>;
+    let foldersMock;
+    let loaderServiceMock;
+
+
+    beforeEach(
+        async(() => {
+            modalServiceMock = {
+                openWarningModal: jest.fn()
+            }
+
+            mockStateService = {
+                // go: jest.fn().mockReturnValue( new Promise.resolve((resolve, reject )=> resolve()))
+                go: jest.fn()
+            }
+
+            translateServiceMock = {
+                translate: jest.fn()
+            }
+
+            homeFilterMock = {
+                search: jest.fn,
+                toUrlParam: jest.fn()
+            }
+
+            foldersMock = {
+                setSelected: jest.fn()
+            }
+
+            loaderServiceMock = {
+                activate: jest.fn(),
+                deactivate: jest.fn()
+            }
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [HomeComponent],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: SdcConfigToken, useValue: {"csarFileExtension":"csar", "toscaFileExtension":"yaml,yml"}},
+                        {provide: SdcMenuToken, useValue: {}},
+                        {provide: "$state", useValue: mockStateService},
+                        {provide: HomeService, useValue: {}},
+                        {provide: AuthenticationService, useValue: {}},
+                        {provide: CacheService, useValue: {}},
+                        {provide: TranslateService, useValue: translateServiceMock},
+                        {provide: ModalsHandler, useValue: {}},
+                        {provide: SdcUiServices.ModalService, useValue: modalServiceMock},
+                        {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock},
+                        {provide: ImportVSPService, useValue: {}}
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(HomeComponent);
+            });
+        })
+    );
+
+
+    it('should match current snapshot', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should call on home component openCreateModal with null imported file', () => {
+        const component = TestBed.createComponent(HomeComponent);
+        let componentType:string = 'test';
+        let importedFile:any = null;
+        component.componentInstance.openCreateModal(componentType, importedFile);
+        expect(mockStateService.go).toBeCalledWith('workspace.general', {type: componentType.toLowerCase()});
+    });
+
+
+    it('should call on home component openCreateModal with imported file', () => {
+        const component = TestBed.createComponent(HomeComponent);
+        component.componentInstance.initEntities = jest.fn();
+        let componentType:string = 'test';
+        let importedFile:any = 'importedFile';
+        component.componentInstance.openCreateModal(componentType, importedFile);
+        expect(component.componentInstance.initEntities).toBeCalledWith(true);
+    });
+
+
+    it ('should call on home component onImportVf without file without extension', () => {
+        const component = TestBed.createComponent(HomeComponent);
+        let file:any = {filename : 'test'};
+        let expectedTitle:string = translateServiceMock.translate("NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS_TITLE");
+        let expectedMessage:string = translateServiceMock.translate("NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS", {"csarFileExtension":"csar"});
+        component.componentInstance.onImportVf(file);
+        expect(modalServiceMock.openWarningModal).toBeCalledWith(expectedTitle, expectedMessage , 'error-invalid-csar-ext');
+    });
+
+
+    it ('should call on home component onImportVf with file without extension' , () => {
+        const component = TestBed.createComponent(HomeComponent);
+        let file:any = {filename : 'test.csar'};
+        component.componentInstance.onImportVf(file);
+        expect(mockStateService.go).toBeCalledWith('workspace.general', {
+            type: ComponentType.RESOURCE.toLowerCase(),
+                importedFile: file,
+                resourceType: ResourceType.VF
+        });
+    });
+
+
+    it ('should call on home component onImportVfc without file without extension', () => {
+        const component = TestBed.createComponent(HomeComponent);
+        let file:any = {filename : 'test'};
+        let expectedTitle:string = translateServiceMock.translate("NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS_TITLE");
+        let expectedMessage:string = translateServiceMock.translate("NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS", {"toscaFileExtension":"yaml,yml"});
+        component.componentInstance.onImportVfc(file);
+        expect(modalServiceMock.openWarningModal).toBeCalledWith(expectedTitle, expectedMessage , 'error-invalid-tosca-ext');
+    });
+
+    it ('should call on home component onImportVfc with file without extension' , () => {
+        const component = TestBed.createComponent(HomeComponent);
+        let file:any = {filename : 'test.yml'};
+        component.componentInstance.onImportVfc(file);
+        expect(mockStateService.go).toBeCalledWith('workspace.general', {
+            type: ComponentType.RESOURCE.toLowerCase(),
+            importedFile: file,
+            resourceType: ResourceType.VFC
+        });
+    });
+
+    it ('should call on home component createPNF' , () => {
+        const component = TestBed.createComponent(HomeComponent);
+        component.componentInstance.createPNF();
+        expect(mockStateService.go).toBeCalledWith('workspace.general', {
+            type: ComponentType.RESOURCE.toLowerCase(),
+            resourceType: ResourceType.PNF
+        });
+    });
+
+    it ('should call on home component createCR' , () => {
+        const component = TestBed.createComponent(HomeComponent);
+        component.componentInstance.createCR();
+        expect(mockStateService.go).toBeCalledWith('workspace.general', {
+            type: ComponentType.RESOURCE.toLowerCase(),
+            resourceType: ResourceType.CR
+        });
+    });
+
+
+    it ('should call on home component updateFilter' , () => {
+        const component = TestBed.createComponent(HomeComponent);
+        component.componentInstance.homeFilter = homeFilterMock;
+        component.componentInstance.filterHomeItems = jest.fn();
+        component.componentInstance.updateFilter();
+
+        expect(mockStateService.go).toBeCalledWith('.', homeFilterMock.toUrlParam(), {location: 'replace', notify: false});
+        // expect(spy).toHaveBeenCalledTimes(1);
+
+        // let spy = spyOn(homeFilterMock, 'toUrlParam').and.returnValue({
+        //     'filter.term': '',
+        //     'filter.distributed': '',
+        //     'filter.status':''
+        // });
+    });
+
+    // it ('should call on home component setSelectedFolder' , () => {
+    //     const component = TestBed.createComponent(HomeComponent);
+    //     let folderItem:Partial<FoldersItemsMenu> = { text:'someThing'};
+    //     let folderItem1:number;
+    //     component.componentInstance.folders = foldersMock;
+    //     expect(foldersMock.setSelected).toBeCalledWith(folderItem);
+    // });
+
+    // it ('should call on home component goToComponent' , () => {
+    //     const component = TestBed.createComponent(HomeComponent);
+    //     let componentParam:Partial<Component> = { uuid:'someThing', uniqueId:'uniqueID', componentType:'componentType'};
+    //     component.componentInstance.goToComponent(componentParam);
+    //     expect(loaderServiceMock.activate).toHaveBeenCalled();
+    //     // expect(mockStateService.go).toBeCalledWith('workspace.general', {id: componentParam.uniqueId, type: componentParam.componentType.toLowerCase()}).then(function(){
+    //     //     loaderServiceMock.deactivate();
+    //     // });
+    //     expect(mockStateService.go).toBeCalled();
+    // });
+
+    // it ('should call on home component raiseNumberOfElementToDisplay so numberOfItemToDisplay will be 0' , () => {
+    //     const component = TestBed.createComponent(HomeComponent);
+    //     component.componentInstance.raiseNumberOfElementToDisplay();
+    //     expect(component.componentInstance.numberOfItemToDisplay).toEqual(0);
+    // });
+    //
+    // it ('should call on home component raiseNumberOfElementToDisplay with min(2,70) so numberOfItemToDisplay will be 2' , () => {
+    //     const component = TestBed.createComponent(HomeComponent);
+    //     component.componentInstance.homeItems = ['item1', 'item2'];
+    //     component.componentInstance.numberOfItemToDisplay = 70;
+    //     component.componentInstance.raiseNumberOfElementToDisplay(true);
+    //     expect(component.componentInstance.numberOfItemToDisplay).toEqual(2);
+    // });
+    //
+    // it ('should call on home component raiseNumberOfElementToDisplay with min(3,35) so numberOfItemToDisplay will be 2 after fullPagesAmount is calculated' , () => {
+    //     const component = TestBed.createComponent(HomeComponent);
+    //     component.componentInstance.homeItems = ['item1', 'item2', 'item3'];
+    //     component.componentInstance.numberOfItemToDisplay = 70;
+    //     component.componentInstance.numberOfItemToDisplay = 0;
+    //     component.componentInstance.raiseNumberOfElementToDisplay(false);
+    //     expect(component.componentInstance.numberOfItemToDisplay).toEqual(3);
+    // });
+    //
+    //
+    // it ('should call on home component changeFilterTerm' , () => {
+    //     const component = TestBed.createComponent(HomeComponent);
+    //     component.componentInstance.changeFilterTerm("testStr");
+    //     // expect ( "testStr" ).toEqual(homeFilterMock.search.)
+    // });
+
+
+
+
+
+
+    // it ('should call on home component entitiesCount' , () => {
+    //     const component = TestBed.createComponent(HomeComponent);
+    //     component.componentInstance.entitiesCount("aaa");
+    //     expect(mockStateService.go).toBeCalledWith('workspace.general', {
+    //         type: ComponentType.RESOURCE.toLowerCase(),
+    //         resourceType: ResourceType.CR
+    //     });
+    // });
+
+
+    // it('should call on home component notificationIconCallback', () => {
+    //     const component = TestBed.createComponent(HomeComponent);
+    //     component.componentInstance.initEntities = jest.fn();
+    //     component.componentInstance.notificationIconCallback();
+    //     expect(mockStateService.go).toBeCalledWith('workspace.general', {});
+    // });
+
+
+
+
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.ts b/catalog-ui/src/app/ng2/pages/home/home.component.ts
new file mode 100644
index 0000000000..1b69eba929
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.ts
@@ -0,0 +1,358 @@
+/*-
+ * ============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 { Component as NgComponent, Inject, OnInit } from '@angular/core';
+import { Component, IConfigRoles, IUserProperties, Resource } from 'app/models';
+import { HomeFilter } from 'app/models/home-filter';
+import { AuthenticationService, CacheService, HomeService } from 'app/services-ng2';
+import { ModalsHandler } from 'app/utils';
+import { SdcUiServices } from 'onap-ui-angular';
+import { CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, ResourceType } from '../../../utils/constants';
+import { ImportVSPService } from '../../components/modals/onboarding-modal/import-vsp.service';
+import { ISdcConfig, SdcConfigToken } from '../../config/sdc-config.config';
+import { IAppMenu, SdcMenuToken } from '../../config/sdc-menu.config';
+import { EntityFilterPipe } from '../../pipes/entity-filter.pipe';
+import { TranslateService } from '../../shared/translator/translate.service';
+import { FoldersItemsMenu, FoldersItemsMenuGroup, FoldersMenu } from './folders';
+
+@NgComponent({
+    selector: 'home-page',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.less']
+})
+export class HomeComponent implements OnInit {
+    public numberOfItemToDisplay: number;
+    public homeItems: Component[];
+    public homeFilteredItems: Component[];
+    public homeFilteredSlicedItems: Component[];
+    public folders: FoldersMenu;
+    public roles: IConfigRoles;
+    public user: IUserProperties;
+    public showTutorial: boolean;
+    public isFirstTime: boolean;
+    public version: string;
+    public homeFilter: HomeFilter;
+    public vfcmtType: string;
+    public displayActions: boolean;
+
+    constructor(
+        @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
+        @Inject(SdcMenuToken) public sdcMenu: IAppMenu,
+        @Inject('$state') private $state: ng.ui.IStateService,
+        private homeService: HomeService,
+        private authService: AuthenticationService,
+        private cacheService: CacheService,
+        private translateService: TranslateService,
+        private modalsHandler: ModalsHandler,
+        private modalService: SdcUiServices.ModalService,
+        private loaderService: SdcUiServices.LoaderService,
+        private importVSPService: ImportVSPService
+    ) {}
+
+    ngOnInit(): void {
+        this.initHomeComponentVars();
+        this.initFolders();
+        this.initEntities();
+
+        if (this.$state.params) {
+            if (this.$state.params.folder) {
+                const folderName = this.$state.params.folder.replaceAll('_', ' ');
+
+                const selectedFolder = this.folders.getFolders().find((tmpFolder: FoldersItemsMenu) => tmpFolder.text === folderName);
+                if (selectedFolder) {
+                    this.setSelectedFolder(selectedFolder);
+                }
+                // Show the tutorial if needed when the dashboard page is opened.<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
+                // This is called from the welcome page.
+            } else if (this.$state.params.show === 'tutorial') {
+                this.showTutorial = true;
+                this.isFirstTime = true;
+            }
+        }
+    }
+
+    // Open onboarding modal
+    public notificationIconCallback(): void {
+        this.importVSPService.openOnboardingModal().subscribe((result) => {
+            if (!result.previousComponent || result.previousComponent.csarVersion !== result.componentCsar.csarVersion) {
+                this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, result.componentCsar.csarVersion);
+            }
+            this.$state.go('workspace.general', {
+                id: result.previousComponent && result.previousComponent.uniqueId,
+                componentCsar: result.componentCsar,
+                type: result.type
+            });
+        });
+    }
+
+    public onImportVf(file: any): void {
+        if (file && file.filename) {
+            // Check that the file has valid extension.
+            const fileExtension: string = file.filename.split('.').pop();
+            if (this.sdcConfig.csarFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) {
+                this.$state.go('workspace.general', {
+                    type: ComponentType.RESOURCE.toLowerCase(),
+                    importedFile: file,
+                    resourceType: ResourceType.VF
+                });
+            } else {
+                const title: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS_TITLE');
+                const message: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS', {extensions: this.sdcConfig.csarFileExtension});
+                this.modalService.openWarningModal(title, message, 'error-invalid-csar-ext');
+            }
+        }
+    }
+
+    public onImportVfc(file: any): void {
+        if (file && file.filename) {
+            // Check that the file has valid extension.
+            const fileExtension: string = file.filename.split('.').pop();
+            if (this.sdcConfig.toscaFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) {
+                this.$state.go('workspace.general', {
+                    type: ComponentType.RESOURCE.toLowerCase(),
+                    importedFile: file,
+                    resourceType: ResourceType.VFC
+                });
+            } else {
+                const title: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS_TITLE');
+                const message: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS', {extensions: this.sdcConfig.toscaFileExtension});
+                this.modalService.openWarningModal(title, message, 'error-invalid-tosca-ext');
+            }
+        }
+    }
+
+    public openCreateModal(componentType: string, importedFile: any): void {
+        if (importedFile) {
+            this.initEntities(true); // Return from import
+        } else {
+            this.$state.go('workspace.general', {type: componentType.toLowerCase()});
+        }
+    }
+
+    public createPNF(): void {
+        this.$state.go('workspace.general', {
+            type: ComponentType.RESOURCE.toLowerCase(),
+            resourceType: ResourceType.PNF
+        });
+    }
+
+    public createCR(): void {
+        this.$state.go('workspace.general', {
+            type: ComponentType.RESOURCE.toLowerCase(),
+            resourceType: ResourceType.CR
+        });
+    }
+
+    public entitiesCount(folderItem: FoldersItemsMenu): any {
+        let total: number = 0;
+        if (folderItem.isGroup()) {
+            this.folders.getFolders().forEach((tmpFolder: FoldersItemsMenu) => {
+                if (tmpFolder.group && tmpFolder.group === (folderItem as FoldersItemsMenuGroup).groupname) {
+                    total = total + this._getTotalCounts(tmpFolder);
+                }
+            });
+        } else {
+            total = total + this._getTotalCounts(folderItem);
+        }
+        return total;
+    }
+
+    public updateFilter = () => {
+        this.$state.go('.', this.homeFilter.toUrlParam(), {location: 'replace', notify: false});
+        this.filterHomeItems();
+    }
+
+    public getCurrentFolderDistributed(): any[] {
+        const states = [];
+        if (this.folders) {
+            const folderItem: FoldersItemsMenu = this.folders.getCurrentFolder();
+            if (folderItem.isGroup()) {
+                this.folders.getFolders().forEach((tmpFolder: FoldersItemsMenu) => {
+                    if (tmpFolder.group && tmpFolder.group === (folderItem as FoldersItemsMenuGroup).groupname) {
+                        this._setStates(tmpFolder, states);
+                    }
+                });
+            } else {
+                this._setStates(folderItem, states);
+            }
+        }
+        return states;
+    }
+
+    public setSelectedFolder(folderItem: FoldersItemsMenu): void {
+        this.folders.setSelected(folderItem);
+    }
+
+    public goToComponent(component: Component): void {
+        const loaderService = this.loaderService;
+        loaderService.activate();
+        this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()}).then(() => {
+            loaderService.deactivate();
+        });
+    }
+
+    public raiseNumberOfElementToDisplay(recalculate: boolean = false) {
+        const scrollPageAmount = 35;
+        if (!this.homeItems) {
+            this.numberOfItemToDisplay = 0;
+        } else if (this.homeItems.length > this.numberOfItemToDisplay || recalculate) {
+            let fullPagesAmount = Math.ceil(this.numberOfItemToDisplay / scrollPageAmount) * scrollPageAmount;
+            if (!recalculate || fullPagesAmount === 0) {  // TODO trigger infiniteScroll to check bottom and fire onBottomHit by itself (sdc-ui)
+                fullPagesAmount += scrollPageAmount;
+            }
+            this.numberOfItemToDisplay = Math.min(this.homeItems.length, fullPagesAmount);
+            this.homeFilteredSlicedItems = this.homeFilteredItems.slice(0, this.numberOfItemToDisplay);
+        }
+    }
+
+    public changeCheckboxesFilter(checkboxesFilterArray: string[], checkboxValue: string, checked?: boolean) {
+        const checkboxIdx = checkboxesFilterArray.indexOf(checkboxValue);
+
+        checked = (checked !== undefined) ? checked : checkboxIdx === -1;
+        if (checked && checkboxIdx === -1) {
+            checkboxesFilterArray.push(checkboxValue);
+        } else if (!checked && checkboxIdx !== -1) {
+            checkboxesFilterArray.splice(checkboxIdx, 1);
+        }
+        this.updateFilter();
+    }
+
+    public changeFilterTerm(filterTerm: string): void {
+        this.homeFilter.search = { filterTerm };
+        this.updateFilter();
+    }
+
+    public setDisplayActions(display?: boolean) {
+        this.displayActions = display !== undefined ? display : !this.displayActions;
+    }
+
+    private _getTotalCounts(tmpFolder): number {
+        let total: number = 0;
+        if (tmpFolder.dist !== undefined) {
+            const distributions = tmpFolder.dist.split(',');
+            distributions.forEach((item: any) => {
+                total = total + this.getEntitiesByStateDist(tmpFolder.state, item).length;
+            });
+        } else {
+            total = total + this.getEntitiesByStateDist(tmpFolder.state, tmpFolder.dist).length;
+        }
+        return total;
+    }
+
+    private _setStates(tmpFolder, states) {
+        if (tmpFolder.states !== undefined) {
+            tmpFolder.states.forEach((item: any) => {
+                states.push({state: item.state, dist: item.dist});
+            });
+        } else {
+            states.push({state: tmpFolder.state, dist: tmpFolder.dist});
+        }
+    }
+
+    private initEntities(reload?: boolean) {
+        if (reload || this.componentShouldReload()) {
+            this.loaderService.activate();
+            this.homeService.getAllComponents(true).subscribe(
+                (components: Component[]) => {
+                    this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name);  // dashboard
+                    this.cacheService.set('breadcrumbsComponents', components);
+                    this.homeItems = components;
+                    this.loaderService.deactivate();
+                    this.filterHomeItems();
+                }, (error) => { this.loaderService.deactivate(); });
+        } else {
+            this.homeItems = this.cacheService.get('breadcrumbsComponents');
+            this.filterHomeItems();
+        }
+    }
+
+    private isDefaultFilter = (): boolean => {
+        const defaultFilter = new HomeFilter();
+        return angular.equals(defaultFilter, this.homeFilter);
+    }
+
+    private componentShouldReload = (): boolean => {
+        const breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents'));
+        return !breadcrumbsValid || this.isDefaultFilter();
+    }
+
+    private getEntitiesByStateDist(state: string, dist: string): Component[] {
+        let gObj: Component[];
+        if (this.homeItems && (state || dist)) {
+            gObj = this.homeItems.filter((obj: Component) => {
+                if (dist !== undefined && obj.distributionStatus === dist && obj.lifecycleState === state) {
+                    return true;
+                } else if (dist === undefined && (obj.lifecycleState === state || obj.distributionStatus === state)) {
+                    return true;
+                }
+                return false;
+            });
+        } else {
+            gObj = [];
+        }
+        return gObj;
+    }
+
+    private filterHomeItems() {
+        this.homeFilteredItems = this.makeFilteredItems(this.homeItems, this.homeFilter);
+        this.raiseNumberOfElementToDisplay(true);
+        this.homeFilteredSlicedItems = this.homeFilteredItems.slice(0, this.numberOfItemToDisplay);
+    }
+
+    private makeFilteredItems(homeItems: Component[], filter: HomeFilter) {
+        let filteredComponents: Component[] = homeItems;
+
+        // filter: exclude all resources of type 'vfcmtType':
+        filteredComponents = filteredComponents.filter((c) =>
+            !c.isResource() || (c as Resource).resourceType.indexOf(this.vfcmtType) === -1);
+
+        // common entity filter
+        // --------------------------------------------------------------------------
+        filteredComponents = EntityFilterPipe.transform(filteredComponents, filter);
+
+        return filteredComponents;
+    }
+
+    private initFolders = (): void => {
+        // Note: Do not use SdcUi.ChecklistComponent for folders checkboxes, since from the data structure
+        // it is not determined that all checkboxes under the same group are managed by the same selectedValues array.
+        if (this.user) {
+            this.folders = new FoldersMenu(this.roles[this.user.role].folder);
+        }
+    }
+
+    private initHomeComponentVars(): void {
+        this.version = this.cacheService.get('version');
+        this.numberOfItemToDisplay = 0;
+        this.displayActions = false;
+        this.user = this.authService.getLoggedinUser();
+        this.roles = this.sdcMenu.roles;
+        this.showTutorial = false;
+        this.isFirstTime = false;
+        this.vfcmtType = ResourceType.VFCMT;
+
+        // Checkboxes filter init
+        this.homeFilter = new HomeFilter(this.$state.params);
+
+        // bind callbacks that are transferred as inputs
+        this.notificationIconCallback = this.notificationIconCallback.bind(this);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/home/home.module.ts b/catalog-ui/src/app/ng2/pages/home/home.module.ts
new file mode 100644
index 0000000000..3e7c0cd312
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/home/home.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { HomeComponent } from "./home.component";
+import { LayoutModule } from "../../components/layout/layout.module";
+import { UiElementsModule } from "../../components/ui/ui-elements.module";
+import { GlobalPipesModule } from "../../pipes/global-pipes.module";
+import { TranslateModule } from "../../shared/translator/translate.module";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+
+@NgModule({
+    declarations: [
+        HomeComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        LayoutModule,
+        UiElementsModule,
+        GlobalPipesModule,
+        TranslateModule
+    ],
+    exports: [
+        HomeComponent
+    ],
+    entryComponents: [
+        HomeComponent
+    ],
+    providers: []
+})
+export class HomeModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
index 6292d85422..941b10f943 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
@@ -1,9 +1,9 @@
 import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {InterfaceOperationComponent} from "./interface-operation.page.component";
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
 import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
 import {TranslateModule} from "app/ng2/shared/translator/translate.module";
+import { SdcUiComponentsModule } from 'onap-ui-angular';
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
index e32a0b60f5..cd06e18267 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
@@ -1,5 +1,5 @@
 <!--
-    ~ Copyright © 2016-2018 European Support Limited
+    ~ Copyright � 2016-2018 European Support Limited
     ~
     ~ Licensed under the Apache License, Version 2.0 (the "License");
     ~ you may not use this file except in compliance with the License.
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
index c2a9582ed4..9d41c375f5 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
@@ -1,14 +1,14 @@
 import * as _ from "lodash";
-import {Component, Input, Output, ComponentRef, Inject} from '@angular/core';
-import {Component as IComponent} from 'app/models/components/component';
+import { Component, Input, Output, ComponentRef, Inject } from '@angular/core';
+import {Component as IComponent } from 'app/models/components/component';
 
-import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
-import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import { SdcConfigToken, ISdcConfig } from "app/ng2/config/sdc-config.config";
+import {TranslateService } from "app/ng2/shared/translator/translate.service";
 
-import {Observable} from "rxjs/Observable";
+import {Observable } from "rxjs/Observable";
 
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import {ModalService} from 'app/ng2/services/modal.service';
+import {ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
+import {ModalService } from 'app/ng2/services/modal.service';
 import {
     InputBEModel,
     OperationModel,
@@ -18,15 +18,19 @@ import {
     Capability
 } from 'app/models';
 
-import {IModalConfig, IModalButtonComponent} from "sdc-ui/lib/angular/modals/models/modal-config";
-import {SdcUiComponents} from "sdc-ui/lib/angular";
-import {ModalButtonComponent} from "sdc-ui/lib/angular/components";
+// import {SdcUiComponents } from 'sdc-ui/lib/angular';
+// import {ModalButtonComponent } from 'sdc-ui/lib/angular/components';
+// import { IModalButtonComponent, IModalConfig } from 'sdc-ui/lib/angular/modals/models/modal-config';
 
-import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
-import {PluginsService} from "app/ng2/services/plugins.service";
+import {ComponentServiceNg2 } from 'app/ng2/services/component-services/component.service';
+import {PluginsService } from 'app/ng2/services/plugins.service';
+import {WorkflowServiceNg2 } from 'app/ng2/services/workflow.service';
 
-import {OperationCreatorComponent, OperationCreatorInput} from 'app/ng2/pages/interface-operation/operation-creator/operation-creator.component';
+import { OperationCreatorComponent, OperationCreatorInput } from 'app/ng2/pages/interface-operation/operation-creator/operation-creator.component';
+import { IModalButtonComponent } from 'onap-ui-angular';
+import { ModalButtonComponent } from 'onap-ui-angular';
+import { IModalConfig } from 'onap-ui-angular';
+import { SdcUiServices } from 'onap-ui-angular';
 
 export class UIOperationModel extends OperationModel {
     isCollapsed: boolean = true;
@@ -61,6 +65,7 @@ export class UIOperationModel extends OperationModel {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 class ModalTranslation {
     CREATE_TITLE: string;
     EDIT_TITLE: string;
@@ -74,7 +79,7 @@ class ModalTranslation {
     constructor(private TranslateService: TranslateService) {
         this.TranslateService.languageChangedObservable.subscribe(lang => {
             this.CREATE_TITLE = this.TranslateService.translate("INTERFACE_CREATE_TITLE");
-            this.EDIT_TITLE = this.TranslateService.translate("INTERFACE_EDIT_TITLE");
+            this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE');
             this.DELETE_TITLE = this.TranslateService.translate("INTERFACE_DELETE_TITLE");
             this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON");
             this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON");
@@ -85,6 +90,7 @@ class ModalTranslation {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class UIInterfaceModel extends InterfaceModel {
     isCollapsed: boolean = false;
 
@@ -92,7 +98,7 @@ export class UIInterfaceModel extends InterfaceModel {
         super(interf);
         this.operations = _.map(
             this.operations,
-            operation => new UIOperationModel(operation)
+            (operation) => new UIOperationModel(operation)
         );
     }
 
@@ -101,6 +107,7 @@ export class UIInterfaceModel extends InterfaceModel {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 @Component({
     selector: 'interface-operation',
     templateUrl: './interface-operation.page.component.html',
@@ -110,16 +117,16 @@ export class UIInterfaceModel extends InterfaceModel {
 
 export class InterfaceOperationComponent {
 
-    interfaces: Array<UIInterfaceModel>;
+    interfaces: UIInterfaceModel[];
     modalInstance: ComponentRef<ModalComponent>;
     openOperation: OperationModel;
     enableWorkflowAssociation: boolean;
-    inputs: Array<InputBEModel>;
+    inputs: InputBEModel[];
     isLoading: boolean;
-    interfaceTypes:{ [interfaceType: string]: Array<string> };
+    interfaceTypes: { [interfaceType: string]: string[] };
     modalTranslation: ModalTranslation;
     workflowIsOnline: boolean;
-    workflows: Array<any>;
+    workflows: any[];
     capabilities: CapabilitiesGroup;
 
     @Input() component: IComponent;
@@ -135,7 +142,8 @@ export class InterfaceOperationComponent {
         private ComponentServiceNg2: ComponentServiceNg2,
         private WorkflowServiceNg2: WorkflowServiceNg2,
         private ModalServiceNg2: ModalService,
-        private ModalServiceSdcUI: SdcUiComponents.ModalService
+        private ModalServiceSdcUI: SdcUiServices.ModalService
+        
     ) {
         this.enableWorkflowAssociation = sdcConfig.enableWorkflowAssociation;
         this.modalTranslation = new ModalTranslation(TranslateService);
@@ -146,11 +154,11 @@ export class InterfaceOperationComponent {
         this.workflowIsOnline = !_.isUndefined(this.PluginsService.getPluginByStateUrl('workflowDesigner'));
 
         Observable.forkJoin(
-            this.ComponentServiceNg2.getInterfaces(this.component),
+            this.ComponentServiceNg2.getInterfaceOperations(this.component),
             this.ComponentServiceNg2.getComponentInputs(this.component),
             this.ComponentServiceNg2.getInterfaceTypes(this.component),
             this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.component.componentType, this.component.uniqueId)
-        ).subscribe((response: Array<any>) => {
+        ).subscribe((response: any[]) => {
             const callback = (workflows) => {
                 this.isLoading = false;
                 this.initInterfaces(response[0].interfaces);
@@ -174,36 +182,36 @@ export class InterfaceOperationComponent {
         });
     }
 
-    initInterfaces(interfaces: Array<InterfaceModel>): void {
-        this.interfaces = _.map(interfaces, interf => new UIInterfaceModel(interf));
+    initInterfaces(interfaces: InterfaceModel[]): void {
+        this.interfaces = _.map(interfaces, (interf) => new UIInterfaceModel(interf));
     }
 
     sortInterfaces(): void {
-        this.interfaces = _.filter(this.interfaces, interf => interf.operations && interf.operations.length > 0); // remove empty interfaces
+        this.interfaces = _.filter(this.interfaces, (interf) => interf.operations && interf.operations.length > 0); // remove empty interfaces
         this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically
-        _.forEach(this.interfaces, interf => {
+        _.forEach(this.interfaces, (interf) => {
             interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically
         });
     }
 
     collapseAll(value: boolean = true): void {
-        _.forEach(this.interfaces, interf => {
+        _.forEach(this.interfaces, (interf) => {
             interf.isCollapsed = value;
         });
     }
 
     isAllCollapsed(): boolean {
-        return _.every(this.interfaces, interf => interf.isCollapsed);
+        return _.every(this.interfaces, (interf) => interf.isCollapsed);
     }
 
     isAllExpanded(): boolean {
-        return _.every(this.interfaces, interf => !interf.isCollapsed);
+        return _.every(this.interfaces, (interf) => !interf.isCollapsed);
     }
 
     isListEmpty(): boolean {
         return _.filter(
             this.interfaces,
-            interf => interf.operations && interf.operations.length > 0
+            (interf) => interf.operations && interf.operations.length > 0
         ).length === 0;
     }
 
@@ -291,11 +299,6 @@ export class InterfaceOperationComponent {
 
     }
 
-    private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
-        let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton');
-        saveButton.disabled = !shouldEnable;
-    }
-
     onRemoveOperation = (event: Event, operation: OperationModel): void => {
         event.stopPropagation();
 
@@ -303,11 +306,11 @@ export class InterfaceOperationComponent {
             this.ComponentServiceNg2
                 .deleteInterfaceOperation(this.component, operation)
                 .subscribe(() => {
-                    const curInterf = _.find(this.interfaces, interf => interf.type === operation.interfaceType);
-                    const index = _.findIndex(curInterf.operations, el => el.uniqueId === operation.uniqueId);
+                    const curInterf = _.find(this.interfaces, (interf) => interf.type === operation.interfaceType);
+                    const index = _.findIndex(curInterf.operations, (el) => el.uniqueId === operation.uniqueId);
                     curInterf.operations.splice(index, 1);
                     if (!curInterf.operations.length) {
-                        const interfIndex = _.findIndex(this.interfaces, interf => interf.type === operation.interfaceType);
+                        const interfIndex = _.findIndex(this.interfaces, (interf) => interf.type === operation.interfaceType);
                         this.interfaces.splice(interfIndex, 1);
                     }
                 });
@@ -322,13 +325,18 @@ export class InterfaceOperationComponent {
         );
     }
 
+    private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
+        const saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton');
+        saveButton.disabled = !shouldEnable;
+    }
+
     private createOperation = (operation: OperationModel): void => {
         this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: OperationModel) => {
             this.openOperation = null;
 
             let curInterf = _.find(
                 this.interfaces,
-                interf => interf.type === operation.interfaceType
+                (interf) => interf.type === operation.interfaceType
             );
 
             if (!curInterf) {
@@ -358,18 +366,19 @@ export class InterfaceOperationComponent {
         this.ComponentServiceNg2.updateInterfaceOperation(this.component, operation).subscribe((newOperation: OperationModel) => {
             this.openOperation = null;
 
-            let oldOpIndex, oldInterf;
-            _.forEach(this.interfaces, interf => {
-                _.forEach(interf.operations, op => {
+            let oldOpIndex;
+            let oldInterf;
+            _.forEach(this.interfaces, (interf) => {
+                _.forEach(interf.operations, (op) => {
                     if (op.uniqueId === newOperation.uniqueId) {
                         oldInterf = interf;
-                        oldOpIndex = _.findIndex(interf.operations, el => el.uniqueId === op.uniqueId);
+                        oldOpIndex = _.findIndex(interf.operations, (el) => el.uniqueId === op.uniqueId);
                     }
                 })
             });
             oldInterf.operations.splice(oldOpIndex, 1);
 
-            const newInterf = _.find(this.interfaces, interf => interf.type === operation.interfaceType);
+            const newInterf = _.find(this.interfaces, (interf) => interf.type === operation.interfaceType);
             const newOpModel = new UIOperationModel(newOperation);
             newInterf.operations.push(newOpModel);
             this.sortInterfaces();
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
index ec056ad6f2..df2a505fe8 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
@@ -180,6 +180,9 @@
                         <span class="bold-message">{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_1' | translate }}</span>
                         <span>{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_2' | translate }}</span>
                     </div>
+                    <div *ngIf="!workflows.length">
+                        Only <span class="bold-message">certified</span> workflow versions can be assigned to an operation
+                    </div>
                 </div>
             </div>
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
index f2bd0f82af..2721d300c4 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -11,7 +11,7 @@
         font-size: 12px;
     }
 
-    .w-sdc-form .form-item {
+    .w-sdc-form .i-sdc-form-item {
         margin-bottom: 15px;
     }
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
index e12905654b..12fba24e86 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -15,9 +15,9 @@ import {
     Capability
 } from 'app/models';
 
-import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
 import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component";
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import { IDropDownOption } from 'onap-ui-angular';
 
 export class DropDownOption implements IDropDownOption {
     value: string;
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
index 0b6f8336c3..b91f3aa4e3 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
@@ -3,10 +3,10 @@ import {CommonModule} from "@angular/common";
 
 import {FormsModule} from "@angular/forms";
 import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
 import {TranslateModule} from "app/ng2/shared/translator/translate.module";
 
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+import { UiElementsModule } from '../../../components/ui/ui-elements.module';
 import {OperationCreatorComponent} from "./operation-creator.component";
 import {ParamRowComponent} from './param-row/param-row.component';
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
index 4a4782eaee..b8173eaf15 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright © 2016-2018 European Support Limited
+  ~ Copyright © 2016-2018 European Support Limited
   ~
   ~ Licensed under the Apache License, Version 2.0 (the "License");
   ~ you may not use this file except in compliance with the License.
@@ -13,7 +13,7 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-
+ 
 <div class="cell field-name">
     <ui-element-input
         *ngIf="!isAssociateWorkflow"
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
index f6cda17777..5447fe532b 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -32,6 +32,7 @@
 
     input {
         height: 30px;
+        border: none;
         padding-left: 10px;
     }
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
index d32edc78af..de6e703404 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -1,4 +1,5 @@
 import {Component, Input} from '@angular/core';
+import {PROPERTY_DATA} from "app/utils";
 import {DataTypeService} from "app/ng2/services/data-type.service";
 import {OperationModel, OperationParameter, InputBEModel, DataTypeModel, Capability} from 'app/models';
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
@@ -36,7 +37,7 @@ export class ParamRowComponent {
     filteredInputProps: Array<DropdownValue> = [];
     filteredCapabilitiesProps: Array<{capabilityName: string, properties: Array<DropdownValueType>}> = [];
 
-    constructor(private dataTypeService: DataTypeService) {}
+    constructor(private dataTypeService:DataTypeService) {}
 
     ngOnInit() {
         if (this.isInputParam) {
diff --git a/catalog-ui/src/app/ng2/pages/page404/page404.component.html b/catalog-ui/src/app/ng2/pages/page404/page404.component.html
index 278ab4d551..a9335a59c4 100644
--- a/catalog-ui/src/app/ng2/pages/page404/page404.component.html
+++ b/catalog-ui/src/app/ng2/pages/page404/page404.component.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
 <div class="page404">
     Page404
 </div>
diff --git a/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.html b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.html
index 98e896f4dc..0f8aeb3a13 100644
--- a/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.html
+++ b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.html
@@ -13,8 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
-
 <div class="plugin-not-connected">
     <div class="plugin-error-message">
         <div class="icon-wrapper">
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.html b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.html
new file mode 100644
index 0000000000..85e83c4310
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.html
@@ -0,0 +1,4 @@
+<div class="workspace-plugins">
+    <plugin-frame (onLoadingDone)="onLoadingDone(plugin)" [plugin]="plugin" [queryParams]="queryParams"></plugin-frame>
+    <loader [display]="isLoading && plugin.isOnline" ></loader>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context.less b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.less
index c913af1931..c913af1931 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context.less
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.less
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.ts b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.ts
new file mode 100644
index 0000000000..21aa8584d5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.ts
@@ -0,0 +1,58 @@
+import {Component, Inject} from "@angular/core";
+import {Component as ComponentData, IUserProperties, Plugin} from "app/models";
+import {CacheService, PluginsService} from "app/services-ng2";
+
+
+@Component({
+    selector: 'plugin-context-view',
+    templateUrl: './plugin-context-view.page.component.html',
+    styleUrls: ['./plugin-context-view.page.component.less']
+})
+
+export class PluginContextViewPageComponent {
+    plugin: Plugin;
+    user: IUserProperties;
+    queryParams: Object;
+    isLoading: boolean;
+    show: boolean;
+    component: ComponentData;
+
+    constructor(@Inject("$stateParams") private _stateParams,
+                private cacheService: CacheService,
+                private pluginsService: PluginsService) {
+
+        this.show = false;
+        this.component = this._stateParams.component;
+        this.plugin = this.pluginsService.getPluginByStateUrl(_stateParams.path);
+        this.user = this.cacheService.get('user');
+    }
+
+    ngOnInit() {
+        this.isLoading = true;
+
+        this.queryParams = {
+            userId: this.user.userId,
+            userRole: this.user.role,
+            displayType: "context",
+            contextType: this.component.getComponentSubType(),
+            uuid: this.component.uuid,
+            lifecycleState: this.component.lifecycleState,
+            isOwner: this.component.lastUpdaterUserId === this.user.userId,
+            version: this.component.version,
+            parentUrl: window.location.origin,
+            eventsClientId: this.plugin.pluginId
+        };
+
+        if (this._stateParams.queryParams) {
+            _.assign(this.queryParams, this._stateParams.queryParams);
+        }
+    }
+
+    onLoadingDone(plugin: Plugin) {
+        if (plugin.pluginId == this.plugin.pluginId) {
+            this.isLoading = false;
+        }
+    }
+
+
+}
diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.html
index 50c5766625..5ce95d11f8 100644
--- a/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.html
@@ -13,9 +13,8 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div class="sdc-catalog-container plugins-tab-container">
-    <loader display="isLoading"></loader>
-    <top-nav [version]="version" [hide-search]="true"></top-nav>
-    <plugin-frame (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame>
+    <top-nav [version]="version" [hideSearch]="true"></top-nav>
+    <plugin-frame (onLoadingDone)="onLoadingDone(plugin)" [plugin]="plugin" [queryParams]="queryParams"></plugin-frame>
+    <loader [display]="isLoading"></loader>
 </div>
diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab.less b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.less
index 3cb5d1b421..3cb5d1b421 100644
--- a/catalog-ui/src/app/view-models/plugins/plugins-tab.less
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.less
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.ts b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.ts
new file mode 100644
index 0000000000..7ba8474569
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.ts
@@ -0,0 +1,45 @@
+import {Component, Inject} from "@angular/core";
+import {IUserProperties, Plugin} from "app/models";
+import {CacheService, PluginsService} from "app/services-ng2";
+
+@Component({
+    selector: 'plugin-tab-view',
+    templateUrl: './plugin-tab-view.page.component.html',
+    styleUrls: ['./plugin-tab-view.page.component.less']
+})
+
+export class PluginTabViewPageComponent {
+    plugin: Plugin;
+    user: IUserProperties;
+    version: string;
+    queryParams: Object;
+    isLoading: boolean;
+
+    constructor(@Inject("$stateParams") private _stateParams,
+                private cacheService: CacheService,
+                private pluginsService: PluginsService) {
+
+        this.plugin = this.pluginsService.getPluginByStateUrl(_stateParams.path);
+        this.version = this.cacheService.get('version');
+        this.user = this.cacheService.get('user');
+    }
+
+    ngOnInit() {
+        this.isLoading = true;
+
+        this.queryParams = {
+            userId: this.user.userId,
+            userRole: this.user.role,
+            displayType: "tab",
+            parentUrl: window.location.origin,
+            eventsClientId: this.plugin.pluginId
+        };
+
+    }
+
+    onLoadingDone(plugin: Plugin) {
+        if (plugin.pluginId == this.plugin.pluginId) {
+            this.isLoading = false;
+        }
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugins-module.ts b/catalog-ui/src/app/ng2/pages/plugins/plugins-module.ts
new file mode 100644
index 0000000000..763e329789
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugins-module.ts
@@ -0,0 +1,34 @@
+import {NgModule} from "@angular/core";
+import {PluginContextViewPageComponent} from "./plugin-context-view/plugin-context-view.page.component";
+import {PluginFrameModule} from "../../components/ui/plugin/plugin-frame.module";
+import {CommonModule} from "@angular/common";
+import {UiElementsModule} from "../../components/ui/ui-elements.module";
+import {PluginTabViewPageComponent} from "./plugin-tab-view/plugin-tab-view.page.component";
+import {LayoutModule} from "../../components/layout/layout.module";
+import {HttpModule} from "@angular/http";
+
+@NgModule({
+    declarations: [
+        PluginContextViewPageComponent,
+        PluginTabViewPageComponent
+    ],
+    imports: [
+        CommonModule,
+        PluginFrameModule,
+        UiElementsModule,
+        LayoutModule,
+        HttpModule
+    ],
+    exports: [
+        PluginContextViewPageComponent,
+        PluginTabViewPageComponent
+    ],
+    entryComponents: [
+        PluginContextViewPageComponent,
+        PluginTabViewPageComponent
+    ]
+})
+export class PluginsModule {
+
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.component.ts
index 20e04f84b6..fe3106649b 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.component.ts
@@ -18,97 +18,95 @@
  * ============LICENSE_END=========================================================
  */
 
-import * as _ from "lodash";
-import {Component} from '@angular/core';
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-import { DataTypeService } from "app/ng2/services/data-type.service";
-import {PropertyBEModel, DataTypesMap} from "app/models";
-import {PROPERTY_DATA} from "app/utils";
-import {PROPERTY_TYPES} from "../../../../utils";
-import { ModalService } from "app/ng2/services/modal.service";
-import { InstancePropertiesAPIMap } from "app/models/properties-inputs/property-fe-map";
-import { ModalModel } from "app/models/modal";
-import { DataTypeModel } from "app/models/data-types";
-
-
+import { Component } from '@angular/core';
+import { DataTypesMap, PropertyBEModel } from 'app/models';
+import { DataTypeModel } from 'app/models/data-types';
+import { ModalModel } from 'app/models/modal';
+import { InstancePropertiesAPIMap } from 'app/models/properties-inputs/property-fe-map';
+import { DropdownValue } from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+import { DataTypeService } from 'app/ng2/services/data-type.service';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { PROPERTY_DATA } from 'app/utils';
+import * as _ from 'lodash';
+import { PROPERTY_TYPES } from '../../../../utils';
 
 @Component({
     selector: 'declare-list',
     templateUrl: './declare-list.component.html',
-    styleUrls:['./declare-list.component.less'],
+    styleUrls: ['./declare-list.component.less'],
 })
 
 export class DeclareListComponent {
 
-    typesProperties: Array<DropdownValue>;
-    typesSchemaProperties: Array<DropdownValue>;
+    typesProperties: DropdownValue[];
+    typesSchemaProperties: DropdownValue[];
     propertyModel: PropertyBEModel;
-    //propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
-    //commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
-    //types:Array<string>;
-    dataTypes:DataTypesMap;
-    isLoading:boolean;
-    inputsToCreate:InstancePropertiesAPIMap;
-    propertiesListString:string;
+    // propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
+    // commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
+    // types:Array<string>;
+    dataTypes: DataTypesMap;
+    isLoading: boolean;
+    inputsToCreate: InstancePropertiesAPIMap;
+    propertiesListString: string;
     privateDataType: DataTypeModel;
 
-    constructor(protected dataTypeService:DataTypeService, private modalService:ModalService) {}
+    constructor(protected dataTypeService: DataTypeService, private modalService: ModalService) {}
 
     ngOnInit() {
         console.log('DeclareListComponent.ngOnInit() - enter');
         this.propertyModel = new PropertyBEModel();
         this.propertyModel.type = '';
         this.propertyModel.schema.property.type = '';
-        const types: Array<string> =  PROPERTY_DATA.TYPES; //All types - simple type + map + list
-        this.dataTypes = this.dataTypeService.getAllDataTypes(); //Get all data types in service
-        const nonPrimitiveTypes :Array<string> = _.filter(Object.keys(this.dataTypes), (type:string)=> {
-            return types.indexOf(type) == -1;
+        const types: string[] =  PROPERTY_DATA.TYPES; // All types - simple type + map + list
+        this.dataTypes = this.dataTypeService.getAllDataTypes(); // Get all data types in service
+        const nonPrimitiveTypes: string[] = _.filter(Object.keys(this.dataTypes), (type: string) => {
+            return types.indexOf(type) === -1;
         });
 
         this.typesProperties = _.map(PROPERTY_DATA.TYPES,
             (type: string) => new DropdownValue(type, type)
         );
-        let typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
+        const typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
             (type: string) => new DropdownValue(type, type)
         );
-        let nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
+        const nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
             (type: string) => new DropdownValue(type,
-                    type.replace("org.openecomp.datatypes.heat.",""))
+                    type.replace('org.openecomp.datatypes.heat.',""))
         );
-        this.typesProperties = _.concat(this.typesProperties,nonPrimitiveTypesValues);
-        this.typesSchemaProperties = _.concat(typesSimpleProperties,nonPrimitiveTypesValues);
-        this.typesProperties.unshift(new DropdownValue('','Select Type...'));
-        this.typesSchemaProperties.unshift(new DropdownValue('','Select Schema Type...'));
+        this.typesProperties = _.concat(this.typesProperties, nonPrimitiveTypesValues);
+        this.typesSchemaProperties = _.concat(typesSimpleProperties, nonPrimitiveTypesValues);
+        this.typesProperties.unshift(new DropdownValue('', 'Select Type...'));
+        this.typesSchemaProperties.unshift(new DropdownValue('', 'Select Schema Type...'));
 
         this.inputsToCreate = this.modalService.currentModal.instance.dynamicContent.instance.input.properties;
 
         this.propertiesListString = this.modalService.currentModal.instance.dynamicContent.instance.input.propertyNameList.join(", ");
 
         this.privateDataType = new DataTypeModel(null);
-        this.privateDataType.name = "datatype";
+        this.privateDataType.name = 'datatype';
 
         console.log('DeclareListComponent.ngOnInit() - leave');
     }
 
-    checkFormValidForSubmit(){
-        const showSchema:boolean = this.showSchema();
-        let isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type)? false : true;
-        if (!showSchema){
+    checkFormValidForSubmit() {
+        const showSchema: boolean = this.showSchema();
+        const isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type) ? false : true;
+        if (!showSchema) {
             this.propertyModel.schema.property.type = '';
         }
         return this.propertyModel.name && this.propertyModel.type && isSchemaValid;
     }
 
-    showSchema():boolean {
+    showSchema(): boolean {
         return [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP].indexOf(this.propertyModel.type) > -1;
-    };
+    }
 
-    onSchemaTypeChange():void {
-        if (this.propertyModel.type == PROPERTY_TYPES.MAP) {
+    onSchemaTypeChange(): void {
+        if (this.propertyModel.type === PROPERTY_TYPES.MAP) {
             this.propertyModel.value = JSON.stringify({'': null});
-        } else if (this.propertyModel.type == PROPERTY_TYPES.LIST) {
+        } else if (this.propertyModel.type === PROPERTY_TYPES.LIST) {
             this.propertyModel.value = JSON.stringify([]);
         }
-    };
+    }
 
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.module.ts
index 54af76a9f5..97667f9261 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.module.ts
@@ -18,13 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {DeclareListComponent} from "./declare-list.component";
-import {FormsModule} from "@angular/forms";
-import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from "../../../shared/translator/translate.module";
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+import { DeclareListComponent } from './declare-list.component';
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
index c46d617b86..f5500d42ae 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
@@ -19,7 +19,6 @@
  */
 import { NgModule } from "@angular/core";
 import {HierarchyNavigationComponent} from "../../components/logic/hierarchy-navigtion/hierarchy-navigation.component";
-import {HttpModule} from "@angular/http";
 import {FormsModule} from "@angular/forms";
 import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module";
 import {UiElementsModule} from "../../components/ui/ui-elements.module";
@@ -46,12 +45,11 @@ import {ComponentModeService} from "../../services/component-services/component-
     imports: [
         BrowserModule,
         FormsModule,
-        HttpModule,
         GlobalPipesModule,
         PropertyTableModule,
         PoliciesTableModule,
         UiElementsModule],
-    
+
     entryComponents: [PropertiesAssignmentComponent],
     exports: [
         PropertiesAssignmentComponent
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index 580c36284b..8d4215aaec 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -18,7 +18,7 @@
     <div class="main-content">
         <div class="left-column">
             <div class="main-tabs-section">
-                <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
+                <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true" >
                     <tab tabTitle="Properties">
                         <properties-table class="properties-table"
                             [fePropertiesMap]="instanceFePropertiesMap"
@@ -42,12 +42,13 @@
                     </tab>
                     <tab tabTitle="Inputs">
                         <inputs-table class="properties-table"
-                                      [readonly]="isReadonly"
-                                      [inputs]="inputs | searchFilter:'name':searchQuery"
-                                      [instanceNamesMap]="componentInstanceNamesMap"
-                                      [isLoading]="loadingInputs"
-                                      (deleteInput)="deleteInput($event)"
-                                      (inputChanged)="dataChanged($event)">
+                            [fePropertiesMap]="instanceFePropertiesMap"
+                            [readonly]="isReadonly"
+                            [inputs]="inputs | searchFilter:'name':searchQuery"
+                            [instanceNamesMap]="componentInstanceNamesMap"
+                            [isLoading]="loadingInputs"
+                            (deleteInput)="deleteInput($event)"
+                            (inputChanged)="dataChanged($event)">
                         </inputs-table>
                     </tab>
                     <tab tabTitle="Policies">
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index 855bdc5bcb..a1309aba61 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -133,13 +133,12 @@
         flex-direction:column;
         margin: 0px 0 0 1em;
         overflow-x:auto;
-         .add-btn{
+        .add-btn{
 
             align-self: flex-end;
             margin-top: 10px;
             margin-bottom: 19px;
         }
-
         /deep/ .tabs {
             border-bottom: solid 1px #d0d0d0;
         }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 061439800f..4b84f0e66f 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -19,58 +19,34 @@
  */
 
 import * as _ from "lodash";
-import {Component, ViewChild, Inject, TemplateRef} from "@angular/core";
+import { Component, ViewChild, Inject, TemplateRef } from "@angular/core";
 import { PropertiesService } from "../../services/properties.service";
-import {
-    PropertyFEModel,
-    InstanceFePropertiesMap,
-    InstanceBePropertiesMap,
-    InstancePropertiesAPIMap,
-    Component as ComponentData,
-    FilterPropertiesAssignmentData,
-    ModalModel,
-    ButtonModel,
-    Capability,
-    ToscaPresentationData
-} from "app/models";
+import { PropertyFEModel, InstanceFePropertiesMap, InstanceBePropertiesMap, InstancePropertiesAPIMap, Component as ComponentData, FilterPropertiesAssignmentData, ModalModel, ButtonModel } from "app/models";
 import { ResourceType } from "app/utils";
-import {ComponentServiceNg2} from "../../services/component-services/component.service";
-import {ComponentInstanceServiceNg2} from "../../services/component-instance-services/component-instance.service"
-import {
-    InputBEModel,
-    InputFEModel,
-    ComponentInstance,
-    GroupInstance,
-    PolicyInstance,
-    PropertyBEModel,
-    DerivedFEProperty,
-    SimpleFlatProperty,
-    CapabilitiesGroup
-} from "app/models";
+import { ComponentServiceNg2 } from "../../services/component-services/component.service";
+import { TopologyTemplateService } from "../../services/component-services/topology-template.service";
+import { ComponentInstanceServiceNg2 } from "../../services/component-instance-services/component-instance.service"
+import { InputBEModel, InputFEModel, ComponentInstance, GroupInstance, PolicyInstance, PropertyBEModel, DerivedFEProperty, SimpleFlatProperty } from "app/models";
 import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
-import {WorkspaceMode, EVENTS} from "../../../utils/constants";
-import {EventListenerService} from "app/services/event-listener-service"
-import {HierarchyDisplayOptions} from "../../components/logic/hierarchy-navigtion/hierarchy-display-options";
-import {FilterPropertiesAssignmentComponent} from "../../components/logic/filter-properties-assignment/filter-properties-assignment.component";
-import {PropertyRowSelectedEvent} from "../../components/logic/properties-table/properties-table.component";
-import {HierarchyNavService} from "./services/hierarchy-nav.service";
-import {PropertiesUtils} from "./services/properties.utils";
-import {ComponentModeService} from "../../services/component-services/component-mode.service";
-import {ModalService} from "../../services/modal.service";
-import {Tabs, Tab} from "../../components/ui/tabs/tabs.component";
-import {InputsUtils} from "./services/inputs.utils";
-import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
-import {DeclareListComponent} from "./declare-list/declare-list.component";
+import { WorkspaceMode, EVENTS, PROPERTY_TYPES } from "../../../utils/constants";
+import { EventListenerService } from "app/services/event-listener-service"
+import { HierarchyDisplayOptions } from "../../components/logic/hierarchy-navigtion/hierarchy-display-options";
+import { FilterPropertiesAssignmentComponent } from "../../components/logic/filter-properties-assignment/filter-properties-assignment.component";
+import { PropertyRowSelectedEvent } from "../../components/logic/properties-table/properties-table.component";
+import { HierarchyNavService } from "./services/hierarchy-nav.service";
+import { PropertiesUtils } from "./services/properties.utils";
+import { ComponentModeService } from "../../services/component-services/component-mode.service";
+import { Tabs, Tab } from "../../components/ui/tabs/tabs.component";
+import { InputsUtils } from "./services/inputs.utils";
 import { InstanceFeDetails } from "../../../models/instance-fe-details";
-import { SdcUiComponents } from "sdc-ui/lib/angular";
-//import { ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service";
-import { IModalButtonComponent } from "sdc-ui/lib/angular/modals/models/modal-config";
+import { SdcUiServices, SdcUiCommon } from "onap-ui-angular";
 import { UnsavedChangesComponent } from "app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component";
-import {Observable} from "rxjs";
-import { DataTypeService } from "app/ng2/services/data-type.service";
-import { DataTypeModel } from "app/models";
-import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
-import { PropertyDeclareAPIModel} from "app/models";
+import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
+import {ModalService} from "../../services/modal.service";
+import { DeclareListComponent } from "./declare-list/declare-list.component";
+import { CapabilitiesGroup, Capability } from "../../../models/capability";
+import { ToscaPresentationData } from "../../../models/tosca-presentation";
+import { Observable } from "rxjs";
 
 const SERVICE_SELF_TITLE = "SELF";
 @Component({
@@ -119,7 +95,7 @@ export class PropertiesAssignmentComponent {
     stateChangeStartUnregister:Function;
     serviceBePropertiesMap: InstanceBePropertiesMap;
     serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap;
-    selectedInstance_FlattenCapabilitiesList: Array<Capability>;
+    selectedInstance_FlattenCapabilitiesList: Capability[];
 
     @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
     @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -136,12 +112,13 @@ export class PropertiesAssignmentComponent {
                 @Inject("$state") private $state:ng.ui.IStateService,
                 @Inject("Notification") private Notification:any,
                 private componentModeService:ComponentModeService,
-                private ModalService:ModalService,
                 private EventListenerService:EventListenerService,
-                private ModalServiceSdcUI: SdcUiComponents.ModalService) {
+                private ModalServiceSdcUI: SdcUiServices.ModalService,
+                private ModalService: ModalService,
+                private keysPipe:KeysPipe,
+                private topologyTemplateService: TopologyTemplateService) {
 
         this.instanceFePropertiesMap = new InstanceFePropertiesMap();
-
         /* This is the way you can access the component data, please do not use any data except metadata, all other data should be received from the new api calls on the first time
         than if the data is already exist, no need to call the api again - Ask orit if you have any questions*/
         this.component = _stateParams.component;
@@ -159,8 +136,8 @@ export class PropertiesAssignmentComponent {
         this.loadingPolicies = true;
         this.loadingInstances = true;
         this.loadingProperties = true;
-        this.componentServiceNg2
-            .getComponentInputsWithProperties(this.component)
+        this.topologyTemplateService
+            .getComponentInputsWithProperties(this.component.componentType, this.component.uniqueId)
             .subscribe(response => {
                 _.forEach(response.inputs, (input: InputBEModel) => {
                     const newInput: InputFEModel = new InputFEModel(input);
@@ -169,7 +146,7 @@ export class PropertiesAssignmentComponent {
                 });
                 this.loadingInputs = false;
 
-            });
+            }, error => {}); //ignore error
         this.componentServiceNg2
             .getComponentResourcePropertiesData(this.component)
             .subscribe(response => {
@@ -177,6 +154,7 @@ export class PropertiesAssignmentComponent {
                 this.instances = [];
                 this.instances.push(...response.componentInstances);
                 this.instances.push(...response.groupInstances);
+                this.instances.push(...response.policies);
 
                 _.forEach(response.policies, (policy: any) => {
                     const newPolicy: InputFEModel = new InputFEModel(policy);
@@ -199,7 +177,7 @@ export class PropertiesAssignmentComponent {
                     this.loadingProperties = false;
                 }
                 this.selectFirstInstanceByDefault();
-            });
+            }, error => { this.loadingInstances = false; }); //ignore error
 
         this.stateChangeStartUnregister = this.$scope.$on('$stateChangeStart', (event, toState, toParams) => {
             // stop if has changed properties
@@ -238,14 +216,14 @@ export class PropertiesAssignmentComponent {
 
     getServiceProperties(){
         this.loadingProperties = false;
-        this.componentServiceNg2
-            .getServiceProperties(this.component)
-            .subscribe(response => {
+        this.topologyTemplateService
+            .getServiceProperties(this.component.uniqueId)
+            .subscribe((response) => {
                 this.serviceBePropertiesMap = new InstanceBePropertiesMap();
                 this.serviceBePropertiesMap[this.component.uniqueId] = response;
                 this.processInstancePropertiesResponse(this.serviceBePropertiesMap, false);
                 this.loadingProperties = false;
-            }, error => {
+            }, (error) => {
                 this.loadingProperties = false;
             });
     }
@@ -267,14 +245,12 @@ export class PropertiesAssignmentComponent {
         this.loadingProperties = true;
         if (instance instanceof ComponentInstance) {
             let instanceBePropertiesMap: InstanceBePropertiesMap = new InstanceBePropertiesMap();
-            this.selectedInstance_FlattenCapabilitiesList = instance.capabilities ? CapabilitiesGroup.getFlattenedCapabilities(instance.capabilities) : [];
             if (this.isInput(instance.originType)) {
                 this.componentInstanceServiceNg2
                     .getComponentInstanceInputs(this.component, instance)
                     .subscribe(response => {
                         instanceBePropertiesMap[instance.uniqueId] = response;
                         this.processInstancePropertiesResponse(instanceBePropertiesMap, true);
-                        this.processInstanceCapabilitiesPropertiesResponse(false);
                         this.loadingProperties = false;
                     }, error => {
                     }); //ignore error
@@ -286,7 +262,6 @@ export class PropertiesAssignmentComponent {
                     .subscribe(response => {
                         instanceBePropertiesMap[instance.uniqueId] = response;
                         this.processInstancePropertiesResponse(instanceBePropertiesMap, false);
-                        this.processInstanceCapabilitiesPropertiesResponse(false);
                         this.loadingProperties = false;
                     }, error => {
                     }); //ignore error
@@ -305,7 +280,7 @@ export class PropertiesAssignmentComponent {
         } else if (instance instanceof PolicyInstance) {
             let instanceBePropertiesMap: InstanceBePropertiesMap = new InstanceBePropertiesMap();
             this.componentInstanceServiceNg2
-                .getComponentPolicyInstanceProperties(this.component, this.selectedInstanceData.uniqueId)
+                .getComponentPolicyInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId)
                 .subscribe((response) => {
                     instanceBePropertiesMap[instance.uniqueId] = response;
                     this.processInstancePropertiesResponse(instanceBePropertiesMap, false);
@@ -480,7 +455,7 @@ export class PropertiesAssignmentComponent {
         let selectedGroupInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         let selectedPolicyInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         let selectedComponentInstancesInputs: InstanceBePropertiesMap = new InstanceBePropertiesMap();
-        let instancesIds = new KeysPipe().transform(this.instanceFePropertiesMap, []);
+        let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
 
         angular.forEach(instancesIds, (instanceId: string): void => {
             let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId);
@@ -500,7 +475,7 @@ export class PropertiesAssignmentComponent {
 
         let inputsToCreate: InstancePropertiesAPIMap = new InstancePropertiesAPIMap(selectedComponentInstancesInputs, selectedComponentInstancesProperties, selectedGroupInstancesProperties, selectedPolicyInstancesProperties);
 
-        //move changed capabilities properties from componentInstanceInputsMap obj to componentInstanceProperties
+	//move changed capabilities properties from componentInstanceInputsMap obj to componentInstanceProperties
         inputsToCreate.componentInstanceProperties[this.selectedInstanceData.uniqueId] =
             (inputsToCreate.componentInstanceProperties[this.selectedInstanceData.uniqueId] || []).concat(
                 _.filter(
@@ -526,15 +501,14 @@ export class PropertiesAssignmentComponent {
                 }
             }
         );
-
-        this.componentServiceNg2
+        this.topologyTemplateService
             .createInput(this.component, inputsToCreate, this.isSelf())
-            .subscribe(response => {
+            .subscribe((response) => {
                 this.setInputTabIndication(response.length);
                 this.checkedPropertiesCount = 0;
                 this.checkedChildPropertiesCount = 0;
                 _.forEach(response, (input: InputBEModel) => {
-                    let newInput: InputFEModel = new InputFEModel(input);
+                    const newInput: InputFEModel = new InputFEModel(input);
                     this.inputsUtils.resetInputDefaultValue(newInput, input.defaultValue);
                     this.inputs.push(newInput);
                     this.updatePropertyValueAfterDeclare(newInput);
@@ -628,8 +602,8 @@ export class PropertiesAssignmentComponent {
                         };
                         console.log("save button clicked. input=", input);
 
-                        this.componentServiceNg2
-                        .createListInput(this.component, input, this.isSelf())
+                        this.topologyTemplateService
+                        .createListInput(this.component.uniqueId, input, this.isSelf())
                         .subscribe(response => {
                             this.setInputTabIndication(response.length);
                             this.checkedPropertiesCount = 0;
@@ -662,8 +636,8 @@ export class PropertiesAssignmentComponent {
         console.log('declareListProperties() - leave');
     };
 
-    /*** DECLARE PROPERTIES/POLICIES ***/
-    declarePropertiesToPolicies = (): void => {
+     /*** DECLARE PROPERTIES/POLICIES ***/
+     declarePropertiesToPolicies = (): void => {
         let selectedComponentInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         let instancesIds = new KeysPipe().transform(this.instanceFePropertiesMap, []);
 
@@ -679,7 +653,7 @@ export class PropertiesAssignmentComponent {
         let policiesToCreate: InstancePropertiesAPIMap = new InstancePropertiesAPIMap(null, selectedComponentInstancesProperties, null, null);
         this.loadingPolicies = true;
 
-        this.componentServiceNg2
+        this.topologyTemplateService
             .createPolicy(this.component, policiesToCreate, this.isSelf())
             .subscribe(response => {
                 this.setPolicyTabIndication(response.length);
@@ -688,7 +662,7 @@ export class PropertiesAssignmentComponent {
                 this.loadingPolicies = false;
             }); //ignore error
 
-    };
+    }
 
     displayPoliciesAsDeclared = (policies) => {
         _.forEach(policies, (policy: any) => {
@@ -699,8 +673,7 @@ export class PropertiesAssignmentComponent {
             this.updatePropertyValueAfterDeclare(newPolicy);
             this.policies.push(policy);
         });
-    };
-
+    }
 
     saveChangedData = ():Promise<(PropertyBEModel|InputBEModel)[]> => {
         return new Promise((resolve, reject) => {
@@ -736,7 +709,8 @@ export class PropertiesAssignmentComponent {
                         if (changedInputsProperties.length && changedCapabilitiesProperties.length) {
                             request = Observable.forkJoin(
                                 this.componentInstanceServiceNg2.updateInstanceInputs(this.component, this.selectedInstanceData.uniqueId, changedInputsProperties),
-                                this.componentInstanceServiceNg2.updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedCapabilitiesProperties)
+                                this.componentInstanceServiceNg2.updateInstanceProperties(this.component.componentType, this.component.uniqueId,
+                                    this.selectedInstanceData.uniqueId, changedCapabilitiesProperties)
                             );
                         }
                         else if (changedInputsProperties.length) {
@@ -745,7 +719,7 @@ export class PropertiesAssignmentComponent {
                         }
                         else if (changedCapabilitiesProperties.length) {
                             request = this.componentInstanceServiceNg2
-                                .updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedCapabilitiesProperties);
+                                .updateInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, changedCapabilitiesProperties);
                         }
                         handleSuccess = (response) => {
                             // reset each changed property with new value and remove it from changed properties list
@@ -757,19 +731,18 @@ export class PropertiesAssignmentComponent {
                         };
                     } else {
                         if (this.isSelf()) {
-                            request = this.componentServiceNg2.updateServiceProperties(this.component, _.map(changedProperties, cp => {
+                            request = this.topologyTemplateService.updateServiceProperties(this.component.uniqueId,  _.map(changedProperties, cp => {
                                 delete cp.constraints;
                                 return cp;
                             }));
                         } else {
                             request = this.componentInstanceServiceNg2
-                                .updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedProperties);
+                                .updateInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, changedProperties);
                         }
                         handleSuccess = (response) => {
                             // reset each changed property with new value and remove it from changed properties list
                             response.forEach((resProp) => {
-                                const changedProp = <PropertyFEModel>_.find(this.changedData, changedDataObject => changedDataObject.uniqueId === resProp.uniqueId);
-                                this.changedData = _.filter(this.changedData, changedDataObject => changedDataObject.uniqueId !== resProp.uniqueId);
+                                const changedProp = <PropertyFEModel>this.changedData.shift();
                                 this.propertiesUtils.resetPropertyValue(changedProp, resProp.value);
                             });
                             resolve(response);
@@ -778,7 +751,7 @@ export class PropertiesAssignmentComponent {
                     }
                 } else if (this.selectedInstanceData instanceof GroupInstance) {
                     request = this.componentInstanceServiceNg2
-                        .updateComponentGroupInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedProperties);
+                        .updateComponentGroupInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, changedProperties);
                     handleSuccess = (response) => {
                         // reset each changed property with new value and remove it from changed properties list
                         response.forEach((resProp) => {
@@ -790,7 +763,7 @@ export class PropertiesAssignmentComponent {
                     };
                 } else if (this.selectedInstanceData instanceof PolicyInstance) {
                     request = this.componentInstanceServiceNg2
-                        .updateComponentPolicyInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedProperties);
+                        .updateComponentPolicyInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, changedProperties);
                     handleSuccess = (response) => {
                         // reset each changed property with new value and remove it from changed properties list
                         response.forEach((resProp) => {
@@ -802,6 +775,7 @@ export class PropertiesAssignmentComponent {
                     };
                 }
             } else if (this.isInputsTabSelected) {
+            
                 const changedInputs: InputBEModel[] = this.changedData.map((changedInput) => {
                     changedInput = <InputFEModel>changedInput;
                     const inputBE = new InputBEModel(changedInput);
@@ -925,27 +899,27 @@ export class PropertiesAssignmentComponent {
                 {
                     title: modalTitle,
                     size: 'sm',
-                    type: 'custom',
-                    testId: "id",
-                    
+                    type: SdcUiCommon.ModalType.custom,
+                    testId: "navigate-modal",
+
                     buttons: [
-                        {id: 'cancelButton', text: 'Cancel', type: 'secondary', size: 'xsm', closeModal: true, callback: () => reject()},
-                        {id: 'discardButton', text: 'Discard', type: 'secondary', size: 'xsm', closeModal: true, callback: () => { this.reverseChangedData(); resolve()}},
-                        {id: 'saveButton', text: 'Save', type: 'primary', size: 'xsm', closeModal: true, disabled: !this.isValidChangedData, callback: () => this.doSaveChangedData(resolve, reject)}
-                ] as IModalButtonComponent[]
-            }, UnsavedChangesComponent, {isValidChangedData: this.isValidChangedData});
+                        {id: 'cancelButton', text: 'Cancel', type: SdcUiCommon.ButtonType.secondary, size: 'xsm', closeModal: true, callback: () => reject()},
+                        {id: 'discardButton', text: 'Discard', type: SdcUiCommon.ButtonType.secondary, size: 'xsm', closeModal: true, callback: () => { this.reverseChangedData(); resolve()}},
+                        {id: 'saveButton', text: 'Save', type: SdcUiCommon.ButtonType.primary, size: 'xsm', closeModal: true, disabled: !this.isValidChangedData, callback: () => this.doSaveChangedData(resolve, reject)}
+                ] as SdcUiCommon.IModalButtonComponent[]
+            } as SdcUiCommon.IModalConfig, UnsavedChangesComponent, {isValidChangedData: this.isValidChangedData});
         });
 
     }
 
     updatePropertyValueAfterDeclare = (input: InputFEModel) => {
         if (this.instanceFePropertiesMap[input.instanceUniqueId]) {
-            let instanceName = input.instanceUniqueId.slice(input.instanceUniqueId.lastIndexOf('.') + 1);
-            let propertyForUpdatindVal = _.find(this.instanceFePropertiesMap[input.instanceUniqueId], (feProperty: PropertyFEModel) => {
-                return feProperty.uniqueId === input.propertyId &&
+            const instanceName = input.instanceUniqueId.slice(input.instanceUniqueId.lastIndexOf('.') + 1);
+            const propertyForUpdatindVal = _.find(this.instanceFePropertiesMap[input.instanceUniqueId], (feProperty: PropertyFEModel) => {
+                return feProperty.name == input.relatedPropertyName &&
                     (feProperty.name == input.relatedPropertyName || input.name === instanceName.concat('_').concat(feProperty.name.replace(/[.]/g, '_')));
             });
-            let inputPath = (input.inputPath && input.inputPath != propertyForUpdatindVal.name) ? input.inputPath : undefined;
+            const inputPath = (input.inputPath && input.inputPath != propertyForUpdatindVal.name) ? input.inputPath : undefined;
             propertyForUpdatindVal.setAsDeclared(inputPath); //set prop as declared before assigning value
             this.propertiesService.disableRelatedProperties(propertyForUpdatindVal, inputPath);
             this.propertiesUtils.resetPropertyValue(propertyForUpdatindVal, input.relatedPropertyValue, inputPath);
@@ -968,7 +942,7 @@ export class PropertiesAssignmentComponent {
 
     setPolicyTabIndication = (numPolicies: number): void => {
         this.propertyInputTabs.setTabIndication('Policies', numPolicies);
-    };
+    }
 
     resetUnsavedChangesForInput = (input:InputFEModel) => {
         this.inputsUtils.resetInputDefaultValue(input, input.defaultValue);
@@ -1009,9 +983,9 @@ export class PropertiesAssignmentComponent {
 
     deletePolicy = (policy: PolicyInstance) => {
         this.loadingPolicies = true;
-        this.componentServiceNg2
+        this.topologyTemplateService
             .deletePolicy(this.component, policy)
-            .subscribe(response => {
+            .subscribe((response) => {
                 this.policies = this.policies.filter(policy => policy.uniqueId !== response.uniqueId);
                 //Reload the whole instance for now - TODO: CHANGE THIS after the BE starts returning properties within the response, use commented code below instead!
                 this.changeSelectedInstance(this.selectedInstanceData);
@@ -1020,25 +994,25 @@ export class PropertiesAssignmentComponent {
     };
 
     deleteProperty = (property: PropertyFEModel) => {
-        let propertyToDelete = new PropertyFEModel(property);
+        const propertyToDelete = new PropertyFEModel(property);
         this.loadingProperties = true;
-        let feMap = this.instanceFePropertiesMap;
-        this.componentServiceNg2
-            .deleteServiceProperty(this.component, propertyToDelete)
-            .subscribe(response => {
+        const feMap = this.instanceFePropertiesMap;
+        this.topologyTemplateService
+            .deleteServiceProperty(this.component.uniqueId, propertyToDelete)
+            .subscribe((response) => {
                 const props = feMap[this.component.uniqueId];
                 props.splice(props.findIndex(p => p.uniqueId === response),1);
                 this.loadingProperties = false;
-            }, error => {
+            }, (error) => {
                 this.loadingProperties = false;
                 console.error(error);
             });
-    };
+    }
 
     /*** addProperty ***/
     addProperty = () => {
         let modalTitle = 'Add Property';
-        const modal = this.ModalService.createCustomModal(new ModalModel(
+        let modal = this.ModalService.createCustomModal(new ModalModel(
             'sm',
             modalTitle,
             null,
@@ -1046,10 +1020,10 @@ export class PropertiesAssignmentComponent {
                 new ButtonModel('Save', 'blue', () => {
                     modal.instance.dynamicContent.instance.isLoading = true;
                     const newProperty: PropertyBEModel = modal.instance.dynamicContent.instance.propertyModel;
-                    this.componentServiceNg2.createServiceProperty(this.component, newProperty)
-                        .subscribe(response => {
+                    this.topologyTemplateService.createServiceProperty(this.component.uniqueId, newProperty)
+                        .subscribe((response) => {
                             modal.instance.dynamicContent.instance.isLoading = false;
-                            let newProp: PropertyFEModel = this.propertiesUtils.convertAddPropertyBAToPropertyFE(response);
+                            const newProp: PropertyFEModel = this.propertiesUtils.convertAddPropertyBAToPropertyFE(response);
                             this.instanceFePropertiesMap[this.component.uniqueId].push(newProp);
                             modal.instance.close();
                         }, (error) => {
@@ -1059,7 +1033,6 @@ export class PropertiesAssignmentComponent {
                                 title: 'Failure'
                             });
                         });
-
                 }, () => !modal.instance.dynamicContent.instance.checkFormValidForSubmit()),
                 new ButtonModel('Cancel', 'outline grey', () => {
                     modal.instance.close();
@@ -1069,24 +1042,23 @@ export class PropertiesAssignmentComponent {
         ));
         this.ModalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {});
         modal.instance.open();
-    };
+    }
 
     /*** SEARCH RELATED FUNCTIONS ***/
     searchPropertiesInstances = (filterData:FilterPropertiesAssignmentData) => {
         let instanceBePropertiesMap:InstanceBePropertiesMap;
         this.componentServiceNg2
             .filterComponentInstanceProperties(this.component, filterData)
-            .subscribe(response => {
-
+            .subscribe((response) => {
                 this.processInstancePropertiesResponse(response, false);
                 this.hierarchyPropertiesDisplayOptions.searchText = filterData.propertyName;//mark results in tree
                 this.searchPropertyName = filterData.propertyName;//mark in table
                 this.hierarchyNavTabs.triggerTabChange('Composition');
                 this.propertiesNavigationData = [];
                 this.displayClearSearch = true;
-            }, error => {}); //ignore error
+            }, (error) => {}); //ignore error
 
-    };
+    }
 
     clearSearch = () => {
         this.instancesNavigationData = this.instances;
@@ -1106,5 +1078,6 @@ export class PropertiesAssignmentComponent {
     private isInput = (instanceType:string):boolean =>{
         return instanceType === ResourceType.VF || instanceType === ResourceType.PNF || instanceType === ResourceType.CVFC || instanceType === ResourceType.CR;
     }
+    
 
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
index 7d76904539..5053d52cc8 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
@@ -1,79 +1,78 @@
-import * as _ from "lodash";
-import {Component} from '@angular/core';
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-import { DataTypeService } from "app/ng2/services/data-type.service";
-import {PropertyBEModel, DataTypesMap} from "app/models";
-import {PROPERTY_DATA} from "app/utils";
-import {PROPERTY_TYPES} from "../../../../utils";
-
 
+import { Component } from '@angular/core';
+import { DataTypesMap, PropertyBEModel } from 'app/models';
+import { DropdownValue } from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+import { DataTypeService } from 'app/ng2/services/data-type.service';
+import { PROPERTY_DATA } from 'app/utils';
+import * as _ from 'lodash';
+import { PROPERTY_TYPES } from '../../../../utils';
 
 @Component({
     selector: 'property-creator',
     templateUrl: './property-creator.component.html',
-    styleUrls:['./property-creator.component.less'],
+    styleUrls: ['./property-creator.component.less'],
 })
 
 export class PropertyCreatorComponent {
 
-    typesProperties: Array<DropdownValue>;
-    typesSchemaProperties: Array<DropdownValue>;
+    typesProperties: DropdownValue[];
+    typesSchemaProperties: DropdownValue[];
     propertyModel: PropertyBEModel;
-    //propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
-    //commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
-    //types:Array<string>;
-    dataTypes:DataTypesMap;
-    isLoading:boolean;
+    // propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
+    // commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
+    // types:Array<string>;
+    dataTypes: DataTypesMap;
+    isLoading: boolean;
 
-    constructor(protected dataTypeService:DataTypeService) {}
+    constructor(protected dataTypeService: DataTypeService) {}
 
     ngOnInit() {
         this.propertyModel = new PropertyBEModel();
         this.propertyModel.type = '';
         this.propertyModel.schema.property.type = '';
-        const types: Array<string> =  PROPERTY_DATA.TYPES; //All types - simple type + map + list
-        this.dataTypes = this.dataTypeService.getAllDataTypes(); //Get all data types in service
-        const nonPrimitiveTypes :Array<string> = _.filter(Object.keys(this.dataTypes), (type:string)=> {
-            return types.indexOf(type) == -1;
+        const types: string[] =  PROPERTY_DATA.TYPES; // All types - simple type + map + list
+        this.dataTypes = this.dataTypeService.getAllDataTypes(); // Get all data types in service
+        const nonPrimitiveTypes: string[] = _.filter(Object.keys(this.dataTypes), (type: string) => {
+            return types.indexOf(type) === -1;
         });
 
         this.typesProperties = _.map(PROPERTY_DATA.TYPES,
             (type: string) => new DropdownValue(type, type)
         );
-        let typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
+        const typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
             (type: string) => new DropdownValue(type, type)
         );
-        let nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
+        const nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
             (type: string) => new DropdownValue(type,
-                    type.replace("org.openecomp.datatypes.heat.",""))
+                    type.replace('org.openecomp.datatypes.heat.', ''))
         )
         .sort((a, b) => a.label.localeCompare(b.label));
-        this.typesProperties = _.concat(this.typesProperties,nonPrimitiveTypesValues);
-        this.typesSchemaProperties = _.concat(typesSimpleProperties,nonPrimitiveTypesValues);
-        this.typesProperties.unshift(new DropdownValue('','Select Type...'));
-        this.typesSchemaProperties.unshift(new DropdownValue('','Select Schema Type...'));
+        this.typesProperties = _.concat(this.typesProperties, nonPrimitiveTypesValues);
+        this.typesSchemaProperties = _.concat(typesSimpleProperties, nonPrimitiveTypesValues);
+        this.typesProperties.unshift(new DropdownValue('', 'Select Type...'));
+        this.typesSchemaProperties.unshift(new DropdownValue('', 'Select Schema Type...'));
 
     }
 
-    checkFormValidForSubmit(){
-        const showSchema:boolean = this.showSchema();
-        let isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type)? false : true;
-        if (!showSchema){
+    checkFormValidForSubmit() {
+        const showSchema: boolean = this.showSchema();
+        const isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type) ? false : true;
+        if (!showSchema) {
             this.propertyModel.schema.property.type = '';
         }
         return this.propertyModel.name && this.propertyModel.type && isSchemaValid;
     }
 
-    showSchema():boolean {
+    showSchema(): boolean {
         return [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP].indexOf(this.propertyModel.type) > -1;
-    };
+    }
 
-    onSchemaTypeChange():void {
-        if (this.propertyModel.type == PROPERTY_TYPES.MAP) {
+    onSchemaTypeChange(): void {
+        if (this.propertyModel.type === PROPERTY_TYPES.MAP) {
             this.propertyModel.value = JSON.stringify({'': null});
-        } else if (this.propertyModel.type == PROPERTY_TYPES.LIST) {
+        } else if (this.propertyModel.type === PROPERTY_TYPES.LIST) {
             this.propertyModel.value = JSON.stringify([]);
         }
-    };
+    }
 
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
index 92accb26b5..1cbb4e17ec 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
@@ -1,10 +1,10 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {PropertyCreatorComponent} from "./property-creator.component";
-import {FormsModule} from "@angular/forms";
-import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from "../../../shared/translator/translate.module";
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+import { PropertyCreatorComponent } from './property-creator.component';
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
index 011be41611..bd7ccd1bfd 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
@@ -48,7 +48,7 @@ export class PropertiesUtils {
 
                     let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
 
-                    this.initValueObjectRef(newFEProp); //initialize valueObj.
+                    this.initValueObjectRef(newFEProp); //initialize valueObj AND creates flattened children
                     propertyFeArray.push(newFEProp);
                     newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
                     this.dataTypeService.checkForCustomBehavior(newFEProp);
@@ -79,8 +79,8 @@ export class PropertiesUtils {
         return instanceFePropertiesMap;
     }
 
-    public convertAddPropertyBAToPropertyFE = (property: PropertyBEModel):PropertyFEModel => {
-        let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
+    public convertAddPropertyBAToPropertyFE = (property: PropertyBEModel): PropertyFEModel => {
+        const newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
         this.initValueObjectRef(newFEProp);
         newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
         this.dataTypeService.checkForCustomBehavior(newFEProp);
@@ -108,7 +108,7 @@ export class PropertiesUtils {
         let tempProps: Array<DerivedFEProperty> = [];
         let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(type);
         this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, parentName);
-        return tempProps;
+        return _.sortBy(tempProps, ['propertiesName']);
     }
 
     /* Sets the valueObj of parent property and its children.
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts
index 1e767a5690..104a6d0579 100644
--- a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts
@@ -5,7 +5,8 @@ import {FormsModule} from "@angular/forms";
 import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
 import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
 import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts
index 1be8be51af..d38790a8db 100644
--- a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts
@@ -4,7 +4,7 @@ import {RequirementsEditorComponent} from "./requirements-editor.component";
 import {FormsModule} from "@angular/forms";
 import {FormElementsModule} from "../../../components/ui/form-components/form-elements.module";
 import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+import { SdcUiComponentsModule } from "onap-ui-angular";
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.ts b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.ts
index 2c86cc5c5c..8444c6261a 100644
--- a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.ts
+++ b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.ts
@@ -14,29 +14,29 @@
  * permissions and limitations under the License.
  */
 
-import * as _ from "lodash";
 import { Component } from '@angular/core';
-import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
 import {
-    Service,
-    ServiceInstanceObject,
-    InstanceFePropertiesMap,
-    InstanceBePropertiesMap,
-    PropertyBEModel,
+    Capability,
     InputBEModel,
-    OperationModel,
+    InstanceBePropertiesMap,
+    InstanceFePropertiesMap,
     InterfaceModel,
-    Capability
+    OperationModel,
+    PropertyBEModel,
+    Service
 } from 'app/models';
-import {ConsumptionInput, ConsumptionInputDetails, ServiceOperation} from 'app/ng2/components/logic/service-consumption/service-consumption.component';
-import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
+import { ConsumptionInput, ConsumptionInputDetails, ServiceOperation } from 'app/ng2/components/logic/service-consumption/service-consumption.component';
+import { PropertiesUtils } from 'app/ng2/pages/properties-assignment/services/properties.utils';
+import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
 import { PROPERTY_DATA } from 'app/utils';
-
+import * as _ from 'lodash';
+import { ServiceInstanceObject } from '../../../models/service-instance-properties-and-interfaces';
+import { TopologyTemplateService } from '../../services/component-services/topology-template.service';
 
 @Component({
     selector: 'service-consumption-editor',
     templateUrl: './service-consumption-editor.component.html',
-    styleUrls:['./service-consumption-editor.component.less'],
+    styleUrls: ['./service-consumption-editor.component.less'],
     providers: []
 })
 
@@ -45,27 +45,27 @@ export class ServiceConsumptionCreatorComponent {
     input: {
         interfaceId: string,
         serviceOperationIndex: number,
-        serviceOperations: Array<ServiceOperation>,
+        serviceOperations: ServiceOperation[],
         parentService: Service,
         selectedService: Service,
-        parentServiceInputs: Array<InputBEModel>,
-        selectedServiceProperties: Array<PropertyBEModel>,
-        selectedServiceInstanceId: String,
-        selectedInstanceSiblings: Array<ServiceInstanceObject>,
-        selectedInstanceCapabilitisList: Array<Capability>,
-        siblingsCapabilitiesList: Map<string, Array<Capability>>
+        parentServiceInputs: InputBEModel[],
+        selectedServiceProperties: PropertyBEModel[],
+        selectedServiceInstanceId: string,
+        selectedInstanceSiblings: ServiceInstanceObject[],
+        selectedInstanceCapabilitisList: Capability[],
+        siblingsCapabilitiesList: Map<string, Capability[]>
     };
-    sourceTypes: Array<any> = [];
-    serviceOperationsList: Array<ServiceOperation>;
+    sourceTypes: any[] = [];
+    serviceOperationsList: ServiceOperation[];
     serviceOperation: ServiceOperation;
     currentIndex: number;
     isLoading: boolean = false;
     parentService: Service;
     selectedService: Service;
-    selectedServiceInstanceId: String;
-    parentServiceInputs: Array<InputBEModel>;
-    selectedServiceProperties: Array<PropertyBEModel>;
-    changedData: Array<ConsumptionInputDetails> = [];
+    selectedServiceInstanceId: string;
+    parentServiceInputs: InputBEModel[];
+    selectedServiceProperties: PropertyBEModel[];
+    changedData: ConsumptionInputDetails[] = [];
     inputFePropertiesMap: any = [];
 
     SOURCE_TYPES = {
@@ -75,7 +75,7 @@ export class ServiceConsumptionCreatorComponent {
         SERVICE_INPUT_LABEL: 'Service Input'
     };
 
-    constructor(private serviceServiceNg2: ServiceServiceNg2, private propertiesUtils:PropertiesUtils) {}
+    constructor(private topologyTemplateService: TopologyTemplateService, private propertiesUtils: PropertiesUtils) {}
 
     ngOnInit() {
         this.serviceOperationsList = this.input.serviceOperations;
@@ -112,7 +112,7 @@ export class ServiceConsumptionCreatorComponent {
                 capabilities: []
     }
         ];
-        _.forEach(this.input.selectedInstanceSiblings, sib =>
+        _.forEach(this.input.selectedInstanceSiblings, (sib) =>
             this.sourceTypes.push({
                 label: sib.name,
                 value: sib.id,
@@ -128,56 +128,84 @@ export class ServiceConsumptionCreatorComponent {
     }
 
     onExpandAll() {
-        _.forEach(this.serviceOperation.consumptionInputs, coInput => {
+        _.forEach(this.serviceOperation.consumptionInputs, (coInput) => {
             coInput.expanded = true;
-        })
+        });
     }
     onCollapseAll() {
-        _.forEach(this.serviceOperation.consumptionInputs, coInput => {
+        _.forEach(this.serviceOperation.consumptionInputs, (coInput) => {
             coInput.expanded = false;
-        })
+        });
     }
 
     isAllInputExpanded() {
-        return _.every(this.serviceOperation.consumptionInputs, coInput => coInput.expanded === true);
+        return _.every(this.serviceOperation.consumptionInputs, (coInput) => coInput.expanded === true);
     }
     isAllInputCollapsed() {
-        return _.every(this.serviceOperation.consumptionInputs, coInput => coInput.expanded === false);
+        return _.every(this.serviceOperation.consumptionInputs, (coInput) => coInput.expanded === false);
     }
 
     onChangePage(newIndex) {
         if (newIndex >= 0 && newIndex < this.serviceOperationsList.length) {
             this.currentIndex = newIndex;
             this.serviceOperation = this.serviceOperationsList[newIndex];
-            if(!this.serviceOperation.consumptionInputs || this.serviceOperation.consumptionInputs.length === 0) {
+            if (!this.serviceOperation.consumptionInputs || this.serviceOperation.consumptionInputs.length === 0) {
                 this.initConsumptionInputs();
             }
             this.getComplexPropertiesForCurrentInputsOfOperation(this.serviceOperation.consumptionInputs);
         }
     }
 
+    checkFormValidForSubmit(): boolean {
+        return this.isValidInputsValues() && this.isMandatoryFieldsValid();
+    }
+
+    checkFormValidForNavigation(): boolean {
+        return this.isMandatoryFieldsValid() && (this.changedData.length === 0 || this.isValidInputsValues());
+    }
+
+    onChange(value: any, isValid: boolean, consumptionInput: ConsumptionInputDetails) {
+        consumptionInput.updateValidity(isValid);
+        const dataChangedIndex = this.changedData.findIndex((changedItem) => changedItem.inputId === consumptionInput.inputId);
+        if (value !== consumptionInput.origVal) {
+            if (dataChangedIndex === -1) {
+                this.changedData.push(consumptionInput);
+            }
+        } else {
+            if (dataChangedIndex !== -1) {
+                this.changedData.splice(dataChangedIndex, 1);
+            }
+        }
+    }
+
+    onComplexPropertyChanged(property, consumptionInput) {
+        consumptionInput.value = JSON.stringify(property.valueObj);
+        this.onChange(property.valueObj, property.valueObjIsValid , consumptionInput);
+    }
+
     private initConsumptionInputs() {
         this.isLoading = true;
-        this.serviceServiceNg2.getServiceConsumptionInputs(this.parentService, this.selectedServiceInstanceId, this.input.interfaceId, this.serviceOperation.operation).subscribe((result: Array<ConsumptionInput>) => {
+        this.topologyTemplateService.getServiceConsumptionInputs(this.parentService.uniqueId, this.selectedServiceInstanceId,
+            this.input.interfaceId, this.serviceOperation.operation).subscribe((result: ConsumptionInput[]) => {
             this.isLoading = false;
             this.serviceOperation.consumptionInputs = this.analyzeCurrentConsumptionInputs(result);
             this.getComplexPropertiesForCurrentInputsOfOperation(this.serviceOperation.consumptionInputs);
-        }, err=> {
+        }, (err) => {
             this.isLoading = false;
         });
     }
 
-    private analyzeCurrentConsumptionInputs(result: Array<any>): Array<ConsumptionInputDetails> {
-        let inputsResult: Array<ConsumptionInputDetails> = [];
-        let currentOp = this.serviceOperation.operation;
-        if(currentOp) {
-            inputsResult = _.map(result, input => {
-                let sourceVal = input.source || this.SOURCE_TYPES.STATIC;
-                let consumptionInputDetails: ConsumptionInputDetails = _.cloneDeep(input);
+    private analyzeCurrentConsumptionInputs(result: any[]): ConsumptionInputDetails[] {
+        let inputsResult: ConsumptionInputDetails[] = [];
+        const currentOp = this.serviceOperation.operation;
+        if (currentOp) {
+            inputsResult = _.map(result, (input) => {
+                const sourceVal = input.source || this.SOURCE_TYPES.STATIC;
+                const consumptionInputDetails: ConsumptionInputDetails = _.cloneDeep(input);
                 consumptionInputDetails.source = sourceVal;
                 consumptionInputDetails.isValid = true;
                 consumptionInputDetails.expanded = false;
-                let filteredListsObj = this.getFilteredProps(sourceVal, input.type);
+                const filteredListsObj = this.getFilteredProps(sourceVal, input.type);
                 consumptionInputDetails.assignValueLabel = this.getAssignValueLabel(sourceVal);
                 consumptionInputDetails.associatedProps = filteredListsObj.associatedPropsList;
                 consumptionInputDetails.associatedInterfaces = filteredListsObj.associatedInterfacesList;
@@ -190,15 +218,14 @@ export class ServiceConsumptionCreatorComponent {
 
     private onSourceChanged(consumptionInput: ConsumptionInputDetails): void {
         consumptionInput.assignValueLabel = this.getAssignValueLabel(consumptionInput.source);
-        let filteredListsObj = this.getFilteredProps(consumptionInput.source, consumptionInput.type);
+        const filteredListsObj = this.getFilteredProps(consumptionInput.source, consumptionInput.type);
         consumptionInput.associatedProps = filteredListsObj.associatedPropsList;
         consumptionInput.associatedInterfaces = filteredListsObj.associatedInterfacesList;
         consumptionInput.associatedCapabilities = filteredListsObj.associatedCapabilitiesList;
-        if(consumptionInput.source === this.SOURCE_TYPES.STATIC) {
-            if(PROPERTY_DATA.SIMPLE_TYPES.indexOf(consumptionInput.type) !== -1) {
-                consumptionInput.value = consumptionInput.defaultValue || "";
-            }
-            else {
+        if (consumptionInput.source === this.SOURCE_TYPES.STATIC) {
+            if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(consumptionInput.type) !== -1) {
+                consumptionInput.value = consumptionInput.defaultValue || '';
+            } else {
                 consumptionInput.value = null;
                 Object.assign(this.inputFePropertiesMap, this.processPropertiesOfComplexTypeInput(consumptionInput));
             }
@@ -206,9 +233,11 @@ export class ServiceConsumptionCreatorComponent {
     }
 
     private getFilteredProps(sourceVal, inputType) {
-        let currentSourceObj = this.sourceTypes.find(s => s.value === sourceVal);
-        let associatedInterfacesList = [], associatedPropsList = [], associatedCapabilitiesPropsList: Array<Capability> = [];
-        if(currentSourceObj) {
+        const currentSourceObj = this.sourceTypes.find((s) => s.value === sourceVal);
+        let associatedInterfacesList = [];
+        let associatedPropsList = [];
+        let associatedCapabilitiesPropsList: Capability[] = [];
+        if (currentSourceObj) {
             if (currentSourceObj.interfaces) {
                 associatedInterfacesList = this.getFilteredInterfaceOutputs(currentSourceObj, inputType);
             }
@@ -221,31 +250,31 @@ export class ServiceConsumptionCreatorComponent {
             associatedCapabilitiesPropsList =
                 _.reduce(currentSourceObj.capabilities,
                     (filteredCapsList, capability: Capability) => {
-                        let filteredProps = _.filter(capability.properties, prop => prop.type === inputType);
+                        const filteredProps = _.filter(capability.properties, (prop) => prop.type === inputType);
                         if (filteredProps.length) {
-                            let cap = new Capability(capability);
+                            const cap = new Capability(capability);
                             cap.properties = filteredProps;
                             filteredCapsList.push(cap);
                         }
-                        return filteredCapsList
+                        return filteredCapsList;
                     }, []);
         }
         return {
-            associatedPropsList: associatedPropsList,
-            associatedInterfacesList: associatedInterfacesList,
+            associatedPropsList,
+            associatedInterfacesList,
             associatedCapabilitiesList: associatedCapabilitiesPropsList
-        }
+        };
     }
 
     private getFilteredInterfaceOutputs(currentSourceObj, inputType) {
-        let currentServiceOperationId = this.serviceOperation.operation.uniqueId;
-        let filteredInterfacesList = [];
-        Object.keys(currentSourceObj.interfaces).map(interfId => {
-            let interfaceObj: InterfaceModel = new InterfaceModel(currentSourceObj.interfaces[interfId]);
-            Object.keys(interfaceObj.operations).map(opId => {
-                if(currentServiceOperationId !== opId) {
-                    let operationObj: OperationModel = interfaceObj.operations[opId];
-                    let filteredOutputsList = _.filter(operationObj.outputs.listToscaDataDefinition, output => output.type === inputType);
+        const currentServiceOperationId = this.serviceOperation.operation.uniqueId;
+        const filteredInterfacesList = [];
+        Object.keys(currentSourceObj.interfaces).map((interfId) => {
+            const interfaceObj: InterfaceModel = new InterfaceModel(currentSourceObj.interfaces[interfId]);
+            Object.keys(interfaceObj.operations).map((opId) => {
+                if (currentServiceOperationId !== opId) {
+                    const operationObj: OperationModel = interfaceObj.operations[opId];
+                    const filteredOutputsList = _.filter(operationObj.outputs.listToscaDataDefinition, (output) => output.type === inputType);
                     if (filteredOutputsList.length) {
                         filteredInterfacesList.push({
                             name: `${interfaceObj.type}.${operationObj.name}`,
@@ -259,25 +288,23 @@ export class ServiceConsumptionCreatorComponent {
         return filteredInterfacesList;
     }
 
-    getAssignValueLabel(selectedSource: string): string {
-        if(selectedSource === this.SOURCE_TYPES.STATIC ||  selectedSource === "") {
+    private getAssignValueLabel(selectedSource: string): string {
+        if (selectedSource === this.SOURCE_TYPES.STATIC ||  selectedSource === '') {
             return this.SOURCE_TYPES.STATIC;
-        }
-        else {
-            if(selectedSource === this.parentService.uniqueId) { //parent is the source
+        } else {
+            if (selectedSource === this.parentService.uniqueId) { // parent is the source
                 return this.SOURCE_TYPES.SERVICE_INPUT_LABEL;
             }
             return this.SOURCE_TYPES.SERVICE_PROPERTY_LABEL;
         }
     }
 
-
     private isValidInputsValues(): boolean {
         return this.changedData.length > 0 && this.changedData.every((changedItem) => changedItem.isValid);
     }
 
     private isMandatoryFieldsValid(): boolean {
-        const invalid: Array<ConsumptionInputDetails> = this.serviceOperation.consumptionInputs.filter(item =>
+        const invalid: ConsumptionInputDetails[] = this.serviceOperation.consumptionInputs.filter((item) =>
             item.required && (item.value === null || typeof item.value === 'undefined' || item.value === ''));
         if (invalid.length > 0) {
             return false;
@@ -285,45 +312,19 @@ export class ServiceConsumptionCreatorComponent {
         return true;
     }
 
-    checkFormValidForSubmit(): boolean {
-        return this.isValidInputsValues() && this.isMandatoryFieldsValid();
-    }
-
-    checkFormValidForNavigation(): boolean {
-        return this.isMandatoryFieldsValid() && (this.changedData.length === 0 || this.isValidInputsValues());
-    }
-
-    onChange(value: any, isValid: boolean, consumptionInput: ConsumptionInputDetails) {
-        consumptionInput.updateValidity(isValid);
-        const dataChangedIndex = this.changedData.findIndex((changedItem) => changedItem.inputId === consumptionInput.inputId);
-        if (value !== consumptionInput.origVal) {
-            if (dataChangedIndex === -1) {
-                this.changedData.push(consumptionInput);
-            }
-        } else {
-            if (dataChangedIndex !== -1) {
-                this.changedData.splice(dataChangedIndex, 1);
-            }
-        }
-    }
-
-    private getComplexPropertiesForCurrentInputsOfOperation(opInputs: Array<ConsumptionInput>) {
-        _.forEach(opInputs, input => {
-            if(PROPERTY_DATA.SIMPLE_TYPES.indexOf(input.type) === -1 && input.source === this.SOURCE_TYPES.STATIC) {
+    private getComplexPropertiesForCurrentInputsOfOperation(opInputs: ConsumptionInput[]) {
+        _.forEach(opInputs, (input) => {
+            if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(input.type) === -1 && input.source === this.SOURCE_TYPES.STATIC) {
                 Object.assign(this.inputFePropertiesMap, this.processPropertiesOfComplexTypeInput(input));
             }
         });
     }
 
     private processPropertiesOfComplexTypeInput(input: ConsumptionInput): InstanceFePropertiesMap {
-        let inputBePropertiesMap: InstanceBePropertiesMap = new InstanceBePropertiesMap();
+        const inputBePropertiesMap: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         inputBePropertiesMap[input.name] = [input];
-        let originTypeIsVF = false;
-        return this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(inputBePropertiesMap, originTypeIsVF); //create flattened children and init values
+        const originTypeIsVF = false;
+        return this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(inputBePropertiesMap, originTypeIsVF); // create flattened children and init values
     }
 
-    onComplexPropertyChanged(property, consumptionInput) {
-        consumptionInput.value = JSON.stringify(property.valueObj);
-        this.onChange(property.valueObj, property.valueObjIsValid , consumptionInput);
-    }
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.module.ts b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.module.ts
index e37cd76716..43e88eb0dc 100644
--- a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.module.ts
+++ b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.module.ts
@@ -1,11 +1,11 @@
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServiceConsumptionCreatorComponent} from "./service-consumption-editor.component";
-import {FormsModule} from "@angular/forms";
-import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {PropertyTableModule} from 'app/ng2/components/logic/properties-table/property-table.module';
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { PropertyTableModule } from 'app/ng2/components/logic/properties-table/property-table.module';
+import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { ServiceConsumptionCreatorComponent } from './service-consumption-editor.component';
 
 @NgModule({
     declarations: [
@@ -25,4 +25,4 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
     providers: []
 })
 export class ServiceConsumptionCreatorModule {
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
index 271dd4ada0..708742ae0c 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
@@ -14,20 +14,23 @@
  * permissions and limitations under the License.
  */
 import { Component } from '@angular/core';
-import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
-import {ConstraintObjectUI, OPERATOR_TYPES} from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
-import {ServiceInstanceObject, PropertyBEModel, InputBEModel} from 'app/models';
+import { InputBEModel, PropertyBEModel } from 'app/models';
+import { ConstraintObjectUI, OPERATOR_TYPES } from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
+import { DropdownValue } from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
 import { PROPERTY_DATA } from 'app/utils';
-import {DropdownValue} from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+import { ServiceInstanceObject } from '../../../models/service-instance-properties-and-interfaces';
 
-export class UIDropDownSourceTypesElement extends DropdownValue{
-    options: Array<any>;
+export class UIDropDownSourceTypesElement extends DropdownValue {
+    options: any[];
     assignedLabel: string;
     type: string;
-    constructor(input?: any){
-        if(input) {
-            let value = input.value || '';
-            let label = input.label || '';
+    constructor(input?: any) {
+        if (input) {
+            const value = input.value || '';
+            const label = input.label || '';
+            // const hidden = input.hidden || '';
+            // const selected = input.selected || '';
             super(value, label);
             this.options = input.options;
             this.assignedLabel = input.assignedLabel;
@@ -36,10 +39,11 @@ export class UIDropDownSourceTypesElement extends DropdownValue{
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 @Component({
     selector: 'service-dependencies-editor',
     templateUrl: './service-dependencies-editor.component.html',
-    styleUrls:['./service-dependencies-editor.component.less'],
+    styleUrls: ['./service-dependencies-editor.component.less'],
     providers: [ServiceServiceNg2]
 })
 
@@ -47,44 +51,42 @@ export class ServiceDependenciesEditorComponent {
 
     input: {
         serviceRuleIndex: number,
-        serviceRules: Array<ConstraintObjectUI>,
+        serviceRules: ConstraintObjectUI[],
         compositeServiceName: string,
         currentServiceName: string,
-        parentServiceInputs: Array<InputBEModel>,
-        selectedInstanceProperties: Array<PropertyBEModel>,
-        operatorTypes: Array<DropdownValue>,
-        selectedInstanceSiblings: Array<ServiceInstanceObject>
+        parentServiceInputs: InputBEModel[],
+        selectedInstanceProperties: PropertyBEModel[],
+        operatorTypes: DropdownValue[],
+        selectedInstanceSiblings: ServiceInstanceObject[]
     };
     currentServiceName: string;
-    selectedServiceProperties: Array<PropertyBEModel>;
+    selectedServiceProperties: PropertyBEModel[];
     selectedPropertyObj: PropertyBEModel;
-    ddValueSelectedServicePropertiesNames: Array<DropdownValue>;
-    operatorTypes: Array<DropdownValue>;
-    sourceTypes: Array<UIDropDownSourceTypesElement> = [];
+    ddValueSelectedServicePropertiesNames: DropdownValue[];
+    operatorTypes: DropdownValue[];
+    sourceTypes: UIDropDownSourceTypesElement[] = [];
     currentRule: ConstraintObjectUI;
     currentIndex: number;
-    listOfValuesToAssign: Array<DropdownValue>;
-    listOfSourceOptions: Array<PropertyBEModel>;
+    listOfValuesToAssign: DropdownValue[];
+    listOfSourceOptions: PropertyBEModel[];
     assignedValueLabel: string;
-    serviceRulesList: Array<ConstraintObjectUI>;
-
+    serviceRulesList: ConstraintObjectUI[];
 
     SOURCE_TYPES = {
         STATIC: {label: 'Static', value: 'static'},
         SERVICE_PROPERTY: {label: 'Service Property', value: 'property'}
     };
 
-
     ngOnInit() {
         this.currentIndex = this.input.serviceRuleIndex;
         this.serviceRulesList = this.input.serviceRules;
         this.currentRule = this.serviceRulesList && this.input.serviceRuleIndex >= 0 ?
-            this.serviceRulesList[this.input.serviceRuleIndex]:
-            new ConstraintObjectUI({sourceName: this.SOURCE_TYPES.STATIC.value, sourceType: this.SOURCE_TYPES.STATIC.value, value: "", constraintOperator: OPERATOR_TYPES.EQUAL});
+            this.serviceRulesList[this.input.serviceRuleIndex] :
+            new ConstraintObjectUI({sourceName: this.SOURCE_TYPES.STATIC.value, sourceType: this.SOURCE_TYPES.STATIC.value, value: '', constraintOperator: OPERATOR_TYPES.EQUAL});
         this.currentServiceName = this.input.currentServiceName;
         this.operatorTypes = this.input.operatorTypes;
         this.selectedServiceProperties = this.input.selectedInstanceProperties;
-        this.ddValueSelectedServicePropertiesNames = _.map(this.input.selectedInstanceProperties, prop => new DropdownValue(prop.name, prop.name));
+        this.ddValueSelectedServicePropertiesNames = _.map(this.input.selectedInstanceProperties, (prop) => new DropdownValue(prop.name, prop.name));
         this.initSourceTypes();
         this.syncRuleData();
         this.updateSourceTypesRelatedValues();
@@ -100,7 +102,7 @@ export class ServiceDependenciesEditorComponent {
             type: this.SOURCE_TYPES.SERVICE_PROPERTY.value,
             options: this.input.parentServiceInputs
         });
-        _.forEach(this.input.selectedInstanceSiblings, sib =>
+        _.forEach(this.input.selectedInstanceSiblings, (sib) =>
             this.sourceTypes.push({
                 label: sib.name,
                 value: sib.name,
@@ -112,28 +114,27 @@ export class ServiceDependenciesEditorComponent {
     }
 
     syncRuleData() {
-        if(!this.currentRule.sourceName && this.currentRule.sourceType === this.SOURCE_TYPES.STATIC.value) {
+        if (!this.currentRule.sourceName && this.currentRule.sourceType === this.SOURCE_TYPES.STATIC.value) {
             this.currentRule.sourceName = this.SOURCE_TYPES.STATIC.value;
         }
-        this.selectedPropertyObj = _.find(this.selectedServiceProperties, prop => prop.name === this.currentRule.servicePropertyName);
+        this.selectedPropertyObj = _.find(this.selectedServiceProperties, (prop) => prop.name === this.currentRule.servicePropertyName);
         this.updateOperatorTypesList();
         this.updateSourceTypesRelatedValues();
     }
 
     updateOperatorTypesList() {
         if (this.selectedPropertyObj && PROPERTY_DATA.SIMPLE_TYPES_COMPARABLE.indexOf(this.selectedPropertyObj.type) === -1) {
-            this.operatorTypes = [{label: "=", value: OPERATOR_TYPES.EQUAL}];
+            this.operatorTypes = [{label: '=', value: OPERATOR_TYPES.EQUAL}];
             this.currentRule.constraintOperator = OPERATOR_TYPES.EQUAL;
-        }
-        else {
+        } else {
             this.operatorTypes = this.input.operatorTypes;
         }
     }
 
     updateSourceTypesRelatedValues() {
-        if(this.currentRule.sourceName) {
-            let selectedSourceType: UIDropDownSourceTypesElement = this.sourceTypes.find(
-                t => t.value === this.currentRule.sourceName && t.type === this.currentRule.sourceType
+        if (this.currentRule.sourceName) {
+            const selectedSourceType: UIDropDownSourceTypesElement = this.sourceTypes.find(
+                (t) => t.value === this.currentRule.sourceName && t.type === this.currentRule.sourceType
             );
             this.listOfSourceOptions = selectedSourceType.options || [];
             this.assignedValueLabel = selectedSourceType.assignedLabel || this.SOURCE_TYPES.STATIC.label;
@@ -150,7 +151,7 @@ export class ServiceDependenciesEditorComponent {
     }
 
     onServicePropertyChanged() {
-        this.selectedPropertyObj = _.find(this.selectedServiceProperties, prop => prop.name === this.currentRule.servicePropertyName);
+        this.selectedPropertyObj = _.find(this.selectedServiceProperties, (prop) => prop.name === this.currentRule.servicePropertyName);
         this.updateOperatorTypesList();
         this.filterOptionsByType();
         this.currentRule.value = '';
@@ -165,11 +166,11 @@ export class ServiceDependenciesEditorComponent {
     }
 
     filterOptionsByType() {
-        if(!this.selectedPropertyObj) {
+        if (!this.selectedPropertyObj) {
             this.listOfValuesToAssign = [];
             return;
         }
-        this.listOfValuesToAssign =  this.listOfSourceOptions.reduce((result, op:PropertyBEModel) => {
+        this.listOfValuesToAssign =  this.listOfSourceOptions.reduce((result, op: PropertyBEModel) => {
             if (op.type === this.selectedPropertyObj.type && (!op.schemaType || op.schemaType === this.selectedPropertyObj.schemaType)) {
                 result.push(new DropdownValue(op.name, op.name));
             }
@@ -182,11 +183,11 @@ export class ServiceDependenciesEditorComponent {
     }
 
     checkFormValidForSubmit() {
-        if(!this.serviceRulesList) { //for create modal
-            let isStatic = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value;
+        if (!this.serviceRulesList) { // for create modal
+            const isStatic = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value;
             return this.currentRule.isValidRule(isStatic);
         }
-        //for update all rules
-        return this.serviceRulesList.every(rule => rule.isValidRule(rule.sourceName === this.SOURCE_TYPES.STATIC.value));
+        // for update all rules
+        return this.serviceRulesList.every((rule) => rule.isValidRule(rule.sourceName === this.SOURCE_TYPES.STATIC.value));
     }
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.module.ts b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.module.ts
index 98ac997bf7..7b128f4468 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.module.ts
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.module.ts
@@ -1,9 +1,9 @@
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServiceDependenciesEditorComponent} from "./service-dependencies-editor.component";
-import {FormsModule} from "@angular/forms";
-import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { ServiceDependenciesEditorComponent } from './service-dependencies-editor.component';
 
 @NgModule({
     declarations: [
@@ -22,4 +22,4 @@ import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
     providers: []
 })
 export class ServiceDependenciesEditorModule {
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.html b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.html
new file mode 100644
index 0000000000..d7cf2f930a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.html
@@ -0,0 +1,68 @@
+<!--
+  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<div class="activity-log">
+    <div class="sdc-filter-bar-wrapper">
+        <sdc-filter-bar
+                [placeHolder]="'Search...'"
+                [testId]="activityLogSearchBar"
+                (keyup)="updateFilter($event)">
+        </sdc-filter-bar>
+    </div>
+    <ngx-datatable
+            columnMode="flex"
+            [footerHeight]="0"
+            [limit]="50"
+            [headerHeight]="40"
+            [rowHeight]="35"
+            #activityLogTable
+            [rows]="activities">
+
+        <ngx-datatable-column name="Time" [flexGrow]="2" [prop]="'TIMESTAMP'">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{row.TIMESTAMP | date }} | {{row.TIMESTAMP | date:"HH:mm O"}}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column name="Action" [flexGrow]="3" [prop]="'ACTION'">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{row.ACTION}}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column name="Comment" [flexGrow]="5" [prop]="'COMMENT'">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span sdc-tooltip [tooltip-text]="row.COMMENT">{{ row.COMMENT }}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column name="Modifier" [flexGrow]="3" [prop]="'MODIFIER'">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{ row.MODIFIER }}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column name="Status" [flexGrow]="1" [prop]="'STATUS'">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <svg-icon-label
+                        [name]="row.STATUS <= 399 ? 'success' : 'icons_close'"
+                        [mode]="row.STATUS <= 399 ? 'success' : 'error'"
+                        [size]="'medium'"
+                        [label]="row.STATUS"
+                        [labelPlacement]="'left'"
+                        [labelClassName]="'label'"
+                >
+                </svg-icon-label>
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less
new file mode 100644
index 0000000000..4845f4f606
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less
@@ -0,0 +1,8 @@
+.sdc-filter-bar-wrapper {
+  sdc-filter-bar {
+    flex: 0 0 30%;
+  }
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.spec.ts
new file mode 100644
index 0000000000..25651e0c1f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.spec.ts
@@ -0,0 +1,84 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { SdcUiServices } from 'onap-ui-angular';
+import 'rxjs/add/observable/of';
+import { Observable } from 'rxjs/Observable';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { ActivityLogService } from '../../../services/activity-log.service';
+import { WorkspaceService } from '../workspace.service';
+import { ActivityLogComponent } from './activity-log.component';
+
+describe('activity log component', () => {
+
+    let fixture: ComponentFixture<ActivityLogComponent>;
+    let activityLogServiceMock: Partial<ActivityLogService>;
+    let workspaceServiceMock: Partial<WorkspaceService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+    let componentMetadataMock: ComponentMetadata;
+
+    const mockLogs = '[' +
+        '{"MODIFIER":"Carlos Santana(m08740)","COMMENT":"comment","STATUS":"200","ACTION":"Checkout","TIMESTAMP":"2018-11-19 13:00:02.388 UTC"},' +
+        '{"MODIFIER":"John Doe(m08741)","COMMENT":"comment","STATUS":"200","ACTION":"Checkin","TIMESTAMP":"2018-11-20 13:00:02.388 UTC"},' +
+        '{"MODIFIER":"Jane Doe(m08742)","COMMENT":"comment","STATUS":"200","ACTION":"Checkout","TIMESTAMP":"2018-11-21 13:00:02.388 UTC"}' +
+        ']';
+
+    beforeEach(
+        async(() => {
+
+            componentMetadataMock =  new ComponentMetadata();
+            componentMetadataMock.uniqueId = 'fake';
+            componentMetadataMock.componentType = 'SERVICE';
+
+            activityLogServiceMock = {
+                getActivityLog : jest.fn().mockImplementation((type, id) => Observable.of(JSON.parse(mockLogs)) )
+            };
+
+            workspaceServiceMock = {
+                metadata : componentMetadataMock
+            };
+
+            loaderServiceMock = {
+                activate : jest.fn(),
+                deactivate: jest.fn()
+            };
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [ActivityLogComponent],
+                    imports: [NgxDatatableModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        { provide: WorkspaceService, useValue: workspaceServiceMock },
+                        { provide: ActivityLogService, useValue: activityLogServiceMock },
+                        { provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+                        ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(ActivityLogComponent);
+            });
+        })
+    );
+
+    it('should see exactly 3 activity logs', () => {
+        fixture.componentInstance.ngOnInit();
+        expect(fixture.componentInstance.activities.length).toBe(3);
+    });
+
+    it('should filter out 1 element when searching', () => {
+        fixture.componentInstance.ngOnInit();
+
+        const event = {
+            target : {
+                value : 'Checkin'
+            }
+        };
+
+        expect(fixture.componentInstance.activities.length).toBe(3);
+        fixture.componentInstance.updateFilter(event);
+        expect(fixture.componentInstance.activities.length).toBe(1);
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.ts b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.ts
new file mode 100644
index 0000000000..84fb81a1ef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { SdcUiServices } from 'onap-ui-angular';
+import { Activity } from '../../../../models/activity';
+import { ActivityLogService } from '../../../services/activity-log.service';
+import { WorkspaceService } from '../workspace.service';
+
+@Component({
+    selector: 'activity-log',
+    templateUrl: './activity-log.component.html',
+    styleUrls: ['./activity-log.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class ActivityLogComponent implements OnInit {
+
+    activities: Activity[] = [];
+    temp: Activity[] = [];
+
+    constructor(private workspaceService: WorkspaceService,
+                private activityLogService: ActivityLogService,
+                private loaderService: SdcUiServices.LoaderService) {
+    }
+
+    ngOnInit(): void {
+        this.loaderService.activate();
+        const componentId: string = this.workspaceService.metadata.uniqueId;
+        const componentType: string = this.workspaceService.metadata.componentType;
+        this.activityLogService.getActivityLog(componentType, componentId).subscribe((logs) => {
+            this.activities = logs;
+            this.temp = [...logs];
+            this.loaderService.deactivate();
+        }, (error) => { this.loaderService.deactivate(); });
+    }
+
+    updateFilter(event) {
+        const val = event.target.value.toLowerCase();
+
+        // filter our data
+        const temp = this.temp.filter((activity: Activity) => {
+            return !val ||
+                activity.COMMENT.toLowerCase().indexOf(val) !== -1 ||
+                activity.STATUS.toLowerCase().indexOf(val) !== -1 ||
+                activity.ACTION.toLowerCase().indexOf(val) !== -1 ||
+                activity.MODIFIER.toLowerCase().indexOf(val) !== -1;
+        });
+
+        // update the rows
+        this.activities = temp;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.module.ts b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.module.ts
new file mode 100644
index 0000000000..39334d8cde
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.module.ts
@@ -0,0 +1,28 @@
+import {CommonModule} from "@angular/common";
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+import {ActivityLogComponent} from "./activity-log.component";
+import {ActivityLogService} from "../../../services/activity-log.service";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+
+@NgModule({
+    declarations: [
+        ActivityLogComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        GlobalPipesModule,
+        NgxDatatableModule
+    ],
+    exports: [
+        ActivityLogComponent
+    ],
+    entryComponents: [
+        ActivityLogComponent
+    ],
+    providers: [ ActivityLogService ]
+})
+export class ActivityLogModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html
new file mode 100644
index 0000000000..bd30a469e0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html
@@ -0,0 +1,104 @@
+<form>
+    <div class="attr-container">
+
+        <div class="attr-col">
+            <!-- ATTRIBUTE NAME - MANDATORY -->
+            <div>
+                <sdc-input
+                        #attributeName
+                        label="Name"
+                        [required]="true"
+                        [(value)]="attributeToEdit.name"
+                        [disabled]="isEdit"
+                        name="attributeName"
+                        testId="attributeName"
+                        [maxLength]="255">
+                </sdc-input>
+                <sdc-validation [validateElement]="attributeName" (validityChanged)="onValidityChange($event, 'name')">
+                    <sdc-required-validator message="{{'VALIDATION_ERROR_REQUIRED' | translate : { 'field' : 'Name' } }}"></sdc-required-validator>
+                    <sdc-regex-validator message="{{'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate }}" [pattern]="validationPatterns.propertyName"></sdc-regex-validator>
+                </sdc-validation>
+            </div>
+
+            <!-- ATTRIBUTE DESCRIPTION - OPTIONAL -->
+            <div>
+                <sdc-textarea #attributeDescription
+                              [(value)]="attributeToEdit.description"
+                              [required]="false"
+                              testId="description"
+                              [maxLength]="256"
+                              label="Description">
+                </sdc-textarea>
+            </div>
+        </div>
+
+        <div class="attr-col">
+
+            <div class="attributeType">
+                <!-- ATTRIBUTE TYPE - MANDATORY -->
+                <sdc-dropdown #attributeType [disabled]="false" label="Type" [required]="true"
+                              [selectedOption]="toDropDownOption(this.attributeToEdit.type)" placeHolder="Choose Type"
+                              [options]="types" (changed)="onTypeSelected($event)">
+                    <sdc-validation [validateElement]="attributeType" (validityChanged)="onValidityChange($event, 'type')">
+                        <sdc-required-validator message="'required field'"></sdc-required-validator>
+                    </sdc-validation>
+                </sdc-dropdown>
+            </div>
+
+            <!-- ATTRIBUTE DEFAULT VALUE TEXT - OPTIONAL -->
+            <div *ngIf="attributeToEdit.type != 'boolean'">
+                <sdc-input
+                        #defaultValue
+                        [required]="false"
+                        label="Default Value"
+                        [(value)]="attributeToEdit.defaultValue"
+                        [disabled]="false"
+                        name="defaultValue"
+                        testId="defaultValue"
+                        [maxLength]="255"
+                        (valueChange)="defaultValueChanged()">
+                </sdc-input>
+
+                <sdc-validation [validateElement]="defaultValue" (validityChanged)="onValidityChange($event, 'defaultValue')">
+                    <sdc-regex-validator *ngIf="this.attributeToEdit.defaultValue && this.attributeToEdit.defaultValue.length > 0"  message="{{ this.defaultValueErrorMessage }}"
+                                         [pattern]="defaultValuePattern"></sdc-regex-validator>
+                    <sdc-custom-validator *ngIf="this.attributeToEdit.type == 'map' && this.attributeToEdit.schema.property.type" message="{{ 'PROPERTY_EDIT_MAP_UNIQUE_KEYS' | translate }}"
+                                          [callback]="isMapUnique" [disabled]="false"></sdc-custom-validator>
+                </sdc-validation>
+            </div>
+
+            <!-- ATTRIBUTE DEFAULT VALUE BOOLEAN- OPTIONAL -->
+            <div *ngIf="attributeToEdit.type == 'boolean'">
+                <sdc-dropdown [disabled]="false" label="Default Value"
+                              [required]="false"
+                              [selectedOption]="toDropDownOption(this.attributeToEdit.defaultValue)" placeHolder="Choose Default Value"
+                              [options]="booleanValues" (changed)="onBooleanDefaultValueSelected($event)">
+
+                </sdc-dropdown>
+            </div>
+
+            <div *ngIf="attributeToEdit.type == 'list' || attributeToEdit.type == 'map'">
+                <!-- ATTRIBUTE ENTRY SCHEMA - MANDATORY -->
+                <sdc-dropdown #entrySchema
+                              [disabled]="false" label="Entry Schema" [required]="true"
+                              [selectedOption]="toDropDownOption(this.attributeToEdit.schema.property.type)" placeHolder="Choose Schema Type"
+                              [options]="entrySchemaValues" (changed)="onEntrySchemaTypeSelected($event)">
+                    <sdc-validation [validateElement]="entrySchema" (validityChanged)="onValidityChange($event, 'entrySchema')">
+                        <sdc-required-validator message="'required !TODO - CHANGE MESSAGE'"></sdc-required-validator>
+                    </sdc-validation>
+                </sdc-dropdown>
+            </div>
+
+            <!-- ATTRIBUTE HIDDEN - OPTIONAL -->
+            <sdc-checkbox
+                    label="Hidden"
+                    [checked]="attributeToEdit.hidden"
+                    [disabled]="false"
+                    testId="hidden"
+                    (checkedChange)="this.onHiddenCheckboxClicked($event)"
+            >
+            </sdc-checkbox>
+        </div>
+    </div>
+
+</form>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.ts
new file mode 100644
index 0000000000..c703869ad2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.ts
@@ -0,0 +1,138 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IDropDownOption } from 'onap-ui-angular/dist/form-elements/dropdown/dropdown-models';
+import { InputComponent } from 'onap-ui-angular/dist/form-elements/text-elements/input/input.component';
+import { Subject } from 'rxjs/Subject';
+import { AttributeModel } from '../../../../models/attributes';
+import { ValidationUtils } from '../../../../utils/validation-utils';
+import { CacheService } from '../../../services/cache.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { AttributeOptions } from './attributes-options';
+
+@Component({
+    selector: 'attribute-modal',
+    templateUrl: './attribute-modal.component.html',
+    styleUrls: ['./attributes.component.less']
+})
+export class AttributeModalComponent implements OnInit {
+
+    @ViewChild('defaultValue') validatedInput: InputComponent;
+
+    public readonly types = AttributeOptions.types;                         // integer, string, boolean etc.
+
+    public readonly booleanValues = AttributeOptions.booleanValues;         // true / false
+
+    public readonly entrySchemaValues = AttributeOptions.entrySchemaValues; // integer, string, boolean, float
+
+    public onValidationChange: Subject<boolean> = new Subject();
+
+    public validationPatterns: any;
+    public readonly listPattern = ValidationUtils.getPropertyListPatterns();
+    public readonly mapPattern = ValidationUtils.getPropertyMapPatterns();
+
+    // The current effective default value pattern
+    public defaultValuePattern: string;
+    public defaultValueErrorMessage: string;
+
+    // Attribute being Edited
+    public attributeToEdit: AttributeModel;
+
+    constructor(private translateService: TranslateService, private cacheService: CacheService) {
+        this.validationPatterns = this.cacheService.get('validation').validationPatterns;
+    }
+
+    ngOnInit() {
+        this.revalidateDefaultValue();
+    }
+
+    onHiddenCheckboxClicked(event: boolean) {
+        this.attributeToEdit.hidden = event;
+    }
+
+    onTypeSelected(selectedElement: IDropDownOption) {
+        if (this.attributeToEdit.type !== selectedElement.value && selectedElement.value === 'boolean') {
+            this.attributeToEdit.defaultValue = ''; // Clean old value in case we choose change type to boolean
+        }
+        this.attributeToEdit.type = selectedElement.value;
+        this.revalidateDefaultValue();
+    }
+
+    onBooleanDefaultValueSelected(selectedElement: IDropDownOption) {
+        if (this.attributeToEdit.type === 'boolean') {
+            this.attributeToEdit.defaultValue = selectedElement.value;
+        }
+    }
+
+    onEntrySchemaTypeSelected(selectedElement: IDropDownOption) {
+        this.attributeToEdit.schema.property.type = selectedElement.value;
+        this.revalidateDefaultValue();
+    }
+
+    onValidityChange(isValid: boolean, field: string) {
+        const typeIsValid = this.attributeToEdit.type && this.attributeToEdit.type.length > 0; // Make sure type is defined
+
+        // Make sure name is defined when other fields are changed
+        let nameIsValid = true;
+        if (field !== 'name') {
+            nameIsValid = this.attributeToEdit.name && this.attributeToEdit.name.length > 0;
+        }
+        this.onValidationChange.next(isValid && nameIsValid && typeIsValid);
+    }
+
+    defaultValueChanged() {
+        this.revalidateDefaultValue();
+    }
+
+    /**
+     * Utility function for UI that converts a simple value to IDropDownOption
+     * @param val
+     * @returns {{value: any; label: any}}
+     */
+    toDropDownOption(val: string) {
+        return { value : val, label: val };
+    }
+
+    public isMapUnique = () => {
+        if (this.attributeToEdit && this.attributeToEdit.type === 'map' && this.attributeToEdit.defaultValue) {
+            return ValidationUtils.validateUniqueKeys(this.attributeToEdit.defaultValue);
+        }
+        return true;
+    }
+
+    private revalidateDefaultValue() {
+        this.setDefaultValuePattern(this.attributeToEdit.type);
+        setTimeout(() => {
+            if (this.validatedInput) {
+                this.validatedInput.onKeyPress(this.attributeToEdit.defaultValue);
+            } }, 250);
+    }
+
+    private setDefaultValuePattern(valueType: string) {
+        const selectedSchemaType = this.attributeToEdit.schema.property.type;
+        this.defaultValuePattern = '.*';
+        switch (valueType) {
+            case 'float':
+                this.defaultValuePattern = this.validationPatterns.number;
+                this.defaultValueErrorMessage = this.translateService.translate('VALIDATION_ERROR_TYPE', { type : 'float' });
+                break;
+            case 'integer':
+                this.defaultValuePattern = this.validationPatterns.integerNoLeadingZero;
+                this.defaultValueErrorMessage = this.translateService.translate('VALIDATION_ERROR_TYPE', { type : 'integer' });
+                break;
+            case 'list':
+                if (selectedSchemaType != undefined) {
+                    this.defaultValuePattern = this.listPattern[selectedSchemaType];
+                    const listTypeStr = `list of ${selectedSchemaType}s (v1, v2, ...) `;
+                    this.defaultValueErrorMessage = this.translateService.translate('VALIDATION_ERROR_TYPE', { type : listTypeStr });
+                }
+                break;
+            case 'map':
+                if (selectedSchemaType != undefined) {
+                    this.defaultValuePattern = this.mapPattern[selectedSchemaType];
+                    const mapTypeStr = `map of ${selectedSchemaType}s (k1:v1, k2:v2, ...)`;
+                    this.defaultValueErrorMessage = this.translateService.translate('VALIDATION_ERROR_TYPE', { type : mapTypeStr });
+                }
+                break;
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes-modal.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes-modal.component.spec.ts
new file mode 100644
index 0000000000..99aa140dd1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes-modal.component.spec.ts
@@ -0,0 +1,128 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { AttributeModel } from '../../../../models/attributes';
+import { ValidationUtils } from '../../../../utils/validation-utils';
+import { CacheService } from '../../../services/cache.service';
+import { TranslatePipe } from '../../../shared/translator/translate.pipe';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { AttributeModalComponent } from './attribute-modal.component';
+
+describe('attributes modal component', () => {
+
+    let fixture: ComponentFixture<AttributeModalComponent>;
+
+    // Mocks
+    let translateServiceMock: Partial<TranslateService>;
+    let cacheServiceMock: Partial<CacheService>;
+
+    const validationPatterns = {
+        integerNoLeadingZero : 'int_regx',
+        number : 'number_regx'
+    };
+
+    const newAttribute = {
+        uniqueId: '1', name: 'attr1', description: 'description1', type: 'string', hidden: false, defaultValue: 'val1', schema: null
+    };
+
+    beforeEach(
+        async(() => {
+
+            translateServiceMock = {
+                translate: jest.fn()
+            };
+
+            cacheServiceMock = {
+                get: jest.fn().mockImplementation((k) => {
+                    return { validationPatterns};
+                } )
+            };
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [AttributeModalComponent, TranslatePipe],
+                    imports: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: TranslateService, useValue: translateServiceMock},
+                        {provide: CacheService, useValue: cacheServiceMock},
+                    ]
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(AttributeModalComponent);
+            });
+        })
+    );
+
+    it('test that when hidden is clicked, hidden attribute is set', async () => {
+        fixture.componentInstance.attributeToEdit = new AttributeModel();
+        const hidden = fixture.componentInstance.attributeToEdit.hidden;
+        fixture.componentInstance.ngOnInit();
+
+        expect(hidden).toBe(false);
+        fixture.componentInstance.onHiddenCheckboxClicked(true);
+        expect(fixture.componentInstance.attributeToEdit.hidden).toBe(true);
+    });
+
+    it('test that when type is set to boolean default value is cleared', async () => {
+        const component = fixture.componentInstance;
+        component.attributeToEdit = new AttributeModel();
+        component.ngOnInit();
+
+        component.onTypeSelected({ value : 'string', label : 'string'});
+        component.attributeToEdit.defaultValue = 'some_value';
+        component.onTypeSelected({ value : 'boolean', label : 'boolean'});
+        expect(component.attributeToEdit.defaultValue).toBe('');
+
+        component.onBooleanDefaultValueSelected({ value : 'true', label : 'true'});
+        expect(component.attributeToEdit.defaultValue).toBe('true');
+    });
+
+    it('test that when certain type is selected, the correct regex pattern is chosen', async () => {
+        const component = fixture.componentInstance;
+        component.attributeToEdit = new AttributeModel();
+        component.ngOnInit();
+
+        // integer
+        component.onTypeSelected({ value : 'integer', label : 'integer'});
+        expect(component.defaultValuePattern).toBe(validationPatterns.integerNoLeadingZero);
+
+        // float
+        component.onTypeSelected({ value : 'float', label : 'float'});
+        expect(component.defaultValuePattern).toBe(validationPatterns.number);
+
+        // list is chosen with no schema, regex pattern is set to default
+        component.onTypeSelected({ value : 'list', label : 'list'});
+        expect(component.defaultValuePattern).toEqual('.*');
+
+        // schema is set to list of int
+        component.onEntrySchemaTypeSelected({ value : 'integer', label : 'integer' });
+        expect(component.defaultValuePattern).toEqual(ValidationUtils.getPropertyListPatterns().integer);
+
+        // schema is set to list of float
+        component.onEntrySchemaTypeSelected({ value : 'float', label : 'float' });
+        expect(component.defaultValuePattern).toEqual(ValidationUtils.getPropertyListPatterns().float);
+
+        // map is selected (float schema is still selected from previous line)
+        component.onTypeSelected({ value : 'map', label : 'map'});
+        expect(component.defaultValuePattern).toEqual(ValidationUtils.getPropertyMapPatterns().float);
+
+        // change schema type to boolean
+        component.onEntrySchemaTypeSelected({ value : 'boolean', label : 'boolean' });
+    });
+
+    it('should detect map with non-unique keys', async () => {
+        const component = fixture.componentInstance;
+        component.attributeToEdit = new AttributeModel();
+        component.ngOnInit();
+        expect(component.isMapUnique()).toBe(true); // map is not selected so return true by default
+        component.onTypeSelected({ value : 'map', label : 'map'});
+        component.onEntrySchemaTypeSelected({ value : 'boolean', label : 'boolean' });
+        component.attributeToEdit.defaultValue = '"1":true,"2":false';
+        expect(component.isMapUnique()).toBe(true);
+        component.attributeToEdit.defaultValue = '"1":true,"1":false';
+        expect(component.isMapUnique()).toBe(false);
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes-options.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes-options.ts
new file mode 100644
index 0000000000..2a6924bc5e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes-options.ts
@@ -0,0 +1,60 @@
+import { IDropDownOption } from 'onap-ui-angular/dist/form-elements/dropdown/dropdown-models';
+
+export class AttributeOptions {
+    public static readonly types: IDropDownOption[] = [
+        {
+            label: 'integer',
+            value: 'integer',
+        },
+        {
+            label: 'string',
+            value: 'string',
+        },
+        {
+            label: 'float',
+            value: 'float'
+        },
+        {
+            label: 'boolean',
+            value: 'boolean'
+        },
+        {
+            label: 'list',
+            value: 'list'
+        },
+        {
+            label: 'map',
+            value: 'map'
+        }
+    ];
+
+    public static readonly booleanValues: IDropDownOption[] = [
+        {
+            label: 'true',
+            value: 'true',
+        },
+        {
+            label: 'false',
+            value: 'false',
+        }
+    ];
+
+    public static readonly entrySchemaValues: IDropDownOption[] = [
+        {
+            label: 'integer',
+            value: 'integer',
+        },
+        {
+            label: 'string',
+            value: 'string',
+        },
+        {
+            label: 'float',
+            value: 'float'
+        },
+        {
+            label: 'boolean',
+            value: 'boolean'
+        }
+    ];
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.html b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.html
new file mode 100644
index 0000000000..00a7a5cec0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.html
@@ -0,0 +1,93 @@
+<!--
+  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<div class="workspace-attributes">
+
+    <div class="action-bar-wrapper">
+        <svg-icon-label
+                *ngIf="!(this.isViewOnly$ | async)"
+                class="add-attr-icon"
+                [name]="'plus'"
+                [mode]="'primary'"
+                [size]="'medium'"
+                [label]="'Add'"
+                [labelPlacement]="'right'"
+                [labelClassName]="'externalActionLabel'"
+                (click)="onAddAttribute()">
+        </svg-icon-label>
+    </div>
+
+    <ngx-datatable
+            columnMode="flex"
+            [footerHeight]="0"
+            [limit]="50"
+            [headerHeight]="40"
+            [rowHeight]="35"
+            [rows]="attributes"
+            #componentAttributesTable
+            (activate)="onExpandRow($event)">
+
+        <ngx-datatable-row-detail [rowHeight]="80">
+            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
+                <div>{{row.description}}</div>
+            </ng-template>
+        </ngx-datatable-row-detail>
+
+        <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="2">
+
+            <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
+                <div class="expand-collapse-cell">
+                    <svg-icon [clickable]="true" class="expand-collapse-icon"
+                              [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                              [size]="'medium'"></svg-icon>
+                    <span>{{ row.name }}</span>
+                </div>
+            </ng-template>
+
+        </ngx-datatable-column>
+
+        <ngx-datatable-column [resizeable]="false" name="Type" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{row.type}}
+            </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column [resizeable]="false" name="Default Value" [flexGrow]="3">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{row.defaultValue}}
+            </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column *ngIf="!(this.isViewOnly$ | async)" [resizeable]="false" name="Action" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row" let-rowIndex="rowIndex">
+                <div class="actionColumn">
+                    <svg-icon [clickable]="true"
+                              [mode]="'primary2'"
+                              [name]="'edit-o'"
+                              [size]="'medium'"
+                              (click)="onEditAttribute($event, row)">
+                    </svg-icon>
+                    <svg-icon [clickable]="true"
+                              [mode]="'primary2'"
+                              [name]="'trash-o'"
+                              (click)="onDeleteAttribute($event, row)"
+                              [size]="'medium'">
+                    </svg-icon>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+
+    </ngx-datatable>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.less b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.less
new file mode 100644
index 0000000000..3e91ae4689
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.less
@@ -0,0 +1,36 @@
+.action-bar-wrapper {
+  flex: 0 0 30%;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.add-attr-icon{
+  cursor: pointer;
+}
+
+.attr-container {
+  display: flex;
+  justify-content: space-between;
+
+  .attr-col {
+    display: flex;
+    flex-direction: column;
+    max-width: 275px;
+    flex-grow: 1;
+  }
+
+}
+
+.attributeType {
+  margin-bottom: 10px;
+}
+
+sdc-checkbox {
+  margin-top: 20px;
+}
+
+.actionColumn {
+  text-align: center;
+  padding: 5px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.spec.ts
new file mode 100644
index 0000000000..f676e2b4d9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.spec.ts
@@ -0,0 +1,182 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import 'rxjs/add/observable/of';
+import { Observable } from 'rxjs/Rx';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { ModalsHandler } from '../../../../utils';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { WorkspaceService } from '../workspace.service';
+import { AttributesComponent } from './attributes.component';
+
+describe('attributes component', () => {
+
+    let fixture: ComponentFixture<AttributesComponent>;
+
+    // Mocks
+    let workspaceServiceMock: Partial<WorkspaceService>;
+    let topologyTemplateServiceMock: Partial<TopologyTemplateService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+    let componentMetadataMock: ComponentMetadata;
+    let modalServiceMock: Partial<SdcUiServices.ModalService>;
+
+    const mockAttributesList = [
+        { uniqueId: '1', name: 'attr1', description: 'description1', type: 'string', hidden: false, defaultValue: 'val1', schema: null },
+        { uniqueId : '2', name : 'attr2', description: 'description2', type : 'int', hidden : false, defaultValue : 1, schema : null},
+        { uniqueId : '3', name : 'attr3', description: 'description3', type : 'double', hidden : false, defaultValue : 1.0, schema : null},
+        { uniqueId : '4', name : 'attr4', description: 'description4', type : 'boolean', hidden : false, defaultValue : true, schema : null},
+    ];
+
+    const newAttribute = {
+        uniqueId : '5', name : 'attr5', description: 'description5', type : 'string', hidden : false, defaultValue : 'val5', schema : null
+    };
+    const updatedAttribute = {
+        uniqueId : '2', name : 'attr2', description: 'description_new', type : 'string', hidden : false, defaultValue : 'new_val2', schema : null
+    };
+    const errorAttribute = {
+        uniqueId : '99', name : 'attr99', description: 'description_error', type : 'string', hidden : false, defaultValue : 'error', schema : null
+    };
+
+    beforeEach(
+        async(() => {
+
+            componentMetadataMock = new ComponentMetadata();
+            componentMetadataMock.uniqueId = 'fake';
+            componentMetadataMock.componentType = 'VL';
+
+            topologyTemplateServiceMock = {
+                getComponentAttributes: jest.fn().mockResolvedValue({ attributes : mockAttributesList }),
+                addAttributeAsync: jest.fn().mockImplementation(
+                    (compType, cUid, attr) => {
+                        if (attr === errorAttribute) {
+                            return Observable.throwError('add_error').toPromise();
+                        } else {
+                            return Observable.of(newAttribute).toPromise();
+                        }
+                    }
+                ),
+                updateAttributeAsync: jest.fn().mockImplementation(
+                    (compType, cUid, attr) => {
+                        if (attr === errorAttribute) {
+                            return Observable.throwError('update_error').toPromise();
+                        } else {
+                            return Observable.of(updatedAttribute).toPromise();
+                        }
+                    }
+                ),
+                deleteAttributeAsync: jest.fn().mockImplementation((cid, ctype, attr) => Observable.of(attr))
+            };
+
+            workspaceServiceMock = {
+                metadata: componentMetadataMock
+            };
+
+            const customModalInstance = { innerModalContent: { instance: { onValidationChange: { subscribe: jest.fn()}}}};
+
+            modalServiceMock = {
+                openInfoModal: jest.fn(),
+                openCustomModal: jest.fn().mockImplementation(() => customModalInstance)
+            };
+
+            loaderServiceMock = {
+                activate: jest.fn(),
+                deactivate: jest.fn()
+            };
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [AttributesComponent],
+                    imports: [NgxDatatableModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: WorkspaceService, useValue: workspaceServiceMock},
+                        {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock},
+                        {provide: ModalsHandler, useValue: {}},
+                        {provide: TranslateService, useValue: { translate: jest.fn() }},
+                        {provide: SdcUiServices.ModalService, useValue: modalServiceMock },
+                        {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(AttributesComponent);
+            });
+        })
+    );
+
+    it('should see exactly 1 attributes on init', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+        expect(fixture.componentInstance.getAttributes().length).toEqual(4);
+    });
+
+    it('should see exactly 5 attributes when adding', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+        expect(fixture.componentInstance.getAttributes().length).toEqual(4);
+
+        await fixture.componentInstance.addOrUpdateAttribute(newAttribute, false);
+        expect(fixture.componentInstance.getAttributes().length).toEqual(5);
+    });
+
+    it('should see exactly 3 attributes when deleting', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+        expect(fixture.componentInstance.getAttributes().length).toEqual(4);
+        const attrToDelete = mockAttributesList[0];
+        expect(fixture.componentInstance.getAttributes().filter((attr) => attr.uniqueId === attrToDelete.uniqueId).length).toEqual(1);
+        await fixture.componentInstance.deleteAttribute(attrToDelete);
+        expect(fixture.componentInstance.getAttributes().length).toEqual(3);
+        expect(fixture.componentInstance.getAttributes().filter((attr) => attr.uniqueId === attrToDelete.uniqueId).length).toEqual(0);
+    });
+
+    it('should see updated attribute', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+
+        await fixture.componentInstance.addOrUpdateAttribute(updatedAttribute, true);
+        expect(fixture.componentInstance.getAttributes().length).toEqual(4);
+        const attribute = fixture.componentInstance.getAttributes().filter( (attr) => {
+            return attr.uniqueId === updatedAttribute.uniqueId;
+        })[0];
+        expect(attribute.description).toEqual( 'description_new');
+    });
+
+    it('Add fails, make sure loader is deactivated and attribute is not added', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+        const numAttributes = fixture.componentInstance.getAttributes().length;
+        await fixture.componentInstance.addOrUpdateAttribute(errorAttribute, false); // Add
+        expect(loaderServiceMock.deactivate).toHaveBeenCalled();
+        expect(fixture.componentInstance.getAttributes().length).toEqual(numAttributes);
+    });
+
+    it('Update fails, make sure loader is deactivated', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+        const numAttributes = fixture.componentInstance.getAttributes().length;
+        await fixture.componentInstance.addOrUpdateAttribute(errorAttribute, true); // Add
+        expect(loaderServiceMock.deactivate).toHaveBeenCalled();
+        expect(fixture.componentInstance.getAttributes().length).toEqual(numAttributes);
+    });
+
+    it('on delete modal shell be opened', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+        const event = { stopPropagation: jest.fn() };
+        fixture.componentInstance.onDeleteAttribute(event, fixture.componentInstance.getAttributes()[0]);
+        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(modalServiceMock.openInfoModal).toHaveBeenCalled();
+    });
+
+    it('on add modal shell be opened', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+        fixture.componentInstance.onAddAttribute();
+        expect(modalServiceMock.openCustomModal).toHaveBeenCalled();
+    });
+
+    it('on edit modal shell be opened', async () => {
+        await fixture.componentInstance.asyncInitComponent();
+        const event = { stopPropagation: jest.fn() };
+        fixture.componentInstance.onEditAttribute(event, fixture.componentInstance.getAttributes()[0]);
+        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(modalServiceMock.openCustomModal).toHaveBeenCalled();
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.ts
new file mode 100644
index 0000000000..bc47f1456b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.ts
@@ -0,0 +1,188 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Select } from '@ngxs/store';
+import { IAttributeModel } from 'app/models';
+import * as _ from 'lodash';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { ModalComponent } from 'onap-ui-angular/dist/modals/modal.component';
+import { AttributeModel } from '../../../../models';
+import { Resource } from '../../../../models';
+import { ModalsHandler } from '../../../../utils';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { WorkspaceState } from '../../../store/states/workspace.state';
+import { WorkspaceService } from '../workspace.service';
+import { AttributeModalComponent } from './attribute-modal.component';
+
+@Component({
+    selector: 'attributes',
+    templateUrl: './attributes.component.html',
+    styleUrls: ['./attributes.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class AttributesComponent implements OnInit {
+
+    @Select(WorkspaceState.isViewOnly)
+    isViewOnly$: boolean;
+
+    @ViewChild('componentAttributesTable')
+    private table: any;
+
+    private componentType: string;
+    private componentUid: string;
+
+    private attributes: IAttributeModel[] = [];
+    private temp: IAttributeModel[] = [];
+    private customModalInstance: ModalComponent;
+
+    constructor(private workspaceService: WorkspaceService,
+                private topologyTemplateService: TopologyTemplateService,
+                private modalsHandler: ModalsHandler,
+                private modalService: SdcUiServices.ModalService,
+                private loaderService: SdcUiServices.LoaderService,
+                private translateService: TranslateService) {
+
+        this.componentType = this.workspaceService.metadata.componentType;
+        this.componentUid = this.workspaceService.metadata.uniqueId;
+    }
+
+    ngOnInit(): void {
+        this.asyncInitComponent();
+    }
+
+    async asyncInitComponent() {
+        this.loaderService.activate();
+        const response = await this.topologyTemplateService.getComponentAttributes(this.componentType, this.componentUid);
+        this.attributes = response.attributes;
+        this.temp = [...response.attributes];
+        this.loaderService.deactivate();
+    }
+
+    getAttributes(): IAttributeModel[] {
+        return this.attributes;
+    }
+
+    addOrUpdateAttribute = async (attribute: AttributeModel, isEdit: boolean) => {
+        this.loaderService.activate();
+        let attributeFromServer: AttributeModel;
+        this.temp = [...this.attributes];
+
+        const deactivateLoader = () => {
+            this.loaderService.deactivate();
+            return undefined;
+        };
+
+        if (isEdit) {
+            attributeFromServer = await this.topologyTemplateService
+                                    .updateAttributeAsync(this.componentType, this.componentUid, attribute)
+                                    .catch(deactivateLoader);
+            if (attributeFromServer) {
+                const indexOfUpdatedAttribute = _.findIndex(this.temp, (e) => e.uniqueId === attributeFromServer.uniqueId);
+                this.temp[indexOfUpdatedAttribute] = attributeFromServer;
+            }
+        } else {
+            attributeFromServer = await this.topologyTemplateService
+                                    .addAttributeAsync(this.componentType, this.componentUid, attribute)
+                                    .catch(deactivateLoader);
+            if (attributeFromServer) {
+                this.temp.push(attributeFromServer);
+            }
+        }
+        this.attributes = this.temp;
+        this.loaderService.deactivate();
+    }
+
+    deleteAttribute = async (attributeToDelete: AttributeModel) => {
+        this.loaderService.activate();
+        this.temp = [...this.attributes];
+        const res = await this.topologyTemplateService.deleteAttributeAsync(this.componentType, this.componentUid, attributeToDelete);
+        _.remove(this.temp, (attr) => attr.uniqueId === attributeToDelete.uniqueId);
+        this.attributes = this.temp;
+        this.loaderService.deactivate();
+    };
+
+    openAddEditModal(selectedRow: AttributeModel, isEdit: boolean) {
+        const component = new Resource(undefined, undefined, undefined);
+        component.componentType = this.componentType;
+        component.uniqueId = this.componentUid;
+
+        const title: string = this.translateService.translate('ATTRIBUTE_DETAILS_MODAL_TITLE');
+        const attributeModalConfig = {
+            title,
+            size: 'md',
+            type: SdcUiCommon.ModalType.custom,
+            buttons: [
+                {
+                    id: 'save',
+                    text: 'Save',
+                    // spinner_position: Placement.left,
+                    size: 'sm',
+                    callback: () => this.modalCallBack(isEdit),
+                    closeModal: true,
+                    disabled: false,
+                }
+            ] as SdcUiCommon.IModalButtonComponent[]
+        };
+
+        this.customModalInstance = this.modalService.openCustomModal(attributeModalConfig, AttributeModalComponent, { attributeToEdit: selectedRow });
+        this.customModalInstance.innerModalContent.instance.
+            onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('save').disabled = !isValid);
+    }
+
+    /***********************
+     * Call Backs from UI  *
+     ***********************/
+
+    /**
+     * Called when 'Add' is clicked
+     */
+    onAddAttribute() {
+        this.openAddEditModal(new AttributeModel(), false);
+    }
+
+    /**
+     * Called when 'Edit' button is clicked
+     */
+    onEditAttribute(event, row) {
+        event.stopPropagation();
+
+        const attributeToEdit: AttributeModel = new AttributeModel(row);
+        this.openAddEditModal(attributeToEdit, true);
+    }
+
+    /**
+     * Called when 'Delete' button is clicked
+     */
+    onDeleteAttribute(event, row: AttributeModel) {
+        event.stopPropagation();
+        const onOk = () => {
+            this.deleteAttribute(row);
+        };
+
+        const title: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TITLE');
+        const message: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TEXT');
+        const okButton = new SdcUiComponents.ModalButtonComponent();
+        okButton.testId = 'OK';
+        okButton.text = 'OK';
+        okButton.type = SdcUiCommon.ButtonType.info;
+        okButton.closeModal = true;
+        okButton.callback = onOk;
+
+        this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]);
+    }
+
+    onExpandRow(event) {
+        if (event.type === 'click') {
+            this.table.rowDetail.toggleExpandRow(event.row);
+        }
+    }
+
+    /**
+     * Callback from Modal after "Save" is clicked
+     *
+     * @param {boolean} isEdit - Whether modal is edit or add attribute
+     */
+    modalCallBack = (isEdit: boolean) => {
+        const attribute: AttributeModel = this.customModalInstance.innerModalContent.instance.attributeToEdit;
+        this.addOrUpdateAttribute(attribute, isEdit);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.module.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.module.ts
new file mode 100644
index 0000000000..5abb952e37
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.module.ts
@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+import { GlobalPipesModule } from '../../../pipes/global-pipes.module';
+import { AttributesComponent } from './attributes.component';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
+import { AttributeModalComponent } from './attribute-modal.component';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+
+@NgModule({
+    declarations: [
+        AttributesComponent,
+        AttributeModalComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        GlobalPipesModule,
+        NgxDatatableModule,
+        TranslateModule
+    ],
+    exports: [
+        AttributesComponent
+    ],
+    entryComponents: [
+        AttributesComponent, AttributeModalComponent
+    ],
+    providers: [TopologyTemplateService]
+})
+export class AttributesModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/__snapshots__/deployment-artifacts-page.spec.ts.snap b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/__snapshots__/deployment-artifacts-page.spec.ts.snap
new file mode 100644
index 0000000000..b53674497c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/__snapshots__/deployment-artifacts-page.spec.ts.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`deployment artifacts page should match current snapshot of informational artifact pages component 1`] = `
+<deployment-artifact-page
+  addOrUpdateArtifact={[Function Function]}
+  artifactsService={[Function Object]}
+  cacheService={[Function Object]}
+  deleteArtifact={[Function Function]}
+  getEnvArtifact={[Function Function]}
+  modalService={[Function Object]}
+  openGenericArtifactBrowserModal={[Function Function]}
+  openPopOver={[Function Function]}
+  popoverContentComponent="undefined"
+  popoverService={[Function Object]}
+  sortArtifacts={[Function Function]}
+  store={[Function Store]}
+  table="undefined"
+  translateService={[Function Object]}
+  updateEnvParams={[Function Function]}
+  workspaceService={[Function Object]}
+>
+  
+</deployment-artifact-page>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.html b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.html
new file mode 100644
index 0000000000..35592d846a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.html
@@ -0,0 +1,73 @@
+<div class="deployment-artifact-page" *ngIf="(workspaceState$ | async) as state">
+    <svg-icon-label *ngIf="!state.isViewOnly" class="add-artifact-btn" [clickable]="true" [mode]="'primary'" [labelPlacement]="'right'"
+                    [label]="'Add'" [name]="'plus'"
+                    (click)="addOrUpdateArtifact()"></svg-icon-label>
+    <ngx-datatable
+            columnMode="flex"
+            [headerHeight]="40"
+            [footerHeight]="'undefined'"
+            [reorderable]="false"
+            [swapColumns]="false"
+                [rows]="deploymentArtifacts$ | async"
+            #deploymentArtifactsTable>
+        <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div *ngIf="row.generatedFromId" class="env-artifact-container">
+                     <div class="env-artifact"></div>
+                </div>
+                <span sdc-tooltip [tooltip-text]="row.artifactDisplayName" [tooltip-placement]="3" [attr.data-tests-id]="'artifactDisplayName_' + row.artifactDisplayName">{{row.artifactDisplayName}}</span>
+                <span *ngIf="row.description.length > 0" class="info">
+                    <svg-icon [clickable]="true" [name]="'comment'" [mode]="'primary2'" (click)="openPopOver('Description',row.description,{x:$event.pageX , y:$event.pageY },'bottom')"></svg-icon>
+                </span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" name="Type" [flexGrow]="0.6">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span sdc-tooltip [tooltip-text]="row.artifactType" [tooltip-placement]="3" [attr.data-tests-id]="'artifactType_' + row.artifactDisplayName">{{row.artifactType}}</span>
+            </ng-template>
+        </ngx-datatable-column> exactly 2 tosca artifacts
+        <ngx-datatable-column [resizeable]="false" name="Version" [flexGrow]="0.3">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span [attr.data-tests-id]="'artifactVersion_' + row.artifactDisplayName">{{ row.artifactVersion }}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" name="UUID" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span sdc-tooltip [tooltip-text]="row.artifactUUID" [tooltip-placement]="3">{{ row.artifactUUID }}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" [flexGrow]="0.6">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div class="download-artifact-button">
+                    <svg-icon *ngIf="!row.heatParameters?.length && !state.isViewOnly" class="action-icon" [mode]="'primary2'" [name]="'edit-o'"
+                              testId="edit_{{row.artifactDisplayName}}" clickable="true" size="medium"
+                              (click)="addOrUpdateArtifact(row, state.isViewOnly)"></svg-icon>
+                    <svg-icon *ngIf="row.heatParameters?.length && !state.isViewOnly" class="action-icon" [mode]="'primary2'" [name]="'indesign_status'"
+                              testId="update_heat_params_{{row.artifactDisplayName}}" clickable="true" size="medium"
+                              (click)="updateEnvParams(row, state.isViewOnly)"></svg-icon>
+                    <svg-icon *ngIf="!row.isFromCsar && !state.isViewOnly" class="action-icon" [mode]="'primary2'" [name]="'trash-o'"
+                              testId="delete_{{row.artifactDisplayName}}" clickable="true" size="medium" (click)="deleteArtifact(row)"></svg-icon>
+                    <svg-icon *ngIf="row.isGenericBrowseable()" class="action-icon" [mode]="'primary2'" [name]="'search-o'"
+                              testId="gab-{{row.artifactDisplayName}}" clickable="true" size="medium" (click)="openGenericArtifactBrowserModal(row)"></svg-icon>
+
+                    <!--Download-->
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-footer>
+            <ng-template ngx-datatable-footer-template>
+                <div class="table-footer-container">
+                    <sdc-button *ngIf="!state.isViewOnly" [type]="'secondary'"
+                                [testId]="'add_artifact_btn'"
+                                [text]="'DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER' | translate"
+                                [icon_name]="'plus-circle-o'"
+                                [icon_mode] = "'secondary'"
+                                [icon_position]="'left'"
+                                (click)="addOrUpdateArtifact()">
+                    </sdc-button>
+                </div>
+            </ng-template>
+        </ngx-datatable-footer>
+    </ngx-datatable>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.less
new file mode 100644
index 0000000000..22ceb96653
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.less
@@ -0,0 +1,55 @@
+.deployment-artifact-page {
+
+
+  .env-artifact-container {
+    margin-left: -25px;
+    margin-top: -21px;
+    padding-left: 10px;
+    position: absolute;
+    background-color: white;
+    .env-artifact {
+      border-left: 1px #848586 solid;
+      height: 33px;
+
+      border-top: 1px #848586 solid;
+      border-bottom: 1px #848586 solid;
+      width: 10px;
+      float: left;
+
+    }
+  }
+  .add-artifact-btn {
+    display: flex;
+    cursor: pointer;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+  }
+  .download-artifact-button {
+    display: flex;
+    justify-content: center;
+
+    .action-icon {
+      margin-right: 10px;
+    }
+  }
+
+  .table-footer-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    margin: 20px 0px;
+  }
+}
+
+:host ::ng-deep {
+
+  .ngx-datatable {
+    //border: 1px solid red;
+    .datatable-body-cell {
+      .info {
+        float: right;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.ts
new file mode 100644
index 0000000000..53b21b34b6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.ts
@@ -0,0 +1,155 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Select, Store } from '@ngxs/store';
+import { ArtifactModel } from 'app/models';
+import * as _ from 'lodash';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { Observable } from 'rxjs/index';
+import { map } from 'rxjs/operators';
+import { GabConfig } from '../../../../models/gab-config';
+import { PathsAndNamesDefinition } from '../../../../models/paths-and-names';
+import { GenericArtifactBrowserComponent } from '../../../../ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component';
+import { ArtifactGroupType, ArtifactType } from '../../../../utils/constants';
+import { ArtifactsService } from '../../../components/forms/artifacts-form/artifacts.service';
+import { PopoverContentComponent } from '../../../components/ui/popover/popover-content.component';
+import { CacheService } from '../../../services/cache.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { GetArtifactsByTypeAction } from '../../../store/actions/artifacts.action';
+import { ArtifactsState } from '../../../store/states/artifacts.state';
+import { WorkspaceState, WorkspaceStateModel } from '../../../store/states/workspace.state';
+import { WorkspaceService } from '../workspace.service';
+import { ModalService } from 'app/ng2/services/modal.service';
+
+export interface IPoint {
+    x: number;
+    y: number;
+}
+
+@Component({
+    selector: 'deployment-artifact-page',
+    templateUrl: './deployment-artifacts-page.component.html',
+    styleUrls: ['./deployment-artifacts-page.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class DeploymentArtifactsPageComponent implements OnInit {
+
+    public componentId: string;
+    public componentType: string;
+    public deploymentArtifacts$: Observable<ArtifactModel[]>;
+    public isComponentInstanceSelected: boolean;
+
+    @Select(WorkspaceState) workspaceState$: Observable<WorkspaceStateModel>;
+    @ViewChild('informationArtifactsTable') table: any;
+    @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent;
+
+    constructor(private workspaceService: WorkspaceService,
+                private artifactsService: ArtifactsService,
+                private store: Store,
+                private popoverService: SdcUiServices.PopoverService,
+                private cacheService: CacheService,
+                private modalService: SdcUiServices.ModalService,
+                private translateService: TranslateService) {
+    }
+
+    private getEnvArtifact = (heatArtifact: ArtifactModel, artifacts: ArtifactModel[]): ArtifactModel => {
+        return _.find(artifacts, (item: ArtifactModel) => {
+            return item.generatedFromId === heatArtifact.uniqueId;
+        });
+    };
+
+    // we need to sort the artifact in a way that the env artifact is always under the artifact he is connected to- this is cause of the way the ngx databale work
+    private sortArtifacts = ((artifacts) => {
+        const sortedArtifacts = [];
+        _.forEach(artifacts, (artifact: ArtifactModel): void => {
+            const envArtifact = this.getEnvArtifact(artifact, artifacts);
+            if (!artifact.generatedFromId) {
+                sortedArtifacts.push(artifact);
+            }
+            if (envArtifact) {
+                sortedArtifacts.push(envArtifact);
+            }
+        });
+        return sortedArtifacts;
+    })
+
+    ngOnInit(): void {
+        this.componentId = this.workspaceService.metadata.uniqueId;
+        this.componentType = this.workspaceService.metadata.componentType;
+
+        this.store.dispatch(new GetArtifactsByTypeAction({
+            componentType: this.componentType,
+            componentId: this.componentId,
+            artifactType: ArtifactGroupType.DEPLOYMENT
+        }));
+        this.deploymentArtifacts$ = this.store.select(ArtifactsState.getArtifactsByType).pipe(map((filterFn) => filterFn(ArtifactType.DEPLOYMENT))).pipe(map(artifacts => {
+            return this.sortArtifacts(artifacts);
+        }));
+    }
+
+    onActivate(event) {
+        if (event.type === 'click') {
+            this.table.rowDetail.toggleExpandRow(event.row);
+        }
+    }
+
+    public addOrUpdateArtifact = (artifact: ArtifactModel, isViewOnly: boolean) => {
+        this.artifactsService.openArtifactModal(this.componentId, this.componentType, artifact, ArtifactGroupType.DEPLOYMENT, isViewOnly);
+    }
+
+    public deleteArtifact = (artifactToDelete) => {
+        this.artifactsService.deleteArtifact(this.componentType, this.componentId, artifactToDelete);
+    }
+
+    private openPopOver = (title: string, content: string, positionOnPage: IPoint, location: string) => {
+        this.popoverService.createPopOver(title, content, positionOnPage, location);
+    }
+
+    public updateEnvParams = (artifact: ArtifactModel, isViewOnly: boolean) => {
+        this.artifactsService.openUpdateEnvParams(this.componentType, this.componentId, artifact );
+    }
+
+    private openGenericArtifactBrowserModal = (artifact: ArtifactModel): void => {
+        const titleStr = 'Generic Artifact Browser';
+        const modalConfig = {
+            size: 'sdc-xl',
+            title: titleStr,
+            type: SdcUiCommon.ModalType.custom,
+            buttons: [{
+                id: 'closeGABButton',
+                text: 'Close',
+                size: 'sm',
+                closeModal: true
+            }] as SdcUiCommon.IModalButtonComponent[]
+        };
+
+        const uiConfiguration: any = this.cacheService.get('UIConfiguration');
+        let noConfig: boolean = false;
+        let pathsandnamesArr: PathsAndNamesDefinition[] = [];
+
+        if (typeof uiConfiguration.gab === 'undefined') {
+            noConfig = true;
+        } else {
+            const gabConfig: GabConfig = uiConfiguration.gab
+                .find((config) => config.artifactType === artifact.artifactType);
+            if (typeof gabConfig === 'undefined') {
+                noConfig = true;
+            } else {
+                pathsandnamesArr = gabConfig.pathsAndNamesDefinitions;
+            }
+        }
+
+
+        if (noConfig) {
+            const msg = this.translateService.translate('DEPLOYMENT_ARTIFACT_GAB_NO_CONFIG');
+            this.modalService.openAlertModal(titleStr, msg);
+        }
+
+        const modalInputs = {
+            pathsandnames: pathsandnamesArr,
+            artifactid: artifact.esId,
+            resourceid: this.componentId
+        };
+
+        this.modalService.openCustomModal(modalConfig, GenericArtifactBrowserComponent, modalInputs);
+
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.module.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.module.ts
new file mode 100644
index 0000000000..398e9d3f4d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.module.ts
@@ -0,0 +1,35 @@
+import {CommonModule} from "@angular/common";
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {UiElementsModule} from "../../../components/ui/ui-elements.module";
+import {ArtifactFormModule} from "../../../components/forms/artifacts-form/artifact-form.module";
+import {ArtifactsService} from "../../../components/forms/artifacts-form/artifacts.service";
+import {DeploymentArtifactsPageComponent} from "./deployment-artifacts-page.component";
+import {TranslatePipe} from "../../../shared/translator/translate.pipe";
+import {TranslateModule} from "../../../shared/translator/translate.module";
+import {GenericArtifactBrowserModule} from "../../../components/logic/generic-artifact-browser/generic-artifact-browser.module";
+
+@NgModule({
+    declarations: [
+        DeploymentArtifactsPageComponent
+    ],
+    imports: [
+        TranslateModule,
+        CommonModule,
+        SdcUiComponentsModule,
+        NgxDatatableModule,
+        UiElementsModule,
+        ArtifactFormModule,
+        GenericArtifactBrowserModule
+    ],
+    exports: [
+        DeploymentArtifactsPageComponent
+    ],
+    entryComponents: [
+        DeploymentArtifactsPageComponent
+    ],
+    providers:[ArtifactsService]
+})
+export class DeploymentArtifactsPageModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.spec.ts
new file mode 100644
index 0000000000..056efdc5d4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.spec.ts
@@ -0,0 +1,86 @@
+// import ' rxjs/add/observable/of';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { NgxsModule, Store } from '@ngxs/store';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { SdcUiServices } from 'onap-ui-angular';
+import { Observable } from 'rxjs/Observable';
+import { deploymentArtifactMock } from '../../../../../jest/mocks/artifacts-mock';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { ArtifactsService } from '../../../components/forms/artifacts-form/artifacts.service';
+import { CacheService } from '../../../services/cache.service';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { ArtifactsState } from '../../../store/states/artifacts.state';
+import { WorkspaceService } from '../workspace.service';
+import { DeploymentArtifactsPageComponent } from './deployment-artifacts-page.component';
+import {ModalService} from "../../../services/modal.service";
+
+describe('deployment artifacts page', () => {
+
+    let fixture: ComponentFixture<DeploymentArtifactsPageComponent>;
+    let topologyTemplateServiceMock: Partial<TopologyTemplateService>;
+    let workspaceServiceMock: Partial<WorkspaceService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+    let store: Store;
+
+    beforeEach(
+        async(() => {
+
+            topologyTemplateServiceMock = {
+                getArtifactsByType: jest.fn().mockImplementation((componentType, id, artifactType) => Observable.of(deploymentArtifactMock))
+            };
+            workspaceServiceMock = {
+                metadata: <ComponentMetadata>{
+                    uniqueId: 'service_unique_id',
+                    componentType: 'SERVICE'
+                }
+            }
+
+            loaderServiceMock = {
+                activate: jest.fn(),
+                deactivate: jest.fn()
+            }
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [DeploymentArtifactsPageComponent],
+                    imports: [NgxDatatableModule, TranslateModule, NgxsModule.forRoot([ArtifactsState])],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: WorkspaceService, useValue: workspaceServiceMock},
+                        {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock},
+                        {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock},
+                        {provide: ArtifactsService, useValue: {}},
+                        {provide: SdcUiServices.PopoverService, useValue: {}},
+                        {provide: CacheService, useValue: {}},
+                        {provide: SdcUiServices.ModalService, useValue: {}},
+                        {provide: ModalService, useValue: {}},
+                        {provide: TranslateService, useValue: {}}
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(DeploymentArtifactsPageComponent);
+                store = testBed.get(Store);
+            });
+        })
+    );
+
+    it('should match current snapshot of informational artifact pages component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should see exactly 2 tosca artifacts', () => {
+        fixture.componentInstance.ngOnInit();
+        fixture.componentInstance.deploymentArtifacts$.subscribe((artifacts) => {
+            expect(artifacts.length).toEqual(8);
+        })
+        store.selectOnce((state) => state.artifacts.deploymentArtifacts).subscribe((artifacts) => {
+            expect(artifacts.length).toEqual(8);
+        });
+    });
+
+});
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.html b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.html
new file mode 100644
index 0000000000..885277217d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.html
@@ -0,0 +1,11 @@
+<div class="deployment-page">
+    <deployment-graph></deployment-graph>
+    <panel-wrapper-component>
+        <sdc-tabs class="deployment-tabs" [iconsSize]="'large'" [isVertical]="true">
+            <sdc-tab *ngFor="let tab of tabs" [titleIcon]="tab.titleIcon" [active]="tab.isActive"
+                     [tooltipText]="tab.tooltipText">
+                <hierarchy-tab *ngIf="isDataAvailable" [isViewOnly]="(isViewOnly$ | async)"></hierarchy-tab>
+            </sdc-tab>
+        </sdc-tabs>
+    </panel-wrapper-component>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less
new file mode 100644
index 0000000000..4b7a1e7e9f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less
@@ -0,0 +1,24 @@
+@import './../../../../../assets/styles/variables.less';
+@import './../../../../../assets/styles/override.less';
+.deployment-page {
+  width: 100%;
+  height: 100%;
+
+  /deep/ .sdc-tabs {
+    height: 100%;
+  }
+  /deep/ .sdc-tabs-list {
+    position: absolute;
+    top: 22px;
+    right: 303px;
+    background-color: @sdcui_color_silver;
+
+    svg-icon-label {
+      vertical-align: middle;
+    }
+  }
+  /deep/ .sdc-tab-content {
+    height: 100%;
+  }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.ts
new file mode 100644
index 0000000000..12bd5369c7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.ts
@@ -0,0 +1,78 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Component} from "@angular/core";
+import {HierarchyTabComponent} from "./panel/panel-tabs/hierarchy-tab/hierarchy-tab.component";
+import {ComponentGenericResponse} from "../../../services/responses/component-generic-response";
+import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
+import {WorkspaceService} from "../workspace.service";
+import {Module} from "app/models";
+import {SdcUiServices} from "onap-ui-angular";
+import {Select} from "@ngxs/store";
+import {WorkspaceState} from "../../../store/states/workspace.state";
+import {DeploymentGraphService} from "../../composition/deployment/deployment-graph.service";
+
+const tabs =
+    {
+        hierarchyTab: {
+            titleIcon: 'composition-o',
+            component: HierarchyTabComponent,
+            input: {},
+            isActive: true,
+            tooltipText: 'Hierarchy'
+        }
+    };
+
+@Component({
+    selector: 'deployment-page',
+    templateUrl: './deployment-page.component.html',
+    styleUrls: ['deployment-page.component.less']
+})
+
+export class DeploymentPageComponent {
+    public tabs: Array<any>;
+    public resourceType: string;
+    public modules: Array<Module>;
+    public isDataAvailable: boolean;
+
+    @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
+
+    constructor(private topologyTemplateService: TopologyTemplateService,
+                private workspaceService: WorkspaceService,
+                private deploymentService: DeploymentGraphService,
+                private loaderService: SdcUiServices.LoaderService) {
+        this.tabs = [];
+        this.isDataAvailable = false;
+    }
+
+    ngOnInit(): void {
+        this.topologyTemplateService.getDeploymentGraphData(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId).subscribe((response: ComponentGenericResponse) => {
+            this.deploymentService.componentInstances = response.componentInstances;
+            this.deploymentService.componentInstancesRelations = response.componentInstancesRelations;
+            this.deploymentService.modules = response.modules;
+            this.isDataAvailable = true;
+            this.loaderService.deactivate();
+        });
+
+        this.loaderService.activate();
+        this.resourceType = this.workspaceService.getMetadataType();
+        this.tabs.push(tabs.hierarchyTab);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.module.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.module.ts
new file mode 100644
index 0000000000..3635e8f2cf
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.module.ts
@@ -0,0 +1,30 @@
+/**
+ * Created by ob0695 on 6/4/2018.
+ */
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {DeploymentPageComponent} from "./deployment-page.component";
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {UiElementsModule} from "../../../components/ui/ui-elements.module";
+import {TranslateModule} from "../../../shared/translator/translate.module";
+import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+import {HierarchyTabModule} from "./panel/panel-tabs/hierarchy-tab/hierarchy-tab.module";
+import {DeploymentGraphService} from "../../composition/deployment/deployment-graph.service";
+import {DeploymentGraphModule} from "../../composition/deployment/deployment-graph.module";
+
+@NgModule({
+    declarations: [DeploymentPageComponent],
+    imports: [CommonModule,
+        DeploymentGraphModule,
+        SdcUiComponentsModule,
+        UiElementsModule,
+        TranslateModule,
+        GlobalPipesModule,
+        HierarchyTabModule
+    ],
+    exports: [DeploymentPageComponent],
+    entryComponents: [DeploymentPageComponent],
+    providers: [DeploymentGraphService]
+})
+export class DeploymentPageModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.html b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.html
new file mode 100644
index 0000000000..d5b9d9e9b2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.html
@@ -0,0 +1,29 @@
+<div class="edit-module-name">
+    <div class="edit-module-name-label vfInstance-name" data-tests-id="popover-vfinstance-name" sdc-tooltip [tooltip-text]="selectModule.vfInstanceName">{{selectModule.vfInstanceName}}</div>
+    <div class="edit-module-name-heatName">
+        <sdc-input #heatName [maxLength]="50"
+            [(value)]="selectModule.heatName" 
+            [testId]="'popover-heat-name'"
+            [placeHolder]="'Enter Name'">
+        </sdc-input>
+        <sdc-validation [validateElement]="heatName">
+            <sdc-regex-validator [message]="'Special characters not allowed.'" [pattern]="pattern"></sdc-regex-validator>
+        </sdc-validation>
+    </div>
+    <div class="edit-module-name-label module-name" data-tests-id="'popover-module-name'" sdc-tooltip [tooltip-text]="selectModule.moduleName">{{selectModule.moduleName}}</div>
+    <sdc-button class="edit-module-name-btn cancel-button"
+        [text]="'Cancel'"
+        [testId]="'popover-close-button'"
+        [type]="'primary'"
+        [size] = "'small'"
+        (click)="clickButton(false)">
+    </sdc-button>
+    <sdc-button class="edit-module-name-btn save-button"
+        [text]="'Save'"
+        [testId]="'popover-save-button'"
+        [type]="'primary'"
+        [size] = "'small'"
+        (click)="clickButton(true)"
+        [disabled]="selectModule.heatName == originalName">
+    </sdc-button>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.less
new file mode 100644
index 0000000000..721ad53bc3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.less
@@ -0,0 +1,20 @@
+.edit-module-name-btn{
+    float:right;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+.save-button {
+    margin-left: 30px;
+}
+.cancel-button {
+    margin-left: 20px;
+}
+.edit-module-name-heatName {
+    margin-bottom: 15px;
+}
+.edit-module-name-label {
+    text-overflow: ellipsis;
+    display: block;
+    white-space: nowrap;
+    margin-bottom: 10px;
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.ts
new file mode 100644
index 0000000000..819182c75f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/edit-module-name/edit-module-name.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input, Output, OnInit } from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { DisplayModule } from "../../../../../../../models/modules/base-module";
+import { ValidationConfiguration } from "../../../../../../../models/validation-config";
+
+@Component({
+    selector: 'edit-module-name',
+    templateUrl: './edit-module-name.component.html',
+    styleUrls: ['edit-module-name.component.less']
+})
+export class EditModuleName implements OnInit{
+    @Input() selectModule:DisplayModule;
+    @Output() clickButtonEvent: EventEmitter<String> = new EventEmitter();
+    private pattern = ValidationConfiguration.validation.validationPatterns.stringOrEmpty;
+    private originalName: string;
+    constructor(){}
+    public ngOnInit(): void {
+         this.originalName = this.selectModule.heatName;
+    }
+
+    private clickButton(saveOrCancel: boolean) : void {
+        this.clickButtonEvent.emit(saveOrCancel ? this.selectModule.heatName : null);
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.html b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.html
new file mode 100644
index 0000000000..7c0e60b814
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.html
@@ -0,0 +1,119 @@
+<div class="sdc-hierarchy-tab" ng-class="">
+    <sdc-loader [global]="false" [testId]="'hierarchy-tab-loader'" [active]="isLoading" [relative]="true" [size]="'medium'"></sdc-loader>
+    <div class="sdc-hierarchy-tab-title"
+         [attr.data-tests-id]="'tab-header'">{{'DEPLOYMENT_TAB_TITLE' | translate }}</div>
+    <div [ngClass]="{'scroll-module-list': selectedModule}">
+        <div *ngIf="topologyTemplateType != 'SERVICE'; else isService" class="modules-list">
+            <div>
+                <div class="sdc-hierarchy-tab-sub-title" data-tests-id="tab-sub-header">{{topologyTemplateName}}</div>
+                <div *ngFor="let module of modules; index as i">
+                    <sdc-accordion [title]="module.name" [arrow-direction]="'left'"
+                                   [css-class]="'expand-collapse-container'"
+                                   [ngClass]="{'selected': selectedModule !== undefined && selectedModule.uniqueId === module.uniqueId}"
+                                   [testId]="'hierarchy-module-' + i + '-title'" tooltip="{{module.name}}"
+                                   (click)="onModuleSelected(module)">
+                        <div *ngFor="let memberId of getKeys(module.members)">
+                            <div class="expand-collapse-sub-title" tooltip="{{memberId}}">{{memberId}}</div>
+                        </div>
+                    </sdc-accordion>
+                </div>
+            </div>
+        </div>
+
+        <ng-template #isService>
+            <div class="module-list">
+                <div *ngFor="let instance of componentInstances; index as instanceIndex">
+                    <sdc-accordion [title]="instance.name" [arrow-direction]="'left'"
+                                   [css-class]="'expand-collapse-container outer-container'"
+                                   [testId]="'hierarchy-instance-' + instanceIndex + '-title'"
+                                   tooltip="{{instance.name}}">
+                        <div *ngFor="let module of instance.groupInstances; index as moduleIndex">
+                            <sdc-accordion [title]="module.name" [arrow-direction]="'left'"
+                                           [css-class]="'expand-collapse-container inner-container'"
+                                           [ngClass]="{'selected': selectedModule && selectedModule.groupInstanceUniqueId === module.uniqueId}"
+                                           [testId]="'hierarchy-module-' + moduleIndex + '-title'"
+                                           tooltip="{{module.uniqueId}}"
+                                           (click)="onModuleSelected(module, instance.uniqueId)">
+                                <div *ngFor="let memberId of getKeys(module.members)">
+                                    <div class="expand-collapse-sub-title" tooltip="{{memberId}}">{{memberId}}</div>
+                                </div>
+                            </sdc-accordion>
+                        </div>
+                    </sdc-accordion>
+                </div>
+            </div>
+        </ng-template>
+
+        <!--TODO: Add Resizable-->
+        <div *ngIf="selectedModule"class="module-data-container" [attr.data-tests-id]="'selected-module-data'">
+            <div class="module-data">
+                <div class="module-name-container">
+                    <div class="module-name module-text-overflow" [attr.data-tests-id]="'selected-module-name'"
+                         tooltip="{{selectedModule.name}}">{{selectedModule.name}}</div>
+                    <div class="edit-name-container" *ngIf="topologyTemplateType != 'SERVICE'">
+                        <svg-icon name="edit-o" [size]="'medium'" [ngClass]="{'hand-pointer': !isViewOnly}" (click)="openEditModuleNamePopup($event)"></svg-icon>
+                    </div>
+                </div>
+                <div [attr.data-tests-id]="'selected-module-group-uuid'" tooltip="{{selectedModule.groupUUID}}">
+                    <div class="selected-module-property-header">Module ID:</div>
+                    <div class="selected-module-property-value small-font">{{selectedModule.groupUUID}}</div>
+                </div>
+                <div [attr.data-tests-id]="'selected-module-group-customization-uuid'"
+                     *ngIf="topologyTemplateType == 'SERVICE' && isViewOnly"
+                     tooltip="{{selectedModule.customizationUUID}}">
+                    <div class="selected-module-property-header">Customization ID:</div>
+                    <div class="selected-module-property-value small-font">{{selectedModule.customizationUUID}}</div>
+                </div>
+                <div [attr.data-tests-id]="'selected-module-group-invariant-uuid'"
+                     tooltip="{{selectedModule.invariantUUID}}">
+                    <div class="selected-module-property-header">Invariant UUID:</div>
+                    <div class="selected-module-property-value small-font">{{selectedModule.invariantUUID}}</div>
+                </div>
+                <div [attr.data-tests-id]="'selected-module-version'" class="selected-module-property-container">
+                    <div class="selected-module-property-header">Version:</div>
+                    <div class="selected-module-property-value same-row">{{selectedModule.version}}</div>
+                </div>
+                <div data-tests-id="selected-module-is-base" class="selected-module-property-container">
+                    <div class="selected-module-property-header">IsBase:</div>
+                    <div class="selected-module-property-value same-row">{{selectedModule.isBase}}</div>
+                </div>
+
+            </div>
+            <sdc-accordion [title]="'Properties'" [arrow-direction]="'right'"
+                           [css-class]="'expand-collapse-module-data-container'">
+                <div *ngFor="let property of selectedModule.properties | orderBy:['name']:['asc']">
+                    <div class="module-data-list-item">
+                        <div class="module-data-list-item-value property-name"
+                             [attr.data-tests-id]="'selected-module-property-name'">
+                            <span tooltip="{{property.name}}" [ngClass]="{'hand-pointer': !isViewOnly}"
+                                  (click)="!isViewOnly && openEditPropertyModal(property)">{{property.name}}</span>
+                        </div>
+                        <div class="module-data-list-item-value property-info"
+                             [attr.data-tests-id]="'selected-module-property-type'"> Type: {{property.type}}</div>
+                        <div class="module-data-list-item-value property-info"
+                             [attr.data-tests-id]="'selected-module-property-schema-type'">
+                            Value: {{property.value}}</div>
+                    </div>
+                </div>
+            </sdc-accordion>
+            <sdc-accordion [title]="'Artifacts'" [arrow-direction]="'right'"
+                           [css-class]="'expand-collapse-module-data-container'">
+                <div *ngFor="let artifact of selectedModule.artifacts | orderBy:['artifactName']:['asc']">
+                    <div class="module-data-list-item">
+                        <div class="artifact-list-item">
+                            <div class="module-data-list-item-value"
+                                 [attr.data-tests-id]="'selected-module-artifact-name'"
+                                 tooltip="{{artifact.artifactName}}">{{artifact.artifactName}}</div>
+                            <div class="module-data-list-item-value artifact-info"
+                                 [attr.data-tests-id]="'selected-module-artifact-uuid'"
+                                 tooltip="{{artifact.artifactUUID}}">UUID: {{artifact.artifactUUID}}</div>
+                            <div class="module-data-list-item-value artifact-info"
+                                 [attr.data-tests-id]="'selected-module-artifact-version'">
+                                Version: {{artifact.artifactVersion}}</div>
+                        </div>
+                    </div>
+                </div>
+            </sdc-accordion>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
new file mode 100644
index 0000000000..269ca0aee0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
@@ -0,0 +1,222 @@
+@import './../../../../../../../../assets/styles/variables.less';
+.sdc-hierarchy-tab {
+  padding: 15px 0 0 0;
+  background-color: #f8f8f8;
+  height: 100%;
+  box-shadow: 0.3px 1px 3px rgba(24, 24, 25, 0.42);
+  display: flex;
+  flex-flow: column;
+
+  .sdc-hierarchy-tab-title {
+    color: @main_color_a;
+    padding: 0 0 15px 20px;
+    border-bottom: 1px solid #d2d2d2;
+  }
+
+  .sdc-hierarchy-tab-sub-title {
+    color: @main_color_a;
+    padding: 15px 20px 15px 20px;
+  }
+
+  .scroll-module-list {
+    overflow-y: auto;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  /deep/ .expand-collapse-container {
+    margin-bottom: 0;
+
+    .sdc-accordion-header {
+      white-space: nowrap;
+      line-height: 22px;
+      background-color: @tlv_color_u;
+      padding: 8px 20px 8px 8px;
+      box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.7);
+      height: 40px;
+
+      .title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 215px;
+      }
+    }
+
+    .sdc-accordion-body.open {
+      padding: 0 0 5px 0;
+    }
+
+    .sdc-accordion-header:hover {
+      background-color: @main_color_o;
+    }
+
+    &.outer-container {
+      .sdc-accordion-body {
+        padding-left: 0;
+      }
+    }
+
+    &.inner-container {
+      margin-bottom: 0;
+
+      .sdc-accordion-header {
+        padding: 8px 20px 8px 30px;
+        background-color: @tlv_color_t
+      }
+    }
+  }
+
+  sdc-accordion.selected {
+    /deep/ .expand-collapse-container {
+      .sdc-accordion-header {
+        background-color: @main_color_a;
+        color: @main_color_p;
+
+        .svg-icon {
+          fill: @main_color_p;
+        }
+      }
+    }
+  }
+
+  .expand-collapse-sub-title {
+    max-width: 225px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 10px 0 0 33px;
+  }
+
+  .expand-collapse-content {
+    .expand-collapse-title {
+      padding: 0 10px 0 30px;
+    }
+  }
+
+  .module-data-container {
+    width: 100%;
+    overflow-y: overlay;
+    background-color: @tlv_color_v;
+    border: 1px solid @main_color_a;
+    border-top: 4px solid @main_color_a;
+    box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32);
+    .module-data {
+      color: @main_color_a;
+      padding: 10px 0 10px 0;
+      margin: 0 20px 0 20px;
+
+      .selected-module-property-header {
+        font-weight: bold;
+      }
+
+      .selected-module-property-value {
+        font-family: @font-opensans-regular;
+
+        &.small-font {
+          font-size: 12px;
+        }
+      }
+
+      .module-name-container {
+
+        display: flex;
+        flex-direction: row;
+
+        .module-name {
+          font-size: 14px;
+          width: 75%;
+          max-width: 240px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .edit-name-container {
+          float: right;
+          border-left: 1px solid @main_color_a;
+          height: 20px;
+          padding-left: 12px;
+
+          svg-icon {
+            padding-top: 3px;
+            fill: @main_color_s;
+
+            &.hand-pointer {
+              cursor: pointer;
+            }
+
+          }
+        }
+      }
+    }
+
+    .selected-module-property-container {
+      flex-direction: row;
+      display: flex;
+
+      .selected-module-property-value {
+        text-indent: 2px;
+      }
+    }
+
+    /deep/ .expand-collapse-module-data-container {
+      margin-bottom: 0;
+
+      .sdc-accordion-header {
+        white-space: nowrap;
+        line-height: 22px;
+        padding: 8px 20px 8px 16px;
+        height: 40px;
+        background-color: @tlv_color_w;
+        color: @main_color_l;
+        border-top: 1px solid @main_color_a;
+        border-bottom: 1px solid @main_color_a;
+        width: 100%;
+      }
+
+    }
+
+    .module-data-list-item {
+      padding-bottom: 10px;
+      margin: 0 20px 0 20px;
+
+      .artifact-list-item {
+        color: @main_color_m;
+      }
+
+      .module-data-list-item-value {
+        width: 100%;
+        max-width: 240px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &.artifact-info {
+          font-family: @font-opensans-regular;
+          font-size: 12px;
+        }
+
+        &.property-name {
+          font-weight: 400;
+          color: @main_color_a;
+
+          .hand-pointer {
+            cursor: pointer;
+          }
+        }
+
+        &.property-info {
+          color: @func_color_s;
+          font-family: @font-opensans-regular;
+        }
+      }
+    }
+  }
+}
+
+.modules-list {
+  overflow-y: overlay;
+  flex-grow: 1;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.spec.ts
new file mode 100644
index 0000000000..ab88867cc0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.spec.ts
@@ -0,0 +1,133 @@
+import {async, ComponentFixture} from "@angular/core/testing";
+import {HierarchyTabComponent} from "./hierarchy-tab.component";
+import {ConfigureFn, configureTests} from "../../../../../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {TranslateModule} from "../../../../../../shared/translator/translate.module";
+import {TopologyTemplateService} from "../../../../../../services/component-services/topology-template.service";
+import {WorkspaceService} from "../../../../workspace.service";
+import {ModulesService} from "../../../../../../services/modules.service";
+import {GlobalPipesModule} from "../../../../../../pipes/global-pipes.module";
+import {TranslateService} from "../../../../../../shared/translator/translate.service";
+import {ModalsHandler} from "../../../../../../../utils/modals-handler";
+import {ComponentFactory} from "../../../../../../../utils/component-factory";
+import {NgxsModule} from "@ngxs/store";
+import {  SdcUiServices } from "onap-ui-angular";
+import {Observable} from "rxjs";
+import {DisplayModule, Module} from "../../../../../../../models/modules/base-module";
+import {DeploymentGraphService} from "../../../../../composition/deployment/deployment-graph.service";
+import {ComponentMetadata} from "../../../../../../../models/component-metadata";
+
+describe('HierarchyTabComponent', () => {
+
+    let fixture: ComponentFixture<HierarchyTabComponent>;
+    let workspaceService: Partial<WorkspaceService>;
+    let popoverServiceMock: Partial<SdcUiServices.PopoverService>;
+    let modulesServiceMock: Partial<ModulesService>;
+
+    let editModuleNameInstanceMock = {innerPopoverContent:{instance: { clickButtonEvent: Observable.of("new heat name")}},
+        closePopover: jest.fn()};
+    let eventMock  = {x: 1650, y: 350};
+    let moduleMock: Array<Module> = [{name: "NewVf2..base_vepdg..module-0", uniqueId: '1'}];
+    let selectedModuleMock: DisplayModule = {name: "NewVf2..base_vepdg..module-0", vfInstanceName: "NewVf2", moduleName:"module-0",
+                    heatName: "base_vepdg", uniqueId: '1', updateName: jest.fn().mockImplementation(() => {
+                    selectedModuleMock.name = selectedModuleMock.vfInstanceName + '..' + selectedModuleMock.heatName + '..' +
+                    selectedModuleMock.moduleName;})}
+    let updateSelectedModuleMock = () => {
+        selectedModuleMock.heatName = "base_vepdg";
+        selectedModuleMock.name = "NewVf2..base_vepdg..module-0";
+        fixture.componentInstance.selectedModule = selectedModuleMock;
+        fixture.componentInstance.modules = moduleMock;
+    }
+    beforeEach(
+        async(() => {
+
+            workspaceService ={
+                metadata:  <ComponentMetadata> {
+                    name: '',
+                    componentType: ''
+                }
+            }
+            popoverServiceMock = {
+                createPopOverWithInnerComponent: jest.fn().mockImplementation(() => {return editModuleNameInstanceMock})
+            }
+            modulesServiceMock = {
+                updateModuleMetadata: jest.fn().mockReturnValue(Observable.of({}))
+            }
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [HierarchyTabComponent],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    imports: [TranslateModule, NgxsModule.forRoot([]), GlobalPipesModule],
+                    providers: [
+                        {provide: DeploymentGraphService, useValue: {}},
+                        {provide: ComponentFactory, useValue: {}},
+                        {provide: TopologyTemplateService, useValue: {}},
+                        {provide: WorkspaceService, useValue: workspaceService},
+                        {provide: ModulesService, useValue: modulesServiceMock},
+                        {provide: TranslateService, useValue: {}},
+                        {provide: ModalsHandler, useValue: {}},
+                        {provide: SdcUiServices.PopoverService, useValue: popoverServiceMock}
+                    ]
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(HierarchyTabComponent);
+            });
+        })
+    );
+
+    it('expected heirarchy component to be defined', () => {
+        expect(fixture).toBeDefined();
+    });
+
+    it('Update heat name and name sucessfully', () => {
+        updateSelectedModuleMock();
+        fixture.componentInstance.openEditModuleNamePopup(eventMock);
+        expect(fixture.componentInstance.selectedModule.updateName).toHaveBeenCalled();
+        expect(modulesServiceMock.updateModuleMetadata).toHaveBeenCalled();
+        expect(fixture.componentInstance.selectedModule.name).toEqual('NewVf2..new heat name..module-0');
+        expect(fixture.componentInstance.modules[0].name).toEqual('NewVf2..new heat name..module-0');
+        expect(fixture.componentInstance.selectedModule.heatName).toEqual('new heat name');
+    })
+    it('Try to update heat name and name and get error from server', () => {
+        updateSelectedModuleMock();
+        modulesServiceMock.updateModuleMetadata.mockImplementation(() => Observable.throwError({}));
+        fixture.componentInstance.openEditModuleNamePopup(eventMock);
+        expect(fixture.componentInstance.selectedModule.updateName).toHaveBeenCalled();
+        expect(modulesServiceMock.updateModuleMetadata).toHaveBeenCalled();
+        expect(fixture.componentInstance.modules[0].name).toEqual('NewVf2..base_vepdg..module-0');
+        expect(fixture.componentInstance.selectedModule.heatName).toEqual('base_vepdg');
+        expect(fixture.componentInstance.selectedModule.name).toEqual('NewVf2..base_vepdg..module-0');
+    })
+    it('Try to update heat name and name but not find the module with the same uniqueId', () => {
+        selectedModuleMock.uniqueId = '2'
+        updateSelectedModuleMock();
+        fixture.componentInstance.openEditModuleNamePopup(eventMock);
+        expect(fixture.componentInstance.selectedModule.updateName).toHaveBeenCalled();
+        expect(modulesServiceMock.updateModuleMetadata).not.toHaveBeenCalled();
+        expect(fixture.componentInstance.modules[0].name).toEqual('NewVf2..base_vepdg..module-0');
+        expect(fixture.componentInstance.selectedModule.heatName).toEqual('base_vepdg');
+        expect(fixture.componentInstance.selectedModule.name).toEqual('NewVf2..base_vepdg..module-0');
+        selectedModuleMock.uniqueId = '1'
+    })
+    it('Open edit  module name popover and change the heat name', () => {
+        updateSelectedModuleMock();
+        spyOn(fixture.componentInstance, 'updateHeatName');
+        spyOn(fixture.componentInstance, 'updateOriginalHeatName');
+        fixture.componentInstance.openEditModuleNamePopup(eventMock);
+        expect(popoverServiceMock.createPopOverWithInnerComponent).toHaveBeenCalled();
+        expect(fixture.componentInstance.selectedModule.heatName).toEqual("new heat name");
+        expect(fixture.componentInstance.updateHeatName).toHaveBeenCalled();
+    })
+
+
+    it('Open edit  module name popover and not change the heat name', () => {
+        updateSelectedModuleMock();
+        editModuleNameInstanceMock.innerPopoverContent.instance.clickButtonEvent = Observable.of(null);
+        fixture.componentInstance.openEditModuleNamePopup(eventMock);
+        expect(popoverServiceMock.createPopOverWithInnerComponent).toHaveBeenCalled();
+        expect(fixture.componentInstance.selectedModule.heatName).toEqual("base_vepdg");
+    })
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.ts
new file mode 100644
index 0000000000..604b194283
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.ts
@@ -0,0 +1,139 @@
+import {Component, Input} from "@angular/core";
+import {Component as TopologyTemplate, ComponentInstance, DisplayModule, Module, PropertyModel} from "app/models";
+import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import {ComponentType} from "app/utils/constants";
+import {WorkspaceService} from "../../../../workspace.service";
+import {ModulesService} from "../../../../../../services/modules.service";
+import * as _ from "lodash";
+import {ModalsHandler} from "../../../../../../../utils/modals-handler";
+import {ComponentFactory} from "../../../../../../../utils/component-factory";
+import {Select, Store} from "@ngxs/store";
+import { SdcUiServices } from "onap-ui-angular";
+import { EditModuleName } from "../edit-module-name/edit-module-name.component";
+import {GraphState} from "../../../../../composition/common/store/graph.state";
+import {DeploymentGraphService} from "../../../../../composition/deployment/deployment-graph.service";
+import {OnSidebarOpenOrCloseAction} from "../../../../../composition/common/store/graph.actions";
+
+@   Component({
+    selector: 'hierarchy-tab',
+    templateUrl: './hierarchy-tab.component.html',
+    styleUrls: ['./hierarchy-tab.component.less'],
+})
+export class HierarchyTabComponent {
+
+    @Select(GraphState.withSidebar) withSidebar$: boolean;
+    @Input() isViewOnly: boolean;
+    public selectedIndex: number;
+    public selectedModule: DisplayModule;
+    public isLoading: boolean;
+    public topologyTemplateName: string;
+    public topologyTemplateType: string;
+    public modules: Array<Module> = [];
+    public componentInstances: Array<ComponentInstance> = [];
+    private editPropertyModalTopologyTemplate: TopologyTemplate;
+
+    constructor(private translateService: TranslateService,
+                private workspaceService: WorkspaceService,
+                private deploymentService: DeploymentGraphService,
+                private modulesService: ModulesService,
+                private ModalsHandler: ModalsHandler,
+                private componentFactory: ComponentFactory,
+                private store: Store,
+                private popoverService: SdcUiServices.PopoverService) {
+        this.isLoading = false;
+        this.topologyTemplateName = this.workspaceService.metadata.name;
+        this.topologyTemplateType = this.workspaceService.metadata.componentType;
+    }
+
+    ngOnInit() {
+        this.modules = this.deploymentService.modules;
+        this.componentInstances = this.deploymentService.componentInstances;
+        this.editPropertyModalTopologyTemplate = this.componentFactory.createEmptyComponent(this.topologyTemplateType);
+        this.editPropertyModalTopologyTemplate.componentInstances = this.deploymentService.componentInstances;
+    }
+
+    onModuleSelected(module: Module, componentInstanceId?: string): void {
+
+        let onSuccess = (module: DisplayModule) => {
+            console.log("Module Loaded: ", module);
+            this.selectedModule = module;
+            this.isLoading = false;
+        };
+
+        let onFailed = () => {
+            this.isLoading = false;
+        };
+
+        if (!this.selectedModule || (this.selectedModule && this.selectedModule.uniqueId != module.uniqueId)) {
+            this.isLoading = true;
+            if (this.topologyTemplateType == ComponentType.SERVICE) {
+                // this.selectedInstanceId = componentInstanceId;
+                this.modulesService.getComponentInstanceModule(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, componentInstanceId, module.uniqueId).subscribe((resultModule: DisplayModule) => {
+                    onSuccess(resultModule);
+                }, () => {
+                    onFailed();
+                });
+            } else {
+                this.modulesService.getModuleForDisplay(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, module.uniqueId).subscribe((resultModule: DisplayModule) => {
+                    onSuccess(resultModule);
+                }, () => {
+                    onFailed();
+                });
+            }
+        }
+    }
+
+    updateHeatName(): void {
+        this.isLoading = true;
+        let originalName: string = this.selectedModule.name;
+       
+        this.selectedModule.updateName();
+        let moduleIndex: number = _.indexOf(this.modules, _.find(this.modules, (module: Module) => {
+            return module.uniqueId === this.selectedModule.uniqueId;
+        }));
+        
+        if (moduleIndex !== -1) {
+            this.modules[moduleIndex].name = this.selectedModule.name;
+            this.modulesService.updateModuleMetadata(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, this.modules[moduleIndex]).subscribe(() => {
+                this.isLoading = false;
+            }, () => {
+                this.updateOriginalHeatName(originalName, moduleIndex);
+                this.modules[moduleIndex].name = originalName;
+            });
+        } else {
+                this.updateOriginalHeatName(originalName, moduleIndex);
+        }
+    };
+
+    private updateOriginalHeatName(originalName: string, moduleIndex: number){
+        this.isLoading = false;
+        this.selectedModule.name = originalName;
+        this.selectedModule.heatName = this.selectedModule.name.split('..')[1];
+    }
+
+    openEditPropertyModal(property: PropertyModel): void {
+        this.editPropertyModalTopologyTemplate.setComponentMetadata(this.workspaceService.metadata);
+        this.ModalsHandler.openEditModulePropertyModal(property, this.editPropertyModalTopologyTemplate, this.selectedModule, this.selectedModule.properties).then(() => {
+        });
+    }
+
+    private getKeys(map: Map<any, any>) {
+        return _.keys(map);
+    }
+
+    private toggleSidebarDisplay = () => {
+        // this.withSidebar = !this.withSidebar;
+        this.store.dispatch(new OnSidebarOpenOrCloseAction());
+    }
+
+    public openEditModuleNamePopup($event) {
+        const editModuleNameInstance = this.popoverService.createPopOverWithInnerComponent('Edit Module Name', '', {x:$event.x , y:$event.y }, EditModuleName, {selectModule: _.cloneDeep(this.selectedModule)}, 'top');
+        editModuleNameInstance.innerPopoverContent.instance.clickButtonEvent.subscribe((newHeatName) => {
+            if(newHeatName != null){
+                this.selectedModule.heatName = newHeatName;
+                this.updateHeatName();
+            }
+            editModuleNameInstance.closePopover();
+        })
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.module.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.module.ts
new file mode 100644
index 0000000000..048ca0c65f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.module.ts
@@ -0,0 +1,24 @@
+/**
+ * Created by ob0695 on 6/4/2018.
+ */
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {HierarchyTabComponent} from "./hierarchy-tab.component";
+import {UiElementsModule} from "../../../../../../components/ui/ui-elements.module";
+import {TranslateModule} from "../../../../../../shared/translator/translate.module";
+import {CommonModule} from "@angular/common";
+import {GlobalPipesModule} from "../../../../../../pipes/global-pipes.module";
+import { EditModuleName } from "../edit-module-name/edit-module-name.component";
+
+@NgModule({
+    declarations: [HierarchyTabComponent, EditModuleName],
+    imports: [CommonModule,
+        UiElementsModule,
+        SdcUiComponentsModule,
+        TranslateModule,
+        GlobalPipesModule],
+    entryComponents: [HierarchyTabComponent, EditModuleName],
+    exports: [HierarchyTabComponent, EditModuleName],
+})
+export class HierarchyTabModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.html b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.html
new file mode 100644
index 0000000000..574f2d1bb4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.html
@@ -0,0 +1,62 @@
+<div class="status-page">
+  <ngx-datatable
+          class="material"
+          [columnMode]="'standard'"
+          [rowHeight]="'auto'"
+          [reorderable]="false"
+          [swapColumns]="false"
+          [rows]="artifacts"
+          [scrollbarH]="true"
+           #statusTable>
+    <ngx-datatable-row-detail [rowHeight]="'auto'">
+      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
+          <div *ngFor="let status of row.statuses">
+            <span class = "status" [attr.data-tests-id]="generateDataTestID('statusTimeStamp_',componentName, row.name, status.status)">{{ status.timeStamp | date:'short':'UTC'}}</span>
+            <span class = "status" [attr.data-tests-id]="generateDataTestID('statusValue_',componentName, row.name, status.status)">{{ status.status }}</span>
+          </div>
+      </ng-template>
+    </ngx-datatable-row-detail>
+    <ngx-datatable-column name="Component ID" [resizeable]="false" [width]="250">
+      <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded" >
+        <div>
+          <span class="urlValue">
+            <svg-icon [clickable]="true" class="expand-collapse-icon"
+            [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+            [size]="'medium'" (click)="expandRow(row)" [attr.data-tests-id]="generateDataTestID('expandIcon_compID_', componentName, row.name)"></svg-icon>
+          </span>
+          <span class="urlValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('compID_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="componentName">
+            {{ componentName }}
+          </span>
+        </div>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [resizeable]="false" [width]="280" name="Artifact Name">
+      <ng-template ngx-datatable-cell-template let-row="row">
+        <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('artName_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="row.name">{{ row.name }}</div>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [resizeable]="false" [width]="380" name="URL">
+      <ng-template ngx-datatable-cell-template let-row="row">
+        <div>
+          <span class="urlValue ellipsisCell" id="urlCell" [attr.data-tests-id]="generateDataTestID('url_',componentName, row.name)">{{ row.url }}</span>
+          <span class="urlCopyIcon" title="Copy URL">
+              <svg-icon-label [clickable]="true" [mode]="'primary'" [labelPlacement]="'right'"
+              [label]="" [name]="'copy-o'" [testId]="'copyToClipboard'"
+              (click)="copyToClipboard(row.url)">
+              </svg-icon-label>
+          </span>
+        </div>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [resizeable]="false" [width]="180" name="Time(UTC)">
+      <ng-template ngx-datatable-cell-template let-row="row">
+        <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('time_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="getLatestArtifact(row.name).timeStamp | date:'short':'UTC'">{{ getLatestArtifact(row.name).timeStamp | date:'short':'UTC'}}</div>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [resizeable]="false" [width]="280" name="Status">
+      <ng-template ngx-datatable-cell-template let-row="row">
+        <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('status_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="getLatestArtifact(row.name).status">{{ getLatestArtifact(row.name).status }}</div>
+      </ng-template>
+    </ngx-datatable-column>
+  </ngx-datatable>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.less b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.less
new file mode 100644
index 0000000000..81b8805792
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.less
@@ -0,0 +1,78 @@
+:host ::ng-deep {
+    .ngx-datatable {
+        > div {
+            min-height: 5px;
+        }
+    }
+}
+
+.datatable-header-cell {
+    text-align: left;
+    color: red;
+}
+
+.statusHeaderTable {
+    color: #000000;
+    font-family: OpenSans-Bold, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    float: left;
+}
+
+.status {
+    padding-right: 30px;
+    color: #5a5a5a;
+    font-family: OpenSans-Regular, sans-serif;
+    font-size: 12px;
+}
+
+.distributionIDBlock {
+    display: inline-block;
+}
+
+.distributionRowContainer{
+    background-color: #eaeaea;
+    text-align: center;
+}
+
+.distributionRowLabel {
+    overflow: hidden;
+    padding-top: 10px;
+    color: #000000;
+    font-family: OpenSans-Semibold, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.distributionRowValue {
+    color: #263d4d;
+    font-family: OpenSans-Regular, sans-serif;
+    font-size: 14px;
+}
+
+.urlValue {
+    float: left;
+    color: #263d4d;
+    font-family: OpenSans-Regular, sans-serif;
+    font-size: 14px;
+}
+
+.urlCopyIcon {
+    float: right;
+    width: 8%;
+}
+
+.ellipsisCell {
+    width: 92%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+
+
+
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.spec.ts
new file mode 100644
index 0000000000..72b930b6b8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.spec.ts
@@ -0,0 +1,90 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { SdcUiServices } from 'onap-ui-angular';
+import { ConfigureFn, configureTests } from '../../../../../../../jest/test-config.helper';
+import { DistributionService } from '../../distribution.service';
+import { DistributionComponentArtifactTableComponent } from './distribution-component-artifact-table.component';
+
+describe('DistributionComponentArtifactTableComponent', () => {
+  let fixture: ComponentFixture<DistributionComponentArtifactTableComponent>;
+  let distibutionServiceMock: Partial<DistributionService>;
+
+  const mockArtifactsForDistributionAndComponentName = [
+      {
+        name: 'Artifact1',
+        statuses: [
+          {timeStamp: '7/25/2019 12:48AM', status: 'DEPLOY_OK'},
+          {timeStamp: '7/25/2019 12:48AM', status: 'DOWNLOAD_OK'},
+          {timeStamp: '7/25/2019 12:48AM', status: 'NOTIFIED'}
+        ],
+        url: 'URL1',
+      },
+      {
+        name: 'Artifact2',
+        statuses: [
+          {timeStamp: '7/26/2019 12:48AM', status: 'STATUS_TO_DISPLAY'},
+          {timeStamp: '7/25/2019 12:48AM', status: 'DOWNLOAD_OK'},
+          {timeStamp: '7/25/2019 12:48AM', status: 'NOTIFIED'}
+        ],
+        url: 'URL2',
+      },
+      {
+        name: 'ArtifactWithNoStatuses',
+        url: 'URL2',
+      }
+    ];
+
+  beforeEach(() => {
+
+    distibutionServiceMock = {
+      getArtifactstByDistributionIDAndComponentsName: jest.fn().mockReturnValue(mockArtifactsForDistributionAndComponentName),
+    };
+
+    const configure: ConfigureFn = (testBed) => {
+      testBed.configureTestingModule({
+        declarations: [DistributionComponentArtifactTableComponent],
+        imports: [NgxDatatableModule],
+        schemas: [NO_ERRORS_SCHEMA],
+        providers: [
+          {provide: DistributionService, useValue: distibutionServiceMock}
+        ],
+      });
+    };
+
+    configureTests(configure).then((testBed) => {
+      fixture = testBed.createComponent(DistributionComponentArtifactTableComponent);
+    });
+
+  });
+
+  it('Get Latest Artifact (status and timeStamp) - So the Component Table will display the last time stamp of the notification', async () => {
+    await fixture.componentInstance.ngOnInit();
+    expect(fixture.componentInstance.getLatestArtifact('Artifact2')).toEqual({status: 'STATUS_TO_DISPLAY', timeStamp: '7/26/2019 12:48AM'});
+    expect(fixture.componentInstance.getLatestArtifact('ArtifactWithNoStatuses')).toEqual(null);
+  });
+
+  it('Once the Distribution Component Artifact Table Component is created - artifacts will keep the relevant artifacts for a specific distributionID and Component Name', async () => {
+    await fixture.componentInstance.ngOnInit();
+    // tslint:disable:no-string-literal
+    expect(fixture.componentInstance.artifacts.length).toBe(3);
+    expect(fixture.componentInstance.artifacts[0].name).toBe('Artifact1');
+    expect(fixture.componentInstance.artifacts[0].url).toBe('URL1');
+    expect(fixture.componentInstance.artifacts[0].statuses.length).toBe(3);
+
+    expect(fixture.componentInstance.artifacts[1].name).toBe('Artifact2');
+  });
+
+  it('Once the Distribution Component Artifact Table Component is created for Modal- artifacts will keep the relevant artifacts for a ' +
+      'specific distributionID and Component Name filtered by Status', async () => {
+    fixture.componentInstance.statusFilter = 'DOWNLOAD_OK';
+    await fixture.componentInstance.ngOnInit();
+    expect(fixture.componentInstance.artifacts.length).toBe(3);
+    expect(fixture.componentInstance.artifacts[0].name).toBe('Artifact1');
+    expect(fixture.componentInstance.artifacts[0].url).toBe('URL1');
+
+    expect(fixture.componentInstance.artifacts[0].statuses.length).toBe(1);
+    expect(fixture.componentInstance.artifacts[0].statuses[0]).toEqual({status: 'DOWNLOAD_OK', timeStamp: '7/25/2019 12:48AM'});
+
+  });
+});
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.ts
new file mode 100644
index 0000000000..af9aef5c64
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.ts
@@ -0,0 +1,68 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import * as _ from 'lodash';
+import { DistributionService } from '../../distribution.service';
+
+// tslint:disable:no-string-literal
+
+@Component({
+    selector: 'app-distribution-component-artifact-table',
+    templateUrl: './distribution-component-artifact-table.component.html',
+    styleUrls: ['./distribution-component-artifact-table.component.less']
+})
+export class DistributionComponentArtifactTableComponent implements OnInit {
+
+    @ViewChild('statusTable', {}) table: any;
+
+    @Input() componentName: string;
+    @Input() rowDistributionID: string;
+    @Input() statusFilter: string;
+
+    public artifacts = [];
+
+    constructor(private distributionService: DistributionService) {
+    }
+
+    ngOnInit() {
+        this.artifacts = this.distributionService.getArtifactstByDistributionIDAndComponentsName(this.rowDistributionID, this.componentName);
+        if (this.statusFilter) {
+            this.artifacts.forEach(
+            (artifact) => {
+                artifact.statuses = _.filter(artifact.statuses, {status: this.statusFilter});
+            });
+        }
+    }
+
+    public getLatestArtifact(artifactName: string) {
+        const selectedArtifact = this.artifacts.filter((artifact) => artifact.name === artifactName);
+        if (selectedArtifact && selectedArtifact[0] && selectedArtifact[0]['statuses'] && selectedArtifact[0]['statuses'][0]) {
+            return selectedArtifact[0]['statuses'][0];
+        } else {
+            return null;
+        }
+    }
+
+    private copyToClipboard(urlToCopy: any) {
+
+        const inputForCopyToClipboard = document.getElementById('inputForCopyToClipboard') as HTMLInputElement;
+        inputForCopyToClipboard.value = urlToCopy;
+        /* Select the text field */
+        inputForCopyToClipboard.select();
+
+        /* Copy the text inside the text field */
+        document.execCommand('copy');
+
+    }
+
+    private generateDataTestID(preFix: string, componentName: string, artifactName: string, status?: string) {
+        if (!status) {
+            return preFix + componentName + '_' + artifactName;
+        } else {
+            return preFix + status + '_' + componentName + '_' + artifactName;
+        }
+    }
+
+    private expandRow(row: any) {
+        this.table.rowDetail.toggleExpandRow(row);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.html b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.html
new file mode 100644
index 0000000000..fa5a9ad7fb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.html
@@ -0,0 +1,47 @@
+<div >
+  <div class="distributionSummary" *ngIf="!isModal">
+    <span class= "rightVerticalSeperator titleSummaryFontSettings" data-tests-id="totalDistributionArtifactsLabel">Total Artifacts <span class="blue" data-tests-id="totalDistributionArtifactsValue">{{ getTotalArtifactsForDistributionID(rowDistributionID) }} </span></span>
+    <span class="blue rightVerticalSeperator" (click)="openModal(rowDistributionID,'NOTIFIED')" data-tests-id="totalDistributionNotifiedArtifactsLabel">Notified <span data-tests-id="totalDistributionNotifiedArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'NOTIFIED') }}</span></span>
+    <span class="blue rightVerticalSeperator" (click)="openModal(rowDistributionID,'DOWNLOAD_OK')" data-tests-id="totalDistributionDownloadedArtifactsLabel">Downloaded <span data-tests-id="totalDistributionDownloadedArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'DOWNLOAD_OK') }}</span></span>
+    <span class="blue rightVerticalSeperator" (click)="openModal(rowDistributionID,'DEPLOY_OK')" data-tests-id="totalDistributionDeployedArtifactsLabel">Deployed <span data-tests-id="totalDistributionDeployedArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'DEPLOY_OK') }}</span></span>
+    <span class="blue rightVerticalSeperator" (click)="openModal(rowDistributionID,'NOT_NOTIFIED')" data-tests-id="totalDistributionNotNotifiedArtifactsLabel">Not Notified <span data-tests-id="totalDistributionNotNotifiedArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'NOT_NOTIFIED') }}</span></span>
+    <span class="blue rightVerticalSeperator floatRight" (click)="openModal(rowDistributionID,'DEPLOY_ERROR')" data-tests-id="totalDistributionDeployErrorArtifactsLabel">Deploy Errors <span class="red" data-tests-id="totalDistributionDeployErrorArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'DEPLOY_ERROR') }}</span></span>
+    <span class="blue rightVerticalSeperator floatRight" (click)="openModal(rowDistributionID,'DOWNLOAD_ERROR ')" data-tests-id="totalDistributionDownloadErrorArtifactsLabel">Download Errors <span class="red" data-tests-id="totalDistributionDownloadErrorArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'DOWNLOAD_ERROR') }}</span></span>
+  </div>
+
+  <div class="distributionSummary" *ngIf="isModal">
+    <span data-tests-id="modalStatusLabel"><a>Status {{ statusFilter }} <span class="blue" data-tests-id="statusValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, statusFilter) }}</span></a></span>
+  </div>
+
+
+  <div class="componentShiftLeft" *ngFor="let component of components">
+    <div class="componentSummary" *ngIf="!isModal">
+      <svg-icon [clickable]="true" class="expand-collapse-icon"
+                [name]="isExpanded(component) ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                [size]="'medium'" [attr.data-tests-id]="generateExpandDataTestID(component)" (click)="expandRow(component)"></svg-icon>
+
+
+      <span class="rightVerticalSeperatorComponent titleSummaryFontSettings" [attr.data-tests-id]="generateTotalComponentArtifactsLabel(component, '')">{{ component }} <span class="blue" data-tests-id="totalComponentArtifactsValue">{{ getTotalArtifactsForDistributionID(rowDistributionID, component) }}</span></span>
+      <span class="rightVerticalSeperatorComponent titleSummaryFontSettings" [attr.data-tests-id]="generateTotalComponentArtifactsLabel(component, 'Notified')">Notified <span class="blue" data-tests-id="totalComponentNotifiedArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'NOTIFIED', component) }}</span></span>
+      <span class="rightVerticalSeperatorComponent titleSummaryFontSettings" [attr.data-tests-id]="generateTotalComponentArtifactsLabel(component, 'Downloaded')">Downloaded <span class="blue" data-tests-id="totalComponentDownloadedArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'DOWNLOAD_OK', component) }}</span></span>
+      <span class="rightVerticalSeperatorComponent titleSummaryFontSettings" [attr.data-tests-id]="generateTotalComponentArtifactsLabel(component, 'Deployed')">Deployed <span class="blue" data-tests-id="totalComponentDeployedArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'DEPLOY_OK', component) }}</span></span>
+      <span class="rightVerticalSeperatorComponent titleSummaryFontSettings" [attr.data-tests-id]="generateTotalComponentArtifactsLabel(component, 'NotNotified')">Not Notified <span class="blue" data-tests-id="totalComponentNotNotifiedArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'NOT_NOTIFIED', component) }}</span></span>
+      <span class="msoStatus" [ngClass]="{'red': getMSOStatus (rowDistributionID, component) === 'COMPONENT_DONE_ERROR', 'green': getMSOStatus (rowDistributionID, component) === 'COMPONENT_DONE_OK'}">{{ getMSOStatus (rowDistributionID, component) }}</span>
+      <span class="rightVerticalSeperatorComponent floatRight titleSummaryFontSettings" [attr.data-tests-id]="generateTotalComponentArtifactsLabel(component, 'DeployErrors')">Deploy Errors <span class="red" data-tests-id="totalComponentDeployErrorArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'DEPLOY_ERROR', component) }}</span></span>
+      <span class="rightVerticalSeperatorComponent floatRight titleSummaryFontSettings" [attr.data-tests-id]="generateTotalComponentArtifactsLabel(component, 'DownloadErrors')">Download Errors <span class="red" data-tests-id="totalComponentDownloadErrorArtifactsValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, 'DOWNLOAD_ERROR', component) }}</span></span>
+    </div>
+
+    <div class="componentSummary" *ngIf="isModal">
+      <svg-icon [clickable]="true" class="expand-collapse-icon"
+                [name]="isExpanded(component) ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                [size]="'medium'" [attr.data-tests-id]="generateExpandDataTestID(component+'_ForModal')" (click)="expandRow(component)"></svg-icon>
+      <span data-tests-id="modalComponentLabel"><a>{{ component }} <span class="blue" data-tests-id="modalComponentValue">{{ getLengthArtifactsForDistributionIDByStatus(rowDistributionID, statusFilter, component) }} </span></a></span>
+    </div>
+
+    <div *ngIf="isExpanded(component)">
+      <app-distribution-component-artifact-table [rowDistributionID]= rowDistributionID [componentName]=component
+                                               [statusFilter]="statusFilter"></app-distribution-component-artifact-table>
+    </div>
+  </div>
+</div>
+
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.less b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.less
new file mode 100644
index 0000000000..3eab18ca14
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.less
@@ -0,0 +1,66 @@
+.red {
+    color: red;
+}
+
+.green {
+  color: green;
+}
+
+.msoStatus {
+  padding-left: 5px;
+}
+
+.blue {
+  color: #009fdb;
+  font-family: OpenSans-Semibold, sans-serif;
+  font-size: 14px;
+}
+
+.rightVerticalSeperator {
+        border-right: 1px solid #d2d2d2;
+        padding-left: 5px;
+        padding-right: 5px;
+        cursor: pointer;
+}
+
+.rightVerticalSeperatorComponent {
+  border-right: 1px solid #d2d2d2;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.floatRight{
+    float: right;
+}
+
+.distributionSummary {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-color: #eaeaea;
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
+.componentSummary {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-color: #eaeaea;
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
+.componentShiftLeft {
+  margin-left: 15px;
+}
+
+.titleSummaryFontSettings {
+  color: #191919;
+  font-family: OpenSans-Regular, sans-serif;
+  font-size: 14px;
+}
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.spec.ts
new file mode 100644
index 0000000000..ff89b92fd8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.spec.ts
@@ -0,0 +1,47 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { SdcUiServices } from 'onap-ui-angular';
+import { ConfigureFn, configureTests } from '../../../../../../jest/test-config.helper';
+import { DistributionService } from '../distribution.service';
+import { DistributionComponentTableComponent } from './distribution-component-table.component';
+
+describe('DistributionComponentTableComponent', () => {
+  let fixture: ComponentFixture<DistributionComponentTableComponent>;
+  let distibutionServiceMock: Partial<DistributionService>;
+
+  const mockComponentsForDistribution = ['Consumer1', 'Consumer2'];
+
+  beforeEach(() => {
+
+    distibutionServiceMock = {
+      getComponentsByDistributionID: jest.fn().mockReturnValue(mockComponentsForDistribution),
+      getArtifactstByDistributionIDAndComponentsName: jest.fn(),
+      getArtifactsForDistributionIDAndComponentByStatus: jest.fn()
+    };
+
+    const configure: ConfigureFn = (testBed) => {
+      testBed.configureTestingModule({
+        declarations: [DistributionComponentTableComponent],
+        imports: [NgxDatatableModule],
+        schemas: [NO_ERRORS_SCHEMA],
+        providers: [
+          {provide: DistributionService, useValue: distibutionServiceMock},
+          {provide: SdcUiServices.ModalService, useValue: {}}
+        ],
+      });
+    };
+
+    configureTests(configure).then((testBed) => {
+      fixture = testBed.createComponent(DistributionComponentTableComponent);
+    });
+
+  });
+
+  it('Once the Distribution Component Table Component is created - components will keep the relevant components for a specific distributionID', async () => {
+    await fixture.componentInstance.ngOnInit();
+    expect(fixture.componentInstance.components.length).toBe(2);
+    expect(fixture.componentInstance.components[0]).toBe('Consumer1');
+    expect(fixture.componentInstance.components[1]).toBe('Consumer2');
+  });
+});
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.ts
new file mode 100644
index 0000000000..e3aaf9d639
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.ts
@@ -0,0 +1,104 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { ModalComponent } from 'onap-ui-angular/dist/modals/modal.component';
+import { DistributionComponent } from '../distribution.component';
+import { DistributionService } from '../distribution.service';
+
+@Component({
+  selector: 'app-distribution-component-table',
+  templateUrl: './distribution-component-table.component.html',
+  styleUrls: ['./distribution-component-table.component.less']
+})
+export class DistributionComponentTableComponent implements OnInit {
+
+  @Input() rowDistributionID: string;
+  @Input() isModal: boolean = false;
+  @Input() statusFilter: string;
+  public components = [];
+  private customModalInstance: ModalComponent;
+  private expanded = [];
+  constructor(private distributionService: DistributionService,
+              private modalService: SdcUiServices.ModalService) {
+  }
+
+  ngOnInit() {
+    this.initComponents();
+  }
+
+  private generateTotalComponentArtifactsLabel(componentName: any, status: string): string {
+    return 'total' + componentName + status + 'ArtifactsLabel';
+  }
+
+  private generateExpandDataTestID(componentName: string) {
+    return 'expandIcon_' + componentName;
+  }
+
+  private initComponents() {
+    this.components = this.distributionService.getComponentsByDistributionID(this.rowDistributionID);
+    this.components.map((component) => this.expanded.push({componentName: component, expanded: false}));
+  }
+
+  private getTotalArtifactsForDistributionID(distributionID: string, componentName?: string): number {
+    return this.distributionService.getArtifactstByDistributionIDAndComponentsName(distributionID, componentName).length;
+  }
+
+  private getLengthArtifactsForDistributionIDByStatus(distributionID: string, statusToSerach: string, componentName?: string): number {
+    if (componentName) {
+      return this.distributionService.getArtifactsForDistributionIDAndComponentByStatus(distributionID, statusToSerach, componentName).length;
+    } else {
+      return this.distributionService.getArtifactsForDistributionIDAndComponentByStatus(distributionID, statusToSerach).length;
+    }
+  }
+
+  private openModal(rowDistributionID: string, statusFilter: string) {
+
+    const title: string = 'Distribution by Status';
+    const attributeModalConfig = {
+      title,
+      size: 'sdc-xl',
+      type: SdcUiCommon.ModalType.custom,
+      buttons: [
+        {
+          id: 'close',
+          text: 'Close',
+          size: 'sm',
+          closeModal: true,
+          disabled: false,
+        }
+      ] as SdcUiCommon.IModalButtonComponent[]
+    };
+
+    this.customModalInstance = this.modalService.openCustomModal(attributeModalConfig, DistributionComponent, {
+        // inputs
+        rowDistributionID,
+        statusFilter,
+        isModal: true,
+    });
+  }
+
+  private expandRow(componentName: string) {
+    console.log('Should expand componentSummary for componentName = ' + componentName);
+    const selectedComponent = this.expanded.find((component) => component.componentName === componentName);
+    // tslint:disable:no-string-literal
+    const selectedComponentExpandedVal = selectedComponent['expanded'];
+    // this.expanded = !this.expanded;
+    for (const i in this.expanded) {
+      if (this.expanded[i].componentName === componentName) {
+        this.expanded[i].expanded = !this.expanded[i].expanded;
+        break; //Stop this loop, we found it!
+      }
+    }
+    const selectedComponentAfter = this.expanded.find((component) => component.componentName === componentName);
+    const selectedComponentExpandedValAfter = selectedComponentAfter['expanded'];
+  }
+
+  private isExpanded(componentName: string) {
+    const selectedComponent = this.expanded.find((component) => component.componentName === componentName);
+    return selectedComponent['expanded'];
+  }
+
+
+    private getMSOStatus(rowDistributionID: string, componentName: string): string {
+        return this.distributionService.getMSOStatus(rowDistributionID, componentName);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.html b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.html
new file mode 100644
index 0000000000..d0cacb054e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.html
@@ -0,0 +1,80 @@
+<div *ngIf="!isModal">
+    <div *ngIf="serviceHasDistibutions" class="w-sdc-distribution-view-header">
+        <div class="w-sdc-distribution-view-title" data-tests-id="DistributionsLabel">DISTRIBUTION <span class="blue-font" data-tests-id="totalArtifacts">[{{distributions.length}}]</span></div>
+        <div class="header-spacer"></div>
+        <input type="text" value="GeeksForGeeks" id="inputForCopyToClipboard" [ngStyle]="{'z-index': '-2', 'width': '25px'}">
+        <div class="top-search">
+            <input type="text"
+                   style="width: auto;"
+                   class="search-text"
+                   data-tests-id="searchTextbox"
+                   placeholder="Search"
+                   data-ng-model="searchBind"
+                   ng-model-options="{ debounce: 500 }"
+                   (keyup)="updateFilter($event)"/>
+        </div>
+        <div class="sprite-new refresh-btn" data-tests-id="refreshButton" (click)="refreshDistributions()" title="Refresh"></div>
+    </div>
+    <div class="w-sdc-distribution-view-header w-sdc-distribution-view-title" data-tests-id="noDistributionsLabel" *ngIf="!serviceHasDistibutions">No Distributions To Present</div>
+</div>
+
+<div *ngIf="serviceHasDistibutions">
+    <ngx-datatable
+            [columnMode]="'flex'"
+            [rowHeight]="'auto'"
+            [reorderable]="false"
+            [swapColumns]="false"
+            [scrollbarV]="false"
+            [rows]="distributions"
+            [sorts]="[{prop: 'timestamp', dir: 'desc'}]"
+
+            #distributionTable>
+        <ngx-datatable-row-detail [rowHeight]="'auto'">
+            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
+                <app-distribution-component-table [rowDistributionID]=row.distributionID [isModal]="isModal"
+                                                  [statusFilter]="statusFilter"></app-distribution-component-table>
+            </ng-template>
+        </ngx-datatable-row-detail>
+        <ngx-datatable-column [resizeable]="false" [flexGrow]="2" name="Distribution ID">
+            <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded" >
+                <div class="expand-collapse-cell">
+                   <a><svg-icon [clickable]="true" class="expand-collapse-icon"
+                              [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                              [size]="'medium'" (click)="expandRow(row, expanded)" [attr.data-tests-id]="generateDataTestID('expandIcon_', row.distributionID, isModal)"></svg-icon></a>
+
+                </div>
+                <div class="distributionIDBlock">
+                    <div class = "distributionRowValue" [attr.data-tests-id]="generateDataTestID('distID_', row.distributionID, isModal)">{{ row.distributionID }}</div>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" [flexGrow]="1" name="User id">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('userID_', row.distributionID)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="row.userId">{{ row.userId }}</div>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" [flexGrow]="1" name="Time[UTC]">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div class = "distributionRowValue" [attr.data-tests-id]="generateDataTestID('timeStamp_', row.distributionID)">{{ row.timestamp }} </div>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false"[flexGrow]="1" name="Status" >
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div>
+                    <span class="statusIcon">
+                        <svg-icon [clickable]="true" class="expand-collapse-icon"
+                        [name]= "getIconName(row.deployementStatus)" [mode]="'primary'"
+                        [size]="'medium'"></svg-icon>
+                    </span>
+                    <span class = "distributionRowValue" [attr.data-tests-id]="generateDataTestID('status_', row.distributionID)">
+                        {{ row.deployementStatus }}
+                    </span>
+                    <span class="btnMarkAsDistributed" (click)="markDeploy(row.distributionID, row.deployementStatus)">
+                            <svg-icon [clickable]="true" [name]= "'success'" [mode]="getIconMode(row.deployementStatus)"
+                                      [size]="'medium'"></svg-icon>
+                    </span>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
new file mode 100644
index 0000000000..b630881fdc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
@@ -0,0 +1,92 @@
+:host ::ng-deep {
+  .ngx-datatable {
+    > div {
+      min-height: 500px;
+      datatable-body {
+        max-height: max-content;
+      }
+    }
+  }
+}
+
+.w-sdc-distribution-view-header {
+  display: flex;
+  -webkit-justify-content: space-between;
+  margin: 0 25px 5px 40px;
+
+  .header-spacer {
+    flex-grow: 5;
+  }
+
+  .w-sdc-distribution-view-title{
+    color: #191919;
+    font-family: OpenSans-Regular, sans-serif;
+    font-size: 14px;
+    line-height: 30px;
+
+
+    .blue-font {
+      color: #009fdb;
+      font-family: OpenSans-Semibold, sans-serif;
+      font-size: 14px;
+    }
+  }
+
+}
+
+.distribution-page {
+  max-height: 150px;
+}
+
+  .distributionIDBlock {
+    display: inline-block;
+  }
+
+  .expand-collapse-cell {
+    display: inline-block;
+  }
+
+  .statusIcon {
+    display: inline-block;
+    margin-right: 10px;
+  }
+
+  .btnMarkAsDistributed {
+    float: right;
+    background-color: #E5F3FF;
+    border: 1px solid #8DCCD5;
+    width: 55px;
+    height: 21px;
+    text-align: center;
+  }
+
+  .distributionRowContainer{
+    background-color: #eaeaea;
+    text-align: center;
+  }
+
+  .distributionRowLabel {
+    overflow: hidden;
+    padding-top: 10px;
+    color: #000000;
+    font-family: OpenSans-Semibold, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  .distributionRowValue {
+    color: #263d4d;
+    font-family: OpenSans-Regular, sans-serif;
+    font-size: 14px;
+  }
+
+.ellipsisCell {
+  width: 92%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.spec.ts
new file mode 100644
index 0000000000..e6c9c239e1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.spec.ts
@@ -0,0 +1,92 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { SdcUiServices } from 'onap-ui-angular';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { WorkspaceService } from '../workspace.service';
+import { DistributionComponent } from './distribution.component';
+import { DistributionService } from './distribution.service';
+import {EventListenerService} from "../../../../services/event-listener-service";
+
+describe('DistributionComponent', () => {
+  let fixture: ComponentFixture<DistributionComponent>;
+  let distibutionServiceMock: Partial<DistributionService>;
+  let workspaceServiceMock: Partial<WorkspaceService>;
+  let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+  let authenticationServiceMock: Partial <AuthenticationService>;
+  let eventListenerService: Partial <EventListenerService>;
+
+  const mockDistributionListFromService = [
+    {
+      deployementStatus: 'Distributed',
+      distributionID: '1',
+      timestamp: '2019-07-21 08:37:02.834 UTC',
+      userId: 'Aretha Franklin(op0001)'
+    }, {
+      deployementStatus: 'Distributed',
+      distributionID: '2',
+      timestamp: '2019-07-21 09:37:02.834 UTC',
+      userId: 'Aretha Franklin(op0001)'
+    }];
+
+  beforeEach(() => {
+
+    distibutionServiceMock = {
+      initDistributionsList: jest.fn(),
+      getDistributionList: jest.fn().mockReturnValue(mockDistributionListFromService),
+      initDistributionsStatusForDistributionID: jest.fn()
+    };
+
+    const componentMetadata = new ComponentMetadata();
+    componentMetadata.uuid = '111';
+
+    workspaceServiceMock = {
+      metadata : componentMetadata
+    };
+
+    authenticationServiceMock = {
+      getLoggedinUser: jest.fn().mockReturnValue({role: 'designer'})
+    };
+
+    eventListenerService = {
+      registerObserverCallback: jest.fn(),
+      unRegisterObserver: jest.fn()
+    }
+
+    loaderServiceMock = {
+      activate: jest.fn(),
+      deactivate: jest.fn()
+    };
+
+    const configure: ConfigureFn = (testBed) => {
+      testBed.configureTestingModule({
+        declarations: [DistributionComponent],
+        imports: [NgxDatatableModule],
+        schemas: [NO_ERRORS_SCHEMA],
+        providers: [
+          {provide: DistributionService, useValue: distibutionServiceMock},
+          {provide: WorkspaceService, useValue: workspaceServiceMock},
+          {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock},
+          {provide: AuthenticationService, useValue: authenticationServiceMock},
+          {provide: EventListenerService, useValue: eventListenerService}
+        ],
+      });
+    };
+
+    configureTests(configure).then((testBed) => {
+      fixture = testBed.createComponent(DistributionComponent);
+    });
+
+  });
+
+  it('Once the Distribution Component is created - distributionsResponseFromServer save all the distributions from the Service', async () => {
+    fixture.componentInstance.componentUuid = 'componentUid';
+    fixture.componentInstance.rowDistributionID = null;
+    fixture.componentInstance.isModal = false;
+
+    await fixture.componentInstance.ngOnInit();
+    expect(fixture.componentInstance.distributions.length).toBe(2);
+  });
+});
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.ts
new file mode 100644
index 0000000000..ca1b6292d3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.ts
@@ -0,0 +1,117 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { SdcUiCommon, SdcUiServices } from 'onap-ui-angular';
+import { EventListenerService } from '../../../../services/event-listener-service';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { WorkspaceService } from '../workspace.service';
+import { DistributionService } from './distribution.service';
+import { EVENTS } from '../../../../utils/constants';
+
+@Component({
+  selector: 'distribution',
+  templateUrl: './distribution.component.html',
+  styleUrls: ['../../../../../assets/styles/table-style.less', './distribution.component.less']
+})
+export class DistributionComponent implements OnInit {
+
+  @ViewChild('distributionTable', { }) table: any;
+
+  @Input() isModal: boolean = false;
+  @Input() statusFilter: string;
+  @Input() rowDistributionID: string;
+  public componentUuid: string;
+  public distributions = [];
+  private expanded: any = {};
+  private serviceHasDistibutions: boolean = false;
+  private readonly uniqueId: string;
+  private  userRole: string;
+
+  constructor(private workspaceService: WorkspaceService,
+              private distributionService: DistributionService,
+              private loaderService: SdcUiServices.LoaderService,
+              private authService: AuthenticationService,
+              private eventListenerService: EventListenerService) {
+    this.componentUuid = this.workspaceService.metadata.uuid;
+    this.uniqueId = this.workspaceService.metadata.uniqueId;
+  }
+
+
+
+  async ngOnInit() {
+    this.userRole = this.authService.getLoggedinUser().role;
+    this.eventListenerService.registerObserverCallback(EVENTS.ON_DISTRIBUTION_SUCCESS, async () => {
+      await this.refreshDistributions();
+    });
+    await this.initDistributions(this.componentUuid, this.rowDistributionID);
+  }
+
+  ngOnDestroy(): void {
+    this.eventListenerService.unRegisterObserver(EVENTS.ON_DISTRIBUTION_SUCCESS);
+  }
+
+  async initDistributions(componentUuid: string, specificDistributionID?: string)  {
+    this.loaderService.activate();
+    await this.distributionService.initDistributionsList(componentUuid);
+    this.distributions = this.distributionService.getDistributionList();
+    this.distributions.length > 0 ? this.serviceHasDistibutions = true : this.serviceHasDistibutions = false;
+    if (specificDistributionID) {
+      this.distributions = this.distributionService.getDistributionList(specificDistributionID);
+    }
+    this.loaderService.deactivate();
+  }
+
+  getIconName(rowStatus: string ) {
+    if (rowStatus === 'Distributed') {
+      return 'distributed';
+    }
+    if (rowStatus === 'Deployed') {
+      return 'v-circle';
+    }
+  }
+
+  getIconMode(rowStatus: string) {
+    if (rowStatus === 'Distributed') {
+      return 'primary';
+    }
+    if (rowStatus === 'Deployed') {
+      return 'secondary';
+    }
+  }
+
+  private async markDeploy(distributionID: string, status: string) {
+    if (status === 'Distributed') {
+      console.log('Should send MarkDeploy POST Request ServiceID:' + this.uniqueId + ' DISTID:' + distributionID);
+      await this.distributionService.markDeploy(this.uniqueId, distributionID);
+      this.refreshDistributions();
+    }
+  }
+
+  private async refreshDistributions() {
+    await this.initDistributions(this.componentUuid);
+  }
+
+  private updateFilter(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    this.distributions = this.distributionService.getDistributionList().filter((distribution: any[]) => {
+      return !val ||
+          // tslint:disable:no-string-literal
+          distribution['distributionID'].toLowerCase().indexOf(val) !== -1;
+    });
+  }
+
+  private generateDataTestID(preFix: string, distributionID: string, isModal?: boolean ): string {
+    if (isModal) {
+      return preFix + distributionID.substring(0, 5) + '_Modal';
+    } else {
+      return preFix + distributionID.substring(0, 5);
+    }
+  }
+
+  private async expandRow(row: any, expanded: boolean) {
+    if (!expanded) {
+      await this.distributionService.initDistributionsStatusForDistributionID(row.distributionID);
+    }
+    this.table.rowDetail.toggleExpandRow(row);
+  }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.module.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.module.ts
new file mode 100644
index 0000000000..723a6d8c0a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.module.ts
@@ -0,0 +1,34 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+import { DistributionComponentArtifactTableComponent } from './distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component';
+import { DistributionComponentTableComponent } from './distribution-component-table/distribution-component-table.component';
+import { DistributionComponent } from './distribution.component';
+import { DistributionService } from './distribution.service';
+
+@NgModule({
+    declarations: [
+        DistributionComponent,
+        DistributionComponentTableComponent,
+        DistributionComponentArtifactTableComponent,
+    ],
+    imports: [
+        // TranslateModule,
+        CommonModule,
+        SdcUiComponentsModule,
+        NgxDatatableModule,
+    ],
+    exports: [
+        DistributionComponent,
+        DistributionComponentTableComponent
+    ],
+    entryComponents: [
+        DistributionComponent,
+        DistributionComponentTableComponent,
+        DistributionComponentArtifactTableComponent
+    ],
+    providers: [DistributionService]
+})
+export class DistributionModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.service.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.service.ts
new file mode 100644
index 0000000000..ed6791c5c1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.service.ts
@@ -0,0 +1,233 @@
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { tap } from 'rxjs/operators';
+import { Distribution } from '../../../../models/distribution';
+import { ISdcConfig, SdcConfigToken } from '../../../config/sdc-config.config';
+
+@Injectable()
+export class DistributionService {
+    protected baseUrl;
+    private distributionList = [];
+    private distributionStatusesMap = {};
+
+    // tslint:disable:no-string-literal
+
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+        this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
+    }
+
+    // Once the distribution page is loaded or when the user wants to refresh the list
+     async initDistributionsList(componentUuid: string): Promise<object> {
+        const distributionsListURL = this.baseUrl + 'services/' + componentUuid + '/distribution';
+        const res = this.http.get<Distribution[]>(distributionsListURL).pipe(tap( (result) => {
+            this.distributionList = result['distributionStatusOfServiceList'];
+            this.insertDistrbutionsToMap();
+        }  ));
+        return res.toPromise();
+    }
+
+    // Once the user click on the relevant distribution ID in the distribution table (open and close)
+    async initDistributionsStatusForDistributionID(distributionID: string): Promise<object> {
+        const distributionStatus = this.baseUrl + 'services/distribution/' + distributionID;
+        const res = this.http.get<object>(distributionStatus).pipe(tap( (result) => {
+            this.insertDistributionStatusToDistributionsMap(distributionID, result['distributionStatusList']);
+        }  ));
+        return res.toPromise();
+    }
+
+    public getDistributionList(specificDistributionID?: string) {
+        if (specificDistributionID) {
+            return this.distributionList.filter((distribution) => {
+                return distribution['distributionID'] === specificDistributionID;
+            });
+        } else {
+            return this.distributionList;
+        }
+    }
+
+    public getComponentsByDistributionID(distributionID: string) {
+        const components = [];
+        const distributionStatusMap = this.getStatusMapForDistributionID(distributionID);
+        if (distributionStatusMap) {
+            distributionStatusMap.forEach((component) => components.push(component.componentID));
+        }
+        return components;
+    }
+
+    // get array of artifacts per distributionID w/o componentName, sliced by artifact status
+    public getArtifactsForDistributionIDAndComponentByStatus(distributionID: string, statusToSearch: string, componentName?: string) {
+        const filteredArtifactsByStatus = [];
+
+        if (componentName) {
+            this.getArtifactstByDistributionIDAndComponentsName(distributionID, componentName).forEach ( (artifact) => {
+                if (this.artifactStatusHasMatch(artifact, statusToSearch)) {
+                    filteredArtifactsByStatus.push(artifact);
+                }
+            } );
+        } else {
+            this.getArtifactstByDistributionIDAndComponentsName(distributionID).forEach ( (artifact) => {
+                if (this.artifactStatusHasMatch(artifact, statusToSearch)) {
+                    filteredArtifactsByStatus.push(artifact);
+                }
+            } );
+        }
+        return filteredArtifactsByStatus;
+    }
+
+    public getArtifactstByDistributionIDAndComponentsName(distributionID: string, componentName?: string): any[] {
+        const artifacts = [];
+        if (this.getStatusMapForDistributionID(distributionID)) {
+            if (componentName) {
+                if (this.getStatusMapForDistributionID(distributionID).filter((component) => component.componentID === componentName).length > 0) {
+                    const artifactsArr = this.getStatusMapForDistributionID(distributionID).filter((component) => component.componentID === componentName)[0]['artifacts']
+                    if (artifactsArr.length > 0) {
+                        artifactsArr.forEach((artifact) => {
+                            const artifactObj = {
+                                url: artifact.artifactUrl,
+                                name: artifact.artifactName,
+                                statuses: artifact.statuses
+                            };
+                            artifacts.push(artifactObj);
+                        });
+                    }
+                }
+            } else {
+                const components = this.getComponentsByDistributionID(distributionID);
+                components.forEach((componentName) => {
+                    if (this.getStatusMapForDistributionID(distributionID).filter((component) => component.componentID === componentName).length > 0) {
+                        const artifactsArr = this.getStatusMapForDistributionID(distributionID).filter((component) => component.componentID === componentName)[0]['artifacts']
+                        if (artifactsArr.length > 0) {
+                            artifactsArr.forEach((artifact) => {
+                                const artifactObj = {
+                                    url: artifact.artifactUrl,
+                                    name: artifact.artifactName,
+                                    statuses: artifact.statuses
+                                };
+                                artifacts.push(artifactObj);
+                            });
+                        }
+                    }
+                });
+            }
+        }
+        return artifacts;
+    }
+
+    public getStatusMapForDistributionID(distributionID: string) {
+        return this.distributionStatusesMap[distributionID];
+    }
+
+    public markDeploy(uniqueId: string, distributionID: string): Promise<object> {
+        const distributionStatus = this.baseUrl + 'services/' + uniqueId + '/distribution/' + distributionID + '/markDeployed';
+        const res = this.http.post<object>(distributionStatus, {}).pipe(tap( (result) => {
+            console.log(result);
+        }  ));
+        return res.toPromise();
+    }
+
+    public getMSOStatus(distributionID: string, componentName: string): string {
+        const msoStatus = this.distributionStatusesMap[distributionID].filter((component) => component.componentID === componentName)[0].msoStatus;
+        return msoStatus ? msoStatus : '';
+    }
+
+    private artifactStatusHasMatch(artifact: any, statusToSerach: string) {
+        for (let i = 0; i < artifact.statuses.length; i++) {
+            if (artifact.statuses[i].status === statusToSerach) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private insertDistributionStatusToDistributionsMap(distributionID: string, distributionStatusMapResponseFromServer: object[]) {
+
+        // // Clear the Distribution ID array - to avoid statuses duplications
+        const distribution = this.distributionStatusesMap[distributionID];
+        distribution.length = 0;
+
+        // Sort the response of statuses from Server, so it will be easy to pop the latest status when it will be required
+        const sortedResponseByTimeStamp = distributionStatusMapResponseFromServer.sort((a, b) => b['timestamp'] - a['timestamp'])
+
+        sortedResponseByTimeStamp.map((distributionStatus) => {
+            const formattedDate = this.formatDate(distributionStatus['timestamp']);
+
+            // if (distributionStatus['url'] === null) {
+            //     distributionStatus['url'] = "";
+            // }
+
+            const detailedArtifactStatus = {
+                componentID: distributionStatus['omfComponentID'],
+                artifactName: distributionStatus['url']? distributionStatus['url'].split('/').pop() : '',
+                url: distributionStatus['url'],
+                time: distributionStatus['timestamp'],
+                status: distributionStatus['status'],
+            };
+
+
+
+            // Add Component to this.distributionStatusesMap in case not exist.
+            let componentPosition = _.findIndex(distribution, {componentID: detailedArtifactStatus.componentID})
+
+            if (componentPosition === -1) {
+                this.addComponentIdToDistributionStatusMap(distributionID, detailedArtifactStatus.componentID);
+                componentPosition = distribution.length - 1;
+            }
+
+            const component = distribution[componentPosition];
+
+
+            // Add Artifact to this.distributionStatusesMap[componentID] in case not exist.
+            let artifactPosition = _.findIndex(component.artifacts, {artifactUrl: detailedArtifactStatus.url})
+
+            if (artifactPosition === -1) {
+                this.addArtifactToComponentId(distributionID, componentPosition, detailedArtifactStatus.artifactName, detailedArtifactStatus.url);
+                artifactPosition = component.artifacts.length - 1;
+            }
+
+
+            // Add status to relevat artifact in relevent componentID.
+            if (detailedArtifactStatus.url) {
+                // Case where there is a url -> should add its status
+                component.artifacts[artifactPosition].statuses.push({
+                    timeStamp: detailedArtifactStatus.time,
+                    status: detailedArtifactStatus.status
+                });
+            } else {
+                // Should update the Component -> status from MSO
+                this.distributionStatusesMap[distributionID][componentPosition].msoStatus = detailedArtifactStatus.status;
+            }
+
+
+        });
+    }
+
+    private addComponentIdToDistributionStatusMap(distributionID: string, componentIDValue: string) {
+        this.distributionStatusesMap[distributionID].push({
+            componentID: componentIDValue,
+            msoStatus: null,
+            artifacts: []
+            });
+    }
+
+    private addArtifactToComponentId(distributionID: string, componentPosition: number, artifactNameValue: string, artifactURLValue: any) {
+        if (artifactNameValue) {
+            this.distributionStatusesMap[distributionID][componentPosition].artifacts.push({
+                artifactName: artifactNameValue,
+                artifactUrl: artifactURLValue,
+                statuses: []
+            });
+        }
+    }
+
+    private insertDistrbutionsToMap() {
+        this.distributionList.map((distribution) => this.distributionStatusesMap[distribution.distributionID] = []);
+    }
+
+    private formatDate(epochTime: string) {
+        const intEpochTime = new Date(parseInt(epochTime, 10));
+        const amOrPm = (intEpochTime.getHours() + 24) % 24 > 12 ? 'PM' : 'AM';
+        const formattedDate = (intEpochTime.getMonth() + 1) + '/' + intEpochTime.getDate() + '/' +  intEpochTime.getFullYear() + ' ' + intEpochTime.getHours() + ':' +
+            intEpochTime.getMinutes() + amOrPm;
+        return formattedDate;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/information-artifact/__snapshots__/informational-artifact-page.spec.ts.snap b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/__snapshots__/informational-artifact-page.spec.ts.snap
new file mode 100644
index 0000000000..1a19b36cfb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/__snapshots__/informational-artifact-page.spec.ts.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`informational artifacts page should match current snapshot of informational artifact pages component 1`] = `
+<information-artifact-page
+  addOrUpdateArtifact={[Function Function]}
+  artifactsService={[Function Object]}
+  deleteArtifact={[Function Function]}
+  store={[Function Store]}
+  table={[Function DatatableComponent]}
+  workspaceService={[Function Object]}
+>
+  <div
+    class="information-artifact-page"
+  >
+    <svg-icon-label
+      class="add-artifact-btn"
+    />
+    <ngx-datatable
+      class="ngx-datatable"
+      columnmode="flex"
+    >
+      <div
+        visibilityobserver=""
+      >
+        
+        <datatable-body
+          class="datatable-body"
+        >
+          <datatable-selection>
+            
+            
+            
+          </datatable-selection>
+        </datatable-body>
+        
+      </div>
+    </ngx-datatable>
+  </div>
+</information-artifact-page>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.html b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.html
new file mode 100644
index 0000000000..cff33258ae
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.html
@@ -0,0 +1,82 @@
+<div class="information-artifact-page">
+    <svg-icon-label class="add-artifact-btn" [clickable]="true" [mode]="'primary'" [labelPlacement]="'right'"
+                    [label]="'Add'" [name]="'plus'" [testId]="'add-information-artifact-button'"
+                    (click)="addOrUpdateArtifact()"></svg-icon-label>
+    <ngx-datatable
+            columnMode="flex"
+            [headerHeight]="40"
+            [reorderable]="false"
+            [swapColumns]="false"
+            [rows]="informationArtifacts$ | async"
+            [footerHeight]="'undefined'"
+            [sorts]="[{prop: 'artifactDisplayName', dir: 'desc'}]"
+            #informationArtifactsTable
+            (activate)="onActivate($event)">
+        <ngx-datatable-row-detail [rowHeight]="80">
+            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
+                <div [attr.data-tests-id]="row.artifactDisplayName+'Description'">{{row.description}}</div>
+            </ng-template>
+        </ngx-datatable-row-detail>
+        <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="3"
+                              [prop]="'artifactDisplayName'">
+            <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
+                <div class="expand-collapse-cell">
+                    <svg-icon [clickable]="true" class="expand-collapse-icon"
+                              [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                              [size]="'medium'"></svg-icon>
+                    <span [attr.data-tests-id]="'artifactDisplayName_' + row.artifactDisplayName">{{row.artifactDisplayName }}</span>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" name="Type" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{row.artifactType}}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" name="Version" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{ row.artifactVersion }}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" name="UUID" [flexGrow]="2">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{ row.artifactUUID }}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div class="download-artifact-button">
+                    <svg-icon class="action-icon" *ngIf="!row.isThirdParty()" [mode]="'primary2'"
+                              [disabled]="isViewOnly$ | async" [name]="'edit-o'"
+                              testId="edit_{{row.artifactDisplayName}}" clickable="true" size="medium"
+                              (click)="addOrUpdateArtifact(row)"></svg-icon>
+                    <svg-icon class="action-icon" *ngIf="!row.isThirdParty()" [mode]="'primary2'"
+                              [disabled]="isViewOnly$ | async" [name]="'trash-o'"
+                              testId="delete_{{row.artifactDisplayName}}" clickable="true" size="medium" (click)="deleteArtifact(row)"></svg-icon>
+                    <download-artifact class="action-icon" [disabled]="isViewOnly$ | async" [artifact]="row"
+                                       [componentId]="componentId"
+                                       [componentType]="componentType"
+                                       testId="download_{{row.artifactDisplayName}}"></download-artifact>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-footer>
+            <ng-template ngx-datatable-footer-template>
+                <div class="add-artifacts-dynamic-btn-list">
+                    <sdc-button *ngFor="let artifact of informationArtifactsAsButtons$ | async"
+                                class="add-artifacts-dynamic-btn"
+                                testId="add_artifact_{{artifact.artifactDisplayName}}"
+                                [type]="'secondary'"
+                                [size]="'xx-large'"
+                                [text]="'ADD ' + artifact.artifactDisplayName"
+                                [icon_name]="'plus-circle-o'"
+                                [icon_mode] = "'secondary'"
+                                [icon_position]="'left'"
+                                (click)="addOrUpdateArtifact(artifact)">
+                    </sdc-button>
+                </div>
+            </ng-template>
+        </ngx-datatable-footer>
+    </ngx-datatable>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.less b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.less
new file mode 100644
index 0000000000..b69e511f70
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.less
@@ -0,0 +1,29 @@
+.information-artifact-page {
+
+  .add-artifact-btn {
+    display: flex;
+    cursor: pointer;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+  }
+  .download-artifact-button {
+    display: flex;
+    justify-content: center;
+
+    .action-icon{
+      margin-right: 10px;
+    }
+  }
+
+  .add-artifacts-dynamic-btn-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin: 20px 0px;
+    .add-artifacts-dynamic-btn{
+      width: 350px;
+      margin-top: 15px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.ts b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.ts
new file mode 100644
index 0000000000..a6804a43c6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.ts
@@ -0,0 +1,69 @@
+import {Component, OnInit, ViewChild} from "@angular/core";
+import {WorkspaceService} from "../workspace.service";
+import {SdcUiCommon, SdcUiComponents, SdcUiServices} from "onap-ui-angular";
+import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
+import * as _ from "lodash";
+import {ArtifactGroupType, ArtifactType} from "../../../../utils/constants";
+import {ArtifactsService} from "../../../components/forms/artifacts-form/artifacts.service";
+import {DeleteArtifactAction, GetArtifactsByTypeAction} from "../../../store/actions/artifacts.action";
+import {Select, Store} from "@ngxs/store";
+import {Observable} from "rxjs/index";
+import {ArtifactsState} from "../../../store/states/artifacts.state";
+import {map} from "rxjs/operators";
+import {WorkspaceState} from "../../../store/states/workspace.state";
+import {ArtifactModel} from "../../../../models/artifacts";
+
+@Component({
+    selector: 'information-artifact-page',
+    templateUrl: './information-artifact-page.component.html',
+    styleUrls: ['./information-artifact-page.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class InformationArtifactPageComponent implements OnInit {
+
+    public componentId: string;
+    public componentType: string;
+    public informationArtifacts$: Observable<ArtifactModel[]>;
+    public informationArtifactsAsButtons$: Observable<ArtifactModel[]>;
+    @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
+    @ViewChild('informationArtifactsTable') table: any;
+
+    constructor(private workspaceService: WorkspaceService,
+                private artifactsService: ArtifactsService,
+                private store: Store) {
+    }
+
+    ngOnInit(): void {
+        this.componentId = this.workspaceService.metadata.uniqueId;
+        this.componentType = this.workspaceService.metadata.componentType;
+
+        this.store.dispatch(new GetArtifactsByTypeAction({
+            componentType: this.componentType,
+            componentId: this.componentId,
+            artifactType: ArtifactGroupType.INFORMATION
+        }));
+
+        let artifacts = this.store.select(ArtifactsState.getArtifactsByType).pipe(map(filterFn => filterFn(ArtifactType.INFORMATION)));
+        this.informationArtifacts$ = artifacts.pipe(map(artifacts => _.filter(artifacts, (artifact) => {
+            return artifact.esId;
+        })));
+
+        this.informationArtifactsAsButtons$ = artifacts.pipe(map(artifacts => _.filter(artifacts, (artifact) => {
+            return !artifact.esId;
+        })));
+    }
+
+    onActivate(event) {
+        if (event.type === 'click') {
+            this.table.rowDetail.toggleExpandRow(event.row);
+        }
+    }
+
+    public addOrUpdateArtifact = (artifact: ArtifactModel, isViewOnly?: boolean) => {
+        this.artifactsService.openArtifactModal(this.componentId, this.componentType, artifact, ArtifactGroupType.INFORMATION, isViewOnly);
+    }
+
+    public deleteArtifact = (artifactToDelete) => {
+      this.artifactsService.deleteArtifact(this.componentType, this.componentId, artifactToDelete)
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.module.ts b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.module.ts
new file mode 100644
index 0000000000..5eb9e5851b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.module.ts
@@ -0,0 +1,30 @@
+import {CommonModule} from "@angular/common";
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {UiElementsModule} from "../../../components/ui/ui-elements.module";
+import {InformationArtifactPageComponent} from "./information-artifact-page.component";
+import {ArtifactFormModule} from "../../../components/forms/artifacts-form/artifact-form.module";
+import {ArtifactsService} from "../../../components/forms/artifacts-form/artifacts.service";
+
+@NgModule({
+    declarations: [
+        InformationArtifactPageComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        NgxDatatableModule,
+        UiElementsModule,
+        ArtifactFormModule
+    ],
+    exports: [
+        InformationArtifactPageComponent
+    ],
+    entryComponents: [
+        InformationArtifactPageComponent
+    ],
+    providers:[ArtifactsService]
+})
+export class InformationArtifactPageModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/information-artifact/informational-artifact-page.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/informational-artifact-page.spec.ts
new file mode 100644
index 0000000000..10fd14739b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/information-artifact/informational-artifact-page.spec.ts
@@ -0,0 +1,77 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {WorkspaceService} from "../workspace.service";
+import {SdcUiServices} from "onap-ui-angular";
+import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
+import {Observable} from "rxjs/Observable";
+import {ComponentMetadata} from "../../../../models/component-metadata";
+import 'rxjs/add/observable/of';
+import {NgxsModule, Store} from "@ngxs/store";
+import {ArtifactsState} from "../../../store/states/artifacts.state";
+import {InformationArtifactPageComponent} from "./information-artifact-page.component";
+import { informationalArtifactsMock} from "../../../../../jest/mocks/artifacts-mock";
+import {ArtifactsService} from "../../../components/forms/artifacts-form/artifacts.service";
+
+describe('informational artifacts page', () => {
+
+    let fixture: ComponentFixture<InformationArtifactPageComponent>;
+    let topologyTemplateServiceMock: Partial<TopologyTemplateService>;
+    let workspaceServiceMock: Partial<WorkspaceService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+    let store: Store;
+
+    beforeEach(
+        async(() => {
+
+            topologyTemplateServiceMock = {
+                getArtifactsByType: jest.fn().mockImplementation((componentType, id, artifactType) => Observable.of(informationalArtifactsMock))
+            };
+            workspaceServiceMock = {metadata: <ComponentMetadata>{uniqueId: 'service_unique_id', componentType: 'SERVICE'}}
+
+            loaderServiceMock = {
+                activate : jest.fn(),
+                deactivate: jest.fn()
+            }
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [InformationArtifactPageComponent],
+                    imports: [NgxDatatableModule, NgxsModule.forRoot([ArtifactsState])],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: WorkspaceService, useValue: workspaceServiceMock},
+                        {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock},
+                        {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock },
+                        {provide: ArtifactsService, useValue: {}},
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(InformationArtifactPageComponent);
+                store = testBed.get(Store);
+            });
+        })
+    );
+
+    it('should match current snapshot of informational artifact pages component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should see exactly 3 informational artifacts and six buttons to add artifact by template', () => {
+        fixture.componentInstance.ngOnInit();
+        fixture.componentInstance.informationArtifacts$.subscribe((artifacts)=> {
+            expect(artifacts.length).toEqual(3);
+        })
+        fixture.componentInstance.informationArtifactsAsButtons$.subscribe((artifacts)=> {
+            expect(artifacts.length).toEqual(6);
+        })
+
+        store.selectOnce(state => state.artifacts.artifacts).subscribe(artifacts => {
+            expect(artifacts.length).toEqual(9);
+        });
+    })
+
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.html b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.html
new file mode 100644
index 0000000000..f496e64c17
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.html
@@ -0,0 +1,22 @@
+<div class="capabilities-properties-table">
+    <ngx-datatable #componentsMetadataTable
+        columnMode="flex" 
+        [headerHeight]="40"  
+        [rowHeight]="35" 
+        [rows]="capabilitiesProperties"
+        [sorts]="[{prop: 'name', dir: 'desc'}]">
+        <ngx-datatable-column *ngFor="let column of capabilityPropertiesColumns" [ngSwitch]="column.prop" [resizeable]="false" 
+            [draggable]="false" name={{column.name}} [flexGrow]="column.flexGrow">
+            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'name'">
+                <a data-tests-id="row[column.prop]" sdc-tooltip [tooltip-text]="row[column.prop]" (click)="updateProperty(row)">{{row[column.prop]}}</a>
+            </ng-template>
+            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'schema'">
+                <span *ngIf="row[column.prop] && row[column.prop].property" data-tests-id="row[column.prop].property.type" 
+                sdc-tooltip [tooltip-text]="row[column.prop].property.type">{{row[column.prop].property.type}}</span>
+            </ng-template>
+            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchDefault>
+                <span data-tests-id="row[column.prop]" sdc-tooltip [tooltip-text]="row[column.prop]" [tooltip-placement]="3">{{row[column.prop]}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.less b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.less
new file mode 100644
index 0000000000..007f509538
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.less
@@ -0,0 +1,9 @@
+
+:host ::ng-deep {
+    .ngx-datatable  {
+        > div {
+            min-height: auto !important;
+        }
+        
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.ts
new file mode 100644
index 0000000000..2a1a16e265
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities-properties/capabilities-properties.ts
@@ -0,0 +1,33 @@
+
+import { ViewChild, Input, OnInit, Component } from "@angular/core";
+import {SdcUiServices} from "onap-ui-angular";
+import { ModalsHandler } from "../../../../../../utils/modals-handler";
+import { WorkspaceService } from "../../../workspace.service";
+import { PropertyModel } from "../../../../../../models/properties";
+
+
+@Component({
+    selector: 'capabilities-properties',
+    templateUrl: './capabilities-properties.html',
+    styleUrls: ['./capabilities-properties.less', '../../../../../../../assets/styles/table-style.less']
+})
+export class CapabilitiesPropertiesComponent {
+    @Input() public capabilitiesProperties: Array<PropertyModel> = [];
+
+    private capabilityPropertiesColumns = [
+        {name: 'Name', prop: 'name', flexGrow: 1},
+        {name: 'Type', prop: 'type', flexGrow: 1},
+        {name: 'Schema', prop: 'schema', flexGrow: 1},
+        {name: 'Description', prop: 'description', flexGrow: 1},
+    ];
+    constructor(private modalsHandler: ModalsHandler,
+                private workspaceService: WorkspaceService) {}
+
+    private updateProperty(property: PropertyModel): void {
+        _.forEach(this.capabilitiesProperties, (prop: PropertyModel) => {
+            prop.readonly = true;
+        });
+        this.modalsHandler.openEditPropertyModal(property, this.workspaceService.metadata, this.capabilitiesProperties, false, 'component',
+        this.workspaceService.metadata.uniqueId);
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.html b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.html
new file mode 100644
index 0000000000..819eb84849
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.html
@@ -0,0 +1,59 @@
+<div class="capabilities-table">
+    <div class="expand-collapse-all-rows">
+        <svg-icon class="selected-all-capabilities" 
+            [mode]="'primary'"  [clickable]="true" [name]="'expand-o'"
+                [size]="'medium'" (click)="capabilitiesTable.rowDetail.expandAllRows()">
+        </svg-icon>
+         <svg-icon class="unselected-all-capabilities"
+            [mode]="'primary'"  [clickable]="true" [name]="'minimize-o'"
+                [size]="'medium'" (click)="capabilitiesTable.rowDetail.collapseAllRows()">
+        </svg-icon>
+    </div>
+    <ngx-datatable #capabilitiesTable 
+        columnMode="flex" 
+        [headerHeight]="40"  
+        [rowHeight]="35" 
+        [rows]="capabilities"
+        (select)="onSelectCapabilities($event)"
+        [selectionType]="'single'">
+        <ngx-datatable-row-detail [rowHeight]="undefiend">
+            <ng-template let-row="row"  ngx-datatable-row-detail-template>
+                <div class="properties-title">Properties</div>
+                <capabilities-properties [capabilitiesProperties]="row.properties"></capabilities-properties>
+            </ng-template>
+        </ngx-datatable-row-detail>
+        <ngx-datatable-column  name="Name" [flexGrow]="1" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
+                <div class="expand-collapse-cell">
+                    <svg-icon [clickable]="true" class="expand-collapse-icon"
+                                [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                                [size]="'medium'" (click)="expendRow(row)"></svg-icon>
+                    <span data-tests-id="row.name" sdc-tooltip [tooltip-text]="row.name" [tooltip-placement]="3" (click)="editCapability(row)">{{row.name}}</span>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Type" [flexGrow]="1" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span data-tests-id="row.type" sdc-tooltip [tooltip-text]="row.type" [tooltip-placement]="3">{{row.type ? row.type.replace("tosca.capabilities.",""): ''}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Description" [flexGrow]="1" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span data-tests-id="row.description" sdc-tooltip [tooltip-text]="row.description" [tooltip-placement]="3">{{row.description}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Valid Source" [flexGrow]="1" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span data-tests-id="row.validSourceTypes.join(',')" sdc-tooltip [tooltip-text]="row.validSourceTypes ? row.validSourceTypes.join(',') : null" [tooltip-placement]="3">
+                    {{row.validSourceTypes ? row.validSourceTypes.join(','): ''}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Occurrences" [flexGrow]="1" [prop]="'minOccurrences'" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span data-tests-id="row.minOccurrences+','+row.maxOccurrences" sdc-tooltip 
+                    [tooltip-text]="row.minOccurrences+','+row.maxOccurrences" [tooltip-placement]="3">
+                    {{row.minOccurrences}},{{row.maxOccurrences}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.less b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.less
new file mode 100644
index 0000000000..0c520a8135
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.less
@@ -0,0 +1,16 @@
+:host ::ng-deep {
+    .datatable-row-detail {
+       width: 1260px;
+      }
+      .datatable-body-row {
+        cursor: pointer;
+    }
+}
+.expand-collapse-all-rows {
+    position: absolute;
+    top: 172px;
+    left: 890px;
+}
+.properties-title {
+    padding-bottom: 10px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.ts
new file mode 100644
index 0000000000..02db5d3aee
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.ts
@@ -0,0 +1,79 @@
+import {Capability, CapabilityUI} from "../../../../../models/capability";
+import { ViewChild, Input, OnInit, Component } from "@angular/core";
+import {SdcUiServices} from "onap-ui-angular";
+import {CapabilitiesEditorComponent} from "./capabilityEditor/capabilities-editor.component";
+import {WorkspaceService} from "../../workspace.service";
+import {TopologyTemplateService} from "../../../../services/component-services/topology-template.service";
+import {ReqAndCapabilitiesService} from "../req-and-capabilities.service";
+import {ModalComponent} from "onap-ui-angular/dist/modals/modal.component";
+import {EventListenerService} from "../../../../../services/event-listener-service";
+
+
+@Component({
+    selector: 'capabilities',
+    templateUrl: './capabilities.component.html',
+    styleUrls: ['./capabilities.component.less','../../../../../../assets/styles/table-style.less']
+})
+export class CapabilitiesComponent {
+    @Input() public capabilities: Array<Capability>;
+    @ViewChild('capabilitiesTable') capabilitiesTable: any;
+    private customModalInstance: ModalComponent;
+
+    constructor(
+        private workspaceService: WorkspaceService,
+                private loaderService: SdcUiServices.LoaderService,
+                private topologyTemplateService: TopologyTemplateService,
+                private reqAndCapabilitiesService : ReqAndCapabilitiesService,
+                private modalService: SdcUiServices.ModalService,
+                private eventListenerService: EventListenerService) {
+    }
+
+    private onSelectCapabilities({ selected }) {
+    }
+
+    editCapability(cap: CapabilityUI) {
+        let modalConfig = {
+            size: 'md',
+            title: 'Update Capability',
+            type: 'custom',
+            buttons: [
+                {
+                    id: 'saveButton',
+                    text: ('Update'),
+                    size: "'x-small'",
+                    callback: () => this.updateCapability(),
+                    closeModal: true
+                },
+                {text: "Cancel", size: "'x-small'", closeModal: true}]
+        };
+        let modalInputs = {
+            capability: cap,
+            capabilityTypesList: this.reqAndCapabilitiesService.getCapabilityTypesList(),
+        };
+
+        this.customModalInstance = this.modalService.openCustomModal(modalConfig, CapabilitiesEditorComponent, {input: modalInputs});
+        this.customModalInstance.innerModalContent.instance.
+        onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('saveButton').disabled = !isValid);
+    }
+
+    expendRow(row) {
+        this.capabilitiesTable.rowDetail.toggleExpandRow(row);
+    }
+
+    private updateCapability() {
+        const capability = this.customModalInstance.innerModalContent.instance.capabilityData;
+        this.loaderService.activate();
+        if (capability.uniqueId) {
+            this.topologyTemplateService.updateCapability(this.workspaceService.metadata.getTypeUrl(), this.workspaceService.metadata.uniqueId, capability).subscribe((result) => {
+                let index = this.capabilities.findIndex((cap) => result[0].uniqueId === cap.uniqueId);
+                    this.capabilities[index] = new CapabilityUI(result[0], this.workspaceService.metadata.uniqueId);
+                this.loaderService.deactivate();
+                this.eventListenerService.notifyObservers('CAPABILITIES_UPDATED');
+            }, () => {
+                this.loaderService.deactivate();
+            });
+        }
+    }
+
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.html b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.html
new file mode 100644
index 0000000000..bc15d4d228
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.html
@@ -0,0 +1,93 @@
+<div class="capability-editor">
+    <form class="w-sdc-form">
+        <div class="i-sdc-form-content-capability-content">
+            <div class="content-row">
+                <div class="i-sdc-form-item">
+                    <sdc-input
+                            label="{{ 'CAP_NAME' | translate }}"
+                            required="true"
+                            class="i-sdc-form-input"
+                            testId="capName"
+                            [disabled]="isReadonly"
+                            [(value)]="capabilityData.name"
+                            (valueChange)="validityChanged()">
+                    </sdc-input>
+                </div>
+            </div>
+
+            <div class="group-with-border">
+                <div class="content-row i-sdc-form-item">
+                    <sdc-dropdown
+                            label="{{ 'CAP_TYPE' | translate }}"
+                            required="true"
+                            class="i-sdc-form-select"
+                            testId="capType"
+                            [disabled]="isReadonly"
+                            [options]="capabilityTypesMappedList"
+                            selectedOption="{{ capabilityData.type }}"
+                            [placeHolder] = "capabilityData.type"
+                            (changed)="onSelectCapabilityType($event)">
+                    </sdc-dropdown>
+                </div>
+                <div class="content-row i-sdc-form-item">
+                    <label class="i-sdc-form-label"> {{ 'CAP_DESCRIPTION' | translate }} </label>
+                    <textarea
+                            rows="3"
+                            class="i-sdc-form-input description"
+                            data-tests-id="capDesc"
+                            disabled
+                            value="{{capabilityData.description}}">
+                    </textarea>
+                </div>
+                <div class="content-row i-sdc-form-item">
+                    <label class="i-sdc-form-label valid-source-label"> {{ 'CAP_VALID_SOURCE' | translate }} </label>
+                    <textarea
+                            rows="2"
+                            class="i-sdc-form-input"
+                            data-tests-id="capValidSrc"
+                            disabled
+                            value="{{capabilityData.validSourceTypes}}">
+                    </textarea>
+                </div>
+            </div>
+
+            <label class="i-sdc-form-label occurrences-label"> {{ 'REQ_CAP_OCCURRENCES' | translate }} </label>
+            <div class="content-row occurrences-section">
+                <div class="min-occurrences-value">
+                    <sdc-input
+                            label="{{ 'REQ_CAP_OCCURRENCES_MIN' | translate }}"
+                            class="i-sdc-form-input"
+                            testId="capOccurrencesMin"
+                            [disabled]="isReadonly"
+                            [(value)]="capabilityData.minOccurrences"
+                            (valueChange)="validityChanged()"
+                            type="number">
+                    </sdc-input>
+                </div>
+                <div class="sdc-input">
+                    <label class="sdc-input__label"> {{ 'REQ_CAP_OCCURRENCES_MAX' | translate }} </label>
+                    <div class="max-occurrences-value">
+                        <sdc-checkbox
+                                class="checkbox-label unbounded-value"
+                                testId="capOccurrencesMaxUnbounded"
+                                label="{{translatedUnboundTxt.toLowerCase()}}"
+                                (checkedChange)="onUnboundedChanged()"
+                                [checked]="isUnboundedChecked"
+                                [disabled]="isReadonly">
+                        </sdc-checkbox>
+
+                        <sdc-input
+                                *ngIf="!isUnboundedChecked"
+                                class="i-sdc-form-input"
+                                testId="capOccurrencesMax"
+                                [disabled]="isReadonly"
+                                [(value)]="capabilityData.maxOccurrences"
+                                (valueChange)="validityChanged()"
+                                type="number">
+                        </sdc-input>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.less b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.less
new file mode 100644
index 0000000000..324dc6c4d2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.less
@@ -0,0 +1,38 @@
+@import '../../../../../../../assets/styles/variables.less';
+
+.capability-editor {
+  .i-sdc-form-content-capability-content {
+    padding: 10px 25px;
+    .group-with-border {
+      margin: 25px 0;
+      padding: 15px 0;
+      border-top: 1px solid @tlv_color_u;
+      border-bottom: 1px solid @tlv_color_u;
+      .content-row:not(:last-of-type) {
+        padding-bottom: 13px;
+      }
+    }
+
+    .occurrences-label {
+      font-family: @font-opensans-bold;
+      margin-bottom: 19px;
+    }
+    .occurrences-section, /deep/ .max-occurrences-value {
+      display: flex;
+      .min-occurrences-value {
+        padding-right: 30px;
+      }
+      .unbounded-value {
+        padding-top: 7px;
+        padding-right: 20px;
+        .sdc-checkbox__label {
+          text-transform: capitalize;
+        }
+      }
+    }
+    textarea {
+      min-height: unset;
+      height: unset;
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.ts
new file mode 100644
index 0000000000..3bafa42e0f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.ts
@@ -0,0 +1,81 @@
+import {Component} from '@angular/core';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {Capability, CapabilityTypeModel} from 'app/models';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+import {Subject} from "rxjs";
+
+@Component({
+    selector: 'capabilities-editor',
+    templateUrl: './capabilities-editor.component.html',
+    styleUrls: ['./capabilities-editor.component.less'],
+    providers: [ServiceServiceNg2]
+})
+
+export class CapabilitiesEditorComponent {
+    input: {
+        test: string,
+        capability: Capability,
+        capabilityTypesList: Array<CapabilityTypeModel>,
+        isReadonly: boolean;
+    };
+    capabilityData: Capability;
+    capabilityTypesMappedList: Array<DropdownValue>;
+    isUnboundedChecked: boolean;
+    isReadonly: boolean;
+    translatedUnboundTxt: string;
+
+    public onValidationChange: Subject<boolean> = new Subject();
+
+    constructor(private translateService: TranslateService) {
+    }
+
+    ngOnInit() {
+        this.capabilityData = new Capability(this.input.capability);
+        this.translatedUnboundTxt = '';
+        this.capabilityData.minOccurrences = this.capabilityData.minOccurrences || 0;
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.translatedUnboundTxt = this.translateService.translate('REQ_CAP_OCCURRENCES_UNBOUNDED');
+            this.capabilityData.maxOccurrences = this.capabilityData.maxOccurrences || this.translatedUnboundTxt;
+            this.isUnboundedChecked = this.capabilityData.maxOccurrences === this.translatedUnboundTxt;
+        });
+        this.capabilityTypesMappedList = _.map(this.input.capabilityTypesList, capType => new DropdownValue(capType.toscaPresentation.type, capType.toscaPresentation.type));
+        this.isReadonly = this.input.isReadonly;
+        this.validityChanged();
+    }
+
+    onUnboundedChanged() {
+        this.isUnboundedChecked = !this.isUnboundedChecked;
+        this.capabilityData.maxOccurrences = this.isUnboundedChecked ? this.translatedUnboundTxt : null;
+        this.validityChanged();
+    }
+
+    checkFormValidForSubmit() {
+        return this.capabilityData.name && this.capabilityData.name.length &&
+            this.capabilityData.type && this.capabilityData.type.length && !_.isEqual(this.capabilityData.minOccurrences, "") && this.capabilityData.minOccurrences >= 0 &&
+            (
+                this.isUnboundedChecked ||
+                (this.capabilityData.maxOccurrences && (this.capabilityData.minOccurrences <= parseInt(this.capabilityData.maxOccurrences)))
+            );
+    }
+
+    onSelectCapabilityType(selectedCapType: DropdownValue) {
+        this.capabilityData.type = selectedCapType && selectedCapType.value;
+        if (selectedCapType && selectedCapType.value) {
+            let selectedCapabilityTypeObj: CapabilityTypeModel = this.input.capabilityTypesList.find(capType => capType.toscaPresentation.type === selectedCapType.value);
+            this.capabilityData.description = selectedCapabilityTypeObj.toscaPresentation.description;
+            this.capabilityData.validSourceTypes = selectedCapabilityTypeObj.toscaPresentation.validTargetTypes;
+            this.capabilityData.properties = _.forEach(
+                _.toArray(selectedCapabilityTypeObj.properties),
+                prop => prop.uniqueId = null //a requirement for the BE
+            );
+        }
+        this.validityChanged();
+    }
+
+    validityChanged = () => {
+        let validState = this.checkFormValidForSubmit();
+        this.onValidationChange.next(validState);
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.module.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.module.ts
new file mode 100644
index 0000000000..38b104a0f6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.module.ts
@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CapabilitiesEditorComponent} from './capabilities-editor.component';
+import {FormsModule} from '@angular/forms';
+import {FormElementsModule} from 'app/ng2/components/ui/form-components/form-elements.module';
+import {UiElementsModule} from 'app/ng2/components/ui/ui-elements.module';
+import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import {SdcUiComponentsModule} from 'onap-ui-angular';
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+
+@NgModule({
+    declarations: [
+        CapabilitiesEditorComponent
+    ],
+    imports: [CommonModule,
+        FormsModule,
+        FormElementsModule,
+        UiElementsModule,
+        TranslateModule,
+        SdcUiComponentsModule
+    ],
+    exports: [],
+    entryComponents: [
+        CapabilitiesEditorComponent
+    ],
+    providers: []
+})
+export class CapabilitiesEditorModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.html b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.html
new file mode 100644
index 0000000000..73e0ae52ae
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.html
@@ -0,0 +1,21 @@
+<div class="workspace-req-and-cap">
+    <div>
+        <span class="addTitle" *ngIf="selectTabName === 'REQUIREMENTS'" (click)="addRequiremnet()">Add Requirement</span>
+        <span class="addTitle" *ngIf="selectTabName !== 'REQUIREMENTS'" (click)="addCapability()">Add Capability</span>
+        <span class="req-and-cap-filter" *ngIf="notEmptyTable">
+            <sdc-filter-bar
+                [placeHolder]="'Search'"
+                (keyup)="updateFilter($event)"
+                [testId]="'search-box'">
+            </sdc-filter-bar>
+        </span>
+    </div>
+    <sdc-tabs (selectedTab)="selectTab($event)" [tabStyle]="'sdc-table-tab'">
+        <sdc-tab [title]="'Requirements('+(requirements.length||'0')+')'" [active]="true" [testId]="'req-tab'">
+            <div #requirmentsContainer></div>
+        </sdc-tab>
+        <sdc-tab [title]="'Capabilities('+(capabilities.length||'0')+')'" [active]="false" [testId]="'cap-tab'">
+            <div #capabilitiesContainer></div>      
+        </sdc-tab>
+    </sdc-tabs>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.less b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.less
new file mode 100644
index 0000000000..f3d39cacd6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.less
@@ -0,0 +1,19 @@
+.req-and-cap-filter {
+    width: 336px;
+    float: right;
+    margin-right: 10px;
+}
+
+.addTitle {
+    float: right;
+    text-transform: uppercase;
+    font-family: OpenSans-Semibold, sans-serif;
+    color: #009fdb;
+    cursor: pointer;
+}
+
+:host ::ng-deep .sdc-tabs {
+    .sdc-tab-content {
+        margin-top: 0;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.spec.ts
new file mode 100644
index 0000000000..b7fad045d3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.spec.ts
@@ -0,0 +1,127 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import { NO_ERRORS_SCHEMA} from "@angular/core";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+
+import {Observable} from "rxjs/Observable";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {SdcUiServices, SdcUiCommon} from "onap-ui-angular";
+import 'rxjs/add/observable/of';
+import {ReqAndCapabilitiesComponent} from "./req-and-capabilities.component";
+import {ReqAndCapabilitiesService} from "./req-and-capabilities.service";
+import {WorkspaceService} from "../workspace.service";
+import {
+    capabilitiesMock,
+    filterRequirmentsMock,
+    requirementMock
+} from "../../../../../jest/mocks/req-and-capabilities.mock";
+import {ComponentMetadata} from "../../../../models/component-metadata";
+import { TopologyTemplateService } from "../../../services/component-services/topology-template.service";
+import {EventListenerService} from "../../../../services/event-listener-service";
+
+describe('req and capabilities component', () => {
+
+    let fixture: ComponentFixture<ReqAndCapabilitiesComponent>;
+    let workspaceServiceMock: Partial<WorkspaceService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+    let topologyTemplateServiceMock: Partial<TopologyTemplateService>;
+    let createDynamicComponentServiceMock: Partial<SdcUiServices.CreateDynamicComponentService>
+    let reqAndCapabilitiesService: Partial<ReqAndCapabilitiesService>;
+    let modalService: Partial<SdcUiServices.ModalService>;
+    let eventListenerService: Partial<EventListenerService>;
+
+
+
+    beforeEach(
+        async(() => {
+
+            workspaceServiceMock = {
+               metadata: new ComponentMetadata()
+            };
+
+            topologyTemplateServiceMock = {
+                getRequirementsAndCapabilitiesWithProperties: jest.fn().mockImplementation(() =>
+                Observable.of({requirements: {'tosca.requirements.Node': requirementMock},
+                capabilities: {'tosca.capabilities.Node': capabilitiesMock}}))
+            };
+
+            loaderServiceMock = {
+                activate : jest.fn(),
+                deactivate: jest.fn()
+            }
+            createDynamicComponentServiceMock = {
+                insertComponentDynamically: jest.fn()
+            }
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [ReqAndCapabilitiesComponent],
+                    imports: [NgxDatatableModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        { provide: WorkspaceService, useValue: workspaceServiceMock },
+                        { provide: SdcUiServices.LoaderService, useValue: loaderServiceMock },
+                        { provide: TopologyTemplateService, useValue: topologyTemplateServiceMock },
+                        { provide: SdcUiServices.CreateDynamicComponentService, useValue: createDynamicComponentServiceMock },
+                        { provide: ReqAndCapabilitiesService, useValue: reqAndCapabilitiesService },
+                        { provide: SdcUiServices.ModalService, useValue: modalService },
+                        { provide: EventListenerService, useValue: eventListenerService }
+                    ],
+                });
+            };
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(ReqAndCapabilitiesComponent);
+            });
+        })
+    );
+
+    it('should see exactly 2 requirement in requirements table when call initCapabilitiesAndRequirements and meta data requirements null', () => {
+        workspaceServiceMock.metadata.requirements = null;
+        fixture.componentInstance.initCapabilitiesAndRequirements();
+        expect(workspaceServiceMock.metadata.requirements["tosca.requirements.Node"].length).toBe(3);
+    });
+    it('should see exactly 2 capabilities in capabilities table when call initCapabilitiesAndRequirements and meta data capabilities null', () => {
+        workspaceServiceMock.metadata.capabilities = null;
+        fixture.componentInstance.initCapabilitiesAndRequirements();
+        expect(workspaceServiceMock.metadata.capabilities["tosca.capabilities.Node"].length).toBe(2);
+    });
+
+    it('capabilities array papulated when call populateReqOrCap with capabilities', () => {
+        workspaceServiceMock.metadata.capabilities = {"tosca.capabilities.Node": capabilitiesMock, "tosca.capabilities.Scalable": capabilitiesMock};
+        fixture.componentInstance.populateReqOrCap("capabilities");
+        expect(fixture.componentInstance.capabilities.length).toBe(4);
+    });
+
+    it('create requirements component when call loadReqOrCap with true', () => {
+        createDynamicComponentServiceMock.insertComponentDynamically.mockImplementation(() => { return {instance: {requirements: requirementMock}}});
+        fixture.componentInstance.requirements = requirementMock;
+        fixture.componentInstance.loadReqOrCap(true);
+        expect(fixture.componentInstance.instanceRef.instance.requirements.length).toEqual(3);
+    });
+
+    it('create capabilities component when call loadReqOrCap with false', () => {
+        fixture.componentInstance.instanceRef = {instance: {requirements: null}};
+        createDynamicComponentServiceMock.insertComponentDynamically.mockImplementation(() => { return {instance: {capabilities: capabilitiesMock}}});
+        fixture.componentInstance.capabilities = capabilitiesMock;
+        fixture.componentInstance.requirementsUI = filterRequirmentsMock;
+        let event = {
+            target : {
+                value : 'root'
+            }
+        }
+        fixture.componentInstance.updateFilter(event);
+        expect(fixture.componentInstance.instanceRef.instance.requirements.length).toBe(1);
+    });
+
+    it('should filter 1 capabilities when searching and call updateFilter function and instanceRef is capabilities component', () => {
+        fixture.componentInstance.instanceRef = {instance: {capabilities: null}};
+        fixture.componentInstance.capabilities = capabilitiesMock;
+        fixture.componentInstance.selectTabName = 'CAPABILITIES';
+        let event = {
+            target : {
+                value : '1source'
+            }
+        }
+        fixture.componentInstance.updateFilter(event);
+        expect(fixture.componentInstance.instanceRef.instance.capabilities[0].type).toBe("tosca.capabilities.Node");
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.ts
new file mode 100644
index 0000000000..69999bfb86
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.ts
@@ -0,0 +1,229 @@
+import { Component, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import * as _ from 'lodash';
+import { SdcUiServices } from 'onap-ui-angular';
+import { Capability, CapabilityUI } from '../../../../models/capability';
+import { Requirement, RequirementUI } from '../../../../models/requirement';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
+import { ComponentGenericResponse } from '../../../services/responses/component-generic-response';
+import { WorkspaceService } from '../workspace.service';
+import { CapabilitiesComponent } from './capabilities/capabilities.component';
+import { RequirmentsComponent } from './requirements/requirments.components';
+import {ReqAndCapabilitiesService} from "./req-and-capabilities.service";
+import {CapabilitiesEditorComponent} from "./capabilities/capabilityEditor/capabilities-editor.component";
+import {ModalComponent} from "onap-ui-angular/dist/modals/modal.component";
+import {EventListenerService} from "../../../../services/event-listener-service";
+import {RequirementsEditorComponent} from "./requirements/requirementEditor/requirements-editor.component";
+
+@Component({
+    selector: 'req-and-capabilities',
+    templateUrl: './req-and-capabilities.component.html',
+    styleUrls: ['./req-and-capabilities.component.less']
+})
+export class ReqAndCapabilitiesComponent implements OnInit {
+
+    @ViewChild('requirmentsContainer', { read: ViewContainerRef }) requirmentsContainer: ViewContainerRef;
+    @ViewChild('capabilitiesContainer', { read: ViewContainerRef }) capabilitiesContainer: ViewContainerRef;
+    private requirements: Requirement[] = [];
+    private requirementsUI: RequirementUI[] = [];
+    private capabilities: Capability[] = [];
+    private selectTabName: string = 'REQUIREMENTS';
+    private notEmptyTable: boolean = true;
+    private instanceRef: ComponentRef<any>;
+    private customModalInstance: ModalComponent;
+    readonly INPUTS_FOR_CAPABILITIES: string = 'INPUTS_FOR_CAPABILITIES';
+    readonly INPUTS_FOR_REQUIREMENTS: string = 'INPUTS_FOR_REQUIREMENTS';
+
+    constructor(private workspaceService: WorkspaceService,
+                private loaderService: SdcUiServices.LoaderService,
+                private topologyTemplateService: TopologyTemplateService,
+                private createDynamicComponentService:  SdcUiServices.CreateDynamicComponentService,
+                private reqAndCapabilitiesService : ReqAndCapabilitiesService,
+                private modalService: SdcUiServices.ModalService,
+                private eventListenerService: EventListenerService) {
+    }
+
+    ngOnInit(): void {
+        this.initCapabilitiesAndRequirements();
+
+        this.eventListenerService.registerObserverCallback('CAPABILITIES_UPDATED', () => {
+            this.loadReqOrCap();
+        });
+
+        this.eventListenerService.registerObserverCallback('REQUIREMENTS_UPDATED', () => {
+            this.loadReqOrCap();
+        });
+    }
+
+
+
+    private initCapabilitiesAndRequirements(): void {
+        if (!this.workspaceService.metadata.capabilities || !this.workspaceService.metadata.requirements) {
+            this.loaderService.activate();
+            this.topologyTemplateService.getRequirementsAndCapabilitiesWithProperties
+            (this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId)
+                .subscribe((response: ComponentGenericResponse) => {
+                    this.workspaceService.metadata.capabilities = response.capabilities;
+                    this.workspaceService.metadata.requirements = response.requirements;
+                    this.initReqOrCap();
+                    this.loaderService.deactivate();
+                }, (error) => {
+                    this.loaderService.deactivate();
+                });
+        } else {
+            this.initReqOrCap();
+        }
+    }
+
+    private initReqOrCap() {
+        this.populateReqOrCap('requirements');
+        this.extendRequirementsToRequiremnetsUI(this.requirements);
+        this.populateReqOrCap('capabilities');
+        this.loadReqOrCap();
+    }
+
+    private populateReqOrCap(instanceName: string) {
+        _.forEach(this.workspaceService.metadata[instanceName], (concatArray: any[], name) => {
+            this[instanceName] = this[instanceName].concat(concatArray);
+        });
+    }
+
+    private updateFilter(event) {
+        const val = event.target.value.toLowerCase();
+        if (this.selectTabName === 'REQUIREMENTS') {
+            this.instanceRef.instance.requirements = this.requirementsUI.filter((req: Requirement) => {
+                return !val || this.filterRequirments(req, val);
+            });
+        } else {
+            this.instanceRef.instance.capabilities = this.capabilities.filter((cap: Capability) => {
+                return !val || this.filterCapabilities(cap, val);
+            });
+        }
+
+    }
+
+    private selectTab($event) {
+        this.selectTabName = $event.title.contains('Requirement') ? 'REQUIREMENTS' : 'CATPABILITIES';
+        this.loadReqOrCap();
+    }
+
+    private async loadReqOrCap() {
+        if (this.instanceRef) {
+            this.instanceRef.destroy();
+        }
+
+        if (this.selectTabName === 'REQUIREMENTS') {
+            this.notEmptyTable = this.requirementsUI.length !== 0;
+            this.instanceRef = this.createDynamicComponentService.
+            insertComponentDynamically(RequirmentsComponent, {requirements: this.requirementsUI}, this.requirmentsContainer);
+            // TODO - Keep the initInputs, so it will be called only for the first time - no need to wait to thse API's every time that a user switches tab
+            await this.reqAndCapabilitiesService.initInputs(this.INPUTS_FOR_REQUIREMENTS);
+        } else {
+            this.notEmptyTable = this.capabilities.length !== 0;
+            this.instanceRef = this.createDynamicComponentService.
+            insertComponentDynamically(CapabilitiesComponent, {capabilities: this.capabilities}, this.capabilitiesContainer);
+            // TODO - Keep the initInputs, so it will be called only for the first time - no need to wait to thse API's every time that a user switches tab
+            await this.reqAndCapabilitiesService.initInputs(this.INPUTS_FOR_CAPABILITIES);
+        }
+    }
+
+    private filterCapabilities(capability: Capability, val: string): boolean {
+        return _.includes([capability.name, capability.description, capability.validSourceTypes.join(),
+                capability.minOccurrences, capability.maxOccurrences].join('').toLowerCase(), val) ||
+            (capability.type && capability.type.replace('tosca.capabilities.', '').toLowerCase().indexOf(val) !== -1);
+    }
+
+    private filterRequirments(requirement: Requirement, val: string): boolean {
+        return _.includes([requirement.name, requirement.minOccurrences, requirement.maxOccurrences].join('').toLowerCase(), val) ||
+            (requirement.capability && requirement.capability.substring('tosca.capabilities.'.length).toLowerCase().indexOf(val) !== -1) ||
+            (requirement.node && requirement.node.substring('tosca.node.'.length).toLowerCase().indexOf(val) !== -1) ||
+            (requirement.relationship && requirement.relationship.substring('tosca.relationship.'.length)
+                .toLowerCase().indexOf(val) !== -1);
+    }
+
+    private addCapability() {
+        let modalConfig = {
+            size: 'md',
+            title:  'Add Capability',
+            type: 'custom',
+            buttons: [
+                {
+                    id: 'saveButton',
+                    text: ('Create'),
+                    size: "'x-small'",
+                    callback: () => this.createCapability(),
+                    closeModal: true
+                },
+                {text: "Cancel", size: "'x-small'", closeModal: true}]
+        };
+        let modalInputs = {
+            capabilityTypesList: this.reqAndCapabilitiesService.getCapabilityTypesList(),
+        };
+
+        this.customModalInstance = this.modalService.openCustomModal(modalConfig, CapabilitiesEditorComponent, {input: modalInputs});
+        this.customModalInstance.innerModalContent.instance.
+        onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('saveButton').disabled = !isValid);
+    }
+
+    private createCapability() {
+        const capability = this.customModalInstance.innerModalContent.instance.capabilityData;
+        this.loaderService.activate();
+        if (!capability.uniqueId) {
+            this.topologyTemplateService.createCapability(this.workspaceService.metadata.getTypeUrl(), this.workspaceService.metadata.uniqueId, capability).subscribe((result) => {
+                this.capabilities.unshift(new CapabilityUI(result[0], this.workspaceService.metadata.uniqueId));
+                this.loadReqOrCap();
+                this.loaderService.deactivate();
+            }, () => {
+                this.loaderService.deactivate();
+            });
+        }
+    }
+
+    private addRequiremnet () {
+        let modalConfig = {
+            size: 'md',
+            title: 'Add Requirement',
+            type: 'custom',
+            buttons: [
+                {
+                    id: 'saveButton',
+                    text: ('Create'),
+                    size: "'x-small'",
+                    callback: () => this.createRequirement(),
+                    closeModal: true
+                },
+                {text: "Cancel", size: "'x-small'", closeModal: true}]
+        };
+        let modalInputs = {
+            // requirement: req,
+            relationshipTypesList: this.reqAndCapabilitiesService.getRelationsShipeTypeList(),
+            nodeTypesList: this.reqAndCapabilitiesService.getNodeTypesList(),
+            capabilityTypesList: this.reqAndCapabilitiesService.getCapabilityTypesList(),
+            // isReadonly: this.$scope.isViewMode() || !this.$scope.isDesigner(),
+        };
+
+        this.customModalInstance = this.modalService.openCustomModal(modalConfig, RequirementsEditorComponent, {input: modalInputs});
+        this.customModalInstance.innerModalContent.instance.
+        onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('saveButton').disabled = !isValid);
+    }
+
+
+    private createRequirement() {
+        const requirement = this.customModalInstance.innerModalContent.instance.requirementData;
+        this.loaderService.activate();
+        if (!requirement.uniqueId) {
+            this.topologyTemplateService.createRequirement(this.workspaceService.metadata.getTypeUrl(), this.workspaceService.metadata.uniqueId, requirement).subscribe(result => {
+                this.requirementsUI.unshift(new RequirementUI(result[0], this.workspaceService.metadata.uniqueId));
+                this.loadReqOrCap();
+                this.loaderService.deactivate();
+            }, () => {
+                this.loaderService.deactivate();
+            });
+        }
+    }
+
+    private extendRequirementsToRequiremnetsUI(requirements: Requirement[]) {
+        this.requirements.map((requirement) => {
+           this.requirementsUI.push(new RequirementUI(requirement, this.workspaceService.metadata.uniqueId));
+        });
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.module.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.module.ts
new file mode 100644
index 0000000000..aacb3a5bd1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.module.ts
@@ -0,0 +1,49 @@
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "onap-ui-angular";
+
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import { ReqAndCapabilitiesComponent } from "./req-and-capabilities.component";
+import { CommonModule } from "@angular/common";
+
+import {RequirmentsComponent } from "./requirements/requirments.components";
+import { CapabilitiesComponent } from "./capabilities/capabilities.component";
+import { CapabilitiesPropertiesComponent } from "./capabilities/capabilities-properties/capabilities-properties";
+import {ReqAndCapabilitiesService} from "./req-and-capabilities.service";
+import {RequirementsEditorComponent} from "./requirements/requirementEditor/requirements-editor.component";
+import {CapabilitiesEditorComponent} from "./capabilities/capabilityEditor/capabilities-editor.component";
+import {TranslateModule} from "../../../shared/translator/translate.module";
+import {ToscaTypesServiceNg2} from "../../../services/tosca-types.service";
+
+@NgModule({
+    declarations: [
+        ReqAndCapabilitiesComponent,
+        CapabilitiesComponent,
+        RequirmentsComponent,
+        CapabilitiesPropertiesComponent,
+        RequirementsEditorComponent,
+        CapabilitiesEditorComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        NgxDatatableModule,
+        TranslateModule
+    ],
+    exports: [
+        ReqAndCapabilitiesComponent,
+        CapabilitiesComponent,
+        RequirmentsComponent,
+        CapabilitiesPropertiesComponent
+    ],
+    entryComponents: [
+        ReqAndCapabilitiesComponent,
+        CapabilitiesComponent,
+        RequirmentsComponent,
+        CapabilitiesPropertiesComponent,
+        RequirementsEditorComponent,
+        CapabilitiesEditorComponent
+    ],
+    providers: [  ReqAndCapabilitiesService]
+})
+export class reqAndCapabilitiesModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.service.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.service.ts
new file mode 100644
index 0000000000..470aac75a6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.service.ts
@@ -0,0 +1,80 @@
+import { Injectable } from "@angular/core";
+import { TopologyTemplateService } from "../../../services/component-services/topology-template.service";
+import { Store } from "@ngxs/store";
+import { SdcUiServices } from "onap-ui-angular";
+import { CapabilityTypeModel } from "../../../../models/capability-types";
+import { RelationshipTypeModel } from "../../../../models/relationship-types";
+import { NodeTypeModel } from "../../../../models/node-types";
+import { WorkspaceService } from "../workspace.service";
+import { ToscaTypesServiceNg2 } from "../../../services/tosca-types.service";
+
+
+
+@Injectable()
+export class ReqAndCapabilitiesService {
+
+    private capabilityTypesList: CapabilityTypeModel[];
+    private relationshipTypesList: RelationshipTypeModel[];
+    private nodeTypesList: NodeTypeModel[];
+    private capabilitiesListUpdated: boolean = false;
+    private requirementsListUpdated: boolean = false;
+    private nodeTypeListUpdated: boolean = false;
+
+    readonly INPUTS_FOR_REQUIREMENTS: string = 'INPUTS_FOR_REQUIREMENTS';
+    readonly INPUTS_FOR_CAPABILITIES: string = 'INPUTS_FOR_CAPABILITIES';
+
+    constructor(
+        private workspaceService: WorkspaceService,
+        private modalService: SdcUiServices.ModalService,
+        private loaderService: SdcUiServices.LoaderService,
+        private topologyTemplateService: TopologyTemplateService,
+        private store: Store,
+        private toscaTypesServiceNg2: ToscaTypesServiceNg2){}
+
+    public isViewOnly = (): boolean => {
+        return this.store.selectSnapshot((state) => state.workspace.isViewOnly);
+    }
+
+    public isDesigner = (): boolean => {
+        return this.store.selectSnapshot((state) => state.workspace.isDesigner);
+    }
+
+    public async initInputs(initInputsFor: string) {
+
+        if (!this.capabilitiesListUpdated){
+            // -- COMMON for both --
+            this.capabilityTypesList = [];
+            let capabilityTypesResult = await this.toscaTypesServiceNg2.fetchCapabilityTypes();
+            Object.keys(capabilityTypesResult).forEach(key => {this.capabilityTypesList.push(capabilityTypesResult[key])})
+            this.capabilitiesListUpdated = true;
+        }
+
+        if (initInputsFor === 'INPUTS_FOR_REQUIREMENTS') {
+            if (!this.requirementsListUpdated){
+                this.relationshipTypesList = [];
+                let relationshipTypesResult = await this.toscaTypesServiceNg2.fetchRelationshipTypes();
+                Object.keys(relationshipTypesResult).forEach(key => {this.relationshipTypesList.push(relationshipTypesResult[key])});
+                this.requirementsListUpdated = true;
+            }
+
+            if (!this.nodeTypeListUpdated){
+                this.nodeTypesList = [];
+                let nodeTypesResult = await this.toscaTypesServiceNg2.fetchNodeTypes();
+                Object.keys(nodeTypesResult).forEach(key => {this.nodeTypesList.push(nodeTypesResult[key])})
+                this.nodeTypeListUpdated = true;
+            }
+        }
+    }
+
+    getCapabilityTypesList() {
+        return this.capabilityTypesList;
+    }
+
+    getRelationsShipeTypeList() {
+        return this.relationshipTypesList;
+    }
+
+    getNodeTypesList() {
+        return this.nodeTypesList;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.html b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.html
new file mode 100644
index 0000000000..330680d3ed
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.html
@@ -0,0 +1,91 @@
+<div class="requirement-editor">
+    <form class="w-sdc-form">
+        <div class="i-sdc-form-content-requirement-content">
+            <div class="content-row">
+                <div class="i-sdc-form-item">
+                    <sdc-input
+                            label="{{ 'REQ_NAME' | translate}}"
+                            required="true"
+                            testId="reqName"
+                            [disabled]="isReadonly"
+                            [(value)]="requirementData.name"
+                            (valueChange)="validityChanged()">
+                    </sdc-input>
+                </div>
+            </div>
+
+            <div class="group-with-border">
+                <div class="content-row i-sdc-form-item">
+                    <sdc-dropdown
+                            label="{{ 'REQ_RELATED_CAPABILITY' | translate }}"
+                            testId="reqRelatedCapability"
+                            required="true"
+                            [disabled]="isReadonly"
+                            [options]="capabilityTypesMappedList"
+                            selectedOption="{{requirementData.capability}}"
+                            [placeHolder] = "requirementData.capability"
+                            (changed)="onCapabilityChanged($event)">
+                    </sdc-dropdown>
+                </div>
+                <div class="content-row i-sdc-form-item">
+                    <sdc-dropdown
+                            label="{{ 'REQ_NODE' | translate }}"
+                            testId="reqNode"
+                            [disabled]="isReadonly"
+                            [options]="nodeTypesMappedList"
+                            selectedOption="{{requirementData.node}}"
+                            [placeHolder] = "requirementData.node"
+                            (changed)="onNodeChanged($event)">
+                    </sdc-dropdown>
+                </div>
+                <div class="content-row i-sdc-form-item">
+                    <sdc-dropdown
+                            label="{{ 'REQ_RELATIONSHIP' | translate }}"
+                            testId="reqRelationship"
+                            [disabled]="isReadonly"
+                            [options]="relationshipTypesMappedList"
+                            selectedOption="{{requirementData.relationship}}"
+                            [placeHolder] = "requirementData.relationship"
+                            (changed)="onRelationshipChanged($event)">
+                    </sdc-dropdown>
+                </div>
+            </div>
+
+            <label class="i-sdc-form-label occurrences-label"> {{ 'REQ_CAP_OCCURRENCES' | translate}} </label>
+            <div class="content-row occurrences-section">
+                <div class="min-occurrences-value">
+                    <sdc-input
+                            label="{{ 'REQ_CAP_OCCURRENCES_MIN' | translate}}"
+                            testId="reqOccurrencesMin"
+                            [disabled]="isReadonly"
+                            [(value)]="requirementData.minOccurrences"
+                            (valueChange)="validityChanged()"
+                            type="number">
+                    </sdc-input>
+                </div>
+                <div class="sdc-input">
+                    <label class="sdc-input__label"> {{ 'REQ_CAP_OCCURRENCES_MAX' | translate}} </label>
+                    <div class="max-occurrences-value">
+                        <sdc-checkbox
+                                class="checkbox-label unbounded-value"
+                                testId="reqOccurrencesMaxUnbounded"
+                                label="{{translatedUnboundTxt.toLowerCase()}}"
+                                (checkedChange)="onUnboundedChanged()"
+                                [checked]="isUnboundedChecked"
+                                [disabled]="isReadonly">
+                        </sdc-checkbox>
+                        <sdc-input
+                                *ngIf="!isUnboundedChecked"
+                                testId="reqOccurrencesMax"
+                                [disabled]="isReadonly"
+                                [(value)]="requirementData.maxOccurrences"
+                                (valueChange)="validityChanged()"
+                                type="number">
+                        </sdc-input>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.less b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.less
new file mode 100644
index 0000000000..6e50eb79f5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.less
@@ -0,0 +1,35 @@
+@import '../../../../../../../assets/styles/variables.less';
+
+.requirement-editor {
+  .i-sdc-form-content-requirement-content {
+    padding: 10px 25px;
+
+    .group-with-border {
+      margin: 25px 0;
+      padding: 15px 0;
+      border-top: 1px solid @tlv_color_u;
+      border-bottom: 1px solid @tlv_color_u;
+      .content-row:not(:last-of-type) {
+        padding-bottom: 13px;
+      }
+    }
+
+    .occurrences-label {
+      font-family: @font-opensans-bold;
+      margin-bottom: 19px;
+    }
+    .occurrences-section, /deep/ .max-occurrences-value {
+      display: flex;
+      .min-occurrences-value {
+        padding-right: 30px;
+      }
+      .unbounded-value {
+        padding-top: 7px;
+        padding-right: 20px;
+        .sdc-checkbox__label {
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.ts
new file mode 100644
index 0000000000..2c5c96f3da
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.ts
@@ -0,0 +1,90 @@
+import {Component} from '@angular/core';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {Requirement, RelationshipTypeModel, NodeTypeModel, CapabilityTypeModel} from 'app/models';
+import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {Subject} from "rxjs";
+
+@Component({
+    selector: 'requirements-editor',
+    templateUrl: 'requirements-editor.component.html',
+    styleUrls: ['requirements-editor.component.less'],
+    providers: [ServiceServiceNg2, TranslateService]
+})
+
+export class RequirementsEditorComponent {
+
+    input: {
+        requirement: Requirement,
+        relationshipTypesList: Array<RelationshipTypeModel>;
+        nodeTypesList: Array<NodeTypeModel>;
+        capabilityTypesList: Array<CapabilityTypeModel>;
+        isReadonly: boolean;
+    };
+    requirementData: Requirement;
+    capabilityTypesMappedList: Array<DropdownValue>;
+    relationshipTypesMappedList: Array<DropdownValue>;
+    nodeTypesMappedList: Array<DropdownValue>;
+    isUnboundedChecked: boolean;
+    isReadonly: boolean;
+    translatedUnboundTxt: string;
+
+    public onValidationChange: Subject<boolean> = new Subject();
+
+    constructor(private translateService: TranslateService) {
+    }
+
+    ngOnInit() {
+        this.requirementData = new Requirement(this.input.requirement);
+        this.requirementData.minOccurrences = this.requirementData.minOccurrences || 0;
+        this.translatedUnboundTxt = '';
+        this.capabilityTypesMappedList = _.map(this.input.capabilityTypesList, capType => new DropdownValue(capType.toscaPresentation.type, capType.toscaPresentation.type));
+        this.relationshipTypesMappedList = _.map(this.input.relationshipTypesList, rType => new DropdownValue(rType.toscaPresentation.type, rType.toscaPresentation.type));
+        this.nodeTypesMappedList = _.map(this.input.nodeTypesList, nodeType => {
+            return new DropdownValue(
+                nodeType.componentMetadataDefinition.componentMetadataDataDefinition.toscaResourceName,
+                nodeType.componentMetadataDefinition.componentMetadataDataDefinition.toscaResourceName)
+        });
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.translatedUnboundTxt = this.translateService.translate('REQ_CAP_OCCURRENCES_UNBOUNDED');
+            this.requirementData.maxOccurrences = this.requirementData.maxOccurrences || this.translatedUnboundTxt;
+            this.isUnboundedChecked = this.requirementData.maxOccurrences === this.translatedUnboundTxt;
+        });
+        this.isReadonly = this.input.isReadonly;
+        this.validityChanged();
+    }
+
+    onUnboundedChanged() {
+        this.isUnboundedChecked = !this.isUnboundedChecked;
+        this.requirementData.maxOccurrences = this.isUnboundedChecked ? this.translatedUnboundTxt : null;
+        this.validityChanged();
+    }
+
+    onCapabilityChanged(selectedCapability: DropdownValue) {
+        this.requirementData.capability = selectedCapability && selectedCapability.value;
+        this.validityChanged();
+    }
+
+    onNodeChanged(selectedNode: DropdownValue) {
+        this.requirementData.node = selectedNode && selectedNode.value;
+    }
+
+    onRelationshipChanged(selectedRelationship: DropdownValue) {
+        this.requirementData.relationship = selectedRelationship && selectedRelationship.value;
+    }
+
+    checkFormValidForSubmit() {
+        return this.requirementData.name && this.requirementData.name.length &&
+            this.requirementData.capability && this.requirementData.capability.length && !_.isEqual(this.requirementData.minOccurrences, "") && this.requirementData.minOccurrences >= 0 &&
+            (
+                this.isUnboundedChecked ||
+                (this.requirementData.maxOccurrences && (this.requirementData.minOccurrences <= parseInt(this.requirementData.maxOccurrences)))
+            );
+    }
+
+    validityChanged = () => {
+        let validState = this.checkFormValidForSubmit();
+        this.onValidationChange.next(validState);
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.module.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.module.ts
new file mode 100644
index 0000000000..b1d8db54aa
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.module.ts
@@ -0,0 +1,28 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RequirementsEditorComponent} from "./requirements-editor.component";
+import {FormsModule} from "@angular/forms";
+// import {FormElementsModule} from "../../../components/ui/form-components/form-elements.module";
+import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import {SdcUiComponentsModule} from "onap-ui-angular/";
+import {FormElementsModule} from 'app/ng2/components/ui/form-components/form-elements.module';
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+
+@NgModule({
+    declarations: [
+        RequirementsEditorComponent
+    ],
+    imports: [CommonModule,
+        FormsModule,
+        FormElementsModule,
+        TranslateModule,
+        SdcUiComponentsModule
+    ],
+    exports: [],
+    entryComponents: [
+        RequirementsEditorComponent
+    ],
+    providers: []
+})
+export class RequirementsEditorModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirements.component.less b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirements.component.less
new file mode 100644
index 0000000000..19f1c9b55a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirements.component.less
@@ -0,0 +1,4 @@
+/deep/ .importedFromFile {
+    background-color: #f8f8f8;
+    color: #959595;
+  }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirments.components.html b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirments.components.html
new file mode 100644
index 0000000000..7606ed189a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirments.components.html
@@ -0,0 +1,38 @@
+<div class="requirements-table">
+    <ngx-datatable #capabilitiesTable 
+        columnMode="flex" 
+        [headerHeight]="40"  
+        [rowHeight]="35"
+        [rowClass]="getRowClass"
+        [rows]="requirements">
+        <ngx-datatable-column  name="Name" [flexGrow]="1" [resizeable]="false" >
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span [ngStyle]="{'cursor':row.isCreatedManually ? 'pointer' : 'null' }" data-tests-id="row.name" sdc-tooltip [tooltip-text]="row.name" [tooltip-placement]="3" (click)="editRequirement(row)">{{row.name}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Capability" [flexGrow]="1" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span data-tests-id="row.capability" sdc-tooltip [tooltip-text]="row.capability" [tooltip-placement]="3">{{row.capability ? row.capability.substring("tosca.capabilities.".length) : ''}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Node" [flexGrow]="1" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span data-tests-id="row.node" sdc-tooltip [tooltip-text]="row.node" [tooltip-placement]="3">{{row.node ? row.node.substring("tosca.nodes.".length) : ''}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Relationship" [flexGrow]="1" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span data-tests-id="row.relationship" sdc-tooltip [tooltip-text]="row.relationship" [tooltip-placement]="3">{{row.relationship ? row.relationship.substring("tosca.relationships.".length): ''}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Connected To" [flexGrow]="1" [resizeable]="false">
+        </ngx-datatable-column>
+        <ngx-datatable-column  name="Occurrences" [flexGrow]="1" [prop]="'minOccurrences'" [resizeable]="false">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <span data-tests-id="row.minOccurrences+','+row.maxOccurrences" sdc-tooltip 
+                    [tooltip-text]="row.minOccurrences+','+row.maxOccurrences" [tooltip-placement]="3">
+                    {{row.minOccurrences}},{{row.maxOccurrences}}</span>
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirments.components.ts b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirments.components.ts
new file mode 100644
index 0000000000..b65489ce4e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirments.components.ts
@@ -0,0 +1,103 @@
+import {Input, Component, OnInit} from "@angular/core";
+import {Requirement, RequirementUI} from "../../../../../models/requirement";
+import {RequirementsEditorComponent} from "./requirementEditor/requirements-editor.component";
+import {WorkspaceService} from "../../workspace.service";
+import {TopologyTemplateService} from "../../../../services/component-services/topology-template.service";
+import {ReqAndCapabilitiesService} from "../req-and-capabilities.service";
+import {EventListenerService} from "../../../../../services/event-listener-service";
+import {ModalComponent} from "onap-ui-angular/dist/modals/modal.component";
+import {SdcUiServices} from "onap-ui-angular";
+import sortedIndexBy = require("lodash/sortedIndexBy");
+
+@Component({
+    selector: 'requirments',
+    templateUrl: './requirments.components.html',
+    styleUrls: ['../../../../../../assets/styles/table-style.less', './requirements.component.less']
+})
+
+
+
+export class RequirmentsComponent implements OnInit {
+    @Input() public requirements: Array<RequirementUI>;
+    private customModalInstance: ModalComponent;
+
+    constructor(
+        private workspaceService: WorkspaceService,
+        private loaderService: SdcUiServices.LoaderService,
+        private topologyTemplateService: TopologyTemplateService,
+        private reqAndCapabilitiesService : ReqAndCapabilitiesService,
+        private modalService: SdcUiServices.ModalService,
+        private eventListenerService: EventListenerService) {
+    }
+
+
+    ngOnInit(): void {
+        let isCreatedManually: RequirementUI[] = [];
+        let isImportedFromFile: RequirementUI[] = [];
+
+        isCreatedManually = this.requirements.filter((requirement) => requirement.isCreatedManually);
+        isImportedFromFile = this.requirements.filter((requirement) => !requirement.isCreatedManually);
+
+        this.requirements = [];
+
+        isCreatedManually.map((requirement) => this.requirements.push(requirement));
+        isImportedFromFile.map((requirement) => this.requirements.push(requirement));
+
+    }
+
+
+
+    editRequirement(req) {
+
+        let modalConfig = {
+            size: 'md',
+            title: 'Update Requirement',
+            type: 'custom',
+            buttons: [
+                {
+                    id: 'saveButton',
+                    text: ('Update'),
+                    size: "'x-small'",
+                    callback: () => this.updateRequirement(),
+                    closeModal: true
+                },
+                {text: "Cancel", size: "'x-small'", closeModal: true}]
+        };
+        let modalInputs = {
+            requirement: req,
+            relationshipTypesList: this.reqAndCapabilitiesService.getRelationsShipeTypeList(),
+            nodeTypesList: this.reqAndCapabilitiesService.getNodeTypesList(),
+            capabilityTypesList: this.reqAndCapabilitiesService.getCapabilityTypesList(),
+            // isReadonly: this.$scope.isViewMode() || !this.$scope.isDesigner(),
+        };
+
+        this.customModalInstance = this.modalService.openCustomModal(modalConfig, RequirementsEditorComponent, {input: modalInputs});
+        this.customModalInstance.innerModalContent.instance.
+        onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('saveButton').disabled = !isValid);
+
+    }
+
+    private updateRequirement() {
+        const requirement = this.customModalInstance.innerModalContent.instance.requirementData;
+        this.loaderService.activate();
+        if (requirement.uniqueId) {
+            this.topologyTemplateService.updateRequirement(this.workspaceService.metadata.getTypeUrl(), this.workspaceService.metadata.uniqueId, requirement).subscribe(result => {
+                    let index = this.requirements.findIndex(req => result[0].uniqueId === req.uniqueId);
+                    this.requirements[index] = new RequirementUI(result[0], this.workspaceService.metadata.uniqueId);
+                    this.eventListenerService.notifyObservers('REQUIREMENTS_UPDATED');
+                    this.loaderService.deactivate();
+                }, () => {
+                this.loaderService.deactivate();
+                });
+        }
+    }
+
+    getRowClass(row) {
+        if (!row.isCreatedManually) {
+            return {
+                'importedFromFile': true
+            };
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap
new file mode 100644
index 0000000000..14146d51d2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tosca artifacts page should match current snapshot of tosca artifact pages component 1`] = `
+<tosca-artifact-page
+  serviceLoader={[Function Object]}
+  store={[Function Store]}
+  table={[Function DatatableComponent]}
+  workspaceService={[Function Object]}
+>
+  <div
+    class="tosca-artifact-page"
+  >
+    <ngx-datatable
+      class="ngx-datatable"
+      columnmode="flex"
+    >
+      <div
+        visibilityobserver=""
+      >
+        
+        <datatable-body
+          class="datatable-body"
+        >
+          <datatable-selection>
+            
+            
+            
+          </datatable-selection>
+        </datatable-body>
+        
+      </div>
+    </ngx-datatable>
+  </div>
+</tosca-artifact-page>
+`;
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html
new file mode 100644
index 0000000000..fece92ee37
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html
@@ -0,0 +1,50 @@
+<div class="tosca-artifact-page">
+    <ngx-datatable
+            columnMode="flex"
+            [headerHeight]="40"
+            [rowHeight]="35"
+            [reorderable]="false"
+            [swapColumns]="false"
+            [rows]="toscaArtifacts$ | async"
+            [sorts]="[{prop: 'artifactDisplayName', dir: 'desc'}]"
+            #toscaArtifactsTable
+            (activate)="onActivate($event)">
+        <ngx-datatable-row-detail [rowHeight]="80">
+            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
+                <div>Label: {{row.artifactLabel}}</div>
+                <div>UUID: {{row.artifactUUID}}</div>
+                <div>Description: {{row.description}}</div>
+            </ng-template>
+        </ngx-datatable-row-detail>
+        <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="3"
+                              [prop]="'artifactDisplayName'">
+            <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
+                <div class="expand-collapse-cell">
+                    <svg-icon [clickable]="true" class="expand-collapse-icon"
+                              [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                              [size]="'medium'"></svg-icon>
+                    <span>{{row.artifactDisplayName }}</span>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false"name="Type" [flexGrow]="3">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{row.artifactType}}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" name="Version" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{ row.artifactVersion }}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false"[flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div class="download-artifact-button">
+                    <download-artifact [artifact]="row" [componentId]="componentId"
+                                       [componentType]="componentType"
+                                       testId="download_{{row.artifactDisplayName}}"></download-artifact>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.less b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.less
new file mode 100644
index 0000000000..9c5dd47585
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.less
@@ -0,0 +1,7 @@
+.tosca-artifact-page {
+  .download-artifact-button {
+    text-align: center;
+    padding-top: 4px;
+
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts
new file mode 100644
index 0000000000..e74e5db668
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts
@@ -0,0 +1,46 @@
+import {Component, OnInit, ViewChild} from "@angular/core";
+import {WorkspaceService} from "../workspace.service";
+import {SdcUiServices} from "onap-ui-angular";
+import {ArtifactModel} from "../../../../models";
+import {Select, Store} from "@ngxs/store";
+import {WorkspaceState} from "../../../store/states/workspace.state";
+import * as _ from "lodash";
+import {ArtifactGroupType, COMPONENT_FIELDS} from "../../../../utils";
+import {GetArtifactsByTypeAction} from "../../../store/actions/artifacts.action";
+import {Observable} from "rxjs/index";
+import {ArtifactsState} from "../../../store/states/artifacts.state";
+import {ArtifactType} from "../../../../utils/constants";
+import {map} from "rxjs/operators";
+
+@Component({
+    selector: 'tosca-artifact-page',
+
+    templateUrl: './tosca-artifact-page.component.html',
+    styleUrls: ['./tosca-artifact-page.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class ToscaArtifactPageComponent implements OnInit {
+
+    @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
+    @ViewChild('toscaArtifactsTable') table: any;
+    public toscaArtifacts$: Observable<ArtifactModel[]>;
+    public componentId: string;
+    public componentType:string;
+
+    constructor(private serviceLoader: SdcUiServices.LoaderService, private workspaceService: WorkspaceService, private store: Store) {
+    }
+
+
+    ngOnInit(): void {
+        this.componentId = this.workspaceService.metadata.uniqueId;
+        this.componentType = this.workspaceService.metadata.componentType;
+
+        this.store.dispatch(new GetArtifactsByTypeAction({componentType:this.componentType, componentId:this.componentId, artifactType:ArtifactGroupType.TOSCA}));
+        this.toscaArtifacts$ = this.store.select(ArtifactsState.getArtifactsByType).pipe(map(filterFn => filterFn(ArtifactGroupType.TOSCA)));
+    }
+
+    onActivate(event) {
+        if(event.type === 'click'){
+            this.table.rowDetail.toggleExpandRow(event.row);
+        }
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.module.ts b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.module.ts
new file mode 100644
index 0000000000..00c7b0b371
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.module.ts
@@ -0,0 +1,28 @@
+import {CommonModule} from "@angular/common";
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {ToscaArtifactPageComponent} from "./tosca-artifact-page.component";
+import {UiElementsModule} from "../../../components/ui/ui-elements.module";
+
+@NgModule({
+    declarations: [
+        ToscaArtifactPageComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        NgxDatatableModule,
+        UiElementsModule
+    ],
+    exports: [
+        ToscaArtifactPageComponent
+    ],
+    entryComponents: [
+        ToscaArtifactPageComponent
+    ],
+
+})
+export class ToscaArtifactPageModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts
new file mode 100644
index 0000000000..af3558e15b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts
@@ -0,0 +1,71 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {ToscaArtifactPageComponent} from "./tosca-artifact-page.component";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {WorkspaceService} from "../workspace.service";
+import {SdcUiServices} from "onap-ui-angular";
+import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
+import {Observable} from "rxjs/Observable";
+import {ComponentMetadata} from "../../../../models/component-metadata";
+import 'rxjs/add/observable/of';
+import {NgxsModule, Store} from "@ngxs/store";
+import {ArtifactsState} from "../../../store/states/artifacts.state";
+import {toscaArtifactMock} from "../../../../../jest/mocks/artifacts-mock";
+
+describe('tosca artifacts page', () => {
+
+    let fixture: ComponentFixture<ToscaArtifactPageComponent>;
+    let topologyTemplateServiceMock: Partial<TopologyTemplateService>;
+    let workspaceServiceMock: Partial<WorkspaceService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+    let store: Store;
+
+
+    beforeEach(
+        async(() => {
+
+            topologyTemplateServiceMock = {
+                getArtifactsByType: jest.fn().mockImplementation((componentType, id, artifactType) => Observable.of(toscaArtifactMock))
+            };
+            workspaceServiceMock = {metadata: <ComponentMetadata>{uniqueId: 'service_unique_id', componentType: 'SERVICE'}}
+
+            loaderServiceMock = {
+                activate : jest.fn(),
+                deactivate: jest.fn()
+            }
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [ToscaArtifactPageComponent],
+                    imports: [NgxDatatableModule, NgxsModule.forRoot([ArtifactsState])],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: WorkspaceService, useValue: workspaceServiceMock},
+                        {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock},
+                        {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+                    ],
+                });
+            };
+
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(ToscaArtifactPageComponent);
+                store = testBed.get(Store);
+            });
+        })
+    );
+
+    it('should match current snapshot of tosca artifact pages component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('should see exactly 2 tosca artifacts', () => {
+        fixture.componentInstance.ngOnInit();
+        fixture.componentInstance.toscaArtifacts$.subscribe((artifacts)=> {
+            expect(artifacts.length).toEqual(2);
+        })
+        store.selectOnce(state => state.artifacts.toscaArtifacts).subscribe(artifacts => {
+            expect(artifacts.length).toEqual(9);
+        });
+    })
+
+});
\ No newline at end of file
diff --git a/catalog-ui/src/app/view-models/support/support-view-model.ts b/catalog-ui/src/app/ng2/pages/workspace/workspace-ng1-bridge-service.ts
index 5703a74e97..3d93b459a2 100644
--- a/catalog-ui/src/app/view-models/support/support-view-model.ts
+++ b/catalog-ui/src/app/ng2/pages/workspace/workspace-ng1-bridge-service.ts
@@ -1,3 +1,6 @@
+/**
+ * Created by ob0695 on 6/24/2018.
+ */
 /*-
  * ============LICENSE_START=======================================================
  * SDC
@@ -7,9 +10,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -17,20 +20,18 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
+import {Store} from "@ngxs/store";
+import {Injectable} from "@angular/core";
+import {UpdateIsViewOnly} from "../../store/actions/workspace.action";
 
-'use strict';
-import {CacheService} from "app/services";
-
-interface ISupportViewModelScope {
-    version:string;
-}
+@Injectable()
+export class WorkspaceNg1BridgeService {
 
-export class SupportViewModel {
+    constructor(private store: Store) {
+    };
 
-    static '$inject' = ['$scope', 'Sdc.Services.CacheService'];
-
-    constructor(private $scope:ISupportViewModelScope,
-                private cacheService:CacheService) {
-        this.$scope.version = this.cacheService.get('version');
+    public updateIsViewOnly = (isViewOnly: boolean):void => {
+        this.store.dispatch(new UpdateIsViewOnly(isViewOnly));
     }
+
 }
diff --git a/catalog-ui/src/app/ng2/pages/workspace/workspace.component.ts b/catalog-ui/src/app/ng2/pages/workspace/workspace.component.ts
new file mode 100644
index 0000000000..a209406a53
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/workspace.component.ts
@@ -0,0 +1,3 @@
+/**
+ * Created by ob0695 on 6/11/2018.
+ */
diff --git a/catalog-ui/src/app/ng2/pages/workspace/workspace.module.ts b/catalog-ui/src/app/ng2/pages/workspace/workspace.module.ts
new file mode 100644
index 0000000000..cb646379d2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/workspace.module.ts
@@ -0,0 +1,50 @@
+/**
+ * Created by ob0695 on 6/4/2018.
+ */
+/**
+ * Created by ob0695 on 6/4/2018.
+ */
+import {NgModule} from "@angular/core";
+import {CompositionPageModule} from "../composition/composition-page.module";
+
+import {NgxsModule} from "@ngxs/store";
+import {TopologyTemplateService} from "../../services/component-services/topology-template.service";
+import {WorkspaceState} from "../../store/states/workspace.state";
+import {WorkspaceService} from "./workspace.service";
+import {DeploymentPageModule} from "./deployment/deployment-page.module";
+import {ToscaArtifactPageModule} from "./tosca-artifacts/tosca-artifact-page.module";
+import {InformationArtifactPageModule} from "./information-artifact/information-artifact-page.module";
+import { reqAndCapabilitiesModule } from "./req-and-capabilities/req-and-capabilities.module";
+import {AttributesModule} from "./attributes/attributes.module";
+import {ArtifactsState} from "../../store/states/artifacts.state";
+import {InstanceArtifactsState} from "../../store/states/instance-artifacts.state";
+import {DeploymentArtifactsPageModule} from "./deployment-artifacts/deployment-artifacts-page.module";
+import { DistributionModule } from './disribution/distribution.module';
+import { ActivityLogModule } from './activity-log/activity-log.module';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        DeploymentPageModule,
+        CompositionPageModule,
+        AttributesModule,
+        reqAndCapabilitiesModule,
+        ToscaArtifactPageModule,
+        DeploymentArtifactsPageModule,
+        InformationArtifactPageModule,
+        DistributionModule,
+        ActivityLogModule,
+        NgxsModule.forFeature([WorkspaceState, ArtifactsState, InstanceArtifactsState])
+    ],
+
+    exports: [],
+    entryComponents: [],
+    providers: [TopologyTemplateService, WorkspaceService]
+})
+
+export class WorkspaceModule {
+
+    constructor() {
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/workspace.service.ts b/catalog-ui/src/app/ng2/pages/workspace/workspace.service.ts
new file mode 100644
index 0000000000..9f985016ec
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/workspace.service.ts
@@ -0,0 +1,70 @@
+/**
+ * Created by ob0695 on 6/5/2018.
+ */
+/*-
+ * ============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=========================================================
+ */
+
+/**
+ * Created by rc2122 on 5/23/2017.
+ */
+import { Injectable } from '@angular/core';
+import {WorkspaceMode, ComponentState, Role} from "../../../utils/constants";
+import {Component as TopologyTemplate, ComponentMetadata} from "app/models";
+import {CacheService} from "../../services/cache.service";
+import {IComponentMetadata} from "../../../models/component-metadata";
+import {ComponentType} from "../../../utils";
+
+@Injectable()
+export class WorkspaceService {
+
+    public metadata:ComponentMetadata;
+
+    constructor(private cacheService:CacheService) {
+
+    }
+
+    public setComponentMetadata = (metadata: ComponentMetadata) => {
+        this.metadata = metadata;
+    }
+
+    public getMetadataType(): string {
+        switch (this.metadata.componentType) {
+            case ComponentType.SERVICE:
+                return ComponentType.SERVICE;
+            default:
+                return this.metadata.resourceType;
+        }
+    }
+
+    public getComponentMode = (component:TopologyTemplate):WorkspaceMode => {//return if is edit or view for resource or service
+        let mode = WorkspaceMode.VIEW;
+
+        let user = this.cacheService.get("user");
+        if (component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT &&
+            component.lastUpdaterUserId === user.userId) {
+            if ((component.isService() || component.isResource()) && user.role == Role.DESIGNER) {
+                mode = WorkspaceMode.EDIT;
+            }
+        }
+        return mode;
+    }
+}
+
+  
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.ts b/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.ts
new file mode 100644
index 0000000000..af107ed006
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.ts
@@ -0,0 +1,151 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Pipe, PipeTransform} from "@angular/core";
+import {Component, Resource} from "app/models";
+import {ComponentType} from "app/utils/constants";
+
+export interface ISearchFilter {
+    [key:string]: string;
+}
+
+export interface IEntityFilterObject {
+    // Types
+    selectedComponentTypes?:Array<string>;
+    selectedResourceSubTypes?:Array<string>;
+    // Categories
+    selectedCategoriesModel?:Array<string>;
+    // Statuses
+    selectedStatuses?:Array<string>;
+    // distributed
+    distributed?:Array<string>;
+    // search
+    search?:ISearchFilter;
+    
+}
+
+@Pipe({name: 'entity-filter'})
+export class EntityFilterPipe implements PipeTransform{
+    constructor() {
+    }
+
+    public static transform(components:Array<Component>, filter:IEntityFilterObject) {
+        let filteredComponents:Array<Component> = components;
+
+        // filter by type
+        // --------------------------------------------------------------------------
+        if ((filter.selectedComponentTypes && filter.selectedComponentTypes.length > 0) || (filter.selectedResourceSubTypes && filter.selectedResourceSubTypes.length > 0)) {
+            let filteredTypes = [];
+            angular.forEach(components, (component:Component):void => {
+                // Filter by component type
+                let typeLower:string = component.componentType.toLowerCase();
+                let typeFirstCapital:string = typeLower.charAt(0).toUpperCase() + typeLower.slice(1);
+                if (filter.selectedComponentTypes.indexOf(typeFirstCapital) !== -1) {
+                    filteredTypes.push(component);
+                }
+
+                // Filter by resource sub type, only in case the resource checkbox was not selected (because in this case we already added all the components in above section).
+                if (component.isResource() && filter.selectedComponentTypes.indexOf("Resource") === -1 && filter.selectedResourceSubTypes.length > 0) {
+                    //filteredComponents.pop(); // Remove the last inserted component.
+                    let resource:Resource = <Resource>component;
+                    if (filter.selectedResourceSubTypes.indexOf(resource.getComponentSubType()) !== -1) {
+                        filteredTypes.push(component);
+                    }
+                }
+            });
+            filteredComponents = filteredTypes;
+        }
+
+        // filter by categories & subcategories & groupings
+        // --------------------------------------------------------------------------
+        if (filter.selectedCategoriesModel && filter.selectedCategoriesModel.length > 0) {
+            let filteredCategories = [];
+            angular.forEach(filteredComponents, (component:Component):void => {
+                let componentCategory = component.categoryNormalizedName +
+                    ((component.subCategoryNormalizedName) ? '.' + component.subCategoryNormalizedName : '');
+                if (component.componentType === ComponentType.RESOURCE) {
+                    componentCategory = 'resourceNewCategory.' + componentCategory;
+                } else if (component.componentType === ComponentType.SERVICE) {
+                    componentCategory = 'serviceNewCategory.' + componentCategory;
+                }
+                if (filter.selectedCategoriesModel.indexOf(componentCategory) !== -1) {
+                    filteredCategories.push(component);
+                }
+            });
+            filteredComponents = filteredCategories;
+        }
+
+        // filter by statuses
+        // --------------------------------------------------------------------------
+        if (filter.selectedStatuses && filter.selectedStatuses.length > 0) {
+
+            let filteredStatuses = [];
+            angular.forEach(filteredComponents, (component:Component):void => {
+                if (filter.selectedStatuses.indexOf(component.lifecycleState) > -1) {
+                    filteredStatuses.push(component);
+                }
+                //if status DISTRIBUTED && CERTIFIED are selected the component will added in  CERTIFIED status , not need to add twice
+                if (filter.selectedStatuses.indexOf('DISTRIBUTED') > -1 && !(filter.selectedStatuses.indexOf('CERTIFIED') > -1)) {
+                    if (component.distributionStatus && component.distributionStatus.indexOf('DISTRIBUTED') > -1 && component.lifecycleState.indexOf('CERTIFIED') > -1) {
+                        filteredStatuses.push(component);
+                    }
+                }
+            });
+            filteredComponents = filteredStatuses;
+        }
+
+        // filter by statuses and distributed
+        // --------------------------------------------------------------------------
+        if (filter.distributed != undefined && filter.distributed.length > 0) {
+            let filterDistributed:Array<any> = filter.distributed;
+            let filteredDistributed = [];
+            angular.forEach(filteredComponents, (entity) => {
+                filterDistributed.forEach((distribute) => {
+                    let distributeItem = distribute.split(',');
+                    distributeItem.forEach((item) => {
+                        if (item !== undefined && entity.distributionStatus === item) {
+                            filteredDistributed.push(entity);
+                        }
+                    })
+                });
+            });
+            filteredComponents = filteredDistributed;
+        }
+
+        // filter by search
+        // --------------------------------------------------------------------------
+        if (filter.search != undefined) {
+            Object.keys(filter.search).forEach((searchKey) => {
+                let searchVal = filter.search[searchKey];
+                if (searchVal) {
+                    searchVal = searchVal.toLowerCase();
+                    filteredComponents = filteredComponents.filter((component:Component) =>
+                        component[searchKey].toLowerCase().indexOf(searchVal) !== -1);
+                }
+            });
+        }
+
+        return filteredComponents;
+    }
+
+    public transform(components:Array<Component>, filter:IEntityFilterObject) {
+        return EntityFilterPipe.transform(components, filter);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts
index c44d71b30d..66f9518a47 100644
--- a/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts
+++ b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts
@@ -26,7 +26,10 @@ import {GroupByPipe} from "./groupBy.pipe";
 import {ResourceNamePipe} from "./resource-name.pipe";
 import {NgModule} from "@angular/core";
 import {SafeUrlSanitizerPipe} from "./safeUrlSanitizer.pipe";
-import {OrderByPipe} from "./orderBy.pipe";
+import {EntityFilterPipe} from "./entity-filter.pipe";
+import {KeyValuePipe} from "./key-value.pipe";
+import {PropertiesOrderByPipe} from "./properties-order-by.pipe";
+import {OrderByPipe} from "./order-by.pipe";
 
 @NgModule({
     declarations: [
@@ -36,6 +39,9 @@ import {OrderByPipe} from "./orderBy.pipe";
         SafeUrlSanitizerPipe,
         SearchFilterPipe,
         ResourceNamePipe,
+        EntityFilterPipe,
+        KeyValuePipe,
+        PropertiesOrderByPipe,
         OrderByPipe
     ],
     exports: [
@@ -45,7 +51,20 @@ import {OrderByPipe} from "./orderBy.pipe";
         SafeUrlSanitizerPipe,
         SearchFilterPipe,
         ResourceNamePipe,
-        OrderByPipe
+        EntityFilterPipe,
+        PropertiesOrderByPipe,
+        OrderByPipe,
+        KeyValuePipe
+    ],
+    providers: [
+        ContentAfterLastDotPipe,
+        GroupByPipe,
+        KeysPipe,
+        SafeUrlSanitizerPipe,
+        SearchFilterPipe,
+        ResourceNamePipe,
+        EntityFilterPipe,
+        KeyValuePipe
     ]
 })
 
diff --git a/catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts b/catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts
index 90dce23352..19811f2f08 100644
--- a/catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts
+++ b/catalog-ui/src/app/ng2/pipes/groupBy.pipe.ts
@@ -26,6 +26,9 @@ import {Pipe, PipeTransform} from '@angular/core';
 @Pipe({name: 'groupBy'})
 export class GroupByPipe implements PipeTransform {
     transform(value: Array<any>, field: string): Array<any> {
+        if(!value) {
+            return null;
+        }
         const groupedObj = value.reduce((prev, cur)=> {
             if(!prev[cur[field]]) {
                 prev[cur[field]] = [cur];
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.ts b/catalog-ui/src/app/ng2/pipes/key-value.pipe.ts
index 26602224da..4adb0b12f7 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pipes/key-value.pipe.ts
@@ -1,3 +1,6 @@
+/**
+ * Created by ob0695 on 7/3/2018.
+ */
 /*-
  * ============LICENSE_START=======================================================
  * SDC
@@ -18,22 +21,21 @@
  * ============LICENSE_END=========================================================
  */
 
-import * as _ from "lodash";
-import { Component, Inject, Input, Output, EventEmitter } from "@angular/core";
-import { GroupInstance } from 'app/models/graph/zones/group-instance';
-
-@Component({
-    selector: 'group-information-tab',
-    templateUrl: './group-information-tab.component.html',
-    styleUrls: ['./../base/base-tab.component.less']
-})
-export class GroupInformationTabComponent {
- 
-    @Input() group: GroupInstance;
-    @Input() isViewOnly: boolean;
-
-    constructor() {
+/**
+ * Created by rc2122 on 5/17/2017.
+ */
+import {Pipe, PipeTransform} from '@angular/core';
 
+@Pipe({name: 'keyValue'})
+export class KeyValuePipe implements PipeTransform {
+    transform(value, field: string): Array<any> {
+        if(!value) {
+            return null;
+        }
+        let keyValueObject = [];
+        for (let key in value) {
+            keyValueObject.push({key:key, value: value[key]});
+        }
+        return keyValueObject;
     }
-
 }
diff --git a/catalog-ui/src/app/ng2/pipes/keys.pipe.ts b/catalog-ui/src/app/ng2/pipes/keys.pipe.ts
index 349e9334f7..f8663aca2e 100644
--- a/catalog-ui/src/app/ng2/pipes/keys.pipe.ts
+++ b/catalog-ui/src/app/ng2/pipes/keys.pipe.ts
@@ -23,6 +23,9 @@ import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({name: 'keys'})
 export class KeysPipe implements PipeTransform {
   transform(value, args:string[]) : any {
+    if(!value) {
+      return null;
+    }
     let keys = [];
     for (let key in value) {
       keys.push(key);
diff --git a/catalog-ui/src/app/ng2/pipes/orderBy.pipe.ts b/catalog-ui/src/app/ng2/pipes/order-by.pipe.ts
index 4edbd60f60..6dc5d47863 100644
--- a/catalog-ui/src/app/ng2/pipes/orderBy.pipe.ts
+++ b/catalog-ui/src/app/ng2/pipes/order-by.pipe.ts
@@ -20,10 +20,10 @@
 
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'orderBy' })
+@Pipe({name: 'orderBy'})
 export class OrderByPipe implements PipeTransform {
     transform(records: Array<any>, args?: any): any {
-        if (!records || !args.path) return records;
+        if (!records || !args.path) { return records; }
         let len = args.path.length;
         return records.sort((itemIdx1, itemIdx2) => {
             var i = 0;
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts b/catalog-ui/src/app/ng2/pipes/properties-order-by.pipe.ts
index 5d0f38fd5e..98debd28d9 100644
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
+++ b/catalog-ui/src/app/ng2/pipes/properties-order-by.pipe.ts
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * SDC
  * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright (C) 2017 Huawei 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.
@@ -18,26 +18,18 @@
  * ============LICENSE_END=========================================================
  */
 
-import * as _ from "lodash";
-import { Module } from "app/models";
-/**
- * Created by obarda on 12/21/2016.
- */
-
-export class DeploymentGraphGeneralUtils {
-
-    constructor() {
+import { Pipe, PipeTransform } from '@angular/core';
 
-    }
-
-    public findInstanceModule = (groupsArray: Array<Module>, componentInstanceId: string): string => {
-        let parentGroup: Module = _.find(groupsArray, (group: Module) => {
-            return _.find((<any>Object).values(group.members), (member: string) => {
-                return member === componentInstanceId;
-            });
-        });
-        return parentGroup ? parentGroup.uniqueId : "";
+@Pipe({ name: 'propertiesOrderBy' })
+export class PropertiesOrderByPipe implements PipeTransform {
+    transform(records: Array<any>, args?: any): any {
+        if (!records || !args.path) return records;
+        let len = args.path.length;
+        return records.sort((itemIdx1, itemIdx2) => {
+            var i = 0;
+            while (i < len) { itemIdx1 = itemIdx1[args.path[i]]; itemIdx2 = itemIdx2[args.path[i]]; i++; }
+            // Order * (-1): We change our order
+            return itemIdx1 + "" > itemIdx2 + "" ? args.direction : args.direction * (- 1);
+        })
     };
 }
-
-DeploymentGraphGeneralUtils.$inject = [];
diff --git a/catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts b/catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts
index fdf9526375..0fdbbcaade 100644
--- a/catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts
+++ b/catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts
@@ -20,15 +20,20 @@
 
 
 import { Pipe, PipeTransform } from '@angular/core';
+import * as _ from 'lodash';
 
 @Pipe({name: 'resourceName'})
 export class ResourceNamePipe implements PipeTransform {
+    
+    public static getDisplayName (value:string): string {
+        const newName:string =
+            _.last(value.split(/tosca\.nodes\..*network\..*relationships\..*org\.openecomp\..*resource\.nfv\..*nodes\.module\..*cp\..*vl\./));
+        return (newName) ? newName : value;
+    }
+
     transform(value) : any {
         if (value) {
-            //newName =  _.last(newName.split('.'));
-            const newName:string =
-                _.last(value.split(/tosca\.nodes\..*network\..*relationships\..*org\.openecomp\..*resource\.nfv\..*nodes\.module\..*cp\..*vl\./));
-            return (newName) ? newName : value;
+           return ResourceNamePipe.getDisplayName(value);
         }
     }
 }
diff --git a/catalog-ui/src/app/ng2/services/activity-log.service.ts b/catalog-ui/src/app/ng2/services/activity-log.service.ts
new file mode 100644
index 0000000000..deabbee0bd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/activity-log.service.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable} from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Activity } from '../../models/activity';
+import { ServerTypeUrl } from '../../utils/constants';
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
+import { HttpHelperService } from './http-hepler.service';
+
+@Injectable()
+export class ActivityLogService {
+    url: string;
+
+    constructor(private httpClient: HttpClient, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
+        this.url = this.sdcConfig.api.root + this.sdcConfig.api.GET_activity_log;
+    }
+
+    public getActivityLog(componentType: string, uid: string): Observable<Activity[]> {
+
+        // Compose URL: audit-records/services_or_resources/uid
+        const url = HttpHelperService.replaceUrlParams(this.url, {
+            type: ServerTypeUrl.toServerTypeUrl(componentType),
+            id: uid
+        });
+
+        return this.httpClient.get<Activity[]>(url);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/services/archive.service.ts b/catalog-ui/src/app/ng2/services/archive.service.ts
deleted file mode 100644
index 83f1c502c2..0000000000
--- a/catalog-ui/src/app/ng2/services/archive.service.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { Injectable, Inject } from "@angular/core";
-import { Observable } from "rxjs/Observable";
-import { HttpService } from "./http.service";
-import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
-import { Component } from "../../models";
-import { ComponentFactory } from 'app/utils/component-factory';
-
-
-@Injectable()
-export class ArchiveService {
-    protected baseUrl;
-
-    constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig, private componentFactory:ComponentFactory/*, @Inject(ComponentFactory) componentFactory */) {
-        this.baseUrl = sdcConfig.api.root ;
-    }
-
-    public getArchiveCatalog() {
-        let archiveCatalogItems:Component[] = [];
-        let archiveCatalogResourceItems:Component[] = []; 
-        let archiveCatalogServiceItems:Component[] = [];
-
-        return this.http.get(this.baseUrl + '/v1/catalog/archive/', {}).map(res => {
-            let archiveCatalogObject = res.json();
-            if (archiveCatalogObject.resources) archiveCatalogResourceItems = this.getResourceItems(archiveCatalogObject.resources);
-            if (archiveCatalogObject.services) archiveCatalogServiceItems = this.getServiceItems(archiveCatalogObject.services);
-            archiveCatalogItems = [].concat(archiveCatalogResourceItems, archiveCatalogServiceItems);
-            
-            return archiveCatalogItems;
-        });
-    }
-
-    
-    private getResourceItems(resources){
-        let resourceItems = resources.map((resource)=>{
-            return this.componentFactory.createResource(resource)
-        })
-        return resourceItems;
-    }
-
-    private getServiceItems(services){
-        let serviceItems = services.map((service)=>{
-            return this.componentFactory.createService(service)
-        })
-        return serviceItems;
-    }
-
-}    
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/authentication.service.ts b/catalog-ui/src/app/ng2/services/authentication.service.ts
index 1c6502dd0d..52ca643833 100644
--- a/catalog-ui/src/app/ng2/services/authentication.service.ts
+++ b/catalog-ui/src/app/ng2/services/authentication.service.ts
@@ -20,38 +20,44 @@
 
 import {Injectable, Inject} from '@angular/core';
 import {IAppConfigurtaion, ICookie} from "../../models/app-config";
-import {Response, Headers, RequestOptions, Http} from '@angular/http';
 import {Cookie2Service} from "./cookie.service";
 import { Observable } from 'rxjs/Observable';
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
+import { IUserProperties } from "app/models";
+import { CacheService } from "app/ng2/services/cache.service";
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Injectable()
 export class AuthenticationService {
 
-    constructor(private cookieService:Cookie2Service, private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
+    private _loggedinUser:IUserProperties;
+    
+    constructor(private cookieService:Cookie2Service, private http: HttpClient, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig, private cacheService: CacheService) {
         this.cookieService = cookieService;
-        this.http = http;
     }
 
-    private getAuthHeaders():any {
+    private getAuthHeaders():HttpHeaders {
         let cookie:ICookie = this.sdcConfig.cookie;
-        let authHeaders:any = {};
-        authHeaders[cookie.userFirstName] = this.cookieService.getFirstName();
-        authHeaders[cookie.userLastName] = this.cookieService.getLastName();
-        authHeaders[cookie.userEmail] = this.cookieService.getEmail();
-        authHeaders[cookie.userIdSuffix] = this.cookieService.getUserId();
+        let authHeaders: HttpHeaders = new HttpHeaders();
+        authHeaders = authHeaders.set(cookie.userFirstName, this.cookieService.getFirstName())
+        .set(cookie.userLastName, this.cookieService.getLastName())
+        .set(cookie.userEmail, this.cookieService.getEmail())
+        .set(cookie.userIdSuffix, this.cookieService.getUserId())
         return authHeaders;
     }
 
-    public authenticate(): Observable<JSON> {
-        let options = new RequestOptions({
-            headers: new Headers(this.getAuthHeaders())
-        });
-
+    public authenticate(): Observable<IUserProperties> {
         let authUrl = this.sdcConfig.api.root + this.sdcConfig.api.GET_user_authorize;
-        return this.http
-            .get(authUrl, options)
-            .map((res: Response) => res.json());
+        return this.http.get<IUserProperties>(authUrl, {headers: this.getAuthHeaders()});
+    }
+
+    public getLoggedinUser():IUserProperties {
+        return this._loggedinUser;
     }
 
+    public setLoggedinUser(loggedinUser:IUserProperties) {
+        this._loggedinUser = loggedinUser;
+        this.cacheService.set('user', loggedinUser);
+    };
+
 }
diff --git a/catalog-ui/src/app/services/cache-service.ts b/catalog-ui/src/app/ng2/services/cache.service.ts
index 4d10db0066..e876ec1098 100644
--- a/catalog-ui/src/app/services/cache-service.ts
+++ b/catalog-ui/src/app/ng2/services/cache.service.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,37 +18,32 @@
  * ============LICENSE_END=========================================================
  */
 
-'use strict';
+import {Injectable} from "@angular/core";
 import {Dictionary} from "app/utils";
 
-interface ICacheService {
-    get(key:string):any;
-    set(key:string, value:any):void;
-}
-
-export class CacheService implements ICacheService {
-
+@Injectable()
+export class CacheService {
     private storage:Dictionary<string, any>;
 
     constructor() {
         this.storage = new Dictionary<string, any>();
     };
 
-    public get = (key:string):any => {
+    public get(key:string): any {
         return this.storage.getValue(key);
-    };
+    }
 
-    public set = (key:string, value:any):void => {
+    public set(key:string, value:any): void {
         this.storage.setValue(key, value);
-    };
+    }
 
-    public remove = (key:string):void => {
+    public remove(key:string): void {
         if (this.storage.containsKey(key)) {
             this.storage.remove(key);
         }
-    };
+    }
 
-    public contains = (key:string):boolean => {
+    public contains(key:string): boolean {
         return this.storage.containsKey(key);
-    };
+    }
 }
diff --git a/catalog-ui/src/app/ng2/services/catalog.service.ts b/catalog-ui/src/app/ng2/services/catalog.service.ts
new file mode 100644
index 0000000000..bbdfa1b420
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/catalog.service.ts
@@ -0,0 +1,85 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Injectable, Inject } from "@angular/core";
+import { Observable } from "rxjs/Observable";
+import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
+import { Component, IApi, IComponentsArray } from "app/models";
+import { ComponentFactory } from 'app/utils/component-factory';
+import {ResourceType} from "../../utils/constants";
+import {SharingService} from "./sharing.service";
+import { HttpClient, HttpParams } from "@angular/common/http";
+
+@Injectable()
+export class CatalogService {
+    protected api:IApi;
+    protected baseUrl:string;
+    protected baseMicroServiceUrl:string;
+
+    constructor(private http: HttpClient,
+                @Inject(SdcConfigToken) sdcConfig:ISdcConfig,
+                private componentFactory:ComponentFactory,
+                private sharingService:SharingService) {
+        this.api = sdcConfig.api;
+        this.baseUrl = sdcConfig.api.root ;
+        this.baseMicroServiceUrl = sdcConfig.api.uicache_root;
+    }
+
+    public getCatalog(): Observable<Array<Component>> {
+        let searchParams = new HttpParams();
+        searchParams = searchParams.append('excludeTypes', ResourceType.VFCMT).append('excludeTypes', ResourceType.CONFIGURATION);
+        return this.http.get<IComponentsArray>(this.baseMicroServiceUrl + this.api.GET_uicache_catalog, {params: searchParams})
+            .map(res => this.processComponentsResponse(res, true));
+    }
+
+    public getArchiveCatalog() {
+        return this.http.get<IComponentsArray>(this.baseUrl + '/v1/catalog/archive/', {})
+            .map(res => this.processComponentsResponse(res));
+    }
+
+    private processComponentsResponse(componentsArr: IComponentsArray, addSharing:boolean = false) {
+        const componentsList: Component[] = [];
+        if (componentsArr.resources) {
+            componentsList.push(...this.getResourceItems(componentsArr.resources));
+        }
+        if (componentsArr.services) {
+            componentsList.push(...this.getServiceItems(componentsArr.services));
+        }
+        if (addSharing) {
+            componentsList.forEach((item) => this.sharingService.addUuidValue(item.uniqueId, item.uuid));
+        }
+        return componentsList;
+    }
+    
+    private getResourceItems(resources){
+        let resourceItems = resources.map((resource)=>{
+            return this.componentFactory.createResource(resource)
+        })
+        return resourceItems;
+    }
+
+    private getServiceItems(services){
+        let serviceItems = services.map((service)=>{
+            return this.componentFactory.createService(service)
+        })
+        return serviceItems;
+    }
+
+}    
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
index 15750020dc..cc382a3df0 100644
--- a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
@@ -19,62 +19,102 @@
  */
 
 import {Injectable, Inject} from '@angular/core';
-import {Response, RequestOptions, Headers} from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import {PropertyFEModel, PropertyBEModel} from "app/models";
-import {CommonUtils} from "app/utils";
-import {Component, ComponentInstance, Capability, PropertyModel} from "app/models";
-import { HttpService } from '../http.service';
+import {CommonUtils, ComponentType, ServerTypeUrl, ComponentInstanceFactory} from "app/utils";
+import {Component, ComponentInstance, Capability, PropertyModel, ArtifactGroupModel, ArtifactModel, AttributeModel, IFileDownload} from "app/models";
 import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { InputBEModel } from '../../../models/properties-inputs/input-be-model';
+import { HttpHelperService } from '../http-hepler.service';
 
 @Injectable()
 export class ComponentInstanceServiceNg2 {
 
     protected baseUrl;
 
-    constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
+    private getServerTypeUrl = (componentType:string):string => {
+        switch (componentType) {
+            case ComponentType.SERVICE:
+                return ServerTypeUrl.SERVICES;
+            default:
+                return ServerTypeUrl.RESOURCES;
+        }
+    }
     getComponentInstanceProperties(component: Component, componentInstanceId: string): Observable<Array<PropertyBEModel>> {
-
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/properties')
-            .map((res: Response) => {
-                return CommonUtils.initBeProperties(res.json());
+        return this.http.get<Array<PropertyBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/properties')
+            .map(res => {
+                return CommonUtils.initBeProperties(res);
         })
     }
 
     getComponentInstanceInputs(component: Component, componentInstance: ComponentInstance): Observable<Array<PropertyBEModel>> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstance.uniqueId + '/' + componentInstance.componentUid + '/inputs')
-            .map((res: Response) => {
-                return CommonUtils.initInputs(res.json());
+        return this.http.get<Array<InputBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstance.uniqueId + '/' + componentInstance.componentUid + '/inputs')
+            .map(res => {
+                return CommonUtils.initInputs(res);
             })
     }
 
-    updateInstanceProperties(component: Component, componentInstanceId: string, properties: PropertyBEModel[]) {
+    getComponentInstanceArtifactsByGroupType = (componentType:string, componentId:string, componentInstanceId:string, artifactGroupType:string):Observable<ArtifactGroupModel> => {
+
+        return this.http.get<ArtifactGroupModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstances/" + componentInstanceId + "/artifactsByType/" + artifactGroupType)
+            .map(res => {
+                return new ArtifactGroupModel(res);
+            });
+    };
+
+    getArtifactByGroupType = (componentType:string, componentId:string, artifactGroupType:string):Observable<ArtifactGroupModel> => {
+        
+        return this.http.get<ArtifactGroupModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/artifactsByType/" + artifactGroupType)
+            .map(response => new ArtifactGroupModel(response));
+    };
+
+    changeResourceInstanceVersion = (componentType:string, componentId:string, componentInstanceId:string, componentUid:string):Observable<ComponentInstance> => {
+        return this.http.post<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstanceId + '/changeVersion', {'componentUid': componentUid})
+        .map((res) => {
+            return ComponentInstanceFactory.createComponentInstance(res);
+        })
+    };
 
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/properties', properties)
-            .map((res: Response) => {
-                return res.json().map((resProperty) => new PropertyBEModel(resProperty));
+    updateComponentInstance = (componentType:string, componentId:string, componentInstance:ComponentInstance):Observable<ComponentInstance> => {
+        return this.http.post<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance.toJSON())
+            .map((response) => {
+                return ComponentInstanceFactory.createComponentInstance(response);
+            });
+    };
+
+    updateInstanceProperties(componentType:string, componentId:string, componentInstanceId: string, properties: PropertyBEModel[]) {
+
+        return this.http.post<Array<PropertyModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstanceId + '/properties', properties)
+            .map((res) => {
+                return res.map((resProperty) => {
+                    let newProp = new PropertyModel(resProperty);
+                    newProp.resourceInstanceUniqueId = componentInstanceId
+                    return newProp;
+                });
             });
     }
 
-    getInstanceCapabilityProperties(component: Component, componentInstanceId: string, capability: Capability): Observable<Array<PropertyModel>> {
+    getInstanceCapabilityProperties(componentType: string, componentId: string, componentInstanceId: string, capability: Capability): Observable<Array<PropertyModel>> {
 
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' + capability.type +
+        return this.http.get<Array<PropertyModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/componentInstances/' + componentInstanceId + '/capability/' + capability.type +
             '/capabilityName/' +  capability.name + '/ownerId/' + capability.ownerId + '/properties')
-            .map((res: Response) => {
-                capability.properties = res.json().map((capProp) => new PropertyModel(capProp));  // update capability properties
+            .map((res) => {
+                capability.properties = res.map((capProp) => new PropertyModel(capProp));  // update capability properties
                 return capability.properties;
             })
     }
 
     updateInstanceCapabilityProperties(component: Component, componentInstanceId: string, capability: Capability, properties: PropertyBEModel[]): Observable<Array<PropertyModel>> {
 
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' +  capability.type +
+        return this.http.put<Array<PropertyModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' +  capability.type +
             '/capabilityName/' +  capability.name + '/ownerId/' + capability.ownerId + '/properties', properties)
-            .map((res: Response) => {
-                const savedProperties: PropertyModel[] = res.json().map((resProperty) => new PropertyModel(resProperty));
+            .map((res) => {
+                const savedProperties: PropertyModel[] = res.map((resProperty) => new PropertyModel(resProperty));
                 savedProperties.forEach((savedProperty) => {
                     const propIdx = capability.properties.findIndex((p) => p.uniqueId === savedProperty.uniqueId);
                     if (propIdx !== -1) {
@@ -87,37 +127,87 @@ export class ComponentInstanceServiceNg2 {
 
     updateInstanceInputs(component: Component, componentInstanceId: string, inputs: PropertyBEModel[]): Observable<PropertyBEModel[]> {
 
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/inputs', inputs)
-            .map((res: Response) => {
-                return res.json().map((resInput) => new PropertyBEModel(resInput));
+        return this.http.post<Array<PropertyModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/inputs', inputs)
+            .map((res) => {
+                return res.map((resInput) => new PropertyBEModel(resInput));
             });
     }
 
     getComponentGroupInstanceProperties(component: Component, groupInstanceId: string): Observable<Array<PropertyBEModel>> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/groups/' + groupInstanceId + '/properties')
-            .map((res: Response) => {
-                return CommonUtils.initBeProperties(res.json());
+        return this.http.get<Array<PropertyBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/groups/' + groupInstanceId + '/properties')
+            .map((res) => {
+                return CommonUtils.initBeProperties(res);
+            });
+    }
+
+    updateComponentGroupInstanceProperties(componentType:string, componentId:string, groupInstanceId: string, properties: PropertyBEModel[]): Observable<Array<PropertyBEModel>> {
+        return this.http.put<Array<PropertyBEModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/groups/' + groupInstanceId + '/properties', properties)
+            .map((res) => {
+                return res.map((resProperty) => new PropertyBEModel(resProperty));
             });
     }
 
-    updateComponentGroupInstanceProperties(component: Component, groupInstanceId: string, properties: PropertyBEModel[]): Observable<Array<PropertyBEModel>> {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/groups/' + groupInstanceId + '/properties', properties)
-            .map((res: Response) => {
-                return res.json().map((resProperty) => new PropertyBEModel(resProperty));
+    getComponentPolicyInstanceProperties(componentType:string, componentId:string, policyInstanceId: string): Observable<Array<PropertyBEModel>> {
+        return this.http.get<Array<PropertyBEModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/policies/' + policyInstanceId + '/properties')
+            .map((res) => {
+                return CommonUtils.initBeProperties(res);
             });
     }
 
-    getComponentPolicyInstanceProperties(component: Component, policyInstanceId: string): Observable<Array<PropertyBEModel>> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policyInstanceId + '/properties')
-            .map((res: Response) => {
-                return CommonUtils.initBeProperties(res.json());
+    updateComponentPolicyInstanceProperties(componentType:string, componentId:string, policyInstanceId: string, properties: PropertyBEModel[]): Observable<Array<PropertyBEModel>> {
+        return this.http.put<Array<PropertyBEModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/policies/' + policyInstanceId + '/properties', properties)
+            .map((res) => {
+                return res.map((resProperty) => new PropertyBEModel(resProperty));
             });
     }
 
-    updateComponentPolicyInstanceProperties(component: Component, policyInstanceId: string, properties: PropertyBEModel[]): Observable<Array<PropertyBEModel>> {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policyInstanceId + '/properties', properties)
-            .map((res: Response) => {
-                return res.json().map((resProperty) => new PropertyBEModel(resProperty));
+    addInstanceArtifact = (componentType:string, componentId:string, instanceId:string, artifact:ArtifactModel):Observable<ArtifactModel> => {
+        // let deferred = this.$q.defer<ArtifactModel>();
+        let headerObj = new HttpHeaders();
+        if (artifact.payloadData) {
+            headerObj = headerObj.set('Content-MD5', HttpHelperService.getHeaderMd5(artifact));
+        }
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + instanceId + '/artifacts', JSON.stringify(artifact), {headers: headerObj})
+        .map((res) => {
+            return new ArtifactModel(res);
+        });
+    };
+
+    updateInstanceArtifact = (componentType:string, componentId:string, instanceId:string, artifact:ArtifactModel):Observable<ArtifactModel> => {
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + instanceId + '/artifacts/' + artifact.uniqueId, artifact).map((res) => {
+            return new ArtifactModel(res);
+        });;
+    };
+
+    deleteInstanceArtifact = (componentId:string, componentType:string, instanceId:string, artifactId:string, artifactLabel:string):Observable<ArtifactModel> => {
+        return this.http.delete<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstance/" + instanceId + '/artifacts/' + artifactId + '?operation=' + artifactLabel)
+            .map((res) => {
+                return new ArtifactModel(res);
             });
     }
+
+    downloadInstanceArtifact = (componentType:string, componentId:string, instanceId:string, artifactId:string):Observable<IFileDownload> => {
+        return this.http.get<IFileDownload>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstances/" + instanceId + "/artifacts/" + artifactId);
+    };
+
+    uploadInstanceEnvFile = (componentType:string, componentId:string, instanceId:string, artifact:ArtifactModel):Observable<ArtifactModel> => {
+        let headerObj = new HttpHeaders();
+        if (artifact.payloadData) {
+            headerObj = headerObj.set('Content-MD5', HttpHelperService.getHeaderMd5(artifact));
+        }
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + instanceId + '/artifacts/' + artifact.uniqueId, JSON.stringify(artifact), {headers: headerObj});
+    };
+
+
+    updateInstanceAttribute = (componentType:string, componentId:string, attribute:AttributeModel):Observable<AttributeModel> => {
+        let instanceId = attribute.resourceInstanceUniqueId;
+        return this.http.post<AttributeModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstance/" + instanceId + "/attribute", attribute)
+            .map((response) => {
+                let newAttribute = new AttributeModel(response);
+                newAttribute.readonly = true;
+                newAttribute.resourceInstanceUniqueId = instanceId;
+                return newAttribute;
+            });
+    };
+
 }
diff --git a/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
index b0cc1b8f1a..9952b03c7c 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
@@ -24,7 +24,7 @@
 import { Injectable } from '@angular/core';
 import {WorkspaceMode, ComponentState, Role} from "../../../utils/constants";
 import { Component as ComponentData } from "app/models";
-import { CacheService } from "app/services/cache-service"
+import { CacheService } from "app/services-ng2";
 
 @Injectable()
 
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
index 6e9d0e8031..15e5a7960a 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
@@ -20,15 +20,18 @@
 
 
 import {Injectable} from "@angular/core";
-import {Component} from "../../../models/components/component";
+import {Component} from "app/models";
 import {ComponentServiceNg2} from "./component.service";
 import {ServiceServiceNg2} from "./service.service";
+import {CacheService} from "app/services-ng2";
 
 @Injectable()
 export class ComponentServiceFactoryNg2 {
+
     componentService: ComponentServiceNg2;
     serviceService: ServiceServiceNg2;
-    constructor(componentService: ComponentServiceNg2, serviceService: ServiceServiceNg2) {
+
+    constructor(componentService: ComponentServiceNg2, serviceService: ServiceServiceNg2, private cacheService:CacheService) {
         this.serviceService = serviceService;
         this.componentService = componentService;
     }
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index 445e1231f9..760bfc591b 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -23,51 +23,52 @@ import {Injectable, Inject} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import {Response, URLSearchParams, Headers} from '@angular/http';
-import { Component, ComponentInstance, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData,
-    PropertyBEModel, InterfaceModel, OperationModel, BEOperationModel, Capability, Requirement, PolicyInstance} from "app/models";
-import {COMPONENT_FIELDS, CommonUtils, SERVICE_FIELDS} from "app/utils";
-import {downgradeInjectable} from '@angular/upgrade/static';
+import { Component, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData, OperationModel, CreateOperationResponse, ArtifactModel} from "app/models";
+import {COMPONENT_FIELDS} from "app/utils";
 import {ComponentGenericResponse} from "../responses/component-generic-response";
 import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
 import {API_QUERY_PARAMS} from "app/utils";
-import { ComponentType, ServerTypeUrl } from "../../../utils/constants";
-import { HttpService } from '../http.service';
+import {ComponentType, ServerTypeUrl, SERVICE_FIELDS} from "../../../utils/constants";
 import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
-import {ConstraintObject} from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
 import {IDependenciesServerResponse} from "../responses/dependencies-server-response";
 import {AutomatedUpgradeGenericResponse} from "../responses/automated-upgrade-response";
 import {IAutomatedUpgradeRequestObj} from "../../pages/automated-upgrade/automated-upgrade.service";
-
-declare var angular:angular.IAngularStatic;
-
+import {ComponentInstance} from "../../../models/componentsInstances/componentInstance";
+import {CommonUtils} from "../../../utils/common-utils";
+import {RelationshipModel} from "../../../models/graph/relationship";
+import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
+import { BEOperationModel, InterfaceModel } from "../../../models/operation";
+import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
+import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
+import { ConstraintObject } from "../../components/logic/service-dependencies/service-dependencies.component";
+import { Requirement } from "../../../models/requirement";
+import { Capability } from "../../../models/capability";
+
+/*
+PLEASE DO NOT USE THIS SERVICE IN ANGULAR2! Use the topology-template.service instead
+ */
 @Injectable()
 export class ComponentServiceNg2 {
 
     protected baseUrl;
 
-    constructor(protected http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
-    protected getComponentDataByFieldsName(componentType:string, componentId: string, fields:Array<string>):Observable<ComponentGenericResponse> {
+    protected getComponentDataByFieldsName(componentType:string, componentId:string, fields:Array<string>):Observable<ComponentGenericResponse> {
 
-        let params:URLSearchParams = new URLSearchParams();
+        let params: HttpParams = new HttpParams();
         _.forEach(fields, (field:string):void => {
-            params.append(API_QUERY_PARAMS.INCLUDE, field);
+            params = params.append(API_QUERY_PARAMS.INCLUDE, field);
         });
 
-        return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {search: params})
-            .map((res:Response) => {
-                return this.analyzeComponentDataResponse(res);
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {params: params})
+            .map((res) => {
+                return new ComponentGenericResponse().deserialize(res);
             });
     }
-
-    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
-        return new ComponentGenericResponse().deserialize(res.json());
-    }
-
-    private getServerTypeUrl = (componentType:string):string => {
+    protected getServerTypeUrl = (componentType:string):string => {
         switch (componentType) {
             case ComponentType.SERVICE:
                 return ServerTypeUrl.SERVICES;
@@ -76,15 +77,23 @@ export class ComponentServiceNg2 {
         }
     }
 
-    getComponentMetadata(component:Component):Observable<ComponentGenericResponse> {
-        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    getFullComponent(uniqueId:string):Observable<ComponentGenericResponse> {
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + uniqueId)
+            .map((res) => {
+                return new ComponentGenericResponse().deserialize(res);
+            });
     }
 
+    getComponentMetadata(uniqueId:string, type:string):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    }
+
+
     getComponentInstanceAttributesAndProperties(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_INSTANCES_ATTRIBUTES]);
     }
 
-    getComponentInstanceProperties(component:Component):Observable<ComponentGenericResponse> {
+    getComponentInstanceProperties(component:Component): Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES]);
     }
 
@@ -132,17 +141,15 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
     }
 
-    getInterfaces(component:Component):Observable<ComponentGenericResponse> {
+    getInterfaceOperations(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INTERFACE_OPERATIONS]);
     }
 
     getInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.get<OperationModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations/' + operation.uniqueId);
     }
 
+    // tslint:disable-next-line:member-ordering
     createInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
         const operationList = {
             'interfaces': {
@@ -154,9 +161,9 @@ export class ComponentServiceNg2 {
                 }
             }
         };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
-            .map((res:Response) => {
-                const interf:InterfaceModel = _.find(res.json().interfaces, interf => interf.type === operation.interfaceType);
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
+            .map((res:any) => {
+                const interf:InterfaceModel = _.find(res.interfaces, interf => interf.type === operation.interfaceType);
                 const newOperation:OperationModel = _.find(interf.operations, op => op.name === operation.name);
                 return new OperationModel({
                     ...newOperation,
@@ -167,21 +174,22 @@ export class ComponentServiceNg2 {
             });
     }
 
+    // tslint:disable-next-line:member-ordering
     updateInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
         const operationList = {
-            'interfaces': {
+            interfaces: {
                 [operation.interfaceType]: {
-                    'type': operation.interfaceType,
-                    'operations': {
+                    type: operation.interfaceType,
+                    operations: {
                         [operation.name]: new BEOperationModel(operation)
                     }
                 }
             }
         };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
-            .map((res:Response) => {
-                const interf:InterfaceModel = _.find(res.json().interfaces, interf => interf.type === operation.interfaceType);
-                const newOperation:OperationModel = _.find(interf.operations, op => op.name === operation.name);
+        return this.http.put<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
+            .map((res: any) => {
+                const interf: InterfaceModel = _.find(res.interfaces, interf => interf.type === operation.interfaceType);
+                const newOperation: OperationModel = _.find(interf.operations, op => op.name === operation.name);
                 return new OperationModel({
                     ...newOperation,
                     interfaceType: interf.type,
@@ -191,18 +199,16 @@ export class ComponentServiceNg2 {
             });
     }
 
-    deleteInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId)
-            .map((res:Response) => {
-                return res.json();
-            });
+
+    deleteInterfaceOperation(component: Component, operation:OperationModel):Observable<OperationModel> {
+        return this.http.delete<OperationModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId);
     }
 
     getInterfaceTypes(component:Component):Observable<{[id:string]: Array<string>}> {
-        return this.http.get(this.baseUrl + 'interfaceLifecycleTypes')
-            .map((res:Response) => {
+        return this.http.get<any>(this.baseUrl + 'interfaceLifecycleTypes')
+            .map((res: any) => {
                 const interfaceMap = {};
-                _.forEach(res.json(), (interf:any) => {
+                _.forEach(res, (interf: any) => {
                     interfaceMap[interf.toscaPresentation.type] = _.keys(interf.toscaPresentation.operations);
                 });
                 return interfaceMap;
@@ -217,19 +223,18 @@ export class ComponentServiceNg2 {
             payloadData: oldOperation.artifactData
         };
 
-        const headers = new Headers();
+        const headers = new HttpHeaders();
         JSON.stringify(payload);
         const payloadString = JSON.stringify(payload, null, '  ');
         const md5Result = md5(payloadString).toLowerCase();
         headers.append('Content-MD5', btoa(md5Result));
 
         return this.http.post(this.baseUrl + component.getTypeUrl() + component.uuid + '/interfaces/' + newOperation.interfaceId + '/operations/' + newOperation.uniqueId + '/artifacts/' + newOperation.implementation.artifactUUID,
-                payload,
-                {headers}
-            ).map((res: Response) => {
-                const fileName = res.json().artifactDisplayName || res.json().artifactName;
+                payload, {headers}
+            ).map((res: any) => {
+                const fileName = res.artifactDisplayName || res.artifactName;
                 newOperation.artifactFileName = fileName;
-                return res.json();
+                return res;
             });
     }
 
@@ -237,78 +242,17 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
     }
 
-    createCapability(component: Component, capabilityData: Capability): Observable<Array<Capability>> {
-        let capBEObj = {
-            'capabilities': {
-                [capabilityData.type]: [capabilityData]
-            }
-        };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities', capBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    updateCapability(component: Component, capabilityData: Capability): Observable<Array<Capability>> {
-        let capBEObj = {
-            'capabilities': {
-                [capabilityData.type]: [capabilityData]
-            }
-        };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities', capBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    deleteCapability(component: Component, capId: string): Observable<Capability> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities/' + capId)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    createRequirement(component: Component, requirementData: Requirement): Observable<any> {
-        let reqBEObj = {
-            'requirements': {
-                [requirementData.capability]: [requirementData]
-            }
-        };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements', reqBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    updateRequirement(component: Component, requirementData: Requirement): Observable<any> {
-        let reqBEObj = {
-            'requirements': {
-                [requirementData.capability]: [requirementData]
-            }
-        };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements', reqBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    deleteRequirement(component: Component, reqId: string): Observable<Requirement> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements/' + reqId)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
     getDeploymentGraphData(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
     }
 
     createInput(component:Component, inputsToCreate:InstancePropertiesAPIMap, isSelf:boolean):Observable<any> {
-        let inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs)
-            .map(res => {
-                return res.json();
-            })
+        const inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs);
     }
 
     createListInput(component:Component, input:any, isSelf:boolean):Observable<any> {
@@ -324,10 +268,7 @@ export class ComponentServiceNg2 {
         } else {
             inputs = input;
         }
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/listInput', inputs)
-            .map(res => {
-                return res.json();
-            })
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/listInput', inputs);
     }
 
     createPolicy(component:Component, policiesToCreate:InstancePropertiesAPIMap, isSelf:boolean):Observable<any> {
@@ -341,78 +282,71 @@ export class ComponentServiceNg2 {
                         ...policiesToCreate.componentInstanceProperties
                     }
                 };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList)
-            .map(res => {
-                return res.json();
-            });
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList);
     }
 
     deletePolicy(component:Component, policy: PolicyInstance) {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy)
-            .map(res => {
-                return res.json();
-            });
+        return this.http.put<PolicyInstance>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy);
     }
 
-    restoreComponent(componentType:string, componentId:string){
+    restoreComponent(componentType:string, componentId:string) {
         return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/restore', {})
     }
 
-    archiveComponent(componentType:string, componentId:string){
+    archiveComponent(componentType:string, componentId:string) {
         return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/archive', {})
     }
 
 
     deleteInput(component:Component, input:InputBEModel):Observable<InputBEModel> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
-            .map((res:Response) => {
-                return new InputBEModel(res.json());
-            });
+
+        return this.http.delete<InputBEModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
+            .map((res) => {
+                return new InputBEModel(res);
+            })
     }
 
     updateComponentInputs(component:Component, inputs:InputBEModel[]):Observable<InputBEModel[]> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
-            .map((res:Response) => {
-                return res.json().map((input) => new InputBEModel(input));
+
+        return this.http.post<InputBEModel[]>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
+            .map((res) => {
+                return res.map((input) => new InputBEModel(input));
             })
     }
 
-    filterComponentInstanceProperties(component: Component, filterData:FilterPropertiesAssignmentData): Observable<InstanceBePropertiesMap> {//instance-property-be-map
-        let params: URLSearchParams = new URLSearchParams();
+    filterComponentInstanceProperties(component:Component, filterData:FilterPropertiesAssignmentData):Observable<InstanceBePropertiesMap> {//instance-property-be-map
+        let params: HttpParams = new HttpParams();
         _.forEach(filterData.selectedTypes, (type:string) => {
-            params.append('resourceType', type);
+            params = params.append('resourceType', type);
         });
 
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {search: params})
-            .map((res: Response) => {
-                return res.json();
-            });
+        return this.http.get<InstanceBePropertiesMap>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {params: params});
     }
 
     createServiceProperty(component: Component, propertyModel:PropertyBEModel): Observable<PropertyBEModel> {
         let serverObject = {};
         serverObject[propertyModel.name] = propertyModel;
         return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', serverObject)
-            .map(res => {
-                let property:PropertyBEModel = new PropertyBEModel(res.json());
+            .map((res: PropertyBEModel) => {
+                const property: PropertyBEModel = new PropertyBEModel(res);
                 return property;
             })
     }
 
-    getServiceProperties(component: Component): Observable<Array<PropertyBEModel>> {
+    getServiceProperties(component: Component): Observable<PropertyBEModel[]> {
         return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties')
-            .map((res: Response) => {
-                if (!res.text()){
+            .map((res: PropertyBEModel[]) => {
+                if (!res) {
                     return new Array<PropertyBEModel>();
                 }
-                return CommonUtils.initBeProperties(res.json());
+                return CommonUtils.initBeProperties(res);
             });
     }
 
     updateServiceProperties(component: Component, properties: PropertyBEModel[]) {
-        return this.http.put( this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', properties)
-            .map((res: Response) => {
-                const resJson = res.json();
+        return this.http.put<PropertyBEModel[]>( this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', properties)
+            .map((res) => {
+                const resJson = res;
                 return _.map(resJson,
                     (resValue:PropertyBEModel) => new PropertyBEModel(resValue));
             });
@@ -425,25 +359,16 @@ export class ComponentServiceNg2 {
             })
     }
 
-    getDependencies(componentType:string, componentId: string):Observable<Array<IDependenciesServerResponse>> {
-        return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies')
-            .map((res:Response) => {
-                return res.json();
-            });
+    getDependencies(componentType:string, componentId: string):Observable<IDependenciesServerResponse[]> {
+        return this.http.get<IDependenciesServerResponse[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies');
     }
 
-    automatedUpgrade(componentType:string, componentId: string, componentsIdsToUpgrade:Array<IAutomatedUpgradeRequestObj>):Observable<AutomatedUpgradeGenericResponse> {
-        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade)
-            .map((res:Response) => {
-                return res.json();
-            });
+    automatedUpgrade(componentType:string, componentId:string, componentsIdsToUpgrade:IAutomatedUpgradeRequestObj[]):Observable<AutomatedUpgradeGenericResponse> {
+        return this.http.post<AutomatedUpgradeGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade);
     }
 
-    updateComponentInstance(component:Component, componentInstance:ComponentInstance):Observable<ComponentInstance> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance)
-            .map((res:Response) => {
-                return res.json();
-            });
+    updateMultipleComponentInstances(componentId:string, instances:ComponentInstance[]):Observable<ComponentInstance[]> {
+        return this.http.post<ComponentInstance[]>(this.baseUrl + componentId + '/resourceInstance/multipleComponentInstance', instances);
     }
 
     getServiceFilterConstraints(component:Component):Observable<ComponentGenericResponse> {
@@ -451,24 +376,18 @@ export class ComponentServiceNg2 {
     }
 
     createServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraint:ConstraintObject):Observable<any> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter', constraint)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter', constraint);
     }
 
-    updateServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraints:Array<ConstraintObject>):Observable<any> {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/', constraints)
-            .map((res:Response) => {
-                return res.json();
-            });
+    updateServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraints:ConstraintObject[]):Observable<any> {
+        return this.http.put<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/', constraints);
     }
 
     deleteServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraintIndex:number) {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/' + constraintIndex)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.delete<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/' + constraintIndex);
     }
-}
 
+    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
+        return new ComponentGenericResponse().deserialize(res);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/component-services/resource.service.ts b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
index 699e762a60..d20f5415bc 100644
--- a/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
@@ -21,14 +21,14 @@
 import { Injectable } from '@angular/core';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class ResourceServiceNg2 {
 
     protected baseUrl = "";
 
-    constructor(private http: Http) {
+    constructor(private http: HttpClient) {
 
     }
 
diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
index dce4e814ec..9460a32323 100644
--- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
@@ -22,9 +22,7 @@ import { Injectable, Inject } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import { Response, URLSearchParams } from '@angular/http';
-import {Service, OperationModel} from "app/models";
-import { HttpService } from '../http.service';
+import {Service} from "app/models";
 
 import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
 import {ForwardingPath} from "app/models/forwarding-path";
@@ -34,77 +32,53 @@ import {Component} from "app/models/components/component";
 import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
 import {COMPONENT_FIELDS, SERVICE_FIELDS} from "app/utils/constants";
 import {ComponentServiceNg2} from "./component.service";
-import {ServiceGenericResponse} from "app/ng2/services/responses/service-generic-response";
 import {ServicePathMapItem} from "app/models/graph/nodes-and-links-map";
-import {ConsumptionInput} from 'app/ng2/components/logic/service-consumption/service-consumption.component';
-
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { OperationModel } from '../../../models/operation';
+import { ConsumptionInput } from '../../components/logic/service-consumption/service-consumption.component';
 
 @Injectable()
 export class ServiceServiceNg2 extends ComponentServiceNg2 {
 
     protected baseUrl = "";
 
-    constructor(protected http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         super(http, sdcConfig);
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
     validateConformanceLevel(service: Service): Observable<boolean> {
 
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uuid + '/conformanceLevelValidation')
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    getNodesAndLinksMap(service: Service):Observable<Array<ServicePathMapItem>> {
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/linksMap').map(res => {
-            return <Array<ServicePathMapItem>>res.json();
-        });
-    }
-
-    getServicePath(service: Service, id: string):Observable<any> {
-        return this.http.get(this.baseUrl  + service.getTypeUrl() + service.uniqueId +  '/paths/' + id)
-            .map(res => {
-                return res.json();
-            })
+        return this.http.get<boolean>(this.baseUrl + service.getTypeUrl() + service.uuid + '/conformanceLevelValidation');
     }
 
-    getServicePaths(service: Service):Observable<any> {
-        return this.http.get(this.baseUrl  + service.getTypeUrl() + service.uniqueId +  '/paths')
-            .map(res => {
-                return res.json();
-            })
+    getNodesAndLinksMap(serviceId: string):Observable<Array<ServicePathMapItem>> {
+        return this.http.get<Array<ServicePathMapItem>>(this.baseUrl + 'services/' + serviceId + '/linksMap');
     }
 
-    createOrUpdateServicePath(service: Service, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
+    createOrUpdateServicePath(serviceId: string, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
         if (inputsToCreate.uniqueId) {
-            return this.updateServicePath(service, inputsToCreate);
+            return this.updateServicePath(serviceId, inputsToCreate);
         } else {
-            return this.createServicePath(service, inputsToCreate);
+            return this.createServicePath(serviceId, inputsToCreate);
         }
     }
 
-    createServicePath(service: Service, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
+    createServicePath(serviceId: string, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
         let input = new ServicePathRequestData(inputsToCreate);
-
-        return this.http.post(this.baseUrl  + service.getTypeUrl() + service.uniqueId +   '/paths', input)
-            .map(res => {
-                return this.parseServicePathResponse(res);
-            });
+        return this.http.post<ForwardingPath>(this.baseUrl  + 'services/' + serviceId +   '/paths', input).map((res:any) => {
+            return this.parseServicePathResponse(res);
+        });
     }
 
-    deleteServicePath(service: Service, id: string):Observable<any> {
-        return this.http.delete(this.baseUrl  + service.getTypeUrl() + service.uniqueId + '/paths/' + id )
-            .map((res) => {
-                return res.json();
-            });
+    deleteServicePath(serviceId: string, id: string):Observable<any> {
+        return this.http.delete<any>(this.baseUrl  + 'services/' + serviceId + '/paths/' + id);
     }
 
-    updateServicePath(service: Service, inputsToUpdate:ForwardingPath):Observable<ForwardingPath> {
+    updateServicePath(serviceId: string, inputsToUpdate:ForwardingPath):Observable<ForwardingPath> {
         let input = new ServicePathRequestData(inputsToUpdate);
 
-        return this.http.put(this.baseUrl  + service.getTypeUrl() + service.uniqueId + '/paths', input)
+        return this.http.put<{[key:string]:ForwardingPath}>(this.baseUrl  + 'services/' + serviceId + '/paths', input)
             .map((res) => {
                 return this.parseServicePathResponse(res);
             });
@@ -122,28 +96,25 @@ export class ServiceServiceNg2 extends ComponentServiceNg2 {
     }
 
     getServiceConsumptionInputs(service: Service, serviceInstanceId: String, interfaceId: string, operation: OperationModel): Observable<any> {
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId + '/operations/' + operation.uniqueId + '/inputs')
-            .map(res => {
-                return res.json();
-            });
+        return this.http.get<any>(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId +
+            '/operations/' + operation.uniqueId + '/inputs');
     }
 
     createOrUpdateServiceConsumptionInputs(service: Service, serviceInstanceId: String, consumptionInputsList: Array<{[id: string]: Array<ConsumptionInput>}>): Observable<any> {
         return this.http.post(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId, consumptionInputsList);
     }
 
-    checkComponentInstanceVersionChange(service: Service, newVersionId: string):Observable<Array<string>> {
-        let instanceId = service.selectedInstance.uniqueId;
-        let queries = {componentInstanceId: instanceId, newComponentInstanceId: newVersionId};
+    checkComponentInstanceVersionChange(componentType:string, componentId:string, instanceId:string, newInstanceId:string):Observable<Array<string>> {
+        let queries = {componentInstanceId: instanceId, newComponentInstanceId: newInstanceId};
 
-        let params:URLSearchParams = new URLSearchParams();
+        let params:HttpParams = new HttpParams();
         _.map(_.keys(queries), (key:string):void => {
-            params.append(key, queries[key]);
+            params = params.append(key, queries[key]);
         });
 
-        let url = this.baseUrl + service.getTypeUrl() + service.uniqueId + '/paths-to-delete';
-        return this.http.get(url, {search: params}).map((res: Response) => {
-            return res.json().forwardingPathToDelete;
+        let url = this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/paths-to-delete';
+        return this.http.get<any>(url, {params: params}).map((res) => {
+            return res.forwardingPathToDelete;
         });
     }
 
@@ -151,12 +122,8 @@ export class ServiceServiceNg2 extends ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, SERVICE_FIELDS.FORWARDING_PATHS, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]);
     }
 
-    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
-        return new ServiceGenericResponse().deserialize(res.json());
-    }
-
-    private parseServicePathResponse(res: Response):ForwardingPath {
-        let resJSON = res.json();
+    private parseServicePathResponse(res: { [key:string]:ForwardingPath }):ForwardingPath {
+        let resJSON = res;
         let pathId = Object.keys(resJSON.forwardingPaths)[0];
         let forwardingPath = resJSON.forwardingPaths[pathId];
         let path:ForwardingPath = new ForwardingPath();
diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
new file mode 100644
index 0000000000..0abb163404
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
@@ -0,0 +1,515 @@
+/**
+ * Created by ob0695 on 6/26/2018.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import * as _ from "lodash";
+import {Injectable, Inject} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import {
+    Component,
+    InputBEModel,
+    InstancePropertiesAPIMap,
+    FilterPropertiesAssignmentData,
+    ArtifactModel,
+    PropertyModel,
+    IFileDownload,
+    AttributeModel,
+    IAttributeModel, Capability, Requirement
+} from "app/models";
+import {ArtifactGroupType, COMPONENT_FIELDS} from "app/utils";
+import {ComponentGenericResponse} from "../responses/component-generic-response";
+import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
+import {API_QUERY_PARAMS} from "app/utils";
+import {ComponentType, ServerTypeUrl, SERVICE_FIELDS} from "../../../utils/constants";
+import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
+import {IDependenciesServerResponse} from "../responses/dependencies-server-response";
+import {AutomatedUpgradeGenericResponse} from "../responses/automated-upgrade-response";
+import {IAutomatedUpgradeRequestObj} from "../../pages/automated-upgrade/automated-upgrade.service";
+import {ComponentInstance} from "../../../models/componentsInstances/componentInstance";
+import {CommonUtils} from "../../../utils/common-utils";
+import {RelationshipModel} from "../../../models/graph/relationship";
+import {ServiceGenericResponse} from "../responses/service-generic-response";
+import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
+import { HttpHelperService } from "../http-hepler.service";
+import {
+    Component as TopologyTemplate,
+    FullComponentInstance,
+    Service,
+    OperationModel,
+} from 'app/models';
+import { ConsumptionInput } from "../../components/logic/service-consumption/service-consumption.component";
+import { ConstraintObject } from "../../components/logic/service-dependencies/service-dependencies.component";
+import { ComponentMetadata } from "../../../models/component-metadata";
+import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
+import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
+
+/* we need to use this service from now, we will remove component.service when we finish remove the angular1.
+ The service is duplicated since we can not use downgrades service with NGXS*/
+
+@Injectable()
+export class TopologyTemplateService {
+
+    protected baseUrl;
+
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+        this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
+    }
+
+    getFullComponent(componentType: string, uniqueId: string): Observable<Component> {
+        return this.http.get<Component>(this.baseUrl + this.getServerTypeUrl(componentType) + uniqueId);
+    }
+
+    getComponentMetadata(uniqueId: string, type: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    }
+
+    getComponentInstanceAttributesAndProperties(uniqueId: string, type: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_INSTANCES_ATTRIBUTES]);
+    }
+
+    async getComponentAttributes(componentType: string, componentId: string): Promise<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_ATTRIBUTES]).toPromise();
+    }
+
+    getComponentCompositionData(componentUniqueId: string, componentType: string): Observable<ComponentGenericResponse> {
+        const params: string[] = [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES,
+            COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS];
+        if (componentType === ComponentType.SERVICE) {
+            params.push(COMPONENT_FIELDS.FORWARDING_PATHS);
+        }
+        return this.getComponentDataByFieldsName(componentType, componentUniqueId, params);
+    }
+
+    getComponentResourcePropertiesData(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId,
+            [COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]);
+    }
+
+    getComponentResourceInstances(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentInputs(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INPUTS]);
+    }
+
+    getComponentInputsWithProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId,
+            [COMPONENT_FIELDS.COMPONENT_INPUTS, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
+    }
+
+    getComponentDeploymentArtifacts(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_DEPLOYMENT_ARTIFACTS]);
+    }
+
+    getComponentInformationalArtifacts(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS]);
+    }
+
+    getComponentInformationalArtifactsAndInstances(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS, COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentToscaArtifacts(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_TOSCA_ARTIFACTS]);
+    }
+
+    getComponentProperties(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
+    }
+
+    getCapabilitiesAndRequirements(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
+    }
+
+    getRequirementsAndCapabilitiesWithProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId,
+            [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES, COMPONENT_FIELDS.COMPONENT_CAPABILITIES_PROPERTIES]);
+    }
+
+    getDeploymentGraphData(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
+    }
+
+    createInput(component: Component, inputsToCreate: InstancePropertiesAPIMap, isSelf: boolean): Observable<any> {
+        const inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs);
+    }
+
+    restoreComponent(componentType: string, componentId: string) {
+        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/restore', {});
+    }
+
+    archiveComponent(componentType: string, componentId: string) {
+        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/archive', {});
+    }
+
+    deleteInput(component: Component, input: InputBEModel): Observable<InputBEModel> {
+        return this.http.delete<InputBEModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
+            .map((res) => {
+                return new InputBEModel(res);
+            });
+    }
+
+    updateComponentInputs(component: Component, inputs: InputBEModel[]): Observable<InputBEModel[]> {
+        return this.http.post<InputBEModel[]>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
+            .map((res) => {
+                return res.map((input) => new InputBEModel(input));
+            });
+    }
+
+    filterComponentInstanceProperties(component: Component, filterData: FilterPropertiesAssignmentData): Observable<InstanceBePropertiesMap> {// instance-property-be-map
+        let params: HttpParams = new HttpParams();
+        _.forEach(filterData.selectedTypes, (type: string) => {
+            params = params.append('resourceType', type);
+        });
+
+        // tslint:disable-next-line:object-literal-shorthand
+        return this.http.get<InstanceBePropertiesMap>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {params: params});
+    }
+
+    createServiceProperty(componentId: string, propertyModel: PropertyBEModel): Observable<PropertyBEModel> {
+        const serverObject = {};
+        serverObject[propertyModel.name] = propertyModel;
+        return this.http.post<PropertyBEModel>(this.baseUrl + 'services/' + componentId + '/properties', serverObject)
+            .map((res) => {
+                const property: PropertyBEModel = new PropertyBEModel(res);
+                return property;
+            });
+    }
+
+    getServiceProperties(componentId: string): Observable<PropertyBEModel[]> {
+        return this.http.get<any>(this.baseUrl + 'services/' + componentId + '/properties')
+            .map((res) => {
+                if (!res) {
+                    return new Array<PropertyBEModel>();
+                }
+                return CommonUtils.initBeProperties(res);
+            });
+    }
+
+    updateServiceProperties(componentId: string, properties: PropertyBEModel[]) {
+        return this.http.put<any>( this.baseUrl + 'services/' + componentId + '/properties', properties)
+            .map((res) => {
+                const resJson = res;
+                return _.map(resJson,
+                    (resValue: PropertyBEModel) => new PropertyBEModel(resValue));
+            });
+    }
+
+    deleteServiceProperty(componentId: string, property: PropertyBEModel): Observable<string> {
+        return this.http.delete(this.baseUrl + 'services/' + componentId + '/properties/' + property.uniqueId )
+            .map((res: Response) => {
+                return property.uniqueId;
+            });
+    }
+
+    getDependencies(componentType: string, componentId: string): Observable<IDependenciesServerResponse[]> {
+        return this.http.get<IDependenciesServerResponse[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies');
+    }
+
+    automatedUpgrade(componentType: string, componentId: string, componentsIdsToUpgrade: IAutomatedUpgradeRequestObj[]): Observable<AutomatedUpgradeGenericResponse> {
+        return this.http.post<AutomatedUpgradeGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade);
+    }
+
+    updateComponentInstance(componentMetaDataId: string, componentInstance:ComponentInstance): Observable<ComponentInstance> {
+        return this.http.post<ComponentInstance>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance);
+    }
+
+    updateMultipleComponentInstances(componentId: string, componentType: string, instances: ComponentInstance[]): Observable<ComponentInstance[]> {
+        return this.http.post<ComponentInstance[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/multipleComponentInstance', instances)
+            .map((res) => {
+                return CommonUtils.initComponentInstances(res);
+            });
+    }
+
+    createRelation(componentId: string, componentType: string, link: RelationshipModel): Observable<RelationshipModel> {
+        return this.http.post<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/associate', link)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    deleteRelation(componentId: string, componentType: string, link: RelationshipModel): Observable<RelationshipModel> {
+        return this.http.put<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/dissociate', link)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    createComponentInstance(componentType: string, componentId: string, componentInstance: ComponentInstance): Observable<ComponentInstance> {
+        return this.http.post<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance', componentInstance)
+            .map((res) => {
+                return new ComponentInstance(res);
+            });
+    }
+
+    deleteComponentInstance(componentType: string, componentId: string, componentInstanceId: string): Observable<ComponentInstance> {
+        return this.http.delete<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstanceId)
+            .map((res) => {
+                return new ComponentInstance(res);
+            });
+    }
+
+    fetchRelation(componentType: string, componentId: string, linkId: string): Observable<RelationshipModel> {
+        return this.http.get<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/relationId/' + linkId)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    addOrUpdateArtifact = (componentType: string, componentId: string, artifact: ArtifactModel): Observable<ArtifactModel> => {
+        let headerObj: HttpHeaders = new HttpHeaders();
+        if (artifact.payloadData) {
+            headerObj = headerObj.append('Content-MD5', HttpHelperService.getHeaderMd5(artifact));
+        }
+
+        let artifactID: string = '';
+        if (artifact.uniqueId) {
+            artifactID = '/' + artifact.uniqueId;
+        }
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts' + artifactID, JSON.stringify(artifact), {headers: headerObj}).map(
+            (res) => new ArtifactModel(res)
+        );
+    }
+
+    deleteArtifact = (componentId: string, componentType: string, artifactId: string, artifactLabel: string): Observable<ArtifactModel> => {
+        return this.http.delete<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts/' + artifactId + '?operation=' + artifactLabel)
+            .map((res) => new ArtifactModel(res));
+    }
+
+    downloadArtifact = (componentType: string, componentId: string, artifactId: string): Observable<IFileDownload> => {
+        return this.http.get<IFileDownload>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts/' + artifactId);
+    }
+
+    // ------------------------------------------------ Properties API --------------------------------------------------//
+    addProperty = (componentType: string, componentId: string, property: PropertyModel):Observable<PropertyModel> => {
+        return this.http.post<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties', property.convertToServerObject()).map((response) => {
+            return new PropertyModel(response[Object.keys(response)[0]]);
+        });
+    }
+
+    updateProperty = (componentType: string, componentId: string, property: PropertyModel): Observable<PropertyModel> => {
+        var propertiesList:PropertyBEModel[]  = [property];
+        return this.http.put<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties', propertiesList)
+        .map((response) => {
+            return new PropertyModel(response[Object.keys(response)[0]]);
+        });
+    }
+
+    deleteProperty = (componentType: string, componentId: string, propertyId: string): Observable<PropertyModel> => {
+        return this.http.delete<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties/' + propertyId);
+    }
+
+    // ------------------------------------------------ Attributes API --------------------------------------------------//
+    addAttribute = (componentType: string, componentId: string, attribute: AttributeModel): Observable<AttributeModel> => {
+        return this.http.post<AttributeModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes', attribute.convertToServerObject())
+            .map((response) => {
+                return new AttributeModel(response);
+            });
+    }
+
+    updateAttribute = (componentType: string, componentId: string, attribute: AttributeModel): Observable<AttributeModel> => {
+        const payload = attribute.convertToServerObject();
+
+        return this.http.put<AttributeModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes/' + attribute.uniqueId, payload)
+            .map((response) => {
+                return new AttributeModel(response);
+            });
+    }
+
+    // Async Methods
+    addAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<AttributeModel> => {
+        return this.addAttribute(componentType, componentId, attribute).toPromise();
+    }
+
+    updateAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<AttributeModel> => {
+        return this.updateAttribute(componentType, componentId, attribute).toPromise();
+    }
+
+    deleteAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<any> => {
+        return this.http.delete<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes/' + attribute.uniqueId, {}).toPromise();
+    }
+
+    getArtifactsByType(componentType: string, componentId: string, artifactsType: ArtifactGroupType) {
+        return this.getComponentDataByFieldsName(componentType, componentId, [this.convertArtifactTypeToUrl(artifactsType)]);
+    }
+
+    getServiceConsumptionData(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [
+            // COMPONENT_FIELDS.COMPONENT_INSTANCES_INTERFACES,
+            COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES,
+            // COMPONENT_FIELDS.COMPONENT_INSTANCES_INPUTS,
+            COMPONENT_FIELDS.COMPONENT_INPUTS,
+            COMPONENT_FIELDS.COMPONENT_INSTANCES,
+            COMPONENT_FIELDS.COMPONENT_CAPABILITIES
+        ]);
+    }
+
+    getServiceConsumptionInputs(componentMetaDataId: string, serviceInstanceId: string, interfaceId: string, operation: OperationModel): Observable<ConsumptionInput[]> {
+        return this.http.get<ConsumptionInput[]>
+        (this.baseUrl + 'services/' + componentMetaDataId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId + '/operations/' + operation.uniqueId + '/inputs');
+    }
+
+    createOrUpdateServiceConsumptionInputs(componentMetaDataId: string, serviceInstanceId: string, consumptionInputsList: Array<{[id: string]: ConsumptionInput[]}>): Observable<any> {
+        return this.http.post(this.baseUrl + 'services/' + componentMetaDataId + '/consumption/' + serviceInstanceId, consumptionInputsList);
+    }
+
+    getServiceFilterConstraints(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [SERVICE_FIELDS.NODE_FILTER]);
+    }
+
+    getComponentInstanceProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES]);
+    }
+
+    createServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraint: ConstraintObject): Observable<any> {
+        return this.http.post<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter', constraint);
+    }
+
+    updateServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraints: ConstraintObject[]):Observable<any> {
+        return this.http.put<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter', constraints)
+    }
+
+    deleteServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraintIndex: number): Observable<any>{
+        return this.http.delete<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter/' + constraintIndex)
+    }
+
+    deletePolicy(component: Component, policy: PolicyInstance): Observable<PolicyInstance> {
+        return this.http.put<PolicyInstance>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy)
+    }
+
+    createListInput(componentId: string, input: any, isSelf: boolean): Observable<any> {
+        let inputs: any;
+        if (isSelf) {
+            // change componentInstanceProperties -> serviceProperties
+            inputs = {
+                componentInstInputsMap: {
+                    serviceProperties: input.componentInstInputsMap.componentInstanceProperties
+                },
+                listInput: input.listInput
+            };
+        } else {
+            inputs = input;
+        }
+        return this.http.post<any>(this.baseUrl + 'services/' + componentId + '/create/listInput', inputs);
+    }
+
+    createPolicy(component: Component, policiesToCreate: InstancePropertiesAPIMap, isSelf: boolean): Observable<any> {
+        const policiesList =
+            isSelf ?
+                // tslint:disable-next-line:object-literal-key-quotes
+                {'componentPropertiesToPolicies': {
+                        ...policiesToCreate.componentInstanceProperties
+                    }
+                } :
+                // tslint:disable-next-line:object-literal-key-quotes
+                {'componentInstancePropertiesToPolicies': {
+                        ...policiesToCreate.componentInstanceProperties
+                    }
+                };
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList);
+    }
+
+    protected getComponentDataByFieldsName(componentType: string, componentId: string, fields: string[]): Observable<ComponentGenericResponse> {
+        let params: HttpParams = new HttpParams();
+        _.forEach(fields, (field: string): void => {
+            params = params.append(API_QUERY_PARAMS.INCLUDE, field);
+        });
+        // tslint:disable-next-line:object-literal-shorthand
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {params: params})
+            .map((res) => {
+                return componentType === ComponentType.SERVICE ? new ServiceGenericResponse().deserialize(res) :
+                        new ComponentGenericResponse().deserialize(res);
+            });
+    }
+
+    private getServerTypeUrl = (componentType: string): string => {
+        switch (componentType) {
+            case ComponentType.SERVICE:
+            case ComponentType.SERVICE_PROXY:
+                return ServerTypeUrl.SERVICES;
+            default:
+                return ServerTypeUrl.RESOURCES;
+        }
+    }
+
+    private convertArtifactTypeToUrl = (artifactType: ArtifactGroupType): string => {
+        switch (artifactType) {
+            case ArtifactGroupType.TOSCA:
+                return COMPONENT_FIELDS.COMPONENT_TOSCA_ARTIFACTS;
+            case ArtifactGroupType.INFORMATION:
+                return COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS;
+            case ArtifactGroupType.DEPLOYMENT:
+                return COMPONENT_FIELDS.COMPONENT_DEPLOYMENT_ARTIFACTS;
+            case ArtifactGroupType.SERVICE_API:
+                return COMPONENT_FIELDS.SERVICE_API_ARTIFACT;
+        }
+    }
+
+    // createCapability(component: Component, capabilityData: Capability): Observable<Capability[]> {
+    createCapability(type: string, uniqueId: string, capabilityData: Capability): Observable<Capability[]> {
+        let capBEObj = {
+            'capabilities': {
+                [capabilityData.type]: [capabilityData]
+            }
+        };
+        return this.http.post<any>(this.baseUrl + type + uniqueId + '/capabilities', capBEObj);
+    }
+
+    updateCapability(type: string, uniqueId: string, capabilityData: Capability): Observable<Capability[]> {
+        let capBEObj = {
+            'capabilities': {
+                [capabilityData.type]: [capabilityData]
+            }
+        };
+        return this.http.put<any>(this.baseUrl + type + uniqueId + '/capabilities', capBEObj);
+    }
+
+    deleteCapability(component: Component, capId: string): Observable<Capability> {
+        return this.http.delete<Capability>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities/' + capId);
+    }
+
+    createRequirement(type: string, uniqueId: string, requirementData: Requirement): Observable<any> {
+        let reqBEObj = {
+            'requirements': {
+                [requirementData.capability]: [requirementData]
+            }
+        };
+        return this.http.post(this.baseUrl + type + uniqueId + '/requirements', reqBEObj);
+    }
+
+    updateRequirement(type: string, uniqueId: string, requirementData: Requirement): Observable<any> {
+        let reqBEObj = {
+            'requirements': {
+                [requirementData.capability]: [requirementData]
+            }
+        };
+        return this.http.put(this.baseUrl + type + uniqueId + '/requirements', reqBEObj);
+    }
+
+    deleteRequirement(component: Component, reqId: string): Observable<Requirement> {
+        return this.http.delete<Requirement>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements/' + reqId);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts
index 11fe395811..2b9b49cf62 100644
--- a/catalog-ui/src/app/ng2/services/config.service.ts
+++ b/catalog-ui/src/app/ng2/services/config.service.ts
@@ -16,62 +16,80 @@
  *
  */
 
-import { Injectable, Inject } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable, Injector } from '@angular/core';
+import { IAppConfigurtaion, Plugins, PluginsConfiguration, ValidationConfiguration, Validations } from 'app/models';
+import { IApi } from 'app/models/app-config';
 import 'rxjs/add/operator/toPromise';
-import {IAppConfigurtaion, ValidationConfiguration, Validations, Plugins, PluginsConfiguration} from "app/models";
-import {IApi} from "app/models/app-config";
-import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
+import { CacheService } from './cache.service';
 
 @Injectable()
 export class ConfigService {
 
-    private baseUrl;
     public configuration: IAppConfigurtaion;
-    public api:IApi;
+    public api: IApi;
+    private baseUrl;
+
+    constructor(
+                @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
+                private cacheService: CacheService,
+                private injector: Injector,
+                private http: HttpClient
+        ) {
+            this.api = this.sdcConfig.api;
+            this.baseUrl = this.api.root + this.sdcConfig.api.component_api_root;
+    }
 
-    constructor(private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
-    	this.api = this.sdcConfig.api;
-        this.baseUrl = this.api.root + this.sdcConfig.api.component_api_root;
+    loadSdcSetupData = (): Promise<void> =>  {
+        const url: string = this.api.root + this.api.GET_SDC_Setup_Data;
+        const promise: Promise<any> = this.http.get<any>(url).toPromise();
+        promise.then((response) => {
+            this.cacheService.set('version', response.version);
+            this.cacheService.set('serviceCategories', response.categories.serviceCategories);
+            this.cacheService.set('resourceCategories', response.categories.resourceCategories);
+            this.cacheService.set('UIConfiguration', response.configuration);
+        });
+        return promise;
     }
 
     loadValidationConfiguration(): Promise<ValidationConfiguration> {
-        let url: string = this.sdcConfig.validationConfigPath;
-        let promise: Promise<ValidationConfiguration> = this.http.get(url).map((res: Response) => res.json()).toPromise();
+        const url: string = this.sdcConfig.validationConfigPath;
+        const promise: Promise<ValidationConfiguration> = this.http.get<ValidationConfiguration>(url).toPromise();
         promise.then((validationData: Validations) => {
             ValidationConfiguration.validation = validationData;
+            this.cacheService.set('validation', validationData);
         }).catch((ex) => {
             console.error('Error loading validation.json configuration file, using fallback data', ex);
 
-            let fallback:Validations = {
-                "propertyValue": {
-                    "max": 2500,
-                    "min": 0
+            const fallback = {
+                propertyValue: {
+                    max: 2500,
+                    min: 0
                 },
-
-                "validationPatterns": {
-                    "string": "^[\\sa-zA-Z0-9+-]+$",
-                    "comment": "^[\\sa-zA-Z0-9+-_\\{\\}\"]+$",
-                    "integer": "^(([-+]?\\d+)|([-+]?0x[0-9a-fA-F]+))$"
+                validationPatterns: {
+                    string: '^[\\sa-zA-Z0-9+-]+$',
+                    stringOrEmpty: '^[\\sa-zA-Z0-9&-]*$',
+                    comment: '^[\\sa-zA-Z0-9+-_\\{\\}"]+$',
+                    integer: '^(([-+]?\\d+)|([-+]?0x[0-9a-fA-F]+))$'
                 }
             };
 
-            ValidationConfiguration.validation = fallback;
-
+            this.cacheService.set('validation', fallback);
         });
 
         return promise;
     }
 
-    loadPluginsConfiguration(): Promise<PluginsConfiguration> {
-        let url:string = this.api.no_proxy_root + this.api.GET_plugins_configuration;
-        let promise: Promise<any> = this.http.get(url).map((res: Response) => res.json()).toPromise();
+    loadPluginsConfiguration = (): Promise<PluginsConfiguration> =>  {
+        const url: string = this.api.no_proxy_root + this.api.GET_plugins_configuration;
+        const promise: Promise<any> = this.http.get<PluginsConfiguration>(url).toPromise();
         return new Promise<PluginsConfiguration>((resolve) => {
             promise.then((pluginsData: Plugins) => {
                 PluginsConfiguration.plugins = pluginsData;
                 resolve();
             }).catch((ex) => {
-                console.error("Error loading plugins configuration from FE", ex);
+                console.error('Error loading plugins configuration from FE', ex);
 
                 PluginsConfiguration.plugins = [] as Plugins;
                 resolve();
diff --git a/catalog-ui/src/app/ng2/services/cookie.service.ts b/catalog-ui/src/app/ng2/services/cookie.service.ts
index 2a783fdd48..61d13186fa 100644
--- a/catalog-ui/src/app/ng2/services/cookie.service.ts
+++ b/catalog-ui/src/app/ng2/services/cookie.service.ts
@@ -19,7 +19,7 @@
  */
 
 import {Injectable, Inject} from '@angular/core';
-import {IAppConfigurtaion, ICookie} from "../../models/app-config";
+import {ICookie} from "../../models/app-config";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
 
 @Injectable()
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index cabaccd1d5..0559f35ae2 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -20,9 +20,9 @@
 
 import * as _ from "lodash";
 import { Injectable } from '@angular/core';
-import { DataTypeModel, DataTypesMap, PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedFEPropertyMap } from "app/models";
+import { DataTypeModel, DataTypesMap, PropertyFEModel, DerivedFEProperty} from "app/models";
 import { DataTypesService } from "app/services/data-types-service";
-import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
+import { PROPERTY_DATA } from "app/utils";
 
 /** This is a new service for NG2, to eventually replace app/services/data-types-service.ts
  *
@@ -32,13 +32,16 @@ import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
 
 @Injectable()
 export class DataTypeService {
-    private dataTypes: DataTypesMap;
+    public dataTypes: DataTypesMap;
 
     constructor(private dataTypeService: DataTypesService) {
         this.dataTypes = dataTypeService.getAllDataTypes(); //This should eventually be replaced by an NG2 call to the backend instead of utilizing Angular1 downgraded component.
     }
 
     public getDataTypeByTypeName(typeName: string): DataTypeModel {
+        if(!this.dataTypes){
+            this.dataTypes = this.dataTypeService.getAllDataTypes();
+        }
         if (!this.dataTypes[typeName]) console.log("MISSING Datatype: " + typeName);
         return this.dataTypes[typeName];
     }
@@ -47,6 +50,13 @@ export class DataTypeService {
         return this.dataTypes;
     }
 
+    public getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName){
+        // const property = this.dataTypes[rootPropertyType].properties.filter(property =>
+        //     property.name == propertyName);
+        // return property[0] && property[0].constraints ? property[0].constraints[0].validValues : null;
+        return null;
+    }
+
 
     public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
         //push all child properties to array
diff --git a/catalog-ui/src/app/ng2/services/event-bus.service.ts b/catalog-ui/src/app/ng2/services/event-bus.service.ts
index cc53d7978b..2a15ca25db 100644
--- a/catalog-ui/src/app/ng2/services/event-bus.service.ts
+++ b/catalog-ui/src/app/ng2/services/event-bus.service.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {BasePubSub, IPubSubEvent} from 'sdc-pubsub';
+import {BasePubSub, IPubSubEvent} from "sdc-pubsub";
 
 @Injectable()
 export class EventBusService extends BasePubSub {
diff --git a/catalog-ui/src/app/ng2/services/file-utils.service.ts b/catalog-ui/src/app/ng2/services/file-utils.service.ts
new file mode 100644
index 0000000000..57897492b0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/file-utils.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from "@angular/core";
+import { WindowRef } from "./window.service";
+
+@Injectable()
+export class FileUtilsService {
+    constructor(private windowRef: WindowRef){}
+
+        public byteCharactersToBlob = (byteCharacters, contentType):any => {
+            contentType = contentType || '';
+            let sliceSize = 1024;
+            let bytesLength = byteCharacters.length;
+            let slicesCount = Math.ceil(bytesLength / sliceSize);
+            let byteArrays = new Array(slicesCount);
+
+            for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+                let begin = sliceIndex * sliceSize;
+                let end = Math.min(begin + sliceSize, bytesLength);
+
+                let bytes = new Array(end - begin);
+                for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+                    bytes[i] = byteCharacters[offset].charCodeAt(0);
+                }
+                byteArrays[sliceIndex] = new Uint8Array(bytes);
+            }
+            return new Blob(byteArrays, {type: contentType});
+        };
+
+        public base64toBlob = (base64Data, contentType):any => {
+            let byteCharacters = atob(base64Data);
+            return this.byteCharactersToBlob(byteCharacters, contentType);
+        };
+
+        public downloadFile = (blob, fileName):void=> {
+            let url = this.windowRef.nativeWindow.URL.createObjectURL(blob);
+            let downloadLink = document.createElement("a");
+
+            downloadLink.setAttribute('href', url);
+            downloadLink.setAttribute('download', fileName);
+            document.body.appendChild(downloadLink);
+
+            var clickEvent = new MouseEvent("click", {
+                "view": window,
+                "bubbles": true,
+                "cancelable": true
+            });
+            downloadLink.dispatchEvent(clickEvent);
+        }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/gab.service.ts b/catalog-ui/src/app/ng2/services/gab.service.ts
index d903d20ade..b62c566dd6 100644
--- a/catalog-ui/src/app/ng2/services/gab.service.ts
+++ b/catalog-ui/src/app/ng2/services/gab.service.ts
@@ -18,12 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Injectable, Inject} from "@angular/core";
-import {Response} from '@angular/http';
-import {HttpService} from "./http.service";
-import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
-import {Observable} from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { Observable } from 'rxjs';
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
 
+// tslint:disable-next-line:interface-name
 export interface IServerResponse {
   data: [{ [key: string]: string }];
 }
@@ -36,24 +37,25 @@ export class GabRequest {
   }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 @Injectable()
 export class GabService {
   baseUrl: string;
   gabUrl: string;
 
-  constructor(@Inject(SdcConfigToken) sdcConfig: ISdcConfig, private http: HttpService) {
+  constructor(@Inject(SdcConfigToken) sdcConfig: ISdcConfig, protected http: HttpClient) {
     this.baseUrl = sdcConfig.api.root;
     this.gabUrl = sdcConfig.api.POST_GAB_Search;
   }
 
   public getArtifact(artifactUniqueId: string, resourceId: string, columns: string[]): Observable<Response> {
-    let finalUrl: string = this.baseUrl + this.gabUrl;
-    let request: GabRequest = {
+    const finalUrl: string = this.baseUrl + this.gabUrl;
+    const request: GabRequest = {
       fields: columns,
       parentId: resourceId,
-      artifactUniqueId: artifactUniqueId
+      artifactUniqueId
     };
 
-    return this.http.post(finalUrl, request);
+    return this.http.post<Response>(finalUrl, request);
   }
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/groups.service.ts b/catalog-ui/src/app/ng2/services/groups.service.ts
index e3b3d85b50..8b2bcd3415 100644
--- a/catalog-ui/src/app/ng2/services/groups.service.ts
+++ b/catalog-ui/src/app/ng2/services/groups.service.ts
@@ -1,11 +1,11 @@
 import {IZoneInstanceAssignment} from '../../models/graph/zones/zone-instance';
 import {Injectable, Inject} from "@angular/core";
 import {Observable} from "rxjs/Observable";
-import {HttpService} from "./http.service";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
 import {GroupInstance} from '../../models/graph/zones/group-instance';
 import {UiBaseObject} from "../../models/ui-models/ui-base-object";
 import {IZoneService} from "../../models/graph/zones/zone";
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class GroupsService implements IZoneService {
@@ -17,13 +17,13 @@ export class GroupsService implements IZoneService {
         'SERVICE': 'services'
     }
 
-    constructor(private http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root;
     }
 
-    public createGroupInstance(componentType:string, componentUniqueId:string, groupType:string) {
-        return this.http.post(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[componentType.toUpperCase()] + '/' + componentUniqueId + '/groups/' + groupType, {}).map(resp => {
-            return resp.json();
+    public createGroupInstance(componentType:string, componentUniqueId:string, groupType:string): Observable<GroupInstance>{
+        return this.http.post<GroupInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[componentType.toUpperCase()] + '/' + componentUniqueId + '/groups/' + groupType, {}).map(resp => {
+            return new GroupInstance(resp);
         });
     };
 
@@ -40,8 +40,7 @@ export class GroupsService implements IZoneService {
     }
 
     public updateGroupMembers(topologyTemplateType:string, topologyTemplateId:string, groupId:string, members:Array<string>):Observable<Array<string>> {
-        return this.http.post(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId + '/members', members)
-            .map(response => response.json());
+        return this.http.post<Array<string>>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId + '/members', members);
     }
 
     public updateMembers(topologyTemplateType:string, topologyTemplateId:string, groupId:string, members:Array<UiBaseObject>):Observable<Array<string>> {
@@ -50,22 +49,18 @@ export class GroupsService implements IZoneService {
     }
 
     public getSpecificGroup(topologyTemplateType:string, topologyTemplateId:string, groupId:string):Observable<GroupInstance> {
-        return this.http.get(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId)
+        return this.http.get<GroupInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId)
             .map(res => {
-                return new GroupInstance(res.json());
+                return new GroupInstance(res);
             });
     }
 
     public updateName(topologyTemplateType:string, topologyTemplateId:string, groupId:string, newName:string):Observable<GroupInstance> {
-        return this.http.put(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId, {name: newName}).map(resp => {
-            return resp.json();
-        });
+        return this.http.put<GroupInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId, {name: newName});
     };
 
     public deleteGroup(topologyTemplateType:string, topologyTemplateId:string, groupId:string) {
-        return this.http.delete(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId).map(resp => {
-            return resp.json();
-        });
+        return this.http.delete<GroupInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId);
     };
 
     public updateZoneInstanceAssignments(topologyTemplateType:string, topologyTemplateId:string, policyId:string, members:Array<IZoneInstanceAssignment>):Observable<any> {
@@ -75,4 +70,6 @@ export class GroupsService implements IZoneService {
     public deleteZoneInstance(topologyTemplateType:string, topologyTemplateId:string, policyId:string):Observable<any> {
         return this.deleteGroup(topologyTemplateType, topologyTemplateId, policyId);
     };
-}
\ No newline at end of file
+
+
+}
diff --git a/catalog-ui/src/app/ng2/services/home.service.ts b/catalog-ui/src/app/ng2/services/home.service.ts
new file mode 100644
index 0000000000..c472aa80c1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/home.service.ts
@@ -0,0 +1,74 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Component, IApi, Resource, Service } from 'app/models';
+import { ComponentFactory } from 'app/utils/component-factory';
+import { Observable } from 'rxjs';
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
+import { SharingService } from './sharing.service';
+
+// tslint:disable-next-line:interface-name
+interface IComponentsArray {
+    services: Service[];
+    resources: Resource[];
+}
+
+@Injectable()
+export class HomeService {
+    private api: IApi;
+    private smallObjectAttributes = [
+        'uniqueId', 'name', 'componentType', 'resourceType', 'lastUpdateDate', 'lifecycleState', 'distributionStatus',
+        'icon', 'version'
+    ];
+
+    constructor(private http: HttpClient,
+                @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
+                private sharingService: SharingService,
+                private componentFactory: ComponentFactory) {
+        this.api = sdcConfig.api;
+    }
+
+    public getAllComponents(smallObjects?: boolean): Observable<Component[]> {
+        return this.http.get<IComponentsArray>(this.api.root + this.api.GET_element)
+            .map((response) => {
+                const componentResponse: IComponentsArray = response;
+                let componentsList: Component[] = [];
+
+                componentResponse.services && componentResponse.services.forEach((serviceResponse: Service) => {
+                    serviceResponse = (smallObjects) ? _.pick(serviceResponse, this.smallObjectAttributes) : serviceResponse;
+                    const component: Service = this.componentFactory.createService(serviceResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+
+                componentResponse.resources && componentResponse.resources.forEach((resourceResponse: Resource) => {
+                    resourceResponse = (smallObjects) ? _.pick(resourceResponse, this.smallObjectAttributes) : resourceResponse;
+                    const component: Resource = this.componentFactory.createResource(resourceResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+
+                componentsList = _.orderBy(componentsList, ['lastUpdateDate'], ['desc']);
+
+                return componentsList;
+            });
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/http-hepler.service.ts b/catalog-ui/src/app/ng2/services/http-hepler.service.ts
new file mode 100644
index 0000000000..2b11067a24
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/http-hepler.service.ts
@@ -0,0 +1,31 @@
+import { Injectable, Inject } from "@angular/core";
+import { Dictionary } from "../../utils/dictionary/dictionary";
+import { SharingService } from "../services/sharing.service";
+import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
+
+
+@Injectable()
+export class HttpHelperService {
+    constructor( private sharingService: SharingService,
+        @Inject(SdcConfigToken) private sdcConfig: ISdcConfig){}
+    
+    public getUuidValue = (url: string): string => {
+        let map: Dictionary<string, string> = this.sharingService.getUuidMap();
+        if (map && url.indexOf(this.sdcConfig.api.root) > 0) {
+            map.forEach((key: string) => {
+                if (url.indexOf(key) !== -1) {
+                    return this.sharingService.getUuidValue(key);
+                }
+            });
+        }
+        return '';
+    }
+    public static replaceUrlParams(url: string, urlParams: { [index: string]: any }): string {
+        return url.replace(/:(\w+)/g, (m, p1): string => urlParams[p1] || '');
+    }
+    public static getHeaderMd5 = (object:any):string => {
+        let componentString:string = JSON.stringify(object);
+        let md5Result = md5(componentString).toLowerCase();
+        return btoa(md5Result);
+    };
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/http.service.ts b/catalog-ui/src/app/ng2/services/http.service.ts
deleted file mode 100644
index 2785688ace..0000000000
--- a/catalog-ui/src/app/ng2/services/http.service.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {Injectable, Inject} from '@angular/core';
-import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
-import {Observable} from 'rxjs/Observable';
-import {UUID} from 'angular2-uuid';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/observable/throw';
-import {Dictionary} from "../../utils/dictionary/dictionary";
-import {SharingService, CookieService} from "app/services";
-import { ModalService } from "app/ng2/services/modal.service";
-import { ServerErrorResponse } from "app/models";
-import {ErrorMessageComponent} from "../components/ui/modal/error-message/error-message.component";
-import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
-
-@Injectable()
-export class HttpService extends Http {
-
-    constructor(backend: XHRBackend, options: RequestOptions, private sharingService: SharingService, private cookieService: CookieService, private modalService: ModalService, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
-        super(backend, options);
-        this._defaultOptions.withCredentials = true;
-        this._defaultOptions.headers.append(cookieService.getUserIdSuffix(), cookieService.getUserId());
-    }
-
-    request(request:string|Request, options?:RequestOptionsArgs):Observable<Response> {
-        /**
-         * For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
-         * Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
-         */
-        if (typeof request === 'string') { // meaning we have to add the token to the options, not in url
-            if (!options) {
-                // make option object
-                options = {headers: new Headers()};
-            }
-
-            var uuidValue = this.getUuidValue(request);
-            if(uuidValue!= ''){
-                options.headers['X-ECOMP-ServiceID'] = uuidValue;
-
-            }
-            options.headers.set('X-ECOMP-RequestID', UUID.UUID());
-
-        } else {
-            // we have to add the token to the url object
-            var uuidValue = this.getUuidValue((<Request>request).url);
-            if(uuidValue!= ''){
-                 request.headers.set('X-ECOMP-ServiceID',uuidValue);
-
-            }
-            request.headers.set('X-ECOMP-RequestID', UUID.UUID());
-        }
-        return super.request(request, options).catch((err) => this.catchError(err));
-    }
-
-    private getUuidValue = (url: string) :string => {
-        let map:Dictionary<string, string> = this.sharingService.getUuidMap();
-        if (map && url.indexOf(this.sdcConfig.api.root) > 0) {
-            map.forEach((key:string) => {
-                if (url.indexOf(key) !== -1) {
-                    return this.sharingService.getUuidValue(key);
-                }
-            });
-        }
-        return '';
-    }
-
-    private catchError = (response: Response): Observable<any> => {
-        
-        let modalInstance = this.modalService.createErrorModal("OK");
-        let errorResponse: ServerErrorResponse = new ServerErrorResponse(response);
-        this.modalService.addDynamicContentToModal(modalInstance, ErrorMessageComponent, errorResponse);
-        modalInstance.instance.open();
-        
-        return Observable.throw(response);
-    };
-
-    public static replaceUrlParams(url:string, urlParams:{[index:string]:any}):string {
-        return url.replace(/:(\w+)/g, (m, p1):string => urlParams[p1] || '');
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/services/modules.service.ts b/catalog-ui/src/app/ng2/services/modules.service.ts
new file mode 100644
index 0000000000..857f0718d6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/modules.service.ts
@@ -0,0 +1,34 @@
+import {Inject, Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {ISdcConfig, SdcConfigToken} from "../config/sdc-config.config";
+import {DisplayModule, Module} from "../../models/modules/base-module";
+import {Observable} from "rxjs/Observable";
+import {ServerTypeUrl} from "../../utils/constants";
+
+@Injectable()
+export class ModulesService {
+
+    protected baseUrl;
+
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+        this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
+    }
+
+    getComponentInstanceModule = (topologyTemplateType: string, topologyTemplateId: string, componentInstanceId: string, moduleId: string):Observable<DisplayModule> => {
+        return this.http.get<DisplayModule>(this.baseUrl + ServerTypeUrl.toServerTypeUrl(topologyTemplateType) + "/" + topologyTemplateId + "/resourceInstance/" + componentInstanceId + "/groupInstance/" + moduleId)
+            .map((response) => {
+                return new DisplayModule(response);
+            })
+    };
+
+    getModuleForDisplay = (topologyTemplateType: string, topologyTemplateId: string, moduleId: string):Observable<DisplayModule> => {
+        return this.http.get<DisplayModule>(this.baseUrl + ServerTypeUrl.toServerTypeUrl(topologyTemplateType) + "/" + topologyTemplateId + "/groups/" + moduleId)
+            .map((response) => {
+                return new DisplayModule(response);
+            })
+    };
+
+    public updateModuleMetadata = (topologyTemplateType: string, topologyTemplateId: string, module: Module):Observable<Module> => {
+        return this.http.put<Module>(this.baseUrl + ServerTypeUrl.toServerTypeUrl(topologyTemplateType) + "/" + topologyTemplateId + "/groups/" + module.uniqueId + "/metadata", module)
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/onboarding.service.ts b/catalog-ui/src/app/ng2/services/onboarding.service.ts
new file mode 100644
index 0000000000..0ec4875d91
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/onboarding.service.ts
@@ -0,0 +1,151 @@
+/**
+ * Created by rc2122 on 6/4/2018.
+ */
+/*-
+ * ============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 {Inject, Injectable} from "@angular/core";
+import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
+import {Observable} from "rxjs/Observable";
+import { HttpClient, HttpResponse } from "@angular/common/http";
+import { ComponentFactory } from "../../utils/component-factory";
+import { DEFAULT_ICON, ComponentType } from "../../utils/constants";
+import { ICsarComponent } from "../../models/csar-component";
+import { IApi } from "../../models/app-config";
+import { CacheService } from "./cache.service";
+import { IComponentMetadata, ComponentMetadata } from "../../models/component-metadata";
+import { IMainCategory, ISubCategory } from "../../models/category";
+import { Resource } from "../../models/components/resource";
+
+export interface OnboardingComponents {
+    listCount: number;
+    results: Array<ICsarComponent>
+} 
+
+@Injectable()
+export class OnboardingService {
+    private api:IApi;
+
+    constructor(protected http: HttpClient,
+                private cacheService:CacheService,
+                @Inject(SdcConfigToken) sdcConfig:ISdcConfig,
+                private componentFactory: ComponentFactory) {
+                this.api = sdcConfig.api;
+    }
+
+    getOnboardingVSPs = (): Observable<Array<ICsarComponent>> =>{
+        return this.http.get<OnboardingComponents>(this.api.GET_onboarding).map((onboardingVSPs) =>{
+            return onboardingVSPs.results
+        });
+    }
+
+    getOnboardingComponents = ():Observable<Array<IComponentMetadata>> => {
+        return this.getOnboardingVSPs().map((onboardingComponents) => {
+            let componentsMetadataList: Array<IComponentMetadata> = new Array();
+            onboardingComponents.forEach((obc:ICsarComponent) => {
+                let componentMetaData: ComponentMetadata = this.createFromCsarComponent(obc);
+                componentsMetadataList.push(componentMetaData);
+            });
+            return componentsMetadataList;
+        });
+    };
+    
+    public createFromCsarComponent = (csar:ICsarComponent): ComponentMetadata => {
+        let newMetadata = new ComponentMetadata();  
+        newMetadata.name = csar.vspName;
+
+        /**
+         * Onboarding CSAR contains category and sub category that are uniqueId.
+         * Need to find the category and sub category and extract the name from them.
+         * First concat all sub categories to one array.
+         * Then find the selected sub category and category.
+         * @type {any}
+         */
+        let availableCategories = angular.copy(this.cacheService.get('resourceCategories'));
+        let allSubs = [];
+        _.each(availableCategories, (main:IMainCategory)=> {
+            if (main.subcategories) {
+                allSubs = allSubs.concat(main.subcategories);
+            }
+        });
+
+        let selectedCategory:IMainCategory = _.find(availableCategories, function (main:IMainCategory) {
+            return main.uniqueId === csar.category;
+        });
+
+        let selectedSubCategory:ISubCategory = _.find(allSubs, (sub:ISubCategory)=> {
+            return sub.uniqueId === csar.subCategory;
+        });
+
+        // Build the categories and sub categories array (same format as component category)
+        let categories:Array<IMainCategory> = new Array();
+        let subcategories:Array<ISubCategory> = new Array();
+        if (selectedCategory && selectedSubCategory) {
+            subcategories.push(selectedSubCategory);
+            selectedCategory.subcategories = subcategories;
+            categories.push(selectedCategory);
+        }
+
+        // Fill the component with details from CSAR
+
+        newMetadata.categories = categories;
+        newMetadata.vendorName = csar.vendorName;
+        newMetadata.vendorRelease = csar.vendorRelease;
+        newMetadata.csarUUID = csar.packageId;
+        newMetadata.csarPackageType = csar.packageType;
+        newMetadata.csarVersion = csar.version;
+        newMetadata.packageId = csar.packageId;
+        newMetadata.description = csar.description;
+        newMetadata.selectedCategory = selectedCategory && selectedSubCategory ? selectedCategory.name + "_#_" + selectedSubCategory.name : '';
+        newMetadata.filterTerm = newMetadata.name +  ' '  + newMetadata.description + ' ' + newMetadata.vendorName + ' ' + newMetadata.csarVersion;
+        newMetadata.resourceType = "VF";
+        newMetadata.componentType = ComponentType.RESOURCE;
+        newMetadata.tags = [];
+        newMetadata.icon = DEFAULT_ICON;
+        newMetadata.iconSprite = "sprite-resource-icons";
+        return newMetadata;
+    };
+
+    downloadOnboardingCsar = (packageId:string):Observable<HttpResponse<Blob>> => {
+        return this.http.get(this.api.GET_onboarding + "/" + packageId, {observe: 'response', responseType: 'blob'});
+    };
+
+    getComponentFromCsarUuid = (csarUuid:string):Observable<ComponentMetadata> => {
+        return this.http.get<ComponentMetadata>(this.api.root + this.api.GET_component_from_csar_uuid.replace(':csar_uuid', csarUuid))
+            .map((response: any) => {
+                // If the status is 400, this means that the component not found.
+                // I do not want to return error from server, because a popup will appear in client with the error.
+                // So returning success (200) with status 400.
+                if (response.status !== 400) {
+                    let componentMetadata = new ComponentMetadata();
+                    componentMetadata = response;
+                    return componentMetadata;
+                }
+            });
+    };
+
+    //TODO remove when workspace page convert to angular5
+    convertMetaDataToComponent(componentMetadata: ComponentMetadata) {
+        let newResource: Resource = <Resource>this.componentFactory.createEmptyComponent(ComponentType.RESOURCE);
+        newResource.setComponentMetadata(componentMetadata);
+        return newResource;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/plugins.service.ts b/catalog-ui/src/app/ng2/services/plugins.service.ts
index 2a3b68fe25..0f71eee1f0 100644
--- a/catalog-ui/src/app/ng2/services/plugins.service.ts
+++ b/catalog-ui/src/app/ng2/services/plugins.service.ts
@@ -1,40 +1,40 @@
-import { Injectable, Inject } from '@angular/core';
+import {Inject, Injectable} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Http, Response} from '@angular/http';
-import {IApi, IAppConfigurtaion, Plugin, Plugins, PluginsConfiguration} from "app/models";
+import {IApi, IAppConfigurtaion, Plugin, PluginsConfiguration} from "app/models";
 import {ISdcConfig, SdcConfigToken} from "../config/sdc-config.config";
 
 @Injectable()
 export class PluginsService {
 
-    private baseUrl;
     public configuration: IAppConfigurtaion;
     public api: IApi;
+    private baseUrl;
 
-    constructor(private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
+    constructor(private http: Http, @Inject(SdcConfigToken) private sdcConfig: ISdcConfig) {
         this.api = this.sdcConfig.api;
         this.baseUrl = this.api.root + this.sdcConfig.api.component_api_root;
     }
 
     public getPluginByStateUrl = (stateUrl: string) => {
-        let pluginKey: any = _.findKey(PluginsConfiguration.plugins, (pluginConfig: Plugin) =>{
-            return pluginConfig.pluginStateUrl ===  stateUrl;
+        let pluginKey: any = _.findKey(PluginsConfiguration.plugins, (pluginConfig: Plugin) => {
+            return pluginConfig.pluginStateUrl === stateUrl;
         });
 
         return PluginsConfiguration.plugins[pluginKey];
     };
 
-    public isPluginDisplayedInContext = (plugin: Plugin ,userRole: string, contextType: string) => {
+    public isPluginDisplayedInContext = (plugin: Plugin, userRole: string, contextType: string) => {
         return plugin.pluginDisplayOptions["context"] &&
-               plugin.pluginDisplayOptions["context"].displayRoles.includes(userRole) &&
-               plugin.pluginDisplayOptions["context"].displayContext.indexOf(contextType) !== -1
+            plugin.pluginDisplayOptions["context"].displayRoles.includes(userRole) &&
+            plugin.pluginDisplayOptions["context"].displayContext.indexOf(contextType) !== -1
     };
 
     public isPluginOnline = (pluginId: string): Observable<boolean> => {
-        let url:string = this.api.no_proxy_root + this.api.GET_plugin_online_state.replace(':pluginId', pluginId);
+        let url: string = this.api.no_proxy_root + this.api.GET_plugin_online_state.replace(':pluginId', pluginId);
         return this.http.get(url).map((res: Response) => {
             return res.json()
         })
-        .catch(error => Observable.of(false));
+            .catch(error => Observable.of(false));
     }
 }
diff --git a/catalog-ui/src/app/ng2/services/policies.service.ts b/catalog-ui/src/app/ng2/services/policies.service.ts
index 3675a7b9ab..a1a9013303 100644
--- a/catalog-ui/src/app/ng2/services/policies.service.ts
+++ b/catalog-ui/src/app/ng2/services/policies.service.ts
@@ -20,13 +20,13 @@
 
 import {Injectable, Inject} from "@angular/core";
 import {Observable} from "rxjs/Observable";
-import {HttpService} from "./http.service";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
 import {PolicyInstance, PolicyTargetsRequest} from '../../models/graph/zones/policy-instance';
 import {IZoneInstanceAssignment} from "../../models/graph/zones/zone-instance";
 import {IZoneService} from "../../models/graph/zones/zone";
 import {TargetUiObject} from "../../models/ui-models/ui-target-object";
 import {TargetOrMemberType} from "../../utils/constants";
+import { HttpClient } from "@angular/common/http";
 
 
 @Injectable()
@@ -38,14 +38,12 @@ export class PoliciesService implements IZoneService {
         'SERVICE': 'services'
     }
 
-    constructor(private http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root;
     }
 
-    public createPolicyInstance(topologyTemplateType:string, topologyTemplateId:string, policyType:string) {
-        return this.http.post(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyType, {}).map(resp => {
-            return resp.json();
-        });
+    public createPolicyInstance(topologyTemplateType:string, topologyTemplateId:string, policyType:string): Observable<PolicyInstance> {
+        return this.http.post<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyType, {});
     }
 
     public addPolicyTarget(topologyTemplateType:string, topologyTemplateId:string, policy:PolicyInstance, targetId:string, targetType:TargetOrMemberType) {
@@ -76,8 +74,8 @@ export class PoliciesService implements IZoneService {
     }
 
     public updatePolicyTargets(topologyTemplateType:string, topologyTemplateId:string, policyId:string, targets:PolicyTargetsRequest): Observable<PolicyInstance> {
-        return this.http.post(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId + '/targets', targets.requestItems)
-            .map(response => new PolicyInstance(response.json()));
+        return this.http.post<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId + '/targets', targets.requestItems)
+            .map(response => new PolicyInstance(response));
     }
 
     public updateTargets(topologyTemplateType:string, topologyTemplateId:string, policyId:string, targets:Array<TargetUiObject>):Observable<PolicyInstance> {
@@ -94,22 +92,18 @@ export class PoliciesService implements IZoneService {
     }
 
     public getSpecificPolicy(topologyTemplateType:string, topologyTemplateId:string, policyId:string):Observable<PolicyInstance> {
-        return this.http.get(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId)
+        return this.http.get<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId)
             .map(res => {
-                return new PolicyInstance(res.json());
+                return new PolicyInstance(res);
             });
     }
 
     public updateName(topologyTemplateType:string, topologyTemplateId:string, policyId:string, newName:string):Observable<any> {
-        return this.http.put(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId, {name: newName}).map(res => {
-            return res.json();
-        });
+        return this.http.put<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId, {name: newName});
     };
 
     public deletePolicy(topologyTemplateType:string, topologyTemplateId:string, policyId:string) {
-        return this.http.delete(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId).map(resp => {
-            return resp.json();
-        });
+        return this.http.delete<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId);
     };
 
     public updateZoneInstanceAssignments(topologyTemplateType:string, topologyTemplateId:string, policyId:string, targets:Array<IZoneInstanceAssignment>):Observable<PolicyInstance>{
diff --git a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
index d297ea0874..f161babfa6 100644
--- a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
+++ b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
@@ -22,12 +22,15 @@
  * Created by ob0695 on 4/18/2017.
  */
 
-import { ArtifactGroupModel, PropertyModel, PropertiesGroup, InputsGroup, AttributeModel, AttributesGroup, ComponentInstance, OperationModel,
-    InputBEModel, Module, ComponentMetadata, RelationshipModel, RequirementsGroup, CapabilitiesGroup, InterfaceModel} from "app/models";
+import { ArtifactGroupModel, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance, OperationModel,
+    InputBEModel, Module, ComponentMetadata, RelationshipModel, RequirementsGroup, CapabilitiesGroup} from "app/models";
 import {CommonUtils} from "app/utils";
 import {Serializable} from "../utils/serializable";
+import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model";
 import { PolicyInstance } from "app/models/graph/zones/policy-instance";
 import { GroupInstance } from "../../../models/graph/zones/group-instance";
+import { InputsGroup } from "../../../models/inputs";
+import { InterfaceModel } from "../../../models/operation";
 
 export class ComponentGenericResponse  implements Serializable<ComponentGenericResponse> {
 
@@ -40,7 +43,7 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
     public componentInstancesAttributes:AttributesGroup;
     public componentInstancesRelations:Array<RelationshipModel>;
     public componentInstances:Array<ComponentInstance>;
-    public componentInstancesInterfaces:Map<string,Array<InterfaceModel>>;
+    public componentInstancesInterfaces: Map<string, Array<InterfaceModel>>;
     public inputs:Array<InputBEModel>;
     public capabilities:CapabilitiesGroup;
     public requirements:RequirementsGroup;
@@ -75,7 +78,7 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
         if(response.deploymentArtifacts) {
             this.deploymentArtifacts = new ArtifactGroupModel(response.deploymentArtifacts);
         }
-        if(response.inputs) {
+        if(response.inputs) { 
             this.inputs = CommonUtils.initInputs(response.inputs);
         }
         if(response.attributes) {
@@ -97,10 +100,9 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
             this.toscaArtifacts = new ArtifactGroupModel(response.toscaArtifacts);
         }
         if(response.interfaces) {
-            this.interfaces = CommonUtils.initInterfaces(response.interfaces);
             this.interfaceOperations = CommonUtils.initInterfaceOperations(response.interfaces);
         }
-        if(response.componentInstancesInterfaces) {
+        if (response.componentInstancesInterfaces) {
             this.componentInstancesInterfaces = new Map();
             for (let resourceId in response.componentInstancesInterfaces) {
                 this.componentInstancesInterfaces[resourceId] = CommonUtils.initInterfaces(response.componentInstancesInterfaces[resourceId]);
diff --git a/catalog-ui/src/app/ng2/services/responses/service-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/service-generic-response.ts
index d32ed26bb2..0fe85715be 100644
--- a/catalog-ui/src/app/ng2/services/responses/service-generic-response.ts
+++ b/catalog-ui/src/app/ng2/services/responses/service-generic-response.ts
@@ -2,12 +2,15 @@ import * as _ from "lodash";
 import {Serializable} from "../utils/serializable";
 import {ComponentGenericResponse} from "./component-generic-response";
 import {ForwardingPath} from "../../../models/forwarding-path";
+import {ArtifactGroupModel} from "../../../models/artifacts";
 
 export class ServiceGenericResponse extends ComponentGenericResponse implements Serializable<ServiceGenericResponse>  {
     public forwardingPaths: { [key:string]:ForwardingPath } = {};
+    public serviceApiArtifacts: ArtifactGroupModel;
 
     deserialize (response): ServiceGenericResponse {
         super.deserialize(response);
+        this.serviceApiArtifacts = new ArtifactGroupModel(response.serviceApiArtifacts);
         if(response.forwardingPaths) {
             _.forEach(response.forwardingPaths, (pathResponse, id) => {
                 let pathId = id;
diff --git a/catalog-ui/src/app/services/sharing-service.ts b/catalog-ui/src/app/ng2/services/sharing.service.ts
index f4cc2e6d5d..0a6b8cb1af 100644
--- a/catalog-ui/src/app/services/sharing-service.ts
+++ b/catalog-ui/src/app/ng2/services/sharing.service.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,23 +18,25 @@
  * ============LICENSE_END=========================================================
  */
 
-'use strict';
+import {Injectable} from "@angular/core";
 import {Dictionary} from "app/utils";
 
+@Injectable()
 export class SharingService {
-
     private uuidMap:Dictionary<string, string> = new Dictionary<string,string>();
 
-    public getUuidValue = (uniqueId:string):string => {
+    constructor() {
+    }
+
+    public getUuidValue(uniqueId:string): string {
         return this.uuidMap.getValue(uniqueId);
-    };
+    }
 
-    public addUuidValue = (uniqueId:string, uuid:string):void => {
+    public addUuidValue(uniqueId:string, uuid:string): void {
         this.uuidMap.setValue(uniqueId, uuid);
-    };
+    }
 
-    public getUuidMap = ():Dictionary<string, string> => {
+    public getUuidMap() :Dictionary<string, string> {
         return this.uuidMap;
-    };
-
+    }
 }
diff --git a/catalog-ui/src/app/ng2/services/tosca-types.service.ts b/catalog-ui/src/app/ng2/services/tosca-types.service.ts
index 66826c0fef..83b833b1ab 100644
--- a/catalog-ui/src/app/ng2/services/tosca-types.service.ts
+++ b/catalog-ui/src/app/ng2/services/tosca-types.service.ts
@@ -14,12 +14,19 @@
  * permissions and limitations under the License.
  */
 
-import {Injectable, Inject} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {HttpService} from './http.service';
-import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
-import {CapabilityTypesMap, NodeTypesMap, RelationshipTypesMap} from "app/models";
-import {Response} from '@angular/http';
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import {
+    CapabilityTypeModel,
+    CapabilityTypesMap,
+    IComponentsArray,
+    NodeTypesMap,
+    RelationshipTypesMap
+} from 'app/models';
+import { Observable } from 'rxjs/Observable';
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
+import 'rxjs/add/operator/toPromise';
 
 declare var angular: angular.IAngularStatic;
 
@@ -28,28 +35,20 @@ export class ToscaTypesServiceNg2 {
 
     protected baseUrl;
 
-    constructor(protected http: HttpService, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
-    fetchRelationshipTypes(): Observable<RelationshipTypesMap> {
-        return this.http.get(this.baseUrl + 'relationshipTypes')
-            .map((res: Response) => {
-                return res.json();
-            });
+    async fetchRelationshipTypes(): Promise<RelationshipTypesMap> {
+        return this.http.get<RelationshipTypesMap>(this.baseUrl + 'relationshipTypes').toPromise();
     }
 
-    fetchNodeTypes(): Observable<NodeTypesMap> {
-        return this.http.get(this.baseUrl + 'nodeTypes')
-            .map((res: Response) => {
-                return res.json();
-            });
+    async fetchNodeTypes(): Promise<NodeTypesMap> {
+        return this.http.get<NodeTypesMap>(this.baseUrl + 'nodeTypes').toPromise();
     }
 
-    fetchCapabilityTypes(): Observable<CapabilityTypesMap> {
-        return this.http.get(this.baseUrl + 'capabilityTypes')
-            .map((res: Response) => {
-                return res.json();
-            });
+    async fetchCapabilityTypes(): Promise<CapabilityTypesMap>{
+        return this.http.get<CapabilityTypesMap>(this.baseUrl + 'capabilityTypes').toPromise();
     }
 }
+
diff --git a/catalog-ui/src/app/ng2/services/user.service.ts b/catalog-ui/src/app/ng2/services/user.service.ts
index 87e90432dc..f4186a1087 100644
--- a/catalog-ui/src/app/ng2/services/user.service.ts
+++ b/catalog-ui/src/app/ng2/services/user.service.ts
@@ -19,80 +19,34 @@
  */
 
 import { Injectable, Inject } from "@angular/core";
-import { Headers } from "@angular/http";
 import { Observable } from "rxjs/Observable";
-import { HttpService } from "./http.service";
-import { Cookie2Service } from "./cookie.service";
 import { IUserProperties } from "../../models/user";
 
-import {ICookie} from "../../models/app-config";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
-
+import { HttpClient } from "@angular/common/http";
+import { HttpHelperService } from "./http-hepler.service";
+/**
+ * User Service provides CRUD for Users. See authentication service for authentication/login.
+ */
 @Injectable()
-export class UserService {
+export class UserService { 
     private url:string;
-    private authorizeUrl:string;
 
-    private _loggedinUser:IUserProperties;
-
-    constructor(private httpService:HttpService,
-                private cookieService:Cookie2Service,
+    constructor(private http: HttpClient,
                 @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
         this.url = this.sdcConfig.api.root + this.sdcConfig.api.GET_user;
-        this.authorizeUrl = this.sdcConfig.api.root + this.sdcConfig.api.GET_user_authorize;
     }
 
-    public authorize() :Observable<IUserProperties> {
-        let cookie:ICookie = this.sdcConfig.cookie;
-        let authorizeHeaders:Headers = new Headers();
-        authorizeHeaders.set(cookie.userFirstName, this.cookieService.getFirstName());
-        authorizeHeaders.set(cookie.userLastName, this.cookieService.getLastName());
-        authorizeHeaders.set(cookie.userEmail, this.cookieService.getEmail());
-        authorizeHeaders.set(cookie.userIdSuffix, this.cookieService.getUserId());
-
-        return this.httpService.get(
-            this.authorizeUrl,
-            { headers: authorizeHeaders }
-        ).map(resp => resp.json());
-    }
 
     public getAllUsers() :Observable<IUserProperties[]> {
-        return this.httpService.get(
+        return this.http.get(
             this.sdcConfig.api.root + this.sdcConfig.api.GET_all_users
-        ).map(resp => resp.json());
+        ).map(resp => <IUserProperties[]> resp) ;
     }
 
     public getUser(userId:string) :Observable<IUserProperties> {
-        return this.httpService.get(
-            HttpService.replaceUrlParams(this.url, { id: userId })
-        ).map(resp => resp.json());
-    }
-
-    public createUser(userData:{[index:string]: any}) :Observable<IUserProperties> {
-        return this.httpService.post(
-            this.sdcConfig.api.root + this.sdcConfig.api.POST_create_user,
-            userData
-        ).map(resp => resp.json());
+        return this.http.get(
+            HttpHelperService.replaceUrlParams(this.url, { id: userId })
+        ).map(resp => <IUserProperties> resp);
     }
-
-    public deleteUser(userId:string) :Observable<IUserProperties> {
-        return this.httpService.delete(
-            HttpService.replaceUrlParams(this.sdcConfig.api.root + this.sdcConfig.api.DELETE_delete_user, { id: userId })
-        ).map(resp => resp.json());
-    }
-
-    public editUserRole(userId:string, role:string) :Observable<IUserProperties> {
-        return this.httpService.post(
-            HttpService.replaceUrlParams(this.sdcConfig.api.root + this.sdcConfig.api.POST_edit_user_role, { id: userId }),
-            { role: role }
-        ).map(resp => resp.json());
-    }
-
-    public getLoggedinUser():IUserProperties {
-        return this._loggedinUser;
-    }
-
-    public setLoggedinUser(loggedinUser:IUserProperties) {
-        this._loggedinUser = loggedinUser;
-    };
 }
diff --git a/catalog-ui/src/app/ng2/services/workflow.service.ts b/catalog-ui/src/app/ng2/services/workflow.service.ts
index 81a2ea3b7f..044ca37266 100644
--- a/catalog-ui/src/app/ng2/services/workflow.service.ts
+++ b/catalog-ui/src/app/ng2/services/workflow.service.ts
@@ -1,14 +1,13 @@
 import { Injectable, Inject } from "@angular/core";
-import { Response } from "@angular/http";
 import { Observable } from "rxjs/Observable";
-import { HttpService } from "./http.service";
 import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
+import { HttpClient } from "@angular/common/http";
 import { Component, OperationModel } from "app/models";
 
 interface WorkflowOutputParameter {
-    name: string,
-    type: string,
-    mandatory: boolean
+    name: string;
+    type: string;
+    mandatory: boolean;
 }
 
 interface WorkflowInputParameter extends WorkflowOutputParameter {
@@ -25,40 +24,31 @@ export class WorkflowServiceNg2 {
     WF_STATE_ARCHIVED = 'ARCHIVED';
     VERSION_STATE_CERTIFIED = 'CERTIFIED';
 
-    constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.workflow_root;
         this.catalogBaseUrl = sdcConfig.api.POST_workflow_artifact;
     }
 
     public associateWorkflowArtifact(component: Component, operation: OperationModel): Observable<any> {
-        return this.http.post(this.baseUrl + '/workflows/' + operation.workflowId + '/versions/' + operation.workflowVersionId + '/artifact-deliveries', {
-                endpoint: this.catalogBaseUrl + '/' + component.getTypeUrl() + component.uuid + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId + '/artifacts/' + operation.implementation.artifactUUID,
-                method: 'POST'
-            })
-            .map((res:Response) => {
-                return res.json();
+        return this.http.post<any>(this.baseUrl + '/workflows/' + operation.workflowId + '/versions/' + operation.workflowVersionId + '/artifact-deliveries', {
+                endpoint: this.catalogBaseUrl + '/' + component.getTypeUrl() + component.uuid + '/interfaces/' + operation.interfaceId + '/operations/'
+                + operation.uniqueId + '/artifacts/' + operation.implementation.artifactUUID, method: 'POST'
             });
     }
 
     public getWorkflows(filterCertified: boolean = true): Observable<any> {
-        return this.http.get(this.baseUrl + '/workflows' + (filterCertified ? '?versionState=' + this.VERSION_STATE_CERTIFIED : ''))
-            .map((res:Response) => {
-                return res.json().items;
-            });
+        return this.http.get<any>(this.baseUrl + '/workflows' + (filterCertified ? '?versionState=' + this.VERSION_STATE_CERTIFIED : ''));
     }
 
     public getWorkflowVersions(workflowId: string, filterCertified: boolean = true): Observable<any> {
-        return this.http.get(this.baseUrl + '/workflows/' + workflowId + '/versions' + (filterCertified ? '?state=' + this.VERSION_STATE_CERTIFIED : ''))
-            .map((res:Response) => {
-                return _.map(res.json().items, version => version);
+        return this.http.get<any>(this.baseUrl + '/workflows/' + workflowId + '/versions' + (filterCertified ? '?state=' + this.VERSION_STATE_CERTIFIED : ''))
+            .map((res) => {
+                return res.items;
             });
     }
 
     public updateWorkflowVersion(workflowId: string, versionId: string, payload: any): Observable<any> {
-        return this.http.put(this.baseUrl + '/workflows/' + workflowId + '/versions/' + versionId, payload)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.put<any>(this.baseUrl + '/workflows/' + workflowId + '/versions/' + versionId, payload);
     }
 
 }
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
index bee493f2ae..7b9a5ff700 100644
--- a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
 <div class="multiline-ellipsis-container" [ngClass]="className" [ngStyle]="stylesContainer" #multilineEllipsisContainer>
 	<div class="multiline-ellipsis-content" [ngStyle]="stylesContent" #multilineEllipsisContent>
 		<ng-content></ng-content>
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
index 68cfedb32b..4cff9de72a 100644
--- a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnChanges, AfterViewChecked, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter} from "@angular/core";
+import {Component, OnChanges, AfterContentInit, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter} from "@angular/core";
 import {WindowRef} from "../../services/window.service";
 
 @Component({
@@ -6,7 +6,7 @@ import {WindowRef} from "../../services/window.service";
 	templateUrl: 'multiline-ellipsis.component.html',
 	styleUrls: ['multiline-ellipsis.component.less']
 })
-export class MultilineEllipsisComponent implements OnChanges, AfterViewChecked {
+export class MultilineEllipsisComponent implements OnChanges, AfterContentInit {
 
 	@Input() public lines: number;
 	@Input() public lineHeight: string;
@@ -30,7 +30,7 @@ export class MultilineEllipsisComponent implements OnChanges, AfterViewChecked {
 		this.prepareStyles()
 	}
 
-	public ngAfterViewChecked() {
+	public ngAfterContentInit() {
 		const hasEllipsis = (this.elmContainer.nativeElement.offsetHeight < this.elmContent.nativeElement.offsetHeight);
 		if (hasEllipsis !== this.hasEllipsis) {
 			this.hasEllipsis = hasEllipsis;
diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts
index 4ec756bcc2..04f6650f38 100644
--- a/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts
@@ -19,38 +19,32 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { TranslateService, ITranslateArgs } from "./translate.service";
+import { ITranslateArgs, TranslateService } from './translate.service';
 
+// tslint:disable-next-line:interface-name
+interface ITranslateParams {
+    phrase: string;
+    args: ITranslateArgs;
+    language: string;
+}
 
 @Pipe({
     name: 'translate',
     pure: false
 })
 export class TranslatePipe implements PipeTransform {
-    private translated:string;
-    private lastParams: {
-        phrase: string;
-        args: {[index: string]: any};
-        language: string;
-    } = {
+    private translated: string;
+    private lastParams: ITranslateParams = {
         phrase: undefined,
         args: undefined,
         language: undefined
     };
 
-    constructor(private translateService:TranslateService) {
-    }
-
-    private shouldUpdate(curParams:{[index:string]: any}) : boolean {
-        return (
-            curParams.language !== this.lastParams.language ||
-            curParams.args !== this.lastParams.args ||
-            curParams.phrase !== this.lastParams.phrase
-        );
+    constructor(private translateService: TranslateService) {
     }
 
-    public transform(phrase:string, args:ITranslateArgs, language:string=this.translateService.activeLanguage) : string {
-        const curParams = { phrase, args, language };
+    public transform(phrase: string, args: ITranslateArgs, language: string = this.translateService.activeLanguage): string {
+        const curParams: ITranslateParams = { phrase, args, language };
         if (this.shouldUpdate(curParams)) {
             this.lastParams = curParams;
             this.translated = this.translateService.translate(phrase, args, language);
@@ -58,4 +52,12 @@ export class TranslatePipe implements PipeTransform {
 
         return this.translated;
     }
+
+    private shouldUpdate(curParams: ITranslateParams): boolean {
+        return (
+            curParams.language !== this.lastParams.language ||
+            curParams.args !== this.lastParams.args ||
+            curParams.phrase !== this.lastParams.phrase
+        );
+    }
 }
diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts
index a1d7833062..6413f6a64e 100644
--- a/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts
@@ -18,9 +18,9 @@
  * ============LICENSE_END=========================================================
  */
 
-import { OpaqueToken } from "@angular/core";
+import { InjectionToken } from "@angular/core";
 
-export const TranslateServiceConfigToken = new OpaqueToken('TranslateServiceConfigToken');
+export const TranslateServiceConfigToken = new InjectionToken('TranslateServiceConfigToken');
 
 export interface ITranslateServiceConfig {
     filePrefix:string;
diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts
index ff7c643b46..0b5ddae557 100644
--- a/catalog-ui/src/app/ng2/shared/translator/translate.service.ts
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts
@@ -19,9 +19,9 @@
  */
 
 import { Injectable, Inject } from "@angular/core";
-import { Response, Http } from "@angular/http";
-import { Observable, Observer, ConnectableObservable, Subscription } from "rxjs";
 import { ITranslateServiceConfig, TranslateServiceConfigToken } from "./translate.service.config";
+import { Observer, Subscription, Observable, ConnectableObservable } from 'rxjs/Rx';
+import { HttpClient } from "@angular/common/http";
 
 export { ITranslateServiceConfig, TranslateServiceConfigToken };
 
@@ -145,7 +145,7 @@ export class TranslateService {
     private _cacheLanguagesJsons:{[index:string]:ITranslateLanguageJson} = {};
     private _cacheLanguagesLoaders:{[index:string]:Observable<ITranslateLanguageJson>} = {};
 
-    constructor(@Inject(TranslateServiceConfigToken) private config:ITranslateServiceConfig, private http:Http) {
+    constructor(@Inject(TranslateServiceConfigToken) private config:ITranslateServiceConfig, private http: HttpClient) {
         this.initLanguageObservable();
         this.loadAndActivateLanguage(this.config.defaultLanguage);
     }
@@ -176,8 +176,7 @@ export class TranslateService {
 
         if (!(language in this._cacheLanguagesLoaders)) {
             const filePath = `${this.config.filePrefix}${language}${this.config.fileSuffix}`;
-            this._cacheLanguagesLoaders[language] = this.http.get(filePath)
-                .map<Response, ITranslateLanguageJson>(resp => resp.json())
+            this._cacheLanguagesLoaders[language] = this.http.get<ITranslateLanguageJson>(filePath)
                 .catch(() => Observable.throw(`Failed to load language file for "${language}"`))
                 .publish();
             (<ConnectableObservable<ITranslateLanguageJson>>this._cacheLanguagesLoaders[language]).connect();
@@ -204,12 +203,12 @@ export class TranslateService {
         return false;
     }
 
-    public loadAndActivateLanguage(language:string) : Observable<ITranslateLanguageJson> {
+    public loadAndActivateLanguage(language:string) : void {
+
         const loadLanguageObservable = this.loadLanguageJsonFile(language, false);
         loadLanguageObservable.subscribe(() => {
             this.activateLanguage(language);
         }, () => {});
-        return loadLanguageObservable;
     }
 
     public translate(phraseKey:string, args:ITranslateArgs={}, language:string=this._activeLanguage) : string {
diff --git a/catalog-ui/src/app/ng2/store/actions/artifacts.action.ts b/catalog-ui/src/app/ng2/store/actions/artifacts.action.ts
new file mode 100644
index 0000000000..a00cc3a9ec
--- /dev/null
+++ b/catalog-ui/src/app/ng2/store/actions/artifacts.action.ts
@@ -0,0 +1,25 @@
+/**
+ * Created by ob0695
+ */
+import {ArtifactModel} from "../../../models/artifacts";
+
+export class GetArtifactsByTypeAction {
+    static readonly type = '[ARTIFACTS] GetArtifactsByType';
+
+    constructor(public payload: {componentType:string, componentId:string, artifactType: string}) {
+    }
+}
+
+export class CreateOrUpdateArtifactAction {
+    static readonly type = '[ARTIFACTS] CreateOrUpdateArtifactAction';
+
+    constructor(public payload: {componentType:string, componentId:string, artifact:ArtifactModel}) {
+    }
+}
+
+export class DeleteArtifactAction {
+    static readonly type = '[ARTIFACTS] DeleteArtifactAction';
+
+    constructor(public payload: {componentType:string, componentId:string, artifact: ArtifactModel}) {
+    }
+}
diff --git a/catalog-ui/src/app/ng2/store/actions/instance-artifacts.actions.ts b/catalog-ui/src/app/ng2/store/actions/instance-artifacts.actions.ts
new file mode 100644
index 0000000000..0f1df78352
--- /dev/null
+++ b/catalog-ui/src/app/ng2/store/actions/instance-artifacts.actions.ts
@@ -0,0 +1,32 @@
+/**
+ * Created by ob0695
+ */
+import {ArtifactModel} from "../../../models/artifacts";
+
+export class GetInstanceArtifactsByTypeAction {
+    static readonly type = '[INSTANCE_ARTIFACTS] GetInstanceArtifactsByTypeAction';
+
+    constructor(public payload: { componentType: string, componentId: string, artifactType: string, instanceId: string }) {
+    }
+}
+
+export class CreateInstanceArtifactAction {
+    static readonly type = '[INSTANCE_ARTIFACTS] CreateInstanceArtifactAction';
+
+    constructor(public payload: { componentType: string, componentId: string, instanceId: string, artifact: ArtifactModel }) {
+    }
+}
+
+export class UpdateInstanceArtifactAction {
+    static readonly type = '[INSTANCE_ARTIFACTS] UpdateInstanceArtifactAction';
+
+    constructor(public payload: { componentType: string, componentId: string, instanceId: string, artifact: ArtifactModel }) {
+    }
+}
+
+export class DeleteInstanceArtifactAction {
+    static readonly type = '[INSTANCE_ARTIFACTS] DeleteInstanceArtifactAction';
+
+    constructor(public payload: { componentType: string, componentId: string, instanceId: string, artifact: ArtifactModel }) {
+    }
+}
diff --git a/catalog-ui/src/app/ng2/store/actions/workspace.action.ts b/catalog-ui/src/app/ng2/store/actions/workspace.action.ts
new file mode 100644
index 0000000000..c7f18e0ac6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/store/actions/workspace.action.ts
@@ -0,0 +1,17 @@
+/**
+ * Created by ob0695 on 7/17/2018.
+ */
+
+export class UpdateIsViewOnly {
+    static readonly type = '[WORKSPACE] UpdateIsViewOnly';
+
+    constructor(public isViewOnly:boolean) {
+    }
+}
+
+export class UpdateIsDesigner {
+    static readonly type = '[WORKSPACE] UpdateIsDesigner';
+
+    constructor(public isDesigner:boolean) {
+    }
+}
diff --git a/catalog-ui/src/app/ng2/store/states/artifacts.state.spec.ts b/catalog-ui/src/app/ng2/store/states/artifacts.state.spec.ts
new file mode 100644
index 0000000000..c59a4455b6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/store/states/artifacts.state.spec.ts
@@ -0,0 +1,62 @@
+import { Store } from '@ngxs/store';
+import { Observable } from 'rxjs/Rx';
+import { Mock } from 'ts-mockery';
+import { ArtifactModel } from '../../../models/artifacts';
+import { ArtifactGroupType } from '../../../utils/constants';
+import { ComponentInstanceServiceNg2 } from '../../services/component-instance-services/component-instance.service';
+import { GetInstanceArtifactsByTypeAction, UpdateInstanceArtifactAction } from '../actions/instance-artifacts.actions';
+import { InstanceArtifactsState } from './instance-artifacts.state';
+
+describe('Test Artifact State', () => {
+
+    const heat1 = Mock.of<ArtifactModel>({
+        uniqueId: '1', artifactName: 'heat1', timeout: 0, artifactDisplayName: 'heat1', artifactGroupType: ArtifactGroupType.DEPLOYMENT
+    });
+
+    const heat1env = Mock.of<ArtifactModel>({
+        uniqueId: '2', artifactName: 'heat1env', timeout: 0, generatedFromId: '1', artifactDisplayName: 'heat1env', artifactGroupType: ArtifactGroupType.DEPLOYMENT
+    });
+
+    const storeMock = Mock.of<Store>( { dispatch : jest.fn() });
+
+    const artifacts = [
+         heat1,
+         heat1env
+    ];
+
+    /**
+     * NGXS Store state before we run the update
+     */
+    const ngxsState = {
+        deploymentArtifacts : artifacts
+    };
+
+    /**
+     * The ENV artifact that we wish to update
+     */
+    const updatedArtifact = Mock.of<ArtifactModel>({
+        uniqueId: '2', artifactName: 'heat1env', timeout: 33, generatedFromId: '1', artifactDisplayName: 'heat1env-UPDATE', artifactGroupType: ArtifactGroupType.DEPLOYMENT
+    });
+
+    const componentInstanceServiceMock: ComponentInstanceServiceNg2 = Mock.of<ComponentInstanceServiceNg2>({
+        updateInstanceArtifact: jest.fn().mockImplementation(() => Observable.of(updatedArtifact)),
+        getComponentInstanceArtifactsByGroupType: jest.fn().mockImplementation(() => Observable.of([heat1, updatedArtifact]))
+    });
+
+    const actionMock: UpdateInstanceArtifactAction = Mock.of<UpdateInstanceArtifactAction>({
+        payload: {
+            componentType: '',
+            componentId: '',
+            instanceId: '',
+            artifact: updatedArtifact
+        }
+    });
+
+    it('Test that HEAT timeout is updated', () => {
+        const state: InstanceArtifactsState = new InstanceArtifactsState(storeMock, componentInstanceServiceMock);
+        const context = { getState: jest.fn().mockImplementation(() => ngxsState), patchState: jest.fn(), setState: jest.fn(), dispatch: jest.fn() };
+        state.updateArtifact(context, actionMock ).subscribe( (v) => console.log('OK'));
+        expect(storeMock.dispatch).toBeCalled();
+    });
+
+});
diff --git a/catalog-ui/src/app/ng2/store/states/artifacts.state.ts b/catalog-ui/src/app/ng2/store/states/artifacts.state.ts
new file mode 100644
index 0000000000..64efbe96a9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/store/states/artifacts.state.ts
@@ -0,0 +1,140 @@
+/**
+ * Created by ob0695 on 7/17/2018.
+ */
+import { Action, Selector, State, StateContext } from '@ngxs/store';
+import * as _ from 'lodash';
+import { tap } from 'rxjs/operators';
+import { ArtifactModel } from '../../../models/artifacts';
+import { ArtifactGroupType } from '../../../utils/constants';
+import { TopologyTemplateService } from '../../services/component-services/topology-template.service';
+import { ComponentGenericResponse } from '../../services/responses/component-generic-response';
+import { ServiceGenericResponse } from '../../services/responses/service-generic-response';
+import { CreateOrUpdateArtifactAction, DeleteArtifactAction, GetArtifactsByTypeAction } from '../actions/artifacts.action';
+
+export interface ArtifactsStateModel {
+    artifacts: ArtifactModel[];
+    deploymentArtifacts: ArtifactModel[];
+    toscaArtifacts: ArtifactModel[];
+    serviceApiArtifacts: ArtifactModel[];
+}
+
+@State<ArtifactsStateModel>({
+    name: 'artifacts',
+    defaults: {
+        artifacts: [],
+        deploymentArtifacts: [],
+        toscaArtifacts: [],
+        serviceApiArtifacts: []
+    }
+})
+
+export class ArtifactsState {
+
+    constructor(protected topologyTemplateService: TopologyTemplateService) {
+    }
+
+    @Selector()
+    static getEnvArtifact(state: ArtifactsStateModel, heatEnvArtifact: ArtifactModel) {
+        return (heatEnvArtifact: ArtifactModel) => {
+            _.find(state.deploymentArtifacts, (artifact)=> {
+                return artifact.generatedFromId === heatEnvArtifact.uniqueId
+            })
+        };
+    }
+
+    @Selector()
+    static getArtifactsByType(state: ArtifactsStateModel, type: string) {
+        return (type: string) => {
+            switch (type) {
+                case ArtifactGroupType.TOSCA:
+                    return state.toscaArtifacts;
+                case ArtifactGroupType.INFORMATION:
+                    return state.artifacts;
+                case ArtifactGroupType.DEPLOYMENT:
+                    return state.deploymentArtifacts;
+                case ArtifactGroupType.SERVICE_API:
+                    return state.serviceApiArtifacts;
+            }
+        };
+    }
+
+    private updateArtifactState = (artifactsState: ArtifactModel[], artifactToUpdate: ArtifactModel, updatedArtifact: ArtifactModel) => {
+        if (!artifactToUpdate.uniqueId) { // Create Artifact
+            return [...artifactsState, updatedArtifact]
+        } else { // Update Artifact
+            let artifactToUpdateIndex = _.findIndex(artifactsState, (artifact) => {
+                return artifact.uniqueId === artifactToUpdate.uniqueId
+            })
+            let artifacts = Array.from(artifactsState);
+            artifacts[artifactToUpdateIndex] = updatedArtifact;
+            return [...artifacts];
+        }
+    }
+
+    @Action(GetArtifactsByTypeAction)
+    getArtifactsByType({getState, patchState}: StateContext<ArtifactsStateModel>, action: GetArtifactsByTypeAction) {
+        const state = getState();
+        return this.topologyTemplateService.getArtifactsByType(action.payload.componentType, action.payload.componentId, action.payload.artifactType)
+            .pipe(tap((resp: ComponentGenericResponse) => {
+                switch (action.payload.artifactType) {
+                    case ArtifactGroupType.INFORMATION:
+                        patchState({
+                            artifacts: <ArtifactModel[]>_.values(resp.artifacts)
+                        });
+
+                    case ArtifactGroupType.DEPLOYMENT:
+                        patchState({
+                            deploymentArtifacts: <ArtifactModel[]>_.values(resp.deploymentArtifacts)
+                        });
+
+                    case ArtifactGroupType.TOSCA:
+                        patchState({
+                            toscaArtifacts: <ArtifactModel[]>_.values(resp.toscaArtifacts)
+                        });
+
+                    case ArtifactGroupType.SERVICE_API:
+                        patchState({
+                            serviceApiArtifacts: <ArtifactModel[]>_.values((<ServiceGenericResponse>resp).serviceApiArtifacts)
+                        });
+                }
+            }));
+    }
+
+    @Action(CreateOrUpdateArtifactAction)
+    createOrUpdateArtifact({getState, patchState}: StateContext<ArtifactsStateModel>, action: CreateOrUpdateArtifactAction) {
+        const state = getState();
+        return this.topologyTemplateService.addOrUpdateArtifact(action.payload.componentType, action.payload.componentId, action.payload.artifact)
+            .pipe(tap((resp: ArtifactModel) => {
+
+                switch (resp.artifactGroupType) {
+                    case ArtifactGroupType.DEPLOYMENT:
+                        patchState({
+                            deploymentArtifacts: this.updateArtifactState(state.deploymentArtifacts, action.payload.artifact, resp)
+                        });
+
+                    case ArtifactGroupType.INFORMATION:
+                        patchState({
+                            artifacts: this.updateArtifactState(state.artifacts, action.payload.artifact, resp)
+                        });
+                }
+            }));
+    }
+
+    @Action(DeleteArtifactAction)
+    deleteArtifact({getState, patchState}: StateContext<ArtifactsStateModel>, action: DeleteArtifactAction) {
+        const state = getState();
+        return this.topologyTemplateService.deleteArtifact(action.payload.componentId, action.payload.componentType, action.payload.artifact.uniqueId, action.payload.artifact.artifactLabel)
+            .pipe(tap((resp: ArtifactModel) => {
+                switch (resp.artifactGroupType) {
+                    case ArtifactGroupType.DEPLOYMENT:
+                        patchState({
+                            deploymentArtifacts: state.deploymentArtifacts.filter(({uniqueId}) => uniqueId !== action.payload.artifact.uniqueId)
+                        });
+                    case ArtifactGroupType.INFORMATION:
+                        patchState({
+                            artifacts: state.artifacts.filter(({uniqueId}) => uniqueId !== action.payload.artifact.uniqueId)
+                        });
+                }
+            }));
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/store/states/instance-artifacts.state.ts b/catalog-ui/src/app/ng2/store/states/instance-artifacts.state.ts
new file mode 100644
index 0000000000..12ba1ae7ba
--- /dev/null
+++ b/catalog-ui/src/app/ng2/store/states/instance-artifacts.state.ts
@@ -0,0 +1,145 @@
+/**
+ * Created by ob0695 on 7/17/2018.
+ */
+import { Action, Selector, State, StateContext, Store } from '@ngxs/store';
+import * as _ from 'lodash';
+import { tap } from 'rxjs/operators';
+import { ArtifactModel } from '../../../models/artifacts';
+import { ArtifactGroupType } from '../../../utils/constants';
+import { ComponentInstanceServiceNg2 } from '../../services/component-instance-services/component-instance.service';
+import { ComponentGenericResponse } from '../../services/responses/component-generic-response';
+import {
+    CreateInstanceArtifactAction,
+    DeleteInstanceArtifactAction,
+    GetInstanceArtifactsByTypeAction,
+    UpdateInstanceArtifactAction
+} from '../actions/instance-artifacts.actions';
+import { ArtifactsStateModel } from './artifacts.state';
+
+export interface InstanceArtifactsStateModel {
+    artifacts: ArtifactModel[];
+    deploymentArtifacts: ArtifactModel[];
+}
+
+@State<InstanceArtifactsStateModel>({
+    name: 'instance_artifacts',
+    defaults: {
+        artifacts: [],
+        deploymentArtifacts: []
+    }
+})
+export class InstanceArtifactsState {
+
+    constructor(private store: Store, protected componentInstanceService: ComponentInstanceServiceNg2) {
+    }
+
+    @Selector()
+    static getArtifactsByType(state: InstanceArtifactsStateModel) {
+        return (type: string) => {
+            switch (type) {
+                case  ArtifactGroupType.INFORMATION:
+                    return state.artifacts;
+                case ArtifactGroupType.DEPLOYMENT:
+                    return state.deploymentArtifacts;
+            }
+        };
+    }
+
+    @Action(GetInstanceArtifactsByTypeAction)
+    getInstanceArtifactsByType({getState, patchState}: StateContext<InstanceArtifactsStateModel>, action: GetInstanceArtifactsByTypeAction) {
+        const state = getState();
+        return this.componentInstanceService.getComponentInstanceArtifactsByGroupType(action.payload.componentType, action.payload.componentId, action.payload.instanceId, action.payload.artifactType)
+            .pipe(tap((resp: ComponentGenericResponse) => {
+                switch (action.payload.artifactType) {
+                    case ArtifactGroupType.INFORMATION:
+                        patchState({
+                            artifacts: _.values(resp) as ArtifactModel[]
+                        });
+                        break;
+                    case ArtifactGroupType.DEPLOYMENT:
+                        patchState({
+                            deploymentArtifacts: _.values(resp) as ArtifactModel[]
+                        });
+                        break;
+                }
+            }));
+    }
+
+    @Action(CreateInstanceArtifactAction)
+    createArtifact({getState, patchState}: StateContext<ArtifactsStateModel>, action: CreateInstanceArtifactAction) {
+        const state = getState();
+        return this.componentInstanceService.addInstanceArtifact(action.payload.componentType, action.payload.componentId, action.payload.instanceId, action.payload.artifact)
+            .pipe(tap((resp: ArtifactModel) => {
+                switch (resp.artifactGroupType) {
+                    case ArtifactGroupType.DEPLOYMENT:
+                        patchState({
+                            deploymentArtifacts: [...state.deploymentArtifacts, resp]
+                        });
+                        break;
+                    case ArtifactGroupType.INFORMATION:
+                        patchState({
+                            artifacts: [...state.artifacts, resp]
+                        });
+                        break;
+                }
+            }));
+    }
+
+    @Action(UpdateInstanceArtifactAction)
+    updateArtifact({getState, patchState}: StateContext<ArtifactsStateModel>, action: UpdateInstanceArtifactAction) {
+        const state = getState();
+        return this.componentInstanceService.updateInstanceArtifact(action.payload.componentType, action.payload.componentId, action.payload.instanceId, action.payload.artifact)
+            .pipe(tap((resp: ArtifactModel) => {
+                switch (resp.artifactGroupType) {
+                    case ArtifactGroupType.DEPLOYMENT:
+                        // We cannot simply update the updated artifact state because updating a deployment ENV file may cause an update to his parent HEAT
+                        // file.
+                        // Just dispatch an action to refresh the deployment artifacts list
+                        this.store.dispatch(new GetInstanceArtifactsByTypeAction(({
+                            componentType: action.payload.componentType,
+                            componentId: action.payload.componentId,
+                            instanceId: action.payload.instanceId,
+                            artifactType: ArtifactGroupType.DEPLOYMENT
+                        })));
+                        break;
+                    case ArtifactGroupType.INFORMATION:
+                        patchState({
+                            artifacts: this.updateInstanceArtifactState(state.artifacts, action.payload.artifact, resp)
+                        });
+                        break;
+                }
+            }));
+    }
+
+    @Action(DeleteInstanceArtifactAction)
+    deleteInstanceArtifact({getState, patchState}: StateContext<ArtifactsStateModel>, action: DeleteInstanceArtifactAction) {
+        const state = getState();
+        return this.componentInstanceService.
+                    deleteInstanceArtifact(action.payload.componentId, action.payload.componentType, action.payload.instanceId, action.payload.artifact.uniqueId, action.payload.artifact.artifactLabel)
+            .pipe(tap((resp: ArtifactModel) => {
+                switch (resp.artifactGroupType) {
+                    case ArtifactGroupType.DEPLOYMENT:
+                        patchState({
+                            deploymentArtifacts: state.deploymentArtifacts.filter(({uniqueId}) => uniqueId !== action.payload.artifact.uniqueId)
+                        });
+                        break;
+                    case ArtifactGroupType.INFORMATION:
+                        patchState({
+                            artifacts: state.artifacts.filter(({uniqueId}) => uniqueId !== action.payload.artifact.uniqueId)
+                        });
+                        break;
+                }
+            }));
+    }
+
+    private updateInstanceArtifactState = (artifactsState: ArtifactModel[], artifactToUpdate: ArtifactModel, updatedArtifact: ArtifactModel) => {
+        const artifactToUpdateIndex = _.findIndex(artifactsState, (artifact) => {
+            return artifact.uniqueId === artifactToUpdate.uniqueId;
+        });
+        const artifacts = Array.from(artifactsState);
+        artifacts[artifactToUpdateIndex] = updatedArtifact;
+        const ret = [...artifacts];
+        return ret;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/store/states/workspace.state.ts b/catalog-ui/src/app/ng2/store/states/workspace.state.ts
new file mode 100644
index 0000000000..eb8200f6e0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/store/states/workspace.state.ts
@@ -0,0 +1,48 @@
+/**
+ * Created by ob0695 on 7/17/2018.
+ */
+import {State, Action, StateContext} from '@ngxs/store';
+import {UpdateIsDesigner, UpdateIsViewOnly} from "../actions/workspace.action";
+import {Selector} from "@ngxs/store";
+
+export interface WorkspaceStateModel {
+    isViewOnly: boolean;
+    isDesigner: boolean;
+}
+
+@State<WorkspaceStateModel>({
+    name: 'workspace',
+    defaults: {
+        isViewOnly: false,
+        isDesigner: true
+    }
+})
+
+export class WorkspaceState {
+
+    constructor(){}
+
+    @Selector() static isViewOnly(state: WorkspaceStateModel):boolean {
+        return state.isViewOnly;
+    }
+    @Selector() static isDesigner(state: WorkspaceStateModel): boolean {
+        return state.isDesigner;
+    }
+
+    @Action(UpdateIsViewOnly)
+    updateIsViewOnly({getState, setState}: StateContext<WorkspaceStateModel>, action:UpdateIsViewOnly) {
+        const state = getState();
+        setState({
+            ...state,
+            isViewOnly: action.isViewOnly
+        });
+    }
+
+    @Action(UpdateIsDesigner)
+    updateIsDesigner({getState, patchState}: StateContext<WorkspaceStateModel>, action:UpdateIsDesigner) {
+        const state = getState();
+        patchState({
+            isDesigner: action.isDesigner
+        });
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts
index fcb21c0c83..aab531d205 100644
--- a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts
+++ b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts
@@ -23,13 +23,12 @@
  */
 import { DataTypesService } from "../../services/data-types-service";
 import ICacheObject = angular.ICacheObject;
-import { SharingService } from "../../services/sharing-service";
 import { CookieService } from "../../services/cookie-service";
-import { CacheService } from "../../services/cache-service";
 import {ComponentFactory} from "../../utils/component-factory"
 import { EventListenerService } from "app/services/event-listener-service";
 import { ModalsHandler } from "app/utils";
 import IScope = angular.IScope;
+import { SharingService } from "../services/sharing.service";
 
 /** Services we need to upgrade from angular1 to angular2 - in the future we need to rewrite them all to angular2 **/
 
@@ -61,10 +60,6 @@ export function scopeServiceFactory(cacheObj: ICacheObject) {
     return cacheObj.get('$scope');
 }
 
-export function cacheServiceFactory(cacheObj: ICacheObject) {
-    return cacheObj.get('Sdc.Services.CacheService');
-}
-
 export function eventListenerServiceServiceFactory(cacheObj: ICacheObject) {
     return cacheObj.get('EventListenerService');
 }
@@ -73,6 +68,10 @@ export function notificationServiceFactory(cacheObj: ICacheObject) {
     return cacheObj.get('Notification');
 }
 
+export function ModalsHandlerFactory(cacheObj: ICacheObject) {
+    return cacheObj.get('ModalsHandler');
+}
+
 
 export const ComponentFactoryProvider = {
     provide: ComponentFactory,
@@ -80,18 +79,12 @@ export const ComponentFactoryProvider = {
     deps: ['$injector']
 };
 
-
-export function ModalsHandlerFactory(cacheObj: ICacheObject) {
-    return cacheObj.get('ModalsHandler');
-}
-
 export const DataTypesServiceProvider = {
     provide: DataTypesService,
     useFactory: dataTypesServiceFactory,
     deps: ['$injector']
 };
 
-
 export const SharingServiceProvider = {
     provide: SharingService,
     useFactory: sharingServiceFactory,
@@ -122,17 +115,12 @@ export const StateParamsServiceFactory = {
     useFactory: stateParamsServiceFactory,
     deps: ['$injector']
 };
-export const CacheServiceProvider = {
-    provide: CacheService,
-    useFactory: cacheServiceFactory,
-    deps: ['$injector']
-};
-
-export const EventListenerServiceProvider = {
-    provide: EventListenerService,
-    useFactory: eventListenerServiceServiceFactory,
-    deps: ['$injector']
-};
+//
+// export const EventListenerServiceProvider = {
+//     provide: EventListenerService,
+//     useFactory: eventListenerServiceServiceFactory,
+//     deps: ['$injector']
+// };
 
 export const NotificationServiceProvider = {
     provide: 'Notification',
@@ -144,4 +132,4 @@ export const ModalsHandlerProvider = {
     provide: ModalsHandler,
     useFactory: ModalsHandlerFactory,
     deps: ['$injector']
-}
+};
diff --git a/catalog-ui/src/app/ng2/utils/queue-service-utils.ts b/catalog-ui/src/app/ng2/utils/queue-service-utils.ts
new file mode 100644
index 0000000000..8cf7f98383
--- /dev/null
+++ b/catalog-ui/src/app/ng2/utils/queue-service-utils.ts
@@ -0,0 +1,58 @@
+/**
+ * Created by ob0695 on 6/3/2018.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {Injectable} from "@angular/core";
+
+@Injectable()
+export class QueueServiceUtils {
+
+    private executionQueue:any;
+
+    constructor() {
+        if(!this.executionQueue) {
+            this.executionQueue = this.getQueue();
+        }
+    }
+
+    private getQueue = () => new Promise((resolve, reject) => {
+       resolve(true);
+    });
+
+    private addMethodToQueue = (runMe:Function):void => {
+        this.executionQueue = this.executionQueue.then(runMe, runMe);
+    };
+
+    addNonBlockingUIAction = (update:Function, releaseUIcallBack?:Function):void => {
+        // releaseUIcallBack();
+        this.addMethodToQueue(update);
+    };
+
+    // The Method call is responsible for releasing the UI
+    addBlockingUIAction = (blockingServerRequest:Function):void => {
+        this.addMethodToQueue(blockingServerRequest);
+    };
+
+    addBlockingUIActionWithReleaseCallback = (blockingServerRequest:Function, releaseUIcallBack:Function):void=> {
+        this.addMethodToQueue(blockingServerRequest);
+        // this.addMethodToQueue(releaseUIcallBack);
+    };
+}
diff --git a/catalog-ui/src/app/services-ng2.ts b/catalog-ui/src/app/services-ng2.ts
new file mode 100644
index 0000000000..e2811ba68d
--- /dev/null
+++ b/catalog-ui/src/app/services-ng2.ts
@@ -0,0 +1,27 @@
+// Angular 2 services
+export * from './ng2/services/config.service';
+export * from './ng2/services/authentication.service';
+export * from './ng2/services/user.service';
+export * from './ng2/services/data-type.service';
+export * from './ng2/services/modal.service';
+export * from './ng2/services/plugins.service';
+export * from './ng2/services/sharing.service';
+export * from './ng2/services/cache.service';
+export * from './ng2/services/cookie.service';
+export * from './ng2/services/home.service';
+export * from './ng2/services/catalog.service';
+export * from './ng2/services/policies.service';
+export * from './ng2/services/properties.service';
+export * from './ng2/services/window.service';
+export * from './ng2/services/dynamic-component.service';
+export * from './ng2/services/event-bus.service';
+export * from './ng2/services/groups.service';
+
+export * from './ng2/services/component-services/component.service';
+export * from './ng2/services/component-services/component.service.factory';
+export * from './ng2/services/component-services/service.service';
+export * from './ng2/services/component-services/resource.service';
+export * from './ng2/services/component-services/component-mode.service';
+
+export * from './ng2/services/onboarding.service';
+export * from './ng2/components/modals/onboarding-modal/import-vsp.service'
diff --git a/catalog-ui/src/app/services.ts b/catalog-ui/src/app/services.ts
index 79b5132634..be77fed951 100644
--- a/catalog-ui/src/app/services.ts
+++ b/catalog-ui/src/app/services.ts
@@ -21,9 +21,7 @@
 /**
  * Created by ob0695 on 2/23/2017.
  */
-export * from './services/activity-log-service';
 export * from './services/available-icons-service';
-export * from './services/cache-service';
 export * from './services/configuration-ui-service';
 export * from './services/category-resource-service';
 export * from './services/components/component-service';
@@ -37,14 +35,10 @@ export * from './services/category-resource-service';
 export * from './services/cookie-service';
 export * from './services/data-types-service';
 export * from './services/ecomp-service';
-export * from './services/entity-service';
 export * from './services/event-listener-service';
 export * from './services/header-interceptor';
 export * from './services/loader-service';
-export * from './services/onboarding-service';
 export * from './services/progress-service';
 export * from './services/sdc-version-service';
-export * from './services/sharing-service';
 export * from './services/url-tobase64-service';
 export * from './services/angular-js-bridge-service';
-
diff --git a/catalog-ui/src/app/services/activity-log-service.ts b/catalog-ui/src/app/services/activity-log-service.ts
deleted file mode 100644
index 97d26d4f44..0000000000
--- a/catalog-ui/src/app/services/activity-log-service.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {Activity} from "../models/activity";
-import {IAppConfigurtaion, IApi} from "../models/app-config";
-
-// Define an interface of the object you want to use, providing it's properties
-export interface IActivityLogService {
-    getActivityLogService(type:string, id:string):ng.IPromise<Array<Activity>>;
-}
-
-export class ActivityLogService implements IActivityLogService {
-
-
-    static '$inject' = ['$http', '$q', 'sdcConfig'];
-    private api:IApi;
-
-    constructor(private $http:ng.IHttpService, private $q:ng.IQService, sdcConfig:IAppConfigurtaion) {
-        this.api = sdcConfig.api;
-    }
-
-    getActivityLogService = (type:string, id:string):ng.IPromise<Array<Activity>> => {
-        let defer = this.$q.defer<any>();
-        this.$http.get(this.api.root + this.api.GET_activity_log.replace(':type', type).replace(':id', id))
-            .then((activityLog:any) => {
-                defer.resolve(activityLog.data);
-            });
-        return defer.promise;
-    }
-}
diff --git a/catalog-ui/src/app/services/components/component-service.ts b/catalog-ui/src/app/services/components/component-service.ts
index 25203e7732..c7ab975e6e 100644
--- a/catalog-ui/src/app/services/components/component-service.ts
+++ b/catalog-ui/src/app/services/components/component-service.ts
@@ -22,7 +22,7 @@ import * as _ from "lodash";
 import {ArtifactModel, IFileDownload, InstancesInputsPropertiesMap, InputModel, IValidate, RelationshipModel, PropertyModel, Component, ComponentInstance,
     AttributeModel, IAppConfigurtaion, Resource, Module, DisplayModule, ArtifactGroupModel, InputsAndProperties} from "app/models";
 import {ComponentInstanceFactory, CommonUtils} from "app/utils";
-import {SharingService} from "../sharing-service";
+import {SharingService} from "app/services-ng2";
 import {ComponentMetadata} from "../../models/component-metadata";
 
 export interface IComponentService {
@@ -683,7 +683,6 @@ export class ComponentService implements IComponentService {
 
 
     public getComponentInstanceProperties = (componentId:string, instanceId:string):ng.IPromise<Array<PropertyModel>> => {
-
         let deferred = this.$q.defer<Array<PropertyModel>>();
         this.restangular.one(componentId).one("componentInstances").one(instanceId).one("properties").get().then((response:any) => {
             console.log("component instance  properties return successfully: ", response);
diff --git a/catalog-ui/src/app/services/components/resource-service.ts b/catalog-ui/src/app/services/components/resource-service.ts
index cb30107a69..3a00da1171 100644
--- a/catalog-ui/src/app/services/components/resource-service.ts
+++ b/catalog-ui/src/app/services/components/resource-service.ts
@@ -25,7 +25,7 @@
 import * as _ from "lodash";
 import {IComponentService, ComponentService} from "./component-service";
 import {PropertyModel, IAppConfigurtaion, Resource, Component} from "../../models";
-import {SharingService} from "../sharing-service";
+import {SharingService} from "app/services-ng2";
 
 export interface IResourceService extends IComponentService {
     updateResourceGroupProperties(uniqueId:string, groupId:string, properties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>>
diff --git a/catalog-ui/src/app/services/components/service-service.ts b/catalog-ui/src/app/services/components/service-service.ts
index f258c7be98..6c318bd6d6 100644
--- a/catalog-ui/src/app/services/components/service-service.ts
+++ b/catalog-ui/src/app/services/components/service-service.ts
@@ -25,7 +25,7 @@
 import * as _ from "lodash";
 import {IComponentService, ComponentService} from "./component-service";
 import {Distribution, DistributionComponent, Service, PropertyModel, Component, IAppConfigurtaion} from "app/models";
-import {SharingService} from "../sharing-service";
+import {SharingService} from "app/services-ng2";
 
 export interface IServiceService extends IComponentService {
     getDistributionsList(uuid:string):ng.IPromise<Array<Distribution>>;
diff --git a/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts b/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
index 99be788547..b47c5e019b 100644
--- a/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
+++ b/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
@@ -32,11 +32,13 @@ import {ComponentMetadata} from "app/models/component-metadata";
 import {GroupMetadata, GroupTpes} from "app/models/group-metadata";
 import {PolicyMetadata, PolicyTpes} from "app/models/policy-metadata";
 import {Resource} from "app/models/components/resource";
+import IHttpPromiseCallbackArg = angular.IHttpPromiseCallbackArg;
 
 export class LeftPaletteLoaderService {
 
     static '$inject' = [
         'Restangular',
+        '$http',
         'sdcConfig',
         '$q',
         'ComponentFactory',
@@ -45,6 +47,7 @@ export class LeftPaletteLoaderService {
     ];
 
     constructor(protected restangular:restangular.IElement,
+                protected $http:ng.IHttpService,
                 protected sdcConfig:IAppConfigurtaion,
                 protected $q:ng.IQService,
                 protected ComponentFactory:ComponentFactory,
@@ -64,7 +67,9 @@ export class LeftPaletteLoaderService {
     private updateLeftPalette = (componentInternalType:string):void => {
 
         /* add components */
-        this.restangular.one("resources").one('/latestversion/notabstract/metadata').get({'internalComponentType': componentInternalType}).then((leftPaletteComponentMetadata:Array<ComponentMetadata>) => {    
+        const leftPaletteUrl = this.sdcConfig.api.uicache_root + this.sdcConfig.api.GET_uicache_left_palette;
+        this.$http.get(leftPaletteUrl, {params: {'internalComponentType': componentInternalType}}).then((res) => res.data).then((leftPaletteComponentMetadata:Array<ComponentMetadata>) => {
+        // this.restangular.one("resources").one('/latestversion/notabstract/metadata').get({'internalComponentType': componentInternalType}).then((leftPaletteComponentMetadata:Array<ComponentMetadata>) => {
             _.forEach(leftPaletteComponentMetadata, (componentMetadata:ComponentMetadata) => {
                 this.leftPanelComponents.push(new LeftPaletteComponent(LeftPaletteMetadataTypes.Component, componentMetadata));
             });
diff --git a/catalog-ui/src/app/services/entity-service.ts b/catalog-ui/src/app/services/entity-service.ts
deleted file mode 100644
index 2e7b2e1eed..0000000000
--- a/catalog-ui/src/app/services/entity-service.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import { Service, IApi, IAppConfigurtaion, Resource, Component} from "../models";
-import {SharingService} from "./sharing-service";
-import {ComponentFactory} from "../utils/component-factory";
-import {CacheService} from "./cache-service";
-import {ResourceType} from "app/utils";
-
-interface IEntityService {
-    getAllComponents(smallObjects?:boolean):ng.IPromise<Array<Component>>;
-}
-
-interface IComponentsArray {
-    services:Array<Service>;
-    resources:Array<Resource>;
-}
-
-export class EntityService implements IEntityService {
-    static '$inject' = ['$http', '$q', 'sdcConfig', 'Sdc.Services.SharingService', 'ComponentFactory', 'Sdc.Services.CacheService'];
-    private _smallObjectAttributes = ['uniqueId', 'name', 'componentType', 'resourceType', 'lastUpdateDate', 'lifecycleState', 'distributionStatus', 'icon', 'version'];
-    private api:IApi;
-
-    constructor(private $http:ng.IHttpService,
-                private $q:ng.IQService,
-                private sdcConfig:IAppConfigurtaion,
-                private sharingService:SharingService,
-                private ComponentFactory:ComponentFactory,
-                private cacheService:CacheService) {
-        this.api = sdcConfig.api;
-    }
-
-    getCatalog = ():ng.IPromise<Array<Component>> => {
-        let defer = this.$q.defer<Array<Component>>();
-        this.$http.get(this.api.root + this.api.GET_catalog, {params: {excludeTypes: [ResourceType.VFCMT, ResourceType.CONFIGURATION]}})
-            .then((response:any) => {
-                let followedResponse: IComponentsArray =  response.data;
-                let componentsList:Array<Component> = new Array();
-
-                followedResponse.services && followedResponse.services.forEach((serviceResponse:Service) => {
-                    let component:Service = this.ComponentFactory.createService(serviceResponse); // new Service(serviceResponse);
-                    componentsList.push(component);
-                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
-                });
-
-                followedResponse.resources && followedResponse.resources.forEach((resourceResponse:Resource) => {
-                    let component:Resource = this.ComponentFactory.createResource(resourceResponse);
-                    componentsList.push(component);
-                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
-                });
-
-                defer.resolve(componentsList);
-            },(responce) => {
-                defer.reject(responce);
-            });
-        return defer.promise;
-    };
-
-    getAllComponents = (smallObjects?:boolean):ng.IPromise<Array<Component>> => {
-        let defer = this.$q.defer<Array<Component>>();
-        this.$http.get(this.api.root + this.api.GET_element)
-            .then((response:any) => {
-                let componentResponse:IComponentsArray = response.data;
-                let componentsList:Array<Component> = [];
-
-                componentResponse.services && componentResponse.services.forEach((serviceResponse:Service) => {
-                    serviceResponse = (smallObjects) ? _.pick(serviceResponse, this._smallObjectAttributes) : serviceResponse;
-                    let component:Service = this.ComponentFactory.createService(serviceResponse);
-                    componentsList.push(component);
-                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
-                });
-
-                componentResponse.resources && componentResponse.resources.forEach((resourceResponse:Resource) => {
-                    resourceResponse = (smallObjects) ? _.pick(resourceResponse, this._smallObjectAttributes) : resourceResponse;
-                    let component:Resource = this.ComponentFactory.createResource(resourceResponse);
-                    componentsList.push(component);
-                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
-                });
-                
-                defer.resolve(componentsList);
-            });
-
-        return defer.promise;
-    };
-}
diff --git a/catalog-ui/src/app/services/event-listener-service.ts b/catalog-ui/src/app/services/event-listener-service.ts
index 360edad700..2d3c4a6fc8 100644
--- a/catalog-ui/src/app/services/event-listener-service.ts
+++ b/catalog-ui/src/app/services/event-listener-service.ts
@@ -23,22 +23,21 @@
 'use strict';
 import * as _ from "lodash";
 import {Dictionary} from "../utils/dictionary/dictionary";
+import {Injectable} from "@angular/core";
 
-interface IEventListenerService {
-
-}
 
 interface ICallbackData {
-    callback:Function;
-    args:any[];
+    callback: Function;
+    args: any[];
 }
 
-export class EventListenerService implements IEventListenerService {
+@Injectable()
+export class EventListenerService {
 
-    public observerCallbacks:Dictionary<string, ICallbackData[]> = new Dictionary<string, Array<ICallbackData>>();
+    public observerCallbacks: Dictionary<string, ICallbackData[]> = new Dictionary<string, Array<ICallbackData>>();
 
     //register an observer + callback
-    public registerObserverCallback = (eventName:string, callback:Function, ...args) => {
+    public registerObserverCallback = (eventName: string, callback: Function, ...args) => {
         let callbackData = {
             callback: callback,
             args: args
@@ -62,11 +61,11 @@ export class EventListenerService implements IEventListenerService {
     };
 
     //unregister an observer
-    public unRegisterObserver = (eventName:string, callbackFunc?:Function) => {
+    public unRegisterObserver = (eventName: string, callbackFunc?: Function) => {
         if (this.observerCallbacks.containsKey(eventName)) {
 
-            let callbacks: ICallbackData[]  =  this.observerCallbacks.getValue(eventName);
-            if(callbacks.length === 1) {
+            let callbacks: ICallbackData[] = this.observerCallbacks.getValue(eventName);
+            if (callbacks.length === 1) {
                 this.observerCallbacks.remove(eventName);
             } else {
                 let filterCallbacks = _.filter(callbacks, (callBackObj) => {
@@ -74,13 +73,12 @@ export class EventListenerService implements IEventListenerService {
                 });
                 this.observerCallbacks.setValue(eventName, filterCallbacks);
             }
-
         }
     };
 
-    public notifyObservers = function (eventName:string, ...args) {
-        _.forEach(this.observerCallbacks.getValue(eventName), (callbackData:ICallbackData) => {
-            callbackData.callback(...args);
-        });
+    public notifyObservers = function (eventName: string, ...args) {
+            _.forEach(this.observerCallbacks.getValue(eventName), (callbackData: ICallbackData) => {
+                callbackData.callback(...args);
+            });
     };
 }
diff --git a/catalog-ui/src/app/services/header-interceptor.ts b/catalog-ui/src/app/services/header-interceptor.ts
index 931b292d60..5f4819ae88 100644
--- a/catalog-ui/src/app/services/header-interceptor.ts
+++ b/catalog-ui/src/app/services/header-interceptor.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -19,17 +19,19 @@
  */
 
 'use strict';
-import {IAppConfigurtaion} from "../models/app-config";
-import {Dictionary} from "../utils/dictionary/dictionary";
-import {SharingService} from "./sharing-service";
-
-//Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
-export interface IInterceptor {
-    request:Function;
+import { SharingService } from 'app/services-ng2';
+import { IAppConfigurtaion } from '../models/app-config';
+import { ServerErrorResponse } from '../models/server-error-response';
+import { Dictionary } from '../utils/dictionary/dictionary';
 
+// Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
+export interface Interceptor {
+    request: Function;
+    response: Function;
+    responseError: Function;
 }
 
-export class HeaderInterceptor implements IInterceptor {
+export class HeaderInterceptor implements Interceptor {
     public static $inject = [
         '$injector',
         '$q',
@@ -39,51 +41,55 @@ export class HeaderInterceptor implements IInterceptor {
         '$location'
     ];
 
-    public static Factory($injector:ng.auto.IInjectorService,
-                          $q:ng.IQService,
-                          uuid4:any,
-                          sharingService:SharingService,
-                          sdcConfig:IAppConfigurtaion,
-                          $location:ng.ILocationService) {
-        return new HeaderInterceptor($injector, $q, uuid4, sharingService, sdcConfig, $location);
-    }
-
-    constructor(private $injector:ng.auto.IInjectorService,
-                private $q:ng.IQService,
-                private uuid4:any,
-                private sharingService:SharingService,
-                private sdcConfig:IAppConfigurtaion,
-                private $location:ng.ILocationService) {
-        console.debug('header-interceptor: initializing AuthenticationInterceptor');
+    constructor(private $injector: ng.auto.IInjectorService,
+                private $q: ng.IQService,
+                private uuid4: any,
+                private sharingService: SharingService,
+                private sdcConfig: IAppConfigurtaion,
+                private $location: ng.ILocationService) {
     }
 
-    public request = (requestSuccess):ng.IPromise<any> => {
+    public request = (requestSuccess): ng.IPromise<any> => {
         requestSuccess.headers['X-ECOMP-RequestID'] = this.uuid4.generate();
         /**
          * For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
          * Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
          */
-        let map:Dictionary<string, string> = this.sharingService.getUuidMap();
+        const map: Dictionary<string, string> = this.sharingService.getUuidMap();
         if (map && requestSuccess.url.indexOf(this.sdcConfig.api.root) === 0) {
-            console.log("header-interceptor: url: " + requestSuccess.url);
-            map.forEach((key:string) => {
+            map.forEach((key: string) => {
                 if (requestSuccess.url.indexOf(key) !== -1) {
                     requestSuccess.headers['X-ECOMP-ServiceID'] = this.sharingService.getUuidValue(key);
                 }
             });
         }
         return requestSuccess;
-    };
+    }
 
-    public response = (responseSuccess):ng.IPromise<any> => {
-        let responseData = responseSuccess.data;
+    public response = (responseSuccess): ng.IPromise<any> => {
+        const responseData = responseSuccess.data;
         if (responseData) {
-            let data = JSON.stringify(responseData);
-            if (data && (data.indexOf("Global Logon: Login") > 0)) {
+            const data = JSON.stringify(responseData);
+            if (data && (data.indexOf('Global Logon: Login') > 0)) {
                 this.$location.path('dashboard/welcome');
                 window.location.reload();
             }
         }
         return responseSuccess;
     }
+
+    public responseError = (response): ng.IPromise<any> => {
+        const errorResponse: ServerErrorResponse = new ServerErrorResponse(response, true);
+        const modalService = this.$injector.get('ModalServiceSdcUI');
+
+        const errorDetails = {
+            'Error Code': errorResponse.messageId,
+            'Status Code': errorResponse.status
+        };
+        if (errorResponse.ecompRequestId) {
+            errorDetails['Transaction ID'] = errorResponse.ecompRequestId;
+        }
+        modalService.openErrorDetailModal('Error', errorResponse.message, 'error-modal', errorDetails);
+        return this.$q.reject(errorResponse);
+    }
 }
diff --git a/catalog-ui/src/app/services/http-error-interceptor.ts b/catalog-ui/src/app/services/http-error-interceptor.ts
deleted file mode 100644
index cef8c30716..0000000000
--- a/catalog-ui/src/app/services/http-error-interceptor.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {IServerMessageModalModel} from "../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model";
-import {SEVERITY} from "../utils/constants";
-import 'app/utils/prototypes.ts';
-
-export class HttpErrorInterceptor {
-    public static $inject = ['$injector', '$q'];
-
-    public static Factory($injector:ng.auto.IInjectorService, $q:angular.IQService) {
-        return new HttpErrorInterceptor($injector, $q);
-    }
-
-    constructor(private $injector:ng.auto.IInjectorService, private $q:angular.IQService) {
-    }
-
-    public formatMessageArrays = (message:string, variables:Array<string>)=> {
-        return message.replace(/\[%(\d+)\]/g, function (_, m) {
-            let tmp = [];
-            let list = variables[--m].split(";");
-            list.forEach(function (item) {
-                tmp.push("<li>" + item + "</li>");
-            });
-            return "<ul>" + tmp.join("") + "</ul>";
-        });
-    };
-
-    public responseError = (rejection:any)=> {
-
-        let text:string;
-        let variables;
-        let messageId:string = "";
-        let isKnownException = false;
-
-        if (rejection.data && rejection.data.serviceException) {
-            text = rejection.data.serviceException.text;
-            variables = rejection.data.serviceException.variables;
-            messageId = rejection.data.serviceException.messageId;
-            isKnownException = true;
-        } else if (rejection.data && rejection.data.requestError && rejection.data.requestError.serviceException) {
-            text = rejection.data.requestError.serviceException.text;
-            variables = rejection.data.requestError.serviceException.variables;
-            messageId = rejection.data.requestError.serviceException.messageId;
-            isKnownException = true;
-        } else if (rejection.data && rejection.data.requestError && rejection.data.requestError.policyException) {
-            text = rejection.data.requestError.policyException.text;
-            variables = rejection.data.requestError.policyException.variables;
-            messageId = rejection.data.requestError.policyException.messageId;
-            isKnownException = true;
-        } else if (rejection.data) {
-            text = 'Wrong error format from server';
-            console.error(text);
-            isKnownException = false;
-        }
-
-        let data:IServerMessageModalModel;
-        if (isKnownException) {
-            // Remove the "Error: " text at the begining
-            if (text.trim().indexOf("Error:") === 0) {
-                text = text.replace("Error:", "").trim();
-            }
-
-            //mshitrit DE199895 bug fix
-            let count:number = 0;
-            variables.forEach(function (item) {
-                variables[count] = item ? item.replace('<', '&lt').replace('>', '&gt') : '';
-                count++;
-            });
-
-            // Format the message in case has array to <ul><li>
-            text = this.formatMessageArrays(text, variables);
-
-            // Format the message %1 %2
-            text = text.format(variables);
-
-            // Need to inject the MessageService manually to prevent circular componentsToUpgrade (because MessageService use $templateCache that use $http).
-            data = {
-                title: 'Error',
-                message: text,
-                messageId: messageId,
-                status: rejection.status,
-                severity: SEVERITY.ERROR
-            };
-        } else {
-            // Need to inject the MessageService manually to prevent circular componentsToUpgrade (because MessageService use $templateCache that use $http).
-            data = {
-                title: 'Error',
-                message: rejection.status !== -1 ? rejection.statusText : "Error getting response from server",
-                messageId: messageId,
-                status: rejection.status,
-                severity: SEVERITY.ERROR
-            };
-        }
-
-        let modalsHandler = this.$injector.get('ModalsHandler');
-        modalsHandler.openServerMessageModal(data);
-
-        return this.$q.reject(rejection);
-    }
-}
diff --git a/catalog-ui/src/app/services/onboarding-service.ts b/catalog-ui/src/app/services/onboarding-service.ts
deleted file mode 100644
index 3a6e940c6e..0000000000
--- a/catalog-ui/src/app/services/onboarding-service.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {Component, IComponent} from "../models/components/component";
-import {ICsarComponent} from "../models/csar-component";
-import {IAppConfigurtaion, IApi} from "../models/app-config";
-import {IFileDownload} from "../models/file-download";
-import {Resource} from "../models/components/resource";
-import {ComponentFactory} from "../utils/component-factory";
-
-interface IOnboardingService {
-    getOnboardingComponents():ng.IPromise<Array<IComponent>>;
-    getComponentFromCsarUuid(csarUuid:string):ng.IPromise<Component>;
-    downloadOnboardingCsar(packageId:string):ng.IPromise<IFileDownload>;
-}
-
-export class OnboardingService implements IOnboardingService {
-
-    static '$inject' = ['$http', '$q', 'sdcConfig', 'ComponentFactory'];
-    private api:IApi;
-
-    constructor(private $http:ng.IHttpService,
-                private $q:ng.IQService,
-                private sdcConfig:IAppConfigurtaion,
-                private ComponentFactory:ComponentFactory) {
-        this.api = sdcConfig.api;
-    }
-
-    getOnboardingVSPs = ():ng.IPromise<Array<ICsarComponent>> =>{
-        let defer = this.$q.defer<Array<ICsarComponent>>();
-        this.$http.get(this.api.GET_onboarding)
-            .then((response:any) => {
-                defer.resolve(response.data.results);
-            },(response) => {
-                defer.reject(response);
-            });
-
-        return defer.promise;
-    };
-
-    getOnboardingComponents = ():ng.IPromise<Array<IComponent>> => {
-        let defer = this.$q.defer<Array<IComponent>>();
-        this.getOnboardingVSPs().then((onboardingComponents:Array<ICsarComponent>) => {
-                let componentsList:Array<IComponent> = new Array();
-
-                onboardingComponents.forEach((obc:ICsarComponent) => {
-                    let component:Component = this.ComponentFactory.createFromCsarComponent(obc);
-                    componentsList.push(component);
-                });
-
-                defer.resolve(componentsList);
-            },(response) => {
-                defer.reject(response);
-            });
-
-        return defer.promise;
-    };
-
-    downloadOnboardingCsar = (packageId:string):ng.IPromise<IFileDownload> => {
-        let defer = this.$q.defer<IFileDownload>();
-        this.$http({
-            url: this.api.GET_onboarding + "/" + packageId,
-            method: "get",
-            responseType: "blob"
-        })
-            .then((response:any) => {
-                defer.resolve(response.data);
-            }, (err) => {
-                defer.reject(err);
-            });
-
-        return defer.promise;
-    };
-
-    getComponentFromCsarUuid = (csarUuid:string):ng.IPromise<Component> => {
-        let defer = this.$q.defer<Component>();
-        this.$http.get(this.api.root + this.api.GET_component_from_csar_uuid.replace(':csar_uuid', csarUuid))
-            .then((response:any) => {
-                let component:Resource;
-                // If the status is 400, this means that the component not found.
-                // I do not want to return error from server, because a popup will appear in client with the error.
-                // So returning success (200) with status 400.
-                if (response.data.status !== 400) {
-                    component = new Resource(null, this.$q, <Resource>response.data);
-                }
-                defer.resolve(component);
-            },(response) => {
-                defer.reject(response.data);
-            });
-
-        return defer.promise;
-    };
-
-}
diff --git a/catalog-ui/src/app/utils.ts b/catalog-ui/src/app/utils.ts
index 1d2eafb9fb..27c805a762 100644
--- a/catalog-ui/src/app/utils.ts
+++ b/catalog-ui/src/app/utils.ts
@@ -22,7 +22,6 @@
  * Created by ob0695 on 2/23/2017.
  */
 export * from './utils/dictionary/dictionary';
-export * from './utils/artifacts-utils';
 export * from'./utils/file-utils'
 export * from './utils/validation-utils'
 export * from './utils/component-factory';
diff --git a/catalog-ui/src/app/utils/artifacts-utils.ts b/catalog-ui/src/app/utils/artifacts-utils.ts
deleted file mode 100644
index e99b6411c4..0000000000
--- a/catalog-ui/src/app/utils/artifacts-utils.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {ArtifactModel} from "../models/artifacts";
-import {IArtifactResourceFormViewModelScope} from "../view-models/forms/artifact-form/artifact-form-view-model";
-import {Component} from "../models/components/component";
-import {ArtifactGroupType, ArtifactType} from "./constants";
-
-export class ArtifactsUtils {
-
-    static '$inject' = [
-        '$filter'
-    ];
-
-    constructor(private $filter:ng.IFilterService) {
-
-    }
-
-    public getArtifactTypeByState(currentState:string):string {
-        switch (currentState) {
-            case "workspace.composition.lifecycle":
-                return "interface";
-            case "workspace.composition.api":
-                return "api";
-            case "workspace.deployment_artifacts":
-            case "workspace.composition.deployment":
-                return "deployment";
-            case "workspace.composition.artifacts":
-                return "informational";
-            default:
-                return "informational";
-        }
-    }
-
-    public getTitle(artifactType:string, selectedComponent:Component):string {
-        switch (artifactType) {
-            case "interface":
-                return "Lifecycle Management";
-            case "api":
-                return "API Artifacts";
-            case "deployment":
-                return "Deployment Artifacts";
-            case "informational":
-                return "Informational Artifacts";
-            default:
-                if (!selectedComponent) {
-                    return "";
-                } else {
-                    return this.$filter("resourceName")(selectedComponent.name) + ' Artifacts';
-                }
-        }
-    }
-
-    public setArtifactType = (artifact:ArtifactModel, artifactType:string):void => {
-        switch (artifactType) {
-            case "api":
-                artifact.artifactGroupType = ArtifactGroupType.SERVICE_API;
-                break;
-            case "deployment":
-                artifact.artifactGroupType = ArtifactGroupType.DEPLOYMENT;
-                break;
-            default:
-                artifact.artifactGroupType = ArtifactGroupType.INFORMATION;
-                break;
-        }
-    };
-
-    public isLicenseType = (artifactType:string):boolean => {
-        let isLicense:boolean = false;
-
-        if (ArtifactType.VENDOR_LICENSE === artifactType || ArtifactType.VF_LICENSE === artifactType) {
-            isLicense = true;
-        }
-
-        return isLicense;
-    };
-
-    public removeArtifact = (artifact:ArtifactModel, artifactsArr:Array<ArtifactModel>):void => {
-
-        if (!artifact.mandatory && (ArtifactGroupType.INFORMATION == artifact.artifactGroupType ||
-            ArtifactGroupType.DEPLOYMENT == artifact.artifactGroupType)) {
-            _.remove(artifactsArr, {uniqueId: artifact.uniqueId});
-        }
-        else {
-            let artifactToDelete = _.find(artifactsArr, {uniqueId: artifact.uniqueId});
-
-            delete artifactToDelete.esId;
-            delete artifactToDelete.description;
-            delete artifactToDelete.artifactName;
-            delete artifactToDelete.apiUrl;
-        }
-    };
-
-    public addAnotherAfterSave(scope:IArtifactResourceFormViewModelScope) {
-        let newArtifact = new ArtifactModel();
-        this.setArtifactType(newArtifact, scope.artifactType);
-        scope.editArtifactResourceModel.artifactResource = newArtifact;
-
-        scope.forms.editForm['description'].$setPristine();
-        if (scope.forms.editForm['artifactLabel']) {
-            scope.forms.editForm['artifactLabel'].$setPristine();
-        }
-        if (scope.forms.editForm['type']) {
-            scope.forms.editForm['type'].$setPristine();
-        }
-
-    }
-}
diff --git a/catalog-ui/src/app/utils/change-lifecycle-state-handler.ts b/catalog-ui/src/app/utils/change-lifecycle-state-handler.ts
index 54497ba187..6a37864fe1 100644
--- a/catalog-ui/src/app/utils/change-lifecycle-state-handler.ts
+++ b/catalog-ui/src/app/utils/change-lifecycle-state-handler.ts
@@ -17,18 +17,16 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-
-import {ComponentFactory} from "./component-factory";
-import {Component, Service,IAppMenu, IAppConfigurtaion} from "../models";
-import {IEmailModalModel, IEmailModalModel_Email, IEmailModalModel_Data} from "../view-models/modals/email-modal/email-modal-view-model";
-import {AsdcComment} from "../models/comments";
-import {ModalsHandler} from "./modals-handler";
-import {ServiceServiceNg2} from "../ng2/services/component-services/service.service";
-import {EventBusService} from "../ng2/services/event-bus.service";
-
-/**
- * Created by obarda on 2/11/2016.
- */
+import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
+import { EventBusService } from 'app/ng2/services/event-bus.service';
+import { EVENTS, ValidationUtils } from 'app/utils';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { Component, IAppConfigurtaion, IAppMenu, Service } from '../models';
+import { AsdcComment } from '../models/comments';
+import { CommentModalComponent } from '../ng2/components/modals/comment-modal/comment-modal.component';
+import { EventListenerService } from '../services/event-listener-service';
+import { ComponentFactory } from './component-factory';
+import { ModalsHandler } from './modals-handler';
 
 export class ChangeLifecycleStateHandler {
 
@@ -39,167 +37,130 @@ export class ChangeLifecycleStateHandler {
         '$filter',
         'ModalsHandler',
         'ServiceServiceNg2',
-        'EventBusService'
+        'EventBusService',
+        'ModalServiceSdcUI',
+        'ValidationUtils',
+        'EventListenerService'
     ];
 
-    constructor(private sdcConfig:IAppConfigurtaion,
-                private sdcMenu:IAppMenu,
-                private ComponentFactory:ComponentFactory,
-                private $filter:ng.IFilterService,
-                private ModalsHandler:ModalsHandler,
-                private ServiceServiceNg2:ServiceServiceNg2,
-                private eventBusService:EventBusService) {
-
+    constructor(private sdcConfig: IAppConfigurtaion,
+                private sdcMenu: IAppMenu,
+                private componentFactory: ComponentFactory,
+                private $filter: ng.IFilterService,
+                private modalsHandler: ModalsHandler,
+                private serviceServiceNg2: ServiceServiceNg2,
+                private eventBusService: EventBusService,
+                private modalService: SdcUiServices.ModalService,
+                private validationUtils: ValidationUtils,
+                private eventListenerService: EventListenerService) {
     }
 
-    private actualChangeLifecycleState = (component:Component, data:any, scope:any, onSuccessCallback?:Function, onErrorCallback?:Function):void => {
+    public changeLifecycleState = (component: Component, data: any, scope: any, onSuccessCallback?: Function, onErrorCallback?: Function) => {
+        if (data.conformanceLevelModal) {
+            this.validateConformanceLevel(component, data, scope, onSuccessCallback, onErrorCallback);
+        } else {
+            this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
+        }
+    }
 
-        let self = this;
+    private actualChangeLifecycleState = (component: Component, data: any, scope: any, onSuccessCallback?: Function, onErrorCallback?: Function) => {
+        const self = this;
 
-        let getContacts = (component:Component):string => {
-            let testers = this.sdcConfig.testers;
-            let result:string = testers[component.componentType][component.categories[0].name] ?
-                testers[component.componentType][component.categories[0].name] :
-                testers[component.componentType]['default'];
-            return result;
-        };
-
-        let onSuccess = (newComponent:Component):void => {
-            //scope.isLoading = false;
-            console.info(component.componentType.toLowerCase + ' change state ', newComponent);
+        const onSuccess = (newComponent: Component) => {
             if (onSuccessCallback) {
-                onSuccessCallback(self.ComponentFactory.createComponent(newComponent), data.url);
+                onSuccessCallback(self.componentFactory.createComponent(newComponent), data.url);
+                if (data.url === 'distribution/PROD/activate') {
+                    this.eventListenerService.notifyObservers(EVENTS.ON_DISTRIBUTION_SUCCESS);
+                }
             }
         };
 
-        let onError = (error):void => {
+        const onError = (error) => {
             scope.isLoading = false;
-            console.info('Failed to changeLifecycleState to ', data.url);
             if (onErrorCallback) {
                 onErrorCallback(error);
             }
         };
 
-        let comment:AsdcComment = new AsdcComment();
+        const comment: AsdcComment = new AsdcComment();
         if (data.alertModal) {
             // Show alert dialog if defined in menu.json
-            //-------------------------------------------------
-            let onOk = (confirmationText):void => {
+            const onOk: Function = (confirmationText) => {
                 comment.userRemarks = confirmationText;
                 scope.isLoading = true;
                 component.changeLifecycleState(data.url, comment).then(onSuccess, onError);
             };
 
-            let onCancel = ():void => {
-                console.info('Cancel pressed');
-                scope.isLoading = false;
-            };
-
-            let modalTitle = this.sdcMenu.alertMessages[data.alertModal].title;
-            let modalMessage = this.sdcMenu.alertMessages[data.alertModal].message.format([component.componentType.toLowerCase()]);
-            this.ModalsHandler.openAlertModal(modalTitle, modalMessage).then(onOk, onCancel);
+            const modalTitle = this.sdcMenu.alertMessages[data.alertModal].title;
+            const modalMessage = this.sdcMenu.alertMessages[data.alertModal].message.format([component.componentType.toLowerCase()]);
+            const modalButton = {
+                testId: 'OK',
+                text: this.sdcMenu.alertMessages.okButton,
+                type: SdcUiCommon.ButtonType.warning,
+                callback: onOk,
+                closeModal: true
+            } as SdcUiComponents.ModalButtonComponent;
+            this.modalService.openWarningModal(modalTitle, modalMessage, 'alert-modal', [modalButton]);
         } else if (data.confirmationModal) {
             // Show confirmation dialog if defined in menu.json
-            //-------------------------------------------------
-            let onOk = (confirmationText):void => {
-                comment.userRemarks = confirmationText;
-
-                if (data.url === "lifecycleState/CHECKIN") {
-                    this.eventBusService.notify("CHECK_IN").subscribe(() => {
+            let commentModalInstance: SdcUiComponents.ModalComponent;
+            const onOk = () => {
+                const confirmationText: string = commentModalInstance.innerModalContent.instance.comment.text;
+                commentModalInstance.closeModal();
+                comment.userRemarks = this.validationUtils.stripAndSanitize(confirmationText);
+
+                if (data.url === 'lifecycleState/CHECKIN') {
+                    this.eventBusService.notify('CHECK_IN').subscribe(() => {
                         scope.isLoading = true;
                         component.changeLifecycleState(data.url, comment).then(onSuccess, onError);
                     });
-                }
-                else {
+                } else {
                     scope.isLoading = true;
                     component.changeLifecycleState(data.url, comment).then(onSuccess, onError);
                 }
             };
 
-            let onCancel = ():void => {
-                console.info('Cancel pressed');
-                scope.isLoading = false;
-            };
-
-            let modalTitle = this.sdcMenu.confirmationMessages[data.confirmationModal].title;
-            let modalMessage = this.sdcMenu.confirmationMessages[data.confirmationModal].message.format([component.componentType.toLowerCase()]);
-            let modalShowComment = this.sdcMenu.confirmationMessages[data.confirmationModal].showComment;
-            this.ModalsHandler.openConfirmationModal(modalTitle, modalMessage, modalShowComment).then(onOk, onCancel);
-
-        } else if (data.emailModal) {
-            // Show email dialog if defined in menu.json
-            //-------------------------------------------------
-            let onOk = (resource):void => {
-                if (data.url === "lifecycleState/certificationRequest") {
-                    this.eventBusService.notify("SUBMIT_FOR_TESTING").subscribe(() => {
-                        if (resource) {
-                            onSuccess(resource);
-                        } else {
-                            onError("Error changing life cycle state");
-                        }
-                    });
-                }
-                else {
-                    if (resource) {
-                        onSuccess(resource);
-                    } else {
-                        onError("Error changing life cycle state");
-                    }
-                }
-            };
-
-            let onCancel = ():void => {
-                scope.isLoading = false;
-            };
-
-            let emailModel:IEmailModalModel = <IEmailModalModel>{};
-            emailModel.email = <IEmailModalModel_Email>{};
-            emailModel.data = <IEmailModalModel_Data>{};
-            emailModel.title = this.$filter('translate')("EMAIL_MODAL_TITLE");
-            emailModel.email.to = getContacts(component);
-            emailModel.email.subject = this.$filter('translate')("EMAIL_MODAL_SUBJECT", "{'entityName': '" + this.$filter('resourceName')(component.name) + "','entityVersion': '" + component.version + "'}");
-            emailModel.email.message = '';
-            emailModel.data.component = component;
-            emailModel.data.stateUrl = data.url;
-
-            this.ModalsHandler.openEmailModal(emailModel).then(onOk, onCancel);
-
+            const modalTitle = this.sdcMenu.confirmationMessages[data.confirmationModal].title;
+            const modalMessage = this.sdcMenu.confirmationMessages[data.confirmationModal].message.format([component.componentType.toLowerCase()]);
+            const modalConfig = {
+                size: 'md',
+                title: modalTitle,
+                type: SdcUiCommon.ModalType.custom,
+                testId: 'confirm-modal',
+                buttons: [
+                    { id: 'OK', text: 'OK', callback: onOk, closeModal: false, testId: 'OK' },
+                    { id: 'cancel', text: 'Cancel', size: 'x-small', type: 'secondary', closeModal: true, testId: 'Cancel' }
+                ] as SdcUiCommon.IModalButtonComponent[]
+            } as SdcUiCommon.IModalConfig;
+            commentModalInstance = this.modalService.openCustomModal(modalConfig, CommentModalComponent, { message: modalMessage });
+            commentModalInstance.innerModalContent.instance.onValidationChange.subscribe((isValid) => {
+                commentModalInstance.getButtonById('OK').disabled = !isValid;
+            });
         } else {
             // Submit to server only (no modal is shown).
             scope.isLoading = true;
             component.changeLifecycleState(data.url, comment).then(onSuccess, onError);
         }
-
-    }
-
-    public changeLifecycleState = (component:Component, data:any, scope:any, onSuccessCallback?:Function, onErrorCallback?:Function):void => {
-
-        if (data.conformanceLevelModal) {
-            this.validateConformanceLevel(component, data, scope, onSuccessCallback, onErrorCallback);
-        } else {
-            this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
-        }
     }
 
-    private validateConformanceLevel = (component:Component, data:any, scope:any, onSuccessCallback?:Function, onErrorCallback?:Function):void => {
+    private validateConformanceLevel = (component: Component, data: any, scope: any, onSuccessCallback?: Function, onErrorCallback?: Function) => {
         // Validate conformance level if defined in menu.json
-        //-------------------------------------------------
-        this.ServiceServiceNg2.validateConformanceLevel(<Service>component).subscribe((res:boolean) => {
+        this.serviceServiceNg2.validateConformanceLevel(component as Service).subscribe((res: boolean) => {
             if (res === true) {
-                //conformance level is ok - continue
+                // Conformance level is ok - continue
                 this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
-
             } else {
-                //show warning modal
-                this.ModalsHandler.openConformanceLevelModal()
-                    .then(() => {
-                        //continue distribute
-                        this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
-
-                    }).catch(() => {
-                        //reject distribution
-                        this.actualChangeLifecycleState(component, data.conformanceLevelModal, scope, onSuccessCallback, onErrorCallback);
-                });
+                // Show warning modal
+                const onContinue: Function = () => {
+                    this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
+                };
+                const reject: Function = () => {
+                    this.actualChangeLifecycleState(component, data.conformanceLevelModal, scope, onSuccessCallback, onErrorCallback);
+                };
+                const continueButton = {testId: 'Continue', text: 'Continue', type: SdcUiCommon.ButtonType.primary, callback: onContinue, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+                const rejectButton = {testId: 'Reject', text: 'Reject', type: SdcUiCommon.ButtonType.secondary, callback: reject, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+                this.modalService.openInfoModal(this.$filter('translate')('CONFORMANCE_LEVEL_MODAL_TITLE'),
+                    this.$filter('translate')('CONFORMANCE_LEVEL_MODAL_TEXT'), 'conformance-modal', [continueButton, rejectButton]);
             }
         });
     }
diff --git a/catalog-ui/src/app/utils/common-utils.ts b/catalog-ui/src/app/utils/common-utils.ts
index 99f7c49a29..eadb92bd4f 100644
--- a/catalog-ui/src/app/utils/common-utils.ts
+++ b/catalog-ui/src/app/utils/common-utils.ts
@@ -19,11 +19,12 @@
  */
 
 import * as _ from "lodash";
-import {Module, AttributeModel, ResourceInstance, PropertyModel, InterfaceModel, OperationModel} from "../models";
+import {Module, AttributeModel, ResourceInstance, PropertyModel, InputFEModel, OperationModel} from "../models";
 import {ComponentInstanceFactory} from "./component-instance-factory";
 import {InputBEModel, PropertyBEModel, RelationshipModel} from "app/models";
 import { PolicyInstance } from "app/models/graph/zones/policy-instance";
 import { GroupInstance } from "../models/graph/zones/group-instance";
+import { InterfaceModel } from "../models/operation";
 
 export class CommonUtils {
 
@@ -167,7 +168,7 @@ export class CommonUtils {
 
         });
     }
-
+    
     static initInterfaceOperations(interfaces: Array<InterfaceModel>): Array<OperationModel> {
 
         return _.reduce(interfaces, (acc, interf: InterfaceModel) => {
@@ -194,5 +195,6 @@ export class CommonUtils {
 
         }, []);
     }
+
 }
 
diff --git a/catalog-ui/src/app/utils/component-factory.ts b/catalog-ui/src/app/utils/component-factory.ts
index 2b134bd2e7..889f6fb43b 100644
--- a/catalog-ui/src/app/utils/component-factory.ts
+++ b/catalog-ui/src/app/utils/component-factory.ts
@@ -21,7 +21,8 @@
 'use strict';
 import * as _ from "lodash";
 import {DEFAULT_ICON, ResourceType, ComponentType} from "./constants";
-import {ServiceService, CacheService, ResourceService} from "app/services";
+import {ServiceService, ResourceService} from "app/services";
+import {CacheService} from "app/services-ng2";
 import {IMainCategory, ISubCategory, ICsarComponent, Component, Resource, Service} from "app/models";
 import {ComponentMetadata} from "../models/component-metadata";
 import {ComponentServiceNg2} from "../ng2/services/component-services/component.service";
@@ -71,23 +72,23 @@ export class ComponentFactory {
         return newResource;
     };
 
-    public updateComponentFromCsar = (csarComponent:Resource, oldComponent:Resource):Component => {
-        _.pull(oldComponent.tags, oldComponent.name);
-        if (!oldComponent.isAlreadyCertified()) {
+    public updateComponentFromCsar = (csarComponent:Resource, oldComponent: Resource): Component => {
+          _.pull(oldComponent.tags, oldComponent.name);
+          if (!oldComponent.isAlreadyCertified()) {
             oldComponent.name = csarComponent.name;
             oldComponent.categories = csarComponent.categories;
             oldComponent.selectedCategory = csarComponent.selectedCategory;
         }
-        oldComponent.vendorName = csarComponent.vendorName;
-        oldComponent.vendorRelease = csarComponent.vendorRelease;
-        oldComponent.csarUUID = csarComponent.csarUUID;
-        oldComponent.csarPackageType = csarComponent.csarPackageType;
-        oldComponent.csarVersion = csarComponent.csarVersion;
-        oldComponent.packageId = csarComponent.packageId;
-        oldComponent.description = csarComponent.description;
-        oldComponent.filterTerm = oldComponent.name +  ' '  + oldComponent.description + ' ' + oldComponent.vendorName + ' ' + oldComponent.csarVersion
-        return oldComponent;
-    };
+          oldComponent.vendorName = csarComponent.vendorName;
+          oldComponent.vendorRelease = csarComponent.vendorRelease;
+          oldComponent.csarUUID = csarComponent.csarUUID;
+          oldComponent.csarPackageType = csarComponent.csarPackageType;
+          oldComponent.csarVersion = csarComponent.csarVersion;
+          oldComponent.packageId = csarComponent.packageId;
+          oldComponent.description = csarComponent.description;
+          oldComponent.filterTerm = oldComponent.name +  ' '  + oldComponent.description + ' ' + oldComponent.vendorName + ' ' + oldComponent.csarVersion;
+          return oldComponent;
+    }
 
     public createFromCsarComponent = (csar:ICsarComponent):Component => {
         let newResource:Resource = <Resource>this.createEmptyComponent(ComponentType.RESOURCE);
@@ -126,7 +127,7 @@ export class ComponentFactory {
         }
 
         // Fill the component with details from CSAR
-        newResource.selectedCategory = selectedCategory && selectedSubCategory ? selectedCategory.name + "_#_" + selectedSubCategory.name : '';
+
         newResource.categories = categories;
         newResource.vendorName = csar.vendorName;
         newResource.vendorRelease = csar.vendorRelease;
@@ -136,7 +137,8 @@ export class ComponentFactory {
         newResource.packageId = csar.packageId;
         newResource.description = csar.description;
         newResource.resourceType = csar.resourceType;
-        newResource.filterTerm = newResource.name +  ' '  + newResource.description + ' ' + newResource.vendorName + ' ' + newResource.csarVersion
+        newResource.selectedCategory = selectedCategory && selectedSubCategory ? selectedCategory.name + "_#_" + selectedSubCategory.name : '';
+        newResource.filterTerm = newResource.name +  ' '  + newResource.description + ' ' + newResource.vendorName + ' ' + newResource.csarVersion;
         return newResource;
     };
 
@@ -183,7 +185,7 @@ export class ComponentFactory {
         let deferred = this.$q.defer<Component>();
         let component = this.createEmptyComponent(componentType);
         component.setUniqueId(componentId);
-        this.ComponentServiceNg2.getComponentMetadata(component).subscribe((response:ComponentGenericResponse) => {
+        this.ComponentServiceNg2.getComponentMetadata(component.uniqueId, component.componentType).subscribe((response:ComponentGenericResponse) => {
             component.setComponentMetadata(response.metadata);
             deferred.resolve(component);
         });
diff --git a/catalog-ui/src/app/utils/component-instance-factory.ts b/catalog-ui/src/app/utils/component-instance-factory.ts
index 25916cc055..03abd96a77 100644
--- a/catalog-ui/src/app/utils/component-instance-factory.ts
+++ b/catalog-ui/src/app/utils/component-instance-factory.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -21,14 +21,14 @@
  * Created by obarda on 3/7/2016.
  */
 'use strict';
-import {ComponentInstance, ServiceInstance, ResourceInstance, Component, ServiceProxyInstance} from "../models";
-import {ComponentType} from "app/utils";
-import {LeftPaletteComponent} from "../models/components/displayComponent";
+import { ComponentType } from 'app/utils';
+import { Component, ComponentInstance, ResourceInstance, ServiceInstance, ServiceProxyInstance } from '../models';
+import { LeftPaletteComponent } from '../models/components/displayComponent';
 
 export class ComponentInstanceFactory {
 
-    static createComponentInstance(componentInstance:ComponentInstance):ComponentInstance {
-        let newComponentInstance:ComponentInstance;
+    static createComponentInstance(componentInstance: ComponentInstance): ComponentInstance {
+        let newComponentInstance: ComponentInstance;
         switch (componentInstance.originType) {
             case ComponentType.SERVICE:
                 newComponentInstance = new ServiceInstance(componentInstance);
@@ -41,10 +41,10 @@ export class ComponentInstanceFactory {
                 break;
         }
         return newComponentInstance;
-    };
+    }
 
-    public createEmptyComponentInstance = (componentInstanceType?:string):ComponentInstance => {
-        let newComponentInstance:ComponentInstance;
+    static createEmptyComponentInstance = (componentInstanceType?: string): ComponentInstance => {
+        let newComponentInstance: ComponentInstance;
         switch (componentInstanceType) {
             case ComponentType.SERVICE:
                 newComponentInstance = new ServiceInstance();
@@ -57,25 +57,32 @@ export class ComponentInstanceFactory {
                 break;
         }
         return newComponentInstance;
-    };
+    }
 
-    public createComponentInstanceFromComponent = (component:LeftPaletteComponent):ComponentInstance => {
-        let newComponentInstance:ComponentInstance = this.createEmptyComponentInstance(component.componentType);
+    static createComponentInstanceFromComponent = (component: LeftPaletteComponent): ComponentInstance => {
+        const newComponentInstance: ComponentInstance = ComponentInstanceFactory.createEmptyComponentInstance(component.componentType);
         newComponentInstance.uniqueId = component.uniqueId + (new Date()).getTime();
         newComponentInstance.posX = 0;
         newComponentInstance.posY = 0;
         newComponentInstance.name = component.name;
         newComponentInstance.componentVersion = component.version;
-        newComponentInstance.originType = component.getComponentSubType();
-        if(component.getComponentSubType() === ComponentType.SERVICE){
-            newComponentInstance.originType = ComponentType.SERVICE_PROXY
-        }
-        //new component instance -> req. & cap. are added on successful instance creation
+        newComponentInstance.originType = getOriginType(component);
         newComponentInstance.requirements = component.requirements;
         newComponentInstance.capabilities = component.capabilities;
         newComponentInstance.icon = component.icon;
         newComponentInstance.componentUid = component.uniqueId;
         return newComponentInstance;
-    };
 
+        function getOriginType(component: LeftPaletteComponent): string  {
+            if (component.componentSubType) {
+                return component.componentSubType;
+            } else {
+                if (component.componentType === ComponentType.SERVICE) {
+                    return ComponentType.SERVICE_PROXY;
+                } else {
+                    return component.resourceType;
+                }
+            }
+        }
+    }
 }
diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts
index 9d3bf104ee..e82322e0de 100644
--- a/catalog-ui/src/app/utils/constants.ts
+++ b/catalog-ui/src/app/utils/constants.ts
@@ -43,8 +43,20 @@ export class ComponentType {
 export class ServerTypeUrl {
     static RESOURCES = 'resources/';
     static SERVICES = 'services/';
+
+    public static toServerTypeUrl(componentType: ComponentType) : string {
+        if (componentType == ComponentType.SERVICE) {
+            return ServerTypeUrl.SERVICES.slice(0,-1);
+        } else if (componentType == ComponentType.RESOURCE) {
+            return ServerTypeUrl.RESOURCES.slice(0,-1);
+        } else {
+            return undefined;
+        }
+    }
 }
 
+
+
 export class ResourceType {
     static VF = 'VF';
     static VL = 'VL';
@@ -57,6 +69,11 @@ export class ResourceType {
     static CR = 'CR';
 }
 
+export class SdcElementType {
+    static GROUP = 'GROUP';
+    static POLICY = 'POLICY';
+    static SERVICE_PROXY = 'ServiceProxy'
+}
 export class ComponentState {
     static CERTIFICATION_IN_PROGRESS = 'CERTIFICATION_IN_PROGRESS';
     static CERTIFIED = 'CERTIFIED';
@@ -76,9 +93,15 @@ export class ArtifactGroupType {
     static DEPLOYMENT = "DEPLOYMENT";
     static INFORMATION = "INFORMATIONAL";
     static SERVICE_API = "SERVICE_API";
+    static TOSCA = "TOSCA";
 }
 
 export class ArtifactType {
+
+    static DEPLOYMENT = "DEPLOYMENT";
+    static INFORMATION = "INFORMATIONAL";
+    static SERVICE_API = "SERVICE_API";
+    static HEAT_ENV = "HEAT_ENV";
     static HEAT = "HEAT";
     static HEAT_VOL = "HEAT_VOL";
     static HEAT_NET = "HEAT_NET";
@@ -202,6 +225,7 @@ export class ServerErrors {
     static ERROR_TITLE = 'Error';
     static DEFAULT_ERROR = 'Error getting response from server';
     static MESSAGE_ERROR = 'Wrong error format from server';
+    static DOWNLOAD_ERROR = 'Download error';
 }
 
 export class GraphColors {
@@ -255,6 +279,8 @@ export class States {
     public static WORKSPACE_ACTIVITY_LOG = 'workspace.activity_log';
     public static WORKSPACE_DEPLOYMENT_ARTIFACTS = 'workspace.deployment_artifacts';
     public static WORKSPACE_PROPERTIES = 'workspace.properties';
+    public static WORKSPACE_SERVICE_INPUTS = 'workspace.service_inputs';
+    public static WORKSPACE_RESOURCE_INPUTS = 'workspace.resource_inputs';
     public static WORKSPACE_ATTRIBUTES = 'workspace.attributes';
     public static WORKSPACE_INFORMATION_ARTIFACTS = 'workspace.information_artifacts';
     public static WORKSPACE_TOSCA_ARTIFACTS = 'workspace.tosca_artifacts';
@@ -287,6 +313,7 @@ export class EVENTS {
     static SHOW_LOADER_EVENT = "showLoaderEvent";
     static HIDE_LOADER_EVENT = "hideLoaderEvent";
     static UPDATE_PANEL = 'updatePanel';
+    static ON_DISTRIBUTION_SUCCESS = 'onDistributionSuccess';
 }
 
 
@@ -312,6 +339,7 @@ export class GRAPH_EVENTS {
     static ON_PALETTE_COMPONENT_HOVER_OUT = 'onPaletteComponentHoverOut';
     static ON_PALETTE_COMPONENT_DRAG_START = 'onPaletteComponentDragStart';
     static ON_PALETTE_COMPONENT_DRAG_ACTION = 'onPaletteComponentDragAction';
+    static ON_PALETTE_COMPONENT_DROP = 'onPaletteComponentDrop';
     static ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL = 'onPaletteComponentShowPopupPanel';
     static ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL = 'onPaletteComponentHidePopupPanel';
     static ON_COMPONENT_INSTANCE_NAME_CHANGED = 'onComponentInstanceNameChanged';
@@ -329,6 +357,7 @@ export class GRAPH_EVENTS {
     static ON_CANVAS_TAG_END = 'onCanvasTagEnd';
     static ON_POLICY_INSTANCE_UPDATE = 'onPolicyInstanceUpdate';
     static ON_GROUP_INSTANCE_UPDATE = 'onGroupInstanceUpdate';
+    static ON_SERVICE_PATH_CREATED = 'onServicePathCreated';
 }
 
 export class DEPENDENCY_EVENTS {
@@ -349,6 +378,7 @@ export class COMPONENT_FIELDS {
     static COMPONENT_INFORMATIONAL_ARTIFACTS = "artifacts";
     static COMPONENT_PROPERTIES = "properties";
     static COMPONENT_CAPABILITIES = "capabilities";
+    static COMPONENT_CAPABILITIES_PROPERTIES = "instanceCapabiltyProperties";
     static COMPONENT_REQUIREMENTS = "requirements";
     static COMPONENT_TOSCA_ARTIFACTS = "toscaArtifacts";
     static COMPONENT_POLICIES = "policies";
@@ -357,6 +387,8 @@ export class COMPONENT_FIELDS {
     static COMPONENT_INSTANCES_INTERFACES = "componentInstancesInterfaces";
     static COMPONENT_NON_EXCLUDED_GROUPS = "nonExcludedGroups";
     static COMPONENT_NON_EXCLUDED_POLICIES = "nonExcludedPolicies";
+    static FORWARDING_PATHS = "forwardingPaths";
+    static SERVICE_API_ARTIFACT = "serviceApiArtifacts";
 }
 
 export class SERVICE_FIELDS {
diff --git a/catalog-ui/src/app/utils/menu-handler.ts b/catalog-ui/src/app/utils/menu-handler.ts
index eaef63fcc7..e17012a45e 100644
--- a/catalog-ui/src/app/utils/menu-handler.ts
+++ b/catalog-ui/src/app/utils/menu-handler.ts
@@ -40,7 +40,6 @@ export class MenuItem {
     alertModal:string;
     conformanceLevelModal: boolean; // Call validateConformanceLevel API and shows conformanceLevelModal if necessary, then continue with action or invokes another action
     confirmationModal:string;       // Open confirmation modal (user should select "OK" or "Cancel"), and continue with the action.
-    emailModal:string;              // Open email modal (user should fill email details), and continue with the action.
     url:string;                     // Data added to menu item, in case the function need to use it, example: for function "changeLifecycleState", I need to pass also the state "CHECKOUT" that I want the state to change to.
 
 
diff --git a/catalog-ui/src/app/utils/modals-handler.ts b/catalog-ui/src/app/utils/modals-handler.ts
index 903175f199..342f03f290 100644
--- a/catalog-ui/src/app/utils/modals-handler.ts
+++ b/catalog-ui/src/app/utils/modals-handler.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,25 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-import {PropertyModel, Component, ArtifactModel, Distribution, InputModel, DisplayModule, InputPropertyBase} from "../models";
-import {IEmailModalModel} from "../view-models/modals/email-modal/email-modal-view-model";
-import {IClientMessageModalModel} from "../view-models/modals/message-modal/message-client-modal/client-message-modal-view-model";
-import {IServerMessageModalModel} from "../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model";
-import {IConfirmationModalModel} from "../view-models/modals/confirmation-modal/confirmation-modal-view-model";
-import {ModalType} from "./constants";
-import {AttributeModel} from "../models/attributes";
+import {  Component, DisplayModule , PropertyModel } from '../models';
+import { ComponentMetadata } from '../models/component-metadata';
 
 export interface IModalsHandler {
 
-
-    openDistributionStatusModal (distribution:Distribution, status:string, component:Component):ng.IPromise<any>;
-    openConfirmationModal (title:string, message:string, showComment:boolean, size?:string):ng.IPromise<any>;
-    openAlertModal (title:string, message:string, size?:string):ng.IPromise<any>;
-    openEmailModal(emailModel:IEmailModalModel):ng.IPromise<any>;
-    openServerMessageModal(data:IServerMessageModalModel):ng.IPromise<any>;
-    openClientMessageModal(data:IClientMessageModalModel):ng.IPromise<ng.ui.bootstrap.IModalServiceInstance>;
-    openArtifactModal(artifact:ArtifactModel, component:Component):ng.IPromise<any>;
-    openEditPropertyModal(property:PropertyModel, component:Component, filteredProperties:Array<PropertyModel>, isPropertyOwnValue:boolean, propertyOwnerType:string, propertyOwnerId:string):ng.IPromise<any>;
+    openEditPropertyModal(property: PropertyModel, component: Component, filteredProperties: PropertyModel[], isPropertyOwnValue: boolean,
+                          propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any>;
 }
 
 export class ModalsHandler implements IModalsHandler {
@@ -46,230 +34,27 @@ export class ModalsHandler implements IModalsHandler {
         '$q'
     ];
 
-    constructor(private $uibModal:ng.ui.bootstrap.IModalService,
-                private $q:ng.IQService) {
+    constructor(private $uibModal: ng.ui.bootstrap.IModalService,
+                private $q: ng.IQService) {
     }
 
-
-
-
-    openDistributionStatusModal = (distribution:Distribution, status:string, component:Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html',
-            controller: 'Sdc.ViewModels.DistributionStatusModalViewModel',
-            size: 'sdc-xl',
-            backdrop: 'static',
-            resolve: {
-                data: ():any => {
-                    return {
-                        'distribution': distribution,
-                        'status': status,
-                        'component': component
-                    };
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-
-    openAlertModal = (title:string, message:string, size?:string):ng.IPromise<any> => {
-        return this.openConfirmationModalBase(title, message, false, ModalType.ALERT, size);
-    };
-
-    openConfirmationModal = (title:string, message:string, showComment:boolean, size?:string):ng.IPromise<any> => {
-        return this.openConfirmationModalBase(title, message, showComment, ModalType.STANDARD, size);
-    };
-
-    private openConfirmationModalBase = (title:string, message:string, showComment:boolean, type:ModalType, size?:string):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/confirmation-modal/confirmation-modal-view.html',
-            controller: 'Sdc.ViewModels.ConfirmationModalViewModel',
-            size: size ? size : 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                confirmationModalModel: ():IConfirmationModalModel => {
-                    let model:IConfirmationModalModel = {
-                        title: title,
-                        message: message,
-                        showComment: showComment,
-                        type: type
-                    };
-                    return model;
-                }
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openEmailModal = (emailModel:IEmailModalModel):ng.IPromise<any> => {
-
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/email-modal/email-modal-view.html',
-            controller: 'Sdc.ViewModels.EmailModalViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                emailModalModel: ():IEmailModalModel => {
-                    return emailModel;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-
-    };
-
-    openServerMessageModal = (data:IServerMessageModalModel):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/message-modal/message-server-modal/server-message-modal-view.html',
-            controller: 'Sdc.ViewModels.ServerMessageModalViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                serverMessageModalModel: ():IServerMessageModalModel => {
-                    return data;
-                }
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openClientMessageModal = (data:IClientMessageModalModel):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/message-modal/message-client-modal/client-message-modal-view.html',
-            controller: 'Sdc.ViewModels.ClientMessageModalViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                clientMessageModalModel: ():IClientMessageModalModel => {
-                    return data;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance);
-        return deferred.promise;
-    };
-
-    openOnboadrdingModal = (okButtonText:string, currentCsarUUID?:string, currentCsarVersion?:string):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/onboarding-modal/onboarding-modal-view.html',
-            controller: 'Sdc.ViewModels.OnboardingModalViewModel',
-            size: 'sdc-xl',
-            backdrop: 'static',
-            resolve: {
-                okButtonText: ():string=> {
-                    return okButtonText;
-                },
-                currentCsarUUID: ():string=> {
-                    return currentCsarUUID || null;
-                },
-                currentCsarVersion: ():string=> {
-                    return currentCsarVersion || null;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openUpdateIconModal = (component: Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
+    openUpdateIconModal = (component: Component): ng.IPromise<any> => {
+        const deferred = this.$q.defer();
+        const modalOptions: ng.ui.bootstrap.IModalSettings = {
             templateUrl: '../view-models/modals/icons-modal/icons-modal-view.html',
             controller: 'Sdc.ViewModels.IconsModalViewModel',
             size: 'sdc-auto',
             backdrop: 'static',
             resolve: {
-                component: ():Component => {
-                    return component;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openEditEnvParametersModal = (artifactResource:ArtifactModel, component?:Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/env-parameters-form/env-parameters-form.html',
-            controller: 'Sdc.ViewModels.EnvParametersFormViewModel',
-            size: 'sdc-xl',
-            backdrop: 'static',
-            resolve: {
-                artifact: ():ArtifactModel => {
-                    return artifactResource;
-                },
-                component: ():Component => {
+                component: (): Component => {
                     return component;
                 }
             }
         };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        const modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
         deferred.resolve(modalInstance.result);
         return deferred.promise;
-    };
-
-    openEditInputValueModal = (input:InputModel):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/input-form/input-form-view.html',
-            controller: 'Sdc.ViewModels.InputFormViewModel',
-            size: 'sdc-md',
-            backdrop: 'static',
-            resolve: {
-                input: ():InputModel => {
-                    return input;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openArtifactModal = (artifact:ArtifactModel, component:Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/artifact-form/artifact-form-view.html',
-            controller: 'Sdc.ViewModels.ArtifactResourceFormViewModel',
-            size: 'sdc-md',
-            backdrop: 'static',
-            keyboard: false,
-            resolve: {
-                artifact: ():ArtifactModel => {
-                    return artifact;
-                },
-                component: ():Component => {
-                    return component;
-                }
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
+    }
 
     /**
      *
@@ -281,158 +66,113 @@ export class ModalsHandler implements IModalsHandler {
      * @param isPropertyValueOwner - boolean telling if the component is eligible of editing the property
      * @returns {IPromise<T>} - Promise telling if the modal has opened or not
      */
-    openEditPropertyModal = (property:PropertyModel, component:Component, filteredProperties:Array<PropertyModel>, isPropertyValueOwner:boolean, propertyOwnerType:string, propertyOwnerId:string):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
+    openEditPropertyModal = (property: PropertyModel, component: Component | ComponentMetadata, filteredProperties: PropertyModel[],
+                             isPropertyValueOwner: boolean, propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any> => {
+        const deferred = this.$q.defer();
 
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
+        const modalOptions: ng.ui.bootstrap.IModalSettings = {
             templateUrl: '../view-models/forms/property-forms/component-property-form/property-form-view.html',
             controller: 'Sdc.ViewModels.PropertyFormViewModel',
             size: 'sdc-l',
             backdrop: 'static',
             keyboard: false,
             resolve: {
-                property: ():PropertyModel => {
+                property: (): PropertyModel => {
                     return property;
                 },
-                component: ():Component => {
-                    return <Component> component;
+                component: (): Component => {
+                    return component as Component;
                 },
-                filteredProperties: ():Array<PropertyModel> => {
+                filteredProperties: (): PropertyModel[] => {
                     return filteredProperties;
                 },
-                isPropertyValueOwner: ():boolean => {
+                isPropertyValueOwner: (): boolean => {
                     return isPropertyValueOwner;
                 },
-                propertyOwnerType: ():string => {
+                propertyOwnerType: (): string => {
                     return propertyOwnerType;
                 },
-                propertyOwnerId: ():string => {
+                propertyOwnerId: (): string => {
                     return propertyOwnerId;
                 }
             }
         };
 
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        const modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
         deferred.resolve(modalInstance.result);
         return deferred.promise;
-    };
-
+    }
 
-    openEditModulePropertyModal = (property:PropertyModel, component:Component, selectedModule:DisplayModule, filteredProperties:Array<PropertyModel>):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
+    /**
+     *
+     * This function openes up the edit property modal
+     *
+     * @param property - the property to edit
+     * @param filteredProperties - the filtered properties list to scroll between in the edit modal
+     * @param isPropertyValueOwner - boolean telling if the component is eligible of editing the property
+     * @returns {IPromise<T>} - Promise telling if the modal has opened or not
+     */
+    newOpenEditPropertyModal = (property: PropertyModel, filteredProperties: PropertyModel[], isPropertyValueOwner: boolean, propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any> => {
+        const deferred = this.$q.defer();
 
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/property-forms/base-property-form/property-form-base-view.html',
-            controller: 'Sdc.ViewModels.ModulePropertyView',
+        const modalOptions: ng.ui.bootstrap.IModalSettings = {
+            templateUrl: '../view-models/forms/property-forms/component-property-form/property-form-view.html',
+            controller: 'Sdc.ViewModels.PropertyFormViewModel',
             size: 'sdc-l',
             backdrop: 'static',
             keyboard: false,
             resolve: {
-                originalProperty: ():PropertyModel => {
+                property: (): PropertyModel => {
                     return property;
                 },
-                component: ():Component => {
-                    return <Component> component;
+                filteredProperties: (): PropertyModel[] => {
+                    return filteredProperties;
                 },
-                selectedModule: ():DisplayModule => {
-                    return selectedModule;
+                isPropertyValueOwner: (): boolean => {
+                    return isPropertyValueOwner;
                 },
-                filteredProperties: ():Array<PropertyModel> => {
-                    return filteredProperties;
+                propertyOwnerType: (): string => {
+                    return propertyOwnerType;
+                },
+                propertyOwnerId: (): string => {
+                    return propertyOwnerId;
                 }
             }
         };
 
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        const modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
         deferred.resolve(modalInstance.result);
         return deferred.promise;
-    };
+    }
 
-    openSelectDataTypeModal = (property:PropertyModel, component:Component, filteredProperties:Array<PropertyModel>, propertiesMap:Array<InputPropertyBase>):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
+    openEditModulePropertyModal = (property: PropertyModel, component: Component, selectedModule: DisplayModule, filteredProperties: PropertyModel[]): ng.IPromise<any> => {
+        const deferred = this.$q.defer();
 
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
+        const modalOptions: ng.ui.bootstrap.IModalSettings = {
             templateUrl: '../view-models/forms/property-forms/base-property-form/property-form-base-view.html',
-            controller: 'Sdc.ViewModels.SelectDataTypeViewModel',
+            controller: 'Sdc.ViewModels.ModulePropertyView',
             size: 'sdc-l',
             backdrop: 'static',
             keyboard: false,
             resolve: {
-                originalProperty: ():PropertyModel => {
+                originalProperty: (): PropertyModel => {
                     return property;
                 },
-                component: ():Component => {
-                    return <Component> component;
-                },
-                filteredProperties: ():Array<PropertyModel> => {
-                    return filteredProperties;
+                component: (): Component => {
+                    return component as Component;
                 },
-                propertiesMap: ():Array<InputPropertyBase>=> {
-                    return propertiesMap;
-                }
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    public openEditAttributeModal = (attribute:AttributeModel, component: Component):void => {
-
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/attribute-form/attribute-form-view.html',
-            controller: 'Sdc.ViewModels.AttributeFormViewModel',
-            size: 'sdc-md',
-            backdrop: 'static',
-            keyboard: false,
-            resolve: {
-                attribute: ():AttributeModel => {
-                    return attribute;
+                selectedModule: (): DisplayModule => {
+                    return selectedModule;
                 },
-                component: ():Component => {
-                    return component;
-                }
-            }
-        };
-        this.$uibModal.open(modalOptions);
-    };
-
-    public openUpdateComponentInstanceNameModal = (currentComponent: Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/resource-instance-name-form/resource-instance-name-view.html',
-            controller: 'Sdc.ViewModels.ResourceInstanceNameViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                component: ():Component => {
-                    return currentComponent;
+                filteredProperties: (): PropertyModel[] => {
+                    return filteredProperties;
                 }
             }
         };
 
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance =  this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    public openConformanceLevelModal = ():ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/conformance-level-modal/conformance-level-modal-view.html',
-            controller: 'Sdc.ViewModels.ConformanceLevelModalViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        const modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
         deferred.resolve(modalInstance.result);
         return deferred.promise;
-    };
+    }
 
 }
diff --git a/catalog-ui/src/app/utils/validation-utils.ts b/catalog-ui/src/app/utils/validation-utils.ts
index cd90ba7752..b7e43f79ba 100644
--- a/catalog-ui/src/app/utils/validation-utils.ts
+++ b/catalog-ui/src/app/utils/validation-utils.ts
@@ -97,25 +97,25 @@ export class ValidationUtils {
         }
     };
 
-    public getPropertyListPatterns():IMapRegex {
+    public static getPropertyListPatterns():IMapRegex {
         return {
-            integer: /^(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)(,?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+))*$/,
-            string: /^"[\u0000-\u0021\u0023-\u00BF]+"(\s*,?\s*"[\u0000-\u0021\u0023-\u00BF]+")*$/,
-            boolean: /^([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])(,?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee]))*$/,
-            float: /^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?(,?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?)*$/
+            integer: /^$|^(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)(,?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+))*$/,
+            string: /^$|^"[\u0000-\u0021\u0023-\u00BF]+"(\s*,?\s*"[\u0000-\u0021\u0023-\u00BF]+")*$/,
+            boolean: /^$|^([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])(,?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee]))*$/,
+            float: /^$|^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?(,?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?)*$/
         };
     }
 
-    public getPropertyMapPatterns():IMapRegex {
+    public static getPropertyMapPatterns():IMapRegex {
         return {
-            integer: /^"\w+"\s*:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+(\s*,?\s*"\w+"\s?:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+)*$/,
-            string: /^"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*"(\s*,?\s*"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*")*$/,
-            boolean: /^"\w+"\s?:\s?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])(\s*,?\s*"\w+"\s?:\s?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee]))*$/,
-            float: /^"\w+"\s?:\s?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?(\s*,?\s*"\w+"\s?:\s?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?)*$/
+            integer: /^$|^"\w+"\s*:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+(\s*,?\s*"\w+"\s?:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+)*$/,
+            string: /^$|^"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*"(\s*,?\s*"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*")*$/,
+            boolean: /^$|^"\w+"\s?:\s?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])(\s*,?\s*"\w+"\s?:\s?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee]))*$/,
+            float: /^$|^"\w+"\s?:\s?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?(\s*,?\s*"\w+"\s?:\s?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?)*$/
         };
     }
 
-    public validateUniqueKeys(viewValue:string):boolean {
+    public static validateUniqueKeys(viewValue: string): boolean {
         if (!viewValue) {
             return true; //allow empty value
         }
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view-model.ts b/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view-model.ts
index c9ffe470f0..40a9e8fde1 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view-model.ts
+++ b/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view-model.ts
@@ -19,7 +19,7 @@
  */
 
 'use strict';
-import {CacheService} from "app/services";
+import {CacheService} from "app/services-ng2";
 import {IAppConfigurtaion} from "app/models";
 
 interface IAdminDashboardViewModelScope extends ng.IScope {
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view-model.ts b/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view-model.ts
index c99f9e874d..bb4c44d8da 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view-model.ts
+++ b/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view-model.ts
@@ -20,7 +20,8 @@
 
 'use strict';
 import {ModalsHandler, ValidationUtils} from "app/utils";
-import {CacheService, ICategoryResource} from "app/services";
+import {ICategoryResource} from "app/services";
+import {CacheService} from "app/services-ng2";
 import {IAppConfigurtaion} from "app/models";
 import {ComponentType} from "../../../utils/constants";
 
@@ -138,58 +139,6 @@ export class CategoryManagementViewModel {
 
         };
 
-        scope.deleteCategory = (category:ICategoryResource, subCategory:ICategoryResource):void => {
-
-            let onOk = ():void => {
-
-                scope.isLoading = true;
-                let type:string = scope.type;
-
-                let onError = (response):void => {
-                    scope.isLoading = false;
-                    console.info('onFaild', response);
-                };
-
-                let onSuccess = (response:any):void => {
-                    let arr:Array<ICategoryResource>;
-
-                    if (!subCategory) {
-                        arr = this.$scope[type + 'Categories'];
-                        arr.splice(arr.indexOf(category), 1);
-                        if (category === scope.selectedCategory) {
-                            scope.selectedCategory = null;
-                            scope.selectedSubCategory = null;
-                        }
-                    } else {
-                        arr = category.subcategories;
-                        arr.splice(arr.indexOf(subCategory), 1);
-                    }
-
-                    scope.isLoading = false;
-                };
-
-                if (!subCategory) {
-                    category.$delete({
-                            types: type + "s",
-                            categoryId: category.uniqueId
-                        }
-                        , onSuccess, onError);
-                } else {
-                    category.$deleteSubCategory({
-                            types: type + "s",
-                            categoryId: category.uniqueId,
-                            subCategoryId: subCategory.uniqueId,
-                        }
-                        , onSuccess, onError);
-                }
-            };
-            let modelType:string = subCategory ? 'sub category' : 'category';
-            let title:string = this.$filter('translate')("DELETE_CATEGORY_MODAL_HEADER", "{'modelType': '" + modelType + "' }");
-            let message:string = this.$filter('translate')("DELETE_CATEGORY_MODAL_CATEGORY_NAME", "{'modelType': '" + modelType + "' }");
-
-            this.ModalsHandler.openConfirmationModal(title, message, false, 'sdc-xsm').then(onOk);
-        };
-
         this.$scope.serviceCategories = this.cacheService.get('serviceCategories');
         this.$scope.resourceCategories = this.cacheService.get('resourceCategories');
     }
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view.html b/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view.html
index d7ee87e2e7..30b71f28e2 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view.html
+++ b/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view.html
@@ -36,9 +36,6 @@
                         data-ng-click="selectCategory(category)"
                         data-tests-id="{{ type === SERVICE ? 'servicecategory' : 'resourcecategory' }}">
                         {{category.name}}
-
-                        <!--<button class="sprite e-sdc-small-icons-delete" data-ng-click="deleteCategory(category, null)" type="button"></button>-->
-                        <!--button class="sprite e-sdc-small-icons-pad" data-ng-click="" type="button"></button-->
                     </li>
                 </ul>
             </perfect-scrollbar>
@@ -56,9 +53,6 @@
                         data-ng-click="selectSubCategory(subcategory)"
                         data-tests-id="subcategory">
                         {{subcategory.name}}
-
-                        <!--<button class="sprite e-sdc-small-icons-delete" data-ng-click="deleteCategory(selectedCategory, subcategory)" type="button"></button>-->
-                        <!--button class="sprite e-sdc-small-icon-pad" data-ng-click="" type="button"></button-->
                     </li>
                 </ul>
             </perfect-scrollbar>
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts
index 45232b7a61..43ae75e048 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts
+++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts
@@ -20,55 +20,40 @@
 
 'use strict';
 import * as _ from "lodash";
-import {ModalsHandler} from "app/utils";
-import {User, IUserProperties, IUser, IAppConfigurtaion} from "app/models";
-import {UserService} from "../../../ng2/services/user.service";
+import { User, IUserProperties, IUser, IAppConfigurtaion } from "app/models";
+import { UserService } from "../../../ng2/services/user.service";
+import { SdcUiCommon, SdcUiServices, SdcUiComponents } from "onap-ui-angular";
+import { AuthenticationService } from "app/ng2/services/authentication.service";
 
 interface IUserManagementViewModelScope extends ng.IScope {
-    sdcConfig:IAppConfigurtaion;
     usersList:Array<IUserProperties>;
     isLoading:boolean;
-    isNewUser:boolean;
     sortBy:string;
     reverse:boolean;
     tableHeadersList:any;
-    roles:Array<string>;
-    newUser:IUser;
-    currentUser:IUserProperties;
-    userIdValidationPattern:RegExp;
-    editForm:ng.IFormController;
     getAllUsers():void;
-    editUserRole(user:IUserProperties);
     sort(sortBy:string):void;
-    createUser():void;
-    deleteUser(userId:string):void;
-    onEditUserPressed(user:IUserProperties):void;
-    saveUserChanges(user:IUserProperties):void;
     getTitle(role:string):string;
-    clearForm():void;
-
 }
 
 
 export class UserManagementViewModel {
     static '$inject' = [
         '$scope',
-        'sdcConfig',
         'UserServiceNg2',
-        'UserIdValidationPattern',
+        'AuthenticationServiceNg2',
         '$filter',
-        'ModalsHandler'
+        'ModalServiceSdcUI'
     ];
 
     constructor(private $scope:IUserManagementViewModelScope,
-                private sdcConfig:IAppConfigurtaion,
                 private userService:UserService,
-                private UserIdValidationPattern:RegExp,
+                private authService:AuthenticationService,
                 private $filter:ng.IFilterService,
-                private ModalsHandler:ModalsHandler) {
+                private modalService:SdcUiServices.ModalService) {
 
-        this.initScope();
 
+        setTimeout(this.initScope, 1000);
     }
 
 
@@ -89,13 +74,8 @@ export class UserManagementViewModel {
         this.userService.getAllUsers().subscribe(onSuccess, onError);
     };
 
-    private updateUserFilterTerm = (user:IUserProperties):void => {
-        user.filterTerm = user.firstName + ' ' + user.lastName + ' ' + user.userId + ' ' + user.email + ' ' + user.role + ' ' + this.$filter('date')(user.lastLoginTime, "MM/dd/yyyy");
-    };
-
     private initScope = ():void => {
         let self = this;
-
         this.$scope.tableHeadersList = [{title: "First Name", property: 'firstName'}, {
             title: "Last Name",
             property: 'lastName'
@@ -107,116 +87,18 @@ export class UserManagementViewModel {
                 title: "Last Active",
                 property: 'lastLoginTime'
             }];
-        this.$scope.userIdValidationPattern = this.UserIdValidationPattern;
         this.$scope.sortBy = 'lastLoginTime';
         this.$scope.reverse = false;
-        this.$scope.roles = this.sdcConfig.roles;
-        this.$scope.isNewUser = false;
-        this.$scope.currentUser = this.userService.getLoggedinUser();
         this.getAllUsers();
 
-        let userInfo:IUserProperties = <IUserProperties>{};
-        this.$scope.newUser = new User(userInfo);
-
         this.$scope.sort = (sortBy:string):void => {//default sort by descending last update. default for alphabetical = ascending
-            this.$scope.isNewUser = false;
             this.$scope.reverse = (this.$scope.sortBy === sortBy) ? ( !this.$scope.reverse) : this.$scope.reverse = false;
             this.$scope.sortBy = sortBy;
         };
 
-        this.$scope.createUser = ():void => {
-
-            let onError = (response) => {
-                this.$scope.isLoading = false;
-                console.info('onFaild', response);
-            };
-
-            let onSuccess = (response:IUserProperties) => {
-                this.$scope.newUser.userInfo.lastLoginTime = "0";
-                this.$scope.newUser.userInfo.status = response.status;
-                this.updateUserFilterTerm(this.$scope.newUser.userInfo);
-                this.$scope.usersList.push(this.$scope.newUser.userInfo);
-                this.$scope.isNewUser = true;
-                this.$scope.sortBy = null;
-                this.$scope.reverse = true;
-                this.$scope.isLoading = false;
-                this.$scope.newUser = new User(null);
-                this.$scope.editForm.$setPristine();
-                let _self = this;
-                setTimeout(function () {
-                    _self.$scope.isNewUser = false;
-                }, 7000);
-            };
-            this.userService.createUser({
-                userId: this.$scope.newUser.userInfo.userId,
-                role: this.$scope.newUser.userInfo.role
-            }).subscribe(onSuccess, onError);
-        };
-
-
-        this.$scope.onEditUserPressed = (user:IUserProperties):void => {
-            user.isInEditMode = true;
-            user.tempRole = user.role;
-        };
-
-        this.$scope.editUserRole = (user:IUserProperties):void => {
-            let roleBeforeUpdate:string = user.role;
-            user.role = user.tempRole;
-
-            let onError = (response) => {
-                this.$scope.isLoading = false;
-                user.role = roleBeforeUpdate;
-                console.info('onFaild', response);
-            };
-            let onSuccess = (response:any) => {
-                this.$scope.isLoading = false;
-                user.tempRole = user.role;
-                this.updateUserFilterTerm(user);
-            };
-
-            this.userService.editUserRole(user.userId, user.role).subscribe(onSuccess, onError);
-        };
-
-        this.$scope.saveUserChanges = (user:IUserProperties):void => {
-            if (user.tempRole != user.role) {
-                this.$scope.editUserRole(user)
-            }
-            user.isInEditMode = false;
-        };
-
-        this.$scope.deleteUser = (userId:string):void => {
-
-            let onOk = ():void => {
-                this.$scope.isLoading = true;
-
-                let onError = (response):void => {
-                    this.$scope.isLoading = false;
-                    console.info('onFaild', response);
-                };
-
-                let onSuccess = (response:any):void => {
-                    _.remove(this.$scope.usersList, {userId: userId});
-                    this.$scope.isLoading = false;
-                };
-                this.userService.deleteUser(userId).subscribe(onSuccess, onError);
-            };
-
-            let title:string = this.$filter('translate')("USER_MANAGEMENT_VIEW_DELETE_MODAL_TITLE");
-            let message:string = this.$filter('translate')("USER_MANAGEMENT_VIEW_DELETE_MODAL_TEXT");
-            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-        };
-
         this.$scope.getTitle = (role:string):string => {
             return role.toLowerCase().replace('governor', 'governance_Rep').replace('_', ' ');
         };
 
-        this.$scope.clearForm = ():void => {
-            if (!this.$scope.editForm['contactId'].$viewValue && !this.$scope.editForm['role'].$viewValue) {
-                this.$scope.editForm.$setPristine();
-            }
-            //if(this.$scope.editForm['contactId'].$viewValue === '' && this.$scope.editForm['role'].$viewValue){
-            //    this.$scope.editForm.$setPristine();
-            //}
-        };
     }
 }
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html
index 9322ab00aa..89fd280205 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html
+++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div ng-controller="Sdc.ViewModels.UserManagementViewModel">
     <loader data-display="isLoading"></loader>
     <div class="sdc-user-management-top-bar">
@@ -22,48 +21,6 @@
             <input type="text" class="sdc-user-management-top-bar-form-input" placeholder="Search user by name, userId, email or role" data-ng-model="search.filterTerm" ng-model-options="{ debounce: 500 }" data-tests-id="searchbox" />
             <span class="w-sdc-search-icon" data-ng-class="{'cancel':search.filterTerm, 'magnification':!search.filterTerm}" data-ng-click="search.filterTerm=''" ></span>
         </div>
-        <div  class="vertical-border-container">
-            <div class="vertical-border"></div>
-        </div>
-        <form class="sdc-user-management-top-bar-create-user-container w-sdc-form" name="editForm">
-            <label class="sdc-user-management-top-bar-title">Create New User</label>
-            <div class="sdc-user-management-top-bar-wrapper">
-                <div class="i-sdc-form-item sdc-user-management-top-bar-form-container" data-ng-class="{error:(editForm.contactId.$dirty && editForm.contactId.$invalid)}">
-                    <input ng-focus="search.filterTerm=''" type="text"
-                           data-ng-model="newUser.userInfo.userId"
-                           class="i-sdc-form-input"
-                           placeholder="{{ USER_MANAGEMENT_SEARCH_TEXT | translate}}"
-                           data-ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 750, 'blur': 0 } }"
-                           name="contactId"
-                           data-ng-pattern="userIdValidationPattern"
-                           data-ng-change="clearForm()"
-                           data-ng-blur="clearForm()"
-                           data-required
-                           data-tests-id="newuserId" />
-
-                    <div class="input-error" data-ng-show="editForm.contactId.$dirty && editForm.contactId.$invalid">
-                        <span ng-show="editForm.contactId.$error.required" translate="NEW_USER_ERROR_USER_ID_REQUIRED"></span>
-                        <span ng-show="editForm.contactId.$error.pattern" translate="NEW_USER_ERROR_USER_ID_NOT_VALID"></span>
-                    </div>
-                </div>
-                <div class="i-sdc-form-item sdc-user-management-top-bar-form-container"  data-ng-class="{error:(editForm.role.$dirty && editForm.role.$invalid
-                                                                                                            && editForm.contactId.$viewValue)}">
-                    <select class="i-sdc-form-select capitalize"
-                            data-required
-                            name="role"
-                            data-tests-id="selectrole"
-                            data-ng-model = "newUser.userInfo.role"
-                            data-ng-options="role as (getTitle(role)) for role in roles | orderBy:'role'"
-                            ng-focus="search.filterTerm=''">
-                        <option value="">Select Role</option>
-                    </select>
-                    <div class="input-error" data-ng-show="editForm.role.$dirty && editForm.role.$invalid && editForm.contactId.$viewValue">
-                        <span ng-show="editForm.role.$error.required" translate="NEW_USER_ERROR_ROLE_REQUIRED"></span>
-                    </div>
-                </div>
-                <button data-tests-id="creategreen" data-ng-disabled="editForm.$invalid" class="sdc-user-management-top-bar-create-btn" ng-click="search.filterTerm = '' ; createUser()">Create</button>
-            </div>
-        </form>
     </div>
 
 
@@ -74,15 +31,13 @@
                 <div class="sdc-user-management-table-header head-row hand sdc-user-management-flex-item" data-tests-id="th{{header.title}}" ng-repeat="header in tableHeadersList" ng-click="sort(header.property)">{{header.title}}
                     <span  ng-if="sortBy === header.property" class="sdc-user-management-table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
                 </div>
-              <div class="sdc-user-management-table-no-text-header head-row sdc-user-management-flex-item"></div>
-                <div class="sdc-user-management-table-no-text-header head-row sdc-user-management-flex-item"></div>
             </div>
 
             <div class="body">
                 <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
                     <div ng-init="user.filterTerm = user.firstName + ' ' + user.lastName + ' ' + user.userId + ' ' + user.email + ' ' + user.role + ' ' + (user.lastLoginTime | date: 'MM/dd/yyyy')"
                          ng-repeat="user in usersList | filter: search | orderBy:sortBy:reverse"
-                         data-ng-class="{'sdc-user-management-table-new-user-row': (isNewUser && $first), 'sdc-user-management-table-row-edit-mode': user.isInEditMode}"
+                         data-ng-class="{'sdc-user-management-table-new-user-row':  $first}"
                          class="sdc-user-management-flex-container data-row" data-tests-id="row_{{$index}}">
 
                         <div sdc-smart-tooltip class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="firstName_{{$index}}">{{user.firstName || '---'}}</div>
@@ -91,25 +46,10 @@
                         <div sdc-smart-tooltip class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="email_{{$index}}">{{user.email || '---'}}</div>
                         <div class="sdc-user-management-table-col-general sdc-user-management-flex-item">
                             <div class="sdc-user-management-table-role-select capitalize sdc-user-management-table-role-label"
-                                 data-ng-if="!user.isInEditMode"
                                  data-tests-id="role_{{$index}}"
                                  data-ng-bind="getTitle(user.role)"></div>
-                            <select class="sdc-user-management-table-role-select capitalize"
-                                    data-tests-id="selectRole_{{$index}}"
-                                    data-ng-if="user.isInEditMode"
-                                    data-ng-model="user.tempRole"
-                                    data-ng-options="role as (getTitle(role)) for role in roles | orderBy:'role'">
-                            </select>
                         </div>
                         <div class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="lastActive_{{$index}}">{{user.lastLoginTime == 0 ? 'Waiting' :  (user.lastLoginTime | date:'MM/dd/yyyy')}}</div>
-                        <div class="sdc-user-management-table-btn-col sdc-user-management-flex-item">
-                            <button data-ng-disabled="user.isInEditMode" data-ng-hide="user.isInEditMode || currentUser.userId === user.userId"  class="sdc-user-management-table-edit-btn" ng-click="onEditUserPressed(user)" data-tests-id="updateUser_{{$index}}"> </button>
-                            <button data-ng-show="user.isInEditMode" class="sdc-user-management-table-save-btn" ng-click="saveUserChanges(user)" data-tests-id="save_{{$index}}"> </button>
-                        </div>
-                        <div class="sdc-user-management-table-btn-col sdc-user-management-flex-item">
-                            <button data-ng-hide="currentUser.userId === user.userId"  class="sdc-user-management-table-delete-btn" ng-click="deleteUser(user.userId)" data-tests-id="delete_{{$index}}"> </button>
-                        </div>
-
                     </div>
                 </perfect-scrollbar>
             </div>
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management.less b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management.less
index 934faab9e7..d1528492de 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management.less
+++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management.less
@@ -4,8 +4,7 @@
     label {
         .i_17;
     }
-    .sdc-user-management-top-bar-form-input,
-    .sdc-user-management-top-bar-form-select {
+    .sdc-user-management-top-bar-form-input {
         .b_9;
         color: @color_b;
         height: 28px;
@@ -29,57 +28,6 @@
             top: 49px;
         }
     }
-    .vertical-border-container {
-        min-width: 50px;
-        margin: 0px auto;
-
-        .vertical-border {
-
-            width: 1px;
-            height: 70px;
-            background-color: @color_e;
-            display: table;
-            margin: 0 auto;
-        }
-    }
-
-    .sdc-user-management-top-bar-wrapper {
-        display: flex;
-    }
-
-    .sdc-user-management-top-bar-title {
-        .i_17;
-        font-weight: bold;
-    }
-
-    .sdc-user-management-top-bar-create-user-container {
-
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        float: right;
-        padding-top: 0px;
-        text-align: left;
-        width: 650px;
-
-        label {
-            margin-bottom: 20px;
-        }
-
-        .sdc-user-management-top-bar-form-container {
-            width: 233px;
-            margin-right: 35px;
-        }
-
-        .sdc-user-management-top-bar-create-btn {
-            .w-sdc-btn-light-green;
-            height: 30px;
-            width: 100px;
-            line-height: 0px;
-            padding-bottom: 3px;
-            margin-right: 0px;
-        }
-    }
 }
 
 
@@ -147,9 +95,6 @@
                         }
                     }
                 }
-                &.sdc-user-management-table-row-edit-mode {
-                    .bg_j;
-                }
                 div {
 
                     border-right: 1px solid @border_color_d;
@@ -176,33 +121,6 @@
             }
 
         }
-
-        .sdc-user-management-table-btn-col {
-
-            line-height: 0px;
-            text-align: center;
-            .sdc-user-management-table-delete-btn {
-                background-color: transparent;
-                border: none;
-                .sprite;
-                .sprite.e-sdc-small-icon-delete;
-                opacity: 0.7;
-            }
-            .sdc-user-management-table-edit-btn {
-                background-color: transparent;
-                border: none;
-                .sprite;
-                .e-sdc-small-icon-pencil;
-                opacity: 0.7;
-            }
-            .sdc-user-management-table-save-btn {
-                background-color: transparent;
-                border: none;
-                .sprite;
-                .sprite.e-sdc-green-save;
-            }
-        }
-
     }
 
     .sdc-user-management-flex-container {
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
deleted file mode 100644
index 8840afd79d..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
+++ /dev/null
@@ -1,680 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory, ICategoryBase} from "app/models";
-import {EntityService, CacheService} from "app/services";
-import {ComponentFactory, ResourceType, MenuHandler, ChangeLifecycleStateHandler} from "app/utils";
-import {UserService} from "../../ng2/services/user.service";
-import {ArchiveService} from "../../ng2/services/archive.service";
-import { ICatalogSelector, CatalogSelectorTypes } from "../../models/catalogSelector";
-import {IConfigStatus} from "../../models/app-config";
-
-interface Checkboxes {
-    componentTypes:Array<string>;
-    resourceSubTypes:Array<string>;
-}
-
-interface CheckboxesFilter {
-    // Types
-    selectedComponentTypes:Array<string>;
-    selectedResourceSubTypes:Array<string>;
-    // Categories
-    selectedCategoriesModel:Array<string>;
-    // Statuses
-    selectedStatuses:Array<Array<string>>;
-}
-
-interface Gui {
-    isLoading:boolean;
-    onComponentSubTypesClick:Function;
-    onComponentTypeClick:Function;
-    onCategoryClick:Function;
-    onStatusClick:Function;
-    changeFilterTerm:Function;
-}
-
-interface IFilterParams {
-    components: string[];
-    categories: string[];
-    statuses: (string)[];
-    order: [string, boolean];
-    term: string;
-    active: boolean;
-}
-
-interface ICategoriesMap {
-    [key: string]: {
-        category: ICategoryBase,
-        parent: ICategoryBase
-    }
-}
-
-export interface ICatalogViewModelScope extends ng.IScope {
-    checkboxes:Checkboxes;
-    checkboxesFilter:CheckboxesFilter;
-    gui:Gui;
-
-    categories:Array<IMainCategory>;
-    confStatus:IConfigStatuses;
-    sdcMenu:IAppMenu;
-    catalogFilterdItems:Array<Component>;
-    expandedSection:Array<string>;
-    actionStrategy:any;
-    user:IUserProperties;
-    catalogMenuItem:any;
-    version:string;
-    sortBy:string;
-    reverse:boolean;
-    vfcmtType:string;
-
-    //this is for UI paging
-    numberOfItemToDisplay:number;
-    isAllItemDisplay:boolean;
-    catalogFilteredItemsNum:number;
-    changeLifecycleState(entity:any, state:string):void;
-    sectionClick (section:string):void;
-    order(sortBy:string):void;
-    getElementFoundTitle(num:number):string;
-    goToComponent(component:Component):void;
-    raiseNumberOfElementToDisplay():void;
-
-    selectedCatalogItem: ICatalogSelector;
-    catalogSelectorItems: Array<ICatalogSelector>;
-    showCatalogSelector: boolean;
-    catalogAllItems:Array<Component>; /* fake data */
-    elementFoundTitle: string;
-    elementTypeTitle: string;
-
-    selectLeftSwitchItem (item: ICatalogSelector): void;
-}
-
-export class CatalogViewModel {
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        'Sdc.Services.EntityService',
-        'sdcConfig',
-        'sdcMenu',
-        '$state',
-        '$q',
-        'UserServiceNg2',
-        'Sdc.Services.CacheService',
-        'ComponentFactory',
-        'ChangeLifecycleStateHandler',
-        'MenuHandler',
-        'ArchiveServiceNg2'
-    ];
-
-    private defaultFilterParams:IFilterParams = {
-        components: [],
-        categories: [],
-        statuses: [],
-        order: ['lastUpdateDate', true],
-        term: '',
-        active: true
-    };
-    private categoriesMap:ICategoriesMap;
-
-    constructor(private $scope:ICatalogViewModelScope,
-                private $filter:ng.IFilterService,
-                private EntityService:EntityService,
-                private sdcConfig:IAppConfigurtaion,
-                private sdcMenu:IAppMenu,
-                private $state:ng.ui.IStateService,
-                private $q:ng.IQService,
-                private userService:UserService,
-                private cacheService:CacheService,
-                private ComponentFactory:ComponentFactory,
-                private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
-                private MenuHandler:MenuHandler,
-                private ArchiveService:ArchiveService
-            ) {
-
-
-        this.initLeftSwitch();
-        this.initScopeMembers();
-        this.loadFilterParams(); 
-        this.initCatalogData(); // Async task to get catalog from server.
-        this.initScopeMethods();
-    }
-
-
-    private initLeftSwitch = ():void => {
-        this.$scope.showCatalogSelector = false;
-
-        this.$scope.catalogSelectorItems = [
-            {value: CatalogSelectorTypes.Active, title: "Active Items", header: "Active"},
-            {value: CatalogSelectorTypes.Archive, title: "Archive", header: "Archived"}
-        ];
-        // set active items is default
-        this.$scope.selectedCatalogItem = this.$scope.catalogSelectorItems[0];
-    };
-
-    private initCatalogData = ():void => {
-        if(this.$scope.selectedCatalogItem.value === CatalogSelectorTypes.Archive){
-            this.getArchiveCatalogItems();
-        } else {
-            this.getActiveCatalogItems();
-        }
-    };
-
-    private initScopeMembers = ():void => {
-        // Gui init
-        this.$scope.gui = <Gui>{};
-        this.$scope.numberOfItemToDisplay = 0;
-        this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')).map((cat) => <IMainCategory>cat);
-        this.$scope.sdcMenu = this.sdcMenu;
-        this.$scope.confStatus = this.sdcMenu.statuses;
-        this.$scope.expandedSection = ["type", "category", "status"];
-        this.$scope.user = this.userService.getLoggedinUser();
-        this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem;
-
-        // Checklist init
-        this.$scope.checkboxes = <Checkboxes>{};
-        this.$scope.checkboxes.componentTypes = ['Resource', 'Service'];
-        this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'];
-        this.categoriesMap = this.initCategoriesMap();
-
-        this.initCheckboxesFilter();
-        this.$scope.version = this.cacheService.get('version');
-        this.$scope.sortBy = 'lastUpdateDate';
-        this.$scope.reverse = true;
-
-    };
-
-    private initCheckboxesFilter() {
-        // Checkboxes filter init
-        this.$scope.checkboxesFilter = <CheckboxesFilter>{};
-        this.$scope.checkboxesFilter.selectedComponentTypes = [];
-        this.$scope.checkboxesFilter.selectedResourceSubTypes = [];
-        this.$scope.checkboxesFilter.selectedCategoriesModel = [];
-        this.$scope.checkboxesFilter.selectedStatuses = [];
-    }
-
-    private initCategoriesMap(categoriesList?:(ICategoryBase)[], parentCategory:ICategoryBase=null): ICategoriesMap {
-        categoriesList = (categoriesList) ? categoriesList : this.$scope.categories;
-
-        // Init categories map
-        return categoriesList.reduce((acc, cat) => {
-            acc[cat.uniqueId] = {
-                category: cat,
-                parent: parentCategory
-            };
-            const catChildren = ((<IMainCategory>cat).subcategories)
-                ? (<IMainCategory>cat).subcategories
-                : (((<ISubCategory>cat).groupings)
-                    ? (<ISubCategory>cat).groupings
-                    : null);
-            if (catChildren) {
-                Object.assign(acc, this.initCategoriesMap(catChildren, cat));
-            }
-            return acc;
-        }, <ICategoriesMap>{});
-    }
-
-    private initScopeMethods = ():void => {
-        this.$scope.selectLeftSwitchItem = (item: ICatalogSelector): void => {
-
-            if (this.$scope.selectedCatalogItem.value !== item.value) {
-                this.$scope.selectedCatalogItem = item;
-                switch (item.value) {
-                    case CatalogSelectorTypes.Active:
-                        this.getActiveCatalogItems(true);
-                        break;
-
-                    case CatalogSelectorTypes.Archive:
-                        this.getArchiveCatalogItems(true);
-                        break;
-                }
-                this.changeFilterParams({active: (item.value === CatalogSelectorTypes.Active)})
-            }
-        };
-
-        this.$scope.sectionClick = (section: string): void => {
-            let index: number = this.$scope.expandedSection.indexOf(section);
-            if (index !== -1) {
-                this.$scope.expandedSection.splice(index, 1);
-            } else {
-                this.$scope.expandedSection.push(section);
-            }
-        };
-
-
-        this.$scope.order = (sortBy: string): void => {//default sort by descending last update. default for alphabetical = ascending
-            this.changeFilterParams({
-                order: (this.$scope.filterParams.order[0] === sortBy)
-                    ? [sortBy, !this.$scope.filterParams.order[1]]
-                    : [sortBy, sortBy === 'lastUpdateDate']
-            });
-        };
-
-
-        this.$scope.goToComponent = (component: Component): void => {
-            this.$scope.gui.isLoading = true;
-            this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()});
-        };
-
-
-        // Will print the number of elements found in catalog
-        this.$scope.getNumOfElements = (num:number):string => {
-            if (!num || num === 0) {
-                return `No <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`;
-            } else if (num === 1) {
-                return `1 <b>${this.$scope.selectedCatalogItem.header}</b> Element found`;
-            } else {
-                return num + ` <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`;
-            }
-        };
-
-        /**
-         * Select | unselect sub resource when resource is clicked | unclicked.
-         * @param type
-         */
-        this.$scope.gui.onComponentTypeClick = (compType: string, checked?: boolean): void => {
-            let components = angular.copy(this.$scope.filterParams.components);
-            const compIdx = components.indexOf(compType);
-            checked = (checked !== undefined) ? checked : compIdx === -1;
-            if (checked && compIdx === -1) {
-                components.push(compType);
-                components = this.cleanSubsFromList(components);
-            } else if (!checked && compIdx !== -1) {
-                components.splice(compIdx, 1);
-            }
-            this.changeFilterParams({
-                components: components
-            });
-        };
-
-        /**
-         * Selecting | unselect resources when sub resource is clicked | unclicked.
-         */
-        this.$scope.gui.onComponentSubTypesClick = (compSubType: string, compType: string, checked?: boolean): void => {
-            const componentSubTypesCheckboxes = this.$scope.checkboxes[compType.toLowerCase() + 'SubTypes'];
-            if (componentSubTypesCheckboxes) {
-                let components = angular.copy(this.$scope.filterParams.components);
-                let componentSubTypes = components.filter((st) => st.startsWith(compType + '.'));
-
-                const compSubTypeValue = compType + '.' + compSubType;
-                const compSubTypeValueIdx = components.indexOf(compSubTypeValue);
-                checked = (checked !== undefined) ? checked : compSubTypeValueIdx === -1;
-                if (checked && compSubTypeValueIdx === -1) {
-                    components.push(compSubTypeValue);
-                    componentSubTypes.push(compSubTypeValue);
-
-                    // if all sub types are checked, then check the main component type
-                    if (componentSubTypes.length === componentSubTypesCheckboxes.length) {
-                        this.$scope.gui.onComponentTypeClick(compType, true);
-                        return;
-                    }
-                } else if (!checked) {
-                    const compIdx = components.indexOf(compType);
-                    // if sub type exists, then remove it
-                    if (compSubTypeValueIdx !== -1) {
-                        components.splice(compSubTypeValueIdx, 1);
-                    }
-                    // else, if sub type doesn't exists, but its parent main component type exists,
-                    // then remove the main type and push all sub types except the current
-                    else if (compIdx !== -1) {
-                        components.splice(compIdx, 1);
-                        componentSubTypesCheckboxes.forEach((st) => {
-                            if (st !== compSubType) {
-                                components.push(compType + '.' + st);
-                            }
-                        });
-                    }
-                }
-
-                this.changeFilterParams({
-                    components
-                });
-            }
-        };
-
-        this.$scope.gui.onCategoryClick = (category: ICategoryBase, checked?: boolean): void => {
-            let categories: string[] = angular.copy(this.$scope.filterParams.categories);
-            let parentCategory: ICategoryBase = this.categoriesMap[category.uniqueId].parent;
-
-            // add the category to selected categories list
-            const categoryIdx = categories.indexOf(category.uniqueId);
-            checked = (checked !== undefined) ? checked : categoryIdx === -1;
-            if (checked && categoryIdx === -1) {
-                categories.push(category.uniqueId);
-
-                // check if all parent category children are checked, then check the parent category
-                if (parentCategory) {
-                    if (this.getParentCategoryChildren(parentCategory).every((ch) => categories.indexOf(ch.uniqueId) !== -1)) {
-                        this.$scope.gui.onCategoryClick(parentCategory, true);
-                        return;
-                    }
-                }
-
-                categories = this.cleanSubsFromList(categories);
-            } else if (!checked) {
-                // if category exists, then remove it
-                if (categoryIdx !== -1) {
-                    categories.splice(categoryIdx, 1);
-                }
-                // else, if category doesn't exists, but one of its parent categories exists,
-                // then remove that parent category and push all its children categories except the current
-                else {
-                    let prevParentCategory: ICategoryBase = category;
-                    let additionalCategories: string[] = [];
-                    while (parentCategory) {
-                        // add parent category children to list for replacing the parent category (if will be found later)
-                        additionalCategories = additionalCategories.concat(
-                            this.getParentCategoryChildren(parentCategory)
-                                .filter((ch) => ch.uniqueId !== prevParentCategory.uniqueId)
-                                .map((ch) => ch.uniqueId));
-
-                        const parentCategoryIdx = categories.indexOf(parentCategory.uniqueId);
-                        if (parentCategoryIdx !== -1) {
-                            categories.splice(parentCategoryIdx, 1);
-                            categories = categories.concat(additionalCategories);
-                            break;
-                        } else {
-                            prevParentCategory = parentCategory;
-                            parentCategory = this.categoriesMap[parentCategory.uniqueId].parent;
-                        }
-                    }
-                }
-            }
-
-            this.changeFilterParams({
-                categories
-            });
-        };
-
-        this.$scope.gui.onStatusClick = (statusKey: string, status: IConfigStatus, checked?: boolean) => {
-            const statuses = angular.copy(this.$scope.filterParams.statuses);
-
-            // add the status key to selected statuses list
-            const statusIdx = statuses.indexOf(statusKey);
-            checked = (checked !== undefined) ? checked : statusIdx === -1;
-            if (checked && statusIdx === -1) {
-                statuses.push(statusKey);
-            } else if (!checked && statusIdx !== -1) {
-                statuses.splice(statusIdx, 1);
-            }
-
-            this.changeFilterParams({
-                statuses
-            });
-        };
-
-        this.$scope.gui.changeFilterTerm = (filterTerm: string) => {
-            this.changeFilterParams({
-                term: filterTerm
-            });
-        };
-
-        this.$scope.raiseNumberOfElementToDisplay = (): void => {
-            this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35;
-            if (this.$scope.catalogFilterdItems) {
-                this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
-            }
-        };
-
-    }
-
-    private getAllCategoryChildrenIdsFlat(category:ICategoryBase) {
-        let catChildrenIds = [];
-        if ((<IMainCategory>category).subcategories) {
-            catChildrenIds = (<IMainCategory>category).subcategories.reduce((acc, scat) => {
-                    return acc.concat(this.getAllCategoryChildrenIdsFlat(scat));
-                }, (<IMainCategory>category).subcategories.map((scat) => scat.uniqueId));
-        }
-        else if ((<ISubCategory>category).groupings) {
-            catChildrenIds = (<ISubCategory>category).groupings.map((g) => g.uniqueId);
-        }
-        return catChildrenIds;
-    }
-
-    private getParentCategoryChildren(parentCategory:ICategoryBase): ICategoryBase[] {
-        if ((<IMainCategory>parentCategory).subcategories) {
-            return (<IMainCategory>parentCategory).subcategories;
-        } else if ((<ISubCategory>parentCategory).groupings) {
-            return (<ISubCategory>parentCategory).groupings;
-        }
-        return [];
-    }
-
-    private cleanSubsFromList(list:Array<string>, delimiter:string='.', removeSubsList?:Array<string>) {
-        let curRemoveSubsList = (removeSubsList || list).slice().sort();  // by default remove any children of any item in list
-        while (curRemoveSubsList.length) {
-            const curRemoveSubItem = curRemoveSubsList.shift();
-            const removeSubListFilter = (x) => !x.startsWith(curRemoveSubItem + delimiter);
-            list = list.filter(removeSubListFilter);
-            curRemoveSubsList = curRemoveSubsList.filter(removeSubListFilter);
-        }
-        return list;
-    }
-
-    private applyFilterParamsToView(filterParams:IFilterParams) {
-        // reset checkboxes filter
-        this.initCheckboxesFilter();
-
-        this.applyFilterParamsComponents(filterParams);
-        this.applyFilterParamsCategories(filterParams);
-        this.applyFilterParamsStatuses(filterParams);
-        this.applyFilterParamsOrder(filterParams);
-        this.applyFilterParamsTerm(filterParams);
-    }
-
-    private applyFilterParamsComponents(filterParams:IFilterParams) {
-        const componentList = [];
-        const componentSubTypesLists = {};
-        filterParams.components.forEach((compStr) => {
-            const compWithSub = compStr.split('.', 2);
-            const mainComp = compWithSub[0];
-            const subComp = compWithSub[1];
-            if (!subComp) {  // main component type
-                componentList.push(mainComp);
-
-                // if component type has sub types list, then add all component sub types
-                const checkboxesSubTypeKey = mainComp.toLowerCase() + 'SubTypes';
-                if (this.$scope.checkboxes.hasOwnProperty(checkboxesSubTypeKey)) {
-                    componentSubTypesLists[mainComp] = angular.copy(this.$scope.checkboxes[checkboxesSubTypeKey]);
-                }
-            } else {  // sub component type
-                // init component sub types list
-                if (!componentSubTypesLists.hasOwnProperty(mainComp)) {
-                    componentSubTypesLists[mainComp] = [];
-                }
-                // add sub type to list if not exist
-                if (componentSubTypesLists[mainComp].indexOf(subComp) === -1) {
-                    componentSubTypesLists[mainComp].push(subComp);
-                }
-            }
-        });
-        this.$scope.checkboxesFilter.selectedComponentTypes = componentList;
-        Object.keys(componentSubTypesLists).forEach((tKey) => {
-            const compSelectedSubTypeKey = 'selected' + tKey + 'SubTypes';
-            if (this.$scope.checkboxesFilter.hasOwnProperty(compSelectedSubTypeKey)) {
-                this.$scope.checkboxesFilter[compSelectedSubTypeKey] = componentSubTypesLists[tKey];
-            }
-        });
-
-        let selectedCatalogIndex = filterParams.active ? CatalogSelectorTypes.Active : CatalogSelectorTypes.Archive;
-        this.$scope.selectedCatalogItem = this.$scope.catalogSelectorItems[selectedCatalogIndex];
-        
-    }
-
-    private applyFilterParamsCategories(filterParams:IFilterParams) {
-        this.$scope.checkboxesFilter.selectedCategoriesModel = filterParams.categories.reduce((acc, c) => {
-            acc.push(c);
-            const cat = this.categoriesMap[c].category;
-            if (cat) {
-                acc = acc.concat(this.getAllCategoryChildrenIdsFlat(cat));
-            }
-            return acc;
-        }, []);
-    }
-
-    private getActiveCatalogItems(forceReload?: boolean): void {
-
-        if (forceReload || this.componentShouldReload()) {
-            this.$scope.gui.isLoading = true;
-            let onSuccess = (followedResponse:Array<Component>):void => {
-                this.updateCatalogItems(followedResponse);
-                this.$scope.gui.isLoading = false;
-                this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name);  //catalog
-                this.cacheService.set('breadcrumbsComponents', followedResponse);
-            };
-
-            let onError = ():void => {
-                console.info('Failed to load catalog CatalogViewModel::getActiveCatalogItems');
-                this.$scope.gui.isLoading = false;
-            };
-            this.EntityService.getCatalog().then(onSuccess, onError);
-        } else {
-            let cachedComponents = this.cacheService.get('breadcrumbsComponents');
-            this.updateCatalogItems(cachedComponents);
-        }
-    }
-
-    private getArchiveCatalogItems(forceReload?: boolean): void {
-        if(forceReload || !this.cacheService.contains("archiveComponents")) {
-            this.$scope.gui.isLoading = true;
-            let onSuccess = (followedResponse:Array<Component>):void => {
-                this.cacheService.set("archiveComponents", followedResponse);
-                this.updateCatalogItems(followedResponse);
-                this.$scope.gui.isLoading = false;
-            };
-    
-            let onError = ():void => {
-                console.info('Failed to load catalog CatalogViewModel::getArchiveCatalogItems');
-                this.$scope.gui.isLoading = false;
-            };
-    
-            this.ArchiveService.getArchiveCatalog().subscribe(onSuccess, onError);
-        } else {
-            let archiveCache = this.cacheService.get("archiveComponents");
-            this.updateCatalogItems(archiveCache);
-        }
-
-    }
-
-    private updateCatalogItems = (items:Array<Component>):void => {
-        this.$scope.catalogFilterdItems = items;
-        this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
-        this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories'));
-    }
-
-    private componentShouldReload = ():boolean => {
-        let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents'));
-        return !breadcrumbsValid || this.isDefaultFilter();
-    }
-
-    private isDefaultFilter = (): boolean => {
-        return angular.equals(this.defaultFilterParams, this.$scope.filterParams);
-    }
-
-    private applyFilterParamsStatuses(filterParams: IFilterParams) {
-        this.$scope.checkboxesFilter.selectedStatuses = filterParams.statuses.reduce((acc, stKey:string) => {
-            const status = this.$scope.confStatus[stKey];
-            if (status) {
-                acc.push(status.values);
-            }
-            return acc;
-        }, []);
-    }
-
-    private applyFilterParamsOrder(filterParams: IFilterParams) {
-        this.$scope.sortBy = filterParams.order[0];
-        this.$scope.reverse = filterParams.order[1];
-    }
-
-    private applyFilterParamsTerm(filterParams: IFilterParams) {
-        this.$scope.search = {
-            filterTerm: filterParams.term
-        };
-    }
-
-    private loadFilterParams() {
-        const params = this.$state.params;
-        this.$scope.filterParams = angular.copy(this.defaultFilterParams);
-        Object.keys(params).forEach((k) => {
-            if (!angular.isUndefined(params[k])) {
-                let newVal;
-                let filterKey = k.substr('filter.'.length);
-                switch (k) {
-                    case 'filter.components':
-                    case 'filter.categories':
-                        newVal = _.uniq(params[k].split(','));
-                        newVal = this.cleanSubsFromList(newVal);
-                        break;
-                    case 'filter.statuses':
-                        newVal = _.uniq(params[k].split(','));
-                        break;
-                    case 'filter.order':
-                        newVal = params[k].startsWith('-') ? [params[k].substr(1), true] : [params[k], false];
-                        break;
-                    case 'filter.term':
-                        newVal = params[k];
-                        break;
-                    case 'filter.active':
-                        newVal = (params[k] === "true" || params[k] === true);
-                        break;
-                    default:
-                        // unknown filter key
-                        filterKey = null;
-                }
-                if (filterKey) {
-                    this.$scope.filterParams[filterKey] = newVal;
-                }
-            }
-        });
-        // re-set filter params with valid values
-        this.applyFilterParamsToView(this.$scope.filterParams);
-
-    }
-
-    private changeFilterParams(changedFilterParams) {
-        const newParams = {};
-        Object.keys(changedFilterParams).forEach((k) => {
-            let newVal;
-            switch (k) {
-                case 'components':
-                case 'categories':
-                case 'statuses':
-                    newVal = changedFilterParams[k] && changedFilterParams[k].length ? changedFilterParams[k].join(',') : null;
-                    break;
-                case 'order':
-                    newVal = (changedFilterParams[k][1] ? '-' : '') + changedFilterParams[k][0];
-                    break;
-                case 'term':
-                    newVal = changedFilterParams[k] ? changedFilterParams[k] : null;
-                    break;
-                case 'active':
-                    newVal = changedFilterParams[k];
-                    break;
-                default:
-                    return;
-            }
-            this.$scope.filterParams[k] = changedFilterParams[k];
-            newParams['filter.' + k] = newVal;
-        });
-        this.$state.go('.', newParams, {location: 'replace', notify: false}).then(() => {
-            this.applyFilterParamsToView(this.$scope.filterParams);
-        });
-    }
-}
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html
deleted file mode 100644
index 25fa561155..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog-view.html
+++ /dev/null
@@ -1,209 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="sdc-catalog-container">
-
-    <loader data-display="gui.isLoading"></loader>
-<!--
-    <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header>
--->
-
-    <div class="w-sdc-main-container">
-
-        <div
-            class="i-sdc-designer-leftbar-section-left-switch-header"
-            data-tests-id="catalog-selector-button"
-            data-ng-click="showCatalogSelector=!showCatalogSelector">
-            <div  class="i-sdc-designer-leftbar-section-left-switch-header-text">
-                {{selectedCatalogItem.title}}
-            </div>
-            <div class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small">&nbsp;</div>
-
-            <div
-                class="sdc-catalog-selector-wrapper"
-                data-ng-show="showCatalogSelector">
-                <div
-                    class="sdc-catalog-selector-item"
-                    data-ng-repeat="leftSwitchItem in catalogSelectorItems track by $index"
-                    data-tests-id="catalog-selector-{{leftSwitchItem.value}}"
-                    data-ng-click="selectLeftSwitchItem(leftSwitchItem)">
-                    <span>{{leftSwitchItem.title}}</span>
-                </div>
-            </div>
-        </div>
-
-        <!-- LEFT SIDE -->
-        <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar" include-padding="true">
-            <div class="sdc-catalog-leftbar-container">
-                <div class="sdc-catalog-type-filter-container">
-                    <div
-                        class="i-sdc-designer-leftbar-section-title pointer"
-                        data-ng-click="sectionClick('type')"
-                        data-ng-class="{'expanded': expandedSection.indexOf('type') !== -1}">
-                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
-                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="typeFilterTitle">Type</span>
-                    </div>
-                    <div class="i-sdc-designer-leftbar-section-content">
-                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
-                            <li class="i-sdc-designer-leftbar-section-content-ul-li" data-ng-repeat="type in checkboxes.componentTypes">
-
-                                <ng1-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}"
-                                              sdc-checklist-model="checkboxesFilter.selectedComponentTypes"
-                                              sdc-checklist-value="type"
-                                              sdc-checked-change="gui.onComponentTypeClick(type, checked)"
-                                              text="{{type}}"></ng1-checkbox>
-
-                                <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="type==='Resource'">
-                                    <li data-ng-repeat="subType in checkboxes.resourceSubTypes">
-
-                                        <ng1-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}"
-                                                      sdc-checklist-model="checkboxesFilter.selectedResourceSubTypes"
-                                                      sdc-checklist-value="subType"
-                                                      sdc-checked-change="gui.onComponentSubTypesClick(subType, type, checked)"
-                                                      text="{{subType}}"></ng1-checkbox>
-
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-                <div class="sdc-catalog-categories-filter-container">
-                    <div
-                        class="i-sdc-designer-leftbar-section-title pointer"
-                        data-ng-click="sectionClick('category')"
-                        data-ng-class="{'expanded': expandedSection.indexOf('category') !== -1}">
-                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
-                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span>
-                    </div>
-                    <div class="i-sdc-designer-leftbar-section-content">
-                        <!-- CATEGORY CHECKBOX -->
-                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
-                            <li class="i-sdc-designer-leftbar-section-content-ul-li"
-                                data-ng-repeat="category in categories | categoryTypeFilter:checkboxesFilter.selectedComponentTypes:checkboxesFilter.selectedResourceSubTypes | orderBy: category">
-
-                                <ng1-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}"
-                                              sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
-                                              sdc-checklist-value="category.uniqueId"
-                                              sdc-checked-change="gui.onCategoryClick(category, checked)"
-                                              data-tests-id="{{category.uniqueId}}"
-                                              text="{{category.name}}"></ng1-checkbox>
-
-                                <!-- SUB CATEGORY CHECKBOX -->
-                                <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="category.subcategories && category.subcategories.length>0">
-                                    <li ng-repeat="subcategory in category.subcategories track by subcategory.uniqueId | orderBy:'name'">
-
-                                        <ng1-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}"
-                                                      sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
-                                                      sdc-checklist-value="subcategory.uniqueId"
-                                                      sdc-checked-change="gui.onCategoryClick(subcategory, checked)"
-                                                      data-tests-id="{{subcategory.uniqueId}}"
-                                                      text="{{subcategory.name}}"></ng1-checkbox>
-
-                                        <!-- GROUPING CHECKBOX -->
-                                        <ul class=" list-unstyled i-sdc-catalog-grouping-checkbox" data-ng-if="subcategory.groupings && subcategory.groupings.length>0">
-                                            <li ng-repeat="grouping in subcategory.groupings track by grouping.uniqueId | orderBy:'name'">
-
-                                                <ng1-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}"
-                                                              sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
-                                                              sdc-checklist-value="grouping.uniqueId"
-                                                              sdc-checked-change="gui.onCategoryClick(grouping, checked)"
-                                                              text="{{grouping.name}}"></ng1-checkbox>
-
-                                            </li>
-                                        </ul>
-                                    </li><!-- Close subcategory -->
-                                </ul><!-- Close subcategories -->
-                            </li><!-- Close main category -->
-                        </ul><!-- Close main categories -->
-
-                    </div>
-                </div>
-
-                <!-- STATUS -->
-                <div class="sdc-catalog-status-filter-container">
-                    <div
-                        class="i-sdc-designer-leftbar-section-title pointer"
-                        data-ng-click="sectionClick('status')"
-                        data-ng-class="{'expanded': expandedSection.indexOf('status') !== -1}">
-                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
-                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="statusFilterTitle">Status</span>
-                    </div>
-
-                    <div class="i-sdc-designer-leftbar-section-content">
-                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
-                            <!--li data-ng-repeat="(key, value) in confStatus" -->
-
-                            <li class="i-sdc-designer-leftbar-section-content-ul-li"
-                                data-ng-repeat="(key, state) in confStatus">
-
-                                <ng1-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
-                                              sdc-checklist-model="checkboxesFilter.selectedStatuses"
-                                              sdc-checklist-value="state.values"
-                                              sdc-checked-change="gui.onStatusClick(key, state, checked)"
-                                              text="{{state.name}}"></ng1-checkbox>
-
-                                <div class="i-sdc-categories-list-item-icon"></div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-            </div>
-        </perfect-scrollbar>
-
-        <!-- RIGHT SIDE -->
-        <perfect-scrollbar id="catalog-main-scroll" include-padding="true" class="w-sdc-main-right-container w-sdc-catalog-main">
-
-            <!-- HEADER -->
-            <div>
-                <div class="w-sdc-dashboard-catalog-items-header"
-                     ng-bind-html="getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)"
-                ></div>
-                <div class="w-sdc-dashboard-catalog-header-right">
-                    <span class="w-sdc-dashboard-catalog-header-order1" translate="SORT_CAPTION"></span>&nbsp;&nbsp;
-                    <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update" data-ng-class="{'blue' : sortBy==='lastUpdateDate'}"
-                       ng-click="order('lastUpdateDate')" translate="SORT_BY_UPDATE_DATE"></a>&nbsp;
-                    <span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
-                    &nbsp;|&nbsp;
-                    <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical" data-ng-class="{'blue' : sortBy!=='lastUpdateDate'}"
-                       ng-click="order('name|resourceName')" translate="SORT_ALPHABETICAL"></a>&nbsp;
-                    <span data-ng-show="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
-                </div>
-            </div>
-
-            <div infinite-scroll-disabled='isAllItemDisplay'  infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#catalog-main-scroll'" infinite-scroll-distance="'0.2'" infinite-scroll-parent>
-
-                <div class='w-sdc-row-flex-items'>
-
-                    <!-- Tile new -->
-                    <ng2-ui-tile data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
-                        data-ng-init="component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version;"
-                        [component]="component" (on-tile-click)="gui.isLoading || goToComponent(component)"></ng2-ui-tile>
-                    <!-- Tile new -->
-
-                </div>
-
-            </div>
-        </perfect-scrollbar>
-
-    </div>
-
-    <top-nav [top-lvl-selected-index]="1" [search-term]="search.filterTerm" (search-term-change)="gui.changeFilterTerm($event)" [version]="version"></top-nav>
-
-
-</div>
diff --git a/catalog-ui/src/app/view-models/catalog/catalog.less b/catalog-ui/src/app/view-models/catalog/catalog.less
deleted file mode 100644
index 45556030e3..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog.less
+++ /dev/null
@@ -1,362 +0,0 @@
-.sdc-catalog-container {
-
-    .i-sdc-categories-list-item {
-        font-weight: normal;
-    }
-
-    // Checkboxes
-    .i-sdc-designer-leftbar-section-content-ul {
-        padding: 0;
-        margin: 0;
-
-        .i-sdc-designer-leftbar-section-content-ul-li {
-            margin-top: 5px;
-
-            .tlv-checkbox {
-                font-size: 13px;
-                font-family: @font-opensans-medium;
-                color: @func_color_s;
-            }
-        }
-
-        .i-sdc-catalog-subcategories-checkbox {
-            padding: 0 0 0 20px;
-            margin: 0;
-
-            > li {
-                margin-top: 5px;
-
-                .tlv-checkbox {
-                    font-size:13px;
-                    font-family: @font-opensans-regular;
-                }
-            }
-
-            .i-sdc-catalog-grouping-checkbox {
-                padding: 0 0 0 20px;
-                margin: 0;
-            }
-
-        }
-
-    }
-
-    .i-sdc-designer-leftbar-section-content-li {
-        &:last-child {
-            .i-sdc-categories-list-item {
-                margin: 0;
-            }
-        }
-    }
-
-    .i-sdc-categories-list-item {
-        display: block;
-        //margin-bottom: 5px;
-        //padding-left: 15px;
-        //text-indent: -24px;
-        vertical-align: top;
-        font-weight: bold;
-    }
-
-    .i-sdc-subcategories-list-item {
-        display: block;
-        //padding-left: 20px;
-        vertical-align: top;
-        font-weight: normal;
-        margin: 0;
-        //text-indent: -10px;
-    }
-
-    .i-sdc-categories-list-item-icon {
-        display: inline-block;
-        float: right;
-        position: relative;
-        right: -8px;
-        top: 6px;
-    }
-
-    .i-sdc-categories-list-item {
-        margin-top: 7px;
-        &.NOT_CERTIFIED_CHECKOUT,
-        &.NOT_CERTIFIED_CHECKIN {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2889px;
-                width: 14px;
-                height: 14px;
-
-            }
-        }
-
-        &.CERTIFIED {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -3034px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
-        &.READY_FOR_CERTIFICATION {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
-        &.CERTIFICATION_IN_PROGRESS {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
-        &.DISTRIBUTED,
-        &.TBD {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -43px -3087px;
-                width: 24px;
-                height: 14px;
-
-            }
-        }
-    }
-
-    .i-sdc-categories-list-input {
-        margin: 8px;
-
-    }
-
-    .i-sdc-subcategories-list-input {
-
-        margin: 8px;
-    }
-    .i-sdc-subcategories-list-input-container {
-        margin: 0px 0px 0px 20px;
-        padding: 2px;
-    }
-
-    .w-sdc-header-catalog-search-container {
-        display: table;
-        padding: 21px 0;
-        position: relative;
-
-        .w-sdc-designer-leftbar-search-input {
-            color: #000;
-            width: 300px;
-        }
-    }
-
-    .w-sdc-catalog-main {
-        padding: 10px 12px;
-    }
-    .w-sdc-dashboard-catalog-items-header {
-        .b_3;
-        color: @main_color_m;
-        font-family: OpenSans-Regular, sans-serif;
-        font-size: 14px;
-        display: inline-block;
-        font-style: normal;
-        margin-left: 11px;
-        b {
-            font-family: OpenSans-Bold, sans-serif;
-            color: @main_color_l;
-            font-weight: bold;
-        }
-        font-weight: normal;
-        /* padding-left: 10px; */
-    }
-
-    .w-sdc-dashboard-catalog-header-order1 {
-        .b_3;
-        font-weight: 800;
-    }
-
-    .w-sdc-dashboard-catalog-sort {
-        .b_3;
-        font-weight: bold;
-        white-space:pre;
-        &:hover{
-            .hand;
-            text-decoration: none;
-            .a_3;
-        }
-        &.blue {
-            .a_3;
-        }
-    }
-
-    .w-sdc-catalog-sort-arrow{
-        display: inline-block;
-        &.up{
-            .b_3;
-            width: 0;
-            height: 0;
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-bottom: 5px solid ;
-        }
-        &.down{
-            .b_3;
-            width: 0;
-            height: 0;
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-top: 5px solid;
-        }
-    }
-
-
-    .w-sdc-dashboard-catalog-header-right{
-        float: right;
-        display: inline-block;
-        padding-right:34px;
-    }
-
-    .w-sdc-header-catalog-search-input {
-        width: 420px;
-        display: table-cell;
-        padding: 0 25px 1px 10px;
-        border: 1px solid #bcbcbc;
-        .border-radius(10px);
-        height: 30px;
-        margin: 10px 30px;
-        outline: none;
-    }
-
-    .sdc-catalog-type-filter-container {
-        margin-top: -1px;
-    }
-
-    .i-sdc-designer-leftbar-section-title {
-        text-transform: uppercase;
-        .l_14_m;
-        line-height: 30px;
-    }
-
-    .i-sdc-designer-leftbar-section-title-icon {
-        .hand;
-        .tlv-sprite;
-        .footer-close;
-        transition: .3s all;
-        margin-top: -4px;
-    }
-
-    .i-sdc-designer-leftbar-section-title-text {
-        margin-left: 20px;
-    }
-
-    /* added Michael */
-    .i-sdc-designer-left-sidebar {
-        margin-top: 43px;
-    }
-    .i-sdc-designer-leftbar-section-left-switch-header {
-        text-transform: uppercase;
-        .l_14_m;
-        line-height: 40px;
-        width: 243px;
-
-        font-family: OpenSans-Bold, sans-serif;
-        font-size: 14px;
-
-        color: @main_color_a;
-        background-color: @tlv_color_t;
-        border: solid 1px fade(@main_color_t, 40%);
-        cursor: pointer;
-        opacity: 1;
-        z-index: 9999;
-        position: relative;
-        //box-shadow: 1px 0 2px #00000036;
-    }
-    .i-sdc-designer-leftbar-section-left-switch-header-text {
-        display: inline-block;
-        width: 180px;
-        margin-left: 20px;
-    }
-    .i-sdc-designer-leftbar-section-left-switch-header-icon {
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-
-    .seperator-left,
-    .seperator-right {
-        border-right: solid 1px @color_m;
-        display: table-cell;
-        width: 2px;
-    }
-
-    // Rotate catalog left side arrows
-    .i-sdc-designer-leftbar-section-title.expanded .i-sdc-designer-leftbar-section-title-icon {
-        transform: rotate(180deg);
-    }
-
-    // Transform catalog left side sections
-    .i-sdc-designer-leftbar-section-title + .i-sdc-designer-leftbar-section-content {
-        max-height: 0px;
-        margin: 0 auto;
-        transition: all .3s;
-        overflow: hidden;
-        padding: 0 10px 0 18px;
-    }
-
-    .i-sdc-designer-leftbar-section-title.expanded + .i-sdc-designer-leftbar-section-content {
-        max-height: 9999px;
-        margin: 0 auto 1px;
-        transition: all .3s;
-        padding: 10px 18px 10px 18px;
-        overflow: hidden;
-    }
-
-}
-
-.w-sdc-search-icon{
-    position: absolute;
-    right: 40px;
-    top: 40px;
-    &.leftbar{
-        top: 19px;
-        right: 18px;
-    }
-    &.magnification {
-        .sprite;
-        .sprite.magnification-glass;
-        .hand;
-    }
-
-    &.cancel {
-        .sprite;
-        .sprite.clear-text;
-        .hand;
-    }
-}
-
-/* added Michael */
-.sdc-catalog-selector-wrapper {
-    position: absolute;
-    left: 0px;
-    top: 42px;
-    width: 241px;
-    height: auto;
-    cursor: pointer;
-    opacity: 1;
-    z-index: 1000;
-    box-shadow: 1px 2px 3px #b1b1b1;
-}
-
-.sdc-catalog-selector-item {
-    text-transform: none;
-    line-height: 40px;
-    font-family: OpenSans-Bold, sans-serif;
-    font-size: 14px;
-    color: @main_color_l;
-    background-color: @main_color_p;
-    padding-left: 20px;
-}
-
-.sdc-catalog-selector-item:hover {
-    color: @main_color_a;
-    background-color: @tlv_color_v;
-}
-
-
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
deleted file mode 100644
index 4d084045f7..0000000000
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
+++ /dev/null
@@ -1,497 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {IConfigRoles, IAppConfigurtaion, IAppMenu, IUserProperties, Component} from "app/models";
-import {EntityService, SharingService, CacheService} from "app/services";
-import {ComponentType, ResourceType, MenuHandler, ModalsHandler, ChangeLifecycleStateHandler, SEVERITY, ComponentFactory, CHANGE_COMPONENT_CSAR_VERSION_FLAG} from "app/utils";
-import {IClientMessageModalModel} from "../modals/message-modal/message-client-modal/client-message-modal-view-model";
-import {UserService} from "../../ng2/services/user.service";
-
-
-export interface IDashboardViewModelScope extends ng.IScope {
-
-    isLoading:boolean;
-    numberOfItemToDisplay:number;
-    components:Array<Component>;
-    folders:FoldersMenu;
-    roles:IConfigRoles;
-    user:IUserProperties;
-    sdcConfig:IAppConfigurtaion;
-    sdcMenu:IAppMenu;
-    sharingService:SharingService;
-    showTutorial:boolean;
-    isFirstTime:boolean;
-    version:string;
-    filterParams:DashboardFilter;
-    vfcmtType:string;
-
-    changeFilterParams():void;
-    updateSearchTerm(newTerm:string):void;
-    onImportVfc(file:any):void;
-    onImportVf(file:any):void;
-    openCreateModal(componentType:ComponentType, importedFile:any):void;
-    openWhatsNewModal(version:string):void;
-    openDesignerModal(isResource:boolean, uniqueId:string):void;
-    setSelectedFolder(folderItem:FoldersItemsMenu):void;
-    entitiesCount(folderItem:FoldersItemsMenu):number;
-    getCurrentFolderDistributed():Array<Component>;
-    changeLifecycleState(entity:any, data:any):void;
-    goToComponent(component:Component):void;
-    raiseNumberOfElementToDisplay():void;
-    wizardDebugEdit:Function;
-    notificationIconCallback:Function;
-}
-
-interface ICheckboxesFilter {
-    // Statuses
-    selectedStatuses:Array<string>;
-    // distributed
-    distributed:Array<string>;
-}
-
-export interface IItemMenu {
-
-}
-
-export interface IMenuItemProperties {
-    text:string;
-    group:string;
-    state:string;
-    dist:string;
-    groupname:string;
-    states:Array<any>;
-}
-
-export interface IQueryFilterParams {
-    'filter.term': string;
-    'filter.distributed': string;
-    'filter.status': string
-}
-
-
-export class DashboardFilter {
-    searchTerm: string;
-    checkboxes: ICheckboxesFilter;
-
-    constructor(params = {}) {
-        this.searchTerm = params['filter.term'] || "";
-        this.checkboxes = {
-            selectedStatuses : params['filter.status']? params['filter.status'].split(',') : [],
-            distributed : params['filter.distributed']? params['filter.distributed'].split(',') : []
-        };
-    }
-
-    public toParam = ():IQueryFilterParams => {
-        return {
-            'filter.term': this.searchTerm,
-            'filter.distributed': this.checkboxes && this.checkboxes.distributed.join(',') || null,
-            'filter.status': this.checkboxes && this.checkboxes.selectedStatuses.join(',') || null
-        };
-    }
-
-}
-
-export class FoldersMenu {
-
-    private _folders:Array<FoldersItemsMenu> = [];
-
-    constructor(folders:Array<IMenuItemProperties>) {
-        let self = this;
-        folders.forEach(function (folder:IMenuItemProperties) {
-            if (folder.groupname) {
-                self._folders.push(new FoldersItemsMenuGroup(folder));
-            } else {
-                self._folders.push(new FoldersItemsMenu(folder));
-            }
-        });
-        self._folders[0].setSelected(true);
-    }
-
-    public getFolders = ():Array<FoldersItemsMenu> => {
-        return this._folders;
-    };
-
-    public getCurrentFolder = ():FoldersItemsMenu => {
-        let menuItem:FoldersItemsMenu = undefined;
-        this.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) {
-            if (tmpFolder.isSelected()) {
-                menuItem = tmpFolder;
-            }
-        });
-        return menuItem;
-    };
-
-    public setSelected = (folder:FoldersItemsMenu):void => {
-        this.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) {
-            tmpFolder.setSelected(false);
-        });
-        folder.setSelected(true);
-    }
-
-}
-
-export class FoldersItemsMenu implements IItemMenu {
-
-    public text:string;
-    public group:string;
-    public state:string;
-    public dist:string;
-    public states:Array<any>;
-
-    private selected:boolean = false;
-
-    constructor(menuProperties:IMenuItemProperties) {
-        this.text = menuProperties.text;
-        this.group = menuProperties.group;
-        this.state = menuProperties.state;
-        this.states = menuProperties.states;
-        this.dist = menuProperties.dist;
-    }
-
-    public isSelected = ():boolean => {
-        return this.selected;
-    };
-
-    public setSelected = (value:boolean):void => {
-        this.selected = value;
-    };
-
-    public isGroup = ():boolean => {
-        return false;
-    }
-
-}
-
-export class FoldersItemsMenuGroup extends FoldersItemsMenu {
-
-    public groupname:string;
-
-    constructor(menuProperties:IMenuItemProperties) {
-        super(menuProperties);
-        this.groupname = menuProperties.groupname;
-    }
-
-    public isGroup = ():boolean => {
-        return true;
-    }
-
-}
-
-export class DashboardViewModel {
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        'Sdc.Services.EntityService',
-        '$http',
-        'sdcConfig',
-        'sdcMenu',
-        '$state',
-        '$stateParams',
-        'UserServiceNg2',
-        'Sdc.Services.SharingService',
-        'Sdc.Services.CacheService',
-        '$q',
-        'ComponentFactory',
-        'ChangeLifecycleStateHandler',
-        'ModalsHandler',
-        'MenuHandler'
-    ];
-
-    private components:Array<Component>;
-
-    constructor(private $scope:IDashboardViewModelScope,
-                private $filter:ng.IFilterService,
-                private entityService:EntityService,
-                private $http:ng.IHttpService,
-                private sdcConfig:IAppConfigurtaion,
-                private sdcMenu:IAppMenu,
-                private $state:ng.ui.IStateService,
-                private $stateParams:any,
-                private userService:UserService,
-                private sharingService:SharingService,
-                private cacheService:CacheService,
-                private $q:ng.IQService,
-                private ComponentFactory:ComponentFactory,
-                private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
-                private ModalsHandler:ModalsHandler,
-                private MenuHandler:MenuHandler) {
-        this.initScope();
-        this.initFolders();
-        this.initEntities();
-
-        if (this.$stateParams) {
-
-            if (this.$state.params.folder) {
-                let self = this;
-                let folderName = this.$state.params.folder.replaceAll("_", " ");
-
-                this.$scope.folders.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) {
-                    if (tmpFolder.text === folderName) {
-                        self.$scope.setSelectedFolder(tmpFolder);
-                    }
-                });
-            }
-
-            // Show the tutorial if needed when the dashboard page is opened.<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
-            // This is called from the welcome page.
-            else if (this.$stateParams.show === 'tutorial') {
-                this.$scope.showTutorial = true;
-                this.$scope.isFirstTime = true;
-            }
-        }
-    }
-
-    private initFolders = ():void => {
-        if (this.$scope.user) {
-            this.$scope.folders = new FoldersMenu(this.$scope.roles[this.$scope.user.role].folder);
-        }
-    };
-
-    private initScope = ():void => {
-        let self = this;
-
-        this.$scope.version = this.cacheService.get('version');
-        this.$scope.sharingService = this.sharingService;
-        this.$scope.numberOfItemToDisplay = 0;
-        this.$scope.isLoading = false;
-        this.$scope.sdcConfig = this.sdcConfig;
-        this.$scope.sdcMenu = this.sdcMenu;
-        this.$scope.user = this.userService.getLoggedinUser();
-        this.$scope.roles = this.sdcMenu.roles;
-        this.$scope.showTutorial = false;
-        this.$scope.isFirstTime = false;
-        this.$scope.vfcmtType = ResourceType.VFCMT;
-        this.$scope.filterParams = new DashboardFilter(this.$state.params);
-
-        // Open onboarding modal
-        this.$scope.notificationIconCallback = ():void => {
-            this.ModalsHandler.openOnboadrdingModal('Import').then((result)=> {
-                //OK
-                if(!result.previousComponent || result.previousComponent.csarVersion != result.componentCsar.csarVersion) {
-                    this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, result.componentCsar.csarVersion);
-                }
-
-                this.$state.go('workspace.general', {
-                    id: result.previousComponent && result.previousComponent.uniqueId,
-                    componentCsar: result.componentCsar,
-                    type: result.type
-                });
-            }, ()=> {
-                // ERROR
-            });
-        };
-
-        this.$scope.onImportVf = (file:any):void => {
-            if (file && file.filename) {
-                // Check that the file has valid extension.
-                let fileExtension:string = file.filename.split(".").pop();
-                if (this.sdcConfig.csarFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) {
-                    this.$state.go('workspace.general', {
-                        type: ComponentType.RESOURCE.toLowerCase(),
-                        importedFile: file,
-                        resourceType: ResourceType.VF
-                    });
-                } else {
-                    let data:IClientMessageModalModel = {
-                        title: self.$filter('translate')("NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS_TITLE"),
-                        message: self.$filter('translate')("NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS", "{'extensions': '" + this.sdcConfig.csarFileExtension + "'}"),
-                        severity: SEVERITY.ERROR
-                    };
-                    this.ModalsHandler.openClientMessageModal(data);
-                }
-            }
-        };
-
-        this.$scope.onImportVfc = (file:any):void => {
-            if (file && file.filename) {
-                // Check that the file has valid extension.
-                let fileExtension:string = file.filename.split(".").pop();
-                if (this.sdcConfig.toscaFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) {
-                    this.$state.go('workspace.general', {
-                        type: ComponentType.RESOURCE.toLowerCase(),
-                        importedFile: file,
-                        resourceType: ResourceType.VFC
-                    });
-                } else {
-                    let data:IClientMessageModalModel = {
-                        title: self.$filter('translate')("NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS_TITLE"),
-                        message: self.$filter('translate')("NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS", "{'extensions': '" + this.sdcConfig.toscaFileExtension + "'}"),
-                        severity: SEVERITY.ERROR
-                    };
-                    this.ModalsHandler.openClientMessageModal(data);
-                }
-            }
-        };
-
-        this.$scope.openCreateModal = (componentType:string, importedFile:any):void => {
-            if (importedFile) {
-                this.initEntities(true); // Return from import
-            } else {
-                this.$state.go('workspace.general', {type: componentType.toLowerCase()});
-            }
-
-        };
-
-        this.$scope.createPNF = ():void => {
-            this.$state.go('workspace.general', {
-                type: ComponentType.RESOURCE.toLowerCase(),
-                resourceType: ResourceType.PNF
-            });
-        };
-
-        this.$scope.createCR = ():void => {
-            this.$state.go('workspace.general', {
-                type: ComponentType.RESOURCE.toLowerCase(),
-                resourceType: ResourceType.CR
-            });
-        };
-
-        this.$scope.entitiesCount = (folderItem:FoldersItemsMenu):any => {
-            let self = this;
-            let total:number = 0;
-            if (folderItem.isGroup()) {
-                this.$scope.folders.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) {
-                    if (tmpFolder.group && tmpFolder.group === (<FoldersItemsMenuGroup>folderItem).groupname) {
-                        total = total + self._getTotalCounts(tmpFolder, self);
-                    }
-                });
-            } else {
-                total = total + self._getTotalCounts(folderItem, self);
-            }
-            return total;
-        };
-
-        this.$scope.getCurrentFolderDistributed = ():Array<any> => {
-            let self = this;
-            let states = [];
-            if (this.$scope.folders) {
-                let folderItem:FoldersItemsMenu = this.$scope.folders.getCurrentFolder();
-                if (folderItem.isGroup()) {
-                    this.$scope.folders.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) {
-                        if (tmpFolder.group && tmpFolder.group === (<FoldersItemsMenuGroup>folderItem).groupname) {
-                            self._setStates(tmpFolder, states);
-                        }
-                    });
-                } else {
-                    self._setStates(folderItem, states);
-                }
-            }
-            return states;
-        };
-
-        this.$scope.setSelectedFolder = (folderItem:FoldersItemsMenu):void => {
-            this.$scope.folders.setSelected(folderItem);
-        };
-
-        this.$scope.goToComponent = (component:Component):void => {
-            this.$scope.isLoading = true;
-            this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()});
-        };
-
-        this.$scope.raiseNumberOfElementToDisplay = ():void => {
-            this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35;
-            if (this.$scope.components) {
-                this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length;
-            }
-        };
-
-        this.$scope.updateSearchTerm = (newTerm: string):void => {
-            this.$scope.filterParams.searchTerm = newTerm;
-        };
-
-        this.$scope.changeFilterParams = ():void => {
-            this.$state.go('.', this.$scope.filterParams.toParam(), {location: 'replace', notify: false});
-        };
-    };
-
-    private _getTotalCounts(tmpFolder, self):number {
-        let total:number = 0;
-        if (tmpFolder.dist !== undefined) {
-            let distributions = tmpFolder.dist.split(',');
-            distributions.forEach((item:any) => {
-                total = total + self.getEntitiesByStateDist(tmpFolder.state, item).length;
-            });
-        }
-        else {
-            total = total + self.getEntitiesByStateDist(tmpFolder.state, tmpFolder.dist).length;
-        }
-        return total;
-    }
-
-    private _setStates(tmpFolder, states) {
-        if (tmpFolder.states !== undefined) {
-            tmpFolder.states.forEach(function (item:any) {
-                states.push({"state": item.state, "dist": item.dist});
-            });
-        } else {
-            states.push({"state": tmpFolder.state, "dist": tmpFolder.dist});
-        }
-    }
-
-    private initEntities = (forceReload?:boolean):void => {
-
-        if(forceReload || this.componentShouldReload()){
-            this.$scope.isLoading = true;
-            this.entityService.getAllComponents(true).then(
-                (components:Array<Component>) => {
-                    this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name);  //dashboard
-                    this.cacheService.set('breadcrumbsComponents', components);
-                    this.components = components;
-                    this.$scope.components = components;
-                    this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length;
-                    this.$scope.isLoading = false;
-                });
-        } else {
-            this.components = this.cacheService.get('breadcrumbsComponents');
-            this.$scope.components = this.components;
-            this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length;
-            
-        }
-    
-    };
-
-    private isDefaultFilter = (): boolean => {
-        let defaultFilter = new DashboardFilter();
-        return angular.equals(defaultFilter, this.$scope.filterParams);
-    }
-
-    private componentShouldReload = ():boolean => {
-        let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents'));
-        return !breadcrumbsValid || this.isDefaultFilter();
-    }
-
-    private getEntitiesByStateDist = (state:string, dist:string):Array<Component> => {
-        let gObj:Array<Component>;
-        if (this.components && (state || dist)) {
-            gObj = this.components.filter(function (obj:Component) {
-                if (dist !== undefined && obj.distributionStatus === dist && obj.lifecycleState === state) {
-                    return true;
-                } else if (dist === undefined && obj.lifecycleState === state) {
-                    return true;
-                }
-                return false;
-            });
-        } else {
-            gObj = [];
-        }
-        return gObj;
-    }
-}
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
deleted file mode 100644
index 240a74d292..0000000000
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
+++ /dev/null
@@ -1,109 +0,0 @@
-
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-<div class="sdc-catalog-container">
-    <loader data-display="isLoading"></loader>
-    <!-- HEADER -->
-<!--
-    <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header>
--->
-
-    <div class="w-sdc-main-container">
-
-        <perfect-scrollbar id="dashboard-main-scroll" include-padding="true" class="w-sdc-main-right-container">
-
-            <div infinite-scroll-disabled='isAllItemDisplay' infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#dashboard-main-scroll'" infinite-scroll-distance="'0.2'" infinite-scroll-parent>
-
-                <div class='w-sdc-row-flex-items'>
-
-                    <!-- ADD Component -->
-                    <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new"
-                        data-ng-mouseleave="displayActions = false"
-                        data-ng-mouseover="displayActions = true"
-                        data-ng-init="displayActions = false">
-                        <div class="w-sdc-dashboard-card-new-content" data-tests-id="AddButtonsArea">
-                            <div class="w-sdc-dashboard-card-new-content-plus" data-ng-show="!displayActions"></div>
-                            <div class="sdc-dashboard-create-element-container" data-ng-show="displayActions">
-                                <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createResourceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('RESOURCE')">Add VF</button>
-                                <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createCRButton" class="tlv-btn outline blue" data-ng-click="createCR()">Add CR</button>
-                                <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createPNFButton" class="tlv-btn outline blue" data-ng-click="createPNF()">Add PNF</button>
-                                <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createServiceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('SERVICE')">Add Service</button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Import Component -->
-                    <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new"
-                        data-ng-mouseleave="displayActions = false"
-                        data-ng-mouseover="displayActions = true"
-                        data-ng-init="displayActions = false">
-                        <div class="w-sdc-dashboard-card-new-content" data-tests-id="importButtonsArea"  >
-                            <div class="w-sdc-dashboard-card-import-content-plus" data-ng-show="!displayActions"></div>
-                            <div class="sdc-dashboard-import-element-container" data-ng-show="displayActions">
-                                <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue">Import VFC
-                                    <file-opener on-file-upload="onImportVfc(file)" data-tests-id="importVFCbutton" extensions="{{sdcConfig.toscaFileExtension}}" data-ng-click="displayActions=false"></file-opener>
-                                </div>
-                                <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue" data-ng-click="notificationIconCallback()">Import VSP</div>
-                                <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue import-dcae">Import DCAE asset
-                                    <file-opener on-file-upload="onImportVf(file)" data-tests-id="importVFbutton" extensions="{{sdcConfig.csarFileExtension}}" data-ng-click="displayActions=false"></file-opener>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Tile new -->
-                    <ng2-ui-tile data-ng-repeat="component in components | filter:{resourceType:('!'+vfcmtType)} | entityFilter:filterParams.checkboxes | filter:filterParams.searchTerm | limitTo:numberOfItemToDisplay"
-                        [component]="component" (on-tile-click)="goToComponent(component)"></ng2-ui-tile>
-                    <!-- Tile new -->
-
-                </div>
-
-            </div>
-
-        </perfect-scrollbar>
-
-        <div class="w-sdc-left-sidebar">
-            <div class="i-sdc-left-sidebar-item "
-                 data-ng-repeat="folder in folders.getFolders()"
-                 data-ng-class="{'category-title': folder.isGroup(), 'selectedLink': folder.isSelected()}"
-                 >
-                <span data-ng-if="folder.isGroup()">{{folder.text}}</span>
-
-                <ng1-checkbox data-ng-if="!folder.isGroup() && !folder.dist"
-                              elem-id="checkbox-{{folder.text | lowercase | clearWhiteSpaces}}"
-                              sdc-checklist-model="filterParams.checkboxes.selectedStatuses"
-                              sdc-checklist-value="folder.state"
-                              sdc-checklist-change="changeFilterParams()"
-                              text="{{folder.text}}"></ng1-checkbox>
-
-                <ng1-checkbox data-ng-if="!folder.isGroup() && folder.dist"
-                              elem-id="checkbox-{{folder.text | lowercase | clearWhiteSpaces}}"
-                              sdc-checklist-model="filterParams.checkboxes.distributed"
-                              sdc-checklist-value="folder.dist"
-                              sdc-checklist-change="changeFilterParams()"
-                              text="{{folder.text}}"></ng1-checkbox>
-                <span class="i-sdc-left-sidebar-item-state-count">{{entitiesCount(folder)}}</span>
-            </div>
-        </div>
-
-    </div>
-
-    <top-nav [top-lvl-selected-index]="0" [version]="version" [search-term]="filterParams.searchTerm" (search-term-change)="updateSearchTerm($event);changeFilterParams()" [notification-icon-callback]="notificationIconCallback"></top-nav>
-
-</div>
-<div data-ui-view=""></div>
-
-
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard.less b/catalog-ui/src/app/view-models/dashboard/dashboard.less
deleted file mode 100644
index 02280cdb42..0000000000
--- a/catalog-ui/src/app/view-models/dashboard/dashboard.less
+++ /dev/null
@@ -1,413 +0,0 @@
-.sdc-dashboard-container {
-    .tlv-loader {
-        top: -110px;
-        left: 80px;
-    }
-    .sdc-hide-popover {
-        .popover {
-            display: none !important;
-        }
-    }
-}
-
-.w-sdc-left-sidebar-nav {
-    margin-top: 46px;
-}
-
-.w-sdc-main-right-container-element {
-    float: left;
-    height: 217px;
-    width: 217px;
-    margin: 10px;
-    position: relative;
-}
-
-.w-sdc-main-right-container-element-details-container {
-    position: absolute;
-    top: 165px;
-    left: 50px;
-}
-
-.w-sdc-main-right-container-element-name {
-    font-weight: bold;
-}
-
-.w-sdc-main-right-container-element-owner {
-
-}
-
-//////////////////////////////Cards////////////////////
-.w-sdc-dashboard-card-new {
-    border: 2px dashed @color_m;
-    .border-radius(2px);
-    cursor: pointer;
-    display: inline-block;
-    height: 198px;
-    margin: 11px;
-    position: relative;
-    vertical-align: middle;
-    width: 202px;
-}
-
-.w-sdc-dashboard-card-new-content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    height: 100%;
-}
-
-.w-sdc-dashboard-card-new-content-plus {
-    .sprite-new;
-    .add-icon;
-    position: relative;
-    margin-bottom: 20px;
-
-    &:after {
-        .n_14_m;
-        content: 'ADD';
-        position: absolute;
-        top: 25px;
-        left: -3px;
-        vertical-align: -50%;
-    }
-}
-
-.w-sdc-dashboard-card-import-content-plus {
-    .sprite-new;
-    .import-icon;
-    position: relative;
-    margin-bottom: 20px;
-
-    &:after {
-        .n_14_m;
-        content: 'IMPORT';
-        position: absolute;
-        top: 25px;
-        left: -16px;
-        vertical-align: -50%;
-    }
-}
-
-.sdc-dashboard-create-element-container,
-.sdc-dashboard-import-element-container {
-
-    width: 140px;
-
-    .tlv-btn.import-dcae {
-        padding: 0;
-    }
-
-    .tlv-btn {
-        position: relative;
-        width: 100%;
-        margin-bottom: 10px;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    input[type="file"] {
-        cursor: inherit;
-        filter: alpha(opacity=0);
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 138px;
-        height: 30px;
-    }
-}
-
-.w-sdc-dashboard-card {
-    width: 204px;
-    height: 200px;
-    background-color:  @main_color_p;
-    .border-radius(2px);
-    .box-shadow(0px 2px 2px 0px rgba(24, 24, 25, 0.05));
-    display: inline-block;
-    margin: 10px;
-    position: relative;
-    vertical-align: middle;
-    border: solid 1px @main_color_p;
-
-    &:hover {
-        border: solid 1px @main_color_o;
-        .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
-    }
-
-    &:active {
-        border: solid 1px @main_color_c;
-        .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
-    }
-}
-
-.w-sdc-dashboard-card-body {
-    .hand;
-    border-bottom: 1px solid @color_j;
-    height: 155px;
-    position: relative;
-    text-align: center;
-}
-
-.w-sdc-dashboard-card-description {
-    .c_3;
-    .hand;
-    background-color: rgba(57, 73, 84, 0.9);
-    border-radius: 4px 4px 0 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    padding: 10px;
-    position: absolute;
-    right: 0;
-    text-align: left;
-    top: 0;
-    word-wrap: break-word;
-    z-index: 4;
-    min-height: 100px;
-    overflow: hidden;
-}
-
-
-.w-sdc-dashboard-card-schema {
-    margin-top: 30px;
-}
-
-.w-sdc-dashboard-card-edit {
-    .hand;
-    position: absolute;
-    right: 13px;
-    top: 15px;
-    z-index: 2;
-}
-
-.w-sdc-dashboard-card-footer {
-    padding: 3px 12px 10px 12px;
-    position: relative;
-}
-
-.w-sdc-dashboard-card-avatar {
-    .uppercase;
-    border-radius: 50%;
-    display: inline-block;
-    position: absolute;
-    left: -6px;
-    text-align: center;
-    top: -6px;
-
-    span {
-
-        background-color: @main_color_p;
-        .border-radius(15px);
-        color: @color_c;
-        content: '';
-        height: 30px;
-        text-align: center;
-        display: block;
-        border: solid 2px #ECEFF3;
-        padding: 3px 10px 2px 10px;
-
-        &.VF {
-            .j_14_m;
-            &::before {
-                content: 'VF';
-            }
-        }
-
-        &.VFC {
-            .j_14_m;
-            &::before {
-                content: 'VFC';
-            }
-        }
-
-        &.CP {
-            .j_14_m;
-            &::before {
-                content: 'CP';
-            }
-        }
-
-        &.VL {
-            .j_14_m;
-            &::before {
-                content: 'VL';
-            }
-        }
-
-        &.SERVICE {
-            .c_14_m;
-            &::before {
-                content: 'S';
-            }
-        }
-
-        &.green {
-            .d_12;
-            &::before {
-                content: 'R';
-            }
-        }
-        &.red {
-            .r_12;
-            &::before {
-                content: 'S';
-            }
-        }
-        &.dblack {
-            .s_12;
-            &::before {
-                content: 'P';
-            }
-        }
-    }
-}
-
-.w-sdc-dashboard-card-info {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 165px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.w-sdc-dashboard-card-info-name-container{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    margin: 0 0 2px 10px;
-}
-.w-sdc-dashboard-card-info-name {
-    .m_14_m;
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 165px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.w-sdc-dashboard-card-info-lifecycleState {
-    .m_13_m;
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 165px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.w-sdc-dashboard-card-info-user {
-    .n_13_r;
-    line-height: 18px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-}
-
-.w-sdc-dashboard-card-menu-button {
-    display: inline-block;
-    padding: 12px 0 0 10px;
-    position: absolute;
-    right: 12px;
-    top: 8px;
-    border-left: solid 1px @color_k;
-    height: 42px;
-
-    &:hover {
-        .w-sdc-dashboard-card-menu {
-            display: block;
-        }
-    }
-}
-
-.w-sdc-dashboard-card-menu {
-    .bg_c;
-    border-radius: 0 0 4px 4px;
-    border-top: 3px solid @color_a;
-    box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
-    color: @color_s;
-    display: none;
-    min-height: 30px;
-    padding: 9px 0;
-    position: absolute;
-    right: -27px;
-    width: 208px;
-    z-index: 9;
-    max-height: 164px;
-
-    &::before {
-        //TODO: Missing image for small blue triangle.
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
-        content: '';
-        display: block;
-        height: 21px;
-        position: absolute;
-        right: 24px;
-        top: -24px;
-        width: 184px;
-        background-repeat: no-repeat;
-        background-position: 175px 16px;
-    }
-}
-
-.i-sdc-dashboard-card-menu-item {
-    .hand;
-    line-height: 24px;
-    padding: 0 10px;
-    &:hover { .a_7; }
-}
-
-.w-sdc-dashboard-card-info-lifecycleState-icon{
-    position:absolute;
-    bottom:18px;
-    right:10px;
-}
-
-// Same for dashboard and catalog view.
-.w-sdc-dashboard-card-schema-image {
-    position: absolute;
-    top: 41%;
-
-    //TODO: Israel - remove this after getting the services sprite.
-    height: 45px;
-    width: 53px;
-    background-repeat: no-repeat;
-
-    // Center the icon vertical and horizontal.
-    margin: auto;
-    left: 0;
-    right: 0;
-    top: -10px;
-    bottom: 0;
-}
-
-/* dashboard card main icons */
-.w-sdc-dashboard-card-schema-image.service      { .s-sdc-service }
-.w-sdc-dashboard-card-schema-image.resource     { .s-sdc-resource }
-
-/* dashboard card statuses icons */
-.w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN        { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN; }
-.w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT       { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT; }
-.w-sdc-dashboard-card-edit.CERTIFIED                    { .sprite; .s-sdc-state.CERTIFIED; }
-.w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION      { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION; }
-.w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS    { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS; }
-.w-sdc-dashboard-card-edit.DISTRIBUTED                  { .sprite; .s-sdc-state.DISTRIBUTED; }
-
-.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN   { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.green; }
-.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT  { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.green; }
-.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFIED               { .sprite; .s-sdc-state.CERTIFIED.green; }
-.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.green; }
-.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.green; }
-.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.DISTRIBUTED             { .sprite; .s-sdc-state.DISTRIBUTED.green; }
-
-.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN     { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.red; }
-.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT    { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.red; }
-.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFIED                 { .sprite; .s-sdc-state.CERTIFIED.red; }
-.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION   { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.red; }
-.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.red; }
-.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.DISTRIBUTED               { .sprite; .s-sdc-state.DISTRIBUTED.red; }
diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view-model.ts b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view-model.ts
index 19bc548e74..e6ac97085a 100644
--- a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view-model.ts
+++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view-model.ts
@@ -22,7 +22,7 @@
 import * as _ from "lodash";
 import {MenuItemGroup, MenuItem} from "app/utils";
 import {BreadcrumbsPath, BreadcrumbsMenu} from "../onboard-vendor/onboard-vendor-view-model";
-import {CacheService} from "app/services";
+import {CacheService} from "app/services-ng2";
 import {IUserProperties} from "app/models";
 
 export class TestData {
diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html
index 9dbe289ba2..a1e084108a 100644
--- a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html
+++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div class="sdc-catalog-container">
 
     <loader data-display="gui.isLoading"></loader>
diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app.less b/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
index 71a3101412..1e091e957d 100644
--- a/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
+++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
@@ -76,22 +76,6 @@
             }
         }
 
-        &.READY_FOR_CERTIFICATION {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
-        &.CERTIFICATION_IN_PROGRESS {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
         &.DISTRIBUTED,
         &.TBD {
             .i-sdc-categories-list-item-icon {
diff --git a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view-model.ts b/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view-model.ts
deleted file mode 100644
index 45ebb12351..0000000000
--- a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view-model.ts
+++ /dev/null
@@ -1,379 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {ArtifactModel, Resource, Component} from "app/models";
-import {ArtifactsUtils, FormState, ValidationUtils, ArtifactType} from "app/utils";
-import {CacheService} from "app/services";
-
-export interface IEditArtifactModel {
-    artifactResource:ArtifactModel;
-    artifactTypes:Array<string>;
-    artifactFile:any;
-}
-
-export interface IArtifactResourceFormViewModelScope extends ng.IScope {
-    forms:any;
-    $$childTail:any;
-    isNew:boolean;
-    isLoading:boolean;
-    validationPattern:RegExp;
-    urlValidationPattern:RegExp;
-    labelValidationPattern:RegExp;
-    integerValidationPattern:RegExp;
-    commentValidationPattern:RegExp;
-    artifactType:string;
-    editArtifactResourceModel:IEditArtifactModel;
-    defaultHeatTimeout:number;
-    validExtensions:any;
-    originalArtifactName:string;
-    editForm:ng.IFormController;
-    footerButtons:Array<any>;
-    modalInstanceArtifact:ng.ui.bootstrap.IModalServiceInstance;
-
-    fileExtensions():string;
-    save(doNotCloseModal?:boolean):void;
-    saveAndAnother():void;
-    close():void;
-    getOptions():Array<string>;
-    isDeploymentHeat():boolean;
-    onFileChange():void;
-    setDefaultTimeout():void;
-    openEditEnvParametersModal(artifact:ArtifactModel):void;
-    getFormTitle():string;
-    fileUploadRequired():string;
-    isArtifactOwner():boolean;
-}
-
-export class ArtifactResourceFormViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$uibModalInstance',
-        'artifact',
-        'Sdc.Services.CacheService',
-        'ValidationPattern',
-        'UrlValidationPattern',
-        'LabelValidationPattern',
-        'IntegerValidationPattern',
-        'CommentValidationPattern',
-        'ValidationUtils',
-        '$base64',
-        '$state',
-        'ArtifactsUtils',
-        '$uibModal',
-        'component'
-    ];
-
-    private formState:FormState;
-    private entityId:string;
-
-    constructor(private $scope:IArtifactResourceFormViewModelScope,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private artifact:ArtifactModel,
-                private cacheService:CacheService,
-                private ValidationPattern:RegExp,
-                private UrlValidationPattern:RegExp,
-                private LabelValidationPattern:RegExp,
-                private IntegerValidationPattern:RegExp,
-                private CommentValidationPattern:RegExp,
-                private ValidationUtils:ValidationUtils,
-                private $base64:any,
-                private $state:any,
-                private artifactsUtils:ArtifactsUtils,
-                private $uibModal:ng.ui.bootstrap.IModalService,
-                private component:Component) {
-
-
-        this.entityId = this.component.uniqueId;
-        this.formState = angular.isDefined(artifact.artifactLabel) ? FormState.UPDATE : FormState.CREATE;
-        this.initScope();
-    }
-
-    private initEntity = ():void => {
-        this.$scope.editArtifactResourceModel.artifactResource = this.artifact;
-        this.$scope.originalArtifactName = this.artifact.artifactName;
-    };
-
-
-    private initFooterButtons = ():void => {
-
-        this.$scope.footerButtons = [
-            {'name': 'Done', 'css': 'blue', 'callback': this.$scope.save}
-        ];
-        if (this.$scope.isNew) {
-            this.$scope.footerButtons.push({
-                'name': 'Add Another',
-                'css': 'grey',
-                'disabled': !this.$scope.isNew && 'deployment' === this.$scope.artifactType,
-                'callback': this.$scope.saveAndAnother
-            });
-        }
-    };
-
-    private filterDeploymentArtifactTypeByResourceType = (resourceType:string):any => {
-        let result = {};
-        _.each(this.$scope.validExtensions, function (typeSettings:any, typeName:string) {
-            if (!typeSettings.validForResourceTypes || typeSettings.validForResourceTypes.indexOf(resourceType) > -1) {
-                result[typeName] = typeSettings;
-            }
-        });
-
-        return result;
-    };
-
-    private initArtifactTypes = ():void => {
-
-        let artifactTypes:any = this.cacheService.get('UIConfiguration');
-
-        if ('deployment' === this.$scope.artifactType) {
-
-
-            if ('HEAT_ENV' == this.artifact.artifactType || this.component.selectedInstance) {
-                this.$scope.validExtensions = artifactTypes.artifacts.deployment.resourceInstanceDeploymentArtifacts;
-            } else if (this.component.isResource()) {
-                this.$scope.validExtensions = artifactTypes.artifacts.deployment.resourceDeploymentArtifacts;
-                this.$scope.validExtensions = this.filterDeploymentArtifactTypeByResourceType((<Resource>this.component).resourceType);
-            } else {
-                this.$scope.validExtensions = artifactTypes.artifacts.deployment.serviceDeploymentArtifacts;
-            }
-
-            if (this.$scope.validExtensions) {
-                this.$scope.editArtifactResourceModel.artifactTypes = Object.keys(this.$scope.validExtensions);
-            }
-            this.$scope.defaultHeatTimeout = artifactTypes.defaultHeatTimeout;
-            if (this.$scope.isNew) {
-                let isHeat = 'HEAT_ENV' == this.artifact.artifactType;
-                _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string)=> {
-                    return 'HEAT' == item.substring(0, 4) || (!isHeat && item == "VF_MODULES_METADATA") ||
-                        _.has(ArtifactType.THIRD_PARTY_RESERVED_TYPES, item);
-                });
-            }
-
-        }
-        if (this.$scope.artifactType === 'informational') {
-            this.$scope.editArtifactResourceModel.artifactTypes = artifactTypes.artifacts.other.map((element:any)=> {
-                return element.name;
-            });
-            _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string)=> {
-                return _.has(ArtifactType.THIRD_PARTY_RESERVED_TYPES, item) ||
-                    _.has(ArtifactType.TOSCA, item);
-            })
-        }
-
-        if (this.component.isResource() && (<Resource>this.component).isCsarComponent()) {
-            _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string) => {
-                return this.artifactsUtils.isLicenseType(item);
-            })
-        }
-
-    };
-
-    private initEditArtifactResourceModel = ():void => {
-        this.$scope.editArtifactResourceModel = {
-            artifactResource: null,
-            artifactTypes: null,
-            artifactFile: {}
-        };
-
-        this.initEntity();
-    };
-
-    private initScope = ():void => {
-
-        this.$scope.validationPattern = this.ValidationPattern;
-        this.$scope.urlValidationPattern = this.UrlValidationPattern;
-        this.$scope.labelValidationPattern = this.LabelValidationPattern;
-        this.$scope.integerValidationPattern = this.IntegerValidationPattern;
-        this.$scope.commentValidationPattern = this.CommentValidationPattern;
-        this.$scope.isLoading = false;
-        this.$scope.isNew = (this.formState === FormState.CREATE);
-        this.$scope.artifactType = this.artifactsUtils.getArtifactTypeByState(this.$state.current.name);
-        this.$scope.modalInstanceArtifact = this.$uibModalInstance;
-
-        this.initEditArtifactResourceModel();
-        this.initArtifactTypes();
-
-        // In case of edit, show the file name in browse.
-        if (this.artifact.artifactName !== "" && 'HEAT_ENV' !== this.artifact.artifactType) {
-            this.$scope.editArtifactResourceModel.artifactFile = {};
-            this.$scope.editArtifactResourceModel.artifactFile.filename = this.artifact.artifactName;
-        }
-
-        //scope methods
-        this.$scope.isDeploymentHeat = ():boolean => {
-            return !this.$scope.isNew && this.$scope.artifactType === 'deployment'
-                && this.$scope.editArtifactResourceModel.artifactResource.isHEAT();
-
-        };
-        this.$scope.onFileChange = ():void => {
-            if (this.$scope.editArtifactResourceModel.artifactFile && this.$scope.editArtifactResourceModel.artifactFile.filename) {
-                this.$scope.editArtifactResourceModel.artifactResource.artifactName = this.$scope.editArtifactResourceModel.artifactFile.filename;
-            } else {
-                this.$scope.editArtifactResourceModel.artifactResource.artifactName = this.$scope.originalArtifactName;
-            }
-        };
-        this.$scope.setDefaultTimeout = ():void => {
-            if (this.$scope.isDeploymentHeat() && !this.$scope.editArtifactResourceModel.artifactResource.timeout) {
-                this.$scope.editArtifactResourceModel.artifactResource.timeout = this.$scope.defaultHeatTimeout;
-            }
-
-            if (this.$scope.editArtifactResourceModel.artifactFile && this.$scope.editArtifactResourceModel.artifactFile.filename) {
-                this.$scope.editArtifactResourceModel.artifactFile = {};
-                this.$scope.forms.editForm.myArtifactFile.$setValidity('required', false);
-            }
-        };
-
-        this.$scope.fileExtensions = ():string => {
-            let type:string = this.$scope.editArtifactResourceModel.artifactResource.artifactType;
-            return type && this.$scope.validExtensions && this.$scope.validExtensions[type].acceptedTypes ?
-                this.$scope.validExtensions[type].acceptedTypes.join(',') : "";
-        };
-
-        this.$scope.save = (doNotCloseModal?:boolean):void => {
-            this.$scope.isLoading = true;
-            this.$scope.editArtifactResourceModel.artifactResource.description = this.ValidationUtils.stripAndSanitize(this.$scope.editArtifactResourceModel.artifactResource.description);
-
-            if (!this.$scope.isDeploymentHeat()) {
-                this.$scope.editArtifactResourceModel.artifactResource.timeout = null;
-            }
-
-            if (this.$scope.editArtifactResourceModel.artifactFile) {
-                this.$scope.editArtifactResourceModel.artifactResource.payloadData = this.$scope.editArtifactResourceModel.artifactFile.base64;
-                this.$scope.editArtifactResourceModel.artifactResource.artifactName = this.$scope.editArtifactResourceModel.artifactFile.filename;
-            }
-
-            let onFaild = (response):void => {
-                this.$scope.isLoading = false;
-                console.info('onFaild', response);
-            };
-
-            let onSuccess = (artifactResource:ArtifactModel):void => {
-                this.$scope.isLoading = false;
-                this.$scope.originalArtifactName = "";
-
-                if (this.$scope.isDeploymentHeat()) {
-                    if (artifactResource.heatParameters) {
-                        this.$scope.openEditEnvParametersModal(artifactResource);
-                    }
-                }
-
-                if (!doNotCloseModal) {
-                    this.$uibModalInstance.close();
-                } else {
-                    this.$scope.editArtifactResourceModel.artifactFile = null;
-                    angular.element("input[type='file']").val(null); //  for support chrome when upload the same file
-                    this.artifactsUtils.addAnotherAfterSave(this.$scope);
-                }
-
-            };
-
-            if ('HEAT_ENV' == this.artifact.artifactType) {
-                if (this.component.selectedInstance) {
-                    this.component.uploadInstanceEnvFile(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFaild);
-                } else {
-                    this.component.addOrUpdateArtifact(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFaild);
-
-                }
-            } else if (this.$scope.isArtifactOwner()) {
-                this.component.addOrUpdateInstanceArtifact(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFaild);
-            } else {
-                this.component.addOrUpdateArtifact(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFaild);
-            }
-        };
-
-        this.$scope.isArtifactOwner = ():boolean=> {
-            return this.component.isService() && !!this.component.selectedInstance;
-        };
-
-        this.$scope.saveAndAnother = ():void => {
-            this.$scope.save(true);
-        };
-
-        this.$scope.close = ():void => {
-            this.$uibModalInstance.close();
-        };
-
-        this.$scope.fileUploadRequired = ():string => {
-            if (this.$scope.editArtifactResourceModel.artifactFile.filename) {
-                // This is edit mode
-                return 'false';
-            } else {
-                return 'true';
-            }
-        };
-
-        this.$scope.getFormTitle = ():string => {
-            if ('HEAT_ENV' == this.artifact.artifactType) {
-                return 'Update HEAT ENV';
-            }
-            if (this.$scope.isDeploymentHeat()) {
-                if (!this.$scope.editArtifactResourceModel.artifactResource.artifactChecksum) {
-                    return 'Add HEAT Template';
-                }
-                return 'Update HEAT Template';
-            }
-            if (this.$scope.isNew) {
-                return 'Add Artifact';
-            }
-            return 'Update Artifact';
-        };
-
-        this.$scope.openEditEnvParametersModal = (artifactResource:ArtifactModel):void => {
-
-            let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                templateUrl: '../env-parameters-form/env-parameters-form.html',
-                controller: 'Sdc.ViewModels.EnvParametersFormViewModel',
-                size: 'sdc-md',
-                backdrop: 'static',
-                resolve: {
-                    artifact: ():ArtifactModel => {
-                        return artifactResource;
-                    },
-                    component: ():Component => {
-                        return this.component;
-                    }
-                }
-            };
-
-            let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-            modalInstance
-                .result
-                .then(():void => {
-                });
-        };
-
-        this.$scope.forms = {};
-
-        this.initFooterButtons();
-
-
-        this.$scope.$watch("forms.editForm.$invalid", (newVal, oldVal) => {
-            if(this.$scope.forms.editForm) {
-                this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid;
-                if (this.$scope.isNew) {
-                    this.$scope.footerButtons[1].disabled = this.$scope.forms.editForm.$invalid;
-                }
-            }
-        });
-
-    }
-}
diff --git a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html b/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html
deleted file mode 100644
index 61ebcc8a28..0000000000
--- a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html
+++ /dev/null
@@ -1,185 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstanceArtifact" type="classic" class="sdc-add-artifact" buttons="footerButtons" header="{{getFormTitle()}}" show-close-button="true" get-close-modal-response="close" data-tests-id="sdc-add-artifact">
-
-    <loader data-display="isLoading"></loader>
-
-    <div class="sdc-edit-artifact-form-container"
-         data-ng-class="{'mandatory-artifact': (editArtifactResourceModel.artifactResource.mandatory && artifactType !=='deployment') || artifactType === 'api'}">
-        <form novalidate class="w-sdc-form" name="forms.editForm">
-
-            <!--------------------- ARTIFACT FILE START-------------------->
-            <div class="i-sdc-form-item">
-                <label class="required">Upload File</label>
-                <file-upload id="fileUploadElement"
-                             form-element="forms.editForm"
-                             element-required="{{::fileUploadRequired()}}"
-                             element-name="myArtifactFile"
-                             file-model="editArtifactResourceModel.artifactFile"
-                             extensions="{{fileExtensions()}}"
-                             element-disabled="{{!editArtifactResourceModel.artifactResource.artifactType}}"
-                             data-ng-class="{'error': forms.editForm.myArtifactFile.$dirty && forms.editForm.myArtifactFile.$invalid}"></file-upload>
-
-                <div class="input-error-file-upload" data-ng-show="forms.editForm.myArtifactFile.$dirty && forms.editForm.myArtifactFile.$invalid">
-                    <span ng-show="forms.editForm.myArtifactFile.$error.required  || forms.editForm.myArtifactFile.$error.emptyFile" translate="ADD_ARTIFACT_ERROR_FILE_REQUIRED"></span>
-                    <span ng-show="forms.editForm.myArtifactFile.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
-                    <span ng-if="artifactType === 'deployment'" ng-show="forms.editForm.myArtifactFile.$error.filetype" translate="ADD_ARTIFACT_ERROR_VALID_EXTENSIONS" translate-values="{'extensions': '{{fileExtensions()}}' }"></span>
-                    <span ng-show="forms.editForm.myArtifactFile.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
-                </div>
-            </div>
-            <!--------------------- ARTIFACT FILE END -------------------->
-
-            <div class="w-sdc-form-columns-wrapper">
-
-                <div class="w-sdc-form-column" data-ng-if="artifactType === 'deployment' || (!editArtifactResourceModel.artifactResource.mandatory && artifactType !== 'api')">
-
-                    <div class="i-sdc-form-item"
-                         data-ng-class="{error:(forms.editForm.artifactLabel.$dirty && forms.editForm.artifactLabel.$invalid)}"
-                         data-ng-if="!isDeploymentHeat()">
-                        <label class="i-sdc-form-label required">Artifact Label</label>
-                        <input class="i-sdc-form-input"
-                               data-ng-maxlength="25"
-                               data-ng-model="editArtifactResourceModel.artifactResource.artifactLabel"
-                               type="text"
-                               name="artifactLabel"
-                               data-required
-                               data-ng-model-options="{ debounce: 200 }"
-                               data-ng-pattern="labelValidationPattern"
-                               maxlength="25"
-                               data-ng-disabled="!isNew"
-                               data-tests-id="artifactLabel"
-                               autofocus/>
-
-                        <div class="input-error" data-ng-show="forms.editForm.artifactLabel.$dirty && forms.editForm.artifactLabel.$invalid">
-                            <span ng-show="forms.editForm.artifactLabel.$error.required" translate="ADD_ARTIFACT_ERROR_LABEL_REQUIRED"></span>
-                            <span ng-show="forms.editForm.artifactLabel.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
-                            <span ng-show="forms.editForm.artifactLabel.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        </div>
-
-                    </div>
-
-                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}">
-                        <label class="i-sdc-form-label required">Type</label>
-                        <select class="i-sdc-form-select"
-                                data-required
-                                name="type"
-                                data-ng-disabled="!isNew"
-                                data-ng-change="setDefaultTimeout()"
-                                data-ng-model="editArtifactResourceModel.artifactResource.artifactType"
-                                data-ng-options="type as type for type in editArtifactResourceModel.artifactTypes track by type | uppercase"
-                                data-tests-id="artifacttype">
-                            <option value="">Choose Type</option>
-                        </select>
-
-                        <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid">
-                            <span ng-show="forms.editForm.type.$error.required" translate="ADD_ARTIFACT_ERROR_TYPE_REQUIRED"></span>
-                        </div>
-
-                    </div>
-
-                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.timeout.$dirty && forms.editForm.timeout.$invalid)}" data-ng-if="isDeploymentHeat()">
-                        <label class="i-sdc-form-label">Deployment Timeout (minutes)</label>
-                        <input class="i-sdc-form-input"
-                               data-ng-maxlength="25"
-                               data-ng-model="editArtifactResourceModel.artifactResource.timeout"
-                               type="number"
-                               name="timeout"
-                               min="1"
-                               max="2147483647"
-                               data-ng-disabled="'HEAT_ENV'==editArtifactResourceModel.artifactResource.artifactType"
-                               data-ng-model-options="{ debounce: 200 }"
-                               data-ng-pattern="integerValidationPattern"
-                               data-ng-init="setDefaultTimeout()"
-                               data-ng-change="setDefaultTimeout()"
-                               maxlength="25"
-                               data-tests-id="timeout" />
-
-                        <div class="input-error" data-ng-show="forms.editForm.timeout.$dirty && forms.editForm.timeout.$invalid">
-                            <span ng-show="forms.editForm.timeout.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
-                            <span ng-show="forms.editForm.timeout.$error.pattern" translate="ADD_ARTIFACT_ERROR_TIMEOUT_PATTERN"></span>
-                            <span ng-show="forms.editForm.timeout.$error.min" translate="ADD_ARTIFACT_ERROR_TIMEOUT_MIN"></span>
-                        </div>
-
-                    </div>
-
-                </div><!-- w-sdc-form-column -->
-
-                <div class="w-sdc-form-column i-sdc-form-url" data-ng-if="artifactType==='api'">
-
-                    <div class="i-sdc-form-item"
-                         data-ng-class="{error:(forms.editForm.apiUrl.$dirty && forms.editForm.apiUrl.$invalid)}">
-                        <label class="i-sdc-form-label required">URL</label>
-                        <input class="i-sdc-form-input"
-                               data-ng-maxlength="100"
-                               data-ng-model="editArtifactResourceModel.artifactResource.apiUrl"
-                               data-ng-model-options="{ debounce: 200 }"
-                               type="url"
-                               name="apiUrl"
-                               data-required
-                               ng-pattern="urlValidationPattern"
-                               maxlength="100"
-                               autofocus
-                               invalid-characters=',#?&@$<>~^`\[]{}|")(*!+=;%' />
-
-                        <div class="input-error" data-ng-show="forms.editForm.apiUrl.$dirty && forms.editForm.apiUrl.$invalid">
-                            <span ng-show="forms.editForm.apiUrl.$error.required" translate="ADD_ARTIFACT_ERROR_APIURL_REQUIRED"></span>
-                            <span ng-show="forms.editForm.apiUrl.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
-                            <span ng-show="forms.editForm.apiUrl.$error.url || forms.editForm.apiUrl.$error.pattern || forms.editForm.apiUrl.$error.invalidCharacters" translate="ADD_ARTIFACT_ERROR_APIURL_URL"></span>
-                        </div>
-
-                    </div>
-
-                </div><!-- w-sdc-form-column -->
-
-                <div class="w-sdc-form-column">
-
-                    <div class="i-sdc-form-item"
-                         data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}">
-                        <label class="i-sdc-form-label required">Description</label>
-                        <textarea class="i-sdc-form-textarea"
-                                  data-ng-maxlength="256"
-                                  maxlength="256"
-                                  data-required
-                                  name="description"
-                                  data-ng-model="editArtifactResourceModel.artifactResource.description"
-                                  data-ng-model-options="{ debounce: 200 }"
-                                  data-ng-pattern="commentValidationPattern"
-                                  data-tests-id="description"></textarea>
-
-                        <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid">
-                            <span ng-show="forms.editForm.description.$error.required" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED"></span>
-                            <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
-                            <span ng-show="forms.editForm.description.$error.pattern" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_PATTERN"></span>
-                        </div>
-
-                        <div class="w-sdc-form-column artifact-info" data-ng-show="!isNew && editArtifactResourceModel.artifactResource.esId">
-                            UUID <span data-ng-bind="editArtifactResourceModel.artifactResource.artifactUUID"></span>
-                            <br />
-                            Version <span data-ng-bind="editArtifactResourceModel.artifactResource.artifactVersion"></span>
-                        </div>
-                    </div>
-
-                </div><!-- w-sdc-form-column -->
-
-            </div><!-- w-sdc-form-columns-wrapper -->
-
-            <span class="w-sdc-form-note" data-ng-show="forms.editForm.$invalid && false" translate="LABEL_ALL_FIELDS_ARE_MANDATORY"></span>
-
-        </form>
-    </div>
-</ng1-modal>
-
diff --git a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form.less b/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form.less
deleted file mode 100644
index 1f77958c88..0000000000
--- a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form.less
+++ /dev/null
@@ -1,44 +0,0 @@
-.sdc-edit-artifact-form-container {
-
-    .w-sdc-form-note {
-        .h_9;
-        display: block;
-        position: relative;
-        top: 13px;
-    }
-
-    .i-sdc-form-textarea{
-        min-height: 95px;
-    }
-
-    .i-sdc-form-url {
-        padding-bottom: 0px;
-    }
-
-    &.mandatory-artifact {
-        .w-sdc-form-column {
-            width: 100%;
-            padding: 0;
-            min-height: initial;
-        }
-    }
-    .w-sdc-form .i-sdc-form-item.upload input[type="file"] {
-        display: none
-    }
-
-    .artifact-info {
-        text-align: left;
-        color:  rgb(140, 140, 140);
-        font-size: 13px;
-        margin-top: -10px;
-        margin-bottom: 5px;
-        width: 100%;
-        min-height: initial;
-
-        span {
-            color:  #666666;
-            padding-left: 4px;
-        }
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html
deleted file mode 100644
index 902d564935..0000000000
--- a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html
+++ /dev/null
@@ -1,168 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstanceAttribute" type="classic" class="sdc-edit-attribute-container" buttons="footerButtons"  header="{{isNew ? 'Add' : 'Update' }} Attribute" show-close-button="true">
-
-    <div class="sdc-edit-attribute-form-container" >
-        <form novalidate class="w-sdc-form two-columns" name="forms.editForm" >
-
-            <div class="w-sdc-form-columns-wrapper">
-
-                <div class="w-sdc-form-column">
-
-                    <!-- Name -->
-                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.attributeName.$dirty && forms.editForm.attributeName.$invalid)}">
-                        <label class="i-sdc-form-label required">Name</label>
-                        <input class="i-sdc-form-input"
-                        data-tests-id="attributeName"
-                        data-ng-maxlength="50"
-                        data-ng-disabled="!isNew"
-                        maxlength="50"
-                        data-ng-model="editAttributeModel.attribute.name"
-                        type="text"
-                        name="attributeName"
-                        data-ng-pattern="propertyNameValidationPattern"
-                        data-required
-                        data-ng-model-options="{ debounce: 200 }"
-                        data-ng-change="validateName()"
-                        autofocus />
-                        <div class="input-error" data-ng-show="forms.editForm.attributeName.$dirty && forms.editForm.attributeName.$invalid">
-                            <span ng-show="forms.editForm.attributeName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Attribute name' }"></span>
-                            <span ng-show="forms.editForm.attributeName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span>
-                            <span ng-show="forms.editForm.attributeName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                            <span ng-show="forms.editForm.attributeName.$error.nameExist" translate="NEW_ATTRIBUTE_ERROR_NAME_EXISTS"></span>
-                        </div>
-                    </div>
-
-                    <!-- Description -->
-                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}">
-                        <label class="i-sdc-form-label">Description</label>
-                        <textarea  class="i-sdc-form-textarea"
-                        data-ng-maxlength="256"
-                        data-ng-disabled="editAttributeModel.attribute.readonly"
-                        maxlength="256"
-                        data-ng-pattern="commentValidationPattern"
-                        name="description"
-                        data-ng-model="editAttributeModel.attribute.description"
-                        data-ng-model-options="{ debounce: 200 }"
-                        data-tests-id="description"></textarea>
-                        <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid">
-                            <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
-                            <span ng-show="forms.editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                            <span ng-show="forms.editForm.description.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Description' }"></span>
-                        </div>
-                    </div>
-
-
-                </div>
-
-                <div class="w-sdc-form-column">
-                    <!-- Type -->
-                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}">
-                        <label class="i-sdc-form-label required">Type</label>
-                        <select class="i-sdc-form-select"
-                                data-tests-id="type-field"
-                                data-required
-                                data-ng-disabled="editAttributeModel.attribute.readonly"
-                                name="type"
-                                data-ng-change="onTypeChange()"
-                                data-ng-model="editAttributeModel.attribute.type"
-                                data-ng-options="type for type in editAttributeModel.types">
-                            <option value="">Choose Type</option>
-                        </select>
-                        <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid">
-                            <span ng-show="forms.editForm.type.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Type' }"></span>
-                        </div>
-                    </div>
-
-                    <!-- schema -->
-                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.schema.$dirty && forms.editForm.schema.$invalid)}"
-                         data-ng-if="showSchema()">
-                        <label class="i-sdc-form-label required">Entry Schema</label>
-                        <select class="i-sdc-form-select" ng-if="isSchemaEditable()"
-                        data-required
-                        name="schema"
-                        data-ng-disabled="editAttributeModel.attribute.readonly"
-                        data-ng-change="onTypeChange(false)"
-                        data-ng-model="editAttributeModel.attribute.schema.property.type"
-                        data-ng-options="type for type in editAttributeModel.simpleTypes">
-                        <option value="">Choose Schema Type</option>
-                        </select>
-                        <input class="i-sdc-form-input"
-                               ng-if="!isSchemaEditable()"
-                               data-tests-id="schema"
-                               data-ng-disabled="true"
-                               data-ng-model="editAttributeModel.attribute.schema.property.type"
-                               type="text"
-                               name="schema"/>
-                        <div class="input-error" data-ng-show="forms.editForm.schema.$dirty && forms.editForm.schema.$invalid">
-                            <span ng-show="forms.editForm.schema.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Entry schema' }"></span>
-                        </div>
-                    </div>
-
-                    <!-- Default value -->
-                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}">
-                        <label class="i-sdc-form-label">Default Value</label>
-                        <input class="i-sdc-form-input"
-                               data-tests-id="defaultvalue"
-                               ng-if="!(editAttributeModel.attribute.type == 'boolean')"
-                               data-ng-maxlength="2500"
-                               data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()"
-                               maxlength="2500"
-                               data-ng-model="attributeValue.value"
-                               type="text"
-                               name="value"
-                               data-custom-validation="" data-validation-func="validateUniqueKeys"
-                               data-ng-pattern="validationPattern"
-                               data-ng-model-options="{ debounce: 200 }"
-                               data-ng-change="!forms.editForm.value.$error.pattern && ('integer'==editAttributeModel.attribute.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editAttributeModel.attribute.value)) || onValueChange())"
-                               autofocus />
-                        <select class="i-sdc-form-select"
-                                data-tests-id="booleantype"
-                                ng-if="editAttributeModel.attribute.type == 'boolean'"
-                                data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()"
-                                name="value"
-                                data-ng-change="onValueChange()"
-                                data-ng-model="attributeValue.value">
-                            <option value="true">true</option>
-                            <option value="false">false</option>
-                        </select>
-                        <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid">
-                            <span ng-show="forms.editForm.value.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Default value' }"></span>
-                            <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
-                            <span ng-show="forms.editForm.value.$error.pattern" translate="{{getValidationTranslate()}}"></span>
-                            <span ng-show="forms.editForm.value.$error.customValidation" translate="ATTRIBUTE_EDIT_MAP_UNIQUE_KEYS"></span>
-                        </div>
-                    </div>
-
-                    <!-- hidden -->
-                    <div class="i-sdc-form-item" data-ng-if="isAttributeValueOwner()">
-                        <label class="i-sdc-form-label">Hidden</label>
-                        <input class="i-sdc-form-input"
-                        data-tests-id="hidden"
-                        data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()"
-                        data-ng-model="editAttributeModel.attribute.hidden"
-                        type="checkbox"
-                        name="hidden"/>
-                    </div>
-                </div>
-
-            </div>
-
-        </form>
-    </div>
-
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts
deleted file mode 100644
index 0e4a851aa6..0000000000
--- a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {AttributeModel, Component} from "app/models";
-import {IMapRegex, ValidationUtils, FormState, PROPERTY_TYPES} from "app/utils";
-
-export interface IEditAttributeModel {
-    attribute:AttributeModel;
-    types:Array<string>;
-    simpleTypes:Array<string>;
-}
-
-export class attributeValue {//in order to solve DE226783, we update the value on another obj
-    value:string;
-}
-
-interface IAttributeFormViewModelScope extends ng.IScope {
-    $$childTail:any;
-    forms:any;
-    editForm:ng.IFormController;
-    footerButtons:Array<any>;
-    isService:boolean;
-    editAttributeModel:IEditAttributeModel;
-    modalInstanceAttribute:ng.ui.bootstrap.IModalServiceInstance;
-    isNew:boolean;
-    listRegex:IMapRegex;
-    mapRegex:IMapRegex;
-    propertyNameValidationPattern:RegExp;
-    commentValidationPattern:RegExp;
-    isLoading:boolean;
-    validationPattern:RegExp;
-    attributeValue:attributeValue;
-
-    save():void;
-    close():void;
-    onTypeChange():void;
-    onValueChange():void;
-    isAttributeValueOwner():boolean;
-    validateIntRange(value:string):boolean;
-    validateUniqueKeys(viewValue:string):boolean;
-    getValidationTranslate():string;
-    showSchema():boolean;
-    isSchemaEditable():boolean;
-    validateName():void;
-}
-
-export class AttributeFormViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$uibModalInstance',
-        'attribute',
-        'ValidationUtils',
-        'CommentValidationPattern',
-        'PropertyNameValidationPattern',
-        'component'
-    ];
-
-    private formState:FormState;
-
-
-    constructor(private $scope:IAttributeFormViewModelScope,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private attribute:AttributeModel,
-                private ValidationUtils:ValidationUtils,
-                private CommentValidationPattern:RegExp,
-                private PropertyNameValidationPattern:RegExp,
-                private component:Component) {
-        this.formState = angular.isDefined(attribute.name) ? FormState.UPDATE : FormState.CREATE;
-        this.initScope();
-    }
-
-    private initResource = ():void => {
-        this.$scope.editAttributeModel.attribute = new AttributeModel(this.attribute);
-        if (this.$scope.editAttributeModel.types.indexOf(this.attribute.type) === -1) {//attribute defaulte type is string too?
-            this.attribute.type = "string";
-        }
-    };
-
-    private initEditAttributeModel = ():void => {
-        this.$scope.editAttributeModel = {
-            attribute: null,
-            types: ['integer', 'string', 'float', 'boolean', 'list', 'map'],
-            simpleTypes: ['integer', 'string', 'float', 'boolean']
-        };
-
-        this.initResource();
-    };
-
-    private initScope = ():void => {
-
-        //scope attributes
-        this.$scope.forms = {};
-        this.$scope.propertyNameValidationPattern = this.PropertyNameValidationPattern;
-        this.$scope.commentValidationPattern = this.CommentValidationPattern;
-
-        this.$scope.modalInstanceAttribute = this.$uibModalInstance;
-        this.$scope.listRegex = this.ValidationUtils.getPropertyListPatterns();
-        this.$scope.mapRegex = this.ValidationUtils.getPropertyMapPatterns();
-
-        this.$scope.isNew = (this.formState === FormState.CREATE);
-        this.$scope.isLoading = false;
-        this.$scope.attributeValue = new attributeValue();
-
-        this.initEditAttributeModel();
-        this.setValidationPattern();
-
-        //scope methods
-        this.$scope.save = ():void => {
-            if (!this.$scope.forms.editForm.$invalid) {
-                let attribute:AttributeModel = this.$scope.editAttributeModel.attribute;
-                this.$scope.editAttributeModel.attribute.description = this.ValidationUtils.stripAndSanitize(this.$scope.editAttributeModel.attribute.description);
-                ////if read only - just closes the modal
-                if (this.$scope.editAttributeModel.attribute.readonly && !this.$scope.isAttributeValueOwner()) {
-                    this.$uibModalInstance.close();
-                    return;
-                }
-                this.$scope.isLoading = true;
-                let onAttributeFaild = (response):void => {
-                    console.info('onFaild', response);
-                    this.$scope.isLoading = false;
-                };
-
-                let onAttributeSuccess = (attributeFromBE:AttributeModel):void => {
-                    console.info('onAttributeResourceSuccess : ', attributeFromBE);
-                    this.$scope.isLoading = false;
-                    this.$uibModalInstance.close();
-                };
-
-                //in case we have uniqueId we call update method
-                if (this.$scope.isAttributeValueOwner()) {
-                    attribute.value = this.$scope.attributeValue.value;
-                    this.component.updateInstanceAttribute(attribute).then(onAttributeSuccess, onAttributeFaild);
-                } else {
-                    attribute.defaultValue = this.$scope.attributeValue.value;
-                    this.component.addOrUpdateAttribute(attribute).then(onAttributeSuccess, onAttributeFaild);
-                }
-            }
-        };
-
-        this.$scope.close = ():void => {
-            this.$uibModalInstance.close();
-        };
-
-        this.$scope.validateName = ():void => {
-            let existsAttr:AttributeModel = _.find(this.component.attributes, (attribute:AttributeModel) => {
-                return attribute.name === this.$scope.editAttributeModel.attribute.name;
-            });
-            if (existsAttr) {
-                this.$scope.forms.editForm["attributeName"].$setValidity('nameExist', false);
-            } else {
-                this.$scope.forms.editForm["attributeName"].$setValidity('nameExist', true);
-            }
-
-        };
-
-        this.$scope.onTypeChange = ():void => {
-            this.$scope.editAttributeModel.attribute.value = '';
-            this.$scope.editAttributeModel.attribute.defaultValue = '';
-            this.setValidationPattern();
-        };
-
-        this.$scope.isAttributeValueOwner = ():boolean=> {
-            return this.component.isService() || !!this.component.selectedInstance;
-        };
-
-        this.$scope.onValueChange = ():void => {
-            if (!this.$scope.editAttributeModel.attribute.value) {
-                if (this.$scope.isAttributeValueOwner()) {
-                    this.$scope.editAttributeModel.attribute.value = this.$scope.editAttributeModel.attribute.defaultValue;
-                }
-            }
-        };
-
-
-        this.$scope.validateUniqueKeys = (viewValue:string):boolean => {
-            if (this.$scope.editAttributeModel.attribute.type === 'map') {
-                return this.ValidationUtils.validateUniqueKeys(viewValue);
-            }
-            else {
-                return true; //always valid if not a map
-            }
-        };
-
-        this.$scope.validateIntRange = (value:string):boolean => {
-            return !value || this.ValidationUtils.validateIntRange(value);
-        };
-
-        this.$scope.isSchemaEditable = ():boolean => {
-            let schemaType = this.$scope.editAttributeModel.attribute.schema.property.type;
-            return this.$scope.editAttributeModel.simpleTypes.indexOf(schemaType) > -1 || !schemaType;
-        };
-
-        this.$scope.showSchema = ():boolean => {
-            return ['list', 'map'].indexOf(this.$scope.editAttributeModel.attribute.type) > -1;
-        };
-
-        this.$scope.getValidationTranslate = ():string => {
-            let result = "ATTRIBUTE_EDIT_PATTERN";
-            if (this.$scope.showSchema()) {
-
-                result = "ATTRIBUTE_EDIT_" + this.$scope.editAttributeModel.attribute.type.toUpperCase();
-
-                if (this.$scope.editAttributeModel.attribute.schema.property.type === PROPERTY_TYPES.STRING) {
-                    result += "_STRING";
-                } else if (this.$scope.editAttributeModel.attribute.schema.property.type === PROPERTY_TYPES.BOOLEAN) {
-                    result += "_BOOLEAN";
-                } else {
-                    result += "_GENERIC";
-                }
-            }
-
-            return result;
-        };
-
-        // Add the done button at the footer.
-        this.$scope.footerButtons = [
-            {'name': 'Done', 'css': 'blue', 'callback': this.$scope.save},
-            {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close}
-        ];
-
-        this.$scope.$watchCollection("forms.editForm.$invalid", (newVal, oldVal) => {
-            this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid;
-        });
-
-        this.$scope.attributeValue.value = this.$scope.isAttributeValueOwner() ? this.$scope.editAttributeModel.attribute.value : this.$scope.editAttributeModel.attribute.defaultValue;
-    };
-
-
-    private setValidationPattern = ():void => {
-
-        if (this.$scope.editAttributeModel.attribute.type === 'list') {
-            this.$scope.validationPattern = this.$scope.listRegex[this.$scope.editAttributeModel.attribute.schema.property.type];
-        }
-        else if (this.$scope.editAttributeModel.attribute.type === 'map') {
-            this.$scope.validationPattern = this.$scope.mapRegex[this.$scope.editAttributeModel.attribute.schema.property.type];
-        }
-        else {
-            this.$scope.validationPattern = this.ValidationUtils.getValidationPattern(this.$scope.editAttributeModel.attribute.type);
-        }
-
-    };
-}
diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html
deleted file mode 100644
index b3d64818ba..0000000000
--- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="envParametersModal" type="classic" class="sdc-env-form-container" buttons="buttons" header="{{artifactResource.artifactDisplayName}}" show-close-button="true">
-    <div class="w-sdc-env-form-container">
-        <div class="w-sdc-env-search pull-left">
-            <input type="text" class="w-sdc-env-search-input" placeholder="Search" data-ng-model="searchText" data-tests-id="search-env-param-name"/>
-            <div class="search-icon-container">
-                <span class="w-sdc-search-icon env-search-icon magnification-white"></span>
-            </div>
-        </div>
-        <div class="table-container-flex">
-            <div class="table">
-                <div class="head flex-container">
-                    <div class="table-header head-row flex-item" ng-repeat="header in tableHeadersList track by $index">
-                        <info-tooltip class="header-info" data-ng-if="header.info" class="info-button" info-message-translate="{{header.info}}" direction="left"></info-tooltip>
-                        {{header.title}}
-                    </div>
-                </div>
-                <div class="body">
-                    <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                        <ng-form name="forms.editForm" class="w-sdc-form">
-                            <div data-ng-repeat="parameter in heatParameters| filter:{filterTerm:searchText} track by $index "
-                                 class="flex-container data-row"
-                                data-ng-init="parameter.filterTerm=parameter.name + ' ' + parameter.currentValue + ' ' + parameter.defaultValue + ' ' +parameter.description">
-                                <div class="table-col-general flex-item" data-tests-id="heatParameterName_{{parameter.name}}">
-                                    {{parameter.name}}
-                                    <span class="sprite-new show-desc hand"
-                                          uib-popover-template="templatePopover"
-                                          popover-class="parameter-description-popover top"
-                                          popover-title="Parameter Description"
-                                          popover-placement="top-left"
-                                          popover-is-open="selectedParameter.name == parameter.name"
-                                          popover-trigger="'none'"
-                                          popover-append-to-body="true"
-                                        data-ng-click="openDescPopover(parameter)"></span>
-                                </div>
-
-                                <div class="table-col-general flex-item text">
-                                    <span  data-tests-id="default-value-of-{{parameter.name}}" tooltips tooltip-content="{{parameter.defaultValue}}">{{parameter.defaultValue}}</span>
-                                </div>
-
-                                <!--<div class="table-col-general flex-item">-->
-                                    <!--<input type="text" value="{{parameter.currentValue}}"/>-->
-                                <!--</div>-->
-
-                                <div class="table-col-general flex-item left-column-container">
-
-                                        <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm[parameter.name].$dirty && forms.editForm[parameter.name].$invalid), required: (parameter.defaultValue)}">
-                                            <span class="required-symbol">*</span>
-                                            <div class="input-parameter">
-                                                <input class="i-sdc-form-input" data-ng-class="{error: (forms.editForm[parameter.name].$invalid)}"
-                                                       data-ng-model-options="{ debounce: 200 }"
-                                                       data-ng-model="parameter.currentValue"
-                                                       value="{{parameter.currentValue}}"
-                                                       type="text"
-                                                       name="{{parameter.name}}"
-                                                       data-ng-pattern="getValidationPattern(parameter.type, 'heat')"
-                                                       data-ng-required="parameter.defaultValue"
-                                                       data-ng-change="onValueChanged(parameter)"
-                                                       data-ng-blur="(forms.editForm[parameter.name].$error.required && (parameter.currentValue=parameter.defaultValue))"
-                                                       data-tests-id="value-field-of-{{parameter.name}}"/>
-
-                                                <div class="action-button">
-                                                    <div class="sprite-new revert-param" data-ng-if="parameter.defaultValue" data-ng-click="parameter.currentValue = parameter.defaultValue"
-                                                         data-tests-id="revert-{{parameter.name}}">
-                                                    </div>
-                                                    <div class="sprite-new delete-param"
-                                                         data-ng-if="!parameter.defaultValue"
-                                                         data-ng-disabled="!parameter.currentValue"
-                                                         data-ng-class="{disabled:!parameter.currentValue}"
-                                                         data-ng-click="parameter.currentValue = ''"
-                                                         data-tests-id="delete-{{parameter.name}}">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="input-error" data-ng-show="forms.editForm[parameter.name].$invalid">
-                                                <span ng-show="forms.editForm[parameter.name].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value'}"></span>
-                                                <span ng-show="forms.editForm[parameter.name].$error.pattern && parameter.type==='string'" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                                                <span ng-show="forms.editForm[parameter.name].$error.pattern && !(parameter.type==='string')" translate="VALIDATION_ERROR_TYPE" translate-values="{'type': '{{parameter.type}}'}"></span>
-                                            </div>
-                                        </div>
-
-                                </div>
-
-                            </div>
-                        </ng-form>
-
-                    </perfect-scrollbar>
-                </div>
-            </div>
-        </div>
-        </div>
-    </div>
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less
deleted file mode 100644
index d89ab37030..0000000000
--- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less
+++ /dev/null
@@ -1,177 +0,0 @@
-.sdc-env-form-container{
-    .w-sdc-modal-body{
-        padding: 20px 10px 2px 10px;
-    }
-    .w-sdc-modal-body-content{
-        .b_6;
-        display: block;
-    }
-
-    .env-file-generation-label{
-        .p_9;
-        .bold;
-        margin-bottom: 20px;
-    }
-}
-
-.w-sdc-env-form-container {
-    height: 650px;
-
-    .w-sdc-env-search {
-        padding: 10px 20px 20px 0;
-        white-space: nowrap;
-        position: relative;
-        width: 60%;
-        height: 64px;
-
-        .env-search-icon {
-            top: 9px;
-            right: 11px;
-        }
-
-        .magnification-white {
-            .sprite-new;
-            .search-white-icon;
-            .hand;
-        }
-
-        .search-icon-container {
-            width: 35px;
-            height: 30px;
-            background-color: @main_color_a;
-            white-space: nowrap;
-            float: right;
-            position: relative;
-            bottom: 31px;
-            right: 1px;
-            border-radius: 0px 4px 4px 0px;
-            .hand
-        }
-
-        .w-sdc-env-search-input {
-            border: 1px solid @color_e;
-            .border-radius(4px);
-            height: 32px;
-            margin: 0;
-            padding: 0px 28px 3px 10px;
-            vertical-align: 4px;
-            width: 100%;
-            outline: none;
-            font-style: italic;
-        }
-    }
-
-    .table-container-flex {
-        height: 570px;
-
-        .table {
-            height: 100%;
-            .flex-item:nth-child(1) {
-                flex-grow: 20;
-                .show-desc{
-                    float: right;
-                    top: 10px;
-                    position: relative;
-                }
-            }
-
-            .flex-item:nth-child(2) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(3) {
-                flex-grow: 10;
-            }
-            .scrollbar-container{
-                max-height: 527px;
-            }
-            .left-column-container{
-                .required-symbol {
-                    .m_14_m;
-                    color: #f33;
-                    display: none;
-                    position: relative;
-                    left: -4px;
-                    top: 3px;
-                }
-
-                .i-sdc-form-item{
-                    border-right: none;
-                    margin: 0px;
-
-                    .input-parameter{
-                        border: none;
-                        height: 30px;
-                        width: 254px;
-                        float: right;
-                        input{
-                            .m_13_m;
-                            width: 100%;
-                            display: inline-flex;
-                            padding-right: 33px;
-                        }
-                        .action-button{
-                            border-left: solid 1px @main_color_o;
-                            position: relative;
-                            height: 20px;
-                            width: 25px;
-                            top: -25px;
-                            left: 228px;
-                            padding-left: 6px;
-                            background-color: @main_color_p;
-                            div:not(.disable){
-                                .hand;
-                            }
-                        }
-                    }
-
-                    &.required{
-                        .required-symbol {
-                            display: inline-flex;
-                        }
-                        .input-parameter {
-                            width: 250px;
-                        }
-                        .action-button{
-                            left: 224px;
-                        }
-                    }
-                }
-
-
-
-            }
-        }
-
-        .text{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-        }
-    }
-
-
-    .parameter-description{
-        background-color: @func_color_r;
-        border-left: 4px solid @main_color_a;
-        padding: 10px 30px;
-    }
-}
-
-.header-info{
-    float: right;
-}
-
-.parameter-description-popover{
-    z-index: 1100;
-    min-width: 210px;
-    .arrow{
-        left: 20px !important;
-        border-width: 7px;
-        bottom: -8px !important;
-    }
-    .popover-content{
-        .f-type._13_m;;
-    }
-}
diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts
deleted file mode 100644
index a30fd15c63..0000000000
--- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {ValidationUtils} from "app/utils";
-import {ArtifactModel, HeatParameterModel, Component} from "app/models";
-
-export interface IEnvParametersFormViewModelScope extends ng.IScope {
-    isLoading:boolean;
-    type:string;
-    heatParameters:Array<HeatParameterModel>;
-    forms:any;
-    artifactResource:ArtifactModel;
-    buttons:Array<any>;
-    envParametersModal:ng.ui.bootstrap.IModalServiceInstance;
-    tableHeadersList:Array<any>;
-    selectedParameter:HeatParameterModel;
-    templatePopover:string;
-
-    getValidationPattern(type:string):RegExp;
-    isInstance():boolean;
-    validateJson(json:string):boolean;
-    onValueChanged(parameter: HeatParameterModel):void;
-    close():void;
-    save():void;
-    openDescPopover(selectedParam:HeatParameterModel):void;
-    closeDescriptionPopover():void;
-}
-
-export class EnvParametersFormViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$templateCache',
-        '$state',
-        '$uibModalInstance',
-        'artifact',
-        'ValidationUtils',
-        'component'
-    ];
-
-    constructor(private $scope:IEnvParametersFormViewModelScope,
-                private $templateCache:ng.ITemplateCacheService,
-                private $state:any,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private artifact:ArtifactModel,
-                private ValidationUtils:ValidationUtils,
-                private component:Component) {
-
-
-        this.initScope();
-    }
-
-    private updateInstanceHeat = ():void => {
-        let success = (responseArtifact:ArtifactModel):void => {
-            this.$scope.isLoading = false;
-            this.$uibModalInstance.close();
-        };
-
-        let error = ():void => {
-            this.$scope.isLoading = false;
-            console.info('Failed to load save artifact');
-        };
-
-        this.component.addOrUpdateInstanceArtifact(this.$scope.artifactResource).then(success, error);
-    };
-
-    private initScope = ():void => {
-        this.$scope.forms = {};
-        this.$scope.envParametersModal = this.$uibModalInstance;
-        this.$scope.artifactResource = this.artifact;
-        this.$scope.heatParameters = angular.copy(this.artifact.heatParameters);
-        //if param does not have a value - display the default
-        this.$scope.heatParameters.forEach((heatParam) => {
-            heatParam.currentValue = heatParam.currentValue || heatParam.defaultValue;
-        });
-        this.$scope.tableHeadersList = [
-            {title: "Parameter", property: "name"},
-            {title: "Default Value", property: "defaultValue", info: "DEFAULT_VALUE_INFO"},
-            {title: "Current Value", property: "currentValue", info: "CURRENT_VALUE_INFO"}
-        ];
-
-        this.$templateCache.put("env-parametr-description-popover.html", require('app/view-models/forms/env-parameters-form/env-parametr-description-popover.html'));
-        this.$scope.templatePopover = "env-parametr-description-popover.html";
-
-        this.$scope.getValidationPattern = (validationType:string, parameterType?:string):RegExp => {
-            return this.ValidationUtils.getValidationPattern(validationType, parameterType);
-        };
-
-        this.$scope.validateJson = (json:string):boolean => {
-            if (!json) {
-                return true;
-            }
-            return this.ValidationUtils.validateJson(json);
-        };
-
-        this.$scope.isInstance = ():boolean => {
-            return !!this.component.selectedInstance;
-        };
-
-        this.$scope.save = ():void => {
-            this.$scope.buttons[0].disabled = true;//prevent double click (DE246266)
-            this.$scope.isLoading = true;
-            this.artifact.heatParameters = angular.copy(this.$scope.heatParameters);
-            this.artifact.heatParameters.forEach((parameter:any):void => {
-                if ("" === parameter.currentValue) {
-                    //[Bug 154465] - Update and erase current value field in Env parameters form return empty String ("") instead of null.
-                    parameter.currentValue = null;
-                } else if (parameter.defaultValue && parameter.defaultValue == parameter.currentValue) {
-                    parameter.currentValue = undefined;
-                }
-            });
-
-            if (this.$scope.isInstance()) {
-                this.updateInstanceHeat();
-                return;
-            }
-
-            let success = (responseArtifact:ArtifactModel):void => {
-                this.$scope.isLoading = false;
-                this.$uibModalInstance.close();
-
-            };
-
-            let error = ():void => {
-                this.$scope.isLoading = false;
-                console.info('Failed to load save artifact');
-            };
-
-            this.component.addOrUpdateArtifact(this.$scope.artifactResource).then(success, error);
-        };
-
-        this.$scope.onValueChanged = (parameter: HeatParameterModel):void => {
-            parameter.filterTerm = parameter.name + ' ' + parameter.currentValue + ' ' + parameter.defaultValue + ' ' +parameter.description
-            if('json'==parameter.type){
-                this.$scope.forms.editForm[parameter.name].$setValidity('pattern', this.$scope.validateJson(parameter.currentValue));
-            }
-        }
-
-        this.$scope.close = ():void => {
-            //this.artifact.heatParameters.forEach((parameter:any):void => {
-            //    if (!parameter.currentValue && parameter.defaultValue) {
-            //        parameter.currentValue = parameter.defaultValue;
-            //    }
-            //});
-            this.$uibModalInstance.dismiss();
-        };
-
-        this.$scope.openDescPopover = (selectedParam:HeatParameterModel):void => {
-            this.$scope.selectedParameter = selectedParam;
-        };
-
-        this.$scope.closeDescriptionPopover = ():void => {
-            this.$scope.selectedParameter = null;
-        };
-
-        this.$scope.buttons = [
-            {'name': 'Save', 'css': 'blue', 'callback': this.$scope.save},
-            {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close}
-        ];
-
-        this.$scope.$watch("forms.editForm.$invalid", (newVal, oldVal) => {
-            this.$scope.buttons[0].disabled = this.$scope.forms.editForm.$invalid;
-        });
-
-    };
-}
diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html
deleted file mode 100644
index 6db354a072..0000000000
--- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<div>
-    <span data-tests-id='popover-x-button' data-ng-click='closeDescriptionPopover()' class='tlv-sprite tlv-x-btn close-popover-btn'></span>
-    {{selectedParameter.description}}
-</div>
diff --git a/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts b/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts
deleted file mode 100644
index 56542b9694..0000000000
--- a/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {FormState, PROPERTY_TYPES, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS} from "app/utils";
-import {InputModel} from "app/models";
-
-export  interface IInputEditModel {
-    editInput:InputModel;
-}
-
-export interface IInputFormViewModelScope extends ng.IScope {
-    forms:any;
-    editForm:ng.IFormController;
-    footerButtons:Array<any>;
-    isService:boolean;
-    modalInstanceInput:ng.ui.bootstrap.IModalServiceInstance;
-    isLoading:boolean;
-    inputEditModel:IInputEditModel;
-    myValue:any;
-    maxLength:number;
-
-    save():void;
-    close():void;
-    validateIntRange(value:string):boolean;
-    validateJson(json:string):boolean;
-    getValidationPattern(type:string):RegExp;
-    showSchema():boolean;
-}
-
-export class InputFormViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$uibModalInstance',
-        'ValidationUtils',
-        'input'
-    ];
-
-    private formState:FormState;
-
-
-    constructor(private $scope:IInputFormViewModelScope,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private ValidationUtils:ValidationUtils,
-                private input:InputModel) {
-        this.initScope();
-        this.initMyValue();
-    }
-
-    private initMyValue = ():void => {
-        switch (this.$scope.inputEditModel.editInput.type) {
-            case PROPERTY_TYPES.MAP:
-                this.$scope.myValue = this.$scope.inputEditModel.editInput.defaultValue ? JSON.parse(this.$scope.inputEditModel.editInput.defaultValue) : {'': null};
-                break;
-            case PROPERTY_TYPES.LIST:
-                this.$scope.myValue = this.$scope.inputEditModel.editInput.defaultValue ? JSON.parse(this.$scope.inputEditModel.editInput.defaultValue) : [];
-                break;
-        }
-    };
-
-    private initDefaultValueMaxLength = ():void => {
-        switch (this.$scope.inputEditModel.editInput.type) {
-            case PROPERTY_TYPES.MAP:
-            case PROPERTY_TYPES.LIST:
-                this.$scope.maxLength = this.$scope.inputEditModel.editInput.schema.property.type == PROPERTY_TYPES.JSON ?
-                    PROPERTY_VALUE_CONSTRAINTS.JSON_MAX_LENGTH :
-                    PROPERTY_VALUE_CONSTRAINTS.MAX_LENGTH;
-                break;
-            case PROPERTY_TYPES.JSON:
-                this.$scope.maxLength = PROPERTY_VALUE_CONSTRAINTS.JSON_MAX_LENGTH;
-                break;
-            default:
-                this.$scope.maxLength = PROPERTY_VALUE_CONSTRAINTS.MAX_LENGTH;
-        }
-    };
-
-    private initScope = ():void => {
-        this.$scope.forms = {};
-        this.$scope.modalInstanceInput = this.$uibModalInstance;
-        this.$scope.inputEditModel = {
-            editInput: null
-        };
-        this.$scope.inputEditModel.editInput = this.input;
-        this.initDefaultValueMaxLength();
-
-        //scope methods
-        this.$scope.save = ():void => {
-            if (this.$scope.showSchema()) {
-                this.$scope.inputEditModel.editInput.defaultValue = JSON.stringify(this.$scope.myValue);
-            }
-        };
-
-        this.$scope.close = ():void => {
-            this.$uibModalInstance.close();
-        };
-
-        this.$scope.validateIntRange = (value:string):boolean => {
-            return !value || this.ValidationUtils.validateIntRange(value);
-        };
-
-        this.$scope.validateJson = (json:string):boolean => {
-            if (!json) {
-                return true;
-            }
-            return this.ValidationUtils.validateJson(json);
-        };
-
-        this.$scope.showSchema = ():boolean => {
-            return ['list', 'map'].indexOf(this.$scope.inputEditModel.editInput.type) > -1;
-        };
-
-        this.$scope.getValidationPattern = (type:string):RegExp => {
-            return this.ValidationUtils.getValidationPattern(type);
-        };
-
-        // Add the done button at the footer.
-        this.$scope.footerButtons = [
-            {'name': 'Done', 'css': 'blue', 'callback': this.$scope.save},
-            {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close}
-        ];
-
-        this.$scope.$watchCollection("forms.editForm.$invalid", (newVal, oldVal) => {
-            this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid;
-        });
-
-    };
-}
-
diff --git a/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html b/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html
deleted file mode 100644
index 446a926ed4..0000000000
--- a/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstanceInput" type="classic" class="sdc-edit-input-container" buttons="footerButtons"  header="Update Input" show-close-button="true">
-
-    <div class="sdc-edit-input-form-container" >
-        <form novalidate class="w-sdc-form two-columns" name="forms.editForm" >
-
-            <div class="w-sdc-form-columns-wrapper">
-
-                <div class="w-sdc-form-column">
-
-                    <!-- Name -->
-                    <div class="i-sdc-form-item">
-                        <label class="i-sdc-form-label">Name</label>
-                        <input class="i-sdc-form-input"
-                               data-tests-id="inputName"
-                               data-ng-maxlength="50"
-                               data-ng-disabled="true"
-                               maxlength="50"
-                               data-ng-model="inputEditModel.editInput.name"
-                               type="text"
-                               name="inputName"
-                               autofocus />
-                    </div>
-
-                    <!-- Description -->
-                    <div class="i-sdc-form-item">
-                        <label class="i-sdc-form-label">Description</label>
-                        <textarea  class="i-sdc-form-textarea"
-                                   data-ng-disabled="true"
-                                   name="description"
-                                   data-ng-model="inputEditModel.editInput.description"
-                                   data-tests-id="description"></textarea>
-                    </div>
-
-
-                </div>
-
-                <div class="w-sdc-form-column">
-                        <!-- Type -->
-                    <div class="i-sdc-form-item">
-                        <label class="i-sdc-form-label">Type</label>
-                        <input class="i-sdc-form-input"
-                               data-tests-id="type"
-                               data-ng-disabled="true"
-                               data-ng-model="inputEditModel.editInput.type"
-                               type="text"
-                               name="type"/>
-                    </div>
-                    <!-- schema -->
-                    <div class="i-sdc-form-item"
-                         data-ng-if="showSchema()">
-                        <label class="i-sdc-form-label">Entry Schema</label>
-                        <input class="i-sdc-form-input"
-                               data-tests-id="schema"
-                               data-ng-disabled="true"
-                               data-ng-model="inputEditModel.editInput.schema.property.type"
-                               type="text"
-                               name="schema"/>
-                    </div>
-                    <!-- Default value -->
-                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}">
-                        <label class="i-sdc-form-label">Default Value</label>
-                        <div data-ng-switch="inputEditModel.editInput.type">
-                            <div ng-switch-when="map">
-                                <type-map value-obj-ref="myValue"
-                                          schema-property="inputEditModel.editInput.schema.property"
-                                          parent-form-obj="forms.editForm"
-                                          fields-prefix-name="'input-value-'"
-                                          read-only="true"
-                                          default-value=""
-                                          types="[]"
-                                          max-length="maxLength"></type-map>
-                            </div>
-                            <div ng-switch-when="list">
-                                <type-list value-obj-ref="myValue"
-                                           schema-property="inputEditModel.editInput.schema.property"
-                                           parent-form-obj="forms.editForm"
-                                           fields-prefix-name="'input-value-'"
-                                           read-only="true"
-                                           default-value=""
-                                           types="[]"
-                                           max-length="maxLength"></type-list>
-                            </div>
-                            <div ng-switch-default>
-                                <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}">
-                                    <input class="i-sdc-form-input"
-                                           data-tests-id="defaultvalue"
-                                           ng-if="inputEditModel.editInput.type != 'boolean'"
-                                           data-ng-maxlength="maxLength"
-                                           data-ng-disabled="true"
-                                           maxlength="{{maxLength}}"
-                                           data-ng-model="inputEditModel.editInput.defaultValue"
-                                           type="text"
-                                           name="value"
-                                           data-ng-pattern="getValidationPattern(input.type)"
-                                           data-ng-model-options="{ debounce: 200 }"
-                                           data-ng-change="('json'==inputEditModel.editInput.type && forms.editForm.value.$setValidity('pattern', validateJson(inputEditModel.editInput.defaultValue)))
-                                                        ||(!forms.editForm.value.$error.pattern && ('integer'==inputEditModel.editInput.type && forms.editForm.value.$setValidity('pattern', validateIntRange(inputEditModel.editInput.defaultValue)) || onValueChange()))"
-                                           autofocus />
-                                    <select class="i-sdc-form-select"
-                                            data-tests-id="booleantype"
-                                            ng-if="inputEditModel.editInput.type == 'boolean'"
-                                            data-ng-disabled="true"
-                                            name="value"
-                                            data-ng-model="inputEditModel.editInput.defaultValue">
-                                        <option value="true">true</option>
-                                        <option value="false">false</option>
-                                    </select>
-
-                                    <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid">
-                                        <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span>
-                                        <span ng-show="forms.editForm.value.$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
-
-            </div>
-
-        </form>
-    </div>
-
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html
index e2594bc727..ae96b66641 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <ng1-modal modal="modalPropertyFormBase" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container">
     <loader data-display="isLoading" relative="false" size="medium"></loader>
     <div class="sdc-modal-top-bar" data-ng-if="!isNew">
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
index f5c057e41e..37b1ce75a8 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
@@ -20,12 +20,16 @@
 
 'use strict';
 import * as _ from "lodash";
-import {
-    PROPERTY_TYPES, ModalsHandler, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS, FormState, PROPERTY_DATA} from "app/utils";
-import {DataTypesService} from "app/services";
-import {PropertyModel, DataTypesMap, Component, GroupInstance, PolicyInstance, PropertyBEModel} from "app/models";
-import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
+import { PROPERTY_TYPES, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS, FormState, PROPERTY_DATA } from "app/utils";
+import { DataTypesService } from "app/services";
+import { PropertyModel, DataTypesMap, Component, GroupInstance, PolicyInstance, PropertyBEModel, ComponentMetadata } from "app/models";
+import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance";
 import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+import { SdcUiCommon, SdcUiServices, SdcUiComponents } from "onap-ui-angular";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { Observable } from "rxjs";
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
 
 export interface IEditPropertyModel {
     property:PropertyModel;
@@ -44,7 +48,7 @@ interface IPropertyFormViewModelScope extends ng.IScope {
     propertyNameValidationPattern:RegExp;
     commentValidationPattern:RegExp;
     editPropertyModel:IEditPropertyModel;
-    modalInstanceProperty:ng.ui.bootstrap.IModalServiceInstance;
+    modalInstanceProperty:ng.ui.bootstrap.IModalServiceInstance;    
     currentPropertyIndex:number;
     isLastProperty:boolean;
     myValue:any;
@@ -54,6 +58,7 @@ interface IPropertyFormViewModelScope extends ng.IScope {
     maxLength:number;
     isPropertyValueOwner:boolean;
     isVnfConfiguration:boolean;
+    constraints:string[];
 
     validateJson(json:string):boolean;
     save(doNotCloseModal?:boolean):void;
@@ -82,17 +87,20 @@ export class PropertyFormViewModel {
         'PropertyNameValidationPattern',
         'CommentValidationPattern',
         'ValidationUtils',
-        'component',
+        // 'component',
         '$filter',
-        'ModalsHandler',
+        'ModalServiceSdcUI',
         'filteredProperties',
         '$timeout',
         'isPropertyValueOwner',
         'propertyOwnerType',
         'propertyOwnerId',
-        'ComponentInstanceServiceNg2'
+        'ComponentInstanceServiceNg2',
+        'TopologyTemplateService',
+        'CompositionService',
+        'workspaceService'
     ];
-
+ 
     private formState:FormState;
 
     constructor(private $scope:IPropertyFormViewModelScope,
@@ -103,17 +111,21 @@ export class PropertyFormViewModel {
                 private PropertyNameValidationPattern:RegExp,
                 private CommentValidationPattern:RegExp,
                 private ValidationUtils:ValidationUtils,
-                private component:Component,
+                // private component:Component,
                 private $filter:ng.IFilterService,
-                private ModalsHandler:ModalsHandler,
+                private modalService:SdcUiServices.ModalService,
                 private filteredProperties:Array<PropertyModel>,
                 private $timeout:ng.ITimeoutService,
                 private isPropertyValueOwner:boolean,
                 private propertyOwnerType:string,
                 private propertyOwnerId:string,
-                private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2) {
+                private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2,
+                private topologyTemplateService: TopologyTemplateService,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService) {
 
         this.formState = angular.isDefined(property.name) ? FormState.UPDATE : FormState.CREATE;
+
         this.initScope();
     }
 
@@ -121,8 +133,10 @@ export class PropertyFormViewModel {
         this.$scope.editPropertyModel.property = new PropertyModel(this.property);
         this.$scope.editPropertyModel.property.type = this.property.type ? this.property.type : null;
         this.$scope.editPropertyModel.property.value = this.$scope.editPropertyModel.property.value || this.$scope.editPropertyModel.property.defaultValue;
+        this.$scope.constraints = this.property.constraints && this.property.constraints[0] ? this.property.constraints[0]["validValues"]  : null;
+        
         this.setMaxLength();
-        this.initAddOnLabels();
+
     };
 
     //init property add-ons labels that show up at the left side of the input.
@@ -131,23 +145,13 @@ export class PropertyFormViewModel {
             //the server sends back the normalized name. Remove it (to prevent interference with validation) and set the addon label to the component name directly.
             //Note: this cant be done in properties.ts because we dont have access to the component
             if (this.$scope.editPropertyModel.property.value) {
-                let splitProp = this.$scope.editPropertyModel.property.value.split(new RegExp(this.component.normalizedName + '.', "gi"));
+                let splitProp = this.$scope.editPropertyModel.property.value.split(new RegExp(this.workspaceService.metadata.normalizedName + '.', "gi"));
                 this.$scope.editPropertyModel.property.value = splitProp.pop();
             }
-            this.$scope.editPropertyModel.property.addOn = this.component.name;
+            this.$scope.editPropertyModel.property.addOn = this.workspaceService.metadata.name;
         }
     }
 
-    private initEditPropertyModel = ():void => {
-        this.$scope.editPropertyModel = {
-            property: null,
-            types: PROPERTY_DATA.TYPES,
-            simpleTypes: PROPERTY_DATA.SIMPLE_TYPES
-        };
-
-        this.initResource();
-    };
-
     private initForNotSimpleType = ():void => {
         let property = this.$scope.editPropertyModel.property;
         this.$scope.isTypeDataType = this.DataTypesService.isDataTypeForPropertyType(this.$scope.editPropertyModel.property);
@@ -195,20 +199,25 @@ export class PropertyFormViewModel {
         this.$scope.commentValidationPattern = this.CommentValidationPattern;
         this.$scope.isLoading = false;
         this.$scope.isNew = (this.formState === FormState.CREATE);
-        this.$scope.isService = this.component.isService();
+        this.$scope.isService = this.workspaceService.metadata.isService();
         this.$scope.modalInstanceProperty = this.$uibModalInstance;
         this.$scope.currentPropertyIndex = _.findIndex(this.filteredProperties, i=> i.name == this.property.name);
         this.$scope.isLastProperty = this.$scope.currentPropertyIndex == (this.filteredProperties.length - 1);
         this.$scope.dataTypes = this.DataTypesService.getAllDataTypes();
         this.$scope.isPropertyValueOwner = this.isPropertyValueOwner;
         this.$scope.propertyOwnerType = this.propertyOwnerType;
-        this.initEditPropertyModel();
+
+        this.$scope.editPropertyModel = {
+            property : new PropertyModel(this.property),
+            types : PROPERTY_DATA.TYPES,
+            simpleTypes : PROPERTY_DATA.SIMPLE_TYPES}; //All simple types
+
 
         //check if property of VnfConfiguration
         this.$scope.isVnfConfiguration = false;
-        if(this.propertyOwnerType == "component" && angular.isArray(this.component.componentInstances)) {
+        if(this.propertyOwnerType == "component" && angular.isArray(this.compositionService.componentInstances)) {
 
-            var componentPropertyOwner:ComponentInstance = this.component.componentInstances.find((ci:ComponentInstance) => {
+            var componentPropertyOwner:ComponentInstance = this.compositionService.componentInstances.find((ci:ComponentInstance) => {
                 return ci.uniqueId === this.property.resourceInstanceUniqueId;
             });
             if (componentPropertyOwner && componentPropertyOwner.componentName === 'vnfConfiguration') {
@@ -219,6 +228,7 @@ export class PropertyFormViewModel {
         this.$scope.nonPrimitiveTypes = _.filter(Object.keys(this.$scope.dataTypes), (type:string)=> {
             return this.$scope.editPropertyModel.types.indexOf(type) == -1;
         });
+        this.initResource();
         this.initForNotSimpleType();
 
 
@@ -263,10 +273,10 @@ export class PropertyFormViewModel {
 
             //Not clean, but doing this as a temporary fix until we update the property right panel modals
             if(this.propertyOwnerType == "group"){
-                this.ComponentInstanceServiceNg2.updateComponentGroupInstanceProperties(this.component, this.propertyOwnerId, [property])
+                this.ComponentInstanceServiceNg2.updateComponentGroupInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.propertyOwnerId, [property])
                     .subscribe((propertiesFromBE) => { onPropertySuccess(<PropertyModel>propertiesFromBE[0])}, error => onPropertyFaild);
             } else if(this.propertyOwnerType == "policy"){
-                this.ComponentInstanceServiceNg2.updateComponentPolicyInstanceProperties(this.component, this.propertyOwnerId, [property])
+                this.ComponentInstanceServiceNg2.updateComponentPolicyInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.propertyOwnerId, [property])
                     .subscribe((propertiesFromBE) => { onPropertySuccess(<PropertyModel>propertiesFromBE[0])}, error => onPropertyFaild);
             } else {
                 //in case we have uniqueId we call update method
@@ -275,7 +285,7 @@ export class PropertyFormViewModel {
                         let myValueString:string = JSON.stringify(this.$scope.myValue);
                         property.value = myValueString;
                     }
-                    this.component.updateInstanceProperties(property.resourceInstanceUniqueId, [property]).then((propertiesFromBE) => onPropertySuccess(propertiesFromBE[0]), onPropertyFaild);
+                    this.updateInstanceProperties(property.resourceInstanceUniqueId, [property]).subscribe((propertiesFromBE) => onPropertySuccess(propertiesFromBE[0]), onPropertyFaild);
                 } else {
                     if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(property.type)) {
                         let myValueString:string = JSON.stringify(this.$scope.myValue);
@@ -283,7 +293,7 @@ export class PropertyFormViewModel {
                     } else {
                         this.$scope.editPropertyModel.property.defaultValue = this.$scope.editPropertyModel.property.value;
                     }
-                    this.component.addOrUpdateProperty(property).then(onPropertySuccess, onPropertyFaild);
+                    this.addOrUpdateProperty(property).subscribe(onPropertySuccess, onPropertyFaild);
                 }
             }
         };
@@ -362,14 +372,65 @@ export class PropertyFormViewModel {
         };
 
         this.$scope.delete = (property:PropertyModel):void => {
-            let onOk = ():void => {
-                this.component.deleteProperty(property.uniqueId).then(
+            let onOk: Function = ():void => {
+                this.deleteProperty(property.uniqueId).subscribe(
                     this.$scope.close
                 );
             };
             let title:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TITLE");
             let message:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TEXT", "{'name': '" + property.name + "'}");
-            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
+            const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.info, callback: onOk, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+            this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]);
         };
     }
+
+    private updateInstanceProperties = (componentInstanceId:string, properties:PropertyModel[]):Observable<PropertyModel[]> => {
+
+        return this.ComponentInstanceServiceNg2.updateInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, componentInstanceId, properties)
+            .map(newProperties => {
+                newProperties.forEach((newProperty) => {
+                    if(newProperty.path[0] === newProperty.resourceInstanceUniqueId) newProperty.path.shift();
+                    // find exist instance property in parent component for update the new value ( find bu uniqueId & path)
+                    let existProperty: PropertyModel = <PropertyModel>_.find(this.compositionService.componentInstancesProperties[newProperty.resourceInstanceUniqueId], {
+                        uniqueId: newProperty.uniqueId,
+                        path: newProperty.path
+                    });
+                    let index = this.compositionService.componentInstancesProperties[newProperty.resourceInstanceUniqueId].indexOf(existProperty);
+                    this.compositionService.componentInstancesProperties[newProperty.resourceInstanceUniqueId][index] = newProperty;
+                });
+                return newProperties;
+            });
+    };
+
+    private addOrUpdateProperty = (property:PropertyModel):Observable<PropertyModel> => {
+        if (!property.uniqueId) {
+            let onSuccess = (property:PropertyModel):PropertyModel => {
+                let newProperty = new PropertyModel(property);
+                this.filteredProperties.push(newProperty);
+                return newProperty;
+            };
+            return this.topologyTemplateService.addProperty(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, property).map(onSuccess);
+        }
+        else {
+            let onSuccess = (newProperty:PropertyModel):PropertyModel => {
+                // find exist instance property in parent component for update the new value ( find bu uniqueId )
+                let existProperty:PropertyModel = <PropertyModel>_.find(this.filteredProperties, {uniqueId: newProperty.uniqueId});
+                let propertyIndex = this.filteredProperties.indexOf(existProperty);
+                this.filteredProperties[propertyIndex] = newProperty;
+                return newProperty;
+            };
+            return this.topologyTemplateService.updateProperty(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, property).map(onSuccess);
+        }
+    };
+
+    public deleteProperty = (propertyId:string):Observable<void> => {
+        let onSuccess = ():void => {
+            console.log("Property deleted");
+            delete _.remove(this.filteredProperties, {uniqueId: propertyId})[0];
+        };
+        let onFailed = ():void => {
+            console.log("Failed to delete property");
+        };
+        return this.topologyTemplateService.deleteProperty(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, propertyId).map(onSuccess, onFailed);
+    };
 }
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
index 1f484160da..7c29d98641 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <ng1-modal modal="modalInstanceProperty" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container">
     <loader data-display="isLoading" relative="false" size="medium"></loader>
     <div class="sdc-modal-top-bar" data-ng-if="!isNew">
@@ -160,8 +159,11 @@
                                  fields-prefix-name="currentPropertyIndex"
                                  read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration"
                                  default-value="{{getDefaultValue()}}"
-                                 max-length="maxLength"></type-map>
+                                 max-length="maxLength"
+                                 constraints = "editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues">
+                            </type-map>
                         </div>
+                        
                         <div ng-switch-when="list">
                             <type-list value-obj-ref="myValue"
                                   schema-property="editPropertyModel.property.schema.property"
@@ -169,14 +171,36 @@
                                   fields-prefix-name="currentPropertyIndex"
                                   read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
                                   default-value="{{getDefaultValue()}}"
-                                  max-length="maxLength"></type-list>
+                                  max-length="maxLength"
+                                  constraints = "editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"></type-list>
                         </div>
+                        
                         <div ng-switch-default>
                             <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid), 'input-group' : editPropertyModel.property.addOn}">
                                 <span ng-if="editPropertyModel.property.addOn" class="input-group-addon">{{editPropertyModel.property.addOn}}</span>
+                                <!-- Has Constraints -->
+                                <select class="i-sdc-form-select"
+                                        data-tests-id="constraints"
+                                        ng-if="(editPropertyModel.property.constraints)"
+                                        data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
+                                        
+                                        data-ng-change="onValueChange()"
+                                        data-ng-model="editPropertyModel.property.value">
+                                    <!-- Get the default value in case exist -->
+                                    <option value = "{{editPropertyModel.property.value}}" name = "{{editPropertyModel.property.value}}" hidden selected>
+                                            {{editPropertyModel.property.value}}
+                                    </option> 
+                                    <!-- add all constratint to Select list -->
+                                    <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}">
+                                        {{value}}
+                                    </option> 
+                                </select>
+                               
+                                
+                                <!-- No Constraints -->
                                 <input class="i-sdc-form-input"
                                        data-tests-id="defaultvalue"
-                                       ng-if="!((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')"
+                                       ng-if="!(editPropertyModel.property.constraints) && !((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')"
                                        data-ng-maxlength="maxLength"
                                        data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
                                        maxlength="{{maxLength}}"
@@ -189,6 +213,7 @@
                                                         ||(!forms.editForm.value.$error.pattern && ('integer'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editPropertyModel.property.value)) || onValueChange()))"
                                        data-ng-change=""
                                        autofocus />
+                                <!-- Boolean -->
                                 <select class="i-sdc-form-select"
                                         data-tests-id="booleantype"
                                         ng-if="(editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean'"
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-view.html b/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-view.html
index 57e70db698..7f47b3e63e 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div class="default-value-section i-sdc-form-item">
     <label class="i-sdc-form-label">Default Value</label>
     <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}">
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view.html b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view.html
index 33fef0351e..d22741f81a 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div data-ng-if="dataTypes" class="default-value-section i-sdc-form-item">
     <label class="i-sdc-form-label">Default Value</label>
     <div data-ng-if="isTypeDataType">
diff --git a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts b/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts
deleted file mode 100644
index 67d135c575..0000000000
--- a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {ComponentInstanceFactory} from "app/utils";
-import {ComponentInstance} from "app/models";
-import {Requirement, Component, Capability} from "app/models";
-
-interface IResourceInstanceViewModelScope extends ng.IScope {
-
-    componentInstanceModel:ComponentInstance;
-    validationPattern:RegExp;
-    oldName:string;
-    isAlreadyPressed:boolean;
-    footerButtons:Array<any>;
-    forms:any;
-    modalInstanceName:ng.ui.bootstrap.IModalServiceInstance;
-
-    save():void;
-    close():void;
-}
-
-export class ResourceInstanceNameViewModel {
-
-    static '$inject' = [
-        '$scope',
-        'ValidationPattern',
-        '$uibModalInstance',
-        'component'
-    ];
-
-
-    constructor(private $scope:IResourceInstanceViewModelScope,
-                private ValidationPattern:RegExp,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private component:Component) {
-
-        this.initScope();
-    }
-
-
-    private initScope = ():void => {
-        this.$scope.forms = {};
-        this.$scope.validationPattern = this.ValidationPattern;
-        this.$scope.componentInstanceModel = ComponentInstanceFactory.createComponentInstance(this.component.selectedInstance);
-        this.$scope.oldName = this.component.selectedInstance.name;
-        this.$scope.modalInstanceName = this.$uibModalInstance;
-
-        this.$scope.isAlreadyPressed = false;
-
-
-        this.$scope.close = ():void => {
-            this.$uibModalInstance.dismiss();
-        };
-
-        this.$scope.save = ():void => {
-
-            let onFailed = () => {
-                this.$scope.isAlreadyPressed = true;
-            };
-
-            let onSuccess = (componentInstance:ComponentInstance) => {
-                this.$uibModalInstance.close();
-                this.$scope.isAlreadyPressed = false;
-                this.$scope.componentInstanceModel = componentInstance;
-                //this.component.name = componentInstance.name;//DE219124
-                this.component.selectedInstance.name = componentInstance.name;
-                //update requirements and capabilities owner name
-                _.forEach(this.component.selectedInstance.requirements, (requirementsArray:Array<Requirement>) => {
-                    _.forEach(requirementsArray, (requirement:Requirement):void => {
-                        requirement.ownerName = componentInstance.name;
-                    });
-                });
-
-                _.forEach(this.component.selectedInstance.capabilities, (capabilitiesArray:Array<Capability>) => {
-                    _.forEach(capabilitiesArray, (capability:Capability):void => {
-                        capability.ownerName = componentInstance.name;
-                    });
-                });
-
-            };
-
-            this.$scope.isAlreadyPressed = true;
-            if (this.$scope.oldName != this.$scope.componentInstanceModel.name) {
-                this.component.updateComponentInstance(this.$scope.componentInstanceModel).then(onSuccess, onFailed);
-            }
-        };
-
-        this.$scope.footerButtons = [
-            {'name': 'OK', 'css': 'blue', 'callback': this.$scope.save},
-            {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close}
-        ];
-
-        this.$scope.$watch("[forms.editNameForm.$invalid,componentInstanceModel.name,isAlreadyPressed]", (newVal, oldVal) => {
-            //if the name is invalid or if user pressed ok and didn't try to change name again or the new name = source name
-            this.$scope.footerButtons[0].disabled = this.$scope.forms.editNameForm.$invalid || (this.$scope.isAlreadyPressed && newVal[1] === oldVal[1]) || this.$scope.componentInstanceModel.name === this.$scope.oldName;
-        });
-    }
-}
diff --git a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-view.html b/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-view.html
deleted file mode 100644
index ec726d040b..0000000000
--- a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-view.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstanceName" type="classic" class="w-sdc-modal-resource-instance-name modal-type-confirmation" buttons="footerButtons" header="Instance Name" show-close-button="true">
-
-    <form novalidate class="w-sdc-form" name="forms.editNameForm">
-        <div class="i-sdc-form-item" data-ng-class="{error:(editNameForm.componentInstanceName.$dirty && editNameForm.resourceInstanceName.$invalid)}">
-            <label class="i-sdc-form-label required">Instance Name</label>
-            <input class="w-sdc-modal-resource-instance-input i-sdc-form-input"
-                   name="componentInstanceName"
-                   data-ng-maxlength="50"
-                   data-ng-model="componentInstanceModel.name"
-                   type="text"
-                   data-required
-                   data-ng-pattern="validationPattern"
-                   maxlength="50"
-                   autofocus
-                   placeholder="Enter instance name..."
-                   data-tests-id="instanceName"
-                />
-
-            <div class="input-error" data-ng-show="forms.editNameForm.componentInstanceName.$dirty && forms.editNameForm.componentInstanceName.$invalid">
-                <span ng-show="forms.editNameForm.componentInstanceName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Resource name' }"></span>
-                <span ng-show="forms.editNameForm.componentInstanceName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                <span ng-show="forms.editNameForm.componentInstanceName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-            </div>
-
-        </div>
-    </form>
-
-</ng1-modal>
-
-
-
-<!--
-
-<div class="w-sdc-modal w-sdc-modal-resource-instance-name">
-    <header>
-        <div class="w-sdc-modal-head">
-            Instance Name
-        </div>
-    </header>
-    <div>
-        <form novalidate class="w-sdc-modal-body w-sdc-form" name="editNameForm">
-            <div class="i-sdc-form-item" data-ng-class="{error:(editNameForm.componentInstanceName.$dirty && editNameForm.resourceInstanceName.$invalid)}">
-                <label class="i-sdc-form-label required">Instance Name</label>
-                <input class="w-sdc-modal-resource-instance-input i-sdc-form-input"
-                       name="componentInstanceName"
-                       data-ng-maxlength="50"
-                       data-ng-model="componentInstanceModel.name"
-                       type="text"
-                       data-required
-                       data-ng-pattern="validationPattern"
-                       maxlength="50"
-                       autofocus
-                       placeholder="Enter instance name..."
-                       data-tests-id="instanceName"
-                    />
-
-                <div class="input-error" data-ng-show="editNameForm.componentInstanceName.$dirty && editNameForm.componentInstanceName.$invalid">
-                    <span ng-show="editNameForm.componentInstanceName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Resource name' }"></span>
-                    <span ng-show="editNameForm.componentInstanceName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                    <span ng-show="editNameForm.componentInstanceName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                </div>
-
-            </div>
-        </form>
-
-        <div class="w-sdc-modal-action">
-            <button class="w-sdc-btn-blue" data-ng-click="save()" type="button" data-ng-disabled="(!componentInstanceModel.name || componentInstanceModel.name === oldName) || isAlreadyPressed">Ok</button>
-            <button class="w-sdc-btn-dark-gray" data-ng-click="close()" type="button">Cancel</button>
-        </div>
-    </div>
-</div>
--->
diff --git a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name.less b/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name.less
deleted file mode 100644
index 57698bef17..0000000000
--- a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name.less
+++ /dev/null
@@ -1,29 +0,0 @@
-.w-sdc-modal-resource-instance-name {
-
-    .w-sdc-modal-body {
-        overflow: visible;
-    }
-
-    .w-sdc-modal-action {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .w-sdc-modal-resource-instance-input {
-        .p_1;
-        border: solid 1px @color_p;
-        height: 45px;
-        padding: 0 20px;
-        margin: 0 auto 0 auto;
-        display: block;
-    }
-    .w-sdc-modal-body {
-        border-bottom: none;
-    }
-
-    .w-sdc-form .i-sdc-form-item.error::after {
-        top: 13px;
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts
deleted file mode 100644
index 7998d10623..0000000000
--- a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {ValidationUtils, ModalType} from "app/utils";
-
-export interface IConfirmationModalModel {
-    title:string;
-    message:string;
-    showComment:boolean;
-    type:ModalType;
-}
-
-interface IConfirmationModalViewModelScope {
-    modalInstanceConfirmation:ng.ui.bootstrap.IModalServiceInstance;
-    confirmationModalModel:IConfirmationModalModel;
-    comment:any;
-    commentValidationPattern:RegExp;
-    editForm:ng.IFormController;
-    okButtonColor:string;
-    hideCancelButton:boolean;
-    ok():any;
-    cancel():void;
-}
-
-export class ConfirmationModalViewModel {
-
-    static '$inject' = ['$scope', '$uibModalInstance', 'confirmationModalModel', 'CommentValidationPattern', 'ValidationUtils'];
-
-    constructor(private $scope:IConfirmationModalViewModelScope,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                confirmationModalModel:IConfirmationModalModel,
-                private CommentValidationPattern:RegExp,
-                private ValidationUtils:ValidationUtils) {
-
-        this.initScope(confirmationModalModel);
-    }
-
-    private initScope = (confirmationModalModel:IConfirmationModalModel):void => {
-        let self = this;
-        this.$scope.hideCancelButton = false;
-        this.$scope.modalInstanceConfirmation = this.$uibModalInstance;
-        this.$scope.confirmationModalModel = confirmationModalModel;
-        this.$scope.comment = {"text": ''};
-        this.$scope.commentValidationPattern = this.CommentValidationPattern;
-
-        this.$scope.ok = ():any => {
-            self.$uibModalInstance.close(this.ValidationUtils.stripAndSanitize(self.$scope.comment.text));
-        };
-
-        this.$scope.cancel = ():void => {
-            console.info('Cancel pressed on: ' + this.$scope.confirmationModalModel.title);
-            self.$uibModalInstance.dismiss();
-        };
-
-        // Set the OK button color according to modal type (standard, error, alert)
-        let _okButtonColor = 'blue'; // Default
-        switch (confirmationModalModel.type) {
-            case ModalType.STANDARD:
-                _okButtonColor = 'blue';
-                break;
-            case ModalType.ERROR:
-                _okButtonColor = 'red';
-                break;
-            case ModalType.ALERT:
-                this.$scope.hideCancelButton = true;
-                _okButtonColor = 'grey';
-                break;
-            default:
-                _okButtonColor = 'blue';
-                break;
-        }
-        this.$scope.okButtonColor = _okButtonColor;
-
-    }
-}
diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html
deleted file mode 100644
index cb9b159e51..0000000000
--- a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstanceConfirmation" type="classic" class="w-sdc-modal-confirmation modal-type-{{confirmationModalModel.type}}" header="{{confirmationModalModel.title}}" show-close-button="true">
-    <form novalidate class="w-sdc-form" name="editForm">
-        <label class="i-sdc-form-label required w-sdc-modal-label" data-ng-bind-html="confirmationModalModel.message"></label>
-
-        <div class="i-sdc-form-item">
-            <textarea class="w-sdc-modal-body-comment"
-                      data-tests-id="checkindialog"
-                      autofocus="autofocus"
-                      data-ng-show="confirmationModalModel.showComment===true"
-                      data-ng-model="comment.text"
-                      placeholder="Comment..."
-                      maxlength="256"
-                      data-required
-                      name="comment1"
-                      data-ng-pattern="commentValidationPattern"
-                      data-ng-maxlength="256"></textarea>
-
-            <div class="input-error" data-ng-show="editForm.comment1.$dirty && editForm.comment1.$invalid">
-                <span ng-show="editForm.comment1.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                <span ng-show="editForm.comment1.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Comment' }"></span>
-            </div>
-        </div>
-    </form>
-    <div class="w-sdc-modal-footer classic">
-        <button class="tlv-btn {{okButtonColor}}" data-tests-id="OK" data-ng-click="ok()" data-ng-disabled="confirmationModalModel.showComment===true && (!comment.text || comment.text && comment.text.length===0)">OK</button>
-        <button class="tlv-btn grey" data-ng-if="hideCancelButton===false" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
-        <!--<button class="tlv-btn blue add-property-add-another" data-ng-if="isNew" data-ng-click="saveAndAnother()" type="reset" data-ng-disabled="editForm.$invalid">Add Another</button>-->
-    </div>
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less
deleted file mode 100644
index 666c41d5ed..0000000000
--- a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less
+++ /dev/null
@@ -1,30 +0,0 @@
-.w-sdc-modal-confirmation {
-    form.w-sdc-form{
-        padding: 0;
-    }
-
-    .w-sdc-modal-body-content {
-        .b_6;
-        word-break: break-word;
-
-    }
-    .w-sdc-modal-body {
-        height: auto;
-        /* padding: 47px 60px 20px 60px; */
-        border-bottom: none;
-    }
-    .w-sdc-modal-body-content {
-        padding: 0;
-    }
-    .w-sdc-modal-body-comment {
-        width: 430px;
-        height: 127px;
-        border: solid 1px @color_e;
-        margin: 20px 0 0 0;
-        padding: 15px;
-    }
-    .w-sdc-modal-label {
-        .m_14_r;
-        text-align: left;
-    }
-}
diff --git a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view-model.ts
deleted file mode 100644
index 45696568b4..0000000000
--- a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view-model.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-
-export interface IConformanceLevelModalModelScope {
-    footerButtons:Array<any>;
-    modalInstance:ng.ui.bootstrap.IModalServiceInstance;
-}
-
-export class ConformanceLevelModalViewModel {
-
-    static '$inject' = ['$scope', '$uibModalInstance'];
-
-    constructor(private $scope:IConformanceLevelModalModelScope,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance) {
-
-        this.initScope();
-    }
-
-    private initScope = ():void => {
-
-        this.$scope.modalInstance = this.$uibModalInstance;
-
-        this.$scope.footerButtons = [
-            {'name': 'Continue', 'css': 'grey', 'callback': this.$uibModalInstance.close},
-            {'name': 'Reject', 'css': 'blue', 'callback': this.$uibModalInstance.dismiss}
-        ];
-
-    };
-
-}
diff --git a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html
deleted file mode 100644
index 5ba0425ea2..0000000000
--- a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstance"
-           type="classic"
-           class="w-sdc-modal modal-type-alert conformance-level-modal"
-           header="Warning"
-           buttons="footerButtons"
-           show-close-button="false">
-
-    <perfect-scrollbar include-padding="true">
-        <div class="w-sdc-modal-body-content" data-tests-id="message">
-            <p>
-                You are about to distribute a service with models and artifacts created with an <b>older version of the platform</b>.
-                For such service, new properties, metadata and requirements needed by ECOMP components will not be available.
-            </p><p>
-                It is highly recommended that you upgrade the service models and artifacts.
-            </p><p>
-                Click "Continue" if you need to distribute the current service version.<br />
-                Click "Reject" if you need to stop the distribution and manually upgrade the service.
-            </p>
-        </div>
-    </perfect-scrollbar>
-
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal.less b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal.less
deleted file mode 100644
index 7f195ade83..0000000000
--- a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.conformance-level-modal{
-
-}
diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts
deleted file mode 100644
index 095d1438b2..0000000000
--- a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {IAppConfigurtaion, Component, AsdcComment} from "app/models";
-import {ValidationUtils} from "app/utils";
-
-export interface IEmailModalModel_Email {
-    to:string;
-    subject:string;
-    message:string;
-}
-
-export interface IEmailModalModel_Data {
-    component:Component;
-    stateUrl:string;
-}
-
-export interface IEmailModalModel {
-    title:string;
-    email:IEmailModalModel_Email;
-    data:IEmailModalModel_Data;
-}
-
-interface IEmailModalViewModelScope {
-    modalInstanceEmail:ng.ui.bootstrap.IModalServiceInstance;
-    emailModalModel:IEmailModalModel;
-    submitInProgress:boolean;
-    commentValidationPattern:RegExp;
-    isLoading:boolean;
-    submit():any;
-    cancel():void;
-    validateField(field:any):boolean;
-}
-
-export class EmailModalViewModel {
-
-    static '$inject' = ['$scope', '$filter', 'sdcConfig', '$uibModalInstance', 'emailModalModel', 'ValidationUtils', 'CommentValidationPattern'];
-
-    constructor(private $scope:IEmailModalViewModelScope,
-                private $filter:ng.IFilterService,
-                private sdcConfig:IAppConfigurtaion,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private emailModalModel:IEmailModalModel,
-                private ValidationUtils:ValidationUtils,
-                private CommentValidationPattern:RegExp) {
-
-        this.initScope(emailModalModel);
-    }
-
-    private initScope = (emailModalModel:IEmailModalModel):void => {
-        this.$scope.emailModalModel = emailModalModel;
-        this.$scope.submitInProgress = false;
-        this.$scope.commentValidationPattern = this.CommentValidationPattern;
-        this.$scope.modalInstanceEmail = this.$uibModalInstance;
-
-        this.$scope.submit = ():any => {
-
-            let onSuccess = (component:Component) => {
-                this.$scope.isLoading = false;
-                this.$scope.submitInProgress = false;
-                // showing the outlook modal according to the config json
-                if (this.sdcConfig.showOutlook) {
-                    let link:string = encodeURI(this.sdcConfig.api.baseUrl + "?folder=Ready_For_Testing");
-                    let outlook:string = this.$filter('translate')("EMAIL_OUTLOOK_MESSAGE", "{'to': '" + emailModalModel.email.to + "','subject': '" + emailModalModel.email.subject + "','message': '" + emailModalModel.email.message + "', 'entityNameAndVersion': '" + emailModalModel.email.subject + "','link': '" + link + "'}");
-                    window.location.href = outlook; // Open outlook with the email to send
-                }
-                this.$uibModalInstance.close(component); // Close the dialog
-            };
-
-            let onError = () => {
-                this.$scope.isLoading = false;
-                this.$scope.submitInProgress = false;
-                this.$uibModalInstance.close(); // Close the dialog
-            };
-
-            // Submit to server
-            // Prevent from user pressing multiple times on submit.
-            if (this.$scope.submitInProgress === false) {
-                this.$scope.isLoading = true;
-                this.$scope.submitInProgress = true;
-                let comment:AsdcComment = new AsdcComment();
-                comment.userRemarks = emailModalModel.email.message;
-                emailModalModel.data.component.changeLifecycleState(emailModalModel.data.stateUrl, comment).then(onSuccess, onError);
-            }
-        };
-
-        this.$scope.cancel = ():void => {
-            this.$uibModalInstance.dismiss();
-        };
-
-        this.$scope.validateField = (field:any):boolean => {
-            if (field && field.$dirty && field.$invalid) {
-                return true;
-            }
-            return false;
-        };
-    }
-}
diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html
deleted file mode 100644
index 612fe226aa..0000000000
--- a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstanceEmail" type="classic" class="w-sdc-modal-email modal-type-standard" header="{{emailModalModel.title}}" show-close-button="true">
-    <loader data-display="isLoading"></loader>
-    <form novalidate class="w-sdc-form" name="editForm">
-
-            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.to)}">
-                <label class="i-sdc-form-label col-sm-2">To</label>
-                <div class="col-sm-10">
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-model="emailModalModel.email.to"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="255"
-                           data-required
-                           name="to"
-                           id="to"
-                           data-ng-disabled="true"
-                        />
-                </div>
-
-                <div class="input-error" data-ng-show="validateField(editForm.to)" alignToSelector="#to">
-                    <span ng-show="editForm.to.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'To' }"></span>
-                    <span ng-show="editForm.to.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
-                    <span ng-show="editForm.to.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                </div>
-
-            </div>
-
-            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.subject)}">
-                <label class="i-sdc-form-label col-sm-2">Subject</label>
-                <div class="col-sm-10">
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-model="emailModalModel.email.subject"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="255"
-                           data-required
-                           name="subject"
-                           data-ng-disabled="true"
-                        />
-                </div>
-
-                <div class="input-error" data-ng-show="validateField(editForm.subject)">
-                    <span ng-show="editForm.subject.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Subject' }"></span>
-                    <span ng-show="editForm.subject.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
-                    <span ng-show="editForm.subject.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                </div>
-
-            </div>
-
-            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.message)}">
-                <label class="i-sdc-form-label required col-sm-2">Message</label>
-                <div class="col-sm-10">
-                        <textarea class="w-sdc-modal-body-email"
-                                  data-ng-model="emailModalModel.email.message"
-                                  placeholder="{{'EMAIL_MODAL_MESSAGE' | translate }}"
-                                  data-required
-                                  name="message"
-                                  data-ng-pattern="commentValidationPattern"
-                                  maxlength="255"
-                                  data-tests-id="changeLifeCycleMessage"
-                                  data-ng-maxlength="255">
-                        </textarea>
-
-                    <div class="input-error" data-ng-show="validateField(editForm.message)">
-                        <span ng-show="editForm.message.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Message' }"></span>
-                        <span ng-show="editForm.message.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
-                        <span ng-show="editForm.message.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
-                </div>
-
-            </div>
-
-    </form>
-
-    <div class="w-sdc-modal-footer classic">
-        <button class="tlv-btn blue" data-tests-id="OK" data-ng-click="submit()" data-ng-disabled="editForm.$invalid">OK</button>
-        <button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
-    </div>
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less b/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less
deleted file mode 100644
index 471089fa1a..0000000000
--- a/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less
+++ /dev/null
@@ -1,57 +0,0 @@
-.w-sdc-modal-email {
-
-    .w-sdc-modal-body {
-        border-bottom: none;
-    }
-
-    form.w-sdc-form{
-        padding: 0;
-
-        .i-sdc-form-item {
-            clear: both;
-            label {
-                min-height: 30px;
-                padding-top: 4px;
-            }
-
-            .col-sm-10 {
-                padding-right: 0;
-            }
-
-        }
-
-        .w-sdc-modal-body-email {
-            border-style: solid;
-            border-width: 1px;
-            border-color:  @color_e;
-            box-sizing: border-box;
-            width: 100%;
-            height: 127px;
-            margin-bottom: 20px;
-        }
-
-        label {.m_14_m; text-align: left;}
-        input {.m_14_r;}
-        textarea {.m_14_r;}
-        /* I made the subject and to fields as input (for future use), but for now they look like labels: */
-        input:disabled {
-            .bg_c;
-            border: none;
-        }
-    }
-
-    .w-sdc-modal-action {
-        background-color: @main_color_p;
-        padding: 0 13px 0 0;
-        height: 90px;
-        line-height: 65px;
-
-        button {width: 174px;}
-    }
-
-    .w-sdc-form .i-sdc-form-item label.required::before {
-        position: absolute;
-        left: -13px;
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html b/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html
index ba08b51fa3..1cab8adb3b 100644
--- a/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html
+++ b/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div class="sdc-error-403-container" >
     <div  class="sdc-error-403-container-title" translate="GENERAL_ERROR_403_TITLE"></div>
     <div class="w-sdc-error-403-text w-sdc-form" translate="GENERAL_ERROR_403_DESCRIPTION" translate-values="{'mailto': mailto }"></div>
diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html
index 75bc82dcfd..86c776a7ee 100644
--- a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html
+++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <ng1-modal modal="modalIcons" type="classic" class="w-sdc-modal-icons" buttons="footerButtons" header="Choose Icon" show-close-button="true">
 
     <div class="suggested-icons-container">
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts
deleted file mode 100644
index b987f1088e..0000000000
--- a/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {SEVERITY} from "app/utils";
-
-export interface IMessageModalModel {
-    title:string;
-    message:string;
-    severity:SEVERITY;
-}
-
-export interface IMessageModalViewModelScope extends ng.IScope {
-    footerButtons:Array<any>;
-    messageModalModel:IMessageModalModel;
-    modalInstanceError:ng.ui.bootstrap.IModalServiceInstance;
-    ok():void;
-}
-
-export class MessageModalViewModel {
-
-    constructor(private $baseScope:IMessageModalViewModelScope,
-                private $baseModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private baseMessageModalModel:IMessageModalModel) {
-
-        this.initScope(baseMessageModalModel);
-    }
-
-    private initScope = (messageModalViewModel:IMessageModalModel):void => {
-
-        this.$baseScope.messageModalModel = messageModalViewModel;
-        this.$baseScope.modalInstanceError = this.$baseModalInstance;
-
-        this.$baseScope.ok = ():void => {
-            this.$baseModalInstance.close();
-        };
-
-        this.$baseScope.footerButtons = [
-            {
-                'name': 'OK',
-                'css': 'grey',
-                'callback': this.$baseScope.ok
-            }
-        ];
-    }
-}
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts
deleted file mode 100644
index f2b2217645..0000000000
--- a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {IMessageModalModel, MessageModalViewModel, IMessageModalViewModelScope} from "../message-base-modal-model";
-
-export interface IClientMessageModalModel extends IMessageModalModel {
-}
-
-export interface IClientMessageModalViewModelScope extends IMessageModalViewModelScope {
-    clientMessageModalModel:IClientMessageModalModel;
-}
-
-export class ClientMessageModalViewModel extends MessageModalViewModel {
-
-    static '$inject' = ['$scope', '$uibModalInstance', 'clientMessageModalModel'];
-
-    constructor(private $scope:IClientMessageModalViewModelScope,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private clientMessageModalModel:IClientMessageModalModel) {
-
-        super($scope, $uibModalInstance, clientMessageModalModel);
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html
deleted file mode 100644
index f0a4f9a8db..0000000000
--- a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstanceError"
-           type="classic"
-           class="w-sdc-modal modal-type-alert"
-           header="{{messageModalModel.title}}"
-           buttons="footerButtons"
-           show-close-button="true">
-
-    <perfect-scrollbar include-padding="true">
-        <div class="w-sdc-modal-icon w-sdc-modal-icon-{{messageModalModel.severity}}"></div>
-        <div class="w-sdc-modal-caption">
-            <div ng-bind-html="messageModalModel.message" data-tests-id="message"></div>
-        </div>
-        <!--<div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message"></div>-->
-    </perfect-scrollbar>
-
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less
deleted file mode 100644
index e69de29bb2..0000000000
--- a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less
+++ /dev/null
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts
deleted file mode 100644
index b92069fce2..0000000000
--- a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {IMessageModalModel, IMessageModalViewModelScope, MessageModalViewModel} from "../message-base-modal-model";
-
-export interface IServerMessageModalModel extends IMessageModalModel {
-    status:string;
-    messageId:string;
-    
-    
-}
-
-export interface IServerMessageModalViewModelScope extends IMessageModalViewModelScope {
-    serverMessageModalModel:IServerMessageModalModel;
-}
-
-export class ServerMessageModalViewModel extends MessageModalViewModel {
-
-    static '$inject' = ['$scope', '$uibModalInstance', 'serverMessageModalModel'];
-
-    constructor(private $scope:IServerMessageModalViewModelScope,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private serverMessageModalModel:IServerMessageModalModel) {
-
-        super($scope, $uibModalInstance, serverMessageModalModel);
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html
deleted file mode 100644
index 7d3204c095..0000000000
--- a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalInstanceError"
-           type="classic"
-           class="w-sdc-modal modal-type-error"
-           header="{{messageModalModel.title}}"
-           buttons="footerButtons"
-           show-close-button="true">
-
-    <perfect-scrollbar include-padding="true">
-        <div class="w-sdc-modal-icon w-sdc-modal-icon-{{messageModalModel.severity}}"></div>
-        <div class="w-sdc-modal-caption">
-            <div>Error code: {{messageModalModel.messageId}}</div>
-            <div>Status code: {{messageModalModel.status}}</div>
-        </div>
-        <div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message" data-tests-id="message"></div>
-    </perfect-scrollbar>
-
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less
deleted file mode 100644
index e69de29bb2..0000000000
--- a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less
+++ /dev/null
diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts
deleted file mode 100644
index 01394a3c33..0000000000
--- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts
+++ /dev/null
@@ -1,272 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {ComponentType, SEVERITY, FileUtils, ModalsHandler, ComponentFactory} from "app/utils";
-import {OnboardingService, CacheService} from "app/services";
-import {Component, IComponent, IUser, IAppConfigurtaion, Resource} from "app/models";
-import {IServerMessageModalModel} from "../message-modal/message-server-modal/server-message-modal-view-model";
-import {Dictionary} from "app/utils";
-import * as _ from 'underscore';
-
-interface IOnboardingModalViewModelScope {
-    modalOnboarding:ng.ui.bootstrap.IModalServiceInstance;
-    componentsList:Array<IComponent>;
-    tableHeadersList:Array<any>;
-    selectedComponent:Component;
-    componentFromServer:Component;
-    reverse:boolean;
-    sortBy:string;
-    searchBind:string;
-    okButtonText:string;
-    isCsarComponentExists:boolean;
-    user:IUser;
-    isLoading:boolean;
-
-    //this is for UI paging
-    numberOfItemsToDisplay:number;
-    allItemsDisplayed:boolean;
-
-    doSelectComponent(component:Component):void;
-    doUpdateCsar():void;
-    doImportCsar():void;
-    sort(sortBy:string):void;
-    downloadCsar(packageId:string):void;
-    increaseNumItemsToDisplay():void;
-}
-
-export class OnboardingModalViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        '$state',
-        'sdcConfig',
-        '$uibModalInstance',
-        'Sdc.Services.OnboardingService',
-        'okButtonText',
-        'currentCsarUUID',
-        'currentCsarVersion',
-        'Sdc.Services.CacheService',
-        'FileUtils',
-        'ComponentFactory',
-        'ModalsHandler'
-    ];
-
-    constructor(private $scope:IOnboardingModalViewModelScope,
-                private $filter:ng.IFilterService,
-                private $state:any,
-                private sdcConfig:IAppConfigurtaion,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private onBoardingService:OnboardingService,
-                private okButtonText:string,
-                private currentCsarUUID:string,
-                private currentCsarVersion:string,
-                private cacheService:CacheService,
-                private fileUtils:FileUtils,
-                private componentFactory:ComponentFactory,
-                private modalsHandler:ModalsHandler) {
-
-        this.init();
-    }
-
-    /**
-     * Called from controller constructor, this will call onboarding service to get list
-     * of "mini" components (empty components created from CSAR).
-     * The list is inserted to componentsList on $scope.
-     * And then call initScope method.
-     */
-    private init = ():void => {
-        this.initOnboardingComponentsList();
-    };
-
-    private initScope = ():void => {
-
-        this.initSortedTableScope();
-        this.initModalScope();
-        this.$scope.sortBy = "name"; // Default sort by
-        this.$scope.user = this.cacheService.get('user');
-        this.$scope.okButtonText = this.okButtonText;
-        this.$scope.numberOfItemsToDisplay = 0;
-        this.$scope.allItemsDisplayed = false;
-
-        // Dismiss the modal and pass the "mini" component to workspace general page
-        this.$scope.doImportCsar = ():void => {
-
-            this.$uibModalInstance.close({
-                componentCsar: this.$scope.selectedComponent,
-                type: ComponentType.RESOURCE.toLowerCase()
-            });
-        };
-
-        this.$scope.doUpdateCsar = ():void => {
-            
-            // Change the component version to the CSAR version we want to update.
-            if(!this.currentCsarVersion || this.currentCsarVersion != (<Resource>this.$scope.selectedComponent).csarVersion) {
-                this.$uibModalInstance.close({
-                    componentCsar: this.$scope.selectedComponent,
-                    previousComponent: this.$scope.componentFromServer,
-                    type: this.$scope.componentFromServer.componentType.toLowerCase()
-                    
-                });
-
-            } else {
-                this.$uibModalInstance.close();
-            }
-        };
-
-        this.$scope.downloadCsar = (packageId:string):void => {
-            this.$scope.isLoading = true;
-            this.onBoardingService.downloadOnboardingCsar(packageId).then(
-                (file:any):void => {
-                    this.$scope.isLoading = false;
-                    if (file) {
-                        this.fileUtils.downloadFile(file, packageId + '.csar');
-                    }
-                }, ():void => {
-                    this.$scope.isLoading = false;
-                    var data:IServerMessageModalModel = {
-                        title: 'Download error',
-                        message: "Error downloading file",
-                        severity: SEVERITY.ERROR,
-                        messageId: "",
-                        status: ""
-                    };
-                    this.modalsHandler.openServerMessageModal(data);
-                }
-            );
-        };
-
-        this.$scope.increaseNumItemsToDisplay = ():void => {
-            this.$scope.numberOfItemsToDisplay = this.$scope.numberOfItemsToDisplay + 40;
-            if (this.$scope.componentsList) {
-                this.$scope.allItemsDisplayed = this.$scope.numberOfItemsToDisplay >= this.$scope.componentsList.length;
-            }
-        };
-
-        // When the user select a row, set the component as selectedComponent
-        this.$scope.doSelectComponent = (component:Component):void => {
-
-            if (this.$scope.selectedComponent === component) {
-                // Collapse the item
-                this.$scope.selectedComponent = undefined;
-                return;
-            }
-
-            this.$scope.isLoading = true;
-            this.$scope.componentFromServer = undefined;
-            this.$scope.selectedComponent = component;
-
-            let onSuccess = (componentFromServer:Component):void => {
-                this.$scope.isLoading = false;
-                if (componentFromServer) {
-                    this.$scope.componentFromServer = componentFromServer;
-                    this.$scope.isCsarComponentExists = true;
-                } else {
-                    this.$scope.componentFromServer = component;
-                    this.$scope.isCsarComponentExists = false;
-                }
-            };
-
-            let onError = ():void => {
-                this.$scope.isLoading = false;
-                this.$scope.componentFromServer = component;
-                this.$scope.isCsarComponentExists = false;
-            };
-
-            this.onBoardingService.getComponentFromCsarUuid((<Resource>component).csarUUID).then(onSuccess, onError);
-        };
-
-    };
-
-    private initSortedTableScope = ():void => {
-        this.$scope.tableHeadersList = [
-            {title: 'Name', property: 'name'},
-            {title: 'Vendor', property: 'vendorName'},
-            {title: 'Category', property: 'categories'},
-            {title: 'Version', property: 'csarVersion'},
-            {title: 'Type', property: 'resourceType'},
-            {title: '#', property: 'importAndUpdate'}
-            //{title: 'Date', property: 'componentDate'}
-        ];
-
-        this.$scope.sort = (sortBy:string):void => {
-            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-            this.$scope.sortBy = sortBy;
-        };
-    };
-
-    private initModalScope = ():void => {
-        // Enable the modal directive to close
-        this.$scope.modalOnboarding = this.$uibModalInstance;
-    };
-
-    private initOnboardingComponentsList = ():void => {
-        let onSuccess = (onboardingResponse:Array<IComponent>):void => {
-            initMaxVersionOfItemsInList(onboardingResponse);
-
-            if (this.currentCsarUUID) {
-                //this.$scope.componentsList = this.$filter('filter')(this.$scope.componentsList, {csarUUID: this.currentCsarUUID});
-                this.$scope.componentsList = this.$filter('filter')(this.$scope.componentsList,
-                    (input):boolean => {
-                        return input.csarUUID === this.currentCsarUUID;
-                    }
-                );
-            }
-            this.initScope();
-        };
-
-        let onError = ():void => {
-            console.log("Error getting onboarding list");
-            this.initScope();
-        };
-
-        let initMaxVersionOfItemsInList = (onboardingResponse:Array<IComponent>):void => {
-            // Get only the latest version of each item
-            this.$scope.componentsList = [];
-
-            // Get all unique items from the list
-            let uniqueItems:Array<any> = _.uniq(onboardingResponse, false, (item:any):void=>{
-                return item.packageId;
-            });
-            
-            // Loop on all the items with unique packageId
-            _.each(uniqueItems, (item:any):void=> {
-                // Find all the items that has same packageId
-                let ItemsFound:Array<IComponent> = _.filter(onboardingResponse, (inListItem:any):any => {
-                    return inListItem.packageId === item.packageId;
-                });
-
-                // Loop on all the items with same packageId and find the max version.
-                let maxItem:any;
-                _.each(ItemsFound, (ItemFound:any):void=> {
-                    if (!maxItem) {
-                        maxItem = ItemFound;
-                    } else if (maxItem && parseInt(maxItem.csarVersion) < parseInt(ItemFound.csarVersion)) {
-                        maxItem = ItemFound;
-                    }
-                });
-                this.$scope.componentsList.push(maxItem);
-            });
-        };
-
-        this.onBoardingService.getOnboardingComponents().then(onSuccess, onError);
-    };
-}
diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html
deleted file mode 100644
index 7f19389bdf..0000000000
--- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html
+++ /dev/null
@@ -1,165 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalOnboarding" class="w-sdc-modal-onboarding w-sdc-classic-top-line-modal" buttons="footerButtons" header="Import VSP" show-close-button="true">
-    <info-tooltip class="general-info-button" info-message-translate="ON_BOARDING_GENERAL_INFO "></info-tooltip>
-    <div class="title-wrapper">
-        <div>
-            <p class="sub-title">Select one of the software product component below:</p>
-        </div>
-
-        <div class="top-search">
-            <input type="text"
-                   class="search-text"
-                   placeholder="Search"
-                   data-ng-model="search.filterTerm"
-                   data-tests-id="onboarding-search"
-                   ng-model-options="{ debounce: 300 }" />
-            <span class="w-sdc-search-icon magnification"></span>
-        </div>
-    </div>
-
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-
-            <!-- Table headers -->
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)" data-tests-id="{{header.title}}">{{header.title}}
-                    <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-            </div>
-
-            <!-- Table body -->
-            <div class="body">
-                <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container" id="onboarding-modal-scrollbar-container">
-
-                    <!-- In case the component list is empty -->
-                    <div data-ng-if="!componentsList || componentsList.length===0" class="no-row-text">
-                        There are no software product component to display
-                    </div>
-
-                    <div infinite-scroll-disabled='allItemsDisplayed'  infinite-scroll="increaseNumItemsToDisplay()" infinite-scroll-container="'#onboarding-modal-scrollbar-container'">
-
-                    <!-- Loop on components list -->
-                    <div data-ng-repeat-start="component in componentsList | filter: search | orderBy:sortBy:reverse | limitTo:numberOfItemsToDisplay track by $index"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': component.packageId === selectedComponent.packageId}"
-                         data-ng-click="doSelectComponent(component);"
-                         data-tests-id="csar-row"
-                         >
-
-                        <!-- Name -->
-                        <div class="table-col-general flex-item"  sdc-smart-tooltip>
-                            <span class="sprite table-arrow" data-ng-class="{'opened': component.packageId === selectedComponent.packageId}" data-tests-id="{{component.name}}"></span>
-                            {{component.name}}
-                        </div>
-
-                        <!-- Vendor -->
-                        <div class="table-col-general flex-item" data-tests-id="{{component.vendorName}}" sdc-smart-tooltip>
-                            {{component.vendorName}}
-                        </div>
-
-                        <!-- Category -->
-                        <div class="table-col-general flex-item"  sdc-smart-tooltip>
-                            {{component.categories[0].name}}&nbsp;{{component.categories[0].subcategories[0].name}}
-                        </div>
-
-                        <!-- Version -->
-                        <div class="table-col-general flex-item"  sdc-smart-tooltip>
-                            {{component.csarVersion}}
-                        </div>
-
-                        <!-- Type -->
-                        <div class="table-col-general flex-item"  sdc-smart-tooltip>
-                            {{component.resourceType}}
-                        </div>
-
-                        <!-- Import And Update -->
-                        <div class="table-col-general flex-item"  sdc-smart-tooltip></div>
-
-                    </div>
-
-                    <div data-ng-repeat-end="" data-ng-if="component.packageId === selectedComponent.packageId" class="item-opened">
-
-                        <div class="item-opened-description">
-                            <div class="item-opened-description-title">VSP Description:</div>
-                            {{component.description}}
-                        </div>
-
-                        <div class="item-opened-metadata1">
-                            <div data-ng-if="isCsarComponentExists===true">
-                                <div class="item-opened-metadata-title">VF'S Meta Data:</div>
-                                <div><span class="th">Name:</span> {{componentFromServer.name}}</div>
-                                <div><span class="th">Lifecycle:</span> {{componentFromServer.lifecycleState}}</div>
-                                <div><span class="th">Creator:</span> {{componentFromServer.creatorFullName}}</div>
-                            </div>
-                        </div>
-
-                        <div class="item-opened-metadata2">
-                            <div data-ng-if="isCsarComponentExists===true">
-                                <div class="item-opened-metadata-title">&nbsp;</div>
-                                <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div>
-                                <div><span class="th">Version:</span> {{componentFromServer.version}}</div>
-                                <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div>
-                                <div data-ng-if="componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId !== user.userId">
-                                    <span class="note">Designers cannot update a VSP if the VF is checked out by another user.</span>
-                                </div>
-                                <div data-ng-if="componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'">
-                                    <span class="note">Designers cannot update a VSP if the VF is in Ready for testing state.</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="item-opened-metadata3">
-                            <info-tooltip class="info-button" info-message-translate="{{isCsarComponentExists?'ON_BOARDING_UPDATE_INFO':'ON_BOARDING_IMPORT_INFO'}}" direction="left"></info-tooltip>
-                        </div>
-
-                        <div class="item-opened-icon">
-                            <span data-ng-if="isCsarComponentExists!==true"
-                                 class="sprite-new import-file-btn"
-                                 data-ng-click="doImportCsar()"
-                                 uib-tooltip="Import VSP"
-                                 tooltip-class="uib-custom-tooltip"
-                                 tooltip-placement="bottom"
-                                 data-tests-id="import-csar"></span>
-
-                            <span data-ng-if="isCsarComponentExists===true"
-                                 class="sprite-new refresh-file-btn"
-                                 uib-tooltip="Update VSP"
-                                 tooltip-class="uib-custom-tooltip"
-                                 tooltip-placement="bottom"
-                                 data-ng-class="{'disabled': (componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId!==user.userId) || componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'}"
-                                 data-ng-click="doUpdateCsar()"
-                                 data-tests-id="update-csar"></span>
-
-                            <span data-ng-click="downloadCsar(component.packageId)"
-                                 class="sprite-new download-file-btn hand"
-                                 uib-tooltip="Download VSP"
-                                 tooltip-class="uib-custom-tooltip"
-                                 tooltip-placement="bottom"
-                                 data-tests-id="download-csar"></span>
-                        </div>
-                        <loader data-display="isLoading" relative="true" size="small"></loader>
-                    </div>
-                    </div>
-
-                </perfect-scrollbar>
-            </div><!-- End table body -->
-        </div><!-- End table -->
-    </div><!-- End table-container-flex -->
-    <div class="w-sdc-modal-footer classic"></div>
-
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less
deleted file mode 100644
index ccf4fb00b5..0000000000
--- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less
+++ /dev/null
@@ -1,149 +0,0 @@
-.w-sdc-modal-onboarding {
-
-    width: 100%;
-    display: inline-block;
-
-    .general-info-button{
-        position: relative;
-        top: -40px;
-        left: 95px;
-        float: left;
-    }
-
-    .title-wrapper {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-end;
-
-        .sub-title {
-            .m_14_r;
-            float:left;
-        }
-    }
-
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .table{
-        height: 472px;
-        margin-bottom: 0;
-    }
-
-    .table-container-flex {
-        margin-top: 10px;
-
-        .table {
-            .body {
-                .data-row + div.item-opened {
-                    word-wrap: break-word;
-                    display: flex;
-                    justify-content: space-between;
-                    padding: 10px 0;
-
-                    .item-opened-description-title,
-                    .item-opened-metadata-title {
-                        .m_14_m;
-                    }
-
-                    .item-opened-description,
-                    .item-opened-metadata1,
-                    .item-opened-metadata2,
-                    .item-opened-metadata3 {
-                        .th { .m_14_m; }
-                        flex-basis: 0;
-                        overflow: hidden;
-                        padding: 5px 15px;
-                    }
-
-                    .item-opened-description,
-                    .item-opened-metadata3 {
-                        border-right: 1px solid @main_color_o;
-                    }
-
-                    .item-opened-metadata2 {
-                        word-break: break-word;
-                        .note {
-                            color: @func_color_q;
-                        }
-                    }
-
-                    .item-opened-icon {
-                        flex-basis: 0;
-                        overflow: hidden;
-                        padding: 5px 15px;
-                        align-self: center;
-                    }
-
-                    .item-opened-description {flex-grow: 25.3;}
-                    .item-opened-metadata1 {flex-grow: 25;}
-                    .item-opened-metadata2 {flex-grow: 45;}
-                    .item-opened-metadata3 {
-                        flex-grow: 10;
-                        .info-button{
-                            float: right;
-                        }
-                    }
-                    .item-opened-icon {flex-grow: 10.1;}
-                }
-            }
-        }
-
-        .flex-item:nth-child(1) {
-            flex-grow: 25;
-            .hand;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-        }
-
-        .flex-item:nth-child(2) {flex-grow: 25;}
-        .flex-item:nth-child(3) {flex-grow: 30;}
-        .flex-item:nth-child(4) {flex-grow: 10; text-align: center; }
-        .flex-item:nth-child(5) {flex-grow: 10; text-align: center; }
-        .flex-item:nth-child(6) {flex-grow: 10; }
-
-    }
-
-    .download-file-btn {
-        cursor: pointer;
-        margin-left: 4px;
-    }
-
-    .refresh-file-btn,
-    .import-file-btn {
-        cursor: pointer;
-        margin-left: 20px;
-    }
-
-    .top-search {
-        float: right;
-        position: relative;
-
-        input.search-text {
-            .border-radius(2px);
-            width: 245px;
-            height: 32px;
-            line-height: 32px;
-            border: 1px solid @main_color_o;
-            margin: 0;
-            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 */
-        }
-
-        .magnification {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-        }
-
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts
index 10f41f6b61..fc3672cc50 100644
--- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts
@@ -22,7 +22,7 @@
 import * as _ from "underscore";
 import {IUserProperties} from "app/models";
 import {MenuItemGroup, MenuItem} from "app/utils";
-import {CacheService} from "app/services";
+import {CacheService} from "app/services-ng2";
 declare var PunchOutRegistry;
 
 export class BreadcrumbsMenuItem {
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
index fc1140ebf0..2d8010bd37 100644
--- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div class="sdc-catalog-container">
 
     <loader data-display="isLoading"></loader>
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
index 71a3101412..1e091e957d 100644
--- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
@@ -76,22 +76,6 @@
             }
         }
 
-        &.READY_FOR_CERTIFICATION {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
-        &.CERTIFICATION_IN_PROGRESS {
-            .i-sdc-categories-list-item-icon {
-                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px;
-                width: 14px;
-                height: 16px;
-            }
-        }
-
         &.DISTRIBUTED,
         &.TBD {
             .i-sdc-categories-list-item-icon {
diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts b/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts
deleted file mode 100644
index d25cd19bff..0000000000
--- a/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
-
-* Copyright (c) 2018 AT&T Intellectual Property.
-
-*
-
-* 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.
-
-*/
-
-import {IUserProperties, Plugin} from "app/models";
-import {CacheService} from "app/services";
-import {PluginsService} from "../../ng2/services/plugins.service";
-
-
-interface IPluginsTabViewModelScope extends ng.IScope {
-    plugin: Plugin
-    user: IUserProperties;
-    version: string;
-    queryParams: Object;
-    isLoading: boolean;
-
-    onLoadingDone(plugin: Plugin): void;
-}
-
-export class PluginsTabViewModel {
-    static '$inject' = [
-        '$scope',
-        '$stateParams',
-        'Sdc.Services.CacheService',
-        'PluginsService'
-    ];
-
-    constructor(private $scope: IPluginsTabViewModelScope,
-                private $stateParams: any,
-                private cacheService: CacheService,
-                private pluginsService: PluginsService) {
-
-        this.initScope();
-    }
-
-    private initScope = (): void => {
-        this.$scope.plugin = this.pluginsService.getPluginByStateUrl(this.$stateParams.path);
-        this.$scope.version = this.cacheService.get('version');
-        this.$scope.user = this.cacheService.get('user');
-
-        this.$scope.isLoading = true;
-
-        this.$scope.queryParams = {
-            userId: this.$scope.user.userId,
-            userRole: this.$scope.user.role,
-            displayType: "tab",
-            parentUrl: window.location.origin,
-            eventsClientId: this.$scope.plugin.pluginId
-        };
-
-        this.$scope.onLoadingDone = (plugin: Plugin) => {
-            if (plugin.pluginId == this.$scope.plugin.pluginId) {
-                this.$scope.isLoading = false;
-            }
-        };
-    }
-}
diff --git a/catalog-ui/src/app/view-models/preloading/preloading-view.html b/catalog-ui/src/app/view-models/preloading/preloading-view.html
deleted file mode 100644
index e894587fdc..0000000000
--- a/catalog-ui/src/app/view-models/preloading/preloading-view.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="sdc-loading-page">
-    <h1 class="caption1" translate="SIGN_IN_CAPTION"></h1>
-    <p class="caption2" translate="SIGN_IN_DESCRIPTION"></p>
-
-    <div class="load-container-wrapper">
-        <div class="load-container load2 animated fadeIn"><div class="loader">Loading...</div></div>
-    </div>
-
-</div>
diff --git a/catalog-ui/src/app/view-models/preloading/preloading-view.ts b/catalog-ui/src/app/view-models/preloading/preloading-view.ts
deleted file mode 100644
index d629d298f2..0000000000
--- a/catalog-ui/src/app/view-models/preloading/preloading-view.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-
-interface IPreLoadingViewScope {
-    startZoomIn:boolean;
-}
-
-export class PreLoadingViewModel {
-
-    static '$inject' = ['$scope'];
-
-    constructor(private $scope:IPreLoadingViewScope) {
-        this.init($scope);
-    }
-
-    private init = ($scope:IPreLoadingViewScope):void => {
-        this.animate($('.caption1'), 'fadeInUp', 400);
-        this.animate($('.caption2'), 'fadeInUp', 800);
-    };
-
-    private animate = (element:any, animation:string, when:number):void => {
-        window.setTimeout(()=> {
-            element.addClass("animated " + animation);
-            element[0].style = "visibility: visible;";
-        }, when);
-    };
-
-}
diff --git a/catalog-ui/src/app/view-models/shared/notification-custom-template.html b/catalog-ui/src/app/view-models/shared/notification-custom-template.html
index 869c49bacf..9456b87093 100644
--- a/catalog-ui/src/app/view-models/shared/notification-custom-template.html
+++ b/catalog-ui/src/app/view-models/shared/notification-custom-template.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div class="ui-notification">
     <div class="notification-container">
         <div class="icon-container">
diff --git a/catalog-ui/src/app/view-models/shared/notification-template.less b/catalog-ui/src/app/view-models/shared/notification-template.less
new file mode 100644
index 0000000000..5baf10d411
--- /dev/null
+++ b/catalog-ui/src/app/view-models/shared/notification-template.less
@@ -0,0 +1,53 @@
+.notification-container{
+    display: flex;
+    padding: 15px 11px;
+    float: left;
+    .icon-container{
+        flex-grow: 1;
+        margin-right: 20px;
+        .icon-circle{
+            background-color: black;
+            height: 40px;
+            width: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            margin-right: 0;
+            background-color: rgba(255, 255, 255, 0.3);
+            .icon{
+                margin: 0 auto;
+                display: block;
+            }
+        }
+    }
+    .msg-content{
+        flex-grow: 3;
+        h3{
+            border-bottom: none;
+            font-weight: 400;
+            .f-type._18_m;
+        }
+        .message{
+            font-weight: 300;
+            .f-type._14_m;
+        }
+    }
+}
+.ui-notification.success{
+    background-color: @main_color_d;
+    .icon{
+        .notification-success-icon;
+    }
+}
+.ui-notification.error{
+    background-color: @func_color_q;
+    .icon{
+        .notification-error-icon;
+    }
+}
+.ui-notification.info{
+    background-color: @main_color_a;
+    .icon{
+        .notification-process-icon;
+    }
+}
diff --git a/catalog-ui/src/app/view-models/support/support-view.html b/catalog-ui/src/app/view-models/support/support-view.html
deleted file mode 100644
index e85373b79d..0000000000
--- a/catalog-ui/src/app/view-models/support/support-view.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="full-height" >
-  <loader data-display="isLoading"></loader>
-  <div class="w-sdc-header">
-    <div class="w-sdc-header-logo">
-      <div class="w-sdc-header-logo-icon sprite logo"></div>
-      <a class="w-sdc-header-logo-link" data-ui-sref="dashboard"  translate="PROJECT_TITLE"></a>
-      <div class="w-sdc-header-version"> v.{{version}}</div>
-    </div>
-    <div class="i-sdc-header-caption">Support</div>
-    <user-header-details ></user-header-details>
-  </div>
-  <div class="w-sdc-main-container">
-    <div  class="w-sdc-left-sidebar">
-      <div class="w-sdc-left-sidebar-in-progress" >
-        <div class="i-sdc-left-sidebar-item category-title" data-ng-class="{'selectedLink':selectedLeftBarGroupLink === inProgressEnumVal}"  data-ng-click="setSelectedEntitiesByEntityGroup(inProgressEnumVal)" >In Design ({{numOfCheckOutEntities+numOfCheckInEntities}})</div>
-        <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===notCertifiedCheckOutEnumVal}"  data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(inProgressEnumVal, notCertifiedCheckOutEnumVal)" >Checked Out ({{numOfCheckOutEntities}})</div>
-        <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===notCertifiedCheckInEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(inProgressEnumVal, notCertifiedCheckInEnumVal)" >Checked In ({{numOfCheckInEntities}})</div>
-      </div>
-      <div class="w-sdc-left-sidebar-following" >
-        <div class="i-sdc-left-sidebar-item category-title" data-ng-class="{'selectedLink':selectedLeftBarGroupLink===followingEnumVal}"  data-ng-click="setSelectedEntitiesByEntityGroup(followingEnumVal)" >Completed Design ({{numOfReadyForCertificationEntities+numOfCertificationInProgressEntities+numOfCertifiedEntities}})</div>
-        <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===readyForCertificationEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(followingEnumVal, readyForCertificationEnumVal)" >Ready For Certification ({{numOfReadyForCertificationEntities}})</div>
-        <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===certificationInProgressEnumVal}"  data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(followingEnumVal, certificationInProgressEnumVal)" >Certification In Progress ({{numOfCertificationInProgressEntities}})</div>
-        <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===certifiedEnumVal}"  data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(followingEnumVal, certifiedEnumVal)" >Certified ({{numOfCertifiedEntities}})</div>
-      </div>
-      <div  class="w-sdc-left-sidebar-nav">
-        <div class="i-sdc-left-sidebar-nav-item catalog" data-ui-sref="catalog">Catalog</div>
-        <div class="i-sdc-left-sidebar-nav-item support"  data-ui-sref="support">Support</div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/support/support.less b/catalog-ui/src/app/view-models/support/support.less
deleted file mode 100644
index 8159e38320..0000000000
--- a/catalog-ui/src/app/view-models/support/support.less
+++ /dev/null
@@ -1,8 +0,0 @@
-.w-sdc-left-sidebar-in-progress,
-.w-sdc-left-sidebar-following {
-    .b_7;
-}
-
-.w-sdc-left-sidebar-following {
-    padding: 13px 0;
-}
diff --git a/catalog-ui/src/app/view-models/tabs/general-tab.less b/catalog-ui/src/app/view-models/tabs/general-tab.less
deleted file mode 100644
index 936b3e3414..0000000000
--- a/catalog-ui/src/app/view-models/tabs/general-tab.less
+++ /dev/null
@@ -1,122 +0,0 @@
-.sdc-general-tab {
-
-    display: flex;
-    min-height: 100%;
-    flex-flow: column;
-
-    .sdc-edit-icon {
-        .sprite;
-        .e-sdc-small-icon-pencil;
-    }
-    .sdc-general-tab-title {
-
-        .f-color.a;
-        .f-type._14_m;
-        padding: 0px 0px 15px 20px;
-        border-bottom: 1px solid @main_color_o;
-    }
-
-    .sdc-general-tab-sub-title {
-
-        .f-color.a;
-        .f-type._14_m;
-        padding: 15px 20px 15px 20px;
-
-    }
-
-    //scrollbar
-    .general-tab-scrollbar-container {
-
-        .perfect-scrollbar;
-        width: 100%;
-    }
-
-    //plus minus expand collapse
-    .general-tab-expand-collapse {
-
-        &.expanded {
-            .expand-collapse-title {
-                .expand-collapse-title-icon {
-                    .expand-collapse-minus-icon;
-                }
-            }
-        }
-
-        .expand-collapse-title {
-
-            padding: 8px 20px 4px 20px;
-            cursor: pointer;
-            &:hover {
-                background-color: @main_color_o;
-            }
-
-            .expand-collapse-title-icon {
-                .hand;
-                .sprite-new;
-                .expand-collapse-plus-icon;
-            }
-            .expand-collapse-title-text {
-                max-width: 225px;
-                display: inline-block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                padding-left: 10px;
-                line-height: 15px;
-            }
-        }
-        .selected {
-            background-color: @main_color_a;
-            .f-color.p;
-        }
-
-    }
-
-    .expand-collapse-sub-title {
-        max-width: 190px;
-        display: inline-block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding: 10px 0 0 43px;
-
-    }
-
-    //resizable view
-    .resizable-container {
-
-        flex: 1 1 auto;
-        display: flex;
-        flex-direction: column;
-        height: 90%;
-
-        .resizable-section {
-            min-height: 50px;
-            flex: 1;
-            display: flex;
-            flex-flow: column;
-            &.resizable {
-                flex: 0 0 300px;
-            }
-        }
-
-        //this is the resizable icon custom design for the angular resizable directive
-        .rg-top {
-            span {
-                margin-top: -5px;
-                &:before {
-                    border-top: 1px dotted @main_color_m;
-                    content: '';
-                    display: inline-block;
-                    width: 39px;
-                    height: 6px;
-                }
-
-                border-top: 1px dotted @main_color_m;
-                border-bottom: 1px dotted @main_color_m;
-                width: 39px;
-                height: 4px;
-            }
-        }
-    }
-}
diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts
deleted file mode 100644
index f752e3dba7..0000000000
--- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {ModalsHandler} from "app/utils";
-import {PropertyModel, DisplayModule, Component, ComponentInstance, Tab, Module} from "app/models";
-import {ExpandCollapseListData} from "app/directives/utils/expand-collapse-list-header/expand-collapse-list-header";
-
-interface IComponentInstancesMap {
-    [key:string]: ComponentInstance
-}
-
-export interface IHierarchyScope extends ng.IScope {
-    component:Component;
-    selectedIndex:number;
-    selectedModule:DisplayModule;
-    singleTab:Tab;
-    isLoading:boolean;
-    expandCollapseArtifactsList:ExpandCollapseListData;
-    expandCollapsePropertiesList:ExpandCollapseListData;
-    selectedInstanceId:string;
-    componentInstancesMap:IComponentInstancesMap;
-
-    onModuleSelected(module:Module, selectedIndex:number, componentInstanceId?:string):void;
-    onModuleNameChanged(module:DisplayModule):void;
-    updateHeatName():void;
-    loadInstanceModules(instance:ComponentInstance):ng.IPromise<boolean>;
-    openEditPropertyModal(property:PropertyModel, filteredProperties:Array<PropertyModel>):void;
-}
-
-export class HierarchyViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$q',
-        'ModalsHandler'
-    ];
-
-    constructor(private $scope:IHierarchyScope, private $q:ng.IQService, private ModalsHandler:ModalsHandler) {
-        this.$scope.component = this.$scope.singleTab.data;
-        this.$scope.isLoading = false;
-        this.$scope.expandCollapseArtifactsList = new ExpandCollapseListData();
-        this.$scope.expandCollapsePropertiesList = new ExpandCollapseListData();
-        this.$scope.componentInstancesMap = <IComponentInstancesMap>{};
-        this.initScopeMethods();
-    }
-
-    private initScopeMethods():void {
-
-        let collapseModuleData = ():void => {
-            this.$scope.expandCollapseArtifactsList.expandCollapse = false;
-            this.$scope.expandCollapsePropertiesList.expandCollapse = false;
-            this.$scope.expandCollapseArtifactsList.orderByField = "artifactName";
-            this.$scope.expandCollapsePropertiesList.orderByField = "name";
-        };
-
-        this.$scope.onModuleSelected = (module:Module, selectedIndex:number, componentInstanceId?:string):void => {
-
-            let onSuccess = (module:DisplayModule) => {
-                console.log("Module Loaded: ", module);
-                this.$scope.selectedModule = module;
-                this.$scope.isLoading = false;
-                collapseModuleData();
-            };
-
-            let onFailed = () => {
-                this.$scope.isLoading = false;
-            };
-
-            this.$scope.selectedIndex = selectedIndex;
-            if (!this.$scope.selectedModule || (this.$scope.selectedModule && this.$scope.selectedModule.uniqueId != module.uniqueId)) {
-                this.$scope.isLoading = true;
-                if (this.$scope.component.isService()) {
-                    this.$scope.selectedInstanceId = componentInstanceId;
-                    this.$scope.component.getModuleInstanceForDisplay(componentInstanceId, module.uniqueId).then(onSuccess, onFailed);
-                } else {
-                    this.$scope.component.getModuleForDisplay(module.uniqueId).then(onSuccess, onFailed);
-                }
-            }
-
-            const componentInstances: Array<ComponentInstance> = this.$scope.component.componentInstances || [];
-            (<string[]>_.values(module.members)).forEach((memberId) => {
-                if (!(memberId in this.$scope.componentInstancesMap)) {
-                    const compInstance = componentInstances.find((c) => c.uniqueId === memberId);
-                    if (compInstance) {
-                        this.$scope.componentInstancesMap[compInstance.uniqueId] = compInstance;
-                    }
-                }
-            });
-        };
-
-        this.$scope.updateHeatName = () => {
-            this.$scope.isLoading = true;
-
-            let originalName:string = this.$scope.selectedModule.name;
-
-            let onSuccess = (module:Module) => {
-                console.log("Module name updated:", module.name);
-                this.$scope.selectedModule.name = module.name;
-                this.$scope.isLoading = false;
-            };
-
-            let onFailed = () => {
-                this.$scope.isLoading = false;
-                this.$scope.selectedModule.name = originalName;
-            };
-
-            this.$scope.selectedModule.updateName();
-            this.$scope.component.updateGroupMetadata(new DisplayModule(this.$scope.selectedModule)).then(onSuccess, onFailed);
-        };
-
-        this.$scope.openEditPropertyModal = (property:PropertyModel, filteredProperties:Array<PropertyModel>):void => {
-            this.ModalsHandler.openEditModulePropertyModal(property, this.$scope.component, this.$scope.selectedModule, filteredProperties).then(() => {
-            });
-        }
-    }
-}
diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html
deleted file mode 100644
index 423cbcd1f0..0000000000
--- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="sdc-general-tab hierarchy-tab" ng-class="">
-    <loader data-display="isLoading" relative="true" size="medium"></loader>
-    <div class="sdc-general-tab-title" data-tests-id="tab-header" translate="DEPLOYMENT_TAB_TITLE"></div>
-
-    <div class="resizable-container">
-        <div  data-ng-if="!component.isService()"class="resizable-section">
-
-            <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true"
-                               class="general-tab-scrollbar-container">
-                <div class="sdc-general-tab-sub-title" data-tests-id="tab-sub-header">{{component.name}}</div>
-                <expand-collapse expanded-selector=".hierarchy-module-member-list.{{$index}}"
-                                 class="general-tab-expand-collapse" is-close-on-init="true"
-                                 data-tests-id="hierarchy-module-{{$index}}"
-                                 data-ng-repeat-start="module in component.modules">
-                    <div class="expand-collapse-title first-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module, $index)">
-                        <div class="expand-collapse-title-icon"></div>
-                        <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips
-                              tooltip-content="{{module.name}}"></span>
-
-                    </div>
-                </expand-collapse>
-
-                <div data-ng-repeat-end="" class="hierarchy-module-member-list {{$index}}">
-                    <div ng-repeat="memberId in ::module.members track by $index">
-                        <div class="expand-collapse-sub-title"  tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div>
-                    </div>
-                </div>
-            </perfect-scrollbar>
-        </div>
-        <div  data-ng-if="component.isService()"class="resizable-section">
-            <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true"
-                               class="general-tab-scrollbar-container">
-                <expand-collapse expanded-selector=".hierarchy-modules-list.{{$index}}"
-                                 class="general-tab-expand-collapse" is-close-on-init="true"
-                                 data-tests-id="hierarchy-instance-{{$index}}"
-
-                                 data-ng-repeat-start="instance in component.componentInstances">
-                    <div class="expand-collapse-title first-level" data-tests-id="hierarchy-instance-{{$index}}-title">
-                        <div class="expand-collapse-title-icon"></div>
-                        <span class="expand-collapse-title-text" data-ng-bind="instance.name" tooltips
-                              tooltip-content="{{instance.name}}"></span>
-
-                    </div>
-                </expand-collapse>
-                <!--TODO: Rachel :  -->
-                <div data-ng-repeat-end="" class="hierarchy-modules-list {{$index}}">
-                    <expand-collapse expanded-selector=".outer-index-{{$parent.$index}}.hierarchy-module-member-list.{{$index}}"
-                                     class="general-tab-expand-collapse" is-close-on-init="true"
-                                     data-tests-id="hierarchy-module-{{$index}}"
-                                     data-ng-repeat-start="module in instance.groupInstances">
-                        <div class="expand-collapse-title second-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index && selectedInstanceId === instance.uniqueId}" data-ng-click="onModuleSelected(module, $index, instance.uniqueId)">
-                            <div class="expand-collapse-title-icon"></div>
-                        <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips tooltip-content="{{module.name}}"></span>
-
-                        </div>
-                    </expand-collapse>
-
-                    <div data-ng-repeat-end="" class="outer-index-{{$parent.$index}} hierarchy-module-member-list {{$index}}">
-                        <div ng-repeat="memberId in ::module.members track by $index">
-                            <div class="expand-collapse-sub-title"  tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div>
-                        </div>
-                    </div>
-                </div>
-            </perfect-scrollbar>
-        </div>
-
-        <div  resizable r-directions="['top']" r-flex="true" ng-if="selectedModule" class="resizable-section module-data-container" data-tests-id="selected-module-data">
-            <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true"
-                               class="general-tab-scrollbar-container">
-                <div class="module-data">
-                    <div>
-                        <div class="module-name module-text-overflow" data-tests-id="selected-module-name" tooltips tooltip-content="{{selectedModule.name}}">{{selectedModule.name}}</div>
-                        <div class="edit-name-container" data-ng-if="!component.isService()">
-                            <edit-name-popover header="Edit Module Name" direction="auto top" module="selectedModule" on-save="updateHeatName()" ng-class="{'disabled': isViewOnly}" class="sdc-edit-icon" data-tests-id="edit-name-popover-icon"></edit-name-popover>
-                        </div>
-                    </div>
-                    <div class="" data-tests-id="selected-module-group-uuid" tooltips tooltip-content="{{selectedModule.groupUUID}}"><span class="bold">Module ID:</span><br><span class="small-font">{{selectedModule.groupUUID}}</span></div>
-                    <div class="" data-tests-id="selected-module-group-customization-uuid" data-ng-if="component.isService() && isViewOnly" tooltips tooltip-content="{{selectedModule.customizationUUID}}"><span class="bold">Customization ID:</span ><br><span class="small-font">{{selectedModule.customizationUUID}}</span></div>
-                    <div class=""  data-tests-id="selected-module-group-invariant-uuid" tooltips tooltip-content="{{selectedModule.invariantUUID}}"><span class="bold">Invariant UUID:</span><span class="small-font">{{selectedModule.invariantUUID}}</span></div>
-                    <div data-tests-id="selected-module-version"><span class="bold">Version:</span> {{selectedModule.version}}</div>
-                    <div data-tests-id="selected-module-is-base"><span class="bold">IsBase:</span> {{selectedModule.isBase}}</div>
-
-                </div>
-                <expand-collapse-list-header title="Properties" expand-collapse-list-data="expandCollapsePropertiesList"></expand-collapse-list-header>
-                <div ng-repeat="property in filteredProperties=(selectedModule.properties | filter: expandCollapsePropertiesList.filter | orderBy:expandCollapsePropertiesList.orderByField) track by $index" data-ng-if="expandCollapsePropertiesList.expandCollapse">
-                    <div class="list-item property-data" data-ng-class="{'last':$last}">
-                        <div class="property-name  module-text-overflow" data-tests-id="selected-module-property-name">
-                            <span tooltips tooltip-content="{{property.name}}"
-                                  data-ng-class="{'hand': !isViewOnly}"
-                                  data-ng-click="!isViewOnly && openEditPropertyModal(property, filteredProperties)">{{property.name}}</span>
-                        </div>
-                        <div class="module-text-overflow property-info" data-tests-id="selected-module-property-type"> Type: {{property.type}}</div>
-                        <div class="module-text-overflow property-info" data-tests-id="selected-module-property-schema-type">Value: {{property.value}}</div>
-                    </div>
-                </div>
-                <expand-collapse-list-header title="Artifacts" expand-collapse-list-data="expandCollapseArtifactsList"></expand-collapse-list-header>
-                <div ng-repeat="artifact in selectedModule.artifacts| filter: expandCollapseArtifactsList.filter | orderBy:expandCollapseArtifactsList.orderByField  track by $index" data-ng-if="expandCollapseArtifactsList.expandCollapse">
-                    <div class="list-item artifact-data" data-ng-class="{'last':$last}">
-                        <div class="artifact-name  module-text-overflow" data-tests-id="selected-module-artifact-name" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</div>
-                        <div class="module-text-overflow" tooltips data-tests-id="selected-module-artifact-uuid" tooltip-content="{{artifact.artifactUUID}}">UUID: {{artifact.artifactUUID}}</div>
-                        <div data-tests-id="selected-module-artifact-version">Version: {{artifact.artifactVersion}}</div>
-                    </div>
-                </div>
-            </perfect-scrollbar>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less
deleted file mode 100644
index dee0eeb38b..0000000000
--- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less
+++ /dev/null
@@ -1,101 +0,0 @@
-.hierarchy-tab{
-    width: 100%;
-    .hierarchy-module-list-container{
-        padding: 0px 20px 0px 20px;
-    }
-    .module-data-container{
-
-        width: 100%;
-        height: 100%;
-        background-color: #e6f6fb;
-        border: 1px solid #009fdb;
-        border-top: 4px solid #009fdb;
-        box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32);
-
-        .module-data {
-
-            .selectable;
-            .module-name {
-                .f-type._14_m;
-                width: 87%;
-            }
-            .f-type._14_r;
-            .f-color.a;
-            padding: 10px 0px 10px 0px;
-            margin: 0px 20px 0px 20px;
-            //border-bottom: 1px solid rgba(0, 159, 219, 0.6);
-
-            .small-font{
-                font-size: 12px;
-            }
-        }
-
-        .list-item{
-            padding: 10px 0px 10px 0px;
-            margin: 0px 20px 0px 20px;
-            &:not(.last){
-                border-bottom: 1px solid rgba(0, 159, 219, 0.6);
-            }
-        }
-
-        .artifact-data{
-            .selectable;
-            .f-type._12_r;
-            .f-color.m;
-            .artifact-name {
-                .f-type._14_r;
-                font-weight: bold;
-            }
-        }
-
-        .property-data{
-            .property-name{
-                width: 100%;
-                .f-type._14_m;
-                font-weight: 400;
-                color: @main_color_a;
-            }
-            .property-info{
-                color: @func_color_s;
-                .f-type._14_r;
-                width: 100%;
-            }
-        }
-
-        .module-text-overflow {
-            max-width: 240px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            //display: inline-block;
-        }
-    }
-
-    .hierarchy-modules-list{
-        .expand-collapse-title{
-            .expand-collapse-title-text{
-                max-width: 202px;
-            }
-        }
-    }
-
-    .hierarchy-module-member-list {
-        overflow: hidden;
-        background-color: @main_color_p;
-    }
-
-    .edit-name-container {
-        float: right;
-        border-left: 1px solid #5cc1e7;
-        height: 20px;
-        width: 12%;
-
-        .sdc-edit-icon {
-            float: right;
-            cursor: pointer;
-            position: relative;
-            top: 4px;
-            right: 5px;
-        }
-    }
-}
diff --git a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.html b/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.html
deleted file mode 100644
index 3dffbb9a79..0000000000
--- a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="sdc-tutorial-end-page">
-    <perfect-scrollbar include-padding="true" class="sdc-tutorial-end-page-main">
-        <h2 translate="TUTORIAL_LAST_PAGE_TITLE"></h2>
-        <p class="sdc-tutorial-end-page-description1" translate="TUTORIAL_LAST_PAGE_TEXT"></p>
-        <div>
-            <button class="w-sdc-btn-blue" data-ui-sref="dashboard" type="button" translate="TUTORIAL_LAST_PAGE_BTN_ACTION_MY_DASHBOARD"></button>
-            <button class="w-sdc-btn-blue" data-ui-sref="catalog" type="button" translate="WELCOME_BTN_ACTION_CATALOG"></button>
-        </div>
-    </perfect-scrollbar>
-</div>
diff --git a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.less b/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.less
deleted file mode 100644
index 30fa4f7e8b..0000000000
--- a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.less
+++ /dev/null
@@ -1,41 +0,0 @@
-.sdc-tutorial-end-page {
-
-    .bg_s;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    .opacity(0.8);
-    display: flex;
-    align-items: center;
-
-    background-image: url('/assets/styles/images/welcome.png');
-    background-repeat: no-repeat;
-    background-position: bottom left;
-
-    .sdc-tutorial-end-page-main {
-        width: 600px;
-        height: 400px;
-        margin: 100px auto 100px auto;
-        padding: 80px;
-    }
-
-    h2 {
-        .t_15;
-        margin: 0;
-    }
-
-    .sdc-tutorial-end-page-description1 {
-        .c_2;
-        .opacity(0.8);
-        margin-top: 10px;
-        line-height: 22px;
-    }
-
-    .w-sdc-btn-blue {
-        margin: 40px 10px 0 0;
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.ts b/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.ts
deleted file mode 100644
index 5c4c4999e8..0000000000
--- a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-
-interface ITutorialEndViewModelScope extends ng.IScope {
-}
-
-export class TutorialEndViewModel {
-
-    static '$inject' = [
-        '$scope'
-    ];
-
-    constructor(private $scope:ITutorialEndViewModelScope) {
-        this.init();
-    }
-
-    private init = ():void => {
-
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/welcome/welcome-view.html b/catalog-ui/src/app/view-models/welcome/welcome-view.html
deleted file mode 100644
index c342741f22..0000000000
--- a/catalog-ui/src/app/view-models/welcome/welcome-view.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="sdc-welcome-new-page">
-    <div data-ng-click="onCloseButtonClick()" class="sdc-welcome-close"></div>
-    <div class="sdc-welcome-wrapper">
-        <div class="sdc-welcome-cover"></div>
-        <div class="sdc-welcome-main">
-            <h1>Welcome to SDC</h1>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/welcome/welcome-view.ts b/catalog-ui/src/app/view-models/welcome/welcome-view.ts
deleted file mode 100644
index 5ed7159d79..0000000000
--- a/catalog-ui/src/app/view-models/welcome/welcome-view.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-
-export interface IWelcomeViewMode {
-    onCloseButtonClick():void;
-}
-
-export class WelcomeViewModel {
-
-    firstLoad:boolean = true;
-    alreadyAnimated:Array<number> = [];
-
-    static '$inject' = [
-        '$scope',
-        '$state'
-    ];
-
-    constructor(private $scope:IWelcomeViewMode,
-                private $state:ng.ui.IStateService
-               ) {
-        this.init();
-        this.initScope();
-        window.setTimeout(():void => {
-            this.loadImages(():void=> {
-                window.setTimeout(():void =>{
-                    $(".sdc-welcome-new-page").addClass("animated fadeIn");
-                },1000);
-            });
-        },0);
-    }
-
-    private initScope = ():void => {
-        let timeout = window.setTimeout(():void => {
-            this.$state.go("dashboard", {});
-        }, 4000);
-        this.$scope.onCloseButtonClick = ():void => {
-            window.clearTimeout(timeout);
-            this.$state.go("dashboard", {});
-        }
-    };
-
-    private init = ():void => {
-        let viewModelsHtmlBasePath:string = 'src/app/view-models/';
-        $('body').keyup((e):void=> {
-            if (e.keyCode == 27) { // escape key maps to keycode `27`
-                this.$state.go('dashboard');
-            }
-        });
-    };
-
-    private loadImages = (callback:Function):void => {
-        let src = $('.sdc-welcome-wrapper').css('background-image');
-        let url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');
-
-        let img = new Image();
-        img.onload = function() {
-            callback();
-        };
-        img.src = url;
-    };
-    
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html
deleted file mode 100644
index c5ab3cc110..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="activity-log">
-
-    <div class="title-wrapper">
-        <div class="top-search">
-            <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>
-
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-
-            <!-- Table headers -->
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
-                    <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-            </div>
-
-            <!-- Table body -->
-            <div class="body">
-                <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-
-                    <!-- In case the logs are empty -->
-                    <div data-ng-if="!activityLog || activityLog.length===0" class="no-row-text">
-                        There are no logs to display
-                    </div>
-
-                    <!-- Loop on logs list -->
-                    <div data-ng-repeat="item in activityLog | filter: searchBind | orderBy:sortBy:reverse track by $index"
-                         data-ng-init="item.dateFormat = ( item.TIMESTAMP.replace(' UTC', '') | stringToDateFilter | date: 'MM/dd/yyyy':'UTC')+' | '+(item.TIMESTAMP.replace(' UTC', '') | stringToDateFilter | date: 'shortTime':'UTC' )"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': component === selectedComponent}"
-                         data-ng-click="doSelectComponent(component);"
-                        >
-
-                        <!-- Date -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.dateFormat}}
-                        </div>
-
-                        <!-- Action -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.ACTION}}
-                        </div>
-
-                        <!-- Comment -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.COMMENT}}
-                        </div>
-
-                        <!-- Username -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.MODIFIER}}
-                        </div>
-
-                        <!-- Status -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.STATUS}}
-                            <span data-ng-class="{'success': item.STATUS>='200' && item.STATUS<='204','error': item.STATUS<'200' || item.STATUS>='300'}"></span>
-                        </div>
-
-                    </div>
-
-                </perfect-scrollbar>
-            </div><!-- End table body -->
-        </div><!-- End table -->
-    </div><!-- End table-container-flex -->
-
-</div>
-
-
-
-<!--<div ng-repeat="activityDate in  activityDateArray " class="w-sdc-component-viewer-right-activity-log" >
-    <div class="w-sdc-component-viewer-right-activity-log-date" >{{activityDate | date: 'longDate'}}</div>
-    <div ng-repeat="activity in activityLog[activityDate] | orderBy: '-TIMESTAMP'">
-        <div  class="w-sdc-component-viewer-right-activity-log-time">{{activity.TIMESTAMP.replace(" UTC", '') | stringToDateFilter | date: 'mediumTime':'UTC'}}</div>
-        <div class="w-sdc-component-viewer-right-activity-log-content">{{"Action: " + parseAction(activity.ACTION) + " Performed by: " + activity.MODIFIER + " Status: " + activity.STATUS}}</div>
-    </div>
-</div>-->
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
deleted file mode 100644
index 24f83ec503..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
+++ /dev/null
@@ -1,80 +0,0 @@
-.activity-log {
-    .title-wrapper {
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .table-container-flex .table .body .scrollbar-container {
-        max-height: 448px;
-    }
-
-    .view-mode {
-        background-color: @main_color_p;
-    }
-
-    .table{
-        height: 490px;
-        margin-bottom: 0;
-    }
-
-    .table-container-flex {
-        margin-top: 10px;
-
-        .flex-item:nth-child(1) { width: 200px; }
-        .flex-item:nth-child(2) { flex-grow: 20; }
-        .flex-item:nth-child(3) { flex-grow: 30; }
-        .flex-item:nth-child(4) { flex-grow: 20; }
-        .flex-item:nth-child(5) { width: 80px; }
-
-        .success {
-            position: absolute;
-            top: 11px;
-            right: 20px;
-            .sprite-new;
-            .sdc-success;
-        }
-
-        .error {
-            position: absolute;
-            top: 11px;
-            right: 20px;
-            .sprite-new;
-            .sdc-error;
-        }
-
-    }
-
-    .data-row {
-        position: relative;
-    }
-
-    .top-search {
-        float: right;
-        position: relative;
-
-        input.search-text {
-            .border-radius(2px);
-            width: 245px;
-            height: 32px;
-            line-height: 32px;
-            border: 1px solid @main_color_o;
-            margin: 0;
-            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 */
-        }
-
-        .magnification {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-        }
-
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts
deleted file mode 100644
index 452224a829..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {Activity} from "app/models";
-import {ActivityLogService} from "app/services";
-
-export interface IActivityLogViewModelScope extends IWorkspaceViewModelScope {
-    activityDateArray:Array<any>; //this is in order to sort the dates
-    activityLog:Array<Activity>;
-    preVersion:string;
-
-    tableHeadersList:Array<any>;
-    reverse:boolean;
-    sortBy:string;
-    searchBind:string;
-
-    getActivityLog(uniqueId:string):void;
-    onVersionChanged(version:any):void;
-    parseAction(action:string):string;
-    sort(sortBy:string):void;
-}
-
-export class ActivityLogViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$state',
-        'Sdc.Services.ActivityLogService'
-    ];
-
-    constructor(private $scope:IActivityLogViewModelScope,
-                private $state:ng.ui.IStateService,
-                private activityLogService:ActivityLogService) {
-
-        this.initScope();
-        this.$scope.setValidState(true);
-        this.initSortedTableScope();
-
-        // Set default sorting
-        this.$scope.sortBy = 'logDate';
-    }
-
-    private initScope():void {
-
-        this.$scope.preVersion = this.$scope.component.version;
-
-        this.$scope.onVersionChanged = (version:any):void => {
-            if (version.versionNumber != this.$scope.component.version) {
-                this.$scope.isLoading = true;
-                this.$scope.getActivityLog(version.versionId);
-            }
-        };
-
-        this.$scope.getActivityLog = (uniqueId:any):void => {
-
-            let onError = (response) => {
-                this.$scope.isLoading = false;
-                console.info('onFaild', response);
-
-            };
-
-            let onSuccess = (response:Array<Activity>) => {
-                this.$scope.activityLog = _.sortBy(response, function (o) {
-                    return o.TIMESTAMP;
-                }); //response; //
-                this.$scope.isLoading = false;
-            };
-
-            this.$scope.isLoading = true;
-            if (this.$scope.component.isResource()) {
-                this.activityLogService.getActivityLogService('resources', uniqueId).then(onSuccess, onError);
-            }
-            if (this.$scope.component.isService()) {
-                this.activityLogService.getActivityLogService('services', uniqueId).then(onSuccess, onError);
-            }
-
-        };
-
-        if (!this.$scope.activityLog || this.$scope.preVersion != this.$scope.component.version) {
-            this.$scope.getActivityLog(this.$scope.component.uniqueId);
-        }
-
-        this.$scope.parseAction = (action:string) => {
-            return action ? action.split(/(?=[A-Z])/).join(' ') : '';
-        };
-
-    }
-
-    private initSortedTableScope = ():void => {
-        this.$scope.tableHeadersList = [
-            {title: 'Date', property: 'dateFormat'},
-            {title: 'Action', property: 'ACTION'},
-            {title: 'Comment', property: 'COMMENT'},
-            {title: 'Username', property: 'MODIFIER'},
-            {title: 'Status', property: 'STATUS'}
-        ];
-
-        this.$scope.sort = (sortBy:string):void => {
-            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-            this.$scope.sortBy = sortBy;
-        };
-    };
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts
deleted file mode 100644
index 312a663e8f..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {Component, AttributeModel} from "app/models";
-import {ModalsHandler} from "app/utils";
-import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service";
-import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
-
-interface IAttributesViewModelScope extends IWorkspaceViewModelScope {
-    tableHeadersList:Array<any>;
-    reverse:boolean;
-    sortBy:string;
-
-    addOrUpdateAttribute(attribute?:AttributeModel):void;
-    delete(attribute:AttributeModel):void;
-    sort(sortBy:string):void;
-}
-
-export class AttributesViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        '$uibModal',
-        'ModalsHandler',
-        'ComponentServiceNg2'
-    ];
-
-
-    constructor(private $scope:IAttributesViewModelScope,
-                private $filter:ng.IFilterService,
-                private $uibModal:ng.ui.bootstrap.IModalService,
-                private ModalsHandler:ModalsHandler,
-                private ComponentServiceNg2: ComponentServiceNg2) {
-
-        this.initComponentAttributes();
-    }
-
-    private initComponentAttributes = () => {
-        if(this.$scope.component.attributes) {
-            this.initScope();
-        } else {
-            this.ComponentServiceNg2.getComponentAttributes(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
-                this.$scope.component.attributes = response.attributes;
-                this.initScope();
-            });
-        }
-    }
-
-
-    private initScope = ():void => {
-
-        this.$scope.sortBy = 'name';
-        this.$scope.reverse = false;
-        this.$scope.setValidState(true);
-        this.$scope.tableHeadersList = [
-            {title: 'Name', property: 'name'},
-            {title: 'Type', property: 'type'},
-            {title: 'Default Value', property: 'defaultValue'}
-        ];
-        this.$scope.sort = (sortBy:string):void => {
-            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-            this.$scope.sortBy = sortBy;
-        };
-
-        this.$scope.addOrUpdateAttribute = (attribute?:AttributeModel):void => {
-            this.ModalsHandler.openEditAttributeModal(attribute ? attribute : new AttributeModel(), this.$scope.component);
-        };
-
-        this.$scope.delete = (attribute:AttributeModel):void => {
-
-            let onOk = ():void => {
-                this.$scope.component.deleteAttribute(attribute.uniqueId);
-            };
-            let title:string = this.$filter('translate')("ATTRIBUTE_VIEW_DELETE_MODAL_TITLE");
-            let message:string = this.$filter('translate')("ATTRIBUTE_VIEW_DELETE_MODAL_TEXT", "{'name': '" + attribute.name + "'}");
-            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-        };
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view.html b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view.html
deleted file mode 100644
index 675ae0c5c6..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="workspace-attributes">
-    <div class="add-btn" data-tests-id="add-attribute-button" ng-if="!isViewMode()"
-         data-ng-class="{'disabled': isDisableMode()}" data-ng-click="addOrUpdateAttribute()" data-tests-id="add-attribute-button">Add</div>
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
-                    <span data-ng-if="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item" ng-if="!isViewMode()"></div>
-                <!--div class="table-no-text-header head-row flex-item"></div-->
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="component.attributes.length === 0" class="no-row-text"  data-ng-class="{'disabled': isDisableMode()}">
-                        There are no attributes to display <br>
-                        <span ng-if="!isViewMode()"> click <a data-ng-click="addOrUpdateAttribute()">here</a> to add one </span>
-
-                    </div>
-                    <div data-ng-repeat-start="attribute in component.attributes | orderBy:sortBy:reverse track by $index"
-                         class="flex-container data-row" data-ng-class="{'selected': attribute.selected}"
-                         data-ng-click="attribute.selected = !attribute.selected" data-tests-id="attributes-table-row">
-
-                        <div class="table-col-general flex-item text">
-                            <span class="sprite table-arrow" data-ng-class="{'opened': attribute.selected}"></span>
-                            <span  data-tests-id="{{attribute.name}}" tooltips tooltip-content="{{attribute.name}}">{{attribute.name}}</span>
-
-                        </div>
-
-                        <div class="table-col-general flex-item text" data-tests-id="{{attribute.type}}" data-ng-bind="attribute.type"></div>
-
-                        <div class="table-col-general flex-item text">
-                            <span tooltips tooltip-content="{{attribute.defaultValue}}" data-tests-id="{{attribute.defaultValue}}" data-ng-bind="attribute.defaultValue"></span>
-                        </div>
-
-                        <div class="table-btn-col flex-item" ng-if="!isViewMode()">
-                            <button class="table-edit-btn" data-tests-id="edit_{{attribute.name}}" data-ng-show="attribute.parentUniqueId==component.uniqueId"
-                                    data-ng-click="addOrUpdateAttribute(attribute); $event.stopPropagation();"  data-ng-class="{'disabled': isViewMode()}"> </button>
-                            <button class="table-delete-btn" data-tests-id="delete_{{attribute.name}}"  data-ng-show="attribute.parentUniqueId==component.uniqueId"
-                                    data-ng-click="delete(attribute); $event.stopPropagation();"  data-ng-class="{'disabled': isViewMode()}"> </button>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="attribute.selected && attribute.description" class="item-opened" data-ng-bind="attribute.description">
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less
deleted file mode 100644
index 932daa167d..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less
+++ /dev/null
@@ -1,54 +0,0 @@
-.workspace-attributes {
-
-    width: 93%;
-    display: inline-block;
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .table{
-        height:490px;
-        margin-bottom: 0;
-    }
-
-    .table-container-flex {
-        margin-top: 0;
-
-        .text{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-        }
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-
-            .hand;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 9;
-        }
-
-        .flex-item:nth-child(4) {
-            flex-grow: 3;
-            padding-top: 10px;
-        }
-
-        .flex-item:nth-child(5) {
-            flex-grow: 1;
-
-        }
-
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
deleted file mode 100644
index 2270a7b06e..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
+++ /dev/null
@@ -1,501 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-'use strict';
-import * as _ from "lodash";
-import { Component, ComponentInstance, IAppMenu, Requirement, Capability, ButtonModel } from "app/models";
-import { SharingService, CacheService, EventListenerService, LeftPaletteLoaderService } from "app/services";
-import { ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS, ComponentInstanceFactory } from "app/utils";
-import { IWorkspaceViewModelScope } from "../../workspace-view-model";
-import { ComponentGenericResponse } from "app/ng2/services/responses/component-generic-response";
-import { Resource } from "app/models/components/resource";
-import { ResourceType, ComponentType } from "app/utils/constants";
-import { ComponentServiceFactoryNg2 } from "app/ng2/services/component-services/component.service.factory";
-import { ServiceGenericResponse } from "app/ng2/services/responses/service-generic-response";
-import { Service } from "app/models/components/service";
-import { ZoneInstance } from "app/models/graph/zones/zone-instance";
-import { ComponentServiceNg2 } from "app/ng2/services/component-services/component.service";
-import { ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service"
-import { IModalConfig, IModalButtonComponent } from "sdc-ui/lib/angular/modals/models/modal-config";
-import { ValueEditComponent } from "app/ng2/components/ui/forms/value-edit/value-edit.component";
-import { UnsavedChangesComponent } from "../../../../ng2/components/ui/forms/unsaved-changes/unsaved-changes.component";
-import { ModalButtonComponent } from "sdc-ui/lib/angular/components";
-
-
-
-export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
-
-    currentComponent:Component;
-
-    //Added for now, in the future need to remove and use only id and type to pass to tabs.
-    selectedComponent: Component;
-    selectedZoneInstance: ZoneInstance;
-
-    componentInstanceNames: Array<string>;
-    isLoading:boolean;
-    graphApi:any;
-    sharingService:SharingService;
-    sdcMenu:IAppMenu;
-    version:string;
-    isViewOnly:boolean;
-    isCanvasTagging:boolean;
-    isLoadingRightPanel:boolean;
-    disabledTabs:boolean;
-    openVersionChangeModal(pathsToDelete:string[]):ng.IPromise<any>;
-    onComponentInstanceVersionChange(component:Component);
-    isComponentInstanceSelected():boolean;
-    updateSelectedComponent():void;
-    openUpdateModal();
-    deleteSelectedComponentInstance():void;
-    onBackgroundClick():void;
-    setSelectedInstance(componentInstance:ComponentInstance):void;
-    setSelectedZoneInstance(zoneInstance: ZoneInstance):void;
-    changeZoneInstanceName(newName:string):void;
-    printScreen():void;
-    isPNF():boolean;
-    isConfiguration():boolean;
-    preventMoveTab(state: boolean):void;
-    registerCreateInstanceEvent(callback: Function):void;
-    unregisterCreateInstanceEvent():void;
-    registerChangeComponentInstanceNameEvent(callback: Function):void;
-    unregisterChangeComponentInstanceNameEvent():void;
-
-    ComponentServiceNg2:ComponentServiceNg2,
-    cacheComponentsInstancesFullData:Component;
-}
-
-export class CompositionViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$log',
-        'sdcMenu',
-        'MenuHandler',
-        '$uibModal',
-        '$state',
-        'Sdc.Services.SharingService',
-        '$filter',
-        'Sdc.Services.CacheService',
-        'ComponentFactory',
-        'ChangeLifecycleStateHandler',
-        'LeftPaletteLoaderService',
-        'ModalsHandler',
-        'ModalServiceSdcUI',
-        'EventListenerService',
-        'ComponentServiceFactoryNg2',
-        'ComponentServiceNg2',
-        'Notification'
-    ];
-
-    constructor(private $scope:ICompositionViewModelScope,
-                private $log:ng.ILogService,
-                private sdcMenu:IAppMenu,
-                private MenuHandler:MenuHandler,
-                private $uibModal:ng.ui.bootstrap.IModalService,
-                private $state:ng.ui.IStateService,
-                private sharingService:SharingService,
-                private $filter:ng.IFilterService,
-                private cacheService:CacheService,
-                private ComponentFactory:ComponentFactory,
-                private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
-                private LeftPaletteLoaderService:LeftPaletteLoaderService,
-                private ModalsHandler:ModalsHandler,
-                private ModalServiceSdcUI: ModalServiceSdcUI,
-                private eventListenerService:EventListenerService,
-                private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2,
-                private ComponentServiceNg2:ComponentServiceNg2,
-                private Notification:any
-    ) {
-
-        this.$scope.setValidState(true);
-        this.initScope();
-        this.initGraphData();
-        this.registerGraphEvents(this.$scope);
-    }
-
-
-    private initGraphData = ():void => {
-        if(!this.hasCompositionGraphData(this.$scope.component)) {
-            this.$scope.isLoading = true;
-            let service = this.ComponentServiceFactoryNg2.getComponentService(this.$scope.component);
-            service.getComponentCompositionData(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
-                if (this.$scope.component.isService()) {
-                    (<Service> this.$scope.component).forwardingPaths = (<ServiceGenericResponse>response).forwardingPaths;
-                }
-                this.$scope.component.componentInstances = response.componentInstances || [];
-                this.$scope.component.componentInstancesRelations = response.componentInstancesRelations || [];
-                this.$scope.component.policies = response.policies || [];
-                this.$scope.component.groupInstances = response.groupInstances || [];
-                this.$scope.isLoading = false;
-                this.initComponent();
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED);
-            });
-        } else {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED);
-        }
-        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED);
-    };
-
-    private hasCompositionGraphData = (component:Component):boolean => {
-        return !!(component.componentInstances && component.componentInstancesRelations && component.policies && component.groupInstances);
-    };
-
-    private cacheComponentsInstancesFullData:Array<Component>;
-
-    private initComponent = ():void => {
-        this.$scope.currentComponent = this.$scope.component;
-        this.$scope.selectedComponent = this.$scope.currentComponent;
-        this.$scope.selectedZoneInstance = null;
-        this.updateUuidMap();
-        this.$scope.isViewOnly = this.$scope.isViewMode();
-    };
-
-    private registerGraphEvents = (scope:ICompositionViewModelScope):void => {
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance);
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, scope.setSelectedZoneInstance);
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick);
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_START, () => {
-            scope.isCanvasTagging = true;
-            this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, true, this.showUnsavedChangesAlert);
-        });
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_END, () => {
-            scope.isCanvasTagging = false;
-            this.resetUnsavedChanges();
-        });
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, scope.changeZoneInstanceName);
-        this.eventListenerService.registerObserverCallback(EVENTS.UPDATE_PANEL, this.removeSelectedZoneInstance);
-    };
-
-    private showUnsavedChangesAlert = (afterSave?:Function):Promise<any> => {
-        let deferred = new Promise<any>((resolve, reject)=> {
-            const modal = this.ModalServiceSdcUI.openCustomModal(
-                {
-                    title: "Unsaved Changes",
-                    size: 'sm',
-                    type: 'custom',
-
-                    buttons: [
-                        {id: 'cancelButton', text: 'Cancel', type: 'secondary', size: 'xsm', closeModal: true, callback: () => reject()},
-                        {id: 'discardButton', text: 'Discard', type: 'secondary', size: 'xsm', closeModal: true, callback: () => { this.resetUnsavedChanges(); resolve()}},
-                        {id: 'saveButton', text: 'Save', type: 'primary', size: 'xsm', closeModal: true, callback: () => {  reject(); this.saveUnsavedChanges(afterSave);  }}
-                    ] as IModalButtonComponent[]
-                }, UnsavedChangesComponent, { isValidChangedData: true});
-        });
-
-        return deferred;
-    }
-
-    private unRegisterGraphEvents = (scope: ICompositionViewModelScope):void => {
-        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance);
-        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, scope.setSelectedZoneInstance);
-        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick);
-        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CANVAS_TAG_START);
-        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CANVAS_TAG_END);
-        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, scope.changeZoneInstanceName);
-        this.eventListenerService.unRegisterObserver(EVENTS.UPDATE_PANEL, this.removeSelectedZoneInstance);
-
-    };
-
-    private resetUnsavedChanges = () => {
-        this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, false);
-    }
-
-    private saveUnsavedChanges = (afterSaveFunction?:Function):void => {
-        this.$scope.selectedZoneInstance.forceSave.next(afterSaveFunction);
-        this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, false);
-    }
-
-    private openUpdateComponentInstanceNameModal = ():void => {
-
-        let modalConfig:IModalConfig = {
-            title: "Edit Name",
-            size: "sm",
-            type: "custom",
-            testId: "renameInstanceModal",
-            buttons: [
-                {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false},
-                {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true}
-            ]
-        };
-
-        this.ModalServiceSdcUI.openCustomModal(modalConfig, ValueEditComponent, {name: this.$scope.currentComponent.selectedInstance.name, validityChangedCallback: this.enableOrDisableSaveButton});
-
-    };
-
-
-    private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
-        let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton');
-        saveButton.disabled = !shouldEnable;
-    }
-
-    private saveInstanceName = () => {
-        let currentModal = this.ModalServiceSdcUI.getCurrentInstance();
-        let nameFromModal:string = currentModal.innerModalContent.instance.name;
-
-        if(nameFromModal != this.$scope.currentComponent.selectedInstance.name){
-            currentModal.buttons[0].disabled = true;
-            let componentInstanceModel:ComponentInstance = ComponentInstanceFactory.createComponentInstance(this.$scope.currentComponent.selectedInstance);
-            componentInstanceModel.name = nameFromModal;
-
-            let onFailed = (error) => {
-                currentModal.buttons[0].disabled = false;
-            };
-            let onSuccess = (componentInstance:ComponentInstance) => {
-
-                this.$scope.currentComponent.selectedInstance.name = componentInstance.name;
-                //update requirements and capabilities owner name
-                _.forEach(this.$scope.currentComponent.selectedInstance.requirements, (requirementsArray:Array<Requirement>) => {
-                    _.forEach(requirementsArray, (requirement:Requirement):void => {
-                        requirement.ownerName = componentInstance.name;
-                    });
-                });
-
-                _.forEach(this.$scope.currentComponent.selectedInstance.capabilities, (capabilitiesArray:Array<Capability>) => {
-                    _.forEach(capabilitiesArray, (capability:Capability):void => {
-                        capability.ownerName = componentInstance.name;
-                    });
-                });
-                this.ModalServiceSdcUI.closeModal();
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.$scope.currentComponent.selectedInstance);
-            };
-
-            this.$scope.currentComponent.updateComponentInstance(componentInstanceModel).then(onSuccess, onFailed);
-        }  else {
-            this.ModalServiceSdcUI.closeModal();
-        }
-
-    };
-
-    private removeSelectedComponentInstance = ():void => {
-        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, this.$scope.currentComponent.selectedInstance)
-        this.$scope.currentComponent.selectedInstance = null;
-        this.$scope.selectedComponent = this.$scope.currentComponent;
-    };
-
-    private removeSelectedZoneInstance = ():void => {
-        this.$scope.currentComponent.selectedInstance = null;
-        this.$scope.selectedZoneInstance = null;
-        this.$scope.selectedComponent = this.$scope.currentComponent;
-    }
-
-    private updateUuidMap = ():void => {
-        /**
-         * In case user press F5, the page is refreshed and this.sharingService.currentEntity will be undefined,
-         * but after loadService or loadResource this.sharingService.currentEntity will be defined.
-         * Need to update the uuidMap with the new resource or service.
-         */
-        this.sharingService.addUuidValue(this.$scope.currentComponent.uniqueId, this.$scope.currentComponent.uuid);
-    };
-
-    private initScope = ():void => {
-        this.$scope.sharingService = this.sharingService;
-        this.$scope.sdcMenu = this.sdcMenu;
-        this.$scope.isLoading = false;
-        this.$scope.isLoadingRightPanel = false;
-        this.$scope.isCanvasTagging = false;
-        this.$scope.graphApi = {};
-        this.$scope.version = this.cacheService.get('version');
-        this.initComponent();
-
-        this.cacheComponentsInstancesFullData = new Array<Component>();
-
-        this.$scope.isComponentInstanceSelected = ():boolean => {
-            return this.$scope.currentComponent && this.$scope.currentComponent.selectedInstance != undefined && this.$scope.currentComponent.selectedInstance != null;
-        };
-
-        this.$scope.$on('$destroy', () => {
-            this.unRegisterGraphEvents(this.$scope);
-        })
-
-        this.$scope.restoreComponent = ():void => {
-            this.ComponentServiceNg2.restoreComponent(this.$scope.selectedComponent.componentType, this.$scope.selectedComponent.uniqueId).subscribe(() => {
-                    this.Notification.success({
-                        message: '&lt;' + this.$scope.component.name + '&gt; ' + this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TEXT"),
-                        title: this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TITLE")
-                    });
-                    this.$scope.selectedComponent.archived = false;
-                }
-            )
-        };
-
-        this.$scope.updateSelectedComponent = ():void => {
-            if (this.$scope.currentComponent.selectedInstance) {
-                let parentComponentUid = this.$scope.currentComponent.selectedInstance.componentUid
-                if(this.$scope.currentComponent.selectedInstance.originType === ComponentType.SERVICE_PROXY){
-                    parentComponentUid = this.$scope.currentComponent.selectedInstance.sourceModelUid;
-                }
-                let componentParent = _.find(this.cacheComponentsInstancesFullData, (component) => {
-                    return component.uniqueId === parentComponentUid;
-                });
-                if (componentParent) {
-                    this.$scope.selectedComponent = componentParent;
-                }
-                else {
-                    try {
-                        let onSuccess = (component:Component) => {
-                            this.$scope.isLoadingRightPanel = false;
-                            this.$scope.selectedComponent = component;
-                            this.cacheComponentsInstancesFullData.push(component);
-                        };
-                        let onError = (component:Component) => {
-                            console.log("Error updating selected component");
-                            this.$scope.isLoadingRightPanel = false;
-                        };
-                        this.ComponentFactory.getComponentFromServer(this.$scope.currentComponent.selectedInstance.originType, parentComponentUid).then(onSuccess, onError);
-                    } catch (e) {
-                        console.log("Error updating selected component", e);
-                        this.$scope.isLoadingRightPanel = false;
-                    }
-                }
-            }
-            else {
-
-                this.$scope.selectedComponent = this.$scope.currentComponent;
-            }
-        };
-
-        this.$scope.setSelectedInstance = (selectedComponent:ComponentInstance):void => {
-
-            this.$log.debug('composition-view-model::onNodeSelected:: with id: ' + selectedComponent.uniqueId);
-            this.$scope.currentComponent.setSelectedInstance(selectedComponent);
-            this.$scope.selectedZoneInstance = null;
-            this.$scope.updateSelectedComponent();
-
-            if (this.$state.current.name === 'workspace.composition.api') {
-                this.$state.go('workspace.composition.details');
-            }
-            if(!selectedComponent.isServiceProxy() && (this.$state.current.name === 'workspace.composition.consumption' || this.$state.current.name === 'workspace.composition.dependencies')) {
-                this.$state.go('workspace.composition.details');
-            }
-        };
-
-        this.$scope.setSelectedZoneInstance = (zoneInstance: ZoneInstance): void => {
-            this.$scope.currentComponent.selectedInstance = null;
-            this.$scope.selectedZoneInstance = zoneInstance;
-        };
-
-        this.$scope.onBackgroundClick = ():void => {
-            this.$scope.currentComponent.selectedInstance = null;
-            this.$scope.selectedZoneInstance = null;
-            this.$scope.selectedComponent = this.$scope.currentComponent;
-
-            if (this.$state.current.name === 'workspace.composition.api' || this.$state.current.name === 'workspace.composition.consumption' || this.$state.current.name === 'workspace.composition.dependencies') {
-                this.$state.go('workspace.composition.details');
-            }
-
-            if(this.$scope.selectedComponent.isService() && this.$state.current.name === 'workspace.composition.relations'){
-                this.$state.go('workspace.composition.api');
-            }
-        };
-
-        this.$scope.openUpdateModal = ():void => {
-            this.openUpdateComponentInstanceNameModal();
-        };
-
-        this.$scope.changeZoneInstanceName = (newName:string):void => {
-            this.$scope.selectedZoneInstance.instanceData.name = newName;
-        };
-
-        this.$scope.deleteSelectedComponentInstance = ():void => {
-            const {currentComponent} = this.$scope;
-            const {title, message} = this.$scope.sdcMenu.alertMessages['deleteInstance'];
-            let modalText = message.format([currentComponent.selectedInstance.name]);
-
-            if (currentComponent.isService()) {
-                const {forwardingPaths} = (<Service>currentComponent);
-                const instanceId = currentComponent.selectedInstance.uniqueId;
-
-                const relatedPaths = _.filter(forwardingPaths, forwardingPath => {
-                    const pathElements = forwardingPath.pathElements.listToscaDataDefinition;
-                    return pathElements.find(path => path.fromNode === instanceId || path.toNode === instanceId);
-                });
-
-                if (relatedPaths.length) {
-                    const pathNames = _.map(relatedPaths, path => path.name).join(', ');
-                    modalText += `<p>The following service paths will be erased: ${pathNames}</p>`;
-                }
-            }
-            this.ModalServiceSdcUI.openAlertModal(title, modalText, "OK", this.removeSelectedComponentInstance, "deleteInstanceModal");
-        };
-
-        this.$scope.openVersionChangeModal = (pathsToDelete:string[]):ng.IPromise<any> => {
-            const {currentComponent} = this.$scope;
-            const {forwardingPaths} = <Service>currentComponent;
-
-            const relatedPaths = _.filter(forwardingPaths, path =>
-                _.find(pathsToDelete, id =>
-                    path.uniqueId === id
-                )
-            ).map(path => path.name);
-            const pathNames = _.join(relatedPaths, ', ') || 'none';
-
-            const {title, message} = this.$scope.sdcMenu.alertMessages['upgradeInstance'];
-            return this.ModalsHandler.openConfirmationModal(title, message.format([pathNames]), false);
-        };
-
-        this.$scope.onComponentInstanceVersionChange = (component:Component):void => {
-            let onChange = () => {
-                this.$scope.currentComponent = component;
-                this.$scope.setComponent(this.$scope.currentComponent);
-                this.$scope.updateSelectedComponent();
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_VERSION_CHANGED, this.$scope.currentComponent);
-            };
-
-            if (component.isService()) {
-                const service = this.ComponentServiceFactoryNg2.getComponentService(component);
-                service.getComponentCompositionData(component).subscribe((response:ServiceGenericResponse) => {
-                    (<Service>component).forwardingPaths = response.forwardingPaths;
-                    onChange();
-                });
-            } else {
-                onChange();
-            }
-        };
-
-        this.$scope.isPNF = (): boolean => {
-            return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.PNF;
-        };
-
-        this.$scope.isConfiguration = (): boolean => {
-            return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.CONFIGURATION;
-        };
-
-        this.$scope.preventMoveTab = (state: boolean): void => {
-            this.$scope.disabledTabs = state;
-        };
-
-        this.eventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload);
-
-        this.$scope.registerCreateInstanceEvent = (callback: Function): void => {
-            this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE, callback);
-        };
-
-        this.$scope.unregisterCreateInstanceEvent = (): void => {
-            this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE);
-        };
-
-        this.$scope.registerChangeComponentInstanceNameEvent = (callback: Function): void => {
-            this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, callback);
-        };
-
-        this.$scope.unregisterChangeComponentInstanceNameEvent = (): void => {
-            this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED);
-        };
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
deleted file mode 100644
index c2d6007edc..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
+++ /dev/null
@@ -1,159 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="workspace-composition">
-    <loader data-display="isLoading"></loader>
-    <div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}">
-        <palette current-component="currentComponent"
-                 is-view-only="isViewOnly || isCanvasTagging"
-                 is-loading="isLoading"></palette>
-
-        <ng2-palette-popup-panel></ng2-palette-popup-panel>
-
-        <composition-graph component="currentComponent" data-tests-id="canvas"
-                           is-view-only="isViewOnly" with-sidebar="displayDesignerRightSidebar"></composition-graph>
-    </div>
-
-    <div class="w-sdc-designer-sidebar-toggle" data-ng-class="{'active': displayDesignerRightSidebar}"
-         data-ng-init="displayDesignerRightSidebar = true"
-         data-ng-click="displayDesignerRightSidebar = !displayDesignerRightSidebar">
-        <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div>
-    </div>
-
-    <div class="w-sdc-designer-sidebar" data-ng-class="{'view-mode':isViewOnly}">
-
-        <div ng-if="!selectedZoneInstance">
-
-            <div class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head">
-                <div class="w-sdc-designer-sidebar-logo-ph">
-                    <div class=" large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}"
-                    ng-class="{'archive-component':selectedComponent.archived}">
-                        <div ng-if="isComponentInstanceSelected()"
-                            data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
-                            tooltips tooltip-side="top" tooltip-content="Not certified"></div>
-                    </div>
-                </div>
-
-                <div class="w-sdc-designer-sidebar-logo">
-                <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips
-                        tooltip-class="tooltip-custom break-word-tooltip"
-                        tooltip-content="&#8203;{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
-                        data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
-                </div>
-                <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
-                    data-tests-id="renameInstance"
-                    data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
-                    data-ng-click="openUpdateModal()" id="editPencil"></div>
-
-                <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
-                    data-tests-id="deleteInstance"
-                    data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
-                    data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
-            </div>
-
-            <div class="w-sdc-designer-sidebar-tabs">
-                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                        data-ui-sref="workspace.composition.details"
-                        tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information"
-                        data-tests-id="information-tab"
-                        data-ng-class="{'disabled': disabledTabs}">
-                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div>
-                </button>
-                <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"-->
-                        <!--ui-sref="workspace.composition.structure"-->
-                        <!--tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">-->
-                    <!--<div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>-->
-                <!--</button>-->
-                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                        data-ui-sref="workspace.composition.deployment"
-                        tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
-                        data-tests-id="deployment-artifact-tab"
-                        data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
-                        data-ng-class="{'disabled': disabledTabs}">
-                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
-                </button>
-                <button tooltips tooltip-class="tooltip-custom tab-tooltip"
-                        tooltip-content="{{selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'Properties and Attributes': 'Inputs'}}"
-                        class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                        data-ui-sref="workspace.composition.properties"
-                        data-tests-id="properties-and-attributes-tab"
-                        data-ng-class="{'disabled': disabledTabs}">
-                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
-                        ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div>
-                </button>
-                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                        data-ui-sref="workspace.composition.artifacts"
-                        data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
-                        tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts"
-                        data-ng-class="{'disabled': disabledTabs}">
-                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
-                </button>
-                <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
-                        data-ui-sref-active="active" ui-sref="workspace.composition.relations"
-                        tooltips tooltip-class="tooltip-custom tab-tooltip {{currentComponent.selectedInstance.isServiceProxy() ? '' : 'tooltip-rightside'}}"
-                        data-tests-id="requirements-and-capabilities"
-                        tooltip-content="Requirements and Capabilities"
-                        data-ng-class="{'disabled': disabledTabs}">
-                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
-                </button>
-                <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
-                        data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api"
-                        tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API"
-                        data-ng-class="{'disabled': disabledTabs}">
-                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
-                </button>
-                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                        data-ui-sref="workspace.composition.consumption"
-                        tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Operation Consumption"
-                        data-tests-id="service-consumption-tab"
-                        data-ng-if="(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
-                        data-ng-class="{'disabled': disabledTabs}">
-                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new import-icon"></div>
-                </button>
-                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                        data-ui-sref="workspace.composition.dependencies"
-                        tooltips tooltip-class="tooltip-custom tab-tooltip " tooltip-content="Service Dependencies"
-                        data-tests-id="service-dependency-tab"
-                        data-ng-if="(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
-                        data-ng-class="{'disabled': disabledTabs}">
-                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new dependencies-icon"></div>
-                </button>
-
-            </div>
-            <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
-
-        </div>
-
-        <!-- Solution for now to support policies and groups working with Angular 2 components -->
-        <!-- isCertified not relevant for group or policy -->
-        <!-- (selectedZoneInstanceType === ZoneInstanceType.GROUP || selectedZoneInstanceType === ZoneInstanceType.POLICY) -->
-        <div ng-if="selectedZoneInstance">
-            
-            <ng2-composition-panel
-                [is-loading]="isLoading"
-                [is-view-only]="isViewOnly || isCanvasTagging"
-                [selected-zone-instance-name]="selectedZoneInstance.instanceData.name"
-                [selected-zone-instance-id]="selectedZoneInstance.instanceData.uniqueId"
-                [selected-zone-instance-type]="selectedZoneInstance.type"
-                [topology-template]="currentComponent"
-            >
-            </ng2-composition-panel>
-        </div>       
-
-        <loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader>
-
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
deleted file mode 100644
index f37a492572..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
+++ /dev/null
@@ -1,955 +0,0 @@
-    .i-sdc-designer-leftbar-section-popup-panel {
-        position: absolute;
-        display: inline-block;
-        background-color: white;
-        border: solid 1px #d2d2d2;
-        border-top: solid 3px #13a7df;
-        width: 140px;
-        height: 40px;
-        z-index: 10000;
-    }
-
-    .i-sdc-designer-leftbar-section-popup-panel-group {
-        padding-left: 8px;
-        padding-top: 8px;
-    }
-
-    .i-sdc-designer-leftbar-section-popup-panel-plus {
-        border-radius: 50%;
-        color: white;
-        background-color: #13a7df;
-        width: 20px;
-        text-align: center;
-        display: inline-block;
-        cursor: pointer;
-    }
-
-    .i-sdc-designer-leftbar-section-popup-panel-title {
-        padding-left: 10px;
-        display: inline-block;
-    }
-
-.composition{
-    .sdc-workspace-container{
-        .w-sdc-main-container{
-            .w-sdc-main-right-container{
-                left:0;
-                //overflow-y: scroll;
-                .sdc-workspace-top-bar {
-                    padding-left: 295px;
-                    .not-latest{
-                        left: 270px;
-                    }
-                }
-                .w-sdc-main-container-body-content{
-                    padding: 0 0 0 247px;
-                }
-
-                > div:first-child{
-                    padding: 0;
-                }
-            }
-        }
-    }
-
-    .custom-modal {
-        /* Hack solution to hide canvas tooltips under modals */
-        z-index: 20000 !important;
-    }
-}
-
-.workspace-composition {
-    height:100%;
-    display: block;
-    text-align: left;
-    align-items: left;
-    padding: 0;
-
-
-
-    // ---------------------------------------------------------------------------------------------------
-    // Sidebar
-    // ---------------------------------------------------------------------------------------------------
-
-
-
-    .w-sdc-designer-sidebar-toggle {
-        background-color: @main_color_p;
-        border-left: 1px solid @main_color_o;
-        border-bottom: 1px solid @main_color_o;
-        height: 21px;
-        position: absolute;
-        right: 0;
-        top: 53px;
-        width: 17px;
-        transition: right 0.2s;
-        z-index: 10;
-        .box-shadow(-1px 1px 3px 0  @main_color_n);
-
-        &.active {
-            right: 302px;
-            .w-sdc-designer-sidebar-toggle-icon{
-                transform: rotate(180deg);
-            }
-        }
-
-    }
-
-    .w-sdc-designer-sidebar-toggle-icon {
-        margin-left: 6px;
-        margin-top: 6px;
-    }
-
-    .w-sdc-designer-sidebar {
-        background-color:@main_color_p ;
-        .noselect;
-        bottom: 0;
-        position: fixed;
-        right: -302px;
-        width: 302px;
-        top: 103px;
-        transition: right 0.2s;
-        z-index: 9;
-        .box-shadow(-7px -3px 6px -8px @main_color_n);
-
-    }
-
-    .w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar {
-        right: 0;
-
-    }
-
-    .w-sdc-designer-sidebar-head {
-        padding: 36px 30px 30px 30px;
-        height: 120px;
-    }
-
-    .w-sdc-designer-sidebar-logo-ph {
-        display: inline-block;
-        vertical-align: middle;
-        line-height: 60px;
-        height: 60px;
-    }
-
-    .w-sdc-designer-sidebar-logo {
-        .g_6;
-        display: inline-block;
-        margin-left: 10px;
-        font-weight: 500;
-    }
-
-    .w-sdc-designer-sidebar-logo-title {
-        .s_16_r;
-        .selectable;
-        vertical-align: middle;
-        text-overflow: ellipsis;
-        max-width: 167px;
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-
-    .w-sdc-designer-update-resource-icon {
-        .hand;
-        position: absolute;
-        right: 20px;
-        top: 10px;
-    }
-
-    .w-sdc-designer-delete-resource-icon {
-        .hand;
-        position: absolute;
-        right: 40px;
-        top: 10px;
-    }
-
-    .w-sdc-designer-restore-button {
-        .hand;
-        position:absolute;
-        right: 20px;
-        top:10px;
-        width:65px;
-    }
-    .w-sdc-designer-sidebar-tabs {
-        .bg_c;
-    }
-
-    .w-sdc-designer-sidebar-tabs::after {
-        clear: both;
-        content: '';
-        display: table;
-    }
-
-    .i-sdc-designer-sidebar-tab {
-        background-color: @main_color_p;
-        border: 1px solid @tlv_color_u;;
-        border-left: none;
-        display: inline-block;
-        float: left;
-        height: 36px;
-        padding-top: 9px;
-        text-align: center;
-        width: 60px;
-        .hand;
-
-        &:focus {
-            outline: none;
-        }
-        &.tab-disabled {
-            /* .disabled; */
-        }
-        &.active, &:hover:enabled {
-            background-color: @tlv_color_u;
-            .i-sdc-designer-sidebar-tab-icon {
-                opacity: 1;
-
-
-            }
-
-        }
-
-        div& {
-            padding-top: 0;
-        }
-        /*for tooltip on disabled buttons*/
-    }
-
-    .i-sdc-designer-sidebar-tab-icon {
-        margin-top: 5px ;
-        &.import-icon {
-            transform: rotate(270deg);
-        }
-        //  opacity: .4;
-    }
-
-    .w-sdc-designer-sidebar-tab-content {
-        .perfect-scrollbar;
-        height: 100%;
-    }
-
-    .w-sdc-designer-sidebar-tab-content-view {
-        position: absolute;
-        top: 156px;
-        bottom: 0;
-        width: 100%;
-        padding-bottom: 10px;
-
-    }
-
-    .w-sdc-designer-sidebar-section {
-    }
-
-    .w-sdc-designer-sidebar-section-title {
-        .m_14_m;
-        background-color: @tlv_color_u;
-        .hand;
-        clear: both;
-        height: 32px;
-        line-height: 32px;
-        margin-top: 1px;
-        padding: 0 10px 0 20px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        position: relative;
-        width: 100%;
-        display: block;
-
-        &.expanded {
-            .w-sdc-designer-sidebar-section-title-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    .w-sdc-designer-sidebar-section-title-text {
-        max-width: 240px;
-        display: inline-block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        position: relative;
-    }
-
-    .w-sdc-designer-sidebar-section-title-icon {
-        .hand;
-        .sprite-new;
-        .arrow-up;
-        right: 16px;
-        top: 13px;
-        transition: .3s all;
-        position: absolute;
-    }
-
-    .w-sdc-designer-sidebar-section-content {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .w-sdc-designer-sidebar-section-title {
-        text-transform: uppercase;
-    }
-
-    .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content {
-        margin: 0 auto;
-    }
-
-    .w-sdc-designer-sidebar-section-title.expanded + .w-sdc-designer-sidebar-section-content {
-        margin: 0 auto 1px;
-
-    }
-
-    .i-sdc-designer-sidebar-section-content-item {
-        .b_7;
-        font-size: 13px;
-        margin-bottom: 5px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        //max-width: 250px;
-
-        &.description {
-            margin-top: 28px;
-            white-space: normal;
-            word-wrap: break-word;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-tag {
-        .g_7;
-        .bg_c;
-        border-radius: 4px;
-        //fix long name for firefox:
-        display: block;
-        float: left;
-        line-height: 25px;
-        margin: 0 4px 6px 0;
-        min-width: 50px;
-        padding: 0 9px;
-        text-align: center;
-        max-width: 280px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .w-sdc-designer-sidebar-section-footer {
-        margin-top: 10px;
-        text-align: center;
-        width: 100%;
-    }
-
-
-
-    .w-sdc-designer-sidebar-section-footer-action {
-        width: 180px;
-        margin-top: 10px;
-    }
-
-    //////////////////////Relationship
-    .w-sdc-designer-sidebar-section-requirements {
-        border-bottom: 1px solid @color_e;
-        margin: 0 13px 20px 13px;
-        padding: 15px 0 0;
-    }
-
-    .w-sdc-designer-sidebar-section-requirements-item {
-        margin-bottom: 20px;
-    }
-
-    .w-sdc-designer-sidebar-section-requirements-label {
-        display: inline-block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-        white-space: nowrap;
-        width: 102px;
-    }
-
-    .w-sdc-designer-sidebar-section-requirements-select {
-        border: 1px solid @color_e;
-        min-height: 30px;
-        padding: 4px 13px;
-        width: 168px;
-    }
-
-    //////////////////////Properties
-    .i-sdc-designer-sidebar-section-content-item-property-and-attribute {
-        .b_7;
-        border-bottom: 1px solid @color_e;
-        min-height: 72px;
-        padding: 15px 10px 10px 18px;
-        position: relative;
-
-        &:first-child {
-            //margin-top: -18px;
-        }
-
-        &:hover {
-            // .bg_c_hover;
-            .bg_c;
-            transition: all .3s;
-
-            .i-sdc-designer-sidebar-section-content-item-button {
-                display: block;
-            }
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 200px;
-        white-space: nowrap;
-        display: inline-block;
-        &:hover {
-            .a_7;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-property-value {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 200px;
-        display: inline-block;
-        white-space: nowrap;
-
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-property-label-value {
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-button {
-        display: none;
-        position: absolute;
-        top: 25px;
-
-        &.update {
-            background-color: transparent;
-            border: 0;
-            right: 60px;
-        }
-
-        &.delete {
-            background-color: transparent;
-            border: 0;
-            right: 13px;
-        }
-
-        &.download {
-            background-color: transparent;
-            border: 0;
-            right: 35px;
-        }
-
-        &.download-env {
-            background-color: transparent;
-            border: 0;
-            right: 35px;
-            margin-top: 65px;
-        }
-
-        &.update-env {
-            background-color: transparent;
-            border: 0;
-            right: 15px;
-            margin-top: 65px;
-        }
-
-        &.attach {
-            background-color: transparent;
-            border: 0;
-            right: 15px;
-        }
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Canvas
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-designer-canvas {
-        height:100%;
-        .noselect;
-        .bg_c;
-        bottom: 0;
-        // position: fixed;
-        //right: 0;
-        //left: 240px;
-        //top: 94px;
-        .view-mode{
-            background-color: #f8f8f8;
-            border:0;
-        }
-    }
-
-    .w-sdc-designer-canvas.sidebaractive {
-        //right: 300px;
-    }
-
-    .w-sdc-designer-element {
-        .hand;
-        width: 200px;
-        height: 100px;
-        position: absolute;
-        text-align: center;
-        top: 50%;
-        margin-top: -200px;
-        left: 50%;
-        margin-left: -50px;
-    }
-
-    .w-sdc-designer-resource-label {
-        .q_7;
-    }
-
-    .w-sdc-designer-resource-label-indicator {
-        .bg_q;
-        border-radius: 50%;
-        display: inline-block;
-        height: 10px;
-        margin-right: 6px;
-        vertical-align: middle;
-        width: 10px;
-
-        &.valid {
-            .bg_l;
-        }
-
-        &.invalid {
-            .bg_h;
-        }
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Leftbar
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-designer-leftbar {
-        background-color:  @main_color_p;
-        bottom: 0;
-        left: 0;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        position: absolute;
-        top: 0;
-        width: 244px;
-        .box-shadow(7px -3px 6px -8px @main_color_n);
-
-    }
-
-    .w-sdc-designer-leftbar-title {
-
-        .p_16_m;
-        background-color:  @main_color_n;
-        line-height: 40px;
-        padding: 0 17px;
-    }
-
-    .w-sdc-designer-leftbar-title-count {
-        float: right;
-    }
-
-    .w-scd-diagram-container {
-        // left: 240px;
-        //right: 300px;
-    }
-
-    .w-sdc-designer-leftbar-search {
-        background-color:  @tlv_color_u;
-        padding: 10px;
-        white-space: nowrap;
-        position: relative;
-    }
-
-    .w-sdc-designer-leftbar-search-input {
-        border: 1px solid @color_e;
-        .border-radius(4px);
-        height: 30px;
-        margin: 0;
-        padding: 0px 28px 3px 10px;
-        vertical-align: 4px;
-        width: 100%;
-        outline: none;
-        font-style: italic;
-    }
-
-    .w-sdc-designer-leftbar-search-filter {
-
-    }
-
-    .i-sdc-designer-leftbar-section {
-        .hand;
-    }
-
-    .i-sdc-designer-leftbar-section-title {
-        .m_14_m;
-        background-color:  @tlv_color_u;
-        .hand;
-        clear: both;
-        height: 40px;
-        line-height: 40px;
-        margin-top: 1px;
-        padding: 0 10px;
-        position: relative;
-        text-transform: uppercase;
-        font-weight: bold;
-    }
-
-    .i-sdc-designer-leftbar-section-title-icon {
-        .hand;
-        .sprite-new;
-        .arrow-up;
-        width: 15px;
-        height: 9px;
-        position: absolute;
-        right: 13px;
-        top: 18px;
-        transition: .3s all;
-    }
-
-    .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-title-icon {
-        transform: rotate(180deg);
-        margin-right: 2px;
-    }
-
-    .i-sdc-designer-leftbar-section-content {
-        background-color:  @main_color_o;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item {
-        background-color:  @main_color_p;
-        overflow: hidden;
-
-        &:hover {
-            background-color:  @main_color_p;
-        }
-
-        .cp{
-            margin: 6px;
-        }
-
-        .vl{
-            margin: 6px;
-        }
-    }
-
-    .i-sdc-designer-leftbar-section-content-subcat {
-        .m_14_m;
-        background-color:  @tlv_color_t;
-        line-height: 35px;
-        padding: 0 10px;
-        cursor: default;
-
-
-        &:hover {
-            background-color:  @func_color_r;
-        }
-
-
-    }
-
-    .i-sdc-designer-leftbar-section .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item {
-        max-height: 0px;
-        margin: 0 auto;
-        transition: all .3s;
-    }
-
-    .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item {
-        max-height: 64px;
-        margin: 0 auto 1px auto;
-        //  padding: 4px 13px;
-    }
-
-    .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-subcat {
-        margin: 0;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item-icon-ph {
-        display: inline-block;
-        margin: 12px 0 12px 10px;
-        pointer-events: auto;
-        height: 45px;
-        width: 40px;
-        float: left;
-        display: flex;
-        align-items: center;
-        .non-certified {
-            position: relative;
-            left: -4px;
-            top: -4px;
-            .sprite;
-            .s-sdc-state-non-certified;
-            display: block;
-
-            &.smaller-icon {
-                bottom: 6px;
-                left: 13px;
-            }
-        }
-
-
-
-    }
-
-    .non-certified {
-        position: relative;
-        left: 0px;
-        top: 0px;
-        .sprite;
-        .s-sdc-state-non-certified;
-        display: block;
-
-        &.smaller-icon {
-            left: 35px;
-            bottom: -14px;
-        }
-    }
-    /*
-    .i-sdc-composition-leftbar-section-content-item-icon {
-        background-image: url('../../../styles/images/resource-icons/default.png');
-        // position: absolute;
-        right: 20px;
-        top: 10px;
-        height: 40px;
-        width: 40px;
-        background-size: 40px;
-    }
-    */
-
-    .i-sdc-designer-leftbar-section-content-item-info {
-        display: inline-block;
-        // margin-left: 10px;
-        //overflow: hidden;
-        // vertical-align: middle;
-        width: 160px;
-        padding: 0 0 0 10px;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item-info-title {
-        .m_13_m;
-        line-height: 14px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 120px;
-        display: inline-block;
-        white-space: nowrap;
-        vertical-align: bottom;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item-info-text {
-        .m_13_r;
-        line-height: 15px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item-info-text-link {
-        color: @color_s;
-        text-decoration: underline;
-        float: right;
-        position: absolute;
-        right: 17px;
-        // bottom: 5px;
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Form actions
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-form-actions-container.add-property {
-        text-align: center;
-        width: 100%;
-        margin-top: 2px;
-        margin-bottom: 12px;
-
-        .w-sdc-form-action {
-            width: 245px;
-        }
-        .w-sdc-form-action.add-property-add-another {
-            .bg_a;
-            margin-left: 35px;
-        }
-        .w-sdc-form-action.add-property-done {
-            margin-left: 312px;
-        }
-        .w-sdc-form-action.save {
-            margin-left: 327px;
-            margin-bottom: 30px;
-        }
-
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Top menu
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-header-menu {
-        padding: 25px 0;
-        text-align: center;
-        white-space: nowrap;
-    }
-
-    .i-sdc-header-menu-item {
-        cursor: pointer;
-        display: inline-block;
-        height: 43px;
-        min-width: 93px;
-        padding: 0 38px;
-        position: relative;
-        vertical-align: middle;
-
-        &::after {
-            border-right: 1px solid @color_m;
-            content: '';
-            display: block;
-            height: 43px;
-            right: 0;
-            position: absolute;
-            top: 0;
-            width: 2px;
-        }
-
-        &:first-child {
-            &::before {
-                border-right: 1px solid @color_m;
-                content: '';
-                display: block;
-                height: 43px;
-                left: 0;
-                position: absolute;
-                top: 0;
-                width: 2px;
-            }
-        }
-    }
-
-    .i-sdc-header-menu-item-icon {
-        display: inline-block;
-        height: 20px;
-        width: 28px;
-    }
-
-    .i-sdc-header-menu-item-label {
-        .g_1;
-        line-height: 18px;
-    }
-
-    .service-path-buttons {
-       margin-top: 12px;
-       position: absolute;
-       right:  70px;
-       top: 53px;
-       &.with-sidebar {
-           right: 380px;
-       }
-    }
-    //Canvas search menu
-    .w-sdc-search-menu {
-        position:absolute;
-        right: 18px;
-        top:53px;
-        transition: right 0.2s;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        margin-right:10px;
-        pointer-events: none;
-
-        & > * {
-            pointer-events: all;
-        }
-
-        &.with-sidebar {
-            right:320px;
-        }
-
-        .search-with-autocomplete-container.composition-search {
-            margin-top: 12px;
-
-            .search-bar-input {
-                width: 250px;
-                padding:2px 50px 2px 10px;
-                transition:all 0.4s;
-            }
-            .search-bar-container {
-                position:relative;
-            }
-
-            &:not(:hover):not(.autocomplete-visible):not(.active){
-                border-radius: 0;
-                box-shadow:none;
-
-                .search-bar-input:not(:focus){
-                    width: 0px;
-                    padding:0;
-                    border:none;
-                }
-                .clear-search-x {
-                    display:none;
-                }
-                .search-bar-input:not(:focus) ~ .search-bar-button {
-                    border-radius: 2px;
-                    border:solid 1px #fff;
-                }
-            }
-        }
-
-        .zoom-icons {
-            border:solid 1px #fff;
-            border-radius: 2px;
-            box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
-            background-color:  rgba(234, 234, 234, 0.88);
-            background-repeat: no-repeat;
-            margin-top: 10px;
-
-            &:hover {
-                cursor:pointer;
-            }
-
-            &:active {
-                border:none;
-                background-color:  rgba(31, 171, 223, 0.88);
-            }
-        }
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Canvas inline menu
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-canvas-menu-list {
-        .w-sdc-canvas-menu-item-view {
-            &::before {
-                content: '';
-                display: inline-block;
-
-                .sprite-new;
-                .view-icon;
-                vertical-align: top;
-                margin: 2px 6px 2px 4px;
-            }
-        }
-
-        .w-sdc-canvas-menu-item-delete {
-            &::before {
-                content: '';
-                display: inline-block;
-
-                .sprite-new;
-                .delete-icon;
-                vertical-align: bottom;
-                margin: 1px 10px 0 7px;
-            }
-        }
-    }
-}
-/*.right-tab-loader {
-    border: 16px solid #f3f3f3; !* Light grey *!
-    border-top: 16px solid #3498db; !* Blue *!
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-}*/
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
deleted file mode 100644
index 2af341b2c1..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
+++ /dev/null
@@ -1,352 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {
-    ArtifactModel,
-    Service,
-    IAppConfigurtaion,
-    Resource,
-    Component,
-    ComponentInstance,
-    ArtifactGroupModel,
-    IFileDownload
-} from "app/models";
-import {ICompositionViewModelScope} from "../../composition-view-model";
-import {ArtifactsUtils, ModalsHandler, ArtifactGroupType} from "app/utils";
-import {GRAPH_EVENTS} from "app/utils/constants";
-import {EventListenerService} from "app/services/event-listener-service";
-import {Dictionary} from "../../../../../../utils/dictionary/dictionary";
-
-export interface IArtifactsViewModelScope extends ICompositionViewModelScope {
-    artifacts:Array<ArtifactModel>;
-    artifactType:string;
-    downloadFile:IFileDownload;
-    isLoading:boolean;
-    allowDeleteAndUpdateArtifactMap:Dictionary<string, boolean>;
-    getTitle():string;
-    addOrUpdate(artifact:ArtifactModel):void;
-    delete(artifact:ArtifactModel):void;
-    download(artifact:ArtifactModel):void;
-    openEditEnvParametersModal(artifact:ArtifactModel):void;
-    getEnvArtifact(heatArtifact:ArtifactModel):any;
-    getEnvArtifactName(artifact:ArtifactModel):string;
-    isLicenseArtifact(artifact:ArtifactModel):boolean;
-    isVfOrPnf():boolean;
-    //isVFiArtifact(artifact:ArtifactModel):boolean;
-}
-
-export class ResourceArtifactsViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        '$state',
-        'sdcConfig',
-        'ArtifactsUtils',
-        'ModalsHandler',
-        '$q',
-        'EventListenerService'
-    ];
-
-    constructor(private $scope:IArtifactsViewModelScope,
-                private $filter:ng.IFilterService,
-                private $state:any,
-                private sdcConfig:IAppConfigurtaion,
-                private artifactsUtils:ArtifactsUtils,
-                private ModalsHandler:ModalsHandler,
-                private $q:ng.IQService,
-                private eventListenerService: EventListenerService) {
-
-        this.initScope();
-    }
-
-
-    private initArtifactArr = (artifactType:string):void => {
-        let artifacts:Array<ArtifactModel> = [];
-
-        if (this.$scope.selectedComponent) {
-            if ('interface' == artifactType) {
-                let interfaces = this.$scope.currentComponent.interfaces;
-                if (interfaces && interfaces.standard && interfaces.standard.operations) {
-
-                    angular.forEach(interfaces.standard.operations, (operation:any, interfaceName:string):void => {
-                        let item:ArtifactModel = <ArtifactModel>{};
-                        if (operation.implementation) {
-                            item = <ArtifactModel> operation.implementation;
-                        }
-                        item.artifactDisplayName = interfaceName;
-                        item.artifactLabel = interfaceName;
-                        item.mandatory = false;
-                        artifacts.push(item);
-                    });
-                }
-            } else {
-                //init normal artifacts, deployment or api artifacts
-                let artifactsObj:ArtifactGroupModel;
-                switch (artifactType) {
-                    case "api":
-                        artifactsObj = (<Service>this.$scope.currentComponent).serviceApiArtifacts;
-                        break;
-                    case "deployment":
-                        if (!this.$scope.isComponentInstanceSelected()) {
-                            artifactsObj = this.$scope.currentComponent.deploymentArtifacts;
-                        } else {
-                            artifactsObj = this.$scope.currentComponent.selectedInstance.deploymentArtifacts;
-                        }
-                        break;
-                    default:
-                        //artifactsObj = this.$scope.selectedComponent.artifacts;
-                        if (!this.$scope.isComponentInstanceSelected()) {
-                            artifactsObj = this.$scope.currentComponent.artifacts;
-                        } else {
-                            artifactsObj = this.$scope.currentComponent.selectedInstance.artifacts;
-                        }
-                        break;
-                }
-                _.forEach(artifactsObj, (artifact:ArtifactModel, key) => {
-                    artifacts.push(artifact);
-                });
-            }
-        }
-        this.$scope.artifacts = artifacts;
-        this.$scope.allowDeleteAndUpdateArtifactMap = new Dictionary<string, boolean>();
-        _.forEach(this.$scope.artifacts, (artifact:ArtifactModel)=>{
-            this.$scope.allowDeleteAndUpdateArtifactMap[artifact.artifactLabel] = this.allowDeleteAndUpdateArtifact(artifact);
-        });
-        this.$scope.isLoading = false;
-        this.$scope.preventMoveTab(false);
-    };
-
-
-    private convertToArtifactUrl = (artifactType:string):string => {
-
-        switch (artifactType) {
-            case 'deployment':
-                return 'DEPLOYMENT';
-            case 'api':
-                return 'SERVICE_API';
-            default:
-                return 'INFORMATIONAL';
-        }
-
-    }
-
-    private loadComponentArtifactIfNeeded = (forceLoad?: boolean) => {
-
-        let onGetComponentArtifactsSuccess = (artifacts:ArtifactGroupModel)=> {
-            switch (this.$scope.artifactType) {
-                case 'deployment':
-                    this.$scope.currentComponent.deploymentArtifacts = artifacts;
-                    break;
-                case 'api':
-                    (<Service>this.$scope.currentComponent).serviceApiArtifacts = artifacts;
-                    break;
-                default:
-                    this.$scope.currentComponent.artifacts = artifacts;
-                    break;
-            }
-            this.$scope.isLoading = false;
-            this.initArtifactArr(this.$scope.artifactType);
-        }
-
-        let onError = ()=> {
-            this.$scope.isLoading = false;
-        };
-
-        switch (this.$scope.artifactType) {
-            case 'deployment':
-                if(forceLoad || !this.$scope.currentComponent.deploymentArtifacts) {
-                    this.$scope.component.getArtifactByGroupType(this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetComponentArtifactsSuccess, onError);
-                } else {
-                    this.initArtifactArr(this.$scope.artifactType);
-                }
-
-                break;
-            case 'api':
-                if(!(<Service>this.$scope.currentComponent).serviceApiArtifacts) {
-                    this.$scope.component.getArtifactByGroupType(this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetComponentArtifactsSuccess, onError);
-                } else {
-                    this.initArtifactArr(this.$scope.artifactType);
-                }
-                break;
-            default:
-                if(!this.$scope.currentComponent.artifacts) {
-                    this.$scope.component.getArtifactByGroupType(this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetComponentArtifactsSuccess, onError);
-                } else {
-                    this.initArtifactArr(this.$scope.artifactType);
-                }
-                break;
-        }
-    }
-    private loadArtifacts = (forceLoad?: boolean):void => {
-
-        let onGetInstanceArtifactsSuccess = (artifacts:ArtifactGroupModel)=> {
-            switch (this.$scope.artifactType) {
-                case 'deployment':
-                    this.$scope.currentComponent.selectedInstance.deploymentArtifacts = artifacts;
-                    break;
-                default:
-                    this.$scope.currentComponent.selectedInstance.artifacts = artifacts;
-                    break;
-            }
-            this.initArtifactArr(this.$scope.artifactType);
-        };
-
-        let onError = ()=> {
-            this.$scope.isLoading = false;
-        };
-
-        this.$scope.isLoading = true;
-        this.$scope.preventMoveTab(true);
-        if (this.$scope.isComponentInstanceSelected()) {
-            this.$scope.component.getComponentInstanceArtifactsByGroupType(this.$scope.component.selectedInstance.uniqueId, this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetInstanceArtifactsSuccess, onError);
-        } else {
-            this.loadComponentArtifactIfNeeded(forceLoad);
-        }
-    }
-
-    private updateArtifactsIfNeeded = ():void => {
-        if (this.$scope.artifactType === "deployment") {
-            this.loadArtifacts(true);
-        } else {
-            this.initArtifactArr(this.$scope.artifactType);
-        }
-    };
-
-    private openEditArtifactModal = (artifact:ArtifactModel):void => {
-        this.ModalsHandler.openArtifactModal(artifact, this.$scope.currentComponent).then(():void => {
-            this.updateArtifactsIfNeeded();
-        });
-    };
-
-    private allowDeleteAndUpdateArtifact = (artifact:ArtifactModel):boolean => {
-    if(!this.$scope.isViewMode()){
-        if(this.$scope.isComponentInstanceSelected()){//is artifact of instance
-            return !this.$scope.selectedComponent.deploymentArtifacts || !this.$scope.selectedComponent.deploymentArtifacts[artifact.artifactLabel];//if the artifact is not from instance parent
-        }else{//is artifact of main component
-            return (!artifact.isHEAT() && !artifact.isThirdParty() && !this.$scope.isLicenseArtifact(artifact));
-        }
-    }
-    return false;
-};
-
-    private initScope = ():void => {
-
-        this.$scope.isLoading = false;
-        this.$scope.artifactType = this.artifactsUtils.getArtifactTypeByState(this.$state.current.name);
-        this.$scope.getTitle = ():string => {
-            return this.artifactsUtils.getTitle(this.$scope.artifactType, this.$scope.currentComponent);
-        };
-
-        // Bug 310499 - user should be unable to delete RI artifact. (also talked to David and agreed this function isn't necessary)
-        // this.$scope.isVFiArtifact = (artifact:ArtifactModel):boolean=> {
-        //     if (artifact.artifactGroupType === ArtifactGroupType.INFORMATION) {//fix DE256847
-        //         return this.$scope.currentComponent.artifacts && (!this.$scope.currentComponent.artifacts[artifact.artifactLabel] || !this.$scope.currentComponent.artifacts[artifact.artifactLabel].artifactName);
-        //     }
-        //     return this.$scope.currentComponent.selectedInstance && this.$scope.currentComponent.selectedInstance.deploymentArtifacts && this.$scope.currentComponent.selectedInstance.deploymentArtifacts[artifact.artifactLabel];
-        // };
-
-        this.$scope.addOrUpdate = (artifact:ArtifactModel):void => {
-            this.artifactsUtils.setArtifactType(artifact, this.$scope.artifactType);
-            let artifactCopy = new ArtifactModel(artifact);
-            this.openEditArtifactModal(artifactCopy);
-        };
-
-
-        this.$scope.delete = (artifact:ArtifactModel):void => {
-
-            let onOk = ():void => {
-                this.$scope.isLoading = true;
-                this.artifactsUtils.removeArtifact(artifact, this.$scope.artifacts);
-
-                let success = (responseArtifact:ArtifactModel):void => {
-                    this.initArtifactArr(this.$scope.artifactType);
-                    this.$scope.isLoading = false;
-                };
-
-                let error = (error:any):void => {
-                    console.log('Delete artifact returned error:', error);
-                    this.initArtifactArr(this.$scope.artifactType);
-                    this.$scope.isLoading = false;
-                };
-                if (this.$scope.isComponentInstanceSelected()) {
-                    this.$scope.currentComponent.deleteInstanceArtifact(artifact.uniqueId, artifact.artifactLabel).then(success, error);
-                } else {
-                    this.$scope.currentComponent.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(success, error);//TODO simulate error (make sure error returns)
-                }
-            };
-            let title:string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE");
-            let message:string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}");
-            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-        };
-
-
-        this.$scope.getEnvArtifact = (heatArtifact:ArtifactModel):any=> {
-            return _.find(this.$scope.artifacts, (item:ArtifactModel)=> {
-                return item.generatedFromId === heatArtifact.uniqueId;
-            });
-        };
-
-        this.$scope.getEnvArtifactName = (artifact:ArtifactModel):string => {
-            let envArtifact = this.$scope.getEnvArtifact(artifact);
-            if (envArtifact) {
-                return envArtifact.artifactDisplayName;
-            }
-        };
-
-        this.$scope.isLicenseArtifact = (artifact:ArtifactModel):boolean => {
-            let isLicense:boolean = false;
-            if (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) {
-                isLicense = this.artifactsUtils.isLicenseType(artifact.artifactType);
-            }
-
-            return isLicense;
-        };
-
-        this.$scope.openEditEnvParametersModal = (artifact:ArtifactModel):void => {
-            this.ModalsHandler.openEditEnvParametersModal(artifact, this.$scope.currentComponent).then(()=> {
-                this.updateArtifactsIfNeeded();
-            }, ()=> {
-                // ERROR
-            });
-        };
-
-        this.$scope.isVfOrPnf = ():boolean => {
-            if (this.$scope.selectedComponent.isResource()) {
-                let selectedResourceType = (<Resource>this.$scope.selectedComponent).resourceType;
-                return selectedResourceType == 'VF' || selectedResourceType == 'PNF';
-            }
-            return false;
-        }
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, this.loadArtifacts);
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.loadArtifacts);
-
-        this.$scope.$on('$destroy', () => {
-
-            this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, this.loadArtifacts);
-            this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.loadArtifacts);
-        });
-
-        this.loadArtifacts();
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
deleted file mode 100644
index ec81ed81ee..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content artifacts">
-    <div class="w-sdc-designer-sidebar-section">
-        <loader data-display="isLoading"></loader>
-        <expand-collapse
-            expanded-selector=".w-sdc-designer-sidebar-section-content" class="w-sdc-designer-sidebar-section-title">
-            <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="getTitle()" tooltips tooltip-content="{{getTitle()}}"></span>
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <div class="i-sdc-designer-sidebar-section-content-item-artifact"
-                     data-ng-repeat="artifact in artifacts | orderBy: ['-mandatory', 'artifactDisplayName'] track by $index"
-                     data-ng-if="(!isComponentInstanceSelected() || artifact.esId) && 'HEAT_ENV' !== artifact.artifactType"
-                     data-tests-id="artifact-item-{{artifact.artifactDisplayName}}">
-                    <span data-ng-if="artifact.heatParameters.length" class="i-sdc-designer-sidebar-section-content-item-file-link"></span>
-                    <div class="i-sdc-designer-sidebar-section-content-item-artifact-details" data-ng-class="{'heat':artifact.isHEAT() && artifact.heatParameters.length}">
-                        <div class="i-sdc-designer-sidebar-section-content-item-artifact-filename" data-tests-id="artifactName-{{artifact.artifactDisplayName}}"
-                             data-ng-bind="artifact.artifactName" tooltips tooltip-content="{{artifact.artifactName}}"
-                              data-ng-if="artifact.artifactName"></div>
-                        <div>
-                            <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-name" data-tests-id="artifact_Display_Name-{{artifact.artifactDisplayName}}"
-                                  data-ng-class="{'hand enabled': allowDeleteAndUpdateArtifactMap[artifact.artifactLabel]}"
-                                  data-ng-bind="artifact.artifactDisplayName" data-ng-click="!isLoading && allowDeleteAndUpdateArtifactMap[artifact.artifactLabel] && addOrUpdate(artifact)"
-                                  tooltips tooltip-content="{{artifact.artifactDisplayName}}"></span>
-                            <div class="i-sdc-designer-sidebar-section-content-item-artifact-heat-env" ng-if="artifact.heatParameters.length">
-                                <span data-ng-bind="getEnvArtifactName(artifact)"data-tests-id="heat_env_{{artifact.artifactDisplayName}}"></span>
-                                <button class="i-sdc-designer-sidebar-section-content-item-button update-env sprite e-sdc-small-icon-pencil" data-tests-id="edit_{{artifact.artifactDisplayName}}"
-                                        data-ng-if="!isViewMode()" data-ng-click="addOrUpdate(getEnvArtifact(artifact))"></button>
-                                <download-artifact  class="i-sdc-designer-sidebar-section-content-item-button download-env sprite e-sdc-small-download hand"  artifact="getEnvArtifact(artifact)"
-                                                   component="currentComponent" instance="isComponentInstanceSelected()"
-                                                   data-tests-id="download_env_{{artifact.artifactDisplayName}}"></download-artifact>
-                            </div>
-                        </div>
-
-                        <div class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc">
-                            <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label" data-ng-show="artifact.description">Description:</span>{{artifact.description}}
-                        </div>
-                    </div>
-                    <button ng-if="artifact.esId && allowDeleteAndUpdateArtifactMap[artifact.artifactLabel]" class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
-                            data-tests-id="delete_{{artifact.artifactDisplayName}}" data-ng-click="delete(artifact)" type="button"></button>
-                    <button ng-if="!isViewMode()  && artifact.isHEAT() && isComponentInstanceSelected() && artifact.heatParameters.length"
-                            class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-pad"
-                            data-ng-click="openEditEnvParametersModal(getEnvArtifact(artifact))" type="button"
-                            data-tests-id="edit-parameters-of-{{artifact.artifactDisplayName}}"></button>
-                    <!--need to remove this button -->
-                    <button ng-if="!isViewMode()  && artifact.isHEAT() && !isComponentInstanceSelected()  && artifact.heatParameters.length"
-                            class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-pad"
-                            data-ng-click="openEditEnvParametersModal(artifact)" type="button"
-                            data-tests-id="edit-parameters-of-{{artifact.artifactDisplayName}}"></button>
-
-                    <download-artifact ng-if="artifact.esId && 'deployment' != artifactType" class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand"
-                                       artifact="artifact" component="currentComponent" data-tests-id="download_{{artifact.artifactDisplayName}}" instance="isComponentInstanceSelected()"></download-artifact>
-                    <download-artifact ng-if="artifact.esId && 'deployment' == artifactType" class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand"
-                                       artifact="artifact" component="currentComponent" instance="isComponentInstanceSelected()" data-tests-id="download_{{artifact.artifactDisplayName}}"
-                                       show-loader="artifact.isHEAT()"
-                                       download-icon-class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand"></download-artifact>
-                    <button ng-if="!isViewMode() && !artifact.esId && artifactType==='deployment' && !isComponentInstanceSelected() && !artifact.isThirdParty()" class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-upload"
-                            data-ng-click="addOrUpdate(artifact)" type="button" data-tests-id="add_Artifact"></button>
-                </div>
-            </div>
-
-        </div>
-        <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||isVfOrPnf()) && ('deployment' != artifactType || selectedComponent.isComplex())">
-            <button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="add_Artifact_Button" data-ng-click="addOrUpdate({})" type="button">Add Artifact</button>
-        </div>
-    </div>
-</perfect-scrollbar>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less
deleted file mode 100644
index 5256542788..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less
+++ /dev/null
@@ -1,173 +0,0 @@
-.w-sdc-designer-sidebar-tab-content.artifacts {
-
-    .i-sdc-designer-sidebar-section-content-item-artifact.hand {
-        .hand;
-    }
-
-    .w-sdc-designer-sidebar-section-content {
-        padding: 0;
-    }
-    .w-sdc-designer-sidebar-section-title {
-        &.expanded {
-            margin-bottom: 0;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-details {
-        display: inline-block;
-        margin-left: 5px;
-        vertical-align: middle;
-        width: 180px;
-        &.heat {
-            line-height: 18px;
-            width: 250px;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-details-name {
-        .s_14_r;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width:220px;
-        display: inline-block;
-        //text-transform: capitalize;
-        &.enabled {
-            &:hover {
-                .a_7;
-                font-family: @font-opensans-regular
-            }
-        }
-
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-heat-env {
-        .g_7;
-        margin-top: 6px;
-        line-height: 42px;
-        padding-top: 10px;
-        border-top:1px solid #c8cdd1;
-        .enabled {
-            &:hover {
-                .hand;
-                .a_7;
-            }
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-filename {
-        .g_7;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 225px;
-        display: inline-block;
-        .bold;
-        &.enabled {
-            &:hover {
-                .a_7;
-            }
-        }
-    }
-
-
-    .i-sdc-designer-sidebar-section-content-item-file-link{
-        border-left: 1px #848586 solid;
-        height: 58px;
-        margin-left: -11px;
-        margin-top: 11px;
-        border-top: 1px #848586 solid;
-        border-bottom: 1px #848586 solid;
-        width: 12px;
-        float: left;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-details-desc {
-        display: none;
-        line-height: 16px;
-        word-wrap: break-word;
-        white-space: normal;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label {
-        .b_3;
-    }
-
-
-    .i-sdc-designer-sidebar-section-content-item-artifact {
-        border-bottom: 1px solid #c8cdd1;
-        padding: 5px 10px 5px 18px;
-        position: relative;
-       // line-height: 36px;
-        min-height: 61px;
-        //cursor: default;
-        display: flex;
-        align-items: center;
-
-
-        .i-sdc-designer-sidebar-section-content-item-button {
-            top: 20px;
-            line-height: 10px;
-        }
-
-        &:hover {
-            //background-color: @color_c;
-            .bg_c;
-            transition: all .3s;
-
-            .i-sdc-designer-sidebar-section-content-item-button {
-                display: block;
-
-            }
-
-        }
-    }
-
-}
-
-///////////////////Lifecycle Management
-.i-sdc-designer-sidebar-section-content-item-lm {
-    .b_7;
-    border-bottom: 1px solid @color_e;
-    cursor: pointer;
-    height: 65px;
-    padding: 22px 0;
-    position: relative;
-
-    &:hover {
-        .bg_c_hover;
-        margin-left: -10px;
-        margin-right: -10px;
-        padding: 22px 10px;
-
-        .i-sdc-designer-sidebar-section-content-item-lm-icon {
-            right: 16px;
-        }
-    }
-}
-
-.i-sdc-designer-sidebar-section-content-item-lm:first-child {
-    margin-top: -18px;
-}
-
-.i-sdc-designer-sidebar-section-content-item-lm-icon {
-    position: absolute;
-    right: 6px;
-
-    //TODO: Replace the icons.
-    &.icon-view {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdGMDNBRUJDMDkxNjExRTVCMjRBOEI5QzMxQTlBQjY4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdGMDNBRUJEMDkxNjExRTVCMjRBOEI5QzMxQTlBQjY4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0YwM0FFQkEwOTE2MTFFNUIyNEE4QjlDMzFBOUFCNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0YwM0FFQkIwOTE2MTFFNUIyNEE4QjlDMzFBOUFCNjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4U2decAAABRUlEQVR42pyRPUvDUBSG39t2UyyaBgvWQZMqKoFq4lBH0U0UqXSxKPaPieCoWPAPKIgdjG1ohaghOrSR1iaLKMXpmnMhQVfPcLmc8zxwPhjnHFE4rx3eMO/w4rr4+vwQuZHRMcwqClaMVeRnplnEskg8O7/g96YJSZLgBz5+R0bKIAgC6IaBvdKukBP0HJ+cctu2cVCtQsrIUFUVlcp+LE6EItWIIVaIV9c3/PnRRqlcxkJeYV2vi+/hEO/9QSx6b56oEUMsOal6/TacQcXinCpaGE+n0QnljufFIuUoiAlZTk6iWFyD6zpoWi3RwvrmBlLJZCzRn3IUxBBLjlgO9e06T9ja3sGyrqPX66NtWQLWCgVks5Owmg1c1mpQ8vM4OqywP1s1w1PkpnJY0jTIsizy/sDHQ7sFmt0ITxJtlf33jj8CDADhB52tEX6ifAAAAABJRU5ErkJggg==');
-        height: 9px;
-        top: 29px;
-        width: 14px;
-    }
-
-    //TODO: Replace the icons.
-    &.icon-alert {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAYAAAB2HjRBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBM0YxQTBCMDkyMDExRTVBNzlCQUYxNEYwMDUwOTQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBM0YxQTBDMDkyMDExRTVBNzlCQUYxNEYwMDUwOTQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEEzRjFBMDkwOTIwMTFFNUE3OUJBRjE0RjAwNTA5NDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEEzRjFBMEEwOTIwMTFFNUE3OUJBRjE0RjAwNTA5NDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7exgceAAAB5klEQVR42oySy2tTQRTGfzN3cpvbpFTaUlzUjeCuVFyJf4DuCl34wL/CrbpUunLnwpUuFFy48IFiwYWhpYuW+gCLrbWKBQumaRIba5ub3MccJ5WECCV44MDMme873/lmBhGhnZulcn/3/sfrO7J/45R017pT0xUS2bC93vy2LAOLt5DfCeUn14RD4h/ysbHRDii/8pyo7DmFiP7VZ4Rbu9KT3I7i+qJklp7ibQt2J6HeNOhXV/gv8tDcbaLtXYLJKeTcZfxqSPPzvGu6ID3J1Q8z0ny/hIkM5swF8qenUFUfwixHCtd7Kwez04jOgEmc+hq6tuZ8N9E6xG5U+Pn2kRxKLs7eE7tRc0XlToRM2sD+2sGmDiY+kWsSFG528Kr1Xgfjfn0n5uElvFrrzVqVDHqkiTKjxCsV9LBx08QkgcY/eZH+89Oqo+x9eumkwQaQaoPEKWpsHHN8ArItgLt5UdiG6736mFLxixyQt+bviik8QPuaNFRIkjqQRZ2YJDo6QWydjTRtOcGPPdJKgnlxFfN9fVmGNhecR4U3mLrL6nPTRTQHXZO5+4jyyI4Iqs99GJvgBiKjcySlj3897y6/kbreI4w0QS7ASxrsa4/cXkxkIzK5PKmNqRMw7NfdeczA+Fn1R4ABAPnMAeCjkgf5AAAAAElFTkSuQmCC');
-        height: 13px;
-        top: 27px;
-        width: 15px;
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
deleted file mode 100644
index 36ceabfb42..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {Component, ModalModel, ButtonModel} from "app/models";
-import {GRAPH_EVENTS} from "app/utils";
-import {LeftPaletteLoaderService, EventListenerService} from "app/services";
-import {ICompositionViewModelScope} from "../../composition-view-model";
-import {LeftPaletteComponent} from "../../../../../../models/components/displayComponent";
-import {ComponentServiceFactoryNg2} from "app/ng2/services/component-services/component.service.factory";
-import {ServiceServiceNg2} from 'app/ng2/services/component-services/service.service';
-import {Service} from "app/models/components/service";
-import {ModalService} from 'app/ng2/services/modal.service';
-
-export interface IEditResourceVersion {
-    allVersions:any;
-    changeVersion:string;
-}
-
-interface IDetailsViewModelScope extends ICompositionViewModelScope {
-    isLoading:boolean;
-    $parent:ICompositionViewModelScope;
-    expandedSection:Array<string>;
-    editForm:ng.IFormController;
-    editResourceVersion:IEditResourceVersion;
-
-    onChangeResourceVersion():void;
-    alertBeforeChangeResourceVersion():void;
-    changeVersion():void;
-    cancelChangeResourceVersion():void;
-}
-
-export class DetailsViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        'LeftPaletteLoaderService',
-        'EventListenerService',
-        'ComponentServiceFactoryNg2',
-        'ServiceServiceNg2',
-        'ModalServiceNg2'
-    ];
-
-    constructor(private $scope:IDetailsViewModelScope,
-                private $filter:ng.IFilterService,
-                private LeftPaletteLoaderService:LeftPaletteLoaderService,
-                private eventListenerService:EventListenerService,
-                private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2,
-                private serviceService: ServiceServiceNg2,
-                private ModalServiceNg2: ModalService) {
-        this.initScope();
-    }
-
-    private clearSelectedVersion = ():void => {
-        this.$scope.editResourceVersion = {
-            allVersions: {},
-            changeVersion: null
-        };
-    };
-
-    private versioning:Function = (versionNumber:string):string => {
-        let version:Array<string> = versionNumber.split('.');
-        return '00000000'.slice(version[0].length) + version[0] + '.' + '00000000'.slice(version[1].length) + version[1];
-    };
-
-    private initEditResourceVersion = ():void => {
-        this.clearSelectedVersion();
-        this.$scope.editResourceVersion.allVersions[this.$scope.currentComponent.selectedInstance.componentVersion] = this.$scope.currentComponent.selectedInstance.componentUid;
-        _.merge(this.$scope.editResourceVersion.allVersions, angular.copy(this.$scope.selectedComponent.allVersions));
-        let sorted:any = _.sortBy(_.toPairs(this.$scope.editResourceVersion.allVersions), (item)=> {
-            return this.versioning(item[0]);
-        });
-        this.clearSelectedVersion();
-        _.forEach(sorted, (item)=> {
-            this.$scope.editResourceVersion.allVersions[item[0]] = item[1];
-        });
-
-        let highestVersion = _.last(Object.keys(this.$scope.selectedComponent.allVersions));
-
-        if (parseFloat(highestVersion) % 1) { //if highest is minor, make sure it is the latest checked in -
-            let latestVersionComponent:LeftPaletteComponent = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent), (component:LeftPaletteComponent) => { //latest checked in
-                return (component.systemName === this.$scope.selectedComponent.systemName
-                || component.uuid === this.$scope.selectedComponent.uuid);
-            }),(component)=>{return component.version});
-
-            let latestVersion:string = latestVersionComponent ? latestVersionComponent.version : highestVersion;
-
-            if (highestVersion != latestVersion) { //highest is checked out - remove from options
-                this.$scope.editResourceVersion.allVersions = _.omit(this.$scope.editResourceVersion.allVersions, highestVersion);
-            }
-        }
-        this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion;
-    };
-
-    private initScope = ():void => {
-        this.$scope.isLoading = false;
-        this.$scope.$parent.isLoading = false;
-        this.$scope.expandedSection = ['general', 'tags'];
-        //this.clearSelectedVersion();
-
-        this.$scope.$watch('selectedComponent', (component:Component) => {
-            if (this.$scope.isComponentInstanceSelected()) {
-                this.initEditResourceVersion();
-            }
-        });
-
-        this.$scope.onChangeResourceVersion = ():void => {
-            if(this.$scope.isComponentInstanceSelected() && this.$scope.currentComponent.selectedInstance.isServiceProxy()) {
-                this.$scope.alertBeforeChangeResourceVersion();
-            }
-            else {
-                this.$scope.changeVersion();
-            }
-        };
-
-        this.$scope.alertBeforeChangeResourceVersion = ():void => {
-            let modalApproveTxt:string = this.$filter('translate')("MODAL_APPROVE");
-            let modalCancelTxt:string = this.$filter('translate')("MODAL_CANCEL");
-            let changeVersionModalTitle:string = this.$filter('translate')("DETAILS_TAB_CHANGE_VERSION_MODAL_TITLE");
-            let changeVersionModalMsg:string = this.$filter('translate')("DETAILS_TAB_CHANGE_VERSION_MODAL_MSG");
-
-            let actionButton: ButtonModel = new ButtonModel(modalApproveTxt, 'blue', this.$scope.changeVersion);
-            let cancelButton: ButtonModel = new ButtonModel(modalCancelTxt, 'grey', this.$scope.cancelChangeResourceVersion);
-            let modalModel: ModalModel = new ModalModel('sm', changeVersionModalTitle, changeVersionModalMsg, [actionButton, cancelButton]);
-            let customModal = this.ModalServiceNg2.createCustomModal(modalModel);
-            customModal.instance.open();
-        };
-
-        this.$scope.cancelChangeResourceVersion = () => {
-            this.ModalServiceNg2.closeCurrentModal();
-            this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion;
-        };
-
-        this.$scope.changeVersion = ():void => {
-            this.ModalServiceNg2.closeCurrentModal();
-            this.$scope.isLoading = true;
-            this.$scope.$parent.isLoading = true;
-
-            let service = <Service>this.$scope.currentComponent;
-            let {changeVersion} = this.$scope.editResourceVersion;
-            let componentUid:string = this.$scope.editResourceVersion.allVersions[changeVersion];
-
-            let onCancel = (error:any) => {
-                this.$scope.isLoading = false;
-                this.$scope.$parent.isLoading = false;
-                this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion;
-
-                if (error) {
-                    console.log(error);
-                }
-            };
-
-            let onUpdate = () => {
-                let onSuccess = (component:Component) => {
-                    this.$scope.isLoading = false;
-                    this.$scope.$parent.isLoading = false;
-                    this.$scope.onComponentInstanceVersionChange(component);
-                };
- 
-                this.$scope.currentComponent.changeComponentInstanceVersion(componentUid).then(onSuccess, onCancel);
-            };
-
-            if (this.$scope.currentComponent.isService()) {
-                this.serviceService.checkComponentInstanceVersionChange(service, componentUid).subscribe((pathsToDelete:string[]) => {
-                    if (pathsToDelete && pathsToDelete.length) {
-                        this.$scope.isLoading = false;
-                        this.$scope.$parent.isLoading = false;
-                        this.$scope.$parent.openVersionChangeModal(pathsToDelete).then(() => {
-                            this.$scope.isLoading = true;
-                            this.$scope.$parent.isLoading = true;
-                            onUpdate();
-                        }, onCancel);
-                    } else {
-                        onUpdate();
-                    }
-                }, onCancel);
-            } else {
-                onUpdate();
-            }
-        };
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html
deleted file mode 100644
index db5322a859..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html
+++ /dev/null
@@ -1,181 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<perfect-scrollbar include-padding="true" class="w-sdc-designer-sidebar-tab-content details">
-
-    <div class="w-sdc-designer-sidebar-section">
-        <loader data-display="isLoading"></loader>
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.general" class="w-sdc-designer-sidebar-section-title">
-
-            General Info
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content general">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Type:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value"  data-tests-id="rightTab_componentType" data-ng-bind="isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy() ? 'Service Proxy' : selectedComponent.componentType"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Resource Type:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-if="selectedComponent.isResource()" data-ng-bind="selectedComponent.resourceType"
-                      tooltips tooltip-content="&#8203;{{selectedComponent.resourceType | resourceTypeName}}"
-                      data-tests-id="rightTab_resourceType"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item">
-
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Version:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value"
-                      data-ng-if="!isComponentInstanceSelected()"  data-tests-id="rightTab_version" data-ng-bind="selectedComponent.version"></span>
-
-                <ng-form name="editForm" data-ng-if="isComponentInstanceSelected()">
-                    <select data-ng-model="editResourceVersion.changeVersion" name="changeVersion" data-tests-id="changeVersion"
-                            data-ng-disabled="$parent.isViewOnly || selectedComponent.uniqueId != editResourceVersion.allVersions[editResourceVersion.changeVersion] || selectedComponent.archived"
-                            class="i-sdc-designer-sidebar-section-content-item-value i-sdc-form-select"
-                            data-ng-class="{'minor': (editResourceVersion.changeVersion)%1, 'disabled':selectedComponent.archived}"
-                            data-ng-change="onChangeResourceVersion()">
-                        <option class="select-instance-version" data-ng-class="{'minor': key%1}"
-                                ng-repeat="(key, value) in editResourceVersion.allVersions">{{key}}</option>
-                    </select></ng-form>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.categories && selectedComponent.categories[0]">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Category:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.categories[0].name"
-                        tooltips tooltip-content="&#8203;{{selectedComponent.categories[0].name}}"
-                        data-tests-id="rightTab_category"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.categories && selectedComponent.categories[0] && selectedComponent.categories[0].subcategories">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Sub Category:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.categories[0].subcategories[0].name"
-                      tooltips tooltip-content="&#8203;{{selectedComponent.categories[0].subcategories[0].name}}"
-                      data-tests-id="rightTab_subCategory"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Creation Date:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.creationDate | date: 'MM/dd/yyyy'"
-                      data-tests-id="rightTab_creationDate"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Author:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.creatorFullName"
-                      tooltips tooltip-content="&#8203;{{selectedComponent.creatorFullName}}"
-                      data-tests-id="rightTab_author">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_PROJECT_CODE"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value"
-                      data-tests-id="rightTab_projectCode" data-ng-bind="selectedComponent.projectCode"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Vendor Name:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.vendorName"
-                      tooltips tooltip-content="&#8203;{{selectedComponent.vendorName}}"
-                      data-tests-id="rightTab_vendorName">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Vendor Release:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.vendorRelease"
-                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.vendorRelease}}"
-                      data-tests-id="rightTab_vendorRelease">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value vendor-model-number" data-ng-bind="selectedComponent.resourceVendorModelNumber"
-                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.resourceVendorModelNumber}}"
-                      data-tests-id="rightTab_resourceVendorModelNumber">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_TYPE"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceType"
-                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.serviceType}}"
-                      data-tests-id="rightTab_serviceType">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_ROLE"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceRole"
-                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.serviceRole}}"
-                      data-tests-id="rightTab_serviceRole">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.contactId"
-                      data-tests-id="rightTab_contactId"></span>
-            </div>
-
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SOURCE_SERVICE_NAME"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="currentComponent.selectedInstance.sourceModelName"  tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{currentComponent.selectedInstance.sourceModelName}}"
-                      data-tests-id="rightTab_sourceModelName"></span>
-            </div>
-
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="isViewMode() && currentComponent.isService() && selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_CUSTOMIZATION_UUID"></span><br>
-                <span class="customization-uuid selectable" data-ng-bind="currentComponent.selectedInstance.customizationUUID"
-                      data-tests-id="rightTab_customizationModuleUUID"></span><br>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item description">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Description:
-
-                    <span class="i-sdc-designer-sidebar-section-content-description-item-value" ellipsis="selectedComponent.description" max-chars="55"
-                          data-tests-id="rightTab_description"></span>
-                </span>
-            </div>
-
-        </div>
-    </div>
-
-    <div class="w-sdc-designer-sidebar-section additionalInformation">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.additionalInformation" class="w-sdc-designer-sidebar-section-title">
-            Additional Information
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content additionalInformation">
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-repeat="additionalInformation in selectedComponent.getAdditionalInformation() track by $index">
-                <span class="i-sdc-designer-sidebar-section-content-item-label additional-information" data-ng-bind="additionalInformation.key" tooltips tooltip-content="{{additionalInformation.key}}"></span>
-               <span class="i-sdc-designer-sidebar-section-content-item-label">:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value additional-information" data-ng-bind="additionalInformation.value"
-                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="{{additionalInformation.value}}"></span>
-            </div>
-        </div>
-    </div>
-
-
-    <div class="w-sdc-designer-sidebar-section tags">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.tags" class="w-sdc-designer-sidebar-section-title">
-            Tags
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content tags">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-tag" data-ng-if="selectedComponent.tags.indexOf(selectedComponent.name)===-1" data-ng-bind="selectedComponent.name"
-                      data-tests-id="rightTab_tag" tooltips tooltip-content="{{selectedComponent.name}}"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-tag" data-ng-repeat="tag in selectedComponent.tags track by $index" data-ng-bind="tag"
-                data-tests-id="rightTab_tag" tooltips tooltip-content="{{tag}}"></span>
-            </div>
-        </div>
-    </div>
-    </div>
-
-</perfect-scrollbar>
-
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less
deleted file mode 100644
index 90bb5658c8..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less
+++ /dev/null
@@ -1,81 +0,0 @@
-.w-sdc-designer-sidebar-tab-content.details {
-
-    .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content {
-        padding: 0 10px 0 18px;
-    }
-
-    .w-sdc-designer-sidebar-section-title.expanded + .w-sdc-designer-sidebar-section-content {
-        padding: 10px 10px 10px 18px;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-label {
-        font-family: @font-opensans-medium;
-        color: #191919;
-        font-size: 13px;
-        &.additional-information{
-            max-width:100px;
-            display: inline-block;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            vertical-align: bottom;
-        }
-
-    }
-
-
-
-    .i-sdc-designer-sidebar-section-content-item-value {
-       // .hyphenate;
-        font-family: @font-opensans-regular;
-        color: #191919;
-        font-size: 13px;
-        padding-left: 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        //display: inline-block; fix long name for firefox
-        max-width: 160px;
-        vertical-align:bottom;
-        font-weight: normal;
-        &.vendor-model-number{
-            max-width: 110px;
-        }
-        &.additional-information{
-            max-width:160px;
-            display: inline-block;
-        }
-        &.i-sdc-form-select {
-            .b_1;
-            border: 1px solid @border_color_f;
-            width: 210px;
-            max-width: 210px;
-            padding-left: 4px;
-
-            .select-instance-version {
-                .b_1;
-                &.minor {
-                    .h_1;
-                }
-            }
-        }
-        &.minor {
-            .h_1;
-        }
-    }
-    .i-sdc-designer-sidebar-section-content-description-item-value{
-        max-width: none;
-        font-weight: normal;
-        font-family: @font-opensans-regular;
-    }
-
-    .customization-uuid{
-        .f-type._12_m;
-    }
-
-    .w-sdc-designer-sidebar-section.tags {
-        .i-sdc-designer-sidebar-section-content-item {
-            white-space: normal;
-        }
-    }
-
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
deleted file mode 100644
index e3ddecd9a5..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {
-    AttributeModel,
-    AttributesGroup,
-    Component,
-    ComponentInstance,
-    PropertyModel,
-    PropertiesGroup
-} from "app/models";
-import {ICompositionViewModelScope} from "../../composition-view-model";
-import {ModalsHandler} from "app/utils";
-import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
-import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
-
-interface IResourcePropertiesAndAttributesViewModelScope extends ICompositionViewModelScope {
-    properties:PropertiesGroup;
-    attributes:AttributesGroup;
-    propertiesMessage:string;
-    groupPropertiesByInstance:boolean;
-    showGroupsOfInstanceProperties:Array<boolean>;
-    addProperty():void;
-    updateProperty(property:PropertyModel):void;
-    deleteProperty(property:PropertyModel):void;
-    viewAttribute(attribute:AttributeModel):void;
-    groupNameByKey(key:string):string;
-    isPropertyOwner():boolean;
-    getComponentInstanceNameFromInstanceByKey(key:string):string;
-}
-
-export class ResourcePropertiesViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        '$uibModal',
-        'ModalsHandler',
-        'ComponentServiceNg2'
-
-    ];
-
-
-    constructor(private $scope:IResourcePropertiesAndAttributesViewModelScope,
-                private $filter:ng.IFilterService,
-                private $uibModal:ng.ui.bootstrap.IModalService,
-                private ModalsHandler:ModalsHandler,
-                private ComponentServiceNg2:ComponentServiceNg2) {
-
-        this.getComponentInstancesPropertiesAndAttributes();
-    }
-
-    private initComponentProperties = ():void => {
-        let result:PropertiesGroup = {};
-
-        if (this.$scope.selectedComponent) {
-            this.$scope.propertiesMessage = undefined;
-            this.$scope.groupPropertiesByInstance = false;
-            if (this.$scope.isComponentInstanceSelected()) {
-                if (this.$scope.currentComponent.selectedInstance.originType === 'VF') {
-                    this.$scope.groupPropertiesByInstance = true;
-                }
-                result[this.$scope.currentComponent.selectedInstance.uniqueId] = this.$scope.currentComponent.componentInstancesProperties[this.$scope.currentComponent.selectedInstance.uniqueId];
-            } else if (this.$scope.currentComponent.isService()) {
-                // Temporally fix to hide properties for service (UI stack when there are many properties)
-                result = this.$scope.currentComponent.componentInstancesProperties;
-                this.$scope.propertiesMessage = "Note: properties for service are disabled";
-            } else {
-                let key = this.$scope.selectedComponent.uniqueId;
-                result[key] = Array<PropertyModel>();
-                let derived = Array<PropertyModel>();
-                _.forEach(this.$scope.selectedComponent.properties, (property:PropertyModel) => {
-                    if (key == property.parentUniqueId) {
-                        result[key].push(property);
-                    } else {
-                        property.readonly = true;
-                        derived.push(property);
-                    }
-                });
-                if (derived.length) {
-                    result['derived'] = derived;
-                }
-            }
-            this.$scope.properties = result;
-        }
-    };
-
-
-    private initComponentAttributes = ():void => {
-        let result:AttributesGroup = {};
-
-        if (this.$scope.selectedComponent) {
-            if (this.$scope.isComponentInstanceSelected()) {
-                result[this.$scope.currentComponent.selectedInstance.uniqueId] = this.$scope.currentComponent.componentInstancesAttributes[this.$scope.currentComponent.selectedInstance.uniqueId];
-            } else if (this.$scope.currentComponent.isService()) {
-                result = this.$scope.currentComponent.componentInstancesAttributes;
-            }
-            this.$scope.attributes = result;
-        }
-    };
-
-    /**
-     * This function is checking if the component is the value owner of the current property
-     * in order to notify the edit property modal which fields to disable
-     */
-    private isPropertyValueOwner = ():boolean => {
-        return this.$scope.currentComponent.isService() || !!this.$scope.currentComponent.selectedInstance;
-    };
-
-    /**
-     *  The function opens the edit property modal.
-     *  It checks if the property is from the VF or from one of it's resource instances and sends the needed property list.
-     *  For create property reasons an empty array is transferd
-     *
-     * @param property the wanted property to edit/create
-     */
-    private openEditPropertyModal = (property:PropertyModel):void => {
-        this.ModalsHandler.openEditPropertyModal(property,
-            this.$scope.component,
-            (this.$scope.isPropertyOwner() ?
-                this.$scope.properties[property.parentUniqueId] :
-                this.$scope.properties[property.resourceInstanceUniqueId]) || [],
-            this.isPropertyValueOwner(), "component", property.resourceInstanceUniqueId).then((updatedProperty:PropertyModel) => {
-                if(updatedProperty){
-                    let oldProp = _.find(this.$scope.properties[updatedProperty.resourceInstanceUniqueId], (prop:PropertyModel) => {return prop.uniqueId == updatedProperty.uniqueId;});
-                    oldProp.value = updatedProperty.value;
-                }
-        });
-    };
-
-    private openAttributeModal = (atrribute:AttributeModel):void => {
-
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            template: 'app/view-models/forms/attribute-form/attribute-form-view.html',
-            controller: 'Sdc.ViewModels.AttributeFormViewModel',
-            size: 'sdc-md',
-            backdrop: 'static',
-            keyboard: false,
-            resolve: {
-                attribute: ():AttributeModel => {
-                    return atrribute;
-                },
-                component: ():Component => {
-                    return this.$scope.currentComponent;
-                }
-            }
-        };
-        this.$uibModal.open(modalOptions);
-    };
-
-    private getComponentInstancesPropertiesAndAttributes = () => {
-
-        this.ComponentServiceNg2.getComponentInstanceAttributesAndProperties(this.$scope.currentComponent).subscribe((genericResponse:ComponentGenericResponse) => {
-            this.$scope.currentComponent.componentInstancesAttributes = genericResponse.componentInstancesAttributes;
-            this.$scope.currentComponent.componentInstancesProperties = genericResponse.componentInstancesProperties;
-            this.initScope();
-        });
-    };
-
-    private initScope = ():void => {
-
-
-        this.initComponentProperties();
-        this.initComponentAttributes();
-
-        this.$scope.$watchCollection('currentComponent.properties', (newData:any):void => {
-            this.initComponentProperties();
-        });
-
-        this.$scope.$watch('currentComponent.selectedInstance', (newInstance:ComponentInstance):void => {
-            if (angular.isDefined(newInstance)) {
-                this.initComponentProperties();
-                this.initComponentAttributes();
-
-            }
-        });
-
-        this.$scope.isPropertyOwner = ():boolean => {
-            return this.$scope.currentComponent && this.$scope.currentComponent.isResource() && !this.$scope.isComponentInstanceSelected();
-        };
-
-        this.$scope.updateProperty = (property:PropertyModel):void => {
-            this.openEditPropertyModal(property);
-        };
-
-        this.$scope.deleteProperty = (property:PropertyModel):void => {
-
-            let onOk = ():void => {
-                this.$scope.currentComponent.deleteProperty(property.uniqueId);
-            };
-
-            let title:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TITLE");
-            let message:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TEXT", "{'name': '" + property.name + "'}");
-            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-        };
-
-        this.$scope.viewAttribute = (attribute:AttributeModel):void => {
-            this.openAttributeModal(attribute);
-        };
-
-        this.$scope.groupNameByKey = (key:string):string => {
-            switch (key) {
-                case 'derived':
-                    return "Derived";
-
-                case this.$scope.currentComponent.uniqueId:
-                    return this.$filter("resourceName")(this.$scope.currentComponent.name);
-
-                default:
-                    let componentInstance = _.find(this.$scope.currentComponent.componentInstances, {uniqueId: key});
-                    if(componentInstance)
-                        return this.$filter("resourceName")(componentInstance.name);
-            }
-        };
-
-        this.$scope.getComponentInstanceNameFromInstanceByKey = (key:string):string => {
-            let instanceName:string = "";
-            if (key !== undefined && this.$scope.selectedComponent.uniqueId == this.$scope.currentComponent.selectedInstance.componentUid) {
-                instanceName = this.$filter("resourceName")((_.find(this.$scope.selectedComponent.componentInstances, {uniqueId: key})).name);
-            }
-            return instanceName;
-        };
-
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html
deleted file mode 100644
index cdd69682dc..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html
+++ /dev/null
@@ -1,133 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content properties" id="main-scroll">
-
-    <div class="w-sdc-designer-sidebar-section">
-
-        <!--expand-collapse data-ng-if="isPropertyOwner() && !currentComponent.properties.length" expanded-selector=".w-sdc-composition-sidebar-section-content.{{currentComponent.name}}"
-                         class="w-sdc-composition-sidebar-section-title">
-            <span class="w-sdc-composition-sidebar-section-title-text" tooltips tooltip-content="{{currentComponent.name | resourceName}}&nbsp;Properties"
-                data-ng-bind="(currentComponent.name | resourceName)+ ' Properties'"></span>
-            <div class="w-sdc-composition-sidebar-section-title-icon"></div>
-        </expand-collapse-->
-        <!--properties-->
-        <expand-collapse data-ng-repeat-start="(key, group) in properties"
-                         expanded-selector=".w-sdc-designer-sidebar-section-content.properties.{{$index}}">
-            <div class="first-level">
-                <div class="expand-collapse-title-icon"></div>
-                <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Properties'"
-                      tooltips tooltip-content="{{groupNameByKey(key)}}&nbsp;Properties"
-                      data-tests-id="vfi-properties"></span>
-            </div>
-        </expand-collapse>
-
-        <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content properties {{$index}}"> <!--data-ng-show="isShowDetailsSection" -->
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="!groupPropertiesByInstance">
-                <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow"
-                     data-ng-repeat="property in group | orderBy: 'name' track by $index">
-                    <div>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
-                              data-ng-class="{'hand enabled': !$parent.isViewOnly}"
-                              tooltips tooltip-content="{{property.name}}"
-                              data-ng-click="!$parent.isViewOnly && updateProperty(property)"
-                              data-tests-id="{{property.name}}">{{property.name}}</span>
-                    </div>
-                    <div>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()"
-                              tooltips tooltip-content="{{property.defaultValue}}">{{property.defaultValue}}</span>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()"
-                              tooltips tooltip-content="{{property.value}}"
-                              data-tests-id="value_{{property.name}}">{{property.value}}</span>
-                    </div>
-                    <button class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
-                            data-ng-if="!$parent.isViewOnly&&(isPropertyOwner() && !property.readonly)"
-                            data-ng-click="deleteProperty(property)" type="button"></button>
-                </div>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="groupPropertiesByInstance">
-                <div data-ng-repeat-start="(instancesIds , InstanceProperties) in (group | groupBy:'path')"
-                     class="vfci-properties-group"
-                     data-ng-click="showGroupsOfInstanceProperties[$index]=!showGroupsOfInstanceProperties[$index]"
-                data-ng-class="{'expanded':showGroupsOfInstanceProperties[$index]}">
-                    <div class="second-level">
-                        <div class="expand-collapse-title-icon"></div>
-                        <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="getComponentInstanceNameFromInstanceByKey(InstanceProperties[0].path[1]) + ' Properties'"
-                              tooltips tooltip-content="{{getComponentInstanceNameFromInstanceByKey(InstanceProperties[0].path[1])}}&nbsp;Properties"
-                              data-tests-id="vfci-properties"></span>
-                    </div>
-                </div>
-                <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content instance-properties {{$index}}" data-ng-if="showGroupsOfInstanceProperties[$index]">
-                    <div class="i-sdc-designer-sidebar-section-content-item">
-                        <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow"
-                             data-ng-repeat="instanceProperty in InstanceProperties | orderBy: 'name'">
-                            <div>
-                                <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
-                                      data-ng-class="{'hand enabled': !$parent.isViewOnly}"
-                                      tooltips tooltip-content="{{instanceProperty.name}}"
-                                      data-tests-id="vfci-property">{{instanceProperty.name}}</span>
-                            </div>
-                            <div>
-                                <span class="i-sdc-designer-sidebar-section-content-item-property-value"
-                                      tooltips tooltip-content="{{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}">
-                                    {{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!--<div  class="w-sdc-designer-sidebar-section-footer" data-ng-if="(!$parent.isViewOnly && isPropertyOwner()) || showAddPropertyButton">-->
-                <!--<button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="addGrey" data-ng-click="addProperty()" type="button">-->
-                    <!--Add Property-->
-                <!--</button>-->
-            <!--</div>-->
-        </div>
-
-
-        <!--attributes-->
-        <expand-collapse data-ng-repeat-start="(key, group) in attributes"
-                         expanded-selector=".w-sdc-designer-sidebar-section-content.attributes.{{$index}}">
-            <div class="first-level">
-                <div class="expand-collapse-title-icon"></div>
-                <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Attributes'"
-                      tooltips tooltip-content="{{groupNameByKey(key)}}&nbsp;Attributes"></span>
-            </div>
-        </expand-collapse>
-
-        <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content attributes {{$index}}"> <!--data-ng-show="isShowDetailsSection" -->
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute"
-                     data-ng-repeat="attribute in group | orderBy: 'name' track by $index">
-                    <div>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
-                              data-ng-class="{'hand enabled': !$parent.isViewOnly}"
-                              tooltips tooltip-content="{{attribute.name}}"
-                              data-ng-click="!$parent.isViewOnly && viewAttribute(attribute)"
-                              data-tests-id="{{attribute.name}}-attr">{{attribute.name}}</span>
-                    </div>
-                    <div>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()"
-                              tooltips tooltip-content="{{attribute.defaultValue}}">{{attribute.defaultValue}}</span>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()"
-                              tooltips tooltip-content="{{attribute.value}}" data-tests-id="value-of-{{attribute.name}}">{{attribute.value}}</span>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-
-    </div>
-</perfect-scrollbar>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less
deleted file mode 100644
index ce5acc83e5..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less
+++ /dev/null
@@ -1,39 +0,0 @@
-.w-sdc-designer-sidebar-tab-content.properties {
-    .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label{
-        display:block;
-        font-weight: bold;
-    }
-    .i-sdc-designer-sidebar-section-content-item-button.update{
-        right: 17px;
-    }
-    .i-sdc-designer-sidebar-section-content-item-button.delete{
-        right: 35px;
-    }
-
-    .w-sdc-designer-sidebar-properties-disabled {
-        .s_14_m;
-        padding: 20px 20px;
-    }
-
-    .vfci-properties-group{
-        background-color: @func_color_r;
-    }
-
-    .expand-collapse-title-icon{
-        .hand;
-        .sprite-new;
-        .expand-collapse-plus-icon;
-        vertical-align: middle;
-        margin: 0 6px;
-    }
-
-    .expanded {
-        .expand-collapse-title-icon {
-            .expand-collapse-minus-icon;
-        }
-    }
-
-    .w-sdc-designer-sidebar-section-title-text{
-        vertical-align: middle;
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts
deleted file mode 100644
index ce44aaff50..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {ICompositionViewModelScope} from "../../composition-view-model";
-import {CapabilitiesGroup, Requirement, RequirementsGroup} from "app/models";
-import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
-import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
-import {GRAPH_EVENTS} from "app/utils";
-import {EventListenerService} from "app/services";
-import {ComponentInstance, Capability} from "app/models";
-
-interface IRelationsViewModelScope extends ICompositionViewModelScope {
-    isLoading:boolean;
-    $parent:ICompositionViewModelScope;
-    getRelation(requirement:any):any;
-    capabilities:Array<Capability>;
-    requirements:Array<Requirement>;
-
-    //for complex components
-    capabilitiesInstancesMap:InstanceCapabilitiesMap;
-    requirementsInstancesMap:InstanceRequirementsMap;
-}
-export class InstanceCapabilitiesMap {
-    [key:string]:Array<Capability>;
-}
-
-export class InstanceRequirementsMap {
-    [key:string]:Array<Requirement>;
-}
-
-export class RelationsViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        'ComponentServiceNg2',
-        'EventListenerService'
-    ];
-
-    constructor(private $scope:IRelationsViewModelScope,
-                private $filter:ng.IFilterService,
-                private ComponentServiceNg2:ComponentServiceNg2,
-                private eventListenerService:EventListenerService) {
-        this.initScope();
-    }
-
-    private loadComplexComponentData = () => {
-        this.$scope.isLoading = true;
-        this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.$scope.currentComponent.componentType, this.$scope.currentComponent.uniqueId).subscribe((response:ComponentGenericResponse) => {
-            this.$scope.currentComponent.capabilities = response.capabilities;
-            this.$scope.currentComponent.requirements = response.requirements;
-            this.setScopeCapabilitiesRequirements(this.$scope.currentComponent.capabilities, this.$scope.currentComponent.requirements);
-            this.initInstancesMap();
-            this.$scope.isLoading = false;
-        });
-    }
-
-
-    private extractValuesFromMap = (map:CapabilitiesGroup | RequirementsGroup):Array<any> => {
-        let values = [];
-        _.forEach(map, (capabilitiesOrRequirements:Array<Capability> | Array<Requirement>, key) => {
-                values = values.concat(capabilitiesOrRequirements)
-            }
-        );
-        return values;
-    }
-
-    private setScopeCapabilitiesRequirements = (capabilities:CapabilitiesGroup, requirements:RequirementsGroup) => {
-        this.$scope.capabilities = this.extractValuesFromMap(capabilities);
-        this.$scope.requirements = this.extractValuesFromMap(requirements);
-    }
-
-
-    private initInstancesMap = ():void => {
-
-        this.$scope.capabilitiesInstancesMap = new InstanceCapabilitiesMap();
-        _.forEach(this.$scope.capabilities, (capability:Capability) => {
-            if (this.$scope.capabilitiesInstancesMap[capability.ownerName]) {
-                this.$scope.capabilitiesInstancesMap[capability.ownerName] = this.$scope.capabilitiesInstancesMap[capability.ownerName].concat(capability);
-            } else {
-                this.$scope.capabilitiesInstancesMap[capability.ownerName] = new Array<Capability>(capability);
-            }
-        });
-
-        this.$scope.requirementsInstancesMap = new InstanceRequirementsMap();
-        _.forEach(this.$scope.requirements, (requirement:Requirement) => {
-            if (this.$scope.requirementsInstancesMap[requirement.ownerName]) {
-                this.$scope.requirementsInstancesMap[requirement.ownerName] = this.$scope.requirementsInstancesMap[requirement.ownerName].concat(requirement);
-            } else {
-                this.$scope.requirementsInstancesMap[requirement.ownerName] = new Array<Requirement>(requirement);
-            }
-        });
-    }
-
-    private initRequirementsAndCapabilities = (needUpdate?: boolean) => {
-
-        // if instance selected, we take the requirement and capabilities of the instance - always exist because we load them with the graph
-        if (this.$scope.isComponentInstanceSelected()) {
-            this.$scope.isLoading = false;
-            this.setScopeCapabilitiesRequirements(this.$scope.currentComponent.selectedInstance.capabilities, this.$scope.currentComponent.selectedInstance.requirements);
-            if (this.$scope.currentComponent.selectedInstance.originType === 'VF') {
-                this.initInstancesMap();
-            }
-        } else {
-            // if instance not selected, we take the requirement and capabilities of the VF/SERVICE, if not exist we call api
-            if (needUpdate || !this.$scope.currentComponent.capabilities || !this.$scope.currentComponent.requirements) {
-                this.loadComplexComponentData();
-
-            } else {
-                this.$scope.isLoading = false;
-                this.setScopeCapabilitiesRequirements(this.$scope.currentComponent.capabilities, this.$scope.currentComponent.requirements);
-                this.initInstancesMap();
-            }
-        }
-    }
-
-    private updateRequirementCapabilities = () => {
-        if (!this.$scope.isComponentInstanceSelected()) {
-            this.loadComplexComponentData();
-        }
-    }
-
-    private initEvents = ():void => {
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, this.initRequirementsAndCapabilities);
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.updateRequirementCapabilities);
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE,  this.updateRequirementCapabilities);
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE,  this.updateRequirementCapabilities);
-    }
-
-    private initScope = ():void => {
-
-        this.$scope.requirements = [];
-        this.$scope.capabilities = [];
-
-        this.initEvents();
-        this.initRequirementsAndCapabilities();
-
-        this.$scope.isCurrentDisplayComponentIsComplex = ():boolean => {
-            if (this.$scope.isComponentInstanceSelected()) {
-                if (this.$scope.currentComponent.selectedInstance.originType === 'VF') {
-                    return true;
-                }
-                return false;
-            } else {
-                return this.$scope.currentComponent.isComplex();
-            }
-        }
-
-        this.$scope.$on('$destroy', () => {
-
-            this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, this.initRequirementsAndCapabilities);
-            this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.updateRequirementCapabilities);
-            this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE, this.updateRequirementCapabilities);
-            this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, this.updateRequirementCapabilities);
-        });
-
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view.html
deleted file mode 100644
index 889f129dac..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content sdc-general-tab relations">
-    <div ng-if="!isCurrentDisplayComponentIsComplex()">
-        <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
-            <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.capabilities" class="w-sdc-designer-sidebar-section-title"> Capabilities
-                <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-            </expand-collapse>
-            <div class="w-sdc-designer-sidebar-section-content capabilities">
-                <capabilities-list capabilities="capabilities"></capabilities-list>
-            </div>
-        </div>
-        <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
-            <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.requirements" class="w-sdc-designer-sidebar-section-title"> Requirements
-                <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-            </expand-collapse>
-
-            <div class="w-sdc-designer-sidebar-section-content requirements">
-                <requirements-list component='currentComponent' requirements="requirements"></requirements-list>
-            </div>
-        </div>
-    </div>
-
-    <div ng-if="isCurrentDisplayComponentIsComplex()">
-        <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
-            <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.capabilities" class="w-sdc-designer-sidebar-section-title"> Capabilities
-                <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-            </expand-collapse>
-        </div>
-        <div class="w-sdc-designer-sidebar-section-content capabilities">
-            <expand-collapse expanded-selector=".capabilities-component-instances.{{$index}}" is-close-on-init="true" class="general-tab-expand-collapse"
-                data-ng-repeat-start="(key, instanceCapabilities) in capabilitiesInstancesMap track by $index">
-                <div class="expand-collapse-title second-level">
-                     <div class="expand-collapse-title-icon"></div>
-                     <span class="expand-collapse-title-text" data-ng-bind="key"></span>
-                </div>
-            </expand-collapse>
-
-            <div data-ng-repeat-end="" class="capabilities-component-instances {{$index}}">
-                <capabilities-list capabilities="instanceCapabilities"></capabilities-list>
-            </div>
-        </div>
-
-        <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
-            <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.requirements" class="w-sdc-designer-sidebar-section-title"> Requirements
-                <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-            </expand-collapse>
-        </div>
-        <div class="w-sdc-designer-sidebar-section-content requirements">
-            <expand-collapse expanded-selector=".requirements-component-instances.{{$index}}" is-close-on-init="true" class="general-tab-expand-collapse"
-                             data-ng-repeat-start="(key, instanceRequirements) in requirementsInstancesMap track by $index">
-                <div class="expand-collapse-title second-level">
-                    <div class="expand-collapse-title-icon"></div>
-                    <span class="expand-collapse-title-text" data-ng-bind="key"></span>
-                </div>
-            </expand-collapse>
-
-            <div data-ng-repeat-end="" class="requirements-component-instances {{$index}}">
-                <requirements-list component='currentComponent' requirements="instanceRequirements"></requirements-list>
-            </div>
-        </div>
-    </div>
-</perfect-scrollbar>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations.less
deleted file mode 100644
index c3b224d5a6..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations.less
+++ /dev/null
@@ -1,14 +0,0 @@
-.w-sdc-designer-sidebar-tab-content.relations {
-
-    .w-sdc-designer-sidebar-section-content {
-        padding: 0;
-    }
-
-    .w-sdc-designer-sidebar-section-title {
-        &.expanded {
-            margin-bottom: 0;
-        }
-    }
-}
-
-
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts
deleted file mode 100644
index 737002303b..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-/*!
-* Copyright © 2016-2018 European Support Limited
-*
-* 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.
-*/
-
-
-import {ICompositionViewModelScope} from "../../composition-view-model";
-import {
-    Service,
-    PropertiesGroup,
-    InputsGroup,
-    ServiceInstanceObject,
-    InterfaceModel,
-    InputBEModel,
-    CapabilitiesGroup,
-    Capability,
-    ComponentInstance
-} from 'app/models';
-import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
-import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
-
-interface IServiceConsumptionViewModelScope extends ICompositionViewModelScope {
-    service: Service;
-    instancesMappedList: Array<ServiceInstanceObject>;
-    componentInstancesProperties: PropertiesGroup;
-    componentInstancesInputs: InputsGroup;
-    componentInstancesInterfaces: Map<string, Array<InterfaceModel>>;
-    componentInputs: Array<InputBEModel>;
-    componentCapabilities: Array<Capability>;
-    instancesCapabilitiesMap: Map<string, Array<Capability>>;
-}
-
-
-export class ServiceConsumptionViewModel {
-
-    static '$inject' = [
-        '$scope',
-        'ServiceServiceNg2'
-    ];
-
-    constructor(private $scope:IServiceConsumptionViewModelScope, private ServiceServiceNg2:ServiceServiceNg2) {
-        this.$scope.service = <Service>this.$scope.currentComponent;
-        this.initInstances();
-        this.initScope();
-    }
-
-    private initInstances = ():void => {
-        this.ServiceServiceNg2.getServiceConsumptionData(this.$scope.service).subscribe((genericResponse:ComponentGenericResponse) => {
-            this.$scope.componentInstancesProperties = genericResponse.componentInstancesProperties;
-            this.$scope.componentInstancesInputs = genericResponse.componentInstancesInputs;
-            this.$scope.componentInstancesInterfaces = genericResponse.componentInstancesInterfaces;
-            this.$scope.componentInputs = genericResponse.inputs;
-            this.buildInstancesCapabilitiesMap(genericResponse.componentInstances);
-            this.updateInstanceAttributes();
-        });
-    }
-
-    buildInstancesCapabilitiesMap = (componentInstances: Array<ComponentInstance>): void => {
-        this.$scope.instancesCapabilitiesMap = new Map();
-        let flattenCapabilities = [];
-        _.forEach(componentInstances, componentInstance => {
-            flattenCapabilities = CapabilitiesGroup.getFlattenedCapabilities(componentInstance.capabilities);
-            this.$scope.instancesCapabilitiesMap[componentInstance.uniqueId] = _.filter(flattenCapabilities, cap => cap.properties && cap.ownerId === componentInstance.uniqueId);
-        });
-    }
-
-    private updateInstanceAttributes = ():void => {
-        if (this.$scope.isComponentInstanceSelected() && this.$scope.componentInstancesProperties) {
-            this.$scope.instancesMappedList = this.$scope.service.componentInstances.map(coInstance => new ServiceInstanceObject({
-                id: coInstance.uniqueId,
-                name: coInstance.name,
-                properties: this.$scope.componentInstancesProperties[coInstance.uniqueId] || [],
-                inputs: this.$scope.componentInstancesInputs[coInstance.uniqueId] || [],
-                interfaces: this.$scope.componentInstancesInterfaces[coInstance.uniqueId] || []
-            }));
-        }
-    }
-
-    private initScope = ():void => {
-        this.$scope.$watch('currentComponent.selectedInstance', ():void => {
-            this.updateInstanceAttributes();
-        });
-
-        this.$scope.registerCreateInstanceEvent(() => {
-            this.initInstances();
-        });
-
-        this.$scope.$on('$destroy', this.$scope.unregisterCreateInstanceEvent);
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html
deleted file mode 100644
index 8404a7f653..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content service-consumption">
-    <div class="w-sdc-designer-sidebar-section">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content"
-                         class="w-sdc-designer-sidebar-section-title">
-            <span class="w-sdc-designer-sidebar-section-title-text" tooltips tooltip-content="Operation Consumption">Operation Consumption</span>
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <ng2-service-consumption
-                        [parent-service]="service"
-                        [selected-service]="selectedComponent"
-                        [selected-service-instance-id]="currentComponent.selectedInstance.uniqueId"
-                        [instances-mapped-list]="instancesMappedList"
-                        [parent-service-inputs]="componentInputs"
-                        [instances-capabilities-map]="instancesCapabilitiesMap"
-                        [readonly]="isViewMode() || !isDesigner()">
-                </ng2-service-consumption>
-            </div>
-        </div>
-    </div>
-</perfect-scrollbar>
\ No newline at end of file
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts
deleted file mode 100644
index b634e6021f..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-/*!
- * Copyright © 2016-2018 European Support Limited
- *
- * 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.
- */
-
-
-import {ICompositionViewModelScope} from "../../composition-view-model";
-import {Service, ComponentInstance, PropertiesGroup, ServiceInstanceObject, PropertyBEModel} from 'app/models';
-import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
-import {ConstraintObject} from "app/ng2/components/logic/service-dependencies/service-dependencies.component";
-import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
-import {DEPENDENCY_EVENTS} from "app/utils/constants";
-import {EventListenerService} from 'app/services';
-
-interface IServiceDependenciesViewModelScope extends ICompositionViewModelScope {
-    service: Service;
-    selectedInstanceSiblings: Array<ServiceInstanceObject>;
-    componentInstancesConstraints: Array<any>;
-    selectedInstanceConstraints: Array<ConstraintObject>;
-    selectedInstanceProperties: Array<PropertyBEModel>;
-    updateSelectedInstanceConstraints(constraintsList:Array<ConstraintObject>): void;
-    loadConstraints(): void;
-    componentInstanceProperties: PropertiesGroup;
-    notifyDependencyEventsObserver: Function;
-}
-
-
-
-export class ServiceDependenciesViewModel {
-
-    static '$inject' = [
-        '$scope',
-        'ComponentServiceNg2',
-        'EventListenerService'
-    ];
-
-    constructor(private $scope:IServiceDependenciesViewModelScope, private ComponentServiceNg2:ComponentServiceNg2, private eventListenerService: EventListenerService) {
-        this.$scope.service = <Service>this.$scope.currentComponent;
-        this.$scope.notifyDependencyEventsObserver = this.notifyDependencyEventsObserver;
-        this.initInstancesWithProperties();
-        this.loadConstraints();
-
-        this.initScope();
-    }
-
-    private initInstancesWithProperties = ():void => {
-        this.ComponentServiceNg2.getComponentInstanceProperties(this.$scope.currentComponent).subscribe((genericResponse:ComponentGenericResponse) => {
-            this.$scope.componentInstanceProperties = genericResponse.componentInstancesProperties;
-            this.updateInstanceAttributes();
-        });
-    }
-
-    private updateInstanceAttributes = ():void => {
-        if (this.$scope.isComponentInstanceSelected() && this.$scope.componentInstanceProperties) {
-            let instancesMappedList = this.$scope.service.componentInstances.map(coInstance => new ServiceInstanceObject({
-                id: coInstance.uniqueId,
-                name: coInstance.name,
-                properties: this.$scope.componentInstanceProperties[coInstance.uniqueId] || []
-            }));
-            this.$scope.selectedInstanceProperties = this.$scope.componentInstanceProperties[this.$scope.currentComponent.selectedInstance.uniqueId];
-            this.$scope.selectedInstanceSiblings = instancesMappedList.filter(coInstance => coInstance.id !== this.$scope.currentComponent.selectedInstance.uniqueId);
-        }
-    }
-
-    private initScope = ():void => {
-        this.$scope.$watch('currentComponent.selectedInstance', (newInstance:ComponentInstance):void => {
-            if (angular.isDefined(newInstance) && this.$scope.componentInstancesConstraints) {
-                this.updateInstanceAttributes();
-                this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId] ?
-                    this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties :
-                    [];
-            }
-        });
-        this.$scope.$watch('componentInstancesConstraints', (constraints: Array<any>):void => {
-            if (angular.isDefined(constraints)) {
-                if(this.$scope.isComponentInstanceSelected()) {
-                    this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId] ?
-                        this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties || [] :
-                        [];
-                }
-            }
-        });
-
-        this.$scope.updateSelectedInstanceConstraints = (constraintsList:Array<ConstraintObject>):void => {
-            this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties = constraintsList;
-            this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties;
-        }
-
-        this.$scope.loadConstraints = ():void => {
-            this.loadConstraints();
-        }
-
-        this.$scope.registerCreateInstanceEvent(() => {
-            this.initInstancesWithProperties();
-        });
-
-        this.$scope.registerChangeComponentInstanceNameEvent((updatedComponentInstance) => {
-            this.$scope.currentComponent.selectedInstance = updatedComponentInstance;
-        });
-
-        this.$scope.$on('$destroy', this.$scope.unregisterCreateInstanceEvent);
-        this.$scope.$on('$destroy', this.$scope.unregisterChangeComponentInstanceNameEvent);
-    }
-
-    private loadConstraints = ():void => {
-        this.ComponentServiceNg2.getServiceFilterConstraints(this.$scope.service).subscribe((response) => {
-            this.$scope.componentInstancesConstraints = response.nodeFilterData;
-        });
-    }
-
-    public notifyDependencyEventsObserver = (isChecked: boolean):void => {
-        this.eventListenerService.notifyObservers(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, isChecked);
-    }
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html
deleted file mode 100644
index ba50994529..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content service-dependencies">
-    <div class="w-sdc-designer-sidebar-section">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content"
-                         class="w-sdc-designer-sidebar-section-title">
-            <span class="w-sdc-designer-sidebar-section-title-text" tooltips tooltip-content="Service Dependencies">Service Dependencies</span>
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-        <div class="w-sdc-designer-sidebar-section-content" data-ng-if="isComponentInstanceSelected()">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <ng2-service-dependencies
-                    [composite-service]="service"
-                    [current-service-instance]="currentComponent.selectedInstance"
-                    [selected-instance-properties]="selectedInstanceProperties"
-                    [selected-instance-siblings]="selectedInstanceSiblings"
-                    [selected-instance-constraints]="selectedInstanceConstraints"
-                    [readonly]="isViewMode() || !isDesigner()"
-                    (dependency-status)="notifyDependencyEventsObserver($event)"
-                    (update-rules-list-event)="updateSelectedInstanceConstraints($event)"
-                    (load-rules-list-event)="loadConstraints()">
-                </ng2-service-dependencies>
-            </div>
-        </div>
-    </div>
-</perfect-scrollbar>
\ No newline at end of file
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.html
deleted file mode 100644
index 4d89625e67..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<perfect-scrollbar include-padding="true" class="w-sdc-designer-sidebar-tab-content">
-
-    <div class="w-sdc-designer-sidebar-section">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" class="w-sdc-designer-sidebar-section-title">
-            Composition
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content" ng-show="selectedComponent.isComplex()">
-            <structure-tree component="selectedComponent"></structure-tree>
-        </div>
-    </div>
-</perfect-scrollbar>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html
deleted file mode 100644
index 94c28a0796..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<!-- Description Popover -->
-<div >
-    <span data-tests-id='popover-x-button' data-ng-click='closeDescriptionPopover()' class='tlv-sprite tlv-x-btn close-popover-btn'></span>
-    <div class="w-sdc-form-item" ng-form="descriptionForm" data-ng-class="{error:(descriptionForm.$dirty && descriptionForm.$invalid)}">
-        <textarea class="i-sdc-form-textarea {{$index}}" data-ng-class="{'view-mode': isViewMode()}"
-                  data-ng-maxlength="256"
-                  maxlength="256"
-                  data-ng-required="true"
-                  name="description"
-                  data-ng-model="artifact.description"
-                  data-ng-model-options="{ debounce: 200 }"
-                  data-ng-pattern="getValidationPattern('string')"
-                  ng-readonly="isViewMode()"
-                  data-tests-id="description">
-                                    </textarea>
-
-        <div class="input-error" data-ng-show="descriptionForm.$dirty && descriptionForm.$invalid">
-            <span ng-show="descriptionForm.$error.required" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED"></span>
-            <span ng-show="descriptionForm.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
-            <span ng-show="descriptionForm.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
deleted file mode 100644
index fc3de6e9e1..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
+++ /dev/null
@@ -1,352 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * Modifications Copyright (C) 2019 Nokia. 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=========================================================
- */
-
-//@require "./*.html"
-'use strict';
-import * as _ from "lodash";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {ArtifactModel, ArtifactGroupModel, Resource} from "app/models";
-import {ArtifactsUtils, ModalsHandler, ValidationUtils} from "app/utils";
-import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
-import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
-import {GenericArtifactBrowserComponent} from "../../../../ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component";
-import {PathsAndNamesDefinition} from "../../../../models/paths-and-names";
-import {ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service";
-import {IModalConfig} from "sdc-ui/lib/angular/modals/models/modal-config";
-import {CacheService} from "../../../../services/cache-service";
-import {GabConfig} from "../../../../models/gab-config";
-
-interface IDeploymentArtifactsViewModelScope extends IWorkspaceViewModelScope {
-    tableHeadersList:Array<any>;
-    reverse:boolean;
-    sortBy:string;
-    artifacts:Array<ArtifactModel>;
-    editForm:ng.IFormController;
-    isLoading:boolean;
-    artifactDescriptions:any;
-    selectedArtifactId:string;
-    popoverTemplate:string;
-
-    addOrUpdate(artifact:ArtifactModel):void;
-    updateSelectedArtifact():void;
-    delete(artifact:ArtifactModel):void;
-    sort(sortBy:string):void;
-    noArtifactsToShow():boolean;
-    getValidationPattern(validationType:string, parameterType?:string):RegExp;
-    validateJson(json:string):boolean;
-    resetValue(parameter:any):void;
-    viewModeOrCsarComponent():boolean;
-    isLicenseArtifact(artifact:ArtifactModel):void;
-    getEnvArtifact(heatArtifact:ArtifactModel):ArtifactModel;
-    getEnvArtifactName(artifact:ArtifactModel):string;
-    openEditEnvParametersModal(artifact:ArtifactModel):void;
-    openDescriptionPopover(artifactId:string):void;
-    closeDescriptionPopover():void;
-}
-
-export class DeploymentArtifactsViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$templateCache',
-        '$filter',
-        'Sdc.Services.CacheService',
-        'ValidationUtils',
-        'ArtifactsUtils',
-        'ModalsHandler',
-        'ComponentServiceNg2',
-        'ModalServiceSdcUI'
-    ];
-
-    constructor(private $scope:IDeploymentArtifactsViewModelScope,
-                private $templateCache:ng.ITemplateCacheService,
-                private $filter:ng.IFilterService,
-                private cacheService:CacheService,
-                private validationUtils:ValidationUtils,
-                private artifactsUtils:ArtifactsUtils,
-                private ModalsHandler:ModalsHandler,
-                private ComponentServiceNg2: ComponentServiceNg2,
-                private ModalServiceSdcUI: ModalServiceSdcUI) {
-        this.initScope();
-    }
-
-    private initDescriptions = ():void => {
-        this.$scope.artifactDescriptions = {};
-        _.forEach(this.$scope.component.deploymentArtifacts, (artifact:ArtifactModel):void => {
-            this.$scope.artifactDescriptions[artifact.artifactLabel] = artifact.description;
-        });
-    };
-
-    private setArtifact = (artifact:ArtifactModel):void => {
-        if (!artifact.description || !this.$scope.getValidationPattern('string').test(artifact.description)) {
-            artifact.description = this.$scope.artifactDescriptions[artifact.artifactLabel];
-        }
-    };
-
-    private initScopeArtifacts = ()=> {
-        this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.deploymentArtifacts);
-        _.forEach(this.$scope.artifacts, (artifact:ArtifactModel):void => {
-            artifact.envArtifact = this.getEnvArtifact(artifact);
-        });
-    };
-
-    private initArtifacts = (loadFromServer:boolean):void => {
-        if (loadFromServer) {
-            this.$scope.isLoading = true;
-            this.ComponentServiceNg2.getComponentDeploymentArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
-                this.$scope.component.deploymentArtifacts = response.deploymentArtifacts;
-                this.initScopeArtifacts();
-                this.$scope.isLoading = false;
-            });
-        } else {
-            this.initScopeArtifacts();
-        }
-
-    };
-
-    private getEnvArtifact = (heatArtifact:ArtifactModel):ArtifactModel=> {
-        return _.find(this.$scope.artifacts, (item:ArtifactModel)=> {
-            return item.generatedFromId === heatArtifact.uniqueId;
-        });
-    };
-
-    private getCurrentArtifact = ():ArtifactModel => {
-        if (!this.$scope.selectedArtifactId) {
-            return null;
-        }
-        let artifact:ArtifactModel = this.$scope.artifacts.filter((art) => {
-            return art.uniqueId == this.$scope.selectedArtifactId;
-        })[0];
-        return artifact;
-    }
-
-    private initScope = ():void => {
-        let self = this;
-        this.$scope.isLoading = false;
-        this.$scope.selectedArtifactId = null;
-        this.initDescriptions();
-        if(this.$scope.component.deploymentArtifacts) {
-            this.initArtifacts(false);
-        } else {
-            this.initArtifacts(true);
-        }
-        this.$scope.setValidState(true);
-
-        this.$scope.tableHeadersList = [
-            {title: 'Name', property: 'artifactDisplayName'},
-            {title: 'Type', property: 'artifactType'},
-            {title: 'Deployment timeout', property: 'timeout'},
-            {title: 'Version', property: 'artifactVersion'},
-            {title: 'UUID', property: 'artifactUUID'}
-        ];
-
-        this.$templateCache.put("deployment-artifacts-description-popover.html", require('app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html'));
-        this.$scope.popoverTemplate = "deployment-artifacts-description-popover.html";
-
-        this.$scope.isLicenseArtifact = (artifact:ArtifactModel):boolean => {
-            let isLicense:boolean = false;
-            if (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) {
-
-                isLicense = this.artifactsUtils.isLicenseType(artifact.artifactType);
-            }
-
-            return isLicense;
-        };
-
-        this.$scope.sort = (sortBy:string):void => {
-            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-            this.$scope.sortBy = sortBy;
-        };
-
-        this.$scope.getValidationPattern = (validationType:string, parameterType?:string):RegExp => {
-            return this.validationUtils.getValidationPattern(validationType, parameterType);
-        };
-
-        this.$scope.validateJson = (json:string):boolean => {
-            if (!json) {
-                return true;
-            }
-            return this.validationUtils.validateJson(json);
-        };
-
-        this.$scope.viewModeOrCsarComponent = ():boolean => {
-            return this.$scope.isViewMode() || (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent());
-        };
-
-        this.$scope.addOrUpdate = (artifact:ArtifactModel):void => {
-            artifact.artifactGroupType = 'DEPLOYMENT';
-            let artifactCopy = new ArtifactModel(artifact);
-
-            let success = (response:any):void => {
-                this.$scope.artifactDescriptions[artifactCopy.artifactLabel] = artifactCopy.description;
-                this.initArtifacts(true);
-                //  this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts);
-            };
-
-            let error = (err:any):void => {
-                console.log(err);
-                this.initArtifacts(true);
-                //  self.$scope.artifacts = _.values(self.$scope.component.deploymentArtifacts);
-            };
-
-            this.ModalsHandler.openArtifactModal(artifactCopy, this.$scope.component).then(success, error);
-        };
-
-        this.$scope.noArtifactsToShow = ():boolean => {
-            return !_.some(this.$scope.artifacts, 'esId');
-        };
-
-        this.$scope.resetValue = (parameter:any):void => {
-            if (!parameter.currentValue && parameter.defaultValue) {
-                parameter.currentValue = parameter.defaultValue;
-            }
-            else if ('boolean' == parameter.type) {
-                parameter.currentValue = parameter.currentValue.toUpperCase();
-            }
-        };
-
-        this.$scope.$watch('editForm.$valid', ():void => {
-            if (this.$scope.editForm) {
-                //    this.$scope.setValidState(this.$scope.editForm.$valid);
-            }
-        });
-
-        this.$scope.updateSelectedArtifact = ():void => {
-            if (!this.$scope.isViewMode() && !this.$scope.isLoading) {
-                let artifact:ArtifactModel = this.getCurrentArtifact();
-                this.setArtifact(artifact); //resets artifact description to original value if invalid.
-                if (artifact && artifact.originalDescription != artifact.description) {
-                    this.$scope.isLoading = true;
-                    let onSuccess = (responseArtifact:ArtifactModel):void => {
-                        this.$scope.artifactDescriptions[responseArtifact.artifactLabel] = responseArtifact.description;
-                        // this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts);
-                        this.initArtifacts(true);
-                        this.$scope.isLoading = false;
-                    };
-
-                    let onFailed = (error:any):void => {
-                        console.log('Delete artifact returned error:', error);
-                        this.$scope.isLoading = false;
-                    };
-
-                    this.$scope.component.addOrUpdateArtifact(artifact).then(onSuccess, onFailed);
-                }
-            }
-        };
-
-        this.$scope.delete = (artifact:ArtifactModel):void => {
-            let onOk = ():void => {
-                this.$scope.isLoading = true;
-                let onSuccess = ():void => {
-                    this.$scope.isLoading = false;
-                    this.initArtifacts(true);
-                    //this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts);
-                };
-
-                let onFailed = (error:any):void => {
-                    this.$scope.isLoading = false;
-                    console.log('Delete artifact returned error:', error);
-                };
-
-                this.$scope.component.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(onSuccess, onFailed);
-            };
-
-            let title:string = self.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE");
-            let message:string = self.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}");
-            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-        };
-
-        this.$scope.getEnvArtifactName = (artifact:ArtifactModel):string => {
-            let envArtifact = this.$scope.getEnvArtifact(artifact);
-            if (envArtifact) {
-                return envArtifact.artifactDisplayName;
-            }
-        };
-
-        this.$scope.openGenericArtifactBrowserModal = (artifact:ArtifactModel):void => {
-            let self = this;
-            const title = 'Generic Artifact Browser';
-            let modalConfig: IModalConfig = {
-                size: 'xl',
-                title: title,
-                type: 'custom',
-                buttons: [{
-                        id: 'closeGABButton',
-                        text: 'Close',
-                        size: "'x-small'",
-                        closeModal: true
-                    }]
-            };
-
-            const uiConfiguration: any = this.cacheService.get('UIConfiguration');
-            let noConfig: boolean = false;
-            let pathsandnames: PathsAndNamesDefinition[] = [];
-
-            if(typeof uiConfiguration.gab === 'undefined') {
-                noConfig = true;
-            } else {
-                const gabConfig: GabConfig = uiConfiguration.gab
-                    .find(config => config.artifactType === artifact.artifactType);
-                if(typeof gabConfig === 'undefined') {
-                    noConfig = true;
-                } else {
-                    pathsandnames = gabConfig.pathsAndNamesDefinitions;
-                }
-            }
-
-            if(noConfig) {
-                const msg = self.$filter('translate')("DEPLOYMENT_ARTIFACT_GAB_NO_CONFIG");
-                this.ModalServiceSdcUI.openAlertModal(title, msg);
-            }
-
-            const modalInputs = {
-                pathsandnames: pathsandnames,
-                artifactid: artifact.esId,
-                resourceid: this.$scope.component.uniqueId
-            };
-
-            this.ModalServiceSdcUI.openCustomModal(modalConfig, GenericArtifactBrowserComponent, modalInputs);
-        };
-
-        this.$scope.openEditEnvParametersModal = (artifact:ArtifactModel):void => {
-            this.ModalsHandler.openEditEnvParametersModal(artifact, this.$scope.component).then(()=> {
-                this.initArtifacts(true);
-            }, ()=> {
-                this.initArtifacts(true);
-            });
-        };
-
-        this.$scope.openDescriptionPopover = (artifactId:string):void => {
-            if (this.$scope.selectedArtifactId && this.$scope.selectedArtifactId != artifactId) {
-                this.$scope.updateSelectedArtifact();
-            }
-            this.$scope.selectedArtifactId = artifactId;
-
-        };
-
-        this.$scope.closeDescriptionPopover = ():void => {
-            if (this.$scope.selectedArtifactId) {
-                this.$scope.updateSelectedArtifact();
-                this.$scope.selectedArtifactId = null;
-            }
-        };
-    };
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
deleted file mode 100644
index a26bcdeccd..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~ Modifications Copyright (C) 2019 Nokia. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="workspace-deployment-artifact">
-
-    <div data-tests-id="add-deployment-artifact-button" ng-if="!isViewMode()" data-ng-class="{'disabled': isDisableMode()}" data-tests-id="add-property-button" class="add-btn" data-ng-click="addOrUpdate({})">Add</div>
-
-    <div class="table-container-flex">
-
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <loader data-display="isLoading"></loader>
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
-                    <span data-ng-if="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item"></div>
-            </div>
-
-            <form class="body" name="editForm">
-
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-
-                    <!-- Artifact row -->
-                    <div ng-if="noArtifactsToShow()" data-ng-class="{'disabled': isDisableMode()}" class="no-row-text" translate="DEPLOYMENT_ARTIFACT_NO_ARTIFACTS_TO_DISPLAY"></div>
-                    <div data-ng-repeat-start="artifact in artifacts | orderBy:sortBy:reverse track by $index"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': selectedArtifactId == artifact.uniqueId }"
-                         data-ng-if="artifact.esId && 'HEAT_ENV' !== artifact.artifactType"
-                         data-tests-id="artifact-item-{{artifact.artifactDisplayName}}">
-                        <div class="table-col-general flex-item" >
-                            <div class="heat-env-connect-container" ng-class="{'heat-env-connect-container-view-mode': isViewMode()}" data-ng-if="artifact.envArtifact">
-                            <span  class="heat-env-connect"></span>
-                             </div>
-                            <span data-tests-id="artifactDisplayName_{{artifact.artifactDisplayName}}" class="artifact-name text" tooltips tooltip-content="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span>
-
-                            <span class="sprite-new show-desc hand description-popover-icon"
-                                  uib-popover-template="popoverTemplate"
-                                  popover-class="parameter-description-popover deployment-artifact-view top"
-                                  popover-title="Description"
-                                  popover-placement="auto top-left"
-                                  popover-is-open="selectedArtifactId == artifact.uniqueId && !isLoading"
-                                  popover-trigger="'none'"
-                                  popover-append-to-body="false"
-                                  data-ng-click="openDescriptionPopover(artifact.uniqueId)"
-                                  data-tests-id="descriptionIcon_{{artifact.artifactDisplayName}}"></span>
-                        </div>
-
-                        <div class="table-col-general flex-item text" data-tests-id="artifactType_{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactType}}">
-                            {{artifact.artifactType}}
-                        </div>
-                        <div class="table-col-general flex-item" data-tests-id="timeout_{{artifact.artifactDisplayName}}">
-                            {{artifact.timeout? artifact.timeout:''}}
-                        </div>
-                        <div class="table-col-general flex-item" data-tests-id="artifactVersion_{{artifact.artifactDisplayName}}">
-                            {{artifact.artifactVersion}}
-                        </div>
-                        <div class="table-col-general flex-item text" data-tests-id="artifactUUID_{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactUUID}}">
-                            <span>{{artifact.artifactUUID}}</span>
-                        </div>
-
-                        <div class="table-btn-col flex-item">
-                            <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactDisplayName}}"
-                                    data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="addOrUpdate(artifact)"></button>
-                            <button class="table-delete-btn" data-tests-id="delete_{{artifact.artifactDisplayName}}"
-                                    data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="delete(artifact)"> </button>
-                             <button class="table-download-btn" download-artifact  data-tests-id="download_{{artifact.artifactDisplayName}}"
-                                     data-ng-if="artifact.artifactDisplayName" component="component" artifact="artifact"></button>
-                            <button ng-if="artifact.isGenericBrowseable()"
-                                    class="table-magnifier-btn"
-                                    data-ng-click="openGenericArtifactBrowserModal(artifact)" component="component" artifact="artifact"
-                                    data-tests-id="gab-{{artifact.artifactDisplayName}}"></button>
-                            <button ng-if="!isViewMode() && artifact.isHEAT()"
-                                    class="sprite e-sdc-small-icon-pad edit-paramtes-button"
-                                    data-ng-click="openEditEnvParametersModal(artifact)" type="button"
-                                    data-tests-id="edit-parameters-of-{{artifact.artifactDisplayName}}"></button>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" class="flex-container data-row" data-ng-if="artifact.envArtifact">
-
-                        <div class="table-col-general flex-item"  zzdata-ng-click="!isViewMode() && addOrUpdate(artifact.envArtifact)">
-                            <span>{{artifact.envArtifact.artifactDisplayName}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item" data-tests-id="{{artifact.envArtifact.artifactType}}">
-                            {{artifact.envArtifact.artifactType}}
-                        </div>
-                        <div class="table-col-general flex-item" data-tests-id="{{artifact.envArtifact.timeout}}">
-                            {{artifact.envArtifact.timeout? artifact.envArtifact.timeout:''}}
-                        </div>
-                        <div class="table-col-general flex-item" data-tests-id="artifactEnvVersion_{{artifact.artifactDisplayName}}">
-                            {{artifact.envArtifact.artifactVersion}}
-                        </div>
-                        <div class="table-col-general flex-item text" data-tests-id="{{artifact.envArtifact.artifactUUID}}" tooltips tooltip-content="{{artifact.envArtifact.artifactUUID}}">
-                            <span>{{artifact.envArtifact.artifactUUID}}</span>
-                        </div>
-
-
-                        <div class="table-btn-col flex-item" >
-                            <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactLabel}}env"
-                                    data-ng-if="!isViewMode()" data-ng-click="addOrUpdate(artifact.envArtifact)"></button>
-                            <button class="table-download-btn" data-tests-id="download_env_{{artifact.artifactDisplayName}}" download-artifact
-                                    data-ng-if="artifact.artifactName" component="component" artifact="artifact.envArtifact"></button>
-
-                        </div>
-                    </div>
-
-                    <!--<div class="i-sdc-designer-sidebar-section-content-item-artifact-heat-env" ng-if="artifact.heatParameters.length">-->
-                        <!--<span class="enabled" data-ng-bind="getEnvArtifactName(artifact)" data-ng-click="!isViewMode() && addOrUpdate(getEnvArtifact(artifact))"></span>-->
-                        <!--<download-artifact class="i-sdc-designer-sidebar-section-content-item-button download-env sprite e-sdc-small-download hand" artifact="getEnvArtifact(artifact)"-->
-                                           <!--component="currentComponent" instance="true"-->
-                                           <!--data-tests-id="download"></download-artifact>-->
-                    <!--</div>-->
-
-
-
-                    <!-- Add artifacts buttons -->
-                    <!--<button class="add-button" data-ng-repeat="artifact in artifacts track by $index"-->
-                            <!--type="button"-->
-                            <!--data-ng-show="!artifact.esId"-->
-                            <!--data-ng-if="!viewModeOrCsarComponent()"-->
-                            <!--data-ng-class="{'disabled': isDisableMode() || component.isCsarComponent()}"-->
-                            <!--data-tests-id="{{artifact.artifactDisplayName}} deployment_artifact"-->
-                            <!--translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_HEAT"-->
-                            <!--translate-values="{'name': '{{artifact.artifactDisplayName}}'}"-->
-                            <!--data-ng-click="addOrUpdate(artifact)"></button>-->
-
-                    <!-- Top add button -->
-                    <button class="add-button" type="button" data-ng-if="!isViewMode()" data-ng-class="{'disabled': isDisableMode()}" translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER" data-ng-click="addOrUpdate({})"></button>
-                </perfect-scrollbar>
-            </form>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
deleted file mode 100644
index f67d088b5a..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
+++ /dev/null
@@ -1,201 +0,0 @@
-.workspace-deployment-artifact {
-    width: 93%;
-    display: inline-block;
-    .table-container-flex .table .body .data-row + div.item-opened {
-        align-items: center;
-        padding: 10px 40px 10px 30px;
-    }
-
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-
-    .heat-env-connect-container{
-        background-color: white;
-        position: absolute;
-        height: 70px;
-        width:20px;
-        left: 0;
-        top:0;
-    }
-    .heat-env-connect-container-view-mode{
-        background-color: @tlv_color_t;
-    }
-    .heat-env-connect{
-        border-left: 1px #848586 solid;
-        height: 50px;
-        margin-left: 10px;
-        margin-top: 10px;
-        border-top: 1px #848586 solid;
-        border-bottom: 1px #848586 solid;
-        width: 11px;
-        float: left;
-
-    }
-
-    .artifact-name{
-        width:85%;
-    }
-
-    .table-container-flex .table .body .data-row div .heat-env-connect-container{
-        border-right: none;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-file-link::before{
-        content:"";
-        background-color: white;
-        width: 12px;
-
-    }
-
-
-
-    .table {
-        height:490px;
-        margin-bottom: 0;
-    }
-
-    .parameter-description {
-        .circle(18px, @color_p);
-        content: '?';
-        line-height: 18px;
-        vertical-align: middle;
-        margin-left: 5px;
-        cursor: default;
-        display: inline-block;
-        position: absolute;
-        top: 16px;
-    }
-
-    .table-container-flex {
-
-        margin-top: 0;
-
-        .text{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-        }
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-            .hand;
-            padding-left: 30px;
-            position: relative;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-            .description-popover-icon{
-                float:right;
-                margin-top:6px;
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 9;
-        }
-
-        .flex-item:nth-child(4) {
-            flex-grow: 3;
-        }
-
-        .flex-item:nth-child(5) {
-            flex-grow: 20;
-        }
-
-        .flex-item:nth-child(6) {
-            flex-grow: 5;
-
-            &.table-btn-col {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                button {
-                    flex: 0 1 auto;
-                    background-color: transparent;
-                    border: 0;
-                    margin: 0;
-                }
-                .edit-paramtes-button {
-                    order: -1;
-                }
-            }
-        }
-    }
-    .w-sdc-form{
-        text-align: left;
-
-        .w-sdc-env-params{
-            border-top: 1px solid #cdcdcd;
-            margin: 25px 0 10px 0;
-        }
-
-        .i-sdc-form-textarea {
-            border: 1px solid @color_e;
-            min-height: 60px;
-            padding: 10px 13px;
-            width: 100%;
-            resize: none;
-
-        }
-
-        .w-sdc-form-item {
-            &.error {
-                .i-sdc-form-input,
-                .i-sdc-form-select,
-                .i-sdc-form-textarea {
-                    border-color: @color_h;
-                    outline: none;
-                    box-sizing: border-box;
-                }
-            }
-        }
-
-        .i-sdc-env-form-label{
-            font-family: @font-opensans-medium;
-            color: @main_color_m;
-            overflow: hidden;
-            max-width: 450px;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-            margin-top: 14px;
-
-            &.required::before {
-                color: #f33;
-                content: '*';
-                margin-right: 4px;
-            }
-        }
-    }
-}
-
-.table-container-flex .table .body .scrollbar-container {
-        overflow-x:auto !important; //need to override the overflow-hidden for the table so that the popover auto positioning works
-        min-height: 400px;
-}
-
-.parameter-description-popover.deployment-artifact-view {
-    margin-left: -22px;
-    z-index: 1040;
-    min-width: 300px;
-    .input-error {
-        .q_12_m;
-    }
-    .error textarea{
-        border-color: @main_color_g;
-        color: @color_h;
-        outline: none;
-    }
-    .popover-content textarea {
-        width:100%;
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts
deleted file mode 100644
index 9df377c5fc..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {ComponentFactory, MenuHandler, ChangeLifecycleStateHandler, ModalsHandler} from "app/utils";
-import {LeftPaletteLoaderService, CacheService, SharingService} from "app/services";
-import {Component, IAppMenu, Tab, ComponentInstance} from "app/models";
-import {GRAPH_EVENTS} from "../../../../utils/constants";
-import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
-import {EventListenerService} from "../../../../services/event-listener-service";
-import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service";
-
-export interface IDeploymentViewModelScope extends IWorkspaceViewModelScope {
-
-    currentComponent:Component;
-    selectedComponent:Component;
-    isLoading:boolean;
-    sharingService:SharingService;
-    sdcMenu:IAppMenu;
-    version:string;
-    isViewOnly:boolean;
-    tabs:Array<Tab>;
-    selectedTab: Tab;
-    isComponentInstanceSelected():boolean;
-    updateSelectedComponent():void
-    openUpdateModal();
-    deleteSelectedComponentInstance():void;
-    onBackgroundClick():void;
-    setSelectedInstance(componentInstance:ComponentInstance):void;
-    printScreen():void;
-
-}
-
-export class DeploymentViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$templateCache',
-        'sdcMenu',
-        'MenuHandler',
-        '$state',
-        'Sdc.Services.SharingService',
-        '$filter',
-        'Sdc.Services.CacheService',
-        'ComponentFactory',
-        'ChangeLifecycleStateHandler',
-        'LeftPaletteLoaderService',
-        'ModalsHandler',
-        'EventListenerService',
-        'ComponentServiceNg2'
-    ];
-
-    constructor(private $scope:IDeploymentViewModelScope,
-                private $templateCache:ng.ITemplateCacheService,
-                private sdcMenu:IAppMenu,
-                private MenuHandler:MenuHandler,
-                private $state:ng.ui.IStateService,
-                private sharingService:SharingService,
-                private $filter:ng.IFilterService,
-                private cacheService:CacheService,
-                private ComponentFactory:ComponentFactory,
-                private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
-                private LeftPaletteLoaderService:LeftPaletteLoaderService,
-                private ModalsHandler:ModalsHandler,
-                private eventListenerService: EventListenerService,
-                private ComponentServiceNg2: ComponentServiceNg2) {
-
-        this.$scope.setValidState(true);
-        this.initScope();
-        this.initGraphData();
-    }
-
-
-    private initComponent = ():void => {
-
-        this.$scope.currentComponent = this.$scope.component;
-        this.$scope.selectedComponent = this.$scope.currentComponent;
-        this.updateUuidMap();
-        this.$scope.isViewOnly = this.$scope.isViewMode();
-    };
-
-
-    private updateUuidMap = ():void => {
-        /**
-         * In case user press F5, the page is refreshed and this.sharingService.currentEntity will be undefined,
-         * but after loadService or loadResource this.sharingService.currentEntity will be defined.
-         * Need to update the uuidMap with the new resource or service.
-         */
-        this.sharingService.addUuidValue(this.$scope.currentComponent.uniqueId, this.$scope.currentComponent.uuid);
-    };
-
-    private initRightTabs = ()=> {
-        if (this.$scope.currentComponent.modules) {
-            this.$templateCache.put("hierarchy-view.html", require('app/view-models/tabs/hierarchy/hierarchy-view.html'));
-            let hierarchyTab = new Tab("hierarchy-view.html", 'Sdc.ViewModels.HierarchyViewModel', 'hierarchy', this.$scope.isViewMode(), this.$scope.currentComponent, 'hierarchy');
-            this.$scope.tabs.push(hierarchyTab)
-        }
-    }
-
-    private initGraphData = ():void => {
-        if(!this.$scope.component.componentInstances || !this.$scope.component.componentInstancesRelations || !this.$scope.component.modules) {
-            this.ComponentServiceNg2.getDeploymentGraphData(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
-                this.$scope.component.componentInstances = response.componentInstances;
-                this.$scope.component.componentInstancesRelations = response.componentInstancesRelations;
-                this.$scope.component.modules = response.modules;
-                this.$scope.isLoading = false;
-                this.initComponent();
-                this.initRightTabs();
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED);
-                this.$scope.selectedTab = this.$scope.tabs[0];
-            });
-        } else {
-            this.$scope.isLoading = false;
-            this.initRightTabs();
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED);
-
-        }
-    };
-
-    private initScope = ():void => {
-        this.$scope.isLoading = true;
-        this.$scope.sharingService = this.sharingService;
-        this.$scope.sdcMenu = this.sdcMenu;
-        this.$scope.version = this.cacheService.get('version');
-        this.initComponent();
-        this.$scope.tabs = Array<Tab>();
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view.html
deleted file mode 100644
index aae03135a3..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="deployment-view">
-    <loader display="isLoading"></loader>
-    <div class="w-sdc-deployment-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}">
-        <deployment-graph component="currentComponent" is-view-only="isViewOnly"></deployment-graph>
-    </div>
-
-    <div class="w-sdc-deployment-right-bar">
-        <ng1-tabs tabs="tabs" is-view-only="isViewOnly" selected-tab="selectedTab"></ng1-tabs>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less
deleted file mode 100644
index f51ff6220d..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less
+++ /dev/null
@@ -1,34 +0,0 @@
-.deployment-view {
-
-    display: inline-block;
-    text-align: left;
-    align-items: left;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-
-    .w-sdc-deployment-canvas {
-        .noselect;
-        .bg_c;
-        position: relative;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
-
-        .view-mode{
-            background-color: #f8f8f8;
-            border:0;
-        }
-    }
-
-    .w-sdc-deployment-right-bar {
-
-        .noselect;
-        bottom: 0;
-        position: absolute;
-        right: 0px;
-        transition: right 0.2s;
-        top:  @action_nav_height;
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts
deleted file mode 100644
index eab06f28e8..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {Distribution, DistributionComponent, ExportExcel} from "app/models";
-
-interface IDistributionStatusModalViewModelScope {
-    distribution:Distribution;
-    status:string;
-    getStatusCount(distributionComponent:Array<DistributionComponent>):any;
-    getUrlName(url:string):string;
-    modalDitributionStatus:ng.ui.bootstrap.IModalServiceInstance;
-    footerButtons:Array<any>;
-    //exportExcelData:ExportExcel;
-    close():void;
-    initDataForExportExcel():ExportExcel;
-}
-
-export class DistributionStatusModalViewModel {
-
-    static '$inject' = ['$scope', '$uibModalInstance', 'data', '$filter'];
-
-    constructor(private $scope:IDistributionStatusModalViewModelScope,
-                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                private data:any,
-                private $filter:ng.IFilterService) {
-        this.initScope();
-    }
-
-    private generateMetaDataForExportExcel = ():Array<string>=> {
-        let metaData = [];
-        metaData[0] = 'Name:' + this.data.component.name + '| UUID:' + this.data.component.uuid + '|  Invariant UUID:' + this.data.component.invariantUUID;
-        metaData[1] = 'Distribution ID:' + this.$scope.distribution.distributionID +
-            '| USER ID:' + this.$scope.distribution.userId +
-            '| Time[UTC]:' + this.$filter('date')(this.$scope.distribution.timestamp, 'MM/dd/yyyy h:mma', 'UTC') +
-            '| Status:' + this.$scope.distribution.deployementStatus;
-        return metaData;
-    };
-
-    private generateDataObjectForExportExcel = ():any=> {
-        let correctFormatDataObj = [];
-        _.each(this.$scope.distribution.distributionComponents, (dComponent:DistributionComponent) => {
-            if (dComponent.status == this.$scope.status) {
-                correctFormatDataObj.push({
-                    'omfComponentID': dComponent.omfComponentID,
-                    'artiFactName': this.$scope.getUrlName(dComponent.url),
-                    'url': dComponent.url,
-                    'timestamp': this.$filter('date')(dComponent.timestamp, 'MM/dd/yyyy h:mma', 'UTC'),
-                    'status': dComponent.status
-                });
-            }
-        });
-        return correctFormatDataObj;
-    };
-
-    private initScope = ():void => {
-        this.$scope.distribution = this.data.distribution;
-        this.$scope.status = this.data.status;
-        this.$scope.modalDitributionStatus = this.$uibModalInstance;
-
-
-        this.$scope.getUrlName = (url:string):string => {
-            let urlName:string = _.last(url.split('/'));
-            return urlName;
-        };
-
-        this.$scope.initDataForExportExcel = ():ExportExcel => {
-            let exportExcelData = new ExportExcel();
-            exportExcelData.fileName = this.$scope.status;
-            exportExcelData.groupByField = "omfComponentID";
-            exportExcelData.tableHeaders = ["Component ID", "Artifact Name", "URL", "Time(UTC)", "Status"];
-            exportExcelData.metaData = this.generateMetaDataForExportExcel();
-            exportExcelData.dataObj = this.generateDataObjectForExportExcel();
-            return exportExcelData;
-        };
-
-        this.$scope.close = ():void => {
-            this.$uibModalInstance.close();
-        };
-
-        this.$scope.footerButtons = [
-            {'name': 'Close', 'css': 'blue', 'callback': this.$scope.close}
-        ];
-
-    };
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html b/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html
deleted file mode 100644
index 0e58959e9a..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html
+++ /dev/null
@@ -1,146 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<ng1-modal modal="modalDitributionStatus"  type="classic" class="w-sdc-classic-top-line-modal" buttons="footerButtons" header="Distribution by Status" show-close-button="true">
-
-    <div class="w-sdc-distribution-view">
-        <div class="w-sdc-distribution-view-header">
-
-        </div>
-
-        <div class="actions-buttons">
-            <json-export-excel init-export-excel-data="initDataForExportExcel()">
-            </json-export-excel>
-        </div>
-
-        <perfect-scrollbar include-padding="true" class="w-sdc-distribution-view-content">
-            <div class="w-sdc-distribution-view-content-section w-sdc-distribute-parent-block">
-                <ul>
-                    <li  class="w-sdc-distribute-parent-block" >
-                        <div class="w-sdc-distribute-row w-sdc-distribute-row-extends extends">
-
-                            <div class="w-sdc-distribute-row-content">
-                                <div class="w-sdc-distribute-content">
-                                    <div class="title-section item-1">
-                                        <div class="title">Distribution ID</div>
-                                        <div data-ng-bind="distribution.distributionID"></div>
-                                    </div>
-                                    <div class="title-section item-2">
-                                        <div class="title" translate="DISTRIBUTION_VIEW_TITLE_USER_ID"></div>
-                                        <div data-ng-bind="distribution.userId"></div>
-                                    </div>
-                                    <div class="title-section item-3">
-                                        <div class="title">Time[UTC]:</div>
-                                        <div
-                                            data-ng-bind="distribution.timestamp | stringToDateFilter | date: 'MM/dd/yyyy h:mma':'UTC'"></div>
-                                    </div>
-                                    <div class="title-section item-4">
-                                        <span class="sprite-new status-icon" data-ng-class="distribution.deployementStatus"></span>
-                                        <span class="sprite-new" data-ng-bind="distribution.deployementStatus"></span>
-                                    </div>
-                                </div>
-                                <div class="w-sdc-distribute-status-block" data-ng-show="distribution.statusCount">
-                                    <div class="status-item-1">Status: {{status}} <span data-ng-bind="(distribution.distributionComponents | filter:status:true).length"
-                                                                                        class="blue-font"></span></div>
-
-                                </div>
-                            </div>
-                        </div>
-
-                        <ul class="w-sdc-distribute-components-block disable-hover">
-                            <li data-ng-repeat="(omfComponentID,omfComponentList) in distribution.distributionComponents | orderBy: '-timestamp' | filter:status:true | groupBy:'omfComponentID'"
-                                class="disable-hover">
-                                <div class="w-sdc-distribute-row omf-component-row w-sdc-distribute-row-extends "
-                                     data-ng-class="{'extends': omfComponentListExtends}">
-                                    <div class="w-sdc-distribution-arrow-btn" data-ng-click="omfComponentListExtends=!omfComponentListExtends"
-                                         ng-class="{'extends': omfComponentListExtends}"
-                                         data-ng-init="omfComponentListExtends=false"
-                                    ></div>
-                                    <div class="w-sdc-distribute-status-block">
-                                        <div class="status-item-1">{{omfComponentID}} <span class="blue-font">{{omfComponentList.length}}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div data-ng-show="omfComponentListExtends"
-                                     class="w-sdc-distribute-omfComponent-block disable-hover">
-                                    <div class="w-sdc-distribute-row-extends disable-hover">
-                                        <div class="disable-hover">
-                                            <div class="w-sdc-distribute-row omfComponent-table-head">
-                                                <div class="title item-1">Component ID</div>
-                                                <div class="title item-2">Artifact Name</div>
-                                                <div class="title item-3">URL</div>
-                                                <div class="title item-4">Time(UTC)</div>
-                                                <div class="title item-5">Status</div>
-                                            </div>
-
-                                            <div class="w-sdc-distribute-row omfComponent-table-row"
-                                                 data-ng-repeat-start="(url,urlList) in omfComponentList | orderBy: '-timestamp' |  groupBy:'url'"
-                                                 data-ng-class="urlListExtends?'extends row-{{$index}}':'row-{{$index}}'" >
-                                                <div class="w-sdc-distribute-cell item-1">
-                                                    <div class="w-sdc-distribution-arrow-btn" data-ng-click="urlListExtends=!urlListExtends"
-                                                         data-ng-class="{'extends': urlListExtends}"
-                                                         data-ng-init="urlListListExtends=false"
-                                                    ></div>
-                                                    {{urlList[0].omfComponentID}}
-                                                </div>
-                                                <div class="w-sdc-distribute-cell item-2" sdc-smart-tooltip>
-                                                    {{getUrlName(urlList[0].url)}}
-                                                </div>
-                                                <div class="w-sdc-distribute-cell item-3 disable-hover">
-                                                    <div sdc-smart-tooltip class="distribution-url">{{urlList[0].url}}</div>
-                                                    <div sdc-smart-tooltip title="Copy url" clipboard text="urlList[0].url"
-                                                         class="sprite-new link-btn copy-link disable-hover"></div>
-                                                </div>
-                                                <div class="w-sdc-distribute-cell item-4"><span
-                                                    data-ng-bind="urlList[0].timestamp  | date: 'MM/dd/yyyy h:mma':'UTC'"></span>
-                                                </div>
-                                                <div class="w-sdc-distribute-cell item-5">{{urlList[0].status}}</div>
-                                            </div>
-
-
-                                            <div data-ng-repeat-end data-ng-show="urlListExtends" class="disable-hover">
-                                                <div class="w-sdc-distribute-row extends disable-hover">
-                                                    <ul data-ng-show="urlListExtends"
-                                                        class="w-sdc-distribute-url-block disable-hover">
-                                                        <li data-ng-repeat="distributionComponent in urlList | orderBy: '-timestamp'"
-                                                            class="disable-hover">
-                                                        <span
-                                                            data-ng-bind="distributionComponent.timestamp | date: 'MM/dd/yyyy h:mma':'UTC'"
-                                                            class="disable-hover"></span>
-                                                        <span
-                                                            class="disable-hover">{{distributionComponent.status}}</span>
-                                                           <span
-                                                               class="disable-hover reason" data-ng-show="distributionComponent.status == 'NOT_NOTIFIED'">Reason: Component has determined artifact is not needed.</span>
-                                                          <span
-                                                              class="disable-hover reason" data-ng-show="distributionComponent.errorReason">Reason: {{distributionComponent.errorReason}}</span>
-                                                        </li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-            </div>
-
-        </perfect-scrollbar>
-    </div>
-
-
-</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less b/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less
deleted file mode 100644
index d167083a2b..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less
+++ /dev/null
@@ -1,40 +0,0 @@
-.w-sdc-classic-top-line-modal {
-
-    .w-sdc-modal-head {
-        //   border-bottom: none;
-    }
-    .w-sdc-distribution-view {
-        .actions-buttons {
-            height: 29px;
-            padding: 0 25px 0 0px;
-            span{
-                float: right;
-            }
-        }
-
-        .w-sdc-distribution-view-content {
-            height: 500px;
-        }
-
-        .w-sdc-distribution-view-content-section {
-
-            .w-sdc-distribute-parent-block {
-                .w-sdc-distribute-components-block {
-
-                    .omf-component-row {
-                        .w-sdc-distribute-status-block {
-                            margin-left: 0;
-                        }
-
-                    }
-                    div {
-                        padding-left: 0;
-                    }
-                }
-
-            }
-
-        }
-    }
-}
-
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts
deleted file mode 100644
index 47ec1fd9e3..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {Distribution, DistributionComponent, Service} from "app/models";
-import {ModalsHandler, Dictionary} from "app/utils";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-
-interface IDistributionViewModel extends IWorkspaceViewModelScope {
-    modalDistribution:ng.ui.bootstrap.IModalServiceInstance;
-    service:Service;
-    distributions:Array<Distribution>;
-    showComponents(distribution:Distribution):void;
-    markAsDeployed(distribution:Distribution):void;
-    getStatusCount(distributionComponent:Array<DistributionComponent>):any;
-    initDistributions():void;
-    getUrlName(url:string):string;
-    close():void;
-    openDisributionStatusModal:Function;
-}
-
-export class DistributionViewModel {
-
-    static '$inject' = [
-        '$scope',
-        'ModalsHandler'
-
-    ];
-
-    constructor(private $scope:IDistributionViewModel,
-                private ModalsHandler:ModalsHandler) {
-        this.initScope();
-        this.$scope.setValidState(true);
-    }
-
-    private initScope = ():void => {
-        this.$scope.service = <Service>this.$scope.component;
-
-
-        // Open Distribution status modal
-        this.$scope.openDisributionStatusModal = (distribution:Distribution, status:string):void => {
-            this.ModalsHandler.openDistributionStatusModal(distribution, status, this.$scope.component).then(()=> {
-                // OK
-            }, ()=> {
-                // ERROR
-            });
-        };
-
-
-        this.$scope.showComponents = (distribution:Distribution):void => {
-            let onError = (response) => {
-                console.info('onError showComponents', response);
-            };
-            let onSuccess = (distributionComponents:Array<DistributionComponent>) => {
-                distribution.distributionComponents = distributionComponents;
-                distribution.statusCount = this.$scope.getStatusCount(distribution.distributionComponents);
-                // distribution.components = this.aggregateDistributionComponent(distributionComponents);;
-            };
-            this.$scope.service.getDistributionsComponent(distribution.distributionID).then(onSuccess, onError);
-        };
-
-        this.$scope.getStatusCount = (distributionComponent:Array<DistributionComponent>):any => {
-            return _.countBy(distributionComponent, 'status')
-        };
-
-        this.$scope.getUrlName = (url:string):string => {
-            let urlName:string = _.last(url.split('/'));
-            return urlName;
-        };
-
-        this.$scope.markAsDeployed = (distribution:Distribution):void => {
-            let onError = (response) => {
-                console.info('onError markAsDeployed', response);
-            };
-            let onSuccess = (result:any) => {
-                distribution.deployementStatus = 'Deployed';
-            };
-            this.$scope.service.markAsDeployed(distribution.distributionID).then(onSuccess, onError);
-
-        };
-
-        this.$scope.initDistributions = ():void => {
-            let onError = (response) => {
-                console.info('onError initDistributions', response);
-            };
-            let onSuccess = (distributions:Array<Distribution>) => {
-                this.$scope.distributions = distributions;
-            };
-            this.$scope.service.getDistributionsList().then(onSuccess, onError);
-        };
-
-        this.$scope.initDistributions();
-
-    };
-
-
-    private aggregateDistributionComponent = (distributionComponents:Array<DistributionComponent>):any => {
-        let aggregateDistributions:Dictionary<string,Dictionary<string,Array<DistributionComponent>>> = new Dictionary<string,Dictionary<string,Array<DistributionComponent>>>();
-        let tempAggregateDistributions:any = _.groupBy(distributionComponents, 'omfComponentID');
-        let aa = new Dictionary<string,Array<DistributionComponent>>();
-
-        let tempAggregate:any;
-        _.forEach(tempAggregateDistributions, (distributionComponents:Array<DistributionComponent>, omfComponentID:string)=> {
-
-            let urls:any = _.groupBy(distributionComponents, 'url');
-            aggregateDistributions.setValue(omfComponentID, urls);
-            // aggregateDistributions[omfComponentID] = ;
-
-        });
-        console.log(aggregateDistributions);
-        return aggregateDistributions;
-    };
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view.html b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view.html
deleted file mode 100644
index babe5c2e5a..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view.html
+++ /dev/null
@@ -1,198 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="w-sdc-distribution-view">
-    <div class="w-sdc-distribution-view-header">
-        <div class="w-sdc-distribution-view-title">DISTRIBUTION <span data-ng-bind="'[' + distributions.length +']'"
-                                                                      class="blue-font"></span></div>
-        <div class="header-spacer"></div>
-        <div class="top-search">
-            <input type="text"
-                   style="width: auto;"
-                   class="search-text"
-                   data-tests-id="searchTextbox"
-                   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="sprite-new refresh-btn" data-tests-id="refreshButton" data-ng-click="initDistributions()" sdc-smart-tooltip=""
-             title="Refresh"></div>
-    </div>
-
-
-    <perfect-scrollbar include-padding="true" class="w-sdc-distribution-view-content">
-        <div class="w-sdc-distribution-view-content-section" data-tests-id="ditributionTable">
-            <ul>
-                <li data-ng-repeat="item in distributions | orderBy: '-timestamp' | filter:searchBind"
-                    data-ng-init="item.dateFormat = ( item.timestamp | stringToDateFilter | date: 'MM/dd/yyyy h:mma':'UTC' )"
-                    class="w-sdc-distribute-parent-block" data-tests-id="record_{{$index}}" data-ng-class="{'extends': item.showDetails}">
-                    <div class="w-sdc-distribute-row w-sdc-distribute-row-extends"
-                         data-ng-class="{'extends': item.showDetails  && item.distributionComponents.length}">
-                        <div class="w-sdc-distribution-arrow-btn" data-tests-id="ShowRecordButton_{{$index}}" data-ng-click="showComponents(item); item.showDetails=!item.showDetails"
-                             data-ng-class="{'extends': item.showDetails}"
-                             ></div>
-                        <div class="w-sdc-distribute-row-content">
-                            <div class="w-sdc-distribute-content">
-                                <div class="title-section item-1">
-                                    <div class="title">Distribution ID</div>
-                                    <div data-ng-bind="item.distributionID"></div>
-                                </div>
-                                <div class="title-section item-2">
-                                    <div class="title" translate="DISTRIBUTION_VIEW_TITLE_USER_ID"></div>
-                                    <div data-ng-bind="item.userId"></div>
-                                </div>
-                                <div class="title-section item-3">
-                                    <div class="title">Time[UTC]:</div>
-                                    <div
-                                        data-ng-bind="item.dateFormat"></div>
-                                </div>
-                                <div class="title-section item-4">
-                                    <span class="sprite-new status-icon" data-ng-class="item.deployementStatus"></span>
-                                    <span class="sprite-new" data-ng-bind="item.deployementStatus"></span>
-                                </div>
-                                <div>
-                                    <div class="sprite-new distribution-bth item-5"
-                                         data-ng-class="{'disable':item.deployementStatus==='Deployed'}"
-                                         data-ng-click="(item.deployementStatus==='Deployed') || markAsDeployed(item)"></div>
-                                </div>
-                            </div>
-                            <div class="w-sdc-distribute-status-block" data-ng-if="item.statusCount">
-                                <div class="status-item-1">Total Artifacts:<span data-ng-bind="(item.statusCount.NOT_NOTIFIED || 0) + (item.statusCount.NOTIFIED || 0) "
-                                                                       class="blue-font" data-tests-id="totalArtifacts_{{$index}}"></span></div>
-                                <div class="status-item-2 " ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'NOTIFIED')">Notified:</sapn><span
-                                    data-ng-bind="item.statusCount.NOTIFIED || 0" class="blue-font" data-tests-id="notified_{{$index}}"></span></div>
-
-                                <div class="status-item-3 link" ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DOWNLOAD_OK')">Downloaded:</sapn><span
-                                    data-ng-bind="item.statusCount.DOWNLOAD_OK || 0" class="blue-font" data-tests-id="downloaded_{{$index}}"></span></div>
-
-                                <div class="status-item-4 link"><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DEPLOY_OK')">Deployed:</sapn><span
-                                    data-ng-bind="item.statusCount.DEPLOY_OK || 0" class="blue-font" data-tests-id="deployed_{{$index}}" ></span><span
-                                    data-ng-class="{'deployed':(item.statusCount.DEPLOY_OK > 0)}"></span></div>
-                                <div class="status-item-5 link" ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'NOT_NOTIFIED')">Not Notified:</sapn><span
-                                    data-ng-bind="item.statusCount.NOT_NOTIFIED || 0" class="blue-font" data-tests-id="NotNotified_{{$index}}"></span></div>
-                                <div class="status-item-6"><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DEPLOY_ERROR')" >Deploy Errors:</sapn><span
-                                    data-ng-bind="item.statusCount.DEPLOY_ERROR || 0" class="red-font "></span><span
-                                    data-ng-class="{'error':(item.statusCount.DEPLOY_ERROR > 0)}" data-tests-id="errors_{{$index}}"></span></div>
-                                <div class="status-item-7"><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DOWNLOAD_ERROR')" >Download Errors:</sapn><span
-                                    data-ng-bind="item.statusCount.DOWNLOAD_ERROR || 0" class="red-font "></span><span
-                                    data-ng-class="{'error':(item.statusCount.DOWNLOAD_ERROR > 0)}" data-tests-id="errors_{{$index}}"></span></div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <ul data-ng-if="item.showDetails && item.distributionComponents.length"
-                        class="w-sdc-distribute-components-block disable-hover">
-
-                        <li data-ng-repeat="(omfComponentID,omfComponentList) in ::item.distributionComponents | orderBy: '-timestamp' | filter:searchBind | groupBy:'omfComponentID' "
-                            class="disable-hover"
-                            data-ng-init="statusCount = getStatusCount(omfComponentList);">
-                            <div class="w-sdc-distribute-row omf-component-row w-sdc-distribute-row-extends"
-                                 data-ng-class="{'extends': omfComponentListExtends}">
-                                <div class="w-sdc-distribution-arrow-btn" data-ng-click="omfComponentListExtends=!omfComponentListExtends"
-                                     ng-class="{'extends': omfComponentListExtends}"
-                                     data-ng-init="omfComponentListExtends=false"
-                                     ></div>
-                                <div class="w-sdc-distribute-status-block">
-                                    <div class="status-item-1">{{omfComponentID}} <span class="blue-font">{{(statusCount.NOT_NOTIFIED || 0) + (statusCount.NOTIFIED || 0) }}</span>
-                                    </div>
-                                    <div class="status-item-2">Notified:<span data-ng-bind="statusCount.NOTIFIED || 0"
-                                                                              class="blue-font"></span></div>
-                                    <div class="status-item-3">Downloaded:<span
-                                        data-ng-bind="statusCount.DOWNLOAD_OK || 0" class="blue-font"></span></div>
-                                    <div class="status-item-4">Deployed:<span data-ng-bind="statusCount.DEPLOY_OK || 0"
-                                                                              class="blue-font"></span><span
-                                        data-ng-class="{'deployed':(statusCount.DEPLOY_OK > 0)}"></span></div>
-                                    <div class="status-item-5">Not Notified:<span
-                                        data-ng-bind="statusCount.NOT_NOTIFIED || 0" class="blue-font"></span></div>
-                                    <div class="status-item-6">Deploy Errors:<span
-                                        data-ng-bind="statusCount.DEPLOY_ERROR || 0" class="red-font"></span><span
-                                        data-ng-class="{'error':(statusCount.DEPLOY_ERROR > 0)}"></span></div>
-                                    <div class="status-item-7">Download Errors:<span
-                                        data-ng-bind="statusCount.DOWNLOAD_ERROR || 0" class="red-font"></span><span
-                                        data-ng-class="{'error':(statusCount.DOWNLOAD_ERROR > 0)}"></span></div>
-                                </div>
-                            </div>
-                            <div data-ng-if="omfComponentListExtends"
-                                 class="w-sdc-distribute-omfComponent-block disable-hover">
-                                <div class="w-sdc-distribute-row-extends disable-hover">
-                                    <div class="disable-hover">
-                                        <div class="w-sdc-distribute-row omfComponent-table-head">
-                                            <div class="title item-1">Component ID</div>
-                                            <div class="title item-2">Artifact Name</div>
-                                            <div class="title item-3">URL</div>
-                                            <div class="title item-4">Time(UTC)</div>
-                                            <div class="title item-5">Status</div>
-                                        </div>
-
-                                        <div class="w-sdc-distribute-row omfComponent-table-row"
-                                             data-ng-repeat-start="(url,urlList) in ::omfComponentList | orderBy: '-timestamp' |  groupBy:'url'"
-                                             data-ng-class="urlListExtends?'extends row-{{$index}}':'row-{{$index}}'">
-                                            <div class="w-sdc-distribute-cell item-1"  sdc-smart-tooltip>
-                                                <div class="w-sdc-distribution-arrow-btn" data-ng-click="urlListExtends=!urlListExtends"
-                                                     data-ng-class="{'extends': urlListExtends}"
-                                                     data-ng-init="urlListListExtends=false;urlList[0].displayUrl=getUrlName(urlList[0].url)"
-                                                     ></div>
-                                                {{urlList[0].omfComponentID}}
-                                            </div>
-                                            <div class="w-sdc-distribute-cell item-2" sdc-smart-tooltip>
-                                                {{urlList[0].displayUrl}}
-                                            </div>
-                                            <div class="w-sdc-distribute-cell item-3 disable-hover">
-                                                <div sdc-smart-tooltip class="distribution-url">{{urlList[0].url}}</div>
-                                                <div sdc-smart-tooltip title="Copy url" clipboard text="urlList[0].url"
-                                                     class="sprite-new link-btn copy-link disable-hover"></div>
-                                            </div>
-                                            <div class="w-sdc-distribute-cell item-4"><span
-                                                data-ng-bind="urlList[0].timestamp  | date: 'MM/dd/yyyy h:mma':'UTC'"></span>
-                                            </div>
-                                            <div class="w-sdc-distribute-cell item-5"  sdc-smart-tooltip>
-                                                {{urlList[0].status}}
-                                            </div>
-                                        </div>
-
-
-                                        <div data-ng-repeat-end data-ng-if="urlListExtends" class="disable-hover" >
-                                            <div class="w-sdc-distribute-row extends disable-hover">
-                                                <ul data-ng-if="urlListExtends"
-                                                    class="w-sdc-distribute-url-block disable-hover">
-                                                    <li data-ng-repeat="distributionComponent in ::urlList | orderBy: '-timestamp'"
-                                                        class="disable-hover">
-                                                        <span
-                                                            data-ng-bind="distributionComponent.timestamp | date: 'MM/dd/yyyy h:mma':'UTC'"
-                                                            class="disable-hover"></span>
-                                                        <span
-                                                            class="disable-hover">{{distributionComponent.status}}</span>
-                                                           <span
-                                                               class="disable-hover reason" data-ng-if="distributionComponent.status == 'NOT_NOTIFIED'">Reason: Component has determined artifact is not needed.</span>
-                                                          <span
-                                                              class="disable-hover reason" data-ng-if="distributionComponent.errorReason">Reason: {{distributionComponent.errorReason}}</span>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
-
-    </perfect-scrollbar>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution.less b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution.less
deleted file mode 100644
index ee1f7ed2d6..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution.less
+++ /dev/null
@@ -1,362 +0,0 @@
-
-.w-sdc-distribution-view {
-    text-align: left;
-
-    .g_1;
-    min-height: 500px;
-
-    .w-sdc-distribution-view-distributed-green-text {
-        .l_9;
-        .bold;
-    }
-    .w-sdc-distribution-view-distributed-error-red-text {
-        .h_9;
-        .bold;
-    }
-
-    .bg_c;
-    vertical-align: top;
-    padding: 30px 10px;
-    width: 100%;
-
-    .w-sdc-distribution-view-header {
-        display: flex;
-        -webkit-justify-content: space-between;
-        margin: 0 25px 5px 40px;
-
-        .header-spacer {
-            flex-grow: 5;
-        }
-    }
-
-    .top-search {
-        position: relative;
-        input {
-            &.search-text {
-                height: 26px;
-                line-height: 26px;
-                margin: 0 18px 4px 20px;
-                padding-right: 25px;
-            }
-
-        }
-        .magnification {
-            top: 8px;
-            right: 25px;
-        }
-    }
-
-    .w-sdc-distribution-view-content {
-        .perfect-scrollbar;
-        padding: 0 25px 0 0px;
-        margin-bottom: 25px;
-        height: 700px;
-        overflow: hidden;
-        position: relative;
-
-    }
-
-    .w-sdc-distribution-view-title {
-        .s_14_r;
-
-        line-height: 30px;
-
-        span {
-            padding-left: 5px;
-        }
-    }
-
-    .blue-font {
-        .a_14_m;
-
-    }
-
-    .red-font {
-        .q_14_m;
-    }
-
-    .w-sdc-distribution-view-block {
-        div {
-            display: inline-block;
-        }
-    }
-
-    .w-sdc-distribution-view-content-section {
-        ul {
-            list-style-type: none;
-        }
-
-        .distribution-bth {
-            .hand;
-            &.disabled {
-                cursor: none;
-            }
-        }
-
-        .copy-link {
-            padding-right: 19px;
-            margin-left: 8px;
-            cursor: pointer;
-
-        }
-
-        .w-sdc-distribute-row-extends {
-            border-Left: solid 4px transparent;
-            &.extends {
-                border-left: solid 4px @main_color_c;
-                border-bottom: 1px solid @border_color_f;
-                margin-bottom: 10px;
-            }
-        }
-        .w-sdc-distribute-parent-block {
-            border: 1px solid @main_color_o;;
-            width: 100%;
-            margin-bottom: 6px;
-
-            .status-icon {
-                vertical-align: middle;
-                margin-bottom: 4px;
-            }
-
-            &.extends {
-                background-color: @tlv_color_t;
-            }
-
-            :not(.disable-hover):hover {
-                background-color: @tlv_color_u;
-            }
-
-            .title-section {
-                display: inline-block;
-                margin-right: 10px;
-                flex-basis: 0;
-            }
-
-            .title {
-                .l_12_m;
-                font-weight: bold;
-            }
-            .w-sdc-distribute-content {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-left: 10px;
-            }
-
-            .w-sdc-distribution-arrow-btn {
-                .sprite-new;
-                .arrow-up-small;
-                margin: 0 6px;
-                display: inline-table;
-            }
-            .extends.w-sdc-distribution-arrow-btn {
-                -webkit-transform: rotate(180deg);
-                -ms-transform: rotate(180deg);
-                transform: rotate(180deg);
-            }
-
-            .w-sdc-distribute-row {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-
-                .w-sdc-distribute-row-content {
-                    margin: 15px 31px 10px 0;
-                    width: 100%;
-                    .w-sdc-distribute-status-block {
-                        border-top: solid 1px @main_color_o;
-                    }
-                    .item-1 {
-                        flex-grow: 2;
-                    }
-                    .item-2 {
-                        flex-grow: 1;
-                    }
-                    .item-3 {
-                        flex-grow: 1;
-                    }
-                    .item-4 {
-                        flex-grow: 1;
-                    }
-                    .item-5 {
-                        flex-grow: 1;
-                    }
-                }
-            }
-
-            .w-sdc-distribute-status-block {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin: 10px 5px 0 5px;
-                padding: 5px 5px 0 5px;;
-                width: 100%;
-                div {
-                    border-left: 1px solid @main_color_o;
-                    padding: 0 12px;
-                }
-
-                .link {
-                    .a_14_m;
-                    cursor: pointer;
-                    &:hover{
-                        text-decoration: underline;
-                        .b_14_m;
-                    }
-                }
-
-                span {
-                    padding: 2px;
-                }
-
-                .deployed {
-                    margin-left: 10px;
-                    .sprite-new;
-                    .success-circle-small;
-                }
-
-                .error {
-                    .q_14_m;
-                    margin-left: 10px;
-                    .sprite-new;
-                    .error-icon;
-                }
-
-                .status-item-1 {
-                    border-left: 0;
-                }
-
-                .status-item-6 {
-                    flex-grow: 1;
-                    border-left: none;
-                    text-align: right;
-                }
-            }
-
-            .w-sdc-distribute-components-block {
-                padding: 0;
-                padding-bottom: 5px;
-                list-style-type: none;
-
-                li {
-                    margin: 5px 2px;
-                }
-
-                .omf-component-row {
-                    border: 1px solid @border_color_f;
-                    padding-left: 3px;
-                    background-color: white;
-                    margin: 0 30px;
-                    &.extends {
-                        padding-left: 0;
-                        border-Left: solid 4px @main_color_c;
-
-                    }
-
-                    .w-sdc-distribute-status-block {
-                        margin: 5px;
-                        padding: 5px;
-                    }
-
-                    .blue-font {
-                        .a_16_m;
-
-                    }
-
-                    &:hover {
-                        background-color: @tlv_color_u;
-                    }
-
-                }
-
-            }
-
-            .w-sdc-distribute-omfComponent-block {
-                background-color: white;
-                margin: 0 30px;
-                padding: 8px 10px;
-                border: 1px solid @border_color_f;
-
-                .omfComponent-table-head {
-                    margin-bottom: 5px;
-                    background-color: @tlv_color_u;
-                    .title {
-                        padding: 6px 10px;
-                        border-left: 1px solid @border_color_f;
-                        &:first-child {
-                            border: none;
-                        }
-                    }
-                }
-
-                .omfComponent-table-row {
-                    border-bottom: 1px solid @border_color_f;
-                    &.row-0 {
-                        border-top: 1px solid @border_color_f;
-                    }
-                    .w-sdc-distribute-cell {
-                        padding: 10px;
-                        border-left: 1px solid @border_color_f;
-                        &:last-child {
-                            border-right: 1px solid @border_color_f;
-                        }
-                        &.item-5 {
-                            .m_14_m;
-                        }
-                    }
-                }
-
-                .distribution-url {
-
-                }
-
-                .w-sdc-distribute-row.extends {
-                    border-Left: solid 4px @main_color_c;
-                    .item-1 {
-                        border: none;
-                    }
-
-                }
-
-                .item-1 {
-                    width: 20%;
-                }
-                .item-2 {
-                    width: 20%;
-                }
-
-                .item-3 {
-                    width: 24%;
-                    display: flex;
-                }
-
-                .item-4 {
-                    width: 18%;
-                }
-
-                .item-5 {
-                    width: 18%;
-                }
-            }
-
-            .w-sdc-distribute-url-block {
-
-                padding: 10px 15px;
-                border: none;
-                border-right: 1px solid @border_color_f;
-                border-bottom: 1px solid @border_color_f;
-                width: 100%;
-                li {
-                    border: none;
-                    span {
-                        padding-right: 30px;
-                        .m_12_r;
-                    }
-                }
-
-            }
-        }
-
-    }
-}
-
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index b4529700cf..e2709281b7 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -22,11 +22,13 @@
 import * as _ from "lodash";
 import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON,
     ResourceType, ComponentState, instantiationType, ComponentFactory} from "app/utils";
-import {CacheService, EventListenerService, ProgressService, OnboardingService} from "app/services";
+import { EventListenerService, ProgressService} from "app/services";
+import {CacheService, OnboardingService, ImportVSPService} from "app/services-ng2";
 import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service, ICsarComponent, Component} from "app/models";
 import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
 import {Dictionary} from "lodash";
 import { PREVIOUS_CSAR_COMPONENT } from "../../../../utils/constants";
+import { Observable, Subject } from "rxjs";
 
 
 export class Validation {
@@ -37,7 +39,6 @@ export class Validation {
     VendorNameValidationPattern:RegExp;
     VendorModelNumberValidationPattern:RegExp;
     commentValidationPattern:RegExp;
-    projectCodeValidationPattern:RegExp;
 }
 
 export class componentCategories {//categories field bind to this obj in order to solve this bug: DE242059
@@ -61,7 +62,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     isShowFileBrowse:boolean;
     isShowOnboardingSelectionBrowse:boolean;
     importedToscaBrowseFileText:string;
-    importCsarProgressKey:string;
+    importCsarProProgressKey:string;
     browseFileLabel:string;
     componentCategories:componentCategories;
     instantiationTypes:Array<instantiationType>;
@@ -86,6 +87,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     possibleToUpdateIcon():boolean;
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class GeneralViewModel {
 
     static '$inject' = [
@@ -100,7 +102,6 @@ export class GeneralViewModel {
         'CommentValidationPattern',
         'ValidationUtils',
         'sdcConfig',
-        'ProjectCodeValidationPattern',
         '$state',
         'ModalsHandler',
         'EventListenerService',
@@ -109,8 +110,10 @@ export class GeneralViewModel {
         '$interval',
         '$filter',
         '$timeout',
-        'Sdc.Services.OnboardingService',
-        'ComponentFactory'
+        'OnboardingService',
+        'ComponentFactory',
+        'ImportVSPService',
+        '$stateParams'
     ];
 
     constructor(private $scope:IGeneralScope,
@@ -124,7 +127,6 @@ export class GeneralViewModel {
                 private CommentValidationPattern:RegExp,
                 private ValidationUtils:ValidationUtils,
                 private sdcConfig:IAppConfigurtaion,
-                private ProjectCodeValidationPattern:RegExp,
                 private $state:ng.ui.IStateService,
                 private ModalsHandler:ModalsHandler,
                 private EventListenerService:EventListenerService,
@@ -133,8 +135,10 @@ export class GeneralViewModel {
                 protected $interval:any,
                 private $filter:ng.IFilterService,
                 private $timeout:ng.ITimeoutService,
-                private onBoardingService:OnboardingService,
-                private ComponentFactory:ComponentFactory) {
+                private onBoardingService: OnboardingService,
+                private ComponentFactory:ComponentFactory,
+                private importVSPService: ImportVSPService,
+                private $stateParams: any) {
 
         this.initScopeValidation();
         this.initScopeMethods();
@@ -153,13 +157,11 @@ export class GeneralViewModel {
         this.$scope.validation.VendorNameValidationPattern = this.VendorNameValidationPattern;
         this.$scope.validation.VendorModelNumberValidationPattern = this.VendorModelNumberValidationPattern;
         this.$scope.validation.commentValidationPattern = this.CommentValidationPattern;
-        this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
     };
 
-    private loadOnboardingFileCache = ():ng.IPromise<Dictionary<any>> =>{
-
+    private loadOnboardingFileCache = (): Observable<Dictionary<Dictionary<string>>> => {
         let onboardCsarFilesMap:Dictionary<Dictionary<string>>;
-        let onSuccess = (vsps:Array<ICsarComponent>) =>{
+        let onSuccess = (vsps:Array<ICsarComponent>) => {
             onboardCsarFilesMap = {};
             _.each(vsps, (vsp:ICsarComponent)=>{
                 onboardCsarFilesMap[vsp.packageId] = onboardCsarFilesMap[vsp.packageId] || {};
@@ -170,8 +172,8 @@ export class GeneralViewModel {
         };
         let onError = (): void =>{
             console.log("Error getting onboarding list");
-        };               
-        return this.onBoardingService.getOnboardingVSPs().then(onSuccess, onError);
+        };
+        return this.onBoardingService.getOnboardingVSPs().map(onSuccess, onError);
     };
 
     private setImportedFileText = ():void => {
@@ -179,7 +181,7 @@ export class GeneralViewModel {
         if(!this.$scope.isShowOnboardingSelectionBrowse) return;
 
         //these variables makes it easier to read this logic
-        let csarUUID:string = (<Resource>this.$scope.component).csarUUID; 
+        let csarUUID:string = (<Resource>this.$scope.component).csarUUID;
         let csarVersion:string = (<Resource>this.$scope.component).csarVersion;
 
         let onboardCsarFilesMap:Dictionary<Dictionary<string>> = this.cacheService.get('onboardCsarFilesMap');
@@ -187,21 +189,25 @@ export class GeneralViewModel {
             if(this.$scope.component.vspArchived){
                 this.$scope.importedToscaBrowseFileText = 'VSP is archived';
             } else {
-                this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[csarUUID][csarVersion];
+                if(this.$stateParams.componentCsar && this.$scope.component.lifecycleState === 'NOT_CERTIFIED_CHECKIN' && !this.$scope.isCreateMode()) {
+                    this.$scope.importedToscaBrowseFileText = this.$scope.originComponent.name + ' (' + (this.$scope.originComponent as Resource).csarVersion + ')';
+                } else {
+                    this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[csarUUID][csarVersion];
+                }
             }
         }
 
-        
+
         if(this.$scope.component.vspArchived || (onboardCsarFilesMap && onboardCsarFilesMap[csarUUID] && onboardCsarFilesMap[csarUUID][csarVersion])){ //check that the file name is already in cache
             assignFileName();
         } else {
-            this.loadOnboardingFileCache().then((onboardingFiles) => {
+            this.loadOnboardingFileCache().subscribe((onboardingFiles) => {
                 onboardCsarFilesMap = onboardingFiles;
                 this.cacheService.set('onboardCsarFilesMap', onboardingFiles);
                 assignFileName();
             }, ()=> {});
         }
-        
+
     }
 
     isCreateModeAvailable(verifyObj:string): boolean {
@@ -211,10 +217,9 @@ export class GeneralViewModel {
 
     private initScope = ():void => {
 
-       
         this.$scope.importCsarProgressKey = "importCsarProgressKey";
 
-        this.$scope.browseFileLabel = this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType === ResourceType.VF ? "Upload file" : "Upload VFC";
+        this.$scope.browseFileLabel = this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType === ResourceType.VF ? 'VSP' : 'Upload VFC';
         this.$scope.progressService = this.progressService;
         this.$scope.componentCategories = new componentCategories();
         this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory;
@@ -236,7 +241,7 @@ export class GeneralViewModel {
             if (resource.importedFile) { // Component has imported file.
                 this.$scope.isShowFileBrowse = true;
             }
-            if (this.$scope.isEditMode() && resource.resourceType == ResourceType.VF && !resource.csarUUID) {
+            if (resource.resourceType === ResourceType.VF && !resource.csarUUID) {
                 this.$scope.isShowFileBrowse = true;
             }
         } else if(this.$scope.component.isService()){
@@ -244,30 +249,35 @@ export class GeneralViewModel {
             this.$scope.initInstantiationTypes();
         }
 
-        // Work around to change the csar version
-        if (this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
-            //(<Resource>this.$scope.component).csarVersion = this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
-            this.cacheService.remove(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
-            this.$scope.updateUnsavedFileFlag(true);
+        if (this.cacheService.get(PREVIOUS_CSAR_COMPONENT)) { //keep the old component in the cache until checkout, so we dont need to pass it around
+            this.$scope.setOriginComponent(this.cacheService.get(PREVIOUS_CSAR_COMPONENT));
+            this.cacheService.remove(PREVIOUS_CSAR_COMPONENT);
+        }
 
-            if (!this.$scope.isViewMode() && this.cacheService.get(PREVIOUS_CSAR_COMPONENT)) { //keep the old component in the cache until checkout, so we dont need to pass it around
-                this.$scope.setOriginComponent(this.cacheService.get(PREVIOUS_CSAR_COMPONENT));
-                this.cacheService.remove(PREVIOUS_CSAR_COMPONENT);
+        if (this.$stateParams.componentCsar && !this.$scope.isCreateMode()) {
+            this.$scope.updateUnsavedFileFlag(true);
+            // We are coming from update VSP modal we need to automatically checkout (if needed) and save the VF
+            if (this.$scope.component.lifecycleState !== ComponentState.NOT_CERTIFIED_CHECKOUT) {
+                // Checkout is needed after that a save will be invoked in workspace-view.handleLifeCycleStateChange
+                this.EventListenerService.notifyObservers(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, 'checkOut');
+                // if(this.$scope.component.lifecycleState !== 'NOT_CERTIFIED_CHECKIN') {
+                //     (<Resource>this.$scope.component).csarVersion = this.$stateParams.componentCsar.csarVersion;
+                // }
+            } else {
+                this.$scope.save();
             }
         }
 
 
-        // Init the decision if to show onboarding
-        if (this.$scope.component.isResource() && this.$scope.isEditMode() &&
-            ((<Resource>this.$scope.component).resourceType == ResourceType.VF ||
-                (<Resource>this.$scope.component).resourceType == ResourceType.PNF)
-            && (<Resource>this.$scope.component).csarUUID) {
+        if (this.$scope.component.isResource() &&
+            (this.$scope.component as Resource).resourceType === ResourceType.VF ||
+                (this.$scope.component as Resource).resourceType === ResourceType.PNF && (this.$scope.component as Resource).csarUUID) {
             this.$scope.isShowOnboardingSelectionBrowse = true;
             this.setImportedFileText();
         } else {
             this.$scope.isShowOnboardingSelectionBrowse = false;
         }
-        
+
 
         //init file extensions based on the file that was imported.
         if (this.$scope.component.isResource() && (<Resource>this.$scope.component).importedFile) {
@@ -304,7 +314,7 @@ export class GeneralViewModel {
             this.$scope.originComponent.contactId = this.$scope.component.contactId;
         }
 
-        
+
         this.$scope.$on('$destroy', () => {
             this.EventListenerService.unRegisterObserver(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE);
             this.EventListenerService.unRegisterObserver(EVENTS.ON_LIFECYCLE_CHANGE);
@@ -313,7 +323,7 @@ export class GeneralViewModel {
     };
 
     // Convert category string MainCategory_#_SubCategory to Array with one item (like the server except)
-    private convertCategoryStringToOneArray = ():Array<IMainCategory> => {
+    private convertCategoryStringToOneArray = ():IMainCategory[] => {
         let tmp = this.$scope.component.selectedCategory.split("_#_");
         let mainCategory = tmp[0];
         let subCategory = tmp[1];
@@ -333,14 +343,14 @@ export class GeneralViewModel {
         }
         let tmpSelected = <IMainCategory> mainCategoryClone;
 
-        let result:Array<IMainCategory> = [];
+        let result:IMainCategory[] = [];
         result.push(tmpSelected);
 
         return result;
     };
 
     private updateComponentNameInBreadcrumbs = ():void => {
-        //update breadcrum after changing name
+        // update breadcrum after changing name
         this.$scope.breadcrumbsModel[1].updateSelectedMenuItemText(this.$scope.component.getComponentSubType() + ': ' + this.$scope.component.name);
         this.$scope.updateMenuComponentName(this.$scope.component.name);
     };
@@ -436,24 +446,20 @@ export class GeneralViewModel {
             if(this.$scope.component.vspArchived) return;
             let csarUUID = (<Resource>this.$scope.component).csarUUID;
             let csarVersion = (<Resource>this.$scope.component).csarVersion;
-            this.ModalsHandler.openOnboadrdingModal('Update', csarUUID, csarVersion).then((result)=> {
-
-                if(result){
-                    this.ComponentFactory.getComponentWithMetadataFromServer(result.type.toUpperCase(), result.previousComponent.uniqueId).then(
-                        (component:Component)=> {
-                        if (result.componentCsar && component.isResource()){
-                            this.cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component));
-                            component = this.ComponentFactory.updateComponentFromCsar(result.componentCsar, <Resource>component);
-                        }
-                            
-                        this.$scope.setComponent(component);
-                        this.$scope.updateUnsavedFileFlag(true);
-                        this.setImportedFileText();
-                    }, ()=> {
-                        // ERROR
-                    });
-                }
-            }, () => {});
+            this.importVSPService.openOnboardingModal(csarUUID, csarVersion).subscribe((result) => {
+                this.ComponentFactory.getComponentWithMetadataFromServer(result.type.toUpperCase(), result.previousComponent.uniqueId).then(
+                    (component:Component)=> {
+                    if (result.componentCsar && component.isResource()){
+                        this.cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component));
+                        component = this.ComponentFactory.updateComponentFromCsar(result.componentCsar, <Resource>component);
+                    }
+                    this.$scope.setComponent(component);
+                    this.$scope.save();
+                    this.setImportedFileText();
+                }, ()=> {
+                    // ERROR
+                });
+            })
         };
 
         this.$scope.updateIcon = ():void => {
@@ -491,17 +497,17 @@ export class GeneralViewModel {
 
                 return;
             }
-            let subtype:string = ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined;
+            const subtype:string = ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined;
 
-            let onFailed = (response) => {
-                //console.info('onFaild', response);
-                //this.$scope.isLoading = false;
+            const onFailed = (response) => {
+                // console.info('onFaild', response);
+                // this.$scope.isLoading = false;
             };
 
-            let onSuccess = (validation:IValidate) => {
-                this.$scope.editForm["componentName"].$setValidity('nameExist', validation.isValid);
+            const onSuccess = (validation:IValidate) => {
+                this.$scope.editForm['componentName'].$setValidity('nameExist', validation.isValid);
                 if (validation.isValid) {
-                    //update breadcrumb after changing name
+                    // update breadcrumb after changing name
                     this.updateComponentNameInBreadcrumbs();
                 }
             };
@@ -522,48 +528,57 @@ export class GeneralViewModel {
                     && !this.$scope.editForm["componentName"].$error.pattern
                     && (!this.$scope.originComponent.name || this.$scope.component.name.toUpperCase() !== this.$scope.originComponent.name.toUpperCase())
                 ) {
-                    if (!(this.$scope.componentType === ComponentType.RESOURCE && (<Resource>this.$scope.component).csarUUID !== undefined)
+                    if (!(this.$scope.componentType === ComponentType.RESOURCE && (this.$scope.component as Resource).csarUUID !== undefined)
                     ) {
                         this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed);
                     }
-                } else if (this.$scope.originComponent.name && this.$scope.component.name.toUpperCase() === this.$scope.originComponent.name.toUpperCase()) {
+                } else if (this.$scope.editForm && this.$scope.originComponent.name && this.$scope.component.name.toUpperCase() === this.$scope.originComponent.name.toUpperCase()) {
                     // Clear the error
-                    this.$scope.editForm["componentName"].$setValidity('nameExist', true);
+                    this.$scope.editForm['componentName'].$setValidity('nameExist', true);
                 }
             }
         };
 
 
         this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, (nextState) => {
-            if (this.$state.current.data.unsavedChanges && this.$scope.isValidForm){
+            if (this.$state.current.data.unsavedChanges && this.$scope.isValidForm) {
                 this.$scope.save().then(() => {
                     this.$scope.handleChangeLifecycleState(nextState);
                 }, () => {
-                    console.error("Save failed, unable to change lifecycle state to " + nextState);
+                    console.error('Save failed, unable to change lifecycle state to ' + nextState);
                 });
             } else if(!this.$scope.isValidForm){
-                console.error("Form is not valid");
+                console.error('Form is not valid');
             } else {
                 let newCsarVersion:string;
-                if(this.$scope.unsavedFile){
-                    newCsarVersion = (<Resource>this.$scope.component).csarVersion;
+                if(this.$scope.unsavedFile) {
+                    newCsarVersion = (this.$scope.component as Resource).csarVersion;
+                }
+                if(this.$stateParams.componentCsar && !this.$scope.isCreateMode()) {
+                    const onError = (): void => {
+                        if (this.$scope.component.lifecycleState === 'NOT_CERTIFIED_CHECKIN') {
+                            this.$scope.revert();
+                        }
+                    };
+                    this.$scope.handleChangeLifecycleState(nextState, newCsarVersion, onError);
+
+                } else {
+                    this.$scope.handleChangeLifecycleState(nextState, newCsarVersion);
                 }
-                this.$scope.handleChangeLifecycleState(nextState, newCsarVersion);
             }
         });
 
-
         this.$scope.revert = ():void => {
-            //in state of import file leave the file in place
+            // in state of import file leave the file in place
 
             this.$scope.setComponent(this.ComponentFactory.createComponent(this.$scope.originComponent));
 
             if (this.$scope.component.isResource() && this.$scope.restoreFile) {
-                (<Resource>this.$scope.component).importedFile = angular.copy(this.$scope.restoreFile);
-            } 
-    
-            this.setImportedFileText(); 
-            this.$scope.updateBreadcrumbs(this.$scope.component); //update on workspace
+                (this.$scope.component as Resource).importedFile = angular.copy(this.$scope.restoreFile);
+            }
+
+            this.setImportedFileText();
+            this.$scope.updateBreadcrumbs(this.$scope.component); // update on workspace
 
             this.$scope.componentCategories.selectedCategory = this.$scope.originComponent.selectedCategory;
             this.setUnsavedChanges(false);
@@ -573,8 +588,8 @@ export class GeneralViewModel {
 
         this.$scope.onImportFileChange = () => {
 
-            if( !this.$scope.restoreFile && this.$scope.editForm.fileElement.value && this.$scope.editForm.fileElement.value.filename || //if file started empty but we have added a new one
-                this.$scope.restoreFile && !angular.equals(this.$scope.restoreFile, this.$scope.editForm.fileElement.value)){ //or file was swapped for a new one
+            if( !this.$scope.restoreFile && this.$scope.editForm.fileElement.value && this.$scope.editForm.fileElement.value.filename || // if file started empty but we have added a new one
+                this.$scope.restoreFile && !angular.equals(this.$scope.restoreFile, this.$scope.editForm.fileElement.value)){ // or file was swapped for a new one
                 this.$scope.updateUnsavedFileFlag(true);
             } else {
                 this.$scope.updateUnsavedFileFlag(false);
@@ -582,46 +597,46 @@ export class GeneralViewModel {
             }
         };
 
-        this.$scope.$watchCollection('component.name', (newData:any):void => {
+        this.$scope.$watchCollection('component.name', (newData: any): void => {
             this.$scope.validateName(false);
         });
 
         // Notify the parent if this step valid or not.
-        this.$scope.$watch("editForm.$valid", (newVal, oldVal) => {
+        this.$scope.$watch('editForm.$valid', (newVal, oldVal) => {
             this.$scope.setValidState(newVal);
         });
 
-        this.$scope.$watch("editForm.$dirty", (newVal, oldVal) => {
+        this.$scope.$watch('editForm.$dirty', (newVal, oldVal) => {
             if (newVal && !this.$scope.isCreateMode()) {
                 this.setUnsavedChanges(true);
             }
 
         });
 
-        this.$scope.onCategoryChange = ():void => {
+        this.$scope.onCategoryChange = (): void => {
             this.$scope.component.selectedCategory = this.$scope.componentCategories.selectedCategory;
             this.$scope.component.categories = this.convertCategoryStringToOneArray();
             this.$scope.component.icon = DEFAULT_ICON;
         };
 
-        this.$scope.onEcompGeneratedNamingChange = ():void =>{
-            if(!(<Service>this.$scope.component).ecompGeneratedNaming){
-                (<Service>this.$scope.component).namingPolicy = '';
+        this.$scope.onEcompGeneratedNamingChange = (): void => {
+            if (!(this.$scope.component as Service).ecompGeneratedNaming) {
+                (this.$scope.component as Service).namingPolicy = '';
             }
         };
 
-        this.$scope.onVendorNameChange = (oldVendorName:string):void => {
+        this.$scope.onVendorNameChange = (oldVendorName: string): void => {
             if (this.$scope.component.icon === oldVendorName) {
                 this.$scope.component.icon = DEFAULT_ICON;
             }
         };
         this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload);
 
-    };
+    }
 
-    private setUnsavedChanges = (hasChanges:boolean):void => {
+    private setUnsavedChanges = (hasChanges: boolean): void => {
         this.$state.current.data.unsavedChanges = hasChanges;
-    };
+    }
 
 }
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
index 07f1e4d6ed..86f1feba0c 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
@@ -13,13 +13,12 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div include-padding="true" class="sdc-workspace-general-step">
     <div class="w-sdc-main-container-body-content-action-buttons">
-        <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" class="unsaved-file-warning">
+        <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning">
              <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP
         </div>
-        <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm  || isDisableMode() || isViewMode() || isCreateMode()}"  
+        <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm  || isDisableMode() || isViewMode() || isCreateMode()}"
             data-ng-click="save()" data-tests-id="create/save" tooltips tooltip-content="Save">Save</button>
         <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
               data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span>
@@ -160,7 +159,7 @@
                 <div class="w-sdc-form-column">
                     <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
                     <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
-                       
+
                         <!-- //                                     element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')&&component.vspArchived}} || {{isViewMode()}}" -->
 
                         <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label>
@@ -173,17 +172,17 @@
                                      on-file-changed-in-directive="onImportFileChange"
                                      extensions="{{importedFileExtension}}"
                                      default-text="'Browse to select file'"
-                                     data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
+                                     ></file-upload>
                     </div>
 
                     <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
                     <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
-                            <label class="i-sdc-form-label required">Select VSP</label>
+                            <label class="i-sdc-form-label required">VSP</label>
                             <div class="i-sdc-form-file-upload i-sdc-form-input">
                                 <span class="i-sdc-form-file-name"  data-ng-disabled="component.vspArchived"  data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
                                 <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
-                                <input type="button" data-ng-disabled="component.vspArchived" name="fileElement" />
-                                <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
+                                <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
+                                <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
                             </div>
                     </div>
 
@@ -218,28 +217,6 @@
                     </div>
                     <!--------------------- USER ID -------------------->
 
-                    <!--------------------- PROJECT CODE -------------------->
-                    <div class="i-sdc-form-item"  data-ng-if="!component.isResource()"
-                         data-ng-class="{'error': validateField(editForm.projectCode)}">
-                        <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
-                        <input class="i-sdc-form-input" type="text"
-                               data-ng-model="component.projectCode"
-                               data-ng-class="{'view-mode': isViewMode()}"
-                               data-ng-model-options="{ debounce: 500 }"
-                               data-ng-maxlength="50"
-                               data-required
-                               name="projectCode"
-                               data-ng-pattern="validation.projectCodeValidationPattern"
-                               data-tests-id="projectCode"
-                        />
-
-                        <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
-                            <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                            <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
-                            <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
-                        </div>
-                    </div>
-
                 <!--------------------- VENDOR NAME -------------------->
                 <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
                     <label class="i-sdc-form-label required">Vendor</label>
@@ -401,6 +378,27 @@
                     </div>
                     <!--------------------- Service Role -------------------->
 
+                    <!--------------------- Service Function -------------------->
+                    <div ng-if="component.isService()"
+                         class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.serviceFunction)}">
+                        <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-class="{'view-mode': isViewMode()}"
+                               data-ng-model="component.serviceFunction"
+                               data-ng-model-options="{ debounce: 500 }"
+                               name="serviceFunction"
+                               data-tests-id="serviceFunction"
+                               data-ng-maxlength="256"
+                               data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+                        />
+                        <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
+                            <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+                            <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- Service Function -------------------->
+
                     <!-------------------- ENVIRONMENT CONTEXT  ----------------->
 
                     <div  ng-if="component.isService()" class="i-sdc-form-item">
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
index b60e4b8de4..8b2cc01d75 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
@@ -27,6 +27,7 @@
             .file-upload-browse-btn {
                 .noselect;
                 .bg_n;
+                color:#191919;
                 padding: 4px 6px;
                 cursor: pointer;
                 z-index: 999;
@@ -35,10 +36,6 @@
                 text-align: center;
                 border-left: solid 1px #cfcfcf;
 
-                &.disabled {
-                    cursor: default;
-                }
-
                 &:hover:not(.disabled) {
                     background-color: #dbdee2;
                 }
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts
deleted file mode 100644
index 47a96fb385..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {ModalsHandler} from "app/utils";
-import {SharingService} from "app/services";
-import {IAppConfigurtaion, ArtifactModel, IFileDownload} from "app/models";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service";
-import {ArtifactGroupModel} from "../../../../models/artifacts";
-import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
-
-export interface IInformationArtifactsScope extends IWorkspaceViewModelScope {
-    artifacts:Array<ArtifactModel>;
-    tableHeadersList:Array<any>;
-    artifactType:string;
-    isResourceInstance:boolean;
-    downloadFile:IFileDownload;
-    isLoading:boolean;
-    sortBy:string;
-    reverse:boolean;
-
-    getTitle():string;
-    addOrUpdate(artifact:ArtifactModel):void;
-    delete(artifact:ArtifactModel):void;
-    download(artifact:ArtifactModel):void;
-    clickArtifactName(artifact:any):void;
-    openEditEnvParametersModal(artifactResource:ArtifactModel):void;
-    sort(sortBy:string):void;
-    showNoArtifactMessage():boolean;
-}
-
-export class InformationArtifactsViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        '$state',
-        'sdcConfig',
-        'ModalsHandler',
-        'ComponentServiceNg2'
-    ];
-
-    constructor(private $scope:IInformationArtifactsScope,
-                private $filter:ng.IFilterService,
-                private $state:any,
-                private sdcConfig:IAppConfigurtaion,
-                private ModalsHandler:ModalsHandler,
-                private ComponentServiceNg2: ComponentServiceNg2) {
-        this.initInformationalArtifacts();
-    }
-
-    private initInformationalArtifacts = ():void => {
-        if(!this.$scope.component.artifacts) {
-            this.$scope.isLoading = true;
-            this.ComponentServiceNg2.getComponentInformationalArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
-                this.$scope.component.artifacts = response.artifacts;
-                this.initScope();
-                this.$scope.isLoading = false;
-            });
-        } else {
-            this.initScope();
-        }
-    }
-
-    private initScope = ():void => {
-
-        this.$scope.isLoading = false;
-        this.$scope.sortBy = 'artifactDisplayName';
-        this.$scope.reverse = false;
-        this.$scope.setValidState(true);
-        this.$scope.artifactType = 'informational';
-        this.$scope.getTitle = ():string => {
-            return this.$filter("resourceName")(this.$scope.component.name) + ' Artifacts';
-
-        };
-
-        this.$scope.tableHeadersList = [
-            {title: 'Name', property: 'artifactDisplayName'},
-            {title: 'Type', property: 'artifactType'},
-            {title: 'Version', property: 'artifactVersion'},
-            {title: 'UUID', property: 'artifactUUID'}
-        ];
-
-        this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.artifacts);
-        this.$scope.sort = (sortBy:string):void => {
-            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-            this.$scope.sortBy = sortBy;
-        };
-
-
-        this.$scope.addOrUpdate = (artifact:ArtifactModel):void => {
-            artifact.artifactGroupType = 'INFORMATIONAL';
-            this.ModalsHandler.openArtifactModal(artifact, this.$scope.component).then(() => {
-                this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.artifacts);
-            });
-        };
-
-        this.$scope.showNoArtifactMessage = ():boolean => {
-            let artifacts:any = [];
-            artifacts = _.filter(this.$scope.artifacts, (artifact:ArtifactModel)=> {
-                return artifact.esId;
-            });
-
-            if (artifacts.length === 0) {
-                return true;
-            }
-            return false;
-        };
-
-        this.$scope.delete = (artifact:ArtifactModel):void => {
-
-            let onOk = ():void => {
-                this.$scope.isLoading = true;
-                let onSuccess = ():void => {
-                    this.$scope.isLoading = false;
-                    this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.artifacts);
-                };
-
-                let onFailed = (error:any):void => {
-                    console.log('Delete artifact returned error:', error);
-                    this.$scope.isLoading = false;
-                };
-
-                this.$scope.component.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(onSuccess, onFailed);
-            };
-
-            let title:string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE");
-            let message:string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}");
-            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-        };
-
-        this.$scope.clickArtifactName = (artifact:any) => {
-            if (!artifact.esId) {
-                this.$scope.addOrUpdate(artifact);
-            }
-
-        };
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html
deleted file mode 100644
index eacadb376c..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="workspace-information-artifact">
-    <div data-tests-id="add-information-artifact-button"  ng-if="!isViewMode()"
-         data-ng-class="{'disabled': isDisableMode()}"
-         data-tests-id="addGrey" class="add-btn" data-ng-click="addOrUpdate({})" type="button">Add </div>
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
-                    <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item"></div>
-            </div>
-            <div class="body">
-                <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="showNoArtifactMessage()" class="no-row-text" data-ng-class="{'disabled': isDisableMode()}">
-                        There are no information artifacts to display
-                    </div>
-                    <div data-ng-repeat-start="artifact in artifacts| orderBy:sortBy:reverse track by $index" data-tests-id="InformationalArtifactRow"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': artifact.selected}"
-                         data-ng-if="artifact.esId">
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="artifactDisplayName_{{artifact.artifactDisplayName}}">
-                            <span class="sprite table-arrow" data-ng-class="{'opened': artifact.selected}" data-tests-id="artifact_arrow_{{artifact.artifactDisplayName}}"></span>
-                            {{artifact.artifactDisplayName}}
-                        </div>
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="artifactType_{{artifact.artifactDisplayName}}">
-                            {{artifact.artifactType}}
-                        </div>
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="artifactVersion_{{artifact.artifactDisplayName}}">
-                            {{artifact.artifactVersion}}
-                        </div>
-
-                        <div class="table-col-general flex-item text"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="artifactUUID_{{artifact.artifactDisplayName}}"
-                        tooltips tooltip-content="{{artifact.artifactUUID}}">
-                            <span>{{artifact.artifactUUID}}</span>
-                        </div>
-
-                        <div class="table-btn-col flex-item">
-                            <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactDisplayName}}"  data-ng-if="!isViewMode() && !artifact.isThirdParty()"  data-ng-click="addOrUpdate(artifact)" data-ng-class="{'disabled': isDisableMode()}"></button>
-                            <button class="table-delete-btn" data-tests-id="delete_{{artifact.artifactDisplayName}}" data-ng-if="!isViewMode() && !artifact.isThirdParty()"  data-ng-click="delete(artifact)" data-ng-class="{'disabled': isDisableMode()}"> </button>
-                            <button class="table-download-btn" download-artifact  data-tests-id="download_{{artifact.artifactDisplayName}}"
-                                    data-ng-if="artifact.artifactName" component="component" artifact="artifact"></button>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="artifact.selected" class="item-opened" data-tests-id="{{artifact.artifactDisplayName}}Description" data-ng-bind="artifact.description"></div>
-                    <button class="add-button" data-ng-repeat="artifact in artifacts track by $index"
-                            data-ng-show="!artifact.esId"
-                            data-tests-id="{{artifact.artifactDisplayName}}"
-                            ng-if="!isViewMode()"
-                            data-ng-class="{'disabled': isDisableMode()}"
-                            translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_HEAT"
-                            translate-values="{'name': '{{artifact.artifactDisplayName}}'}"
-                            data-ng-click="addOrUpdate(artifact)"></button>
-                    <button class="add-button"
-                            ng-if="!isViewMode()"
-                            data-ng-class="{'disabled': isDisableMode()}"
-                            translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER"
-                            data-ng-click="addOrUpdate({})"></button>
-                </perfect-scrollbar>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less
deleted file mode 100644
index 5e69c44e9b..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less
+++ /dev/null
@@ -1,57 +0,0 @@
-.workspace-information-artifact {
-    width: 93%;
-    display: inline-block;
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .table{
-        height: 490px;
-        margin-bottom: 0;
-    }
-
-    .table-container-flex {
-        margin-top: 0;
-
-        .item-opened{
-            word-wrap: break-word;
-        }
-
-        .text{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-        }
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-            .hand;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 3;
-        }
-
-        .flex-item:nth-child(4) {
-            flex-grow: 20;
-        }
-
-        .flex-item:nth-child(5) {
-            flex-grow: 5;
-            padding-top: 10px;
-        }
-
-    }
-
-}
-
-
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less b/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less
deleted file mode 100644
index 17c18e1741..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less
+++ /dev/null
@@ -1,225 +0,0 @@
-.workspace-inputs {
-
-    .sdc-workspace-container .w-sdc-main-right-container .w-sdc-main-container-body-content {
-        padding: 25px 8% 25px 8%;
-    }
-
-    .w-sdc-main-container .w-sdc-main-right-container > div:first-child {
-        /* scroll fix */
-        padding-bottom: 0px;
-    }
-
-
-    width: 100%;
-    display: flex;
-
-    .text {
-        padding-left: 15px;
-        .no-overflow;
-    }
-
-    .title-text {
-        color: @main_color_m;
-        .f-type._13_m;
-        .bold;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .no-overflow {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
-    .title-blue-text {
-        color: @main_color_a;
-        .f-type._13_m;
-
-        &.property-name-text {
-            padding-right: 13px;
-            border-right: 1px solid rgba(120, 136, 148, 0.26);
-            flex-grow: 1;
-            .no-overflow;
-        }
-    }
-
-    .instance-name-text {
-        flex-grow: 1;
-    }
-
-    ng-include {
-        width: 45%;
-    }
-
-    .w-sdc-inputs-search {
-        padding: 10px 20px 20px 0;
-        white-space: nowrap;
-        position: relative;
-        width: 60%;
-        height: 64px;
-
-        .inputs-search-icon {
-            top: 9px;
-            right: 11px;
-        }
-
-        .magnification-white {
-            .sprite-new;
-            .search-white-icon;
-            .hand;
-        }
-
-        .search-icon-container {
-            width: 35px;
-            height: 30px;
-            background-color: @main_color_a;
-            white-space: nowrap;
-            float: right;
-            position: relative;
-            bottom: 31px;
-            right: 1px;
-            border-radius: 0px 4px 4px 0px;
-            .hand
-        }
-    }
-
-    .total-inputs-count {
-        width: 100%;
-        font-weight: bold;
-        text-align: left;
-    }
-
-    .new-input-button {
-        margin: 9px 0 0 0;
-    }
-
-    .w-sdc-inputs-search-input {
-        border: 1px solid @color_e;
-        .border-radius(4px);
-        height: 32px;
-        margin: 0;
-        padding: 0px 28px 3px 10px;
-        vertical-align: 4px;
-        width: 100%;
-        outline: none;
-        font-style: italic;
-    }
-
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .prop-to-input-button {
-        position: absolute;
-        top: 50%;
-        margin-right: -20px;
-        margin-bottom: -10px;
-
-    }
-
-    .table-container-flex {
-
-        .flex-item {
-            line-height: 22px;
-        }
-        .expand-collapse-table-row {
-
-            .data-row {
-                background: @tlv_color_u;
-                .hand;
-                align-items: center;
-                padding: 0 12px;
-                margin: 1px 0px 1px 0px;
-                min-height: 40px;
-            }
-
-            .data-row:hover {
-                .bg_j;
-            }
-        }
-    }
-
-    .table {
-        height: 640px;
-        margin-bottom: 0;
-        clear: both;
-
-        .empty-row {
-            padding: 3px;
-        }
-
-        .flex-item {
-            line-height: 22px;
-        }
-
-        .table-header {
-
-            line-height: 14px;
-            background-color: @main_color_a;
-            color: @main_color_p;
-            text-align: left;
-            padding: 7px 5px 7px 10px;
-            .f-type._14_m;
-        }
-        .head {
-            background-color: #e6e6e6;
-        }
-
-        .body {
-            .scrollbar-container {
-                .perfect-scrollbar;
-                max-height: 610px;
-            }
-
-            .expand-collapse-inputs-table-icon {
-                .hand;
-                .sprite-new;
-                .arrow-up;
-                transition: .3s all;
-                position: relative;
-                left: 8px;
-                border: none !important;
-                padding: 0px 10px 0px 10px;
-            }
-
-            .table-col-text {
-                margin-left: 14px;
-            }
-        }
-    }
-
-    .inputs-header {
-        width: 100%;
-        position: relative;
-        bottom: 31px;
-    }
-
-    .inputs-tables-container {
-        width: 100%;
-        min-width: 100%;
-        display: flex;
-    }
-
-    .inputs-button-container {
-        width: 8%;
-        min-width: 8%;
-        display: flex;
-
-        .right-arrow-btn {
-            .sprite-new;
-            .blue-right-arrow-circle;
-            margin: auto;
-            cursor: pointer;
-        }
-    }
-
-    .table-container-flex {
-        margin-top: 0;
-        width: 46%;
-        min-width: 46%;
-        display: inline-block;
-        float: left;
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view-model.ts
index 180d78954a..83a2be2a60 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view-model.ts
@@ -27,7 +27,6 @@
 * limitations under the License.
 
 */
-
 'use strict';
 
 import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
index 0e7c355c47..236289feff 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div class="workspace-interface-operation">
     <interface-operation
         [component]="component"
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html
index 4a97b64daf..ddabd68d7b 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <loader data-display="isLoading"></loader>
 <div class="workspace-management-workflow" ng-if="vendorModel">
     <punch-out  name="'sequence-diagram'" data="vendorModel"  user="user" on-event="onVendorEvent"></punch-out>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html
index a1efb33301..01343a35ac 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <loader data-display="isLoading"></loader>
 <div ng-if="vendorMessageModel" class="workspace-network-call-flow">
     <punch-out name="'sequence-diagram'" data="vendorMessageModel"  user="user" on-event="onVendorEvent"></punch-out>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts
deleted file mode 100644
index d3ccbe3325..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
-
-* Copyright (c) 2018 AT&T Intellectual Property.
-
-*
-
-* 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.
-
-*/
-
-import {IUserProperties, Plugin} from "app/models";
-import {CacheService} from "app/services";
-import {PluginsService} from "../../../../ng2/services/plugins.service";
-import {IWorkspaceViewModelScope} from "../../workspace-view-model";
-
-
-interface IPluginsContextViewModelScope extends IWorkspaceViewModelScope {
-    plugin: Plugin;
-    user: IUserProperties;
-    queryParams: Object;
-    isLoading: boolean;
-    show: boolean;
-
-    onLoadingDone(plugin: Plugin): void;
-}
-
-export class PluginsContextViewModel {
-    static '$inject' = [
-        '$scope',
-        '$stateParams',
-        'Sdc.Services.CacheService',
-        'PluginsService'
-    ];
-
-    constructor(private $scope: IPluginsContextViewModelScope,
-                private $stateParams: any,
-                private cacheService: CacheService,
-                private pluginsService: PluginsService) {
-
-        this.initScope();
-    }
-
-    private initScope = (): void => {
-        this.$scope.show = false;
-        this.$scope.plugin = this.pluginsService.getPluginByStateUrl(this.$stateParams.path);
-        this.$scope.user = this.cacheService.get('user');
-
-        this.$scope.isLoading = true;
-
-        this.$scope.queryParams = {
-            userId: this.$scope.user.userId,
-            userRole: this.$scope.user.role,
-            displayType: "context",
-            contextType: this.$scope.component.getComponentSubType(),
-            uuid: this.$scope.component.uuid,
-            lifecycleState: this.$scope.component.lifecycleState,
-            isOwner: this.$scope.component.lastUpdaterUserId === this.$scope.user.userId,
-            version: this.$scope.component.version,
-            parentUrl: window.location.origin,
-            eventsClientId: this.$scope.plugin.pluginId
-        };
-
-        if (this.$stateParams.queryParams) {
-            _.assign(this.$scope.queryParams, this.$stateParams.queryParams);
-        }
-
-        this.$scope.onLoadingDone = (plugin: Plugin) => {
-            if (plugin.pluginId == this.$scope.plugin.pluginId) {
-                this.$scope.isLoading = false;
-            }
-        };
-
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html
deleted file mode 100644
index 44c04e4e71..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<loader display="isLoading && plugin.isOnline" ></loader>
-<div class="workspace-plugins">
-    <plugin-frame (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
index b09662d7a2..9794209757 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
@@ -19,12 +19,12 @@
  */
 
 'use strict';
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {PropertyModel} from "app/models";
-import {ModalsHandler} from "app/utils";
-import {COMPONENT_FIELDS} from "../../../../utils/constants";
-import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
-import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service";
+import { IWorkspaceViewModelScope } from "app/view-models/workspace/workspace-view-model";
+import { PropertyModel } from "app/models";
+import { ModalsHandler } from "app/utils";
+import { ComponentGenericResponse } from "../../../../ng2/services/responses/component-generic-response";
+import { ComponentServiceNg2 } from "../../../../ng2/services/component-services/component.service";
+import { SdcUiCommon, SdcUiServices, SdcUiComponents } from "onap-ui-angular";
 
 interface IPropertiesViewModelScope extends IWorkspaceViewModelScope {
     tableHeadersList:Array<any>;
@@ -43,14 +43,16 @@ export class PropertiesViewModel {
         '$scope',
         '$filter',
         'ModalsHandler',
-        'ComponentServiceNg2'
+        'ComponentServiceNg2',
+        'ModalServiceSdcUI'
     ];
 
 
     constructor(private $scope:IPropertiesViewModelScope,
                 private $filter:ng.IFilterService,
                 private ModalsHandler:ModalsHandler,
-                private ComponentServiceNg2:ComponentServiceNg2) {
+                private ComponentServiceNg2:ComponentServiceNg2,
+                private modalService: SdcUiServices.ModalService) {
         this.initComponentProperties();
     }
 
@@ -101,12 +103,13 @@ export class PropertiesViewModel {
 
         this.$scope.delete = (property:PropertyModel):void => {
 
-            let onOk = ():void => {
+            let onOk: Function = ():void => {
                 this.$scope.component.deleteProperty(property.uniqueId);
             };
             let title:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TITLE");
             let message:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TEXT", "{'name': '" + property.name + "'}");
-            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
+            const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.info, callback: onOk, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+            this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]);
         };
     }
 }
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html
index 1505e8397d..1d8a2ff78c 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div class="workspace-properties">
     <div id="left-top-bar">
         <span id="properties-count">Total Properties: {{component.properties.length}}</span>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html
deleted file mode 100644
index 566cc5fc2c..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!--
-  ~ Copyright © 2016-2018 European Support Limited
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="workspace-req-and-cap-editable">
-    <loader data-display="isLoading"></loader>
-
-    <div class="tabs-header">
-        <div class="req-and-cap-tabs">
-            <div data-tests-id="req-tab" data-ng-click="onSwitchTab()" class="tab"
-                 data-ng-class="{'selected':mode=='requirements'}">Requirements
-            </div>
-            <div data-tests-id="cap-tab" data-ng-click="onSwitchTab()" class="tab"
-                 data-ng-class="{'selected':mode=='capabilities'}">Capabilities
-            </div>
-        </div>
-        <div class="buttons-in-right" data-ng-if="!isListEmpty()">
-            <div class="search">
-                <input id="search-box" data-ng-if="filter.show" data-tests-id="search-box" placeholder="Search"
-                       data-ng-model-options="{debounce: 200}" data-ng-model="filter.txt" data-ng-change="onFilter()"/>
-                <div class="search-icon-container" data-tests-id="search-icon">
-                    <svg-icon
-                            class="hand"
-                            [name]="'search-o'"
-                            [mode]="'primary'"
-                            [size]="'small'"
-                            [clickable]="'true'"
-                            data-ng-click="onSearchIconClick()">
-                    </svg-icon>
-                </div>
-            </div>
-            <div class="add-button-icon-and-label" data-ng-if="isEditable" data-ng-click="onAddBtnClicked()"
-                 data-ng-class="{'disabled': isReadonly()}" data-tests-id="add-button">
-                <svg-icon
-                        name="plus"
-                        mode="primary"
-                        size="small"
-                        clickable="true"
-                        [disabled]="isReadonly()"
-                        labelPlacement="top">
-                </svg-icon>
-                <span class="icon-label-txt">{{mode === 'requirements' ? 'Add Requirement' : 'Add Capability'}}</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="empty-list-container" data-ng-if="isListEmpty() && !isLoading" data-tests-id="empty-list-container">
-        <div class="empty-list-add-btn add-button-icon-and-label" data-ng-class="{'disabled': isReadonly()}"
-             data-ng-click="onAddBtnClicked()" data-tests-id="empty-list-add-btn">
-            <svg-icon
-                    name="plus-circle"
-                    mode="primary"
-                    size="x_large"
-                    clickable="true"
-                    [disabled]="isReadonly()">
-            </svg-icon>
-            <div class="icon-label-txt">{{mode === 'requirements' ? 'Add Requirement' : 'Add Capability'}}</div>
-        </div>
-    </div>
-
-    <div class="table-container-flex requirements-table" data-ng-if="mode=='requirements' && !isListEmpty()">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}" data-tests-id="requirement-table">
-            <div class="head flex-container">
-                <div data-ng-repeat="header in editableRequirementsTableHeadersList track by $index"
-                     data-ng-click="sort(header.property, requirementsSortTableDefined, false)"
-                     class="table-header head-row hand flex-item {{header.property}}"
-                     data-tests-id="table-header-{{header.property}}">
-                    {{header.title}}
-                    <span data-ng-if="requirementsSortTableDefined.sortByField === header.property"
-                          class="table-header-sort-arrow" data-tests-id="table-header-sort-arrow"
-                          data-ng-class="{'down': requirementsSortTableDefined.reverse, 'up':!requirementsSortTableDefined.reverse}"> </span>
-                </div>
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="editable-table-data">
-                    <div data-ng-if="filteredRequirementsList.length === 0" class="no-row-text"
-                         data-tests-id="no-rows-in-table">
-                        There are no requirements to display
-
-                    </div>
-                    <div data-ng-repeat="req in filteredRequirementsList | orderBy:requirementsSortTableDefined.sortByField:requirementsSortTableDefined.reverse  track by $index"
-                         data-tests-id="reqRow">
-                        <div class="flex-container data-row" data-ng-class="{'editable-row': req.isCreatedManually}"
-                             data-ng-click="req.isCreatedManually && onEditRequirement(req)">
-                            <div class="table-col-general flex-item text ellipsis-text" tooltips
-                                 tooltip-content="{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}">
-                                <span data-tests-id="{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}">{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}</span>
-                            </div>
-                            <div class="table-col-general flex-item text ellipsis-text" tooltips
-                                 tooltip-content="{{req.capability}}">
-                                <span data-tests-id="{{req.capability}}">{{req.capability && cutToscaTypePrefix(req.capability, 'capabilities.')}}</span>
-                            </div>
-                            <div class="table-col-general flex-item text ellipsis-text" tooltips
-                                 tooltip-content="{{req.node}}">
-                                <span data-tests-id="{{req.node}}">{{req.node && cutToscaTypePrefix(req.node, "nodes.")}}</span>
-                            </div>
-                            <div class="table-col-general flex-item text ellipsis-text" tooltips
-                                 tooltip-content="{{req.relationship}}">
-                                <span data-tests-id="{{req.relationship}}">{{req.relationship && cutToscaTypePrefix(req.relationship, "relationships.")}}</span>
-                            </div>
-                            <div class="table-col-general flex-item text ellipsis-text occurrences-col" tooltips
-                                 tooltip-content="{{req.minOccurrences}} - {{req.maxOccurrences}}">
-                                <span data-tests-id="{{req.minOccurrences}} - {{req.maxOccurrences}}">{{req.minOccurrences}} - {{req.maxOccurrences}}</span>
-                            </div>
-                            <div class="table-col-general flex-item text other-col" data-tests-id="delete-req"
-                                 data-ng-class="{'disabled': isReadonly()}">
-                                <svg-icon name="trash-o" class="trash-icon" size="small"
-                                          data-ng-if="req.isCreatedManually && !isReadonly()"
-                                          data-ng-click="onDeleteReq($event, req)"></svg-icon>
-                            </div>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-    <div class="table-container-flex capabilities-table" data-ng-if="mode=='capabilities' && !isListEmpty()"
-         data-tests-id="capabilities-table">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div data-ng-repeat="header in editableCapabilitiesTableHeadersList track by $index"
-                     data-ng-click="sort(header.property, capabilitiesSortTableDefined, true)"
-                     class="table-header head-row hand flex-item {{header.property}}"
-                     data-tests-id="header-{{header.property}}">
-                    {{header.title}}
-                    <span data-ng-if="capabilitiesSortTableDefined.sortByField === header.property"
-                          class="table-header-sort-arrow" data-tests-id=="table-header-sort-arrow"
-                          data-ng-class="{'down': capabilitiesSortTableDefined.reverse, 'up':!capabilitiesSortTableDefined.reverse}"> </span>
-                </div>
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="editable-table-data">
-                    <div data-ng-if="filteredCapabilitiesList.length === 0" class="no-row-text"
-                         data-tests-id="no-rows-in-table">
-                        There are no capabilities to display
-                    </div>
-                    <div data-ng-repeat-start="capability in filteredCapabilitiesList | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse  track by $index"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': capability.selected, 'editable-row': capability.isCreatedManually}"
-                         data-ng-click="capability.isCreatedManually && onEditCapability(capability)"
-                         data-tests-id="capabilities-table-row">
-
-                        <div class="table-col-general flex-item text ellipsis-text" tooltips
-                             tooltip-content="{{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}">
-                            <span class="sprite-new arrow-up-small hand"
-                                  data-ng-class="{'hideme': !capability.properties.length, 'opened': capability.selected}"
-                                  data-ng-click="capability.selected = !capability.selected; $event.stopPropagation();"></span>
-                            <span data-tests-id="{{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}"
-                                  class="name-col" data-ng-class="{'opened': capability.selected}">
-                                {{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}
-                            </span>
-                        </div>
-                        <div class="table-col-general flex-item text ellipsis-text" tooltips
-                             tooltip-content="{{capability.type}}">
-                            <span data-tests-id="{{capability.type}}">{{capability.type && cutToscaTypePrefix(capability.type, 'capabilities.')}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text description-col">
-                            <div data-tests-id="{{capability.description}}" class="multiline-ellipsis"
-                                 ellipsis="capability.description" max-chars="60">{{capability.description}}
-                            </div>
-                        </div>
-
-                        <div class="table-col-general flex-item text ellipsis-text" tooltips
-                             tooltip-content="{{capability.validSourceTypes.join(',')}}">
-                            <span data-tests-id="{{capability.validSourceTypes.join(',')}}">{{capability.validSourceTypes.join(',')}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text ellipsis-text occurrences-col" tooltips
-                             tooltip-content="{{capability.minOccurrences}} - {{capability.maxOccurrences}}">
-                            <span data-tests-id="{{capability.minOccurrences}} - {{capability.maxOccurrences}}">{{capability.minOccurrences}} - {{capability.maxOccurrences}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text other-col" data-tests-id="delete-cap"
-                             data-ng-class="{'disabled': isReadonly()}">
-                            <svg-icon name="trash-o" class="trash-icon" size="small"
-                                      data-ng-if="capability.isCreatedManually && !isReadonly()"
-                                      data-ng-click="onDeleteCap($event, capability)"></svg-icon>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end data-ng-if="capability.selected" class="item-opened properties-section">
-                        <p class="properties-title">Properties</p>
-                        <div class="table-container-flex properties-table">
-                            <div class="table" data-ng-class="{'view-mode': true}">
-                                <div class="head flex-container">
-                                    <div class="table-header head-row hand flex-item"
-                                         data-ng-repeat="header in capabilityPropertiesTableHeadersList track by $index"
-                                         data-ng-click="sort(header.property, propertiesSortTableDefined, false)">
-                                        {{header.title}}
-                                        <span data-ng-if="propertiesSortTableDefined.sortByField === header.property"
-                                              class="table-header-sort-arrow"
-                                              data-ng-class="{'down': propertiesSortTableDefined.reverse, 'up':!propertiesSortTableDefined.reverse}"> </span>
-                                    </div>
-                                </div>
-
-                                <div class="body">
-                                    <div data-ng-repeat="property in capability.properties | orderBy:propertiesSortTableDefined.sortByField:propertiesSortTableDefined.reverse track by $index"
-                                         data-tests-id="propertyRow"
-                                         class="flex-container data-row">
-                                        <div class="table-col-general flex-item text"
-                                             data-tests-id="{{property.name}}"
-                                             tooltips tooltip-content="{{property.name}}">
-                                            {{property.name}}
-                                        </div>
-                                        <div class="table-col-general flex-item text"
-                                             data-tests-id="{{property.type}}"
-                                             tooltips tooltip-content="{{property.type}}">
-                                            {{property.type}}
-                                        </div>
-                                        <div class="table-col-general flex-item text"
-                                             data-tests-id="{{property.schema.property.type}}"
-                                             tooltips tooltip-content="{{property.schema.property.type}}">
-                                            {{property.schema.property.type}}
-                                        </div>
-                                        <div class="table-col-general flex-item text"
-                                             tooltips tooltip-content="{{property.description}}"
-                                             data-tests-id="{{property.description}}">
-                                            {{property.description}}
-                                        </div>
-                                    </div>
-                                </div>
-
-                            </div>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-</div>
-
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts
deleted file mode 100644
index 14b45cbdf3..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts
+++ /dev/null
@@ -1,471 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by rcohen on 9/22/2016.
- */
-'use strict';
-import * as _ from "lodash";
-import {ComponentRef} from '@angular/core';
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {ModalsHandler, ResourceType} from "app/utils";
-import {ComponentType} from "app/utils/constants";
-import {
-    Capability, PropertyModel, Requirement, Resource,
-    RelationshipTypesMap, NodeTypesMap, CapabilityTypesMap
-} from "app/models";
-import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
-import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
-import {ToscaTypesServiceNg2} from "app/ng2/services/tosca-types.service";
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import {ModalService} from 'app/ng2/services/modal.service';
-import {RequirementsEditorComponent} from 'app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component';
-import {CapabilitiesEditorComponent} from 'app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component';
-import {ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service";
-import {IModalConfig} from "sdc-ui/lib/angular/modals/models/modal-config";
-import {ModalButtonComponent} from "sdc-ui/lib/angular/components";
-
-export class SortTableDefined {
-    reverse:boolean;
-    sortByField:string;
-}
-
-class RequirementUI extends Requirement {
-    isCreatedManually: boolean;
-
-    constructor(input: Requirement, componentUniqueId: string) {
-        super(input);
-        this.isCreatedManually = input.ownerId === componentUniqueId;
-    }
-}
-class CapabilityUI extends Capability {
-    isCreatedManually: boolean;
-
-    constructor(input: Capability, componentUniqueId: string) {
-        super(input);
-        this.isCreatedManually = input.ownerId === componentUniqueId;
-    }
-}
-
-interface IReqAndCapabilitiesViewModelScope extends IWorkspaceViewModelScope {
-    requirementsTableHeadersList:Array<any>;
-    editableRequirementsTableHeadersList: Array<any>;
-    capabilitiesTableHeadersList:Array<any>;
-    editableCapabilitiesTableHeadersList: Array<any>;
-    capabilityPropertiesTableHeadersList:Array<any>;
-    requirementsSortTableDefined:SortTableDefined;
-    capabilitiesSortTableDefined:SortTableDefined;
-    propertiesSortTableDefined:SortTableDefined;
-    requirements: Array<RequirementUI>;
-    filteredRequirementsList: Array<RequirementUI>;
-    capabilities: Array<CapabilityUI>;
-    filteredCapabilitiesList: Array<CapabilityUI>;
-    mode:string;
-    filteredProperties:Array<Array<PropertyModel>>;
-    searchText:string;
-    isEditable: boolean;
-    modalInstance: ComponentRef<ModalComponent>;
-    filter: {txt: string; show: boolean};
-
-    sort(sortBy: string, sortByTableDefined: SortTableDefined, autoCollapseCapabilitiesRows: boolean): void;
-    sortByIsCreatedManually(arrToSort: Array<RequirementUI|CapabilityUI>): Array<any>;
-    updateProperty(property:PropertyModel, indexInFilteredProperties:number):void;
-    allCapabilitiesSelected(selected:boolean):void;
-    onAddBtnClicked(): void;
-    onEditRequirement(req: RequirementUI): void;
-    onEditCapability(cap: CapabilityUI): void;
-    onDeleteReq(event, req: RequirementUI): void;
-    onDeleteCap(event, cap: CapabilityUI): void;
-    onFilter(): void;
-    isListEmpty(): boolean;
-    onSwitchTab(): void;
-    onSearchIconClick(): void;
-    cutToscaTypePrefix(valToCut: string, textToStartCut: string): string;
-    isReadonly(): boolean;
-}
-
-export class ReqAndCapabilitiesViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        'ModalsHandler',
-        'ComponentServiceNg2',
-        'ToscaTypesServiceNg2',
-        'ModalServiceNg2',
-        'ModalServiceSdcUI'
-    ];
-
-
-    constructor(private $scope:IReqAndCapabilitiesViewModelScope,
-                private $filter:ng.IFilterService,
-                private ModalsHandler:ModalsHandler,
-                private ComponentServiceNg2: ComponentServiceNg2,
-                private ToscaTypesServiceNg2: ToscaTypesServiceNg2,
-                private ModalServiceNg2: ModalService,
-                private ModalServiceSdcUI: ModalServiceSdcUI) {
-
-        this.initCapabilitiesAndRequirements();
-        this.fetchCapabilitiesRelatedData();
-    }
-
-    private initCapabilitiesAndRequirements = (): void => {
-
-        this.$scope.isEditable = this.getIsEditableByComponentType();
-        this.$scope.isLoading = true;
-        this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.$scope.component.componentType, this.$scope.component.uniqueId).subscribe((response: ComponentGenericResponse) => {
-            this.$scope.component.capabilities = response.capabilities;
-            this.$scope.component.requirements = response.requirements;
-            this.initScope();
-            this.$scope.isLoading = false;
-        }, () => {
-            this.$scope.isLoading = false;
-        });
-
-    }
-
-    private openEditPropertyModal = (property:PropertyModel, indexInFilteredProperties:number):void => {
-        //...because there is not be api
-        _.forEach(this.$scope.filteredProperties[indexInFilteredProperties], (prop:PropertyModel)=> {
-            prop.readonly = true;
-        });
-        this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties[indexInFilteredProperties], false, "component", this.$scope.component.uniqueId).then(() => {
-
-        });
-    };
-
-    private initScope = (currentMode = 'requirements'): void => {
-        this.$scope.isReadonly = (): boolean => {
-            return this.$scope.isViewMode() || !this.$scope.isDesigner();
-        };
-        this.$scope.filter = {txt: '', show: false};
-        this.$scope.requirementsSortTableDefined = {
-            reverse: false,
-            sortByField: this.$scope.isEditable ? 'other' : 'name'
-        };
-        this.$scope.capabilitiesSortTableDefined = {
-            reverse: false,
-            sortByField: this.$scope.isEditable ? 'other' : 'name'
-        };
-        this.$scope.propertiesSortTableDefined = {
-            reverse: false,
-            sortByField: 'name'
-        };
-
-        this.$scope.setValidState(true);
-        this.$scope.requirementsTableHeadersList = [
-            {title: 'Name', property: 'name'},
-            {title: 'Capability', property: 'capability'},
-            {title: 'Node', property: 'node'},
-            {title: 'Relationship', property: 'relationship'},
-            {title: 'Connected To', property: ''},
-            {title: 'Occurrences', property: ''}
-        ];
-        this.$scope.capabilitiesTableHeadersList = [
-            {title: 'Name', property: 'name'},
-            {title: 'Type', property: 'type'},
-            {title: 'Description', property: ''},
-            {title: 'Valid Source', property: ''},
-            {title: 'Occurrences', property: ''}
-        ];
-        this.$scope.editableRequirementsTableHeadersList = [
-            {title: 'Name', property: 'name'},
-            {title: 'Capability', property: 'capability'},
-            {title: 'Node', property: 'node'},
-            {title: 'Relationship', property: 'relationship'},
-            {title: 'Occurrences', property: 'occurrences'},
-            {title: '���', property: 'other'}
-        ];
-        this.$scope.editableCapabilitiesTableHeadersList = [
-            {title: 'Name', property: 'name'},
-            {title: 'Type', property: 'type'},
-            {title: 'Description', property: 'description'},
-            {title: 'Valid Sources', property: 'valid-sources'},
-            {title: 'Occurrences', property: 'occurrences'},
-            {title: '���', property: 'other'}
-        ];
-        this.$scope.capabilityPropertiesTableHeadersList = [
-            {title: 'Name', property: 'name'},
-            {title: 'Type', property: 'type'},
-            {title: 'Schema', property: 'schema.property.type'},
-            {title: 'Description', property: 'description'},
-        ];
-        this.$scope.filteredProperties = [];
-
-        this.$scope.mode = currentMode;
-        this.$scope.requirements = [];
-        _.forEach(this.$scope.component.requirements, (req:Array<Requirement>, capName)=> {
-            let reqUIList: Array<RequirementUI> = _.map(req, reqObj => new RequirementUI(reqObj, this.$scope.component.uniqueId));
-            this.$scope.requirements = this.$scope.requirements.concat(reqUIList);
-        });
-        this.$scope.filteredRequirementsList = this.$scope.requirements;
-
-        this.$scope.capabilities = [];
-        _.forEach(this.$scope.component.capabilities, (cap:Array<Capability>, capName)=> {
-            let capUIList: Array<CapabilityUI> = _.map(cap, capObj => new CapabilityUI(capObj, this.$scope.component.uniqueId));
-            this.$scope.capabilities = this.$scope.capabilities.concat(capUIList);
-        });
-
-        this.$scope.sortByIsCreatedManually = (arrToSort: Array<RequirementUI|CapabilityUI>): Array<any> => {
-            return arrToSort.sort((elem1: RequirementUI|CapabilityUI, elem2: RequirementUI|CapabilityUI) => +elem2.isCreatedManually - (+elem1.isCreatedManually));
-        };
-        this.$scope.filteredCapabilitiesList = this.$scope.sortByIsCreatedManually(this.$scope.capabilities);
-        this.$scope.filteredRequirementsList = this.$scope.sortByIsCreatedManually(this.$scope.requirements);
-
-        this.$scope.sort = (sortBy: string, sortByTableDefined: SortTableDefined, autoCollapseCapabilitiesRows: boolean): void => {
-            sortByTableDefined.reverse = (sortByTableDefined.sortByField === sortBy) ? !sortByTableDefined.reverse : false;
-            sortByTableDefined.sortByField = sortBy;
-            if (autoCollapseCapabilitiesRows) {
-                this.$scope.allCapabilitiesSelected(false);
-            }
-        };
-
-        this.$scope.updateProperty = (property:PropertyModel, indexInFilteredProperties:number):void => {
-            this.openEditPropertyModal(property, indexInFilteredProperties);
-        };
-
-        this.$scope.allCapabilitiesSelected = (selected:boolean):void => {
-            _.forEach(this.$scope.capabilities, (cap:Capability)=> {
-                cap.selected = selected;
-            });
-        };
-        this.$scope.onAddBtnClicked = (): void => {
-            switch (this.$scope.mode) {
-                case 'requirements':
-                    this.openRequirementsModal();
-                    break;
-                case 'capabilities':
-                    this.openCapabilitiesModal();
-                    break;
-            }
-        };
-        this.$scope.onEditRequirement = (req: RequirementUI): void => {
-            this.openRequirementsModal(req);
-        };
-        this.$scope.onEditCapability = (cap: CapabilityUI): void => {
-            this.openCapabilitiesModal(cap);
-        };
-        this.$scope.onDeleteReq = (event: Event, req: RequirementUI): void => {
-            event.stopPropagation();
-            this.ModalServiceSdcUI.openAlertModal('Delete Requirement',
-                `Are you sure you want to delete requirement: ${req.name}?`, 'OK', () => this.deleteRequirement(req), 'Cancel');
-        };
-        this.$scope.onDeleteCap = (event: Event, cap: CapabilityUI): void => {
-            event.stopPropagation();
-            this.ModalServiceSdcUI.openAlertModal('Delete Capability',
-                `Are you sure you want to delete capability: ${cap.name}?`, 'OK', () => this.deleteCapability(cap), 'Cancel');
-        };
-        this.$scope.onSearchIconClick = (): void => {
-            this.$scope.filter.show = !!this.$scope.filter.txt || !this.$scope.filter.show;
-        };
-        this.$scope.onFilter = (): void => {
-            switch (this.$scope.mode) {
-                case 'requirements':
-                    this.$scope.filteredRequirementsList = _.filter(this.$scope.requirements, req => req.name.includes(this.$scope.filter.txt));
-                    break;
-                case 'capabilities':
-                    this.$scope.filteredCapabilitiesList = _.filter(this.$scope.capabilities, cap => cap.name.includes(this.$scope.filter.txt));
-                    break;
-            }
-        };
-        this.$scope.isListEmpty = (): boolean => {
-            switch (this.$scope.mode) {
-                case 'requirements':
-                    return this.$scope.requirements.length === 0;
-                case 'capabilities':
-                    return this.$scope.capabilities.length === 0;
-            }
-        };
-        this.$scope.onSwitchTab = (): void => {
-            this.$scope.mode = this.$scope.mode === 'requirements' ? 'capabilities' : 'requirements';
-            this.$scope.filter.txt = '';
-            this.$scope.filter.show = false;
-            this.$scope.filteredRequirementsList = this.$scope.requirements;
-            this.$scope.filteredCapabilitiesList = this.$scope.capabilities;
-        };
-        this.$scope.cutToscaTypePrefix = (valToCut: string, textToStartCut: string): string => {
-            let index = valToCut.indexOf(textToStartCut);
-            return index !== -1 ? valToCut.substr(index + textToStartCut.length) : valToCut;
-        };
-    };
-
-    private getIsEditableByComponentType() {
-        if (this.$scope.componentType === ComponentType.SERVICE) {
-            return true;
-        }
-        if (this.$scope.component.isResource()) {
-            let componentAsResource: Resource = <Resource>this.$scope.component;
-            return componentAsResource.resourceType === ResourceType.VF ||
-                componentAsResource.resourceType === ResourceType.PNF;
-        }
-        return false;
-    };
-
-    private fetchCapabilitiesRelatedData() {
-        if (this.$scope.isEditable) {
-            this.$scope.capabilityTypesList = [];
-            this.ToscaTypesServiceNg2.fetchCapabilityTypes().subscribe((result: CapabilityTypesMap) => {
-                _.forEach(result, capabilityType => this.$scope.capabilityTypesList.push(capabilityType));
-            });
-            this.$scope.nodeTypesList = [];
-            this.ToscaTypesServiceNg2.fetchNodeTypes().subscribe((result: NodeTypesMap) => {
-                _.forEach(result, nodeType => this.$scope.nodeTypesList.push(nodeType));
-            });
-            this.$scope.relationshipTypesList = [];
-            this.ToscaTypesServiceNg2.fetchRelationshipTypes().subscribe((result: RelationshipTypesMap) => {
-                _.forEach(result, relshipType => this.$scope.relationshipTypesList.push(relshipType));
-            });
-        }
-    }
-
-    private openRequirementsModal(req?: RequirementUI) {
-        let modalConfig: IModalConfig = {
-            size: 'md',
-            title: (req ? 'Update' : 'Add') + ' Requirement',
-            type: 'custom',
-            buttons: [
-                {
-                    id: 'saveButton',
-                    text: (req ? 'Update' : 'Create'),
-                    size: "'x-small'",
-                    callback: () => this.createOrUpdateRequirement(),
-                    closeModal: true
-                },
-                {text: "Cancel", size: "'x-small'", closeModal: true}]
-        };
-        let modalInputs = {
-            requirement: req,
-            relationshipTypesList: this.$scope.relationshipTypesList,
-            nodeTypesList: this.$scope.nodeTypesList,
-            capabilityTypesList: this.$scope.capabilityTypesList,
-            isReadonly: this.$scope.isViewMode() || !this.$scope.isDesigner(),
-            validityChangedCallback: this.getDisabled
-        };
-
-        this.ModalServiceSdcUI.openCustomModal(modalConfig, RequirementsEditorComponent, {input: modalInputs});
-    }
-
-    private openCapabilitiesModal(cap?: CapabilityUI) {
-        let modalConfig: IModalConfig = {
-            size: 'md',
-            title: (cap ? 'Update' : 'Add') + ' Capability',
-            type: 'custom',
-            buttons: [
-                {
-                    id: 'saveButton',
-                    text: (cap ? 'Update' : 'Create'),
-                    size: "'x-small'",
-                    callback: () => this.createOrUpdateCapability(),
-                    closeModal: true
-                },
-                {text: "Cancel", size: "'x-small'", closeModal: true}]
-        };
-        let modalInputs = {
-            capability: cap,
-            capabilityTypesList: this.$scope.capabilityTypesList,
-            isReadonly: this.$scope.isViewMode() || !this.$scope.isDesigner(),
-            validityChangedCallback: this.getDisabled
-        };
-
-        this.ModalServiceSdcUI.openCustomModal(modalConfig, CapabilitiesEditorComponent, {input: modalInputs});
-    }
-
-    getDisabled = (shouldEnable: boolean): void => {
-        let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton');
-        saveButton.disabled = this.$scope.isViewMode() || !this.$scope.isDesigner() || !shouldEnable;
-    };
-
-    private createOrUpdateRequirement() {
-        let requirement = this.ModalServiceSdcUI.getCurrentInstance().innerModalContent.instance.requirementData;
-        this.$scope.isLoading = true;
-        if (!requirement.uniqueId) {
-            this.ComponentServiceNg2.createRequirement(this.$scope.component, requirement).subscribe(result => {
-                this.$scope.requirements.unshift(new RequirementUI(result[0], this.$scope.component.uniqueId));
-                this.$scope.isLoading = false;
-            }, () => {
-                this.$scope.isLoading = false;
-            });
-        }
-        else {
-            this.ComponentServiceNg2.updateRequirement(this.$scope.component, requirement).subscribe(result => {
-                let index = this.$scope.requirements.findIndex(req => result[0].uniqueId === req.uniqueId);
-                this.$scope.requirements[index] = new RequirementUI(result[0], this.$scope.component.uniqueId);
-                this.$scope.isLoading = false;
-                this.$scope.$apply();
-            }, () => {
-                this.$scope.isLoading = false;
-            });
-        }
-    }
-
-    private createOrUpdateCapability() {
-        let capability = this.ModalServiceSdcUI.getCurrentInstance().innerModalContent.instance.capabilityData;
-        this.$scope.isLoading = true;
-        if (!capability.uniqueId) {
-            this.ComponentServiceNg2.createCapability(this.$scope.component, capability).subscribe(result => {
-                this.$scope.capabilities.unshift(new CapabilityUI(result[0], this.$scope.component.uniqueId));
-                this.$scope.isLoading = false;
-            }, () => {
-                this.$scope.isLoading = false;
-            });
-        }
-        else {
-            this.ComponentServiceNg2.updateCapability(this.$scope.component, capability).subscribe(result => {
-                let index = this.$scope.capabilities.findIndex(cap => result[0].uniqueId === cap.uniqueId);
-                this.$scope.capabilities[index] = new CapabilityUI(result[0], this.$scope.component.uniqueId);
-                this.$scope.isLoading = false;
-                this.$scope.$apply();
-            }, () => {
-                this.$scope.isLoading = false;
-            });
-        }
-    }
-
-    private deleteRequirement(req) {
-        this.$scope.isLoading = true;
-        this.ComponentServiceNg2.deleteRequirement(this.$scope.component, req.uniqueId).subscribe(() => {
-            this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.$scope.componentType, this.$scope.component.uniqueId).subscribe(response => {
-                this.$scope.component.requirements = response.requirements;
-                this.initScope('requirements');
-                this.$scope.isLoading = false;
-            }, () => {
-                this.$scope.isLoading = false;
-            });
-        }, () => {
-            this.$scope.isLoading = false;
-        });
-    }
-
-    private deleteCapability(cap) {
-        this.$scope.isLoading = true;
-        this.ComponentServiceNg2.deleteCapability(this.$scope.component, cap.uniqueId).subscribe(() => {
-            this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.$scope.componentType, this.$scope.component.uniqueId).subscribe(response => {
-                this.$scope.component.capabilities = response.capabilities;
-                this.initScope('capabilities');
-                this.$scope.isLoading = false;
-            }, () => {
-                this.$scope.isLoading = false;
-            });
-        }, () => {
-            this.$scope.isLoading = false;
-        });
-    }
-}
-
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html
deleted file mode 100644
index c661afe0ba..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html
+++ /dev/null
@@ -1,159 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="workspace-req-and-cap">
-    <div class="tabs">
-        <button data-tests-id="req-tab" data-ng-click="mode='requirements';filterTerms='';" class="tlv-btn" data-ng-class="{'selected':mode=='requirements'}">Requirements({{requirements.length||'0'}})</button>
-        <button data-tests-id="cap-tab" data-ng-click="mode='capabilities';filterTerms='';" class="tlv-btn" data-ng-class="{'selected':mode=='capabilities'}">Capabilities({{capabilities.length||'0'}})</button>
-    </div>
-    <div class="expand-collapse-buttons" data-ng-if="mode=='capabilities'">
-        <span class="sprite-new expand-all" data-ng-click="allCapabilitiesSelected(true)"></span>
-        <span class="sprite-new collapse-all" data-ng-click="allCapabilitiesSelected(false)"></span>
-    </div>
-    <div class="search">
-        <input id="search-box" data-tests-id="search-box"  type="search" placeholder="Search" data-ng-model-options="{debounce: 200}" data-ng-model="filterTerms"/>
-        <div class="search-icon-container">
-            <span class="search-icon sprite-new search-white-icon"></span>
-        </div>
-    </div>
-    <div class="table-container-flex requirements-table" data-ng-if="mode=='requirements'">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in requirementsTableHeadersList track by $index" data-ng-click="sort(header.property, requirementsSortTableDefined)">{{header.title}}
-                    <span data-ng-if="requirementsSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': requirementsSortTableDefined.reverse, 'up':!requirementsSortTableDefined.reverse}"> </span>
-                </div>
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="requirements.length === 0" class="no-row-text">
-                        There are no requirements to display
-
-                    </div>
-                    <div data-ng-repeat="req in requirements | orderBy:requirementsSortTableDefined.sortByField:requirementsSortTableDefined.reverse | filter: {filterTerm:filterTerms} track by $index"
-                         class="flex-container data-row" data-tests-id="reqRow">
-
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.name}}">
-                            <span  data-tests-id="{{req.name}}">{{req.name}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.capability}}">
-                            <span  data-tests-id="{{req.capability}}">{{req.capability.substring("tosca.capabilities.".length)}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.node}}">
-                            <span  data-tests-id="{{req.node}}">{{req.node.substring("tosca.nodes.".length)}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.relationship}}">
-                            <span  data-tests-id="{{req.relationship}}">{{req.relationship.substring("tosca.relationships.".length)}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text" data-tests-id="{{}}" data-ng-bind=""></div>
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.minOccurrences}},{{req.maxOccurrences}}">
-                            <span  data-tests-id="{{req.minOccurrences}},{{req.maxOccurrences}}">{{req.minOccurrences}},{{req.maxOccurrences}}</span>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-    <div class="table-container-flex capabilities-table" data-ng-if="mode=='capabilities'">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in capabilitiesTableHeadersList track by $index" data-ng-click="sort(header.property, capabilitiesSortTableDefined)">{{header.title}}
-                    <span data-ng-if="capabilitiesSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': capabilitiesSortTableDefined.reverse, 'up':!capabilitiesSortTableDefined.reverse}"> </span>
-                </div>
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="capabilities.length === 0" class="no-row-text">
-                        There are no capabilities to display
-
-                    </div>
-                    <div data-ng-repeat-start="capability in capabilities | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse | filter: {filterTerm:filterTerms} track by $index"
-                         class="flex-container data-row" data-ng-class="{'selected': capability.selected}"
-                         data-ng-click="capability.selected = !capability.selected" data-tests-id="capabilities-table-row">
-
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.name}}">
-                            <span class="sprite-new arrow-up-small" data-ng-class="{'opened': capability.selected}"></span>
-                            <span  data-tests-id="{{capability.name}}">{{capability.name}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.type}}">
-                            <span  data-tests-id="{{capability.type}}">{{capability.type.replace("tosca.capabilities.","")}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.description}}">
-                            <span  data-tests-id="{{capability.description}}">{{capability.description}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.validSourceTypes.join(',')}}">
-                            <span  data-tests-id="{{capability.validSourceTypes.join(',')}}">{{capability.validSourceTypes.join(',')}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.minOccurrences}},{{capability.maxOccurrences}}">
-                            <span  data-tests-id="{{capability.minOccurrences}},{{capability.maxOccurrences}}">{{capability.minOccurrences}},{{capability.maxOccurrences}}</span>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="capability.selected" class="item-opened">
-                        <p class="properties-title">Properties</p>
-                        <div class="table-container-flex properties-table">
-                            <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-                                <div class="head flex-container">
-                                    <div class="table-header head-row hand flex-item" data-ng-repeat="header in capabilityPropertiesTableHeadersList track by $index" data-ng-click="sort(header.property, propertiesSortTableDefined)">{{header.title}}
-                                        <span data-ng-if="propertiesSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': propertiesSortTableDefined.reverse, 'up':!propertiesSortTableDefined.reverse}"> </span>
-                                    </div>
-                                </div>
-
-                                <div class="body">
-                                        <div data-ng-if="capability.properties.length === 0" class="no-row-text">
-                                            There are no properties to display
-                                        </div>
-                                        <div data-ng-repeat="property in filteredProperties[$parent.$index]=(capability.properties | orderBy:propertiesSortTableDefined.sortByField:propertiesSortTableDefined.reverse) track by $index"
-                                             data-tests-id="propertyRow"
-                                             class="flex-container data-row">
-
-                                            <div class="table-col-general flex-item text" tooltips tooltip-content="{{property.name}}">
-                                                <a  data-tests-id="{{property.name}}"
-                                                    data-ng-click="updateProperty(property, $parent.$index); $event.stopPropagation();"
-                                                    data-ng-class="{'disabled': isViewMode()}">{{property.name}}</a>
-
-                                            </div>
-
-                                            <div class="table-col-general flex-item text"
-                                                 data-tests-id="{{property.type}}"
-                                                 tooltips tooltip-content="{{property.type}}"
-                                                 data-ng-bind="property.type">
-                                            </div>
-                                            <div class="table-col-general flex-item text"
-                                                 data-tests-id="{{property.schema.property.type}}"
-                                                 tooltips tooltip-content="{{property.schema.property.type}}"
-                                                 data-ng-bind="property.schema.property.type">
-                                            </div>
-                                            <div class="table-col-general flex-item text" tooltips tooltip-content="{{property.description}}">
-                                                <span data-tests-id="{{property.description}}" data-ng-bind="property.description"></span>
-                                            </div>
-                                        </div>
-                                </div>
-
-                            </div>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-</div>
-
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less
deleted file mode 100644
index 928f6719c6..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less
+++ /dev/null
@@ -1,418 +0,0 @@
-.workspace-req-and-cap {
-
-    width: 93%;
-    display: inline-block;
-
-    .tabs{
-        float: left;
-        position: relative;
-        top: 6px;
-        button{
-            float: left;
-            width: 233px;
-            height: 38px;
-            background-color: @tlv_color_t;
-            border: 1px solid @main_color_o;
-            color: black;
-            &:nth-child(1){
-                border-radius: 10px 0 0 0;
-            }
-            &:nth-child(2){
-                border-radius: 0 10px 0 0;
-            }
-            &.selected{
-                background-color: @main_color_a;
-                border: 1px solid @main_color_a;
-                color: white;
-            }
-        }
-    }
-    .search{
-        margin-bottom: 12px;
-        float: right;
-        ::-webkit-input-placeholder {
-            font-style: italic;
-        }
-        :-moz-placeholder {
-            font-style: italic;
-        }
-        ::-moz-placeholder {
-            font-style: italic;
-        }
-        :-ms-input-placeholder {
-            font-style: italic;
-        }
-        #search-box{
-             -webkit-border-radius: 2px 0 0 2px;
-             -moz-border-radius: 2px 0 0 2px;
-             border-radius: 2px 0 0 2px;
-             width: 213px;
-             height: 32px;
-             line-height: 32px;
-             border: 1px solid @main_color_o;
-             text-indent: 10px;
-             float: left;
-        }
-        .search-icon-container{
-            background-color: @main_color_a;
-            height: 32px;
-            width: 32px;
-            border-radius: 0 2px 2px 0;
-            float: left;
-            .search-icon{
-                position: relative;
-                top: 9px;
-            }
-        }
-    }
-  .add-button {
-    color: @main_color_a;
-  }
-  .add-button, .expand-collapse-buttons {
-        float: right;
-        margin-left: 11px;
-        margin-top: 10px;
-    &, span {
-            .hand;
-        }
-    }
-
-
-
-    .table{
-        height:490px;
-        margin-bottom: 0;
-    }
-
-    .arrow-up-small{
-        &.opened{
-            .arrow-up-small-hover;
-        }
-    }
-
-    .item-opened{
-        background-color: @tlv_color_t;
-    }
-
-    .properties-title{
-        margin:0;
-        font-weight: bold;
-    }
-
-    .table-container-flex {
-        margin-top: 10px;
-
-        .text{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-        }
-
-      .editable-table-data {
-        max-height: 430px;
-      }
-
-      .data-row {
-        &:not(.editable-row) {
-          background: @tlv_color_t;
-          color: @main_color_n;
-        }
-        &.editable-row {
-          cursor: pointer;
-        }
-        .sprite-new.delete-icon {
-          visibility: hidden;
-        }
-        &:hover {
-          .sprite-new.delete-icon {
-            visibility: visible;
-          }
-        }
-      }
-
-        &.requirements-table{
-            border-top: 4px solid @main_color_a;
-            .flex-item:nth-child(1) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(2) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(3) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(4) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(5) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(6) {
-                flex-grow: 20;
-            }
-        }
-
-        &.capabilities-table{
-            border-top: 4px solid @main_color_a;
-            .selected{
-                .flex-item:nth-child(1) {
-                    border-left: 4px solid @main_color_a;
-                    padding-right: 11px;
-                }
-            }
-            .flex-item:nth-child(1) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(2) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(3) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(4) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(5) {
-                flex-grow: 10;
-            }
-
-        }
-
-        &.properties-table{
-            .table{
-                height: auto;
-            }
-
-            .flex-item:nth-child(1) {
-                flex-grow: 15;
-                a{
-                    .hand
-                }
-            }
-
-            .flex-item:nth-child(2) {
-                flex-grow: 6;
-            }
-
-            .flex-item:nth-child(3) {
-                flex-grow: 6;
-            }
-
-            .flex-item:nth-child(4) {
-                flex-grow: 20;
-
-            }
-        }
-
-    }
-
-}
-
-.workspace-req-and-cap-editable {
-  .tabs-header {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid @main_color_o;
-    .req-and-cap-tabs {
-      display: flex;
-      .tab {
-        font-family: @font-opensans-regular;
-        font-size: 22px;
-        padding: 5px;
-        .hand;
-        &:first-of-type {
-          margin-right: 35px;
-        }
-        &.selected {
-          color: @main_color_a;
-          border-bottom: 2px solid @main_color_a;
-        }
-      }
-    }
-    .buttons-in-right {
-      display: flex;
-      .search {
-        display: flex;
-        height: min-content;
-        margin-top: 10px;
-        padding-right: 11px;
-        border-right: 1px solid @main_color_o;
-        #search-box {
-          border: none;
-          border-bottom: 1px solid @main_color_o;
-          text-indent: 10px;
-          &:focus {
-            outline: none;
-          }
-        }
-        .search-icon-container {
-          margin-top: 3px;
-          padding-top: 4px;
-        }
-
-      }
-      .add-button-icon-and-label {
-        font-size: 14px;
-        margin-left: 11px;
-        margin-top: 10px;
-        padding-top: 5px;
-        /deep/ svg-icon {
-          vertical-align: bottom;
-        }
-        &:hover {
-          &:not(.disabled) {
-            cursor: pointer;
-            color: @sdcui_color_light-blue;
-          }
-        }
-      }
-    }
-  }
-  .add-button-icon-and-label {
-    .icon-label-txt {
-      text-transform: uppercase;
-      font-family: @font-opensans-medium;
-      color: @main_color_a;
-      &:hover {
-        &:not(.disabled) {
-          color: @sdcui_color_light-blue;
-        }
-      }
-    }
-  }
-  .empty-list-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-
-    .empty-list-add-btn {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      border: 1px solid @main_color_o;
-      margin-top: 50px;
-      height: 229px;
-      width: 480px;
-      &.disabled {
-        pointer-events: none;
-      }
-      &:hover {
-        &:not(.disabled) {
-          border: 1px solid @main_color_a;
-          cursor: pointer;
-        }
-      }
-      .icon-label-txt {
-        margin-top: 15px;
-        font-size: 16px;
-      }
-    }
-  }
-  .table-container-flex .table {
-    .head .head-row {
-      text-align: left;
-      &.description {
-        flex: 2;
-      }
-      &.other {
-        flex: 0.25;
-        text-align: center;
-      }
-      &.occurrences {
-        flex: 0.75;
-      }
-    }
-    .body .data-row {
-      border-bottom: none;
-      border-top: @main_color_o solid 1px;
-      .ellipsis-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      &:not(.editable-row) {
-        background-color: @tlv_color_t;
-        cursor: default;
-        color: @main_color_n;
-      }
-      &.editable-row {
-        cursor: pointer;
-        .table-col-general:hover {
-          color: @main_color_b;
-        }
-      }
-      &.selected {
-        background-color: @tlv_color_v;
-        .name-col {
-          color: @main_color_a;
-        }
-        .sprite-new.arrow-up-small {
-          background-position: -858px -137px;
-          margin-bottom: 2px;
-        }
-      }
-      .description-col {
-        flex: 2;
-      }
-      .occurrences-col {
-        flex: 0.75;
-      }
-      .other-col {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex: 0.25;
-        .trash-icon {
-          visibility: hidden;
-        }
-      }
-      &:hover {
-        .trash-icon {
-          visibility: visible;
-        }
-      }
-      .multiline-ellipsis {
-        line-height: 1.5em;
-        padding: 1px 0 1px 0;
-        /deep/ .ellipsis-directive-more-less {
-          float: none;
-          margin-left: 5px;
-          color: @main_color_a;
-        }
-      }
-    }
-  }
-
-  .item-opened.properties-section {
-    border: 4px solid @tlv_color_v !important;
-    max-height: 263px;
-    overflow: auto;
-    .properties-title {
-      .s_10;
-      margin-top: 10px;
-    }
-    .properties-table {
-      &.table-container-flex {
-        margin-top: 18px;
-      }
-      .table {
-        .head {
-          border-bottom: 1px solid @main_color_o;
-        }
-        .head, .table-col-general {
-          background-color: @main_color_p;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts
deleted file mode 100644
index a1f8152cea..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {ArtifactModel, IFileDownload} from "app/models";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
-import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service";
-
-export interface IToscaArtifactsScope extends IWorkspaceViewModelScope {
-    artifacts:Array<ArtifactModel>;
-    tableHeadersList:Array<any>;
-    artifactType:string;
-    downloadFile:IFileDownload;
-    isLoading:boolean;
-    sortBy:string;
-    reverse:boolean;
-
-    getTitle():string;
-    download(artifact:ArtifactModel):void;
-    sort(sortBy:string):void;
-    showNoArtifactMessage():boolean;
-}
-
-export class ToscaArtifactsViewModel {
-
-    static '$inject' = [
-        '$scope',
-        '$filter',
-        'ComponentServiceNg2'
-    ];
-
-    constructor(private $scope:IToscaArtifactsScope,
-                private $filter:ng.IFilterService,
-                private ComponentServiceNg2:ComponentServiceNg2) {
-        this.initToscaArtifacts();
-    }
-
-    private initToscaArtifacts = (): void => {
-
-        if(!this.$scope.component.toscaArtifacts) {
-            this.$scope.isLoading = true;
-            this.ComponentServiceNg2.getComponentToscaArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
-                this.$scope.component.toscaArtifacts = response.toscaArtifacts;
-                this.initScope();
-                this.$scope.isLoading = false;
-            }, () => {
-                this.$scope.isLoading = false;
-            });
-        } else {
-            this.initScope();
-        }
-    }
-
-    private initScope = ():void => {
-        this.$scope.isLoading = false;
-        this.$scope.sortBy = 'artifactDisplayName';
-        this.$scope.reverse = false;
-        this.$scope.setValidState(true);
-        this.$scope.artifactType = 'informational';
-        this.$scope.getTitle = ():string => {
-            return this.$filter("resourceName")(this.$scope.component.name) + ' Artifacts';
-
-        };
-
-        this.$scope.tableHeadersList = [
-            {title: 'Name', property: 'artifactDisplayName'},
-            {title: 'Type', property: 'artifactType'},
-            {title: 'Version', property: 'artifactVersion'}
-        ];
-
-        this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.toscaArtifacts);
-        this.$scope.sort = (sortBy:string):void => {
-            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-            this.$scope.sortBy = sortBy;
-        };
-
-
-        this.$scope.showNoArtifactMessage = ():boolean => {
-            if (this.$scope.artifacts.length === 0) {
-                return true;
-            }
-            return false;
-        };
-
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html
deleted file mode 100644
index b354e7a544..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
--->
-
-<div class="workspace-tosca-artifact">
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
-                    <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item"></div>
-            </div>
-            <div class="body">
-                <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="showNoArtifactMessage()" class="no-row-text" data-ng-class="{'disabled': isDisableMode()}">
-                        There are no TOSCA artifacts to display
-                    </div>
-                    <div data-ng-repeat-start="artifact in artifacts| orderBy:sortBy:reverse track by $index"
-                         class="flex-container data-row" data-tests-id="{{artifact.artifactDisplayName}}"
-                         data-ng-class="{'selected': artifact.selected}">
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="name-{{$index}}">
-                            <span class="sprite table-arrow" data-ng-class="{'opened': artifact.selected}"></span>
-                            {{artifact.artifactDisplayName}}
-                        </div>
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="type-{{$index}}">
-                            {{artifact.artifactType}}
-                        </div>
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="version-{{$index}}">
-                            {{artifact.artifactVersion}}
-                        </div>
-
-                        <div class="table-btn-col flex-item download-icon-container">
-                            <button class="table-download-btn tosca" download-artifact  data-tests-id="download-{{artifact.artifactDisplayName}}"
-                                    data-ng-if="artifact.artifactName" component="component" artifact="artifact" show-loader="true"></button>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="artifact.selected" class="item-opened"  data-tests-id="details-{{$index}}">
-                        <div><span class="details-title">Label:</span> {{artifact.artifactLabel}}</div>
-                        <div><span class="details-title">UUID:</span> {{artifact.artifactUUID}}</div>
-                        <div><span class="details-title">Description:</span> {{artifact.description}}</div>
-
-
-                    </div>
-
-                </perfect-scrollbar>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
deleted file mode 100644
index 23be3c3548..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
+++ /dev/null
@@ -1,77 +0,0 @@
-.workspace-tosca-artifact {
-    width: 100%;
-    display: inline-block;
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .details-title{
-        font-weight: bold;
-        margin-right: 5px;
-    }
-
-    .table{
-        height: 490px;
-        margin-bottom: 0;
-    }
-
-
-    .table-container-flex {
-        margin-top: 0;
-        .item-opened{
-            word-wrap: break-word;
-        }
-
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-            .hand;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 1;
-        }
-
-        .flex-item:nth-child(4) {
-            flex-grow: 1;
-        }
-
-
-
-
-        .table-download-btn{
-            &.tosca{
-                margin-left: 0;
-                margin-top: 8px;
-            }
-        }
-
-        .download-icon-container{
-            position: relative;
-
-            .loader{
-                left: 60%;
-                top: 45px;
-                border: none;
-                background-color: transparent;
-                height: 0px;
-                width: 63px;
-                outline: none;
-
-            }
-        }
-
-
-    }
-
-}
-
-
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
index f4bbed2c96..11667283b2 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
@@ -22,103 +22,110 @@
  * Created by obarda on 3/30/2016.
  */
 'use strict';
-import * as _ from "lodash";
+import * as _ from 'lodash';
 import {
-    IUserProperties, IAppMenu, Resource, Component, Plugin, PluginsConfiguration, PluginDisplayOptions,
-    RelationshipTypeModel, NodeTypeModel, CapabilityTypeModel
-} from "app/models";
+    IUserProperties,
+    IAppMenu,
+    Resource,
+    Component,
+    Plugin,
+    PluginsConfiguration,
+    PluginDisplayOptions
+} from 'app/models';
 import {
-    WorkspaceMode, ComponentFactory, ChangeLifecycleStateHandler, Role, ComponentState, MenuItemGroup, MenuHandler,
-    MenuItem, ModalsHandler, States, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ResourceType, PREVIOUS_CSAR_COMPONENT
-} from "app/utils";
+    MenuItem, ModalsHandler, States, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ResourceType, PREVIOUS_CSAR_COMPONENT,
+    WorkspaceMode, ComponentFactory, ChangeLifecycleStateHandler, Role, ComponentState, MenuItemGroup, MenuHandler
+} from 'app/utils';
 import {
     EventListenerService,
-    EntityService,
-    ProgressService,
-    CacheService,
-    LeftPaletteLoaderService
-} from "app/services";
-import {FileUploadModel} from "../../directives/file-upload/file-upload";
-import {AutomatedUpgradeService} from "../../ng2/pages/automated-upgrade/automated-upgrade.service";
-import {ComponentServiceNg2} from "../../ng2/services/component-services/component.service";
-import {EventBusService} from "../../ng2/services/event-bus.service";
-import {PluginsService} from "../../ng2/services/plugins.service";
-import {IDependenciesServerResponse} from "../../ng2/services/responses/dependencies-server-response";
+    LeftPaletteLoaderService,
+    ProgressService
+} from 'app/services';
+import {
+    CacheService
+} from 'app/services-ng2';
+import { AutomatedUpgradeService } from '../../ng2/pages/automated-upgrade/automated-upgrade.service';
+import { CatalogService } from '../../ng2/services/catalog.service';
+import { ComponentServiceNg2 } from '../../ng2/services/component-services/component.service';
+import { EventBusService } from '../../ng2/services/event-bus.service';
+import { HomeService } from '../../ng2/services/home.service';
+import { PluginsService } from '../../ng2/services/plugins.service';
+import { IDependenciesServerResponse } from '../../ng2/services/responses/dependencies-server-response';
+import { WorkspaceNg1BridgeService } from '../../ng2/pages/workspace/workspace-ng1-bridge-service';
+import { WorkspaceService } from '../../ng2/pages/workspace/workspace.service';
 
 
 export interface IWorkspaceViewModelScope extends ng.IScope {
 
-    isLoading:boolean;
-    isCreateProgress:boolean;
-    component:Component;
-    originComponent:Component;
-    componentType:string;
-    importFile:any;
-    leftBarTabs:MenuItemGroup;
-    isNew:boolean;
-    isFromImport:boolean;
-    isValidForm:boolean;
-    isActiveTopBar:boolean;
-    mode:WorkspaceMode;
-    breadcrumbsModel:Array<MenuItemGroup>;
-    sdcMenu:IAppMenu;
-    changeLifecycleStateButtons:any;
-    version:string;
-    versionsList:Array<any>;
-    changeVersion:any;
-    isComposition:boolean;
-    isDeployment:boolean;
-    isPlugins:boolean;
-    $state:ng.ui.IStateService;
-    user:IUserProperties;
-    thirdParty:boolean;
-    disabledButtons:boolean;
-    menuComponentTitle:string;
-    progressService:ProgressService;
-    progressMessage:string;
+    isLoading: boolean;
+    isCreateProgress: boolean;
+    component: Component;
+    originComponent: Component;
+    componentType: string;
+    importFile: any;
+    leftBarTabs: MenuItemGroup;
+    isNew: boolean;
+    isFromImport: boolean;
+    isValidForm: boolean;
+    isActiveTopBar: boolean;
+    mode: WorkspaceMode;
+    breadcrumbsModel: Array<MenuItemGroup>;
+    sdcMenu: IAppMenu;
+    changeLifecycleStateButtons: any;
+    version: string;
+    versionsList: Array<any>;
+    changeVersion: any;
+    isComposition: boolean;
+    isDeployment: boolean;
+    isPlugins: boolean;
+    $state: ng.ui.IStateService;
+    user: IUserProperties;
+    thirdParty: boolean;
+    disabledButtons: boolean;
+    menuComponentTitle: string;
+    progressService: ProgressService;
+    progressMessage: string;
     ComponentServiceNg2: ComponentServiceNg2;
     // leftPanelComponents:Array<Models.Components.Component>; //this is in order to load the left panel once, and not wait long time when moving to composition
-    unsavedChanges:boolean;
-    unsavedChangesCallback:Function;
-    unsavedFile:boolean;
-    capabilityTypesList: Array<CapabilityTypeModel>;
-    relationshipTypesList: Array<RelationshipTypeModel>;
-    nodeTypesList: Array<NodeTypeModel>;
-
-
-    startProgress(message:string):void;
-    stopProgress():void;
-    updateBreadcrumbs(component:Component):void;
-    updateUnsavedFileFlag(isUnsaved:boolean):void;
-    showChangeStateButton():boolean;
-    getComponent():Component;
-    setComponent(component:Component):void;
-    setOriginComponent(component:Component):void;
-    onMenuItemPressed(state:string, params:any):ng.IPromise<boolean>;
-    create():void;
-    save():Promise<void>;
-    setValidState(isValid:boolean):void;
-    changeLifecycleState(state:string):void;
-    handleChangeLifecycleState(state:string, newCsarVersion?:string):void;
-    disableMenuItems():void;
-    enableMenuItems():void;
-    isDesigner():boolean;
-    isViewMode():boolean;
-    isEditMode():boolean;
-    isCreateMode():boolean;
-    isDisableMode():boolean;
-    isGeneralView():boolean;
-    goToBreadcrumbHome():void;
-    onVersionChanged(selectedId:string):void;
-    getLatestVersion():void;
-    getStatus():string;
-    showLifecycleIcon():boolean;
-    updateSelectedMenuItem(state:string):void;
-    isSelected(menuItem:MenuItem):boolean;
-    uploadFileChangedInGeneralTab():void;
-    updateMenuComponentName(ComponentName:string):void;
-    getTabTitle():string;
-    reload(component:Component):void;
+    unsavedChanges: boolean;
+    unsavedChangesCallback: Function;
+    unsavedFile: boolean;
+    hasNoDependencies: boolean;
+
+
+    startProgress(message: string): void;
+    stopProgress(): void;
+    updateBreadcrumbs(component: Component): void;
+    updateUnsavedFileFlag(isUnsaved: boolean): void;
+    showChangeStateButton(): boolean;
+    getComponent(): Component;
+    setComponent(component: Component): void;
+    setOriginComponent(component: Component): void;
+    onMenuItemPressed(state: string, params: any): ng.IPromise<boolean>;
+    create(): void;
+    save(): Promise<void>;
+    setValidState(isValid: boolean): void;
+    changeLifecycleState(state: string): void;
+    handleChangeLifecycleState(state: string, newCsarVersion?: string, errorFunction?: Function): void;
+    disableMenuItems(): void;
+    enableMenuItems(): void;
+    isDesigner(): boolean;
+    isViewMode(): boolean;
+    isEditMode(): boolean;
+    isCreateMode(): boolean;
+    isDisableMode(): boolean;
+    isGeneralView(): boolean;
+    goToBreadcrumbHome(): void;
+    onVersionChanged(selectedId: string): void;
+    getLatestVersion(): void;
+    getStatus(): string;
+    showLifecycleIcon(): boolean;
+    updateSelectedMenuItem(state: string): void;
+    isSelected(menuItem: MenuItem): boolean;
+    uploadFileChangedInGeneralTab(): void;
+    updateMenuComponentName(ComponentName: string): void;
+    getTabTitle(): string;
+    reload(component: Component): void;
 }
 
 export class WorkspaceViewModel {
@@ -133,53 +140,55 @@ export class WorkspaceViewModel {
         'MenuHandler',
         'Sdc.Services.CacheService',
         'ChangeLifecycleStateHandler',
-        'ModalsHandler',
         'LeftPaletteLoaderService',
         '$filter',
         'EventListenerService',
-        'Sdc.Services.EntityService',
         'Notification',
         '$stateParams',
+        'HomeService',
+        'CatalogService',
         'Sdc.Services.ProgressService',
         'ComponentServiceNg2',
         'AutomatedUpgradeService',
         'EventBusService',
-        'PluginsService'
+        'PluginsService',
+        'WorkspaceNg1BridgeService',
+        'workspaceService'
     ];
 
-    constructor(private $scope:IWorkspaceViewModelScope,
-                private injectComponent:Component,
-                private ComponentFactory:ComponentFactory,
-                private $state:ng.ui.IStateService,
-                private sdcMenu:IAppMenu,
-                private $q:ng.IQService,
-                private MenuHandler:MenuHandler,
-                private cacheService:CacheService,
-                private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
-                private ModalsHandler:ModalsHandler,
-                private LeftPaletteLoaderService:LeftPaletteLoaderService,
-                private $filter:ng.IFilterService,
-                private EventListenerService:EventListenerService,
-                private EntityService:EntityService,
-                private Notification:any,
-                private $stateParams:any,
-                private progressService:ProgressService,
-                private ComponentServiceNg2:ComponentServiceNg2,
-                private AutomatedUpgradeService:AutomatedUpgradeService,
-                private eventBusService:EventBusService,
-                private pluginsService:PluginsService) {
-              
-
-
-        this.initScope();
-        this.initAfterScope();
-        this.$scope.updateSelectedMenuItem(this.$state.current.name);
+    constructor(private $scope: IWorkspaceViewModelScope,
+                private injectComponent: Component,
+                private ComponentFactory: ComponentFactory,
+                private $state: ng.ui.IStateService,
+                private sdcMenu: IAppMenu,
+                private $q: ng.IQService,
+                private MenuHandler: MenuHandler,
+                private cacheService: CacheService,
+                private ChangeLifecycleStateHandler: ChangeLifecycleStateHandler,
+                private LeftPaletteLoaderService: LeftPaletteLoaderService,
+                private $filter: ng.IFilterService,
+                private EventListenerService: EventListenerService,
+                private Notification: any,
+                private $stateParams: any,
+                private homeService: HomeService,
+                private catalogService: CatalogService,
+                private progressService: ProgressService,
+                private ComponentServiceNg2: ComponentServiceNg2,
+                private AutomatedUpgradeService: AutomatedUpgradeService,
+                private eventBusService: EventBusService,
+                private pluginsService: PluginsService,
+                private workspaceNg1BridgeService: WorkspaceNg1BridgeService,
+                private workspaceService: WorkspaceService) {
+
+                this.initScope();
+                // this.initAfterScope();
+                this.$scope.updateSelectedMenuItem(this.$state.current.name);
     }
 
-    private role:string;
-    private category:string;
-    private components:Array<Component>;
-
+    private role: string;
+    private category: string;
+    private components: Component[];
+    
     private initViewMode = ():WorkspaceMode => {
         let mode = WorkspaceMode.VIEW;
 
@@ -187,35 +196,34 @@ export class WorkspaceViewModel {
             mode = WorkspaceMode.CREATE;
         } else {
             if (this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT &&
-                this.$scope.component.lastUpdaterUserId === this.cacheService.get("user").userId) {
-                if ((this.$scope.component.isService() || this.$scope.component.isResource()) && this.role == Role.DESIGNER) {
+                this.$scope.component.lastUpdaterUserId === this.cacheService.get('user').userId) {
+                if ((this.$scope.component.isService() || this.$scope.component.isResource()) && this.role === Role.DESIGNER) {
                     mode = WorkspaceMode.EDIT;
                 }
             }
         }
+        this.workspaceNg1BridgeService.updateIsViewOnly(mode === WorkspaceMode.VIEW);
         return mode;
-    };
+    }
 
-    private initChangeLifecycleStateButtons = ():void => {
-        let state = this.$scope.component.isService() && (Role.OPS == this.role || Role.GOVERNOR == this.role) ? this.$scope.component.distributionStatus : this.$scope.component.lifecycleState;
+    private initChangeLifecycleStateButtons = (): void => {
+        let state: string;
+        if (this.$scope.component.isService() && this.$scope.component.lifecycleState === 'CERTIFIED') {
+            state = this.$scope.component.distributionStatus;
+        } else {
+            state = this.$scope.component.lifecycleState;
+        }
         this.$scope.changeLifecycleStateButtons = (this.sdcMenu.roles[this.role].changeLifecycleStateButtons[state] || [])[this.$scope.component.componentType.toUpperCase()];
+    }
 
-    };
-
-    private initLeftPalette = ():void => {
-        //this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component);
-    };
-
-    private initScope = ():void => {
-
+    private initScope = (): void => {
         this.$scope.component = this.injectComponent;
-        //this.initLeftPalette();
         this.$scope.menuComponentTitle = this.$scope.component.name;
         this.$scope.disabledButtons = false;
         this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component);
         this.$scope.componentType = this.$scope.component.componentType;
         this.$scope.version = this.cacheService.get('version');
-        this.$scope.user = this.cacheService.get("user");
+        this.$scope.user = this.cacheService.get('user');
         this.role = this.$scope.user.role;
         this.category = this.$scope.component.selectedCategory;
         this.$scope.mode = this.initViewMode();
@@ -229,10 +237,11 @@ export class WorkspaceViewModel {
         this.$scope.progressService = this.progressService;
         this.$scope.unsavedChanges = false;
 
-        this.EventListenerService.registerObserverCallback(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, this.setWorkspaceButtonState);
-        //this.EventListenerService.registerObserverCallback(EVENTS.ON_UPDATE_VSP_FILE, this.updateVspFlag);
+        this.$scope.hasNoDependencies = true;
+        this.verifyIfDependenciesExist();
 
-        this.$scope.getComponent = ():Component => {
+        this.EventListenerService.registerObserverCallback(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, this.setWorkspaceButtonState);
+        this.$scope.getComponent = (): Component => {
             return this.$scope.component;
         };
 
@@ -261,17 +270,17 @@ export class WorkspaceViewModel {
         this.$scope.archiveComponent = ():void => {
             this.$scope.isLoading = true;
             const typeComponent = this.$scope.component.componentType;
-            this.ComponentServiceNg2.archiveComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=>{
+            this.ComponentServiceNg2.archiveComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=> {
                 this.$scope.isLoading = false;
-                if(this.$state.params.previousState){
-                    switch(this.$state.params.previousState){
+                if (this.$state.params.previousState) {
+                    switch (this.$state.params.previousState) {
                         case 'catalog':
                         case 'dashboard':
                             this.$state.go(this.$state.params.previousState);
                             break;
                         default:
                             break;
-                    } 
+                    }
                 }
                 this.$scope.component.archived = true;
                 this.deleteArchiveCache();
@@ -281,17 +290,17 @@ export class WorkspaceViewModel {
                     title: this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TITLE")
                 });
             }, (error) => { this.$scope.isLoading = false; });
-        } 
+        }
 
         this.$scope.restoreComponent = ():void => {
             this.$scope.isLoading = true;
             const typeComponent = this.$scope.component.componentType;
-            this.ComponentServiceNg2.restoreComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=>{
+            this.ComponentServiceNg2.restoreComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=> {
                 this.$scope.isLoading = false;
                 this.Notification.success({
-                            message: this.$scope.component.name + ' ' + this.$filter('translate')("RESTORE_SUCCESS_MESSAGE_TEXT"),
-                            title: this.$filter('translate')("RESTORE_SUCCESS_MESSAGE_TITLE")
-                        });
+                    message: this.$scope.component.name + ' ' + this.$filter('translate')("RESTORE_SUCCESS_MESSAGE_TEXT"),
+                    title: this.$filter('translate')("RESTORE_SUCCESS_MESSAGE_TITLE")
+                });
             });
             this.$scope.component.archived = false;
             this.deleteArchiveCache();
@@ -304,13 +313,13 @@ export class WorkspaceViewModel {
                     if(this.$scope.isValidForm){
                         this.$scope.save().then(() => {
                             this.$scope.onMenuItemPressed(toState.name, toParams);
-                        }, ()=> { 
+                        }, ()=> {
                             console.error("Save failed, unable to navigate to " + toState.name);
                         })
                     } else {
                         console.error("Form is invalid, unable to navigate to " + toState.name);
                     }
-                } 
+                }
             }
 
         });
@@ -384,7 +393,7 @@ export class WorkspaceViewModel {
         };
 
         this.$scope.create = () => {
-            
+
             this.$scope.startProgress("Creating Asset...");
             _.first(this.$scope.leftBarTabs.menuItems).isDisabled = true;//disabled click on general tab (DE246274)
 
@@ -429,7 +438,7 @@ export class WorkspaceViewModel {
         };
 
         this.$scope.save = ():Promise<void> => {
-            
+
             this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_SAVE_BUTTON_CLICK);
 
             this.$scope.startProgress("Updating Asset...");
@@ -445,6 +454,7 @@ export class WorkspaceViewModel {
 
                 let onFailed = () => {
                     stopProgressAndEnableUI();
+                    this.$scope.updateUnsavedFileFlag(true);
                     this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_SAVE_BUTTON_ERROR);
 
                     reject();
@@ -459,7 +469,7 @@ export class WorkspaceViewModel {
                     });
 
                     this.$scope.updateBreadcrumbs(component);
-                    
+
                     //update the component
                     this.$scope.setComponent(component);
                     this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component);
@@ -467,13 +477,14 @@ export class WorkspaceViewModel {
                     if (this.cacheService.contains(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
                         this.cacheService.remove(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
                     }
-                    if (this.cacheService.contains(PREVIOUS_CSAR_COMPONENT)){
+                    if (this.cacheService.contains(PREVIOUS_CSAR_COMPONENT)) {
                         this.cacheService.remove(PREVIOUS_CSAR_COMPONENT);
                     }
 
                     //clear edit flags
                     this.$state.current.data.unsavedChanges = false;
                     this.$scope.unsavedFile = false;
+                    this.$scope.reload(component);
                     resolve();
                 };
 
@@ -497,35 +508,40 @@ export class WorkspaceViewModel {
             this.$state.go('dashboard');
         };
 
-        this.$scope.handleChangeLifecycleState = (state:string, newCsarVersion?:string) => {
+        this.$scope.handleChangeLifecycleState = (state:string, newCsarVersion?:string, onError?: Function) => {
             if ('monitor' === state) {
                 this.$state.go('workspace.distribution');
                 return;
             }
 
             let data = this.$scope.changeLifecycleStateButtons[state];
-            let onSuccess = (component:Component, url:string):void => {
-                //Updating the component from server response
-
+            if (!data && this.$stateParams.componentCsar && !this.$scope.isCreateMode()) {
+                data = {text: 'Check Out', url: 'lifecycleState/CHECKOUT'};
+            }
+            const onSuccess = (component, url:string):void => {
+                // Updating the component from server response
+ 
                 // Creating the data object to notify the plugins with
-                let eventData: any = {
+                const eventData: any = {
                     uuid: this.$scope.component.uuid,
                     version: this.$scope.component.version
                 };
 
-                //the server returns only metaData (small component) except checkout (Full component)  ,so we update only the statuses of distribution & lifecycle
+                // the server returns only metaData (small component) except checkout (Full component)  ,so we update only the statuses of distribution & lifecycle
                 this.$scope.component.lifecycleState = component.lifecycleState;
                 this.$scope.component.distributionStatus = component.distributionStatus;
 
                 switch (url) {
                     case 'lifecycleState/CHECKOUT':
+                        this.workspaceNg1BridgeService.updateIsViewOnly(false);
                         this.eventBusService.notify("CHECK_OUT", eventData, false).subscribe(() => {
                             // only checkOut get the full component from server
                             //   this.$scope.component = component;
                             // Work around to change the csar version
                             if(newCsarVersion) {
                                 this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, newCsarVersion);
-                            } 
+                                (this.$scope.component as Resource).csarVersion = newCsarVersion;
+                            }
 
                             //when checking out a minor version uuid remains
                             const bcIdx = _.findIndex(this.components, (item) => {
@@ -542,6 +558,7 @@ export class WorkspaceViewModel {
                             this.initVersionObject();
                             this.$scope.isLoading = false;
                             this.EventListenerService.notifyObservers(EVENTS.ON_CHECKOUT, component);
+                            this.workspaceService.setComponentMetadata(component);
 
                             this.Notification.success({
                                 message: this.$filter('translate')("CHECKOUT_SUCCESS_MESSAGE_TEXT"),
@@ -551,6 +568,7 @@ export class WorkspaceViewModel {
                         });
                         break;
                     case 'lifecycleState/CHECKIN':
+                        this.workspaceNg1BridgeService.updateIsViewOnly(true);
                         defaultActionAfterChangeLifecycleState();
                         this.Notification.success({
                             message: this.$filter('translate')("CHECKIN_SUCCESS_MESSAGE_TEXT"),
@@ -566,77 +584,25 @@ export class WorkspaceViewModel {
                             });
                         });
                         break;
-                    case 'lifecycleState/certificationRequest':
-                        defaultActionAfterChangeLifecycleState();
-                        this.Notification.success({
-                            message: this.$filter('translate')("SUBMIT_FOR_TESTING_SUCCESS_MESSAGE_TEXT"),
-                            title: this.$filter('translate')("SUBMIT_FOR_TESTING_SUCCESS_MESSAGE_TITLE")
-                        });
-                        break;
-                    //Tester Role
-                    case 'lifecycleState/failCertification':
-                        defaultActionAfterChangeLifecycleState();
-                        this.Notification.success({
-                            message: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TEXT"),
-                            title: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TITLE")
-                        });
-                        break;
                     case 'lifecycleState/certify':
-
                         this.$scope.handleCertification(component);
-                        
+                        this.verifyIfDependenciesExist();
+                        this.$scope.reload(component);
                         break;
-                    //DE203504 Bug Fix Start
-                    case 'lifecycleState/startCertification':
-                        this.initChangeLifecycleStateButtons();
-                        this.Notification.success({
-                            message: this.$filter('translate')("START_TESTING_SUCCESS_MESSAGE_TEXT"),
-                            title: this.$filter('translate')("START_TESTING_SUCCESS_MESSAGE_TITLE")
-                        });
-                        break;
-                    case  'lifecycleState/cancelCertification':
-                        this.initChangeLifecycleStateButtons();
-                        this.Notification.success({
-                            message: this.$filter('translate')("CANCEL_TESTING_SUCCESS_MESSAGE_TEXT"),
-                            title: this.$filter('translate')("CANCEL_TESTING_SUCCESS_MESSAGE_TITLE")
-                        });
-                        break;
-                    //Ops Role
-                    case  'distribution/PROD/activate':
-                        this.initChangeLifecycleStateButtons();
+                    case 'distribution/PROD/activate':
                         this.Notification.success({
                             message: this.$filter('translate')("DISTRIBUTE_SUCCESS_MESSAGE_TEXT"),
                             title: this.$filter('translate')("DISTRIBUTE_SUCCESS_MESSAGE_TITLE")
                         });
-                        break;
-                    //Governor Role
-                    case  'distribution-state/reject':
                         this.initChangeLifecycleStateButtons();
-                        this.Notification.success({
-                            message: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TEXT"),
-                            title: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TITLE")
-                        });
                         break;
-                    case  'distribution-state/approve':
-                        this.initChangeLifecycleStateButtons();
-                        this.$state.go('catalog');
-                        this.Notification.success({
-                            message: this.$filter('translate')("APPROVE_SUCCESS_MESSAGE_TEXT"),
-                            title: this.$filter('translate')("APPROVE_SUCCESS_MESSAGE_TITLE")
-                        });
-                        break;
-                    //DE203504 Bug Fix End
-
                     default :
                         defaultActionAfterChangeLifecycleState();
-
                 }
-                if (data.url != 'lifecycleState/CHECKOUT') {
+                if (data.url !== 'lifecycleState/CHECKOUT') {
                     this.$scope.isLoading = false;
                 }
             };
-            //this.$scope.isLoading = true;
-
             this.ChangeLifecycleStateHandler.changeLifecycleState(this.$scope.component, data, this.$scope, onSuccess);
         };
 
@@ -663,6 +629,21 @@ export class WorkspaceViewModel {
             return this.$scope.mode === WorkspaceMode.CREATE;
         };
 
+        this.$scope.checkDisableButton = (button: any):boolean => {
+            // Logic moved from html to component
+            if (this.$scope.isCreateMode() || button.disabled || this.$scope.disabledButtons || !this.$scope.isValidForm || this.$scope.unsavedChanges || this.$scope.component.archived){
+                return true;
+            }
+
+            // Specific verification for Checkout - enabled only in case the component is the latest version.
+            let result: boolean = false;
+
+            if (button.url === 'lifecycleState/CHECKOUT') {
+                result = !this.$scope.component.isLatestVersion();
+            }
+            return result;
+        };
+
         this.$scope.isEditMode = ():boolean => {
             return this.$scope.mode === WorkspaceMode.EDIT;
         };
@@ -686,18 +667,14 @@ export class WorkspaceViewModel {
 
         this.initMenuItems();
 
-        this.$scope.showChangeStateButton = ():boolean => {
-            let result:boolean = true;
-            if (!this.$scope.component.isLatestVersion() && Role.OPS != this.role && Role.GOVERNOR != this.role) {
+        this.$scope.showLatestVersion = (): boolean => {
+            let result: boolean = true;
+            if (!this.$scope.component.isLatestVersion()) {
                 result = false;
             }
             if (ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState && this.$scope.isViewMode()) {
                 result = false;
             }
-            if (ComponentState.CERTIFIED != this.$scope.component.lifecycleState &&
-                (Role.OPS == this.role || Role.GOVERNOR == this.role)) {
-                result = false;
-            }
             return result;
         };
 
@@ -705,20 +682,20 @@ export class WorkspaceViewModel {
             let stateArray:Array<string> = state.split('.', 2);
             let stateWithoutInternalNavigate:string = stateArray[0] + '.' + stateArray[1];
             let selectedItem:MenuItem = _.find(this.$scope.leftBarTabs.menuItems, (item:MenuItem) => {
-                let itemStateArray: Array<string> = item.state.split('.', 2);
+                let itemStateArray:Array<string> = item.state.split('.', 2);
                 let itemStateWithoutNavigation:string = itemStateArray[0] + '.' + itemStateArray[1];
                 return (itemStateWithoutNavigation === stateWithoutInternalNavigate);
             });
 
             let selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0;
 
-           if (stateArray[1] === 'plugins') {
+            if (stateArray[1] === 'plugins') {
                 _.forEach(PluginsConfiguration.plugins, (plugin) => {
                     if (plugin.pluginStateUrl == this.$state.params.path) {
                         return false;
                     }
                     else if (this.pluginsService.isPluginDisplayedInContext(plugin, this.role, this.$scope.component.getComponentSubType())) {
-                            selectedIndex++;
+                        selectedIndex++;
                     }
                 });
             }
@@ -726,11 +703,11 @@ export class WorkspaceViewModel {
             this.$scope.leftBarTabs.selectedIndex = selectedIndex;
         };
 
-        this.$scope.isSelected = (menuItem:MenuItem): boolean => {
+        this.$scope.isSelected = (menuItem: MenuItem): boolean => {
             return this.$scope.leftBarTabs.selectedIndex === _.indexOf(this.$scope.leftBarTabs.menuItems, menuItem);
         };
 
-        this.$scope.$watch('$state.current.name', (newVal:string):void => {
+        this.$scope.$watch('$state.current.name', (newVal: string): void => {
             if (newVal) {
                 this.$scope.isComposition = (newVal.indexOf(States.WORKSPACE_COMPOSITION) > -1);
                 this.$scope.isDeployment = newVal == States.WORKSPACE_DEPLOYMENT;
@@ -738,20 +715,26 @@ export class WorkspaceViewModel {
             }
         });
 
-        this.$scope.getTabTitle = ():string => {
-            return this.$scope.leftBarTabs.menuItems.find((menuItem:MenuItem) => {
+        this.$scope.getTabTitle = (): string => {
+            return this.$scope.leftBarTabs.menuItems.find((menuItem: MenuItem) => {
                 return menuItem.state == this.$scope.$state.current.name;
             }).text;
         };
 
-        this.$scope.reload = (component:Component):void => {
-            this.$state.go(this.$state.current.name, {id: component.uniqueId}, {reload: true});
+        this.$scope.reload = (component: Component): void => {
+            const isGeneralTab = this.$state.current.name === 'workspace.general';
+            // nullify the componentCsar in case we are in general tab so we know we didnt came from updateVsp Modal
+            if (isGeneralTab) {
+                this.$state.go(this.$state.current.name, {id: component.uniqueId, componentCsar: null}, {reload: true});
+            } else {
+                this.$state.go(this.$state.current.name, {id: component.uniqueId}, {reload: true});
+            }
         };
 
         this.$scope.$on('$destroy', () => {
             this.EventListenerService.unRegisterObserver(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES);
         });
-        
+
         this.$scope.openAutomatedUpgradeModal = ():void => {
             this.$scope.isLoading = true;
             this.ComponentServiceNg2.getDependencies(this.$scope.component.componentType, this.$scope.component.uniqueId).subscribe((response:Array<IDependenciesServerResponse>)=> {
@@ -761,14 +744,14 @@ export class WorkspaceViewModel {
         }
 
         this.$scope.handleCertification = (certifyComponent): void => {
-            if (this.$scope.component.getComponentSubType() === ResourceType.VF) {
+            if (this.$scope.component.getComponentSubType() === ResourceType.VF || this.$scope.component.isService()) {
                 this.ComponentServiceNg2.getDependencies(this.$scope.component.componentType, this.$scope.component.uniqueId).subscribe((response:Array<IDependenciesServerResponse>) => {
                     this.$scope.isLoading = false;
 
-                    let isUpgradeNeeded = _.filter(response, (componentToUpgrade:IDependenciesServerResponse) => {
+                    const isUpgradeNeeded = _.filter(response, (componentToUpgrade:IDependenciesServerResponse) => {
                         return componentToUpgrade.dependencies && componentToUpgrade.dependencies.length > 0;
                     });
-                    if(isUpgradeNeeded.length === 0) {
+                    if (isUpgradeNeeded.length === 0) {
                         this.onSuccessWithoutUpgradeNeeded();
                         return;
                     }
@@ -781,52 +764,54 @@ export class WorkspaceViewModel {
         }
 
         this.$scope.disableMenuItems = () => {
-            this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
-                item.isDisabled = (States.WORKSPACE_GENERAL != item.state);
+            this.$scope.leftBarTabs.menuItems.forEach((item: MenuItem) => {
+                item.isDisabled = (States.WORKSPACE_GENERAL !== item.state);
             });
         }
-    
+
         this.$scope.enableMenuItems = () => {
-            this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
+            this.$scope.leftBarTabs.menuItems.forEach((item: MenuItem) => {
                 item.isDisabled = false;
             });
-        }
+        };
 
 
-        this.$scope.startProgress = (message:string):void => {
+        this.$scope.startProgress = (message: string): void => {
             this.progressService.initCreateComponentProgress(this.$scope.component.uniqueId);
             this.$scope.isCreateProgress = true;
             this.$scope.progressMessage = message;
         };
 
-        this.$scope.stopProgress = ():void => {
+        this.$scope.stopProgress = (): void => {
             this.$scope.isCreateProgress = false;
             this.progressService.deleteProgressValue(this.$scope.component.uniqueId);
         }
 
-        this.$scope.updateBreadcrumbs = (component:Component):void => {
+        this.$scope.updateBreadcrumbs = (component: Component): void => {
             // Update the components list for breadcrumbs
             const bcIdx = this.MenuHandler.findBreadcrumbComponentIndex(this.components, component);
             if (bcIdx !== -1) {
                 this.components[bcIdx] = component;
                 this.initBreadcrumbs();  // re-calculate breadcrumbs
             }
-        }
+        };
 
         this.$scope.updateUnsavedFileFlag = (isUnsaved:boolean) => {
             this.$scope.unsavedFile = isUnsaved;
-        }
+        };
 
-    };
+    }
 
-    private onSuccessWithoutUpgradeNeeded = ():void => {
+    private onSuccessWithoutUpgradeNeeded = (): void => {
         this.$scope.isLoading = false;
         this.Notification.success({
-            message: this.$filter('translate')("ACCEPT_TESTING_SUCCESS_MESSAGE_TEXT"),
-            title: this.$filter('translate')("ACCEPT_TESTING_SUCCESS_MESSAGE_TITLE")
+            message: this.$filter('translate')('SERVICE_CERTIFICATION_STATUS_TEXT'),
+            title: this.$filter('translate')('SERVICE_CERTIFICATION_STATUS_TITLE')
         });
-        this.$state.go('dashboard');
+        this.initVersionObject();
+        this.initChangeLifecycleStateButtons();
     }
+
     private refreshDataAfterChangeLifecycleState = (component:Component):void => {
         this.$scope.isLoading = false;
         this.$scope.mode = this.initViewMode();
@@ -835,42 +820,42 @@ export class WorkspaceViewModel {
         this.EventListenerService.notifyObservers(EVENTS.ON_LIFECYCLE_CHANGE, component);
     }
 
-    private initAfterScope = ():void => {
+    private initAfterScope = (): void => {
         // In case user select csar from the onboarding modal, need to disable checkout and submit for testing.
         if (this.$state.params['disableButtons'] === true) {
             this.$scope.uploadFileChangedInGeneralTab();
         }
     };
 
-    private initVersionObject = ():void => {
+    private initVersionObject = (): void => {
         this.$scope.versionsList = (this.$scope.component.getAllVersionsAsSortedArray()).reverse();
         this.$scope.changeVersion = {
-            selectedVersion: _.find(this.$scope.versionsList, (versionObj)=> {
+            selectedVersion: _.find(this.$scope.versionsList, (versionObj) => {
                 return versionObj.versionId === this.$scope.component.uniqueId;
             })
         };
-    };
+    }
 
-    private getNewComponentBreadcrumbItem = ():MenuItem => {
-        let text = "";
+    private getNewComponentBreadcrumbItem = (): MenuItem => {
+        let text = '';
         if (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) {
             text = this.$scope.component.getComponentSubType() + ': ' + this.$scope.component.name;
         } else {
             text = 'Create new ' + this.$state.params['type'];
         }
         return new MenuItem(text, null, States.WORKSPACE_GENERAL, 'goToState', [this.$state.params]);
-    };
+    }
 
-    private updateMenuItemByRole = (menuItems:Array<any>, role:string) => {
-        let tempMenuItems:Array<any> = new Array<any>();
-        menuItems.forEach((item:any) => {
+    private updateMenuItemByRole = (menuItems: any[], role: string) => {
+        const tempMenuItems: any[] = new Array<any>();
+        menuItems.forEach((item: any) => {
             //remove item if role is disabled
             if (!(item.disabledRoles && item.disabledRoles.indexOf(role) > -1)) {
                 tempMenuItems.push(item);
             }
         });
         return tempMenuItems;
-    };
+    }
 
 	private updateMenuItemByCategory = (menuItems:Array<any>, category:string) => {
         let tempMenuItems:Array<any> = new Array<any>();
@@ -888,15 +873,15 @@ export class WorkspaceViewModel {
 
 
     private deleteArchiveCache = () => {
-        this.cacheService.remove("archiveComponents"); //delete the cache to ensure the archive is reloaded from server
-    };
+        this.cacheService.remove('archiveComponents'); // delete the cache to ensure the archive is reloaded from server
+    }
 
     private initBreadcrumbs = () => {
         this.components = this.cacheService.get('breadcrumbsComponents');
-        let breadcrumbsComponentsLvl = this.MenuHandler.generateBreadcrumbsModelFromComponents(this.components, this.$scope.component);
+        const breadcrumbsComponentsLvl = this.MenuHandler.generateBreadcrumbsModelFromComponents(this.components, this.$scope.component);
 
         if (this.$scope.isCreateMode()) {
-            let createItem = this.getNewComponentBreadcrumbItem();
+            const createItem = this.getNewComponentBreadcrumbItem();
             if (!breadcrumbsComponentsLvl.menuItems) {
                 breadcrumbsComponentsLvl.menuItems = [];
             }
@@ -905,25 +890,23 @@ export class WorkspaceViewModel {
         }
 
         this.$scope.breadcrumbsModel = [breadcrumbsComponentsLvl, this.$scope.leftBarTabs];
-    };
+    }
 
     private initMenuItems() {
 
-        let inCreateMode = this.$scope.isCreateMode();
+        const inCreateMode = this.$scope.isCreateMode();
         this.$scope.leftBarTabs = new MenuItemGroup();
-        //const menuItemsObjects:Array<any> = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role);
-        let menuItemsObjects:Array<any> = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role);
-        if(this.$scope.component.getComponentSubType()==="SERVICE")
-        {
-            let menuItemsObjectsCategory:Array<any> = this.updateMenuItemByCategory(menuItemsObjects, this.category);
-        	menuItemsObjects = menuItemsObjectsCategory;
+        let menuItemsObjects: any[] = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role);
+        if (this.$scope.component.getComponentSubType() === 'SERVICE') {
+            const menuItemsObjectsCategory: any[] = this.updateMenuItemByCategory(menuItemsObjects, this.category);
+            menuItemsObjects = menuItemsObjectsCategory;
         }
 
         // Only adding plugins to the workspace if they can be displayed for the current user role
         _.each(PluginsConfiguration.plugins, (plugin: Plugin) => {
             if (this.pluginsService.isPluginDisplayedInContext(plugin, this.role, this.$scope.component.getComponentSubType())) {
                 menuItemsObjects.push({
-                    text: plugin.pluginDisplayOptions["context"].displayName,
+                    text: plugin.pluginDisplayOptions['context'].displayName,
                     action: 'onMenuItemPressed',
                     state: 'workspace.plugins',
                     params: {path: plugin.pluginStateUrl}
@@ -931,7 +914,7 @@ export class WorkspaceViewModel {
             }
         });
 
-        this.$scope.leftBarTabs.menuItems = menuItemsObjects.map((item:MenuItem) => {
+        this.$scope.leftBarTabs.menuItems = menuItemsObjects.map((item: MenuItem) => {
             const menuItem = new MenuItem(item.text, item.callback, item.state, item.action, item.params, item.blockedForTypes, item.disabledCategory);
             if (menuItem.params) {
                 menuItem.params.state = menuItem.state;
@@ -940,7 +923,7 @@ export class WorkspaceViewModel {
                 menuItem.params = {state: menuItem.state};
             }
             menuItem.callback = () => this.$scope[menuItem.action](menuItem.state, menuItem.params);
-            menuItem.isDisabled = (inCreateMode && States.WORKSPACE_GENERAL != menuItem.state) ||
+            menuItem.isDisabled = (inCreateMode && States.WORKSPACE_GENERAL !== menuItem.state) ||
                 (States.WORKSPACE_DEPLOYMENT === menuItem.state && this.$scope.component.modules
                 && this.$scope.component.modules.length === 0 && this.$scope.component.isResource()) ||
                 (menuItem.disabledCategory === true);
@@ -950,20 +933,54 @@ export class WorkspaceViewModel {
         if (this.cacheService.get('breadcrumbsComponents')) {
             this.initBreadcrumbs();
         }
+        else {
+            this.initBreadcrumbsComponents();
+        }
     }
 
-
-
     private showSuccessNotificationMessage = ():void => {
         this.Notification.success({
-            message: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_FINISHED_DESCRIPTION"),
-            title: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_FINISHED_TITLE")
+            message: this.$filter('translate')('IMPORT_VF_MESSAGE_CREATE_FINISHED_DESCRIPTION'),
+            title: this.$filter('translate')('IMPORT_VF_MESSAGE_CREATE_FINISHED_TITLE')
         });
-    };
+    }
 
-    private setWorkspaceButtonState = (newState:boolean, callback?:Function) => {
+    private setWorkspaceButtonState = (newState: boolean, callback?: Function) => {
         this.$scope.unsavedChanges = newState;
         this.$scope.unsavedChangesCallback = callback;
     }
 
+    private initBreadcrumbsComponents = (): void => {
+        let breadcrumbsComponentsObservable;
+        if (this.$stateParams.previousState === 'dashboard') {
+            breadcrumbsComponentsObservable = this.homeService.getAllComponents(true);
+        } else if (this.$stateParams.previousState === 'catalog') {
+            breadcrumbsComponentsObservable = this.catalogService.getCatalog();
+        } else {
+            this.cacheService.remove('breadcrumbsComponentsState');
+            this.cacheService.remove('breadcrumbsComponents');
+            return;
+        }
+        breadcrumbsComponentsObservable.subscribe((components) => {
+            this.cacheService.set('breadcrumbsComponentsState', this.$stateParams.previousState);
+            this.cacheService.set('breadcrumbsComponents', components);
+            this.initBreadcrumbs();
+        });
+
+    }
+
+    private verifyIfDependenciesExist(): void {
+        let containsDependencies = [];
+        if (this.$scope.component.componentType && this.$scope.component.uniqueId &&
+            this.$scope.component.lifecycleState === 'CERTIFIED' && (this.$scope.component.isService() || this.$scope.component.getComponentSubType() === 'VF')) {
+            this.ComponentServiceNg2.getDependencies(this.$scope.component.componentType, this.$scope.component.uniqueId).subscribe((response: IDependenciesServerResponse[]) => {
+                containsDependencies = response.filter((version) => version.dependencies);
+                if (containsDependencies.length > 0) {
+                    this.$scope.hasNoDependencies = false;
+                } else {
+                    this.$scope.hasNoDependencies = true;
+                }
+            });
+        }
+    }
 }
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view.html b/catalog-ui/src/app/view-models/workspace/workspace-view.html
index d22262c94a..79dde943dc 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view.html
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html
@@ -22,7 +22,8 @@
                 {{menuComponentTitle}}
             </div>
             <div class="i-sdc-designer-sidebar-section-content-item" ng-class="{'selected': isSelected(menuItem)}" ng-repeat="menuItem in leftBarTabs.menuItems track by $index">
-                <div class="expand-collapse-menu-box-item-text" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}LeftSideMenu" ><button type="button" class="i-sdc-designer-sidebar-section-content-item-service-cat" ng-click="menuItem.callback()" ng-disabled={{menuItem.disabledCategory}}>{{menuItem.text}}</button></div>
+                <!--<div class="expand-collapse-menu-box-item-text" ng-click="menuItem.callback()" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}LeftSideMenu">{{menuItem.text}}</div>-->
+                <div class="expand-collapse-menu-box-item-text" ng-class="{'disabled': menuItem.isDisabled }"><button data-tests-id="{{menuItem.text}}LeftSideMenu" type="button" class="i-sdc-designer-sidebar-section-content-item-service-cat" ng-click="menuItem.callback()" ng-disabled={{menuItem.disabledCategory}}>{{menuItem.text}}</button></div>
             </div>
         </div>
 
@@ -53,9 +54,11 @@
 
                 <div class="sdc-workspace-top-bar-buttons">
 
-                    <span ng-if="!isCreateMode() && !component.isLatestVersion() && !showChangeStateButton()" [disabled]="unsavedChanges">Switch to the&nbsp;<a ng-click="getLatestVersion()">latest version</a></span>
+                    <span ng-if="!isCreateMode() && !component.isLatestVersion() && !showLatestVersion()" [disabled]="unsavedChanges">Switch to the&nbsp;<a data-tests-id="latest-version" ng-click="getLatestVersion()">latest version</a></span>
+                    
 
                  <button ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'CERTIFIED' && (component.isService() || component.getComponentSubType() === 'VF')"
+                            ng-disabled="hasNoDependencies"
                             ng-click="openAutomatedUpgradeModal()"
                             class="tlv-btn blue"
                             data-ng-class="{'disabled' : component.archived}"
@@ -65,13 +68,12 @@
 
                     <button ng-repeat="(key,button) in changeLifecycleStateButtons"
                             ng-click="changeLifecycleState(key)"
-                            ng-if="showChangeStateButton() && key != 'deleteVersion'"
-                            data-ng-disabled="isCreateMode() || button.disabled || disabledButtons || !isValidForm || unsavedChanges || component.archived"
+                            ng-if="key != 'deleteVersion'"
+                            data-ng-disabled="checkDisableButton(button)"
                             class="change-lifecycle-state-btn tlv-btn"
                             ng-class="$first ? 'outline green' : 'grey'"
                             data-tests-id="{{button.text  | testsId}}" prevent-double-click>
                             {{button.text}}
-
                         </button>
 
 
@@ -104,11 +106,11 @@
             </div>
             <div class="w-sdc-main-container-body-content-wrapper">
                 <div class="w-sdc-main-container-body-content-header">
-                    <div class="tab-title" data-ng-if="!isComposition && !isDeployment && !isPlugins">
+                    <div class="workspace-tab-title" data-ng-if="!isComposition && !isDeployment && !isPlugins">
                         {{getTabTitle()}}
                     </div>
                 </div>
-                <div class="w-sdc-main-container-body-content" data-ng-class="{'third-party':thirdParty}" data-ui-view></div>
+                <div class="w-sdc-main-container-body-content"  data-ng-class="{'deploy-body-content': isDeployment}" data-ng-class="{'third-party':thirdParty}" data-ui-view></div>
             </div>
         </div>
     </div>
diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less
index 518272d45c..5c479c7370 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace.less
+++ b/catalog-ui/src/app/view-models/workspace/workspace.less
@@ -109,7 +109,7 @@
                 .general-view-top-progress {
                     width: 30%;
                     margin: 0 auto;
-                    min-width: 150px;
+                    min-width: 140px;
                 }
             }
 
@@ -189,7 +189,7 @@
                 display: inline-block;
             }
         }
-        .tab-title{
+        .workspace-tab-title {
             height: 110px;
             padding-left: 100px;
             line-height: 110px;
@@ -199,6 +199,11 @@
             .w-sdc-main-container-body-content {
                 height: 100%;
             }
+
+            .w-sdc-main-container-body-content-wrapper {
+                height: 100%;
+                overflow:hidden;
+            }
         }
         .w-sdc-main-container-body-content {
             // height:calc(~'100% - @{action_nav_height} - @{tab_title}');
@@ -219,7 +224,7 @@
             height: calc(~'100% - @{action_nav_height}');
             .w-sdc-main-container-body-content-header {
                 display: flex;
-                .tab-title {
+                .workspace-tab-title {
                     flex-grow: 1;
                 }
                 .w-sdc-main-container-body-content-action-buttons {
@@ -239,4 +244,58 @@
         }
     }
 }
+// Fix till we remove everything to angular5 and fix all workspace style
+.composition{
+    .sdc-workspace-container{
+        .w-sdc-main-container{
+            .w-sdc-main-right-container{
+                left:0;
+                //overflow-y: scroll;
+                .sdc-workspace-top-bar {
+                    position: absolute;
+                    left: 245px;
+                    right: 0;
+                    z-index: 1;
+                    .not-latest{
+                        left: 270px;
+                    }
+                }
+                .w-sdc-main-container-body-content{
+                    padding: 0 0 0 0;
+                }
+
+                > div:first-child{
+                    padding: 0;
+                }
+            }
+        }
+    }
+}
+
+.deployment {
+
+    .sdc-workspace-container{
+        .w-sdc-main-container{
+            .w-sdc-main-right-container{
+                left:0;
+                //overflow-y: scroll;
+                .sdc-workspace-top-bar {
+                    position: absolute;
+                    left: 245px;
+                    right: 0;
+                    z-index: 1;
+                    .not-latest{
+                        left: 270px;
+                    }
+                }
 
+                > div:first-child{
+                    padding: 0;
+                }
+                .w-sdc-main-container-body-content-wrapper {
+                    padding: 0px;
+                }
+            }
+        }
+    }
+}