Extract auto refresh from stores

Author: johnsimons

src/Frontend/package-lock.json

@@ -30,13 +30,12 @@
     "@vue-flow/controls": "1.1.3",
     "@vue-flow/core": "1.46.3",
     "@vuepic/vue-datepicker": "11.0.2",
+    "@vueuse/core": "13.9.0",
     "bootstrap": "5.3.8",
     "codemirror": "6.0.2",
     "diff": "8.0.2",
     "hex-to-css-filter": "6.0.0",
-    "lodash": "4.17.21",
     "lossless-json": "4.2.0",
-    "memoize-one": "6.0.0",
     "moment": "2.30.1",
     "pinia": "3.0.3",
     "vue": "3.5.21",
@@ -58,7 +57,6 @@
     "@tsconfig/node18": "18.2.4",
     "@types/bootstrap": "5.2.10",
     "@types/jsdom": "27.0.0",
-    "@types/lodash": "4.17.20",
     "@types/node": "24.3.1",
     "@vitejs/plugin-vue": "6.0.1",
     "@vitest/coverage-v8": "3.2.4",

src/Frontend/package.json

@@ -5,14 +5,15 @@ import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
 import "bootstrap";
 import { useServiceControlUrls } from "@/composables/serviceServiceControlUrls";
-import { useServiceControl } from "@/composables/serviceServiceControl";
+import { useServiceControl, useServiceControlAutoRefresh } from "@/composables/serviceServiceControl";
 import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
 
 useServiceControlUrls();
 
 onMounted(async () => {
   await useServiceControl();
+  useServiceControlAutoRefresh();
 });
 </script>
 

src/Frontend/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
-import debounce from "lodash/debounce";
+import { useDebounceFn } from "@vueuse/core";
 import FAIcon from "./FAIcon.vue";
 import { faFilter } from "@fortawesome/free-solid-svg-icons";
 
@@ -16,7 +16,7 @@ const localInput = computed({
   },
 });
 const textField = useTemplateRef<HTMLInputElement>("textField");
