Fix issues caused by master branch refactoring

Author: warwickschroeder

src/Frontend/src/components/failedmessages/DeletedMessages.vue

@@ -7,8 +7,7 @@ import ServiceControlAvailable from "../ServiceControlAvailable.vue";
 import MessageList, { IMessageList } from "./MessageList.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import PaginationStrip from "../../components/PaginationStrip.vue";
-import dayjs from "@/utils/dayjs";
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { TYPE } from "vue-toastification";
 import FAIcon from "@/components/FAIcon.vue";
 import { faArrowRotateRight } from "@fortawesome/free-solid-svg-icons";
@@ -27,102 +26,6 @@ const { messages, groupId, groupName, totalCount, pageNumber, selectedPeriod } =
 
 const showConfirmRestore = ref(false);
 const messageList = ref<IMessageList | undefined>();
-const messages = ref<ExtendedFailedMessage[]>([]);
-
-watch(pageNumber, () => loadMessages());
-
-const configurationStore = useConfigurationStore();
-const { configuration } = storeToRefs(configurationStore);
-const serviceControlStore = useServiceControlStore();
-
-function loadMessages() {
-  let startDate = new Date(0);
-  const endDate = new Date();
-
-  switch (selectedPeriod.value) {
-    case "All Deleted":
-      startDate = new Date();
-      startDate.setHours(startDate.getHours() - 24 * 365);
-      break;
-    case "Deleted in the last 2 Hours":
-      startDate = new Date();
-      startDate.setHours(startDate.getHours() - 2);
-      break;
-    case "Deleted in the last 1 Day":
-      startDate = new Date();
-      startDate.setHours(startDate.getHours() - 24);
-      break;
-    case "Deleted in the last 7 days":
-      startDate = new Date();
-      startDate.setHours(startDate.getHours() - 24 * 7);
-      break;
-  }
-  return loadPagedMessages(groupId.value, pageNumber.value, "", "", startDate.toISOString(), endDate.toISOString());
-}
-
-async function loadGroupDetails(groupId: string) {
-  const [, data] = await serviceControlStore.fetchTypedFromServiceControl<FailureGroup>(`archive/groups/id/${groupId}`);
-  groupName.value = data.title;
-}
-
-function loadPagedMessages(groupId?: string, page: number = 1, sortBy: string = "modified", direction: string = "desc", startDate: string = new Date(0).toISOString(), endDate: string = new Date().toISOString()) {
-  const dateRange = startDate + "..." + endDate;
-  let loadGroupDetailsPromise;
-  if (groupId && !groupName.value) {
-    loadGroupDetailsPromise = loadGroupDetails(groupId);
-  }
-
-  async function loadDelMessages() {
-    try {
-      const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
-        `${groupId ? `recoverability/groups/${groupId}/` : ""}errors?status=archived&page=${page}&per_page=${perPage}&sort=${sortBy}&direction=${direction}&modified=${dateRange}`
-      );
-
-      totalCount.value = parseInt(response.headers.get("Total-Count") ?? "0");
-
-      if (messages.value.length && data.length) {
-        // merge the previously selected messages into the new list so we can replace them
-        messages.value.forEach((previousMessage) => {
-          const receivedMessage = data.find((m) => m.id === previousMessage.id);
-          if (receivedMessage) {
-            if (previousMessage.last_modified === receivedMessage.last_modified) {
-              receivedMessage.retryInProgress = previousMessage.retryInProgress;
-              receivedMessage.deleteInProgress = previousMessage.deleteInProgress;
-            }
-
-            receivedMessage.selected = previousMessage.selected;
-          }
-        });
-      }
-      messages.value = updateMessagesScheduledDeletionDate(data);
-    } catch (err) {
-      console.log(err);
-      const result = {
-        message: "error",
-      };
-      return result;
-    }
-  }
-
-  const loadDelMessagesPromise = loadDelMessages();
-
-  if (loadGroupDetailsPromise) {
-    return Promise.all([loadGroupDetailsPromise, loadDelMessagesPromise]);
-  }
-
-  return loadDelMessagesPromise;
-}
-
-function updateMessagesScheduledDeletionDate(messages: ExtendedFailedMessage[]) {
-  //check deletion time
-  messages.forEach((message) => {
-    message.error_retention_period = dayjs.duration(configuration.value?.data_retention.error_retention_period ?? "PT0S").asHours();
-    const countdown = dayjs(message.last_modified).add(message.error_retention_period, "hours");
-    message.delete_soon = countdown < dayjs();
-    message.deleted_in = countdown.format();
-  });
-  return messages;
-}
 
 function numberSelected() {
   return messageList.value?.getSelectedMessages()?.length ?? 0;

src/Frontend/src/components/platformcapabilities/capabilities/MonitoringCapability.ts

@@ -2,10 +2,10 @@ import { computed } from "vue";
 import { StatusIndicator } from "@/components/platformcapabilities/types";
 import { CapabilityStatus } from "@/components/platformcapabilities/constants";
 import { storeToRefs } from "pinia";
-import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { useConnectionsAndStatsStore } from "@/stores/ConnectionsAndStatsStore";
 import useMonitoringStoreAutoRefresh from "@/composables/useMonitoringStoreAutoRefresh";
 import { type CapabilityComposable, type CapabilityStatusToStringMap, useCapabilityBase } from "./BaseCapability";
+import monitoringClient from "@/components/monitoring/monitoringClient";
 
 const MonitoringDescriptions: CapabilityStatusToStringMap = {
   [CapabilityStatus.EndpointsNotConfigured]:
@@ -39,9 +39,8 @@ enum MonitoringIndicatorTooltip {
 export function useMonitoringCapability(): CapabilityComposable {
   const { getIconForStatus, getDescriptionForStatus, getHelpButtonTextForStatus, getHelpButtonUrlForStatus, createIndicator } = useCapabilityBase();
 
-  // this tells us if monitoring is configured in ServiceControl
-  const serviceControlStore = useServiceControlStore();
-  const { isMonitoringEnabled } = storeToRefs(serviceControlStore);
+  // this tells us if monitoring is configured in ServicePulse
+  const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
 
   // this tells us if there are any endpoints sending data
   // Uses auto-refresh to periodically check for monitored endpoints (every 5 seconds)
@@ -55,11 +54,11 @@ export function useMonitoringCapability(): CapabilityComposable {
 
   // Determine overall monitoring status
   const monitoringStatus = computed(() => {
-    const isConfiguredInServiceControl = isMonitoringEnabled.value;
+    const isConfiguredInServicePulse = isMonitoringEnabled;
     const connectionSuccessful = monitoringConnectionState.connected && !monitoringConnectionState.unableToConnect;
 
-    // 1. Check if monitoring is configured in ServiceControl
-    if (!isConfiguredInServiceControl) {
+    // 1. Check if monitoring is configured in ServicePulse
+    if (!isConfiguredInServicePulse) {
       return CapabilityStatus.InstanceNotConfigured;
     }
 
@@ -95,11 +94,11 @@ export function useMonitoringCapability(): CapabilityComposable {
 
     // Instance specific states
     const connectionSuccessful = monitoringConnectionState.connected && !monitoringConnectionState.unableToConnect;
-    const instanceAvailable = isMonitoringEnabled.value && connectionSuccessful;
+    const instanceAvailable = isMonitoringEnabled && connectionSuccessful;
 
-    const instanceTooltip = instanceAvailable ? MonitoringIndicatorTooltip.InstanceAvailable : !isMonitoringEnabled.value ? MonitoringIndicatorTooltip.InstanceNotConfigured : MonitoringIndicatorTooltip.InstanceUnavailable;
+    const instanceTooltip = instanceAvailable ? MonitoringIndicatorTooltip.InstanceAvailable : !isMonitoringEnabled ? MonitoringIndicatorTooltip.InstanceNotConfigured : MonitoringIndicatorTooltip.InstanceUnavailable;
 
-    if (isMonitoringEnabled.value) {
+    if (isMonitoringEnabled) {
       indicators.push(createIndicator("Instance", instanceAvailable ? CapabilityStatus.Available : CapabilityStatus.Unavailable, instanceTooltip));
     }
 

src/Frontend/src/composables/useAuditStoreAutoRefresh.ts

@@ -1,19 +1,10 @@
 import { useAuditStore } from "@/stores/AuditStore";
-import { useAutoRefresh } from "./useAutoRefresh";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-let store: ReturnType<typeof useAuditStore> | null = null;
-
-const refresh = () => {
-  if (!store) {
-    return Promise.resolve();
-  }
-  return store.checkForSuccessfulMessages();
+// Override the refresh method to use checkForSuccessfulMessages, which is more lightweight
+const useAuditStoreWithRefresh = () => {
+  const store = useAuditStore();
+  return Object.assign(store, { refresh: store.checkForSuccessfulMessages });
 };
 
-const autoRefresh = useAutoRefresh("auditStoreSuccessfulMessages", refresh, 5000);
-
-export default () => {
-  store = useAuditStore();
-  autoRefresh();
-  return { store };
-};
+export default useStoreAutoRefresh("auditStoreSuccessfulMessages", useAuditStoreWithRefresh, 5000).autoRefresh;

src/Frontend/src/composables/useMonitoringStoreAutoRefresh.ts

@@ -1,19 +1,10 @@
 import { useMonitoringStore } from "@/stores/MonitoringStore";
-import { useAutoRefresh } from "./useAutoRefresh";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-let store: ReturnType<typeof useMonitoringStore> | null = null;
-
-const refresh = () => {
-  if (!store) {
-    return Promise.resolve();
-  }
-  return store.checkForMonitoredEndpoints();
+// Override the refresh method to use checkForMonitoredEndpoints, which is more lightweight
+const useMonitoringStoreWithRefresh = () => {
+  const store = useMonitoringStore();
+  return Object.assign(store, { refresh: store.checkForMonitoredEndpoints });
 };
 
-const autoRefresh = useAutoRefresh("monitoringStoreMonitoredEndpoints", refresh, 5000);
-
-export default () => {
-  store = useMonitoringStore();
-  autoRefresh();
-  return { store };
-};
+export default useStoreAutoRefresh("monitoringStoreMonitoredEndpoints", useMonitoringStoreWithRefresh, 5000).autoRefresh;

src/Frontend/src/composables/useRemoteInstancesAutoRefresh.ts

@@ -1,4 +1,4 @@
 import { useRemoteInstancesStore } from "@/stores/RemoteInstancesStore";
 import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default useStoreAutoRefresh("remoteInstances", useRemoteInstancesStore, 5000);
+export default useStoreAutoRefresh("remoteInstances", useRemoteInstancesStore, 5000).autoRefresh;

src/Frontend/src/stores/AuditStore.ts

@@ -33,7 +33,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     try {
       // Fetch the latest 10 messages and check if any are successful
       // todo: ideally we would want to filter successful messages server-side, but the API doesn't currently support that
-      const [, data] = await serviceControlStore.fetchTypedFromServiceControl<Message[]>(`messages2/?page_size=10&sort=time_sent&direction=desc`);
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<Message[]>(`messages2/?page_size=10&sort=time_sent&direction=desc`);
       hasSuccessfulMessages.value = data?.some((msg) => msg.status === MessageStatus.Successful) ?? false;
     } catch {
       hasSuccessfulMessages.value = false;

src/Frontend/src/stores/MonitoringStore.ts

@@ -72,12 +72,12 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
 
   async function checkForMonitoredEndpoints() {
     try {
-      if (!serviceControlStore.isMonitoringEnabled || connectionStore.monitoringConnectionState.unableToConnect) {
+      if (!monitoringClient.isMonitoringEnabled || connectionStore.monitoringConnectionState.unableToConnect) {
         hasMonitoredEndpoints.value = false;
         return;
       }
       // Minimal query: just need to check if any endpoints exist
-      const [, data] = await serviceControlStore.fetchTypedFromMonitoring<Endpoint[]>(`monitored-endpoints?history=1`);
+      const data = await monitoringClient.getMonitoredEndpoints(1);
       hasMonitoredEndpoints.value = (data?.length ?? 0) > 0;
     } catch {
       hasMonitoredEndpoints.value = false;

src/Frontend/src/stores/RemoteInstancesStore.ts

@@ -1,22 +1,17 @@
-import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
-import { ref, watch } from "vue";
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref } from "vue";
 import { RemoteInstance } from "@/resources/RemoteInstance";
-import { useServiceControlStore } from "./ServiceControlStore";
+import serviceControlClient from "@/components/serviceControlClient";
 
 export const useRemoteInstancesStore = defineStore("RemoteInstancesStore", () => {
   const remoteInstances = ref<RemoteInstance[] | null>(null);
 
-  const serviceControlStore = useServiceControlStore();
-  const { serviceControlUrl } = storeToRefs(serviceControlStore);
-
   async function refresh() {
-    if (!serviceControlUrl.value) return;
-
-    const response = await serviceControlStore.fetchFromServiceControl("configuration/remotes");
+    const response = await serviceControlClient.fetchFromServiceControl("configuration/remotes");
     remoteInstances.value = await response.json();
   }
 
-  watch(serviceControlUrl, refresh, { immediate: true });
+  refresh();
 
   return {
     remoteInstances,