[SDC-29] catalog 1707 rebase commit.

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

30 files changed, 1544 insertions, 0 deletions

diff --git a/catalog-ui/src/app/models/graph/assetPopoverObj.ts b/catalog-ui/src/app/models/graph/assetPopoverObj.ts
new file mode 100644
index 0000000000..c4fea9b994
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/assetPopoverObj.ts
@@ -0,0 +1,44 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+'use strict';
+
+export class AssetPopoverObj {
+
+    nodeId:string;
+    displayName:string;
+    menuPosition:Cy.Position;
+    menuSide:string;
+    isViewOnly:boolean;
+    VLArray:Array<any>;
+    CPArray:Array<any>;
+
+    constructor(nodeId:string, displayName:string, menuPosition:Cy.Position, menuSide:string, isViewOnly?:boolean, VLArray?:Array<any>, CPArray?:Array<any>) {
+        this.nodeId = nodeId;
+        this.displayName = displayName;
+        this.menuPosition = {x: menuPosition.x, y: menuPosition.y};
+        this.menuSide = menuSide;
+        this.isViewOnly = isViewOnly || false;
+        this.VLArray = VLArray || [];
+        this.CPArray = CPArray || [];
+    }
+}
+
+
diff --git a/catalog-ui/src/app/models/graph/graph-links/common-base-link.ts b/catalog-ui/src/app/models/graph/graph-links/common-base-link.ts
new file mode 100644
index 0000000000..4d6d989daf
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/common-base-link.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+
+export class CommonLinkBase {
+
+    img:string;
+    color:string;
+    classes:string;
+
+    //this is cytoscapejs fields
+    public source:string;
+    public target:string;
+    public type:string;
+    public isSdcElement:boolean;
+
+    constructor() {
+        this.isSdcElement = true;
+        this.type = 'sdc-link';
+
+    }
+
+    public setImage = (imgUrl:string) => {
+        this.img = imgUrl;
+    };
+
+    public setColor = (color:string) => {
+        this.color = color;
+    };
+
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/common-ci-link-base.ts b/catalog-ui/src/app/models/graph/graph-links/common-ci-link-base.ts
new file mode 100644
index 0000000000..12e66c86f9
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/common-ci-link-base.ts
@@ -0,0 +1,49 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {Relationship, RelationshipModel} from "../relationship";
+import {CommonLinkBase} from "./common-base-link";
+/**
+ * Created by obarda on 6/29/2016.
+ */
+
+export interface ICommonCiLinkBase {
+
+}
+
+export class CommonCiLinkBase extends CommonLinkBase implements ICommonCiLinkBase {
+
+  relation:RelationshipModel;
+
+
+  constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+    super();
+    if (relation) {
+      if (singleRelationship) {
+        this.relation = new RelationshipModel(relation, singleRelationship);
+      } else {
+        this.relation = new RelationshipModel(relation);
+      }
+      this.source = relation.fromNode;
+      this.target = relation.toNode;
+    } else {
+      this.relation = new RelationshipModel();
+    }
+  }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts
new file mode 100644
index 0000000000..04b28c7ceb
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts
@@ -0,0 +1,46 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {ICommonCiLinkBase, CommonCiLinkBase} from "../common-ci-link-base";
+import {RelationshipModel, Relationship} from "../../relationship";
+
+export interface ICompositionCiLinkBase extends ICommonCiLinkBase {
+    updateLinkDirection():void;
+}
+
+export class CompositionCiLinkBase extends CommonCiLinkBase implements ICompositionCiLinkBase {
+
+    type:string;
+    visible:boolean;
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.visible = true;
+    }
+
+    public setRelation = (relation:RelationshipModel) => {
+        this.relation = relation;
+    };
+
+    updateLinkDirection():void {
+        this.source = this.relation.fromNode;
+        this.target = this.relation.toNode;
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts
new file mode 100644
index 0000000000..e213fa9b33
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts
@@ -0,0 +1,32 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {CompositionCiLinkBase} from "./composition-ci-link-base";
+import {Relationship, RelationshipModel} from "../../relationship";
+import {GraphColors} from "../../../../utils/constants";
+
+export class CompositionCiSimpleLink extends CompositionCiLinkBase {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.color = GraphColors.BASE_LINK;
+        this.classes = 'simple-link';
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts
new file mode 100644
index 0000000000..b756dab129
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts
@@ -0,0 +1,32 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {RelationshipModel, Relationship} from "../../relationship";
+import {CompositionCiLinkBase} from "./composition-ci-link-base";
+/**
+ * Created by obarda on 4/20/2016.
+ */
+export class LinkUcpeHost extends CompositionCiLinkBase {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.visible = false;
+        this.classes = "ucpe-host-link";
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts
new file mode 100644
index 0000000000..fc8631781a
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts
@@ -0,0 +1,39 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {RelationshipModel, Relationship} from "../../relationship";
+import {CompositionCiLinkBase} from "./composition-ci-link-base";
+import {GraphColors} from "../../../../utils/constants";
+export class CompositionCiUcpeLink extends CompositionCiLinkBase {
+
+    isFromUcpe:boolean;
+
+    constructor(relation?:RelationshipModel, from?:boolean, singleRelation?:Relationship) {
+        super(relation, singleRelation);
+        this.isFromUcpe = from;
+        this.target = relation.toNode;
+        this.source = singleRelation.requirementOwnerId;
+        this.relation.relationships = [singleRelation];
+        this.color = GraphColors.BASE_LINK;
+    }
+
+    updateLinkDirection():void {
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts
new file mode 100644
index 0000000000..e0824ccbe8
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts
@@ -0,0 +1,34 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {CompositionCiLinkBase} from "./composition-ci-link-base";
+import {RelationshipModel, Relationship} from "../../relationship";
+import {GraphColors} from "../../../../utils/constants";
+
+export class CompositionCiVLink extends CompositionCiLinkBase {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.color = GraphColors.VL_LINK;
+        this.classes = 'vl-link';
+    }
+
+
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts
new file mode 100644
index 0000000000..854eeecad5
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {CompositionCiUcpeLink} from "./composition-ci-ucpe-link";
+import {Relationship, RelationshipModel} from "../../relationship";
+import {GraphColors} from "../../../../utils/constants";
+/**
+ * Created by obarda on 4/20/2016.
+ */
+
+export class CompositionCiVlUcpeLink extends CompositionCiUcpeLink {
+
+    constructor(relation?:RelationshipModel, from?:boolean, singleRelation?:Relationship) {
+        super(relation, from, singleRelation);
+        this.color = GraphColors.VL_LINK;
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
new file mode 100644
index 0000000000..7fdc0838ed
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
@@ -0,0 +1,79 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 5/1/2016.
+ */
+'use strict';
+import {RelationshipModel, Relationship, CompositionCiLinkBase, CompositionCiNodeBase, LinkUcpeHost, CompositionCiUcpeLink,
+    CompositionCiVlUcpeLink, CompositionCiSimpleLink, ModuleCiLinkBase, ModuleCiVlLink, CompositionCiVLink} from "../../../models";
+
+export class LinksFactory {
+
+  constructor() {
+  }
+
+  public createGraphLink = (cy:Cy.Instance, relation:RelationshipModel, singleRelation:Relationship):CompositionCiLinkBase => {
+
+    let newRelation:CompositionCiLinkBase;
+
+    let fromNode:CompositionCiNodeBase = cy.getElementById(relation.fromNode).data();
+    let toNode:CompositionCiNodeBase = cy.getElementById(relation.toNode).data();
+
+    if ((relation.fromNode && fromNode.isUcpePart) || (relation.toNode && toNode.isUcpePart )) { //Link from or to node inside ucpe
+
+      if (singleRelation && singleRelation.relationship.type && singleRelation.relationship.type == 'tosca.relationships.HostedOn') {
+        newRelation = new LinkUcpeHost(relation, singleRelation);
+      } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+        newRelation = new CompositionCiVlUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+      } else {
+        newRelation = new CompositionCiUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+      }
+    } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+      newRelation = new CompositionCiVLink(relation, singleRelation);
+    } else {
+      newRelation = new CompositionCiSimpleLink(relation, singleRelation);
+    }
+
+    return newRelation;
+  };
+
+  public createUcpeHostLink = (relation:RelationshipModel):LinkUcpeHost => {
+    return new LinkUcpeHost(relation);
+  };
+
+  public createVLLink = (relation:RelationshipModel):CompositionCiVLink => {
+    return new CompositionCiVLink(relation);
+  }
+
+
+  public createModuleGraphLinks = (relation:RelationshipModel, singleRelation:Relationship):ModuleCiLinkBase => {
+
+    let newRelation:ModuleCiLinkBase;
+
+    if (_.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+      newRelation = new ModuleCiVlLink(relation, singleRelation);
+    } else {
+      newRelation = new ModuleCiLinkBase(relation, singleRelation);
+    }
+
+    return newRelation;
+  };
+
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-link-base.ts b/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-link-base.ts
new file mode 100644
index 0000000000..73cd2923eb
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-link-base.ts
@@ -0,0 +1,37 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+import {Relationship, RelationshipModel, ICommonCiLinkBase, CommonCiLinkBase} from "../../../../models";
+import {GraphColors} from "../../../../utils/constants";
+
+export interface IModuleCiLinkBase extends ICommonCiLinkBase {
+
+}
+
+export class ModuleCiLinkBase extends CommonCiLinkBase implements IModuleCiLinkBase {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.color = GraphColors.BASE_LINK;
+    }
+
+}
diff --git a/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts b/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts
new file mode 100644
index 0000000000..0bc675d465
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {Relationship, RelationshipModel, ICommonCiLinkBase, CommonCiLinkBase} from "../../../../models";
+import {GraphColors} from "../../../../utils/constants";
+
+export interface IModuleCiVlLink extends ICommonCiLinkBase {
+
+}
+
+export class ModuleCiVlLink extends CommonCiLinkBase implements IModuleCiVlLink {
+
+    constructor(relation?:RelationshipModel, singleRelationship?:Relationship) {
+        super(relation, singleRelationship);
+        this.color = GraphColors.VL_LINK;
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/graphTooltip.ts b/catalog-ui/src/app/models/graph/graphTooltip.ts
new file mode 100644
index 0000000000..790608e7f7
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/graphTooltip.ts
@@ -0,0 +1,35 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+
+export class GraphTooltip {
+    position:Cy.Position;
+    isShow:boolean;
+    text:string;
+
+    constructor();
+    constructor(position:Cy.Position, isShow:boolean, text:string);
+    constructor(position?:Cy.Position, isShow?:boolean, text?:string) {
+        this.position = position;
+        this.isShow = isShow;
+        this.text = text;
+    }
+}
+
diff --git a/catalog-ui/src/app/models/graph/link-menu.ts b/catalog-ui/src/app/models/graph/link-menu.ts
new file mode 100644
index 0000000000..b3352dd815
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/link-menu.ts
@@ -0,0 +1,36 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+import {Point} from "./point";
+
+export class LinkMenu {
+    position:Point;
+    isShow:boolean;
+    link:Cy.CollectionFirstEdge;
+
+    constructor();
+    constructor(point:Point, isShow:boolean, link:Cy.CollectionFirstEdge);
+    constructor(point?:Point, isShow?:boolean, link?:Cy.CollectionFirstEdge) {
+        this.position = point ? point : new Point();
+        this.isShow = isShow ? isShow : false;
+        this.link = link ? link : null;
+    }
+}
+
diff --git a/catalog-ui/src/app/models/graph/match-relation.ts b/catalog-ui/src/app/models/graph/match-relation.ts
new file mode 100644
index 0000000000..2de2e930b6
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/match-relation.ts
@@ -0,0 +1,111 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+import {Requirement} from "../requirement";
+import {Capability} from "../capability";
+import {Relationship, RelationshipModel, RelationType} from "./relationship";
+
+export class MatchBase {
+    requirement:Requirement;
+    isFromTo:boolean;
+    fromNode:string;
+    toNode:string;
+
+    constructor(requirement:Requirement, isFromTo:boolean, fromNode:string, toNode:string) {
+        this.requirement = requirement;
+        this.isFromTo = isFromTo;
+        this.fromNode = fromNode;
+        this.toNode = toNode;
+    }
+
+    public getDisplayText = (menuSide:string):string => {
+        return '';
+    };
+
+    public isOwner = (id:string):boolean => {
+        return false;
+    }
+
+}
+
+export class MatchReqToReq extends MatchBase {
+
+    secondRequirement:Requirement;
+
+    constructor(requirement:Requirement, secondRequirement:Requirement, isFromTo:boolean, fromNode:string, toNode:string) {
+        super(requirement, isFromTo, fromNode, toNode);
+        this.secondRequirement = secondRequirement;
+    }
+
+    public getDisplayText = (menuSide:string):string => {
+        if ('left' == menuSide) {
+            return this.requirement.getFullTitle();
+        }
+        return this.secondRequirement.getFullTitle();
+    };
+
+    public isOwner = (id:string):boolean => {
+        return this.secondRequirement.ownerId === id || this.requirement.ownerId === id;
+    }
+}
+
+export class MatchReqToCapability extends MatchBase {
+
+    capability:Capability;
+
+    constructor(requirement:Requirement, capability:Capability, isFromTo:boolean, fromNode:string, toNode:string) {
+        super(requirement, isFromTo, fromNode, toNode);
+        this.capability = capability;
+    }
+
+    public matchToRelation = ():Relationship => {
+        let relationship:Relationship = new Relationship();
+        relationship.capability = this.capability.name;
+        relationship.capabilityOwnerId = this.capability.ownerId;
+        relationship.capabilityUid = this.capability.uniqueId;
+        relationship.relationship = new RelationType(this.capability.type);
+        relationship.requirement = this.requirement.name;
+        relationship.requirementOwnerId = this.requirement.ownerId;
+        relationship.requirementUid = this.requirement.uniqueId;
+        return relationship;
+    };
+
+
+    public getDisplayText = (menuSide:string):string => {
+        if (this.isFromTo && 'left' == menuSide || !this.isFromTo && 'right' == menuSide) {
+            return this.requirement.getFullTitle();
+        }
+        return this.capability.getFullTitle();
+
+    };
+
+    public isOwner = (id:string):boolean => {
+        return this.capability.ownerId === id || this.requirement.ownerId === id;
+    };
+
+    public matchToRelationModel = ():RelationshipModel => {
+        let relationshipModel:RelationshipModel = new RelationshipModel();
+        let relationship:Relationship = this.matchToRelation();
+        relationshipModel.setRelationshipModelParams(this.fromNode, this.toNode, [relationship]);
+        return relationshipModel;
+    };
+}
+
+
diff --git a/catalog-ui/src/app/models/graph/nodes/base-common-node.ts b/catalog-ui/src/app/models/graph/nodes/base-common-node.ts
new file mode 100644
index 0000000000..aee6b02086
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/base-common-node.ts
@@ -0,0 +1,70 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+'use strict';
+import {AngularJSBridge} from "../../../services/angular-js-bridge-service";
+
+export abstract class CommonNodeBase {
+
+    public displayName:string;
+    public name:string;
+    public img:string;
+    public certified:boolean;
+    public isGroup:boolean;
+    public imagesPath:string;
+    public isDraggable:boolean; //we need to to manage manually the dragging on the graph inside groups (ucpe-cp is not draggable)
+
+    //cytoscape fields
+    public id:string;
+    public type:string; //type is for the edge edition extension, by type we put the green plus icon in position
+    public isSdcElement:boolean; //this fields is in order to filter sdc elements from all extensions elements
+    public classes:string;
+    public parent:string;
+    public allowConnection:boolean; //this is for egeEdition extension in order to decide if connection to a node is available
+
+    constructor() {
+
+        this.imagesPath = AngularJSBridge.getAngularConfig().imagesPath;
+        this.type = "basic-node";
+        this.isSdcElement = true;
+        this.isDraggable = true;
+        this.allowConnection = true;
+    }
+
+    public updateNameForDisplay = () => {
+        let context = document.createElement("canvas").getContext("2d");
+        context.font = "13px Arial";
+
+        if (63 < context.measureText(this.name).width) {
+            let newLen = this.name.length - 3;
+            let newName = this.name.substring(0, newLen);
+
+            while (60 < (context.measureText(newName).width)) {
+                newName = newName.substring(0, (--newLen));
+            }
+            this.displayName = newName + '...';
+            return;
+        }
+
+        this.displayName = this.name;
+    };
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts
new file mode 100644
index 0000000000..98fb583625
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts
@@ -0,0 +1,44 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {CommonNodeBase} from "./base-common-node";
+import {ComponentInstance} from "../../componentsInstances/componentInstance";
+export abstract class CommonCINodeBase extends CommonNodeBase {
+
+    public certified:boolean;
+    public template:string;
+    public componentInstance:ComponentInstance;
+    public group:string;
+
+    constructor(instance:ComponentInstance) {
+        super();
+        this.componentInstance = instance;
+        this.id = this.componentInstance.uniqueId;
+        this.name = this.componentInstance.name;
+        this.img = '';
+        this.certified = this.isCertified(this.componentInstance.componentVersion);
+        this.displayName = instance.name;
+    }
+
+    private isCertified(version:string):boolean {
+        return 0 === (parseFloat(version)) % 1;
+    }
+
+}
+
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
new file mode 100644
index 0000000000..d17d97ac19
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
@@ -0,0 +1,73 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {CommonCINodeBase} from "../common-ci-node-base";
+import {ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service";
+import {ImagesUrl} from "app/utils";
+import {AngularJSBridge} from "app/services";
+
+export interface ICompositionCiNodeBase {
+
+}
+
+export abstract class CompositionCiNodeBase extends CommonCINodeBase implements ICompositionCiNodeBase {
+
+    public textPosition:string; //need to move to cp UCPE
+    public isUcpe:boolean;
+    public isInsideGroup:boolean;
+    public isUcpePart:boolean;
+
+    constructor(instance:ComponentInstance,
+                public imageCreator:ImageCreatorService) {
+        super(instance);
+        this.init();
+    }
+
+    private init() {
+
+        this.displayName = this.getDisplayName();
+        this.isUcpe = false;
+        this.isGroup = false;
+        this.isUcpePart = false;
+        this.isInsideGroup = false;
+
+    }
+
+    public initImage(node:Cy.Collection):string {
+
+        this.imageCreator.getImageBase64(this.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png',
+            this.imagesPath + ImagesUrl.RESOURCE_ICONS + 'uncertified.png')
+            .then(imageBase64 => {
+                this.img = imageBase64;
+                node.style({'background-image': this.img});
+            });
+
+        return this.img;
+    }
+
+    protected getDisplayName():string {
+
+        let graphResourceName = AngularJSBridge.getFilter('graphResourceName');
+        let resourceName = AngularJSBridge.getFilter('resourceName');
+        return graphResourceName(resourceName(this.componentInstance.name));
+    }
+
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
new file mode 100644
index 0000000000..e6d0cc178f
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {AngularJSBridge} from "../../../../services/angular-js-bridge-service";
+import {ImagesUrl} from "../../../../utils/constants";
+
+export class CompositionCiNodeCp extends CompositionCiNodeBase {
+
+    constructor(instance:ComponentInstance,
+                imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initCp();
+    }
+
+    private initCp():void {
+        let sdcConfig = AngularJSBridge.getAngularConfig();
+        this.img = sdcConfig.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png';
+        this.type = "basic-small-node";
+        //if the cp from type cpEndPointInstances create with another template
+        if (sdcConfig.cpEndPointInstances.indexOf(this.componentInstance.icon) > -1) {
+            this.classes = 'cp-end-point-node';
+        } else {
+            this.classes = 'cp-node';
+        }
+        if (!this.certified) {
+            this.classes = this.classes + ' not-certified';
+        }
+
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
new file mode 100644
index 0000000000..dd2fb6c6dd
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {ImagesUrl} from "../../../../utils/constants";
+import {ComponentInstance, CompositionCiNodeBase} from "../../../../models";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+export class CompositionCiNodeService extends CompositionCiNodeBase {
+
+    constructor(instance:ComponentInstance,
+                imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initService();
+    }
+
+    private initService():void {
+
+        this.img = this.imagesPath + ImagesUrl.SERVICE_ICONS + this.componentInstance.icon + '.png';
+        this.classes = 'service-node'
+        if (!this.certified) {
+            this.classes = this.classes + ' not-certified';
+        }
+
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
new file mode 100644
index 0000000000..37882963d3
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
@@ -0,0 +1,35 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {CompositionCiNodeCp, ComponentInstance} from "./../../../../models";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+
+export class CompositionCiNodeUcpeCp extends CompositionCiNodeCp {
+
+    constructor(instance:ComponentInstance,
+                imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.isUcpePart = true;
+        this.classes = 'ucpe-cp'; // the css class for the node
+        this.parent = instance.uniqueId;
+        this.type = 'ucpe-cp-node'; //the type is for the handle (plus icon) extension
+        this.isDraggable = false;
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
new file mode 100644
index 0000000000..d209a10019
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+
+export class NodeUcpe extends CompositionCiNodeBase {
+    constructor(instance:ComponentInstance,
+                imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initUcpe();
+    }
+
+    private initUcpe():void {
+        this.isUcpe = true;
+        this.isGroup = true;
+        this.isUcpePart = true;
+        this.classes = 'ucpe-node';
+        this.type = 'ucpe-node';
+        this.allowConnection = false;
+
+        if (!this.certified) {
+            this.classes = this.classes + ' not-certified-ucpe';
+        }
+    }
+
+}
+
+
+
+
+
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
new file mode 100644
index 0000000000..cb0cd59b13
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ImagesUrl} from "../../../../utils/constants";
+
+export class CompositionCiNodeVf extends CompositionCiNodeBase {
+
+    constructor(instance:ComponentInstance,
+                imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initVf();
+    }
+
+    private initVf():void {
+        this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png';
+        this.classes = 'vf-node';
+        if (!this.certified) {
+            this.classes = this.classes + ' not-certified';
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
new file mode 100644
index 0000000000..e08e6a4915
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
@@ -0,0 +1,34 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImagesUrl} from "../../../../utils/constants";
+
+export class CompositionCiNodeVfc extends CompositionCiNodeBase {
+    constructor(instance:ComponentInstance, imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initVfc();
+    }
+
+    private initVfc():void {
+        this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png';
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
new file mode 100644
index 0000000000..596d12058f
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
@@ -0,0 +1,56 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {ComponentInstance} from "../../../componentsInstances/componentInstance";
+import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service";
+import {CompositionCiNodeBase} from "./composition-ci-node-base";
+import {ImagesUrl} from "../../../../utils/constants";
+
+export class CompositionCiNodeVl extends CompositionCiNodeBase {
+    private toolTipText:string;
+
+    constructor(instance:ComponentInstance, imageCreator:ImageCreatorService) {
+        super(instance, imageCreator);
+        this.initVl();
+
+    }
+
+    private initVl():void {
+        this.type = "basic-small-node";
+        this.toolTipText = 'Point to point';
+        if(this.componentInstance.capabilities) {
+            let key:string = _.find(Object.keys(this.componentInstance.capabilities), (key)=> {
+                return _.includes(key.toLowerCase(), 'linkable');
+            });
+            let linkable = this.componentInstance.capabilities[key];
+            if (linkable) {
+                if ('UNBOUNDED' == linkable[0].maxOccurrences) {
+                    this.toolTipText = 'Multi point';
+                }
+
+            }
+        }
+        this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + 'vl.png';
+
+        this.classes = 'vl-node';
+        if (!this.certified) {
+            this.classes = this.classes + ' not-certified';
+        }
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts b/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts
new file mode 100644
index 0000000000..51e3591304
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts
@@ -0,0 +1,51 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/**
+ * Created by obarda on 6/29/2016.
+ */
+'use strict';
+import {ImagesUrl} from "../../../../utils/constants";
+import {Module} from "../../../modules/base-module";
+import {CommonNodeBase} from "../base-common-node";
+
+export interface IModuleNodeBase {
+}
+
+export class ModuleNodeBase extends CommonNodeBase implements IModuleNodeBase {
+
+    module:Module;
+
+    constructor(module:Module) {
+        super();
+        this.module = module;
+        this.init();
+    }
+
+    private init() {
+
+        this.id = this.module.uniqueId;
+        this.name = this.module.name;
+        this.displayName = this.module.name;
+        this.isGroup = true;
+        this.img = ImagesUrl.MODULE_ICON;
+        this.classes = "module-node";
+
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
new file mode 100644
index 0000000000..6c4f71e722
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+
+import {CompositionCiNodeUcpeCp, Module, ModuleNodeBase, CompositionCiNodeVf, CompositionCiNodeVl, CompositionCiNodeCp,
+    NodeUcpe, CompositionCiNodeService, CompositionCiNodeBase, ComponentInstance} from "./../../../models";
+import {ComponentType, ResourceType} from "../../../utils/constants";
+import {ImageCreatorService} from "../../../directives/graphs-v2/image-creator/image-creator.service";
+
+export class NodesFactory {
+
+    constructor(private imageCreator:ImageCreatorService) {
+    }
+
+    public createNode = (instance:ComponentInstance):CompositionCiNodeBase => {
+
+        if (instance.isUcpe()) {
+            return new NodeUcpe(instance, this.imageCreator);
+        }
+        if (instance.originType === ComponentType.SERVICE) {
+            return new CompositionCiNodeService(instance, this.imageCreator);
+        }
+        if (instance.originType === ResourceType.CP) {
+            return new CompositionCiNodeCp(instance, this.imageCreator);
+        }
+        if (instance.originType === ResourceType.VL) {
+            return new CompositionCiNodeVl(instance, this.imageCreator);
+        }
+
+        return new CompositionCiNodeVf(instance, this.imageCreator);
+    };
+
+    public createModuleNode = (module:Module):ModuleNodeBase => {
+
+        return new ModuleNodeBase(module);
+    };
+
+    public createUcpeCpNode = (instance:ComponentInstance):CompositionCiNodeCp => {
+
+        return new CompositionCiNodeUcpeCp(instance, this.imageCreator);
+    }
+}
+
+NodesFactory.$inject = [
+    'ImageCreatorService'
+];
diff --git a/catalog-ui/src/app/models/graph/point.ts b/catalog-ui/src/app/models/graph/point.ts
new file mode 100644
index 0000000000..8fece5af99
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/point.ts
@@ -0,0 +1,20 @@
+/**
+ * Created by obarda on 11/7/2016.
+ */
+export class Point {
+    /**
+     * The two-argument constructor produces the Point(x, y).
+     * @param {number} x
+     * @param {number} y
+     */
+    constructor(x?:number, y?:number) {
+        this.x = x || 0;
+        this.y = y || 0;
+    }
+
+    /**Gets or sets the x value of the Point.*/
+    x:number;
+
+    /**Gets or sets the y value of the Point.*/
+    y:number;
+}
diff --git a/catalog-ui/src/app/models/graph/relationMenuObjects.ts b/catalog-ui/src/app/models/graph/relationMenuObjects.ts
new file mode 100644
index 0000000000..aaef0b218c
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/relationMenuObjects.ts
@@ -0,0 +1,131 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+import {MatchReqToReq, MatchBase} from "./match-relation";
+import {CompositionCiNodeBase} from "./nodes/composition-graph-nodes/composition-ci-node-base";
+import {Component} from "../components/component";
+import {ComponentInstance} from "../componentsInstances/componentInstance";
+
+export class RelationMenuDirectiveObj {
+
+    fromNode:CompositionCiNodeBase;
+    toNode:CompositionCiNodeBase;
+    menuPosition:Cy.Position;
+    rightSideLink:GraphLinkMenuSide;
+    leftSideLink:GraphLinkMenuSide;
+    selectionText:string;
+    vlType:string;
+
+    constructor(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, menuPosition:Cy.Position, possibleRelations:Array<MatchBase>) {
+        this.fromNode = fromNode;
+        this.toNode = toNode;
+        // this.modelLinks = modelLinks;
+        this.menuPosition = menuPosition;
+        this.leftSideLink = new GraphLinkMenuSide(this.fromNode.componentInstance);
+        this.rightSideLink = new GraphLinkMenuSide(this.toNode.componentInstance);
+        this.selectionText = '';
+        this.vlType = null;
+
+        possibleRelations.forEach((match:any) => {
+
+            let reqObjKey:string = match.requirement.ownerName + match.requirement.uniqueId;
+            let capObjKey:string = match.secondRequirement ? match.secondRequirement.ownerName + match.secondRequirement.uniqueId
+                : match.capability.ownerName + match.capability.uniqueId;
+
+            if (match.fromNode === this.leftSideLink.componentInstance.uniqueId) {
+                //init the left side requirements Array
+                if (!this.leftSideLink.requirements[reqObjKey]) {
+                    this.leftSideLink.requirements[reqObjKey] = [];
+                }
+                //push the match to fromNode object (from node is always the requirement)
+                this.leftSideLink.requirements[reqObjKey].push(match);
+
+                if (match instanceof MatchReqToReq) {
+                    //init the right side requirements Array
+                    if (!this.rightSideLink.requirements[capObjKey]) {
+                        this.rightSideLink.requirements[capObjKey] = [];
+                    }
+                    this.rightSideLink.requirements[capObjKey].push(match);
+                } else {
+                    //init the right side capabilities Array
+                    if (!this.rightSideLink.capabilities[capObjKey]) {
+                        this.rightSideLink.capabilities[capObjKey] = [];
+                    }
+                    //add to array
+                    this.rightSideLink.capabilities[capObjKey].push(match);
+                }
+
+            } else {
+                if (!this.rightSideLink.requirements[reqObjKey]) {
+                    this.rightSideLink.requirements[reqObjKey] = [];
+                }
+                this.rightSideLink.requirements[reqObjKey].push(match);
+
+                if (!this.leftSideLink.capabilities[capObjKey]) {
+                    this.leftSideLink.capabilities[capObjKey] = [];
+                }
+                this.leftSideLink.capabilities[capObjKey].push(match);
+            }
+        });
+
+    }
+}
+
+export class GraphLinkMenuSide {
+    public componentInstance:ComponentInstance;
+    public selectedMatch:Array<any>;        //match array returned by function in utils
+    public requirements:any;  //array of matches returned by function in utils
+    public capabilities:any;  //array of matches returned by function in utils
+
+    constructor(componentInstance:ComponentInstance) {
+        this.componentInstance = componentInstance;
+        this.capabilities = {};
+        this.requirements = {};
+    }
+
+    public selectMatchArr(matchArr:Array<MatchBase>):void {
+        if (this.selectedMatch === matchArr) {
+            this.selectedMatch = undefined;
+        } else {
+            this.selectedMatch = matchArr;
+        }
+    }
+
+
+    //TODO move to match object
+    public getPreviewText(showReq:boolean):string {
+        if (!this.selectedMatch) {
+            return '';
+        }
+
+        let match:any = this.selectedMatch[0];
+        if (showReq) {
+            return match.requirement.ownerName + ': ' + match.requirement.name +
+                ': [' + match.requirement.minOccurrences + ', ' + match.requirement.maxOccurrences + ']';
+        } else if (match.secondRequirement) {
+            return match.secondRequirement.ownerName + ': ' + match.secondRequirement.name +
+                ': [' + match.secondRequirement.minOccurrences + ', ' + match.secondRequirement.maxOccurrences + ']';
+        }
+        else {
+            return match.capability.ownerName + ': ' + match.capability.name +
+                ': [' + match.capability.minOccurrences + ', ' + match.capability.maxOccurrences + ']';
+        }
+    }
+}
diff --git a/catalog-ui/src/app/models/graph/relationship.ts b/catalog-ui/src/app/models/graph/relationship.ts
new file mode 100644
index 0000000000..6345ab4c04
--- /dev/null
+++ b/catalog-ui/src/app/models/graph/relationship.ts
@@ -0,0 +1,95 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+'use strict';
+import {Capability} from "../capability";
+import {Requirement} from "../requirement";
+
+export class RelationshipModel {
+    fromNode:string;
+    toNode:string;
+    relationships:Array<Relationship>;
+
+    constructor(relationshipModel?:RelationshipModel, singleRelationship?:Relationship) {
+        if (relationshipModel) {
+            this.fromNode = relationshipModel.fromNode;
+            this.toNode = relationshipModel.toNode;
+            this.relationships = [];
+            if (relationshipModel.relationships && !singleRelationship) {
+                _.forEach(relationshipModel.relationships, (relation:Relationship):void => {
+                    this.relationships.push(new Relationship(relation));
+                });
+            } else if (singleRelationship) {
+                this.relationships.push(singleRelationship);
+            }
+        }
+    }
+
+    public setRelationshipModelParams(fromNode:string, toNode:string, relationships:Array<Relationship>) {
+        this.fromNode = fromNode;
+        this.toNode = toNode;
+        this.relationships = relationships;
+    }
+}
+
+export class RelationType {
+    type:string;
+
+    constructor(type?:string) {
+        if (type) {
+            this.type = type;
+        }
+    }
+}
+
+export class Relationship {
+    capability:string;
+    capabilityOwnerId:string;
+    capabilityUid:string;
+    relationship:RelationType;
+    requirement:string;
+    requirementOwnerId:string;
+    requirementUid:string;
+
+    constructor(relationship?:Relationship) {
+        if (relationship) {
+            this.capability = relationship.capability;
+            this.capabilityOwnerId = relationship.capabilityOwnerId;
+            this.capabilityUid = relationship.capabilityUid;
+            this.relationship = new RelationType(relationship.relationship.type);
+            this.requirement = relationship.requirement;
+            this.requirementOwnerId = relationship.requirementOwnerId;
+            this.requirementUid = relationship.requirementUid;
+        } else {
+            this.relationship = new RelationType();
+        }
+
+    }
+
+    public setRelationProperties = (capability:Capability, requirement:Requirement)=> {
+        this.capability = capability.name;
+        this.capabilityOwnerId = capability.ownerId;
+        this.capabilityUid = capability.uniqueId;
+        this.relationship = new RelationType(capability.type);
+        this.requirement = requirement.name;
+        this.requirementOwnerId = requirement.ownerId;
+        this.requirementUid = requirement.uniqueId;
+    };
+
+}