From 265b96f26b032de5c3224285be987eb2354a7013 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 21 Nov 2025 16:40:18 +1000
Subject: [PATCH 1/4] Refactor monitoring store to only have state

Introduced a monitoringClient
---
 .../components/BackendChecksNotifications.vue |  12 +-
 src/Frontend/src/components/PageFooter.vue    |  11 +-
 src/Frontend/src/components/PageHeader.vue    |   8 +-
 .../configuration/EndpointConnection.vue      |  21 +--
 .../configuration/PlatformConnections.vue     |  22 +---
 .../components/monitoring/EndpointDetails.vue |   5 +-
 .../monitoring/EndpointInstances.vue          |  26 +---
 .../monitoring/MonitoringNotAvailable.vue     |   6 +-
 .../components/monitoring/monitoringClient.ts | 123 ++++++++++++++++++
 .../src/stores/ConnectionsAndStatsStore.ts    |  56 +++-----
 .../src/stores/EnvironmentAndVersionsStore.ts |  12 +-
 .../stores/MonitoringEndpointDetailsStore.ts  |  10 +-
 src/Frontend/src/stores/MonitoringStore.ts    |  77 +----------
 .../src/stores/ServiceControlStore.ts         |   9 ++
 src/Frontend/src/stores/ThroughputStore.ts    |  10 +-
 .../src/views/throughputreport/SetupView.vue  |   5 +-
 .../setup/ConnectionSetupView.vue             |   9 +-
 .../setup/DiagnosticsView.vue                 |   5 +-
 src/Frontend/test/drivers/vitest/setup.ts     |   3 +
 .../hasServiceControlMonitoringInstance.ts    |   6 +-
 20 files changed, 199 insertions(+), 237 deletions(-)
 create mode 100644 src/Frontend/src/components/monitoring/monitoringClient.ts

diff --git a/src/Frontend/src/components/BackendChecksNotifications.vue b/src/Frontend/src/components/BackendChecksNotifications.vue
index d04a147fd9..4f5b82c971 100644
--- a/src/Frontend/src/components/BackendChecksNotifications.vue
+++ b/src/Frontend/src/components/BackendChecksNotifications.vue
@@ -9,20 +9,16 @@ import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndSt
 import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
 import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { storeToRefs } from "pinia";
-import { useMonitoringStore } from "@/stores/MonitoringStore";
+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);
 