-const debounceUpdateModel = debounce((value: string) => {
+const debounceUpdateModel = useDebounceFn((value: string) => {
   model.value = value;
 }, 600);
 

src/Frontend/src/components/FilterInput.vue

@@ -5,34 +5,24 @@ import { useRoute, useRouter } from "vue-router";
 import ResultsCount from "@/components/ResultsCount.vue";
 import FiltersPanel from "@/components/audit/FiltersPanel.vue";
 import AuditListItem from "@/components/audit/AuditListItem.vue";
-import { onBeforeMount, onUnmounted, ref, watch } from "vue";
+import { onBeforeMount, ref, watch } from "vue";
 import RefreshConfig from "../RefreshConfig.vue";
-import useAutoRefresh from "@/composables/autoRefresh";
-import throttle from "lodash/throttle";
+import createAutoRefresh from "@/composables/autoRefresh";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { useThrottleFn } from "@vueuse/core";
 
 const store = useAuditStore();
 const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
-const isLoading = ref(false);
-
-const dataRetriever = useAutoRefresh(
-  throttle(async () => {
-    isLoading.value = true;
-    try {
-      await store.refresh();
-    } finally {
-      isLoading.value = false;
-    }
-  }, 2000),
-  null
-);
 
-onUnmounted(() => {
-  dataRetriever.updateTimeout(null);
-});
+const { refreshNow, isRefreshing, updateInterval } = createAutoRefresh(
+  useThrottleFn(async () => {
+    await store.refresh();
+  }, 2000),
+  { intervalMs: 0, immediate: false }
+)();
 
 const firstLoad = ref(true);
 
@@ -41,7 +31,7 @@ onBeforeMount(() => {
 
   //without setTimeout, this happens before the store is properly initialised, and therefore the query route values aren't applied to the refresh
   setTimeout(async () => {
-    await Promise.all([dataRetriever.executeAndResetTimer(), store.loadEndpoints()]);
+    await Promise.all([refreshNow(), store.loadEndpoints()]);
     firstLoad.value = false;
   }, 0);
 });
@@ -50,7 +40,7 @@ watch(
   () => router.currentRoute.value.query,
   async () => {
     setQuery();
-    await dataRetriever.executeAndResetTimer();
+    await refreshNow();
   },
   { deep: true }
 );
@@ -76,7 +66,7 @@ const watchHandle = watch([() => route.query, itemsPerPage, sortBy, messageFilte
     },
   });
 
-  await dataRetriever.executeAndResetTimer();
+  await refreshNow();
 });
 
 function setQuery() {
@@ -96,13 +86,13 @@ function setQuery() {
   watchHandle.resume();
 }
 
-watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
+watch(autoRefreshValue, (newValue) => updateInterval(newValue || 0));
 </script>
 
 <template>
   <div>
     <div class="header">
-      <RefreshConfig v-model="autoRefreshValue" :isLoading="isLoading" @manual-refresh="dataRetriever.executeAndResetTimer()" />
+      <RefreshConfig v-model="autoRefreshValue" :isLoading="isRefreshing" @manual-refresh="refreshNow()" />
       <div class="row">
         <FiltersPanel />
       </div>

src/Frontend/src/components/audit/AuditList.vue

@@ -7,12 +7,13 @@ import { LicenseWarningLevel } from "@/composables/LicenseStatus";
 import { WarningLevel } from "@/components/WarningLevel";
 import routeLinks from "@/router/routeLinks";
 import { displayConnectionsWarning } from "@/components/configuration/displayConnectionsWarning";
-import { useThroughputStore } from "@/stores/ThroughputStore";
 import { storeToRefs } from "pinia";
 import FAIcon from "@/components/FAIcon.vue";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
+import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoRefresh";
 
-const { hasErrors } = storeToRefs(useThroughputStore());
+const { store } = useThroughputStoreAutoRefresh();
+const { hasErrors } = storeToRefs(store);
 
 const displayWarn = computed(() => {
   return licenseStatus.warningLevel === LicenseWarningLevel.Warning;

src/Frontend/src/components/configuration/ConfigurationMenuItem.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import CustomCheck from "@/resources/CustomCheck";
 import TimeSince from "@/components/TimeSince.vue";
-import { useCustomChecksStore } from "@/stores/CustomChecksStore";
 import FAIcon from "@/components/FAIcon.vue";
 import { faCheck, faList, faServer } from "@fortawesome/free-solid-svg-icons";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { hexToCSSFilter } from "hex-to-css-filter";
+import useCustomChecksStoreAutoRefresh from "@/composables/useCustomChecksStoreAutoRefresh";
 
 defineProps<{ customCheck: CustomCheck }>();
 
-const store = useCustomChecksStore();
+const { store } = useCustomChecksStoreAutoRefresh();
 const endpointColor = hexToCSSFilter("#929E9E").filter;
 </script>
 

src/Frontend/src/components/customchecks/CustomCheckView.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import DashboardItem from "@/components/DashboardItem.vue";
-import { useCustomChecksStore } from "@/stores/CustomChecksStore";
 import routeLinks from "@/router/routeLinks";
 import { storeToRefs } from "pinia";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import useCustomChecksStoreAutoRefresh from "@/composables/useCustomChecksStoreAutoRefresh";
 
-const store = useCustomChecksStore();
+const { store } = useCustomChecksStoreAutoRefresh();
 const { failingCount } = storeToRefs(store);
 </script>
 

src/Frontend/src/components/customchecks/CustomChecksDashboardItem.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { RouterLink } from "vue-router";
-import { useCustomChecksStore } from "@/stores/CustomChecksStore";
 import routeLinks from "@/router/routeLinks";
 import { storeToRefs } from "pinia";
 import FAIcon from "@/components/FAIcon.vue";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import useCustomChecksStoreAutoRefresh from "@/composables/useCustomChecksStoreAutoRefresh";
 
-const store = useCustomChecksStore();
+const { store } = useCustomChecksStoreAutoRefresh();
 const { failingCount } = storeToRefs(store);
 </script>
 

src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue

@@ -9,9 +9,9 @@ import CodeEditor from "@/components/CodeEditor.vue";
 import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import debounce from "lodash/debounce";
 import FAIcon from "@/components/FAIcon.vue";
 import { faExclamationCircle, faExclamationTriangle, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { useDebounceFn } from "@vueuse/core";
 
 interface HeaderWithEditing extends Header {
   isLocked: boolean;
@@ -58,7 +58,7 @@ const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
 const id = computed(() => state.value.data.id ?? "");
 const uneditedMessageBody = computed(() => body.value.data.value ?? "");
 const regExToPruneLineEndings = new RegExp(/[\n\r]*/, "g");
-const debounceBodyUpdate = debounce((value: string) => {
+const debounceBodyUpdate = useDebounceFn((value: string) => {
   const newValue = value.replaceAll(regExToPruneLineEndings, "");
   localMessage.value.isBodyChanged = newValue !== uneditedMessageBody.value.replaceAll(regExToPruneLineEndings, "");
   localMessage.value.isBodyEmpty = newValue === "";