Refactor monitoring store to only have state

Introduced a monitoringClient

Author: johnsimons

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,17 +36,17 @@ watch(primaryConnectionFailure, (newValue, oldValue) => {
 
 watch(monitoringConnectionFailure, (newValue, oldValue) => {
   // Only watch the state change if monitoring is enabled
-  if (isMonitoringDisabled.value) {
+  if (monitoringClient.isMonitoringDisabled) {
     return;
   }
 
   //NOTE to eliminate success msg showing everytime the screen is refreshed
   if (newValue !== oldValue && !(oldValue === null && newValue === false)) {
     const connectionUrl = router.resolve(routeLinks.configuration.connections.link).href;
     if (newValue) {
-      useShowToast(TYPE.ERROR, "Error", `Could not connect to the ServiceControl Monitoring service at ${monitoringUrl.value}. <a class="btn btn-default" href="${connectionUrl}">View connection settings</a>`);
+      useShowToast(TYPE.ERROR, "Error", `Could not connect to the ServiceControl Monitoring service at ${monitoringClient.url}. <a class="btn btn-default" href="${connectionUrl}">View connection settings</a>`);
     } else {
-      useShowToast(TYPE.SUCCESS, "Success", `Connection to ServiceControl Monitoring service was successful at ${monitoringUrl.value}.`);
+      useShowToast(TYPE.SUCCESS, "Success", `Connection to ServiceControl Monitoring service was successful at ${monitoringClient.url}.`);
     }
   }
 });

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

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,

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>

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>
 

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

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>
 

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>