feat: support more upstream scheme (#2675)
diff --git a/web/src/components/Upstream/components/Scheme.tsx b/web/src/components/Upstream/components/Scheme.tsx
index 200ead4..2a64e8b 100644
--- a/web/src/components/Upstream/components/Scheme.tsx
+++ b/web/src/components/Upstream/components/Scheme.tsx
@@ -15,25 +15,49 @@
* limitations under the License.
*/
import { Form, Select } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
import { useIntl } from 'umi';
const options = [
{
label: 'HTTP',
value: 'http',
+ type: 'http',
},
{
label: 'HTTPs',
value: 'https',
+ type: 'http',
},
{
label: 'gRPC',
value: 'grpc',
+ type: 'http',
},
{
label: 'gRPCs',
value: 'grpcs',
+ type: 'http',
+ },
+ {
+ label: 'TCP',
+ value: 'tcp',
+ type: 'stream',
+ },
+ {
+ label: 'TLS',
+ value: 'tls',
+ type: 'stream',
+ },
+ {
+ label: 'UDP',
+ value: 'udp',
+ type: 'stream',
+ },
+ {
+ label: 'Kafka',
+ value: 'kafka',
+ type: 'pubsub',
},
];
@@ -43,14 +67,25 @@
const Scheme: React.FC<Props> = ({ readonly }) => {
const { formatMessage } = useIntl();
+ const [extraMessage, setExtraMessage] = useState('');
+ const onChange = (value: string) => {
+ Object.values(options).forEach((opt) => {
+ if (opt.value !== value && opt.type !== 'http') return;
+ setExtraMessage(
+ formatMessage({ id: `component.upstream.fields.scheme.tooltip.${opt.type}` }),
+ );
+ });
+ };
+
return (
<Form.Item
label={formatMessage({ id: 'page.upstream.scheme' })}
name="scheme"
rules={[{ required: true }]}
initialValue="http"
+ extra={extraMessage}
>
- <Select disabled={readonly}>
+ <Select disabled={readonly} onChange={onChange}>
{options.map((item) => {
return (
<Select.Option value={item.value} key={item.value}>
diff --git a/web/src/components/Upstream/locales/en-US.ts b/web/src/components/Upstream/locales/en-US.ts
index b1ba0fe..2b00de7 100644
--- a/web/src/components/Upstream/locales/en-US.ts
+++ b/web/src/components/Upstream/locales/en-US.ts
@@ -45,6 +45,11 @@
'component.upstream.fields.service_name.tooltip': 'Service Name',
'component.upstream.fields.service_name.placeholder': 'Please enter the service name',
+ 'component.upstream.fields.scheme.tooltip.stream':
+ 'This type is only used for Stream Route, which is a layer 4 proxy. Reference: https://apisix.apache.org/docs/apisix/stream-proxy/',
+ 'component.upstream.fields.scheme.tooltip.pubsub':
+ 'This type is only used in publish subscription. Reference: https://apisix.apache.org/docs/apisix/pubsub/',
+
'component.upstream.fields.tls': 'TLS',
'component.upstream.fields.tls.tooltip': 'TLS Certificate',
diff --git a/web/src/components/Upstream/locales/tr-TR.ts b/web/src/components/Upstream/locales/tr-TR.ts
index 56ace27..a7f8237 100644
--- a/web/src/components/Upstream/locales/tr-TR.ts
+++ b/web/src/components/Upstream/locales/tr-TR.ts
@@ -45,6 +45,11 @@
'component.upstream.fields.service_name.tooltip': 'Servis Adı',
'component.upstream.fields.service_name.placeholder': 'Lütfen servis adını giriniz',
+ 'component.upstream.fields.scheme.tooltip.stream':
+ 'Bu tür yalnızca Akış yönlendirme, yani katman 4 proxy için kullanılır. Referans: https://apisix.apache.org/docs/apisix/stream-proxy/',
+ 'component.upstream.fields.scheme.tooltip.pubsub':
+ 'Bu tür yalnızca abonelik senaryolarını yayınlamak için kullanılır. Referans: https://apisix.apache.org/docs/apisix/pubsub/',
+
'component.upstream.fields.tls': 'TLS',
'component.upstream.fields.tls.tooltip': 'TLS Sertifikası',
diff --git a/web/src/components/Upstream/locales/zh-CN.ts b/web/src/components/Upstream/locales/zh-CN.ts
index 5de7c6e..bcc38f1 100644
--- a/web/src/components/Upstream/locales/zh-CN.ts
+++ b/web/src/components/Upstream/locales/zh-CN.ts
@@ -44,6 +44,11 @@
'component.upstream.fields.service_name.tooltip': '服务名称',
'component.upstream.fields.service_name.placeholder': '请输入服务名称',
+ 'component.upstream.fields.scheme.tooltip.stream':
+ '该类型仅用于 Stream Route,即四层代理。参考文档:https://apisix.apache.org/zh/docs/apisix/stream-proxy/',
+ 'component.upstream.fields.scheme.tooltip.pubsub':
+ '该类型仅用于发布订阅场景。参考文档:https://apisix.apache.org/zh/docs/apisix/pubsub/',
+
'component.upstream.fields.tls': 'TLS',
'component.upstream.fields.tls.tooltip': 'TLS 证书',