refactor(reference-store): remove and refactor deprecated reference-store

apps/web/src/api-clients/inventory/region/composables/use-region-api.ts

@@ -2,6 +2,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { StatResponse } from '@/api-clients/_common/schema/api-verbs/stat';
+import type { RegionGetParameters } from '@/api-clients/inventory/region/schema/api-verbs/get';
 import type { RegionListParameters } from '@/api-clients/inventory/region/schema/api-verbs/list';
 import type { RegionStatParameters } from '@/api-clients/inventory/region/schema/api-verbs/stat';
 import type { RegionModel } from '@/api-clients/inventory/region/schema/model';
@@ -10,6 +11,7 @@ export const useRegionApi = () => {
     const actions = {
         list: SpaceConnector.clientV2.inventory.region.list<RegionListParameters, ListResponse<RegionModel>>,
         stat: SpaceConnector.clientV2.inventory.region.stat<RegionStatParameters, StatResponse>,
+        get: SpaceConnector.clientV2.inventory.region.get<RegionGetParameters, RegionModel>,
     };
 
     return {

apps/web/src/api-clients/inventory/region/schema/api-verbs/get.ts

@@ -0,0 +1,3 @@
+export interface RegionGetParameters {
+    region_id: string;
+}

apps/web/src/common/components/select/DataSelector.vue

@@ -11,17 +11,22 @@ import type { MenuAttachHandler } from '@cloudforet/mirinae/types/hooks/use-cont
 
 import type { DataSelectorItem } from '@/common/components/select/type';
 
-const props = defineProps<{
+interface Props {
     label?: string;
     menu?: DataSelectorItem[];
     handler?: MenuAttachHandler<DataSelectorItem>;
     showSelectMarker?: boolean;
     multiSelectable?: boolean;
     selected?: DataSelectorItem[];
-}>();
-const emit = defineEmits<{(e: 'update:selected', value: DataSelectorItem[]): void;
+}
+interface Emits {
+    (e: 'update:selected', value: DataSelectorItem[]): void;
     (e: 'update:search-text', value: string): void;
-}>();
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
 
 const slots = useSlots();
 
@@ -71,39 +76,37 @@ watch([() => props.menu, () => props.handler, () => props.selected], () => {
 </script>
 
 <template>
-    <div>
-        <div class="flex flex-col gap-2">
-            <p-field-title class="py-0 px-3"
-                           :label="props.label"
-                           required
-            />
-            <p-context-menu :menu="refinedMenu"
-                            class="data-selector-context-menu"
-                            :loading="loading"
-                            :search-text="searchText"
-                            searchable
-                            :selected="selected"
-                            :show-select-marker="props.showSelectMarker"
-                            :multi-selectable="props.multiSelectable"
-                            @click-show-more="showMoreMenu()"
-                            @update:search-text="handleUpdateSearchText"
-                            @update:selected="handleUpdateSelected"
+    <div class="flex flex-col gap-2">
+        <p-field-title class="py-0 px-3"
+                       :label="props.label"
+                       required
+        />
+        <p-context-menu :menu="refinedMenu"
+                        class="data-selector-context-menu"
+                        :loading="loading"
+                        :search-text="searchText"
+                        searchable
+                        :selected="selected"
+                        :show-select-marker="props.showSelectMarker"
+                        :multi-selectable="props.multiSelectable"
+                        @click-show-more="showMoreMenu()"
+                        @update:search-text="handleUpdateSearchText"
+                        @update:selected="handleUpdateSelected"
+        >
+            <template #header>
+                <slot name="context-menu-header" />
+            </template>
+            <template #no-data-format>
+                <slot name="no-data-area" />
+            </template>
+            <template v-for="(_, slot) of menuSlots"
+                      #[slot]="scope"
             >
-                <template #header>
-                    <slot name="context-menu-header" />
-                </template>
-                <template #no-data-format>
-                    <slot name="no-data-area" />
-                </template>
-                <template v-for="(_, slot) of menuSlots"
-                          #[slot]="scope"
-                >
-                    <slot :name="`menu-${slot}`"
-                          v-bind="scope"
-                    />
-                </template>
-            </p-context-menu>
-        </div>
+                <slot :name="`menu-${slot}`"
+                      v-bind="scope"
+                />
+            </template>
+        </p-context-menu>
     </div>
 </template>
 

apps/web/src/common/modules/custom-table/custom-field-modal/composables/use-provider-list.ts

@@ -0,0 +1,34 @@
+import { computed } from 'vue';
+
+import { useProviderApi } from '@/api-clients/identity/provider/composables/use-provider-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const useProviderList = () => {
+    const { providerAPI } = useProviderApi();
+    const { key, params } = useServiceQueryKey('identity', 'provider', 'list', {
+        params: {
+            query: {
+                only: ['provider', 'name', 'icon'],
+            },
+        },
+    });
+
+    const { data, isFetching } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => providerAPI.list(params.value),
+        select: (response) => (response.results ?? []).map((provider) => ({
+            label: provider.alias || provider.name,
+            name: provider.provider,
+            image: provider.icon,
+        })),
+        staleTime: 1000 * 60 * 3,
+        gcTime: 1000 * 60 * 30,
+    }, ['WORKSPACE', 'DOMAIN']);
+
+
+    return {
+        providerList: computed(() => data.value ?? []),
+        loading: isFetching,
+    };
+};

apps/web/src/common/modules/custom-table/custom-field-modal/modules/SelectCloudServiceTagColumns.vue

@@ -29,60 +29,69 @@ import type {
     QueryItem, ValueHandlerMap, ValueHandler, KeyItemSet,
 } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProviderItem, ProviderReferenceMap } from '@/store/reference/provider-reference-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useProviderList } from '@/common/modules/custom-table/custom-field-modal/composables/use-provider-list';
 import { TAGS_PREFIX } from '@/common/modules/custom-table/custom-field-modal/config';
 
-const allReferenceStore = useAllReferenceStore();
 
-const props = withDefaults(defineProps<{
+type Provider = {
+    label: string;
+    key: string;
+    imageUrl?: string;
+    icon?: string;
+};
+
+interface Props {
     selectedTagKeys?: string[];
     options?: {
         provider?: string;
         cloudServiceGroup?: string;
         cloudServiceType?: string;
     };
     isServerPage?: boolean;
-}>(), {
+}
+
+interface Emits {
+    (e: 'update:selected-tag-keys', tagKeys: string[]): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
     selectedTagKeys: () => [],
     options: () => ({}),
     isServerPage: false,
 });
 
-const emit = defineEmits<{(e: 'update:selected-tag-keys', tagKeys: string[]): void}>();
+const emit = defineEmits<Emits>();
+
 
 /* providers */
-const providersMap = computed<ProviderReferenceMap>(() => ({
-    ...allReferenceStore.getters.provider,
-    custom: {
-        label: 'Custom',
-        key: 'custom',
-        icon: 'ic_cloud-filled',
-    },
+const { providerList } = useProviderList();
+const providersMap = computed<Record<string, Provider>>(() => ({
+    ...providerList.value.reduce((acc, provider) => {
+        acc[provider.name] = provider;
+        return acc;
+    }, {
+        custom: {
+            label: 'Custom',
+            key: 'custom',
+            icon: 'ic_cloud-filled',
+        },
+    }),
 }));
-const providers = computed<ProviderItem[]>(() => Object.values(providersMap.value));
-const providerKeys = computed<string[]>(() => providers.value.map((provider) => provider.key));
+const providerKeys = computed<string[]>(() => providerList.value.map((provider) => provider.name));
 
 /* key items */
 const keyItemSets = computed<KeyItemSet[]>(() => [{
     title: 'Provider',
-    items: [
-        ...providers.value.map((provider) => ({
-            label: provider.label,
-            name: provider.key,
-            imageUrl: provider.key !== 'custom' ? provider.icon : undefined,
-            icon: provider.key === 'custom' ? provider.icon : undefined,
-        })),
-    ],
+    items: providerList.value,
 }]);
 
 /* value handler */
 const valueHandlerMap = computed<ValueHandlerMap>(() => {
     const result = { custom: getTags };
-    providers.value.forEach((provider) => {
-        result[provider.key] = getTags;
+    providerList.value.forEach((provider) => {
+        result[provider.name] = getTags;
     });
     return result;
 });
@@ -127,7 +136,7 @@ const getQueryItemsFromTagKeys = (tagKeys: string[]): QueryItem[] => tagKeys.map
     const value = query.slice(dotPosition + 1);
     return {
         key: {
-            label: providersMap.value[key].label,
+            label: providersMap.value[key]?.label,
             name: key,
         },
         value: {

apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue

@@ -12,11 +12,11 @@ import {
 } from '@cloudforet/mirinae';
 import type { ContextMenuType } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
+
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import type { DisplayMenu } from '@/store/menu/type';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 
 import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
@@ -26,6 +26,7 @@ import BetaMark from '@/common/components/marks/BetaMark.vue';
 import NewMark from '@/common/components/marks/NewMark.vue';
 import UpdateMark from '@/common/components/marks/UpdateMark.vue';
 import { useCurrentMenuId } from '@/common/composables/current-menu-id';
+import { useCostDataSourceMap } from '@/common/composables/data-source/use-cost-data-source-map';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
@@ -37,14 +38,14 @@ interface GNBMenuType extends DisplayMenu {
     disabled?: boolean;
 }
 
-const allReferenceStore = useAllReferenceStore();
-const allReferenceGetters = allReferenceStore.getters;
 const appContextStore = useAppContextStore();
 const gnbStore = useGnbStore();
 const gnbGetters = gnbStore.getters;
 const userWorkspaceStore = useUserWorkspaceStore();
 const userWorkspaceGetters = userWorkspaceStore.getters;
 const { getAllMenuList } = useAllMenuList();
+const { getCostDataSourceMap } = useCostDataSourceMap();
+
 
 const route = useRoute();
 const router = useRouter();
@@ -57,21 +58,21 @@ const storeState = reactive({
     isHideNavRail: computed(() => gnbGetters.isHideNavRail),
     isMinimizeNavRail: computed(() => gnbGetters.isMinimizeNavRail),
     currentWorkspaceId: computed(() => userWorkspaceGetters.currentWorkspaceId),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceGetters.costDataSource),
 });
 
 const noParentsMenuList:MenuId[] = [MENU_ID.WORKSPACE_HOME, MENU_ID.DASHBOARDS, MENU_ID.PROJECT, MENU_ID.SERVICE_ACCOUNT];
 
 const state = reactive({
     isInit: false as boolean|undefined,
+    costDataSourceMap: undefined as Record<string, CostDataSourceModel> | undefined,
     isHovered: false,
     isMobileSize: computed<boolean>(() => width.value < screens.mobile.max),
     isMenuDescription: undefined as boolean | undefined,
     gnbMenuList: computed<GNBMenuType[]|undefined>(() => {
         let results = [] as GNBMenuType[];
         const allMenuList = getAllMenuList(route, router);
         const menuList = allMenuList.filter((d) => !d.hideOnGNB);
-        if (state.isInit && isEmpty(storeState.costDataSource)) {
+        if (state.isInit && isEmpty(state.costDataSourceMap ?? {})) {
             results = removeCostExplorerFromMenuList(menuList);
         } else results = menuList;
         return results;
@@ -144,6 +145,8 @@ const removeCostExplorerFromMenuList = (list: GNBMenuType[]) => {
 
 onMounted(async () => {
     state.isInit = true;
+    const costDataSourceMap = await getCostDataSourceMap();
+    state.costDataSourceMap = costDataSourceMap;
 });
 </script>
 

apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue

@@ -108,14 +108,8 @@ const handleClickBreadcrumbsDropdownItem = (item: MenuItem) => {
     }
 };
 
-watch(() => state.selectedMenuId, async (selectedMenuId) => {
+watch(() => state.selectedMenuId, async () => {
     await gnbStore.initState();
-
-    if (selectedMenuId === MENU_ID.COST_ANALYSIS) {
-        await gnbStore.fetchCostQuerySet();
-    } else if (state.selectedMenuId === MENU_ID.METRIC_EXPLORER) {
-        await gnbStore.fetchMetricExample();
-    }
 }, { immediate: true });
 watch(() => state.currentMenuId, async () => {
     if (state.selectedMenuId === MENU_ID.SECURITY || state.selectedMenuId === MENU_ID.COST_ANALYSIS) return;