From 7aaed5c8c3a8f75adfa9cfce6945ae76287cb5e4 Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Sun, 28 Apr 2024 11:37:38 +0800
Subject: [PATCH 1/2] feat(log trace): support `formatter`

---
 src/hooks/Rule/rule/useDebugRule.ts      |  4 ++--
 src/i18n/LogTrace.js                     |  4 ++++
 src/types/diagnose.d.ts                  |  5 +++--
 src/types/enum.ts                        |  5 +++++
 src/views/Diagnose/LogTrace/LogTrace.vue | 24 ++++++++++++++++++++++--
 5 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/hooks/Rule/rule/useDebugRule.ts b/src/hooks/Rule/rule/useDebugRule.ts
index a002a886f..ef498854a 100644
--- a/src/hooks/Rule/rule/useDebugRule.ts
+++ b/src/hooks/Rule/rule/useDebugRule.ts
@@ -2,7 +2,7 @@ import { addTrace, deleteTrace, getTraceLog } from '@/api/diagnose'
 import { applyRuleTest } from '@/api/ruleengine'
 import useSyncPolling from '@/hooks/useSyncPolling'
 import { TraceRecord } from '@/types/diagnose'
-import { TraceEncodeType } from '@/types/enum'
+import { LogTraceFormatter, TraceEncodeType } from '@/types/enum'
 import { BasicRule, RuleItem } from '@/types/rule'
 import { cloneDeep, debounce, isArray, isEqual, isFunction, mergeWith, startCase } from 'lodash'
 import moment from 'moment'
@@ -48,7 +48,7 @@ export default () => {
         payload_encode: TraceEncodeType.Text,
         start_at: new Date().toISOString(),
         end_at: new Date(oneDayLaterTimestamp).toISOString(),
-        formatter: 'json',
+        formatter: LogTraceFormatter.JSON,
       }
       const { name } = await addTrace(traceData)
       emptyLogData()
diff --git a/src/i18n/LogTrace.js b/src/i18n/LogTrace.js
index 29c6980a8..eba6739ab 100644
--- a/src/i18n/LogTrace.js
+++ b/src/i18n/LogTrace.js
@@ -119,4 +119,8 @@ export default {
     zh: `确定跟踪文件中有效负载格式的格式。<br/>\`text\`：基于文本的协议或纯文本协议。建议在有效负载为JSON编码时使用<br/>\`hex\`：二进制十六进制编码。当有效负载是自定义二进制协议时，建议使用此选项<br/>\`hidden\`：有效负载被模糊化为 \`******\``,
     en: `Determine the format of the payload format in the trace file.<br/>\`text\`: Text-based protocol or plain text protocol.It is recommended when payload is JSON encoded.<br/>\`hex\`: Binary hexadecimal encode. It is recommended when payload is a custom binary protocol.<br/>\`hidden\`: payload is obfuscated as \`******\``,
   },
+  formatter: {
+    zh: '格式化',
+    en: 'Formatter',
+  },
 }
