feat: enhance chart components with refresh service integration and async data handling

Author: mjabascal10

frontend/src/app/dashboard/dashboard-render/dashboard-render.component.html

@@ -4,11 +4,11 @@ <h5 class="card-title mb-0 label-header">{{dashboard.name}}
     </h5>
     <div class="header-elements d-flex justify-content-end align-items-center">
       <app-dashboard-filter-view [filters]="filters"></app-dashboard-filter-view>
+      <app-refresh-filter></app-refresh-filter>
       <app-elastic-filter-time [invertContent]="true"
                                [isEmitter]="true"
-                               class="ml-3"
                                container="body"></app-elastic-filter-time>
-      <button (click)="exportToPdf()" [disabled]="pdfExport || !visualizationRender || loadingVisualizations"
+      <button (click)="exportToPdf()" [disabled]="pdfExport || loadingVisualizations"
               class="btn utm-button utm-button-primary ml-2">
         <i [ngClass]="pdfExport?'icon-download10':'icon-file-pdf'" class="mr-1"></i>
         {{pdfExport ? 'Generating...' : 'Save to PDF'}}
@@ -17,21 +17,20 @@ <h5 class="card-title mb-0 label-header">{{dashboard.name}}
   </div>
 </div>
 <div class="w-100 h-100 mb-3">
-  <gridster *ngIf="layout.length>0 && !loadingVisualizations"
-            [options]="options" style="background-color: #f1f1f1;z-index: 0; margin-bottom: 15px">
+  <gridster [options]="options" style="background-color: #f1f1f1;z-index: 0; margin-bottom: 15px">
     <gridster-item #gridsterItem
-                   *ngFor="let item of layout; let index = index" [item]="item.grid"
+                   *ngFor="let item of layout$ | async; trackBy: trackByFn; let index = index" [item]="item.grid"
                    (mouseenter)="activeTimeGridster=item.visualization.id"
                    [ngStyle]="{'z-index':(activeTimeGridster===item.visualization.id?100:0)+''}">
-      <app-utm-viewer [building]="false"
-                      style="z-index: 10"
-                      [chart]="item.visualization.chartType"
-                      [chartId]="item.visualization.id"
-                      [height]="(gridsterItem.height-38)+'px'"
-                      [showTime]="timeEnable.includes(item.visualization.id)"
-                      [visualization]="item.visualization"
-                      [width]="gridsterItem.width+'px'">
-      </app-utm-viewer>
+                    <app-utm-viewer [building]="false"
+                                    style="z-index: 10"
+                                    [chart]="item.visualization.chartType"
+                                    [chartId]="item.visualization.id"
+                                    [height]="(gridsterItem.height-38)+'px'"
+                                    [showTime]="item.visualization.showTime"
+                                    [visualization]="item.visualization"
+                                    [width]="gridsterItem.width+'px'">
+                    </app-utm-viewer>
     </gridster-item>
   </gridster>
   <div style="height: 15px"></div>

frontend/src/app/dashboard/dashboard-render/dashboard-render.component.ts

