summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views
diff options
context:
space:
mode:
authordecheng zhang <decheng.zhang@huawei.com>2022-05-01 21:53:40 -0400
committerdecheng zhang <decheng.zhang@huawei.com>2022-05-05 19:04:15 -0400
commitcfa4676dc8f327449d2c7625b57b8bba628b6a08 (patch)
treebedd9ba53b8405d143cf0aa8ae65883d3bf92f1d /usecaseui-portal/src/app/views
parentf45c8fb196da87f30142424f1aeab6282496bfbc (diff)
fix: display CCVPN service information and RRO.
Issue-ID: REQ-1103 Signed-off-by: decheng zhang <decheng.zhang@huawei.com> Change-Id: Ib535004e6d0cfa668d5f532980f93057cc23ff3e Signed-off-by: decheng zhang <decheng.zhang@huawei.com>
Diffstat (limited to 'usecaseui-portal/src/app/views')
-rw-r--r--usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html6
-rw-r--r--usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts108
2 files changed, 101 insertions, 13 deletions
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 c9e150fa..edf36343 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
@@ -41,11 +41,11 @@
{{"i18nTextDefine_CCVPNService" | translate}} :
</span>
<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
- <button nz-button nz-dropdown><span>{{serviceSelected}}</span> <i class="anticon anticon-down"></i>
+ <button nz-button nz-dropdown><span>{{serviceSelected && servicesMap.get(serviceSelected).name}}</span> <i class="anticon anticon-down"></i>
</button>
<ul nz-menu>
<li nz-menu-item (click)="chooseService(svcInstId)" *ngFor="let svcInstId of getKeys(servicesMap)">
- <a title="{{svcInstId}}">{{svcInstId}}</a>
+ <a title="{{servicesMap.get(svcInstId).name}}">{{servicesMap.get(svcInstId).name}}</a>
</li>
</ul>
</nz-dropdown>
@@ -87,6 +87,7 @@
>
<thead>
<tr>
+ <th>Ethernet Svc Name</th>
<th>Service Instance Id</th>
<th>Service Type</th>
<th>VLAN</th>
@@ -97,6 +98,7 @@
<tbody>
<ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
<tr>
+ <td>{{ data.name }}</td>
<td>{{ data.id }}</td>
<td>Cloud Lease Line</td>
<td>{{ data.vlan }}</td>
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 6acdfa66..40b986bd 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
@@ -25,7 +25,7 @@ const NODE_COLOR = 'DeepSkyBlue'
const CE_COLOR = 'Gray'
const FONT_COLOR = 'Navy'
const TITLE_COLOR = '#0da9e2' //'linear-gradient(90deg, #07a9e1 0%, #30d9c4 100%)'
-
+const DEFAULT_COLOR= '#0000FF'
// Customizable colors for endpoint CRUD status
const EP_COLOR_MAP = new Map([
['create', 'RoyalBlue'],
@@ -194,7 +194,7 @@ export class CcvpnNetworkComponent implements OnInit {
// Gets label from custom user object
// TODO:
this.graph.convertValueToString = function (cell) {
- if (cell.isEdge() && !cell.value.uni && !this.isMoreLabels) return ''
+ if (cell.isEdge() && !cell.value.uni && !thisNg.isMoreLabels) return '';
return (cell.value && cell.value.label) ? cell.value.label : '';
}
@@ -315,6 +315,23 @@ export class CcvpnNetworkComponent implements OnInit {
})
reqCount++;
+ this.myhttp.getVpnBindingsData()
+ .subscribe((data) => {
+ if (data) {
+ for (let ll of data["vpn-binding"]) {
+ thisNg.vpnBindings.push(ll);
+ }
+ }
+ if (--reqCount == 0) {
+ thisNg.finishNetworkView();
+ this.isSpinning = false;
+ }
+ },
+ (err) => {
+ console.log(err);
+ })
+
+ reqCount++;
this.myhttp.getConnectivities()
.subscribe((data) => {
if (data) {
@@ -373,6 +390,7 @@ export class CcvpnNetworkComponent implements OnInit {
pnfs = [];
logicalLinks = [];//logicalLinks Existing connection data returned by the interface
connectivities = [];
+ vpnBindings = [];
networkroutes = [];
layer1Tps = [];
@@ -469,17 +487,22 @@ export class CcvpnNetworkComponent implements OnInit {
// Update serive data
for (let cn of this.connectivities){
if (cn['vpn-type'] === "mdsc"){
- let svcInstId = this.getValueFromRelationList(cn, "service-instance", "service-instance.service-instance-id");
+ let svcInstId = this.getValueFromRelationList(cn, "service-instance", "service-instance.service-instance-id")
+ .pop();
+ let svcInstName = cn["etht-svc-name"];
+ let uniList = this.getValueFromRelationList(cn, "uni", "uni.id");
let bw = cn["bandwidth-profile-name"];
let cvlan = cn["cvlan"];
let svc = this.servicesMap.get(svcInstId);
if (!svc){
svc = {
- name: svcInstId,
+ name: svcInstName,
id: svcInstId,
connections: [],
bw : bw,
- vlan : cvlan
+ vlan : cvlan,
+ unis : uniList,
+ otnEdges: []
}
this.servicesMap.set(svcInstId, svc);
}
@@ -552,7 +575,8 @@ export class CcvpnNetworkComponent implements OnInit {
// tunnel connection link
let srcEpId = this.getJsonValue(ll, "link-name");
let dstEpId = this.getJsonValue(ll, "link-name2");
- let svcInstId = this.getValueFromRelationList(ll, "allotted-resource", "service-instance.service-instance-id");
+ let svcInstId = this.getValueFromRelationList(ll, "allotted-resource", "service-instance.service-instance-id")
+ .pop();
let conn = {
srcEpId: srcEpId,
dstEpId: dstEpId,
@@ -626,6 +650,38 @@ export class CcvpnNetworkComponent implements OnInit {
}
}
}
+ // Hack: deson't work for more then 2 domain system
+ for (let ll of thisNg.vpnBindings) {
+ let svcInstId = ll["slice-id"];
+ let svc = this.servicesMap.get(svcInstId);
+ let srcNodeId = ll["src-access-node-id"];
+ let dstNodeId = ll["dst-access-node-id"];
+ let domainId = srcNodeId.split(".")[1];
+ let domain = thisNg.domainMap.get(domainId);
+ if (!svc || !domain){
+ continue;
+ }
+ for (let [, inni] of domain.inniMap){
+ if (srcNodeId === inni.srcNode.id){
+ if (dstNodeId === inni.dstNode.id){
+ svc.otnEdges.push(inni);
+ }
+ }
+ if (dstNodeId === inni.srcNode.id){
+ if (srcNodeId === inni.dstNode.id){
+ svc.otnEdges.push(inni);
+ }
+ }
+ }
+ // For enni link
+ if (!ll["src-access-ltp-id"]){
+ for (let [key, enni] of this.enniMap) {
+ if (dstNodeId === key.split("-")[0]){
+ svc.otnEdges.push(enni);
+ };
+ }
+ }
+ }
}
// main function that draws the topology view
@@ -659,7 +715,8 @@ export class CcvpnNetworkComponent implements OnInit {
inni.edge.value = {
linkId: key,
inni: inni,
- domain: domain
+ domain: domain,
+ label: ""
}
//inni.srcNniTp.edge = inni.edge
//inni.dstNniTp.edge = inni.edge
@@ -777,7 +834,7 @@ export class CcvpnNetworkComponent implements OnInit {
this.graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, CE_COLOR, [uni.dstNode.vertex])
this.graph.setCellStyles(mxConstants.STYLE_DASHED, '1', [uni.edge])
uni.edge.value.label = ''
- uni.edge.value.endPoint = null
+ uni.edge.value.endpoints = null
}
}
@@ -796,7 +853,6 @@ export class CcvpnNetworkComponent implements OnInit {
arr = dstUniLinkId.split('.');
uni = this.domainMap.get(arr[1]).uniMap.get(dstUniLinkId);
colorUni(uni, this.graph, bw);
-
}
}
@@ -804,6 +860,25 @@ export class CcvpnNetworkComponent implements OnInit {
for (let e2eTunnel of this.e2eTunnels) {
e2eTunnel.e2eEdge.setVisible(e2eTunnel.serviceId === svcInstId)
}
+
+ // clear the label of all inni links
+ for (let [, svc] of this.servicesMap) {
+ for (let ed of service.otnEdges){
+ this.graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, DEFAULT_COLOR, [ed.edge])
+ ed.edge.value.label = '';
+ ed.edge.value.endpoints = null
+ }
+ }
+ // Update the label of inni links of current service
+ console.log(service);
+ if (service){
+ let bw = service.bw;
+ for (let con of service.connections){
+ for (let ed of service.otnEdges){
+ colorOtnEdge(ed, this.graph, bw);
+ }
+ }
+ }
this.graph.refresh();
// Utility func
@@ -827,11 +902,22 @@ export class CcvpnNetworkComponent implements OnInit {
let sum = uni.edge.value.endpoints.reduce((a, b) => a + b, 0);
uni.edge.value.label = sum + 'G' ;
}
+ function colorOtnEdge(ed, graph, bw){
+ let bandwidth = parseInt(bw);
+ graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, EP_COLOR_MAP.get("update"), [ed.edge]);
+ if (!ed.edge.value.endpoints) {
+ ed.edge.value.endpoints = [];
+ }
+ ed.edge.value.endpoints.push(bandwidth);
+ let sum = ed.edge.value.endpoints.reduce((a, b) => a + b, 0);
+ ed.edge.value.label = sum + 'G';
+ }
}
getValueFromRelationList(rl, relatedTo, relatedKey){
let rlArr: Array<any> = this.getJsonValue(rl, 'relationship-list.relationship');
+ let valList : Array<any> = [];
for (let rl of rlArr){
if (rl['related-to'] === relatedTo){
let pnfNameS: String;
@@ -839,12 +925,12 @@ export class CcvpnNetworkComponent implements OnInit {
for (let rld of rl['relationship-data']){
if (rld['relationship-key'] === relatedKey){
let val = rld['relationship-value'];
- if (val) return val;
+ if (val) valList.push(val);
}
}
}
}
- return null;
+ return valList;
}
// get the key of an Endpoint
getEndPointKey(endPoint) {