Merge branch 'master' into gosecMapperRework

apps/frontend/package.json

@@ -87,7 +87,7 @@
     "roboto-fontface": "*",
     "sanitize-html": "~2.13.0",
     "sass": "~1.32.6",
-    "sass-loader": "^14.0.0",
+    "sass-loader": "^16.0.0",
     "search-query-parser": "^1.5.5",
     "semver": "^7.6.0",
     "uuid": "^10.0.0",

apps/frontend/src/App.vue

@@ -5,8 +5,9 @@
       v-if="classification"
       :style="classificationStyle"
       class="classification-footer"
-      >{{ classification }}</span
     >
+      {{ classification }}
+    </span>
     <!-- Router view. Typically a "subclass" of Base -->
     <router-view :key="$route.fullPath" :class="classification ? 'pt-5' : ''" />
     <!-- Footer -->

apps/frontend/src/components/cards/InfoCardRow.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-row>
+    <v-col v-if="severityOverrideProps.number" cols="12">
+      <v-card
+        :color="severityOverrideProps.color"
+        class="d-flex flex-no-wrap justify-space-between"
+        elevation="12"
+      >
+        <div>
+          <v-card-title>
+            <v-icon class="pr-3" large>
+              mdi-{{ severityOverrideProps.icon }}
+            </v-icon>
+            <span class="title">{{
+              `${severityOverrideProps.title}: ${severityOverrideProps.number}`
+            }}</span>
+          </v-card-title>
+          <v-card-text>{{ severityOverrideProps.subtitle }}</v-card-text>
+        </div>
+        <v-card-actions>
+          <v-btn
+            :disabled="
+              filter.tagFilter &&
+              filter.tagFilter.indexOf('severityoverride') !== -1
+            "
+            @click="$emit('show-severity-overrides')"
+          >
+            Filter to Severity Overrides
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import {Filter, FilteredDataModule} from '@/store/data_filters';
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+interface CardProps {
+  icon: string;
+  title: string;
+  number: number;
+  subtitle: string;
+  color: string;
+}
+
+@Component
+export default class InfoCardRow extends Vue {
+  @Prop({type: Object, required: true}) readonly filter!: Filter;
+
+  get severityOverrideProps(): CardProps {
+    const filter = {
+      ...this.filter,
+      tagFilter: ['severityoverride']
+    };
+    return {
+      icon: 'delta',
+      title: 'Severity Overrides',
+      subtitle: 'Some controls have overridden severities',
+      color: 'cyan',
+      number: FilteredDataModule.controls(filter).length
+    };
+  }
+}
+</script>

apps/frontend/src/components/cards/StatusCardRow.vue

@@ -45,8 +45,9 @@
           <v-btn
             :disabled="filter.status.indexOf('Profile Error') !== -1"
             @click="$emit('show-errors')"
-            >Filter to Errors</v-btn
           >
+            Filter to Errors
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-col>
@@ -75,8 +76,9 @@
           <v-btn
             :disabled="filter.status.indexOf('Waived') !== -1"
             @click="$emit('show-waived')"
-            >Filter to Waived</v-btn
           >
+            Filter to Waived
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-col>

apps/frontend/src/components/cards/controltable/ControlRowDetails.vue

@@ -33,10 +33,10 @@
                   </span>
                 </div>
                 <span v-if="caveat">Caveat: {{ caveat }}<br /></span>
-                <span v-if="justification"
-                  >Justification: {{ justification }}<br
-                /></span>
-
+                <span v-if="justification">
+                  Justification: {{ justification }}
+                  <br />
+                </span>
                 <span v-if="rationale">Rationale: {{ rationale }}<br /></span>
                 <span v-if="comments">Comments: {{ comments }}<br /></span>
                 <v-divider />
