[Bug 2024188] [NEW] [SRU][octavia-dashboard] Add members to pool horizon pane rendering incorrectly

[Launchpad Bug Tracker]

You have been subscribed to a public bug by David Negreira (dnegreira):

#### SRU BUG TEMPLATE ####
[ Impact ] 

 * When a user is using google chrome, and is adding a member to
   the loadbalancer pool, the weight and port number do not display
   and a user is not able to add a server to the pool via UI.
   The issue does not happen in Firefox.
 
[ Test Plan ]

 * Deploy an openstack cloud based on Jammy/Yoga with Octavia
   and horizon, ensure you have the python3-octavia-dashboard
   package installed.

 * With google-chrome, login to the horizon dashboard, go to Network Topology ->
   load balancers -> pools -> Create pool, a popup shows up.
   On this popup clear Pool Members, and you will see that there
   isn't any field to modify the Port or Weight.
   
 * You can use the same procedure to test that you can do the same
   procedure and see the required fields in Firefox or another browser.

[ Where problems could occur ]

 * This changes the html code on the octavia dashboard, and this could
   impact the UI of the octavia dashboard, so in case of a regression
   the impacted HTML code would be reverted and normal functionality,
   with the error in the google-chrome browser appearing again.

#### SRU BUG TEMPLATE ####
#### BELOW ORIGINAL BUG DESCRIPTION ####
Reported by Rick Cano in https://storyboard.openstack.org/#!/story/2010793

When going to add a member to a pool via the octavia ui, the text fields
for weight and port number don't display correctly. This prevents us
from adding members to a pool and from submitting the form. I have been
able to reproduce this behavior on chrome and edge. However, it appears
to work fine on Firefox. Will attach screenshot of what it looks like on
chrome. Note the weight field getting stretched across the top.

As for horizon ui version, so far, I have ran into this on Xena and Yoga

Comments:

Rick Cano 2023-06-16 at 02:07:26
I couldn't find a way to attach the image, so here's a imgur link to it:

Rick Cano 2023-06-16 at 02:08:21
I couldn't find a way to attach the image so here's an imgur link to it: https://imgur.com/KeWNi7Y

Gregory Thiemonge 2023-06-16 at 07:01:54
Hi,

This is really weird, the "Weight" input box is not in the right place but the "Remove" button looks ok (they are part of the same line in the table).
What happens when you click on the expander (the icon at the left of the IP address in allocated members), do the elements look correct?

I see that the IP address and Subnet fields of your allocated members
don't look like the fields in my env, in my case I have disabled input
boxes (there's an visible outline).

What is your chrome version? what is your resolution (or the size of the window)? does it happen when you increase/decrease the size of the window?
Any extensions that you could disable to check that they don't interfere with the dashboard?

Rick Cano 2023-06-16 at 11:21:24
Hi Gregory, I am getting this behavior on Chrome 114.0.5735.134. I did a fresh install with no extensions/addons turned on and saw the same problem. The windows was full screen and I did note that making it smaller makes it worse. My resolution is 1920x1080 and this is what it looks like if I click on the expander icon https://imgur.com/hEcdiIY

Rick Cano 2023-06-16 at 11:24:23
The form renders correctly on chrome 104.0.5112.102 (this was simply the most recent old version that I could easily get ahold of). It's from around August of 2022. I can't say what changed specifically in Chrome between then and now to cause this. Do you think this is something we'll be able to remediate on our end? Or would it be a broader horizon/openstack-dashboard issue?

** Affects: cloud-archive
     Importance: Undecided
         Status: New

** Affects: cloud-archive/antelope
     Importance: Undecided
         Status: New

** Affects: cloud-archive/bobcat
     Importance: Undecided
         Status: New

** Affects: cloud-archive/yoga
     Importance: Undecided
         Status: New

** Affects: cloud-archive/zed
     Importance: Undecided
         Status: New

** Affects: octavia
     Importance: High
     Assignee: Gregory Thiemonge (gthiemonge)
         Status: Fix Released

** Affects: octavia-dashboard (Ubuntu)
     Importance: Undecided
         Status: New

** Affects: octavia (Ubuntu Jammy)
     Importance: Undecided
         Status: New

** Affects: octavia-dashboard (Ubuntu Jammy)
     Importance: Undecided
         Status: New

** Affects: octavia-dashboard (Ubuntu Lunar)
     Importance: Undecided
         Status: New

** Affects: octavia-dashboard (Ubuntu Mantic)
     Importance: Undecided
         Status: New


** Tags: patch
-- 
[SRU][octavia-dashboard] Add members to pool horizon pane rendering incorrectly
https://bugs.launchpad.net/bugs/2024188
You received this bug notification because you are a member of Ubuntu Sponsors, which is subscribed to the bug report.