Merge branch 'monitoring_store' into john/refactor_stores

# Conflicts:
#	src/Frontend/src/components/failedmessages/DeletedMessages.vue
#	src/Frontend/src/components/failedmessages/FailedMessages.vue
#	src/Frontend/src/components/failedmessages/PendingRetries.vue
#	src/Frontend/src/stores/ServiceControlStore.ts

Author: PhilBastian

src/Frontend/package-lock.json

@@ -33,7 +33,7 @@
     "@vue-flow/controls": "1.1.3",
     "@vue-flow/core": "1.48.0",
     "@vuepic/vue-datepicker": "12.0.5",
-    "@vueuse/core": "14.0.0",
+    "@vueuse/core": "14.1.0",
     "bootstrap": "5.3.8",
     "codemirror": "6.0.2",
     "dayjs": "1.11.19",
@@ -69,13 +69,13 @@
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "10.6.0",
+    "eslint-plugin-vue": "10.6.1",
     "globals": "16.5.0",
     "jsdom": "26.1.0",
     "msw": "2.12.3",
-    "prettier": "3.6.2",
+    "prettier": "3.7.1",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.47.0",
+    "typescript-eslint": "8.48.0",
     "vite": "7.2.4",
     "vite-plugin-checker": "0.11.0",
     "vite-plugin-vue-devtools": "8.0.5",

src/Frontend/package.json

@@ -1,133 +1,31 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onBeforeMount, ref, watch } from "vue";
 import { useShowToast } from "../../composables/toast";
-import { onBeforeRouteLeave, useRoute } from "vue-router";
-import { useCookies } from "vue3-cookies";
+import { onBeforeRouteLeave } from "vue-router";
 import LicenseNotExpired from "../../components/LicenseNotExpired.vue";
 import ServiceControlAvailable from "../ServiceControlAvailable.vue";
 import MessageList, { IMessageList } from "./MessageList.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import PaginationStrip from "../../components/PaginationStrip.vue";
-import dayjs from "@/utils/dayjs";
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { TYPE } from "vue-toastification";
-import FailureGroup from "@/resources/FailureGroup";
 import FAIcon from "@/components/FAIcon.vue";
 import { faArrowRotateRight } from "@fortawesome/free-solid-svg-icons";
-import serviceControlClient from "@/components/serviceControlClient";
-import { useConfigurationStore } from "@/stores/ConfigurationStore";
 import { storeToRefs } from "pinia";
+import { useStoreAutoRefresh } from "@/composables/useAutoRefresh";
+import { DeletedPeriodOption, useRecoverabilityStore } from "@/stores/RecoverabilityStore";
+import LoadingSpinner from "../LoadingSpinner.vue";
 
-let pollingFaster = false;
-let refreshInterval: number | undefined;
-const perPage = 50;
+const POLLING_INTERVAL_NORMAL = 5000;
+const POLLING_INTERVAL_FAST = 1000;
+
+const loading = ref(false);
+const { autoRefresh, isRefreshing, updateInterval } = useStoreAutoRefresh("messagesStore", useRecoverabilityStore, POLLING_INTERVAL_NORMAL);
+const { store } = autoRefresh();
+const { messages, groupId, groupName, totalCount, pageNumber, selectedPeriod } = storeToRefs(store);
 
-const route = useRoute();
-const groupId = ref<string>(route.params.groupId as string);
-const groupName = ref("");
-const pageNumber = ref(1);
-const totalCount = ref(0);
-const cookies = useCookies().cookies;
-const periodOptions = ["All Deleted", "Deleted in the last 2 Hours", "Deleted in the last 1 Day", "Deleted in the last 7 days"] as const;
-type PeriodOption = (typeof periodOptions)[number];
-const selectedPeriod = ref<PeriodOption>("Deleted in the last 7 days");
 const showConfirmRestore = ref(false);
 const messageList = ref<IMessageList | undefined>();
