From 6aa691c3da3d2ee18d90f116f1621f0eadf8ea37 Mon Sep 17 00:00:00 2001 From: Imvedansh Date: Tue, 25 Mar 2025 22:14:08 +0530 Subject: [PATCH 1/7] vpc fill gateway and netmask --- ui/src/views/network/VpcTiersTab.vue | 37 ++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue index ad06e3bdf0bd..9d4fd51111aa 100644 --- a/ui/src/views/network/VpcTiersTab.vue +++ b/ui/src/views/network/VpcTiersTab.vue @@ -617,6 +617,43 @@ export default { this.initForm() this.fetchNetworkAclList() this.fetchNetworkOfferings() + const cidr = this.resource.cidr + if (cidr && cidr.includes('/')) { + const [address, maskBits] = cidr.split('/') + this.form.gateway = address + + const prefix = Number(maskBits) + + const subnetMasks = { + 8: '255.0.0.0', + 9: '255.128.0.0', + 10: '255.192.0.0', + 11: '255.224.0.0', + 12: '255.240.0.0', + 13: '255.248.0.0', + 14: '255.252.0.0', + 15: '255.254.0.0', + 16: '255.255.0.0', + 17: '255.255.128.0', + 18: '255.255.192.0', + 19: '255.255.224.0', + 20: '255.255.240.0', + 21: '255.255.248.0', + 22: '255.255.252.0', + 23: '255.255.254.0', + 24: '255.255.255.0', + 25: '255.255.255.128', + 26: '255.255.255.192', + 27: '255.255.255.224', + 28: '255.255.255.240', + 29: '255.255.255.248', + 30: '255.255.255.252', + 31: '255.255.255.254', + 32: '255.255.255.255' + } + + this.form.netmask = subnetMasks[prefix] || '255.255.255.0' + } this.showCreateNetworkModal = true this.rules = { name: [{ required: true, message: this.$t('label.required') }], From 1d7fc2a29069bd05e2d7422516204987b25cf7cb Mon Sep 17 00:00:00 2001 From: Imvedansh Date: Wed, 26 Mar 2025 03:04:21 +0530 Subject: [PATCH 2/7] Suggestion for CIDR in placeholder instead of input --- ui/public/locales/en.json | 4 ++-- ui/src/views/network/VpcTiersTab.vue | 19 ++++++++++++------- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json index c1c88da62d30..ede195440acc 100644 --- a/ui/public/locales/en.json +++ b/ui/public/locales/en.json @@ -576,9 +576,9 @@ "label.create.template": "Create Template", "label.create.tier.aclid.description": "The ACL associated with the Network Tier.", "label.create.tier.externalid.description": "ID of the Network in an external system.", -"label.create.tier.gateway.description": "The Network Tier's gateway in the super CIDR range, not overlapping with the CIDR of other Network Tiers in this VPC.", +"label.create.tier.gateway.description": "Gateway in range of VPC CIDR ({value})", "label.create.tier.name.description": "A unique name for the Network Tier.", -"label.create.tier.netmask.description": "The Network Tier's netmask. For example 255.255.255.0", +"label.create.tier.netmask.description": "The Network Tier's netmask. Your current is {value}", "label.create.tier.networkofferingid.description": "The Network offering for the Network Tier.", "label.create.tungsten.routing.policy": "Create Tungsten-Fabric routing policy", "label.create.user": "Create User", diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue index 9d4fd51111aa..85c3532fd795 100644 --- a/ui/src/views/network/VpcTiersTab.vue +++ b/ui/src/views/network/VpcTiersTab.vue @@ -223,18 +223,18 @@ @@ -381,6 +381,8 @@ export default { selectedNetworkOffering: {}, privateMtuMax: 1500, errorPrivateMtu: '', + gatewayPlaceholder: '', + netmaskPlaceholder: '', algorithms: { Source: 'source', 'Round-robin': 'roundrobin', @@ -620,8 +622,6 @@ export default { const cidr = this.resource.cidr if (cidr && cidr.includes('/')) { const [address, maskBits] = cidr.split('/') - this.form.gateway = address - const prefix = Number(maskBits) const subnetMasks = { @@ -652,8 +652,13 @@ export default { 32: '255.255.255.255' } - this.form.netmask = subnetMasks[prefix] || '255.255.255.0' + const cidrValue = `${address}/${maskBits}` + const netmask = subnetMasks[prefix] || '255.255.255.0' + + this.gatewayPlaceholder = this.$t('label.create.tier.gateway.description', { value: cidrValue }) + this.netmaskPlaceholder = this.$t('label.create.tier.netmask.description', { value: netmask }) } + this.showCreateNetworkModal = true this.rules = { name: [{ required: true, message: this.$t('label.required') }], From 217789ee8d39846dfbe3fffbd92fcb997a989001 Mon Sep 17 00:00:00 2001 From: Imvedansh Date: Thu, 27 Mar 2025 01:19:59 +0530 Subject: [PATCH 3/7] netmask placeholder fix --- ui/public/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json index ede195440acc..da614168e82d 100644 --- a/ui/public/locales/en.json +++ b/ui/public/locales/en.json @@ -578,7 +578,7 @@ "label.create.tier.externalid.description": "ID of the Network in an external system.", "label.create.tier.gateway.description": "Gateway in range of VPC CIDR ({value})", "label.create.tier.name.description": "A unique name for the Network Tier.", -"label.create.tier.netmask.description": "The Network Tier's netmask. Your current is {value}", +"label.create.tier.netmask.description": "The Network Tier's netmask. For example {value}", "label.create.tier.networkofferingid.description": "The Network offering for the Network Tier.", "label.create.tungsten.routing.policy": "Create Tungsten-Fabric routing policy", "label.create.user": "Create User", From 873aaa3c841b23229f8ae9ce9ed5eaa42f4cf225 Mon Sep 17 00:00:00 2001 From: Imvedansh Date: Fri, 28 Mar 2025 14:22:21 +0530 Subject: [PATCH 4/7] Abstraction of logic and few minor fixes --- ui/public/locales/en.json | 2 +- ui/src/utils/network.js | 51 ++++++++++++++++++++++++++++ ui/src/views/network/VpcTiersTab.vue | 39 +++------------------ 3 files changed, 56 insertions(+), 36 deletions(-) create mode 100644 ui/src/utils/network.js diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json index da614168e82d..af46ae933e4d 100644 --- a/ui/public/locales/en.json +++ b/ui/public/locales/en.json @@ -576,7 +576,7 @@ "label.create.template": "Create Template", "label.create.tier.aclid.description": "The ACL associated with the Network Tier.", "label.create.tier.externalid.description": "ID of the Network in an external system.", -"label.create.tier.gateway.description": "Gateway in range of VPC CIDR ({value})", +"label.create.tier.gateway.description": "Gateway IP must be within VPC CIDR ({value})", "label.create.tier.name.description": "A unique name for the Network Tier.", "label.create.tier.netmask.description": "The Network Tier's netmask. For example {value}", "label.create.tier.networkofferingid.description": "The Network offering for the Network Tier.", diff --git a/ui/src/utils/network.js b/ui/src/utils/network.js new file mode 100644 index 000000000000..166f77ac428a --- /dev/null +++ b/ui/src/utils/network.js @@ -0,0 +1,51 @@ +// 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. + +// Parsing CIDR into Gateway,Netmask Placehoolders + +export function getNetmaskFromCidr (cidr) { + if (!cidr?.includes('/')) return undefined + const [, maskBits] = cidr.split('/') + const subnetMasks = { + 8: '255.0.0.0', + 9: '255.128.0.0', + 10: '255.192.0.0', + 11: '255.224.0.0', + 12: '255.240.0.0', + 13: '255.248.0.0', + 14: '255.252.0.0', + 15: '255.254.0.0', + 16: '255.255.0.0', + 17: '255.255.128.0', + 18: '255.255.192.0', + 19: '255.255.224.0', + 20: '255.255.240.0', + 21: '255.255.248.0', + 22: '255.255.252.0', + 23: '255.255.254.0', + 24: '255.255.255.0', + 25: '255.255.255.128', + 26: '255.255.255.192', + 27: '255.255.255.224', + 28: '255.255.255.240', + 29: '255.255.255.248', + 30: '255.255.255.252', + 31: '255.255.255.254', + 32: '255.255.255.255' + } + return subnetMasks[+maskBits] || '255.255.255.0' +} diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue index 85c3532fd795..cd4f719164a1 100644 --- a/ui/src/views/network/VpcTiersTab.vue +++ b/ui/src/views/network/VpcTiersTab.vue @@ -344,6 +344,7 @@ import { api } from '@/api' import { mixinForm } from '@/utils/mixin' import Status from '@/components/widgets/Status' import TooltipLabel from '@/components/widgets/TooltipLabel' +import { getNetmaskFromCidr } from '@/utils/network' export default { name: 'VpcTiersTab', @@ -620,42 +621,10 @@ export default { this.fetchNetworkAclList() this.fetchNetworkOfferings() const cidr = this.resource.cidr - if (cidr && cidr.includes('/')) { - const [address, maskBits] = cidr.split('/') - const prefix = Number(maskBits) + if (cidr?.includes('/')) { + const netmask = getNetmaskFromCidr(cidr) - const subnetMasks = { - 8: '255.0.0.0', - 9: '255.128.0.0', - 10: '255.192.0.0', - 11: '255.224.0.0', - 12: '255.240.0.0', - 13: '255.248.0.0', - 14: '255.252.0.0', - 15: '255.254.0.0', - 16: '255.255.0.0', - 17: '255.255.128.0', - 18: '255.255.192.0', - 19: '255.255.224.0', - 20: '255.255.240.0', - 21: '255.255.248.0', - 22: '255.255.252.0', - 23: '255.255.254.0', - 24: '255.255.255.0', - 25: '255.255.255.128', - 26: '255.255.255.192', - 27: '255.255.255.224', - 28: '255.255.255.240', - 29: '255.255.255.248', - 30: '255.255.255.252', - 31: '255.255.255.254', - 32: '255.255.255.255' - } - - const cidrValue = `${address}/${maskBits}` - const netmask = subnetMasks[prefix] || '255.255.255.0' - - this.gatewayPlaceholder = this.$t('label.create.tier.gateway.description', { value: cidrValue }) + this.gatewayPlaceholder = this.$t('label.create.tier.gateway.description', { value: cidr }) this.netmaskPlaceholder = this.$t('label.create.tier.netmask.description', { value: netmask }) } From d4b11efcffa5877fc49bdbd0a75fac2c2392e80e Mon Sep 17 00:00:00 2001 From: Imvedansh Date: Fri, 28 Mar 2025 14:27:49 +0530 Subject: [PATCH 5/7] Minor fix in network.js --- ui/src/utils/network.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/utils/network.js b/ui/src/utils/network.js index 166f77ac428a..c3054f48ff77 100644 --- a/ui/src/utils/network.js +++ b/ui/src/utils/network.js @@ -15,7 +15,7 @@ // specific language governing permissions and limitations // under the License. -// Parsing CIDR into Gateway,Netmask Placehoolders +// Parsing CIDR into Gateway,Netmask Placeholders export function getNetmaskFromCidr (cidr) { if (!cidr?.includes('/')) return undefined From 6cd108e16016b78b6bec6beb838f02b67f85a13a Mon Sep 17 00:00:00 2001 From: Imvedansh Date: Fri, 28 Mar 2025 18:31:20 +0530 Subject: [PATCH 6/7] Removed repetitive code in VPCTierTab --- ui/src/views/network/VpcTiersTab.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue index cd4f719164a1..85211d41a800 100644 --- a/ui/src/views/network/VpcTiersTab.vue +++ b/ui/src/views/network/VpcTiersTab.vue @@ -621,9 +621,8 @@ export default { this.fetchNetworkAclList() this.fetchNetworkOfferings() const cidr = this.resource.cidr - if (cidr?.includes('/')) { - const netmask = getNetmaskFromCidr(cidr) - + const netmask = getNetmaskFromCidr(cidr) + if (netmask) { this.gatewayPlaceholder = this.$t('label.create.tier.gateway.description', { value: cidr }) this.netmaskPlaceholder = this.$t('label.create.tier.netmask.description', { value: netmask }) } From 60acacf482143bdc09bec4b56e800e6a34ef6733 Mon Sep 17 00:00:00 2001 From: Imvedansh <113465074+Imvedansh@users.noreply.github.com> Date: Fri, 28 Mar 2025 07:52:55 -0700 Subject: [PATCH 7/7] Update ui/public/locales/en.json MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Bernardo De Marco Gonçalves --- ui/public/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json index af46ae933e4d..ea2ab491fb5b 100644 --- a/ui/public/locales/en.json +++ b/ui/public/locales/en.json @@ -578,7 +578,7 @@ "label.create.tier.externalid.description": "ID of the Network in an external system.", "label.create.tier.gateway.description": "Gateway IP must be within VPC CIDR ({value})", "label.create.tier.name.description": "A unique name for the Network Tier.", -"label.create.tier.netmask.description": "The Network Tier's netmask. For example {value}", +"label.create.tier.netmask.description": "Network Tier's netmask must be more restrictive than {value}", "label.create.tier.networkofferingid.description": "The Network offering for the Network Tier.", "label.create.tungsten.routing.policy": "Create Tungsten-Fabric routing policy", "label.create.user": "Create User",