diff options
author | 2020-02-21 11:34:03 +0000 | |
---|---|---|
committer | 2020-02-24 06:24:36 +0000 | |
commit | 1c0e11d0e8221eedbc86577501d5fd40d4890d7e (patch) | |
tree | b20d544f5a67b60f4ac1babf32c266679649879a /usecaseui-portal/src/app/views/services/services-list/mdons-detail | |
parent | 324c150c6bc6c81bfc35af23aa865cba2a1fccf4 (diff) |
USECASEUI-388 fixed and with additional changes
Fixed i18Resource, subtittle wrap and directive folder Path. Alos added few changes for adapting multiple templates.
Change-Id: Ie64485d24d11bcfd59be6c3c119dbccbc6c9b499
Issue-ID: USECASEUI-388
Signed-off-by: root <preethamshyam.sathiyaseelan@us.fujitsu.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/services/services-list/mdons-detail')
-rw-r--r-- | usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts | 121 |
1 files changed, 119 insertions, 2 deletions
diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts index ee4c71df..1b0d3565 100644 --- a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts @@ -1,5 +1,6 @@ import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'; import { ServiceListService } from '../../../../core/services/serviceList.service'; +import * as d3 from 'd3'; @Component({ selector: 'app-mdons-detail', @@ -22,6 +23,18 @@ export class MdonsDetailComponent implements OnInit { description: "", }; + roote2e = { + "name": "e2e", + "type": "e2e", + "children": [] + }; + + imgmap = { + '1': '../../../../assets/images/create-e2e.png', + '2': '../../../../assets/images/create-ns.png', + '3': '../../../../assets/images/create-vnf.png', + }; + getKeys(item) { return Object.keys(item); } @@ -39,12 +52,116 @@ export class MdonsDetailComponent implements OnInit { if (this.input_parameters.service.parameters.requestInputs != undefined && Object.keys(this.input_parameters.service.parameters.requestInputs).length > 0) { this.e2e_requestInputs = this.input_parameters.service.parameters.requestInputs; } + if (this.e2e_requestInputs != undefined) { + for(let item of this.e2e_requestInputs) { + console.log("outside "+item); + if((item.includes("enni_id") || item.includes("uni_id"))){ + console.log("inside "+item); + let nsIndex = { + "name": "ns", + "type": "ns", + "children": [] + }; + + this.roote2e.children.push(nsIndex); + } + + + } + console.log(this.e2e_requestInputs); + console.log(this.roote2e) + } + + this.drawImage(this.roote2e,this.imgmap); } goback() { this.closeDetail.emit(); } - + drawImage(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]; + }); + 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(); + console.log(nodes); + 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); + + + } -}
\ No newline at end of file +} |