@@ -202,7 +202,23 @@ export default class ControlRowDetails extends mixins(HtmlSanitizeMixin) {
     detailsMap.set('Caveat', this.control.hdf.descriptions.caveat);
     detailsMap.set('Desc', this.control.data.desc);
     detailsMap.set('Rationale', this.control.hdf.descriptions.rationale);
-    detailsMap.set('Severity', this.control.root.hdf.severity);
+    // default to showing severity tag, otherwise show the computed severity (based on impact or severityoverride)
+    detailsMap.set(
+      'Severity',
+      _.get(
+        this.control.root.data.tags,
+        'severity',
+        this.control.root.hdf.severity
+      )
+    );
+    detailsMap.set(
+      'Severity Override',
+      _.get(this.control.root.data.tags, 'severityoverride')
+    );
+    detailsMap.set(
+      'Severity Override Justification',
+      _.get(this.control.root.data.tags, 'severityjustification')
+    );
     detailsMap.set('Impact', this.control.data.impact);
     detailsMap.set('NIST Controls', this.control.hdf.rawNistTags.join(', '));
     detailsMap.set('CCI Controls', this.cciControlString);
@@ -219,7 +235,10 @@ export default class ControlRowDetails extends mixins(HtmlSanitizeMixin) {
     const sparseControl = _.omit(this.control, [
       'data.tags.nist',
       'data.tags.cci',
-      'data.tags.cwe'
+      'data.tags.cwe',
+      'data.tags.severity',
+      'data.tags.severityoverride',
+      'data.tags.severityjustification'
     ]);
 
     // Convert all tags to Details
@@ -253,7 +272,7 @@ export default class ControlRowDetails extends mixins(HtmlSanitizeMixin) {
     }
 
     return Array.from(detailsMap, ([name, value]) => ({name, value})).filter(
-      (v) => v.value
+      (v) => v.value !== undefined
     );
   }
 

apps/frontend/src/components/cards/controltable/ControlRowHeader.vue

@@ -41,23 +41,36 @@
 
     <template #severity>
       <v-card-text class="pa-2">
-        <div v-if="showImpact">
-          <CircleRating
-            :filled-count="severity_arrow_count(control.hdf.severity)"
-            :total-count="4"
-          />
-          <v-divider class="mx-1" />
+        <v-tooltip v-if="'severityoverride' in control.data.tags" bottom>
+          <template #activator="{on}">
+            <span v-on="on">
+              <v-chip outlined :color="severity_color">
+                <v-icon size="16" class="mr-1" data-cy="severityOverride">
+                  mdi-delta
+                </v-icon>
+                {{ (control.hdf.severity || 'none').toUpperCase() }}
+              </v-chip>
+            </span>
+          </template>
+          <span>
+            <span>
+              Severity has been overridden from
+              <span v-if="'severity' in control.data.tags">
+                {{ control.data.tags['severity'] }}
+              </span>
+              <span v-else> Unknown </span>
+              to {{ control.data.tags['severityoverride'] }}
+              <br />
+              <span v-if="'severityjustification' in control.data.tags">
+                Justification: {{ control.data.tags['severityjustification'] }}
+              </span>
+              <span v-else> No justification provided </span>
+            </span>
+          </span>
+        </v-tooltip>
+        <v-chip v-else outlined :color="severity_color">
           {{ (control.hdf.severity || 'none').toUpperCase() }}
-        </div>
-        <div v-else>
-          <CircleRating
-            :filled-count="severity_arrow_count(control.data.tags.severity)"
-            :total-count="4"
-          />
-          <br />
-          <v-divider class="mx-1" />
-          {{ (control.data.tags.severity || 'none').toUpperCase() }}
-        </div>
+        </v-chip>
       </v-card-text>
     </template>
 
@@ -79,25 +92,20 @@
       </v-card-text>
     </template>
     <template #tags>
-      <v-chip-group column active-class="NONE">
+      <v-chip-group column>
         <v-tooltip v-for="(tag, i) in nistTags" :key="'nist-chip' + i" bottom>
           <template #activator="{on}">
-            <v-chip
-              :href="tag.url"
-              target="_blank"
-              active-class="NONE"
-              v-on="on"
-            >
+            <v-chip :href="tag.url" target="_blank" v-on="on">
               {{ tag.label }}
             </v-chip>
           </template>
           <span>{{ tag.description }}</span>
         </v-tooltip>
       </v-chip-group>
-      <v-chip-group column active-class="NONE">
+      <v-chip-group column>
         <v-tooltip v-for="(tag, i) in cciTags" :key="'cci-chip' + i" bottom>
           <template #activator="{on}">
-            <v-chip style="cursor: help" active-class="NONE" v-on="on">
+            <v-chip style="cursor: help" v-on="on">
               {{ tag.label }}
             </v-chip>
           </template>
@@ -109,8 +117,8 @@
     <template #runTime>
       <v-card-text class="pa-2 title font-weight-bold">{{
         runTime
-      }}</v-card-text></template
-    >
+      }}</v-card-text>
+    </template>
 
     <template #viewed>
       <v-container class="py-0 my-0 fill-height">
@@ -133,7 +141,6 @@
 
 <script lang="ts">
 import ResponsiveRowSwitch from '@/components/cards/controltable/ResponsiveRowSwitch.vue';
