From ee94ae575b7bb28d3350b049454b0026db85c7d1 Mon Sep 17 00:00:00 2001
From: Imvedansh <113465074+Imvedansh@users.noreply.github.com>
Date: Fri, 28 Mar 2025 23:29:43 +0530
Subject: [PATCH] Enhance VPC Network Tier form to auto-populate Gateway, and
Netmask (#10617)
---
ui/public/locales/en.json | 4 +--
ui/src/utils/network.js | 51 ++++++++++++++++++++++++++++
ui/src/views/network/VpcTiersTab.vue | 18 +++++++---
3 files changed, 67 insertions(+), 6 deletions(-)
create mode 100644 ui/src/utils/network.js
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index c1c88da62d30..ea2ab491fb5b 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 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 255.255.255.0",
+"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",
diff --git a/ui/src/utils/network.js b/ui/src/utils/network.js
new file mode 100644
index 000000000000..c3054f48ff77
--- /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 Placeholders
+
+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 73410ca1d053..ec394d83b7a6 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -223,18 +223,18 @@
</a-form-item>
<a-form-item ref="gateway" name="gateway" :colon="false">
<template #label>
- <tooltip-label :title="$t('label.gateway')" :tooltip="$t('label.create.tier.gateway.description')"/>
+ <tooltip-label :title="$t('label.gateway')" :tooltip="gatewayPlaceholder"/>
</template>
<a-input
- :placeholder="$t('label.create.tier.gateway.description')"
+ :placeholder="gatewayPlaceholder"
v-model:value="form.gateway"></a-input>
</a-form-item>
<a-form-item ref="netmask" name="netmask" :colon="false">
<template #label>
- <tooltip-label :title="$t('label.netmask')" :tooltip="$t('label.create.tier.netmask.description')"/>
+ <tooltip-label :title="$t('label.netmask')" :tooltip="netmaskPlaceholder"/>
</template>
<a-input
- :placeholder="$t('label.create.tier.netmask.description')"
+ :placeholder="netmaskPlaceholder"
v-model:value="form.netmask"></a-input>
</a-form-item>
<a-form-item ref="externalId" name="externalId" :colon="false">
@@ -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',
@@ -381,6 +382,8 @@ export default {
selectedNetworkOffering: {},
privateMtuMax: 1500,
errorPrivateMtu: '',
+ gatewayPlaceholder: '',
+ netmaskPlaceholder: '',
algorithms: {
Source: 'source',
'Round-robin': 'roundrobin',
@@ -617,6 +620,13 @@ export default {
this.initForm()
this.fetchNetworkAclList()
this.fetchNetworkOfferings()
+ const cidr = this.resource.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 })
+ }
+
this.showCreateNetworkModal = true
this.rules = {
name: [{ required: true, message: this.$t('label.required') }],