[INLONG-9219][Dashboard] Stream advanced options parameter optimizati…

…on (#9220)
apache · Nov 10, 2023 · 378c503 · 378c503
1 parent 3aa8d28
commit 378c503
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 6 deletions.
diff --git a/inlong-dashboard/src/ui/locales/cn.json b/inlong-dashboard/src/ui/locales/cn.json
@@ -458,6 +458,7 @@
   "meta.Stream.ExecuteSuccess": "执行成功",
   "meta.Stream.WrapType": "消息打包格式",
   "meta.Stream.WrapTypeHelp": "消息体打包类型，默认 InLongMsg V0。Raw：不对消息体进行任何协议打包，InLongMsg V0：六段式打包协议，InLongMsg V1：PB 打包协议",
+  "meta.Stream.PredefinedFields": "预定义字段",
   "meta.Transform.Name": "转换名称",
   "meta.Transform.NameRule": "只能包含英文字母、数字、点号(.)、中划线(-)、下划线(_)",
   "meta.Transform.Type": "转换类型",

diff --git a/inlong-dashboard/src/ui/locales/en.json b/inlong-dashboard/src/ui/locales/en.json
@@ -458,6 +458,7 @@
   "meta.Stream.ExecuteSuccess": "Execution Success",
   "meta.Stream.WrapType": "Message type",
   "meta.Stream.WrapTypeHelp": "Message body packaging type, default InLongMsg V0. Raw: No protocol packaging of the message body, InLongMsg V0: Six-stage packaging protocol, InLongMsg V1: PB packaging protocol",
+  "meta.Stream.PredefinedFields": "Predefined fields",
   "meta.Transform.Name": "Transform name",
   "meta.Transform.NameRule": "Only supports letters, numbers, dots(.), minus(-), and underscores(_)",
   "meta.Transform.Type": "Transform Type",

diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/StreamItemModal.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/StreamItemModal.tsx
@@ -25,7 +25,8 @@ import { useUpdateEffect, useRequest } from '@/ui/hooks';
 import i18n from '@/i18n';
 import { useLoadMeta, useDefaultMeta, StreamMetaType } from '@/plugins';
 import request from '@/core/utils/request';
-import { dataToValues, valuesToData } from './helper';
+import { dataToString, dataToValues, valuesToData } from './helper';
+import EditableTable from '@/ui/components/EditableTable';
 
 export interface Props extends ModalProps {
   inlongGroupId: string;
@@ -104,6 +105,37 @@ const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, mqType, ...modal
         },
         visible: mqType === 'PULSAR',
       },
+      {
+        type: EditableTable,
+        label: i18n.t('meta.Stream.PredefinedFields'),
+        name: 'predefinedFields',
+        visible: mqType === 'PULSAR',
+        isPro: true,
+        initialValue: [],
+        props: values => ({
+          size: 'small',
+          canBatchAdd: false,
+          editing: !Boolean(values?.id),
+          columns: [
+            {
+              title: 'Key',
+              dataIndex: 'keyName',
+              rules: [
+                { required: true },
+                {
+                  pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
+                },
+              ],
+            },
+            {
+              type: 'input',
+              title: 'Value',
+              dataIndex: 'keyValue',
+              rules: [{ required: true }],
+            },
+          ],
+        }),
+      },
     ];
   }, [entityFields, mqType]);
 
@@ -124,6 +156,11 @@ const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, mqType, ...modal
   const onOk = async () => {
     const isUpdate = !!inlongStreamId;
     const values = await form.validateFields();
+    if (values?.predefinedFields?.length !== 0) {
+      values.predefinedFields = dataToString(values.predefinedFields).join('&');
+    } else {
+      values.predefinedFields = '';
+    }
     const submitData = valuesToData(values, inlongGroupId);
     if (isUpdate) {
       submitData.id = savedData?.id;

diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/helper.ts b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/helper.ts
@@ -19,13 +19,13 @@
 
 // Convert form data into interface submission data format
 export const valuesToData = (values, inlongGroupId) => {
-  const { inlongStreamId, predefinedFields = [], rowTypeFields = [], version, ...rest } = values;
+  const { inlongStreamId, predefinedField = [], rowTypeFields = [], version, ...rest } = values;
 
-  const fieldList = predefinedFields.concat(rowTypeFields).map((item, idx) => ({
+  const fieldList = predefinedField.concat(rowTypeFields).map((item, idx) => ({
     ...item,
     inlongGroupId,
     inlongStreamId,
-    isPredefinedField: idx < predefinedFields.length ? 1 : 0,
+    isPredefinedField: idx < predefinedField.length ? 1 : 0,
   }));
 
   const output = {
@@ -44,19 +44,48 @@ export const valuesToData = (values, inlongGroupId) => {
 export const dataToValues = data => {
   const fieldList = data?.fieldList?.reduce(
     (acc, cur) => {
-      cur.isPredefinedField ? acc.predefinedFields.push(cur) : acc.rowTypeFields.push(cur);
+      cur.isPredefinedField ? acc.predefinedField.push(cur) : acc.rowTypeFields.push(cur);
       return acc;
     },
     {
-      predefinedFields: [],
+      predefinedField: [],
       rowTypeFields: [],
     },
   );
 
   const output = {
     ...data,
     ...fieldList,
+    predefinedFields: stringToData(data?.predefinedFields),
   };
 
   return output;
 };
+
+export const dataToString = data => {
+  const objs = data.reduce((amount, item) => {
+    amount[item.keyName] = item.keyValue;
+    return amount;
+  }, {});
+
+  const list = arr => {
+    let list = [];
+    const keys = Object.keys(arr);
+    keys.forEach(key => {
+      list.push([key, arr[key]].join('='));
+    });
+    return list;
+  };
+
+  return list(objs);
+};
+
+export const stringToData = arr => {
+  return arr === null || arr === ''
+    ? []
+    : arr.split('&').reduce((amount, item) => {
+        const keyName = item.split('=');
+        amount.push({ keyName: keyName[0], keyValue: keyName[1] });
+        return amount;
+      }, []);
+};