fix(alert-v2): solve service store bug (#5659)

Signed-off-by: samuel.park <[email protected]>

Author: piggggggggy

apps/web/src/lib/config/composables/use-is-alert-manager-v2-enabled.ts

@@ -1,16 +1,20 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
 import { useDomainStore } from '@/store/domain/domain-store';
+import { pinia } from '@/store/pinia';
 
 import config from '@/lib/config';
 
 /* NOTE:
 *  This hook will be removed or refactored once the global config is improved.
 * */
 
-export const useIsAlertManagerV2Enabled = (): boolean => {
-    const domainStore = useDomainStore();
+export const useIsAlertManagerV2Enabled = (): ComputedRef<boolean> => {
+    const domainStore = useDomainStore(pinia);
     const domainStoreState = domainStore.state;
 
     const enabledDomains = config.get('ADVANCED_SERVICE')?.alert_manager_v2 ?? [];
 
-    return enabledDomains.includes(domainStoreState.domainId);
+    return computed(() => enabledDomains.includes(domainStoreState.domainId));
 };

apps/web/src/services/project-v1/components/ProjectDetailTabHeader.vue

@@ -343,7 +343,7 @@ const getProjectAlertActivated = async () => {
 
 /* Watchers */
 watch(() => projectDetailPageGetters.projectType, async () => {
-    if (!isAlertManagerV2Enabled) {
+    if (!isAlertManagerV2Enabled.value) {
         await Promise.allSettled([
             getProjectAlertActivated(),
             listWebhooks(),

apps/web/src/services/project-v1/pages/ProjectDetailTabPage.vue

@@ -107,7 +107,7 @@ const singleItemTabState = reactive({
             name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
             label: i18n.t('PROJECT.DETAIL.TAB_SUMMARY'),
         },
-        ...(isAlertManagerV2Enabled ? [] : [
+        ...(isAlertManagerV2Enabled.value ? [] : [
             {
                 name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME,
                 label: i18n.t('PROJECT.DETAIL.TAB_ALERT'),

apps/web/src/services/project-v1/pages/ProjectSummaryPage.vue

@@ -54,7 +54,7 @@ const getProjectAlertConfig = async () => {
 };
 
 watch(() => props.id, () => {
-    if (!isAlertManagerV2Enabled) getProjectAlertConfig();
+    if (!isAlertManagerV2Enabled.value) getProjectAlertConfig();
 }, { immediate: true });
 </script>
 

apps/web/src/store/reference/escalation-policy-reference-store.ts

@@ -60,7 +60,7 @@ export const useEscalationPolicyReferenceStore = defineStore('reference-escalati
 
         const referenceMap: EscalationPolicyReferenceMap = {};
         try {
-            const fetcher = isAlertManagerV2Enabled
+            const fetcher = isAlertManagerV2Enabled.value
                 ? SpaceConnector.clientV2.alertManager.escalationPolicy.list<EscalationPolicyListParameters, ListResponse<EscalationPolicyModel>>({
                     query: {
                         only: ['escalation_policy_id', 'name', 'service_id'],

apps/web/src/store/reference/service-reference-store.ts

@@ -9,14 +9,12 @@ import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceListParameters } from '@/schema/alert-manager/service/api-verbs/list';
 import type { ServiceModel } from '@/schema/alert-manager/service/model';
 
-import { useDomainStore } from '@/store/domain/domain-store';
 import type {
     ReferenceLoadOptions, ReferenceItem, ReferenceMap,
     ReferenceTypeInfo,
 } from '@/store/reference/type';
 import { useUserStore } from '@/store/user/user-store';
 
-import config from '@/lib/config';
 import { useIsAlertManagerV2Enabled } from '@/lib/config/composables/use-is-alert-manager-v2-enabled';
 import { MANAGED_VARIABLE_MODELS } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
@@ -30,7 +28,6 @@ let lastLoadedTime = 0;
 
 export const useServiceReferenceStore = defineStore('reference-service', () => {
     const userStore = useUserStore();
-    const domainStore = useDomainStore();
     const isAlertManagerV2Enabled = useIsAlertManagerV2Enabled();
 
     const state = reactive({
@@ -52,9 +49,6 @@ export const useServiceReferenceStore = defineStore('reference-service', () => {
     });
 
     const load = async (options?: ReferenceLoadOptions) => {
-        const isAlertManagerVersionV2 = (config.get('ADVANCED_SERVICE')?.alert_manager_v2 ?? []).includes(domainStore.state.domainId);
-        if (!isAlertManagerVersionV2) return;
-
         const currentTime = new Date().getTime();
 
         if (
@@ -69,7 +63,7 @@ export const useServiceReferenceStore = defineStore('reference-service', () => {
             },
         };
 
-        if (!isAlertManagerV2Enabled) return;
+        if (!isAlertManagerV2Enabled.value) return;
         try {
             const { results } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>(params);
 

apps/web/src/store/reference/webhook-reference-store.ts

@@ -60,7 +60,7 @@ export const useWebhookReferenceStore = defineStore('reference-webhook', () => {
 
         const referenceMap: WebhookReferenceMap = {};
         try {
-            const fetcher = isAlertManagerV2Enabled
+            const fetcher = isAlertManagerV2Enabled.value
                 ? SpaceConnector.clientV2.alertManager.webhook.list<WebhookListParameters, ListResponse<WebhookModel>>
                 : SpaceConnector.clientV2.monitoring.webhook.list<WebhookListParametersV1, ListResponse<WebhookModelV1>>;