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.62%. Comparing base (7324ef4) to head (1b8464b).

Additional details and impacted files

@@            Coverage Diff            @@
##               4.22   #11899   +/-   ##
=========================================
  Coverage     17.62%   17.62%           
- Complexity    15668    15669    +1     
=========================================
  Files          5917     5917           
  Lines        531255   531255           
  Branches      64951    64951           
=========================================
+ Hits          93639    93640    +1     
+ Misses       427077   427076    -1     
  Partials      10539    10539           

Flag	Coverage Δ
uitests	3.70% <ø> (ø)
unittests	18.69% <ø> (+<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

[rajujith]

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

[sureshanaparti]

@blueorangutan ui

[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-874)

[kiranchavala]

@blueorangutan package

[sureshanaparti]

@blueorangutan package

[blueorangutan]

@sureshanaparti a [SL] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress.

[blueorangutan]

Packaging result [SF]: ✔️ el8 ✔️ el9 ✔️ el10 ✔️ debian ✔️ suse15. SL-JID 17000

[sureshanaparti]

clgtm