webapp-frontend/src/app/stats/stats.component.ts

   1 /*-
   2  * ========================LICENSE_START=================================
   3  * ORAN-OSC
   4  * %%
   5  * Copyright (C) 2019 AT&T Intellectual Property and Nokia
   6  * %%
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ========================LICENSE_END===================================
  19  */
  20 import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
  21 import { BaseChartDirective } from 'ng2-charts/ng2-charts';
  22 import { StatsService } from '../services/stats/stats.service';
  23 import { MatSlideToggleChange } from "@angular/material/slide-toggle";
  24 import { HttpClient } from '@angular/common/http';
  25 import { HttpHeaders } from "@angular/common/http";
  26 import { Observable } from "rxjs";
  27 import { HttpErrorResponse } from "@angular/common/http";
  28 import { map } from 'rxjs/operators';
  29
  30 @Component({
  31     selector: 'app-stats',
  32     templateUrl: './stats.component.html',
  33     styleUrls: ['./stats.component.scss']
  34 })
  35 export class StatsComponent implements OnInit {
  36
  37     @ViewChildren(BaseChartDirective) charts: QueryList<BaseChartDirective>;
  38     timeLeft = 60;
  39     interval;
  40     checked = false;
  41     load;
  42     delay;
  43
  44     public latencyChartColors: Array<any> = [
  45         { // blue
  46             backgroundColor: 'rgba(197, 239, 247, 0.2)',
  47             borderColor: 'lightblue',
  48             pointBackgroundColor: 'lightblue',
  49             pointBorderColor: '#fff',
  50             pointHoverBackgroundColor: '#fff',
  51             pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  52         }
  53     ];
  54     public latencyChartOptions = {
  55         scaleShowVerticalLines: true,
  56         responsive: true,
  57         animation: {
  58             duration: 800 * 1.5,
  59             easing: 'linear'
  60         },
  61         hover: {
  62             animationDuration: 1 // duration of animations when hovering an item
  63         },
  64         responsiveAnimationDuration: 500,
  65         scales: {
  66             yAxes: [{
  67                 ticks: {
  68                     // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
  69                     suggestedMin: 0,
  70                     // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
  71 //                    suggestedMax: 1000
  72                 },
  73                 scaleLabel: {
  74                     display: true,
  75                     labelString: 'msecs'
  76                 }
  77             }],
  78             xAxes: [{
  79                 scaleLabel: {
  80                     display: true,
  81                     labelString: 'time (last 10 seconds)'
  82                 }
  83             }]
  84         },
  85     };
  86     public latencyChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  87     public latencyChartType = 'line';
  88     public latencyChartLegend = true;
  89     public latencyChartData = [
  90         { data: [65, 59, 80, 81, 56, 55, 40, 20, 12, 34], label: 'Latency' },
  91     ];
  92
  93     public loadChartColors: Array<any> = [
  94
  95         { // green
  96             backgroundColor: 'rgba(200, 247, 197, 0.2)',
  97             borderColor: 'lightgreen',
  98             pointBackgroundColor: 'lightgreen',
  99             pointBorderColor: '#fff',
 100             pointHoverBackgroundColor: '#fff',
 101             pointHoverBorderColor: 'rgba(0,200,0,0.5)'
 102         }
 103     ];
 104     public loadChartOptions = {
 105         scaleShowVerticalLines: false,
 106         responsive: true,
 107         animation: {
 108             duration: 800 * 1.5,
 109             easing: 'linear'
 110         },
 111         hover: {
 112             animationDuration: 1 // duration of animations when hovering an item
 113         },
 114         responsiveAnimationDuration: 500,
 115         scales: {
 116             yAxes: [{
 117                 ticks: {
 118                     // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
 119                     suggestedMin: 0,
 120                     // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
 121 //                    suggestedMax: 1000
 122                 },
 123                 scaleLabel: {
 124                     display: true,
 125                     labelString: '# of requests'
 126                 }
 127             }],
 128             xAxes: [{
 129                 scaleLabel: {
 130                     display: true,
 131                     labelString: 'time (last 10 seconds)'
 132                 }
 133             }]
 134         },
 135     };
 136     public loadChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
 137     public loadChartType = 'line';
 138     public loadChartLegend = true;
 139     public loadChartData = [
 140         { data: [28, 48, 40, 19, 86, 77, 90, 20, 12, 34], label: 'Load' }
 141     ];
 142
 143     public cpuChartColors: Array<any> = [
 144
 145         { // red
 146             backgroundColor: 'rgba(241, 169, 160, 0.2)',
 147             borderColor: 'brown',
 148             pointBackgroundColor: 'brown',
 149             pointBorderColor: '#fff',
 150             pointHoverBackgroundColor: '#fff',
 151             pointHoverBorderColor: 'rgba(0,200,0,0.5)'
 152         }
 153     ];
 154     public cpuChartOptions = {
 155         scaleShowVerticalLines: false,
 156         responsive: true,
 157         animation: {
 158             duration: 800 * 1.5,
 159             easing: 'linear'
 160         },
 161         hover: {
 162             animationDuration: 1 // duration of animations when hovering an item
 163         },
 164         responsiveAnimationDuration: 500,
 165         scales: {
 166             yAxes: [{
 167                 ticks: {
 168                     // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
 169                     suggestedMin: 0,
 170                     // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
 171 //                    suggestedMax: 1000
 172                 },
 173                 scaleLabel: {
 174                     display: true,
 175                     labelString: '# of requests'
 176                 }
 177             }],
 178             xAxes: [{
 179                 scaleLabel: {
 180                     display: true,
 181                     labelString: 'time (last 10 seconds)'
 182                 }
 183             }]
 184         },
 185     };
 186     public cpuChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
 187     public cpuChartType = 'line';
 188     public cpuChartLegend = true;
 189     public cpuChartData = [
 190         { data: [15, 29, 30, 31, 53, 52, 41, 70, 32, 14], label: 'RICLoad' }
 191     ];
 192
 193     public x = 11;
 194
 195     public y = 11;
 196
 197     public z = 11;
 198     public loop = true;
 199
 200     latencyClickData() {
 201         // this.latencyChartData = [{data: [Math.random() * 100, Math.random() * 100, Math.random() * 100,
 202         // Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100,
 203         // Math.random() * 100, Math.random() * 100], label: 'Latency'}];
 204         this.charts.forEach((child) => {
 205             if (child.datasets[0].label === 'Latency') {
 206                 this.latencyChartLabels.shift();
 207                 child.datasets[0].data.shift();
 208
 209                 const latencyData = this.service.getLatencyMetrics();
 210                 child.datasets[0].data.push(latencyData);
 211                 this.latencyChartLabels.push('' + this.x++);
 212             }
 213             // once new data is computed and datasets are updated, tell our baseChart the datasets changed
 214             child.ngOnChanges({
 215                 datasets: {
 216                     currentValue: child.datasets,
 217                     previousValue: null,
 218                     firstChange: true,
 219                     isFirstChange: () => true
 220                 }
 221             });
 222         });
 223     }
 224
 225     loadClickData() {
 226         if (this.loop) {
 227             this.loop = false;
 228             this.startLoadTimer();
 229         } else {
 230             this.loop = true;
 231             this.pauseLoadTimer();
 232         }
 233     }
 234
 235     loopLoadData(metricsv: any) {
 236         this.charts.forEach((child) => {
 237             if (child.datasets[0].label === 'Load') {
 238                 this.loadChartLabels.shift();
 239                 child.datasets[0].data.shift();
 240
 241                 //const loadData = this.service.getLoad();
 242                 //child.datasets[0].data.push(this.service.load);
 243                 child.datasets[0].data.push(metricsv['load']);
 244                 this.loadChartLabels.push('' + this.x++);
 245             }
 246             if (child.datasets[0].label === 'Latency') {
 247                 this.latencyChartLabels.shift();
 248                 child.datasets[0].data.shift();
 249
 250                 //const loadData = this.service.getLoad();
 251                 //child.datasets[0].data.push(this.service.load);
 252                 child.datasets[0].data.push(metricsv['latency']);
 253                 this.latencyChartLabels.push('' + this.x++);
 254             }
 255             if (child.datasets[0].label === 'RICLoad') {
 256                 this.latencyChartLabels.shift();
 257                 child.datasets[0].data.shift();
 258
 259                 //const loadData = this.service.getLoad();
 260                 //child.datasets[0].data.push(this.service.load);
 261                 child.datasets[0].data.push(metricsv['ricload']);
 262                 this.latencyChartLabels.push('' + this.x++);
 263             }
 264             // once new data is computed and datasets are updated, tell our baseChart the datasets changed
 265             child.ngOnChanges({
 266                 datasets: {
 267                     currentValue: child.datasets,
 268                     previousValue: null,
 269                     firstChange: true,
 270                     isFirstChange: () => true
 271                 }
 272             });
 273         });
 274     }
 275
 276     cpuClickData() {
 277         // this.cpuChartData = [{data: [Math.random() * 100, Math.random() * 100, Math.random() * 100,
 278         // Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100,
 279         // Math.random() * 100, Math.random() * 100], label: 'CPU'}];
 280         const cpuData = this.service.getLatencyMetrics();
 281         this.newDataPoint([cpuData], this.z++);
 282     }
 283
 284     newDataPoint(dataArr = [100], label) {
 285
 286         this.cpuChartData.forEach((dataset, index) => {
 287             this.cpuChartData[index] = Object.assign({}, this.cpuChartData[index], {
 288                 data: [...this.cpuChartData[index].data, dataArr[index]]
 289             });
 290         });
 291
 292         this.cpuChartLabels = [...this.cpuChartLabels, label];
 293         console.log(this.cpuChartLabels);
 294         console.log(this.cpuChartData);
 295     }
 296
 297     public sliderLoadMax = Number(this.service.loadMax) || 0;
 298
 299     public sliderDelayMax = Number(this.service.delayMax) || 0;
 300
 301     formatLabel(value: number | null) {
 302         if (!value) {
 303             return 0;
 304         }
 305
 306         if (value >= 1000) {
 307             return Math.round(value / 1000);
 308         }
 309
 310         return value;
 311     }
 312
 313     constructor(private service: StatsService, private httpClient: HttpClient) {
 314         this.sliderLoadMax = Number(this.service.loadMax) || 0;
 315
 316         this.sliderDelayMax = Number(this.service.delayMax) || 0;
 317         console.log('this.sliderLoadMax: ' + this.sliderLoadMax);
 318         console.log('this.sliderDelayMax: ' + this.sliderDelayMax);
 319     }
 320     ngOnInit() {
 321         this.fetchLoad().subscribe(loadv => {
 322           console.log('loadv: ' + loadv);
 323           this.checked = loadv;
 324       });
 325         this.fetchDelay().subscribe(delayv => {
 326             console.log('delayv: ' + delayv);
 327             this.delay = delayv;
 328         });
 329         this.fetchMetrics().subscribe(metricsv => {
 330             console.log('metricsv.load: ' + metricsv['load']);
 331
 332         });
 333     }
 334
 335     startLoadTimer() {
 336         this.interval = setInterval(() => {
 337             if (this.timeLeft > 0) {
 338                 this.timeLeft--;
 339                 this.fetchMetrics().subscribe(metricsv => {
 340                     console.log('metricsv.load: ' + metricsv['latency']);
 341                     console.log('metricsv.load: ' + metricsv['load']);
 342                     console.log('metricsv.load: ' + metricsv['ricload']);
 343                     this.loopLoadData(metricsv);
 344                 });
 345
 346             } else {
 347                 this.timeLeft = 60;
 348             }
 349         }, 1000);
 350     }
 351
 352     pauseLoadTimer() {
 353         clearInterval(this.interval);
 354     }
 355
 356     fetchMetrics() {
 357         return this.httpClient.get<any[]>(this.service.hostURL + this.service.metricsPath, this.service.httpOptions).pipe(map(res => {
 358             console.log(res);
 359             console.log(res['load']);
 360             return res;
 361         }));
 362     }
 363
 364     fetchDelay() {
 365         return this.httpClient.get<any[]>(this.service.hostURL + this.service.delayPath, this.service.httpOptions).pipe(map(res => {
 366             console.log(res);
 367             console.log(res['delay']);
 368             const delayv = res['delay'];
 369             console.log(delayv);
 370             this.delay = delayv;
 371             return this.delay;
 372         }));
 373     }
 374
 375     saveDelay() {
 376         console.log(this.delay);
 377         this.service.putDelay(this.delay);
 378     }
 379
 380     fetchLoad() {
 381         return this.httpClient.get<any[]>(this.service.hostURL + this.service.loadPath, this.service.httpOptions).pipe(map(res => {
 382             console.log(res);
 383             console.log(res['load']);
 384             const loadv = res['load'];
 385             console.log(loadv);
 386             this.load = loadv;
 387             return this.load;
 388         }));
 389
 390     }
 391
 392     saveLoad() {
 393         console.log(this.load);
 394         this.service.putLoad(this.load);
 395     }
 396
 397 }