This is an automated email from the ASF dual-hosted git repository. lzwang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/inlong.git
The following commit(s) were added to refs/heads/master by this push: new 378c5036af [INLONG-9219][Dashboard] Stream advanced options parameter optimization (#9220) 378c5036af is described below commit 378c5036afa49d6b1add35862347c1b77c8c1578 Author: Lizhen <88174078+bluew...@users.noreply.github.com> AuthorDate: Fri Nov 10 10:19:25 2023 +0800 [INLONG-9219][Dashboard] Stream advanced options parameter optimization (#9220) --- inlong-dashboard/src/ui/locales/cn.json | 1 + inlong-dashboard/src/ui/locales/en.json | 1 + .../GroupDetail/DataStream/StreamItemModal.tsx | 39 +++++++++++++++++++++- .../src/ui/pages/GroupDetail/DataStream/helper.ts | 39 +++++++++++++++++++--- 4 files changed, 74 insertions(+), 6 deletions(-) diff --git a/inlong-dashboard/src/ui/locales/cn.json b/inlong-dashboard/src/ui/locales/cn.json index e389630a60..c6b471a58b 100644 --- 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 index f54f0d2c62..4fb40ea47f 100644 --- 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 index b5ed997196..f729dd99a4 100644 --- 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 index 01e86e5bf3..b678af03e5 100644 --- 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,11 +44,11 @@ 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: [], }, ); @@ -56,7 +56,36 @@ export const dataToValues = data => { 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; + }, []); +};