feat: add limit-count plugin

web/cypress/integration/consumer/create-consumer-with-limit-count-plugin-form.spec.js

@@ -0,0 +1,167 @@
+/*
+ * 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.
+ */
+/* eslint-disable no-undef */
+
+context('Create and delete consumer with limit-count plugin form', () => {
+  beforeEach(() => {
+    cy.login();
+
+    cy.fixture('selector.json').as('domSelector');
+    cy.fixture('data.json').as('data');
+  });
+
+  const selector = {
+    count: '#count',
+    time_window: '#time_window',
+    redis_timeout: '#time_window',
+    key: '#key',
+    rejected_code: '#rejected_code',
+    policy: '#policy',
+    redis_host: '#redis_host',
+    redis_port: '#redis_port',
+    redis_password: '#redis_password',
+    redis_database: '#redis_database',
+    redis_timeout: '#redis_timeout',
+    redis_cluster_name: '#redis_cluster_name',
+    redis_cluster_nodes_0: '#redis_cluster_nodes_0',
+    redis_cluster_nodes_1: '#redis_cluster_nodes_1',
+  }
+
+  const data = {
+    count: 1,
+    time_window: 1,
+    redis_timeout: 10,
+    rejected_code: 500,
+    redis_host: '127.0.0.1',
+    redis_password: 'redis_password',
+    redis_cluster_name: 'redis_cluster_name',
+    redis_cluster_nodes_0: "redis.cluster1",
+    redis_cluster_nodes_1: "redis.cluster1",
+  }
+
+  it('should create consumer with limit-count form', function () {
+    cy.visit('/');
+    cy.contains('Consumer').click();
+    cy.get(this.domSelector.empty).should('be.visible');
+    cy.contains('Create').click();
+    // basic information
+    cy.get(this.domSelector.username).type(this.data.consumerName);
+    cy.get(this.domSelector.description).type(this.data.description);
+    cy.contains('Next').click();
+
+    // config auth plugin
+    cy.contains(this.domSelector.pluginCard, 'key-auth').within(() => {
+      cy.contains('Enable').click({
+        force: true,
+      });
+    });
+    cy.focused(this.domSelector.drawer).should('exist');
+    cy.get(this.domSelector.disabledSwitcher).click();
+    // edit codemirror
+    cy.get(this.domSelector.codeMirror)
+      .first()
+      .then((editor) => {
+        editor[0].CodeMirror.setValue(
+          JSON.stringify({
+            key: 'test',
+          }),
+        );
+        cy.contains('button', 'Submit').click();
+      });
+
+    cy.contains(this.domSelector.pluginCard, 'limit-count').within(() => {
+      cy.contains('Enable').click({
+        force: true,
+      });
+    });
+
+    cy.focused(this.domSelector.drawer).should('exist');
+
+    // config limit-count form with local policy
+    cy.get(selector.count).type(data.count);
+    cy.get(selector.time_window).type(data.time_window);
+    cy.get(selector.rejected_code).type(data.rejected_code);
+    cy.get(this.domSelector.drawer).within(() => {
+      cy.contains('Submit').click({
+        force: true,
+      });
+    });
+    cy.get(this.domSelector.drawer).should('not.exist');
+
+    // config limit-count form with redisÎ policy
+    cy.contains(this.domSelector.pluginCard, 'limit-count').within(() => {
+      cy.contains('Enable').click({
+        force: true,
+      });
+    });
+    cy.focused(this.domSelector.drawer).should('exist');
+    cy.contains('local').click();
+    cy.get(this.domSelector.dropdown).within(() => {
+      cy.contains('redis').click({
+        force: true,
+      });
+    });
+    cy.get(selector.redis_host).type(data.redis_host);
+    cy.get(selector.redis_password).type(data.redis_password);
+    cy.get(this.domSelector.drawer).within(() => {
+      cy.contains('Submit').click({
+        force: true,
+      });
+    });
+    cy.get(this.domSelector.drawer).should('not.exist');
+
+
+    // config limit-count form with redisÎ policy
+    cy.contains(this.domSelector.pluginCard, 'limit-count').within(() => {
+      cy.contains('Enable').click({
+        force: true,
+      });
+    });
+    cy.focused(this.domSelector.drawer).should('exist');
+    cy.contains('redis').click();
+    cy.get(this.domSelector.dropdown).within(() => {
+      cy.contains('redis-cluster').click({
+        force: true,
+      });
+    });
+    cy.get(selector.redis_cluster_name).type(data.redis_cluster_name);
+    cy.get(this.domSelector.drawer).within(() => {
+      cy.contains('Add').click({
+        force: true,
+      });
+    });
+    cy.get(selector.redis_cluster_nodes_0).type(data.redis_cluster_nodes_0);
+    cy.get(selector.redis_cluster_nodes_1).type(data.redis_cluster_nodes_1);
+    cy.get(this.domSelector.drawer).within(() => {
+      cy.contains('Submit').click({
+        force: true,
+      });
+    });
+    cy.get(this.domSelector.drawer).should('not.exist');
+
+    cy.contains('button', 'Next').click();
+    cy.contains('button', 'Submit').click();
+    cy.get(this.domSelector.notification).should('contain', this.data.createConsumerSuccess);
+  });
+
+  it('should delete the consumer', function () {
+    cy.visit('/consumer/list');
+    cy.contains(this.data.consumerName).should('be.visible').siblings().contains('Delete').click();
+    cy.contains('button', 'Confirm').click();
+    cy.get(this.domSelector.notification).should('contain', this.data.deleteConsumerSuccess);
+  });
+});

