[inlong] branch master updated: [INLONG-6900][Dashboard] Support pulling up the field list of Source in Sink (#6901)

[dockerzhang]

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 3cb3b37b9 [INLONG-6900][Dashboard] Support pulling up the field list 
of Source in Sink (#6901)
3cb3b37b9 is described below

commit 3cb3b37b94697678fd92dafe7b8a5cafc2c91add
Author: Daniel <lee...@apache.org>
AuthorDate: Thu Dec 15 18:44:46 2022 +0800

    [INLONG-6900][Dashboard] Support pulling up the field list of Source in 
Sink (#6901)
---
 .../pages/GroupDetail/DataStorage/DetailModal.tsx  | 47 +++++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx 
b/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
index 5d47c9934..4da3893a9 100644
--- a/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Button, Skeleton, Modal, message } from 'antd';
 import { ModalProps } from 'antd/es/modal';
 import { useRequest, useUpdateEffect } from '@/hooks';
@@ -44,6 +44,8 @@ const Comp: React.FC<DetailModalProps> = ({ inlongGroupId, 
defaultType, id, ...m
   // A: Avoid the table of the fields triggering the monitoring of the column 
change.
   const [sinkType, setSinkType] = useState('');
 
+  const [changedValues, setChangedValues] = useState<Record<string, any>>({});
+
   const { Entity } = useLoadMeta<SinkMetaType>('sink', sinkType);
 
   const { data: groupData, run: getGroupData } = 
useRequest(`/group/get/${inlongGroupId}`, {
@@ -70,10 +72,48 @@ const Comp: React.FC<DetailModalProps> = ({ inlongGroupId, 
defaultType, id, ...m
     },
   );
 
+  const { data: streamDetail, run: getStreamDetail } = useRequest(
+    streamId => ({
+      url: `/stream/get`,
+      params: {
+        groupId: inlongGroupId,
+        streamId,
+      },
+    }),
+    {
+      manual: true,
+    },
+  );
+
+  useEffect(() => {
+    if (changedValues.inlongStreamId) {
+      getStreamDetail(changedValues.inlongStreamId);
+    }
+  }, [getStreamDetail, changedValues.inlongStreamId]);
+
+  useEffect(() => {
+    if (
+      Entity &&
+      streamDetail &&
+      streamDetail.fieldList?.length &&
+      Entity.FieldList?.some(item => item.name === 'sinkFieldList')
+    ) {
+      form.setFieldsValue({
+        sinkFieldList: streamDetail.fieldList.map(item => ({
+          sourceFieldName: item.fieldName,
+          sourceFieldType: item.fieldType,
+          fieldName: item.fieldName,
+          fieldType: '',
+        })),
+      });
+    }
+  }, [Entity, streamDetail, form]);
+
   useUpdateEffect(() => {
     if (modalProps.visible) {
       // open
       getGroupData();
+      setChangedValues({});
       if (id) {
         getData(id);
       } else {
@@ -141,7 +181,10 @@ const Comp: React.FC<DetailModalProps> = ({ inlongGroupId, 
defaultType, id, ...m
           content={formContent}
           form={form}
           initialValues={id ? data : { inlongGroupId }}
-          onValuesChange={(c, values) => setSinkType(values.sinkType)}
+          onValuesChange={(c, values) => {
+            setChangedValues(c);
+            setSinkType(values.sinkType);
+          }}
         />
       )}
     </Modal>