@@ -40,7 +36,7 @@ watch(primaryConnectionFailure, (newValue, oldValue) => {
 
 watch(monitoringConnectionFailure, (newValue, oldValue) => {
   // Only watch the state change if monitoring is enabled
-  if (isMonitoringDisabled.value) {
+  if (monitoringClient.isMonitoringDisabled) {
     return;
   }
 
@@ -48,9 +44,9 @@ watch(monitoringConnectionFailure, (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 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}.`);
     }
   }
 });
diff --git a/src/Frontend/src/components/PageFooter.vue b/src/Frontend/src/components/PageFooter.vue
index b6f5a40d6e..bde947cbb6 100644
--- a/src/Frontend/src/components/PageFooter.vue
+++ b/src/Frontend/src/components/PageFooter.vue
@@ -10,7 +10,7 @@ import { useServiceControlStore } from "@/stores/ServiceControlStore";
 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;
@@ -19,22 +19,17 @@ const { store: environmentAndVersionsStore } = useEnvironmentAndVersionsAutoRefr
 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}`;
 });
 
 const scMonitoringAddressTooltip = computed(() => {
-  return `Monitoring URL ${monitoringUrl.value}`;
+  return `Monitoring URL ${monitoringClient.url}`;
 });
 
 const configurationStore = useConfigurationStore();
diff --git a/src/Frontend/src/components/PageHeader.vue b/src/Frontend/src/components/PageHeader.vue
index 0e46ff00a7..e059894b22 100644
--- a/src/Frontend/src/components/PageHeader.vue
+++ b/src/Frontend/src/components/PageHeader.vue
@@ -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,
diff --git a/src/Frontend/src/components/configuration/EndpointConnection.vue b/src/Frontend/src/components/configuration/EndpointConnection.vue
index dbbb4c9c8b..98599bf0c1 100644
--- a/src/Frontend/src/components/configuration/EndpointConnection.vue
+++ b/src/Frontend/src/components/configuration/EndpointConnection.vue
@@ -6,23 +6,15 @@ import CodeEditor from "@/components/CodeEditor.vue";
 import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { storeToRefs } from "pinia";
 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);
@@ -79,7 +71,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 {
@@ -102,15 +94,6 @@ async function getServiceControlConnection() {
     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`] };
-  }
-}
 </script>
 
 <template>
diff --git a/src/Frontend/src/components/configuration/PlatformConnections.vue b/src/Frontend/src/components/configuration/PlatformConnections.vue
index 2a1bc31ccd..85be08fe2f 100644
--- a/src/Frontend/src/components/configuration/PlatformConnections.vue
+++ b/src/Frontend/src/components/configuration/PlatformConnections.vue
@@ -4,27 +4,22 @@ import { faCheck, faExclamationTriangle } from "@fortawesome/free-solid-svg-icon
 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 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 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() {
@@ -82,13 +77,10 @@ function updateServiceControlUrls() {
     localMonitoringUrl.value += "/";
   }
 
-  //values have changed. They'll be reset after page reloads
-  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>
 
diff --git a/src/Frontend/src/components/monitoring/EndpointDetails.vue b/src/Frontend/src/components/monitoring/EndpointDetails.vue
index 055a1cc06c..22fdaad2a6 100644
--- a/src/Frontend/src/components/monitoring/EndpointDetails.vue
+++ b/src/Frontend/src/components/monitoring/EndpointDetails.vue
@@ -20,7 +20,7 @@ import { useMonitoringHistoryPeriodStore } from "@/stores/MonitoringHistoryPerio
 import routeLinks from "@/router/routeLinks";
 import FAIcon from "@/components/FAIcon.vue";
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
-import { useMonitoringStore } from "@/stores/MonitoringStore";
+import monitoringClient from "./monitoringClient";
 
 const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
 const monitoringConnectionState = connectionStore.monitoringConnectionState;
@@ -32,8 +32,7 @@ let refreshInterval: number;
 
 const monitoringEndpointDetailsStore = useMonitoringEndpointDetailsStore();
 const monitoringHistoryPeriodStore = useMonitoringHistoryPeriodStore();
-const monitoringStore = useMonitoringStore();
-const { isMonitoringDisabled } = storeToRefs(monitoringStore);
+const isMonitoringDisabled = monitoringClient.isMonitoringDisabled;
 
 const { historyPeriod } = storeToRefs(monitoringHistoryPeriodStore);
 const { negativeCriticalTimeIsPresent, endpointDetails: endpoint } = storeToRefs(monitoringEndpointDetailsStore);
diff --git a/src/Frontend/src/components/monitoring/EndpointInstances.vue b/src/Frontend/src/components/monitoring/EndpointInstances.vue
index c29a3a4dcc..8dc74d8be0 100644
--- a/src/Frontend/src/components/monitoring/EndpointInstances.vue
+++ b/src/Frontend/src/components/monitoring/EndpointInstances.vue
@@ -12,19 +12,16 @@ import ColumnHeader from "@/components/ColumnHeader.vue";
 import { CriticalTime, InstanceName, ProcessingTime, ScheduledRetries, Throughput } from "@/resources/MonitoringResources";
 import FAIcon from "@/components/FAIcon.vue";
 import { faEnvelope, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { useMonitoringStore } from "@/stores/MonitoringStore";
+import monitoringClient from "./monitoringClient";
 
 const isRemovingEndpointEnabled = ref<boolean>(false);
 const router = useRouter();
-
 const monitoringEndpointDetailsStore = useMonitoringEndpointDetailsStore();
 const { endpointDetails: endpoint, endpointName } = storeToRefs(monitoringEndpointDetailsStore);
 
-const monitoringStore = useMonitoringStore();
-
 async function removeEndpoint(endpointName: string, instance: ExtendedEndpointInstance) {
   try {
-    await monitoringStore.deleteFromMonitoring("monitored-instance/" + endpointName + "/" + instance.id);
+    await monitoringClient.deletedMonitoredEndpoint(endpointName, instance.id);
     endpoint.value.instances.splice(endpoint.value.instances.indexOf(instance), 1);
     if (endpoint.value.instances.length === 0) {
       router.push(routeLinks.monitoring.root);
@@ -35,25 +32,8 @@ async function removeEndpoint(endpointName: string, instance: ExtendedEndpointIn
   }
 }
 
-async function getIsRemovingEndpointEnabled() {
-  try {
-    const response = await monitoringStore.optionsFromMonitoring();
-    if (response) {
-      const headers = response.headers;
-      const allow = headers.get("Allow");
-      if (allow) {
-        const deleteAllowed = allow.indexOf("DELETE") >= 0;
-        return deleteAllowed;
-      }
-    }
-  } catch (err) {
-    console.log(err);
-  }
-  return false;
-}
-
 onMounted(async () => {
-  isRemovingEndpointEnabled.value = await getIsRemovingEndpointEnabled();
+  isRemovingEndpointEnabled.value = await monitoringClient.isRemovingEndpointEnabled();
 });
 </script>
 
diff --git a/src/Frontend/src/components/monitoring/MonitoringNotAvailable.vue b/src/Frontend/src/components/monitoring/MonitoringNotAvailable.vue
index ecdd51d55a..b49287a133 100644
--- a/src/Frontend/src/components/monitoring/MonitoringNotAvailable.vue
+++ b/src/Frontend/src/components/monitoring/MonitoringNotAvailable.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import routeLinks from "@/router/routeLinks";
-import { useMonitoringStore } from "@/stores/MonitoringStore";
-import { storeToRefs } from "pinia";
+import monitoringClient from "./monitoringClient";
 
-const store = useMonitoringStore();
-const { monitoringUrl } = storeToRefs(store);
+const monitoringUrl = monitoringClient.url;
 </script>
 
 <template>
diff --git a/src/Frontend/src/components/monitoring/monitoringClient.ts b/src/Frontend/src/components/monitoring/monitoringClient.ts
new file mode 100644
index 0000000000..7b94d105d1
--- /dev/null
+++ b/src/Frontend/src/components/monitoring/monitoringClient.ts
@@ -0,0 +1,123 @@
+import { Endpoint, EndpointDetails } from "@/resources/MonitoringEndpoint";
+
+export interface MetricsConnectionDetails {
+  Enabled: boolean;
+  MetricsQueue?: string;
+  Interval?: string;
+}
+
+class MonitoringClient {
+  private _url: string | undefined | null = null;
+
+  get url(): string | undefined {
+    if (this._url === null) {
+      this._url = this.getUrl();
+    }
+    return this._url;
+  }
+
+  public resetUrl() {
+    this._url = null;
+  }
+
+  public async getEndpointDetails(endpointName: string, historyPeriod = 1) {
+    const [, details] = await this.fetchTypedFromMonitoring<EndpointDetails>(`monitored-endpoints/${endpointName}?history=${historyPeriod}`);
+    return details;
+  }
+
+  public async getMonitoringConnection() {
+    try {
+      const [, data] = await this.fetchTypedFromMonitoring<{ Metrics: MetricsConnectionDetails }>("connection");
+      return { ...data, errors: [] };
+    } catch {
+      return { Metrics: null, errors: ["Could not retrieve the monitoring connection"] };
+    }
+  }
+
+  public async getMonitoringVersion() {
+    const [response] = await this.fetchTypedFromMonitoring("");
+    if (response?.ok) {
+      return response.headers.get("X-Particular-Version") ?? "";
+    }
+    return "";
+  }
+
+  public async getDisconnectedEndpointsCount() {
+    const [, data] = await this.fetchTypedFromMonitoring<number>("monitored-endpoints/disconnected");
+    return data;
+  }
+
+  public async getMonitoredEndpoints(historyPeriod: number) {
+    const [, data] = await this.fetchTypedFromMonitoring<Endpoint[]>(`monitored-endpoints?history=${historyPeriod}`);
+    return data ?? [];
+  }
+
+  public async deletedMonitoredEndpoint(endpointName: string, instanceId: string) {
+    if (this.isMonitoringDisabled) {
+      return;
+    }
+    await fetch(`${this.url}monitored-instance/${endpointName}/${instanceId}`, {
+      method: "DELETE",
+    });
+  }
+
+  public async isRemovingEndpointEnabled() {
+    if (this.isMonitoringDisabled) {
+      return false;
+    }
+
+    const response = await fetch(`${this.url}`, {
+      method: "OPTIONS",
+    });
+
+    if (response.ok) {
+      const headers = response.headers;
+      const allow = headers.get("Allow");
+      if (allow) {
+        const deleteAllowed = allow.indexOf("DELETE") >= 0;
+        return deleteAllowed;
+      }
+    }
+    return false;
+  }
+
+  public get isMonitoringEnabled() {
+    return this.url && this.url !== "!" ? true : false;
+  }
+
+  public get isMonitoringDisabled() {
+    return !this.isMonitoringEnabled;
+  }
+
+  private async fetchTypedFromMonitoring<T>(suffix: string): Promise<[Response?, T?]> {
+    if (this.isMonitoringDisabled) {
+      return [];
+    }
+
+    const response = await fetch(`${this.url}${suffix}`);
+    const data = await response.json();
+
+    return [response, data];
+  }
+
+  private getUrl() {
+    const searchParams = new URLSearchParams(window.location.search);
+    const mu = searchParams.get("mu");
+    const existingMu = window.localStorage.getItem("mu");
+
+    if (mu) {
+      if (mu !== existingMu) {
+        window.localStorage.setItem("mu", mu);
+      }
+      return mu;
+    } else if (existingMu) {
+      return existingMu;
+    } else if (window.defaultConfig && window.defaultConfig.monitoring_urls && window.defaultConfig.monitoring_urls.length) {
+      return window.defaultConfig.monitoring_urls[0];
+    }
+
+    return undefined;
+  }
+}
+
+export default new MonitoringClient();
diff --git a/src/Frontend/src/stores/ConnectionsAndStatsStore.ts b/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
index 48086baf8a..6c1a610f4d 100644
--- a/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
+++ b/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
@@ -1,16 +1,13 @@
-import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
+import { acceptHMRUpdate, defineStore } from "pinia";
 import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
-import { FailedMessage, FailedMessageStatus } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { ConnectionState } from "@/resources/ConnectionState";
 import { useCounter } from "@vueuse/core";
+import monitoringClient from "@/components/monitoring/monitoringClient";
 import { useServiceControlStore } from "./ServiceControlStore";
-import { useMonitoringStore } from "./MonitoringStore";
 
 export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore", () => {
-  const serviceControlStore = useServiceControlStore();
-  const monitoringStore = useMonitoringStore();
-  const { isMonitoringEnabled } = storeToRefs(monitoringStore);
-
+  const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
   const failedMessageCount = ref(0);
   const archivedMessageCount = ref(0);
   const pendingRetriesMessageCount = ref(0);
@@ -36,7 +33,8 @@ export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore
     unableToConnect: null,
   });
 
-  const displayConnectionsWarning = computed(() => (connectionState.unableToConnect || (monitoringConnectionState.unableToConnect && isMonitoringEnabled.value)) ?? false);
+  const displayConnectionsWarning = computed(() => (connectionState.unableToConnect || (monitoringConnectionState.unableToConnect && isMonitoringEnabled)) ?? false);
+  const serviceControlStore = useServiceControlStore();
 
   async function refresh() {
     const failedMessagesResult = getErrorMessagesCount(FailedMessageStatus.Unresolved);
@@ -53,23 +51,11 @@ export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore
   }
 
   function getErrorMessagesCount(status: FailedMessageStatus) {
-    return fetchAndSetConnectionState(
-      () => serviceControlStore.fetchTypedFromServiceControl<FailedMessage>(`errors?status=${status}`),
-      connectionState,
-      (response) => parseInt(response.headers.get("Total-Count") ?? "0"),
-      0
-    );
+    return fetchAndSetConnectionState(() => serviceControlStore.getErrorMessagesCount(status), connectionState);
   }
 
   function getDisconnectedEndpointsCount() {
-    return fetchAndSetConnectionState(
-      () => monitoringStore.fetchTypedFromMonitoring<number>("monitored-endpoints/disconnected"),
-      monitoringConnectionState,
-      (_, data) => {
-        return data;
-      },
-      0
-    );
+    return fetchAndSetConnectionState(() => monitoringClient.getDisconnectedEndpointsCount(), monitoringConnectionState);
   }
 
   return {
@@ -85,19 +71,13 @@ export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore
   };
 });
 
-async function fetchAndSetConnectionState<T, TResult>(fetchFunction: () => Promise<[Response?, T?]>, connectionState: ConnectionState, action: (response: Response, data: T) => TResult, defaultResult: TResult) {
+async function fetchAndSetConnectionState(fetchFunction: () => Promise<number | undefined>, connectionState: ConnectionState) {
   if (connectionState.connecting) {
     //Skip the connection state checking
-    try {
-      const [response, data] = await fetchFunction();
-      if (response != null && data != null) {
-        return await action(response, data);
-      }
-    } catch (err) {
-      console.log(err);
-      return defaultResult;
-    }
+    const data = await fetchFunction();
+    return data ?? 0;
   }
+
   try {
     if (!connectionState.connected) {
       connectionState.connecting = true;
@@ -105,19 +85,13 @@ async function fetchAndSetConnectionState<T, TResult>(fetchFunction: () => Promi
     }
 
     try {
-      const [response, data] = await fetchFunction();
-      let result: TResult | null = null;
-      if (response != null && data != null) {
-        result = await action(response, data);
-      }
+      const data = await fetchFunction();
       connectionState.unableToConnect = false;
       connectionState.connectedRecently = true;
       connectionState.connected = true;
       connectionState.connecting = false;
 
-      if (result) {
-        return result;
-      }
+      return data ?? 0;
     } catch (err) {
       connectionState.connected = false;
       connectionState.unableToConnect = true;
@@ -130,7 +104,7 @@ async function fetchAndSetConnectionState<T, TResult>(fetchFunction: () => Promi
     connectionState.connected = false;
   }
 
-  return defaultResult;
+  return 0;
 }
 
 if (import.meta.hot) {
diff --git a/src/Frontend/src/stores/EnvironmentAndVersionsStore.ts b/src/Frontend/src/stores/EnvironmentAndVersionsStore.ts
index 4849178064..89ab21a0bc 100644
--- a/src/Frontend/src/stores/EnvironmentAndVersionsStore.ts
+++ b/src/Frontend/src/stores/EnvironmentAndVersionsStore.ts
@@ -5,11 +5,10 @@ import { useMemoize } from "@vueuse/core";
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { computed, reactive } from "vue";
 import { useServiceControlStore } from "./ServiceControlStore";
-import { useMonitoringStore } from "./MonitoringStore";
+import monitoringClient from "@/components/monitoring/monitoringClient";
 
 export const useEnvironmentAndVersionsStore = defineStore("EnvironmentAndVersionsStore", () => {
   const serviceControlStore = useServiceControlStore();
-  const monitoringStore = useMonitoringStore();
 
   const environment = reactive({
     monitoring_version: "",
@@ -96,14 +95,7 @@ export const useEnvironmentAndVersionsStore = defineStore("EnvironmentAndVersion
   }
 
   async function setMonitoringVersion() {
-    try {
-      const [response] = await monitoringStore.fetchTypedFromMonitoring("");
-      if (response) {
-        environment.monitoring_version = response.headers.get("X-Particular-Version") ?? "";
-      }
-    } catch {
-      environment.monitoring_version = "";
-    }
+    environment.monitoring_version = await monitoringClient.getMonitoringVersion();
   }
 
   return {
diff --git a/src/Frontend/src/stores/MonitoringEndpointDetailsStore.ts b/src/Frontend/src/stores/MonitoringEndpointDetailsStore.ts
index 98816b509a..cb7fb3457d 100644
--- a/src/Frontend/src/stores/MonitoringEndpointDetailsStore.ts
+++ b/src/Frontend/src/stores/MonitoringEndpointDetailsStore.ts
@@ -9,25 +9,23 @@ import type GroupOperation from "@/resources/GroupOperation";
 import { emptyEndpointDetails } from "@/components/monitoring/endpoints";
 import { useMemoize } from "@vueuse/core";
 import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
-import { useMonitoringStore } from "./MonitoringStore";
+import monitoringClient from "@/components/monitoring/monitoringClient";
 
 export const useMonitoringEndpointDetailsStore = defineStore("MonitoringEndpointDetailsStore", () => {
   const historyPeriodStore = useMonitoringHistoryPeriodStore();
   const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
-  const monitoringStore = useMonitoringStore();
   const messageGroupClient = createMessageGroupClient();
 
-  const getMemoisedEndpointDetails = useMemoize((endpointName: string, historyPeriod = 1) => {
+  const getMemoisedEndpointDetails = useMemoize((endpointName: string, historyPeriod: number = 1) => {
     const data = ref<EndpointDetails | EndpointDetailsError | null>(null);
     return {
       data,
       refresh: async () => {
-        if (monitoringStore.isMonitoringEnabled) {
+        if (monitoringClient.isMonitoringEnabled) {
           try {
-            const [, details] = await monitoringStore.fetchTypedFromMonitoring<EndpointDetails>(`${`monitored-endpoints`}/${endpointName}?history=${historyPeriod}`);
+            const details = await monitoringClient.getEndpointDetails(endpointName, historyPeriod);
             data.value = details!;
           } catch (error) {
-            console.error(error);
             if (error instanceof Error) {
               data.value = { error: error.message } as EndpointDetailsError;
             }
diff --git a/src/Frontend/src/stores/MonitoringStore.ts b/src/Frontend/src/stores/MonitoringStore.ts
index 3ff3f0276e..1881362190 100644
--- a/src/Frontend/src/stores/MonitoringStore.ts
+++ b/src/Frontend/src/stores/MonitoringStore.ts
@@ -1,3 +1,4 @@
+import monitoringClient from "@/components/monitoring/monitoringClient";
 import { defineStore, acceptHMRUpdate } from "pinia";
 import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
@@ -10,7 +11,6 @@ import { useServiceControlStore } from "./ServiceControlStore";
 
 export const useMonitoringStore = defineStore("MonitoringStore", () => {
   const historyPeriodStore = useMonitoringHistoryPeriodStore();
-
   const route = useRoute();
   const router = useRouter();
   const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
@@ -18,7 +18,6 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
   const serviceControlStore = useServiceControlStore();
 
   //STORE STATE CONSTANTS
-  const monitoringUrl = ref<string | null>();
   const grouping = ref({
     groupedEndpoints: [] as EndpointGroup[],
     groupSegments: 0,
@@ -31,46 +30,18 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
   });
 
   const endpointList = ref<Endpoint[]>([]);
-  const disconnectedEndpointCount = ref(0);
   const filterString = ref("");
   const endpointListCount = computed<number>(() => endpointList.value.length);
   const endpointListIsEmpty = computed<boolean>(() => endpointListCount.value === 0);
   const endpointListIsGrouped = computed<boolean>(() => grouping.value.selectedGrouping !== 0);
   const getEndpointList = computed<Endpoint[]>(() => (filterString.value ? endpointList.value.filter((endpoint) => endpoint.name.toLowerCase().includes(filterString.value.toLowerCase())) : endpointList.value));
 
-  const isMonitoringDisabled = computed(() => monitoringUrl.value == null || monitoringUrl.value === "" || monitoringUrl.value === "!");
-  const isMonitoringEnabled = computed(() => !isMonitoringDisabled.value);
-
   watch(sortBy, async () => await updateEndpointList(), { deep: true });
   watch(filterString, async (newValue) => {
     await updateFilterString(newValue);
   });
 
   //STORE ACTIONS
-  function getMonitoringUrl() {
-    if (!monitoringUrl.value) refresh();
-    return monitoringUrl.value;
-  }
-
-  function refresh() {
-    const searchParams = new URLSearchParams(window.location.search);
-    const mu = searchParams.get("mu");
-
-    if (mu) {
-      monitoringUrl.value = mu;
-      window.localStorage.setItem("mu", monitoringUrl.value);
-      console.debug(`Monitoring Url found in QS and stored in local storage: ${monitoringUrl.value}`);
-    } else if (window.localStorage.getItem("mu")) {
-      monitoringUrl.value = window.localStorage.getItem("mu");
-      console.debug(`Monitoring Url, not in QS, found in local storage: ${monitoringUrl.value}`);
-    } else if (window.defaultConfig && window.defaultConfig.monitoring_urls && window.defaultConfig.monitoring_urls.length) {
-      monitoringUrl.value = window.defaultConfig.monitoring_urls[0];
-      console.debug(`setting Monitoring Url to its default value: ${window.defaultConfig.monitoring_urls[0]}`);
-    } else {
-      console.warn("Monitoring Url is not defined.");
-    }
-  }
-
   async function updateFilterString(filter: string | null = null) {
     filterString.value = filter ?? route.query.filter?.toString() ?? "";
 
@@ -102,10 +73,9 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
 
   async function getAllMonitoredEndpoints() {
     let endpoints: Endpoint[] = [];
-    if (isMonitoringEnabled.value) {
+    if (monitoringClient.isMonitoringEnabled) {
       try {
-        const [, data] = await fetchTypedFromMonitoring<Endpoint[]>(`monitored-endpoints?history=${historyPeriodStore.historyPeriod.pVal}`);
-        endpoints = data ?? [];
+        endpoints = await monitoringClient.getMonitoredEndpoints(historyPeriodStore.historyPeriod.pVal);
         const [, exceptionGroups] = await serviceControlStore.fetchTypedFromServiceControl<GroupOperation[]>(`recoverability/groups/Endpoint Name`);
 
         //Squash and add to existing monitored endpoints
@@ -229,62 +199,21 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
     }
   }
 
-  async function fetchTypedFromMonitoring<T>(suffix: string): Promise<[Response?, T?]> {
-    if (!monitoringUrl.value) refresh();
-
-    if (isMonitoringDisabled.value) {
-      return [];
-    }
-
-    const response = await fetch(`${getMonitoringUrl()}${suffix}`);
-    const data = await response.json();
-
-    return [response, data];
-  }
-
-  async function deleteFromMonitoring(suffix: string) {
-    const requestOptions = {
-      method: "DELETE",
-    };
-    return await fetch(`${getMonitoringUrl()}${suffix}`, requestOptions);
-  }
-
-  async function optionsFromMonitoring() {
-    if (isMonitoringDisabled.value) {
-      return Promise.resolve(null);
-    }
-
-    const requestOptions = {
-      method: "OPTIONS",
-    };
-    return await fetch(getMonitoringUrl() ?? "", requestOptions);
-  }
-
   return {
     //state
-    monitoringUrl,
     grouping,
-    endpointList,
-    disconnectedEndpointCount,
     filterString,
     sortBy,
 
     //getters
-    isMonitoringDisabled,
-    isMonitoringEnabled,
-    endpointListCount,
     endpointListIsEmpty,
     endpointListIsGrouped,
     getEndpointList,
 
     //actions
-    refresh,
     updateSelectedGrouping,
     updateEndpointList,
     updateFilterString,
-    fetchTypedFromMonitoring,
-    deleteFromMonitoring,
-    optionsFromMonitoring,
   };
 });
 
diff --git a/src/Frontend/src/stores/ServiceControlStore.ts b/src/Frontend/src/stores/ServiceControlStore.ts
index f4dfe39547..d3a503fae5 100644
--- a/src/Frontend/src/stores/ServiceControlStore.ts
+++ b/src/Frontend/src/stores/ServiceControlStore.ts
@@ -14,6 +14,14 @@ export const useServiceControlStore = defineStore("ServiceControlStore", () => {
     return serviceControlUrl.value;
   }
 
+  async function getErrorMessagesCount(status: string) {
+    const [response] = await fetchTypedFromServiceControl(`errors?status=${status}`);
+    if (response?.ok) {
+      return parseInt(response.headers.get("Total-Count") ?? "0");
+    }
+    return undefined;
+  }
+
   function refresh() {
     const searchParams = new URLSearchParams(window.location.search);
     const scu = searchParams.get("scu");
@@ -101,6 +109,7 @@ export const useServiceControlStore = defineStore("ServiceControlStore", () => {
     postToServiceControl,
     patchToServiceControl,
     deleteFromServiceControl,
+    getErrorMessagesCount,
   };
 });
 
diff --git a/src/Frontend/src/stores/ThroughputStore.ts b/src/Frontend/src/stores/ThroughputStore.ts
index 19eff3fe6a..1b87a83dc5 100644
--- a/src/Frontend/src/stores/ThroughputStore.ts
+++ b/src/Frontend/src/stores/ThroughputStore.ts
@@ -1,15 +1,13 @@
-import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
+import { acceptHMRUpdate, defineStore } from "pinia";
 import { computed, ref, watch } from "vue";
 import ConnectionTestResults from "@/resources/ConnectionTestResults";
 import createThroughputClient from "@/views/throughputreport/throughputClient";
 import { Transport } from "@/views/throughputreport/transport";
 import useIsThroughputSupported from "@/views/throughputreport/isThroughputSupported";
-import { useMonitoringStore } from "./MonitoringStore";
+import monitoringClient from "@/components/monitoring/monitoringClient";
 
 export const useThroughputStore = defineStore("ThroughputStore", () => {
-  const monitoringStore = useMonitoringStore();
-  const { isMonitoringEnabled } = storeToRefs(monitoringStore);
-
+  const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
   const testResults = ref<ConnectionTestResults | null>(null);
   const isThroughputSupported = useIsThroughputSupported();
   const throughputClient = createThroughputClient();
@@ -34,7 +32,7 @@ export const useThroughputStore = defineStore("ThroughputStore", () => {
     }
 
     // if Monitoring is enabled, we return whatever the value of the connection test
-    if (isMonitoringEnabled.value) {
+    if (isMonitoringEnabled) {
       return !testResults.value?.monitoring_connection_result.connection_successful;
     }
 
diff --git a/src/Frontend/src/views/throughputreport/SetupView.vue b/src/Frontend/src/views/throughputreport/SetupView.vue
index ec5f7375cb..201b9c15f3 100644
--- a/src/Frontend/src/views/throughputreport/SetupView.vue
+++ b/src/Frontend/src/views/throughputreport/SetupView.vue
@@ -6,13 +6,12 @@ import ThroughputSupported from "@/views/throughputreport/ThroughputSupported.vu
 import FAIcon from "@/components/FAIcon.vue";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoRefresh";
-import { useMonitoringStore } from "@/stores/MonitoringStore";
+import monitoringClient from "@/components/monitoring/monitoringClient";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { testResults, isBrokerTransport } = storeToRefs(store);
 
-const monitoringStore = useMonitoringStore();
-const { isMonitoringEnabled } = storeToRefs(monitoringStore);
+const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
 </script>
 
 <template>
diff --git a/src/Frontend/src/views/throughputreport/setup/ConnectionSetupView.vue b/src/Frontend/src/views/throughputreport/setup/ConnectionSetupView.vue
index 96e380806c..1c8030e6e1 100644
--- a/src/Frontend/src/views/throughputreport/setup/ConnectionSetupView.vue
+++ b/src/Frontend/src/views/throughputreport/setup/ConnectionSetupView.vue
@@ -7,15 +7,12 @@ import { storeToRefs } from "pinia";
 import FAIcon from "@/components/FAIcon.vue";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoRefresh";
-import { useMonitoringStore } from "@/stores/MonitoringStore";
+import monitoringClient from "@/components/monitoring/monitoringClient";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { isBrokerTransport } = storeToRefs(store);
 const settingsInfo = ref<ThroughputConnectionSettings | null>(null);
-
-const monitoringStore = useMonitoringStore();
-const { isMonitoringEnabled } = storeToRefs(monitoringStore);
-
+const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
 const throughputClient = createThroughputClient();
 
 onMounted(async () => {
@@ -26,7 +23,7 @@ const needsConfiguration = computed(() => {
   const broker = settingsInfo.value?.broker_settings?.length ?? 0;
   const monitoring = settingsInfo.value?.monitoring_settings?.length ?? 0;
   const serviceControl = settingsInfo.value?.service_control_settings?.length ?? 0;
-  return broker > 0 || (monitoring > 0 && isMonitoringEnabled.value) || serviceControl > 0;
+  return broker > 0 || (monitoring > 0 && isMonitoringEnabled) || serviceControl > 0;
 });
 </script>
 
diff --git a/src/Frontend/src/views/throughputreport/setup/DiagnosticsView.vue b/src/Frontend/src/views/throughputreport/setup/DiagnosticsView.vue
index a6bc76de7c..e62b05009f 100644
--- a/src/Frontend/src/views/throughputreport/setup/DiagnosticsView.vue
+++ b/src/Frontend/src/views/throughputreport/setup/DiagnosticsView.vue
@@ -3,12 +3,11 @@ import ConnectionResultView from "@/views/throughputreport/setup/ConnectionResul
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
 import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoRefresh";
-import { useMonitoringStore } from "@/stores/MonitoringStore";
+import monitoringClient from "@/components/monitoring/monitoringClient";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { testResults, isBrokerTransport } = storeToRefs(store);
-const monitoringStore = useMonitoringStore();
-const { isMonitoringEnabled } = storeToRefs(monitoringStore);
+const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
 const loading = ref(false);
 
 async function testConnection() {
diff --git a/src/Frontend/test/drivers/vitest/setup.ts b/src/Frontend/test/drivers/vitest/setup.ts
index 874436adac..1e30132895 100644
--- a/src/Frontend/test/drivers/vitest/setup.ts
+++ b/src/Frontend/test/drivers/vitest/setup.ts
@@ -1,6 +1,7 @@
 import { afterAll, beforeAll, beforeEach, vi } from "vitest";
 import { mockServer } from "../../mock-server";
 import "@testing-library/jest-dom/vitest";
+import monitoringClient from "../../../src/components/monitoring/monitoringClient";
 
 const defaultConfig = {
   default_route: "/dashboard",
@@ -12,10 +13,12 @@ const defaultConfig = {
 
 export function disableMonitoring() {
   vi.stubGlobal("defaultConfig", { ...defaultConfig, ...{ monitoring_urls: ["!"] } });
+  monitoringClient.resetUrl();
 }
 
 beforeEach(() => {
   vi.stubGlobal("defaultConfig", defaultConfig);
+  monitoringClient.resetUrl();
 });
 
 beforeAll(() => {
diff --git a/src/Frontend/test/preconditions/hasServiceControlMonitoringInstance.ts b/src/Frontend/test/preconditions/hasServiceControlMonitoringInstance.ts
index 54afff9cb1..aaa2f3de3e 100644
--- a/src/Frontend/test/preconditions/hasServiceControlMonitoringInstance.ts
+++ b/src/Frontend/test/preconditions/hasServiceControlMonitoringInstance.ts
@@ -1,11 +1,11 @@
-import { serviceControlMainInstance } from "../mocks/service-control-instance-template";
+import { monitoredInstanceTemplate } from "../mocks/service-control-instance-template";
 import { SetupFactoryOptions } from "../driver";
 
 export const hasServiceControlMonitoringInstance = ({ driver }: SetupFactoryOptions) => {
   const monitoringInstanceUrl = window.defaultConfig.monitoring_urls[0];
   driver.mockEndpoint(monitoringInstanceUrl, {
-    body: serviceControlMainInstance,
+    body: monitoredInstanceTemplate,
     headers: { "X-Particular-Version": "5.0.4" },
   });
-  return serviceControlMainInstance;
+  return monitoredInstanceTemplate;
 };

From 0efe2896b8070ec7665b03944a23925550d07a06 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 21 Nov 2025 18:23:32 +1000
Subject: [PATCH 2/4] Refactor serviceControlStore to be a rest client instead

---
 .../src/components/AutoRefreshDataView.vue    |   6 +-
 .../components/BackendChecksNotifications.vue |   9 +-
 src/Frontend/src/components/PageFooter.vue    |   6 +-
 .../components/ServiceControlAvailable.vue    |   7 +-
 .../configuration/EndpointConnection.vue      |  10 +-
 .../configuration/PlatformConnections.vue     |   6 +-
 .../failedmessages/DeletedMessages.vue        |   9 +-
 .../failedmessages/FailedMessageGroups.vue    |   6 +-
 .../failedmessages/FailedMessages.vue         |   9 +-
 .../failedmessages/LastTenOperations.vue      |   6 +-
 .../failedmessages/PendingRetries.vue         |  15 +--
 .../failedmessages/messageGroupClient.ts      |  24 ++--
 .../src/components/serviceControlClient.ts    | 102 +++++++++++++++
 src/Frontend/src/stores/AuditStore.ts         |   8 +-
 src/Frontend/src/stores/ConfigurationStore.ts |  28 ++--
 .../src/stores/ConnectionsAndStatsStore.ts    |   5 +-
 src/Frontend/src/stores/CustomChecksStore.ts  |   8 +-
 .../src/stores/DeletedMessageGroupsStore.ts   |   7 +-
 .../src/stores/EndpointSettingsStore.ts       |   5 +-
 .../src/stores/EnvironmentAndVersionsStore.ts |   6 +-
 src/Frontend/src/stores/HealthChecksStore.ts  |  11 +-
 .../stores/HeartbeatInstancesStore.spec.ts    |   2 -
 .../src/stores/HeartbeatInstancesStore.ts     |   8 +-
 .../src/stores/HeartbeatsStore.spec.ts        |   2 -
 src/Frontend/src/stores/HeartbeatsStore.ts    |   7 +-
 src/Frontend/src/stores/LicenseStore.ts       |   6 +-
 src/Frontend/src/stores/MessageStore.ts       |  41 +++---
 src/Frontend/src/stores/MonitoringStore.ts    |   6 +-
 src/Frontend/src/stores/RedirectsStore.ts     |  15 +--
 src/Frontend/src/stores/SagaDiagramStore.ts   |   9 +-
 .../src/stores/ServiceControlStore.ts         | 120 ------------------
 .../src/stores/ThroughputStore.spec.ts        |   2 -
 .../src/views/ThroughputReportView.spec.ts    |   3 -
 .../throughputreport/EndpointsView.spec.ts    |   3 -
 .../views/throughputreport/SetupView.spec.ts  |   3 -
 .../endpoints/DetectedListView.spec.ts        |   3 -
 .../setup/DiagnosticsView.spec.ts             |   3 -
 .../throughputreport/setup/MasksView.spec.ts  |   3 -
 .../throughputreport/throughputClient.ts      |  24 ++--
 src/Frontend/test/drivers/vitest/setup.ts     |   5 +-
 40 files changed, 235 insertions(+), 323 deletions(-)
 create mode 100644 src/Frontend/src/components/serviceControlClient.ts
 delete mode 100644 src/Frontend/src/stores/ServiceControlStore.ts

diff --git a/src/Frontend/src/components/AutoRefreshDataView.vue b/src/Frontend/src/components/AutoRefreshDataView.vue
index 2fb2757a1d..477ee2bc08 100644
--- a/src/Frontend/src/components/AutoRefreshDataView.vue
+++ b/src/Frontend/src/components/AutoRefreshDataView.vue
@@ -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<{
@@ -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);
 
@@ -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;
diff --git a/src/Frontend/src/components/BackendChecksNotifications.vue b/src/Frontend/src/components/BackendChecksNotifications.vue
index 4f5b82c971..2273a3b91a 100644
--- a/src/Frontend/src/components/BackendChecksNotifications.vue
+++ b/src/Frontend/src/components/BackendChecksNotifications.vue
@@ -7,8 +7,7 @@ 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 serviceControlClient from "@/components/serviceControlClient";
 import monitoringClient from "./monitoring/monitoringClient";
 
 const router = useRouter();
@@ -17,8 +16,6 @@ const connectionState = connectionStore.connectionState;
 const monitoringConnectionState = connectionStore.monitoringConnectionState;
 const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
 const environment = environmentStore.environment;
-const serviceControlStore = useServiceControlStore();
-const { serviceControlUrl } = storeToRefs(serviceControlStore);
 const primaryConnectionFailure = computed(() => connectionState.unableToConnect);
 const monitoringConnectionFailure = computed(() => monitoringConnectionState.unableToConnect);
 
@@ -27,9 +24,9 @@ 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}.`);
     }
   }
 });
