feat: enrich compliance evaluation details with rule, rule value, and hits

Author: elmilan06

frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluation-detail/compliance-query-evaluation-detail.component.css

@@ -15,5 +15,11 @@
 }
 
 .border-left-neutral {
-  border-left: 5px solid #e9e9e9 !important;
+  border-left: 5px solid #6C757D !important;
 }
+
+.border-left {
+  border-left: 1px solid #ccc;
+  padding-left: 10px;
+}
+

frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluation-detail/compliance-query-evaluation-detail.component.html

@@ -17,14 +17,36 @@
         </span>
       </div>
 
-      <div class="w-100" style="border-left: 1px solid #ccc; padding-left: 10px;">
+      <div class="w-100 border-left" style="padding-left: 10px;">
         <span class="text-blue-800 font-weight-light mr-2">Evaluation rule:</span>
         <span class="span-small-icon d-flex justify-content-start align-items-center">
             {{ ComplianceEvaluationRuleLabels[query.evaluationRule] }}
         </span>
       </div>
     </div>
   </div>
+  <div [ngClass]="{
+      'border-left-success': query.status === ComplianceStatusExtendedEnum.COMPLIANT,
+      'border-left-danger': query.status === ComplianceStatusExtendedEnum.NON_COMPLIANT,
+      'border-left-neutral': query.status !== ComplianceStatusExtendedEnum.COMPLIANT
+                             && query.status !== ComplianceStatusExtendedEnum.NON_COMPLIANT
+     }">
+    <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" *ngIf="query.ruleValue">
+        <span class="text-blue-800 font-weight-light mr-2">Rule value:</span>
+        <span class="span-small-icon d-flex justify-content-start align-items-center">
+           {{ query.ruleValue }}
+        </span>
+      </div>
+
+      <div class="w-100" style="padding-left: 10px;" [ngClass]="{'border-left': query.ruleValue}">
+        <span class="text-blue-800 font-weight-light mr-2">Result count:</span>
+        <span class="span-small-icon d-flex justify-content-start align-items-center">
+            {{ query.hits }}
+        </span>
+      </div>
+    </div>
+  </div>
 
   <div class="p-3">
     <div class="alert-details w-100 d-flex justify-content-start align-items-center mt-3">

frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluations-view.component.html

@@ -1,4 +1,4 @@
-<div class="container-fluid p-3">
+<div class="container-fluid px-3">
   <div class="w-100">
     <div class="control-detail-summary-header p-2">
       <h6 class="d-flex align-items-center text-blue-800 font-weight-light">

frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluations-view.component.scss

@@ -34,5 +34,5 @@
 }
 
 .border-left-neutral {
-  border-left: 5px solid #e9e9e9 !important;
+  border-left: 5px solid #6C757D !important;
 }

frontend/src/app/compliance/compliance-latest-evaluations-view/compliance-latest-evaluation-view-detail/compliance-latest-evaluation-view-detail.component.css

