feat: update alert-manager

apps/web/package.json

@@ -46,6 +46,7 @@
     "@vueuse/core": "^10.7.2",
     "@vueuse/integrations": "^11.1.0",
     "@vvo/tzdb": "^6.4.1",
+    "console-vue-query-devtools-sdk": "^0.0.16",
     "animated-number-vue": "^1.0.0",
     "axios": "^1.8.2",
     "axios-auth-refresh": "^3.2.2",
@@ -112,7 +113,7 @@
     "postcss-config-custom": "*",
     "rollup-plugin-visualizer": "^5.9.0",
     "tsconfig": "*",
-    "vite": "^4.5.13",
+    "vite": "^4.5.14",
     "vite-plugin-stylelint": "^3.3.3",
     "vite-plugin-vue-type-imports": "^0.2.4",
     "vitest": "^3.0.8",

apps/web/src/App.vue

@@ -6,6 +6,9 @@ import {
 import type { Location } from 'vue-router';
 import { useRoute, useRouter } from 'vue-router/composables';
 
+import { useQueryClient } from '@tanstack/vue-query';
+import { ConsoleVueQueryDevtools } from 'console-vue-query-devtools-sdk';
+
 import { LocalStorageAccessor } from '@cloudforet/core-lib/local-storage-accessor';
 import {
     PNoticeAlert, PToastAlert, PIconModal, PSidebar, PDataLoader,
@@ -15,6 +18,7 @@ import { EXTERNAL_PAGE_ROUTE } from '@/router/constant';
 import { getRouteScope } from '@/router/helpers/route-helper';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useAuthorizationStore } from '@/store/authorization/authorization-store';
 import { SIDEBAR_TYPE } from '@/store/display/constant';
 import { useDisplayStore } from '@/store/display/display-store';
 import { useErrorStore } from '@/store/error/error-store';
@@ -37,6 +41,15 @@ import MobileGuideModal from '@/services/auth/components/MobileGuideModal.vue';
 import { AUTH_ROUTE } from '@/services/auth/routes/route-constant';
 import { LANDING_ROUTE } from '@/services/landing/routes/route-constant';
 
+if (import.meta.env.DEV) {
+    const queryClient = useQueryClient();
+    import('@/_dev-tools/vue-query-console-debug').then((mod) => mod.initVueQueryConsoleDebug(queryClient))
+        .catch((error) => {
+            console.error('Failed to load vue-query-console-debug module:', error);
+            console.error('Ensure the module exists and the path is correct.');
+        });
+}
+
 const router = useRouter();
 const route = useRoute();
 
@@ -56,6 +69,7 @@ const state = reactive({
 });
 
 const userStore = useUserStore();
+const authorizationStore = useAuthorizationStore();
 const appContextStore = useAppContextStore();
 const errorStore = useErrorStore();
 const globalUIStore = useGlobalUIStore();
@@ -74,7 +88,7 @@ const goToSignIn = async () => {
         name: AUTH_ROUTE.SIGN_OUT._NAME,
         query: { previousPath: route.fullPath },
     };
-    userStore.setCurrentGrantInfo(undefined);
+    authorizationStore.setCurrentGrantInfo(undefined);
     errorStore.setVisibleSessionExpiredError(false);
 
     await router.push(to);
@@ -104,6 +118,7 @@ watch(() => state.userId, (userId) => {
     <div v-cloak
          id="app"
     >
+        <console-vue-query-devtools />
         <template v-if="displayStore.state.isInitialized">
             <p-notice-alert group="noticeTopLeft" />
             <p-notice-alert group="noticeTopRight" />

apps/web/src/_dev-tools/vue-query-console-debug.ts

@@ -0,0 +1,166 @@
+import type { QueryClient, QueryKey, Query } from '@tanstack/vue-query';
+
+type QuerySummary = {
+    index: number;
+    queryKey: QueryKey;
+    gcTime: number;
+    observers: number;
+    data: unknown;
+    query: Query;
+    isActive: boolean;
+};
+interface DumpOptions {
+    appContext?: string;
+    resourceIdentifier?: string;
+    activeOnly?: boolean;
+    // TODO: Add sortBy, limit, showParamsSize, intentLabel support
+}
+
+
+export const initVueQueryConsoleDebug = (client: QueryClient) => {
+    const _summarizeQueries = (): QuerySummary[] => client.getQueryCache().getAll()
+        .sort((a, b) => {
+            const isActiveA = _isActive(a);
+            const isActiveB = _isActive(b);
+            return Number(isActiveB) - Number(isActiveA);
+        })
+        .map((query, index) => {
+            const data = query.state.data;
+            const observers = query.getObserversCount?.() ?? query.observers.length;
+
+            return {
+                index: index + 1,
+                queryKey: query.queryKey,
+                gcTime: query.gcTime,
+                observers,
+                data,
+                query,
+                isActive: _isActive(query),
+            };
+        });
+
+    const debugObject = {
+        /**
+         * Returns a raw summary of all queries in the cache.
+         */
+        getSummary: _summarizeQueries,
+        /**
+         * Logs a table summary of all queries.
+         * Includes appContext, resource path, context keys, and params.
+         */
+        dump: (options?: DumpOptions) => {
+            let summary = _summarizeQueries().map((q) => ({
+                index: q.index,
+                appContext: _extractAppContext(q.queryKey),
+                resourceIdentifier: _extractResourceIdentifier(q.queryKey),
+                contextKey: _extractContextKey(q.queryKey),
+                params: _extractParams(q.queryKey),
+                observers: q.observers,
+                isActive: q.isActive,
+            }));
+            if (options?.appContext) {
+                summary = summary.filter((q) => q.appContext.startsWith(options?.appContext ?? ''));
+            }
+            if (options?.resourceIdentifier) {
+                summary = summary.filter((q) => q.resourceIdentifier.startsWith(options?.resourceIdentifier ?? ''));
+            }
+            if (options?.activeOnly) {
+                summary = summary.filter((q) => q.isActive);
+            }
+            const result = Object.fromEntries(summary.map((q) => [`${q.index}`, {
+                appContext: q.appContext,
+                resourceIdentifier: q.resourceIdentifier,
+                contextKey: q.contextKey,
+                params: q.params,
+                observers: q.observers,
+                isActive: q.isActive,
+            }]));
+
+            console.table(result);
+        },
+        /**
+         * Logs full details for every query in the cache.
+         * Grouped and expanded in the browser console.
+         */
+        log: () => {
+            _summarizeQueries().forEach((q) => {
+                console.group(`Query #${q.index}`);
+                console.log('queryKey:', q.queryKey);
+                console.log('gcTime:', q.gcTime);
+                console.log('observers:', q.observers);
+                console.log('data:', q.data);
+                console.groupEnd();
+            });
+        },
+        /**
+         * Logs details for a specific query by its index in the cache.
+         */
+        inspect: (index: number) => {
+            const q = _summarizeQueries().find((query) => query.index === index);
+            if (!q) {
+                console.warn('Query index not found');
+                (window as any).__QUERY_DEBUG__.dump();
+                return;
+            }
+            console.group(`Inspecting Query #${index}`);
+            console.log('queryKey:', q.queryKey);
+            console.log('gcTime:', q.gcTime);
+            console.log('observers:', q.observers);
+            console.log('data:', q.data);
+            console.log('query:', q.query);
+            console.groupEnd();
+        },
+    };
+
+    (window as any).__QUERY_DEBUG__ = debugObject;
+};
+
+
+const _isActive = (query: Query) => {
+    const data = query.state.data;
+    return (data !== undefined && query.state.dataUpdatedAt > 0) || (query.options as { enabled?: boolean })?.enabled === true;
+};
+
+/* --------------------- Extractors --------------------- */
+
+const _extractAppContext = (key: QueryKey): string => {
+    if (!Array.isArray(key) || key.length === 0) return '';
+    if (key[0] === 'admin') return 'admin';
+    if (key.length < 2) return '';
+    if (key[0] === 'workspace') return `${key[1]}`;
+    return '';
+};
+
+const _extractResourceIdentifier = (key: QueryKey): string => {
+    if (!Array.isArray(key) || key.length < 4) return '';
+    if (key[0] === 'admin') return `${key[1]}/${key[2]}/${key[3]}`;
+    if (key.length < 5) return '';
+    if (key[0] === 'workspace') return `${key[2]}/${key[3]}/${key[4]}`;
+    return '';
+};
+
+const _extractContextKey = (key: QueryKey): string => {
+    if (!Array.isArray(key) || key.length < 5) return '';
+    const startIndex = key[0] === 'admin' ? 4 : 5;
+    const lastIndex = key.length - 1;
+    const hasParams = typeof key[lastIndex] === 'object' && !Array.isArray(key[lastIndex]) && key[lastIndex] !== null;
+
+    const contextPart = hasParams ? key.slice(startIndex, lastIndex) : key.slice(startIndex);
+    const parts = contextPart.filter((k) => typeof k === 'string' || typeof k === 'number');
+
+    return parts.join(', ');
+};
+
+const _extractParams = (key: QueryKey): string => {
+    if (!Array.isArray(key) || key.length < 5) return '';
+    if (key[0] === 'admin') {
+        const lastNamespace = key[key.length - 1];
+        return typeof lastNamespace === 'object' ? JSON.stringify(lastNamespace) : '';
+    }
+    if (key.length < 6) return '';
+    if (key[0] === 'workspace') {
+        const lastNamespace = key[key.length - 1];
+        return typeof lastNamespace === 'object' ? JSON.stringify(lastNamespace) : '';
+    }
+    return '';
+};

apps/web/src/api-clients/config/domain-config/composables/use-domain-config-api.ts

@@ -1,6 +1,5 @@
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import { useAPIQueryKey } from '@/api-clients/_common/composables/use-api-query-key';
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { DomainConfigCreateParameters } from '@/api-clients/config/domain-config/schema/api-verbs/create';
 import type { DomainConfigGetParameters } from '@/api-clients/config/domain-config/schema/api-verbs/get';
@@ -10,9 +9,6 @@ import type { DomainConfigUpdateParameters } from '@/api-clients/config/domain-c
 import type { DomainConfigModel } from '@/api-clients/config/domain-config/schema/model';
 
 export const useDomainConfigApi = () => {
-    const domainConfigQueryKey = useAPIQueryKey('config', 'domain-config', 'get');
-    const domainConfigListQueryKey = useAPIQueryKey('config', 'domain-config', 'list');
-
     const actions = {
         create: SpaceConnector.clientV2.config.domainConfig.create<DomainConfigCreateParameters, DomainConfigModel>,
         update: SpaceConnector.clientV2.config.domainConfig.update<DomainConfigUpdateParameters, DomainConfigModel>,
@@ -22,8 +18,6 @@ export const useDomainConfigApi = () => {
     };
 
     return {
-        domainConfigQueryKey,
-        domainConfigListQueryKey,
         domainConfigAPI: actions,
     };
 };