Refactor functionality from serviceServiceControl into stores/views (#2667)

Author: PhilBastian

src/Frontend/src/App.vue

@@ -4,12 +4,10 @@ import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
 import "bootstrap";
 import { useServiceControlUrls } from "@/composables/serviceServiceControlUrls";
-import { useServiceControlAutoRefresh } from "@/composables/serviceServiceControl";
 import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
 
 useServiceControlUrls();
-useServiceControlAutoRefresh();
 </script>
 
 <template>

src/Frontend/src/components/BackendChecksNotifications.vue

@@ -2,14 +2,21 @@
 import { computed, watch } from "vue";
 import { useRouter } from "vue-router";
 import "bootstrap";
-import { monitoringUrl, serviceControlUrl, useIsMonitoringDisabled } from "@/composables/serviceServiceControlUrls";
-import { monitoringConnectionState, connectionState, environment } from "@/composables/serviceServiceControl";
+import { monitoringUrl, serviceControlUrl, isMonitoringDisabled } from "@/composables/serviceServiceControlUrls";
 import routeLinks from "@/router/routeLinks";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
+import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
+import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
 
 const router = useRouter();
 
+const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
+const connectionState = connectionStore.connectionState;
+const monitoringConnectionState = connectionStore.monitoringConnectionState;
+const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
+const environment = environmentStore.environment;
+
 const primaryConnectionFailure = computed(() => connectionState.unableToConnect);
 const monitoringConnectionFailure = computed(() => monitoringConnectionState.unableToConnect);
 
@@ -27,7 +34,7 @@ watch(primaryConnectionFailure, (newValue, oldValue) => {
 
 watch(monitoringConnectionFailure, (newValue, oldValue) => {
   // Only watch the state change if monitoring is enabled
-  if (useIsMonitoringDisabled()) {
+  if (isMonitoringDisabled()) {
     return;
   }
 

src/Frontend/src/components/PageFooter.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { connectionState, environment, monitoringConnectionState, newVersions } from "../composables/serviceServiceControl";
 import { monitoringUrl, serviceControlUrl } from "../composables/serviceServiceControlUrls";
 import { license, licenseStatus } from "../composables/serviceLicense";
 import { LicenseStatus } from "@/resources/LicenseInfo";
 import routeLinks from "@/router/routeLinks";
 import { useConfiguration } from "@/composables/configuration";
 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";
+
+const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
+const connectionState = connectionStore.connectionState;
+const monitoringConnectionState = connectionStore.monitoringConnectionState;
+const { store: environmentAndVersionsStore } = useEnvironmentAndVersionsAutoRefresh();
+const newVersions = environmentAndVersionsStore.newVersions;
+const environment = environmentAndVersionsStore.environment;
 
 const isMonitoringEnabled = computed(() => {
   return monitoringUrl.value !== "!" && monitoringUrl.value !== "" && monitoringUrl.value !== null && monitoringUrl.value !== undefined;

src/Frontend/src/components/PageHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
-import { useIsMonitoringEnabled } from "@/composables/serviceServiceControlUrls";
+import { isMonitoringEnabled } from "@/composables/serviceServiceControlUrls";
 import routeLinks from "@/router/routeLinks";
 import CustomChecksMenuItem from "@/components/customchecks/CustomChecksMenuItem.vue";
 import HeartbeatsMenuItem from "@/components/heartbeats/HeartbeatsMenuItem.vue";
@@ -19,7 +19,7 @@ const menuItems = computed(
   () => [
   DashboardMenuItem,
   HeartbeatsMenuItem,
-  ...(useIsMonitoringEnabled() ? [MonitoringMenuItem] : []),
+  ...(isMonitoringEnabled() ? [MonitoringMenuItem] : []),
   AuditMenuItem,
   FailedMessagesMenuItem,
   CustomChecksMenuItem,

src/Frontend/src/components/ServiceControlAvailable.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import ConditionalRender from "@/components/ConditionalRender.vue";
-import { connectionState } from "@/composables/serviceServiceControl";
 import routeLinks from "@/router/routeLinks";
 import { serviceControlUrl } from "@/composables/serviceServiceControlUrls";
+import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
+
+const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
+const connectionState = connectionStore.connectionState;
 </script>
 
 <template>

src/Frontend/src/components/ServiceControlNotAvailable.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { connectionState } from "./../composables/serviceServiceControl";
 import { serviceControlUrl } from "./../composables/serviceServiceControlUrls";
 import routeLinks from "@/router/routeLinks";
+import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
+
+const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
+const connectionState = connectionStore.connectionState;
 </script>
 
 <template>

src/Frontend/src/components/audit/AuditListItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import routeLinks from "@/router/routeLinks";
 import Message, { MessageStatus } from "@/resources/Message";
-import { computed, defineProps } from "vue";
+import { computed } from "vue";
 import { formatDotNetTimespan } from "@/composables/formatUtils";
 import { useRouter, RouterLink } from "vue-router";
 import MessageStatusIcon from "@/components/audit/MessageStatusIcon.vue";

src/Frontend/src/components/audit/MessageStatusIcon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { dotNetTimespanToMilliseconds } from "@/composables/formatUtils";
 import Message, { MessageStatus } from "@/resources/Message";
-import { defineProps, computed } from "vue";
+import { computed } from "vue";
 
 const props = defineProps<{
   message: Message;

src/Frontend/src/components/audit/isAllMessagesSupported.ts

@@ -1,8 +1,8 @@
-import { computed } from "vue";
-import { useIsSupported } from "@/composables/serviceSemVer";
-import { environment } from "@/composables/serviceServiceControl";
+import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
 
 export const minimumSCVersionForAllMessages = "6.6.0";
-const isAllMessagesSupported = computed(() => useIsSupported(environment.sc_version, minimumSCVersionForAllMessages));
 
-export default isAllMessagesSupported;
+export default function useIsAllMessagesSupported() {
+  const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
+  return environmentStore.serviceControlIsGreaterThan(minimumSCVersionForAllMessages);
+}

src/Frontend/src/components/configuration/ConfigurationMenuItem.vue

@@ -6,20 +6,22 @@ import ExclamationMark from "@/components/ExclamationMark.vue";
 import { LicenseWarningLevel } from "@/composables/LicenseStatus";
 import { WarningLevel } from "@/components/WarningLevel";
 import routeLinks from "@/router/routeLinks";
-import { displayConnectionsWarning } from "@/components/configuration/displayConnectionsWarning";
 import { storeToRefs } from "pinia";
 import FAIcon from "@/components/FAIcon.vue";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
 import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoRefresh";
+import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { hasErrors } = storeToRefs(store);
 
+const { store: connectionStore } = useConnectionsAndStatsAutoRefresh();
+
 const displayWarn = computed(() => {
   return licenseStatus.warningLevel === LicenseWarningLevel.Warning;
 });
 const displayDanger = computed(() => {
-  return hasErrors.value || displayConnectionsWarning.value || licenseStatus.warningLevel === LicenseWarningLevel.Danger;
+  return hasErrors.value || connectionStore.displayConnectionsWarning || licenseStatus.warningLevel === LicenseWarningLevel.Danger;
 });
 </script>