Catalog alignment

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

47 files changed, 1041 insertions, 1217 deletions

diff --git a/catalog-ui/src/app/models/activity.ts b/catalog-ui/src/app/models/activity.ts
index 5d37e0f608..768ef0ae85 100644
--- a/catalog-ui/src/app/models/activity.ts
+++ b/catalog-ui/src/app/models/activity.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -18,30 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-/**
- * 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;
-    };
-
+export interface Activity {
+    TIMESTAMP: string;
+    ACTION: string;
+    MODIFIER: string;
+    STATUS: string;
+    COMMENT: string;
 }
-
-
diff --git a/catalog-ui/src/app/models/app-config.ts b/catalog-ui/src/app/models/app-config.ts
index 4754cbaa01..a31c31f4cc 100644
--- a/catalog-ui/src/app/models/app-config.ts
+++ b/catalog-ui/src/app/models/app-config.ts
@@ -3,7 +3,6 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * Modifications Copyright (C) 2019 Nokia. 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.
@@ -20,225 +19,214 @@
  */
 
 'use strict';
+// tslint:disable-next-line:interface-name
 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;
+    baseUrl: string;
+
+    GET_SDC_Setup_Data: string;
+    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_plugins_configuration:string;
-    GET_plugin_online_state:string;
-    GET_service:string;
-    GET_ecomp_menu_items: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;
-    no_proxy_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;
-    POST_GAB_Search:string;
-    kibana:string;
-    services_api_root:string;
-}
-
+    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_plugins_configuration: string;
+    GET_plugin_online_state: string;
+    GET_service: string;
+    GET_ecomp_menu_items: 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_UNDOCHECKOUT: string;
+    root: string;
+    no_proxy_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;
+    POST_GAB_Search: string;
+    kibana: string;
+    services_api_root: string;
+    uicache_root: string;
+    GET_uicache_catalog: string;
+    GET_uicache_left_palette: string;
+}
+
+// tslint:disable-next-line:interface-name
 export interface ILogConfig {
-    minLogLevel:string;
-    prefix:string;
+    minLogLevel: string;
+    prefix: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface ICookie {
-    junctionName:string;
-    prefix:string;
-    userIdSuffix:string;
-    userFirstName:string;
-    userLastName:string;
-    userEmail:string;
-}
-export interface IUserTypes {
-    admin:any;
-    designer:any;
-    tester:any;
+    junctionName: string;
+    prefix: string;
+    userIdSuffix: string;
+    userFirstName: string;
+    userLastName: string;
+    userEmail: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfigStatuses {
-    inDesign:IConfigStatus;
-    readyForCertification:IConfigStatus;
-    inCertification:IConfigStatus;
-    certified:IConfigStatus;
-    distributed:IConfigStatus;
+    inDesign: IConfigStatus;
+    certified: IConfigStatus;
+    distributed: IConfigStatus;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfigStatus {
-    name:string;
-    values:Array<string>;
+    name: string;
+    values: string[];
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfigRoles {
-    ADMIN:IConfigRole;
-    DESIGNER:IConfigRole;
-    TESTER:IConfigRole;
-    OPS:IConfigRole;
-    GOVERNOR:IConfigRole;
+    ADMIN: IConfigRole;
+    DESIGNER: IConfigRole;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfigRole {
-    changeLifecycleStateButtons:any;
-}
-
-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>;
+    changeLifecycleStateButtons: any;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfirmationMessage {
-    showComment:boolean;
-    title:string;
-    message:string;
+    showComment: boolean;
+    title: string;
+    message: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IConfirmationMessages {
-    checkin:IConfirmationMessage;
-    checkout:IConfirmationMessage;
-    certify:IConfirmationMessage;
-    failCertification:IConfirmationMessage;
-    certificationRequest:IConfirmationMessage;
-    approve:IConfirmationMessage;
-    reject:IConfirmationMessage;
+    checkin: IConfirmationMessage;
+    checkout: IConfirmationMessage;
+    certify: IConfirmationMessage;
+    failCertification: IConfirmationMessage;
+    certificationRequest: IConfirmationMessage;
+    approve: IConfirmationMessage;
+    reject: IConfirmationMessage;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IAlertMessage {
-    title:string;
-    message:string;
+    title: string;
+    message: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IAlertMessages {
-    deleteInstance:IAlertMessage;
-    exitWithoutSaving:IConfirmationMessage;
+    deleteInstance: IAlertMessage;
+    exitWithoutSaving: IConfirmationMessage;
+    okButton: string;
 }
 
 class ConfigMenuItem {
-    text:string;
-    action:string;
-    url:string;
-    disable:boolean = false;
+    text: string;
+    action: string;
+    url: string;
+    disable = false;
 }
 
+// tslint:disable-next-line:interface-name
 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;
-}
-
+    environment: string;
+    api: IApi;
+    hostedApplications: IHostedApplication[];
+    resourceTypesFilter: IResourceTypesFilter;
+    logConfig: ILogConfig;
+    cookie: ICookie;
+    imagesPath: string;
+    toscaFileExtension: string;
+    csarFileExtension: string;
+    testers: ITester[];
+    tutorial: any;
+    roles: string[];
+    cpEndPointInstances: string[];
+    openSource: boolean;
+    showOutlook: boolean;
+    validationConfigPath: string;
+}
+
+// tslint:disable-next-line:interface-name
 export interface IResourceTypesFilter {
-    resource:Array<string>;
+    resource: string[];
 }
 
+// tslint:disable-next-line:interface-name
 export interface IHostedApplication {
-    moduleName:string;
-    navTitle:string;
-    defaultState:string;
-    exists?:boolean;
-    state:IHostedApplicationState;
+    moduleName: string;
+    navTitle: string;
+    defaultState: string;
+    exists?: boolean;
+    state: IHostedApplicationState;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IHostedApplicationState {
-    name:string;
-    url:string;
-    relativeHtmlPath:string;
-    controllerName:string;
+    name: string;
+    url: string;
+    relativeHtmlPath: string;
+    controllerName: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface ITester {
-    email:string;
-}
-
-export interface IComponentType {
-    RESOURCE:any;
-    SERVICE:any;
+    email: string;
 }
 
+// tslint:disable-next-line:interface-name
 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;
+    roles: IConfigRoles;
+    confirmationMessages: IConfirmationMessages;
+    alertMessages: IAlertMessages;
+    statuses: IConfigStatuses;
+    catalogMenuItem: any;
+    categoriesDictionary: any;
+    // tslint:disable-next-line:ban-types
+    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
index 27c0dd6c49..7b93470de3 100644
--- a/catalog-ui/src/app/models/artifacts.ts
+++ b/catalog-ui/src/app/models/artifacts.ts
@@ -69,11 +69,13 @@ export class ArtifactModel {
     apiUrl:string;
     heatParameters:Array<HeatParameterModel>;
     generatedFromId:string;
+    isFromCsar: boolean;
 
     //custom properties
     selected:boolean;
     originalDescription:string;
     envArtifact:ArtifactModel;
+    allowDeleteAndUpdate: boolean;
 
     constructor(artifact?:ArtifactModel) {
         if (artifact) {
@@ -97,10 +99,11 @@ export class ArtifactModel {
             this["Content-MD5"] = artifact["Content-MD5"];
             this.artifactChecksum = artifact.artifactChecksum;
             this.apiUrl = artifact.apiUrl;
-            this.heatParameters = _.sortBy(artifact.heatParameters, 'name');
+            this.heatParameters = _.sortBy(_.cloneDeep(artifact.heatParameters), 'name');
             this.generatedFromId = artifact.generatedFromId;
             this.selected = artifact.selected ? artifact.selected : false;
             this.originalDescription = artifact.description;
+            this.isFromCsar = artifact.isFromCsar;
         }
     }
 
@@ -120,6 +123,7 @@ export class ArtifactModel {
         this.selected = undefined;
         this.originalDescription = undefined;
         this.envArtifact = undefined;
+        this.allowDeleteAndUpdate = undefined;
         return this;
     };
 }
diff --git a/catalog-ui/src/app/models/aschema-property.ts b/catalog-ui/src/app/models/aschema-property.ts
index 5e99b33193..b0d22d7f91 100644
--- a/catalog-ui/src/app/models/aschema-property.ts
+++ b/catalog-ui/src/app/models/aschema-property.ts
@@ -22,36 +22,36 @@
  * Created by osonsino on 16/05/2016.
  */
 'use strict';
-import { PROPERTY_DATA } from "app/utils";
+import { PROPERTY_DATA } from 'app/utils/constants';
 
 export class SchemaPropertyGroupModel {
-    property:SchemaProperty;
+    property: SchemaProperty;
 
-    constructor(schemaProperty?:SchemaProperty) {
+    constructor(schemaProperty?: SchemaProperty) {
         this.property = schemaProperty;
     }
 }
 
 export class SchemaProperty {
 
-    type:string;
-    required:boolean;
-    definition:boolean;
-    description:string;
-    password:boolean;
-    //custom properties
-    simpleType:string;
+    type: string;
+    required: boolean;
+    definition: boolean;
+    description: string;
+    password: boolean;
+    // custom properties
+    simpleType: string;
     isSimpleType: boolean;
     isDataType: boolean;
-    private _derivedFromSimpleTypeName:string;
-    get derivedFromSimpleTypeName():string {
+    private _derivedFromSimpleTypeName: string;
+    get derivedFromSimpleTypeName(): string {
         return this._derivedFromSimpleTypeName;
     }
-    set derivedFromSimpleTypeName(derivedFromSimpleTypeName:string) {
+    set derivedFromSimpleTypeName(derivedFromSimpleTypeName: string) {
         this._derivedFromSimpleTypeName = derivedFromSimpleTypeName;
     }
 
-    constructor(schemaProperty?:SchemaProperty) {
+    constructor(schemaProperty?: SchemaProperty) {
         if (schemaProperty) {
             this.type = schemaProperty.type;
             this.required = schemaProperty.required;
@@ -60,17 +60,15 @@ export class SchemaProperty {
             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;
+            this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) === -1;
         }
     }
 
-    public toJSON = ():any => {
+    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
index 9e5828ae69..80af540ef3 100644
--- a/catalog-ui/src/app/models/attributes.ts
+++ b/catalog-ui/src/app/models/attributes.ts
@@ -88,6 +88,9 @@ export class AttributeModel implements IAttributeModel {
             this.resourceInstanceUniqueId = attribute.resourceInstanceUniqueId;
             this.readonly = attribute.readonly;
             this.valueUniqueUid = attribute.valueUniqueUid;
+        } else {
+            this.defaultValue = '';
+            this.hidden = false;
         }
 
         if (!this.schema || !this.schema.property) {
@@ -100,7 +103,7 @@ export class AttributeModel implements IAttributeModel {
         this.convertValueToView();
     }
 
-    public convertToServerObject:Function = ():string => {
+    public convertToServerObject():string {
         if (this.defaultValue && this.type === 'map') {
             this.defaultValue = '{' + this.defaultValue + '}';
         }
diff --git a/catalog-ui/src/app/models/capability.ts b/catalog-ui/src/app/models/capability.ts
index 4a4f821e0c..f365dc4940 100644
--- a/catalog-ui/src/app/models/capability.ts
+++ b/catalog-ui/src/app/models/capability.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -22,30 +22,23 @@
  * Created by obarda on 4/20/2016.
  */
 'use strict';
-import * as _ from "lodash";
-import {PropertyModel} from "./properties";
-import {Requirement} from "./requirement";
+import * as _ from 'lodash';
+import { PropertyModel } from './properties';
 
-export interface RequirementCapabilityModel{};
-//this is an object contains keys, when each key has matching array.
+export interface RequirementCapabilityModel {}
+
+// 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) => {
+    constructor(capabilityGroupObj?: CapabilitiesGroup) {
+        _.forEach(capabilityGroupObj, (capabilitiesArrayObj: Capability[], instance) => {
             this[instance] = [];
-            _.forEach(capabilitiesArrayObj, (capability:Capability):void => {
+            _.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];
-    }
-
+    
     public static getFlattenedCapabilities(capabilitiesGroup: CapabilitiesGroup): Array<Capability> {
         return _.reduce(
             _.toArray(capabilitiesGroup),
@@ -54,29 +47,30 @@ export class CapabilitiesGroup {
     }
 }
 
-export class Capability implements RequirementCapabilityModel{
-
-    //server data
-    name:string;
-    ownerId:string;
-    ownerName:string;
-    type:string;
-    uniqueId:string;
-    capabilitySources:Array<String>;
-    leftOccurrences:string;
-    minOccurrences: number;
-    maxOccurrences:string;
-    description:string;
-    validSourceTypes:Array<string>;
-    properties:Array<PropertyModel>;
-    //custom
-    selected:boolean;
-    filterTerm:string;
-
-    constructor(capability?:Capability) {
+export class Capability implements RequirementCapabilityModel {
+
+    // server data
+    name: string;
+    ownerId: string;
+    ownerName: string;
+    type: string;
+    uniqueId: string;
+    capabilitySources: string[];
+    leftOccurrences: string;
+    minOccurrences: string | number;
+    maxOccurrences: string;
+    description: string;
+    validSourceTypes: string[];
+    properties: PropertyModel[];
+
+    // custom
+    selected: boolean;
+    filterTerm: string;
+
+    constructor(capability?: Capability) {
 
         if (capability) {
-            //server data
+            // server data
             this.name = capability.name;
             this.ownerId = capability.ownerId;
             this.ownerName = capability.ownerName;
@@ -95,40 +89,49 @@ export class Capability implements RequirementCapabilityModel{
         }
     }
 
-    public getTitle():string {
+    public getTitle(): string {
         return this.ownerName + ': ' + this.name;
     }
 
-    public getFullTitle():string {
-        let maxOccurrences:string = this.maxOccurrences === 'UNBOUNDED' ? '∞' : this.maxOccurrences;
+    public getFullTitle(): string {
+        const maxOccurrences: string = this.maxOccurrences === 'UNBOUNDED' ? '∞' : this.maxOccurrences;
         return this.getTitle() + ': [' + this.minOccurrences + ', ' + maxOccurrences + ']';
     }
 
-    public toJSON = ():any => {
+    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;
+    }
+
+    public isFulfilled() {
+        return parseInt(this.leftOccurrences) === 0;
+    }
+
+    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) : "");
+            _.forEach(this.properties, (prop: PropertyModel) => {
+                this.filterTerm += ' ' + prop.name +
+                    ' ' + (prop.description || '') +
+                    ' ' + prop.type +
+                    (prop.schema && prop.schema.property ? (' ' + prop.schema.property.type) : '');
             });
         }
     }
+}
 
-    public isFulfilled() {
-        return parseInt(this.leftOccurrences) === 0;
+export class CapabilityUI extends Capability {
+    isCreatedManually: boolean;
+
+    constructor(input: Capability, componentUniqueId: string) {
+        super(input);
+        this.isCreatedManually = input.ownerId === componentUniqueId;
     }
 }
 
diff --git a/catalog-ui/src/app/models/component-metadata.ts b/catalog-ui/src/app/models/component-metadata.ts
index 0f0a30d529..8a4b257f55 100644
--- a/catalog-ui/src/app/models/component-metadata.ts
+++ b/catalog-ui/src/app/models/component-metadata.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -18,65 +18,135 @@
  * ============LICENSE_END=========================================================
  */
 
-import {IMainCategory} from "./category";
+import { CapabilitiesGroup, RequirementsGroup } from 'app/models';
+import { ComponentType } from 'app/utils';
+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;
-    public archived:boolean;
+export interface IComponentMetadata {
+
+    abstract: string;
+    uniqueId: string;
+    uuid: string;
+    invariantUUID: string;
+    name: string;
+    version: string;
+    creationDate: number;
+    lastUpdateDate: number;
+    description: string;
+    lifecycleState: string;
+    tags: string[];
+    icon: string;
+    contactId: string;
+    allVersions: any;
+    creatorUserId: string;
+    creatorFullName: string;
+    lastUpdaterUserId: string;
+    lastUpdaterFullName: string;
+    componentType: string;
+    categories: IMainCategory[];
+    highestVersion: boolean;
+    normalizedName: string;
+    systemName: string;
+    archived: boolean;
+    vspArchived: boolean;
+    selectedCategory: string;
+    filterTerm: string;
+
+    // Resource only
+    resourceType: string;
+    csarUUID: string;
+    csarVersion: string;
+    derivedList: string[];
+    vendorName: string;
+    vendorRelease: string;
+    derivedFrom: string[];
+    resourceVendorModelNumber: string;
+    csarPackageType: string;
+    packageId: string;
+    iconSprite: string;
+
+    // Service only
+    serviceFunction: string;
+    distributionStatus: string;
+    ecompGeneratedNaming: boolean;
+    namingPolicy: string;
+    serviceType: string;
+    serviceRole: string;
+    environmentContext: string;
+    instantiationType: string;
+
+    // backend lifecycleState
+    state: string;
+
+    capabilities: CapabilitiesGroup;
+    requirements: RequirementsGroup;
+
+}
+
+export class ComponentMetadata implements IComponentMetadata {
+
+    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: 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: IMainCategory[];
+    public highestVersion: boolean;
+    public normalizedName: string;
+    public systemName: string;
+    public archived: boolean;
     public vspArchived: boolean;
     public toscaResourceName: string;
+    public selectedCategory: string;
+    public filterTerm: string;
 
-    //Resource only
+    // Resource only
     public resourceType: string;
-    public csarUUID:string;
-    public csarVersion:string;
+    public csarUUID: string;
+    public csarVersion: string;
     public derivedList: string[];
-    public vendorName:string;
-    public vendorRelease:string;
-    public derivedFrom: Array<string>;
-    public resourceVendorModelNumber:string;
-
-    //Service only
-    public projectCode:string;
-    public distributionStatus:string;
+    public vendorName: string;
+    public vendorRelease: string;
+    public derivedFrom: string[];
+    public resourceVendorModelNumber: string;
+    public csarPackageType: string;
+    public packageId: string;
+    public iconSprite: string;
+
+    // Service only
+    public serviceFunction: string;
+    public distributionStatus: string;
     public ecompGeneratedNaming: boolean;
     public namingPolicy: string;
-    public serviceType:string;
-    public serviceRole:string;
-    public environmentContext:string;
-    public instantiationType:string;
-
+    public serviceType: string;
+    public serviceRole: string;
+    public environmentContext: string;
+    public instantiationType: string;
 
+    // backend lifecycleState
+    public state: string;
 
-        //backend lifecycleState
-    public state:string;
+    // requirements
+    public capabilities;
+    public requirements;
 
-    deserialize (response): ComponentMetadata {
+    deserialize(response): ComponentMetadata {
         this.abstract = response.abstract;
         this.uniqueId = response.uniqueId;
         this.uuid = response.uuid;
@@ -104,7 +174,7 @@ export class ComponentMetadata {
         this.derivedList = response.derivedList;
         this.normalizedName = response.normalizedName;
         this.systemName = response.systemName;
-        this.projectCode = response.projectCode;
+        this.serviceFunction = response.serviceFunction;
         this.resourceType = response.resourceType;
         this.csarUUID = response.csarUUID;
         this.csarVersion = response.csarVersion;
@@ -120,7 +190,16 @@ export class ComponentMetadata {
         this.instantiationType = response.instantiationType;
         this.vspArchived = response.vspArchived;
         this.toscaResourceName = response.toscaResourceName;
+        this.capabilities = response.capabilities;
+        this.requirements = response.requirements;
         return this;
     }
 
+    public isService = (): boolean => {
+        return this.componentType === ComponentType.SERVICE;
+    }
+
+    public getTypeUrl(): string {
+        return this.componentType === ComponentType.RESOURCE ? 'resources/' : 'services/';
+    }
 }
diff --git a/catalog-ui/src/app/models/components-array.ts b/catalog-ui/src/app/models/components-array.ts
new file mode 100644
index 0000000000..17f67b6edf
--- /dev/null
+++ b/catalog-ui/src/app/models/components-array.ts
@@ -0,0 +1,7 @@
+import {Service} from "./components/service";
+import {Resource} from "./components/resource";
+
+export interface IComponentsArray {
+    services:Array<Service>;
+    resources:Array<Resource>;
+}
diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts
index 8f0fa33c42..b76d29c8c6 100644
--- a/catalog-ui/src/app/models/components/component.ts
+++ b/catalog-ui/src/app/models/components/component.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -48,67 +48,33 @@ export interface IComponent {
     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>;
-    updateInstanceProperties(componentInstanceId:string, properties: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>;
-    checkComponentInstanceVersionChange(componentUid:string):ng.IPromise<any>;
-    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>;
-    fetchRelation(linkId:string):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;
     isService():boolean;
     isResource():boolean;
     isComplex():boolean;
-    getAdditionalInformation():Array<AdditionalInformationModel>;
     getAllVersionsAsSortedArray():Array<any>;
     getStatus(sdcMenu:IAppMenu):string;
 }
@@ -161,7 +127,6 @@ export abstract class Component implements IComponent {
     public interfaces:any;
     public normalizedName:string;
     public systemName:string;
-    public projectCode:string;
     public policies:Array<PolicyInstance>;
     public groupInstances:Array<GroupInstance>
     public modules:Array<Module>;
@@ -176,6 +141,7 @@ export abstract class Component implements IComponent {
     public showMenu:boolean;
     public archived:boolean;
     public vspArchived: boolean;
+    public componentMetadata: ComponentMetadata;
 
     constructor(componentService:IComponentService, protected $q:ng.IQService, component?:Component) {
         if (component) {
@@ -220,7 +186,6 @@ export abstract class Component implements IComponent {
             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);
@@ -243,11 +208,6 @@ export abstract class Component implements IComponent {
         this.uniqueId = uniqueId;
     };
 
-    public setSelectedInstance = (componentInstance:ComponentInstance):void => {
-        this.selectedInstance = componentInstance;
-    };
-
-
     //------------------------------------------ API Calls ----------------------------------------------------------------//
     public changeLifecycleState = (state:string, commentObj:AsdcComment):ng.IPromise<Component> => {
         let deferred = this.$q.defer<Component>();
@@ -302,23 +262,6 @@ export abstract class Component implements IComponent {
         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<ArtifactModel>();
         let onSuccess = (artifactObj:ArtifactModel):void => {
@@ -336,32 +279,6 @@ export abstract class Component implements IComponent {
         return deferred.promise;
     };
 
-    public getArtifactByGroupType = (artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
-
-        let deferred = this.$q.defer<ArtifactGroupModel>();
-        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<ArtifactGroupModel>();
-        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<PropertyModel>();
 
@@ -446,348 +363,10 @@ export abstract class Component implements IComponent {
         return deferred.promise;
     };
 
-
-    public updateInstancePropertiesSuccess = (newProperties:PropertyModel[]):void => {
-        newProperties.forEach((newProperty) => {
-            // 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;
-        });
-    }
-
-    public updateInstanceProperties = (componentInstanceId:string, properties:PropertyModel[]):ng.IPromise<PropertyModel[]> => {
-        let deferred = this.$q.defer<PropertyModel[]>();
-        let onSuccess = (newProperties:PropertyModel[]):void => {
-            this.updateInstancePropertiesSuccess(newProperties);
-            deferred.resolve(newProperties);
-        };
-        let onFailed = (error:any):void => {
-            console.log('Failed to update property value');
-            deferred.reject(error);
-        };
-        this.componentService.updateInstanceProperties(this.uniqueId, componentInstanceId, properties).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public updateInstanceAttribute = (attribute:AttributeModel):ng.IPromise<AttributeModel> => {
-        let deferred = this.$q.defer<AttributeModel>();
-        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<ArtifactModel>();
-        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<ArtifactModel>();
-        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<ArtifactModel>();
-        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<Component>();
-        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 checkComponentInstanceVersionChange = (componentUid:string):ng.IPromise<any> => {
-        return this.componentService.checkResourceInstanceVersionChange(this.uniqueId, this.selectedInstance.uniqueId, componentUid);
-    };
-
-    public createComponentInstance = (componentInstance:ComponentInstance):ng.IPromise<ComponentInstance> => {
-        let deferred = this.$q.defer<ComponentInstance>();
-        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<ComponentInstance>();
-        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<Array<ComponentInstance>>();
-        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<ComponentInstance>();
-        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.modules = component.modules;
-                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 syncComponentByRelation(relation:RelationshipModel) {
-        relation.relationships.forEach((rel) => {
-            if (rel.capability) {
-                const toComponentInstance:ComponentInstance = this.componentInstances.find((inst) => inst.uniqueId === relation.toNode);
-                const toComponentInstanceCapability:Capability = toComponentInstance.findCapability(
-                    rel.capability.type, rel.capability.uniqueId, rel.capability.ownerId, rel.capability.name);
-                const isCapabilityFulfilled:boolean = rel.capability.isFulfilled();
-                if (isCapabilityFulfilled && toComponentInstanceCapability) {
-                    // if capability is fulfilled and in component, then remove it
-                    console.log('Capability is fulfilled', rel.capability.getFullTitle(), rel.capability.leftOccurrences);
-                    toComponentInstance.capabilities[rel.capability.type].splice(
-                        toComponentInstance.capabilities[rel.capability.type].findIndex((cap) => cap === toComponentInstanceCapability), 1
-                    )
-                } else if (!isCapabilityFulfilled && !toComponentInstanceCapability) {
-                    // if capability is unfulfilled and not in component, then add it
-                    console.log('Capability is unfulfilled', rel.capability.getFullTitle(), rel.capability.leftOccurrences);
-                    toComponentInstance.capabilities[rel.capability.type].push(rel.capability);
-                }
-            }
-            if (rel.requirement) {
-                const fromComponentInstance:ComponentInstance = this.componentInstances.find((inst) => inst.uniqueId === relation.fromNode);
-                const fromComponentInstanceRequirement:Requirement = fromComponentInstance.findRequirement(
-                    rel.requirement.capability, rel.requirement.uniqueId, rel.requirement.ownerId, rel.requirement.name);
-                const isRequirementFulfilled:boolean = rel.requirement.isFulfilled();
-                if (isRequirementFulfilled && fromComponentInstanceRequirement) {
-                    // if requirement is fulfilled and in component, then remove it
-                    console.log('Requirement is fulfilled', rel.requirement.getFullTitle(), rel.requirement.leftOccurrences);
-                    fromComponentInstance.requirements[rel.requirement.capability].splice(
-                        fromComponentInstance.requirements[rel.requirement.capability].findIndex((req) => req === fromComponentInstanceRequirement), 1
-                    )
-                } else if (!isRequirementFulfilled && !fromComponentInstanceRequirement) {
-                    // if requirement is unfulfilled and not in component, then add it
-                    console.log('Requirement is unfulfilled', rel.requirement.getFullTitle(), rel.requirement.leftOccurrences);
-                    fromComponentInstance.requirements[rel.requirement.capability].push(rel.requirement);
-                }
-            }
-        });
-    }
-
-    public fetchRelation = (linkId:string):ng.IPromise<RelationshipModel> => {
-        let deferred = this.$q.defer<RelationshipModel>();
-        let onSuccess = (relation:RelationshipModel):void => {
-            this.syncComponentByRelation(relation);
-            deferred.resolve(relation);
-        };
-        let onFailed = (error:any):void => {
-            deferred.reject(error);
-        };
-        this.componentService.fetchRelation(this.uniqueId, linkId).then(onSuccess, onFailed);
-        return deferred.promise;
-    };
-
-    public createRelation = (relation:RelationshipModel):ng.IPromise<RelationshipModel> => {
-        let deferred = this.$q.defer<RelationshipModel>();
-        let onSuccess = (relation:RelationshipModel):void => {
-            console.info('Link created successfully', relation);
-            if (!this.componentInstancesRelations) {
-                this.componentInstancesRelations = [];
-            }
-            this.componentInstancesRelations.push(new RelationshipModel(relation));
-            this.syncComponentByRelation(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<RelationshipModel>();
-        let onSuccess = (relation: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].relation, relationship.relation);
-                    });
-            });
-            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, (relationship) => {
-                            return angular.equals(relation.relationships[0].relation, relationship.relation);
-                        });
-                }
-            } else {
-                console.error("Error while deleting relation - the return delete relation from server was not found in UI")
-            }
-            this.syncComponentByRelation(relation);
-            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 getRelationRequirementCapability(relationship: Relationship, sourceNode:ComponentInstance, targetNode:ComponentInstance): Promise<{requirement:Requirement, capability:Capability}> {
-        // try find the requirement and capability in the source and target component instances:
-        let capability:Capability = targetNode.findCapability(undefined,
-            relationship.relation.capabilityUid,
-            relationship.relation.capabilityOwnerId,
-            relationship.relation.capability);
-        let requirement:Requirement = sourceNode.findRequirement(undefined,
-            relationship.relation.requirementUid,
-            relationship.relation.requirementOwnerId,
-            relationship.relation.requirement);
-
-        return new Promise<{requirement:Requirement, capability:Capability}>((resolve, reject) => {
-            if (capability && requirement) {
-                resolve({capability, requirement});
-            }
-            else {
-                // if requirement and/or capability is missing, then fetch the full relation with its requirement and capability:
-                this.fetchRelation(relationship.relation.id).then((fetchedRelation) => {
-                    resolve({
-                        capability: capability || fetchedRelation.relationships[0].capability,
-                        requirement: requirement || fetchedRelation.relationships[0].requirement
-                    });
-                }, reject);
-            }
-        });
-    }
-
-    public updateRequirementsCapabilities = ():ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let onSuccess = (response:any):void => {
-            this.capabilities = new CapabilitiesGroup(response.capabilities);
-            this.requirements = new RequirementsGroup(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<DisplayModule>();
@@ -814,82 +393,6 @@ export abstract class Component implements IComponent {
         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<Array<ComponentInstance>>();
-        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<Array<InputModel>>();
-        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<Array<InputModel>>();
-        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<Array<PropertyModel>>();
-        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<Array<PropertyModel>>();
-        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<Module>();
@@ -969,15 +472,6 @@ export abstract class Component implements IComponent {
 
     };
 
-    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)=> {
@@ -1036,10 +530,10 @@ export abstract class Component implements IComponent {
         this.derivedList = componentMetadata.derivedList;
         this.normalizedName = componentMetadata.normalizedName;
         this.systemName = componentMetadata.systemName;
-        this.projectCode = componentMetadata.projectCode;
         this.categories = componentMetadata.categories;
         this.archived = componentMetadata.archived || false;
         this.vspArchived = componentMetadata.vspArchived;
+        this.componentMetadata = componentMetadata;
     }
 
     public toJSON = ():any => {
diff --git a/catalog-ui/src/app/models/components/displayComponent.ts b/catalog-ui/src/app/models/components/displayComponent.ts
index f96e0bf14b..4e946954f3 100644
--- a/catalog-ui/src/app/models/components/displayComponent.ts
+++ b/catalog-ui/src/app/models/components/displayComponent.ts
@@ -22,47 +22,42 @@
  */
 
 'use strict';
-import {ComponentType} from "../../utils/constants";
-import {ComponentMetadata} from "../component-metadata";
-import {PolicyMetadata} from "../policy-metadata";
-import {GroupMetadata} from "../group-metadata";
-import {RequirementsGroup} from "../requirement";
-import {CapabilitiesGroup} from "../capability";
+import { ComponentType, SdcElementType } from '../../utils/constants';
+import { ComponentMetadata } from '../component-metadata';
+import { PolicyMetadata } from '../policy-metadata';
+import { GroupMetadata } from '../group-metadata';
+import { RequirementsGroup } from '../requirement';
+import { CapabilitiesGroup } from '../capability';
 
 export enum LeftPaletteMetadataTypes {
-    Component,
-    Group,
-    Policy
+    Component = 'COMPONENT',
+    Group = 'GROUP',
+    Policy = 'POLICY'
 }
 
 export class LeftPaletteComponent {
-    uniqueId:string;
-    type:string;
-    displayName:string;
-    version:string;
-    mainCategory:string;
-    subCategory:string;
-    iconClass:string;
-    componentSubType:string;
-    searchFilterTerms:string;
-    certifiedIconClass:string;
-    icon:string;
-    isDraggable:boolean;
-    isRequirmentAndCapabilitiesLoaded:boolean;
 
-    uuid:string;
-    name:string;
-    lifecycleState:string;
-    allVersions:any;
-    componentType:string;
-    systemName:string;
-
-    invariantUUID:string;
-
-    capabilities:CapabilitiesGroup;
-    requirements:RequirementsGroup;
-
-    categoryType:LeftPaletteMetadataTypes;
+    uniqueId: string;
+    type: string;
+    version: string;
+    mainCategory: string;
+    subCategory: string;
+    componentSubType: string;
+    searchFilterTerms: string;
+    certifiedIconClass: string;
+    isDraggable: boolean;
+    uuid: string;
+    name: string;
+    lifecycleState: string;
+    allVersions: any;
+    componentType: string;
+    systemName: string;
+    invariantUUID: string;
+    capabilities: CapabilitiesGroup;
+    requirements: RequirementsGroup;
+    categoryType: LeftPaletteMetadataTypes;
+    resourceType: string;
+    icon: string;
 
     constructor(metadataType: LeftPaletteMetadataTypes, item: ComponentMetadata | PolicyMetadata | GroupMetadata) {
         if (metadataType === LeftPaletteMetadataTypes.Policy) {
@@ -81,13 +76,10 @@ export class LeftPaletteComponent {
         }
     }
 
-    private initComponent(component:ComponentMetadata): void {
-        this.categoryType = LeftPaletteMetadataTypes.Component;
+    private initComponent(component: ComponentMetadata): void {
 
-        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;
@@ -95,7 +87,6 @@ export class LeftPaletteComponent {
         this.systemName = component.systemName;
         this.invariantUUID = component.invariantUUID;
         this.isDraggable = true;
-
         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;
@@ -103,75 +94,43 @@ export class LeftPaletteComponent {
             this.mainCategory = 'Generic';
             this.subCategory = 'Generic';
         }
+        // this.categoryType = LeftPaletteMetadataTypes.Component;
+        // this.componentSubType = component. ? component.resourceType: ComponentType.SERVICE_PROXY;
+        this.searchFilterTerms = (this.name + ' ' + component.description + ' ' + component.tags.join(' ')).toLowerCase() + ' ' + component.version;
+        this.icon = component.icon;
+        this.certifiedIconClass = component.lifecycleState != 'CERTIFIED' ? 'non-certified' : ''; // need to fix after onap fix
 
-        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';
-        }
     }
 
-    private initGroup(group:GroupMetadata): void {
+    private initGroup(group: GroupMetadata): void {
         this.categoryType = LeftPaletteMetadataTypes.Group;
-
         this.uniqueId = group.uniqueId;
-        this.displayName = group.name;
-        this.mainCategory = "Groups";
-        this.subCategory = "Groups";
-        this.iconClass = "sprite-group-icons group";
+        this.name = group.name;
+        this.mainCategory = 'Groups';
+        this.subCategory = 'Groups';
         this.version = group.version;
-
         this.type = group.type;
-        this.componentSubType = 'GROUP';
-
+        this.componentSubType = SdcElementType.GROUP;
+        this.icon = SdcElementType.GROUP;
         this.searchFilterTerms = this.type + ' ' + group.name + ' ' + group.version;
         this.isDraggable = false;
     }
 
-    private initPolicy(policy:PolicyMetadata): void {
+    private initPolicy(policy: PolicyMetadata): void {
         this.categoryType = LeftPaletteMetadataTypes.Policy;
-
         this.uniqueId = policy.uniqueId;
-        this.displayName = policy.name;
-        this.mainCategory = "Policies";
-        this.subCategory = "Policies";
-        this.iconClass = "sprite-policy-icons policy";
+        this.name = policy.name;
+        this.mainCategory = 'Policies';
+        this.subCategory = 'Policies';
         this.version = policy.version;
-
         this.type = policy.type;
-        this.componentSubType = 'POLICY';
-
+        this.componentSubType = SdcElementType.POLICY;
+        this.icon = SdcElementType.POLICY;
         this.searchFilterTerms = this.type + ' ' + policy.name + ' ' + policy.version;
         this.isDraggable = false;
     }
 
-    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;
-            default:
-                this.iconClass = "sprite-resource-icons " + icon;
-        }
-    }
-
-    public getComponentSubType = ():string => {
+    public getComponentSubType = (): string => {
         return this.componentSubType;
     };
 }
diff --git a/catalog-ui/src/app/models/components/service.ts b/catalog-ui/src/app/models/components/service.ts
index a947e81716..911a43204f 100644
--- a/catalog-ui/src/app/models/components/service.ts
+++ b/catalog-ui/src/app/models/components/service.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -38,6 +38,7 @@ export class Service extends Component {
     public namingPolicy:string;
     public serviceType:string;
     public serviceRole:string;
+    public serviceFunction:string;
     public environmentContext:string;
     public instantiationType:string;
     public forwardingPaths:{ [key:string]:ForwardingPath } = {};
@@ -52,6 +53,7 @@ export class Service extends Component {
             this.namingPolicy = component.namingPolicy;
             this.serviceType = component.serviceType;
             this.serviceRole = component.serviceRole;
+            this.serviceFunction = component.serviceFunction;
             this.instantiationType = component.instantiationType;
             this.environmentContext = component.environmentContext;
             if (component.categories && component.categories[0]) {
@@ -168,6 +170,7 @@ export class Service extends Component {
         this.namingPolicy = componentMetadata.namingPolicy;
         this.serviceType = componentMetadata.serviceType;
         this.serviceRole = componentMetadata.serviceRole;
+        this.serviceFunction = componentMetadata.serviceFunction;
         this.environmentContext = componentMetadata.environmentContext;
         this.instantiationType = componentMetadata.instantiationType;
         this.setComponentDisplayData();
@@ -195,6 +198,7 @@ export class Service extends Component {
         temp.selectedCategory = undefined;
         temp.modules = undefined;
         temp.groupInstances = undefined;
+        temp.policies = undefined;
         return temp;
     };
 }
diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
index f95d6553cd..d3a99e5390 100644
--- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
+++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
@@ -23,12 +23,53 @@
  */
 'use strict';
 import * as _ from "lodash";
-import {ArtifactGroupModel, CapabilitiesGroup,RequirementsGroup, PropertyModel, InputModel, Module} from "../../models";
-import {ResourceType,ComponentType} from "../../utils/constants";
+import {
+    ArtifactGroupModel,
+    CapabilitiesGroup,
+    RequirementsGroup,
+    PropertyModel,
+    InputModel,
+    Module
+} from "../../models";
+import {ResourceType, ComponentType} from "../../utils/constants";
 import {Capability} from "../capability";
 import {Requirement} from "../requirement";
 
-export class ComponentInstance {
+export interface IComponentInstance {
+
+    componentUid:string;
+    componentName:string;
+    posX:number;
+    posY:number;
+    componentVersion:string;
+    description:string;
+    icon:string;
+    name:string;
+    normalizedName:string;
+    originType:string;
+    deploymentArtifacts:ArtifactGroupModel;
+    artifacts:ArtifactGroupModel;
+    propertyValueCounter:number;
+    uniqueId:string;
+    creationTime:number;
+    modificationTime:number;
+    capabilities:CapabilitiesGroup;
+    requirements:RequirementsGroup;
+    customizationUUID:string;
+    sourceModelInvariant:string;
+    sourceModelName:string;
+    sourceModelUid:string;
+    sourceModelUuid:string;
+    //custom properties
+    certified:boolean;
+    iconSprite:string;
+    inputs:Array<InputModel>;
+    properties:Array<PropertyModel>;
+    groupInstances:Array<Module>;
+    invariantName:string;
+    originArchived:boolean;
+}
+export class ComponentInstance implements IComponentInstance{
 
     public componentUid:string;
     public componentName:string;
@@ -61,7 +102,7 @@ export class ComponentInstance {
     public groupInstances:Array<Module>;
     public invariantName:string;
     public originArchived:boolean;
-    public directives: Array<string>;
+    public directives: string[];
 
     DIRECTIVES_TYPES = {
         SELECTABLE: 'selectable'
@@ -112,14 +153,18 @@ export class ComponentInstance {
         return this.originType === 'VL';
     };
 
-    public isComplex = () : boolean => {
-        return this.originType === ResourceType.VF || this.originType === ResourceType.PNF || this.originType === ResourceType.CVFC || this.originType === ResourceType.CR ;
+    public isComplex = ():boolean => {
+        return this.originType === ResourceType.VF || this.originType === ResourceType.PNF || this.originType === ResourceType.CVFC || this.originType === ResourceType.CR;
     }
 
-    public isServiceProxy = () :boolean => {
+    public isServiceProxy = ():boolean => {
         return this.originType === ComponentType.SERVICE_PROXY;
     }
 
+    public getComponentUid = ():string => {
+        return this.isServiceProxy()? this.sourceModelUid : this.componentUid;
+    }
+
     public setInstanceRC = ():void=> {
         _.forEach(this.requirements, (requirementValue:Array<any>, requirementKey)=> {
             _.forEach(requirementValue, (requirement)=> {
@@ -183,7 +228,6 @@ export class ComponentInstance {
     public get iconClass() {
         return this.iconSprite + ' ' + this.icon;
     }
-
     public isDependent = () : boolean => {
         return this.directives && this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE) !== -1;
     }
diff --git a/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts b/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts
new file mode 100644
index 0000000000..ce5aa1dae9
--- /dev/null
+++ b/catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts
@@ -0,0 +1,110 @@
+import { ComponentInstance, Component, ArtifactGroupModel, Service, Resource, IMainCategory, ArtifactModel, AttributeModel } from "app/models";
+import { ComponentType } from '../../utils/constants';
+import * as _ from 'lodash';
+
+
+export class FullComponentInstance extends ComponentInstance {
+    public contactId: string;
+    public componentType: string;
+    public interfaces:any;
+    public tags:Array<string>;
+    public version:string;
+    public allVersions:any;
+    public highestVersion:boolean;
+    public categories:Array<IMainCategory>;
+    public creationDate:number;
+    public creatorFullName:string;
+    public vendorName:string;
+    public vendorRelease:string;
+    public systemName:string;
+    public uuid:string;
+    public lifecycleState: string;
+    public archived: boolean;
+
+    public isServiceInstance: boolean;
+    public isResourceInstance: boolean;
+    public directives: string[];
+
+    DIRECTIVES_TYPES = {
+        SELECTABLE: 'selectable'
+    };
+
+    //service
+    public serviceApiArtifacts:ArtifactGroupModel;
+    public serviceType:string;
+    public serviceRole:string;
+
+    //resource
+    public csarUUID:string;
+    public isCsarComponent: boolean;
+    public csarVersion:string;
+    public csarPackageType:string;
+    public packageId:string;
+    public resourceType:string;
+    public resourceVendorModelNumber:string;
+
+    public attributes: Array<AttributeModel>;
+
+    constructor(componentInstance:ComponentInstance, originComponent:Component) {
+        super(componentInstance);
+
+        this.componentType = originComponent.componentType;
+        this.interfaces = originComponent.interfaces;
+        this.tags = [];
+        this.tags = _.clone(originComponent.tags);
+        this.version = originComponent.version;
+        this.allVersions = originComponent.allVersions;
+        this.highestVersion = originComponent.highestVersion;
+        this.categories = originComponent.categories;
+        this.creationDate = originComponent.creationDate;
+        this.creatorFullName = originComponent.creatorFullName;
+        this.vendorName = originComponent.vendorName;
+        this.vendorRelease = originComponent.vendorRelease;
+        this.contactId = originComponent.contactId;
+        this.description = originComponent.description;
+        this.systemName = originComponent.systemName;
+        this.uuid = originComponent.uuid;
+        this.lifecycleState = originComponent.lifecycleState;
+        this.archived = originComponent.archived;
+        this.attributes = originComponent.attributes;
+        this.directives = componentInstance.directives;
+
+
+        if(originComponent.componentType === ComponentType.SERVICE || originComponent.componentType === ComponentType.SERVICE_PROXY){
+            this.isServiceInstance = true;
+            this.serviceApiArtifacts = (<Service>originComponent).serviceApiArtifacts;
+            this.serviceType = (<Service>originComponent).serviceType;
+            this.serviceRole = (<Service>originComponent).serviceRole;
+        }
+        if(originComponent.componentType === ComponentType.RESOURCE) {
+            this.isResourceInstance = true;
+            this.csarUUID = (<Resource>originComponent).csarUUID;
+            this.isCsarComponent = !!this.csarUUID;
+            this.resourceType = (<Resource>originComponent).resourceType;
+            this.resourceVendorModelNumber = (<Resource>originComponent).resourceVendorModelNumber;
+        }
+    }
+
+    public isResource = ():boolean => {
+        return this.isResourceInstance;
+    }
+
+    public isService = ():boolean => {
+        return this.isServiceInstance;
+    }
+    public isDependent = () : boolean => {
+        return this.directives && this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE) !== -1;
+    }
+
+    public markAsDependent = () : void => {
+        this.directives.push(this.DIRECTIVES_TYPES.SELECTABLE);
+    }
+
+    public unmarkAsDependent = () : void => {
+        const index = this.directives.indexOf(this.DIRECTIVES_TYPES.SELECTABLE);
+        if(index >= 0) {
+            this.directives.splice(index, 1);
+        }
+    }
+
+}
\ No newline at end of file
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
index cc037a7e22..d690eca02c 100644
--- a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
+++ b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
@@ -22,60 +22,49 @@
  */
 'use strict';
 import * as _ from "lodash";
-import {RelationshipModel, Relationship, CompositionCiLinkBase, CompositionCiNodeBase, LinkUcpeHost, CompositionCiUcpeLink,
-    CompositionCiVlUcpeLink, CompositionCiSimpleLink, ModuleCiLinkBase, ModuleCiVlLink, CompositionCiVLink} from "../../../models";
+import {
+    RelationshipModel, Relationship, CompositionCiLinkBase, CompositionCiNodeBase, LinkUcpeHost, CompositionCiUcpeLink,
+    CompositionCiVlUcpeLink, CompositionCiSimpleLink, ModuleCiLinkBase, ModuleCiVlLink, CompositionCiVLink
+} from "app/models";
+import {Injectable} from "@angular/core";
 
+@Injectable()
 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.relation.relationship.type && _.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) {
-      newRelation = new CompositionCiVLink(relation, singleRelation);
-    } else {
-      newRelation = new CompositionCiSimpleLink(relation, singleRelation);
+    constructor() {
     }
 
-    return newRelation;
-  };
+    public createGraphLink = (cy:Cy.Instance, relation:RelationshipModel, singleRelation:Relationship):CompositionCiLinkBase => {
 
-  public createUcpeHostLink = (relation:RelationshipModel):LinkUcpeHost => {
-    return new LinkUcpeHost(relation);
-  };
+        let newRelation:CompositionCiLinkBase;
+        if (singleRelation.relation.relationship.type && _.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) {
+            newRelation = new CompositionCiVLink(relation, singleRelation);
+        } else {
+            newRelation = new CompositionCiSimpleLink(relation, singleRelation);
+        }
 
-  public createVLLink = (relation:RelationshipModel):CompositionCiVLink => {
-    return new CompositionCiVLink(relation);
-  }
+        return newRelation;
+    };
 
+    public createUcpeHostLink = (relation:RelationshipModel):LinkUcpeHost => {
+        return new LinkUcpeHost(relation);
+    };
 
-  public createModuleGraphLinks = (relation:RelationshipModel, singleRelation:Relationship):ModuleCiLinkBase => {
+    public createVLLink = (relation:RelationshipModel):CompositionCiVLink => {
+        return new CompositionCiVLink(relation);
+    }
 
-    let newRelation:ModuleCiLinkBase;
+    public createModuleGraphLinks = (relation:RelationshipModel, singleRelation:Relationship):ModuleCiLinkBase => {
 
-    if (_.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) {
-      newRelation = new ModuleCiVlLink(relation, singleRelation);
-    } else {
-      newRelation = new ModuleCiLinkBase(relation, singleRelation);
-    }
+        let newRelation:ModuleCiLinkBase;
+
+        if (_.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) {
+            newRelation = new ModuleCiVlLink(relation, singleRelation);
+        } else {
+            newRelation = new ModuleCiLinkBase(relation, singleRelation);
+        }
 
-    return newRelation;
-  };
+        return newRelation;
+    };
 
 }
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
index 51a0c7b3e5..69605507e7 100644
--- 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
@@ -20,9 +20,11 @@
 
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
 import {CommonCINodeBase} from "../common-ci-node-base";
-import {ICanvasImage, ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service";
 import {ImagesUrl, GraphUIObjects} from "app/utils";
 import {AngularJSBridge} from "app/services";
+import {ResourceNamePipe} from "app/ng2/pipes/resource-name.pipe";
+import {ComponentInstanceNodesStyle} from "app/ng2/pages/composition/graph/common/style/component-instances-nodes-style";
+import {ImageCreatorService, ICanvasImage} from "app/ng2/pages/composition/graph/common/image-creator.service";
 
 export interface ICompositionCiNodeBase {
 
@@ -48,14 +50,16 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
         this.isUcpePart = false;
         this.isInsideGroup = false;
     }
-
-
+    
+    
     protected enhanceImage(node:Cy.Collection, nodeMinSize:number, imgUrl: string):string {
+
         let infoIconWidth:number = GraphUIObjects.HANDLE_SIZE;
         let nodeWidth:number = node.data('imgWidth') || node.width();
+        // let uncertifiedCanvasWidth: number = nodeWidth;
         let infoCanvasWidth: number = nodeWidth;
 
-        if (nodeWidth < nodeMinSize) { //info icon will overlap too much of the node, need to expand canvas.
+        if (nodeWidth < nodeMinSize) { //uncertified icon will overlap too much of the node, need to expand canvas.
             infoCanvasWidth = nodeWidth + infoIconWidth/2; //expand canvas so that only half of the icon overlaps with the node
         }
 
@@ -66,13 +70,14 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
             { src: imgUrl, x: 0, y: 0, width: infoIconWidth, height: infoIconWidth}
         ];
 
+
        //Create the image and update the node background styles
         this.imageCreator.getMultiLayerBase64Image(canvasImages, infoCanvasWidth, infoCanvasWidth).then(img => this.updateNodeStyles(node,infoCanvasWidth,img));
         return this.img; // Return the referance to the image (in Base64 format)
     }
 
-
-    public setArchivedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string {
+    
+    public setArchivedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string {        
         let archivedIconWidth:number = GraphUIObjects.HANDLE_SIZE;
         let nodeWidth:number = node.data('imgWidth') || node.width();
         let archivedCanvasWidth: number = nodeWidth;
@@ -95,13 +100,12 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
     }
 
     protected getDisplayName():string {
-        let graphResourceName = AngularJSBridge.getFilter('graphResourceName');
-        let resourceName = AngularJSBridge.getFilter('resourceName');
-        return graphResourceName(resourceName(this.componentInstance.name));
+        let resourceName = ResourceNamePipe.getDisplayName(this.componentInstance.name);
+        return ComponentInstanceNodesStyle.getGraphDisplayName(resourceName);
     }
 
     //TODO:: move to Base class ???
-    private updateNodeStyles(node,canvasWidth,imageBase64){
+    private updateNodeStyles(node,canvasWidth,imageBase64){     
         this.img = imageBase64;
         node.style({
             'background-image': this.img,
@@ -109,7 +113,7 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
             'background-height': canvasWidth,
             'background-position-x':0,
             'background-position-y':0
-        });
+        });        
     }
 
 }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts
index 78bcc17186..cac48df632 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts
@@ -20,7 +20,7 @@
 
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 import {ComponentInstance, CompositionCiNodeBase} from "../../../../models";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 export class CompositionCiNodeConfiguration extends CompositionCiNodeBase {
 
     constructor(instance:ComponentInstance,
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
index 05a6d790ab..9b6a4ed0aa 100644
--- 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
@@ -20,7 +20,7 @@
 
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import {AngularJSBridge} from "../../../../services/angular-js-bridge-service";
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts
index 5ef3a733b2..a46e0c4d32 100644
--- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts
@@ -18,9 +18,9 @@
  * ============LICENSE_END=========================================================
  */
 
-import {ComponentInstance, CompositionCiNodeBase} from "app/models";
-import {ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service";
-import {ImagesUrl, GraphUIObjects} from "app/utils";
+import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
+import {ComponentInstance, CompositionCiNodeBase} from "../../../../models";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase {
     private isDependent: boolean;
     private originalImg: string;
@@ -50,7 +50,6 @@ export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase {
         }
 
     }
-
     public initUncertifiedDependentImage(node:Cy.Collection, nodeMinSize:number):string {
         return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'uncertified_dependent.png');
     }
@@ -58,5 +57,4 @@ export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase {
     public initDependentImage(node:Cy.Collection, nodeMinSize:number):string {
         return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'dependent.png');
     }
-
 }
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
index bf8facf002..5b6281560c 100644
--- 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
@@ -20,7 +20,7 @@
 
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 import {ComponentInstance, CompositionCiNodeBase} from "../../../../models";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 export class CompositionCiNodeService extends CompositionCiNodeBase {
 
     constructor(instance:ComponentInstance,
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
index a79b183db4..f769e69ec1 100644
--- 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
@@ -19,7 +19,7 @@
  */
 
 import {CompositionCiNodeCp, ComponentInstance} from "./../../../../models";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import { ImagesUrl} from "../../../../utils/constants";
 
 export class CompositionCiNodeUcpeCp extends CompositionCiNodeCp {
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
index d4172c0eaa..242e96857d 100644
--- 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
@@ -19,7 +19,7 @@
  */
 
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
 import { ImagesUrl} from "../../../../utils/constants";
 
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
index 4aff85e6c3..c5d2d9e34b 100644
--- 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
@@ -19,7 +19,7 @@
  */
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 
 export class CompositionCiNodeVf extends CompositionCiNodeBase {
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
index 5f07986d5c..4c16661548 100644
--- 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
@@ -18,7 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
 import {ImagesUrl} from "../../../../utils/constants";
 
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
index a440f09156..2407593665 100644
--- 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
@@ -19,7 +19,7 @@
  */
 import * as _ from "lodash";
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
-import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
 import {CompositionCiNodeBase} from "./composition-ci-node-base";
 import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants";
 
diff --git a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
index 245f2e10d9..bcd2f7e111 100644
--- a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
+++ b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
@@ -22,8 +22,10 @@
 import {CompositionCiNodeUcpeCp, Module, ModuleNodeBase, CompositionCiNodeVf, CompositionCiNodeVl, CompositionCiNodeCp, CompositionCiNodeConfiguration,
     NodeUcpe, CompositionCiNodeService,CompositionCiNodeServiceProxy, CompositionCiNodeBase, ComponentInstance} from "./../../../models";
 import {ComponentType, ResourceType} from "../../../utils/constants";
-import {ImageCreatorService} from "../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImageCreatorService} from "app/ng2/pages/composition/graph/common/image-creator.service";
+import {Injectable} from "@angular/core";
 
+@Injectable()
 export class NodesFactory {
 
     constructor(private imageCreator:ImageCreatorService) {
@@ -54,7 +56,6 @@ export class NodesFactory {
     };
 
     public createModuleNode = (module:Module):ModuleNodeBase => {
-
         return new ModuleNodeBase(module);
     };
 
@@ -64,6 +65,3 @@ export class NodesFactory {
     }
 }
 
-NodesFactory.$inject = [
-    'ImageCreatorService'
-];
diff --git a/catalog-ui/src/app/models/graph/relationship.ts b/catalog-ui/src/app/models/graph/relationship.ts
index 8d56272fa0..13a1bd13e0 100644
--- a/catalog-ui/src/app/models/graph/relationship.ts
+++ b/catalog-ui/src/app/models/graph/relationship.ts
@@ -119,4 +119,11 @@ export class Relationship {
         this.capability = capability;
         this.requirement = requirement;
     };
+
+    public toJSON = ():any => {
+        let temp = angular.copy(this);
+        temp.capability = undefined;
+        temp.requirement = undefined;
+        return temp;
+    }
 }
diff --git a/catalog-ui/src/app/models/graph/zones/group-instance.ts b/catalog-ui/src/app/models/graph/zones/group-instance.ts
index 92d850b894..4001b94df3 100644
--- a/catalog-ui/src/app/models/graph/zones/group-instance.ts
+++ b/catalog-ui/src/app/models/graph/zones/group-instance.ts
@@ -27,24 +27,24 @@ export class GroupInstance {
     public originArchived?:boolean;
 
 
-    constructor(group:GroupInstance) {
-
-        this.name = group.name;
-        this.groupUUID = group.groupUUID;
-        this.invariantUUID = group.invariantUUID;
-        this.propertyValueCounter = group.propertyValueCounter;
-        this.type = group.type;
-        this.typeUid = group.typeUid;
-        this.uniqueId = group.uniqueId;
-        this.version = group.version;
-        this.artifacts = group.artifacts;
-        this.artifactsUuid = group.artifactsUuid;
-        this.properties = CommonUtils.initProperties(group.properties);
-        this.members = _.values(group.members);
-        this.description = group.description;
-        this.empty = group.empty;
-        this.ownerId = group.ownerId;
-
+    constructor(group?:GroupInstance) {
+        if (group) {
+            this.name = group.name;
+            this.groupUUID = group.groupUUID;
+            this.invariantUUID = group.invariantUUID;
+            this.propertyValueCounter = group.propertyValueCounter;
+            this.type = group.type;
+            this.typeUid = group.typeUid;
+            this.uniqueId = group.uniqueId;
+            this.version = group.version;
+            this.artifacts = group.artifacts;
+            this.artifactsUuid = group.artifactsUuid;
+            this.properties = CommonUtils.initProperties(group.properties);
+            this.members = _.values(group.members);
+            this.description = group.description;
+            this.empty = group.empty;
+            this.ownerId = group.ownerId;
+        }
         this.iconSprite = '';
         this.icon = 'icon-group';
     }
diff --git a/catalog-ui/src/app/models/graph/zones/policy-instance.ts b/catalog-ui/src/app/models/graph/zones/policy-instance.ts
index cef1705a41..9dd2d5f212 100644
--- a/catalog-ui/src/app/models/graph/zones/policy-instance.ts
+++ b/catalog-ui/src/app/models/graph/zones/policy-instance.ts
@@ -5,6 +5,7 @@ import {GroupInstance} from "./group-instance";
 import {ComponentInstance} from "../../componentsInstances/componentInstance";
 import {TargetUiObject} from "../../ui-models/ui-target-object";
 import {TargetOrMemberType} from "../../../utils/constants";
+import * as _ from 'lodash';
 
 /* The request and response should be same model, need to fix in BE */
 export class PolicyTargetsMap {
@@ -66,24 +67,25 @@ export class PolicyInstance implements IZoneInstanceMethod {
 
 
     constructor(policy?:PolicyInstance) {
-        this.componentName = policy.componentName;
-        this.description = policy.description;
-        this.empty = policy.empty;
-        this.invariantName = policy.invariantName;
-        this.invariantUUID = policy.invariantUUID;
-        this.isFromCsar = policy.isFromCsar;
-        
-        this.name = policy.name;
-        this.normalizedName =policy.normalizedName;
-        this.type = policy.type;
-        this.policyTypeUid = policy.policyTypeUid;
-        this.policyUUID = policy.policyUUID;
-        this.properties = CommonUtils.initProperties(policy.properties);
-        this.targets = policy.targets;
-        this.uniqueId = policy.uniqueId;
-        this.version = policy.version;
-        this.instanceUniqueId = policy.instanceUniqueId;
-
+        if(policy){
+            this.componentName = policy.componentName;
+            this.description = policy.description;
+            this.empty = policy.empty;
+            this.invariantName = policy.invariantName;
+            this.invariantUUID = policy.invariantUUID;
+            this.isFromCsar = policy.isFromCsar;
+            
+            this.name = policy.name;
+            this.normalizedName =policy.normalizedName;
+            this.type = policy.type;
+            this.policyTypeUid = policy.policyTypeUid;
+            this.policyUUID = policy.policyUUID;
+            this.properties = CommonUtils.initProperties(policy.properties);
+            this.targets = policy.targets;
+            this.uniqueId = policy.uniqueId;
+            this.version = policy.version;
+            this.instanceUniqueId = policy.instanceUniqueId;           
+        }
         this.iconSprite = '';
         this.icon = 'icon-policy';
     }
diff --git a/catalog-ui/src/app/models/graph/zones/zone-instance.ts b/catalog-ui/src/app/models/graph/zones/zone-instance.ts
index fb8ec7761a..ee6473a20c 100644
--- a/catalog-ui/src/app/models/graph/zones/zone-instance.ts
+++ b/catalog-ui/src/app/models/graph/zones/zone-instance.ts
@@ -43,11 +43,11 @@ export class ZoneInstance {
     hidden:boolean;
     forceSave:Subject<Function>;
 
-    constructor(instance: PolicyInstance | GroupInstance, topologyTemplate:TopologyTemplate) {
+    constructor(instance: PolicyInstance | GroupInstance, topologyTemplateType: string, topologyTemplateId: string) {
 
         this.instanceData = instance;
-        this.parentComponentType = topologyTemplate.componentType;
-        this.parentComponentID = topologyTemplate.uniqueId;
+        this.parentComponentType = topologyTemplateType;
+        this.parentComponentID = topologyTemplateId;
 
         if (instance instanceof PolicyInstance) {
             this.type = ZoneInstanceType.POLICY;
diff --git a/catalog-ui/src/app/models/heat-parameters.ts b/catalog-ui/src/app/models/heat-parameters.ts
index 153108a5f4..a6784ae79d 100644
--- a/catalog-ui/src/app/models/heat-parameters.ts
+++ b/catalog-ui/src/app/models/heat-parameters.ts
@@ -30,6 +30,7 @@ export class HeatParameterModel {
     description:string;
     currentValue:string;
     defaultValue:string;
+    envDisplayName:string;
 
     filterTerm:string;
     constructor(parameter?:HeatParameterModel) {
diff --git a/catalog-ui/src/app/models/home-filter.ts b/catalog-ui/src/app/models/home-filter.ts
new file mode 100644
index 0000000000..2aa509b3d8
--- /dev/null
+++ b/catalog-ui/src/app/models/home-filter.ts
@@ -0,0 +1,30 @@
+import { IEntityFilterObject, ISearchFilter } from "app/ng2/pipes/entity-filter.pipe";
+
+export interface IHomeFilterParams {
+    'filter.term': string;
+    'filter.distributed': string;
+    'filter.status': string
+}
+
+
+export class HomeFilter implements IEntityFilterObject{
+    selectedStatuses: Array<string>;
+    distributed: Array<string>;
+    search: ISearchFilter;
+
+    constructor(params = {}) {
+        this.search = { filterTerm : params['filter.term'] || "" };
+        this.selectedStatuses = params['filter.status']? params['filter.status'].split(',') : [];
+        this.distributed = params['filter.distributed']? params['filter.distributed'].split(',') : []
+        
+    }
+
+    public toUrlParam = ():IHomeFilterParams => {
+        return {
+            'filter.term': this.search.filterTerm,
+            'filter.distributed': this.distributed && this.distributed.join(',') || null,
+            'filter.status': this.selectedStatuses && this.selectedStatuses.join(',') || null
+        };
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/inputs.ts b/catalog-ui/src/app/models/inputs.ts
index e5b2274835..49fd16dfaf 100644
--- a/catalog-ui/src/app/models/inputs.ts
+++ b/catalog-ui/src/app/models/inputs.ts
@@ -27,7 +27,7 @@ import {InputPropertyBase} from "./input-property-base";
 import {SchemaPropertyGroupModel} from "./aschema-property";
 
 export class InputsGroup {
-    constructor(inputsObj?:InputsGroup) {
+    constructor(inputsObj?: InputsGroup) {
         _.forEach(inputsObj, (inputs:Array<InputModel>, instance) => {
             this[instance] = [];
             _.forEach(inputs, (input:InputModel):void => {
diff --git a/catalog-ui/src/app/models/modules/base-module.ts b/catalog-ui/src/app/models/modules/base-module.ts
index e27065bbfa..b016427394 100644
--- a/catalog-ui/src/app/models/modules/base-module.ts
+++ b/catalog-ui/src/app/models/modules/base-module.ts
@@ -48,7 +48,7 @@ export class Module {
     public groupInstanceUniqueId:string; // This will only have a value if this is a group instance
 
     constructor(module?:Module) {
-        if (module) {
+        if (module) {   
             this.name = module.name;
             this.groupUUID = module.groupUUID;
             this.invariantUUID = module.invariantUUID;
diff --git a/catalog-ui/src/app/models/operation.ts b/catalog-ui/src/app/models/operation.ts
index bf037729e4..30095b92ef 100644
--- a/catalog-ui/src/app/models/operation.ts
+++ b/catalog-ui/src/app/models/operation.ts
@@ -2,16 +2,20 @@
 
 export class OperationParameter {
     name: string;
-    type: String;
-    inputId: string;
-    required: boolean;
+    type: string;
+    inputId?: string;
+    required?: boolean;
+    property?: string;
+    mandatory?: boolean;
 
     constructor(param?: any) {
         if (param) {
             this.name = param.name;
             this.type = param.type;
-            this.inputId = param.inputId;
+            this.inputId = param.inputId ;
             this.required = param.required;
+            this.property = param.property;
+            this.mandatory = param.mandatory;
         }
     }
 }
@@ -76,17 +80,41 @@ export class BEOperationModel {
     }
 }
 
-export class OperationModel extends BEOperationModel {
+export class OperationModel extends BEOperationModel{
     interfaceType: string;
     interfaceId: string;
-    artifactFileName: string;
-    artifactData: any;
+    operationType: string;
+    description: string;
+    uniqueId: string;
+    artifactFileName?: string;
+    artifactData?: any;
+
+    inputParams: IOperationParamsList;
+    outputParams: IOperationParamsList;
+
+    workflowId: string;
+    workflowVersionId: string;
+
+    protected OperationTypeEnum: Array<String> = [
+        'Create',
+        'Delete',
+        'Instantiate',
+        'Start',
+        'Stop'
+    ];
 
     constructor(operation?: any) {
         super(operation);
         if (operation) {
             this.interfaceId = operation.interfaceId;
             this.interfaceType = operation.interfaceType;
+            this.description = operation.description;
+            this.inputParams = operation.inputParams;
+            this.operationType = operation.operationType;
+            this.outputParams = operation.outputParams;
+            this.uniqueId = operation.uniqueId;
+            this.workflowId = operation.workflowId;
+            this.workflowVersionId = operation.workflowVersionId;
             this.artifactFileName = operation.artifactFileName;
             this.artifactData = operation.artifactData;
         }
@@ -95,6 +123,22 @@ export class OperationModel extends BEOperationModel {
     public displayType(): string {
         return displayType(this.interfaceType);
     }
+
+    public createInputParamsList(inputParams: Array<OperationParameter>): void {
+        this.inputParams = {
+            listToscaDataDefinition: inputParams
+        };
+    }
+
+    public createOutputParamsList(outputParams: Array<OperationParameter>): void {
+        this.outputParams = {
+            listToscaDataDefinition: outputParams
+        };
+    }
+}
+
+export interface CreateOperationResponse extends OperationModel {
+    artifactUUID: string;
 }
 
 export class InterfaceModel {
@@ -115,4 +159,4 @@ export class InterfaceModel {
     }
 }
 
-const displayType = (type:string) => type && type.substr(type.lastIndexOf('.') + 1);
+const displayType = (type:string) => type && type.substr(type.lastIndexOf('.') + 1);
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/paths-and-names.ts b/catalog-ui/src/app/models/paths-and-names.ts
index 7304d9641f..1e151647a6 100644
--- a/catalog-ui/src/app/models/paths-and-names.ts
+++ b/catalog-ui/src/app/models/paths-and-names.ts
@@ -20,4 +20,4 @@
 
 export class PathsAndNamesDefinition {
   constructor(public path: string, public friendlyName: string, public searchable: boolean = true) {}
-}
\ No newline at end of file
+}
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
index 33e83ce00a..82f15a83d4 100644
--- a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
+++ b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
@@ -55,7 +55,6 @@ export class DerivedFEProperty extends PropertyBEModel {
             this.name = UUID.UUID();
             this.parentName = parentName;
             this.propertiesName = parentName + '#' + this.name;
-
             
             if (property.type == PROPERTY_TYPES.LIST) {
                 this.mapKey = property.schema.property.type.split('.').pop();
@@ -75,6 +74,7 @@ export class DerivedFEProperty extends PropertyBEModel {
             this.schema = new SchemaPropertyGroupModel(new SchemaProperty(property.schema.property));
             this.updateValueObjOrig();
         }
+        // this.constraints = property ? property.constraints : null;
         this.valueObjIsValid = true;
         this.derivedDataType = this.getDerivedPropertyType();
     }
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
index 5d25142e5a..1d263bd8b0 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
@@ -18,8 +18,11 @@
  * ============LICENSE_END=========================================================
  */
 
-import {PropertyInputDetail, SchemaPropertyGroupModel, SchemaProperty, ToscaPresentationData} from "app/models";
-import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
+import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils/constants';
+import { SchemaProperty, SchemaPropertyGroupModel } from '../aschema-property';
+import { ToscaPresentationData } from '../tosca-presentation';
+import { PropertyInputDetail } from './property-input-detail';
+
 export enum DerivedPropertyType {
     SIMPLE,
     LIST,
@@ -29,7 +32,7 @@ export enum DerivedPropertyType {
 export class PropertyPolicyDetail {
     policyId: string;
     propertyName: string;
-    constructor(propertyPolicy?:PropertyPolicyDetail) {
+    constructor(propertyPolicy?: PropertyPolicyDetail) {
         if(propertyPolicy) {
             this.policyId = propertyPolicy.policyId;
             this.propertyName = propertyPolicy.propertyName;
@@ -39,13 +42,13 @@ export class PropertyPolicyDetail {
 
 export class PropertyBEModel {
 
-    constraints: Array<any>;
+    constraints: any[];
     defaultValue: string;
     definition: boolean;
     description: string;
     fromDerived: boolean;
-    getInputValues: Array<PropertyInputDetail>;
-    getPolicyValues: Array<PropertyPolicyDetail>;
+    getInputValues: PropertyInputDetail[];
+    getPolicyValues: PropertyPolicyDetail[];
     name: string;
     origName: string;
     parentUniqueId: string;
@@ -88,54 +91,28 @@ export class PropertyBEModel {
 
         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
+        } 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;
+        const temp = angular.copy(this);
+        temp.value = temp.value === '{}' || temp.value === '[]' ? undefined : temp.value;
+        temp.defaultValue = temp.defaultValue === '{}' || temp.defaultValue === '[]' ? undefined : temp.defaultValue;
         return temp;
-    };
+    }
 
     public getDerivedPropertyType = () => {
         if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1) {
             return DerivedPropertyType.SIMPLE;
-        } else if (this.type == PROPERTY_TYPES.LIST) {
+        } else if (this.type === PROPERTY_TYPES.LIST) {
             return DerivedPropertyType.LIST;
-        } else if (this.type == PROPERTY_TYPES.MAP) {
+        } else if (this.type === PROPERTY_TYPES.MAP) {
             return DerivedPropertyType.MAP;
         } else {
             return DerivedPropertyType.COMPLEX;
         }
     }
-
 }
 
-
-// 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.ts b/catalog-ui/src/app/models/properties.ts
index 016c5b9f20..b87edff0c1 100644
--- a/catalog-ui/src/app/models/properties.ts
+++ b/catalog-ui/src/app/models/properties.ts
@@ -40,6 +40,7 @@ export class PropertiesGroup {
 export interface IPropertyModel extends InputPropertyBase {
 
     //server data
+    //constraints:Array<Object>;
     source:string;
 
     //instance properties
@@ -59,6 +60,7 @@ export class PropertyModel extends PropertyBEModel implements IPropertyModel {
     //server data
     uniqueId:string;
     name:string;
+    constraints:Array<Object>;
     defaultValue:string;
     description:string;
     password:boolean;
@@ -91,6 +93,7 @@ export class PropertyModel extends PropertyBEModel implements IPropertyModel {
     constructor(property?:PropertyModel) {
         super(property);
         if (property) {
+            // this.constraints = property.constraints;
             this.source = property.source;
             this.valueUniqueUid = property.valueUniqueUid;
             this.path = property.path;
diff --git a/catalog-ui/src/app/models/relationship-types.ts b/catalog-ui/src/app/models/relationship-types.ts
index 8ae827bff4..72e64024f7 100644
--- a/catalog-ui/src/app/models/relationship-types.ts
+++ b/catalog-ui/src/app/models/relationship-types.ts
@@ -14,7 +14,7 @@
  * permissions and limitations under the License.
  */
 
-import {ToscaPresentationData} from "./tosca-presentation";
+import {ToscaPresentationData} from './tosca-presentation';
 
 export class RelationshipTypesMap {
     relationshipTypesMap: RelationshipTypesMapData;
diff --git a/catalog-ui/src/app/models/requirement.ts b/catalog-ui/src/app/models/requirement.ts
index 3cc0cf22e4..d58aabd457 100644
--- a/catalog-ui/src/app/models/requirement.ts
+++ b/catalog-ui/src/app/models/requirement.ts
@@ -51,7 +51,7 @@ export class Requirement implements RequirementCapabilityModel{
     uniqueId:string;
     relationship:string;
     leftOccurrences:string;
-    minOccurrences: number;
+    minOccurrences:string | number;
     maxOccurrences:string;
     //custom
     filterTerm:string;
@@ -102,4 +102,14 @@ export class Requirement implements RequirementCapabilityModel{
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
+export class RequirementUI extends Requirement {
+    isCreatedManually: boolean;
+
+    constructor(input: Requirement, componentUniqueId: string) {
+        super(input);
+        this.isCreatedManually = input.ownerId === componentUniqueId;
+    }
+}
+
 
diff --git a/catalog-ui/src/app/models/schema-attribute.ts b/catalog-ui/src/app/models/schema-attribute.ts
index c635203e17..35211d4db8 100644
--- a/catalog-ui/src/app/models/schema-attribute.ts
+++ b/catalog-ui/src/app/models/schema-attribute.ts
@@ -19,12 +19,13 @@
  */
 
 'use strict';
-import {SchemaProperty} from "./aschema-property";
+
+import { SchemaProperty } from './aschema-property';
 
 export class SchemaAttributeGroupModel {
-    property:SchemaAttribute;
+    property: SchemaAttribute;
 
-    constructor(schemaAttribute?:SchemaAttribute) {
+    constructor(schemaAttribute?: SchemaAttribute) {
         this.property = schemaAttribute;
     }
 }
diff --git a/catalog-ui/src/app/models/server-error-response.spec.ts b/catalog-ui/src/app/models/server-error-response.spec.ts
new file mode 100644
index 0000000000..c5c465d1ca
--- /dev/null
+++ b/catalog-ui/src/app/models/server-error-response.spec.ts
@@ -0,0 +1,74 @@
+import { ServerErrors } from '../utils/constants';
+import { ServerErrorResponse } from './server-error-response';
+
+describe('Test Error Response', () => {
+
+    const requestError = {
+        serviceException: {
+            ecompRequestId: 'd01d4bca-2afa-4394-97c5-6d1b04409545',
+            messageId: 'SVC4558',
+            text: 'Error: Action is not permitted as your \'%1\' includes non-validated \'%2\' resource.',
+            variables: ['service', 'vf1']
+        }
+    };
+
+    const ng1ErrorResponse = {
+        status: 403,
+        data: { requestError },
+        statusText: 'Forbidden'
+    };
+
+    const ng5ErrorResponse = {
+        status: 403,
+        error: { requestError },
+        statusText: 'Forbidden'
+    };
+
+    const ng5InternalServerError = {
+        status: 500,
+        error: 'Oops, server error has occurred...',
+        statusText: 'Internal Server Error'
+    };
+
+    const ng1InternalServerError = {
+        status: 500,
+        data: 'Oops, server error has occurred...',
+        statusText: 'Internal Server Error'
+    };
+
+    it('NG1: Verify that server error response is constructed correctly from NG1 structure', () => {
+        const response: ServerErrorResponse = new ServerErrorResponse(ng1ErrorResponse, true);
+        const formatterMessage = 'Action is not permitted as your \'service\' includes non-validated \'vf1\' resource.';
+
+        expect(response.ecompRequestId).toEqual(ng1ErrorResponse.data.requestError.serviceException.ecompRequestId);
+        expect(response.message).toEqual(formatterMessage);
+        expect(response.status).toEqual(ng1ErrorResponse.status);
+        expect(response.title).toEqual(ServerErrors.ERROR_TITLE);
+    });
+
+    it('NG5: Verify that server error response is constructed correctly from NG5 structure', () => {
+        const response: ServerErrorResponse = new ServerErrorResponse(ng5ErrorResponse);
+        const formatterMessage = 'Action is not permitted as your \'service\' includes non-validated \'vf1\' resource.';
+
+        expect(response.ecompRequestId).toEqual(ng5ErrorResponse.error.requestError.serviceException.ecompRequestId);
+        expect(response.message).toEqual(formatterMessage);
+        expect(response.status).toEqual(ng5ErrorResponse.status);
+        expect(response.title).toEqual(ServerErrors.ERROR_TITLE);
+    });
+
+    it('NG1: Verify that internal server error produce generic message', () => {
+        const response: ServerErrorResponse = new ServerErrorResponse(ng1InternalServerError, true);
+
+        expect(response.message).toEqual(ServerErrors.DEFAULT_ERROR);
+        expect(response.status).toEqual(ng5InternalServerError.status);
+        expect(response.title).toEqual(ServerErrors.ERROR_TITLE);
+    });
+
+    it('NG5: Verify that internal server error produce generic message', () => {
+        const response: ServerErrorResponse = new ServerErrorResponse(ng5InternalServerError);
+
+        expect(response.message).toEqual(ServerErrors.DEFAULT_ERROR);
+        expect(response.status).toEqual(ng5InternalServerError.status);
+        expect(response.title).toEqual(ServerErrors.ERROR_TITLE);
+    });
+});
diff --git a/catalog-ui/src/app/models/server-error-response.ts b/catalog-ui/src/app/models/server-error-response.ts
index 61d09af48b..247774ce2a 100644
--- a/catalog-ui/src/app/models/server-error-response.ts
+++ b/catalog-ui/src/app/models/server-error-response.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -21,9 +21,8 @@
 /**
  * Created by ngordon on 7/27/2017.
  */
-
-import { Response } from '@angular/http';
-import { SEVERITY, ServerErrors } from "../utils/constants";
+import { ServerErrors } from '../utils/constants';
+import '../utils/prototypes';
 
 export class ServerErrorResponse {
 
@@ -31,48 +30,72 @@ export class ServerErrorResponse {
     message: string;
     messageId: string;
     status: number;
-    severity: SEVERITY;
-
-    constructor(response?: Response) {
+    ecompRequestId: string;
 
+    constructor(response?: any, isNg1Response?: boolean) {
         if (response) {
-            let rejectionObj: any = {};
-            if (response.text().length) {
-                let rejection = response.json();
-                rejectionObj = rejection.serviceException || rejection.requestError && (rejection.requestError.serviceException || rejection.requestError.policyException);
-                rejectionObj.text = this.getFormattedMessage(rejectionObj.text || ServerErrors.MESSAGE_ERROR, rejectionObj.variables);
+            if (isNg1Response) {
+                // Shall handle the case where this error response is generated from the NG1 http interceptor
+                this.setValuesByRejectionObject(response, response.data);
+            } else {
+                // Shall handle NG5 http error responses
+                this.setValuesByRejectionObject(response, response.error);
             }
+        }
+    }
+
+    private setValuesByRejectionObject(response: any, errorResponseBody: any) {
+        let rejectionObj: any = {};
 
+        // If it is an internal server error, we dont want to expose anything to the user, just display a default error an return
+        if (response.status === 500) {
             this.title = ServerErrors.ERROR_TITLE;
-            this.message = rejectionObj.text || response.statusText || ServerErrors.DEFAULT_ERROR;
-            this.messageId = rejectionObj.messageId;
+            this.message = ServerErrors.DEFAULT_ERROR;
             this.status = response.status;
-            this.severity = SEVERITY.ERROR;
+            return;
         }
-    }
 
+        if (errorResponseBody) {
+            if (errorResponseBody.requestError || errorResponseBody.serviceException) {
+                rejectionObj = errorResponseBody.serviceException || errorResponseBody.requestError.serviceException || errorResponseBody.requestError.policyException;
+                rejectionObj.text = this.getFormattedMessage(rejectionObj.text || ServerErrors.MESSAGE_ERROR, rejectionObj.variables);
+            } else if (errorResponseBody.type === 'application/octet-stream') {
+                rejectionObj.text = 'Error downloading file';
+                rejectionObj.title = ServerErrors.DOWNLOAD_ERROR;
+            } else if (errorResponseBody.message) {
+                rejectionObj.text = response.error.message;
+            } else {
+                rejectionObj.text = response.error;
+            }
+        }
+        this.title = rejectionObj.title || ServerErrors.ERROR_TITLE;
+        this.message = rejectionObj.text || response.statusText || ServerErrors.DEFAULT_ERROR;
+        this.messageId = rejectionObj.messageId;
+        this.status = response.status;
+        this.ecompRequestId = rejectionObj.ecompRequestId;
+    }
 
-    private getFormattedMessage = (text: string, variables: Array<string>): string => { //OLD CODE
-        // Remove the "Error: " text at the begining
-        if (text.trim().indexOf("Error:") === 0) {
-            text = text.replace("Error:", "").trim();
+    private getFormattedMessage = (text: string, variables: string[]): string => {
+        // Remove the "Error: " text at the beginning
+        if (text.trim().indexOf('Error:') === 0) {
+            text = text.replace('Error:', '').trim();
         }
 
-        //mshitrit DE199895 bug fix
+        // mshitrit DE199895 bug fix
         let count: number = 0;
-        variables.forEach(function (item) {
+        variables.forEach( (item) => {
             variables[count] = item ? item.replace('<', '&lt').replace('>', '&gt') : '';
             count++;
         });
 
         // Format the message in case has array to <ul><li>
-        text = text.replace(/\[%(\d+)\]/g, function (_, m) {
-            let tmp = [];
-            let list = variables[--m].split(";");
-            list.forEach(function (item) {
-                tmp.push("<li>" + item + "</li>");
+        text = text.replace(/\[%(\d+)\]/g, (_, m) => {
+            const tmp = [];
+            const list = variables[--m].split(';');
+            list.forEach((item) => {
+                tmp.push('<li>' + item + '</li>');
             });
-            return "<ul>" + tmp.join("") + "</ul>";
+            return '<ul>' + tmp.join('') + '</ul>';
         });
 
         // Format the message %1 %2
@@ -80,5 +103,5 @@ export class ServerErrorResponse {
 
         return text;
 
-    };
-}
\ No newline at end of file
+    }
+}
diff --git a/catalog-ui/src/app/models/service-instance-properties-and-interfaces.ts b/catalog-ui/src/app/models/service-instance-properties-and-interfaces.ts
index 168b0af215..41bd18481f 100644
--- a/catalog-ui/src/app/models/service-instance-properties-and-interfaces.ts
+++ b/catalog-ui/src/app/models/service-instance-properties-and-interfaces.ts
@@ -13,8 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-
-import {PropertyModel, InputModel, InterfaceModel} from 'app/models';
+import { PropertyModel, InputModel, InterfaceModel} from 'app/models';
 
 export class ServiceInstanceObject {
     id: string;
@@ -23,8 +22,8 @@ export class ServiceInstanceObject {
     inputs: Array<InputModel> = [];
     interfaces: Array<InterfaceModel> = [];
 
-    constructor(input?:any) {
-        if(input) {
+    constructor(input?: any) {
+        if (input) {
             this.id = input.id;
             this.name = input.name;
             this.properties = input.properties;
diff --git a/catalog-ui/src/app/models/service-instance-properties.ts b/catalog-ui/src/app/models/service-instance-properties.ts
deleted file mode 100644
index 9e9f1cce7f..0000000000
--- a/catalog-ui/src/app/models/service-instance-properties.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*!
- * Copyright © 2016-2018 European Support Limited
- *
- * 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.
- */
-
-import {PropertyModel} from 'app/models';
-
-export class ServiceInstanceObject {
-    id: string;
-    name: string;
-    properties: Array<PropertyModel> = [];
-
-    constructor(input?:any) {
-        if(input) {
-            this.id = input.id;
-            this.name = input.name;
-            this.properties = input.properties;
-        }
-    }
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/user.ts b/catalog-ui/src/app/models/user.ts
index 0fb5364290..7a9bed80f3 100644
--- a/catalog-ui/src/app/models/user.ts
+++ b/catalog-ui/src/app/models/user.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -17,69 +17,68 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-
 'use strict';
 
 export enum UserRole {
     ADMIN,
-    DESIGNER,
-    TESTER,
-    GOVERNOR,
-    OPS
+    DESIGNER
 }
 
+// tslint:disable-next-line:interface-name
 export interface IUserManager {
-    isInEditMode:boolean;
-    filterTerm:string;
+    isInEditMode: boolean;
+    filterTerm: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IUserProperties extends IUserManager {
-    firstName:string;
-    lastName:string;
-    userId:string;
-    email:string;
-    role:string;
-    tempRole:string;
-    lastLoginTime:string;
-    status:string;
+    firstName: string;
+    lastName: string;
+    userId: string;
+    email: string;
+    role: string;
+    tempRole: string;
+    lastLoginTime: string;
+    status: string;
 }
 
+// tslint:disable-next-line:interface-name
 export interface IUser {
-    userInfo:IUserProperties;
-    getRole():UserRole;
-    getRoleToView():string;
-    getName():string;
-    getFirstName():string;
-    getLastName():string;
+    userInfo: IUserProperties;
+    getRole(): UserRole;
+    getRoleToView(): string;
+    getName(): string;
+    getFirstName(): string;
+    getLastName(): string;
 }
 
 export class User implements IUser {
 
-    constructor(public userInfo:IUserProperties) {
+    constructor(public userInfo: IUserProperties) {
     }
 
     public getLastName = () => {
         return this.userInfo.lastName;
-    };
+    }
 
     public getFirstName = () => {
         return this.userInfo.firstName;
-    };
+    }
 
     public getName = () => {
         return this.userInfo.firstName + ' ' + this.userInfo.lastName;
-    };
+    }
 
     public getLastLogin = () => {
-        if (!this.userInfo.lastLoginTime || this.userInfo.lastLoginTime === "0") {
-            return "";
+        if (!this.userInfo.lastLoginTime || this.userInfo.lastLoginTime === '0') {
+            return '';
         } else {
             return this.userInfo.lastLoginTime;
         }
-    };
+    }
 
-    public getRole = ():UserRole => {
-        let role:UserRole;
+    public getRole = (): UserRole => {
+        let role: UserRole;
         switch (UserRole[this.userInfo.role.toUpperCase()]) {
             case UserRole.ADMIN:
                 role = UserRole.ADMIN;
@@ -87,21 +86,12 @@ export class User implements IUser {
             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;
         }
         return role;
-    };
+    }
 
-    public getRoleToView = ():string => {
-        let role:string = this.userInfo.role.toLowerCase().replace('governor', 'governance_Rep');
+    public getRoleToView = (): string => {
+        const role: string = this.userInfo.role.toLowerCase().replace('governor', 'governance_Rep');
         return role.charAt(0).toUpperCase() + role.slice(1).replace('_', ' ');
     }
 }
diff --git a/catalog-ui/src/app/models/validation-config.ts b/catalog-ui/src/app/models/validation-config.ts
index ac15d2850e..0e594fd63c 100644
--- a/catalog-ui/src/app/models/validation-config.ts
+++ b/catalog-ui/src/app/models/validation-config.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -24,9 +24,16 @@ class PropertyValue {
 }
 
 class validationPatterns {
-    string: string;
-    comment:string;
-    integer: string;
+    vendorRelease: RegExp;
+    stringOrEmpty: string;
+    vendorName: RegExp;
+    vendorModelNumber: RegExp;
+    tag: RegExp;
+    contactId: RegExp;
+    componentName: RegExp;
+    string: RegExp;
+    comment:RegExp;
+    integer: RegExp;
 }
 
 export class Validations {
@@ -38,3 +45,25 @@ export class ValidationConfiguration {
     static validation: Validations;
 
 }
+
+export class Validation {
+    componentNameValidationPattern:RegExp;
+    contactIdValidationPattern:RegExp;
+    tagValidationPattern:RegExp;
+    VendorReleaseValidationPattern:RegExp;
+    VendorNameValidationPattern:RegExp;
+    VendorModelNumberValidationPattern:RegExp;
+    commentValidationPattern:RegExp;
+
+    constructor(validationData?:Validations) {
+        if(validationData) {
+            this.commentValidationPattern = validationData.validationPatterns.comment;
+            this.componentNameValidationPattern = validationData.validationPatterns.componentName;
+            this.contactIdValidationPattern = validationData.validationPatterns.contactId;
+            this.tagValidationPattern = validationData.validationPatterns.tag;
+            this.VendorModelNumberValidationPattern = validationData.validationPatterns.vendorModelNumber;
+            this.VendorNameValidationPattern = validationData.validationPatterns.vendorName;
+            this.VendorReleaseValidationPattern = validationData.validationPatterns.vendorRelease;
+        }
+    }
+}