Service instance topology front-end development

Change-Id: Ie39ede5583468def6ddfdbf6aa15b44aca61b982
Issue-ID: USECASEUI-224
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

3 files changed, 169 insertions, 3 deletions

diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
index 4a2f2f69..d85eb167 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
@@ -15,7 +15,7 @@
 -->
 <!--<h3 class="title"> Services List </h3>-->
 <div class="model creation-model">
-  
+  <!-- Create data -->
     <div class="top-title">
         <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3>
         <div class="fl" style="width: 20%">
@@ -184,8 +184,8 @@
         <div id="createChart">
             <svg width="100%" height="100%">
 
-                <image xlink:href="./assets/images/cloud-site.png"
-                       x="25%" y="30%" width="50%"/>
+                <!--<image xlink:href="./assets/images/create-e2e.png"-->
+                       <!--x="40%" y="16%" />-->
 
             </svg>
 
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
index ea7c5bac..c2b441cd 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
@@ -138,5 +138,14 @@ hr {
         height: 95%;
         box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5);
         margin-right: 40px;
+        //background: url("../../../assets/images/ccvpn-createbanner2.png") no-repeat -45px -10px;
+        //background-size: 110% 110%;
+        background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%);
+        //background-color: rgba(188, 231, 248, 1);
+        border-radius: 4px;
+        #createChart{
+            height: 100%;
+            width: 100%;
+        }
     }
 }
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);
+
+
+    }
+
 }