This is an automated email from the ASF dual-hosted git repository.
dockerzhang 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 5f736f6651 [INLONG-8486][Dashboard] Data synchronization field mapping
optimization (#8487)
5f736f6651 is described below
commit 5f736f6651089bc99b6703c33e27ffb1d7334141
Author: Lizhen <[email protected]>
AuthorDate: Tue Jul 11 11:34:08 2023 +0800
[INLONG-8486][Dashboard] Data synchronization field mapping optimization
(#8487)
Co-authored-by: v_haifxu <[email protected]>
---
.../src/ui/components/FieldList/DetailModal.tsx | 76 +++++++++++++++++++++-
.../src/ui/pages/SynchronizeDetail/Info/index.tsx | 16 ++++-
.../src/ui/pages/SynchronizeDetail/index.tsx | 4 +-
3 files changed, 90 insertions(+), 6 deletions(-)
diff --git a/inlong-dashboard/src/ui/components/FieldList/DetailModal.tsx
b/inlong-dashboard/src/ui/components/FieldList/DetailModal.tsx
index a4324d2b61..c6042aeef4 100644
--- a/inlong-dashboard/src/ui/components/FieldList/DetailModal.tsx
+++ b/inlong-dashboard/src/ui/components/FieldList/DetailModal.tsx
@@ -59,7 +59,7 @@ const Comp: React.FC<Props> = ({
const { data, run: getData } = useRequest(
streamId => ({
- url: `/stream/get`,
+ url: `/stream/getBrief`,
params: {
groupId: inlongGroupId,
streamId,
@@ -95,6 +95,65 @@ const Comp: React.FC<Props> = ({
}),
);
+ const sinkFieldList: ColumnsItemProps[] = [
+ {
+ title: i18n.t('meta.Sinks.SourceFieldName'),
+ dataIndex: 'sourceFieldName',
+ type: 'input',
+ rules: [
+ { required: true },
+ {
+ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
+ message: i18n.t('meta.Stream.FieldNameRule'),
+ },
+ ],
+ props: {
+ disabled: true,
+ },
+ },
+ {
+ title: i18n.t('meta.Sinks.SourceFieldType'),
+ dataIndex: 'sourceFieldType',
+ type: 'select',
+ initialValue: fieldTypes[0].label,
+ rules: [{ required: true }],
+ props: {
+ disabled: true,
+ options: fieldTypes,
+ },
+ },
+ {
+ title: i18n.t('meta.Stream.FieldName'),
+ dataIndex: 'fieldName',
+ type: 'input',
+ rules: [
+ { required: true },
+ {
+ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
+ message: i18n.t('meta.Stream.FieldNameRule'),
+ },
+ ],
+ props: (text, record) => ({
+ disabled: record.id,
+ }),
+ },
+ {
+ title: i18n.t('meta.Stream.FieldType'),
+ dataIndex: 'fieldType',
+ type: 'select',
+ initialValue: '',
+ props: (text, record) => ({
+ disabled: record.id,
+ options: isSource === true ? fieldTypes : fieldAllTypes[sinkType],
+ }),
+ rules: [{ required: true }],
+ },
+ {
+ title: i18n.t('meta.Stream.FieldComment'),
+ dataIndex: 'fieldComment',
+ },
+ ];
+
const fieldList: ColumnsItemProps[] = [
{
title: i18n.t('meta.Stream.FieldName'),
@@ -175,6 +234,19 @@ const Comp: React.FC<Props> = ({
}
}, [getData, getSinkData, inlongStreamId]);
+ useEffect(() => {
+ if (!id && isSource === false) {
+ form.setFieldsValue({
+ sinkFieldList: data?.fieldList.map(item => ({
+ sourceFieldName: item.fieldName,
+ sourceFieldType: item.fieldType,
+ fieldName: item.fieldName,
+ fieldType: '',
+ })),
+ });
+ }
+ }, [data?.fieldList, form, getData, getSinkData, id, inlongStreamId,
isSource]);
+
return (
<>
<Modal
@@ -191,7 +263,7 @@ const Comp: React.FC<Props> = ({
<Form form={form} initialValues={isSource === true ? data :
sinkData?.list[0]}>
<Form.Item name={isSource === true ? 'fieldList' :
'sinkFieldList'}>
<EditableTable
- columns={fieldList}
+ columns={isSource === true ? fieldList : sinkFieldList}
dataSource={isSource === true ? data?.fieldList :
sinkData?.sinkFieldList}
></EditableTable>
</Form.Item>
diff --git a/inlong-dashboard/src/ui/pages/SynchronizeDetail/Info/index.tsx
b/inlong-dashboard/src/ui/pages/SynchronizeDetail/Info/index.tsx
index 8db8c2a5b8..ee4c5b0e0d 100644
--- a/inlong-dashboard/src/ui/pages/SynchronizeDetail/Info/index.tsx
+++ b/inlong-dashboard/src/ui/pages/SynchronizeDetail/Info/index.tsx
@@ -59,7 +59,18 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly,
isCreate }: Props, ref)
form.setFieldsValue(data);
},
});
-
+ const { data: streamDetail, run: getStreamDetail } = useRequest(
+ streamId => ({
+ url: `/stream/getBrief`,
+ params: {
+ groupId: inlongGroupId,
+ streamId,
+ },
+ }),
+ {
+ manual: true,
+ },
+ );
const { data: streamData, run: getDataStream } = useRequest(
{
url: '/stream/list',
@@ -72,6 +83,7 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly,
isCreate }: Props, ref)
ready: isUpdateStream,
refreshDeps: [inlongGroupId],
onSuccess: result => {
+ getStreamDetail(result.list[0].inlongStreamId);
form.setFieldValue('inlongStreamId', result.list[0].inlongStreamId);
form.setFieldValue('streamName', result.list[0].name);
},
@@ -92,8 +104,8 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly,
isCreate }: Props, ref)
inlongGroupId: values.inlongGroupId,
inlongStreamId: values.inlongStreamId,
name: values.streamName,
+ fieldList: streamDetail?.fieldList,
};
-
if (streamData !== undefined) {
submitDataStream['version'] = streamData?.list[0].version;
}
diff --git a/inlong-dashboard/src/ui/pages/SynchronizeDetail/index.tsx
b/inlong-dashboard/src/ui/pages/SynchronizeDetail/index.tsx
index 7567618b3a..cde535ca17 100644
--- a/inlong-dashboard/src/ui/pages/SynchronizeDetail/index.tsx
+++ b/inlong-dashboard/src/ui/pages/SynchronizeDetail/index.tsx
@@ -176,7 +176,7 @@ const Comp: React.FC = () => {
<Steps
current={current}
size="small"
- style={{ width: 900, margin: 'auto' }}
+ style={{ width: 900, margin: 'auto', marginBottom: 20 }}
onChange={c => setCurrent(c)}
>
{list.map((item, index) => (
@@ -189,7 +189,7 @@ const Comp: React.FC = () => {
</Steps>
)}
- <Div style={{ marginTop: 30 }}>
+ <Div>
{list.map(({ content: Content, ...item }, index) => {
// Lazy load the content of the step, and at the same time make the
loaded useCache content not destroy
const child =
