Skip to content

Commit d2aca30

Browse files
jasontaylordevjasontaylordev
committed
Add monitoring resources for maintainability
1 parent fe70a7d commit d2aca30

File tree

8 files changed

+98
-36
lines changed

8 files changed

+98
-36
lines changed

‎src/Frontend/public/mockServiceWorker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* - Please do NOT modify this file.
88
*/
99

10-
const PACKAGE_VERSION = '2.9.0'
10+
const PACKAGE_VERSION = '2.10.2'
1111
const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
1212
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
1313
const activeClientIds = new Set()

‎src/Frontend/src/components/monitoring/EndpointBacklog.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { ExtendedEndpointDetails } from "@/resources/MonitoringEndpoint";
33
import { formatGraphDecimalFromNumber, largeGraphsMinimumYAxis } from "./formatGraph";
44
import LargeGraph from "./LargeGraph.vue";
5+
import { QueueLength } from "@/resources/MonitoringResources";
56
67
const endpoint = defineModel<ExtendedEndpointDetails>({
78
required: true,
@@ -24,7 +25,7 @@ const endpoint = defineModel<ExtendedEndpointDetails>({
2425
<div class="no-side-padding graph-values">
2526
<div aria-label="queue-length-values" class="queue-length-values">
2627
<div aria-label="metric-header">
27-
<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>
28+
<span class="metric-digest-header" v-tippy="QueueLength.tooltip">{{ QueueLength.label }}</span>
2829
</div>
2930
<div aria-label="metric-current-value" class="metric-digest-value current">
3031
<div v-if="!endpoint.isStale && !endpoint.isScMonitoringDisconnected">

‎src/Frontend/src/components/monitoring/EndpointInstances.vue‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import SmallGraph from "./SmallGraph.vue";
1010
import type { ExtendedEndpointInstance } from "@/resources/MonitoringEndpoint";
1111
import routeLinks from "@/router/routeLinks";
1212
import ColumnHeader from "@/components/ColumnHeader.vue";
13+
import { CriticalTime, InstanceName, ProcessingTime, ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
1314
import FAIcon from "@/components/FAIcon.vue";
1415
import { faEnvelope, faTrash } from "@fortawesome/free-solid-svg-icons";
1516
@@ -60,18 +61,18 @@ onMounted(async () => {
6061
<!-- Breakdown by instance-->
6162
<!--headers-->
6263
<div role="row" aria-label="instances-column-headers" class="row box box-no-click table-head-row">
63-
<ColumnHeader name="instance-name" label="Instance Name" class="col-xs-4 col-xl-8" />
64-
<ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
65-
<template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
64+
<ColumnHeader :name="InstanceName.name" :label="InstanceName.label" class="col-xs-4 col-xl-8" />
65+
<ColumnHeader :name="Throughput.name" :label="Throughput.label" :unit="Throughput.unit" class="col-xs-2 col-xl-1 no-side-padding">
66+
<template #help>{{ Throughput.tooltip }}</template>
6667
</ColumnHeader>
67-
<ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
68-
<template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
68+
<ColumnHeader :name="ScheduledRetries.name" :label="ScheduledRetries.label" :unit="ScheduledRetries.unit" class="col-xs-2 col-xl-1 no-side-padding">
69+
<template #help>{{ ScheduledRetries.tooltip }}</template>
6970
</ColumnHeader>
70-
<ColumnHeader name="processing-time" label="Processing time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
71-
<template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
71+
<ColumnHeader :name="ProcessingTime.name" :label="ProcessingTime.label" :unit="ProcessingTime.unit" class="col-xs-2 col-xl-1 no-side-padding">
72+
<template #help>{{ ProcessingTime.tooltip }}</template>
7273
</ColumnHeader>
73-
<ColumnHeader name="critical-time" label="Critical time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
74-
<template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
74+
<ColumnHeader :name="CriticalTime.name" :label="CriticalTime.label" :unit="CriticalTime.unit" class="col-xs-2 col-xl-1 no-side-padding">
75+
<template #help>{{ CriticalTime.tooltip }}</template>
7576
</ColumnHeader>
7677
</div>
7778

‎src/Frontend/src/components/monitoring/EndpointList.vue‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup lang="ts">
22
import ColumnHeader from "../ColumnHeader.vue";
3-
import EndpointListRow, { columnName } from "./EndpointListRow.vue";
3+
import EndpointListRow from "./EndpointListRow.vue";
44
import { useMonitoringStore } from "@/stores/MonitoringStore";
5+
import { EndpointName, Throughput, ScheduledRetries, ProcessingTime, CriticalTime, QueueLength } from "@/resources/MonitoringResources";
56
import { storeToRefs } from "pinia";
67
78
const monitoringStore = useMonitoringStore();
@@ -12,21 +13,21 @@ const { sortBy: activeColumn } = storeToRefs(monitoringStore);
1213
<section role="table" aria-label="endpoint-list">
1314
<!--Table headings-->
1415
<div role="row" aria-label="column-headers" class="table-head-row">
15-
<ColumnHeader :name="columnName.ENDPOINTNAME" label="Endpoint name" class="table-first-col" v-model="activeColumn" sortable default-ascending />
16-
<ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" unit="(msgs)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
17-
<template #help>Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.</template>
16+
<ColumnHeader :name="EndpointName.name" :label="EndpointName.label" class="table-first-col" v-model="activeColumn" sortable default-ascending />
17+
<ColumnHeader :name="QueueLength.name" :label="QueueLength.label" :unit="QueueLength.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : QueueLength.name">
18+
<template #help>{{ QueueLength.tooltip }}</template>
1819
</ColumnHeader>
19-
<ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" unit="(msgs/s)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
20-
<template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
20+
<ColumnHeader :name="Throughput.name" :label="Throughput.label" :unit="Throughput.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : Throughput.name">
21+
<template #help>{{ Throughput.tooltip }}</template>
2122
</ColumnHeader>
22-
<ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" unit="(msgs/s)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
23-
<template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
23+
<ColumnHeader :name="ScheduledRetries.name" :label="ScheduledRetries.label" :unit="ScheduledRetries.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : ScheduledRetries.name">
24+
<template #help>{{ ScheduledRetries.tooltip }}</template>
2425
</ColumnHeader>
25-
<ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" unit="(t)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
26-
<template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
26+
<ColumnHeader :name="ProcessingTime.name" :label="ProcessingTime.label" :unit="ProcessingTime.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : ProcessingTime.name">
27+
<template #help>{{ ProcessingTime.unit }}</template>
2728
</ColumnHeader>
28-
<ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" unit="(t)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
29-
<template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
29+
<ColumnHeader :name="CriticalTime.name" :label="CriticalTime.label" :unit="CriticalTime.unit" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : CriticalTime.name">
30+
<template #help>{{ CriticalTime.tooltip }}</template>
3031
</ColumnHeader>
3132
</div>
3233
<div>

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import SmallGraph from "./SmallGraph.vue";
99
import PaginationStrip from "@/components/PaginationStrip.vue";
1010
import { useMonitoringEndpointDetailsStore } from "@/stores/MonitoringEndpointDetailsStore";
1111
import ColumnHeader from "@/components/ColumnHeader.vue";
12+
import { CriticalTime, MessageType, ProcessingTime, ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
1213
import FAIcon from "@/components/FAIcon.vue";
1314
import { faWarning } from "@fortawesome/free-solid-svg-icons";
1415
@@ -48,18 +49,18 @@ const paginatedMessageTypes = computed(() => {
4849
<!-- Breakdown by message type-->
4950
<!--headers-->
5051
<div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
51-
<ColumnHeader name="message-type-name" label="Message type name" class="col-xs-4 col-xl-8" />
52-
<ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
53-
<template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
52+
<ColumnHeader :name="MessageType.name" :label="MessageType.label" class="col-xs-4 col-xl-8" />
53+
<ColumnHeader :name="Throughput.name" :label="Throughput.label" :unit="Throughput.unit" class="col-xs-2 col-xl-1 no-side-padding">
54+
<template #help>{{ Throughput.tooltip }}</template>
5455
</ColumnHeader>
55-
<ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
56-
<template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
56+
<ColumnHeader :name="ScheduledRetries.name" :label="ScheduledRetries.label" :unit="ScheduledRetries.unit" class="col-xs-2 col-xl-1 no-side-padding">
57+
<template #help>{{ ScheduledRetries.tooltip }}</template>
5758
</ColumnHeader>
58-
<ColumnHeader name="processing-time" label="Processing time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
59-
<template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
59+
<ColumnHeader :name="ProcessingTime.name" :label="ProcessingTime.label" :unit="ProcessingTime.unit" class="col-xs-2 col-xl-1 no-side-padding">
60+
<template #help>{{ ProcessingTime.tooltip }}</template>
6061
</ColumnHeader>
61-
<ColumnHeader name="critical-time" label="Critical time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
62-
<template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
62+
<ColumnHeader :name="CriticalTime.name" :label="CriticalTime.label" :unit="CriticalTime.unit" class="col-xs-2 col-xl-1 no-side-padding">
63+
<template #help>{{ CriticalTime.tooltip }}</template>
6364
</ColumnHeader>
6465
</div>
6566

‎src/Frontend/src/components/monitoring/EndpointTimings.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useFormatTime } from "@/composables/formatter";
44
import { largeGraphsMinimumYAxis } from "./formatGraph";
55
import LargeGraph from "./LargeGraph.vue";
66
import type { ExtendedEndpointDetails } from "@/resources/MonitoringEndpoint";
7+
import { CriticalTime, ProcessingTime } from "@/resources/MonitoringResources";
78
89
const endpoint = defineModel<ExtendedEndpointDetails>({
910
required: true,
@@ -32,7 +33,7 @@ const averageCriticalTime = computed(() => useFormatTime(endpoint.value.digest.m
3233
<div class="no-side-padding graph-values">
3334
<div aria-label="processing-time-values" class="no-side-padding processing-time-values">
3435
<div aria-label="metric-header">
35-
<span class="metric-digest-header" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`"> Processing Time </span>
36+
<span class="metric-digest-header" v-tippy="ProcessingTime.tooltip">{{ ProcessingTime.label }}</span>
3637
</div>
3738
<div aria-label="metric-current-value" class="metric-digest-value current">
3839
<div v-if="!endpoint.isStale && !endpoint.isScMonitoringDisconnected">
@@ -52,7 +53,7 @@ const averageCriticalTime = computed(() => useFormatTime(endpoint.value.digest.m
5253

5354
<div aria-label="critical-time-values" class="no-side-padding critical-time-values">
5455
<div aria-label="metric-header">
55-
<span class="metric-digest-header" 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>
56+
<span class="metric-digest-header" v-tippy="CriticalTime.tooltip">{{ CriticalTime.label }}</span>
5657
</div>
5758
<div aria-label="metric-current-value" class="metric-digest-value current">
5859
<div v-if="!endpoint.isStale && !endpoint.isScMonitoringDisconnected">

‎src/Frontend/src/components/monitoring/EndpointWorkload.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { type ExtendedEndpointDetails } from "@/resources/MonitoringEndpoint";
33
import { formatGraphDecimalFromNumber, largeGraphsMinimumYAxis } from "./formatGraph";
44
import LargeGraph from "./LargeGraph.vue";
5+
import { ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
56
67
const endpoint = defineModel<ExtendedEndpointDetails>({ required: true });
78
</script>
@@ -24,7 +25,7 @@ const endpoint = defineModel<ExtendedEndpointDetails>({ required: true });
2425
<div class="no-side-padding graph-values">
2526
<div aria-label="throughput-values" class="no-side-padding throughput-values">
2627
<div aria-label="metric-header">
27-
<span class="metric-digest-header" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`"> Throughput </span>
28+
<span class="metric-digest-header" v-tippy="Throughput.tooltip">{{ Throughput.label }}</span>
2829
</div>
2930
<div aria-label="metric-current-value" class="metric-digest-value current">
3031
<div v-if="!endpoint.isStale && !endpoint.isScMonitoringDisconnected">{{ formatGraphDecimalFromNumber(endpoint.digest.metrics.throughput?.latest, 2) }} <span class="metric-digest-value-suffix">MSGS/S</span></div>
@@ -37,7 +38,7 @@ const endpoint = defineModel<ExtendedEndpointDetails>({ required: true });
3738
</div>
3839
<div aria-label="scheduled-retry-values" class="no-side-padding scheduled-retries-rate-values">
3940
<div aria-label="metric-header">
40-
<span class="metric-digest-header" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`"> Scheduled retries </span>
41+
<span class="metric-digest-header" v-tippy="ScheduledRetries.tooltip">{{ ScheduledRetries.label }}</span>
4142
</div>
4243

4344
<div aria-label="metric-current-value" class="metric-digest-value current">

‎src/Frontend/src/resources/MonitoringResources.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
export interface MonitoringResource {
2+
name: string;
3+
label: string;
4+
unit?: string;
5+
tooltip?: string;
6+
}
7+
8+
export const MessageType: MonitoringResource = {
9+
name: "message-type-name",
10+
label: "Message type name",
11+
};
12+
13+
export const InstanceName: MonitoringResource = {
14+
name: "instanceName",
15+
label: "Instance Name",
16+
};
17+
18+
export const EndpointName: MonitoringResource = {
19+
name: "name",
20+
label: "Endpoint Name",
21+
};
22+
23+
export const Throughput: MonitoringResource = {
24+
name: "throughput",
25+
label: "Throughput",
26+
unit: "(msgs/s)",
27+
tooltip: "Throughput: The number of messages per second successfully processed by a receiving endpoint.",
28+
};
29+
30+
export const ScheduledRetries: MonitoringResource = {
31+
name: "retries",
32+
label: "Scheduled retries",
33+
unit: "(msgs/s)",
34+
tooltip: "Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).",
35+
};
36+
37+
export const ProcessingTime: MonitoringResource = {
38+
name: "processingTime",
39+
label: "Processing time",
40+
unit: "(t)",
41+
tooltip: "Processing time: The time taken for a receiving endpoint to successfully process a message.",
42+
};
43+
44+
export const CriticalTime: MonitoringResource = {
45+
name: "criticalTime",
46+
label: "Critical time",
47+
unit: "(t)",
48+
tooltip: "Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.",
49+
};
50+
51+
export const QueueLength: MonitoringResource = {
52+
name: "queueLength",
53+
label: "Queue length",
54+
unit: "(msgs)",
55+
tooltip: "Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.",
56+
};

0 commit comments

Comments
 (0)