HTML Reports based on filter data

apps/frontend/src/components/global/ExportHTMLModal.vue

@@ -33,6 +33,16 @@
             <pre class="pt-5" v-text="description" />
           </v-col>
         </v-row>
+        <v-row>
+          <v-col cols="1">
+            <v-icon color="primary">mdi-information-variant-circle</v-icon>
+          </v-col>
+          <v-col>
+            Both Manager and Administrator Reports can be data intensive,
+            does consuming computer memory resources, which can take longer for
+            the browser to render the page.
+          </v-col>
+        </v-row>
       </v-card-text>
       <v-divider />
       <v-card-actions>
@@ -57,6 +67,7 @@ import {Filter} from '../../store/data_filters';
 import {InspecDataModule} from '../../store/data_store';
 import {SnackbarModule} from '../../store/snackbar';
 import {FromHDFToHTMLMapper} from '@mitre/hdf-converters';
+import {SourcedContextualizedEvaluation} from '../../store/report_intake';
 
 // All selectable export types for an HTML export
 enum FileExportTypes {
@@ -119,22 +130,32 @@ export default class ExportHTMLModal extends Vue {
     }
 
     const files = [];
+    const filteredStatus = this.filter.status!.toString();
+    const filteredSeverity = this.filter.severity!.toString();
+
     for (const fileId of this.filter.fromFile) {
       const file = InspecDataModule.allEvaluationFiles.find(
         (f) => f.uniqueId === fileId
       );
+
       if (file) {
         const data = file.evaluation;
+
+        const filteredControls = this.getFilterControlIds(
+          data,
+          filteredStatus,
+          filteredSeverity
+        );
         const fileName = file.filename;
         const fileID = file.uniqueId;
-        files.push({data, fileName, fileID});
+        files.push({data, fileName, fileID, filteredControls});
       }
     }
-
     // Generate and export HTML file
     const body = await new FromHDFToHTMLMapper(files, this.exportType).toHTML(
       '/static/export/'
     );
+
     saveAs(
       new Blob([s2ab(body)], {type: 'application/octet-stream'}),
       `${this.exportType}_Report_${new Date().toString()}.html`.replace(
@@ -145,5 +166,80 @@ export default class ExportHTMLModal extends Vue {
 
     this.closeModal();
   }
+
+  /**
+   * Generate an array containing the control identification numbers
+   * (profiles.controls) selected. The Id is extracted for the
+   * profiles.controls.id, it can be CIS, STIG (V or SV), CWEID, WASCID,
+   * or any other control Id.
+   *
+   * Possible selection permutations are:
+   *   - Status (pass, failed, etc)
+   *   - Severity ( low, medium, etc)
+   *   - Combination of Status and Severity
+   */
+  getFilterControlIds(
+    data: SourcedContextualizedEvaluation,
+    status: string,
+    severity: string
+  ): string[] {
+    /**
+     * NOTE: The filterControls array is used to specify what controls
+     * are selected based on Status and Severity selection.
+     * If we use the approach of filtering the content from the data object
+     * (e.g.
+     *   data.data.profiles[0].controls =
+     *     data.data.profiles[0].controls.filter((control) => {
+     *       if (filteredControls.includes(control.id)) {
+     *         return filteredControls.includes(control.id);
+     *       }
+     *     });
+     * )
+     * the contextualize object does not get updated and the results
+     * in data_store get out of sync, there is, when utilizing the
+     * ".contains" it returns the results object (child of the controls object)
+     *  where the file.evaluations returns the filtered controls.
+     */
+    let filteredControls: string[] = [];
+    // Both Status and Severity selection
+    if (status.length > 0 && severity.length > 0) {
+      data.contains.map((profile) => {
+        profile.contains.map((result) => {
+          if (
+            status?.includes(result.root.hdf.status) &&
+            severity?.includes(result.root.hdf.severity)
+          ) {
+            filteredControls.push(result.data.id);
+          }
+        });
+      });
+      // Status selection
+    } else if (status.length > 0) {
+      data.contains.map((profile) => {
+        profile.contains.map((result) => {
+          if (status?.includes(result.root.hdf.status)) {
+            filteredControls.push(result.data.id);
+          }
+        });
+      });
+      // Severity selection
+    } else if (severity.length > 0) {
+      data.contains.map((profile) => {
+        profile.contains.map((result) => {
+          if (severity?.includes(result.root.hdf.severity)) {
+            filteredControls.push(result.data.id);
+          }
+        });
+      });
+      // No selection
+    } else {
+      data.contains.map((profile) => {
+        profile.contains.map((result) => {
+          filteredControls.push(result.data.id);
+        });
+      });
+    }
+    return filteredControls;
+  }
 }
 </script>

apps/frontend/src/components/global/upload_tabs/FileReader.vue

@@ -103,9 +103,13 @@
                 <v-progress-circular
                   indeterminate
                   color="#ff5600"
-                  :size="80"
-                  :width="20"
-                />
+                  :size="120"
+                  :width="15"
+                >
+                  <template #default>
+                    <b>{{ percent }}% loaded</b>
+                  </template>
+                </v-progress-circular>
               </div>
             </div>
           </v-col>
@@ -140,7 +144,7 @@ interface VueFileAgentRecord {
 export default class FileReader extends mixins(ServerMixin) {
   fileRecords: Array<VueFileAgentRecord> = [];
   loading = false;
-
+  percent = 0;
   isActiveDialog = false;
 
   filesSelected() {
@@ -151,10 +155,14 @@ export default class FileReader extends mixins(ServerMixin) {
 
   /** Callback for our file reader */
   commit_files(files: File[]) {
+    const totalFiles = files.length;
+    let index = 1;
     Promise.all(
       files.map(async (file) => {
         try {
-          return await InspecIntakeModule.loadFile({file});
+          const fileId = await InspecIntakeModule.loadFile({file});
+          this.percent = Math.floor((index++ / totalFiles) * 100);
+          return fileId;
         } catch (err) {
           SnackbarModule.failure(String(err));
         }
@@ -174,6 +182,7 @@ export default class FileReader extends mixins(ServerMixin) {
       })
       .finally(() => {
         this.loading = false;
+        this.percent = 0;
       });
   }
 

apps/frontend/src/views/Results.vue

@@ -276,6 +276,9 @@ export default class Results extends mixins(RouteMixin, ServerMixin) {
   treeFilters: TreeMapState = [];
   controlSelection: string | null = null;
 
+  gotStatus: boolean = false;
+  gotSeverity: boolean = false;
+
   /** Model for if all-filtered snackbar should be showing */
   filterSnackbar = false;
 

libs/hdf-converters/package.json

@@ -75,4 +75,4 @@
       "^.+\\.ts$": "ts-jest"
     }
   }
-}
+}

libs/hdf-converters/src/converters-from-hdf/html/reverse-html-mapper.ts

@@ -29,12 +29,14 @@ type InputData = {
   data: ContextualizedEvaluation | string;
   fileName: string;
   fileID: string;
+  filteredControls?: string[];
 };
 
 type ProcessedData = {
   data: ContextualizedEvaluation;
   fileName: string;
   fileID: string;
+  filteredControls?: string[];
 };
 
 // All selectable export types for an HTML export
@@ -174,7 +176,12 @@ export class FromHDFToHTMLMapper {
       }
 
       this.addFiledata(
-        {data: file.data, fileName: file.fileName, fileID: file.fileID},
+        {
+          data: file.data,
+          fileName: file.fileName,
+          fileID: file.fileID,
+          filteredControls: file.filteredControls
+        },
         exportType
       );
     }
@@ -199,11 +206,24 @@ export class FromHDFToHTMLMapper {
 
     // Pull out results from file
     const allResultLevels: ContextualizedControl[] = [];
-    file.data.contains.map((profile) => {
-      profile.contains.map((result) => {
-        allResultLevels.push(result);
+    if (file.filteredControls === undefined) {
+      file.data.contains.map((profile) => {
+        profile.contains.map((result) => {
+          allResultLevels.push(result);
+        });
       });
-    });
+    } else {
+      file.data.contains.flatMap((profile) => {
+        profile.contains.flatMap((result) => {
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          for (const element of file.filteredControls!) {
+            if (element === result.data.id) {
+              allResultLevels.push(result);
+            }
+          }
+        });
+      });
+    }
 
     // Begin filling out outpuData object to pass into HTML template
     // Set high level generalized profile details
@@ -310,7 +330,7 @@ export class FromHDFToHTMLMapper {
     };
 
     // Calculate & set compliance level and color from result statuses
-    // Set default complaince level and color
+    // Set default compliance level and color
     this.outputData.compliance.level = '0.00%';
     this.outputData.compliance.color = 'low';
 
@@ -324,7 +344,9 @@ export class FromHDFToHTMLMapper {
           100
       );
       // Set compliance level
-      this.outputData.compliance.level = complianceLevel;
+      this.outputData.compliance.level = complianceLevel.includes('NaN')
+        ? '0.00%'
+        : complianceLevel;
       // Determine color of compliance level
       // High compliance is green, medium is yellow, low is red
       this.outputData.compliance.color = translateCompliance(complianceLevel);
@@ -495,7 +517,7 @@ export class FromHDFToHTMLMapper {
     return text;
   }
 
-  // Prompt HTML generation from data pulled from file during constructor intialization
+  // Prompt HTML generation from data pulled from file during constructor initialization
   // Requires path to prompt location of needed files relative to function call location
   async toHTML(path: string): Promise<string> {
     // Pull export template + styles and create outputData object containing data to fill template with
@@ -517,7 +539,6 @@ export class FromHDFToHTMLMapper {
       '//# sourceMappingURL=tw-elements.umd.min.js.map',
       ''
     );
-
     // Render template and return generated HTML file
     return Mustache.render(template, this.outputData);
   }

libs/inspecjs/src/compat_wrappers.ts

@@ -109,12 +109,14 @@ export interface HDFControl {
    */
   parsedNistRevision: NistRevision | null;
 
-  /** Get the start time of this control's run, as determiend by the time of the first test.
+  /**
+   * Get the start time of this control's run, as determined by the time of the first test.
    * If no tests were run, (it is a profile-json or has no tests) returns undefined
    */
   start_time?: string;
 
-  /** Get the results of this control's control segments  as a list.
+  /**
+   * Get the results of this control's control segments  as a list.
    * If no tests were run, (this is a profile-json) returns undefined.
    * Can be empty in the rare case that no control segments exist/were run.
    */

libs/inspecjs/src/context.ts

@@ -1,5 +1,5 @@
 /**
- * Provides general utilities for articulating associations beteen evaluations, profiles, and controls.
+ * Provides general utilities for articulating associations between evaluations, profiles, and controls.
  * Especially useful for handling overlay/wrapper profiles.
  */
 
@@ -206,7 +206,7 @@ export function contextualizeEvaluation(
 
   // Link each contextualized control
   for (const cc of allControls) {
-    // Behaviour changes based on if we have well-formed or malformed profile dependency
+    // Behavior changes based on if we have well-formed or malformed profile dependency
     if (cc.sourcedFrom.extendsFrom.length || cc.sourcedFrom.extendedBy.length) {
       // Our profile is a baseline! No need to continue - children will make connections for us
       // If we aren't extended from something we just drop. Our children will make connections for us