From 6af23a5b8e068c311de1d93ad5221e1be3401364 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Thu, 18 Jan 2024 16:06:16 -0500 Subject: [PATCH 1/7] update copy --- .../LoadBalancerDetail/Configurations/constants.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx index da980e603ef..59ede14777e 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx @@ -31,13 +31,13 @@ export const protocolOptions = [ { label: 'HTTPS', value: 'https' }, { label: 'HTTP', value: 'http' }, { label: 'TCP', value: 'tcp' }, -]; +] as const; export const CONFIGURATION_COPY = { Certificates: 'TLS termination certificates create an encrypted link between your clients and Global Load Balancer, and terminate incoming traffic on the load balancer. Once the load balancing policy is applied, traffic is forwarded to your service targets over encrypted TLS connections. Responses from your service targets to your clients are also encrypted.', Port: - 'The inbound port that the load balancer listens on. Enter 80 as the port number for HTTP, 443 for HTTPs, and 0-1023 for TCP.', + 'Set the inbound port value that the load balancer listens on to whichever port the client software will connect to. The port can be 1-65535.', Protocol: ( Set to either TCP, HTTP, or HTTPS. See{' '} From 13529c280e29d90646157f7bd4df154ff9c735f0 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Thu, 18 Jan 2024 16:44:08 -0500 Subject: [PATCH 2/7] update error logic --- .../LoadBalancerDetail/Configurations/ConfigurationForm.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx index 843b6e4e3f4..ed78854431c 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx @@ -173,9 +173,10 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { /> )} @@ -195,10 +196,11 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { options={protocolOptions} /> Date: Thu, 18 Jan 2024 16:53:58 -0500 Subject: [PATCH 3/7] remove unrelated change --- .../LoadBalancerDetail/Configurations/constants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx index 59ede14777e..7a683479f1a 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx @@ -31,7 +31,7 @@ export const protocolOptions = [ { label: 'HTTPS', value: 'https' }, { label: 'HTTP', value: 'http' }, { label: 'TCP', value: 'tcp' }, -] as const; +]; export const CONFIGURATION_COPY = { Certificates: From 768dacd02b5b763c482160c9d435243b28c2e40a Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Thu, 18 Jan 2024 17:02:46 -0500 Subject: [PATCH 4/7] Added changeset: Update AGLB Configuration Port Copy --- .../.changeset/pr-10079-upcoming-features-1705615366001.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md diff --git a/packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md b/packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md new file mode 100644 index 00000000000..bb9b4ff6328 --- /dev/null +++ b/packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Update AGLB Configuration Port Copy ([#10079](https://github.com/linode/manager/pull/10079)) From 49c8fd9094474fd2d64ebf05b90bdda622da8f40 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Thu, 18 Jan 2024 17:47:36 -0500 Subject: [PATCH 5/7] add logic to change port based on protocol --- .../Configurations/ConfigurationForm.tsx | 33 +++++++++++++++++-- .../Configurations/constants.tsx | 2 +- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx index ed78854431c..8150f07662a 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx @@ -65,6 +65,8 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { const [isAddRouteDrawerOpen, setIsAddRouteDrawerOpen] = useState(false); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); + const [hasChangedPort, setHasChangedPort] = useState(false); + const [routesTableQuery, setRoutesTableQuery] = useState(''); const loadbalancerId = Number(_loadbalancerId); @@ -148,6 +150,7 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { const handleReset = () => { formik.resetForm(); + setHasChangedPort(false); reset(); }; @@ -183,6 +186,30 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { { + if (hasChangedPort) { + return formik.setFieldValue('protocol', value); + } + + let newPort = formik.values.port; + + if (value === 'http') { + newPort = 80; + } + + if (value === 'https') { + newPort = 443; + } + + formik.setFormikState((prev) => ({ + ...prev, + values: { + ...prev.values, + port: newPort, + protocol: value, + }, + })); + }} textFieldProps={{ labelTooltipText: CONFIGURATION_COPY.Protocol, }} @@ -192,16 +219,18 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { disableClearable errorText={formik.errors.protocol} label="Protocol" - onChange={(e, { value }) => formik.setFieldValue('protocol', value)} options={protocolOptions} /> { + formik.handleChange(e); + setHasChangedPort(true); + }} errorText={formik.touched.port ? formik.errors.port : undefined} label="Port" labelTooltipText={CONFIGURATION_COPY.Port} name="port" onBlur={formik.handleBlur} - onChange={formik.handleChange} type="number" value={formik.values.port} /> diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx index 7a683479f1a..59ede14777e 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx @@ -31,7 +31,7 @@ export const protocolOptions = [ { label: 'HTTPS', value: 'https' }, { label: 'HTTP', value: 'http' }, { label: 'TCP', value: 'tcp' }, -]; +] as const; export const CONFIGURATION_COPY = { Certificates: From a8ae35877c5e8a09fb7840c00908e8d9b54bc3d7 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Thu, 18 Jan 2024 17:48:09 -0500 Subject: [PATCH 6/7] add logic to change port based on protocol --- .../Configurations/ConfigurationForm.tsx | 51 +++++++++++-------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx index 8150f07662a..be21628f59f 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx @@ -38,6 +38,7 @@ import type { CertificateConfig, Configuration, ConfigurationPayload, + Protocol, } from '@linode/api-v4'; interface EditProps { @@ -154,6 +155,33 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { reset(); }; + const handleProtocolChange = (protocol: Protocol) => { + // If the user has changed the port manually, just update the protocol and NOT the port. + if (hasChangedPort) { + return formik.setFieldValue('protocol', protocol); + } + + let newPort = formik.values.port; + + if (protocol === 'http') { + newPort = 80; + } + + if (protocol === 'https') { + newPort = 443; + } + + // Update the protocol and port at the same time if the port is unchanged. + formik.setFormikState((prev) => ({ + ...prev, + values: { + ...prev.values, + port: newPort, + protocol, + }, + })); + }; + const generalErrors = error?.reduce((acc, { field, reason }) => { if ( !field || @@ -187,28 +215,7 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { { - if (hasChangedPort) { - return formik.setFieldValue('protocol', value); - } - - let newPort = formik.values.port; - - if (value === 'http') { - newPort = 80; - } - - if (value === 'https') { - newPort = 443; - } - - formik.setFormikState((prev) => ({ - ...prev, - values: { - ...prev.values, - port: newPort, - protocol: value, - }, - })); + handleProtocolChange(value); }} textFieldProps={{ labelTooltipText: CONFIGURATION_COPY.Protocol, From bb9e10f95ed491193a296c9fbaab809f95c7e3ce Mon Sep 17 00:00:00 2001 From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Date: Fri, 19 Jan 2024 14:35:36 -0500 Subject: [PATCH 7/7] Update packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx --- .../LoadBalancerDetail/Configurations/constants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx index 59ede14777e..6b32ca54c5c 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx @@ -37,7 +37,7 @@ export const CONFIGURATION_COPY = { Certificates: 'TLS termination certificates create an encrypted link between your clients and Global Load Balancer, and terminate incoming traffic on the load balancer. Once the load balancing policy is applied, traffic is forwarded to your service targets over encrypted TLS connections. Responses from your service targets to your clients are also encrypted.', Port: - 'Set the inbound port value that the load balancer listens on to whichever port the client software will connect to. The port can be 1-65535.', + 'Set the inbound port value that the load balancer listens on to whichever port the client will connect to. The port can be 1-65535.', Protocol: ( Set to either TCP, HTTP, or HTTPS. See{' '}