Enhance VPC Network Tier form to auto-populate Gateway, and Netmask (#10617)

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",

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'
+}

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') }],