fix(msg transform): actions are not required in some cases

emqx · Jul 11, 2024 · f068898 · f068898
1 parent 33b74c1
commit f068898
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 16 deletions.
diff --git a/src/hooks/Rule/transform/useMessageTransform.ts b/src/hooks/Rule/transform/useMessageTransform.ts
@@ -1,7 +1,12 @@
 import { getLabelFromValueInOptionList } from '@/common/tools'
 import useI18nTl from '@/hooks/useI18nTl'
 import { SchemaRegistryType } from '@/types/enum'
-import { MessageTransformFailureAction, MessageTransformLogLevel } from '@/types/typeAlias'
+import {
+  MessageTransform,
+  MessageTransformFailureAction,
+  MessageTransformLogLevel,
+} from '@/types/typeAlias'
+import { cloneDeep } from 'lodash'
 
 export type TypeMessageTransformFailureAction =
   typeof MessageTransformFailureAction[keyof typeof MessageTransformFailureAction]
@@ -370,3 +375,18 @@ export const useMessageTransformForm = (): UseMessageTransformFormReturn => {
     detectCanSetToPayloadSub,
   }
 }
+
+export const handleTransformData = (): {
+  handleDataBeforeSubmit: (data: MessageTransform) => MessageTransform
+} => {
+  const handleDataBeforeSubmit = (data: MessageTransform): MessageTransform => {
+    const ret = cloneDeep(data)
+    if (ret.operations.length === 0) {
+      Reflect.deleteProperty(ret, 'operations')
+    }
+    return ret
+  }
+  return {
+    handleDataBeforeSubmit,
+  }
+}
diff --git a/src/views/RuleEngine/MessageTransform/TransformCreate.vue b/src/views/RuleEngine/MessageTransform/TransformCreate.vue
@@ -25,6 +25,7 @@
 <script setup lang="ts">
 import { postMessageTransform } from '@/api/messageTransformation'
 import DetailHeader from '@/components/DetailHeader.vue'
+import { handleTransformData } from '@/hooks/Rule/transform/useMessageTransform'
 import useI18nTl from '@/hooks/useI18nTl'
 import { SchemaRegistryType } from '@/types/enum'
 import type { MessageTransform } from '@/types/typeAlias'
@@ -55,11 +56,12 @@ const isSubmitting = ref(false)
 
 const cancel = () => router.push({ name: 'message-transform' })
 
