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