diff options
Diffstat (limited to 'usecaseui-portal/src/app/components/e2e-creation')
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); + + + } + } |