Fixed EDM and CIS results pages

CSETWebNg/src/app/app.module.ts

@@ -465,7 +465,7 @@ import { CoverSheetAComponent } from './reports/cis/shared/cover-sheet-a/cover-s
 import { DisclaimerBlurbAComponent } from './reports/cis/shared/disclaimer-blurb-a/disclaimer-blurb-a.component';
 import { ConfigCisComponent } from './assessment/prepare/maturity/config-cis/config-cis.component';
 import { CisRankedDeficiencyComponent } from './reports/cis/cis-ranked-deficiency/cis-ranked-deficiency.component';
-import { RankedDeficienctyChartComponent } from './assessment/results/cis/ranked-deficiencty-chart/ranked-deficiencty-chart.component';
+import { RankedDeficiencyChartComponent } from './assessment/results/cis/ranked-deficiency-chart/ranked-deficiency-chart.component';
 import { RankedDeficiencyComponent } from './assessment/results/cis/ranked-deficiency/ranked-deficiency.component';
 import { CisSectionScoringComponent } from './reports/cis/cis-section-scoring/cis-section-scoring.component';
 import { CisScoringChartComponent } from './reports/cis/cis-section-scoring/cis-scoring-chart/cis-scoring-chart.component';
@@ -1021,7 +1021,7 @@ import { AnalyticsResultsComponent } from './assessment/results/analytics-result
         DisclaimerBlurbAComponent,
         ConfigCisComponent,
         CisRankedDeficiencyComponent,
-        RankedDeficienctyChartComponent,
+        RankedDeficiencyChartComponent,
         CisCommentsmarkedComponent,
         RankedDeficiencyComponent,
         CisSectionScoringComponent,

CSETWebNg/src/app/assessment/results/cis/ranked-deficiency-chart/ranked-deficiency-chart.component.html

@@ -0,0 +1,67 @@
+<!---------------------- 
+
+   Copyright 2024 Battelle Energy Alliance, LLC  
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy 
+  of this software and associated documentation files (the "Software"), to deal 
+  in the Software without restriction, including without limitation the rights 
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
+  copies of the Software, and to permit persons to whom the Software is 
+  furnished to do so, subject to the following conditions: 
+
+  The above copyright notice and this permission notice shall be included in all 
+  copies or substantial portions of the Software. 
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
+  SOFTWARE. 
+-------------------------->
+<div *transloco="let t">
+    <div *ngIf="loading">
+        <div class="spinner-container" style="margin: 2em auto">
+            <div style="max-width: 50px; max-height: 50px;"></div>
+        </div>
+    </div>
+
+    <div class="my-4" *ngIf="!loading && !hasBaseline">
+        {{t('reports.core.cis.deficiencies.no baseline')}}
+    </div>
+
+    <div *ngIf="!loading && hasBaseline" class="mb-5 mt-5">
+        <div *ngIf="hasBaseline">
+            <div class="d-flex flex-row">
+                <div class="col-4">
+                    <div class="alert alert-secondary h-100 mx-1" style="text-align:left;">
+                        <h4 class="alert-heading">“0” = BASELINE</h4>
+                        <p>The baseline is denoted at the median which is represented by the zero “0” value on the
+                            chart.
+                        </p>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="alert alert-danger h-100 mx-1">
+                        <h4 class="alert-heading">RED BAR</h4>
+                        <p>The Deficiency report shows the current CIS assessment deficiencies in red using the baseline
+                            assessment selected during the CIS Configuration Step.</p>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="alert alert-success h-100 mx-1">
+                        <h4 class="alert-heading">GREEN BAR</h4>
+                        <p>The Deficiency report shows the current CIS assessment improvements in green using the
+                            baseline
+                            assessment selected during the CIS Configuration Step.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div [class.d-none]="!hasBaseline">
+        <canvas id="canvas-ranked-deficiency" width="800" height="800">{{rankedChart}}</canvas>
+    </div>
+</div>

CSETWebNg/src/app/assessment/results/cis/ranked-deficiencty-chart/ranked-deficiencty-chart.component.ts → CSETWebNg/src/app/assessment/results/cis/ranked-deficiency-chart/ranked-deficiency-chart.component.ts

@@ -27,12 +27,12 @@ import Chart from 'chart.js/auto';
 import { CisService } from '../../../../services/cis.service';
 
 @Component({
-  selector: 'app-ranked-deficiencty-chart',
-  templateUrl: './ranked-deficiencty-chart.component.html',
-  styleUrls: ['./ranked-deficiencty-chart.component.scss', '../../../../reports/reports.scss']
+  selector: 'app-ranked-deficiency-chart',
+  templateUrl: './ranked-deficiency-chart.component.html',
+  styleUrls: ['./ranked-deficiency-chart.component.scss', '../../../../reports/reports.scss']
 })
 