@@ -15,7 +15,7 @@
 }
 
 .border-left-neutral {
-  border-left: 5px solid #e9e9e9 !important;
+  border-left: 5px solid #6C757D !important;
 }
 
 button {

frontend/src/app/compliance/compliance-latest-evaluations-view/compliance-latest-evaluations-view.component.css

@@ -29,5 +29,5 @@ table {
 }
 
 .border-left-neutral {
-  border-left: 5px solid #e9e9e9 !important;
+  border-left: 5px solid #6C757D !important;
 }

frontend/src/app/compliance/shared/components/utm-compliance-timeline/compliance-timeline.component.scss

@@ -1,14 +1,14 @@
 .chart-container {
   width: 100%;
-  height: 200px;
+  height: 250px;
   overflow-x: hidden;
   overflow-y: hidden;
   display: block;
   white-space: nowrap;
 }
 
 .chart {
-  height: 200px;
+  height: 300px;
   width: max-content;
   min-width: 100%;
 }

frontend/src/app/compliance/shared/components/utm-compliance-timeline/compliance-timeline.component.ts

@@ -14,20 +14,24 @@ export class ComplianceTimelineComponent implements OnInit {
 
   options: any;
   complianceValue = [
-    'COMPLIANT',
+    'NOT_EVALUATED',
     'NON_COMPLIANT',
+    'COMPLIANT',
   ];
   bgColors = {
     COMPLIANT: '#28A745',
     NON_COMPLIANT: '#DC3545',
+    NOT_EVALUATED: '#6C757D',
   };
   textColors = {
     COMPLIANT: '#ffffff',
     NON_COMPLIANT: '#ffffff',
+    NOT_EVALUATED: '#ffffff',
   };
   lightBgColors = {
     COMPLIANT: '#E8F5E9',
     NON_COMPLIANT: '#FAEBED',
+    NOT_EVALUATED: '#E9E9E9',
   };
 
   private rawData: any[];
@@ -60,9 +64,9 @@ export class ComplianceTimelineComponent implements OnInit {
         year: 'numeric',
       });
       this.monthDays.push(dayLabel);
-
-      this.rawData.push([index, 0, entry.status === ComplianceStatusExtendedEnum.COMPLIANT ? 1 : 0]);
+      this.rawData.push([index, 0, entry.status === ComplianceStatusExtendedEnum.NOT_EVALUATED ? 1 : 0]);
       this.rawData.push([index, 1, entry.status === ComplianceStatusExtendedEnum.NON_COMPLIANT ? 1 : 0]);
+      this.rawData.push([index, 2, entry.status === ComplianceStatusExtendedEnum.COMPLIANT ? 1 : 0]);
     });
   }
 
@@ -106,10 +110,10 @@ export class ComplianceTimelineComponent implements OnInit {
       },
       grid: {
         height: '50%',
-        top: '15%',
+        top: '10%',
         left: '10%',
         right: '3%',
-        bottom: '5%',
+        bottom: '0',
         width: this.evaluations.length * 30,
         containLabel: false
       },
@@ -127,7 +131,8 @@ export class ComplianceTimelineComponent implements OnInit {
         ),
         axisLine: { show: false },
         axisTick: { show: false },
-        axisLabel: { fontSize: 10 }
+        axisLabel: { fontSize: 10,
+          formatter: (value: string) => getComplianceStatusLabel(value)}
       },
       series: [
         {

frontend/src/app/compliance/shared/enums/compliance-status.enum.ts

@@ -7,14 +7,16 @@ export enum ComplianceStatusExtendedEnum {
   COMPLIANT = 'COMPLIANT',
   NON_COMPLIANT = 'NON_COMPLIANT',
   NOT_EVALUATED = 'NOT_EVALUATED',
-  NOT_APPLICABLE = 'NOT_APPLICABLE'
+  NOT_APPLICABLE = 'NOT_APPLICABLE',
+  ERROR = 'ERROR'
 }
 
 export const ComplianceStatusLabels: Record<ComplianceStatusExtendedEnum, string> = {
   [ComplianceStatusExtendedEnum.COMPLIANT]: 'Compliant',
   [ComplianceStatusExtendedEnum.NON_COMPLIANT]: 'Non Compliant',
   [ComplianceStatusExtendedEnum.NOT_APPLICABLE]: 'Not Applicable',
   [ComplianceStatusExtendedEnum.NOT_EVALUATED]: 'Not Evaluated',
+  [ComplianceStatusExtendedEnum.ERROR]: 'Error',
 };
 
 export function getComplianceStatusLabel(

frontend/src/app/compliance/shared/type/compliance-query-base.type.ts

@@ -5,4 +5,5 @@ export class ComplianceQueryBaseType {
   queryName?: string;
   queryDescription?: string;
   evaluationRule?: ComplianceEvaluationRuleEnum;
+  ruleValue?: number;
 }