From d4744de194ff67d106bc8afef704d8b84313441b Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Tue, 6 Feb 2024 15:05:19 +1000
Subject: [PATCH 1/6] Migrating composables and a few vue component

Started adding typings for REST api resources
---
 .../vue/src/components/LicenseExpired.vue     |   2 +-
 .../vue/src/components/PageHeader.vue         |   2 +-
 .../vue/src/components/TimeSince.vue          |   8 +-
 .../components/__tests__/HelloWorld.spec.js   |  11 --
 .../configuration/PlatformConnections.vue     |   2 +-
 .../configuration/PlatformLicense.vue         |  14 +--
 .../components/failedmessages/MessageView.vue |   7 +-
 .../vue/src/composables/eventLogItems.js      |   7 --
 .../vue/src/composables/eventLogItems.ts      |   8 ++
 ...nloadCreator.js => fileDownloadCreator.ts} |   2 +-
 .../vue/src/composables/formatter.js          |  62 -----------
 .../vue/src/composables/formatter.ts          |   6 +
 .../vue/src/composables/serviceEndpoints.js   |   9 --
 .../vue/src/composables/serviceEndpoints.ts   |   9 ++
 .../{serviceLicense.js => serviceLicense.ts}  | 105 ++++++++++--------
 .../src/composables/serviceNotifications.js   |  84 --------------
 .../src/composables/serviceNotifications.ts   |  61 ++++++++++
 ...ceProductUrls.js => serviceProductUrls.ts} |   7 +-
 ...olUrls.js => serviceServiceControlUrls.ts} |  56 ++++++----
 .../src/composables/{toast.js => toast.ts}    |  15 +--
 .../vue/src/resources/EmailNotifications.ts   |  10 ++
 .../vue/src/resources/EventLogItem.ts         |   9 ++
 .../vue/src/resources/LicenseInfo.ts          |  23 ++++
 .../vue/src/resources/QueueAddress.ts         |   4 +
 .../vue/src/resources/Release.ts              |   5 +
 ...UpdateEmailNotificationsSettingsRequest.ts |   9 ++
 .../vue/src/router/{index.js => index.ts}     |  34 +++---
 .../vue/src/views/DashboardView.vue           |   2 +-
 .../vue/src/views/FailedMessagesView.vue      |   2 +-
 29 files changed, 283 insertions(+), 292 deletions(-)
 delete mode 100644 src/ServicePulse.Host/vue/src/components/__tests__/HelloWorld.spec.js
 delete mode 100644 src/ServicePulse.Host/vue/src/composables/eventLogItems.js
 create mode 100644 src/ServicePulse.Host/vue/src/composables/eventLogItems.ts
 rename src/ServicePulse.Host/vue/src/composables/{fileDownloadCreator.js => fileDownloadCreator.ts} (82%)
 delete mode 100644 src/ServicePulse.Host/vue/src/composables/formatter.js
 create mode 100644 src/ServicePulse.Host/vue/src/composables/formatter.ts
 delete mode 100644 src/ServicePulse.Host/vue/src/composables/serviceEndpoints.js
 create mode 100644 src/ServicePulse.Host/vue/src/composables/serviceEndpoints.ts
 rename src/ServicePulse.Host/vue/src/composables/{serviceLicense.js => serviceLicense.ts} (64%)
 delete mode 100644 src/ServicePulse.Host/vue/src/composables/serviceNotifications.js
 create mode 100644 src/ServicePulse.Host/vue/src/composables/serviceNotifications.ts
 rename src/ServicePulse.Host/vue/src/composables/{serviceProductUrls.js => serviceProductUrls.ts} (76%)
 rename src/ServicePulse.Host/vue/src/composables/{serviceServiceControlUrls.js => serviceServiceControlUrls.ts} (72%)
 rename src/ServicePulse.Host/vue/src/composables/{toast.js => toast.ts} (58%)
 create mode 100644 src/ServicePulse.Host/vue/src/resources/EmailNotifications.ts
 create mode 100644 src/ServicePulse.Host/vue/src/resources/EventLogItem.ts
 create mode 100644 src/ServicePulse.Host/vue/src/resources/LicenseInfo.ts
 create mode 100644 src/ServicePulse.Host/vue/src/resources/QueueAddress.ts
 create mode 100644 src/ServicePulse.Host/vue/src/resources/Release.ts
 create mode 100644 src/ServicePulse.Host/vue/src/resources/UpdateEmailNotificationsSettingsRequest.ts
 rename src/ServicePulse.Host/vue/src/router/{index.js => index.ts} (61%)

diff --git a/src/ServicePulse.Host/vue/src/components/LicenseExpired.vue b/src/ServicePulse.Host/vue/src/components/LicenseExpired.vue
index 3d66ce3c03..79e3a59fa8 100644
--- a/src/ServicePulse.Host/vue/src/components/LicenseExpired.vue
+++ b/src/ServicePulse.Host/vue/src/components/LicenseExpired.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { licenseStatus } from "./../composables/serviceLicense";
+import { licenseStatus } from "../composables/serviceLicense";
 </script>
 
 <template>
diff --git a/src/ServicePulse.Host/vue/src/components/PageHeader.vue b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
index 1d497e78c1..491f3160ae 100644
--- a/src/ServicePulse.Host/vue/src/components/PageHeader.vue
+++ b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
@@ -3,7 +3,7 @@ import { RouterLink, useRoute } from "vue-router";
 import { computed } from "vue";
 import { connectionState, monitoringConnectionState, stats } from "../composables/serviceServiceControl";
 import { useIsMonitoringEnabled } from "../composables/serviceServiceControlUrls";
-import { licenseStatus } from "./../composables/serviceLicense";
+import { licenseStatus } from "../composables/serviceLicense";
 import ExclamationMark from "./ExclamationMark.vue";
 
 const baseUrl = window.defaultConfig.base_url;
diff --git a/src/ServicePulse.Host/vue/src/components/TimeSince.vue b/src/ServicePulse.Host/vue/src/components/TimeSince.vue
index 972b805aaa..3d44bf5ccd 100644
--- a/src/ServicePulse.Host/vue/src/components/TimeSince.vue
+++ b/src/ServicePulse.Host/vue/src/components/TimeSince.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 import moment from "moment";
 
@@ -9,7 +9,7 @@ const props = defineProps({
   },
 });
 
-let interval = null;
+let interval: number | undefined = undefined;
 
 const title = ref(),
   text = ref();
