Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando <ml636r@att.com>
author: Michael Lando <ml636r@att.com> 2017-02-19 10:28:42 +0200
committer: Michael Lando <ml636r@att.com> 2017-02-19 10:51:01 +0200
commit: 451a3400b76511393c62a444f588a4ed15f4a549 (patch)
tree: e4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/app/scripts/models
parent: 5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff)
67 files changed, 5173 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/models/activity.ts b/catalog-ui/app/scripts/models/activity.ts
new file mode 100644
index 0000000000..4f8648d6b7
--- /dev/null
+++ b/catalog-ui/app/scripts/models/activity.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 19/11/2015.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    /*this is in uppercase because of the server response*/
+    export class Activity{
+        TIMESTAMP: string;
+        ACTION:string;
+        MODIFIER:string;
+        STATUS:string;
+        DESC:string;
+        COMMENT:string;
+        //custom data
+        public  dateFormat:string;
+
+        constructor() {
+        }
+        public toJSON = ():any => {
+            this.dateFormat = undefined;
+            return this;
+        };
+
+    }
+}
+
+
diff --git a/catalog-ui/app/scripts/models/additional-information.ts b/catalog-ui/app/scripts/models/additional-information.ts
new file mode 100644
index 0000000000..bcac2e5d12
--- /dev/null
+++ b/catalog-ui/app/scripts/models/additional-information.ts
@@ -0,0 +1,44 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+
+    export interface IAdditionalInformationModel {
+        uniqueId: string;
+        key: string;
+        value: string;
+    }
+
+
+    export class AdditionalInformationModel implements IAdditionalInformationModel {
+        uniqueId:string;
+        key:string;
+        value:string;
+
+        constructor() {
+            this.uniqueId = '';
+            this.key = '';
+            this.value = '';
+
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/app-config.ts b/catalog-ui/app/scripts/models/app-config.ts
new file mode 100644
index 0000000000..f0a316fc92
--- /dev/null
+++ b/catalog-ui/app/scripts/models/app-config.ts
@@ -0,0 +1,232 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+
+    'use strict';
+    export interface IApi {
+        baseUrl:string;
+
+        //***** NEW API *******//
+        GET_component: string;
+        PUT_component: string;
+        GET_component_validate_name: string;
+        POST_changeLifecycleState: string;
+        component_api_root:string;
+        welcome_page_video_url:string;
+        //*********//
+
+        GET_user: string;
+        GET_user_authorize: string;
+        GET_all_users: string;
+        POST_create_user;
+        DELETE_delete_user;
+        POST_edit_user_role;
+        GET_resource: string;
+        GET_resources_latestversion_notabstract:string;
+        GET_resources_certified_not_abstract: string;
+        GET_resources_certified_abstract: string;
+        PUT_resource: string;
+        GET_resource_property: string;
+        GET_resource_artifact:string;
+        GET_download_instance_artifact:string;
+        POST_instance_artifact:string;
+        GET_resource_additional_information:string;
+        GET_service_artifact:string;
+        GET_resource_interface_artifact:string;
+        GET_resource_api_artifact:string;
+        GET_resource_validate_name: string;
+        GET_resource_artifact_types: string;
+        GET_activity_log: string;
+        GET_configuration_ui: string;
+        GET_service: string;
+        PUT_product: string;
+        GET_product: string;
+        GET_ecomp_menu_items: string;
+        GET_product_validate_name: string;
+        GET_service_validate_name: string;
+        GET_service_distributions: string;
+        GET_service_distributions_components: string;
+        POST_service_distribution_deploy: string;
+        GET_element: string;
+        GET_catalog: string;
+        GET_resource_category: string;
+        GET_service_category: string;
+        resource_instance: string;
+        GET_resource_instance_property: string;
+        GET_relationship:string;
+        GET_lifecycle_state_resource:string;
+        GET_lifecycle_state_CHECKIN:string;
+        GET_lifecycle_state_CERTIFICATIONREQUEST:string;
+        GET_lifecycle_state_UNDOCHECKOUT:string;
+        root: string;
+        PUT_service: string;
+        GET_download_artifact: string;
+        GET_SDC_Version: string;
+        GET_categories: string;
+        POST_category: string;
+        POST_subcategory: string;
+        POST_change_instance_version: string;
+        GET_requirements_capabilities: string;
+        GET_onboarding: string;
+        GET_component_from_csar_uuid: string;
+        kibana:string;
+
+        //Added by Ikram -- starts
+        GET_product_category: string;
+        GET_product_category_temp: string;
+        GET_product_sub_category: string;
+        //Added by Ikram -- ends
+
+    }
+
+    export interface ILogConfig {
+        minLogLevel: string;
+        prefix: string;
+    }
+
+    export interface ICookie {
+        junctionName: string;
+        prefix: string;
+        userIdSuffix: string;
+        userFirstName: string;
+        userLastName: string;
+        userEmail: string;
+    }
+    export interface IUserTypes {
+        admin: any;
+        designer: any;
+        tester: any;
+    }
+
+    export interface IConfigStatuses {
+        inDesign: IConfigStatus;
+        readyForCertification: IConfigStatus;
+        inCertification: IConfigStatus;
+        certified: IConfigStatus;
+        distributed: IConfigStatus;
+
+    }
+
+    export interface IConfigStatus {
+        name: string;
+        values: Array<string>;
+    }
+
+    export interface IConfigRoles {
+        ADMIN: IConfigRole;
+        DESIGNER: IConfigRole;
+        TESTER: IConfigRole;
+        OPS: IConfigRole;
+        GOVERNOR: IConfigRole;
+        PRODUCT_MANAGER: IConfigRole;
+        PRODUCT_STRATEGIST: IConfigRole;
+    }
+
+    export interface IConfigRole {
+        pages: Array<string>;
+        states: IConfigState;
+    }
+
+    export interface IConfigState {
+        NOT_CERTIFIED_CHECKOUT: Array<IConfigDistribution>;
+        NOT_CERTIFIED_CHECKIN: Array<IConfigDistribution>;
+        READY_FOR_CERTIFICATION: Array<IConfigDistribution>;
+        CERTIFICATION_IN_PROGRESS: Array<IConfigDistribution>;
+        CERTIFIED: Array<IConfigDistribution>;
+    }
+
+    export interface IConfigDistribution {
+        DISTRIBUTION_NOT_APPROVED: Array<ConfigMenuItem>;
+        DISTRIBUTION_APPROVED: Array<ConfigMenuItem>;
+        DISTRIBUTED: Array<ConfigMenuItem>;
+        DISTRIBUTION_REJECTED: Array<ConfigMenuItem>;
+    }
+
+    export interface IConfirmationMessage {
+        showComment: boolean;
+        title: string;
+        message: string;
+    }
+
+    export interface IConfirmationMessages {
+        checkin: IConfirmationMessage;
+        checkout: IConfirmationMessage;
+        certify: IConfirmationMessage;
+        failCertification: IConfirmationMessage;
+        certificationRequest: IConfirmationMessage;
+        approve: IConfirmationMessage;
+        reject: IConfirmationMessage;
+    }
+
+    export interface IAlertMessage {
+        title: string;
+        message: string;
+    }
+
+    export interface IAlertMessages {
+        deleteInstance: IAlertMessage;
+        exitWithoutSaving: IConfirmationMessage;
+    }
+
+    class ConfigMenuItem {
+        text:string;
+        action:string;
+        url:string;
+        disable:boolean = false;
+    }
+
+    export interface IAppConfigurtaion {
+        environment:string;
+        api: IApi;
+        resourceTypesFilter:IResourceTypesFilter;
+        logConfig: ILogConfig;
+        cookie: ICookie;
+        imagesPath: string;
+        toscaFileExtension:string;
+        csarFileExtension:string;
+        testers: Array<ITester>
+        tutorial:any;
+        roles: Array<string>;
+        cpEndPointInstances: Array<string>;
+        openSource:boolean;
+    }
+    export interface IResourceTypesFilter {
+        resource: Array<string>;
+    }
+
+    export interface ITester {
+        email: string;
+    }
+
+    export interface IAppMenu {
+        roles: IConfigRoles;
+        confirmationMessages: IConfirmationMessages;
+        alertMessages: IAlertMessages;
+        statuses: IConfigStatuses;
+        catalogMenuItem: any;
+        categoriesDictionary:any;
+        canvas_buttons:Object;
+        component_workspace_menu_option: any;
+        LifeCycleStatuses:  any;
+        DistributionStatuses: any;
+        ChangeLifecycleStateButton:any;
+    }
+}
diff --git a/catalog-ui/app/scripts/models/artifacts.ts b/catalog-ui/app/scripts/models/artifacts.ts
new file mode 100644
index 0000000000..8ee98d90d1
--- /dev/null
+++ b/catalog-ui/app/scripts/models/artifacts.ts
@@ -0,0 +1,115 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    //this object contains keys, each key contain ArtifactModel
+    export class ArtifactGroupModel{
+        constructor(artifacts?:Models.ArtifactGroupModel) {
+            _.forEach(artifacts, (artifact:Models.ArtifactModel, key) => {
+                this[key] = new Models.ArtifactModel(artifact);
+            });
+        }
+
+        public filteredByType (type:string): Models.ArtifactGroupModel {
+            return JSON.parse(JSON.stringify(_.pick(this, (artifact)=>{ return artifact.artifactType == type})));
+        };
+    }
+
+    export class ArtifactModel {
+
+        artifactDisplayName:string;
+        artifactGroupType:string;
+        uniqueId:string;
+        artifactName:string;
+        artifactLabel:string;
+        artifactType:string;
+        artifactUUID:string;
+        artifactVersion:string;
+        creatorFullName:string;
+        creationDate:number;
+        lastUpdateDate:number;
+        description:string;
+        mandatory:boolean;
+        serviceApi:boolean;
+        payloadData:string;
+        timeout:number;
+        esId:string;
+        "Content-MD5":string;
+        artifactChecksum:string;
+        apiUrl:string;
+        heatParameters:Array<any>;
+        generatedFromId:string;
+
+        //custom properties
+        selected:boolean;
+        originalDescription:string;
+
+        constructor(artifact?:ArtifactModel) {
+            if(artifact) {
+                this.artifactDisplayName = artifact.artifactDisplayName;
+                this.artifactGroupType = artifact.artifactGroupType;
+                this.uniqueId = artifact.uniqueId;
+                this.artifactName = artifact.artifactName;
+                this.artifactLabel = artifact.artifactLabel;
+                this.artifactType = artifact.artifactType;
+                this.artifactUUID = artifact.artifactUUID;
+                this.artifactVersion = artifact.artifactVersion;
+                this.creatorFullName = artifact.creatorFullName;
+                this.creationDate = artifact.creationDate;
+                this.lastUpdateDate = artifact.lastUpdateDate;
+                this.description = artifact.description;
+                this.mandatory = artifact.mandatory;
+                this.serviceApi = artifact.serviceApi;
+                this.payloadData = artifact.payloadData;
+                this.timeout = artifact.timeout;
+                this.esId = artifact.esId;
+                this["Content-MD5"] = artifact["Content-MD5"];
+                this.artifactChecksum = artifact.artifactChecksum;
+                this.apiUrl = artifact.apiUrl;
+                this.heatParameters = _.sortBy(artifact.heatParameters, 'name');
+                this.generatedFromId = artifact.generatedFromId;
+                this.selected = artifact.selected ? artifact.selected : false;
+                this.originalDescription = artifact.description;
+            }
+        }
+
+        public isHEAT = ():boolean => {
+            return Utils.Constants.ArtifactType.HEAT === this.artifactType.substring(0,4);
+        };
+
+        // public isEditableInInstanceLevel = ():boolean => {
+        //     return true;
+        // };
+
+        public isThirdParty = ():boolean => {
+            return _.has(Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES, this.artifactType);
+        };
+
+        public toJSON = ():any => {
+            this.selected = undefined;
+            this.originalDescription = undefined;
+            return this;
+        };
+    }
+}
+
+
diff --git a/catalog-ui/app/scripts/models/aschema-property.ts b/catalog-ui/app/scripts/models/aschema-property.ts
new file mode 100644
index 0000000000..7ecc85c302
--- /dev/null
+++ b/catalog-ui/app/scripts/models/aschema-property.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by osonsino on 16/05/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class SchemaPropertyGroupModel{
+        property: SchemaProperty;
+
+        constructor(schemaProperty?:Models.SchemaProperty) {
+            this.property = schemaProperty;
+        }
+    }
+
+    export class SchemaProperty {
+
+        type: string;
+        required: boolean;
+        definition: boolean;
+        description: string;
+        password: boolean;
+        //custom properties
+        simpleType: string;
+
+        constructor(schemaProperty?:SchemaProperty) {
+            if(schemaProperty) {
+                this.type = schemaProperty.type;
+                this.required = schemaProperty.required;
+                this.definition = schemaProperty.definition;
+                this.description = schemaProperty.description;
+                this.password = schemaProperty.password;
+                this.simpleType = schemaProperty.simpleType;
+            }
+        }
+
+        public toJSON = ():any => {
+            this.simpleType = undefined;
+            return this;
+        };
+    }
+}
+
+
diff --git a/catalog-ui/app/scripts/models/attributes.ts b/catalog-ui/app/scripts/models/attributes.ts
new file mode 100644
index 0000000000..ea4c7a5a23
--- /dev/null
+++ b/catalog-ui/app/scripts/models/attributes.ts
@@ -0,0 +1,139 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class AttributesGroup {
+        constructor(attributesObj?:Models.AttributesGroup) {
+            _.forEach(attributesObj, (attributes:Array<Models.AttributeModel>, instance) => {
+                this[instance] = [];
+                _.forEach(attributes, (attribute:Models.AttributeModel):void => {
+                    attribute.resourceInstanceUniqueId = instance;
+                    attribute.readonly = true;
+                    this[instance].push(new Models.AttributeModel(attribute));
+                });
+            });
+        }
+    }
+
+    export interface IAttributeModel {
+
+        //server data
+        uniqueId:string;
+        name:string;
+        defaultValue:string;
+        description:string;
+        type:string;
+        schema:Models.SchemaAttributeGroupModel;
+        status:string;
+        value:string;
+        hidden:boolean;
+        parentUniqueId:string;
+        //custom data
+        resourceInstanceUniqueId:string;
+        readonly:boolean;
+        valueUniqueUid:string;
+    }
+
+    export class AttributeModel implements IAttributeModel {
+
+        //server data
+        uniqueId:string;
+        name:string;
+        defaultValue:string;
+        description:string;
+        type:string;
+        schema:Models.SchemaAttributeGroupModel;
+        status:string;
+        value:string;
+        hidden:boolean;
+        parentUniqueId:string;
+        //custom data
+        resourceInstanceUniqueId:string;
+        readonly:boolean;
+        valueUniqueUid:string;
+
+        constructor(attribute?:Models.AttributeModel) {
+            if (attribute) {
+                this.uniqueId = attribute.uniqueId;
+                this.name = attribute.name;
+                this.defaultValue = attribute.defaultValue;
+                this.description = attribute.description;
+                this.type = attribute.type;
+                this.status = attribute.status;
+                this.schema = attribute.schema;
+                this.value = attribute.value;
+                this.hidden = attribute.hidden;
+                this.parentUniqueId = attribute.parentUniqueId;
+                this.resourceInstanceUniqueId = attribute.resourceInstanceUniqueId;
+                this.readonly = attribute.readonly;
+                this.valueUniqueUid = attribute.valueUniqueUid;
+            }
+
+            if (!this.schema || !this.schema.property) {
+                this.schema = new Models.SchemaPropertyGroupModel(new Models.SchemaProperty());
+            } else {
+                //forcing creating new object, so editing different one than the object in the table
+                this.schema = new Models.SchemaAttributeGroupModel(new Models.SchemaAttribute(this.schema.property));
+            }
+
+            this.convertValueToView();
+        }
+
+        public convertToServerObject:Function = ():string => {
+            if (this.defaultValue && this.type === 'map') {
+                this.defaultValue = '{' + this.defaultValue + '}';
+            }
+            if (this.defaultValue && this.type === 'list') {
+                this.defaultValue = '[' + this.defaultValue + ']';
+            }
+            this.defaultValue = this.defaultValue != "" && this.defaultValue != "[]" && this.defaultValue != "{}" ? this.defaultValue : null;
+
+            return JSON.stringify(this);
+        };
+
+
+        public convertValueToView() {
+            //unwrapping value {} or [] if type is complex
+            if (this.defaultValue && (this.type === 'map' || this.type === 'list') &&
+                ['[', '{'].indexOf(this.defaultValue.charAt(0)) > -1 &&
+                [']', '}'].indexOf(this.defaultValue.slice(-1)) > -1) {
+                this.defaultValue = this.defaultValue.slice(1, -1);
+            }
+
+            //also for value - for the modal in canvas
+            if (this.value && (this.type === 'map' || this.type === 'list') &&
+                ['[', '{'].indexOf(this.value.charAt(0)) > -1 &&
+                [']', '}'].indexOf(this.value.slice(-1)) > -1) {
+                this.value = this.value.slice(1, -1);
+            }
+        }
+
+        public toJSON = ():any => {
+            if (!this.resourceInstanceUniqueId) {
+                this.value = undefined;
+            }
+            this.readonly = undefined;
+            this.resourceInstanceUniqueId = undefined;
+            return this;
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/models/capability.ts b/catalog-ui/app/scripts/models/capability.ts
new file mode 100644
index 0000000000..815be5a389
--- /dev/null
+++ b/catalog-ui/app/scripts/models/capability.ts
@@ -0,0 +1,116 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 4/20/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    //this is an object contains keys, when each key has matching array.
+    // for example: key = tosca.capabilities.network.Linkable and the match array is array of capabilities objects
+    export class CapabilitiesGroup {
+        constructor(capabilityGroupObj?:Models.CapabilitiesGroup) {
+            _.forEach(capabilityGroupObj, (capabilitiesArrayObj:Array<Models.Capability>, instance) => {
+                this[instance] = [];
+                _.forEach(capabilitiesArrayObj, (capability:Models.Capability):void => {
+                    this[instance].push(new Models.Capability(capability));
+                });
+            });
+        }
+
+        public findValueByKey(keySubstring:string):Array<Models.Capability> {
+            let key:string = _.find(Object.keys(this), (key)=> {
+                return _.includes(key.toLowerCase(), keySubstring);
+            });
+            return this[key];
+        }
+    }
+
+    export class Capability {
+
+        //server data
+        name:string;
+        ownerId:string;
+        ownerName:string;
+        type:string;
+        uniqueId:string;
+        capabilitySources:Array<String>;
+        minOccurrences:string;
+        maxOccurrences:string;
+        properties:Array<Models.PropertyModel>;
+        description:string;
+        validSourceTypes:Array<string>;
+        //custom
+        selected:boolean;
+        filterTerm:string;
+
+        constructor(capability?:Capability) {
+
+            if (capability) {
+                //server data
+                this.name = capability.name;
+                this.ownerId = capability.ownerId;
+                this.ownerName = capability.ownerName;
+                this.type = capability.type;
+                this.uniqueId = capability.uniqueId;
+                this.capabilitySources = capability.capabilitySources;
+                this.minOccurrences = capability.minOccurrences;
+                this.maxOccurrences = capability.maxOccurrences;
+                this.properties = capability.properties;
+                this.description = capability.description;
+                this.validSourceTypes = capability.validSourceTypes;
+                this.selected = capability.selected;
+                this.initFilterTerm();
+
+            }
+        }
+
+        public getFullTitle():string {
+            let maxOccurrences:string = this.maxOccurrences === 'UNBOUNDED' ? '∞' : this.maxOccurrences;
+            return this.ownerName + ': ' + this.name + ': [' + this.minOccurrences + ', ' + maxOccurrences + ']';
+        }
+
+        public toJSON = ():any => {
+            this.selected = undefined;
+            this.filterTerm = undefined;
+            return this;
+        };
+
+        private initFilterTerm = ():void =>{
+            this.filterTerm = this.name + " " +
+                (this.type ? (this.type.substring("tosca.capabilities.".length) + " " ) : "") +
+                (this.description||"") + " " +
+                (this.ownerName||"") + " " +
+                (this.validSourceTypes ? (this.validSourceTypes.join(',') + " ") : "") +
+                this.minOccurrences+","+this.maxOccurrences;
+            if(this.properties && this.properties.length){
+                _.forEach(this.properties,(prop:Models.PropertyModel)=>{
+                    this.filterTerm += " "+ prop.name +
+                        " " + (prop.description||"") +
+                        " " + prop.type +
+                        (prop.schema && prop.schema.property?(" " + prop.schema.property.type):"");
+                });
+            }
+        }
+    }
+}
+
+
diff --git a/catalog-ui/app/scripts/models/category.ts b/catalog-ui/app/scripts/models/category.ts
new file mode 100644
index 0000000000..730460cbc0
--- /dev/null
+++ b/catalog-ui/app/scripts/models/category.ts
@@ -0,0 +1,67 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class ICategoryBase {
+
+        //server properties
+        name: string;
+        normalizedName: string;
+        uniqueId:string;
+        icons: Array<string>;
+
+        //custom properties
+        filterTerms: string;
+        isDisabled: boolean;
+        filteredGroup: Array<Models.IGroup>;
+
+        constructor(category?: ICategoryBase){
+            if (category) {
+                this.name = category.name;
+                this.normalizedName = category.normalizedName;
+                this.icons = category.icons;
+                this.filterTerms = category.filterTerms;
+                this.isDisabled = category.isDisabled;
+                this.filteredGroup = category.filteredGroup;
+            }
+        }
+    }
+
+    export class IMainCategory extends ICategoryBase {
+        subcategories:Array<ISubCategory>;
+        constructor();
+        constructor(category?: IMainCategory){
+            super(category);
+            if (category) {
+                this.subcategories = category.subcategories;
+            }
+        }
+    }
+
+    export class ISubCategory extends ICategoryBase {
+        groupings:Array<ICategoryBase>;
+    }
+
+    export interface IGroup extends ICategoryBase {
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/comments.ts b/catalog-ui/app/scripts/models/comments.ts
new file mode 100644
index 0000000000..0f7643690d
--- /dev/null
+++ b/catalog-ui/app/scripts/models/comments.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class AsdcComment{
+        public userRemarks:  string;
+
+        constructor() {
+        }
+    }
+}
+
+
+
diff --git a/catalog-ui/app/scripts/models/components/component.ts b/catalog-ui/app/scripts/models/components/component.ts
new file mode 100644
index 0000000000..c0fb3a9fbb
--- /dev/null
+++ b/catalog-ui/app/scripts/models/components/component.ts
@@ -0,0 +1,828 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models.Components {
+    'use strict';
+    import Util = jasmine.Util;
+
+    export interface IComponent {
+
+        //---------------------------------------------- API CALLS ----------------------------------------------------//
+
+        //Component API
+        getComponent():ng.IPromise<Models.Components.Component>;
+        updateComponent():ng.IPromise<Models.Components.Component>;
+        createComponentOnServer():ng.IPromise<Models.Components.Component>;
+        changeLifecycleState(state:string, commentObj:Models.AsdcComment):ng.IPromise<Models.Components.Component>;
+        validateName(newName:string):ng.IPromise<Models.IValidate>;
+        updateRequirementsCapabilities():ng.IPromise<any>;
+
+        //Artifacts API
+        addOrUpdateArtifact(artifact:ArtifactModel):ng.IPromise<Models.ArtifactModel>;
+        updateMultipleArtifacts(artifacts:Array<Models.ArtifactModel>):ng.IPromise<any>;
+        deleteArtifact(artifactId:string, artifactLabel:string):ng.IPromise<Models.ArtifactModel>;
+        downloadInstanceArtifact(artifactId:string):ng.IPromise<Models.IFileDownload>;
+        downloadArtifact(artifactId:string):ng.IPromise<Models.IFileDownload>;
+
+        //Property API
+        addOrUpdateProperty(property:Models.PropertyModel):ng.IPromise<Models.PropertyModel>;
+        deleteProperty(propertyId:string):ng.IPromise<Models.PropertyModel>;
+        updateInstanceProperty(property:Models.PropertyModel):ng.IPromise<Models.PropertyModel>;
+
+        //Attribute API
+        deleteAttribute(attributeId:string):ng.IPromise<Models.AttributeModel>;
+        addOrUpdateAttribute(attribute:Models.AttributeModel):ng.IPromise<Models.AttributeModel>;
+        updateInstanceAttribute(attribute:Models.AttributeModel):ng.IPromise<Models.AttributeModel>;
+
+
+
+
+        //Component Instance API
+        createComponentInstance(componentInstance:Models.ComponentsInstances.ComponentInstance):ng.IPromise<Models.ComponentsInstances.ComponentInstance>;
+        deleteComponentInstance(componentInstanceId:string):ng.IPromise<Models.ComponentsInstances.ComponentInstance>;
+        addOrUpdateInstanceArtifact(artifact:Models.ArtifactModel):ng.IPromise<Models.ArtifactModel>;
+        deleteInstanceArtifact(artifactId:string, artifactLabel:string):ng.IPromise<Models.ArtifactModel>;
+        uploadInstanceEnvFile(artifact:Models.ArtifactModel): ng.IPromise<Models.ArtifactModel>;
+        changeComponentInstanceVersion(componentUid:string):ng.IPromise<Models.Components.Component>;
+        updateComponentInstance(componentInstance:Models.ComponentsInstances.ComponentInstance): ng.IPromise<Models.ComponentsInstances.ComponentInstance>;
+        updateMultipleComponentInstances(instances: Array<Models.ComponentsInstances.ComponentInstance>):ng.IPromise<Array<Models.ComponentsInstances.ComponentInstance>>;
+
+        //Inputs API
+        getComponentInstanceInputProperties(componentInstanceId: string, inputId: string):ng.IPromise<Array<Models.PropertyModel>>
+        getComponentInputs(componentId: string):ng.IPromise<Array<Models.InputModel>>;
+
+        createRelation(link:Models.RelationshipModel):ng.IPromise<Models.RelationshipModel>;
+        deleteRelation(link:Models.RelationshipModel):ng.IPromise<Models.RelationshipModel>;
+
+
+        //Modules
+        getModuleForDisplay(moduleId:string):ng.IPromise<Models.DisplayModule>;
+        updateGroupMetadata(group:Models.Module):ng.IPromise<Models.Module>;
+        //---------------------------------------------- HELP FUNCTIONS ----------------------------------------------------//
+
+        getComponentSubType():string;
+        isAlreadyCertified():boolean;
+        isProduct():boolean;
+        isService():boolean;
+        isResource():boolean;
+        isComplex():boolean;
+        getAdditionalInformation():Array<Models.AdditionalInformationModel>;
+        getAllVersionsAsSortedArray():Array<any>;
+        getStatus(sdcMenu:Models.IAppMenu):string;
+    }
+
+
+    export class Component implements IComponent {
+
+        //server data
+        public abstract:string;
+        public uniqueId:string;
+        public uuid:string;
+        public invariantUUID:string;
+        public name:string;
+        public version:string;
+        public creationDate:number;
+        public lastUpdateDate:number;
+        public description:string;
+        public lifecycleState:string;
+        public tags:Array<string>;
+        public icon:string;
+        public contactId:string;
+        public allVersions:any;
+        public creatorUserId:string;
+        public creatorFullName:string;
+        public lastUpdaterUserId:string;
+        public lastUpdaterFullName:string;
+        public componentType:string;
+        public deploymentArtifacts:Models.ArtifactGroupModel;
+        public artifacts:Models.ArtifactGroupModel;
+        public toscaArtifacts:Models.ArtifactGroupModel;
+        public distributionStatus:string;
+        public categories:Array<Models.IMainCategory>;
+        public componentInstancesProperties:Models.PropertiesGroup;
+        public componentInstancesAttributes:Models.AttributesGroup;
+        public componentInstancesRelations:Array<Models.RelationshipModel>;
+        public componentInstances:Array<Models.ComponentsInstances.ComponentInstance>;
+        public inputs:Array<Models.InputModel>;
+        public capabilities:Models.CapabilitiesGroup;
+        public requirements:Models.RequirementsGroup;
+        public additionalInformation:any;
+        public properties:Array<Models.PropertyModel>;
+        public attributes:Array<Models.AttributeModel>;
+        public highestVersion:boolean;
+        public vendorName:string;
+        public vendorRelease:string;
+        public derivedList:Array<any>;
+        public interfaces:any;
+        public normalizedName:string;
+        public systemName:string;
+        public projectCode:string;
+        public groups:Array<Models.Module>;
+        //custom properties
+        public componentService:Sdc.Services.Components.IComponentService;
+        public filterTerm:string;
+        public iconSprite:string;
+        public selectedInstance:Models.ComponentsInstances.ComponentInstance;
+        public mainCategory:string;
+        public subCategory:string;
+        public selectedCategory:string;
+        public showMenu:boolean;
+
+
+        constructor(componentService:Sdc.Services.Components.IComponentService,
+                    protected $q:ng.IQService,
+                    component?:Component) {
+            if (component) {
+                this.abstract = component.abstract;
+                this.uniqueId = component.uniqueId;
+                this.uuid = component.uuid;
+                this.invariantUUID = component.invariantUUID;
+                this.additionalInformation = component.additionalInformation;
+                this.artifacts = new Sdc.Models.ArtifactGroupModel(component.artifacts);
+                this.toscaArtifacts = new Sdc.Models.ArtifactGroupModel(component.toscaArtifacts);
+                this.contactId = component.contactId;
+                this.categories = component.categories;
+                this.creatorUserId = component.creatorUserId;
+                this.creationDate = component.creationDate;
+                this.creatorFullName = component.creatorFullName;
+                this.description = component.description;
+                this.icon = component.icon;
+                this.lastUpdateDate = component.lastUpdateDate;
+                this.lastUpdaterUserId = component.lastUpdaterUserId;
+                this.lastUpdaterFullName = component.lastUpdaterFullName;
+                this.lifecycleState = component.lifecycleState;
+                this.initComponentInstanceRelations(component.componentInstancesRelations);
+                this.componentInstancesProperties = new Models.PropertiesGroup(component.componentInstancesProperties);
+                this.componentInstancesAttributes = new Models.AttributesGroup(component.componentInstancesAttributes);
+                this.name = component.name;
+                this.version = component.version;
+                this.tags = component.tags;
+                this.capabilities = new Models.CapabilitiesGroup(component.capabilities);
+                this.requirements = new Models.RequirementsGroup(component.requirements);
+                this.allVersions = component.allVersions;
+                this.deploymentArtifacts = new Sdc.Models.ArtifactGroupModel(component.deploymentArtifacts);
+                this.componentType = component.componentType;
+                this.distributionStatus = component.distributionStatus;
+                this.highestVersion = component.highestVersion;
+                this.vendorName = component.vendorName;
+                this.vendorRelease = component.vendorRelease;
+                this.derivedList = component.derivedList;
+                this.interfaces = component.interfaces;
+                this.normalizedName = component.normalizedName;
+                this.systemName = component.systemName;
+                this.projectCode = component.projectCode;
+                this.inputs = component.inputs;
+                this.componentInstances = Utils.CommonUtils.initComponentInstances(component.componentInstances);
+                this.properties = Utils.CommonUtils.initProperties(component.properties, this.uniqueId);
+                this.attributes = Utils.CommonUtils.initAttributes(component.attributes, this.uniqueId);
+                this.selectedInstance = component.selectedInstance;
+                this.iconSprite = component.iconSprite;
+                this.showMenu = true;
+                this.groups = Utils.CommonUtils.initModules(component.groups);
+            }
+
+            //custom properties
+            this.componentService = componentService;
+        }
+
+        public setUniqueId = (uniqueId:string):void => {
+            this.uniqueId = uniqueId;
+        };
+
+        public setSelectedInstance = (componentInstance:Models.ComponentsInstances.ComponentInstance):void => {
+            this.selectedInstance = componentInstance;
+        };
+
+        //------------------------------------------ Init Functions ----------------------------------------------------------------//
+
+        private initComponentInstanceRelations = (componentInstanceRelationsObj:Array<Models.RelationshipModel>):void => {
+            if (componentInstanceRelationsObj) {
+                this.componentInstancesRelations = [];
+                _.forEach(componentInstanceRelationsObj, (instanceRelation:Models.RelationshipModel):void => {
+                    this.componentInstancesRelations.push(new Models.RelationshipModel(instanceRelation));
+                });
+            }
+        };
+        //----------------------------------------------------------------------------------------------------------------------//
+
+        //------------------------------------------ API Calls ----------------------------------------------------------------//
+        public changeLifecycleState = (state:string, commentObj:Models.AsdcComment):ng.IPromise<Models.Components.Component> => {
+            return this.componentService.changeLifecycleState(this, state, JSON.stringify(commentObj));
+        };
+
+        public getComponent = ():ng.IPromise<Models.Components.Component> => {
+            return this.componentService.getComponent(this.uniqueId);
+        };
+
+        public createComponentOnServer = ():ng.IPromise<Models.Components.Component> => {
+            this.handleTags();
+            return this.componentService.createComponent(this);
+        };
+
+        public updateComponent = ():ng.IPromise<Models.Components.Component> => {
+            this.handleTags();
+            return this.componentService.updateComponent(this);
+        };
+
+        public validateName = (newName:string, subtype?:string):ng.IPromise<Models.IValidate> => {
+            return this.componentService.validateName(newName, subtype);
+        };
+
+        public downloadArtifact = (artifactId:string):ng.IPromise<Models.IFileDownload> => {
+            return this.componentService.downloadArtifact(this.uniqueId, artifactId);
+        };
+
+        public addOrUpdateArtifact = (artifact:ArtifactModel):ng.IPromise<Models.ArtifactModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (artifactObj:Models.ArtifactModel):void  => {
+                let newArtifact = new Models.ArtifactModel(artifactObj);
+                let artifacts = this.getArtifactsByType(artifactObj.artifactGroupType);
+                artifacts[artifactObj.artifactLabel] = newArtifact;
+                deferred.resolve(newArtifact);
+            };
+            let onError = (error:any):void => {
+                deferred.reject(error);
+            };
+            this.componentService.addOrUpdateArtifact(this.uniqueId, artifact).then(onSuccess, onError);
+            return deferred.promise;
+        };
+
+        public updateMultipleArtifacts = (artifacts:Array<Models.ArtifactModel>):ng.IPromise<any>=> {
+            let deferred = this.$q.defer();
+            let onSuccess = (response:any):void  => {
+                deferred.resolve(response);
+            };
+            let onError = (error:any):void => {
+                deferred.reject(error);
+            };
+            let q = new Utils.Functions.QueueUtils(this.$q);
+
+            _.forEach(artifacts, (artifact)=> {
+                q.addBlockingUIAction(()=> this.addOrUpdateArtifact(artifact).then(onSuccess, onError));
+            });
+            return deferred.promise;
+        };
+
+
+        public deleteArtifact = (artifactId:string, artifactLabel:string):ng.IPromise<Models.ArtifactModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (artifactObj:Models.ArtifactModel):void  => {
+                let newArtifact = new Models.ArtifactModel(artifactObj);
+                let artifacts = this.getArtifactsByType(artifactObj.artifactGroupType);
+                if (newArtifact.mandatory  || newArtifact.serviceApi) {
+                    artifacts[newArtifact.artifactLabel] = newArtifact;
+                }
+                else {
+                    delete artifacts[artifactLabel];
+                }
+                deferred.resolve(newArtifact);
+            };
+            this.componentService.deleteArtifact(this.uniqueId, artifactId, artifactLabel).then(onSuccess);
+            return deferred.promise;
+        };
+
+
+        public addOrUpdateProperty = (property:Models.PropertyModel):ng.IPromise<Models.PropertyModel> => {
+            let deferred = this.$q.defer();
+
+            let onError = (error:any):void  => {
+                deferred.reject(error);
+            };
+
+            if (!property.uniqueId) {
+                let onSuccess = (property:Models.PropertyModel):void  => {
+                    let newProperty = new Models.PropertyModel(property);
+                    this.properties.push(newProperty);
+                    deferred.resolve(newProperty);
+                };
+                this.componentService.addProperty(this.uniqueId, property).then(onSuccess, onError);
+            }
+            else {
+                let onSuccess = (newProperty:Models.PropertyModel):void  => {
+                    // find exist instance property in parent component for update the new value ( find bu uniqueId )
+                    let existProperty:Models.PropertyModel = <Models.PropertyModel>_.find(this.properties, {uniqueId: newProperty.uniqueId});
+                    let propertyIndex = this.properties.indexOf(existProperty);
+                    newProperty.readonly = this.uniqueId != newProperty.parentUniqueId;
+                    this.properties[propertyIndex] = newProperty;
+                    deferred.resolve(newProperty);
+                };
+                this.componentService.updateProperty(this.uniqueId, property).then(onSuccess, onError);
+            }
+            return deferred.promise;
+        };
+
+        public addOrUpdateAttribute = (attribute:Models.AttributeModel):ng.IPromise<Models.AttributeModel> => {
+            let deferred = this.$q.defer();
+
+            let onError = (error:any):void  => {
+                deferred.reject(error);
+            };
+
+            if (!attribute.uniqueId) {
+                let onSuccess = (attribute:Models.AttributeModel):void  => {
+                    let newAttribute = new Models.AttributeModel(attribute);
+                    this.attributes.push(newAttribute);
+                    deferred.resolve(newAttribute);
+                };
+                this.componentService.addAttribute(this.uniqueId, attribute).then(onSuccess, onError);
+            }
+            else {
+                let onSuccess = (newAttribute:Models.AttributeModel):void  => {
+                    let existAttribute:Models.AttributeModel = <Models.AttributeModel>_.find(this.attributes, {uniqueId: newAttribute.uniqueId});
+                    let attributeIndex = this.attributes.indexOf(existAttribute);
+                    newAttribute.readonly = this.uniqueId != newAttribute.parentUniqueId;
+                    this.attributes[attributeIndex] = newAttribute;
+                    deferred.resolve(newAttribute);
+                };
+                this.componentService.updateAttribute(this.uniqueId, attribute).then(onSuccess, onError);
+            }
+            return deferred.promise;
+        };
+
+        public deleteProperty = (propertyId:string):ng.IPromise<Models.PropertyModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = ():void  => {
+                console.log("Property deleted");
+                delete _.remove(this.properties, {uniqueId: propertyId})[0];
+                deferred.resolve();
+            };
+            let onFailed = ():void  => {
+                console.log("Failed to delete property");
+                deferred.reject();
+            };
+            this.componentService.deleteProperty(this.uniqueId, propertyId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public deleteAttribute = (attributeId:string):ng.IPromise<Models.AttributeModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = ():void  => {
+                console.log("Attribute deleted");
+                delete _.remove(this.attributes, {uniqueId: attributeId})[0];
+            };
+            let onFailed = ():void  => {
+                console.log("Failed to delete attribute");
+            };
+            this.componentService.deleteAttribute(this.uniqueId, attributeId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public updateInstanceProperty = (property:Models.PropertyModel):ng.IPromise<Models.PropertyModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (newProperty:Models.PropertyModel):void => {
+                // find exist instance property in parent component for update the new value ( find bu uniqueId & path)
+                let existProperty:Models.PropertyModel = <Models.PropertyModel>_.find(this.componentInstancesProperties[newProperty.resourceInstanceUniqueId], {uniqueId: newProperty.uniqueId,path: newProperty.path});
+                let index = this.componentInstancesProperties[newProperty.resourceInstanceUniqueId].indexOf(existProperty);
+                this.componentInstancesProperties[newProperty.resourceInstanceUniqueId][index] = newProperty;
+                deferred.resolve(newProperty);
+            };
+            let onFailed = (error:any):void => {
+                console.log('Failed to update property value');
+                deferred.reject(error);
+            };
+            this.componentService.updateInstanceProperty(this.uniqueId, property).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public updateInstanceAttribute = (attribute:Models.AttributeModel):ng.IPromise<Models.AttributeModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (newAttribute:Models.AttributeModel):void => {
+                let existAttribute:Models.AttributeModel = <Models.AttributeModel>_.find(this.componentInstancesAttributes[newAttribute.resourceInstanceUniqueId], {uniqueId: newAttribute.uniqueId});
+                let index = this.componentInstancesAttributes[newAttribute.resourceInstanceUniqueId].indexOf(existAttribute);
+                this.componentInstancesAttributes[newAttribute.resourceInstanceUniqueId][index] = newAttribute;
+                deferred.resolve(newAttribute);
+            };
+            let onFailed = (error:any):void => {
+                console.log('Failed to update attribute value');
+                deferred.reject(error);
+            };
+            this.componentService.updateInstanceAttribute(this.uniqueId, attribute).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public downloadInstanceArtifact = (artifactId:string):ng.IPromise<Models.IFileDownload> => {
+            return this.componentService.downloadInstanceArtifact(this.uniqueId, this.selectedInstance.uniqueId, artifactId);
+        };
+
+        public deleteInstanceArtifact = (artifactId:string, artifactLabel:string):ng.IPromise<Models.ArtifactModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (artifactObj:Models.ArtifactModel):void  => {
+                let newArtifact = new Models.ArtifactModel(artifactObj);
+                let artifacts = this.selectedInstance.deploymentArtifacts;
+                if (newArtifact.mandatory  || newArtifact.serviceApi) {//?????????
+                    artifacts[newArtifact.artifactLabel] = newArtifact;
+                }
+                else {
+                    delete artifacts[artifactLabel];
+                }
+                deferred.resolve(newArtifact);
+            };
+            this.componentService.deleteInstanceArtifact(this.uniqueId,this.selectedInstance.uniqueId, artifactId, artifactLabel).then(onSuccess);
+            return deferred.promise;
+        };
+
+        public addOrUpdateInstanceArtifact = (artifact:ArtifactModel):ng.IPromise<Models.ArtifactModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (artifactObj:Models.ArtifactModel):void  => {
+                this.selectedInstance.deploymentArtifacts[artifactObj.artifactLabel] = artifactObj;
+                deferred.resolve(artifactObj);
+            };
+            let onError = (error:any):void => {
+                deferred.reject(error);
+            };
+            if(artifact.uniqueId){
+                this.componentService.updateInstanceArtifact(this.uniqueId, this.selectedInstance.uniqueId, artifact).then(onSuccess, onError);
+            }else{
+                this.componentService.addInstanceArtifact(this.uniqueId, this.selectedInstance.uniqueId, artifact).then(onSuccess, onError);
+            }
+            return deferred.promise;
+        };
+
+        public uploadInstanceEnvFile = (artifact:Models.ArtifactModel):ng.IPromise<Models.ArtifactModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (artifactObj:Models.ArtifactModel):void  => {
+                this.selectedInstance.deploymentArtifacts[artifactObj.artifactLabel] = artifactObj;
+                deferred.resolve(artifactObj);
+            };
+            let onError = (error:any):void => {
+                deferred.reject(error);
+            };
+            this.componentService.uploadInstanceEnvFile(this.uniqueId, this.selectedInstance.uniqueId, artifact).then(onSuccess, onError);
+            return deferred.promise;
+        };
+
+        //this function will update the instance version than the function call getComponent to update the current component and return the new instance version
+        public changeComponentInstanceVersion = (componentUid:string):ng.IPromise<Models.Components.Component> => {
+            let deferred = this.$q.defer();
+            let onFailed = (error:any):void => {
+                deferred.reject(error);
+            };
+            let onSuccess = (componentInstance:Models.ComponentsInstances.ComponentInstance):void  => {
+                let onSuccess = (component:Models.Components.Component):void  => {
+                    component.setSelectedInstance(componentInstance);
+                    deferred.resolve(component);
+                };
+                this.getComponent().then(onSuccess, onFailed);
+            };
+            this.componentService.changeResourceInstanceVersion(this.uniqueId, this.selectedInstance.uniqueId, componentUid).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public createComponentInstance = (componentInstance:Models.ComponentsInstances.ComponentInstance):ng.IPromise<Models.ComponentsInstances.ComponentInstance> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (instance:Models.ComponentsInstances.ComponentInstance):void  => {
+                let onSuccess = (component:Models.Components.Component):void  => {
+                    this.componentInstances = Utils.CommonUtils.initComponentInstances(component.componentInstances);
+                    this.componentInstancesProperties = new Models.PropertiesGroup(component.componentInstancesProperties);
+                    this.componentInstancesAttributes = new Models.AttributesGroup(component.componentInstancesAttributes);
+                    deferred.resolve(instance);
+                };
+                this.getComponent().then(onSuccess);
+            };
+            let onFailed = (error:any):void => {
+                deferred.reject(error);
+            };
+            this.componentService.createComponentInstance(this.uniqueId, componentInstance).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public updateComponentInstance = (componentInstance:Models.ComponentsInstances.ComponentInstance):ng.IPromise<Models.ComponentsInstances.ComponentInstance> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (updatedInstance:Models.ComponentsInstances.ComponentInstance):void  => {
+                let componentInstance:Models.ComponentsInstances.ComponentInstance = _.find(this.componentInstances, (instance:Models.ComponentsInstances.ComponentInstance) => {
+                    return instance.uniqueId === updatedInstance.uniqueId;
+                });
+
+                let index = this.componentInstances.indexOf(componentInstance);
+                this.componentInstances[index] = componentInstance;
+                deferred.resolve(updatedInstance);
+
+            };
+            let onFailed = (error:any):void => {
+                deferred.reject(error);
+            };
+            this.componentService.updateComponentInstance(this.uniqueId, componentInstance).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public updateMultipleComponentInstances = (instances: Array<Models.ComponentsInstances.ComponentInstance>):ng.IPromise<Array<Models.ComponentsInstances.ComponentInstance>> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (updatedInstances:Array<Models.ComponentsInstances.ComponentInstance>):void  => {
+                deferred.resolve(updatedInstances);
+            };
+            let onFailed = (error:any):void => {
+                deferred.reject(error);
+            };
+            this.componentService.updateMultipleComponentInstances(this.uniqueId, instances).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public deleteComponentInstance = (componentInstanceId:string):ng.IPromise<Models.ComponentsInstances.ComponentInstance> => {
+            let deferred = this.$q.defer();
+            let onSuccess = ():void  => {
+                let onSuccess = (component:Models.Components.Component):void  => {
+                    this.componentInstances = Utils.CommonUtils.initComponentInstances(component.componentInstances);
+                    this.componentInstancesProperties = new Models.PropertiesGroup(component.componentInstancesProperties);
+                    this.componentInstancesAttributes = new Models.AttributesGroup(component.componentInstancesAttributes);
+                    this.initComponentInstanceRelations(component.componentInstancesRelations);
+                    deferred.resolve();
+                };
+                this.getComponent().then(onSuccess);
+            };
+            let onFailed = (error:any):void => {
+                deferred.reject(error);
+            };
+            this.componentService.deleteComponentInstance(this.uniqueId, componentInstanceId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+
+        public  createRelation = (relation:Models.RelationshipModel):ng.IPromise<Models.RelationshipModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (relation:Models.RelationshipModel):void  => {
+                console.info('Link created successfully', relation);
+                if (!this.componentInstancesRelations) {
+                    this.componentInstancesRelations = [];
+                }
+                this.componentInstancesRelations.push(new Models.RelationshipModel(relation));
+                deferred.resolve(relation);
+            };
+            let onFailed = (error:any):void => {
+                console.info('Failed to create relation', error);
+                deferred.reject(error);
+            };
+            this.componentService.createRelation(this.uniqueId, relation).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public  deleteRelation = (relation:Models.RelationshipModel):ng.IPromise<Models.RelationshipModel> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (responseRelation:Models.RelationshipModel):void  => {
+                console.log("Link Deleted In Server");
+                let relationToDelete = _.find(this.componentInstancesRelations, (item) => {
+                    return item.fromNode === relation.fromNode && item.toNode === relation.toNode && _.some(item.relationships, (relationship)=> {
+                            return angular.equals(relation.relationships[0], relationship);
+                        });
+                });
+                let index = this.componentInstancesRelations.indexOf(relationToDelete);
+                if (relationToDelete != undefined && index > -1) {
+                    if (relationToDelete.relationships.length == 1) {
+                        this.componentInstancesRelations.splice(index, 1);
+                    } else {
+                        this.componentInstancesRelations[index].relationships =
+                            _.reject(this.componentInstancesRelations[index].relationships, relation.relationships[0]);
+                    }
+                } else {
+                    console.error("Error while deleting relation - the return delete relation from server was not found in UI")
+                }
+                deferred.resolve(relation);
+            };
+            let onFailed = (error:any):void => {
+                console.error("Failed To Delete Link");
+                deferred.reject(error);
+            };
+            this.componentService.deleteRelation(this.uniqueId, relation).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public updateRequirementsCapabilities = ():ng.IPromise<any> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (response:any):void  => {
+                this.capabilities = response.capabilities;
+                this.requirements = response.requirements;
+                deferred.resolve(response);
+            };
+            let onFailed = (error:any):void => {
+                deferred.reject(error);
+            };
+            this.componentService.getRequirementsCapabilities(this.uniqueId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public getModuleForDisplay = (moduleId:string):ng.IPromise<Models.DisplayModule> => {
+
+            let deferred = this.$q.defer();
+            let onSuccess = (response:Models.DisplayModule):void  => {
+                deferred.resolve(response);
+            };
+            let onFailed = (error:any):void => {
+                deferred.reject(error);
+            };
+            this.componentService.getModuleForDisplay(this.uniqueId, moduleId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        // this function get all instances filtered by inputs and properties (optional) - if no search string insert - this function will
+        // get all the instances of the component (in service only VF instances)
+        public getComponentInstancesFilteredByInputsAndProperties = (searchText?:string):ng.IPromise<Array<Models.ComponentsInstances.ComponentInstance>> => {
+
+            let deferred = this.$q.defer();
+            let onSuccess = (response: Array<Models.ComponentsInstances.ComponentInstance>):void => {
+                deferred.resolve(response);
+            };
+            let onFailed = (error:any): void => {
+                deferred.reject(error);
+            };
+            this.componentService.getComponentInstancesFilteredByInputsAndProperties(this.uniqueId, searchText).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+
+        // get inputs for instance - Pagination function
+        public getComponentInputs = ():ng.IPromise<Array<Models.InputModel>> => {
+
+            let deferred = this.$q.defer();
+            let onSuccess = (inputsRes: Array<Models.InputModel>):void => {
+                this.inputs = inputsRes;
+                deferred.resolve(inputsRes);
+            };
+            let onFailed = (error:any): void => {
+                deferred.reject(error);
+            };
+            this.componentService.getComponentInputs(this.uniqueId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+
+        // get inputs instance - Pagination function
+        public getComponentInstanceInputs = (componentInstanceId: string, originComponentUid: string):ng.IPromise<Array<Models.InputModel>> => {
+
+            let deferred = this.$q.defer();
+            let onSuccess = (response: Array<Models.InputModel>):void => {
+                deferred.resolve(response);
+            };
+            let onFailed = (error:any): void => {
+                deferred.reject(error);
+            };
+            this.componentService.getComponentInstanceInputs(this.uniqueId, componentInstanceId, originComponentUid).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        // get inputs inatnce - Pagination function
+        public getComponentInstanceInputProperties = (componentInstanceId: string, inputId: string):ng.IPromise<Array<Models.PropertyModel>> => {
+
+            let deferred = this.$q.defer();
+            let onSuccess = (response: Array<Models.PropertyModel>):void => {
+                deferred.resolve(response);
+            };
+            let onFailed = (error:any): void => {
+                deferred.reject(error);
+            };
+                this.componentService.getComponentInstanceInputProperties(this.uniqueId, componentInstanceId, inputId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public updateGroupMetadata = (module: Models.Module):ng.IPromise<Models.Module> => {
+
+            let deferred = this.$q.defer();
+
+            let onSuccess = (updatedModule:Models.Module):void => {
+                let groupIndex: number = _.indexOf(this.groups, _.find(this.groups, (module: Models.Module) => {
+                    return module.uniqueId === updatedModule.uniqueId;
+                }));
+
+                if(groupIndex !== -1) {
+                    this.groups[groupIndex] = updatedModule;
+                }
+                deferred.resolve(updatedModule);
+            };
+            let onFailed = (error:any):void => {
+                deferred.reject(error);
+            };
+
+            this.componentService.updateGroupMetadata(this.uniqueId, module).then(onSuccess, onFailed);
+
+            return deferred.promise;
+        };
+
+        //------------------------------------------ Help Functions ----------------------------------------------------------------//
+
+        public isProduct = ():boolean => {
+            return this instanceof Product;
+        };
+
+        public isService = ():boolean => {
+            return this instanceof Service;
+        };
+
+        public isResource = ():boolean => {
+            return this instanceof Resource;
+        };
+
+        public getComponentSubType = ():string => {
+            return this.componentType;
+        };
+
+        public isAlreadyCertified = ():boolean => {
+            return parseInt(this.version) >= 1;
+        };
+
+        public isComplex = ():boolean => {
+            return true;
+        };
+
+        //sort string version value from hash to sorted version (i.e 1.9 before 1.11)
+        private sortVersions = (v1:string, v2:string):number => {
+            let ver1 = v1.split('.');
+            let ver2 = v2.split('.');
+            let diff = parseInt(_.first(ver1)) - parseInt(_.first(ver2));
+            if (!diff){
+                return parseInt(_.last(ver1)) - parseInt(_.last(ver2));
+            }
+          return diff;
+        };
+
+        public getAllVersionsAsSortedArray = ():Array<any> => {
+            let res = [];
+            if(this.allVersions){
+                let keys =  Object.keys(this.allVersions).sort(this.sortVersions);
+                _.forEach(keys, (key)=> {
+                    res.push({
+                        versionNumber: key,
+                        versionId: this.allVersions[key]
+                    })
+                });
+            }
+            return res;
+        };
+
+        public isLatestVersion = ():boolean => {
+            if (this.allVersions){
+                return this.version === _.last(Object.keys(this.allVersions).sort(this.sortVersions));
+            }else{
+                return true;
+            }
+
+        };
+
+        public getAdditionalInformation = ():Array<Models.AdditionalInformationModel> => {
+            let additionalInformationObject:any = _.find(this.additionalInformation, (obj:any):boolean => {
+                return obj.parentUniqueId == this.uniqueId;
+            });
+            if (additionalInformationObject) {
+                return additionalInformationObject.parameters;
+            }
+            return [];
+        };
+
+        public handleTags = ():void => {
+            let isContainTag = _.find(this.tags, (tag)=> {
+                return tag === this.name;
+            });
+            if (!isContainTag) {
+                this.tags.push(this.name);
+            }
+        };
+
+        public getArtifactsByType = (artifactGroupType:string):Models.ArtifactGroupModel => {
+            switch (artifactGroupType) {
+                case Utils.Constants.ArtifactGroupType.DEPLOYMENT:
+                    return this.deploymentArtifacts;
+                case Utils.Constants.ArtifactGroupType.INFORMATION:
+                    return this.artifacts;
+            }
+        };
+
+        public getStatus =(sdcMenu:Models.IAppMenu):string =>{
+            let status:string = sdcMenu.LifeCycleStatuses[this.lifecycleState].text;
+            if(this.lifecycleState == "CERTIFIED" && sdcMenu.DistributionStatuses[this.distributionStatus]) {
+              status = sdcMenu.DistributionStatuses[this.distributionStatus].text;
+            }
+            return status;
+        };
+
+        public toJSON = ():any => {
+            this.componentService = undefined;
+            this.filterTerm = undefined;
+            this.iconSprite = undefined;
+            this.mainCategory = undefined;
+            this.subCategory = undefined;
+            this.selectedInstance = undefined;
+            this.showMenu = undefined;
+            this.$q = undefined;
+            this.selectedCategory = undefined;
+            return this;
+        };
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/components/displayComponent.ts b/catalog-ui/app/scripts/models/components/displayComponent.ts
new file mode 100644
index 0000000000..578f392470
--- /dev/null
+++ b/catalog-ui/app/scripts/models/components/displayComponent.ts
@@ -0,0 +1,98 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 7/5/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class DisplayComponent {
+
+        uniqueId:string;
+        displayName:string;
+        version:string;
+        mainCategory:string;
+        subCategory:string;
+        iconClass:string;
+        componentSubType:string;
+        searchFilterTerms:string;
+        certifiedIconClass:string;
+        icon:string;
+        isRequirmentAndCapabilitiesLoaded:boolean;
+
+        constructor(public component:Models.Components.Component) {
+            this.icon = component.icon;
+            this.version = component.version;
+            this.uniqueId = component.uniqueId;
+            this.isRequirmentAndCapabilitiesLoaded = false;
+            
+            if (component.categories && component.categories[0] && component.categories[0].subcategories && component.categories[0].subcategories[0]) {
+                this.mainCategory = component.categories[0].name;
+                this.subCategory = component.categories[0].subcategories[0].name;
+            } else {
+                this.mainCategory = 'Generic';
+                this.subCategory = 'Generic';
+            }
+            if (component instanceof Models.Components.Resource) {
+                this.componentSubType = (<Models.Components.Resource>component).resourceType;
+            } else {
+                this.componentSubType = component.componentType;
+            }
+
+            this.initDisplayName(component.name);
+            this.searchFilterTerms = (this.displayName + ' ' + component.description + ' ' + component.tags.join(' ')).toLowerCase() + ' ' + component.version;
+            this.initIconSprite(component.icon);
+            this.certifiedIconClass = component.lifecycleState != 'CERTIFIED' ? 'non-certified' : '';
+            if(component.icon === 'vl' || component.icon === 'cp') {
+                this.certifiedIconClass = this.certifiedIconClass + " " + 'smaller-icon';
+            }
+        }
+
+        public initDisplayName = (name:string):void => {
+            let newName =
+                _.last(_.last(_.last(_.last(_.last(_.last(_.last(_.last(name.split('tosca.nodes.'))
+                    .split('network.')).split('relationships.')).split('org.openecomp.')).split('resource.nfv.'))
+                    .split('nodes.module.')).split('cp.')).split('vl.'));
+            if (newName){
+                this.displayName =  newName;
+            } else {
+                this.displayName = name;
+            }
+        };
+
+        public initIconSprite = (icon:string ):void => {
+            switch (this.componentSubType) {
+                case Utils.Constants.ComponentType.SERVICE:
+                    this.iconClass = "sprite-services-icons " + icon;
+                    break;
+                case Utils.Constants.ComponentType.PRODUCT:
+                    this.iconClass = "sprite-product-icons " + icon;
+                    break;
+                default:
+                    this.iconClass = "sprite-resource-icons " + icon;
+            }
+        }
+
+        public getComponentSubType = ():string => {
+            return this.componentSubType;
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/models/components/product.ts b/catalog-ui/app/scripts/models/components/product.ts
new file mode 100644
index 0000000000..6ba3404afb
--- /dev/null
+++ b/catalog-ui/app/scripts/models/components/product.ts
@@ -0,0 +1,109 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models.Components {
+    'use strict';
+
+    export class Product extends Component{
+
+        public contacts:Array<string>;
+        public componentService: Services.Components.IProductService;
+        public fullName: string;
+
+        constructor(componentService: Services.Components.IProductService, $q:ng.IQService, component?:Product) {
+            super(componentService, $q, component);
+
+            if(component) {
+                this.fullName = component.fullName;
+                this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
+                this.contacts = component.contacts;
+            }
+            this.componentService = componentService;
+            this.iconSprite = "sprite-product-icons";
+        }
+
+        public deleteGroup = (uniqueId: string): void => {
+            _.forEach(this.categories, (category: Models.IMainCategory) => {
+                _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => {
+                    subcategory.groupings = _.reject (subcategory.groupings, (group:Models.IGroup) => {
+                        return group.uniqueId === uniqueId;
+                    });
+                    if(subcategory.groupings.length == 0){ // if there is no groups, delete the subcategory
+                        category.subcategories = _.reject (category.subcategories, (subcategoryObj:Models.ISubCategory) => {
+                            return subcategoryObj.uniqueId === subcategory.uniqueId;
+                        });
+                        if(category.subcategories.length == 0){ // if there is no subcategory, delete the category
+                            this.categories = _.reject (this.categories , (categoryObj:Models.IMainCategory) => {
+                                return categoryObj.uniqueId === category.uniqueId;
+                            });
+                        }
+                    }
+                });
+            });
+        };
+
+        private getCategoryObjectById = (categoriesArray:Array<Models.ICategoryBase>, categoryUniqueId:string):Models.ICategoryBase => {
+            let categorySelected =  _.find(categoriesArray, (category) => {
+                return category.uniqueId === categoryUniqueId;
+            });
+            return categorySelected;
+        };
+
+        public addGroup = (category: Models.IMainCategory, subcategory: Models.ISubCategory, group: Models.IGroup): void => {
+            if(!this.categories){
+                this.categories = new Array<Models.IMainCategory>();
+            }
+            let existingCategory:Models.IMainCategory = <Models.IMainCategory>this.getCategoryObjectById(this.categories, category.uniqueId);
+            let newGroup = angular.copy(group);
+            newGroup.filterTerms = undefined;
+            newGroup.isDisabled = undefined;
+            if(!existingCategory){
+                let newCategory: Models.IMainCategory = angular.copy(category);
+                newCategory.filteredGroup = undefined;
+                newCategory.subcategories = [];
+                let newSubcategory:Models.ISubCategory = angular.copy(subcategory);
+                newSubcategory.groupings = [];
+                newSubcategory.groupings.push(newGroup);
+                newCategory.subcategories.push(newSubcategory);
+                this.categories.push(newCategory);
+            }
+            else{
+                let existingSubcategory:Models.ISubCategory = <Models.ISubCategory> this.getCategoryObjectById(existingCategory.subcategories, subcategory.uniqueId);
+                if(!existingSubcategory){
+                    let newSubcategory:Models.ISubCategory = angular.copy(subcategory);
+                    newSubcategory.groupings = [];
+                    newSubcategory.groupings.push(newGroup);
+                    existingCategory.subcategories.push(newSubcategory);
+
+                } else {
+                    let existingGroup:Models.IGroup =  <Models.IGroup> this.getCategoryObjectById(existingSubcategory.groupings, group.uniqueId);
+                    if(!existingGroup){
+                        existingSubcategory.groupings.push(newGroup);
+                    }
+                }
+            }
+        };
+
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/components/resource.ts b/catalog-ui/app/scripts/models/components/resource.ts
new file mode 100644
index 0000000000..243ef3463c
--- /dev/null
+++ b/catalog-ui/app/scripts/models/components/resource.ts
@@ -0,0 +1,185 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 2/3/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models.Components {
+    'use strict';
+
+    export class Resource extends Component {
+
+        public interfaces: any;
+        public derivedFrom:Array<string>;
+        public componentService: Services.Components.IResourceService;
+        public resourceType:string;
+        public payloadData:string;
+        public payloadName:string;
+        public importedFile: Sdc.Directives.FileUploadModel;
+
+        // Onboarding parameters
+        public csarUUID:string;
+        public csarVersion:string;
+        public csarPackageType:string;
+        public packageId:string;
+
+        constructor(componentService: Services.Components.IResourceService, $q: ng.IQService, component?:Resource) {
+            super(componentService, $q, component);
+            if(component) {
+
+                this.interfaces = component.interfaces;
+                this.derivedFrom = component.derivedFrom;
+                this.payloadData = component.payloadData ? component.payloadData : undefined;
+                this.payloadName = component.payloadName ? component.payloadName : undefined;
+                this.resourceType = component.resourceType;
+                this.csarUUID = component.csarUUID;
+                this.csarVersion = component.csarVersion;
+                this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version + ' ' + this.resourceType;
+
+                if (component.categories && component.categories[0] && component.categories[0].subcategories && component.categories[0].subcategories[0]) {
+                    component.mainCategory = component.categories[0].name;
+                    component.subCategory = component.categories[0].subcategories[0].name;
+                    this.selectedCategory =  component.mainCategory +  "_#_" + component.subCategory;
+                    this.importedFile = component.importedFile;
+                }
+            } else {
+                this.resourceType = Utils.Constants.ResourceType.VF;
+            }
+
+            this.componentService = componentService;
+            this.iconSprite = "sprite-resource-icons";
+        }
+
+        public getComponentSubType = ():string => {
+            return this.resourceType;
+        };
+
+        public isComplex = ():boolean => {
+            return this.resourceType === Utils.Constants.ResourceType.VF;
+        };
+
+        public isVl = ():boolean => {
+            return Utils.Constants.ResourceType.VL == this.resourceType;
+        };
+
+        public isCsarComponent = ():boolean => {
+          return !!this.csarUUID;
+        };
+
+        public createComponentOnServer = ():ng.IPromise<Models.Components.Component> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (component:Models.Components.Resource):void  => {
+                this.payloadData = undefined;
+                this.payloadName = undefined;
+                deferred.resolve(component);
+            };
+            let onError = (error:any):void => {
+                deferred.reject(error);
+            };
+
+            this.handleTags();
+            if(this.importedFile){
+                this.payloadData = this.importedFile.base64;
+                this.payloadName = this.importedFile.filename;
+            }
+            this.componentService.createComponent(this).then(onSuccess, onError);
+            return deferred.promise;
+        };
+
+        /* we need to change the name of the input to vfInstanceName + input name before sending to server in order to create the inputs on the service
+         *  we also need to remove already selected inputs (the inputs that already create on server, and disabled in the view - but they are selected so they are still in the view model
+         */
+        public createInputsFormInstances = (instanceInputsPropertiesMap:Models.InstanceInputsPropertiesMapData):ng.IPromise<Array<Models.InputModel>> => {
+            let deferred = this.$q.defer();
+            /*
+            let instanceInputsPropertiesMapToCreate: Models.InstanceInputsPropertiesMapData = new Models.InstanceInputsPropertiesMapData();
+            _.forEach(instanceInputsPropertiesMap, (properties:Array<Models.PropertyModel>, instanceId:string) => {
+
+                if(properties && properties.length > 0) {
+                    let componentInstance:Models.ComponentsInstances.ComponentInstance = _.find(this.componentInstances, (instace:Models.ComponentsInstances.ComponentInstance) => {
+                        return instace.uniqueId === instanceId;
+                    });
+
+                    instanceInputsPropertiesMapToCreate[instanceId] = new Array<Models.PropertyModel>();
+                    _.forEach(properties, (property:Models.PropertyModel) => {
+
+                        if(!property.isAlreadySelected) {
+                            let newInput = new Models.PropertyModel(property);
+                            newInput.name = componentInstance.normalizedName + '_' + property.name;
+                            instanceInputsPropertiesMapToCreate[instanceId].push(newInput);
+                        }
+                    });
+                    if( instanceInputsPropertiesMapToCreate[instanceId].length === 0) {
+                        delete instanceInputsPropertiesMapToCreate[instanceId];
+                    }
+                } else {
+                    delete instanceInputsPropertiesMapToCreate[instanceId];
+                }
+            });
+
+            if(Object.keys(instanceInputsPropertiesMapToCreate).length > 0) {
+                let deferred = this.$q.defer();
+                let onSuccess = (propertiesCreated: Array<Models.PropertyModel>):void => {
+                    this.inputs = propertiesCreated.concat(this.inputs);
+                    deferred.resolve(propertiesCreated);
+                };
+                let onFailed = (error:any): void => {
+                    deferred.reject(error);
+                };
+                this.componentService.createInputsFromInstancesInputsProperties(this.uniqueId, new Models.InstanceInputsPropertiesMap(instanceInputsPropertiesMapToCreate)).then(onSuccess, onFailed);
+            }
+             */
+            return deferred.promise;
+        };
+
+        // we need to change the name of the input to vfInstanceName + input name before sending to server in order to create the inputs on the service
+        public getResourceInputInputs = (inputId:string):ng.IPromise<Array<Models.InputModel>> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (inputInputs: Array<Models.InputModel>):void => {
+                let input: Models.InputModel = _.find(this.inputs, (input:Models.InputModel) => {
+                    return input.uniqueId === inputId;
+                });
+                input.inputs = inputInputs;
+                deferred.resolve(inputInputs);
+            };
+            let onFailed = (error:any): void => {
+                deferred.reject(error);
+            };
+            this.componentService.getComponentInputInputs(this.uniqueId, inputId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public toJSON = ():any => {
+            this.componentService = undefined;
+            this.filterTerm = undefined;
+            this.iconSprite = undefined;
+            this.mainCategory = undefined;
+            this.subCategory = undefined;
+            this.selectedInstance = undefined;
+            this.showMenu = undefined;
+            this.$q = undefined;
+            this.selectedCategory = undefined;
+            this.importedFile = undefined;
+            return this;
+        };
+    }
+}
+
+
diff --git a/catalog-ui/app/scripts/models/components/service.ts b/catalog-ui/app/scripts/models/components/service.ts
new file mode 100644
index 0000000000..b1730aae94
--- /dev/null
+++ b/catalog-ui/app/scripts/models/components/service.ts
@@ -0,0 +1,147 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models.Components {
+    'use strict';
+
+
+    export class Service extends Component {
+
+        public serviceApiArtifacts:Models.ArtifactGroupModel;
+        public componentService:Services.Components.IServiceService;
+
+        constructor(componentService:Services.Components.IServiceService, $q:ng.IQService, component?:Service) {
+            super(componentService, $q, component);
+            if (component) {
+                this.serviceApiArtifacts = new Models.ArtifactGroupModel(component.serviceApiArtifacts);
+                this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
+                if (component.categories && component.categories[0]) {
+                    this.mainCategory = component.categories[0].name;
+                    this.selectedCategory = this.mainCategory;
+                }
+            }
+            this.componentService = componentService;
+            this.iconSprite = "sprite-services-icons";
+        }
+
+        public getDistributionsList = ():ng.IPromise<Array<Models.Distribution>> => {
+            return this.componentService.getDistributionsList(this.uuid);
+        };
+
+        public getDistributionsComponent = (distributionId:string):ng.IPromise<Array<Models.DistributionComponent>> => {
+            return this.componentService.getDistributionComponents(distributionId);
+        };
+
+        public markAsDeployed = (distributionId:string):ng.IPromise<any> => {
+            return this.componentService.markAsDeployed(this.uniqueId, distributionId);
+        };
+
+        /* we need to change the name of the input to vfInstanceName + input name before sending to server in order to create the inputs on the service
+        *  we also need to remove already selected inputs (the inputs that already create on server, and disabled in the view - but they are selected so they are still in the view model
+        */
+        public createInputsFormInstances = (instancesInputsMap:Models.InstancesInputsMapData):ng.IPromise<Array<Models.InputModel>> => {
+            let deferred = this.$q.defer();
+
+             let instancesInputsMapToCreate: Models.InstancesInputsMapData = new Models.InstancesInputsMapData();
+            _.forEach(instancesInputsMap, (inputs:Array<Models.InputModel>, instanceId:string) => {
+
+                if(inputs && inputs.length > 0) {
+                    let componentInstance:Models.ComponentsInstances.ComponentInstance = _.find(this.componentInstances, (instace:Models.ComponentsInstances.ComponentInstance) => {
+                       return instace.uniqueId === instanceId;
+                    });
+                    instancesInputsMapToCreate[instanceId] = new Array<Models.InputModel>();
+                    _.forEach(inputs, (input:Models.InputModel) => {
+
+                        if(!input.isAlreadySelected) {
+                            let newInput = new Models.InputModel(input);
+                            newInput.name = componentInstance.normalizedName + '_' + input.name;
+                            instancesInputsMapToCreate[instanceId].push(newInput);
+                        }
+                    });
+                    if( instancesInputsMapToCreate[instanceId].length === 0) {
+                        delete instancesInputsMapToCreate[instanceId];
+                    }
+                } else {
+                    delete instancesInputsMapToCreate[instanceId];
+                }
+            });
+
+            if(Object.keys(instancesInputsMapToCreate).length > 0) {
+                let deferred = this.$q.defer();
+                let onSuccess = (inputsCreated: Array<Models.InputModel>):void => {
+                    this.inputs = inputsCreated.concat(this.inputs);
+                    deferred.resolve(inputsCreated);
+                };
+                let onFailed = (error:any): void => {
+                    deferred.reject(error);
+                };
+               this.componentService.createInputsFromInstancesInputs(this.uniqueId, new Models.InstancesInputsMap(instancesInputsMapToCreate)).then(onSuccess, onFailed);
+            }
+            return deferred.promise;
+        };
+
+        // we need to change the name of the input to vfInstanceName + input name before sending to server in order to create the inputs on the service
+        public getServiceInputInputs = (inputId:string):ng.IPromise<Array<Models.InputModel>> => {
+            let deferred = this.$q.defer();
+            let onSuccess = (inputInputs: Array<Models.InputModel>):void => {
+                let input: Models.InputModel = _.find(this.inputs, (input:Models.InputModel) => {
+                   return input.uniqueId === inputId;
+                });
+                input.inputs = inputInputs;
+                deferred.resolve(inputInputs);
+            };
+            let onFailed = (error:any): void => {
+                deferred.reject(error);
+            };
+           this.componentService.getComponentInputInputs(this.uniqueId, inputId).then(onSuccess, onFailed);
+           return deferred.promise;
+        };
+        
+        public deleteServiceInput = (inputId:string):ng.IPromise<Models.InputModel> => {
+            var deferred = this.$q.defer();
+            
+            var onSuccess = (input: Models.InputModel):void => {
+                deferred.resolve(input)
+            };
+            
+            var onFailed = (error:any) : void => {
+                deferred.reject(error);
+            };
+            
+            this.componentService.deleteComponentInput(this.uniqueId, inputId).then(onSuccess, onFailed);
+            return deferred.promise;
+        };
+
+        public getArtifactsByType = (artifactGroupType:string):Models.ArtifactGroupModel => {
+            switch (artifactGroupType) {
+                case Utils.Constants.ArtifactGroupType.DEPLOYMENT:
+                    return this.deploymentArtifacts;
+                case Utils.Constants.ArtifactGroupType.INFORMATION:
+                    return this.artifacts;
+                case Utils.Constants.ArtifactGroupType.SERVICE_API:
+                    return this.serviceApiArtifacts;
+            }
+        };
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/componentsInstances/componentInstance.ts b/catalog-ui/app/scripts/models/componentsInstances/componentInstance.ts
new file mode 100644
index 0000000000..af2f338998
--- /dev/null
+++ b/catalog-ui/app/scripts/models/componentsInstances/componentInstance.ts
@@ -0,0 +1,126 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models.ComponentsInstances {
+    'use strict';
+
+    export class ComponentInstance{
+
+        public componentUid: string;
+        public componentName:string;
+        public posX: number;
+        public posY: number;
+        public componentVersion:string;
+        public description: string;
+        public icon: string;
+        public name: string;
+        public normalizedName:string;
+        public originType: string;
+        public deploymentArtifacts: Models.ArtifactGroupModel;
+        public propertyValueCounter: number;
+        public uniqueId: string;
+        public creationTime: number;
+        public modificationTime: number;
+        public capabilities: Models.CapabilitiesGroup;
+        public requirements: Models.RequirementsGroup;
+
+        //custom properties
+        public certified: boolean;
+        public iconSprite:string;
+        public inputs: Array<Models.InputModel>;
+        public properties: Array<Models.PropertyModel>;
+
+        constructor(componentInstance?: ComponentInstance) {
+
+            if(componentInstance) {
+                this.componentUid = componentInstance.componentUid;
+                this.componentName = componentInstance.componentName;
+
+                this.componentVersion = componentInstance.componentVersion;
+                this.description = componentInstance.description;
+                this.icon = componentInstance.icon;
+                this.name = componentInstance.name;
+                this.normalizedName = componentInstance.normalizedName;
+                this.originType = componentInstance.originType;
+                this.deploymentArtifacts = new Models.ArtifactGroupModel(componentInstance.deploymentArtifacts);
+                this.uniqueId = componentInstance.uniqueId;
+                this.creationTime = componentInstance.creationTime;
+                this.modificationTime = componentInstance.modificationTime;
+                this.propertyValueCounter = componentInstance.propertyValueCounter;
+                this.capabilities = new Models.CapabilitiesGroup(componentInstance.capabilities);
+                this.requirements = new Models.RequirementsGroup(componentInstance.requirements);
+                this.certified = componentInstance.certified;
+                this.updatePosition(componentInstance.posX, componentInstance.posY);
+            }
+        }
+
+        public isUcpe = ():boolean =>{
+            if(this.originType === 'VF' && this.capabilities && this.capabilities['tosca.capabilities.Container'] && this.name.toLowerCase().indexOf('ucpe') > -1){
+                return true;
+            }
+            return false;
+        };
+
+        public isVl = ():boolean =>{
+            return this.originType === 'VL';
+        };
+
+
+        public setInstanceRC = ():void=>{
+            _.forEach(this.requirements, (requirementValue:Array<any>, requirementKey)=> {
+                _.forEach(requirementValue, (requirement)=> {
+                    if (!requirement.ownerName){
+                        requirement['ownerId'] = this.uniqueId;
+                        requirement['ownerName'] = this.name;
+                    }
+                });
+            });
+            _.forEach(this.capabilities, (capabilityValue:Array<any>, capabilityKey)=> {
+                _.forEach(capabilityValue, (capability)=> {
+                    if (!capability.ownerName){
+                        capability['ownerId'] = this.uniqueId;
+                        capability['ownerName'] = this.name;
+                    }
+                });
+            });
+        };
+
+        public updatePosition (posX:number, posY:number) {
+            this.posX = posX;
+            this.posY = posY;
+        }
+
+        public toJSON = ():any => {
+
+            var serverInstance = angular.copy(this);
+            serverInstance.certified = undefined;
+            serverInstance.iconSprite = undefined;
+            serverInstance.inputs = undefined;
+            serverInstance.properties = undefined;
+            serverInstance.requirements = undefined;
+            serverInstance.capabilities = undefined;
+            return serverInstance;
+        };
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/componentsInstances/productInstance.ts b/catalog-ui/app/scripts/models/componentsInstances/productInstance.ts
new file mode 100644
index 0000000000..71ef9bb7d3
--- /dev/null
+++ b/catalog-ui/app/scripts/models/componentsInstances/productInstance.ts
@@ -0,0 +1,34 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models.ComponentsInstances {
+    'use strict';
+
+    export class ProductInstance extends ComponentInstance{
+
+        constructor(componentInstance?: ProductInstance) {
+            super(componentInstance);
+            this.iconSprite = "sprite-product-icons";
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/componentsInstances/resourceInstance.ts b/catalog-ui/app/scripts/models/componentsInstances/resourceInstance.ts
new file mode 100644
index 0000000000..67df05ded9
--- /dev/null
+++ b/catalog-ui/app/scripts/models/componentsInstances/resourceInstance.ts
@@ -0,0 +1,36 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models.ComponentsInstances {
+    'use strict';
+
+    export class ResourceInstance extends ComponentInstance{
+
+        constructor(componentInstance?: ResourceInstance) {
+            super(componentInstance);
+
+            this.iconSprite = "sprite-resource-icons";
+        }
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/componentsInstances/serviceInstance.ts b/catalog-ui/app/scripts/models/componentsInstances/serviceInstance.ts
new file mode 100644
index 0000000000..0d78feafd3
--- /dev/null
+++ b/catalog-ui/app/scripts/models/componentsInstances/serviceInstance.ts
@@ -0,0 +1,35 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models.ComponentsInstances {
+    'use strict';
+
+    export class ServiceInstance extends ComponentInstance{
+
+        constructor(componentInstance?: ServiceInstance) {
+            super(componentInstance);
+            this.iconSprite = "sprite-services-icons";
+        }
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/csar-component.ts b/catalog-ui/app/scripts/models/csar-component.ts
new file mode 100644
index 0000000000..da649c1efd
--- /dev/null
+++ b/catalog-ui/app/scripts/models/csar-component.ts
@@ -0,0 +1,36 @@
+/*-
+ * ============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=========================================================
+ */
+module Sdc.Models {
+    'use strict';
+
+    export interface ICsarComponent {
+        displayName:string;
+        description:string;
+        vspName:string;
+        version:string;
+        packageId:string;
+        category:string;
+        subCategory:string
+        vendorName:string;
+        packageType:string;
+        vendorRelease:string;
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/data-type-properties.ts b/catalog-ui/app/scripts/models/data-type-properties.ts
new file mode 100644
index 0000000000..973978d9b2
--- /dev/null
+++ b/catalog-ui/app/scripts/models/data-type-properties.ts
@@ -0,0 +1,65 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by rcohen on 9/25/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class DataTypePropertyModel {
+
+        //server data
+        uniqueId:string;
+        type:string;
+        required:boolean;
+        definition:boolean;
+        description:string;
+        password:boolean;
+        name:string;
+        parentUniqueId:string;
+        defaultValue:string;
+        constraints:Array<any>;
+        //custom
+        simpleType:string;
+
+        constructor(dataTypeProperty:DataTypePropertyModel) {
+            if (dataTypeProperty) {
+                this.uniqueId = dataTypeProperty.uniqueId;
+                this.type = dataTypeProperty.type;
+                this.required = dataTypeProperty.required;
+                this.definition = dataTypeProperty.definition;
+                this.description = dataTypeProperty.description;
+                this.password = dataTypeProperty.password;
+                this.name = dataTypeProperty.name;
+                this.parentUniqueId = dataTypeProperty.parentUniqueId;
+                this.defaultValue = dataTypeProperty.defaultValue;
+                this.constraints = dataTypeProperty.constraints;
+                this.simpleType = dataTypeProperty.simpleType;
+            }
+        }
+
+        public toJSON = ():any => {
+            this.simpleType = undefined;
+            return this;
+        };
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/data-types-map.ts b/catalog-ui/app/scripts/models/data-types-map.ts
new file mode 100644
index 0000000000..d1bee48e41
--- /dev/null
+++ b/catalog-ui/app/scripts/models/data-types-map.ts
@@ -0,0 +1,39 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by rcohen on 9/25/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class DataTypesMapData {
+        [dataTypeId:string]: Array<DataTypeModel>;
+    }
+
+    export class DataTypesMap {
+        dataTypesMap:DataTypesMapData;
+
+        constructor(dataTypesMap:DataTypesMapData) {
+            this.dataTypesMap = dataTypesMap;
+        }
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/data-types.ts b/catalog-ui/app/scripts/models/data-types.ts
new file mode 100644
index 0000000000..d7de238f3b
--- /dev/null
+++ b/catalog-ui/app/scripts/models/data-types.ts
@@ -0,0 +1,55 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by rcohen on 9/25/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class DataTypeModel {
+
+        //server data
+        name:string;
+        uniqueId:string;
+        derivedFromName:string;
+        creationTime:string;
+        modificationTime:string;
+        properties:Array<Models.DataTypePropertyModel>;
+
+        constructor(dataType:DataTypeModel) {
+            if (dataType) {
+                this.uniqueId = dataType.uniqueId;
+                this.name = dataType.name;
+                this.derivedFromName = dataType.derivedFromName;
+                this.creationTime = dataType.creationTime;
+                this.modificationTime = dataType.modificationTime;
+                this.properties = dataType.properties;
+            }
+        }
+
+        public toJSON = ():any => {
+
+            return this;
+        };
+    }
+
+}
+
diff --git a/catalog-ui/app/scripts/models/distribution.ts b/catalog-ui/app/scripts/models/distribution.ts
new file mode 100644
index 0000000000..1c3a9568dd
--- /dev/null
+++ b/catalog-ui/app/scripts/models/distribution.ts
@@ -0,0 +1,66 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class DistributionStatuses{
+        public omfComponentID: string;
+        public url:  string;
+        public timestamp:string;
+        public status:  string;
+
+        constructor() {
+        }
+    }
+
+
+    export class DistributionComponent{
+        public omfComponentID: string;
+        public url:  string;
+        public timestamp:string;
+        public status:  string;
+
+        constructor() {
+        }
+    }
+
+    export class Distribution {
+        public distributionID:string;
+        public timestamp:string;
+        public userId:string;
+        public deployementStatus:string;
+        public distributionComponents:Array<Models.DistributionComponent>;
+        public statusCount:any;
+        //custom data
+        public  dateFormat:string;
+
+        constructor() {
+        }
+        public toJSON = ():any => {
+            this.dateFormat = undefined;
+            return this;
+        };
+
+    }
+
+}
+
+
diff --git a/catalog-ui/app/scripts/models/file-download.ts b/catalog-ui/app/scripts/models/file-download.ts
new file mode 100644
index 0000000000..8a74ed57c1
--- /dev/null
+++ b/catalog-ui/app/scripts/models/file-download.ts
@@ -0,0 +1,28 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+  'use strict';
+
+  export interface IFileDownload{
+      artifactName: string;
+      base64Contents:string;
+  }
+}
diff --git a/catalog-ui/app/scripts/models/graph/d2-node.ts b/catalog-ui/app/scripts/models/graph/d2-node.ts
new file mode 100644
index 0000000000..16daa5470d
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/d2-node.ts
@@ -0,0 +1,31 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+
+// module Sdc.Models {
+//
+//     export interface D2Node extends go.Node {
+//         //TODO:should be typesafe!
+//         resource: any;
+//         key:string;
+//         data:any;
+//         canvasPosition: {x:number;y:number};
+//     }
+// }
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/common-base-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/common-base-link.ts
new file mode 100644
index 0000000000..7d21c5d978
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/common-base-link.ts
@@ -0,0 +1,53 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+/// <reference path="../../../references"/>
+module Sdc.Models {
+
+    export class CommonLinkBase {
+
+        img:string;
+        color:string;
+        classes: string;
+
+        //this is cytoscapejs fields
+        public source: string;
+        public target: string;
+        public type: string;
+        public isSdcElement: boolean;
+
+        constructor() {
+            this.isSdcElement = true;
+            this.type = 'sdc-link';
+
+        }
+
+        public setImage = (imgUrl: string) => {
+            this.img = imgUrl;
+        };
+
+        public setColor = (color: string) => {
+            this.color = color;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/common-ci-link-base.ts b/catalog-ui/app/scripts/models/graph/graph-links/common-ci-link-base.ts
new file mode 100644
index 0000000000..1e7416ac3e
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/common-ci-link-base.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+/// <reference path="../../../references"/>
+module Sdc.Models {
+
+    export interface ICommonCiLinkBase {
+
+    }
+
+    export class CommonCiLinkBase extends CommonLinkBase implements ICommonCiLinkBase {
+
+        relation:RelationshipModel;
+
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super();
+            if (relation) {
+                if(singleRelationship){
+                    this.relation = new Models.RelationshipModel(relation, singleRelationship);
+                }else{
+                    this.relation = new Models.RelationshipModel(relation);
+                }
+                this.source = relation.fromNode;
+                this.target = relation.toNode;
+            } else {
+                this.relation = new RelationshipModel();
+            }
+         }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts
new file mode 100644
index 0000000000..3587198615
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts
@@ -0,0 +1,46 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export interface ICompositionCiLinkBase extends ICommonCiLinkBase{
+        updateLinkDirection():void;
+    }
+
+    export class CompositionCiLinkBase extends CommonCiLinkBase implements ICompositionCiLinkBase {
+
+        type:string;
+        visible:boolean;
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.visible = true;
+        }
+
+        public setRelation = (relation: Models.RelationshipModel) => {
+            this.relation = relation;
+        };
+
+        updateLinkDirection():void{
+            this.source = this.relation.fromNode;
+            this.target = this.relation.toNode;
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts
new file mode 100644
index 0000000000..c2deddbfc3
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts
@@ -0,0 +1,31 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export class CompositionCiSimpleLink extends CompositionCiLinkBase {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.color = Utils.Constants.GraphColors.BASE_LINK;
+            this.classes = 'simple-link';
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts
new file mode 100644
index 0000000000..7a30c20eee
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 4/20/2016.
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+    export class LinkUcpeHost extends CompositionCiLinkBase {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.visible = false;
+            this.classes = "ucpe-host-link";
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts
new file mode 100644
index 0000000000..5d035ccc2c
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts
@@ -0,0 +1,37 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export class CompositionCiUcpeLink extends CompositionCiLinkBase {
+
+        isFromUcpe: boolean;
+        constructor(relation?:RelationshipModel, from?:boolean, singleRelation?:Relationship) {
+            super(relation, singleRelation);
+            this.isFromUcpe = from;
+            this.target = relation.toNode;
+            this.source = singleRelation.requirementOwnerId;
+            this.relation.relationships = [singleRelation];
+            this.color = Utils.Constants.GraphColors.BASE_LINK;
+        }
+
+        updateLinkDirection():void {}
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts
new file mode 100644
index 0000000000..a347db6cb5
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts
@@ -0,0 +1,34 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export class CompositionCiVLink extends CompositionCiLinkBase {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.color = Utils.Constants.GraphColors.VL_LINK;
+            this.classes ='vl-link';
+        }
+
+
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts
new file mode 100644
index 0000000000..2ebc796cb9
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 4/20/2016.
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export class CompositionCiVlUcpeLink extends CompositionCiUcpeLink {
+
+        constructor(relation?:RelationshipModel, from?:boolean, singleRelation?:Relationship) {
+            super(relation, from, singleRelation);
+            this.color = Utils.Constants.GraphColors.VL_LINK;
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/links-factory.ts b/catalog-ui/app/scripts/models/graph/graph-links/links-factory.ts
new file mode 100644
index 0000000000..8f6cd6d321
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/links-factory.ts
@@ -0,0 +1,80 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 5/1/2016.
+ */
+/// <reference path="../../../references"/>
+module Sdc.Utils {
+    'use strict';
+
+    export class LinksFactory {
+
+        constructor() {
+        }
+
+        public createGraphLink = (cy: Cy.Instance, relation:Models.RelationshipModel,  singleRelation:Models.Relationship):Models.CompositionCiLinkBase => {
+
+            let newRelation:Models.CompositionCiLinkBase;
+
+            let fromNode:Models.Graph.CompositionCiNodeBase = cy.getElementById(relation.fromNode).data();
+            let toNode:Models.Graph.CompositionCiNodeBase = cy.getElementById(relation.toNode).data() ;
+
+            if ((relation.fromNode && fromNode.isUcpePart) || (relation.toNode && toNode.isUcpePart )) { //Link from or to node inside ucpe
+
+                if (singleRelation && singleRelation.relationship.type && singleRelation.relationship.type == 'tosca.relationships.HostedOn') {
+                    newRelation = new Models.LinkUcpeHost(relation, singleRelation);
+                } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+                    newRelation = new Models.CompositionCiVlUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+                } else {
+                    newRelation = new Models.CompositionCiUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+                }
+            } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+                newRelation = new Models.CompositionCiVLink(relation, singleRelation);
+            } else {
+                newRelation = new Models.CompositionCiSimpleLink(relation, singleRelation);
+            }
+
+            return newRelation;
+        };
+
+        public createUcpeHostLink = (relation:Models.RelationshipModel):Models.LinkUcpeHost => {
+            return new Models.LinkUcpeHost(relation);
+        };
+
+        public createVLLink = (relation:Models.RelationshipModel):Models.CompositionCiVLink => {
+            return new Models.CompositionCiVLink(relation);
+        }
+
+
+        public createModuleGraphLinks= (relation:Models.RelationshipModel,  singleRelation:Models.Relationship):Models.ModuleCiLinkBase => {
+
+            let newRelation:Models.ModuleCiLinkBase;
+
+             if (_.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+                newRelation = new Models.ModuleCiVlLink(relation, singleRelation);
+            } else {
+                newRelation = new Models.ModuleCiLinkBase(relation, singleRelation);
+            }
+
+            return newRelation;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-link-base.ts b/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-link-base.ts
new file mode 100644
index 0000000000..b85e7673f5
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-link-base.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export interface IModuleCiLinkBase extends ICommonCiLinkBase{
+
+    }
+
+    export class ModuleCiLinkBase extends CommonCiLinkBase implements IModuleCiLinkBase {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.color = Utils.Constants.GraphColors.BASE_LINK;
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts
new file mode 100644
index 0000000000..a421610792
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts
@@ -0,0 +1,37 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export interface IModuleCiVlLink extends ICommonCiLinkBase{
+
+    }
+
+    export class ModuleCiVlLink extends CommonCiLinkBase implements IModuleCiVlLink {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.color = Utils.Constants.GraphColors.VL_LINK;
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graphTooltip.ts b/catalog-ui/app/scripts/models/graph/graphTooltip.ts
new file mode 100644
index 0000000000..08a85e1126
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graphTooltip.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+  'use strict';
+
+  export class GraphTooltip{
+      position: Cy.Position;
+      isShow:boolean;
+      text:string;
+
+      constructor();
+      constructor(position: Cy.Position, isShow:boolean, text: string);
+      constructor(position?: Cy.Position, isShow?:boolean, text?: string) {
+          this.position = position;
+          this.isShow = isShow;
+          this.text = text;
+    }
+  }
+}
+
diff --git a/catalog-ui/app/scripts/models/graph/link-menu.ts b/catalog-ui/app/scripts/models/graph/link-menu.ts
new file mode 100644
index 0000000000..606c392982
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/link-menu.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class LinkMenu {
+        position:Sdc.Models.Graph.Point;
+        isShow:boolean;
+        link:Cy.CollectionFirstEdge;
+
+        constructor();
+        constructor(point:Sdc.Models.Graph.Point, isShow:boolean,  link:Cy.CollectionFirstEdge);
+        constructor(point?:Sdc.Models.Graph.Point, isShow?:boolean,  link?:Cy.CollectionFirstEdge) {
+            this.position = point ? point: new Sdc.Models.Graph.Point();
+            this.isShow = isShow ? isShow : false;
+            this.link = link ? link : null;
+        }
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/graph/match-relation.ts b/catalog-ui/app/scripts/models/graph/match-relation.ts
new file mode 100644
index 0000000000..8d864c675b
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/match-relation.ts
@@ -0,0 +1,109 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class MatchBase {
+        requirement:Models.Requirement;
+        isFromTo:boolean;
+        fromNode:string;
+        toNode:string;
+
+        constructor(requirement:Models.Requirement, isFromTo:boolean, fromNode:string, toNode:string) {
+            this.requirement = requirement;
+            this.isFromTo = isFromTo;
+            this.fromNode = fromNode;
+            this.toNode = toNode;
+        }
+
+        public getDisplayText = (menuSide:string):string => {return '';};
+
+        public isOwner = (id:string):boolean => { return false; }
+
+    }
+
+    export class MatchReqToReq extends MatchBase {
+
+        secondRequirement:Models.Requirement;
+
+        constructor(requirement:Models.Requirement, secondRequirement:Models.Requirement, isFromTo:boolean, fromNode:string, toNode:string) {
+            super(requirement, isFromTo, fromNode, toNode);
+            this.secondRequirement = secondRequirement;
+        }
+
+        public getDisplayText = (menuSide:string):string => {
+            if ('left' == menuSide) {
+                return this.requirement.getFullTitle();
+            }
+            return this.secondRequirement.getFullTitle();
+        };
+
+        public isOwner = (id:string):boolean => {
+            return this.secondRequirement.ownerId === id || this.requirement.ownerId === id;
+        }
+    }
+
+    export class MatchReqToCapability extends MatchBase {
+
+        capability:Models.Capability;
+
+        constructor(requirement:Models.Requirement, capability:Models.Capability, isFromTo:boolean, fromNode:string, toNode:string) {
+            super(requirement, isFromTo, fromNode, toNode);
+            this.capability = capability;
+        }
+
+        public matchToRelation = ():Models.Relationship => {
+            let relationship:Models.Relationship = new Models.Relationship();
+            relationship.capability = this.capability.name;
+            relationship.capabilityOwnerId = this.capability.ownerId;
+            relationship.capabilityUid = this.capability.uniqueId;
+            relationship.relationship = new Models.RelationType(this.capability.type);
+            relationship.requirement = this.requirement.name;
+            relationship.requirementOwnerId = this.requirement.ownerId;
+            relationship.requirementUid = this.requirement.uniqueId;
+            return relationship;
+        };
+
+
+        public getDisplayText = (menuSide:string):string => {
+            if (this.isFromTo && 'left' == menuSide || !this.isFromTo && 'right' == menuSide) {
+                return this.requirement.getFullTitle();
+            }
+            return this.capability.getFullTitle();
+
+        };
+
+        public isOwner = (id:string):boolean => {
+            return this.capability.ownerId === id || this.requirement.ownerId === id;
+        };
+
+
+        public matchToRelationModel = ():Models.RelationshipModel => {
+            let relationshipModel:Models.RelationshipModel = new Models.RelationshipModel();
+            let relationship:Models.Relationship = this.matchToRelation();
+            relationshipModel.setRelationshipModelParams(this.fromNode, this.toNode, [relationship]);
+            return relationshipModel;
+        };
+    }
+
+}
+
+
diff --git a/catalog-ui/app/scripts/models/graph/nodes/base-common-node.ts b/catalog-ui/app/scripts/models/graph/nodes/base-common-node.ts
new file mode 100644
index 0000000000..e1957e61aa
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/base-common-node.ts
@@ -0,0 +1,73 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+/// <reference path="../../../references"/>
+
+module Sdc.Models.Graph {
+    'use strict';
+
+    export abstract class CommonNodeBase {
+
+        public displayName:string;
+        public name:string;
+        public img:string;
+        public certified:boolean;
+        public isGroup:boolean;
+        public imagesPath: string;
+        public isDraggable: boolean; //we need to to manage manually the dragging on the graph inside groups (ucpe-cp is not draggable)
+
+        //cytoscape fields
+        public id:string;
+        public type:string; //type is for the edge edition extension, by type we put the green plus icon in position
+        public isSdcElement:boolean; //this fields is in order to filter sdc elements from all extensions elements
+        public classes: string;
+        public parent: string;
+        public allowConnection: boolean; //this is for egeEdition extension in order to decide if connection to a node is available
+
+        constructor() {
+
+            this.imagesPath = Services.AngularJSBridge.getAngularConfig().imagesPath;
+            this.type = "basic-node";
+            this.isSdcElement = true;
+            this.isDraggable = true;
+            this.allowConnection = true;
+        }
+
+        public updateNameForDisplay =() => {
+            let context = document.createElement("canvas").getContext("2d");
+            context.font = "13px Arial";
+
+            if (63 < context.measureText(this.name).width) {
+                let newLen = this.name.length - 3;
+                let newName = this.name.substring(0, newLen);
+
+                while (60 < (context.measureText(newName).width)) {
+                    newName = newName.substring(0, (--newLen));
+                }
+                this.displayName =  newName + '...';
+                return;
+            }
+
+            this.displayName = this.name;
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/common-ci-node-base.ts b/catalog-ui/app/scripts/models/graph/nodes/common-ci-node-base.ts
new file mode 100644
index 0000000000..1597650654
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/common-ci-node-base.ts
@@ -0,0 +1,46 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Models.Graph {
+
+    export abstract class CommonCINodeBase extends CommonNodeBase {
+
+        public certified:boolean;
+        public template:string;
+        public componentInstance:Models.ComponentsInstances.ComponentInstance;
+        public group:string;
+
+        constructor(instance:Models.ComponentsInstances.ComponentInstance) {
+            super();
+            this.componentInstance = instance;
+            this.id = this.componentInstance.uniqueId;
+            this.name = this.componentInstance.name;
+            this.img = '';
+            this.certified = this.isCertified(this.componentInstance.componentVersion);
+            this.displayName = instance.name;
+        }
+
+        private isCertified(version:string):boolean {
+            return 0 === (parseFloat(version)) % 1;
+        }
+
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
new file mode 100644
index 0000000000..5f4c0df3c2
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
@@ -0,0 +1,72 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export interface ICompositionCiNodeBase {
+
+    }
+
+
+    export abstract class CompositionCiNodeBase extends CommonCINodeBase implements ICompositionCiNodeBase {
+
+        public textPosition: string; //need to move to cp UCPE
+        public isUcpe: boolean;
+        public isInsideGroup: boolean;
+        public isUcpePart: boolean;
+
+        constructor(instance: Models.ComponentsInstances.ComponentInstance,
+                    public imageCreator: Utils.ImageCreatorService) {
+            super(instance);
+            this.init();
+        }
+
+        private init() {
+
+            this.displayName = this.getDisplayName();
+            this.isUcpe = false;
+            this.isGroup = false;
+            this.isUcpePart = false;
+            this.isInsideGroup = false;
+
+        }
+
+        public initImage(node: Cy.Collection): string {
+
+            this.imageCreator.getImageBase64(this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png',
+                this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + 'uncertified.png')
+                .then(imageBase64 => {
+                    this.img = imageBase64;
+                    node.style({'background-image': this.img});
+                });
+
+            return this.img;
+        }
+
+        protected getDisplayName(): string {
+
+            let graphResourceName = Services.AngularJSBridge.getFilter('graphResourceName');
+            let resourceName = Services.AngularJSBridge.getFilter('resourceName');
+            return graphResourceName(resourceName(this.componentInstance.name));
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
new file mode 100644
index 0000000000..6286c8245d
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class CompositionCiNodeCp extends CompositionCiNodeBase {
+
+        constructor(instance:Models.ComponentsInstances.ComponentInstance,
+                    imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initCp();
+        }
+
+        private initCp():void {
+            let sdcConfig = Services.AngularJSBridge.getAngularConfig();
+            this.img = sdcConfig.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png';
+            this.type = "basic-small-node";
+            //if the cp from type cpEndPointInstances create with another template
+            if(sdcConfig.cpEndPointInstances.indexOf(this.componentInstance.icon) > -1){
+                this.classes = 'cp-end-point-node';
+            }else {
+                this.classes = 'cp-node';
+            }
+            if(!this.certified) {
+                this.classes = this.classes + ' not-certified';
+            }
+
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
new file mode 100644
index 0000000000..41bf0cef98
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
@@ -0,0 +1,42 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class CompositionCiNodeService extends CompositionCiNodeBase {
+
+        constructor(instance:Models.ComponentsInstances.ComponentInstance,
+                    imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initService();
+        }
+
+        private initService():void {
+
+            this.img = this.imagesPath + Utils.Constants.ImagesUrl.SERVICE_ICONS + this.componentInstance.icon + '.png';
+            this.classes = 'service-node'
+            if(!this.certified) {
+                this.classes = this.classes + ' not-certified';
+            }
+
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
new file mode 100644
index 0000000000..9123ff7224
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
@@ -0,0 +1,39 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+    
+    export class CompositionCiNodeUcpeCp extends CompositionCiNodeCp {
+
+        constructor(instance:Models.ComponentsInstances.ComponentInstance,
+                    imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.isUcpePart = true;
+            this.classes = 'ucpe-cp'; // the css class for the node
+            this.parent = instance.uniqueId;
+            this.type = 'ucpe-cp-node'; //the type is for the handle (plus icon) extension
+            this.isDraggable = false;
+        }
+
+
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
new file mode 100644
index 0000000000..bc91e004f4
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class NodeUcpe extends CompositionCiNodeBase {
+        constructor(instance:Models.ComponentsInstances.ComponentInstance,
+                    imageCreator:Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initUcpe();
+        }
+
+        private initUcpe():void {
+            this.isUcpe = true;
+            this.isGroup = true;
+            this.isUcpePart = true;
+            this.classes = 'ucpe-node';
+            this.type = 'ucpe-node';
+            this.allowConnection = false;
+
+            if (!this.certified) {
+                this.classes = this.classes + ' not-certified-ucpe';
+            }
+        }
+
+    }
+}
+
+
+
+
+
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
new file mode 100644
index 0000000000..d090960046
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class CompositionCiNodeVf extends CompositionCiNodeBase {
+
+        constructor(instance: Models.ComponentsInstances.ComponentInstance,
+                    imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initVf();
+        }
+
+        private initVf(): void {
+            this.img = this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png';
+            this.classes = 'vf-node';
+            if(!this.certified) {
+                this.classes = this.classes + ' not-certified';
+            }
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
new file mode 100644
index 0000000000..04f45c87fb
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+    export class CompositionCiNodeVfc extends CompositionCiNodeBase {
+        constructor(instance:Models.ComponentsInstances.ComponentInstance, imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initVfc();
+        }
+
+        private initVfc():void {
+            this.img = this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS+ this.componentInstance.icon + '.png';
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
new file mode 100644
index 0000000000..ed9a0d9d87
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
@@ -0,0 +1,54 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class CompositionCiNodeVl extends CompositionCiNodeBase {
+        private toolTipText:string;
+      
+        constructor(instance:Models.ComponentsInstances.ComponentInstance, imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initVl();
+
+        }
+
+        private initVl():void {
+            this.type = "basic-small-node";
+            this.toolTipText = 'Point to point';
+            let key:string = _.find(Object.keys(this.componentInstance.capabilities), (key)=> {
+                return _.includes(key.toLowerCase(), 'linkable');
+            });
+            let linkable = this.componentInstance.capabilities[key];
+            if (linkable) {
+                if ('UNBOUNDED' == linkable[0].maxOccurrences) {
+                    this.toolTipText = 'Multi point';
+                }
+            }
+            this.img = this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + 'vl.png';
+
+            this.classes = 'vl-node';
+            if(!this.certified) {
+                this.classes = this.classes + ' not-certified';
+            }
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/modules-graph-nodes/module-node-base.ts b/catalog-ui/app/scripts/models/graph/nodes/modules-graph-nodes/module-node-base.ts
new file mode 100644
index 0000000000..cd6ab3ba85
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/modules-graph-nodes/module-node-base.ts
@@ -0,0 +1,52 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+    'use strict';
+
+    export interface IModuleNodeBase {
+    }
+
+    export class ModuleNodeBase extends CommonNodeBase implements IModuleNodeBase {
+
+        module:Module;
+
+        constructor(module:Module) {
+            super();
+            this.module = module;
+            this.init();
+        }
+
+        private init() {
+            
+            this.id = this.module.uniqueId;
+            this.name = this.module.name;
+            this.displayName = this.module.name;
+            this.isGroup = true;
+            this.img = Utils.Constants.IMAGE_PATH + Utils.Constants.ImagesUrl.MODULE_ICON;
+            this.classes = "module-node";
+
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/nodes-factory.ts b/catalog-ui/app/scripts/models/graph/nodes/nodes-factory.ts
new file mode 100644
index 0000000000..b19b1a7261
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/nodes-factory.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Utils {
+    'use strict';
+
+    export class NodesFactory {
+
+        constructor(
+            private imageCreator:ImageCreatorService) {
+        }
+
+        public createNode = (instance:Models.ComponentsInstances.ComponentInstance):Models.Graph.CompositionCiNodeBase => {
+
+            if (instance.isUcpe()) {
+                return new Models.Graph.NodeUcpe(instance, this.imageCreator);
+            }
+            if (instance.originType === Utils.Constants.ComponentType.SERVICE) {
+                return new Models.Graph.CompositionCiNodeService(instance, this.imageCreator);
+            }
+            if (instance.originType === Utils.Constants.ResourceType.CP) {
+                return new Models.Graph.CompositionCiNodeCp(instance, this.imageCreator);
+            }
+            if (instance.originType === Utils.Constants.ResourceType.VL) {
+                return new Models.Graph.CompositionCiNodeVl(instance, this.imageCreator);
+            }
+
+            return new Models.Graph.CompositionCiNodeVf(instance, this.imageCreator);
+        };
+
+        public createModuleNode = (module:Models.Module):Models.Graph.ModuleNodeBase => {
+
+            return new Models.Graph.ModuleNodeBase(module);
+        };
+
+        public createUcpeCpNode = (instance:Models.ComponentsInstances.ComponentInstance):Models.Graph.CompositionCiNodeCp => {
+
+
+            return new Models.Graph.CompositionCiNodeUcpeCp(instance, this.imageCreator);
+        }
+    }
+
+    NodesFactory.$inject = [
+        'ImageCreatorService'
+    ];
+}
diff --git a/catalog-ui/app/scripts/models/graph/point.ts b/catalog-ui/app/scripts/models/graph/point.ts
new file mode 100644
index 0000000000..0efd4c6040
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/point.ts
@@ -0,0 +1,26 @@
+/**
+ * Created by obarda on 11/7/2016.
+ */
+/// <reference path="../../references"/>
+
+module Sdc.Models.Graph {
+
+
+    export class Point {
+        /**
+         * The two-argument constructor produces the Point(x, y).
+         * @param {number} x
+         * @param {number} y
+         */
+        constructor(x?:number, y?:number) {
+            this.x = x || 0;
+            this.y = y || 0;
+        }
+
+        /**Gets or sets the x value of the Point.*/
+        x:number;
+
+        /**Gets or sets the y value of the Point.*/
+        y:number;
+    }
+}
+\ No newline at end of file
diff --git a/catalog-ui/app/scripts/models/graph/relationMenuObjects.ts b/catalog-ui/app/scripts/models/graph/relationMenuObjects.ts
new file mode 100644
index 0000000000..266ed76cfa
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/relationMenuObjects.ts
@@ -0,0 +1,138 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+
+    export class RelationMenuDirectiveObj {
+
+        fromNode:Models.Graph.CompositionCiNodeBase;
+        toNode:Models.Graph.CompositionCiNodeBase;
+        //  modelLinks:Array<Models.CompositionCiLinkBase>;
+        mp2mpVL:Models.Components.Component;
+        p2pVL:Models.Components.Component;
+        menuPosition: Cy.Position;
+        rightSideLink:GraphLinkMenuSide;
+        leftSideLink:GraphLinkMenuSide;
+        selectionText:string;
+        vlType:string;
+
+        constructor(fromNode:Models.Graph.CompositionCiNodeBase, toNode:Models.Graph.CompositionCiNodeBase, mp2mpVL:Models.Components.Component, p2pVL:Models.Components.Component, menuPosition:Cy.Position, possibleRelations:Array<Models.MatchBase>) {
+            this.fromNode = fromNode;
+            this.toNode = toNode;
+            // this.modelLinks = modelLinks;
+            this.mp2mpVL = mp2mpVL;
+            this.p2pVL = p2pVL;
+            this.menuPosition = menuPosition;
+            this.leftSideLink = new GraphLinkMenuSide(this.fromNode.componentInstance);
+            this.rightSideLink = new GraphLinkMenuSide(this.toNode.componentInstance);
+            this.selectionText = '';
+            this.vlType = null;
+
+            possibleRelations.forEach((match:any) => {
+
+                let reqObjKey: string = match.requirement.ownerName + match.requirement.uniqueId;
+                let capObjKey: string = match.secondRequirement ? match.secondRequirement.ownerName + match.secondRequirement.uniqueId
+                    : match.capability.ownerName + match.capability.uniqueId;
+
+                if (match.fromNode === this.leftSideLink.componentInstance.uniqueId) {
+                    //init the left side requirements Array
+                    if (!this.leftSideLink.requirements[reqObjKey]) {
+                        this.leftSideLink.requirements[reqObjKey] = [];
+                    }
+                    //push the match to fromNode object (from node is always the requirement)
+                    this.leftSideLink.requirements[reqObjKey].push(match);
+
+                    if (match instanceof  Models.MatchReqToReq) {
+                        //init the right side requirements Array
+                        if (!this.rightSideLink.requirements[capObjKey]) {
+                            this.rightSideLink.requirements[capObjKey] = [];
+                        }
+                        this.rightSideLink.requirements[capObjKey].push(match);
+                    } else {
+                        //init the right side capabilities Array
+                        if (!this.rightSideLink.capabilities[capObjKey]) {
+                            this.rightSideLink.capabilities[capObjKey] = [];
+                        }
+                        //add to array
+                        this.rightSideLink.capabilities[capObjKey].push(match);
+                    }
+
+                } else {
+                    if (!this.rightSideLink.requirements[reqObjKey]) {
+                        this.rightSideLink.requirements[reqObjKey] = [];
+                    }
+                    this.rightSideLink.requirements[reqObjKey].push(match);
+
+                    if (!this.leftSideLink.capabilities[capObjKey]) {
+                        this.leftSideLink.capabilities[capObjKey] = [];
+                    }
+                    this.leftSideLink.capabilities[capObjKey].push(match);
+                }
+            });
+
+        }
+    }
+
+
+    export class GraphLinkMenuSide {
+        public componentInstance:Models.ComponentsInstances.ComponentInstance;
+        public selectedMatch:Array<any>;        //match array returned by function in utils
+        public requirements:any;  //array of matches returned by function in utils
+        public capabilities:any;  //array of matches returned by function in utils
+
+        constructor(componentInstance:Models.ComponentsInstances.ComponentInstance) {
+            this.componentInstance = componentInstance;
+            this.capabilities = {};
+            this.requirements = {};
+        }
+
+        public selectMatchArr(matchArr:Array<Models.MatchBase>):void {
+            if (this.selectedMatch === matchArr) {
+                this.selectedMatch = undefined;
+            } else {
+                this.selectedMatch = matchArr;
+            }
+        }
+
+
+        //TODO move to match object
+        public getPreviewText(showReq:boolean):string {
+            if (!this.selectedMatch) {
+                return '';
+            }
+
+            let match:any = this.selectedMatch[0];
+            if (showReq) {
+                return match.requirement.ownerName + ': ' + match.requirement.name +
+                    ': [' + match.requirement.minOccurrences + ', ' + match.requirement.maxOccurrences + ']';
+            } else if (match.secondRequirement) {
+                return match.secondRequirement.ownerName + ': ' + match.secondRequirement.name +
+                    ': [' + match.secondRequirement.minOccurrences + ', ' + match.secondRequirement.maxOccurrences + ']';
+            }
+            else {
+                return match.capability.ownerName + ': ' + match.capability.name +
+                    ': [' + match.capability.minOccurrences + ', ' + match.capability.maxOccurrences + ']';
+            }
+        }
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/graph/relationship.ts b/catalog-ui/app/scripts/models/graph/relationship.ts
new file mode 100644
index 0000000000..e0dfbbd6d1
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/relationship.ts
@@ -0,0 +1,107 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class RelationshipModel {
+        fromNode:string;
+        toNode:string;
+        relationships:Array<Relationship>;
+
+        constructor(relationshipModel?:RelationshipModel, singleRelationship?:Relationship) {
+            if(relationshipModel){
+                this.fromNode = relationshipModel.fromNode;
+                this.toNode =  relationshipModel.toNode;
+                this.relationships = [];
+                if (relationshipModel.relationships && !singleRelationship) {
+                    _.forEach(relationshipModel.relationships, (relation:Models.Relationship):void => {
+                        this.relationships.push(new Models.Relationship(relation));
+                    });
+                }else if(singleRelationship){
+                    this.relationships.push(singleRelationship);
+                }
+            }
+        }
+
+        public setRelationshipModelParams (fromNode: string, toNode:string,  relationships:Array<Relationship>) {
+            this.fromNode = fromNode;
+            this.toNode = toNode;
+            this.relationships = relationships;
+        }
+    }
+
+    export class RelationType {
+        type:string;
+
+        constructor(type?:string) {
+            if(type){
+                this.type = type;
+            }
+        }
+    }
+
+    export class Relationship {
+        capability:string;
+        capabilityOwnerId:string;
+        capabilityUid:string;
+        relationship:RelationType;
+        requirement:string;
+        requirementOwnerId:string;
+        requirementUid:string;
+
+        constructor(relationship?:Models.Relationship) {
+            if(relationship) {
+                this.capability = relationship.capability;
+                this.capabilityOwnerId = relationship.capabilityOwnerId;
+                this.capabilityUid = relationship.capabilityUid;
+                this.relationship = new RelationType(relationship.relationship.type);
+                this.requirement = relationship.requirement;
+                this.requirementOwnerId = relationship.requirementOwnerId;
+                this.requirementUid = relationship.requirementUid;
+            } else {
+               this.relationship = new RelationType();
+            }
+
+        }
+
+        //public setRelationProperties = (capability:string, capabilityOwnerId:string, capabilityUid:string, relationship:RelationType, requirement:string, requirementOwnerId:string, requirementUid:string )=>{
+        //    this.capability = capability;
+        //    this.capabilityOwnerId = capabilityOwnerId;
+        //    this.capabilityUid = capabilityUid;
+        //    this.relationship = relationship;
+        //    this.requirement =requirement;
+        //    this.requirementOwnerId = requirementOwnerId;
+        //    this.requirementUid = requirementUid;
+        //}
+
+
+        public setRelationProperties = (capability:Models.Capability, requirement:Models.Requirement)=>{
+            this.capability = capability.name;
+            this.capabilityOwnerId = capability.ownerId;
+            this.capabilityUid = capability.uniqueId;
+            this.relationship = new Models.RelationType(capability.type);
+            this.requirement = requirement.name;
+            this.requirementOwnerId = requirement.ownerId;
+            this.requirementUid = requirement.uniqueId;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/inputs.ts b/catalog-ui/app/scripts/models/inputs.ts
new file mode 100644
index 0000000000..68e26e246e
--- /dev/null
+++ b/catalog-ui/app/scripts/models/inputs.ts
@@ -0,0 +1,74 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 8/24/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class InputModel {
+
+        //server data
+        uniqueId:string;
+        name:string;
+        type:string;
+        password:boolean;
+        required:boolean;
+        definition:boolean;
+        parentUniqueId:string;
+        description:string;
+        componentInstanceName:string;
+        componentInstanceId:string;
+
+        //costom properties
+        isNew: boolean;
+        properties:Array<Models.PropertyModel>;
+        inputs:Array<Models.InputModel>;
+        isAlreadySelected: boolean;
+        filterTerm: string;
+
+        constructor(input:InputModel) {
+            if (input) {
+                this.uniqueId = input.uniqueId;
+                this.name = input.name;
+                this.type = input.type;
+                this.description = input.description;
+                this.password = input.password;
+                this.required = input.required;
+                this.definition = input.definition;
+                this.parentUniqueId = input.parentUniqueId;
+                this.description = input.description;
+                this.componentInstanceName = input.componentInstanceName;
+                this.componentInstanceId = input.componentInstanceId;
+                this.filterTerm = this.name + ' ' + this.description + ' ' + this.type + ' ' + this.componentInstanceName;
+            }
+        }
+
+        public toJSON = ():any => {
+            this.isNew = undefined;
+            this.properties = undefined;
+            this.inputs = undefined;
+            this.isAlreadySelected = undefined;
+            this.filterTerm = undefined;
+            return this;
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/models/instance-inputs-properties-map.ts b/catalog-ui/app/scripts/models/instance-inputs-properties-map.ts
new file mode 100644
index 0000000000..2c67dfd718
--- /dev/null
+++ b/catalog-ui/app/scripts/models/instance-inputs-properties-map.ts
@@ -0,0 +1,39 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 9/12/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class InstanceInputsPropertiesMapData {
+        [instanceId:string]: Array<PropertyModel>;
+    }
+
+    export class InstanceInputsPropertiesMap {
+        componentInstanceInputsProperties:InstanceInputsPropertiesMapData;
+
+        constructor(componentInstanceInputsPropertiesMapData:InstanceInputsPropertiesMapData) {
+            this.componentInstanceInputsProperties = componentInstanceInputsPropertiesMapData;
+        }
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/instances-inputs-map.ts b/catalog-ui/app/scripts/models/instances-inputs-map.ts
new file mode 100644
index 0000000000..1643a125ae
--- /dev/null
+++ b/catalog-ui/app/scripts/models/instances-inputs-map.ts
@@ -0,0 +1,39 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 9/12/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class InstancesInputsMapData {
+        [instanceId:string]: Array<InputModel>;
+    }
+
+    export class InstancesInputsMap {
+        componentInstanceInputsMap:InstancesInputsMapData;
+
+        constructor(componentInstanceInputsMapData:InstancesInputsMapData) {
+            this.componentInstanceInputsMap = componentInstanceInputsMapData;
+        }
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/left-panel.ts b/catalog-ui/app/scripts/models/left-panel.ts
new file mode 100644
index 0000000000..a47170c7c2
--- /dev/null
+++ b/catalog-ui/app/scripts/models/left-panel.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+   export  class LeftPanelModel {
+        numberOfElements:number;
+        sortedCategories:any;
+
+        constructor() {
+            this.numberOfElements = 0;
+            this.sortedCategories = {};
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/member.ts b/catalog-ui/app/scripts/models/member.ts
new file mode 100644
index 0000000000..21dc907333
--- /dev/null
+++ b/catalog-ui/app/scripts/models/member.ts
@@ -0,0 +1,39 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 8/2/2016.
+ */
+
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class Members {
+
+        [index: string]: string;
+
+        constructor(members?:Members) {
+            _.forEach(members, (memberId:string, index) => {
+                this[index] = memberId;
+            });
+        }
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/modules/base-module.ts b/catalog-ui/app/scripts/models/modules/base-module.ts
new file mode 100644
index 0000000000..2df52cc907
--- /dev/null
+++ b/catalog-ui/app/scripts/models/modules/base-module.ts
@@ -0,0 +1,108 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+/**
+ * Created by obarda on 2/4/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class Module {
+
+        public name:string;
+        public groupUUID:string;
+        public invariantUUID:string;
+        public propertyValueCounter:number;
+        public type:string;
+        public typeUid:string;
+        public uniqueId:string;
+        public version: string;
+        public artifacts: Array<string> | Array<Models.ArtifactModel>;
+        public artifactsUuid: Array<string>;
+        public properties: Array<Models.PropertyModel>;
+        public members: Array<string>;
+
+
+        constructor(module?: Module) {
+            if(module) {
+                this.name = module.name;
+                this.groupUUID = module.groupUUID;
+                this.invariantUUID = module.invariantUUID;
+                this.propertyValueCounter = module.propertyValueCounter;
+                this.type = module.type;
+                this.typeUid = module.typeUid;
+                this.uniqueId = module.uniqueId;
+                this.version = module.version;
+                this.artifacts = module.artifacts;
+                this.artifactsUuid = module.artifactsUuid;
+                this.properties = Utils.CommonUtils.initProperties(module.properties);
+                this.members = module.members;
+
+                this.name = this.name.replace(/:/g, '..');
+
+            }
+        }
+    }
+
+    export class DisplayModule extends Module {
+
+        isBase: string;
+        artifacts:Array<Models.ArtifactModel>;
+
+        //custom properties
+        public vfInstanceName: string;
+        public heatName: string;
+        public moduleName: string;
+
+        constructor(displayModule?:Models.DisplayModule) {
+            super(displayModule);
+
+            this.isBase = displayModule.isBase;
+            this.initArtifactsForDisplay(displayModule.artifacts);
+
+            //splitting module name for display and edit
+            let splitName:Array<string> = this.name.split('..');
+            this.vfInstanceName = splitName[0];
+            this.heatName = splitName[1];
+            this.moduleName = splitName[2];
+        }
+
+        private initArtifactsForDisplay = (artifacts:Array<Models.ArtifactModel>):void => {
+            this.artifacts = new Array<Models.ArtifactModel>();
+            _.forEach(artifacts, (artifact:Models.ArtifactModel) => {
+                this.artifacts.push(new Models.ArtifactModel(artifact));
+            });
+        };
+
+        public updateName = ():void => {
+            this.name = this.vfInstanceName + '..' + this.heatName + '..' + this.moduleName;
+        };
+
+        public toJSON = ():any => {
+            this.vfInstanceName = undefined;
+            this.heatName = undefined;
+            this.moduleName = undefined;
+            this.isBase = undefined;
+            this.artifacts = undefined;
+            return this;
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/models/properties.ts b/catalog-ui/app/scripts/models/properties.ts
new file mode 100644
index 0000000000..679ca03b44
--- /dev/null
+++ b/catalog-ui/app/scripts/models/properties.ts
@@ -0,0 +1,176 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class PropertiesGroup {
+        constructor(propertiesObj?:Models.PropertiesGroup){
+            _.forEach(propertiesObj, (properties:Array<Models.PropertyModel>, instance) => {
+                this[instance] = [];
+                _.forEach(properties, (property:Models.PropertyModel):void => {
+                    property.resourceInstanceUniqueId = instance;
+                    property.readonly = true;
+                    this[instance].push(new Models.PropertyModel(property));
+                });
+            });
+        }
+    }
+
+    export interface IPropertyModel {
+
+        //server data
+        uniqueId: string;
+        name: string;
+        constraints: Array<Object>;
+        defaultValue: string;
+        description: string;
+        password: boolean;
+        required: boolean;
+        type: string;
+        source: string;
+        parentUniqueId: string;
+        schema: Models.SchemaPropertyGroupModel;
+
+        //instance properties
+        value:string;
+        valueUniqueUid:string;
+        path:Array<string>;
+        rules:Array<Object>;
+
+        //custom properties
+        resourceInstanceUniqueId: string;
+        readonly: boolean;
+        simpleType: string;
+    }
+
+    export class PropertyModel implements IPropertyModel{
+
+        //server data
+        uniqueId:string;
+        name:string;
+        constraints:Array<Object>;
+        defaultValue:string;
+        description:string;
+        password:boolean;
+        required:boolean;
+        type:string;
+        source:string;
+        parentUniqueId:string;
+        schema: Models.SchemaPropertyGroupModel;
+
+        //instance properties
+        value:string;
+        valueUniqueUid:string;
+        path:Array<string>;
+        rules:Array<Object>;
+
+        //custom properties
+        resourceInstanceUniqueId:string;
+        readonly:boolean;
+        simpleType: string;
+        filterTerm: string;
+        isAlreadySelected: boolean;
+
+        constructor(property?:Models.PropertyModel) {
+            if (property) {
+                this.uniqueId = property.uniqueId;
+                this.name = property.name;
+                this.constraints = property.constraints;
+                this.defaultValue = property.defaultValue;
+                this.description = property.description;
+                this.password = property.password;
+                this.required = property.required;
+                this.type = property.type;
+                this.source = property.source;
+                this.parentUniqueId = property.parentUniqueId;
+                this.schema = property.schema;
+                this.value = property.value?property.value:property.defaultValue;
+                this.valueUniqueUid = property.valueUniqueUid;
+                this.path = property.path;
+                this.rules = property.rules;
+                this.resourceInstanceUniqueId = property.resourceInstanceUniqueId;
+                this.readonly = property.readonly;
+                this.simpleType = property.simpleType;
+
+
+            }
+
+            if(!this.schema || !this.schema.property) {
+                this.schema = new Models.SchemaPropertyGroupModel(new Models.SchemaProperty());
+            } else {
+                //forcing creating new object, so editing different one than the object in the table
+                this.schema = new Models.SchemaPropertyGroupModel(new Models.SchemaProperty(this.schema.property));
+            }
+            if(property) {
+                this.filterTerm = this.name + " " + (this.description||"") +" " + this.type;
+                if(this.schema.property && this.schema.property.type) {
+                    this.filterTerm += " " +this.schema.property.type;
+                }
+            }
+        }
+
+        public convertToServerObject:Function = ():string => {
+            let serverObject = {};
+            let mapData = {
+                "type": this.type,
+                "required": this.required || false,
+                "defaultValue": this.defaultValue != "" && this.defaultValue != "[]" && this.defaultValue != "{}" ? this.defaultValue :null,
+                "description": this.description,
+                "constraints": this.constraints,
+                "isPassword": this.password || false,
+                "schema": this.schema,
+                "name": this.name
+            };
+            serverObject[this.name] = mapData;
+
+            return JSON.stringify(serverObject);
+        };
+
+
+        // public convertValueToView () {
+        //     //unwrapping value {} or [] if type is complex
+        //     if (this.defaultValue && (this.type === 'map' || this.type === 'list') &&
+        //         ['[','{'].indexOf(this.defaultValue.charAt(0)) > -1 &&
+        //         [']','}'].indexOf(this.defaultValue.slice(-1)) > -1) {
+        //         this.defaultValue = this.defaultValue.slice(1, -1);
+        //     }
+        //
+        //     //also for value - for the modal in canvas
+        //     if (this.value && (this.type === 'map' || this.type === 'list') &&
+        //         ['[','{'].indexOf(this.value.charAt(0)) > -1 &&
+        //         [']','}'].indexOf(this.value.slice(-1)) > -1) {
+        //         this.value = this.value.slice(1, -1);
+        //     }
+        // }
+
+        public toJSON = ():any => {
+            if(!this.resourceInstanceUniqueId){
+                this.value = undefined;
+            }
+            this.readonly = undefined;
+            this.resourceInstanceUniqueId = undefined;
+            this.simpleType = undefined;
+            this.value = this.value === "{}" || this.value === "[]" ? undefined: this.value;
+            this.defaultValue = this.defaultValue === "{}" || this.defaultValue === "[]" ? undefined: this.defaultValue;
+            return this;
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/models/requirement.ts b/catalog-ui/app/scripts/models/requirement.ts
new file mode 100644
index 0000000000..091bfc139e
--- /dev/null
+++ b/catalog-ui/app/scripts/models/requirement.ts
@@ -0,0 +1,91 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+ /*
+ * Created by obarda on 4/20/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+    //this is an object contains keys, when each key has matching array.
+    // for example: key = tosca.capabilities.network. and the match array is array of requirements objects
+    export class RequirementsGroup{
+        constructor(requirementGroupObj?:Models.RequirementsGroup){
+            _.forEach(requirementGroupObj, (requirementsArrayObj:Array<Models.Requirement>, instance) => {
+                this[instance] = [];
+                _.forEach(requirementsArrayObj, (requirement:Models.Requirement):void => {
+                    this[instance].push(new Models.Requirement(requirement));
+                });
+            });
+        }
+    }
+
+    export class Requirement {
+
+        //server data
+        capability:string;
+        name: string;
+        ownerId: string;
+        ownerName:string;
+        node:string;
+        uniqueId:string;
+        relationship: string;
+        minOccurrences: string;
+        maxOccurrences: string;
+        //custom
+        filterTerm:string;
+        constructor(requirement?:Requirement) {
+
+            if(requirement) {
+                this.capability = requirement.capability;
+                this.name = requirement.name;
+                this.ownerId = requirement.ownerId;
+                this.ownerName = requirement.ownerName;
+                this.node = requirement.node;
+                this.uniqueId = requirement.uniqueId;
+                this.relationship = requirement.relationship;
+                this.minOccurrences = requirement.minOccurrences;
+                this.maxOccurrences = requirement.maxOccurrences;
+                this.initFilterTerm();
+
+            }
+        }
+
+        public getFullTitle():string {
+            return this.ownerName + ': ' + this.name +
+                ': [' + this.minOccurrences + ', ' + this.maxOccurrences + ']';
+        }
+
+        public toJSON = ():any => {
+            this.filterTerm = undefined;
+            return this;
+        };
+
+        private initFilterTerm = ():void =>{
+            this.filterTerm = (this.name + " ") +
+                (this.ownerName + " " ) +
+                (this.capability ? (this.capability.substring("tosca.capabilities.".length) + " " ) : "") +
+                (this.node? (this.node.substring("tosca.nodes.".length) +" ") : "") +
+                (this.relationship? (this.relationship.substring("tosca.relationships.".length) +" ") : "") +
+                this.minOccurrences+","+this.maxOccurrences;
+        }
+    }
+}
+
+
diff --git a/catalog-ui/app/scripts/models/schema-attribute.ts b/catalog-ui/app/scripts/models/schema-attribute.ts
new file mode 100644
index 0000000000..725a7589e0
--- /dev/null
+++ b/catalog-ui/app/scripts/models/schema-attribute.ts
@@ -0,0 +1,37 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class SchemaAttributeGroupModel{
+        property: SchemaAttribute;
+
+        constructor(schemaAttribute?:Models.SchemaAttribute) {
+            this.property = schemaAttribute;
+        }
+    }
+
+    export class SchemaAttribute extends SchemaProperty{
+
+    }
+}
+
+
diff --git a/catalog-ui/app/scripts/models/tab.ts b/catalog-ui/app/scripts/models/tab.ts
new file mode 100644
index 0000000000..cc42d4f348
--- /dev/null
+++ b/catalog-ui/app/scripts/models/tab.ts
@@ -0,0 +1,47 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 7/31/2016.
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class Tab {
+
+        public templateUrl:string;
+        public controller:string;
+        public data:any;
+        public icon:string;
+        public name:string;
+
+        constructor(templateUrl:string, controller:string, name:string,  data?:any, icon?:string) {
+
+            this.templateUrl = templateUrl;
+            this.controller = controller;
+            this.icon = icon;
+            this.data = data;
+            this.name = name;
+        }
+    }
+}
+
+
+
diff --git a/catalog-ui/app/scripts/models/tooltip-data.ts b/catalog-ui/app/scripts/models/tooltip-data.ts
new file mode 100644
index 0000000000..027904b245
--- /dev/null
+++ b/catalog-ui/app/scripts/models/tooltip-data.ts
@@ -0,0 +1,28 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class TooltipData{
+    }
+}
+
+
diff --git a/catalog-ui/app/scripts/models/user.ts b/catalog-ui/app/scripts/models/user.ts
new file mode 100644
index 0000000000..836066f5f9
--- /dev/null
+++ b/catalog-ui/app/scripts/models/user.ts
@@ -0,0 +1,117 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export enum UserRole {
+        ADMIN,
+        DESIGNER,
+        TESTER,
+        GOVERNOR,
+        OPS,
+        PRODUCT_MANAGER,
+        PRODUCT_STRATEGIST
+    }
+
+    export interface IUserManager {
+        isInEditMode: boolean;
+        filterTerm: string;
+    }
+
+    export interface IUserProperties extends IUserManager{
+        firstName: string;
+        lastName: string;
+        userId: string;
+        email: string;
+        role: string;
+        tempRole:string;
+        lastLoginTime: string;
+        status:string;
+    }
+
+    export interface IUser {
+        resource: Services.IUserResource;
+        getRole(): UserRole;
+        getRoleToView(): string;
+        getName(): string;
+        getFirstName(): string;
+        getLastName(): string;
+    }
+
+    export class User implements IUser {
+
+        constructor(public resource:Services.IUserResource) {
+        }
+
+        public getLastName = () => {
+            return this.resource.lastName;
+        }
+
+        public getFirstName = () => {
+            return this.resource.firstName;
+        }
+
+        public getName = () => {
+            return this.resource.firstName + ' ' + this.resource.lastName;
+        }
+
+        public getLastLogin = () => {
+            if (!this.resource.lastLoginTime || this.resource.lastLoginTime === "0") {
+                return "";
+            } else {
+                return this.resource.lastLoginTime;
+            }
+        }
+
+        public getRole = ():UserRole => {
+            let role:UserRole;
+            switch (UserRole[this.resource.role.toUpperCase()]) {
+                case UserRole.ADMIN:
+                    role = UserRole.ADMIN;
+                    break;
+                case UserRole.DESIGNER:
+                    role = UserRole.DESIGNER;
+                    break;
+                case UserRole.TESTER:
+                    role = UserRole.TESTER;
+                    break;
+                case UserRole.GOVERNOR:
+                    role = UserRole.GOVERNOR;
+                    break;
+                case UserRole.OPS:
+                    role = UserRole.OPS;
+                    break;
+                case UserRole.PRODUCT_MANAGER:
+                    role = UserRole.PRODUCT_MANAGER;
+                    break;
+                case UserRole.PRODUCT_STRATEGIST:
+                    role = UserRole.PRODUCT_STRATEGIST;
+                    break;
+            }
+            return role;
+        }
+
+        public getRoleToView = ():string => {
+            let role:string = this.resource.role.toLowerCase().replace('governor','governance_Rep');
+            return role.charAt(0).toUpperCase() + role.slice(1).replace('_',' ');
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/validate.ts b/catalog-ui/app/scripts/models/validate.ts
new file mode 100644
index 0000000000..21540d38b6
--- /dev/null
+++ b/catalog-ui/app/scripts/models/validate.ts
@@ -0,0 +1,29 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../references"/>
+module Sdc.Models {
+  'use strict';
+
+  export interface IValidate{
+    isValid : boolean;
+  }
+}
+
+
author	Michael Lando <ml636r@att.com>	2017-02-19 10:28:42 +0200
committer	Michael Lando <ml636r@att.com>	2017-02-19 10:51:01 +0200
commit	451a3400b76511393c62a444f588a4ed15f4a549 (patch)
tree	e4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/app/scripts/models
parent	5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff)