fix: enhance compliance report view

mjabascal10 · mjabascal10 · commit 96e1f7eab1cb · 2025-01-28T15:58:50.000-06:00
diff --git a/frontend/src/app/compliance/compliance-reports-view/compliance-reports-view.component.html b/frontend/src/app/compliance/compliance-reports-view/compliance-reports-view.component.html
@@ -36,7 +36,7 @@ <h5 class="card-title mb-0 text-uppercase label-header d-flex align-items-center
               <th (sort)="onSortBy($event)"
                   [isSortable]="true"
                   [sortEvent]="sortEvent"
-                  [sortable]="'config_report_name'"
+                  [sortable]="'configReportName'"
                   appColumnSortable
                   class="font-weight-semibold cursor-pointer">
                 Security Control Name
@@ -46,9 +46,8 @@ <h5 class="card-title mb-0 text-uppercase label-header d-flex align-items-center
             </tr>
             </thead>
             <tbody *ngIf="reports$ | async as reports;">
-            <tr class="cursor-pointer" (click)="reportDetail=report"
-                *ngFor="let report of reports; let index = index"
-                style="position: relative; z-index: 1;">
+            <tr class="cursor-pointer" (click)="reportDetail = report"
+                *ngFor="let report of reports; let index = index" style="position: relative; z-index: 1;">
               <td style="width: 5%; position: relative; z-index: 0;"
                   [ngClass]="(report.configReportNote && report.configReportNote !== '') || report.status === 'complaint' ? 'border-left-success' : 'border-left-danger'"
                   [ngStyle]="(report.configReportNote && report.configReportNote !== '') || report.status === 'complaint' ? {'border-left': '5px solid green !important;'} : {'border-left': '5px solid red !important;'}">
@@ -109,8 +108,7 @@ <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.configReportNote && reportDetail.configReportNote !== '') || reportDetail.status === 'complaint' ? '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">
diff --git a/frontend/src/app/compliance/compliance-reports-view/compliance-reports-view.component.ts b/frontend/src/app/compliance/compliance-reports-view/compliance-reports-view.component.ts
@@ -38,11 +38,11 @@ export class ComplianceReportsViewComponent implements OnInit, OnChanges, OnDest
   page = 0;
   totalItems = 0;
   sortEvent: SortEvent = {
-    column: 'config_report_name',
+    column: 'configReportName',
     direction: 'desc'
   };
   destroy$: Subject<void> = new Subject();
-  sort = 'config_report_name,desc';
+  sort = 'configReportName,desc';
   search: string;
 
   constructor(private reportsService: CpReportsService,
@@ -64,6 +64,7 @@ export class ComplianceReportsViewComponent implements OnInit, OnChanges, OnDest
           standardId: this.section.standardId,
           sectionId: this.section.id,
           expandDashboard: true,
+          setStatus: true,
           sort: this.sort,
           search: this.search ? this.search : null,
         })),
diff --git a/frontend/src/app/compliance/compliance-reports-view/components/compliance-report-detail/compliance-report-detail.component.html b/frontend/src/app/compliance/compliance-reports-view/components/compliance-report-detail/compliance-report-detail.component.html
@@ -1,11 +1,11 @@
 <div class="w-100" *ngIf="compliance$ | async as compliance">
-  <div [ngClass]="(report.status === 'complaint' || report.status === 'in_progress') ? 'border-left-success' : 'border-left-danger'">
+  <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">
         <span class="text-blue-800 font-weight-light mr-2">Status:</span>
-        <span [ngClass]="compliance.rows.length > 0 ? 'text-success' : 'text-danger'"
+        <span [ngClass]="isComplaint() ? 'text-success' : 'text-danger'"
               class="span-small-icon d-flex justify-content-start align-items-center">
-            {{ report.status === 'complaint' ? 'Compliant' : 'Non compliant' }}
+            {{ isComplaint() ? 'Compliant' : 'Non compliant' }}
         </span>
       </div>
 
@@ -58,7 +58,17 @@
       <app-utm-collapsible-text class="font-size-base" [maxLength]="200" [text]="report.configSolution"></app-utm-collapsible-text>
     </div>
 
