Merge branch 'master' into john/common_message_view

Author: johnsimons

src/Frontend/package-lock.json

@@ -23,9 +23,10 @@
     "@tinyhttp/content-disposition": "^2.2.2",
     "@vue-flow/controls": "^1.1.2",
     "@vue-flow/core": "^1.42.5",
-    "bootstrap": "^5.3.3",
+    "bootstrap": "^5.3.5",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "^6.0.1",
+    "lodash.debounce": "^4.0.8",
     "lossless-json": "^4.0.2",
     "memoize-one": "^6.0.0",
     "moment": "^2.30.1",
@@ -40,20 +41,21 @@
     "xml-formatter": "^3.6.5"
   },
   "devDependencies": {
-    "@eslint/js": "^9.22.0",
+    "@eslint/js": "^9.23.0",
     "@pinia/testing": "^1.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/bootstrap": "^5.2.10",
-    "@types/node": "^22.13.10",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.14.0",
     "@vitejs/plugin-vue": "^5.2.3",
-    "@vitest/coverage-v8": "^3.0.9",
+    "@vitest/coverage-v8": "^3.1.1",
     "@vue/tsconfig": "^0.7.0",
     "cross-env": "^7.0.3",
-    "eslint": "^9.22.0",
+    "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-promise": "^7.2.1",
@@ -63,9 +65,9 @@
     "jsdom": "^26.0.0",
     "msw": "^2.7.3",
     "prettier": "^3.5.3",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "typescript-eslint": "^8.29.0",
-    "vite": "^6.2.4",
+    "vite": "^6.2.5",
     "vite-plugin-checker": "^0.9.1",
     "vitest": "^3.0.9",
     "vue-tsc": "^2.2.8"

src/Frontend/package.json

@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { ref, watch } from "vue";
+import debounce from "lodash/debounce";
+
 const model = defineModel<string>({ required: true });
-defineProps({
-  placeholder: {
-    type: String,
-    default: "Filter by name...", // Default value
-  },
+const props = withDefaults(defineProps<{ placeholder?: string; ariaLabel?: string }>(), { placeholder: "Filter by name...", ariaLabel: "filter by name" });
+const localInput = ref<string>(model.value);
+
+const debounceUpdateModel = debounce((value: string) => {
+  model.value = value;
+}, 600);
+
+watch(localInput, (newValue) => {
+  debounceUpdateModel(newValue);
 });
 </script>
 
 <template>
   <div role="search" aria-label="filter" class="filter-input">
-    <input type="search" :placeholder="placeholder" aria-label="filter by name" class="form-control-static filter-input" v-model="model" />
+    <input type="search" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control-static filter-input" v-model="localInput" />
   </div>
 </template>
 

src/Frontend/src/components/FilterInput.vue

@@ -28,7 +28,7 @@ const filteredHeaders = computed(() => {
         <div class="text-search-container">
           <div class="text-search">
             <div class="filter-group">
-              <FilterInput v-model="searchTerm" aria-label="Filter by name" :placeholder="'Search for a header key or value...'" />
+              <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
             </div>
           </div>
         </div>

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

@@ -10,6 +10,7 @@ import TimeSince from "../TimeSince.vue";
 import moment from "moment";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import FlowDiagram from "./FlowDiagram.vue";
+import SequenceDiagram from "./SequenceDiagram.vue";
 import EditRetryDialog from "../failedmessages/EditRetryDialog.vue";
 import routeLinks from "@/router/routeLinks";
 import { EditAndRetryConfig } from "@/resources/Configuration";
@@ -43,6 +44,7 @@ const showEditRetryModal = ref(false);
 
 const configuration = useConfiguration();
 const isMassTransitConnected = useIsMassTransitConnected();
+const showAllMessages = window.defaultConfig.showAllMessages;
 
 async function loadFailedMessage() {
   const response = await useFetchFromServiceControl(`errors/last/${id.value}`);
@@ -71,7 +73,7 @@ async function loadFailedMessage() {
   }
 
   updateMessageDeleteDate(message);
-  await downloadHeadersAndBody(message);
+  await fetchMessageDetails(message);
   failedMessage.value = message;
 }
 
@@ -115,7 +117,7 @@ async function retryMessage() {
   }
 }
 
-async function downloadHeadersAndBody(message: ExtendedFailedMessage) {
+async function fetchMessageDetails(message: ExtendedFailedMessage) {
   if (isError(message)) return;
 
   try {
@@ -349,11 +351,13 @@ onUnmounted(() => {
                 <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>
+                <h5 v-if="showAllMessages" :class="{ active: panel === 5 }" class="nav-item" @click.prevent="togglePanel(5)"><a href="#">Sequence Diagram</a></h5>
               </div>
               <StackTraceView v-if="panel === 1 && failedMessage.exception?.stack_trace" :message="failedMessage" />
               <BodyView v-if="panel === 2" :message="failedMessage" />
               <HeadersView v-if="panel === 3" :message="failedMessage" />
               <FlowDiagram v-if="panel === 4" :message="failedMessage" />
+              <SequenceDiagram v-if="showAllMessages && panel === 5" />
             </div>
           </div>
 

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Endpoints from "./SequenceDiagram/EndpointsComponent.vue";
+import Timeline from "./SequenceDiagram/TimelineComponent.vue";
+import Handlers from "./SequenceDiagram/HandlersComponent.vue";
+import Routes from "./SequenceDiagram/RoutesComponent.vue";
+import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
+import { storeToRefs } from "pinia";
+
+const store = useSequenceDiagramStore();
+store.setConversationId("39907d51-12e5-4202-82c3-b2b30077ebd4");
+
+const { maxWidth, maxHeight } = storeToRefs(store);
+</script>
+
+<template>
+  <div class="outer">
+    <svg class="sequence-diagram" :width="`max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)`" :height="maxHeight + 20">
+      <Endpoints />
+      <Timeline />
+      <Handlers />
+      <Routes />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.outer {
+  max-width: 100%;
+  max-height: calc(100vh - 27em);
+  overflow: auto;
+}
+
+.sequence-diagram {
+  --error: red;
+  --gray20: #333333;
+  --gray30: #444444;
+  --gray40: #666666;
+  --gray60: #999999;
+  --gray80: #cccccc;
+  --gray90: #e6e6e6;
+  --gray95: #b3b3b3;
+  --highlight: #0b6eef;
+  --highlight-background: #c5dee9;
+  background: white;
+}
+</style>

src/Frontend/src/components/messages/SequenceDiagram.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
+import { Endpoint_Width, EndpointCentrePoint, useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
+import { storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
+
+interface EndpointWithLocation extends Endpoint {
+  width: number;
+  textWidth: number;
+  x?: number;
+  surround?: EndpointSurround;
+}
+
+interface EndpointSurround {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  fill: string;
+  rx: string;
+  strokeWidth: string;
+  stroke: string;
+}
+
+const Endpoint_Gap = 30;
+const Endpoint_Image_Width = 20;
+
+const store = useSequenceDiagramStore();
+const { startX, endpoints } = storeToRefs(store);
+
+const epRefs = ref<SVGTextElement[]>([]);
+const endpointItems = computed(() =>
+  endpoints.value.map((x, index) => {
+    const endpoint = x as EndpointWithLocation;
+    const el = epRefs.value[index];
+    if (el) {
+      const bounds = el.getBBox();
+      const previousEndpoint = index > 0 ? endpointItems.value[index - 1] : undefined;
+      endpoint.width = Math.max(Endpoint_Width, bounds.width);
+      endpoint.textWidth = bounds.width;
+      endpoint.x = (previousEndpoint?.x ?? startX.value) + (previousEndpoint?.width ?? 0) + Endpoint_Gap;
+
+      if (!endpoint.surround && el.isConnected) {
+        const style = getComputedStyle(el);
+        const padding_top = parseInt(style.getPropertyValue("padding-top"));
+        const padding_left = parseInt(style.getPropertyValue("padding-left"));
+        const padding_right = parseInt(style.getPropertyValue("padding-right"));
+        const padding_bottom = parseInt(style.getPropertyValue("padding-bottom"));
+        endpoint.surround = {
+          x: endpoint.x - endpoint.width / 2 - padding_left,
+          y: bounds.y - padding_top,
+          width: endpoint.width + padding_left + padding_right,
+          height: bounds.height + padding_top + padding_bottom,
+          fill: style.getPropertyValue("background-color"),
+          rx: style.getPropertyValue("border-radius"),
+          strokeWidth: style.getPropertyValue("border-top-width"),
+          stroke: style.getPropertyValue("border-top-color"),
+        };
+      }
+    }
+    return endpoint;
+  })
+);
+
+watch(endpointItems, () => {
+  store.setEndpointCentrePoints(endpointItems.value.map((endpoint) => ({ name: endpoint.name, centre: endpoint.x ?? 0, top: (endpoint.surround?.y ?? 0) + (endpoint.surround?.height ?? 0) + 15 }) as EndpointCentrePoint));
+  const lastEndpoint = endpointItems.value[endpointItems.value.length - 1];
+  store.setMaxWidth((lastEndpoint.x ?? 0) + lastEndpoint.width);
+});
+
+watch(startX, () => {
+  epRefs.value = [];
+  endpoints.value.forEach((endpoint) => ((endpoint as EndpointWithLocation).surround = undefined));
+});
+
+function setEndpointRef(el: SVGTextElement, index: number) {
+  if (el) epRefs.value[index] = el;
+}
+</script>
+
+<template>
+  <g v-for="(endpoint, i) in endpointItems" :key="endpoint.name" transform="translate(0,15)">
+    <rect
+      v-if="endpoint.surround"
+      :x="endpoint.surround.x"
+      :y="endpoint.surround.y"
+      :width="endpoint.surround.width"
+      :height="endpoint.surround.height"
+      :fill="endpoint.surround.fill"
+      :rx="endpoint.surround.rx"
+      :stroke-width="endpoint.surround.strokeWidth"
+      :stroke="endpoint.surround.stroke"
+    ></rect>
+    <g :transform="`translate(${(endpoint.x ?? Endpoint_Width / 2) - ((endpoint.textWidth ?? 0) + Endpoint_Image_Width) / 2}, 0)`">
+      <path fill="var(--gray40)" d="M 0,0 M 18,18 M 0,2 v 14 h 14 v -4 h -6 v -6 h 6 v -4 h -14 M 9,7 v 4 h 9 v -4"></path>
+      <text :x="Endpoint_Image_Width" y="10" alignment-baseline="middle" text-anchor="start" :ref="(el) => setEndpointRef(el as SVGTextElement, i)">{{ endpoint.name }}</text>
+    </g>
+  </g>
+</template>
+
+<style scoped>
+text {
+  background: var(--gray90);
+  border-radius: 5px;
+  padding: 0.5em;
+}
+</style>

src/Frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { HandlerState } from "@/resources/SequenceDiagram/Handler";
+import { computed, ref } from "vue";
+import { Direction } from "@/resources/SequenceDiagram/RoutedMessage";
+import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
+import { storeToRefs } from "pinia";
+
+const Height_Per_Out = 40;
+const Handler_Gap = 20;
+const Handler_Width = 14;
+
+const store = useSequenceDiagramStore();
+const { handlers, endpointCentrePoints, highlightId } = storeToRefs(store);
+
+const messageTypeRefs = ref<SVGTextElement[]>([]);
+
+const handlerItems = computed(() => {
+  let nextY = 0;
+  const result = handlers.value.map((handler, index) => {
+    const endpoint = endpointCentrePoints.value.find((cp) => cp.name === handler.endpoint.name)!;
+    const messageTypeElement = messageTypeRefs.value[index];
+    const count = handler.outMessages.length;
+    const height = (count === 0 ? 1 : count) * Height_Per_Out;
+    if (nextY === 0) nextY += Handler_Gap + (endpoint?.top ?? 0);
+    const y = nextY;
+    nextY += height + Handler_Gap;
+    const fill = (() => {
+      if (handler.id === "First") return "black";
+      if (handler.state === HandlerState.Fail) return "var(--error)";
+      if (handler.route?.name === highlightId.value) return "var(--highlight-background)";
+      return "var(--gray60)";
+    })();
+    const icon = (() => {
+      if (handler.id === "First") return "M0,0L8,4 0,8z";
+      if (handler.state === HandlerState.Fail) return "M6,0L0,6 6,12 12,6 6,0z M7,9L5,9 5,8 7,8 7,9z M5,7L5,3 7,3 7,7 5,7z";
+      return null;
+    })();
+    const iconSize = (() => {
+      if (handler.id === "First") return 8;
+      if (handler.state === HandlerState.Fail) return 12;
+      return 0;
+    })();
+
+    //determine which side of the handler to render the messageType on. If it's the left side (for a right arrow) then we apply a negative offset
+    const messageTypeOffset = handler.direction === Direction.Right ? ((messageTypeElement?.getBBox().width ?? 0) + 24) * -1 : 20;
+    if (messageTypeOffset < 0) {
+      store.setStartX(-1 * messageTypeOffset);
+    }
+
+    return {
+      id: handler.id,
+      endpointName: handler.endpoint.name,
+      incomingId: handler.route?.name,
+      left: (endpoint?.centre ?? 0) - Handler_Width / 2,
+      right: (endpoint?.centre ?? 0) + Handler_Width / 2,
+      y,
+      height,
+      fill,
+      icon,
+      iconSize,
+      messageType: handler.name,
+      messageTypeOffset,
+      messageTypeHighlight: handler.route?.name === highlightId.value,
+    };
+  });
+
+  store.setMaxHeight(nextY);
+  store.setHandlerLocations(result.map((handler) => ({ id: handler.id, endpointName: handler.endpointName, left: handler.left, right: handler.right, y: handler.y, height: handler.height })));
+
+  return result;
+});
+
+function setMessageTypeRef(el: SVGTextElement, index: number) {
+  if (el) messageTypeRefs.value[index] = el;
+}
+</script>
+
+<template>
+  <g v-for="(handler, i) in handlerItems" :key="handler.id" :transform="`translate(${handler.left}, ${handler.y})`">
+    <!--Handler Activation Box-->
+    <rect :width="Handler_Width" :height="handler.height" :class="handler.incomingId && 'clickable'" :fill="handler.fill" @mouseover="() => store.setHighlightId(handler.incomingId)" @mouseleave="() => store.setHighlightId()" />
+    <path v-if="handler.icon" :d="handler.icon" fill="white" :transform="`translate(${Handler_Width / 2 - handler.iconSize / 2}, ${handler.height / 2 - handler.iconSize / 2})`" />
+    <!--Message Type and Icon-->
+    <g
+      v-if="handler.messageType"
+      :transform="`translate(${handler.messageTypeOffset}, 4)`"
+      class="clickable"
+      :fill="handler.messageTypeHighlight ? 'var(--highlight)' : 'var(--gray40)'"
+      @mouseover="() => store.setHighlightId(handler.incomingId)"
+      @mouseleave="() => store.setHighlightId()"
+    >
+      <path d="M9,3L9,3 9,0 0,0 0,3 4,3 4,6 0,6 0,9 4,9 4,12 0,12 0,15 9,15 9,12 5,12 5,9 9,9 9,6 5,6 5,3z" />
+      <text x="14" y="10" alignment-baseline="middle" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ handler.messageType }}</text>
+    </g>
+  </g>
+</template>
+
+<style scoped>
+.clickable {
+  cursor: pointer;
+}
+</style>