From 6e051e258b8e1e889fefa04ae25dc9a5e9aadcf0 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 30 Oct 2025 15:37:45 +0800
Subject: [PATCH 1/3] fix auditlist incrementing registered count on each
 autorefresh change and fix autorefresh interval change

---
 src/Frontend/src/components/audit/AuditList.vue | 4 ++--
 src/Frontend/src/composables/autoRefresh.ts     | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 1004e7113..423644e71 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -15,7 +15,7 @@ const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName,
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
-const { refreshNow, isRefreshing, updateInterval, start, stop } = useFetchWithAutoRefresh("audit-list", store.refresh, 3000);
+const { refreshNow, isRefreshing, updateInterval, isActive, start, stop } = useFetchWithAutoRefresh("audit-list", store.refresh, 0);
 const firstLoad = ref(true);
 
 onBeforeMount(() => {
@@ -82,7 +82,7 @@ watch(autoRefreshValue, (newValue) => {
   updateInterval(newValue || 0);
   if (newValue === null || newValue === 0) {
     stop();
-  } else {
+  } else if (!isActive.value) {
     start();
   }
 });
diff --git a/src/Frontend/src/composables/autoRefresh.ts b/src/Frontend/src/composables/autoRefresh.ts
index eb01dc397..5ebaf166c 100644
--- a/src/Frontend/src/composables/autoRefresh.ts
+++ b/src/Frontend/src/composables/autoRefresh.ts
@@ -14,7 +14,7 @@ export default function useFetchWithAutoRefresh(name: string, fetch: () => Promi
     await fetch();
     isRefreshing.value = false;
   };
-  const { pause, resume } = useTimeoutPoll(
+  const { isActive, pause, resume } = useTimeoutPoll(
     fetchWrapper,
     interval,
     { immediate: false, immediateCallback: true } // we control first fetch manually
@@ -60,7 +60,11 @@ export default function useFetchWithAutoRefresh(name: string, fetch: () => Promi
 
   const updateInterval = (newIntervalMs: number) => {
     interval.value = newIntervalMs;
+    pause();
+    if (newIntervalMs > 0) {
+      resume();
+    }
   };
 
-  return { refreshNow: fetchWrapper, isRefreshing: shallowReadonly(isRefreshing), updateInterval, start, stop };
+  return { refreshNow: fetchWrapper, isRefreshing: shallowReadonly(isRefreshing), updateInterval, isActive, start, stop };
 }

From 16a1936da3ad07759b38407c6b0a18973e2ba85a Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 31 Oct 2025 10:24:08 +0800
Subject: [PATCH 2/3] refactor deletedmessagegroups view data handling into a
 store

---
 .../failedmessages/DeletedMessageGroups.vue   | 248 +++---------------
 .../failedmessages/messageGroupClient.ts      |   6 +-
 src/Frontend/src/composables/autoRefresh.ts   |   3 +
 .../src/composables/useAutoRefresh.ts         |  22 +-
 .../useConnectionsAndStatsAutoRefresh.ts      |   2 +-
 .../useCustomChecksStoreAutoRefresh.ts        |   2 +-
 .../useEnvironmentAndVersionsAutoRefresh.ts   |   2 +-
 .../useHeartbeatInstancesStoreAutoRefresh.ts  |   2 +-
 .../useHeartbeatsStoreAutoRefresh.ts          |   2 +-
 .../useThroughputStoreAutoRefresh.ts          |   2 +-
 .../src/stores/DeletedMessageGroupsStore.ts   | 146 +++++++++++
 11 files changed, 201 insertions(+), 236 deletions(-)
 create mode 100644 src/Frontend/src/stores/DeletedMessageGroupsStore.ts

diff --git a/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue b/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue
index b3f0a1242..94877b4ef 100644
--- a/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue
+++ b/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue
@@ -1,169 +1,36 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import { useShowToast } from "../../composables/toast";
-import createMessageGroupClient from "./messageGroupClient";
-import { useCookies } from "vue3-cookies";
 import NoData from "../NoData.vue";
 import TimeSince from "../TimeSince.vue";
 import LicenseNotExpired from "../../components/LicenseNotExpired.vue";
 import ServiceControlAvailable from "../ServiceControlAvailable.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import routeLinks from "@/router/routeLinks";
-import FailureGroupView from "@/resources/FailureGroupView";
 import { TYPE } from "vue-toastification";
 import MetadataItem from "@/components/MetadataItem.vue";
 import ActionButton from "@/components/ActionButton.vue";
 import { faArrowRotateRight, faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
-
-const statusesForRestoreOperation = ["restorestarted", "restoreprogressing", "restorefinalizing", "restorecompleted"] as const;
-type RestoreOperationStatus = (typeof statusesForRestoreOperation)[number];
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const otherStatuses = ["none", "working"] as const;
-type Status = RestoreOperationStatus | (typeof otherStatuses)[number];
-interface WorkflowState {
-  status: Status;
-  total?: number;
-  failed?: boolean;
-  message?: string;
-}
-
-interface ExtendedFailureGroupView extends FailureGroupView {
-  index: number;
-  need_user_acknowledgement?: boolean;
-  workflow_state: WorkflowState;
-  operation_remaining_count?: number;
-  hover2?: boolean;
-  hover3?: boolean;
-  operation_start_time?: string;
-  last_operation_completion_time?: string;
-}
+import { useDeletedMessageGroupsStore, statusesForRestoreOperation, ExtendedFailureGroupView, Status } from "@/stores/DeletedMessageGroupsStore";
+import { useStoreAutoRefresh } from "@/composables/useAutoRefresh";
+import { storeToRefs } from "pinia";
 
 let pollingFaster = false;
-const archiveGroups = ref<ExtendedFailureGroupView[]>([]);
-const undismissedRestoreGroups = ref<ExtendedFailureGroupView[]>([]);
-const loadingData = ref(true);
-const initialLoadComplete = ref(false);
-const emit = defineEmits<{
-  InitialLoadComplete: [];
-}>();
-let refreshInterval: number | undefined = undefined;
-const route = useRoute();
+const { autoRefresh, isRefreshing, updateInterval } = useStoreAutoRefresh("deletedMessageGroups", useDeletedMessageGroupsStore, 5000);
+const { store } = autoRefresh();
+const { archiveGroups, classifiers, selectedClassifier } = storeToRefs(store);
 const router = useRouter();
 const showRestoreGroupModal = ref(false);
 const selectedGroup = ref<ExtendedFailureGroupView>();
-
-const serviceControlStore = useServiceControlStore();
-const messageGroupClient = createMessageGroupClient();
-
 const groupRestoreSuccessful = ref<boolean | null>(null);
-const selectedClassifier = ref<string | null>(null);
-const classifiers = ref<string[]>([]);
-
-async function getGroupingClassifiers() {
-  const [, data] = await serviceControlStore.fetchTypedFromServiceControl<string[]>("recoverability/classifiers");
-  classifiers.value = data;
-}
-
-function saveDefaultGroupingClassifier(classifier: string) {
-  const cookies = useCookies().cookies;
-  cookies.set("archived_groups_classification", classifier);
-}
 
 async function classifierChanged(classifier: string) {
-  saveDefaultGroupingClassifier(classifier);
-
+  store.setGrouping(classifier);
   selectedClassifier.value = classifier;
-  archiveGroups.value = [];
-  await loadArchivedMessageGroups(classifier);
-}
-
-async function getArchiveGroups(classifier: string) {
-  //get all deleted message groups
-  const [, result] = await serviceControlStore.fetchTypedFromServiceControl<FailureGroupView[]>(`errors/groups/${classifier}`);
-
-  if (result.length === 0 && undismissedRestoreGroups.value.length > 0) {
-    undismissedRestoreGroups.value.forEach((deletedGroup) => {
-      deletedGroup.need_user_acknowledgement = true;
-      deletedGroup.workflow_state.status = "restorecompleted";
-    });
-  }
 
-  undismissedRestoreGroups.value.forEach((deletedGroup) => {
-    if (!result.find((group) => group.id === deletedGroup.id)) {
-      deletedGroup.need_user_acknowledgement = true;
-      deletedGroup.workflow_state.status = "restorecompleted";
-    }
-  });
-
-  // need a map in some ui state for controlling animations
-  const mappedResults = result
-    .filter((group) => !undismissedRestoreGroups.value.find((deletedGroup) => deletedGroup.id === group.id))
-    .map(initializeGroupState)
-    .concat(undismissedRestoreGroups.value);
-
-  let maxIndex = archiveGroups.value.reduce((currentMax, currentGroup) => Math.max(currentMax, currentGroup.index), 0);
-
-  mappedResults.forEach((serverGroup) => {
-    const previousGroup = archiveGroups.value.find((oldGroup) => oldGroup.id === serverGroup.id);
-
-    if (previousGroup) {
-      serverGroup.index = previousGroup.index;
-    } else {
-      serverGroup.index = ++maxIndex;
-    }
-  });
-
-  archiveGroups.value = mappedResults.sort((group1, group2) => {
-    return group1.index - group2.index;
-  });
-}
-
-function initializeGroupState(group: FailureGroupView): ExtendedFailureGroupView {
-  return {
-    index: 0,
-    workflow_state: createWorkflowState("none"),
-    ...group,
-  };
-}
-
-function loadDefaultGroupingClassifier() {
-  const cookies = useCookies().cookies;
-  const cookieGrouping = cookies.get("archived_groups_classification");
-
-  if (cookieGrouping) {
-    return cookieGrouping;
-  }
-
-  return null;
-}
-
-async function loadArchivedMessageGroups(groupBy: string | null = null) {
-  loadingData.value = true;
-  if (!initialLoadComplete.value || !groupBy) {
-    groupBy = loadDefaultGroupingClassifier();
-  }
-
-  await getArchiveGroups(groupBy ?? (route.query.deletedGroupBy as string));
-  loadingData.value = false;
-  initialLoadComplete.value = true;
-
-  emit("InitialLoadComplete");
-}
-
-//create workflow state
-function createWorkflowState(optionalStatus?: Status, optionalTotal?: number, optionalFailed?: boolean): WorkflowState {
-  if (optionalTotal && optionalTotal <= 1) {
-    optionalTotal = optionalTotal * 100;
-  }
-
-  return {
-    status: optionalStatus ?? "working",
-    total: optionalTotal ?? 0,
-    failed: optionalFailed ?? false,
-  };
+  await store.refresh();
 }
 
 //Restore operation
@@ -176,18 +43,14 @@ function showRestoreGroupDialog(group: ExtendedFailureGroupView) {
 async function restoreGroup() {
   const group = selectedGroup.value;
   if (group) {
-    // We're starting a restore, poll more frequently
-    changeRefreshInterval(1000);
-    undismissedRestoreGroups.value.push(group);
-
-    group.workflow_state = { status: "restorestarted", message: "Restore request initiated..." };
-    group.operation_start_time = new Date().toUTCString();
-
-    const result = await messageGroupClient.restoreGroup(group.id);
-    if (messageGroupClient.isError(result)) {
+    const { result, errorMessage } = await store.restoreGroup(group);
+    if (!result) {
       groupRestoreSuccessful.value = false;
-      useShowToast(TYPE.ERROR, "Error", `Failed to restore the group: ${result.message}`);
+      useShowToast(TYPE.ERROR, "Error", `Failed to restore the group: ${errorMessage}`);
     } else {
+      // We're starting a restore, poll more frequently
+      pollingFaster = true;
+      updateInterval(1000);
       groupRestoreSuccessful.value = true;
       useShowToast(TYPE.INFO, "Info", "Group restore started...");
     }
@@ -211,20 +74,6 @@ function getClassesForRestoreOperation(stepStatus: Status, currentStatus: Status
   return getClasses(stepStatus, currentStatus, statusesForRestoreOperation);
 }
 
-const acknowledgeGroup = function (dismissedGroup: FailureGroupView) {
-  undismissedRestoreGroups.value.splice(
-    undismissedRestoreGroups.value.findIndex((group) => {
-      return group.id === dismissedGroup.id;
-    }),
-    1
-  );
-
-  archiveGroups.value.splice(
-    archiveGroups.value.findIndex((group) => group.id === dismissedGroup.id),
-    1
-  );
-};
-
 function isBeingRestored(status: Status) {
   return (statusesForRestoreOperation as readonly Status[]).includes(status);
 }
@@ -237,44 +86,17 @@ function isRestoreInProgress() {
   return archiveGroups.value.some((group) => group.workflow_state.status !== "none" && group.workflow_state.status !== "restorecompleted");
 }
 
-function changeRefreshInterval(milliseconds: number) {
-  if (refreshInterval) {
-    clearInterval(refreshInterval);
-  }
-
-  refreshInterval = window.setInterval(() => {
-    // If we're currently polling at 5 seconds and there is a restore in progress, then change the polling interval to poll every 1 second
-    if (!pollingFaster && isRestoreInProgress()) {
-      changeRefreshInterval(1000);
-      pollingFaster = true;
-    } else if (pollingFaster && !isRestoreInProgress()) {
-      // if we're currently polling every 1 second and all restores are done, change polling frequency back to every 5 seconds
-      changeRefreshInterval(5000);
-      pollingFaster = false;
-    }
-
-    loadArchivedMessageGroups();
-  }, milliseconds);
-}
-
-onUnmounted(() => {
-  if (refreshInterval) {
-    clearInterval(refreshInterval);
+watch(isRefreshing, () => {
+  // If we're currently polling at 5 seconds and there is a restore in progress, then change the polling interval to poll every 1 second
+  if (!pollingFaster && isRestoreInProgress()) {
+    pollingFaster = true;
+    updateInterval(1000);
+  } else if (pollingFaster && !isRestoreInProgress()) {
+    // if we're currently polling every 1 second and all restores are done, change polling frequency back to every 5 seconds
+    pollingFaster = false;
+    updateInterval(5000);
   }
 });
-
-onMounted(async () => {
-  await getGroupingClassifiers();
-  let savedClassifier = loadDefaultGroupingClassifier();
-  if (!savedClassifier) {
-    savedClassifier = classifiers.value[0];
-  }
-
-  selectedClassifier.value = savedClassifier;
-  await loadArchivedMessageGroups();
-
-  changeRefreshInterval(5000);
-});
 </script>
 
 <template>
@@ -307,31 +129,23 @@ onMounted(async () => {
             <div>
               <div class="row">
                 <div class="col-sm-12">
-                  <no-data v-if="archiveGroups.length === 0 && !loadingData" title="message groups" message="There are currently no grouped message failures"></no-data>
+                  <no-data v-if="archiveGroups.length === 0 && !isRefreshing" title="message groups" message="There are currently no grouped message failures"></no-data>
                 </div>
               </div>
 
               <div class="row">
                 <div class="col-sm-12 no-mobile-side-padding">
                   <div v-if="archiveGroups.length > 0">
-                    <div
-                      :class="`row box box-group wf-${group.workflow_state.status} repeat-modify deleted-message-group`"
-                      v-for="(group, index) in archiveGroups"
-                      :key="index"
-                      :disabled="group.count == 0"
-                      @mouseenter="group.hover2 = true"
-                      @mouseleave="group.hover2 = false"
-                      @click.prevent="navigateToGroup(group.id)"
-                    >
+                    <div :class="`row box box-group wf-${group.workflow_state.status} repeat-modify deleted-message-group`" v-for="(group, index) in archiveGroups" :key="index" :disabled="group.count == 0" @click.prevent="navigateToGroup(group.id)">
                       <div class="col-sm-12 no-mobile-side-padding">
                         <div class="row">
                           <div class="col-sm-12 no-side-padding">
                             <div class="row box-header">
                               <div class="col-sm-12 no-side-padding">
-                                <p class="lead break" v-bind:class="{ 'msg-type-hover': group.hover2, 'msg-type-hover-off': group.hover3 }">{{ group.title }}</p>
+                                <p class="lead break">{{ group.title }}</p>
                                 <p class="metadata" v-if="!isBeingRestored(group.workflow_state.status)">
                                   <MetadataItem :icon="faEnvelope">
-                                    {{ group.count }} message<span v-if="group.count > 1">s</span>
+                                    <span>{{ group.count }} message<span v-if="group.count > 1">s</span></span>
                                     <span v-if="group.operation_remaining_count"> (currently restoring {{ group.operation_remaining_count }} </span>
                                   </MetadataItem>
 
@@ -357,8 +171,6 @@ onMounted(async () => {
                                   size="sm"
                                   :icon="faArrowRotateRight"
                                   :disabled="group.count === 0 || isBeingRestored(group.workflow_state.status)"
-                                  @mouseenter="group.hover3 = true"
-                                  @mouseleave="group.hover3 = false"
                                   v-if="archiveGroups.length > 0"
                                   @click.stop="showRestoreGroupDialog(group)"
                                 >
@@ -378,7 +190,7 @@ onMounted(async () => {
                                       </li>
                                       <li v-if="group.workflow_state.status === 'restorecompleted'">
                                         <div class="retry-completed bulk-retry-progress-status">Restore request completed</div>
-                                        <button type="button" class="btn btn-default btn-primary btn-xs btn-retry-dismiss" v-if="group.need_user_acknowledgement == true" @click.stop="acknowledgeGroup(group)">Dismiss</button>
+                                        <button type="button" class="btn btn-default btn-primary btn-xs btn-retry-dismiss" v-if="group.need_user_acknowledgement == true" @click.stop="store.acknowledgeGroup(group)">Dismiss</button>
                                       </li>
                                     </ul>
                                     <div class="op-metadata">
diff --git a/src/Frontend/src/components/failedmessages/messageGroupClient.ts b/src/Frontend/src/components/failedmessages/messageGroupClient.ts
index f39f870a0..a37e5f027 100644
--- a/src/Frontend/src/components/failedmessages/messageGroupClient.ts
+++ b/src/Frontend/src/components/failedmessages/messageGroupClient.ts
@@ -7,11 +7,11 @@ export interface ErrorResponse {
   message: string;
 }
 
-class MessageGroupClient {
+export class MessageGroupClient {
   serviceControlStore: ServiceControlStore;
-  constructor() {
+  constructor(store?: ServiceControlStore) {
     //this module is only called from within view setup or other pinia stores, so this call is lifecycle safe
-    this.serviceControlStore = useServiceControlStore();
+    this.serviceControlStore = store ?? useServiceControlStore();
   }
 
   public async getExceptionGroups(classifier: string = "") {
diff --git a/src/Frontend/src/composables/autoRefresh.ts b/src/Frontend/src/composables/autoRefresh.ts
index 5ebaf166c..deea385b0 100644
--- a/src/Frontend/src/composables/autoRefresh.ts
+++ b/src/Frontend/src/composables/autoRefresh.ts
@@ -59,7 +59,10 @@ export default function useFetchWithAutoRefresh(name: string, fetch: () => Promi
   };
 
   const updateInterval = (newIntervalMs: number) => {
+    if (interval.value === newIntervalMs) return;
+
     interval.value = newIntervalMs;
+    console.debug(`updated polling ${name} to ${newIntervalMs}ms`);
     pause();
     if (newIntervalMs > 0) {
       resume();
diff --git a/src/Frontend/src/composables/useAutoRefresh.ts b/src/Frontend/src/composables/useAutoRefresh.ts
index cbc15a098..042d5f1fe 100644
--- a/src/Frontend/src/composables/useAutoRefresh.ts
+++ b/src/Frontend/src/composables/useAutoRefresh.ts
@@ -1,8 +1,8 @@
 import { getCurrentInstance, onMounted, onUnmounted } from "vue";
 import useFetchWithAutoRefresh from "./autoRefresh";
 
-export function useAutoRefresh(name: string, refresh: () => Promise<void>, intervalMs: number) {
-  const { start, stop } = useFetchWithAutoRefresh(name, refresh, intervalMs);
+function useAutoRefresh(name: string, refresh: () => Promise<void>, intervalMs: number) {
+  const { start, stop, isRefreshing, updateInterval } = useFetchWithAutoRefresh(name, refresh, intervalMs);
 
   function useAutoRefresh() {
     if (!getCurrentInstance()) return; //should only happen in some test contexts. Refresh will need to be called manually for those cases
@@ -10,7 +10,7 @@ export function useAutoRefresh(name: string, refresh: () => Promise<void>, inter
     onUnmounted(stop);
   }
 
-  return useAutoRefresh;
+  return { refresh: useAutoRefresh, isRefreshing, updateInterval };
 }
 
 /**
@@ -21,7 +21,7 @@ export function useAutoRefresh(name: string, refresh: () => Promise<void>, inter
  * @param name - Name for logging purposes
  * @param useStore - Function that returns the Pinia store (called within component lifecycle)
  * @param intervalMs - Refresh interval in milliseconds
- * @returns A composable function that sets up auto-refresh and returns the store
+ * @returns A composable function that sets up auto-refresh and returns the store. Also provides a method to update the refresh interval and a ref indicating when a refresh is happening
  */
 export function useStoreAutoRefresh<TStore extends { refresh: () => Promise<void> }>(name: string, useStore: () => TStore, intervalMs: number) {
   const refresh = () => {
@@ -31,11 +31,15 @@ export function useStoreAutoRefresh<TStore extends { refresh: () => Promise<void
     return store.refresh();
   };
   let store: TStore | null = null;
-  const autoRefresh = useAutoRefresh(name, refresh, intervalMs);
+  const { refresh: autoRefresh, isRefreshing, updateInterval } = useAutoRefresh(name, refresh, intervalMs);
 
-  return () => {
-    store = useStore();
-    autoRefresh();
-    return { store };
+  return {
+    autoRefresh: () => {
+      store = useStore();
+      autoRefresh();
+      return { store };
+    },
+    isRefreshing,
+    updateInterval,
   };
 }
diff --git a/src/Frontend/src/composables/useConnectionsAndStatsAutoRefresh.ts b/src/Frontend/src/composables/useConnectionsAndStatsAutoRefresh.ts
index 6381fb890..ec0b6c518 100644
--- a/src/Frontend/src/composables/useConnectionsAndStatsAutoRefresh.ts
+++ b/src/Frontend/src/composables/useConnectionsAndStatsAutoRefresh.ts
@@ -1,4 +1,4 @@
 import { useConnectionsAndStatsStore } from "@/stores/ConnectionsAndStatsStore";
 import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default useStoreAutoRefresh("connectionsAndStats", useConnectionsAndStatsStore, 5000);
+export default useStoreAutoRefresh("connectionsAndStats", useConnectionsAndStatsStore, 5000).autoRefresh;
diff --git a/src/Frontend/src/composables/useCustomChecksStoreAutoRefresh.ts b/src/Frontend/src/composables/useCustomChecksStoreAutoRefresh.ts
index e3eb1f2fc..326689576 100644
--- a/src/Frontend/src/composables/useCustomChecksStoreAutoRefresh.ts
+++ b/src/Frontend/src/composables/useCustomChecksStoreAutoRefresh.ts
@@ -1,4 +1,4 @@
 import { useCustomChecksStore } from "@/stores/CustomChecksStore";
 import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default useStoreAutoRefresh("customChecks", useCustomChecksStore, 5000);
+export default useStoreAutoRefresh("customChecks", useCustomChecksStore, 5000).autoRefresh;
diff --git a/src/Frontend/src/composables/useEnvironmentAndVersionsAutoRefresh.ts b/src/Frontend/src/composables/useEnvironmentAndVersionsAutoRefresh.ts
index 9d25ab99d..05cefbba8 100644
--- a/src/Frontend/src/composables/useEnvironmentAndVersionsAutoRefresh.ts
+++ b/src/Frontend/src/composables/useEnvironmentAndVersionsAutoRefresh.ts
@@ -1,4 +1,4 @@
 import { useEnvironmentAndVersionsStore } from "@/stores/EnvironmentAndVersionsStore";
 import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default useStoreAutoRefresh("environmentAndVersions", useEnvironmentAndVersionsStore, 5000);
+export default useStoreAutoRefresh("environmentAndVersions", useEnvironmentAndVersionsStore, 5000).autoRefresh;
diff --git a/src/Frontend/src/composables/useHeartbeatInstancesStoreAutoRefresh.ts b/src/Frontend/src/composables/useHeartbeatInstancesStoreAutoRefresh.ts
index 9b6c5b45d..7b9b0f9b1 100644
--- a/src/Frontend/src/composables/useHeartbeatInstancesStoreAutoRefresh.ts
+++ b/src/Frontend/src/composables/useHeartbeatInstancesStoreAutoRefresh.ts
@@ -1,4 +1,4 @@
 import { useHeartbeatInstancesStore } from "@/stores/HeartbeatInstancesStore";
 import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default useStoreAutoRefresh("heartbeatInstances", useHeartbeatInstancesStore, 5000);
+export default useStoreAutoRefresh("heartbeatInstances", useHeartbeatInstancesStore, 5000).autoRefresh;
diff --git a/src/Frontend/src/composables/useHeartbeatsStoreAutoRefresh.ts b/src/Frontend/src/composables/useHeartbeatsStoreAutoRefresh.ts
index 107cbbbe7..75bd996cc 100644
--- a/src/Frontend/src/composables/useHeartbeatsStoreAutoRefresh.ts
+++ b/src/Frontend/src/composables/useHeartbeatsStoreAutoRefresh.ts
@@ -1,4 +1,4 @@
 import { useHeartbeatsStore } from "@/stores/HeartbeatsStore";
 import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default useStoreAutoRefresh("heartbeats", useHeartbeatsStore, 5000);
+export default useStoreAutoRefresh("heartbeats", useHeartbeatsStore, 5000).autoRefresh;
diff --git a/src/Frontend/src/composables/useThroughputStoreAutoRefresh.ts b/src/Frontend/src/composables/useThroughputStoreAutoRefresh.ts
index b44aa4e33..1cf07fa12 100644
--- a/src/Frontend/src/composables/useThroughputStoreAutoRefresh.ts
+++ b/src/Frontend/src/composables/useThroughputStoreAutoRefresh.ts
@@ -1,4 +1,4 @@
 import { useThroughputStore } from "@/stores/ThroughputStore";
 import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default useStoreAutoRefresh("throughput", useThroughputStore, 60 * 60 * 1000 /* 1 hour */);
+export default useStoreAutoRefresh("throughput", useThroughputStore, 60 * 60 * 1000 /* 1 hour */).autoRefresh;
diff --git a/src/Frontend/src/stores/DeletedMessageGroupsStore.ts b/src/Frontend/src/stores/DeletedMessageGroupsStore.ts
new file mode 100644
index 000000000..bd62a1fce
--- /dev/null
+++ b/src/Frontend/src/stores/DeletedMessageGroupsStore.ts
@@ -0,0 +1,146 @@
+import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
+import { readonly, ref, watch } from "vue";
+import { useServiceControlStore } from "./ServiceControlStore";
+import { useCookies } from "vue3-cookies";
+import FailureGroupView from "@/resources/FailureGroupView";
+import { MessageGroupClient } from "@/components/failedmessages/messageGroupClient";
+
+export const statusesForRestoreOperation = ["restorestarted", "restoreprogressing", "restorefinalizing", "restorecompleted"] as const;
+type RestoreOperationStatus = (typeof statusesForRestoreOperation)[number];
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const otherStatuses = ["none", "working"] as const;
+export type Status = RestoreOperationStatus | (typeof otherStatuses)[number];
+interface WorkflowState {
+  status: Status;
+  total?: number;
+  failed?: boolean;
+  message?: string;
+}
+export interface ExtendedFailureGroupView extends FailureGroupView {
+  index: number;
+  need_user_acknowledgement?: boolean;
+  workflow_state: WorkflowState;
+  operation_remaining_count?: number;
+  operation_start_time?: string;
+  last_operation_completion_time?: string;
+}
+
+export const useDeletedMessageGroupsStore = defineStore("DeletedMessageGroupsStore", () => {
+  const classifiers = ref<string[]>([]);
+  const selectedClassifier = ref<string | null>(null);
+  const archiveGroups = ref<ExtendedFailureGroupView[]>([]);
+  let undismissedRestoreGroups: ExtendedFailureGroupView[] = [];
+
+  const serviceControlStore = useServiceControlStore();
+  const { serviceControlUrl } = storeToRefs(serviceControlStore);
+  const messageGroupClient = new MessageGroupClient(serviceControlStore);
+
+  const cookies = useCookies();
+
+  async function refresh() {
+    //get all deleted message groups
+    const [, result] = await serviceControlStore.fetchTypedFromServiceControl<FailureGroupView[]>(`errors/groups/${selectedClassifier.value}`);
+
+    if (result.length === 0 && undismissedRestoreGroups.length > 0) {
+      undismissedRestoreGroups.forEach((deletedGroup) => {
+        deletedGroup.need_user_acknowledgement = true;
+        deletedGroup.workflow_state.status = "restorecompleted";
+      });
+    }
+
+    undismissedRestoreGroups.forEach((deletedGroup) => {
+      if (!result.find((group) => group.id === deletedGroup.id)) {
+        deletedGroup.need_user_acknowledgement = true;
+        deletedGroup.workflow_state.status = "restorecompleted";
+      }
+    });
+
+    // need a map in some ui state for controlling animations <-- TODO: work out what this comment means
+    const mappedResults = result
+      .filter((group) => !undismissedRestoreGroups.find((deletedGroup) => deletedGroup.id === group.id))
+      .map(
+        (group) =>
+          ({
+            index: 0,
+            workflow_state: {
+              status: "none" as Status,
+              total: 0,
+              failed: false,
+            },
+            ...group,
+          }) as ExtendedFailureGroupView
+      )
+      .concat(undismissedRestoreGroups);
+
+    let maxIndex = archiveGroups.value.reduce((currentMax, currentGroup) => Math.max(currentMax, currentGroup.index), 0);
+
+    mappedResults.forEach((serverGroup) => {
+      const previousGroup = archiveGroups.value.find((oldGroup) => oldGroup.id === serverGroup.id);
+
+      if (previousGroup) {
+        serverGroup.index = previousGroup.index;
+      } else {
+        serverGroup.index = ++maxIndex;
+      }
+    });
+
+    archiveGroups.value = mappedResults.sort((group1, group2) => {
+      return group1.index - group2.index;
+    });
+  }
+
+  async function getGroupingClassifiers() {
+    const [, data] = await serviceControlStore.fetchTypedFromServiceControl<string[]>("recoverability/classifiers");
+    classifiers.value = data;
+  }
+
+  function getGrouping() {
+    return cookies.cookies.get("archived_groups_classification") || null;
+  }
+
+  function setGrouping(classifier: string) {
+    cookies.cookies.set("archived_groups_classification", classifier);
+  }
+
+  async function restoreGroup(group: ExtendedFailureGroupView) {
+    undismissedRestoreGroups.push(group);
+
+    group.workflow_state = { status: "restorestarted", message: "Restore request initiated..." };
+    group.operation_start_time = new Date().toUTCString();
+
+    const result = await messageGroupClient.restoreGroup(group.id);
+    if (messageGroupClient.isError(result)) {
+      return { result: true, errorMessage: result.message };
+    }
+    return { result: true };
+  }
+
+  function acknowledgeGroup(dismissedGroup: FailureGroupView) {
+    undismissedRestoreGroups = undismissedRestoreGroups.filter((group) => group.id !== dismissedGroup.id);
+    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,
+    getGrouping,
+    setGrouping,
+    restoreGroup,
+    acknowledgeGroup,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useDeletedMessageGroupsStore, import.meta.hot));
+}
+
+export type DeletedMessageGroupsStore = ReturnType<typeof useDeletedMessageGroupsStore>;

From 06e903e92db3c88465c07f9e82c7e676b0f084c6 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 31 Oct 2025 10:48:58 +0800
Subject: [PATCH 3/3] updated initial load logic

---
 .../failedmessages/DeletedMessageGroups.vue   |  2 ++
 src/Frontend/src/composables/autoRefresh.ts   |  2 +-
 .../src/stores/DeletedMessageGroupsStore.ts   | 20 ++++++++-----------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue b/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue
index 94877b4ef..22627c87e 100644
--- a/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue
+++ b/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>
 
diff --git a/src/Frontend/src/composables/autoRefresh.ts b/src/Frontend/src/composables/autoRefresh.ts
index deea385b0..042689de4 100644
--- a/src/Frontend/src/composables/autoRefresh.ts
+++ b/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();
diff --git a/src/Frontend/src/stores/DeletedMessageGroupsStore.ts b/src/Frontend/src/stores/DeletedMessageGroupsStore.ts
index bd62a1fce..7f3a90174 100644
--- a/src/Frontend/src/stores/DeletedMessageGroupsStore.ts
+++ b/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,