-    <ng-container *ngIf="report.status === 'non_complaint' && report.configRemediation">
+    <ng-container *ngIf="report.configReportNote">
+      <div class="alert-details w-100 d-flex justify-content-start align-items-center mt-3">
+        <span class="text-blue-800 font-weight-light mr-2">Compliance note:</span>
+      </div>
+
+      <div class="alert-details w-100 d-flex justify-content-start align-items-center mb-2">
+        <app-utm-collapsible-text class="font-size-base" [maxLength]="200" [text]="report.configReportNote"></app-utm-collapsible-text>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="!isComplaint() && report.configRemediation">
       <div class="alert-details w-100 d-flex justify-content-start align-items-center mt-3">
         <span class="text-blue-800 font-weight-light mr-2">Compliance remediation:</span>
       </div>
diff --git a/frontend/src/app/compliance/compliance-reports-view/components/compliance-report-detail/compliance-report-detail.component.ts b/frontend/src/app/compliance/compliance-reports-view/components/compliance-report-detail/compliance-report-detail.component.ts
@@ -11,6 +11,7 @@ import {TimeWindowsService} from '../../../shared/components/utm-cp-section/time
 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";
 
 @Component({
   selector: 'app-compliance-report-detail',
@@ -20,14 +21,15 @@ import {UtmToastService} from "../../../../shared/alert/utm-toast.service";
 export class ComplianceReportDetailComponent implements OnInit {
   request = {
     page: 0,
-    size: 10000,
+    size: 10,
     sort: 'order,asc',
     'idDashboard.equals': 0
   };
   _report: ComplianceReportType;
   compliance$!: Observable<any>;
   csvExport = false;
   printFormat = false;
+  ComplianceStatusEnum = ComplianceStatusEnum;
 
   constructor(private utmRenderVisualization: UtmRenderVisualization,
               private runVisualization: RunVisualizationService,
@@ -135,4 +137,8 @@ export class ComplianceReportDetailComponent implements OnInit {
     });
   }
 
+  isComplaint() {
+    return this.report.configReportStatus === ComplianceStatusEnum.COMPLAINT
+      || (this.report.configReportNote && this.report.configReportNote !== '');
+  }
 }
diff --git a/frontend/src/app/compliance/compliance-reports-view/components/compliance-status/compliance-status.component.html b/frontend/src/app/compliance/compliance-reports-view/components/compliance-status/compliance-status.component.html
@@ -1,22 +1,22 @@
 <ng-container *ngIf="template === 'default'">
-  <div *ngIf="compliance$ | async as compliance">
-    <span [ngClass]="compliance.status ? 'text-success' : 'text-danger'"
+  <div>
+    <span [ngClass]="report.configReportStatus === ComplianceStatus.COMPLAINT  ? 'text-success' : 'text-danger'"
           class="span-small-icon d-flex justify-content-start align-items-center">
-      {{ compliance.status ? 'Compliant' : 'Non compliant' }}
+      {{ isComplaint() ? 'Compliant' : 'Non compliant' }}
     </span>
   </div>
 </ng-container>
 
 <ng-container *ngIf="template === 'dropdown'">
-  <div *ngIf="compliance$ | async as compliance" (click)="onClick($event)" ngbDropdown container="body" #drop="ngbDropdown">
+  <div (click)="onClick($event)" ngbDropdown container="body" #drop="ngbDropdown">
     <a class="btn btn-light btn-sm"
-       [ngClass]="(report.configReportNote && report.configReportNote !== '') || compliance.status ? 'text-success' : 'text-danger'"
+       [ngClass]="(report.configReportNote && report.configReportNote !== '') || report.configReportStatus === ComplianceStatus.COMPLAINT ? 'text-success' : 'text-danger'"
        ngbDropdownToggle>
       <span class="indicator-progress" *ngIf="changing">
         <span class="spinner-border spinner-border-sm align-middle me-2"></span>
       </span>
       <span>
-        {{ compliance.status || (report.configReportNote && report.configReportNote !== '') ? 'Compliant' : 'Non compliant' }}
+        {{ isComplaint() ? 'Compliant' : 'Non compliant' }}
       </span>
       <button class="toggle-button">
         <i class="icon-arrow-down32 font-size-sm text-dark"></i>
@@ -26,12 +26,12 @@
     <div
       class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold font-size-sm py-2 px-3"
       ngbDropdownMenu>
-      <div *ngIf="report.status === 'non_complaint'" class="menu-item px-2 cursor-pointer menu-hover"
-           (click)="changeStatusTo('complaint'); drop.close()">
+      <div *ngIf="!isComplaint()" class="menu-item px-2 cursor-pointer menu-hover"
+           (click)="changeStatusTo(ComplianceStatus.COMPLAINT); drop.close()">
         <a style="font-size: 12px" class="menu-link px-2 fw-bolder text-success">{{ 'Complaint' }}</a>
       </div>
-      <div *ngIf="report.status === 'complaint'" class="menu-item px-2 cursor-pointer menu-hover"
-           (click)="changeStatusTo('non_complaint'); drop.close()">
+      <div *ngIf="isComplaint()" class="menu-item px-2 cursor-pointer menu-hover"
+           (click)="changeStatusTo(ComplianceStatus.NON_COMPLAINT); drop.close()">
         <a style="font-size: 12px" class="menu-link px-2 fw-bolder text-danger">{{ 'Non compliant' }}</a>
       </div>
     </div>
diff --git a/frontend/src/app/compliance/compliance-reports-view/components/compliance-status/compliance-status.component.ts b/frontend/src/app/compliance/compliance-reports-view/components/compliance-status/compliance-status.component.ts
@@ -1,15 +1,15 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Observable} from 'rxjs';
-import {concatMap, filter, map, startWith, tap} from 'rxjs/operators';
 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';
 import {ChartTypeEnum} from '../../../../shared/enums/chart-type.enum';
 import {TimeWindowsService} from '../../../shared/components/utm-cp-section/time-windows.service';
