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     debugger
 107     this.serviceList = [];
 108     this.vpnBindingList = [];
 109     this.isdisabled = true;
 110     this.serviceInstanceList = [];
 111     this.selectedServiceInstance="";
 112     let httpOptions = {
 113       headers: new HttpHeaders({
 114         'Content-Type':  'application/json'
 115       })
 116     };
 117     let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/" + subscriptionType;
 118     this.http.get<any>(url,httpOptions).subscribe((data) => {
 119       this.serviceInstanceList = data.serviceInstanceList;
 120     }, (err) => {
 121       console.log(err);
 122     });
 123   }
 124
 125   getTopologyInfo (topo) {
 126     this.selectedTopology = topo;
 127     this.getData("");
 128     this.refreshData("");
 129   }
 130   //Get subscription instanceID by calling With Subscription Type
 131   ngOnInit() {
 132       this.container = document.getElementById('mynetwork');
 133       this.getSubscribeTypes();
 134   }
 135
 136   refreshData(data) {
 137       const com = this
 138       var id ;
 139       var data1 = {
 140           nodes: data.nodes,
 141           edges: data.edges
 142       };
 143       var network = new Network(this.container, data1, this.networkOptions);
 144       network.on('doubleClick', function (selection) {
 145            var selectedvpnid = selection.nodes[0];
 146           com.getData(selectedvpnid)
 147           this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids
 148           var filteredNode = data1.nodes.filter(item => (
 149               item.id == this.selectedNodeIds
 150           ));
 151           var t1 = '<div class="tblDiv">\
 152           <nz-form-label class="lblCls">Node Information</nz-form-label>\
 153           <table class="monitor-table">\
 154               <thead>\
 155                   <tr>\
 156                       <th class="monitor-table-td-th ">Specification</th>\
 157                       <th class="monitor-table-td-th ">Value</th>\
 158                   </tr>\
 159               </thead>\
 160               <tbody>\
 161           ';
 162           Object.entries(filteredNode[0].dataNode).forEach(entry => {
 163               if( entry[1] !== "null")
 164               {
 165                   t1 += '<tr class="popup-table-row">\
 166                       <td class="monitor-table-td-th  ">'+ entry[0] + ':</td>\
 167                       <td class="monitor-table-td-th   ">'+ entry[1] + '</td>\
 168                   </tr>\
 169                   ';
 170               }
 171           });
 172           t1 += '</tbody>\
 173           </table>\
 174           </div>\
 175           ';
 176           document.getElementById('nodeDetails').innerHTML = t1;
 177       });
 178       network.on("afterDrawing", function (this) {
 179           network.fit();
 180       });
 181   }
 182
 183   getData (vpnid){
 184     var comp = this;
 185     let url = "";
 186     if(vpnid != "" ) {
 187       if(this.vpnBindingList.length > 0) {
 188           this.refreshData(this.vpnBindingList)
 189         } else {
 190         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;
 191       }
 192     } else {
 193       if(this.serviceList.length > 0 && vpnid == "") {
 194         this.refreshData(this.serviceList);
 195       } else {
 196         url = this.baseUrl+'/uui-lcm/Sotnservices/serviceTopology/service/service-subscriptions/service-subscription/'+this.selectedSubscriptionType.toLowerCase()+'/service-instances/service-instance/'+this.selectedServiceInstance;
 197       }
 198     }
 199     let httpOptions = {
 200       headers: new HttpHeaders({
 201         'Content-Type':  'application/json'
 202       })
 203     };
 204     this.http.get<any>(url, httpOptions).subscribe((data) => {
 205       if(vpnid == "") {
 206         this.serviceList = data;
 207       } else {
 208         this.vpnBindingList = data;
 209         this.isdisabled = false;
 210     }
 211     comp.refreshData(data);
 212   }, (err) => {
 213         console.log(err);
 214     });
 215   }
 216
 217   // Getting sitedata Based On Type and ID
 218   getSelectedsubscriptionInfo() {
 219       this.getData("");
 220       if (this.intervalData) {
 221           clearInterval(this.intervalData);
 222       }
 223   }
 224
 225
 226   ngOnDestroy() {
 227       console.log('clear interval');
 228       if (this.intervalData) {
 229           clearInterval(this.intervalData);
 230       }
 231
 232   }
 233
 234   ngOnDelete() {
 235       console.log('clear interval');
 236       if (this.intervalData) {
 237           clearInterval(this.intervalData);
 238       }
 239   }
 240
 241 }