Remove unsed variables, Add display for initiating timeout message display

Author: soujay

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

@@ -378,7 +378,6 @@ const sampleSagaHistory: SagaHistory = {
         is_saga_timeout_message: true,
         originating_endpoint: "Endpoint1",
         originating_machine: "mobvm2",
-        receiving_endpoint: "receiving endpoint",
         time_sent: new Date("2025-03-28T03:04:06.321561Z"),
         message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
         intent: "Send",
@@ -398,7 +397,6 @@ const sampleSagaHistory: SagaHistory = {
         is_saga_timeout_message: true,
         originating_endpoint: "Endpoint1",
         originating_machine: "mobvm2",
-        receiving_endpoint: "receiving endpoint",
         time_sent: new Date("2025-03-28T03:04:05.37723Z"),
         message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
         intent: "Send",
@@ -418,7 +416,6 @@ const sampleSagaHistory: SagaHistory = {
         is_saga_timeout_message: false,
         originating_endpoint: "Sender",
         originating_machine: "mobvm2",
-        receiving_endpoint: "receiving endpoint",
         time_sent: new Date("2025-03-28T03:04:06.293765Z"),
         message_type: "ServiceControl.SmokeTest.SagaMessage2",
         intent: "Send",
@@ -437,7 +434,6 @@ const sampleSagaHistory: SagaHistory = {
           is_saga_timeout_message: false,
           originating_endpoint: "Sender",
           originating_machine: "mobvm2",
-          receiving_endpoint: "receiving endpoint",
           body_url: "body_url",
           message_status: MessageStatus.Successful,
         },
@@ -454,7 +450,6 @@ const sampleSagaHistory: SagaHistory = {
         is_saga_timeout_message: false,
         originating_endpoint: "Sender",
         originating_machine: "mobvm2",
-        receiving_endpoint: "receiving endpoint",
         time_sent: new Date("2025-03-28T03:04:05.235534Z"),
         message_type: "ServiceControl.SmokeTest.SagaMessage1",
         intent: "Send",
@@ -473,7 +468,6 @@ const sampleSagaHistory: SagaHistory = {
           is_saga_timeout_message: false,
           originating_endpoint: "Sender",
           originating_machine: "mobvm2",
-          receiving_endpoint: "receiving endpoint",
           body_url: "body_url",
           message_status: MessageStatus.Successful,
         },

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

@@ -8,7 +8,8 @@ import CommandIcon from "@/assets/command.svg";
 import EventIcon from "@/assets/event.svg";
 import SagaInitiatedIcon from "@/assets/SagaInitiatedIcon.svg";
 import SagaUpdatedIcon from "@/assets/SagaUpdatedIcon.svg";
-
+import TimeoutIcon from "@/assets/timeout.svg";
+import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 defineProps<{
   update: SagaUpdateViewModel;
   showMessageData?: boolean;
@@ -21,15 +22,18 @@ defineProps<{
     <div class="row">
       <div class="cell cell--side">
         <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">
-            {{ update.InitiatingMessageType }}
-          </h2>
+          <img class="saga-icon saga-icon--side-cell" :src="update.IsInitiatingMessageTimeOut ? TimeoutIcon : CommandIcon" alt="" />
+          <h2 class="message-title" aria-label="initiating message type">{{ 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">
+          <template v-if="update.IsInitiatingMessageTimeOut">
+            <img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" />
+            <h2 class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked">Timeout Invoked</h2>
+            <br />
+          </template>
           <img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" />
           <h2 class="saga-status-title saga-status-title--inline">{{ update.StatusDisplay }}</h2>
           <div class="timestamp timestamp--inline" aria-label="time stamp">{{ update.FormattedStartTime }}</div>
@@ -307,4 +311,10 @@ defineProps<{
   height: 1rem;
   margin-top: -0.3rem;
 }
+.timeout-status {
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: 900;
+  color: #00a3c4;
+}
 </style>

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

@@ -21,6 +21,7 @@ export interface SagaUpdateViewModel {
   FinishTime: Date;
   FormattedStartTime: string;
   InitiatingMessageType: string;
+  IsInitiatingMessageTimeOut: boolean;
   FormattedInitiatingMessageTimestamp: string;
   Status: string;
   StatusDisplay: string;
@@ -57,6 +58,7 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
 
       // Find message data for initiating message
       const initiatingMessageData = update.initiating_message ? messagesData.find((m) => m.message_id === update.initiating_message.message_id)?.data || [] : [];
+      const isInitiatingMessageTimeOut = update.initiating_message?.is_saga_timeout_message || false;
 
       // Create common base message objects with shared properties
       const outgoingMessages = update.outgoing_messages.map((msg) => {
@@ -68,7 +70,6 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
 
         // Find corresponding message data
         const messageData = messagesData.find((m) => m.message_id === msg.message_id)?.data || [];
-
         return {
           MessageType: msg.message_type || "",
           MessageId: msg.message_id,
@@ -106,6 +107,7 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
         InitiatingMessageType: typeToName(update.initiating_message?.message_type || "Unknown Message") || "",
         FormattedInitiatingMessageTimestamp: `${initiatingMessageTimestamp.toLocaleDateString()} ${initiatingMessageTimestamp.toLocaleTimeString()}`,
         InitiatingMessageData: initiatingMessageData,
+        IsInitiatingMessageTimeOut: isInitiatingMessageTimeOut,
         HasTimeout: hasTimeout,
         IsFirstNode: update.status === "new",
         TimeoutMessages: timeoutMessages,

src/Frontend/src/resources/SagaHistory.ts

@@ -22,7 +22,6 @@ export interface SagaMessage {
   is_saga_timeout_message: boolean;
   originating_endpoint: string;
   originating_machine: string;
-  receiving_endpoint: string;
   time_sent: Date;
   message_type: string;
   intent: string;

src/Frontend/src/stores/SagaDiagramStore.ts

@@ -96,7 +96,7 @@ export const useSagaDiagramStore = defineStore("sagaHistory", () => {
         error.value = "Failed to fetch saga history";
       } else {
         const data = await response.json();
-        console.log("Saga history data for sis" + id, data);
+        console.log("Saga history data for" + id, data);
         sagaHistory.value = data;
       }
     } catch (e) {