feat: Support configuring protocol and SNI for service sources with s…

…tatic or dns type
higress-group · Dec 12, 2024 · 301b2e2 · 301b2e2
1 parent e8d1c22
commit 301b2e2
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 3 deletions.
diff --git a/frontend/src/interfaces/service-source.ts b/frontend/src/interfaces/service-source.ts
@@ -49,3 +49,10 @@ export const ServiceSourceTypes = {
   static: { key: 'static', name: 'serviceSource.types.static.name', i18n: true, enabled: true },
   dns: { key: 'dns', name: 'serviceSource.types.dns.name', i18n: true, enabled: true },
 };
+
+export const ServiceProtocols = {
+  http: { key: 'http', name: 'HTTP', tlsEnabled: false },
+  https: { key: 'https', name: 'HTTPS', tlsEnabled: true },
+  grpc: { key: 'grpc', name: 'gRPC', tlsEnabled: false },
+  grpcs: { key: 'grpcs', name: 'gRPCS', tlsEnabled: true },
+};
diff --git a/frontend/src/locales/en-US/translation.json b/frontend/src/locales/en-US/translation.json
@@ -228,6 +228,7 @@
       "name": "Name",
       "domain": "Source Domain",
       "port": "Source Port",
+      "protocol": "Service Protocol",
       "action": "Action"
     },
     "createServiceSource": "Create Service Source",
@@ -247,6 +248,9 @@
       "port": "Registry Port",
       "portRequired": "Please input the port.",
       "portPlaceholder": "Registry Port",
+      "protocol": "Service Protocol",
+      "sni": "SNI",
+      "sniPlaceholderForDns": "Leave it empty if only one domain is set and to be used as SNI.",
       "zkServicesPath": "Service Registration Root Path",
       "zkServicesPathTooltip": "The root path of service registration are required for Zookeeper service sources. /dubbo and /services are listened by default. The former is the default root path of dubbo services, and the latter is the default root path of Sprin gCloud services",
       "zkServicesPathRequired": "Please input the root path of service registration.",

diff --git a/frontend/src/locales/zh-CN/translation.json b/frontend/src/locales/zh-CN/translation.json
@@ -272,6 +272,7 @@
       "name": "名称",
       "domain": "来源地址",
       "port": "来源端口",
+      "protocol": "服务协议",
       "action": "操作"
     },
     "createServiceSource": "创建服务来源",
@@ -291,6 +292,9 @@
       "port": "注册中心访问端口",
       "portRequired": "请输入访问端口",
       "portPlaceholder": "注册中心访问端口",
+      "protocol": "服务协议",
+      "sni": "SNI",
+      "sniPlaceholderForDns": "若服务来源只关联了一个域名且使用与该域名相同的SNI，此处可留空。",
       "zkServicesPath": "服务注册根路径",
       "zkServicesPathTooltip": "Zookeeper类型的服务来源需要填写服务注册的根路径。默认监听/dubbo和/services。前者为dubbo服务默认根路径，后者为Spring Cloud服务默认根路径。",
       "zkServicesPathRequired": "请输入服务注册根路径",

diff --git a/frontend/src/pages/service-source/components/SourceForm/index.tsx b/frontend/src/pages/service-source/components/SourceForm/index.tsx
@@ -1,4 +1,4 @@
-import { ServiceSourceTypes } from '@/interfaces/service-source';
+import { ServiceProtocols, ServiceSourceTypes } from '@/interfaces/service-source';
 import { Form, Input, Select } from 'antd';
 import TextArea from 'antd/lib/input/TextArea';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
