Abstraction of logic and few minor fixes

Author: Imvedansh

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

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

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 })
       }