+import {ComplianceStatusEnum} from '../../../shared/enums/compliance-status.enum';
 import {ComplianceReportType} from '../../../shared/type/compliance-report.type';
-import {UtmDashboardVisualizationType} from '../../../../shared/chart/types/dashboard/utm-dashboard-visualization.type';
 
 
 export type ComplianceStatus = 'complaint' | 'non_complaint';
@@ -23,78 +23,19 @@ export type ComplianceStatus = 'complaint' | 'non_complaint';
 export class ComplianceStatusComponent implements OnInit {
   @Input() template: 'default' | 'dropdown' = 'default';
   private _report: ComplianceReportType;
-  compliance$: Observable<{ status: boolean }> = null;
-  request = {
-    page: 0,
-    size: 10000,
-    sort: 'order,asc',
-    'idDashboard.equals': 0
-  };
   vis: VisualizationType;
 
-  @Output() isCompliant = new EventEmitter<boolean>();
   @Output() visualization = new EventEmitter<any>();
   changing: any;
   status: ComplianceStatus = 'complaint';
   loading = false;
+  ComplianceStatus = ComplianceStatusEnum;
 
-  constructor(private utmRenderVisualization: UtmRenderVisualization,
-              private runVisualization: RunVisualizationService,
-              private timeWindowsService: TimeWindowsService,
+  constructor(private timeWindowsService: TimeWindowsService,
               private modalService: ModalService) {
   }
 
-  ngOnInit() {
-    /*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 => {
-              this.visualization.emit(vis);
-              return 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 => {
-              const isCompliant = run[0] && run[0].rows.length > 0;
-              this.report.status = isCompliant || this.report.note && this.report.note !== '' ? 'complaint'
-                 : 'non_complaint';
-              this.isCompliant.emit(isCompliant);
-              return {
-                status: isCompliant
-              };
-            })
-          ))
-      );*/
-
-    this.compliance$ = this.utmRenderVisualization.onRefresh$
-      .pipe(
-        filter((refresh) => !!refresh),
-        concatMap(() => this.runVisualization.run(this.vis)),
-        map(run => {
-          const isCompliant = run[0] && run[0].rows.length > 0;
-          this.report.status = isCompliant || this.report.configReportNote && this.report.configReportNote !== '' ? 'complaint'
-            : 'non_complaint';
-          this.isCompliant.emit(isCompliant);
-          return {
-            status: isCompliant
-          };
-        }),
-      );
-  }
+  ngOnInit() {}
 
   @Input() set report(value: ComplianceReportType) {
     if (value) {
@@ -113,8 +54,6 @@ export class ComplianceStatusComponent implements OnInit {
           time: time.value[0]
         });
       }
-
-      this.utmRenderVisualization.notifyRefresh(true);
     }
   }
 
@@ -126,9 +65,10 @@ export class ComplianceStatusComponent implements OnInit {
     event.stopPropagation();
   }
 
