From 6bdedc0f11dab0062367dbbfb06b53fb749e3b21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piggy=20Park=20=28=EB=B0=95=EC=9A=A9=ED=83=9C=29?= Date: Mon, 16 Dec 2024 13:26:09 +0900 Subject: [PATCH] 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 * fix(data-table-form): remove deprecated options form Signed-off-by: samuel.park * fix(data-table): apply changed form to data-table & apply changed timediff planning Signed-off-by: samuel.park --------- Signed-off-by: samuel.park --- .../WidgetFormDataTableCardAddContents.vue | 50 ++-- .../WidgetFormDataTableCardAddForm.vue | 250 ++---------------- .../modules/widgets/types/widget-model.ts | 10 +- 3 files changed, 52 insertions(+), 258 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue index 6e1ecddd46..18a227e3e6 100644 --- 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(() => 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,6 +169,19 @@ 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 => { if (!state.dataFieldName.length) { showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_WARNING'), ''); @@ -185,10 +189,6 @@ const updateDataTable = async (): Promise => { 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 => { 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" diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue index 44444502ed..17b3830a09 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue @@ -7,7 +7,7 @@ import type { TranslateResult } from 'vue-i18n'; import { range } from 'lodash'; import { - PFieldGroup, PDivider, PIconButton, PI, PButton, PSelectDropdown, PTextInput, PToggleButton, PFieldTitle, + PFieldGroup, PSelectDropdown, PTextInput, } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type'; import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type'; @@ -20,13 +20,11 @@ import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-sou import type { MetricReferenceMap } from '@/store/reference/metric-reference-store'; import { showInfoMessage } from '@/lib/helper/notice-alert-helper'; -import getRandomId from '@/lib/random-id-generator'; import { useCostDataSourceFilterMenuItems } from '@/common/composables/data-source/use-cost-data-source-filter-menu-items'; import { useProxyValue } from '@/common/composables/proxy-state'; import WidgetFormDataTableCardFilters from '@/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue'; import { DATA_SOURCE_DOMAIN } from '@/common/modules/widgets/_constants/data-table-constant'; -import type { AdditionalLabel } from '@/common/modules/widgets/types/widget-data-table-type'; import type { DataTableQueryFilter } from '@/common/modules/widgets/types/widget-model'; @@ -44,8 +42,6 @@ interface Props { dataUnit: string; /* Advanced Options */ - additionalLabels: AdditionalLabel[]; - separateDate: boolean; selectedTimeDiff: string; selectedTimeDiffDate?: string; @@ -58,8 +54,6 @@ const emit = defineEmits<{(e: 'update:filter', value: Record): (e: 'update:selected-group-by-items', value: any[]): void; (e: 'update:data-field-name', value: string): void; (e: 'update:data-unit', value: string): void; - (e: 'update:additional-labels', value: AdditionalLabel[]): void; - (e: 'update:separate-date', value: boolean): void; (e: 'update:selected-time-diff', value: string): void; (e: 'update:selected-time-diff-date', value: string): void; (e: 'update:form-invalid', value: boolean): void; @@ -87,8 +81,6 @@ const state = reactive({ const advancedOptionsState = reactive({ advancedOptionsCollapsed: false, - proxyAdditionalLabels: useProxyValue('additionalLabels', props, emit), - proxySeparateDate: useProxyValue('separateDate', props, emit), proxySelectedTimeDiff: useProxyValue('selectedTimeDiff', props, emit), proxySelectedTimeDiffDate: useProxyValue('selectedTimeDiffDate', props, emit), timeDiffList: computed(() => [ @@ -153,41 +145,6 @@ const assetFilterState = reactive({ }); /* Events */ -const handleClickToggleAdvancedOptionsForm = () => { - advancedOptionsState.advancedOptionsCollapsed = !advancedOptionsState.advancedOptionsCollapsed; -}; -const handleClickAddLabel = () => { - const newAdditionalLabel = { - key: getRandomId(), - name: '', - value: '', - }; - advancedOptionsState.proxyAdditionalLabels = [...advancedOptionsState.proxyAdditionalLabels, newAdditionalLabel]; -}; - -const handleChangeLabel = (key: string, value: string, type: 'name' | 'value') => { - const targetIndex = advancedOptionsState.proxyAdditionalLabels.findIndex((label) => label.key === key); - if (targetIndex !== -1) { - advancedOptionsState.proxyAdditionalLabels[targetIndex][type] = value; - } - if (type === 'name') { - if (reservedLabelState.reservedLabelKeys.includes(value)) { - validationState.additionalFieldInvalidMap = { ...validationState.additionalFieldInvalidMap, [key]: true }; - } else if (advancedOptionsState.proxyAdditionalLabels.some((label) => label.name === value && label.key !== key)) { - validationState.additionalFieldInvalidMap = { ...validationState.additionalFieldInvalidMap, [key]: true }; - } else validationState.additionalFieldInvalidMap = { ...validationState.additionalFieldInvalidMap, [key]: false }; - } -}; - -const handleRemoveLabel = (key: string) => { - // Reset validation map - const copiedAdditionalFieldMap = { ...validationState.additionalFieldInvalidMap }; - delete copiedAdditionalFieldMap[key]; - validationState.additionalFieldInvalidMap = copiedAdditionalFieldMap; - // Remove label - advancedOptionsState.proxyAdditionalLabels = [...advancedOptionsState.proxyAdditionalLabels].filter((label) => label.key !== key); -}; - const handleClickTimeDiff = (timeDiff: string) => { advancedOptionsState.proxySelectedTimeDiff = timeDiff; advancedOptionsState.proxySelectedTimeDiffDate = undefined; @@ -196,13 +153,13 @@ const handleClickTimeDiff = (timeDiff: string) => { const handleClickTimeDiffDate = (timeDiffDate: string) => { advancedOptionsState.proxySelectedTimeDiffDate = timeDiffDate; - const defaultFieldName = props.sourceItems.find((source) => source.name === props.sourceKey)?.label || ''; - const timeDiffOptions = { - none: '', - months: 'month', - years: 'year', - }; - state.proxyDataFieldName = `${defaultFieldName} (- ${timeDiffDate} ${timeDiffOptions[advancedOptionsState.proxySelectedTimeDiff]})`; + // const defaultFieldName = props.sourceItems.find((source) => source.name === props.sourceKey)?.label || ''; + // const timeDiffOptions = { + // none: '', + // months: 'month', + // years: 'year', + // }; + // state.proxyDataFieldName = `${defaultFieldName} (- ${timeDiffDate} ${timeDiffOptions[advancedOptionsState.proxySelectedTimeDiff]})`; }; const handleUpdateSelectedGroupBy = (selectedItem: SelectDropdownMenuItem, isSelected: boolean) => { if (isSelected && (state.proxySelectedGroupByItems.length > MAX_GROUP_BY_COUNT)) { @@ -212,17 +169,6 @@ const handleUpdateSelectedGroupBy = (selectedItem: SelectDropdownMenuItem, isSel }; /* Utils */ -const getAdditionalLabelInvalidText = (labelKey: string, labelName: string): string|TranslateResult => { - const invalid = validationState.additionalFieldInvalidMap[labelKey]; - if (!invalid) return ''; - if (reservedLabelState.reservedGroupByKeys.includes(labelName)) return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.FIELD_NAME_GROUP_BY_INVALID_TEXT'); - if (reservedLabelState.reservedDateKeys.includes(labelName)) return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.FIELD_NAME_DATE_INVALID_TEXT'); - if (advancedOptionsState.proxyAdditionalLabels.some((label) => label.name === labelName && label.key !== labelKey)) { - return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADDITIONAL_LABELS_DUPLICATED_INVALID_TEXT'); - } - return ''; -}; - const resetAllFilter = () => { state.proxySelectedGroupByItems = []; state.proxyFilter = {}; @@ -280,179 +226,39 @@ watch([ class="data-text-input" /> - - -
-
- +
+ + - {{ $t('COMMON.WIDGETS.DATA_TABLE.FORM.ADVANCED_OPTIONS') }} -
-
- -
-
- - -
-
-
- - - -
-

- {{ getAdditionalLabelInvalidText(labelInfo.key, labelInfo.name) }} -

-
- - {{ $t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABEL') }} - -
- - -
-

- {{ $t('COMMON.WIDGETS.DATA_TABLE.FORM.SEPARATE_DESC') }} -

- -
- - -
- - -
-
-
+