Updated to read from message store

Author: soujay

src/Frontend/src/components/messages2/MessageView.vue

@@ -21,6 +21,7 @@ import { storeToRefs } from "pinia";
 import MetadataLabel from "@/components/messages2/MetadataLabel.vue";
 import { hexToCSSFilter } from "hex-to-css-filter";
 import LoadingOverlay from "@/components/LoadingOverlay.vue";
+import SagaDiagram from "./SagaDiagram.vue";
 
 const route = useRoute();
 const id = computed(() => route.params.id as string);
@@ -58,6 +59,10 @@ const tabs = computed(() => {
       text: "Sequence Diagram",
       component: SequenceDiagram,
     });
+    currentTabs.push({
+      text: "Saga Diagram",
+      component: SagaDiagram,
+    });
   }
 
   return currentTabs;

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import Message from "@/resources/Message";
 import { computed, onUnmounted, watch } from "vue";
 import { RouterLink } from "vue-router";
 import routeLinks from "@/router/routeLinks";
@@ -19,24 +18,20 @@ import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 import ToolbarEndpointIcon from "@/assets/Shell_ToolbarEndpoint.svg";
 import NoSagaIcon from "@/assets/NoSaga.svg";
 import CopyClipboardIcon from "@/assets/Shell_CopyClipboard.svg";
+import { useMessageStore } from "@/stores/MessageStore";
+import { storeToRefs } from "pinia";
 
-const props = withDefaults(
-  defineProps<{
-    message: Message;
-  }>(),
-  {
-    message: () => ({}) as Message,
-  }
-);
+const store = useMessageStore();
+const { state: messageState } = storeToRefs(store);
 
 const sagaDiagramStore = useSagaDiagramStore();
 
 //Watch for message and set saga ID when component mounts or message changes
 watch(
-  () => props.message?.invoked_sagas,
+  () => messageState.value.data.invoked_saga,
   (newSagas) => {
-    if (newSagas && newSagas?.length > 0) {
-      sagaDiagramStore.setSagaId(newSagas[0].saga_id);
+    if (newSagas.has_saga) {
+      sagaDiagramStore.setSagaId(newSagas.saga_id || "");
     } else {
       sagaDiagramStore.clearSagaHistory();
     }
@@ -150,7 +145,7 @@ interface SagaViewModel {
   MessageIdUrl: string;
   ParticipatedInSaga: boolean;
   HasSagaData: boolean;
-  ShowNoPluginActiveLeged: boolean;
+  ShowNoPluginActiveLegend: boolean;
   SagaCompleted: boolean;
   FormattedCompletionTime: string;
   SagaUpdates: SagaUpdateViewModel[];
@@ -160,15 +155,13 @@ const vm = computed<SagaViewModel>(() => {
   const completedUpdate = sagaDiagramStore.sagaHistory?.changes.find((update) => update.status === "completed");
   const completionTime = completedUpdate ? new Date(completedUpdate.finish_time) : null;
 
-  const invokedSaga = props.message?.invoked_sagas?.[0];
-
   return {
-    SagaTitle: typeToName(invokedSaga?.saga_type) || "Unknown saga",
-    SagaGuid: invokedSaga?.saga_id || "Missing guid",
-    MessageIdUrl: routeLinks.messages.successMessage.link(props.message.message_id, props.message.id),
-    ParticipatedInSaga: invokedSaga !== undefined,
+    SagaTitle: typeToName(messageState.value.data.invoked_saga.saga_type) || "Unknown saga",
+    SagaGuid: messageState.value.data.invoked_saga.saga_id || "Missing guid",
+    MessageIdUrl: messageState.value && routeLinks.messages.successMessage.link(messageState.value.data.message_id || "", messageState.value.data.id || ""),
+    ParticipatedInSaga: messageState.value.data.invoked_saga.has_saga || false,
     HasSagaData: !!sagaDiagramStore.sagaHistory,
-    ShowNoPluginActiveLeged: !sagaDiagramStore.sagaHistory && invokedSaga !== undefined,
+    ShowNoPluginActiveLegend: (!sagaDiagramStore.sagaHistory && messageState.value.data.invoked_saga.has_saga) || false,
     SagaCompleted: !!completedUpdate,
     FormattedCompletionTime: completionTime ? `${completionTime.toLocaleDateString()} ${completionTime.toLocaleTimeString()}` : "",
     SagaUpdates: parseSagaUpdates(sagaDiagramStore.sagaHistory),
@@ -194,7 +187,7 @@ const vm = computed<SagaViewModel>(() => {
     </div>
 
     <!-- Saga Audit Plugin Needed container -->
-    <div v-if="vm.ShowNoPluginActiveLeged" class="body" role="status" aria-label="saga-plugin-needed">
+    <div v-if="vm.ShowNoPluginActiveLegend" class="body" role="status" aria-label="saga-plugin-needed">
       <div class="saga-message">
         <div class="saga-message-container">
           <img class="saga-message-image" :src="NoSagaIcon" alt="" />

src/Frontend/src/stores/MessageStore.ts

@@ -58,12 +58,17 @@ interface Model {
     show_retry_confirm: boolean;
     show_edit_retry_modal: boolean;
   }>;
+  invoked_saga: Partial<{
+    has_saga: boolean;
+    saga_id: string;
+    saga_type: string;
+  }>;
 }
 
 export const useMessageStore = defineStore("MessageStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
   const body = ref<DataContainer<{ value?: string; content_type?: string }>>({ data: {} });
-  const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {} } });
+  const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} } });
   let bodyLoadedId = "";
   let conversationLoadedId = "";
   const conversationData = ref<DataContainer<Message[]>>({ data: [] });
@@ -74,7 +79,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
   configStore.loadConfig();
 
   function reset() {
-    state.data = { failure_metadata: {}, failure_status: {}, dialog_status: {} };
+    state.data = { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} };
     headers.value.data = [];
     body.value.data = { value: "", content_type: "" };
     bodyLoadedId = "";
@@ -141,7 +146,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
         state.not_found = headers.value.not_found = true;
         return;
       }
-
+      const invokedSaga = message?.invoked_sagas?.[0];
       state.data.message_id = message.message_id;
       state.data.conversation_id = message.conversation_id;
       state.data.body_url = message.body_url;
@@ -150,7 +155,11 @@ export const useMessageStore = defineStore("MessageStore", () => {
       state.data.receiving_endpoint = message.receiving_endpoint;
       state.data.status = message.status;
       state.data.processed_at = message.processed_at;
-
+      if (invokedSaga) {
+        state.data.invoked_saga.has_saga = true;
+        state.data.invoked_saga.saga_id = invokedSaga.saga_id;
+        state.data.invoked_saga.saga_type = invokedSaga.saga_type;
+      }
       headers.value.data = message.headers;
     } catch {
       state.failed_to_load = headers.value.failed_to_load = true;