Merge pull request strongbox#36 from aosousa/issue-1697

Issue 1697 - Create a dashboard which shows live graphs of the current cpu, ram and some jvm stats

Author: steve-todorov

package.json

@@ -44,12 +44,14 @@
     "antlr4": "^4.7.1",
     "antlr4-autosuggest": "0.0.28",
     "antlr4ts": "^0.4.1-alpha.0",
+    "chart.js": "^2.9.3",
     "class-transformer": "~0.2.3",
     "core-js": "^2.6.3",
     "dayjs": "~1.8.15",
     "event-source-polyfill": "^1.0.9",
     "fonts-raleway": "0.0.4",
     "ionicons": "^4.4.8",
+    "ng2-charts": "^2.3.0",
     "ngx-toastr": "~10.0.4",
     "ngx-virtual-scroller": "^3.0.3",
     "open-sans-fontface": "^1.4.0",

src/app/app.routing.module.ts

@@ -62,6 +62,10 @@ const routes: Routes = [
         path: 'admin/logging',
         loadChildren: './modules/logging-management/logging-management.module#LoggingManagementModule'
     },
+    {
+        path: 'admin/dashboard',
+        loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule)
+    },
     {path: '**', component: PageNotFoundComponent}
 ];
 

src/app/modules/dashboard/dashboard-routing.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+
+import {DashboardComponent} from './pages/dashboard/dashboard.component';
+import {AuthGuard} from '../core/auth/auth.guard';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: DashboardComponent,
+        canActivate: [AuthGuard]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class DashboardRoutingModule {
+
+}

src/app/modules/dashboard/dashboard.module.spec.ts

@@ -0,0 +1,13 @@
+import { DashboardModule } from './dashboard.module';
+
+describe('Module: DashboardModule', () => {
+    let dashboardModule: DashboardModule;
+
+    beforeEach(() => {
+        dashboardModule = new DashboardModule();
+    });
+
+    it('should create an instance', () => {
+        expect(dashboardModule).toBeTruthy();
+    });
+});

src/app/modules/dashboard/dashboard.module.ts

@@ -0,0 +1,36 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ChartsModule} from 'ng2-charts';
+
+import {DashboardComponent} from './pages/dashboard/dashboard.component';
+import {DashboardRoutingModule} from './dashboard-routing.module';
+import {DashboardMetricsService} from './services/dashboard-metrics.service';
+import {MaterialModule} from '../../shared/material.module';
+import {LayoutModule} from '../../shared/layout/layout.module';
+import {CpuStatsComponent} from './pages/dashboard/components/cpu-stats/cpu-stats.component';
+import {JvmMemoryStatsComponent} from './pages/dashboard/components/jvm-memory-stats/jvm-memory-stats.component';
+import {JvmLiveThreadsStatsComponent} from './pages/dashboard/components/jvm-live-threads-stats/jvm-live-threads-stats.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+
+        LayoutModule,
+        MaterialModule,
+
+        ChartsModule,
+
+        DashboardRoutingModule
+    ],
+    declarations: [
+        DashboardComponent,
+        CpuStatsComponent,
+        JvmMemoryStatsComponent,
+        JvmLiveThreadsStatsComponent
+    ],
+    providers: [
+        DashboardMetricsService
+    ]
+})
+export class DashboardModule {
+}

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

@@ -0,0 +1,20 @@
+<mat-card>
+    <mat-card-content>
+        <h3>CPU</h3>
+
+        <div class="blue-border">&nbsp;</div>
+
+        <mat-progress-spinner mode="indeterminate" strokeWidth="2" *ngIf="loading$ | async"></mat-progress-spinner>
+
+        <canvas baseChart width="350" height="200"
+            [style.display]="(loading$ | async) ? 'none' : ''"
+            style="margin-top: 1em;"
+            [datasets]="cpuLineChartDataSet"
+            [labels]="cpuLineChartLabels"
+            [options]="cpuLineChartOptions"
+            [colors]="cpuLineChartColors"
+            [legend]="cpuLineChartLegend"
+            [chartType]="cpuLineChartType">
+        </canvas>
+    </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,38 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {ToastrModule} from 'ngx-toastr';
+import {ChartsModule} from 'ng2-charts';
+
+import {MaterialModule} from '../../../../../../shared/material.module';
+
+import {CpuStatsComponent} from './cpu-stats.component';
+
+describe('CpuStatsComponent', () => {
+    let component: CpuStatsComponent;
+    let fixture: ComponentFixture<CpuStatsComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NoopAnimationsModule,
+                MaterialModule,
+                HttpClientTestingModule,
+                RouterTestingModule,
+                ToastrModule.forRoot(),
+                ChartsModule
+            ],
+            declarations: [CpuStatsComponent]
+        });
+
+        fixture = TestBed.createComponent(CpuStatsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        expect(component).toBeTruthy();
+    });
+
+});

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

