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 2021/07/31 01:05:51 UTC
[apisix-dashboard] branch master updated: feat(plugin): allowing
limit-req to dynamically adapt to the BE rules (#1995)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 446377d feat(plugin): allowing limit-req to dynamically adapt to the BE rules (#1995)
446377d is described below
commit 446377dbc4cf0a6a554963aa3fa395ff6fcb6b28
Author: wmdmomo <43...@users.noreply.github.com>
AuthorDate: Sat Jul 31 09:05:45 2021 +0800
feat(plugin): allowing limit-req to dynamically adapt to the BE rules (#1995)
---
web/src/components/Plugin/PluginDetail.tsx | 3 ++-
web/src/components/Plugin/UI/limit-req.tsx | 14 ++++++++------
web/src/components/Plugin/UI/plugin.tsx | 5 +++--
3 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx
index 4148012..882a910 100644
--- a/web/src/components/Plugin/PluginDetail.tsx
+++ b/web/src/components/Plugin/PluginDetail.tsx
@@ -107,6 +107,7 @@ const PluginDetail: React.FC<Props> = ({
const [UIForm] = Form.useForm();
const data = initialData[name] || {};
const pluginType = pluginList.find((item) => item.name === name)?.originType;
+ const pluginSchema = pluginList.find((item) => item.name === name)?.schema;
const [content, setContent] = useState<string>(JSON.stringify(data, null, 2));
const [monacoMode, setMonacoMode] = useState<PluginComponent.MonacoLanguage>(monacoModeList.JSON);
const modeOptions: { label: string; value: string }[] = [
@@ -411,7 +412,7 @@ const PluginDetail: React.FC<Props> = ({
</Button>
]}
/>
- {Boolean(monacoMode === monacoModeList.UIForm) && <PluginForm name={name} form={UIForm} renderForm={!(pluginType === 'auth' && schemaType !== 'consumer')} />}
+ {Boolean(monacoMode === monacoModeList.UIForm) && <PluginForm name={name} schema={pluginSchema} form={UIForm} renderForm={!(pluginType === 'auth' && schemaType !== 'consumer')} />}
<div style={{ display: monacoMode === monacoModeList.UIForm ? 'none' : 'unset' }}>
<Editor
value={content}
diff --git a/web/src/components/Plugin/UI/limit-req.tsx b/web/src/components/Plugin/UI/limit-req.tsx
index 58b3cb2..7f106a4 100644
--- a/web/src/components/Plugin/UI/limit-req.tsx
+++ b/web/src/components/Plugin/UI/limit-req.tsx
@@ -21,6 +21,7 @@ import { useIntl } from 'umi';
type Props = {
form: FormInstance;
+ schema: Record<string, any> | undefined;
ref?: any;
};
@@ -33,8 +34,9 @@ export const FORM_ITEM_LAYOUT = {
},
};
-const LimitReq: React.FC<Props> = ({ form }) => {
+const LimitReq: React.FC<Props> = ({ form, schema }) => {
const { formatMessage } = useIntl();
+ const propertires = schema?.properties;
return (
<Form
form={form}
@@ -50,7 +52,7 @@ const LimitReq: React.FC<Props> = ({ form }) => {
tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rate.tooltip' })}
validateTrigger={['onChange', 'onBlur', 'onClick']}
>
- <InputNumber min={1} required />
+ <InputNumber min={propertires.rate.exclusiveMinimum} required />
</Form.Item>
<Form.Item
label="burst"
@@ -62,7 +64,7 @@ const LimitReq: React.FC<Props> = ({ form }) => {
tooltip={formatMessage({ id: 'component.pluginForm.limit-req.burst.tooltip' })}
validateTrigger={['onChange', 'onBlur', 'onClick']}
>
- <InputNumber min={0} required />
+ <InputNumber min={propertires.burst.minimum} required />
</Form.Item>
<Form.Item
label="key"
@@ -75,7 +77,7 @@ const LimitReq: React.FC<Props> = ({ form }) => {
validateTrigger={['onChange', 'onBlur', 'onClick']}
>
<Select>
- {["remote_addr", "server_addr", "http_x_real_ip", "http_x_forwarded_for", "consumer_name"].map(item => {
+ {propertires.key.enum.map((item: string) => {
return <Select.Option value={item} key={item}>{item}</Select.Option>
})}
</Select>
@@ -83,10 +85,10 @@ const LimitReq: React.FC<Props> = ({ form }) => {
<Form.Item
label="rejected_code"
name="rejected_code"
- initialValue={503}
+ initialValue={propertires.rejected_code.default}
tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rejected_code.tooltip' })}
>
- <InputNumber min={200} max={599} />
+ <InputNumber min={propertires.rejected_code.minimum} max={propertires.rejected_code.maximum} />
</Form.Item>
</Form>
);
diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx
index 0d1a2b6..d937e2e 100644
--- a/web/src/components/Plugin/UI/plugin.tsx
+++ b/web/src/components/Plugin/UI/plugin.tsx
@@ -30,13 +30,14 @@ import Cors from './cors';
type Props = {
name: string,
+ schema: Record<string, any> | undefined,
form: FormInstance,
renderForm: boolean
}
export const PLUGIN_UI_LIST = ['api-breaker', 'basic-auth', 'cors', 'limit-req', 'limit-conn', 'proxy-mirror', 'referer-restriction', 'limit-count'];
-export const PluginForm: React.FC<Props> = ({ name, renderForm, form }) => {
+export const PluginForm: React.FC<Props> = ({ name, schema, renderForm, form }) => {
const { formatMessage } = useIntl();
@@ -52,7 +53,7 @@ export const PluginForm: React.FC<Props> = ({ name, renderForm, form }) => {
case 'cors':
return <Cors form={form} />
case 'limit-req':
- return <LimitReq form={form} />
+ return <LimitReq form={form} schema={schema} />
case 'proxy-mirror':
return <ProxyMirror form={form} />
case 'limit-conn':