Merge branch 'master' into limit-conn-plugin-form

apache · Apr 12, 2021 · 9afc7f5 · 9afc7f5
2 parents 18c98db + 36f371f
commit 9afc7f5
Show file tree

Hide file tree

Showing 52 changed files with 2,047 additions and 718 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -2,3 +2,8 @@
   from = "/apisix/*"
   to = "http://139.217.190.60/apisix/:splat"
   status = 200
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
diff --git a/web/cypress.json b/web/cypress.json
@@ -3,5 +3,9 @@
   "viewportHeight": 1080,
   "baseUrl": "http://localhost:8000",
   "video": true,
-  "videoUploadOnPasses": false
+  "videoUploadOnPasses": false,
+  "retries": {
+    "runMode": 3,
+    "openMode": 0
+  }
 }
diff --git a/web/cypress/fixtures/export-route-dataset.json b/web/cypress/fixtures/export-route-dataset.json
@@ -38,13 +38,13 @@
                 "weight": 1
               }
             ],
-            "retries": 1,
             "timeout": {
               "connect": 6,
               "read": 6,
               "send": 6
             },
             "type": "roundrobin",
+            "scheme": "http",
             "pass_host": "pass"
           }
         }
@@ -90,13 +90,13 @@
                 "weight": 1
               }
             ],
-            "retries": 1,
             "timeout": {
               "connect": 6,
               "read": 6,
               "send": 6
             },
             "type": "roundrobin",
+            "scheme": "http",
             "pass_host": "pass"
           }
         }
@@ -141,13 +141,13 @@
                 "weight": 1
               }
             ],
-            "retries": 1,
             "timeout": {
               "connect": 6,
               "read": 6,
               "send": 6
             },
             "type": "roundrobin",
+            "scheme": "http",
             "pass_host": "pass"
           }
         }

diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx
@@ -27,6 +27,8 @@ import {
   Alert,
   Space,
   Popconfirm,
+  Tooltip,
+  Input,
 } from 'antd';
 import { useIntl } from 'umi';
 import CodeMirror from '@uiw/react-codemirror';
