fix(dashboard-clone): solve dashboard clone bug (#5664)

* fix(dashboard-clone): solve dashboard clone bug 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 · b7c815e · b7c815e
1 parent 449cc9b
commit b7c815e
Show file tree

Hide file tree

Showing 16 changed files with 22 additions and 16 deletions.
diff --git a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
@@ -219,7 +219,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
@@ -115,7 +115,7 @@ const queryResult = useQuery({
             limit: MAX_COUNT,
         },
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/.../src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue b/.../src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
@@ -152,7 +152,7 @@ const queryResult = useQuery({
         ...(!isDateField(widgetOptionsState.xAxisInfo.data) && { page: { start: 1, limit: widgetOptionsState.xAxisInfo?.count } }),
         vars: props.dashboardVars,
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
@@ -176,7 +176,7 @@ const queryResult = useQuery({
         end: dateRange.value.end,
         vars: props.dashboardVars,
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue b/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
@@ -153,7 +153,7 @@ const queryResult = useQuery({
         start: dateRange.value.start,
         end: dateRange.value.end,
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
@@ -217,7 +217,7 @@ const queryResult = useQuery({
         ...(!isDateField(widgetOptionsState.xAxisInfo.data) && { page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count } }),
         vars: props.dashboardVars,
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
@@ -224,7 +224,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
@@ -208,7 +208,7 @@ const queryResults = useQueries({
                 end: dateRange.value.end,
                 vars: props.dashboardVars,
             }),
-            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
         {
@@ -220,7 +220,7 @@ const queryResults = useQueries({
                 end: state.comparisonDateRange.end,
                 vars: props.dashboardVars,
             }),
-            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && widgetOptionsState.comparisonInfo?.toggleValue),
+            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && widgetOptionsState.comparisonInfo?.toggleValue && !props.loadDisabled),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
     ],

diff --git a/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue b/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
@@ -236,7 +236,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
@@ -177,7 +177,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
@@ -217,7 +217,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/...ommon/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue b/...ommon/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
@@ -211,7 +211,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
@@ -215,7 +215,8 @@ const queryResults = useQueries({
             enabled: computed<boolean>(() => {
                 const widgetActive = props.widgetState !== 'INACTIVE';
                 const dataTableReady = !!state.dataTable;
-                return widgetActive && dataTableReady;
+                const loadDisabled = props.loadDisabled;
+                return widgetActive && dataTableReady && !loadDisabled;
             }),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
@@ -232,7 +233,9 @@ const queryResults = useQueries({
                 const widgetActive = props.widgetState !== 'INACTIVE';
                 const dataTableReady = !!state.dataTable;
                 const totalEnabled = !!widgetOptionsState.totalInfo?.toggleValue;
-                return widgetActive && dataTableReady && totalEnabled;
+                const loadDisabled = props.loadDisabled;
+
+                return widgetActive && dataTableReady && totalEnabled && !loadDisabled;
             }),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },

diff --git a/apps/web/src/common/modules/widgets/types/widget-display-type.ts b/apps/web/src/common/modules/widgets/types/widget-display-type.ts
@@ -39,6 +39,8 @@ export interface WidgetProps {
     disableRefreshOnLoading?: boolean;
     allReferenceTypeInfo: AllReferenceTypeInfo;
     disableManageButtons?: boolean;
+
+    loadDisabled?: boolean;
 }
 
 export interface WidgetEmit {

diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
@@ -536,6 +536,7 @@ onBeforeUnmount(() => {
                                :disable-refresh-on-variable-change="widgetGenerateState.showOverlay || dashboardDetailState.loadingDashboard"
                                :disable-manage-buttons="!isManageable"
                                :all-reference-type-info="state.allReferenceTypeInfo"
+                               :load-disabled="widgetGenerateState.showOverlay"
                                @mounted="handleWidgetMounted(widget.widget_id)"
                                @click-edit="handleOpenWidgetOverlay(widget, 'EDIT')"
                                @click-clone="handleCloneWidget(widget)"

diff --git a/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts b/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts
@@ -86,7 +86,7 @@ const _getSharedDataTableInfoList = (widgetDataTablesMap: Record<string, DataTab
                         data_tables: _dataTableIndices,
                     },
                 };
-            } else if (dt.operator === 'EVAL' || dt.operator === 'QUERY' || dt.operator === 'PIVOT' || dt.operator === 'VALUE_MAPPING' || dt.operator === 'ADD_LABELS') {
+            } else {
                 const _dataTableId = dt.options[dt.operator]?.data_table_id;
                 const _dataTableIdx = _dataTables.findIndex((d) => d.data_table_id === _dataTableId);
                 _sharedDataTable.options = {