summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src')
-rw-r--r--usecaseui-portal/src/app/core/services/networkHttpservice.service.ts7
-rw-r--r--usecaseui-portal/src/app/mock/json/uui-sotn_getUniInfo.json142
-rw-r--r--usecaseui-portal/src/app/mock/json/uui-sotn_getUuis.json25
-rw-r--r--usecaseui-portal/src/app/mock/json/uui-sotn_getVpnBindingInfo.json109
-rw-r--r--usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html25
-rw-r--r--usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts498
6 files changed, 573 insertions, 233 deletions
diff --git a/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts b/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts
index 77dbaffa..d558d489 100644
--- a/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts
+++ b/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts
@@ -43,7 +43,8 @@ export class networkHttpservice {
"deleteLink": this.baseUrl+"/uui-sotn/deleteLink/",
"getConnectivities": this.baseUrl+"/uui-sotn/getConnectivityInfo",
"getNetworkRoutes": this.baseUrl + "/uui-sotn/getNetworkRouteInfo",
- "getVpnBindings": this.baseUrl + "/uui-sotn/getVpnBindingInfo"
+ "getVpnBindings": this.baseUrl + "/uui-sotn/getVpnBindingInfo",
+ "getUnis": this.baseUrl + "/uui-sotn/getUniInfo"
};
//The following APIs function are optimizable------------------------
@@ -96,6 +97,10 @@ export class networkHttpservice {
return this.http.get<any>(this.url["getVpnBindings"]);
}
+ getUnisData(){
+ return this.http.get<any>(this.url["getUnis"]);
+ }
+
//Create an external cloud newwork interface
createNetwrok(paramsObj) {
return this.http.put<any>(this.url["createNetwrok"] + paramsObj["network-id"], paramsObj);
diff --git a/usecaseui-portal/src/app/mock/json/uui-sotn_getUniInfo.json b/usecaseui-portal/src/app/mock/json/uui-sotn_getUniInfo.json
new file mode 100644
index 00000000..ba97ac26
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/uui-sotn_getUniInfo.json
@@ -0,0 +1,142 @@
+{
+ "uni": [
+ {
+ "id": "networkId-providerId-20-clientId-0-topologyId-2-nodeId-10.2.1.2-ltpId-512-47",
+ "tp-id": "512",
+ "cvlan": "47",
+ "data-owner": "cll-101",
+ "data-source": "6",
+ "resource-version": "1652193719443",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "connectivity",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v24/network/connectivities/connectivity/d9897f66-6912-420a-9ee6-8bfb25b7c799",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "d9897f66-6912-420a-9ee6-8bfb25b7c799"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "cll-link-2"
+ }
+ ]
+ },
+ {
+ "related-to": "connectivity",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v24/network/connectivities/connectivity/400ef32d-2a6b-427b-afdd-68418ffa4981",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "400ef32d-2a6b-427b-afdd-68418ffa4981"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "cll-link-2"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "id": "networkId-providerId-10-clientId-0-topologyId-2-nodeId-10.1.1.1-ltpId-1000001-47",
+ "tp-id": "1000001",
+ "cvlan": "47",
+ "data-owner": "cll-101",
+ "data-source": "3",
+ "resource-version": "1652193712992",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "connectivity",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v24/network/connectivities/connectivity/d9897f66-6912-420a-9ee6-8bfb25b7c799",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "d9897f66-6912-420a-9ee6-8bfb25b7c799"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "cll-link-2"
+ }
+ ]
+ },
+ {
+ "related-to": "connectivity",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v24/network/connectivities/connectivity/ba80397f-d2d5-4db7-82c7-d09903e3d7ac",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "ba80397f-d2d5-4db7-82c7-d09903e3d7ac"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "cll-link-2"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "id": "networkId-providerId-10-clientId-0-topologyId-2-nodeId-10.1.1.1-ltpId-2000001-89",
+ "tp-id": "2000001",
+ "cvlan": "89",
+ "data-owner": "cll-101",
+ "data-source": "3",
+ "resource-version": "1652193720784",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "connectivity",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v24/network/connectivities/connectivity/d9897f66-6912-420a-9ee6-8bfb25b7c799",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "d9897f66-6912-420a-9ee6-8bfb25b7c799"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "cll-link-2"
+ }
+ ]
+ },
+ {
+ "related-to": "connectivity",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v24/network/connectivities/connectivity/ca45be29-ba1c-4da5-b2b2-b3043057324a",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "ca45be29-ba1c-4da5-b2b2-b3043057324a"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "cll-link-2"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/json/uui-sotn_getUuis.json b/usecaseui-portal/src/app/mock/json/uui-sotn_getUuis.json
deleted file mode 100644
index 2339b3da..00000000
--- a/usecaseui-portal/src/app/mock/json/uui-sotn_getUuis.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "uni": [
- {
- "id": "networkId-providerId-20-clientId-0-topologyId-2-nodeId-10.2.1.2-ltpId-512-47",
- "tp-id": "512",
- "cvlan": "47",
- "data-source": "6",
- "resource-version": "1642347905015"
- },
- {
- "id": "networkId-providerId-10-clientId-0-topologyId-2-nodeId-10.1.1.1-ltpId-1000001-47",
- "tp-id": "1000001",
- "cvlan": "47",
- "data-source": "3",
- "resource-version": "1642347907104"
- },
- {
- "id": "networkId-providerId-10-clientId-0-topologyId-2-nodeId-10.1.1.1-ltpId-2000001-47",
- "tp-id": "2000001",
- "cvlan": "47",
- "data-source": "3",
- "resource-version": "1642347898407"
- }
- ]
-} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/json/uui-sotn_getVpnBindingInfo.json b/usecaseui-portal/src/app/mock/json/uui-sotn_getVpnBindingInfo.json
index 0071a089..c6f47be7 100644
--- a/usecaseui-portal/src/app/mock/json/uui-sotn_getVpnBindingInfo.json
+++ b/usecaseui-portal/src/app/mock/json/uui-sotn_getVpnBindingInfo.json
@@ -1,12 +1,12 @@
{
"vpn-binding": [
{
- "vpn-id": "c93dcdc9-fe9f-412c-bcf3-7d9a4151912e",
- "vpn-name": "2c993a22-722f-4a5d-87e1-5b373362bc2c",
+ "vpn-id": "977dc0aa-f210-424b-9843-cc7e5cd47458",
+ "vpn-name": "9c627989-9605-4bf5-b050-14333dcd36c4",
"vpn-platform": "rocks",
"vpn-region": "http://192.168.198.6:28181",
- "customer-vpn-id": "20",
- "route-distinguisher": "14",
+ "customer-vpn-id": "1",
+ "route-distinguisher": "3",
"access-provider-id": "20",
"access-client-id": "0",
"access-topology-id": "1",
@@ -16,7 +16,7 @@
"dst-access-ltp-id": "",
"operational-status": "Activated",
"slice-id": "cll-101",
- "resource-version": "1651090153178",
+ "resource-version": "1652193726436",
"vpn-description": "onos",
"ops-note": "networkId-providerId-10-clientId-0-topologyId-1-nodeId-10.1.1.1",
"relationship-list": {
@@ -24,11 +24,11 @@
{
"related-to": "connectivity",
"relationship-label": "tosca.relationships.network.BindsTo",
- "related-link": "/aai/v24/network/connectivities/connectivity/28ef47d8-3d98-46bb-96c4-a51588d3700b",
+ "related-link": "/aai/v24/network/connectivities/connectivity/400ef32d-2a6b-427b-afdd-68418ffa4981",
"relationship-data": [
{
"relationship-key": "connectivity.connectivity-id",
- "relationship-value": "28ef47d8-3d98-46bb-96c4-a51588d3700b"
+ "relationship-value": "400ef32d-2a6b-427b-afdd-68418ffa4981"
}
],
"related-to-property": [
@@ -42,12 +42,12 @@
}
},
{
- "vpn-id": "f825613f-6c9b-425d-9033-96bdb9e7ac88",
- "vpn-name": "2c993a22-722f-4a5d-87e1-5b373362bc2c",
+ "vpn-id": "59324805-5e15-4d33-9d4f-f17db2ea7808",
+ "vpn-name": "9c627989-9605-4bf5-b050-14333dcd36c4",
"vpn-platform": "rocks",
"vpn-region": "http://192.168.198.6:18181",
- "customer-vpn-id": "20",
- "route-distinguisher": "14",
+ "customer-vpn-id": "1",
+ "route-distinguisher": "3",
"access-provider-id": "10",
"access-client-id": "0",
"access-topology-id": "1",
@@ -57,7 +57,7 @@
"dst-access-ltp-id": "OA==",
"operational-status": "Activated",
"slice-id": "cll-101",
- "resource-version": "1651090153697",
+ "resource-version": "1652193726951",
"vpn-description": "onos",
"ops-note": "networkId-providerId-10-clientId-0-topologyId-1-nodeId-10.1.1.1",
"relationship-list": {
@@ -65,11 +65,11 @@
{
"related-to": "connectivity",
"relationship-label": "tosca.relationships.network.BindsTo",
- "related-link": "/aai/v24/network/connectivities/connectivity/88531ca5-154c-4731-9adb-7ccc18935c34",
+ "related-link": "/aai/v24/network/connectivities/connectivity/ba80397f-d2d5-4db7-82c7-d09903e3d7ac",
"relationship-data": [
{
"relationship-key": "connectivity.connectivity-id",
- "relationship-value": "88531ca5-154c-4731-9adb-7ccc18935c34"
+ "relationship-value": "ba80397f-d2d5-4db7-82c7-d09903e3d7ac"
}
],
"related-to-property": [
@@ -81,6 +81,87 @@
}
]
}
+ },
+ {
+ "vpn-id": "1eba3e7a-82c8-45f7-921b-34d3b5334ee5",
+ "vpn-name": "03c3917f-5849-4048-9a77-db20a592799a",
+ "vpn-platform": "rocks",
+ "vpn-region": "http://192.168.198.6:18181",
+ "customer-vpn-id": "4",
+ "route-distinguisher": "3",
+ "access-provider-id": "10",
+ "access-client-id": "0",
+ "access-topology-id": "1",
+ "src-access-node-id": "10.1.1.1",
+ "src-access-ltp-id": "",
+ "dst-access-node-id": "10.1.1.3",
+ "dst-access-ltp-id": "OA==",
+ "operational-status": "Activated",
+ "slice-id": "cll-101",
+ "resource-version": "1652193727458",
+ "vpn-description": "onos",
+ "ops-note": "networkId-providerId-10-clientId-0-topologyId-1-nodeId-10.1.1.1",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "connectivity",
+ "relationship-label": "tosca.relationships.network.BindsTo",
+ "related-link": "/aai/v24/network/connectivities/connectivity/ca45be29-ba1c-4da5-b2b2-b3043057324a",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "ca45be29-ba1c-4da5-b2b2-b3043057324a"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "cll-link-2"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "vpn-id": "ff3513c6-2582-4715-8aba-e9638e8de940",
+ "vpn-name": "03c3917f-5849-4048-9a77-db20a592799a",
+ "vpn-platform": "rocks",
+ "vpn-region": "http://192.168.198.6:28181",
+ "customer-vpn-id": "4",
+ "route-distinguisher": "3",
+ "access-provider-id": "20",
+ "access-client-id": "0",
+ "access-topology-id": "1",
+ "src-access-node-id": "10.2.1.3",
+ "src-access-ltp-id": "MTI=",
+ "dst-access-node-id": "10.2.1.2",
+ "dst-access-ltp-id": "",
+ "operational-status": "Activated",
+ "slice-id": "cll-101",
+ "resource-version": "1652193728020",
+ "vpn-description": "onos",
+ "ops-note": "networkId-providerId-10-clientId-0-topologyId-1-nodeId-10.1.1.1",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "connectivity",
+ "relationship-label": "tosca.relationships.network.BindsTo",
+ "related-link": "/aai/v24/network/connectivities/connectivity/e9572e3b-1a4f-4897-bacf-a7747f33f161",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "e9572e3b-1a4f-4897-bacf-a7747f33f161"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name"
+ }
+ ]
+ }
+ ]
+ }
}
]
} \ No newline at end of file
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 edf36343..b3527987 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
@@ -18,6 +18,9 @@
<div class="model">
<!--chart-->
<div class="action ant-tabs-bar">
+ <button class="create" nz-button [nzType]="'primary'" (click)="updateNetworkView()">
+ <span> Update </span>
+ </button>
<span>
<i class="icon">
<img src="assets/images/service-type.png"alt="">
@@ -41,7 +44,7 @@
{{"i18nTextDefine_CCVPNService" | translate}} :
</span>
<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
- <button nz-button nz-dropdown><span>{{serviceSelected && servicesMap.get(serviceSelected).name}}</span> <i class="anticon anticon-down"></i>
+ <button nz-button nz-dropdown><span>{{serviceSelected && servicesMap.get(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)">
@@ -80,18 +83,20 @@
<div class="slicing-resource-table-list">
<nz-table
#basicTable
- [nzData]="getValues(servicesMap)"
+ [nzData]="getTunnels()"
[nzFrontPagination]="false"
nzShowSizeChanger
[nzPageSizeOptions]="[6,8,10]"
>
<thead>
<tr>
- <th>Ethernet Svc Name</th>
- <th>Service Instance Id</th>
- <th>Service Type</th>
- <th>VLAN</th>
- <th>Bandwidth</th>
+ <th>Cloud-Id</th>
+ <th>Tunnel-Id</th>
+ <th>Odu-Type</th>
+ <th>Odu0</th>
+ <th>Protection</th>
+ <th>Src-Node</th>
+ <th>Dst-Node</th>
<th>Status</th>
</tr>
</thead>
@@ -100,9 +105,11 @@
<tr>
<td>{{ data.name }}</td>
<td>{{ data.id }}</td>
- <td>Cloud Lease Line</td>
- <td>{{ data.vlan }}</td>
+ <td>ODUflex</td>
<td>{{ data.bw }}</td>
+ <td>Unprotected</td>
+ <td>{{ data.srcId }}</td>
+ <td>{{ data.dstId }}</td>
<td>
Activated
</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 40b986bd..57357d57 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'
+const DEFAULT_COLOR= '#000000'
// Customizable colors for endpoint CRUD status
const EP_COLOR_MAP = new Map([
['create', 'RoyalBlue'],
@@ -34,10 +34,6 @@ const EP_COLOR_MAP = new Map([
['delete', 'red'],
])
-enum NodePosition {
- L2_NODE_POS = 'l2_node_pos',
-}
-
declare var mxGraph: any;
declare var mxCell: any;
declare var mxHierarchicalLayout: any;
@@ -54,6 +50,7 @@ declare var mxParallelEdgeLayout: any;
declare var mxPerimeter: any;
declare var mxEdgeStyle: any;
declare var mxAbstractCanvas2D: any;
+declare var mxRectangle: any;
@Component({
selector: 'app-ccvpn-network',
@@ -78,7 +75,7 @@ export class CcvpnNetworkComponent implements OnInit {
sliceMap = new Map()
tunnelsMap = new Map()
e2eTunnels = []
- e2eTunnelMap = new Map()
+
servicesMap = new Map()
e2eServices = []
e2eServiceMap = new Map()
@@ -216,74 +213,78 @@ export class CcvpnNetworkComponent implements OnInit {
if (popupMenu.length) document.body.removeChild(popupMenu[0])
}
- var dragStatus = 0
+// var dragStatus = 0
// Listen to the Mouseup event to update table and json data view
- this.graph.addMouseListener({
- mouseDown: function (sender, evt) {
- dragStatus = 1
- },
- mouseMove: function (sender, evt) {
- if (dragStatus == 1) dragStatus = 2
- },
- mouseUp: function (sender, evt) {
- if (dragStatus == 2) {
- if (sender.getSelectionCount() >= 1) {
- this.clientNodeLabelLayout()
- }
- }
- dragStatus = 0
-
- this.deselectTableRow()
- let cell = null
- if (!evt.evt.defaultPrevented) {
- if (!evt.state) return
- else cell = evt.state.cell
- } else {
- if (sender.getSelectionCount() == 1) {
- cell = sender.getSelectionCell()
- } else if (sender.getSelectionCount() == 3) {
- for (let item of sender.getSelectionCells()) {
- if (item.isEdge()) {
- if (!cell) cell = item
- else {
- cell = null;
- break
- }
- }
- }
- }
- }
- if (!cell || !cell.value) {
- return
- }
- let obj = null
- if (obj = cell.value.controller) {
- this.showJsonData([obj], false)
- } else if (obj = cell.value.node) {
- this.showJsonData(obj.uniSliceMap.get(this.currentSlice), false)
- } else if (obj = cell.value.enni) {
- this.showJsonData([obj.data[0].link.data, obj.data[1].link.data], false)
- } else if (obj = cell.value.inni) {
- this.showJsonData([obj.data[0].data, obj.data[1].data], false)
- } else if (obj = cell.value.uni) {
- this.showJsonData(obj.data, false)
- } else if (obj = cell.value.tunnel) {
- this.selectTableRow(cell.value.index)
- this.showJsonData(this.tunnelsMap.get(obj.name), false)
- } else if (obj = cell.value.service) {
- this.selectTableRow(cell.value.index)
- this.showJsonData(this.servicesMap.get(obj.name), false)
- }
- }
- })
-
+// this.graph.addMouseListener({
+// mouseDown: function (sender, evt) {
+// dragStatus = 1
+// },
+// mouseMove: function (sender, evt) {
+// if (dragStatus == 1) dragStatus = 2
+// },
+// mouseUp: function (sender, evt) {
+// if (dragStatus == 2) {
+// if (sender.getSelectionCount() >= 1) {
+// this.clientNodeLabelLayout()
+// }
+// }
+// dragStatus = 0
+//
+// this.deselectTableRow()
+// let cell = null
+// if (!evt.evt.defaultPrevented) {
+// if (!evt.state) return
+// else cell = evt.state.cell
+// } else {
+// if (sender.getSelectionCount() == 1) {
+// cell = sender.getSelectionCell()
+// } else if (sender.getSelectionCount() == 3) {
+// for (let item of sender.getSelectionCells()) {
+// if (item.isEdge()) {
+// if (!cell) cell = item
+// else {
+// cell = null;
+// break
+// }
+// }
+// }
+// }
+// }
+// if (!cell || !cell.value) {
+// return
+// }
+// let obj = null
+// if (obj = cell.value.controller) {
+// this.showJsonData([obj], false)
+// } else if (obj = cell.value.node) {
+// this.showJsonData(obj.uniSliceMap.get(this.currentSlice), false)
+// } else if (obj = cell.value.enni) {
+// this.showJsonData([obj.data[0].link.data, obj.data[1].link.data], false)
+// } else if (obj = cell.value.inni) {
+// this.showJsonData([obj.data[0].data, obj.data[1].data], false)
+// } else if (obj = cell.value.uni) {
+// this.showJsonData(obj.data, false)
+// } else if (obj = cell.value.tunnel) {
+// this.selectTableRow(cell.value.index)
+// this.showJsonData(this.tunnelsMap.get(obj.name), false)
+// } else if (obj = cell.value.service) {
+// this.selectTableRow(cell.value.index)
+// this.showJsonData(this.servicesMap.get(obj.name), false)
+// }
+// }
+// })
+ this.fetchDataFromAAI();
+ }
+ fetchDataFromAAI(){
+ let thisNg = this;
this.isSpinning = true;
let reqCount = 0;
reqCount++;
this.myhttp.getLogicalLinksData()
.subscribe((data) => {
- if (data) {
+ thisNg.logicalLinks = [];
+ if (data && !data["status"]) {
for (let ll of data["logical-link"]) {
thisNg.logicalLinks.push(ll);
}
@@ -300,7 +301,8 @@ export class CcvpnNetworkComponent implements OnInit {
reqCount++;
this.myhttp.getPnfsData()
.subscribe((data) => {
- if (data) {
+ thisNg.pnfs = [];
+ if (data && !data["status"]) {
for (let ll of data["pnf"]) {
thisNg.pnfs.push(ll);
}
@@ -317,7 +319,8 @@ export class CcvpnNetworkComponent implements OnInit {
reqCount++;
this.myhttp.getVpnBindingsData()
.subscribe((data) => {
- if (data) {
+ thisNg.vpnBindings = [];
+ if (data && !data["status"]) {
for (let ll of data["vpn-binding"]) {
thisNg.vpnBindings.push(ll);
}
@@ -334,7 +337,8 @@ export class CcvpnNetworkComponent implements OnInit {
reqCount++;
this.myhttp.getConnectivities()
.subscribe((data) => {
- if (data) {
+ thisNg.connectivities = [];
+ if (data && !data["status"]) {
for (let ll of data["connectivity"]) {
thisNg.connectivities.push(ll);
}
@@ -351,7 +355,8 @@ export class CcvpnNetworkComponent implements OnInit {
reqCount++;
this.myhttp.getNetworkRoutes()
.subscribe((data) => {
- if (data) {
+ thisNg.networkroutes = [];
+ if (data && !data["status"]) {
for (let ll of data["network-route"]) {
thisNg.networkroutes.push(ll);
}
@@ -364,20 +369,34 @@ export class CcvpnNetworkComponent implements OnInit {
(err) => {
console.log(err);
})
+ reqCount++;
+ this.myhttp.getUnisData()
+ .subscribe((data) => {
+ thisNg.unis = [];
+ if (data && !data["status"]) {
+ for (let ll of data["uni"]) {
+ thisNg.unis.push(ll);
+ }
+ }
+ if (--reqCount == 0) {
+ thisNg.finishNetworkView();
+ this.isSpinning = false;
+ }
+ },
+ (err) => {
+ console.log(err);
+ })
}
- connectivityList = [];
- connectivitySelected = {name: null, id: null};
serviceGraphModel: { [k: string]: any } = {};
layerList = [
{ value: 3, name: 'Service layer' },
{ value: 2, name: 'Tunnel layer' },
{ value: 1, name: 'Link layer' }]
- layerSelected = { value: 1, name: 'Link layer' }
- serviceList = [];
- serviceSelected = '';
+ layerSelected = { value: 2, name: 'Tunnel layer' }
+ serviceSelected = '';
addLinkDisabled = true;
nonetwork = false;
@@ -388,6 +407,7 @@ export class CcvpnNetworkComponent implements OnInit {
isSpinning = true;
pnfs = [];
+ unis = [];
logicalLinks = [];//logicalLinks Existing connection data returned by the interface
connectivities = [];
vpnBindings = [];
@@ -398,25 +418,8 @@ export class CcvpnNetworkComponent implements OnInit {
d3Data = [];//D3Render the required data
linkName = null;//Linked name link-name
- networkOption = [];//Form network drop-down box filled data
- nodeOption1 = {};//Node drop-down box filled data
- tpOption1 = [];//Node drop-down box filled data
- tpOption2 = [];//Node drop-down box filled data
- networkVal1 = null;//network1 Drop-down box default data
- networkVal2 = null;//network2 Drop-down box default data
- selectedNode1 = null;//node1 Drop-down box default data
- selectedNode2 = null;//node2 Drop-down box default data
- selecteTpName1 = null;//TP1 Drop-down box default data
- selecteTpName2 = null;//TP2 Drop-down box default data
- cloudUrl = null;//External cloud URL address
- cloudNetwork = null;//External cloud network name
- cloudNode = null;//External cloud Node name
- cloudTp = null;//External cloud Tp name
-
- dataCloud = [];//External cloud information
- dataCloudLink = [];
- aaiId = '';
+ cloudUrl = null;//External cloud URL address
//When the connection is deleted, the data displayed in the right frame
delLinkname = null;
@@ -451,13 +454,25 @@ export class CcvpnNetworkComponent implements OnInit {
};
finishNetworkView() {
+ if (!this.logicalLinks.length) return;
+ if (!this.pnfs.length) return;
this.updateTopoData();
- console.log(this.domainMap);
+ console.log("Domain Map: ", this.domainMap);
this.finishSotnView();
}
+ updateNetworkView(){
+ this.saveVertexLocation();
+ this.fetchDataFromAAI();
+ this.finishNetworkView();
+ }
updateTopoData(){
let thisNg = this;
+ this.servicesMap.clear();
+ this.domainMap.clear();
+ this.enniMap.clear();
+ this.e2eTunnels = [];
+ //this.serviceSelected = ''
// Update the network topo data
// Update node data
for (let pnf of thisNg.pnfs){
@@ -487,10 +502,10 @@ 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")
- .pop();
+ //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 svcInstId = svcInstName;
let bw = cn["bandwidth-profile-name"];
let cvlan = cn["cvlan"];
let svc = this.servicesMap.get(svcInstId);
@@ -501,7 +516,7 @@ export class CcvpnNetworkComponent implements OnInit {
connections: [],
bw : bw,
vlan : cvlan,
- unis : uniList,
+ unis : [],
otnEdges: []
}
this.servicesMap.set(svcInstId, svc);
@@ -518,7 +533,7 @@ export class CcvpnNetworkComponent implements OnInit {
let linkRole = ll["link-role"];
let linkId = ll["link-id"];
- if (linkName.search("topologyId-2") >= 0) {
+ if (linkName && linkName.search("topologyId-2") >= 0) {
// uni links
let arr = linkId.split('-');
let arr1 = arr[0].split('.');
@@ -533,10 +548,19 @@ export class CcvpnNetworkComponent implements OnInit {
if (!domain) continue;
domain.clientNodeMap.set(linkId, cpeNode);
+ let readableName = '';
+ for (let ll of thisNg.networkroutes){
+ let strArr = ll["next-hop"].split('-');
+ if (linkId === strArr[strArr.length-3]+'-'+strArr[strArr.length-1]){
+ readableName = ll["data-source"] || '';
+ break;
+ }
+ }
let uni = {
srcNodeId: arr[0],
srcUniTp: arr[1],
- dstNode: cpeNode
+ dstNode: cpeNode,
+ readableName: readableName
}
domain.uniMap.set(linkId, uni)
} else if (linkRole && linkRole.search("cross-domain") >= 0){
@@ -571,30 +595,7 @@ export class CcvpnNetworkComponent implements OnInit {
}
}
this.enniMap.set(linkId, {data: localLink});
- } else if (linkType.search("Tsci") >= 0) {
- // 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")
- .pop();
- let conn = {
- srcEpId: srcEpId,
- dstEpId: dstEpId,
- dstEpLtpId: '',
- srcEpLtpId: ''
- }
- for (let nr of this.networkroutes){
- if (nr['route-id'] === srcEpId){
- conn.srcEpLtpId = nr['next-hop'];
- }
- if (nr['route-id'] === dstEpId){
- conn.dstEpLtpId = nr['next-hop'];
- }
- }
- let svc = this.servicesMap.get(svcInstId);
- if (svc){
- svc.connections.push(conn);
- }
+ } else if (linkType && linkType.search("Tsci") >= 0) {
} else {
// local link
let localLink: Array<any> = new Array();
@@ -642,7 +643,8 @@ export class CcvpnNetworkComponent implements OnInit {
srcNode: srcNode,
srcTpId: srcTpId,
dstNode: dstNode,
- dstTpId: dstTpId
+ dstTpId: dstTpId,
+ id: srcNodeId + '-' + srcTpId
}
domainLocal.inniMap.set(srcNodeId + '-' + srcTpId, inni);
} else {
@@ -650,26 +652,91 @@ export class CcvpnNetworkComponent implements OnInit {
}
}
}
- // Hack: deson't work for more then 2 domain system
+ let tunnels = [];
for (let ll of thisNg.vpnBindings) {
- let svcInstId = ll["slice-id"];
+ let svcInstId = this.getValueFromRelationList(ll, "connectivity", "property", "connectivity.etht-svc-name")
+ .pop()
let svc = this.servicesMap.get(svcInstId);
let srcNodeId = ll["src-access-node-id"];
let dstNodeId = ll["dst-access-node-id"];
+ if (!srcNodeId) continue;
let domainId = srcNodeId.split(".")[1];
let domain = thisNg.domainMap.get(domainId);
+ let bw = ll["route-distinguisher"] || 0;
if (!svc || !domain){
continue;
}
+ let tunnelSeg = {
+ id: ll["vpn-id"],
+ tunnelId: ll["vpn-name"],
+ srcNodeId: srcNodeId,
+ dstNodeId: dstNodeId
+ }
+ let exist = false;
+ for (let tl of svc.connections){
+ if (tl["id"] === ll["vpn-name"]){
+ tl.segs.push(tunnelSeg)
+ exist = true;
+ }
+ }
+ if (!exist){
+ let conn = {
+ srcId: "",
+ dstId: "",
+ id: ll["vpn-name"],
+ segs: [tunnelSeg],
+ bw: bw
+ }
+ svc.connections.push(conn);
+ }
+ }
+ for(let [id, svc] of thisNg.servicesMap){
+ for (let con of svc.connections){
+ con.segs.sort(function(a, b){
+ return a.srcNodeId.split(".")[1] - b.dstNodeId.split(".")[1];
+ });
+ con.srcId = con.segs[0].srcNodeId;
+ con.dstId = con.segs[con.segs.length-1].dstNodeId;
+ }
+ }
+ for (let ll of thisNg.unis){
+ let ltpIdArr = ll["id"].split('-');
+ ltpIdArr.pop();
+ let ltpId = ltpIdArr.join("-");
+ let svcInstId = this.getValueFromRelationList(ll, "connectivity", "property", "connectivity.etht-svc-name")
+ .pop()
+ let svc = this.servicesMap.get(svcInstId);
+ if (!svc) continue;
+ let bw = ll["data-source"];
+ let uni = {
+ id: ltpId,
+ bw: bw
+ }
+ svc.unis.push(uni);
+ }
+ // Hack: deson't work for more then 2 domain system
+ for (let ll of thisNg.vpnBindings) {
+ let svcInstId = this.getValueFromRelationList(ll, "connectivity", "property", "connectivity.etht-svc-name")
+ .pop();
+ 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);
+ break;
}
}
if (dstNodeId === inni.srcNode.id){
if (srcNodeId === inni.dstNode.id){
svc.otnEdges.push(inni);
+ break;
}
}
}
@@ -678,9 +745,19 @@ export class CcvpnNetworkComponent implements OnInit {
for (let [key, enni] of this.enniMap) {
if (dstNodeId === key.split("-")[0]){
svc.otnEdges.push(enni);
+ break;
+ };
+ }
+ }
+ if (!ll["dst-access-ltp-id"]){
+ for (let [key, enni] of this.enniMap) {
+ if (srcNodeId === key.split("-")[0]){
+ svc.otnEdges.push(enni);
+ break;
};
}
}
+ svc.otnEdges = Array.from(new Set(svc.otnEdges));
}
}
@@ -729,9 +806,9 @@ export class CcvpnNetworkComponent implements OnInit {
} else {
clientNode.vertex = this.graph.insertVertex(domain.vertex, null, null, 0, 0, 26, 13, this.CPE_STYLE)
}
- let labelName = nodeName.split('-')[1];
+ let ltpName = nodeName.split('-')[1];
clientNode.vertex.value = {
- name: nodeName, label: labelName, clientNode: clientNode
+ name: nodeName, ltpName: ltpName, label: ltpName, clientNode: clientNode, clientName : ''
}
}
// Insert UNI links
@@ -744,6 +821,7 @@ export class CcvpnNetworkComponent implements OnInit {
maximum: 1000000 / 1000000 + 'G',
unused: 1000000 / 1000000 + 'G'
}
+ uni.dstNode.vertex.value.label = uni.readableName;
//uni.srcUniTp.edge = uni.edge
}
// Insert ENNI links
@@ -769,47 +847,48 @@ export class CcvpnNetworkComponent implements OnInit {
// Insert tunnel edges
for (let [id, svc] of this.servicesMap){
- let localTunnelMap = new Map();
for (let conn of svc.connections){
- let srcArr = conn.srcEpLtpId.split('-');
- let srcNodeId = srcArr[srcArr.length-3];
- let dstArr = conn.dstEpLtpId.split('-');
- let dstNodeId = dstArr[dstArr.length-3];
- if (!localTunnelMap.get(srcNodeId + '-' + dstNodeId)) {
- let srcNode = getNode(srcNodeId, this.domainMap);
- let dstNode = getNode(dstNodeId, this.domainMap);
- if(!srcNode.vertex || !dstNode.vertex) {
- continue;
- };
- let e2eTunnel = {
- name: id + '/' + srcNodeId + '-' + dstNodeId,
+ let srcNodeId = conn.srcId;
+ let dstNodeId = conn.dstId;
+
+ let srcNode = getNode(srcNodeId, this.domainMap);
+ let dstNode = getNode(dstNodeId, this.domainMap);
+ if(!srcNode.vertex || !dstNode.vertex) {
+ continue;
+ };
+ let e2eTunnel = {
+ name: conn.id,
srcNode: srcNode,
dstNode: dstNode,
e2eEdge: null,
serviceId: id,
srcVertex: srcNode.vertex,
dstVertex: dstNode.vertex
- }
- e2eTunnel.e2eEdge =
- this.graph.insertEdge(this.gLayers[2], null, {
- tunnel: e2eTunnel, tunnelName: e2eTunnel.name
- }, e2eTunnel.srcNode.vertex, e2eTunnel.dstNode.vertex, this.TUNNEL_STYLE)
- localTunnelMap.set(srcNodeId + '-' + dstNodeId, e2eTunnel)
- this.e2eTunnels.push(e2eTunnel);
}
+ e2eTunnel.e2eEdge =
+ this.graph.insertEdge(this.gLayers[2], null, {
+ tunnel: e2eTunnel, tunnelName: e2eTunnel.name
+ }, e2eTunnel.srcNode.vertex, e2eTunnel.dstNode.vertex, this.TUNNEL_STYLE)
+ this.e2eTunnels.push(e2eTunnel);
+
}
}
-
-
this.graph.model.endUpdate();
this.graph.zoomTo(this.graphScale);
- this.autoLayout(1);
- this.changeLayer({ value:1, name: 'Link Layer'});
+ if (this.readVertexLocation()) {
+ this.clientNodeLabelLayout(); this.centerGraph()
+ this.autoLayout(2); this.autoLayout(3)
+ } else {
+ this.autoLayout(1)
+ }
+
+ this.changeLayer({ value: 2, name: 'Tunnel layer' });
if (this.serviceSelected){
this.chooseService(this.serviceSelected);
}
+ //this.saveVertexLocation();
function getNode(nodeId, domainMap){
let arr = nodeId.split('.');
return domainMap.get(arr[1]).nodeMap.get(nodeId);
@@ -817,6 +896,50 @@ export class CcvpnNetworkComponent implements OnInit {
}
+ // Save the location data of all vertices to local storage
+ saveVertexLocation() {
+ if (!this.domainMap.size) return
+ let domainLocs = []
+ for (let [netId, domain] of this.domainMap) {
+ let domainLoc = { id: netId, rect: mxRectangle.fromRectangle(domain.vertex.geometry), nodeLocs: [], clientNodeLocs: [] }
+ for (let [nodeId, node] of domain.nodeMap) {
+ let nodeLoc = { id: nodeId, rect: mxRectangle.fromRectangle(node.vertex.geometry) }
+ domainLoc.nodeLocs.push(nodeLoc)
+ }
+ for (let [nodeId, clientNode] of domain.clientNodeMap) {
+ let clientNodeLoc = { id: nodeId, rect: mxRectangle.fromRectangle(clientNode.vertex.geometry) }
+ domainLoc.clientNodeLocs.push(clientNodeLoc)
+ }
+ domainLocs.push(domainLoc)
+ }
+ this.storage['actn-viewer-vertex'] = JSON.stringify(domainLocs)
+ }
+
+ // Read the location data of all vertices from local storage
+ readVertexLocation() {
+ let stored = this.storage['actn-viewer-vertex']
+ if (!stored) return false
+ let domainLocs = JSON.parse(stored)
+ if (domainLocs.length != this.domainMap.size) return false
+ for (let domainLoc of domainLocs) {
+ let domain = this.domainMap.get(domainLoc.id)
+ if (!domain || domainLoc.nodeLocs.length != domain.nodeMap.size) return false
+ domain.vertex.geometry.setRect(domainLoc.rect.x, domainLoc.rect.y, domainLoc.rect.width, domainLoc.rect.height)
+ for (let nodeLoc of domainLoc.nodeLocs) {
+ let node = domain.nodeMap.get(nodeLoc.id)
+ if (!node) return false
+ node.vertex.geometry.setRect(nodeLoc.rect.x, nodeLoc.rect.y, node.vertex.geometry.width, node.vertex.geometry.height)
+ }
+ if (!domainLoc.clientNodeLocs || domainLoc.clientNodeLocs.length != domain.clientNodeMap.size) return false
+ for (let clientNodeLoc of domainLoc.clientNodeLocs) {
+ let clientNode = domain.clientNodeMap.get(clientNodeLoc.id)
+ if (!clientNode) return false
+ clientNode.vertex.geometry.setRect(clientNodeLoc.rect.x, clientNodeLoc.rect.y, clientNode.vertex.geometry.width, clientNode.vertex.geometry.height)
+ }
+ }
+ return true
+ }
+
changeLayer(layer){
this.layerSelected = layer;
for (let i = 1; i < this.gLayers.length; i++) {
@@ -826,6 +949,7 @@ export class CcvpnNetworkComponent implements OnInit {
}
chooseService(svcInstId) {
+
this.serviceSelected = svcInstId;
//clear the label and color of all UNI links
for (let [, domain] of this.domainMap) {
@@ -833,6 +957,7 @@ export class CcvpnNetworkComponent implements OnInit {
this.graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, CE_COLOR, [uni.edge])
this.graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, CE_COLOR, [uni.dstNode.vertex])
this.graph.setCellStyles(mxConstants.STYLE_DASHED, '1', [uni.edge])
+ uni.dstNode.vertex.value.label = uni.readableName
uni.edge.value.label = ''
uni.edge.value.endpoints = null
}
@@ -840,19 +965,14 @@ export class CcvpnNetworkComponent implements OnInit {
// Update the label and color of UNI links of current service
let service = this.servicesMap.get(this.serviceSelected);
+ console.log("Choosing service: ", service);
if (service){
- let bw = service.bw;
- for (let conn of service.connections){
- let srcUniLinkId = getShortName(conn.srcEpLtpId);
- let dstUniLinkId = getShortName(conn.dstEpLtpId);
- // left side uni link
+ for (let uniRecord of service.unis){
+ let srcUniLinkId = getShortName(uniRecord.id);
+ let bw = uniRecord.bw;
let arr = srcUniLinkId.split('.');
let uni = this.domainMap.get(arr[1]).uniMap.get(srcUniLinkId);
colorUni(uni, this.graph, bw);
- // right side uni
- arr = dstUniLinkId.split('.');
- uni = this.domainMap.get(arr[1]).uniMap.get(dstUniLinkId);
- colorUni(uni, this.graph, bw);
}
}
@@ -863,20 +983,17 @@ export class CcvpnNetworkComponent implements OnInit {
// clear the label of all inni links
for (let [, svc] of this.servicesMap) {
- for (let ed of service.otnEdges){
+ for (let ed of svc.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);
- }
+ for (let ed of service.otnEdges){
+ colorOtnEdge(ed, this.graph, bw);
}
}
this.graph.refresh();
@@ -898,6 +1015,7 @@ export class CcvpnNetworkComponent implements OnInit {
if (!uni.edge.value.endpoints) {
uni.edge.value.endpoints = [];
}
+
uni.edge.value.endpoints.push(bandwidth);
let sum = uni.edge.value.endpoints.reduce((a, b) => a + b, 0);
uni.edge.value.label = sum + 'G' ;
@@ -908,23 +1026,26 @@ export class CcvpnNetworkComponent implements OnInit {
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';
+ //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');
+ getValueFromRelationList(relationshipList, relatedTo, dataOrProperty, relatedKey){
+ let rlArr: Array<any> = this.getJsonValue(relationshipList, 'relationship-list.relationship');
let valList : Array<any> = [];
+ if (!rlArr) return valList;
for (let rl of rlArr){
if (rl['related-to'] === relatedTo){
- let pnfNameS: String;
- let tpNameS: String;
- for (let rld of rl['relationship-data']){
- if (rld['relationship-key'] === relatedKey){
- let val = rld['relationship-value'];
+ let containerName = dataOrProperty === "data"? "relationship-data": "related-to-property";
+ let keyString = dataOrProperty === "data"? "relationship-key": "property-key";
+ let valString = dataOrProperty === "data"? 'relationship-value' : "property-value";
+
+ for (let rld of rl[containerName]){
+ if (rld[keyString] === relatedKey){
+ let val = rld[valString];
if (val) valList.push(val);
}
}
@@ -987,11 +1108,6 @@ export class CcvpnNetworkComponent implements OnInit {
document.body.style.cursor = disabled ? 'wait' : 'default'
}
- choseConnectivity(item) {
- if (this.connectivitySelected !== item) this.connectivitySelected = item;
- //this.drawService(this.getSvcTree());
- }
-
_debounce(func: Function, delay: number) {
let inDebounce;
return function () {
@@ -1503,5 +1619,19 @@ export class CcvpnNetworkComponent implements OnInit {
getValues(map){
return Array.from(map.values());
}
+ getTunnels(){
+ let svc = this.servicesMap.get(this.serviceSelected);
+ if (svc){
+ let name = svc.name;
+ return svc.connections.map(({id, srcId, dstId, bw}) => ({
+ name: name,
+ id: id,
+ srcId: srcId,
+ dstId: dstId,
+ bw: bw
+ }));
+ }
+ return [];
+ }
} \ No newline at end of file