From c870dc7022e81a8cf02fe0bf1d933cef0e091be9 Mon Sep 17 00:00:00 2001
From: Dennis van der Stelt <dvdstelt@gmail.com>
Date: Mon, 16 Mar 2026 16:45:12 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Add=20activity=20filter=20for?=
 =?UTF-8?q?=20endpoint=20message=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Allow users to filter message types by recent activity (All, 1 min,
5 min, 15 min) so they can quickly find actively processing types
without paginating through inactive ones. Closes #2890.
---
 .../monitoring/EndpointMessageTypes.vue       | 19 ++++-
 .../monitoring/MessageTypeActivityFilter.vue  | 74 +++++++++++++++++++
 2 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue

diff --git a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
index 93d610e1b8..4536dceb94 100644
--- a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
+++ b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
@@ -7,6 +7,7 @@ import { storeToRefs } from "pinia";
 import NoData from "@/components/NoData.vue";
 import SmallGraph from "./SmallGraph.vue";
 import PaginationStrip from "@/components/PaginationStrip.vue";
+import MessageTypeActivityFilter from "./MessageTypeActivityFilter.vue";
 import { useMonitoringEndpointDetailsStore } from "@/stores/MonitoringEndpointDetailsStore";
 import ColumnHeader from "@/components/ColumnHeader.vue";
 import { CriticalTime, MessageType, ProcessingTime, ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
@@ -19,11 +20,16 @@ const { endpointDetails: endpoint, messageTypes, messageTypesAvailable } = store
 const route = useRoute();
 const router = useRouter();
 const messageTypesPage = ref(Number(route?.query?.pageNo ?? "1"));
+const activityFilter = ref(0);
 
 watch(messageTypesPage, () => {
   router.replace({ query: { ...route.query, pageNo: messageTypesPage.value } });
 });
 
+watch(activityFilter, () => {
+  messageTypesPage.value = 1;
+});
+
 const props = defineProps({
   perPage: {
     type: Number,
@@ -31,10 +37,16 @@ const props = defineProps({
   },
 });
 
+const filteredMessageTypes = computed(() => {
+  if (!messageTypes.value) return [];
+  if (activityFilter.value === 0) return messageTypes.value.data;
+  return messageTypes.value.data.filter((mt) => mt.metrics.throughput.average > 0 || mt.metrics.throughput.points.some((p) => p > 0));
+});
+
 const paginatedMessageTypes = computed(() => {
   const pageStart = (messageTypesPage.value - 1) * props.perPage;
   const pageEnd = messageTypesPage.value * props.perPage;
-  return messageTypes.value ? messageTypes.value.data.slice(pageStart, pageEnd) : [];
+  return filteredMessageTypes.value.slice(pageStart, pageEnd);
 });
 </script>
 
@@ -46,6 +58,8 @@ const paginatedMessageTypes = computed(() => {
         <a @click="monitoringStore.updateMessageTypes()" class="alink">Click here to reload the view</a>
       </div>
 
+      <MessageTypeActivityFilter v-model="activityFilter" />
+
       <!-- Breakdown by message type-->
       <!--headers-->
       <div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
@@ -65,6 +79,7 @@ const paginatedMessageTypes = computed(() => {
       </div>
 
       <no-data v-if="!endpoint?.messageTypes?.length" message="No messages processed in this period of time."></no-data>
+      <no-data v-else-if="filteredMessageTypes.length === 0" message="No active message types found for the selected filter."></no-data>
 
       <div role="rowgroup" aria-label="message-type-rows" class="row">
         <div class="col-xs-12 no-side-padding">
@@ -157,7 +172,7 @@ const paginatedMessageTypes = computed(() => {
           </div>
         </div>
       </div>
-      <PaginationStrip v-model="messageTypesPage" :itemsPerPage="perPage" :totalCount="messageTypes?.data?.length ?? 0" />
+      <PaginationStrip v-model="messageTypesPage" :itemsPerPage="perPage" :totalCount="filteredMessageTypes.length" />
     </div>
   </div>
 </template>
diff --git a/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue b/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue
new file mode 100644
index 0000000000..9b00d87386
--- /dev/null
+++ b/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+export interface ActivityFilterOption {
+  value: number;
+  text: string;
+}
+
+const filterOptions: ActivityFilterOption[] = [
+  { value: 0, text: "All" },
+  { value: 1, text: "1 min" },
+  { value: 5, text: "5 min" },
+  { value: 15, text: "15 min" },
+];
+
+const selected = defineModel<number>({ default: 0 });
+</script>
+
+<template>
+  <div class="activity-filter">
+    <span class="activity-filter-label">Show active in the last:</span>
+    <ul aria-label="activity-filter-list" class="nav nav-pills activity-filter-pills">
+      <li v-for="option in filterOptions" :key="option.value" :class="{ active: option.value === selected }" :aria-selected="option.value === selected">
+        <a href="#" @click.prevent="selected = option.value">{{ option.text }}</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.activity-filter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 16px 0 8px;
+}
+
+.activity-filter-label {
+  font-size: 13px;
+  color: #8c8c8c;
+  white-space: nowrap;
+}
+
+.nav-pills.activity-filter-pills > li > a {
+  border-radius: 0;
+  border-bottom: 3px solid transparent;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: #00a3c4;
+}
+
+.nav-pills.activity-filter-pills > li > a:hover {
+  color: #00a3c4;
+  font-weight: normal;
+  background-color: initial;
+  border-bottom-color: #00a3c4;
+  text-decoration: none;
+}
+
+.nav-pills.activity-filter-pills > li.active > a,
+.nav-pills.activity-filter-pills > li.active > a:hover,
+.nav-pills.activity-filter-pills > li.active > a:focus {
+  color: #000;
+  font-weight: bold;
+  background-color: initial;
+  border-bottom-color: #000;
+}
+
+.nav li {
+  display: flex;
+}
+
+.nav-pills > li + li {
+  margin-left: 2px;
+}
+</style>

From e6e822ecb6be6a471b58bf399ce8046f27cd9efb Mon Sep 17 00:00:00 2001
From: Dennis van der Stelt <dvdstelt@gmail.com>
Date: Mon, 16 Mar 2026 23:30:41 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20Filter=20message=20types=20b?=
 =?UTF-8?q?y=20actual=20time-based=20activity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The filter now checks only the trailing portion of data points
matching the selected time window, so inactive message types
disappear when their last activity exceeds the filter threshold.
Also hides filter options that exceed the current history period.
---
 .../monitoring/EndpointMessageTypes.vue           | 15 +++++++++++++--
 .../monitoring/MessageTypeActivityFilter.vue      | 13 ++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
index 4536dceb94..3f9de34e32 100644
--- a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
+++ b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
@@ -13,9 +13,11 @@ import ColumnHeader from "@/components/ColumnHeader.vue";
 import { CriticalTime, MessageType, ProcessingTime, ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
 import FAIcon from "@/components/FAIcon.vue";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { useMonitoringHistoryPeriodStore } from "@/stores/MonitoringHistoryPeriodStore";
 
 const monitoringStore = useMonitoringEndpointDetailsStore();
 const { endpointDetails: endpoint, messageTypes, messageTypesAvailable } = storeToRefs(monitoringStore);
+const { historyPeriod } = storeToRefs(useMonitoringHistoryPeriodStore());
 
 const route = useRoute();
 const router = useRouter();
@@ -40,7 +42,16 @@ const props = defineProps({
 const filteredMessageTypes = computed(() => {
   if (!messageTypes.value) return [];
   if (activityFilter.value === 0) return messageTypes.value.data;
-  return messageTypes.value.data.filter((mt) => mt.metrics.throughput.average > 0 || mt.metrics.throughput.points.some((p) => p > 0));
+
+  return messageTypes.value.data.filter((mt) => {
+    const points = mt.metrics.throughput.points;
+    if (points.length === 0) return false;
+
+    const pVal = historyPeriod.value.pVal;
+    const pointsToCheck = Math.min(points.length, Math.ceil((activityFilter.value / pVal) * points.length));
+    const recentPoints = points.slice(-pointsToCheck);
+    return recentPoints.some((p) => p > 0);
+  });
 });
 
 const paginatedMessageTypes = computed(() => {
@@ -58,7 +69,7 @@ const paginatedMessageTypes = computed(() => {
         <a @click="monitoringStore.updateMessageTypes()" class="alink">Click here to reload the view</a>
       </div>
 
-      <MessageTypeActivityFilter v-model="activityFilter" />
+      <MessageTypeActivityFilter v-model="activityFilter" :historyPeriod="historyPeriod.pVal" />
 
       <!-- Breakdown by message type-->
       <!--headers-->
diff --git a/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue b/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue
index 9b00d87386..170067f17e 100644
--- a/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue
+++ b/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue
@@ -1,17 +1,28 @@
 <script setup lang="ts">
+import { computed, watch } from "vue";
+
 export interface ActivityFilterOption {
   value: number;
   text: string;
 }
 
-const filterOptions: ActivityFilterOption[] = [
+const allFilterOptions: ActivityFilterOption[] = [
   { value: 0, text: "All" },
   { value: 1, text: "1 min" },
   { value: 5, text: "5 min" },
   { value: 15, text: "15 min" },
 ];
 
+const props = defineProps<{ historyPeriod: number }>();
 const selected = defineModel<number>({ default: 0 });
+
+const filterOptions = computed(() => allFilterOptions.filter((o) => o.value === 0 || o.value <= props.historyPeriod));
+
+watch(filterOptions, () => {
+  if (!filterOptions.value.some((o) => o.value === selected.value)) {
+    selected.value = 0;
+  }
+});
 </script>
 
 <template>