-const messages = ref<ExtendedFailedMessage[]>([]);
-
-watch(pageNumber, () => loadMessages());
-
-const configurationStore = useConfigurationStore();
-const { configuration } = storeToRefs(configurationStore);
-
-function loadMessages() {
-  let startDate = new Date(0);
-  const endDate = new Date();
-
-  switch (selectedPeriod.value) {
-    case "All Deleted":
-      startDate = new Date();
-      startDate.setHours(startDate.getHours() - 24 * 365);
-      break;
-    case "Deleted in the last 2 Hours":
-      startDate = new Date();
-      startDate.setHours(startDate.getHours() - 2);
-      break;
-    case "Deleted in the last 1 Day":
-      startDate = new Date();
-      startDate.setHours(startDate.getHours() - 24);
-      break;
-    case "Deleted in the last 7 days":
-      startDate = new Date();
-      startDate.setHours(startDate.getHours() - 24 * 7);
-      break;
-  }
-  return loadPagedMessages(groupId.value, pageNumber.value, "", "", startDate.toISOString(), endDate.toISOString());
-}
-
-async function loadGroupDetails(groupId: string) {
-  const [, data] = await serviceControlClient.fetchTypedFromServiceControl<FailureGroup>(`archive/groups/id/${groupId}`);
-  groupName.value = data.title;
-}
-
-function loadPagedMessages(groupId?: string, page: number = 1, sortBy: string = "modified", direction: string = "desc", startDate: string = new Date(0).toISOString(), endDate: string = new Date().toISOString()) {
-  const dateRange = startDate + "..." + endDate;
-  let loadGroupDetailsPromise;
-  if (groupId && !groupName.value) {
-    loadGroupDetailsPromise = loadGroupDetails(groupId);
-  }
-
-  async function loadDelMessages() {
-    try {
-      const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
-        `${groupId ? `recoverability/groups/${groupId}/` : ""}errors?status=archived&page=${page}&per_page=${perPage}&sort=${sortBy}&direction=${direction}&modified=${dateRange}`
-      );
-
-      totalCount.value = parseInt(response.headers.get("Total-Count") ?? "0");
-
-      if (messages.value.length && data.length) {
-        // merge the previously selected messages into the new list so we can replace them
-        messages.value.forEach((previousMessage) => {
-          const receivedMessage = data.find((m) => m.id === previousMessage.id);
-          if (receivedMessage) {
-            if (previousMessage.last_modified === receivedMessage.last_modified) {
-              receivedMessage.retryInProgress = previousMessage.retryInProgress;
-              receivedMessage.deleteInProgress = previousMessage.deleteInProgress;
-            }
-
-            receivedMessage.selected = previousMessage.selected;
-          }
-        });
-      }
-      messages.value = updateMessagesScheduledDeletionDate(data);
-    } catch (err) {
-      console.log(err);
-      const result = {
-        message: "error",
-      };
-      return result;
-    }
-  }
-
-  const loadDelMessagesPromise = loadDelMessages();
-
-  if (loadGroupDetailsPromise) {
-    return Promise.all([loadGroupDetailsPromise, loadDelMessagesPromise]);
-  }
-
-  return loadDelMessagesPromise;
-}
-
-function updateMessagesScheduledDeletionDate(messages: ExtendedFailedMessage[]) {
-  //check deletion time
-  messages.forEach((message) => {
-    message.error_retention_period = dayjs.duration(configuration.value?.data_retention.error_retention_period ?? "PT0S").asHours();
-    const countdown = dayjs(message.last_modified).add(message.error_retention_period, "hours");
-    message.delete_soon = countdown < dayjs();
-    message.deleted_in = countdown.format();
-  });
-  return messages;
-}
 
 function numberSelected() {
   return messageList.value?.getSelectedMessages()?.length ?? 0;
@@ -146,69 +44,45 @@ function isAnythingSelected() {
 }
 
 async function restoreSelectedMessages() {
-  changeRefreshInterval(1000);
+  // We're starting a restore, poll more frequently
+  updateInterval(POLLING_INTERVAL_FAST);
   const selectedMessages = messageList.value?.getSelectedMessages() ?? [];
   selectedMessages.forEach((m) => (m.restoreInProgress = true));
   useShowToast(TYPE.INFO, "Info", `restoring ${selectedMessages.length} messages...`);
 
-  await serviceControlClient.patchToServiceControl(
-    "errors/unarchive",
-    selectedMessages.map((m) => m.id)
-  );
+  await store.restoreById(selectedMessages.map((m) => m.id));
   messageList.value?.deselectAll();
 }
 
-function periodChanged(period: PeriodOption) {
-  selectedPeriod.value = period;
-  cookies.set("all_deleted_messages_period", period);
-
-  loadMessages();
-}
-
-function isRestoreInProgress() {
-  return messages.value.some((message) => message.restoreInProgress);
-}
-
-function changeRefreshInterval(milliseconds: number) {
-  if (refreshInterval != null) {
-    window.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 but all restores are done, change polling frequency back to every 5 seconds
-      changeRefreshInterval(5000);
-      pollingFaster = false;
-    }
-
-    loadMessages();
-  }, milliseconds);
+async function periodChanged(period: DeletedPeriodOption) {
+  loading.value = true;
+  await store.setPeriod(period);
+  loading.value = false;
 }
 
 onBeforeRouteLeave(() => {
   groupId.value = "";
   groupName.value = "";
 });
 
