Remove test code, add option for cache while fetching

Author: soujay

src/Frontend/src/components/messages2/SagaDiagram/SagaTimeoutMessage.vue

@@ -28,7 +28,7 @@ defineProps<{
       <div class="cell-inner cell-inner-right"></div>
       <div class="cell-inner cell-inner-side cell-inner-side--active">
         <img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
-        <h2 class="message-title" aria-label="timeout message type">FOURTH:{{ message.MessageFriendlyTypeName }}<br />{{ message.MessageId }}</h2>
+        <h2 class="message-title" aria-label="timeout message type">{{ message.MessageFriendlyTypeName }}</h2>
         <div class="timestamp" aria-label="timeout message timestamp">{{ message.FormattedTimeSent }}</div>
       </div>
       <div v-if="showMessageData" class="message-data message-data--active">

src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue

@@ -23,16 +23,15 @@ const props = defineProps<{
         <div class="cell-inner cell-inner-side">
           <img class="saga-icon saga-icon--side-cell" :src="CommandIcon" alt="" />
           <h2 class="message-title" aria-label="initiating message type">
-            FIRST:{{ update.InitiatingMessageType }}<br />
-            {{ update.MessageId }}
+            {{ update.InitiatingMessageType }}
           </h2>
           <div class="timestamp" aria-label="initiating message timestamp">{{ update.FormattedInitiatingMessageTimestamp }}</div>
         </div>
       </div>
       <div class="cell cell--center cell-flex">
         <div class="cell-inner cell-inner-center cell-inner--align-bottom">
           <img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" />
-          <h2 class="saga-status-title saga-status-title--inline">SECOND:{{ update.StatusDisplay }}<br />{{ update.MessageId }}</h2>
+          <h2 class="saga-status-title saga-status-title--inline">{{ update.StatusDisplay }}</h2>
           <div class="timestamp timestamp--inline" aria-label="time stamp">{{ update.FormattedStartTime }}</div>
         </div>
       </div>
@@ -73,7 +72,7 @@ const props = defineProps<{
         <template v-for="(msg, msgIndex) in update.NonTimeoutMessages" :key="msgIndex">
           <div class="cell-inner cell-inner-side">
             <img class="saga-icon saga-icon--side-cell" :src="msg.IsEventMessage ? EventIcon : CommandIcon" :alt="msg.IsEventMessage ? 'Event' : 'Command'" />
-            <h2 class="message-title">THIRD:{{ msg.MessageFriendlyTypeName }}<br />{{ msg.MessageId }}</h2>
+            <h2 class="message-title">{{ msg.MessageFriendlyTypeName }}</h2>
             <div class="timestamp">{{ msg.FormattedTimeSent }}</div>
           </div>
           <div v-if="showMessageData" class="message-data message-data--active">

src/Frontend/src/composables/serviceServiceControlUrls.ts

@@ -47,15 +47,17 @@ export function useIsMonitoringEnabled() {
   return !useIsMonitoringDisabled();
 }
 
-// export function useFetchFromServiceControl(suffix: string) {
-//   return fetch(serviceControlUrl.value + suffix);
-// }
-export function useFetchFromServiceControl(suffix: string, headers?: HeadersInit) {
+export function useFetchFromServiceControl(suffix: string, options?: { cache?: RequestCache }) {
   const requestOptions: RequestInit = {
-    headers,
+    method: "GET",
+    cache: options?.cache ?? "default", // Default  if not specified
+    headers: {
+      Accept: "application/json",
+    },
   };
   return fetch(serviceControlUrl.value + suffix, requestOptions);
 }
+
 export async function useTypedFetchFromServiceControl<T>(suffix: string): Promise<[Response, T]> {
   const response = await fetch(`${serviceControlUrl.value}${suffix}`);
   if (!response.ok) throw new Error(response.statusText ?? "No response");

src/Frontend/src/stores/SagaDiagramStore.ts

@@ -121,16 +121,9 @@ export const useSagaDiagramStore = defineStore("sagaHistory", () => {
     const bodyUrl = (message.body_url ?? formatUrl(MessageBodyEndpoint, message.message_id)).replace(/^\//, "");
     loading.value = true;
     error.value = null;
-    // const headers = {
-    //   //"Cache-Control": message.message_status === MessageStatus.Successful ? "no-cache" : "no-cache",
-    //   "Cache-Control": "no-cache",
-    // };
+
     try {
-      console.log("MessageBodyEndpoint:", MessageBodyEndpoint);
-      console.log("message.body_url:", message.body_url);
-      console.log("message.message_id:", message.message_id);
-      console.log("bodyUrl:", bodyUrl);
-      const response = await useFetchFromServiceControl(bodyUrl);
+      const response = await useFetchFromServiceControl(bodyUrl, { cache: "no-store" });
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
@@ -156,7 +149,6 @@ export const useSagaDiagramStore = defineStore("sagaHistory", () => {
       };
     } catch (e) {
       error.value = e instanceof Error ? e.message : "Unknown error occurred";
-      console.log("InCATCH" + error.value);
       return createEmptyMessageData(message.message_id);
     } finally {
       loading.value = false;