+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/ColumnHeader.vue b/frontend/src/components/ColumnHeader.vue
new file mode 100644
index 0000000000..0e2c5acb01
--- /dev/null
+++ b/frontend/src/components/ColumnHeader.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/ConditionalRender.vue b/frontend/src/components/ConditionalRender.vue
new file mode 100644
index 0000000000..350521cada
--- /dev/null
+++ b/frontend/src/components/ConditionalRender.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+ {{ props.label }}
+ {{ props.unit }}
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/CopyToClipboard.vue b/frontend/src/components/CopyToClipboard.vue
new file mode 100644
index 0000000000..e30c88ab1f
--- /dev/null
+++ b/frontend/src/components/CopyToClipboard.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ heading }}
+
+
+
+ {{ body }}
+{{ secondParagraph }}
+
+
+
+
+
diff --git a/frontend/src/components/DataViewPageModel.ts b/frontend/src/components/DataViewPageModel.ts
new file mode 100644
index 0000000000..84474be8a1
--- /dev/null
+++ b/frontend/src/components/DataViewPageModel.ts
@@ -0,0 +1,4 @@
+export default interface DataViewPageModel
+
+
+
+
+
+
+
diff --git a/frontend/src/components/EventItemShort.vue b/frontend/src/components/EventItemShort.vue
new file mode 100644
index 0000000000..29fa3e2eb9
--- /dev/null
+++ b/frontend/src/components/EventItemShort.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/EventLogItem.vue b/frontend/src/components/EventLogItem.vue
new file mode 100644
index 0000000000..9ed77f02c9
--- /dev/null
+++ b/frontend/src/components/EventLogItem.vue
@@ -0,0 +1,176 @@
+
+
+
+
+
+
+
+ Last 10 events
+
+
+
+
+ View all events
+
+
+
+
+
+
diff --git a/frontend/src/components/ExclamationMark.vue b/frontend/src/components/ExclamationMark.vue
new file mode 100644
index 0000000000..504e51b314
--- /dev/null
+++ b/frontend/src/components/ExclamationMark.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ eventLogItem.description }} +
+
+
+
+
+
+
+
diff --git a/frontend/src/components/ItemsPerPage.vue b/frontend/src/components/ItemsPerPage.vue
new file mode 100644
index 0000000000..6bce88e5a0
--- /dev/null
+++ b/frontend/src/components/ItemsPerPage.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/LicenseExpired.vue b/frontend/src/components/LicenseExpired.vue
new file mode 100644
index 0000000000..8e31f92e0d
--- /dev/null
+++ b/frontend/src/components/LicenseExpired.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Platform license expired
+Please update your license to continue using the Particular Service Platform
+ +
+
+
+
+ License expired
+To continue using the Particular Service Platform, please extend your license
+ +
+
+
+
diff --git a/frontend/src/components/LicenseNotExpired.vue b/frontend/src/components/LicenseNotExpired.vue
new file mode 100644
index 0000000000..e6e23d0036
--- /dev/null
+++ b/frontend/src/components/LicenseNotExpired.vue
@@ -0,0 +1,17 @@
+
+
+
+ Platform license expired
+Your upgrade protection period has elapsed and your license is not valid for this version of ServicePulse.
+ +
+
+
diff --git a/frontend/src/components/MaximizableCodeEditor.vue b/frontend/src/components/MaximizableCodeEditor.vue
new file mode 100644
index 0000000000..57ffa635be
--- /dev/null
+++ b/frontend/src/components/MaximizableCodeEditor.vue
@@ -0,0 +1,188 @@
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
diff --git a/frontend/src/components/MetadataItem.vue b/frontend/src/components/MetadataItem.vue
new file mode 100644
index 0000000000..ad84f02d91
--- /dev/null
+++ b/frontend/src/components/MetadataItem.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/NoData.spec.ts b/frontend/src/components/NoData.spec.ts
new file mode 100644
index 0000000000..e45241062c
--- /dev/null
+++ b/frontend/src/components/NoData.spec.ts
@@ -0,0 +1,8 @@
+import { expect, test, render, screen } from "@component-test-utils";
+
+import NoData from "./NoData.vue";
+
+test("EXAMPLE: A messge non empty message is assigned", async () => {
+ render(NoData, { props: { message: "No messages processed in this period of time" } });
+ expect(await screen.findByText("No messages processed in this period of time")).toBeVisible();
+});
diff --git a/frontend/src/components/NoData.vue b/frontend/src/components/NoData.vue
new file mode 100644
index 0000000000..8725df681e
--- /dev/null
+++ b/frontend/src/components/NoData.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/OnOffSwitch.vue b/frontend/src/components/OnOffSwitch.vue
new file mode 100644
index 0000000000..5e94948ef6
--- /dev/null
+++ b/frontend/src/components/OnOffSwitch.vue
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ props.message }}
++
+
+
+
+
+
+
diff --git a/frontend/src/components/OrderBy.vue b/frontend/src/components/OrderBy.vue
new file mode 100644
index 0000000000..81288dcc9c
--- /dev/null
+++ b/frontend/src/components/OrderBy.vue
@@ -0,0 +1,148 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/PageFooter.vue b/frontend/src/components/PageFooter.vue
new file mode 100644
index 0000000000..387610b94d
--- /dev/null
+++ b/frontend/src/components/PageFooter.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
new file mode 100644
index 0000000000..640f2dcdd4
--- /dev/null
+++ b/frontend/src/components/PageHeader.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/PaginationStrip.spec.ts b/frontend/src/components/PaginationStrip.spec.ts
new file mode 100644
index 0000000000..834859f95b
--- /dev/null
+++ b/frontend/src/components/PaginationStrip.spec.ts
@@ -0,0 +1,275 @@
+import { expect, render, screen, describe, userEvent, test } from "@component-test-utils";
+import paginationStrip from "./PaginationStrip.vue";
+
+//Defines a domain-specific language (DSL) for interacting with the system under test (sut)
+interface PaginationStripDSL {
+ clickPrevious(): Promise
+
+
+
+
diff --git a/frontend/src/components/RefreshConfig.vue b/frontend/src/components/RefreshConfig.vue
new file mode 100644
index 0000000000..e03ffab0c1
--- /dev/null
+++ b/frontend/src/components/RefreshConfig.vue
@@ -0,0 +1,91 @@
+
+
+
+ -
+
- + + +
+ Refresh List
+
+
+
+
diff --git a/frontend/src/components/ResultsCount.vue b/frontend/src/components/ResultsCount.vue
new file mode 100644
index 0000000000..2340aa8c7b
--- /dev/null
+++ b/frontend/src/components/ResultsCount.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+ Auto-Refresh:
+
+
+
+
+
+
+
diff --git a/frontend/src/components/SagaName.vue b/frontend/src/components/SagaName.vue
new file mode 100644
index 0000000000..b1ea343aa1
--- /dev/null
+++ b/frontend/src/components/SagaName.vue
@@ -0,0 +1,32 @@
+
+
+
+ Showing {{ displayed }} of {{ total }} result(s)
+
+
+
+ Cannot connect to ServiceControl
++ ServicePulse is unable to connect to the ServiceControl instance at + {{ serviceControlUrl }}. Please ensure that ServiceControl is running and accessible from your machine. +
+
+ {{ text }}
+
+
+
+
diff --git a/frontend/src/components/TimeSince.vue b/frontend/src/components/TimeSince.vue
new file mode 100644
index 0000000000..0a75a58693
--- /dev/null
+++ b/frontend/src/components/TimeSince.vue
@@ -0,0 +1,47 @@
+
+
+
+ {{ text }}
+
diff --git a/frontend/src/components/ToastPopup.vue b/frontend/src/components/ToastPopup.vue
new file mode 100644
index 0000000000..39701c070f
--- /dev/null
+++ b/frontend/src/components/ToastPopup.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/TypeNameDisplay.vue b/frontend/src/components/TypeNameDisplay.vue
new file mode 100644
index 0000000000..917240a46b
--- /dev/null
+++ b/frontend/src/components/TypeNameDisplay.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/WarningLevel.ts b/frontend/src/components/WarningLevel.ts
new file mode 100644
index 0000000000..eef486b287
--- /dev/null
+++ b/frontend/src/components/WarningLevel.ts
@@ -0,0 +1,5 @@
+export enum WarningLevel {
+ None = "none",
+ Warning = "warning",
+ Danger = "danger",
+}
diff --git a/frontend/src/components/audit/AuditList.vue b/frontend/src/components/audit/AuditList.vue
new file mode 100644
index 0000000000..1004e71133
--- /dev/null
+++ b/frontend/src/components/audit/AuditList.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/audit/AuditListItem.vue b/frontend/src/components/audit/AuditListItem.vue
new file mode 100644
index 0000000000..cc107068b6
--- /dev/null
+++ b/frontend/src/components/audit/AuditListItem.vue
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Time Sent:{{ new Date(props.message.time_sent).toLocaleString() }}
+ Critical Time:{{ formatDotNetTimespan(props.message.critical_time) }}
+ Processing Time:{{ formatDotNetTimespan(props.message.processing_time) }}
+ Delivery Time:{{ formatDotNetTimespan(props.message.delivery_time) }}
+
+
+
+
+
diff --git a/frontend/src/components/audit/ListFilterSelector.vue b/frontend/src/components/audit/ListFilterSelector.vue
new file mode 100644
index 0000000000..dbe8df59ce
--- /dev/null
+++ b/frontend/src/components/audit/ListFilterSelector.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
+ Check the documentation to see the available filtering options
+
+
+ Endpoint:
+
+
+
+
+ Dates:
+
+
+
+
+ Show:
+
+
+
+
+ Sort:
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/audit/MessageStatusIcon.vue b/frontend/src/components/audit/MessageStatusIcon.vue
new file mode 100644
index 0000000000..40092cfa78
--- /dev/null
+++ b/frontend/src/components/audit/MessageStatusIcon.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/audit/isAllMessagesSupported.ts b/frontend/src/components/audit/isAllMessagesSupported.ts
new file mode 100644
index 0000000000..e3d76561fc
--- /dev/null
+++ b/frontend/src/components/audit/isAllMessagesSupported.ts
@@ -0,0 +1,8 @@
+import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
+
+export const minimumSCVersionForAllMessages = "6.6.0";
+
+export default function useIsAllMessagesSupported() {
+ const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
+ return environmentStore.serviceControlIsGreaterThan(minimumSCVersionForAllMessages);
+}
diff --git a/frontend/src/components/codeEditorTypes.ts b/frontend/src/components/codeEditorTypes.ts
new file mode 100644
index 0000000000..c1f7bcd46f
--- /dev/null
+++ b/frontend/src/components/codeEditorTypes.ts
@@ -0,0 +1 @@
+export type CodeLanguage = "json" | "xml" | "shell" | "powershell" | "csharp";
diff --git a/frontend/src/components/configuration/ConfigurationMenuItem.vue b/frontend/src/components/configuration/ConfigurationMenuItem.vue
new file mode 100644
index 0000000000..fedab35c36
--- /dev/null
+++ b/frontend/src/components/configuration/ConfigurationMenuItem.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+ Connect an endpoint to ServiceControl
+
+
+
+
+ -
+
- Add the NServiceBus.ServicePlatform.Connector NuGet package to the endpoint project. +
- Copy-paste the code from one of the options below. For additional options, refer to the documentation +
+
+
+
+
+
+
+
+
+
+
+
+ + Endpoint configuration only +
++ JSON file +
+
+ There were problems reaching some ServiceControl instances and the configuration does not contain all connectivity information.
+
+
+ -
+
- + {{ error }} + +
+
+
+
+
+
+
+
+ Note that when using JSON for configuration, you also need to change the endpoint configuration as shown below.
+Endpoint configuration:
++ JSON configuration file: +
+
+
+
+
+ Configure notifications for health checks built into ServiceControl (low disk space, stale database indexes, audit ingestion, etc.).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Email notifications
+ + +
+
+
+
+
diff --git a/frontend/src/components/configuration/MassTransitConnector.vue b/frontend/src/components/configuration/MassTransitConnector.vue
new file mode 100644
index 0000000000..81d0c7ed78
--- /dev/null
+++ b/frontend/src/components/configuration/MassTransitConnector.vue
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+
+ + Connector Version: {{ configuration.mass_transit_connector.version }} +
+
+
+ List of error queues configured in the connector.
+
+
+
+
+
+
+ The entries below are the most recent warning and error-level events recorded on the ServiceControl Connector.
+
+
+ No warning or error logs
+
+
+ {{ formatDate(log.date) }}
+ {{ log.level }}
+
+
+ {{ log.message }}
+
+
+
+
+
diff --git a/frontend/src/components/configuration/PlatformConnections.vue b/frontend/src/components/configuration/PlatformConnections.vue
new file mode 100644
index 0000000000..a853ed52ed
--- /dev/null
+++ b/frontend/src/components/configuration/PlatformConnections.vue
@@ -0,0 +1,138 @@
+
+
+
+ MassTransit Connector for ServiceControl is not configured.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Platform license type: {{ typeText(license, configuration) }}{{ licenseEdition }}
+
+
+
+
+ License expiry date:
+
+ {{ formattedExpirationDate }}
+ {{ licenseStatus.subscriptionDaysLeft }}
+
+
+
+ Your license expired. Please update the license to continue using the Particular Service Platform.
+
+ License expiry date:
+
+ {{ formattedExpirationDate }}
+ {{ licenseStatus.trialDaysLeft }}
+
+
+
+
+ Your license expired. To continue using the Particular Service Platform you'll need to extend your license.
+
+
+
+
+ Upgrade protection expiry date:
+
+ {{ formattedUpgradeProtectionExpiration }}
+ {{ licenseStatus.upgradeDaysLeft }}
+
+
+
+ Warning: Once upgrade protection expires, you'll no longer have access to support or new product versions.
+
+ Your license upgrade protection expired before this version of ServicePulse was released.
+
+ ServiceControl instance:
+ {{ formattedInstanceName }}
+
+
+
+
+ Need help?
+ Contact us
+
+
+
+
+
diff --git a/frontend/src/components/configuration/RetryRedirects.vue b/frontend/src/components/configuration/RetryRedirects.vue
new file mode 100644
index 0000000000..f9f5d4a4b1
--- /dev/null
+++ b/frontend/src/components/configuration/RetryRedirects.vue
@@ -0,0 +1,246 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + {{ redirect.from_physical_address }} +
++ + {{ redirect.to_physical_address }} +
+ +
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/customchecks/CustomChecksDashboardItem.vue b/frontend/src/components/customchecks/CustomChecksDashboardItem.vue
new file mode 100644
index 0000000000..113060771d
--- /dev/null
+++ b/frontend/src/components/customchecks/CustomChecksDashboardItem.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ customCheck.failure_reason }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Deleted message group
+
+
+
+
+
+
+
+
+
+
+ + {{ groupName }} +
+{{ totalCount }} messages in group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/failedmessages/FailedMessageGroups.vue b/frontend/src/components/failedmessages/FailedMessageGroups.vue
new file mode 100644
index 0000000000..00c56cf9a1
--- /dev/null
+++ b/frontend/src/components/failedmessages/FailedMessageGroups.vue
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
+
+ Modify Note
+Create Note
+
+
+
+
+
+ Failed message group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ groupName }} +
+{{ totalCount }} messages in group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/failedmessages/MessageGroupList.vue b/frontend/src/components/failedmessages/MessageGroupList.vue
new file mode 100644
index 0000000000..a6efa23ca1
--- /dev/null
+++ b/frontend/src/components/failedmessages/MessageGroupList.vue
@@ -0,0 +1,647 @@
+
+
+
+
+
+
+
+
+
+
+ + + + Last 10 completed retry requests +
+
+
+
+
+
+
+ There is only {{ historicOperations.length }} completed group retry
+ There are only {{ historicOperations.length }} completed group retries
+
+
+
+
+
+
+
+
+
+
+
+ {{ group.originator || "Selection of individual message(s)" }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/failedmessages/PendingRetries.vue b/frontend/src/components/failedmessages/PendingRetries.vue
new file mode 100644
index 0000000000..ff5050c294
--- /dev/null
+++ b/frontend/src/components/failedmessages/PendingRetries.vue
@@ -0,0 +1,421 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ MassTransit endpoints currently do not report when a pending retry has succeeded, and therefore any messages associated with those endpoints will need to be manually marked as resolved.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/heartbeats/EndpointSettingsSupported.vue b/frontend/src/components/heartbeats/EndpointSettingsSupported.vue
new file mode 100644
index 0000000000..b846a91a06
--- /dev/null
+++ b/frontend/src/components/heartbeats/EndpointSettingsSupported.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+ {{ endpointName }} Instances
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.
+
+
+
+
+
+
+
+ Delete an instance when that instance has been decommissioned.
+
+
+
+ You may
+
+ this endpoint
+
+
+
+
+
+
+
+
+ {{ instance.host_display_name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + If most of your endpoints are auto-scaled, consider changing this setting. + If most of your endpoint are hosted in physical infrastructure, consider changing this setting. +
+Track Instances is the best setting for endpoints where all instances are hosted in physical infrastructure that is not auto-scaled. Example, physical or virtual servers.
Do Not Track Instances is the best setting for endpoints that are hosted in infrastructure with autoscalers. Example, Kubernetes, Azure Container Apps and AWS Elastic Container Service.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ endpoint.name }}
+
+
+
+ {{ endpoint.name }}
+ +
+
+
+
+
+
+ Tracking all instances
+{{ endpoint.alive_count }} alive
+{{ endpoint.down_count }} no heartbeat
+ + +Not tracking instances
+{{ endpoint.alive_count }} alive
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ endpoint.muted_count }}
+
+
+
+
+ {{ endpoint.muted_count }}
+
+
+
+ No heartbeat data received for this {{ tooltipTarget }}. Have you installed and configured the heartbeats plugin for this {{ tooltipTarget }}?
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/DeleteMessageButton.vue b/frontend/src/components/messages/DeleteMessageButton.vue
new file mode 100644
index 0000000000..033d39ba1d
--- /dev/null
+++ b/frontend/src/components/messages/DeleteMessageButton.vue
@@ -0,0 +1,44 @@
+
+
+
+
+ Could not find the message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.
+ Message body unavailable.
+
+ Body was too large and not stored. Edit ServiceControl/MaxBodySizeToStore to be larger in the
+ ServiceControl configuration.
+
+ Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/DiffViewer.vue b/frontend/src/components/messages/DiffViewer.vue
new file mode 100644
index 0000000000..3048c4e3a1
--- /dev/null
+++ b/frontend/src/components/messages/DiffViewer.vue
@@ -0,0 +1,221 @@
+
+
+
+
+
+
+
+ {{ leftTitle }}
+ {{ rightTitle }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.lineInfo.left.lineNumber }}
+ {{ item.lineInfo.left.value }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.lineInfo.right.lineNumber }}
+ {{ item.lineInfo.right.value }}
+
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/EditAndRetryButton.vue b/frontend/src/components/messages/EditAndRetryButton.vue
new file mode 100644
index 0000000000..4976aedf4f
--- /dev/null
+++ b/frontend/src/components/messages/EditAndRetryButton.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/FlowDiagram/useLayout.ts b/frontend/src/components/messages/FlowDiagram/useLayout.ts
new file mode 100644
index 0000000000..7b76a90dfe
--- /dev/null
+++ b/frontend/src/components/messages/FlowDiagram/useLayout.ts
@@ -0,0 +1,48 @@
+import dagre from "@dagrejs/dagre";
+import { DefaultEdge, Node, Position, useVueFlow } from "@vue-flow/core";
+import { ref } from "vue";
+
+export function useLayout() {
+ const { findNode } = useVueFlow();
+
+ const graph = ref(new dagre.graphlib.Graph());
+
+ function layout(nodes: Node[], edges: DefaultEdge[]) {
+ // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+ const dagreGraph = new dagre.graphlib.Graph();
+
+ graph.value = dagreGraph;
+
+ dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+ const isHorizontal = false;
+ dagreGraph.setGraph({ rankdir: "TB" });
+
+ for (const node of nodes) {
+ const graphNode = findNode(node.id);
+ if (graphNode === undefined) continue;
+
+ dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 250, height: graphNode.dimensions.height || 55 });
+ }
+
+ for (const edge of edges) {
+ dagreGraph.setEdge(edge.source, edge.target);
+ }
+
+ dagre.layout(dagreGraph);
+
+ // set nodes with updated positions
+ return nodes.map((node) => {
+ const nodeWithPosition = dagreGraph.node(node.id);
+
+ return {
+ ...node,
+ targetPosition: isHorizontal ? Position.Left : Position.Top,
+ sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+ position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
+ };
+ });
+ }
+
+ return { graph, layout };
+}
diff --git a/frontend/src/components/messages/HeadersView.vue b/frontend/src/components/messages/HeadersView.vue
new file mode 100644
index 0000000000..7f8c05e7df
--- /dev/null
+++ b/frontend/src/components/messages/HeadersView.vue
@@ -0,0 +1,123 @@
+
+
+
+ FlowDiagram data is unavailable.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ header.key }}
+
+
+
+ {{ header.value }}
+
+ No headers found matching the search term.
+ Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.
+
+
+
diff --git a/frontend/src/components/messages/MessageView.vue b/frontend/src/components/messages/MessageView.vue
new file mode 100644
index 0000000000..b25a2a2a81
--- /dev/null
+++ b/frontend/src/components/messages/MessageView.vue
@@ -0,0 +1,222 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/MetadataLabel.vue b/frontend/src/components/messages/MetadataLabel.vue
new file mode 100644
index 0000000000..3531068151
--- /dev/null
+++ b/frontend/src/components/messages/MetadataLabel.vue
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/frontend/src/components/messages/RestoreMessageButton.vue b/frontend/src/components/messages/RestoreMessageButton.vue
new file mode 100644
index 0000000000..5390b3f822
--- /dev/null
+++ b/frontend/src/components/messages/RestoreMessageButton.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+ {{ state.data.message_type }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/SagaDiagram/MessageDataBox.vue b/frontend/src/components/messages/SagaDiagram/MessageDataBox.vue
new file mode 100644
index 0000000000..4124fe83f7
--- /dev/null
+++ b/frontend/src/components/messages/SagaDiagram/MessageDataBox.vue
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/SagaDiagram/NoSagaData.vue b/frontend/src/components/messages/SagaDiagram/NoSagaData.vue
new file mode 100644
index 0000000000..f53ea14477
--- /dev/null
+++ b/frontend/src/components/messages/SagaDiagram/NoSagaData.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/SagaDiagram/SagaCompletedNode.vue b/frontend/src/components/messages/SagaDiagram/SagaCompletedNode.vue
new file mode 100644
index 0000000000..00ea2a4668
--- /dev/null
+++ b/frontend/src/components/messages/SagaDiagram/SagaCompletedNode.vue
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+ This message is not part of any saga
+
+
+
+
+
diff --git a/frontend/src/components/messages/SagaDiagram/SagaDiagramParser.ts b/frontend/src/components/messages/SagaDiagram/SagaDiagramParser.ts
new file mode 100644
index 0000000000..89cedd2659
--- /dev/null
+++ b/frontend/src/components/messages/SagaDiagram/SagaDiagramParser.ts
@@ -0,0 +1,181 @@
+import { SagaHistory } from "@/resources/SagaHistory";
+import { typeToName } from "@/composables/typeHumanizer";
+import { SagaMessageData } from "@/stores/SagaDiagramStore";
+import { getTimeoutFriendly } from "@/composables/deliveryDelayParser";
+
+export interface SagaMessageViewModel {
+ MessageId: string;
+ FriendlyTypeName: string;
+ FormattedTimeSent: string;
+ Data: SagaMessageData;
+ IsEventMessage: boolean;
+ IsCommandMessage: boolean;
+}
+export interface InitiatingMessageViewModel {
+ FriendlyTypeName: string;
+ IsSagaTimeoutMessage: boolean;
+ FormattedMessageTimestamp: string;
+ IsEventMessage: boolean;
+ MessageData: SagaMessageData;
+ HasRelatedTimeoutRequest?: boolean;
+ MessageId: string;
+}
+export interface SagaTimeoutMessageViewModel extends SagaMessageViewModel {
+ TimeoutFriendly: string;
+ HasBeenProcessed: boolean;
+}
+
+export interface SagaUpdateViewModel {
+ MessageId: string;
+ StartTime: Date;
+ FinishTime: Date;
+ FormattedStartTime: string;
+ InitiatingMessage: InitiatingMessageViewModel;
+ Status: string;
+ StatusDisplay: string;
+ HasTimeout: boolean;
+ IsFirstNode: boolean;
+ OutgoingMessages: SagaMessageViewModel[];
+ OutgoingTimeoutMessages: SagaTimeoutMessageViewModel[];
+ HasOutgoingMessages: boolean;
+ HasOutgoingTimeoutMessages: boolean;
+ showUpdatedPropertiesOnly: boolean;
+ stateAfterChange: string;
+ previousStateAfterChange?: string;
+}
+
+export interface SagaViewModel {
+ SagaTitle: string;
+ SagaGuid: string;
+ ParticipatedInSaga: boolean;
+ HasSagaData: boolean;
+ ShowNoPluginActiveLegend: boolean;
+ SagaCompleted: boolean;
+ FormattedCompletionTime: string;
+ SagaUpdates: SagaUpdateViewModel[];
+ ShowMessageData: boolean;
+}
+
+export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData: SagaMessageData[]): SagaUpdateViewModel[] {
+ if (!sagaHistory || !sagaHistory.changes || !sagaHistory.changes.length) return [];
+
+ const timeoutMessageIds = new Set
+
+
+
+
+ ![Saga Completed]()
+
+ Saga Completed
+ +
+
+
+
+
diff --git a/frontend/src/components/messages/SagaDiagram/SagaOutgoingMessage.vue b/frontend/src/components/messages/SagaDiagram/SagaOutgoingMessage.vue
new file mode 100644
index 0000000000..4a8f36f138
--- /dev/null
+++ b/frontend/src/components/messages/SagaDiagram/SagaOutgoingMessage.vue
@@ -0,0 +1,187 @@
+
+
+
+
+
+
+
+
+
+ {{ sagaTitle }}
+
+ guid {{ sagaGuid }}
+
+
+ ![]()
+
+
+
+
+
diff --git a/frontend/src/components/messages/SagaDiagram/SagaOutgoingTimeoutMessage.vue b/frontend/src/components/messages/SagaDiagram/SagaOutgoingTimeoutMessage.vue
new file mode 100644
index 0000000000..92d1047130
--- /dev/null
+++ b/frontend/src/components/messages/SagaDiagram/SagaOutgoingTimeoutMessage.vue
@@ -0,0 +1,224 @@
+
+
+
+ {{ message.FriendlyTypeName }}
+ +
+
+
+
+
diff --git a/frontend/src/components/messages/SagaDiagram/SagaPluginNeeded.vue b/frontend/src/components/messages/SagaDiagram/SagaPluginNeeded.vue
new file mode 100644
index 0000000000..56e2f74923
--- /dev/null
+++ b/frontend/src/components/messages/SagaDiagram/SagaPluginNeeded.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+ ![Timeout Request]()
+ Timeout Requested = {{ message.TimeoutFriendly }}
+ Timeout Requested = {{ message.TimeoutFriendly }}
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ {{ message.FriendlyTypeName }}
+ +
+
+
+
+
diff --git a/frontend/src/components/messages/SagaDiagram/SagaUpdateNode.vue b/frontend/src/components/messages/SagaDiagram/SagaUpdateNode.vue
new file mode 100644
index 0000000000..3b5a038707
--- /dev/null
+++ b/frontend/src/components/messages/SagaDiagram/SagaUpdateNode.vue
@@ -0,0 +1,490 @@
+
+
+
+
+
+
+
+
+ Saga audit plugin needed to visualize saga
+ +
+
+
+
+
+
diff --git a/frontend/src/components/messages/SequenceDiagram.vue b/frontend/src/components/messages/SequenceDiagram.vue
new file mode 100644
index 0000000000..cb0606fb11
--- /dev/null
+++ b/frontend/src/components/messages/SequenceDiagram.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+ {{ update.InitiatingMessage.FriendlyTypeName }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initial Saga State
+State Changes
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/SequenceDiagram/EndpointTooltip.vue b/frontend/src/components/messages/SequenceDiagram/EndpointTooltip.vue
new file mode 100644
index 0000000000..14b616567f
--- /dev/null
+++ b/frontend/src/components/messages/SequenceDiagram/EndpointTooltip.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+ {{ endpoint.name }}
+
+ {{ endpoint.version }}
+
+ {{ endpoint.host }}
+
+
+
+
diff --git a/frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue b/frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue
new file mode 100644
index 0000000000..10d328a771
--- /dev/null
+++ b/frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+ {{ endpoint.name }}
+ Start of Conversation
+
+
+
+
+
diff --git a/frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue b/frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue
new file mode 100644
index 0000000000..994679f74c
--- /dev/null
+++ b/frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue
@@ -0,0 +1,154 @@
+
+
+
+ Processing of Message
+
+
+ {{ formatTime(handler.processingTime ?? 0) }}
+
+ {{ handler.friendlyName }}
+
+ {{ handler.partOfSaga }}
+
+
+
+
+
+
diff --git a/frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue b/frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue
new file mode 100644
index 0000000000..d8cd9bcb50
--- /dev/null
+++ b/frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue
@@ -0,0 +1,156 @@
+
+
+
+
+ {{ RoutedMessageType[routedMessage.type] }}
+
+
+ {{ routedMessage.name }}
+
+ {{ routedMessage.messageId }}
+
+ {{ `${routedMessage.sending.name}@${routedMessage.sending.host}` }}
+
+ {{ `${routedMessage.receiving.name}@${routedMessage.receiving.host}` }}
+
+
+
+
+ {{ line }}
+
+
+
+
+
diff --git a/frontend/src/components/messages/StacktraceView.vue b/frontend/src/components/messages/StacktraceView.vue
new file mode 100644
index 0000000000..d14ecefdf9
--- /dev/null
+++ b/frontend/src/components/messages/StacktraceView.vue
@@ -0,0 +1,43 @@
+
+
+
+
+ {{ line.spaces }}{{ selectedLanguage.at }}
+
+ {{ line.type }}.{{ line.method }}(
+
+ {{ param.type }} {{ param.name }}
+ ,
+ )
+
+
+ {{ selectedLanguage.in }} {{ line.file }}:{{ selectedLanguage.line }} {{ line.lineNumber }}
+
+
+
+ Stacktrace not available.
+
+
+
+
+
+
diff --git a/frontend/src/components/modal.css b/frontend/src/components/modal.css
new file mode 100644
index 0000000000..ad78821857
--- /dev/null
+++ b/frontend/src/components/modal.css
@@ -0,0 +1,92 @@
+.modal-mask {
+ position: fixed;
+ z-index: 9998;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: table;
+ transition: opacity 0.3s ease;
+}
+
+.modal-wrapper {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.modal-container {
+ width: 600px;
+ margin: 0px auto;
+ padding: 20px 30px;
+ background-color: #fff;
+ border-radius: 2px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+ transition: all 0.3s ease;
+}
+
+.modal-header {
+ padding: 15px;
+ border-bottom: 1px solid #e5e5e5;
+}
+
+.modal-title {
+ margin: 0;
+ line-height: 1.42857143;
+}
+
+.modal-body {
+ position: relative;
+ padding: 15px;
+ overflow: auto;
+ min-height: 0;
+}
+
+.modal-footer .btn + .btn {
+ margin-bottom: 0;
+ margin-left: 5px;
+}
+
+.modal-footer {
+ padding: 15px;
+ text-align: right;
+ border-top: 1px solid #e5e5e5;
+}
+
+.modal-container {
+ padding: 0;
+ border-radius: 5px;
+}
+
+.modal-container .btn {
+ font-size: 14px;
+}
+
+.modal-content {
+ position: relative;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid #999;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 6px;
+ -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
+ box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
+ outline: 0;
+ max-height: 95vh;
+}
+
+@media (min-width: 768px) {
+ .modal-dialog {
+ width: 600px;
+ margin: 30px auto;
+ }
+}
+
+.modal-open .modal.modal-msg-editor,
+.modal-open {
+ overflow-y: hidden;
+}
+
+.modal .btn.btn-primary {
+ padding: 8px 20px;
+}
diff --git a/frontend/src/components/monitoring/EndpointBacklog.vue b/frontend/src/components/monitoring/EndpointBacklog.vue
new file mode 100644
index 0000000000..c2a2a49a1f
--- /dev/null
+++ b/frontend/src/components/monitoring/EndpointBacklog.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/EndpointDetails.vue b/frontend/src/components/monitoring/EndpointDetails.vue
new file mode 100644
index 0000000000..defa033484
--- /dev/null
+++ b/frontend/src/components/monitoring/EndpointDetails.vue
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+
+ {{ QueueLength.label }}
+
+
+
+
+ {{ formatGraphDecimalFromNumber(endpoint.digest.metrics.queueLength?.latest, 0) }} MSGS
+
+ ?
+
+
+
+ {{ formatGraphDecimalFromNumber(endpoint.digest.metrics.queueLength?.average, 0) }} MSGS AVG
+
+ ?
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/EndpointInstances.vue b/frontend/src/components/monitoring/EndpointInstances.vue
new file mode 100644
index 0000000000..597be75261
--- /dev/null
+++ b/frontend/src/components/monitoring/EndpointInstances.vue
@@ -0,0 +1,220 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ endpointName }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Message Types ({{ endpoint.messageTypes.length }}) +
++ Instances ({{ endpoint.instances.length }}) +
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/EndpointList.vue b/frontend/src/components/monitoring/EndpointList.vue
new file mode 100644
index 0000000000..73cbaeb66d
--- /dev/null
+++ b/frontend/src/components/monitoring/EndpointList.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+ {{ Throughput.tooltip }}
+
+
+ {{ ScheduledRetries.tooltip }}
+
+
+ {{ ProcessingTime.tooltip }}
+
+
+ {{ CriticalTime.tooltip }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ instance.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ QueueLength.tooltip }}
+
+
+ {{ Throughput.tooltip }}
+
+
+ {{ ScheduledRetries.tooltip }}
+
+
+ {{ ProcessingTime.unit }}
+
+
+ {{ CriticalTime.tooltip }}
+
+
+
+
+
+
+
+
+
+ {{ endpointGroup.group }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ shortName }}
+
+
+
+
+ ({{ endpoint.connectedCount }}/{{ endpoint.connectedCount + endpoint.disconnectedCount }})
+ {{ endpoint.name }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : formatGraphDecimal(endpoint.metrics.queueLength, 0) }}
+ ?
+ ?
+
+
+
+
+
+
+
+
+
+ {{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : formatGraphDecimal(endpoint.metrics.throughput, 2) }}
+ ?
+ ?
+
+
+
+
+
+
+
+
+
+ {{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : formatGraphDecimal(endpoint.metrics.retries, 2) }}
+ ?
+ ?
+
+
+
+
+
+
+
+
+
+ {{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : processingTimeGraphDuration.value }}
+ ?
+ ?
+ {{ processingTimeGraphDuration.unit }}
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/EndpointMessageTypes.vue b/frontend/src/components/monitoring/EndpointMessageTypes.vue
new file mode 100644
index 0000000000..93d610e1b8
--- /dev/null
+++ b/frontend/src/components/monitoring/EndpointMessageTypes.vue
@@ -0,0 +1,211 @@
+
+
+
+
+
+
+
+
+ {{ endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true ? "" : criticalTimeGraphDuration.value }}
+ ?
+ ?
+ {{ criticalTimeGraphDuration.unit }}
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/EndpointTimings.vue b/frontend/src/components/monitoring/EndpointTimings.vue
new file mode 100644
index 0000000000..644949b3cf
--- /dev/null
+++ b/frontend/src/components/monitoring/EndpointTimings.vue
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ Throughput.tooltip }}
+
+
+ {{ ScheduledRetries.tooltip }}
+
+
+ {{ ProcessingTime.tooltip }}
+
+
+ {{ CriticalTime.tooltip }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/EndpointWorkload.vue b/frontend/src/components/monitoring/EndpointWorkload.vue
new file mode 100644
index 0000000000..2b84e8b564
--- /dev/null
+++ b/frontend/src/components/monitoring/EndpointWorkload.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/LargeGraph.vue b/frontend/src/components/monitoring/LargeGraph.vue
new file mode 100644
index 0000000000..c787df30e7
--- /dev/null
+++ b/frontend/src/components/monitoring/LargeGraph.vue
@@ -0,0 +1,177 @@
+
+
+
+
+
+
+
+
+
+ {{ ProcessingTime.label }}
+
+
+
+
+ {{ latestProcessingTime.value }}
+ {{ latestProcessingTime.unit }}
+
+ ?
+
+
+
+ {{ averageProcessingTime.value }}
+ {{ averageProcessingTime.unit }} AVG
+
+ ?
+
+
+
+ {{ CriticalTime.label }}
+
+
+
+
+ {{ latestCriticalTime.value }}
+ {{ latestCriticalTime.unit }}
+
+ ?
+
+
+
+ {{ averageCriticalTime.value }}
+ {{ averageCriticalTime.unit }} AVG
+
+ ?
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/MonitoringFilter.vue b/frontend/src/components/monitoring/MonitoringFilter.vue
new file mode 100644
index 0000000000..8a1f49a0bb
--- /dev/null
+++ b/frontend/src/components/monitoring/MonitoringFilter.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+ AVG
+
+ {{ series1AverageLabelValue }} {{ series1AverageLabelSuffix }}
+
+
+
+ AVG
+
+ {{ series2AverageLabelValue }} {{ series2AverageLabelSuffix }}
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/MonitoringGroupBy.vue b/frontend/src/components/monitoring/MonitoringGroupBy.vue
new file mode 100644
index 0000000000..5233edcb8d
--- /dev/null
+++ b/frontend/src/components/monitoring/MonitoringGroupBy.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/MonitoringHead.vue b/frontend/src/components/monitoring/MonitoringHead.vue
new file mode 100644
index 0000000000..ef66dade5b
--- /dev/null
+++ b/frontend/src/components/monitoring/MonitoringHead.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/MonitoringHistoryPeriod.vue b/frontend/src/components/monitoring/MonitoringHistoryPeriod.vue
new file mode 100644
index 0000000000..c89af83230
--- /dev/null
+++ b/frontend/src/components/monitoring/MonitoringHistoryPeriod.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/MonitoringMenuItem.vue b/frontend/src/components/monitoring/MonitoringMenuItem.vue
new file mode 100644
index 0000000000..bf6aa8863b
--- /dev/null
+++ b/frontend/src/components/monitoring/MonitoringMenuItem.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ Endpoints overview
+
+
+ MassTransit endpoints are currently not supported by monitoring functionality and will not show in this view.
+
+
+
+
+
diff --git a/frontend/src/components/monitoring/MonitoringNotAvailable.vue b/frontend/src/components/monitoring/MonitoringNotAvailable.vue
new file mode 100644
index 0000000000..d59fcc6f2a
--- /dev/null
+++ b/frontend/src/components/monitoring/MonitoringNotAvailable.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No monitoring data available
+The monitoring service is active but no data is being returned.
+This may be due to one or more of the following causes:
+-
+
- No endpoints running. +
- No endpoints with monitoring plugin enabled. +
- Endpoints sending data to incorrect queue or monitoring server listening. +
+
+
+
+
diff --git a/frontend/src/components/monitoring/PlotData.ts b/frontend/src/components/monitoring/PlotData.ts
new file mode 100644
index 0000000000..30f703edd1
--- /dev/null
+++ b/frontend/src/components/monitoring/PlotData.ts
@@ -0,0 +1,6 @@
+export interface PlotData {
+ points: number[];
+ average: number;
+}
+
+export type Coordinate = [number, number];
diff --git a/frontend/src/components/monitoring/SmallGraph.vue b/frontend/src/components/monitoring/SmallGraph.vue
new file mode 100644
index 0000000000..61cbc23524
--- /dev/null
+++ b/frontend/src/components/monitoring/SmallGraph.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No monitoring connectivity
++ Monitoring is not available at {{ monitoringUrl }} +
+This may be due to one or more of the following causes:
+
+
+
+ -
+
- Monitoring has been disabled +
- Monitoring server is not running. +
- Monitoring server address is incorrect. +
- Monitoring server not accessible. You may need to validate the configured hostname in the ServiceControl Management Utility. +
+
+
+
+
diff --git a/frontend/src/components/monitoring/endpoint.css b/frontend/src/components/monitoring/endpoint.css
new file mode 100644
index 0000000000..6b9c947b46
--- /dev/null
+++ b/frontend/src/components/monitoring/endpoint.css
@@ -0,0 +1,459 @@
+.endpoint-status {
+ display: flex;
+ top: 1px;
+ margin-left: 7px;
+ padding-left: 0;
+ align-items: baseline;
+}
+
+.endpoint-status .warning {
+ display: block;
+ position: relative;
+}
+
+.endpoint-status .endpoint-status-icon {
+ font-size: 20px;
+ color: #ce4844;
+}
+
+h1 .endpoint-status .endpoint-status-icon {
+ font-size: 24px;
+}
+
+.endpoint-status .endpoint-status-icon {
+ color: #777f7f;
+}
+
+.endpoint-status .endpoint-status-icon:hover {
+ color: #23527c;
+}
+
+.endpoint-status .badge {
+ position: relative;
+ top: 8px;
+ font-size: 10px;
+ margin-right: 0;
+ left: -10px;
+}
+
+.endpoint-status .endpoint-status-icon {
+ font-size: 20px;
+ margin-left: 6px;
+}
+
+.endpoint-status a {
+ position: relative;
+ top: -4px;
+ padding-left: 5px;
+}
+
+.endpoint-status a:hover {
+ text-decoration: none;
+}
+
+.endpoint-status a[ng-if="endpoint.errorCount"] {
+ top: -11px;
+}
+
+.endpoint-status .badge {
+ position: relative;
+ top: 2px;
+ left: -9px;
+ font-size: 10px;
+}
+
+.endpoint-status .pa-endpoint-lost.endpoint-details,
+.endpoint-status .pa-monitoring-lost.endpoint-details,
+.endpoint-status .pa-endpoint-lost.endpoints-overview,
+.endpoint-status .pa-monitoring-lost.endpoints-overview {
+ display: inline-block;
+ width: 26px;
+ height: 26px;
+ left: 6px;
+ position: relative;
+}
+
+.endpoint-status .pa-monitoring-lost.endpoints-overview,
+.endpoint-status .pa-monitoring-lost.endpoint-details {
+ top: 4px;
+}
+
+.pa-endpoint-lost.endpoints-overview {
+ background-image: url("@/assets/endpoint-lost.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.pa-monitoring-lost.endpoints-overview {
+ background-image: url("@/assets/monitoring-lost.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.pa-endpoint-lost.endpoint-details {
+ background-image: url("@/assets/endpoint-lost.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.pa-monitoring-lost.endpoint-details {
+ background-image: url("@/assets/monitoring-lost.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.pa-warning {
+ background-image: url("@/assets/warning.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin-left: 4px;
+ padding-top: 31px;
+}
+
+.message-type-status .pa-warning {
+ margin-top: -3px;
+}
+
+.endpoint-message-types .endpoint-status {
+ margin-top: -8px;
+}
+
+.endpoint-name > div > div > a {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ color: #00729c;
+ border-bottom: 1px dotted lightgrey;
+}
+
+.endpoint-name > div > div > a:first-child:hover {
+ border-bottom: 1px solid #00729c;
+ text-decoration: none !important;
+}
+
+.endpoint-row {
+ display: flex;
+ position: relative;
+ padding: 2px 0 4px;
+ border-top: 1px solid #eee;
+ border-right: 1px solid #fff;
+ border-bottom: 1px solid #eee;
+ border-left: 1px solid #fff;
+ background-color: #fff;
+ margin: 0px;
+}
+
+.endpoint-name,
+.endpoint-name > div {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.endpoint-name {
+ gap: 0.25em;
+}
+
+.endpoint-name .box-header.with-status {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ max-width: 100%;
+}
+
+.endpoint-name .box-header.with-status > *:not(:first-child) {
+ margin-left: 0.25em;
+}
+
+/* RESPONSIVE TWEAKS */
+
+@media only screen and (min-width: 993px) {
+ .filter-period-menu {
+ margin-right: 0px;
+ }
+}
+
+@media only screen and (max-width: 992px) {
+ .filter-period-menu,
+ .sort-menu {
+ float: left !important;
+ }
+
+ .sort-menu {
+ margin-top: 0;
+ padding-top: 0;
+ }
+}
+
+@media only screen and (max-width: 768px) {
+ .filter-toolbar .input-group {
+ margin-bottom: 6px;
+ }
+
+ .msg-group-menu {
+ float: left !important;
+ margin-top: 0;
+ margin-left: 15px;
+ }
+
+ div.sp-pull-right {
+ display: inline-block;
+ float: none;
+ margin-top: 0px;
+ }
+
+ button.btn.btn-default {
+ margin-left: 0;
+ margin-right: 6px;
+ margin-bottom: 6px;
+ }
+
+ .input-group-btn button.btn.btn-default {
+ margin-right: 0;
+ }
+
+ .no-mobile-side-padding {
+ padding-right: 0;
+ padding-left: 0;
+ }
+
+ .tabs h5 {
+ padding-bottom: 4px;
+ margin-bottom: 10px;
+ }
+
+ .navbar-collapse.collapse.in {
+ padding: 0 0 0 16px !important;
+ }
+}
+
+@media only screen and (max-width: 480px) {
+ .sidebar-label {
+ margin: 3px 0 14px;
+ }
+
+ .btn-toolbar .btn,
+ .btn-toolbar .btn-group,
+ .btn-toolbar .input-group {
+ float: left !important;
+ }
+
+ button.btn.btn-default.ng-binding.ng-isolate-scope {
+ margin-right: 4px !important;
+ }
+
+ div.btn-toolbar,
+ div.form-inliner {
+ margin-bottom: 12px;
+ }
+
+ .filter-toolbar,
+ .action-toolbar {
+ margin-top: 2px;
+ }
+
+ div.sp-pull-right {
+ display: inline-block;
+ float: none;
+ margin-top: 4px;
+ }
+
+ .progress.bulk-retry-progress {
+ margin-top: 6px;
+ }
+}
+
+@media only screen and (max-width: 320px) {
+ div.btn-toolbar,
+ div.form-inliner {
+ margin-bottom: 0px;
+ }
+}
+
+.table-head-row .col-xl-7,
+.endpoint-row .col-xl-7 {
+ width: 20%;
+}
+
+.table-head-row .col-xl-8,
+.endpoint-row .col-xl-8 {
+ width: 36%;
+}
+
+.table-head-row .col-xl-1,
+.endpoint-row .col-xl-1 {
+ width: 16%;
+}
+
+@media only screen and (min-width: 1730px) {
+ .table-head-row .col-xl-7,
+ .endpoint-row .col-xl-7 {
+ width: 30%;
+ }
+
+ .table-head-row .col-xl-8,
+ .endpoint-row .col-xl-8 {
+ width: 44%;
+ }
+
+ .table-head-row .col-xl-1,
+ .endpoint-row .col-xl-1 {
+ width: 14%;
+ }
+}
+
+.sparkline-value {
+ top: 16px;
+ left: -0.6em;
+ position: relative;
+ font-weight: normal;
+ float: right;
+ width: 25%;
+}
+
+.sparkline-value span {
+ color: #777f7f;
+ text-transform: uppercase;
+ font-size: 11px;
+}
+
+.sparkline-value.sec {
+ color: #0000ff;
+}
+
+.sparkline-value.sec span {
+ color: #007aff;
+}
+
+.sparkline-value.min {
+ color: #8b00d0;
+}
+
+.sparkline-value.min span {
+ color: #b14ae4;
+}
+
+.sparkline-value.hr {
+ color: #d601da;
+}
+
+.sparkline-value.hr span {
+ color: #d764d9;
+}
+
+.sparkline-value.d {
+ color: #ad0017;
+}
+
+.sparkline-value.d span {
+ color: #ff0004;
+}
+
+.graph-message-retries-throughputs,
+.graph-critical-processing-times {
+ margin-left: 0.5%;
+}
+
+.monitoring-no-data {
+ margin: 60px auto 120px;
+ max-width: 520px;
+ line-height: 26px;
+}
+
+.monitoring-no-data h1 {
+ font-size: 30px;
+}
+
+.monitoring-no-data-content {
+ width: 80%;
+ display: inline-block;
+ margin: 0 auto;
+ padding: 3px;
+}
+.monitoring-no-data-list {
+ text-align: left;
+ list-style-type: circle;
+}
+.monitoring-no-data p {
+ font-size: 16px;
+ margin-bottom: 20px;
+ margin-top: -18px;
+}
+
+.monitoring-no-data ul {
+ padding-left: 0;
+ text-align: left;
+ font-size: 16px;
+ margin-bottom: 30px;
+}
+
+.monitoring-no-data .btn {
+ font-size: 16px;
+}
+
+.monitoring-no-data a.btn.btn-default.btn-secondary {
+ margin-left: 10px;
+}
+
+:deep(span.table-header-unit) {
+ color: #777f7f;
+}
+
+.box-header {
+ padding-bottom: 3px;
+ padding-top: 2px;
+}
+
+.box-header ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.righ-side-ellipsis {
+ direction: rtl;
+ text-align: left;
+}
+
+@supports (-ms-ime-align: auto) {
+ .righ-side-ellipsis {
+ direction: ltr;
+ }
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ .righ-side-ellipsis {
+ direction: ltr;
+ }
+}
+
+i.fa.pa-endpoint-lost.endpoints-overview,
+i.fa.pa-monitoring-lost.endpoints-overview,
+i.fa.pa-endpoint-lost.endpoint-details,
+i.fa.pa-monitoring-lost.endpoint-details {
+ position: relative;
+ margin-right: 4px;
+ top: 4px;
+}
+
+i.fa.pa-endpoint-lost.endpoints-overview {
+ top: 8px;
+}
+
+.endpoint-instances .fa.pa-endpoint-lost.endpoint-details {
+ top: 4px;
+}
+
+div[content="Unable to connect to instance"],
+div[content="Unable to connect to monitoring server"] {
+ z-index: 99999;
+}
+
+.pull-left {
+ float: left;
+}
diff --git a/frontend/src/components/monitoring/endpointSubTab.css b/frontend/src/components/monitoring/endpointSubTab.css
new file mode 100644
index 0000000000..022c995410
--- /dev/null
+++ b/frontend/src/components/monitoring/endpointSubTab.css
@@ -0,0 +1,51 @@
+.endpoint-row {
+ padding: 0.5em 1.5em;
+ margin: 0;
+}
+
+.box {
+ box-shadow: none;
+ margin: 0;
+}
+
+.box-no-click {
+ background: none;
+ border-bottom: 1px solid #ced6d3;
+ border-left: none;
+ border-right: none;
+ cursor: default;
+}
+
+.box-no-click:first-child {
+ border-top: 1px solid #ced6d3;
+}
+
+.box-no-click {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.box-no-click:hover {
+ background: none !important;
+ border-bottom: 1px solid #ced6d3 !important;
+ border-left: none;
+ border-right: none;
+ border-top: none;
+ cursor: default;
+ padding-top: 21px;
+}
+
+.box-no-click:first-child:hover {
+ border-top: 1px solid #ced6d3 !important;
+ padding-top: 20px;
+}
+
+.box-no-click > div > div {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.box-no-click > div > div > div {
+ padding-left: 0;
+ padding-right: 0;
+}
diff --git a/frontend/src/components/monitoring/endpointTables.css b/frontend/src/components/monitoring/endpointTables.css
new file mode 100644
index 0000000000..143d50f310
--- /dev/null
+++ b/frontend/src/components/monitoring/endpointTables.css
@@ -0,0 +1,29 @@
+/* Endpoint graph table*/
+
+.table-head-row {
+ display: flex;
+ padding-bottom: 5px;
+ padding-top: 20px;
+ border-bottom: 1px solid #ced6d3;
+ border-top: 1px solid #eee;
+ text-transform: uppercase;
+ color: #181919;
+}
+.table-first-col {
+ width: 20%;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+.table-col {
+ width: 16%;
+}
+
+/*TODO: why should wider viewports give more proportional width to the first column?*/
+@media only screen and (min-width: 1730px) {
+ .table-first-col {
+ width: 30%;
+ }
+ .table-col {
+ width: 14%;
+ }
+}
diff --git a/frontend/src/components/monitoring/endpoints.ts b/frontend/src/components/monitoring/endpoints.ts
new file mode 100644
index 0000000000..f5ae7ae381
--- /dev/null
+++ b/frontend/src/components/monitoring/endpoints.ts
@@ -0,0 +1,40 @@
+import type { DigestValues, EndpointDigest, EndpointMetrics, EndpointValues, EndpointValuesWithTime, ExtendedEndpointDetails } from "@/resources/MonitoringEndpoint";
+
+const defaultMetricData: EndpointValues = {
+ points: [],
+ average: 0,
+};
+
+const defaultTimeMetricData: EndpointValuesWithTime = {
+ ...defaultMetricData,
+ timeAxisValues: [],
+};
+
+export const emptyEndpointMetrics = (): EndpointMetrics => ({
+ queueLength: defaultMetricData,
+ throughput: defaultMetricData,
+ retries: defaultMetricData,
+ processingTime: defaultTimeMetricData,
+ criticalTime: defaultTimeMetricData,
+});
+
+const defaultDigestValuesData: DigestValues = {};
+
+export const emptyEndpointDigest = (): EndpointDigest => ({
+ queueLength: defaultDigestValuesData,
+ throughput: defaultDigestValuesData,
+ retries: defaultDigestValuesData,
+ processingTime: defaultDigestValuesData,
+ criticalTime: defaultDigestValuesData,
+});
+
+export const emptyEndpointDetails = (): ExtendedEndpointDetails => ({
+ instances: [],
+ digest: { metrics: emptyEndpointDigest() },
+ metricDetails: { metrics: emptyEndpointMetrics() },
+ isScMonitoringDisconnected: false,
+ serviceControlId: "",
+ errorCount: 0,
+ isStale: false,
+ messageTypes: [],
+});
diff --git a/frontend/src/components/monitoring/formatGraph.ts b/frontend/src/components/monitoring/formatGraph.ts
new file mode 100644
index 0000000000..81d70a1f70
--- /dev/null
+++ b/frontend/src/components/monitoring/formatGraph.ts
@@ -0,0 +1,42 @@
+import { type EndpointValues } from "@/resources/MonitoringEndpoint";
+import { useFormatTime, useFormatLargeNumber, type ValueWithUnit } from "../../composables/formatter";
+
+export function formatGraphDuration(input?: EndpointValues): ValueWithUnit {
+ if (input != null) {
+ const lastValue = input.points.length > 0 ? input.points[input.points.length - 1] : 0;
+ return useFormatTime(lastValue);
+ }
+ return { value: "0", unit: "" };
+}
+
+export function formatGraphDecimalFromNumber(input?: number, deci?: number): string {
+ input = input ?? 0;
+ let decimals = 0;
+ if (input < 10 || input > 1000000) {
+ decimals = 2;
+ }
+ return useFormatLargeNumber(input, deci || decimals);
+}
+
+export function formatGraphDecimal(input?: EndpointValues, deci?: number): string {
+ input = input ?? {
+ points: [],
+ average: 0,
+ };
+ const lastValue = input.points.length > 0 ? input.points[input.points.length - 1] : 0;
+ return formatGraphDecimalFromNumber(lastValue, deci);
+}
+
+export const largeGraphsMinimumYAxis = Object.freeze({
+ queueLength: 10,
+ throughputRetries: 10,
+ processingCritical: 10,
+});
+
+export const smallGraphsMinimumYAxis = Object.freeze({
+ queueLength: 10,
+ throughput: 10,
+ retries: 10,
+ processingTime: 10,
+ criticalTime: 10,
+});
diff --git a/frontend/src/components/monitoring/graphLines.ts b/frontend/src/components/monitoring/graphLines.ts
new file mode 100644
index 0000000000..957dd71442
--- /dev/null
+++ b/frontend/src/components/monitoring/graphLines.ts
@@ -0,0 +1,79 @@
+import { ref, toValue, watchEffect } from "vue";
+import type { Coordinate, PlotData } from "./PlotData";
+
+export function useGraph(plotdata: () => PlotData | undefined, minimumyaxis: () => number | undefined, minPoints = () => 10) {
+ const valuesPath = ref(""),
+ valuesArea = ref(""),
+ maxYaxis = ref(10),
+ average = ref(0),
+ averageLine = ref("");
+
+ const createGraph = () => {
+ const plotData = toValue(plotdata) ?? { points: [], average: 0 };
+ const values = (() => {
+ let result = plotData.points;
+ if (result.length === 0) {
+ result = new Array(toValue(minPoints)).fill(0);
+ }
+ return result;
+ })();
+ const xTick = 100 / (values.length - 1);
+ const coordinates = values.reduce((points: Coordinate[], yValue, i) => [...points, [i * xTick, yValue] as Coordinate], []);
+ valuesPath.value = new Path().startAt(coordinates[0]).followCoordinates(coordinates.slice(1)).toString();
+ valuesArea.value = new Path().startAt([0, 0]).followCoordinates(coordinates).lineTo([100, 0]).close().toString();
+
+ average.value = plotData.average;
+ //TODO: why is this called minimumYaxis when it's only used to determine the maxYaxis?
+ // should the graph actually set the min y value rather than leave it at 0?
+ const minYaxis = toValue(minimumyaxis) ?? 10;
+ const minimumYaxis = !isNaN(minYaxis) ? Number(minYaxis) : 10;
+ maxYaxis.value = Math.max(...[...values, average.value * 1.5, minimumYaxis]);
+
+ averageLine.value = new Path().startAt([0, average.value]).lineTo([100, average.value]).toString();
+ };
+
+ watchEffect(() => createGraph());
+
+ return { valuesPath, valuesArea, maxYaxis, average, averageLine };
+}
+
+class Path {
+ #pathElements: string[] = [];
+ #complete = false;
+
+ startAt([x, y]: Coordinate) {
+ if (this.#pathElements.length > 0) throw new Error("startAt must be the first call on a path");
+ return this.moveTo([x, y]);
+ }
+
+ moveTo([x, y]: Coordinate) {
+ if (this.#complete) throw new Error("Path is already closed");
+ this.#pathElements.push(`M${x} ${y}`);
+ return this;
+ }
+
+ lineTo([x, y]: Coordinate) {
+ if (this.#complete) throw new Error("Path is already closed");
+ this.#pathElements.push(`L${x} ${y}`);
+ return this;
+ }
+
+ followCoordinates(coordinates: Coordinate[]) {
+ for (const c of coordinates) {
+ this.lineTo(c);
+ }
+ return this;
+ }
+
+ close() {
+ if (this.#complete) throw new Error("Path is already closed");
+ if (this.#pathElements.length === 0) throw new Error("Cannot close an empty path");
+ this.#pathElements.push("Z");
+ this.#complete = true;
+ return this;
+ }
+
+ toString() {
+ return this.#pathElements.join(" ");
+ }
+}
diff --git a/frontend/src/components/monitoring/largeGraphs.css b/frontend/src/components/monitoring/largeGraphs.css
new file mode 100644
index 0000000000..83a4190314
--- /dev/null
+++ b/frontend/src/components/monitoring/largeGraphs.css
@@ -0,0 +1,66 @@
+.graph-values {
+ margin-left: 60px;
+ padding-top: 10px;
+ border-top: 3px solid #fff;
+ margin-top: -8.5px;
+ width: calc(100% - 60px);
+ display: flex;
+ justify-content: space-between;
+}
+
+.metric-digest-value {
+ font-weight: bold;
+ font-size: 22px;
+}
+
+.metric-digest-value div {
+ display: inline-block;
+}
+
+.metric-digest-value-suffix {
+ font-weight: normal;
+ font-size: 14px;
+ display: inline-block;
+ text-transform: uppercase;
+ text-wrap: nowrap;
+}
+
+.metric-digest {
+ padding: 1em;
+}
+
+.metric-digest-header {
+ text-transform: uppercase;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: bold;
+}
+
+.current,
+.average {
+ margin-top: 4px;
+ margin-bottom: 8px;
+ padding-left: 4px;
+ line-height: 20px;
+ height: 19px;
+}
+
+.current {
+ border-left: 2.5px solid;
+}
+
+.average {
+ border-left: 1px dashed;
+ padding-left: 6px;
+}
+
+.graph-area {
+ width: 33%;
+ box-sizing: border-box;
+}
+
+@media (max-width: 1300px) {
+ .graph-area {
+ width: 95%;
+ }
+}
diff --git a/frontend/src/components/monitoring/messageTypes.ts b/frontend/src/components/monitoring/messageTypes.ts
new file mode 100644
index 0000000000..7eaa8375de
--- /dev/null
+++ b/frontend/src/components/monitoring/messageTypes.ts
@@ -0,0 +1,58 @@
+import type { ExtendedMessageType, MessageType, MessageTypeDetails } from "@/resources/MonitoringEndpoint";
+
+function shortenTypeName(typeName: string): string {
+ return typeName.split(".").pop() ?? typeName;
+}
+
+function parseTheMessageTypeData(messageType: MessageType): ExtendedMessageType {
+ if (messageType.typeName.indexOf(";") > 0) {
+ const messageTypeHierarchy = messageType.typeName.split(";").map((item) => {
+ const segments = item.split(",");
+ const messageTypeDetails: MessageTypeDetails = {
+ typeName: segments[0],
+ assemblyName: segments[1],
+ assemblyVersion: segments[2].substring(segments[2].indexOf("=") + 1),
+ };
+
+ if (!segments[4]?.endsWith("=null")) {
+ //SC monitoring fills culture only if PublicKeyToken is filled
+ messageTypeDetails.culture = segments[3];
+ messageTypeDetails.publicKeyToken = segments[4];
+ }
+ return messageTypeDetails;
+ });
+ return {
+ ...messageType,
+ messageTypeHierarchy,
+ typeName: messageTypeHierarchy.map((item) => item.typeName).join(", "),
+ shortName: messageTypeHierarchy.map((item) => shortenTypeName(item.typeName)).join(", "),
+ containsTypeHierarchy: true,
+ tooltipText: messageTypeHierarchy.reduce(
+ (sum, item) => (sum ? `${sum}\n ` : "") + `${item.typeName} |${item.assemblyName}-${item.assemblyVersion}` + (item.culture ? ` |${item.culture}` : "") + (item.publicKeyToken ? ` |${item.publicKeyToken}` : ""),
+ ""
+ ),
+ };
+ }
+ const cultureSuffix = messageType.culture && messageType.culture !== "null" ? ` | Culture=${messageType.culture}` : "";
+ const publicKeyTokenSuffix = messageType.publicKeyToken && messageType.publicKeyToken !== "null" ? ` | PublicKeyToken=${messageType.publicKeyToken}` : "";
+
+ return {
+ ...messageType,
+ shortName: shortenTypeName(messageType.typeName),
+ tooltipText: `${messageType.typeName} | ${messageType.assemblyName}-${messageType.assemblyVersion}${cultureSuffix}${publicKeyTokenSuffix}`,
+ };
+}
+
+export default class MessageTypes {
+ totalItems: number;
+ data: ExtendedMessageType[];
+
+ constructor(rawMessageTypes: MessageType[]) {
+ this.totalItems = rawMessageTypes.length;
+ this.data = rawMessageTypes
+ // filter out system message types
+ .filter((mt) => mt.id && mt.typeName)
+ .map((mt) => parseTheMessageTypeData(mt))
+ .sort((a, b) => a.typeName.localeCompare(b.typeName));
+ }
+}
diff --git a/frontend/src/components/monitoring/monitoring.css b/frontend/src/components/monitoring/monitoring.css
new file mode 100644
index 0000000000..f9560daf2d
--- /dev/null
+++ b/frontend/src/components/monitoring/monitoring.css
@@ -0,0 +1,123 @@
+div.avg-tooltip {
+ position: absolute;
+ text-align: left;
+ padding: 0.3rem;
+ line-height: 1;
+ background: var(--avg-tooltip-background-color);
+ color: #ffffff;
+ border-radius: 8px 1px 1px 8px;
+ pointer-events: none;
+ font-size: 11px;
+ white-space: nowrap;
+}
+
+div.avg-tooltip.left {
+ border-radius: 1px 8px 8px 1px;
+}
+
+div.avg-tooltip:before {
+ content: "";
+ display: block;
+ z-index: -1;
+ right: 0;
+ position: absolute;
+ top: 50%;
+ background-color: var(--avg-tooltip-background-color);
+ width: 24px;
+ height: 24px;
+ margin-top: -12px;
+ margin-right: -12px;
+
+ transform: rotate(45deg);
+}
+
+div.avg-tooltip.left:before {
+ right: inherit;
+ margin-right: inherit;
+ margin-left: -12px;
+ left: 0;
+}
+
+div.avg-tooltip .value {
+ font-size: 14px;
+ font-weight: bold;
+}
+
+div.avg-tooltip .value span {
+ font-size: 11px;
+ font-weight: normal;
+}
+
+.queue-length {
+ color: var(--monitoring-queue-length);
+ stroke: var(--monitoring-queue-length);
+}
+
+.queue-length .graph-data-fill {
+ fill: var(--monitoring-queue-length-light);
+ stroke: none;
+}
+
+.queue-length.avg-tooltip {
+ --avg-tooltip-background-color: var(--monitoring-queue-length);
+}
+
+.throughput {
+ color: var(--monitoring-throughput);
+ stroke: var(--monitoring-throughput);
+}
+
+.throughput .graph-data-fill {
+ fill: var(--monitoring-throughput-light);
+ stroke: none;
+}
+
+.throughput.avg-tooltip {
+ --avg-tooltip-background-color: var(--monitoring-throughput);
+}
+
+.retries {
+ color: var(--monitoring-retries);
+ stroke: var(--monitoring-retries);
+}
+
+.retries .graph-data-fill {
+ fill: var(--monitoring-retries-light);
+ stroke: none;
+}
+
+.retries.avg-tooltip {
+ --avg-tooltip-background-color: var(--monitoring-retries);
+}
+
+.processing-time {
+ color: var(--monitoring-processing-time);
+ stroke: var(--monitoring-processing-time);
+}
+
+.processing-time .graph-data-fill {
+ fill: var(--monitoring-processing-time-light);
+ stroke: none;
+}
+
+.processing-time.avg-tooltip {
+ --avg-tooltip-background-color: var(--monitoring-processing-time);
+}
+
+.critical-time {
+ color: var(--monitoring-critical-time);
+ stroke: var(--monitoring-critical-time);
+}
+
+.critical-time .graph-data-fill {
+ fill: var(--monitoring-critical-time-light);
+ stroke: none;
+}
+
+.critical-time.avg-tooltip {
+ --avg-tooltip-background-color: var(--monitoring-critical-time);
+}
+
+.avg-tooltip {
+ color: white;
+}
diff --git a/frontend/src/components/notsupported.css b/frontend/src/components/notsupported.css
new file mode 100644
index 0000000000..43d50b65eb
--- /dev/null
+++ b/frontend/src/components/notsupported.css
@@ -0,0 +1,29 @@
+.not-supported {
+ font-size: 1rem;
+}
+
+.not-supported div:has(> .message) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.not-supported .message {
+ margin-top: 2em;
+ max-width: 30em;
+ line-height: 1.6em;
+}
+
+.not-supported .message h1 {
+ font-size: 1.9em;
+}
+
+.not-supported .message ul {
+ padding-left: 0;
+ text-align: left;
+ margin-bottom: 1.9rem;
+}
+
+.not-supported .message .btn {
+ font-size: 1rem;
+}
diff --git a/frontend/src/composables/LicenseStatus.ts b/frontend/src/composables/LicenseStatus.ts
new file mode 100644
index 0000000000..47c2e74113
--- /dev/null
+++ b/frontend/src/composables/LicenseStatus.ts
@@ -0,0 +1,5 @@
+export enum LicenseWarningLevel {
+ None = "none",
+ Warning = "warning",
+ Danger = "danger",
+}
diff --git a/frontend/src/composables/autoRefresh.ts b/frontend/src/composables/autoRefresh.ts
new file mode 100644
index 0000000000..eb01dc397d
--- /dev/null
+++ b/frontend/src/composables/autoRefresh.ts
@@ -0,0 +1,66 @@
+import { watch, ref, shallowReadonly, type WatchStopHandle } from "vue";
+import { useCounter, useDocumentVisibility, useTimeoutPoll } from "@vueuse/core";
+
+export default function useFetchWithAutoRefresh(name: string, fetch: () => Promise
+
+
+
+
+ AVG
+
+ {{ averageLabelValue }} {{ averageLabelSuffix }}
+
+
+
+
+
+ + The minimum version of ServiceControl required to enable this feature is + {{ minimumSCVersionForAllMessages }} . +
+ +
+
+
+
+
+
+ All Messages
+
+
+
+
+
diff --git a/frontend/src/views/CustomChecksView.vue b/frontend/src/views/CustomChecksView.vue
new file mode 100644
index 0000000000..17b7e6992e
--- /dev/null
+++ b/frontend/src/views/CustomChecksView.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+ Configuration
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
new file mode 100644
index 0000000000..935e89fbaf
--- /dev/null
+++ b/frontend/src/views/DashboardView.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+ Custom checks
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/views/EventsView.vue b/frontend/src/views/EventsView.vue
new file mode 100644
index 0000000000..4d50c64e89
--- /dev/null
+++ b/frontend/src/views/EventsView.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+ System status
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Events
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Failed Messages
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Failed Message Groups
+ (0)
+
+ !
+
+
+
+
+ All Failed Messages
+ {{ failedMessageCount }}
+
+
+
+
+ Deleted Message Groups
+ !
+
+
+
+
+ All Deleted Messages
+ {{ archivedMessageCount }}
+
+
+
+
+ Pending Retries
+ {{ pendingRetriesMessageCount }}
+
+
+
+
+
+
+
+ Endpoint Heartbeats
+
+
+ MassTransit endpoints are currently not supported by heartbeat functionality and will not show in this view.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Unhealthy Endpoints ({{ unhealthyEndpoints.length }})
+
+
+
+
+ Healthy Endpoints ({{ healthyEndpoints.length }})
+
+
+
+
+ Configuration
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/views/ThroughputReportView.spec.ts b/frontend/src/views/ThroughputReportView.spec.ts
new file mode 100644
index 0000000000..7dd92230b4
--- /dev/null
+++ b/frontend/src/views/ThroughputReportView.spec.ts
@@ -0,0 +1,130 @@
+import { describe, expect, test } from "vitest";
+import * as precondition from "../../test/preconditions";
+import { createTestingPinia } from "@pinia/testing";
+import { Transport } from "@/views/throughputreport/transport";
+import { makeDriverForTests, render, screen, userEvent } from "@component-test-utils";
+import { Driver } from "../../test/driver";
+import { disableMonitoring } from "../../test/drivers/vitest/setup";
+import makeRouter from "@/router";
+import { flushPromises, RouterLinkStub } from "@vue/test-utils";
+import ThroughputReportView from "@/views/ThroughputReportView.vue";
+import Toast from "vue-toastification";
+import { serviceControlWithThroughput } from "@/views/throughputreport/serviceControlWithThroughput";
+import { useServiceControlStore } from "@/stores/ServiceControlStore";
+import { setActivePinia } from "pinia";
+import { getDefaultConfig } from "@/defaultConfig";
+
+describe("EndpointsView tests", () => {
+ async function setup() {
+ const driver = makeDriverForTests();
+ setActivePinia(createTestingPinia({ stubActions: false }));
+
+ await driver.setUp(serviceControlWithThroughput);
+
+ return driver;
+ }
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ async function renderComponent(transport: Transport = Transport.MSMQ, preSetup: (driver: Driver) => Promise
+
+
+
+
+
+ Usage
+
+ {{ reportState?.reason }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/views/throughputreport/LegendGatewayOrBridgeEndpoint.vue b/frontend/src/views/throughputreport/LegendGatewayOrBridgeEndpoint.vue
new file mode 100644
index 0000000000..40cae6e925
--- /dev/null
+++ b/frontend/src/views/throughputreport/LegendGatewayOrBridgeEndpoint.vue
@@ -0,0 +1,6 @@
+
+
+ This is either part of the Gateway infrastructure or part of the
+ Messaging Bridge infrastructure.
+
+
diff --git a/frontend/src/views/throughputreport/LegendNServiceBusEndpoint.vue b/frontend/src/views/throughputreport/LegendNServiceBusEndpoint.vue
new file mode 100644
index 0000000000..97183ed50e
--- /dev/null
+++ b/frontend/src/views/throughputreport/LegendNServiceBusEndpoint.vue
@@ -0,0 +1,6 @@
+
+
+ Known NServiceBus
+ Endpoint
+
+
diff --git a/frontend/src/views/throughputreport/LegendNServiceBusEndpointNoLongerInUse.vue b/frontend/src/views/throughputreport/LegendNServiceBusEndpointNoLongerInUse.vue
new file mode 100644
index 0000000000..742f3211bd
--- /dev/null
+++ b/frontend/src/views/throughputreport/LegendNServiceBusEndpointNoLongerInUse.vue
@@ -0,0 +1,3 @@
+
+ NServiceBus Endpoint that is no longer in use, usually this would have zero throughput
+
diff --git a/frontend/src/views/throughputreport/LegendNotNServiceBusEndpoint.vue b/frontend/src/views/throughputreport/LegendNotNServiceBusEndpoint.vue
new file mode 100644
index 0000000000..4ec9043290
--- /dev/null
+++ b/frontend/src/views/throughputreport/LegendNotNServiceBusEndpoint.vue
@@ -0,0 +1,3 @@
+
+ Not an NServiceBus Endpoint
+
diff --git a/frontend/src/views/throughputreport/LegendParticularPlatformEndpoint.vue b/frontend/src/views/throughputreport/LegendParticularPlatformEndpoint.vue
new file mode 100644
index 0000000000..a14e5bb52a
--- /dev/null
+++ b/frontend/src/views/throughputreport/LegendParticularPlatformEndpoint.vue
@@ -0,0 +1,3 @@
+
+ This is an infrastructure endpoint used by the Particular Platform
+
diff --git a/frontend/src/views/throughputreport/LegendPlannedToDecommission.vue b/frontend/src/views/throughputreport/LegendPlannedToDecommission.vue
new file mode 100644
index 0000000000..02393eb69f
--- /dev/null
+++ b/frontend/src/views/throughputreport/LegendPlannedToDecommission.vue
@@ -0,0 +1,3 @@
+
+ If the endpoint is planned to no longer be used in the next 30 days
+
diff --git a/frontend/src/views/throughputreport/LegendSendOnlyEndpoint.vue b/frontend/src/views/throughputreport/LegendSendOnlyEndpoint.vue
new file mode 100644
index 0000000000..40d0ba236c
--- /dev/null
+++ b/frontend/src/views/throughputreport/LegendSendOnlyEndpoint.vue
@@ -0,0 +1,3 @@
+
+ An endpoint that only sends messages and does not process any messages
+
diff --git a/frontend/src/views/throughputreport/LegendTransactionalSessionProcessorEndpoint.vue b/frontend/src/views/throughputreport/LegendTransactionalSessionProcessorEndpoint.vue
new file mode 100644
index 0000000000..27effc1500
--- /dev/null
+++ b/frontend/src/views/throughputreport/LegendTransactionalSessionProcessorEndpoint.vue
@@ -0,0 +1,3 @@
+
+ An endpoint that is only processing transactional session control messages
+
diff --git a/frontend/src/views/throughputreport/SetupView.spec.ts b/frontend/src/views/throughputreport/SetupView.spec.ts
new file mode 100644
index 0000000000..bc332cced3
--- /dev/null
+++ b/frontend/src/views/throughputreport/SetupView.spec.ts
@@ -0,0 +1,168 @@
+import { describe, expect, test } from "vitest";
+import * as precondition from "../../../test/preconditions";
+import { minimumSCVersionForThroughput } from "@/views/throughputreport/isThroughputSupported";
+import { createTestingPinia } from "@pinia/testing";
+import { Transport } from "@/views/throughputreport/transport";
+import { makeDriverForTests, render, screen } from "@component-test-utils";
+import { Driver } from "../../../test/driver";
+import { disableMonitoring } from "../../../test/drivers/vitest/setup";
+import SetupView from "./SetupView.vue";
+import { ConnectionSettingsTestResult } from "@/resources/ConnectionTestResults";
+import makeRouter from "@/router";
+import { flushPromises, RouterLinkStub } from "@vue/test-utils";
+import { serviceControlWithThroughput } from "@/views/throughputreport/serviceControlWithThroughput";
+import { useServiceControlStore } from "@/stores/ServiceControlStore";
+import { setActivePinia } from "pinia";
+
+describe("SetupView tests", () => {
+ async function setup() {
+ const driver = makeDriverForTests();
+ setActivePinia(createTestingPinia({ stubActions: false }));
+
+ await driver.setUp(serviceControlWithThroughput);
+
+ return driver;
+ }
+
+ async function renderComponent(transport: Transport = Transport.MSMQ, preSetup: (driver: Driver) => Promise
+
+
+ Set an Endpoint Type for all detected endpoints and broker queues with the most appropriate option.
+ Use the filters to bulk set the Endpoint Types on similar named endpoints/queues.
+ If the names of the endpoints/queues contain confidential or proprietary information, make sure you set up
+ {{ showLegend ? "Hide" : "Show" }} Endpoint Types meaning.
+
+
+
+ {{ userIndicatorMapper.get(key) }} -
+ + See documentation for more details about endpoint type indicators. +
+
+
+
+
+
+
+
+