Checklist Editor for Heimdall

.github/workflows/convert-cci-list.yml

@@ -0,0 +1,60 @@
+name: Convert CCI List XML to JSON
+
+on:
+  push:
+    branches: ['master']
+
+  # Run this workflow on the 1st day at 00:00 every month
+  schedule:
+    - cron: '0 0 1 * *'
+
+env:
+  # This URL is super brittle with how links constantly get changed.
+  CCI_LIST_ZIP_URL: https://dl.dod.cyber.mil/wp-content/uploads/stigs/zip/U_CCI_List.zip
+
+jobs:
+  convert-cci-list:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v4
+      - run: git fetch --prune --unshallow
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          check-latest: true
+          cache: 'yarn'
+
+      - name: Install project dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Download CCI List
+        run: |
+          curl -o U_CCI_List.zip $CCI_LIST_ZIP_URL && unzip U_CCI_List.zip
+
+      - name: Get publish date of CCI List
+        id: publish-date
+        uses: mavrosxristoforos/[email protected]
+        with:
+          xml-file: 'U_CCI_List.xml'
+          xpath: '/*[local-name()="cci_list"]/*[local-name()="metadata"]/*[local-name()="publishdate"]'
+          namespaces: '{"ns": "http://iase.disa.mil/cci"}'
+
+      - name: Set directory environment variables for next step
+        run: |
+          echo "ROOT_DIRECTORY=$(pwd)" >> $GITHUB_ENV
+          echo "OUTPUT_DIRECTORY=$(pwd)/libs/hdf-converters/src/mappings" >> $GITHUB_ENV
+
+      - name: Convert CCI List XML to CCI->NIST, CCI->Definitions, and NIST->CCI JSON files
+        run: yarn workspace @mitre/hdf-converters cciListXml2json -i $ROOT_DIRECTORY/U_CCI_List.xml -n $OUTPUT_DIRECTORY/U_CCI_List.nist.json -d $OUTPUT_DIRECTORY/U_CCI_List.defs.json -c $OUTPUT_DIRECTORY/U_CCI_List.cci.json
+
+      - name: Commit changes to produced JSON files
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "MITRE SAF Automation"
+          git add $OUTPUT_DIRECTORY/U_CCI_List.nist.json $OUTPUT_DIRECTORY/U_CCI_List.defs.json $OUTPUT_DIRECTORY/U_CCI_List.cci.json
+          git commit -sm "Update CCI List to the current NIST and definition mappings as of $DATETIME"
+          git push
+        env:
+          DATETIME: ${{steps.publish-date.outputs.info}}

apps/frontend/package.json

@@ -89,6 +89,7 @@
     "sass": "~1.32.6",
     "sass-loader": "^16.0.0",
     "search-query-parser": "^1.5.5",
+    "search-string": "^3.1.0",
     "semver": "^7.6.0",
     "uuid": "^11.0.2",
     "vue": "~2.7.16",

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

@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import {ColorHackModule} from '@/store/color_hack';
-import {Filter} from '@/store/data_filters';
+import {ControlsFilter} from '@/store/data_filters';
 import {calculateCompliance} from '@/store/status_counts';
 import {formatCompliance} from '@mitre/hdf-converters';
 import {ApexOptions} from 'apexcharts';