web/src/components/Plugin/UI/limit-count.tsx

@@ -0,0 +1,215 @@
+/*
+ * 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, { useState } from 'react';
+import type { FormInstance } from 'antd/es/form';
+import { Button, Col, Form, Input, InputNumber, Row, Select } from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { useIntl } from 'umi';
+
+type Props = {
+  form: FormInstance;
+};
+
+type PolicyProps = "local" | "redis" | "redis-cluster"
+
+const FORM_ITEM_LAYOUT = {
+  labelCol: {
+    span: 7,
+  },
+  wrapperCol: {
+    span: 10
+  },
+};
+
+const FORM_ITEM_WITHOUT_LABEL = {
+  wrapperCol: {
+    span: 10, offset: 7,
+  },
+};
+
+const removeBtnStyle = {
+  marginLeft: 20,
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const RedisForm: React.FC = () => {
+  const { formatMessage } = useIntl();
+
+  return (<>
+    <Form.Item
+      label="redis_host"
+      name="redis_host"
+      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_host.tooltip' })}
+      required
+    >
+      <Input />
+    </Form.Item>
+    <Form.Item
+      label="redis_port"
+      name="redis_port"
+      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_port.tooltip' })}
+    >
+      <InputNumber min={1} />
+    </Form.Item>
+    <Form.Item
+      label="redis_password"
+      name="redis_password"
+      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_password.tooltip' })}
+      required
+    >
+      <Input />
+    </Form.Item>
+    <Form.Item
+      label="redis_database"
+      name="redis_database"
+      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_database.tooltip' })}
+    >
+      <InputNumber min={0} />
+    </Form.Item>
+    <Form.Item
+      label="redis_timeout"
+      name="redis_timeout"
+      tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_timeout.tooltip' })}
+    >
+      <InputNumber />
+    </Form.Item>
+  </>)
+}
+
+const RedisClusterForm: React.FC<Props> = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <Form.Item
+        label="redis_cluster_name"
+        name="redis_cluster_name"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_cluster_name.tooltip' })}
+        required
+      >
+        <Input />
+      </Form.Item>
+      <Form.List name="redis_cluster_nodes">
+        {(fields, { add, remove }) => {
+          return (
+            <div>
+              <Form.Item
+                label='redis_cluster_nodes'
+                tooltip={formatMessage({ id: 'component.pluginForm.limit-count.redis_cluster_nodes.tooltip' })}
+                style={{ marginBottom: 0 }}
+              >
+                {fields.map((field, index) => (
+                  <Row style={{ marginBottom: 10 }} gutter={16} key={index}>
+                    <Col>
+                      <Form.Item
+                        {...field}
+                        validateTrigger={['onChange', 'onBlur']}
+                        noStyle
+                      >
+                        <Input />
+                      </Form.Item>
+                    </Col>
+                    <Col style={{ ...removeBtnStyle, marginLeft: -10 }}>
+                      {fields.length > 1 ? (
+                        <MinusCircleOutlined
+                          className="dynamic-delete-button"
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                      ) : null}
+                    </Col>
+                  </Row>
+                ))}
+              </Form.Item>
+
+              <Form.Item {...FORM_ITEM_WITHOUT_LABEL}>
+                <Button
+                  type="dashed"
+                  onClick={() => {
+                    add();
+                  }}
+                >
+                  <PlusOutlined /> {formatMessage({ id: 'component.global.add' })}
+                </Button>
+              </Form.Item>
+            </div>
+          );
+        }}
+      </Form.List>
+    </>)
+}
+
+const LimitCount: React.FC<Props> = ({ form }) => {
+  const [policy, setPoicy] = useState<PolicyProps>('local');
+  const { formatMessage } = useIntl()
+
+  return (
+    <Form
+      form={form}
+      {...FORM_ITEM_LAYOUT}
+      initialValues={{ key: 'remote_addr', redis_cluster_nodes: [''], policy, redis_port: 6379, redis_database: 0, redis_timeout: 1000 }}
+    >
+      <Form.Item
+        label="count"
+        name="count"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.count.tooltip' })}
+        required
+      >
+        <InputNumber min={1} />
+      </Form.Item>
+      <Form.Item
+        label="time_window"
+        name="time_window"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.time_window.tooltip' })}
+        required
+      >
+        <InputNumber min={1} />
+      </Form.Item>
+      <Form.Item
+        label="key"
+        name="key"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.key.tooltip' })}
+      >
+        <Select>
+          {["remote_addr", "server_addr", "http_x_real_ip", "http_x_forwarded_for", "consumer_name", "service_id"].map(item => (<Select.Option value={item}>{item}</Select.Option>))}
+        </Select>
+      </Form.Item>
+      <Form.Item
+        label="rejected_code"
+        name="rejected_code"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.rejected_code.tooltip' })}
+      >
+        <InputNumber min={200} max={599} />
+      </Form.Item>
+      <Form.Item
+        label="policy"
+        name="policy"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-count.policy.tooltip' })}
+      >
+        <Select onChange={(e: PolicyProps) => { setPoicy(e) }}>
+          {["local", "redis", "redis-cluster"].map(item => (<Select.Option value={item}>{item}</Select.Option>))}
+        </Select>
+      </Form.Item>
+      { Boolean(policy === 'redis') && <RedisForm />}
+      { Boolean(policy === 'redis-cluster') && <RedisClusterForm form={form} />}
+    </Form>
+  );
+}
+
+export default LimitCount;