gerrit.onap Code Review - usecase-ui.git/blob

   1 import { Component, OnInit } from '@angular/core';
   2 import { Network, Node, Edge } from 'vis';
   3 import { HttpClient, HttpHeaders } from '@angular/common/http';
   4 import { Observable } from 'rxjs/Observable';
   5 import { baseUrl } from '../../../../datainterface';
   6 import { getLocaleDateFormat } from '@angular/common';
   7 @Component({
   8   selector: 'app-monitor-service',
   9   templateUrl: './monitor-service.component.html',
  10   styleUrls: ['./monitor-service.component.less']
  11 })
  12 export class MonitorServiceComponent implements OnInit {
  13
  14   selectedSubscriptionType: string = "";
  15   serviceSubscriptionList = [] as Array<any>;
  16   selectedServiceInstance: string = "" ;
  17   serviceInstanceList = [] as Array<any>;
  18
  19   selectedTopology:string = 'i18nTextDefine_serviceTopology';
  20   baseUrl = baseUrl.baseUrl
  21
  22   title = 'Network';
  23     public nodes: Node;
  24     public edges: Edge;
  25     public network: Network;
  26     public serviceList: any;
  27     public vpnBindingList:any;
  28     public tempNode: any;
  29     public tempEdge: any;
  30     public selectedNode: any;
  31     public selectedNodeIds: any;
  32     public x: any;
  33     public abc = [];
  34     container: any;
  35     isdisabled:boolean = true;
  36     serviceTopologyList:any = [
  37       {
  38         topologyType:"i18nTextDefine_serviceTopology",
  39       },
  40       {
  41         topologyType:"i18nTextDefine_resourceTopology",
  42       }
  43     ];
  44
  45
  46     networkOptions = {
  47       layout: {
  48           randomSeed: 15
  49       },
  50       nodes: {
  51           borderWidth: 13,
  52           size: 30,
  53           color: {
  54               border: '#54bd55',
  55               background: '#666666'
  56           },
  57           font: { color: '#eeeeee' }
  58       },
  59       edges: {
  60           color: 'lightgray',
  61       },
  62
  63       interaction: {
  64           tooltipDelay: 200,
  65           hideEdgesOnDrag: true,
  66           navigationButtons: false,
  67           keyboard: true,
  68           hover: true
  69       },
  70     };
  71
  72   constructor(private http: HttpClient) { }
  73
  74   intervalData: any;
  75   returnResponse: boolean = true;
  76
  77   onBack(){
  78      if(this.serviceList.length > 0) {
  79       this.refreshData("");
  80      } else {
  81        this.getData("");
  82      }
  83      this.isdisabled = true;
  84   };
  85
  86    //Get SubscriptionType
  87    getSubscribeTypes() {
  88     this.serviceList = [];
  89     this.vpnBindingList = [];
  90     this.isdisabled = true;
  91     let httpOptions = {
  92       headers: new HttpHeaders({
  93         'Content-Type':  'application/json'
  94       })
  95     };
  96     let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions";
  97     this.http.get<any>(url, httpOptions).subscribe((data) => {
  98       this.serviceSubscriptionList = data.subscriptions;
  99     }, (err) => {
 100       console.log(err);
 101     });
 102   }
 103
 104   //Get subscription instanceID by calling With Subscription Type
 105   getServiceInstanceList(subscriptionType) {
 106     this.serviceList = [];
 107     this.vpnBindingList = [];
 108     this.isdisabled = true;
 109     this.serviceInstanceList = [];
 110     this.selectedServiceInstance="";
 111     let httpOptions = {
 112       headers: new HttpHeaders({
 113         'Content-Type':  'application/json'
 114       })
 115     };
 116     let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/" + subscriptionType;
 117     this.http.get<any>(url,httpOptions).subscribe((data) => {
 118       this.serviceInstanceList = data.serviceInstanceList;
 119     }, (err) => {
 120       console.log(err);
 121     });
 122   }
 123
 124   getTopologyInfo (topo) {
 125     this.selectedTopology = topo;
 126     this.getData("");
 127     this.refreshData("");
 128   }
 129   //Get subscription instanceID by calling With Subscription Type
 130   ngOnInit() {
 131       this.container = document.getElementById('mynetwork');
 132       this.getSubscribeTypes();
 133   }
 134
 135   refreshData(data) {
 136       const com = this
 137       var id ;
 138       var data1 = {
 139           nodes: data.nodes,
 140           edges: data.edges
 141       };
 142       var network = new Network(this.container, data1, this.networkOptions);
 143       network.on('doubleClick', function (selection) {
 144            var selectedvpnid = selection.nodes[0];
 145           com.getData(selectedvpnid)
 146           this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids
 147           var filteredNode = data1.nodes.filter(item => (
 148               item.id == this.selectedNodeIds
 149           ));
 150           var t1 = '<div class="tblDiv">\
 151           <nz-form-label class="lblCls">Node Information</nz-form-label>\
 152           <table class="monitor-table">\
 153               <thead>\
 154                   <tr>\
 155                       <th class="monitor-table-td-th ">Specification</th>\
 156                       <th class="monitor-table-td-th ">Value</th>\
 157                   </tr>\
 158               </thead>\
 159               <tbody>\
 160           ';
 161           Object.entries(filteredNode[0].dataNode).forEach(entry => {
 162               if( entry[1] !== "null")
 163               {
 164                   t1 += '<tr class="popup-table-row">\
 165                       <td class="monitor-table-td-th  ">'+ entry[0] + ':</td>\
 166                       <td class="monitor-table-td-th   ">'+ entry[1] + '</td>\
 167                   </tr>\
 168                   ';
 169               }
 170           });
 171           t1 += '</tbody>\
 172           </table>\
 173           </div>\
 174           ';
 175           document.getElementById('nodeDetails').innerHTML = t1;
 176       });
 177       network.on("afterDrawing", function (this) {
 178           network.fit();
 179       });
 180   }
 181
 182   getData (vpnid){
 183     var comp = this;
 184     let url = "";
 185     if(vpnid != "" ) {
 186       if(this.vpnBindingList.length > 0) {
 187           this.refreshData(this.vpnBindingList)
 188         } else {
 189         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;
 190       }
 191     } else {
 192       if(this.serviceList.length > 0 && vpnid == "") {
 193         this.refreshData(this.serviceList);
 194       } else {
 195         url = this.baseUrl+'/uui-lcm/Sotnservices/serviceTopology/service/service-subscriptions/service-subscription/'+this.selectedSubscriptionType.toLowerCase()+'/service-instances/service-instance/'+this.selectedServiceInstance;
 196       }
 197     }
 198     let httpOptions = {
 199       headers: new HttpHeaders({
 200         'Content-Type':  'application/json'
 201       })
 202     };
 203     this.http.get<any>(url, httpOptions).subscribe((data) => {
 204       if(vpnid == "") {
 205         this.serviceList = data;
 206       } else {
 207         this.vpnBindingList = data;
 208         this.isdisabled = false;
 209     }
 210     comp.refreshData(data);
 211   }, (err) => {
 212         console.log(err);
 213     });
 214   }
 215
 216   // Getting sitedata Based On Type and ID
 217   getSelectedsubscriptionInfo() {
 218       this.getData("");
 219       if (this.intervalData) {
 220           clearInterval(this.intervalData);
 221       }
 222   }
 223
 224
 225   ngOnDestroy() {
 226       console.log('clear interval');
 227       if (this.intervalData) {
 228           clearInterval(this.intervalData);
 229       }
 230
 231   }
 232
 233   ngOnDelete() {
 234       console.log('clear interval');
 235       if (this.intervalData) {
 236           clearInterval(this.intervalData);
 237       }
 238   }
 239
 240 }