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

Imvedansh · 2025-03-25T17:49:14Z

Description

This PR fixes a UX gap in the VPC Network Tier (Add Network) form, where the parent VPC CIDR was not visible or accessible during subnet configuration. Previously, users had to manually close the form, navigate back to the VPC details, copy the CIDR, and then reopen the form to paste the correct subnet range.

With this PR:

The Add Network form now auto-fills:
Gateway: Based on CIDR
Netmask: Based on CIDR
This eliminates context switching, reduces input errors, and improves workflow efficiency.

Expected behavior (after fix):

When creating a new network tier inside a VPC, the form automatically suggests a valid (CIDR) gateway, and netmask within the VPC's CIDR block.
This Fixes : #10615

Types of changes

Breaking change (fix or feature that would cause existing functionality to change)
New feature (non-breaking change which adds functionality)
Bug fix (non-breaking change which fixes an issue)
Enhancement (improves an existing feature and functionality)
Cleanup (Code refactoring and cleanup, that may add test cases)
build/CI
test (unit or integration test code)

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

Major
Minor

Bug Severity

Screenshots (if appropriate):

How Has This Been Tested?

Verified by creating a new VPC with a /16 CIDR block.
Used the Add Network form under the created VPC.
Confirmed that the form auto-fills a /24 subnet, valid gateway, and netmask.
Ensured the inputs reflect valid and usable values within the VPC CIDR.
Checked that manual override is still possible.

How did you try to break this feature and the system with this change?

-Tried editing the auto-filled values to invalid CIDRs → proper validation triggers.

-Created multiple network tiers to ensure no collisions and clean suggestions.

Imvedansh · 2025-03-25T17:52:21Z

@blueorangutan ui

blueorangutan · 2025-03-25T17:53:03Z

@Imvedansh a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-03-25T18:09:31Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10617 (QA-JID-587)

weizhouapache · 2025-03-25T18:22:40Z

@Imvedansh
are the VPC startip/netmask displayed in the form ? it might mislead users.

it is good idea to display VPC cidr in the form.
I think you can add it in the placeholder of a-input, e.g

(for both gateway and netmask)

Imvedansh · 2025-03-25T20:37:04Z

@weizhouapache Yes,
I agree, it could be misleading for new users.
it looks somewhat like this after changes,
What do u think?about this

placeholder will suggest according as per super CIDR

Imvedansh · 2025-03-25T21:36:33Z

@blueorangutan ui

blueorangutan · 2025-03-25T21:37:03Z

@Imvedansh a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-03-25T21:53:36Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10617 (QA-JID-588)

codecov · 2025-03-26T10:59:49Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 15.89%. Comparing base (95c2481) to head (60acacf).
Report is 12 commits behind head on 4.19.

Additional details and impacted files

@@             Coverage Diff              @@
##               4.19   #10617      +/-   ##
============================================
+ Coverage     15.16%   15.89%   +0.73%     
- Complexity    11326    11331       +5     
============================================
  Files          5414     5046     -368     
  Lines        474804   445155   -29649     
  Branches      57909    52704    -5205     
============================================
- Hits          72002    70756    -1246     
+ Misses       394749   366490   -28259     
+ Partials       8053     7909     -144

