Bring back the previous version to be backwards compat

Author: johnsimons

src/Frontend/src/components/messages/BodyView.vue

@@ -1,31 +1,20 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { computed } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import { storeToRefs } from "pinia";
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
 
-const store = useMessageViewStore();
-const { body: bodyState, state } = storeToRefs(store);
-
-watch(
-  () => state.value.data.body_url,
-  async () => {
-    await store.downloadBody();
-  },
-  { immediate: true }
-);
-const contentType = computed(() => parseContentType(bodyState.value.data.content_type));
-const body = computed(() => bodyState.value.data.value);
+const contentType = computed(() => parseContentType(props.message.contentType));
 </script>
 
 <template>
-  <div v-if="bodyState.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
-  <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
-  <LoadingSpinner v-else-if="bodyState.loading" />
-  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
-  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
+  <div v-if="props.message.messageBodyNotFound" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-else-if="props.message.bodyUnavailable" class="alert alert-info">Message body unavailable.</div>
+  <CodeEditor v-else-if="contentType.isSupported" :model-value="props.message.messageBody" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ props.message.contentType }}" is not supported.</div>
 </template>
 
 <style scoped></style>

src/Frontend/src/components/messages/FlowDiagram.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import { type DefaultEdge, MarkerType, VueFlow, type Styles, type Node } from "@vue-flow/core";
 import TimeSince from "../TimeSince.vue";
 import routeLinks from "@/router/routeLinks";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
