From 843554f03ee27cda1a5ae32140b53c4a5149a763 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Thu, 8 Feb 2024 15:39:09 +1000
Subject: [PATCH 1/7] More vue converted to TypeScript

---
 .../vue/src/components/BusyIndicator.vue      |  2 +-
 .../vue/src/components/ConfirmDialog.vue      | 14 ++---
 .../vue/src/components/DashboardItem.vue      | 12 ++--
 .../vue/src/components/DataView.vue           | 62 +++++++------------
 .../vue/src/components/EventItemShort.vue     |  9 +--
 .../vue/src/components/EventLogItem.vue       | 34 +++++-----
 .../vue/src/components/ExclamationMark.vue    | 17 +++--
 .../vue/src/components/ItemsPerPage.vue       | 19 +++---
 .../vue/src/components/LicenseExpired.vue     |  2 +-
 .../vue/src/components/NoData.vue             | 10 +--
 .../vue/src/components/PageFooter.vue         |  6 +-
 .../vue/src/components/PageHeader.vue         |  9 +--
 .../vue/src/components/PaginationStrip.vue    | 40 ++++++------
 .../components/ServiceControlNotAvailable.vue |  2 +-
 .../vue/src/components/ToastPopup.vue         | 24 +++----
 .../vue/src/composables/LicenseStatus.ts      |  5 ++
 .../vue/src/composables/serviceLicense.ts     | 10 +--
 .../vue/src/composables/toast.ts              |  2 +-
 .../vue/src/resources/EventLogItem.ts         |  9 ++-
 .../vue/src/views/DashboardView.vue           | 14 ++---
 .../vue/src/views/EventsView.vue              | 17 ++---
 21 files changed, 163 insertions(+), 156 deletions(-)
 create mode 100644 src/ServicePulse.Host/vue/src/composables/LicenseStatus.ts

diff --git a/src/ServicePulse.Host/vue/src/components/BusyIndicator.vue b/src/ServicePulse.Host/vue/src/components/BusyIndicator.vue
index edd77df854..ff80337874 100644
--- a/src/ServicePulse.Host/vue/src/components/BusyIndicator.vue
+++ b/src/ServicePulse.Host/vue/src/components/BusyIndicator.vue
@@ -1,4 +1,4 @@
-<script setup></script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="row">
diff --git a/src/ServicePulse.Host/vue/src/components/ConfirmDialog.vue b/src/ServicePulse.Host/vue/src/components/ConfirmDialog.vue
index e4fea878d6..4a8ab33809 100644
--- a/src/ServicePulse.Host/vue/src/components/ConfirmDialog.vue
+++ b/src/ServicePulse.Host/vue/src/components/ConfirmDialog.vue
@@ -1,14 +1,14 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted } from "vue";
 
 const emit = defineEmits(["confirm", "cancel"]);
 