@@ -105,13 +107,13 @@ const PluginDetail: React.FC<Props> = ({
   const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>(
     codeMirrorModeList.JSON,
   );
-  const modeOptions = [
+  const modeOptions: { label: string; value: string }[] = [
     { label: codeMirrorModeList.JSON, value: codeMirrorModeList.JSON },
     { label: codeMirrorModeList.YAML, value: codeMirrorModeList.YAML },
   ];
 
   if (PLUGIN_UI_LIST.includes(name)) {
-    modeOptions.push({ label: codeMirrorModeList.UIForm, value: codeMirrorModeList.UIForm });
+    modeOptions.push({ label: formatMessage({ id: 'component.plugin.form' }), value: codeMirrorModeList.UIForm });
   }
 
   useEffect(() => {
@@ -247,7 +249,7 @@ const PluginDetail: React.FC<Props> = ({
   return (
     <>
       <Drawer
-        title={`Plugin: ${name}`}
+        title={formatMessage({ id: 'component.plugin.editor' })}
         visible={visible}
         placement="right"
         closable={false}
@@ -315,10 +317,16 @@ const PluginDetail: React.FC<Props> = ({
           border: 1px solid rgb(235, 237, 240);
           margin-top:10px;
         }
+        .ant-input[disabled] {
+          color: #000;
+        }
       `}
         </style>
 
         <Form {...FORM_ITEM_LAYOUT} style={{ marginTop: '10px' }} form={form}>
+          <Form.Item label={formatMessage({ id: 'component.global.name' })}>
+            <Input value={name} bordered={false} disabled />
+          </Form.Item>
           <Form.Item label={formatMessage({ id: 'component.global.enable' })} valuePropName="checked" name="disable">
             <Switch
               defaultChecked={initialData[name] && !initialData[name].disable}
@@ -328,7 +336,7 @@ const PluginDetail: React.FC<Props> = ({
           {type === 'global' && (
             <Form.Item label={formatMessage({ id: 'component.global.scope' })} name="scope">
               <Select disabled>
-                <Select.Option value="global">Global</Select.Option>
+                <Select.Option value="global">{formatMessage({ id: "other.global" })}</Select.Option>
               </Select>
             </Form.Item>
           )}
@@ -338,11 +346,26 @@ const PluginDetail: React.FC<Props> = ({
           title=""
           subTitle={
             pluginType === 'auth' && schemaType !== 'consumer' && (codeMirrorMode !== codeMirrorModeList.UIForm) ? (
-              <Alert message={formatMessage({ id: 'component.global.noConfigurationRequired' })} type="warning" />
+              <Alert message={formatMessage({ id: 'component.plugin.noConfigurationRequired' })} type="warning" />
             ) : null
           }
           ghost={false}
           extra={[
+            <Select
+              defaultValue={codeMirrorModeList.JSON}
+              value={codeMirrorMode}
+              options={modeOptions}
+              onChange={(value: PluginComponent.CodeMirrorMode) => {
+                handleModeChange(value);
+              }}
+              data-cy='code-mirror-mode'
+              key={1}
+            ></Select>,
+            <Tooltip title={formatMessage({ id: "component.plugin.format-codes.disable" })} key={2}>
+              <Button type="primary" onClick={formatCodes} disabled={codeMirrorMode === codeMirrorModeList.UIForm}>
+                {formatMessage({ id: 'component.global.format' })}
+              </Button>
+            </Tooltip>,
             <Button
               type="default"
               icon={<LinkOutlined />}
@@ -353,21 +376,9 @@ const PluginDetail: React.FC<Props> = ({
                   window.open(`https://apisix.apache.org/docs/apisix/plugins/${name}`);
                 }
               }}
-              key={1}
+              key={3}
             >
               {formatMessage({ id: 'component.global.document' })}
-            </Button>,
-            <Select
-              defaultValue={codeMirrorModeList.JSON}
-              value={codeMirrorMode}
-              options={modeOptions}
-              onChange={(value: PluginComponent.CodeMirrorMode) => {
-                handleModeChange(value);
-              }}
-              data-cy='code-mirror-mode'
-            ></Select>,
-            <Button type="primary" onClick={formatCodes} key={3} disabled={codeMirrorMode === codeMirrorModeList.UIForm}>
-              {formatMessage({ id: 'component.global.format' })}
             </Button>
           ]}
         />

diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { FormInstance } from 'antd/es/form';
+import type { FormInstance } from 'antd/es/form';
 import { Empty } from 'antd';
 import { useIntl } from 'umi';
 
@@ -34,7 +34,7 @@ export const PluginForm: React.FC<Props> = ({ name, renderForm, form }) => {
 
   const { formatMessage } = useIntl();
 
-  if (!renderForm) { return <Empty description={formatMessage({ id: 'component.global.noConfigurationRequired' })} /> };
+  if (!renderForm) { return <Empty style={{ marginTop: 100 }} description={formatMessage({ id: 'component.plugin.noConfigurationRequired' })} /> };
 
   switch (name) {
     case 'basic-auth':

diff --git a/web/src/components/Plugin/locales/en-US.ts b/web/src/components/Plugin/locales/en-US.ts
@@ -28,4 +28,9 @@ export default {
   'component.pluginForm.limit-conn.default_conn_delay.tooltip': 'the latency seconds of request when concurrent requests exceeding conn but below (conn + burst).',
   'component.pluginForm.limit-conn.key.tooltip': 'to limit the concurrency level.For example, one can use the host name (or server zone) as the key so that we limit concurrency per host name. Otherwise, we can also use the client address as the key so that we can avoid a single client from flooding our service with too many parallel connections or requests.Now accept those as key: "remote_addr"(client\'s IP), "server_addr"(server\'s IP), "X-Forwarded-For/X-Real-IP" in request header, "consumer_name"(consumer\'s username).',
   'component.pluginForm.limit-conn.rejected_code.tooltip': 'returned when the request exceeds conn + burst will be rejected.',
+
+  'component.plugin.form': 'Form',
+  'component.plugin.format-codes.disable': 'Format JSON or YAML data',
+  'component.plugin.editor': 'Plugin Editor',
+  'component.plugin.noConfigurationRequired': 'Doesn\'t need configuration',
 };
diff --git a/web/src/components/Plugin/locales/zh-CN.ts b/web/src/components/Plugin/locales/zh-CN.ts
@@ -28,4 +28,9 @@ export default {
   'component.pluginForm.limit-conn.default_conn_delay.tooltip': '默认的典型连接（或请求）的处理延迟时间。',
   'component.pluginForm.limit-conn.key.tooltip': '用户指定的限制并发级别的关键字，可以是客户端 IP 或服务端 IP。例如，可以使用主机名（或服务器区域）作为关键字，以便限制每个主机名的并发性。 否则，我们也可以使用客户端地址作为关键字，这样我们就可以避免单个客户端用太多的并行连接或请求淹没我们的服务。当前接受的 key 有："remote_addr"（客户端 IP 地址）, "server_addr"（服务端 IP 地址）, 请求头中的"X-Forwarded-For" 或 "X-Real-IP", "consumer_name"（consumer 的 username）。',
   'component.pluginForm.limit-conn.rejected_code.tooltip': '当请求超过 conn + burst 这个阈值时，返回的 HTTP 状态码。',
+
+  'component.plugin.form': '表单',
+  'component.plugin.format-codes.disable': '用于格式化 JSON 或 YAML 内容',
+  'component.plugin.editor': '插件配置',
+  'component.plugin.noConfigurationRequired': '本插件无需配置',
 };
diff --git a/web/src/components/RawDataEditor/RawDataEditor.tsx b/web/src/components/RawDataEditor/RawDataEditor.tsx
@@ -146,18 +146,6 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
         <PageHeader
           title=""
           extra={[
-            <Button
-              type="default"
-              icon={<LinkOutlined />}
-              onClick={() => {
-                window.open(
-                  `https://apisix.apache.org/docs/apisix/admin-api#${type}`,
-                );
-              }}
-              key={1}
-            >
-              Document
-            </Button>,
             <Select
               defaultValue={codeMirrorModeList.JSON}
               value={codeMirrorMode}
@@ -168,7 +156,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
               data-cy='code-mirror-mode'
             ></Select>,
             <Button type="primary" onClick={formatCodes} key={2}>
-              Format
+              {formatMessage({ id: 'component.global.format' })}
             </Button>,
             <CopyToClipboard text={JSON.stringify(data)} onCopy={(_: string, result: boolean) => {
               if (!result) {
@@ -182,9 +170,21 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
               });
             }}>
               <Button type="primary" key={2}>
-                Copy
+                {formatMessage({ id: 'component.global.copy' })}
               </Button>
             </CopyToClipboard>,
+            <Button
+              type="default"
+              icon={<LinkOutlined />}
+              onClick={() => {
+                window.open(
+                  `https://apisix.apache.org/docs/apisix/admin-api#${type}`,
+                );
+              }}
+              key={1}
+            >
+              {formatMessage({ id: 'component.global.document' })}
+            </Button>,
           ]}
         />
         <CodeMirror