@@ -27,7 +27,7 @@ import {Prop} from 'vue-property-decorator';
   }
 })
 export default class ComplianceChart extends Vue {
-  @Prop({type: Object, required: true}) readonly filter!: Filter;
+  @Prop({type: Object, required: true}) readonly filter!: ControlsFilter;
 
   get chartOptions(): ApexOptions {
     // Produce our options

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

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import {Filter, FilteredDataModule} from '@/store/data_filters';
+import {ControlsFilter, FilteredDataModule} from '@/store/data_filters';
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import {Prop} from 'vue-property-decorator';
@@ -49,7 +49,7 @@ interface CardProps {
 
 @Component
 export default class InfoCardRow extends Vue {
-  @Prop({type: Object, required: true}) readonly filter!: Filter;
+  @Prop({type: Object, required: true}) readonly filter!: ControlsFilter;
 
   get severityOverrideProps(): CardProps {
     const filter = {

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

@@ -2,19 +2,20 @@
   <ApexPieChart
     :categories="categories"
     :series="series"
-    @category-selected="onSelect"
+    @slice-selected="onSliceSelect"
+    @legend-selected="onLegendSelect"
   />
 </template>
 
 <script lang="ts">
 import ApexPieChart, {Category} from '@/components/generic/ApexPieChart.vue';
-import {Filter} from '@/store/data_filters';
+import {ControlsFilter} from '@/store/data_filters';
 import {SeverityCountModule} from '@/store/severity_counts';
 import {Severity} from 'inspecjs';
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import {Prop} from 'vue-property-decorator';
-import {SearchModule, valueToSeverity} from '../../store/search';
+import {SearchEntry, SearchModule} from '../../store/search';
 
 /**
  * Categories property must be of type Category
@@ -26,8 +27,8 @@ import {SearchModule, valueToSeverity} from '../../store/search';
   }
 })
 export default class SeverityChart extends Vue {
-  @Prop({type: Array}) readonly value!: Severity[];
-  @Prop({type: Object, required: true}) readonly filter!: Filter;
+  @Prop({type: Array}) readonly value!: SearchEntry<Severity>[];
+  @Prop({type: Object, required: true}) readonly filter!: ControlsFilter;
 
   categories: Category<Severity>[] = [
     {label: 'None', value: 'none', color: 'severityNone'},
@@ -59,22 +60,44 @@ export default class SeverityChart extends Vue {
     ];
   }
 
-  onSelect(severity: Category<Severity>) {
+  onSliceSelect(severity: Category<Severity>) {
+    const singleSelected =
+      SearchModule.inFileSearchTerms.severityFilter.length === 1;
+    for (const filter of SearchModule.inFileSearchTerms.severityFilter) {
+      SearchModule.removeSearchFilter({
+        field: 'severity',
+        value: filter.value,
+        negated: false // Defaulted as false
+      });
+    }
+    if (!singleSelected) {
+      // Apply selected status
+      SearchModule.addSearchFilter({
+        field: 'severity',
+        value: severity.value.toLowerCase(),
+        negated: false // Defaulted as false
+      });
+    }
+  }
+
+  onLegendSelect(severity: Category<Severity>) {
     // In the case that the values are the same, we want to instead emit null
     if (
       this.value &&
-      this.value?.indexOf(valueToSeverity(severity.value)) !== -1
+      this.value?.find((obj) => {
+        return obj.value === severity.value;
+      }) !== undefined
     ) {
       SearchModule.removeSearchFilter({
         field: 'severity',
-        value: valueToSeverity(severity.value),
-        previousValues: this.value
+        value: severity.value,
+        negated: false // Defaulted as false
       });
     } else {
       SearchModule.addSearchFilter({
         field: 'severity',
-        value: valueToSeverity(severity.value),
-        previousValues: this.value
+        value: severity.value,
+        negated: false // Defaulted as false
       });
     }
   }

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

@@ -10,7 +10,7 @@
       <v-card
         height="100%"
         :color="getCardColor(card)"
-        @click="toggleFilter(card.title)"
+        @click="toggleFilter(card.value)"
       >
         <v-card-title>
           <v-icon large left>mdi-{{ card.icon }}</v-icon>
@@ -86,26 +86,29 @@
 </template>
 
 <script lang="ts">
-import {ExtendedControlStatus, Filter} from '@/store/data_filters';
+import {ExtendedControlStatus, ControlsFilter} from '@/store/data_filters';
 import {StatusCountModule} from '@/store/status_counts';
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import {Prop} from 'vue-property-decorator';
+import {LowercasedControlStatus} from 'inspecjs';
 
 interface CardProps {
   icon: string;
   title: ExtendedControlStatus;
+  value: LowercasedControlStatus | 'waived';
   number: number;
   subtitle: string;
   color: string;
 }
 
 @Component
 export default class StatusCardRow extends Vue {
-  @Prop({type: Object, required: true}) readonly filter!: Filter;
-  @Prop({type: Array, required: false}) readonly currentStatusFilter!: Filter;
+  @Prop({type: Object, required: true}) readonly filter!: ControlsFilter;
+  @Prop({type: Array, required: false})
+  readonly currentStatusFilter!: ControlsFilter;
 
-  get overlayRemovedFilter(): Filter {
+  get overlayRemovedFilter(): ControlsFilter {
     return {
       fromFile: this.filter.fromFile,
       omit_overlayed_controls: this.filter.omit_overlayed_controls
@@ -118,6 +121,7 @@ export default class StatusCardRow extends Vue {
       {
         icon: 'check-circle',
         title: 'Passed',
+        value: 'passed',
         subtitle: `${StatusCountModule.countOf(
           this.overlayRemovedFilter,
           'PassedTests'
@@ -128,6 +132,7 @@ export default class StatusCardRow extends Vue {
       {
         icon: 'close-circle',
         title: 'Failed',
+        value: 'failed',
         subtitle: `${StatusCountModule.countOf(
           this.overlayRemovedFilter,
           'PassingTestsFailedControl'
@@ -147,6 +152,7 @@ export default class StatusCardRow extends Vue {
       {
         icon: 'minus-circle',
         title: 'Not Applicable',
+        value: 'not applicable',
         subtitle: `System exception or absent component`,
         color: 'statusNotApplicable',
         number: StatusCountModule.countOf(
@@ -157,6 +163,7 @@ export default class StatusCardRow extends Vue {
       {
         icon: 'alert-circle',
         title: 'Not Reviewed',
+        value: 'not reviewed',
         subtitle: `Can only be tested manually at this time`,
         color: 'statusNotReviewed',
         number: StatusCountModule.countOf(
@@ -176,6 +183,7 @@ export default class StatusCardRow extends Vue {
     return {
       icon: 'alert',
       title: 'Profile Error',
+      value: 'profile error',
       subtitle: `Errors running test - check profile run privileges or check with the author of profile.`,
       color: 'statusProfileError',
       number: StatusCountModule.countOf(filter, 'Profile Error')
@@ -186,6 +194,7 @@ export default class StatusCardRow extends Vue {
     return {
       icon: 'alert-circle',
       title: 'Waived',
+      value: 'waived',
       subtitle: `Consider using an overlay or manual attestation to properly address this control.`,
       color: 'statusNotApplicable',
       number: StatusCountModule.countOf(
@@ -195,21 +204,47 @@ export default class StatusCardRow extends Vue {
     };
   }
 
+  get negatedStatuses(): string[] {
+    if (this.filter.status !== undefined) {
+      let negatedStatuses: string[] = [];
+      this.filter.status?.forEach((status) => {
+        if (status.negated) {
+          negatedStatuses.push(status.value);
+        }
+      });
+      return negatedStatuses;
+    }
+    return [];
+  }
+
   getCardColor(card: CardProps): string {
     if (
       this.filter.status?.length === 0 ||
       this.filter.status?.some(
         (statusFilter) =>
-          statusFilter.toLowerCase() === card.title.toLowerCase()
-      )
+          statusFilter.value.toLowerCase() == card.value &&
+          statusFilter.negated === false
+      ) ||
+      (!this.negatedStatuses.some(
+        (statusFilter) => statusFilter === card.value
+      ) &&
+        this.filter.status?.some(
+          (statusFilter) =>
+            statusFilter.value.toLowerCase() !== card.value &&
+            statusFilter.negated === true
+        ))
     ) {
       return card.color;
     }
     return '';
   }
 
-  toggleFilter(filter: ExtendedControlStatus) {
-    if (this.filter.status?.includes(filter)) {
+  toggleFilter(filter: LowercasedControlStatus | 'waived') {
+    if (
+      this.filter.status?.find((obj) => {
+        return obj.value.toLowerCase() === filter;
+      }) !== undefined
+    ) {
       this.$emit('remove-filter', filter);
     } else {
       this.$emit('add-filter', filter);