@@ -0,0 +1,119 @@
+import {Component, OnInit, OnDestroy, ViewChild} from '@angular/core';
+import {Color, BaseChartDirective} from 'ng2-charts';
+import {BehaviorSubject, Subject, throwError, timer} from 'rxjs';
+import {catchError, mergeMap, map, takeUntil, tap} from 'rxjs/operators';
+import {ToastrService} from 'ngx-toastr';
+
+import * as chartJs from 'chart.js';
+
+import {DashboardMetricsService} from '../../../../services/dashboard-metrics.service';
+
+@Component({
+    selector: 'app-cpu-stats-component',
+    templateUrl: './cpu-stats.component.html',
+    styleUrls: ['./cpu-stats.component.scss']
+})
+export class CpuStatsComponent implements OnInit, OnDestroy {
+    @ViewChild(BaseChartDirective, {static: true})
+    cpuChart: BaseChartDirective;
+
+    loading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+
+    public cpuLineChartData: Array<any> = [0];
+    public cpuLineChartLabels: Array<any> = [''];
+
+    public cpuLineChartOptions: any = {
+        responsive: true,
+        scales: {
+            xAxes: [
+                {
+                    gridLines: {
+                        display: false
+                    }
+                }
+            ],
+            yAxes: [
+                {
+                    id: 'y-0',
+                    position: 'left',
+                    ticks: {
+                        beginAtZero: true,
+                        max: 100,
+                        min: 0
+                    },
+                    gridLines: {
+                        display: false
+                    }
+                }
+            ]
+        }
+    };
+
+    public cpuLineChartColors: Color[] = [
+        {
+            backgroundColor: 'rgba(0,0,0,0)',
+            borderColor: '#2196F3',
+            pointBackgroundColor: 'rgba(148,159,177,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+        }
+    ];
+
+    public cpuLineChartLegend = false;
+    public cpuLineChartType: chartJs.ChartType = 'line';
+
+    public cpuLineChartDataSet: Array<any> = [
+        {
+            data: this.cpuLineChartData,
+            label: 'CPU Usage (%)',
+            radius: 0
+        }
+    ];
+
+    private destroy$: Subject<any> = new Subject();
+
+    constructor(private service: DashboardMetricsService,
+                private notify: ToastrService) {
+    }
+
+    ngOnInit() {
+        timer(0, 2000)
+            .pipe(
+                mergeMap(() => this.service.getCpuUsage().pipe(takeUntil(this.destroy$))),
+                map((response: any) => {
+                    let cpuUsage = response.measurements[0].value * 100;
+
+                    const _lineChartData = this.cpuLineChartData;
+                    const _lineChartLabels = this.cpuLineChartLabels;
+
+                    if (_lineChartData.length >= 30) {
+                        _lineChartData.shift();
+                        _lineChartLabels.shift();
+                    }
+
+                    _lineChartData.push(cpuUsage);
+
+                    // This is just to be able to render the new data added to the chart
+                    _lineChartLabels.push('');
+
+                    this.cpuLineChartData = _lineChartData;
+                    this.cpuLineChartLabels = _lineChartLabels;
+                    this.cpuChart.chart.update();
+                }),
+                catchError((err: any) => {
+                    this.notify.error('Failed to complete request');
+                    console.error(err);
+                    return throwError(err);
+                }),
+                tap(() => this.loading$.next(false)),
+                takeUntil(this.destroy$)
+            )
+            .subscribe();
+    }
+
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}

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

@@ -0,0 +1,20 @@
+<mat-card>
+    <mat-card-content>
+        <h3>JVM Live Threads</h3>
+
+        <div class="blue-border">&nbsp;</div>
+
+        <mat-progress-spinner mode="indeterminate" strokeWidth="2" *ngIf="loading$ | async"></mat-progress-spinner>
+
+        <canvas baseChart width="350" height="200"
+            [style.display]="(loading$ | async) ? 'none' : ''"
+            style="margin-top: 1em;"
+            [datasets]="jvmLiveThreadsLineChartDataSet"
+            [labels]="jvmLiveThreadsLineChartLabels"
+            [options]="jvmLiveThreadLineChartOptions"
+            [colors]="jvmLineChartColors"
+            [legend]="jvmLineChartLegend"
+            [chartType]="jvmLineChartType">
+        </canvas>
+    </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,36 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {ChartsModule} from 'ng2-charts';
+
+import {MaterialModule} from '../../../../../../shared/material.module';
+
+import {JvmLiveThreadsStatsComponent} from './jvm-live-threads-stats.component';
+
+describe('JvmLiveThreadsStatsComponent', () => {
+    let component: JvmLiveThreadsStatsComponent;
+    let fixture: ComponentFixture<JvmLiveThreadsStatsComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NoopAnimationsModule,
+                MaterialModule,
+                HttpClientTestingModule,
+                RouterTestingModule,
+                ChartsModule
+            ],
+            declarations: [JvmLiveThreadsStatsComponent]
+        });
+
+        fixture = TestBed.createComponent(JvmLiveThreadsStatsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        expect(component).toBeTruthy();
+    });
+
+});