handlers

Author: PhilBastian

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

@@ -8,11 +8,13 @@ import { ModelCreator } from "@/resources/SequenceDiagram/SequenceModel";
 import { ref } from "vue";
 import Endpoints, { EndpointCentrePoint } from "./SequenceDiagram/EndpointsComponent.vue";
 import Timeline from "./SequenceDiagram/TimelineComponent.vue";
+import Handlers from "./SequenceDiagram/HandlersComponent.vue";
 
 const endpoints = ref<Endpoint[]>([]);
 const handlers = ref<Handler[]>([]);
 const routes = ref<MessageProcessingRoute[]>([]);
-const timelines = ref<EndpointCentrePoint[]>([]);
+const endpointCentrePoints = ref<EndpointCentrePoint[]>([]);
+const maxHeight = ref(150);
 
 async function fetchConversation() {
   const response = await useFetchFromServiceControl(`conversations/${"b4dac7d7-4571-4f26-aa32-b29c0030c95f"}`); //${"9d91504c-d8b7-488c-b525-b2a300109653"}`);
@@ -29,14 +31,18 @@ async function fetchConversation() {
 fetchConversation();
 
 function setTimelines(centrePoints: EndpointCentrePoint[]) {
-  timelines.value = centrePoints;
+  endpointCentrePoints.value = centrePoints;
+}
+function setMaxHeight(height: number) {
+  maxHeight.value = height;
 }
 </script>
 
 <template>
-  <svg class="sequence-diagram" width="100%" height="100%">
+  <svg class="sequence-diagram" width="100%" :height="maxHeight + 20">
     <Endpoints :endpoints="endpoints" v-on:centre-points="setTimelines" />
-    <Timeline :centre-points="timelines" :height="150" />
+    <Timeline :centre-points="endpointCentrePoints" :height="maxHeight" />
+    <Handlers :handlers="handlers" :endpoint-centre-points="endpointCentrePoints" v-on:max-height="setMaxHeight" />
   </svg>
 </template>
 

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

@@ -99,7 +99,7 @@ function setEndpointRef(el: SVGTextElement, index: number) {
     ></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="left" :ref="(el) => setEndpointRef(el as SVGTextElement, i)">{{ endpoint.name }}</text>
+      <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>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { Handler, HandlerState } from "@/resources/SequenceDiagram/Handler";
+import { EndpointCentrePoint } from "./EndpointsComponent.vue";
+import { computed, ref } from "vue";
+import { Direction } from "@/resources/SequenceDiagram/RoutedMessage";
+
+const Height_Per_Out = 40;
+const Handler_Gap = 20;
+const Handler_Width = 14;
+
+const props = defineProps<{
+  handlers: Handler[];
+  endpointCentrePoints: EndpointCentrePoint[];
+}>();
+const emit = defineEmits<{
+  maxHeight: [height: number];
+}>();
+
+const messageTypeRefs = ref<SVGTextElement[]>([]);
+
+const handlers = computed(() => {
+  let nextY = 0;
+  const result = props.handlers.map((handler, index) => {
+    const endpoint = props.endpointCentrePoints.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)";
+      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;
+    })();
+
+    return {
+      key: handler.id,
+      x: (endpoint?.centre ?? 0) - Handler_Width / 2,
+      y,
+      height,
+      fill,
+      icon,
+      iconSize,
+      messageType: handler.name,
+      messageTypeOffset: handler.direction === Direction.Left ? ((messageTypeElement?.getBBox().width ?? 0) + 24) * -1 : 10,
+    };
+  });
+
+  emit("maxHeight", nextY);
+  return result;
+});
+
+function setMessageTypeRef(el: SVGTextElement, index: number) {
+  if (el) messageTypeRefs.value[index] = el;
+}
+</script>
+
+<template>
+  <g>
+    <g v-for="(handler, i) in handlers" :key="handler.key" :transform="`translate(${handler.x}, ${handler.y})`">
+      <!--Handler Activation Box-->
+      <rect :width="Handler_Width" :height="handler.height" :fill="handler.fill" />
+      <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)`" fill="var(--gray40)">
+        <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>
+  </g>
+</template>

src/Frontend/src/resources/SequenceDiagram/Handler.ts

@@ -1,6 +1,6 @@
 import { NServiceBusHeaders } from "../Header";
 import Message, { MessageStatus } from "../Message";
-import { MessageProcessingRoute, RoutedMessage } from "./RoutedMessage";
+import { Direction, MessageProcessingRoute, RoutedMessage } from "./RoutedMessage";
 import { Endpoint } from "./Endpoint";
 import { friendlyTypeName } from "./SequenceModel";
 
@@ -16,6 +16,7 @@ export interface Handler {
   processedAt?: Date;
   readonly handledAt?: Date;
   processingTime?: number;
+  readonly direction: Direction;
   route?: MessageProcessingRoute;
   readonly selectedMessage?: Message;
   updateProcessedAt(timeSent: Date): void;
@@ -75,10 +76,10 @@ export function updateProcessingHandler(handler: Handler, message: Message) {
 }
 
 class HandlerItem implements Handler {
-  #id: string;
-  #endpoint: Endpoint;
-  #processedAtGuess?: Date;
-  #outMessages: RoutedMessage[];
+  private _id: string;
+  private _endpoint: Endpoint;
+  private _processedAtGuess?: Date;
+  private _outMessages: RoutedMessage[];
   name?: string;
   partOfSaga?: string;
   inMessage?: RoutedMessage;
@@ -88,40 +89,44 @@ class HandlerItem implements Handler {
   route?: MessageProcessingRoute;
 
   constructor(id: string, endpoint: Endpoint) {
-    this.#id = id;
-    this.#endpoint = endpoint;
-    this.#outMessages = [];
+    this._id = id;
+    this._endpoint = endpoint;
+    this._outMessages = [];
   }
 
   get id() {
-    return this.#id;
+    return this._id;
   }
 
   get endpoint() {
-    return this.#endpoint;
+    return this._endpoint;
   }
 
   get isPartOfSaga() {
     return this.partOfSaga != null;
   }
 
   get handledAt() {
-    return this.processedAt ?? this.#processedAtGuess;
+    return this.processedAt ?? this._processedAtGuess;
   }
 
   get selectedMessage() {
     return this.route?.fromRoutedMessage?.selectedMessage;
   }
 
   get outMessages() {
-    return [...this.#outMessages];
+    return [...this._outMessages];
+  }
+
+  get direction() {
+    return this.outMessages[0]?.direction === Direction.Left ? Direction.Right : Direction.Left;
   }
 
   updateProcessedAt(timeSent: Date) {
-    if (!this.#processedAtGuess || this.#processedAtGuess.getTime() > timeSent.getTime()) this.#processedAtGuess = timeSent;
+    if (!this._processedAtGuess || this._processedAtGuess.getTime() > timeSent.getTime()) this._processedAtGuess = timeSent;
   }
 
   addOutMessage(routedMessage: RoutedMessage) {
-    this.#outMessages = [routedMessage, ...this.#outMessages].sort((a, b) => (a.sentTime?.getTime() ?? 0) - (b.sentTime?.getTime() ?? 0));
+    this._outMessages = [routedMessage, ...this._outMessages].sort((a, b) => (a.sentTime?.getTime() ?? 0) - (b.sentTime?.getTime() ?? 0));
   }
 }