summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views
diff options
context:
space:
mode:
authord00565011 <decheng.zhang@huawei.com>2021-08-17 09:55:00 -0400
committerdecheng zhang <decheng.zhang@huawei.com>2021-10-01 13:41:14 -0400
commit9b444bdfc55deee39bbbd33b32dff7e59e549b17 (patch)
tree6c30f4f8afd47ea7988c8760da17b6793b5ecae9 /usecaseui-portal/src/app/views
parentddf7473db8cdd6a526e23b2ec32412a2bf4275c2 (diff)
CCVPN-usecase(REQ-719) requirements: update and revise CCVPN-NETWORK module to support latest
ccvpn profile. Also, correct the line separator to linux format, to resolve the docker compiling issue. Issue-ID: USECASEUI-606 Signed-off-by: decheng zhang <decheng.zhang@huawei.com> Change-Id: I97c0155fe64072fcd147737e72171b975dc3fa1b
Diffstat (limited to 'usecaseui-portal/src/app/views')
-rw-r--r--usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.css2
-rw-r--r--usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html35
-rw-r--r--usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts1977
3 files changed, 921 insertions, 1093 deletions
diff --git a/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.css
index 53cf02b4..e1a1d6e4 100644
--- a/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.css
+++ b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.css
@@ -71,7 +71,6 @@
margin: 0;
color: #3C4F8C;
margin-left: 10px;
- display: inline-block;
}
.model .title-modelshow{
color: #A0AACD;
@@ -115,3 +114,4 @@
+
diff --git a/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html
index fb025d96..48d01d36 100644
--- a/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html
+++ b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html
@@ -16,13 +16,40 @@
<nz-spin [nzSpinning]="isSpinning" nzSize="large">
<div class="model">
<!--chart-->
- <button nz-button nzType="primary" *ngIf="!nonetwork" style="margin-top: 2px;display: inline-block" (click)="showForm()"
- [disabled]='isVisible' [attr.disabled] ='isVisible?true:undefined'>
- {{"i18nTextDefine_CreateLink" | translate}}
- </button>
+ <div class="action ant-tabs-bar">
+ <span>
+ <i class="icon">
+ <img src="assets/images/service-type.png"alt="">
+ </i>
+ {{"i18nTextDefine_Connectivity" | translate}} :
+ </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{connectivitySelected.name}}</span> <i class="anticon anticon-down"></i>
+ </button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseConnectivity(item)" *ngFor="let item of connectivityList">
+ <a title="{{item.name}}">{{item.name}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+
+<!-- <button class="create" nz-button [nzType]="'primary'" (click)="createModal()">
+ <i *ngIf="width>1200" class="anticon anticon-plus"></i>
+ <span> {{"i18nTextDefine_Create" | translate}} </span>
+ </button>-->
+ </div>
+
<h2 *ngIf="!nonetwork" [ngClass]="{'title-modelshow':isVisible == true}">
Please configure network links for registered devices and partner system.
</h2>
+ <h3 [ngClass]="{'title-modelshow':isVisible == true}">
+ Service Instances:
+ </h3>
+ <div id="svcContainer" style="overflow: hidden;">
+ </div>
+ <h3 [ngClass]="{'title-modelshow':isVisible == true}">
+ Network Topology:
+ </h3>
<div id="tpContainer" style="overflow: hidden;">
<div *ngIf="nonetwork" style="padding: 20px">
<h2>
diff --git a/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts
index 56009546..d1e40672 100644
--- a/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts
@@ -13,10 +13,13 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import * as d3 from 'd3';
+import {Component, OnInit} from '@angular/core';
+import * as d3 from 'd3'
import * as $ from 'jquery';
-import { networkHttpservice } from '../../../core/services/networkHttpservice.service';
+import {networkHttpservice} from '../../../core/services/networkHttpservice.service';
+import {EventQueueService} from "../../../core/services/eventQueue.service";
+import {AppEvent} from "@src/app/core/services/appEvent";
+import {AppEventType} from "@src/app/core/services/appEventType";
@Component({
selector: 'app-ccvpn-network',
@@ -25,62 +28,64 @@ import { networkHttpservice } from '../../../core/services/networkHttpservice.se
})
export class CcvpnNetworkComponent implements OnInit {
- constructor(private myhttp: networkHttpservice) {
+ constructor(private myhttp: networkHttpservice,
+ private eventDispatcher: EventQueueService) {
}
ngOnInit() {
let thisNg = this;
- thisNg.getD3Data();
-
-
- //Local cloud TP port connection, click on the right to expand the details
- $('#tpContainer').on('click', '.line-port', function () {
- thisNg.isVisible = false;
- thisNg.delBoxisVisible = true;
- thisNg.delcloud = false;
-
- thisNg.delTp1 = $(this).attr('data-tp1');
- thisNg.delTp2 = $(this).attr('data-tp2');
- thisNg.delNode1 = $(this).attr('data-node1');
- thisNg.delNode2 = $(this).attr('data-node2');
- thisNg.delVersion = $(this).attr('data-version');
- thisNg.delLinkname = $(this).attr('data-link');
- thisNg.delcloudUrl = null;
- thisNg.delLinkIndex = $(this);
-
- let dataD3 = thisNg.d3Data;
- for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
- if (dataD3[p]['name'] == thisNg.delTp1) {
- thisNg.network.push(dataD3[p]['source']['name']);
- }
- if (dataD3[p]['name'] == thisNg.delTp2) {
- thisNg.network.push(dataD3[p]['source']['name']);
+ this.isSpinning = true;
+ this.myhttp.getConnectivities()
+ .subscribe((data) => {
+ if(data){
+ for (let conn of data["connectivity"]) {
+ if (conn["vpn-type"] === "mdsc"){
+ this.connectivityList.push({ "name": conn["connectivity-id"],
+ "id": conn["connectivity-id"],
+ "relationship-list" : conn["relationship-list"]
+ });
+ }
+ }
+ if (this.connectivityList.length !== 0) {
+ this.connectivitySelected = this.connectivityList[0];
+ this.choseConnectivity(this.connectivitySelected);
+
+ };
}
- }
- thisNg.delNetwork1 = thisNg.network[0];
- thisNg.delNetwork2 = thisNg.network[1];
- });
+ },
+ (err) => {
+ console.log(err);
+ });
+ this.myhttp.getLogicalLinksData()
+ .subscribe((data) => {
+ if (data) {
+ for (let ll of data["logical-link"]){
+ // Filter layer1 logical link
+ //if (ll["relationship-list"] !== undefined &&
+ // ll["relationship-list"]["relationship"].length) {
+ thisNg.logicalLinks.push(ll);
+ //}
+ }
+ let tpMapping = thisNg.getPnfTpMapping(thisNg.logicalLinks);
- //External cloud connection, click on the right to expand the details
- $('#tpContainer').on('click', '.cloudline', function () {
- thisNg.isVisible = false;
- thisNg.delBoxisVisible = true;
- thisNg.delcloud = true;
-
- thisNg.delTp1 = $(this).attr('data-tp1');
- thisNg.delTp2 = $(this).attr('data-tp2');
- thisNg.delNode1 = $(this).attr('data-node1');
- thisNg.delNode2 = $(this).attr('data-node2');
- thisNg.delVersion = $(this).attr('data-version');
- thisNg.delNetwork1 = $(this).attr('data-network');
- thisNg.delNetwork2 = $(this).attr('data-cloudnetwork');
- thisNg.delcloudUrl = $(this).attr('data-url');
- thisNg.delLinkname = $(this).attr('data-link');
- thisNg.aaiId = $(this).attr('data-aaiid');
- thisNg.getCloudUrl(thisNg.aaiId);
- });
+ let links = thisNg.getLinks( thisNg.logicalLinks, tpMapping);
+ let tps = thisNg.getNodes(tpMapping);
+ console.log(links);
+ console.log(tps);
+
+ thisNg.drawTopo(tps, links);
+
+ }
+ this.isSpinning = false;
+ },
+ (err) => {
+ console.log(err);
+ })
}
+ connectivityList = [];
+ connectivitySelected = { name: null, id: null };
+
addLinkDisabled = true;
nonetwork = false;
isVisible = false;
@@ -89,6 +94,9 @@ export class CcvpnNetworkComponent implements OnInit {
delBoxisVisible = false;
isSpinning = true;
+ pnfs = [];
+ layer1Tps = [];
+
d3Data = [];//D3Render the required data
logicalLinks = [];//logicalLinks Existing connection data returned by the interface
linkName = null;//Linked name link-name
@@ -129,12 +137,25 @@ export class CcvpnNetworkComponent implements OnInit {
winWidth = $('#tpContainer').width();
winHeight = $('#tpContainer').height();
charge = -300;
+ SEPERATOR = '-';
- imgmap = {
- '1': 'assets/images/cloud-county1.png',
- '2': 'assets/images/tp.png',
- '3': 'assets/images/cloud-out.png',
+
+ imgMap = {
+ 'pnf': 'assets/images/site.png',
+ 'tp': 'assets/images/tp.png'
};
+
+ //### SELECTION - store the selected node ###
+ //### EDITING - store the drag mode (either 'drag' or 'add_link') ###
+ svcEditorGlobal = {
+ selection: null
+ }
+ svcContainerOpt = {
+ containerId : "svcContainer",
+ width: 1000,
+ height: this.winHeight
+ };
+
tpoption = {
container: '#tpContainer',
data: '',
@@ -142,1127 +163,907 @@ export class CcvpnNetworkComponent implements OnInit {
height: this.winHeight
};
- showForm(): void {
- if (this.addLinkDisabled == false) {
- this.isVisible = true;
- this.delBoxisVisible = false;
- }
- }
-
- hideForm(): void {
- this.isVisible = false;
- this.delBoxisVisible = false;
- this.linkName = null;
- this.networkVal1 = null;//Initialize the default data of the network1 drop-down box
- this.networkVal2 = null;//Initialize the network2 drop-down box default data
- this.selectedNode1 = null;//Initialize the default data of the node1 drop-down box
- this.selectedNode2 = null;//Initialize the default data of the node2 drop-down box
- this.selecteTpName1 = null;//Initialize the default data of the TP1 drop-down box
- this.selecteTpName2 = null;//Initialize the default data of the TP2 drop-down box
- this.cloudUrl = null;//External cloud URL address
- this.cloudNetwork = null;//External cloud network name
- this.cloudNode = null;//External cloud Node name
- this.cloudTp = null;//External cloud Tp name
- }
-
- //Get cloud image data
- getD3Data() {
- this.isSpinning = true;
- this.myhttp.getNetworkD3Data()
- .subscribe((data) => {
- this.isSpinning = false;
- if (data.length == 0) {
- this.addLinkDisabled = false;
- this.nonetwork = true;
- return;
- }
- this.nonetwork = false;
- for (let ii = 0; ii < data.length; ii++) {//Determine if there is external cloud information in the data, and kick it out.
- if (data[ii]['aaiId'] != null) {
- this.dataCloud = data.splice(ii, 1);
- }
- }
-
- for (let i = 0; i < data.length; i++) {
- let name1 = {}, name2 = {};
- let nodess = [];
- name1['name'] = name2['network'] = data[i]['networkId'];
- name1['type'] = '1';
- name1['source'] = i;
- this.d3Data.push(name1);
- for (let c = 0; c < data[i]["pnfs"].length; c++) {
- nodess.push(data[i]['pnfs'][c]['pnfName']);
- this.nodeOption1[name2['network']] = nodess;
- }
- this.networkOption.push(name2);
+ /**
+ * Redraw the selected L2 ethernet service.
+ * @param {Array<object>} treeData parsed from AAI connectivity.
+ */
+ drawService(treeData) {
+ //Model of service graph
+ let graph = {
+ nodes: [
+ ],
+ links: [
+ ],
+ objectify: (function() {
+ /* resolve node IDs (not optimized at all!)
+ */
+ var l, n, _i, _len, _ref, _results;
+ _ref = graph.links;
+ _results = [];
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ l = _ref[_i];
+ _results.push((function() {
+ var _j, _len2, _ref2, _results2;
+ _ref2 = graph.nodes;
+ _results2 = [];
+ for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
+ n = _ref2[_j];
+ if (l.source === n.id) {
+ l.source = n;
+ continue;
+ }
+ if (l.target === n.id) {
+ l.target = n;
+ continue;
+ } else {
+ _results2.push(void 0);
+ }
+ }
+ return _results2;
+ })());
}
- for (let i = 0; i < data.length; i++) {
- let tp_length = data[i]['tps'].length;
- for (let h = 0; h < tp_length; h++) {
- let name2 = {};
- let interface_name = data[i]['tps'][h]['interface-name'];
- name2['name'] = interface_name;
- name2['type'] = '2';
- name2['source'] = i;
- this.d3Data.push(name2);
- }
+ return _results;
+ }),
+ remove: (function(condemned) {
+ /* remove the given node or link from the graph, also deleting dangling links if a node is removed
+ */ if (Array.prototype.indexOf.call(this.nodes, condemned) >= 0) {
+ this.nodes = this.nodes.filter(function(n) {
+ return n !== condemned;
+ });
+ return this.links = this.links.filter(function(l) {
+ return l.source.id !== condemned.id && l.target.id !== condemned.id;
+ });
+ } else if (Array.prototype.indexOf.call(this.links, condemned) >= 0) {
+ return this.links = this.links.filter(function(l) {
+ return l !== condemned;
+ });
}
- for (let b = 0; b < this.d3Data.length; b++) {
- this.d3Data[b]['target'] = b;
+ }),
+ last_index: 0,
+ add_node: (function(type) {
+ var n;
+ n = {
+ id: this.last_index++,
+ x: 960 / 2,
+ y: 500 / 2,
+ type: type
+ };
+ this.nodes.push(n);
+ return n;
+ }),
+ add_link: (function(source, target) {
+ /* avoid links to self
+ */
+ var l, link, _i, _len, _ref;
+ if (source === target) return null;
+ /* avoid link duplicates
+ */
+ _ref = this.links;
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ link = _ref[_i];
+ if (link.source === source && link.target === target) return null;
}
- this.initPosition(this.d3Data);
- setTimeout(this.render(this.d3Data, this.imgmap, this.dataCloud, this.charge, data), 0);
- }, (err) => {
- console.log(err);
- });
+ l = {
+ source: source,
+ target: target
+ };
+ this.links.push(l);
+ return l;
+ })
+ };
- }
+ var nodeList = treeData.map(obj => {
+ let rObj = {};
+ rObj["id"] = obj["id"];
+ rObj["x"] = 500;
+ rObj["y"] = 500;
+ rObj["type"] = obj["type"];
+ return rObj;
+ })
- //Get the initial connection status of the cloud image getlogicalLinksData
- getLinksData() {
- this.myhttp.getLogicalLinksData()
- .subscribe((data) => {
- if (data["status"] == "FAILED") {
- return;
+ var linkList = [] ;
+ for (var i = 0, e = treeData.length; i < e; i++){
+ for (var j = i+1, k = e; j < k; j++){
+ linkList.push({
+ source: treeData[i].id,
+ target: treeData[j].id
+ });
}
- for (let i = 0; i < data["logical-link"].length; i++) {//Determine whether there is an external cloud connection in the obtained connection, and kick it out.
- if (data['logical-link'][i]['relationship-list']['relationship'].length > 2) {
- this.dataCloudLink = data['logical-link'].splice(i, 1);
+ }
+ graph.nodes = nodeList;
+ graph.links = linkList;
+ graph.objectify();
+ var _this = this;
+ var margin = {top: 20, right: 120, bottom: 20, left: 120},
+ width = 1000 - margin.right - margin.left,
+ height = 350 - margin.top - margin.bottom;
+ //clean existing element
+ d3.select("div#" + this.svcContainerOpt.containerId).selectAll("*").remove();
+
+ let svg = d3.select("div#" + this.svcContainerOpt.containerId).append("svg")
+ .attr("width", width + margin.right + margin.left)
+ .attr("height", height + margin.top + margin.bottom);
+ let container = svg.append("g").style("fill", "transparent");
+
+ let vis = container.append('g');
+ container.call(d3.behavior.zoom().scaleExtent([0.5, 8])
+ .on('zoom', function(){
+ vis.attr('transform', "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+ }));
+
+ vis.append('rect')
+ .attr('class', 'overlay')
+ .attr('x', -500000)
+ .attr('y', -500000)
+ .attr('width', 1000000)
+ .attr('height', 1000000)
+ .on('click', function(d) {
+ _this.svcEditorGlobal.selection = null;
+ d3.selectAll('.node').classed('selected', false);
+ return d3.selectAll('.link').classed('selected', false);
+ });
+ let colorify = d3.scale.category10();
+ /* initialize the force layout
+ */
+ let force = d3.layout.force().size([width, height]).charge(-400).linkDistance(160)
+ .on('tick', (function(e) {
+ /* update nodes and links
+ */
+ let k = 16 * e.alpha;
+ graph.nodes.forEach(function(o, i) {
+ if (o["type"] === "root"){
+ o["x"] += k
+ //o["x"] += i & 2 ? k : -k;
+
+ } else if (o["type"] === "leaf") {
+ o["x"] += -k;
+ //o["x"] += i & 2 ? k : -k;
}
- }
+ });
+ vis.selectAll('.node').attr('transform', function(d) {
+ return "translate(" + d.x + "," + d.y + ")";
+ });
- for (let i = 0; i < data["logical-link"].length; i++) {
- let textval = [];
- textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
- textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
- textval[2] = data['logical-link'][i]['resource-version'];//version
- textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
- textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
- textval[5] = data['logical-link'][i]['operational-status'];
- textval[6] = data['logical-link'][i]['link-name'];
- this.logicalLinks.push(textval);
- this.chose(textval);
- }
- if (this.dataCloudLink.length > 0) {
- this.getcloudLine(this.dataCloudLink);
- }
- }, (err) => {
- console.log(err);
- });
- }
- //D3Cloud rendering
- render(nodes, imgmap, dataCloud, charge, dataD3) {
- let thiss = this;
- let _this = this.tpoption,
- width = null,
- height = _this.height;
- if (_this.width > 800) {
- width = _this.width;
- } else {
- width = 800;
- }
- if (dataD3.length <= 4) {
- charge = -300;
- } else if (dataD3.length > 4 && dataD3.length <= 6) {
- charge = -160;
- } else if (dataD3.length > 6 && dataD3.length <= 10) {
- charge = -110;
- } else {
- charge = -100;
- }
- let svg = d3.select(_this.container).append('svg')
- .attr('width', width)
- .attr('height', height)
- .attr('id', 'content-svg')
- .style('pointer-events', 'all')
- .style('position', 'absolute')
- .style('top', '1%')
- .style('right', '2%'),
- graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'),
-
- _g_nodes = graph.selectAll('g.node')
- .data(nodes)
- .enter()
- .append('g')
- .style('display', function (d) {
- let display = 'block';
- switch (d.type) {
- case '1':
- display = 'none';
- break;
- case '2':
- display = 'none';
- break;
- default:
- break;
+ //#svcContainer > svg > g > g > g:nth-child(3) > text
+ //_this.svcEditorGlobal.selection
+ return vis.selectAll('.link').attr('x1', function(d) {
+ return d.source.x;
+ }).attr('y1', function(d) {
+ return d.source.y;
+ }).attr('x2', function(d) {
+ return d.target.x;
+ }).attr('y2', function(d) {
+ return d.target.y;
+ });
+ }));
+ let nodeDragging = force.drag().on('dragstart', function (d){
+ d3.event.sourceEvent.stopPropagation();
+ d.fixed = true;
+ })
+
+ let topoNodeSync = _this.eventDispatcher.on(AppEventType.UserNodeDrag)
+ .subscribe(event => {
+ //console.log(event);
+ let pnfId: string = event.payload.id;
+ let pnfId_short: string = pnfId.substr(pnfId.lastIndexOf('-')+1);
+ vis.selectAll('.node > circle').attr('stroke-width', function(d) {
+ if (d.id.startsWith(pnfId_short)){
+ return "4px";
}
- return display;
- })
- .style('cursor', 'pointer')
- .attr('class', 'node'),
-
- _g_lines = graph.selectAll('line.line')
- .data(nodes)
- .enter()
- .append('g')
- .style('display', 'none')
- .attr('class', 'line');
-
-
- _g_lines.append('line')
- .style('stroke', '#93c62d'
- )
- .style('stroke-width', 2);
-
- _g_nodes.append('image')
- .attr('width', function (d) {
- let width = 40;
- switch (d.type) {
- case '1':
- width = 4.4 * width;
- break;
- case '2':
- width = 0.12 * width;
- break;
- default:
- break;
- }
- return width;
- })
- .attr('height', function (d) {
- let height = 20;
- switch (d.type) {
- case '1':
- height = 3.5 * height;
- break;
- case '2':
- height = 0.2 * height;
- break;
- default:
- break;
- }
- return height;
- })
- .attr('xlink:href', function (d) {
- return imgmap[d.type];
+ return "1px";
+ });
});
- _g_nodes.append('text')
- .text(function (d) {
- return d.name;
- })
- .style('transform', function (d) {
- let x = null;
- let y = null;
- switch (d.type) {
- case '1':
- x = 7;
- y = -7;
- break;
- case '2':
- x = 1;
- y = -2;
- break;
- default:
- break;
- }
- return 'translate(' + x + '%,' + y + '%)';
- })
- .style('font-size', function (d) {
- let size = 14;
- switch (d.type) {
- case '1':
- size = 14;
- break;
- case '2':
- size = 12;
- break;
- default:
- break;
- }
- return size;
- })
- .style('fill', function (d) {
- let color = '#666';
- switch (d.type) {
- case '1':
- color = '#666';
- break;
- case '2':
- color = '#666';
- break;
- default:
- break;
- }
- return color;
- })
- .style('font-weight', '500');
-
+ // DELETION - pressing DEL deletes the selection
+ // CREATION - pressing N creates a new node
+ // d3.select(window).on('keydown', function() {
+ // if (d3.event.keyCode === 46) {
+ // if (global.selection != null) {
+ // graph.remove(global.selection);
+ // global.selection = null;
+ // return update();
+ // }
+ // } else if (d3.event.keyCode === 78) {
+ // graph.add_node();
+ // return update();
+ // }
+ // });
+
+ //Parameter for Editing tools
+ let toolbar = $("<div class='toolbar'></div>");
+ $("div#" + this.svcContainerOpt.containerId).append(toolbar);
+ toolbar.append($("<svg\n" +
+ " class='active tool'\n " +
+ "data-tool='pointer'\n" +
+ " xmlns='http://www.w3.org/2000/svg'\n" +
+ " version='1.1'\n" +
+ " width='32'\n" +
+ " height='32'\n" +
+ " fill='#b52d0c'" +
+ " viewBox='0 0 128 128'>\n" +
+ " <g transform='translate(881.10358,-356.22543)'>\n" +
+ " <g transform='matrix(0.8660254,-0.5,0.5,0.8660254,-266.51112,-215.31898)'>\n" +
+ " <path\n" +
+ " d='m -797.14902,212.29589 a 5.6610848,8.6573169 0 0 0 -4.61823,4.3125 l -28.3428,75.0625 a 5.6610848,8.6573169 0 0 0 4.90431,13 l 56.68561,0 a 5.6610848,8.6573169 0 0 0 4.9043,-13 l -28.3428,-75.0625 a 5.6610848,8.6573169 0 0 0 -5.19039,-4.3125 z m 0.28608,25.96875 18.53419,49.09375 -37.06838,0 18.53419,-49.09375 z'\n />\n" +
+ " <path\n" +
+ " d='m -801.84375,290.40625 c -2.09434,2.1e-4 -3.99979,1.90566 -4,4 l 0,35.25 c 2.1e-4,2.09434 1.90566,3.99979 4,4 l 10,0 c 2.09434,-2.1e-4 3.99979,-1.90566 4,-4 l 0,-35.25 c -2.1e-4,-2.09434 -1.90566,-3.99979 -4,-4 z'\n />\n" +
+ " </g>\n" +
+ " </g>\n" +
+ "</svg>"));
+ toolbar.append($("<svg\n" +
+ " class='tool'\n" +
+ " data-tool='add_node'\n" +
+ " xmlns='http://www.w3.org/2000/svg'\n" +
+ " version='1.1'\n" +
+ " width='32'\n" +
+ " height='32'\n" +
+ " viewBox='0 0 128 128'>\n" +
+ " <g transform='translate(720.71649,-356.22543)'>\n" +
+ " <g transform='translate(-3.8571429,146.42857)'>\n" +
+ " <path\n d='m -658.27638,248.37149 c -1.95543,0.19978 -3.60373,2.03442 -3.59375,4 l 0,12.40625 -12.40625,0 c -2.09434,2.1e-4 -3.99979,1.90566 -4,4 l 0,10 c -0.007,0.1353 -0.007,0.27095 0,0.40625 0.19978,1.95543 2.03442,3.60373 4,3.59375 l 12.40625,0 0,12.4375 c 2.1e-4,2.09434 1.90566,3.99979 4,4 l 10,0 c 2.09434,-2.1e-4 3.99979,-1.90566 4,-4 l 0,-12.4375 12.4375,0 c 2.09434,-2.1e-4 3.99979,-1.90566 4,-4 l 0,-10 c -2.1e-4,-2.09434 -1.90566,-3.99979 -4,-4 l -12.4375,0 0,-12.40625 c -2.1e-4,-2.09434 -1.90566,-3.99979 -4,-4 l -10,0 c -0.1353,-0.007 -0.27095,-0.007 -0.40625,0 z'\n" +
+ " />\n" +
+ " <path\n" +
+ " d='m -652.84375,213.9375 c -32.97528,0 -59.875,26.86847 -59.875,59.84375 0,32.97528 26.89972,59.875 59.875,59.875 32.97528,0 59.84375,-26.89972 59.84375,-59.875 0,-32.97528 -26.86847,-59.84375 -59.84375,-59.84375 z m 0,14 c 25.40911,0 45.84375,20.43464 45.84375,45.84375 0,25.40911 -20.43464,45.875 -45.84375,45.875 -25.40911,0 -45.875,-20.46589 -45.875,-45.875 0,-25.40911 20.46589,-45.84375 45.875,-45.84375 z'\n" +
+ " />\n" +
+ " </g>\n" +
+ " </g>\n" +
+ "</svg>"));
+ toolbar.append($("<svg\n" +
+ " class='tool'\n" +
+ " data-tool='add_link'\n" +
+ " xmlns='http://www.w3.org/2000/svg'\n" +
+ " version='1.1'\n" +
+ " width='32'\n" +
+ " height='32'\n" +
+ " viewBox='0 0 128 128'>\n" +
+ "<g transform='translate(557.53125,-356.22543)'>\n" +
+ " <g transform='translate(20,0)'>\n" +
+ " <path\n" +
+ " d='m -480.84375,360 c -15.02602,0 -27.375,12.31773 -27.375,27.34375 0,4.24084 1.00221,8.28018 2.75,11.875 l -28.875,28.875 c -3.59505,-1.74807 -7.6338,-2.75 -11.875,-2.75 -15.02602,0 -27.34375,12.34898 -27.34375,27.375 0,15.02602 12.31773,27.34375 27.34375,27.34375 15.02602,0 27.375,-12.31773 27.375,-27.34375 0,-4.26067 -0.98685,-8.29868 -2.75,-11.90625 L -492.75,411.96875 c 3.60156,1.75589 7.65494,2.75 11.90625,2.75 15.02602,0 27.34375,-12.34898 27.34375,-27.375 C -453.5,372.31773 -465.81773,360 -480.84375,360 z m 0,14 c 7.45986,0 13.34375,5.88389 13.34375,13.34375 0,7.45986 -5.88389,13.375 -13.34375,13.375 -7.45986,0 -13.375,-5.91514 -13.375,-13.375 0,-7.45986 5.91514,-13.34375 13.375,-13.34375 z m -65.375,65.34375 c 7.45986,0 13.34375,5.91514 13.34375,13.375 0,7.45986 -5.88389,13.34375 -13.34375,13.34375 -7.45986,0 -13.34375,-5.88389 -13.34375,-13.34375 0,-7.45986 5.88389,-13.375 13.34375,-13.375 z'\n" +
+ " />\n <path\n" +
+ " d='m -484.34375,429.25 c -1.95543,0.19978 -3.60373,2.03442 -3.59375,4 l 0,12.40625 -12.40625,0 c -2.09434,2.1e-4 -3.99979,1.90566 -4,4 l 0,10 c -0.007,0.1353 -0.007,0.27095 0,0.40625 0.19978,1.95543 2.03442,3.60373 4,3.59375 l 12.40625,0 0,12.4375 c 2.1e-4,2.09434 1.90566,3.99979 4,4 l 10,0 c 2.09434,-2.1e-4 3.99979,-1.90566 4,-4 l 0,-12.4375 12.4375,0 c 2.09434,-2.1e-4 3.99979,-1.90566 4,-4 l 0,-10 c -2.1e-4,-2.09434 -1.90566,-3.99979 -4,-4 l -12.4375,0 0,-12.40625 c -2.1e-4,-2.09434 -1.90566,-3.99979 -4,-4 l -10,0 c -0.1353,-0.007 -0.27095,-0.007 -0.40625,0 z'\n" +
+ " />\n" +
+ " </g>\n" +
+ " </g>\n" +
+ "</svg>"));
+ let library = $("<div class='library'></div></div>");
+ toolbar.append(library);
+
+ ['PON', 'ETH'].forEach(function(type) {
+ var new_btn;
+ new_btn = $("<svg width='42' height='42'>\n" +
+ " <g class='node'>\n" +
+ " <circle\n" +
+ " cx='21'\n" +
+ " cy='21'\n" +
+ " r='18'\n" +
+ " stroke='" + (colorify(type)) + "'\n" +
+ " fill='" + (d3.hcl(colorify(type)).brighter(3)) + "'\n" +
+ " >\n" +
+ " <title>" + (type) + " UNI</title> \n" +
+ " </circle>" +
+ " </g>\n" +
+ "</svg>");
+ new_btn.bind('click', function() {
+ graph.add_node(type);
+ return update();
+ });
+ library.append(new_btn);
+ return library.hide();
+ });
- //Add custom attributes online
- _g_lines.each(function (d, i) {
- let _this = d3.select(this);
- if (d.name) {
- _this.attr('data-text', d.name);
+ let tool = 'pointer';
+ let new_link_source = null;
+ let drag_link;
+ vis.on('mousemove.add_link', (function(d) {
+ /* check if there is a new link in creation
+ */
+ var p;
+ if (new_link_source != null) {
+ /* update the draggable link representation
+ */
+ p = d3.mouse(vis.node());
+ return drag_link.attr('x1', new_link_source.x).attr('y1', new_link_source.y).attr('x2', p[0]).attr('y2', p[1]);
+ }
+ })).on('mouseup.add_link', (function(d) {
+ new_link_source = null;
+ /* remove the draggable link representation, if exists
+ */
+ if (drag_link != null) return drag_link.remove();
+ }));
+ d3.selectAll('.tool').on('click', function() {
+ var new_tool, nodes;
+ d3.selectAll('.tool').classed('active', false).style("fill", "#a3a4c3");
+ d3.select(this).classed('active', true).style("fill", "#b52d0c");
+ new_tool = $(this).data('tool');
+ nodes = vis.selectAll('.node');
+
+ //mode change to add_link
+ if (new_tool === 'add_link' && tool !== 'add_link') {
+ /* remove drag handlers from nodes
+ */
+ nodes.on('mousedown.drag', null).on('touchstart.drag', null);
+ /* add drag handlers for the add_link tool
+ */
+ nodes.call(drag_add_link);
+ } else if (new_tool !== 'add_link' && tool === 'add_link') {
+ /* remove drag handlers for the add_link tool
+ */
+ nodes.on('mousedown.add_link', null).on('mouseup.add_link', null);
+ /* add drag behavior to nodes
+ */
+ nodes.call(nodeDragging);
+ }
+ if (new_tool === 'add_node') {
+ library.show();
+ } else {
+ library.hide();
}
+ return tool = new_tool;
});
-
- let force = d3.layout.force()
- .size([1000, this.winHeight])
- .linkDistance(5)
- // .theta(0.6)
- .charge(charge)
- .nodes(nodes)
- .links(nodes)
- .start();
-
- force.on('tick', function () {
- if (force.alpha() <= 0.04) {
-
- _g_nodes.style('display', function (d) {
- let display = 'block';
- switch (d.type) {
- case '1':
- display = 'block';
- break;
- case '2':
- display = 'none';
- break;
- default:
- break;
- }
- return display;
+ update();
+ function update() {
+ /* update the layout
+ */
+ var links, new_nodes, nodes;
+ force.nodes(graph.nodes).links(graph.links).start();
+ /* create nodes and links
+ */
+ /* (links are drawn with insert to make them appear under the nodes)
+ */
+ /* also define a drag behavior to drag nodes
+ */
+ /* dragged nodes become fixed
+ */
+ nodes = vis.selectAll('.node').data(graph.nodes, function(d) {
+ return d.id;
+ });
+ new_nodes = nodes.enter().append('g').attr('class', 'node');
+/* .on('click', (function(d) {
+ /!* SELECTION
+ *!/
+ _this.svcEditorGlobal.selection = d;
+ d3.selectAll('.node').classed('selected', function(d2) {
+ return d2 === d;
});
+ return d3.selectAll('.link').classed('selected', false);
+ }));*/
+ links = vis.selectAll('.link').data(graph.links, function(d) {
+ return "" + d.source.id + "->" + d.target.id;
+ });
- nodes.forEach(function (d, i) {
- d.x = d.x - 25 < 0 ? 25 : d.x;
- d.x = d.x + 25 > width ? width - 25 : d.x;
- d.y = d.y - 15 < 0 ? 15 : d.y;
- d.y = d.y + 15 > height ? height - 15 : d.y;
+ links.enter().insert('line', '.node').attr('class', 'link').on('click', (function(d) {
+ /* SELECTION
+ */
+ _this.svcEditorGlobal.selection = d;
+ d3.selectAll('.link').classed('selected', function(d2) {
+ return d2 === d;
});
+ return d3.selectAll('.node').classed('selected', false);
+ }));
+ links
+ .style("stroke-width", "6px")
+ .style("stroke", "gray")
+ .style("opacity", "0.5");
+
+ links.exit().remove();
+ /* TOOLBAR - add link tool initialization for new nodes
+ */
+ if (tool === 'add_link') {
+ new_nodes.call(drag_add_link);
+ } else {
+ new_nodes.call(nodeDragging);
+ }
+ new_nodes.append('circle').attr('r', 18).attr('stroke', function(d) {
+ return colorify(d.type);
+ }).attr('fill', function(d) {
+ return d3.hcl(colorify(d.type)).brighter(3);
+ });
+ /* draw the label
+ */
+ new_nodes.append('text').text(function(d) {
+ return d.id;
+ }).attr('dy', '0.35em').attr('fill', function(d) {
+ return colorify(d.type);
+ });
+ return nodes.exit().remove();
+ };
+ function drag_add_link (selection) {
+ return selection.on('mousedown.add_link', (function(d) {
+ var p;
+ new_link_source = d;
+ /* create the draggable link representation
+ */
+ p = d3.mouse(vis.node());
+ drag_link = vis.insert('line', '.node').attr('class', 'drag_link').attr('x1', d.x).attr('y1', d.y).attr('x2', p[0]).attr('y2', p[1]);
+ drag_link
+ .style("stroke-width", "6px")
+ .style("stroke", "gray")
+ .style("opacity", "0.5");
+ /* prevent pan activation
+ */
+ d3.event.stopPropagation();
+ /* prevent text selection
+ */
+ return d3.event.preventDefault();
+ })).on('mouseup.add_link', (function(d) {
+ /* add link and update, but only if a link is actually added
+ */ if (graph.add_link(new_link_source, d) != null) return update();
+ }));
+ };
- _g_nodes.attr('transform', function (d) {
- let image = d3.select(this).select('image')[0][0],
- halfWidth = parseFloat(image.attributes[0]['value']) / 2,
- halfHeight = parseFloat(image.attributes[1]['value']) / 2;
- let xx = d.x - halfWidth,
- yy = d.y - halfHeight;
- return 'translate(' + xx + ',' + yy + ')';
- });
+ }
- _g_lines.select('line')
- .attr('x1', function (d) {
- return d.source.x;
- })
- .attr('y1', function (d) {
- return d.source.y;
- })
- .attr('x2', function (d) {
- return d.target.x;
- })
- .attr('y2', function (d) {
- return d.target.y;
- });
+ /**
+ * Redraw the underlay network topology.
+ * @param {Array<object>} nodes parsed from AAI logicalLinks.
+ * @param {Array<object>} lines parsed from AAI logicalLinks.
+ */
+ drawTopo(nodes: Array<object>, lines: Array<object>){
+ let margin = {top: 20, right: 120, bottom: 20, left: 120},
+ width = 1000 - margin.right - margin.left,
+ height = 350 - margin.top - margin.bottom;
- _g_nodes.select('text').attr('dy', function (d) {
- let image = this.previousSibling,
- height = parseFloat(image.attributes[1]['value']),
- fontSize = 12;
- return height + 1.5 * fontSize;
- });
- }
+ let thisNg = this;
+
+ let nodeById = d3.map();
+
+ nodes.forEach(function(node) {
+ nodeById.set(node["id"], node);
});
- force.on('end', function () {
- force.stop();
- if (dataCloud.length > 0) {
- thiss.getoutCloud(dataCloud, imgmap);
- }
- thiss.getLinksData();
- thiss.addLinkDisabled = false;
+ lines.forEach(function(link) {
+ link["source"] = nodeById.get(link["source"]);
+ link["target"] = nodeById.get(link["target"]);
});
- };
+ let svg = d3.select("div#tpContainer").append("svg")
+ .attr("width", width + margin.right + margin.left)
+ .attr("height", height + margin.top + margin.bottom)
+ .style("pointer-events", "all");
- //Topology drag and drop effect
- getDragBehavior(force) {
+ let graph = svg.append("g").attr("class", "graph");
- return d3.behavior.drag()
- .origin(function (d) {
- return d;
+ let force = d3.layout.force()
+ .nodes(nodes)
+ .links(lines)
+ .size([width, height])
+ /* .linkStrength(function(d){
+ switch(d.type){
+ case 1:
+ return 0.15;
+ case 2:
+ default:
+ return 0.1;
+ }
+ })*/
+ //.gravity(0)
+ //.gravity(0)
+ .linkDistance(function (d) {
+ return 150;
})
- .on('dragstart', dragstart)
- .on('drag', dragging)
- .on('dragend', dragend);
+ .charge(function(d) {
+ return -600;
+ })
+ .start();
- function dragstart(d) {
- d3.event.sourceEvent.stopPropagation();
- d3.select(this).classed('dragging', true);
- force.start();
- }
+ let drag = force.drag()
+ .on("dragstart", dragstart)
+ .on("dragend", dragend);
- function dragging(d) {
- d.x = d3.event.x;
- d.y = d3.event.y;
- }
+ let _g_lines = graph.selectAll("line.line")
+ .data(lines)
+ .enter()
+ .append("g")
+ .attr("class", "line");
- function dragend(d) {
- d3.select(this).classed('dragging', false);
- }
+ let _g_nodes = graph.selectAll("g.node")
+ .data(nodes)
+ .enter()
+ .append("g")
+ .attr("class", "node")
+ .call(drag);
+ _g_lines.append("line")
+ .style('stroke', function (d) {
+ if(d.type === 2){
+ return "#000000";
+ } else {
+ return '#93c62d';
+ }
- }
+ })
+ .style("stroke-width", 4);
- //Initialize node location
- initPosition(datas) {
- let origin = [this.tpoption.width / 2, this.tpoption.height / 2];
- let points = this.getVertices(origin, Math.min(this.tpoption.width / 2, this.tpoption.height / 2), datas.length);
- datas.forEach((item, i) => {
- item.x = points[i].x;
- item.y = points[i].y;
- });
- }
- //Get anchor points based on polygons
- getVertices(origin, r, n) {
- if (typeof n !== 'number') return;
- let ox = origin[0];
- let oy = origin[1];
- let angle = 30 * n / n;
- let i = 0;
- let points = [];
- let tempAngle = 0;
- while (i < n) {
- tempAngle = (i * angle * Math.PI) / 180;
- points.push({
- x: ox - r * Math.sin(tempAngle),
- y: oy - r * Math.cos(tempAngle),
+ _g_nodes.append("image")
+ .attr("width", function (d) {
+ switch (d.group) {
+ case 'pnf':
+ return 70;
+ case 'tp':
+ default:
+ return 10;
+ }
+ })
+ .attr("height", function (d) {
+ switch (d.group) {
+ case 'pnf':
+ return 70;
+ case 'tp':
+ default:
+ return 10;
+ }
+ })
+ .attr("xlink:href", function (d) {
+ return thisNg.imgMap[d.group];
});
- i++;
- }
- return points;
- }
- //Rendering an external cloud
- getoutCloud(dataCloud, imgmap) {
- let _this = this,
- width;
- let networkId = dataCloud[0]['networkId'];
- if (_this.tpoption.width > 800) {
- width = _this.tpoption.width;
- } else {
- width = 800;
- }
- let svg = d3.select('#content-svg');
- svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)');
- let out = d3.select('#out');
- out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
- out.append('text').text(networkId)
- .style('transform', 'translate(0，0)')
- .style('font-size', '16')
- .style('font-weight', '400')
- .attr('dx', '40')
- .attr('dy', '70')
- .style('fill', '#666');
- }
+ _g_nodes.append("text")
+ .text(function (d) {
+ return d.id.substr( d.id.lastIndexOf('-')+1);
+ })
+ .style('font-size', '12')
+ .style('fill', '#333');
+
+ //_g_nodes.each(function (d, i) {
+ var selection = d3.select(this);
+/* if (d.status == '0') {
+ selection.append("g").attr("class", "error-tip")
+ .append("image").attr("xlink:href", function (d) {
+ return imgMap['error-tip'];
+ });
+ }*/
+ // });
- //External cloud connection
- getcloudLine(dataCloudLink) {
- let textval = [];
- textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
- textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
- textval[2] = dataCloudLink[0]['resource-version'];//version
- textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
- textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
- textval[5] = dataCloudLink[0]['operational-status'];//status
- textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId
- textval[7] = this.dataCloud[0]['networkId'];
- let dataD3 = this.d3Data;
- let arr = [
- textval[0],
- textval[1]
- ];
- for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
- for (let pp = 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to
- if (dataD3[p]['name'] == arr[pp]) {
- textval[8] = dataD3[p]['source']['name'];//network1
- }
- }
- }
- textval[9] = dataCloudLink[0]['link-name'];
- let lines_json = {};
- let _this = this,
- width;
- if (_this.tpoption.width > 800) {
- width = _this.tpoption.width;
- } else {
- width = 800;
- }
- for (let i = 0; i < $(".node").length; i++) {
- if ($('.node').eq(i).find('text').html() == textval[8]) {
- //Get the x, y coordinates of the second level
- let translates = $('.node').eq(i).css('transform');
- lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
- lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
- lines_json['x2'] = width - 100;
- lines_json['y2'] = 100;
+ _g_lines.each(function (d, i) {
+ var _this = d3.select(this);
+ if (d.type === 1) {
+ _this.append("text")
+ .text("100GB")
+ .style('fill', 'rgb(255,198,22)')
+ .style('font-size', '11');
+
+ _this.append("rect")
+ .attr("fill", function (d) {
+ return '#555';
+ })
+ .attr("width", function (d) {
+ return 4;
+ })
+ .attr("height", function (d) {
+ return 4;
+ })
+ .append("animate");
+
+ _this.select("rect").append("animate");
+ } else {
+ _this.append("image")
+ .attr("xlink:href", function () {
+ return thisNg.imgMap['link-cut'];
+ });
}
- }
- let x1 = lines_json['x1'];
- let y1 = lines_json['y1'];
- let x2 = lines_json['x2'];
- let y2 = lines_json['y2'];
- let color = '#14bb58';
- if (textval[5] == 'up') {
- color = '#14bb58';
- } else {
- color = 'red';
- }
- let line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
- let svg = d3.select('#graph');
- $('.cloudline').remove();
- $('#graph').prepend(line);
- $('.cloudline').attr({
- x1: x1 + 100,
- y1: y1 + 10,
- x2: x2,
- y2: y2,
- 'data-tp1': textval[0],
- 'data-tp2': textval[1],
- 'data-version': textval[2],
- 'data-node1': textval[3],
- 'data-node2': textval[4],
- 'data-network': textval[8],
- 'data-cloudnetwork': textval[7],
- 'data-url': '',
- 'data-aaiid': textval[6],
- 'data-link': textval[9],
});
- svg.html(svg.html());
- this.getCloudUrl(textval[6]);
- this.getExtAAIIdVersion(textval[6]);
- }
- //Query external cloud host url address
- getCloudUrl(aaiId) {
- this.myhttp.queryCloudUrl(aaiId)
- .subscribe((data) => {
- this.delcloudUrl = data['service-url'];
- $('.cloudline').attr({
- 'data-url': data['service-url']
+ force.on("tick", function (e) {
+
+ _g_lines.select("line").attr("x1", function (d) {
+ return d.source.x;
+ })
+ .attr("y1", function (d) {
+ return d.source.y;
+ })
+ .attr("x2", function (d) {
+ return d.target.x;
+ })
+ .attr("y2", function (d) {
+ return d.target.y;
+ });
+ _g_lines.select("image").attr("x", function (d) {
+ var x1 = d.source.x,
+ x2 = d.target.x,
+ x = x1 - (x1 - x2) / 2;
+ return x - 8;
+ })
+ .attr("y", function (d) {
+ var y1 = d.source.y,
+ y2 = d.target.y,
+ y = y1 - (y1 - y2) / 2;
+ return y - 15;
});
- }, (err) => {
- console.log(err);
- });
- }
- //Query external cloud ext-aai-id resource-version
- getExtAAIIdVersion(aaiId) {
- this.myhttp.queryExtAAIIdVersion(aaiId)
- .subscribe((data) => {
- this.delVersion = data["resource-version"];
- $('.cloudline').attr({
- 'data-version': data["resource-version"],
+ _g_lines.select("text")
+ .attr('x', function (d) {
+ var x1 = d.source.x,
+ x2 = d.target.x,
+ halfX = x1 - (x1 - x2) / 2,
+ x3 = x1 - (x1 - halfX) / 2;
+ return x3;
+ })
+ .attr('y', function (d) {
+ var y1 = d.source.y,
+ y2 = d.target.y,
+ halfY = y1 - (y1 - y2) / 2,
+ y3 = y1 - (y1 - halfY) / 2;
+ y3 = y3 - 5;
+ return y3;
+ })
+ .attr("transform", function (d) {
+ var x1 = d.source.x,
+ x2 = d.target.x,
+ y1 = d.source.y,
+ y2 = d.target.y,
+ x = x1 - (x1 - x2) / 2,
+ y = y1 - (y1 - y2) / 2,
+ rightAngleSide1 = Math.abs(y2 - y1),
+ rightAngleSide2 = Math.abs(x2 - x1),
+ _asin = 0,
+ _rotateAngle = 0,
+ x3 = x1 - (x1 - x) / 2,
+ y3 = y1 - (y1 - y) / 2;
+
+ if (x1 < x2) {
+ _asin = (y2 - y1) / Math.sqrt(Math.pow(rightAngleSide1, 2) + Math.pow(
+ rightAngleSide2, 2));
+ _rotateAngle = Math.asin(_asin) * 180 / Math.PI;
+ } else {
+ _asin = (y1 - y2) / Math.sqrt(Math.pow(rightAngleSide1, 2) + Math.pow(
+ rightAngleSide2, 2));
+ _rotateAngle = Math.asin(_asin) * 180 / Math.PI;
+ _rotateAngle = _rotateAngle < 0 ? (180 + _rotateAngle) : -(180 -
+ _rotateAngle);
+ }
+ return 'rotate(' + (_rotateAngle) + ',' + x3 + ' ' + y3 + ')';
});
- }, (err) => {
- console.log(err);
- });
- }
+ _g_lines.select("rect")
+ .attr('x', function (d) {
+ return d.source.x - 1;
+ })
+ .attr('y', function (d) {
+ return d.source.y - 1;
+ })
+ .selectAll('animate').each(function (d, i) {
+ if (i == 0) {
+ d3.select(this)
+ .attr("attributeName", function (d) {
+ return 'x';
+ })
+ .attr("from", function (d) {
+ return d.source.x - 1;
+ })
+ .attr("to", function (d) {
+ return d.target.x;
+ });
+ } else {
+ d3.select(this)
+ .attr("attributeName", function (d) {
+ return 'y';
+ })
+ .attr("from", function (d) {
+ return d.source.y - 1;
+ })
+ .attr("to", function (d) {
+ return d.target.y;
+ });
+ }
- //The right form drop-down box data is filled with three levels of linkage
- //Left Port
- network1Change(value: string): void {
- this.selectedNode1 = this.nodeOption1[value][0];
- this.getPInterfaces1();
- }
+ d3.select(this).attr("attributeType", "XML")
+ .attr("dur", function (d) {
+ return '1.5s';
+ })
+ .attr("repeatCount", "indefinite");
- node1Change(): void {
- this.getPInterfaces1();
- }
+ })
+/* let k = 6 * e.alpha;
+ nodes.forEach(function(o, i) {
+ if (o["layer"] === "Otn"){
+ o["y"] += k
+ //o["x"] += i & 2 ? k : -k;
+
+ } else if (o["layer"] === "Eth") {
+ o["y"] += -k;
+ //o["x"] += i & 2 ? k : -k;
+ }
+ });*/
- //Get the TP data under the specified node
- getPInterfaces1() {
- let params = {
- pnfName: this.selectedNode1,
- };
- this.myhttp.getPInterfacesData(params)
- .subscribe((data) => {
- this.tpOption1 = [];
- for (let i = 0; i < data.length; i++) {
- let tpName = data[i]['interface-name'];
- this.tpOption1.push(tpName);
+ _g_nodes.attr("transform", function (d) {
+ if(d.group === 'pnf') {
+ var image = d3.select(this).select("image")[0][0],
+ halfWidth = parseFloat("70") / 2,
+ halfHeight = parseFloat("70") / 2;
+
+ return 'translate(' + (d.x - halfWidth) + ',' + (d.y - halfHeight) + ')';
+ } else {
+ return 'translate(' + (d.x) + ',' + (d.y) + ')';
}
- this.selecteTpName1 = this.tpOption1[0];
- }, (err) => {
- console.log(err);
- });
- }
- //Right Port
- network2Change(value: string): void {
- this.selectedNode2 = this.nodeOption1[value][0];
- this.getPInterfaces2();
- }
+ });
- node2Change(): void {
- this.getPInterfaces2();
- }
+ _g_nodes.select("text").attr('dy', function (d) {
+ var image = this.previousSibling,
+ height = parseFloat("10"),
+ fontSize = parseFloat(this.style.fontSize);
- //Get the TP data under the specified node
- getPInterfaces2() {
- let params = {
- pnfName: this.selectedNode2,
- };
- this.myhttp.getPInterfacesData(params)
- .subscribe((data) => {
- this.tpOption2 = [];
- for (let i = 0; i < data.length; i++) {
- let tpName = data[i]['interface-name'];
- this.tpOption2.push(tpName);
- }
- this.selecteTpName2 = this.tpOption2[0];
- }, (err) => {
- console.log(err);
+ return height + 1.5 * fontSize;
});
- }
- //Submit form, connect
- submitForm(): void {
- //When the page ONAP is not selected, the local cloud TP connection
- let _thiss = this;
- if (this.inputshow == false) {
- if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) {
- alert('The service port cannot be empty. Please select the port information.');
- return;
- } else if (this.networkVal1 == this.networkVal2) {
- alert('The TP port under the same cloud service cannot be connected!');
- return;
- }
- let tp_links = [],
- tp1 = this.selecteTpName1,
- tp2 = this.selecteTpName2;
- for (let i = 0; i < $(".line-port").length; i++) {
- let data_text1 = $('.line-port').eq(i).attr('data-tp1');
- let data_text2 = $('.line-port').eq(i).attr('data-tp2');
- tp_links.push(data_text1);
- tp_links.push(data_text2);
- }
- if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) {
- alert('This port number connection already exists!');
- return;
- }
- this.createTpLinks();
+ _g_nodes.select(".error-tip").attr("transform", function (d) {
- } else {
- //When the page ONAP is selected, the external cloud is created, and the connection is made.
- if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) {
- alert('The service port cannot be empty. Please fill in the complete port information.');
- return;
- }
- let tp_links = [],
- tp1 = this.selecteTpName1;
- for (let i = 0; i < $(".line-port").length; i++) {
- let data_text1 = $('.line-port').eq(i).attr('data-tp1');
- tp_links.push(data_text1);
- }
- if (tp_links.indexOf(tp1) != -1) {
- alert('This port number connection already exists!');
- return;
- }
+ var image = this.parentNode.firstChild,
+ width = parseFloat("70");
- let time = this.cloudNetwork + new Date().getTime();//Create aaiid for the external cloud, this identifier is unique and cannot be repeated
- this.createCloudUrls(time)
- }
- }
+ return 'translate(' + 0.8 * width + ',0)';
- //Create tp connection call interface createLink
- createTpLinks() {
- let params = {
- 'link-name': this.linkName,
- 'link-type': 'cross-link',
- 'operational-status': 'up',
- 'relationship-list': {
- 'relationship': [
- {
- 'related-to': 'p-interface',
- 'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1,
- 'relationship-data': [
- {
- 'relationship-key': 'pnf.pnf-id',
- 'relationship-value': this.selectedNode1
- },
- {
- 'relationship-key': 'p-interface.p-interface-id',
- 'relationship-value': this.selecteTpName1,
- }
- ]
- },
- {
- 'related-to': 'p-interface',
- 'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2,
- 'relationship-data': [
- {
- 'relationship-key': 'pnf.pnf-id',
- 'relationship-value': this.selectedNode2
- },
- {
- 'relationship-key': 'p-interface.p-interface-id',
- 'relationship-value': this.selecteTpName2
- }
- ]
- }
- ]
- }
- };
- this.myhttp.createLink(params)
- .subscribe((data) => {
- if (data['status'] == 'SUCCESS') {
- this.queryAddLink();
- }
- }, (err) => {
- console.log(err);
- console.log('Create connection interface call failed');
});
- }
- //Query the newly added connection immediately after creating the tp cable
- queryAddLink() {
- let linkName = this.linkName,
- selecteTpName1 = this.selecteTpName1,
- selecteTpName2 = this.selecteTpName2,
- selectedNode1 = this.selectedNode1,
- selectedNode2 = this.selectedNode2;
- let params = {
- 'link-name': linkName,
- };
- this.myhttp.querySpecificLinkInfo(params)
- .subscribe((data) => {
- let version = data['resource-version'],
- operational_status = data['operational-status'],
- linkname = data['link-name'];
- let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status, linkname];
- this.hideForm();
- this.chose(textval);
- }, (err) => {
- console.log(err);
- });
- }
+ });
- //Connection between two TP coordinates
- chose(textval) {
- let lines_json = {};
- lines_json['tp1'] = textval[0];
- lines_json['tp2'] = textval[1];
- lines_json['version'] = textval[2];
- lines_json['node1'] = textval[3];
- lines_json['node2'] = textval[4];
- lines_json['status'] = textval[5];
- lines_json['linkname'] = textval[6];
- for (let i = 0; i < $(".node").length; i++) {
- if ($('.node').eq(i).find('text').html() == textval[0]) {
- $('.node').eq(i).show();
- //Get the x, y coordinates of the second level
- let translates = $('.node').eq(i).css('transform');
- lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
- lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
- }
- if ($('.node').eq(i).find('text').html() == textval[1]) {
- $('.node').eq(i).show();
- let translates = $('.node').eq(i).css('transform');
- lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]);
- lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]);
- }
- }
- this.addLine(lines_json);
- }
- //Connection between two TPs
- addLine(lines) {
- let tp1 = lines.tp1;
- let tp2 = lines.tp2;
- let version = lines.version;
- let node1 = lines.node1;
- let node2 = lines.node2;
- let status = lines.status;
- let linkname = lines.linkname;
- let x1 = lines.x1;
- let y1 = lines.y1;
- let x2 = lines.x2;
- let y2 = lines.y2;
- let color = '#14bb58';
- if (status == 'up') {
- color = '#14bb58';
- } else {
- color = 'red';
+ function dblclick(d) {
+ d3.select(this).classed("fixed", d.fixed = false);
}
- let line = '<line class=\'line line-port line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
- let svg = d3.select('#graph');
- $('#graph').prepend(line);
- $('.line').first().attr({
- x1: x1,
- y1: y1,
- x2: x2,
- y2: y2,
- 'data-tp1': tp1,
- 'data-tp2': tp2,
- 'data-version': version,
- 'data-node1': node1,
- 'data-node2': node2,
- 'data-link': linkname
- });
- svg.html(svg.html());
- }
-
- //After creating an external cloud connection, query the connection immediately
- queryOutCloudLink(time) {
- let networkVal1 = this.networkVal1,
- selectedNode1 = this.selectedNode1,
- selecteTpName1 = this.selecteTpName1,
- cloudUrl = this.cloudUrl,
- cloudNetWork = this.cloudNetwork,
- cloudNode = this.cloudNode,
- cloudTp = this.cloudTp,
- linkname = this.linkName;
- let params = {
- 'link-name': linkname,
- };
- this.myhttp.querySpecificLinkInfo(params)
- .subscribe((data) => {
- let status = data['operational-status'];
- let link_name = data['link-name'];
- this.outCloudShow = true;
- this.hideForm();
- this.outCloud(this.imgmap);
- setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time), 0);
- }, (err) => {
- console.log(err);
- });
- }
- //Add external cloud
- outCloud(imgmap) {
- let _this = this,
- width;
- if (_this.tpoption.width > 800) {
- width = _this.tpoption.width;
- } else {
- width = 800;
+ function dragstart(d) {
+ d3.select(this).classed("fixed", d.fixed = true);
+ thisNg.eventDispatcher.dispatch(new AppEvent(AppEventType.UserNodeDrag, d));
}
- let svg = d3.select('#content-svg');
- svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)');
- let out = d3.select('#out');
- out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
- out.append('text').text('Partner Network')
- .style('transform', 'translate(0，0)')
- .style('font-size', '16')
- .style('font-weight', 'bold')
- .attr('dx', '40')
- .attr('dy', '70')
- .style('fill', '#fff');
- }
+ function dragend(d) {
- //Add external cloud connection
- cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time) {
- let lines_json = {};
- let _this = this,
- width;
- if (_this.tpoption.width > 800) {
- width = _this.tpoption.width;
- } else {
- width = 800;
}
- for (let i = 0; i < $(".node").length; i++) {
- if ($('.node').eq(i).find('text').html() == networkVal1) {
- //Get the x, y coordinates of the second level
- let translates = $('.node').eq(i).css('transform');
- lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
- lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
- lines_json['x2'] = width - 100;
- lines_json['y2'] = 100;
+
+ function color (d){
+ const scale = d3.scaleOrdinal(d3.schemeCategory10);
+ switch(d.group){
+ case "pnf":
+ return scale(1);
+ case "tp":
+ return scale(2);
+ default:
+ return scale(9);
}
}
- let x1 = lines_json['x1'];
- let y1 = lines_json['y1'];
- let x2 = lines_json['x2'];
- let y2 = lines_json['y2'];
- let color = '#14bb58';
- if (status == 'up') {
- color = '#14bb58';
- } else {
- color = 'red';
- }
- let line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
- let svg = d3.select('#graph');
- $('.cloudline').remove();
- $('#graph').prepend(line);
- $('.cloudline').attr({
- x1: x1 + 100,
- y1: y1 + 10,
- x2: x2,
- y2: y2,
- 'data-tp1': selecteTpName1,
- 'data-tp2': cloudTp,
- 'data-node1': selectedNode1,
- 'data-node2': cloudNode,
- 'data-network': networkVal1,
- 'data-cloudnetwork': cloudNetWork,
- 'data-url': cloudUrl,
- 'data-aaiid': time,
- 'data-link': link_name
- });
- svg.html(svg.html());
- this.getExtAAIIdVersion(time);
}
- //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls
- createCloudNetwork(time) {
- let _thiss = this;
- let params = {
- '-xmlns': 'http://org.onap.aai.inventory/v14',
- 'in-maint': 'false',
- "network-id": this.cloudNetwork,
- "provider-id": "",
- "client-id": "",
- "te-topo-id": "",
- "relationship-list": {
- "relationship": [{
- "related-to": "ext-aai-network",
- 'related-link': '/aai/v14/network/ext-aai-networks/ext-aai-network/' + time
- }]
- }
- };
+ choseConnectivity(item) {
+ if (this.connectivitySelected !== item) this.connectivitySelected = item;
+ this.drawService(this.getSvcTree());
+ }
- //Do some asynchronous operations
- _thiss.myhttp.createNetwrok(params)
- .subscribe((data) => {
- if (data["status"] == "SUCCESS") {
- _thiss.createPnfs(time)
- }
- }, (err) => {
- console.log(err);
- });
+ getSvcTree(): Array<object> {
+ let tree = []
+ let rel = this.connectivitySelected["relationship-list"]["relationship"] || null;
+ if (rel){
+ tree = rel.filter(rl => rl["related-to"] === "uni")
+ .map(obj => {
+ let rObj ={};
+ rObj["id"] = obj["relationship-data"][0]["relationship-value"],
+ rObj["type"] = "leaf";
+ return rObj;
+ })
+ }
+ return tree;
+ }
+ getNodes(ptMapping: Array<object>) : Array<object>{
+ let nodes = [];
+ for (let pnf of ptMapping){
+ if (pnf["layer"] === 2){
+ continue;
+ }
+ let name = pnf["pnfName"];
+ let newNode = {
+ "id" : name,
+ "group": "pnf",
+ "radius" : 2,
+ "layer" : pnf["layer"] === 2? "Eth" : "Otn"
+ }
+ nodes.push(newNode);
+ }
+ return nodes;
}
- createPnfs(time) {
- let _thiss = this;
- let params = {
- "-xmlns": "http://org.onap.aai.inventory/v14",
- "pnf-name": this.cloudNode,
- "pnf-id": this.cloudNode,
- "in-maint": "true",
- "relationship-list": {
- "relationship": [
- {
- "related-to": "ext-aai-network",
- "relationship-label": "org.onap.relationships.inventory.BelongsTo",
- "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time,
- "relationship-data": {
- "relationship-key": "ext-aai-network.aai-id",
- "relationship-value": time
+ getLinks(logicalLinks: Array<object>, ptMapping: Array<object>) : Array<object> {
+ let links = [];
+ for (let ll of logicalLinks){
+ let lkName:string = ll["link-name"];
+ let topoIdIdx:number = lkName.lastIndexOf("topologyId-");
+ if (topoIdIdx !== -1 && lkName.charAt(topoIdIdx + 11) === '2'){
+ //Ignore
+ continue;
+ } else if (typeof ll["relationship-list"] === 'undefined' ||
+ typeof ll["relationship-list"]["relationship"] === 'undefined'){
+ continue;
+ }
+ //pnf to pnf
+ let endpoints = [];
+ for (let pi of ll["relationship-list"]["relationship"]) {
+ if (pi["related-to"] === "p-interface"){
+ for (let rd of pi["relationship-data"]){
+ if (rd["relationship-key"] === "pnf.pnf-name"){
+ endpoints.push(rd["relationship-value"]);
}
- },
- {
- "related-to": "network-resource",
- "relationship-label": "tosca.relationships.network.LinksTo",
- "related-link": "/aai/v14/network/network-resources/network-resource/" + this.cloudNetwork
}
- ]
- }
- };
-
- //Do some asynchronous operations
- _thiss.myhttp.createPnf(params)
- .subscribe((data) => {
- if (data["status"] == "SUCCESS") {
- _thiss.createCloudTp(time)
}
- }, (err) => {
- console.log(err);
- });
- }
-
- createCloudTp(time) {
- let _thiss = this;
- let params = {
- "-xmlns": "http://org.onap.aai.inventory/v14",
- "interface-name": this.cloudTp,
- "speed-value": "1000000",
- "in-maint": "true",
- "network-ref": "",
- "transparent": "true",
- "operational-status": "up"
- };
-
- let cloudNodeName = this.cloudNode;
- //Do some asynchronous operations
- _thiss.myhttp.createTp(params, cloudNodeName)
- .subscribe((data) => {
- if (data["status"] == "SUCCESS") {
- _thiss.createCloudLinks(time)
+ }
+ if (endpoints.length === 2){
+ let newlk = {
+ "source": endpoints[0],
+ "target": endpoints[1],
+ "type" : 1
}
- }, (err) => {
- console.log(err);
- });
+ links.push(newlk);
+ }
+ }
+ return links;
}
- createCloudLinks(time) {
- let _thiss = this;
- let params = {
- "-xmlns": "http://org.onap.aai.inventory/v14",
- "link-name": this.linkName,
- "in-maint": "false",
- "link-type": "cross-link",
- "speed-value": "",
- "operational-status": "up",
- "relationship-list": {
- "relationship": [
- {
- "related-to": "p-interface",
- "relationship-label": "tosca.relationships.network.LinksTo",
- "related-link": "/aai/v14/network/pnfs/pnf/" + this.selectedNode1 + "/p-interfaces/p-interface/" + this.selecteTpName1,
- "relationship-data": [
- {
- "relationship-key": "pnf.pnf-name",
- "relationship-value": this.selectedNode1
- },
- {
- "relationship-key": "p-interface.interface-name",
- "relationship-value": this.selecteTpName1
- }
- ],
- "related-to-property": [{
- "property-key": "p-interface.prov-status"
- }]
- },
- {
- "related-to": "p-interface",
- "relationship-label": "tosca.relationships.network.LinksTo",
- "related-link": "/aai/v14/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/" + this.cloudTp,
- "relationship-data": [
- {
- "relationship-key": "pnf.pnf-name",
- "relationship-value": this.cloudNode
- },
- {
- "relationship-key": "p-interface.interface-name",
- "relationship-value": this.cloudTp
- }
- ],
- "related-to-property": [{
- "property-key": "p-interface.prov-status"
- }]
- },
- {
- "related-to": "ext-aai-network",
- "relationship-label": "org.onap.relationships.inventory.BelongsTo",
- "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time,
- "relationship-data": [
- {
- "relationship-key": "ext-aai-network.aai-id",
- "relationship-value": time
- }
- ]
+ getPnfTpMapping(logicalLinks: Array<object>) {
+ let pnfs = [];
+ let pnfVisited = {};
+ let pnfIndex: number = 0;
+ for (let ll of logicalLinks){
+ let lkName:string = ll["link-name"];
+ let topoIdIdx:number = lkName.lastIndexOf("topologyId-");
+ if (topoIdIdx !== -1 && lkName.charAt(topoIdIdx + 11) === '2'){
+ //Ethernet layer logical-link
+ let lastDashIdx:number = lkName.lastIndexOf("-");
+ let pnfName: string = lkName.replace("linkId", "nodeId").substr(0, lastDashIdx);
+ let uniName: string = lkName.substr( lastDashIdx+1);
+
+ if (pnfVisited[pnfName]){
+ let idx: number = parseInt(pnfVisited[pnfName].substr(1));
+ pnfs[idx].tps[uniName] = true;
+ } else {
+ pnfVisited[pnfName] = '#' + pnfIndex;
+ let newPnf = {
+ "pnfName" : pnfName,
+ "tps" : {
+ },
+ "layer" :2
}
- ]
- }
- };
+ newPnf.tps[uniName] = true;
+ pnfs.push(newPnf);
+ pnfIndex++;
- //Do some asynchronous operations
- _thiss.myhttp.createCloudLink(params)
- .subscribe((data) => {
- // resolve(data['status']);
- if (data["status"] == "SUCCESS") {
- _thiss.queryOutCloudLink(time);
}
- }, (err) => {
- console.log(err);
- });
- }
-
- createCloudUrls(time) {
- let _thiss = this;
- let params = {
- '-xmlns': 'http://org.onap.aai.inventory/v14',
- 'aai-id': time,
- 'esr-system-info': {
- 'esr-system-info-id': 'example-esr-system-info-id-val-0',
- 'service-url': this.cloudUrl,
- 'user-name': 'demo',
- 'password': 'demo123456!',
- 'system-type': 'ONAP'
+ continue;
+ } else if (ll["relationship-list"] === undefined ||
+ ll["relationship-list"]["relationship"].length === 0 ){
+ continue;
}
- };
- _thiss.myhttp.createCloudUrl(params)
- .subscribe((data) => {
- if (data['status'] == 'SUCCESS') {
- _thiss.createCloudNetwork(time);
- }
- }, (err) => {
- console.log(err);
- });
- }
+ for (let pi of ll["relationship-list"]["relationship"]) {
+ if (pi["related-to"] === "p-interface"){
+ let pnfName:string;
+ let tpName:string;
+ for (let rd of pi["relationship-data"]){
+ if (rd["relationship-key"] === "pnf.pnf-name"){
+ pnfName = rd["relationship-value"];
+ } else if (rd["relationship-key"] === "p-interface.interface-name"){
+ tpName = rd["relationship-value"];
+ }
+ }
+ if (pnfVisited[pnfName]){
+ let idx: number = parseInt(pnfVisited[pnfName].substr(1));
+ pnfs[idx].tps[tpName] = true;
+ } else {
+ pnfVisited[pnfName] = '#' + pnfIndex;
+ let newPnf = {
+ "pnfName" : pnfName,
+ "tps" : {
+ },
+ "layer" : 1
+ }
+ newPnf.tps[tpName] = true;
+ pnfs.push(newPnf);
+ pnfIndex++;
- //Local cloud TP port Delete connection Call interface deleteLink
- delLink(): void {
- let deltp1 = this.delTp1,
- deltp2 = this.delTp2,
- version = this.delVersion,
- dellinkname = this.delLinkname,
- delLinkIndex = this.delLinkIndex;
- let params = {
- 'logical-link': dellinkname,
- 'resource-version': version,
- };
- this.myhttp.deleteLink(params)
- .subscribe((data) => {
- if (data['status'] == 'SUCCESS') {
- this.delLine(deltp1, deltp2);
- delLinkIndex.remove();
+ }
}
- }, (err) => {
- console.log(err);
- console.log('Deleting a connection interface call failed');
- });
- }
-
- delLine(val1, val2) {
- this.delBoxisVisible = false;
- for (let i = 0; i < $(".node").length; i++) {
- if ($('.node').eq(i).find('text').html() == val1) {
- $('.node').eq(i).hide();
- }
- if ($('.node').eq(i).find('text').html() == val2) {
- $('.node').eq(i).hide();
}
}
+ return pnfs;
}
-
-
- //External cloud Delete connection Call interface deleteCloudLink
- delCloudLink(): void {
- let deltp1 = this.delTp1,
- deltp2 = this.delTp2,
- version = this.delVersion,
- aaiId = this.aaiId;
- let params = {
- "aaiId": aaiId,
- "version": version,
- };
- this.myhttp.deleteCloudLink(params)
- .subscribe((data) => {
- if (data['status'] == 'SUCCESS') {
- this.delLine(deltp1, deltp2);
- $('.cloudline').remove();
- $('#out').remove();
- }
- }, (err) => {
- console.log(err);
- console.log('Deleting a connection interface call failed');
- });
- }
-
}