diff --git a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue index 93d610e1b8..3f9de34e32 100644 --- a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue +++ b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue @@ -7,23 +7,31 @@ 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, @@ -31,10 +39,25 @@ const props = defineProps({ }, }); +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); }); @@ -46,6 +69,8 @@ const paginatedMessageTypes = computed(() => { Click here to reload the view + +
@@ -65,6 +90,7 @@ const paginatedMessageTypes = computed(() => {
+
@@ -157,7 +183,7 @@ const paginatedMessageTypes = computed(() => {
- + diff --git a/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue b/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue new file mode 100644 index 0000000000..170067f17e --- /dev/null +++ b/src/Frontend/src/components/monitoring/MessageTypeActivityFilter.vue @@ -0,0 +1,85 @@ + + + + +