diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchListItem.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchListItem.vue index 8b268fd7e5..9212eb624d 100644 --- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchListItem.vue +++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchListItem.vue @@ -5,6 +5,8 @@ import { PI, PTextHighlighting, PLink, PTooltip, } from '@cloudforet/mirinae'; +import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model'; + import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue'; import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modules/top-bar-search/store'; @@ -23,11 +25,10 @@ const props = withDefaults(defineProps(), { workspaceId: '', }); const topBarSearchStore = useTopBarSearchStore(); +const referenceMap = useAllReferenceDataModel(); +const workspaceMap = referenceMap.workspace; -const storeState = reactive({ - workspaceMap: computed(() => topBarSearchStore.storeState.workspaceMap), - currentWorkspaceId: computed(() => topBarSearchStore.storeState.currentWorkspaceId), -}); +const currentWorkspaceId = computed(() => topBarSearchStore.storeState.currentWorkspaceId); const state = reactive({ tooltipText: computed(() => `${props.label}${props.description ? ` ∙ ${props.description}` : ''}`), @@ -61,18 +62,18 @@ const state = reactive({ -
- - {{ storeState.workspaceMap[props.workspaceId]?.label }} + {{ workspaceMap[props.workspaceId]?.label || props.workspaceId }}
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue index c469921b87..7466e9391b 100644 --- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue +++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue @@ -35,7 +35,6 @@ const { getReferenceLocation } = useReferenceRouter(); const { mutateAsync: deleteRecent } = useRecentDelete(); const storeState = reactive({ - workspaceMap: computed(() => topBarSearchStore.storeState.workspaceMap), currentWorkspaceId: computed(() => topBarSearchStore.storeState.currentWorkspaceId), activeTab: computed(() => topBarSearchStore.state.activeTab), serviceAccountMap: computed(() => allReferenceStore.getters.serviceAccount), diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts index 34b3ea6203..3343a5135c 100644 --- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts +++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts @@ -12,12 +12,9 @@ import type { ResourceModel } from '@/api-clients/search/resource/schema/model'; import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store'; import ErrorHandler from '@/common/composables/error/errorHandler'; -import { useRecentStore } from '@/common/modules/navigations/stores/recent-store'; import { SEARCH_TAB } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config'; import type { SearchTab, StageWorkspace } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type'; import { tabResourceTypeMap } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type'; -import type { RecentItem } from '@/common/modules/navigations/type'; -import { recentNSearchTabMap } from '@/common/modules/navigations/type'; interface TopBarSearchStoreState { loading: boolean; @@ -25,7 +22,7 @@ interface TopBarSearchStoreState { isActivated: boolean; inputText: string; activeTab: SearchTab; - recentMenuList: RecentItem[]; + // recentMenuList: RecentItem[]; searchMenuList: ResourceModel[]; // workspace filter recentAccessedWorkspaces: string[]; @@ -35,7 +32,7 @@ interface TopBarSearchStoreState { export const useTopBarSearchStore = defineStore('top-bar-search', () => { const userWorkspaceStore = useUserWorkspaceStore(); const workspaceStoreState = userWorkspaceStore.$state; - const recentStore = useRecentStore(); + // const recentStore = useRecentStore(); const orderWorkspaceList = (workspaceList: any[]) => { if (!storeState.currentWorkspaceId) return workspaceList; @@ -56,7 +53,7 @@ export const useTopBarSearchStore = defineStore('top-bar-search', () => { isActivated: false, inputText: '', activeTab: 'service', - recentMenuList: [], + // recentMenuList: [], searchMenuList: [], // workspace filter recentAccessedWorkspaces: [], @@ -70,7 +67,7 @@ export const useTopBarSearchStore = defineStore('top-bar-search', () => { if (state.inputText) return state.inputText.trim(); return ''; }), - isRecentEmpty: computed(() => state.recentMenuList.length === 0), + // isRecentEmpty: computed(() => state.recentMenuList.length === 0), selectedWorkspaces: computed(() => state.stagedWorkspaces.filter((workspace) => workspace.isSelected).map((workspace) => workspace.workspaceId)), }); @@ -143,7 +140,7 @@ export const useTopBarSearchStore = defineStore('top-bar-search', () => { }; watch([() => getters.trimmedInputText, () => state.activeTab], (trimmedText) => { state.loading = true; - state.recentMenuList = []; + // state.recentMenuList = []; if (trimmedText) { state.searchMenuList = []; } @@ -157,16 +154,16 @@ export const useTopBarSearchStore = defineStore('top-bar-search', () => { () => state.allWorkspacesChecked, ], debounce(async ([trimmedText, workspaces, tab]) => { state.loading = true; - state.recentMenuList = []; - if (!trimmedText && storeState.currentWorkspaceId) { - const recentRes = await recentStore.fetchRecent({ - type: recentNSearchTabMap[tab], - workspaceIds: [storeState.currentWorkspaceId], - }); - if (tab !== SEARCH_TAB.SERVICE) state.recentMenuList = recentRes; - state.loading = false; - return; - } + // state.recentMenuList = []; + // if (!trimmedText && storeState.currentWorkspaceId) { + // const recentRes = await recentStore.fetchRecent({ + // type: recentNSearchTabMap[tab], + // workspaceIds: [storeState.currentWorkspaceId], + // }); + // if (tab !== SEARCH_TAB.SERVICE) state.recentMenuList = recentRes; + // state.loading = false; + // return; + // } state.searchMenuList = []; const isServiceTab = tab === SEARCH_TAB.SERVICE; @@ -179,9 +176,9 @@ export const useTopBarSearchStore = defineStore('top-bar-search', () => { state.loading = false; }, 500)); - watch(() => recentStore.state.totalCount, () => { - state.recentMenuList = recentStore.state.recentMenuList; - }); + // watch(() => recentStore.state.totalCount, () => { + // state.recentMenuList = recentStore.state.recentMenuList; + // }); return { diff --git a/apps/web/src/common/modules/navigations/type.ts b/apps/web/src/common/modules/navigations/type.ts index 2ed10a5c11..af19b15572 100644 --- a/apps/web/src/common/modules/navigations/type.ts +++ b/apps/web/src/common/modules/navigations/type.ts @@ -9,10 +9,10 @@ export const RECENT_TYPE = { DASHBOARD: 'DASHBOARD', CLOUD_SERVICE: 'CLOUD_SERVICE', CLOUD_SERVICE_TYPE: 'CLOUD_SERVICE_TYPE', - COST_ANALYSIS: 'COST_ANALYSIS', - METRIC_EXPLORER: 'METRIC_EXPLORER', SECURITY: 'SECURITY', + COST_ANALYSIS: 'COST_ANALYSIS', WORKSPACE: 'WORKSPACE', + // METRIC_EXPLORER: 'METRIC_EXPLORER', } as const; export type RecentType = typeof RECENT_TYPE[keyof typeof RECENT_TYPE]; export const recentNSearchTabMap = { @@ -23,8 +23,8 @@ export const recentNSearchTabMap = { dashboard: RECENT_TYPE.DASHBOARD, cloudService: RECENT_TYPE.CLOUD_SERVICE, cloudServiceType: RECENT_TYPE.CLOUD_SERVICE_TYPE, - costAnalysis: RECENT_TYPE.COST_ANALYSIS, - metricExplorer: RECENT_TYPE.METRIC_EXPLORER, + // costAnalysis: RECENT_TYPE.COST_ANALYSIS, + // metricExplorer: RECENT_TYPE.METRIC_EXPLORER, } as const; export interface RecentConfig { diff --git a/apps/web/src/common/modules/user-config/recent/use-recent-delete.ts b/apps/web/src/common/modules/user-config/recent/use-recent-delete.ts index 00be05848a..3abf2ed765 100644 --- a/apps/web/src/common/modules/user-config/recent/use-recent-delete.ts +++ b/apps/web/src/common/modules/user-config/recent/use-recent-delete.ts @@ -2,7 +2,6 @@ import { computed } from 'vue'; import { useMutation, useQueryClient } from '@tanstack/vue-query'; -import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list'; import { useUserConfigApi } from '@/api-clients/config/user-config/composables/use-user-config-api'; import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key'; @@ -10,7 +9,6 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp import ErrorHandler from '@/common/composables/error/errorHandler'; import type { RecentType } from '@/common/modules/navigations/type'; -import type { RecentItem } from '@/common/modules/user-config/recent/use-recent-list'; @@ -41,27 +39,29 @@ export const useRecentDelete = () => { onSuccess: (_, variables) => { if (variables.name) { const _type = variables.name.split(':')[2] as RecentType; - queryClient.setQueryData( - withSuffix(`console:recent:${_type}`), - (oldData: ListResponse) => { - const newData = (oldData?.results ?? []).filter((item) => item.name !== variables.name); - return { - ...oldData, - results: newData, - }; - }, - ); + queryClient.invalidateQueries({ queryKey: withSuffix(`console:recent:${_type}`) }); + // queryClient.setQueryData( + // withSuffix(`console:recent:${_type}`), + // (oldData: ListResponse) => { + // const newData = (oldData?.results ?? []).filter((item) => item.name !== variables.name); + // return { + // ...oldData, + // results: newData, + // }; + // }, + // ); } else { - queryClient.setQueryData( - withSuffix(`console:recent:${variables.type}`), - (oldData: ListResponse) => { - const newData = (oldData?.results ?? []).filter((item) => item.data.id !== variables.itemId); - return { - ...oldData, - results: newData, - }; - }, - ); + queryClient.invalidateQueries({ queryKey: withSuffix(`console:recent:${variables.type}`) }); + // queryClient.setQueryData( + // withSuffix(`console:recent:${variables.type}`), + // (oldData: ListResponse) => { + // const newData = (oldData?.results ?? []).filter((item) => item.data.id !== variables.itemId); + // return { + // ...oldData, + // results: newData, + // }; + // }, + // ); } }, onError: (error) => { diff --git a/apps/web/src/common/modules/user-config/recent/use-recent-list.ts b/apps/web/src/common/modules/user-config/recent/use-recent-list.ts index b24ae4bc14..4593377c0f 100644 --- a/apps/web/src/common/modules/user-config/recent/use-recent-list.ts +++ b/apps/web/src/common/modules/user-config/recent/use-recent-list.ts @@ -70,7 +70,8 @@ export const useRecentList = ({ limit = 15 }: UseRecentListOptions = {}) => { { k: 'data.id', v: MENU_ID.WORKSPACE_HOME, o: '!=' }, // NOTE: Code corresponding to data stored as 'home-dashboard' { k: 'data.id', v: 'home-dashboard', o: '!=' }, - ]).setPageLimit(limit); + ]); + // .setPageLimit(limit); // TODO: find solution for this if (currentWorkspaceId.value) { recentListApiQuery.addFilter({ k: 'data.workspace_id', v: currentWorkspaceId.value, o: '=' }); @@ -184,15 +185,15 @@ export const useRecentList = ({ limit = 15 }: UseRecentListOptions = {}) => { }), }); - const { data: metricExplorerRecentList, isFetching: isFetchingMetricExplorerRecentList } = useRecentQueryByType({ - type: RECENT_TYPE.METRIC_EXPLORER, - params: computed(() => getRecentListParams.value(RECENT_TYPE.METRIC_EXPLORER)), - enabled: computed(() => { - if (!userId.value) return false; - if (!currentWorkspaceId.value) return false; - return true; - }), - }); + // const { data: metricExplorerRecentList, isFetching: isFetchingMetricExplorerRecentList } = useRecentQueryByType({ + // type: RECENT_TYPE.METRIC_EXPLORER, + // params: computed(() => getRecentListParams.value(RECENT_TYPE.METRIC_EXPLORER)), + // enabled: computed(() => { + // if (!userId.value) return false; + // if (!currentWorkspaceId.value) return false; + // return true; + // }), + // }); const { data: securityRecentList, isFetching: isFetchingSecurityRecentList } = useRecentQueryByType({ type: RECENT_TYPE.SECURITY, @@ -216,7 +217,7 @@ export const useRecentList = ({ limit = 15 }: UseRecentListOptions = {}) => { cloudServiceRecentList, cloudServiceTypeRecentList, costAnalysisRecentList, - metricExplorerRecentList, + // metricExplorerRecentList, securityRecentList, workspaceRecentLoading: isFetchingWorkspaceRecentList, recentLoading: computed(() => isFetchingMenuRecentList.value @@ -230,7 +231,7 @@ export const useRecentList = ({ limit = 15 }: UseRecentListOptions = {}) => { || isFetchingCloudServiceRecentList.value || isFetchingCloudServiceTypeRecentList.value || isFetchingCostAnalysisRecentList.value - || isFetchingMetricExplorerRecentList.value + // || isFetchingMetricExplorerRecentList.value || isFetchingSecurityRecentList.value), }; }; diff --git a/apps/web/src/lib/helper/router-recent-helper.ts b/apps/web/src/lib/helper/router-recent-helper.ts index e2cf62139d..ef5fe6e1bc 100644 --- a/apps/web/src/lib/helper/router-recent-helper.ts +++ b/apps/web/src/lib/helper/router-recent-helper.ts @@ -1,9 +1,14 @@ import type { Route } from 'vue-router'; +import type { QueryClient } from '@tanstack/vue-query'; + +import { useUserConfigApi as getUserConfigApi } from '@/api-clients/config/user-config/composables/use-user-config-api'; + import { getCompoundKeyWithManagedCostQuerySetFavoriteKey } from '@/lib/helper/config-data-helper'; import type { MenuId } from '@/lib/menu/config'; import { MENU_INFO_MAP } from '@/lib/menu/menu-info'; +// import ErrorHandler from '@/common/composables/error/errorHandler'; import type { RecentType } from '@/common/modules/navigations/type'; import { RECENT_TYPE } from '@/common/modules/navigations/type'; @@ -14,21 +19,50 @@ import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant'; import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant'; import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant'; + + +const recentSetHandler = async (recentConfig: RecentConfig, queryClient: QueryClient) => { + const { userConfigAPI } = getUserConfigApi(); + const { itemType, workspaceId, itemId } = recentConfig; + + try { + await userConfigAPI.set({ + name: `console:recent:${itemType}:${workspaceId}:${itemId}`, + data: { + id: itemId, + workspace_id: workspaceId, + type: itemType, + label: itemId, + }, + }); + queryClient.invalidateQueries({ queryKey: ['workspace', workspaceId, 'config', 'user-config', 'list', `console:recent:${itemType}`] }); + } catch (e) { + // ErrorHandler.handleError(e); + console.error(e); + } +}; + + interface RecentConfig { itemType: RecentType; workspaceId: string; itemId: string; updatedAt?: string; } -export const getRecentConfig = (to: Route): RecentConfig | undefined => { + + + +export const setRecentConfig = async (to: Route, queryClient: QueryClient) => { const workspaceId = to.params.workspaceId; + /* DASHBOARD */ if (to.name === DASHBOARDS_ROUTE.DETAIL._NAME) { const dashboardId = to?.params?.dashboardId; - if (!dashboardId) return undefined; + if (!dashboardId) return; const isPublicDashboard = dashboardId.startsWith('public'); - if (isPublicDashboard) return { itemType: RECENT_TYPE.DASHBOARD, workspaceId, itemId: dashboardId }; - return undefined; + if (isPublicDashboard) { + await recentSetHandler({ itemType: RECENT_TYPE.DASHBOARD, workspaceId, itemId: dashboardId }, queryClient); + } } /* ClOUD SERVICE */ @@ -36,8 +70,8 @@ export const getRecentConfig = (to: Route): RecentConfig | undefined => { const provider = to?.params?.provider; const group = to?.params?.group; const name = to?.params?.name; - if (!provider || !group || !name) return undefined; - return { itemType: RECENT_TYPE.CLOUD_SERVICE_TYPE, workspaceId, itemId: `${provider}.${group}.${name}` }; + if (!provider || !group || !name) return; + await recentSetHandler({ itemType: RECENT_TYPE.CLOUD_SERVICE_TYPE, workspaceId, itemId: `${provider}.${group}.${name}` }, queryClient); } /* SECURITY */ @@ -45,52 +79,53 @@ export const getRecentConfig = (to: Route): RecentConfig | undefined => { const provider = to?.params?.provider; const group = to?.params?.group; const name = to?.params?.name; - if (!provider || !group || !name) return undefined; - return { itemType: RECENT_TYPE.SECURITY, workspaceId, itemId: `${provider}.${group}.${name}` }; + if (!provider || !group || !name) return; + await recentSetHandler({ itemType: RECENT_TYPE.SECURITY, workspaceId, itemId: `${provider}.${group}.${name}` }, queryClient); } /* PROJECT GROUP */ if (to.name === PROJECT_ROUTE_V1._NAME) { const projectGroupId = to?.params?.projectGroupId; if (projectGroupId?.length) { - return { itemType: RECENT_TYPE.PROJECT_GROUP, workspaceId, itemId: projectGroupId as string }; + await recentSetHandler({ itemType: RECENT_TYPE.PROJECT_GROUP, workspaceId, itemId: projectGroupId as string }, queryClient); } } /* PROJECT */ if (to.name === PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME) { const projectId = to?.params?.id; - if (!projectId) return undefined; - return { itemType: RECENT_TYPE.PROJECT, workspaceId, itemId: projectId }; + if (!projectId) return; + await recentSetHandler({ itemType: RECENT_TYPE.PROJECT, workspaceId, itemId: projectId }, queryClient); } + /* SERVICE ACCOUNT */ if (to.name === SERVICE_ACCOUNT_ROUTE.DETAIL._NAME) { const serviceAccountId = to?.params?.serviceAccountId; const isTrustedAccount = serviceAccountId.startsWith('ta'); - if (!serviceAccountId) return undefined; - return { itemType: isTrustedAccount ? RECENT_TYPE.TRUSTED_ACCOUNT : RECENT_TYPE.SERVICE_ACCOUNT, workspaceId, itemId: serviceAccountId }; + if (!serviceAccountId) return; + await recentSetHandler({ itemType: isTrustedAccount ? RECENT_TYPE.TRUSTED_ACCOUNT : RECENT_TYPE.SERVICE_ACCOUNT, workspaceId, itemId: serviceAccountId }, queryClient); } + /* COST ANALYSIS */ if (to.name === COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME) { const dataSourceId = to?.params?.dataSourceId; const costQuerySetId = to?.params?.costQuerySetId; - if (!dataSourceId || !costQuerySetId) return undefined; + if (!dataSourceId || !costQuerySetId) return; if (MANAGED_COST_QUERY_SET_ID_LIST.includes(costQuerySetId)) { - return { itemType: RECENT_TYPE.COST_ANALYSIS, workspaceId, itemId: getCompoundKeyWithManagedCostQuerySetFavoriteKey(dataSourceId, costQuerySetId) }; + await recentSetHandler({ itemType: RECENT_TYPE.COST_ANALYSIS, workspaceId, itemId: getCompoundKeyWithManagedCostQuerySetFavoriteKey(dataSourceId, costQuerySetId) }, queryClient); } - return { itemType: RECENT_TYPE.COST_ANALYSIS, workspaceId, itemId: costQuerySetId }; + await recentSetHandler({ itemType: RECENT_TYPE.COST_ANALYSIS, workspaceId, itemId: costQuerySetId }, queryClient); } - if (to.name === ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME) { - const metricId = to?.params?.metricId; - if (!metricId) return undefined; - return { itemType: RECENT_TYPE.METRIC_EXPLORER, workspaceId, itemId: metricId }; - } + // if (to.name === ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME) { + // const metricId = to?.params?.metricId; + // if (!metricId) return undefined; + // return { itemType: RECENT_TYPE.METRIC_EXPLORER, workspaceId, itemId: metricId }; + // } /* MENU */ const menu = to.meta?.menuId && MENU_INFO_MAP[to.meta?.menuId as MenuId]; if (menu) { - return { itemType: RECENT_TYPE.SERVICE, workspaceId, itemId: to.meta?.menuId as MenuId }; + await recentSetHandler({ itemType: RECENT_TYPE.SERVICE, workspaceId, itemId: to.meta?.menuId as MenuId }, queryClient); } - return undefined; }; diff --git a/apps/web/src/lib/site-initializer/index.ts b/apps/web/src/lib/site-initializer/index.ts index 278bc8a0d9..a84ab23296 100644 --- a/apps/web/src/lib/site-initializer/index.ts +++ b/apps/web/src/lib/site-initializer/index.ts @@ -2,6 +2,7 @@ import { computed, watch } from 'vue'; import { QueryHelper } from '@cloudforet/core-lib/query'; +import { serviceQueryClient as queryClient } from '@/query/clients'; import { SpaceRouter } from '@/router'; import { setI18nLocale } from '@/translations'; @@ -47,6 +48,8 @@ const initRouter = (domainId?: string) => { const globalConfigSchemaStore = useGlobalConfigSchemaStore(pinia); const allReferenceStore = useAllReferenceStore(pinia); const authorizationStore = useAuthorizationStore(pinia); + + const afterGrantedCallback = () => allReferenceStore.flush(); const adminChildren = integralRoutes[0].children?.find( @@ -67,9 +70,9 @@ const initRouter = (domainId?: string) => { } if (!domainId) { - SpaceRouter.init(errorRoutes, afterGrantedCallback, authorizationStore); + SpaceRouter.init(errorRoutes, afterGrantedCallback, authorizationStore, queryClient); } else { - SpaceRouter.init(integralRoutes, afterGrantedCallback, authorizationStore); + SpaceRouter.init(integralRoutes, afterGrantedCallback, authorizationStore, queryClient); } isRouterInitialized = true; }; diff --git a/apps/web/src/router/index.ts b/apps/web/src/router/index.ts index a63525d659..b5927b16a7 100755 --- a/apps/web/src/router/index.ts +++ b/apps/web/src/router/index.ts @@ -2,6 +2,7 @@ import Vue from 'vue'; import type { NavigationGuardNext, Route, RouteConfig } from 'vue-router'; import VueRouter from 'vue-router'; +import type { QueryClient } from '@tanstack/vue-query'; import { clone } from 'lodash'; import { LocalStorageAccessor } from '@cloudforet/core-lib/local-storage-accessor'; @@ -25,7 +26,7 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp import type { useAuthorizationStore } from '@/store/authorization/authorization-store'; import { pinia } from '@/store/pinia'; -import { getRecentConfig } from '@/lib/helper/router-recent-helper'; +import { setRecentConfig } from '@/lib/helper/router-recent-helper'; import type { MenuId } from '@/lib/menu/config'; import { MENU_ID } from '@/lib/menu/config'; import { GTag } from '@/lib/site-analytics/gtag'; @@ -60,6 +61,7 @@ export class SpaceRouter { routes: RouteConfig[], afterGrantedCallback: () => void, authorizationStore: ReturnType, + queryClient: QueryClient, ) { if (SpaceRouter.router) throw new Error('Router init failed: Already initiated.'); @@ -156,20 +158,7 @@ export class SpaceRouter { return; } - const recent = getRecentConfig(to); - if (recent) { - SpaceConnector.clientV2.config.userConfig.set({ - name: `console:recent:${recent.itemType}:${recent.workspaceId}:${recent.itemId}`, - data: { - id: recent.itemId, - workspace_id: recent.workspaceId, - type: recent.itemType, - label: recent.itemId, - }, - }).catch((e) => { - console.error(e); - }); - } + setRecentConfig(to, queryClient); } }); diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue index c0e9c20c96..d7bfb83917 100644 --- a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue +++ b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue @@ -25,7 +25,7 @@ import LSBMenuItem from '@/common/modules/navigations/lsb/modules/LSBMenuItem.vu import LSBRouterMenuItem from '@/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue'; import type { LSBCollapsibleItem, LSBItem } from '@/common/modules/navigations/lsb/type'; import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type'; -import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store'; +import { useFavoriteList } from '@/common/modules/user-config/favorite/core/use-favorite-list'; import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type'; import { gray, yellow } from '@/styles/colors'; @@ -50,11 +50,14 @@ const referenceMap = useAllReferenceDataModel(); const assetInventorySettingsStore = useAssetInventorySettingsStore(); const allReferenceStore = useAllReferenceStore(); const appContextStore = useAppContextStore(); -const favoriteStore = useFavoriteStore(); -const favoriteGetters = favoriteStore.getters; const metricExplorerPageStore = useMetricExplorerPageStore(); const metricExplorerPageState = metricExplorerPageStore.state; +const { + metricItems: favoriteMetrics, + metricExampleItems: favoriteMetricExamples, +} = useFavoriteList(); + const storeState = reactive({ providers: computed(() => allReferenceStore.getters.provider), isAdminMode: computed(() => appContextStore.getters.isAdminMode), @@ -180,7 +183,7 @@ const { data: currentNamespaceMetrics, isLoading: currentNamespaceMetricsLoading const favoriteMetricItemsApiQueryHelper = new ApiQueryHelper(); const { data: favoriteMetricItems, isLoading: favoriteMetricItemsLoading } = useMetricListQuery({ params: computed(() => { - const _favoriteMetricIds = favoriteGetters.metricItems.map((item) => item.itemId); + const _favoriteMetricIds = favoriteMetrics.value?.map((item) => item.itemId); favoriteMetricItemsApiQueryHelper.setFilters([{ k: 'metric_id', v: _favoriteMetricIds, o: '=' }]); return { query: favoriteMetricItemsApiQueryHelper.data, @@ -190,7 +193,7 @@ const { data: favoriteMetricItems, isLoading: favoriteMetricItemsLoading } = use const metricExampleListApiQueryHelper = new ApiQueryHelper(); const { data: favoriteMetricExampleItems, isLoading: favoriteMetricExampleItemsLoading } = useMetricExampleListQuery({ params: computed(() => { - const _favoriteMetricExampleIds = favoriteGetters.metricExampleItems.map((item) => item.itemId); + const _favoriteMetricExampleIds = favoriteMetricExamples.value?.map((item) => item.itemId); metricExampleListApiQueryHelper.setFilters([{ k: 'example_id', v: _favoriteMetricExampleIds, o: '=' }]); return { query: metricExampleListApiQueryHelper.data, diff --git a/apps/web/src/services/asset-inventory/pages/MetricExplorerMainPage.vue b/apps/web/src/services/asset-inventory/pages/MetricExplorerMainPage.vue index b523e1923f..5c617e7464 100644 --- a/apps/web/src/services/asset-inventory/pages/MetricExplorerMainPage.vue +++ b/apps/web/src/services/asset-inventory/pages/MetricExplorerMainPage.vue @@ -12,30 +12,19 @@ import MetricImgVisualization from '@/assets/images/metric/img_visualization.png import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model'; import { i18n } from '@/translations'; -import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store'; -import { useUserStore } from '@/store/user/user-store'; - -import { useRecentStore } from '@/common/modules/navigations/stores/recent-store'; import type { RecentItem } from '@/common/modules/navigations/type'; -import { RECENT_TYPE } from '@/common/modules/navigations/type'; import MetricExplorerQueryFormSidebar from '@/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue'; import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant'; import { useMetricExplorerPageStore } from '@/services/asset-inventory/stores/metric-explorer-page-store'; -const recentStore = useRecentStore(); -const userWorkspaceStore = useUserWorkspaceStore(); const router = useRouter(); const metricExplorerPageStore = useMetricExplorerPageStore(); const metricExplorerPageState = metricExplorerPageStore.state; -const userStore = useUserStore(); const referenceMap = useAllReferenceDataModel(); -const storeState = reactive({ - language: computed(() => userStore.state.language), - currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId), -}); + const state = reactive({ cardList: computed(() => [ @@ -85,18 +74,6 @@ const handleClickLearnMore = () => { window.open('https://cloudforet.io/ko/docs/guides/asset-inventory/metric-explorer', '_blank'); }; -const fetchRecentList = async () => { - const recentList = await recentStore.fetchRecent({ - type: RECENT_TYPE.METRIC_EXPLORER, - workspaceIds: [storeState.currentWorkspaceId ?? ''], - limit: 10, - }); - state.recentList = recentList; -}; - -(async () => { - await fetchRecentList(); -})();