fix(add-data-table): remove deprecated data-table options (additional…

… label, separate date) & apply new timediff-planning (#5222) * fix(data-table-model): remove and edit deprecated options Signed-off-by: samuel.park <[email protected]> * fix(data-table-form): remove deprecated options form Signed-off-by: samuel.park <[email protected]> * fix(data-table): apply changed form to data-table & apply changed timediff planning Signed-off-by: samuel.park <[email protected]> --------- Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Dec 16, 2024 · 6bdedc0 · 6bdedc0
1 parent 92922b3
commit 6bdedc0
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 258 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
@@ -34,10 +34,10 @@ import {
     DATA_TABLE_TYPE,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
-import type { AdditionalLabel, DataTableAlertModalMode } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DataTableAlertModalMode } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
-    AdditionalLabels, DateFormat, DataTableAddOptions,
-    DataTableQueryFilter,
+    DataTableAddOptions,
+    DataTableQueryFilter, TimeDiff,
 } from '@/common/modules/widgets/types/widget-model';
 
 interface Props {
@@ -110,13 +110,11 @@ const state = reactive({
         const filterChanged = !isEqual(state.filter, originDataState.filter);
         const dataTableNameChanged = state.dataFieldName !== originDataState.dataName;
         const dataUnitChanged = state.dataUnit !== originDataState.dataUnit;
-        const additionalLabelChanged = !isEqual(advancedOptionsState.additionalLabels.map(({ name, value }) => ({ name, value })), originDataState.additionalLabels);
-        const seperateDateChanged = advancedOptionsState.separateDate !== originDataState.separateDate;
         const timeDiffChanged = advancedOptionsState.selectedTimeDiff !== originDataState.timeDiff;
         const timeDiffDateChanged = advancedOptionsState.selectedTimeDiffDate !== originDataState.timeDiffDate;
 
         return sourceKeyChanged || groupByChanged || filterChanged || dataTableNameChanged || dataUnitChanged
-            || additionalLabelChanged || seperateDateChanged || timeDiffChanged || timeDiffDateChanged;
+            || timeDiffChanged || timeDiffDateChanged;
     }),
     failStatus: false,
     isUnavailable: computed<boolean>(() => props.item.state === 'UNAVAILABLE'),
@@ -127,8 +125,6 @@ const dataTableNameState = reactive({
 });
 
 const advancedOptionsState = reactive({
-    additionalLabels: [] as AdditionalLabel[],
-    separateDate: false,
     selectedTimeDiff: 'none',
     selectedTimeDiffDate: undefined as string|undefined,
 });
@@ -152,11 +148,6 @@ const originDataState = reactive({
     }),
     dataName: computed(() => (props.item.options as DataTableAddOptions).data_name ?? ''),
     dataUnit: computed(() => (props.item.options as DataTableAddOptions).data_unit ?? ''),
-    additionalLabels: computed(() => Object.entries(((props.item.options as DataTableAddOptions).additional_labels ?? {})).map(([key, value]) => ({
-        name: key,
-        value: value as string,
-    }))),
-    separateDate: computed(() => (props.item.options as DataTableAddOptions).date_format === 'SEPARATE'),
     timeDiff: computed(() => {
         const timeDiff = (props.item.options as DataTableAddOptions).timediff;
         const timeDiffKeys = Object.keys(timeDiff || {});
@@ -178,17 +169,26 @@ const modalState = reactive({
 const setFailStatus = (status: boolean) => {
     state.failStatus = status;
 };
+const getTimeDiffValue = (): TimeDiff|undefined => {
+    if (advancedOptionsState.selectedTimeDiff === 'none' || !Number(advancedOptionsState.selectedTimeDiffDate)) return undefined;
+    const defaultFieldName = state.selectableSourceItems.find((source) => source.name === state.selectedSourceEndItem)?.label || '';
+    const timeDiffOptions = {
+        none: '',
+        months: 'month',
+        years: 'year',
+    };
+    return {
+        [advancedOptionsState.selectedTimeDiff]: -Number(advancedOptionsState.selectedTimeDiffDate),
+        data_name: `${defaultFieldName} (- ${advancedOptionsState.selectedTimeDiffDate} ${timeDiffOptions[advancedOptionsState.selectedTimeDiff]})`,
+    };
+};
 const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     if (!state.dataFieldName.length) {
         showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_WARNING'), '');
         setFailStatus(true);
         return undefined;
     }
 
-    const additionalLabelsRequest = {} as AdditionalLabels;
-    advancedOptionsState.additionalLabels.filter((label) => label.name.length && label.value.length).forEach((label) => {
-        additionalLabelsRequest[label.name] = label.value;
-    });
     const domainOptions = state.sourceType === DATA_SOURCE_DOMAIN.COST
         ? { data_source_id: state.dataSourceId, data_key: state.selectedSourceEndItem }
         : { metric_id: state.selectedSourceEndItem };
@@ -226,13 +226,10 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
             filter: refinedFilter,
             data_name: state.dataFieldName,
             data_unit: state.dataUnit,
-            additional_labels: additionalLabelsRequest,
-            date_format: (advancedOptionsState.separateDate ? 'SEPARATE' : 'SINGLE') as DateFormat,
-            timediff: advancedOptionsState.selectedTimeDiff !== 'none' && Number(advancedOptionsState.selectedTimeDiffDate)
-                ? { [advancedOptionsState.selectedTimeDiff]: -Number(advancedOptionsState.selectedTimeDiffDate) }
-                : undefined,
+            timediff: getTimeDiffValue(),
         },
     };
+
     const result = await widgetGenerateStore.updateDataTable(updateParams);
 
     if (result) {
@@ -316,11 +313,6 @@ const setInitialDataTableForm = () => {
     state.dataUnit = originDataState.dataUnit;
 
     // Advanced Options
-    advancedOptionsState.additionalLabels = originDataState.additionalLabels.map((label) => ({
-        ...label,
-        key: getRandomId(),
-    }));
-    advancedOptionsState.separateDate = originDataState.separateDate;
     advancedOptionsState.selectedTimeDiff = originDataState.timeDiff;
     advancedOptionsState.selectedTimeDiffDate = originDataState.timeDiffDate;
 };
@@ -339,8 +331,6 @@ watch(() => state.selectedSourceEndItem, (_selectedSourceItem) => {
 
 
     // Advanced Options
-    advancedOptionsState.additionalLabels = [];
-    advancedOptionsState.separateDate = false;
     advancedOptionsState.selectedTimeDiff = 'none';
 });
 
@@ -386,8 +376,6 @@ defineExpose({
                                               :filter.sync="state.filter"
                                               :data-field-name.sync="state.dataFieldName"
                                               :data-unit.sync="state.dataUnit"
-                                              :additional-labels.sync="advancedOptionsState.additionalLabels"
-                                              :separate-date.sync="advancedOptionsState.separateDate"
                                               :selected-time-diff.sync="advancedOptionsState.selectedTimeDiff"
                                               :selected-time-diff-date.sync="advancedOptionsState.selectedTimeDiffDate"
                                               :form-invalid.sync="validationState.dataTableApplyInvalid"