Display message data for each saga element in the saga diagram (#2352)

* Display message data

Co-authored-by: Christian <[email protected]>

Author: soujay

src/Frontend/src/components/messages2/SagaDiagram.spec.ts

@@ -4,6 +4,7 @@ import { SagaHistory } from "@/resources/SagaHistory";
 import makeRouter from "@/router";
 import { createTestingPinia } from "@pinia/testing";
 import { MessageStore } from "@/stores/MessageStore";
+import { MessageStatus } from "@/resources/Message";
 
 //Defines a domain-specific language (DSL) for interacting with the system under test (sut)
 interface componentDSL {
@@ -38,7 +39,7 @@ describe("Feature: Message not involved in Saga", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: undefined, // Lets pass undefined to simulate no saga data available
+          SagaDiagramStore: undefined, // Lets pass undefined to simulate no saga data available
         },
       });
 
@@ -63,7 +64,7 @@ describe("Feature: Detecting no Audited Saga Data Available", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: undefined, // Lets pass undefined to simulate no saga data available
+          SagaDiagramStore: undefined, // Lets pass undefined to simulate no saga data available
         },
       });
 
@@ -97,7 +98,7 @@ describe("Feature: Navigation and Contextual Information", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: { sagaHistory: sampleSagaHistory },
+          SagaDiagramStore: { sagaHistory: sampleSagaHistory },
         },
       });
 
@@ -120,7 +121,7 @@ describe("Feature: Navigation and Contextual Information", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: { sagaHistory: sampleSagaHistory },
+          SagaDiagramStore: { sagaHistory: sampleSagaHistory },
         },
       });
 
@@ -181,7 +182,7 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: { sagaHistory: sampleSagaHistory },
+          SagaDiagramStore: { sagaHistory: sampleSagaHistory },
         },
       });
 
@@ -247,7 +248,7 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: { sagaHistory: sampleSagaHistory },
+          SagaDiagramStore: { sagaHistory: sampleSagaHistory },
         },
       });
 
@@ -271,7 +272,7 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => {
   });
 });
 
