Merge remote-tracking branch 'origin/bugfix/10.5.18/add-compliance' into bugfix/10.5.18/add-compliance

Author: mjabascal10

frontend/src/app/compliance/compliance-reports-view/compliance-reports-view.component.css

@@ -32,7 +32,3 @@ table {
   margin-right: 25px !important;
   margin-top: 0;
 }
-
-.table-responsive {
-  min-height: 400px;
-}

frontend/src/app/compliance/compliance-reports-view/compliance-reports-view.component.html

@@ -27,7 +27,7 @@ <h5 class="card-title mb-0 text-uppercase label-header d-flex align-items-center
         </div>
 
         <!-- Tabla -->
-        <div class="table-responsive">
+        <div [ngStyle]="{'min-height': getTableHeight(), 'height': getTableHeight()}" class="table-responsive">
           <table class="table mb-0">
             <thead>
             <tr>
@@ -108,7 +108,8 @@ <h5 class="card-title mb-0 text-uppercase label-header d-flex align-items-center
 <div *ngIf="reportDetail" class="utm-right-container">
   <div (click)="reportDetail= undefined" class="overlay overlay-lg col-md-7"></div>
   <div class="card utm-right-action utm-right-action-lg ml-0">
-    <div [ngClass]="(reportDetail.configReportNote && reportDetail.configReportNote !== '') || reportDetail.status === 'complaint' ? 'border-left-success' : 'border-left-danger'"
+    <div [ngClass]="reportDetail.configReportStatus === ComplianceStatusEnum.COMPLAINT
+      || (reportDetail.configReportNote && reportDetail.configReportNote !== '') ? 'border-left-success' : 'border-left-danger'"
       class="title d-flex justify-content-between  align-items-center border-bottom-1
             border-bottom-grey-100  pl-3 pt-3 pr-3 pb-0">
       <h6 class="card-title text-blue-800 font-weight-light">

frontend/src/app/compliance/compliance-reports-view/compliance-reports-view.component.ts

@@ -2,7 +2,7 @@ import {HttpErrorResponse} from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
+  EventEmitter, HostListener,
   Input,
   OnChanges,
   OnDestroy,
