2 * ========================LICENSE_START=================================
5 * Copyright (C) 2019 AT&T Intellectual Property and Nokia
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
11 * http://www.apache.org/licenses/LICENSE-2.0
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===================================
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 { HttpClient } from '@angular/common/http';
24 import { map } from 'rxjs/operators';
28 templateUrl: './stats.component.html',
29 styleUrls: ['./stats.component.scss']
31 export class StatsComponent implements OnInit {
33 @ViewChildren(BaseChartDirective) charts: QueryList<BaseChartDirective>;
40 public latencyChartColors: Array<any> = [
42 backgroundColor: 'rgba(197, 239, 247, 0.2)',
43 borderColor: 'lightblue',
44 pointBackgroundColor: 'lightblue',
45 pointBorderColor: '#fff',
46 pointHoverBackgroundColor: '#fff',
47 pointHoverBorderColor: 'rgba(148,159,177,0.8)'
50 public latencyChartOptions = {
51 scaleShowVerticalLines: true,
58 animationDuration: 1 // duration of animations when hovering an item
60 responsiveAnimationDuration: 500,
64 // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
66 // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
77 labelString: 'time (last 10 seconds)'
82 public latencyChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
83 public latencyChartType = 'line';
84 public latencyChartLegend = true;
85 public latencyChartData = [
86 { data: [65, 59, 80, 81, 56, 55, 40, 20, 12, 34], label: 'Latency' },
89 public loadChartColors: Array<any> = [
92 backgroundColor: 'rgba(200, 247, 197, 0.2)',
93 borderColor: 'lightgreen',
94 pointBackgroundColor: 'lightgreen',
95 pointBorderColor: '#fff',
96 pointHoverBackgroundColor: '#fff',
97 pointHoverBorderColor: 'rgba(0,200,0,0.5)'
100 public loadChartOptions = {
101 scaleShowVerticalLines: false,
108 animationDuration: 1 // duration of animations when hovering an item
110 responsiveAnimationDuration: 500,
114 // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
116 // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
117 // suggestedMax: 1000
121 labelString: '# of requests'
127 labelString: 'time (last 10 seconds)'
132 public loadChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
133 public loadChartType = 'line';
134 public loadChartLegend = true;
135 public loadChartData = [
136 { data: [28, 48, 40, 19, 86, 77, 90, 20, 12, 34], label: 'Load' }
139 public cpuChartColors: Array<any> = [
142 backgroundColor: 'rgba(241, 169, 160, 0.2)',
143 borderColor: 'brown',
144 pointBackgroundColor: 'brown',
145 pointBorderColor: '#fff',
146 pointHoverBackgroundColor: '#fff',
147 pointHoverBorderColor: 'rgba(0,200,0,0.5)'
150 public cpuChartOptions = {
151 scaleShowVerticalLines: false,
158 animationDuration: 1 // duration of animations when hovering an item
160 responsiveAnimationDuration: 500,
164 // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
166 // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
167 // suggestedMax: 1000
171 labelString: '# of requests'
177 labelString: 'time (last 10 seconds)'
182 public cpuChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
183 public cpuChartType = 'line';
184 public cpuChartLegend = true;
185 public cpuChartData = [
186 { data: [15, 29, 30, 31, 53, 52, 41, 70, 32, 14], label: 'RICLoad' }
194 public sliderLoadMax = Number(this.service.loadMax) || 0;
196 public sliderDelayMax = Number(this.service.delayMax) || 0;
199 // this.latencyChartData = [{data: [Math.random() * 100, Math.random() * 100, Math.random() * 100,
200 // Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100,
201 // Math.random() * 100, Math.random() * 100], label: 'Latency'}];
202 this.charts.forEach((child) => {
203 if (child.datasets[0].label === 'Latency') {
204 this.latencyChartLabels.shift();
205 child.datasets[0].data.shift();
207 const latencyData = this.service.getLatencyMetrics();
208 child.datasets[0].data.push(latencyData);
209 this.latencyChartLabels.push('' + this.x++);
211 // once new data is computed and datasets are updated, tell our baseChart the datasets changed
214 currentValue: child.datasets,
217 isFirstChange: () => true
226 this.startLoadTimer();
229 this.pauseLoadTimer();
233 loopLoadData(metricsv: any) {
234 this.charts.forEach((child) => {
235 if (child.datasets[0].label === 'Load') {
236 this.loadChartLabels.shift();
237 child.datasets[0].data.shift();
239 // const loadData = this.service.getLoad();
240 // child.datasets[0].data.push(this.service.load);
241 child.datasets[0].data.push(metricsv['load']);
242 this.loadChartLabels.push('' + this.x++);
244 if (child.datasets[0].label === 'Latency') {
245 this.latencyChartLabels.shift();
246 child.datasets[0].data.shift();
248 // const loadData = this.service.getLoad();
249 // child.datasets[0].data.push(this.service.load);
250 child.datasets[0].data.push(metricsv['latency']);
251 this.latencyChartLabels.push('' + this.x++);
253 if (child.datasets[0].label === 'RICLoad') {
254 this.latencyChartLabels.shift();
255 child.datasets[0].data.shift();
257 // const loadData = this.service.getLoad();
258 // child.datasets[0].data.push(this.service.load);
259 child.datasets[0].data.push(metricsv['ricload']);
260 this.latencyChartLabels.push('' + this.x++);
262 // once new data is computed and datasets are updated, tell our baseChart the datasets changed
265 currentValue: child.datasets,
268 isFirstChange: () => true
275 // this.cpuChartData = [{data: [Math.random() * 100, Math.random() * 100, Math.random() * 100,
276 // Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100,
277 // Math.random() * 100, Math.random() * 100], label: 'CPU'}];
278 const cpuData = this.service.getLatencyMetrics();
279 this.newDataPoint([cpuData], this.z++);
282 newDataPoint(dataArr = [100], label) {
284 this.cpuChartData.forEach((dataset, index) => {
285 this.cpuChartData[index] = Object.assign({}, this.cpuChartData[index], {
286 data: [...this.cpuChartData[index].data, dataArr[index]]
290 this.cpuChartLabels = [...this.cpuChartLabels, label];
291 // console.log(this.cpuChartLabels);
292 // console.log(this.cpuChartData);
295 formatLabel(value: number | null) {
301 return Math.round(value / 1000);
307 constructor(private service: StatsService, private httpClient: HttpClient) {
308 this.sliderLoadMax = Number(this.service.loadMax) || 0;
309 this.sliderDelayMax = Number(this.service.delayMax) || 0;
310 // console.log('this.sliderLoadMax: ' + this.sliderLoadMax);
311 // console.log('this.sliderDelayMax: ' + this.sliderDelayMax);
314 this.fetchLoad().subscribe(loadv => {
315 // console.log('loadv: ' + loadv);
316 this.checked = loadv;
318 this.fetchDelay().subscribe(delayv => {
319 // console.log('delayv: ' + delayv);
322 this.fetchMetrics().subscribe(metricsv => {
323 // console.log('metricsv.load: ' + metricsv['load']);
328 this.interval = setInterval(() => {
329 if (this.timeLeft > 0) {
331 this.fetchMetrics().subscribe(metricsv => {
332 // console.log('metricsv.load: ' + metricsv['latency']);
333 // console.log('metricsv.load: ' + metricsv['load']);
334 // console.log('metricsv.load: ' + metricsv['ricload']);
335 this.loopLoadData(metricsv);
345 clearInterval(this.interval);
349 return this.httpClient.get<any[]>(this.service.hostURL + this.service.metricsPath, this.service.httpOptions).pipe(map(res => {
351 // console.log(res['load']);
357 return this.httpClient.get<any[]>(this.service.hostURL + this.service.delayPath, this.service.httpOptions).pipe(map(res => {
359 // console.log(res['delay']);
360 const delayv = res['delay'];
361 // console.log(delayv);
368 // console.log(this.delay);
369 this.service.putDelay(this.delay);
373 return this.httpClient.get<any[]>(this.service.hostURL + this.service.loadPath, this.service.httpOptions).pipe(map(res => {
375 // console.log(res['load']);
376 const loadv = res['load'];
377 // console.log(loadv);
385 // console.log(this.load);
386 this.service.putLoad(this.load);