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