[INLONG-10449][Dashboard] The field template for selecting a new data

inlong-dashboard/src/plugins/groups/common/GroupDataTemplateInfo.ts

@@ -96,6 +96,7 @@ export class GroupDataTemplateInfo implements DataWithBackend, RenderRow, Render
   @FieldDecorator({
     type: 'input',
     initialValue: 0,
+    hidden: true,
     rules: [{ required: true }],
   })
   @I18n('pages.GroupDataTemplate.Version')

inlong-dashboard/src/plugins/streams/common/StreamDefaultInfo.ts

@@ -222,43 +222,15 @@ export class StreamDefaultInfo implements DataWithBackend, RenderRow, RenderList
   })
   @I18n('meta.Stream.DataSeparator')
   dataSeparator: string;
-  @FieldDecorator({
-    type: 'select',
-    props: {
-      filterOption: true,
-      options: {
-        requestTrigger: ['onOpen', 'onSearch'],
-        requestService: keyword => ({
-          url: '/template/list',
-          method: 'POST',
-          data: {
-            keyword,
-            pageNum: 1,
-            pageSize: 20,
-          },
-        }),
-        requestParams: {
-          formatResult: result => {
-            return result?.list?.map(item => ({
-              ...item,
-              label: item.name,
-              value: item.name,
-            }));
-          },
-        },
-      },
-    },
-    rules: [],
-  })
-  @I18n('meta.Stream.SourceDataField.Template')
-  streamDataTemplate: string;
-
   @FieldDecorator({
     type: EditableTable,
     props: values => ({
       size: 'small',
       canDelete: record => !(record.id && [110].includes(values?.status)),
       canBatchAdd: true,
+      exOperation: {
+        templateOperation: !Boolean(values.id),
+      },
       columns: [
         {
           title: i18n.t('meta.Stream.FieldName'),

inlong-dashboard/src/ui/components/EditableTable/index.tsx

@@ -27,6 +27,7 @@ import { useUpdateEffect } from '@/ui/hooks';
 import isEqual from 'lodash/isEqual';
 import styles from './index.module.less';
 import FieldParseModule, { RowType } from '@/ui/components/FieldParseModule';
+import SelectTemplateModal from '@/ui/components/SelectTemplateModal';
 
 // Row data exposed to the outside
 type RowValueType = Record<string, unknown>;
@@ -52,7 +53,9 @@ export interface ColumnsItemProps {
   // The value will be erased when invisible
   visible?: (val: unknown, rowVal: RowValueType) => boolean;
 }
-
+interface exOperationType {
+  templateOperation: Boolean;
+}
 export interface EditableTableProps
   extends Omit<TableProps<any>, 'value' | 'onChange' | 'columns'> {
   // id comes from FormItem, like name
@@ -73,6 +76,7 @@ export interface EditableTableProps
   fieldNameKey?: string;
   fieldTypeKey?: string;
   fieldCommentKey?: string;
+  exOperation?: exOperationType;
 }
 
 const getRowInitialValue = (columns: EditableTableProps['columns']) =>
@@ -202,7 +206,15 @@ const EditableTable = ({
       triggerChange(newData);
     }
   };
-
+  const onClearAppend = (fields: RowType[]) => {
+    const newRecord: RecordType[] = fields?.map((field: RowType) => ({
+      _etid: Math.random().toString(),
+      ...field,
+    }));
+    setData(newRecord);
+    triggerChange(newRecord);
+    setIsTemplateModalVisible(false);
+  };
   const onOverrideByParseField = (fields: RowType[]) => {
     // append empty row if upsertKey not null
     if (upsetByFieldKey) {
@@ -343,7 +355,7 @@ const EditableTable = ({
     } as any);
   }
   const [isParseFieldModalVisible, setIsParseFieldModalVisible] = useState(false);
-
+  const [isTemplateModalVisible, setIsTemplateModalVisible] = useState(false);
   return (
     <>
       <FieldParseModule
@@ -353,7 +365,14 @@ const EditableTable = ({
         visible={isParseFieldModalVisible}
         onHide={() => {
           setIsParseFieldModalVisible(false);
-          console.log('on hide');
+        }}
+      />
+      <SelectTemplateModal
+        key={'select-template-modal'}
+        visible={isTemplateModalVisible}
+        onClearAppend={onClearAppend}
+        onHide={() => {
+          setIsTemplateModalVisible(false);
         }}
       />
       <Table
@@ -391,6 +410,16 @@ const EditableTable = ({
                   >
                     {t('components.EditableTable.DeleteAll')}
                   </Button>
+                  {rest.exOperation?.templateOperation ? (
+                    <Button
+                      key={'select_template'}
+                      type="link"
+                      style={{ padding: 0 }}
+                      onClick={() => setIsTemplateModalVisible(true)}
+                    >
+                      {t('components.EditableTable.TemplateSelect')}
+                    </Button>
+                  ) : null}
                 </>
               )
             : null

inlong-dashboard/src/ui/components/SelectTemplateModal/index.tsx

@@ -0,0 +1,147 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { useRequest } from '@/ui/hooks';
+import i18n from '@/i18n';
+import { useForm } from '@/ui/components/HighTable';
+import FormGenerator from '@/ui/components/FormGenerator';
+import { Modal, Table } from 'antd';
+
+export interface RowType {
+  fieldName: string;
+  fieldType: string;
+  fieldComment: string;
+}
+
+interface SelectTemplateModalProps {
+  visible: boolean;
+  onHide: () => void;
+  onClearAppend: (fields: RowType[]) => void;
+}
+
+const SelectTemplateModal: React.FC<SelectTemplateModalProps> = ({
+  visible,
+  onHide,
+  onClearAppend,
+}) => {
+  const [form] = useForm();
+  const handleCancel = () => {
+    onHide();
+  };
+  const { data, run: getData } = useRequest(
+    template => ({
+      url: '/template/get',
+      params: {
+        templateName: template,
+      },
+    }),
+    {
+      manual: true,
+    },
+  );
+
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'fieldName',
+      key: 'fieldName',
+    },
+    {
+      title: 'Type',
+      dataIndex: 'fieldType',
+      key: 'fieldType',
+    },
+    {
+      title: 'Field comment',
+      dataIndex: 'fieldComment',
+      key: 'fieldComment',
+    },
+  ];
+  const getFilterFormContent = () => {
+    return [
+      {
+        label: i18n.t('components.SelectTemplateModal.TemplateSelect'),
+        tooltip: i18n.t('components.SelectTemplateModal.SelectTooltip'),
+        name: 'streamDataTemplate',
+        type: 'select',
+        visible: values => {
+          return !Boolean(values.id);
+        },
+        props: values => ({
+          showSearch: true,
+          optionFilterProp: 'label',
+          allowClear: true,
+          options: {
+            requestTrigger: ['onOpen'],
+            requestService: keyword => ({
+              url: '/template/list',
+              method: 'POST',
+              data: {
+                keyword,
+                pageNum: 1,
+                pageSize: 20,
+              },
+            }),
+            requestParams: {
+              formatResult: result => {
+                return result?.list?.map(item => ({
+                  ...item,
+                  label: item.name,
+                  value: item.name,
+                }));
+              },
+            },
+          },
+        }),
+      },
+    ];
+  };
+
+  return (
+    <>
+      <Modal
+        width={1000}
+        title={i18n.t('components.SelectTemplateModal.SelectDataFromTemplate')}
+        key={'field-parse-module'}
+        open={visible}
+        onCancel={handleCancel}
+        onOk={() => {
+          onClearAppend(data?.fieldList);
+        }}
+      >
+        <FormGenerator
+          content={getFilterFormContent()}
+          form={form}
+          useMaxWidth
+          onValuesChange={(c, values) => {
+            if (Object.keys(c)[0] === 'streamDataTemplate') {
+              getData(c['streamDataTemplate']);
+            }
+          }}
+        />
+        <div>
+          <Table key="templateTable" rowKey="name" columns={columns} dataSource={data?.fieldList} />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default SelectTemplateModal;

inlong-dashboard/src/ui/locales/cn.json

@@ -530,6 +530,10 @@
   "components.EditableTable.NewLine": "新增一行",
   "components.EditableTable.BatchParseField": "批量解析字段",
   "components.EditableTable.DeleteAll": "删除全部",
+  "components.EditableTable.TemplateSelect": "选择模板",
+  "components.SelectTemplateModal.SelectDataFromTemplate": "从模板中导入数据",
+  "components.SelectTemplateModal.TemplateSelect": "模板选择",
+  "components.SelectTemplateModal.SelectTooltip": "选择择模板导入会覆盖原有添加的源数据字段",
   "components.FieldParseModule.BatchAddField": "批量添加",
   "components.FieldParseModule.Append": "追加",
   "components.FieldParseModule.Override": "覆盖",

inlong-dashboard/src/ui/locales/en.json

@@ -530,6 +530,10 @@
   "components.EditableTable.NewLine": "New line",
   "components.EditableTable.BatchParseField": "Batch add",
   "components.EditableTable.DeleteAll": "Delete all",
+  "components.EditableTable.TemplateSelect": "Select Template",
+  "components.SelectTemplateModal.SelectDataFromTemplate": "Select Data From Template",
+  "components.SelectTemplateModal.TemplateSelect": "Template Select",
+  "components.SelectTemplateModal.SelectTooltip": "Selecting a template to import will overwrite the original added source data fields",
   "components.FieldParseModule.BatchAddField": "Batch adding",
   "components.FieldParseModule.Append": "Append",
   "components.FieldParseModule.Override": "Override",

inlong-dashboard/src/ui/pages/GroupDataTemplate/CreateModal.tsx

@@ -38,7 +38,7 @@ const Comp: React.FC<Props> = ({ id, templateName, ...modalProps }) => {
 
   const { data: savedData, run: getData } = useRequest(
     () => ({
-      url: `/template/get/`,
+      url: `/template/get`,
       method: 'GET',
       params: {
         templateName: templateName,

inlong-dashboard/src/ui/pages/GroupDetail/DataStream/StreamItemModal.tsx

@@ -174,23 +174,6 @@ const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, mqType, ...modal
     await modalProps?.onOk(values);
     message.success(i18n.t('basic.OperatingSuccess'));
   };
-
-  const { run: getDataTemplateValue } = useRequest(
-    template => ({
-      url: '/template/get',
-      params: {
-        templateName: template,
-      },
-    }),
-    {
-      manual: true,
-      onSuccess: result => {
-        savedData.fieldList = result['fieldList'];
-        form.setFieldsValue(dataToValues(savedData));
-      },
-    },
-  );
-
   useUpdateEffect(() => {
     if (modalProps.open) {
       // open
@@ -215,11 +198,6 @@ const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, mqType, ...modal
         content={formContent}
         form={form}
         useMaxWidth
-        onValuesChange={(c, values) => {
-          if (Object.keys(c)[0] === 'streamDataTemplate') {
-            getDataTemplateValue(c['streamDataTemplate']);
-          }
-        }}
       />
     </Modal>
   );