Refactor serviceControlStore to be a rest client instead

Author: johnsimons

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;

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}.`);
     }
   }
 });

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(() => {

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">

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>

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);

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)
   );

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;
 }
 

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)
   );

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;
 }