set width of dropdown select items for Network Offering

[DaanHoogland]

set width of dropdown select items for Network Offering during add tier dialog

Description

This PR is kind of experimental but, ...

Fixes: #11861

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

• BLOCKER
• Critical
• Major
• Minor
• Trivial

Screenshots (if appropriate):

How Has This Been Tested?

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 17.76%. Comparing base (e25cf43) to head (2ab28ff).
⚠️ Report is 70 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main   #11899      +/-   ##
============================================
+ Coverage     17.59%   17.76%   +0.16%     
- Complexity    15599    15863     +264     
============================================
  Files          5910     5923      +13     
  Lines        529707   530556     +849     
  Branches      64719    64830     +111     
============================================
+ Hits          93213    94263    +1050     
+ Misses       426002   425747     -255     
- Partials      10492    10546      +54     

Flag	Coverage Δ
uitests	3.57% <ø> (-0.01%)	⬇️
unittests	18.85% <ø> (+0.18%)	⬆️

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.

[kiranchavala]

@blueorangutan ui

[kiranchavala]

@DaanHoogland

A little bit better.

Can the entire description be displayed

"Offering for Isolated Vpc networks with Source Nat service enabled and LB service Disabled"

[kiranchavala]

LGTM

Can scroll the description

[shwstppr]

@DaanHoogland I feel a bit more elegant way could be showing a tooltip when the item is hovered,

diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index 4f6aaef444..7fe706daba 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -194,7 +194,11 @@
               :filterOption="(input, option) => {
                 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option v-for="item in networkOfferings" :key="item.id" :value="item.id" :label="item.displaytext || item.name || item.description">
+              <a-select-option
+                v-for="item in networkOfferings"
+                :key="item.id"
+                :value="item.id"
+                :title="item.displaytext || item.name || item.description">
                 {{ item.displaytext || item.name || item.description }}
               </a-select-option>
             </a-select>

[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.

[blueorangutan]

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

[DaanHoogland]

@kiranchavala @shwstppr, can you have another look?

[shwstppr]

LGTM - tested on QA server

Though I see same problem in Update form form a network tier as well. At some point may be we should move all selects to InfiniteScrollSelect... with this tooltip behaviour

[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.

[blueorangutan]

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

[DaanHoogland]

ping @kiranchavala

[rajujith]

@DaanHoogland Since this is for the 4.22.1 release, could you retarget the PR to the 4.22 branch?