diff --git a/src/Frontend/src/components/PageFooter.vue b/src/Frontend/src/components/PageFooter.vue
index bde947cbb6..ecb826af4f 100644
--- a/src/Frontend/src/components/PageFooter.vue
+++ b/src/Frontend/src/components/PageFooter.vue
@@ -6,7 +6,7 @@ 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";
@@ -18,14 +18,12 @@ const monitoringConnectionState = connectionStore.monitoringConnectionState;
 const { store: environmentAndVersionsStore } = useEnvironmentAndVersionsAutoRefresh();
 const newVersions = environmentAndVersionsStore.newVersions;
 const environment = environmentAndVersionsStore.environment;
-const serviceControlStore = useServiceControlStore();
-const { serviceControlUrl } = storeToRefs(serviceControlStore);
 const licenseStore = useLicenseStore();
 const { licenseStatus, license } = licenseStore;
 const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
 
 const scAddressTooltip = computed(() => {
-  return `ServiceControl URL ${serviceControlUrl.value}`;
+  return `ServiceControl URL ${serviceControlClient.url}`;
 });
 
 const scMonitoringAddressTooltip = computed(() => {
diff --git a/src/Frontend/src/components/ServiceControlAvailable.vue b/src/Frontend/src/components/ServiceControlAvailable.vue
index 04aef2ff2e..b40c6dc31f 100644
--- a/src/Frontend/src/components/ServiceControlAvailable.vue
+++ b/src/Frontend/src/components/ServiceControlAvailable.vue
@@ -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>
@@ -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">
diff --git a/src/Frontend/src/components/configuration/EndpointConnection.vue b/src/Frontend/src/components/configuration/EndpointConnection.vue
index 98599bf0c1..0887b2894b 100644
--- a/src/Frontend/src/components/configuration/EndpointConnection.vue
+++ b/src/Frontend/src/components/configuration/EndpointConnection.vue
@@ -3,8 +3,7 @@ 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 monitoringClient, { MetricsConnectionDetails } from "../monitoring/monitoringClient";
 
@@ -13,9 +12,6 @@ interface ServiceControlInstanceConnection {
   errors: string[];
 }
 
-const serviceControlStore = useServiceControlStore();
-const { serviceControlUrl } = storeToRefs(serviceControlStore);
-
 const loading = ref(true);
 const showCodeOnlyTab = ref(true);
 const jsonSnippet = ref("");
@@ -88,10 +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;
+    return { errors: [`Error reaching ServiceControl at ${serviceControlClient.url} connection`] } as ServiceControlInstanceConnection;
   }
 }
 </script>
