Skip to content

Introduced a monitoringClient and serviceControlClient #2725

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
PhilBastian merged 5 commits into from
Nov 28, 2025
Merged

Introduced a monitoringClient and serviceControlClient #2725

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
265b96f
Refactor monitoring store to only have state
johnsimons Nov 21, 2025
0efe289
Refactor serviceControlStore to be a rest client instead
johnsimons Nov 21, 2025
6717d70
Merge branch 'monitoring_store' into john/refactor_stores
PhilBastian Nov 28, 2025
c5fef3d
refactor to not use then()
PhilBastian Nov 28, 2025
84be3ce
move function to be consistent with monitoring
PhilBastian Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions src/Frontend/src/components/AutoRefreshDataView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { onMounted, onUnmounted, ref, watch } from "vue";
import ItemsPerPage from "@/components/ItemsPerPage.vue";
import PaginationStrip from "@/components/PaginationStrip.vue";
import type DataViewPageModel from "./DataViewPageModel";
import { useServiceControlStore } from "@/stores/ServiceControlStore";
import serviceControlClient from "@/components/serviceControlClient";

const props = withDefaults(
defineProps<{
Expand All @@ -20,8 +20,6 @@ const props = withDefaults(
let refreshTimer: number | undefined;
const viewModel = defineModel<DataViewPageModel<T>>({ required: true });

const store = useServiceControlStore();

const pageNumber = ref(1);
const itemsPerPage = ref(props.itemsPerPage);

Expand All @@ -37,7 +35,7 @@ watch(itemsPerPage, () => loadData());
watch(pageNumber, () => loadData());

async function loadData() {
const [response, data] = await store.fetchTypedFromServiceControl<T[]>(`${props.apiUrl}?page=${pageNumber.value}&per_page=${itemsPerPage.value}`);
const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<T[]>(`${props.apiUrl}?page=${pageNumber.value}&per_page=${itemsPerPage.value}`);
if (response.ok) {
viewModel.value.totalCount = parseInt(response.headers.get("Total-Count") ?? "0");
viewModel.value.data = data;
Expand Down
21 changes: 7 additions & 14 deletions src/Frontend/src/components/BackendChecksNotifications.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,15 @@ import { useShowToast } from "@/composables/toast";
import { TYPE } from "vue-toastification";
import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
import { useServiceControlStore } from "@/stores/ServiceControlStore";
import { storeToRefs } from "pinia";
import { useMonitoringStore } from "@/stores/MonitoringStore";
import serviceControlClient from "@/components/serviceControlClient";
import monitoringClient from "./monitoring/monitoringClient";

const router = useRouter();

const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
const connectionState = connectionStore.connectionState;
const monitoringConnectionState = connectionStore.monitoringConnectionState;
const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
const environment = environmentStore.environment;
const serviceControlStore = useServiceControlStore();
const monitoringStore = useMonitoringStore();
const { serviceControlUrl } = storeToRefs(serviceControlStore);
const { monitoringUrl, isMonitoringDisabled } = storeToRefs(monitoringStore);

const primaryConnectionFailure = computed(() => connectionState.unableToConnect);
const monitoringConnectionFailure = computed(() => monitoringConnectionState.unableToConnect);

Expand All @@ -31,26 +24,26 @@ watch(primaryConnectionFailure, (newValue, oldValue) => {
if (newValue !== oldValue && !(oldValue === null && newValue === false)) {
const connectionUrl = router.resolve(routeLinks.configuration.connections.link).href;
if (newValue) {
useShowToast(TYPE.ERROR, "Error", `Could not connect to ServiceControl at ${serviceControlUrl.value}. <a class="btn btn-default" href="${connectionUrl}">View connection settings</a>`);
useShowToast(TYPE.ERROR, "Error", `Could not connect to ServiceControl at ${serviceControlClient.url}. <a class="btn btn-default" href="${connectionUrl}">View connection settings</a>`);
} else {
useShowToast(TYPE.SUCCESS, "Success", `Connection to ServiceControl was successful at ${serviceControlUrl.value}.`);
useShowToast(TYPE.SUCCESS, "Success", `Connection to ServiceControl was successful at ${serviceControlClient.url}.`);
}
}
});

watch(monitoringConnectionFailure, (newValue, oldValue) => {
// Only watch the state change if monitoring is enabled
if (isMonitoringDisabled.value) {
if (monitoringClient.isMonitoringDisabled) {
return;
}

//NOTE to eliminate success msg showing everytime the screen is refreshed
if (newValue !== oldValue && !(oldValue === null && newValue === false)) {
const connectionUrl = router.resolve(routeLinks.configuration.connections.link).href;
if (newValue) {
useShowToast(TYPE.ERROR, "Error", `Could not connect to the ServiceControl Monitoring service at ${monitoringUrl.value}. <a class="btn btn-default" href="${connectionUrl}">View connection settings</a>`);
useShowToast(TYPE.ERROR, "Error", `Could not connect to the ServiceControl Monitoring service at ${monitoringClient.url}. <a class="btn btn-default" href="${connectionUrl}">View connection settings</a>`);
} else {
useShowToast(TYPE.SUCCESS, "Success", `Connection to ServiceControl Monitoring service was successful at ${monitoringUrl.value}.`);
useShowToast(TYPE.SUCCESS, "Success", `Connection to ServiceControl Monitoring service was successful at ${monitoringClient.url}.`);
}
}
});
Expand Down
17 changes: 5 additions & 12 deletions src/Frontend/src/components/PageFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,28 @@ import FAIcon from "@/components/FAIcon.vue";
import { faArrowTurnUp, faPlus } from "@fortawesome/free-solid-svg-icons";
import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
import { useServiceControlStore } from "@/stores/ServiceControlStore";
import serviceControlClient from "@/components/serviceControlClient";
import { storeToRefs } from "pinia";
import { useConfigurationStore } from "@/stores/ConfigurationStore";
import { useLicenseStore } from "@/stores/LicenseStore";
import { useMonitoringStore } from "@/stores/MonitoringStore";
import monitoringClient from "./monitoring/monitoringClient";

const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
const connectionState = connectionStore.connectionState;
const monitoringConnectionState = connectionStore.monitoringConnectionState;
const { store: environmentAndVersionsStore } = useEnvironmentAndVersionsAutoRefresh();
const newVersions = environmentAndVersionsStore.newVersions;
const environment = environmentAndVersionsStore.environment;
const serviceControlStore = useServiceControlStore();
const monitoringStore = useMonitoringStore();
const { serviceControlUrl } = storeToRefs(serviceControlStore);
const { monitoringUrl } = storeToRefs(monitoringStore);
const licenseStore = useLicenseStore();
const { licenseStatus, license } = licenseStore;

const isMonitoringEnabled = computed(() => {
return monitoringUrl.value !== "!" && monitoringUrl.value !== "" && monitoringUrl.value !== null && monitoringUrl.value !== undefined;
});
const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;

const scAddressTooltip = computed(() => {
return `ServiceControl URL ${serviceControlUrl.value}`;
return `ServiceControl URL ${serviceControlClient.url}`;
});

const scMonitoringAddressTooltip = computed(() => {
return `Monitoring URL ${monitoringUrl.value}`;
return `Monitoring URL ${monitoringClient.url}`;
});

const configurationStore = useConfigurationStore();
Expand Down
8 changes: 3 additions & 5 deletions src/Frontend/src/components/PageHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,15 @@ import DashboardMenuItem from "@/components/dashboard/DashboardMenuItem.vue";
import FeedbackButton from "@/components/FeedbackButton.vue";
import ThroughputMenuItem from "@/views/throughputreport/ThroughputMenuItem.vue";
import AuditMenuItem from "./audit/AuditMenuItem.vue";
import { useMonitoringStore } from "@/stores/MonitoringStore";
import { storeToRefs } from "pinia";
import monitoringClient from "@/components/monitoring/monitoringClient";

const monitoringStore = useMonitoringStore();
const { isMonitoringEnabled } = storeToRefs(monitoringStore);
const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
// prettier-ignore
const menuItems = computed(
() => [
DashboardMenuItem,
HeartbeatsMenuItem,
...(isMonitoringEnabled.value ? [MonitoringMenuItem] : []),
...(isMonitoringEnabled ? [MonitoringMenuItem] : []),
AuditMenuItem,
FailedMessagesMenuItem,
CustomChecksMenuItem,
Expand Down
7 changes: 2 additions & 5 deletions src/Frontend/src/components/ServiceControlAvailable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,10 @@
import ConditionalRender from "@/components/ConditionalRender.vue";
import routeLinks from "@/router/routeLinks";
import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
import { useServiceControlStore } from "@/stores/ServiceControlStore";
import { storeToRefs } from "pinia";
import serviceControlClient from "@/components/serviceControlClient";

const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
const connectionState = connectionStore.connectionState;
const serviceControlStore = useServiceControlStore();
const { serviceControlUrl } = storeToRefs(serviceControlStore);
</script>

<template>
Expand All @@ -19,7 +16,7 @@ const { serviceControlUrl } = storeToRefs(serviceControlStore);
<h1>Cannot connect to ServiceControl</h1>
<p>
ServicePulse is unable to connect to the ServiceControl instance at
<span id="serviceControlUrl">{{ serviceControlUrl }}</span
<span id="serviceControlUrl">{{ serviceControlClient.url }}</span
>. Please ensure that ServiceControl is running and accessible from your machine.
</p>
<div class="action-toolbar">
Expand Down
31 changes: 5 additions & 26 deletions src/Frontend/src/components/configuration/EndpointConnection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,15 @@ import { onMounted, ref } from "vue";
import LicenseNotExpired from "../LicenseNotExpired.vue";
import ServiceControlAvailable from "../ServiceControlAvailable.vue";
import CodeEditor from "@/components/CodeEditor.vue";
import { useServiceControlStore } from "@/stores/ServiceControlStore";
import { storeToRefs } from "pinia";
import serviceControlClient from "@/components/serviceControlClient";
import LoadingSpinner from "../LoadingSpinner.vue";
import { useMonitoringStore } from "@/stores/MonitoringStore";
import monitoringClient, { MetricsConnectionDetails } from "../monitoring/monitoringClient";

interface ServiceControlInstanceConnection {
settings: { [key: string]: object };
errors: string[];
}

interface MetricsConnectionDetails {
Enabled: boolean;
MetricsQueue?: string;
Interval?: string;
}

const serviceControlStore = useServiceControlStore();
const monitoringStore = useMonitoringStore();
const { serviceControlUrl } = storeToRefs(serviceControlStore);
const { monitoringUrl } = storeToRefs(monitoringStore);

const loading = ref(true);
const showCodeOnlyTab = ref(true);
const jsonSnippet = ref("");
Expand Down Expand Up @@ -79,7 +67,7 @@ function switchJsonTab() {

async function serviceControlConnections() {
const scConnectionResult = getServiceControlConnection();
const monitoringConnectionResult = getMonitoringConnection();
const monitoringConnectionResult = monitoringClient.getMonitoringConnection();

const [scConnection, mConnection] = await Promise.all([scConnectionResult, monitoringConnectionResult]);
return {
Expand All @@ -96,19 +84,10 @@ async function serviceControlConnections() {

async function getServiceControlConnection() {
try {
const [, data] = await serviceControlStore.fetchTypedFromServiceControl<ServiceControlInstanceConnection>("connection");
const [, data] = await serviceControlClient.fetchTypedFromServiceControl<ServiceControlInstanceConnection>("connection");
return data;
} catch {
return { errors: [`Error reaching ServiceControl at ${serviceControlUrl.value} connection`] } as ServiceControlInstanceConnection;
}
}

async function getMonitoringConnection() {
try {
const [, data] = await monitoringStore.fetchTypedFromMonitoring<{ Metrics: MetricsConnectionDetails }>("connection");
return { ...data, errors: [] };
} catch {
return { Metrics: null, errors: [`Error SC Monitoring instance at ${monitoringUrl.value}connection`] };
return { errors: [`Error reaching ServiceControl at ${serviceControlClient.url} connection`] } as ServiceControlInstanceConnection;
}
}
</script>
Expand Down
28 changes: 9 additions & 19 deletions src/Frontend/src/components/configuration/PlatformConnections.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,21 @@ import { ref } from "vue";
import { faCheck, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
import FAIcon from "@/components/FAIcon.vue";
import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
import { useServiceControlStore } from "@/stores/ServiceControlStore";
import { storeToRefs } from "pinia";
import { useMonitoringStore } from "@/stores/MonitoringStore";
import serviceControlClient from "@/components/serviceControlClient";
import monitoringClient from "../monitoring/monitoringClient";

const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
const connectionState = connectionStore.connectionState;
const monitoringConnectionState = connectionStore.monitoringConnectionState;

const serviceControlStore = useServiceControlStore();
const monitoringStore = useMonitoringStore();
serviceControlStore.refresh();
monitoringStore.refresh();
const localServiceControlUrl = ref(serviceControlStore.serviceControlUrl);
const localMonitoringUrl = ref(monitoringStore.monitoringUrl);
const { isMonitoringDisabled } = storeToRefs(monitoringStore);

const localServiceControlUrl = ref(serviceControlClient.url);
const localMonitoringUrl = ref(monitoringClient.url);
const isMonitoringDisabled = monitoringClient.isMonitoringDisabled;
const testingServiceControl = ref(false);
const serviceControlValid = ref<boolean | null>(null);

const testingMonitoring = ref(false);
const monitoringValid = ref<boolean | null>(null);

const connectionSaved = ref<boolean | null>(null);

async function testServiceControlUrl() {
Expand Down Expand Up @@ -82,13 +75,10 @@ function updateServiceControlUrls() {
localMonitoringUrl.value += "/";
}

//values have changed. They'll be reset after page reloads
Copy link
Contributor

@PhilBastian PhilBastian Nov 28, 2025

Choose a reason for hiding this comment

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

my understanding is that these values are used in determining the url that's actually used in the SC and monitoring clients, so wouldn't this logic still be necessary?

Copy link
Contributor

@PhilBastian PhilBastian Nov 28, 2025

Choose a reason for hiding this comment

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

I think this is now handled in the client getUrl?

const existingScu = window.localStorage.getItem("scu");

    if (scu) {
      if (scu !== existingScu) {
        window.localStorage.setItem("scu", scu);
      }
      return scu;
    }

window.localStorage.removeItem("scu");
window.localStorage.removeItem("mu");

const newSearch = `?scu=${localServiceControlUrl.value}&mu=${localMonitoringUrl.value}`;
console.debug("updateConnections - new query string: ", newSearch);
window.location.search = newSearch;
const params = new URLSearchParams();
params.set("scu", localServiceControlUrl.value);
params.set("mu", localMonitoringUrl.value);
window.location.search = `?${params.toString()}`;
}
</script>

Expand Down
9 changes: 4 additions & 5 deletions src/Frontend/src/components/failedmessages/DeletedMessages.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { TYPE } from "vue-toastification";
import FailureGroup from "@/resources/FailureGroup";
import FAIcon from "@/components/FAIcon.vue";
import { faArrowRotateRight } from "@fortawesome/free-solid-svg-icons";
import { useServiceControlStore } from "@/stores/ServiceControlStore";
import serviceControlClient from "@/components/serviceControlClient";
import { useConfigurationStore } from "@/stores/ConfigurationStore";
import { storeToRefs } from "pinia";

Expand All @@ -39,7 +39,6 @@ watch(pageNumber, () => loadMessages());

const configurationStore = useConfigurationStore();
const { configuration } = storeToRefs(configurationStore);
const serviceControlStore = useServiceControlStore();

function loadMessages() {
let startDate = new Date(0);
Expand Down Expand Up @@ -67,7 +66,7 @@ function loadMessages() {
}

async function loadGroupDetails(groupId: string) {
const [, data] = await serviceControlStore.fetchTypedFromServiceControl<FailureGroup>(`archive/groups/id/${groupId}`);
const [, data] = await serviceControlClient.fetchTypedFromServiceControl<FailureGroup>(`archive/groups/id/${groupId}`);
groupName.value = data.title;
}

Expand All @@ -80,7 +79,7 @@ function loadPagedMessages(groupId?: string, page: number = 1, sortBy: string =

async function loadDelMessages() {
try {
const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
`${groupId ? `recoverability/groups/${groupId}/` : ""}errors?status=archived&page=${page}&per_page=${perPage}&sort=${sortBy}&direction=${direction}&modified=${dateRange}`
);

Expand Down Expand Up @@ -152,7 +151,7 @@ async function restoreSelectedMessages() {
selectedMessages.forEach((m) => (m.restoreInProgress = true));
useShowToast(TYPE.INFO, "Info", `restoring ${selectedMessages.length} messages...`);

await serviceControlStore.patchToServiceControl(
await serviceControlClient.patchToServiceControl(
"errors/unarchive",
selectedMessages.map((m) => m.id)
);
Expand Down
6 changes: 2 additions & 4 deletions src/Frontend/src/components/failedmessages/FailedMessageGroups.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ import SortOptions, { SortDirection } from "@/resources/SortOptions";
import GroupOperation from "@/resources/GroupOperation";
import getSortFunction from "@/components/getSortFunction";
import { faArrowDownAZ, faArrowDownZA, faArrowDownShortWide, faArrowDownWideShort, faArrowDown19, faArrowDown91 } from "@fortawesome/free-solid-svg-icons";
import { useServiceControlStore } from "@/stores/ServiceControlStore";

const serviceControlStore = useServiceControlStore();
import serviceControlClient from "@/components/serviceControlClient";

const selectedClassifier = ref<string>("");
const classifiers = ref<string[]>([]);
Expand Down Expand Up @@ -60,7 +58,7 @@ const sortOptions: SortOptions<GroupOperation>[] = [
];

async function getGroupingClassifiers() {
const [, data] = await serviceControlStore.fetchTypedFromServiceControl<string[]>("recoverability/classifiers");
const [, data] = await serviceControlClient.fetchTypedFromServiceControl<string[]>("recoverability/classifiers");
classifiers.value = data;
}

Expand Down
9 changes: 4 additions & 5 deletions src/Frontend/src/components/failedmessages/FailedMessages.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@ import { TYPE } from "vue-toastification";
import GroupOperation from "@/resources/GroupOperation";
import { faArrowDownAZ, faArrowDownZA, faArrowDownShortWide, faArrowDownWideShort, faArrowRotateRight, faTrash, faDownload } from "@fortawesome/free-solid-svg-icons";
import ActionButton from "@/components/ActionButton.vue";
import { useServiceControlStore } from "@/stores/ServiceControlStore";
import serviceControlClient from "@/components/serviceControlClient";
import { useMessageStore } from "@/stores/MessageStore";

const serviceControlStore = useServiceControlStore();
const messageStore = useMessageStore();
const messageGroupClient = createMessageGroupClient();

Expand Down Expand Up @@ -62,7 +61,7 @@ function loadMessages() {
}

async function loadGroupDetails(groupId: string) {
const response = await serviceControlStore.fetchFromServiceControl(`recoverability/groups/id/${groupId}`);
const response = await serviceControlClient.fetchFromServiceControl(`recoverability/groups/id/${groupId}`);
const data = await response.json();
groupName.value = data.title;
}
Expand All @@ -78,7 +77,7 @@ function loadPagedMessages(groupId: string, page: number, sortBy?: string, direc

async function loadMessages() {
try {
const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
`${groupId ? `recoverability/groups/${groupId}/` : ""}errors?status=${FailedMessageStatus.Unresolved}&page=${page}&per_page=${perPage}&sort=${sortBy}&direction=${direction}`
);
totalCount.value = parseInt(response.headers.get("Total-Count") ?? "");
Expand Down Expand Up @@ -214,7 +213,7 @@ async function deleteSelectedMessages() {
const selectedMessages = messageList.value?.getSelectedMessages() ?? [];

useShowToast(TYPE.INFO, "Info", "Deleting " + selectedMessages.length + " messages...");
await serviceControlStore.patchToServiceControl(
await serviceControlClient.patchToServiceControl(
"errors/archive",
selectedMessages.map((m) => m.id)
);
Expand Down
Loading