-  changeStatusTo(status: ComplianceStatus) {
+  changeStatusTo(status: ComplianceStatusEnum) {
     const modalRef = this.modalService.open(ModalAddNoteComponent, {centered: true});
     modalRef.componentInstance.report = this.report;
+    modalRef.componentInstance.isComplaint = this.isComplaint();
     modalRef.componentInstance.header = 'Confirm status change';
     modalRef.componentInstance.message = this.getModalMessage(status);
     modalRef.componentInstance.confirmBtnText = 'Confirm';
@@ -140,20 +80,25 @@ export class ComplianceStatusComponent implements OnInit {
     });
   }
 
-  getModalMessage(status: ComplianceStatus) {
-    return status === 'complaint'
+  getModalMessage(status: ComplianceStatusEnum) {
+    return !this.isComplaint()
       ? `You are about to change the compliance status to <b>Complaint (External Tool)</b>.
        <br><br>
        Please note that you must provide a detailed note explaining where and how this compliance
        is being fulfilled using the external tool.
        <br><br>
        Are you sure you want to proceed?`
-      : status === 'non_complaint'
+      : this.isComplaint()
         ? `You are about to change the compliance status to <b>Non Compliant</b>.
        <br><br>
        Please note that the note associated with this compliance will be permanently removed.
        <br><br>
        Are you sure you want to proceed?`
         : '';
   }
+
+  isComplaint() {
+    return this.report.configReportStatus === ComplianceStatusEnum.COMPLAINT
+      || (this.report.configReportNote && this.report.configReportNote !== '');
+  }
 }
diff --git a/frontend/src/app/compliance/shared/enums/compliance-status.enum.ts b/frontend/src/app/compliance/shared/enums/compliance-status.enum.ts
@@ -0,0 +1,4 @@
+export enum ComplianceStatusEnum {
+  COMPLAINT = 'COMPLAINT',
+  NON_COMPLAINT = 'NON_COMPLAINT'
+}
diff --git a/frontend/src/app/compliance/shared/type/compliance-report.type.ts b/frontend/src/app/compliance/shared/type/compliance-report.type.ts
@@ -6,6 +6,7 @@ import {ComplianceTypeEnum} from '../enums/compliance-type.enum';
 import {ComplianceStandardSectionType} from './compliance-standard-section.type';
 import {ComplianceTemplateParams} from './compliance-template-params.type';
 import {UtmDashboardVisualizationType} from '../../../shared/chart/types/dashboard/utm-dashboard-visualization.type';
+import {ComplianceStatusEnum} from '../enums/compliance-status.enum';
 
 export class ComplianceReportType {
   columns?: UtmFieldType[];
@@ -32,5 +33,7 @@ export class ComplianceReportType {
   status?: string;
   configReportNote?: string;
   configReportName?: string;
+  configReportRemediation?: string;
+  configReportStatus?: ComplianceStatusEnum;
   dashboard?: UtmDashboardVisualizationType[];
 }
diff --git a/frontend/src/app/shared/components/utm/util/modal-add-note/modal-add-note.component.html b/frontend/src/app/shared/components/utm/util/modal-add-note/modal-add-note.component.html
@@ -5,7 +5,7 @@
     {{textDisplay}}
   </div>
   <label [innerHTML]="message" class="font-weight-light modal-message"></label>
-  <div *ngIf="report.status === 'non_complaint'" class="w-100 mt-2">
+  <div *ngIf="!isComplaint" class="w-100 mt-2">
     <form #noteForm="ngForm">
       <textarea [(ngModel)]="note" #noteField="ngModel" required  class="form-control" name="note" rows="5"></textarea>
       <div *ngIf="noteField.invalid && noteField.dirty" class="text-danger">
@@ -18,7 +18,7 @@
       <i class="icon-cancel-circle2"></i>
       Cancel
     </button>
-    <button [disabled]="report.status === 'non_complaint' && note === ''" (click)="confirm()" [ngClass]="confirmBtnType" class="btn utm-button utm-button-primary">
+    <button [disabled]="(!isComplaint && note === '')" (click)="confirm()" [ngClass]="confirmBtnType" class="btn utm-button utm-button-primary">
       <i [ngClass]="confirmBtnIcon" class="icon-database-remove"></i>
       {{confirmBtnText}}
     </button>
diff --git a/frontend/src/app/shared/components/utm/util/modal-add-note/modal-add-note.component.ts b/frontend/src/app/shared/components/utm/util/modal-add-note/modal-add-note.component.ts
