Adding auto refresh

Author: johnsimons

src/Frontend/src/components/messages/DeleteMessageButton.vue

@@ -20,7 +20,8 @@ const handleConfirm = async () => {
 
   const message = `Deleting the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.archiveMessage, TYPE.INFO, "Info", message);
-  state.value.data.failure_status.archiving = true;
+
+  await store.pollForNextUpdate();
 };
 </script>
 

src/Frontend/src/components/messages/EditAndRetryButton.vue

@@ -19,7 +19,8 @@ const handleConfirm = async () => {
 
   const message = `Retrying the edited message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
-  state.value.data.failure_status.retried = true;
+
+  await store.pollForNextUpdate();
 };
 </script>
 

src/Frontend/src/components/messages/MessageView2.vue

@@ -91,6 +91,7 @@ watch(
           <div class="row">
             <div class="col-sm-12 no-side-padding">
               <div class="metadata group-message-count message-metadata">
+                <MetadataLabel v-if="state.data.failure_status.retry_in_progress" tooltip="Message is being retried" type="info" text="Retrying..." />
                 <MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is being retried" type="info" text="Retried" />
                 <MetadataLabel v-if="state.data.failure_status.restoring" tooltip="Message is being restored" type="info" text="Restoring..." />
                 <MetadataLabel v-if="state.data.failure_status.archiving" tooltip="Message is being deleted" type="info" text="Deleting..." />

src/Frontend/src/components/messages/RestoreMessageButton.vue

@@ -17,7 +17,8 @@ const handleConfirm = async () => {
 
   const message = `Restoring the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.restoreMessage, TYPE.INFO, "Info", message);
-  state.value.data.failure_status.restoring = true;
+
+  await store.pollForNextUpdate();
 };
 </script>
 

src/Frontend/src/components/messages/RetryMessageButton.vue

@@ -20,7 +20,8 @@ const handleConfirm = async () => {
 
   const message = `Retrying the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
-  state.value.data.failure_status.retried = true;
+
+  await store.pollForNextUpdate();
 };
 </script>
 

src/Frontend/src/stores/MessageViewStore.ts

@@ -120,8 +120,6 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     const countdown = moment(state.data.failure_metadata.last_modified).add(error_retention_period, "hours");
     state.data.failure_status.delete_soon = countdown < moment();
     state.data.failure_metadata.deleted_in = countdown.format();
-
-    // TODO: Maintain the mutations of the message in memory until the api returns a newer modified message
   }
 
   async function loadMessage(messageId: string, id: string) {
@@ -229,8 +227,35 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
   async function retryMessage() {
     if (state.data.id) {
       await useRetryMessages([state.data.id]);
-      state.data.failure_status.retried = true;
+      state.data.failure_status.retry_in_progress = true;
+    }
+  }
+
+  async function pollForNextUpdate() {
+    if (!state.data.id) {
+      return;
+    }
+
+    let lastModified = state.data.failure_metadata.last_modified;
+    let maxRetries = 60; // We try for 60 seconds
+
+    do {
+      // eslint-disable-next-line no-await-in-loop
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      // eslint-disable-next-line no-await-in-loop
+      const [, data] = await useTypedFetchFromServiceControl<FailedMessage>(`errors/last/${state.data.id}`);
+      lastModified = data.last_modified;
+
+      console.log(`${lastModified} vs ${state.data.failure_metadata.last_modified} ${lastModified === state.data.failure_metadata.last_modified}`);
+    } while (lastModified === state.data.failure_metadata.last_modified && maxRetries-- > 0);
+
+    if (lastModified === state.data.failure_metadata.last_modified) {
+      return;
     }
+
+    const id = state.data.id;
+    reset();
+    await loadFailedMessage(id);
   }
 
   async function exportMessage() {
@@ -278,6 +303,7 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     restoreMessage,
     retryMessage,
     conversationData,
+    pollForNextUpdate,
   };
 });