[SDC-29] catalog 1707 rebase commit.

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

81 files changed, 5268 insertions, 0 deletions

diff --git a/catalog-ui/src/app/models/activity.ts b/catalog-ui/src/app/models/activity.ts
new file mode 100644
index 0000000000..d60e69258c
--- /dev/null
+++ b/catalog-ui/src/app/models/activity.ts
@@ -0,0 +1,27 @@
+/**
+ * Created by obarda on 19/11/2015.
+ */
+'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/src/app/models/additional-information.ts b/catalog-ui/src/app/models/additional-information.ts
new file mode 100644
index 0000000000..0fc850a227
--- /dev/null
+++ b/catalog-ui/src/app/models/additional-information.ts
@@ -0,0 +1,20 @@
+'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/src/app/models/app-config.ts b/catalog-ui/src/app/models/app-config.ts
new file mode 100644
index 0000000000..a80dd40da8
--- /dev/null
+++ b/catalog-ui/src/app/models/app-config.ts
@@ -0,0 +1,226 @@
+'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;
+    //*********//
+
+    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;
+    hostedApplications:Array<IHostedApplication>;
+    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;
+    showOutlook:boolean;
+    validationConfigPath:string;
+}
+
+export interface IResourceTypesFilter {
+    resource:Array<string>;
+}
+
+export interface IHostedApplication {
+    moduleName:string;
+    navTitle:string;
+    defaultState:string;
+    exists?:boolean;
+    state:IHostedApplicationState;
+}
+
+export interface IHostedApplicationState {
+    name:string;
+    url:string;
+    relativeHtmlPath:string;
+    controllerName: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/src/app/models/artifacts.ts b/catalog-ui/src/app/models/artifacts.ts
new file mode 100644
index 0000000000..63e4b594f1
--- /dev/null
+++ b/catalog-ui/src/app/models/artifacts.ts
@@ -0,0 +1,101 @@
+'use strict';
+
+import {ArtifactType} from './../utils';
+import {HeatParameterModel} from "./heat-parameters";
+
+//this object contains keys, each key contain ArtifactModel
+export class ArtifactGroupModel {
+    
+    constructor(artifacts?:ArtifactGroupModel) {
+        _.forEach(artifacts, (artifact:ArtifactModel, key) => {
+            this[key] = new ArtifactModel(artifact);
+        });
+    }
+
+    public filteredByType(type:string):ArtifactGroupModel {
+        let tmpArtifactGroupModel = new ArtifactGroupModel();
+        _.each(Object.keys(this), (key)=>{
+            if (this[key].artifactType === type) {
+                tmpArtifactGroupModel[key] = this[key];
+            }
+        });
+        return tmpArtifactGroupModel;
+    };
+}
+
+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<HeatParameterModel>;
+    generatedFromId:string;
+
+    //custom properties
+    selected:boolean;
+    originalDescription:string;
+    envArtifact:ArtifactModel;
+
+    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 ArtifactType.HEAT === this.artifactType || ArtifactType.HEAT_VOL === this.artifactType || ArtifactType.HEAT_NET === this.artifactType;
+    };
+
+    public isThirdParty = ():boolean => {
+        return _.has(ArtifactType.THIRD_PARTY_RESERVED_TYPES, this.artifactType);
+    };
+
+    public toJSON = ():any => {
+        this.selected = undefined;
+        this.originalDescription = undefined;
+        this.envArtifact = undefined;
+        return this;
+    };
+}
+
+
diff --git a/catalog-ui/src/app/models/aschema-property.ts b/catalog-ui/src/app/models/aschema-property.ts
new file mode 100644
index 0000000000..a430a8cc0e
--- /dev/null
+++ b/catalog-ui/src/app/models/aschema-property.ts
@@ -0,0 +1,56 @@
+/**
+ * Created by osonsino on 16/05/2016.
+ */
+'use strict';
+import { PROPERTY_DATA } from "app/utils";
+
+export class SchemaPropertyGroupModel {
+    property:SchemaProperty;
+
+    constructor(schemaProperty?:SchemaProperty) {
+        this.property = schemaProperty;
+    }
+}
+
+export class SchemaProperty {
+
+    type:string;
+    required:boolean;
+    definition:boolean;
+    description:string;
+    password:boolean;
+    //custom properties
+    simpleType:string;
+    isSimpleType: boolean;
+    isDataType: boolean;
+    private _derivedFromSimpleTypeName:string;
+    get derivedFromSimpleTypeName():string {
+        return this._derivedFromSimpleTypeName;
+    }
+    set derivedFromSimpleTypeName(derivedFromSimpleTypeName:string) {
+        this._derivedFromSimpleTypeName = derivedFromSimpleTypeName;
+    }
+
+    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;
+            this.isSimpleType = (-1 < PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type));
+            this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) == -1;
+        }
+    }
+
+    public toJSON = ():any => {
+        this.simpleType = undefined;
+        this.isSimpleType = undefined;
+        this.isDataType = undefined;
+        this._derivedFromSimpleTypeName = undefined;
+        return this;
+    };
+}
+
+
diff --git a/catalog-ui/src/app/models/attributes.ts b/catalog-ui/src/app/models/attributes.ts
new file mode 100644
index 0000000000..f2562e98bf
--- /dev/null
+++ b/catalog-ui/src/app/models/attributes.ts
@@ -0,0 +1,119 @@
+'use strict';
+import {SchemaAttributeGroupModel, SchemaAttribute} from "./schema-attribute";
+import {SchemaPropertyGroupModel, SchemaProperty} from "./aschema-property";
+
+export class AttributesGroup {
+    constructor(attributesObj?:AttributesGroup) {
+        _.forEach(attributesObj, (attributes:Array<AttributeModel>, instance) => {
+            this[instance] = [];
+            _.forEach(attributes, (attribute:AttributeModel):void => {
+                attribute.resourceInstanceUniqueId = instance;
+                attribute.readonly = true;
+                this[instance].push(new AttributeModel(attribute));
+            });
+        });
+    }
+}
+
+export interface IAttributeModel {
+
+    //server data
+    uniqueId:string;
+    name:string;
+    defaultValue:string;
+    description:string;
+    type:string;
+    schema: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:SchemaAttributeGroupModel;
+    status:string;
+    value:string;
+    hidden:boolean;
+    parentUniqueId:string;
+    //custom data
+    resourceInstanceUniqueId:string;
+    readonly:boolean;
+    valueUniqueUid:string;
+
+    constructor(attribute?: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 SchemaPropertyGroupModel(new SchemaProperty());
+        } else {
+            //forcing creating new object, so editing different one than the object in the table
+            this.schema = new SchemaAttributeGroupModel(new 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/src/app/models/button.ts b/catalog-ui/src/app/models/button.ts
new file mode 100644
index 0000000000..8fbaf9091c
--- /dev/null
+++ b/catalog-ui/src/app/models/button.ts
@@ -0,0 +1,20 @@
+/**
+ * Created by rc2122 on 5/10/2017.
+ */
+export class ButtonModel {
+    text: string;
+    cssClass: string;
+    callback: Function;
+    getDisabled:Function;
+    constructor(text?:string, cssClass?:string, callback?:Function, getDisabled?:Function){
+        this.text = text;
+        this.cssClass = cssClass;
+        this.callback = callback;
+        this.getDisabled = getDisabled;
+
+    }
+}
+
+export class ButtonsModelMap {
+    [buttonName: string]: ButtonModel;
+}
diff --git a/catalog-ui/src/app/models/capability.ts b/catalog-ui/src/app/models/capability.ts
new file mode 100644
index 0000000000..94995bca55
--- /dev/null
+++ b/catalog-ui/src/app/models/capability.ts
@@ -0,0 +1,95 @@
+/**
+ * Created by obarda on 4/20/2016.
+ */
+'use strict';
+import {PropertyModel} from "./properties";
+
+//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?:CapabilitiesGroup) {
+        _.forEach(capabilityGroupObj, (capabilitiesArrayObj:Array<Capability>, instance) => {
+            this[instance] = [];
+            _.forEach(capabilitiesArrayObj, (capability:Capability):void => {
+                this[instance].push(new Capability(capability));
+            });
+        });
+    }
+
+    public findValueByKey(keySubstring:string):Array<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<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.replace("tosca.capabilities.", "") + " " ) : "") +
+            (this.description || "") + " " +
+            (this.ownerName || "") + " " +
+            (this.validSourceTypes ? (this.validSourceTypes.join(',') + " ") : "") +
+            this.minOccurrences + "," + this.maxOccurrences;
+        if (this.properties && this.properties.length) {
+            _.forEach(this.properties, (prop:PropertyModel)=> {
+                this.filterTerm += " " + prop.name +
+                    " " + (prop.description || "") +
+                    " " + prop.type +
+                    (prop.schema && prop.schema.property ? (" " + prop.schema.property.type) : "");
+            });
+        }
+    }
+}
+
+
diff --git a/catalog-ui/src/app/models/categories.ts b/catalog-ui/src/app/models/categories.ts
new file mode 100644
index 0000000000..2aad61194f
--- /dev/null
+++ b/catalog-ui/src/app/models/categories.ts
@@ -0,0 +1,10 @@
+import {IMainCategory} from "./category";
+/**
+ * Created by ob0695 on 5/8/2017.
+ */
+export class Categories {
+
+    resourceCategories:Array<IMainCategory>;
+    productCategories:Array<IMainCategory>;
+    serviceCategories:Array<IMainCategory>;
+}
diff --git a/catalog-ui/src/app/models/category.ts b/catalog-ui/src/app/models/category.ts
new file mode 100644
index 0000000000..fcfe61bfd6
--- /dev/null
+++ b/catalog-ui/src/app/models/category.ts
@@ -0,0 +1,47 @@
+'use strict';
+
+
+
+export class ICategoryBase {
+
+    //server properties
+    name:string;
+    normalizedName:string;
+    uniqueId:string;
+    icons:Array<string>;
+
+    //custom properties
+    filterTerms:string;
+    isDisabled:boolean;
+    filteredGroup:Array<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/src/app/models/comments.ts b/catalog-ui/src/app/models/comments.ts
new file mode 100644
index 0000000000..b61713cc2c
--- /dev/null
+++ b/catalog-ui/src/app/models/comments.ts
@@ -0,0 +1,11 @@
+'use strict';
+
+export class AsdcComment {
+    public userRemarks:string;
+
+    constructor() {
+    }
+}
+
+
+
diff --git a/catalog-ui/src/app/models/component-metadata.ts b/catalog-ui/src/app/models/component-metadata.ts
new file mode 100644
index 0000000000..9476d75bd0
--- /dev/null
+++ b/catalog-ui/src/app/models/component-metadata.ts
@@ -0,0 +1,89 @@
+import {IMainCategory} from "./category";
+/**
+ * Created by obarda on 4/18/2017.
+ */
+export class ComponentMetadata {
+
+    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 categories:Array<IMainCategory>;
+    public highestVersion:boolean;
+    public normalizedName:string;
+    public systemName:string;
+
+    //Resource only
+    public resourceType: string;
+    public csarUUID:string;
+    public csarVersion:string;
+    public derivedList: string[];
+    public vendorName:string;
+    public vendorRelease:string;
+    public derivedFrom: Array<string>;
+
+    //Service only
+    public projectCode:string;
+    public distributionStatus:string;
+    public ecompGeneratedNaming: boolean;
+    public namingPolicy: string;
+
+
+    //backend lifecycleState
+    public state:string;
+
+    deserialize (response): ComponentMetadata {
+        this.abstract = response.abstract;
+        this.uniqueId = response.uniqueId;
+        this.uuid = response.uuid;
+        this.invariantUUID = response.invariantUUID;
+        this.contactId = response.contactId;
+        this.categories = response.categories;
+        this.creatorUserId = response.creatorUserId;
+        this.creationDate = response.creationDate;
+        this.creatorFullName = response.creatorFullName;
+        this.description = response.description;
+        this.icon = response.icon;
+        this.lastUpdateDate = response.lastUpdateDate;
+        this.lastUpdaterUserId = response.lastUpdaterUserId;
+        this.lastUpdaterFullName = response.lastUpdaterFullName;
+        this.lifecycleState = response.lifecycleState;
+        this.name = response.name;
+        this.version = response.version;
+        this.tags = angular.copy(response.tags, this.tags);
+        this.allVersions = response.allVersions;
+        this.componentType = response.componentType;
+        this.distributionStatus = response.distributionStatus;
+        this.highestVersion = response.highestVersion;
+        this.vendorName = response.vendorName;
+        this.vendorRelease = response.vendorRelease;
+        this.derivedList = response.derivedList;
+        this.normalizedName = response.normalizedName;
+        this.systemName = response.systemName;
+        this.projectCode = response.projectCode;
+        this.resourceType = response.resourceType;
+        this.csarUUID = response.csarUUID;
+        this.csarVersion = response.version;
+        this.state = response.state;
+        this.ecompGeneratedNaming = response.ecompGeneratedNaming;
+        this.namingPolicy = response.namingPolicy;
+        this.derivedFrom = response.derivedFrom;
+        return this;
+    }
+
+}
diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts
new file mode 100644
index 0000000000..898285f032
--- /dev/null
+++ b/catalog-ui/src/app/models/components/component.ts
@@ -0,0 +1,911 @@
+'use strict';
+
+import {AsdcComment, ArtifactModel, ArtifactGroupModel, IFileDownload, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance,
+    InputModel, DisplayModule, Module, IValidate, RelationshipModel, IMainCategory, RequirementsGroup, CapabilitiesGroup, AdditionalInformationModel,
+    Resource, IAppMenu, Product, Service} from "../../models";
+
+import {IComponentService} from "../../services/components/component-service";
+import {CommonUtils} from "../../utils/common-utils";
+import {QueueUtils} from "../../utils/functions";
+import {ArtifactGroupType} from "../../utils/constants";
+import {ComponentMetadata} from "../component-metadata";
+
+// import {}
+export interface IComponent {
+
+    //---------------------------------------------- API CALLS ----------------------------------------------------//
+
+    //Component API
+    getComponent():ng.IPromise<Component>;
+    updateComponent():ng.IPromise<Component>;
+    createComponentOnServer():ng.IPromise<Component>;
+    changeLifecycleState(state:string, commentObj:AsdcComment):ng.IPromise<Component>;
+    validateName(newName:string):ng.IPromise<IValidate>;
+    updateRequirementsCapabilities():ng.IPromise<any>;
+
+    //Artifacts API
+    addOrUpdateArtifact(artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
+    updateMultipleArtifacts(artifacts:Array<ArtifactModel>):ng.IPromise<any>;
+    deleteArtifact(artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel>;
+    downloadInstanceArtifact(artifactId:string):ng.IPromise<IFileDownload>;
+    downloadArtifact(artifactId:string):ng.IPromise<IFileDownload>;
+    getArtifactByGroupType(artifactGroupType:string):ng.IPromise<ArtifactGroupModel>;
+
+
+    //Property API
+    addOrUpdateProperty(property:PropertyModel):ng.IPromise<PropertyModel>;
+    deleteProperty(propertyId:string):ng.IPromise<PropertyModel>;
+    updateInstanceProperty(property:PropertyModel):ng.IPromise<PropertyModel>;
+
+    //Attribute API
+    deleteAttribute(attributeId:string):ng.IPromise<AttributeModel>;
+    addOrUpdateAttribute(attribute:AttributeModel):ng.IPromise<AttributeModel>;
+    updateInstanceAttribute(attribute:AttributeModel):ng.IPromise<AttributeModel>;
+
+
+
+
+    //Component Instance API
+    createComponentInstance(componentInstance:ComponentInstance):ng.IPromise<ComponentInstance>;
+    deleteComponentInstance(componentInstanceId:string):ng.IPromise<ComponentInstance>;
+    addOrUpdateInstanceArtifact(artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
+    deleteInstanceArtifact(artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel>;
+    uploadInstanceEnvFile(artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
+    changeComponentInstanceVersion(componentUid:string):ng.IPromise<Component>;
+    updateComponentInstance(componentInstance:ComponentInstance):ng.IPromise<ComponentInstance>;
+    updateMultipleComponentInstances(instances:Array<ComponentInstance>):ng.IPromise<Array<ComponentInstance>>;
+
+    //Inputs API
+    getComponentInstanceInputProperties(componentInstanceId:string, inputId:string):ng.IPromise<Array<PropertyModel>>
+    getComponentInstanceProperties(componentInstanceId:string):ng.IPromise<Array<PropertyModel>>
+    getComponentInputs(componentId:string):ng.IPromise<Array<InputModel>>;
+
+    createRelation(link:RelationshipModel):ng.IPromise<RelationshipModel>;
+    deleteRelation(link:RelationshipModel):ng.IPromise<RelationshipModel>;
+
+
+    //Modules
+    getModuleForDisplay(moduleId:string):ng.IPromise<DisplayModule>;
+    getModuleInstanceForDisplay(componentInstanceId:string, moduleId:string):ng.IPromise<DisplayModule>;
+    updateGroupMetadata(group:Module):ng.IPromise<Module>;
+    //---------------------------------------------- HELP FUNCTIONS ----------------------------------------------------//
+
+    getComponentSubType():string;
+    isAlreadyCertified():boolean;
+    isProduct():boolean;
+    isService():boolean;
+    isResource():boolean;
+    isComplex():boolean;
+    getAdditionalInformation():Array<AdditionalInformationModel>;
+    getAllVersionsAsSortedArray():Array<any>;
+    getStatus(sdcMenu:IAppMenu):string;
+}
+
+
+export abstract 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:ArtifactGroupModel;
+    public artifacts:ArtifactGroupModel;
+    public toscaArtifacts:ArtifactGroupModel;
+    public distributionStatus:string;
+    public categories:Array<IMainCategory>;
+    public componentInstancesProperties:PropertiesGroup;
+    public componentInstancesAttributes:AttributesGroup;
+    public componentInstancesRelations:Array<RelationshipModel>;
+    public componentInstances:Array<ComponentInstance>;
+    public inputs:Array<InputModel>;
+    public capabilities:CapabilitiesGroup;
+    public requirements:RequirementsGroup;
+    public additionalInformation:any;
+    public properties:Array<PropertyModel>;
+    public attributes:Array<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<Module>;
+    //custom properties
+    public componentService:IComponentService;
+    public filterTerm:string;
+    public iconSprite:string;
+    public selectedInstance:ComponentInstance;
+    public mainCategory:string;
+    public subCategory:string;
+    public selectedCategory:string;
+    public showMenu:boolean;
+
+
+    constructor(componentService: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 ArtifactGroupModel(component.artifacts);
+            this.toscaArtifacts = new 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.componentInstancesRelations = CommonUtils.initComponentInstanceRelations(component.componentInstancesRelations);
+            this.componentInstancesProperties = new PropertiesGroup(component.componentInstancesProperties);
+            this.componentInstancesAttributes = new AttributesGroup(component.componentInstancesAttributes);
+            this.name = component.name;
+            this.version = component.version;
+            this.tags = [];
+            angular.copy(component.tags, this.tags);
+            this.capabilities = new CapabilitiesGroup(component.capabilities);
+            this.requirements = new RequirementsGroup(component.requirements);
+            this.allVersions = component.allVersions;
+            this.deploymentArtifacts = new 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 = CommonUtils.initComponentInstances(component.componentInstances);
+            this.properties = CommonUtils.initProperties(component.properties, this.uniqueId);
+            this.attributes = CommonUtils.initAttributes(component.attributes, this.uniqueId);
+            this.selectedInstance = component.selectedInstance;
+            this.iconSprite = component.iconSprite;
+            this.showMenu = true;
+            this.groups = CommonUtils.initModules(component.groups);
+        }
+
+        //custom properties
+        this.componentService = componentService;
+    }
+
+    public setUniqueId = (uniqueId:string):void => {
+        this.uniqueId = uniqueId;
+    };
+
+    public setSelectedInstance = (componentInstance:ComponentInstance):void => {
+        this.selectedInstance = componentInstance;
+    };
+
+
+    //------------------------------------------ API Calls ----------------------------------------------------------------//
+    public changeLifecycleState = (state:string, commentObj:AsdcComment):ng.IPromise<Component> => {
+        return this.componentService.changeLifecycleState(this, state, JSON.stringify(commentObj));
+    };
+
+    public getComponent = ():ng.IPromise<Component> => {
+        return this.componentService.getComponent(this.uniqueId);
+    };
+
+    public createComponentOnServer = ():ng.IPromise<Component> => {
+        this.handleTags();
+        return this.componentService.createComponent(this);
+    };
+
+    public updateComponent = ():ng.IPromise<Component> => {
+        this.handleTags();
+        return this.componentService.updateComponent(this);
+    };
+
+    public validateName = (newName:string, subtype?:string):ng.IPromise<IValidate> => {
+        return this.componentService.validateName(newName, subtype);
+    };
+
+    public downloadArtifact = (artifactId:string):ng.IPromise<IFileDownload> => {
+        return this.componentService.downloadArtifact(this.uniqueId, artifactId);
+    };
+
+    public addOrUpdateArtifact = (artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (artifactObj:ArtifactModel):void => {
+            let newArtifact = new 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<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 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<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (artifactObj:ArtifactModel):void => {
+            let newArtifact = new 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 getArtifactByGroupType = (artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (response:ArtifactGroupModel):void => {
+            deferred.resolve(response);
+        };
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+        this.componentService.getArtifactByGroupType(this.uniqueId, artifactGroupType).then(onSuccess, onFailed);
+        return deferred.promise;
+    };
+
+    public getComponentInstanceArtifactsByGroupType = (componentInstanceId:string, artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (response:ArtifactGroupModel):void => {
+            deferred.resolve(response);
+        };
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+        this.componentService.getComponentInstanceArtifactsByGroupType(this.uniqueId, componentInstanceId, artifactGroupType).then(onSuccess, onFailed);
+        return deferred.promise;
+    };
+
+    public addOrUpdateProperty = (property:PropertyModel):ng.IPromise<PropertyModel> => {
+        let deferred = this.$q.defer();
+
+        let onError = (error:any):void => {
+            deferred.reject(error);
+        };
+
+        if (!property.uniqueId) {
+            let onSuccess = (property:PropertyModel):void => {
+                let newProperty = new PropertyModel(property);
+                this.properties.push(newProperty);
+                deferred.resolve(newProperty);
+            };
+            this.componentService.addProperty(this.uniqueId, property).then(onSuccess, onError);
+        }
+        else {
+            let onSuccess = (newProperty:PropertyModel):void => {
+                // find exist instance property in parent component for update the new value ( find bu uniqueId )
+                let existProperty:PropertyModel = <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:AttributeModel):ng.IPromise<AttributeModel> => {
+        let deferred = this.$q.defer();
+
+        let onError = (error:any):void => {
+            deferred.reject(error);
+        };
+
+        if (!attribute.uniqueId) {
+            let onSuccess = (attribute:AttributeModel):void => {
+                let newAttribute = new AttributeModel(attribute);
+                this.attributes.push(newAttribute);
+                deferred.resolve(newAttribute);
+            };
+            this.componentService.addAttribute(this.uniqueId, attribute).then(onSuccess, onError);
+        }
+        else {
+            let onSuccess = (newAttribute:AttributeModel):void => {
+                let existAttribute:AttributeModel = <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<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<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:PropertyModel):ng.IPromise<PropertyModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (newProperty:PropertyModel):void => {
+            // find exist instance property in parent component for update the new value ( find bu uniqueId & path)
+            let existProperty:PropertyModel = <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:AttributeModel):ng.IPromise<AttributeModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (newAttribute:AttributeModel):void => {
+            let existAttribute:AttributeModel = <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<IFileDownload> => {
+        return this.componentService.downloadInstanceArtifact(this.uniqueId, this.selectedInstance.uniqueId, artifactId);
+    };
+
+    public deleteInstanceArtifact = (artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (artifactObj:ArtifactModel):void => {
+            let newArtifact = new 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<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (artifactObj:ArtifactModel):void => {
+            switch (artifactObj.artifactGroupType) {
+                case ArtifactGroupType.DEPLOYMENT:
+                    this.selectedInstance.deploymentArtifacts[artifactObj.artifactLabel] = artifactObj;
+                    break;
+                case ArtifactGroupType.INFORMATION:
+                    this.selectedInstance.artifacts[artifactObj.artifactLabel] = artifactObj;
+                    break;
+            }
+            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:ArtifactModel):ng.IPromise<ArtifactModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (artifactObj: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<Component> => {
+        let deferred = this.$q.defer();
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+        let onSuccess = (componentInstance:ComponentInstance):void => {
+            let onSuccess = (component: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:ComponentInstance):ng.IPromise<ComponentInstance> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (instance:ComponentInstance):void => {
+            this.componentInstances.push(instance);
+            deferred.resolve(instance);
+        };
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+        this.componentService.createComponentInstance(this.uniqueId, componentInstance).then(onSuccess, onFailed);
+        return deferred.promise;
+    };
+
+    public updateComponentInstance = (componentInstance:ComponentInstance):ng.IPromise<ComponentInstance> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (updatedInstance:ComponentInstance):void => {
+            let componentInstance:ComponentInstance = _.find(this.componentInstances, (instance: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<ComponentInstance>):ng.IPromise<Array<ComponentInstance>> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (updatedInstances:Array<ComponentInstance>):void => {
+            _.forEach(updatedInstances, (updatedComponentInstance) => {
+                let componentInstance:ComponentInstance = _.find(this.componentInstances, (instance:ComponentInstance) => {
+                    return instance.uniqueId === updatedComponentInstance.uniqueId;
+                });
+
+                let index = this.componentInstances.indexOf(componentInstance);
+                this.componentInstances[index] = componentInstance;
+
+            });
+            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<ComponentInstance> => {
+        let deferred = this.$q.defer();
+        let onSuccess = ():void => {
+            let onSuccess = (component:Component):void => {
+                this.componentInstances = CommonUtils.initComponentInstances(component.componentInstances);
+                this.componentInstancesProperties = new PropertiesGroup(component.componentInstancesProperties);
+                this.componentInstancesAttributes = new AttributesGroup(component.componentInstancesAttributes);
+                this.groups = component.groups;
+                this.componentInstancesRelations = CommonUtils.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:RelationshipModel):ng.IPromise<RelationshipModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (relation:RelationshipModel):void => {
+            console.info('Link created successfully', relation);
+            if (!this.componentInstancesRelations) {
+                this.componentInstancesRelations = [];
+            }
+            this.componentInstancesRelations.push(new 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:RelationshipModel):ng.IPromise<RelationshipModel> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (responseRelation: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<DisplayModule> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (response: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;
+    };
+
+    public getModuleInstanceForDisplay = (componentInstanceId:string, moduleId:string):ng.IPromise<DisplayModule> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (response:DisplayModule):void => {
+            deferred.resolve(response);
+        };
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+        this.componentService.getComponentInstanceModule(this.uniqueId, componentInstanceId, 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<ComponentInstance>> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (response:Array<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<InputModel>> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (inputsRes:Array<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<InputModel>> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (response:Array<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<PropertyModel>> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (response:Array<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;
+    };
+
+    // get inputs inatnce - Pagination function
+    public getComponentInstanceProperties = (componentInstanceId:string):ng.IPromise<Array<PropertyModel>> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (response:Array<PropertyModel>):void => {
+            deferred.resolve(response);
+        };
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+        this.componentService.getComponentInstanceProperties(this.uniqueId, componentInstanceId).then(onSuccess, onFailed);
+        return deferred.promise;
+    };
+
+
+    public updateGroupMetadata = (module:Module):ng.IPromise<Module> => {
+
+        let deferred = this.$q.defer();
+
+        let onSuccess = (updatedModule:Module):void => {
+            let groupIndex:number = _.indexOf(this.groups, _.find(this.groups, (module: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<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):ArtifactGroupModel => {
+        switch (artifactGroupType) {
+            case ArtifactGroupType.DEPLOYMENT:
+                return this.deploymentArtifacts;
+            case ArtifactGroupType.INFORMATION:
+                return this.artifacts;
+        }
+    };
+
+    public getStatus = (sdcMenu: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 abstract setComponentDisplayData():void;
+    public abstract getTypeUrl():string;
+
+    public setComponentMetadata(componentMetadata: ComponentMetadata) {
+        this.abstract = componentMetadata.abstract;
+        this.uniqueId = componentMetadata.uniqueId;
+        this.uuid = componentMetadata.uuid;
+        this.invariantUUID = componentMetadata.invariantUUID;
+        this.contactId = componentMetadata.contactId;
+        this.categories = componentMetadata.categories;
+        this.creatorUserId = componentMetadata.creatorUserId;
+        this.creationDate = componentMetadata.creationDate;
+        this.creatorFullName = componentMetadata.creatorFullName;
+        this.description = componentMetadata.description;
+        this.icon = componentMetadata.icon;
+        this.lastUpdateDate = componentMetadata.lastUpdateDate;
+        this.lastUpdaterUserId = componentMetadata.lastUpdaterUserId;
+        this.lastUpdaterFullName = componentMetadata.lastUpdaterFullName;
+        this.lifecycleState = componentMetadata.lifecycleState;
+        this.name = componentMetadata.name;
+        this.version = componentMetadata.version;
+        this.tags = angular.copy(componentMetadata.tags, this.tags);
+        this.allVersions = componentMetadata.allVersions;
+        this.componentType = componentMetadata.componentType;
+        this.distributionStatus = componentMetadata.distributionStatus;
+        this.highestVersion = componentMetadata.highestVersion;
+        this.vendorName = componentMetadata.vendorName;
+        this.vendorRelease = componentMetadata.vendorRelease;
+        this.derivedList = componentMetadata.derivedList;
+        this.normalizedName = componentMetadata.normalizedName;
+        this.systemName = componentMetadata.systemName;
+        this.projectCode = componentMetadata.projectCode;
+        this.categories = componentMetadata.categories;
+ 
+    }
+
+    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/src/app/models/components/displayComponent.ts b/catalog-ui/src/app/models/components/displayComponent.ts
new file mode 100644
index 0000000000..8b2b522fd9
--- /dev/null
+++ b/catalog-ui/src/app/models/components/displayComponent.ts
@@ -0,0 +1,111 @@
+/*-
+ * ============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.
+ */
+
+'use strict';
+import {ComponentType} from "../../utils/constants";
+import {ComponentMetadata} from "../component-metadata";
+import {RequirementsGroup} from "../requirement";
+import {CapabilitiesGroup} from "../capability";
+
+export class LeftPaletteComponent {
+
+    uniqueId:string;
+    displayName:string;
+    version:string;
+    mainCategory:string;
+    subCategory:string;
+    iconClass:string;
+    componentSubType:string;
+    searchFilterTerms:string;
+    certifiedIconClass:string;
+    icon:string;
+    isRequirmentAndCapabilitiesLoaded:boolean;
+
+    uuid:string;
+    name:string;
+    lifecycleState:string;
+    allVersions:any;
+    componentType:string;
+    systemName:string;
+
+    capabilities:CapabilitiesGroup;
+    requirements:RequirementsGroup;
+
+    constructor(public component:ComponentMetadata) {
+        this.icon = component.icon;
+        this.version = component.version;
+        this.uniqueId = component.uniqueId;
+        this.isRequirmentAndCapabilitiesLoaded = false;
+        this.uuid = component.uuid;
+        this.name = component.name;
+        this.allVersions = component.allVersions;
+        this.componentType = component.componentType;
+        this.systemName = component.systemName;
+
+        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';
+        }
+
+        this.componentSubType = component.resourceType ? component.resourceType: 'SERVICE';
+        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 ComponentType.SERVICE:
+                this.iconClass = "sprite-services-icons " + icon;
+                break;
+            case 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/src/app/models/components/product.ts b/catalog-ui/src/app/models/components/product.ts
new file mode 100644
index 0000000000..0f2c00e822
--- /dev/null
+++ b/catalog-ui/src/app/models/components/product.ts
@@ -0,0 +1,105 @@
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {Component} from "./component";
+import {IProductService} from "../../services/components/product-service";
+import {IGroup, ISubCategory, IMainCategory, ICategoryBase} from "../category";
+import {ComponentMetadata} from "../component-metadata";
+
+export class Product extends Component {
+
+    public contacts:Array<string>;
+    public componentService:IProductService;
+    public fullName:string;
+
+    constructor(componentService: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:IMainCategory) => {
+            _.forEach(category.subcategories, (subcategory:ISubCategory) => {
+                subcategory.groupings = _.reject(subcategory.groupings, (group:IGroup) => {
+                    return group.uniqueId === uniqueId;
+                });
+                if (subcategory.groupings.length == 0) { // if there is no groups, delete the subcategory
+                    category.subcategories = _.reject(category.subcategories, (subcategoryObj: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:IMainCategory) => {
+                            return categoryObj.uniqueId === category.uniqueId;
+                        });
+                    }
+                }
+            });
+        });
+    };
+
+    private getCategoryObjectById = (categoriesArray:Array<ICategoryBase>, categoryUniqueId:string):ICategoryBase => {
+        let categorySelected = _.find(categoriesArray, (category) => {
+            return category.uniqueId === categoryUniqueId;
+        });
+        return categorySelected;
+    };
+
+    public addGroup = (category:IMainCategory, subcategory:ISubCategory, group:IGroup):void => {
+        if (!this.categories) {
+            this.categories = new Array<IMainCategory>();
+        }
+        let existingCategory:IMainCategory = <IMainCategory>this.getCategoryObjectById(this.categories, category.uniqueId);
+        let newGroup = angular.copy(group);
+        newGroup.filterTerms = undefined;
+        newGroup.isDisabled = undefined;
+        if (!existingCategory) {
+            let newCategory:IMainCategory = angular.copy(category);
+            newCategory.filteredGroup = undefined;
+            newCategory.subcategories = [];
+            let newSubcategory:ISubCategory = angular.copy(subcategory);
+            newSubcategory.groupings = [];
+            newSubcategory.groupings.push(newGroup);
+            newCategory.subcategories.push(newSubcategory);
+            this.categories.push(newCategory);
+        }
+        else {
+            let existingSubcategory:ISubCategory = <ISubCategory> this.getCategoryObjectById(existingCategory.subcategories, subcategory.uniqueId);
+            if (!existingSubcategory) {
+                let newSubcategory:ISubCategory = angular.copy(subcategory);
+                newSubcategory.groupings = [];
+                newSubcategory.groupings.push(newGroup);
+                existingCategory.subcategories.push(newSubcategory);
+
+            } else {
+                let existingGroup:IGroup = <IGroup> this.getCategoryObjectById(existingSubcategory.groupings, group.uniqueId);
+                if (!existingGroup) {
+                    existingSubcategory.groupings.push(newGroup);
+                }
+            }
+        }
+    };
+
+    getTypeUrl():string {
+        return 'products/';
+    }
+
+    public setComponentMetadata(componentMetadata:ComponentMetadata) {
+        super.setComponentMetadata(componentMetadata);
+        this.setComponentDisplayData();
+    };
+
+    setComponentDisplayData():void {
+        this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
+        this.iconSprite = "sprite-product-icons";
+    }
+}
+
+
diff --git a/catalog-ui/src/app/models/components/resource.ts b/catalog-ui/src/app/models/components/resource.ts
new file mode 100644
index 0000000000..e594451e1a
--- /dev/null
+++ b/catalog-ui/src/app/models/components/resource.ts
@@ -0,0 +1,157 @@
+/**
+ * Created by obarda on 2/3/2016.
+ */
+'use strict';
+import {InstancesInputsOrPropertiesMapData} from "../instance-inputs-properties-map";
+import {PropertyModel} from "../properties";
+import {DisplayModule} from "../modules/base-module";
+import {InputModel} from "../inputs";
+import {ResourceType} from "../../utils/constants";
+import {Component} from "./component";
+import {FileUploadModel} from "../../directives/file-upload/file-upload";
+import {IResourceService} from "../../services/components/resource-service";
+import {ComponentMetadata} from "../component-metadata";
+
+export class Resource extends Component {
+
+    public interfaces:any;
+    public derivedFrom:Array<string>;
+    public componentService:IResourceService;
+    public resourceType:string;
+    public payloadData:string;
+    public payloadName:string;
+    public importedFile:FileUploadModel;
+
+    // Onboarding parameters
+    public csarUUID:string;
+    public csarVersion:string;
+    public csarPackageType:string;
+    public packageId:string;
+
+    constructor(componentService: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 = ResourceType.VF;
+        }
+
+        this.componentService = componentService;
+        this.iconSprite = "sprite-resource-icons";
+    }
+
+    public setComponentMetadata(componentMetadata: ComponentMetadata) {
+        super.setComponentMetadata(componentMetadata);
+        this.resourceType = componentMetadata.resourceType;
+        this.csarUUID = componentMetadata.csarUUID;
+        this.csarVersion = componentMetadata.csarVersion;
+        this.derivedFrom = componentMetadata.derivedFrom;
+        this.setComponentDisplayData();
+    };
+
+    public getComponentSubType = ():string => {
+        return this.resourceType;
+    };
+
+    public isComplex = ():boolean => {
+        return this.resourceType === ResourceType.VF;
+    };
+
+    public isVl = ():boolean => {
+        return ResourceType.VL == this.resourceType;
+    };
+
+    public isCsarComponent = ():boolean => {
+        return !!this.csarUUID;
+    };
+
+    public createComponentOnServer = ():ng.IPromise<Component> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (component: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;
+    };
+
+
+    public updateResourceGroupProperties = (module:DisplayModule, properties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (updatedProperties:Array<PropertyModel>):void => {
+            _.forEach(updatedProperties, (property:PropertyModel) => { // Replace all updated properties on the module we needed to update
+                _.extend(_.find(module.properties, {uniqueId: property.uniqueId}), property);
+
+            });
+            //_.extend(_.findWhere(this.groups, {uniqueId: module.uniqueId }), module); // replace the module on the component so all data will be updates if the module sent to the function is a copy
+            deferred.resolve(updatedProperties);
+        };
+        let onError = (error:any):void => {
+            deferred.reject(error);
+        };
+
+        this.componentService.updateResourceGroupProperties(this.uniqueId, module.uniqueId, properties).then(onSuccess, onError);
+        return deferred.promise;
+    };
+
+    // For now we only implement the logic in service level
+    public createInputsFormInstances = (instanceInputsPropertiesMap:InstancesInputsOrPropertiesMapData):ng.IPromise<Array<InputModel>> => {
+        let deferred = this.$q.defer();
+        return deferred.promise;
+    };
+
+    getTypeUrl():string {
+        return 'resources/';
+    }
+
+
+    setComponentDisplayData():void {
+        this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version + ' ' + this.resourceType;
+        if (this.categories && this.categories[0] && this.categories[0].subcategories && this.categories[0].subcategories[0]) {
+            this.mainCategory = this.categories[0].name;
+            this.subCategory = this.categories[0].subcategories[0].name;
+            this.selectedCategory = this.mainCategory + "_#_" + this.subCategory;
+            this.iconSprite = "sprite-resource-icons";
+        }
+    };
+
+    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/src/app/models/components/service.ts b/catalog-ui/src/app/models/components/service.ts
new file mode 100644
index 0000000000..a4dd3155d7
--- /dev/null
+++ b/catalog-ui/src/app/models/components/service.ts
@@ -0,0 +1,150 @@
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {IServiceService} from "../../services/components/service-service";
+import {Component, PropertyModel, DisplayModule, InputsAndProperties, InputModel, InstancesInputsOrPropertiesMapData, InstancesInputsPropertiesMap,
+    Distribution, DistributionComponent, ArtifactGroupModel} from "../../models";
+import {ArtifactGroupType} from "../../utils/constants";
+import {ComponentMetadata} from "../component-metadata";
+
+export class Service extends Component {
+
+    public serviceApiArtifacts:ArtifactGroupModel;
+    public componentService:IServiceService;
+    public ecompGeneratedNaming:boolean;
+    public namingPolicy:string;
+
+    constructor(componentService:IServiceService, $q:ng.IQService, component?:Service) {
+        super(componentService, $q, component);
+        this.ecompGeneratedNaming = true;
+        if (component) {
+            this.serviceApiArtifacts = new ArtifactGroupModel(component.serviceApiArtifacts);
+            this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
+            this.ecompGeneratedNaming = component.ecompGeneratedNaming;
+            this.namingPolicy = component.namingPolicy;
+            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<Distribution>> => {
+        return this.componentService.getDistributionsList(this.uuid);
+    };
+
+    public getDistributionsComponent = (distributionId:string):ng.IPromise<Array<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:InstancesInputsOrPropertiesMapData, instancePropertiesMap:InstancesInputsOrPropertiesMapData):ng.IPromise<Array<InputModel>> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (inputsCreated:Array<InputModel>):void => {
+            this.inputs = inputsCreated.concat(this.inputs);
+            deferred.resolve(inputsCreated);
+        };
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+
+        let propertiesAndInputsMap:InstancesInputsPropertiesMap = new InstancesInputsPropertiesMap(instancesInputsMap, instancePropertiesMap);
+        propertiesAndInputsMap = propertiesAndInputsMap.cleanUnnecessaryDataBeforeSending(); // We need to create a copy of the map, without the already selected inputs / properties, and to send the clean map
+        this.componentService.createInputsFromInstancesInputs(this.uniqueId, propertiesAndInputsMap).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 getServiceInputInputsAndProperties = (inputId:string):ng.IPromise<Array<InputModel>> => {
+        let deferred = this.$q.defer();
+        let onSuccess = (inputsAndProperties:InputsAndProperties):void => {
+            let input:InputModel = _.find(this.inputs, (input:InputModel) => {
+                return input.uniqueId === inputId;
+            });
+            input.inputs = inputsAndProperties.inputs;
+            input.properties = inputsAndProperties.properties;
+            deferred.resolve(inputsAndProperties);
+        };
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+        this.componentService.getComponentInputInputsAndProperties(this.uniqueId, inputId).then(onSuccess, onFailed);
+        return deferred.promise;
+    };
+
+    public deleteServiceInput = (inputId:string):ng.IPromise<InputModel> => {
+        let deferred = this.$q.defer();
+
+        let onSuccess = (deletedInput:InputModel):void => {
+            delete _.remove(this.inputs, {uniqueId: deletedInput.uniqueId})[0];
+            deferred.resolve(deletedInput);
+        };
+
+        let onFailed = (error:any):void => {
+            deferred.reject(error);
+        };
+
+        this.componentService.deleteComponentInput(this.uniqueId, inputId).then(onSuccess, onFailed);
+        return deferred.promise;
+    };
+
+    public getArtifactsByType = (artifactGroupType:string):ArtifactGroupModel => {
+        switch (artifactGroupType) {
+            case ArtifactGroupType.DEPLOYMENT:
+                return this.deploymentArtifacts;
+            case ArtifactGroupType.INFORMATION:
+                return this.artifacts;
+            case ArtifactGroupType.SERVICE_API:
+                return this.serviceApiArtifacts;
+        }
+    };
+
+    public updateGroupInstanceProperties = (resourceInstanceId:string, group:DisplayModule, properties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>> => {
+
+        let deferred = this.$q.defer();
+        let onSuccess = (updatedProperties:Array<PropertyModel>):void => {
+            _.forEach(updatedProperties, (property:PropertyModel) => { // Replace all updated properties on the we needed to update
+                _.extend(_.find(group.properties, {uniqueId: property.uniqueId}), property);
+            });
+            deferred.resolve(updatedProperties);
+        };
+        let onError = (error:any):void => {
+            deferred.reject(error);
+        };
+
+        this.componentService.updateGroupInstanceProperties(this.uniqueId, resourceInstanceId, group.groupInstanceUniqueId, properties).then(onSuccess, onError);
+        return deferred.promise;
+    };
+
+    getTypeUrl():string {
+        return 'services/';
+    }
+
+
+    public setComponentMetadata(componentMetadata: ComponentMetadata) {
+        super.setComponentMetadata(componentMetadata);
+        this.ecompGeneratedNaming = componentMetadata.ecompGeneratedNaming;
+        this.namingPolicy = componentMetadata.namingPolicy;
+        this.setComponentDisplayData();
+    }
+
+    setComponentDisplayData():void {
+        this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
+        if (this.categories && this.categories[0]) {
+            this.mainCategory = this.categories[0].name;
+            this.selectedCategory = this.mainCategory;
+        }
+        this.iconSprite = "sprite-services-icons";
+    }
+}
+
diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
new file mode 100644
index 0000000000..22c6232548
--- /dev/null
+++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
@@ -0,0 +1,113 @@
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {ArtifactGroupModel, CapabilitiesGroup,RequirementsGroup, PropertyModel, InputModel, Module} from "../../models";
+import {ResourceType} from "../../utils/constants";
+
+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:ArtifactGroupModel;
+    public artifacts:ArtifactGroupModel;
+    public propertyValueCounter:number;
+    public uniqueId:string;
+    public creationTime:number;
+    public modificationTime:number;
+    public capabilities:CapabilitiesGroup;
+    public requirements:RequirementsGroup;
+    public customizationUUID:string;
+    //custom properties
+    public certified:boolean;
+    public iconSprite:string;
+    public inputs:Array<InputModel>;
+    public properties:Array<PropertyModel>;
+    public groupInstances:Array<Module>;
+
+    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 ArtifactGroupModel(componentInstance.deploymentArtifacts);
+            this.artifacts = new ArtifactGroupModel(componentInstance.artifacts);
+            this.uniqueId = componentInstance.uniqueId;
+            this.creationTime = componentInstance.creationTime;
+            this.modificationTime = componentInstance.modificationTime;
+            this.propertyValueCounter = componentInstance.propertyValueCounter;
+            this.capabilities = new CapabilitiesGroup(componentInstance.capabilities);
+            this.requirements = new RequirementsGroup(componentInstance.requirements);
+            this.certified = componentInstance.certified;
+            this.customizationUUID = componentInstance.customizationUUID;
+            this.updatePosition(componentInstance.posX, componentInstance.posY);
+            this.groupInstances = componentInstance.groupInstances;
+        }
+    }
+
+    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 isComplex = () : boolean => {
+        return this.originType === ResourceType.VF;
+    }
+
+    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 => {
+        let temp = angular.copy(this);
+        temp.certified = undefined;
+        temp.iconSprite = undefined;
+        temp.inputs = undefined;
+        temp.groupInstances = undefined;
+        temp.properties = undefined;
+        temp.requirements = undefined;
+        temp.capabilities = undefined;
+        return temp;
+    };
+}
diff --git a/catalog-ui/src/app/models/componentsInstances/productInstance.ts b/catalog-ui/src/app/models/componentsInstances/productInstance.ts
new file mode 100644
index 0000000000..7b73f83988
--- /dev/null
+++ b/catalog-ui/src/app/models/componentsInstances/productInstance.ts
@@ -0,0 +1,13 @@
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {ComponentInstance} from "./componentInstance";
+
+export class ProductInstance extends ComponentInstance {
+
+    constructor(componentInstance?:ProductInstance) {
+        super(componentInstance);
+        this.iconSprite = "sprite-product-icons";
+    }
+}
diff --git a/catalog-ui/src/app/models/componentsInstances/resourceInstance.ts b/catalog-ui/src/app/models/componentsInstances/resourceInstance.ts
new file mode 100644
index 0000000000..be4bde9af9
--- /dev/null
+++ b/catalog-ui/src/app/models/componentsInstances/resourceInstance.ts
@@ -0,0 +1,15 @@
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {ComponentInstance} from "./componentInstance";
+
+export class ResourceInstance extends ComponentInstance {
+
+    constructor(componentInstance?:ResourceInstance) {
+        super(componentInstance);
+
+        this.iconSprite = "sprite-resource-icons";
+    }
+}
+
diff --git a/catalog-ui/src/app/models/componentsInstances/serviceInstance.ts b/catalog-ui/src/app/models/componentsInstances/serviceInstance.ts
new file mode 100644
index 0000000000..060519b83d
--- /dev/null
+++ b/catalog-ui/src/app/models/componentsInstances/serviceInstance.ts
@@ -0,0 +1,14 @@
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {ComponentInstance} from "./componentInstance";
+
+export class ServiceInstance extends ComponentInstance {
+
+    constructor(componentInstance?:ServiceInstance) {
+        super(componentInstance);
+        this.iconSprite = "sprite-services-icons";
+    }
+}
+
diff --git a/catalog-ui/src/app/models/csar-component.ts b/catalog-ui/src/app/models/csar-component.ts
new file mode 100644
index 0000000000..301da959f7
--- /dev/null
+++ b/catalog-ui/src/app/models/csar-component.ts
@@ -0,0 +1,15 @@
+'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/src/app/models/data-type-properties.ts b/catalog-ui/src/app/models/data-type-properties.ts
new file mode 100644
index 0000000000..a36e87b0fc
--- /dev/null
+++ b/catalog-ui/src/app/models/data-type-properties.ts
@@ -0,0 +1,39 @@
+/**
+ * Created by rcohen on 9/25/2016.
+ */
+'use strict';
+import {SchemaPropertyGroupModel} from "./aschema-property";
+import {PropertyModel} from "./properties";
+
+export class DataTypePropertyModel extends PropertyModel{
+    //custom
+    simpleType:string;
+    valueObjectRef:any;
+    childrenProperties:Array<DataTypePropertyModel>;
+    isAllChildrenLevelsCalculated:boolean;
+    treeNodeId:string;
+    parent:DataTypePropertyModel;
+    expandedChildPropertyId:string;
+
+    constructor(property?:PropertyModel);
+    constructor(name:string, type:string, treeNodeId:string, parent:DataTypePropertyModel, valueObjectRef:any, schema?:SchemaPropertyGroupModel);
+    constructor(nameOrPropertyObj?:string | PropertyModel, type?:string, treeNodeId?:string, parent?:DataTypePropertyModel, valueObjectRef?:any, schema?:SchemaPropertyGroupModel){
+        super(typeof nameOrPropertyObj === "string" ? null : nameOrPropertyObj);
+        if ( typeof nameOrPropertyObj === "string" ) {
+            this.name = nameOrPropertyObj;
+            this.type = type;
+            this.treeNodeId = treeNodeId;
+            this.parent = parent;
+            this.valueObjectRef = valueObjectRef;
+            this.schema = schema;
+        }
+    }
+
+    public updateExpandedChildPropertyId = (childPropertyId:string):void =>{
+        if(this.expandedChildPropertyId == childPropertyId){
+            this.expandedChildPropertyId = "";
+        }else{
+            this.expandedChildPropertyId = childPropertyId;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/models/data-types-map.ts b/catalog-ui/src/app/models/data-types-map.ts
new file mode 100644
index 0000000000..8aa38e26e7
--- /dev/null
+++ b/catalog-ui/src/app/models/data-types-map.ts
@@ -0,0 +1,17 @@
+/**
+ * Created by rcohen on 9/25/2016.
+ */
+'use strict';
+import {DataTypeModel} from "./data-types";
+
+export class DataTypesMapData {
+    [dataTypeId:string]:Array<DataTypeModel>;
+}
+
+export class DataTypesMap {
+    dataTypesMap:DataTypesMapData;
+
+    constructor(dataTypesMap:DataTypesMapData) {
+        this.dataTypesMap = dataTypesMap;
+    }
+}
diff --git a/catalog-ui/src/app/models/data-types.ts b/catalog-ui/src/app/models/data-types.ts
new file mode 100644
index 0000000000..060ebf7e7d
--- /dev/null
+++ b/catalog-ui/src/app/models/data-types.ts
@@ -0,0 +1,34 @@
+/**
+ * Created by rcohen on 9/25/2016.
+ */
+'use strict';
+import {PropertyBEModel} from "./properties-inputs/property-be-model";
+
+export class DataTypeModel {
+
+    //server data
+    name:string;
+    uniqueId:string;
+    derivedFromName:string;
+    derivedFrom:DataTypeModel;
+    creationTime:string;
+    modificationTime:string;
+    properties: Array<PropertyBEModel>;
+
+    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/src/app/models/distribution.ts b/catalog-ui/src/app/models/distribution.ts
new file mode 100644
index 0000000000..b6854c68a2
--- /dev/null
+++ b/catalog-ui/src/app/models/distribution.ts
@@ -0,0 +1,43 @@
+'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<DistributionComponent>;
+    public statusCount:any;
+    //custom data
+    public dateFormat:string;
+
+    constructor() {
+    }
+
+    public toJSON = ():any => {
+        this.dateFormat = undefined;
+        return this;
+    };
+}
+
+
diff --git a/catalog-ui/src/app/models/export-excel.ts b/catalog-ui/src/app/models/export-excel.ts
new file mode 100644
index 0000000000..7d0bc56a7b
--- /dev/null
+++ b/catalog-ui/src/app/models/export-excel.ts
@@ -0,0 +1,12 @@
+/**
+ * Created by rcohen on 11/7/2016.
+ */
+'use strict';
+
+export class ExportExcel {
+    fileName:string;
+    metaData:Array<string>;//array of text rows that display on the top of table
+    dataObj:any;//array of JSONs - the table data
+    tableHeaders:Array<string>;
+    groupByField:string;//[optional] get field name in order to split data to some tables group by this field
+}
diff --git a/catalog-ui/src/app/models/file-download.ts b/catalog-ui/src/app/models/file-download.ts
new file mode 100644
index 0000000000..d63963e1ba
--- /dev/null
+++ b/catalog-ui/src/app/models/file-download.ts
@@ -0,0 +1,6 @@
+'use strict';
+
+export interface IFileDownload {
+  artifactName:string;
+  base64Contents:string;
+}
diff --git a/catalog-ui/src/app/models/filter-properties-assignment-data.ts b/catalog-ui/src/app/models/filter-properties-assignment-data.ts
new file mode 100644
index 0000000000..067ac630de
--- /dev/null
+++ b/catalog-ui/src/app/models/filter-properties-assignment-data.ts
@@ -0,0 +1,10 @@
+/**
+ * Created by rc2122 on 5/16/2017.
+ */
+export class FilterPropertiesAssignmentData {
+    propertyName:string;
+    selectedTypes:Array<string>;
+    constructor(){
+        this.selectedTypes = [];
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/assetPopoverObj.ts b/catalog-ui/src/app/models/graph/assetPopoverObj.ts
new file mode 100644
index 0000000000..c4fea9b994
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/assetPopoverObj.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=========================================================
+ */
+
+'use strict';
+
+export class AssetPopoverObj {
+
+    nodeId:string;
+    displayName:string;
+    menuPosition:Cy.Position;
+    menuSide:string;
+    isViewOnly:boolean;
+    VLArray:Array<any>;
+    CPArray:Array<any>;
+
+    constructor(nodeId:string, displayName:string, menuPosition:Cy.Position, menuSide:string, isViewOnly?:boolean, VLArray?:Array<any>, CPArray?:Array<any>) {
+        this.nodeId = nodeId;
+        this.displayName = displayName;
+        this.menuPosition = {x: menuPosition.x, y: menuPosition.y};
+        this.menuSide = menuSide;
+        this.isViewOnly = isViewOnly || false;
+        this.VLArray = VLArray || [];
+        this.CPArray = CPArray || [];
+    }
+}
+
+
diff --git a/catalog-ui/src/app/models/graph/graph-links/common-base-link.ts b/catalog-ui/src/app/models/graph/graph-links/common-base-link.ts
new file mode 100644
index 0000000000..4d6d989daf
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/common-base-link.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.
+ */
+
+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/src/app/models/graph/graph-links/common-ci-link-base.ts b/catalog-ui/src/app/models/graph/graph-links/common-ci-link-base.ts
new file mode 100644
index 0000000000..12e66c86f9
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/common-ci-link-base.ts
@@ -0,0 +1,49 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {Relationship, RelationshipModel} from "../relationship";
+import {CommonLinkBase} from "./common-base-link";
+/**
+ * Created by obarda on 6/29/2016.
+ */
+
+export interface ICommonCiLinkBase {
+
+}
+
+export class CommonCiLinkBase extends CommonLinkBase implements ICommonCiLinkBase {
+
+  relation:RelationshipModel;
+
+
+  constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+    super();
+    if (relation) {
+      if (singleRelationship) {
+        this.relation = new RelationshipModel(relation, singleRelationship);
+      } else {
+        this.relation = new RelationshipModel(relation);
+      }
+      this.source = relation.fromNode;
+      this.target = relation.toNode;
+    } else {
+      this.relation = new RelationshipModel();
+    }
+  }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts
new file mode 100644
index 0000000000..04b28c7ceb
--- /dev/null
+++ b/catalog-ui/src/app/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=========================================================
+ */
+
+import {ICommonCiLinkBase, CommonCiLinkBase} from "../common-ci-link-base";
+import {RelationshipModel, Relationship} from "../../relationship";
+
+export interface ICompositionCiLinkBase extends ICommonCiLinkBase {
+    updateLinkDirection():void;
+}
+
+export class CompositionCiLinkBase extends CommonCiLinkBase implements ICompositionCiLinkBase {
+
+    type:string;
+    visible:boolean;
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.visible = true;
+    }
+
+    public setRelation = (relation:RelationshipModel) => {
+        this.relation = relation;
+    };
+
+    updateLinkDirection():void {
+        this.source = this.relation.fromNode;
+        this.target = this.relation.toNode;
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts
new file mode 100644
index 0000000000..e213fa9b33
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts
@@ -0,0 +1,32 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {CompositionCiLinkBase} from "./composition-ci-link-base";
+import {Relationship, RelationshipModel} from "../../relationship";
+import {GraphColors} from "../../../../utils/constants";
+
+export class CompositionCiSimpleLink extends CompositionCiLinkBase {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.color = GraphColors.BASE_LINK;
+        this.classes = 'simple-link';
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts
new file mode 100644
index 0000000000..b756dab129
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts
@@ -0,0 +1,32 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {RelationshipModel, Relationship} from "../../relationship";
+import {CompositionCiLinkBase} from "./composition-ci-link-base";
+/**
+ * Created by obarda on 4/20/2016.
+ */
+export class LinkUcpeHost extends CompositionCiLinkBase {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.visible = false;
+        this.classes = "ucpe-host-link";
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts
new file mode 100644
index 0000000000..fc8631781a
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.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=========================================================
+ */
+
+import {RelationshipModel, Relationship} from "../../relationship";
+import {CompositionCiLinkBase} from "./composition-ci-link-base";
+import {GraphColors} from "../../../../utils/constants";
+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 = GraphColors.BASE_LINK;
+    }
+
+    updateLinkDirection():void {
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts
new file mode 100644
index 0000000000..e0824ccbe8
--- /dev/null
+++ b/catalog-ui/src/app/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=========================================================
+ */
+
+import {CompositionCiLinkBase} from "./composition-ci-link-base";
+import {RelationshipModel, Relationship} from "../../relationship";
+import {GraphColors} from "../../../../utils/constants";
+
+export class CompositionCiVLink extends CompositionCiLinkBase {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.color = GraphColors.VL_LINK;
+        this.classes = 'vl-link';
+    }
+
+
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts
new file mode 100644
index 0000000000..854eeecad5
--- /dev/null
+++ b/catalog-ui/src/app/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=========================================================
+ */
+import {CompositionCiUcpeLink} from "./composition-ci-ucpe-link";
+import {Relationship, RelationshipModel} from "../../relationship";
+import {GraphColors} from "../../../../utils/constants";
+/**
+ * Created by obarda on 4/20/2016.
+ */
+
+export class CompositionCiVlUcpeLink extends CompositionCiUcpeLink {
+
+    constructor(relation?:RelationshipModel, from?:boolean, singleRelation?:Relationship) {
+        super(relation, from, singleRelation);
+        this.color = GraphColors.VL_LINK;
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
new file mode 100644
index 0000000000..7fdc0838ed
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
@@ -0,0 +1,79 @@
+/*-
+ * ============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.
+ */
+'use strict';
+import {RelationshipModel, Relationship, CompositionCiLinkBase, CompositionCiNodeBase, LinkUcpeHost, CompositionCiUcpeLink,
+    CompositionCiVlUcpeLink, CompositionCiSimpleLink, ModuleCiLinkBase, ModuleCiVlLink, CompositionCiVLink} from "../../../models";
+
+export class LinksFactory {
+
+  constructor() {
+  }
+
+  public createGraphLink = (cy:Cy.Instance, relation:RelationshipModel, singleRelation:Relationship):CompositionCiLinkBase => {
+
+    let newRelation:CompositionCiLinkBase;
+
+    let fromNode:CompositionCiNodeBase = cy.getElementById(relation.fromNode).data();
+    let toNode: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 LinkUcpeHost(relation, singleRelation);
+      } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+        newRelation = new CompositionCiVlUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+      } else {
+        newRelation = new CompositionCiUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+      }
+    } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+      newRelation = new CompositionCiVLink(relation, singleRelation);
+    } else {
+      newRelation = new CompositionCiSimpleLink(relation, singleRelation);
+    }
+
+    return newRelation;
+  };
+
+  public createUcpeHostLink = (relation:RelationshipModel):LinkUcpeHost => {
+    return new LinkUcpeHost(relation);
+  };
+
+  public createVLLink = (relation:RelationshipModel):CompositionCiVLink => {
+    return new CompositionCiVLink(relation);
+  }
+
+
+  public createModuleGraphLinks = (relation:RelationshipModel, singleRelation:Relationship):ModuleCiLinkBase => {
+
+    let newRelation:ModuleCiLinkBase;
+
+    if (_.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+      newRelation = new ModuleCiVlLink(relation, singleRelation);
+    } else {
+      newRelation = new ModuleCiLinkBase(relation, singleRelation);
+    }
+
+    return newRelation;
+  };
+
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-link-base.ts b/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-link-base.ts
new file mode 100644
index 0000000000..73cd2923eb
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-link-base.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.
+ */
+import {Relationship, RelationshipModel, ICommonCiLinkBase, CommonCiLinkBase} from "../../../../models";
+import {GraphColors} from "../../../../utils/constants";
+
+export interface IModuleCiLinkBase extends ICommonCiLinkBase {
+
+}
+
+export class ModuleCiLinkBase extends CommonCiLinkBase implements IModuleCiLinkBase {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.color = GraphColors.BASE_LINK;
+    }
+
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts b/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts
new file mode 100644
index 0000000000..0bc675d465
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-vl-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=========================================================
+ */
+import {Relationship, RelationshipModel, ICommonCiLinkBase, CommonCiLinkBase} from "../../../../models";
+import {GraphColors} from "../../../../utils/constants";
+
+export interface IModuleCiVlLink extends ICommonCiLinkBase {
+
+}
+
+export class ModuleCiVlLink extends CommonCiLinkBase implements IModuleCiVlLink {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.color = GraphColors.VL_LINK;
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graphTooltip.ts b/catalog-ui/src/app/models/graph/graphTooltip.ts
new file mode 100644
index 0000000000..790608e7f7
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graphTooltip.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=========================================================
+ */
+'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/src/app/models/graph/link-menu.ts b/catalog-ui/src/app/models/graph/link-menu.ts
new file mode 100644
index 0000000000..b3352dd815
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/link-menu.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=========================================================
+ */
+'use strict';
+import {Point} from "./point";
+
+export class LinkMenu {
+    position:Point;
+    isShow:boolean;
+    link:Cy.CollectionFirstEdge;
+
+    constructor();
+    constructor(point:Point, isShow:boolean, link:Cy.CollectionFirstEdge);
+    constructor(point?:Point, isShow?:boolean, link?:Cy.CollectionFirstEdge) {
+        this.position = point ? point : new Point();
+        this.isShow = isShow ? isShow : false;
+        this.link = link ? link : null;
+    }
+}
+
diff --git a/catalog-ui/src/app/models/graph/match-relation.ts b/catalog-ui/src/app/models/graph/match-relation.ts
new file mode 100644
index 0000000000..2de2e930b6
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/match-relation.ts
@@ -0,0 +1,111 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+import {Requirement} from "../requirement";
+import {Capability} from "../capability";
+import {Relationship, RelationshipModel, RelationType} from "./relationship";
+
+export class MatchBase {
+    requirement:Requirement;
+    isFromTo:boolean;
+    fromNode:string;
+    toNode:string;
+
+    constructor(requirement: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:Requirement;
+
+    constructor(requirement:Requirement, secondRequirement: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:Capability;
+
+    constructor(requirement:Requirement, capability:Capability, isFromTo:boolean, fromNode:string, toNode:string) {
+        super(requirement, isFromTo, fromNode, toNode);
+        this.capability = capability;
+    }
+
+    public matchToRelation = ():Relationship => {
+        let relationship:Relationship = new Relationship();
+        relationship.capability = this.capability.name;
+        relationship.capabilityOwnerId = this.capability.ownerId;
+        relationship.capabilityUid = this.capability.uniqueId;
+        relationship.relationship = new 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 = ():RelationshipModel => {
+        let relationshipModel:RelationshipModel = new RelationshipModel();
+        let relationship:Relationship = this.matchToRelation();
+        relationshipModel.setRelationshipModelParams(this.fromNode, this.toNode, [relationship]);
+        return relationshipModel;
+    };
+}
+
+
diff --git a/catalog-ui/src/app/models/graph/nodes/base-common-node.ts b/catalog-ui/src/app/models/graph/nodes/base-common-node.ts
new file mode 100644
index 0000000000..aee6b02086
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/base-common-node.ts
@@ -0,0 +1,70 @@
+/*-
+ * ============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.
+ */
+'use strict';
+import {AngularJSBridge} from "../../../services/angular-js-bridge-service";
+
+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 = 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/src/app/models/graph/nodes/common-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts
new file mode 100644
index 0000000000..98fb583625
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.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=========================================================
+ */
+import {CommonNodeBase} from "./base-common-node";
+import {ComponentInstance} from "../../componentsInstances/componentInstance";
+export abstract class CommonCINodeBase extends CommonNodeBase {
+
+    public certified:boolean;
+    public template:string;
+    public componentInstance:ComponentInstance;
+    public group:string;
+
+    constructor(instance: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/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
new file mode 100644
index 0000000000..d17d97ac19
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.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=========================================================
+ */
+
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {CommonCINodeBase} from "../common-ci-node-base";
+import {ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service";
+import {ImagesUrl} from "app/utils";
+import {AngularJSBridge} from "app/services";
+
+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:ComponentInstance,
+                public imageCreator: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 + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png',
+            this.imagesPath + ImagesUrl.RESOURCE_ICONS + 'uncertified.png')
+            .then(imageBase64 => {
+                this.img = imageBase64;
+                node.style({'background-image': this.img});
+            });
+
+        return this.img;
+    }
+
+    protected getDisplayName():string {
+
+        let graphResourceName = AngularJSBridge.getFilter('graphResourceName');
+        let resourceName = AngularJSBridge.getFilter('resourceName');
+        return graphResourceName(resourceName(this.componentInstance.name));
+    }
+
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
new file mode 100644
index 0000000000..e6d0cc178f
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.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=========================================================
+ */
+
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {AngularJSBridge} from "../../../../services/angular-js-bridge-service";
+import {ImagesUrl} from "../../../../utils/constants";
+
+export class CompositionCiNodeCp extends CompositionCiNodeBase {
+
+    constructor(instance:ComponentInstance,
+                imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initCp();
+    }
+
+    private initCp():void {
+        let sdcConfig = AngularJSBridge.getAngularConfig();
+        this.img = sdcConfig.imagesPath + 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/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
new file mode 100644
index 0000000000..dd2fb6c6dd
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {ImagesUrl} from "../../../../utils/constants";
+import {ComponentInstance, CompositionCiNodeBase} from "../../../../models";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+export class CompositionCiNodeService extends CompositionCiNodeBase {
+
+    constructor(instance:ComponentInstance,
+                imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initService();
+    }
+
+    private initService():void {
+
+        this.img = this.imagesPath + 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/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
new file mode 100644
index 0000000000..37882963d3
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.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=========================================================
+ */
+
+import {CompositionCiNodeCp, ComponentInstance} from "./../../../../models";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+
+export class CompositionCiNodeUcpeCp extends CompositionCiNodeCp {
+
+    constructor(instance:ComponentInstance,
+                imageCreator: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/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
new file mode 100644
index 0000000000..d209a10019
--- /dev/null
+++ b/catalog-ui/src/app/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=========================================================
+ */
+
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+
+export class NodeUcpe extends CompositionCiNodeBase {
+    constructor(instance:ComponentInstance,
+                imageCreator: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/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
new file mode 100644
index 0000000000..cb0cd59b13
--- /dev/null
+++ b/catalog-ui/src/app/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=========================================================
+ */
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImagesUrl} from "../../../../utils/constants";
+
+export class CompositionCiNodeVf extends CompositionCiNodeBase {
+
+    constructor(instance:ComponentInstance,
+                imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initVf();
+    }
+
+    private initVf():void {
+        this.img = this.imagesPath + 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/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
new file mode 100644
index 0000000000..e08e6a4915
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.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=========================================================
+ */
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImagesUrl} from "../../../../utils/constants";
+
+export class CompositionCiNodeVfc extends CompositionCiNodeBase {
+    constructor(instance:ComponentInstance, imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initVfc();
+    }
+
+    private initVfc():void {
+        this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png';
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
new file mode 100644
index 0000000000..596d12058f
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
@@ -0,0 +1,56 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+import {ImagesUrl} from "../../../../utils/constants";
+
+export class CompositionCiNodeVl extends CompositionCiNodeBase {
+    private toolTipText:string;
+
+    constructor(instance:ComponentInstance, imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initVl();
+
+    }
+
+    private initVl():void {
+        this.type = "basic-small-node";
+        this.toolTipText = 'Point to point';
+        if(this.componentInstance.capabilities) {
+            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 + ImagesUrl.RESOURCE_ICONS + 'vl.png';
+
+        this.classes = 'vl-node';
+        if (!this.certified) {
+            this.classes = this.classes + ' not-certified';
+        }
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts b/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts
new file mode 100644
index 0000000000..51e3591304
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts
@@ -0,0 +1,51 @@
+/*-
+ * ============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.
+ */
+'use strict';
+import {ImagesUrl} from "../../../../utils/constants";
+import {Module} from "../../../modules/base-module";
+import {CommonNodeBase} from "../base-common-node";
+
+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 = ImagesUrl.MODULE_ICON;
+        this.classes = "module-node";
+
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
new file mode 100644
index 0000000000..6c4f71e722
--- /dev/null
+++ b/catalog-ui/src/app/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=========================================================
+ */
+'use strict';
+
+import {CompositionCiNodeUcpeCp, Module, ModuleNodeBase, CompositionCiNodeVf, CompositionCiNodeVl, CompositionCiNodeCp,
+    NodeUcpe, CompositionCiNodeService, CompositionCiNodeBase, ComponentInstance} from "./../../../models";
+import {ComponentType, ResourceType} from "../../../utils/constants";
+import {ImageCreatorService} from "../../../directives/graphs-v2/image-creator/image-creator.service";
+
+export class NodesFactory {
+
+    constructor(private imageCreator:ImageCreatorService) {
+    }
+
+    public createNode = (instance:ComponentInstance):CompositionCiNodeBase => {
+
+        if (instance.isUcpe()) {
+            return new NodeUcpe(instance, this.imageCreator);
+        }
+        if (instance.originType === ComponentType.SERVICE) {
+            return new CompositionCiNodeService(instance, this.imageCreator);
+        }
+        if (instance.originType === ResourceType.CP) {
+            return new CompositionCiNodeCp(instance, this.imageCreator);
+        }
+        if (instance.originType === ResourceType.VL) {
+            return new CompositionCiNodeVl(instance, this.imageCreator);
+        }
+
+        return new CompositionCiNodeVf(instance, this.imageCreator);
+    };
+
+    public createModuleNode = (module:Module):ModuleNodeBase => {
+
+        return new ModuleNodeBase(module);
+    };
+
+    public createUcpeCpNode = (instance:ComponentInstance):CompositionCiNodeCp => {
+
+        return new CompositionCiNodeUcpeCp(instance, this.imageCreator);
+    }
+}
+
+NodesFactory.$inject = [
+    'ImageCreatorService'
+];
diff --git a/catalog-ui/src/app/models/graph/point.ts b/catalog-ui/src/app/models/graph/point.ts
new file mode 100644
index 0000000000..8fece5af99
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/point.ts
@@ -0,0 +1,20 @@
+/**
+ * Created by obarda on 11/7/2016.
+ */
+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;
+}
diff --git a/catalog-ui/src/app/models/graph/relationMenuObjects.ts b/catalog-ui/src/app/models/graph/relationMenuObjects.ts
new file mode 100644
index 0000000000..aaef0b218c
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/relationMenuObjects.ts
@@ -0,0 +1,131 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+import {MatchReqToReq, MatchBase} from "./match-relation";
+import {CompositionCiNodeBase} from "./nodes/composition-graph-nodes/composition-ci-node-base";
+import {Component} from "../components/component";
+import {ComponentInstance} from "../componentsInstances/componentInstance";
+
+export class RelationMenuDirectiveObj {
+
+    fromNode:CompositionCiNodeBase;
+    toNode:CompositionCiNodeBase;
+    menuPosition:Cy.Position;
+    rightSideLink:GraphLinkMenuSide;
+    leftSideLink:GraphLinkMenuSide;
+    selectionText:string;
+    vlType:string;
+
+    constructor(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, menuPosition:Cy.Position, possibleRelations:Array<MatchBase>) {
+        this.fromNode = fromNode;
+        this.toNode = toNode;
+        // this.modelLinks = modelLinks;
+        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 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: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:ComponentInstance) {
+        this.componentInstance = componentInstance;
+        this.capabilities = {};
+        this.requirements = {};
+    }
+
+    public selectMatchArr(matchArr:Array<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/src/app/models/graph/relationship.ts b/catalog-ui/src/app/models/graph/relationship.ts
new file mode 100644
index 0000000000..6345ab4c04
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/relationship.ts
@@ -0,0 +1,95 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+import {Capability} from "../capability";
+import {Requirement} from "../requirement";
+
+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:Relationship):void => {
+                    this.relationships.push(new 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?: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:Capability, requirement:Requirement)=> {
+        this.capability = capability.name;
+        this.capabilityOwnerId = capability.ownerId;
+        this.capabilityUid = capability.uniqueId;
+        this.relationship = new RelationType(capability.type);
+        this.requirement = requirement.name;
+        this.requirementOwnerId = requirement.ownerId;
+        this.requirementUid = requirement.uniqueId;
+    };
+
+}
diff --git a/catalog-ui/src/app/models/heat-parameters.ts b/catalog-ui/src/app/models/heat-parameters.ts
new file mode 100644
index 0000000000..be5ad92fb0
--- /dev/null
+++ b/catalog-ui/src/app/models/heat-parameters.ts
@@ -0,0 +1,18 @@
+/**
+ * Created by rcohen on 10/31/2016.
+ */
+'use strict';
+
+export class HeatParameterModel {
+    uniqueId:string;
+    name:string;
+    type:string;
+    description:string;
+    currentValue:string;
+    defaultValue:string;
+
+    constructor(parameter?:HeatParameterModel) {
+    }
+
+}
+
diff --git a/catalog-ui/src/app/models/input-property-base.ts b/catalog-ui/src/app/models/input-property-base.ts
new file mode 100644
index 0000000000..dce76d597e
--- /dev/null
+++ b/catalog-ui/src/app/models/input-property-base.ts
@@ -0,0 +1,26 @@
+/**
+ * Created by obarda on 1/22/2017.
+ */
+'use strict';
+import {SchemaPropertyGroupModel} from "./aschema-property";
+
+export interface InputPropertyBase {
+
+    uniqueId:string;
+    name:string;
+    defaultValue:string;
+    description:string;
+    password:boolean;
+    required:boolean;
+    type:string;
+    parentUniqueId:string;
+    schema:SchemaPropertyGroupModel;
+    componentInstanceId:string;
+
+    //instance properties
+    value:string;
+
+    //custom properties
+    isAlreadySelected:boolean;
+}
+
diff --git a/catalog-ui/src/app/models/inputs-and-properties.ts b/catalog-ui/src/app/models/inputs-and-properties.ts
new file mode 100644
index 0000000000..18ff928918
--- /dev/null
+++ b/catalog-ui/src/app/models/inputs-and-properties.ts
@@ -0,0 +1,22 @@
+/**
+ * Created by obarda on 1/11/2017.
+ */
+'use strict';
+import {PropertyModel} from "./properties";
+import {InputModel} from "./inputs";
+
+export class InputsAndProperties {
+
+    inputs:Array<InputModel>;
+    properties:Array<PropertyModel>;
+
+
+    constructor(inputs?:Array<InputModel>, properties?:Array<PropertyModel>) {
+        if (inputs && inputs.length > 0) {
+            this.inputs = inputs;
+        }
+        if (properties && properties.length > 0) {
+            this.properties = properties;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/models/inputs.ts b/catalog-ui/src/app/models/inputs.ts
new file mode 100644
index 0000000000..55e739b452
--- /dev/null
+++ b/catalog-ui/src/app/models/inputs.ts
@@ -0,0 +1,80 @@
+/**
+ * Created by obarda on 8/24/2016.
+ */
+'use strict';
+import {PropertyModel} from "./properties";
+import {InputPropertyBase} from "./input-property-base";
+import {SchemaPropertyGroupModel} from "./aschema-property";
+
+export interface IInputModel extends InputPropertyBase {
+    //server data
+    definition:boolean;
+    value:string;
+    componentInstanceName:string;
+    //costom properties
+    isNew:boolean;
+    properties:Array<PropertyModel>;
+    inputs:Array<InputModel>;
+    filterTerm:string;
+
+}
+export class InputModel implements IInputModel {
+
+    //server data
+    uniqueId:string;
+    name:string;
+    type:string;
+    password:boolean;
+    required:boolean;
+    definition:boolean;
+    parentUniqueId:string;
+    description:string;
+    componentInstanceName:string;
+    componentInstanceId:string;
+    schema:SchemaPropertyGroupModel;
+    defaultValue:string;
+    value:string;
+
+    //costom properties
+    isNew:boolean;
+    isDeleteDisabled:boolean;
+    properties:Array<PropertyModel>;
+    inputs:Array<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.schema = input.schema;
+            this.defaultValue = input.defaultValue;
+            this.value = input.value;
+            this.filterTerm = this.name + ' ' + this.description + ' ' + this.type + ' ' + this.componentInstanceName;
+            this.inputs = input.inputs;
+            this.properties = input.properties;
+        }
+    }
+
+    public toJSON = ():any => {
+        let input = angular.copy(this);
+        input.isNew = undefined;
+        input.isDeleteDisabled = undefined;
+        input.properties = undefined;
+        input.inputs = undefined;
+        input.isAlreadySelected = undefined;
+        input.filterTerm = undefined;
+        return input;
+    };
+}
+
diff --git a/catalog-ui/src/app/models/instance-inputs-properties-map.ts b/catalog-ui/src/app/models/instance-inputs-properties-map.ts
new file mode 100644
index 0000000000..47b99dfffd
--- /dev/null
+++ b/catalog-ui/src/app/models/instance-inputs-properties-map.ts
@@ -0,0 +1,67 @@
+/**
+ * Created by obarda on 9/12/2016.
+ */
+'use strict';
+import {InputPropertyBase} from "./input-property-base";
+import {PropertyModel} from "./properties";
+import {InputModel} from "./inputs";
+
+export class InstancesInputsOrPropertiesMapData {
+    [instanceId:string]:Array<InputPropertyBase>;
+}
+
+export class InstancesInputsPropertiesMap {
+    componentInstanceProperties:InstancesInputsOrPropertiesMapData;
+    componentInstanceInputsMap:InstancesInputsOrPropertiesMapData;
+
+    constructor(componentInstanceInputsMapData:InstancesInputsOrPropertiesMapData, componentInstanceInputsPropertiesMapData:InstancesInputsOrPropertiesMapData) {
+        this.componentInstanceInputsMap = componentInstanceInputsMapData;
+        this.componentInstanceProperties = componentInstanceInputsPropertiesMapData;
+    }
+
+    private removeUnnecessaryData = (properties:Array<InputPropertyBase>, instanceId:string, mapData:any) => {
+        mapData[instanceId] = [];
+        if (properties && properties.length > 0) {
+            _.forEach(properties, (propertyOrInput:InputPropertyBase) => {
+                if (propertyOrInput instanceof PropertyModel) { // Handle Properties
+                    if (propertyOrInput && !propertyOrInput.isAlreadySelected) {
+                        mapData[instanceId].push(propertyOrInput);
+                    }
+                }
+                if (propertyOrInput instanceof InputModel) { // Handle Inputs
+                    if (propertyOrInput && !propertyOrInput.isAlreadySelected) {
+                        mapData[instanceId].push(propertyOrInput);
+                    }
+                }
+            });
+            if (mapData[instanceId].length === 0) {
+                delete mapData[instanceId];
+            }
+        } else {
+            delete mapData[instanceId];
+        }
+    }
+
+    /*
+     In the toJson we remove all inputs and property already selected (The check box selected but they are disable)
+     also we remove empty array in order to prevent Backend error
+     */
+
+    public cleanUnnecessaryDataBeforeSending = ():InstancesInputsPropertiesMap => {
+
+        let map:InstancesInputsPropertiesMap = new InstancesInputsPropertiesMap(new InstancesInputsOrPropertiesMapData(), new InstancesInputsOrPropertiesMapData());
+        angular.copy(this, map);
+
+        //Removing unnecessary data from inputs map
+        _.forEach(map.componentInstanceInputsMap, (inputs:Array<InputModel>, instanceId:string) => {
+            this.removeUnnecessaryData(inputs, instanceId, map.componentInstanceInputsMap);
+        });
+
+        //Removing unnecessary data from properties map
+        _.forEach(map.componentInstanceProperties, (properties:Array<PropertyModel>, instanceId:string) => {
+            this.removeUnnecessaryData(properties, instanceId, map.componentInstanceProperties);
+        });
+
+        return map;
+    };
+}
diff --git a/catalog-ui/src/app/models/left-panel.ts b/catalog-ui/src/app/models/left-panel.ts
new file mode 100644
index 0000000000..759d5f317e
--- /dev/null
+++ b/catalog-ui/src/app/models/left-panel.ts
@@ -0,0 +1,11 @@
+'use strict';
+
+export class LeftPanelModel {
+    numberOfElements:number;
+    sortedCategories:any;
+
+    constructor() {
+        this.numberOfElements = 0;
+        this.sortedCategories = {};
+    }
+}
diff --git a/catalog-ui/src/app/models/member.ts b/catalog-ui/src/app/models/member.ts
new file mode 100644
index 0000000000..a2d9d17aec
--- /dev/null
+++ b/catalog-ui/src/app/models/member.ts
@@ -0,0 +1,16 @@
+/**
+ * Created by obarda on 8/2/2016.
+ */
+'use strict';
+
+export class Members {
+
+    [index:string]:string;
+
+    constructor(members?:Members) {
+        _.forEach(members, (memberId:string, index) => {
+            this[index] = memberId;
+        });
+    }
+}
+
diff --git a/catalog-ui/src/app/models/modules/base-module.ts b/catalog-ui/src/app/models/modules/base-module.ts
new file mode 100644
index 0000000000..4a5f282468
--- /dev/null
+++ b/catalog-ui/src/app/models/modules/base-module.ts
@@ -0,0 +1,95 @@
+/**
+ * Created by obarda on 6/30/2016.
+ */
+/**
+ * Created by obarda on 2/4/2016.
+ */
+'use strict';
+import {PropertyModel} from "../properties";
+import {ArtifactModel} from "../artifacts";
+import {CommonUtils} from "../../utils/common-utils";
+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<ArtifactModel>;
+    public artifactsUuid:Array<string>;
+    public properties:Array<PropertyModel>;
+    public members:Array<string>;
+    public customizationUUID:string;
+    public groupInstanceUniqueId:string; // This will only have a value if this is a group instance
+
+    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 = CommonUtils.initProperties(module.properties);
+            this.members = module.members;
+            this.customizationUUID = module.customizationUUID;
+            this.groupInstanceUniqueId = module.groupInstanceUniqueId;
+            this.name = this.name.replace(/:/g, '..');
+
+        }
+    }
+}
+
+export class DisplayModule extends Module {
+
+    isBase:string;
+    artifacts:Array<ArtifactModel>;
+
+    //custom properties
+    public vfInstanceName:string;
+    public heatName:string;
+    public moduleName:string;
+    public customizationUUID:string;
+
+
+    constructor(displayModule?:DisplayModule) {
+        super(displayModule);
+
+        this.isBase = displayModule.isBase;
+        this.customizationUUID = displayModule.customizationUUID;
+        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<ArtifactModel>):void => {
+        this.artifacts = new Array<ArtifactModel>();
+        _.forEach(artifacts, (artifact:ArtifactModel) => {
+            this.artifacts.push(new 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/src/app/models/properties-inputs/derived-fe-property.ts b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
new file mode 100644
index 0000000000..1d79353453
--- /dev/null
+++ b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
@@ -0,0 +1,72 @@
+import { SchemaPropertyGroupModel, SchemaProperty } from '../aschema-property';
+import { PROPERTY_DATA, PROPERTY_TYPES} from 'app/utils';
+import { PropertyBEModel } from '../../models';
+
+export enum DerivedPropertyType {
+    SIMPLE,
+    LIST,
+    MAP,
+    COMPLEX //other datatype, list of non-simple, or map of non-simple
+}
+
+export class DerivedFEProperty extends PropertyBEModel {
+    parentName: string;
+    propertiesName: string; //"network_assignments#ipv4_subnet#use_ipv4 =  parentPath + name
+    derivedDataType: DerivedPropertyType;
+    isDeclared: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isChildOfListOrMap: boolean;
+
+    constructor(property: PropertyBEModel, parentName?: string)
+    constructor(name: string, parentName: string, type: string, value: string, isChildOfListOrMap?:boolean, schema?: SchemaPropertyGroupModel);
+    constructor(nameOrPropertyObj?: string | PropertyBEModel, parentName?: string, type?: string, value?: string, isChildOfListOrMap?: boolean, schema?: SchemaPropertyGroupModel) {
+
+        super(typeof nameOrPropertyObj === 'string' ? null : nameOrPropertyObj);
+
+        if (typeof nameOrPropertyObj !== 'string') { //constructor #1
+            this.parentName = parentName ? parentName : null;
+            this.propertiesName = (parentName) ? parentName + '#' + nameOrPropertyObj.name : nameOrPropertyObj.name;
+        } else { //constructor #2
+            this.name = nameOrPropertyObj;
+            this.type = type;
+            this.parentName = parentName;
+            this.propertiesName = parentName + '#' + nameOrPropertyObj;
+            this.value = value;
+            if (schema) {
+                this.schema = new SchemaPropertyGroupModel(new SchemaProperty(schema.property));
+            }
+        }
+        this.derivedDataType = this.getDerivedPropertyType();
+        this.isChildOfListOrMap = (isChildOfListOrMap) ? isChildOfListOrMap : false;
+    }
+   
+    public getDerivedPropertyType = () => {
+        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1) {
+            return DerivedPropertyType.SIMPLE;
+        } else if (this.type == PROPERTY_TYPES.LIST) {
+            return DerivedPropertyType.LIST;
+        } else if (this.type == PROPERTY_TYPES.MAP) {
+            return DerivedPropertyType.MAP;
+        } else {
+            return DerivedPropertyType.COMPLEX;
+        }
+   } 
+    
+}
+export class DerivedFEPropertyMap {
+    [parentPath: string]: Array<DerivedFEProperty>;
+}
+
+
+
+// isDataType: boolean;
+
+
+// canAdd: boolean;
+// canCollapse: boolean;
+// canBeDeclared: boolean;
+
+// derivedValue: string;
+// derivedValueType: string;
+// propertiesName: string; 
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts
new file mode 100644
index 0000000000..1261df3d6d
--- /dev/null
+++ b/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts
@@ -0,0 +1,32 @@
+import { SchemaPropertyGroupModel, SchemaProperty } from "../aschema-property";
+import { PropertyBEModel } from "../../models";
+import {PROPERTY_DATA} from "../../utils/constants";
+
+export class InputFEModel extends PropertyBEModel {
+    isSimpleType: boolean;
+    isDataType: boolean;
+    instanceName: string;
+    propertyName: string;
+
+
+    constructor(input?: PropertyBEModel) {
+        super(input);
+        if (input) {
+            this.isSimpleType = PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1;
+            this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) == -1;
+            let propNameIndex:number = this.name.indexOf('_');
+            this.instanceName = this.name.substring(0, propNameIndex);
+            if (input.inputPath) {
+                this.propertyName = input.inputPath.substring(0, input.inputPath.indexOf('#'))
+            } else {
+                this.propertyName = this.name.substring(propNameIndex + 1);
+            }
+        }
+    }
+
+
+
+    public toJSON = (): any => {
+    };
+
+}
diff --git a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
new file mode 100644
index 0000000000..a5279d0668
--- /dev/null
+++ b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
@@ -0,0 +1,84 @@
+import { SchemaPropertyGroupModel, SchemaProperty } from "../aschema-property";
+
+export class PropertyBEModel {
+
+    defaultValue: string;
+    description: string;
+    fromDerived: boolean;
+    name: string;
+    parentUniqueId: string;
+    password: boolean;
+    required: boolean;
+    schema: SchemaPropertyGroupModel;
+    type: string;
+    uniqueId: string;
+    value: string;
+    definition: boolean;
+    inputPath: string;
+    propertiesName: string;
+    input: PropertyBEModel;
+
+    constructor(property?: PropertyBEModel, childProperty?:PropertyBEModel) {
+        if (property) {
+            this.defaultValue = property.defaultValue;
+            this.description = property.description;
+            this.fromDerived = property.fromDerived;
+            this.name = property.name;
+            this.parentUniqueId = property.parentUniqueId;
+            this.password = property.password;
+            this.required = property.required;
+            this.schema = property.schema;
+            this.type = property.type;
+            this.uniqueId = property.uniqueId;
+            this.value = property.value ? property.value : property.defaultValue;
+            this.definition = property.definition;
+            if (property.inputPath) {
+                this.inputPath = property.inputPath;
+            }
+        }
+        if (childProperty) {
+            this.input = childProperty;
+            this.propertiesName = childProperty.propertiesName;
+        }
+
+        if (!this.schema || !this.schema.property) {
+            this.schema = new SchemaPropertyGroupModel(new SchemaProperty());
+        } else { //forcing creating new object, so editing different one than the object in the table
+            this.schema = new SchemaPropertyGroupModel(new SchemaProperty(this.schema.property));
+        }
+    }
+
+ 
+
+    public toJSON = (): any => {
+        let temp = angular.copy(this);
+        temp.value = temp.value === "{}" || temp.value === "[]" ? undefined : temp.value;
+        temp.defaultValue = temp.defaultValue === "{}" || temp.defaultValue === "[]" ? undefined : temp.defaultValue;
+        return temp;
+    };
+
+}
+
+
+// EXTRAS FROM CONSTRUCTOR:
+//         this.source = property.source;
+//         this.valueUniqueUid = property.valueUniqueUid;
+//         this.path = property.path;
+//         this.rules = property.rules;
+//         this.resourceInstanceUniqueId = property.resourceInstanceUniqueId;
+//         this.readonly = property.readonly;
+//         this.simpleType = property.simpleType;
+//         this.componentInstanceId = property.componentInstanceId;
+//         this.parentValue = property.parentValue;
+//NEW PROPERTIES MAY NEED:
+// export class PropertyFEModel extends PropertyBEModel {
+//     componentInstanceId: string;
+//     isAlreadySelected: boolean;
+//     filterTerm: string;
+// }
+//FOR INPUTS, BE ALSO INCLUDES:
+//export class InputFEModel extends PropertyBEModel {
+//     hidden: boolean;
+//     label: string;
+//     immutable: boolean;
+// }
diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-map.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-map.ts
new file mode 100644
index 0000000000..3b267460b1
--- /dev/null
+++ b/catalog-ui/src/app/models/properties-inputs/property-fe-map.ts
@@ -0,0 +1,21 @@
+'use strict';
+import { PropertyBEModel, PropertyFEModel } from "../../models";
+
+export class InstanceBePropertiesMap {
+    [instanceId: string]: Array<PropertyBEModel>;
+}
+
+export class InstanceFePropertiesMap {
+    [instanceId: string]: Array<PropertyFEModel>;
+}
+
+export class InstancePropertiesAPIMap {
+    componentInstanceProperties: InstanceBePropertiesMap;
+    componentInstanceInputsMap: InstanceBePropertiesMap;
+
+    constructor(inputsMapData: InstanceBePropertiesMap, propertiesMapData: InstanceBePropertiesMap) {
+        this.componentInstanceInputsMap = inputsMapData ? inputsMapData: new InstanceBePropertiesMap();
+        this.componentInstanceProperties = propertiesMapData ? propertiesMapData: new InstanceBePropertiesMap();
+    }
+
+}
diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
new file mode 100644
index 0000000000..29f2c79225
--- /dev/null
+++ b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
@@ -0,0 +1,132 @@
+import {SchemaPropertyGroupModel, SchemaProperty} from '../aschema-property';
+import { PROPERTY_DATA } from 'app/utils';
+import { PropertyBEModel, DerivedFEPropertyMap, DerivedFEProperty } from '../../models';
+
+
+export class PropertyFEModel extends PropertyBEModel {
+
+    //START - TO REMOVE:
+    treeNodeId: string;
+    parent: PropertyFEModel;
+
+    childrenProperties: Array<PropertyFEModel>;
+    isAllChildrenLevelsCalculated: boolean;
+    uniqueId: string;
+    valueObjectRef: any;
+    //END - TO REMOVE:
+
+    expandedChildPropertyId: string;
+    flattenedChildren:  Array<DerivedFEProperty>; //[parentPath] : Array<DerivedFEProp>
+    isDataType: boolean; //aka- isComplexType. (Type is NOT: simple, list, or map)
+    isDeclared: boolean;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isSimpleType: boolean;
+
+    private _derivedFromSimpleTypeName:string;
+    get derivedFromSimpleTypeName():string {
+        return this._derivedFromSimpleTypeName;
+    }
+    set derivedFromSimpleTypeName(derivedFromSimpleTypeName:string) {
+        this._derivedFromSimpleTypeName = derivedFromSimpleTypeName;
+    }
+
+    constructor(property?: PropertyBEModel);
+    constructor(name: string, type: string, treeNodeId: string, parent: PropertyFEModel, valueObjectRef: any, schema?: SchemaPropertyGroupModel);
+    constructor(nameOrPropertyObj?: string | PropertyBEModel, type?: string, treeNodeId?: string, parent?: PropertyFEModel, valueObjectRef?: any, schema?: SchemaPropertyGroupModel) {
+
+        super(typeof nameOrPropertyObj === 'string' ? null : nameOrPropertyObj);
+
+        if (typeof nameOrPropertyObj === 'string') {
+            this.name = nameOrPropertyObj;
+            this.type = type;
+            this.treeNodeId = treeNodeId;
+            this.parent = parent;
+            this.valueObjectRef = valueObjectRef;
+            this.value = this.value || this.defaultValue;
+            if(schema){
+                this.schema = new SchemaPropertyGroupModel(new SchemaProperty(schema.property));
+            }
+        }
+
+        this.isSimpleType = PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1;
+        this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) == -1;
+        this.setNonDeclared();
+    }
+
+    public convertChildToInput = (childName: string): void => {
+        //childName: "mac_count_required"
+        let childJson = this.flattenedChildren[childName].map((child) => {
+
+        });
+    };
+
+    public getChildJsonRecursive = (child: string, value?: string): void => {
+        //TODO: use array.map for the below
+       /* value += "{" + this.flattenedChildren[child].name + ":";
+        if (this.flattenedChildren[child].valueType == 'simple') {
+            value += this.flattenedChildren[child].value + '}';
+            return value;
+        } else {
+            this.flattenedChildren[child].forEach(grandChild => {
+                if (this.flattenedChildren[grandChild].valueType == 'simple') {
+                    return "{" + this.flattenedChildren[grandChild].name + ':' + this.flattenedChildren[child].value.toString() + "}";
+                } else {
+                    return  this.getChildJsonRecursive(grandChild + '#' + this.flattenedChildren[child].name);
+                }
+            });
+        }
+
+        return "{" + this.flattenedChildren[child].name + this.flattenedChildren[child].value.toString() + "}";
+*/
+
+    };
+
+    public setNonDeclared = (childPath?: string): void => {
+        if (!childPath) { //declaring a child prop
+            this.isDeclared = false;
+        } else {
+            let childProp: DerivedFEProperty = this.flattenedChildren.find(child => child.propertiesName == childPath);
+            childProp.isDeclared = false;
+        }
+    }
+
+    public setAsDeclared = (childNameToDeclare?:string): void => {
+        if (!childNameToDeclare) { //declaring a child prop
+            this.isSelected = false;
+            this.isDeclared = true;
+        } else {
+            let childProp: DerivedFEProperty = this.flattenedChildren.find(child => child.propertiesName == childNameToDeclare);
+            childProp.isSelected = false;
+            childProp.isDeclared = true;
+        }
+    }
+
+
+
+    //For expand-collapse functionality
+    public updateExpandedChildPropertyId = (childPropertyId: string): void => {
+        if (childPropertyId.lastIndexOf('#') > -1) {
+            this.expandedChildPropertyId = (this.expandedChildPropertyId == childPropertyId) ? (childPropertyId.substring(0, childPropertyId.lastIndexOf('#'))) : childPropertyId;
+        } else {
+            this.expandedChildPropertyId = this.name;
+        }
+        //console.log("expandedChild is now " + this.expandedChildPropertyId);
+    }
+
+    public convertToServerObject: Function = (): any => { //TODO: Idan, Rachel, Nechama: Decide what we need to do here
+        // let serverObject = {};
+        // let mapData = {
+        //     'type': this.type,
+        //     'required': this.required || false,
+        //     'defaultValue': this.defaultValue != '' && this.defaultValue != '[]' && this.defaultValue != '{}' ? this.defaultValue : null,
+        //     'description': this.description,
+        //     'isPassword': this.password || false,
+        //     'schema': this.schema,
+        //     'name': this.name
+        // };
+        // serverObject[this.name] = mapData;
+
+        //return JSON.stringify(serverObject);
+    };
+}
diff --git a/catalog-ui/src/app/models/properties.ts b/catalog-ui/src/app/models/properties.ts
new file mode 100644
index 0000000000..357dac2e7d
--- /dev/null
+++ b/catalog-ui/src/app/models/properties.ts
@@ -0,0 +1,141 @@
+'use strict';
+import {SchemaPropertyGroupModel, SchemaProperty} from "./aschema-property";
+import {InputPropertyBase} from "./input-property-base";
+
+export class PropertiesGroup {
+    constructor(propertiesObj?:PropertiesGroup) {
+        _.forEach(propertiesObj, (properties:Array<PropertyModel>, instance) => {
+            this[instance] = [];
+            _.forEach(properties, (property:PropertyModel):void => {
+                property.resourceInstanceUniqueId = instance;
+                property.readonly = true;
+                this[instance].push(new PropertyModel(property));
+            });
+        });
+    }
+}
+
+export interface IPropertyModel extends InputPropertyBase {
+
+    //server data
+    constraints:Array<Object>;
+    source:string;
+
+    //instance properties
+    valueUniqueUid:string;
+    path:Array<string>;
+    rules:Array<Object>;
+    propertiesName:string;
+    input:any;
+
+    //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:SchemaPropertyGroupModel;
+    componentInstanceId:string;
+    parentValue:string;
+
+    //instance properties
+    value:string;
+    valueUniqueUid:string;
+    path:Array<string>;
+    rules:Array<Object>;
+    propertiesName:string;
+    input:any;
+
+    //custom properties
+    resourceInstanceUniqueId:string;
+    readonly:boolean;
+    simpleType:string;
+    filterTerm:string;
+    isAlreadySelected:boolean;
+    addOn:string;
+
+
+    constructor(property?: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;
+            this.componentInstanceId = property.componentInstanceId;
+            this.parentValue = property.parentValue;
+        }
+
+        if (!this.schema || !this.schema.property) {
+            this.schema = new SchemaPropertyGroupModel(new SchemaProperty());
+        } else {
+            //forcing creating new object, so editing different one than the object in the table
+            this.schema = new SchemaPropertyGroupModel(new SchemaProperty(this.schema.property));
+        }
+        if (property && property.uniqueId) {
+            this.filterTerm = this.name + " " + (this.description || "") + " " + this.type.replace("org.openecomp.datatypes.heat.", "");
+            if (this.schema.property && this.schema.property.type) {
+                this.filterTerm += " " + this.schema.property.type.replace("org.openecomp.datatypes.heat.", "");
+            }
+        }
+    }
+
+    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 toJSON = ():any => {
+        // if(!this.resourceInstanceUniqueId){
+        //     this.value = undefined;
+        // }
+        let temp = angular.copy(this);
+        temp.readonly = undefined;
+        temp.resourceInstanceUniqueId = undefined;
+        temp.simpleType = undefined;
+        temp.value = temp.value === "{}" || temp.value === "[]" ? undefined : temp.value;
+        temp.defaultValue = temp.defaultValue === "{}" || temp.defaultValue === "[]" ? undefined : temp.defaultValue;
+        temp.rules = null; //don't send rules to server until feature is fully supported
+        temp.isAlreadySelected = undefined;
+        temp.addOn = undefined;
+        return temp;
+    };
+}
diff --git a/catalog-ui/src/app/models/property-fe-model.ts b/catalog-ui/src/app/models/property-fe-model.ts
new file mode 100644
index 0000000000..f83d6d6b51
--- /dev/null
+++ b/catalog-ui/src/app/models/property-fe-model.ts
@@ -0,0 +1,78 @@
+import {SchemaPropertyGroupModel, SchemaProperty} from './aschema-property';
+import { PROPERTY_DATA } from 'app/utils';
+import { FilterPropertiesAssignmentData, PropertyBEModel } from 'app/models';
+
+export class PropertyFEModel extends PropertyBEModel {
+    public static filterData:FilterPropertiesAssignmentData;
+    childrenProperties: Array<PropertyFEModel>;
+    expandedChildPropertyId: string;
+    isAllChildrenLevelsCalculated: boolean;
+    isDataType: boolean;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isSimpleType: boolean;
+    parent: PropertyFEModel;
+    treeNodeId: string;
+    valueObjectRef: any;
+    private _derivedFromSimpleTypeName:string;
+    get derivedFromSimpleTypeName():string {
+        return this._derivedFromSimpleTypeName;
+    }
+    set derivedFromSimpleTypeName(derivedFromSimpleTypeName:string) {
+        this._derivedFromSimpleTypeName = derivedFromSimpleTypeName;
+    }
+
+    constructor(property?: PropertyBEModel);
+    constructor(name: string, type: string, treeNodeId: string, parent: PropertyFEModel, valueObjectRef: any, schema?: SchemaPropertyGroupModel);
+    constructor(nameOrPropertyObj?: string | PropertyBEModel, type?: string, treeNodeId?: string, parent?: PropertyFEModel, valueObjectRef?: any, schema?: SchemaPropertyGroupModel) {
+
+        super(typeof nameOrPropertyObj === 'string' ? null : nameOrPropertyObj);
+
+        if (typeof nameOrPropertyObj === 'string') {
+            this.name = nameOrPropertyObj;
+            this.type = type;
+            this.treeNodeId = treeNodeId;
+            this.parent = parent;
+            this.valueObjectRef = valueObjectRef;
+            this.value = this.value || this.defaultValue;
+            if(schema){
+                this.schema = new SchemaPropertyGroupModel(new SchemaProperty(schema.property));
+            }
+        }
+        this.isSimpleType = PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1;
+        this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) == -1;
+        this.setNonDeclared();
+    }
+
+
+    public setNonDeclared = (): void => {
+        this.isSelected = false;
+        this.isDisabled = false;
+    }
+
+    public setAsDeclared = (): void => {
+        this.isSelected = true;
+        this.isDisabled = true;
+    }
+
+    //For expand-collapse functionality
+    public updateExpandedChildPropertyId = (childPropertyId: string): void => {
+        this.expandedChildPropertyId = (this.expandedChildPropertyId == childPropertyId) ? '' : childPropertyId;
+    }
+
+    public convertToServerObject: Function = (): any => { //TODO: Idan, Rachel, Nechama: Decide what we need to do here
+        // let serverObject = {};
+        // let mapData = {
+        //     'type': this.type,
+        //     'required': this.required || false,
+        //     'defaultValue': this.defaultValue != '' && this.defaultValue != '[]' && this.defaultValue != '{}' ? this.defaultValue : null,
+        //     'description': this.description,
+        //     'isPassword': this.password || false,
+        //     'schema': this.schema,
+        //     'name': this.name
+        // };
+        // serverObject[this.name] = mapData;
+
+        //return JSON.stringify(serverObject);
+    };
+}
diff --git a/catalog-ui/src/app/models/requirement.ts b/catalog-ui/src/app/models/requirement.ts
new file mode 100644
index 0000000000..e62c809ec9
--- /dev/null
+++ b/catalog-ui/src/app/models/requirement.ts
@@ -0,0 +1,71 @@
+/**
+ * Created by obarda on 4/20/2016.
+ */
+'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 {
+    [key: string]: Array<Requirement>;
+    constructor(requirementGroupObj?:RequirementsGroup) {
+        _.forEach(requirementGroupObj, (requirementsArrayObj:Array<Requirement>, instance) => {
+            this[instance] = [];
+            _.forEach(requirementsArrayObj, (requirement:Requirement):void => {
+                this[instance].push(new 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/src/app/models/schema-attribute.ts b/catalog-ui/src/app/models/schema-attribute.ts
new file mode 100644
index 0000000000..3c48aa3fa2
--- /dev/null
+++ b/catalog-ui/src/app/models/schema-attribute.ts
@@ -0,0 +1,16 @@
+'use strict';
+import {SchemaProperty} from "./aschema-property";
+
+export class SchemaAttributeGroupModel {
+    property:SchemaAttribute;
+
+    constructor(schemaAttribute?:SchemaAttribute) {
+        this.property = schemaAttribute;
+    }
+}
+
+export class SchemaAttribute extends SchemaProperty {
+
+}
+
+
diff --git a/catalog-ui/src/app/models/tab.ts b/catalog-ui/src/app/models/tab.ts
new file mode 100644
index 0000000000..a7ce509ce0
--- /dev/null
+++ b/catalog-ui/src/app/models/tab.ts
@@ -0,0 +1,27 @@
+/**
+ * Created by obarda on 7/31/2016.
+ */
+'use strict';
+
+export class Tab {
+
+    public templateUrl:string;
+    public controller:string;
+    public data:any;
+    public icon:string;
+    public name:string;
+    public isViewMode:boolean;
+
+    constructor(templateUrl:string, controller:string, name:string, isViewMode:boolean, data?:any, icon?:string) {
+
+        this.templateUrl = templateUrl;
+        this.controller = controller;
+        this.icon = icon;
+        this.data = data;
+        this.name = name;
+        this.isViewMode = isViewMode;
+    }
+}
+
+
+
diff --git a/catalog-ui/src/app/models/tooltip-data.ts b/catalog-ui/src/app/models/tooltip-data.ts
new file mode 100644
index 0000000000..902a20e926
--- /dev/null
+++ b/catalog-ui/src/app/models/tooltip-data.ts
@@ -0,0 +1,6 @@
+'use strict';
+
+export class TooltipData {
+}
+
+
diff --git a/catalog-ui/src/app/models/user.ts b/catalog-ui/src/app/models/user.ts
new file mode 100644
index 0000000000..8ef800acb7
--- /dev/null
+++ b/catalog-ui/src/app/models/user.ts
@@ -0,0 +1,96 @@
+'use strict';
+import {IUserResource} from "../services/user-resource-service";
+
+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:IUserResource;
+    getRole():UserRole;
+    getRoleToView():string;
+    getName():string;
+    getFirstName():string;
+    getLastName():string;
+}
+
+export class User implements IUser {
+
+    constructor(public resource: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/src/app/models/validate.ts b/catalog-ui/src/app/models/validate.ts
new file mode 100644
index 0000000000..59638ab4dd
--- /dev/null
+++ b/catalog-ui/src/app/models/validate.ts
@@ -0,0 +1,7 @@
+'use strict';
+
+export interface IValidate {
+    isValid:boolean;
+}
+
+
diff --git a/catalog-ui/src/app/models/validation-config.ts b/catalog-ui/src/app/models/validation-config.ts
new file mode 100644
index 0000000000..3524addf86
--- /dev/null
+++ b/catalog-ui/src/app/models/validation-config.ts
@@ -0,0 +1,20 @@
+class PropertyValue {
+    min: number;
+    max: number;
+}
+
+class validationPatterns {
+    string: string;
+    comment:string;
+    integer: string;
+}
+
+export class Validations {
+    propertyValue: PropertyValue;
+    validationPatterns: validationPatterns;
+}
+
+export class ValidationConfiguration {
+    static validation: Validations;
+
+}