@@ -26,14 +26,14 @@ function updateText() {
 }
 
 onMounted(() => {
-  interval = setInterval(function () {
+  interval = window.setInterval(function () {
     updateText();
   }, 5000);
 
   updateText();
 });
 
-onUnmounted(() => clearInterval(interval));
+onUnmounted(() => window.clearInterval(interval));
 </script>
 
 <template>
diff --git a/src/ServicePulse.Host/vue/src/components/__tests__/HelloWorld.spec.js b/src/ServicePulse.Host/vue/src/components/__tests__/HelloWorld.spec.js
deleted file mode 100644
index c80503c050..0000000000
--- a/src/ServicePulse.Host/vue/src/components/__tests__/HelloWorld.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { mount } from "@vue/test-utils";
-import HelloWorld from "../HelloWorld.vue";
-
-describe("HelloWorld", () => {
-  it("renders properly", () => {
-    const wrapper = mount(HelloWorld, { props: { msg: "Hello Vitest" } });
-    expect(wrapper.text()).toContain("Hello Vitest");
-  });
-});
diff --git a/src/ServicePulse.Host/vue/src/components/configuration/PlatformConnections.vue b/src/ServicePulse.Host/vue/src/components/configuration/PlatformConnections.vue
index 3c562e8153..b7c5bc867d 100644
--- a/src/ServicePulse.Host/vue/src/components/configuration/PlatformConnections.vue
+++ b/src/ServicePulse.Host/vue/src/components/configuration/PlatformConnections.vue
@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import LicenseExpired from "../LicenseExpired.vue";
 import { licenseStatus } from "../../composables/serviceLicense";
-import { monitoringUrl as configuredMonitoringUrl, serviceControlUrl as configuredServiceControlUrl, updateServiceControlUrls, useIsMonitoringDisabled } from "./../../composables/serviceServiceControlUrls";
+import { monitoringUrl as configuredMonitoringUrl, serviceControlUrl as configuredServiceControlUrl, updateServiceControlUrls, useIsMonitoringDisabled } from "../../composables/serviceServiceControlUrls";
 import { connectionState, monitoringConnectionState } from "../../composables/serviceServiceControl";
 
 // This is needed because the ConfigurationView.vue routerView expects this event.
diff --git a/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue b/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
index 1970c5c576..d63393cb2c 100644
--- a/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
+++ b/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
@@ -1,6 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
-import { license, licenseStatus } from "./../../composables/serviceLicense";
+import { license, licenseStatus } from "../../composables/serviceLicense";
 import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
 import { connectionState } from "../../composables/serviceServiceControl";
 import BusyIndicator from "../BusyIndicator.vue";
@@ -28,7 +28,7 @@ const loading = computed(() => {
           <div class="box">
             <div class="row">
               <div class="license-info">
-                <div><b>Platform license type:</b> {{ license.license_type }}{{ license.licenseEdition.value }}</div>
+                <div><b>Platform license type:</b> {{ license.license_type }}{{ license.licenseEdition }}</div>
 
                 <template v-if="licenseStatus.isSubscriptionLicense">
                   <div>
@@ -38,7 +38,7 @@ const loading = computed(() => {
                         'license-expired': licenseStatus.isPlatformExpired,
                       }"
                     >
-                      {{ license.formattedExpirationDate.value }}
+                      {{ license.formattedExpirationDate }}
                       {{ licenseStatus.subscriptionDaysLeft }}
                       <exclamation-mark :type="licenseStatus.warningLevel" />
                     </span>
@@ -53,7 +53,7 @@ const loading = computed(() => {
                         'license-expired': licenseStatus.isPlatformTrialExpired,
                       }"
                     >
-                      {{ license.formattedExpirationDate.value }}
+                      {{ license.formattedExpirationDate }}
                       {{ licenseStatus.trialDaysLeft }}
                       <exclamation-mark :type="licenseStatus.warningLevel" />
                     </span>
@@ -72,7 +72,7 @@ const loading = computed(() => {
                           'license-expired': licenseStatus.isInvalidDueToUpgradeProtectionExpired,
                         }"
                       >
-                        {{ license.formattedUpgradeProtectionExpiration.value }}
+                        {{ license.formattedUpgradeProtectionExpiration }}
                         {{ licenseStatus.upgradeDaysLeft }}
                         <exclamation-mark :type="licenseStatus.warningLevel" />
                       </span>
@@ -85,7 +85,7 @@ const loading = computed(() => {
                 </template>
                 <div>
                   <b>ServiceControl instance:</b>
-                  {{ license.formattedInstanceName.value }}
+                  {{ license.formattedInstanceName }}
                 </div>
                 <ul class="license-install-info">
                   <li>
diff --git a/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue b/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
index 37e66e6c17..ee83ccf38a 100644
--- a/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
+++ b/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
@@ -172,8 +172,11 @@ async function downloadBody() {
     }
   }
 
-  const textBody = await response.text();
-  failedMessage.value.messageBody = textBody;
+  try {
+    failedMessage.value.messageBody = await response.text();
+  } catch {
+    failedMessage.value.bodyUnavailable = true;
+  }
 }
 
 // taken from https://github.com/krtnio/angular-pretty-xml/blob/master/src/angular-pretty-xml.js
diff --git a/src/ServicePulse.Host/vue/src/composables/eventLogItems.js b/src/ServicePulse.Host/vue/src/composables/eventLogItems.js
deleted file mode 100644
index 29f7f55745..0000000000
--- a/src/ServicePulse.Host/vue/src/composables/eventLogItems.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useFetchFromServiceControl } from "./serviceServiceControlUrls";
-
-export async function getEventLogItems() {
-  const response = await useFetchFromServiceControl("eventlogitems");
-  const data = await response.json();
-  return data;
-}
diff --git a/src/ServicePulse.Host/vue/src/composables/eventLogItems.ts b/src/ServicePulse.Host/vue/src/composables/eventLogItems.ts
new file mode 100644
index 0000000000..7d2a6f18c6
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/composables/eventLogItems.ts
@@ -0,0 +1,8 @@
+import { useTypedFetchFromServiceControl } from "./serviceServiceControlUrls";
+import type EventLogItem from "@/resources/EventLogItem";
+
+export async function getEventLogItems() {
+  const [, data] = await useTypedFetchFromServiceControl<EventLogItem[]>("eventlogitems");
+
+  return data;
+}
diff --git a/src/ServicePulse.Host/vue/src/composables/fileDownloadCreator.js b/src/ServicePulse.Host/vue/src/composables/fileDownloadCreator.ts
similarity index 82%
rename from src/ServicePulse.Host/vue/src/composables/fileDownloadCreator.js
rename to src/ServicePulse.Host/vue/src/composables/fileDownloadCreator.ts
index 5d57cae4dd..7acb48c523 100644
--- a/src/ServicePulse.Host/vue/src/composables/fileDownloadCreator.js
+++ b/src/ServicePulse.Host/vue/src/composables/fileDownloadCreator.ts
@@ -1,4 +1,4 @@
-export function useDownloadFile(text, fileType, fileName) {
+export function useDownloadFile(text: string, fileType: string, fileName: string) {
   const blob = new Blob([text], { type: fileType });
 
   const a = document.createElement("a");
diff --git a/src/ServicePulse.Host/vue/src/composables/formatter.js b/src/ServicePulse.Host/vue/src/composables/formatter.js
deleted file mode 100644
index ea0bb266df..0000000000
--- a/src/ServicePulse.Host/vue/src/composables/formatter.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import moment from "moment";
-
-const secondDuration = moment.duration(10 * 1000);
-const minuteDuration = moment.duration(60 * 1000);
-const hourDuration = moment.duration(60 * 1000); //this ensure that we never use minute formatting
-const dayDuration = moment.duration(24 * 60 * 60 * 1000);
-
-export function useFormatTime(value) {
-  const duration = moment.duration(value);
-
-  const time = { value: 0, unit: "" };
-  if (duration >= dayDuration) {
-    time.value = duration.format("D [d] h [hr]");
-    return time;
-  } else if (duration >= hourDuration) {
-    time.value = moment.utc(duration.asMilliseconds()).format("HH:mm");
-    time.unit = "hr";
-    return time;
-  } else if (duration >= minuteDuration) {
-    time.value = duration.format("mm:ss");
-    time.unit = "min";
-    return time;
-  } else if (duration >= secondDuration) {
-    time.value = duration.format("ss");
-    time.unit = "sec";
-    return time;
-  } else {
-    time.value = duration.format("s,SSS");
-    time.unit = "ms";
-    return time;
-  }
-}
-
-export function useGetDayDiffFromToday(value) {
-  if (!value) return undefined;
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const diff = new Date(value.replace("Z", "")) - today;
-  return Math.round(diff / 1000 / 60 / 60 / 24);
-}
-
-export function useFormatLargeNumber(value, decimals) {
-  const suffixes = ["k", "M", "G", "T", "P", "E"];
-
-  value = Number(value);
-
-  if (window.isNaN(value)) {
-    return null;
-  }
-
-  if (value < 1000000) {
-    return round(value, decimals);
-  }
-
-  const exp = Math.floor(Math.log(value) / Math.log(1000));
-
-  return round(value / Math.pow(1000, exp), decimals) + suffixes[exp - 1];
-}
-
-function round(num, decimals) {
-  return +(Math.round(num + ("e+" + decimals)) + ("e-" + decimals));
-}
diff --git a/src/ServicePulse.Host/vue/src/composables/formatter.ts b/src/ServicePulse.Host/vue/src/composables/formatter.ts
new file mode 100644
index 0000000000..24d827a07a
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/composables/formatter.ts
@@ -0,0 +1,6 @@
+export function useGetDayDiffFromToday(value: string) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const diff = new Date(value.replace("Z", "")).getTime() - today.getTime();
+  return Math.round(diff / 1000 / 60 / 60 / 24);
+}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceEndpoints.js b/src/ServicePulse.Host/vue/src/composables/serviceEndpoints.js
deleted file mode 100644
index 82eb7e7785..0000000000
--- a/src/ServicePulse.Host/vue/src/composables/serviceEndpoints.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useFetchFromServiceControl } from "./serviceServiceControlUrls";
-
-export class useEndpoints {
-  async getQueueNames() {
-    const response = await useFetchFromServiceControl("errors/queues/addresses");
-    const data = await response.json();
-    return data;
-  }
-}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceEndpoints.ts b/src/ServicePulse.Host/vue/src/composables/serviceEndpoints.ts
new file mode 100644
index 0000000000..476cceed7b
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/composables/serviceEndpoints.ts
@@ -0,0 +1,9 @@
+import { useTypedFetchFromServiceControl } from "./serviceServiceControlUrls";
+import type QueueAddress from "@/resources/QueueAddress";
+
+export class useEndpoints {
+  async getQueueNames() {
+    const [, data] = await useTypedFetchFromServiceControl<QueueAddress>("errors/queues/addresses");
+    return data;
+  }
+}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceLicense.js b/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
similarity index 64%
rename from src/ServicePulse.Host/vue/src/composables/serviceLicense.js
rename to src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
index 9f1a773226..9ea4b143d1 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceLicense.js
+++ b/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
@@ -1,7 +1,10 @@
-import { computed, reactive, watch } from "vue";
+import { computed, type ComputedRef, reactive, type UnwrapNestedRefs, watch } from "vue";
 import { useGetDayDiffFromToday } from "./formatter";
-import { useFetchFromServiceControl } from "./serviceServiceControlUrls";
+import { useTypedFetchFromServiceControl } from "./serviceServiceControlUrls";
 import { useShowToast } from "./toast";
+import { TYPE } from "vue-toastification";
+import type LicenseInfo from "@/resources/LicenseInfo";
+import { LicenseStatus } from "@/resources/LicenseInfo";
 
 const subscriptionExpiring =
   '<div class="license-warning"><strong>Platform license expires soon</strong><div>Once the license expires you\'ll no longer be able to continue using the Particular Service Platform.</div><a href="#/configuration" class="btn btn-license-warning">View license details</a></div>';
@@ -12,19 +15,26 @@ const upgradeProtectionExpired =
 const trialExpiring =
   '<div class="license-warning"><strong>Non-production development license expiring</strong><div>Your non-production development license will expire soon. To continue using the Particular Service Platform you\'ll need to extend your license.</div><a href="http://particular.net/extend-your-trial?p=servicepulse" class="btn btn-license-warning"><i class="fa fa-external-link-alt"></i> Extend your license</a><a href="#/configuration" class="btn btn-license-warning-light">View license details</a></div>';
 
-export let license = reactive({
+interface License extends LicenseInfo {
+  licenseEdition?: ComputedRef<string>;
+  formattedExpirationDate?: ComputedRef<string>;
+  formattedUpgradeProtectionExpiration?: ComputedRef<string>;
+  formattedInstanceName?: ComputedRef<string>;
+}
+
+const emptyLicense: License = {
   edition: "",
-  licenseEdition: "",
-  expiration_date: undefined,
-  formattedExpirationDate: "",
-  upgrade_protection_expiration: undefined,
-  formattedUpgradeProtectionExpiration: "",
+  expiration_date: "",
+  upgrade_protection_expiration: "",
   license_type: "",
   instance_name: "",
-  formattedInstanceName: "",
   trial_license: true,
-  license_status: "Unavailable",
-});
+  registered_to: "",
+  status: "",
+  license_status: LicenseStatus.Unavailable,
+};
+
+export let license = reactive<License>(emptyLicense);
 
 export const licenseStatus = reactive({
   isSubscriptionLicense: false,
@@ -44,85 +54,83 @@ export const licenseStatus = reactive({
 });
 
 export async function useLicense() {
-  watch(license, (newValue, oldValue) => {
-    const checkForWarnings = oldValue !== null ? newValue && newValue.license_status !== oldValue.license_status : newValue !== null;
+  watch<UnwrapNestedRefs<License>>(license, async (newValue, oldValue) => {
+    const checkForWarnings = oldValue !== null ? newValue && newValue.license_status != oldValue.license_status : newValue !== null;
     if (checkForWarnings) {
       displayWarningMessage(newValue.license_status);
     }
   });
 
-  const lic = await getLicense(license);
-  license = lic;
+  license = await getLicense();
   license.licenseEdition = computed(() => {
     return license.license_type && license.edition ? ", " + license.edition : "";
-  });
+  }).value;
   license.formattedInstanceName = computed(() => {
     return license.instance_name || "Upgrade ServiceControl to v3.4.0+ to see more information about this license";
-  });
+  }).value;
   license.formattedExpirationDate = computed(() => {
     return license.expiration_date ? new Date(license.expiration_date.replace("Z", "")).toLocaleDateString() : "";
-  });
-  license.formattedUpgradeProtectionExpiration = computed(() => {
+  }).value;
+  license.formattedUpgradeProtectionExpiration = computed<string>(() => {
     return license.upgrade_protection_expiration ? new Date(license.upgrade_protection_expiration.replace("Z", "")).toLocaleDateString() : "";
-  });
-  licenseStatus.isSubscriptionLicense = isSubscriptionLicense(lic);
-  licenseStatus.isUpgradeProtectionLicense = isUpgradeProtectionLicense(lic);
-  licenseStatus.isTrialLicense = lic.trial_license;
-  licenseStatus.isPlatformExpired = lic.license_status === "InvalidDueToExpiredSubscription";
-  licenseStatus.isPlatformTrialExpiring = lic.license_status === "ValidWithExpiringTrial";
-  licenseStatus.isPlatformTrialExpired = lic.license_status === "InvalidDueToExpiredTrial";
-  licenseStatus.isInvalidDueToUpgradeProtectionExpired = lic.license_status === "InvalidDueToExpiredUpgradeProtection";
-  licenseStatus.isValidWithExpiredUpgradeProtection = lic.license_status === "ValidWithExpiredUpgradeProtection";
-  licenseStatus.isValidWithExpiringUpgradeProtection = lic.license_status === "ValidWithExpiringUpgradeProtection";
-  licenseStatus.upgradeDaysLeft = getUpgradeDaysLeft(lic);
-  licenseStatus.subscriptionDaysLeft = getSubscriptionDaysLeft(lic);
-  licenseStatus.trialDaysLeft = getTrialDaysLeft(lic);
-  licenseStatus.warningLevel = getLicenseWarningLevel(lic.license_status);
+  }).value;
+  licenseStatus.isSubscriptionLicense = isSubscriptionLicense(license);
+  licenseStatus.isUpgradeProtectionLicense = isUpgradeProtectionLicense(license);
+  licenseStatus.isTrialLicense = license.trial_license;
+  licenseStatus.isPlatformExpired = license.license_status === "InvalidDueToExpiredSubscription";
+  licenseStatus.isPlatformTrialExpiring = license.license_status === "ValidWithExpiringTrial";
+  licenseStatus.isPlatformTrialExpired = license.license_status === "InvalidDueToExpiredTrial";
+  licenseStatus.isInvalidDueToUpgradeProtectionExpired = license.license_status === "InvalidDueToExpiredUpgradeProtection";
+  licenseStatus.isValidWithExpiredUpgradeProtection = license.license_status === "ValidWithExpiredUpgradeProtection";
+  licenseStatus.isValidWithExpiringUpgradeProtection = license.license_status === "ValidWithExpiringUpgradeProtection";
+  licenseStatus.upgradeDaysLeft = getUpgradeDaysLeft(license);
+  licenseStatus.subscriptionDaysLeft = getSubscriptionDaysLeft(license);
+  licenseStatus.trialDaysLeft = getTrialDaysLeft(license);
+  licenseStatus.warningLevel = getLicenseWarningLevel(license.license_status);
   licenseStatus.isExpired = licenseStatus.isPlatformExpired || licenseStatus.isPlatformTrialExpired || licenseStatus.isInvalidDueToUpgradeProtectionExpired;
-  return lic;
 }
 
-function getLicenseWarningLevel(licenseStatus) {
+function getLicenseWarningLevel(licenseStatus: LicenseStatus) {
   if (licenseStatus === "InvalidDueToExpiredTrial" || licenseStatus === "InvalidDueToExpiredSubscription" || licenseStatus === "InvalidDueToExpiredUpgradeProtection") return "danger";
   else if (licenseStatus === "ValidWithExpiringUpgradeProtection" || licenseStatus === "ValidWithExpiringTrial" || licenseStatus === "ValidWithExpiredUpgradeProtection" || licenseStatus === "ValidWithExpiringSubscription") return "warning";
   return "";
 }
 
-function isUpgradeProtectionLicense(license) {
+function isUpgradeProtectionLicense(license: UnwrapNestedRefs<License>) {
   return license.upgrade_protection_expiration !== undefined && license.upgrade_protection_expiration !== "";
 }
 
-function isSubscriptionLicense(license) {
+function isSubscriptionLicense(license: UnwrapNestedRefs<License>) {
   return license.expiration_date !== undefined && license.expiration_date !== "" && !license.trial_license;
 }
 
-function displayWarningMessage(licenseStatus) {
+function displayWarningMessage(licenseStatus: LicenseStatus) {
   switch (licenseStatus) {
     case "ValidWithExpiredUpgradeProtection":
-      useShowToast("warning", "", upgradeProtectionExpired, true);
+      useShowToast(TYPE.WARNING, "", upgradeProtectionExpired, true);
       break;
 
     case "ValidWithExpiringTrial":
-      useShowToast("warning", "", trialExpiring, true);
+      useShowToast(TYPE.WARNING, "", trialExpiring, true);
       break;
 
     case "ValidWithExpiringSubscription":
-      useShowToast("warning", "", subscriptionExpiring, true);
+      useShowToast(TYPE.WARNING, "", subscriptionExpiring, true);
       break;
 
     case "ValidWithExpiringUpgradeProtection":
-      useShowToast("warning", "", upgradeProtectionExpiring, true);
+      useShowToast(TYPE.WARNING, "", upgradeProtectionExpiring, true);
       break;
 
     case "InvalidDueToExpiredTrial":
     case "InvalidDueToExpiredSubscription":
     case "InvalidDueToExpiredUpgradeProtection":
-      useShowToast("error", "Error", 'Your license has expired. Please contact Particular Software support at: <a href="http://particular.net/support">http://particular.net/support</a>', true);
+      useShowToast(TYPE.ERROR, "Error", 'Your license has expired. Please contact Particular Software support at: <a href="http://particular.net/support">http://particular.net/support</a>', true);
       break;
   }
 }
 
-function getSubscriptionDaysLeft(license) {
+function getSubscriptionDaysLeft(license: UnwrapNestedRefs<License>) {
   if (license.license_status === "InvalidDueToExpiredSubscription") return " - expired";
 
   const isExpiring = license.license_status === "ValidWithExpiringSubscription";
@@ -134,7 +142,7 @@ function getSubscriptionDaysLeft(license) {
   return " - expiring in " + expiringIn + " days";
 }
 
-function getTrialDaysLeft(license) {
+function getTrialDaysLeft(license: UnwrapNestedRefs<License>) {
   if (license.license_status === "InvalidDueToExpiredTrial") return " - expired";
 
   const isExpiring = license.license_status === "ValidWithExpiringTrial";
@@ -146,7 +154,7 @@ function getTrialDaysLeft(license) {
   return " - expiring in " + expiringIn + " days";
 }
 
-function getUpgradeDaysLeft(license) {
+function getUpgradeDaysLeft(license: UnwrapNestedRefs<License>) {
   if (license.license_status === "InvalidDueToExpiredUpgradeProtection") return " - expired";
 
   const expiringIn = useGetDayDiffFromToday(license.upgrade_protection_expiration);
@@ -156,10 +164,9 @@ function getUpgradeDaysLeft(license) {
   return " - " + expiringIn + " days left";
 }
 
-async function getLicense(emptyLicense) {
+async function getLicense() {
   try {
-    const response = await useFetchFromServiceControl("license?refresh=true");
-    const data = await response.json();
+    let [, data] = await useTypedFetchFromServiceControl<LicenseInfo>("license?refresh=true");
     return data;
   } catch (err) {
     console.log(err);
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceNotifications.js b/src/ServicePulse.Host/vue/src/composables/serviceNotifications.js
deleted file mode 100644
index e3502624d0..0000000000
--- a/src/ServicePulse.Host/vue/src/composables/serviceNotifications.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useFetchFromServiceControl, usePostToServiceControl } from "./serviceServiceControlUrls";
-
-export async function useEmailNotifications() {
-  try {
-    const emailNotifications = await getEmailNotifications();
-    return emailNotifications;
-  } catch (err) {
-    console.log(err);
-  }
-}
-
-async function getEmailNotifications() {
-  try {
-    const response = await useFetchFromServiceControl("notifications/email");
-    const data = await response.json();
-    return data;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      enabled: false,
-      enable_tls: false,
-    };
-    return result;
-  }
-}
-
-export async function useUpdateEmailNotifications(settings) {
-  try {
-    const response = await usePostToServiceControl("notifications/email", settings);
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-
-export async function useTestEmailNotifications() {
-  try {
-    const response = await usePostToServiceControl("notifications/email/test", {});
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-
-export async function useToggleEmailNotifications(enabled) {
-  try {
-    const response = await usePostToServiceControl("notifications/email/toggle", {
-      enabled: enabled,
-    });
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceNotifications.ts b/src/ServicePulse.Host/vue/src/composables/serviceNotifications.ts
new file mode 100644
index 0000000000..d2ccbb6ef7
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/composables/serviceNotifications.ts
@@ -0,0 +1,61 @@
+import { usePostToServiceControl, useTypedFetchFromServiceControl } from "./serviceServiceControlUrls";
+
+import type EmailNotifications from "@/resources/EmailNotifications";
+import type UpdateEmailNotificationsSettingsRequest from "@/resources/UpdateEmailNotificationsSettingsRequest";
+
+export async function useEmailNotifications() {
+  try {
+    const [, data] = await useTypedFetchFromServiceControl<EmailNotifications>("notifications/email");
+    return data;
+  } catch (err) {
+    console.log(err);
+    return {
+      enabled: false,
+      enable_tls: false,
+    };
+  }
+}
+
+export async function useUpdateEmailNotifications(settings: UpdateEmailNotificationsSettingsRequest) {
+  try {
+    const response = await usePostToServiceControl("notifications/email", settings);
+    return {
+      message: response.ok ? "success" : "error:" + response.statusText,
+    };
+  } catch (err) {
+    console.log(err);
+    return {
+      message: "error",
+    };
+  }
+}
+
+export async function useTestEmailNotifications() {
+  try {
+    const response = await usePostToServiceControl("notifications/email/test");
+    return {
+      message: response.ok ? "success" : "error:" + response.statusText,
+    };
+  } catch (err) {
+    console.log(err);
+    return {
+      message: "error",
+    };
+  }
+}
+
+export async function useToggleEmailNotifications(enabled: boolean) {
+  try {
+    const response = await usePostToServiceControl("notifications/email/toggle", {
+      enabled: enabled,
+    });
+    return {
+      message: response.ok ? "success" : "error:" + response.statusText,
+    };
+  } catch (err) {
+    console.log(err);
+    return {
+      message: "error",
+    };
+  }
+}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceProductUrls.js b/src/ServicePulse.Host/vue/src/composables/serviceProductUrls.ts
similarity index 76%
rename from src/ServicePulse.Host/vue/src/composables/serviceProductUrls.js
rename to src/ServicePulse.Host/vue/src/composables/serviceProductUrls.ts
index 4e499a4497..8e550e69d4 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceProductUrls.js
+++ b/src/ServicePulse.Host/vue/src/composables/serviceProductUrls.ts
@@ -1,7 +1,8 @@
-async function getData(url) {
+import type Release from "@/resources/Release";
+
+async function getData(url: string) {
   const response = await fetch(url);
-  const data = await response.json();
-  return data;
+  return (await response.json()) as unknown as Release[];
 }
 
 export async function useServiceProductUrls() {
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.js b/src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.ts
similarity index 72%
rename from src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.js
rename to src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.ts
index 7522930f7f..b3a73a91b3 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.js
+++ b/src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.ts
@@ -1,29 +1,36 @@
-import { ref } from "vue";
+import { type Ref, ref } from "vue";
 
-export const serviceControlUrl = ref(null);
-export const monitoringUrl = ref(null);
+export const serviceControlUrl = ref<string>();
+export const monitoringUrl = ref<string>();
 
 export function useIsMonitoringDisabled() {
-  return monitoringUrl.value === null || monitoringUrl.value === "" || monitoringUrl.value === "!";
+  return monitoringUrl.value === undefined || monitoringUrl.value === "" || monitoringUrl.value === "!";
 }
 
 export function useIsMonitoringEnabled() {
   return !useIsMonitoringDisabled();
 }
 
-export function useFetchFromServiceControl(suffix) {
+export function useFetchFromServiceControl(suffix: string) {
   return fetch(serviceControlUrl.value + suffix);
 }
 
-export function useFetchFromMonitoring(suffix) {
+export async function useTypedFetchFromServiceControl<T>(suffix: string): Promise<[Response, T]> {
+  const response = await fetch(serviceControlUrl.value + suffix);
+  const data = await response.json();
+
+  return [response, data];
+}
+
+export function useFetchFromMonitoring(suffix: string) {
   if (useIsMonitoringDisabled()) {
-    return Promise.resolve(null);
+    return Promise.resolve(undefined);
   }
   return fetch(monitoringUrl.value + suffix);
 }
 
-export function usePostToServiceControl(suffix, payload) {
-  const requestOptions = {
+export function usePostToServiceControl(suffix: string, payload: object | undefined = undefined) {
+  const requestOptions: RequestInit = {
     method: "POST",
   };
   if (payload !== undefined) {
@@ -33,8 +40,8 @@ export function usePostToServiceControl(suffix, payload) {
   return fetch(serviceControlUrl.value + suffix, requestOptions);
 }
 
-export function usePutToServiceControl(suffix, payload) {
-  const requestOptions = {
+export function usePutToServiceControl(suffix: string, payload: object) {
+  const requestOptions: RequestInit = {
     method: "PUT",
   };
   if (payload !== undefined) {
@@ -44,15 +51,15 @@ export function usePutToServiceControl(suffix, payload) {
   return fetch(serviceControlUrl.value + suffix, requestOptions);
 }
 
-export function useDeleteFromServiceControl(suffix) {
-  const requestOptions = {
+export function useDeleteFromServiceControl(suffix: string) {
+  const requestOptions: RequestInit = {
     method: "DELETE",
   };
   return fetch(serviceControlUrl.value + suffix, requestOptions);
 }
 
-export function usePatchToServiceControl(suffix, payload) {
-  const requestOptions = {
+export function usePatchToServiceControl(suffix: string, payload: object) {
+  const requestOptions: RequestInit = {
     method: "PATCH",
   };
   if (payload !== undefined) {
@@ -72,7 +79,7 @@ export function useServiceControlUrls() {
     window.localStorage.setItem("scu", serviceControlUrl.value);
     console.debug(`ServiceControl Url found in QS and stored in local storage: ${serviceControlUrl.value}`);
   } else if (window.localStorage.getItem("scu")) {
-    serviceControlUrl.value = window.localStorage.getItem("scu");
+    serviceControlUrl.value = window.localStorage.getItem("scu") || undefined;
     console.debug(`ServiceControl Url, not in QS, found in local storage: ${serviceControlUrl.value}`);
   } else if (window.defaultConfig && window.defaultConfig.service_control_url) {
     serviceControlUrl.value = window.defaultConfig.service_control_url;
@@ -86,7 +93,7 @@ export function useServiceControlUrls() {
     window.localStorage.setItem("mu", monitoringUrl.value);
     console.debug(`Monitoring Url found in QS and stored in local storage: ${monitoringUrl.value}`);
   } else if (window.localStorage.getItem("mu")) {
-    monitoringUrl.value = window.localStorage.getItem("mu");
+    monitoringUrl.value = window.localStorage.getItem("mu") || undefined;
     console.debug(`Monitoring Url, not in QS, found in local storage: ${monitoringUrl.value}`);
   } else if (window.defaultConfig && window.defaultConfig.monitoring_urls && window.defaultConfig.monitoring_urls.length) {
     monitoringUrl.value = window.defaultConfig.monitoring_urls[0];
@@ -98,7 +105,7 @@ export function useServiceControlUrls() {
   return { serviceControlUrl, monitoringUrl };
 }
 
-export function updateServiceControlUrls(newServiceControlUrl, newMonitoringUrl) {
+export function updateServiceControlUrls(newServiceControlUrl: Ref<string>, newMonitoringUrl: Ref<string>) {
   if (!newServiceControlUrl.value) {
     throw "ServiceControl URL is mandatory";
   } else if (!newServiceControlUrl.value.endsWith("/")) {
@@ -115,16 +122,23 @@ export function updateServiceControlUrls(newServiceControlUrl, newMonitoringUrl)
   window.localStorage.removeItem("scu");
   window.localStorage.removeItem("mu");
 
-  const newSearch = "?scu=" + newServiceControlUrl.value + "&mu=" + newMonitoringUrl.value;
+  let newSearch = "?scu=" + newServiceControlUrl.value + "&mu=" + newMonitoringUrl.value;
   console.debug("updateConnections - new query string: ", newSearch);
   window.location.search = newSearch;
 }
 
+interface Param {
+  name: string;
+  value: string;
+}
+
 function getParams() {
-  const params = [];
+  const params: Param[] = [];
+
   if (!window.location.search) return params;
 
   const searchParams = window.location.search.split("&");
+
   searchParams.forEach((p) => {
     p = p.startsWith("?") ? p.substring(1, p.length) : p;
     const singleParam = p.split("=");
@@ -133,7 +147,7 @@ function getParams() {
   return params;
 }
 
-function getParameter(params, key) {
+function getParameter(params: Param[], key: string) {
   if (params) {
     return params.find((param) => {
       return param.name === key;
diff --git a/src/ServicePulse.Host/vue/src/composables/toast.js b/src/ServicePulse.Host/vue/src/composables/toast.ts
similarity index 58%
rename from src/ServicePulse.Host/vue/src/composables/toast.js
rename to src/ServicePulse.Host/vue/src/composables/toast.ts
index 00ba30586c..82f8da6bfe 100644
--- a/src/ServicePulse.Host/vue/src/composables/toast.js
+++ b/src/ServicePulse.Host/vue/src/composables/toast.ts
@@ -1,7 +1,7 @@
 import ToastPopup from "../components/ToastPopup.vue";
-import { useToast } from "vue-toastification";
+import { TYPE, useToast } from "vue-toastification";
 
-export function useShowToast(type, title, message, doNotUseTimeout) {
+export function useShowToast(type: TYPE, title: string, message: string, doNotUseTimeout: boolean = false) {
   const toast = useToast();
   const content = {
     // Your component or JSX template
@@ -15,13 +15,8 @@ export function useShowToast(type, title, message, doNotUseTimeout) {
     },
   };
 
-  const options = {
+  toast(content, {
+    timeout: doNotUseTimeout ? false : undefined,
     type: type,
-  };
-
-  if (doNotUseTimeout) {
-    options.timeout = false;
-  }
-
-  toast(content, options);
+  });
 }
diff --git a/src/ServicePulse.Host/vue/src/resources/EmailNotifications.ts b/src/ServicePulse.Host/vue/src/resources/EmailNotifications.ts
new file mode 100644
index 0000000000..d80bba6f07
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/resources/EmailNotifications.ts
@@ -0,0 +1,10 @@
+export default interface EmailNotifications {
+  enabled: boolean;
+  smtp_server?: string;
+  smtp_port?: number;
+  authentication_account?: string;
+  authentication_password?: string;
+  enable_tls: boolean;
+  to?: string;
+  from?: string;
+}
diff --git a/src/ServicePulse.Host/vue/src/resources/EventLogItem.ts b/src/ServicePulse.Host/vue/src/resources/EventLogItem.ts
new file mode 100644
index 0000000000..3279299a33
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/resources/EventLogItem.ts
@@ -0,0 +1,9 @@
+export default interface EventLogItem {
+  id: string;
+  description: string;
+  severity: string;
+  raised_at: string;
+  related_to: string[];
+  category: string;
+  event_type: string;
+}
diff --git a/src/ServicePulse.Host/vue/src/resources/LicenseInfo.ts b/src/ServicePulse.Host/vue/src/resources/LicenseInfo.ts
new file mode 100644
index 0000000000..9a68e1c956
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/resources/LicenseInfo.ts
@@ -0,0 +1,23 @@
+export default interface LicenseInfo {
+  registered_to: string;
+  edition: string;
+  expiration_date: string;
+  upgrade_protection_expiration: string;
+  license_type: string;
+  instance_name: string;
+  trial_license: boolean;
+  license_status: LicenseStatus;
+  status: string;
+}
+
+export enum LicenseStatus {
+  Valid = "Valid",
+  Unavailable = "Unavailable",
+  InvalidDueToExpiredSubscription = "InvalidDueToExpiredSubscription",
+  ValidWithExpiringTrial = "ValidWithExpiringTrial",
+  InvalidDueToExpiredTrial = "InvalidDueToExpiredTrial",
+  InvalidDueToExpiredUpgradeProtection = "InvalidDueToExpiredUpgradeProtection",
+  ValidWithExpiredUpgradeProtection = "ValidWithExpiredUpgradeProtection",
+  ValidWithExpiringUpgradeProtection = "ValidWithExpiringUpgradeProtection",
+  ValidWithExpiringSubscription = "ValidWithExpiringSubscription",
+}
diff --git a/src/ServicePulse.Host/vue/src/resources/QueueAddress.ts b/src/ServicePulse.Host/vue/src/resources/QueueAddress.ts
new file mode 100644
index 0000000000..4079180b70
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/resources/QueueAddress.ts
@@ -0,0 +1,4 @@
+export default interface QueueAddress {
+  physical_address: string;
+  failed_message_count: number;
+}
diff --git a/src/ServicePulse.Host/vue/src/resources/Release.ts b/src/ServicePulse.Host/vue/src/resources/Release.ts
new file mode 100644
index 0000000000..eab381230f
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/resources/Release.ts
@@ -0,0 +1,5 @@
+export default interface Release {
+  tag: string;
+  release: string;
+  published: string;
+}
diff --git a/src/ServicePulse.Host/vue/src/resources/UpdateEmailNotificationsSettingsRequest.ts b/src/ServicePulse.Host/vue/src/resources/UpdateEmailNotificationsSettingsRequest.ts
new file mode 100644
index 0000000000..c98d41213a
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/resources/UpdateEmailNotificationsSettingsRequest.ts
@@ -0,0 +1,9 @@
+export default interface UpdateEmailNotificationsSettingsRequest {
+  smtp_server: string;
+  smtp_port: number;
+  authentication_account: string;
+  authentication_password: string;
+  enable_tls: boolean;
+  to: string;
+  from: string;
+}
diff --git a/src/ServicePulse.Host/vue/src/router/index.js b/src/ServicePulse.Host/vue/src/router/index.ts
similarity index 61%
rename from src/ServicePulse.Host/vue/src/router/index.js
rename to src/ServicePulse.Host/vue/src/router/index.ts
index 802dc5c3b5..7328bdf2f1 100644
--- a/src/ServicePulse.Host/vue/src/router/index.js
+++ b/src/ServicePulse.Host/vue/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory } from "vue-router";
-import DashboardView from "../views/DashboardView.vue";
-import FailedMessagesView from "../views/FailedMessagesView.vue";
-import ConfigurationView from "../views/ConfigurationView.vue";
+import DashboardView from "@/views/DashboardView.vue";
+import FailedMessagesView from "@/views/FailedMessagesView.vue";
+import ConfigurationView from "@/views/ConfigurationView.vue";
 
 const router = createRouter({
   history: createWebHashHistory(window.defaultConfig.base_url),
@@ -28,40 +28,40 @@ const router = createRouter({
         {
           name: "failed-messages",
           path: "",
-          component: () => import("../components/failedmessages/FailedMessageGroups.vue"),
+          component: () => import("@/components/failedmessages/FailedMessageGroups.vue"),
         },
         {
           path: "all-failed-messages",
-          component: () => import("../components/failedmessages/AllFailedMessages.vue"),
+          component: () => import("@/components/failedmessages/AllFailedMessages.vue"),
         },
         {
           path: "deleted-message-groups",
-          component: () => import("../components/failedmessages/DeletedMessageGroups.vue"),
+          component: () => import("@/components/failedmessages/DeletedMessageGroups.vue"),
         },
         {
           path: "all-deleted-messages",
-          component: () => import("../components/failedmessages/AllDeletedMessages.vue"),
+          component: () => import("@/components/failedmessages/AllDeletedMessages.vue"),
         },
         {
           path: "pending-retries",
-          component: () => import("../components/failedmessages/PendingRetries.vue"),
+          component: () => import("@/components/failedmessages/PendingRetries.vue"),
         },
         {
           name: "message-groups",
           path: "group/:groupId",
-          component: () => import("../components/failedmessages/AllFailedMessages.vue"),
+          component: () => import("@/components/failedmessages/AllFailedMessages.vue"),
         },
         {
           name: "deleted-message-groups",
           path: "deleted-messages/group/:groupId",
-          component: () => import("../components/failedmessages/AllDeletedMessages.vue"),
+          component: () => import("@/components/failedmessages/AllDeletedMessages.vue"),
         },
       ],
     },
     {
       path: "/failed-messages/message/:id",
       name: "message",
-      component: () => import("../components/failedmessages/MessageView.vue"),
+      component: () => import("@/components/failedmessages/MessageView.vue"),
       meta: {
         title: "Message • ServicePulse",
       },
@@ -80,27 +80,27 @@ const router = createRouter({
         {
           name: "license",
           path: "",
-          component: () => import("../components/configuration/PlatformLicense.vue"),
+          component: () => import("@/components/configuration/PlatformLicense.vue"),
         },
         {
           name: "health-check-notifications",
           path: "health-check-notifications",
-          component: () => import("../components/configuration/HealthCheckNotifications.vue"),
+          component: () => import("@/components/configuration/HealthCheckNotifications.vue"),
         },
         {
           name: "retry-redirects",
           path: "retry-redirects",
-          component: () => import("../components/configuration/RetryRedirects.vue"),
+          component: () => import("@/components/configuration/RetryRedirects.vue"),
         },
         {
           name: "connections",
           path: "connections",
-          component: () => import("../components/configuration/PlatformConnections.vue"),
+          component: () => import("@/components/configuration/PlatformConnections.vue"),
         },
         {
           name: "endpoint-connection",
           path: "endpoint-connection",
-          component: () => import("../components/configuration/EndpointConnection.vue"),
+          component: () => import("@/components/configuration/EndpointConnection.vue"),
         },
       ],
     },
@@ -109,7 +109,7 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  document.title = to.meta.title || "ServicePulse";
+  document.title = `${to.meta.title} || "ServicePulse"`;
   next();
 });
 
diff --git a/src/ServicePulse.Host/vue/src/views/DashboardView.vue b/src/ServicePulse.Host/vue/src/views/DashboardView.vue
index 34a48551b5..5506d2800e 100644
--- a/src/ServicePulse.Host/vue/src/views/DashboardView.vue
+++ b/src/ServicePulse.Host/vue/src/views/DashboardView.vue
@@ -4,7 +4,7 @@ import EventItemShort from "../components/EventItemShort.vue";
 import LicenseExpired from "../components/LicenseExpired.vue";
 import ServiceControlNotAvailable from "../components/ServiceControlNotAvailable.vue";
 import { connectionState, stats } from "../composables/serviceServiceControl";
-import { licenseStatus } from "./../composables/serviceLicense";
+import { licenseStatus } from "../composables/serviceLicense";
 </script>
 
 <template>
diff --git a/src/ServicePulse.Host/vue/src/views/FailedMessagesView.vue b/src/ServicePulse.Host/vue/src/views/FailedMessagesView.vue
index 9cd89e2e05..e32cec2333 100644
--- a/src/ServicePulse.Host/vue/src/views/FailedMessagesView.vue
+++ b/src/ServicePulse.Host/vue/src/views/FailedMessagesView.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { RouterLink, RouterView, useRoute } from "vue-router";
-import { licenseStatus } from "./../composables/serviceLicense";
+import { licenseStatus } from "../composables/serviceLicense";
 import { connectionState, stats } from "../composables/serviceServiceControl";
 import LicenseExpired from "../components/LicenseExpired.vue";
 

From 3621b959eded9eb04081a92561680a64f77064ca Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 7 Feb 2024 08:17:23 +1000
Subject: [PATCH 2/6] Fixed router meta

Had to declare a definitions file, see https://router.vuejs.org/guide/advanced/meta.html#TypeScript
---
 src/ServicePulse.Host/vue/src/router/index.ts      |  2 +-
 .../vue/src/router/vue-router.d.ts                 | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/ServicePulse.Host/vue/src/router/vue-router.d.ts

diff --git a/src/ServicePulse.Host/vue/src/router/index.ts b/src/ServicePulse.Host/vue/src/router/index.ts
index 7328bdf2f1..a87a1001be 100644
--- a/src/ServicePulse.Host/vue/src/router/index.ts
+++ b/src/ServicePulse.Host/vue/src/router/index.ts
@@ -109,7 +109,7 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  document.title = `${to.meta.title} || "ServicePulse"`;
+  document.title = to.meta.title || "ServicePulse";
   next();
 });
 
diff --git a/src/ServicePulse.Host/vue/src/router/vue-router.d.ts b/src/ServicePulse.Host/vue/src/router/vue-router.d.ts
new file mode 100644
index 0000000000..5d102b1880
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/router/vue-router.d.ts
@@ -0,0 +1,14 @@
+// This can be directly added to any of your `.ts` files like `router.ts`
+// It can also be added to a `.d.ts` file. Make sure it's included in
+// project's tsconfig.json "files"
+import "vue-router";
+
+// To ensure it is treated as a module, add at least one `export` statement
+export {};
+
+declare module "vue-router" {
+  interface RouteMeta {
+    // is optional
+    title?: string;
+  }
+}

From d9ce78d714cfe725bd51b3ac2e1d25d675eefb44 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 7 Feb 2024 08:17:46 +1000
Subject: [PATCH 3/6] Using nulls

---
 .../composables/serviceServiceControlUrls.ts  | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.ts b/src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.ts
index b3a73a91b3..99a3157992 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.ts
+++ b/src/ServicePulse.Host/vue/src/composables/serviceServiceControlUrls.ts
@@ -1,10 +1,10 @@
 import { type Ref, ref } from "vue";
 
-export const serviceControlUrl = ref<string>();
-export const monitoringUrl = ref<string>();
+export const serviceControlUrl = ref<string | null>();
+export const monitoringUrl = ref<string | null>();
 
 export function useIsMonitoringDisabled() {
-  return monitoringUrl.value === undefined || monitoringUrl.value === "" || monitoringUrl.value === "!";
+  return monitoringUrl.value == null || monitoringUrl.value === "" || monitoringUrl.value === "!";
 }
 
 export function useIsMonitoringEnabled() {
@@ -24,27 +24,27 @@ export async function useTypedFetchFromServiceControl<T>(suffix: string): Promis
 
 export function useFetchFromMonitoring(suffix: string) {
   if (useIsMonitoringDisabled()) {
-    return Promise.resolve(undefined);
+    return Promise.resolve(null);
   }
   return fetch(monitoringUrl.value + suffix);
 }
 
-export function usePostToServiceControl(suffix: string, payload: object | undefined = undefined) {
+export function usePostToServiceControl(suffix: string, payload: object | null = null) {
   const requestOptions: RequestInit = {
     method: "POST",
   };
-  if (payload !== undefined) {
+  if (payload != null) {
     requestOptions.headers = { "Content-Type": "application/json" };
     requestOptions.body = JSON.stringify(payload);
   }
   return fetch(serviceControlUrl.value + suffix, requestOptions);
 }
 
-export function usePutToServiceControl(suffix: string, payload: object) {
+export function usePutToServiceControl(suffix: string, payload: object | null) {
   const requestOptions: RequestInit = {
     method: "PUT",
   };
-  if (payload !== undefined) {
+  if (payload != null) {
     requestOptions.headers = { "Content-Type": "application/json" };
     requestOptions.body = JSON.stringify(payload);
   }
@@ -58,11 +58,11 @@ export function useDeleteFromServiceControl(suffix: string) {
   return fetch(serviceControlUrl.value + suffix, requestOptions);
 }
 
-export function usePatchToServiceControl(suffix: string, payload: object) {
+export function usePatchToServiceControl(suffix: string, payload: object | null) {
   const requestOptions: RequestInit = {
     method: "PATCH",
   };
-  if (payload !== undefined) {
+  if (payload != null) {
     requestOptions.headers = { "Content-Type": "application/json" };
     requestOptions.body = JSON.stringify(payload);
   }
@@ -79,7 +79,7 @@ export function useServiceControlUrls() {
     window.localStorage.setItem("scu", serviceControlUrl.value);
     console.debug(`ServiceControl Url found in QS and stored in local storage: ${serviceControlUrl.value}`);
   } else if (window.localStorage.getItem("scu")) {
-    serviceControlUrl.value = window.localStorage.getItem("scu") || undefined;
+    serviceControlUrl.value = window.localStorage.getItem("scu");
     console.debug(`ServiceControl Url, not in QS, found in local storage: ${serviceControlUrl.value}`);
   } else if (window.defaultConfig && window.defaultConfig.service_control_url) {
     serviceControlUrl.value = window.defaultConfig.service_control_url;
@@ -93,7 +93,7 @@ export function useServiceControlUrls() {
     window.localStorage.setItem("mu", monitoringUrl.value);
     console.debug(`Monitoring Url found in QS and stored in local storage: ${monitoringUrl.value}`);
   } else if (window.localStorage.getItem("mu")) {
-    monitoringUrl.value = window.localStorage.getItem("mu") || undefined;
+    monitoringUrl.value = window.localStorage.getItem("mu");
     console.debug(`Monitoring Url, not in QS, found in local storage: ${monitoringUrl.value}`);
   } else if (window.defaultConfig && window.defaultConfig.monitoring_urls && window.defaultConfig.monitoring_urls.length) {
     monitoringUrl.value = window.defaultConfig.monitoring_urls[0];
@@ -122,7 +122,7 @@ export function updateServiceControlUrls(newServiceControlUrl: Ref<string>, newM
   window.localStorage.removeItem("scu");
   window.localStorage.removeItem("mu");
 
-  let newSearch = "?scu=" + newServiceControlUrl.value + "&mu=" + newMonitoringUrl.value;
+  const newSearch = `?scu=${newServiceControlUrl.value}&mu=${newMonitoringUrl.value}`;
   console.debug("updateConnections - new query string: ", newSearch);
   window.location.search = newSearch;
 }
@@ -148,11 +148,7 @@ function getParams() {
 }
 
 function getParameter(params: Param[], key: string) {
-  if (params) {
-    return params.find((param) => {
-      return param.name === key;
-    });
-  }
-
-  return undefined;
+  return params.find((param) => {
+    return param.name === key;
+  });
 }

From 5d19b6974285f07f7a9a181af3407b40152cce22 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 7 Feb 2024 08:32:12 +1000
Subject: [PATCH 4/6] A few more fixes with nulls

---
 .../vue/src/components/TimeSince.vue                  | 11 ++++-------
 .../vue/src/composables/serviceSemVer.ts              |  6 +++---
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/ServicePulse.Host/vue/src/components/TimeSince.vue b/src/ServicePulse.Host/vue/src/components/TimeSince.vue
index 3d44bf5ccd..967ad56fb8 100644
--- a/src/ServicePulse.Host/vue/src/components/TimeSince.vue
+++ b/src/ServicePulse.Host/vue/src/components/TimeSince.vue
@@ -2,12 +2,9 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import moment from "moment";
 
-const props = defineProps({
-  dateUtc: String,
-  default: function () {
-    return "0001-01-01T00:00:00";
-  },
-});
+const emptyDate = "0001-01-01T00:00:00";
+
+const props = withDefaults(defineProps<{ dateUtc: string }>(), { dateUtc: emptyDate });
 
 let interval: number | undefined = undefined;
 
@@ -15,7 +12,7 @@ const title = ref(),
   text = ref();
 
 function updateText() {
-  if (props.dateUtc !== "0001-01-01T00:00:00" && props.dateUtc !== undefined) {
+  if (props.dateUtc != null && props.dateUtc !== emptyDate) {
     const m = moment.utc(props.dateUtc);
     text.value = m.fromNow();
     title.value = m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceSemVer.ts b/src/ServicePulse.Host/vue/src/composables/serviceSemVer.ts
index 30d68de963..eb4e6820a6 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceSemVer.ts
+++ b/src/ServicePulse.Host/vue/src/composables/serviceSemVer.ts
@@ -41,7 +41,7 @@ export function useIsSupported(currentVersion: string, minSupportedVersion: stri
 }
 
 interface SemVer {
-  semver: string | undefined;
+  semver: string | null;
   version: string;
   major: number;
   minor: number;
@@ -50,7 +50,7 @@ interface SemVer {
   build: string;
 }
 
-function parse(version: string): SemVer | null {
+function parse(version: string) {
   // semver, major, minor, patch
   // https://github.com/mojombo/semver/issues/32
   // https://github.com/isaacs/node-semver/issues/10
@@ -65,7 +65,7 @@ function parse(version: string): SemVer | null {
 
   return 0 === m.length
     ? null
-    : {
+    : <SemVer>{
         semver: m[0],
         version: m[1],
         major: defaultToZero(m[2]),

From a62a8f226922ccb4eb35a16a1a1ab970c506c74e Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 7 Feb 2024 08:51:31 +1000
Subject: [PATCH 5/6] Refactor based on feedback

---
 .../vue/src/composables/serviceLicense.ts     | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts b/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
index 9ea4b143d1..58f36dc95b 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
+++ b/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
@@ -16,10 +16,10 @@ const trialExpiring =
   '<div class="license-warning"><strong>Non-production development license expiring</strong><div>Your non-production development license will expire soon. To continue using the Particular Service Platform you\'ll need to extend your license.</div><a href="http://particular.net/extend-your-trial?p=servicepulse" class="btn btn-license-warning"><i class="fa fa-external-link-alt"></i> Extend your license</a><a href="#/configuration" class="btn btn-license-warning-light">View license details</a></div>';
 
 interface License extends LicenseInfo {
-  licenseEdition?: ComputedRef<string>;
-  formattedExpirationDate?: ComputedRef<string>;
-  formattedUpgradeProtectionExpiration?: ComputedRef<string>;
-  formattedInstanceName?: ComputedRef<string>;
+  licenseEdition: ComputedRef<string>;
+  formattedExpirationDate: ComputedRef<string>;
+  formattedUpgradeProtectionExpiration: ComputedRef<string>;
+  formattedInstanceName: ComputedRef<string>;
 }
 
 const emptyLicense: License = {
@@ -32,9 +32,21 @@ const emptyLicense: License = {
   registered_to: "",
   status: "",
   license_status: LicenseStatus.Unavailable,
+  licenseEdition: computed(() => {
+    return license.license_type && license.edition ? ", " + license.edition : "";
+  }),
+  formattedInstanceName: computed(() => {
+    return license.instance_name || "Upgrade ServiceControl to v3.4.0+ to see more information about this license";
+  }),
+  formattedExpirationDate: computed(() => {
+    return license.expiration_date ? new Date(license.expiration_date.replace("Z", "")).toLocaleDateString() : "";
+  }),
+  formattedUpgradeProtectionExpiration: computed(() => {
+    return license.upgrade_protection_expiration ? new Date(license.upgrade_protection_expiration.replace("Z", "")).toLocaleDateString() : "";
+  }),
 };
 
-export let license = reactive<License>(emptyLicense);
+export const license = reactive<License>(emptyLicense);
 
 export const licenseStatus = reactive({
   isSubscriptionLicense: false,
@@ -61,19 +73,17 @@ export async function useLicense() {
     }
   });
 
-  license = await getLicense();
-  license.licenseEdition = computed(() => {
-    return license.license_type && license.edition ? ", " + license.edition : "";
-  }).value;
-  license.formattedInstanceName = computed(() => {
-    return license.instance_name || "Upgrade ServiceControl to v3.4.0+ to see more information about this license";
-  }).value;
-  license.formattedExpirationDate = computed(() => {
-    return license.expiration_date ? new Date(license.expiration_date.replace("Z", "")).toLocaleDateString() : "";
-  }).value;
-  license.formattedUpgradeProtectionExpiration = computed<string>(() => {
-    return license.upgrade_protection_expiration ? new Date(license.upgrade_protection_expiration.replace("Z", "")).toLocaleDateString() : "";
-  }).value;
+  const lic = await getLicense();
+  license.license_type = lic.license_type;
+  license.expiration_date = lic.expiration_date;
+  license.trial_license = lic.trial_license;
+  license.edition = lic.edition;
+  license.license_status = lic.license_status;
+  license.instance_name = lic.instance_name;
+  license.registered_to = lic.registered_to;
+  license.status = lic.status;
+  license.upgrade_protection_expiration = lic.upgrade_protection_expiration;
+
   licenseStatus.isSubscriptionLicense = isSubscriptionLicense(license);
   licenseStatus.isUpgradeProtectionLicense = isUpgradeProtectionLicense(license);
   licenseStatus.isTrialLicense = license.trial_license;

From be0a7fb4ac2e69ff74a470d1f74808bf7352a66f Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 7 Feb 2024 09:30:02 +1000
Subject: [PATCH 6/6] Added skipped functions back to formatter

---
 .../vue/src/composables/formatter.ts          | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/src/ServicePulse.Host/vue/src/composables/formatter.ts b/src/ServicePulse.Host/vue/src/composables/formatter.ts
index 24d827a07a..e2a7e53385 100644
--- a/src/ServicePulse.Host/vue/src/composables/formatter.ts
+++ b/src/ServicePulse.Host/vue/src/composables/formatter.ts
@@ -1,6 +1,59 @@
+import moment from "moment";
+
+const secondDuration = moment.duration(10 * 1000);
+const minuteDuration = moment.duration(60 * 1000);
+const hourDuration = moment.duration(60 * 1000); //this ensures that we never use minute formatting
+const dayDuration = moment.duration(24 * 60 * 60 * 1000);
+
+export function useFormatTime(value: string) {
+  const duration = moment.duration(value);
+  const time = { value: "0", unit: "" };
+  const asUtc = moment.utc(duration.asMilliseconds());
+
+  if (duration >= dayDuration) {
+    time.value = asUtc.format("D [d] h [hr]");
+  } else if (duration >= hourDuration) {
+    time.value = asUtc.format("HH:mm");
+    time.unit = "hr";
+  } else if (duration >= minuteDuration) {
+    time.value = asUtc.format("mm:ss");
+    time.unit = "min";
+  } else if (duration >= secondDuration) {
+    time.value = asUtc.format("ss");
+    time.unit = "sec";
+  } else {
+    time.value = asUtc.format("s,SSS");
+    time.unit = "ms";
+  }
+
+  return time;
+}
+
 export function useGetDayDiffFromToday(value: string) {
   const today = new Date();
   today.setHours(0, 0, 0, 0);
   const diff = new Date(value.replace("Z", "")).getTime() - today.getTime();
   return Math.round(diff / 1000 / 60 / 60 / 24);
 }
+
+export function useFormatLargeNumber(value: string, decimals: number) {
+  const suffixes = ["k", "M", "G", "T", "P", "E"];
+
+  const num = Number(value);
+
+  if (isNaN(num)) {
+    return null;
+  }
+
+  if (num < 1000000) {
+    return round(num, decimals);
+  }
+
+  const exp = Math.floor(Math.log(num) / Math.log(1000));
+
+  return round(num / Math.pow(1000, exp), decimals) + suffixes[exp - 1];
+}
+
+function round(num: number, decimals: number) {
+  return Math.round(num + Number(`e+${decimals}`)) + Number(`e-${decimals}`);
+}