re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

34 files changed, 628 insertions, 170 deletions

diff --git a/catalog-ui/src/app/models/app-config.ts b/catalog-ui/src/app/models/app-config.ts
index 54c059afb3..a0ebb54638 100644
--- a/catalog-ui/src/app/models/app-config.ts
+++ b/catalog-ui/src/app/models/app-config.ts
@@ -128,8 +128,7 @@ export interface IConfigRoles {
 }
 
 export interface IConfigRole {
-    pages:Array<string>;
-    states:IConfigState;
+    changeLifecycleStateButtons:any;
 }
 
 export interface IConfigState {
@@ -222,6 +221,11 @@ export interface ITester {
     email:string;
 }
 
+export interface IComponentType {
+    RESOURCE:any;
+    SERVICE:any;
+}
+
 export interface IAppMenu {
     roles:IConfigRoles;
     confirmationMessages:IConfirmationMessages;
diff --git a/catalog-ui/src/app/models/catalogSelector.ts b/catalog-ui/src/app/models/catalogSelector.ts
new file mode 100644
index 0000000000..b3a7aa353a
--- /dev/null
+++ b/catalog-ui/src/app/models/catalogSelector.ts
@@ -0,0 +1,14 @@
+/* added Michael */
+// export interface ILeftSwitchItemModel {
+export interface ICatalogSelector{    
+    value: CatalogSelectorTypes;
+    title: string;
+    header: string;
+    hidden?: number;
+    disabled?: number;
+}
+
+export enum CatalogSelectorTypes {
+    Active,
+    Archive,
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/category.ts b/catalog-ui/src/app/models/category.ts
index e45100aecc..0d5c63b5c1 100644
--- a/catalog-ui/src/app/models/category.ts
+++ b/catalog-ui/src/app/models/category.ts
@@ -22,8 +22,7 @@
 
 
 
-export class ICategoryBase {
-
+export interface ICategoryBase {
     //server properties
     name:string;
     normalizedName:string;
@@ -34,32 +33,13 @@ export class ICategoryBase {
     filterTerms:string;
     isDisabled:boolean;
     filteredGroup:Array<IGroup>;
-
-    constructor(category?:ICategoryBase) {
-        if (category) {
-            this.name = category.name;
-            this.normalizedName = category.normalizedName;
-            this.icons = category.icons;
-            this.filterTerms = category.filterTerms;
-            this.isDisabled = category.isDisabled;
-            this.filteredGroup = category.filteredGroup;
-        }
-    }
 }
 
-export class IMainCategory extends ICategoryBase {
+export interface IMainCategory extends ICategoryBase {
     subcategories:Array<ISubCategory>;
-
-    constructor();
-    constructor(category?:IMainCategory) {
-        super(category);
-        if (category) {
-            this.subcategories = category.subcategories;
-        }
-    }
 }
 
-export class ISubCategory extends ICategoryBase {
+export interface ISubCategory extends ICategoryBase {
     groupings:Array<ICategoryBase>;
 }
 
diff --git a/catalog-ui/src/app/models/component-metadata.ts b/catalog-ui/src/app/models/component-metadata.ts
index 1545739ce3..9f5e22cce4 100644
--- a/catalog-ui/src/app/models/component-metadata.ts
+++ b/catalog-ui/src/app/models/component-metadata.ts
@@ -47,6 +47,8 @@ export class ComponentMetadata {
     public highestVersion:boolean;
     public normalizedName:string;
     public systemName:string;
+    public archived:boolean;
+    public vspArchived: boolean;
 
     //Resource only
     public resourceType: string;
@@ -66,9 +68,11 @@ export class ComponentMetadata {
     public serviceType:string;
     public serviceRole:string;
     public environmentContext:string;
+    public instantiationType:string;
 
 
-    //backend lifecycleState
+
+        //backend lifecycleState
     public state:string;
 
     deserialize (response): ComponentMetadata {
@@ -111,6 +115,9 @@ export class ComponentMetadata {
         this.serviceType = response.serviceType;
         this.serviceRole = response.serviceRole;
         this.environmentContext = response.environmentContext;
+        this.archived = response.archived;
+        this.instantiationType = response.instantiationType;
+        this.vspArchived = response.vspArchived;
         return this;
     }
 
diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts
index adcf498342..8f0fa33c42 100644
--- a/catalog-ui/src/app/models/components/component.ts
+++ b/catalog-ui/src/app/models/components/component.ts
@@ -34,6 +34,7 @@ import {Capability} from "../capability";
 import {Requirement} from "../requirement";
 import {Relationship} from "../graph/relationship";
 import { PolicyInstance } from "app/models/graph/zones/policy-instance";
+import { GroupInstance } from "../graph/zones/group-instance";
 
 
 // import {}
@@ -96,8 +97,12 @@ export interface IComponent {
     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;
@@ -158,7 +163,8 @@ export abstract class Component implements IComponent {
     public systemName:string;
     public projectCode:string;
     public policies:Array<PolicyInstance>;
-    public groups:Array<Module>;
+    public groupInstances:Array<GroupInstance>
+    public modules:Array<Module>;
     //custom properties
     public componentService:IComponentService;
     public filterTerm:string;
@@ -168,7 +174,8 @@ export abstract class Component implements IComponent {
     public subCategory:string;
     public selectedCategory:string;
     public showMenu:boolean;
-
+    public archived:boolean;
+    public vspArchived: boolean;
 
     constructor(componentService:IComponentService, protected $q:ng.IQService, component?:Component) {
         if (component) {
@@ -221,7 +228,11 @@ export abstract class Component implements IComponent {
             this.selectedInstance = component.selectedInstance;
             this.iconSprite = component.iconSprite;
             this.showMenu = true;
-            this.groups = CommonUtils.initModules(component.groups);
+            this.modules = component.modules;
+            this.groupInstances = component.groupInstances;
+            this.policies = component.policies;
+            this.archived = component.archived;
+            this.vspArchived = component.vspArchived;
         }
 
         //custom properties
@@ -239,7 +250,7 @@ export abstract class Component implements IComponent {
 
     //------------------------------------------ API Calls ----------------------------------------------------------------//
     public changeLifecycleState = (state:string, commentObj:AsdcComment):ng.IPromise<Component> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Component>();
         let onSuccess = (componentMetadata:ComponentMetadata):void => {
             this.setComponentMetadata(componentMetadata);
             // this.version = componentMetadata.version;
@@ -277,7 +288,7 @@ export abstract class Component implements IComponent {
     };
 
     public addOrUpdateArtifact = (artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ArtifactModel>();
         let onSuccess = (artifactObj:ArtifactModel):void => {
             let newArtifact = new ArtifactModel(artifactObj);
             let artifacts = this.getArtifactsByType(artifactObj.artifactGroupType);
@@ -309,7 +320,7 @@ export abstract class Component implements IComponent {
 
 
     public deleteArtifact = (artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ArtifactModel>();
         let onSuccess = (artifactObj:ArtifactModel):void => {
             let newArtifact = new ArtifactModel(artifactObj);
             let artifacts = this.getArtifactsByType(artifactObj.artifactGroupType);
@@ -327,7 +338,7 @@ export abstract class Component implements IComponent {
 
     public getArtifactByGroupType = (artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ArtifactGroupModel>();
         let onSuccess = (response:ArtifactGroupModel):void => {
             deferred.resolve(response);
         };
@@ -340,7 +351,7 @@ export abstract class Component implements IComponent {
 
     public getComponentInstanceArtifactsByGroupType = (componentInstanceId:string, artifactGroupType:string):ng.IPromise<ArtifactGroupModel> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ArtifactGroupModel>();
         let onSuccess = (response:ArtifactGroupModel):void => {
             deferred.resolve(response);
         };
@@ -352,7 +363,7 @@ export abstract class Component implements IComponent {
     };
 
     public addOrUpdateProperty = (property:PropertyModel):ng.IPromise<PropertyModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<PropertyModel>();
 
         let onError = (error:any):void => {
             deferred.reject(error);
@@ -380,7 +391,7 @@ export abstract class Component implements IComponent {
     };
 
     public addOrUpdateAttribute = (attribute:AttributeModel):ng.IPromise<AttributeModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<AttributeModel>();
 
         let onError = (error:any):void => {
             deferred.reject(error);
@@ -408,7 +419,7 @@ export abstract class Component implements IComponent {
     };
 
     public deleteProperty = (propertyId:string):ng.IPromise<PropertyModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<PropertyModel>();
         let onSuccess = ():void => {
             console.log("Property deleted");
             delete _.remove(this.properties, {uniqueId: propertyId})[0];
@@ -423,7 +434,7 @@ export abstract class Component implements IComponent {
     };
 
     public deleteAttribute = (attributeId:string):ng.IPromise<AttributeModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<AttributeModel>();
         let onSuccess = ():void => {
             console.log("Attribute deleted");
             delete _.remove(this.attributes, {uniqueId: attributeId})[0];
@@ -435,18 +446,23 @@ 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 => {
-            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;
-            });
+            this.updateInstancePropertiesSuccess(newProperties);
             deferred.resolve(newProperties);
         };
         let onFailed = (error:any):void => {
@@ -458,7 +474,7 @@ export abstract class Component implements IComponent {
     };
 
     public updateInstanceAttribute = (attribute:AttributeModel):ng.IPromise<AttributeModel> => {
-        let deferred = this.$q.defer();
+        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);
@@ -478,7 +494,7 @@ export abstract class Component implements IComponent {
     };
 
     public deleteInstanceArtifact = (artifactId:string, artifactLabel:string):ng.IPromise<ArtifactModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ArtifactModel>();
         let onSuccess = (artifactObj:ArtifactModel):void => {
             let newArtifact = new ArtifactModel(artifactObj);
             let artifacts = this.selectedInstance.deploymentArtifacts;
@@ -495,7 +511,7 @@ export abstract class Component implements IComponent {
     };
 
     public addOrUpdateInstanceArtifact = (artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ArtifactModel>();
         let onSuccess = (artifactObj:ArtifactModel):void => {
             switch (artifactObj.artifactGroupType) {
                 case ArtifactGroupType.DEPLOYMENT:
@@ -519,7 +535,7 @@ export abstract class Component implements IComponent {
     };
 
     public uploadInstanceEnvFile = (artifact:ArtifactModel):ng.IPromise<ArtifactModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ArtifactModel>();
         let onSuccess = (artifactObj:ArtifactModel):void => {
             this.selectedInstance.deploymentArtifacts[artifactObj.artifactLabel] = artifactObj;
             deferred.resolve(artifactObj);
@@ -533,7 +549,7 @@ export abstract class Component implements IComponent {
 
     //this function will update the instance version than the function call getComponent to update the current component and return the new instance version
     public changeComponentInstanceVersion = (componentUid:string):ng.IPromise<Component> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Component>();
         let onFailed = (error:any):void => {
             deferred.reject(error);
         };
@@ -553,7 +569,7 @@ export abstract class Component implements IComponent {
     };
 
     public createComponentInstance = (componentInstance:ComponentInstance):ng.IPromise<ComponentInstance> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ComponentInstance>();
         let onSuccess = (instance:ComponentInstance):void => {
             this.componentInstances.push(instance);
             deferred.resolve(instance);
@@ -566,7 +582,7 @@ export abstract class Component implements IComponent {
     };
 
     public updateComponentInstance = (componentInstance:ComponentInstance):ng.IPromise<ComponentInstance> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<ComponentInstance>();
         let onSuccess = (updatedInstance:ComponentInstance):void => {
             let componentInstance:ComponentInstance = _.find(this.componentInstances, (instance:ComponentInstance) => {
                 return instance.uniqueId === updatedInstance.uniqueId;
@@ -585,7 +601,7 @@ export abstract class Component implements IComponent {
     };
 
     public updateMultipleComponentInstances = (instances:Array<ComponentInstance>):ng.IPromise<Array<ComponentInstance>> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<ComponentInstance>>();
         let onSuccess = (updatedInstances:Array<ComponentInstance>):void => {
             _.forEach(updatedInstances, (updatedComponentInstance) => {
                 let componentInstance:ComponentInstance = _.find(this.componentInstances, (instance:ComponentInstance) => {
@@ -607,13 +623,13 @@ export abstract class Component implements IComponent {
     };
 
     public deleteComponentInstance = (componentInstanceId:string):ng.IPromise<ComponentInstance> => {
-        let deferred = this.$q.defer();
+        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.groups = component.groups;
+                this.modules = component.modules;
                 this.componentInstancesRelations = CommonUtils.initComponentInstanceRelations(component.componentInstancesRelations);
                 deferred.resolve();
             };
@@ -680,7 +696,7 @@ export abstract class Component implements IComponent {
     };
 
     public createRelation = (relation:RelationshipModel):ng.IPromise<RelationshipModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<RelationshipModel>();
         let onSuccess = (relation:RelationshipModel):void => {
             console.info('Link created successfully', relation);
             if (!this.componentInstancesRelations) {
@@ -699,7 +715,7 @@ export abstract class Component implements IComponent {
     };
 
     public deleteRelation = (relation:RelationshipModel):ng.IPromise<RelationshipModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<RelationshipModel>();
         let onSuccess = (relation:RelationshipModel):void => {
             console.log("Link Deleted In Server");
             let relationToDelete = _.find(this.componentInstancesRelations, (item) => {
@@ -774,7 +790,7 @@ export abstract class Component implements IComponent {
 
     public getModuleForDisplay = (moduleId:string):ng.IPromise<DisplayModule> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<DisplayModule>();
         let onSuccess = (response:DisplayModule):void => {
             deferred.resolve(response);
         };
@@ -787,7 +803,7 @@ export abstract class Component implements IComponent {
 
     public getModuleInstanceForDisplay = (componentInstanceId:string, moduleId:string):ng.IPromise<DisplayModule> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<DisplayModule>();
         let onSuccess = (response:DisplayModule):void => {
             deferred.resolve(response);
         };
@@ -803,7 +819,7 @@ export abstract class Component implements IComponent {
     // get all the instances of the component (in service only VF instances)
     public getComponentInstancesFilteredByInputsAndProperties = (searchText?:string):ng.IPromise<Array<ComponentInstance>> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<ComponentInstance>>();
         let onSuccess = (response:Array<ComponentInstance>):void => {
             deferred.resolve(response);
         };
@@ -818,7 +834,7 @@ export abstract class Component implements IComponent {
     // get inputs for instance - Pagination function
     public getComponentInputs = ():ng.IPromise<Array<InputModel>> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<InputModel>>();
         let onSuccess = (inputsRes:Array<InputModel>):void => {
             this.inputs = inputsRes;
             deferred.resolve(inputsRes);
@@ -834,7 +850,7 @@ export abstract class Component implements IComponent {
     // get inputs instance - Pagination function
     public getComponentInstanceInputs = (componentInstanceId:string, originComponentUid:string):ng.IPromise<Array<InputModel>> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<InputModel>>();
         let onSuccess = (response:Array<InputModel>):void => {
             deferred.resolve(response);
         };
@@ -848,7 +864,7 @@ export abstract class Component implements IComponent {
     // get inputs inatnce - Pagination function
     public getComponentInstanceInputProperties = (componentInstanceId:string, inputId:string):ng.IPromise<Array<PropertyModel>> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<PropertyModel>>();
         let onSuccess = (response:Array<PropertyModel>):void => {
             deferred.resolve(response);
         };
@@ -862,7 +878,7 @@ export abstract class Component implements IComponent {
     // get inputs inatnce - Pagination function
     public getComponentInstanceProperties = (componentInstanceId:string):ng.IPromise<Array<PropertyModel>> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<PropertyModel>>();
         let onSuccess = (response:Array<PropertyModel>):void => {
             deferred.resolve(response);
         };
@@ -876,15 +892,15 @@ export abstract class Component implements IComponent {
 
     public updateGroupMetadata = (module:Module):ng.IPromise<Module> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Module>();
 
         let onSuccess = (updatedModule:Module):void => {
-            let groupIndex:number = _.indexOf(this.groups, _.find(this.groups, (module:Module) => {
+            let groupIndex:number = _.indexOf(this.modules, _.find(this.modules, (module:Module) => {
                 return module.uniqueId === updatedModule.uniqueId;
             }));
 
             if (groupIndex !== -1) {
-                this.groups[groupIndex] = updatedModule;
+                this.modules[groupIndex] = updatedModule;
             }
             deferred.resolve(updatedModule);
         };
@@ -1022,7 +1038,8 @@ export abstract class Component implements IComponent {
         this.systemName = componentMetadata.systemName;
         this.projectCode = componentMetadata.projectCode;
         this.categories = componentMetadata.categories;
-
+        this.archived = componentMetadata.archived || false;
+        this.vspArchived = componentMetadata.vspArchived;
     }
 
     public toJSON = ():any => {
@@ -1036,6 +1053,9 @@ export abstract class Component implements IComponent {
         temp.showMenu = undefined;
         temp.$q = undefined;
         temp.selectedCategory = undefined;
+        temp.modules = undefined
+        temp.groupInstances = undefined;
+        temp.policies = undefined;
         return temp;
     };
 }
diff --git a/catalog-ui/src/app/models/components/displayComponent.ts b/catalog-ui/src/app/models/components/displayComponent.ts
index c89490306c..f96e0bf14b 100644
--- a/catalog-ui/src/app/models/components/displayComponent.ts
+++ b/catalog-ui/src/app/models/components/displayComponent.ts
@@ -22,7 +22,6 @@
  */
 
 'use strict';
-import * as _ from "lodash";
 import {ComponentType} from "../../utils/constants";
 import {ComponentMetadata} from "../component-metadata";
 import {PolicyMetadata} from "../policy-metadata";
@@ -48,6 +47,7 @@ export class LeftPaletteComponent {
     searchFilterTerms:string;
     certifiedIconClass:string;
     icon:string;
+    isDraggable:boolean;
     isRequirmentAndCapabilitiesLoaded:boolean;
 
     uuid:string;
@@ -64,7 +64,7 @@ export class LeftPaletteComponent {
 
     categoryType:LeftPaletteMetadataTypes;
 
-    constructor(metadataType: LeftPaletteMetadataTypes, item: ComponentMetadata | PolicyMetadata) {
+    constructor(metadataType: LeftPaletteMetadataTypes, item: ComponentMetadata | PolicyMetadata | GroupMetadata) {
         if (metadataType === LeftPaletteMetadataTypes.Policy) {
             this.initPolicy(item as PolicyMetadata);
             return;
@@ -94,6 +94,7 @@ export class LeftPaletteComponent {
         this.componentType = component.componentType;
         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;
@@ -118,7 +119,7 @@ export class LeftPaletteComponent {
         this.categoryType = LeftPaletteMetadataTypes.Group;
 
         this.uniqueId = group.uniqueId;
-        this.displayName = group.type;
+        this.displayName = group.name;
         this.mainCategory = "Groups";
         this.subCategory = "Groups";
         this.iconClass = "sprite-group-icons group";
@@ -127,14 +128,15 @@ export class LeftPaletteComponent {
         this.type = group.type;
         this.componentSubType = 'GROUP';
 
-        this.searchFilterTerms = this.displayName + ' ' + group.description + ' ' + group.version;
+        this.searchFilterTerms = this.type + ' ' + group.name + ' ' + group.version;
+        this.isDraggable = false;
     }
 
     private initPolicy(policy:PolicyMetadata): void {
         this.categoryType = LeftPaletteMetadataTypes.Policy;
 
         this.uniqueId = policy.uniqueId;
-        this.displayName = policy.type;
+        this.displayName = policy.name;
         this.mainCategory = "Policies";
         this.subCategory = "Policies";
         this.iconClass = "sprite-policy-icons policy";
@@ -143,7 +145,8 @@ export class LeftPaletteComponent {
         this.type = policy.type;
         this.componentSubType = 'POLICY';
 
-        this.searchFilterTerms = this.displayName + ' ' + policy.description + ' ' + policy.version;
+        this.searchFilterTerms = this.type + ' ' + policy.name + ' ' + policy.version;
+        this.isDraggable = false;
     }
 
     public initDisplayName = (name:string):void => {
diff --git a/catalog-ui/src/app/models/components/resource.ts b/catalog-ui/src/app/models/components/resource.ts
index 5bd80e3b72..733f2ff9d1 100644
--- a/catalog-ui/src/app/models/components/resource.ts
+++ b/catalog-ui/src/app/models/components/resource.ts
@@ -104,7 +104,7 @@ export class Resource extends Component {
     };
 
     public createComponentOnServer = ():ng.IPromise<Component> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Component>();
         let onSuccess = (component:Resource):void => {
             this.payloadData = undefined;
             this.payloadName = undefined;
@@ -125,7 +125,7 @@ export class Resource extends Component {
 
 
     public updateResourceGroupProperties = (module:DisplayModule, properties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<PropertyModel>>();
         let onSuccess = (updatedProperties:Array<PropertyModel>):void => {
             _.forEach(updatedProperties, (property:PropertyModel) => { // Replace all updated properties on the module we needed to update
                 _.extend(_.find(module.properties, {uniqueId: property.uniqueId}), property);
@@ -144,7 +144,7 @@ export class Resource extends Component {
 
     // For now we only implement the logic in service level
     public createInputsFormInstances = (instanceInputsPropertiesMap:InstancesInputsOrPropertiesMapData):ng.IPromise<Array<InputModel>> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<InputModel>>();
         return deferred.promise;
     };
 
@@ -175,6 +175,9 @@ export class Resource extends Component {
         temp.$q = undefined;
         temp.selectedCategory = undefined;
         temp.importedFile = undefined;
+        temp.modules = undefined;
+        temp.groupInstances = undefined;
+        temp.policies = undefined;
         return temp;
     };
 }
diff --git a/catalog-ui/src/app/models/components/service.ts b/catalog-ui/src/app/models/components/service.ts
index 439925f062..a947e81716 100644
--- a/catalog-ui/src/app/models/components/service.ts
+++ b/catalog-ui/src/app/models/components/service.ts
@@ -39,6 +39,7 @@ export class Service extends Component {
     public serviceType:string;
     public serviceRole:string;
     public environmentContext:string;
+    public instantiationType:string;
     public forwardingPaths:{ [key:string]:ForwardingPath } = {};
 
     constructor(componentService:IServiceService, $q:ng.IQService, component?:Service) {
@@ -51,6 +52,7 @@ export class Service extends Component {
             this.namingPolicy = component.namingPolicy;
             this.serviceType = component.serviceType;
             this.serviceRole = component.serviceRole;
+            this.instantiationType = component.instantiationType;
             this.environmentContext = component.environmentContext;
             if (component.categories && component.categories[0]) {
                 this.mainCategory = component.categories[0].name;
@@ -78,7 +80,7 @@ export class Service extends Component {
      */
     public createInputsFormInstances = (instancesInputsMap:InstancesInputsOrPropertiesMapData, instancePropertiesMap:InstancesInputsOrPropertiesMapData):ng.IPromise<Array<InputModel>> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<InputModel>>();
         let onSuccess = (inputsCreated:Array<InputModel>):void => {
             this.inputs = inputsCreated.concat(this.inputs);
             deferred.resolve(inputsCreated);
@@ -94,8 +96,8 @@ export class Service extends Component {
     };
 
     // we need to change the name of the input to vfInstanceName + input name before sending to server in order to create the inputs on the service
-    public getServiceInputInputsAndProperties = (inputId:string):ng.IPromise<Array<InputModel>> => {
-        let deferred = this.$q.defer();
+    public getServiceInputInputsAndProperties = (inputId:string):ng.IPromise<InputsAndProperties> => {
+        let deferred = this.$q.defer<InputsAndProperties>();
         let onSuccess = (inputsAndProperties:InputsAndProperties):void => {
             let input:InputModel = _.find(this.inputs, (input:InputModel) => {
                 return input.uniqueId === inputId;
@@ -112,7 +114,7 @@ export class Service extends Component {
     };
 
     public deleteServiceInput = (inputId:string):ng.IPromise<InputModel> => {
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<InputModel>();
 
         let onSuccess = (deletedInput:InputModel):void => {
             delete _.remove(this.inputs, {uniqueId: deletedInput.uniqueId})[0];
@@ -140,7 +142,7 @@ export class Service extends Component {
 
     public updateGroupInstanceProperties = (resourceInstanceId:string, group:DisplayModule, properties:Array<PropertyModel>):ng.IPromise<Array<PropertyModel>> => {
 
-        let deferred = this.$q.defer();
+        let deferred = this.$q.defer<Array<PropertyModel>>();
         let onSuccess = (updatedProperties:Array<PropertyModel>):void => {
             _.forEach(updatedProperties, (property:PropertyModel) => { // Replace all updated properties on the we needed to update
                 _.extend(_.find(group.properties, {uniqueId: property.uniqueId}), property);
@@ -167,6 +169,7 @@ export class Service extends Component {
         this.serviceType = componentMetadata.serviceType;
         this.serviceRole = componentMetadata.serviceRole;
         this.environmentContext = componentMetadata.environmentContext;
+        this.instantiationType = componentMetadata.instantiationType;
         this.setComponentDisplayData();
     }
 
@@ -178,5 +181,21 @@ export class Service extends Component {
         }
         this.iconSprite = "sprite-services-icons";
     }
+
+    public toJSON = ():any => {
+        let temp = angular.copy(this);
+        temp.componentService = undefined;
+        temp.filterTerm = undefined;
+        temp.iconSprite = undefined;
+        temp.mainCategory = undefined;
+        temp.subCategory = undefined;
+        temp.selectedInstance = undefined;
+        temp.showMenu = undefined;
+        temp.$q = undefined;
+        temp.selectedCategory = undefined;
+        temp.modules = undefined;
+        temp.groupInstances = undefined;
+        return temp;
+    };
 }
 
diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
index e8444b3c54..fcc3298249 100644
--- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
+++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
@@ -60,6 +60,7 @@ export class ComponentInstance {
     public properties:Array<PropertyModel>;
     public groupInstances:Array<Module>;
     public invariantName:string;
+    public originArchived:boolean;
 
     constructor(componentInstance?:ComponentInstance) {
 
@@ -90,6 +91,7 @@ export class ComponentInstance {
             this.sourceModelName = componentInstance.sourceModelName;
             this.sourceModelUid = componentInstance.sourceModelUid;
             this.sourceModelUuid = componentInstance.sourceModelUuid;
+            this.originArchived = componentInstance.originArchived;
         }
     }
 
@@ -171,4 +173,8 @@ export class ComponentInstance {
         temp.capabilities = undefined;
         return temp;
     };
+
+    public get iconClass() {
+        return this.iconSprite + ' ' + this.icon;
+    }
 }
diff --git a/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts
index fb051c891d..dfd39d1b9f 100644
--- a/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts
+++ b/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts
@@ -22,6 +22,7 @@ import {ComponentInstance} from "../../componentsInstances/componentInstance";
 export abstract class CommonCINodeBase extends CommonNodeBase {
 
     public certified:boolean;
+    public archived:boolean;
     public template:string;
     public componentInstance:ComponentInstance;
     public group:string;
@@ -34,6 +35,7 @@ export abstract class CommonCINodeBase extends CommonNodeBase {
         this.img = '';
         this.certified = this.isCertified(this.componentInstance.componentVersion);
         this.displayName = instance.name;
+        this.archived = instance.originArchived;
     }
 
     private isCertified(version:string):boolean {
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 3b634b1f6e..a24142348c 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,7 +20,7 @@
 
 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
 import {CommonCINodeBase} from "../common-ci-node-base";
-import {ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service";
+import {ICanvasImage, ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service";
 import {ImagesUrl, GraphUIObjects} from "app/utils";
 import {AngularJSBridge} from "app/services";
 
@@ -42,47 +42,72 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements
     }
 
     private init() {
-
         this.displayName = this.getDisplayName();
         this.isUcpe = false;
         this.isGroup = false;
         this.isUcpePart = false;
         this.isInsideGroup = false;
     }
+    
+    
+    public setUncertifiedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string {
 
-    public initUncertifiedImage(node:Cy.Collection, nodeMinSize:number):string {
-        
         let uncertifiedIconWidth:number = GraphUIObjects.HANDLE_SIZE;
         let nodeWidth:number = node.data('imgWidth') || node.width();
         let uncertifiedCanvasWidth: number = nodeWidth;
-        
+
         if (nodeWidth < nodeMinSize) { //uncertified icon will overlap too much of the node, need to expand canvas.
             uncertifiedCanvasWidth = nodeWidth + uncertifiedIconWidth/2; //expand canvas so that only half of the icon overlaps with the node
         }
-        
-
-
-        this.imageCreator.getImageBase64(this.imagesPath + this.componentInstance.icon + '.png',
-            this.imagesPath + 'uncertified.png', nodeWidth, uncertifiedCanvasWidth, uncertifiedIconWidth) 
-            .then(imageBase64 => {
-                this.img = imageBase64;
-                node.style({
-                    'background-image': this.img,
-                    'background-width': uncertifiedCanvasWidth,
-                    'background-height': uncertifiedCanvasWidth,
-                    'width': uncertifiedCanvasWidth,
-                    'height': uncertifiedCanvasWidth
-                });
-            });
-
-        return this.img;
+
+        const x = uncertifiedCanvasWidth - nodeWidth, y = x, width = nodeWidth, height = width;
+
+        const canvasImages:ICanvasImage[] = [
+            { src: this.imagesPath + this.componentInstance.icon + '.png', x, y, width, height},
+            { src: this.imagesPath + 'uncertified.png', x: 0, y: 0, width: uncertifiedIconWidth, height: uncertifiedIconWidth}
+        ];
+
+
+       //Create the image and update the node background styles
+        this.imageCreator.getMultiLayerBase64Image(canvasImages, uncertifiedCanvasWidth, uncertifiedCanvasWidth).then(img => this.updateNodeStyles(node,uncertifiedCanvasWidth,img));
+        return this.img; // Return the referance to the image (in Base64 format)
     }
 
-    protected getDisplayName():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;
 
+        const x = archivedCanvasWidth - nodeWidth, y = x, width = nodeWidth, height = width;
+        const archiveImage = nodeWidth < 50? 'archive_small.png':'archive_big.png';
+
+        const canvasImages = [
+            { src: this.imagesPath + this.componentInstance.icon + '.png', x, y, width, height},
+            { src: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.RESOURCE_ICONS + archiveImage, x, y, width, height}
+        ];
+
+        //Create the image and update the node background styles
+        this.imageCreator.getMultiLayerBase64Image(canvasImages, archivedCanvasWidth, archivedCanvasWidth).then(img => this.updateNodeStyles(node, archivedCanvasWidth, img));
+        return this.img; // Return the default img
+    }
+
+    protected getDisplayName():string {
         let graphResourceName = AngularJSBridge.getFilter('graphResourceName');
         let resourceName = AngularJSBridge.getFilter('resourceName');
         return graphResourceName(resourceName(this.componentInstance.name));
     }
 
+    //TODO:: move to Base class ???
+    private updateNodeStyles(node,canvasWidth,imageBase64){     
+        this.img = imageBase64;
+        node.style({
+            'background-image': this.img,
+            'background-width': canvasWidth,
+            '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 1182f5e664..78bcc17186 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
@@ -35,5 +35,8 @@ export class CompositionCiNodeConfiguration extends CompositionCiNodeBase {
         this.imgWidth = GraphUIObjects.SMALL_RESOURCE_WIDTH;
         this.type = "basic-small-node";
         this.classes = 'configuration-node';
+        if(this.archived){
+            this.classes = this.classes + ' archived';
+        }
     }
 }
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 3bd57695ec..05a6d790ab 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
@@ -44,9 +44,12 @@ export class CompositionCiNodeCp extends CompositionCiNodeBase {
         } else {
             this.classes = 'cp-node';
         }
+        if(this.archived){
+            this.classes = this.classes + ' archived';
+            return;
+        }
         if (!this.certified) {
             this.classes = this.classes + ' not-certified';
         }
-
     }
 }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts
index b993490043..b025221f25 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
@@ -33,7 +33,11 @@ export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase {
         this.imagesPath = this.imagesPath + ImagesUrl.SERVICE_PROXY_ICONS;
         this.img = this.imagesPath + this.componentInstance.icon + '.png';
         this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH;
-        this.classes = 'service-node'
+        this.classes = 'service-node';
+        if(this.archived){
+            this.classes = this.classes + ' archived';
+            return;
+        }
         if (!this.certified) {
             this.classes = this.classes + ' not-certified';
         }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
index b4e6ac354a..bf8facf002 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
@@ -33,10 +33,13 @@ export class CompositionCiNodeService extends CompositionCiNodeBase {
         this.imagesPath = this.imagesPath + ImagesUrl.SERVICE_ICONS;
         this.img = this.imagesPath + ImagesUrl.SERVICE_ICONS + this.componentInstance.icon + '.png';
         this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH;
-        this.classes = 'service-node'
+        this.classes = 'service-node';
+        if(this.archived){
+            this.classes = this.classes + ' archived';
+            return;
+        }
         if (!this.certified) {
             this.classes = this.classes + ' not-certified';
         }
-
     }
 }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
index 3dd6a4e238..d4172c0eaa 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
@@ -38,7 +38,10 @@ export class NodeUcpe extends CompositionCiNodeBase {
         this.type = 'ucpe-node';
         this.allowConnection = false;
         this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS;
-
+        if(this.archived){
+            this.classes = this.classes + ' archived';
+            return;
+        }
         if (!this.certified) {
             this.classes = this.classes + ' not-certified-ucpe';
         }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
index b5ad57a5c3..4aff85e6c3 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
@@ -35,6 +35,10 @@ export class CompositionCiNodeVf extends CompositionCiNodeBase {
         this.img = this.imagesPath + this.componentInstance.icon + '.png';
         this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH;
         this.classes = 'vf-node';
+        if(this.archived){
+            this.classes = this.classes + ' archived';
+            return;
+        }
         if (!this.certified) {
             this.classes = this.classes + ' not-certified';
         }
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
index eded75d5da..a440f09156 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
@@ -52,6 +52,10 @@ export class CompositionCiNodeVl extends CompositionCiNodeBase {
         this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS;
 
         this.classes = 'vl-node';
+        if(this.archived){
+            this.classes = this.classes + ' archived';
+            return;
+        }
         if (!this.certified) {
             this.classes = this.classes + ' not-certified';
         }
diff --git a/catalog-ui/src/app/models/graph/zones/group-instance.ts b/catalog-ui/src/app/models/graph/zones/group-instance.ts
new file mode 100644
index 0000000000..92d850b894
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/zones/group-instance.ts
@@ -0,0 +1,85 @@
+import {PropertyModel} from "app/models";
+import {CommonUtils} from "app/utils";
+import {IZoneInstanceAssignment} from "./zone-instance";
+import {ComponentInstance} from "../../componentsInstances/componentInstance";
+import {MemberUiObject} from "../../ui-models/ui-member-object";
+import * as _ from "lodash";
+
+export class GroupInstance {
+
+    public artifacts:Array<string>;
+    public artifactsUuid:Array<string>;
+    public description:string;
+    public empty:boolean;
+    public groupUUID:string;
+    public invariantUUID:string;
+    public members:Array<string>;
+    public name:string;
+    public ownerId:string;
+    public properties:Array<PropertyModel>;
+    public propertyValueCounter:number;
+    public type:string;
+    public typeUid:string;
+    public uniqueId:string;
+    public version:string;
+    public iconSprite:string;
+    public icon:string;
+    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;
+
+        this.iconSprite = '';
+        this.icon = 'icon-group';
+    }
+
+    public getMembersAsUiObject(componentInstances?:Array<ComponentInstance>):Array<MemberUiObject> {
+        let savedItems:Array<MemberUiObject> = [];
+        if (!_.isEmpty(this.members)) {
+            _.forEach(this.members, (memberId:string)=> {
+                let componentInstance:ComponentInstance;
+                if (componentInstances) {
+                    componentInstance = _.find(componentInstances, function (_componentInstance:ComponentInstance) {
+                        return _componentInstance.uniqueId === memberId;
+                    })
+                }
+                savedItems.push(new MemberUiObject(memberId, componentInstance ? componentInstance.name : undefined));
+            });
+        }
+        return savedItems;
+    };
+
+    public setMembers = (newMembers:Array<MemberUiObject>):void => {
+        this.members = newMembers.map(member => member.uniqueId);
+    };
+
+    // This function is used for the zone
+    public getSavedAssignments = ():Array<IZoneInstanceAssignment> => {
+        return this.getMembersAsUiObject();
+    };
+
+    public setSavedAssignments = (newMembers:Array<IZoneInstanceAssignment>):void => {
+        this.setMembers(newMembers);
+    };
+
+    public get iconClass() {
+        return this.iconSprite + ' ' + this.icon;
+    }
+
+}
\ No newline at end of file
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 63136e6e21..c0a6678b21 100644
--- a/catalog-ui/src/app/models/graph/zones/policy-instance.ts
+++ b/catalog-ui/src/app/models/graph/zones/policy-instance.ts
@@ -1,8 +1,48 @@
 import { PropertyModel } from "app/models";
 import { CommonUtils } from "app/utils";
+import {IZoneInstanceMethod, IZoneInstanceAssignment} from "./zone-instance";
+import {GroupInstance} from "./group-instance";
+import {ComponentInstance} from "../../componentsInstances/componentInstance";
+import {TargetUiObject} from "../../ui-models/ui-target-object";
+import {TargetOrMemberType} from "../../../utils/constants";
 
+/* The request and response should be same model, need to fix in BE */
+export class PolicyTargetsMap {
+    COMPONENT_INSTANCES:Array<string>;
+    GROUPS:Array<string>;
+}
+//TODO remove this
+export class PolicyTargetsRequest {
 
-export class PolicyInstance {
+    requestItems:Array<PolicyTargetsRequestItem>;
+
+    constructor(groups:Array<string>,instances:Array<string>){
+
+        this.requestItems = [];
+
+        if (instances && instances.length>0) {
+            let instancesObj:PolicyTargetsRequestItem = {
+                type: "component_Instances",
+                uniqueIds: instances
+            };
+            this.requestItems.push(instancesObj);
+        }
+        if (groups && groups.length>0) {
+            let groupsObj:PolicyTargetsRequestItem = {
+                type: "groups",
+                uniqueIds: groups
+            };
+            this.requestItems.push(groupsObj);
+        }
+    }
+}
+
+export class PolicyTargetsRequestItem {
+    type: string;
+    uniqueIds:Array<String>;
+}
+    
+export class PolicyInstance implements IZoneInstanceMethod {
     componentName:string;
     description:string;
     empty:boolean;
@@ -12,13 +52,17 @@ export class PolicyInstance {
 
     name:string;
     normalizedName:string;
-    policyTypeName:string;
+    type:string;
     policyTypeUid:string;
     policyUUID:string;
     properties:Array<PropertyModel>;
-    targets:Array<string>;
+    targets:PolicyTargetsMap;
     uniqueId:string;
     version:string;
+    iconSprite:string;
+    icon:string;
+    originArchived:boolean;
+
 
     constructor(policy?:PolicyInstance) {
         this.componentName = policy.componentName;
@@ -30,7 +74,7 @@ export class PolicyInstance {
         
         this.name = policy.name;
         this.normalizedName =policy.normalizedName;
-        this.policyTypeName = policy.policyTypeName;
+        this.type = policy.type;
         this.policyTypeUid = policy.policyTypeUid;
         this.policyUUID = policy.policyUUID;
         this.properties = CommonUtils.initProperties(policy.properties);
@@ -38,6 +82,57 @@ export class PolicyInstance {
         this.uniqueId = policy.uniqueId;
         this.version = policy.version;
 
+        this.iconSprite = '';
+        this.icon = 'icon-policy';
+    }
+
+    public getTargetsAsUiObject(componentInstances?:Array<ComponentInstance>, groupInstances?:Array<GroupInstance>):Array<TargetUiObject> {
+        let savedItems:Array<TargetUiObject> = [];
+
+        //get all targets from component instances
+        if (!_.isEmpty(this.targets.COMPONENT_INSTANCES)) {
+            this.targets.COMPONENT_INSTANCES.forEach((targetInstanceId:string)=> {
+                let componentInstance:ComponentInstance;
+                if (componentInstances) {
+                    componentInstance = _.find(componentInstances, function (_componentInstance:ComponentInstance) {
+                        return _componentInstance.uniqueId === targetInstanceId;
+                    })
+                }
+                savedItems.push(new TargetUiObject(targetInstanceId, TargetOrMemberType.COMPONENT_INSTANCES, componentInstance ? componentInstance.name : undefined));
+            });
+        }
+
+        //get all targets from groupInstances
+        if (!_.isEmpty(this.targets.GROUPS)) {
+            this.targets.GROUPS.forEach((groupsTargetId:string)=> {
+                let groupInstance:GroupInstance;
+                if (groupInstances) {
+                    groupInstance = _.find(groupInstances, function (_groupInstance:GroupInstance) {
+                        return _groupInstance.uniqueId === groupsTargetId;
+                    })
+                }
+                savedItems.push(new TargetUiObject(groupsTargetId, TargetOrMemberType.GROUPS, groupInstance? groupInstance.name : undefined));
+            });
+        }
+        return savedItems;
+    };
+
+    public saveTargets = (newTargets:Array<TargetUiObject>):void => {
+        this.targets.COMPONENT_INSTANCES = newTargets.filter(target => target.type === TargetOrMemberType.COMPONENT_INSTANCES).map(target => target.uniqueId);
+        this.targets.GROUPS = newTargets.filter(target => target.type === TargetOrMemberType.GROUPS).map(target => target.uniqueId);
+    }
+
+    // This function is used for the zone to get and set the assignment
+    public getSavedAssignments = ():Array<IZoneInstanceAssignment> => {
+        return this.getTargetsAsUiObject();
+    };
+
+    public setSavedAssignments = (newMembers:Array<IZoneInstanceAssignment>):void => {
+        this.saveTargets(newMembers);
+    }
+
+    public get iconClass() {
+        return this.iconSprite + ' ' + this.icon;
     }
 
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/graph/zones/zone-child.ts b/catalog-ui/src/app/models/graph/zones/zone-child.ts
deleted file mode 100644
index d6d7198222..0000000000
--- a/catalog-ui/src/app/models/graph/zones/zone-child.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Type, Component } from "@angular/core";
-import { PolicyInstance } from "app/models/graph/zones/policy-instance";
-
-export class ZoneConfig {
-    title:string;
-    defaultIconText:string;
-    type:string; 'policy|group';
-    tagModeId:string;
-    instances:Array<ZoneInstanceConfig>;
-    showZone:boolean;
-
-
-    constructor (title:string, defaultText:string, type:string, showZone:boolean) {
-        this.title = title;
-        this.defaultIconText = defaultText;
-        this.type = type;
-        this.tagModeId = this.type + "-tagging";
-        this.instances = [];
-        this.showZone = showZone;
-    }
-}
-
-export class ZoneInstanceConfig {
-
-    name:string;
-    assignments:Array<string>; //targets or members
-    instanceData:PolicyInstance; // | GroupInstance;
-    mode:ZoneInstanceMode;
-
-    constructor(instance:PolicyInstance) { /* | GroupInstance */
-
-        this.name = instance.name;
-        this.instanceData = instance;
-        this.mode = ZoneInstanceMode.NONE;
-
-        if(instance instanceof PolicyInstance) {
-            this.assignments = instance.targets;
-        }
-    }
-
-}
-
-export enum ZoneInstanceMode {
-    NONE,
-    HOVER,
-    SELECTED,
-    TAG
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/graph/zones/zone-instance.ts b/catalog-ui/src/app/models/graph/zones/zone-instance.ts
new file mode 100644
index 0000000000..fb8ec7761a
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/zones/zone-instance.ts
@@ -0,0 +1,106 @@
+import {PolicyInstance} from "app/models/graph/zones/policy-instance";
+import {GroupInstance} from "./group-instance";
+import {Component as TopologyTemplate} from "app/models";
+import {IUiBaseObject} from "../../ui-models/ui-base-object";
+import { Subject } from "rxjs";
+
+export enum ZoneInstanceMode {
+    NONE,
+    HOVER,
+    SELECTED,
+    TAG
+}
+
+export enum ZoneInstanceType {
+    GROUP,
+    POLICY
+}
+
+export enum ZoneInstanceAssignmentType {
+    COMPONENT_INSTANCES,
+    GROUPS
+}
+
+export interface IZoneInstanceMethod {
+
+    getSavedAssignments():Array<IZoneInstanceAssignment>;
+    setSavedAssignments(newAssignments:Array<IZoneInstanceAssignment>):void;
+}
+
+export interface IZoneInstanceAssignment extends IUiBaseObject{
+    type: ZoneInstanceAssignmentType
+}
+
+export class ZoneInstance {
+
+    parentComponentType:string;
+    parentComponentID:string;
+    instanceData: PolicyInstance | GroupInstance;
+    mode:ZoneInstanceMode;
+    type:ZoneInstanceType;
+    handle:string;
+    assignments:Array<IZoneInstanceAssignment>; //temp assignments visible on the UI; not the saved values on the BE
+    hidden:boolean;
+    forceSave:Subject<Function>;
+
+    constructor(instance: PolicyInstance | GroupInstance, topologyTemplate:TopologyTemplate) {
+
+        this.instanceData = instance;
+        this.parentComponentType = topologyTemplate.componentType;
+        this.parentComponentID = topologyTemplate.uniqueId;
+
+        if (instance instanceof PolicyInstance) {
+            this.type = ZoneInstanceType.POLICY;
+        } else {
+            this.type = ZoneInstanceType.GROUP;
+        }
+
+        this.assignments = this.instanceData.getSavedAssignments();
+        this.mode = ZoneInstanceMode.NONE;
+        this.hidden = false;
+        this.forceSave = new Subject();
+    }
+
+    public isAlreadyAssigned = (nodeId:string):boolean => {
+        let matchingAssignments = this.assignments.filter((assignment) => {
+            return assignment.uniqueId == nodeId;
+        });
+        return matchingAssignments && matchingAssignments.length > 0;
+    }
+
+    public addOrRemoveAssignment = (nodeId:string, nodeType:ZoneInstanceAssignmentType)=> { //change temp assignments, unsaved but visible in UI.
+
+        if (!this.isAlreadyAssigned(nodeId)) {
+            this.assignments.push(<IZoneInstanceAssignment>{uniqueId: nodeId, type: nodeType});
+        } else {
+            this.assignments = this.assignments.filter(assignment => assignment.uniqueId != nodeId);
+        }
+    }
+    
+    public isZoneAssignmentChanged(oldAssignments:Array<IZoneInstanceAssignment>, newAssignments:Array<IZoneInstanceAssignment>):boolean {
+        if (oldAssignments.length != newAssignments.length) {
+            return true;
+        }
+        let difference:Array<IZoneInstanceAssignment> = oldAssignments.filter((oldAssignment) => {
+            return !newAssignments.find(newAssignment => newAssignment.uniqueId == oldAssignment.uniqueId);
+        });
+        if (difference.length) {
+            return true;
+        }
+
+        return false;
+    }
+
+    public updateInstanceData (instanceData:  PolicyInstance | GroupInstance):void {
+        this.instanceData = instanceData;
+        this.assignments = this.instanceData.getSavedAssignments();
+    }
+
+    public showHandle = (handleId:string) => {
+        this.handle = handleId;
+    }
+
+    public hideHandle = ():void => {
+        this.handle = null;
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/zones/zone.ts b/catalog-ui/src/app/models/graph/zones/zone.ts
new file mode 100644
index 0000000000..eaabc62a25
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/zones/zone.ts
@@ -0,0 +1,46 @@
+/**
+ * Created by ob0695 on 10.04.2018.
+ */
+import {ZoneInstanceType, ZoneInstance, IZoneInstanceAssignment} from "./zone-instance";
+import {Observable} from "rxjs/Rx";
+import { CANVAS_TAG_MODE } from "app/utils/constants";
+
+export class Zone {
+    title:string;
+    type:ZoneInstanceType;
+    defaultIconText:string;
+    instances:Array<ZoneInstance>;
+    visible:boolean;
+    minimized:boolean;
+
+    constructor(title:string, defaultText:string, type:ZoneInstanceType) {
+        this.title = title;
+        this.defaultIconText = defaultText;
+        this.type = type;
+        this.instances = [];
+        this.visible = false;
+        this.minimized = false;
+    }
+
+
+    public getTagModeId = () => {
+        let tagModeId = ZoneInstanceType[this.type].toUpperCase();
+        return CANVAS_TAG_MODE[tagModeId + "_TAGGING"];
+    }
+
+    public getHoverTagModeId = () => {
+        let tagModeId = ZoneInstanceType[this.type].toUpperCase();
+        return CANVAS_TAG_MODE[tagModeId + "_TAGGING_HOVER"];
+    }
+
+    public removeInstance = (instanceId:string) => {
+        this.instances = this.instances.filter(instance => instance.instanceData.uniqueId != instanceId);
+    };
+}
+
+
+export interface IZoneService {
+    updateZoneInstanceAssignments(topologyTemplateType:string, topologyTemplateId:string, zoneInstanceId:string, assignments:Array<IZoneInstanceAssignment>):Observable<any>;
+    updateName(topologyTemplateType:string, topologyTemplateId:string, zoneInstanceId:string, newName:string):Observable<any>;
+    deleteZoneInstance(topologyTemplateType:string, topologyTemplateId:string, zoneInstanceId:string):Observable<any>;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/group-metadata.ts b/catalog-ui/src/app/models/group-metadata.ts
index ecd6e3e91c..1c137ac1be 100644
--- a/catalog-ui/src/app/models/group-metadata.ts
+++ b/catalog-ui/src/app/models/group-metadata.ts
@@ -1,4 +1,6 @@
 export class GroupMetadata {
+    public name:string;
+    public icon:string;
     public uniqueId: string;
     public type: string;
     public version: string;
@@ -11,6 +13,8 @@ export class GroupMetadata {
     deserialize (response): GroupMetadata {
         this.uniqueId = response.uniqueId;
         this.type = response.type;
+        this.name = response.name;
+        this.icon = response.icon;
         this.version = response.version;
         this.description = response.description;
         this.creationTime = response.creationTime;
diff --git a/catalog-ui/src/app/models/instance-fe-details.ts b/catalog-ui/src/app/models/instance-fe-details.ts
new file mode 100644
index 0000000000..b0a6baccc4
--- /dev/null
+++ b/catalog-ui/src/app/models/instance-fe-details.ts
@@ -0,0 +1,5 @@
+export class InstanceFeDetails {
+    name: string;
+    iconClass: string;
+    originArchived: boolean;
+}
diff --git a/catalog-ui/src/app/models/modules/base-module.ts b/catalog-ui/src/app/models/modules/base-module.ts
index 63f4cc7103..e27065bbfa 100644
--- a/catalog-ui/src/app/models/modules/base-module.ts
+++ b/catalog-ui/src/app/models/modules/base-module.ts
@@ -43,7 +43,7 @@ export class Module {
     public artifacts:Array<string> | Array<ArtifactModel>;
     public artifactsUuid:Array<string>;
     public properties:Array<PropertyModel>;
-    public members:Array<string>;
+    public members:Map<string, string>;
     public customizationUUID:string;
     public groupInstanceUniqueId:string; // This will only have a value if this is a group instance
 
diff --git a/catalog-ui/src/app/models/policy-metadata.ts b/catalog-ui/src/app/models/policy-metadata.ts
index 33e0185e33..3f489bbaab 100644
--- a/catalog-ui/src/app/models/policy-metadata.ts
+++ b/catalog-ui/src/app/models/policy-metadata.ts
@@ -1,5 +1,7 @@
 export class PolicyMetadata {
     public uniqueId: string;
+    public name:string;
+    public icon:string;
     public type: string;
     public version: string;
     public description: string;
@@ -11,6 +13,8 @@ export class PolicyMetadata {
     deserialize (response): PolicyMetadata {
         this.uniqueId = response.uniqueId;
         this.type = response.type;
+        this.name = response.name;
+        this.icon = response.icon;
         this.version = response.version;
         this.description = response.description;
         this.creationTime = response.creationTime;
diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-map.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-map.ts
index 30cfcf09fd..de943fcc3e 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-fe-map.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-fe-map.ts
@@ -32,10 +32,14 @@ export class InstanceFePropertiesMap {
 export class InstancePropertiesAPIMap {
     componentInstanceProperties: InstanceBePropertiesMap;
     componentInstanceInputsMap: InstanceBePropertiesMap;
+    groupProperties: InstanceBePropertiesMap;
+    policyProperties: InstanceBePropertiesMap;
 
-    constructor(inputsMapData: InstanceBePropertiesMap, propertiesMapData: InstanceBePropertiesMap) {
+    constructor(inputsMapData: InstanceBePropertiesMap, propertiesMapData: InstanceBePropertiesMap, groupPropertiesMapData: InstanceBePropertiesMap, policyPropertiesMapData: InstanceBePropertiesMap) {
         this.componentInstanceInputsMap = inputsMapData ? inputsMapData: new InstanceBePropertiesMap();
         this.componentInstanceProperties = propertiesMapData ? propertiesMapData: new InstanceBePropertiesMap();
+        this.groupProperties = groupPropertiesMapData ? groupPropertiesMapData : new InstanceBePropertiesMap();
+        this.policyProperties = policyPropertiesMapData ? policyPropertiesMapData : new InstanceBePropertiesMap();
     }
 
 }
diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
index a0c087bdc2..c0af885d18 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
@@ -228,7 +228,7 @@ export class PropertyFEModel extends PropertyBEModel {
     };
 
     /* Returns array of individual parents for given prop path, with list/map UUIDs replaced with index/mapkey */
-    public getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
+    public getParentNamesArray = (parentPropName: string, parentNames?: Array<string>, noHashKeys:boolean = false): Array<string> => {
         parentNames = parentNames || [];
         if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return
 
@@ -236,7 +236,7 @@ export class PropertyFEModel extends PropertyBEModel {
         let nameToInsert: string = parentProp.name;
 
         if (parentProp.isChildOfListOrMap) {
-            if (parentProp.derivedDataType == DerivedPropertyType.MAP) {
+            if (!noHashKeys && parentProp.derivedDataType == DerivedPropertyType.MAP) {
                 nameToInsert = parentProp.getActualMapKey();
             } else { //LIST
                 let siblingProps = this.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName);
@@ -245,7 +245,7 @@ export class PropertyFEModel extends PropertyBEModel {
         }
 
         parentNames.splice(0, 0, nameToInsert); //add prop name to array
-        return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing
+        return this.getParentNamesArray(parentProp.parentName, parentNames, noHashKeys); //continue recursing
     }
 
     public hasValueObjChanged() {
diff --git a/catalog-ui/src/app/models/properties.ts b/catalog-ui/src/app/models/properties.ts
index 7ff27706b0..a629140cb8 100644
--- a/catalog-ui/src/app/models/properties.ts
+++ b/catalog-ui/src/app/models/properties.ts
@@ -147,9 +147,10 @@ export class PropertyModel extends PropertyBEModel implements IPropertyModel {
         temp.simpleType = undefined;
         temp.value = temp.value === "{}" || temp.value === "[]" ? undefined : temp.value;
         temp.defaultValue = temp.defaultValue === "{}" || temp.defaultValue === "[]" ? undefined : temp.defaultValue;
-        temp.rules = null; //don't send rules to server until feature is fully supported
+        temp.rules = undefined; //don't send rules to server until feature is fully supported
         temp.isAlreadySelected = undefined;
         temp.addOn = undefined;
+        temp.filterTerm = undefined;
         return temp;
     };
 }
diff --git a/catalog-ui/src/app/models/ui-models/ui-base-object.ts b/catalog-ui/src/app/models/ui-models/ui-base-object.ts
new file mode 100644
index 0000000000..a5989e4718
--- /dev/null
+++ b/catalog-ui/src/app/models/ui-models/ui-base-object.ts
@@ -0,0 +1,20 @@
+/**
+ * Created by ob0695 on 10.04.2018.
+ */
+
+export interface IUiBaseObject {
+    name:string;
+    uniqueId:string;
+    type:any;
+}
+export class UiBaseObject implements IUiBaseObject{
+    name:string;
+    uniqueId:string;
+    type:any;
+
+    constructor(uniqueId: string,  type?: any, name?:string) {
+        this.uniqueId = uniqueId;
+        this.name = name;
+        this.type = type;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/ui-models/ui-member-object.ts b/catalog-ui/src/app/models/ui-models/ui-member-object.ts
new file mode 100644
index 0000000000..92cda1bd7c
--- /dev/null
+++ b/catalog-ui/src/app/models/ui-models/ui-member-object.ts
@@ -0,0 +1,9 @@
+import {IZoneInstanceAssignment} from "../graph/zones/zone-instance";
+import {UiBaseObject} from "./ui-base-object";
+import {TargetOrMemberType} from "../../utils/constants";
+
+export class MemberUiObject extends UiBaseObject implements IZoneInstanceAssignment {
+    constructor(uniqueId: string,  name:string) {
+        super(uniqueId, TargetOrMemberType.COMPONENT_INSTANCES, name);
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/ui-models/ui-target-object.ts b/catalog-ui/src/app/models/ui-models/ui-target-object.ts
new file mode 100644
index 0000000000..e8a114e299
--- /dev/null
+++ b/catalog-ui/src/app/models/ui-models/ui-target-object.ts
@@ -0,0 +1,9 @@
+import {IZoneInstanceAssignment} from "../graph/zones/zone-instance";
+import {UiBaseObject} from "./ui-base-object";
+import {TargetOrMemberType} from "../../utils/constants";
+
+export class TargetUiObject extends UiBaseObject implements IZoneInstanceAssignment {
+    constructor(uniqueId:string, type:TargetOrMemberType, name:string) {
+        super(uniqueId, type, name);
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/ui-models/ui-zone-instance-object.ts b/catalog-ui/src/app/models/ui-models/ui-zone-instance-object.ts
new file mode 100644
index 0000000000..d8648f2c99
--- /dev/null
+++ b/catalog-ui/src/app/models/ui-models/ui-zone-instance-object.ts
@@ -0,0 +1,11 @@
+import { UiBaseObject } from "app/models/ui-models/ui-base-object";
+import { ZoneInstanceType } from "../graph/zones/zone-instance";
+
+
+export class UIZoneInstanceObject extends UiBaseObject{
+    type:ZoneInstanceType;
+    
+    constructor(uniqueId: string,  type?: ZoneInstanceType, name?:string) {
+        super(uniqueId, type, name);
+    }
+}
\ No newline at end of file