re base code

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

14 files changed, 415 insertions, 80 deletions

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