Catalog alignment

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

6 files changed, 657 insertions, 253 deletions

diff --git a/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
index b0cc1b8f1a..9952b03c7c 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
@@ -24,7 +24,7 @@
 import { Injectable } from '@angular/core';
 import {WorkspaceMode, ComponentState, Role} from "../../../utils/constants";
 import { Component as ComponentData } from "app/models";
-import { CacheService } from "app/services/cache-service"
+import { CacheService } from "app/services-ng2";
 
 @Injectable()
 
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
index 6e9d0e8031..15e5a7960a 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
@@ -20,15 +20,18 @@
 
 
 import {Injectable} from "@angular/core";
-import {Component} from "../../../models/components/component";
+import {Component} from "app/models";
 import {ComponentServiceNg2} from "./component.service";
 import {ServiceServiceNg2} from "./service.service";
+import {CacheService} from "app/services-ng2";
 
 @Injectable()
 export class ComponentServiceFactoryNg2 {
+
     componentService: ComponentServiceNg2;
     serviceService: ServiceServiceNg2;
-    constructor(componentService: ComponentServiceNg2, serviceService: ServiceServiceNg2) {
+
+    constructor(componentService: ComponentServiceNg2, serviceService: ServiceServiceNg2, private cacheService:CacheService) {
         this.serviceService = serviceService;
         this.componentService = componentService;
     }
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index 445e1231f9..760bfc591b 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -23,51 +23,52 @@ import {Injectable, Inject} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import {Response, URLSearchParams, Headers} from '@angular/http';
-import { Component, ComponentInstance, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData,
-    PropertyBEModel, InterfaceModel, OperationModel, BEOperationModel, Capability, Requirement, PolicyInstance} from "app/models";
-import {COMPONENT_FIELDS, CommonUtils, SERVICE_FIELDS} from "app/utils";
-import {downgradeInjectable} from '@angular/upgrade/static';
+import { Component, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData, OperationModel, CreateOperationResponse, ArtifactModel} from "app/models";
+import {COMPONENT_FIELDS} from "app/utils";
 import {ComponentGenericResponse} from "../responses/component-generic-response";
 import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
 import {API_QUERY_PARAMS} from "app/utils";
-import { ComponentType, ServerTypeUrl } from "../../../utils/constants";
-import { HttpService } from '../http.service';
+import {ComponentType, ServerTypeUrl, SERVICE_FIELDS} from "../../../utils/constants";
 import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
-import {ConstraintObject} from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
 import {IDependenciesServerResponse} from "../responses/dependencies-server-response";
 import {AutomatedUpgradeGenericResponse} from "../responses/automated-upgrade-response";
 import {IAutomatedUpgradeRequestObj} from "../../pages/automated-upgrade/automated-upgrade.service";
-
-declare var angular:angular.IAngularStatic;
-
+import {ComponentInstance} from "../../../models/componentsInstances/componentInstance";
+import {CommonUtils} from "../../../utils/common-utils";
+import {RelationshipModel} from "../../../models/graph/relationship";
+import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
+import { BEOperationModel, InterfaceModel } from "../../../models/operation";
+import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
+import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
+import { ConstraintObject } from "../../components/logic/service-dependencies/service-dependencies.component";
+import { Requirement } from "../../../models/requirement";
+import { Capability } from "../../../models/capability";
+
+/*
+PLEASE DO NOT USE THIS SERVICE IN ANGULAR2! Use the topology-template.service instead
+ */
 @Injectable()
 export class ComponentServiceNg2 {
 
     protected baseUrl;
 
-    constructor(protected http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
-    protected getComponentDataByFieldsName(componentType:string, componentId: string, fields:Array<string>):Observable<ComponentGenericResponse> {
+    protected getComponentDataByFieldsName(componentType:string, componentId:string, fields:Array<string>):Observable<ComponentGenericResponse> {
 
-        let params:URLSearchParams = new URLSearchParams();
+        let params: HttpParams = new HttpParams();
         _.forEach(fields, (field:string):void => {
-            params.append(API_QUERY_PARAMS.INCLUDE, field);
+            params = params.append(API_QUERY_PARAMS.INCLUDE, field);
         });
 
-        return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {search: params})
-            .map((res:Response) => {
-                return this.analyzeComponentDataResponse(res);
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {params: params})
+            .map((res) => {
+                return new ComponentGenericResponse().deserialize(res);
             });
     }
-
-    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
-        return new ComponentGenericResponse().deserialize(res.json());
-    }
-
-    private getServerTypeUrl = (componentType:string):string => {
+    protected getServerTypeUrl = (componentType:string):string => {
         switch (componentType) {
             case ComponentType.SERVICE:
                 return ServerTypeUrl.SERVICES;
@@ -76,15 +77,23 @@ export class ComponentServiceNg2 {
         }
     }
 
-    getComponentMetadata(component:Component):Observable<ComponentGenericResponse> {
-        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    getFullComponent(uniqueId:string):Observable<ComponentGenericResponse> {
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + uniqueId)
+            .map((res) => {
+                return new ComponentGenericResponse().deserialize(res);
+            });
     }
 
+    getComponentMetadata(uniqueId:string, type:string):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    }
+
+
     getComponentInstanceAttributesAndProperties(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_INSTANCES_ATTRIBUTES]);
     }
 
-    getComponentInstanceProperties(component:Component):Observable<ComponentGenericResponse> {
+    getComponentInstanceProperties(component:Component): Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES]);
     }
 
@@ -132,17 +141,15 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
     }
 