-function rendercomponent({ initialState = {} }: { initialState?: { MessageStore?: MessageStore; sagaHistory?: { sagaHistory: SagaHistory } } }): componentDSL {
+function rendercomponent({ initialState = {} }: { initialState?: { MessageStore?: MessageStore; SagaDiagramStore?: { sagaHistory: SagaHistory } } }): componentDSL {
   const router = makeRouter();
 
   // Render with createTestingPinia
@@ -380,6 +381,8 @@ const sampleSagaHistory: SagaHistory = {
         time_sent: new Date("2025-03-28T03:04:06.321561Z"),
         message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
         intent: "Send",
+        body_url: "body_url",
+        message_status: MessageStatus.Successful,
       },
       outgoing_messages: [],
       endpoint: "Endpoint1",
@@ -397,6 +400,8 @@ const sampleSagaHistory: SagaHistory = {
         time_sent: new Date("2025-03-28T03:04:05.37723Z"),
         message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
         intent: "Send",
+        body_url: "body_url",
+        message_status: MessageStatus.Successful,
       },
       outgoing_messages: [],
       endpoint: "Endpoint1",
@@ -414,6 +419,8 @@ const sampleSagaHistory: SagaHistory = {
         time_sent: new Date("2025-03-28T03:04:06.293765Z"),
         message_type: "ServiceControl.SmokeTest.SagaMessage2",
         intent: "Send",
+        body_url: "body_url",
+        message_status: MessageStatus.Successful,
       },
       outgoing_messages: [
         {
@@ -423,6 +430,12 @@ const sampleSagaHistory: SagaHistory = {
           time_sent: new Date("2025-03-28T03:04:06.3214397Z"),
           message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
           intent: "Send",
+          deliver_at: new Date("2025-03-28T03:04:06.293765Z"),
+          is_saga_timeout_message: false,
+          originating_endpoint: "Sender",
+          originating_machine: "mobvm2",
+          body_url: "body_url",
+          message_status: MessageStatus.Successful,
         },
       ],
       endpoint: "Endpoint1",
@@ -440,6 +453,8 @@ const sampleSagaHistory: SagaHistory = {
         time_sent: new Date("2025-03-28T03:04:05.235534Z"),
         message_type: "ServiceControl.SmokeTest.SagaMessage1",
         intent: "Send",
+        body_url: "body_url",
+        message_status: MessageStatus.Successful,
       },
       outgoing_messages: [
         {
@@ -449,6 +464,12 @@ const sampleSagaHistory: SagaHistory = {
           time_sent: new Date("2025-03-28T03:04:05.3715034Z"),
           message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
           intent: "Send",
+          deliver_at: new Date("2025-03-28T03:04:06.293765Z"),
+          is_saga_timeout_message: false,
+          originating_endpoint: "Sender",
+          originating_machine: "mobvm2",
+          body_url: "body_url",
+          message_status: MessageStatus.Successful,
         },
       ],
       endpoint: "Endpoint1",

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { computed, onUnmounted, watch, ref } from "vue";
+import { computed, onUnmounted, watch } from "vue";
 import routeLinks from "@/router/routeLinks";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
 import ToolbarEndpointIcon from "@/assets/Shell_ToolbarEndpoint.svg";
-import { SagaViewModel, parseSagaUpdates } from "./SagaDiagram/useSagaDiagramParser";
+import { SagaViewModel, parseSagaUpdates } from "./SagaDiagram/SagaDiagramParser";
 import { typeToName } from "@/composables/typeHumanizer";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
 //Subcomponents
 import NoSagaData from "./SagaDiagram/NoSagaData.vue";
@@ -15,23 +16,17 @@ import SagaHeader from "./SagaDiagram/SagaHeader.vue";
 import SagaUpdateNode from "./SagaDiagram/SagaUpdateNode.vue";
 import SagaCompletedNode from "./SagaDiagram/SagaCompletedNode.vue";
 
-const showMessageData = ref(false);
-
-const toggleMessageData = () => {
-  showMessageData.value = !showMessageData.value;
-};
-
-const store = useMessageStore();
-const { state: messageState } = storeToRefs(store);
-
 const sagaDiagramStore = useSagaDiagramStore();
+const { showMessageData, loading } = storeToRefs(sagaDiagramStore);
+
+const messageStore = useMessageStore();
 
-//Watch for message and set saga ID when component mounts or message changes
 watch(
-  () => messageState.value.data.invoked_saga,
-  (newSagas) => {
-    if (newSagas.has_saga) {
-      sagaDiagramStore.setSagaId(newSagas.saga_id || "");
+  () => messageStore.state.data.invoked_saga?.has_saga,
+  (hasSaga) => {
+    const saga = messageStore.state.data.invoked_saga;
+    if (hasSaga && saga?.saga_id) {
+      sagaDiagramStore.setSagaId(saga.saga_id);
     } else {
       sagaDiagramStore.clearSagaHistory();
     }
@@ -47,7 +42,7 @@ const vm = computed<SagaViewModel>(() => {
   const completedUpdate = sagaDiagramStore.sagaHistory?.changes.find((update) => update.status === "completed");
   const completionTime = completedUpdate ? new Date(completedUpdate.finish_time) : null;
 
-  const { data } = messageState.value;
+  const { data } = messageStore.state;
   const { invoked_saga: saga } = data;
   const sagaHistory = sagaDiagramStore.sagaHistory;
 
@@ -67,7 +62,7 @@ const vm = computed<SagaViewModel>(() => {
 
     // Display data
     FormattedCompletionTime: completionTime ? `${completionTime.toLocaleDateString()} ${completionTime.toLocaleTimeString()}` : "",
-    SagaUpdates: parseSagaUpdates(sagaHistory),
+    SagaUpdates: parseSagaUpdates(sagaHistory, sagaDiagramStore.messagesData),
     ShowMessageData: showMessageData.value,
   };
 });
@@ -77,20 +72,25 @@ const vm = computed<SagaViewModel>(() => {
   <div class="saga-container">
     <!-- Toolbar header -->
     <div v-if="vm.HasSagaData" class="header">
-      <button :class="['saga-button', { 'saga-button--active': vm.ShowMessageData }]" aria-label="show-message-data-button" @click="toggleMessageData">
+      <button :class="['saga-button', { 'saga-button--active': vm.ShowMessageData }]" aria-label="show-message-data-button" @click="sagaDiagramStore.toggleMessageData">
         <img class="saga-button-icon" :src="ToolbarEndpointIcon" alt="" />
         {{ vm.ShowMessageData ? "Hide Message Data" : "Show Message Data" }}
       </button>
     </div>
 
+    <!-- Loading Spinner -->
+    <div v-if="loading" class="loading-container">
+      <LoadingSpinner />
+    </div>
+
     <!-- No saga Data Available container -->
-    <NoSagaData v-if="!vm.ParticipatedInSaga" />
+    <NoSagaData v-else-if="!vm.ParticipatedInSaga" />
 
     <!-- Saga Audit Plugin Needed container -->
-    <SagaPluginNeeded v-if="vm.ShowNoPluginActiveLegend" />
+    <SagaPluginNeeded v-else-if="vm.ShowNoPluginActiveLegend" />
 
     <!-- Main Saga Data container -->
-    <div v-if="vm.HasSagaData" role="table" aria-label="saga-sequence-list" class="body" style="display: flex">
+    <div v-else-if="vm.HasSagaData" role="table" aria-label="saga-sequence-list" class="body" style="display: flex">
       <div class="container">
         <!-- Saga header with title and navigation -->
         <SagaHeader :saga-title="vm.SagaTitle" :saga-guid="vm.SagaGuid" :message-id-url="vm.MessageIdUrl" />
@@ -133,6 +133,14 @@ const vm = computed<SagaViewModel>(() => {
   min-width: 50rem;
 }
 
+.loading-container {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
 /* Button styles */
 
 .saga-button {

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

@@ -1,16 +1,27 @@
 <script setup lang="ts">
+import { SagaMessageDataItem, useSagaDiagramStore } from "@/stores/SagaDiagramStore";
+import { storeToRefs } from "pinia";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+
 defineProps<{
-  propertyKey?: string;
-  propertyValue?: string;
-  title?: string;
+  messageData: SagaMessageDataItem[];
 }>();
+
+const sagaDiagramStore = useSagaDiagramStore();
+const { messageDataLoading } = storeToRefs(sagaDiagramStore);
 </script>
 
 <template>
-  <div class="message-data-box">
-    <b class="message-data-box-text">{{ propertyKey || "OrderId" }}</b>
+  <div v-if="messageDataLoading" class="message-data-loading">
+    <LoadingSpinner />
+  </div>
+  <div v-else-if="!messageDataLoading && messageData.length === 0" class="message-data-box">
+    <span class="message-data-box-text--empty">Empty</span>
+  </div>
+  <div v-else-if="messageData.length > 0" v-for="(item, index) in messageData" :key="index" class="message-data-box">
+    <b class="message-data-box-text">{{ item.key }}</b>
     <span class="message-data-box-text">=</span>
-    <span class="message-data-box-text--ellipsis" :title="title || propertyValue || 'Sample ID'">{{ propertyValue || "Sample ID" }}</span>
+    <span class="message-data-box-text--ellipsis" :title="item.value">{{ item.value }}</span>
   </div>
 </template>
 
@@ -32,4 +43,16 @@ defineProps<{
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.message-data-box-text--empty {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+}
+
+.message-data-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>