X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fstats%2Fstats.component.ts;h=515d4ff3c7d93a1cfc0bfed84fc2e016e9d14b29;hb=6b79976523018d41b3643b15deeb6706ad4daa6e;hp=71bc69746fceb1a5b4244233ff1425f8318d7da3;hpb=e2cbc4d0304646febf7e2cbe0dccdf9840189222;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 71bc6974..515d4ff3 100644 --- a/webapp-frontend/src/app/stats/stats.component.ts +++ b/webapp-frontend/src/app/stats/stats.component.ts @@ -1,15 +1,15 @@ /*- * ========================LICENSE_START================================= - * ORAN-OSC + * O-RAN-SC * %% * Copyright (C) 2019 AT&T Intellectual Property and Nokia * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. @@ -20,15 +20,13 @@ 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: 'app-stats', + selector: 'rd-stats', templateUrl: './stats.component.html', styleUrls: ['./stats.component.scss'] }) @@ -40,6 +38,7 @@ export class StatsComponent implements OnInit { checked = false; load; delay; + metricsUrlAc : SafeResourceUrl; public latencyChartColors: Array = [ { // blue @@ -68,7 +67,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 +117,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 +167,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 +190,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 +239,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 +248,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 +257,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 +291,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 +307,26 @@ 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); }); } @@ -337,12 +335,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 +350,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); }