Skip to content

Add monitoring resources for maintainability #2495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 4, 2025
Merged

Add monitoring resources for maintainability #2495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2aca30
Add monitoring resources for maintainability
jasontaylordev Jul 1, 2025
f908ab3
Fix spelling
jasontaylordev Jul 3, 2025
6d32e2f
Use monitoring resources
jasontaylordev Jul 3, 2025
b97fd13
Restore original spacing
jasontaylordev Jul 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Frontend/public/mockServiceWorker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* - Please do NOT modify this file.
*/

const PACKAGE_VERSION = '2.9.0'
const PACKAGE_VERSION = '2.10.2'
const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
const activeClientIds = new Set()
Expand Down
3 changes: 2 additions & 1 deletion src/Frontend/src/components/monitoring/EndpointBacklog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import type { ExtendedEndpointDetails } from "@/resources/MonitoringEndpoint";
import { formatGraphDecimalFromNumber, largeGraphsMinimumYAxis } from "./formatGraph";
import LargeGraph from "./LargeGraph.vue";
import { QueueLength } from "@/resources/MonitoringResources";

const endpoint = defineModel<ExtendedEndpointDetails>({
required: true,
Expand All @@ -24,7 +25,7 @@ const endpoint = defineModel<ExtendedEndpointDetails>({
<div class="no-side-padding graph-values">
<div aria-label="queue-length-values" class="queue-length-values">
<div aria-label="metric-header">
<span class="metric-digest-header" v-tippy="`Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.`"> Queue Length </span>
<span class="metric-digest-header" v-tippy="QueueLength.tooltip"> {{ QueueLength.label }} </span>
</div>
<div aria-label="metric-current-value" class="metric-digest-value current">
<div v-if="!endpoint.isStale && !endpoint.isScMonitoringDisconnected">
Expand Down
21 changes: 11 additions & 10 deletions src/Frontend/src/components/monitoring/EndpointInstances.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import SmallGraph from "./SmallGraph.vue";
import type { ExtendedEndpointInstance } from "@/resources/MonitoringEndpoint";
import routeLinks from "@/router/routeLinks";
import ColumnHeader from "@/components/ColumnHeader.vue";
import { CriticalTime, InstanceName, ProcessingTime, ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
import FAIcon from "@/components/FAIcon.vue";
import { faEnvelope, faTrash } from "@fortawesome/free-solid-svg-icons";

Expand Down Expand Up @@ -60,18 +61,18 @@ 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" 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 :name="InstanceName.name" :label="InstanceName.label" class="col-xs-4 col-xl-8" />
<ColumnHeader :name="Throughput.name" :label="Throughput.label" :unit="Throughput.unit" class="col-xs-2 col-xl-1 no-side-padding">
<template #help>{{ Throughput.tooltip }}</template>
</ColumnHeader>
<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 :name="ScheduledRetries.name" :label="ScheduledRetries.label" :unit="ScheduledRetries.unit" class="col-xs-2 col-xl-1 no-side-padding">
<template #help>{{ ScheduledRetries.tooltip }}</template>
</ColumnHeader>
<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 :name="ProcessingTime.name" :label="ProcessingTime.label" :unit="ProcessingTime.unit" class="col-xs-2 col-xl-1 no-side-padding">
<template #help>{{ ProcessingTime.tooltip }}</template>
</ColumnHeader>
<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 :name="CriticalTime.name" :label="CriticalTime.label" :unit="CriticalTime.unit" class="col-xs-2 col-xl-1 no-side-padding">
<template #help>{{ CriticalTime.tooltip }}</template>
</ColumnHeader>
</div>

Expand Down Expand Up @@ -118,7 +119,7 @@ onMounted(async () => {
</div>
</div>
</div>
<div role="cell" aria-label="retires" class="col-xs-2 col-xl-1 no-side-padding">
<div role="cell" aria-label="retries" class="col-xs-2 col-xl-1 no-side-padding">
<div class="row box-header">
<div class="no-side-padding">
<SmallGraph :type="'retries'" :isdurationgraph="false" :plotdata="instance.metrics.retries" :minimumyaxis="smallGraphsMinimumYAxis.retries" :metricsuffix="'MSGS/S'" />
Expand Down
25 changes: 13 additions & 12 deletions src/Frontend/src/components/monitoring/EndpointList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<script setup lang="ts">
import ColumnHeader from "../ColumnHeader.vue";
import EndpointListRow, { columnName } from "./EndpointListRow.vue";
import EndpointListRow from "./EndpointListRow.vue";
import { useMonitoringStore } from "@/stores/MonitoringStore";
import { EndpointName, Throughput, ScheduledRetries, ProcessingTime, CriticalTime, QueueLength } from "@/resources/MonitoringResources";
import { storeToRefs } from "pinia";

const monitoringStore = useMonitoringStore();
Expand All @@ -12,21 +13,21 @@ 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" class="table-first-col" v-model="activeColumn" sortable default-ascending />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these were using a common resource already that matched that used in the store... the change makes this more likely to get out of sync

<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 :name="EndpointName.name" :label="EndpointName.label" class="table-first-col" v-model="activeColumn" sortable default-ascending />
<ColumnHeader :name="QueueLength.name" :label="QueueLength.label" :unit="QueueLength.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : QueueLength.name">
<template #help>{{ QueueLength.tooltip }}</template>
</ColumnHeader>
<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 :name="Throughput.name" :label="Throughput.label" :unit="Throughput.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : Throughput.name">
<template #help>{{ Throughput.tooltip }}</template>
</ColumnHeader>
<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 :name="ScheduledRetries.name" :label="ScheduledRetries.label" :unit="ScheduledRetries.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : ScheduledRetries.name">
<template #help>{{ ScheduledRetries.tooltip }}</template>
</ColumnHeader>
<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 :name="ProcessingTime.name" :label="ProcessingTime.label" :unit="ProcessingTime.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : ProcessingTime.name">
<template #help>{{ ProcessingTime.unit }}</template>
</ColumnHeader>
<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 :name="CriticalTime.name" :label="CriticalTime.label" :unit="CriticalTime.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : CriticalTime.name">
<template #help>{{ CriticalTime.tooltip }}</template>
</ColumnHeader>
</div>
<div>
Expand Down
42 changes: 12 additions & 30 deletions src/Frontend/src/components/monitoring/EndpointListRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
<script lang="ts">
export enum columnName {
ENDPOINTNAME = "name",
QUEUELENGTH = "queueLength",
THROUGHPUT = "throughput",
SCHEDULEDRETRIES = "retries",
PROCESSINGTIME = "processingTime",
CRITICALTIME = "criticalTime",
}
</script>
<script setup lang="ts">
import { ref, computed } from "vue";
import { RouterLink } from "vue-router";
Expand All @@ -19,6 +9,7 @@ import { storeToRefs } from "pinia";
import type { GroupedEndpoint, Endpoint } from "@/resources/MonitoringEndpoint";
import routeLinks from "@/router/routeLinks";
import { Tippy } from "vue-tippy";
import { CriticalTime, EndpointName, ProcessingTime, QueueLength, ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
import FAIcon from "@/components/FAIcon.vue";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";

Expand All @@ -43,7 +34,7 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
</script>

<template>
<div role="gridcell" :aria-label="columnName.ENDPOINTNAME" class="table-first-col endpoint-name name-overview">
<div role="gridcell" :aria-label="EndpointName.name" class="table-first-col endpoint-name name-overview">
<div class="box-header with-status">
<div :aria-label="shortName" class="no-side-padding lead righ-side-ellipsis endpoint-details-link">
<tippy :aria-label="endpoint.name" :delay="[700, 0]">
Expand Down Expand Up @@ -80,12 +71,12 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
</div>
</div>
<!--Queue Length-->
<div role="gridcell" :aria-label="columnName.QUEUELENGTH" class="table-col">
<div role="gridcell" :aria-label="QueueLength.name" class="table-col">
<div class="box-header">
<div class="no-side-padding">
<SmallGraph
role="img"
:aria-label="columnName.QUEUELENGTH"
:aria-label="QueueLength.name"
:type="'queue-length'"
:isdurationgraph="false"
:plotdata="endpoint.metrics.queueLength"
Expand All @@ -102,12 +93,12 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
</div>
</div>
<!--Throughput-->
<div role="gridcell" :aria-label="columnName.THROUGHPUT" class="table-col">
<div role="gridcell" :aria-label="Throughput.name" class="table-col">
<div class="box-header">
<div class="no-side-padding">
<SmallGraph
role="img"
:aria-label="columnName.THROUGHPUT"
:aria-label="Throughput.name"
:type="'throughput'"
:isdurationgraph="false"
:plotdata="endpoint.metrics.throughput"
Expand All @@ -124,19 +115,10 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
</div>
</div>
<!--Scheduled Retries-->
<div role="gridcell" :aria-label="columnName.SCHEDULEDRETRIES" class="table-col">
<div role="gridcell" :aria-label="ScheduledRetries.name" class="table-col">
<div class="box-header">
<div class="no-side-padding">
<SmallGraph
role="img"
:aria-label="columnName.SCHEDULEDRETRIES"
:type="'retries'"
:isdurationgraph="false"
:plotdata="endpoint.metrics.retries"
:minimumyaxis="smallGraphsMinimumYAxis.retries"
:avglabelcolor="'#CC1252'"
:metricsuffix="'MSGS/S'"
/>
<SmallGraph role="img" :aria-label="ScheduledRetries.name" :type="'retries'" :isdurationgraph="false" :plotdata="endpoint.metrics.retries" :minimumyaxis="smallGraphsMinimumYAxis.retries" :avglabelcolor="'#CC1252'" :metricsuffix="'MSGS/S'" />
</div>
<div role="text" aria-label="sparkline" class="no-side-padding sparkline-value">
{{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : formatGraphDecimal(endpoint.metrics.retries, 2) }}
Expand All @@ -146,10 +128,10 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
</div>
</div>
<!--Processing Time-->
<div role="gridcell" :aria-label="columnName.PROCESSINGTIME" class="table-col">
<div role="gridcell" :aria-label="ProcessingTime.name" class="table-col">
<div class="box-header">
<div class="no-side-padding">
<SmallGraph role="img" :aria-label="columnName.PROCESSINGTIME" :type="'processing-time'" :isdurationgraph="true" :plotdata="endpoint.metrics.processingTime" :minimumyaxis="smallGraphsMinimumYAxis.processingTime" :avglabelcolor="'#258135'" />
<SmallGraph role="img" :aria-label="ProcessingTime.name" :type="'processing-time'" :isdurationgraph="true" :plotdata="endpoint.metrics.processingTime" :minimumyaxis="smallGraphsMinimumYAxis.processingTime" :avglabelcolor="'#258135'" />
</div>
<div role="text" aria-label="sparkline" class="no-side-padding sparkline-value">
{{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : processingTimeGraphDuration.value }}
Expand All @@ -160,10 +142,10 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
</div>
</div>
<!--Critical Time-->
<div role="gridcell" :aria-label="columnName.CRITICALTIME" class="table-col">
<div role="gridcell" :aria-label="CriticalTime.name" class="table-col">
<div class="box-header">
<div class="no-side-padding">
<SmallGraph role="img" :aria-label="columnName.CRITICALTIME" :type="'critical-time'" :isdurationgraph="true" :plotdata="endpoint.metrics.criticalTime" :minimumyaxis="smallGraphsMinimumYAxis.criticalTime" :avglabelcolor="'#2700CB'" />
<SmallGraph role="img" :aria-label="CriticalTime.name" :type="'critical-time'" :isdurationgraph="true" :plotdata="endpoint.metrics.criticalTime" :minimumyaxis="smallGraphsMinimumYAxis.criticalTime" :avglabelcolor="'#2700CB'" />
</div>
<div role="text" aria-label="sparkline" class="no-side-padding sparkline-value" :class="{ negative: parseFloat(criticalTimeGraphDuration.value) < 0 }">
{{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : criticalTimeGraphDuration.value }}
Expand Down
21 changes: 11 additions & 10 deletions src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import SmallGraph from "./SmallGraph.vue";
import PaginationStrip from "@/components/PaginationStrip.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";

Expand Down Expand Up @@ -48,18 +49,18 @@ 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" 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 :name="MessageType.name" :label="MessageType.label" class="col-xs-4 col-xl-8" />
<ColumnHeader :name="Throughput.name" :label="Throughput.label" :unit="Throughput.unit" class="col-xs-2 col-xl-1 no-side-padding">
<template #help>{{ Throughput.tooltip }}</template>
</ColumnHeader>
<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 :name="ScheduledRetries.name" :label="ScheduledRetries.label" :unit="ScheduledRetries.unit" class="col-xs-2 col-xl-1 no-side-padding">
<template #help>{{ ScheduledRetries.tooltip }}</template>
</ColumnHeader>
<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 :name="ProcessingTime.name" :label="ProcessingTime.label" :unit="ProcessingTime.unit" class="col-xs-2 col-xl-1 no-side-padding">
<template #help>{{ ProcessingTime.tooltip }}</template>
</ColumnHeader>
<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 :name="CriticalTime.name" :label="CriticalTime.label" :unit="CriticalTime.unit" class="col-xs-2 col-xl-1 no-side-padding">
<template #help>{{ CriticalTime.tooltip }}</template>
</ColumnHeader>
</div>

Expand Down Expand Up @@ -109,7 +110,7 @@ const paginatedMessageTypes = computed(() => {
</div>
</div>
</div>
<div role="cell" aria-label="retires" class="col-xs-2 col-xl-1 no-side-padding">
<div role="cell" aria-label="retries" class="col-xs-2 col-xl-1 no-side-padding">
<div class="row box-header">
<div class="no-side-padding">
<SmallGraph :type="'retries'" :isdurationgraph="false" :plotdata="messageType.metrics.retries" :minimumyaxis="smallGraphsMinimumYAxis.retries" :metricsuffix="'MSGS/S'" />
Expand Down
Loading