You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2020/06/04 09:36:33 UTC
[incubator-apisix-dashboard] branch next updated: Feat route list
(#243)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
The following commit(s) were added to refs/heads/next by this push:
new 30173ed Feat route list (#243)
30173ed is described below
commit 30173ed1c8d1f7c510341adbc5e38f5b595f5d2a
Author: 琚致远 <ju...@apache.org>
AuthorDate: Thu Jun 4 17:36:25 2020 +0800
Feat route list (#243)
* feat: initial route list
* feat: added list page
* feat: added table
---
config/routes.ts | 8 ++++-
src/locales/en-US/menu.ts | 1 +
src/locales/zh-CN/menu.ts | 1 +
src/pages/Routes/List.tsx | 79 ++++++++++++++++++++++++++++++++++++++++++++
src/pages/Routes/service.ts | 4 +++
src/pages/Routes/typing.d.ts | 6 ++++
src/transforms/global.ts | 5 +--
7 files changed, 101 insertions(+), 3 deletions(-)
diff --git a/config/routes.ts b/config/routes.ts
index 84ea03d..6938834 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -40,7 +40,13 @@ const routes = [
routes: [
{
path: '/routes',
- redirect: '/routes/create',
+ redirect: '/routes/list',
+ },
+ {
+ path: '/routes/list',
+ name: 'list',
+ icon: 'BarsOutlined',
+ component: './Routes/List',
},
{
path: '/routes/create',
diff --git a/src/locales/en-US/menu.ts b/src/locales/en-US/menu.ts
index 1409f6d..90b066f 100644
--- a/src/locales/en-US/menu.ts
+++ b/src/locales/en-US/menu.ts
@@ -54,6 +54,7 @@ export default {
'menu.ssl.create': 'Create',
'menu.setting': 'Settings',
'menu.routes': 'Route',
+ 'menu.routes.list': 'Route List',
'menu.routes.create': 'Create a Route',
'menu.routes.edit': 'Edit the Route',
};
diff --git a/src/locales/zh-CN/menu.ts b/src/locales/zh-CN/menu.ts
index 6a6f5c6..888b1c6 100644
--- a/src/locales/zh-CN/menu.ts
+++ b/src/locales/zh-CN/menu.ts
@@ -54,6 +54,7 @@ export default {
'menu.ssl.create': '创建',
'menu.setting': '设置',
'menu.routes': '路由',
+ 'menu.routes.list': '列表',
'menu.routes.create': '创建',
'menu.routes.edit': '编辑',
};
diff --git a/src/pages/Routes/List.tsx b/src/pages/Routes/List.tsx
new file mode 100644
index 0000000..cc6d6dc
--- /dev/null
+++ b/src/pages/Routes/List.tsx
@@ -0,0 +1,79 @@
+import React, { useRef } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
+import { history } from 'umi';
+import { Button, Popconfirm, notification } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+
+import { ListItem } from '@/transforms/global';
+import { fetchRouteList, removeRoute } from './service';
+
+const RouteList: React.FC = () => {
+ const ref = useRef<ActionType>();
+
+ const columns: ProColumns<ListItem<RouteModule.BaseData>>[] = [
+ {
+ title: 'ID',
+ dataIndex: 'id',
+ sortOrder: 'descend',
+ hideInSearch: true,
+ },
+ {
+ title: '名称',
+ dataIndex: 'name',
+ },
+ {
+ title: '描述',
+ dataIndex: 'desc',
+ },
+ {
+ title: '操作',
+ valueType: 'option',
+ render: (_, record) => (
+ <>
+ <Button
+ type="primary"
+ onClick={() => history.push(`/routes/${record.id}/edit`)}
+ style={{ marginRight: 10 }}
+ >
+ 编辑
+ </Button>
+ <Popconfirm
+ title="确定删除该路由吗？"
+ onConfirm={() => {
+ removeRoute(record.id!).then(() => {
+ notification.success({ message: '删除路由成功' });
+ /* eslint-disable no-unused-expressions */
+ ref.current?.reload();
+ });
+ }}
+ >
+ <Button type="primary" danger>
+ 删除
+ </Button>
+ </Popconfirm>
+ </>
+ ),
+ },
+ ];
+
+ return (
+ <PageHeaderWrapper>
+ <ProTable<ListItem<RouteModule.BaseData>>
+ actionRef={ref}
+ rowKey="id"
+ request={() => fetchRouteList()}
+ columns={columns}
+ search={false}
+ toolBarRender={() => [
+ <Button type="primary" onClick={() => history.push(`/routes/create`)}>
+ <PlusOutlined />
+ 创建
+ </Button>,
+ ]}
+ />
+ </PageHeaderWrapper>
+ );
+};
+
+export default RouteList;
diff --git a/src/pages/Routes/service.ts b/src/pages/Routes/service.ts
index f53c0f2..247f45b 100644
--- a/src/pages/Routes/service.ts
+++ b/src/pages/Routes/service.ts
@@ -16,3 +16,7 @@ export const updateRoute = (rid: number, data: Pick<RouteModule.Data, 'data'>, w
export const fetchRoute = (rid: number, wid: number = 0) =>
request(`/workspaces/${wid}/routes/${rid}`).then((data) => transformRouteData(data));
+
+export const fetchRouteList = (wid = 0) => request(`/workspaces/${wid}/routes`);
+
+export const removeRoute = (rid: number, wid = 0) => request(`/workspaces/${wid}/routes/${rid}`);
diff --git a/src/pages/Routes/typing.d.ts b/src/pages/Routes/typing.d.ts
index acc91f7..9d28d4b 100644
--- a/src/pages/Routes/typing.d.ts
+++ b/src/pages/Routes/typing.d.ts
@@ -14,6 +14,12 @@ declare namespace RouteModule {
type HttpMethod = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS' | 'PATCH';
type RequestProtocol = 'https' | 'http' | 'websocket';
+ type BaseData = {
+ id?: number;
+ name: string;
+ desc: string;
+ };
+
type Step1Data = {
name: string;
desc: string;
diff --git a/src/transforms/global.ts b/src/transforms/global.ts
index 4d8e3fd..13b29e3 100644
--- a/src/transforms/global.ts
+++ b/src/transforms/global.ts
@@ -22,6 +22,7 @@ interface ListData<T> {
export interface ListItem<T> extends Node<T> {
displayKey: string;
+ id?: number;
}
const key2id = (key: string) => parseInt(key.replace(/^(0+)/, ''), 10);
@@ -31,7 +32,7 @@ const key2id = (key: string) => parseInt(key.replace(/^(0+)/, ''), 10);
*/
export const transformFetchListData = <T>(data: ListData<T>): RequestData<ListItem<T>> => {
const results = (data.node.nodes || [])
- .map(node => {
+ .map((node) => {
const result = node.key.match(/\/([0-9]+)/);
let displayKey = '';
@@ -46,7 +47,7 @@ export const transformFetchListData = <T>(data: ListData<T>): RequestData<ListIt
displayKey,
};
})
- .filter(item => item.displayKey);
+ .filter((item) => item.displayKey);
return {
data: results,