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 c6fd84f Feat route (#222)
c6fd84f is described below
commit c6fd84f2e36ae5ca3b1b9962fe2b35078b31ad05
Author: 琚致远 <juzhiy...@apache.org>
AuthorDate: Sun May 31 22:18:30 2020 +0800
Feat route (#222)
* feat: added mapper
* feat: added locale
* feat: update locale
* feat: update locale
---
src/components/PluginForm/READMD.md | 9 +++
src/components/PluginForm/data.ts | 83 ++++++++++++++++++++++
src/components/PluginForm/index.ts | 3 +
src/components/PluginForm/locales/en-US.ts | 49 +++++++++++++
src/components/PluginForm/locales/zh-CN.ts | 43 +++++++++++
.../PluginForm/{typingd.d.ts => typing.d.ts} | 4 ++
src/locales/en-US.ts | 3 +
src/locales/en-US/menu.ts | 2 +
src/locales/zh-CN.ts | 3 +
src/pages/Routes/Create.less | 11 +++
src/pages/Routes/Create.tsx | 2 +-
.../Routes/components/CreateStep3/CreateStep3.tsx | 26 ++++---
.../Routes/components/CreateStep3/PluginCard.tsx | 13 +++-
.../Routes/components/CreateStep3/PluginDrawer.tsx | 2 +-
14 files changed, 239 insertions(+), 14 deletions(-)
diff --git a/src/components/PluginForm/READMD.md
b/src/components/PluginForm/READMD.md
new file mode 100644
index 0000000..68d4686
--- /dev/null
+++ b/src/components/PluginForm/READMD.md
@@ -0,0 +1,9 @@
+# PluginForm
+
+> The PluginForm component aims to build UI according to the plugin schema.
+
+## Usage
+
+1. Modify `list` variable in `data.ts` file.
+2. Modify filds under `/locales` folder to have a good translation.
+3. Import files under `/locales` folder to `/src/locales` to be localization.
diff --git a/src/components/PluginForm/data.ts
b/src/components/PluginForm/data.ts
new file mode 100644
index 0000000..f4d6afa
--- /dev/null
+++ b/src/components/PluginForm/data.ts
@@ -0,0 +1,83 @@
+export const list: PluginForm.PluginProps[] = [
+ {
+ name: 'basic-auth',
+ },
+ {
+ name: 'batch-requests',
+ },
+ {
+ name: 'cors',
+ },
+ {
+ name: 'fault-injection',
+ },
+ {
+ name: 'grpc-transcoding',
+ },
+ {
+ name: 'http-logger',
+ },
+ {
+ name: 'ip-restriction',
+ },
+ {
+ name: 'jwt-auth',
+ },
+ {
+ name: 'kafka-logger',
+ },
+ {
+ name: 'key-auth',
+ },
+ {
+ name: 'limit-conn',
+ },
+ {
+ name: 'limit-count',
+ },
+ {
+ name: 'limit-req',
+ },
+ {
+ name: 'mqtt-proxy',
+ },
+ {
+ name: 'oauth',
+ },
+ {
+ name: 'prometheus',
+ },
+ {
+ name: 'proxy-cache',
+ },
+ {
+ name: 'proxy-mirror',
+ },
+ {
+ name: 'proxy-rewrite',
+ },
+ {
+ name: 'redirect',
+ },
+ {
+ name: 'response-rewrite',
+ },
+ {
+ name: 'serverless',
+ },
+ {
+ name: 'syslog',
+ },
+ {
+ name: 'tcp-logger',
+ },
+ {
+ name: 'udp-logger',
+ },
+ {
+ name: 'wolf-rbac',
+ },
+ {
+ name: 'zipkin',
+ },
+];
diff --git a/src/components/PluginForm/index.ts
b/src/components/PluginForm/index.ts
index 2f23710..4872268 100644
--- a/src/components/PluginForm/index.ts
+++ b/src/components/PluginForm/index.ts
@@ -1,2 +1,5 @@
export { default } from './PluginForm';
export { fetchList as fetchPluginList } from './service';
+export { list as pluginList } from './data';
+export { default as PluginFormZhCN } from './locales/zh-CN';
+export { default as PluginFormEnUS } from './locales/en-US';
diff --git a/src/components/PluginForm/locales/en-US.ts
b/src/components/PluginForm/locales/en-US.ts
new file mode 100644
index 0000000..9f57841
--- /dev/null
+++ b/src/components/PluginForm/locales/en-US.ts
@@ -0,0 +1,49 @@
+export default {
+ 'PluginForm.plugin.basic-auth.desc':
+ 'basic-auth is an authentication plugin that need to work with consumer.',
+ 'PluginForm.plugin.batch-requests.desc':
+ 'batch-requests can accept mutiple request and send them from apisix via
http pipeline,and return a aggregated response to client,this can significantly
improve performance when the client needs to access multiple APIs.',
+ 'PluginForm.plugin.cors.desc': 'cors plugin can help you enable CORS
easily.',
+ 'PluginForm.plugin.fault-injection.desc':
+ 'Fault injection plugin, this plugin can be used with other plugins and
will be executed before other plugins.',
+ 'PluginForm.plugin.grpc-transcoding.desc': 'HTTP(s) -> APISIX -> gRPC
server',
+ 'PluginForm.plugin.http-logger.desc':
+ 'http-logger is a plugin which push Log data requests to HTTP/HTTPS
servers.',
+ 'PluginForm.plugin.ip-restriction.desc':
+ 'The ip-restriction can restrict access to a Service or a Route by either
whitelisting or blacklisting IP addresses. Single IPs, multiple IPs or ranges
in CIDR notation like 10.10.10.0/24 can be used(will support IPv6 soon).',
+ 'PluginForm.plugin.jwt-auth.desc':
+ 'jwt-auth is an authentication plugin that need to work with consumer.',
+ 'PluginForm.plugin.kafka-logger.desc':
+ 'kafka-logger is a plugin which works as a Kafka client driver for the
ngx_lua nginx module.',
+ 'PluginForm.plugin.key-auth.desc':
+ 'key-auth is an authentication plugin, it should work with consumer
together.',
+ 'PluginForm.plugin.limit-conn.desc':
+ 'Limiting request concurrency (or concurrent connections) plugin for
Apisix.',
+ 'PluginForm.plugin.limit-count.desc':
+ 'Limit request rate by a fixed number of requests in a given time window.',
+ 'PluginForm.plugin.limit-req.desc': 'limit request rate using the "leaky
bucket" method.',
+ 'PluginForm.plugin.mqtt-proxy.desc':
+ 'The plugin mqtt-proxy only works in stream model, it help you to dynamic
load balance by client_id of MQTT.',
+ 'PluginForm.plugin.oauth.desc':
+ 'The OAuth 2 / Open ID Connect(OIDC) plugin provides authentication and
introspection capability to APISIX.',
+ 'PluginForm.plugin.prometheus.desc':
+ 'This plugin exposes metrics in Prometheus Exposition format.',
+ 'PluginForm.plugin.proxy-cache.desc':
+ 'The proxy-cache plugin, which provides the ability to cache upstream
response data and can be used with other plugins. ',
+ 'PluginForm.plugin.proxy-mirror.desc':
+ 'The proxy-mirror plugin, which provides the ability to mirror client
requests.',
+ 'PluginForm.plugin.proxy-rewrite.desc': 'upstream proxy info rewrite
plugin.',
+ 'PluginForm.plugin.redirect.desc': 'URI redirect.',
+ 'PluginForm.plugin.response-rewrite.desc':
+ 'response rewrite plugin, rewrite the content from upstream.',
+ 'PluginForm.plugin.serverless.desc':
+ 'There are two plug-ins for serverless, namely serverless-pre-function and
serverless-post-function.',
+ 'PluginForm.plugin.syslog.desc': 'sys is a plugin which push Log data
requests to Syslog.',
+ 'PluginForm.plugin.tcp-logger.desc':
+ 'tcp-logger is a plugin which push Log data requests to TCP servers.',
+ 'PluginForm.plugin.udp-logger.desc':
+ 'udp-logger is a plugin which push Log data requests to UDP servers.',
+ 'PluginForm.plugin.wolf-rbac.desc':
+ 'wolf-rbac is an authentication and authorization (rbac) plugin',
+ 'PluginForm.plugin.zipkin.desc': 'Zipkin is a OpenTracing plugin.',
+};
diff --git a/src/components/PluginForm/locales/zh-CN.ts
b/src/components/PluginForm/locales/zh-CN.ts
new file mode 100644
index 0000000..548ecfa
--- /dev/null
+++ b/src/components/PluginForm/locales/zh-CN.ts
@@ -0,0 +1,43 @@
+export default {
+ 'PluginForm.plugin.basic-auth.desc':
+ 'basic-auth 是一个认证插件，它需要与 consumer 一起配合才能工作。',
+ 'PluginForm.plugin.batch-requests.desc':
+ 'batch-requests 插件可以一次接受多个请求并以 http pipeline
的方式在网关发起多个http请求，合并结果后再返回客户端，这在客户端需要访问多个接口时可以显著地提升请求性能。',
+ 'PluginForm.plugin.cors.desc': 'cors 插件可以让你轻易地为服务端启用 CORS 的返回头。',
+ 'PluginForm.plugin.fault-injection.desc':
+ '故障注入插件，该插件可以和其他插件一起使用，并且会在其他插件前被执行，配置 abort
参数将直接返回给客户端指定的响应码并且终止其他插件的执行，配置 delay 参数将延迟某个请求，并且还会执行配置的其他插件。',
+ 'PluginForm.plugin.grpc-transcoding.desc': 'HTTP(s) -> APISIX -> gRPC
server',
+ 'PluginForm.plugin.http-logger.desc':
+ 'http-logger 是一个插件，可将Log数据请求推送到HTTP / HTTPS服务器。',
+ 'PluginForm.plugin.ip-restriction.desc':
+ 'ip-restriction 可以通过以下方式限制对服务或路线的访问，将 IP 地址列入白名单或黑名单。 单个 IP 地址，多个 IP地址 或
CIDR 范围，可以使用类似 10.10.10.0/24 的 CIDR 表示法(将很快支持 IPv6)。',
+ 'PluginForm.plugin.jwt-auth.desc':
+ 'jwt-auth 是一个认证插件，它需要与 consumer 一起配合才能工作。',
+ 'PluginForm.plugin.kafka-logger.desc':
+ 'kafka-logger 是一个插件，可用作ngx_lua nginx 模块的 Kafka 客户端驱动程序。',
+ 'PluginForm.plugin.key-auth.desc':
+ 'key-auth 是一个认证插件，它需要与 consumer 一起配合才能工作。',
+ 'PluginForm.plugin.limit-conn.desc': 'APISIX 的限制并发请求（或并发连接）插件。',
+ 'PluginForm.plugin.limit-count.desc':
+ '和 GitHub API 的限速类似， 在指定的时间范围内，限制总的请求个数。并且在 HTTP 响应头中返回剩余可以请求的个数。',
+ 'PluginForm.plugin.limit-req.desc': '限制请求速度的插件，使用的是漏桶算法。',
+ 'PluginForm.plugin.mqtt-proxy.desc':
+ 'mqtt-proxy 只工作在流模式，它可以帮助你根据 MQTT 的 client_id 实现动态负载均衡。',
+ 'PluginForm.plugin.oauth.desc':
+ 'The OAuth 2 / Open ID Connect(OIDC) plugin provides authentication and
introspection capability to APISIX.',
+ 'PluginForm.plugin.prometheus.desc': '此插件是提供符合prometheus数据格式的监控指标数据。',
+ 'PluginForm.plugin.proxy-cache.desc':
+ '代理缓存插件，该插件提供缓存后端响应数据的能力，它可以和其他插件一起使用。',
+ 'PluginForm.plugin.proxy-mirror.desc': '代理镜像插件，该插件提供了镜像客户端请求的能力。',
+ 'PluginForm.plugin.proxy-rewrite.desc': '上游代理信息重写插件。',
+ 'PluginForm.plugin.redirect.desc': 'URI 重定向插件。',
+ 'PluginForm.plugin.response-rewrite.desc': '该插件支持修改上游服务返回的 body 和 header
信息。',
+ 'PluginForm.plugin.serverless.desc':
+ 'serverless 的插件有两个，分别是 serverless-pre-function 和 serverless-post-function，
前者会在指定阶段的最开始运行，后者是在指定阶段的最后运行。',
+ 'PluginForm.plugin.syslog.desc': 'sys 是一个将Log data请求推送到Syslog的插件。',
+ 'PluginForm.plugin.tcp-logger.desc': 'tcp-logger 是用于将日志数据发送到TCP服务的插件。',
+ 'PluginForm.plugin.udp-logger.desc': 'udp-logger 是用于将日志数据发送到UDP服务的插件。',
+ 'PluginForm.plugin.wolf-rbac.desc':
+ 'wolf-rbac 是一个认证及授权(rbac)插件，它需要与 consumer 一起配合才能工作。',
+ 'PluginForm.plugin.zipkin.desc': 'zipkin 是一个开源的服务跟踪插件。',
+};
diff --git a/src/components/PluginForm/typingd.d.ts
b/src/components/PluginForm/typing.d.ts
similarity index 95%
rename from src/components/PluginForm/typingd.d.ts
rename to src/components/PluginForm/typing.d.ts
index 72a872f..b59f80e 100644
--- a/src/components/PluginForm/typingd.d.ts
+++ b/src/components/PluginForm/typing.d.ts
@@ -47,4 +47,8 @@ declare namespace PluginForm {
}>;
};
}
+
+ interface PluginProps {
+ name: string;
+ }
}
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index 6dbf6ab..6b136f7 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -1,3 +1,5 @@
+import { PluginFormEnUS } from '@/components/PluginForm';
+
import component from './en-US/component';
import globalHeader from './en-US/globalHeader';
import menu from './en-US/menu';
@@ -17,4 +19,5 @@ export default {
...settings,
...pwa,
...component,
+ ...PluginFormEnUS,
};
diff --git a/src/locales/en-US/menu.ts b/src/locales/en-US/menu.ts
index 8d99bc4..17b5b37 100644
--- a/src/locales/en-US/menu.ts
+++ b/src/locales/en-US/menu.ts
@@ -53,4 +53,6 @@ export default {
'menu.ssl.edit': 'Edit',
'menu.ssl.create': 'Create',
'menu.setting': 'Settings',
+ 'menu.routes': 'Route',
+ 'menu.routes.create': 'Create a Route',
};
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 966f0a9..67b4086 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -1,3 +1,5 @@
+import { PluginFormZhCN } from '@/components/PluginForm';
+
import component from './zh-CN/component';
import globalHeader from './zh-CN/globalHeader';
import menu from './zh-CN/menu';
@@ -17,4 +19,5 @@ export default {
...settings,
...pwa,
...component,
+ ...PluginFormZhCN,
};
diff --git a/src/pages/Routes/Create.less b/src/pages/Routes/Create.less
index b0dca3a..8d1eb14 100644
--- a/src/pages/Routes/Create.less
+++ b/src/pages/Routes/Create.less
@@ -99,3 +99,14 @@
max-width: 700px;
margin: 40px auto 0;
}
+
+:global {
+ .ant-card.ant-card-bordered {
+ height: 250px;
+ }
+ .ant-card-actions {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ }
+}
diff --git a/src/pages/Routes/Create.tsx b/src/pages/Routes/Create.tsx
index d4f9e3c..28e2b89 100644
--- a/src/pages/Routes/Create.tsx
+++ b/src/pages/Routes/Create.tsx
@@ -17,7 +17,7 @@ const Create: React.FC = () => {
advancedMatchingRules: [],
});
- const [currentStep] = useState(0);
+ const [currentStep] = useState(2);
const [stepHeader] = useState(['定义 API 请求', '定义 API 后端服务', '插件配置', '预览']);
const data = {
step1Data,
diff --git a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
index 38647b3..8526b34 100644
--- a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
+++ b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import { Card } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
+import { SettingOutlined, LinkOutlined } from '@ant-design/icons';
-import { fetchPluginList } from '@/components/PluginForm';
+import { pluginList } from '@/components/PluginForm';
import PanelSection from '../PanelSection';
import PluginDrawer from './PluginDrawer';
import PluginCard from './PluginCard';
@@ -11,16 +11,12 @@ const sectionStyle = {
display: 'grid',
gridTemplateColumns: 'repeat(3, 33.333%)',
gridRowGap: 10,
+ gridColumnGap: 10,
};
const CreateStep3: React.FC = () => {
- const [pluginList, setPluginList] = useState<string[]>([]);
const [currentPlugin, setCurrentPlugin] = useState<string | undefined>();
- useEffect(() => {
- fetchPluginList().then((data) => setPluginList(data));
- }, []);
-
// TODO: 设置插件黑名单（不展示的插件）
// TODO: 获取 Route 已启用插件
// TODO: 拆分已启用、未启用插件
@@ -36,10 +32,20 @@ const CreateStep3: React.FC = () => {
</Card>
</PanelSection>
<PanelSection title="未启用" style={sectionStyle}>
- {pluginList.map((name) => (
+ {pluginList.map(({ name }) => (
<PluginCard
name={name}
- actions={[<SettingOutlined onClick={() => setCurrentPlugin(name)}
/>]}
+ actions={[
+ <SettingOutlined onClick={() => setCurrentPlugin(name)} />,
+ <LinkOutlined
+ onClick={() =>
+ window.open(
+
`https://github.com/apache/incubator-apisix/blob/master/doc/plugins/${name}.md`,
+ )
+ }
+ />,
+ ]}
+ key={name}
/>
))}
</PanelSection>
diff --git a/src/pages/Routes/components/CreateStep3/PluginCard.tsx
b/src/pages/Routes/components/CreateStep3/PluginCard.tsx
index 7dd1160..bb3857a 100644
--- a/src/pages/Routes/components/CreateStep3/PluginCard.tsx
+++ b/src/pages/Routes/components/CreateStep3/PluginCard.tsx
@@ -1,15 +1,24 @@
import React from 'react';
import { Card } from 'antd';
import { CardProps } from 'antd/lib/card';
+import { useIntl } from 'umi';
interface Props extends CardProps {
name: string;
}
const PluginCard: React.FC<Props> = ({ name, actions }) => {
+ const { formatMessage } = useIntl();
+
return (
- <Card style={{ width: 300 }} actions={actions}>
- <Card.Meta title={name} description="插件描述" />
+ <Card actions={actions}>
+ <Card.Meta
+ title={name}
+ description={formatMessage({
+ id: `PluginForm.plugin.${name}.desc`,
+ defaultMessage: 'Please view the documentation.',
+ })}
+ />
</Card>
);
};
diff --git a/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
b/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
index 18a6e7a..db00f5f 100644
--- a/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
+++ b/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
@@ -18,7 +18,7 @@ const PluginDrawer: React.FC<Props> = ({ name, ...rest }) => {
return (
<Drawer
- title="配置插件"
+ title={`配置 ${name} 插件`}
width={400}
visible={visiable}
destroyOnClose
