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

   1 import { Component, OnInit } from '@angular/core';
   2 import { Network, DataSet, Node, Edge, IdType } from 'vis';
   3
   4 @Component({
   5   selector: 'app-monitor-service',
   6   templateUrl: './monitor-service.component.html',
   7   styleUrls: ['./monitor-service.component.less']
   8 })
   9 export class MonitorServiceComponent implements OnInit {
  10
  11   selectedSubscriptionType:string = "SOTN";
  12   serviceSubscriptionList:any = [{
  13     serviceType:"SOTN"
  14   }];
  15   selectedServiceInstance:string = "SiteService-5011";
  16   serviceInstanceList:any = [
  17     {
  18       serviceInstance: "SiteService-5011",
  19       serviceInstancename: "SiteService-5011"
  20     },
  21     {
  22       serviceInstance: "ISAAC-IS0333",
  23       serviceInstancename: "ISAAC-IS0333"
  24     }
  25   ];
  26   selectedTopology:string = 'Network Topology';
  27   serviceTopologyList:any = [
  28     {
  29       topologyType:"Network Topology"
  30     },
  31     {
  32       topologyType:"Resource Topology"
  33     }
  34   ];
  35
  36   title = 'Network';
  37     public nodes: Node;
  38     public edges: Edge;
  39     public network: Network;
  40     public serviceList: any;
  41     public tempNode: any;
  42     public tempEdge: any;
  43     public selectedNode: any;
  44     public selectedNodeIds: any;
  45     public x: any;
  46     public abc = [];
  47     container: any;
  48     networkOptions = {
  49       layout: {
  50           randomSeed: 15
  51       },
  52       nodes: {
  53           borderWidth: 13,
  54           size: 30,
  55           color: {
  56               border: '#54bd55',
  57               background: '#666666'
  58           },
  59           font: { color: '#eeeeee' }
  60       },
  61       edges: {
  62           color: 'lightgray'
  63       },
  64
  65       interaction: {
  66           tooltipDelay: 200,
  67           hideEdgesOnDrag: true,
  68           navigationButtons: false,
  69           keyboard: true,
  70           hover: true
  71       },
  72     };
  73
  74     node1:any = {
  75       "nodes": [
  76         {
  77           "id": "1",
  78           "shape": "circularImage",
  79           "image": "./assets/images/edge.png",
  80           "label": "Node",
  81           "color": "Green",
  82           "dataNode": {
  83             "ethtSvcName": "sotn-021-VS-monitored",
  84             "colorAware": "true",
  85             "cbs": "100",
  86             "couplingFlag": "true",
  87             "ebs": "evpl",
  88             "cir": "200000",
  89             "eir": "0"
  90           }
  91         },
  92         {
  93           "id": "2",
  94           "shape": "circularImage",
  95           "image": "./assets/images/logicallink.png",
  96           "label": "Logical Link",
  97           "color": "Green",
  98           "dataNode": {
  99             "ethtSvcName": "sotn-021-VS-monitored",
 100             "colorAware": "true",
 101             "cbs": "100",
 102             "couplingFlag": "true",
 103             "ebs": "evpl",
 104             "cir": "200000",
 105             "eir": "0"
 106           }
 107         },
 108         {
 109           "id": "3",
 110           "shape": "circularImage",
 111           "image": "./assets/images/edge.png",
 112           "label": "Node",
 113           "color": "Green",
 114           "dataNode": {
 115             "zipcode": "100095",
 116             "siteName": "hubtravel",
 117             "description": "desc",
 118             "location": "laptop-5",
 119             "cvlan": "100"
 120           }
 121         }
 122       ],
 123       "edges": [
 124         {
 125           "from": "1",
 126           "to": "2"
 127         },
 128         {
 129           "from": "2",
 130           "to": "3"
 131         }
 132       ]
 133     }
 134
 135   node2:any = {
 136     "nodes": [
 137       {
 138         "id": "1",
 139         "shape": "circularImage",
 140         "image": "./assets/images/tpoint.png",
 141         "label": "Termination Point",
 142         "color": "Green",
 143         "dataNode": {}
 144       },
 145       {
 146         "id": "2",
 147         "shape": "circularImage",
 148         "image": "./assets/images/edge.png",
 149         "label": "Node",
 150         "color": "Green",
 151         "dataNode": {
 152           "ethtSvcName": "sotn-021-VS-monitored",
 153           "colorAware": "true",
 154           "cbs": "100",
 155           "couplingFlag": "true",
 156           "ebs": "evpl",
 157           "cir": "200000",
 158           "eir": "0"
 159         }
 160       },
 161       {
 162         "id": "3",
 163         "shape": "circularImage",
 164         "image": "./assets/images/logicallink.png",
 165         "label": "Logical Link",
 166         "color": "Green",
 167         "dataNode": {
 168           "ethtSvcName": "sotn-021-VS-monitored",
 169           "colorAware": "true",
 170           "cbs": "100",
 171           "couplingFlag": "true",
 172           "ebs": "evpl",
 173           "cir": "200000",
 174           "eir": "0"
 175         }
 176       },
 177       {
 178         "id": "4",
 179         "shape": "circularImage",
 180         "image": "./assets/images/edge.png",
 181         "label": "Node",
 182         "color": "Green",
 183         "dataNode": {
 184           "zipcode": "100095",
 185           "siteName": "hubtravel",
 186           "description": "desc",
 187           "location": "laptop-5",
 188           "cvlan": "100"
 189         }
 190       },
 191       {
 192         "id": "5",
 193         "shape": "circularImage",
 194         "image": "./assets/images/tpoint.png",
 195         "label": "Termination Point",
 196         "color": "Green",
 197         "dataNode": {
 198           "accessltpid": "155",
 199           "siteName": "hubtravel",
 200           "description": "desc",
 201           "accessnodeid": "10.10.10.10",
 202           "cvlan": "100"
 203         }
 204       }
 205     ],
 206     "edges": [
 207       {
 208         "from": "1",
 209         "to": "2"
 210       },
 211       {
 212         "from": "2",
 213         "to": "3"
 214       },
 215       {
 216         "from": "3",
 217         "to": "4"
 218       },
 219       {
 220         "from": "4",
 221         "to": "5"
 222       }
 223     ]
 224   }
 225
 226   constructor() { }
 227
 228   intervalData: any;
 229   returnResponse: boolean = true;
 230
 231   //Get SubscriptionType
 232   getSubscribeTypes() {
 233       this.getTopologyInfo('Network Topology');
 234   }
 235
 236   getTopologyInfo (topo) {
 237     this.selectedTopology = topo;
 238     this.getData();
 239     this.refreshData();
 240   }
 241
 242   //Get subscription instanceID by calling With Subscription Type
 243   getServiceInstanceList(subscriptionType) {
 244           this.getSelectedsubscriptionInfo(subscriptionType);
 245   }
 246   ngOnInit() {
 247       this.container = document.getElementById('mynetwork');
 248       this.getSubscribeTypes();
 249   }
 250
 251   refreshData() {
 252
 253       var data1 = {
 254           nodes: this.serviceList.nodes,
 255           edges: this.serviceList.edges
 256       };
 257
 258       var network = new Network(this.container, data1, this.networkOptions);
 259
 260
 261       network.on('select', function (selection) {
 262           this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids
 263           var filteredNode = data1.nodes.filter(item => (
 264               item.id == this.selectedNodeIds
 265           ));
 266           var t1 = '<div class="tblDiv">\
 267           <nz-form-label class="lblCls">Node Information</nz-form-label>\
 268           <table class="table table-striped table-bordered">\
 269               <thead>\
 270                   <tr>\
 271                       <th class="clr-primary padding-2p">Specification</th>\
 272                       <th class="clr-primary padding-2p">Value</th>\
 273                   </tr>\
 274               </thead>\
 275               <tbody>\
 276           ';
 277           Object.entries(filteredNode[0].dataNode).forEach(entry => {
 278               if( entry[1] !== "null")
 279               {
 280                   t1 += '<tr class="popup-table-row">\
 281                       <td class="popup-table-header clr-primary padding-2p">'+ entry[0] + ':</td>\
 282                       <td class="popup-table-data  clr-primary padding-2p">'+ entry[1] + '</td>\
 283                   </tr>\
 284                   ';
 285               }
 286           });
 287           t1 += '</tbody>\
 288           </table>\
 289           </div>\
 290           ';
 291           document.getElementById('nodeDetails').innerHTML = t1;
 292       });
 293       network.on("afterDrawing", function (this) {
 294           network.fit();
 295       });
 296   }
 297
 298   getData ()
 299   {
 300     if (this.selectedTopology == 'Network Topology') {
 301       this.serviceList = this.node1;
 302     } else {
 303       this.serviceList = this.node2;
 304     }
 305   }
 306   // Getting sitedata Based On Type and ID
 307   getSelectedsubscriptionInfo(s) {
 308       this.getData();
 309       this.refreshData();
 310       if (this.intervalData) {
 311           clearInterval(this.intervalData);
 312       }
 313   }
 314
 315   ngOnDestroy() {
 316       console.log('clear interval');
 317       if (this.intervalData) {
 318           clearInterval(this.intervalData);
 319       }
 320
 321   }
 322
 323   ngOnDelete() {
 324       console.log('clear interval');
 325       if (this.intervalData) {
 326           clearInterval(this.intervalData);
 327       }
 328   }
 329
 330 }