diff --git a/src/Frontend/src/components/configuration/PlatformConnections.vue b/src/Frontend/src/components/configuration/PlatformConnections.vue
index 85be08fe2f..6f1ad46fe5 100644
--- a/src/Frontend/src/components/configuration/PlatformConnections.vue
+++ b/src/Frontend/src/components/configuration/PlatformConnections.vue
@@ -3,16 +3,14 @@ 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 serviceControlClient from "@/components/serviceControlClient";
 import monitoringClient from "../monitoring/monitoringClient";
 
 const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
 const connectionState = connectionStore.connectionState;
 const monitoringConnectionState = connectionStore.monitoringConnectionState;
 
-const serviceControlStore = useServiceControlStore();
-serviceControlStore.refresh();
-const localServiceControlUrl = ref(serviceControlStore.serviceControlUrl);
+const localServiceControlUrl = ref(serviceControlClient.url);
 const localMonitoringUrl = ref(monitoringClient.url);
 const isMonitoringDisabled = monitoringClient.isMonitoringDisabled;
 const testingServiceControl = ref(false);
diff --git a/src/Frontend/src/components/failedmessages/DeletedMessages.vue b/src/Frontend/src/components/failedmessages/DeletedMessages.vue
index 1be80920aa..8273c9bcdb 100644
--- a/src/Frontend/src/components/failedmessages/DeletedMessages.vue
+++ b/src/Frontend/src/components/failedmessages/DeletedMessages.vue
@@ -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";
 
@@ -39,7 +39,6 @@ watch(pageNumber, () => loadMessages());
 
 const configurationStore = useConfigurationStore();
 const { configuration } = storeToRefs(configurationStore);
-const serviceControlStore = useServiceControlStore();
 
 function loadMessages() {
   let startDate = new Date(0);
@@ -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;
 }
 
