Merge branch 'origin' into golang-jwt

* origin: feat: Add more fields to limit-count plugin (apache#2322) sytle : adjust width of limit-req plugin form label (apache#2316) style: add ellipsis for route table (apache#2317) fix: add rejected_msg field to limit-req plugin form (apache#2312)
fitphp · Feb 23, 2022 · 4ee3bae · 4ee3bae
2 parents bba88b6 + fd44364
commit 4ee3bae
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 9 deletions.
diff --git a/web/cypress/integration/route/create-route-with-limit-count-plugin-form.spec.js b/web/cypress/integration/route/create-route-with-limit-count-plugin-form.spec.js
@@ -36,6 +36,7 @@ context('Create and delete route with limit-count form', () => {
     key: '#key',
     rejected_code: '#rejected_code',
     policy: '#policy',
+    group: '#group',
     redis_host: '#redis_host',
     redis_port: '#redis_port',
     redis_password: '#redis_password',
@@ -85,6 +86,7 @@ context('Create and delete route with limit-count form', () => {
     cy.get(selector.count).type(1);
     cy.get(selector.time_window).type(1);
     cy.get(selector.rejected_code).type(500);
+    cy.get(selector.group).type('test_group');
     cy.get(selector.drawer).within(() => {
       cy.contains('Submit').click({
         force: true,

diff --git a/web/cypress/integration/route/create-route-with-limit-req-form.spec.js b/web/cypress/integration/route/create-route-with-limit-req-form.spec.js
@@ -34,6 +34,7 @@ context('Create and delete route with limit-req form', () => {
     rate: '#rate',
     burst: '#burst',
     key: '#key',
+    rejected_msg: '#rejected_msg',
   };
 
   const data = {
@@ -42,6 +43,7 @@ context('Create and delete route with limit-req form', () => {
     port: '80',
     weight: 1,
     key: 'remote_addr',
+    rejected_msg: 'Requests are too frequent, please try again later.',
   };
 
   beforeEach(() => {
@@ -92,6 +94,7 @@ context('Create and delete route with limit-req form', () => {
     cy.get(selector.rate).type(1);
     cy.get(selector.burst).type(0);
     cy.get(selector.key).type(data.key);
+    cy.get(selector.rejected_msg).type(data.rejected_msg);
     cy.get(selector.drawer).within(() => {
       cy.contains('Submit').click({
         force: true,

diff --git a/web/src/components/Plugin/UI/limit-count.tsx b/web/src/components/Plugin/UI/limit-count.tsx
@@ -16,7 +16,7 @@
  */
 import React, { useState } from 'react';
 import type { FormInstance } from 'antd/es/form';
-import { Button, Col, Form, Input, InputNumber, Row, Select } from 'antd';
+import { Button, Col, Form, Input, InputNumber, Row, Select, Switch } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { useIntl } from 'umi';
 
@@ -323,6 +323,35 @@ const LimitCount: React.FC<Props> = ({ form, schema }) => {
           ))}
         </Select>
       </Form.Item>
+      <Form.Item
+        label="group"
+        name="group"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.key.tooltip' })}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        initialValue={properties.allow_degradation.default}
+        label="allow_degradation"
+        name="allow_degradation"
+        tooltip={formatMessage({
+          id: 'component.pluginForm.limit-count.allow_degradation.tooltip',
+        })}
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        initialValue={properties.show_limit_quota_header.default}
+        label="show_limit_quota_header"
+        name="show_limit_quota_header"
+        tooltip={formatMessage({
+          id: 'component.pluginForm.limit-count.show_limit_quota_header.tooltip',
+        })}
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
       <Form.Item
         shouldUpdate={(prev, next) => prev.policy !== next.policy}
         style={{ display: 'none' }}

diff --git a/web/src/components/Plugin/UI/limit-req.tsx b/web/src/components/Plugin/UI/limit-req.tsx
@@ -27,7 +27,7 @@ type Props = {
 
 export const FORM_ITEM_LAYOUT = {
   labelCol: {
-    span: 4,
+    span: 5,
   },
   wrapperCol: {
     span: 8,
@@ -102,6 +102,13 @@ const LimitReq: React.FC<Props> = ({ form, schema }) => {
           max={properties.rejected_code.maximum}
         />
       </Form.Item>
+      <Form.Item
+        label="rejected_msg"
+        name="rejected_msg"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rejected_msg.tooltip' })}
+      >
+        <Input />
+      </Form.Item>
       <Form.Item
         label="nodelay"
         name="nodelay"

diff --git a/web/src/components/Plugin/locales/en-US.ts b/web/src/components/Plugin/locales/en-US.ts
@@ -111,6 +111,8 @@ export default {
   'component.pluginForm.limit-req.key.tooltip': 'The user specified key to limit the rate.',
   'component.pluginForm.limit-req.rejected_code.tooltip':
     'The HTTP status code returned when the request exceeds the threshold is rejected.',
+  'component.pluginForm.limit-req.rejected_msg.tooltip':
+    'The response body returned when the request exceeds the threshold is rejected.',
   'component.pluginForm.limit-req.nodelay.tooltip':
     'If nodelay flag is true, bursted requests will not get delayed',
 
@@ -130,6 +132,12 @@ export default {
     'The HTTP status code returned when the request exceeds the threshold is rejected, default 503.',
   'component.pluginForm.limit-count.policy.tooltip':
     'The rate-limiting policies to use for retrieving and incrementing the limits. Available values are local(the counters will be stored locally in-memory on the node) and redis(counters are stored on a Redis server and will be shared across the nodes, usually use it to do the global speed limit) and redis-cluster(the same function as redis, only use Redis cluster pattern).',
+  'component.pluginForm.limit-count.allow_degradation.tooltip':
+    'Whether to enable plugin degradation when the limit-count function is temporarily unavailable(e.g. redis timeout). Allow requests to continue when the value is set to true',
+  'component.pluginForm.limit-count.show_limit_quota_header.tooltip':
+    'Whether show X-RateLimit-Limit and X-RateLimit-Remaining (which mean the total number of requests and the remaining number of requests that can be sent) in the response header',
+  'component.pluginForm.limit-count.group.tooltip':
+    'Route configured with the same group will share the same counter',
   'component.pluginForm.limit-count.redis_host.tooltip':
     'When using the redis policy, this property specifies the address of the Redis server.',
   'component.pluginForm.limit-count.redis_port.tooltip':

diff --git a/web/src/components/Plugin/locales/zh-CN.ts b/web/src/components/Plugin/locales/zh-CN.ts
@@ -104,6 +104,7 @@ export default {
   'component.pluginForm.limit-req.key.tooltip': '用来做请求计数的依据',
   'component.pluginForm.limit-req.rejected_code.tooltip':
     '当请求超过阈值被拒绝时，返回的 HTTP 状态码。',
+  'component.pluginForm.limit-req.rejected_msg.tooltip': '当请求超过阈值被拒绝时，返回的响应体。',
   'component.pluginForm.limit-req.nodelay.tooltip': '开启后突发的请求不会延迟',
 
   'component.plugin.form': '表单',
@@ -123,6 +124,12 @@ export default {
     '当请求超过阈值被拒绝时，返回的 HTTP 状态码。',
   'component.pluginForm.limit-count.policy.tooltip':
     '用于检索和增加限制的速率限制策略。可选的值有：local(计数器被以内存方式保存在节点本地，默认选项) 和 redis(计数器保存在 Redis 服务节点上，从而可以跨节点共享结果，通常用它来完成全局限速)；以及redis-cluster，跟 redis 功能一样，只是使用 redis 集群方式。',
+  'component.pluginForm.limit-count.allow_degradation.tooltip':
+    '当限流插件功能临时不可用时（例如，Redis 超时）是否允许请求继续。当值设置为 true 时则自动允许请求继续',
+  'component.pluginForm.limit-count.show_limit_quota_header.tooltip':
+    '是否在响应头中显示 X-RateLimit-Limit 和 X-RateLimit-Remaining （限制的总请求数和剩余还可以发送的请求数）',
+  'component.pluginForm.limit-count.group.tooltip':
+    '配置同样的 group 的 Route 将共享同样的限流计数器',
   'component.pluginForm.limit-count.redis_host.tooltip':
     '当使用 redis 限速策略时，该属性是 Redis 服务节点的地址。',
   'component.pluginForm.limit-count.redis_port.tooltip':

diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
@@ -33,6 +33,7 @@ import {
   Divider,
   Menu,
   Dropdown,
+  Tooltip,
 } from 'antd';
 import { history, useIntl } from 'umi';
 import { PlusOutlined, ExportOutlined, ImportOutlined, DownOutlined } from '@ant-design/icons';
@@ -328,7 +329,12 @@ const Page: React.FC = () => {
       </Popconfirm>
     );
   };
-
+  const tagStyle = {
+    maxWidth: '200px',
+    overflow: 'hidden',
+    WhiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  };
   const columns: ProColumns<RouteModule.ResponseBody>[] = [
     {
       title: formatMessage({ id: 'component.global.name' }),
@@ -339,37 +345,46 @@ const Page: React.FC = () => {
       title: formatMessage({ id: 'component.global.id' }),
       hideInSearch: true,
       dataIndex: 'id',
+      width: 200,
     },
     {
       title: formatMessage({ id: 'page.route.host' }),
       hideInSearch: true,
+      width: 224,
       render: (_, record) => {
         const list = record.hosts || (record.host && [record.host]) || [];
 
         return list.map((item) => (
-          <Tag key={item} color="geekblue">
-            {item}
-          </Tag>
+          <Tooltip placement="topLeft" title={item}>
+            <Tag key={item} color="geekblue" style={tagStyle}>
+              {item}
+            </Tag>
+          </Tooltip>
         ));
       },
     },
     {
       title: formatMessage({ id: 'page.route.path' }),
       dataIndex: 'uri',
+      width: 224,
       render: (_, record) => {
         const list = record.uris || (record.uri && [record.uri]) || [];
 
         return list.map((item) => (
-          <Tag key={item} color="geekblue">
-            {item}
-          </Tag>
+          <Tooltip placement="topLeft" title={item}>
+            <Tag key={item} color="geekblue" style={tagStyle}>
+              {item}
+            </Tag>
+          </Tooltip>
         ));
       },
     },
     {
       title: formatMessage({ id: 'component.global.description' }),
       dataIndex: 'desc',
       hideInSearch: true,
+      ellipsis: true,
+      width: 200,
     },
     {
       title: formatMessage({ id: 'component.global.labels' }),
@@ -423,6 +438,7 @@ const Page: React.FC = () => {
     {
       title: formatMessage({ id: 'component.global.version' }),
       dataIndex: 'API_VERSION',
+      width: 100,
       render: (_, record) => {
         return Object.keys(record.labels || {})
           .filter((item) => item === 'API_VERSION')
@@ -460,6 +476,7 @@ const Page: React.FC = () => {
     {
       title: formatMessage({ id: 'page.route.status' }),
       dataIndex: 'status',
+      width: 100,
       render: (_, record) => (
         <>
           {record.status ? (
@@ -496,13 +513,15 @@ const Page: React.FC = () => {
       title: formatMessage({ id: 'component.global.updateTime' }),
       dataIndex: 'update_time',
       hideInSearch: true,
+      width: 200,
       render: (text) => timestampToLocaleString(text as number),
     },
     {
       title: formatMessage({ id: 'component.global.operation' }),
       valueType: 'option',
       fixed: 'right',
       hideInSearch: true,
+      width: 240,
       render: (_, record) => (
         <>
           <Space align="baseline">