fix(widget): improve query-key with referenced dataTable map & apply …

…refetching scenario & solve bugs (#5428) * feat(widget-query-key): apply widget-load query-key for checking reference DT updating Signed-off-by: samuel.park <samuel.park@megazone.com> * feat(force-refetching): apply widget force refetching scenario Signed-off-by: samuel.park <samuel.park@megazone.com> * fix(pivot): solve pivot column-changing bug Signed-off-by: samuel.park <samuel.park@megazone.com> * fix(table-widget): solve comparison bug Signed-off-by: samuel.park <samuel.park@megazone.com> * fix(preview-table): solve widget preview table bug Signed-off-by: samuel.park <samuel.park@megazone.com> --------- Signed-off-by: samuel.park <samuel.park@megazone.com>
cloudforet-io · Jan 5, 2025 · 0af8143 · 0af8143
1 parent 1e2dc4f
commit 0af8143
Show file tree

Hide file tree

Showing 22 changed files with 237 additions and 113 deletions.
diff --git a/.../web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue b/.../web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
@@ -129,8 +129,8 @@ const handleUpdateColumn = (value: string) => {
         column: value,
         labels: labelKeys.filter((key) => key !== value),
     };
+    state.selectedValueType = 'auto';
     if (value === 'Date') {
-        state.selectedValueType = 'auto';
         selectInfo.value = undefined;
         limitInfo.value = undefined;
     } else if (state.selectedValueType === 'auto') {

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -26,8 +26,12 @@ import type { ProjectReferenceMap } from '@/store/reference/project-reference-st
 
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { REFERENCE_FIELD_MAP, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
-import { normalizeAndSerialize } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import { sortObjectByKeys } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
+import {
+    normalizeAndSerializeVars,
+} from '@/common/modules/widgets/_helpers/global-variable-helper';
+import {
+    normalizeAndSerializeDataTableOptions,
+} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
@@ -239,11 +243,12 @@ const queryKey = computed(() => [
     storeState.selectedDataTableId,
     {
         granularity: state.selectedGranularity,
-        dataTableOptions: JSON.stringify(sortObjectByKeys(storeState.selectedDataTable?.options ?? {})),
+        dataTableOptions: normalizeAndSerializeDataTableOptions(storeState.selectedDataTable?.options),
+        dataTables: normalizeAndSerializeDataTableOptions((widgetGenerateState.dataTables || []).map((d) => d?.options || {})),
         sortBy: state.sortBy,
         thisPage: state.thisPage,
         pageSize: state.pageSize,
-        vars: normalizeAndSerialize(dashboardDetailGetters.dashboardInfo?.vars ?? {}),
+        vars: normalizeAndSerializeVars(dashboardDetailGetters.dashboardInfo?.vars ?? {}),
     },
 ]);
 

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
@@ -252,6 +252,7 @@ onUnmounted(() => {
                            :size="state.widgetSize"
                            :width="state.widgetWidth"
                            :widget-options="widgetGenerateState.widget.options"
+                           :data-tables="widgetGenerateState.dataTables"
                            :dashboard-options="dashboardDetailState.options"
                            :dashboard-vars="dashboardDetailGetters.refinedVars"
                            :all-reference-type-info="state.allReferenceTypeInfo"

diff --git a/apps/web/src/common/modules/widgets/_helpers/global-variable-helper.ts b/apps/web/src/common/modules/widgets/_helpers/global-variable-helper.ts
@@ -8,7 +8,7 @@ export const isGlobalVariableFormat = (value: string | MenuItem[]): boolean => {
     return regex.test(value);
 };
 
-export const normalizeAndSerialize = (obj: DashboardVars = {}): string => {
+export const normalizeAndSerializeVars = (obj: DashboardVars = {}): string => {
     const sortedKeys = Object.keys(obj).sort();
 
     const normalizedObj: DashboardVars = sortedKeys.reduce((acc, key) => {

diff --git a/apps/web/src/common/modules/widgets/_helpers/widget-data-table-helper.ts b/apps/web/src/common/modules/widgets/_helpers/widget-data-table-helper.ts
@@ -30,14 +30,31 @@ export const isFieldNameValid = (fieldName: string, dataTable?: PublicDataTableM
     return !_keys.includes(fieldName);
 };
 
-export const sortObjectByKeys = (obj: DataTableOptions): DataTableOptions => {
-    if (obj === null || typeof obj !== 'object') return obj;
-
-    const sorted = {} as DataTableOptions;
-    Object.keys(obj)
-        .sort()
-        .forEach((key) => {
-            sorted[key] = sortObjectByKeys(obj[key]);
-        });
-    return sorted;
+export const normalizeAndSerializeDataTableOptions = (
+    data?: DataTableOptions | DataTableOptions[],
+): string => {
+    if (data === undefined || typeof data !== 'object') return JSON.stringify(data);
+
+    const normalize = (obj: DataTableOptions): DataTableOptions => {
+        const normalized = {} as DataTableOptions;
+        Object.keys(obj)
+            .sort()
+            .forEach((key) => {
+                // eslint-disable-next-line no-nested-ternary
+                normalized[key] = Array.isArray(obj[key])
+                    ? obj[key].map((item: any) => (typeof item === 'object' && item !== null ? normalize(item) : item))
+                    : typeof obj[key] === 'object' && obj[key] !== null
+                        ? normalize(obj[key])
+                        : obj[key];
+            });
+        return normalized;
+    };
+
+    if (Array.isArray(data)) {
+        const normalizedArray = data.map((item) => (typeof item === 'object' && item !== null ? normalize(item) : item));
+        return JSON.stringify(normalizedArray, null, 2);
+    }
+
+    const normalizedObject = normalize(data);
+    return JSON.stringify(normalizedObject, null, 2);
 };
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
@@ -31,8 +31,12 @@ import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/u
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import { normalizeAndSerialize } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import { sortObjectByKeys } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
+import {
+    normalizeAndSerializeVars,
+} from '@/common/modules/widgets/_helpers/global-variable-helper';
+import {
+    normalizeAndSerializeDataTableOptions,
+} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
@@ -193,10 +197,11 @@ const queryKey = computed(() => [
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: JSON.stringify(sortObjectByKeys(state.dataTable?.options) ?? {}),
+        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.xAxisInfo?.data,
         count: widgetOptionsState.xAxisInfo?.count,
-        vars: normalizeAndSerialize(props.dashboardVars),
+        vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
 
@@ -215,7 +220,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
@@ -284,8 +289,9 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     state.chartData = _seriesData;
 };
 
-const loadWidget = () => {
+const loadWidget = (forceLoad?: boolean) => {
     state.runQueries = true;
+    if (forceLoad) queryResult.refetch();
 };
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {

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
@@ -25,8 +25,12 @@ import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-wi
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
 import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
-import { normalizeAndSerialize } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import { sortObjectByKeys } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
+import {
+    normalizeAndSerializeVars,
+} from '@/common/modules/widgets/_helpers/global-variable-helper';
+import {
+    normalizeAndSerializeDataTableOptions,
+} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
@@ -41,6 +45,7 @@ import type { GroupByValue } from '@/common/modules/widgets/_widget-fields/group
 import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetLegend } from '@/common/modules/widgets/types/widget-legend-typs';
+import type { DataTableOptions } from '@/common/modules/widgets/types/widget-model';
 
 
 const BOX_MIN_WIDTH = 112;
@@ -90,9 +95,10 @@ const queryKey = computed(() => [
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: JSON.stringify(sortObjectByKeys(state.dataTable?.options) ?? {}),
+        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options as DataTableOptions),
+        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: [widgetOptionsState.groupByInfo?.data as string, widgetOptionsState.formatRulesInfo?.field as string],
-        vars: normalizeAndSerialize(props.dashboardVars),
+        vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
 
@@ -114,7 +120,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
@@ -153,8 +159,9 @@ const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emi
 });
 
 /* Util */
-const loadWidget = () => {
+const loadWidget = (forceLoad?: boolean) => {
     state.runQueries = true;
+    if (forceLoad) queryResult.refetch();
 };
 const getColor = (val: string, field: string): string => {
     const _label = getReferenceLabel(props.allReferenceTypeInfo, field, val);

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
@@ -25,8 +25,12 @@ import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/u
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import { normalizeAndSerialize } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import { sortObjectByKeys } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
+import {
+    normalizeAndSerializeVars,
+} from '@/common/modules/widgets/_helpers/global-variable-helper';
+import {
+    normalizeAndSerializeDataTableOptions,
+} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields, getWidgetDateRange,
@@ -127,10 +131,11 @@ const queryKey = computed(() => [
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: JSON.stringify(sortObjectByKeys(state.dataTable?.options) ?? {}),
+        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.xAxisInfo?.data,
         count: widgetOptionsState.xAxisInfo?.count,
-        vars: normalizeAndSerialize(props.dashboardVars),
+        vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
 
@@ -148,15 +153,16 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
 });
 
 /* Util */
-const loadWidget = async () => {
+const loadWidget = (forceLoad?: boolean) => {
     state.runQueries = true;
+    if (forceLoad) queryResult.refetch();
 };
 const targetValue = (xField?: string, yField?: string, format?: 'table'|'tooltip'): number|string => {
     if (!state.data?.results?.length || !xField || !yField) return '--';

diff --git a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
@@ -25,8 +25,12 @@ import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-wi
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
 import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
-import { normalizeAndSerialize } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import { sortObjectByKeys } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
+import {
+    normalizeAndSerializeVars,
+} from '@/common/modules/widgets/_helpers/global-variable-helper';
+import {
+    normalizeAndSerializeDataTableOptions,
+} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
@@ -154,8 +158,9 @@ const queryKey = computed(() => [
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: JSON.stringify(sortObjectByKeys(state.dataTable?.options) ?? {}),
-        vars: normalizeAndSerialize(props.dashboardVars),
+        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
 
@@ -172,7 +177,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
@@ -183,8 +188,9 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     if (isEmpty(rawData)) return;
     state.chartData = rawData?.results?.[0]?.[widgetOptionsState.dataFieldInfo?.data as string] || 0;
 };
-const loadWidget = () => {
+const loadWidget = (forceLoad?: boolean) => {
     state.runQueries = true;
+    if (forceLoad) queryResult.refetch();
 };
 
 

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
@@ -30,8 +30,12 @@ import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-wi
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
 import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
-import { normalizeAndSerialize } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import { sortObjectByKeys } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
+import {
+    normalizeAndSerializeVars,
+} from '@/common/modules/widgets/_helpers/global-variable-helper';
+import {
+    normalizeAndSerializeDataTableOptions,
+} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
@@ -131,9 +135,10 @@ const queryKey = computed(() => [
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: JSON.stringify(sortObjectByKeys(state.dataTable?.options) ?? {}),
+        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.groupByInfo?.data,
-        vars: normalizeAndSerialize(props.dashboardVars),
+        vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
 
@@ -151,7 +156,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
 const errorMessage = computed<string>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
@@ -186,8 +191,9 @@ const drawChart = async (rawData: WidgetLoadResponse|null) => {
 
     state.chartData = _seriesData;
 };
-const loadWidget = async () => {
+const loadWidget = (forceLoad?: boolean) => {
     state.runQueries = true;
+    if (forceLoad) queryResult.refetch();
 };
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {