enable auto refresh to be paused and to be configured after creation

Author: PhilBastian

src/Frontend/src/composables/autoRefresh.ts

@@ -1,5 +1,13 @@
-export default function useAutoRefresh(refreshAction: () => Promise<void>, timeout: number) {
+import { ref } from "vue";
+
+/**
+ * Enables refresh functionality, either auto or manual
+ * @param refreshAction The action to perform (by default) when refreshing
+ * @param defaultTimeout The time between refreshes in ms or null if no auto-refresh is desired
+ */
+export default function useAutoRefresh(refreshAction: () => Promise<void>, defaultTimeout: number | null, startImmediately = true) {
   let refreshInterval: number | null = null;
+  const timeout = ref(defaultTimeout);
 
   function stopTimer() {
     if (refreshInterval !== null) {
@@ -9,10 +17,12 @@ export default function useAutoRefresh(refreshAction: () => Promise<void>, timeo
   }
 
   function startTimer() {
+    if (timeout.value === null) return;
+
     stopTimer();
     refreshInterval = window?.setTimeout(() => {
       executeAndResetTimer();
-    }, timeout);
+    }, timeout.value as number);
   }
 
   async function executeAndResetTimer(overrideAction?: () => Promise<void>) {
@@ -24,7 +34,20 @@ export default function useAutoRefresh(refreshAction: () => Promise<void>, timeo
     }
   }
 
+  /**
+   * Updates the timeout interval between refreshes
+   * @param updatedTimeout The new time between refreshes in ms or null if no auto-refresh is desired
+   */
+  async function updateTimeout(updatedTimeout: number) {
+    timeout.value = updatedTimeout;
+    await executeAndResetTimer();
+  }
+
+  // eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
+  if (startImmediately) executeAndResetTimer().then();
+
   return {
     executeAndResetTimer,
+    updateTimeout,
   };
 }

src/Frontend/src/stores/AuditStore.ts

@@ -48,7 +48,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
       messages.value = [];
       throw e;
     }
-  }, 30000);
+  }, null);
 
   function setMessageFilterString(filter: string) {
     messageFilterString.value = filter;
@@ -58,13 +58,9 @@ export const useAuditStore = defineStore("AuditStore", () => {
     itemsPerPage.value = value;
   }
 
-  const refresh = dataRetriever.executeAndResetTimer;
-
-  // eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
-  refresh().then();
-
   return {
-    refresh,
+    refresh: dataRetriever.executeAndResetTimer,
+    updateRefreshTimer: dataRetriever.updateTimeout,
     sortByInstances,
     messages,
     messageFilterString,

src/Frontend/src/stores/CustomChecksStore.ts

@@ -37,8 +37,6 @@ export const useCustomChecksStore = defineStore("CustomChecksStore", () => {
     });
   }
 
-  dataRetriever.executeAndResetTimer();
-
   return {
     dismissCustomCheck,
     pageNumber,

src/Frontend/src/stores/HeartbeatsStore.ts

@@ -170,9 +170,6 @@ export const useHeartbeatsStore = defineStore("HeartbeatsStore", () => {
 
   const refresh = dataRetriever.executeAndResetTimer;
 
-  // eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
-  refresh().then();
-
   return {
     refresh,
     defaultTrackingInstancesValue,

src/Frontend/src/stores/ThroughputStore.ts

@@ -101,8 +101,6 @@ export const useThroughputStore = defineStore("ThroughputStore", () => {
     }
   });
 
-  refresh();
-
   return {
     testResults,
     refresh,