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

[Corey Bryant]

Thanks David and Gregory. New package versions with this fix have been
uploaded to the jammy unappoved queue and cloud-archive staging ppas.

** Changed in: cloud-archive/zed
   Importance: Undecided => High

** Changed in: cloud-archive/zed
       Status: New => Triaged

** Changed in: cloud-archive/yoga
   Importance: Undecided => High

** Changed in: cloud-archive/yoga
       Status: New => Triaged

** Changed in: cloud-archive/antelope
   Importance: Undecided => High

** Changed in: cloud-archive/antelope
       Status: New => Triaged

** Changed in: octavia-dashboard (Ubuntu Lunar)
   Importance: Undecided => High

** Changed in: octavia-dashboard (Ubuntu Lunar)
       Status: New => Triaged

** Changed in: octavia-dashboard (Ubuntu Jammy)
   Importance: Undecided => High

** Changed in: octavia-dashboard (Ubuntu Jammy)
       Status: New => Triaged

** No longer affects: octavia (Ubuntu Jammy)

-- 
You received this bug notification because you are a member of Ubuntu
Sponsors, which is subscribed to the bug report.
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:
  Triaged
Status in Ubuntu Cloud Archive bobcat series:
  Fix Released
Status in Ubuntu Cloud Archive yoga series:
  Triaged
Status in Ubuntu Cloud Archive zed series:
  Triaged
Status in octavia:
  Fix Released
Status in octavia-dashboard package in Ubuntu:
  Fix Released
Status in octavia-dashboard source package in Jammy:
  Triaged
Status in octavia-dashboard source package in Lunar:
  Triaged
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