From b148921ea17f225b06c6b53639f656b8e798e80e Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 6 Mar 2025 14:56:43 +0800
Subject: [PATCH 01/16] include audit section displaying audit messages

---
 src/Frontend/src/components/PageHeader.vue    |  2 +
 .../src/components/audit/AuditList.vue        | 86 +++++++++++++++++++
 .../src/components/audit/AuditMenuItem.vue    | 16 ++++
 src/Frontend/src/router/config.ts             |  6 ++
 src/Frontend/src/router/routeLinks.ts         | 12 +++
 src/Frontend/src/stores/AuditStore.ts         | 80 +++++++++++++++++
 src/Frontend/src/views/AuditView.vue          | 21 +++++
 7 files changed, 223 insertions(+)
 create mode 100644 src/Frontend/src/components/audit/AuditList.vue
 create mode 100644 src/Frontend/src/components/audit/AuditMenuItem.vue
 create mode 100644 src/Frontend/src/stores/AuditStore.ts
 create mode 100644 src/Frontend/src/views/AuditView.vue

diff --git a/src/Frontend/src/components/PageHeader.vue b/src/Frontend/src/components/PageHeader.vue
index b47af2f52..ca8a89adf 100644
--- a/src/Frontend/src/components/PageHeader.vue
+++ b/src/Frontend/src/components/PageHeader.vue
@@ -12,6 +12,7 @@ import EventsMenuItem from "@/components/events/EventsMenuItem.vue";
 import DashboardMenuItem from "@/components/dashboard/DashboardMenuItem.vue";
 import FeedbackButton from "@/components/FeedbackButton.vue";
 import ThroughputMenuItem from "@/views/throughputreport/ThroughputMenuItem.vue";