-onUnmounted(() => {
-  if (refreshInterval != null) {
-    window.clearInterval(refreshInterval);
+const isRestoreInProgress = computed(() => messages.value.some((message) => message.restoreInProgress));
+watch(isRestoreInProgress, (restoreInProgress) => {
+  if (restoreInProgress) {
+    // If there is a restore in progress, poll every 1 second
+    updateInterval(POLLING_INTERVAL_FAST);
+  } else {
+    // If all restores are done, change polling frequency back to every 5 seconds
+    updateInterval(POLLING_INTERVAL_NORMAL);
   }
 });
 
-onMounted(() => {
-  let cookiePeriod = cookies.get("all_deleted_messages_period") as PeriodOption;
-  if (!cookiePeriod) {
-    cookiePeriod = periodOptions[periodOptions.length - 1]; //default is last 7 days
-  }
-  selectedPeriod.value = cookiePeriod;
-  loadMessages();
-
-  changeRefreshInterval(5000);
+onBeforeMount(async () => {
+  loading.value = true;
+  //set status before mount to ensure no other controls/processes can cause extra refreshes during mount
+  await store.setMessageStatus(FailedMessageStatus.Archived);
+});
+watch(isRefreshing, () => {
+  if (!isRefreshing.value && loading.value) loading.value = false;
 });
 </script>
 
@@ -240,7 +114,7 @@ onMounted(() => {
                 <span class="caret"></span>
               </button>
               <ul class="dropdown-menu">
-                <li v-for="(period, index) in periodOptions" :key="index">
+                <li v-for="(period, index) in store.deletedPeriodOptions" :key="index">
                   <a @click.prevent="periodChanged(period)">{{ period }}</a>
                 </li>
               </ul>
@@ -249,11 +123,12 @@ onMounted(() => {
         </div>
         <div class="row">
           <div class="col-12">
-            <MessageList :messages="messages" ref="messageList"></MessageList>
+            <LoadingSpinner v-if="messages.length === 0 && (loading || isRefreshing)" />
+            <MessageList v-else :messages="messages" ref="messageList"></MessageList>
           </div>
         </div>
         <div class="row" v-if="messages.length > 0">
-          <PaginationStrip v-model="pageNumber" :total-count="totalCount" :items-per-page="perPage" />
+          <PaginationStrip v-model="pageNumber" :total-count="totalCount" :items-per-page="store.perPage" />
         </div>
         <Teleport to="#modalDisplay">
           <ConfirmDialog