//Get SubscriptionType
getSubscribeTypes() {
+ let httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json'
+ })
+ };
let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions";
- this.http.get<any>(url, {}).subscribe((data) => {
+ this.http.get<any>(url, httpOptions).subscribe((data) => {
this.serviceSubscriptionList = data.subscriptions;
}, (err) => {
console.log(err);
//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<any>(url,{}).subscribe((data) => {
+ this.http.get<any>(url,httpOptions).subscribe((data) => {
this.serviceInstanceList = data.serviceInstanceList;
}, (err) => {
console.log(err);
deleteSelectedService() {
let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
-
- this.http.delete<any>(url,{}).subscribe((data) => {
+ let httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json'
+ })
+ };
+ this.http.delete<any>(url,httpOptions).subscribe((data) => {
this.serviceInstanceList = [];
this.selectedServiceInstance = "";
this.getServiceInstanceList(this.selectedSubscriptionType);
}
+
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<any>(url, {}).subscribe((data) => {
+ this.http.get<any>(url, httpOptions).subscribe((data) => {
this.assignData(data, false);
}, (err) => {
console.log(err);
<td>
<nz-select id="serviceInstance" class= "colm-s-2 " [(ngModel)]="selectedTopology" (ngModelChange)="getTopologyInfo($event)"
nzAllowClear nzPlaceHolder="Choose">
- <nz-option *ngFor="let option of serviceTopologyList" [nzValue]="option.topologyType" [nzLabel]="option.topologyType | translate"></nz-option>
+ <nz-option *ngFor="let option of serviceTopologyList" [nzValue]="option.topologyType" [nzLabel]="option.topologyType | translate" [nzDisabled]="option.topologyType == 'i18nTextDefine_resourceTopology'"></nz-option>
</nz-select>
</td>
</tr>
</table>
</div>
-
- <div class="flexDiv">
- <div id="mynetwork" class="colm-s-3"></div>
+ <div class="flexDiv">
+ <div class="topocontainer">
+ <div class="back-btn">
+ <button nz-button nzType="primary" (click)="onBack()" [disabled]="isdisabled">Back</button>
+ </div>
+ <div id="mynetwork" class="colm-s-3"></div>
+ </div>
<div class="colm-s-4"><div id="nodeDetails"></div></div>
</div>
</div>
\ No newline at end of file
#subscriptionType, #serviceInstance {
width: 250px;
- }
\ No newline at end of file
+ }
+
+
\ No newline at end of file
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',
serviceInstanceList = [] as Array<any>;
selectedTopology:string = 'i18nTextDefine_serviceTopology';
- serviceTopologyList:any = [
- {
- topologyType:"i18nTextDefine_serviceTopology",
- },
- {
- topologyType:"i18nTextDefine_resourceTopology",
- }
- ];
baseUrl = baseUrl.baseUrl
title = 'Network';
public edges: Edge;
public network: Network;
public serviceList: any;
+ public vpnBindingList:any;
public tempNode: any;
public tempEdge: any;
public selectedNode: any;
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,
font: { color: '#eeeeee' }
},
edges: {
- color: 'lightgray'
+ color: 'lightgray',
},
interaction: {
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<any>(url, {}).subscribe((data) => {
+ this.http.get<any>(url, httpOptions).subscribe((data) => {
this.serviceSubscriptionList = data.subscriptions;
}, (err) => {
console.log(err);
//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<any>(url,{}).subscribe((data) => {
+ this.http.get<any>(url,httpOptions).subscribe((data) => {
this.serviceInstanceList = data.serviceInstanceList;
}, (err) => {
console.log(err);
getTopologyInfo (topo) {
this.selectedTopology = topo;
- this.getData();
- this.refreshData();
+ this.getData("");
+ this.refreshData("");
}
//Get subscription instanceID by calling With Subscription Type
ngOnInit() {
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 = '<div class="tblDiv">\
<nz-form-label class="lblCls">Node Information</nz-form-label>\
- <table class="table table-striped table-bordered">\
+ <table class="monitor-table">\
<thead>\
<tr>\
- <th class="clr-primary padding-2p">Specification</th>\
- <th class="clr-primary padding-2p">Value</th>\
+ <th class="monitor-table-td-th ">Specification</th>\
+ <th class="monitor-table-td-th ">Value</th>\
</tr>\
</thead>\
<tbody>\
if( entry[1] !== "null")
{
t1 += '<tr class="popup-table-row">\
- <td class="popup-table-header clr-primary padding-2p">'+ entry[0] + ':</td>\
- <td class="popup-table-data clr-primary padding-2p">'+ entry[1] + '</td>\
+ <td class="monitor-table-td-th ">'+ entry[0] + ':</td>\
+ <td class="monitor-table-td-th ">'+ entry[1] + '</td>\
</tr>\
';
}
});
}
- getData (){
+ getData (vpnid){
var comp = this;
- this.http.get<any>(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<any>(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) {
siteData:object = {};
buttonDisabled:boolean = false;
intervalData:any;
- // baseUrl:string = '/api/usecaseui-server/v1';
baseUrl = baseUrl.baseUrl
expandDataSet = [
{ rowIdx: 1, name: 'i18nTextDefine_serviceInformation', expand: true },
});
}
+
numberOnly(event): boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
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;
}
'Content-Type': 'application/json',
})
};
+
let url1 = this.baseUrl + '/uui-lcm/Sotnservices_unni';
this.http.post<any>(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<any>(url2, {}).subscribe((data) => {
+ this.http.get<any>(url2, httpOptions1).subscribe((data) => {
if (data.status == "1") {
clearInterval(comp.intervalData);
comp.message.success('Service Created');
"i18nTextDefine_topology": "拓扑结构",
"i18nTextDefine_colorAware": "色敏感",
"i18nTextDefine_couplingFlag": "耦合标签",
- "i18nTextDefine_networkTopology": "网络拓扑",
+ "i18nTextDefine_serviceTopology": "服务拓扑",
"i18nTextDefine_resourceTopology": "资源拓扑",
"i18nTextDefine_orderService":"订购服务",
"i18nTextDefine_monitorService":"监控服务",
"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",
}
}
}
+.back-btn{
+ text-align: right;
+ padding-bottom: 15px;
+}
+.topocontainer{
+ width: 100%;
+}
+
.taskmodel_list{
margin-bottom: 20px;
nz-table{
.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
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 = {
Code Review / usecase-ui.git / commitdiff
