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 18.57%. Comparing base (5bf869c) to head (03b5224).

Additional details and impacted files

@@             Coverage Diff              @@
##               main   #11899      +/-   ##
============================================
+ Coverage     17.51%   18.57%   +1.05%     
+ Complexity    15585    15583       -2     
============================================
  Files          5914     5469     -445     
  Lines        529867   492249   -37618     
  Branches      64722    57781    -6941     
============================================
- Hits          92782    91412    -1370     
+ Misses       426635   390553   -36082     
+ Partials      10450    10284     -166     

Flag	Coverage Δ
uitests	?
unittests	18.57% <ø> (-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.

[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