Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
weizhouapache merged 7 commits into from
Mar 28, 2025
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6aa691c
vpc fill gateway and netmask
Imvedansh Mar 25, 2025
1d7fc2a
Suggestion for CIDR in placeholder instead of input
Imvedansh Mar 25, 2025
217789e
netmask placeholder fix
Imvedansh Mar 26, 2025
873aaa3
Abstraction of logic and few minor fixes
Imvedansh Mar 28, 2025
d4b11ef
Minor fix in network.js
Imvedansh Mar 28, 2025
6cd108e
Removed repetitive code in VPCTierTab
Imvedansh Mar 28, 2025
60acacf
Update ui/public/locales/en.json
Imvedansh Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/public/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. 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",
Expand Down
50 changes: 46 additions & 4 deletions ui/src/views/network/VpcTiersTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -381,6 +381,8 @@ export default {
selectedNetworkOffering: {},
privateMtuMax: 1500,
errorPrivateMtu: '',
gatewayPlaceholder: '',
netmaskPlaceholder: '',
algorithms: {
Source: 'source',
'Round-robin': 'roundrobin',
Expand Down Expand Up @@ -617,6 +619,46 @@ export default {
this.initForm()
this.fetchNetworkAclList()
this.fetchNetworkOfferings()
const cidr = this.resource.cidr
if (cidr && cidr.includes('/')) {
const [address, maskBits] = cidr.split('/')
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'
}

const cidrValue = `${address}/${maskBits}`
Copy link
Member

@bernardodemarco bernardodemarco Mar 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary to define this cidrValue here? It'll contain the same value as the cidr variable has, right?

Copy link
Contributor Author

@Imvedansh Imvedansh Mar 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously, I was automating the input of the Gateway and Netmask fields. In that case, the Gateway needed to be the network address, and the Subnet Mask had to be derived from the prefix.
Thanks for pointing it out , will clear it out

const netmask = subnetMasks[prefix] || '255.255.255.0'
Copy link
Member

@bernardodemarco bernardodemarco Mar 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about abstracting this process of retrieving a CIDR's netmask into an utility function? Maybe, we could place it inside the ui/src/utils folder

Copy link
Contributor Author

@Imvedansh Imvedansh Mar 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had considered abstracting this logic, as the use of subnetMask list felt out of place in that context.
Sure , will do now


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