move types and extract functions

PhilBastian · PhilBastian · commit 79345e24312f · 2025-04-14T15:50:51.000+08:00
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
@@ -5,11 +5,11 @@ import { storeToRefs } from "pinia";
 import SortableColumn from "../SortableColumn.vue";
 import { MessageStatus } from "@/resources/Message";
 import moment from "moment";
-import { useFormatTime } from "@/composables/formatter";
 import RefreshConfig from "../RefreshConfig.vue";
 import ItemsPerPage from "../ItemsPerPage.vue";
 import PaginationStrip from "../PaginationStrip.vue";
 import { useRoute } from "vue-router";
+import { friendlyTypeName, formatDotNetTimespan } from "../messages2/utils";
 
 const store = useAuditStore();
 const { messages, sortByInstances, itemsPerPage, selectedPage, totalCount } = storeToRefs(store);
@@ -48,21 +48,6 @@ function statusToIcon(messageStatus: MessageStatus) {
       return "fa retry-issued";
   }
 }
-
-function friendlyTypeName(messageType: string) {
-  if (messageType == null) return null;
-
-  const typeClass = messageType.split(",")[0];
-  const typeName = typeClass.split(".").reverse()[0];
-  return typeName.replace(/\+/g, ".");
-}
-
-function formatDotNetTimespan(timespan: string) {
-  //assuming if we have days in the timespan then something is very, very wrong
-  const [hh, mm, ss] = timespan.split(":");
-  const time = useFormatTime(((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000);
-  return `${time.value} ${time.unit}`;
-}
 </script>
 
 <template>
diff --git a/src/Frontend/src/components/failedmessages/DeletedMessages.vue b/src/Frontend/src/components/failedmessages/DeletedMessages.vue
@@ -12,7 +12,7 @@ import MessageList, { IMessageList } from "./MessageList.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import PaginationStrip from "../../components/PaginationStrip.vue";
 import moment from "moment";
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import { TYPE } from "vue-toastification";
 import FailureGroup from "@/resources/FailureGroup";
 import { useConfiguration } from "@/composables/configuration";
diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
@@ -4,7 +4,7 @@ import { useRetryEditedMessage } from "@/composables/serviceFailedMessage";
 import MessageHeader from "./EditMessageHeader.vue";
 import { EditAndRetryConfig } from "@/resources/Configuration";
 import type Header from "@/resources/Header";
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import parseContentType from "@/composables/contentTypeParser";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 import CodeEditor from "@/components/CodeEditor.vue";
diff --git a/src/Frontend/src/components/failedmessages/FailedMessages.vue b/src/Frontend/src/components/failedmessages/FailedMessages.vue
@@ -14,7 +14,8 @@ import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
 import MessageList, { IMessageList } from "./MessageList.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import PaginationStrip from "../../components/PaginationStrip.vue";
-import { ExtendedFailedMessage, FailedMessageStatus } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import SortOptions, { SortDirection } from "@/resources/SortOptions";
 import { TYPE } from "vue-toastification";
 import GroupOperation from "@/resources/GroupOperation";
diff --git a/src/Frontend/src/components/failedmessages/MessageList.vue b/src/Frontend/src/components/failedmessages/MessageList.vue
@@ -3,7 +3,8 @@ import { useRouter } from "vue-router";
 import TimeSince from "../TimeSince.vue";
 import NoData from "../NoData.vue";
 import routeLinks from "@/router/routeLinks";
-import { FailedMessageStatus, ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import { hexToCSSFilter } from "hex-to-css-filter";
 
 export interface IMessageList {
diff --git a/src/Frontend/src/components/failedmessages/PendingRetries.vue b/src/Frontend/src/components/failedmessages/PendingRetries.vue
@@ -11,7 +11,8 @@ import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
 import MessageList, { IMessageList } from "./MessageList.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import PaginationStrip from "../../components/PaginationStrip.vue";
-import { ExtendedFailedMessage, FailedMessageStatus } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import SortOptions, { SortDirection } from "@/resources/SortOptions";
 import QueueAddress from "@/resources/QueueAddress";
 import { TYPE } from "vue-toastification";
diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import { computed } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
diff --git a/src/Frontend/src/components/messages/FlowDiagram.vue b/src/Frontend/src/components/messages/FlowDiagram.vue
@@ -7,7 +7,7 @@ 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 { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import { Controls } from "@vue-flow/controls";
 
 const props = defineProps<{
diff --git a/src/Frontend/src/components/messages/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import FilterInput from "@/components/FilterInput.vue";
 import { computed, ref } from "vue";
diff --git a/src/Frontend/src/components/messages/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
@@ -14,7 +14,8 @@ import EditRetryDialog from "../failedmessages/EditRetryDialog.vue";
 import routeLinks from "@/router/routeLinks";
 import { EditAndRetryConfig } from "@/resources/Configuration";
 import { TYPE } from "vue-toastification";
-import { ExtendedFailedMessage, FailedMessageError, FailedMessageStatus, isError } from "@/resources/FailedMessage";
+import { FailedMessageError, FailedMessageStatus } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage, isError } from "../messages2/FailedMessage";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
 import { useConfiguration } from "@/composables/configuration";
diff --git a/src/Frontend/src/components/messages/StacktraceView.vue b/src/Frontend/src/components/messages/StacktraceView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CodeEditor from "@/components/CodeEditor.vue";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 
 const props = defineProps<{
   message: ExtendedFailedMessage;
diff --git a/src/Frontend/src/components/messages2/FailedMessage.ts b/src/Frontend/src/components/messages2/FailedMessage.ts
@@ -0,0 +1,33 @@
+import FailedMessage, { FailedMessageError } from "@/resources/FailedMessage";
+import Header from "@/resources/Header";
+import { ConversationModel } from "./SequenceDiagram/SequenceModel";
+
+export interface ExtendedFailedMessage extends FailedMessage {
+  error_retention_period: number;
+  delete_soon: boolean;
+  deleted_in: string;
+  retryInProgress: boolean;
+  deleteInProgress: boolean;
+  restoreInProgress: boolean;
+  selected: boolean;
+  retried: boolean;
+  archiving: boolean;
+  restoring: boolean;
+  archived: boolean;
+  resolved: boolean;
+  headersNotFound: boolean;
+  messageBodyNotFound: boolean;
+  bodyUnavailable: boolean;
+  headers: Header[];
+  conversationId: string;
+  conversation?: ConversationModel;
+  messageBody: string;
+  contentType: string;
+  isEditAndRetryEnabled: boolean;
+  redirect: boolean;
+  submittedForRetrial: boolean;
+}
+
+export function isError(obj: ExtendedFailedMessage | FailedMessageError): obj is FailedMessageError {
+  return (obj as FailedMessageError).error !== undefined || (obj as FailedMessageError).notFound !== undefined;
+}
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/Endpoint.ts b/src/Frontend/src/components/messages2/SequenceDiagram/Endpoint.ts
@@ -1,5 +1,5 @@
-import { NServiceBusHeaders } from "../Header";
-import Message from "../Message";
+import { NServiceBusHeaders } from "../../../resources/Header";
+import Message from "../../../resources/Message";
 import { Handler } from "./Handler";
 
 export interface Endpoint {
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
+import { Endpoint } from "@/components/messages2/SequenceDiagram/Endpoint";
 
 defineProps<{ endpoint: Endpoint }>();
 </script>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
+import { Endpoint } from "@/components/messages2/SequenceDiagram/Endpoint";
 import { Endpoint_Width, EndpointCentrePoint, useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/Handler.ts b/src/Frontend/src/components/messages2/SequenceDiagram/Handler.ts
@@ -1,8 +1,8 @@
-import { NServiceBusHeaders } from "../Header";
-import Message, { MessageStatus } from "../Message";
+import { NServiceBusHeaders } from "../../../resources/Header";
+import Message, { MessageStatus } from "../../../resources/Message";
 import { Direction, MessageProcessingRoute, RoutedMessage } from "./RoutedMessage";
 import { Endpoint } from "./Endpoint";
-import { friendlyTypeName } from "./SequenceModel";
+import { formatDotNetTimespan, friendlyTypeName } from "../utils";
 
 export interface Handler {
   readonly id: string;
@@ -16,7 +16,7 @@ export interface Handler {
   readonly outMessages: RoutedMessage[];
   processedAt?: Date;
   readonly handledAt?: Date;
-  processingTime?: number;
+  processingTime?: string;
   readonly direction: Direction;
   route?: MessageProcessingRoute;
   readonly selectedMessage?: Message;
@@ -58,10 +58,7 @@ export class HandlerRegistry {
 
 export function updateProcessingHandler(handler: Handler, message: Message) {
   handler.processedAt = new Date(message.processed_at);
-  //assuming if we have days in the timespan then something is very, very wrong
-  //TODO: extract logic since it's also currently used in AuditList
-  const [hh, mm, ss] = message.processing_time.split(":");
-  handler.processingTime = ((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000;
+  handler.processingTime = formatDotNetTimespan(message.processing_time);
   handler.name = message.message_type;
   handler.friendlyName = friendlyTypeName(message.message_type);
 
@@ -90,7 +87,7 @@ class HandlerItem implements Handler {
   inMessage?: RoutedMessage;
   state: HandlerState = HandlerState.Unknown;
   processedAt?: Date;
-  processingTime?: number;
+  processingTime?: string;
   route?: MessageProcessingRoute;
   uiRef?: SVGElement;
 
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
-import { useFormatTime } from "@/composables/formatter";
-import { Handler } from "@/resources/SequenceDiagram/Handler";
+import { Handler } from "@/components/messages2/SequenceDiagram/Handler";
 
 defineProps<{ handler: Handler }>();
-
-function formatTime(milliseconds: number) {
-  const time = useFormatTime(milliseconds);
-  return `${time.value} ${time.unit}`;
-}
 </script>
 
 <template>
@@ -16,7 +10,7 @@ function formatTime(milliseconds: number) {
     <div class="title">Processing of Message</div>
     <div class="details">
       <label>Processing Time:</label>
-      <span>{{ formatTime(handler.processingTime ?? 0) }}</span>
+      <span>{{ handler.processingTime }}</span>
       <label>Processing Of:</label>
       <span>{{ handler.friendlyName }}</span>
       <label v-if="handler.partOfSaga">Sagas Invoked:</label>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { HandlerState } from "@/resources/SequenceDiagram/Handler";
+import { HandlerState } from "@/components/messages2/SequenceDiagram/Handler";
 import { computed, onActivated, ref, watch } from "vue";
-import { Direction } from "@/resources/SequenceDiagram/RoutedMessage";
+import { Direction } from "@/components/messages2/SequenceDiagram/RoutedMessage";
 import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
 
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue b/src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RoutedMessage, RoutedMessageType } from "@/resources/SequenceDiagram/RoutedMessage";
+import { RoutedMessage, RoutedMessageType } from "@/components/messages2/SequenceDiagram/RoutedMessage";
 
 defineProps<{ routedMessage: RoutedMessage }>();
 </script>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RoutedMessage.ts b/src/Frontend/src/components/messages2/SequenceDiagram/RoutedMessage.ts
@@ -1,8 +1,8 @@
-import EndpointDetails from "../EndpointDetails";
-import { NServiceBusHeaders } from "../Header";
-import Message, { MessageIntent, MessageStatus } from "../Message";
+import EndpointDetails from "../../../resources/EndpointDetails";
+import { NServiceBusHeaders } from "../../../resources/Header";
+import Message, { MessageIntent, MessageStatus } from "../../../resources/Message";
 import { Handler } from "./Handler";
-import { friendlyTypeName } from "./SequenceModel";
+import { friendlyTypeName } from "../utils";
 
 export interface RoutedMessage {
   id: string;
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Direction, RoutedMessageType } from "@/resources/SequenceDiagram/RoutedMessage";
+import { Direction, RoutedMessageType } from "@/components/messages2/SequenceDiagram/RoutedMessage";
 import { computed, ref } from "vue";
 import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
-import { HandlerState } from "@/resources/SequenceDiagram/Handler";
+import { HandlerState } from "@/components/messages2/SequenceDiagram/Handler";
 
 const Arrow_Head_Width = 10;
 const Message_Type_Margin = 4;
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/SequenceModel.ts b/src/Frontend/src/components/messages2/SequenceDiagram/SequenceModel.ts
@@ -1,5 +1,5 @@
-import { NServiceBusHeaders } from "../Header";
-import Message from "../Message";
+import { NServiceBusHeaders } from "../../../resources/Header";
+import Message from "../../../resources/Message";
 import { createRoutedMessage, createRoute, MessageProcessingRoute } from "./RoutedMessage";
 import { createProcessingEndpoint, createSendingEndpoint, Endpoint, EndpointRegistry } from "./Endpoint";
 import { ConversationStartHandlerName, createProcessingHandler, createSendingHandler, Handler, HandlerRegistry, updateProcessingHandler } from "./Handler";
@@ -8,15 +8,6 @@ export interface ConversationModel {
   endpoints: Endpoint[];
 }
 
-//TODO: extract to common area if this continues to be used in AuditList
-export function friendlyTypeName(messageType: string) {
-  if (messageType == null) return undefined;
-
-  const typeClass = messageType.split(",")[0];
-  const typeName = typeClass.split(".").reverse()[0];
-  return typeName.replace(/\+/g, ".");
-}
-
 export class ModelCreator implements ConversationModel {
   #endpoints: Endpoint[];
   #handlers: Handler[];
@@ -136,7 +127,6 @@ class MessageTreeNode {
   }
 
   walk(): Message[] {
-    //TODO: check performance of this. We may need to pre-calculate the processed_at as a date on the message object
     return [this.#message, ...this.children.sort((a, b) => new Date(a.message.processed_at).getTime() - new Date(b.message.processed_at).getTime()).flatMap((child) => child.walk())];
   }
 }
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts b/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts
@@ -5,7 +5,7 @@ import { useTippy } from "vue-tippy";
 import EndpointTooltip from "./EndpointTooltip.vue";
 import HandlerTooltip from "./HandlerTooltip.vue";
 import RouteTooltip from "./RouteTooltip.vue";
-import { HandlerState } from "@/resources/SequenceDiagram/Handler";
+import { HandlerState } from "@/components/messages2/SequenceDiagram/Handler";
 
 export default function useTooltips() {
   const store = useSequenceDiagramStore();
diff --git a/src/Frontend/src/components/messages2/utils.ts b/src/Frontend/src/components/messages2/utils.ts
@@ -0,0 +1,16 @@
+import { useFormatTime } from "@/composables/formatter";
+
+export function friendlyTypeName(messageType: string) {
+  if (messageType == null) return undefined;
+
+  const typeClass = messageType.split(",")[0];
+  const typeName = typeClass.split(".").reverse()[0];
+  return typeName.replace(/\+/g, ".");
+}
+
+export function formatDotNetTimespan(timespan: string) {
+  //assuming if we have days in the timespan then something is very, very wrong
+  const [hh, mm, ss] = timespan.split(":");
+  const time = useFormatTime(((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000);
+  return `${time.value} ${time.unit}`;
+}
diff --git a/src/Frontend/src/resources/FailedMessage.ts b/src/Frontend/src/resources/FailedMessage.ts
@@ -1,6 +1,4 @@
 import type EndpointDetails from "@/resources/EndpointDetails";
-import type Header from "@/resources/Header";
-import { ConversationModel } from "./SequenceDiagram/SequenceModel";
 
 export default interface FailedMessage {
   id: string;
@@ -20,41 +18,11 @@ export default interface FailedMessage {
   edit_of: string;
 }
 
-export interface ExtendedFailedMessage extends FailedMessage {
-  error_retention_period: number;
-  delete_soon: boolean;
-  deleted_in: string;
-  retryInProgress: boolean;
-  deleteInProgress: boolean;
-  restoreInProgress: boolean;
-  selected: boolean;
-  retried: boolean;
-  archiving: boolean;
-  restoring: boolean;
-  archived: boolean;
-  resolved: boolean;
-  headersNotFound: boolean;
-  messageBodyNotFound: boolean;
-  bodyUnavailable: boolean;
-  headers: Header[];
-  conversationId: string;
-  conversation?: ConversationModel;
-  messageBody: string;
-  contentType: string;
-  isEditAndRetryEnabled: boolean;
-  redirect: boolean;
-  submittedForRetrial: boolean;
-}
-
 export interface FailedMessageError {
   notFound: boolean;
   error: boolean;
 }
 
-export function isError(obj: ExtendedFailedMessage | FailedMessageError): obj is FailedMessageError {
-  return (obj as FailedMessageError).error !== undefined || (obj as FailedMessageError).notFound !== undefined;
-}
-
 export interface ExceptionDetails {
   exception_type: string;
   message: string;
diff --git a/src/Frontend/src/stores/SequenceDiagramStore.ts b/src/Frontend/src/stores/SequenceDiagramStore.ts
