chore: solve conflicts

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

Author: piggggggggy

apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue

@@ -3,7 +3,6 @@ import {
     computed, onMounted, reactive, watch,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
@@ -35,8 +34,6 @@ import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateGetters = widgetGenerateStore.getters;
 const widgetGenerateState = widgetGenerateStore.state;
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
@@ -101,7 +98,7 @@ const state = reactive({
 /* Api */
 const deleteWidget = async (widgetId: string) => {
     if (!widgetId) return;
-    const isPrivate = dashboardId.value?.startsWith('private');
+    const isPrivate = widgetId?.startsWith('private');
     const _fetcher = isPrivate
         ? api.privateWidgetAPI.delete
         : api.publicWidgetAPI.delete;

apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue

@@ -5,7 +5,6 @@ import {
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-import { useQuery } from '@tanstack/vue-query';
 import bytes from 'bytes';
 import { sortBy } from 'lodash';
 
@@ -22,6 +21,7 @@ import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data
 import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api';
 import type { DataTableLoadParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/load';
 import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
@@ -37,7 +37,7 @@ import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
 
 import { gray, white } from '@/styles/colors';
 
-import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardRefinedVars } from '@/services/_shared/dashboard/dashboard-detail/contextual-composables/use-dashboard-refined-vars';
 import { SIZE_UNITS } from '@/services/asset-inventory/constants/asset-analysis-constant';
 import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 import type { Granularity } from '@/services/cost-explorer/types/cost-explorer-query-type';
@@ -59,6 +59,8 @@ const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceStore = useAllReferenceStore();
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
+const { refinedVars } = useDashboardRefinedVars(dashboardId);
+
 const {
     privateDataTableAPI,
 } = usePrivateDataTableApi();
@@ -72,9 +74,6 @@ const {
 } = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
-const { dashboard } = useDashboardGetQuery({
-    dashboardId,
-});
 
 const storeState = reactive({
     selectedDataTableId: computed<string|undefined>(() => widgetGenerateState.selectedDataTableId),
@@ -256,22 +255,14 @@ const getSortIcon = (field: PreviewTableField) => {
     // return '';
 };
 
-// const getTimeDiffSubText = (field: PreviewTableField): string => {
-//     if (!state.dataInfo?.[field.name]) return '';
-//     const { timediff } = state.dataInfo[field.name];
-//     if (!timediff || !Object.entries(timediff ?? {}).length) return '';
-//     const [key, value] = Object.entries(timediff)[0];
-//     return `( ${value} ${key} )`;
-// };
-
 const { key: privateDataTableLoadQueryKey, params: privateDataTableLoadParams } = useServiceQueryKey('dashboard', 'private-data-table', 'load', {
     contextKey: computed(() => storeState.selectedDataTableId),
     params: computed<DataTableLoadParameters>(() => ({
         data_table_id: storeState.selectedDataTableId as string,
         granularity: state.selectedGranularity,
         sort: state.sortBy,
         page: state.page,
-        vars: dashboard.value?.vars,
+        vars: refinedVars.value,
     })),
 });
 
@@ -282,11 +273,11 @@ const { key: publicDataTableLoadQueryKey, params: publicDataTableLoadParams } =
         granularity: state.selectedGranularity,
         sort: state.sortBy,
         page: state.page,
-        vars: dashboard.value?.vars,
+        vars: refinedVars.value,
     })),
 });
 
-const queryResult = useQuery({
+const queryResult = useScopedQuery({
     queryKey: state.isPrivate ? privateDataTableLoadQueryKey.value : publicDataTableLoadQueryKey.value,
     queryFn: () => {
         if (!storeState.selectedDataTableId) {
@@ -300,7 +291,7 @@ const queryResult = useQuery({
     enabled: computed(() => storeState.selectedDataTableId !== undefined && state.selectedDataTable !== undefined),
     staleTime: WIDGET_LOAD_STALE_TIME,
     retry: 2,
-});
+}, ['WORKSPACE', 'DOMAIN']);
 
 const dataTableLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isFetching.value);
 const isError = computed<boolean>(() => queryResult.isError.value);

apps/web/src/common/modules/widgets/_composables/use-widget-load-query.ts

@@ -1,9 +1,9 @@
 import { computed, type ComputedRef } from 'vue';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import type { WidgetLoadParams, WidgetLoadSumParams } from '@/api-clients/dashboard/_types/widget-type';
 import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
 import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';

apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query.ts

@@ -1,8 +1,8 @@
+
+
 import type { ComputedRef } from 'vue';
 import { computed } from 'vue';
 
-import type { QueryKey } from '@tanstack/vue-query';
-
 import type { DashboardModel, DashboardUpdateParams } from '@/api-clients/dashboard/_types/dashboard-type';
 import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
 import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/get';
@@ -13,21 +13,22 @@ import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/publi
 import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import type { QueryKeyArray } from '@/query/query-key/_types/query-key-type';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 const STALE_TIME = 1000 * 60 * 5;
 
 interface UseDashboardGetQueryOptions {
-    dashboardId: ComputedRef<string|undefined>;
+    dashboardId?: ComputedRef<string|undefined>;
 }
 
 interface UseDashboardGetQueryReturn {
     dashboard: ComputedRef<PublicDashboardModel|PrivateDashboardModel|undefined>;
     isLoading: ComputedRef<boolean>;
     isError: ComputedRef<boolean>;
     keys: {
-        publicDashboardGetQueryKey: ComputedRef<QueryKey>;
-        privateDashboardGetQueryKey: ComputedRef<QueryKey>;
+        publicDashboardGetQueryKey: ComputedRef<QueryKeyArray>;
+        privateDashboardGetQueryKey: ComputedRef<QueryKeyArray>;
     };
     api: {
         publicDashboardAPI: ReturnType<typeof usePublicDashboardApi>['publicDashboardAPI'];
@@ -44,20 +45,20 @@ export const useDashboardGetQuery = ({
     const { publicDashboardAPI } = usePublicDashboardApi();
     const { privateDashboardAPI } = usePrivateDashboardApi();
 
-    const isPrivate = computed(() => !!dashboardId.value?.startsWith('private'));
+    const isPrivate = computed(() => !!dashboardId?.value?.startsWith('private'));
 
 
     /* Query Keys */
     const { key: publicDashboardGetQueryKey, params: publicDashboardGetParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'get', {
-        contextKey: computed(() => dashboardId.value),
+        contextKey: computed(() => dashboardId?.value),
         params: computed<PublicDashboardGetParameters>(() => ({
-            dashboard_id: dashboardId.value as string,
+            dashboard_id: dashboardId?.value as string,
         })),
     });
     const { key: privateDashboardGetQueryKey, params: privateDashboardGetParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'get', {
-        contextKey: computed(() => dashboardId.value),
+        contextKey: computed(() => dashboardId?.value),
         params: computed<PrivateDashboardGetParameters>(() => ({
-            dashboard_id: dashboardId.value as string,
+            dashboard_id: dashboardId?.value as string,
         })),
     });
 
@@ -70,7 +71,7 @@ export const useDashboardGetQuery = ({
             }
             return publicDashboardAPI.get(publicDashboardGetParams.value);
         },
-        enabled: computed(() => !!dashboardId.value && !isPrivate.value),
+        enabled: computed(() => !!dashboardId?.value && !isPrivate.value),
         staleTime: STALE_TIME,
     }, ['DOMAIN', 'WORKSPACE']);
     const privateDashboardQuery = useScopedQuery({
@@ -81,7 +82,7 @@ export const useDashboardGetQuery = ({
             }
             return privateDashboardAPI.get(privateDashboardGetParams.value);
         },
-        enabled: computed(() => !!dashboardId.value && isPrivate.value),
+        enabled: computed(() => !!dashboardId?.value && isPrivate.value),
         staleTime: STALE_TIME,
     }, ['WORKSPACE']);
 

apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts

@@ -4,10 +4,10 @@ import {
 
 import { useQueryClient } from '@tanstack/vue-query';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
 import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
 import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 import { useProjectPageContext } from '@/services/project/v2/composables/use-proejct-page-context';

apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts

@@ -4,10 +4,10 @@ import {
 
 import { useQueryClient } from '@tanstack/vue-query';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
 import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 import { useProjectPageContext } from '@/services/project/v2/composables/use-proejct-page-context';

apps/web/src/services/workspace-home/shared/components/AccountSummary.vue

@@ -13,10 +13,10 @@ import {
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { useServiceAccountApi } from '@/api-clients/identity/service-account/composables/use-service-account-api';
 import type { ServiceAccountListParameters } from '@/api-clients/identity/service-account/schema/api-verbs/list';
 import type { ServiceAccountModel } from '@/api-clients/identity/service-account/schema/model';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 

apps/web/src/services/workspace-home/shared/composables/use-asset-daily-updates.ts

@@ -6,8 +6,8 @@ import {
     groupBy, map, sumBy,
 } from 'lodash';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { useMetricDataApi } from '@/api-clients/inventory/metric-data/composables/use-metric-data-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 import { useCloudServiceTypeReferenceStore } from '@/store/reference/cloud-service-type-reference-store';

apps/web/src/services/workspace-home/shared/composables/use-asset-summary-providers.ts

@@ -3,8 +3,8 @@ import { computed } from 'vue';
 
 import dayjs from 'dayjs';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { useMetricDataApi } from '@/api-clients/inventory/metric-data/composables/use-metric-data-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 import { useProviderReferenceStore } from '@/store/reference/provider-reference-store';

apps/web/src/services/workspace-home/shared/composables/use-cost-chart-data.ts

@@ -4,9 +4,9 @@ import { computed } from 'vue';
 import dayjs from 'dayjs';
 import { sortBy } from 'lodash';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { useUnifiedCostApi } from '@/api-clients/cost-analysis/unified-cost/composables/use-unified-cost-api';
 import type { UnifiedCostAnalyzeParameters } from '@/api-clients/cost-analysis/unified-cost/schema/api-verbs/analyze';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 import type { Currency } from '@/store/display/type';

apps/web/src/services/workspace-home/shared/composables/use-cost-data-source-query.ts

@@ -2,8 +2,8 @@ import type { Ref } from 'vue';
 
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { useDataSourceApi } from '@/api-clients/cost-analysis/data-source/composables/use-data-source-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 const dataSourceApiHelper = new ApiQueryHelper().setSort('workspace_id', false);

apps/web/src/services/workspace-home/shared/composables/use-cost-report-config-query.ts

@@ -2,10 +2,11 @@ import type { Ref } from 'vue';
 
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { useCostReportConfigApi } from '@/api-clients/cost-analysis/cost-report-config/composables/use-cost-report-config-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
+
 const costReportConfigApiHelper = new ApiQueryHelper().setSort('created_at', true);
 export const useCostReportConfigQuery = ({
     enabled,