-export class RankedDeficienctyChartComponent implements AfterViewInit {
+export class RankedDeficiencyChartComponent implements AfterViewInit {
 
   rankedChart: Chart;
   loading = true;
@@ -48,17 +48,17 @@ export class RankedDeficienctyChartComponent implements AfterViewInit {
     if (this.cisSvc.hasBaseline()) {
       this.hasBaseline = true;
       this.cisSvc.getDeficiencyData().subscribe((data: any) => {
-
         data.option = { options: false };
         var opts = { scales: { x: { position: 'top', min: -100, max: 100 }, x1: { position: 'bottom', min: -100, max: 100 } } };
-        this.rankedChart = this.chartSvc.buildHorizBarChart('ranked-deficiency', data, false, false, opts, false);
+        setTimeout(() => {
+          this.rankedChart = this.chartSvc.buildHorizBarChart('canvas-ranked-deficiency', data, false, false, opts, false);
+          this.loading = false;
+        }, 1000);
 
-        this.loading = false;
       });
     } else {
       this.hasBaseline = false;
       this.loading = false;
     }
   }
-
 }

CSETWebNg/src/app/assessment/results/cis/ranked-deficiency/ranked-deficiency.component.html

@@ -20,11 +20,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
   SOFTWARE. 
 -------------------------->
-<div class="d-flex flex-column justify-content-start flex-11a">
+<div class="d-flex flex-column justify-content-start flex-11a" *transloco="let t">
   <div class="white-panel d-flex flex-column justify-content-start flex-11a">
     <div class="mb-3">
-      <h3>CIS Deficiencies</h3>
-      <app-ranked-deficiencty-chart></app-ranked-deficiencty-chart>
+      <h3>{{t('reports.core.cis.deficiencies.title')}}</h3>
+
+      <app-ranked-deficiency-chart></app-ranked-deficiency-chart>
+
     </div>
 
     <app-nav-back-next [page]="'ranked-deficiency'"></app-nav-back-next>

CSETWebNg/src/app/assessment/results/cis/ranked-deficiency/ranked-deficiency.component.ts

@@ -38,5 +38,4 @@ export class RankedDeficiencyComponent implements OnInit {
   ngOnInit(): void {
     this.hasBaseline = this.cisSvc.hasBaseline();
   }
-
 }

CSETWebNg/src/app/assessment/results/cis/section-scoring/section-scoring.component.html

@@ -20,10 +20,15 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
   SOFTWARE. 
 -------------------------->
-<div class="d-flex flex-column justify-content-start flex-11a">
+<div class="d-flex flex-column justify-content-start flex-11a" *transloco="let t">
   <div class="white-panel d-flex flex-column justify-content-start flex-11a">
     <div class="mb-3">
-      <h3>CIS Section Scoring</h3>
+      <h3>{{t('reports.core.cis.section scoring.title')}}</h3>
+
+      <p>
+        {{t('reports.core.cis.section scoring.para 1')}}
+      </p>
+
       <div *ngIf="loading">
         <div class="spinner-container" style="margin: 2em auto">
           <div style="max-width: 50px; max-height: 50px;"></div>

CSETWebNg/src/app/assessment/results/cpg/cpg-practices/cpg-practices.component.html

@@ -25,9 +25,6 @@ <h3 class="d-flex flex-column flex-00a">{{t('reports.core.cpg.report.security pr
     <p>
         {{t('reports.core.cpg.report.p.b')}}
     </p>
-    <p class="mb-0">
-        {{t('reports.core.cpg.report.p.3')}}
-    </p>
 
     <!-- the table for the CPG answers -->
     <app-cpg-practice-table></app-cpg-practice-table>

CSETWebNg/src/app/assessment/results/cpg/cpg-summary/cpg-summary.component.html

@@ -24,9 +24,6 @@
     <h3 class="d-flex flex-column flex-00a">{{t('reports.core.cpg.report.performance summary')}}</h3>
     <p>
         {{t('reports.core.cpg.report.p.a')}}
-    </p>
-    <p>
-        {{t('reports.core.cpg.report.p.1')}}
         <ng-container *ngIf="isSsgApplicable">
             {{t('reports.core.cpg.report.ssg.includes ssg')}}
         </ng-container>

CSETWebNg/src/app/reports/cis/cis-ranked-deficiency/cis-ranked-deficiency.component.html

@@ -38,7 +38,7 @@
         <div>
             <h1>CIS Deficiencies</h1>
 
-            <app-ranked-deficiencty-chart></app-ranked-deficiencty-chart>
+            <app-ranked-deficiency-chart></app-ranked-deficiency-chart>
         </div>
     </div>
 </div>

CSETWebNg/src/app/reports/cpg/cpg-report/cpg-report.component.html

@@ -39,7 +39,7 @@
         <h1>{{t('reports.core.cpg.report.performance summary')}}</h1>
 
         <p>
-            {{t('reports.core.cpg.report.p.1')}}
+            {{t('reports.core.cpg.report.p.a')}}
             <ng-container *ngIf="isSsgApplicable">
                 {{t('reports.core.cpg.report.ssg.includes ssg')}}
             </ng-container>
@@ -63,7 +63,7 @@ <h4>{{t('reports.core.cpg.report.chart detail')}}</h4>
 
     <div class="page-break">
         <h1>{{t('reports.core.cpg.report.security practice checklist')}}</h1>
-        <p class="mb-0">{{t('reports.core.cpg.report.p.3')}}</p>
+        <p class="mb-0">{{t('reports.core.cpg.report.p.b')}}</p>
         <app-cpg-practice-table></app-cpg-practice-table>
     </div>