From 2d78713758d349f5a5fe94108263a3303069693d Mon Sep 17 00:00:00 2001 From: Baoyuan Date: Wed, 4 Aug 2021 15:31:30 +0800 Subject: [PATCH 1/3] fix: modify key required rule --- .../components/Upstream/components/Type.tsx | 55 +++++++++----- web/src/components/Upstream/locales/en-US.ts | 76 +++++++++++++------ 2 files changed, 85 insertions(+), 46 deletions(-) diff --git a/web/src/components/Upstream/components/Type.tsx b/web/src/components/Upstream/components/Type.tsx index ed656700fc..ea6927e5c6 100644 --- a/web/src/components/Upstream/components/Type.tsx +++ b/web/src/components/Upstream/components/Type.tsx @@ -14,20 +14,20 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react' -import { AutoComplete, Form, Select } from 'antd' -import { useIntl } from 'umi' -import type { FormInstance } from 'antd/es/form' +import React, { useState } from 'react'; +import { AutoComplete, Form, Select } from 'antd'; +import { useIntl } from 'umi'; +import type { FormInstance } from 'antd/es/form'; -import { HashOnEnum, CommonHashKeyEnum, AlgorithmEnum } from '../constant' +import { HashOnEnum, CommonHashKeyEnum, AlgorithmEnum } from '../constant'; type Props = { - readonly?: boolean - form: FormInstance -} + readonly?: boolean; + form: FormInstance; +}; -const CHash: React.FC> = ({ readonly }) => { - const { formatMessage } = useIntl() +const CHash: React.FC = ({ form, readonly }) => { + const { formatMessage } = useIntl(); const [keySearchWord, setKeySearchWord] = useState(''); const handleSearch = (search: string) => { @@ -35,7 +35,13 @@ const CHash: React.FC> = ({ readonly }) => { }; return ( - + - + {Object.entries(CommonHashKeyEnum) - .filter((([label, value]) => label.startsWith(keySearchWord) || value.startsWith(keySearchWord))) + .filter( + ([label, value]) => + label.startsWith(keySearchWord) || value.startsWith(keySearchWord), + ) .map(([label, value]) => ( {label} @@ -58,11 +71,11 @@ const CHash: React.FC> = ({ readonly }) => { - ) + ); }; const Component: React.FC = ({ readonly, form }) => { - const { formatMessage } = useIntl() + const { formatMessage } = useIntl(); return ( @@ -85,13 +98,13 @@ const Component: React.FC = ({ readonly, form }) => { {() => { if (form.getFieldValue('type') === 'chash') { - return ; + return ; } return null; }} - ) -} + ); +}; -export default Component +export default Component; diff --git a/web/src/components/Upstream/locales/en-US.ts b/web/src/components/Upstream/locales/en-US.ts index fca1919a31..34cae8c68a 100644 --- a/web/src/components/Upstream/locales/en-US.ts +++ b/web/src/components/Upstream/locales/en-US.ts @@ -38,65 +38,91 @@ export default { 'component.upstream.fields.key.tooltip': 'Key as hashing input', 'component.upstream.fields.retries': 'Retries', - 'component.upstream.fields.retries.tooltip': 'The retry mechanism sends the request to the next upstream node. A value of 0 disables the retry mechanism and leaves the table empty to use the number of available backend nodes.', + 'component.upstream.fields.retries.tooltip': + 'The retry mechanism sends the request to the next upstream node. A value of 0 disables the retry mechanism and leaves the table empty to use the number of available backend nodes.', 'component.upstream.fields.checks.active.type': 'Type', - 'component.upstream.fields.checks.active.type.tooltip': 'Whether to perform active health checks using HTTP or HTTPS, or just attempt a TCP connection.', + 'component.upstream.fields.checks.active.type.tooltip': + 'Whether to perform active health checks using HTTP or HTTPS, or just attempt a TCP connection.', 'component.upstream.fields.checks.active.concurrency': 'Concurrency', - 'component.upstream.fields.checks.active.concurrency.tooltip': 'Number of targets to check concurrently in active health checks.', + 'component.upstream.fields.checks.active.concurrency.tooltip': + 'Number of targets to check concurrently in active health checks.', 'component.upstream.fields.checks.active.host': 'Host', 'component.upstream.fields.checks.active.host.required': 'Please enter the hostname', - 'component.upstream.fields.checks.active.host.tooltip': 'The hostname of the HTTP request used to perform the active health check', + 'component.upstream.fields.checks.active.host.tooltip': + 'The hostname of the HTTP request used to perform the active health check', 'component.upstream.fields.checks.active.host.scope': 'Only letters, numbers and . are supported', 'component.upstream.fields.checks.active.port': 'Port', 'component.upstream.fields.checks.active.http_path': 'HTTP Path', - 'component.upstream.fields.checks.active.http_path.tooltip': 'The path that should be used when issuing the HTTP GET request to the target. The default value is /.', + 'component.upstream.fields.checks.active.http_path.tooltip': + 'The path that should be used when issuing the HTTP GET request to the target. The default value is /.', + 'component.upstream.fields.checks.active.http_path.placeholder': + 'Please enter the HTTP request path', 'component.upstream.fields.checks.active.https_verify_certificate': 'Verify HTTPs Certificate', - 'component.upstream.fields.checks.active.https_verify_certificate.tooltip': 'Whether to check the validity of the SSL certificate of the remote host when performing active health checks using HTTPS.', + 'component.upstream.fields.checks.active.https_verify_certificate.tooltip': + 'Whether to check the validity of the SSL certificate of the remote host when performing active health checks using HTTPS.', 'component.upstream.fields.checks.active.req_headers': 'Request Headers', - 'component.upstream.fields.checks.active.req_headers.tooltip': 'Additional request headers, example: User-Agent: curl/7.29.0', + 'component.upstream.fields.checks.active.req_headers.tooltip': + 'Additional request headers, example: User-Agent: curl/7.29.0', 'component.upstream.fields.checks.active.healthy.interval': 'Interval', - 'component.upstream.fields.checks.active.healthy.interval.tooltip': 'Interval between checks for healthy targets (in seconds)', + 'component.upstream.fields.checks.active.healthy.interval.tooltip': + 'Interval between checks for healthy targets (in seconds)', 'component.upstream.fields.checks.active.healthy.successes': 'Successes', - 'component.upstream.fields.checks.active.healthy.successes.tooltip': 'Number of successes to consider a target healthy', - 'component.upstream.fields.checks.active.healthy.successes.required': 'Please enter successes number', + 'component.upstream.fields.checks.active.healthy.successes.tooltip': + 'Number of successes to consider a target healthy', + 'component.upstream.fields.checks.active.healthy.successes.required': + 'Please enter successes number', 'component.upstream.fields.checks.active.healthy.http_statuses': 'HTTP Statuses', - 'component.upstream.fields.checks.active.healthy.http_statuses.tooltip': 'An array of HTTP statuses to consider a success, indicating healthiness, when returned by a probe in active health checks.', + 'component.upstream.fields.checks.active.healthy.http_statuses.tooltip': + 'An array of HTTP statuses to consider a success, indicating healthiness, when returned by a probe in active health checks.', 'component.upstream.fields.checks.active.unhealthy.timeouts': 'Timeouts', - 'component.upstream.fields.checks.active.unhealthy.timeouts.tooltip': 'Number of timeouts in active probes to consider a target unhealthy.', + 'component.upstream.fields.checks.active.unhealthy.timeouts.tooltip': + 'Number of timeouts in active probes to consider a target unhealthy.', 'component.upstream.fields.checks.active.unhealthy.http_failures': 'HTTP Failures', - 'component.upstream.fields.checks.active.unhealthy.http_failures.tooltip': 'Number of HTTP failures to consider a target unhealthy', - 'component.upstream.fields.checks.active.unhealthy.http_failures.required': 'Please enter the HTTP failures', + 'component.upstream.fields.checks.active.unhealthy.http_failures.tooltip': + 'Number of HTTP failures to consider a target unhealthy', + 'component.upstream.fields.checks.active.unhealthy.http_failures.required': + 'Please enter the HTTP failures', 'component.upstream.fields.checks.active.unhealthy.tcp_failures': 'TCP Failures', - 'component.upstream.fields.checks.active.unhealthy.tcp_failures.tooltip': 'Number of TCP failures to consider a target unhealthy', - 'component.upstream.fields.checks.active.unhealthy.tcp_failures.required': 'Please enter the TCP Failures', + 'component.upstream.fields.checks.active.unhealthy.tcp_failures.tooltip': + 'Number of TCP failures to consider a target unhealthy', + 'component.upstream.fields.checks.active.unhealthy.tcp_failures.required': + 'Please enter the TCP Failures', 'component.upstream.fields.checks.active.unhealthy.interval': 'Interval', - 'component.upstream.fields.checks.active.unhealthy.interval.tooltip': 'Interval between active health checks for unhealthy targets (in seconds). A value of zero indicates that active probes for healthy targets should not be performed.', - 'component.upstream.fields.checks.active.unhealthy.required': 'Please enter the unhelthy interval', + 'component.upstream.fields.checks.active.unhealthy.interval.tooltip': + 'Interval between active health checks for unhealthy targets (in seconds). A value of zero indicates that active probes for healthy targets should not be performed.', + 'component.upstream.fields.checks.active.unhealthy.required': + 'Please enter the unhelthy interval', 'component.upstream.fields.checks.passive.healthy.successes': 'Successes', - 'component.upstream.fields.checks.passive.healthy.successes.tooltip': 'Number of successes to consider a target healthy', - 'component.upstream.fields.checks.passive.healthy.successes.required': 'Please enter the successes number', + 'component.upstream.fields.checks.passive.healthy.successes.tooltip': + 'Number of successes to consider a target healthy', + 'component.upstream.fields.checks.passive.healthy.successes.required': + 'Please enter the successes number', 'component.upstream.fields.checks.passive.unhealthy.timeouts': 'Timeouts', - 'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip': 'Number of timeouts in proxied traffic to consider a target unhealthy, as observed by passive health checks.', + 'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip': + 'Number of timeouts in proxied traffic to consider a target unhealthy, as observed by passive health checks.', 'component.upstream.other.none': 'None', - 'component.upstream.other.pass_host-with-multiple-nodes.title': 'Please check the target node configuration', - 'component.upstream.other.pass_host-with-multiple-nodes': 'When using a host name or IP in the target node list, make sure there is only one target node', - 'component.upstream.other.health-check.passive-only': 'When passive health check is enabled, active health check needs to be enabled at the same time.', + 'component.upstream.other.pass_host-with-multiple-nodes.title': + 'Please check the target node configuration', + 'component.upstream.other.pass_host-with-multiple-nodes': + 'When using a host name or IP in the target node list, make sure there is only one target node', + 'component.upstream.other.health-check.passive-only': + 'When passive health check is enabled, active health check needs to be enabled at the same time.', 'component.upstream.other.health-check.invalid': 'Please check the health check configuration', -} +}; From 86e5a45c247c618ce912f83b042c9892122d004a Mon Sep 17 00:00:00 2001 From: Baoyuan Date: Wed, 4 Aug 2021 21:08:19 +0800 Subject: [PATCH 2/3] feat: modify test part --- ...te_and_edit_upstream_with_custom_chash_key.spec.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js b/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js index dda114593f..3136b11c8e 100644 --- a/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js +++ b/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js @@ -26,8 +26,8 @@ context('Create and Delete Upstream With Custom CHash Key', () => { nodes_0_host: '#nodes_0_host', nodes_0_port: '#nodes_0_port', nodes_0_weight: '#nodes_0_weight', - upstreamType: ".ant-select-item-option-content", - hashPosition: ".ant-select-item-option-content", + upstreamType: '.ant-select-item-option-content', + hashPosition: '.ant-select-item-option-content', chash_key: '#key', notification: '.ant-notification-notice-message', nameSelector: '[title=Name]', @@ -62,7 +62,14 @@ context('Create and Delete Upstream With Custom CHash Key', () => { cy.get(selector.upstreamType).within(() => { cy.contains('CHash').click(); }); + cy.get('[title="Key"]').should('have.class', 'ant-form-item-required'); + // Key is not required when Hasn on select consumer cy.get(selector.varSelect).click(); + cy.get(selector.hashPosition).within(() => { + cy.contains('consumer').click(); + }); + cy.get('[title="Key"]').should('not.have.class', 'ant-form-item-required'); + cy.get('#hash_on').click({ force: true }); cy.get(selector.hashPosition).within(() => { cy.contains('cookie').click(); }); From 512a0a958d35341677c4c6ff6f5d9296cb48fcec Mon Sep 17 00:00:00 2001 From: Baoyuan Date: Sat, 7 Aug 2021 11:20:53 +0800 Subject: [PATCH 3/3] fix: hidden key when select consumer --- ...dit_upstream_with_custom_chash_key.spec.js | 6 +-- .../components/Upstream/components/Type.tsx | 42 ++++++++++--------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js b/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js index 3136b11c8e..152677a261 100644 --- a/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js +++ b/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js @@ -62,13 +62,13 @@ context('Create and Delete Upstream With Custom CHash Key', () => { cy.get(selector.upstreamType).within(() => { cy.contains('CHash').click(); }); - cy.get('[title="Key"]').should('have.class', 'ant-form-item-required'); - // Key is not required when Hasn on select consumer + cy.get('[title="Key"]').should('exist'); + // Key is hidden when Hasn on select consumer cy.get(selector.varSelect).click(); cy.get(selector.hashPosition).within(() => { cy.contains('consumer').click(); }); - cy.get('[title="Key"]').should('not.have.class', 'ant-form-item-required'); + cy.get('[title="Key"]').should('not.exist'); cy.get('#hash_on').click({ force: true }); cy.get(selector.hashPosition).within(() => { cy.contains('cookie').click(); diff --git a/web/src/components/Upstream/components/Type.tsx b/web/src/components/Upstream/components/Type.tsx index ea6927e5c6..26c1109ec1 100644 --- a/web/src/components/Upstream/components/Type.tsx +++ b/web/src/components/Upstream/components/Type.tsx @@ -50,26 +50,28 @@ const CHash: React.FC = ({ form, readonly }) => { ))} - - - {Object.entries(CommonHashKeyEnum) - .filter( - ([label, value]) => - label.startsWith(keySearchWord) || value.startsWith(keySearchWord), - ) - .map(([label, value]) => ( - - {label} - - ))} - - + {form.getFieldValue('hash_on') !== 'consumer' && ( + + + {Object.entries(CommonHashKeyEnum) + .filter( + ([label, value]) => + label.startsWith(keySearchWord) || value.startsWith(keySearchWord), + ) + .map(([label, value]) => ( + + {label} + + ))} + + + )} ); };