juzhiyuan commented on a change in pull request #1240:
URL: https://github.com/apache/apisix-dashboard/pull/1240#discussion_r556997335
##########
File path: web/src/pages/Route/locales/zh-CN.ts
##########
@@ -125,4 +125,8 @@ export default {
'page.route.TabPane.authentication': '认证',
'page.route.TabPane.response': '响应结果',
'page.route.debugWithoutAuth': '当前请求不启用任何认证方式。',
+ 'page.route.button.exportOpenApi': '导出 OpenApi',
+ 'page.route.exportRoutesTips': '请选择下载文件的类型',
+ 'page.route.button.importOpenApi': '导入 OpenApi',
Review comment:
```suggestion
'page.route.button.importOpenApi': '导入 OpenAPI',
```
##########
File path: web/src/pages/Route/List.tsx
##########
@@ -63,6 +104,84 @@ const Page: React.FC = () => {
});
};
+ const handleExport = (exportFileType: number) => {
+ exportRoutes(selectedRowKeys.join(',')).then((resp) => {
+ let exportFile: string;
+ let exportFileName =
`APISIX_routes_${moment().format('YYYYMMDDHHmmss')}`;
+
+ switch (exportFileType) {
+ case ExportFileType.YAML:
+ exportFile = yaml.dump(resp.data);
+ exportFileName = `${exportFileName}.yaml`;
+ break;
+ case ExportFileType.JSON:
+ default:
+ exportFile = js_beautify(JSON.stringify(resp.data), {
+ indent_size: 2,
+ });
+ exportFileName = `${exportFileName}.json`;
+ break;
+ }
+
+ const blob = new Blob([exportFile], {
+ type: EXPORT_FILE_MIME_TYPE_SUPPORTED[exportFileType],
+ });
+ const aLink = document.createElement('a');
+ const evt = document.createEvent('MouseEvents');
+ evt.initEvent('click', false, true);
+ aLink.download = exportFileName;
+ aLink.href = window.URL.createObjectURL(blob);
+ aLink.dispatchEvent(evt);
+ });
+ };
+
+ const handleImport = () => {
+ const formData = new FormData();
+
+ formData.append('file', uploadFileList[0]);
+
+ importRoutes(formData).then(() => {
+ handleTableActionSuccessResponse(
+ `${formatMessage({ id: 'page.route.button.importOpenApi'
})}${formatMessage({
+ id: 'component.status.success',
+ })}`,
+ );
+ setShowImportModal(false);
+ });
+ };
+
+ const ListFooter: React.FC = () => {
+ return (
+ <>
Review comment:
extra Fragment
##########
File path: web/src/pages/Route/List.tsx
##########
@@ -18,29 +18,70 @@ import React, { useRef, useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
-import { Button, Popconfirm, notification, Tag, Space, Select } from 'antd';
+import {
+ Button,
+ Popconfirm,
+ notification,
+ Tag,
+ Space,
+ Select,
+ Radio,
+ Form,
+ Upload,
+ Modal,
+ Divider,
+} from 'antd';
import { history, useIntl } from 'umi';
-import { PlusOutlined, BugOutlined } from '@ant-design/icons';
+import { PlusOutlined, BugOutlined, ExportOutlined, ImportOutlined } from
'@ant-design/icons';
+import { js_beautify } from 'js-beautify';
+import yaml from 'js-yaml';
+import moment from 'moment';
import { timestampToLocaleString } from '@/helpers';
-import { fetchList, remove, fetchLabelList, updateRouteStatus } from
'./service';
+import { RcFile } from 'antd/lib/upload';
Review comment:
```suggestion
import type { RcFile } from 'antd/lib/upload';
```
##########
File path: web/src/pages/Route/List.tsx
##########
@@ -63,6 +104,84 @@ const Page: React.FC = () => {
});
};
+ const handleExport = (exportFileType: number) => {
+ exportRoutes(selectedRowKeys.join(',')).then((resp) => {
+ let exportFile: string;
+ let exportFileName =
`APISIX_routes_${moment().format('YYYYMMDDHHmmss')}`;
+
+ switch (exportFileType) {
+ case ExportFileType.YAML:
+ exportFile = yaml.dump(resp.data);
+ exportFileName = `${exportFileName}.yaml`;
+ break;
+ case ExportFileType.JSON:
+ default:
+ exportFile = js_beautify(JSON.stringify(resp.data), {
+ indent_size: 2,
+ });
+ exportFileName = `${exportFileName}.json`;
+ break;
+ }
+
+ const blob = new Blob([exportFile], {
+ type: EXPORT_FILE_MIME_TYPE_SUPPORTED[exportFileType],
+ });
+ const aLink = document.createElement('a');
Review comment:
Please take a look at `file-saver` if it's helpful
https://github.com/eligrey/FileSaver.js
##########
File path: web/src/pages/Route/List.tsx
##########
@@ -63,6 +104,84 @@ const Page: React.FC = () => {
});
};
+ const handleExport = (exportFileType: number) => {
Review comment:
number is not clear enough IMO, could we use keyof or something else to
have a clearer typing?
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
