Initial OpenECOMP SDC commit

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

26 files changed, 2777 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/services/activity-log-service.ts b/catalog-ui/app/scripts/services/activity-log-service.ts
new file mode 100644
index 0000000000..6fe27c447e
--- /dev/null
+++ b/catalog-ui/app/scripts/services/activity-log-service.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    'use strict';
+
+    // 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<Models.Activity>>;
+    }
+
+    export class ActivityLogService implements  IActivityLogService{
+
+
+        static '$inject' = ['$http', '$q','sdcConfig'];
+        private api: Models.IApi;
+
+        constructor(private $http: ng.IHttpService, private $q: ng.IQService, sdcConfig: Models.IAppConfigurtaion){
+            this.api = sdcConfig.api;
+        }
+
+        getActivityLogService = (type:string, id:string): ng.IPromise<Array<Models.Activity>> =>{
+            let defer = this.$q.defer<any>();
+            this.$http.get(this.api.root + this.api.GET_activity_log.replace(':type', type).replace(':id', id))
+                .success((activityLog: any) => {
+                    defer.resolve(activityLog);
+                });
+            return defer.promise;
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/services/angular-js-bridge-service.ts b/catalog-ui/app/scripts/services/angular-js-bridge-service.ts
new file mode 100644
index 0000000000..2d8fb01b13
--- /dev/null
+++ b/catalog-ui/app/scripts/services/angular-js-bridge-service.ts
@@ -0,0 +1,22 @@
+module Sdc.Services {
+    export class AngularJSBridge{
+        private static _$filter: ng.IFilterService;
+        private static _sdcConfig: Models.IAppConfigurtaion;
+
+        public static getFilter(filterName: string){
+            return AngularJSBridge._$filter(filterName);
+        }
+
+        public static getAngularConfig(){
+            return AngularJSBridge._sdcConfig;
+        }
+
+
+        constructor($filter: ng.IFilterService, sdcConfig: Models.IAppConfigurtaion){
+            AngularJSBridge._$filter = $filter;
+            AngularJSBridge._sdcConfig = sdcConfig;
+        }
+    }
+
+    AngularJSBridge.$inject = ['$filter', 'sdcConfig']
+}
\ No newline at end of file
diff --git a/catalog-ui/app/scripts/services/available-icons-service.ts b/catalog-ui/app/scripts/services/available-icons-service.ts
new file mode 100644
index 0000000000..5c20afe5f2
--- /dev/null
+++ b/catalog-ui/app/scripts/services/available-icons-service.ts
@@ -0,0 +1,105 @@
+/*-
+ * ============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 2/23/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    'use strict';
+
+    interface IAvailableIconsService {
+        getIcons(componentType: Utils.Constants.ComponentType):Array<string>;
+    }
+
+    export class AvailableIconsService implements IAvailableIconsService {
+        constructor() {}
+        public getIcons = (componentType: string): Array<string> => {
+            let icons: string[];
+            switch (componentType){
+                case Utils.Constants.ComponentType.SERVICE:
+                    icons = [
+                        'call_controll',
+                        'mobility',
+                        'network_l_1-3',
+                        'network_l_4'
+                    ];
+                    break;
+
+                case Utils.Constants.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 Utils.Constants.ComponentType.PRODUCT:
+                    icons = [
+                        'vfw',
+                        'network',
+                        'security',
+                        'cloud',
+                        'setting',
+                        'orphan',
+                        'wanx',
+                        'vrouter',
+                        'ucpe',
+                        'mobility'
+
+                    ];
+                    break;
+
+            }
+            return icons;
+        }
+
+    }
+}
+
+
+
diff --git a/catalog-ui/app/scripts/services/cache-service.ts b/catalog-ui/app/scripts/services/cache-service.ts
new file mode 100644
index 0000000000..3e5e5495c7
--- /dev/null
+++ b/catalog-ui/app/scripts/services/cache-service.ts
@@ -0,0 +1,58 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+    'use strict';
+
+    interface ICacheService {
+        get(key:string):any;
+        set(key:string, value:any):void;
+    }
+
+    export class CacheService implements ICacheService {
+
+        static '$inject' = ['sdcConfig', '$document'];
+        private storage:Utils.Dictionary<string, any>;
+
+        constructor() {
+            this.storage = new Utils.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/app/scripts/services/category-resource-service.ts b/catalog-ui/app/scripts/services/category-resource-service.ts
new file mode 100644
index 0000000000..eef1b445e6
--- /dev/null
+++ b/catalog-ui/app/scripts/services/category-resource-service.ts
@@ -0,0 +1,83 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    import IMainCategory = Sdc.Models.IMainCategory;
+    'use strict';
+
+    // Define an interface of the object you want to use, providing it's properties
+    export interface ICategoryResource extends Models.IUserProperties,ng.resource.IResource<ICategoryResource>{
+        name:string;
+        uniqueId:string;
+        subcategories:Array<ICategoryResource>;
+
+        getAllCategories(params?: Object, success?: Function, error?: Function): Array<IMainCategory>;
+        $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): Array<IMainCategory>;
+        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: Models.IAppConfigurtaion
+        ): ICategoryResourceClass => {
+
+            // Define your custom actions here as IActionDescriptor
+            let getAllCategoriesAction : ng.resource.IActionDescriptor = {
+                method: 'GET',
+                isArray: true,
+                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/app/scripts/services/components/component-service.ts b/catalog-ui/app/scripts/services/components/component-service.ts
new file mode 100644
index 0000000000..393ea71c03
--- /dev/null
+++ b/catalog-ui/app/scripts/services/components/component-service.ts
@@ -0,0 +1,698 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Services.Components {
+
+    'use strict';
+
+    declare let CryptoJS:any;
+
+    export interface IComponentService {
+
+        getComponent(id:string);
+        updateComponent(component:Models.Components.Component):ng.IPromise<Models.Components.Component>;
+        changeLifecycleState(component:Models.Components.Component, state:string, userRemarks:any):ng.IPromise<Models.Components.Component> ;
+        validateName(newName:string, subtype?:string):ng.IPromise<Models.IValidate>;
+        createComponent(component:Models.Components.Component):ng.IPromise<Models.Components.Component>;
+        addOrUpdateArtifact(componentId:string, artifact:Models.ArtifactModel):ng.IPromise<Models.ArtifactModel>;
+        deleteArtifact(componentId:string, artifact:string, artifactLabel):ng.IPromise<Models.ArtifactModel>;
+        addProperty(componentId:string, property:Models.PropertyModel):ng.IPromise<Models.PropertyModel>;
+        updateProperty(componentId:string, property:Models.PropertyModel):ng.IPromise<Models.PropertyModel>;
+        addAttribute(componentId:string, attribute:Models.AttributeModel):ng.IPromise<Models.AttributeModel>;
+        updateAttribute(componentId:string, attribute:Models.AttributeModel):ng.IPromise<Models.AttributeModel>;
+        deleteProperty(componentId:string, propertyId:string):ng.IPromise<Models.PropertyModel>;
+        deleteAttribute(componentId:string, attributeId:string):ng.IPromise<Models.AttributeModel>;
+        changeResourceInstanceVersion(componentId:string, componentInstanceId:string, componentUid:string):ng.IPromise<Models.ComponentsInstances.ComponentInstance>;
+        updateInstanceArtifact(componentId:string, instanceId:string, artifact:Models.ArtifactModel):ng.IPromise<Models.ArtifactModel>;
+        addInstanceArtifact(componentId: string, instanceId: string, artifact:Models.ArtifactModel):ng.IPromise<Models.ArtifactModel>;
+        deleteInstanceArtifact(componentId: string, instanceId: string, artifact:string, artifactLabel):ng.IPromise<Models.ArtifactModel>;
+        createComponentInstance(componentId:string, componentInstance:Models.ComponentsInstances.ComponentInstance):ng.IPromise<Models.ComponentsInstances.ComponentInstance>;
+        updateComponentInstance(componentId:string, componentInstance:Models.ComponentsInstances.ComponentInstance):ng.IPromise<Models.ComponentsInstances.ComponentInstance>;
+        updateMultipleComponentInstances(componentId:string, instances:Array<Models.ComponentsInstances.ComponentInstance>):ng.IPromise< Array<Models.ComponentsInstances.ComponentInstance>>;
+        downloadArtifact(componentId:string, artifactId:string):ng.IPromise<Models.IFileDownload>;
+        uploadInstanceEnvFile(componentId:string, instanceId:string, artifact:Models.ArtifactModel):ng.IPromise<Models.ArtifactModel>;
+        downloadInstanceArtifact(componentId:string, instanceId:string, artifactId:string):ng.IPromise<Models.IFileDownload>;
+        deleteComponentInstance(componentId:string, componentInstanceId:string):ng.IPromise<Models.ComponentsInstances.ComponentInstance>;
+        createRelation(componentId:string, link:Models.RelationshipModel):ng.IPromise<Models.RelationshipModel>;
+        deleteRelation(componentId:string, link:Models.RelationshipModel):ng.IPromise<Models.RelationshipModel>;
+        getRequirementsCapabilities(componentId:string):ng.IPromise<any>;
+        updateInstanceProperty(componentId:string, property:Models.PropertyModel):ng.IPromise<Models.PropertyModel>;
+        updateInstanceAttribute(componentId:string, attribute:Models.AttributeModel):ng.IPromise<Models.AttributeModel>;
+        getComponentInstancesFilteredByInputsAndProperties(componentId:string, searchText:string):ng.IPromise<Array<Models.ComponentsInstances.ComponentInstance>>
+        getComponentInstanceInputs(componentId:string, instanceId:string, originComponentUid):ng.IPromise<Array<Models.InputModel>>;
+        getComponentInputs(componentId:string):ng.IPromise<Array<Models.InputModel>>;
+        getComponentInstanceInputProperties(componentId:string, instanceId:string, inputId:string):ng.IPromise<Array<Models.PropertyModel>>;
+        getModuleForDisplay(componentId:string, moduleId:string):ng.IPromise<Models.DisplayModule>;
+        updateGroupMetadata(componentId:string, group:Models.Module):ng.IPromise<Models.Module>;
+        getComponentInputInputs(serviceId:string, input:string): ng.IPromise<Array<Models.InputModel>>;
+        createInputsFromInstancesInputs(serviceId:string, instancesInputsMap:Models.InstancesInputsMap): ng.IPromise<Array<Models.InputModel>>;
+        createInputsFromInstancesInputsProperties(resourceId:string, instanceInputsPropertiesMap:Models.InstanceInputsPropertiesMap): ng.IPromise<Array<Models.PropertyModel>>;
+        deleteComponentInput(serviceId:string, inputId:string):ng.IPromise<Models.InputModel>;
+    }
+
+    export class ComponentService implements IComponentService {
+
+        static '$inject' = [
+            '$log',
+            'Restangular',
+            'sdcConfig',
+            'Sdc.Services.SharingService',
+            '$q',
+            '$interval',
+            '$base64',
+            'ComponentInstanceFactory'
+        ];
+
+        constructor(protected $log: ng.ILogService,
+                    protected restangular:restangular.IElement,
+                    protected sdcConfig:Models.IAppConfigurtaion,
+                    protected sharingService:Sdc.Services.SharingService,
+                    protected $q:ng.IQService,
+                    protected $interval:any,
+                    protected $base64:any,
+                    protected ComponentInstanceFactory:Utils.ComponentInstanceFactory) {
+
+            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:Models.Components.Component):Models.Components.Component => {
+            return component;
+        };
+
+        public getComponent = (id:string):ng.IPromise<Models.Components.Component> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(id).get().then((response:Models.Components.Component) => {
+                let component:Models.Components.Component = this.createComponentObject(response);
+                //this.$log.debug("Component Loaded successfully : ", component);
+                deferred.resolve(component);
+            }, (err)=> {
+                this.$log.debug("Failed to load component with ID: " + id);
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public updateComponent = (component:Models.Components.Component):ng.IPromise<Models.Components.Component> => {
+            // If this is resource
+            if (component instanceof Sdc.Models.Components.Resource) {
+                let resource:Sdc.Models.Components.Resource = <Sdc.Models.Components.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:Models.Components.Component):ng.IPromise<Models.Components.Component> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(component.uniqueId).one("metadata").customPUT(JSON.stringify(component)).then((response:Models.Components.Component) => {
+                let component:Models.Components.Component = this.createComponentObject(response);
+                deferred.resolve(component);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        private updateResource = (component:Models.Components.Component):ng.IPromise<Models.Components.Component> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(component.uniqueId).customPUT(JSON.stringify(component)).then((response:Models.Components.Component) => {
+                let component:Models.Components.Component = this.createComponentObject(response);
+                deferred.resolve(component);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        private updateResourceMetadata = (component:Models.Components.Component):ng.IPromise<Models.Components.Component> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(component.uniqueId).one('metadata').customPUT(JSON.stringify(component)).then((response:Models.Components.Component) => {
+                let component:Models.Components.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:Sdc.Models.Components.Resource):ng.IPromise<Models.Components.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:Models.Components.Component) => {
+                let componentResult:Models.Components.Component = this.createComponentObject(response);
+                deferred.resolve(componentResult);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+
+            return deferred.promise;
+        };
+
+        public createComponent = (component:Models.Components.Component):ng.IPromise<Models.Components.Component> => {
+            let deferred = this.$q.defer();
+            let headerObj = this.getHeaderMd5(component);
+            this.restangular.customPOST(JSON.stringify(component), '', {}, headerObj).then((response:Models.Components.Component) => {
+                let component:Models.Components.Component = this.createComponentObject(response);
+                deferred.resolve(component);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public validateName = (newName:string, subtype?:string):ng.IPromise<Models.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:Models.Components.Component, state:string, userRemarks:any):ng.IPromise<Models.Components.Component> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(component.uniqueId).one(state).customPOST(userRemarks).then((response:Models.Components.Component) => {
+                this.sharingService.addUuidValue(response.uniqueId, response.uuid);
+                let component:Models.Components.Component = this.createComponentObject(response);
+                deferred.resolve(component);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        // ------------------------------------------------ Artifacts API --------------------------------------------------//
+        public addOrUpdateArtifact = (componentId:string, artifact:Models.ArtifactModel):ng.IPromise<Models.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<Models.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<Models.ArtifactModel> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("artifacts").one(artifactId).remove({'operation': artifactLabel}).then((response:Models.ArtifactModel) => {
+                deferred.resolve(response);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+
+        // ------------------------------------------------ Properties API --------------------------------------------------//
+        public addProperty = (componentId:string, property:Models.PropertyModel):ng.IPromise<Models.PropertyModel> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("properties").customPOST(property.convertToServerObject()).then((response:any) => {
+                let property:Models.PropertyModel = new Models.PropertyModel(response[Object.keys(response)[0]]);
+                deferred.resolve(property);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public updateProperty = (componentId:string, property:Models.PropertyModel):ng.IPromise<Models.PropertyModel> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("properties").one(property.uniqueId).customPUT(property.convertToServerObject()).then((response:any) => {
+                let property:Models.PropertyModel = new Models.PropertyModel(response[Object.keys(response)[0]]);
+                deferred.resolve(property);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public deleteProperty = (componentId:string, propertyId:string):ng.IPromise<Models.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:Models.AttributeModel):ng.IPromise<Models.AttributeModel> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("attributes").customPOST(attribute.convertToServerObject()).then((response:any) => {
+                let attribute:Models.AttributeModel = new Models.AttributeModel(response);
+                deferred.resolve(attribute);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public updateAttribute = (componentId:string, attribute:Models.AttributeModel):ng.IPromise<Models.AttributeModel> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("attributes").one(attribute.uniqueId).customPUT(attribute.convertToServerObject()).then((response:any) => {
+                let attribute:Models.AttributeModel = new Models.AttributeModel(response);
+                deferred.resolve(attribute);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public deleteAttribute = (componentId:string, attributeId:string):ng.IPromise<Models.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:Models.ComponentsInstances.ComponentInstance):ng.IPromise<Models.ComponentsInstances.ComponentInstance> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("resourceInstance").customPOST(JSON.stringify(componentInstance)).then((response:any) => {
+                let componentInstance:Models.ComponentsInstances.ComponentInstance = Utils.ComponentInstanceFactory.createComponentInstance(response);
+                this.$log.debug("Component Instance created", componentInstance);
+                deferred.resolve(componentInstance);
+            }, (err)=> {
+                this.$log.debug("Failed to create componentInstance. With Name: " + componentInstance.name);
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public updateComponentInstance = (componentId:string, componentInstance:Models.ComponentsInstances.ComponentInstance):ng.IPromise<Models.ComponentsInstances.ComponentInstance> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("resourceInstance").one(componentInstance.uniqueId).customPOST(JSON.stringify(componentInstance)).then((response:any) => {
+                let componentInstance:Models.ComponentsInstances.ComponentInstance = Utils.ComponentInstanceFactory.createComponentInstance(response);
+                this.$log.debug("Component Instance was updated", componentInstance);
+                deferred.resolve(componentInstance);
+            }, (err)=> {
+                this.$log.debug("Failed to update componentInstance. With ID: " + componentInstance.uniqueId + "Name: " + componentInstance.name);
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public updateMultipleComponentInstances = (componentId:string, instances:Array<Models.ComponentsInstances.ComponentInstance>):ng.IPromise<Array<Models.ComponentsInstances.ComponentInstance>> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("resourceInstance/multipleComponentInstance").customPOST(JSON.stringify(instances)).then((response:any) => {
+                this.$log.debug("Multiple Component Instances was updated", response);
+                let updateInstances:Array<Models.ComponentsInstances.ComponentInstance> = new Array<Models.ComponentsInstances.ComponentInstance>();
+                _.forEach(response, (componentInstance:Models.ComponentsInstances.ComponentInstance) => {
+                    let updatedComponentInstance:Models.ComponentsInstances.ComponentInstance = Utils.ComponentInstanceFactory.createComponentInstance(componentInstance);
+                    updateInstances.push(updatedComponentInstance);
+                });
+                deferred.resolve(updateInstances);
+            }, (err)=> {
+                this.$log.debug("Failed to update Multiple componentInstance.");
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public deleteComponentInstance = (componentId:string, componentInstanceId:string):ng.IPromise<Models.ComponentsInstances.ComponentInstance> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("resourceInstance").one(componentInstanceId).remove().then(() => {
+                this.$log.debug("Component Instance was deleted");
+                deferred.resolve();
+            }, (err)=> {
+                this.$log.debug("Failed to delete componentInstance. With ID: " + componentInstanceId);
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public changeResourceInstanceVersion = (componentId:string, componentInstanceId:string, componentUid:string):ng.IPromise<Models.ComponentsInstances.ComponentInstance> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("resourceInstance").one(componentInstanceId).one("changeVersion").customPOST({'componentUid': componentUid}).then((response:any) => {
+                let componentInstance:Models.ComponentsInstances.ComponentInstance = Utils.ComponentInstanceFactory.createComponentInstance(response);
+                deferred.resolve(componentInstance);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public downloadInstanceArtifact = (componentId:string, instanceId:string, artifactId:string):ng.IPromise<Models.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:Models.ArtifactModel):ng.IPromise<Models.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 Models.ArtifactModel(response);
+                deferred.resolve(newArtifact);
+            }, (err)=>{
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public addInstanceArtifact = (componentId: string, instanceId: string, artifact:Models.ArtifactModel): ng.IPromise<Models.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:Models.ArtifactModel = new Models.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<Models.ArtifactModel> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("resourceInstance").one(instanceId).one("artifacts").one(artifactId).remove({'operation': artifactLabel}).then((response: Models.ArtifactModel) => {
+                deferred.resolve(response);
+            }, (err)=>{
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public uploadInstanceEnvFile = (componentId:string, instanceId:string, artifact:Models.ArtifactModel):ng.IPromise<Models.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 Models.ArtifactModel(response);
+                deferred.resolve(newArtifact);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public updateInstanceProperty = (componentId:string, property:Models.PropertyModel):ng.IPromise<Models.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 Models.PropertyModel(response);
+                newProperty.readonly = true;
+                newProperty.resourceInstanceUniqueId = instanceId;
+                deferred.resolve(newProperty);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public updateInstanceAttribute = (componentId:string, attribute:Models.AttributeModel):ng.IPromise<Models.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 Models.AttributeModel(response);
+                newAttribute.readonly = true;
+                newAttribute.resourceInstanceUniqueId = instanceId;
+                deferred.resolve(newAttribute);
+            }, (err)=> {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public createRelation = (componentId:string, link:Models.RelationshipModel):ng.IPromise<Models.RelationshipModel> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("resourceInstance").one("associate").customPOST(JSON.stringify(link)).then((response:any) => {
+                let relation:Models.RelationshipModel = new Models.RelationshipModel(response.plain());
+                this.$log.debug("Link created successfully ", relation);
+                deferred.resolve(relation);
+            }, (err)=> {
+                this.$log.debug("Failed to create Link From: " + link.fromNode + "To: " + link.toNode);
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public deleteRelation = (componentId:string, link:Models.RelationshipModel):ng.IPromise<Models.RelationshipModel> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("resourceInstance").one("dissociate").customPUT(JSON.stringify(link)).then((response:any) => {
+                let relation:Models.RelationshipModel = new Models.RelationshipModel(response);
+                this.$log.debug("Link deleted successfully ", relation);
+                deferred.resolve(relation);
+            }, (err)=> {
+                this.$log.debug("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) => {
+                this.$log.debug("Component requirement capabilities recived: ", response);
+                deferred.resolve(response);
+            }, (err)=> {
+                this.$log.debug("Failed to get requirements & capabilities");
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public getModuleForDisplay = (componentId:string, moduleId:string):ng.IPromise<Models.DisplayModule> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("groups").one(moduleId).get().then((response:any) => {
+                this.$log.debug("module loaded successfully: ", response);
+                let module:Models.DisplayModule = new Models.DisplayModule(response);
+                deferred.resolve(module);
+            }, (err)=> {
+                this.$log.debug("Failed to get module with id: ", moduleId);
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        public getComponentInstancesFilteredByInputsAndProperties = (componentId:string, searchText?:string):ng.IPromise<Array<Models.ComponentsInstances.ComponentInstance>> => {
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("componentInstances").get({'searchText': searchText}).then((response:any) => {
+                this.$log.debug("component instances return successfully: ", response);
+                let componentInstances:Array<Models.ComponentsInstances.ComponentInstance> = Utils.CommonUtils.initComponentInstances(response);
+                deferred.resolve(componentInstances);
+            }, (err) => {
+                this.$log.debug("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<Models.InputModel>> => {
+
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("componentInstances").one(instanceId).one(originComponentUid).one("inputs").get().then((response:any) => {
+                this.$log.debug("component instance input return successfully: ", response);
+                let inputsArray:Array<Models.InputModel> = new Array<Models.InputModel>();
+                _.forEach(response, (inputObj:Models.InputModel) => {
+                    inputsArray.push(new Models.InputModel(inputObj));
+                });
+                deferred.resolve(inputsArray);
+            }, (err) => {
+                this.$log.debug("Failed to get component instance input with id: " + instanceId);
+                deferred.reject(err);
+            });
+
+            return deferred.promise;
+        };
+
+        public getComponentInputs = (componentId:string):ng.IPromise<Array<Models.InputModel>> => {
+
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("inputs").get().then((response:any) => {
+                this.$log.debug("component inputs return successfully: ", response);
+                let inputsArray:Array<Models.InputModel> = new Array<Models.InputModel>();
+                _.forEach(response, (inputObj:Models.InputModel) => {
+                    inputsArray.push(new Models.InputModel(inputObj));
+                });
+                deferred.resolve(inputsArray);
+            }, (err) => {
+                this.$log.debug("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<Models.PropertyModel>> => {
+
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("componentInstances").one(instanceId).one(inputId).one("properties").get().then((response:any) => {
+                this.$log.debug("component instance input properties return successfully: ", response);
+                let propertiesArray:Array<Models.PropertyModel> = new Array<Models.PropertyModel>();
+                _.forEach(response, (propertyObj:Models.PropertyModel) => {
+                    propertiesArray.push(new Models.PropertyModel(propertyObj));
+                });
+                deferred.resolve(propertiesArray);
+            }, (err) => {
+                this.$log.debug("Failed to get component instance input properties with instanceId: " + instanceId + "and input id: " + inputId);
+                deferred.reject(err);
+            });
+
+            return deferred.promise;
+        };
+
+        public updateGroupMetadata = (componentId:string, group:Models.Module):ng.IPromise<Models.Module> => {
+
+            let deferred = this.$q.defer();
+            this.restangular.one(componentId).one("groups").one(group.uniqueId).one("metadata").customPUT(JSON.stringify(group)).then((response:Models.Module) => {
+                this.$log.debug("group metadata updated successfully: ", response);
+                let updatedGroup:Models.Module = new Models.Module(response);
+
+                deferred.resolve(updatedGroup);
+            }, (err) => {
+                this.$log.debug("Failed to update group metadata for component: " + componentId + " for group with id: " + group.uniqueId);
+                deferred.reject(err);
+            });
+
+            return deferred.promise;
+        };
+
+        public getComponentInputInputs = (serviceId:string, inputId:string): ng.IPromise<Array<Models.InputModel>>  => {
+            let defer = this.$q.defer<any>();
+            this.restangular.one(serviceId).one("inputs").one(inputId).one("inputs").get().then((response: any) => {
+                let inputsArray:Array<Models.InputModel> = new Array<Models.InputModel>();
+                _.forEach(response, (inputObj:Models.InputModel) => {
+                    inputsArray.push(new Models.InputModel(inputObj));
+                });
+                defer.resolve(inputsArray);
+            }, (err)=>{
+                this.$log.debug("failed to get inputs of input : ", err);
+                defer.reject(err);
+            });
+            return defer.promise;
+        };
+
+        createInputsFromInstancesInputsProperties = (resourceId:string, instancePropertyMap:Models.InstanceInputsPropertiesMap): ng.IPromise<Array<Models.PropertyModel>>  => {
+            let defer = this.$q.defer<any>();
+            this.restangular.one(resourceId).one("create/properties").customPOST(instancePropertyMap).then((response: any) => {
+                let inputsArray:Array<Models.PropertyModel> = new Array<Models.PropertyModel>();
+                _.forEach(response, (inputObj:Models.PropertyModel) => {
+                    inputsArray.push(new Models.PropertyModel(inputObj));
+                });
+                defer.resolve(inputsArray);
+            }, (err)=>{
+                this.$log.debug("failed to create service inputs from VF instances inputs : ", err);
+                defer.reject(err);
+            });
+            return defer.promise;
+        };
+
+        createInputsFromInstancesInputs = (serviceId:string, instancesMap:Models.InstancesInputsMap): ng.IPromise<Array<Models.InputModel>>  => {
+            let defer = this.$q.defer<any>();
+            this.restangular.one(serviceId).one("create/inputs").customPOST(instancesMap).then((response: any) => {
+                let inputsArray:Array<Models.InputModel> = new Array<Models.InputModel>();
+                _.forEach(response, (inputObj:Models.InputModel) => {
+                    inputsArray.push(new Models.InputModel(inputObj));
+                });
+                defer.resolve(inputsArray);
+            }, (err)=>{
+                this.$log.debug("failed to create service inputs from VF instances inputs : ", err);
+                defer.reject(err);
+            });
+            return defer.promise;
+        };
+
+        deleteComponentInput = (serviceId:string, inputId:string) : ng.IPromise<Models.InputModel> => {
+            var defer = this.$q.defer();
+            this.restangular.one(serviceId).one("delete").one(inputId).one("input").remove().then((response: any) => {
+                var inputToDelete = new Models.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/app/scripts/services/components/product-service.ts b/catalog-ui/app/scripts/services/components/product-service.ts
new file mode 100644
index 0000000000..69171fbbfa
--- /dev/null
+++ b/catalog-ui/app/scripts/services/components/product-service.ts
@@ -0,0 +1,61 @@
+/*-
+ * ============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 2/8/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Services.Components {
+    'use strict';
+
+    export interface IProductService extends IComponentService {
+
+    }
+
+    export class ProductService extends ComponentService implements IProductService {
+
+        static '$inject' = [
+            '$log',
+            'Restangular',
+            'sdcConfig',
+            'Sdc.Services.SharingService',
+            '$q',
+            '$interval',
+            '$base64',
+            'ComponentInstanceFactory'
+        ];
+
+        constructor(protected $log: ng.ILogService,
+                    protected restangular: restangular.IElement,
+                    protected sdcConfig: Models.IAppConfigurtaion,
+                    protected sharingService: Sdc.Services.SharingService,
+                    protected $q: ng.IQService,
+                    protected $interval: any,
+                    protected $base64: any,
+                    protected ComponentInstanceFactory: Utils.ComponentInstanceFactory) {
+            super($log, restangular, sdcConfig, sharingService, $q, $interval, $base64, ComponentInstanceFactory);
+
+            this.restangular = restangular.one("products");
+        }
+
+        createComponentObject = (component: Models.Components.Component): Models.Components.Component => {
+            return new Models.Components.Product(this, this.$q, <Models.Components.Product>component);
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/services/components/resource-service.ts b/catalog-ui/app/scripts/services/components/resource-service.ts
new file mode 100644
index 0000000000..48781da48e
--- /dev/null
+++ b/catalog-ui/app/scripts/services/components/resource-service.ts
@@ -0,0 +1,61 @@
+/*-
+ * ============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 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Services.Components {
+    'use strict';
+
+    export interface IResourceService extends IComponentService {
+
+    }
+
+    export class ResourceService extends ComponentService implements IResourceService {
+
+        static '$inject' = [
+            '$log',
+            'Restangular',
+            'sdcConfig',
+            'Sdc.Services.SharingService',
+            '$q',
+            '$interval',
+            '$base64',
+            'ComponentInstanceFactory'
+        ];
+
+        constructor(protected $log: ng.ILogService,
+                    protected restangular: restangular.IElement,
+                    protected sdcConfig: Models.IAppConfigurtaion,
+                    protected sharingService: Sdc.Services.SharingService,
+                    protected $q: ng.IQService,
+                    protected $interval: any,
+                    protected $base64: any,
+                    protected ComponentInstanceFactory: Utils.ComponentInstanceFactory) {
+            super($log, restangular, sdcConfig, sharingService, $q, $interval, $base64, ComponentInstanceFactory);
+
+            this.restangular = restangular.one("resources");
+        }
+
+        createComponentObject = (component: Models.Components.Component): Models.Components.Component => {
+            return new Models.Components.Resource(this, this.$q, <Models.Components.Resource>component);
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/services/components/service-service.ts b/catalog-ui/app/scripts/services/components/service-service.ts
new file mode 100644
index 0000000000..fef0b47512
--- /dev/null
+++ b/catalog-ui/app/scripts/services/components/service-service.ts
@@ -0,0 +1,97 @@
+/*-
+ * ============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 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Services.Components {
+    'use strict';
+
+
+    export interface IServiceService extends IComponentService {
+        getDistributionsList(uuid: string): ng.IPromise<Array<Models.Distribution>>;
+        getDistributionComponents(distributionId: string): ng.IPromise<Array<Models.DistributionComponent>>;
+        markAsDeployed(serviceId: string, distributionId: string): ng.IPromise<any>;
+    }
+
+    export class ServiceService extends ComponentService implements IServiceService {
+
+        static '$inject' = [
+            '$log',
+            'Restangular',
+            'sdcConfig',
+            'Sdc.Services.SharingService',
+            '$q',
+            '$interval',
+            '$base64',
+            'ComponentInstanceFactory'
+        ];
+
+        public distribution: string = "distribution";
+
+        constructor(protected $log: ng.ILogService,
+                    protected restangular: restangular.IElement,
+                    protected sdcConfig: Models.IAppConfigurtaion,
+                    protected sharingService: Sdc.Services.SharingService,
+                    protected $q: ng.IQService,
+                    protected $interval: any,
+                    protected $base64: any,
+                    protected ComponentInstanceFactory: Utils.ComponentInstanceFactory) {
+            super($log, restangular, sdcConfig, sharingService, $q, $interval, $base64, ComponentInstanceFactory);
+
+            this.restangular = restangular.one("services");
+        }
+
+        getDistributionsList = (uuid: string): ng.IPromise<Array<Models.Distribution>> => {
+            let defer = this.$q.defer<Array<Models.Distribution>>();
+            this.restangular.one(uuid).one("distribution").get().then((distributions: any) => {
+                defer.resolve(<Array<Models.Distribution>> distributions.distributionStatusOfServiceList);
+            }, (err)=> {
+                defer.reject(err);
+            });
+            return defer.promise;
+        };
+
+        getDistributionComponents = (distributionId: string): ng.IPromise<Array<Models.DistributionComponent>> => {
+            let defer = this.$q.defer<Array<Models.DistributionComponent>>();
+            this.restangular.one("distribution").one(distributionId).get().then((distributions: any) => {
+                defer.resolve(<Array<Models.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: Models.Components.Component): Models.Components.Component => {
+            return new Models.Components.Service(this, this.$q, <Models.Components.Service>component);
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/services/components/utils/composition-left-palette-service.ts b/catalog-ui/app/scripts/services/components/utils/composition-left-palette-service.ts
new file mode 100644
index 0000000000..25ac1cdf17
--- /dev/null
+++ b/catalog-ui/app/scripts/services/components/utils/composition-left-palette-service.ts
@@ -0,0 +1,248 @@
+/*-
+ * ============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.
+ */
+/// <reference path="../../../references"/>
+module Sdc.Services.Components {
+
+    'use strict';
+
+    export class LeftPanelLatestVersion {
+        uid: string;
+        version: string;
+    }
+
+    export class LeftPaletteDataObject {
+        currentUpdatingIdsList: Array<string>;
+        latestVersionAndIdsList: Array<LeftPanelLatestVersion>;
+        fullDataLeftPaletteComponents: Array<Models.Components.Component>;
+        displayLeftPanelComponents: Array<Models.DisplayComponent>;
+        onFinishLoadingEvent: string;
+
+        constructor(onFinishEventListener: string) {
+
+            this.fullDataLeftPaletteComponents = new Array<Models.Components.Component>();
+            this.displayLeftPanelComponents = new Array<Models.DisplayComponent>();
+            this.currentUpdatingIdsList = new Array<string>();
+            this.latestVersionAndIdsList = new Array<LeftPanelLatestVersion>();
+            this.onFinishLoadingEvent = onFinishEventListener;
+        }
+    }
+
+    export class LeftPaletteLoaderService {
+
+        static '$inject' = [
+            'Restangular',
+            'sdcConfig',
+            '$q',
+            '$base64',
+            'ComponentFactory',
+            'EventListenerService'
+
+        ];
+
+        constructor(protected restangular: restangular.IElement,
+                    protected sdcConfig: Models.IAppConfigurtaion,
+                    protected $q: ng.IQService,
+                    protected $base64: any,
+                    protected ComponentFactory: Utils.ComponentFactory,
+                    protected EventListenerService: Services.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 = (): void => {
+
+            this.serviceLeftPaletteData = new LeftPaletteDataObject(Utils.Constants.EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT);
+            this.resourceLeftPaletteData = new LeftPaletteDataObject(Utils.Constants.EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT);
+            this.productLeftPaletteData = new LeftPaletteDataObject(Utils.Constants.EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT);
+            this.vlData = new LeftPaletteDataObject(Utils.Constants.EVENTS.VL_LEFT_PALETTE_UPDATE_EVENT);
+
+            //initiating service palette
+            this.updateComponentLeftPalette(Utils.Constants.ComponentType.SERVICE);
+
+            //initiating resource palette
+            this.updateComponentLeftPalette(Utils.Constants.ComponentType.RESOURCE);
+
+            //initiating product palette
+            this.updateComponentLeftPalette(Utils.Constants.ComponentType.PRODUCT);
+
+            //initiating vl
+            this.updateComponentLeftPalette(Utils.Constants.ResourceType.VL);
+        };
+
+        private updateData = (latestVersionComponents: Array<Models.Components.Component>, leftPaletteDataObj: LeftPaletteDataObject) => {
+
+            let fullDataComponentsArray: Array<Models.Components.Component> = new Array<Models.Components.Component>();
+            let displayComponentsArray: Array<Models.DisplayComponent> = new Array<Models.DisplayComponent>();
+
+            _.forEach(latestVersionComponents, (componentObj: any) => {
+                let component: Models.Components.Component = this.ComponentFactory.createComponent(componentObj);
+                fullDataComponentsArray.push(component);
+                displayComponentsArray.push(new Models.DisplayComponent(component));
+            });
+
+            leftPaletteDataObj.fullDataLeftPaletteComponents = leftPaletteDataObj.fullDataLeftPaletteComponents.concat(fullDataComponentsArray);
+            leftPaletteDataObj.displayLeftPanelComponents = leftPaletteDataObj.displayLeftPanelComponents.concat(displayComponentsArray);
+        };
+
+        private getTypeUrl = (componentType: string): string => {
+            return Utils.Constants.ComponentType.PRODUCT === componentType ? "services" : "resources";
+        };
+
+        private onFinishLoading = (componentType: string, leftPaletteData: LeftPaletteDataObject): void => {
+            leftPaletteData.currentUpdatingIdsList = [];
+            this.EventListenerService.notifyObservers(leftPaletteData.onFinishLoadingEvent);
+        };
+
+        private getPartialLastVersionFullComponents = (componentType: string, componentInternalType: string, leftPaletteData: LeftPaletteDataObject): void => {
+            this.restangular.one(this.getTypeUrl(componentType)).one('/latestversion/notabstract').customPOST(leftPaletteData.currentUpdatingIdsList, '', {'internalComponentType': componentInternalType}).then((componentsArray: any) => {
+                this.updateData(componentsArray, leftPaletteData);
+                this.onFinishLoading(componentType, leftPaletteData); //when finish loading update view
+            });
+        };
+
+        private removeNotUpdatedComponents = (leftPaletteObject: LeftPaletteDataObject) => {
+
+            leftPaletteObject.fullDataLeftPaletteComponents = _.filter(leftPaletteObject.fullDataLeftPaletteComponents, (component)=> {
+                return leftPaletteObject.currentUpdatingIdsList.indexOf(component.uniqueId) != -1;
+            });
+            leftPaletteObject.displayLeftPanelComponents = _.filter(leftPaletteObject.displayLeftPanelComponents, (component)=> {
+                return leftPaletteObject.currentUpdatingIdsList.indexOf(component.uniqueId) != -1;
+            });
+        };
+
+        private findIdsToUpdate = (leftPaletteObj: LeftPaletteDataObject): Array<string> => {
+            let idsToUpdate = <string[]>_.difference(leftPaletteObj.currentUpdatingIdsList, _.map(leftPaletteObj.fullDataLeftPaletteComponents, 'uniqueId'));
+            let neededUpdate = _.filter(leftPaletteObj.fullDataLeftPaletteComponents, (component) => {
+                let updated = _.find(leftPaletteObj.latestVersionAndIdsList, (versionAndId: LeftPanelLatestVersion) => {
+                    return versionAndId.uid === component.uniqueId && versionAndId.version != component.version
+                });
+                return updated != undefined;
+            });
+            if (neededUpdate && neededUpdate.length > 0) {
+                let neededUpdateIds = <string[]>_.map(neededUpdate, 'uid');
+                idsToUpdate.concat(neededUpdateIds);
+            }
+            return idsToUpdate;
+        };
+
+        private updateCurrentIdsList = (componentType: string, leftPaletteObj: LeftPaletteDataObject): void=> {
+            this.removeNotUpdatedComponents(leftPaletteObj);
+            leftPaletteObj.currentUpdatingIdsList = this.findIdsToUpdate(leftPaletteObj);
+            //remove all components that needed update from current lists
+            if (leftPaletteObj.currentUpdatingIdsList.length > 0) {
+                leftPaletteObj.displayLeftPanelComponents = _.filter(leftPaletteObj.displayLeftPanelComponents, (component)=> {
+                    return leftPaletteObj.currentUpdatingIdsList.indexOf(component.uniqueId) === -1;
+                });
+                leftPaletteObj.fullDataLeftPaletteComponents = _.filter(leftPaletteObj.fullDataLeftPaletteComponents, (component)=> {
+                    return leftPaletteObj.currentUpdatingIdsList.indexOf(component.uniqueId) === -1;
+                });
+            }
+        };
+
+        private updateLeftPalette = (componentType, componentInternalType: string, leftPaletteData: LeftPaletteDataObject): void => {
+            if (leftPaletteData.currentUpdatingIdsList.length > 0) return; //this means the service is still performing update
+            this.restangular.one(this.getTypeUrl(componentType)).one('/latestversion/notabstract/uidonly').get({'internalComponentType': componentInternalType}).then((latestVersionUniqueIds: Array<LeftPanelLatestVersion>) => {
+                leftPaletteData.latestVersionAndIdsList = latestVersionUniqueIds;
+                leftPaletteData.currentUpdatingIdsList = <string[]>_.map(latestVersionUniqueIds, 'uid')
+
+                if (leftPaletteData.fullDataLeftPaletteComponents.length === 0) { //this is when first loading product or resource left palette
+                    this.getPartialLastVersionFullComponents(componentType, componentInternalType, leftPaletteData);
+                } else {
+                    this.updateCurrentIdsList(componentType, leftPaletteData);
+                    if (leftPaletteData.currentUpdatingIdsList.length === 0) {
+                        this.onFinishLoading(componentType, leftPaletteData); //when finish loading update view
+                        return;
+                    }
+                    this.getPartialLastVersionFullComponents(componentType, componentInternalType, leftPaletteData);
+                }
+            });
+        };
+
+        public getLeftPanelComponentsForDisplay = (componentType: string): Array<Models.DisplayComponent> => {
+            switch (componentType) {
+                case Utils.Constants.ComponentType.SERVICE:
+                    return this.serviceLeftPaletteData.displayLeftPanelComponents;
+                case Utils.Constants.ComponentType.PRODUCT:
+                    return this.productLeftPaletteData.displayLeftPanelComponents;
+                default:
+                    return this.resourceLeftPaletteData.displayLeftPanelComponents;
+            }
+        };
+
+        public getFullDataComponentList = (componentType: string): Array<Models.Components.Component> => {
+            switch (componentType) {
+                case Utils.Constants.ResourceType.VL:
+                    return this.vlData.fullDataLeftPaletteComponents;
+                case Utils.Constants.ComponentType.SERVICE:
+                    return this.serviceLeftPaletteData.fullDataLeftPaletteComponents;
+                case Utils.Constants.ComponentType.PRODUCT:
+                    return this.productLeftPaletteData.fullDataLeftPaletteComponents;
+                default :
+                    return this.resourceLeftPaletteData.fullDataLeftPaletteComponents;
+            }
+        };
+
+        public getFullDataComponentListWithVls = (componentType: string): Array<Models.Components.Component> => {
+            let listPart1: Array<Models.Components.Component>;
+            let listPart2: Array<Models.Components.Component>;
+            if (componentType === Utils.Constants.ResourceType.VL) {
+                listPart1 = [];
+                listPart2 = this.getFullDataComponentList(Utils.Constants.ResourceType.VL);
+            } else {
+                listPart1 = this.getFullDataComponentList(componentType);
+                listPart2 = this.getFullDataComponentList(Utils.Constants.ResourceType.VL);
+            }
+            return listPart1.concat(listPart2);
+        };
+
+        public updateSpecificComponentLeftPalette = (component: Models.Components.Component, componentType: string): void => {
+            let listComponents: Array<Models.Components.Component> = this.getFullDataComponentList(componentType);
+            for (let i in listComponents) {
+                if (listComponents[i].uniqueId === component.uniqueId) {
+                    listComponents[i] = component;
+                }
+            }
+        };
+
+        public updateComponentLeftPalette = (componentType): void => {
+            switch (componentType) {
+                case Utils.Constants.ResourceType.VL:
+                    this.updateLeftPalette(Utils.Constants.ComponentType.RESOURCE, Utils.Constants.ResourceType.VL, this.vlData);
+                    break;
+                case Utils.Constants.ComponentType.SERVICE:
+                    this.updateLeftPalette(Utils.Constants.ComponentType.SERVICE, Utils.Constants.ComponentType.SERVICE, this.serviceLeftPaletteData);
+                    break;
+                case Utils.Constants.ComponentType.PRODUCT:
+                    this.updateLeftPalette(Utils.Constants.ComponentType.PRODUCT, Utils.Constants.ComponentType.SERVICE, this.productLeftPaletteData);
+                    break;
+                default:
+                    this.updateLeftPalette(Utils.Constants.ComponentType.RESOURCE, Utils.Constants.ResourceType.VF, this.resourceLeftPaletteData);
+            }
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/services/configuration-ui-service.ts b/catalog-ui/app/scripts/services/configuration-ui-service.ts
new file mode 100644
index 0000000000..51eb3dcd9c
--- /dev/null
+++ b/catalog-ui/app/scripts/services/configuration-ui-service.ts
@@ -0,0 +1,49 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+  'use strict'
+
+  interface IConfigurationUiService {
+    getConfigurationUi(): ng.IPromise<any>;
+  }
+
+  export class ConfigurationUiService implements IConfigurationUiService{
+
+    static '$inject' = ['$http', '$q','sdcConfig'];
+    private api: Models.IApi;
+
+    constructor(private $http: ng.IHttpService, private $q: ng.IQService, sdcConfig: Models.IAppConfigurtaion){
+      this.api = sdcConfig.api;
+    }
+
+      getConfigurationUi = (): ng.IPromise<any> =>{
+      let defer = this.$q.defer<any>();
+      this.$http.get(this.api.root+this.api.GET_configuration_ui)
+      .success((result: any) => {
+          defer.resolve(result);
+      });
+      return defer.promise;
+    }
+  }
+
+
+}
diff --git a/catalog-ui/app/scripts/services/cookie-service.ts b/catalog-ui/app/scripts/services/cookie-service.ts
new file mode 100644
index 0000000000..b23a7dccde
--- /dev/null
+++ b/catalog-ui/app/scripts/services/cookie-service.ts
@@ -0,0 +1,95 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+  'use strict';
+
+  interface ICookieService {
+      getUserId(): string;
+      getFirstName(): string;
+      getLastName(): string;
+      getEmail(): string;
+      getUserIdSuffix(): string;
+  }
+
+  export class CookieService implements ICookieService {
+
+      static '$inject' = ['sdcConfig', '$document'];
+      private cookie: Sdc.Models.ICookie;
+      private cookiePrefix: string;
+
+
+      constructor(sdcConfig: Models.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/app/scripts/services/data-types-service.ts b/catalog-ui/app/scripts/services/data-types-service.ts
new file mode 100644
index 0000000000..0e5fca8b5d
--- /dev/null
+++ b/catalog-ui/app/scripts/services/data-types-service.ts
@@ -0,0 +1,129 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+    'use strict';
+
+    export interface IDataTypesService {
+        //declare methods
+        getAllDataTypes():ng.IPromise<Models.PropertyModel>;
+        getFirsLevelOfDataTypeProperties(dataTypeName:string, dataTypes:Models.DataTypesMap):Array<Models.DataTypePropertyModel>;
+        isDataTypeForSchemaType(property:Models.SchemaProperty, types:Models.DataTypesMap):boolean;
+        isDataTypeForPropertyType(property:Models.PropertyModel, types:Models.DataTypesMap):boolean;
+        isDataTypeForDataTypePropertyType(property:Models.DataTypePropertyModel, types:Models.DataTypesMap):boolean;
+    }
+
+    export class DataTypesService implements IDataTypesService {
+
+        static '$inject' = [
+            'sdcConfig',
+            '$q',
+            '$http'
+        ];
+
+        constructor(private sdcConfig:Models.IAppConfigurtaion,
+                    private $q:ng.IQService,
+                    private $http:ng.IHttpService) {
+        }
+
+        //if the dt derived from simple- return the first parent type, else- return null
+        private getTypeForDataTypeDerivedFromSimple = (dataTypeName:string, dataTypes:Models.DataTypesMap):string => {
+            /////////temporary hack for tosca primitives///////////////////////
+            if(!dataTypes[dataTypeName]){
+                return 'string';
+            }
+            ///////////////////////////////////////////////////////////////////
+            if(dataTypes[dataTypeName].derivedFromName == "tosca.datatypes.Root" || dataTypes[dataTypeName].properties){
+                return null;
+            }
+            if(Utils.Constants.PROPERTY_DATA.SIMPLE_TYPES.indexOf(dataTypes[dataTypeName].derivedFromName) > -1 ){
+                return dataTypes[dataTypeName].derivedFromName
+            }
+            return this.getTypeForDataTypeDerivedFromSimple(dataTypes[dataTypeName].derivedFromName,dataTypes);
+        };
+
+        public getAllDataTypes = ():ng.IPromise<Models.PropertyModel> => {
+            let deferred = this.$q.defer();
+            this.$http({
+                url: this.sdcConfig.api.root + this.sdcConfig.api.component_api_root + "dataTypes",
+                method: "get"
+            })
+            .success((response:any) => {
+                deferred.resolve(response);
+            })
+            .error((err) => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        //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, dataTypes:Models.DataTypesMap):Array<Models.DataTypePropertyModel> => {
+            let properties = dataTypes[dataTypeName].properties || [];
+            if(dataTypes[dataTypeName].derivedFromName != "tosca.datatypes.Root" ){
+                properties = this.getFirsLevelOfDataTypeProperties(dataTypes[dataTypeName].derivedFromName,dataTypes).concat(properties);
+            }
+            return properties;
+        };
+
+        //return false when type= data type (=not simple type) that not derived from simple type
+        public isDataTypeForSchemaType = (property:Models.SchemaProperty, types:Models.DataTypesMap):boolean=>{
+            property.simpleType="";
+            if(property.type && Utils.Constants.PROPERTY_DATA.TYPES.indexOf(property.type) > -1){
+                return false;
+            }
+            let simpleType = this.getTypeForDataTypeDerivedFromSimple(property.type, types);
+            if(simpleType){
+                property.simpleType=simpleType;
+                return false;
+            }
+            return true;
+        };
+
+        public isDataTypeForPropertyType = (property:Models.PropertyModel, types:Models.DataTypesMap):boolean=>{
+            property.simpleType="";
+            if(property.type && Utils.Constants.PROPERTY_DATA.TYPES.indexOf(property.type) > -1){
+                return false;
+            }
+            let simpleType = this.getTypeForDataTypeDerivedFromSimple(property.type, types);
+            if(simpleType){
+                property.simpleType=simpleType;
+                return false;
+            }
+            return true;
+        };
+
+        public isDataTypeForDataTypePropertyType = (property:Models.DataTypePropertyModel, types:Models.DataTypesMap):boolean=>{
+            property.simpleType="";
+            if(property.type && Utils.Constants.PROPERTY_DATA.TYPES.indexOf(property.type) > -1){
+                return false;
+            }
+            let simpleType = this.getTypeForDataTypeDerivedFromSimple(property.type, types);
+            if(simpleType){
+                property.simpleType=simpleType;
+                return false;
+            }
+            return true;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/services/ecomp-service.ts b/catalog-ui/app/scripts/services/ecomp-service.ts
new file mode 100644
index 0000000000..d7910bd612
--- /dev/null
+++ b/catalog-ui/app/scripts/services/ecomp-service.ts
@@ -0,0 +1,54 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+    'use strict';
+
+    interface IEcompHeaderService {
+        getMenuItems(userId): ng.IPromise<Array<any>>;
+    }
+
+    export class EcompHeaderService implements IEcompHeaderService {
+        static '$inject' = ['$http', '$q', 'sdcConfig'];
+        private api:Models.IApi;
+
+        constructor(private $http:ng.IHttpService,
+                    private $q:ng.IQService,
+                    private sdcConfig:Models.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))
+                .success((response:any) => {
+                    defer.resolve(response);
+                })
+                .error((response) => {
+                    defer.reject(response);
+                });
+
+            return defer.promise;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/services/entity-service.ts b/catalog-ui/app/scripts/services/entity-service.ts
new file mode 100644
index 0000000000..a9d5a421ce
--- /dev/null
+++ b/catalog-ui/app/scripts/services/entity-service.ts
@@ -0,0 +1,114 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+    'use strict';
+
+    interface IEntityService {
+        getAllComponents(): ng.IPromise<Array<Models.Components.Component>>;
+    }
+
+    interface IComponentsArray {
+        services:Array<Models.Components.Service>;
+        resources:Array<Models.Components.Resource>;
+        products:Array<Models.Components.Product>;
+    }
+
+    export class EntityService implements IEntityService {
+        static '$inject' = ['$http', '$q', 'sdcConfig', 'Sdc.Services.SharingService','ComponentFactory','Sdc.Services.CacheService'];
+        private api:Models.IApi;
+
+        constructor(private $http:ng.IHttpService,
+                    private $q:ng.IQService,
+                    private sdcConfig:Models.IAppConfigurtaion,
+                    private sharingService:Sdc.Services.SharingService,
+                    private ComponentFactory: Sdc.Utils.ComponentFactory,
+                    private cacheService:Sdc.Services.CacheService
+        ) {
+            this.api = sdcConfig.api;
+        }
+
+        getCatalog = ():ng.IPromise<Array<Models.Components.Component>> => {
+            let defer = this.$q.defer<Array<Models.Components.Component>>();
+            this.$http.get(this.api.root + this.api.GET_catalog)
+                .success((followedResponse:IComponentsArray) => {
+
+                    let componentsList:Array<Models.Components.Component> = new Array();
+
+                    followedResponse.services.forEach((serviceResponse: Models.Components.Service) => {
+                        let component:Models.Components.Service = this.ComponentFactory.createService(serviceResponse); // new Models.Components.Service(serviceResponse);
+                        componentsList.push(component);
+                        this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                    });
+
+                    followedResponse.resources.forEach((resourceResponse:Models.Components.Resource) => {
+                        let component:Models.Components.Resource = this.ComponentFactory.createResource(resourceResponse);
+                        componentsList.push(component);
+                        this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                    });
+
+                     followedResponse.products.forEach((productResponse:Models.Components.Product) => {
+
+                         let component:Models.Components.Product =  this.ComponentFactory.createProduct(productResponse);
+                         componentsList.push(component);
+                         this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                    });
+
+                    this.cacheService.set('breadcrumbsComponents',componentsList);
+                    defer.resolve(componentsList);
+                })
+                .error((responce) => {
+                    defer.reject(responce);
+                });
+            return defer.promise;
+        };
+
+        getAllComponents = ():ng.IPromise<Array<Models.Components.Component>> => {
+            let defer = this.$q.defer<Array<Models.Components.Component>>();
+            this.$http.get(this.api.root + this.api.GET_element)
+                .success((componentResponse:IComponentsArray) => {
+                    let componentsList:Array<Models.Components.Component> = [];
+
+                    componentResponse.services && componentResponse.services.forEach((serviceResponse:Models.Components.Service) => {
+                            let component:Models.Components.Service = this.ComponentFactory.createService(serviceResponse);
+                            componentsList.push(component);
+                             this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                        });
+
+                    componentResponse.resources && componentResponse.resources.forEach((resourceResponse:Models.Components.Resource) => {
+                        let component:Models.Components.Resource = this.ComponentFactory.createResource(resourceResponse);
+                        componentsList.push(component);
+                        this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                    });
+
+                    componentResponse.products && componentResponse.products.forEach((productsResponse:Models.Components.Product) => {
+                        let component:Models.Components.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/app/scripts/services/event-listener-service.ts b/catalog-ui/app/scripts/services/event-listener-service.ts
new file mode 100644
index 0000000000..67afd65c56
--- /dev/null
+++ b/catalog-ui/app/scripts/services/event-listener-service.ts
@@ -0,0 +1,78 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 7/4/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+    'use strict';
+
+    interface IEventListenerService {
+
+    }
+
+    interface ICallbackData {
+        callback:Function;
+        args:any[];
+    }
+
+    export class EventListenerService implements IEventListenerService {
+
+        public observerCallbacks:Utils.Dictionary<string, ICallbackData[]> = new Utils.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) => {
+            if (this.observerCallbacks.containsKey(eventName)) {
+                this.observerCallbacks.remove(eventName);
+            }
+        };
+
+        public notifyObservers = function (eventName:string, ...args) {
+            _.forEach(this.observerCallbacks.getValue(eventName), (callbackData:ICallbackData) => {
+                callbackData.callback(...args);
+            });
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/services/header-interceptor.ts b/catalog-ui/app/scripts/services/header-interceptor.ts
new file mode 100644
index 0000000000..7f362d3f8c
--- /dev/null
+++ b/catalog-ui/app/scripts/services/header-interceptor.ts
@@ -0,0 +1,93 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    'use strict';
+
+    //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 = [
+            '$log',
+            '$injector',
+            '$q',
+            'uuid4',
+            'Sdc.Services.SharingService',
+            'sdcConfig',
+            '$location'
+
+
+        ];
+
+        public static Factory($log: ng.ILogService,
+                              $injector: ng.auto.IInjectorService,
+                              $q: ng.IQService,
+                              uuid4: any,
+                              sharingService: Sdc.Services.SharingService,
+                              sdcConfig: Models.IAppConfigurtaion,
+                              $location: ng.ILocationService) {
+            return new HeaderInterceptor($log, $injector, $q, uuid4, sharingService, sdcConfig, $location);
+        }
+
+        constructor(private $log: ng.ILogService,
+                    private $injector: ng.auto.IInjectorService,
+                    private $q: ng.IQService,
+                    private uuid4: any,
+                    private sharingService: Sdc.Services.SharingService,
+                    private sdcConfig: Models.IAppConfigurtaion,
+                    private $location: ng.ILocationService) {
+            this.$log.debug('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: Utils.Dictionary<string, string> = this.sharingService.getUuidMap();
+            if (map && requestSuccess.url.indexOf(this.sdcConfig.api.root) === 0) {
+                this.$log.debug("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/app/scripts/services/http-error-interceptor.ts b/catalog-ui/app/scripts/services/http-error-interceptor.ts
new file mode 100644
index 0000000000..c04659dfec
--- /dev/null
+++ b/catalog-ui/app/scripts/services/http-error-interceptor.ts
@@ -0,0 +1,118 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    'use strict';
+
+    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: Sdc.ViewModels.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: Utils.Constants.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: Utils.Constants.SEVERITY.ERROR
+                };
+            }
+
+            let modalsHandler = this.$injector.get('ModalsHandler');
+            modalsHandler.openServerMessageModal(data);
+
+            return this.$q.reject(rejection);
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/services/loader-service.ts b/catalog-ui/app/scripts/services/loader-service.ts
new file mode 100644
index 0000000000..6a1a1febe1
--- /dev/null
+++ b/catalog-ui/app/scripts/services/loader-service.ts
@@ -0,0 +1,26 @@
+/**
+ * Created by obarda on 3/13/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    'use strict';
+
+    export class LoaderService {
+
+
+        constructor(private eventListenerService: Services.EventListenerService) {
+
+        }
+
+        public showLoader(...args) {
+            this.eventListenerService.notifyObservers(Utils.Constants.EVENTS.SHOW_LOADER_EVENT, ...args);
+        }
+
+        public hideLoader(...args) {
+            this.eventListenerService.notifyObservers(Utils.Constants.EVENTS.HIDE_LOADER_EVENT, ...args);
+        }
+
+    }
+
+    LoaderService.$inject = ['EventListenerService'];
+}
diff --git a/catalog-ui/app/scripts/services/onboarding-service.ts b/catalog-ui/app/scripts/services/onboarding-service.ts
new file mode 100644
index 0000000000..c09871d67f
--- /dev/null
+++ b/catalog-ui/app/scripts/services/onboarding-service.ts
@@ -0,0 +1,103 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+    'use strict';
+
+    interface IOnboardingService {
+        getOnboardingComponents(): ng.IPromise<Array<Models.Components.IComponent>>;
+        getComponentFromCsarUuid(csarUuid:string): ng.IPromise<Models.Components.Component>;
+        downloadOnboardingCsar(packageId:string):ng.IPromise<Models.IFileDownload>;
+    }
+
+    export class OnboardingService implements IOnboardingService {
+
+        static '$inject' = ['$http', '$q', 'sdcConfig', 'ComponentFactory'];
+        private api:Models.IApi;
+
+        constructor(private $http:ng.IHttpService,
+                    private $q:ng.IQService,
+                    private sdcConfig:Models.IAppConfigurtaion,
+                    private ComponentFactory: Sdc.Utils.ComponentFactory
+        ) {
+            this.api = sdcConfig.api;
+        }
+
+        getOnboardingComponents = ():ng.IPromise<Array<Models.Components.IComponent>> => {
+            let defer = this.$q.defer<Array<Models.Components.IComponent>>();
+            this.$http.get(this.api.GET_onboarding)
+                .success((response:any) => {
+                    let onboardingComponents:Array<Models.ICsarComponent> = response.results;
+                    let componentsList:Array<Models.Components.IComponent> = new Array();
+
+                    onboardingComponents.forEach((obc: Models.ICsarComponent) => {
+                        let component:Models.Components.Component = this.ComponentFactory.createFromCsarComponent(obc);
+                        componentsList.push(component);
+                    });
+
+                    defer.resolve(componentsList);
+                })
+                .error((response) => {
+                    defer.reject(response);
+                });
+
+            return defer.promise;
+        };
+
+        downloadOnboardingCsar = (packageId:string):ng.IPromise<Models.IFileDownload> => {
+            let defer = this.$q.defer();
+            this.$http({
+                    url: this.api.GET_onboarding + "/" + packageId,
+                    method: "get",
+                    responseType: "blob"
+                })
+                .success((response:any) => {
+                    defer.resolve(response);
+                })
+                .error((err) => {
+                    defer.reject(err);
+                });
+
+            return defer.promise;
+        };
+
+        getComponentFromCsarUuid = (csarUuid:string):ng.IPromise<Models.Components.Component> => {
+            let defer = this.$q.defer<Models.Components.Component>();
+            this.$http.get(this.api.root + this.api.GET_component_from_csar_uuid.replace(':csar_uuid', csarUuid))
+                .success((response:any) => {
+                    let component:Models.Components.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.status!==400) {
+                        component = new Models.Components.Resource(null, this.$q, <Models.Components.Resource>response);
+                    }
+                    defer.resolve(component);
+                })
+                .error((response) => {
+                    defer.reject(response);
+                });
+
+            return defer.promise;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/services/progress-service.ts b/catalog-ui/app/scripts/services/progress-service.ts
new file mode 100644
index 0000000000..caa463fc98
--- /dev/null
+++ b/catalog-ui/app/scripts/services/progress-service.ts
@@ -0,0 +1,112 @@
+/*-
+ * ============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/7/2016.
+ */
+/**
+ * Created by obarda on 7/4/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+
+    '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 => {
+            var 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
+                        var 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 =>{
+           var 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/app/scripts/services/relation-icons-service.ts b/catalog-ui/app/scripts/services/relation-icons-service.ts
new file mode 100644
index 0000000000..3d3b494f16
--- /dev/null
+++ b/catalog-ui/app/scripts/services/relation-icons-service.ts
@@ -0,0 +1,61 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+  'use strict';
+
+  export interface IRelationIconsService {
+      getIconPath(iconName:string):string;
+  }
+
+  export class RelationIconsService implements IRelationIconsService {
+      constructor() {}
+      private icons: Array<string> = [
+          'AttachesTo',
+          'BindsTo',
+          'DependsOn',
+          'HostedOn',
+          'LinksTo',
+          'RoutesTo'
+      ];
+
+      public getIconPath = (relationshipType:string): string => {
+        let result:string = 'ConnectedTo';
+        let baseUrl:string =  '/styles/images/relationship-icons/';
+
+          if (relationshipType) {
+              let arr = relationshipType.split('.'); // looks like tosca.relationships.AttachesTo
+              relationshipType = arr[arr.length - 1];
+              if (this.icons.indexOf(relationshipType) > -1) {
+                  result = relationshipType;
+              }
+              if('LinksTo'==result){
+                  return '';
+              }
+          }
+
+        return baseUrl + result + '.svg';
+      }
+
+  }
+}
+
+
+
diff --git a/catalog-ui/app/scripts/services/sdc-version-service.ts b/catalog-ui/app/scripts/services/sdc-version-service.ts
new file mode 100644
index 0000000000..1744381bca
--- /dev/null
+++ b/catalog-ui/app/scripts/services/sdc-version-service.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    'use strict';
+
+    export interface ISdcVersionService {
+        getVersion():ng.IPromise<any>;
+    }
+    export class SdcVersionService implements ISdcVersionService{
+
+        static '$inject' = ['$http', '$q','sdcConfig'];
+        private api: Models.IApi;
+
+        constructor(private $http: ng.IHttpService, private $q: ng.IQService, sdcConfig: Models.IAppConfigurtaion){
+            this.api = sdcConfig.api;
+        }
+
+        public getVersion():ng.IPromise<any>{
+            let defer = this.$q.defer<Array<Models.Distribution>>();
+            let url = this.api.root + this.api.GET_SDC_Version;
+            console.log("======================>" + url);
+            this.$http.get(url)
+                .success((version: any) => {
+                    defer.resolve(version);
+                });
+            return defer.promise;
+        }
+    }
+}
+
diff --git a/catalog-ui/app/scripts/services/sharing-service.ts b/catalog-ui/app/scripts/services/sharing-service.ts
new file mode 100644
index 0000000000..14c3158611
--- /dev/null
+++ b/catalog-ui/app/scripts/services/sharing-service.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    'use strict';
+
+    export class SharingService {
+
+        private uuidMap: Utils.Dictionary<string, string> = new Utils.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 = ():Utils.Dictionary<string, string> => {
+            return this.uuidMap;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/services/url-tobase64-service.ts b/catalog-ui/app/scripts/services/url-tobase64-service.ts
new file mode 100644
index 0000000000..2d6980da3f
--- /dev/null
+++ b/catalog-ui/app/scripts/services/url-tobase64-service.ts
@@ -0,0 +1,52 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+    '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/app/scripts/services/user-resource-service.ts b/catalog-ui/app/scripts/services/user-resource-service.ts
new file mode 100644
index 0000000000..7414e2221e
--- /dev/null
+++ b/catalog-ui/app/scripts/services/user-resource-service.ts
@@ -0,0 +1,123 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Services {
+  'use strict';
+
+  // Define an interface of the object you want to use, providing it's properties
+  export interface IUserResource extends Models.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: Models.IAppConfigurtaion,
+      cookieService: Services.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: Models.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'];
+}