From 465c65c29c8fc8cf7605f97068150a2b182d13e8 Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Mon, 23 Jun 2025 14:47:49 +1000
Subject: [PATCH 01/12] Remove table-based layout

---
 .../components/heartbeats/EndpointInstances.vue  | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 9853305a4..31c19420f 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -178,18 +178,12 @@ async function toggleAlerts(instance: EndpointsView) {
           <div>
             Actions
             <tippy max-width="400px">
-              <i :style="{ fontSize: '1.1em' }" class="fa fa-info-circle text-primary" />
+              <i :style="{ fontSize: '1.1em', marginLeft: '0.25em' }" class="fa fa-info-circle text-primary" />
               <template #content>
-                <table>
-                  <tbody>
-                    <tr>
-                      <td style="padding: 3px; width: 6em; text-align: end; align-content: center">
-                        <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash text-white" /> Delete</button>
-                      </td>
-                      <td style="padding: 3px">Delete an instance when that instance has been decommissioned.</td>
-                    </tr>
-                  </tbody>
-                </table>
+                <div class="d-flex align-items-center p-1">
+                  <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
+                  <span>Delete an instance when that instance has been decommissioned.</span>
+                </div>
               </template>
             </tippy>
           </div>

From f9aafd89e8d4dac581c87909d0f424b9fbd04f48 Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Mon, 23 Jun 2025 15:07:02 +1000
Subject: [PATCH 02/12] Add ColumnHelp component

---
 .../src/components/heartbeats/ColumnHelp.vue  |  8 ++++++
 .../heartbeats/EndpointInstances.vue          | 28 ++++++++-----------
 2 files changed, 19 insertions(+), 17 deletions(-)
 create mode 100644 src/Frontend/src/components/heartbeats/ColumnHelp.vue

diff --git a/src/Frontend/src/components/heartbeats/ColumnHelp.vue b/src/Frontend/src/components/heartbeats/ColumnHelp.vue
new file mode 100644
index 000000000..19b4eb43c
--- /dev/null
+++ b/src/Frontend/src/components/heartbeats/ColumnHelp.vue
@@ -0,0 +1,8 @@
+<template>
+  <tippy max-width="400px">
+    <i class="fa fa-sm fa-info-circle text-primary ps-1" />
+    <template #content>
+      <slot />
+    </template>
+  </tippy>
+</template>
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 31c19420f..6d10ecdfe 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -10,7 +10,6 @@ import OnOffSwitch from "../OnOffSwitch.vue";
 import routeLinks from "@/router/routeLinks";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
-import { Tippy } from "vue-tippy";
 import { useHeartbeatInstancesStore, ColumnNames } from "@/stores/HeartbeatInstancesStore";
 import { EndpointsView } from "@/resources/EndpointView";
 import endpointSettingsClient from "@/components/heartbeats/endpointSettingsClient";
@@ -19,6 +18,7 @@ import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import LastHeartbeat from "@/components/heartbeats/LastHeartbeat.vue";
 import FilterInput from "../FilterInput.vue";
 import ResultsCount from "../ResultsCount.vue";
+import ColumnHelp from "./ColumnHelp.vue";
 
 enum Operation {
   Mute = "mute",
@@ -167,25 +167,19 @@ async function toggleAlerts(instance: EndpointsView) {
         </div>
         <div role="columnheader" :aria-label="ColumnNames.MuteToggle" class="col-2 centre">
           <SortableColumn :sort-by="ColumnNames.MuteToggle" v-model="sortByInstances">Mute Alerts</SortableColumn>
-          <tippy max-width="400px">
-            <i :style="{ fontSize: '1.1em', marginLeft: '0.25em' }" class="fa fa-info-circle text-primary" />
-            <template #content>
-              <span>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</span>
-            </template>
-          </tippy>
+          <ColumnHelp>
+            <span>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</span>
+          </ColumnHelp>
         </div>
         <div role="columnheader" aria-label="actions" class="col-1">
           <div>
-            Actions
-            <tippy max-width="400px">
-              <i :style="{ fontSize: '1.1em', marginLeft: '0.25em' }" class="fa fa-info-circle text-primary" />
-              <template #content>
-                <div class="d-flex align-items-center p-1">
-                  <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
-                  <span>Delete an instance when that instance has been decommissioned.</span>
-                </div>
-              </template>
-            </tippy>
+            <span>Actions</span>
+            <ColumnHelp>
+              <div class="d-flex align-items-center p-1">
+                <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
+                <span>Delete an instance when that instance has been decommissioned.</span>
+              </div>
+            </ColumnHelp>
           </div>
         </div>
       </div>

From 992a5d2167c8852f9464ddca20f09e7abc0b1629 Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Tue, 24 Jun 2025 10:29:34 +1000
Subject: [PATCH 03/12] Fixed delete button

---
 .../src/components/heartbeats/ColumnHelp.vue      | 15 ++++++++++++++-
 .../components/heartbeats/EndpointInstances.vue   | 11 ++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/Frontend/src/components/heartbeats/ColumnHelp.vue b/src/Frontend/src/components/heartbeats/ColumnHelp.vue
index 19b4eb43c..2c980e71f 100644
--- a/src/Frontend/src/components/heartbeats/ColumnHelp.vue
+++ b/src/Frontend/src/components/heartbeats/ColumnHelp.vue
@@ -1,5 +1,18 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    interactive?: boolean;
+  }>(),
+  {
+    interactive: false,
+  }
+);
+</script>
+
 <template>
-  <tippy max-width="400px">
+  <tippy max-width="400px" :interactive="props.interactive">
     <i class="fa fa-sm fa-info-circle text-primary ps-1" />
     <template #content>
       <slot />
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 6d10ecdfe..5d65822d6 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -171,17 +171,14 @@ async function toggleAlerts(instance: EndpointsView) {
             <span>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</span>
           </ColumnHelp>
         </div>
-        <div role="columnheader" aria-label="actions" class="col-1">
-          <div>
-            <span>Actions</span>
-            <ColumnHelp>
+        <StandardColumn columnLabel="Actions">
+          <ColumnHelp :interactive="true">
               <div class="d-flex align-items-center p-1">
                 <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
-                <span>Delete an instance when that instance has been decommissioned.</span>
+              <span style="text-transform: none">Delete an instance when that instance has been decommissioned.</span>
               </div>
             </ColumnHelp>
-          </div>
-        </div>
+        </StandardColumn>
       </div>
       <no-data v-if="filteredValidInstances.length === 0" message="No endpoint instances found. For untracked endpoints, disconnected instances are automatically pruned.">
         <div v-if="totalValidInstances.length === 0" class="delete-all">

From 7b3f83f9233535ad23b2c72dd28b303a2e4393ec Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Tue, 24 Jun 2025 15:20:57 +1000
Subject: [PATCH 04/12] Add ColumnHeader (WIP)

---
 src/Frontend/src/components/ColumnHeader.vue  | 127 ++++++++++++++++++
 .../src/components/StandardColumn.vue         |  20 +++
 .../heartbeats/EndpointInstances.vue          |  34 ++---
 .../components/heartbeats/HeartbeatsList.vue  |  30 ++---
 4 files changed, 168 insertions(+), 43 deletions(-)
 create mode 100644 src/Frontend/src/components/ColumnHeader.vue
 create mode 100644 src/Frontend/src/components/StandardColumn.vue

diff --git a/src/Frontend/src/components/ColumnHeader.vue b/src/Frontend/src/components/ColumnHeader.vue
new file mode 100644
index 000000000..e09acb36d
--- /dev/null
+++ b/src/Frontend/src/components/ColumnHeader.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import type { SortInfo } from "./SortInfo";
+
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    label: string;
+    sortable?: boolean;
+    sortBy?: string;
+    sortState?: SortInfo;
+    defaultAscending?: boolean;
+    columnClass: string;
+    interactiveHelp?: boolean;
+  }>(),
+  {
+    sortable: false,
+    defaultAscending: false,
+    interactiveHelp: false,
+  }
+);
+
+const slots = useSlots();
+const sortByColumn = computed(() => props.sortBy || props.name);
+const activeSortColumn = defineModel<SortInfo>({ required: true });
+const isSortActive = computed(() => activeSortColumn.value?.property === sortByColumn.value);
+const sortIcon = computed(() => (activeSortColumn.value.isAscending ? "sort-up" : "sort-down"));
+
+function toggleSort() {
+  activeSortColumn.value = { property: sortByColumn.value, isAscending: isSortActive.value ? !activeSortColumn.value.isAscending : props.defaultAscending };
+}
+</script>
+
+<template>
+  <div role="columnheader" :aria-label="props.name" :class="props.columnClass">
+    <div class="box-header">
+      <button v-if="props.sortable" @click="toggleSort" class="column-header-button" :aria-label="props.name">
+        <span>
+          {{ props.label }}
+          <span class="table-header-unit"><slot name="unit"></slot></span>
+          <span v-if="isSortActive">
+            <i role="img" :class="sortIcon" :aria-label="sortIcon"></i>
+          </span>
+          <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
+            <i class="fa fa-sm fa-info-circle text-primary ps-1" />
+            <template #content>
+              <slot name="help" />
+            </template>
+          </tippy>
+        </span>
+      </button>
+      <div v-else class="column-header">
+        <span>
+          {{ props.label }}
+          <span class="table-header-unit"><slot name="unit"></slot></span>
+          <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
+            <i class="fa fa-sm fa-info-circle text-primary ps-1" />
+            <template #content>
+              <slot name="help" />
+            </template>
+          </tippy>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.column-header {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: default;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.column-header-button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+}
+
+.column-header-button span {
+  text-transform: uppercase;
+  display: inline-block;
+  text-align: left;
+}
+
+.column-header-button:hover span {
+  text-decoration: underline;
+}
+
+.column-header-button div {
+  display: inline-block;
+}
+
+.sort-up,
+.sort-down {
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 8px;
+  height: 14px;
+  padding: 0;
+  margin-left: 10px;
+}
+
+.sort-up {
+  background-image: url("@/assets/sort-up.svg");
+}
+
+.sort-down {
+  background: url("@/assets/sort-down.svg");
+}
+
+.sort-up,
+.sort-down {
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>
diff --git a/src/Frontend/src/components/StandardColumn.vue b/src/Frontend/src/components/StandardColumn.vue
new file mode 100644
index 000000000..f1f9a71bc
--- /dev/null
+++ b/src/Frontend/src/components/StandardColumn.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+const props = defineProps<{
+  columnLabel: string;
+}>();
+</script>
+
+<template>
+  <div role="columnheader" aria-label="actions" class="col-1">
+    <span>{{ props.columnLabel }}</span>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.column-header-button span {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 5d65822d6..8cf985453 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -4,7 +4,7 @@ import { storeToRefs } from "pinia";
 import { useRoute, useRouter } from "vue-router";
 import { computed, onMounted, ref } from "vue";
 import { EndpointStatus } from "@/resources/Heartbeat";
-import SortableColumn from "@/components/SortableColumn.vue";
+import ColumnHeader from "@/components/ColumnHeader.vue";
 import DataView from "@/components/DataView.vue";
 import OnOffSwitch from "../OnOffSwitch.vue";
 import routeLinks from "@/router/routeLinks";
@@ -18,7 +18,6 @@ import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import LastHeartbeat from "@/components/heartbeats/LastHeartbeat.vue";
 import FilterInput from "../FilterInput.vue";
 import ResultsCount from "../ResultsCount.vue";
-import ColumnHelp from "./ColumnHelp.vue";
 
 enum Operation {
   Mute = "mute",
@@ -159,26 +158,19 @@ async function toggleAlerts(instance: EndpointsView) {
     <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.InstanceName" class="col-6">
-          <SortableColumn :sort-by="ColumnNames.InstanceName" v-model="sortByInstances" :default-ascending="true">Host Name</SortableColumn>
-        </div>
-        <div role="columnheader" :aria-label="ColumnNames.LastHeartbeat" class="col-2">
-          <SortableColumn :sort-by="ColumnNames.LastHeartbeat" v-model="sortByInstances">Last Heartbeat</SortableColumn>
-        </div>
-        <div role="columnheader" :aria-label="ColumnNames.MuteToggle" class="col-2 centre">
-          <SortableColumn :sort-by="ColumnNames.MuteToggle" v-model="sortByInstances">Mute Alerts</SortableColumn>
-          <ColumnHelp>
-            <span>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</span>
-          </ColumnHelp>
-        </div>
-        <StandardColumn columnLabel="Actions">
-          <ColumnHelp :interactive="true">
-              <div class="d-flex align-items-center p-1">
-                <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
+        <ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" columnClass="col-6" v-model="sortByInstances" sortable default-ascending />
+        <ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" :sortable="true" v-model="sortByInstances" />
+        <ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" columnClass="col-2 centre" v-model="sortByInstances">
+          <template #help>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</template>
+        </ColumnHeader>
+        <ColumnHeader name="actions" label="Actions" columnClass="col-1" :sortable="false" :interactive-help="true" v-model="sortByInstances">
+          <template #help>
+            <div class="d-flex align-items-center p-1">
+              <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
               <span style="text-transform: none">Delete an instance when that instance has been decommissioned.</span>
-              </div>
-            </ColumnHelp>
-        </StandardColumn>
+            </div>
+          </template>
+        </ColumnHeader>
       </div>
       <no-data v-if="filteredValidInstances.length === 0" message="No endpoint instances found. For untracked endpoints, disconnected instances are automatically pruned.">
         <div v-if="totalValidInstances.length === 0" class="delete-all">
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
index 7a59e2957..1f46e0a17 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useHeartbeatsStore, ColumnNames } from "@/stores/HeartbeatsStore";
 import { storeToRefs } from "pinia";
-import SortableColumn from "@/components/SortableColumn.vue";
 import DataView from "@/components/DataView.vue";
 import OnOffSwitch from "../OnOffSwitch.vue";
 import routeLinks from "@/router/routeLinks";
@@ -11,6 +10,7 @@ import { LogicalEndpoint } from "@/resources/Heartbeat";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import LastHeartbeat from "@/components/heartbeats/LastHeartbeat.vue";
+import ColumnHeader from "../ColumnHeader.vue";
 
 defineProps<{
   data: LogicalEndpoint[];
@@ -42,27 +42,13 @@ function endpointHealth(endpoint: LogicalEndpoint) {
   <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 v-if="columns.includes(ColumnNames.Name)" role="columnheader" :aria-label="ColumnNames.Name" class="col-6">
-        <SortableColumn :sort-by="ColumnNames.Name" v-model="sortByInstances" :default-ascending="true">Name</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.InstancesDown)" role="columnheader" :aria-label="ColumnNames.InstancesDown" class="col-2">
-        <SortableColumn :sort-by="ColumnNames.InstancesDown" v-model="sortByInstances" :default-ascending="true">Instances</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.InstancesTotal)" role="columnheader" :aria-label="ColumnNames.InstancesTotal" class="col-2">
-        <SortableColumn :sort-by="ColumnNames.InstancesTotal" v-model="sortByInstances" :default-ascending="true">Instances</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.LastHeartbeat)" role="columnheader" :aria-label="ColumnNames.LastHeartbeat" class="col-2">
-        <SortableColumn :sort-by="ColumnNames.LastHeartbeat" v-model="sortByInstances">Last Heartbeat</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.Tracked)" role="columnheader" :aria-label="ColumnNames.Tracked" class="col-1 centre">
-        <SortableColumn :sort-by="ColumnNames.Tracked" v-model="sortByInstances">Track Instances</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.TrackToggle)" role="columnheader" :aria-label="ColumnNames.Tracked" class="col-2 centre">
-        <SortableColumn :sort-by="ColumnNames.TrackToggle" v-model="sortByInstances">Track Instances</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.Muted)" role="columnheader" :aria-label="ColumnNames.Muted" class="col-1 centre">
-        <SortableColumn :sort-by="ColumnNames.Muted" v-model="sortByInstances">Instances Muted</SortableColumn>
-      </div>
+      <ColumnHeader v-if="columns.includes(ColumnNames.Name)" :name="ColumnNames.Name" label="Name" columnClass="col-6" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesDown)" :name="ColumnNames.InstancesDown" label="Instances Down" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesTotal)" :name="ColumnNames.InstancesTotal" label="Instances Total" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.LastHeartbeat)" :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.Tracked)" :name="ColumnNames.Tracked" label="Track Instances" columnClass="col-1 centre" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.TrackToggle)" :name="ColumnNames.TrackToggle" label="Track Instances" columnClass="col-2 centre" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.Muted)" :name="ColumnNames.Muted" label="Instances Muted" columnClass="col-1 centre" sortable v-model="sortByInstances" />
     </div>
     <!--Table rows-->
     <DataView :data="data" :show-items-per-page="true" :items-per-page="itemsPerPage" @items-per-page-changed="store.setItemsPerPage">

