Merge pull request #2274 from Particular/john/audit_messages

Refactor message  tabs views into separate components

Author: johnsimons

src/Frontend/src/App.vue

@@ -5,7 +5,6 @@ import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
 import "bootstrap";
 import { useServiceControlUrls } from "@/composables/serviceServiceControlUrls";
-import "highlight.js/styles/github-dark.css";
 import { useServiceControl } from "@/composables/serviceServiceControl";
 import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";

src/Frontend/src/components/BackendChecksNotifications.vue

@@ -3,7 +3,6 @@ import { computed, watch } from "vue";
 import { useRouter } from "vue-router";
 import "bootstrap";
 import { monitoringUrl, serviceControlUrl, useIsMonitoringDisabled } from "@/composables/serviceServiceControlUrls";
-import "highlight.js/styles/github-dark.css";
 import { monitoringConnectionState, connectionState, environment } from "@/composables/serviceServiceControl";
 import routeLinks from "@/router/routeLinks";
 import { useShowToast } from "@/composables/toast";
@@ -53,5 +52,5 @@ watch(
 );
 </script>
 <template>
-  <div></div>
+  <template></template>
 </template>

src/Frontend/src/components/LicenseNotifications.vue

@@ -61,5 +61,5 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div></div>
+  <template></template>
 </template>

src/Frontend/src/components/failedmessages/EditRetryDialog.vue

@@ -218,8 +218,8 @@ onMounted(() => {
                   <div class="row msg-editor-tabs">
                     <div class="col-sm-12 no-side-padding">
                       <div role="tablist" class="tabs msg-tabs">
-                        <h5 role="tab" :class="{ active: panel === 1 }" class="nav-item" @click="togglePanel(1)"><a href="javascript:void(0)">Headers</a></h5>
-                        <h5 role="tab" :class="{ active: panel === 2 }" class="nav-item" @click="togglePanel(2)"><a href="javascript:void(0)">Message body</a></h5>
+                        <h5 role="tab" :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Headers</a></h5>
+                        <h5 role="tab" :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
                       </div>
                     </div>
                   </div>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
+</script>
+
+<template>
+  <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>
+  <pre v-else>{{ props.message.messageBody }}</pre>
+</template>
+
+<style scoped></style>

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

@@ -7,10 +7,10 @@ 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";
 
 const props = defineProps<{
-  conversationId?: string;
-  messageId: string;
+  message: ExtendedFailedMessage;
 }>();
 
 enum MessageType {
@@ -161,9 +161,9 @@ const elements = ref<(Node | DefaultEdge)[]>([]);
 const { onPaneReady, fitView } = useVueFlow();
 
 onMounted(async () => {
-  if (!props.conversationId) return;
+  if (!props.message.conversationId) return;
 
-  const messages = await getConversation(props.conversationId);
+  const messages = await getConversation(props.message.conversationId);
   const mappedMessages = messages.map(mapMessage);
 
   const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
@@ -203,7 +203,7 @@ function typeIcon(type: MessageType) {
   <div id="tree-container">
     <VueFlow v-model="elements" :min-zoom="0.1">
       <template #node-message="nodeProps">
-        <div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.messageId && 'current-message']">
+        <div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.message.id && 'current-message']">
           <div class="node-text wordwrap">
             <i v-if="nodeProps.data.isError" class="fa pa-flow-failed" />
             <i class="fa" :class="typeIcon(nodeProps.data.type)" :title="nodeProps.data.type" />

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
+</script>
+
+<template>
+  <table class="table" v-if="!props.message.headersNotFound">
+    <tbody>
+      <tr class="interactiveList" v-for="(header, index) in props.message.headers" :key="index">
+        <td nowrap="nowrap">{{ header.key }}</td>
+        <td>
+          <pre>{{ header.value }}</pre>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <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></style>

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

@@ -20,6 +20,9 @@ import { NServiceBusHeaders } from "@/resources/Header";
 import { useConfiguration } from "@/composables/configuration";
 import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
 import { parse, stringify } from "lossless-json";
+import BodyView from "@/components/messages/BodyView.vue";
+import HeadersView from "@/components/messages/HeadersView.vue";
+import StackTraceView from "@/components/messages/StacktraceView.vue";
 
 let refreshInterval: number | undefined;
 let pollingFaster = false;
@@ -438,31 +441,15 @@ onUnmounted(() => {
           <div class="row">
             <div class="col-sm-12 no-side-padding">
               <div class="nav tabs msg-tabs">
-                <h5 :class="{ active: panel === 1 }" class="nav-item" @click="togglePanel(1)"><a href="javascript:void(0)">Stacktrace</a></h5>
-                <h5 :class="{ active: panel === 2 }" class="nav-item" @click="togglePanel(2)"><a href="javascript:void(0)">Headers</a></h5>
-                <h5 :class="{ active: panel === 3 }" class="nav-item" @click="togglePanel(3)"><a href="javascript:void(0)">Message body</a></h5>
-                <h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click="togglePanel(4)"><a href="javascript:void(0)">Flow Diagram</a></h5>
+                <h5 :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Stacktrace</a></h5>
+                <h5 :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
+                <h5 :class="{ active: panel === 3 }" class="nav-item" @click.prevent="togglePanel(3)"><a href="#">Headers</a></h5>
+                <h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click.prevent="togglePanel(4)"><a href="#">Flow Diagram</a></h5>
               </div>
-              <pre v-if="panel === 1">{{ failedMessage.exception?.stack_trace }}</pre>
-              <table class="table" v-if="panel === 2 && !failedMessage.headersNotFound">
-                <tbody>
-                  <tr class="interactiveList" v-for="(header, index) in failedMessage.headers" :key="index">
-                    <td nowrap="nowrap">{{ header.key }}</td>
-                    <td>
-                      <pre>{{ header.value }}</pre>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-              <div v-if="panel === 2 && failedMessage.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>
-              <pre v-if="panel === 3 && !failedMessage.messageBodyNotFound && !failedMessage.bodyUnavailable">{{ failedMessage.messageBody }}</pre>
-              <div v-if="panel === 3 && failedMessage.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-if="panel === 3 && failedMessage.bodyUnavailable" class="alert alert-info">Message body unavailable.</div>
-              <FlowDiagram v-if="panel === 4" :conversation-id="failedMessage.conversationId" :message-id="id"></FlowDiagram>
+              <StackTraceView v-if="panel === 1" :message="failedMessage" />
+              <BodyView v-if="panel === 2" :message="failedMessage" />
+              <HeadersView v-if="panel === 3" :message="failedMessage" />
+              <FlowDiagram v-if="panel === 4" :message="failedMessage" />
             </div>
           </div>
 

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import VCodeBlock from "@wdns/vue-code-block";
+
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
+</script>
+
+<template>
+  <VCodeBlock :code="props.message.exception.stack_trace" lang="csharp"></VCodeBlock>
+</template>

src/Frontend/src/mount.ts

@@ -6,6 +6,7 @@ import VueTippy from "vue-tippy";
 import { createPinia } from "pinia";
 import SimpleTypeahead from "vue3-simple-typeahead";
 import { createVCodeBlock } from "@wdns/vue-code-block";
+import "highlight.js/styles/github-dark.css";
 
 const toastOptions: PluginOptions = {
   position: POSITION.BOTTOM_RIGHT,
@@ -25,6 +26,7 @@ export function mount({ router }: { router: Router }) {
 
   const VCodeBlock = createVCodeBlock({
     theme: "github-dark",
+    cssPath: "highlight.js/styles/github-dark.css",
     highlightjs: true,
   });