updated initial load logic

Author: PhilBastian

src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue

@@ -16,6 +16,7 @@ import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { useDeletedMessageGroupsStore, statusesForRestoreOperation, ExtendedFailureGroupView, Status } from "@/stores/DeletedMessageGroupsStore";
 import { useStoreAutoRefresh } from "@/composables/useAutoRefresh";
 import { storeToRefs } from "pinia";
+import LoadingSpinner from "../LoadingSpinner.vue";
 
 let pollingFaster = false;
 const { autoRefresh, isRefreshing, updateInterval } = useStoreAutoRefresh("deletedMessageGroups", useDeletedMessageGroupsStore, 5000);
@@ -130,6 +131,7 @@ watch(isRefreshing, () => {
               <div class="row">
                 <div class="col-sm-12">
                   <no-data v-if="archiveGroups.length === 0 && !isRefreshing" title="message groups" message="There are currently no grouped message failures"></no-data>
+                  <LoadingSpinner v-if="archiveGroups.length === 0 && isRefreshing" />
                 </div>
               </div>
 

src/Frontend/src/composables/autoRefresh.ts

@@ -62,7 +62,7 @@ export default function useFetchWithAutoRefresh(name: string, fetch: () => Promi
     if (interval.value === newIntervalMs) return;
 
     interval.value = newIntervalMs;
-    console.debug(`updated polling ${name} to ${newIntervalMs}ms`);
+    console.debug(`[AutoRefresh] updated polling ${name} to ${newIntervalMs}ms`);
     pause();
     if (newIntervalMs > 0) {
       resume();

src/Frontend/src/stores/DeletedMessageGroupsStore.ts

@@ -1,5 +1,5 @@
-import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
-import { readonly, ref, watch } from "vue";
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { readonly, ref } from "vue";
 import { useServiceControlStore } from "./ServiceControlStore";
 import { useCookies } from "vue3-cookies";
 import FailureGroupView from "@/resources/FailureGroupView";
@@ -32,14 +32,17 @@ export const useDeletedMessageGroupsStore = defineStore("DeletedMessageGroupsSto
   let undismissedRestoreGroups: ExtendedFailureGroupView[] = [];
 
   const serviceControlStore = useServiceControlStore();
-  const { serviceControlUrl } = storeToRefs(serviceControlStore);
   const messageGroupClient = new MessageGroupClient(serviceControlStore);
 
   const cookies = useCookies();
 
   async function refresh() {
+    if (!selectedClassifier.value) {
+      await getGroupingClassifiers();
+      selectedClassifier.value = getGrouping() ?? classifiers.value[0];
+    }
     //get all deleted message groups
-    const [, result] = await serviceControlStore.fetchTypedFromServiceControl<FailureGroupView[]>(`errors/groups/${selectedClassifier.value}`);
+    const [, result] = await serviceControlStore.fetchTypedFromServiceControl<FailureGroupView[]>(`errors/groups/${selectedClassifier.value ?? getGrouping()}`);
 
     if (result.length === 0 && undismissedRestoreGroups.length > 0) {
       undismissedRestoreGroups.forEach((deletedGroup) => {
@@ -120,18 +123,11 @@ export const useDeletedMessageGroupsStore = defineStore("DeletedMessageGroupsSto
     archiveGroups.value = archiveGroups.value.filter((group) => group.id !== dismissedGroup.id);
   }
 
-  async function initialise() {
-    await Promise.all([getGroupingClassifiers()]);
-    selectedClassifier.value = getGrouping() ?? classifiers.value[0];
-  }
-
-  watch(serviceControlUrl, initialise, { immediate: true });
-
   return {
     refresh,
     classifiers: readonly(classifiers),
     selectedClassifier,
-    archiveGroups: archiveGroups,
+    archiveGroups,
     getGrouping,
     setGrouping,
     restoreGroup,