-    getInterfaces(component:Component):Observable<ComponentGenericResponse> {
+    getInterfaceOperations(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INTERFACE_OPERATIONS]);
     }
 
     getInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.get<OperationModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations/' + operation.uniqueId);
     }
 
+    // tslint:disable-next-line:member-ordering
     createInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
         const operationList = {
             'interfaces': {
@@ -154,9 +161,9 @@ export class ComponentServiceNg2 {
                 }
             }
         };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
-            .map((res:Response) => {
-                const interf:InterfaceModel = _.find(res.json().interfaces, interf => interf.type === operation.interfaceType);
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
+            .map((res:any) => {
+                const interf:InterfaceModel = _.find(res.interfaces, interf => interf.type === operation.interfaceType);
                 const newOperation:OperationModel = _.find(interf.operations, op => op.name === operation.name);
                 return new OperationModel({
                     ...newOperation,
@@ -167,21 +174,22 @@ export class ComponentServiceNg2 {
             });
     }
 
+    // tslint:disable-next-line:member-ordering
     updateInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
         const operationList = {
-            'interfaces': {
+            interfaces: {
                 [operation.interfaceType]: {
-                    'type': operation.interfaceType,
-                    'operations': {
+                    type: operation.interfaceType,
+                    operations: {
                         [operation.name]: new BEOperationModel(operation)
                     }
                 }
             }
         };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
-            .map((res:Response) => {
-                const interf:InterfaceModel = _.find(res.json().interfaces, interf => interf.type === operation.interfaceType);
-                const newOperation:OperationModel = _.find(interf.operations, op => op.name === operation.name);
+        return this.http.put<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
+            .map((res: any) => {
+                const interf: InterfaceModel = _.find(res.interfaces, interf => interf.type === operation.interfaceType);
+                const newOperation: OperationModel = _.find(interf.operations, op => op.name === operation.name);
                 return new OperationModel({
                     ...newOperation,
                     interfaceType: interf.type,
@@ -191,18 +199,16 @@ export class ComponentServiceNg2 {
             });
     }
 
-    deleteInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId)
-            .map((res:Response) => {
-                return res.json();
-            });
+
+    deleteInterfaceOperation(component: Component, operation:OperationModel):Observable<OperationModel> {
+        return this.http.delete<OperationModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId);
     }
 
     getInterfaceTypes(component:Component):Observable<{[id:string]: Array<string>}> {
-        return this.http.get(this.baseUrl + 'interfaceLifecycleTypes')
-            .map((res:Response) => {
+        return this.http.get<any>(this.baseUrl + 'interfaceLifecycleTypes')
+            .map((res: any) => {
                 const interfaceMap = {};
-                _.forEach(res.json(), (interf:any) => {
+                _.forEach(res, (interf: any) => {
                     interfaceMap[interf.toscaPresentation.type] = _.keys(interf.toscaPresentation.operations);
                 });
                 return interfaceMap;
@@ -217,19 +223,18 @@ export class ComponentServiceNg2 {
             payloadData: oldOperation.artifactData
         };
 
-        const headers = new Headers();
+        const headers = new HttpHeaders();
         JSON.stringify(payload);
         const payloadString = JSON.stringify(payload, null, '  ');
         const md5Result = md5(payloadString).toLowerCase();
         headers.append('Content-MD5', btoa(md5Result));
 
         return this.http.post(this.baseUrl + component.getTypeUrl() + component.uuid + '/interfaces/' + newOperation.interfaceId + '/operations/' + newOperation.uniqueId + '/artifacts/' + newOperation.implementation.artifactUUID,
-                payload,
-                {headers}
-            ).map((res: Response) => {
-                const fileName = res.json().artifactDisplayName || res.json().artifactName;
+                payload, {headers}
+            ).map((res: any) => {
+                const fileName = res.artifactDisplayName || res.artifactName;
                 newOperation.artifactFileName = fileName;
-                return res.json();
+                return res;
             });
     }
 
@@ -237,78 +242,17 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
     }
 
-    createCapability(component: Component, capabilityData: Capability): Observable<Array<Capability>> {
-        let capBEObj = {
-            'capabilities': {
-                [capabilityData.type]: [capabilityData]
-            }
-        };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities', capBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    updateCapability(component: Component, capabilityData: Capability): Observable<Array<Capability>> {
-        let capBEObj = {
-            'capabilities': {
-                [capabilityData.type]: [capabilityData]
-            }
-        };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities', capBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    deleteCapability(component: Component, capId: string): Observable<Capability> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities/' + capId)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    createRequirement(component: Component, requirementData: Requirement): Observable<any> {
-        let reqBEObj = {
-            'requirements': {
-                [requirementData.capability]: [requirementData]
-            }
-        };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements', reqBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    updateRequirement(component: Component, requirementData: Requirement): Observable<any> {
-        let reqBEObj = {
-            'requirements': {
-                [requirementData.capability]: [requirementData]
-            }
-        };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements', reqBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    deleteRequirement(component: Component, reqId: string): Observable<Requirement> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements/' + reqId)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
     getDeploymentGraphData(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
     }
 
     createInput(component:Component, inputsToCreate:InstancePropertiesAPIMap, isSelf:boolean):Observable<any> {
-        let inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs)
-            .map(res => {
-                return res.json();
-            })
+        const inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs);
     }
 
     createListInput(component:Component, input:any, isSelf:boolean):Observable<any> {
@@ -324,10 +268,7 @@ export class ComponentServiceNg2 {
         } else {
             inputs = input;
         }
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/listInput', inputs)
-            .map(res => {
-                return res.json();
-            })
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/listInput', inputs);
     }
 
     createPolicy(component:Component, policiesToCreate:InstancePropertiesAPIMap, isSelf:boolean):Observable<any> {
@@ -341,78 +282,71 @@ export class ComponentServiceNg2 {
                         ...policiesToCreate.componentInstanceProperties
                     }
                 };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList)
-            .map(res => {
-                return res.json();
-            });
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList);
     }
 
     deletePolicy(component:Component, policy: PolicyInstance) {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy)
-            .map(res => {
-                return res.json();
-            });
+        return this.http.put<PolicyInstance>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy);
     }
 
-    restoreComponent(componentType:string, componentId:string){
+    restoreComponent(componentType:string, componentId:string) {
         return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/restore', {})
     }
 
-    archiveComponent(componentType:string, componentId:string){
+    archiveComponent(componentType:string, componentId:string) {
         return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/archive', {})
     }
 
 
     deleteInput(component:Component, input:InputBEModel):Observable<InputBEModel> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
-            .map((res:Response) => {
-                return new InputBEModel(res.json());
-            });
+
+        return this.http.delete<InputBEModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
+            .map((res) => {
+                return new InputBEModel(res);
+            })
     }
 
     updateComponentInputs(component:Component, inputs:InputBEModel[]):Observable<InputBEModel[]> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
-            .map((res:Response) => {
-                return res.json().map((input) => new InputBEModel(input));
+
+        return this.http.post<InputBEModel[]>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
+            .map((res) => {
+                return res.map((input) => new InputBEModel(input));
             })
     }
 
-    filterComponentInstanceProperties(component: Component, filterData:FilterPropertiesAssignmentData): Observable<InstanceBePropertiesMap> {//instance-property-be-map
-        let params: URLSearchParams = new URLSearchParams();
+    filterComponentInstanceProperties(component:Component, filterData:FilterPropertiesAssignmentData):Observable<InstanceBePropertiesMap> {//instance-property-be-map
+        let params: HttpParams = new HttpParams();
         _.forEach(filterData.selectedTypes, (type:string) => {
-            params.append('resourceType', type);
+            params = params.append('resourceType', type);
         });
 
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {search: params})
-            .map((res: Response) => {
-                return res.json();
-            });
+        return this.http.get<InstanceBePropertiesMap>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {params: params});
     }
 
     createServiceProperty(component: Component, propertyModel:PropertyBEModel): Observable<PropertyBEModel> {
         let serverObject = {};
         serverObject[propertyModel.name] = propertyModel;
         return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', serverObject)
-            .map(res => {
-                let property:PropertyBEModel = new PropertyBEModel(res.json());
+            .map((res: PropertyBEModel) => {
+                const property: PropertyBEModel = new PropertyBEModel(res);
                 return property;
             })
     }
 
-    getServiceProperties(component: Component): Observable<Array<PropertyBEModel>> {
+    getServiceProperties(component: Component): Observable<PropertyBEModel[]> {
         return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties')
-            .map((res: Response) => {
-                if (!res.text()){
+            .map((res: PropertyBEModel[]) => {
+                if (!res) {
                     return new Array<PropertyBEModel>();
                 }
-                return CommonUtils.initBeProperties(res.json());
+                return CommonUtils.initBeProperties(res);
             });
     }
 
     updateServiceProperties(component: Component, properties: PropertyBEModel[]) {
-        return this.http.put( this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', properties)
-            .map((res: Response) => {
-                const resJson = res.json();
+        return this.http.put<PropertyBEModel[]>( this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', properties)
+            .map((res) => {
+                const resJson = res;
                 return _.map(resJson,
                     (resValue:PropertyBEModel) => new PropertyBEModel(resValue));
             });
@@ -425,25 +359,16 @@ export class ComponentServiceNg2 {
             })
     }
 
-    getDependencies(componentType:string, componentId: string):Observable<Array<IDependenciesServerResponse>> {
-        return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies')
-            .map((res:Response) => {
-                return res.json();
-            });
+    getDependencies(componentType:string, componentId: string):Observable<IDependenciesServerResponse[]> {
+        return this.http.get<IDependenciesServerResponse[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies');
     }
 
-    automatedUpgrade(componentType:string, componentId: string, componentsIdsToUpgrade:Array<IAutomatedUpgradeRequestObj>):Observable<AutomatedUpgradeGenericResponse> {
-        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade)
-            .map((res:Response) => {
-                return res.json();
-            });
+    automatedUpgrade(componentType:string, componentId:string, componentsIdsToUpgrade:IAutomatedUpgradeRequestObj[]):Observable<AutomatedUpgradeGenericResponse> {
+        return this.http.post<AutomatedUpgradeGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade);
     }
 
-    updateComponentInstance(component:Component, componentInstance:ComponentInstance):Observable<ComponentInstance> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance)
-            .map((res:Response) => {
-                return res.json();
-            });
+    updateMultipleComponentInstances(componentId:string, instances:ComponentInstance[]):Observable<ComponentInstance[]> {
+        return this.http.post<ComponentInstance[]>(this.baseUrl + componentId + '/resourceInstance/multipleComponentInstance', instances);
     }
 
     getServiceFilterConstraints(component:Component):Observable<ComponentGenericResponse> {
@@ -451,24 +376,18 @@ export class ComponentServiceNg2 {
     }
 
     createServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraint:ConstraintObject):Observable<any> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter', constraint)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter', constraint);
     }
 
-    updateServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraints:Array<ConstraintObject>):Observable<any> {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/', constraints)
-            .map((res:Response) => {
-                return res.json();
-            });
+    updateServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraints:ConstraintObject[]):Observable<any> {
+        return this.http.put<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/', constraints);
     }
 
     deleteServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraintIndex:number) {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/' + constraintIndex)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.delete<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/' + constraintIndex);
     }
-}
 
+    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
+        return new ComponentGenericResponse().deserialize(res);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/component-services/resource.service.ts b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
index 699e762a60..d20f5415bc 100644
--- a/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
@@ -21,14 +21,14 @@
 import { Injectable } from '@angular/core';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class ResourceServiceNg2 {
 
     protected baseUrl = "";
 
-    constructor(private http: Http) {
+    constructor(private http: HttpClient) {
 
     }
 
diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
index dce4e814ec..9460a32323 100644
--- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
@@ -22,9 +22,7 @@ import { Injectable, Inject } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import { Response, URLSearchParams } from '@angular/http';
-import {Service, OperationModel} from "app/models";
-import { HttpService } from '../http.service';
+import {Service} from "app/models";
 
 import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
 import {ForwardingPath} from "app/models/forwarding-path";
@@ -34,77 +32,53 @@ import {Component} from "app/models/components/component";
 import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
 import {COMPONENT_FIELDS, SERVICE_FIELDS} from "app/utils/constants";
 import {ComponentServiceNg2} from "./component.service";
-import {ServiceGenericResponse} from "app/ng2/services/responses/service-generic-response";
 import {ServicePathMapItem} from "app/models/graph/nodes-and-links-map";
-import {ConsumptionInput} from 'app/ng2/components/logic/service-consumption/service-consumption.component';
-
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { OperationModel } from '../../../models/operation';
+import { ConsumptionInput } from '../../components/logic/service-consumption/service-consumption.component';
 
 @Injectable()
 export class ServiceServiceNg2 extends ComponentServiceNg2 {
 
     protected baseUrl = "";
 
-    constructor(protected http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         super(http, sdcConfig);
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
     validateConformanceLevel(service: Service): Observable<boolean> {
 
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uuid + '/conformanceLevelValidation')
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    getNodesAndLinksMap(service: Service):Observable<Array<ServicePathMapItem>> {
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/linksMap').map(res => {
-            return <Array<ServicePathMapItem>>res.json();
-        });
-    }
-
-    getServicePath(service: Service, id: string):Observable<any> {
-        return this.http.get(this.baseUrl  + service.getTypeUrl() + service.uniqueId +  '/paths/' + id)
-            .map(res => {
-                return res.json();
-            })
+        return this.http.get<boolean>(this.baseUrl + service.getTypeUrl() + service.uuid + '/conformanceLevelValidation');
     }
 
-    getServicePaths(service: Service):Observable<any> {
-        return this.http.get(this.baseUrl  + service.getTypeUrl() + service.uniqueId +  '/paths')
-            .map(res => {
-                return res.json();
-            })
+    getNodesAndLinksMap(serviceId: string):Observable<Array<ServicePathMapItem>> {
+        return this.http.get<Array<ServicePathMapItem>>(this.baseUrl + 'services/' + serviceId + '/linksMap');
     }
 
-    createOrUpdateServicePath(service: Service, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
+    createOrUpdateServicePath(serviceId: string, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
         if (inputsToCreate.uniqueId) {
-            return this.updateServicePath(service, inputsToCreate);
+            return this.updateServicePath(serviceId, inputsToCreate);
         } else {
-            return this.createServicePath(service, inputsToCreate);
+            return this.createServicePath(serviceId, inputsToCreate);
         }
     }
 
-    createServicePath(service: Service, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
+    createServicePath(serviceId: string, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
         let input = new ServicePathRequestData(inputsToCreate);
-
-        return this.http.post(this.baseUrl  + service.getTypeUrl() + service.uniqueId +   '/paths', input)
-            .map(res => {
-                return this.parseServicePathResponse(res);
-            });
+        return this.http.post<ForwardingPath>(this.baseUrl  + 'services/' + serviceId +   '/paths', input).map((res:any) => {
+            return this.parseServicePathResponse(res);
+        });
     }
 
-    deleteServicePath(service: Service, id: string):Observable<any> {
-        return this.http.delete(this.baseUrl  + service.getTypeUrl() + service.uniqueId + '/paths/' + id )
-            .map((res) => {
-                return res.json();
-            });
+    deleteServicePath(serviceId: string, id: string):Observable<any> {
+        return this.http.delete<any>(this.baseUrl  + 'services/' + serviceId + '/paths/' + id);
     }
 
-    updateServicePath(service: Service, inputsToUpdate:ForwardingPath):Observable<ForwardingPath> {
+    updateServicePath(serviceId: string, inputsToUpdate:ForwardingPath):Observable<ForwardingPath> {
         let input = new ServicePathRequestData(inputsToUpdate);
 
-        return this.http.put(this.baseUrl  + service.getTypeUrl() + service.uniqueId + '/paths', input)
+        return this.http.put<{[key:string]:ForwardingPath}>(this.baseUrl  + 'services/' + serviceId + '/paths', input)
             .map((res) => {
                 return this.parseServicePathResponse(res);
             });
@@ -122,28 +96,25 @@ export class ServiceServiceNg2 extends ComponentServiceNg2 {
     }
 
     getServiceConsumptionInputs(service: Service, serviceInstanceId: String, interfaceId: string, operation: OperationModel): Observable<any> {
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId + '/operations/' + operation.uniqueId + '/inputs')
-            .map(res => {
-                return res.json();
-            });
+        return this.http.get<any>(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId +
+            '/operations/' + operation.uniqueId + '/inputs');
     }
 
     createOrUpdateServiceConsumptionInputs(service: Service, serviceInstanceId: String, consumptionInputsList: Array<{[id: string]: Array<ConsumptionInput>}>): Observable<any> {
         return this.http.post(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId, consumptionInputsList);
     }
 
-    checkComponentInstanceVersionChange(service: Service, newVersionId: string):Observable<Array<string>> {
-        let instanceId = service.selectedInstance.uniqueId;
-        let queries = {componentInstanceId: instanceId, newComponentInstanceId: newVersionId};
+    checkComponentInstanceVersionChange(componentType:string, componentId:string, instanceId:string, newInstanceId:string):Observable<Array<string>> {
+        let queries = {componentInstanceId: instanceId, newComponentInstanceId: newInstanceId};
 
-        let params:URLSearchParams = new URLSearchParams();
+        let params:HttpParams = new HttpParams();
         _.map(_.keys(queries), (key:string):void => {
-            params.append(key, queries[key]);
+            params = params.append(key, queries[key]);
         });
 
-        let url = this.baseUrl + service.getTypeUrl() + service.uniqueId + '/paths-to-delete';
-        return this.http.get(url, {search: params}).map((res: Response) => {
-            return res.json().forwardingPathToDelete;
+        let url = this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/paths-to-delete';
+        return this.http.get<any>(url, {params: params}).map((res) => {
+            return res.forwardingPathToDelete;
         });
     }
 
@@ -151,12 +122,8 @@ export class ServiceServiceNg2 extends ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, SERVICE_FIELDS.FORWARDING_PATHS, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]);
     }
 
-    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
-        return new ServiceGenericResponse().deserialize(res.json());
-    }
-
-    private parseServicePathResponse(res: Response):ForwardingPath {
-        let resJSON = res.json();
+    private parseServicePathResponse(res: { [key:string]:ForwardingPath }):ForwardingPath {
+        let resJSON = res;
         let pathId = Object.keys(resJSON.forwardingPaths)[0];
         let forwardingPath = resJSON.forwardingPaths[pathId];
         let path:ForwardingPath = new ForwardingPath();
diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
new file mode 100644
index 0000000000..0abb163404
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
@@ -0,0 +1,515 @@
+/**
+ * Created by ob0695 on 6/26/2018.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import * as _ from "lodash";
+import {Injectable, Inject} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import {
+    Component,
+    InputBEModel,
+    InstancePropertiesAPIMap,
+    FilterPropertiesAssignmentData,
+    ArtifactModel,
+    PropertyModel,
+    IFileDownload,
+    AttributeModel,
+    IAttributeModel, Capability, Requirement
+} from "app/models";
+import {ArtifactGroupType, COMPONENT_FIELDS} from "app/utils";
+import {ComponentGenericResponse} from "../responses/component-generic-response";
+import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
+import {API_QUERY_PARAMS} from "app/utils";
+import {ComponentType, ServerTypeUrl, SERVICE_FIELDS} from "../../../utils/constants";
+import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
+import {IDependenciesServerResponse} from "../responses/dependencies-server-response";
+import {AutomatedUpgradeGenericResponse} from "../responses/automated-upgrade-response";
+import {IAutomatedUpgradeRequestObj} from "../../pages/automated-upgrade/automated-upgrade.service";
+import {ComponentInstance} from "../../../models/componentsInstances/componentInstance";
+import {CommonUtils} from "../../../utils/common-utils";
+import {RelationshipModel} from "../../../models/graph/relationship";
+import {ServiceGenericResponse} from "../responses/service-generic-response";
+import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
+import { HttpHelperService } from "../http-hepler.service";
+import {
+    Component as TopologyTemplate,
+    FullComponentInstance,
+    Service,
+    OperationModel,
+} from 'app/models';
+import { ConsumptionInput } from "../../components/logic/service-consumption/service-consumption.component";
+import { ConstraintObject } from "../../components/logic/service-dependencies/service-dependencies.component";
+import { ComponentMetadata } from "../../../models/component-metadata";
+import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
+import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
+
+/* we need to use this service from now, we will remove component.service when we finish remove the angular1.
+ The service is duplicated since we can not use downgrades service with NGXS*/
+
+@Injectable()
+export class TopologyTemplateService {
+
+    protected baseUrl;
+
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+        this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
+    }
+
+    getFullComponent(componentType: string, uniqueId: string): Observable<Component> {
+        return this.http.get<Component>(this.baseUrl + this.getServerTypeUrl(componentType) + uniqueId);
+    }
+
+    getComponentMetadata(uniqueId: string, type: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    }
+
+    getComponentInstanceAttributesAndProperties(uniqueId: string, type: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_INSTANCES_ATTRIBUTES]);
+    }
+
+    async getComponentAttributes(componentType: string, componentId: string): Promise<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_ATTRIBUTES]).toPromise();
+    }
+
+    getComponentCompositionData(componentUniqueId: string, componentType: string): Observable<ComponentGenericResponse> {
+        const params: string[] = [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES,
+            COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS];
+        if (componentType === ComponentType.SERVICE) {
+            params.push(COMPONENT_FIELDS.FORWARDING_PATHS);
+        }
+        return this.getComponentDataByFieldsName(componentType, componentUniqueId, params);
+    }
+
+    getComponentResourcePropertiesData(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId,
+            [COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]);
+    }
+
+    getComponentResourceInstances(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentInputs(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INPUTS]);
+    }
+
+    getComponentInputsWithProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId,
+            [COMPONENT_FIELDS.COMPONENT_INPUTS, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
+    }
+
+    getComponentDeploymentArtifacts(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_DEPLOYMENT_ARTIFACTS]);
+    }
+
+    getComponentInformationalArtifacts(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS]);
+    }
+
+    getComponentInformationalArtifactsAndInstances(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS, COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentToscaArtifacts(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_TOSCA_ARTIFACTS]);
+    }
+
+    getComponentProperties(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
+    }
+
+    getCapabilitiesAndRequirements(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
+    }
+
+    getRequirementsAndCapabilitiesWithProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId,
+            [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES, COMPONENT_FIELDS.COMPONENT_CAPABILITIES_PROPERTIES]);
+    }
+
+    getDeploymentGraphData(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
+    }
+
+    createInput(component: Component, inputsToCreate: InstancePropertiesAPIMap, isSelf: boolean): Observable<any> {
+        const inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs);
+    }
+
+    restoreComponent(componentType: string, componentId: string) {
+        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/restore', {});
+    }
+
+    archiveComponent(componentType: string, componentId: string) {
+        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/archive', {});
+    }
+
+    deleteInput(component: Component, input: InputBEModel): Observable<InputBEModel> {
+        return this.http.delete<InputBEModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
+            .map((res) => {
+                return new InputBEModel(res);
+            });
+    }
+
+    updateComponentInputs(component: Component, inputs: InputBEModel[]): Observable<InputBEModel[]> {
+        return this.http.post<InputBEModel[]>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
+            .map((res) => {
+                return res.map((input) => new InputBEModel(input));
+            });
+    }
+
+    filterComponentInstanceProperties(component: Component, filterData: FilterPropertiesAssignmentData): Observable<InstanceBePropertiesMap> {// instance-property-be-map
+        let params: HttpParams = new HttpParams();
+        _.forEach(filterData.selectedTypes, (type: string) => {
+            params = params.append('resourceType', type);
+        });
+
+        // tslint:disable-next-line:object-literal-shorthand
+        return this.http.get<InstanceBePropertiesMap>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {params: params});
+    }
+
+    createServiceProperty(componentId: string, propertyModel: PropertyBEModel): Observable<PropertyBEModel> {
+        const serverObject = {};
+        serverObject[propertyModel.name] = propertyModel;
+        return this.http.post<PropertyBEModel>(this.baseUrl + 'services/' + componentId + '/properties', serverObject)
+            .map((res) => {
+                const property: PropertyBEModel = new PropertyBEModel(res);
+                return property;
+            });
+    }
+
+    getServiceProperties(componentId: string): Observable<PropertyBEModel[]> {
+        return this.http.get<any>(this.baseUrl + 'services/' + componentId + '/properties')
+            .map((res) => {
+                if (!res) {
+                    return new Array<PropertyBEModel>();
+                }
+                return CommonUtils.initBeProperties(res);
+            });
+    }
+
+    updateServiceProperties(componentId: string, properties: PropertyBEModel[]) {
+        return this.http.put<any>( this.baseUrl + 'services/' + componentId + '/properties', properties)
+            .map((res) => {
+                const resJson = res;
+                return _.map(resJson,
+                    (resValue: PropertyBEModel) => new PropertyBEModel(resValue));
+            });
+    }
+
+    deleteServiceProperty(componentId: string, property: PropertyBEModel): Observable<string> {
+        return this.http.delete(this.baseUrl + 'services/' + componentId + '/properties/' + property.uniqueId )
+            .map((res: Response) => {
+                return property.uniqueId;
+            });
+    }
+
+    getDependencies(componentType: string, componentId: string): Observable<IDependenciesServerResponse[]> {
+        return this.http.get<IDependenciesServerResponse[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies');
+    }
+
+    automatedUpgrade(componentType: string, componentId: string, componentsIdsToUpgrade: IAutomatedUpgradeRequestObj[]): Observable<AutomatedUpgradeGenericResponse> {
+        return this.http.post<AutomatedUpgradeGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade);
+    }
+
+    updateComponentInstance(componentMetaDataId: string, componentInstance:ComponentInstance): Observable<ComponentInstance> {
+        return this.http.post<ComponentInstance>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance);
+    }
+
+    updateMultipleComponentInstances(componentId: string, componentType: string, instances: ComponentInstance[]): Observable<ComponentInstance[]> {
+        return this.http.post<ComponentInstance[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/multipleComponentInstance', instances)
+            .map((res) => {
+                return CommonUtils.initComponentInstances(res);
+            });
+    }
+
+    createRelation(componentId: string, componentType: string, link: RelationshipModel): Observable<RelationshipModel> {
+        return this.http.post<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/associate', link)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    deleteRelation(componentId: string, componentType: string, link: RelationshipModel): Observable<RelationshipModel> {
+        return this.http.put<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/dissociate', link)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    createComponentInstance(componentType: string, componentId: string, componentInstance: ComponentInstance): Observable<ComponentInstance> {
+        return this.http.post<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance', componentInstance)
+            .map((res) => {
+                return new ComponentInstance(res);
+            });
+    }
+
+    deleteComponentInstance(componentType: string, componentId: string, componentInstanceId: string): Observable<ComponentInstance> {
+        return this.http.delete<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstanceId)
+            .map((res) => {
+                return new ComponentInstance(res);
+            });
+    }
+
+    fetchRelation(componentType: string, componentId: string, linkId: string): Observable<RelationshipModel> {
+        return this.http.get<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/relationId/' + linkId)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    addOrUpdateArtifact = (componentType: string, componentId: string, artifact: ArtifactModel): Observable<ArtifactModel> => {
+        let headerObj: HttpHeaders = new HttpHeaders();
+        if (artifact.payloadData) {
+            headerObj = headerObj.append('Content-MD5', HttpHelperService.getHeaderMd5(artifact));
+        }
+
+        let artifactID: string = '';
+        if (artifact.uniqueId) {
+            artifactID = '/' + artifact.uniqueId;
+        }
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts' + artifactID, JSON.stringify(artifact), {headers: headerObj}).map(
+            (res) => new ArtifactModel(res)
+        );
+    }
+
+    deleteArtifact = (componentId: string, componentType: string, artifactId: string, artifactLabel: string): Observable<ArtifactModel> => {
+        return this.http.delete<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts/' + artifactId + '?operation=' + artifactLabel)
+            .map((res) => new ArtifactModel(res));
+    }
+
+    downloadArtifact = (componentType: string, componentId: string, artifactId: string): Observable<IFileDownload> => {
+        return this.http.get<IFileDownload>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts/' + artifactId);
+    }
+
+    // ------------------------------------------------ Properties API --------------------------------------------------//
+    addProperty = (componentType: string, componentId: string, property: PropertyModel):Observable<PropertyModel> => {
+        return this.http.post<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties', property.convertToServerObject()).map((response) => {
+            return new PropertyModel(response[Object.keys(response)[0]]);
+        });
+    }
+
+    updateProperty = (componentType: string, componentId: string, property: PropertyModel): Observable<PropertyModel> => {
+        var propertiesList:PropertyBEModel[]  = [property];
+        return this.http.put<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties', propertiesList)
+        .map((response) => {
+            return new PropertyModel(response[Object.keys(response)[0]]);
+        });
+    }
+
+    deleteProperty = (componentType: string, componentId: string, propertyId: string): Observable<PropertyModel> => {
+        return this.http.delete<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties/' + propertyId);
+    }
+
+    // ------------------------------------------------ Attributes API --------------------------------------------------//
+    addAttribute = (componentType: string, componentId: string, attribute: AttributeModel): Observable<AttributeModel> => {
+        return this.http.post<AttributeModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes', attribute.convertToServerObject())
+            .map((response) => {
+                return new AttributeModel(response);
+            });
+    }
+
+    updateAttribute = (componentType: string, componentId: string, attribute: AttributeModel): Observable<AttributeModel> => {
+        const payload = attribute.convertToServerObject();
+
+        return this.http.put<AttributeModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes/' + attribute.uniqueId, payload)
+            .map((response) => {
+                return new AttributeModel(response);
+            });
+    }
+
+    // Async Methods
+    addAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<AttributeModel> => {
+        return this.addAttribute(componentType, componentId, attribute).toPromise();
+    }
+
+    updateAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<AttributeModel> => {
+        return this.updateAttribute(componentType, componentId, attribute).toPromise();
+    }
+
+    deleteAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<any> => {
+        return this.http.delete<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes/' + attribute.uniqueId, {}).toPromise();
+    }
+
+    getArtifactsByType(componentType: string, componentId: string, artifactsType: ArtifactGroupType) {
+        return this.getComponentDataByFieldsName(componentType, componentId, [this.convertArtifactTypeToUrl(artifactsType)]);
+    }
+
+    getServiceConsumptionData(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [
+            // COMPONENT_FIELDS.COMPONENT_INSTANCES_INTERFACES,
+            COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES,
+            // COMPONENT_FIELDS.COMPONENT_INSTANCES_INPUTS,
+            COMPONENT_FIELDS.COMPONENT_INPUTS,
+            COMPONENT_FIELDS.COMPONENT_INSTANCES,
+            COMPONENT_FIELDS.COMPONENT_CAPABILITIES
+        ]);
+    }
+
+    getServiceConsumptionInputs(componentMetaDataId: string, serviceInstanceId: string, interfaceId: string, operation: OperationModel): Observable<ConsumptionInput[]> {
+        return this.http.get<ConsumptionInput[]>
+        (this.baseUrl + 'services/' + componentMetaDataId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId + '/operations/' + operation.uniqueId + '/inputs');
+    }
+
+    createOrUpdateServiceConsumptionInputs(componentMetaDataId: string, serviceInstanceId: string, consumptionInputsList: Array<{[id: string]: ConsumptionInput[]}>): Observable<any> {
+        return this.http.post(this.baseUrl + 'services/' + componentMetaDataId + '/consumption/' + serviceInstanceId, consumptionInputsList);
+    }
+
+    getServiceFilterConstraints(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [SERVICE_FIELDS.NODE_FILTER]);
+    }
+
+    getComponentInstanceProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES]);
+    }
+
+    createServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraint: ConstraintObject): Observable<any> {
+        return this.http.post<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter', constraint);
+    }
+
+    updateServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraints: ConstraintObject[]):Observable<any> {
+        return this.http.put<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter', constraints)
+    }
+
+    deleteServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraintIndex: number): Observable<any>{
+        return this.http.delete<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter/' + constraintIndex)
+    }
+
+    deletePolicy(component: Component, policy: PolicyInstance): Observable<PolicyInstance> {
+        return this.http.put<PolicyInstance>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy)
+    }
+
+    createListInput(componentId: string, input: any, isSelf: boolean): Observable<any> {
+        let inputs: any;
+        if (isSelf) {
+            // change componentInstanceProperties -> serviceProperties
+            inputs = {
+                componentInstInputsMap: {
+                    serviceProperties: input.componentInstInputsMap.componentInstanceProperties
+                },
+                listInput: input.listInput
+            };
+        } else {
+            inputs = input;
+        }
+        return this.http.post<any>(this.baseUrl + 'services/' + componentId + '/create/listInput', inputs);
+    }
+
+    createPolicy(component: Component, policiesToCreate: InstancePropertiesAPIMap, isSelf: boolean): Observable<any> {
+        const policiesList =
+            isSelf ?
+                // tslint:disable-next-line:object-literal-key-quotes
+                {'componentPropertiesToPolicies': {
+                        ...policiesToCreate.componentInstanceProperties
+                    }
+                } :
+                // tslint:disable-next-line:object-literal-key-quotes
+                {'componentInstancePropertiesToPolicies': {
+                        ...policiesToCreate.componentInstanceProperties
+                    }
+                };
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList);
+    }
+
+    protected getComponentDataByFieldsName(componentType: string, componentId: string, fields: string[]): Observable<ComponentGenericResponse> {
+        let params: HttpParams = new HttpParams();
+        _.forEach(fields, (field: string): void => {
+            params = params.append(API_QUERY_PARAMS.INCLUDE, field);
+        });
+        // tslint:disable-next-line:object-literal-shorthand
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {params: params})
+            .map((res) => {
+                return componentType === ComponentType.SERVICE ? new ServiceGenericResponse().deserialize(res) :
+                        new ComponentGenericResponse().deserialize(res);
+            });
+    }
+
+    private getServerTypeUrl = (componentType: string): string => {
+        switch (componentType) {
+            case ComponentType.SERVICE:
+            case ComponentType.SERVICE_PROXY:
+                return ServerTypeUrl.SERVICES;
+            default:
+                return ServerTypeUrl.RESOURCES;
+        }
+    }
+
+    private convertArtifactTypeToUrl = (artifactType: ArtifactGroupType): string => {
+        switch (artifactType) {
+            case ArtifactGroupType.TOSCA:
+                return COMPONENT_FIELDS.COMPONENT_TOSCA_ARTIFACTS;
+            case ArtifactGroupType.INFORMATION:
+                return COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS;
+            case ArtifactGroupType.DEPLOYMENT:
+                return COMPONENT_FIELDS.COMPONENT_DEPLOYMENT_ARTIFACTS;
+            case ArtifactGroupType.SERVICE_API:
+                return COMPONENT_FIELDS.SERVICE_API_ARTIFACT;
+        }
+    }
+
+    // createCapability(component: Component, capabilityData: Capability): Observable<Capability[]> {
+    createCapability(type: string, uniqueId: string, capabilityData: Capability): Observable<Capability[]> {
+        let capBEObj = {
+            'capabilities': {
+                [capabilityData.type]: [capabilityData]
+            }
+        };
+        return this.http.post<any>(this.baseUrl + type + uniqueId + '/capabilities', capBEObj);
+    }
+
+    updateCapability(type: string, uniqueId: string, capabilityData: Capability): Observable<Capability[]> {
+        let capBEObj = {
+            'capabilities': {
+                [capabilityData.type]: [capabilityData]
+            }
+        };
+        return this.http.put<any>(this.baseUrl + type + uniqueId + '/capabilities', capBEObj);
+    }
+
+    deleteCapability(component: Component, capId: string): Observable<Capability> {
+        return this.http.delete<Capability>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities/' + capId);
+    }
+
+    createRequirement(type: string, uniqueId: string, requirementData: Requirement): Observable<any> {
+        let reqBEObj = {
+            'requirements': {
+                [requirementData.capability]: [requirementData]
+            }
+        };
+        return this.http.post(this.baseUrl + type + uniqueId + '/requirements', reqBEObj);
+    }
+
+    updateRequirement(type: string, uniqueId: string, requirementData: Requirement): Observable<any> {
+        let reqBEObj = {
+            'requirements': {
+                [requirementData.capability]: [requirementData]
+            }
+        };
+        return this.http.put(this.baseUrl + type + uniqueId + '/requirements', reqBEObj);
+    }
+
+    deleteRequirement(component: Component, reqId: string): Observable<Requirement> {
+        return this.http.delete<Requirement>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements/' + reqId);
+    }
+}