chore: keep using English as comments & update plugin type (#1785)

web/package.json

@@ -52,7 +52,6 @@
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-layout": "^6.0.0",
     "@ant-design/pro-table": "2.30.1",
-    "@api7-dashboard/ui": "^1.0.3",
     "@mrblenny/react-flow-chart": "^0.0.14",
     "@rjsf/antd": "2.2.0",
     "@rjsf/core": "2.2.0",

web/src/components/PanelSection/index.tsx

@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { CSSProperties } from 'react';
+import { Divider, Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const PanelSection: React.FC<{
+  title: string;
+  style?: CSSProperties;
+  id?: string;
+  tooltip?: string;
+}> = ({ title, style, id, children, tooltip }) => {
+  return (
+    <div id={id}>
+      <Divider orientation="left">
+        {title}
+        &nbsp;
+        {tooltip && <Tooltip title={tooltip}><QuestionCircleOutlined /></Tooltip>}
+      </Divider>
+      <div style={style}>{children}</div>
+    </div>
+  );
+};
+
+export default PanelSection;

web/src/components/Plugin/PluginPage.tsx

@@ -16,10 +16,10 @@
  */
 import React, { useEffect, useState } from 'react';
 import { Anchor, Layout, Card, Button, Form, Select, Alert } from 'antd';
-import { PanelSection } from '@api7-dashboard/ui';
 import { omit, orderBy } from 'lodash';
 import { useIntl } from 'umi';
 
+import PanelSection from '@/components/PanelSection';
 import PluginDetail from './PluginDetail';
 import { fetchList, fetchPluginTemplateList } from './service';
 import { PLUGIN_ICON_LIST, PLUGIN_FILTER_LIST } from './data';

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

web/src/components/Plugin/locales/en-US.ts

@@ -28,7 +28,6 @@ export default {
   'component.plugin.traffic': 'Traffic Control',
   'component.plugin.serverless': 'Serverless',
   'component.plugin.observability': 'Tracing & Metrics & Logging',
-  'component.plugin.logging': 'Logging',
   'component.plugin.other': 'Other',
 
   // cors

web/src/components/Plugin/locales/zh-CN.ts

@@ -28,7 +28,6 @@ export default {
   'component.plugin.traffic': '流量控制',
   'component.plugin.serverless': '无服务器架构',
   'component.plugin.observability': '可观测性',
-  'component.plugin.logging': '日志记录',
   'component.plugin.other': '其它',
 
   // cors

web/src/components/RightContent/AvatarDropdown.tsx

@@ -34,9 +34,6 @@ export type GlobalHeaderRightProps = {
   menu?: boolean;
 };
 
-/**
- * 退出登录，并且将当前的 url 保存
- */
 const settings = async () => {
   history.replace({
     pathname: '/settings',

web/src/components/Upstream/UpstreamForm.tsx

@@ -19,7 +19,7 @@ import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'rea
 import { useIntl } from 'umi';
 import type { FormInstance } from 'antd/es/form';
 
-import { PanelSection } from '@api7-dashboard/ui';
+import PanelSection from '@/components/PanelSection';
 import { transformRequest } from '@/pages/Upstream/transform';
 import PassiveCheck from './components/passive-check';
 import ActiveCheck from './components/active-check'
@@ -96,8 +96,6 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             const targetData = list.find((item) => item.id === upstream_id) as UpstreamComponent.ResponseData
             if (targetData) {
               form.setFieldsValue(transformUpstreamDataFromRequest(targetData));
-            } else {
-              // TODO: 提示 upstream_id 找不到想要的数据
             }
           });
         }

web/src/components/Upstream/components/TLS.tsx

@@ -69,15 +69,15 @@ const TLSComponent: React.FC<Props> = ({ form, readonly }) => {
                     required
                     rules={[{ required: true, message: "" }, { max: 64 * 1024 }, { min: 128 }]}
                   >
-                    <Input.TextArea disabled={readonly} minLength={128} maxLength={64 * 1024} rows={5} placeholder="请输入客户端证书" />
+                    <Input.TextArea disabled={readonly} minLength={128} maxLength={64 * 1024} rows={5} placeholder={formatMessage({id: 'component.upstream.fields.tls.client_cert.required'})} />
                   </Form.Item>
                   <Form.Item
                     label={formatMessage({ id: 'component.upstream.fields.tls.client_key' })}
                     name={["tls", "client_key"]}
                     required
                     rules={[{ required: true, message: "" }, { max: 64 * 1024 }, { min: 128 }]}
                   >
-                    <Input.TextArea disabled={readonly} minLength={128} maxLength={64 * 1024} rows={5} placeholder="请输入客户端私钥" />
+                    <Input.TextArea disabled={readonly} minLength={128} maxLength={64 * 1024} rows={5} placeholder={formatMessage({id: 'component.upstream.fields.tls.client_key.required'})} />
                   </Form.Item>
                 </React.Fragment>
               )

web/src/components/Upstream/components/passive-check/Type.tsx

@@ -35,7 +35,7 @@ const options = [
   }
 ]
 
-const ActiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
+const PassiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
   const { formatMessage } = useIntl()
 
   return (
@@ -66,4 +66,4 @@ const ActiveCheckTypeComponent: React.FC<Props> = ({ readonly }) => {
   )
 }
 
-export default ActiveCheckTypeComponent
+export default PassiveCheckTypeComponent

web/src/components/Upstream/locales/en-US.ts

@@ -16,7 +16,9 @@
  */
 export default {
   'component.upstream.fields.tls.client_key': 'Client Key',
+  'component.upstream.fields.tls.client_key.required': 'Please enter the client key',
   'component.upstream.fields.tls.client_cert': 'Client Cert',
+  'component.upstream.fields.tls.client_cert.required': 'Please enter the client cert',
 
   'component.upstream.fields.discovery_type': 'Discovery Type',
   'component.upstream.fields.discovery_type.tooltip': 'Discovery Type',

web/src/components/Upstream/locales/zh-CN.ts

@@ -16,7 +16,9 @@
  */
 export default {
   'component.upstream.fields.tls.client_key': '客户端私钥',
+  'component.upstream.fields.tls.client_key.required': '请输入客户端私钥',
   'component.upstream.fields.tls.client_cert': '客户端证书',
+  'component.upstream.fields.tls.client_cert.required': '请输入客户端证书',
 
   'component.upstream.fields.discovery_type': '服务发现类型',
   'component.upstream.fields.discovery_type.tooltip': '服务发现类型',

web/src/global.less

@@ -66,7 +66,6 @@ ol {
   }
 }
 
-// 兼容IE11
 @media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
   body .ant-design-pro > .ant-layout {
     min-height: 100vh;

web/src/helpers.tsx

@@ -73,9 +73,6 @@ export const getMenuData = (): MenuDataItem[] => {
 
 export const isLoginPage = () => window.location.pathname.indexOf('/user/login') !== -1;
 
-/**
- * 异常处理程序
- */
 export const errorHandler = (error: { response: Response; data: any }): Promise<Response> => {
   const { response } = error;
   if (error && response && response.status) {

web/src/pages/Route/components/DebugViews/DebugDrawView.tsx

@@ -18,11 +18,12 @@ import React, { useEffect, useState, useRef } from 'react';
 import { Input, Select, Card, Tabs, Form, Drawer, Spin, notification, Radio } from 'antd';
 import { useIntl } from 'umi';
 import CodeMirror from '@uiw/react-codemirror';
-import { PanelSection } from '@api7-dashboard/ui';
 import queryString from 'query-string';
 import Base64 from 'base-64';
 import urlRegexSafe from 'url-regex-safe';
 
+import PanelSection from '@/components/PanelSection';
+
 import {
   HTTP_METHOD_OPTION_LIST,
   DEFAULT_DEBUG_PARAM_FORM_DATA,

web/src/pages/Route/components/Step1/MatchingRulesView.tsx

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 import React, { useState } from 'react';
-import { Button, Table, Modal, Form, Select, Input, Space } from 'antd';
+import { Button, Table, Modal, Form, Select, Input, Space, notification } from 'antd';
 import { useIntl } from 'umi';
-import { PanelSection } from '@api7-dashboard/ui';
+
+import PanelSection from '@/components/PanelSection';
 
 const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
   advancedMatchingRules,
@@ -36,21 +37,32 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
   const { formatMessage } = useIntl();
 
   const onOk = () => {
-    modalForm.validateFields().then((value) => {
+    modalForm.validateFields().then((value: RouteModule.MatchingRule) => {
+      if (value.operator === "IN") {
+        try {
+          JSON.parse(value.value as string)
+        } catch (error) {
+          notification.warning({
+            message: formatMessage({ id: 'page.route.fields.vars.invalid' }),
+            description: formatMessage({ id: 'page.route.fields.vars.in.invalid' })
+          })
+          return
+        }
+      }
       if (mode === 'EDIT') {
         const key = modalForm.getFieldValue('key');
         onChange({
           action: 'advancedMatchingRulesChange',
           data: advancedMatchingRules.map((rule) => {
             if (rule.key === key) {
-              return { ...(value as RouteModule.MatchingRule), key };
+              return { ...value, key };
             }
             return rule;
           }),
         });
       } else {
         const rule = {
-          ...(value as RouteModule.MatchingRule),
+          ...value,
           key: Math.random().toString(36).slice(2),
         };
         onChange({
@@ -280,7 +292,7 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
   };
 
   return (
-    <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.advancedMatchRule' })}>
+    <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.advancedMatchRule' })} tooltip={formatMessage({id: 'page.route.advanced-match.tooltip'})}>
       {!disabled && (
         <Button
           onClick={() => {

web/src/pages/Route/components/Step1/MetaView.tsx

@@ -18,8 +18,8 @@ import React, { useEffect, useState } from 'react';
 import Form from 'antd/es/form';
 import { Input, Switch, Select, Button, Tag, AutoComplete, Row, Col } from 'antd';
 import { useIntl } from 'umi';
-import { PanelSection } from '@api7-dashboard/ui';
 
+import PanelSection from '@/components/PanelSection';
 import { FORM_ITEM_WITHOUT_LABEL } from '@/pages/Route/constants';
 import LabelsDrawer from '@/components/LabelsfDrawer';
 import { fetchLabelList, fetchServiceList } from '../../service';
@@ -137,7 +137,7 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
   )
 
   const Description: React.FC = () => (
-    <Form.Item label={formatMessage({ id: 'component.global.description' })} tooltip="路由描述信息">
+    <Form.Item label={formatMessage({ id: 'component.global.description' })}>
       <Row>
         <Col span={10}>
           <Form.Item noStyle name="desc">
@@ -196,7 +196,7 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
     ]
 
     return (
-      <Form.Item label={formatMessage({ id: 'page.route.form.itemLabel.redirect' })} tooltip="redirect 插件">
+      <Form.Item label={formatMessage({ id: 'page.route.form.itemLabel.redirect' })} tooltip={formatMessage({ id: 'page.route.fields.custom.redirectOption.tooltip' })}>
         <Row>
           <Col span={5}>
             <Form.Item
@@ -285,7 +285,7 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
   )
 
   const ServiceSelector: React.FC = () => (
-    <Form.Item label={formatMessage({ id: 'page.route.service' })} tooltip="绑定服务（Service）对象，以便复用其中的配置。">
+    <Form.Item label={formatMessage({ id: 'page.route.service' })} tooltip={formatMessage({id: 'page.route.fields.service_id.tooltip'})}>
       <Row>
         <Col span={5}>
           <Form.Item noStyle name="service_id">

web/src/pages/Route/components/Step1/ProxyRewrite.tsx

@@ -19,7 +19,8 @@ import Form from 'antd/es/form';
 import { Button, Input, Radio, Row, Col } from 'antd';
 import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { useIntl } from 'umi';
-import { PanelSection } from '@api7-dashboard/ui';
+
+import PanelSection from '@/components/PanelSection';
 
 import {
   FORM_ITEM_WITHOUT_LABEL,

web/src/pages/Route/components/Step1/RequestConfigView.tsx

@@ -19,7 +19,8 @@ import Form from 'antd/es/form';
 import { Button, Input, Select, Row, Col, InputNumber } from 'antd';
 import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { useIntl } from 'umi';
-import { PanelSection } from '@api7-dashboard/ui';
+
+import PanelSection from '@/components/PanelSection';
 
 import {
   HTTP_METHOD_OPTION_LIST,

web/src/pages/Route/locales/en-US.ts

@@ -171,4 +171,11 @@ export default {
 
   'page.route.advanced-match.operator.sample.IN': 'Please enter an array, e.g ["1", "2"]',
   'page.route.advanced-match.operator.sample.~~': 'Please enter a regular expression, e.g [a-z]+',
+  'page.route.advanced-match.tooltip': 'It supports route matching through request headers, request parameters and cookies, and can be applied to scenarios such as grayscale publishing and blue-green testing.',
+
+  'page.route.fields.custom.redirectOption.tooltip': 'This is related to redirect plugin',
+  'page.route.fields.service_id.tooltip': 'Bind Service object to reuse their configuration.',
+
+  'page.route.fields.vars.invalid': 'Please check the advanced match condition configuration',
+  'page.route.fields.vars.in.invalid': 'When using the IN operator, enter the parameter values in array format.',
 };

web/src/pages/Route/locales/zh-CN.ts

@@ -170,4 +170,11 @@ export default {
 
   'page.route.advanced-match.operator.sample.IN': '请输入数组，示例：["1", "2"]',
   'page.route.advanced-match.operator.sample.~~': '请输入正则表达式，示例：[a-z]+',
+  'page.route.advanced-match.tooltip': '支持通过请求头，请求参数、Cookie 进行路由匹配，可应用于灰度发布，蓝绿测试等场景。',
+
+  'page.route.fields.custom.redirectOption.tooltip': '在此配置 redirect 插件',
+  'page.route.fields.service_id.tooltip': '绑定服务（Service）对象，以便复用其中的配置。',
+
+  'page.route.fields.vars.invalid': '请检查高级匹配条件配置',
+  'page.route.fields.vars.in.invalid': '使用 IN 操作符时，请输入数组格式的参数值。',
 };