TAT-144 apply scores and filters to technique list

scripts/update_techniques.js

@@ -110,7 +110,7 @@ const DESTINATION_FILE = "src/data/Techniques.json";
         technique.has_splunk = !!r.getCell("Q").value;
 
         technique.cis_controls = r.getCell("R").value
-          ? r.getCell("R").value.toString().split(", ")
+          ? r.getCell("R").value.toString().replace(/\s/g, "").split(",")
           : [];
         technique.nist_controls = r.getCell("T").value
           ? r.getCell("T").value.toString().split(",")

src/components/CalculatorFilters.vue

@@ -2,10 +2,18 @@
     <div>
         <Accordion>
             <AccordionTab v-for="group in calculatorStore.filterProperties" :key="group.id" :header="group.label">
+                <div v-if="group.id === 'nist'" class="checkbox-group">
+                    <Checkbox v-model="checkAllNIST" :binary="true" input-id="select_all_nist"></Checkbox>
+                    <label for="select_all_nist" class="my-auto">All NIST Controls</label>
+                </div>
+                <div v-if="group.id === 'cis'" class="checkbox-group">
+                    <Checkbox v-model="checkAllCIS" :binary="true" input-id="select_all_cis"></Checkbox>
+                    <label for="select_all_cis" class="my-auto">All CIS Controls</label>
+                </div>
                 <div v-for="option in group.options" :key="option.id" class="checkbox-group">
-                    <Checkbox :input-id="option.id" :value="option.name" v-model="this.filters[group.id]"
-                        class="my-auto" />
-                    <label class="my-auto">{{ option.name }}</label>
+                    <Checkbox v-model="filters[group.id]" :value="option.name" :input-id="option.name" class="my-auto">
+                    </Checkbox>
+                    <label :for="option.name" class="my-auto">{{ option.name }}</label>
                 </div>
             </AccordionTab>
         </Accordion>
@@ -28,6 +36,34 @@ export default defineComponent({
         };
     },
     computed: {
+        checkAllNIST: {
+            get: function () {
+                return this.calculatorStore.filterProperties[0].options ? this.filters.nist.length == this.calculatorStore.filterProperties[0].options.length : false;
+            },
+            set: function (value) {
+                const checked = [];
+                if (value) {
+                    this.calculatorStore.filterProperties[0].options.forEach(function (lang) {
+                        checked.push(lang.id);
+                    });
+                }
+                this.filters.nist = checked.sort((a, b) => a.localeCompare(b, "en", { numeric: true }));
+            }
+        },
+        checkAllCIS: {
+            get: function () {
+                return this.calculatorStore.filterProperties[1].options ? this.filters.cis.length == this.calculatorStore.filterProperties[1].options.length : false;
+            },
+            set: function (value) {
+                const checked = [];
+                if (value) {
+                    this.calculatorStore.filterProperties[1].options.forEach(function (lang) {
+                        checked.push(lang.id);
+                    });
+                }
+                this.filters.cis = checked.sort((a, b) => a.localeCompare(b, "en", { numeric: true }));
+            }
+        },
         filters() {
             this.calculatorStore.setFilters()
             return this.calculatorStore.activeFilters
@@ -37,7 +73,7 @@ export default defineComponent({
         saveNewFilterValues() {
             this.calculatorStore.updateActiveFilters(this.filters)
         },
-    }
+    },
 });
 </script>
 

src/components/SystemScoreSection.vue

@@ -15,7 +15,7 @@
         <div v-for="filter of Object.keys(this.calculatorStore.activeFilters)" :key="filter" class="inline-block">
             <span class="mr-4 w-max inline-block" v-if="this.calculatorStore.activeFilters[filter].length > 0">
                 {{ filter }}:
-                <span class="highlight">{{ this.calculatorStore.activeFilters[filter].join(", ") }}</span>
+                <span class="highlight">{{ getFilterText(filter) }}</span>
             </span>
         </div>
         <div class="lg:inline-block hidden cursor-pointer" @click="editSelections()"
@@ -44,6 +44,15 @@ export default defineComponent({
             if (this.calculatorStore.systemScore[key].label === "None") { return "No" }
             return this.calculatorStore.systemScore[key].label
         },
+        getFilterText(key) {
+            if (key === "nist" && this.calculatorStore.allNISTOptions.toLocaleString() == this.calculatorStore.activeFiltersObj.nist.sort((a, b) => a.localeCompare(b, "en", { numeric: true })).toLocaleString()) {
+                return "All NIST Controls"
+            }
+            if (key === "cis" && this.calculatorStore.allCISOptions.toLocaleString() == this.calculatorStore.activeFiltersObj.cis.sort((a, b) => a.localeCompare(b, "en", { numeric: true })).toLocaleString()) {
+                return "All CIS Controls"
+            }
+            return this.calculatorStore.activeFilters[key].join(", ")
+        },
         editSelections() {
             router.push({ path: '/calculator' })
         },

src/components/TopTenAccordion.vue

@@ -1,17 +1,17 @@
 <template>
     <div>
         <Accordion :active-index="activeItemId">
-            <AccordionTab v-for="(n, i) in 10" :key="i">
+            <AccordionTab v-for="(technique, i) of rankedList?.slice(0, 10)" :key="i">
                 <template #header>
                     <h2>
                         {{ i + 1 }}.
                         <span class="highlight">
-                            {{ rankedList[i].tid }}
+                            {{ technique.tid }}
                         </span>
-                        {{ rankedList[i].name }}
+                        {{ technique.name }}
                     </h2>
                 </template>
-                <TopTenDetails :technique="rankedList[i]" />
+                <TopTenDetails :technique="technique" />
             </AccordionTab>
         </Accordion>
     </div>
@@ -22,11 +22,12 @@ import { defineComponent } from "vue";
 import Accordion from "primevue/accordion";
 import AccordionTab from "primevue/accordiontab";
 import TopTenDetails from "./TopTenDetails.vue";
+import { type Technique } from "@/data/DataTypes";
 
 export default defineComponent({
     components: { Accordion, AccordionTab, TopTenDetails },
     props: {
-        rankedList: [],
+        rankedList: Array<Technique>,
         activeItemId: Number,
     },
     data() {

src/components/TopTenSidebar.vue

@@ -1,26 +1,30 @@
 <template>
     <div>
         <ul>
-            <li v-for="(n, i) in 10" :key="i" class="list-item" :class="{ 'active': activeItemId === i }">
+
+            <li v-for="(technique, i) of rankedList?.slice(0, 10)" :key="i" class="list-item"
+                :class="{ 'active': activeItemId === i }">
                 <div class="w-full" @click="this.$parent.setActiveIndex(i)">
                     {{ i + 1 }}.
-                    <span class="ml-3 mr-1 highlight">{{ this.rankedList[i].tid }}</span>
-                    {{ this.rankedList[i].name }}
+                    <span class="ml-3 mr-1 highlight">{{ technique.tid }}</span>
+                    {{ technique.name }}
                 </div>
                 <button @click="this.$parent.deleteTechnique(i)">
                     <i class="pi pi-trash"></i>
                 </button>
             </li>
+
         </ul>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import { useCalculatorStore } from "../stores/calculator.store";
+import { type Technique } from "@/data/DataTypes";
 export default defineComponent({
     props: {
-        rankedList: Array,
+        rankedList: Array<Technique>,
         activeItemId: Number,
     },
     data() {