From e0cf838c4182c3aa6e8699829599874fe1f768d3 Mon Sep 17 00:00:00 2001
From: Adam Gaudreau <argaudreau@gmail.com>
Date: Wed, 14 Dec 2022 10:56:22 -0500
Subject: [PATCH] Add Vue UI for magma

---
 app/atomic_gui.py     |  4 ----
 gui/views/atomic.vue  | 37 ++++++++++++++++++++++++++++++++++++
 hook.py               |  1 -
 templates/atomic.html | 44 -------------------------------------------
 4 files changed, 37 insertions(+), 49 deletions(-)
 create mode 100644 gui/views/atomic.vue
 delete mode 100644 templates/atomic.html

diff --git a/app/atomic_gui.py b/app/atomic_gui.py
index 8c210b1..82a92ab 100644
--- a/app/atomic_gui.py
+++ b/app/atomic_gui.py
@@ -14,7 +14,3 @@ def __init__(self, services, name, description):
         self.data_svc = services.get('data_svc')
 
         self.log = logging.getLogger('atomic_gui')
-
-    @template('atomic.html')
-    async def splash(self, request):
-        return dict()
diff --git a/gui/views/atomic.vue b/gui/views/atomic.vue
new file mode 100644
index 0000000..8a0703a
--- /dev/null
+++ b/gui/views/atomic.vue
@@ -0,0 +1,37 @@
+<script setup>
+import { inject, onMounted, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useAbilityStore } from '@/stores/abilityStore.js';
+import { useAdversaryStore } from '@/stores/adversaryStore.js';
+
+const $api = inject("$api");
+
+const abilityStore = useAbilityStore();
+const { abilities } = storeToRefs(abilityStore);
+const adversaryStore = useAdversaryStore();
+const { adversaries } = storeToRefs(adversaryStore);
+
+onMounted(async () => {
+    await abilityStore.getAbilities($api);
+    await adversaryStore.getAdversaries($api);
+});
+
+const atomicAbilities = computed(() => abilities.value.filter((ability) => ability.plugin === "atomic"));
+</script>
+
+<template lang="pug">
+.content    
+    h2 Atomic
+    p The collection of abilities in the Red Canary Atomic test project.
+hr
+
+.is-flex.is-align-items-center.is-justify-content-center
+    .card.is-flex.is-flex-direction-column.is-align-items-center.p-4.m-4
+        h1.is-size-1.mb-0 {{ atomicAbilities.length || "---" }}
+        p abilities
+        router-link.button.is-primary.mt-4(to="/abilities?plugin=atomic") 
+            span View Abilities
+            span.icon
+                font-awesome-icon(icon="fas fa-angle-right")
+
+</template>
\ No newline at end of file
diff --git a/hook.py b/hook.py
index c899f7e..105e34f 100644
--- a/hook.py
+++ b/hook.py
@@ -14,7 +14,6 @@
 async def enable(services):
     atomic_gui = AtomicGUI(services, name, description)
     app = services.get('app_svc').application
-    app.router.add_route('GET', '/plugin/atomic/gui', atomic_gui.splash)
 
     # we only ingest data once, and save new abilities in the data/ folder of the plugin
     if "abilities" not in os.listdir(data_dir):
diff --git a/templates/atomic.html b/templates/atomic.html
deleted file mode 100644
index 373f580..0000000
--- a/templates/atomic.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<div x-data="alpineAtomic" x-init="initPage()">
-    <div>
-        <h2>Atomic</h2>
-        <p>
-            The collection of abilities in the Red Canary Atomic test project.
-        </p>
-    </div>
-    <hr>
-    <div class="is-flex is-align-items-center is-justify-content-center is-flex-direction-column fill">
-        <h1 class="has-text-info is-size-1 mb-0" x-text="numAbilities || '---'"></h1>
-        <p>abilties</p>
-        <a class="button is-primary is-small mb-4" x-on:click="addTab('abilities', '/campaign/abilities', 'plugin=atomic')">
-            <span>Abilities</span>
-            <span class="icon"><i class="fas fa-angle-right"></i></span>
-        </a>
-        <p>View or edit these abilities on the abilities page.</p>
-    </div>
-</div>
-
-<script>
-function alpineAtomic() {
-    return {
-        numAbilities: 0,
-
-        initPage() {
-            apiV2('GET', 'api/v2/abilities').then((abilities) => {
-                this.numAbilities = abilities.filter((ability) => ability.plugin === 'atomic').length;
-            }).catch((error) => {
-                toast('Error loading page', false);
-                console.error(error);
-            })
-        }
-    }
-}
-
-//- atomic.js
-</script>
-
-<style scoped>
-.fill {
-    height: 50%;
-    width: 100%;
-}  
-</style>