[SDC-29] catalog 1707 rebase commit.

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

15 files changed, 956 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/services/authentication.service.ts b/catalog-ui/src/app/ng2/services/authentication.service.ts
new file mode 100644
index 0000000000..7fe3e22f4c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/authentication.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { sdc2Config } from './../../../main';
+import {IAppConfigurtaion, ICookie} from "../../models/app-config";
+import {Response, Headers, RequestOptions, Http} from '@angular/http';
+import {Cookie2Service} from "./cookie.service";
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class AuthenticationService {
+
+    private cookieService:Cookie2Service;
+    private http:Http;
+
+    constructor(cookieService:Cookie2Service, http: Http) {
+        this.cookieService = cookieService;
+        this.http = http;
+    }
+
+    private getAuthHeaders():any {
+        let cookie:ICookie = sdc2Config.cookie;
+        let authHeaders:any = {};
+        authHeaders[cookie.userFirstName] = this.cookieService.getFirstName();
+        authHeaders[cookie.userLastName] = this.cookieService.getLastName();
+        authHeaders[cookie.userEmail] = this.cookieService.getEmail();
+        authHeaders[cookie.userIdSuffix] = this.cookieService.getUserId();
+        return authHeaders;
+    }
+
+    public authenticate(): Observable<JSON> {
+        let options = new RequestOptions({
+            headers: new Headers(this.getAuthHeaders())
+        });
+
+        let authUrl = sdc2Config.api.root + sdc2Config.api.GET_user_authorize;
+        return this.http
+            .get(authUrl, options)
+            .map((res: Response) => res.json());
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
new file mode 100644
index 0000000000..85709894ff
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
@@ -0,0 +1,51 @@
+import {Injectable} from '@angular/core';
+import {Response, RequestOptions, Headers} from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import {HttpService} from "../http.service";
+import {sdc2Config} from "../../../../main";
+import {PropertyBEModel} from "app/models";
+import {CommonUtils} from "app/utils";
+import {Component, ComponentInstance, InputModel} from "app/models";
+
+@Injectable()
+export class ComponentInstanceServiceNg2 {
+
+    protected baseUrl;
+
+    constructor(private http: HttpService) {
+        this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
+    }
+
+    getComponentInstanceProperties(component: Component, componentInstanceId: string): Observable<Array<PropertyBEModel>> {
+
+        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/properties')
+            .map((res: Response) => {
+                return CommonUtils.initBeProperties(res.json());
+        })
+    }
+
+    getComponentInstanceInputs(component: Component, componentInstance: ComponentInstance): Observable<Array<PropertyBEModel>> {
+        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstance.uniqueId + '/' + componentInstance.componentUid + '/inputs')
+            .map((res: Response) => {
+                return CommonUtils.initInputs(res.json());
+            })
+    }
+
+    updateInstanceProperty(component: Component, componentInstanceId: string, property: PropertyBEModel): Observable<PropertyBEModel> {
+
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/property', property)
+            .map((res: Response) => {
+                return new PropertyBEModel(res.json());
+        })
+    }
+
+    updateInstanceInput(component: Component, componentInstanceId: string, input: PropertyBEModel): Observable<PropertyBEModel> {
+
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/input', input)
+            .map((res: Response) => {
+                return new PropertyBEModel(res.json());
+            })
+    }
+
+
+}
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
new file mode 100644
index 0000000000..3fa9fde40c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -0,0 +1,149 @@
+import {Injectable, Query} 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 { Component, PropertyBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData} from "app/models";
+import {downgradeInjectable} from '@angular/upgrade/static';
+import {HttpService} from "../http.service";
+import {COMPONENT_FIELDS} from "app/utils";
+import {ComponentGenericResponse} from "../responses/component-generic-response";
+import {sdc2Config} from "../../../../main";
+import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
+import {API_QUERY_PARAMS} from "app/utils";
+import {ComponentType, ServerTypeUrl} from "../../../utils/constants";
+
+declare var angular:angular.IAngularStatic;
+
+@Injectable()
+export class ComponentServiceNg2 {
+
+    protected baseUrl;
+
+    constructor(private http:HttpService) {
+        this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
+    }
+
+    private getComponentDataByFieldsName(componentType:string, componentId: string, fields:Array<string>):Observable<ComponentGenericResponse> {
+
+        let params:URLSearchParams = new URLSearchParams();
+        _.forEach(fields, (field:string):void => {
+            params.append(API_QUERY_PARAMS.INCLUDE, field);
+        });
+
+        return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {search: params})
+            .map((res:Response) => {
+                return new ComponentGenericResponse().deserialize(res.json());
+            }).do(error => console.log('server data:', error));
+    }
+
+    private getServerTypeUrl = (componentType:string):string => {
+        switch (componentType) {
+            case ComponentType.PRODUCT:
+                return ServerTypeUrl.PRODUCTS;
+            case ComponentType.SERVICE:
+                return ServerTypeUrl.SERVICES;
+            default:
+                return ServerTypeUrl.RESOURCES;
+        }
+    }
+
+    getComponentMetadata(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.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]);
+    }
+
+    getComponentAttributes(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_ATTRIBUTES]);
+    }
+
+    getComponentInstancesAndRelation(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    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]);
+    }
+
+    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(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [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]);
+    }
+
+    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):Observable<any> {
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputsToCreate)
+            .map(res => {
+                return res.json();
+            })
+    }
+
+    deleteInput(component:Component, input:PropertyBEModel):Observable<PropertyBEModel> {
+
+        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
+            .map((res:Response) => {
+                return new PropertyBEModel(res.json());
+            })
+    }
+
+    updateComponentInput(component:Component, input:PropertyBEModel):Observable<PropertyBEModel> {
+
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', input)
+            .map((res:Response) => {
+                return new PropertyBEModel(res.json())
+            })
+    }
+
+    filterComponentInstanceProperties(component: Component, filterData:FilterPropertiesAssignmentData): Observable<InstanceBePropertiesMap> {//instance-property-be-map
+        let params: URLSearchParams = new URLSearchParams();
+        _.forEach(filterData.selectedTypes, (type:string) => {
+            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 {'ExtVL 0':[{definition: false,name:"network_assignments",password:false,required:true,type:"org.openecomp.datatypes.network.NetworkAssignments",uniqueId:"623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_assignments"},
+        //     {definition: false,name: "exVL_naming",password: false,required: true,type: "org.openecomp.datatypes.Naming",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.exVL_naming"},
+        //     {definition: false,name: "network_flows",password: false,required: false,type: "org.openecomp.datatypes.network.NetworkFlows",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_flows"},
+        //     {definition: false,name: "provider_network",password: false,required: true,type: "org.openecomp.datatypes.network.ProviderNetwork",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.provider_network"},
+        //     {definition: false,name: "network_homing",password: false,required: true,type: "org.openecomp.datatypes.EcompHoming",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_homing"}],
+        //     'NetworkCP 0':[{definition: false,description: "identifies MAC address assignments to the CP",name: "mac_requirements",password: false,required: false,type: "org.openecomp.datatypes.network.MacRequirements",uniqueId: "26ec2bfd-b904-46c7-87ed-b32775120f2c.mac_requirements"}],
+        //     'NetworkCP 1':[{definition: false,description: "identifies MAC address assignments to the CP",name: "mac_requirements",password: false,required: false,type: "org.openecomp.datatypes.network.MacRequirements",uniqueId: "26ec2bfd-b904-46c7-87ed-b32775120f2c.mac_requirements"}]};
+
+
+    }
+}
+
+angular.module('Sdc.Services').factory('ComponentServiceNg2', downgradeInjectable(ComponentServiceNg2)); // This is in order to use the service in angular1 till we finish remove all angular1 code
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
new file mode 100644
index 0000000000..650f244d38
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import { Http, Response, Headers, RequestOptions } from '@angular/http';
+
+@Injectable()
+export class ResourceServiceNg2 {
+
+    protected baseUrl = "";
+
+    constructor(private http: Http) {
+
+    }
+
+
+
+
+}
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
new file mode 100644
index 0000000000..b47b64c5c2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import { Response } from '@angular/http';
+import {Service} from "app/models";
+import { downgradeInjectable } from '@angular/upgrade/static';
+import {sdc2Config} from "../../../../main";
+import {HttpService} from "../http.service";
+
+
+@Injectable()
+export class ServiceServiceNg2 {
+
+    protected baseUrl = "";
+
+    constructor(private http: HttpService) {
+        this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
+    }
+
+    validateConformanceLevel(service: Service): Observable<boolean> {
+
+        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/conformanceLevelValidation')
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+}
+
+angular.module('Sdc.Services').factory('ServiceServiceNg2', downgradeInjectable(ServiceServiceNg2)); // This is in order to use the service in angular1 till we finish remove all angular1 code
diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts
new file mode 100644
index 0000000000..0ac3b5a397
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/config.service.ts
@@ -0,0 +1,51 @@
+/**
+ * Created by ob0695 on 4/9/2017.
+ */
+
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+import {IAppConfigurtaion, ValidationConfiguration, Validations} from "app/models";
+import {sdc2Config} from './../../../main';
+
+declare var __ENV__: string;
+
+@Injectable()
+export class ConfigService {
+
+    private baseUrl;
+    public configuration: IAppConfigurtaion;
+
+    constructor(private http: Http) {
+        this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
+    }
+
+    loadValidationConfiguration(): Promise<ValidationConfiguration> {
+        let url: string = sdc2Config.validationConfigPath;
+        let promise: Promise<ValidationConfiguration> = this.http.get(url).map((res: Response) => res.json()).toPromise();
+        promise.then((validationData: Validations) => {
+            ValidationConfiguration.validation = validationData;
+        }).catch((ex) => {
+            console.error('Error loading validation.json configuration file, using fallback data', ex);
+            
+            let fallback:Validations = {
+                "propertyValue": {
+                    "max": 2500,
+                    "min": 0
+                },
+
+                "validationPatterns": {
+                    "string": "^[\\sa-zA-Z0-9+-]+$",
+                    "comment": "^[\\sa-zA-Z0-9+-_\\{\\}\"]+$",
+                    "integer": "^(([-+]?\\d+)|([-+]?0x[0-9a-fA-F]+))$"
+                }
+            };
+            
+            ValidationConfiguration.validation = fallback;
+            
+        });
+
+        return promise;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/services/cookie.service.ts b/catalog-ui/src/app/ng2/services/cookie.service.ts
new file mode 100644
index 0000000000..2dc2ac3e6b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/cookie.service.ts
@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import {IAppConfigurtaion, ICookie} from "../../models/app-config";
+import {sdc2Config} from './../../../main';
+
+@Injectable()
+export class Cookie2Service {
+
+    private cookie:ICookie;
+    private cookiePrefix:string;
+
+    constructor() {
+        this.cookie = sdc2Config.cookie;
+
+        this.cookiePrefix = '';
+        let junctionName:string = this.getCookieByName(this.cookie.junctionName);
+        if ((junctionName !== null) && (junctionName !== '')) {
+            this.cookiePrefix = this.cookie.prefix + junctionName + '!';
+        }
+        console.log("junctionName:" + junctionName);
+    }
+
+    private getCookieByName = (cookieName:string):string => {
+        cookieName += '=';
+        let cookies:Array<string> = document.cookie.split(';');
+        let cookieVal:string = '';
+        cookies.forEach((cookie:string) => {
+            while (cookie.charAt(0) === ' ') {
+                cookie = cookie.substring(1);
+            }
+            if (cookie.indexOf(cookieName) === 0) {
+                cookieVal = cookie.substring(cookieName.length, cookie.length);
+                return;
+            }
+        });
+        return cookieVal;
+    };
+
+    public getUserIdSuffix = ():string => {
+        return this.cookie.userIdSuffix;
+    };
+
+    public getUserId = ():string => {
+        let userIdCookieName:string = this.cookiePrefix + this.cookie.userIdSuffix;
+        let userId:string = this.getCookieByName(userIdCookieName);
+        return userId;
+    };
+
+    public getFirstName = ():string => {
+        let firstNameCookieName:string = this.cookiePrefix + this.cookie.userFirstName;
+        let firstName:string = this.getCookieByName(firstNameCookieName);
+        return firstName;
+    };
+
+    public getLastName = ():string => {
+        let lastNameCookieName:string = this.cookiePrefix + this.cookie.userLastName;
+        let lastName:string = this.getCookieByName(lastNameCookieName);
+        return lastName;
+    };
+
+    public getEmail = ():string => {
+        let emailCookieName:string = this.cookiePrefix + this.cookie.userEmail;
+        let email:string = this.getCookieByName(emailCookieName);
+        return email;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
new file mode 100644
index 0000000000..e7ea1a8430
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { DataTypeModel, DataTypesMap, PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedFEPropertyMap } from "app/models";
+import { DataTypesService } from "app/services/data-types-service";
+import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
+
+/** This is a new service for NG2, to eventually replace app/services/data-types-service.ts
+ *
+ *  This service is a singleton that holds a map of all DataTypes, recieved from server on load.
+ *  It also contains convenience methods to check if a string is a valid dataType, and to retrieve a dataType's properties recursively
+ */
+
+@Injectable()
+export class DataTypeService {
+    private dataTypes: DataTypesMap;
+
+    constructor(private dataTypeService: DataTypesService) {
+        this.dataTypes = dataTypeService.getAllDataTypes(); //This should eventually be replaced by an NG2 call to the backend instead of utilizing Angular1 downgraded component.
+    }
+
+    public getDataTypeByTypeName(typeName: string): DataTypeModel {
+        return this.dataTypes[typeName];
+    }
+/*
+    //if the dt derived from simple- return the first parent type, else- return null
+    public getTypeForDataTypeDerivedFromSimple = (dataTypeName:string):string => {
+        /////////temporary hack for tosca primitives///////////////////////
+        if (!this.dataTypes[dataTypeName]) {
+            return PROPERTY_TYPES.STRING;
+        }
+        ///////////////////////////////////////////////////////////////////
+        if (this.dataTypes[dataTypeName].derivedFromName == PROPERTY_DATA.ROOT_DATA_TYPE || this.dataTypes[dataTypeName].properties) {
+            return null;
+        }
+        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.dataTypes[dataTypeName].derivedFromName) > -1) {
+            return this.dataTypes[dataTypeName].derivedFromName
+        }
+        return this.getTypeForDataTypeDerivedFromSimple(this.dataTypes[dataTypeName].derivedFromName);
+    };
+
+    /**
+     * The function returns all properties for the DataType passed in, and recurses through parent dataTypes (derivedFrom) to retrieve their properties as well
+     * @param dataTypeObj
+     *
+    public getDataTypePropertiesRecursively(dataTypeObj: DataTypeModel): Array<PropertyBEModel> {
+        let propertiesArray: Array<PropertyBEModel> = dataTypeObj.properties || [];
+        if (PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFromName) {
+            propertiesArray = propertiesArray.concat(this.getDataTypePropertiesRecursively(dataTypeObj.derivedFrom));
+        }
+        return propertiesArray;
+    }
+*/
+    
+    public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
+        //push all child properties to array
+        if (dataTypeObj.properties) {
+            dataTypeObj.properties.forEach((derivedProperty) => {
+                propertiesArray.push(new DerivedFEProperty(derivedProperty, parentName));
+                let derivedDataTypeObj: DataTypeModel = this.getDataTypeByTypeName(derivedProperty.type);
+                this.getDerivedDataTypeProperties(derivedDataTypeObj, propertiesArray, parentName + "#" + derivedProperty.name);
+            });
+        }
+        //recurse parent (derivedFrom), in case one of parents contains properties
+        if (PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFrom.name) {
+            this.getDerivedDataTypeProperties(dataTypeObj.derivedFrom, propertiesArray, parentName);
+        }    
+    }    
+    
+}
+
diff --git a/catalog-ui/src/app/ng2/services/http.service.ts b/catalog-ui/src/app/ng2/services/http.service.ts
new file mode 100644
index 0000000000..92e8ced142
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/http.service.ts
@@ -0,0 +1,73 @@
+import {Injectable} from '@angular/core';
+import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
+import {Observable} from 'rxjs/Observable';
+import {UUID} from 'angular2-uuid';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+import {Dictionary} from "../../utils/dictionary/dictionary";
+import {SharingService, CookieService} from "app/services";
+import {sdc2Config} from './../../../main';
+
+@Injectable()
+export class HttpService extends Http {
+
+    constructor(backend:XHRBackend, options:RequestOptions, private sharingService:SharingService, private cookieService: CookieService) {
+        super(backend, options);
+        this._defaultOptions.withCredentials = true;
+        this._defaultOptions.headers.append(cookieService.getUserIdSuffix(), cookieService.getUserId());
+    }
+
+    request(request:string|Request, options?:RequestOptionsArgs):Observable<Response> {
+        /**
+         * For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
+         * Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
+         */
+        if (typeof request === 'string') { // meaning we have to add the token to the options, not in url
+            if (!options) {
+                // make option object
+                options = {headers: new Headers()};
+            }
+
+            var uuidValue = this.getUuidValue(request);
+            if(uuidValue!= ''){
+                options.headers['X-ECOMP-ServiceID'] = uuidValue;
+
+            }
+            options.headers.set('X-ECOMP-RequestID', UUID.UUID());
+
+        } else {
+            // we have to add the token to the url object
+            var uuidValue = this.getUuidValue((<Request>request).url);
+            if(uuidValue!= ''){
+                 request.headers.set('X-ECOMP-ServiceID',uuidValue);
+
+            }
+            request.headers.set('X-ECOMP-RequestID', UUID.UUID());
+        }
+        return super.request(request, options).catch(this.catchAuthError(this));
+    }
+
+    private getUuidValue = (url: string) :string => {
+        let map:Dictionary<string, string> = this.sharingService.getUuidMap();
+        if (map && url.indexOf(sdc2Config.api.root) > 0) {
+            map.forEach((key:string) => {
+                if (url.indexOf(key) !== -1) {
+                    return this.sharingService.getUuidValue(key);
+                }
+            });
+        }
+        return '';
+    }
+
+    private catchAuthError(self:HttpService) {
+        // we have to pass HttpService's own instance here as `self`
+        return (res:Response) => {
+            console.log(res);
+            if (res.status === 401 || res.status === 403) {
+                // if not authenticated
+                console.log(res);
+            }
+            return Observable.throw(res);
+        };
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/mocks/properties.mock.ts b/catalog-ui/src/app/ng2/services/mocks/properties.mock.ts
new file mode 100644
index 0000000000..0ce253e80b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/mocks/properties.mock.ts
@@ -0,0 +1,16 @@
+// import { PropertiesResponse } from './../../services/responses/properties.response';
+//
+// export const PROPERTIES_RESPONSE: PropertiesResponse = {
+//    "status":"ok",
+//    "errorcode":0,
+//    "properties": [
+//        {"name": "name1"},
+//        {"name": "name2"}
+//    ]
+// };
+
+
+export const COMPONENT_INSTANCE_RESPONSE: any = [{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.724ef51f-7595-4336-a8ef-b144e1c937da.contrailv2vlansubinterface5","name":"CP2","normalizedName":"cp2","componentUid":"724ef51f-7595-4336-a8ef-b144e1c937da","creationTime":1489586037851,"modificationTime":1489586037851,"posX":"549","posY":"531","propertyValueCounter":1,"inputValueCounter":1,"originType":"CP","customizationUUID":"0222925a-06c6-48ca-8573-13ba3b650539"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.8ac5a229-60d8-4d7f-8e0f-b630da55c3ae.ldsa_os27","name":"VF22","normalizedName":"vf22","componentUid":"8ac5a229-60d8-4d7f-8e0f-b630da55c3ae","creationTime":1489590640842,"modificationTime":1489590640842,"posX":"644","posY":"359","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"fb34e6a1-f0cc-42e3-853f-178fb122d670"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.00ac92c4-a0c5-4567-aefb-f2b7f3fecba9.vl4","name":"VL1","normalizedName":"vl1","componentUid":"00ac92c4-a0c5-4567-aefb-f2b7f3fecba9","creationTime":1489586006630,"modificationTime":1489586006630,"posX":"486","posY":"530","propertyValueCounter":1,"inputValueCounter":1,"originType":"VL","customizationUUID":"8d156a97-38ca-4637-a6a6-9268dd708431"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.39bf293d-2aa9-4596-b85d-a6fdef18aadc.newvf428","name":"VF11","normalizedName":"vf11","componentUid":"39bf293d-2aa9-4596-b85d-a6fdef18aadc","creationTime":1489590742501,"modificationTime":1489590742501,"posX":"350","posY":"76","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"253f646d-87d0-4b84-bc20-20343b6e28a2"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.f8f30484-5761-4de8-9de8-12f288ee0a54.contrailport7","name":"CP1","normalizedName":"cp1","componentUid":"f8f30484-5761-4de8-9de8-12f288ee0a54","creationTime":1489587207447,"modificationTime":1489587207447,"posX":"418","posY":"531","propertyValueCounter":1,"inputValueCounter":1,"originType":"CP","customizationUUID":"206b4ffa-e520-496a-b57b-0c103eff8c17"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.16022d8c-80cf-46e5-a730-5b4f634ea905.extcp38","name":"ExtCP 38","normalizedName":"extcp38","componentUid":"16022d8c-80cf-46e5-a730-5b4f634ea905","creationTime":1489654844116,"modificationTime":1489654844116,"posX":"473","posY":"419","propertyValueCounter":5,"inputValueCounter":1,"originType":"CP","customizationUUID":"21ebc94a-65b9-463e-b696-07cea08f789a"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.f8f30484-5761-4de8-9de8-12f288ee0a54.contrailport44","name":"ContrailPort 44","normalizedName":"contrailport44","componentUid":"f8f30484-5761-4de8-9de8-12f288ee0a54","creationTime":1489939897435,"modificationTime":1489939897435,"posX":"480","posY":"265","propertyValueCounter":1,"inputValueCounter":1,"originType":"CP","customizationUUID":"607e5819-fa19-4aac-97f6-04f092493a02"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.8ac5a229-60d8-4d7f-8e0f-b630da55c3ae.ldsa_os6","name":"VF2","normalizedName":"vf2","componentUid":"8ac5a229-60d8-4d7f-8e0f-b630da55c3ae","creationTime":1489586613957,"modificationTime":1489586613957,"posX":"638","posY":"531","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"12501356-44cc-427b-8749-c114d3434271"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.8ac5a229-60d8-4d7f-8e0f-b630da55c3ae.ldsa_os8","name":"VF1","normalizedName":"vf1","componentUid":"8ac5a229-60d8-4d7f-8e0f-b630da55c3ae","creationTime":1489587393612,"modificationTime":1489587393612,"posX":"334","posY":"529","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"cbca1972-e64c-4119-a430-ec90aa1397a7"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.8ac5a229-60d8-4d7f-8e0f-b630da55c3ae.ldsa_os32","name":"VF12","normalizedName":"vf12","componentUid":"8ac5a229-60d8-4d7f-8e0f-b630da55c3ae","creationTime":1489591429630,"modificationTime":1489591429630,"posX":"367","posY":"269","propertyValueCounter":1,"inputValueCounter":1,"originType":"VF","customizationUUID":"ac9c77c1-e84d-4967-9ea2-d929b56d10a8"}];
+export const COMPONENT_INPUT_RESPONSE: any = [{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.extcp38_mac_requirements_mac_range_plan","type":"string","required":true,"definition":false,"description":"reference to a MAC address range plan","password":false,"name":"extcp38_mac_requirements_mac_range_plan","parentUniqueId":"23b78e64-1734-4898-889d-eab9eba50019"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.extcp38_order","type":"integer","required":true,"definition":false,"description":"The order of the CP on the compute instance (e.g. eth2).","schema":{"property":{"definition":true,"password":false}},"password":false,"name":"extcp38_order","parentUniqueId":"23b78e64-1734-4898-889d-eab9eba50019"},{"uniqueId":"23b78e64-1734-4898-889d-eab9eba50019.extcp38_network_role_tag","type":"string","required":true,"definition":false,"description":"Must correlate to the set of defined “network-role” tag identifiers from the associated HEAT template","schema":{"property":{"definition":true,"password":false}},"password":false,"name":"extcp38_network_role_tag","parentUniqueId":"23b78e64-1734-4898-889d-eab9eba50019"}];
+export const COMPONENT_PROPERTIES_RESPONSE: any =[{"schema":{"property":{"password":false,"definition":false}},"password":false,"parentUniqueId":"b80765f0-ef2b-43b1-b658-04e13970b5cf","defaultValue":"{\"naming_policy\":\"ggg\",\"ecomp_generated_naming\":false,\"supplemental_data\":{\"fff\":\"44\",\"uuu\":\"56\"}}","name":"inner-map-1","definition":false,"type":"org.openecomp.datatypes.EcompNaming","uniqueId":"property.b80765f0-ef2b-43b1-b658-04e13970b5cf.inner-map-1","required":false},{"schema":{"property":{"password":false,"definition":false}},"password":false,"parentUniqueId":"b80765f0-ef2b-43b1-b658-04e13970b5cf","defaultValue":"{\"min_subnets_count\":1,\"supplemental_data\":{\"aa\":\"11\",\"bb\":\"22\"},\"cidr_mask\":23,\"dhcp_enabled\":false,\"ip_version\":3}","name":"inner-simple-map","definition":false,"type":"org.openecomp.datatypes.network.IPv4SubnetAssignments","uniqueId":"property.b80765f0-ef2b-43b1-b658-04e13970b5cf.inner-simple-map","required":false},{"schema":{"property":{"password":false,"definition":false,"type":"org.openecomp.datatypes.heat.network.AddressPair"}},"password":false,"parentUniqueId":"b80765f0-ef2b-43b1-b658-04e13970b5cf","defaultValue":"{\"aaa\":{\"mac_address\":\"34\",\"ip_address\":\"56\"},\"bbb\":{\"mac_address\":\"sddf\",\"ip_address\":\"dfdg\"}}","name":"data-type-map","definition":false,"type":"map","uniqueId":"property.b80765f0-ef2b-43b1-b658-04e13970b5cf.data-type-map","required":false},{"schema":{"property":{"password":false,"definition":false,"type":"string"}},"password":false,"parentUniqueId":"b80765f0-ef2b-43b1-b658-04e13970b5cf","defaultValue":"{\"www\":\"dfsdf\",\"aaaa\":\"ert\"}","name":"simple-map","definition":false,"type":"map","uniqueId":"property.b80765f0-ef2b-43b1-b658-04e13970b5cf.simple-map","required":false}];
+
diff --git a/catalog-ui/src/app/ng2/services/posts.service.ts b/catalog-ui/src/app/ng2/services/posts.service.ts
new file mode 100644
index 0000000000..dbfd44f219
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/posts.service.ts
@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import 'rxjs/Rx';
+import {Response, Headers, RequestOptions, Http} from '@angular/http';
+import { COMPONENT_INSTANCE_RESPONSE,COMPONENT_INPUT_RESPONSE,COMPONENT_PROPERTIES_RESPONSE } from './mocks/properties.mock';
+import { HttpService } from './http.service';
+import { sdc2Config } from './../../../main';
+import {IAppConfigurtaion} from "../../models/app-config";
+
+@Injectable()
+export class PostsService {
+
+    private base;
+
+    constructor(private http: HttpService) {
+        this.base = sdc2Config.api.root;
+    }
+
+    getAppVersion(): Observable<JSON> {
+        return this.http
+            .get(this.base + sdc2Config.api.GET_SDC_Version)
+            .map((res: Response) => res.json());
+    }
+
+    // getProperties(id:string): Observable<any> {
+    //    return this.http
+    //         .get(this.base + sdc2Config.api.GET_SDC_Version)
+    //         .map((res: Response) => res.json());
+    // }
+
+    getProperties(): Observable<any> {
+       return Observable.create(observer => {
+            observer.next(COMPONENT_PROPERTIES_RESPONSE);
+            observer.complete();
+        });
+    }
+
+    getInstance(): Observable<any> {
+        return Observable.create(observer => {
+            observer.next(COMPONENT_INSTANCE_RESPONSE);
+            observer.complete();
+        });
+    }
+
+    getInputs(): Observable<any> {
+        return Observable.create(observer => {
+            observer.next(COMPONENT_INPUT_RESPONSE);
+            observer.complete();
+        });
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/services/properties.service.ts b/catalog-ui/src/app/ng2/services/properties.service.ts
new file mode 100644
index 0000000000..638e537cd1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/properties.service.ts
@@ -0,0 +1,249 @@
+import { Injectable } from '@angular/core';
+import { DataTypeModel, PropertyFEModel, PropertyBEModel, SchemaProperty, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models";
+import { DataTypeService } from "./data-type.service";
+import { PROPERTY_TYPES } from "app/utils";
+import { ContentAfterLastDotPipe } from "../pipes/contentAfterLastDot.pipe";
+import { UUID } from "angular2-uuid";
+
+@Injectable()
+export class PropertiesService {
+
+    constructor(private dataTypeService:DataTypeService, private contentAfterLastDotPipe:ContentAfterLastDotPipe) {
+    }
+
+    public getParentPropertyFEModelFromPath = (properties:Array<PropertyFEModel>, path:string) => {
+        let parent:PropertyFEModel = _.find(properties, (property:PropertyFEModel):boolean=>{
+            return property.name === path.substring(0, path.indexOf('#'));
+        });
+        return parent;
+    }
+
+    //undo disabling of parent and child props=
+    public undoDisableRelatedProperties = (property: PropertyFEModel, childPath?: string): void => {
+        property.isDisabled = false;
+        if (!childPath) {
+            property.isSelected = false;
+            property.flattenedChildren && property.flattenedChildren.map(child => child.isDisabled = false);
+        } else { //QND - unselect everything and then re-do the disabling of declared props. TODO: put a flag on propertyFEModel instead to indicate who's causing them to be disabled instead
+            property.flattenedChildren.filter(child => child.isDisabled && !child.isDeclared).map(child => child.isDisabled = false);
+            property.flattenedChildren.filter(child => child.isDeclared || child.isSelected).forEach((childProp) => { //handle brothers who are selected - redo their disabled relatives as well
+                this.disableRelatedProperties(property, childProp.propertiesName);
+            });
+        }
+    }
+
+    //disable parents and children of prop
+    public disableRelatedProperties = (property:PropertyFEModel, childPath?: string): void => {
+        if (!childPath) { //selecting the parent property
+            property.isSelected = true;
+            property.flattenedChildren && property.flattenedChildren.map(child => { child.isSelected = false; child.isDisabled = true; });
+        } else {
+            property.isSelected = false;
+            property.isDisabled = true;
+            property.flattenedChildren.filter((childProp: DerivedFEProperty) => {
+                return (childProp.propertiesName.indexOf(childPath + "#") > -1 //is child of prop to disable
+                    || childPath.indexOf(childProp.propertiesName + "#") > -1); //is parent of prop to disable
+            }).map((child: DerivedFEProperty) => { child.isSelected = false; child.isDisabled = true; });
+        }
+    }
+
+    public getCheckedProperties = (properties:Array<PropertyFEModel>): Array<PropertyBEModel> => {
+        let selectedProps: Array<PropertyBEModel> = [];
+        properties.forEach(prop => {
+            if (prop.isSelected && !prop.isDeclared && !prop.isDisabled) {
+                selectedProps.push(new PropertyBEModel(prop));
+            } else if(prop.flattenedChildren) {
+                prop.flattenedChildren.forEach((child) => {
+                    if (child.isSelected && !child.isDeclared && !child.isDisabled) {
+                        let childProp = new PropertyBEModel(prop, child); //create it from the parent
+                        selectedProps.push(childProp);
+                    }
+                })
+            }
+        });
+        return selectedProps;
+    }
+
+    /**
+     * Build hirarchy structure for the tree when user selects on table row.
+     * First create Array<SimpleFlatProperty> and insert also the parent (PropertyFEModel) to this array.
+     * The Array is flat and contains SimpleFlatProperty that has parentName and uniqueId.
+     * Now we build hirarchy from this Array (that includes childrens) and return it for the tree
+     *
+     * @argument property: PropertyFEModel - property contains flattenedChildren array of DerivedFEProperty
+     * @returns  Array<SimpleFlatProperty> - containing childrens Array<SimpleFlatProperty>, augmantin childrens to SimpleFlatProperty.
+     */
+    public getSimplePropertiesTree(property: PropertyFEModel, instanceName:string):Array<SimpleFlatProperty> {
+        // Build Array of SimpleFlatProperty before unflatten function
+        let flattenProperties:Array<SimpleFlatProperty> = [];
+        flattenProperties.push(new SimpleFlatProperty(property.uniqueId, property.name, property.name, '', instanceName)); // Push the root property
+        _.each(property.flattenedChildren, (child:DerivedFEProperty):void => {
+            flattenProperties.push(new SimpleFlatProperty(child.uniqueId, child.propertiesName, child.name, child.parentName, instanceName));
+        });
+
+        let tree = this.unflatten(flattenProperties, '', []);
+        return tree[0].childrens; // Return the childrens without the root.
+    }
+
+    /**
+     * Unflatten Array<SimpleFlatProperty> and build hirarchy.
+     * The result will be Array<SimpleFlatProperty> that augmantin with childrens for each SimpleFlatProperty.
+     */
+    private unflatten( array:Array<SimpleFlatProperty>, parent:any, tree?:any ):any {
+        tree = typeof tree!=='undefined' ? tree : [];
+        parent = typeof parent!=='undefined' && parent!=='' ? parent : { path: '' };
+
+        var childrens = _.filter( array, (child:SimpleFlatProperty):boolean => {
+            return child.parentName == parent.path;
+        });
+
+        if( !_.isEmpty( childrens )  ){
+            if( parent.path == '' ){
+                tree = childrens;
+            } else {
+                parent['childrens'] = childrens;
+            }
+            _.each( childrens, ( child ):void => {
+                this.unflatten( array, child );
+            });
+        }
+        return tree;
+    }
+
+    // TODO: To remove
+    // public convertPropertiesToFEAndInitialize(properties: Array<PropertyBEModel>): Array<PropertyFEModel> {
+    //     let props:Array<PropertyFEModel> = [];
+    //     _.forEach(properties, (property: PropertyFEModel, index: number) => {
+    //         props[index] = new PropertyFEModel(property);
+    //         this.initValueObjectRef(props[index]);
+    //         if (props[index].isDataType ||
+    //             ((props[index].type === PROPERTY_TYPES.MAP || props[index].type === PROPERTY_TYPES.LIST) && props[index].schema.property.isDataType)) {
+    //             props[index].valueObjectRef = props[index].valueObjectRef || {};
+    //             let defaultValueObject:any = props[index].defaultValue ? JSON.parse(props[index].defaultValue): null;
+    //             this.createPropertiesTreeForProp(props[index], true, defaultValueObject);
+    //         }
+    //     });
+    //     return props;
+    // }
+
+
+    /**
+     * Converts a property's map values to properties and adds them to property.childrenProperties
+     * @param property - property to add children to
+     * @param onlyFirstLevel - recursively retrieve properties for each dataType?
+     */
+    //TODO: To remove
+    // public createPropertyNodesForMapOfDataTypes(property: PropertyFEModel, onlyFirstLevel:boolean):void {
+    //     property.childrenProperties = [];
+    //     angular.forEach(property.valueObjectRef,function(itemInMap:any, keyInMap:string){
+    //         let newProperty: PropertyFEModel = new PropertyFEModel(keyInMap,
+    //             property.schema.property.type,
+    //             UUID.UUID(),
+    //             property,
+    //             property.valueObjectRef[keyInMap]);
+    //         !onlyFirstLevel && this.createPropertiesTreeForProp(newProperty);
+    //         property.childrenProperties.push(newProperty);
+    //     },this);
+    // }
+
+
+    /**
+     * Converts a property's list values to properties and adds them to property.childrenProperties
+     * @param property - property to add children to
+     * @param onlyFirstLevel - recursively retrieve properties for each dataType?
+     */
+    //TODO: To remove
+    // public createPropertyNodesForListOfDataTypes(property: PropertyFEModel, onlyFirstLevel:boolean):void {
+    //     property.childrenProperties = [];
+    //     property.valueObjectRef.forEach((itemInList:any, index:number):void =>{
+    //         let newProperty: PropertyFEModel = new PropertyFEModel(this.contentAfterLastDotPipe.transform(property.schema.property.type),
+    //             property.schema.property.type,
+    //             UUID.UUID(),
+    //             property,
+    //             property.valueObjectRef[index]);
+    //         !onlyFirstLevel && this.createPropertiesTreeForProp(newProperty);
+    //         property.childrenProperties.push(newProperty);
+    //     });
+    // }
+
+    // private checkIfPropertyDerivedFromSimpleAndUpdateProp(property:PropertyFEModel | SchemaProperty): boolean{
+    //     property.derivedFromSimpleTypeName = this.dataTypeService.getTypeForDataTypeDerivedFromSimple(property.type);
+    //     if(property.derivedFromSimpleTypeName){
+    //         property.isSimpleType = true;
+    //         property.isDataType = false;
+    //     }
+    //     return property.isSimpleType;
+    // }
+
+    // TODO: Remove
+    public createPropertiesTreeForProp(property: PropertyFEModel, onlyFirstLevel?: boolean, defaultValueObj?: any): void {
+    }
+
+    public getPropertyFEModelFromDerivedPropertyUniqueId(properties: Array<PropertyFEModel>, uniqueId: string): PropertyFEModel {
+        // _.each(properties, (property):void => {
+        //     property.flattenedChildren
+
+        // });
+
+        // let rootProperty = _.find(properties, (property):boolean => { return property.uniqueId === uniqueId; });
+        // if
+        return null;
+    }
+
+    /**
+     * Utilizes the dataTypeService to retrieve children properties from dataTypes recursively.
+     * @param property
+     * @param onlyFirstLevel
+     */
+    // TODO: To remove
+    // public createPropertiesTreeForProp(property: PropertyFEModel, onlyFirstLevel?:boolean, defaultValueObj?:any ):void{
+    //     if (property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property)){
+    //         let dataType: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(property.type);
+    //         property.childrenProperties = [];
+    //         let childrenProperties = this.dataTypeService.getDataTypePropertiesRecursively(dataType);
+    //         childrenProperties.forEach((childProperty: PropertyBEModel):void => {
+    //             let childDataTypePropertyObj: PropertyFEModel = new PropertyFEModel(childProperty.name, childProperty.type,UUID.UUID(),property, {}, childProperty.schema);
+    //             //init empty object in valueObjectRef[childProperty.name] because this property's children should has ref to this obj.
+    //             if(!property.valueObjectRef[childDataTypePropertyObj.name]){
+    //                 if ((childDataTypePropertyObj.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(childDataTypePropertyObj))
+    //                     || childDataTypePropertyObj.type === PROPERTY_TYPES.MAP){
+    //                     property.valueObjectRef[childDataTypePropertyObj.name] = {};
+    //                 }else if(childDataTypePropertyObj.type === PROPERTY_TYPES.LIST){
+    //                     property.valueObjectRef[childDataTypePropertyObj.name] = [];
+    //                 }
+    //             }
+    //             childDataTypePropertyObj.valueObjectRef = property.valueObjectRef[childDataTypePropertyObj.name];
+    //             property.valueObjectRef[childDataTypePropertyObj.name] =  property.valueObjectRef[childProperty.name] || childDataTypePropertyObj.defaultValue;
+    //             if( !childDataTypePropertyObj.isDataType && defaultValueObj ){//init property default value
+    //                 childDataTypePropertyObj.defaultValue = JSON.stringify(defaultValueObj[childDataTypePropertyObj.name]);
+    //             }
+    //             property.childrenProperties.push(childDataTypePropertyObj);
+    //             !onlyFirstLevel && this.createPropertiesTreeForProp(childDataTypePropertyObj, false, (defaultValueObj ? defaultValueObj[childDataTypePropertyObj.name] : null));
+    //         });
+    //     } else if (property.type == PROPERTY_TYPES.MAP && property.schema.property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property.schema.property)){
+    //         if( property.valueObjectRef && !_.isEmpty(property.valueObjectRef)){
+    //             this.createPropertyNodesForMapOfDataTypes(property, onlyFirstLevel);
+    //         }
+    //     } else if (property.type == PROPERTY_TYPES.LIST && property.schema.property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property.schema.property)){
+    //         if( property.valueObjectRef && property.valueObjectRef.length){
+    //             this.createPropertyNodesForListOfDataTypes(property, onlyFirstLevel);
+    //         }
+    //     }
+    // }
+}
+
+export class SimpleFlatProperty {
+    uniqueId:string;
+    path:string;
+    name:string;
+    parentName:string;
+    instanceName:string;
+
+    constructor(uniqueId?:string, path?:string, name?: string, parentName?:string, instanceName?:string) {
+        this.uniqueId = uniqueId;
+        this.path = path;
+        this.name = name;
+        this.parentName = parentName;
+        this.instanceName = instanceName;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
new file mode 100644
index 0000000000..7dcd95d712
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
@@ -0,0 +1,77 @@
+/**
+ * Created by ob0695 on 4/18/2017.
+ */
+
+import { ArtifactGroupModel, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance,
+    InputModel, Module, ComponentMetadata, RelationshipModel, RequirementsGroup, CapabilitiesGroup,InputFEModel} from "app/models";
+import {CommonUtils} from "app/utils";
+import {Serializable} from "../utils/serializable";
+import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model";
+
+export class ComponentGenericResponse  implements Serializable<ComponentGenericResponse> {
+
+    public metadata: ComponentMetadata;
+    public deploymentArtifacts:ArtifactGroupModel;
+    public artifacts:ArtifactGroupModel;
+    public toscaArtifacts:ArtifactGroupModel;
+    public componentInstancesProperties:PropertiesGroup;
+    public componentInstancesAttributes:AttributesGroup;
+    public componentInstancesRelations:Array<RelationshipModel>;
+    public componentInstances:Array<ComponentInstance>;
+    public inputs:Array<PropertyBEModel>;
+    public capabilities:CapabilitiesGroup;
+    public requirements:RequirementsGroup;
+    public properties:Array<PropertyModel>;
+    public attributes:Array<AttributeModel>;
+    public groups:Array<Module>;
+    public interfaces:any;
+    public additionalInformation:any;
+    public derivedList:Array<any>;
+
+    deserialize (response): ComponentGenericResponse {
+
+        if(response.componentInstancesProperties) {
+            this.componentInstancesProperties = new PropertiesGroup(response.componentInstancesProperties);
+        }
+        if(response.componentInstancesAttributes) {
+            this.componentInstancesAttributes = new AttributesGroup(response.componentInstancesAttributes);
+        }
+        if(response.componentInstances) {
+            this.componentInstances = CommonUtils.initComponentInstances(response.componentInstances);
+        }
+        if(response.componentInstancesRelations) {
+            this.componentInstancesRelations = CommonUtils.initComponentInstanceRelations(response.componentInstancesRelations);
+        }
+        if(response.deploymentArtifacts) {
+            this.deploymentArtifacts = new ArtifactGroupModel(response.deploymentArtifacts);
+        }
+        if(response.inputs) {
+            this.inputs = CommonUtils.initInputs(response.inputs);
+        }
+        if(response.attributes) {
+            this.attributes = CommonUtils.initAttributes(response.attributes);
+        }
+        if(response.artifacts) {
+            this.artifacts = new ArtifactGroupModel(response.artifacts);
+        }
+        if(response.properties) {
+            this.properties = CommonUtils.initProperties(response.properties);
+        }
+        if(response.capabilities) {
+            this.capabilities = new CapabilitiesGroup(response.capabilities);
+        }
+        if(response.requirements) {
+            this.requirements = new RequirementsGroup(response.requirements);
+        }
+        if(response.toscaArtifacts) {
+            this.toscaArtifacts = new ArtifactGroupModel(response.toscaArtifacts);
+        }
+        if(response.metadata) {
+            this.metadata = new ComponentMetadata().deserialize(response.metadata);
+        }
+        if(response.groups) {
+            this.groups = CommonUtils.initModules(response.groups);
+        }
+        return this;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/responses/properties.response.ts b/catalog-ui/src/app/ng2/services/responses/properties.response.ts
new file mode 100644
index 0000000000..a3d82500eb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/responses/properties.response.ts
@@ -0,0 +1,7 @@
+export class PropertiesResponse {
+    properties: Array<Property>;
+}
+
+class Property {
+    name: string
+}
diff --git a/catalog-ui/src/app/ng2/services/utils/serializable.ts b/catalog-ui/src/app/ng2/services/utils/serializable.ts
new file mode 100644
index 0000000000..f8be120613
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/utils/serializable.ts
@@ -0,0 +1,6 @@
+/**
+ * Created by ob0695 on 4/26/2017.
+ */
+export interface Serializable<T> {
+    deserialize(input: Object): T;
+}