Add activity filter for endpoint message types

src/Frontend/src/components/monitoring/EndpointMessageTypes.vue

@@ -7,34 +7,57 @@ 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";
 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();
 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,
     default: 10,
   },
 });
 
+const filteredMessageTypes = computed(() => {
+  if (!messageTypes.value) return [];
+  if (activityFilter.value === 0) return messageTypes.value.data;
+
+  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(() => {
   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 +69,8 @@ const paginatedMessageTypes = computed(() => {
         <a @click="monitoringStore.updateMessageTypes()" class="alink">Click here to reload the view</a>
       </div>
 
+      <MessageTypeActivityFilter v-model="activityFilter" :historyPeriod="historyPeriod.pVal" />
+
       <!-- 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 +90,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 +183,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>

src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+
+export interface ActivityFilterOption {
+  value: number;
+  text: string;
+}
+
+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>
+  <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>