1 files changed, 157 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
index 261aa3f9..289d1221 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
@@ -15,6 +15,7 @@
 */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { MyhttpService } from '../../myhttp.service';
+import * as d3 from 'd3';
 
 @Component({
   selector: 'app-e2e-creation',
@@ -29,6 +30,7 @@ export class E2eCreationComponent implements OnInit {
     this.getTemParameters();
     this.getVimInfo();
     this.getSdnControllers();
+    // this.drawImage("e2e");
     console.log(this.createParams);
   }
 
@@ -82,6 +84,7 @@ export class E2eCreationComponent implements OnInit {
         console.log(this.nsTemplateParameters);
       }
 
+      this.drawImage(type)
 
     })
   }
@@ -211,4 +214,158 @@ export class E2eCreationComponent implements OnInit {
     this.e2eCloseCreate.emit(); 
   }
 
+    roote2e = {
+        "name": "e2e",
+        "type": "e2e",
+        "children":
+            [
+                {
+                    "name": "ns",
+                    "type": "ns",
+                    "children":
+                        [
+                            {
+                                "name": "vnf",
+                                "type": "vnf",
+                            },
+                            {
+                                "name": "vnf",
+                                "type": "vnf",
+                            }
+                        ]
+                },
+                {
+                    "name": "ns",
+                    "type": "ns",
+                    "children":
+                        [
+                            {
+                                "name": "vnf",
+                                "type": "vnf",
+                            },
+                            {
+                                "name": "vnf",
+                                "type": "vnf",
+                            }
+                        ]
+                }]
+    }
+
+    rootns = {
+                "name": "ns",
+                "type": "ns",
+                "children":
+                    [
+                        {
+                            "name": "vnf",
+                            "type": "vnf",
+                        },
+                        {
+                            "name": "vnf",
+                            "type": "vnf",
+                        }
+                    ]
+            }
+
+    imgmap = {
+        '1': './assets/images/create-e2e.png',
+        '2': './assets/images/create-ns.png',
+        '3': './assets/images/create-vnf.png',
+    };
+
+    drawImage(type) {
+        if (type == "e2e") {
+            this.render(this.roote2e, this.imgmap)
+        } else if (type == "ns") {
+            this.render(this.rootns, this.imgmap)
+        }
+
+
+    }
+
+    render(data, imgmap) {
+        var width = document.getElementById("createChart").clientWidth,
+            height = document.getElementById("createChart").clientHeight;
+        var cluster = d3.layout.tree()
+            .size([width, height]);
+        var diagonal = d3.svg.diagonal()
+            .projection(function (d) {
+                return [d.x-18, d.y+40];
+            });
+        console.log(diagonal)
+        var svg = d3.select("svg");
+
+        //marker
+        var marker =
+            svg.append("marker")
+                .attr("id", "resolved")
+                .attr("markerUnits", "strokeWidth")
+                .attr("markerUnits", "userSpaceOnUse")
+                .attr("viewBox", "0 -5 10 10")
+                .attr("refX", 22)
+                .attr("refY", 0)
+                .attr("markerWidth", 20)
+                .attr("markerHeight", 20)
+                .attr("orient", "auto")
+                .attr("stroke-width", 1)
+                .append("circle")
+                .attr("cx", 5)
+                .attr("cy", 0)
+                .attr("r", 2)
+                .attr("stroke-width", 1)
+                .style("stroke", "#2F8BF7")
+                .attr('fill', 'white');
+        var i = 0;
+        var nodes = cluster.nodes(data).reverse();
+        nodes.forEach(function (d) {
+            d.y = d.depth * 200+100;
+
+        });
+
+        var links = cluster.links(nodes);
+
+        var linkEnter = svg.selectAll("path.link")
+            .data(links);
+
+        linkEnter.enter().append("path")
+            .attr("class", "link")
+            .attr("d", diagonal)
+            .style("stroke", "#2F8BF7")
+            .style('stroke-width', '1px')
+            .attr("marker-end", "url(#resolved)")
+            .style("fill", "none")
+            // .style("fill-opacity", 1)
+            .attr("id", function (d, i) {
+                return "mypath" + i;
+            });
+
+        var node = svg.selectAll(".node")
+            .data(nodes)
+            .enter()
+            .append("g")
+            .attr("class", "node")
+            .attr("transform", function (d) {
+                return "translate(" + (d.x + -50) + "," + (d.y) + ")";
+            });
+
+        node.append('image')
+            .attr('xlink:href', function (d) {
+                if(d.type=="e2e"){
+                    return imgmap[1];
+                }else if(d.type=="ns"){
+                    return imgmap[2];
+                }else if(d.type=="vnf"){
+                    return imgmap[3];
+                }
+
+            })
+            .style('width', '12%')
+            .style("cursor","pointer")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("rx", 3);
+
+
+    }
+
 }