v1 of using code editor for message data

Author: cquirosj

src/Frontend/src/components/MaximizableCodeEditor.vue

@@ -6,10 +6,8 @@ import DiffCloseIcon from "@/assets/diff-close.svg";
 import { Extension } from "@codemirror/state";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 
-// Define the model value to be passed to CodeEditor
 const modelValue = defineModel<string>({ required: true });
 
-// Define props by extending the CodeEditor props and adding maximize-specific ones
 withDefaults(
   defineProps<{
     language?: CodeLanguage;

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

@@ -1,27 +1,51 @@
 <script setup lang="ts">
-import { SagaMessageDataItem, useSagaDiagramStore } from "@/stores/SagaDiagramStore";
+import { SagaMessageData, useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { storeToRefs } from "pinia";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import MaximizableCodeEditor from "@/components/MaximizableCodeEditor.vue";
+import { computed } from "vue";
+import { CodeLanguage } from "@/components/codeEditorTypes";
+import { parse, stringify } from "lossless-json";
 
-defineProps<{
-  messageData: SagaMessageDataItem[];
+const props = defineProps<{
+  messageData: SagaMessageData;
 }>();
 
 const sagaDiagramStore = useSagaDiagramStore();
 const { messageDataLoading } = storeToRefs(sagaDiagramStore);
+
+const formattedData = computed(() => {
+  if (props.messageData.type === "json" && props.messageData.data) {
+    try {
+      // Parse and then stringify with indentation to ensure proper formatting
+      const parsed = parse(props.messageData.data);
+      return stringify(parsed, null, 2);
+    } catch {
+      return props.messageData.data;
+    }
+  }
+  return props.messageData.data;
+});
+
+// Ensure language is properly typed as CodeLanguage
+const editorLanguage = computed<CodeLanguage>(() => {
+  const type = props.messageData.type?.toLowerCase();
+  return (type === "xml" ? "xml" : "json") as CodeLanguage;
+});
 </script>
 
 <template>
   <div v-if="messageDataLoading" class="message-data-loading">
     <LoadingSpinner />
   </div>
-  <div v-else-if="!messageDataLoading && messageData.length === 0" class="message-data-box">
+  <div v-else-if="messageData.error" class="message-data-box message-data-box-error">
+    <span class="message-data-box-text--error">An error occurred while parsing the message data</span>
+  </div>
+  <div v-else-if="!messageDataLoading && messageData.data === ''" 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="item.value">{{ item.value }}</span>
+  <div v-else class="message-data-box message-data-box-content">
+    <MaximizableCodeEditor :model-value="formattedData || ''" :language="editorLanguage" :read-only="true" :show-gutter="false" modalTitle="Message Data" />
   </div>
 </template>
 
@@ -30,6 +54,10 @@ const { messageDataLoading } = storeToRefs(sagaDiagramStore);
   display: flex;
 }
 
+.message-data-box-content {
+  display: block;
+}
+
 .message-data-box-text {
   display: inline-block;
   margin-right: 0.25rem;
@@ -48,11 +76,26 @@ const { messageDataLoading } = storeToRefs(sagaDiagramStore);
   display: inline-block;
   width: 100%;
   text-align: center;
+  color: #666;
+  font-style: italic;
+}
+
+.message-data-box-text--error {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  color: #a94442;
+  font-style: italic;
 }
 
 .message-data-loading {
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+.message-data-box-error {
+  padding: 1rem;
+  justify-content: center;
+}
 </style>

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

@@ -1,13 +1,13 @@
 import { SagaHistory } from "@/resources/SagaHistory";
 import { typeToName } from "@/composables/typeHumanizer";
-import { SagaMessageData, SagaMessageDataItem } from "@/stores/SagaDiagramStore";
+import { SagaMessageData } from "@/stores/SagaDiagramStore";
 import { getTimeoutFriendly } from "@/composables/deliveryDelayParser";
 
 export interface SagaMessageViewModel {
   MessageId: string;
   MessageFriendlyTypeName: string;
   FormattedTimeSent: string;
-  Data: SagaMessageDataItem[];
+  Data: SagaMessageData;
   IsEventMessage: boolean;
   IsCommandMessage: boolean;
 }
@@ -78,7 +78,7 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
       const initiatingMessageTimestamp = new Date(update.initiating_message?.time_sent || Date.now());
 
       // Find message data for initiating message
-      const initiatingMessageData = update.initiating_message ? messagesData.find((m) => m.message_id === update.initiating_message.message_id)?.data || [] : [];
+      const initiatingMessageData = update.initiating_message ? findMessageData(messagesData, update.initiating_message.message_id) : createEmptyMessageData();
 
       // Create common base message objects with shared properties
       const outgoingMessages = update.outgoing_messages.map((msg) => {
@@ -89,7 +89,7 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
         const isEventMessage = msg.intent === "Publish";
 
         // Find corresponding message data
-        const messageData = messagesData.find((m) => m.message_id === msg.message_id)?.data || [];
+        const messageData = findMessageData(messagesData, msg.message_id);
         return {
           MessageType: msg.message_type || "",
           MessageId: msg.message_id,
@@ -160,3 +160,19 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
 
   return updates;
 }
+
+// Helper function to find message data or create empty data if not found
+function findMessageData(messagesData: SagaMessageData[], messageId: string): SagaMessageData {
+  const messageData = messagesData.find((m) => m.message_id === messageId);
+  return messageData || createEmptyMessageData();
+}
+
+// Helper function to create an empty message data object
+function createEmptyMessageData(): SagaMessageData {
+  return {
+    message_id: "",
+    data: "",
+    type: "json",
+    error: false,
+  };
+}

src/Frontend/src/stores/SagaDiagramStore.ts

@@ -3,17 +3,12 @@ import { ref, watch } from "vue";
 import { SagaHistory, SagaMessage } from "@/resources/SagaHistory";
 import { useFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import Message from "@/resources/Message";
-import { parse } from "lossless-json";
-import { useMessageStore } from "@/stores/MessageStore";
 
-const StandardKeys = ["$type", "Id", "Originator", "OriginalMessageId"];
-export interface SagaMessageDataItem {
-  key: string;
-  value: string;
-}
 export interface SagaMessageData {
   message_id: string;
-  data: SagaMessageDataItem[];
+  data: string;
+  type: "json" | "xml";
+  error: boolean;
 }
 export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
   const sagaHistory = ref<SagaHistory | null>(null);
@@ -90,44 +85,68 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
     }
   }
 
-  function createEmptyMessageData(message_id: string): SagaMessageData {
-    return {
-      message_id,
-      data: [],
-    };
-  }
-
   async function fetchSagaMessageData(message: SagaMessage): Promise<SagaMessageData> {
     const bodyUrl = (message.body_url ?? formatUrl(MessageBodyEndpoint, message.message_id)).replace(/^\//, "");
 
     try {
       const response = await useFetchFromServiceControl(bodyUrl, { cache: "no-store" });
+
+      // Treat 404 as empty data, not as an error
+      if (response.status === 404) {
+        return {
+          message_id: message.message_id,
+          data: "",
+          type: "json",
+          error: false,
+        };
+      }
+
+      // Handle other non-OK responses as errors
       if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+        error.value = `HTTP error! status: ${response.status}`;
+        return {
+          message_id: message.message_id,
+          data: "",
+          type: "json",
+          error: true,
+        };
       }
-      const body = await response.json();
+
+      const body = await response.text();
 
       if (!body) {
-        return createEmptyMessageData(message.message_id);
+        return {
+          message_id: message.message_id,
+          data: "",
+          type: "json",
+          error: false,
+        };
       }
 
-      let data: SagaMessageDataItem[];
-      if (typeof body === "string" && body.trim().startsWith("<?xml")) {
-        data = getXmlData(body);
+      // Determine the content type
+      if (body.trim().startsWith("<?xml")) {
+        return {
+          message_id: message.message_id,
+          data: body,
+          type: "xml",
+          error: false,
+        };
       } else {
-        data = processJsonValues(body);
-      }
-      // Check if parsed data is empty
-      if (!data || data.length === 0) {
-        return createEmptyMessageData(message.message_id);
+        return {
+          message_id: message.message_id,
+          data: body,
+          type: "json",
+          error: false,
+        };
       }
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Unknown error occurred";
       return {
         message_id: message.message_id,
-        data,
+        data: "",
+        type: "json",
+        error: true,
       };
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : "Unknown error occurred";
-      return createEmptyMessageData(message.message_id);
     }
   }
 
@@ -144,62 +163,6 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
     }
   }
 
-  function getXmlData(xmlString: string): SagaMessageDataItem[] {
-    try {
-      const parser = new DOMParser();
-      const xmlDoc = parser.parseFromString(xmlString, "application/xml");
-
-      // Get the root element
-      const rootElement = xmlDoc.documentElement;
-      if (!rootElement) {
-        return [];
-      }
-
-      // Handle both v5 and pre-v5 message formats
-      const messageRoot = rootElement.nodeName === "Messages" ? Array.from(rootElement.children)[0] : rootElement;
-
-      if (!messageRoot) {
-        return [];
-      }
-
-      // Convert child elements to SagaMessageDataItems
-      return Array.from(messageRoot.children).map((node) => ({
-        key: node.nodeName,
-        value: node.textContent?.trim() || "",
-      }));
-    } catch (error) {
-      console.error("Error parsing message data:", error);
-      return [];
-    }
-  }
-
-  function processJsonValues(jsonBody: string | Record<string, unknown>): SagaMessageDataItem[] {
-    let parsedBody: Record<string, unknown>;
-    if (typeof jsonBody === "string") {
-      try {
-        parsedBody = parse(jsonBody) as Record<string, unknown>;
-      } catch (e) {
-        console.error("Error parsing JSON:", e);
-        return [];
-      }
-    } else {
-      parsedBody = jsonBody;
-    }
-
-    const items: SagaMessageDataItem[] = [];
-
-    for (const key in parsedBody) {
-      if (!StandardKeys.includes(key)) {
-        items.push({
-          key: key,
-          value: String(parsedBody[key] ?? ""),
-        });
-      }
-    }
-
-    return items;
-  }
-
   function clearSagaHistory() {
     sagaHistory.value = null;
     sagaId.value = null;