handling ignored edit&retry (#2665)

Author: cquirosj

src/Frontend/src/components/failedmessages/EditIgnoredDialog.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  close: [];
+}>();
+
+function closeDialog() {
+  emit("close");
+}
+</script>
+
+<template>
+  <section name="edit_ignored_dialog">
+    <div class="modal" style="z-index: 1050; display: block" role="dialog" aria-label="edit ignored">
+      <div class="modal-mask">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <div class="modal-title">
+                <h3>Edit Ignored</h3>
+              </div>
+            </div>
+            <div class="modal-body">
+              <p>This retry was ignored because another edit had already been processed.</p>
+            </div>
+            <div class="modal-footer">
+              <button class="btn btn-primary" @click="closeDialog()">Ok</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@import "@/components/modal.css";
+</style>

src/Frontend/src/components/failedmessages/EditRetryDialog.vue

@@ -10,16 +10,8 @@ import { storeToRefs } from "pinia";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import FAIcon from "@/components/FAIcon.vue";
 import { faExclamationCircle, faExclamationTriangle, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { HeaderWithEditing } from "@/resources/EditMessage";
 import { useDebounceFn } from "@vueuse/core";
-import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
-
-interface HeaderWithEditing extends Header {
-  isLocked: boolean;
-  isSensitive: boolean;
-  isMarkedAsRemoved: boolean;
-  isChanged: boolean;
-}
 
 const emit = defineEmits<{
   cancel: [];
@@ -56,9 +48,6 @@ const showCancelConfirmation = ref(false);
 const showEditRetryGenericError = ref(false);
 const messageStore = useMessageStore();
 const { state, headers, body, edit_and_retry_config } = storeToRefs(messageStore);
-const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
-const areSimpleHeadersSupported = environmentStore.serviceControlIsGreaterThan("5.2.0");
-const serviceControlStore = useServiceControlStore();
 
 const id = computed(() => state.value.data.id ?? "");
 const uneditedMessageBody = computed(() => body.value.data.value ?? "");
@@ -110,24 +99,7 @@ function removeHeadersMarkedAsRemoved() {
 async function retryEditedMessage() {
   removeHeadersMarkedAsRemoved();
   try {
-    const payload = {
-      message_body: localMessage.value.messageBody,
-      message_headers: areSimpleHeadersSupported.value
-        ? localMessage.value.headers.reduce(
-            (result, header) => {
-              const { key, value } = header as { key: string; value: string };
-              result[key] = value;
-              return result;
-            },
-            {} as { [key: string]: string }
-          )
-        : localMessage.value.headers,
-    };
-    const response = await serviceControlStore.postToServiceControl(`edit/${id.value}`, payload);
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-
+    await messageStore.retryEditedMessage(id.value, localMessage);
     localMessage.value.retried = true;
     return emit("confirm");
   } catch {

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

@@ -5,24 +5,36 @@ import { computed, ref } from "vue";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import EditRetryDialog from "@/components/failedmessages/EditRetryDialog.vue";
+import EditIgnoredDialog from "@/components/failedmessages/EditIgnoredDialog.vue";
 import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { faPencil } from "@fortawesome/free-solid-svg-icons";
 
 const store = useMessageStore();
-const { state, edit_and_retry_config } = storeToRefs(store);
+const { state, edit_and_retry_config, editRetryResponse } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
+const isEditIgnoredDialogVisible = ref(false);
 
 const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
 const isVisible = computed(() => edit_and_retry_config.value.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
+
+const handleIgnoreClose = async () => {
+  isEditIgnoredDialogVisible.value = false;
+  await store.pollForNextUpdate(FailedMessageStatus.Resolved);
+};
+
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
-  const message = `Retrying the edited message ${state.value.data.id} ...`;
-  useShowToast(TYPE.INFO, "Info", message);
-  await store.pollForNextUpdate(FailedMessageStatus.Resolved);
+  if (editRetryResponse.value?.edit_ignored) {
+    isEditIgnoredDialogVisible.value = true;
+  } else {
+    const message = `Retrying the edited message ${state.value.data.id} ...`;
+    useShowToast(TYPE.INFO, "Info", message);
+    await store.pollForNextUpdate(FailedMessageStatus.Resolved);
+  }
 };
 
 async function openDialog() {
@@ -36,6 +48,7 @@ async function openDialog() {
     <ActionButton :icon="faPencil" aria-label="Edit & retry" :disabled="isDisabled" @click="openDialog">Edit & retry</ActionButton>
     <Teleport to="#modalDisplay">
       <EditRetryDialog v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog>
+      <EditIgnoredDialog v-if="isEditIgnoredDialogVisible" @close="handleIgnoreClose"></EditIgnoredDialog>
     </Teleport>
   </template>
 </template>

src/Frontend/src/resources/EditMessage.ts

@@ -0,0 +1,13 @@
+import type Header from "./Header";
+
+export interface HeaderWithEditing extends Header {
+  isLocked: boolean;
+  isSensitive: boolean;
+  isMarkedAsRemoved: boolean;
+  isChanged: boolean;
+}
+
+export interface EditedMessage {
+  messageBody: string;
+  headers: HeaderWithEditing[];
+}

src/Frontend/src/resources/EditRetryResponse.ts

@@ -0,0 +1,3 @@
+export default interface EditRetryResponse {
+  edit_ignored: boolean;
+}

src/Frontend/src/stores/MessageStore.ts

@@ -1,5 +1,5 @@
 import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
-import { computed, reactive, ref } from "vue";
+import { computed, reactive, Ref, ref } from "vue";
 import Header from "@/resources/Header";
 import type EndpointDetails from "@/resources/EndpointDetails";
 import { FailedMessage, ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage";
@@ -11,6 +11,9 @@ import { parse, stringify } from "lossless-json";
 import xmlFormat from "xml-formatter";
 import { DataContainer } from "./DataContainer";
 import { useServiceControlStore } from "./ServiceControlStore";
+import EditRetryResponse from "@/resources/EditRetryResponse";
+import { EditedMessage } from "@/resources/EditMessage";
+import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
 
 interface Model {
   id?: string;
@@ -62,12 +65,15 @@ export const useMessageStore = defineStore("MessageStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
   const body = ref<DataContainer<{ value?: string; content_type?: string; no_content?: boolean }>>({ data: {} });
   const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} } });
+  const editRetryResponse = ref<EditRetryResponse | null>(null);
   let bodyLoadedId = "";
   let conversationLoadedId = "";
   const conversationData = ref<DataContainer<Message[]>>({ data: [] });
   const editRetryStore = useEditRetryStore();
   const configStore = useConfigurationStore();
   const serviceControlStore = useServiceControlStore();
+  const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
+  const areSimpleHeadersSupported = environmentStore.serviceControlIsGreaterThan("5.2.0");
 
   const { config: edit_and_retry_config } = storeToRefs(editRetryStore);
   const { configuration } = storeToRefs(configStore);
@@ -83,6 +89,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     bodyLoadedId = "";
     conversationLoadedId = "";
     conversationData.value.data = [];
+    editRetryResponse.value = null;
   }
 
   async function loadFailedMessage(id: string) {
@@ -261,6 +268,36 @@ export const useMessageStore = defineStore("MessageStore", () => {
     }
   }
 
+  async function retryEditedMessage(id: string, editedMessage: Ref<EditedMessage>) {
+    const payload = {
+      message_body: editedMessage.value.messageBody,
+      message_headers: areSimpleHeadersSupported.value
+        ? editedMessage.value.headers.reduce(
+            (result, header) => {
+              const { key, value } = header as { key: string; value: string };
+              result[key] = value;
+              return result;
+            },
+            {} as { [key: string]: string }
+          )
+        : editedMessage.value.headers,
+    };
+    const response = await serviceControlStore.postToServiceControl(`edit/${id}`, payload);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    //older versions of SC return no payload about the edit result
+    const bodyText = await response.text();
+    if (bodyText === "") {
+      editRetryResponse.value = {
+        edit_ignored: false,
+      };
+    } else {
+      editRetryResponse.value = parse(bodyText) as EditRetryResponse;
+    }
+  }
+
   async function pollForNextUpdate(status: FailedMessageStatus) {
     if (!state.data.id) {
       return;
@@ -320,6 +357,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     body,
     state,
     edit_and_retry_config,
+    editRetryResponse,
     reset,
     loadMessage,
     loadFailedMessage,
@@ -332,6 +370,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     retryMessages,
     conversationData,
     pollForNextUpdate,
+    retryEditedMessage,
   };
 });