From dba6524875ebb7c0835d4eace5bc27c03763d4a1 Mon Sep 17 00:00:00 2001 From: "phani.y" Date: Wed, 25 Mar 2020 15:42:53 +0530 Subject: [PATCH] Service Topology Changes Issue-ID: USECASEUI-419 Signed-off-by: phani.y Change-Id: I4f2d8a5a6309de92acd9384d499a285306036ebf --- .../manage-service/manage-service.component.ts | 30 +- .../monitor-service/monitor-service.component.html | 12 +- .../monitor-service/monitor-service.component.less | 4 +- .../monitor-service/monitor-service.component.ts | 120 +++++--- .../order-service/order-service.component.ts | 14 +- usecaseui-portal/src/assets/i18n/cn.json | 2 +- usecaseui-portal/src/assets/i18n/en.json | 2 +- .../src/assets/images/connectivity.png | Bin 0 -> 3245 bytes usecaseui-portal/src/assets/images/service.png | Bin 0 -> 4988 bytes usecaseui-portal/src/assets/images/vpnbinding.png | Bin 0 -> 2818 bytes usecaseui-portal/src/styles.less | 26 +- usecaseui-portal/testBE/FakeBackendInterceptor.ts | 304 ++++++++++++++------- 12 files changed, 374 insertions(+), 140 deletions(-) create mode 100644 usecaseui-portal/src/assets/images/connectivity.png create mode 100644 usecaseui-portal/src/assets/images/service.png create mode 100644 usecaseui-portal/src/assets/images/vpnbinding.png diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts index 098eedd2..16aee4e7 100644 --- a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts +++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts @@ -34,8 +34,13 @@ export class ManageServiceComponent implements OnInit { //Get SubscriptionType getSubscribeTypes() { + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json' + }) + }; let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions"; - this.http.get(url, {}).subscribe((data) => { + this.http.get(url, httpOptions).subscribe((data) => { this.serviceSubscriptionList = data.subscriptions; }, (err) => { console.log(err); @@ -44,10 +49,15 @@ export class ManageServiceComponent implements OnInit { //Get subscription instanceID by calling With Subscription Type getServiceInstanceList(subscriptionType) { + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json' + }) + }; this.serviceInstanceList = []; this.selectedServiceInstance=""; let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/"+subscriptionType; - this.http.get(url,{}).subscribe((data) => { + this.http.get(url,httpOptions).subscribe((data) => { this.serviceInstanceList = data.serviceInstanceList; }, (err) => { console.log(err); @@ -56,8 +66,12 @@ export class ManageServiceComponent implements OnInit { deleteSelectedService() { let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance; - - this.http.delete(url,{}).subscribe((data) => { + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json' + }) + }; + this.http.delete(url,httpOptions).subscribe((data) => { this.serviceInstanceList = []; this.selectedServiceInstance = ""; this.getServiceInstanceList(this.selectedSubscriptionType); @@ -67,11 +81,17 @@ export class ManageServiceComponent implements OnInit { } + getSubscribedSites() { console.log("on change"); + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json' + }) + }; if (this.selectedServiceInstance) { let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance; - this.http.get(url, {}).subscribe((data) => { + this.http.get(url, httpOptions).subscribe((data) => { this.assignData(data, false); }, (err) => { console.log(err); diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html index 39bfa1bf..3637d3c9 100644 --- a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html +++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html @@ -29,15 +29,19 @@ - + - -
-
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less index 9ebe3741..bfdcfdeb 100644 --- a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less +++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less @@ -95,4 +95,6 @@ #subscriptionType, #serviceInstance { width: 250px; - } \ No newline at end of file + } + + \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts index 48c90b63..4903b102 100644 --- a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts +++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts @@ -1,8 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { Network, Node, Edge } from 'vis'; -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import { baseUrl } from '../../../../datainterface'; +import { getLocaleDateFormat } from '@angular/common'; @Component({ selector: 'app-monitor-service', templateUrl: './monitor-service.component.html', @@ -16,14 +17,6 @@ export class MonitorServiceComponent implements OnInit { serviceInstanceList = [] as Array; selectedTopology:string = 'i18nTextDefine_serviceTopology'; - serviceTopologyList:any = [ - { - topologyType:"i18nTextDefine_serviceTopology", - }, - { - topologyType:"i18nTextDefine_resourceTopology", - } - ]; baseUrl = baseUrl.baseUrl title = 'Network'; @@ -31,6 +24,7 @@ export class MonitorServiceComponent implements OnInit { public edges: Edge; public network: Network; public serviceList: any; + public vpnBindingList:any; public tempNode: any; public tempEdge: any; public selectedNode: any; @@ -38,9 +32,20 @@ export class MonitorServiceComponent implements OnInit { public x: any; public abc = []; container: any; + isdisabled:boolean = true; + serviceTopologyList:any = [ + { + topologyType:"i18nTextDefine_serviceTopology", + }, + { + topologyType:"i18nTextDefine_resourceTopology", + } + ]; + + networkOptions = { layout: { - randomSeed: 15 + randomSeed: 15 }, nodes: { borderWidth: 13, @@ -52,7 +57,7 @@ export class MonitorServiceComponent implements OnInit { font: { color: '#eeeeee' } }, edges: { - color: 'lightgray' + color: 'lightgray', }, interaction: { @@ -69,12 +74,27 @@ export class MonitorServiceComponent implements OnInit { intervalData: any; returnResponse: boolean = true; - + onBack(){ + if(this.serviceList.length > 0) { + this.refreshData(""); + } else { + this.getData(""); + } + this.isdisabled = true; + }; //Get SubscriptionType getSubscribeTypes() { + this.serviceList = []; + this.vpnBindingList = []; + this.isdisabled = true; + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json' + }) + }; let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions"; - this.http.get(url, {}).subscribe((data) => { + this.http.get(url, httpOptions).subscribe((data) => { this.serviceSubscriptionList = data.subscriptions; }, (err) => { console.log(err); @@ -83,10 +103,19 @@ export class MonitorServiceComponent implements OnInit { //Get subscription instanceID by calling With Subscription Type getServiceInstanceList(subscriptionType) { + debugger + this.serviceList = []; + this.vpnBindingList = []; + this.isdisabled = true; this.serviceInstanceList = []; this.selectedServiceInstance=""; + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json' + }) + }; let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/" + subscriptionType; - this.http.get(url,{}).subscribe((data) => { + this.http.get(url,httpOptions).subscribe((data) => { this.serviceInstanceList = data.serviceInstanceList; }, (err) => { console.log(err); @@ -95,8 +124,8 @@ export class MonitorServiceComponent implements OnInit { getTopologyInfo (topo) { this.selectedTopology = topo; - this.getData(); - this.refreshData(); + this.getData(""); + this.refreshData(""); } //Get subscription instanceID by calling With Subscription Type ngOnInit() { @@ -104,24 +133,28 @@ export class MonitorServiceComponent implements OnInit { this.getSubscribeTypes(); } - refreshData() { + refreshData(data) { + const com = this + var id ; var data1 = { - nodes: this.serviceList.nodes, - edges: this.serviceList.edges + nodes: data.nodes, + edges: data.edges }; var network = new Network(this.container, data1, this.networkOptions); - network.on('select', function (selection) { + network.on('doubleClick', function (selection) { + var selectedvpnid = selection.nodes[0]; + com.getData(selectedvpnid) this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids var filteredNode = data1.nodes.filter(item => ( item.id == this.selectedNodeIds )); var t1 = '
\ Node Information\ - \ +
\ \ \ - \ - \ + \ + \ \ \ \ @@ -130,8 +163,8 @@ export class MonitorServiceComponent implements OnInit { if( entry[1] !== "null") { t1 += '\ - \ - \ + \ + \ \ '; } @@ -147,24 +180,49 @@ export class MonitorServiceComponent implements OnInit { }); } - getData (){ + getData (vpnid){ var comp = this; - this.http.get(this.baseUrl+'/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/'+this.selectedSubscriptionType.toLowerCase()+'/service-instances/service-instance/'+this.selectedServiceInstance, {}).subscribe((data) => { + let url = ""; + if(vpnid != "" ) { + if(this.vpnBindingList.length > 0) { + this.refreshData(this.vpnBindingList) + } else { + url = this.baseUrl+'/uui-lcm/Sotnservices/vpnbindingTopology/service/service-subscriptions/service-subscription/'+this.selectedSubscriptionType.toLowerCase()+'/service-instances/service-instance/'+this.selectedServiceInstance+'/vpn-informations/vpn-information/'+ vpnid; + } + } else { + if(this.serviceList.length > 0 && vpnid == "") { + this.refreshData(this.serviceList); + } else { + url = this.baseUrl+'/uui-lcm/Sotnservices/serviceTopology/service/service-subscriptions/service-subscription/'+this.selectedSubscriptionType.toLowerCase()+'/service-instances/service-instance/'+this.selectedServiceInstance; + } + } + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json' + }) + }; + this.http.get(url, httpOptions).subscribe((data) => { + if(vpnid == "") { this.serviceList = data; - comp.refreshData(); - }, (err) => { + } else { + this.vpnBindingList = data; + this.isdisabled = false; + } + comp.refreshData(data); + }, (err) => { console.log(err); }); } + // Getting sitedata Based On Type and ID getSelectedsubscriptionInfo() { - this.getData(); - this.refreshData(); + this.getData(""); if (this.intervalData) { clearInterval(this.intervalData); } } + ngOnDestroy() { console.log('clear interval'); if (this.intervalData) { diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts index d770eb06..1cfd00fd 100644 --- a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts +++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts @@ -20,7 +20,6 @@ export class OrderServiceComponent implements OnInit { siteData:object = {}; buttonDisabled:boolean = false; intervalData:any; - // baseUrl:string = '/api/usecaseui-server/v1'; baseUrl = baseUrl.baseUrl expandDataSet = [ { rowIdx: 1, name: 'i18nTextDefine_serviceInformation', expand: true }, @@ -59,6 +58,7 @@ export class OrderServiceComponent implements OnInit { }); } + numberOnly(event): boolean { const charCode = (event.which) ? event.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { @@ -121,6 +121,10 @@ export class OrderServiceComponent implements OnInit { this.l2vpn["l2vpn_reroute"] == null) { return false; } + // for (const i in this.validateForm.controls) { + // this.validateForm.controls[i].markAsDirty(); + // this.validateForm.controls[i].updateValueAndValidity(); + // } return true; } @@ -135,13 +139,19 @@ export class OrderServiceComponent implements OnInit { 'Content-Type': 'application/json', }) }; + let url1 = this.baseUrl + '/uui-lcm/Sotnservices_unni'; this.http.post(url1, body, httpOptions).subscribe((data) => { let comp = this; this.message.info('Instantiation In Progress'); this.intervalData = setInterval(() => { + const httpOptions1 = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + }) + }; let url2 = this.baseUrl + "/uui-lcm/Sotnservices/serviceStatus/service-instance/" + data.service.serviceId; - this.http.get(url2, {}).subscribe((data) => { + this.http.get(url2, httpOptions1).subscribe((data) => { if (data.status == "1") { clearInterval(comp.intervalData); comp.message.success('Service Created'); diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index f8ec2481..bcb7851d 100644 --- a/usecaseui-portal/src/assets/i18n/cn.json +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -151,7 +151,7 @@ "i18nTextDefine_topology": "拓扑结构", "i18nTextDefine_colorAware": "色敏感", "i18nTextDefine_couplingFlag": "耦合标签", - "i18nTextDefine_networkTopology": "网络拓扑", + "i18nTextDefine_serviceTopology": "服务拓扑", "i18nTextDefine_resourceTopology": "资源拓扑", "i18nTextDefine_orderService":"订购服务", "i18nTextDefine_monitorService":"监控服务", diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index 41b7c8d8..dd967e94 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -150,7 +150,7 @@ "i18nTextDefine_topology": "Topology", "i18nTextDefine_colorAware": "Color Aware", "i18nTextDefine_couplingFlag": "Coupling Flag", - "i18nTextDefine_networkTopology": "Network Topology", + "i18nTextDefine_serviceTopology": "Service Topology", "i18nTextDefine_resourceTopology": "Resource Topology", "i18nTextDefine_orderService":"Order Service", "i18nTextDefine_monitorService":"Monitor Service", diff --git a/usecaseui-portal/src/assets/images/connectivity.png b/usecaseui-portal/src/assets/images/connectivity.png new file mode 100644 index 0000000000000000000000000000000000000000..77c9732108ffe9737876e53d11bc1a64bd23cb17 GIT binary patch literal 3245 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 UCmfR5=>Px#07*qoM6N<$g18HH6aWAK literal 0 HcmV?d00001 diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index bd3a6b79..e3b06d8e 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -838,6 +838,14 @@ nz-notification-container .ant-notification{ } } } +.back-btn{ + text-align: right; + padding-bottom: 15px; +} +.topocontainer{ + width: 100%; +} + .taskmodel_list{ margin-bottom: 20px; nz-table{ @@ -859,4 +867,20 @@ nz-notification-container .ant-notification{ .ant-table-wrapper { padding: 10px; } -} \ No newline at end of file +} +.ant-calendar-picker { + width: 100% !important; +} +.monitor-table{ + border-collapse: collapse; + width: 100%; + border: 1px solid gainsboro; +} + +.monitor-table-td-th { + text-align: left; + padding: 8px; + border-bottom: 1px solid gainsboro; + border-right: 1px solid gainsboro; +} +.monitor-table tr:nth-child(even) {background-color:#bfbfbf;} \ No newline at end of file diff --git a/usecaseui-portal/testBE/FakeBackendInterceptor.ts b/usecaseui-portal/testBE/FakeBackendInterceptor.ts index dd1c0d20..9fc0868c 100644 --- a/usecaseui-portal/testBE/FakeBackendInterceptor.ts +++ b/usecaseui-portal/testBE/FakeBackendInterceptor.ts @@ -90,102 +90,218 @@ export class FakeBackendInterceptor implements HttpInterceptor { return Observable.of(new HttpResponse({ status: 200, body: body })); } - // get monotor service data - if (request.url.endsWith('/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/sotn/service-instances/service-instance/ISAAC-IS02') || request.url.endsWith('/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/sotn/service-instances/service-instance/ISAAC-IS03') && request.method === 'GET') { - let body = { - "nodes": [ - { - "id": "1", - "shape": "circularImage", - "image": "./assets/images/tpoint.png", - "label": "Termination Point", - "color": "Green", - "dataNode": {} - }, - { - "id": "2", - "shape": "circularImage", - "image": "./assets/images/edge.png", - "label": "Node", - "color": "Green", - "dataNode": { - "ethtSvcName": "sotn-021-VS-monitored", - "colorAware": "true", - "cbs": "100", - "couplingFlag": "true", - "ebs": "evpl", - "cir": "200000", - "eir": "0" - } - }, - { - "id": "3", - "shape": "circularImage", - "image": "./assets/images/logicallink.png", - "label": "Logical Link", - "color": "Green", - "dataNode": { - "ethtSvcName": "sotn-021-VS-monitored", - "colorAware": "true", - "cbs": "100", - "couplingFlag": "true", - "ebs": "evpl", - "cir": "200000", - "eir": "0" - } - }, - { - "id": "4", - "shape": "circularImage", - "image": "./assets/images/edge.png", - "label": "Node", - "color": "Green", - "dataNode": { - "zipcode": "100095", - "siteName": "hubtravel", - "description": "desc", - "location": "laptop-5", - "cvlan": "100" - } - }, - { - "id": "5", - "shape": "circularImage", - "image": "./assets/images/tpoint.png", - "label": "Termination Point", - "color": "Green", - "dataNode": { - "accessltpid": "155", - "siteName": "hubtravel", - "description": "desc", - "accessnodeid": "10.10.10.10", - "cvlan": "100" - } - } - ], - "edges": [ - { - "from": "1", - "to": "2" - }, - { - "from": "2", - "to": "3" - }, - { - "from": "3", - "to": "4" - }, - { - "from": "4", - "to": "5" - } - ] - }; + // get monitor service data + // VPN binding + if (request.url.endsWith('/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/sotn/service-instances/service-instance/ISAAC-IS02/vpn-informations/vpn-information/vpn-bind-1') && request.method === 'GET') { + + let body = { + "nodes":[ + { + "id":"vpn-bind-1", + "shape":"circularImage", + "image":"./assets/images/vpnbinding.png", + "label":"VPN Binding", + "color":"Green", + "dataNode":{ + "vpn-name":"sotn-l2-vpn", + "vpn-type":"l2-eth" + } + }, + { + "id":"10.10.10.10", + "shape":"circularImage", + "image":"./assets/images/tpoint.png", + "label":"P-interface", + "color":"Green", + "dataNode":{ + "interface-name":"10.10.10.10", + "speed-value":"example-speed-value-val-33014", + "speed-units":"example-speed-units-val-75695", + "port-description":"p-interafce-desc" + } + }, + { + "id":"22.22.22.22", + "shape":"circularImage", + "image":"./assets/images/tpoint.png", + "label":"P-interface", + "color":"Green", + "dataNode":{ + "interface-name":"22.22.22.22", + "speed-value":"example-speed-value-val-33014", + "speed-units":"example-speed-units-val-75695", + "port-description":"p-interafce-desc" + } + } + ], + "edges":[ + { + "from":"vpn-bind-1", + "to":"10.10.10.10" + }, + { + "from":"vpn-bind-1", + "to":"22.22.22.22" + } + ] + } - return Observable.of(new HttpResponse({ status: 200, body: body })); + return Observable.of(new HttpResponse({ status: 200, body: body })); + + } + + // resource topo + + if (request.url.endsWith('/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/sotn/service-instances/service-instance/ISAAC-IS02')&& request.method === 'GET') { + + let body = { + "nodes":[ + { + "id":"NNI-001", + "shape":"circularImage", + "image":"./assets/images/service.png", + "label":"Service", + "color":"Green", + "dataNode":{ + "service-instance-id":"NNI-001", + "service-instance-name":"NNI-001", + "service-type":"example-service-type-val-52265", + "service-role":"example-service-role-val-24156" + } + }, + { + "id":"vnf-instance", + "shape":"circularImage", + "image":"./assets/images/VNF.png", + "label":"Vnf", + "color":"Green", + "dataNode":{ + "vnf-id":"nni-vnf-1", + "vnf-instance-id":"vnf-instance", + "vnf-name":"SOTN-NNI-Underlay", + "vnf-type":"some-vnf-type", + "is-closed-loop-disabled":false, + "closedLoopDisabled":false + } + }, + { + "id":"eth-conn-1", + "shape":"circularImage", + "image":"./assets/images/connectivity.png", + "label":"Connectivity", + "color":"Green", + "dataNode":{ + "connectivity-id":"eth-conn-1", + "operational-status":"Created", + "vpn-type":"L2-eth" + } + }, + { + "id":"uni-1", + "shape":"circularImage", + "image":"./assets/images/edge.png", + "label":"uni-1", + "color":"Green", + "dataNode":{ + "id":"uni-1", + "tpId":"p-interface-1", + "operational-status":"Created" + } + }, + { + "id":"10.10.10.10", + "shape":"circularImage", + "image":"./assets/images/tpoint.png", + "label":"P-interface", + "color":"Green", + "dataNode":{ + "interface-name":"10.10.10.10", + "speed-value":"example-speed-value-val-33014", + "speed-units":"example-speed-units-val-75695", + "port-description":"p-interafce-desc" + } + }, + { + "id":"uni-2", + "shape":"circularImage", + "image":"./assets/images/edge.png", + "label":"uni-2", + "color":"Green", + "dataNode":{ + "id":"uni-2", + "tpId":"p-interface-2", + "operational-status":"Created" + } + }, + { + "id":"22.22.22.22", + "shape":"circularImage", + "image":"./assets/images/tpoint.png", + "label":"P-interface", + "color":"Green", + "dataNode":{ + "interface-name":"22.22.22.22", + "speed-value":"example-speed-value-val-33014", + "speed-units":"example-speed-units-val-75695", + "port-description":"p-interafce-desc" + } + }, + { + "id":"vpn-bind-1", + "shape":"circularImage", + "image":"./assets/images/vpnbinding.png", + "label":"VPN Binding", + "color":"Green", + "dataNode":{ + "vpn-name":"sotn-l2-vpn", + "vpn-type":"l2-eth" + } + } + ], + "edges":[ + { + "from":"NNI-001", + "to":"vnf-instance" + }, + { + "from":"vnf-instance", + "to":"eth-conn-1" + }, + { + "from":"vnf-instance", + "to":"uni-1" + }, + { + "from":"uni-1", + "to":"10.10.10.10" + }, + { + "from":"vnf-instance", + "to":"uni-2" + }, + { + "from":"uni-2", + "to":"22.22.22.22" + }, + { + "from":"eth-conn-1", + "to":"vpn-bind-1" + }, + { + "from":"vpn-bind-1", + "to":"10.10.10.10" + }, + { + "from":"vpn-bind-1", + "to":"22.22.22.22" + } + ] + } + + return Observable.of(new HttpResponse({ status: 200, body: body })); + + } - } if (request.url.endsWith('/uui-lcm/customers/service-subscriptions') && request.method === 'GET') { let body = { -- 2.16.6
SpecificationValueSpecificationValue
'+ entry[0] + ':'+ entry[1] + ''+ entry[0] + ':'+ entry[1] + '