add friendly display of timeout timespan

Author: soujay

src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts

@@ -1,6 +1,7 @@
 import { SagaHistory } from "@/resources/SagaHistory";
 import { typeToName } from "@/composables/typeHumanizer";
 import { SagaMessageData, SagaMessageDataItem } from "@/stores/SagaDiagramStore";
+import { getTimeoutFriendly } from "@/composables/deliveryDelayParser";
 
 export interface SagaMessageViewModel {
   MessageId: string;
@@ -78,6 +79,7 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
           FormattedTimeSent: `${timeSent.toLocaleDateString()} ${timeSent.toLocaleTimeString()}`,
           HasTimeout: hasTimeout,
           TimeoutSeconds: timeoutSeconds,
+          TimeoutFriendly: getTimeoutFriendly(delivery_delay),
           MessageFriendlyTypeName: typeToName(msg.message_type || ""),
           Data: messageData,
           IsEventMessage: isEventMessage,
@@ -91,7 +93,7 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
           (msg) =>
             ({
               ...msg,
-              TimeoutFriendly: `${msg.TimeoutSeconds}s`,
+              TimeoutFriendly: `${msg.TimeoutFriendly}`,
             }) as SagaTimeoutMessageViewModel
         );
 

src/Frontend/src/composables/deliveryDelayParser.ts

@@ -0,0 +1,14 @@
+export function parseDeliveryDelay(delay: string): { hours: number; minutes: number; seconds: number } {
+  const [hours, minutes, seconds] = delay.split(":").map(Number);
+  return { hours, minutes, seconds };
+}
+
+function getFriendly(time: number, text: string): string {
+  return time > 0 ? `${time}${text}` : "";
+}
+
+export function getTimeoutFriendly(delivery_delay: string): string {
+  const { hours, minutes, seconds } = parseDeliveryDelay(delivery_delay);
+
+  return `${getFriendly(hours, "h")}${getFriendly(minutes, "m")}${getFriendly(seconds, "s")}`;
+}