Flag	Coverage Δ
uitests	`?`
unittests	`15.89% <ø> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Imvedansh · 2025-03-26T19:09:08Z

@weizhouapache is this good to go?

weizhouapache · 2025-03-26T19:34:21Z

@weizhouapache is this good to go?

I suggest to change "Your current" which is unclear.

others look good

Imvedansh · 2025-03-26T19:39:04Z

@weizhouapache ,Replacing it with "For example", It will suggest netmask as per CIDR notation of VPC

DaanHoogland

clgtm

bernardodemarco

@Imvedansh, nice work, overall looks good. Here are some minor suggestions

ui/public/locales/en.json

ui/src/views/network/VpcTiersTab.vue

bernardodemarco · 2025-03-27T22:57:53Z

ui/src/views/network/VpcTiersTab.vue

+        }
+
+        const cidrValue = `${address}/${maskBits}`
+        const netmask = subnetMasks[prefix] || '255.255.255.0'


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

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

bernardodemarco · 2025-03-27T22:59:06Z

ui/src/views/network/VpcTiersTab.vue

+          32: '255.255.255.255'
+        }
+
+        const cidrValue = `${address}/${maskBits}`


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

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

bernardodemarco · 2025-03-28T11:28:11Z

@blueorangutan ui

blueorangutan · 2025-03-28T11:29:04Z

@bernardodemarco a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-03-28T11:46:05Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10617 (QA-JID-589)

Imvedansh · 2025-03-28T13:02:10Z

@blueorangutan ui

blueorangutan · 2025-03-28T13:03:04Z

@Imvedansh a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

ui/public/locales/en.json

bernardodemarco

lgtm. tested in the QA environment

blueorangutan · 2025-03-28T13:19:38Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10617 (QA-JID-590)

Co-authored-by: Bernardo De Marco Gonçalves <[email protected]>

Pearl1594

LGTM. tested on QA env. Thanks @Imvedansh.

weizhouapache · 2025-03-28T15:48:01Z

@blueorangutan ui

blueorangutan · 2025-03-28T15:49:04Z

@weizhouapache a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-03-28T16:06:03Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/10617 (QA-JID-591)

weizhouapache

code lgtm

* 4.20: xenserver: do not destroy halted hypervisor vm (#9175) define the limit of projects through the UI (#10652) fix projects metrics on dashboard (#10651) systemvm: Bump systemvm template version to debian 12.10 (#10628) Enhance VPC Network Tier form to auto-populate Gateway, and Netmask (#10617)

…pache#10617)

vpc fill gateway and netmask

6aa691c

boring-cyborg bot added the component:UI label Mar 25, 2025

Imvedansh mentioned this pull request Mar 25, 2025

VPC CIDR Not Shown While Creating Network Tier #10615

Closed

Suggestion for CIDR in placeholder instead of input

1d7fc2a

DaanHoogland linked an issue Mar 26, 2025 that may be closed by this pull request

VPC CIDR Not Shown While Creating Network Tier #10615

Closed

DaanHoogland added this to the 4.19.3 milestone Mar 26, 2025

netmask placeholder fix

217789e

DaanHoogland approved these changes Mar 27, 2025

View reviewed changes

sureshanaparti added the status:needs-testing label Mar 27, 2025

Pearl1594 added this to ACS 4.20.1 Mar 27, 2025

Pearl1594 moved this to In Progress in ACS 4.20.1 Mar 27, 2025

bernardodemarco reviewed Mar 27, 2025

View reviewed changes

Imvedansh added 2 commits March 28, 2025 14:22

Abstraction of logic and few minor fixes

873aaa3

Minor fix in network.js

d4b11ef

Imvedansh requested a review from bernardodemarco March 28, 2025 08:58

Removed repetitive code in VPCTierTab

6cd108e

bernardodemarco reviewed Mar 28, 2025

View reviewed changes

ui/public/locales/en.json Outdated Show resolved Hide resolved

bernardodemarco approved these changes Mar 28, 2025

View reviewed changes

Update ui/public/locales/en.json

60acacf

Co-authored-by: Bernardo De Marco Gonçalves <[email protected]>

bernardodemarco added status:ready-for-merge and removed status:needs-testing labels Mar 28, 2025

Pearl1594 approved these changes Mar 28, 2025

View reviewed changes

weizhouapache approved these changes Mar 28, 2025

View reviewed changes

weizhouapache merged commit ee94ae5 into apache:4.19 Mar 28, 2025
26 checks passed

github-project-automation bot moved this from In Progress to Done in ACS 4.20.1 Mar 28, 2025

dhslove pushed a commit to ablecloud-team/ablestack-cloud that referenced this pull request Jun 19, 2025

Enhance VPC Network Tier form to auto-populate Gateway, and Netmask (a…

592bf9e

…pache#10617)

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

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

Uh oh!

Conversation

Imvedansh commented Mar 25, 2025

Description

Types of changes

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

Bug Severity

Screenshots (if appropriate):

How Has This Been Tested?

How did you try to break this feature and the system with this change?

Uh oh!

Imvedansh commented Mar 25, 2025

Uh oh!

blueorangutan commented Mar 25, 2025

Uh oh!

blueorangutan commented Mar 25, 2025

Uh oh!

weizhouapache commented Mar 25, 2025

Uh oh!

Imvedansh commented Mar 25, 2025

placeholder will suggest according as per super CIDR

Uh oh!

Imvedansh commented Mar 25, 2025

Uh oh!

blueorangutan commented Mar 25, 2025

Uh oh!

blueorangutan commented Mar 25, 2025

Uh oh!

codecov bot commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Imvedansh commented Mar 26, 2025

Uh oh!

weizhouapache commented Mar 26, 2025

Uh oh!

Imvedansh commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DaanHoogland left a comment

Choose a reason for hiding this comment

Uh oh!

bernardodemarco left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bernardodemarco Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

Imvedansh Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

bernardodemarco Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

Imvedansh Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

bernardodemarco commented Mar 28, 2025

Uh oh!

blueorangutan commented Mar 28, 2025

Uh oh!

blueorangutan commented Mar 28, 2025

Uh oh!

Imvedansh commented Mar 28, 2025

Uh oh!

blueorangutan commented Mar 28, 2025

Uh oh!

Uh oh!

bernardodemarco left a comment

Choose a reason for hiding this comment

Uh oh!

blueorangutan commented Mar 28, 2025

Uh oh!

Pearl1594 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

codecov bot commented Mar 26, 2025 •

edited

Loading

Imvedansh commented Mar 26, 2025 •

edited

Loading

Pearl1594 left a comment •

edited

Loading