[apisix-dashboard] branch master updated: feat: support more upstream scheme (#2675)

[bz...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

bzp2010 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 0fb390db8 feat: support more upstream scheme (#2675)
0fb390db8 is described below

commit 0fb390db8ad10339fd28d9c39ea468f29d203801
Author: Zeping Bai <bz...@apache.org>
AuthorDate: Wed Nov 30 09:52:26 2022 +0800

    feat: support more upstream scheme (#2675)
---
 web/src/components/Upstream/components/Scheme.tsx | 39 +++++++++++++++++++++--
 web/src/components/Upstream/locales/en-US.ts      |  5 +++
 web/src/components/Upstream/locales/tr-TR.ts      |  5 +++
 web/src/components/Upstream/locales/zh-CN.ts      |  5 +++
 4 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Upstream/components/Scheme.tsx b/web/src/components/Upstream/components/Scheme.tsx
index 200ead4a2..2a64e8b6b 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 @@ type Props = {
 
 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 b1ba0fe66..2b00de759 100644
--- a/web/src/components/Upstream/locales/en-US.ts
+++ b/web/src/components/Upstream/locales/en-US.ts
@@ -45,6 +45,11 @@ export default {
   '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 56ace274c..a7f823786 100644
--- a/web/src/components/Upstream/locales/tr-TR.ts
+++ b/web/src/components/Upstream/locales/tr-TR.ts
@@ -45,6 +45,11 @@ export default {
   '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 5de7c6e23..bcc38f118 100644
--- a/web/src/components/Upstream/locales/zh-CN.ts
+++ b/web/src/components/Upstream/locales/zh-CN.ts
@@ -44,6 +44,11 @@ export default {
   '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 证书',