Optimized PDF Report Generation

mjabascal10 · mjabascal10 · commit 18b1d453e782 · 2024-08-30T12:40:21.000-05:00
diff --git a/frontend/src/app/compliance/shared/components/utm-compliance-select/utm-compliance-select.component.html b/frontend/src/app/compliance/shared/components/utm-compliance-select/utm-compliance-select.component.html
@@ -40,7 +40,7 @@
   </div>
   <div class="table-responsive">
     <table class="table text-nowrap">
-      <tbody *ngIf="complianceReports && complianceReports.length>0">
+      <tbody *ngIf="standardSections && standardSections.length > 0">
       <tr *ngFor="let report of complianceReports">
         <td colspan="1">
           <div (click)="selectDashboard(report)"
diff --git a/frontend/src/app/compliance/shared/components/utm-compliance-select/utm-compliance-select.component.ts b/frontend/src/app/compliance/shared/components/utm-compliance-select/utm-compliance-select.component.ts
@@ -89,7 +89,7 @@ export class UtmComplianceSelectComponent implements OnInit {
     };
     this.cpStandardSectionService.query(query).subscribe(response => {
       this.standardSections = response.body;
-      this.section = this.standardSections[0].id;
+      this.section = !!this.section ? this.section : this.standardSections[0].id;
       this.getDashboardList();
       if (this.idReport) {
         this.getSelectedDashboard(this.idReport);
@@ -101,7 +101,7 @@ export class UtmComplianceSelectComponent implements OnInit {
     this.cpStandardService.query({page: 0, size: 1000}).subscribe(
       (res: HttpResponse<any>) => {
         this.standards = res.body;
-        this.standard = this.standards[0].id;
+        this.standard = !!this.standard ? this.standard : this.standards[0].id;
         this.getSections();
       },
       (res: HttpResponse<any>) => this.onError(res)
diff --git a/frontend/src/app/dashboard/dashboard-export-pdf/dashboard-export-pdf.component.html b/frontend/src/app/dashboard/dashboard-export-pdf/dashboard-export-pdf.component.html
@@ -27,7 +27,6 @@ <h3 class="">{{dashboardName}}</h3>
       <h5 class="mt-5 ">Generated on {{date | date:'short':'UTC'}}</h5>
     </div>
 
-    <div *ngIf="!preparingPrint" class="report-loading"></div>
     <!--    <img class="img-front-page" src="/assets/img/report/A4_compliance.png">-->
     <img [src]="sanitizer.bypassSecurityTrustUrl(cover)"
          *ngIf="cover;else loadImage"
diff --git a/frontend/src/app/dashboard/dashboard-overview/dashboard-overview.component.html b/frontend/src/app/dashboard/dashboard-overview/dashboard-overview.component.html
@@ -5,24 +5,29 @@ <h5 class="card-title label-header mb-0 text-uppercase label-header">Overview</h
       <app-elastic-filter-time [invertContent]="true"
                                [isEmitter]="true"
                                container="body"></app-elastic-filter-time>
-      <!--<button (click)="exportToPdf()"
+      <button (click)="exportToPdf()"
               [disabled]="pdfExport" 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'}}
-      </button>-->
+      </button>
     </div>
   </div>
+  <div *ngIf="!preparingPrint" class="report-loading"></div>
   <app-utm-report-header *ngIf="pdfExport" [reportName]="'UTMSTACK Overview'"></app-utm-report-header>
   <div [ngClass]="{'mt-3':pdfExport}" id="utmDashboardAlert">
     <div class="w-100 border-bottom-grey-100 border-bottom-1 mb-3 pb-2">
       <label class="font-weight-bold text-uppercase">Alerts</label>
     </div>
     <div class="row">
       <div class="col-lg-4 col-md-12 col-sm-12">
-        <app-chart-alert-daily-week [refreshInterval]="refreshInterval"></app-chart-alert-daily-week>
+        <app-chart-alert-daily-week [refreshInterval]="refreshInterval"
+                                    (loaded)="onRun()">
+        </app-chart-alert-daily-week>
       </div>
       <div class="col-lg-8 col-md-12 col-sm-12">
-        <app-chart-alert-by-status [refreshInterval]="refreshInterval"></app-chart-alert-by-status>
+        <app-chart-alert-by-status [refreshInterval]="refreshInterval"
+                                   (loaded)="onRun()">
+        </app-chart-alert-by-status>
       </div>
     </div>
 
@@ -34,17 +39,22 @@ <h5 class="card-title label-header mb-0 text-uppercase label-header">Overview</h
                               [navigateUrl]="ALERT_ROUTE"
                               [paramClick]="paramAlertSeverityCLick"
                               [params]="paramsAlertSeverity"
-                              [refreshInterval]="refreshInterval"></app-chart-common-pie>
+                              (loaded)="onRun()"
+                              [refreshInterval]="refreshInterval">
+        </app-chart-common-pie>
       </div>
       <div class="col-lg-5 col-md-12 col-sm-12">
-        <app-chart-alert-by-category [refreshInterval]="refreshInterval"></app-chart-alert-by-category>
+        <app-chart-alert-by-category [refreshInterval]="refreshInterval"
+                                     (loaded)="onRun()">
+        </app-chart-alert-by-category>
       </div>
       <div class="col-lg-4 col-md-12 col-sm-12">
         <app-chart-common-table [endpoint]="'top-alerts'"
                                 [header]="'Top 20 Alerts'"
                                 [navigateUrl]="ALERT_ROUTE"
                                 [paramClick]="tableTopAlertsParamsClick"
                                 [params]="tableTopAlertsParams"
+                                (loaded)="onRun()"
                                 [refreshInterval]="refreshInterval">
         </app-chart-common-table>
       </div>
@@ -63,17 +73,20 @@ <h5 class="card-title label-header mb-0 text-uppercase label-header">Overview</h
                               [navigateUrl]="LOG_ANALYZER_ROUTE"
                               [paramClick]="paramEventByTypeCLick"
                               [params]="paramsEventByType"
+                              (loaded)="onRun()"
                               [refreshInterval]="refreshInterval"></app-chart-common-pie>
       </div>
       <div class="col-lg-5 col-md-12 col-sm-12">
-        <app-chart-event-in-time [refreshInterval]="refreshInterval"></app-chart-event-in-time>
+        <app-chart-event-in-time [refreshInterval]="refreshInterval"
+                                 (loaded)="onRun()"></app-chart-event-in-time>
       </div>
       <div class="col-lg-4 col-md-12 col-sm-12">
         <app-chart-common-table [endpoint]="'top-windows-events'"
                                 [header]="'Top 20 windows event'"
                                 [navigateUrl]="LOG_ANALYZER_ROUTE"
                                 [paramClick]="paramEvenTopCLick"
                                 [params]="paramsTopEvent"
+                                (loaded)="onRun()"
                                 [refreshInterval]="refreshInterval">
         </app-chart-common-table>
       </div>
diff --git a/frontend/src/app/dashboard/dashboard-overview/dashboard-overview.component.ts b/frontend/src/app/dashboard/dashboard-overview/dashboard-overview.component.ts
@@ -1,16 +1,13 @@
-import {HttpResponse} from '@angular/common/http';
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {NgxSpinnerService} from 'ngx-spinner';
 import {Subject} from 'rxjs';
 import {filter, map, takeUntil} from 'rxjs/operators';
-// tslint:disable-next-line:max-line-length
 import {UtmModulesEnum} from '../../app-module/shared/enum/utm-module.enum';
 import {UtmModulesService} from '../../app-module/shared/services/utm-modules.service';
 import {UtmModuleType} from '../../app-module/shared/type/utm-module.type';
 import {AccountService} from '../../core/auth/account.service';
-import {rebuildVisualizationFilterTime} from '../../graphic-builder/shared/util/chart-filter/chart-filter.util';
 import {UtmToastService} from '../../shared/alert/utm-toast.service';
 import {MenuBehavior} from '../../shared/behaviors/menu.behavior';
 import {TimeFilterBehavior} from '../../shared/behaviors/time-filter.behavior';
@@ -33,9 +30,8 @@ import {LocalFieldService} from '../../shared/services/elasticsearch/local-field
 import {ExportPdfService} from '../../shared/services/util/export-pdf.service';
 import {ChartSerieValueType} from '../../shared/types/chart-reponse/chart-serie-value.type';
 import {ElasticFilterType} from '../../shared/types/filter/elastic-filter.type';
-import {UtmIndexPattern} from '../../shared/types/index-pattern/utm-index-pattern';
 import {buildFormatInstantFromDate} from '../../shared/util/utm-time.util';
-import {UtmIndexPatternFields} from "../../shared/types/index-pattern/utm-index-pattern-fields";
+import {UtmIndexPatternFields} from '../../shared/types/index-pattern/utm-index-pattern-fields';
 
 @Component({
   selector: 'app-dashboard-overview',
@@ -87,6 +83,9 @@ export class DashboardOverviewComponent implements OnInit, OnDestroy {
   filterTime: { from: string, to: string };
   filtersValues: ElasticFilterType[] = [];
   destroy$: Subject<void> = new Subject();
+  runList = 0;
+  visualizationRender = 8;
+  preparingPrint = true;
 
 
   constructor(private overviewAlertDashboardService: OverviewAlertDashboardService,
@@ -265,8 +264,18 @@ export class DashboardOverviewComponent implements OnInit, OnDestroy {
     });
   }
 
+  onRun() {
+    this.runList += 1;
+    if (this.runList === this.visualizationRender) {
+      console.log('All the visualizations data has loaded, waiting for rendering');
+      setTimeout(() => this.preparingPrint = false, 3000);
+      console.log('All the visualizations now has rendered');
+    }
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
   }
+
 }
diff --git a/frontend/src/app/defined-charts/components/alert/chart-alert-by-category/chart-alert-by-category.component.ts b/frontend/src/app/defined-charts/components/alert/chart-alert-by-category/chart-alert-by-category.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgxSpinnerService} from 'ngx-spinner';
 import {Legend} from '../../../../shared/chart/types/charts/chart-properties/legend/legend';
@@ -20,6 +20,7 @@ import {deleteNullValues} from '../../../../shared/util/object-util';
 })
 export class ChartAlertByCategoryComponent implements OnInit, OnDestroy {
   @Input() refreshInterval;
+  @Output() loaded = new EventEmitter<void>();
   interval: any;
   defaultTime: ElasticFilterCommonType = {time: ElasticTimeEnum.DAY, last: 7, label: 'last 7 days'};
   queryParams = {from: 'now-7d', to: 'now', top: 10};
@@ -63,6 +64,7 @@ export class ChartAlertByCategoryComponent implements OnInit, OnDestroy {
         } else {
           this.noData = true;
         }
+        this.loaded.emit();
       });
   }
 
diff --git a/frontend/src/app/defined-charts/components/alert/chart-alert-by-status/chart-alert-by-status.component.ts b/frontend/src/app/defined-charts/components/alert/chart-alert-by-status/chart-alert-by-status.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgxSpinnerService} from 'ngx-spinner';
 import {ALERT_GLOBAL_FIELD, ALERT_STATUS_FIELD, ALERT_TIMESTAMP_FIELD} from '../../../../shared/constants/alert/alert-field.constant';
