TAT-92 export top techniques to navigator layer

src/components/DownloadListButton.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <SplitButton label="Download" @click="downloadAsJson" :model="items" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import ArrowRight from "@/assets/arrow-right.svg";
+import { type Technique, type ExportedTechnique } from "@/data/DataTypes";
+import SplitButton from "primevue/splitbutton";
+import downloadjs from "downloadjs";
+import { useCalculatorStore } from "@/stores/calculator.store";
+
+export default defineComponent({
+    components: {
+        SplitButton
+    },
+    props: {
+        rankedList: {
+            type: Array<Technique>,
+            required: true
+        },
+    },
+    data() {
+        return {
+            calculatorStore: useCalculatorStore(),
+            ArrowRight,
+            items: [
+                {
+                    label: 'Download as JSON',
+                    command: () => {
+                        this.downloadAsJson()
+                    }
+                },
+                {
+                    label: 'Download as Navigator Layer',
+                    command: () => {
+                        this.downloadAsNavigatorLayer()
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        downloadAsJson() {
+            const parsedList = [] as Array<ExportedTechnique>;
+
+            this.rankedList.slice(0, 10).forEach((technique, i) => {
+                const t = {
+                    rank: i + 1,
+                    tid: technique.tid,
+                    name: technique.name,
+                    description: technique.description,
+                    url: technique.url,
+                    detection: technique.detection,
+                    score: technique.adjusted_score,
+                    network_score: technique.network_score,
+                    process_score: technique.process_score,
+                    file_score: technique.file_score,
+                    cloud_score: technique.cloud_score,
+                    hardware_score: technique.hardware_score,
+                    mitigations: technique.mitigations,
+                    subtechniques: technique.subtechniques,
+                    actionability_score: technique.actionability_score,
+                    choke_point_score: technique.choke_point_score,
+                    prevalence_score: technique.prevalence_score,
+                }
+                parsedList.push(t);
+            })
+            downloadjs(JSON.stringify(parsedList, null, 4), "TopTenTechniques.json", JSON)
+        },
+        downloadAsNavigatorLayer() {
+            const gradient = ["#FFDDBD", "#ffaf66"]
+            const layer = {
+                "name": "Top 10 ATT&CK Techniques",
+                "versions": {
+                    "navigator": "4.8.0",
+                    "layer": "4.5",
+                    "attack": 10.1,
+                },
+                "sorting": 3,
+                "description": "Top ATT&CK Techniques heatmap overview of ATT&CK",
+                "domain": "enterprise-attack",
+                "techniques": [] as Array<{
+                    techniqueID: string;
+                    score: number;
+                    comment: string;
+                    metadata: never[];
+                }>,
+                "gradient": {
+                    "colors": gradient,
+                    "minValue": 0,
+                    "maxValue": 3
+                },
+            }
+            this.rankedList.forEach((technique, i) => {
+                let description = ` Rank: ${i + 1}`;
+                for (const monitoringType of Object.keys(this.calculatorStore.systemScore)) {
+                    if (technique[`${monitoringType}_score`]) {
+                        description += `\n ${monitoringType.charAt(0).toUpperCase() + monitoringType.slice(1)} Score: ${parseFloat(technique[`${monitoringType}_score`]).toFixed(2)}`
+                    }
+                }
+                description += `\n Actionability Score: ${technique.actionability_score?.toFixed(2)}\n Choke Point Score: ${technique.choke_point_score?.toFixed(2)}\n Prevalence Score: ${technique.prevalence_score?.toFixed(2)}`
+
+                const t = {
+                    "techniqueID": technique.tid,
+                    "score": technique.adjusted_score,
+                    "comment": description,
+                    "metadata": [],
+                }
+                if (i > 9) {
+                    t.color = "#FFFFFF"
+                }
+                layer.techniques.push(t)
+            })
+
+            layer.gradient.minValue = layer.techniques[9].score
+            layer.gradient.maxValue = layer.techniques[0].score
+            downloadjs(JSON.stringify(layer, null, 4), "TopTechniquesNavigatorLayer.json", JSON)
+        }
+    },
+});
+</script>
+
+<style scoped></style>

src/components/TopTenSidebar.vue

@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useCalculatorStore } from "../stores/calculator.store";
 import { type Technique } from "@/data/DataTypes";
 export default defineComponent({
     props: {
@@ -33,13 +32,6 @@ export default defineComponent({
             default: 0,
         }
     },
-    data() {
-        return {
-            calculatorStore: useCalculatorStore(),
-        };
-    },
-    methods: {
-    }
 });
 </script>
 

src/index.css

@@ -148,3 +148,13 @@ h1, h2, h3, h4, h5, h6 {
 .p-menubar-root-list {
     @apply w-60 -ml-40
 }
+.p-splitbutton.p-component {
+    @apply w-full bg-ctid-navy text-white rounded-none my-4 ;
+}
+.p-splitbutton .p-splitbutton-defaultbutton {
+    @apply uppercase font-bold text-lg hover:text-ctid-light-purple hover:bg-ctid-dark-navy p-4;
+    font-family: "Fira Sans Extra Condensed", sans-serif;
+}
+.p-splitbutton .p-button-icon-only.p-splitbutton-menubutton {
+    @apply hover:text-ctid-light-purple hover:bg-ctid-dark-navy px-2
+}

src/views/TopTenResults.vue

@@ -9,7 +9,7 @@
         <div class="lg:grid hidden grid-cols-3 gap-4 w-5/6 mx-auto calculator-box auto-rows-fr">
             <div class="col-span-1 calculator-list">
                 <TopTenSidebar :ranked-list="rankedList" :activeItemId="activeItemId" />
-                <button class="btn-primary mt-4" @click="download()">Download List</button>
+                <DownloadListButton :ranked-list="rankedList" />
             </div>
             <div class="col-span-2 h-full">
                 <div class="calculator-details">
@@ -30,7 +30,7 @@
         </div>
         <div class="w-5/6 mx-auto lg:hidden block">
             <TopTenAccordion :ranked-list="rankedList" :activeItemId="activeItemId" />
-            <button class="btn-primary mt-10" @click="download()">Download List</button>
+            <DownloadListButton :ranked-list="rankedList" />
         </div>
     </div>
 </template>
@@ -42,11 +42,11 @@ import TopTenSidebar from "../components/TopTenSidebar.vue"
 import TopTenDetails from "../components/TopTenDetails.vue"
 import TopTenAccordion from "../components/TopTenAccordion.vue"
 import SystemScoreSection from "../components/SystemScoreSection.vue"
-import downloadjs from "downloadjs";
-import type { ExportedTechnique, Technique } from "@/data/DataTypes";
+import type { Technique } from "@/data/DataTypes";
+import DownloadListButton from "../components/DownloadListButton.vue";
 
 export default defineComponent({
-    components: { TopTenSidebar, TopTenDetails, TopTenAccordion, SystemScoreSection },
+    components: { TopTenSidebar, TopTenDetails, TopTenAccordion, SystemScoreSection, DownloadListButton },
     data() {
         return {
             calculatorStore: useCalculatorStore(),
@@ -72,34 +72,6 @@ export default defineComponent({
                 this.setActiveIndex(this.activeItemId - 1)
             }
         },
-        download() {
-            const parsedList = [] as Array<ExportedTechnique>;
-
-            this.rankedList.slice(0, 10).forEach((technique, i) => {
-                const t = {
-                    rank: i + 1,
-                    tid: technique.tid,
-                    name: technique.name,
-                    description: technique.description,
-                    url: technique.url,
-                    detection: technique.detection,
-                    score: technique.adjusted_score,
-                    network_score: technique.network_score,
-                    process_score: technique.process_score,
-                    file_score: technique.file_score,
-                    cloud_score: technique.cloud_score,
-                    hardware_score: technique.hardware_score,
-                    mitigations: technique.mitigations,
-                    subtechniques: technique.subtechniques,
-                    actionability_score: technique.actionability_score,
-                    choke_point_score: technique.choke_point_score,
-                    prevalence_score: technique.prevalence_score,
-                }
-                parsedList.push(t);
-            })
-
-            downloadjs(JSON.stringify(parsedList, null, 4), "TopTenTechniques.json", JSON)
-        },
         setRankedList() {
             let filteredList = structuredClone(toRaw(this.calculatorStore.techniques));
             filteredList = this.applyScores(filteredList)