[inlong] 03/03: [INLONG-7971][Dashboard] Support batch import stream fields by Excel (#7972)

[dockerzhang]

This is an automated email from the ASF dual-hosted git repository.

dockerzhang pushed a commit to branch branch-1.7
in repository https://gitbox.apache.org/repos/asf/inlong.git

commit 412e5605442c9d36086885af41ea95c1d4e00874
Author: feat <featzh...@outlook.com>
AuthorDate: Mon May 15 10:19:20 2023 +0800

    [INLONG-7971][Dashboard] Support batch import stream fields by Excel (#7972)
---
 .../src/ui/components/FieldParseModule/index.tsx   | 80 +++++++++++++++++++++-
 inlong-dashboard/src/ui/locales/cn.json            |  1 +
 inlong-dashboard/src/ui/locales/en.json            |  1 +
 3 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/inlong-dashboard/src/ui/components/FieldParseModule/index.tsx 
b/inlong-dashboard/src/ui/components/FieldParseModule/index.tsx
index add2298bc..e76fe5541 100644
--- a/inlong-dashboard/src/ui/components/FieldParseModule/index.tsx
+++ b/inlong-dashboard/src/ui/components/FieldParseModule/index.tsx
@@ -18,20 +18,24 @@
  */
 
 import React, { useState } from 'react';
-import { Button, Divider, Input, Modal, Radio, Space, Table } from 'antd';
-
+import { Button, Divider, Input, message, Modal, Radio, Space, Table, Upload } 
from 'antd';
+import type { UploadProps } from 'antd';
 import {
   CopyOutlined,
   DatabaseOutlined,
   DeleteOutlined,
+  DownloadOutlined,
   FileAddOutlined,
+  FileExcelOutlined,
   FileOutlined,
   ForkOutlined,
   FormOutlined,
   PlayCircleOutlined,
+  UploadOutlined,
 } from '@ant-design/icons';
 import { useRequest } from '@/ui/hooks';
 import { useTranslation } from 'react-i18next';
+import { config } from '@/configs/default';
 
 export interface RowType {
   fieldName: string;
@@ -85,6 +89,50 @@ const FieldParseModule: React.FC<FieldParseModuleProps> = ({
     onAppend([...previewData]);
     onHide();
   };
+  const downloadTemplate = async () => {
+    try {
+      const response = await fetch(config.requestPrefix + 
'/stream/fieldsImportTemplate');
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(new Blob([blob]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', 'InLong-stream-fields-template.xlsx');
+      document.body.appendChild(link);
+      link.click();
+      link.parentNode?.removeChild(link);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const uploadProps: UploadProps = {
+    name: 'file',
+    action: config.requestPrefix + '/stream/parseFieldsByExcel',
+    accept: '.xlsx',
+    headers: {
+      authorization: 'authorization-text',
+    },
+    beforeUpload: file => {
+      if (file.type !== 
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+        message.error(t('components.FieldParseModule.OnlyUploadExcelFile'));
+        return false;
+      }
+      return true;
+    },
+    onChange(info) {
+      if (info.file.status !== 'uploading') {
+        console.log(`${info.file} file uploading.`);
+      }
+      if (info.file.status === 'done') {
+        // upload success.
+        let newPreviewData = info.file.response.data;
+        setPreviewData(newPreviewData);
+        console.log(`${info.file.name} file upload success.`);
+      } else if (info.file.status === 'error') {
+        console.log(`${info.file.name} file upload failed.`);
+      }
+    },
+  };
 
   const handleOverride = () => {
     onOverride(previewData);
@@ -231,6 +279,16 @@ user_age,int,age of user`);
               <FileOutlined />
               CSV
             </Radio.Button>
+            <Radio.Button
+              key={'module_excel'}
+              value="excel"
+              onClick={() => {
+                setPreviewData(null);
+              }}
+            >
+              <FileExcelOutlined />
+              Excel
+            </Radio.Button>
           </Radio.Group>
         </div>
         <div>
@@ -284,6 +342,24 @@ user_age,int,age of user`);
           )}
         </div>
 
+        {selectedFormat === 'excel' && (
+          <div>
+            <Upload {...uploadProps}>
+              <Button key="upload" type={'primary'} icon={<UploadOutlined />} 
size={'small'}>
+                {t('components.FieldParseModule.Upload')}
+              </Button>
+            </Upload>
+            <Button
+              key="downloadTemplate"
+              onClick={downloadTemplate}
+              icon={<DownloadOutlined />}
+              size={'small'}
+            >
+              {t('components.FieldParseModule.DownloadTemplate')}
+            </Button>
+          </div>
+        )}
+
         <div>
           <Table
             key="previewTable"
diff --git a/inlong-dashboard/src/ui/locales/cn.json 
b/inlong-dashboard/src/ui/locales/cn.json
index 96cc47376..63a74f4af 100644
--- a/inlong-dashboard/src/ui/locales/cn.json
+++ b/inlong-dashboard/src/ui/locales/cn.json
@@ -519,6 +519,7 @@
   "components.FieldParseModule.PasteTemplate": "粘贴模板",
   "components.FieldParseModule.Parse": "解析",
   "components.FieldParseModule.Upload": "上传",
+  "components.FieldParseModule.OnlyUploadExcelFile": "只能上传 Excel 文件(.xlsx) !",
   "components.FieldParseModule.DownloadTemplate": "下载模板",
   "components.FormGenerator.plugins.PleaseChoose": "请选择",
   "components.FormGenerator.plugins.PleaseInput": "请输入",
diff --git a/inlong-dashboard/src/ui/locales/en.json 
b/inlong-dashboard/src/ui/locales/en.json
index b76aabad5..275b91097 100644
--- a/inlong-dashboard/src/ui/locales/en.json
+++ b/inlong-dashboard/src/ui/locales/en.json
@@ -519,6 +519,7 @@
   "components.FieldParseModule.PasteTemplate": "Paste template",
   "components.FieldParseModule.Parse": "Parse",
   "components.FieldParseModule.Upload": "Upload",
+  "components.FieldParseModule.OnlyUploadExcelFile": "Only upload Excel 
File(.xlsx) !",
   "components.FieldParseModule.DownloadTemplate": "Download template",
   "components.FormGenerator.plugins.PleaseChoose": "Please select",
   "components.FormGenerator.plugins.PleaseInput": "Please input",