@@ -13,6 +13,7 @@ const SourceForm: React.FC = forwardRef((props, ref) => {
   const [sourceType, setSourceType] = useState<string>();
   const [authEnabled, setAuthEnabled] = useState<boolean>();
   const [initAuthEnabled, setInitAuthEnabled] = useState<boolean>();
+  const [usingTlsProtocol, setUsingTlsProtocol] = useState<boolean>();
 
   useEffect(() => {
     form.resetFields();
@@ -27,6 +28,10 @@ const SourceForm: React.FC = forwardRef((props, ref) => {
     }
     const valueToSet = value || {};
     valueToSet.authN = Object.assign({ enabled: false }, valueToSet.authN);
+    if (!valueToSet.protocol) {
+      valueToSet.protocol = ServiceProtocols.http.key;
+    }
+    updateUsingTlsProtocol(valueToSet.protocol);
     form.setFieldsValue(valueToSet);
   }, [value]);
 
@@ -49,6 +54,12 @@ const SourceForm: React.FC = forwardRef((props, ref) => {
         if (values.type === ServiceSourceTypes.static.key) {
           values.port = 80;
         }
+      } else {
+        values.protocol = null;
+      }
+      updateUsingTlsProtocol(values.protocol);
+      if (!usingTlsProtocol) {
+        values.sni = null;
       }
       return values;
     },
@@ -67,6 +78,17 @@ const SourceForm: React.FC = forwardRef((props, ref) => {
         form.setFieldValue(["properties", "consulDatacenter"], "dc1");
       }
     }
+    let protocol: string | null = null;
+    if ([ServiceSourceTypes.static.key, ServiceSourceTypes.dns.key].indexOf(type) !== -1) {
+      protocol = form.getFieldValue("protocol") || ServiceProtocols.http.key;
+    }
+    form.setFieldValue("protocol", protocol);
+    updateUsingTlsProtocol(protocol);
+  }
+
+  function updateUsingTlsProtocol(protocol: string | null) {
+    const protocolObj = protocol && ServiceProtocols[protocol];
+    setUsingTlsProtocol(protocolObj && protocolObj.tlsEnabled);
   }
 
   return (
@@ -420,7 +442,41 @@ const SourceForm: React.FC = forwardRef((props, ref) => {
           </>
         )
       }
-    </Form>
+      {
+        (sourceType === ServiceSourceTypes.static.key || sourceType === ServiceSourceTypes.dns.key) && (
+          <Form.Item
+            label={t('serviceSource.serviceSourceForm.protocol')}
+            required
+            name="protocol"
+          >
+            <Select
+              onChange={(v) => updateUsingTlsProtocol(v)}
+            >
+              {
+                // eslint-disable-next-line @iceworks/best-practices/recommend-polyfill
+                Object.entries(ServiceProtocols).map(([k, v]) =>
+                  (<Option key={k} value={k}>{v.i18n ? t(v.name) : v.name}</Option>))
+              }
+            </Select>
+          </Form.Item>
+        )
+      }
+      {
+        usingTlsProtocol && (
+          <Form.Item
+            label={t('serviceSource.serviceSourceForm.sni')}
+            name="sni"
+          >
+            <Input
+              allowClear
+              maxLength={256}
+              placeholder={form.getFieldValue('type') === ServiceSourceTypes.dns.key
+                             && t('serviceSource.serviceSourceForm.sniPlaceholderForDns') || ''}
+            />
+          </Form.Item>
+        )
+      }
+    </Form >
   );
 });
 

diff --git a/frontend/src/pages/service-source/index.tsx b/frontend/src/pages/service-source/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable */
 // @ts-nocheck
 import { Mode } from '@/interfaces/config';
-import { ServiceSource, ServiceSourceFormProps, ServiceSourceTypes } from '@/interfaces/service-source';
+import { ServiceProtocols, ServiceSource, ServiceSourceFormProps, ServiceSourceTypes } from '@/interfaces/service-source';
 import { addServiceSource, deleteServiceSource, getServiceSources, updateServiceSource } from '@/services/service-source';
 import store from '@/store';
 import { isInternalResource } from '@/utils';
@@ -57,6 +57,18 @@ const SourceList: React.FC = () => {
         return value != null ? value : '-';
       },
     },
+    {
+      title: t('serviceSource.columns.protocol'),
+      dataIndex: 'protocol',
+      key: 'protocol',
+      render: (value, record) => {
+        if (!value) {
+          return '-';
+        }
+        const protocol = ServiceProtocols[value];
+        return protocol ? protocol.name : value;
+      },
+    },
     {
       title: t('serviceSource.columns.action'),
       dataIndex: 'action',