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 20a21d1b8 [INLONG-7971][Dashboard] Support batch import stream fields
by Excel (#7972)
20a21d1b8 is described below
commit 20a21d1b8f2478b586c7e39a15e0beb895123155
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",