@@ -12,11 +12,12 @@ import {
 import {EMPTY, Observable, Subject} from 'rxjs';
 import {catchError, filter, map, switchMap, takeUntil, tap} from 'rxjs/operators';
 import {UtmToastService} from '../../shared/alert/utm-toast.service';
+import {SortEvent} from '../../shared/directives/sortable/type/sort-event';
 import {SortByType} from '../../shared/types/sort-by.type';
 import {CpReportsService} from '../shared/services/cp-reports.service';
 import {ComplianceReportType} from '../shared/type/compliance-report.type';
 import {ComplianceStandardSectionType} from '../shared/type/compliance-standard-section.type';
-import {SortEvent} from '../../shared/directives/sortable/type/sort-event';
+import {ComplianceStatusEnum} from "../shared/enums/compliance-status.enum";
 
 @Component({
   selector: 'app-compliance-reports-view',
@@ -44,12 +45,20 @@ export class ComplianceReportsViewComponent implements OnInit, OnChanges, OnDest
   destroy$: Subject<void> = new Subject();
   sort = 'configReportName,desc';
   search: string;
+  viewportHeight: number;
+  ComplianceStatusEnum = ComplianceStatusEnum;
 
   constructor(private reportsService: CpReportsService,
               private toastService: UtmToastService) {
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize(event: Event) {
+    this.viewportHeight = window.innerHeight;
+  }
+
   ngOnInit() {
+    this.viewportHeight = window.innerHeight;
     this.reports$ = this.reportsService.onRefresh$
       .pipe(takeUntil(this.destroy$),
         filter(reportRefresh =>
@@ -133,6 +142,11 @@ export class ComplianceReportsViewComponent implements OnInit, OnChanges, OnDest
     });
   }
 
+  getTableHeight() {
+    console.log('getTableHeight:', 100 - ((350 / this.viewportHeight) * 100) + 'vh');
+    return 100 - ((350 / this.viewportHeight) * 100) + 'vh';
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();

frontend/src/app/compliance/compliance-reports-view/components/compliance-report-detail/compliance-report-detail.component.html

@@ -1,4 +1,4 @@
-<div class="w-100" *ngIf="compliance$ | async as compliance">
+<div class="w-100 d-flex flex-column flex-grow-1 h-100" *ngIf="compliance$ | async as compliance">
   <div [ngClass]="isComplaint() ? 'border-left-success' : 'border-left-danger'">
     <div class="d-flex justify-content-around align-content-center py-1" style="border-bottom: 1px solid #ccc;">
       <div style="padding-left: 10px" class="w-100">
@@ -82,9 +82,8 @@
       <span class="text-blue-800 font-weight-light mr-2">Evidence:</span>
     </div>
 
-    <div *ngIf="compliance.rows.length > 0" class="alert-details w-100 d-flex justify-content-start align-items-center mb-2">
-      <ngx-json-viewer [expanded]="false" [json]="compliance" class="col-12"></ngx-json-viewer>
-      <p class="font-size-base"></p>
+    <div *ngIf="compliance.rows.length > 0" class="alert-details w-100 d-flex d-flex flex-column flex-grow-1 overflow-auto mb-2">
+      <app-utm-json-detail-view [rowDocument]="compliance.rows"></app-utm-json-detail-view>
     </div>
   </div>
 </div>

frontend/src/app/compliance/compliance-reports-view/components/compliance-report-detail/compliance-report-detail.component.ts

@@ -9,9 +9,10 @@ import {VisualizationType} from '../../../../shared/chart/types/visualization.ty
 import {ChartTypeEnum} from '../../../../shared/enums/chart-type.enum';
 import {TimeWindowsService} from '../../../shared/components/utm-cp-section/time-windows.service';
 import {ComplianceReportType} from '../../../shared/type/compliance-report.type';
-import {ExportPdfService} from "../../../../shared/services/util/export-pdf.service";
-import {UtmToastService} from "../../../../shared/alert/utm-toast.service";
-import {ComplianceStatusEnum} from "../../../shared/enums/compliance-status.enum";
+import {ExportPdfService} from '../../../../shared/services/util/export-pdf.service';
+import {UtmToastService} from '../../../../shared/alert/utm-toast.service';
+import {ComplianceStatusEnum} from '../../../shared/enums/compliance-status.enum';
+import {UtmDashboardVisualizationType} from '../../../../shared/chart/types/dashboard/utm-dashboard-visualization.type';
 
 @Component({
   selector: 'app-compliance-report-detail',
@@ -29,6 +30,7 @@ export class ComplianceReportDetailComponent implements OnInit {
   compliance$!: Observable<any>;
   csvExport = false;
   printFormat = false;
+  vis: VisualizationType;
   ComplianceStatusEnum = ComplianceStatusEnum;
 
   constructor(private utmRenderVisualization: UtmRenderVisualization,
@@ -42,40 +44,39 @@ export class ComplianceReportDetailComponent implements OnInit {
     this.compliance$ = this.utmRenderVisualization.onRefresh$
       .pipe(
         filter((refresh) => !!refresh),
-        concatMap(() => this.utmRenderVisualization.query(this.request)
-          .pipe(
-            map(response => response.body.filter(vis =>
-              vis.visualization.chartType === ChartTypeEnum.TABLE_CHART || vis.visualization.chartType === ChartTypeEnum.LIST_CHART
-            )),
-            filter(vis => vis.length > 0),
-            map(vis => vis[0].visualization),
-            tap( vis => {
-              const time = vis.filterType.find( filterType => filterType.field === '@timestamp');
-              if (time) {
-                this.timeWindowsService.changeTimeWindows({
-                  reportId: this.report.id,
-                  time: time.value[0]
-                });
-              }
-            }),
-            concatMap((vis: VisualizationType) => this.runVisualization.run(vis)),
-            map(run => {
-              return  run[0] && run[0] ? run[0] : {
-                rows: []
-              };
-            })
-          ))
+        concatMap(() => this.runVisualization.run(this.vis)),
+        map(run => run[0] && run[0] ? run[0] : {
+          rows: []
+        }),
       );
   }
 
   @Input() set report(report: ComplianceReportType) {
-    if (report) {
-      console.log('Report:', report);
+    /*if (report) {
       this._report = report;
       this.request = {
         ...this.request,
         'idDashboard.equals': report.dashboardId,
       };
+      this.utmRenderVisualization.notifyRefresh(true);
+    }*/
+
+    if (report) {
+      this._report = report;
+      const visualizationType: UtmDashboardVisualizationType = report.dashboard.find(vis =>
+        vis.visualization.chartType === ChartTypeEnum.TABLE_CHART || vis.visualization.chartType === ChartTypeEnum.LIST_CHART);
+
+      if (visualizationType) {
+        this.vis = visualizationType.visualization;
+      }
+      const time = visualizationType.visualization.filterType.find(filterType => filterType.field === '@timestamp');
+      if (time) {
+        this.timeWindowsService.changeTimeWindows({
+          reportId: report.id,
+          time: time.value[0]
+        });
+      }
+
       this.utmRenderVisualization.notifyRefresh(true);
     }
   }

frontend/src/app/compliance/compliance-reports-view/components/compliance-status/compliance-status.component.html

@@ -8,7 +8,7 @@
 </ng-container>
 
 <ng-container *ngIf="template === 'dropdown'">
-  <div (click)="onClick($event)" ngbDropdown container="body" #drop="ngbDropdown">
+  <span (click)="onClick($event)" ngbDropdown container="body" #drop="ngbDropdown">
     <a class="btn btn-light btn-sm"
        [ngClass]="(report.configReportNote && report.configReportNote !== '') || report.configReportStatus === ComplianceStatus.COMPLAINT ? 'text-success' : 'text-danger'"
        ngbDropdownToggle>
@@ -35,7 +35,7 @@
         <a style="font-size: 12px" class="menu-link px-2 fw-bolder text-danger">{{ 'Non compliant' }}</a>
       </div>
     </div>
-  </div>
+  </span>
 </ng-container>
 
 

frontend/src/app/compliance/compliance-reports-view/components/compliance-status/compliance-status.component.ts

@@ -1,8 +1,5 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Observable} from 'rxjs';
 import {ModalService} from '../../../../core/modal/modal.service';
-import {UtmRenderVisualization} from '../../../../dashboard/shared/services/utm-render-visualization.service';
-import {RunVisualizationService} from '../../../../graphic-builder/shared/services/run-visualization.service';
 import {UtmDashboardVisualizationType} from '../../../../shared/chart/types/dashboard/utm-dashboard-visualization.type';
 import {VisualizationType} from '../../../../shared/chart/types/visualization.type';
 import {ModalAddNoteComponent} from '../../../../shared/components/utm/util/modal-add-note/modal-add-note.component';