diff --git a/web/src/components/Plugin/UI/limit-count.tsx b/web/src/components/Plugin/UI/limit-count.tsx
index bddeb94146..77f47baa1d 100644
--- a/web/src/components/Plugin/UI/limit-count.tsx
+++ b/web/src/components/Plugin/UI/limit-count.tsx
@@ -64,11 +64,12 @@ const RedisForm: React.FC = () => {
-
+
{
{
-
+
)
}
-const RedisClusterForm: React.FC
= () => {
+const RedisClusterForm: React.FC = () => {
const { formatMessage } = useIntl();
return (
@@ -109,7 +112,7 @@ const RedisClusterForm: React.FC = () => {
>
-
+
{(fields, { add, remove }) => {
return (
@@ -159,6 +162,21 @@ const RedisClusterForm: React.FC
= () => {
);
}}
+
+
+
+
+
+
)
}
@@ -170,7 +188,6 @@ const LimitCount: React.FC = ({ form }) => {
);
}
diff --git a/web/src/components/Plugin/data.tsx b/web/src/components/Plugin/data.tsx
index df119c1f24..2c2ea81731 100644
--- a/web/src/components/Plugin/data.tsx
+++ b/web/src/components/Plugin/data.tsx
@@ -39,7 +39,6 @@ export enum PluginType {
traffic = "traffic",
serverless = "serverless",
observability = "observability",
- logging = "logging",
other = "other"
}
@@ -64,7 +63,7 @@ export const PLUGIN_LIST = {
type: PluginType.authentication
},
"error-log-logger": {
- type: PluginType.logging
+ type: PluginType.observability
},
"fault-injection": {
type: PluginType.security
@@ -79,7 +78,7 @@ export const PLUGIN_LIST = {
type: PluginType.other
},
"syslog": {
- type: PluginType.logging
+ type: PluginType.observability
},
"traffic-split": {
type: PluginType.traffic
@@ -88,13 +87,13 @@ export const PLUGIN_LIST = {
type: PluginType.authentication
},
"kafka-logger": {
- type: PluginType.logging
+ type: PluginType.observability
},
"limit-conn": {
type: PluginType.traffic
},
"udp-logger": {
- type: PluginType.logging
+ type: PluginType.observability
},
"zipkin": {
type: PluginType.observability
@@ -104,7 +103,7 @@ export const PLUGIN_LIST = {
hidden: true
},
"log-rotate": {
- type: PluginType.logging,
+ type: PluginType.observability,
hidden: true
},
"serverless-pre-function": {
@@ -166,16 +165,16 @@ export const PLUGIN_LIST = {
type: PluginType.other
},
"http-logger": {
- type: PluginType.logging
+ type: PluginType.observability
},
"openid-connect": {
type: PluginType.authentication
},
"sls-logger": {
- type: PluginType.logging
+ type: PluginType.observability
},
"tcp-logger": {
- type: PluginType.logging
+ type: PluginType.observability
},
"uri-blocker": {
type: PluginType.security
diff --git a/web/src/components/Plugin/locales/en-US.ts b/web/src/components/Plugin/locales/en-US.ts
index 26fa357e80..b1ed0d8cc1 100644
--- a/web/src/components/Plugin/locales/en-US.ts
+++ b/web/src/components/Plugin/locales/en-US.ts
@@ -21,12 +21,13 @@ export default {
'component.step.select.pluginTemplate.select.option': 'Custom',
'component.plugin.pluginTemplate.tip1': '1. When a route already have plugins field configured, the plugins in the plugin template will be merged into it.',
'component.plugin.pluginTemplate.tip2': '2. The same plugin in the plugin template will override one in the plugins',
+ 'component.plugin.enable': 'Enable',
+ 'component.plugin.disable': 'Disable',
'component.plugin.authentication': 'Authentication',
'component.plugin.security': 'Security',
'component.plugin.traffic': 'Traffic Control',
'component.plugin.serverless': 'Serverless',
'component.plugin.observability': 'Tracing & Metrics & Logging',
- 'component.plugin.logging': 'Logging',
'component.plugin.other': 'Other',
// cors
@@ -34,7 +35,7 @@ export default {
'component.pluginForm.cors.allow_origins.extra': 'For example: https://somehost.com:8081',
'component.pluginForm.cors.allow_methods.tooltip': 'Which Method is allowed to enable CORS, such as: GET, POST etc. Multiple method use , to split. When allow_credential is false, you can use * to indicate allow all any method. You also can allow any method forcefully using ** even already enable allow_credential, but it will bring some security risks.',
'component.pluginForm.cors.allow_headers.tooltip': 'Which headers are allowed to set in request when access cross-origin resource. Multiple value use , to split. When allow_credential is false, you can use * to indicate allow all request headers. You also can allow any header forcefully using ** even already enable allow_credential, but it will bring some security risks.',
- 'component.pluginForm.cors.expose_headers.tooltip': ' Which headers are allowed to set in response when access cross-origin resource. Multiple value use , to split.',
+ 'component.pluginForm.cors.expose_headers.tooltip': 'Which headers are allowed to set in response when access cross-origin resource. Multiple value use , to split.',
'component.pluginForm.cors.max_age.tooltip': 'Maximum number of seconds the results can be cached.. Within this time range, the browser will reuse the last check result. -1 means no cache. Please note that the maximum value is depended on browser, please refer to MDN for details.',
'component.pluginForm.cors.allow_credential.tooltip': 'If you set this option to true, you can not use \'*\' for other options.',
'component.pluginForm.cors.allow_origins_by_regex.tooltip': 'Use regex expressions to match which origin is allowed to enable CORS, for example, [".*.test.com"] can use to match all subdomain of test.com.',
@@ -53,7 +54,7 @@ export default {
// proxy-mirror
'component.pluginForm.proxy-mirror.host.tooltip': 'Specify a mirror service address, e.g. http://127.0.0.1:9797 (address needs to contain schema: http or https, not URI part)',
- 'component.pluginForm.proxy-mirror.host.extra': 'e.g. http://127.0.0.1:9797 (address needs to contain schema: http or https, not URI part)',
+ 'component.pluginForm.proxy-mirror.host.extra': 'e.g. http://127.0.0.1:9797',
'component.pluginForm.proxy-mirror.host.ruletip': 'address needs to contain schema: http or https, not URI part',
// limit-conn
diff --git a/web/src/components/Plugin/locales/zh-CN.ts b/web/src/components/Plugin/locales/zh-CN.ts
index b88f6e80d1..d7438d3ca8 100644
--- a/web/src/components/Plugin/locales/zh-CN.ts
+++ b/web/src/components/Plugin/locales/zh-CN.ts
@@ -21,12 +21,13 @@ export default {
'component.step.select.pluginTemplate.select.option': '手动配置',
'component.plugin.pluginTemplate.tip1': '1. 若路由已配置插件，则插件模板数据将与已配置的插件数据合并。',
'component.plugin.pluginTemplate.tip2': '2. 插件模板相同的插件会覆盖掉原有的插件。',
+ 'component.plugin.enable': '启用',
+ 'component.plugin.disable': '禁用',
'component.plugin.authentication': '身份验证',
'component.plugin.security': '安全防护',
'component.plugin.traffic': '流量控制',
'component.plugin.serverless': '无服务器架构',
'component.plugin.observability': '可观测性',
- 'component.plugin.logging': '日志记录',
'component.plugin.other': '其它',
// cors
@@ -53,7 +54,7 @@ export default {
// proxy-mirror
'component.pluginForm.proxy-mirror.host.tooltip': '指定镜像服务地址，例如：http://127.0.0.1:9797（地址中需要包含 schema ：http或https，不能包含 URI 部分）',
- 'component.pluginForm.proxy-mirror.host.extra': '例如：http://127.0.0.1:9797（地址中需要包含 schema：http或https，不能包含 URI 部分）',
+ 'component.pluginForm.proxy-mirror.host.extra': '例如：http://127.0.0.1:9797',
'component.pluginForm.proxy-mirror.host.ruletip': '地址中需要包含 schema ：http或https，不能包含 URI 部分',
// limit-conn
diff --git a/web/src/components/RightContent/AvatarDropdown.tsx b/web/src/components/RightContent/AvatarDropdown.tsx
index 2304f1cacf..9221a05614 100644
--- a/web/src/components/RightContent/AvatarDropdown.tsx
+++ b/web/src/components/RightContent/AvatarDropdown.tsx
@@ -34,9 +34,6 @@ export type GlobalHeaderRightProps = {
menu?: boolean;
};
-/**
- * 退出登录，并且将当前的 url 保存
- */
const settings = async () => {
history.replace({
pathname: '/settings',
diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index 42d71443e5..c8a606bbaf 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -14,13 +14,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Divider, Form, Switch } from 'antd';
+import { Divider, Form, notification, Switch } from 'antd';
import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
import { useIntl } from 'umi';
import type { FormInstance } from 'antd/es/form';
-import { PanelSection } from '@api7-dashboard/ui';
-import { transformRequest } from '@/pages/Upstream/transform';
+import PanelSection from '@/components/PanelSection';
import PassiveCheck from './components/passive-check';
import ActiveCheck from './components/active-check'
import Nodes from './components/Nodes'
@@ -31,7 +30,7 @@ import UpstreamSelector from './components/UpstreamSelector';
import Retries from './components/Retries';
import PassHost from './components/PassHost';
import TLSComponent from './components/TLS';
-import { transformUpstreamDataFromRequest } from './service';
+import { convertToRequestData } from './service';
type Upstream = {
name?: string;
@@ -46,14 +45,18 @@ type Props = {
// FIXME: use proper typing
ref?: any;
required?: boolean;
+ neverReadonly?: boolean
};
+/**
+ * UpstreamForm is used to reuse Upstream Form UI,
+ * before using this component, we need to execute the following command:
+ * form.setFieldsValue(convertToFormData(VALUE_FROM_API))
+*/
const UpstreamForm: React.FC = forwardRef(
- ({ form, disabled, list = [], showSelector, required = true }, ref) => {
+ ({ form, disabled = false, list = [], showSelector = false, required = true, neverReadonly = false }, ref) => {
const { formatMessage } = useIntl();
- const [readonly, setReadonly] = useState(
- Boolean(form.getFieldValue('upstream_id')) || disabled,
- );
+ const [readonly, setReadonly] = useState(false);
const [hiddenForm, setHiddenForm] = useState(false);
const timeoutFields = [
@@ -75,41 +78,58 @@ const UpstreamForm: React.FC = forwardRef(
];
useImperativeHandle(ref, () => ({
- getData: () => transformRequest(form.getFieldsValue()),
+ getData: () => convertToRequestData(form.getFieldsValue()),
}));
- useEffect(() => {
- const formData = transformRequest(form.getFieldsValue()) || {};
- const { upstream_id } = form.getFieldsValue();
+ const resetForm = (upstream_id: string) => {
+ if (upstream_id === undefined) {
+ return
+ }
+ if (!neverReadonly) {
+ setReadonly(!["Custom", "None"].includes(upstream_id) || disabled);
+ }
+
+ /**
+ * upstream_id === None <==> required === false
+ * No need to bind Upstream object.
+ * When creating Route and binds with a Service, no need to configure Upstream in Route.
+ */
if (upstream_id === 'None') {
setHiddenForm(true);
- if (required) {
- requestAnimationFrame(() => {
- form.resetFields();
- setHiddenForm(false);
- });
- }
- } else {
- if (upstream_id) {
- requestAnimationFrame(() => {
- const targetData = list.find((item) => item.id === upstream_id) as UpstreamComponent.ResponseData
- if (targetData) {
- form.setFieldsValue(transformUpstreamDataFromRequest(targetData));
- } else {
- // TODO: 提示 upstream_id 找不到想要的数据
- }
- });
- }
- if (!required && !Object.keys(formData).length) {
- requestAnimationFrame(() => {
- form.setFieldsValue({ upstream_id: 'None' });
- setHiddenForm(true);
- });
- }
+ form.resetFields()
+ form.setFieldsValue({ upstream_id: 'None' })
+ return
+ }
+
+ setHiddenForm(false)
+
+ // NOTE: Use Ant Design's form object to set data automatically
+ if (upstream_id === "Custom") {
+ return
+ }
+
+ // NOTE: Set data from Upstream List (Upstream Selector)
+ if (list.length === 0) {
+ return
+ }
+ form.resetFields()
+ const targetData = list.find((item) => item.id === upstream_id) as UpstreamComponent.ResponseData
+ if (targetData) {
+ form.setFieldsValue(targetData);
}
- setReadonly(Boolean(upstream_id) || disabled);
- }, [list]);
+ }
+
+ /**
+ * upstream_id
+ * - None: No need to bind Upstream to a resource (e.g Service).
+ * - Custom: Users could input values on UpstreamForm
+ * - Upstream ID from API
+ */
+ useEffect(() => {
+ const upstream_id = form.getFieldValue('upstream_id');
+ resetForm(upstream_id)
+ }, [form.getFieldValue('upstream_id'), list]);
const ActiveHealthCheck = () => (
@@ -194,19 +214,26 @@ const UpstreamForm: React.FC = forwardRef(
}
-
+
-
+ prev.custom?.checks?.passive !== next.custom?.checks?.passive} noStyle>
{
() => {
const passive = form.getFieldValue(['custom', 'checks', 'passive'])
+ const active = form.getFieldValue(['custom', 'checks', 'active'])
if (passive) {
/*
* When enable passive check, we should enable active check, too.
* When we use form.setFieldsValue to enable active check, error throws.
* We choose to alert users first, and need users to enable active check manually.
*/
+ if (!active) {
+ notification.warn({
+ message: formatMessage({ id: 'component.upstream.other.health-check.invalid' }),
+ description: formatMessage({ id: 'component.upstream.other.health-check.passive-only' })
+ })
+ }
return
}
return null
@@ -227,32 +254,8 @@ const UpstreamForm: React.FC = forwardRef(
list={list}
disabled={disabled}
required={required}
- shouldUpdate={(prev, next) => {
- setReadonly(Boolean(next.upstream_id));
- if (prev.upstream_id !== next.upstream_id) {
- const id = next.upstream_id;
- if (id) {
- const targetData = list.find((item) => item.id === id) as UpstreamComponent.ResponseData
- if (targetData) {
- form.setFieldsValue(transformUpstreamDataFromRequest(targetData));
- }
- form.setFieldsValue({
- upstream_id: id,
- });
- }
- }
- return prev.upstream_id !== next.upstream_id;
- }}
- onChange={(upstream_id) => {
- setReadonly(Boolean(upstream_id));
- setHiddenForm(Boolean(upstream_id === 'None'));
- const targetData = list.find((item) => item.id === upstream_id) as UpstreamComponent.ResponseData
- if (targetData) {
- form.setFieldsValue(transformUpstreamDataFromRequest(targetData));
- }
- if (upstream_id === '') {
- form.resetFields();
- }
+ onChange={(nextUpstreamId) => {
+ resetForm(nextUpstreamId);
}}
/>
)}
diff --git a/web/src/components/Upstream/components/Nodes.tsx b/web/src/components/Upstream/components/Nodes.tsx
index eaaa3a4feb..92bfcda74f 100644
--- a/web/src/components/Upstream/components/Nodes.tsx
+++ b/web/src/components/Upstream/components/Nodes.tsx
@@ -51,6 +51,9 @@ const Component: React.FC = ({ readonly }) => {
/(^([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(\.(25[0-5]|1\d{2}|2[0-4]\d|[1-9]?\d)){3}$|^(?![0-9.]+$)([a-zA-Z0-9_-]+)(\.[a-zA-Z0-9_-]+){0,}$)/,
'g',
),
+ message: formatMessage({
+ id: 'page.upstream.step.valid.domain.name.or.ip',
+ })
},
]}
>
diff --git a/web/src/components/Upstream/components/PassHost.tsx b/web/src/components/Upstream/components/PassHost.tsx
index a2f7e456be..72b582120b 100644
--- a/web/src/components/Upstream/components/PassHost.tsx
+++ b/web/src/components/Upstream/components/PassHost.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import React from 'react'
-import { Form, Input, Select } from 'antd'
+import { Form, Input, notification, Select } from 'antd'
import { useIntl } from 'umi'
import type { FormInstance } from 'antd/lib/form'
@@ -79,6 +79,14 @@ const Component: React.FC = ({ form, readonly }) => {
);
}
+
+ if (form.getFieldValue('pass_host') === 'node' && (form.getFieldValue('nodes') || []).length !== 1) {
+ notification.warning({
+ message: formatMessage({id: 'component.upstream.other.pass_host-with-multiple-nodes.title'}),
+ description: formatMessage({id: 'component.upstream.other.pass_host-with-multiple-nodes'})
+ })
+ form.setFieldsValue({pass_host: 'pass'})
+ }
return null;
}}
diff --git a/web/src/components/Upstream/components/TLS.tsx b/web/src/components/Upstream/components/TLS.tsx
index 2d4feee0a5..bdc01030d7 100644
--- a/web/src/components/Upstream/components/TLS.tsx
+++ b/web/src/components/Upstream/components/TLS.tsx
@@ -69,7 +69,7 @@ const TLSComponent: React.FC = ({ form, readonly }) => {
required
rules={[{ required: true, message: "" }, { max: 64 * 1024 }, { min: 128 }]}
>
-
+
= ({ form, readonly }) => {
required
rules={[{ required: true, message: "" }, { max: 64 * 1024 }, { min: 128 }]}
>
-
+
)
diff --git a/web/src/components/Upstream/components/UpstreamSelector.tsx b/web/src/components/Upstream/components/UpstreamSelector.tsx
index 1f8b2254e9..34f7fec16b 100644
--- a/web/src/components/Upstream/components/UpstreamSelector.tsx
+++ b/web/src/components/Upstream/components/UpstreamSelector.tsx
@@ -27,18 +27,16 @@ type Props = {
list?: Upstream[];
disabled?: boolean;
required?: boolean;
- shouldUpdate: (prev: any, next: any) => void;
onChange: (id: string) => void
}
-const Component: React.FC = ({ shouldUpdate, onChange, list = [], disabled, required }) => {
+const UpstreamSelector: React.FC = ({ onChange, list = [], disabled, required }) => {
const { formatMessage } = useIntl()
return (