X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fstats%2Fstats.component.ts;h=b966230400910aae90532794f3f92eb1138c872b;hb=4f8259dcd4597a7c96285907bd33941d44ac456a;hp=973996921f74ddfd6bb82156ea4068c50932f11a;hpb=1379dce23d47c42d169ed13a337bbee827714830;p=portal%2Fric-dashboard.git diff --git a/webapp-frontend/src/app/stats/stats.component.ts b/webapp-frontend/src/app/stats/stats.component.ts index 97399692..b9662304 100644 --- a/webapp-frontend/src/app/stats/stats.component.ts +++ b/webapp-frontend/src/app/stats/stats.component.ts @@ -2,7 +2,7 @@ * ========================LICENSE_START================================= * O-RAN-SC * %% - * Copyright (C) 2019 AT&T Intellectual Property and Nokia + * Copyright (C) 2019 AT&T Intellectual Property * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,12 +20,10 @@ import { Component, OnInit, ViewChildren, QueryList } from '@angular/core'; import { BaseChartDirective } from 'ng2-charts/ng2-charts'; import { StatsService } from '../services/stats/stats.service'; -import { MatSlideToggleChange } from "@angular/material/slide-toggle"; import { HttpClient } from '@angular/common/http'; -import { HttpHeaders } from "@angular/common/http"; -import { Observable } from "rxjs"; -import { HttpErrorResponse } from "@angular/common/http"; import { map } from 'rxjs/operators'; +import { DashboardSuccessTransport } from '../interfaces/dashboard.types'; +import { DomSanitizer, SafeUrl, SafeResourceUrl } from '@angular/platform-browser'; @Component({ selector: 'rd-stats', @@ -40,6 +38,8 @@ export class StatsComponent implements OnInit { checked = false; load; delay; + metricsUrlAc : SafeResourceUrl; + metricsUrlMc : SafeResourceUrl; public latencyChartColors: Array = [ { // blue @@ -68,7 +68,7 @@ export class StatsComponent implements OnInit { // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin) suggestedMin: 0, // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax) -// suggestedMax: 1000 + // suggestedMax: 1000 }, scaleLabel: { display: true, @@ -118,7 +118,7 @@ export class StatsComponent implements OnInit { // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin) suggestedMin: 0, // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax) -// suggestedMax: 1000 + // suggestedMax: 1000 }, scaleLabel: { display: true, @@ -168,7 +168,7 @@ export class StatsComponent implements OnInit { // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin) suggestedMin: 0, // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax) -// suggestedMax: 1000 + // suggestedMax: 1000 }, scaleLabel: { display: true, @@ -191,12 +191,14 @@ export class StatsComponent implements OnInit { ]; public x = 11; - public y = 11; - public z = 11; public loop = true; + public sliderLoadMax = Number(this.service.loadMax) || 0; + + public sliderDelayMax = Number(this.service.delayMax) || 0; + latencyClickData() { // this.latencyChartData = [{data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, // Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, @@ -238,8 +240,8 @@ export class StatsComponent implements OnInit { this.loadChartLabels.shift(); child.datasets[0].data.shift(); - //const loadData = this.service.getLoad(); - //child.datasets[0].data.push(this.service.load); + // const loadData = this.service.getLoad(); + // child.datasets[0].data.push(this.service.load); child.datasets[0].data.push(metricsv['load']); this.loadChartLabels.push('' + this.x++); } @@ -247,8 +249,8 @@ export class StatsComponent implements OnInit { this.latencyChartLabels.shift(); child.datasets[0].data.shift(); - //const loadData = this.service.getLoad(); - //child.datasets[0].data.push(this.service.load); + // const loadData = this.service.getLoad(); + // child.datasets[0].data.push(this.service.load); child.datasets[0].data.push(metricsv['latency']); this.latencyChartLabels.push('' + this.x++); } @@ -256,8 +258,8 @@ export class StatsComponent implements OnInit { this.latencyChartLabels.shift(); child.datasets[0].data.shift(); - //const loadData = this.service.getLoad(); - //child.datasets[0].data.push(this.service.load); + // const loadData = this.service.getLoad(); + // child.datasets[0].data.push(this.service.load); child.datasets[0].data.push(metricsv['ricload']); this.latencyChartLabels.push('' + this.x++); } @@ -290,13 +292,9 @@ export class StatsComponent implements OnInit { }); this.cpuChartLabels = [...this.cpuChartLabels, label]; - console.log(this.cpuChartLabels); - console.log(this.cpuChartData); + // console.log(this.cpuChartLabels); + // console.log(this.cpuChartData); } - - public sliderLoadMax = Number(this.service.loadMax) || 0; - - public sliderDelayMax = Number(this.service.delayMax) || 0; formatLabel(value: number | null) { if (!value) { @@ -310,25 +308,29 @@ export class StatsComponent implements OnInit { return value; } - constructor(private service: StatsService, private httpClient: HttpClient) { + constructor(private service: StatsService, private httpClient: HttpClient, private sanitize: DomSanitizer) { this.sliderLoadMax = Number(this.service.loadMax) || 0; - this.sliderDelayMax = Number(this.service.delayMax) || 0; - console.log('this.sliderLoadMax: ' + this.sliderLoadMax); - console.log('this.sliderDelayMax: ' + this.sliderDelayMax); + // console.log('this.sliderLoadMax: ' + this.sliderLoadMax); + // console.log('this.sliderDelayMax: ' + this.sliderDelayMax); } ngOnInit() { this.fetchLoad().subscribe(loadv => { - console.log('loadv: ' + loadv); - this.checked = loadv; - }); + // console.log('loadv: ' + loadv); + this.checked = loadv; + }); this.fetchDelay().subscribe(delayv => { - console.log('delayv: ' + delayv); + // console.log('delayv: ' + delayv); this.delay = delayv; }); this.fetchMetrics().subscribe(metricsv => { - console.log('metricsv.load: ' + metricsv['load']); - + // console.log('metricsv.load: ' + metricsv['load']); + }); + this.service.getAppMetricsUrl('AC').subscribe((res:DashboardSuccessTransport) => { + this.metricsUrlAc = this.sanitize.bypassSecurityTrustResourceUrl(res.data); + }); + this.service.getAppMetricsUrl('MC').subscribe((res:DashboardSuccessTransport) => { + this.metricsUrlMc = this.sanitize.bypassSecurityTrustResourceUrl(res.data); }); } @@ -337,12 +339,12 @@ export class StatsComponent implements OnInit { if (this.timeLeft > 0) { this.timeLeft--; this.fetchMetrics().subscribe(metricsv => { - console.log('metricsv.load: ' + metricsv['latency']); - console.log('metricsv.load: ' + metricsv['load']); - console.log('metricsv.load: ' + metricsv['ricload']); + // console.log('metricsv.load: ' + metricsv['latency']); + // console.log('metricsv.load: ' + metricsv['load']); + // console.log('metricsv.load: ' + metricsv['ricload']); this.loopLoadData(metricsv); }); - + } else { this.timeLeft = 60; } @@ -352,45 +354,35 @@ export class StatsComponent implements OnInit { pauseLoadTimer() { clearInterval(this.interval); } - + fetchMetrics() { return this.httpClient.get(this.service.hostURL + this.service.metricsPath, this.service.httpOptions).pipe(map(res => { - console.log(res); - console.log(res['load']); return res; })); } fetchDelay() { return this.httpClient.get(this.service.hostURL + this.service.delayPath, this.service.httpOptions).pipe(map(res => { - console.log(res); - console.log(res['delay']); const delayv = res['delay']; - console.log(delayv); this.delay = delayv; return this.delay; })); } - + saveDelay() { - console.log(this.delay); this.service.putDelay(this.delay); } - + fetchLoad() { return this.httpClient.get(this.service.hostURL + this.service.loadPath, this.service.httpOptions).pipe(map(res => { - console.log(res); - console.log(res['load']); const loadv = res['load']; - console.log(loadv); this.load = loadv; return this.load; })); - + } - + saveLoad() { - console.log(this.load); this.service.putLoad(this.load); }