Migrating composables and a few vue component

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>

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;

src/ServicePulse.Host/vue/src/components/TimeSince.vue

@@ -1,21 +1,18 @@
-<script setup>
+<script setup lang="ts">
 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 = null;
+let interval: number | undefined = undefined;
 
 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)";
@@ -26,14 +23,14 @@ function updateText() {
 }
 
 onMounted(() => {
-  interval = setInterval(function () {
+  interval = window.setInterval(function () {
     updateText();
   }, 5000);
 
   updateText();
 });
 
-onUnmounted(() => clearInterval(interval));
+onUnmounted(() => window.clearInterval(interval));
 </script>
 
 <template>

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.

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>

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

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;
+}

src/ServicePulse.Host/vue/src/composables/fileDownloadCreator.js → 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");

src/ServicePulse.Host/vue/src/composables/formatter.ts

@@ -0,0 +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}`);
+}

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;
+  }
+}