[SDC-29] catalog 1707 rebase commit.

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

25 files changed, 2250 insertions, 0 deletions

diff --git a/catalog-ui/src/app/services/activity-log-service.ts b/catalog-ui/src/app/services/activity-log-service.ts
new file mode 100644
index 0000000000..565dc9a39c
--- /dev/null
+++ b/catalog-ui/src/app/services/activity-log-service.ts
@@ -0,0 +1,28 @@
+'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/angular-js-bridge-service.ts b/catalog-ui/src/app/services/angular-js-bridge-service.ts
new file mode 100644
index 0000000000..1eaea878dd
--- /dev/null
+++ b/catalog-ui/src/app/services/angular-js-bridge-service.ts
@@ -0,0 +1,23 @@
+'use strict';
+import {IAppConfigurtaion} from "../models/app-config";
+
+export class AngularJSBridge {
+    private static _$filter:ng.IFilterService;
+    private static _sdcConfig:IAppConfigurtaion;
+
+    public static getFilter(filterName:string) {
+        return AngularJSBridge._$filter(filterName);
+    }
+
+    public static getAngularConfig() {
+        return AngularJSBridge._sdcConfig;
+    }
+
+
+    constructor($filter:ng.IFilterService, sdcConfig:IAppConfigurtaion) {
+        AngularJSBridge._$filter = $filter;
+        AngularJSBridge._sdcConfig = sdcConfig;
+    }
+}
+
+AngularJSBridge.$inject = ['$filter', 'sdcConfig']
diff --git a/catalog-ui/src/app/services/available-icons-service.ts b/catalog-ui/src/app/services/available-icons-service.ts
new file mode 100644
index 0000000000..ad17b069d6
--- /dev/null
+++ b/catalog-ui/src/app/services/available-icons-service.ts
@@ -0,0 +1,87 @@
+/**
+ * Created by obarda on 2/23/2016.
+ */
+'use strict';
+import {ComponentType} from "../utils/constants";
+
+interface IAvailableIconsService {
+    getIcons(componentType:ComponentType):Array<string>;
+}
+
+export class AvailableIconsService implements IAvailableIconsService {
+    constructor() {
+    }
+
+    public getIcons = (componentType:string):Array<string> => {
+
+        let icons:Array<string>;
+
+        switch (componentType) {
+            case ComponentType.SERVICE:
+                icons = [
+                    'call_controll',
+                    'mobility',
+                    'network_l_1-3',
+                    'network_l_4'
+                ];
+                break;
+
+            case ComponentType.RESOURCE:
+                icons = [
+                    'router',
+                    'database',
+                    'network',
+                    'objectStorage',
+                    'connector',
+                    'brocade',
+                    'cisco',
+                    'ericsson',
+                    'tropo',
+                    'fortinet',
+                    'att',
+                    'broadsoft',
+                    'alcatelLucent',
+                    'metaswitch',
+                    'aricent',
+                    'mySql',
+                    'oracle',
+                    'nokia_siemens',
+                    'juniper',
+                    'call_controll',
+                    'borderElement',
+                    'applicationServer',
+                    'server',
+                    'port',
+                    'loadBalancer',
+                    'compute',
+                    'gateway',
+                    'cp',
+                    'vl',
+                    'vfw',
+                    'firewall'
+                ];
+                break;
+
+            case ComponentType.PRODUCT:
+                icons = [
+                    'vfw',
+                    'network',
+                    'security',
+                    'cloud',
+                    'setting',
+                    'orphan',
+                    'wanx',
+                    'vrouter',
+                    'ucpe',
+                    'mobility'
+
+                ];
+                break;
+
+        }
+        return icons;
+    }
+}
+
+
+
diff --git a/catalog-ui/src/app/services/cache-service.ts b/catalog-ui/src/app/services/cache-service.ts
new file mode 100644
index 0000000000..9ee08c8478
--- /dev/null
+++ b/catalog-ui/src/app/services/cache-service.ts
@@ -0,0 +1,34 @@
+'use strict';
+import {Dictionary} from "app/utils";
+
+interface ICacheService {
+    get(key:string):any;
+    set(key:string, value:any):void;
+}
+
+export class CacheService implements ICacheService {
+
+    private storage:Dictionary<string, any>;
+
+    constructor() {
+        this.storage = new Dictionary<string, any>();
+    };
+
+    public get = (key:string):any => {
+        return this.storage.getValue(key);
+    };
+
+    public set = (key:string, value:any):void => {
+        this.storage.setValue(key, value);
+    };
+
+    public remove = (key:string):void => {
+        if (this.storage.containsKey(key)) {
+            this.storage.remove(key);
+        }
+    };
+
+    public contains = (key:string):boolean => {
+        return this.storage.containsKey(key);
+    };
+}
diff --git a/catalog-ui/src/app/services/category-resource-service.ts b/catalog-ui/src/app/services/category-resource-service.ts
new file mode 100644
index 0000000000..a2e3c61e0a
--- /dev/null
+++ b/catalog-ui/src/app/services/category-resource-service.ts
@@ -0,0 +1,61 @@
+'use strict';
+// import 'angular-resource';
+import {IAppConfigurtaion, IMainCategory, IUserProperties} from "../models";
+import {Categories} from "../models/categories";
+
+// Define an interface of the object you want to use, providing it's properties
+export interface ICategoryResource extends IUserProperties,ng.resource.IResource<ICategoryResource> {
+    name:string;
+    uniqueId:string;
+    subcategories:Array<ICategoryResource>;
+
+    getAllCategories(params?:Object, success?:Function, error?:Function):Categories;
+    $saveSubCategory(params?:Object, success?:Function, error?:Function):any;
+    $deleteSubCategory(params?:Object, success?:Function, error?:Function):any;
+}
+
+// Define your resource, adding the signature of the custom actions
+export interface ICategoryResourceClass extends ng.resource.IResourceClass<ICategoryResource> {
+    getAllCategories(params?:Object, success?:Function, error?:Function):Categories;
+    saveSubCategory(params?:Object, success?:Function, error?:Function):any;
+    deleteSubCategory(params?:Object, success?:Function, error?:Function):any;
+}
+
+export class CategoryResourceService {
+
+    public static getResource = ($resource:ng.resource.IResourceService,
+                                 sdcConfig:IAppConfigurtaion):ICategoryResourceClass => {
+
+        // Define your custom actions here as IActionDescriptor
+        let getAllCategoriesAction:ng.resource.IActionDescriptor = {
+            method: 'GET',
+            isArray: false,
+            url: sdcConfig.api.root + sdcConfig.api.GET_categories
+        };
+        let saveSubCategory:ng.resource.IActionDescriptor = {
+            method: 'POST',
+            isArray: false,
+            url: sdcConfig.api.root + sdcConfig.api.POST_subcategory
+        };
+        let deleteSubCategory:ng.resource.IActionDescriptor = {
+            method: 'DELETE',
+            isArray: false,
+            url: sdcConfig.api.root + sdcConfig.api.POST_subcategory
+        };
+
+
+        let url:string = sdcConfig.api.root + sdcConfig.api.POST_category;
+        let categoryResource:ICategoryResourceClass = <ICategoryResourceClass>$resource(
+            url,
+            {types: '@types', categoryId: '@categoryId'},
+            {
+                getAllCategories: getAllCategoriesAction,
+                saveSubCategory: saveSubCategory,
+                deleteSubCategory: deleteSubCategory
+            }
+        );
+
+        return categoryResource;
+    }
+}
+CategoryResourceService.getResource.$inject = ['$resource', 'sdcConfig'];
diff --git a/catalog-ui/src/app/services/components/component-service.ts b/catalog-ui/src/app/services/components/component-service.ts
new file mode 100644
index 0000000000..1a6b9a8a14
--- /dev/null
+++ b/catalog-ui/src/app/services/components/component-service.ts
@@ -0,0 +1,755 @@
+/*-
+ * ============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 {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";
+
+export interface IComponentService {
+
+    getComponent(id:string);
+    updateComponent(component:Component):ng.IPromise<Component>;
+    changeLifecycleState(component:Component, state:string, userRemarks:any):ng.IPromise<Component> ;
+    validateName(newName:string, subtype?:string):ng.IPromise<IValidate>;
+    createComponent(component:Component):ng.IPromise<Component>;
+    addOrUpdateArtifact(componentId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
+    deleteArtifact(componentId:string, artifact:string, artifactLabel):ng.IPromise<ArtifactModel>;
+    addProperty(componentId:string, property:PropertyModel):ng.IPromise<PropertyModel>;
+    updateProperty(componentId:string, property:PropertyModel):ng.IPromise<PropertyModel>;
+    addAttribute(componentId:string, attribute:AttributeModel):ng.IPromise<AttributeModel>;
+    updateAttribute(componentId:string, attribute:AttributeModel):ng.IPromise<AttributeModel>;
+    deleteProperty(componentId:string, propertyId:string):ng.IPromise<PropertyModel>;
+    deleteAttribute(componentId:string, attributeId:string):ng.IPromise<AttributeModel>;
+    changeResourceInstanceVersion(componentId:string, componentInstanceId:string, componentUid:string):ng.IPromise<ComponentInstance>;
+    updateInstanceArtifact(componentId:string, instanceId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
+    addInstanceArtifact(componentId:string, instanceId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
+    deleteInstanceArtifact(componentId:string, instanceId:string, artifact:string, artifactLabel):ng.IPromise<ArtifactModel>;
+    createComponentInstance(componentId:string, componentInstance:ComponentInstance):ng.IPromise<ComponentInstance>;
+    updateComponentInstance(componentId:string, componentInstance:ComponentInstance):ng.IPromise<ComponentInstance>;
+    updateMultipleComponentInstances(componentId:string, instances:Array<ComponentInstance>):ng.IPromise< Array<ComponentInstance>>;
+    downloadArtifact(componentId:string, artifactId:string):ng.IPromise<IFileDownload>;
+    uploadInstanceEnvFile(componentId:string, instanceId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
+    downloadInstanceArtifact(componentId:string, instanceId:string, artifactId:string):ng.IPromise<IFileDownload>;
+    deleteComponentInstance(componentId:string, componentInstanceId:string):ng.IPromise<ComponentInstance>;
+    createRelation(componentId:string, link:RelationshipModel):ng.IPromise<RelationshipModel>;
+    deleteRelation(componentId:string, link:RelationshipModel):ng.IPromise<RelationshipModel>;
+    getRequirementsCapabilities(componentId:string):ng.IPromise<any>;
+    updateInstanceProperty(componentId:string, property:PropertyModel):ng.IPromise<PropertyModel>;
+    updateInstanceAttribute(componentId:string, attribute:AttributeModel):ng.IPromise<AttributeModel>;
+    getComponentInstancesFilteredByInputsAndProperties(componentId:string, searchText:string):ng.IPromise<Array<ComponentInstance>>
+    getComponentInstanceInputs(componentId:string, instanceId:string, originComponentUid):ng.IPromise<Array<InputModel>>;
+    getComponentInputs(componentId:string):ng.IPromise<Array<InputModel>>;
+    getComponentInstanceInputProperties(componentId:string, instanceId:string, inputId:string):ng.IPromise<Array<PropertyModel>>;
+    getComponentInstanceProperties(componentId:string, instanceId:string):ng.IPromise<Array<PropertyModel>>;
+    getModuleForDisplay(componentId:string, moduleId:string):ng.IPromise<DisplayModule>;
+    getComponentInstanceModule(componentId:string, componentInstanceId:string, moduleId:string):ng.IPromise<DisplayModule>;
+    updateGroupMetadata(componentId:string, group:Module):ng.IPromise<Module>;
+    getComponentInputInputsAndProperties(serviceId:string, input:string):ng.IPromise<InputsAndProperties>;
+    createInputsFromInstancesInputs(serviceId:string, instancesInputsMap:InstancesInputsPropertiesMap):ng.IPromise<Array<InputModel>>;
+    createInputsFromInstancesInputsProperties(resourceId:string, instanceInputsPropertiesMap:InstancesInputsPropertiesMap):ng.IPromise<Array<PropertyModel>>;
+    deleteComponentInput(serviceId:string, inputId:string):ng.IPromise<InputModel>;
+    getArtifactByGroupType(componentId:string, artifactGroupType:string):ng.IPromise<ArtifactGroupModel>;
+    getComponentInstanceArtifactsByGroupType(componentId:string, componentInstanceId:string, artifactGroupType:string):ng.IPromise<ArtifactGroupModel>;
+}
+
+export class ComponentService implements IComponentService {
+
+    static '$inject' = [
+        'Restangular',
+        'sdcConfig',
+        'Sdc.Services.SharingService',
+        '$q',
+        '$base64'
+    ];
+
+    constructor(protected restangular:restangular.IElement,
+                protected sdcConfig:IAppConfigurtaion,
+                protected sharingService:SharingService,
+                protected $q:ng.IQService,
+                protected $base64:any
+               ) {
+
+        this.restangular.setBaseUrl(sdcConfig.api.root + sdcConfig.api.component_api_root);
+        this.restangular.setRequestInterceptor(function (elem, operation) {
+            if (operation === "remove") {
+                return null;
+            }
+            return elem;
+        });
+        //    this.restangular.setDefaultHeaders({'Content-Type': 'application/json; charset=UTF-8'});
+    }
+
+    //this function is override by each service, we need to change this method to abstract when updtaing typescript version
+    protected createComponentObject = (component:Component):Component => {
+        return component;
+    };
+
+    public getComponent = (id:string):ng.IPromise<Component> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(id).get().then((response:Component) => {
+            let component:Component = this.createComponentObject(response);
+            //console.log("Component Loaded successfully : ", component);
+            deferred.resolve(component);
+        }, (err)=> {
+            console.log("Failed to load component with ID: " + id);
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public updateComponent = (component:Component):ng.IPromise<Component> => {
+        // If this is resource
+        if (component instanceof Resource) {
+            let resource:Resource = <Resource>component;
+            if (resource.importedFile) {
+                // Update resource with payload data.
+                return this.updateResourceWithPayload(resource);
+            } else {
+                if (component.csarUUID) {
+                    // Update resource without payload data.
+                    return this.updateResource(component);
+                } else {
+                    // Update resource without payload data (metadata).
+                    return this.updateResourceMetadata(component);
+                }
+            }
+        } else {
+            return this.updateService(component);
+        }
+    };
+
+    private updateService = (component:Component):ng.IPromise<Component> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(component.uniqueId).one("metadata").customPUT(JSON.stringify(component)).then((response:Component) => {
+            let component:Component = this.createComponentObject(response);
+            deferred.resolve(component);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    private updateResource = (component:Component):ng.IPromise<Component> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(component.uniqueId).customPUT(JSON.stringify(component)).then((response:Component) => {
+            let component:Component = this.createComponentObject(response);
+            deferred.resolve(component);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    private updateResourceMetadata = (component:Component):ng.IPromise<Component> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(component.uniqueId).one('metadata').customPUT(JSON.stringify(component)).then((response:Component) => {
+            let component:Component = this.createComponentObject(response);
+            deferred.resolve(component);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    /**
+     * Only resource can be updated with payload data
+     * @param component
+     * @returns {IPromise<T>}
+     */
+    private updateResourceWithPayload = (resource:Resource):ng.IPromise<Component> => {
+        let deferred = this.$q.defer();
+
+        resource.payloadData = resource.importedFile.base64;
+        resource.payloadName = resource.importedFile.filename;
+        let headerObj = this.getHeaderMd5(resource);
+
+        this.restangular.one(resource.uniqueId).customPUT(JSON.stringify(resource), '', {}, headerObj).then((response:Component) => {
+            let componentResult:Component = this.createComponentObject(response);
+            deferred.resolve(componentResult);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+
+        return deferred.promise;
+    };
+
+    public createComponent = (component:Component):ng.IPromise<Component> => {
+        let deferred = this.$q.defer();
+        let headerObj = this.getHeaderMd5(component);
+        this.restangular.customPOST(JSON.stringify(component), '', {}, headerObj).then((response:Component) => {
+            let component:Component = this.createComponentObject(response);
+            deferred.resolve(component);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public validateName = (newName:string, subtype?:string):ng.IPromise<IValidate> => {
+        let deferred = this.$q.defer();
+        this.restangular.one("validate-name").one(newName).get({'subtype': subtype}).then((response:any) => {
+            deferred.resolve(response.plain());
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public changeLifecycleState = (component:Component, state:string, userRemarks:any):ng.IPromise<Component> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(component.uniqueId).one(state).customPOST(userRemarks).then((response:Component) => {
+            this.sharingService.addUuidValue(response.uniqueId, response.uuid);
+            let component:Component = this.createComponentObject(response);
+            deferred.resolve(component);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    // ------------------------------------------------ Artifacts API --------------------------------------------------//
+    public addOrUpdateArtifact = (componentId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let headerObj = {};
+        if (artifact.payloadData) {
+            headerObj = this.getHeaderMd5(artifact);
+        }
+        this.restangular.one(componentId).one("artifacts").customPOST(JSON.stringify(artifact), artifact.uniqueId, {}, headerObj).then((response:any) => {
+            deferred.resolve(response.plain());
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public downloadArtifact = (componentId:string, artifactId:string):ng.IPromise<IFileDownload> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("artifacts").one(artifactId).get().then((response:any) => {
+            deferred.resolve(response.plain());
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public deleteArtifact = (componentId:string, artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("artifacts").one(artifactId).remove({'operation': artifactLabel}).then((response:ArtifactModel) => {
+            deferred.resolve(response);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public getArtifactByGroupType = (componentId:string, artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("artifactsByType").one(artifactGroupType).get().then((response:any) => {
+            var artifacts:ArtifactGroupModel = new ArtifactGroupModel(response.plain());
+            deferred.resolve(artifacts);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public getComponentInstanceArtifactsByGroupType = (componentId:string, componentInstanceId:string, artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstances").one(componentInstanceId).one("artifactsByType").one(artifactGroupType).get().then((response:any) => {
+            var artifacts:ArtifactGroupModel = new ArtifactGroupModel(response.plain());
+            deferred.resolve(artifacts);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+
+    // ------------------------------------------------ Properties API --------------------------------------------------//
+    public addProperty = (componentId:string, property:PropertyModel):ng.IPromise<PropertyModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("properties").customPOST(property.convertToServerObject()).then((response:any) => {
+            let property:PropertyModel = new PropertyModel(response[Object.keys(response)[0]]);
+            deferred.resolve(property);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public updateProperty = (componentId:string, property:PropertyModel):ng.IPromise<PropertyModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("properties").one(property.uniqueId).customPUT(property.convertToServerObject()).then((response:any) => {
+            let property:PropertyModel = new PropertyModel(response[Object.keys(response)[0]]);
+            deferred.resolve(property);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public deleteProperty = (componentId:string, propertyId:string):ng.IPromise<PropertyModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("properties").one(propertyId).remove().then((response:any) => {
+            deferred.resolve(response);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    // ------------------------------------------------ Attributes API --------------------------------------------------//
+    public addAttribute = (componentId:string, attribute:AttributeModel):ng.IPromise<AttributeModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("attributes").customPOST(attribute.convertToServerObject()).then((response:any) => {
+            let attribute:AttributeModel = new AttributeModel(response);
+            deferred.resolve(attribute);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public updateAttribute = (componentId:string, attribute:AttributeModel):ng.IPromise<AttributeModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("attributes").one(attribute.uniqueId).customPUT(attribute.convertToServerObject()).then((response:any) => {
+            let attribute:AttributeModel = new AttributeModel(response);
+            deferred.resolve(attribute);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public deleteAttribute = (componentId:string, attributeId:string):ng.IPromise<AttributeModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("attributes").one(attributeId).remove().then((response:any) => {
+            deferred.resolve(response);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    // ------------------------------------------------ Component Instances API --------------------------------------------------//
+
+    public createComponentInstance = (componentId:string, componentInstance:ComponentInstance):ng.IPromise<ComponentInstance> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance").customPOST(JSON.stringify(componentInstance)).then((response:any) => {
+            let componentInstance:ComponentInstance = ComponentInstanceFactory.createComponentInstance(response);
+            console.log("Component Instance created", componentInstance);
+            deferred.resolve(componentInstance);
+        }, (err)=> {
+            console.log("Failed to create componentInstance. With Name: " + componentInstance.name);
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public updateComponentInstance = (componentId:string, componentInstance:ComponentInstance):ng.IPromise<ComponentInstance> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance").one(componentInstance.uniqueId).customPOST(JSON.stringify(componentInstance)).then((response:any) => {
+            let componentInstance:ComponentInstance = ComponentInstanceFactory.createComponentInstance(response);
+            console.log("Component Instance was updated", componentInstance);
+            deferred.resolve(componentInstance);
+        }, (err)=> {
+            console.log("Failed to update componentInstance. With ID: " + componentInstance.uniqueId + "Name: " + componentInstance.name);
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public updateMultipleComponentInstances = (componentId:string, instances:Array<ComponentInstance>):ng.IPromise<Array<ComponentInstance>> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance/multipleComponentInstance").customPOST(JSON.stringify(instances)).then((response:any) => {
+            console.log("Multiple Component Instances was updated", response);
+            let updateInstances:Array<ComponentInstance> = new Array<ComponentInstance>();
+            _.forEach(response, (componentInstance:ComponentInstance) => {
+                let updatedComponentInstance:ComponentInstance = ComponentInstanceFactory.createComponentInstance(componentInstance);
+                updateInstances.push(updatedComponentInstance);
+            });
+            deferred.resolve(updateInstances);
+        }, (err)=> {
+            console.log("Failed to update Multiple componentInstance.");
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public deleteComponentInstance = (componentId:string, componentInstanceId:string):ng.IPromise<ComponentInstance> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance").one(componentInstanceId).remove().then(() => {
+            console.log("Component Instance was deleted");
+            deferred.resolve();
+        }, (err)=> {
+            console.log("Failed to delete componentInstance. With ID: " + componentInstanceId);
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public changeResourceInstanceVersion = (componentId:string, componentInstanceId:string, componentUid:string):ng.IPromise<ComponentInstance> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance").one(componentInstanceId).one("changeVersion").customPOST({'componentUid': componentUid}).then((response:any) => {
+            let componentInstance:ComponentInstance = ComponentInstanceFactory.createComponentInstance(response);
+            deferred.resolve(componentInstance);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public downloadInstanceArtifact = (componentId:string, instanceId:string, artifactId:string):ng.IPromise<IFileDownload> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstances").one(instanceId).one("artifacts").one(artifactId).get().then((response:any) => {
+            deferred.resolve(response.plain());
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public updateInstanceArtifact = (componentId:string, instanceId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let headerObj = {};
+        if (artifact.payloadData) {
+            headerObj = this.getHeaderMd5(artifact);
+        }
+        this.restangular.one(componentId).one("resourceInstance").one(instanceId).one("artifacts").customPOST(JSON.stringify(artifact), artifact.uniqueId, {}, headerObj).then((response:any) => {
+            let newArtifact = new ArtifactModel(response);
+            deferred.resolve(newArtifact);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public addInstanceArtifact = (componentId:string, instanceId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let headerObj = {};
+        if (artifact.payloadData) {
+            headerObj = this.getHeaderMd5(artifact);
+        }
+        this.restangular.one(componentId).one("resourceInstance").one(instanceId).one("artifacts").customPOST(JSON.stringify(artifact), artifact.uniqueId, {}, headerObj).then((response:any) => {
+            let artifact:ArtifactModel = new ArtifactModel(response.plain());
+            deferred.resolve(artifact);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public deleteInstanceArtifact = (componentId:string, instanceId:string, artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance").one(instanceId).one("artifacts").one(artifactId).remove({'operation': artifactLabel}).then((response:ArtifactModel) => {
+            deferred.resolve(response);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public uploadInstanceEnvFile = (componentId:string, instanceId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let headerObj = {};
+        if (artifact.payloadData) {
+            headerObj = this.getHeaderMd5(artifact);
+        }
+        this.restangular.one(componentId).one("resourceInstance").one(instanceId).one("artifacts").customPOST(JSON.stringify(artifact), artifact.uniqueId, {}, headerObj).then((response:any) => {
+            let newArtifact = new ArtifactModel(response);
+            deferred.resolve(newArtifact);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public updateInstanceProperty = (componentId:string, property:PropertyModel):ng.IPromise<PropertyModel> => {
+        let deferred = this.$q.defer();
+        let instanceId = property.resourceInstanceUniqueId;
+        this.restangular.one(componentId).one("resourceInstance").one(instanceId).one("property").customPOST(JSON.stringify(property)).then((response:any) => {
+            let newProperty = new PropertyModel(response);
+            newProperty.readonly = true;
+            newProperty.resourceInstanceUniqueId = instanceId;
+            deferred.resolve(newProperty);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public updateInstanceAttribute = (componentId:string, attribute:AttributeModel):ng.IPromise<AttributeModel> => {
+        let deferred = this.$q.defer();
+        let instanceId = attribute.resourceInstanceUniqueId;
+        this.restangular.one(componentId).one("resourceInstance").one(instanceId).one("attribute").customPOST(JSON.stringify(attribute)).then((response:any) => {
+            let newAttribute = new AttributeModel(response);
+            newAttribute.readonly = true;
+            newAttribute.resourceInstanceUniqueId = instanceId;
+            deferred.resolve(newAttribute);
+        }, (err)=> {
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public createRelation = (componentId:string, link:RelationshipModel):ng.IPromise<RelationshipModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance").one("associate").customPOST(JSON.stringify(link)).then((response:any) => {
+            let relation:RelationshipModel = new RelationshipModel(response.plain());
+            console.log("Link created successfully ", relation);
+            deferred.resolve(relation);
+        }, (err)=> {
+            console.log("Failed to create Link From: " + link.fromNode + "To: " + link.toNode);
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public deleteRelation = (componentId:string, link:RelationshipModel):ng.IPromise<RelationshipModel> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance").one("dissociate").customPUT(JSON.stringify(link)).then((response:any) => {
+            let relation:RelationshipModel = new RelationshipModel(response);
+            console.log("Link deleted successfully ", relation);
+            deferred.resolve(relation);
+        }, (err)=> {
+            console.log("Failed to delete Link From: " + link.fromNode + "To: " + link.toNode);
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public getRequirementsCapabilities = (componentId:string):ng.IPromise<any> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("requirmentsCapabilities").get().then((response:any) => {
+            console.log("Component requirement capabilities recived: ", response);
+            deferred.resolve(response);
+        }, (err)=> {
+            console.log("Failed to get requirements & capabilities");
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public getModuleForDisplay = (componentId:string, moduleId:string):ng.IPromise<DisplayModule> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("groups").one(moduleId).get().then((response:any) => {
+            console.log("module loaded successfully: ", response);
+            let module:DisplayModule = new DisplayModule(response);
+            deferred.resolve(module);
+        }, (err)=> {
+            console.log("Failed to get module with id: ", moduleId);
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public getComponentInstanceModule = (componentId:string, componentInstanceId:string, moduleId:string):ng.IPromise<Module> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("resourceInstance").one(componentInstanceId).one("groupInstance").one(moduleId).get().then((response:any) => {
+            console.log("module loaded successfully: ", response);
+            let module:DisplayModule = new DisplayModule(response);
+            deferred.resolve(module);
+        }, (err)=> {
+            console.log("Failed to get module with id: ", moduleId);
+            deferred.reject(err);
+        });
+        return deferred.promise;
+    };
+
+    public getComponentInstancesFilteredByInputsAndProperties = (componentId:string, searchText?:string):ng.IPromise<Array<ComponentInstance>> => {
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("componentInstances").get({'searchText': searchText}).then((response:any) => {
+            console.log("component instances return successfully: ", response);
+            let componentInstances:Array<ComponentInstance> = CommonUtils.initComponentInstances(response);
+            deferred.resolve(componentInstances);
+        }, (err) => {
+            console.log("Failed to get component instances of component with id: " + componentId);
+            deferred.reject(err);
+        });
+
+        return deferred.promise;
+    };
+
+    public getComponentInstanceInputs = (componentId:string, instanceId:string, originComponentUid):ng.IPromise<Array<InputModel>> => {
+
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("componentInstances").one(instanceId).one(originComponentUid).one("inputs").get().then((response:any) => {
+            console.log("component instance input return successfully: ", response);
+            let inputsArray:Array<InputModel> = new Array<InputModel>();
+            _.forEach(response, (inputObj:InputModel) => {
+                inputsArray.push(new InputModel(inputObj));
+            });
+            deferred.resolve(inputsArray);
+        }, (err) => {
+            console.log("Failed to get component instance input with id: " + instanceId);
+            deferred.reject(err);
+        });
+
+        return deferred.promise;
+    };
+
+    public getComponentInputs = (componentId:string):ng.IPromise<Array<InputModel>> => {
+
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("inputs").get().then((response:any) => {
+            console.log("component inputs return successfully: ", response);
+            let inputsArray:Array<InputModel> = new Array<InputModel>();
+            _.forEach(response, (inputObj:InputModel) => {
+                inputsArray.push(new InputModel(inputObj));
+            });
+            deferred.resolve(inputsArray);
+        }, (err) => {
+            console.log("Failed to get component inputs for component with id: " + componentId);
+            deferred.reject(err);
+        });
+
+        return deferred.promise;
+    };
+
+    public getComponentInstanceInputProperties = (componentId:string, instanceId:string, inputId:string):ng.IPromise<Array<PropertyModel>> => {
+
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("componentInstances").one(instanceId).one(inputId).one("properties").get().then((response:any) => {
+            console.log("component instance input properties return successfully: ", response);
+            let propertiesArray:Array<PropertyModel> = new Array<PropertyModel>();
+            _.forEach(response, (propertyObj:PropertyModel) => {
+                propertiesArray.push(new PropertyModel(propertyObj));
+            });
+            deferred.resolve(propertiesArray);
+        }, (err) => {
+            console.log("Failed to get component instance input properties with instanceId: " + instanceId + "and input id: " + inputId);
+            deferred.reject(err);
+        });
+
+        return deferred.promise;
+    };
+
+
+    public getComponentInstanceProperties = (componentId:string, instanceId:string):ng.IPromise<Array<PropertyModel>> => {
+
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("componentInstances").one(instanceId).one("properties").get().then((response:any) => {
+            console.log("component instance  properties return successfully: ", response);
+            let propertiesArray:Array<PropertyModel> = new Array<PropertyModel>();
+            _.forEach(response, (propertyObj:PropertyModel) => {
+                propertiesArray.push(new PropertyModel(propertyObj));
+            });
+            deferred.resolve(propertiesArray);
+        }, (err) => {
+            console.log("Failed to get component instance  properties with instanceId: " + instanceId);
+            deferred.reject(err);
+        });
+
+        return deferred.promise;
+    };
+
+    public updateGroupMetadata = (componentId:string, group:Module):ng.IPromise<Module> => {
+
+        let deferred = this.$q.defer();
+        this.restangular.one(componentId).one("groups").one(group.uniqueId).one("metadata").customPUT(JSON.stringify(group)).then((response:Module) => {
+            console.log("group metadata updated successfully: ", response);
+            let updatedGroup:Module = new Module(response);
+
+            deferred.resolve(updatedGroup);
+        }, (err) => {
+            console.log("Failed to update group metadata for component: " + componentId + " for group with id: " + group.uniqueId);
+            deferred.reject(err);
+        });
+
+        return deferred.promise;
+    };
+
+    public getComponentInputInputsAndProperties = (serviceId:string, inputId:string):ng.IPromise<InputsAndProperties> => {
+        let defer = this.$q.defer<any>();
+        this.restangular.one(serviceId).one("inputs").one(inputId).get().then((response:InputsAndProperties) => {
+
+            let inputsArray:Array<InputModel> = new Array<InputModel>();
+            _.forEach(response.inputs, (inputObj:InputModel) => {
+                inputsArray.push(new InputModel(inputObj));
+            });
+
+            let propertiesArray:Array<PropertyModel> = new Array<PropertyModel>();
+            _.forEach(response.properties, (property:PropertyModel) => {
+                propertiesArray.push(new PropertyModel(property));
+            });
+
+            defer.resolve(new InputsAndProperties(inputsArray, propertiesArray));
+        }, (err)=> {
+            console.log("failed to get inputs of input : ", err);
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+
+    createInputsFromInstancesInputsProperties = (resourceId:string, instancePropertyMap:InstancesInputsPropertiesMap):ng.IPromise<Array<PropertyModel>> => {
+        let defer = this.$q.defer<any>();
+        this.restangular.one(resourceId).one("create/properties").customPOST(instancePropertyMap).then((response:any) => {
+            let inputsArray:Array<PropertyModel> = new Array<PropertyModel>();
+            _.forEach(response, (inputObj:PropertyModel) => {
+                inputsArray.push(new PropertyModel(inputObj));
+            });
+            defer.resolve(inputsArray);
+        }, (err)=> {
+            console.log("failed to create service inputs from VF instances inputs : ", err);
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+
+    createInputsFromInstancesInputs = (serviceId:string, instancesMap:InstancesInputsPropertiesMap):ng.IPromise<Array<InputModel>> => {
+        let defer = this.$q.defer<any>();
+        this.restangular.one(serviceId).one("create/inputs").customPOST(instancesMap).then((response:any) => {
+            let inputsArray:Array<InputModel> = new Array<InputModel>();
+            _.forEach(response, (inputObj:InputModel) => {
+                inputsArray.push(new InputModel(inputObj));
+            });
+            defer.resolve(inputsArray);
+        }, (err)=> {
+            console.log("failed to create service inputs from VF instances inputs : ", err);
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+
+    deleteComponentInput = (serviceId:string, inputId:string):ng.IPromise<InputModel> => {
+        let defer = this.$q.defer();
+        this.restangular.one(serviceId).one("delete").one(inputId).one("input").remove().then((response:any) => {
+            let inputToDelete = new InputModel(response);
+            defer.resolve(inputToDelete);
+        }, (err)=> {
+            console.log("failed to delete input from service: ", err);
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+
+    private getHeaderMd5 = (object:any):any => {
+        let headerObj = {};
+        // This is ugly workaround!!!
+        // The md5 result is not correct if we do not add the line JSON.stringify(resource); twice.
+        JSON.stringify(object);
+        let componentString:string = JSON.stringify(object);
+        let md5Result = md5(componentString).toLowerCase();
+        headerObj = {'Content-MD5': this.$base64.encode(md5Result)};
+        return headerObj;
+    };
+
+}
diff --git a/catalog-ui/src/app/services/components/product-service.ts b/catalog-ui/src/app/services/components/product-service.ts
new file mode 100644
index 0000000000..c1a14478d2
--- /dev/null
+++ b/catalog-ui/src/app/services/components/product-service.ts
@@ -0,0 +1,35 @@
+/**
+ * Created by obarda on 2/8/2016.
+ */
+'use strict';
+import {IComponentService, ComponentService} from "./component-service";
+import {SharingService} from "../sharing-service";
+import {Product, Component, IAppConfigurtaion} from "../../models";
+
+export interface IProductService extends IComponentService {
+
+}
+
+export class ProductService extends ComponentService implements IProductService {
+
+    static '$inject' = [
+        'Restangular',
+        'sdcConfig',
+        'Sdc.Services.SharingService',
+        '$q',
+        '$base64'
+    ];
+
+    constructor(protected restangular:restangular.IElement,
+                protected sdcConfig:IAppConfigurtaion,
+                protected sharingService:SharingService,
+                protected $q:ng.IQService,
+                protected $base64:any) {
+        super(restangular, sdcConfig, sharingService, $q, $base64);
+        this.restangular = restangular.one("products");
+    }
+
+    createComponentObject = (component:Component):Component => {
+        return new Product(this, this.$q, <Product>component);
+    };
+}
diff --git a/catalog-ui/src/app/services/components/resource-service.ts b/catalog-ui/src/app/services/components/resource-service.ts
new file mode 100644
index 0000000000..470f1e2061
--- /dev/null
+++ b/catalog-ui/src/app/services/components/resource-service.ts
@@ -0,0 +1,52 @@
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {IComponentService, ComponentService} from "./component-service";
+import {PropertyModel, IAppConfigurtaion, Resource, Component} from "../../models";
+import {SharingService} from "../sharing-service";
+
+export interface IResourceService extends IComponentService {
+    updateResourceGroupProperties(uniqueId:string, groupId:string, properties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>>
+}
+
+export class ResourceService extends ComponentService implements IResourceService {
+
+    static '$inject' = [
+        'Restangular',
+        'sdcConfig',
+        'Sdc.Services.SharingService',
+        '$q',
+        '$base64'
+    ];
+
+    constructor(protected restangular:restangular.IElement,
+                protected sdcConfig:IAppConfigurtaion,
+                protected sharingService:SharingService,
+                protected $q:ng.IQService,
+                protected $base64:any
+                ) {
+        super(restangular, sdcConfig, sharingService, $q, $base64);
+
+        this.restangular = restangular.one("resources");
+    }
+
+    createComponentObject = (component:Component):Component => {
+        return new Resource(this, this.$q, <Resource>component);
+    };
+
+
+    updateResourceGroupProperties = (uniqueId:string, groupId:string, properties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>> => {
+        let defer = this.$q.defer<Array<PropertyModel>>();
+        this.restangular.one(uniqueId).one("groups").one(groupId).one('properties').customPUT(JSON.stringify(properties)).then((updatesProperties:any) => {
+            let propertiesArray:Array<PropertyModel> = new Array<PropertyModel>();
+            _.forEach(updatesProperties, (propertyObj:PropertyModel) => {
+                propertiesArray.push(new PropertyModel(propertyObj));
+            });
+            defer.resolve(propertiesArray);
+        }, (err)=> {
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+}
diff --git a/catalog-ui/src/app/services/components/service-service.ts b/catalog-ui/src/app/services/components/service-service.ts
new file mode 100644
index 0000000000..f0fe90bf7f
--- /dev/null
+++ b/catalog-ui/src/app/services/components/service-service.ts
@@ -0,0 +1,86 @@
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {IComponentService, ComponentService} from "./component-service";
+import {Distribution, DistributionComponent, Service, PropertyModel, Component, IAppConfigurtaion} from "app/models";
+import {SharingService} from "../sharing-service";
+
+export interface IServiceService extends IComponentService {
+    getDistributionsList(uuid:string):ng.IPromise<Array<Distribution>>;
+    getDistributionComponents(distributionId:string):ng.IPromise<Array<DistributionComponent>>;
+    markAsDeployed(serviceId:string, distributionId:string):ng.IPromise<any>;
+    updateGroupInstanceProperties(serviceId:string, resourceInstanceId:string, groupInstanceId:string, groupInstanceProperties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>>;
+}
+
+export class ServiceService extends ComponentService implements IServiceService {
+
+    static '$inject' = [
+        'Restangular',
+        'sdcConfig',
+        'Sdc.Services.SharingService',
+        '$q',
+        '$base64'
+    ];
+
+    public distribution:string = "distribution";
+
+    constructor(protected restangular:restangular.IElement,
+                protected sdcConfig:IAppConfigurtaion,
+                protected sharingService:SharingService,
+                protected $q:ng.IQService,
+                protected $base64:any) {
+        super(restangular, sdcConfig, sharingService, $q, $base64);
+
+        this.restangular = restangular.one("services");
+    }
+
+    getDistributionsList = (uuid:string):ng.IPromise<Array<Distribution>> => {
+        let defer = this.$q.defer<Array<Distribution>>();
+        this.restangular.one(uuid).one("distribution").get().then((distributions:any) => {
+            defer.resolve(<Array<Distribution>> distributions.distributionStatusOfServiceList);
+        }, (err)=> {
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+
+    getDistributionComponents = (distributionId:string):ng.IPromise<Array<DistributionComponent>> => {
+        let defer = this.$q.defer<Array<DistributionComponent>>();
+        this.restangular.one("distribution").one(distributionId).get().then((distributions:any) => {
+            defer.resolve(<Array<DistributionComponent>> distributions.distributionStatusList);
+        }, (err)=> {
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+
+    markAsDeployed = (serviceId:string, distributionId:string):ng.IPromise<any> => {
+        let defer = this.$q.defer<any>();
+        this.restangular.one(serviceId).one("distribution").one(distributionId).one("markDeployed").customPOST().then((result:any) => {
+            defer.resolve(result);
+        }, (err)=> {
+
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+
+    createComponentObject = (component:Component):Component => {
+        return new Service(this, this.$q, <Service>component);
+    };
+
+    updateGroupInstanceProperties = (serviceId:string, resourceInstanceId:string, groupInstanceId:string, groupInstanceProperties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>> => {
+        let defer = this.$q.defer<Array<PropertyModel>>();
+        this.restangular.one(serviceId).one("resourceInstance").one(resourceInstanceId).one('groupInstance').one(groupInstanceId).customPUT(JSON.stringify(groupInstanceProperties)).then((updatedProperties:any) => {
+            let propertiesArray:Array<PropertyModel> = new Array<PropertyModel>();
+            _.forEach(updatedProperties, (propertyObj:PropertyModel) => {
+                propertiesArray.push(new PropertyModel(propertyObj));
+            });
+            defer.resolve(propertiesArray);
+        }, (err)=> {
+            defer.reject(err);
+        });
+        return defer.promise;
+    };
+}
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
new file mode 100644
index 0000000000..0abdbcfcb3
--- /dev/null
+++ b/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
@@ -0,0 +1,120 @@
+/*-
+ * ============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 3/13/2016.
+ */
+'use strict';
+import {LeftPaletteComponent} from "../../../models/components/displayComponent";
+import {Component} from "../../../models/components/component";
+import {EventListenerService} from "../../event-listener-service";
+import {ComponentFactory} from "../../../utils/component-factory";
+import {IAppConfigurtaion} from "../../../models/app-config";
+import {ResourceType, ComponentType, EVENTS} from "../../../utils/constants";
+import {ComponentMetadata} from "../../../models/component-metadata";
+
+export class LeftPaletteDataObject {
+    displayLeftPanelComponents:Array<LeftPaletteComponent>;
+    onFinishLoadingEvent:string;
+
+    constructor(onFinishEventListener:string) {
+
+        this.displayLeftPanelComponents = new Array<LeftPaletteComponent>();
+        this.onFinishLoadingEvent = onFinishEventListener;
+    }
+}
+
+export class LeftPaletteLoaderService {
+
+    static '$inject' = [
+        'Restangular',
+        'sdcConfig',
+        '$q',
+        'ComponentFactory',
+        'EventListenerService'
+
+    ];
+
+    constructor(protected restangular:restangular.IElement,
+                protected sdcConfig:IAppConfigurtaion,
+                protected $q:ng.IQService,
+                protected ComponentFactory:ComponentFactory,
+                protected EventListenerService:EventListenerService) {
+
+        this.restangular.setBaseUrl(sdcConfig.api.root + sdcConfig.api.component_api_root);
+      
+    }
+
+    private serviceLeftPaletteData:LeftPaletteDataObject;
+    private resourceLeftPaletteData:LeftPaletteDataObject;
+    private productLeftPaletteData:LeftPaletteDataObject;
+    private vlData:LeftPaletteDataObject;
+
+    public loadLeftPanel = (componentType: string):void => {
+        this.serviceLeftPaletteData = new LeftPaletteDataObject(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT);
+        this.resourceLeftPaletteData = new LeftPaletteDataObject(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT);
+        this.updateComponentLeftPalette(componentType);
+    }
+
+
+    private getTypeUrl = (componentType:string):string => {
+        return ComponentType.PRODUCT === componentType ? "services" : "resources";
+    };
+
+    private onFinishLoading = (componentType:string, leftPaletteData:LeftPaletteDataObject):void => {
+        this.EventListenerService.notifyObservers(leftPaletteData.onFinishLoadingEvent);
+    };
+
+    private updateLeftPalette = (componentType, componentInternalType:string, leftPaletteData:LeftPaletteDataObject):void => {
+
+        this.restangular.one(this.getTypeUrl(componentType)).one('/latestversion/notabstract/metadata').get({'internalComponentType': componentInternalType}).then((leftPaletteComponentMetadata:Array<ComponentMetadata>) => {
+            _.forEach(leftPaletteComponentMetadata, (componentMetadata:ComponentMetadata) => {
+                leftPaletteData.displayLeftPanelComponents.push(new LeftPaletteComponent(componentMetadata));
+            });
+            this.onFinishLoading(componentType, leftPaletteData);
+        });
+    };
+
+    public getLeftPanelComponentsForDisplay = (componentType:string):Array<LeftPaletteComponent> => {
+        switch (componentType) {
+            case ComponentType.SERVICE:
+                return this.serviceLeftPaletteData.displayLeftPanelComponents;
+            case ComponentType.PRODUCT:
+                return this.productLeftPaletteData.displayLeftPanelComponents;
+            default:
+                return this.resourceLeftPaletteData.displayLeftPanelComponents;
+        }
+    };
+
+    public updateComponentLeftPalette = (componentType):void => {
+        switch (componentType) {
+            case ResourceType.VL:
+                this.updateLeftPalette(ComponentType.RESOURCE, ResourceType.VL, this.vlData);
+                break;
+            case ComponentType.SERVICE:
+                this.updateLeftPalette(ComponentType.SERVICE, ComponentType.SERVICE, this.serviceLeftPaletteData);
+                break;
+            case ComponentType.PRODUCT:
+                this.updateLeftPalette(ComponentType.PRODUCT, ComponentType.SERVICE, this.productLeftPaletteData);
+                break;
+            default:
+                this.updateLeftPalette(ComponentType.RESOURCE, ResourceType.VF, this.resourceLeftPaletteData);
+        }
+    };
+}
diff --git a/catalog-ui/src/app/services/configuration-ui-service.ts b/catalog-ui/src/app/services/configuration-ui-service.ts
new file mode 100644
index 0000000000..92da0a50ed
--- /dev/null
+++ b/catalog-ui/src/app/services/configuration-ui-service.ts
@@ -0,0 +1,25 @@
+'use strict'
+import {IAppConfigurtaion, IApi} from "../models/app-config";
+
+interface IConfigurationUiService {
+    getConfigurationUi():ng.IPromise<any>;
+}
+
+export class ConfigurationUiService implements IConfigurationUiService {
+
+    static '$inject' = ['$http', '$q', 'sdcConfig'];
+    private api:IApi;
+
+    constructor(private $http:ng.IHttpService, private $q:ng.IQService, sdcConfig:IAppConfigurtaion) {
+        this.api = sdcConfig.api;
+    }
+
+    public getConfigurationUi = ():ng.IPromise<any> => {
+        let defer = this.$q.defer<any>();
+        this.$http.get(this.api.root + this.api.GET_configuration_ui)
+            .then((result:any) => {
+                defer.resolve(result.data);
+            });
+        return defer.promise;
+    }
+}
diff --git a/catalog-ui/src/app/services/cookie-service.ts b/catalog-ui/src/app/services/cookie-service.ts
new file mode 100644
index 0000000000..8f88835c18
--- /dev/null
+++ b/catalog-ui/src/app/services/cookie-service.ts
@@ -0,0 +1,72 @@
+'use strict';
+import {IAppConfigurtaion, ICookie} from "../models/app-config";
+
+interface ICookieService {
+    getUserId():string;
+    getFirstName():string;
+    getLastName():string;
+    getEmail():string;
+    getUserIdSuffix():string;
+}
+
+export class CookieService implements ICookieService {
+
+    static '$inject' = ['sdcConfig', '$document'];
+    private cookie:ICookie;
+    private cookiePrefix:string;
+
+
+    constructor(sdcConfig:IAppConfigurtaion, private $document) {
+        this.cookie = sdcConfig.cookie;
+
+        this.cookiePrefix = '';
+        let junctionName:string = this.getCookieByName(this.cookie.junctionName);
+        if ((junctionName !== null) && (junctionName !== '')) {
+            this.cookiePrefix = this.cookie.prefix + junctionName + '!';
+        }
+    }
+
+    private getCookieByName = (cookieName:string):string => {
+        cookieName += '=';
+        let cookies:Array<string> = this.$document[0].cookie.split(';');
+        let cookieVal:string = '';
+        cookies.forEach((cookie:string) => {
+            while (cookie.charAt(0) === ' ') {
+                cookie = cookie.substring(1);
+            }
+            if (cookie.indexOf(cookieName) === 0) {
+                cookieVal = cookie.substring(cookieName.length, cookie.length);
+                return;
+            }
+        });
+        return cookieVal;
+    };
+
+    public getUserIdSuffix = ():string => {
+        return this.cookie.userIdSuffix;
+    };
+
+    public getUserId = ():string => {
+        let userIdCookieName:string = this.cookiePrefix + this.cookie.userIdSuffix;
+        let userId:string = this.getCookieByName(userIdCookieName);
+        return userId;
+    };
+
+    public getFirstName = ():string => {
+        let firstNameCookieName:string = this.cookiePrefix + this.cookie.userFirstName;
+        let firstName:string = this.getCookieByName(firstNameCookieName);
+        return firstName;
+    };
+
+    public getLastName = ():string => {
+        let lastNameCookieName:string = this.cookiePrefix + this.cookie.userLastName;
+        let lastName:string = this.getCookieByName(lastNameCookieName);
+        return lastName;
+    };
+
+    public getEmail = ():string => {
+        let emailCookieName:string = this.cookiePrefix + this.cookie.userEmail;
+        let email:string = this.getCookieByName(emailCookieName);
+        return email;
+    }
+}
diff --git a/catalog-ui/src/app/services/data-types-service.ts b/catalog-ui/src/app/services/data-types-service.ts
new file mode 100644
index 0000000000..1c6ac07fdc
--- /dev/null
+++ b/catalog-ui/src/app/services/data-types-service.ts
@@ -0,0 +1,125 @@
+'use strict';
+import { DataTypePropertyModel } from "../models/data-type-properties";
+import {ComponentInstance, InputModel, DataTypesMap, PropertyModel, InputPropertyBase, IAppConfigurtaion, SchemaProperty} from "../models";
+import {PROPERTY_DATA} from "../utils/constants";
+
+export interface IDataTypesService {
+
+    dataTypes:DataTypesMap; //Data type map
+    selectedPropertiesName:string;
+    selectedInput:PropertyModel;
+    alreadySelectedProperties:Array<InputPropertyBase>;
+    selectedInstance:ComponentInstance;
+    selectedComponentInputs:Array<InputModel>;
+    //declare methods
+    initDataTypes():void;
+    getAllDataTypes():DataTypesMap;
+    getFirsLevelOfDataTypeProperties(dataTypeName:string):Array<DataTypePropertyModel>;
+    isDataTypeForSchemaType(property:SchemaProperty):boolean;
+    isDataTypeForPropertyType(property:PropertyModel):boolean;
+    isDataTypeForDataTypePropertyType(property:DataTypePropertyModel):boolean;
+}
+
+export class DataTypesService implements IDataTypesService {
+
+    static '$inject' = [
+        'sdcConfig',
+        '$q',
+        '$http'
+    ];
+
+    constructor(private sdcConfig:IAppConfigurtaion,
+                private $q:ng.IQService,
+                private $http:ng.IHttpService) {
+
+    }
+
+    dataTypes:DataTypesMap; //Data type map
+    selectedPropertiesName:string;
+    selectedInput:PropertyModel;
+    alreadySelectedProperties:Array<InputPropertyBase>;
+    selectedInstance:ComponentInstance;
+    selectedComponentInputs:Array<InputModel>;
+
+    public initDataTypes = ():void => {
+        this.$http({
+            url: this.sdcConfig.api.root + this.sdcConfig.api.component_api_root + "dataTypes",
+            method: "get"
+        }).then((response:any) => {
+            this.dataTypes = response.data;
+            delete this.dataTypes['tosca.datatypes.Root'];
+        });
+    };
+
+    public getAllDataTypes = ():DataTypesMap => {
+        return this.dataTypes;
+    };
+
+    //if the dt derived from simple- return the first parent type, else- return null
+    private getTypeForDataTypeDerivedFromSimple = (dataTypeName:string):string => {
+        /////////temporary hack for tosca primitives///////////////////////
+        if (!this.dataTypes[dataTypeName]) {
+            return 'string';
+        }
+        ///////////////////////////////////////////////////////////////////
+        if (this.dataTypes[dataTypeName].derivedFromName == "tosca.datatypes.Root" || this.dataTypes[dataTypeName].properties) {
+            return null;
+        }
+        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.dataTypes[dataTypeName].derivedFromName) > -1) {
+            return this.dataTypes[dataTypeName].derivedFromName
+        }
+        return this.getTypeForDataTypeDerivedFromSimple(this.dataTypes[dataTypeName].derivedFromName);
+    };
+
+
+    //return list of data type properties and all its parents properties
+    //(not include the properties of its properties, in case this data type has not primitive properties)
+    public getFirsLevelOfDataTypeProperties = (dataTypeName:string):Array<DataTypePropertyModel> => {
+        let properties = this.dataTypes[dataTypeName].properties || [];
+        if (this.dataTypes[dataTypeName].derivedFromName != "tosca.datatypes.Root") {
+            properties = this.getFirsLevelOfDataTypeProperties(this.dataTypes[dataTypeName].derivedFromName).concat(properties);
+        }
+        return properties;
+    };
+
+    //return false when type= data type (=not simple type) that not derived from simple type
+    public isDataTypeForSchemaType = (property:SchemaProperty):boolean=> {
+        property.simpleType = "";
+        if (property.type && PROPERTY_DATA.TYPES.indexOf(property.type) > -1) {
+            return false;
+        }
+        let simpleType = this.getTypeForDataTypeDerivedFromSimple(property.type);
+        if (simpleType) {
+            property.simpleType = simpleType;
+            return false;
+        }
+        return true;
+    };
+
+    public isDataTypeForPropertyType = (property:PropertyModel):boolean=> {
+        property.simpleType = "";
+        if (property.type && PROPERTY_DATA.TYPES.indexOf(property.type) > -1) {
+            return false;
+        }
+        let simpleType = this.getTypeForDataTypeDerivedFromSimple(property.type);
+        if (simpleType) {
+            property.simpleType = simpleType;
+            return false;
+        }
+        return true;
+    };
+
+
+    public isDataTypeForDataTypePropertyType = (property:DataTypePropertyModel):boolean=> {
+        property.simpleType = "";
+        if (property.type && PROPERTY_DATA.TYPES.indexOf(property.type) > -1) {
+            return false;
+        }
+        let simpleType = this.getTypeForDataTypeDerivedFromSimple(property.type);
+        if (simpleType) {
+            property.simpleType = simpleType;
+            return false;
+        }
+        return true;
+    };
+}
diff --git a/catalog-ui/src/app/services/ecomp-service.ts b/catalog-ui/src/app/services/ecomp-service.ts
new file mode 100644
index 0000000000..2703a50fc3
--- /dev/null
+++ b/catalog-ui/src/app/services/ecomp-service.ts
@@ -0,0 +1,30 @@
+'use strict';
+import {IAppConfigurtaion, IApi} from "../models/app-config";
+
+interface IEcompHeaderService {
+    getMenuItems(userId):ng.IPromise<Array<any>>;
+}
+
+export class EcompHeaderService implements IEcompHeaderService {
+    static '$inject' = ['$http', '$q', 'sdcConfig'];
+    private api:IApi;
+
+    constructor(private $http:ng.IHttpService,
+                private $q:ng.IQService,
+                private sdcConfig:IAppConfigurtaion) {
+        this.api = sdcConfig.api;
+    }
+
+    getMenuItems = (userId):ng.IPromise<Array<any>> => {
+        let defer = this.$q.defer<Array<any>>();
+        //defer.resolve(this.mockData);
+        this.$http.get(this.api.root + this.api.GET_ecomp_menu_items.replace(':userId', userId))
+            .then((response:any) => {
+                defer.resolve(response.data);
+            }, (response) => {
+                defer.reject(response.data);
+            });
+
+        return defer.promise;
+    };
+}
diff --git a/catalog-ui/src/app/services/entity-service.ts b/catalog-ui/src/app/services/entity-service.ts
new file mode 100644
index 0000000000..d480bf9104
--- /dev/null
+++ b/catalog-ui/src/app/services/entity-service.ts
@@ -0,0 +1,94 @@
+'use strict';
+import {Product, Service, IApi, IAppConfigurtaion, Resource, Component} from "../models";
+import {SharingService} from "./sharing-service";
+import {ComponentFactory} from "../utils/component-factory";
+import {CacheService} from "./cache-service";
+
+interface IEntityService {
+    getAllComponents():ng.IPromise<Array<Component>>;
+}
+
+interface IComponentsArray {
+    services:Array<Service>;
+    resources:Array<Resource>;
+    products:Array<Product>;
+}
+
+export class EntityService implements IEntityService {
+    static '$inject' = ['$http', '$q', 'sdcConfig', 'Sdc.Services.SharingService', 'ComponentFactory', 'Sdc.Services.CacheService'];
+    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)
+            .then((response:any) => {
+                let followedResponse: IComponentsArray =  response.data;
+                let componentsList:Array<Component> = new Array();
+
+                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.forEach((resourceResponse:Resource) => {
+                    let component:Resource = this.ComponentFactory.createResource(resourceResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+
+                followedResponse.products.forEach((productResponse:Product) => {
+
+                    let component:Product = this.ComponentFactory.createProduct(productResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+
+                this.cacheService.set('breadcrumbsComponents', componentsList);
+                defer.resolve(componentsList);
+            },(responce) => {
+                defer.reject(responce);
+            });
+        return defer.promise;
+    };
+
+    getAllComponents = ():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) => {
+                    let component:Service = this.ComponentFactory.createService(serviceResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+
+                componentResponse.resources && componentResponse.resources.forEach((resourceResponse:Resource) => {
+                    let component:Resource = this.ComponentFactory.createResource(resourceResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+
+                componentResponse.products && componentResponse.products.forEach((productsResponse:Product) => {
+                    let component:Product = this.ComponentFactory.createProduct(productsResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+                this.cacheService.set('breadcrumbsComponents', componentsList);
+                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
new file mode 100644
index 0000000000..51aa857e51
--- /dev/null
+++ b/catalog-ui/src/app/services/event-listener-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=========================================================
+ */
+/**
+ * Created by obarda on 7/4/2016.
+ */
+'use strict';
+import {Dictionary} from "../utils/dictionary/dictionary";
+
+interface IEventListenerService {
+
+}
+
+interface ICallbackData {
+    callback:Function;
+    args:any[];
+}
+
+export class EventListenerService implements IEventListenerService {
+
+    public observerCallbacks:Dictionary<string, ICallbackData[]> = new Dictionary<string, Array<ICallbackData>>();
+
+    //register an observer + callback
+    public registerObserverCallback = (eventName:string, callback:Function, ...args) => {
+        let callbackData = {
+            callback: callback,
+            args: args
+        }
+
+        if (this.observerCallbacks.containsKey(eventName)) {
+            let callbacks = this.observerCallbacks.getValue(eventName);
+
+            // Only insert the callback if the callback is different from existing callbacks.
+            for (let i = 0; i < callbacks.length; i++) {
+                if (callbacks[i].toString() === callback.toString()) {
+                    return; // Do not add this callback.
+                }
+            }
+
+            callbacks.push(callbackData);
+            this.observerCallbacks.setValue(eventName, callbacks);
+        } else {
+            this.observerCallbacks.setValue(eventName, [callbackData]);
+        }
+    };
+
+    //unregister an observer
+    public unRegisterObserver = (eventName:string, callbackFunc?:Function) => {
+        if (this.observerCallbacks.containsKey(eventName)) {
+
+            let callbacks: ICallbackData[]  =  this.observerCallbacks.getValue(eventName);
+            if(callbacks.length === 1) {
+                this.observerCallbacks.remove(eventName);
+            } else {
+                let filterCallbacks = _.filter(callbacks, (callBackObj) => {
+                    return callBackObj.callback != callbackFunc;
+                });
+                this.observerCallbacks.setValue(eventName, filterCallbacks);
+            }
+
+        }
+    };
+
+    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
new file mode 100644
index 0000000000..a1e79934d8
--- /dev/null
+++ b/catalog-ui/src/app/services/header-interceptor.ts
@@ -0,0 +1,69 @@
+'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;
+
+}
+
+export class HeaderInterceptor implements IInterceptor {
+    public static $inject = [
+        '$injector',
+        '$q',
+        'uuid4',
+        'Sdc.Services.SharingService',
+        'sdcConfig',
+        '$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');
+    }
+
+    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();
+        if (map && requestSuccess.url.indexOf(this.sdcConfig.api.root) === 0) {
+            console.log("header-interceptor: url: " + requestSuccess.url);
+            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;
+        if (responseData) {
+            let data = JSON.stringify(responseData);
+            if (data && (data.indexOf("Global Logon: Login") > 0)) {
+                this.$location.path('dashboard/welcome');
+                window.location.reload();
+            }
+        }
+        return responseSuccess;
+    }
+}
diff --git a/catalog-ui/src/app/services/http-error-interceptor.ts b/catalog-ui/src/app/services/http-error-interceptor.ts
new file mode 100644
index 0000000000..b61091c37c
--- /dev/null
+++ b/catalog-ui/src/app/services/http-error-interceptor.ts
@@ -0,0 +1,99 @@
+'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 dependencies (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 dependencies (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/loader-service.ts b/catalog-ui/src/app/services/loader-service.ts
new file mode 100644
index 0000000000..4bf8a6afe0
--- /dev/null
+++ b/catalog-ui/src/app/services/loader-service.ts
@@ -0,0 +1,24 @@
+/**
+ * Created by obarda on 3/13/2016.
+ */
+'use strict';
+import {EventListenerService} from "./event-listener-service";
+import {EVENTS} from "../utils/constants";
+
+export class LoaderService {
+
+
+    constructor(private eventListenerService:EventListenerService) {
+
+    }
+
+    public showLoader(...args) {
+        this.eventListenerService.notifyObservers(EVENTS.SHOW_LOADER_EVENT, ...args);
+    }
+
+    public hideLoader(...args) {
+        this.eventListenerService.notifyObservers(EVENTS.HIDE_LOADER_EVENT, ...args);
+    }
+}
+
+LoaderService.$inject = ['EventListenerService'];
diff --git a/catalog-ui/src/app/services/onboarding-service.ts b/catalog-ui/src/app/services/onboarding-service.ts
new file mode 100644
index 0000000000..8b93b18ca9
--- /dev/null
+++ b/catalog-ui/src/app/services/onboarding-service.ts
@@ -0,0 +1,82 @@
+'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;
+    }
+
+    getOnboardingComponents = ():ng.IPromise<Array<IComponent>> => {
+        let defer = this.$q.defer<Array<IComponent>>();
+        this.$http.get(this.api.GET_onboarding)
+            .then((response:any) => {
+                let onboardingComponents:Array<ICsarComponent> = response.data.results;
+                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();
+        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/services/progress-service.ts b/catalog-ui/src/app/services/progress-service.ts
new file mode 100644
index 0000000000..59ae16d734
--- /dev/null
+++ b/catalog-ui/src/app/services/progress-service.ts
@@ -0,0 +1,85 @@
+/**
+ * Created by obarda on 7/7/2016.
+ */
+
+'use strict';
+import IIntervalService = angular.IIntervalService;
+
+export class ProgressService {
+
+    public progresses:any = {};
+
+    static '$inject' = ['$interval'];
+
+    constructor(protected $interval:any) {
+    }
+
+    private totalProgress:number = 90;
+    private startProgress:number = 10;
+    private onePercentIntervalSeconds:number = 5;
+    private createComponentInterval;
+
+    public setProgressValue(name:string, value:number):void {
+        if (!this.progresses[name]) {
+            this.progresses[name] = {};
+        }
+        this.progresses[name].value = value;
+    }
+
+    public getProgressValue(name:string):number {
+        if (this.progresses[name]) {
+            return this.progresses[name].value;
+        }
+        return 0;
+    }
+
+    public deleteProgressValue(name:string):void {
+        this.stopCreateComponentInterval();
+        delete this.progresses[name];
+    }
+
+
+    private stopCreateComponentInterval = ():void => {
+        this.$interval.cancel(this.createComponentInterval);
+    };
+
+
+    public initCreateComponentProgress = (componentId:string):void => {
+        let progressValue:number = this.startProgress;
+        if (!this.getProgressValue(componentId)) {
+            this.stopCreateComponentInterval();
+            this.setProgressValue(componentId, this.startProgress);
+            this.createComponentInterval = this.$interval(():void => {
+                //TODO replace getProgressMockData to real data after BE provide the API
+                let progressValue = this.getProgressMockData(componentId);
+                if (progressValue <= this.totalProgress) {
+                    this.setProgressValue(componentId, progressValue);
+                } else {
+                    /**
+                     * Currently the progress is not really checking against the BE.
+                     * So the progress can pass 100. So the workaround for now, in case we pass 90 (totalProgress)
+                     * stop the interval, so the progress will be kept at 90 until the promise will return value and set
+                     * the progress to 100.
+                     */
+                    this.deleteProgressValue(componentId);
+                }
+            }, this.onePercentIntervalSeconds * 1000);
+        }
+
+    };
+
+
+    private getProgressMockData = (id:string):number => {
+        let progressValue = this.getProgressValue(id);
+        if (progressValue > 0) {
+            progressValue = progressValue + 1;
+        }
+        //if not finish always stay on 90%
+        if (progressValue > 90) {
+            progressValue = 90;
+        }
+
+        return progressValue;
+    }
+
+}
diff --git a/catalog-ui/src/app/services/sdc-version-service.ts b/catalog-ui/src/app/services/sdc-version-service.ts
new file mode 100644
index 0000000000..47001e9c9c
--- /dev/null
+++ b/catalog-ui/src/app/services/sdc-version-service.ts
@@ -0,0 +1,26 @@
+'use strict';
+import {Distribution} from "../models/distribution";
+import {IAppConfigurtaion, IApi} from "../models/app-config";
+
+export interface ISdcVersionService {
+    getVersion():ng.IPromise<any>;
+}
+export class SdcVersionService implements ISdcVersionService {
+
+    static '$inject' = ['$http', '$q', 'sdcConfig'];
+    private api:IApi;
+
+    constructor(private $http:ng.IHttpService, private $q:ng.IQService, sdcConfig:IAppConfigurtaion) {
+        this.api = sdcConfig.api;
+    }
+
+    public getVersion():ng.IPromise<any> {
+        let defer = this.$q.defer<Array<Distribution>>();
+        this.$http.get(this.api.root + this.api.GET_SDC_Version)
+            .then((version:any) => {
+                defer.resolve(version.data);
+            });
+        return defer.promise;
+    }
+}
+
diff --git a/catalog-ui/src/app/services/sharing-service.ts b/catalog-ui/src/app/services/sharing-service.ts
new file mode 100644
index 0000000000..706f01f16b
--- /dev/null
+++ b/catalog-ui/src/app/services/sharing-service.ts
@@ -0,0 +1,20 @@
+'use strict';
+import {Dictionary} from "app/utils";
+
+export class SharingService {
+
+    private uuidMap:Dictionary<string, string> = new Dictionary<string,string>();
+
+    public getUuidValue = (uniqueId:string):string => {
+        return this.uuidMap.getValue(uniqueId);
+    };
+
+    public addUuidValue = (uniqueId:string, uuid:string):void => {
+        this.uuidMap.setValue(uniqueId, uuid);
+    };
+
+    public getUuidMap = ():Dictionary<string, string> => {
+        return this.uuidMap;
+    };
+
+}
diff --git a/catalog-ui/src/app/services/url-tobase64-service.ts b/catalog-ui/src/app/services/url-tobase64-service.ts
new file mode 100644
index 0000000000..4e8dc18c7f
--- /dev/null
+++ b/catalog-ui/src/app/services/url-tobase64-service.ts
@@ -0,0 +1,30 @@
+'use strict';
+
+export interface IUrlToBase64Service {
+    downloadUrl(url:string, callback:Function):void;
+}
+
+export class UrlToBase64Service implements IUrlToBase64Service {
+    constructor() {
+    }
+
+    public downloadUrl = (url:string, callback:Function):void => {
+        let xhr:any = new XMLHttpRequest();
+
+        xhr.onload = ():void => {
+            let reader = new FileReader();
+            reader.onloadend = ():void => {
+                if (xhr.status === 200) {
+                    callback(reader.result);
+                } else {
+                    callback(null);
+                }
+            };
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+}
+
diff --git a/catalog-ui/src/app/services/user-resource-service.ts b/catalog-ui/src/app/services/user-resource-service.ts
new file mode 100644
index 0000000000..b881e3a98a
--- /dev/null
+++ b/catalog-ui/src/app/services/user-resource-service.ts
@@ -0,0 +1,103 @@
+'use strict';
+import {IUserProperties} from "../models/user";
+import {ICookie, IAppConfigurtaion} from "../models/app-config";
+import {CookieService} from "./cookie-service";
+
+// Define an interface of the object you want to use, providing it's properties
+export interface IUserResource extends IUserProperties,ng.resource.IResource<IUserResource> {
+
+}
+
+// Define your resource, adding the signature of the custom actions
+export interface IUserResourceClass extends ng.resource.IResourceClass<IUserResource> {
+    authorize():IUserResource;
+    getLoggedinUser():IUserResource;
+    setLoggedinUser(user:IUserResource):void;
+    getAllUsers(success?:Function, error?:Function):Array<IUserResource>;
+    createUser(IResourceResource, success?:Function, error?:Function):void;
+    editUserRole(IResourceResource, success?:Function, error?:Function):void;
+    deleteUser(IResourceResource, success?:Function, error?:Function):void;
+}
+
+export class UserResourceService {
+
+    public static getResource = ($resource:ng.resource.IResourceService,
+                                 sdcConfig:IAppConfigurtaion,
+                                 cookieService:CookieService):IUserResourceClass => {
+
+        let url:string = sdcConfig.api.root + sdcConfig.api.GET_user;
+        let authorizeUrl:string = sdcConfig.api.root + sdcConfig.api.GET_user_authorize;
+        let authorizeActionHeaders:any = {};
+        let cookie:ICookie = sdcConfig.cookie;
+        authorizeActionHeaders[cookie.userFirstName] = cookieService.getFirstName();
+        authorizeActionHeaders[cookie.userLastName] = cookieService.getLastName();
+        authorizeActionHeaders[cookie.userEmail] = cookieService.getEmail();
+        authorizeActionHeaders[cookie.userIdSuffix] = cookieService.getUserId();
+
+        // Define your custom actions here as IActionDescriptor
+        let authorizeAction:ng.resource.IActionDescriptor = {
+            method: 'GET',
+            isArray: false,
+            url: authorizeUrl,
+            headers: authorizeActionHeaders
+        };
+
+        let getAllUsers:ng.resource.IActionDescriptor = {
+            method: 'GET',
+            isArray: true,
+            url: sdcConfig.api.root + sdcConfig.api.GET_all_users
+        };
+
+        let editUserRole:ng.resource.IActionDescriptor = {
+            method: 'POST',
+            isArray: false,
+            url: sdcConfig.api.root + sdcConfig.api.POST_edit_user_role,
+            transformRequest: (data, headers)=> {
+                data.payloadData = undefined;
+                data.payloadName = undefined;
+                return JSON.stringify(data);
+            }
+        };
+
+        let deleteUser:ng.resource.IActionDescriptor = {
+            method: 'DELETE',
+            isArray: false,
+            url: sdcConfig.api.root + sdcConfig.api.DELETE_delete_user
+        };
+
+        let createUser:ng.resource.IActionDescriptor = {
+            method: 'POST',
+            isArray: false,
+            url: sdcConfig.api.root + sdcConfig.api.POST_create_user,
+            transformRequest: (data, headers)=> {
+                data.payloadData = undefined;
+                data.payloadName = undefined;
+                return JSON.stringify(data);
+            }
+        };
+        let userResource:IUserResourceClass = <IUserResourceClass>$resource(
+            url,
+            {id: '@id'},
+            {
+                authorize: authorizeAction,
+                getAllUsers: getAllUsers,
+                createUser: createUser,
+                editUserRole: editUserRole,
+                deleteUser: deleteUser
+            }
+        );
+
+        let _loggedinUser:IUserResource;
+
+        userResource.getLoggedinUser = () => {
+            return _loggedinUser;
+        };
+
+        userResource.setLoggedinUser = (loggedinUser:IUserResource) => {
+            _loggedinUser = loggedinUser;
+        };
+
+        return userResource;
+    }
+}
+UserResourceService.getResource.$inject = ['$resource', 'sdcConfig', 'Sdc.Services.CookieService'];