@@ -1,8 +1,10 @@
-import {AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
 import {CompactType, GridsterConfig, GridsterItem, GridType} from 'angular-gridster2';
 import {UUID} from 'angular2-uuid';
+import {NgxSpinnerService} from 'ngx-spinner';
+import {Observable} from 'rxjs';
+import {map, tap} from 'rxjs/operators';
 import {IComponent} from '../../graphic-builder/dashboard-builder/shared/services/layout.service';
 import {rebuildVisualizationFilterTime} from '../../graphic-builder/shared/util/chart-filter/chart-filter.util';
 import {DashboardBehavior} from '../../shared/behaviors/dashboard.behavior';
@@ -11,20 +13,20 @@ import {UtmDashboardVisualizationType} from '../../shared/chart/types/dashboard/
 import {UtmDashboardType} from '../../shared/chart/types/dashboard/utm-dashboard.type';
 import {VisualizationType} from '../../shared/chart/types/visualization.type';
 import {ChartTypeEnum} from '../../shared/enums/chart-type.enum';
+import {ExportPdfService} from '../../shared/services/util/export-pdf.service';
+import {RefreshService} from '../../shared/services/util/refresh.service';
 import {DashboardFilterType} from '../../shared/types/filter/dashboard-filter.type';
 import {ElasticFilterType} from '../../shared/types/filter/elastic-filter.type';
 import {mergeParams, sanitizeFilters} from '../../shared/util/elastic-filter.util';
 import {filtersToStringParam} from '../../shared/util/query-params-to-filter.util';
 import {normalizeString} from '../../shared/util/string-util';
 import {RenderLayoutService} from '../shared/services/render-layout.service';
-import {UtmRenderVisualization} from '../shared/services/utm-render-visualization.service';
-import {ExportPdfService} from "../../shared/services/util/export-pdf.service";
-import {NgxSpinnerService} from "ngx-spinner";
 
 @Component({
   selector: 'app-dashboard-render',
   templateUrl: './dashboard-render.component.html',
-  styleUrls: ['./dashboard-render.component.scss']
+  styleUrls: ['./dashboard-render.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DashboardRenderComponent implements OnInit, OnDestroy, AfterViewInit {
   dashboardId: number;
@@ -59,25 +61,37 @@ export class DashboardRenderComponent implements OnInit, OnDestroy, AfterViewIni
     swap: false
   };
   filtersValues: ElasticFilterType[] = [];
-  timeEnable: number[] = [];
+  layout$: Observable<{ grid: GridsterItem, visualization: VisualizationType } []>;
 
   constructor(private activatedRoute: ActivatedRoute,
               private layoutService: RenderLayoutService,
               private cdr: ChangeDetectorRef,
-              private modalService: NgbModal,
               private dashboardBehavior: DashboardBehavior,
               private timeFilterBehavior: TimeFilterBehavior,
-              private utmRenderVisualization: UtmRenderVisualization,
               private exportPdfService: ExportPdfService,
-              private spinner: NgxSpinnerService) {
+              private spinner: NgxSpinnerService,
+              private refreshService: RefreshService,
+              private router: Router) {
   }
 
   ngOnInit() {
-    console.log('Init dashboard');
-
     document.body.classList.add('overflow-hidden');
     this.loadingVisualizations = true;
-    this.activatedRoute.params.subscribe(params => {
+    this.layout$ = this.activatedRoute.data
+      .pipe(
+        tap((visualizations) => {
+          this.dashboard = this.layoutService.dashboard;
+          this.filters = this.dashboard && this.dashboard.filters ? JSON.parse(this.dashboard.filters) : [];
+         /* if (this.dashboard.refreshTime) {
+            console.log(this.dashboard.refreshTime);
+            this.onRefreshTime(this.dashboard.refreshTime);
+          }*/
+          this.loadingVisualizations = false;
+        }),
+        map(data => data.response)
+    );
+
+    /*this.activatedRoute.params.subscribe(params => {
       this.dashboardId = params.id;
       if (this.dashboardId) {
         const request = {
@@ -105,14 +119,15 @@ export class DashboardRenderComponent implements OnInit, OnDestroy, AfterViewIni
           this.loadingVisualizations = false;
         });
       }
-    });
+    });*/
     this.dashboardBehavior.$filterDashboard.subscribe(dashboardFilter => {
       if (dashboardFilter) {
         mergeParams(dashboardFilter.filter, this.filtersValues).then(newFilters => {
           this.filtersValues = sanitizeFilters(newFilters);
         });
       }
     });
+
     this.timeFilterBehavior.$time.subscribe(time => {
       if (time) {
         rebuildVisualizationFilterTime({timeFrom: time.from, timeTo: time.to}, this.filtersValues).then(filters => {
@@ -146,9 +161,7 @@ export class DashboardRenderComponent implements OnInit, OnDestroy, AfterViewIni
   ngOnDestroy(): void {
     document.body.classList.remove('overflow-hidden');
     clearInterval(this.interval);
-    this.visualizationRender = [];
-    this.layoutService.layout = [];
-    this.timeEnable = [];
+    this.layoutService.clearLayout();
     this.dashboardBehavior.$filterDashboard.next(null);
   }
 
@@ -164,7 +177,7 @@ export class DashboardRenderComponent implements OnInit, OnDestroy, AfterViewIni
   exportToPdf() {
     filtersToStringParam(this.filtersValues).then(queryParams => {
       this.spinner.show('buildPrintPDF');
-      const url = '/dashboard/export/' + this.dashboardId + '/' + normalizeString(this.dashboard.name) + '?' + queryParams;
+      const url = '/dashboard/export/' + this.dashboard.id + '/' + normalizeString(this.dashboard.name) + '?' + queryParams;
       // window.open('/dashboard/export/' + this.dashboardId + '/' + normalizeString(this.dashboard.name) + '?' + queryParams, '_blank');
       this.exportPdfService.getPdf(url, this.dashboard.name, 'PDF_TYPE_TOKEN').subscribe(response => {
         this.spinner.hide('buildPrintPDF').then(() =>
@@ -175,5 +188,9 @@ export class DashboardRenderComponent implements OnInit, OnDestroy, AfterViewIni
       });
     });
   }
+
+  trackByFn(index: number, item: { grid: GridsterItem, visualization: VisualizationType }) {
+    return item.visualization.id;
+  }
 }
 

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

@@ -10,6 +10,7 @@ import {DashboardOverviewComponent} from './dashboard-overview/dashboard-overvie
 import {DashboardRenderComponent} from './dashboard-render/dashboard-render.component';
 import {DashboardViewComponent} from './dashboard-view/dashboard-view.component';
 import {ReportExportComponent} from './report-export/report-export.component';
+import {DashboardResolverService} from './shared/services/dashboard-resolver.service';
 
 const routes: Routes = [
   {path: '', redirectTo: 'overview', pathMatch: 'full'},
@@ -35,7 +36,10 @@ const routes: Routes = [
     path: 'render/:id/:dashboard',
     component: DashboardRenderComponent,
     canActivate: [UserRouteAccessService],
-    data: {authorities: [USER_ROLE, ADMIN_ROLE]}
+    data: {authorities: [USER_ROLE, ADMIN_ROLE]},
+    resolve: {
+      response: DashboardResolverService
+    }
   },
   {
     path: 'export/:id/:dashboard',

frontend/src/app/dashboard/dashboard.module.ts

@@ -19,6 +19,7 @@ import {DashboardRoutingModule} from './dashboard-routing.module';
 import {DashboardViewComponent} from './dashboard-view/dashboard-view.component';
 import {ReportExportComponent} from './report-export/report-export.component';
 import {UtmDashboardSharedModule} from './shared/utm-dashboard-shared.module';
+import {DashboardResolverService} from "./shared/services/dashboard-resolver.service";
 
 @NgModule({
   declarations: [DashboardViewComponent,
@@ -43,6 +44,9 @@ import {UtmDashboardSharedModule} from './shared/utm-dashboard-shared.module';
     VulnerabilitySharedModule,
     GridsterModule
   ],
+  providers: [
+    DashboardResolverService
+  ],
   entryComponents: [DashboardExportPreviewComponent],
   exports: [
     DashboardViewComponent

frontend/src/app/dashboard/shared/services/dashboard-resolver.service.ts

@@ -0,0 +1,47 @@
+import {Injectable, Type} from '@angular/core';
+import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
+import {GridsterItem} from 'angular-gridster2';
+import {NgxSpinnerService} from 'ngx-spinner';
+import {Observable} from 'rxjs';
+import {map, tap} from 'rxjs/operators';
+import {VisualizationType} from '../../../shared/chart/types/visualization.type';
+import {RenderLayoutService} from './render-layout.service';
+import {UtmRenderVisualization} from './utm-render-visualization.service';
+
+@Injectable()
+export class DashboardResolverService implements Resolve<{ grid: GridsterItem, visualization: VisualizationType } []> {
+
+  constructor(private spinner: NgxSpinnerService,
+              private utmRenderVisualization: UtmRenderVisualization,
+              private layoutService: RenderLayoutService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
+    Observable<{ grid: GridsterItem, visualization: VisualizationType } []> {
+    const request = {
+      page: 0,
+      size: 10000,
+      'idDashboard.equals': route.params.id,
+      sort: 'order,asc'
+    };
+    this.spinner.show('loadingSpinner');
+    return this.utmRenderVisualization.query(request)
+      .pipe(
+        map((response) => {
+            this.layoutService.clearLayout();
+            const visualizations = response.body;
+            this.layoutService.dashboard = visualizations.length > 0 ? visualizations[0].dashboard : null;
+
+            visualizations.forEach((vis) => {
+              const visualization: VisualizationType = {...vis.visualization, showTime: vis.showTimeFilter};
+              this.layoutService.addItem(visualization, JSON.parse(vis.gridInfo));
+            });
+
+            return this.layoutService.layout;
+          }
+        ),
+        tap(() => {
+          this.spinner.hide('loadingSpinner');
+        }));
+  }
+}

frontend/src/app/dashboard/shared/services/render-layout.service.ts

@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
 import {GridsterItem} from 'angular-gridster2';
 import {UUID} from 'angular2-uuid';
+import {UtmDashboardType} from '../../../shared/chart/types/dashboard/utm-dashboard.type';
 import {VisualizationType} from '../../../shared/chart/types/visualization.type';
 
 
@@ -13,8 +14,9 @@ export interface IComponent {
   providedIn: 'root'
 })
 export class RenderLayoutService {
-  public layout: { grid: GridsterItem, visualization: VisualizationType } [] = [];
+  private _layout: { grid: GridsterItem, visualization: VisualizationType } [] = [];
   public components: IComponent[] = [];
+  private _dashboard: UtmDashboardType;
 
   dropId: string;
 
@@ -25,7 +27,7 @@ export class RenderLayoutService {
   }
 
   addItem(vis: VisualizationType, grid?: GridsterItem): void {
-    this.layout.push({
+    this._layout.push({
       grid: grid ? grid : {
         cols: 10,
         id: UUID.UUID(),
@@ -37,4 +39,20 @@ export class RenderLayoutService {
     });
   }
 
+  get layout() {
+    return [...this._layout];
+  }
+
+  get dashboard() {
+    return this._dashboard;
+  }
+
+  set dashboard(dashboard: UtmDashboardType) {
+    this._dashboard = {...dashboard };
+  }
+
+  clearLayout() {
+    this._layout = [];
+    this._dashboard = null;
+  }
 }

frontend/src/app/dashboard/shared/services/utm-render-visualization.service.ts

@@ -3,8 +3,8 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {SERVER_API_URL} from '../../../app.constants';
 import {UtmDashboardVisualizationType} from '../../../shared/chart/types/dashboard/utm-dashboard-visualization.type';
-import {createRequestOption} from '../../../shared/util/request-util';
 import {RefreshDataService} from '../../../shared/services/util/refresh-data.service';
+import {createRequestOption} from '../../../shared/util/request-util';
 
 
 @Injectable({

frontend/src/app/graphic-builder/shared/components/viewer/chart-view/chart-view.component.html

@@ -11,7 +11,9 @@
                              [invertContent]="true">
     </app-elastic-filter-time>
   </div>
-  <div [ngStyle]="{'height':height,'width':width}" class="card-body p-0 chart-container">
+  <div *ngIf="data$ | async as data"
+       [ngStyle]="{'height':height,'width':width}"
+       class="card-body p-0 chart-container">
     <div *ngIf="loadingOption"
          class="loading-chart w-100 h-100
                  d-flex justify-content-center
@@ -24,7 +26,7 @@
          class="h-100 w-100">
       <app-no-data-chart [error]="runWithError" [typeChart]="chart"></app-no-data-chart>
     </div>
-    <div (chartClick)="chartEvent($event)"
+    <div (chartClick)="chartEvent($event, data)"
          *ngIf="!loadingOption && data && echartOption && data.length>0"
          [autoResize]="true"
          [ngStyle]="{'height':height}"