From 0e6717cadb22e514c5c74e5e6b855dbb494a4e64 Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Thu, 26 Jun 2025 13:26:47 +1000
Subject: [PATCH 05/12] Simplify column headers.

---
 src/Frontend/src/components/ColumnHeader.vue  | 36 ++++----
 .../heartbeats/EndpointInstances.vue          |  6 +-
 .../components/heartbeats/HeartbeatsList.vue  |  2 +-
 .../components/monitoring/EndpointList.vue    | 85 +++++--------------
 .../monitoring/EndpointListColumnHeader.vue   | 31 -------
 5 files changed, 44 insertions(+), 116 deletions(-)
 delete mode 100644 src/Frontend/src/components/monitoring/EndpointListColumnHeader.vue

diff --git a/src/Frontend/src/components/ColumnHeader.vue b/src/Frontend/src/components/ColumnHeader.vue
index e09acb36d..c1956751f 100644
--- a/src/Frontend/src/components/ColumnHeader.vue
+++ b/src/Frontend/src/components/ColumnHeader.vue
@@ -41,25 +41,25 @@ function toggleSort() {
           <span v-if="isSortActive">
             <i role="img" :class="sortIcon" :aria-label="sortIcon"></i>
           </span>
-          <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
-            <i class="fa fa-sm fa-info-circle text-primary ps-1" />
-            <template #content>
-              <slot name="help" />
-            </template>
-          </tippy>
         </span>
+        <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
+          <i class="fa fa-sm fa-info-circle text-primary ps-1" />
+          <template #content>
+            <slot name="help" />
+          </template>
+        </tippy>
       </button>
       <div v-else class="column-header">
         <span>
           {{ props.label }}
           <span class="table-header-unit"><slot name="unit"></slot></span>
-          <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
-            <i class="fa fa-sm fa-info-circle text-primary ps-1" />
-            <template #content>
-              <slot name="help" />
-            </template>
-          </tippy>
         </span>
+        <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
+          <i class="fa fa-sm fa-info-circle text-primary ps-1" />
+          <template #content>
+            <slot name="help" />
+          </template>
+        </tippy>
       </div>
     </div>
   </div>
@@ -75,6 +75,12 @@ function toggleSort() {
   display: flex;
   flex-wrap: wrap;
 }
+.column-header span,
+.column-header-button span {
+  text-transform: uppercase;
+  display: inline-block;
+  text-align: left;
+}
 .column-header-button {
   background: none;
   border: none;
@@ -86,12 +92,6 @@ function toggleSort() {
   align-items: end;
 }
 
-.column-header-button span {
-  text-transform: uppercase;
-  display: inline-block;
-  text-align: left;
-}
-
 .column-header-button:hover span {
   text-decoration: underline;
 }
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 8cf985453..70cca4c16 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -159,15 +159,15 @@ async function toggleAlerts(instance: EndpointsView) {
       <!--Table headings-->
       <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
         <ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" columnClass="col-6" v-model="sortByInstances" sortable default-ascending />
-        <ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" :sortable="true" v-model="sortByInstances" />
+        <ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" v-model="sortByInstances" sortable />
         <ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" columnClass="col-2 centre" v-model="sortByInstances">
           <template #help>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</template>
         </ColumnHeader>
-        <ColumnHeader name="actions" label="Actions" columnClass="col-1" :sortable="false" :interactive-help="true" v-model="sortByInstances">
+        <ColumnHeader name="actions" label="Actions" columnClass="col-1" interactive-help v-model="sortByInstances">
           <template #help>
             <div class="d-flex align-items-center p-1">
               <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
-              <span style="text-transform: none">Delete an instance when that instance has been decommissioned.</span>
+              <span>Delete an instance when that instance has been decommissioned.</span>
             </div>
           </template>
         </ColumnHeader>
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
index 1f46e0a17..cbdc8914d 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
@@ -44,7 +44,7 @@ function endpointHealth(endpoint: LogicalEndpoint) {
     <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
       <ColumnHeader v-if="columns.includes(ColumnNames.Name)" :name="ColumnNames.Name" label="Name" columnClass="col-6" sortable v-model="sortByInstances" default-ascending />
       <ColumnHeader v-if="columns.includes(ColumnNames.InstancesDown)" :name="ColumnNames.InstancesDown" label="Instances Down" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
-      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesTotal)" :name="ColumnNames.InstancesTotal" label="Instances Total" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesTotal)" :name="ColumnNames.InstancesTotal" label="Instances" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
       <ColumnHeader v-if="columns.includes(ColumnNames.LastHeartbeat)" :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" sortable v-model="sortByInstances" />
       <ColumnHeader v-if="columns.includes(ColumnNames.Tracked)" :name="ColumnNames.Tracked" label="Track Instances" columnClass="col-1 centre" sortable v-model="sortByInstances" />
       <ColumnHeader v-if="columns.includes(ColumnNames.TrackToggle)" :name="ColumnNames.TrackToggle" label="Track Instances" columnClass="col-2 centre" sortable v-model="sortByInstances" />
diff --git a/src/Frontend/src/components/monitoring/EndpointList.vue b/src/Frontend/src/components/monitoring/EndpointList.vue
index 3582256ff..b93762823 100644
--- a/src/Frontend/src/components/monitoring/EndpointList.vue
+++ b/src/Frontend/src/components/monitoring/EndpointList.vue
@@ -1,79 +1,38 @@
 <script setup lang="ts">
-import EndpointListColumnHeader from "./EndpointListColumnHeader.vue";
+import ColumnHeader from "../ColumnHeader.vue";
 import EndpointListRow, { columnName } from "./EndpointListRow.vue";
 import { useMonitoringStore } from "@/stores/MonitoringStore";
 import { storeToRefs } from "pinia";
 
 const monitoringStore = useMonitoringStore();
 const { sortBy: activeColumn } = storeToRefs(monitoringStore);
-
-type EndpointListColumn = {
-  name: columnName;
-  displayName: string;
-  displayUnit?: string;
-  sort: string;
-  toolTip?: string;
-};
-
-const columns: EndpointListColumn[] = [
-  {
-    name: columnName.ENDPOINTNAME,
-    displayName: "Endpoint name",
-    sort: columnName.ENDPOINTNAME,
-  },
-  {
-    name: columnName.QUEUELENGTH,
-    displayName: "Queue Length",
-    displayUnit: "(MSGS)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.QUEUELENGTH,
-    toolTip: "Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.",
-  },
-  {
-    name: columnName.THROUGHPUT,
-    displayName: "Throughput",
-    displayUnit: "(msgs/s)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.THROUGHPUT,
-    toolTip: "Throughput: The number of messages per second successfully processed by a receiving endpoint.",
-  },
-  {
-    name: columnName.SCHEDULEDRETRIES,
-    displayName: "Scheduled retries",
-    displayUnit: "(msgs/s)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.SCHEDULEDRETRIES,
-    toolTip: "Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).",
-  },
-  {
-    name: columnName.PROCESSINGTIME,
-    displayName: "Processing Time",
-    displayUnit: "(t)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.PROCESSINGTIME,
-    toolTip: "Processing time: The time taken for a receiving endpoint to successfully process a message.",
-  },
-  {
-    name: columnName.CRITICALTIME,
-    displayName: "Critical Time",
-    displayUnit: "(t)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.CRITICALTIME,
-    toolTip: "Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.",
-  },
-];
 </script>
 
 <template>
   <section role="table" aria-label="endpoint-list">
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="table-head-row">
-      <EndpointListColumnHeader
-        v-for="(column, i) in columns"
-        :key="column.name"
-        :columnName="column.name"
-        :columnSort="column.sort"
-        :displayName="column.displayName"
-        :displayUnit="column.displayUnit"
-        :toolTip="column.toolTip"
-        :isFirstCol="i === 0"
-        v-model="activeColumn"
-      />
+      <ColumnHeader :name="columnName.ENDPOINTNAME" label="Endpoint name" column-class="table-first-col" v-model="activeColumn" sortable default-ascending />
+      <ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
+        <template #unit>(msgs)</template>
+        <template #help>Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.</template>
+      </ColumnHeader>
+      <ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
+        <template #unit>(msgs/s)</template>
+        <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
+      </ColumnHeader>
+      <ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
+        <template #unit>(msgs/s)</template>
+        <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
+      </ColumnHeader>
+      <ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
+        <template #unit>(t)</template>
+        <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
+      </ColumnHeader>
+      <ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
+        <template #unit>(t)</template>
+        <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
+      </ColumnHeader>
     </div>
     <div>
       <div v-if="monitoringStore.endpointListIsGrouped" role="rowgroup" aria-label="grouped-endpoints">
diff --git a/src/Frontend/src/components/monitoring/EndpointListColumnHeader.vue b/src/Frontend/src/components/monitoring/EndpointListColumnHeader.vue
deleted file mode 100644
index 8893c3750..000000000
--- a/src/Frontend/src/components/monitoring/EndpointListColumnHeader.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import SortableColumn from "../SortableColumn.vue";
-import { SortInfo } from "../SortInfo";
-
-const props = withDefaults(
-  defineProps<{
-    columnName: string;
-    columnSort: string;
-    displayName: string;
-    displayUnit?: string;
-    toolTip?: string;
-    isFirstCol?: boolean;
-  }>(),
-  { isFirstCol: false }
-);
-
-const activeColumn = defineModel<SortInfo>({ required: true });
-const defaultAscending = props.isFirstCol ? true : undefined;
-</script>
-
-<template>
-  <div role="columnheader" :aria-label="columnName" :class="isFirstCol ? 'table-first-col' : 'table-col'">
-    <SortableColumn :sort-by="columnSort" v-model="activeColumn" :default-ascending="defaultAscending" v-tippy="toolTip">
-      {{ displayName }}<template v-if="displayUnit" #unit>&nbsp;{{ displayUnit }}</template>
-    </SortableColumn>
-  </div>
-</template>
-
-<style scoped>
-@import "endpointTables.css";
-</style>

From 4d06a141ed5a7528ae8fdee1cd657912b8de8fb5 Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Thu, 26 Jun 2025 14:47:07 +1000
Subject: [PATCH 06/12] Clean-up unused components

---
 .../src/components/StandardColumn.vue         | 20 ------------------
 .../src/components/heartbeats/ColumnHelp.vue  | 21 -------------------
 2 files changed, 41 deletions(-)
 delete mode 100644 src/Frontend/src/components/StandardColumn.vue
 delete mode 100644 src/Frontend/src/components/heartbeats/ColumnHelp.vue

diff --git a/src/Frontend/src/components/StandardColumn.vue b/src/Frontend/src/components/StandardColumn.vue
deleted file mode 100644
index f1f9a71bc..000000000
--- a/src/Frontend/src/components/StandardColumn.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { defineProps } from "vue";
-const props = defineProps<{
-  columnLabel: string;
-}>();
-</script>
-
-<template>
-  <div role="columnheader" aria-label="actions" class="col-1">
-    <span>{{ props.columnLabel }}</span>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.column-header-button span {
-  display: flex;
-  align-items: center;
-}
-</style>
diff --git a/src/Frontend/src/components/heartbeats/ColumnHelp.vue b/src/Frontend/src/components/heartbeats/ColumnHelp.vue
deleted file mode 100644
index 2c980e71f..000000000
--- a/src/Frontend/src/components/heartbeats/ColumnHelp.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { defineProps } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    interactive?: boolean;
-  }>(),
-  {
-    interactive: false,
-  }
-);
-</script>
-
-<template>
-  <tippy max-width="400px" :interactive="props.interactive">
-    <i class="fa fa-sm fa-info-circle text-primary ps-1" />
-    <template #content>
-      <slot />
-    </template>
-  </tippy>
-</template>

From 8d4e21c58cd9509cc2bf7aaad14ba89b222aa6f0 Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Thu, 26 Jun 2025 14:47:34 +1000
Subject: [PATCH 07/12] Refactor column headers (WIP)

---
 .../monitoring/EndpointInstances.vue          | 47 ++++++-------------
 .../monitoring/EndpointMessageTypes.vue       | 47 ++++++-------------
 2 files changed, 28 insertions(+), 66 deletions(-)

diff --git a/src/Frontend/src/components/monitoring/EndpointInstances.vue b/src/Frontend/src/components/monitoring/EndpointInstances.vue
index 705ebcfc6..f1fa215bc 100644
--- a/src/Frontend/src/components/monitoring/EndpointInstances.vue
+++ b/src/Frontend/src/components/monitoring/EndpointInstances.vue
@@ -9,6 +9,7 @@ import NoData from "@/components/NoData.vue";
 import SmallGraph from "./SmallGraph.vue";
 import type { ExtendedEndpointInstance } from "@/resources/MonitoringEndpoint";
 import routeLinks from "@/router/routeLinks";
+import ColumnHeader from "@/components/ColumnHeader.vue";
 
 const isRemovingEndpointEnabled = ref<boolean>(false);
 const router = useRouter();
@@ -57,39 +58,19 @@ onMounted(async () => {
       <!-- Breakdown by instance-->
       <!--headers-->
       <div role="row" aria-label="instances-column-headers" class="row box box-no-click table-head-row">
-        <div class="col-xs-4 col-xl-8">
-          <div role="columnheader" aria-label="instance-name" class="row box-header">
-            <div class="col-xs-12">Instance Name</div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="throughput" class="col-xs-12 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
-              Throughput <span class="table-header-unit">(msgs/s)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="scheduled-retires" class="col-xs-12 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
-              Scheduled retries <span class="table-header-unit">(msgs/s)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="processing-time" class="col-xs-12 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
-              Processing Time <span class="table-header-unit">(t)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="critical-time" class="col-xs-12 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
-              Critical Time <span class="table-header-unit">(t)</span>
-            </div>
-          </div>
-        </div>
+        <ColumnHeader name="instance-name" label="Instance Name" column-class="col-xs-4 col-xl-8" />
+        <ColumnHeader name="throughput" label="Throughput" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
+          <template #unit>(msgs/s)</template>
+        </ColumnHeader>
+        <ColumnHeader name="retires" label="Scheduled retries" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
+          <template #unit>(msgs/s)</template>
+        </ColumnHeader>
+        <ColumnHeader name="processing-time" label="Processing time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
+          <template #unit>(t)</template>
+        </ColumnHeader>
+        <ColumnHeader name="critical-time" label="Critical time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
+          <template #unit>(t)</template>
+        </ColumnHeader>
       </div>
 
       <NoData v-if="!endpoint?.instances?.length" title="No messages" message="No messages processed in this period of time"></NoData>
diff --git a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
index 504306ed0..cfca1a0cb 100644
--- a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
+++ b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
@@ -8,6 +8,7 @@ import NoData from "@/components/NoData.vue";
 import SmallGraph from "./SmallGraph.vue";
 import PaginationStrip from "@/components/PaginationStrip.vue";
 import { useMonitoringEndpointDetailsStore } from "@/stores/MonitoringEndpointDetailsStore";
+import ColumnHeader from "@/components/ColumnHeader.vue";
 
 const monitoringStore = useMonitoringEndpointDetailsStore();
 const { endpointDetails: endpoint, messageTypes, messageTypesAvailable } = storeToRefs(monitoringStore);
@@ -45,39 +46,19 @@ const paginatedMessageTypes = computed(() => {
       <!-- Breakdown by message type-->
       <!--headers-->
       <div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
-        <div class="col-xs-4 col-xl-8">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="message-type-name" class="col-xs-12">Message type name</div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="throughput" class="col-xs-12 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
-              Throughput <span class="table-header-unit">(msgs/s)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="scheduled-retires" class="col-xs-12 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
-              Scheduled retries <span class="table-header-unit">(msgs/s)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="processing-time" class="col-xs-12 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
-              Processing Time <span class="table-header-unit">(t)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="critical-time" class="col-xs-12 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
-              Critical Time <span class="table-header-unit">(t)</span>
-            </div>
-          </div>
-        </div>
+        <ColumnHeader name="message-type-name" label="Message type name" column-class="col-xs-4 col-xl-8" />
+        <ColumnHeader name="throughput" label="Throughput" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
+          <template #unit>(msgs/s)</template>
+        </ColumnHeader>
+        <ColumnHeader name="retires" label="Scheduled retries" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
+          <template #unit>(msgs/s)</template>
+        </ColumnHeader>
+        <ColumnHeader name="processing-time" label="Processing time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
+          <template #unit>(t)</template>
+        </ColumnHeader>
+        <ColumnHeader name="critical-time" label="Critical time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
+          <template #unit>(t)</template>
+        </ColumnHeader>
       </div>
 
       <no-data v-if="!endpoint?.messageTypes?.length" message="No messages processed in this period of time."></no-data>

From 7ee4b39636abd9bc3c794f31892fd9f144cf0d2a Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Thu, 26 Jun 2025 16:16:52 +1000
Subject: [PATCH 08/12] Enhance ColumnHeader component with unit prop and
 improve help tooltips

---
 src/Frontend/src/components/ColumnHeader.vue  | 25 ++++++++++---------
 .../heartbeats/EndpointInstances.vue          |  4 +--
 .../monitoring/EndpointInstances.vue          | 16 ++++++------
 .../components/monitoring/EndpointList.vue    | 15 ++++-------
 .../monitoring/EndpointMessageTypes.vue       | 16 ++++++------
 5 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/src/Frontend/src/components/ColumnHeader.vue b/src/Frontend/src/components/ColumnHeader.vue
index c1956751f..50ea2a718 100644
--- a/src/Frontend/src/components/ColumnHeader.vue
+++ b/src/Frontend/src/components/ColumnHeader.vue
@@ -6,6 +6,7 @@ const props = withDefaults(
   defineProps<{
     name: string;
     label: string;
+    unit?: string;
     sortable?: boolean;
     sortBy?: string;
     sortState?: SortInfo;
@@ -22,12 +23,12 @@ const props = withDefaults(
 
 const slots = useSlots();
 const sortByColumn = computed(() => props.sortBy || props.name);
-const activeSortColumn = defineModel<SortInfo>({ required: true });
-const isSortActive = computed(() => activeSortColumn.value?.property === sortByColumn.value);
-const sortIcon = computed(() => (activeSortColumn.value.isAscending ? "sort-up" : "sort-down"));
+const activeSortColumn = defineModel<SortInfo>();
+const isSortActive = computed(() => activeSortColumn?.value?.property === sortByColumn.value);
+const sortIcon = computed(() => (activeSortColumn?.value?.isAscending ? "sort-up" : "sort-down"));
 
 function toggleSort() {
-  activeSortColumn.value = { property: sortByColumn.value, isAscending: isSortActive.value ? !activeSortColumn.value.isAscending : props.defaultAscending };
+  activeSortColumn.value = { property: sortByColumn.value, isAscending: isSortActive.value ? !activeSortColumn?.value?.isAscending : props.defaultAscending };
 }
 </script>
 
@@ -37,22 +38,22 @@ function toggleSort() {
       <button v-if="props.sortable" @click="toggleSort" class="column-header-button" :aria-label="props.name">
         <span>
           {{ props.label }}
-          <span class="table-header-unit"><slot name="unit"></slot></span>
+          <span v-if="props.unit" class="table-header-unit">{{ props.unit }}</span>
           <span v-if="isSortActive">
             <i role="img" :class="sortIcon" :aria-label="sortIcon"></i>
           </span>
+          <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
+            <i class="fa fa-sm fa-info-circle text-primary ps-1" />
+            <template #content>
+              <slot name="help" />
+            </template>
+          </tippy>
         </span>
-        <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
-          <i class="fa fa-sm fa-info-circle text-primary ps-1" />
-          <template #content>
-            <slot name="help" />
-          </template>
-        </tippy>
       </button>
       <div v-else class="column-header">
         <span>
           {{ props.label }}
-          <span class="table-header-unit"><slot name="unit"></slot></span>
+          <span v-if="props.unit" class="table-header-unit">{{ props.unit }}</span>
         </span>
         <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
           <i class="fa fa-sm fa-info-circle text-primary ps-1" />
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 70cca4c16..4c4756ec6 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -160,10 +160,10 @@ async function toggleAlerts(instance: EndpointsView) {
       <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
         <ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" columnClass="col-6" v-model="sortByInstances" sortable default-ascending />
         <ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" v-model="sortByInstances" sortable />
-        <ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" columnClass="col-2 centre" v-model="sortByInstances">
+        <ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" columnClass="col-2 centre">
           <template #help>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</template>
         </ColumnHeader>
-        <ColumnHeader name="actions" label="Actions" columnClass="col-1" interactive-help v-model="sortByInstances">
+        <ColumnHeader name="actions" label="Actions" columnClass="col-1" interactive-help>
           <template #help>
             <div class="d-flex align-items-center p-1">
               <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
diff --git a/src/Frontend/src/components/monitoring/EndpointInstances.vue b/src/Frontend/src/components/monitoring/EndpointInstances.vue
index f1fa215bc..a3575f7d9 100644
--- a/src/Frontend/src/components/monitoring/EndpointInstances.vue
+++ b/src/Frontend/src/components/monitoring/EndpointInstances.vue
@@ -59,17 +59,17 @@ onMounted(async () => {
       <!--headers-->
       <div role="row" aria-label="instances-column-headers" class="row box box-no-click table-head-row">
         <ColumnHeader name="instance-name" label="Instance Name" column-class="col-xs-4 col-xl-8" />
-        <ColumnHeader name="throughput" label="Throughput" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
-          <template #unit>(msgs/s)</template>
+        <ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
         </ColumnHeader>
-        <ColumnHeader name="retires" label="Scheduled retries" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
-          <template #unit>(msgs/s)</template>
+        <ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
         </ColumnHeader>
-        <ColumnHeader name="processing-time" label="Processing time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
-          <template #unit>(t)</template>
+        <ColumnHeader name="processing-time" label="Processing time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
         </ColumnHeader>
-        <ColumnHeader name="critical-time" label="Critical time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
-          <template #unit>(t)</template>
+        <ColumnHeader name="critical-time" label="Critical time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
         </ColumnHeader>
       </div>
 
diff --git a/src/Frontend/src/components/monitoring/EndpointList.vue b/src/Frontend/src/components/monitoring/EndpointList.vue
index b93762823..aca8902de 100644
--- a/src/Frontend/src/components/monitoring/EndpointList.vue
+++ b/src/Frontend/src/components/monitoring/EndpointList.vue
@@ -13,24 +13,19 @@ const { sortBy: activeColumn } = storeToRefs(monitoringStore);
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="table-head-row">
       <ColumnHeader :name="columnName.ENDPOINTNAME" label="Endpoint name" column-class="table-first-col" v-model="activeColumn" sortable default-ascending />
-      <ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
-        <template #unit>(msgs)</template>
+      <ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" unit="(msgs)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
         <template #help>Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.</template>
       </ColumnHeader>
-      <ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
-        <template #unit>(msgs/s)</template>
+      <ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" unit="(msgs/s)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
         <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
       </ColumnHeader>
-      <ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
-        <template #unit>(msgs/s)</template>
+      <ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" unit="(msgs/s)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
         <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
       </ColumnHeader>
-      <ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
-        <template #unit>(t)</template>
+      <ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" unit="(t)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
         <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
       </ColumnHeader>
-      <ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
-        <template #unit>(t)</template>
+      <ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" unit="(t)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
         <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
       </ColumnHeader>
     </div>
diff --git a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
index cfca1a0cb..a10b7eaad 100644
--- a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
+++ b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
@@ -47,17 +47,17 @@ const paginatedMessageTypes = computed(() => {
       <!--headers-->
       <div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
         <ColumnHeader name="message-type-name" label="Message type name" column-class="col-xs-4 col-xl-8" />
-        <ColumnHeader name="throughput" label="Throughput" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
-          <template #unit>(msgs/s)</template>
+        <ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
         </ColumnHeader>
-        <ColumnHeader name="retires" label="Scheduled retries" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
-          <template #unit>(msgs/s)</template>
+        <ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
         </ColumnHeader>
-        <ColumnHeader name="processing-time" label="Processing time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
-          <template #unit>(t)</template>
+        <ColumnHeader name="processing-time" label="Processing time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
         </ColumnHeader>
-        <ColumnHeader name="critical-time" label="Critical time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
-          <template #unit>(t)</template>
+        <ColumnHeader name="critical-time" label="Critical time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
         </ColumnHeader>
       </div>
 

From cd86d31c4a8ce65b36aecf5f0400516fb8107b59 Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Fri, 27 Jun 2025 11:09:44 +1000
Subject: [PATCH 09/12] Remove for consistency

---
 src/Frontend/src/components/monitoring/endpointTables.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Frontend/src/components/monitoring/endpointTables.css b/src/Frontend/src/components/monitoring/endpointTables.css
index e5ba8a424..143d50f31 100644
--- a/src/Frontend/src/components/monitoring/endpointTables.css
+++ b/src/Frontend/src/components/monitoring/endpointTables.css
@@ -6,7 +6,6 @@
   padding-top: 20px;
   border-bottom: 1px solid #ced6d3;
   border-top: 1px solid #eee;
-  font-size: 12px;
   text-transform: uppercase;
   color: #181919;
 }

From 2dedc2412f5a262d87c582d3147cfcc0b3e237ae Mon Sep 17 00:00:00 2001
From: JasonTaylorDev <hello@jasontaylor.dev>
Date: Fri, 27 Jun 2025 11:51:16 +1000
Subject: [PATCH 10/12] Remove unused component.

---
 .../src/components/SortableColumn.vue         | 101 ------------------
 1 file changed, 101 deletions(-)
 delete mode 100644 src/Frontend/src/components/SortableColumn.vue

diff --git a/src/Frontend/src/components/SortableColumn.vue b/src/Frontend/src/components/SortableColumn.vue
deleted file mode 100644
index 953aedad6..000000000
--- a/src/Frontend/src/components/SortableColumn.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import type { SortInfo } from "./SortInfo";
-
-const props = withDefaults(
-  defineProps<{
-    sortBy: string;
-    defaultAscending?: boolean;
-  }>(),
-  { defaultAscending: false }
-);
-
-const activeColumn = defineModel<SortInfo>({ required: true });
-
-const isActive = computed(() => activeColumn.value?.property === props.sortBy);
-const sortIcon = computed(() => (activeColumn.value.isAscending ? "sort-up" : "sort-down"));
-
-function toggleSort() {
-  activeColumn.value = { property: props.sortBy, isAscending: isActive.value ? !activeColumn.value.isAscending : props.defaultAscending };
-}
-</script>
-<template>
-  <div class="box-header">
-    <button v-if="props.sortBy" @click="toggleSort" class="column-header-button" :aria-label="props.sortBy">
-      <span>
-        <slot></slot>
-        <span class="table-header-unit"><slot name="unit"></slot></span>
-        <span>
-          <i role="img" v-if="isActive" :class="sortIcon" :aria-label="sortIcon"></i>
-        </span>
-      </span>
-    </button>
-    <div v-else class="column-header">
-      <span>
-        <slot></slot>
-        <span class="table-header-unit"><slot name="unit"></slot></span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.column-header {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: default;
-  max-width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-}
-.column-header-button {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  max-width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: end;
-}
-
-.column-header-button span {
-  text-transform: uppercase;
-  display: inline-block;
-  text-align: left;
-}
-
-.column-header-button:hover span {
-  text-decoration: underline;
-}
-
-.column-header-button div {
-  display: inline-block;
-}
-
-.sort-up,
-.sort-down {
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 8px;
-  height: 14px;
-  padding: 0;
-  margin-left: 10px;
-}
-
-.sort-up {
-  background-image: url("@/assets/sort-up.svg");
-}
-
-.sort-down {
-  background: url("@/assets/sort-down.svg");
-}
-
-.sort-up,
-.sort-down {
-  background-repeat: no-repeat;
-  display: inline-block;
-  vertical-align: middle;
-}
-</style>

From bafefdff92c99d4179ab756b8c4deba89516add0 Mon Sep 17 00:00:00 2001
From: Jason Taylor <hello@jasontaylor.dev>
Date: Tue, 1 Jul 2025 11:11:43 +1000
Subject: [PATCH 11/12] Switch to $slots

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

diff --git a/src/Frontend/src/components/ColumnHeader.vue b/src/Frontend/src/components/ColumnHeader.vue
index 50ea2a718..df20ba93f 100644
--- a/src/Frontend/src/components/ColumnHeader.vue
+++ b/src/Frontend/src/components/ColumnHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots } from "vue";
+import { computed } from "vue";
 import type { SortInfo } from "./SortInfo";
 
 const props = withDefaults(
@@ -21,7 +21,6 @@ const props = withDefaults(
   }
 );
 
-const slots = useSlots();
 const sortByColumn = computed(() => props.sortBy || props.name);
 const activeSortColumn = defineModel<SortInfo>();
 const isSortActive = computed(() => activeSortColumn?.value?.property === sortByColumn.value);
@@ -42,7 +41,7 @@ function toggleSort() {
           <span v-if="isSortActive">
             <i role="img" :class="sortIcon" :aria-label="sortIcon"></i>
           </span>
-          <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
+          <tippy v-if="$slots.help" max-width="400px" :interactive="props.interactiveHelp">
             <i class="fa fa-sm fa-info-circle text-primary ps-1" />
             <template #content>
               <slot name="help" />
@@ -55,7 +54,7 @@ function toggleSort() {
           {{ props.label }}
           <span v-if="props.unit" class="table-header-unit">{{ props.unit }}</span>
         </span>
-        <tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
+        <tippy v-if="$slots.help" max-width="400px" :interactive="props.interactiveHelp">
           <i class="fa fa-sm fa-info-circle text-primary ps-1" />
           <template #content>
             <slot name="help" />

From 59161817baeb6093daab01f51d0d8556cdb12568 Mon Sep 17 00:00:00 2001
From: Jason Taylor <hello@jasontaylor.dev>
Date: Tue, 1 Jul 2025 11:12:48 +1000
Subject: [PATCH 12/12] Switch to build-in class binding

---
 src/Frontend/src/components/ColumnHeader.vue       |  3 +--
 .../components/heartbeats/EndpointInstances.vue    |  8 ++++----
 .../src/components/heartbeats/HeartbeatsList.vue   | 14 +++++++-------
 .../components/monitoring/EndpointInstances.vue    | 10 +++++-----
 .../src/components/monitoring/EndpointList.vue     | 12 ++++++------
 .../components/monitoring/EndpointMessageTypes.vue | 10 +++++-----
 6 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/Frontend/src/components/ColumnHeader.vue b/src/Frontend/src/components/ColumnHeader.vue
index df20ba93f..12f71deb1 100644
--- a/src/Frontend/src/components/ColumnHeader.vue
+++ b/src/Frontend/src/components/ColumnHeader.vue
@@ -11,7 +11,6 @@ const props = withDefaults(
     sortBy?: string;
     sortState?: SortInfo;
     defaultAscending?: boolean;
-    columnClass: string;
     interactiveHelp?: boolean;
   }>(),
   {
@@ -32,7 +31,7 @@ function toggleSort() {
 </script>
 
 <template>
-  <div role="columnheader" :aria-label="props.name" :class="props.columnClass">
+  <div role="columnheader" :aria-label="props.name">
     <div class="box-header">
       <button v-if="props.sortable" @click="toggleSort" class="column-header-button" :aria-label="props.name">
         <span>
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 4c4756ec6..438da1104 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -158,12 +158,12 @@ async function toggleAlerts(instance: EndpointsView) {
     <section role="table" aria-label="endpoint-instances">
       <!--Table headings-->
       <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-        <ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" columnClass="col-6" v-model="sortByInstances" sortable default-ascending />
-        <ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" v-model="sortByInstances" sortable />
-        <ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" columnClass="col-2 centre">
+        <ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" class="col-6" v-model="sortByInstances" sortable default-ascending />
+        <ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" class="col-2" v-model="sortByInstances" sortable />
+        <ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" class="col-2 centre">
           <template #help>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</template>
         </ColumnHeader>
-        <ColumnHeader name="actions" label="Actions" columnClass="col-1" interactive-help>
+        <ColumnHeader name="actions" label="Actions" class="col-1" interactive-help>
           <template #help>
             <div class="d-flex align-items-center p-1">
               <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
index cbdc8914d..4f000fe6d 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
@@ -42,13 +42,13 @@ function endpointHealth(endpoint: LogicalEndpoint) {
   <section role="table" aria-label="endpoint-instances">
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-      <ColumnHeader v-if="columns.includes(ColumnNames.Name)" :name="ColumnNames.Name" label="Name" columnClass="col-6" sortable v-model="sortByInstances" default-ascending />
-      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesDown)" :name="ColumnNames.InstancesDown" label="Instances Down" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
-      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesTotal)" :name="ColumnNames.InstancesTotal" label="Instances" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
-      <ColumnHeader v-if="columns.includes(ColumnNames.LastHeartbeat)" :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" sortable v-model="sortByInstances" />
-      <ColumnHeader v-if="columns.includes(ColumnNames.Tracked)" :name="ColumnNames.Tracked" label="Track Instances" columnClass="col-1 centre" sortable v-model="sortByInstances" />
-      <ColumnHeader v-if="columns.includes(ColumnNames.TrackToggle)" :name="ColumnNames.TrackToggle" label="Track Instances" columnClass="col-2 centre" sortable v-model="sortByInstances" />
-      <ColumnHeader v-if="columns.includes(ColumnNames.Muted)" :name="ColumnNames.Muted" label="Instances Muted" columnClass="col-1 centre" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.Name)" :name="ColumnNames.Name" label="Name" class="col-6" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesDown)" :name="ColumnNames.InstancesDown" label="Instances Down" class="col-2" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesTotal)" :name="ColumnNames.InstancesTotal" label="Instances" class="col-2" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.LastHeartbeat)" :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" class="col-2" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.Tracked)" :name="ColumnNames.Tracked" label="Track Instances" class="col-1 centre" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.TrackToggle)" :name="ColumnNames.TrackToggle" label="Track Instances" class="col-2 centre" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.Muted)" :name="ColumnNames.Muted" label="Instances Muted" class="col-1 centre" sortable v-model="sortByInstances" />
     </div>
     <!--Table rows-->
     <DataView :data="data" :show-items-per-page="true" :items-per-page="itemsPerPage" @items-per-page-changed="store.setItemsPerPage">
diff --git a/src/Frontend/src/components/monitoring/EndpointInstances.vue b/src/Frontend/src/components/monitoring/EndpointInstances.vue
index a3575f7d9..b73b94e2c 100644
--- a/src/Frontend/src/components/monitoring/EndpointInstances.vue
+++ b/src/Frontend/src/components/monitoring/EndpointInstances.vue
@@ -58,17 +58,17 @@ onMounted(async () => {
       <!-- Breakdown by instance-->
       <!--headers-->
       <div role="row" aria-label="instances-column-headers" class="row box box-no-click table-head-row">
-        <ColumnHeader name="instance-name" label="Instance Name" column-class="col-xs-4 col-xl-8" />
-        <ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
+        <ColumnHeader name="instance-name" label="Instance Name" class="col-xs-4 col-xl-8" />
+        <ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
           <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
         </ColumnHeader>
-        <ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
+        <ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
           <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
         </ColumnHeader>
-        <ColumnHeader name="processing-time" label="Processing time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
+        <ColumnHeader name="processing-time" label="Processing time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
           <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
         </ColumnHeader>
-        <ColumnHeader name="critical-time" label="Critical time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
+        <ColumnHeader name="critical-time" label="Critical time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
           <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
         </ColumnHeader>
       </div>
diff --git a/src/Frontend/src/components/monitoring/EndpointList.vue b/src/Frontend/src/components/monitoring/EndpointList.vue
index aca8902de..3d98c73c4 100644
--- a/src/Frontend/src/components/monitoring/EndpointList.vue
+++ b/src/Frontend/src/components/monitoring/EndpointList.vue
@@ -12,20 +12,20 @@ const { sortBy: activeColumn } = storeToRefs(monitoringStore);
   <section role="table" aria-label="endpoint-list">
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="table-head-row">
-      <ColumnHeader :name="columnName.ENDPOINTNAME" label="Endpoint name" column-class="table-first-col" v-model="activeColumn" sortable default-ascending />
-      <ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" unit="(msgs)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
+      <ColumnHeader :name="columnName.ENDPOINTNAME" label="Endpoint name" class="table-first-col" v-model="activeColumn" sortable default-ascending />
+      <ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" unit="(msgs)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
         <template #help>Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.</template>
       </ColumnHeader>
-      <ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" unit="(msgs/s)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
+      <ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" unit="(msgs/s)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
         <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
       </ColumnHeader>
-      <ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" unit="(msgs/s)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
+      <ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" unit="(msgs/s)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
         <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
       </ColumnHeader>
-      <ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" unit="(t)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
+      <ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" unit="(t)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
         <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
       </ColumnHeader>
-      <ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" unit="(t)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
+      <ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" unit="(t)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
         <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
       </ColumnHeader>
     </div>
diff --git a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
index a10b7eaad..1f86255b4 100644
--- a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
+++ b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
@@ -46,17 +46,17 @@ const paginatedMessageTypes = computed(() => {
       <!-- Breakdown by message type-->
       <!--headers-->
       <div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
-        <ColumnHeader name="message-type-name" label="Message type name" column-class="col-xs-4 col-xl-8" />
-        <ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
+        <ColumnHeader name="message-type-name" label="Message type name" class="col-xs-4 col-xl-8" />
+        <ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
           <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
         </ColumnHeader>
-        <ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
+        <ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
           <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
         </ColumnHeader>
-        <ColumnHeader name="processing-time" label="Processing time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
+        <ColumnHeader name="processing-time" label="Processing time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
           <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
         </ColumnHeader>
-        <ColumnHeader name="critical-time" label="Critical time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
+        <ColumnHeader name="critical-time" label="Critical time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
           <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
         </ColumnHeader>
       </div>