+import { useRoute } from "vue-router";
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import { Controls } from "@vue-flow/controls";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import { storeToRefs } from "pinia";
+
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
 
 enum MessageType {
   Event = "Event message",
@@ -40,13 +44,11 @@ interface MappedMessage {
 const nodeSpacingX = 300;
 const nodeSpacingY = 200;
 
-const store = useMessageViewStore();
-const { state } = storeToRefs(useMessageViewStore());
+const route = useRoute();
 
 async function getConversation(conversationId: string) {
-  await store.loadConversation(conversationId);
-
-  return store.conversationData.data;
+  const [, data] = await useTypedFetchFromServiceControl<Message[]>(`conversations/${conversationId}`);
+  return data;
 }
 
 function mapMessage(message: Message): MappedMessage {
@@ -159,9 +161,9 @@ function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
 const elements = ref<(Node | DefaultEdge)[]>([]);
 
 onMounted(async () => {
-  if (!state.value.data.conversation_id) return;
+  if (!props.message.conversationId) return;
 
-  const messages = await getConversation(state.value.data.conversation_id);
+  const messages = await getConversation(props.message.conversationId);
   const mappedMessages = messages.map(mapMessage);
 
   const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
@@ -191,28 +193,26 @@ function typeIcon(type: MessageType) {
 </script>
 
 <template>
-  <div v-if="store.conversationData.failed_to_load" class="alert alert-info">FlowDiagram data is unavailable.</div>
-  <LoadingSpinner v-else-if="store.conversationData.loading" />
-  <div v-else id="tree-container">
+  <div id="tree-container">
     <VueFlow v-model="elements" :min-zoom="0.1" :fit-view-on-init="true">
       <Controls />
-      <template #node-message="{ data }: { data: MappedMessage }">
-        <div class="node" :class="{ error: data.isError, 'current-message': data.id === store.state.data.id }">
+      <template #node-message="nodeProps">
+        <div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.message.id && 'current-message']">
           <div class="node-text wordwrap">
-            <i v-if="data.isError" class="fa pa-flow-failed" />
-            <i class="fa" :class="typeIcon(data.type)" :title="data.type" />
-            <div class="lead right-side-ellipsis" :title="data.nodeName">
+            <i v-if="nodeProps.data.isError" class="fa pa-flow-failed" />
+            <i class="fa" :class="typeIcon(nodeProps.data.type)" :title="nodeProps.data.type" />
+            <div class="lead righ-side-ellipsis" :title="nodeProps.data.nodeName">
               <strong>
-                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id) }">{{ data.nodeName }}</RouterLink>
-                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id) }">{{ data.nodeName }}</RouterLink>
+                <RouterLink v-if="nodeProps.data.isError" :to="{ path: routeLinks.messages.failedMessage.link(nodeProps.data.id), query: { back: route.path } }">{{ nodeProps.data.nodeName }}</RouterLink>
+                <span v-else>{{ nodeProps.data.nodeName }}</span>
               </strong>
             </div>
             <span class="time-sent">
-              <time-since class="time-since" :date-utc="data.timeSent" />
+              <time-since class="time-since" :date-utc="nodeProps.data.timeSent" />
             </span>
-            <template v-if="data.sagaName">
+            <template v-if="nodeProps.data.sagaName">
               <i class="fa pa-flow-saga" />
-              <div class="saga lead right-side-ellipsis" :title="data.sagaName">{{ data.sagaName }}</div>
+              <div class="saga lead righ-side-ellipsis" :title="nodeProps.data.sagaName">{{ nodeProps.data.sagaName }}</div>
             </template>
           </div>
         </div>
@@ -243,13 +243,14 @@ function typeIcon(type: MessageType) {
   padding: 10px;
   border-radius: 3px;
   font-size: 12px;
+  text-align: center;
   border-width: 1px;
   border-style: solid;
   color: var(--vf-node-text);
   text-align: left;
 }
 
-.right-side-ellipsis {
+.righ-side-ellipsis {
   direction: rtl;
   text-align: left;
 }
@@ -305,11 +306,6 @@ function typeIcon(type: MessageType) {
   width: 182px;
 }
 
-.current-message {
-  border-color: #cccbcc;
-  background-color: #cccbcc !important;
-}
-
 .current-message.error {
   border-color: #be514a;
   background-color: #be514a !important;
@@ -350,10 +346,6 @@ function typeIcon(type: MessageType) {
   text-decoration: none;
 }
 
-.node-text a {
-  color: #000;
-}
-
 .error .node-text a {
   color: #be514a;
 }

src/Frontend/src/components/messages/HeadersView.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import { computed, ref } from "vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
-import { storeToRefs } from "pinia";
-
-const { headers } = storeToRefs(useMessageViewStore());
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
 
 const hoverStates = ref<Record<number, boolean>>({});
 const searchTerm = ref<string>("");
@@ -14,9 +14,9 @@ const toggleHover = (index: number, state: boolean) => {
 // Computed property to filter headers based on search term
 const filteredHeaders = computed(() => {
   if (!searchTerm.value) {
-    return headers.value.data;
+    return props.message.headers;
   }
-  return headers.value.data.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
+  return props.message.headers.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
 });
 </script>
 
@@ -32,7 +32,7 @@ const filteredHeaders = computed(() => {
       </div>
     </div>
   </div>
-  <table class="table" v-if="filteredHeaders.length > 0 && !headers.not_found">
+  <table class="table" v-if="filteredHeaders.length > 0 && !props.message.headersNotFound">
     <tbody>
       <tr class="interactiveList" v-for="(header, index) in filteredHeaders" :key="index">
         <td nowrap="nowrap">{{ header.key }}</td>
@@ -47,13 +47,14 @@ const filteredHeaders = computed(() => {
   </table>
 
   <!-- Message if filtered list is empty -->
-  <div v-if="filteredHeaders.length <= 0 && !headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
-  <div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-if="filteredHeaders.length <= 0 && !props.message.headersNotFound" class="alert alert-warning">No headers found matching the search term.</div>
+  <div v-if="props.message.headersNotFound" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
 </template>
 
 <style scoped>
 .headercopy {
   display: flex;
+  align-items: top;
   gap: 0.4rem;
 }
 

src/Frontend/src/components/messages/MessageView.vue

@@ -310,10 +310,10 @@ onUnmounted(() => {
                 <span v-if="failedMessage.number_of_processing_attempts > 1" :title="'This message has already failed ' + failedMessage.number_of_processing_attempts + ' times'" class="label sidebar-label label-important metadata-label">
                   {{ failedMessage.number_of_processing_attempts - 1 }} Retry Failures
                 </span>
-                <template v-if="failedMessage.edited">
-                  <span v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
-                  <span class="metadata metadata-link"> <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(failedMessage.edit_of) }">View previous version</RouterLink> </span>
-                </template>
+                <span v-if="failedMessage.edited" v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
+                <span v-if="failedMessage.edited" class="metadata metadata-link">
+                  <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(failedMessage.edit_of), query: { back: route.path } }">View previous version</RouterLink>
+                </span>
                 <span v-if="failedMessage.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="failedMessage.time_of_failure"></time-since></span>
                 <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ failedMessage.receiving_endpoint.name }}</span>
                 <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ failedMessage.receiving_endpoint.host }}</span>

src/Frontend/src/components/messages/StacktraceView.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import { storeToRefs } from "pinia";
 
-const { state } = storeToRefs(useMessageViewStore());
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
 </script>
 
 <template>
-  <div v-if="state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
-  <LoadingSpinner v-else-if="state.loading" />
-  <CodeEditor v-else :model-value="state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
+  <CodeEditor :model-value="props.message.exception.stack_trace" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
 </template>

src/Frontend/src/components/messages2/BodyView.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import CodeEditor from "@/components/CodeEditor.vue";
+import parseContentType from "@/composables/contentTypeParser";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
+
+const store = useMessageViewStore();
+const { body: bodyState, state } = storeToRefs(store);
+
+watch(
+  () => state.value.data.body_url,
+  async () => {
+    await store.downloadBody();
+  },
+  { immediate: true }
+);
+const contentType = computed(() => parseContentType(bodyState.value.data.content_type));
+const body = computed(() => bodyState.value.data.value);
+</script>
+
+<template>
+  <div v-if="bodyState.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
+  <LoadingSpinner v-else-if="bodyState.loading" />
+  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
+</template>
+
+<style scoped></style>