Show message data button

Author: Christian

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onUnmounted, watch } from "vue";
+import { computed, onUnmounted, watch, ref } from "vue";
 import routeLinks from "@/router/routeLinks";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { useMessageStore } from "@/stores/MessageStore";
@@ -13,6 +13,12 @@ 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);
 
@@ -49,6 +55,7 @@ const vm = computed<SagaViewModel>(() => {
     SagaCompleted: !!completedUpdate,
     FormattedCompletionTime: completionTime ? `${completionTime.toLocaleDateString()} ${completionTime.toLocaleTimeString()}` : "",
     SagaUpdates: parseSagaUpdates(sagaDiagramStore.sagaHistory),
+    ShowMessageData: showMessageData.value,
   };
 });
 
@@ -60,7 +67,10 @@ import { typeToName } from "@/composables/typeHumanizer";
   <div class="saga-container">
     <!-- Toolbar header -->
     <div v-if="vm.HasSagaData" class="header">
-      <button class="saga-button" aria-label="message-not-involved-in-saga"><img class="saga-button-icon" :src="ToolbarEndpointIcon" alt="" />Show Message Data</button>
+      <button :class="['saga-button', { 'saga-button--active': vm.ShowMessageData }]" aria-label="show-message-data-button" @click="toggleMessageData">
+        <img class="saga-button-icon" :src="ToolbarEndpointIcon" alt="" />
+        {{ vm.ShowMessageData ? "Hide Message Data" : "Show Message Data" }}
+      </button>
     </div>
 
     <!-- No saga Data Available container -->
@@ -76,7 +86,7 @@ import { typeToName } from "@/composables/typeHumanizer";
         <SagaHeader :saga-title="vm.SagaTitle" :saga-guid="vm.SagaGuid" :message-id-url="vm.MessageIdUrl" />
 
         <!-- Iterate through each saga update -->
-        <SagaUpdateNode v-for="(update, index) in vm.SagaUpdates" :key="index" :update="update" />
+        <SagaUpdateNode v-for="(update, index) in vm.SagaUpdates" :key="index" :update="update" :show-message-data="vm.ShowMessageData" />
 
         <!-- Saga Completed section -->
         <SagaCompletedNode v-if="vm.SagaCompleted" :completion-time="vm.FormattedCompletionTime" />

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

@@ -7,6 +7,7 @@ import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 defineProps<{
   message: SagaTimeoutMessage;
   isLastMessage: boolean;
+  showMessageData?: boolean;
 }>();
 </script>
 
@@ -30,7 +31,7 @@ defineProps<{
         <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 class="message-data message-data--active">
+      <div v-if="showMessageData" class="message-data message-data--active">
         <MessageDataBox />
       </div>
     </div>

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

@@ -11,6 +11,7 @@ import SagaUpdatedIcon from "@/assets/SagaUpdatedIcon.svg";
 
 defineProps<{
   update: SagaUpdateViewModel;
+  showMessageData?: boolean;
 }>();
 </script>
 
@@ -38,7 +39,7 @@ defineProps<{
     <div class="row">
       <!-- Left side - Message Data box -->
       <div class="cell cell--side cell--left-border cell--aling-top">
-        <div class="message-data message-data--active">
+        <div v-if="showMessageData" class="message-data message-data--active">
           <!-- Generic message data box -->
           <MessageDataBox v-if="update.InitiatingMessageType" />
         </div>
@@ -72,15 +73,15 @@ defineProps<{
             <h2 class="message-title">{{ msg.MessageFriendlyTypeName }}</h2>
             <div class="timestamp">{{ msg.FormattedTimeSent }}</div>
           </div>
-          <div class="message-data message-data--active">
+          <div v-if="showMessageData" class="message-data message-data--active">
             <MessageDataBox />
           </div>
         </template>
       </div>
     </div>
 
     <!-- Display each outgoing timeout message in separate rows -->
-    <SagaTimeoutMessage v-for="(msg, msgIndex) in update.TimeoutMessages" :key="'timeout-' + msgIndex" :message="msg" :isLastMessage="msgIndex === update.TimeoutMessages.length - 1" />
+    <SagaTimeoutMessage v-for="(msg, msgIndex) in update.TimeoutMessages" :key="'timeout-' + msgIndex" :message="msg" :isLastMessage="msgIndex === update.TimeoutMessages.length - 1" :showMessageData="showMessageData" />
   </div>
 </template>
 

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

@@ -44,6 +44,7 @@ export interface SagaViewModel {
   SagaCompleted: boolean;
   FormattedCompletionTime: string;
   SagaUpdates: SagaUpdateViewModel[];
+  ShowMessageData: boolean;
 }
 
 export function parseSagaUpdates(sagaHistory: SagaHistory | null): SagaUpdateViewModel[] {