summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/e2e-creation
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/components/e2e-creation')
-rw-r--r--usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html6
-rw-r--r--usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less9
-rw-r--r--usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts157
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);
+
+
+ }
+
}