@@ -26,6 +26,7 @@ import {TimeFilterType} from '../../../../shared/types/time-filter.type';
 })
 export class ChartAlertByStatusComponent implements OnInit, OnDestroy {
   @Input() refreshInterval;
+  @Output() loaded = new EventEmitter<void>();
   interval: any;
   defaultTime: ElasticFilterCommonType = {time: ElasticTimeEnum.DAY, last: 7, label: 'last 7 days'};
   time: TimeFilterType;
@@ -67,6 +68,7 @@ export class ChartAlertByStatusComponent implements OnInit, OnDestroy {
     this.overviewAlertDashboardService.getCardAlertByStatus(req).subscribe(res => {
       this.status = res.body;
       this.loadingStatusAlert = false;
+      this.loaded.emit();
     });
   }
 
diff --git a/frontend/src/app/defined-charts/components/alert/chart-alert-daily-week/chart-alert-daily-week.component.ts b/frontend/src/app/defined-charts/components/alert/chart-alert-daily-week/chart-alert-daily-week.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgxSpinnerService} from 'ngx-spinner';
 import {ALERT_GLOBAL_FIELD, ALERT_TIMESTAMP_FIELD} from '../../../../shared/constants/alert/alert-field.constant';
@@ -13,6 +13,7 @@ import {ChartSerieValueType} from '../../../../shared/types/chart-reponse/chart-
 })
 export class ChartAlertDailyWeekComponent implements OnInit, OnDestroy {
   @Input() refreshInterval;
+  @Output() loaded = new EventEmitter<void>();
   interval: any;
   dailyAlert: ChartSerieValueType[] = [];
   loadingChartDailyAlert = true;
@@ -39,6 +40,7 @@ export class ChartAlertDailyWeekComponent implements OnInit, OnDestroy {
     this.overviewAlertDashboardService.getCardAlertTodayWeek().subscribe(response => {
       this.dailyAlert = response.body;
       this.loadingChartDailyAlert = false;
+      this.loaded.emit();
     });
   }
 
diff --git a/frontend/src/app/defined-charts/components/common/chart-common-pie/chart-common-pie.component.ts b/frontend/src/app/defined-charts/components/common/chart-common-pie/chart-common-pie.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgxSpinnerService} from 'ngx-spinner';
 import {Legend} from '../../../../shared/chart/types/charts/chart-properties/legend/legend';
