Fixed and enhanced vlan field validation in the UI

[erikbocks]

Description

This PR fixes and enhances the validation of the values inserted in the VLAN/VNI field when configuring a new zone. Currently, it only checks if any of the fields are empty and if the range start value is greater than the range end value. Thus, it is possible to insert invalid values, as negatives.

With the PR changes, now the field validates if: any of the values is negative, any of the fields is empty or if the inserted values are inside the isolation method max and min values. The maximum and minimum values are now defined based on the selected isolation method (isolation method limits used can be find in the NetworkServiceImpl class). This PR also fixes a minor graphical issue, where the field displayed a red check icon, instead of a red error icon.

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

Screenshots (if appropriate):

Before the changes:

After the changes:

How Has This Been Tested?

1. Simulated the creation of a new zone, then validated the fix with the following tests:

VLAN

Test	Start	End	Valid
Empty	Null	Null	False
Negative value	-10	100	False
Equal	100	100	False
Start > End	100	10	False
End > Limit	1	4096	False
Start < Limit	0	100	False
Valid	1	100	True

VXLAN

Test	Start	End	Valid
Empty	Null	Null	False
Negative value	-4090	4100	False
Equal	4096	4096	False
Start > End	4100	4096	False
End > Limit	4096	16777215	False
Start < Limit	4095	4100	False
Valid	4096	4100	True

GRE

Test	Start	End	Valid
Empty	Null	Null	False
Negative value	-10	100	False
Equal	100	100	False
Start > End	100	99	False
End > Limit	1	4294967296	False
Start < Limit	-1	100	False
Valid	1	4000	True

[DaanHoogland]

@blueorangutan ui

[blueorangutan]

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 18.42%. Comparing base (7632814) to head (67ead53).
⚠️ Report is 372 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main   #10983      +/-   ##
============================================
+ Coverage     16.57%   18.42%   +1.84%     
- Complexity    13868    16868    +3000     
============================================
  Files          5719     5951     +232     
  Lines        507178   599037   +91859     
  Branches      61571    90044   +28473     
============================================
+ Hits          84085   110367   +26282     
- Misses       413674   476872   +63198     
- Partials       9419    11798    +2379     

Flag	Coverage Δ
uitests	4.28% <ø> (+0.31%)	⬆️
unittests	19.51% <ø> (+2.05%)	⬆️

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.

[blueorangutan]

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

[bernardodemarco]

lgtm, verified the QA env.

Tested manipulating the start and end values of the VLAN, VxLAN and GRE ranges, looks good

[DaanHoogland]

clgtm