Adding auto refresh

More

Author: johnsimons

src/Frontend/src/components/failedmessages/EditRetryDialog2.vue

@@ -7,6 +7,8 @@ import parseContentType from "@/composables/contentTypeParser";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 import CodeEditor from "@/components/CodeEditor.vue";
 import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { storeToRefs } from "pinia";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
 interface HeaderWithEditing extends Header {
   isLocked: boolean;
@@ -51,8 +53,9 @@ const showEditAndRetryConfirmation = ref(false);
 const showCancelConfirmation = ref(false);
 const showEditRetryGenericError = ref(false);
 const store = useMessageViewStore();
-const id = computed(() => store.state.data.id ?? "");
-const messageBody = computed(() => store.body.data.value);
+const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
+const id = computed(() => state.value.data.id ?? "");
+const messageBody = computed(() => body.value.data.value);
 
 watch(messageBody, (newValue) => {
   if (newValue !== origMessageBody) {
@@ -119,17 +122,17 @@ async function retryEditedMessage() {
 }
 
 function initializeMessageBodyAndHeaders() {
-  origMessageBody = store.body.data.value ?? "";
+  origMessageBody = body.value.data.value ?? "";
   localMessage.value = {
     isBodyChanged: false,
     isBodyEmpty: false,
     isContentTypeSupported: false,
     bodyContentType: undefined,
-    bodyUnavailable: store.body.not_found ?? false,
+    bodyUnavailable: body.value.not_found ?? false,
     isEvent: false,
-    retried: store.state.data.failure_status.retried ?? false,
-    headers: store.headers.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
-    messageBody: store.body.data.value ?? "",
+    retried: state.value.data.failure_status.retried ?? false,
+    headers: headers.value.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
+    messageBody: body.value.data.value ?? "",
   };
   localMessage.value.isBodyEmpty = false;
   localMessage.value.isBodyChanged = false;
@@ -143,17 +146,17 @@ function initializeMessageBodyAndHeaders() {
   const messageIntent = getMessageIntent();
   localMessage.value.isEvent = messageIntent === "Publish";
 
-  for (let index = 0; index < store.headers.data.length; index++) {
-    const header: HeaderWithEditing = store.headers.data[index] as HeaderWithEditing;
+  for (let index = 0; index < headers.value.data.length; index++) {
+    const header: HeaderWithEditing = headers.value.data[index] as HeaderWithEditing;
 
     header.isLocked = false;
     header.isSensitive = false;
     header.isMarkedAsRemoved = false;
     header.isChanged = false;
 
-    if (store.edit_and_retry_config.locked_headers.includes(header.key)) {
+    if (edit_and_retry_config.value.locked_headers.includes(header.key)) {
       header.isLocked = true;
-    } else if (store.edit_and_retry_config.sensitive_headers.includes(header.key)) {
+    } else if (edit_and_retry_config.value.sensitive_headers.includes(header.key)) {
       header.isSensitive = true;
     }
 
@@ -220,7 +223,8 @@ onMounted(() => {
                       </table>
                       <div role="tabpanel" v-if="panel === 2 && !localMessage.bodyUnavailable" style="height: calc(100% - 260px)">
                         <div style="margin-top: 1.25rem">
-                          <CodeEditor aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
+                          <LoadingSpinner v-if="body.loading" />
+                          <CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
                         </div>
                         <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
                         <span class="reset-body" v-if="localMessage.isBodyChanged"><i class="fa fa-undo" v-tippy="`Reset changes`"></i> <a @click="resetBodyChanges()" href="javascript:void(0)">Reset changes</a></span>

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

@@ -6,6 +6,7 @@ import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import { MessageStatus } from "@/resources/Message.ts";
 import { storeToRefs } from "pinia";
+import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
@@ -20,7 +21,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(FailedMessageStatus.Archived);
 };
 </script>
 

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

@@ -6,6 +6,7 @@ import { TYPE } from "vue-toastification";
 import EditRetryDialog2 from "@/components/failedmessages/EditRetryDialog2.vue";
 import { MessageStatus } from "@/resources/Message.ts";
 import { storeToRefs } from "pinia";
+import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
@@ -19,13 +20,19 @@ 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(FailedMessageStatus.Resolved);
 };
+
+async function openDialog() {
+  await store.downloadBody();
+  isConfirmDialogVisible.value = true;
+}
 </script>
 
 <template>
   <template v-if="isVisible">
-    <button type="button" class="btn btn-default" aria-label="Edit & retry" :disabled="isDisabled" @click="isConfirmDialogVisible = true"><i class="fa fa-pencil"></i> Edit & retry</button>
+    <button type="button" class="btn btn-default" aria-label="Edit & retry" :disabled="isDisabled" @click="openDialog"><i class="fa fa-pencil"></i> Edit & retry</button>
     <Teleport to="#modalDisplay">
       <EditRetryDialog2 v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog2>
     </Teleport>

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

@@ -91,7 +91,8 @@ 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.retried" tooltip="Message is being retried" type="info" text="Retried" />
+                <MetadataLabel v-if="state.data.failure_status.retry_in_progress" tooltip="Message is being added to the retries queue" type="info" text="Requesting retry..." />
+                <MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is enqueued to be retried" type="info" text="Waiting for retry" />
                 <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..." />
                 <MetadataLabel v-if="state.data.failure_status.archived" tooltip="Message is deleted" type="warning" text="Deleted" />

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

@@ -5,24 +5,26 @@ import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import { storeToRefs } from "pinia";
+import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
-const failureStatus = computed(() => state.value.data.failure_status);
+const isVisible = computed(() => state.value.data.failure_status.archived);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
   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(FailedMessageStatus.Unresolved);
 };
 </script>
 
 <template>
-  <template v-if="failureStatus.archived">
+  <template v-if="isVisible">
     <button type="button" class="btn btn-default" @click="isConfirmDialogVisible = true"><i class="fa fa-undo"></i> Restore</button>
     <Teleport to="#modalDisplay">
       <ConfirmDialog

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

@@ -6,6 +6,7 @@ import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import { MessageStatus } from "@/resources/Message.ts";
 import { storeToRefs } from "pinia";
+import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
@@ -20,7 +21,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(FailedMessageStatus.Resolved);
 };
 </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(status: FailedMessageStatus) {
+    if (!state.data.id) {
+      return;
+    }
+
+    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}`);
+      if (status === data.status) {
+        break;
+      }
+    } while (maxRetries-- > 0);
+
+    if (maxRetries === 0) {
+      // It never changed so no need to refresh UI
+      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,
   };
 });