@@ -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}`
       );
 
@@ -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)
   );
diff --git a/src/Frontend/src/components/failedmessages/FailedMessageGroups.vue b/src/Frontend/src/components/failedmessages/FailedMessageGroups.vue
index 00c56cf9a1..9b51be960e 100644
--- a/src/Frontend/src/components/failedmessages/FailedMessageGroups.vue
+++ b/src/Frontend/src/components/failedmessages/FailedMessageGroups.vue
@@ -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[]>([]);
@@ -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;
 }
 
diff --git a/src/Frontend/src/components/failedmessages/FailedMessages.vue b/src/Frontend/src/components/failedmessages/FailedMessages.vue
index 04c88cc2b1..75a82754a6 100644
--- a/src/Frontend/src/components/failedmessages/FailedMessages.vue
+++ b/src/Frontend/src/components/failedmessages/FailedMessages.vue
@@ -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();
 
@@ -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;
 }
@@ -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") ?? "");
@@ -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)
   );
diff --git a/src/Frontend/src/components/failedmessages/LastTenOperations.vue b/src/Frontend/src/components/failedmessages/LastTenOperations.vue
index b146bf38e7..6b166addea 100644
--- a/src/Frontend/src/components/failedmessages/LastTenOperations.vue
+++ b/src/Frontend/src/components/failedmessages/LastTenOperations.vue
@@ -7,15 +7,13 @@ import RecoverabilityHistoryResponse from "@/resources/RecoverabilityHistoryResp
 import FAIcon from "@/components/FAIcon.vue";
 import { faAngleDown, faAngleRight, faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 const historicOperations = ref<HistoricRetryOperation[]>([]);
 const showHistoricRetries = ref(false);
 
-const serviceControlStore = useServiceControlStore();
-
 async function getHistoricOperations() {
-  const [, data] = await serviceControlStore.fetchTypedFromServiceControl<RecoverabilityHistoryResponse>("recoverability/history");
+  const [, data] = await serviceControlClient.fetchTypedFromServiceControl<RecoverabilityHistoryResponse>("recoverability/history");
   historicOperations.value = data.historic_operations;
 }
 
diff --git a/src/Frontend/src/components/failedmessages/PendingRetries.vue b/src/Frontend/src/components/failedmessages/PendingRetries.vue
index ff5050c294..167bc64741 100644
--- a/src/Frontend/src/components/failedmessages/PendingRetries.vue
+++ b/src/Frontend/src/components/failedmessages/PendingRetries.vue
@@ -17,11 +17,10 @@ import { faArrowDownAZ, faArrowDownZA, faArrowDownShortWide, faArrowDownWideShor
 import FAIcon from "@/components/FAIcon.vue";
 import ActionButton from "@/components/ActionButton.vue";
 import { faCheckSquare } from "@fortawesome/free-regular-svg-icons";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import { useConfigurationStore } from "@/stores/ConfigurationStore";
 import { storeToRefs } from "pinia";
 
-const serviceControlStore = useServiceControlStore();
 const configurationStore = useConfigurationStore();
 const { isMassTransitConnected } = storeToRefs(configurationStore);
 
@@ -64,7 +63,7 @@ const periodOptions = ["All Pending Retries", "Retried in the last 2 Hours", "Re
 watch(pageNumber, () => loadPendingRetryMessages());
 
 async function loadEndpoints() {
-  const [, data] = await serviceControlStore.fetchTypedFromServiceControl<QueueAddress[]>("errors/queues/addresses");
+  const [, data] = await serviceControlClient.fetchTypedFromServiceControl<QueueAddress[]>("errors/queues/addresses");
   endpoints.value = data.map((endpoint) => endpoint.physical_address);
 }
 
@@ -103,7 +102,7 @@ async function loadPagedPendingRetryMessages(page: number, searchPhrase: string,
   if (searchPhrase === "empty") searchPhrase = "";
 
   try {
-    const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
+    const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
       `errors?status=${FailedMessageStatus.RetryIssued}&page=${page}&per_page=${perPage}&sort=${sortBy}&direction=${direction}&queueaddress=${searchPhrase}&modified=${startDate.toISOString()}...${endDate.toISOString()}`
     );
     totalCount.value = parseInt(response.headers.get("Total-Count") ?? "0");
@@ -150,7 +149,7 @@ async function retrySelectedMessages() {
   const selectedMessages = messageList.value?.getSelectedMessages() ?? [];
 
   useShowToast(TYPE.INFO, "Info", "Selected messages were submitted for retry...");
-  await serviceControlStore.postToServiceControl(
+  await serviceControlClient.postToServiceControl(
     "pendingretries/retry",
     selectedMessages.map((m) => m.id)
   );
@@ -163,14 +162,14 @@ async function resolveSelectedMessages() {
   const selectedMessages = messageList.value?.getSelectedMessages() ?? [];
 
   useShowToast(TYPE.INFO, "Info", "Selected messages were marked as resolved.");
-  await serviceControlStore.patchToServiceControl("pendingretries/resolve", { uniquemessageids: selectedMessages.map((m) => m.id) });
+  await serviceControlClient.patchToServiceControl("pendingretries/resolve", { uniquemessageids: selectedMessages.map((m) => m.id) });
   messageList.value?.deselectAll();
   selectedMessages.forEach((m) => (m.resolved = true));
 }
 
 async function resolveAllMessages() {
   useShowToast(TYPE.INFO, "Info", "All filtered messages were marked as resolved.");
-  await serviceControlStore.patchToServiceControl("pendingretries/resolve", { from: new Date(0).toISOString(), to: new Date().toISOString() });
+  await serviceControlClient.patchToServiceControl("pendingretries/resolve", { from: new Date(0).toISOString(), to: new Date().toISOString() });
   messageList.value?.deselectAll();
   messageList.value?.resolveAll();
 }
@@ -186,7 +185,7 @@ async function retryAllMessages() {
     data.queueaddress = selectedQueue.value;
   }
 
-  await serviceControlStore.postToServiceControl(url, data);
+  await serviceControlClient.postToServiceControl(url, data);
   messages.value.forEach((message) => {
     message.selected = false;
     message.submittedForRetrial = true;
diff --git a/src/Frontend/src/components/failedmessages/messageGroupClient.ts b/src/Frontend/src/components/failedmessages/messageGroupClient.ts
index 552bf0f9d7..d67fd3342d 100644
--- a/src/Frontend/src/components/failedmessages/messageGroupClient.ts
+++ b/src/Frontend/src/components/failedmessages/messageGroupClient.ts
@@ -1,4 +1,4 @@
-import { ServiceControlStore, useServiceControlStore } from "@/stores/ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import type GroupOperation from "@/resources/GroupOperation";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -8,52 +8,46 @@ export interface ErrorResponse {
 }
 
 export class MessageGroupClient {
-  serviceControlStore: ServiceControlStore;
-  constructor() {
-    //this module is only called from within view setup or other pinia stores, so this call is lifecycle safe
-    this.serviceControlStore = useServiceControlStore();
-  }
-
   public async getExceptionGroups(classifier: string = "") {
-    const [, data] = await this.serviceControlStore.fetchTypedFromServiceControl<GroupOperation[]>(`recoverability/groups/${classifier}`);
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<GroupOperation[]>(`recoverability/groups/${classifier}`);
     return data;
   }
 
   public async getExceptionGroupsForEndpoint(classifier: string = "", classiferFilter = "") {
-    const [, data] = await this.serviceControlStore.fetchTypedFromServiceControl<GroupOperation[]>(`recoverability/groups/${classifier}?classifierFilter=${classiferFilter}`);
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<GroupOperation[]>(`recoverability/groups/${classifier}?classifierFilter=${classiferFilter}`);
     return data;
   }
 
   //delete note by group id
   public async deleteNote(groupId: string) {
-    return this.evaluateResponse(await this.serviceControlStore.deleteFromServiceControl(`recoverability/groups/${groupId}/comment`));
+    return this.evaluateResponse(await serviceControlClient.deleteFromServiceControl(`recoverability/groups/${groupId}/comment`));
   }
 
   //edit or create note by group id
   public async editOrCreateNote(groupId: string, comment: string) {
-    return this.evaluateResponse(await this.serviceControlStore.postToServiceControl(`recoverability/groups/${groupId}/comment?comment=${comment}`));
+    return this.evaluateResponse(await serviceControlClient.postToServiceControl(`recoverability/groups/${groupId}/comment?comment=${comment}`));
   }
 
   //archive exception group by group id
   //archiveGroup
   public async archiveExceptionGroup(groupId: string) {
-    return this.evaluateResponse(await this.serviceControlStore.postToServiceControl(`recoverability/groups/${groupId}/errors/archive`));
+    return this.evaluateResponse(await serviceControlClient.postToServiceControl(`recoverability/groups/${groupId}/errors/archive`));
   }
 
   //restore group by group id
   public async restoreGroup(groupId: string) {
-    return this.evaluateResponse(await this.serviceControlStore.postToServiceControl(`recoverability/groups/${groupId}/errors/unarchive`));
+    return this.evaluateResponse(await serviceControlClient.postToServiceControl(`recoverability/groups/${groupId}/errors/unarchive`));
   }
 
   //retry exception group by group id
   //retryGroup
   public async retryExceptionGroup(groupId: string) {
-    return this.evaluateResponse(await this.serviceControlStore.postToServiceControl(`recoverability/groups/${groupId}/errors/retry`));
+    return this.evaluateResponse(await serviceControlClient.postToServiceControl(`recoverability/groups/${groupId}/errors/retry`));
   }
 
   //acknowledge archive exception group by group id
   public async acknowledgeArchiveGroup(groupId: string) {
-    return this.evaluateResponse(await this.serviceControlStore.deleteFromServiceControl(`recoverability/unacknowledgedgroups/${groupId}`));
+    return this.evaluateResponse(await serviceControlClient.deleteFromServiceControl(`recoverability/unacknowledgedgroups/${groupId}`));
   }
 
   evaluateResponse(response: Response): SuccessResponse | ErrorResponse {
diff --git a/src/Frontend/src/components/serviceControlClient.ts b/src/Frontend/src/components/serviceControlClient.ts
new file mode 100644
index 0000000000..01c70e5ce1
--- /dev/null
+++ b/src/Frontend/src/components/serviceControlClient.ts
@@ -0,0 +1,102 @@
+class ServiceControlClient {
+  private _url: string | undefined = undefined;
+
+  get url(): string | undefined {
+    if (this._url === undefined) {
+      this._url = this.getUrl();
+    }
+    return this._url;
+  }
+
+  public resetUrl() {
+    this._url = undefined;
+  }
+
+  public async fetchTypedFromServiceControl<T>(suffix: string): Promise<[Response, T]> {
+    const response = await fetch(`${this.url}${suffix}`);
+    if (!response.ok) throw new Error(response.statusText ?? "No response");
+    const data = await response.json();
+
+    return [response, data];
+  }
+
+  public async postToServiceControl(suffix: string, payload: object | null = null) {
+    const requestOptions: RequestInit = {
+      method: "POST",
+    };
+    if (payload != null) {
+      requestOptions.headers = { "Content-Type": "application/json" };
+      requestOptions.body = JSON.stringify(payload);
+    }
+    return await fetch(`${this.url}${suffix}`, requestOptions);
+  }
+
+  public async putToServiceControl(suffix: string, payload: object | null) {
+    const requestOptions: RequestInit = {
+      method: "PUT",
+    };
+    if (payload != null) {
+      requestOptions.headers = { "Content-Type": "application/json" };
+      requestOptions.body = JSON.stringify(payload);
+    }
+    return await fetch(`${this.url}${suffix}`, requestOptions);
+  }
+
+  public async deleteFromServiceControl(suffix: string) {
+    const requestOptions: RequestInit = {
+      method: "DELETE",
+    };
+    return await fetch(`${this.url}${suffix}`, requestOptions);
+  }
+
+  public async patchToServiceControl(suffix: string, payload: object | null) {
+    const requestOptions: RequestInit = {
+      method: "PATCH",
+    };
+    if (payload != null) {
+      requestOptions.headers = { "Content-Type": "application/json" };
+      requestOptions.body = JSON.stringify(payload);
+    }
+    return await fetch(`${this.url}${suffix}`, requestOptions);
+  }
+
+  public async fetchFromServiceControl(suffix: string, options?: { cache?: RequestCache }) {
+    const requestOptions: RequestInit = {
+      method: "GET",
+      cache: options?.cache ?? "default", // Default  if not specified
+      headers: {
+        Accept: "application/json",
+      },
+    };
+    return await fetch(`${this.url}${suffix}`, requestOptions);
+  }
+
+  public async getErrorMessagesCount(status: string) {
+    const [response] = await this.fetchTypedFromServiceControl(`errors?status=${status}`);
+    if (response?.ok) {
+      return parseInt(response.headers.get("Total-Count") ?? "0");
+    }
+    return undefined;
+  }
+
+  private getUrl() {
+    const searchParams = new URLSearchParams(window.location.search);
+    const scu = searchParams.get("scu");
+    const existingScu = window.localStorage.getItem("scu");
+
+    if (scu) {
+      if (scu !== existingScu) {
+        window.localStorage.setItem("scu", scu);
+      }
+      return scu;
+    } else if (existingScu) {
+      return existingScu;
+    } else if (window.defaultConfig && window.defaultConfig.service_control_url && window.defaultConfig.service_control_url.length) {
+      return window.defaultConfig.service_control_url;
+    }
+
+    return undefined;
+  }
+}
+
+export default new ServiceControlClient();
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index 4e558c4ce4..f662834df3 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -4,7 +4,7 @@ import type { SortInfo } from "@/components/SortInfo";
 import Message from "@/resources/Message";
 import { EndpointsView } from "@/resources/EndpointView";
 import type { DateRange } from "@/types/date";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export enum FieldNames {
   TimeSent = "time_sent",
@@ -14,8 +14,6 @@ export enum FieldNames {
 }
 
 export const useAuditStore = defineStore("AuditStore", () => {
-  const serviceControlStore = useServiceControlStore();
-
   const sortByInstances = ref<SortInfo>({
     property: FieldNames.TimeSent,
     isAscending: false,
@@ -31,7 +29,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
 
   async function loadEndpoints() {
     try {
-      const [, data] = await serviceControlStore.fetchTypedFromServiceControl<EndpointsView[]>(`endpoints`);
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EndpointsView[]>(`endpoints`);
       endpoints.value = data;
     } catch (e) {
       endpoints.value = [];
@@ -44,7 +42,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
       const [fromDate, toDate] = dateRange.value;
       const from = fromDate?.toISOString() ?? "";
       const to = toDate?.toISOString() ?? "";
-      const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<Message[]>(
+      const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<Message[]>(
         `messages2/?endpoint_name=${selectedEndpointName.value}&from=${from}&to=${to}&q=${messageFilterString.value}&page_size=${itemsPerPage.value}&sort=${sortByInstances.value.property}&direction=${sortByInstances.value.isAscending ? "asc" : "desc"}`
       );
       totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
diff --git a/src/Frontend/src/stores/ConfigurationStore.ts b/src/Frontend/src/stores/ConfigurationStore.ts
index 231f1e6a48..69869ccd26 100644
--- a/src/Frontend/src/stores/ConfigurationStore.ts
+++ b/src/Frontend/src/stores/ConfigurationStore.ts
@@ -1,24 +1,24 @@
-import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { computed, ref } from "vue";
 import Configuration from "@/resources/Configuration";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export const useConfigurationStore = defineStore("ConfigurationStore", () => {
   const configuration = ref<Configuration | null>(null);
 
-  const serviceControlStore = useServiceControlStore();
-  const { serviceControlUrl } = storeToRefs(serviceControlStore);
-
   const isMassTransitConnected = computed(() => configuration.value?.mass_transit_connector !== undefined);
 
-  async function refresh() {
-    if (!serviceControlUrl.value) return;
-
-    const response = await serviceControlStore.fetchFromServiceControl("configuration");
-    configuration.value = await response.json();
-  }
-
-  watch(serviceControlUrl, refresh, { immediate: true });
+  serviceControlClient
+    .fetchFromServiceControl("configuration")
+    // eslint-disable-next-line promise/prefer-await-to-then
+    .then(async (response) => {
+      configuration.value = await response.json();
+      return configuration.value;
+    })
+    // eslint-disable-next-line promise/prefer-await-to-then
+    .catch((error) => {
+      console.error("Failed to fetch configuration:", error);
+    });
 
   return {
     configuration,
diff --git a/src/Frontend/src/stores/ConnectionsAndStatsStore.ts b/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
index 6c1a610f4d..f5cae8ec9c 100644
--- a/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
+++ b/src/Frontend/src/stores/ConnectionsAndStatsStore.ts
@@ -4,7 +4,7 @@ import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { ConnectionState } from "@/resources/ConnectionState";
 import { useCounter } from "@vueuse/core";
 import monitoringClient from "@/components/monitoring/monitoringClient";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore", () => {
   const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
@@ -34,7 +34,6 @@ export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore
   });
 
   const displayConnectionsWarning = computed(() => (connectionState.unableToConnect || (monitoringConnectionState.unableToConnect && isMonitoringEnabled)) ?? false);
-  const serviceControlStore = useServiceControlStore();
 
   async function refresh() {
     const failedMessagesResult = getErrorMessagesCount(FailedMessageStatus.Unresolved);
@@ -51,7 +50,7 @@ export const useConnectionsAndStatsStore = defineStore("ConnectionsAndStatsStore
   }
 
   function getErrorMessagesCount(status: FailedMessageStatus) {
-    return fetchAndSetConnectionState(() => serviceControlStore.getErrorMessagesCount(status), connectionState);
+    return fetchAndSetConnectionState(() => serviceControlClient.getErrorMessagesCount(status), connectionState);
   }
 
   function getDisconnectedEndpointsCount() {
diff --git a/src/Frontend/src/stores/CustomChecksStore.ts b/src/Frontend/src/stores/CustomChecksStore.ts
index fb02cc2d6f..958a5ad8f0 100644
--- a/src/Frontend/src/stores/CustomChecksStore.ts
+++ b/src/Frontend/src/stores/CustomChecksStore.ts
@@ -2,13 +2,11 @@ import CustomCheck from "@/resources/CustomCheck";
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { computed, ref, watch } from "vue";
 import { useCounter } from "@vueuse/core";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export const useCustomChecksStore = defineStore("CustomChecksStore", () => {
   const prefix = "customchecks/";
 
-  const serviceControlStore = useServiceControlStore();
-
   const pageNumber = ref(1);
   const failingCount = ref(0);
   const failedChecks = ref<CustomCheck[]>([]);
@@ -21,7 +19,7 @@ export const useCustomChecksStore = defineStore("CustomChecksStore", () => {
       return;
     }
     try {
-      const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<CustomCheck[]>(`customchecks?status=fail&page=${pageNumber.value}`);
+      const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<CustomCheck[]>(`customchecks?status=fail&page=${pageNumber.value}`);
       failedChecks.value = data;
       failingCount.value = parseInt(response.headers.get("Total-Count") ?? "0");
     } catch (e) {
@@ -42,7 +40,7 @@ export const useCustomChecksStore = defineStore("CustomChecksStore", () => {
 
       // HINT: This is required to handle the difference between ServiceControl 4 and 5
       const guid = id.toLocaleLowerCase().startsWith(prefix) ? id.substring(prefix.length) : id;
-      await serviceControlStore.deleteFromServiceControl(`${prefix}${guid}`);
+      await serviceControlClient.deleteFromServiceControl(`${prefix}${guid}`);
     } finally {
       dec();
     }
diff --git a/src/Frontend/src/stores/DeletedMessageGroupsStore.ts b/src/Frontend/src/stores/DeletedMessageGroupsStore.ts
index ac73ff090e..143602a067 100644
--- a/src/Frontend/src/stores/DeletedMessageGroupsStore.ts
+++ b/src/Frontend/src/stores/DeletedMessageGroupsStore.ts
@@ -1,9 +1,9 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { readonly, ref } from "vue";
-import { useServiceControlStore } from "./ServiceControlStore";
 import { useCookies } from "vue3-cookies";
 import FailureGroupView from "@/resources/FailureGroupView";
 import { MessageGroupClient } from "@/components/failedmessages/messageGroupClient";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export const statusesForRestoreOperation = ["restorestarted", "restoreprogressing", "restorefinalizing", "restorecompleted"] as const;
 type RestoreOperationStatus = (typeof statusesForRestoreOperation)[number];
@@ -31,7 +31,6 @@ export const useDeletedMessageGroupsStore = defineStore("DeletedMessageGroupsSto
   const archiveGroups = ref<ExtendedFailureGroupView[]>([]);
   let undismissedRestoreGroups: ExtendedFailureGroupView[] = [];
 
-  const serviceControlStore = useServiceControlStore();
   const messageGroupClient = new MessageGroupClient();
 
   const cookies = useCookies();
@@ -42,7 +41,7 @@ export const useDeletedMessageGroupsStore = defineStore("DeletedMessageGroupsSto
       selectedClassifier.value = getGrouping() ?? classifiers.value[0];
     }
     //get all deleted message groups
-    const [, result] = await serviceControlStore.fetchTypedFromServiceControl<FailureGroupView[]>(`errors/groups/${selectedClassifier.value ?? getGrouping()}`);
+    const [, result] = await serviceControlClient.fetchTypedFromServiceControl<FailureGroupView[]>(`errors/groups/${selectedClassifier.value ?? getGrouping()}`);
 
     if (result.length === 0 && undismissedRestoreGroups.length > 0) {
       undismissedRestoreGroups.forEach((deletedGroup) => {
@@ -93,7 +92,7 @@ export const useDeletedMessageGroupsStore = defineStore("DeletedMessageGroupsSto
   }
 
   async function getGroupingClassifiers() {
-    const [, data] = await serviceControlStore.fetchTypedFromServiceControl<string[]>("recoverability/classifiers");
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<string[]>("recoverability/classifiers");
     classifiers.value = data;
   }
 
diff --git a/src/Frontend/src/stores/EndpointSettingsStore.ts b/src/Frontend/src/stores/EndpointSettingsStore.ts
index 974a2c16cd..765edb561d 100644
--- a/src/Frontend/src/stores/EndpointSettingsStore.ts
+++ b/src/Frontend/src/stores/EndpointSettingsStore.ts
@@ -1,18 +1,17 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import { EndpointSettings } from "@/resources/EndpointSettings";
 import useIsEndpointSettingsSupported from "@/components/heartbeats/isEndpointSettingsSupported";
 
 export const useEndpointSettingsStore = defineStore("EndpointSettingsStore", () => {
   const defaultEndpointSettingsValue = <EndpointSettings>{ name: "", track_instances: true };
-  const serviceControlStore = useServiceControlStore();
 
   const isEndpointSettingsSupported = useIsEndpointSettingsSupported();
 
   async function getEndpointSettings(): Promise<EndpointSettings[]> {
     if (!isEndpointSettingsSupported.value) return [defaultEndpointSettingsValue];
 
-    const [, data] = await serviceControlStore.fetchTypedFromServiceControl<EndpointSettings[]>(`endpointssettings`);
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EndpointSettings[]>(`endpointssettings`);
     return data;
   }
 
diff --git a/src/Frontend/src/stores/EnvironmentAndVersionsStore.ts b/src/Frontend/src/stores/EnvironmentAndVersionsStore.ts
index 89ab21a0bc..56ab03151d 100644
--- a/src/Frontend/src/stores/EnvironmentAndVersionsStore.ts
+++ b/src/Frontend/src/stores/EnvironmentAndVersionsStore.ts
@@ -4,12 +4,10 @@ import RootUrls from "@/resources/RootUrls";
 import { useMemoize } from "@vueuse/core";
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { computed, reactive } from "vue";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import monitoringClient from "@/components/monitoring/monitoringClient";
 
 export const useEnvironmentAndVersionsStore = defineStore("EnvironmentAndVersionsStore", () => {
-  const serviceControlStore = useServiceControlStore();
-
   const environment = reactive({
     monitoring_version: "",
     sc_version: "",
@@ -86,7 +84,7 @@ export const useEnvironmentAndVersionsStore = defineStore("EnvironmentAndVersion
 
   async function getPrimaryVersion() {
     try {
-      const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<RootUrls>("");
+      const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<RootUrls>("");
       environment.sc_version = response.headers.get("X-Particular-Version") ?? "";
       return data;
     } catch {
diff --git a/src/Frontend/src/stores/HealthChecksStore.ts b/src/Frontend/src/stores/HealthChecksStore.ts
index 85b642159f..963b25f96b 100644
--- a/src/Frontend/src/stores/HealthChecksStore.ts
+++ b/src/Frontend/src/stores/HealthChecksStore.ts
@@ -1,7 +1,7 @@
 import EmailSettings from "@/components/configuration/EmailSettings";
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { ref } from "vue";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import EmailNotifications from "@/resources/EmailNotifications";
 import UpdateEmailNotificationsSettingsRequest from "@/resources/UpdateEmailNotificationsSettingsRequest";
 import { useEnvironmentAndVersionsStore } from "./EnvironmentAndVersionsStore";
@@ -18,14 +18,13 @@ export const useHealthChecksStore = defineStore("HealthChecksStore", () => {
     to: "",
   });
 
-  const serviceControlStore = useServiceControlStore();
   const environmentStore = useEnvironmentAndVersionsStore();
   const hasResponseStatusInHeaders = environmentStore.serviceControlIsGreaterThan("5.2");
 
   async function refresh() {
     let result: EmailNotifications | null = null;
     try {
-      const [, data] = await serviceControlStore.fetchTypedFromServiceControl<EmailNotifications>("notifications/email");
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EmailNotifications>("notifications/email");
       result = data;
     } catch (err) {
       console.error(err);
@@ -49,7 +48,7 @@ export const useHealthChecksStore = defineStore("HealthChecksStore", () => {
 
   async function toggleEmailNotifications() {
     const result = await getResponseOrError(() =>
-      serviceControlStore.postToServiceControl("notifications/email/toggle", {
+      serviceControlClient.postToServiceControl("notifications/email/toggle", {
         enabled: !(emailNotifications.value.enabled ?? true),
       })
     );
@@ -64,7 +63,7 @@ export const useHealthChecksStore = defineStore("HealthChecksStore", () => {
 
   async function testEmailNotifications() {
     const result = await getResponseOrError(
-      () => serviceControlStore.postToServiceControl("notifications/email/test"),
+      () => serviceControlClient.postToServiceControl("notifications/email/test"),
       (response) => (hasResponseStatusInHeaders.value ? (response.headers.get("X-Particular-Reason") ?? response.statusText) : response.statusText)
     );
     if (result.message === "success") return true;
@@ -75,7 +74,7 @@ export const useHealthChecksStore = defineStore("HealthChecksStore", () => {
   }
 
   async function saveEmailNotifications(newSettings: UpdateEmailNotificationsSettingsRequest) {
-    const result = await getResponseOrError(() => serviceControlStore.postToServiceControl("notifications/email", newSettings));
+    const result = await getResponseOrError(() => serviceControlClient.postToServiceControl("notifications/email", newSettings));
     if (result.message === "success") {
       emailNotifications.value = {
         enabled: emailNotifications.value.enabled,
diff --git a/src/Frontend/src/stores/HeartbeatInstancesStore.spec.ts b/src/Frontend/src/stores/HeartbeatInstancesStore.spec.ts
index b86f029aea..d0e8d31e20 100644
--- a/src/Frontend/src/stores/HeartbeatInstancesStore.spec.ts
+++ b/src/Frontend/src/stores/HeartbeatInstancesStore.spec.ts
@@ -10,7 +10,6 @@ import { EndpointSettings } from "@/resources/EndpointSettings";
 import { serviceControlWithHeartbeats } from "@/components/heartbeats/serviceControlWithHeartbeats";
 import { EndpointStatus } from "@/resources/Heartbeat";
 import { useEnvironmentAndVersionsStore } from "./EnvironmentAndVersionsStore";
-import { useServiceControlStore } from "./ServiceControlStore";
 
 describe("HeartbeatInstancesStore tests", () => {
   async function setup(endpoints: EndpointsView[], endpointSettings: EndpointSettings[], preSetup: (driver: Driver) => Promise<void> = () => Promise.resolve()) {
@@ -22,7 +21,6 @@ describe("HeartbeatInstancesStore tests", () => {
     await driver.setUp(precondition.hasEndpointSettings(endpointSettings));
     await driver.setUp(precondition.hasHeartbeatsEndpoints(endpoints));
 
-    useServiceControlStore();
     await useEnvironmentAndVersionsStore().refresh();
 
     const store = useHeartbeatInstancesStore();
diff --git a/src/Frontend/src/stores/HeartbeatInstancesStore.ts b/src/Frontend/src/stores/HeartbeatInstancesStore.ts
index 19aa65f642..39fa130d5c 100644
--- a/src/Frontend/src/stores/HeartbeatInstancesStore.ts
+++ b/src/Frontend/src/stores/HeartbeatInstancesStore.ts
@@ -6,7 +6,7 @@ import { type GroupPropertyType, SortDirection } from "@/resources/SortOptions";
 import getSortFunction from "@/components/getSortFunction";
 import { useHeartbeatsStore } from "@/stores/HeartbeatsStore";
 import { EndpointsView } from "@/resources/EndpointView";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export enum ColumnNames {
   InstanceName = "name",
@@ -21,8 +21,6 @@ const columnSortings = new Map<string, (endpoint: EndpointsView) => GroupPropert
 ]);
 
 export const useHeartbeatInstancesStore = defineStore("HeartbeatInstancesStore", () => {
-  const serviceControlStore = useServiceControlStore();
-
   const instanceFilterString = ref("");
   const store = useHeartbeatsStore();
   const { endpointInstances } = storeToRefs(store);
@@ -45,12 +43,12 @@ export const useHeartbeatInstancesStore = defineStore("HeartbeatInstancesStore",
   }
 
   async function deleteEndpointInstance(endpoint: EndpointsView) {
-    await serviceControlStore.deleteFromServiceControl(`endpoints/${endpoint.id}`);
+    await serviceControlClient.deleteFromServiceControl(`endpoints/${endpoint.id}`);
     await store.refresh();
   }
 
   async function toggleEndpointMonitor(endpoints: EndpointsView[]) {
-    await Promise.all(endpoints.map((endpoint) => serviceControlStore.patchToServiceControl(`endpoints/${endpoint.id}`, { monitor_heartbeat: !endpoint.monitor_heartbeat })));
+    await Promise.all(endpoints.map((endpoint) => serviceControlClient.patchToServiceControl(`endpoints/${endpoint.id}`, { monitor_heartbeat: !endpoint.monitor_heartbeat })));
     await store.refresh();
   }
 
diff --git a/src/Frontend/src/stores/HeartbeatsStore.spec.ts b/src/Frontend/src/stores/HeartbeatsStore.spec.ts
index eadfae06af..8a57f3e02d 100644
--- a/src/Frontend/src/stores/HeartbeatsStore.spec.ts
+++ b/src/Frontend/src/stores/HeartbeatsStore.spec.ts
@@ -10,7 +10,6 @@ import { serviceControlWithHeartbeats } from "@/components/heartbeats/serviceCon
 import { EndpointStatus } from "@/resources/Heartbeat";
 import { ColumnNames, useHeartbeatsStore } from "@/stores/HeartbeatsStore";
 import { useEnvironmentAndVersionsStore } from "./EnvironmentAndVersionsStore";
-import { useServiceControlStore } from "./ServiceControlStore";
 
 describe("HeartbeatsStore tests", () => {
   async function setup(endpoints: EndpointsView[], endpointSettings: EndpointSettings[] = [{ name: "", track_instances: true }], preSetup: (driver: Driver) => Promise<void> = () => Promise.resolve()) {
@@ -21,7 +20,6 @@ describe("HeartbeatsStore tests", () => {
     await driver.setUp(serviceControlWithHeartbeats);
     await driver.setUp(precondition.hasHeartbeatsEndpoints(endpoints, endpointSettings));
 
-    useServiceControlStore();
     await useEnvironmentAndVersionsStore().refresh();
 
     const store = useHeartbeatsStore();
diff --git a/src/Frontend/src/stores/HeartbeatsStore.ts b/src/Frontend/src/stores/HeartbeatsStore.ts
index c4578ab8ff..701baddff1 100644
--- a/src/Frontend/src/stores/HeartbeatsStore.ts
+++ b/src/Frontend/src/stores/HeartbeatsStore.ts
@@ -7,7 +7,7 @@ import getSortFunction from "@/components/getSortFunction";
 import { EndpointsView } from "@/resources/EndpointView";
 import type { SortInfo } from "@/components/SortInfo";
 import { EndpointSettings } from "@/resources/EndpointSettings";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import { useEndpointSettingsStore } from "./EndpointSettingsStore";
 
 export enum ColumnNames {
@@ -49,7 +49,6 @@ const columnSortings = new Map<string, (endpoint: LogicalEndpoint) => GroupPrope
 ]);
 
 export const useHeartbeatsStore = defineStore("HeartbeatsStore", () => {
-  const serviceControlStore = useServiceControlStore();
   const endpointSettingsStore = useEndpointSettingsStore();
 
   const sortByInstances = ref<SortInfo>({
@@ -103,7 +102,7 @@ export const useHeartbeatsStore = defineStore("HeartbeatsStore", () => {
 
   const refresh = async () => {
     try {
-      const [[, data], data2] = await Promise.all([serviceControlStore.fetchTypedFromServiceControl<EndpointsView[]>("endpoints"), endpointSettingsStore.getEndpointSettings()]);
+      const [[, data], data2] = await Promise.all([serviceControlClient.fetchTypedFromServiceControl<EndpointsView[]>("endpoints"), endpointSettingsStore.getEndpointSettings()]);
       endpointInstances.value = data;
       settings.value = data2;
       defaultTrackingInstancesValue.value = data2.find((value) => value.name === "")!.track_instances;
@@ -114,7 +113,7 @@ export const useHeartbeatsStore = defineStore("HeartbeatsStore", () => {
   };
 
   async function updateEndpointSettings(endpoints: Pick<LogicalEndpoint, "name" | "track_instances">[]) {
-    await Promise.all(endpoints.map((endpoint) => serviceControlStore.patchToServiceControl(`endpointssettings/${endpoint.name}`, { track_instances: !endpoint.track_instances })));
+    await Promise.all(endpoints.map((endpoint) => serviceControlClient.patchToServiceControl(`endpointssettings/${endpoint.name}`, { track_instances: !endpoint.track_instances })));
     await refresh();
   }
 
diff --git a/src/Frontend/src/stores/LicenseStore.ts b/src/Frontend/src/stores/LicenseStore.ts
index 296ac3f251..8c077b7df1 100644
--- a/src/Frontend/src/stores/LicenseStore.ts
+++ b/src/Frontend/src/stores/LicenseStore.ts
@@ -1,13 +1,11 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { computed, reactive, ref } from "vue";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import LicenseInfo, { LicenseStatus } from "@/resources/LicenseInfo";
 import { LicenseWarningLevel } from "@/composables/LicenseStatus";
 import { useGetDayDiffFromToday } from "@/composables/formatter";
 
 export const useLicenseStore = defineStore("LicenseStore", () => {
-  const serviceControlStore = useServiceControlStore();
-
   const license = reactive<LicenseInfo>({
     edition: "",
     expiration_date: "",
@@ -98,7 +96,7 @@ export const useLicenseStore = defineStore("LicenseStore", () => {
 
   async function getLicense() {
     try {
-      const [, data] = await serviceControlStore.fetchTypedFromServiceControl<LicenseInfo>("license?refresh=true&clientName=servicepulse");
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<LicenseInfo>("license?refresh=true&clientName=servicepulse");
       return data;
     } catch (err) {
       console.error("Error fetching license information", err);
diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts
index 36050ce6d5..5910192311 100644
--- a/src/Frontend/src/stores/MessageStore.ts
+++ b/src/Frontend/src/stores/MessageStore.ts
@@ -1,5 +1,5 @@
 import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
-import { computed, reactive, Ref, ref, watch } from "vue";
+import { computed, reactive, Ref, ref } from "vue";
 import Header from "@/resources/Header";
 import type EndpointDetails from "@/resources/EndpointDetails";
 import { FailedMessage, ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage";
@@ -9,7 +9,7 @@ import dayjs from "@/utils/dayjs";
 import { parse, stringify } from "lossless-json";
 import xmlFormat from "xml-formatter";
 import { DataContainer } from "./DataContainer";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import { EditAndRetryConfig } from "@/resources/Configuration";
 import EditRetryResponse from "@/resources/EditRetryResponse";
 import { EditedMessage } from "@/resources/EditMessage";
@@ -73,20 +73,23 @@ export const useMessageStore = defineStore("MessageStore", () => {
   let conversationLoadedId = "";
 
   const configStore = useConfigurationStore();
-  const serviceControlStore = useServiceControlStore();
-  const { serviceControlUrl } = storeToRefs(serviceControlStore);
   const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
   const areSimpleHeadersSupported = environmentStore.serviceControlIsGreaterThan("5.2.0");
 
   const { configuration } = storeToRefs(configStore);
   const error_retention_period = computed(() => dayjs.duration(configuration.value?.data_retention?.error_retention_period ?? "PT0S").asHours());
 
-  watch(serviceControlUrl, loadConfig, { immediate: true });
-  async function loadConfig() {
-    if (!serviceControlUrl.value) return;
-    const [, data] = await serviceControlStore.fetchTypedFromServiceControl<EditAndRetryConfig>("edit/config");
-    edit_and_retry_config.value = data;
-  }
+  serviceControlClient
+    .fetchTypedFromServiceControl<EditAndRetryConfig>("edit/config")
+    // eslint-disable-next-line promise/prefer-await-to-then
+    .then(([, data]) => {
+      edit_and_retry_config.value = data;
+      return data;
+    })
+    // eslint-disable-next-line promise/prefer-await-to-then
+    .catch(() => {
+      console.warn("Failed to load Edit and Retry configuration");
+    });
 
   function reset() {
     state.data = { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} };
@@ -104,7 +107,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     state.not_found = false;
 
     try {
-      const response = await serviceControlStore.fetchFromServiceControl(`errors/last/${id}`);
+      const response = await serviceControlClient.fetchFromServiceControl(`errors/last/${id}`);
       if (response.status === 404) {
         state.not_found = true;
         return;
@@ -149,7 +152,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     state.not_found = headers.value.not_found = false;
 
     try {
-      const [, data] = await serviceControlStore.fetchTypedFromServiceControl<Message[]>(`messages/search/${messageId}`);
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<Message[]>(`messages/search/${messageId}`);
 
       const message = data.find((value) => value.id === id);
 
@@ -187,7 +190,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     conversationLoadedId = conversationId;
     conversationData.value.loading = true;
     try {
-      const [, data] = await serviceControlStore.fetchTypedFromServiceControl<Message[]>(`conversations/${conversationId}`);
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<Message[]>(`conversations/${conversationId}`);
 
       conversationData.value.data = data;
     } catch {
@@ -210,7 +213,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     body.value.failed_to_load = false;
 
     try {
-      const response = await serviceControlStore.fetchFromServiceControl(state.data.body_url.substring(1));
+      const response = await serviceControlClient.fetchFromServiceControl(state.data.body_url.substring(1));
       if (response.status === 404) {
         body.value.not_found = true;
 
@@ -242,7 +245,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
 
   async function archiveMessage() {
     if (state.data.id) {
-      const response = await serviceControlStore.patchToServiceControl("errors/archive/", [state.data.id]);
+      const response = await serviceControlClient.patchToServiceControl("errors/archive/", [state.data.id]);
       if (!response.ok) {
         throw new Error(response.statusText);
       }
@@ -252,7 +255,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
 
   async function restoreMessage() {
     if (state.data.id) {
-      const response = await serviceControlStore.patchToServiceControl("errors/unarchive/", [state.data.id]);
+      const response = await serviceControlClient.patchToServiceControl("errors/unarchive/", [state.data.id]);
       if (!response.ok) {
         throw new Error(response.statusText);
       }
@@ -268,7 +271,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
   }
 
   async function retryMessages(ids: string[]) {
-    const response = await serviceControlStore.postToServiceControl("errors/retry", ids);
+    const response = await serviceControlClient.postToServiceControl("errors/retry", ids);
     if (!response.ok) {
       throw new Error(response.statusText);
     }
@@ -288,7 +291,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
           )
         : editedMessage.value.headers,
     };
-    const response = await serviceControlStore.postToServiceControl(`edit/${id}`, payload);
+    const response = await serviceControlClient.postToServiceControl(`edit/${id}`, payload);
     if (!response.ok) {
       throw new Error(response.statusText);
     }
@@ -315,7 +318,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
       // eslint-disable-next-line no-await-in-loop
       await new Promise((resolve) => setTimeout(resolve, 1000));
       // eslint-disable-next-line no-await-in-loop
-      const [, data] = await serviceControlStore.fetchTypedFromServiceControl<FailedMessage>(`errors/last/${state.data.id}`);
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<FailedMessage>(`errors/last/${state.data.id}`);
       if (status === data.status) {
         break;
       }
diff --git a/src/Frontend/src/stores/MonitoringStore.ts b/src/Frontend/src/stores/MonitoringStore.ts
index 1881362190..1519bd03dd 100644
--- a/src/Frontend/src/stores/MonitoringStore.ts
+++ b/src/Frontend/src/stores/MonitoringStore.ts
@@ -7,15 +7,13 @@ import type { EndpointGroup, Endpoint, GroupedEndpoint } from "@/resources/Monit
 import type { SortInfo } from "@/components/SortInfo";
 import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
 import GroupOperation from "@/resources/GroupOperation";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export const useMonitoringStore = defineStore("MonitoringStore", () => {
   const historyPeriodStore = useMonitoringHistoryPeriodStore();
   const route = useRoute();
   const router = useRouter();
   const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
-  //TODO: if/when a recoverabilityStore is created, replace this
-  const serviceControlStore = useServiceControlStore();
 
   //STORE STATE CONSTANTS
   const grouping = ref({
@@ -76,7 +74,7 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
     if (monitoringClient.isMonitoringEnabled) {
       try {
         endpoints = await monitoringClient.getMonitoredEndpoints(historyPeriodStore.historyPeriod.pVal);
-        const [, exceptionGroups] = await serviceControlStore.fetchTypedFromServiceControl<GroupOperation[]>(`recoverability/groups/Endpoint Name`);
+        const [, exceptionGroups] = await serviceControlClient.fetchTypedFromServiceControl<GroupOperation[]>(`recoverability/groups/Endpoint Name`);
 
         //Squash and add to existing monitored endpoints
         if (exceptionGroups.length > 0) {
diff --git a/src/Frontend/src/stores/RedirectsStore.ts b/src/Frontend/src/stores/RedirectsStore.ts
index 5eda5cee2a..9a3e20f315 100644
--- a/src/Frontend/src/stores/RedirectsStore.ts
+++ b/src/Frontend/src/stores/RedirectsStore.ts
@@ -2,7 +2,7 @@ import Redirect from "@/resources/Redirect";
 import QueueAddress from "@/resources/QueueAddress";
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { reactive } from "vue";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
 import { RetryRedirect } from "@/components/configuration/RetryRedirectEdit.vue";
 
@@ -19,17 +19,16 @@ export const useRedirectsStore = defineStore("RedirectsStore", () => {
     total: 0,
   });
 
-  const serviceControlStore = useServiceControlStore();
   const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
   const hasResponseStatusInHeader = environmentStore.serviceControlIsGreaterThan("5.2.0");
 
   async function getKnownQueues() {
-    const [, data] = await serviceControlStore.fetchTypedFromServiceControl<QueueAddress[]>("errors/queues/addresses");
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<QueueAddress[]>("errors/queues/addresses");
     redirects.queues = data.map((x) => x.physical_address);
   }
 
   async function getRedirects() {
-    const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<Redirect[]>("redirects");
+    const [response, data] = await serviceControlClient.fetchTypedFromServiceControl<Redirect[]>("redirects");
     redirects.total = parseInt(response.headers.get("Total-Count") || "0");
     redirects.data = data;
   }
@@ -39,7 +38,7 @@ export const useRedirectsStore = defineStore("RedirectsStore", () => {
   }
 
   async function retryPendingMessagesForQueue(queueName: string) {
-    const response = await serviceControlStore.postToServiceControl(`errors/queues/${queueName}/retry`);
+    const response = await serviceControlClient.postToServiceControl(`errors/queues/${queueName}/retry`);
     return {
       message: response.ok ? "success" : `error:${response.statusText}`,
       status: response.status,
@@ -49,7 +48,7 @@ export const useRedirectsStore = defineStore("RedirectsStore", () => {
 
   async function updateRedirect(redirect: RetryRedirect) {
     return handleResponse(
-      await serviceControlStore.putToServiceControl(`redirects/${redirect.redirectId}`, {
+      await serviceControlClient.putToServiceControl(`redirects/${redirect.redirectId}`, {
         id: redirect.redirectId,
         fromphysicaladdress: redirect.sourceQueue,
         tophysicaladdress: redirect.targetQueue,
@@ -59,7 +58,7 @@ export const useRedirectsStore = defineStore("RedirectsStore", () => {
 
   async function createRedirect(redirect: RetryRedirect) {
     return handleResponse(
-      await serviceControlStore.postToServiceControl("redirects", {
+      await serviceControlClient.postToServiceControl("redirects", {
         fromphysicaladdress: redirect.sourceQueue,
         tophysicaladdress: redirect.targetQueue,
       })
@@ -67,7 +66,7 @@ export const useRedirectsStore = defineStore("RedirectsStore", () => {
   }
 
   async function deleteRedirect(redirectId: string) {
-    return handleResponse(await serviceControlStore.deleteFromServiceControl(`redirects/${redirectId}`));
+    return handleResponse(await serviceControlClient.deleteFromServiceControl(`redirects/${redirectId}`));
   }
 
   function handleResponse(response: Response) {
diff --git a/src/Frontend/src/stores/SagaDiagramStore.ts b/src/Frontend/src/stores/SagaDiagramStore.ts
index 4a14a6e15e..191282231d 100644
--- a/src/Frontend/src/stores/SagaDiagramStore.ts
+++ b/src/Frontend/src/stores/SagaDiagramStore.ts
@@ -6,7 +6,7 @@ import { parse, stringify } from "lossless-json";
 import xmlFormat from "xml-formatter";
 import { DataContainer } from "./DataContainer";
 import { useMessageStore } from "./MessageStore";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export interface SagaMessageData {
   message_id: string;
@@ -26,7 +26,6 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
   const scrollToTimeout = ref(false);
   const MessageBodyEndpoint = "messages/{0}/body";
   const messageStore = useMessageStore();
-  const serviceControlStore = useServiceControlStore();
 
   watch(
     () => messageStore.state.data.message_id,
@@ -65,7 +64,7 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
     error.value = null;
 
     try {
-      const response = await serviceControlStore.fetchFromServiceControl(`sagas/${id}`);
+      const response = await serviceControlClient.fetchFromServiceControl(`sagas/${id}`);
 
       if (response.status === 404) {
         sagaHistory.value = null;
@@ -96,7 +95,7 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
     result.body.failed_to_load = false;
 
     try {
-      const response = await serviceControlStore.fetchFromServiceControl(bodyUrl);
+      const response = await serviceControlClient.fetchFromServiceControl(bodyUrl);
       if (response.status === 404) {
         result.body.not_found = true;
         return result;
@@ -143,7 +142,7 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
 
   async function getAuditMessages(sagaId: string) {
     try {
-      const response = await serviceControlStore.fetchFromServiceControl(`messages/search?q=${sagaId}`);
+      const response = await serviceControlClient.fetchFromServiceControl(`messages/search?q=${sagaId}`);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
diff --git a/src/Frontend/src/stores/ServiceControlStore.ts b/src/Frontend/src/stores/ServiceControlStore.ts
deleted file mode 100644
index d3a503fae5..0000000000
--- a/src/Frontend/src/stores/ServiceControlStore.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { acceptHMRUpdate, defineStore } from "pinia";
-import { ref } from "vue";
-
-export const useServiceControlStore = defineStore("ServiceControlStore", () => {
-  const serviceControlUrl = ref<string | null>();
-
-  function getServiceControlUrl() {
-    if (!serviceControlUrl.value) {
-      refresh();
-    }
-    if (!serviceControlUrl.value) {
-      throw new Error("Service Control URL is not configured");
-    }
-    return serviceControlUrl.value;
-  }
-
-  async function getErrorMessagesCount(status: string) {
-    const [response] = await fetchTypedFromServiceControl(`errors?status=${status}`);
-    if (response?.ok) {
-      return parseInt(response.headers.get("Total-Count") ?? "0");
-    }
-    return undefined;
-  }
-
-  function refresh() {
-    const searchParams = new URLSearchParams(window.location.search);
-    const scu = searchParams.get("scu");
-
-    if (scu) {
-      serviceControlUrl.value = scu;
-      window.localStorage.setItem("scu", serviceControlUrl.value);
-      console.debug(`ServiceControl Url found in QS and stored in local storage: ${serviceControlUrl.value}`);
-    } else if (window.localStorage.getItem("scu")) {
-      serviceControlUrl.value = window.localStorage.getItem("scu");
-      console.debug(`ServiceControl Url, not in QS, found in local storage: ${serviceControlUrl.value}`);
-    } else if (window.defaultConfig && window.defaultConfig.service_control_url) {
-      serviceControlUrl.value = window.defaultConfig.service_control_url;
-      console.debug(`setting ServiceControl Url to its default value: ${window.defaultConfig.service_control_url}`);
-    } else {
-      console.warn("ServiceControl Url is not defined.");
-    }
-  }
-
-  async function fetchFromServiceControl(suffix: string, options?: { cache?: RequestCache }) {
-    const requestOptions: RequestInit = {
-      method: "GET",
-      cache: options?.cache ?? "default", // Default  if not specified
-      headers: {
-        Accept: "application/json",
-      },
-    };
-    return await fetch(`${getServiceControlUrl()}${suffix}`, requestOptions);
-  }
-
-  async function fetchTypedFromServiceControl<T>(suffix: string): Promise<[Response, T]> {
-    const response = await fetch(`${getServiceControlUrl()}${suffix}`);
-    if (!response.ok) throw new Error(response.statusText ?? "No response");
-    const data = await response.json();
-
-    return [response, data];
-  }
-
-  async function postToServiceControl(suffix: string, payload: object | null = null) {
-    const requestOptions: RequestInit = {
-      method: "POST",
-    };
-    if (payload != null) {
-      requestOptions.headers = { "Content-Type": "application/json" };
-      requestOptions.body = JSON.stringify(payload);
-    }
-    return await fetch(`${getServiceControlUrl()}${suffix}`, requestOptions);
-  }
-
-  async function putToServiceControl(suffix: string, payload: object | null) {
-    const requestOptions: RequestInit = {
-      method: "PUT",
-    };
-    if (payload != null) {
-      requestOptions.headers = { "Content-Type": "application/json" };
-      requestOptions.body = JSON.stringify(payload);
-    }
-    return await fetch(`${getServiceControlUrl()}${suffix}`, requestOptions);
-  }
-
-  async function deleteFromServiceControl(suffix: string) {
-    const requestOptions: RequestInit = {
-      method: "DELETE",
-    };
-    return await fetch(`${getServiceControlUrl()}${suffix}`, requestOptions);
-  }
-
-  async function patchToServiceControl(suffix: string, payload: object | null) {
-    const requestOptions: RequestInit = {
-      method: "PATCH",
-    };
-    if (payload != null) {
-      requestOptions.headers = { "Content-Type": "application/json" };
-      requestOptions.body = JSON.stringify(payload);
-    }
-    return await fetch(`${getServiceControlUrl()}${suffix}`, requestOptions);
-  }
-
-  return {
-    refresh,
-    serviceControlUrl,
-    fetchFromServiceControl,
-    fetchTypedFromServiceControl,
-    putToServiceControl,
-    postToServiceControl,
-    patchToServiceControl,
-    deleteFromServiceControl,
-    getErrorMessagesCount,
-  };
-});
-
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useServiceControlStore, import.meta.hot));
-}
-
-export type ServiceControlStore = ReturnType<typeof useServiceControlStore>;
diff --git a/src/Frontend/src/stores/ThroughputStore.spec.ts b/src/Frontend/src/stores/ThroughputStore.spec.ts
index f35ca4827b..28ae185320 100644
--- a/src/Frontend/src/stores/ThroughputStore.spec.ts
+++ b/src/Frontend/src/stores/ThroughputStore.spec.ts
@@ -9,7 +9,6 @@ import { setActivePinia, storeToRefs } from "pinia";
 import { Driver } from "../../test/driver";
 import { disableMonitoring } from "../../test/drivers/vitest/setup";
 import { useEnvironmentAndVersionsStore } from "./EnvironmentAndVersionsStore";
-import { useServiceControlStore } from "./ServiceControlStore";
 
 describe("ThroughputStore tests", () => {
   async function setup(preSetup: (driver: Driver) => Promise<void>) {
@@ -21,7 +20,6 @@ describe("ThroughputStore tests", () => {
     await driver.setUp(precondition.hasNoDisconnectedEndpoints);
     await driver.setUp(precondition.hasServiceControlMonitoringInstance);
 
-    useServiceControlStore();
     await useEnvironmentAndVersionsStore().refresh();
 
     const store = useThroughputStore();
diff --git a/src/Frontend/src/views/ThroughputReportView.spec.ts b/src/Frontend/src/views/ThroughputReportView.spec.ts
index 38bbc58340..627b8dd312 100644
--- a/src/Frontend/src/views/ThroughputReportView.spec.ts
+++ b/src/Frontend/src/views/ThroughputReportView.spec.ts
@@ -10,7 +10,6 @@ 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";
 
 describe("EndpointsView tests", () => {
@@ -30,8 +29,6 @@ describe("EndpointsView tests", () => {
     const driver = await setup();
     await preSetup(driver);
 
-    useServiceControlStore();
-
     const el = document.createElement("div");
     el.id = "modalDisplay";
     document.body.appendChild(el);
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts b/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
index 4ec24b7476..4a80cac316 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
@@ -9,7 +9,6 @@ import makeRouter from "@/router";
 import { flushPromises, RouterLinkStub } from "@vue/test-utils";
 import EndpointsView from "./EndpointsView.vue";
 import { serviceControlWithThroughput } from "@/views/throughputreport/serviceControlWithThroughput";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { setActivePinia } from "pinia";
 
 describe("EndpointsView tests", () => {
@@ -29,8 +28,6 @@ describe("EndpointsView tests", () => {
     const driver = await setup(transport);
     await preSetup(driver);
 
-    useServiceControlStore();
-
     const { debug } = render(EndpointsView, {
       global: {
         stubs: {
diff --git a/src/Frontend/src/views/throughputreport/SetupView.spec.ts b/src/Frontend/src/views/throughputreport/SetupView.spec.ts
index bc332cced3..17fb545148 100644
--- a/src/Frontend/src/views/throughputreport/SetupView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/SetupView.spec.ts
@@ -11,7 +11,6 @@ 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", () => {
@@ -50,8 +49,6 @@ describe("SetupView tests", () => {
 
     await preSetup(driver);
 
-    useServiceControlStore();
-
     const { debug } = render(SetupView, {
       global: {
         stubs: {
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts b/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts
index a4b06da276..c172cf8b65 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts
@@ -11,7 +11,6 @@ import { within } from "@testing-library/vue";
 import UpdateUserIndicator from "@/resources/UpdateUserIndicator";
 import { serviceControlWithThroughput } from "@/views/throughputreport/serviceControlWithThroughput";
 import { flushPromises } from "@vue/test-utils";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { setActivePinia } from "pinia";
 import { createTestingPinia } from "@pinia/testing";
 
@@ -32,8 +31,6 @@ describe("DetectedListView tests", () => {
     const driver = await setup();
     await preSetup(driver);
 
-    useServiceControlStore();
-
     const el = document.createElement("div");
     el.id = "modalDisplay";
     document.body.appendChild(el);
diff --git a/src/Frontend/src/views/throughputreport/setup/DiagnosticsView.spec.ts b/src/Frontend/src/views/throughputreport/setup/DiagnosticsView.spec.ts
index 3d8f7f18e4..206d63da5d 100644
--- a/src/Frontend/src/views/throughputreport/setup/DiagnosticsView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/setup/DiagnosticsView.spec.ts
@@ -7,7 +7,6 @@ import { Transport } from "@/views/throughputreport/transport";
 import { makeDriverForTests, userEvent, render, screen } from "@component-test-utils";
 import { Driver } from "../../../../test/driver";
 import { disableMonitoring } from "../../../../test/drivers/vitest/setup";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { setActivePinia } from "pinia";
 
 describe("DiagnosticsView tests", () => {
@@ -49,8 +48,6 @@ describe("DiagnosticsView tests", () => {
       })
     );
 
-    useServiceControlStore();
-
     const { debug } = render(DiagnosticsView, {
       global: {
         plugins: [],
diff --git a/src/Frontend/src/views/throughputreport/setup/MasksView.spec.ts b/src/Frontend/src/views/throughputreport/setup/MasksView.spec.ts
index 1b6262c485..1a926d3f8b 100644
--- a/src/Frontend/src/views/throughputreport/setup/MasksView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/setup/MasksView.spec.ts
@@ -7,7 +7,6 @@ import Toast from "vue-toastification";
 import { disableMonitoring } from "../../../../test/drivers/vitest/setup";
 import { flushPromises } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { setActivePinia } from "pinia";
 
 describe("MaskView tests", () => {
@@ -29,8 +28,6 @@ describe("MaskView tests", () => {
     driver.mockEndpoint(`${window.defaultConfig.service_control_url}licensing/settings/masks`, { body });
     setActivePinia(createTestingPinia({ stubActions: false }));
 
-    useServiceControlStore();
-
     const { debug } = render(MasksView, { global: { plugins: [Toast], directives: { tippy: () => {} } } });
     await flushPromises();
 
diff --git a/src/Frontend/src/views/throughputreport/throughputClient.ts b/src/Frontend/src/views/throughputreport/throughputClient.ts
index 467f851194..761fd9828d 100644
--- a/src/Frontend/src/views/throughputreport/throughputClient.ts
+++ b/src/Frontend/src/views/throughputreport/throughputClient.ts
@@ -5,42 +5,38 @@ import ThroughputConnectionSettings from "@/resources/ThroughputConnectionSettin
 import { downloadFileFromResponse } from "@/composables/fileDownloadCreator";
 import ReportGenerationState from "@/resources/ReportGenerationState";
 import { parse } from "@tinyhttp/content-disposition";
-import { ServiceControlStore, useServiceControlStore } from "@/stores/ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 class ThroughputClient {
-  serviceControlStore: ServiceControlStore;
-  constructor(readonly basePath: string) {
-    //this module is only called from within view setup or other pinia stores, so this call is lifecycle safe
-    this.serviceControlStore = useServiceControlStore();
-  }
+  constructor(readonly basePath: string) {}
 
   public async endpoints() {
-    const [, data] = await this.serviceControlStore.fetchTypedFromServiceControl<EndpointThroughputSummary[]>(`${this.basePath}/endpoints`);
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EndpointThroughputSummary[]>(`${this.basePath}/endpoints`);
 
     return data;
   }
 
   public async updateIndicators(data: UpdateUserIndicator[]): Promise<void> {
-    await this.serviceControlStore.postToServiceControl(`${this.basePath}/endpoints/update`, data);
+    await serviceControlClient.postToServiceControl(`${this.basePath}/endpoints/update`, data);
   }
 
   public async test() {
-    const [, data] = await this.serviceControlStore.fetchTypedFromServiceControl<ConnectionTestResults>(`${this.basePath}/settings/test`);
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<ConnectionTestResults>(`${this.basePath}/settings/test`);
     return data;
   }
 
   public async setting() {
-    const [, data] = await this.serviceControlStore.fetchTypedFromServiceControl<ThroughputConnectionSettings>(`${this.basePath}/settings/info`);
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<ThroughputConnectionSettings>(`${this.basePath}/settings/info`);
     return data;
   }
 
   public async reportAvailable() {
-    const [, data] = await this.serviceControlStore.fetchTypedFromServiceControl<ReportGenerationState>(`${this.basePath}/report/available`);
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<ReportGenerationState>(`${this.basePath}/report/available`);
     return data;
   }
 
   public async downloadReport() {
-    const response = await this.serviceControlStore.fetchFromServiceControl(`${this.basePath}/report/file?spVersion=${encodeURIComponent(window.defaultConfig.version)}`);
+    const response = await serviceControlClient.fetchFromServiceControl(`${this.basePath}/report/file?spVersion=${encodeURIComponent(window.defaultConfig.version)}`);
     if (response.ok) {
       let fileName = "throughput-report.json";
       const contentType = response.headers.get("Content-Type") ?? "application/json";
@@ -59,12 +55,12 @@ class ThroughputClient {
   }
 
   public async getMasks() {
-    const [, data] = await this.serviceControlStore.fetchTypedFromServiceControl<string[]>(`${this.basePath}/settings/masks`);
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<string[]>(`${this.basePath}/settings/masks`);
     return data;
   }
 
   public async updateMasks(data: string[]): Promise<void> {
-    await this.serviceControlStore.postToServiceControl(`${this.basePath}/settings/masks/update`, data);
+    await serviceControlClient.postToServiceControl(`${this.basePath}/settings/masks/update`, data);
   }
 }
 
diff --git a/src/Frontend/test/drivers/vitest/setup.ts b/src/Frontend/test/drivers/vitest/setup.ts
index 1e30132895..c8005feded 100644
--- a/src/Frontend/test/drivers/vitest/setup.ts
+++ b/src/Frontend/test/drivers/vitest/setup.ts
@@ -1,7 +1,8 @@
 import { afterAll, beforeAll, beforeEach, vi } from "vitest";
 import { mockServer } from "../../mock-server";
 import "@testing-library/jest-dom/vitest";
-import monitoringClient from "../../../src/components/monitoring/monitoringClient";
+import monitoringClient from "@/components/monitoring/monitoringClient";
+import serviceControlClient from "@/components/serviceControlClient";
 
 const defaultConfig = {
   default_route: "/dashboard",
@@ -14,11 +15,13 @@ const defaultConfig = {
 export function disableMonitoring() {
   vi.stubGlobal("defaultConfig", { ...defaultConfig, ...{ monitoring_urls: ["!"] } });
   monitoringClient.resetUrl();
+  serviceControlClient.resetUrl();
 }
 
 beforeEach(() => {
   vi.stubGlobal("defaultConfig", defaultConfig);
   monitoringClient.resetUrl();
+  serviceControlClient.resetUrl();
 });
 
 beforeAll(() => {

From c5fef3d5129f6bdc982ef7d8b1399363697e816e Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 28 Nov 2025 10:13:45 +0800
Subject: [PATCH 3/4] refactor to not use then()

---
 src/Frontend/src/stores/MessageStore.ts | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts
index aef575e810..447b9d3e43 100644
--- a/src/Frontend/src/stores/MessageStore.ts
+++ b/src/Frontend/src/stores/MessageStore.ts
@@ -80,17 +80,15 @@ export const useMessageStore = defineStore("MessageStore", () => {
   const { configuration } = storeToRefs(configStore);
   const error_retention_period = computed(() => timeSpanToDuration(configuration.value?.data_retention?.error_retention_period).asHours());
 
-  serviceControlClient
-    .fetchTypedFromServiceControl<EditAndRetryConfig>("edit/config")
-    // eslint-disable-next-line promise/prefer-await-to-then
-    .then(([, data]) => {
+  async function loadEditAndRetryConfiguration() {
+    try {
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EditAndRetryConfig>("edit/config");
       edit_and_retry_config.value = data;
-      return data;
-    })
-    // eslint-disable-next-line promise/prefer-await-to-then
-    .catch(() => {
+    } catch {
       console.warn("Failed to load Edit and Retry configuration");
-    });
+    }
+  }
+  loadEditAndRetryConfiguration();
 
   function reset() {
     state.data = { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} };

From 84be3ce144ca5fee3665a4094bd6a3918bc96dda Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 28 Nov 2025 10:42:51 +0800
Subject: [PATCH 4/4] move function to be consistent with monitoring

---
 .../configuration/EndpointConnection.vue       | 18 ++----------------
 .../src/components/serviceControlClient.ts     | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/Frontend/src/components/configuration/EndpointConnection.vue b/src/Frontend/src/components/configuration/EndpointConnection.vue
index 0887b2894b..09bd883b93 100644
--- a/src/Frontend/src/components/configuration/EndpointConnection.vue
+++ b/src/Frontend/src/components/configuration/EndpointConnection.vue
@@ -3,15 +3,10 @@ import { onMounted, ref } from "vue";
 import LicenseNotExpired from "../LicenseNotExpired.vue";
 import ServiceControlAvailable from "../ServiceControlAvailable.vue";
 import CodeEditor from "@/components/CodeEditor.vue";
-import serviceControlClient from "@/components/serviceControlClient";
+import serviceControlClient, { ServiceControlInstanceConnection } from "@/components/serviceControlClient";
 import LoadingSpinner from "../LoadingSpinner.vue";
 import monitoringClient, { MetricsConnectionDetails } from "../monitoring/monitoringClient";
 
-interface ServiceControlInstanceConnection {
-  settings: { [key: string]: object };
-  errors: string[];
-}
-
 const loading = ref(true);
 const showCodeOnlyTab = ref(true);
 const jsonSnippet = ref("");
@@ -66,7 +61,7 @@ function switchJsonTab() {
 }
 
 async function serviceControlConnections() {
-  const scConnectionResult = getServiceControlConnection();
+  const scConnectionResult = serviceControlClient.getServiceControlConnection();
   const monitoringConnectionResult = monitoringClient.getMonitoringConnection();
 
   const [scConnection, mConnection] = await Promise.all([scConnectionResult, monitoringConnectionResult]);
@@ -81,15 +76,6 @@ async function serviceControlConnections() {
     },
   };
 }
-
-async function getServiceControlConnection() {
-  try {
-    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<ServiceControlInstanceConnection>("connection");
-    return data;
-  } catch {
-    return { errors: [`Error reaching ServiceControl at ${serviceControlClient.url} connection`] } as ServiceControlInstanceConnection;
-  }
-}
 </script>
 
 <template>
diff --git a/src/Frontend/src/components/serviceControlClient.ts b/src/Frontend/src/components/serviceControlClient.ts
index 3ab98e65c6..3e0ec2c183 100644
--- a/src/Frontend/src/components/serviceControlClient.ts
+++ b/src/Frontend/src/components/serviceControlClient.ts
@@ -1,3 +1,8 @@
+export interface ServiceControlInstanceConnection {
+  settings: { [key: string]: object };
+  errors: string[];
+}
+
 class ServiceControlClient {
   private _url: string | undefined = undefined;
 
@@ -12,6 +17,15 @@ class ServiceControlClient {
     this._url = undefined;
   }
 
+  public async getServiceControlConnection() {
+    try {
+      const [, data] = await this.fetchTypedFromServiceControl<ServiceControlInstanceConnection>("connection");
+      return data;
+    } catch {
+      return { errors: [`Error reaching ServiceControl at ${this.url} connection`] } as ServiceControlInstanceConnection;
+    }
+  }
+
   public async fetchTypedFromServiceControl<T>(suffix: string, signal?: AbortSignal): Promise<[Response, T]> {
     const response = await fetch(`${this.url}${suffix}`, { signal });
     if (!response.ok) throw new Error(response.statusText ?? "No response");