Indicating when the body wasn't stored for the audited message (#2585)

* Indicating when the body wasn't stored for the audited message

* Address saga history

---------

Co-authored-by: Daniel Marbach <danielmarbach@users.noreply.github.com>

Author: afprtclr

src/Frontend/src/components/messages/BodyView.vue

@@ -25,6 +25,10 @@ const body = computed(() => bodyState.value.data.value);
     <div v-if="bodyState.not_found" class="alert alert-info">Could not find the message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
     <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
     <LoadingSpinner v-else-if="bodyState.loading" />
+    <div v-else-if="bodyState.data.no_content" class="alert alert-info">
+      Body was too large and not stored. Edit <a href="https://docs.particular.net/servicecontrol/audit-instances/configuration#performance-tuning-servicecontrol-auditmaxbodysizetostore">ServiceControl/MaxBodySizeToStore</a> to be larger in the
+      ServiceControl configuration.
+    </div>
     <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
     <div v-else-if="body && !contentType.isSupported" class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
   </div>

src/Frontend/src/components/messages/SagaDiagram/MessageDataBox.vue

@@ -30,7 +30,7 @@ const body = computed(() => props.messageData.body.data.value || "");
   <div v-else-if="messageData.body.failed_to_load" class="message-data-box message-data-box-error">
     <span class="message-data-box-text--error">Failed to load message data, there might be a connection issue or the message may no longer be available.</span>
   </div>
-  <div v-else-if="!messageDataLoading && (!messageData.body.data.value || messageData.body.not_found)" class="message-data-box">
+  <div v-else-if="!messageDataLoading && (!messageData.body.data.value || messageData.body.not_found || messageData.body.data.no_content)" class="message-data-box">
     <span class="message-data-box-text--empty">No message body data available</span>
   </div>
   <div v-else-if="contentType.isSupported" class="message-data-box message-data-box-content">

src/Frontend/src/stores/MessageStore.ts

@@ -61,7 +61,7 @@ interface Model {
 
 export const useMessageStore = defineStore("MessageStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
-  const body = ref<DataContainer<{ value?: string; content_type?: string }>>({ 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: {} } });
   let bodyLoadedId = "";
   let conversationLoadedId = "";
@@ -204,6 +204,12 @@ export const useMessageStore = defineStore("MessageStore", () => {
         return;
       }
 
+      if (response.status === 204) {
+        body.value.data.no_content = true;
+
+        return;
+      }
+
       const contentType = response.headers.get("content-type");
       body.value.data.content_type = contentType ?? "text/plain";
       body.value.data.value = await response.text();
@@ -288,7 +294,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
 
     await downloadBody();
 
-    if (!(body.value.not_found || body.value.failed_to_load)) {
+    if (!(body.value.not_found || body.value.failed_to_load || body.value.data.no_content)) {
       exportString += "\n\nMESSAGE BODY\n";
       exportString += body.value.data.value;
     }

src/Frontend/src/stores/SagaDiagramStore.ts

@@ -10,7 +10,7 @@ import { useMessageStore } from "./MessageStore";
 
 export interface SagaMessageData {
   message_id: string;
-  body: DataContainer<{ value?: string; content_type?: string }>;
+  body: DataContainer<{ value?: string; content_type?: string; no_content?: boolean }>;
 }
 export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
   const sagaHistory = ref<SagaHistory | null>(null);
@@ -101,6 +101,11 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
         return result;
       }
 
+      if (response.status === 204) {
+        result.body.data.no_content = true;
+        return result;
+      }
+
       const contentType = response.headers.get("content-type");
       result.body.data.content_type = contentType ?? "text/plain";
       result.body.data.value = await response.text();