Skip to content

Commit 096f5f4

Browse files
jasontaylordevjasontaylordev
authored
Merge pull request #2495 from Particular/add-resources
Add monitoring resources for maintainability
2 parents fe70a7d + b97fd13 commit 096f5f4

10 files changed

Lines changed: 113 additions & 70 deletions

File tree

‎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: 11 additions & 10 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

@@ -118,7 +119,7 @@ onMounted(async () => {
118119
</div>
119120
</div>
120121
</div>
121-
<div role="cell" aria-label="retires" class="col-xs-2 col-xl-1 no-side-padding">
122+
<div role="cell" aria-label="retries" class="col-xs-2 col-xl-1 no-side-padding">
122123
<div class="row box-header">
123124
<div class="no-side-padding">
124125
<SmallGraph :type="'retries'" :isdurationgraph="false" :plotdata="instance.metrics.retries" :minimumyaxis="smallGraphsMinimumYAxis.retries" :metricsuffix="'MSGS/S'" />

‎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/EndpointListRow.vue‎

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
<script lang="ts">
2-
export enum columnName {
3-
ENDPOINTNAME = "name",
4-
QUEUELENGTH = "queueLength",
5-
THROUGHPUT = "throughput",
6-
SCHEDULEDRETRIES = "retries",
7-
PROCESSINGTIME = "processingTime",
8-
CRITICALTIME = "criticalTime",
9-
}
10-
</script>
111
<script setup lang="ts">
122
import { ref, computed } from "vue";
133
import { RouterLink } from "vue-router";
@@ -19,6 +9,7 @@ import { storeToRefs } from "pinia";
199
import type { GroupedEndpoint, Endpoint } from "@/resources/MonitoringEndpoint";
2010
import routeLinks from "@/router/routeLinks";
2111
import { Tippy } from "vue-tippy";
12+
import { CriticalTime, EndpointName, ProcessingTime, QueueLength, ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
2213
import FAIcon from "@/components/FAIcon.vue";
2314
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
2415
@@ -43,7 +34,7 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
4334
</script>
4435

4536
<template>
46-
<div role="gridcell" :aria-label="columnName.ENDPOINTNAME" class="table-first-col endpoint-name name-overview">
37+
<div role="gridcell" :aria-label="EndpointName.name" class="table-first-col endpoint-name name-overview">
4738
<div class="box-header with-status">
4839
<div :aria-label="shortName" class="no-side-padding lead righ-side-ellipsis endpoint-details-link">
4940
<tippy :aria-label="endpoint.name" :delay="[700, 0]">
@@ -80,12 +71,12 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
8071
</div>
8172
</div>
8273
<!--Queue Length-->
83-
<div role="gridcell" :aria-label="columnName.QUEUELENGTH" class="table-col">
74+
<div role="gridcell" :aria-label="QueueLength.name" class="table-col">
8475
<div class="box-header">
8576
<div class="no-side-padding">
8677
<SmallGraph
8778
role="img"
88-
:aria-label="columnName.QUEUELENGTH"
79+
:aria-label="QueueLength.name"
8980
:type="'queue-length'"
9081
:isdurationgraph="false"
9182
:plotdata="endpoint.metrics.queueLength"
@@ -102,12 +93,12 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
10293
</div>
10394
</div>
10495
<!--Throughput-->
105-
<div role="gridcell" :aria-label="columnName.THROUGHPUT" class="table-col">
96+
<div role="gridcell" :aria-label="Throughput.name" class="table-col">
10697
<div class="box-header">
10798
<div class="no-side-padding">
10899
<SmallGraph
109100
role="img"
110-
:aria-label="columnName.THROUGHPUT"
101+
:aria-label="Throughput.name"
111102
:type="'throughput'"
112103
:isdurationgraph="false"
113104
:plotdata="endpoint.metrics.throughput"
@@ -124,19 +115,10 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
124115
</div>
125116
</div>
126117
<!--Scheduled Retries-->
127-
<div role="gridcell" :aria-label="columnName.SCHEDULEDRETRIES" class="table-col">
118+
<div role="gridcell" :aria-label="ScheduledRetries.name" class="table-col">
128119
<div class="box-header">
129120
<div class="no-side-padding">
130-
<SmallGraph
131-
role="img"
132-
:aria-label="columnName.SCHEDULEDRETRIES"
133-
:type="'retries'"
134-
:isdurationgraph="false"
135-
:plotdata="endpoint.metrics.retries"
136-
:minimumyaxis="smallGraphsMinimumYAxis.retries"
137-
:avglabelcolor="'#CC1252'"
138-
:metricsuffix="'MSGS/S'"
139-
/>
121+
<SmallGraph role="img" :aria-label="ScheduledRetries.name" :type="'retries'" :isdurationgraph="false" :plotdata="endpoint.metrics.retries" :minimumyaxis="smallGraphsMinimumYAxis.retries" :avglabelcolor="'#CC1252'" :metricsuffix="'MSGS/S'" />
140122
</div>
141123
<div role="text" aria-label="sparkline" class="no-side-padding sparkline-value">
142124
{{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : formatGraphDecimal(endpoint.metrics.retries, 2) }}
@@ -146,10 +128,10 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
146128
</div>
147129
</div>
148130
<!--Processing Time-->
149-
<div role="gridcell" :aria-label="columnName.PROCESSINGTIME" class="table-col">
131+
<div role="gridcell" :aria-label="ProcessingTime.name" class="table-col">
150132
<div class="box-header">
151133
<div class="no-side-padding">
152-
<SmallGraph role="img" :aria-label="columnName.PROCESSINGTIME" :type="'processing-time'" :isdurationgraph="true" :plotdata="endpoint.metrics.processingTime" :minimumyaxis="smallGraphsMinimumYAxis.processingTime" :avglabelcolor="'#258135'" />
134+
<SmallGraph role="img" :aria-label="ProcessingTime.name" :type="'processing-time'" :isdurationgraph="true" :plotdata="endpoint.metrics.processingTime" :minimumyaxis="smallGraphsMinimumYAxis.processingTime" :avglabelcolor="'#258135'" />
153135
</div>
154136
<div role="text" aria-label="sparkline" class="no-side-padding sparkline-value">
155137
{{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : processingTimeGraphDuration.value }}
@@ -160,10 +142,10 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
160142
</div>
161143
</div>
162144
<!--Critical Time-->
163-
<div role="gridcell" :aria-label="columnName.CRITICALTIME" class="table-col">
145+
<div role="gridcell" :aria-label="CriticalTime.name" class="table-col">
164146
<div class="box-header">
165147
<div class="no-side-padding">
166-
<SmallGraph role="img" :aria-label="columnName.CRITICALTIME" :type="'critical-time'" :isdurationgraph="true" :plotdata="endpoint.metrics.criticalTime" :minimumyaxis="smallGraphsMinimumYAxis.criticalTime" :avglabelcolor="'#2700CB'" />
148+
<SmallGraph role="img" :aria-label="CriticalTime.name" :type="'critical-time'" :isdurationgraph="true" :plotdata="endpoint.metrics.criticalTime" :minimumyaxis="smallGraphsMinimumYAxis.criticalTime" :avglabelcolor="'#2700CB'" />
167149
</div>
168150
<div role="text" aria-label="sparkline" class="no-side-padding sparkline-value" :class="{ negative: parseFloat(criticalTimeGraphDuration.value) < 0 }">
169151
{{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : criticalTimeGraphDuration.value }}

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

Lines changed: 11 additions & 10 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

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

0 commit comments

Comments
 (0)