+import AuditMenuItem from "./audit/AuditMenuItem.vue";
 
 // prettier-ignore
 const menuItems = computed(
@@ -19,6 +20,7 @@ const menuItems = computed(
   DashboardMenuItem,
   HeartbeatsMenuItem,
   ...(useIsMonitoringEnabled() ? [MonitoringMenuItem] : []),
+  AuditMenuItem,
   FailedMessagesMenuItem,
   CustomChecksMenuItem,
   EventsMenuItem,
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
new file mode 100644
index 000000000..c795fa2a9
--- /dev/null
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import routeLinks from "@/router/routeLinks";
+import { ColumnNames, useAuditStore } from "@/stores/AuditStore";
+import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
+import DataView from "../DataView.vue";
+
+const route = useRoute();
+const store = useAuditStore();
+const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
+</script>
+
+<template>
+  <section role="table" aria-label="endpoint-instances">
+    <!--Table headings-->
+    <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+      <div role="columnheader" :aria-label="ColumnNames.Status" class="status">
+        <SortableColumn :sort-by="ColumnNames.Status" v-model="sortByInstances" :default-ascending="true">Status</SortableColumn>
+      </div>
+      <div role="columnheader" :aria-label="ColumnNames.MessageId" class="col-3">
+        <SortableColumn :sort-by="ColumnNames.MessageId" v-model="sortByInstances" :default-ascending="true">Message Id</SortableColumn>
+      </div>
+      <div role="columnheader" :aria-label="ColumnNames.MessageType" class="col-3">
+        <SortableColumn :sort-by="ColumnNames.MessageType" v-model="sortByInstances" :default-ascending="true">Type</SortableColumn>
+      </div>
+      <div role="columnheader" :aria-label="ColumnNames.TimeSent" class="col-2">
+        <SortableColumn :sort-by="ColumnNames.TimeSent" v-model="sortByInstances">Time Sent</SortableColumn>
+      </div>
+      <div role="columnheader" :aria-label="ColumnNames.ProcessingTime" class="col-2">
+        <SortableColumn :sort-by="ColumnNames.ProcessingTime" v-model="sortByInstances">Processing Time</SortableColumn>
+      </div>
+    </div>
+    <!--Table rows-->
+    <!--NOTE: currently the DataView pages on the client only: we need to make it server data aware (i.e. the total will be the count from the server, not the length of the data we have locally)-->
+    <DataView :data="messages" :show-items-per-page="true" :items-per-page="itemsPerPage" @items-per-page-changed="store.setItemsPerPage">
+      <template #data="{ pageData }">
+        <div role="rowgroup" aria-label="endpoints">
+          <div role="row" :aria-label="message.message_id" class="row grid-row" v-for="message in pageData" :key="message.id">
+            <div role="cell" aria-label="instance-name" class="status">
+              {{ "todo" }}
+            </div>
+            <div role="cell" aria-label="message-id" class="col-3 message-id">
+              <div class="box-header">
+                <tippy :aria-label="message.message_id" :delay="[700, 0]" class="no-side-padding lead righ-side-ellipsis endpoint-details-link">
+                  <template #content>
+                    <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
+                  </template>
+                  <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.audit.message.link(message.id), query: { back: route.path } }">
+                    {{ message.id }}
+                  </RouterLink>
+                </tippy>
+              </div>
+            </div>
+            <div role="cell" aria-label="message-type" class="col-3 message-type">
+              {{ message.message_type }}
+            </div>
+            <div role="cell" aria-label="time-sent" class="col-2 time-sent">
+              {{ "todo" }}
+            </div>
+            <div role="cell" aria-label="processing-time" class="col-2 processing-time">
+              {{ "todo" }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </DataView>
+  </section>
+</template>
+
+<style scoped>
+@import "../list.css";
+
+.hackToPreventSafariFromShowingTooltip::after {
+  content: "";
+  display: block;
+}
+
+.instances-muted {
+  font-weight: bold;
+}
+
+.status {
+  width: 5em;
+  text-align: center;
+}
+</style>
diff --git a/src/Frontend/src/components/audit/AuditMenuItem.vue b/src/Frontend/src/components/audit/AuditMenuItem.vue
new file mode 100644
index 000000000..92896f606
--- /dev/null
+++ b/src/Frontend/src/components/audit/AuditMenuItem.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import routeLinks from "@/router/routeLinks";
+</script>
+
+<template>
+  <RouterLink :to="routeLinks.audit.root">
+    <i class="fa fa-envelope icon-white" title="Audit"></i>
+    <span class="navbar-label">Audit</span>
+  </RouterLink>
+</template>
+
+<style scoped>
+@import "@/assets/navbar.css";
+@import "@/assets/header-menu-item.css";
+</style>
diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index 0f719f134..ffb86f995 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -8,6 +8,7 @@ import routeLinks from "@/router/routeLinks";
 import CustomChecksView from "@/views/CustomChecksView.vue";
 import HeartbeatsView from "@/views/HeartbeatsView.vue";
 import ThroughputReportView from "@/views/ThroughputReportView.vue";
+import AuditView from "@/views/AuditView.vue";
 
 export interface RouteItem {
   path: string;
@@ -52,6 +53,11 @@ const config: RouteItem[] = [
       },
     ],
   },
+  {
+    path: routeLinks.audit.root,
+    component: AuditView,
+    title: "Messages",
+  },
   {
     path: routeLinks.failedMessage.root,
     component: FailedMessagesView,
diff --git a/src/Frontend/src/router/routeLinks.ts b/src/Frontend/src/router/routeLinks.ts
index 284da580b..75ebb6964 100644
--- a/src/Frontend/src/router/routeLinks.ts
+++ b/src/Frontend/src/router/routeLinks.ts
@@ -12,6 +12,17 @@ const heartbeatLinks = (root: string) => {
   };
 };
 
+const auditLinks = (root: string) => {
+  // function createLink(template: string) {
+  //   return { link: `${root}/${template}`, template: template };
+  // }
+
+  return {
+    root,
+    message: { link: (id: string) => `${root}/message/${id}`, template: "message/:id" },
+  };
+};
+
 const failedMessagesLinks = (root: string) => {
   function createLink(template: string) {
     return { link: `${root}/${template}`, template: template };
@@ -93,6 +104,7 @@ const routeLinks = {
   dashboard: "/dashboard",
   heartbeats: heartbeatLinks("/heartbeats"),
   monitoring: monitoringLinks("/monitoring"),
+  audit: auditLinks("/audit"),
   failedMessage: failedMessagesLinks("/failed-messages"),
   customChecks: "/custom-checks",
   events: "/events",
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
new file mode 100644
index 000000000..cf994446f
--- /dev/null
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -0,0 +1,80 @@
+import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref, watch } from "vue";
+import useAutoRefresh from "@/composables/autoRefresh";
+//import { SortDirection, type GroupPropertyType } from "@/resources/SortOptions";
+import type { SortInfo } from "@/components/SortInfo";
+import Message from "@/resources/Message";
+
+export enum ColumnNames {
+  Status = "status",
+  MessageId = "messageId",
+  MessageType = "messageType",
+  TimeSent = "timeSent",
+  ProcessingTime = "processingTime",
+}
+
+// const columnSortings = new Map<string, (endpoint: Message) => GroupPropertyType>([
+//   // [ColumnNames.Name, (endpoint) => endpoint.name],
+//   // [ColumnNames.InstancesDown, (endpoint) => endpoint.alive_count - endpoint.down_count],
+//   // [ColumnNames.InstancesTotal, (endpoint) => endpoint.alive_count + endpoint.down_count],
+//   // [ColumnNames.LastHeartbeat, (endpoint) => moment.utc(endpoint.heartbeat_information?.last_report_at ?? "1975-01-01T00:00:00")],
+//   // [ColumnNames.Tracked, (endpoint) => endpoint.track_instances],
+//   // [ColumnNames.TrackToggle, (endpoint) => endpoint.track_instances],
+// ]);
+
+export const useAuditStore = defineStore("AuditStore", () => {
+  const sortByInstances = ref<SortInfo>({
+    property: ColumnNames.MessageId,
+    isAscending: true,
+  });
+
+  const messageFilterString = ref("");
+  const itemsPerPage = ref(20);
+  const messages = ref<Message[]>([]);
+  // const sortedMessages = computed<Message[]>(() =>
+  //   [...messages.value].sort(getSortFunction(columnSortings.get(sortByInstances.value.property), sortByInstances.value.isAscending ? SortDirection.Ascending : SortDirection.Descending))
+  // );
+  // const filteredMessages = computed<Message[]>(() => sortedMessages.value.filter((message) => !messageFilterString.value || message.id.toLowerCase().includes(messageFilterString.value.toLowerCase())));
+  watch(messageFilterString, (newValue) => {
+    setMessageFilterString(newValue);
+  });
+
+  const dataRetriever = useAutoRefresh(async () => {
+    try {
+      const [, data] = await useTypedFetchFromServiceControl<Message[]>("messages");
+      messages.value = data;
+    } catch (e) {
+      messages.value = [];
+      throw e;
+    }
+  }, 30000);
+
+  function setMessageFilterString(filter: string) {
+    messageFilterString.value = filter;
+  }
+
+  function setItemsPerPage(value: number) {
+    itemsPerPage.value = value;
+  }
+
+  const refresh = dataRetriever.executeAndResetTimer;
+
+  // eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
+  refresh().then();
+
+  return {
+    refresh,
+    sortByInstances,
+    messages,
+    messageFilterString,
+    itemsPerPage,
+    setItemsPerPage,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAuditStore, import.meta.hot));
+}
+
+export type AuditStore = ReturnType<typeof useAuditStore>;
diff --git a/src/Frontend/src/views/AuditView.vue b/src/Frontend/src/views/AuditView.vue
new file mode 100644
index 000000000..7b68f1010
--- /dev/null
+++ b/src/Frontend/src/views/AuditView.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { licenseStatus } from "../composables/serviceLicense";
+import LicenseExpired from "../components/LicenseExpired.vue";
+import AuditList from "@/components/audit/AuditList.vue";
+</script>
+
+<template>
+  <LicenseExpired />
+  <template v-if="!licenseStatus.isExpired">
+    <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <h1>Audit Messages</h1>
+        </div>
+      </div>
+      <div class="row">
+        <AuditList />
+      </div>
+    </div>
+  </template>
+</template>

From 105cc68c7304d67450c5a8d3243f6a6a9d53585a Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 11 Mar 2025 07:29:39 +0800
Subject: [PATCH 02/16] show status icons

---
 .../src/components/audit/AuditList.vue        | 99 ++++++++++++++++++-
 src/Frontend/src/resources/Message.ts         | 57 ++++++++++-
 2 files changed, 152 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index c795fa2a9..6449e70b5 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -4,10 +4,46 @@ import { ColumnNames, useAuditStore } from "@/stores/AuditStore";
 import { storeToRefs } from "pinia";
 import { useRoute } from "vue-router";
 import DataView from "../DataView.vue";
+import SortableColumn from "../SortableColumn.vue";
+import { MessageStatus } from "@/resources/Message";
 
 const route = useRoute();
 const store = useAuditStore();
 const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
+
+function statusToName(messageStatus: MessageStatus) {
+  switch (messageStatus) {
+    case MessageStatus.Successful:
+      return "Successful";
+    case MessageStatus.ResolvedSuccessfully:
+      return "Successful after retries";
+    case MessageStatus.Failed:
+      return "Failed";
+    case MessageStatus.ArchivedFailure:
+      return "Failed message deleted";
+    case MessageStatus.RepeatedFailure:
+      return "Repeated Failures";
+    case MessageStatus.RetryIssued:
+      return "Retry requested";
+  }
+}
+
+function statusToIcon(messageStatus: MessageStatus) {
+  switch (messageStatus) {
+    case MessageStatus.Successful:
+      return "fa successful";
+    case MessageStatus.ResolvedSuccessfully:
+      return "fa resolved-successfully";
+    case MessageStatus.Failed:
+      return "fa failed";
+    case MessageStatus.ArchivedFailure:
+      return "fa archived";
+    case MessageStatus.RepeatedFailure:
+      return "fa repeated-failure";
+    case MessageStatus.RetryIssued:
+      return "fa retry-issued";
+  }
+}
 </script>
 
 <template>
@@ -36,8 +72,8 @@ const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
       <template #data="{ pageData }">
         <div role="rowgroup" aria-label="endpoints">
           <div role="row" :aria-label="message.message_id" class="row grid-row" v-for="message in pageData" :key="message.id">
-            <div role="cell" aria-label="instance-name" class="status">
-              {{ "todo" }}
+            <div role="cell" aria-label="status" class="status" :title="statusToName(message.status)">
+              <div class="status-icon" :class="statusToIcon(message.status)"></div>
             </div>
             <div role="cell" aria-label="message-id" class="col-3 message-id">
               <div class="box-header">
@@ -46,7 +82,7 @@ const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
                     <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
                   </template>
                   <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.audit.message.link(message.id), query: { back: route.path } }">
-                    {{ message.id }}
+                    {{ message.message_id }}
                   </RouterLink>
                 </tippy>
               </div>
@@ -83,4 +119,61 @@ const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
   width: 5em;
   text-align: center;
 }
+
+.status-icon {
+  color: white;
+  border-radius: 0.75em;
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.status-icon::before {
+  vertical-align: middle;
+  font-size: 0.85em;
+}
+
+.successful {
+  background: #6cc63f;
+}
+.successful::before {
+  content: "\f00c";
+}
+
+.resolved-successfully {
+  background: #3f881b;
+}
+.resolved-successfully::before {
+  content: "\f01e";
+}
+
+.failed {
+  background: #c63f3f;
+}
+.failed::before {
+  content: "\f00d";
+}
+
+.archived {
+  background: #000000;
+}
+.archived::before {
+  content: "\f187";
+  font-size: 0.85em;
+}
+
+.repeated-failure {
+  background: #c63f3f;
+}
+.repeated-failure::before {
+  content: "\f00d\f00d";
+  font-size: 0.6em;
+}
+
+.retry-issued {
+  background: #cccccc;
+  color: #000000;
+}
+.retry-issued::before {
+  content: "\f01e";
+}
 </style>
diff --git a/src/Frontend/src/resources/Message.ts b/src/Frontend/src/resources/Message.ts
index a955a89b6..22605b75e 100644
--- a/src/Frontend/src/resources/Message.ts
+++ b/src/Frontend/src/resources/Message.ts
@@ -15,7 +15,7 @@ export default interface Message {
   is_system_message: boolean;
   conversation_id: string;
   headers: Header[];
-  status: string;
+  status: MessageStatus;
   message_intent: string;
   body_url: string;
   body_size: number;
@@ -27,3 +27,58 @@ export interface ExtendedMessage extends Message {
   headersNotFound: boolean;
   messageBodyNotFound: boolean;
 }
+
+export enum MessageStatus {
+  Failed = "failed",
+  RepeatedFailure = "repeatedFailure",
+  Successful = "successful",
+  ResolvedSuccessfully = "resolvedSuccessfully",
+  ArchivedFailure = "archivedFailure",
+  RetryIssued = "retryIssued",
+}
+
+// export class AuditMessage implements Message {
+//   id: string;
+//   message_id: string;
+//   message_type: string;
+//   sending_endpoint: EndpointDetails;
+//   receiving_endpoint: EndpointDetails;
+//   time_sent: string;
+//   processed_at: string;
+//   critical_time: string;
+//   processing_time: string;
+//   delivery_time: string;
+//   is_system_message: boolean;
+//   conversation_id: string;
+//   headers: Header[];
+//   status: string;
+//   message_intent: string;
+//   body_url: string;
+//   body_size: number;
+//   instance_id: string;
+
+//   constructor(message: Message) {
+//     this.id = message.id;
+//     this.message_id = message.message_id;
+//     this.message_type = message.message_type;
+//     this.sending_endpoint = message.sending_endpoint;
+//     this.receiving_endpoint = message.receiving_endpoint;
+//     this.time_sent = message.time_sent;
+//     this.processed_at = message.processed_at;
+//     this.critical_time = message.critical_time;
+//     this.processing_time = message.processing_time;
+//     this.delivery_time = message.delivery_time;
+//     this.is_system_message = message.is_system_message;
+//     this.conversation_id = message.conversation_id;
+//     this.headers = message.headers;
+//     this.status = message.status;
+//     this.message_intent = message.message_intent;
+//     this.body_url = message.body_url;
+//     this.body_size = message.body_size;
+//     this.instance_id = message.instance_id;
+//   }
+
+//   get message_status(): MessageStatus {
+//     return this.status as MessageStatus;
+//   }
+// }

From dd2cd69c0d0cda299a7244007d10690b8592233e Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 11 Mar 2025 13:46:56 +0800
Subject: [PATCH 03/16] add feature flag

---
 src/Frontend/env.d.ts                      | 1 +
 src/Frontend/src/components/PageHeader.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Frontend/env.d.ts b/src/Frontend/env.d.ts
index 25bf2dc33..14b42e970 100644
--- a/src/Frontend/env.d.ts
+++ b/src/Frontend/env.d.ts
@@ -10,6 +10,7 @@ declare global {
       service_control_url: string;
       monitoring_urls: string[];
       showPendingRetry: boolean;
+      showAllMessages: boolean;
     };
   }
 }
diff --git a/src/Frontend/src/components/PageHeader.vue b/src/Frontend/src/components/PageHeader.vue
index ca8a89adf..2fdf59ed6 100644
--- a/src/Frontend/src/components/PageHeader.vue
+++ b/src/Frontend/src/components/PageHeader.vue
@@ -20,7 +20,7 @@ const menuItems = computed(
   DashboardMenuItem,
   HeartbeatsMenuItem,
   ...(useIsMonitoringEnabled() ? [MonitoringMenuItem] : []),
-  AuditMenuItem,
+  ...(window.defaultConfig.showAllMessages ? [AuditMenuItem] : []),
   FailedMessagesMenuItem,
   CustomChecksMenuItem,
   EventsMenuItem,

From 36d7815e8407d9b79980bef468b2cb903f9d2b84 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 11 Mar 2025 13:47:10 +0800
Subject: [PATCH 04/16] format message type as per SI

---
 src/Frontend/src/components/audit/AuditList.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 6449e70b5..67957995e 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -44,6 +44,14 @@ function statusToIcon(messageStatus: MessageStatus) {
       return "fa retry-issued";
   }
 }
+
+function friendlyTypeName(messageType: string) {
+  if (messageType == null) return null;
+
+  const typeClass = messageType.split(",")[0];
+  const typeName = typeClass.split(".").reverse()[0];
+  return typeName.replace(/\+/g, ".");
+}
 </script>
 
 <template>
@@ -88,7 +96,7 @@ function statusToIcon(messageStatus: MessageStatus) {
               </div>
             </div>
             <div role="cell" aria-label="message-type" class="col-3 message-type">
-              {{ message.message_type }}
+              {{ friendlyTypeName(message.message_type) }}
             </div>
             <div role="cell" aria-label="time-sent" class="col-2 time-sent">
               {{ "todo" }}

From b281cf30745f0b0562c9baaf10f7335d94324233 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 11 Mar 2025 13:47:41 +0800
Subject: [PATCH 05/16] change name from audit to all messages and include
 message view route

---
 src/Frontend/src/components/audit/AuditMenuItem.vue | 4 ++--
 src/Frontend/src/components/audit/MessageView.vue   | 5 +++++
 src/Frontend/src/router/config.ts                   | 7 ++++++-
 src/Frontend/src/router/routeLinks.ts               | 6 +-----
 src/Frontend/src/views/AuditView.vue                | 2 +-
 5 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 src/Frontend/src/components/audit/MessageView.vue

diff --git a/src/Frontend/src/components/audit/AuditMenuItem.vue b/src/Frontend/src/components/audit/AuditMenuItem.vue
index 92896f606..243113db6 100644
--- a/src/Frontend/src/components/audit/AuditMenuItem.vue
+++ b/src/Frontend/src/components/audit/AuditMenuItem.vue
@@ -5,8 +5,8 @@ import routeLinks from "@/router/routeLinks";
 
 <template>
   <RouterLink :to="routeLinks.audit.root">
-    <i class="fa fa-envelope icon-white" title="Audit"></i>
-    <span class="navbar-label">Audit</span>
+    <i class="fa fa-envelope icon-white" title="All Messages"></i>
+    <span class="navbar-label">All Messages</span>
   </RouterLink>
 </template>
 
diff --git a/src/Frontend/src/components/audit/MessageView.vue b/src/Frontend/src/components/audit/MessageView.vue
new file mode 100644
index 000000000..4893d2325
--- /dev/null
+++ b/src/Frontend/src/components/audit/MessageView.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>Hello</div>
+</template>
diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index ffb86f995..785525bd8 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -56,7 +56,12 @@ const config: RouteItem[] = [
   {
     path: routeLinks.audit.root,
     component: AuditView,
-    title: "Messages",
+    title: "All Messages",
+  },
+  {
+    path: routeLinks.audit.message.template,
+    title: "Message",
+    component: () => import("@/components/audit/MessageView.vue"),
   },
   {
     path: routeLinks.failedMessage.root,
diff --git a/src/Frontend/src/router/routeLinks.ts b/src/Frontend/src/router/routeLinks.ts
index 75ebb6964..24c5e99b3 100644
--- a/src/Frontend/src/router/routeLinks.ts
+++ b/src/Frontend/src/router/routeLinks.ts
@@ -13,13 +13,9 @@ const heartbeatLinks = (root: string) => {
 };
 
 const auditLinks = (root: string) => {
-  // function createLink(template: string) {
-  //   return { link: `${root}/${template}`, template: template };
-  // }
-
   return {
     root,
-    message: { link: (id: string) => `${root}/message/${id}`, template: "message/:id" },
+    message: { link: (id: string) => `${root}/message/${id}`, template: `${root}/message/:id` },
   };
 };
 
diff --git a/src/Frontend/src/views/AuditView.vue b/src/Frontend/src/views/AuditView.vue
index 7b68f1010..bbd69cd69 100644
--- a/src/Frontend/src/views/AuditView.vue
+++ b/src/Frontend/src/views/AuditView.vue
@@ -10,7 +10,7 @@ import AuditList from "@/components/audit/AuditList.vue";
     <div class="container">
       <div class="row">
         <div class="col-12">
-          <h1>Audit Messages</h1>
+          <h1>All Messages</h1>
         </div>
       </div>
       <div class="row">

From f706a7fe65069f50ab6963a5e75b8de25174ed71 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 11 Mar 2025 16:00:54 +0800
Subject: [PATCH 06/16] display time_sent and processing_time values

---
 src/Frontend/src/components/audit/AuditList.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 67957995e..36d9f41f9 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -6,6 +6,8 @@ import { useRoute } from "vue-router";
 import DataView from "../DataView.vue";
 import SortableColumn from "../SortableColumn.vue";
 import { MessageStatus } from "@/resources/Message";
+import moment from "moment";
+import { useFormatTime } from "@/composables/formatter";
 
 const route = useRoute();
 const store = useAuditStore();
@@ -52,6 +54,13 @@ function friendlyTypeName(messageType: string) {
   const typeName = typeClass.split(".").reverse()[0];
   return typeName.replace(/\+/g, ".");
 }
+
+function formatDotNetTimespan(timespan: string) {
+  //assuming if we have days in the timespan then something is very, very wrong
+  const [hh, mm, ss] = timespan.split(":");
+  const time = useFormatTime(((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000);
+  return `${time.value} ${time.unit}`;
+}
 </script>
 
 <template>
@@ -99,10 +108,10 @@ function friendlyTypeName(messageType: string) {
               {{ friendlyTypeName(message.message_type) }}
             </div>
             <div role="cell" aria-label="time-sent" class="col-2 time-sent">
-              {{ "todo" }}
+              {{ moment(message.time_sent).local().format("LLLL") }}
             </div>
             <div role="cell" aria-label="processing-time" class="col-2 processing-time">
-              {{ "todo" }}
+              {{ formatDotNetTimespan(message.processing_time) }}
             </div>
           </div>
         </div>

From db87e15b0d2bb8d2e36a8caee8d485d7514483ad Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Wed, 12 Mar 2025 18:05:02 -0700
Subject: [PATCH 07/16] fix the body of the popup message in retry dialog

---
 src/Frontend/src/components/failedmessages/MessageView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/failedmessages/MessageView.vue b/src/Frontend/src/components/failedmessages/MessageView.vue
index 535b281e2..14a350b5f 100644
--- a/src/Frontend/src/components/failedmessages/MessageView.vue
+++ b/src/Frontend/src/components/failedmessages/MessageView.vue
@@ -496,7 +496,7 @@ onUnmounted(() => {
                 retryMessage();
               "
               :heading="'Are you sure you want to retry this message?'"
-              :body="'Are you sure you want to retry this message?'"
+              :body="'Ensure that the selected message was not processed previously as this will create a duplicate message.'"
             ></ConfirmDialog>
 
             <EditRetryDialog

From ef84c787d9766c5a9adece3a4eeac6949808a559 Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Wed, 12 Mar 2025 18:05:49 -0700
Subject: [PATCH 08/16] Revert "fix the body of the popup message in retry
 dialog"

This reverts commit db87e15b0d2bb8d2e36a8caee8d485d7514483ad.
---
 src/Frontend/src/components/failedmessages/MessageView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/failedmessages/MessageView.vue b/src/Frontend/src/components/failedmessages/MessageView.vue
index 14a350b5f..535b281e2 100644
--- a/src/Frontend/src/components/failedmessages/MessageView.vue
+++ b/src/Frontend/src/components/failedmessages/MessageView.vue
@@ -496,7 +496,7 @@ onUnmounted(() => {
                 retryMessage();
               "
               :heading="'Are you sure you want to retry this message?'"
-              :body="'Ensure that the selected message was not processed previously as this will create a duplicate message.'"
+              :body="'Are you sure you want to retry this message?'"
             ></ConfirmDialog>
 
             <EditRetryDialog

From 2616724c24b4c5eb338e322d1ab4022ef3aa9ca0 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 13 Mar 2025 10:31:09 +0800
Subject: [PATCH 09/16] enable auto refresh to be paused and to be configured
 after creation

---
 src/Frontend/src/composables/autoRefresh.ts  | 27 ++++++++++++++++++--
 src/Frontend/src/stores/AuditStore.ts        | 10 +++-----
 src/Frontend/src/stores/CustomChecksStore.ts |  2 --
 src/Frontend/src/stores/HeartbeatsStore.ts   |  3 ---
 src/Frontend/src/stores/ThroughputStore.ts   |  2 --
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/Frontend/src/composables/autoRefresh.ts b/src/Frontend/src/composables/autoRefresh.ts
index 1131aed83..a2b5c9af8 100644
--- a/src/Frontend/src/composables/autoRefresh.ts
+++ b/src/Frontend/src/composables/autoRefresh.ts
@@ -1,5 +1,13 @@
-export default function useAutoRefresh(refreshAction: () => Promise<void>, timeout: number) {
+import { ref } from "vue";
+
+/**
+ * Enables refresh functionality, either auto or manual
+ * @param refreshAction The action to perform (by default) when refreshing
+ * @param defaultTimeout The time between refreshes in ms or null if no auto-refresh is desired
+ */
+export default function useAutoRefresh(refreshAction: () => Promise<void>, defaultTimeout: number | null, startImmediately = true) {
   let refreshInterval: number | null = null;
+  const timeout = ref(defaultTimeout);
 
   function stopTimer() {
     if (refreshInterval !== null) {
@@ -9,10 +17,12 @@ export default function useAutoRefresh(refreshAction: () => Promise<void>, timeo
   }
 
   function startTimer() {
+    if (timeout.value === null) return;
+
     stopTimer();
     refreshInterval = window?.setTimeout(() => {
       executeAndResetTimer();
-    }, timeout);
+    }, timeout.value as number);
   }
 
   async function executeAndResetTimer(overrideAction?: () => Promise<void>) {
@@ -24,7 +34,20 @@ export default function useAutoRefresh(refreshAction: () => Promise<void>, timeo
     }
   }
 
+  /**
+   * Updates the timeout interval between refreshes
+   * @param updatedTimeout The new time between refreshes in ms or null if no auto-refresh is desired
+   */
+  async function updateTimeout(updatedTimeout: number) {
+    timeout.value = updatedTimeout;
+    await executeAndResetTimer();
+  }
+
+  // eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
+  if (startImmediately) executeAndResetTimer().then();
+
   return {
     executeAndResetTimer,
+    updateTimeout,
   };
 }
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index cf994446f..726f83bdc 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -48,7 +48,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
       messages.value = [];
       throw e;
     }
-  }, 30000);
+  }, null);
 
   function setMessageFilterString(filter: string) {
     messageFilterString.value = filter;
@@ -58,13 +58,9 @@ export const useAuditStore = defineStore("AuditStore", () => {
     itemsPerPage.value = value;
   }
 
-  const refresh = dataRetriever.executeAndResetTimer;
-
-  // eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
-  refresh().then();
-
   return {
-    refresh,
+    refresh: dataRetriever.executeAndResetTimer,
+    updateRefreshTimer: dataRetriever.updateTimeout,
     sortByInstances,
     messages,
     messageFilterString,
diff --git a/src/Frontend/src/stores/CustomChecksStore.ts b/src/Frontend/src/stores/CustomChecksStore.ts
index 514e94c46..d31a0bd29 100644
--- a/src/Frontend/src/stores/CustomChecksStore.ts
+++ b/src/Frontend/src/stores/CustomChecksStore.ts
@@ -37,8 +37,6 @@ export const useCustomChecksStore = defineStore("CustomChecksStore", () => {
     });
   }
 
-  dataRetriever.executeAndResetTimer();
-
   return {
     dismissCustomCheck,
     pageNumber,
diff --git a/src/Frontend/src/stores/HeartbeatsStore.ts b/src/Frontend/src/stores/HeartbeatsStore.ts
index 77bb48006..4c0a00152 100644
--- a/src/Frontend/src/stores/HeartbeatsStore.ts
+++ b/src/Frontend/src/stores/HeartbeatsStore.ts
@@ -170,9 +170,6 @@ export const useHeartbeatsStore = defineStore("HeartbeatsStore", () => {
 
   const refresh = dataRetriever.executeAndResetTimer;
 
-  // eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
-  refresh().then();
-
   return {
     refresh,
     defaultTrackingInstancesValue,
diff --git a/src/Frontend/src/stores/ThroughputStore.ts b/src/Frontend/src/stores/ThroughputStore.ts
index bc04e49c4..e13dfbd07 100644
--- a/src/Frontend/src/stores/ThroughputStore.ts
+++ b/src/Frontend/src/stores/ThroughputStore.ts
@@ -101,8 +101,6 @@ export const useThroughputStore = defineStore("ThroughputStore", () => {
     }
   });
 
-  refresh();
-
   return {
     testResults,
     refresh,

From 0065abbe2135f403a3bc621f5073be667d8b0edc Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 13 Mar 2025 14:52:42 +0800
Subject: [PATCH 10/16] manual/auto refresh control

---
 src/Frontend/src/components/RefreshConfig.vue | 85 +++++++++++++++++++
 .../src/components/audit/AuditList.vue        |  2 +
 src/Frontend/src/composables/autoRefresh.ts   |  6 +-
 3 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 src/Frontend/src/components/RefreshConfig.vue

diff --git a/src/Frontend/src/components/RefreshConfig.vue b/src/Frontend/src/components/RefreshConfig.vue
new file mode 100644
index 000000000..eb060592d
--- /dev/null
+++ b/src/Frontend/src/components/RefreshConfig.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import OnOffSwitch from "./OnOffSwitch.vue";
+
+const props = defineProps<{
+  id: string;
+  initialTimeout?: number;
+  onChange: (newValue: number | null) => void;
+  onManualRefresh: () => void;
+}>();
+
+const autoRefresh = ref(props.initialTimeout != null);
+const refreshTimeout = ref(props.initialTimeout ?? 5);
+
+function toggleRefresh() {
+  autoRefresh.value = !autoRefresh.value;
+  updateTimeout();
+}
+
+function updateTimeout() {
+  validateTimeout();
+  props.onChange(autoRefresh.value ? refreshTimeout.value * 1000 : null);
+}
+
+function validateTimeout() {
+  refreshTimeout.value = Math.max(1, Math.min(600, refreshTimeout.value));
+}
+</script>
+
+<template>
+  <div class="refresh-config">
+    <button class="fa" title="refresh" @click="() => onManualRefresh()">
+      <i class="fa fa-lg fa-refresh" />
+    </button>
+    <span>|</span>
+    <label>Auto-Refresh:</label>
+    <div>
+      <OnOffSwitch :id="id" @toggle="toggleRefresh" :value="autoRefresh" />
+    </div>
+    <input type="number" v-model="refreshTimeout" min="1" max="600" v-on:change="updateTimeout" />
+    <span class="unit">s</span>
+  </div>
+</template>
+
+<style scoped>
+.refresh-config {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.refresh-config .unit {
+  margin-left: -0.45em;
+}
+
+.refresh-config label {
+  margin: 0;
+}
+
+.refresh-config input {
+  width: 3.5em;
+}
+
+.refresh-config button {
+  background: none;
+  border: none;
+  width: 2em;
+}
+
+.refresh-config button .fa {
+  transition: all 0.15s ease-in-out;
+  transition: rotate 0.05s ease-in-out;
+  transform-origin: center;
+}
+
+.refresh-config button:hover .fa {
+  color: #00a3c4;
+  transform: scale(1.1);
+}
+
+.refresh-config button:active .fa {
+  transform: rotate(25deg);
+  text-shadow: #929e9e 0.25px 0.25px;
+}
+</style>
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 36d9f41f9..3b10ced37 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -8,6 +8,7 @@ import SortableColumn from "../SortableColumn.vue";
 import { MessageStatus } from "@/resources/Message";
 import moment from "moment";
 import { useFormatTime } from "@/composables/formatter";
+import RefreshConfig from "../RefreshConfig.vue";
 
 const route = useRoute();
 const store = useAuditStore();
@@ -64,6 +65,7 @@ function formatDotNetTimespan(timespan: string) {
 </script>
 
 <template>
+  <RefreshConfig id="auditListRefresh" @change="store.updateRefreshTimer" @manual-refresh="store.refresh" />
   <section role="table" aria-label="endpoint-instances">
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
diff --git a/src/Frontend/src/composables/autoRefresh.ts b/src/Frontend/src/composables/autoRefresh.ts
index a2b5c9af8..7bdca8d8a 100644
--- a/src/Frontend/src/composables/autoRefresh.ts
+++ b/src/Frontend/src/composables/autoRefresh.ts
@@ -1,5 +1,3 @@
-import { ref } from "vue";
-
 /**
  * Enables refresh functionality, either auto or manual
  * @param refreshAction The action to perform (by default) when refreshing
@@ -7,7 +5,7 @@ import { ref } from "vue";
  */
 export default function useAutoRefresh(refreshAction: () => Promise<void>, defaultTimeout: number | null, startImmediately = true) {
   let refreshInterval: number | null = null;
-  const timeout = ref(defaultTimeout);
+  const timeout = { value: defaultTimeout };
 
   function stopTimer() {
     if (refreshInterval !== null) {
@@ -38,7 +36,7 @@ export default function useAutoRefresh(refreshAction: () => Promise<void>, defau
    * Updates the timeout interval between refreshes
    * @param updatedTimeout The new time between refreshes in ms or null if no auto-refresh is desired
    */
-  async function updateTimeout(updatedTimeout: number) {
+  async function updateTimeout(updatedTimeout: number | null) {
     timeout.value = updatedTimeout;
     await executeAndResetTimer();
   }

From 10ae9aff78a9127d854e1a0b9f7106519b7ed796 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 13 Mar 2025 15:16:49 +0800
Subject: [PATCH 11/16] stripe results grid

---
 src/Frontend/src/components/audit/AuditList.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 3b10ced37..25aeef0f3 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -195,4 +195,19 @@ function formatDotNetTimespan(timespan: string) {
 .retry-issued::before {
   content: "\f01e";
 }
+
+.grid-row {
+  display: flex;
+  position: relative;
+  border-top: 1px solid #eee;
+  border-right: 1px solid #fff;
+  border-bottom: 1px solid #eee;
+  border-left: 1px solid #fff;
+  background-color: #fff;
+  margin: 0;
+}
+
+.grid-row:nth-child(even) {
+  background-color: #eee;
+}
 </style>

From 0a510d00ab88cab92b9b38cad3ab346dccdb7ae2 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 13 Mar 2025 15:37:22 +0800
Subject: [PATCH 12/16] change to use emits

---
 src/Frontend/src/components/RefreshConfig.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Frontend/src/components/RefreshConfig.vue b/src/Frontend/src/components/RefreshConfig.vue
index eb060592d..78a0f641b 100644
--- a/src/Frontend/src/components/RefreshConfig.vue
+++ b/src/Frontend/src/components/RefreshConfig.vue
@@ -5,10 +5,11 @@ import OnOffSwitch from "./OnOffSwitch.vue";
 const props = defineProps<{
   id: string;
   initialTimeout?: number;
-  onChange: (newValue: number | null) => void;
   onManualRefresh: () => void;
 }>();
 
+const emit = defineEmits<{ change: [newValue: number | null]; manualRefresh: [] }>();
+
 const autoRefresh = ref(props.initialTimeout != null);
 const refreshTimeout = ref(props.initialTimeout ?? 5);
 
@@ -19,7 +20,7 @@ function toggleRefresh() {
 
 function updateTimeout() {
   validateTimeout();
-  props.onChange(autoRefresh.value ? refreshTimeout.value * 1000 : null);
+  emit("change", autoRefresh.value ? refreshTimeout.value * 1000 : null);
 }
 
 function validateTimeout() {
@@ -29,7 +30,7 @@ function validateTimeout() {
 
 <template>
   <div class="refresh-config">
-    <button class="fa" title="refresh" @click="() => onManualRefresh()">
+    <button class="fa" title="refresh" @click="() => emit('manualRefresh')">
       <i class="fa fa-lg fa-refresh" />
     </button>
     <span>|</span>

From ba6232436bc47dbe828fc04e8e6cb115eb50ffdd Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 14 Mar 2025 08:16:18 +0800
Subject: [PATCH 13/16] remove commented code

---
 src/Frontend/src/resources/Message.ts | 46 ---------------------------
 1 file changed, 46 deletions(-)

diff --git a/src/Frontend/src/resources/Message.ts b/src/Frontend/src/resources/Message.ts
index 22605b75e..977497bbb 100644
--- a/src/Frontend/src/resources/Message.ts
+++ b/src/Frontend/src/resources/Message.ts
@@ -36,49 +36,3 @@ export enum MessageStatus {
   ArchivedFailure = "archivedFailure",
   RetryIssued = "retryIssued",
 }
-
-// export class AuditMessage implements Message {
-//   id: string;
-//   message_id: string;
-//   message_type: string;
-//   sending_endpoint: EndpointDetails;
-//   receiving_endpoint: EndpointDetails;
-//   time_sent: string;
-//   processed_at: string;
-//   critical_time: string;
-//   processing_time: string;
-//   delivery_time: string;
-//   is_system_message: boolean;
-//   conversation_id: string;
-//   headers: Header[];
-//   status: string;
-//   message_intent: string;
-//   body_url: string;
-//   body_size: number;
-//   instance_id: string;
-
-//   constructor(message: Message) {
-//     this.id = message.id;
-//     this.message_id = message.message_id;
-//     this.message_type = message.message_type;
-//     this.sending_endpoint = message.sending_endpoint;
-//     this.receiving_endpoint = message.receiving_endpoint;
-//     this.time_sent = message.time_sent;
-//     this.processed_at = message.processed_at;
-//     this.critical_time = message.critical_time;
-//     this.processing_time = message.processing_time;
-//     this.delivery_time = message.delivery_time;
-//     this.is_system_message = message.is_system_message;
-//     this.conversation_id = message.conversation_id;
-//     this.headers = message.headers;
-//     this.status = message.status;
-//     this.message_intent = message.message_intent;
-//     this.body_url = message.body_url;
-//     this.body_size = message.body_size;
-//     this.instance_id = message.instance_id;
-//   }
-
-//   get message_status(): MessageStatus {
-//     return this.status as MessageStatus;
-//   }
-// }

From 60e4bfacb8b26de0dcafe0236b1a9776d3c3e405 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 14 Mar 2025 14:02:21 +0800
Subject: [PATCH 14/16] add paging

---
 .../src/components/audit/AuditList.vue        | 65 ++++++++++---------
 src/Frontend/src/stores/AuditStore.ts         | 18 +++--
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 25aeef0f3..798836d82 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -3,16 +3,17 @@ import routeLinks from "@/router/routeLinks";
 import { ColumnNames, useAuditStore } from "@/stores/AuditStore";
 import { storeToRefs } from "pinia";
 import { useRoute } from "vue-router";
-import DataView from "../DataView.vue";
 import SortableColumn from "../SortableColumn.vue";
 import { MessageStatus } from "@/resources/Message";
 import moment from "moment";
 import { useFormatTime } from "@/composables/formatter";
 import RefreshConfig from "../RefreshConfig.vue";
+import ItemsPerPage from "../ItemsPerPage.vue";
+import PaginationStrip from "../PaginationStrip.vue";
 
 const route = useRoute();
 const store = useAuditStore();
-const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
+const { messages, sortByInstances, itemsPerPage, selectedPage, totalCount } = storeToRefs(store);
 
 function statusToName(messageStatus: MessageStatus) {
   switch (messageStatus) {
@@ -87,38 +88,38 @@ function formatDotNetTimespan(timespan: string) {
     </div>
     <!--Table rows-->
     <!--NOTE: currently the DataView pages on the client only: we need to make it server data aware (i.e. the total will be the count from the server, not the length of the data we have locally)-->
-    <DataView :data="messages" :show-items-per-page="true" :items-per-page="itemsPerPage" @items-per-page-changed="store.setItemsPerPage">
-      <template #data="{ pageData }">
-        <div role="rowgroup" aria-label="endpoints">
-          <div role="row" :aria-label="message.message_id" class="row grid-row" v-for="message in pageData" :key="message.id">
-            <div role="cell" aria-label="status" class="status" :title="statusToName(message.status)">
-              <div class="status-icon" :class="statusToIcon(message.status)"></div>
-            </div>
-            <div role="cell" aria-label="message-id" class="col-3 message-id">
-              <div class="box-header">
-                <tippy :aria-label="message.message_id" :delay="[700, 0]" class="no-side-padding lead righ-side-ellipsis endpoint-details-link">
-                  <template #content>
-                    <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
-                  </template>
-                  <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.audit.message.link(message.id), query: { back: route.path } }">
-                    {{ message.message_id }}
-                  </RouterLink>
-                </tippy>
-              </div>
-            </div>
-            <div role="cell" aria-label="message-type" class="col-3 message-type">
-              {{ friendlyTypeName(message.message_type) }}
-            </div>
-            <div role="cell" aria-label="time-sent" class="col-2 time-sent">
-              {{ moment(message.time_sent).local().format("LLLL") }}
-            </div>
-            <div role="cell" aria-label="processing-time" class="col-2 processing-time">
-              {{ formatDotNetTimespan(message.processing_time) }}
-            </div>
+    <div role="rowgroup" aria-label="endpoints">
+      <div role="row" :aria-label="message.message_id" class="row grid-row" v-for="message in messages" :key="message.id">
+        <div role="cell" aria-label="status" class="status" :title="statusToName(message.status)">
+          <div class="status-icon" :class="statusToIcon(message.status)"></div>
+        </div>
+        <div role="cell" aria-label="message-id" class="col-3 message-id">
+          <div class="box-header">
+            <tippy :aria-label="message.message_id" :delay="[700, 0]" class="no-side-padding lead righ-side-ellipsis endpoint-details-link">
+              <template #content>
+                <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
+              </template>
+              <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.audit.message.link(message.id), query: { back: route.path } }">
+                {{ message.message_id }}
+              </RouterLink>
+            </tippy>
           </div>
         </div>
-      </template>
-    </DataView>
+        <div role="cell" aria-label="message-type" class="col-3 message-type">
+          {{ friendlyTypeName(message.message_type) }}
+        </div>
+        <div role="cell" aria-label="time-sent" class="col-2 time-sent">
+          {{ moment(message.time_sent).local().format("LLLL") }}
+        </div>
+        <div role="cell" aria-label="processing-time" class="col-2 processing-time">
+          {{ formatDotNetTimespan(message.processing_time) }}
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <ItemsPerPage v-model="itemsPerPage" />
+      <PaginationStrip v-model="selectedPage" :totalCount="totalCount" :itemsPerPage="itemsPerPage" />
+    </div>
   </section>
 </template>
 
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index 726f83bdc..e64aa15aa 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -31,6 +31,8 @@ export const useAuditStore = defineStore("AuditStore", () => {
 
   const messageFilterString = ref("");
   const itemsPerPage = ref(20);
+  const selectedPage = ref(1);
+  const totalCount = ref(0);
   const messages = ref<Message[]>([]);
   // const sortedMessages = computed<Message[]>(() =>
   //   [...messages.value].sort(getSortFunction(columnSortings.get(sortByInstances.value.property), sortByInstances.value.isAscending ? SortDirection.Ascending : SortDirection.Descending))
@@ -42,7 +44,8 @@ export const useAuditStore = defineStore("AuditStore", () => {
 
   const dataRetriever = useAutoRefresh(async () => {
     try {
-      const [, data] = await useTypedFetchFromServiceControl<Message[]>("messages");
+      const [response, data] = await useTypedFetchFromServiceControl<Message[]>(`messages/?include_system_messages=false&per_page=${itemsPerPage.value}&page=${selectedPage.value}`);
+      totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
       messages.value = data;
     } catch (e) {
       messages.value = [];
@@ -50,22 +53,23 @@ export const useAuditStore = defineStore("AuditStore", () => {
     }
   }, null);
 
+  const refresh = dataRetriever.executeAndResetTimer;
+  watch(itemsPerPage, () => refresh());
+  watch(selectedPage, () => refresh());
+
   function setMessageFilterString(filter: string) {
     messageFilterString.value = filter;
   }
 
-  function setItemsPerPage(value: number) {
-    itemsPerPage.value = value;
-  }
-
   return {
-    refresh: dataRetriever.executeAndResetTimer,
+    refresh,
     updateRefreshTimer: dataRetriever.updateTimeout,
     sortByInstances,
     messages,
     messageFilterString,
     itemsPerPage,
-    setItemsPerPage,
+    selectedPage,
+    totalCount,
   };
 });
 

From 322f8018834d2cc4d50c74cea32da44afe1769f6 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 14 Mar 2025 14:23:51 +0800
Subject: [PATCH 15/16] implement server side sorting

---
 src/Frontend/src/stores/AuditStore.ts | 28 +++++++++++++--------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index e64aa15aa..991ee5643 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -2,7 +2,6 @@ import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceCon
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { ref, watch } from "vue";
 import useAutoRefresh from "@/composables/autoRefresh";
-//import { SortDirection, type GroupPropertyType } from "@/resources/SortOptions";
 import type { SortInfo } from "@/components/SortInfo";
 import Message from "@/resources/Message";
 
@@ -14,19 +13,18 @@ export enum ColumnNames {
   ProcessingTime = "processingTime",
 }
 
-// const columnSortings = new Map<string, (endpoint: Message) => GroupPropertyType>([
-//   // [ColumnNames.Name, (endpoint) => endpoint.name],
-//   // [ColumnNames.InstancesDown, (endpoint) => endpoint.alive_count - endpoint.down_count],
-//   // [ColumnNames.InstancesTotal, (endpoint) => endpoint.alive_count + endpoint.down_count],
-//   // [ColumnNames.LastHeartbeat, (endpoint) => moment.utc(endpoint.heartbeat_information?.last_report_at ?? "1975-01-01T00:00:00")],
-//   // [ColumnNames.Tracked, (endpoint) => endpoint.track_instances],
-//   // [ColumnNames.TrackToggle, (endpoint) => endpoint.track_instances],
-// ]);
+const columnSortings = new Map<string, string>([
+  [ColumnNames.Status, "status"],
+  [ColumnNames.MessageId, "id"],
+  [ColumnNames.MessageType, "message_type"],
+  [ColumnNames.TimeSent, "time_sent"],
+  [ColumnNames.ProcessingTime, "processing_time"],
+]);
 
 export const useAuditStore = defineStore("AuditStore", () => {
   const sortByInstances = ref<SortInfo>({
-    property: ColumnNames.MessageId,
-    isAscending: true,
+    property: ColumnNames.TimeSent,
+    isAscending: false,
   });
 
   const messageFilterString = ref("");
@@ -34,9 +32,6 @@ export const useAuditStore = defineStore("AuditStore", () => {
   const selectedPage = ref(1);
   const totalCount = ref(0);
   const messages = ref<Message[]>([]);
-  // const sortedMessages = computed<Message[]>(() =>
-  //   [...messages.value].sort(getSortFunction(columnSortings.get(sortByInstances.value.property), sortByInstances.value.isAscending ? SortDirection.Ascending : SortDirection.Descending))
-  // );
   // const filteredMessages = computed<Message[]>(() => sortedMessages.value.filter((message) => !messageFilterString.value || message.id.toLowerCase().includes(messageFilterString.value.toLowerCase())));
   watch(messageFilterString, (newValue) => {
     setMessageFilterString(newValue);
@@ -44,7 +39,9 @@ export const useAuditStore = defineStore("AuditStore", () => {
 
   const dataRetriever = useAutoRefresh(async () => {
     try {
-      const [response, data] = await useTypedFetchFromServiceControl<Message[]>(`messages/?include_system_messages=false&per_page=${itemsPerPage.value}&page=${selectedPage.value}`);
+      const [response, data] = await useTypedFetchFromServiceControl<Message[]>(
+        `messages/?include_system_messages=false&per_page=${itemsPerPage.value}&page=${selectedPage.value}&sort=${columnSortings.get(sortByInstances.value.property)}&direction=${sortByInstances.value.isAscending ? "asc" : "desc"}`
+      );
       totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
       messages.value = data;
     } catch (e) {
@@ -56,6 +53,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
   const refresh = dataRetriever.executeAndResetTimer;
   watch(itemsPerPage, () => refresh());
   watch(selectedPage, () => refresh());
+  watch(sortByInstances, () => refresh());
 
   function setMessageFilterString(filter: string) {
     messageFilterString.value = filter;

From 9cf0ac4bee00abdf0aa94d7724f5c472874a81d3 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 14 Mar 2025 15:20:44 +0800
Subject: [PATCH 16/16] scroll on list instead of view, allowing the table
 headers to always be visible

---
 .../src/components/audit/AuditList.vue        | 52 +++++++++++--------
 src/Frontend/src/views/AuditView.vue          | 18 ++++++-
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 798836d82..20c00e852 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -66,29 +66,31 @@ function formatDotNetTimespan(timespan: string) {
 </script>
 
 <template>
-  <RefreshConfig id="auditListRefresh" @change="store.updateRefreshTimer" @manual-refresh="store.refresh" />
-  <section role="table" aria-label="endpoint-instances">
-    <!--Table headings-->
-    <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-      <div role="columnheader" :aria-label="ColumnNames.Status" class="status">
-        <SortableColumn :sort-by="ColumnNames.Status" v-model="sortByInstances" :default-ascending="true">Status</SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="ColumnNames.MessageId" class="col-3">
-        <SortableColumn :sort-by="ColumnNames.MessageId" v-model="sortByInstances" :default-ascending="true">Message Id</SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="ColumnNames.MessageType" class="col-3">
-        <SortableColumn :sort-by="ColumnNames.MessageType" v-model="sortByInstances" :default-ascending="true">Type</SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="ColumnNames.TimeSent" class="col-2">
-        <SortableColumn :sort-by="ColumnNames.TimeSent" v-model="sortByInstances">Time Sent</SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="ColumnNames.ProcessingTime" class="col-2">
-        <SortableColumn :sort-by="ColumnNames.ProcessingTime" v-model="sortByInstances">Processing Time</SortableColumn>
+  <section class="section-table" role="table" aria-label="endpoint-instances">
+    <div class="header">
+      <RefreshConfig id="auditListRefresh" @change="store.updateRefreshTimer" @manual-refresh="store.refresh" />
+      <!--Table headings-->
+      <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+        <div role="columnheader" :aria-label="ColumnNames.Status" class="status">
+          <SortableColumn :sort-by="ColumnNames.Status" v-model="sortByInstances" :default-ascending="true">Status</SortableColumn>
+        </div>
+        <div role="columnheader" :aria-label="ColumnNames.MessageId" class="col-3">
+          <SortableColumn :sort-by="ColumnNames.MessageId" v-model="sortByInstances" :default-ascending="true">Message Id</SortableColumn>
+        </div>
+        <div role="columnheader" :aria-label="ColumnNames.MessageType" class="col-3">
+          <SortableColumn :sort-by="ColumnNames.MessageType" v-model="sortByInstances" :default-ascending="true">Type</SortableColumn>
+        </div>
+        <div role="columnheader" :aria-label="ColumnNames.TimeSent" class="col-2">
+          <SortableColumn :sort-by="ColumnNames.TimeSent" v-model="sortByInstances">Time Sent</SortableColumn>
+        </div>
+        <div role="columnheader" :aria-label="ColumnNames.ProcessingTime" class="col-2">
+          <SortableColumn :sort-by="ColumnNames.ProcessingTime" v-model="sortByInstances">Processing Time</SortableColumn>
+        </div>
       </div>
     </div>
     <!--Table rows-->
     <!--NOTE: currently the DataView pages on the client only: we need to make it server data aware (i.e. the total will be the count from the server, not the length of the data we have locally)-->
-    <div role="rowgroup" aria-label="endpoints">
+    <div class="messages" role="rowgroup" aria-label="messages">
       <div role="row" :aria-label="message.message_id" class="row grid-row" v-for="message in messages" :key="message.id">
         <div role="cell" aria-label="status" class="status" :title="statusToName(message.status)">
           <div class="status-icon" :class="statusToIcon(message.status)"></div>
@@ -131,8 +133,16 @@ function formatDotNetTimespan(timespan: string) {
   display: block;
 }
 
-.instances-muted {
-  font-weight: bold;
+.section-table {
+  overflow: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.messages {
+  flex: 1;
+  overflow: auto;
 }
 
 .status {
diff --git a/src/Frontend/src/views/AuditView.vue b/src/Frontend/src/views/AuditView.vue
index bbd69cd69..70eccf222 100644
--- a/src/Frontend/src/views/AuditView.vue
+++ b/src/Frontend/src/views/AuditView.vue
@@ -8,7 +8,7 @@ import AuditList from "@/components/audit/AuditList.vue";
   <LicenseExpired />
   <template v-if="!licenseStatus.isExpired">
     <div class="container">
-      <div class="row">
+      <div class="row title">
         <div class="col-12">
           <h1>All Messages</h1>
         </div>
@@ -19,3 +19,19 @@ import AuditList from "@/components/audit/AuditList.vue";
     </div>
   </template>
 </template>
+
+<style scoped>
+.container,
+.row {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.row.title {
+  flex: 0;
+  min-height: fit-content;
+}
+</style>