Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(plugin): allowing limit-conn to dynamically adapt to the BE rules #1990

Merged
merged 2 commits into from
Aug 10, 2021
Merged

feat(plugin): allowing limit-conn to dynamically adapt to the BE rules #1990

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e90daa7
feat(plugin): fix UI limit-conn
wmdmomo Jul 21, 2021
2015ae7
feat(plugin): fix conflict
wmdmomo Aug 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion web/src/components/Plugin/PluginDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }[] = [
Expand Down Expand Up @@ -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}
Expand Down
16 changes: 9 additions & 7 deletions web/src/components/Plugin/UI/limit-conn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { useIntl } from 'umi';

type Props = {
form: FormInstance;
schema: Record<string, any> | undefined;
ref?: any;
};

Expand All @@ -33,8 +34,9 @@ const FORM_ITEM_LAYOUT = {
},
};

const LimitConn: React.FC<Props> = ({ form }) => {
const LimitConn: React.FC<Props> = ({ form, schema }) => {
const { formatMessage } = useIntl();
const propertires = schema?.properties
return (
<Form
form={form}
Expand All @@ -46,23 +48,23 @@ const LimitConn: React.FC<Props> = ({ form }) => {
name="conn"
tooltip={formatMessage({ id: 'component.pluginForm.limit-conn.conn.tooltip' })}
>
<InputNumber min={1} required />
<InputNumber min={propertires.conn.exclusiveMinimum} required />
</Form.Item>
<Form.Item
label="burst"
required
name="burst"
tooltip={formatMessage({ id: 'component.pluginForm.limit-conn.burst.tooltip' })}
>
<InputNumber min={0} required />
<InputNumber min={propertires.burst.minimum} required />
</Form.Item>
<Form.Item
label="default_conn_delay"
required
name="default_conn_delay"
tooltip={formatMessage({ id: 'component.pluginForm.limit-conn.default_conn_delay.tooltip' })}
>
<InputNumber step={0.001} min={0.001} required />
<InputNumber step={0.001} min={propertires.default_conn_delay.exclusiveMinimum} required />
</Form.Item>

<Form.Item
Expand All @@ -72,7 +74,7 @@ const LimitConn: React.FC<Props> = ({ form }) => {
tooltip={formatMessage({ id: 'component.pluginForm.limit-conn.key.tooltip' })}
>
<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>
Expand All @@ -81,10 +83,10 @@ const LimitConn: 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-conn.rejected_code.tooltip' })}
>
<InputNumber min={200} max={599} required />
<InputNumber min={propertires.rejected_code.minimum} max={propertires.rejected_code.maximum} required />
</Form.Item>
</Form>
);
Expand Down
5 changes: 3 additions & 2 deletions web/src/components/Plugin/UI/plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -56,7 +57,7 @@ export const PluginForm: React.FC<Props> = ({ name, renderForm, form }) => {
case 'proxy-mirror':
return <ProxyMirror form={form} />
case 'limit-conn':
return <LimitConn form={form} />
return <LimitConn form={form} schema={schema}/>
case 'referer-restriction':
return <RefererRestriction form={form} />
default:
Expand Down