From 301b2e20877d489df2efaf632072b6a6778a0ac0 Mon Sep 17 00:00:00 2001 From: CH3CHO Date: Thu, 12 Dec 2024 11:01:43 +0800 Subject: [PATCH] feat: Support configuring protocol and SNI for service sources with static or dns type --- frontend/src/interfaces/service-source.ts | 7 +++ frontend/src/locales/en-US/translation.json | 4 ++ frontend/src/locales/zh-CN/translation.json | 4 ++ .../components/SourceForm/index.tsx | 60 ++++++++++++++++++- frontend/src/pages/service-source/index.tsx | 14 ++++- 5 files changed, 86 insertions(+), 3 deletions(-) diff --git a/frontend/src/interfaces/service-source.ts b/frontend/src/interfaces/service-source.ts index bcf76a8a..ddf411cb 100644 --- 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 index 1072242a..aeb7a7bc 100644 --- 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 index 458c2870..19402fdd 100644 --- 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 index f94e31b5..21412d5f 100644 --- 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(); const [authEnabled, setAuthEnabled] = useState(); const [initAuthEnabled, setInitAuthEnabled] = useState(); + const [usingTlsProtocol, setUsingTlsProtocol] = useState(); 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) => { ) } - + { + (sourceType === ServiceSourceTypes.static.key || sourceType === ServiceSourceTypes.dns.key) && ( + + + + ) + } + { + usingTlsProtocol && ( + + + + ) + } + ); }); diff --git a/frontend/src/pages/service-source/index.tsx b/frontend/src/pages/service-source/index.tsx index 3f5fb311..da854f2e 100644 --- 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',