@@ -28,6 +28,7 @@ export class ChartCommonPieComponent implements OnInit, OnDestroy {
   @Input() params;
   @Input() paramClick: string;
   @Input() navigateUrl: string;
+  @Output() loaded = new EventEmitter<void>();
   interval: any;
   defaultTime: ElasticFilterCommonType = {time: ElasticTimeEnum.DAY, last: 7, label: 'last 7 days'};
   queryParams = {from: 'now-7d', to: 'now', top: 10};
@@ -70,6 +71,7 @@ export class ChartCommonPieComponent implements OnInit, OnDestroy {
       } else {
         this.noData = true;
       }
+      this.loaded.emit();
     });
   }
 
diff --git a/frontend/src/app/defined-charts/components/common/chart-common-table/chart-common-table.component.ts b/frontend/src/app/defined-charts/components/common/chart-common-table/chart-common-table.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy, OnInit, QueryList, ViewChildren} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, ViewChildren} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgxSpinnerService} from 'ngx-spinner';
 import {TableBuilderResponseType} from '../../../../shared/chart/types/response/table-builder-response.type';
@@ -23,6 +23,7 @@ export class ChartCommonTableComponent implements OnInit, OnDestroy {
   @Input() navigateUrl: string;
   @Input() params;
   @Input() paramClick: string;
+  @Output() loaded = new EventEmitter<void>();
   interval: any;
   defaultTime: ElasticFilterCommonType = {time: ElasticTimeEnum.DAY, last: 7, label: 'last 7 days'};
   @ViewChildren(SortableDirective) headers: QueryList<SortableDirective>;
@@ -64,6 +65,7 @@ export class ChartCommonTableComponent implements OnInit, OnDestroy {
         this.pageEnd = this.itemsPerPage;
         this.responseRows = this.data.rows;
         this.totalItems = this.data.rows.length;
+        this.loaded.emit();
       });
   }
 
diff --git a/frontend/src/app/defined-charts/components/events/chart-event-in-time/chart-event-in-time.component.ts b/frontend/src/app/defined-charts/components/events/chart-event-in-time/chart-event-in-time.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgxSpinnerService} from 'ngx-spinner';
 import {buildMultilineObject} from '../../../../shared/chart/util/build-multiline-option.util';
@@ -17,6 +17,7 @@ import {TimeFilterType} from '../../../../shared/types/time-filter.type';
 })
 export class ChartEventInTimeComponent implements OnInit, OnDestroy {
   @Input() refreshInterval;
+  @Output() loaded = new EventEmitter<void>();
   interval: any;
   defaultTime: ElasticFilterCommonType = {time: ElasticTimeEnum.DAY, last: 7, label: 'last 7 days'};
   queryParams = {from: 'now-7d', to: 'now', interval: 'Day'};
@@ -83,6 +84,7 @@ export class ChartEventInTimeComponent implements OnInit, OnDestroy {
         } else {
           this.noData = true;
         }
+        this.loaded.emit();
       });
 
   }
diff --git a/version.yml b/version.yml
@@ -1 +1 @@
-version: 10.5.6
+version: 10.5.7
