Skip to content

Commit ecbb148

Browse files
aosousaaosousa
committed
Various fixes and improvements for the issue#1697 pull request
1 parent 8986336 commit ecbb148

12 files changed

+116
-79
lines changed

‎src/app/modules/core/core.module.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {NgxsModule} from '@ngxs/store';
1212
import {NgxsLoggerPluginModule} from '@ngxs/logger-plugin';
1313
import {NgxsFormPluginModule} from '@ngxs/form-plugin';
1414
import {ToastrModule} from 'ngx-toastr';
15-
import {ChartsModule} from 'ng2-charts';
1615

1716
import {MaterialModule} from '../../shared/material.module';
1817
import {PageNotFoundComponent} from './pages/page-not-found/page-not-found.component';
@@ -83,10 +82,7 @@ import {BootProgressService, BootProgressServiceFactory} from './services/boot-p
8382
debounceTime: 50
8483
}),
8584
NgProgressHttpModule,
86-
NgProgressRouterModule,
87-
88-
// ng2-charts module
89-
ChartsModule
85+
NgProgressRouterModule
9086
],
9187
exports: [
9288
CommonModule,

‎src/app/modules/dashboard/pages/dashboard/components/cpu-stats/cpu-stats.component.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
<mat-card>
22
<mat-card-content>
3-
<h2>CPU</h2>
4-
<hr style="border-color: #2196F3;">
5-
<canvas baseChart width="350" height="200" style="margin-top: 1em;"
3+
<h3>CPU</h3>
4+
5+
<div class="blue-border">&nbsp;</div>
6+
7+
<mat-progress-spinner mode="indeterminate" strokeWidth="2" *ngIf="loading$ | async"></mat-progress-spinner>
8+
9+
<canvas baseChart width="350" height="200"
10+
[style.display]="(loading$ | async) ? 'none' : ''"
11+
style="margin-top: 1em;"
612
[datasets]="cpuLineChartDataSet"
713
[labels]="cpuLineChartLabels"
814
[options]="cpuLineChartOptions"

‎src/app/modules/dashboard/pages/dashboard/components/cpu-stats/cpu-stats.component.spec.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import {RouterTestingModule} from '@angular/router/testing';
33
import {HttpClientTestingModule} from '@angular/common/http/testing';
44
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
55
import {ToastrModule} from 'ngx-toastr';
6+
import {ChartsModule} from 'ng2-charts';
67

7-
import {CpuStatsComponent} from './cpu-stats.component';
88
import {MaterialModule} from '../../../../../../shared/material.module';
99

10+
import {CpuStatsComponent} from './cpu-stats.component';
11+
1012
describe('CpuStatsComponent', () => {
1113
let component: CpuStatsComponent;
1214
let fixture: ComponentFixture<CpuStatsComponent>;
@@ -18,7 +20,8 @@ describe('CpuStatsComponent', () => {
1820
MaterialModule,
1921
HttpClientTestingModule,
2022
RouterTestingModule,
21-
ToastrModule.forRoot()
23+
ToastrModule.forRoot(),
24+
ChartsModule
2225
],
2326
declarations: [CpuStatsComponent]
2427
});

‎src/app/modules/dashboard/pages/dashboard/components/cpu-stats/cpu-stats.component.ts

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import {Component, OnInit, OnDestroy, ViewChild} from '@angular/core';
22
import {Color, BaseChartDirective} from 'ng2-charts';
3-
import {timer, BehaviorSubject, Subject, Subscription} from 'rxjs';
4-
import {takeUntil} from 'rxjs/operators';
3+
import {BehaviorSubject, Subject, throwError, timer} from 'rxjs';
4+
import {catchError, mergeMap, map, takeUntil, tap} from 'rxjs/operators';
55
import {ToastrService} from 'ngx-toastr';
66

7+
import * as chartJs from 'chart.js';
8+
79
import {DashboardMetricsService} from '../../../../services/dashboard-metrics.service';
810

911
@Component({
@@ -12,7 +14,7 @@ import {DashboardMetricsService} from '../../../../services/dashboard-metrics.se
1214
styleUrls: ['./cpu-stats.component.scss']
1315
})
1416
export class CpuStatsComponent implements OnInit, OnDestroy {
15-
@ViewChild(BaseChartDirective, {static: false})
17+
@ViewChild(BaseChartDirective, {static: true})
1618
cpuChart: BaseChartDirective;
1719

1820
loading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
@@ -59,7 +61,7 @@ export class CpuStatsComponent implements OnInit, OnDestroy {
5961
];
6062

6163
public cpuLineChartLegend = false;
62-
public cpuLineChartType = 'line';
64+
public cpuLineChartType: chartJs.ChartType = 'line';
6365

6466
public cpuLineChartDataSet: Array<any> = [
6567
{
@@ -69,19 +71,18 @@ export class CpuStatsComponent implements OnInit, OnDestroy {
6971
}
7072
];
7173

72-
private subscription: Subscription;
7374
private destroy$: Subject<any> = new Subject();
7475

7576
constructor(private service: DashboardMetricsService,
7677
private notify: ToastrService) {
7778
}
7879

79-
getCpuData() {
80-
this.service.getCpuUsage()
81-
.pipe(takeUntil(this.destroy$))
82-
.subscribe(
83-
(response: any) => {
84-
let cpuUsage = response.measurements[0].value * 100
80+
ngOnInit() {
81+
timer(0, 2000)
82+
.pipe(
83+
mergeMap(() => this.service.getCpuUsage().pipe(takeUntil(this.destroy$))),
84+
map((response: any) => {
85+
let cpuUsage = response.measurements[0].value * 100;
8586

8687
const _lineChartData = this.cpuLineChartData;
8788
const _lineChartLabels = this.cpuLineChartLabels;
@@ -99,17 +100,19 @@ export class CpuStatsComponent implements OnInit, OnDestroy {
99100
this.cpuLineChartData = _lineChartData;
100101
this.cpuLineChartLabels = _lineChartLabels;
101102
this.cpuChart.chart.update();
102-
},
103-
(e) => this.notify.error('Failed to complete request')
104-
);
105-
}
106-
107-
ngOnInit() {
108-
this.subscription = timer(0, 2000).subscribe(val => this.getCpuData());
103+
}),
104+
catchError((err: any) => {
105+
this.notify.error('Failed to complete request');
106+
console.error(err);
107+
return throwError(err);
108+
}),
109+
tap(() => this.loading$.next(false)),
110+
takeUntil(this.destroy$)
111+
)
112+
.subscribe();
109113
}
110114

111115
ngOnDestroy() {
112-
this.subscription.unsubscribe();
113116
this.destroy$.next();
114117
this.destroy$.complete();
115118
}

‎src/app/modules/dashboard/pages/dashboard/components/jvm-live-threads-stats/jvm-live-threads-stats.component.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
<mat-card>
22
<mat-card-content>
3-
<h2>JVM Live Threads</h2>
4-
<hr style="border-color: #2196F3;">
5-
<canvas baseChart width="350" height="200" style="margin-top: 1em;"
3+
<h3>JVM Live Threads</h3>
4+
5+
<div class="blue-border">&nbsp;</div>
6+
7+
<mat-progress-spinner mode="indeterminate" strokeWidth="2" *ngIf="loading$ | async"></mat-progress-spinner>
8+
9+
<canvas baseChart width="350" height="200"
10+
[style.display]="(loading$ | async) ? 'none' : ''"
11+
style="margin-top: 1em;"
612
[datasets]="jvmLiveThreadsLineChartDataSet"
713
[labels]="jvmLiveThreadsLineChartLabels"
814
[options]="jvmLiveThreadLineChartOptions"

‎src/app/modules/dashboard/pages/dashboard/components/jvm-live-threads-stats/jvm-live-threads-stats.component.spec.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {RouterTestingModule} from '@angular/router/testing';
33
import {HttpClientTestingModule} from '@angular/common/http/testing';
44
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
5+
import {ChartsModule} from 'ng2-charts';
56

6-
import {JvmLiveThreadsStatsComponent} from './jvm-live-threads-stats.component';
77
import {MaterialModule} from '../../../../../../shared/material.module';
88

9+
import {JvmLiveThreadsStatsComponent} from './jvm-live-threads-stats.component';
10+
911
describe('JvmLiveThreadsStatsComponent', () => {
1012
let component: JvmLiveThreadsStatsComponent;
1113
let fixture: ComponentFixture<JvmLiveThreadsStatsComponent>;
@@ -16,7 +18,8 @@ describe('JvmLiveThreadsStatsComponent', () => {
1618
NoopAnimationsModule,
1719
MaterialModule,
1820
HttpClientTestingModule,
19-
RouterTestingModule
21+
RouterTestingModule,
22+
ChartsModule
2023
],
2124
declarations: [JvmLiveThreadsStatsComponent]
2225
});

‎src/app/modules/dashboard/pages/dashboard/components/jvm-live-threads-stats/jvm-live-threads-stats.component.ts

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import {Component, OnInit, OnDestroy, ViewChild} from '@angular/core';
22
import {Color, BaseChartDirective} from 'ng2-charts';
3-
import {timer, BehaviorSubject, Subject, Subscription} from 'rxjs';
4-
import {takeUntil} from 'rxjs/operators';
3+
import {BehaviorSubject, Subject, throwError, timer} from 'rxjs';
4+
import {catchError, mergeMap, map, takeUntil, tap} from 'rxjs/operators';
5+
6+
import * as chartJs from 'chart.js';
57

68
import {DashboardMetricsService} from '../../../../services/dashboard-metrics.service';
79

@@ -11,7 +13,7 @@ import {DashboardMetricsService} from '../../../../services/dashboard-metrics.se
1113
styleUrls: ['./jvm-live-threads-stats.component.scss']
1214
})
1315
export class JvmLiveThreadsStatsComponent implements OnInit, OnDestroy {
14-
@ViewChild(BaseChartDirective, {static: false})
16+
@ViewChild(BaseChartDirective, {static: true})
1517
jvmLiveThreadChart: BaseChartDirective;
1618

1719
loading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
@@ -57,7 +59,7 @@ export class JvmLiveThreadsStatsComponent implements OnInit, OnDestroy {
5759
];
5860

5961
public jvmLineChartLegend = false;
60-
public jvmLineChartType = 'line';
62+
public jvmLineChartType: chartJs.ChartType = 'line';
6163

6264
public jvmLiveThreadsLineChartDataSet: Array<any> = [
6365
{
@@ -67,17 +69,16 @@ export class JvmLiveThreadsStatsComponent implements OnInit, OnDestroy {
6769
}
6870
];
6971

70-
private jvmLiveThreadsSubscription: Subscription;
7172
private destroy$: Subject<any> = new Subject();
7273

7374
constructor(private service: DashboardMetricsService) {
7475
}
7576

76-
getJvmLiveThreadsData() {
77-
this.service.getJvmLiveThreads()
78-
.pipe(takeUntil(this.destroy$))
79-
.subscribe(
80-
(response: any) => {
77+
ngOnInit() {
78+
timer(0, 2000)
79+
.pipe(
80+
mergeMap(() => this.service.getJvmLiveThreads().pipe(takeUntil(this.destroy$))),
81+
map((response: any) => {
8182
let jvmLiveThreads = response.measurements[0].value;
8283

8384
const _jvmLiveThreadsLineChartData = this.jvmLiveThreadsLineChartData;
@@ -95,18 +96,19 @@ export class JvmLiveThreadsStatsComponent implements OnInit, OnDestroy {
9596

9697
this.jvmLiveThreadsLineChartData = _jvmLiveThreadsLineChartData;
9798
this.jvmLiveThreadsLineChartLabels = _jvmLiveThreadsLineChartLabels;
98-
9999
this.jvmLiveThreadChart.chart.update();
100-
}
101-
);
102-
}
103-
104-
ngOnInit() {
105-
this.jvmLiveThreadsSubscription = timer(0, 2000).subscribe(val => this.getJvmLiveThreadsData());
100+
}),
101+
catchError((err: any) => {
102+
console.error(err);
103+
return throwError(err);
104+
}),
105+
tap(() => this.loading$.next(false)),
106+
takeUntil(this.destroy$)
107+
)
108+
.subscribe();
106109
}
107110

108111
ngOnDestroy() {
109-
this.jvmLiveThreadsSubscription.unsubscribe();
110112
this.destroy$.next();
111113
this.destroy$.complete();
112114
}

‎src/app/modules/dashboard/pages/dashboard/components/jvm-memory-stats/jvm-memory-stats.component.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
<mat-card style="margin-right: 1em;">
22
<mat-card-content>
3-
<h2>JVM Memory</h2>
4-
<hr style="border-color: #2196F3;">
5-
<canvas baseChart width="350" height="200" style="margin-top: 1em;"
3+
<h3>JVM Memory (GB)</h3>
4+
5+
<div class="blue-border">&nbsp;</div>
6+
7+
<mat-progress-spinner mode="indeterminate" strokeWidth="2" *ngIf="loading$ | async"></mat-progress-spinner>
8+
9+
<canvas baseChart width="350" height="200"
10+
[style.display]="(loading$ | async) ? 'none' : ''"
11+
style="margin-top: 1em;"
612
[datasets]="jvmMemoryLineChartDataSet"
713
[labels]="jvmMemoryLineChartLabels"
814
[options]="jvmLineChartOptions"

‎src/app/modules/dashboard/pages/dashboard/components/jvm-memory-stats/jvm-memory-stats.component.spec.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {RouterTestingModule} from '@angular/router/testing';
33
import {HttpClientTestingModule} from '@angular/common/http/testing';
44
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
5+
import {ChartsModule} from 'ng2-charts';
56

6-
import {JvmMemoryStatsComponent} from './jvm-memory-stats.component';
77
import {MaterialModule} from '../../../../../../shared/material.module';
88

9+
import {JvmMemoryStatsComponent} from './jvm-memory-stats.component';
10+
911
describe('JvmMemoryStatsComponent', () => {
1012
let component: JvmMemoryStatsComponent;
1113
let fixture: ComponentFixture<JvmMemoryStatsComponent>;
@@ -16,7 +18,8 @@ describe('JvmMemoryStatsComponent', () => {
1618
NoopAnimationsModule,
1719
MaterialModule,
1820
HttpClientTestingModule,
19-
RouterTestingModule
21+
RouterTestingModule,
22+
ChartsModule
2023
],
2124
declarations: [JvmMemoryStatsComponent]
2225
});

‎src/app/modules/dashboard/pages/dashboard/components/jvm-memory-stats/jvm-memory-stats.component.ts

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import {Component, OnInit, OnDestroy, ViewChild} from '@angular/core';
22
import {Color, BaseChartDirective} from 'ng2-charts';
3-
import {timer, BehaviorSubject, Subject, Subscription} from 'rxjs';
4-
import {takeUntil} from 'rxjs/operators';
3+
import {BehaviorSubject, Subject, throwError, timer} from 'rxjs';
4+
import {catchError, mergeMap, map, takeUntil, tap} from 'rxjs/operators';
5+
6+
import * as chartJs from 'chart.js';
57

68
import {DashboardMetricsService} from '../../../../services/dashboard-metrics.service';
79

@@ -11,7 +13,7 @@ import {DashboardMetricsService} from '../../../../services/dashboard-metrics.se
1113
styleUrls: ['./jvm-memory-stats.component.scss']
1214
})
1315
export class JvmMemoryStatsComponent implements OnInit, OnDestroy {
14-
@ViewChild(BaseChartDirective, {static: false})
16+
@ViewChild(BaseChartDirective, {static: true})
1517
jvmMemoryChart: BaseChartDirective;
1618

1719
loading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
@@ -57,7 +59,7 @@ export class JvmMemoryStatsComponent implements OnInit, OnDestroy {
5759
];
5860

5961
public jvmLineChartLegend = false;
60-
public jvmLineChartType = 'line';
62+
public jvmLineChartType: chartJs.ChartType = 'line';
6163

6264
public jvmMemoryLineChartDataSet: Array<any> = [
6365
{
@@ -67,17 +69,16 @@ export class JvmMemoryStatsComponent implements OnInit, OnDestroy {
6769
}
6870
];
6971

70-
private jvmMemorySubscription: Subscription;
7172
private destroy$: Subject<any> = new Subject();
7273

7374
constructor(private service: DashboardMetricsService) {
7475
}
7576

76-
getJvmMemoryData() {
77-
this.service.getJvmUsedMemory()
78-
.pipe(takeUntil(this.destroy$))
79-
.subscribe(
80-
(response: any) => {
77+
ngOnInit() {
78+
timer(0, 2000)
79+
.pipe(
80+
mergeMap(() => this.service.getJvmUsedMemory().pipe(takeUntil(this.destroy$))),
81+
map((response: any) => {
8182
// conversion from bytes to gigabytes
8283
let jvmUsedMemory = response.measurements[0].value / 1024 / 1024 / 1024;
8384

@@ -97,16 +98,18 @@ export class JvmMemoryStatsComponent implements OnInit, OnDestroy {
9798
this.jvmMemoryLineChartData = _jvmMemoryLineChartData;
9899
this.jvmMemoryLineChartLabels = _jvmMemoryLineChartLabels;
99100
this.jvmMemoryChart.chart.update();
100-
}
101-
);
102-
}
103-
104-
ngOnInit() {
105-
this.jvmMemorySubscription = timer(0, 2000).subscribe(val => this.getJvmMemoryData());
101+
}),
102+
catchError((err: any) => {
103+
console.error(err);
104+
return throwError(err);
105+
}),
106+
tap(() => this.loading$.next(false)),
107+
takeUntil(this.destroy$)
108+
)
109+
.subscribe();
106110
}
107111

108112
ngOnDestroy() {
109-
this.jvmMemorySubscription.unsubscribe();
110113
this.destroy$.next();
111114
this.destroy$.complete();
112115
}

0 commit comments

Comments
 (0)