-import CircleRating from '@/components/generic/CircleRating.vue';
 import HtmlSanitizeMixin from '@/mixins/HtmlSanitizeMixin';
 import {CCI_DESCRIPTIONS} from '@/utilities/cci_util';
 import {getControlRunTime} from '@/utilities/delta_util';
@@ -151,8 +158,7 @@ interface Tag {
 
 @Component({
   components: {
-    ResponsiveRowSwitch,
-    CircleRating
+    ResponsiveRowSwitch
   }
 })
 export default class ControlRowHeader extends mixins(HtmlSanitizeMixin) {
@@ -163,7 +169,6 @@ export default class ControlRowHeader extends mixins(HtmlSanitizeMixin) {
   readonly viewedControls!: string[];
 
   @Prop({type: Boolean, default: false}) readonly controlExpanded!: boolean;
-  @Prop({type: Boolean, default: false}) readonly showImpact!: boolean;
 
   get runTime(): string {
     return `${_.truncate(getControlRunTime(this.control).toString(), {
@@ -189,6 +194,10 @@ export default class ControlRowHeader extends mixins(HtmlSanitizeMixin) {
     return `status${this.control.root.hdf.status.replace(' ', '')}`;
   }
 
+  get severity_color(): string {
+    return `severity${_.startCase(this.control.hdf.severity)}`;
+  }
+
   get wasViewed(): boolean {
     return this.viewedControls.indexOf(this.control.data.id) !== -1;
   }
@@ -205,21 +214,6 @@ export default class ControlRowHeader extends mixins(HtmlSanitizeMixin) {
     );
   }
 
-  severity_arrow_count(severity: string): number {
-    switch (severity) {
-      case 'low':
-        return 1;
-      case 'medium':
-        return 2;
-      case 'high':
-        return 3;
-      case 'critical':
-        return 4;
-      default:
-        return 0;
-    }
-  }
-
   // Get NIST tag description for NIST tag, this is pulled from the 800-53 xml
   // and relies on a script not contained in the project
   descriptionForTag(tag: string): string {

apps/frontend/src/components/cards/controltable/ControlTable.vue

@@ -79,18 +79,18 @@
           </v-row>
         </template>
 
+        <template #title>
+          <ColumnHeader text="Title" sort="disabled" />
+        </template>
+
         <template #severity>
           <ColumnHeader
-            :text="showImpact ? 'Impact' : 'Severity'"
+            :text="'Severity'"
             :sort="sortSeverity"
             @input="set_sort('severity', $event)"
           />
         </template>
 
-        <template #title>
-          <ColumnHeader text="Title" sort="disabled" />
-        </template>
-
         <template #tags>
           <ColumnHeader text="800-53 Controls & CCIs" sort="disabled" />
         </template>
@@ -128,7 +128,6 @@
           :style="controlRowPinOffset"
           :control="item.control"
           :expanded="expanded.includes(item.key)"
-          :show-impact="showImpact"
           :viewed-controls="viewedControlIds"
           @toggle="toggle(item.key)"
           @control-viewed="toggleControlViewed"
@@ -153,7 +152,7 @@ import {Filter, FilteredDataModule} from '@/store/data_filters';
 import {HeightsModule} from '@/store/heights';
 import {getControlRunTime} from '@/utilities/delta_util';
 import {control_unique_key} from '@/utilities/format_util';
-import {ContextualizedControl} from 'inspecjs';
+import {ContextualizedControl, severities} from 'inspecjs';
 import * as _ from 'lodash';
 import Vue from 'vue';
 import Component from 'vue-class-component';
@@ -166,7 +165,7 @@ interface ListElt {
 
   filename: string;
 
-  // Computed values for status and severity "value", for sorting
+  // Computed values for status and severity, for sorting
   status_val: number;
   severity_val: number;
 
@@ -184,7 +183,6 @@ interface ListElt {
 export default class ControlTable extends Vue {
   @Ref('controlTableTitle') readonly controlTableTitle!: Element;
   @Prop({type: Object, required: true}) readonly filter!: Filter;
-  @Prop({type: Boolean, required: true}) readonly showImpact!: boolean;
 
   // Whether to allow multiple expansions
   singleExpand = true;
@@ -361,9 +359,7 @@ export default class ControlTable extends Vue {
           'Profile Error',
           'Failed'
         ].indexOf(d.root.hdf.status),
-        severity_val: ['none', 'low', 'medium', 'high', 'critical'].indexOf(
-          d.root.hdf.severity
-        ),
+        severity_val: severities.indexOf(d.root.hdf.severity),
         filename: _.get(
           d,
           'sourcedFrom.sourcedFrom.from_file.filename'