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

[David Negreira]

Hi,

I have attached 4 more debdiffs in order to backport the fix to Ussuri:
lp2024188-focal-octavia-dashboard.debdiff for Ubuntu - It's the backport patch to Ussuri
lp2024188-focal-victoria-octavia-dashboard.debdiff for UCA - It's the backport patch to focal-victoria
lp2024188-focal-wallaby-octavia-dashboard.debdiff  for UCA - It's the backport patch to focal-wallaby
lp2024188-focal-xena-octavia-dashboard.debdiff for UCA - It's the backport patch to focal-xena

These are the last sets of backports for this issue that are needed.
Thanks everyone.

-- 
You received this bug notification because you are a member of Ubuntu
OpenStack, which is subscribed to Ubuntu Cloud Archive.
https://bugs.launchpad.net/bugs/2024188

Title:
  [SRU][octavia-dashboard] Add members to pool horizon pane rendering
  incorrectly

Status in Ubuntu Cloud Archive:
  Fix Released
Status in Ubuntu Cloud Archive antelope series:
  Fix Released
Status in Ubuntu Cloud Archive bobcat series:
  Fix Released
Status in Ubuntu Cloud Archive ussuri series:
  New
Status in Ubuntu Cloud Archive victoria series:
  New
Status in Ubuntu Cloud Archive wallaby series:
  New
Status in Ubuntu Cloud Archive xena series:
  New
Status in Ubuntu Cloud Archive yoga series:
  Fix Released
Status in Ubuntu Cloud Archive zed series:
  Fix Released
Status in octavia:
  Fix Released
Status in octavia-dashboard package in Ubuntu:
  Fix Released
Status in octavia-dashboard source package in Focal:
  New
Status in octavia-dashboard source package in Jammy:
  Fix Released
Status in octavia-dashboard source package in Lunar:
  Fix Released
Status in octavia-dashboard source package in Mantic:
  Fix Released

Bug description:
  #### 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?

To manage notifications about this bug go to:
https://bugs.launchpad.net/cloud-archive/+bug/2024188/+subscriptions