Checklist Editor for Heimdall

apps/frontend/package.json

@@ -86,6 +86,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);

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

@@ -3,13 +3,14 @@
     :categories="categories"
     :series="series"
     :center-value="centerValue"
-    @category-selected="onSelect"
+    @slice-selected="onSliceSelect"
+    @legend-selected="onLegendSelect"
   />
 </template>
 
 <script lang="ts">
 import ApexPieChart, {Category} from '@/components/generic/ApexPieChart.vue';
-import {ExtendedControlStatus, Filter} from '@/store/data_filters';
+import {ExtendedControlStatus, ControlsFilter} from '@/store/data_filters';
 import {calculateCompliance, StatusCountModule} from '@/store/status_counts';
 import {ControlStatus} from 'inspecjs';
 import Vue from 'vue';
@@ -32,7 +33,8 @@ export default class StatusChart extends Vue {
     | ExtendedControlStatus[]
     | null;
 
-  @Prop({type: Object, required: true}) readonly filter!: Filter;
+  @Prop({type: Object, required: true}) readonly filter!: ControlsFilter;
+
   @Prop({type: Boolean, default: false}) showCompliance!: boolean;
 
   categories: Category<ControlStatus>[] = [
@@ -81,18 +83,42 @@ export default class StatusChart extends Vue {
     ];
   }
 
-  onSelect(status: Category<ControlStatus>) {
-    if (SearchModule.statusFilter?.indexOf(status.value) !== -1) {
+  onSliceSelect(status: Category<ControlStatus>) {
+    const singleSelected =
+      SearchModule.inFileSearchTerms.statusFilter.length === 1;
+    for (const filter of SearchModule.inFileSearchTerms.statusFilter) {
+      SearchModule.removeSearchFilter({
+        field: 'status',
+        value: filter.value,
+        negated: false // Defaulted as false
+      });
+    }
+    if (!singleSelected) {
+      // Apply selected status
+      SearchModule.addSearchFilter({
+        field: 'status',
+        value: status.value.toLowerCase(),
+        negated: false // Defaulted as false
+      });
+    }
+  }
+
+  onLegendSelect(status: Category<ControlStatus>) {
+    if (
+      SearchModule.inFileSearchTerms.statusFilter?.find((obj) => {
+        return obj.value === status.value.toLowerCase();
+      }) !== undefined
+    ) {
       SearchModule.removeSearchFilter({
         field: 'status',
-        value: status.value,
-        previousValues: this.value || []
+        value: status.value.toLowerCase(),
+        negated: false // Defaulted as false
       });
     } else {
       SearchModule.addSearchFilter({
         field: 'status',
-        value: status.value,
-        previousValues: this.value || []
+        value: status.value.toLowerCase(),
+        negated: false // Defaulted as false
       });
     }
   }

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

@@ -61,6 +61,7 @@
 
 <script lang="ts">
 import HtmlSanitizeMixin from '@/mixins/HtmlSanitizeMixin';
+import {FilteredDataModule} from '@/store/data_filters';
 import {HDFControlSegment} from 'inspecjs';
 import Component, {mixins} from 'vue-class-component';
 import {Prop} from 'vue-property-decorator';
@@ -71,8 +72,12 @@ export default class ControlRowCol extends mixins(HtmlSanitizeMixin) {
   @Prop({type: Object, required: true}) readonly result!: HDFControlSegment;
 
   get status_color(): string {
-    // maps stuff like "not applicable" -> "statusnotapplicable", which is a defined color name
-    return `status${this.statusCode.replace(' ', '')}`;
+    // notMatched is added due to potential but not likely undefined results of .find function
+    const statusColor: string =
+      FilteredDataModule.controlStatusSwitches.find(
+        (controlSwitch) => controlSwitch.value === this.statusCode
+      )?.color ?? 'notMatched';
+    return statusColor;
   }
 
   get resultMessage(): string | undefined {

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

@@ -95,7 +95,11 @@
       <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" v-on="on">
+            <v-chip
+              :href="`${tag.url}#active-release-version`"
+              target="_blank"
+              v-on="on"
+            >
               {{ tag.label }}
             </v-chip>
           </template>