feat: add VALUE_MAPPING transform (#5271)

* feat: add VALUE_MAPPING transform Signed-off-by: yuda <[email protected]> * chore: update language Signed-off-by: yuda <[email protected]> * fix: fix base color bug in Gauge Signed-off-by: yuda <[email protected]> --------- Signed-off-by: yuda <[email protected]>
cloudforet-io · Dec 19, 2024 · fe9e524 · fe9e524
1 parent 6cc9dd4
commit fe9e524
Show file tree

Hide file tree

Showing 12 changed files with 738 additions and 112 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
@@ -147,6 +147,12 @@ const state = reactive({
             description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS_DESC'),
             icon: '', // TODO: Add icon
         },
+        {
+            key: DATA_TABLE_OPERATOR.VALUE_MAPPING,
+            name: 'Value Mapping',
+            description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.VALUE_MAPPING_DESC'),
+            icon: '', // TODO: Add icon
+        },
     ]),
 });
 

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -28,6 +28,8 @@ import WidgetFormDataTableCardTransformPivotForm
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue';
 import WidgetFormDataTableCardTransformQuery
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformQuery.vue';
+import WidgetFormDataTableCardTransformValueMapping
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue';
 import {
     DATA_TABLE_TYPE, type DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
 } from '@/common/modules/widgets/_constants/data-table-constant';
@@ -75,6 +77,7 @@ const state = reactive({
         if (state.operator === 'EVAL') return invalidState.EVAL;
         if (state.operator === 'PIVOT') return invalidState.PIVOT;
         if (state.operator === 'ADD_LABELS') return invalidState.ADD_LABELS;
+        if (state.operator === 'VALUE_MAPPING') return invalidState.VALUE_MAPPING;
         return true;
     }),
     optionsChanged: computed(() => {
@@ -89,11 +92,13 @@ const state = reactive({
             ...(expression?.condition ? { condition: expression?.condition } : {}),
         })).filter((expression) => !!expression.name && !!expression.expression), originState.expressions);
         const addLabelsChanged = !isEqual(valueState.ADD_LABELS.labels, originState.labels);
+        const valueMappingChanged = !isEqual(valueState.VALUE_MAPPING, originState.valueMapping);
         if (state.operator === 'CONCAT') return concatDataTablesChanged;
         if (state.operator === 'JOIN') return joinDataTablesChanged || joinTypeChanged;
         if (state.operator === 'QUERY') return queryDataTableIdChanged || queryConditionsChanged;
         if (state.operator === 'EVAL') return evalDataTableIdChanged || evalChanged;
         if (state.operator === 'ADD_LABELS') return addLabelsChanged;
+        if (state.operator === 'VALUE_MAPPING') return valueMappingChanged;
         return false;
     }),
     isUnsaved: computed(() => state.dataTableId.startsWith('UNSAVED-')),
@@ -114,6 +119,7 @@ const valueState = reactive({
     EVAL: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.EVAL,
     QUERY: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY,
     ADD_LABELS: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS,
+    VALUE_MAPPING: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.VALUE_MAPPING,
 });
 const invalidState = reactive({
     PIVOT: false,
@@ -122,6 +128,7 @@ const invalidState = reactive({
     EVAL: false,
     QUERY: false,
     ADD_LABELS: false,
+    VALUE_MAPPING: false,
 });
 
 const originState = reactive({
@@ -132,7 +139,6 @@ const originState = reactive({
     })),
     joinType: computed<JoinType|undefined>(() => (props.item.options as DataTableTransformOptions).JOIN?.how),
     queryConditions: computed<QueryOptions['conditions']>(() => (props.item.options as DataTableTransformOptions).QUERY?.conditions ?? []),
-    // queryOperator: computed<QueryOptions['operator']|undefined>(() => (props.item.options as DataTableTransformOptions).QUERY?.operator),
     expressions: computed<EvaluateExpression[]|string[]>(() => (props.item.options as DataTableTransformOptions).EVAL?.expressions ?? []),
     labels: computed<AddLabelsOptions['labels']>(() => (props.item.options as DataTableTransformOptions).ADD_LABELS?.labels ?? {}),
     pivot: computed<PivotOptions|undefined>(() => {
@@ -147,6 +153,7 @@ const originState = reactive({
             order_by: _pivot.order_by,
         };
     }),
+    valueMapping: computed(() => (props.item.options as DataTableTransformOptions).VALUE_MAPPING ?? {}),
 });
 
 const setFailStatus = (status: boolean) => {
@@ -186,6 +193,7 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     const concatOptions = cloneDeep(valueState.CONCAT);
     const joinOptions = cloneDeep(valueState.JOIN);
     const queryOptions = cloneDeep(valueState.QUERY);
+    const valueMappingOptions = cloneDeep(valueState.VALUE_MAPPING);
     const evalOptions: EvalOptions = {
         data_table_id: valueState.EVAL.data_table_id,
         expressions: valueState.EVAL.expressions.map((expressionInfo) => ({
@@ -216,6 +224,8 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
             return pivotOptions;
         case 'ADD_LABELS':
             return addLabelsOptions;
+        case 'VALUE_MAPPING':
+            return valueMappingOptions;
         default:
             return {};
         }
@@ -314,6 +324,8 @@ const setInitialDataTableForm = () => {
     // PIVOT
     valueState.PIVOT = originState.pivot ? cloneDeep(originState.pivot) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT);
     state.resetKey = Math.random();
+    // VALUE_MAPPING
+    valueState.VALUE_MAPPING = originState.valueMapping ? cloneDeep(originState.valueMapping) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.VALUE_MAPPING);
 };
 
 onMounted(() => {
@@ -389,6 +401,13 @@ defineExpose({
                                                           :invalid.sync="invalidState.ADD_LABELS"
                                                           :origin-data="props.item.options[state.operator]"
         />
+        <widget-form-data-table-card-transform-value-mapping v-if="state.operator === DATA_TABLE_OPERATOR.VALUE_MAPPING"
+                                                             :key="`value-mapping-${state.resetKey}`"
+                                                             :base-data-table-id="state.dataTableId"
+                                                             :operator-options.sync="valueState.VALUE_MAPPING"
+                                                             :invalid.sync="invalidState.VALUE_MAPPING"
+                                                             :origin-data="props.item.options[state.operator]"
+        />
         <widget-form-data-table-card-footer :disabled="state.applyDisabled"
                                             :changed="state.optionsChanged"
                                             :loading="state.loading"

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
@@ -58,11 +58,11 @@ const state = reactive({
     fieldTypeMenuItems: computed<MenuItem[]>(() => [
         {
             name: DATA_TABLE_FIELD_TYPE.LABEL,
-            label: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.TYPE_LABEL_FIELD'),
+            label: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.TYPE_LABEL_FIELD'),
         },
         {
             name: DATA_TABLE_FIELD_TYPE.DATA,
-            label: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.TYPE_DATA_FIELD'),
+            label: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.TYPE_DATA_FIELD'),
         },
     ]),
     globalVariablePopperVisible: false,
@@ -196,7 +196,7 @@ watch(() => state.invalid, (_invalid) => {
                     />
                 </div>
                 <div class="form-body">
-                    <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.FIELD_TYPE')"
+                    <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.FIELD_TYPE')"
                                    required
                                    style-type="secondary"
                     >
@@ -212,7 +212,7 @@ watch(() => state.invalid, (_invalid) => {
                             </p-select-button>
                         </div>
                     </p-field-group>
-                    <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.FIELD_NAME')"
+                    <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.FIELD_NAME')"
                                    required
                                    style-type="secondary"
                                    :invalid-text="getInvalidFieldNameText(expression.name)"