diff --git a/src/types/diagnose.d.ts b/src/types/diagnose.d.ts
index 058832d1f..5e1cb1b64 100644
--- a/src/types/diagnose.d.ts
+++ b/src/types/diagnose.d.ts
@@ -1,4 +1,4 @@
-import { LogTraceType, SlowSubType, TraceEncodeType } from './enum'
+import { LogTraceFormatter, LogTraceType, SlowSubType, TraceEncodeType } from './enum'
 
 export interface SlowSubConfig {
   enable: boolean
@@ -26,7 +26,7 @@ export type TraceRecord = {
   start_at: string
   end_at: string
   payload_encode: TraceEncodeType
-  formatter?: 'json' | 'plain'
+  formatter?: LogTraceFormatter
 }
 
 export type TraceFormRecord = {
@@ -38,6 +38,7 @@ export type TraceFormRecord = {
   ruleid: string
   startTime: [string, string] | [Date, Date]
   payload_encode: TraceEncodeType
+  formatter?: LogTraceFormatter
 }
 
 export interface TraceItem {
diff --git a/src/types/enum.ts b/src/types/enum.ts
index 6981060b0..d0c478efe 100644
--- a/src/types/enum.ts
+++ b/src/types/enum.ts
@@ -319,6 +319,11 @@ export enum LogTraceType {
   RuleID = 'ruleid',
 }
 
+export enum LogTraceFormatter {
+  JSON = 'json',
+  Text = 'text',
+}
+
 export const enum TraceEncodeType {
   Text = 'text',
   HEX = 'hex',
diff --git a/src/views/Diagnose/LogTrace/LogTrace.vue b/src/views/Diagnose/LogTrace/LogTrace.vue
index 00c25d1d1..fa749f9f1 100644
--- a/src/views/Diagnose/LogTrace/LogTrace.vue
+++ b/src/views/Diagnose/LogTrace/LogTrace.vue
@@ -175,6 +175,18 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item prop="formatter" :label="tl('formatter')">
+              <el-select v-model="record.formatter">
+                <el-option
+                  v-for="{ label, value } in formatterOpt"
+                  :key="value"
+                  :value="value"
+                  :label="label"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
       <template #footer>
@@ -201,7 +213,7 @@ import CheckIcon from '@/components/CheckIcon.vue'
 import FormItemLabel from '@/components/FormItemLabel.vue'
 import useFormRules from '@/hooks/useFormRules'
 import { TraceFormRecord, TraceItem, TraceRecord } from '@/types/diagnose'
-import { CheckStatus, LogTraceType, TraceEncodeType } from '@/types/enum'
+import { CheckStatus, LogTraceType, TraceEncodeType, LogTraceFormatter } from '@/types/enum'
 import { Plus } from '@element-plus/icons-vue'
 import { ElForm, FormRules, ElMessage as M, ElMessageBox as MB } from 'element-plus'
 import { omit, startCase } from 'lodash'
@@ -220,6 +232,7 @@ const createRawTraceForm = () => ({
   ruleid: '',
   startTime: ['', ''] as [string, string],
   payload_encode: TraceEncodeType.Text,
+  formatter: LogTraceFormatter.Text,
 })
 
 type TraceItemInTable = TraceItem & {
@@ -280,6 +293,11 @@ export default defineComponent({
       { label: 'Hidden', value: TraceEncodeType.Hidden },
     ]
 
+    const formatterOpt = [
+      { label: 'JSON', value: LogTraceFormatter.JSON },
+      { label: 'Text', value: LogTraceFormatter.Text },
+    ]
+
     const countTotalLogSize = (sizeMap: Record<string, number>) => {
       return Object.keys(sizeMap).reduce((total, currentNode) => total + sizeMap[currentNode], 0)
     }
@@ -311,11 +329,12 @@ export default defineComponent({
       createForm.value?.validate(async (valid: boolean) => {
         if (!valid) return
         createLoading.value = true
-        const { clientid, topic, ip_address, ruleid, startTime, type } = record.value
+        const { clientid, topic, ip_address, ruleid, startTime, type, formatter } = record.value
         let targetInfo: TraceRecord = {
           ...omit(record.value, ['clientid', 'topic', 'ip_address', 'startTime']),
           start_at: new Date(startTime[0]).toISOString(),
           end_at: new Date(startTime[1]).toISOString(),
+          ...(formatter ? { formatter } : {}),
         }
         switch (type) {
           case LogTraceType.ClientID:
@@ -422,6 +441,7 @@ export default defineComponent({
       typeOptions,
       record,
       encodeTypeOpt,
+      formatterOpt,
       LogTraceType,
       startCase,
       transMemorySizeNumToStr,

From e70b79e739c23decbc8d0689609eb12ad674aef5 Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Sun, 28 Apr 2024 11:40:27 +0800
Subject: [PATCH 2/2] chore(vue config): add `transpileDependencies` For a
 non-error compilation when switching branches

---
 vue.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue.config.js b/vue.config.js
index bf8a88da8..6cc715e49 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -26,7 +26,7 @@ module.exports = {
   assetsDir: 'static',
   publicPath: './',
   productionSourceMap: false,
-  transpileDependencies: ['@vue-flow/core'],
+  transpileDependencies: ['@vue-flow/core', '@emqx/shared-ui-utils'],
   configureWebpack: {
     plugins: [
       new MonacoWebpackPlugin({