Merge pull request #3968 from cisagov/feat/CSET-2769

Diagram report layout update Feat/cset 2769

CSETWebNg/src/app/app.module.ts

@@ -671,6 +671,7 @@ import { ReportListRraComponent } from './assessment/results/reports/report-list
 import { ReportListCpgComponent } from './assessment/results/reports/report-list/reports-list-cpg/report-list-cpg.component';
 import { ReportListMvraComponent } from './assessment/results/reports/report-list/report-list-mvra/report-list-mvra.component';
 import { ReportListCmmcComponent } from './assessment/results/reports/report-list/report-list-cmmc/report-list-cmmc.component';
+import { ReportListDiagramComponent } from './assessment/results/reports/report-list/report-list-diagram/report-list-diagram.component';
 import { ReportListC2M2Component } from './assessment/results/reports/report-list/report-list-c2m2/report-list-c2m2.component';
 
 
@@ -1294,7 +1295,8 @@ import { ReportListC2M2Component } from './assessment/results/reports/report-lis
     ReportListCpgComponent, 
     ReportListMvraComponent, 
     ReportListCmmcComponent, 
-    ReportListC2M2Component
+    ReportListC2M2Component, 
+    ReportListDiagramComponent
   ],
   providers: [
     TranslocoService,

CSETWebNg/src/app/assessment/results/reports/report-list/report-list-diagram/report-list-diagram.component.html

@@ -0,0 +1,24 @@
+<!----------------------
+
+   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.
+-------------------------->
+
+<app-report-list sectionId="DIAGRAM" [list]="reportList"></app-report-list>

CSETWebNg/src/app/assessment/results/reports/report-list/report-list-diagram/report-list-diagram.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-report-list-diagram',
+  templateUrl: './report-list-diagram.component.html'
+})
+export class ReportListDiagramComponent {
+
+  reportList = [
+    {
+      linkUrl: "executive"
+    },
+    {
+      linkUrl: "sitesummary"
+    },
+    {
+      linkUrl: "securityplan"
+    },
+    {
+      linkUrl: "detail"
+    }
+  ];
+}

CSETWebNg/src/app/assessment/results/reports/reports.component.html

@@ -56,29 +56,14 @@ <h3>{{ 'titles.reports' | transloco }}</h3>
           {{t('observations tear-out sheets.summary')}}
          </div>
     </div>
-</div>
+  </div>
 
+
 
   <div [class.div-shield]="disableEntirePage">
-    <div *ngIf="!!assessSvc.assessment && (assessSvc.assessment.useStandard || assessSvc.assessment.useDiagram) && !isMobile" 
-      class="d-flex flex-column justify-content-start align-items-start mb-4">
-      <h4>{{t('standards and diagram')}}</h4>
-      <button (click)="clickReportLink('executive')" tabindex="0" class="btn btn-link btn-link-dark text-left">
-        {{t('executive summary')}}
-      </button>
-
-      <button (click)="clickReportLink('sitesummary')" tabindex="0" class="btn btn-link btn-link-dark text-left">
-        {{t('site summary report')}}
-      </button>
 
-      <button (click)="clickReportLink('securityplan')" tabindex="0" class="btn btn-link btn-link-dark text-left">
-        {{t('site cybersecurity plan')}}
-      </button>
-
-      <button (click)="clickReportLink('detail')" tabindex="0" class="btn btn-link btn-link-dark text-left">
-        {{t('site detail report')}}
-      </button>
-    </div>
+    <!-- DIAGRAM -->
+    <app-report-list-diagram *ngIf="!!assessSvc.assessment && (assessSvc.assessment.useStandard || assessSvc.assessment.useDiagram) && !isMobile"></app-report-list-diagram>
 
     <!-- CMMC -->
     <app-report-list-cmmc *ngIf="!!assessSvc.assessment &&

CSETWebNg/src/app/reports/executive-summary/executive-summary.component.html

@@ -49,7 +49,7 @@
     <app-overall-compliance></app-overall-compliance>
 
     <h1 *ngIf="response?.information.assessment_Description">
-      {{t('reports.high level assessment desc')}}
+      {{t('reports.high level assessment label')}}
     </h1>
     <p [innerHTML]="reportSvc.formatLinebreaks(response?.information.assessment_Description)">
     </p>

CSETWebNg/src/assets/i18n/en.json

@@ -751,6 +751,25 @@
           "title": "C2M2 Report",
           "desc": "This report includes a detailed description of the model architecture, a series of charts and tables that summarize the responses gathered throughout the assessment process, self-evaluation notes, and a list of all partially implemented and not implemented practices. This report enables organizations to analyze and assess their cybersecurity capabilities effectively and identify areas for improvement."
         }
+      },
+      "diagram": {
+        "sectionTitle": "Network Diagram",
+        "1": {
+          "title": "Executive Summary",
+          "desc": "This report includes the high-level assessment description, the executive summary, the Security Assurance Level (SAL), and a set of charts that highlight overall compliance and compliance by component type."
+        },
+        "2": {
+          "title": "Site Summary Report",
+          "desc": "This report includes the same information as the Executive Summary as well as site information, the network diagram, component compliance by subject area, findings and recommendations from basic network analysis, the document library, comments, alternate justifications for responses, and questions marked for review."
+        },
+        "3": {
+          "title": "Site Cybersecurity Plan",
+          "desc": "This template is intended to be used as a tool for the development of a security plan. The template assists in identifying the controls in place and those needing further implementation based upon the answers provided in the assessment. The purpose of the security plan is to provide an overview of the security requirements of the system and describe the controls in place or planned, for meeting those requirements. "
+        },
+        "4": {
+          "title": "Site Detail Report",
+          "desc": "This report includes the same information as the Site Summary Report as well as a list of all network component questions and their corresponding answers."
+        }
       }
     },
     "assessment complete message": "Thank you for completing your assessment. The reports on this page capture summaries of your results that can help your organization’s cybersecurity planning and growth going forward. The assessment was last updated {date}.",