+const { handleDataBeforeSubmit } = handleTransformData()
 const submit = async () => {
   try {
     isSubmitting.value = true
     await formCom.value.validate()
-    await postMessageTransform(formData.value)
+    await postMessageTransform(handleDataBeforeSubmit(formData.value))
     ElMessage.success(t('Base.createSuccess'))
     router.push({ name: 'message-transform' })
   } catch (error) {

diff --git a/src/views/RuleEngine/MessageTransform/TransformDetail.vue b/src/views/RuleEngine/MessageTransform/TransformDetail.vue
@@ -62,16 +62,16 @@ import {
 } from '@/api/messageTransformation'
 import DetailHeader from '@/components/DetailHeader.vue'
 import StatusDetailsOfEachNode from '@/components/StatusDetailsOfEachNode.vue'
+import { handleTransformData } from '@/hooks/Rule/transform/useMessageTransform'
 import useI18nTl from '@/hooks/useI18nTl'
 import useOperationConfirm from '@/hooks/useOperationConfirm'
-import { NodeStatusClass } from '@/types/enum'
+import { DetailTab, NodeStatusClass } from '@/types/enum'
 import type { MessageTransform } from '@/types/typeAlias'
 import { Delete } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { computed, ref, Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import TransformForm from './components/TransformForm.vue'
-import { DetailTab } from '@/types/enum'
 import TransformOverview from './components/TransformOverview.vue'
 
 const router = useRouter()
@@ -115,11 +115,12 @@ const getDetail = async () => {
   }
 }
 
+const { handleDataBeforeSubmit } = handleTransformData()
 const updateTransform = async () => {
   try {
     isSubmitting.value = true
     await formCom.value.validate()
-    await putMessageTransform(transformData.value)
+    await putMessageTransform(handleDataBeforeSubmit(transformData.value))
     ElMessage.success(t('Base.updateSuccess'))
     router.push({ name: 'message-transform' })
   } catch (error) {

diff --git a/src/views/RuleEngine/MessageTransform/components/OperationsTable.vue b/src/views/RuleEngine/MessageTransform/components/OperationsTable.vue
@@ -9,7 +9,9 @@
   >
     <el-table-column>
       <template #header>
-        <label class="mock-required-label">{{ tl('transformationProperties') }}</label>
+        <label :class="required ? 'mock-required-label' : ''">
+          {{ tl('transformationProperties') }}
+        </label>
       </template>
       <template #default="{ row, $index }">
         <!-- PARENT -->
@@ -39,7 +41,7 @@
     <el-table-column>
       <template #header>
         <div class="target-value-header">
-          <label class="mock-required-label">{{ tl('targetValue') }}</label>
+          <label :class="required ? 'mock-required-label' : ''">{{ tl('targetValue') }}</label>
           <el-button
             type="primary"
             :icon="Plus"
@@ -127,6 +129,7 @@ const {
 const props = defineProps<{
   modelValue: Array<MessageTransformOperation>
   transformationForm: MessageTransform
+  required: boolean
 }>()
 const emit = defineEmits<{
   (e: 'update:modelValue', value: Array<{ key: string; value: string }>): void

diff --git a/src/views/RuleEngine/MessageTransform/components/TransformForm.vue b/src/views/RuleEngine/MessageTransform/components/TransformForm.vue
@@ -151,6 +151,7 @@
             <OperationsTable
               v-model="formData.operations"
               :transformation-form="formData"
+              :required="isOperationsRequired"
               @blur="validateOperations"
             />
           </el-form-item>
@@ -285,6 +286,18 @@ const detectSetMultiLevelUserProperty = (arr: Array<{ key: string; value: string
   return arr.some(({ key }) => userPropSubReg.test(key) && key.split('.').length > 2)
 }
 
+const isOperationsRequired = computed(() => {
+  const {
+    payload_decoder: { type: decoderType } = {},
+    payload_encoder: { type: encoderType } = {},
+  } = formData.value
+  const doNotNeedOperations =
+    (decoderType === SchemaRegistryType.JSON &&
+      specialTypeBrothers.includes(encoderType as SchemaRegistryType)) ||
+    (encoderType === SchemaRegistryType.JSON &&
+      specialTypeBrothers.includes(decoderType as SchemaRegistryType))
+  return !doNotNeedOperations
+})
 const { detectCanSetToPayload, detectCanSetToPayloadSub } = useMessageTransformForm()
 const rules: FormRules = {
   name: [...createRequiredRule(tl('name')), ...createCommonIdRule()],
@@ -317,15 +330,7 @@ const rules: FormRules = {
           payload_decoder: { type: decoderType } = {},
           payload_encoder: { type: encoderType } = {},
         } = formData.value
-        const doNotNeedOperations =
-          (decoderType === SchemaRegistryType.JSON &&
-            [SchemaRegistryType.Avro, SchemaRegistryType.Protobuf].includes(
-              encoderType as SchemaRegistryType,
-            )) ||
-          (encoderType === SchemaRegistryType.JSON &&
-            [SchemaRegistryType.Avro, SchemaRegistryType.Protobuf].includes(
-              decoderType as SchemaRegistryType,
-            ))
+        const doNotNeedOperations = !isOperationsRequired.value
         let error = undefined
         if (!doNotNeedOperations && Array.isArray(value) && value.length === 0) {
           error = new Error(tl('operationsListRequired'))