refactor the remaining service modules which contained internal state into stores/views (#2675)

Author: PhilBastian

src/Frontend/src/App.vue

@@ -3,11 +3,8 @@ import { RouterView } from "vue-router";
 import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
 import "bootstrap";
-import { useServiceControlUrls } from "@/composables/serviceServiceControlUrls";
 import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
-
-useServiceControlUrls();
 </script>
 
 <template>

src/Frontend/src/components/AutoRefreshDataView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T">
 import { onMounted, onUnmounted, ref, watch } from "vue";
-import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import ItemsPerPage from "@/components/ItemsPerPage.vue";
 import PaginationStrip from "@/components/PaginationStrip.vue";
 import type DataViewPageModel from "./DataViewPageModel";
+import { useServiceControlStore } from "@/stores/ServiceControlStore";
 
 const props = withDefaults(
   defineProps<{
@@ -20,6 +20,8 @@ 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);
 
@@ -35,7 +37,7 @@ watch(itemsPerPage, () => loadData());
 watch(pageNumber, () => loadData());
 
 async function loadData() {
-  const [response, data] = await useTypedFetchFromServiceControl<T[]>(`${props.apiUrl}?page=${pageNumber.value}&per_page=${itemsPerPage.value}`);
+  const [response, data] = await store.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

@@ -2,12 +2,13 @@
 import { computed, watch } from "vue";
 import { useRouter } from "vue-router";
 import "bootstrap";
-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";
+import { useServiceControlStore } from "@/stores/ServiceControlStore";
+import { storeToRefs } from "pinia";
 
 const router = useRouter();
 
@@ -16,6 +17,8 @@ const connectionState = connectionStore.connectionState;
 const monitoringConnectionState = connectionStore.monitoringConnectionState;
 const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
 const environment = environmentStore.environment;
+const serviceControlStore = useServiceControlStore();
+const { monitoringUrl, serviceControlUrl, isMonitoringDisabled } = storeToRefs(serviceControlStore);
 
 const primaryConnectionFailure = computed(() => connectionState.unableToConnect);
 const monitoringConnectionFailure = computed(() => monitoringConnectionState.unableToConnect);
@@ -34,7 +37,7 @@ watch(primaryConnectionFailure, (newValue, oldValue) => {
 
 watch(monitoringConnectionFailure, (newValue, oldValue) => {
   // Only watch the state change if monitoring is enabled
-  if (isMonitoringDisabled()) {
+  if (isMonitoringDisabled.value) {
     return;
   }
 

src/Frontend/src/components/BusyIndicator.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { licenseStatus, license } from "../composables/serviceLicense";
 import routeLinks from "@/router/routeLinks";
 import FAIcon from "@/components/FAIcon.vue";
 import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
+import { useLicenseStore } from "@/stores/LicenseStore";
+
+const licenseStore = useLicenseStore();
+const { licenseStatus, license } = licenseStore;
 </script>
 
 <template>

src/Frontend/src/components/LicenseExpired.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import ConditionalRender from "@/components/ConditionalRender.vue";
-import { licenseStatus } from "@/composables/serviceLicense";
 import LicenseExpired from "@/components/LicenseExpired.vue";
+import { useLicenseStore } from "@/stores/LicenseStore";
+
+const licenseStore = useLicenseStore();
+const { licenseStatus } = licenseStore;
 </script>
 
 <template>

src/Frontend/src/components/LicenseNotExpired.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { watch, onMounted } from "vue";
-import { useLicense } from "@/composables/serviceLicense";
 import { LicenseStatus } from "@/resources/LicenseInfo";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import routeLinks from "@/router/routeLinks";
 import { useRouter } from "vue-router";
-import { useConfiguration } from "@/composables/configuration";
+import { useConfigurationStore } from "@/stores/ConfigurationStore";
+import { storeToRefs } from "pinia";
+import { useLicenseStore } from "@/stores/LicenseStore";
 
 const router = useRouter();
-const { license, getOrUpdateLicenseStatus } = useLicense();
+const licenseStore = useLicenseStore();
+const license = licenseStore.license;
 
-const configuration = useConfiguration();
+const configurationStore = useConfigurationStore();
+const { configuration } = storeToRefs(configurationStore);
 
 function displayWarningMessage(licenseStatus: LicenseStatus) {
   const configurationRootLink = router.resolve(routeLinks.configuration.root).href;
@@ -57,7 +60,7 @@ watch(
 );
 
 onMounted(async () => {
-  await getOrUpdateLicenseStatus();
+  await licenseStore.refresh();
 });
 </script>
 <template>

src/Frontend/src/components/LicenseNotifications.vue

@@ -1,21 +1,26 @@
 <script setup lang="ts">
 import { computed } from "vue";
-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";
+import { useServiceControlStore } from "@/stores/ServiceControlStore";
+import { storeToRefs } from "pinia";
+import { useConfigurationStore } from "@/stores/ConfigurationStore";
+import { useLicenseStore } from "@/stores/LicenseStore";
 
 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 serviceControlStore = useServiceControlStore();
+const { serviceControlUrl, monitoringUrl } = storeToRefs(serviceControlStore);
+const licenseStore = useLicenseStore();
+const { licenseStatus, license } = licenseStore;
 
 const isMonitoringEnabled = computed(() => {
   return monitoringUrl.value !== "!" && monitoringUrl.value !== "" && monitoringUrl.value !== null && monitoringUrl.value !== undefined;
@@ -29,7 +34,8 @@ const scMonitoringAddressTooltip = computed(() => {
   return `Monitoring URL ${monitoringUrl.value}`;
 });
 
-const configuration = useConfiguration();
+const configurationStore = useConfigurationStore();
+const { configuration } = storeToRefs(configurationStore);
 </script>
 
 <template>

src/Frontend/src/components/PageFooter.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
-import { isMonitoringEnabled } from "@/composables/serviceServiceControlUrls";
 import routeLinks from "@/router/routeLinks";
 import CustomChecksMenuItem from "@/components/customchecks/CustomChecksMenuItem.vue";
 import HeartbeatsMenuItem from "@/components/heartbeats/HeartbeatsMenuItem.vue";
@@ -13,13 +12,17 @@ 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 { useServiceControlStore } from "@/stores/ServiceControlStore";
+import { storeToRefs } from "pinia";
 
+const serviceControlStore = useServiceControlStore();
+const { isMonitoringEnabled } = storeToRefs(serviceControlStore);
 // prettier-ignore
 const menuItems = computed(
   () => [
   DashboardMenuItem,
   HeartbeatsMenuItem,
-  ...(isMonitoringEnabled() ? [MonitoringMenuItem] : []),
+  ...(isMonitoringEnabled.value ? [MonitoringMenuItem] : []),
   AuditMenuItem,
   FailedMessagesMenuItem,
   CustomChecksMenuItem,

src/Frontend/src/components/PageHeader.vue

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