-const settings = defineProps({
-  heading: String,
-  body: String,
-  secondParagraph: String,
-  hideCancel: Boolean,
-});
+const settings = defineProps<{
+  heading: string;
+  body: string;
+  secondParagraph: string;
+  hideCancel: boolean;
+}>();
 
 function confirm() {
   emit("confirm", settings);
diff --git a/src/ServicePulse.Host/vue/src/components/DashboardItem.vue b/src/ServicePulse.Host/vue/src/components/DashboardItem.vue
index 0985c0d369..016e1ecb37 100644
--- a/src/ServicePulse.Host/vue/src/components/DashboardItem.vue
+++ b/src/ServicePulse.Host/vue/src/components/DashboardItem.vue
@@ -1,9 +1,9 @@
-<script setup>
-const props = defineProps({
-  counter: Number,
-  url: String,
-  iconClass: String,
-});
+<script setup lang="ts">
+const props = defineProps<{
+  counter: number;
+  url: string;
+  iconClass: string;
+}>();
 </script>
 
 <template>
diff --git a/src/ServicePulse.Host/vue/src/components/DataView.vue b/src/ServicePulse.Host/vue/src/components/DataView.vue
index 6860e9a607..bcaef36fb9 100644
--- a/src/ServicePulse.Host/vue/src/components/DataView.vue
+++ b/src/ServicePulse.Host/vue/src/components/DataView.vue
@@ -1,33 +1,26 @@
-<script setup>
+<script setup lang="ts" generic="T">
 import { onMounted, onUnmounted, ref, watch } from "vue";
-import { useFetchFromServiceControl } from "../composables/serviceServiceControlUrls";
+// eslint-disable-next-line vue/prefer-import-from-vue
+import type { UnwrapRefSimple } from "@vue/reactivity";
+import { useTypedFetchFromServiceControl } from "../composables/serviceServiceControlUrls";
 import ItemsPerPage from "../components/ItemsPerPage.vue";
 import PaginationStrip from "../components/PaginationStrip.vue";
-const props = defineProps({
-  apiUrl: String,
-  itemsPerPageOptions: {
-    type: Array,
-    default: () => [20, 35, 50, 75],
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 50,
-  },
-  autoRefreshSeconds: {
-    type: Number,
-  },
-  showPagination: {
-    type: Boolean,
-    default: true,
-  },
-  showItemsPerPage: {
-    type: Boolean,
-    default: false,
-  },
-});
 
-const refreshTimer = ref();
-const items = ref([]);
+const props = withDefaults(
+  defineProps<{
+    itemsType: T[];
+    apiUrl: string;
+    itemsPerPageOptions?: number[];
+    itemsPerPage?: number;
+    autoRefreshSeconds: number;
+    showPagination?: boolean;
+    showItemsPerPage?: boolean;
+  }>(),
+  { itemsPerPageOptions: () => [20, 35, 50, 75], itemsPerPage: 50, showPagination: true, showItemsPerPage: false }
+);
+
+const refreshTimer = ref<number>();
+const items = ref<T[]>([]);
 const pageNumber = ref(1);
 const itemsPerPage = ref(props.itemsPerPage);
 const totalCount = ref(0);
@@ -44,15 +37,10 @@ watch(itemsPerPage, () => loadData());
 watch(pageNumber, () => loadData());
 
 async function loadData() {
-  try {
-    const response = await useFetchFromServiceControl(`${props.apiUrl}?page=${pageNumber.value}&per_page=${itemsPerPage.value}`);
-    if (response.ok) {
-      totalCount.value = parseInt(response.headers.get("Total-Count"));
-      const data = await response.json();
-      items.value = data;
-    }
-  } catch (error) {
-    console.log(error);
+  const [response, data] = await useTypedFetchFromServiceControl<T[]>(`${props.apiUrl}?page=${pageNumber.value}&per_page=${itemsPerPage.value}`);
+  if (response.ok) {
+    totalCount.value = parseInt(response.headers.get("Total-Count") ?? "0");
+    items.value = data as UnwrapRefSimple<T>[];
   }
 }
 
@@ -65,9 +53,7 @@ function startRefreshTimer() {
 }
 
 function stopRefreshTimer() {
-  if (refreshTimer.value) {
-    clearInterval(refreshTimer.value);
-  }
+  clearInterval(refreshTimer.value);
 }
 
 onMounted(() => {
diff --git a/src/ServicePulse.Host/vue/src/components/EventItemShort.vue b/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
index 579d4c9be2..22ce6b719d 100644
--- a/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
+++ b/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
@@ -1,12 +1,13 @@
-<script setup>
-import DataView from "../components/DataView.vue";
-import EventLogItem from "../components/EventLogItem.vue";
+<script setup lang="ts">
+import DataView from "@/components/DataView.vue";
+import EventLogItem from "@/components/EventLogItem.vue";
+import type EventLogItemType from "@/resources/EventLogItem";
 import { RouterLink } from "vue-router";
 </script>
 
 <template>
   <div class="events">
-    <DataView api-url="eventlogitems" :auto-refresh-seconds="5" :itemsPerPage="10" :show-pagination="false">
+    <DataView api-url="eventlogitems" :items-type="[] as EventLogItemType[]" :auto-refresh-seconds="5" :itemsPerPage="10" :show-pagination="false">
       <template #data="items">
         <div class="col-12">
           <h6>Last 10 events</h6>
diff --git a/src/ServicePulse.Host/vue/src/components/EventLogItem.vue b/src/ServicePulse.Host/vue/src/components/EventLogItem.vue
index 3cd766508b..31ef3465a4 100644
--- a/src/ServicePulse.Host/vue/src/components/EventLogItem.vue
+++ b/src/ServicePulse.Host/vue/src/components/EventLogItem.vue
@@ -1,25 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import { useRouter } from "vue-router";
 import TimeSince from "../components/TimeSince.vue";
+import type EventLogItem from "@/resources/EventLogItem";
+import { Severity } from "@/resources/EventLogItem";
 
-defineProps({
-  eventLogItem: Object,
-});
+defineProps<{ eventLogItem: EventLogItem }>();
 const router = useRouter();
 
-function navigateToEvent(eventLogItem) {
+function navigateToEvent(eventLogItem: EventLogItem) {
   switch (eventLogItem.category) {
     case "Endpoints":
       router.push({ name: "endpoint-connection" });
       break;
     case "HeartbeatMonitoring":
-      window.location = "/a/#/endpoints";
+      window.location.assign("/a/#/endpoints");
       break;
     case "CustomChecks":
-      window.location = "/a/#/custom-checks";
+      window.location.assign("/a/#/custom-checks");
       break;
     case "EndpointControl":
-      window.location = "/a/#/endpoints";
+      window.location.assign("/a/#/endpoints");
       break;
     case "MessageFailures":
       if (eventLogItem.related_to?.length && eventLogItem.related_to[0].search("message") > 0) {
@@ -39,10 +39,10 @@ function navigateToEvent(eventLogItem) {
   }
 }
 
-function iconClasses(eventItem) {
+function iconClasses(eventItem: EventLogItem) {
   return {
-    normal: eventItem.severity === "info",
-    danger: eventItem.severity === "error",
+    normal: eventItem.severity === Severity.Info,
+    danger: eventItem.severity === Severity.Error,
     "fa-heartbeat": eventItem.category === "Endpoints" || eventItem.category === "EndpointControl" || eventItem.category === "HeartbeatMonitoring",
     "fa-check": eventItem.category === "CustomChecks",
     "fa-envelope": eventItem.category === "MessageFailures" || eventItem.category === "Recoverability",
@@ -51,12 +51,12 @@ function iconClasses(eventItem) {
   };
 }
 
-function iconSubClasses(eventItem) {
+function iconSubClasses(eventItem: EventLogItem) {
   return {
-    "fa-times fa-error": (eventItem.severity === "error" || eventItem.category === "MessageRedirects") && eventItem.severity === "error",
-    "fa-pencil": (eventItem.severity === "error" || eventItem.category === "MessageRedirects") && eventItem.category === "MessageRedirects" && eventItem.event_type === "MessageRedirectChanged",
-    "fa-plus": (eventItem.severity === "error" || eventItem.category === "MessageRedirects") && eventItem.category === "MessageRedirects" && eventItem.event_type === "MessageRedirectCreated",
-    "fa-trash": (eventItem.severity === "error" || eventItem.category === "MessageRedirects") && eventItem.category === "MessageRedirects" && eventItem.event_type === "MessageRedirectRemoved",
+    "fa-times fa-error": (eventItem.severity === Severity.Error || eventItem.category === "MessageRedirects") && eventItem.severity === Severity.Error,
+    "fa-pencil": (eventItem.severity === Severity.Error || eventItem.category === "MessageRedirects") && eventItem.category === "MessageRedirects" && eventItem.event_type === "MessageRedirectChanged",
+    "fa-plus": (eventItem.severity === Severity.Error || eventItem.category === "MessageRedirects") && eventItem.category === "MessageRedirects" && eventItem.event_type === "MessageRedirectCreated",
+    "fa-trash": (eventItem.severity === Severity.Error || eventItem.category === "MessageRedirects") && eventItem.category === "MessageRedirects" && eventItem.event_type === "MessageRedirectRemoved",
   };
 }
 </script>
@@ -68,7 +68,7 @@ function iconSubClasses(eventItem) {
         <div class="col-1">
           <span class="fa-stack fa-lg">
             <i class="fa fa-stack-2x" :class="iconClasses(eventLogItem)" />
-            <i v-if="eventLogItem.severity === 'error' || eventLogItem.category === 'MessageRedirects'" class="fa fa-o fa-stack-1x fa-inverse" :class="iconSubClasses(eventLogItem)" />
+            <i v-if="eventLogItem.severity === Severity.Error || eventLogItem.category === 'MessageRedirects'" class="fa fa-o fa-stack-1x fa-inverse" :class="iconSubClasses(eventLogItem)" />
           </span>
         </div>
         <div class="col-9">
diff --git a/src/ServicePulse.Host/vue/src/components/ExclamationMark.vue b/src/ServicePulse.Host/vue/src/components/ExclamationMark.vue
index b87975667e..049960f5f9 100644
--- a/src/ServicePulse.Host/vue/src/components/ExclamationMark.vue
+++ b/src/ServicePulse.Host/vue/src/components/ExclamationMark.vue
@@ -1,11 +1,16 @@
-<script setup>
-const props = defineProps({
-  type: String,
-});
+<script setup lang="ts">
+import { LicenseWarningLevel } from "@/composables/LicenseStatus";
+
+const props = withDefaults(
+  defineProps<{
+    type?: LicenseWarningLevel;
+  }>(),
+  { type: LicenseWarningLevel.None }
+);
 </script>
 
 <template>
-  <template v-if="props.type">
-    <span class="fa fa-exclamation-triangle" :class="type"></span>
+  <template v-if="props.type !== LicenseWarningLevel.None">
+    <span class="fa fa-exclamation-triangle" :class="props.type"></span>
   </template>
 </template>
diff --git a/src/ServicePulse.Host/vue/src/components/ItemsPerPage.vue b/src/ServicePulse.Host/vue/src/components/ItemsPerPage.vue
index 9c9c02c611..77b3e9240b 100644
--- a/src/ServicePulse.Host/vue/src/components/ItemsPerPage.vue
+++ b/src/ServicePulse.Host/vue/src/components/ItemsPerPage.vue
@@ -1,15 +1,12 @@
-<script setup>
-defineProps({
-  options: {
-    type: Array,
-    default: () => [20, 35, 50, 75],
-  },
-});
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    options: number[];
+  }>(),
+  { options: () => [20, 35, 50, 75] }
+);
 
-const current = defineModel({
-  type: Number,
-  default: 50,
-});
+const current = defineModel<number>({ default: 50 });
 </script>
 
 <template>
diff --git a/src/ServicePulse.Host/vue/src/components/LicenseExpired.vue b/src/ServicePulse.Host/vue/src/components/LicenseExpired.vue
index 79e3a59fa8..1949911eda 100644
--- a/src/ServicePulse.Host/vue/src/components/LicenseExpired.vue
+++ b/src/ServicePulse.Host/vue/src/components/LicenseExpired.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { licenseStatus } from "../composables/serviceLicense";
 </script>
 
diff --git a/src/ServicePulse.Host/vue/src/components/NoData.vue b/src/ServicePulse.Host/vue/src/components/NoData.vue
index a826a5ba97..c89646c2bb 100644
--- a/src/ServicePulse.Host/vue/src/components/NoData.vue
+++ b/src/ServicePulse.Host/vue/src/components/NoData.vue
@@ -1,8 +1,8 @@
-<script setup>
-const props = defineProps({
-  title: String,
-  message: String,
-});
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  message: string;
+}>();
 </script>
 
 <template>
diff --git a/src/ServicePulse.Host/vue/src/components/PageFooter.vue b/src/ServicePulse.Host/vue/src/components/PageFooter.vue
index 945ff5fec0..1bf96de15a 100644
--- a/src/ServicePulse.Host/vue/src/components/PageFooter.vue
+++ b/src/ServicePulse.Host/vue/src/components/PageFooter.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import { connectionState, environment, monitoringConnectionState, newVersions } from "../composables/serviceServiceControl";
 import { monitoringUrl, serviceControlUrl } from "../composables/serviceServiceControlUrls";
@@ -8,11 +8,11 @@ const isMonitoringEnabled = computed(() => {
 });
 
 const scAddressTooltip = computed(() => {
-  return "ServiceControl URL " + serviceControlUrl.value;
+  return `ServiceControl URL ${serviceControlUrl.value}`;
 });
 
 const scMonitoringAddressTooltip = computed(() => {
-  return "Monitoring URL " + monitoringUrl.value;
+  return `Monitoring URL ${monitoringUrl.value}`;
 });
 </script>
 
diff --git a/src/ServicePulse.Host/vue/src/components/PageHeader.vue b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
index 12f9bd1bb8..b95a2137e7 100644
--- a/src/ServicePulse.Host/vue/src/components/PageHeader.vue
+++ b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
@@ -5,6 +5,7 @@ import { connectionState, monitoringConnectionState, stats } from "../composable
 import { useIsMonitoringEnabled } from "../composables/serviceServiceControlUrls";
 import { licenseStatus } from "../composables/serviceLicense";
 import ExclamationMark from "./ExclamationMark.vue";
+import { LicenseWarningLevel } from "@/composables/LicenseStatus.js";
 
 const baseUrl = window.defaultConfig.base_url;
 
@@ -17,10 +18,10 @@ function subIsActive(input, exact) {
 }
 
 const displayWarn = computed(() => {
-  return licenseStatus.warningLevel === "warning";
+  return licenseStatus.warningLevel === LicenseWarningLevel.Warning;
 });
 const displayDanger = computed(() => {
-  return connectionState.unableToConnect || (monitoringConnectionState.unableToConnect && useIsMonitoringEnabled()) || licenseStatus.warningLevel === "danger";
+  return connectionState.unableToConnect || (monitoringConnectionState.unableToConnect && useIsMonitoringEnabled()) || licenseStatus.warningLevel === LicenseWarningLevel.Danger;
 });
 </script>
 
@@ -79,8 +80,8 @@ const displayDanger = computed(() => {
             <RouterLink :to="{ name: 'license' }" exact>
               <i class="fa fa-cog icon-white" title="Configuration"></i>
               <span class="navbar-label">Configuration</span>
-              <exclamation-mark :type="'warning'" v-if="displayWarn" />
-              <exclamation-mark :type="'danger'" v-if="displayDanger" />
+              <exclamation-mark :type="LicenseWarningLevel.Warning" v-if="displayWarn" />
+              <exclamation-mark :type="LicenseWarningLevel.Danger" v-if="displayDanger" />
             </RouterLink>
           </li>
           <li>
diff --git a/src/ServicePulse.Host/vue/src/components/PaginationStrip.vue b/src/ServicePulse.Host/vue/src/components/PaginationStrip.vue
index 1544cb22d4..c7521aab46 100644
--- a/src/ServicePulse.Host/vue/src/components/PaginationStrip.vue
+++ b/src/ServicePulse.Host/vue/src/components/PaginationStrip.vue
@@ -1,25 +1,16 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 
-const props = defineProps({
-  itemsPerPage: {
-    type: Number,
-    required: true,
-  },
-  totalCount: {
-    type: Number,
-    required: true,
-  },
-  pageBuffer: {
-    type: Number,
-    default: 5,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    itemsPerPage: number;
+    totalCount: number;
+    pageBuffer?: number;
+  }>(),
+  { pageBuffer: 5 }
+);
 
-const pageNumber = defineModel({
-  type: Number,
-  required: true,
-});
+const pageNumber = defineModel<number>({ required: true });
 
 const numberOfPages = computed(() => {
   return Math.ceil(props.totalCount / props.itemsPerPage);
@@ -31,8 +22,17 @@ const showPagination = computed(() => {
 
 const doublePageBuffer = computed(() => props.pageBuffer * 2);
 
+interface PageData {
+  label: string;
+  page: number;
+  key: string;
+  class?: {
+    disabled?: boolean;
+    active?: boolean;
+  };
+}
 const pages = computed(() => {
-  const pages = [];
+  const pages: PageData[] = [];
   pages.push({
     label: "Previous",
     page: Math.max(pageNumber.value - 1, 1),
diff --git a/src/ServicePulse.Host/vue/src/components/ServiceControlNotAvailable.vue b/src/ServicePulse.Host/vue/src/components/ServiceControlNotAvailable.vue
index 11224e00ca..eb66757333 100644
--- a/src/ServicePulse.Host/vue/src/components/ServiceControlNotAvailable.vue
+++ b/src/ServicePulse.Host/vue/src/components/ServiceControlNotAvailable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { connectionState } from "./../composables/serviceServiceControl";
 import { serviceControlUrl } from "./../composables/serviceServiceControlUrls";
 </script>
diff --git a/src/ServicePulse.Host/vue/src/components/ToastPopup.vue b/src/ServicePulse.Host/vue/src/components/ToastPopup.vue
index b4262e4367..246835a63b 100644
--- a/src/ServicePulse.Host/vue/src/components/ToastPopup.vue
+++ b/src/ServicePulse.Host/vue/src/components/ToastPopup.vue
@@ -1,14 +1,16 @@
-<script setup>
-const props = defineProps({
-  type: String,
-  title: String,
-  message: String,
-});
+<script setup lang="ts">
+import { TYPE } from "vue-toastification";
+
+const props = defineProps<{
+  type: TYPE;
+  title: string;
+  message: string;
+}>();
 </script>
 
 <template>
   <div>
-    <template v-if="props.type === 'success'">
+    <template v-if="props.type === TYPE.SUCCESS">
       <div class="toast-success">
         <p>
           <strong>{{ props.title }}</strong>
@@ -16,7 +18,7 @@ const props = defineProps({
         <span v-html="props.message"></span>
       </div>
     </template>
-    <template v-if="props.type === 'info'">
+    <template v-if="props.type === TYPE.INFO">
       <div class="toast-info">
         <p>
           <strong>{{ props.title }}</strong>
@@ -24,7 +26,7 @@ const props = defineProps({
         <span v-html="props.message"></span>
       </div>
     </template>
-    <template v-if="props.type === 'error'">
+    <template v-if="props.type === TYPE.ERROR">
       <div class="toast-error">
         <p>
           <strong>{{ props.title }}</strong>
@@ -32,7 +34,7 @@ const props = defineProps({
         <span v-html="props.message"></span>
       </div>
     </template>
-    <template v-if="props.type === 'warning'">
+    <template v-if="props.type === TYPE.WARNING">
       <div class="toast-warning">
         <p>
           <strong>{{ props.title }}</strong>
@@ -40,7 +42,7 @@ const props = defineProps({
         <span v-html="props.message"></span>
       </div>
     </template>
-    <template v-if="props.type === 'default'">
+    <template v-if="props.type === TYPE.DEFAULT">
       <div class="toast-default">
         <p>
           <strong>{{ props.title }}</strong>
diff --git a/src/ServicePulse.Host/vue/src/composables/LicenseStatus.ts b/src/ServicePulse.Host/vue/src/composables/LicenseStatus.ts
new file mode 100644
index 0000000000..47c2e74113
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/composables/LicenseStatus.ts
@@ -0,0 +1,5 @@
+export enum LicenseWarningLevel {
+  None = "none",
+  Warning = "warning",
+  Danger = "danger",
+}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts b/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
index 58f36dc95b..8f9f2131a3 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
+++ b/src/ServicePulse.Host/vue/src/composables/serviceLicense.ts
@@ -5,6 +5,7 @@ import { useShowToast } from "./toast";
 import { TYPE } from "vue-toastification";
 import type LicenseInfo from "@/resources/LicenseInfo";
 import { LicenseStatus } from "@/resources/LicenseInfo";
+import { LicenseWarningLevel } from "@/composables/LicenseStatus";
 
 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>';
@@ -62,7 +63,7 @@ export const licenseStatus = reactive({
   upgradeDaysLeft: "",
   subscriptionDaysLeft: "",
   trialDaysLeft: "",
-  warningLevel: "",
+  warningLevel: LicenseWarningLevel.None,
 });
 
 export async function useLicense() {
@@ -101,9 +102,10 @@ export async function useLicense() {
 }
 
 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 "";
+  if (licenseStatus === "InvalidDueToExpiredTrial" || licenseStatus === "InvalidDueToExpiredSubscription" || licenseStatus === "InvalidDueToExpiredUpgradeProtection") return LicenseWarningLevel.Danger;
+  else if (licenseStatus === "ValidWithExpiringUpgradeProtection" || licenseStatus === "ValidWithExpiringTrial" || licenseStatus === "ValidWithExpiredUpgradeProtection" || licenseStatus === "ValidWithExpiringSubscription")
+    return LicenseWarningLevel.Warning;
+  return LicenseWarningLevel.None;
 }
 
 function isUpgradeProtectionLicense(license: UnwrapNestedRefs<License>) {
diff --git a/src/ServicePulse.Host/vue/src/composables/toast.ts b/src/ServicePulse.Host/vue/src/composables/toast.ts
index 82f8da6bfe..60df39947f 100644
--- a/src/ServicePulse.Host/vue/src/composables/toast.ts
+++ b/src/ServicePulse.Host/vue/src/composables/toast.ts
@@ -1,4 +1,4 @@
-import ToastPopup from "../components/ToastPopup.vue";
+import ToastPopup from "@/components/ToastPopup.vue";
 import { TYPE, useToast } from "vue-toastification";
 
 export function useShowToast(type: TYPE, title: string, message: string, doNotUseTimeout: boolean = false) {
diff --git a/src/ServicePulse.Host/vue/src/resources/EventLogItem.ts b/src/ServicePulse.Host/vue/src/resources/EventLogItem.ts
index 3279299a33..02722b12c5 100644
--- a/src/ServicePulse.Host/vue/src/resources/EventLogItem.ts
+++ b/src/ServicePulse.Host/vue/src/resources/EventLogItem.ts
@@ -1,9 +1,16 @@
 export default interface EventLogItem {
   id: string;
   description: string;
-  severity: string;
+  severity: Severity;
   raised_at: string;
   related_to: string[];
   category: string;
   event_type: string;
 }
+
+export enum Severity {
+  Critical = "critical",
+  Error = "error",
+  Warning = "warning",
+  Info = "info",
+}
diff --git a/src/ServicePulse.Host/vue/src/views/DashboardView.vue b/src/ServicePulse.Host/vue/src/views/DashboardView.vue
index 5506d2800e..0d51949588 100644
--- a/src/ServicePulse.Host/vue/src/views/DashboardView.vue
+++ b/src/ServicePulse.Host/vue/src/views/DashboardView.vue
@@ -1,10 +1,10 @@
-<script setup>
-import DashboardItem from "../components/DashboardItem.vue";
-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";
+<script setup lang="ts">
+import DashboardItem from "@/components/DashboardItem.vue";
+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";
 </script>
 
 <template>
diff --git a/src/ServicePulse.Host/vue/src/views/EventsView.vue b/src/ServicePulse.Host/vue/src/views/EventsView.vue
index cbf8e49e60..9d66f6e9ce 100644
--- a/src/ServicePulse.Host/vue/src/views/EventsView.vue
+++ b/src/ServicePulse.Host/vue/src/views/EventsView.vue
@@ -1,10 +1,11 @@
-<script setup>
-import { licenseStatus } from "../composables/serviceLicense";
-import { connectionState } from "../composables/serviceServiceControl";
-import LicenseExpired from "../components/LicenseExpired.vue";
-import DataView from "../components/DataView.vue";
-import EventLogItem from "../components/EventLogItem.vue";
-import ServiceControlNotAvailable from "../components/ServiceControlNotAvailable.vue";
+<script setup lang="ts">
+import { licenseStatus } from "@/composables/serviceLicense";
+import { connectionState } from "@/composables/serviceServiceControl";
+import LicenseExpired from "@/components/LicenseExpired.vue";
+import DataView from "@/components/DataView.vue";
+import EventLogItem from "@/components/EventLogItem.vue";
+import ServiceControlNotAvailable from "@/components/ServiceControlNotAvailable.vue";
+import type EventLogItemType from "@/resources/EventLogItem";
 </script>
 
 <template>
@@ -13,7 +14,7 @@ import ServiceControlNotAvailable from "../components/ServiceControlNotAvailable
     <ServiceControlNotAvailable />
     <template v-if="connectionState.connected">
       <div class="events events-view">
-        <DataView api-url="eventlogitems" :auto-refresh-seconds="5" :show-items-per-page="true" :items-per-page="20">
+        <DataView api-url="eventlogitems" :items-type="[] as EventLogItemType[]" :auto-refresh-seconds="5" :show-items-per-page="true" :items-per-page="20">
           <template #data="items">
             <div class="row">
               <div class="col-sm-12">

From c46f4fddf8276f4df7c3092d38babaf856b6a948 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Thu, 8 Feb 2024 16:10:39 +1000
Subject: [PATCH 2/7] Wrong import

---
 src/ServicePulse.Host/vue/src/components/PageHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ServicePulse.Host/vue/src/components/PageHeader.vue b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
index b95a2137e7..c1427a54e8 100644
--- a/src/ServicePulse.Host/vue/src/components/PageHeader.vue
+++ b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
@@ -5,7 +5,7 @@ import { connectionState, monitoringConnectionState, stats } from "../composable
 import { useIsMonitoringEnabled } from "../composables/serviceServiceControlUrls";
 import { licenseStatus } from "../composables/serviceLicense";
 import ExclamationMark from "./ExclamationMark.vue";
-import { LicenseWarningLevel } from "@/composables/LicenseStatus.js";
+import { LicenseWarningLevel } from "@/composables/LicenseStatus";
 
 const baseUrl = window.defaultConfig.base_url;
 

From b08e05038a292fbdc371fca49b87f06fddd1e953 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 9 Feb 2024 12:05:15 +1000
Subject: [PATCH 3/7] A few fixes based on feedback

---
 .../vue/src/components/ExclamationMark.vue          |  8 ++++----
 .../vue/src/components/PageHeader.vue               |  4 ++--
 .../vue/src/components/WarningLevel.ts              |  5 +++++
 .../components/configuration/PlatformLicense.vue    |  7 ++++---
 .../configuration/convertToWarningLevel.ts          | 13 +++++++++++++
 .../vue/src/views/ConfigurationView.vue             |  3 ++-
 6 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 src/ServicePulse.Host/vue/src/components/WarningLevel.ts
 create mode 100644 src/ServicePulse.Host/vue/src/components/configuration/convertToWarningLevel.ts

diff --git a/src/ServicePulse.Host/vue/src/components/ExclamationMark.vue b/src/ServicePulse.Host/vue/src/components/ExclamationMark.vue
index 049960f5f9..4af179addc 100644
--- a/src/ServicePulse.Host/vue/src/components/ExclamationMark.vue
+++ b/src/ServicePulse.Host/vue/src/components/ExclamationMark.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { LicenseWarningLevel } from "@/composables/LicenseStatus";
+import { WarningLevel } from "@/components/WarningLevel";
 
 const props = withDefaults(
   defineProps<{
-    type?: LicenseWarningLevel;
+    type: WarningLevel;
   }>(),
-  { type: LicenseWarningLevel.None }
+  { type: WarningLevel.None }
 );
 </script>
 
 <template>
-  <template v-if="props.type !== LicenseWarningLevel.None">
+  <template v-if="props.type !== WarningLevel.None">
     <span class="fa fa-exclamation-triangle" :class="props.type"></span>
   </template>
 </template>
diff --git a/src/ServicePulse.Host/vue/src/components/PageHeader.vue b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
index c1427a54e8..f7b9e17f02 100644
--- a/src/ServicePulse.Host/vue/src/components/PageHeader.vue
+++ b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
@@ -80,8 +80,8 @@ const displayDanger = computed(() => {
             <RouterLink :to="{ name: 'license' }" exact>
               <i class="fa fa-cog icon-white" title="Configuration"></i>
               <span class="navbar-label">Configuration</span>
-              <exclamation-mark :type="LicenseWarningLevel.Warning" v-if="displayWarn" />
-              <exclamation-mark :type="LicenseWarningLevel.Danger" v-if="displayDanger" />
+              <exclamation-mark :type="WarningLevel.Warning" v-if="displayWarn" />
+              <exclamation-mark :type="WarningLevel.Danger" v-if="displayDanger" />
             </RouterLink>
           </li>
           <li>
diff --git a/src/ServicePulse.Host/vue/src/components/WarningLevel.ts b/src/ServicePulse.Host/vue/src/components/WarningLevel.ts
new file mode 100644
index 0000000000..eef486b287
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/components/WarningLevel.ts
@@ -0,0 +1,5 @@
+export enum WarningLevel {
+  None = "none",
+  Warning = "warning",
+  Danger = "danger",
+}
diff --git a/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue b/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
index 2ffeb242b2..fb407cc4ab 100644
--- a/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
+++ b/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
@@ -5,6 +5,7 @@ import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
 import { connectionState } from "@/composables/serviceServiceControl";
 import BusyIndicator from "../BusyIndicator.vue";
 import ExclamationMark from "./../../components/ExclamationMark.vue";
+import convertToWarningLevel from "@/components/configuration/convertToWarningLevel";
 
 // This is needed because the ConfigurationView.vue routerView expects this event.
 // The event is only actually emitted on the RetryRedirects.vue component
@@ -40,7 +41,7 @@ const loading = computed(() => {
                     >
                       {{ license.formattedExpirationDate }}
                       {{ licenseStatus.subscriptionDaysLeft }}
-                      <exclamation-mark :type="licenseStatus.warningLevel" />
+                      <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                     </span>
                     <div class="license-expired-text" v-if="licenseStatus.isPlatformExpired">Your license expired. Please update the license to continue using the Particular Service Platform.</div>
                   </div>
@@ -55,7 +56,7 @@ const loading = computed(() => {
                     >
                       {{ license.formattedExpirationDate }}
                       {{ licenseStatus.trialDaysLeft }}
-                      <exclamation-mark :type="licenseStatus.warningLevel" />
+                      <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                     </span>
                     <div class="license-expired-text" v-if="licenseStatus.isPlatformTrialExpired">Your license expired. To continue using the Particular Service Platform you'll need to extend your license.</div>
                     <div class="license-page-extend-trial" v-if="licenseStatus.isPlatformTrialExpiring && licenseStatus.isPlatformTrialExpired">
@@ -74,7 +75,7 @@ const loading = computed(() => {
                       >
                         {{ license.formattedUpgradeProtectionExpiration }}
                         {{ licenseStatus.upgradeDaysLeft }}
-                        <exclamation-mark :type="licenseStatus.warningLevel" />
+                        <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                       </span>
                     </span>
                     <div class="license-expired-text" v-if="licenseStatus.isValidWithExpiredUpgradeProtection || licenseStatus.isValidWithExpiringUpgradeProtection">
diff --git a/src/ServicePulse.Host/vue/src/components/configuration/convertToWarningLevel.ts b/src/ServicePulse.Host/vue/src/components/configuration/convertToWarningLevel.ts
new file mode 100644
index 0000000000..b808e88193
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/components/configuration/convertToWarningLevel.ts
@@ -0,0 +1,13 @@
+import { LicenseWarningLevel } from "@/composables/LicenseStatus";
+import { WarningLevel } from "@/components/WarningLevel";
+
+export default function convertToWarningLevel(level: LicenseWarningLevel) {
+  switch (level) {
+    case LicenseWarningLevel.None:
+      return WarningLevel.None;
+    case LicenseWarningLevel.Warning:
+      return WarningLevel.Warning;
+    case LicenseWarningLevel.Danger:
+      return WarningLevel.Danger;
+  }
+}
diff --git a/src/ServicePulse.Host/vue/src/views/ConfigurationView.vue b/src/ServicePulse.Host/vue/src/views/ConfigurationView.vue
index a9634bd1c5..28191323ef 100644
--- a/src/ServicePulse.Host/vue/src/views/ConfigurationView.vue
+++ b/src/ServicePulse.Host/vue/src/views/ConfigurationView.vue
@@ -5,6 +5,7 @@ import { connectionState, monitoringConnectionState } from "../composables/servi
 import { useIsMonitoringEnabled } from "../composables/serviceServiceControlUrls";
 import { useRedirects } from "../composables/serviceRedirects";
 import ExclamationMark from "../components/ExclamationMark.vue";
+import convertToWarningLevel from "@/components/configuration/convertToWarningLevel";
 
 const redirectCount = ref(0);
 
@@ -34,7 +35,7 @@ onMounted(async () => {
         <div class="nav tabs">
           <h5 :class="{ active: subIsActive('configuration'), disabled: !connectionState.connected && !connectionState.connectedRecently }" class="nav-item">
             <RouterLink :to="{ name: 'license' }">License</RouterLink>
-            <exclamation-mark :type="licenseStatus.warningLevel" />
+            <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
           </h5>
           <h5 v-if="!licenseStatus.isExpired" :class="{ active: subIsActive('health-check-notifications'), disabled: !connectionState.connected && !connectionState.connectedRecently }" class="nav-item">
             <RouterLink :to="{ name: 'health-check-notifications' }">Health Check Notifications</RouterLink>

From 213ac1f5448c1c4c2b0328c1d4774962c5b62d50 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 9 Feb 2024 12:40:54 +1000
Subject: [PATCH 4/7] Fixed variable declaration

---
 src/ServicePulse.Host/vue/src/components/DataView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ServicePulse.Host/vue/src/components/DataView.vue b/src/ServicePulse.Host/vue/src/components/DataView.vue
index bcaef36fb9..586e0e3092 100644
--- a/src/ServicePulse.Host/vue/src/components/DataView.vue
+++ b/src/ServicePulse.Host/vue/src/components/DataView.vue
@@ -2,7 +2,7 @@
 import { onMounted, onUnmounted, ref, watch } from "vue";
 // eslint-disable-next-line vue/prefer-import-from-vue
 import type { UnwrapRefSimple } from "@vue/reactivity";
-import { useTypedFetchFromServiceControl } from "../composables/serviceServiceControlUrls";
+import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import ItemsPerPage from "../components/ItemsPerPage.vue";
 import PaginationStrip from "../components/PaginationStrip.vue";
 
@@ -19,7 +19,7 @@ const props = withDefaults(
   { itemsPerPageOptions: () => [20, 35, 50, 75], itemsPerPage: 50, showPagination: true, showItemsPerPage: false }
 );
 
-const refreshTimer = ref<number>();
+let refreshTimer: number | undefined;
 const items = ref<T[]>([]);
 const pageNumber = ref(1);
 const itemsPerPage = ref(props.itemsPerPage);
@@ -46,14 +46,14 @@ async function loadData() {
 
 function startRefreshTimer() {
   if (props.autoRefreshSeconds) {
-    refreshTimer.value = setInterval(() => {
+    refreshTimer = setInterval(() => {
       loadData();
     }, props.autoRefreshSeconds * 1000);
   }
 }
 
 function stopRefreshTimer() {
-  clearInterval(refreshTimer.value);
+  clearInterval(refreshTimer);
 }
 
 onMounted(() => {

From e0c1a82edf39c7e5fee988dee9a37627e45eb4d3 Mon Sep 17 00:00:00 2001
From: Mike Minutillo <mike.minutillo@particular.net>
Date: Fri, 9 Feb 2024 11:19:29 +0800
Subject: [PATCH 5/7] Minor cleanup

---
 src/ServicePulse.Host/vue/src/components/DataView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ServicePulse.Host/vue/src/components/DataView.vue b/src/ServicePulse.Host/vue/src/components/DataView.vue
index 586e0e3092..354787453f 100644
--- a/src/ServicePulse.Host/vue/src/components/DataView.vue
+++ b/src/ServicePulse.Host/vue/src/components/DataView.vue
@@ -3,8 +3,8 @@ import { onMounted, onUnmounted, ref, watch } from "vue";
 // eslint-disable-next-line vue/prefer-import-from-vue
 import type { UnwrapRefSimple } from "@vue/reactivity";
 import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
-import ItemsPerPage from "../components/ItemsPerPage.vue";
-import PaginationStrip from "../components/PaginationStrip.vue";
+import ItemsPerPage from "@/components/ItemsPerPage.vue";
+import PaginationStrip from "@/components/PaginationStrip.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -46,14 +46,14 @@ async function loadData() {
 
 function startRefreshTimer() {
   if (props.autoRefreshSeconds) {
-    refreshTimer = setInterval(() => {
+    refreshTimer = window.setInterval(() => {
       loadData();
     }, props.autoRefreshSeconds * 1000);
   }
 }
 
 function stopRefreshTimer() {
-  clearInterval(refreshTimer);
+  window.clearInterval(refreshTimer);
 }
 
 onMounted(() => {

From cb20a9ec644d3f40f5f865bba1e1fddb39714826 Mon Sep 17 00:00:00 2001
From: Mike Minutillo <mike.minutillo@particular.net>
Date: Fri, 9 Feb 2024 11:37:11 +0800
Subject: [PATCH 6/7] Turn items into a v-model

---
 src/ServicePulse.Host/vue/src/components/DataView.vue  | 10 ++++------
 .../vue/src/components/EventItemShort.vue              |  7 +++++--
 src/ServicePulse.Host/vue/src/views/EventsView.vue     |  7 +++++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/ServicePulse.Host/vue/src/components/DataView.vue b/src/ServicePulse.Host/vue/src/components/DataView.vue
index 354787453f..b2401a6dee 100644
--- a/src/ServicePulse.Host/vue/src/components/DataView.vue
+++ b/src/ServicePulse.Host/vue/src/components/DataView.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts" generic="T">
 import { onMounted, onUnmounted, ref, watch } from "vue";
-// eslint-disable-next-line vue/prefer-import-from-vue
-import type { UnwrapRefSimple } from "@vue/reactivity";
 import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import ItemsPerPage from "@/components/ItemsPerPage.vue";
 import PaginationStrip from "@/components/PaginationStrip.vue";
 
 const props = withDefaults(
   defineProps<{
-    itemsType: T[];
     apiUrl: string;
     itemsPerPageOptions?: number[];
     itemsPerPage?: number;
@@ -20,7 +17,8 @@ const props = withDefaults(
 );
 
 let refreshTimer: number | undefined;
-const items = ref<T[]>([]);
+const items = defineModel<T[]>({ required: true });
+
 const pageNumber = ref(1);
 const itemsPerPage = ref(props.itemsPerPage);
 const totalCount = ref(0);
@@ -40,7 +38,7 @@ async function loadData() {
   const [response, data] = await useTypedFetchFromServiceControl<T[]>(`${props.apiUrl}?page=${pageNumber.value}&per_page=${itemsPerPage.value}`);
   if (response.ok) {
     totalCount.value = parseInt(response.headers.get("Total-Count") ?? "0");
-    items.value = data as UnwrapRefSimple<T>[];
+    items.value = data;
   }
 }
 
@@ -67,7 +65,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <slot name="data" v-bind="items"></slot>
+  <slot name="data"></slot>
   <div class="row">
     <ItemsPerPage v-if="showItemsPerPage" v-model="itemsPerPage" :options="itemsPerPageOptions" />
     <PaginationStrip v-if="showPagination" v-model="pageNumber" :totalCount="totalCount" :itemsPerPage="itemsPerPage" />
diff --git a/src/ServicePulse.Host/vue/src/components/EventItemShort.vue b/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
index 22ce6b719d..70d908335c 100644
--- a/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
+++ b/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
@@ -2,13 +2,16 @@
 import DataView from "@/components/DataView.vue";
 import EventLogItem from "@/components/EventLogItem.vue";
 import type EventLogItemType from "@/resources/EventLogItem";
+import { ref } from "vue";
 import { RouterLink } from "vue-router";
+
+const items = ref<EventLogItemType[]>([]);
 </script>
 
 <template>
   <div class="events">
-    <DataView api-url="eventlogitems" :items-type="[] as EventLogItemType[]" :auto-refresh-seconds="5" :itemsPerPage="10" :show-pagination="false">
-      <template #data="items">
+    <DataView api-url="eventlogitems" v-model="items" :auto-refresh-seconds="5" :itemsPerPage="10" :show-pagination="false">
+      <template #data>
         <div class="col-12">
           <h6>Last 10 events</h6>
           <EventLogItem v-for="item of items" :eventLogItem="item" :key="item.id" />
diff --git a/src/ServicePulse.Host/vue/src/views/EventsView.vue b/src/ServicePulse.Host/vue/src/views/EventsView.vue
index 9d66f6e9ce..b085ff8f21 100644
--- a/src/ServicePulse.Host/vue/src/views/EventsView.vue
+++ b/src/ServicePulse.Host/vue/src/views/EventsView.vue
@@ -6,6 +6,9 @@ import DataView from "@/components/DataView.vue";
 import EventLogItem from "@/components/EventLogItem.vue";
 import ServiceControlNotAvailable from "@/components/ServiceControlNotAvailable.vue";
 import type EventLogItemType from "@/resources/EventLogItem";
+import { ref } from "vue";
+
+const items = ref<EventLogItemType[]>([]);
 </script>
 
 <template>
@@ -14,8 +17,8 @@ import type EventLogItemType from "@/resources/EventLogItem";
     <ServiceControlNotAvailable />
     <template v-if="connectionState.connected">
       <div class="events events-view">
-        <DataView api-url="eventlogitems" :items-type="[] as EventLogItemType[]" :auto-refresh-seconds="5" :show-items-per-page="true" :items-per-page="20">
-          <template #data="items">
+        <DataView api-url="eventlogitems" v-model="items" :auto-refresh-seconds="5" :show-items-per-page="true" :items-per-page="20">
+          <template #data>
             <div class="row">
               <div class="col-sm-12">
                 <h1>Events</h1>

From 5d9cdf38e1c6b6f725857c32e2f7f802f40c5775 Mon Sep 17 00:00:00 2001
From: Mike Minutillo <mike.minutillo@particular.net>
Date: Fri, 9 Feb 2024 11:52:49 +0800
Subject: [PATCH 7/7] Create Paged ViewModel

---
 .../vue/src/components/DataView.vue                  | 12 ++++++------
 .../vue/src/components/DataViewPageModel.ts          |  4 ++++
 .../vue/src/components/EventItemShort.vue            | 12 +++++++-----
 src/ServicePulse.Host/vue/src/views/EventsView.vue   |  7 ++++---
 4 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 src/ServicePulse.Host/vue/src/components/DataViewPageModel.ts

diff --git a/src/ServicePulse.Host/vue/src/components/DataView.vue b/src/ServicePulse.Host/vue/src/components/DataView.vue
index b2401a6dee..44ddf87e70 100644
--- a/src/ServicePulse.Host/vue/src/components/DataView.vue
+++ b/src/ServicePulse.Host/vue/src/components/DataView.vue
@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, ref, watch } from "vue";
 import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import ItemsPerPage from "@/components/ItemsPerPage.vue";
 import PaginationStrip from "@/components/PaginationStrip.vue";
+import type DataViewPageModel from "./DataViewPageModel";
 
 const props = withDefaults(
   defineProps<{
@@ -17,11 +18,10 @@ const props = withDefaults(
 );
 
 let refreshTimer: number | undefined;
-const items = defineModel<T[]>({ required: true });
+const viewModel = defineModel<DataViewPageModel<T>>({ required: true });
 
 const pageNumber = ref(1);
 const itemsPerPage = ref(props.itemsPerPage);
-const totalCount = ref(0);
 
 watch(
   () => props.autoRefreshSeconds,
@@ -37,8 +37,8 @@ watch(pageNumber, () => loadData());
 async function loadData() {
   const [response, data] = await useTypedFetchFromServiceControl<T[]>(`${props.apiUrl}?page=${pageNumber.value}&per_page=${itemsPerPage.value}`);
   if (response.ok) {
-    totalCount.value = parseInt(response.headers.get("Total-Count") ?? "0");
-    items.value = data;
+    viewModel.value.totalCount = parseInt(response.headers.get("Total-Count") ?? "0");
+    viewModel.value.data = data;
   }
 }
 
@@ -68,7 +68,7 @@ onUnmounted(() => {
   <slot name="data"></slot>
   <div class="row">
     <ItemsPerPage v-if="showItemsPerPage" v-model="itemsPerPage" :options="itemsPerPageOptions" />
-    <PaginationStrip v-if="showPagination" v-model="pageNumber" :totalCount="totalCount" :itemsPerPage="itemsPerPage" />
+    <PaginationStrip v-if="showPagination" v-model="pageNumber" :totalCount="viewModel.totalCount" :itemsPerPage="itemsPerPage" />
   </div>
-  <slot name="footer" :count="totalCount"></slot>
+  <slot name="footer"></slot>
 </template>
diff --git a/src/ServicePulse.Host/vue/src/components/DataViewPageModel.ts b/src/ServicePulse.Host/vue/src/components/DataViewPageModel.ts
new file mode 100644
index 0000000000..84474be8a1
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/components/DataViewPageModel.ts
@@ -0,0 +1,4 @@
+export default interface DataViewPageModel<T> {
+  data: T[];
+  totalCount: number;
+}
diff --git a/src/ServicePulse.Host/vue/src/components/EventItemShort.vue b/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
index 70d908335c..3eeb8863f5 100644
--- a/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
+++ b/src/ServicePulse.Host/vue/src/components/EventItemShort.vue
@@ -5,20 +5,22 @@ import type EventLogItemType from "@/resources/EventLogItem";
 import { ref } from "vue";
 import { RouterLink } from "vue-router";
 
-const items = ref<EventLogItemType[]>([]);
+import type DataViewPageModel from "@/components/DataViewPageModel";
+
+const pageModel = ref<DataViewPageModel<EventLogItemType>>({ data: [], totalCount: 0 });
 </script>
 
 <template>
   <div class="events">
-    <DataView api-url="eventlogitems" v-model="items" :auto-refresh-seconds="5" :itemsPerPage="10" :show-pagination="false">
+    <DataView api-url="eventlogitems" v-model="pageModel" :auto-refresh-seconds="5" :itemsPerPage="10" :show-pagination="false">
       <template #data>
         <div class="col-12">
           <h6>Last 10 events</h6>
-          <EventLogItem v-for="item of items" :eventLogItem="item" :key="item.id" />
+          <EventLogItem v-for="item of pageModel.data" :eventLogItem="item" :key="item.id" />
         </div>
       </template>
-      <template #footer="{ count }">
-        <div v-if="count > 10" class="row text-center">
+      <template #footer>
+        <div v-if="pageModel.totalCount > 10" class="row text-center">
           <div class="col-12">
             <RouterLink :to="{ name: 'events' }" class="btn btn-default btn-secondary btn-all-events">View all events</RouterLink>
           </div>
diff --git a/src/ServicePulse.Host/vue/src/views/EventsView.vue b/src/ServicePulse.Host/vue/src/views/EventsView.vue
index b085ff8f21..864f15476a 100644
--- a/src/ServicePulse.Host/vue/src/views/EventsView.vue
+++ b/src/ServicePulse.Host/vue/src/views/EventsView.vue
@@ -7,8 +7,9 @@ import EventLogItem from "@/components/EventLogItem.vue";
 import ServiceControlNotAvailable from "@/components/ServiceControlNotAvailable.vue";
 import type EventLogItemType from "@/resources/EventLogItem";
 import { ref } from "vue";
+import type DataViewPageModel from "@/components/DataViewPageModel";
 
-const items = ref<EventLogItemType[]>([]);
+const pageModel = ref<DataViewPageModel<EventLogItemType>>({ data: [], totalCount: 0 });
 </script>
 
 <template>
@@ -17,12 +18,12 @@ const items = ref<EventLogItemType[]>([]);
     <ServiceControlNotAvailable />
     <template v-if="connectionState.connected">
       <div class="events events-view">
-        <DataView api-url="eventlogitems" v-model="items" :auto-refresh-seconds="5" :show-items-per-page="true" :items-per-page="20">
+        <DataView api-url="eventlogitems" v-model="pageModel" :auto-refresh-seconds="5" :show-items-per-page="true" :items-per-page="20">
           <template #data>
             <div class="row">
               <div class="col-sm-12">
                 <h1>Events</h1>
-                <EventLogItem v-for="item of items" :eventLogItem="item" :key="item.id" />
+                <EventLogItem v-for="item of pageModel.data" :eventLogItem="item" :key="item.id" />
               </div>
             </div>
           </template>