fix(unified-cost-full-link): apply unified-cost full-data link (#5666)

* fix(unified-cost-full-link): apply unified-cost full-data link Signed-off-by: samuel.park <samuel.park@megazone.com> * refactor(data-table): refactor selection data-table Signed-off-by: samuel.park <samuel.park@megazone.com> * chore: small fix Signed-off-by: samuel.park <samuel.park@megazone.com> --------- Signed-off-by: samuel.park <samuel.park@megazone.com>
cloudforet-io · Feb 25, 2025 · d245a63 · d245a63
1 parent a1fa280
commit d245a63
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 8 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
@@ -290,9 +290,6 @@ const { mutateAsync: updateWidget } = useMutation({
             ? keys.privateWidgetQueryKey
             : keys.publicWidgetQueryKey;
         queryClient.setQueryData(widgetQueryKey.value, () => data);
-
-        showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_SUCCESS'), '');
-        widgetGenerateStore.setSelectedDataTableId(state.dataTableId);
     },
     onError: (e) => {
         showErrorMessage(e.message, e);
@@ -454,6 +451,8 @@ const handleUpdateDataTable = async () => {
             state: 'INACTIVE',
             options: sanitizedOptions,
         });
+        showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_SUCCESS'), '');
+        widgetGenerateStore.setSelectedDataTableId(state.dataTableId);
         await cascadeUpdateDataTable(result.data_table_id);
     }
     setTimeout(() => {

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
@@ -3,6 +3,7 @@
 import { computed, reactive } from 'vue';
 
 import { useMutation } from '@tanstack/vue-query';
+import { cloneDeep } from 'lodash';
 
 import {
     PIconButton, PI, PTextInput, PTooltip,
@@ -20,6 +21,7 @@ import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-wi
 import {
     DATA_TABLE_TYPE,
 } from '@/common/modules/widgets/_constants/data-table-constant';
+import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DataTableDataType } from '@/common/modules/widgets/types/widget-model';
@@ -44,6 +46,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 
 /* Query */
 const {
+    widget,
     dataTableList,
     fetcher,
     keys,
@@ -71,6 +74,15 @@ const handleSelectDataTable = async (dataTableId: string) => {
         showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.SELECT_DATA_TABLE_WARNING'), '');
         return;
     }
+    if (widgetGenerateState.selectedDataTableId === dataTableId) return;
+
+    const _widgetOptions = cloneDeep(widget.value?.options);
+    const sanitizedOptions = sanitizeWidgetOptions(_widgetOptions, widget.value?.widget_type, storeState.currentDataTable);
+    await updateWidget({
+        widget_id: widgetGenerateState.widgetId,
+        state: 'INACTIVE',
+        options: sanitizedOptions,
+    });
     widgetGenerateStore.setSelectedDataTableId(dataTableId);
 };
 const handleUpdateDataTableName = (value: string) => {
@@ -108,6 +120,19 @@ const handleClickNameConfirm = async () => {
 };
 
 /* Api */
+const { mutateAsync: updateWidget } = useMutation({
+    mutationFn: fetcher.updateWidgetFn,
+    onSuccess: (data) => {
+        const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
+            ? keys.privateWidgetQueryKey
+            : keys.publicWidgetQueryKey;
+        queryClient.setQueryData(widgetQueryKey.value, () => data);
+    },
+    onError: (e) => {
+        showErrorMessage(e.message, e);
+        ErrorHandler.handleError(e);
+    },
+});
 const { mutate: updateDataTable } = useMutation({
     mutationFn: fetcher.updateDataTableFn,
     onSuccess: async (data) => {

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -252,7 +252,6 @@ const { mutateAsync: updateWidget } = useMutation({
             ? keys.privateWidgetQueryKey
             : keys.publicWidgetQueryKey;
         queryClient.setQueryData(widgetQueryKey.value, () => data);
-        showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_SUCCESS'), '');
     },
     onError: (e) => {
         showErrorMessage(e.message, e);
@@ -432,6 +431,7 @@ const handleUpdateDataTable = async () => {
             state: 'INACTIVE',
             options: sanitizedOptions,
         });
+        showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_SUCCESS'), '');
         widgetGenerateStore.setSelectedDataTableId(result.data_table_id);
         await cascadeUpdateDataTable(result.data_table_id);
     }

diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts
@@ -27,6 +27,7 @@ import type { FullDataLink, WidgetFrameProps } from '@/common/modules/widgets/ty
 
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
 import type { MetricFilter } from '@/services/asset-inventory-v1/types/asset-analysis-type';
+import { UNIFIED_COST_KEY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
@@ -85,7 +86,7 @@ const getFullDataLocation = (dataTable: DataTableModel, widgetOptions?: WidgetPr
         ...convertConsoleFiltersToMetricFilter(dataTable?.options?.filter ?? []),
         ...dashboardVars,
     };
-    const _filter = dataTable?.source_type === DATA_SOURCE_DOMAIN.COST ? _costFilters : _assetFilters;
+    const _filter = (dataTable?.source_type === DATA_SOURCE_DOMAIN.COST || dataTable?.source_type === DATA_SOURCE_DOMAIN.UNIFIED_COST) ? _costFilters : _assetFilters;
 
     const _dateRange: DateRange = cloneDeep(dateRange);
     if (!_dateRange?.start) _dateRange.start = dateRange?.end;
@@ -105,7 +106,18 @@ const getFullDataLocation = (dataTable: DataTableModel, widgetOptions?: WidgetPr
             },
             query: _query,
         });
-    } if (dataTable?.source_type === DATA_SOURCE_DOMAIN.ASSET) {
+    }
+    if (dataTable?.source_type === DATA_SOURCE_DOMAIN.UNIFIED_COST) {
+        return getProperRouteLocation({
+            name: COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME,
+            params: {
+                dataSourceId: UNIFIED_COST_KEY,
+                costQuerySetId: DYNAMIC_COST_QUERY_SET_PARAMS,
+            },
+            query: _query,
+        });
+    }
+    if (dataTable?.source_type === DATA_SOURCE_DOMAIN.ASSET) {
         const _metricId = dataTable?.options?.[DATA_SOURCE_DOMAIN.ASSET]?.metric_id;
         if (_metricId) {
             return getProperRouteLocation({

diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue
@@ -183,7 +183,8 @@ const handleSelectUnifiedCostToggle = (value: boolean) => {
 };
 
 (() => {
-    costQuerySetStore.setUnifiedCostOn(storeState.isAdminMode);
+    const isUnifiedCostRoute = route.params.dataSourceId === UNIFIED_COST_KEY;
+    costQuerySetStore.setUnifiedCostOn(isUnifiedCostRoute || storeState.isAdminMode);
 })();
 
 </script>

diff --git a/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts b/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts
@@ -186,7 +186,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             console.error('setDashboardInfo failed', dashboardInfo);
             return;
         }
-        if (!!dashboardInfo.project_id && dashboardInfo.project_id !== '*') {
+        if (!!dashboardInfo.project_id && dashboardInfo.project_id !== '*' && dashboardInfo.project_id !== '-') {
             state.projectId = dashboardInfo.project_id;
         }
         state.vars = dashboardInfo.vars ?? {};