fix: dynamic data refresh across all stores and modals

src/components/operations/AddPotentialLinkModal.vue

@@ -1,5 +1,5 @@
  <script setup>
-import { inject, ref, onMounted, reactive, computed } from "vue";
+import { inject, ref, onMounted, reactive, computed, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { toast } from 'bulma-toast'
 
@@ -10,7 +10,7 @@ import { useAbilityStore } from "@/stores/abilityStore";
 import { useSourceStore } from "@/stores/sourceStore";
 import { cartesian } from "@/utils/utils";
 
-const props = defineProps({ 
+const props = defineProps({
     active: Boolean,
     operation: Object,
     agent: Object
@@ -25,6 +25,20 @@ const abilityStore = useAbilityStore();
 const sourceStore = useSourceStore();
 const { sources } = storeToRefs(sourceStore);
 
+// Re-fetch abilities and agents when the modal is opened
+watch(
+    () => props.active,
+    async (newValue) => {
+        if (newValue) {
+            await Promise.all([
+                abilityStore.getAbilities($api),
+                agentStore.getAgents($api),
+                sourceStore.getSources($api),
+            ]);
+        }
+    }
+);
+
 let selectedPotentialLink = ref({});
 let selectedPotentialLinkFacts = ref({});
 let potentialLinkCommand = ref("");

src/components/operations/CreateModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from "vue";
+import { ref, inject, onMounted, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { toast } from 'bulma-toast';
 import { sanitizeInput, validateInput } from "@/utils/sanitize";
@@ -45,15 +45,30 @@ let validation = ref({
     name: "",
 });
 
+async function refreshDropdownData() {
+    await Promise.all([
+        agentStore.getAgents($api),
+        adversaryStore.getAdversaries($api),
+        getSources(),
+        coreStore.getObfuscators($api),
+        getPlanners(),
+    ]);
+}
+
 onMounted(async () => {
-    await agentStore.getAgents($api);
-    agentStore.updateAgentGroups();
-    await adversaryStore.getAdversaries($api);
-    await getSources();
-    await coreStore.getObfuscators($api);
-    await getPlanners();
+    await refreshDropdownData();
 });
 
+// Re-fetch all dropdown data when the modal is opened
+watch(
+    () => modals.value.operations.showCreate,
+    async (newValue) => {
+        if (newValue) {
+            await refreshDropdownData();
+        }
+    }
+);
+
 async function getSources() {
     try {
         await sourceStore.getSources($api);

src/components/schedules/CreateScheduleModal.vue

@@ -42,19 +42,26 @@ let validation = ref({
   name: "",
 });
 
+async function refreshDropdownData() {
+  await Promise.all([
+    agentStore.getAgents($api),
+    adversaryStore.getAdversaries($api),
+    getSources(),
+    coreStore.getObfuscators($api),
+    getPlanners(),
+  ]);
+}
+
 onMounted(async () => {
-  await agentStore.getAgents($api);
-  agentStore.updateAgentGroups();
-  await adversaryStore.getAdversaries($api);
-  await getSources();
-  await coreStore.getObfuscators($api);
-  await getPlanners();
+  await refreshDropdownData();
 });
 
+// Re-fetch all dropdown data and reset fields when the modal is opened
 watch(
   () => modals.value.schedules.showCreate,
-  (newValue) => {
+  async (newValue) => {
     if (newValue) {
+      await refreshDropdownData();
       resetFields();
     }
   }

src/stores/adversaryStore.js

@@ -63,7 +63,7 @@ export const useAdversaryStore = defineStore("adversaryStore", {
         this.adversaries.push(response.data);
         this.adversaries.sort((a, b) => a.name > b.name);
         this.selectedAdversary = response.data;
-        this.updateSelectedAdversaryAbilities();
+        this.updateSelectedAdversaryAbilities($api);
       } catch (error) {
         console.error("Error creating an adversary", error);
       }
@@ -112,19 +112,24 @@ export const useAdversaryStore = defineStore("adversaryStore", {
         console.error("Error deleting adversary", error);
       }
     },
-    updateSelectedAdversaryAbilities() {
+    async updateSelectedAdversaryAbilities($api) {
       if (!this.selectedAdversary.atomic_ordering) {
         this.selectedAdversaryAbilities = [];
-      } else {
-        this.selectedAdversaryAbilities =
-          this.selectedAdversary.atomic_ordering.map((ability_id) => {
-            return {
-              ...abilityStore().abilities.find(
-                (ability) => ability.ability_id === ability_id
-              ),
-            };
-          });
+        return;
       }
+      // Re-fetch abilities to ensure we have the latest data
+      if ($api) {
+        await abilityStore().getAbilities($api);
+      }
+      this.selectedAdversaryAbilities =
+        this.selectedAdversary.atomic_ordering
+          .map((ability_id) => {
+            const found = abilityStore().abilities.find(
+              (ability) => ability.ability_id === ability_id
+            );
+            return found ? { ...found } : null;
+          })
+          .filter((ability) => ability !== null);
     },
   },
 });

src/stores/agentStore.js

@@ -6,10 +6,16 @@ export const useAgentStore = defineStore("agentStore", {
             agents: [],
             agentConfig: {},
             selectedAgent: {},
-            agentGroups: []
         };
     },
 
+    getters: {
+        agentGroups: (state) => {
+            if (!state.agents) return [];
+            return [...new Set(state.agents.map((agent) => agent.group))];
+        },
+    },
+
     actions: {
         async getAgents($api) {
             try {
@@ -64,9 +70,6 @@ export const useAgentStore = defineStore("agentStore", {
                 throw error;
             }
         },
-        updateAgentGroups() {
-            if (!this.agents) return;
-            this.agentGroups = [...new Set(this.agents.map((agent) => agent.group))];
-        }
+        // agentGroups is now a getter derived from agents state
     },
 });

src/views/AdversariesView.vue

@@ -33,7 +33,7 @@ onMounted(async () => {
 
 function selectAdversary(adversary) {
     selectedAdversary.value = adversary; 
-    adversaryStore.updateSelectedAdversaryAbilities();
+    adversaryStore.updateSelectedAdversaryAbilities($api);
     isAdversaryDropdownOpen.value = false;
     adversarySearchQuery.value = "";
 }

src/views/OperationsView.vue

@@ -45,6 +45,7 @@ const coreStore = useCoreStore();
 const { modals } = storeToRefs(coreDisplayStore);
 
 let updateInterval = ref();
+let operationsListInterval = ref();
 let showPotentialLinkModal = ref(false);
 let selectedOutputLink = ref(null);
 
@@ -175,12 +176,18 @@ onMounted(async () => {
   await operationStore.getOperations($api);
   await coreStore.getObfuscators($api);
   await agentStore.getAgents($api);
-  agentStore.updateAgentGroups();
+  // agentGroups is now a computed getter, no manual update needed
   selectOperation();
+
+  // Periodically refresh the operations list to pick up new/changed operations
+  operationsListInterval.value = setInterval(async () => {
+    await operationStore.getOperations($api);
+  }, 15000);
 });
 
 onBeforeUnmount(() => {
   if (updateInterval) clearInterval(updateInterval);
+  if (operationsListInterval.value) clearInterval(operationsListInterval.value);
 });
 
 const resetFilter = () => {

src/views/SchedulesView.vue

@@ -30,7 +30,7 @@ onMounted(async () => {
   await scheduleStore.getSchedules($api);
   await coreStore.getObfuscators($api);
   await agentStore.getAgents($api);
-  agentStore.updateAgentGroups();
+  // agentGroups is now a computed getter, no manual update needed
 });
 </script>