Unexpected graybar on top of openstack-dashboard login page

[Seyeong Kim]

[Impact]
On openstack-dashboard login page(the first pace we face), there is unexpected graybar on top of the page.

I've been analyzing this page and found below code affects to this symptom.

body.md-default-theme, body, html.md-default-theme, html {
    color: rgba(0,0,0,0.87);
    background-color: rgb(250,250,250);
}

If I remove above background-color, It is ok.

I also found that upstream doesn't have the same symptom.

It seems that xstatic override css setting when generating it.

Please see the screenshots attached below.

And this is happening from UCA pike.

[Test Case]
1. deploy openstack env with juju,
2. check openstack-dashboard login page

[Regression Potential]
This patch updated ubuntu theme only. It could show us broken css even in worst case. Restarting apache2 and memcached daemon is required.

[Others]

[Seyeong Kim (seyeongkim)]

Adding html { background-color: transparent; } on /usr/share/openstack-dashboard/openstack_dashboard/themes/ubuntu/_styles.scss

solves this issue.

[Seyeong Kim (seyeongkim)]

though I need to do below steps after changing.

cd /usr/share/openstack-dashboard/

python manage.py collectstatic --no-input
python manage.py compress --force

service apache2 restart
service memcached restart

[Karl Williams (deadlight)]

Removing the background colour will remove the grey strip and give the page a white background.

The entire page background is meant to be that light grey colour but the fix to make that work would require a bit more styling. I think that the above proposed fix would work and perhaps we can look at more involved styling when we next have a refresh of the theme.

[Ubuntu Foundations Team Bug Bot (crichton)]

The attachment "lp1818770_bionic.debdiff" seems to be a debdiff. The ubuntu-sponsors team has been subscribed to the bug report so that they can review and hopefully sponsor the debdiff. If the attachment isn't a patch, please remove the "patch" flag from the attachment, remove the "patch" tag, and if you are member of the ~ubuntu-sponsors, unsubscribe the team.

[This is an automated message performed by a Launchpad user owned by ~brian-murray, for any issue please contact him.]

[Sahid Orentino (sahid-ferdjaoui)]

Hello Seyeong Kim,

I think the issue may be something else. When I did some local tests I noticed that my browser was not able to load "image-background-pattern.png" It indicates that there are errors.

I think we should first try to fix this issue and see whether that also fixes the screen mistake. Hope that makes sense.

[Seyeong Kim (seyeongkim)]

Hello Sahid

Could you please let me know what env you used?

I tested pike and queens just now and there is no symptome as you said.

It is normally loaded in my case.

Thanks.

[Sahid Orentino (sahid-ferdjaoui)]

I'm using stable/rocky.

If you try to read the png on stable/rocky [0] or master [1] you will notice that there are errors. I just checked for stable/queens [2] and that looks correct.

So your fix might be right but it seems that we also need to fix the png for rocky and master.

[0] https://git.launchpad.net/~ubuntu-server-dev/ubuntu/+source/horizon/plain/debian/theme/ubuntu/img/image-background-pattern.png?h=stable/rocky
[1] https://git.launchpad.net/~ubuntu-server-dev/ubuntu/+source/horizon/tree/debian/theme/ubuntu/img/image-background-pattern.png?h=master
[2] https://git.launchpad.net/~ubuntu-server-dev/ubuntu/+source/horizon/tree/debian/theme/ubuntu/img/image-background-pattern.png?h=stable/queens

[Seyeong Kim (seyeongkim)]

ok I'll try to do it.

I have a question about that.

I think we need to handle them separately but you want to handle them in this case?

[Sahid Orentino (sahid-ferdjaoui)]

I will create an other bug related to the PNG issue but I will add your patch and the updated PNG in the same package version. Hope that makes sense.

[Sahid Orentino (sahid-ferdjaoui)]

Seyeong Kim, if you can review the patches that would be great.

  https://code.launchpad.net/~sahid-ferdjaoui/ubuntu/+source/horizon/+git/horizon

Thanks,
s.

[Seyeong Kim (seyeongkim)]

Thanks. but this issue is happening from Pike,

I tested Ocata but it is ok. though code are the same all of them..
( I think patch for old one is just fine but can't verify them when it is in -proposed.. )

except that, all seems good.

Thanks.

[Sahid Orentino (sahid-ferdjaoui)]

Thanks I removed the unnecessary branch.

I think we need somebody which have good skill in CSS. Basically with your fix we still have the scrollbar where we should not have it.

I have removed your change and added:

body {
  padding: 1px;
}

As you can see in the screenshot that removed the scrollbar. The problem is that I have no idea why this is working :-)

[Karl Williams (deadlight)]

I tried fixing the issue in-browser and think that this should work.

Update from line 135 of static/themes/ubuntu/_styles.scss:

'''
#splash {
  background: url("/static/themes/ubuntu/img/image-background-pattern.png");
  position: absolute;
  width: 100vw;

  .login {
'''

(note: this also removes a gradient from the background which wouldn't have been on the original design. If it's desired then don't remove that line and just add the "position" and "width" lines)

[Sahid Orentino (sahid-ferdjaoui)]

Thanks Karl for your double check. I verified your proposed fix on Firefox and Chrome.

I will update the packages.

[Sahid Orentino (sahid-ferdjaoui)]

Karl,

If you can ACK the changes.

  https://code.launchpad.net/~sahid-ferdjaoui/ubuntu/+source/horizon/+git/horizon

Thanks.

[Karl Williams (deadlight)]

Sahid,

Those changes look good to me.

-K

[Corey Bryant (corey.bryant)]

New package versions that fix this for disco (stein), cosmic (rocky), bionic (queens), and pike have been uploaded. Cosmic and Bionic are awaiting review by the Ubuntu SRU team.

[Launchpad Janitor (janitor)]

This bug was fixed in the package horizon - 3:15.0.0~rc1-0ubuntu2

---------------
horizon (3:15.0.0~rc1-0ubuntu2) disco; urgency=medium

  [ Corey Bryant ]
  * Revert commited quilt patches.
  * Re-import orig tarball to fix broken svg files.

  [ Karl Williams ]
  * d/theme/ubuntu/_styles.scss: Fixing white bar on top of login
    page (LP: #1818770).

  [ Sahid Orentino Ferdjaoui]
  * d/theme/ubuntu/img: Replacing the corrupted PNG image
    image-background-pattern.png (LP: #1821896)

  [ Eric Desrochers ]
  * d/p/drop-devicename-creating-server-with-image-boot-to-volume.patch:
    When creating a server using an image boot source to new volume,
    horizon specified device_name 'vda'. If for instance we use an image
    with disk_bus type scsi, horizon will name the device_name as 'vda'
    when it should be 'sda'. As per BDMv2 documentation, it's best to not
    specify device_name. (LP: #1822129)

 -- Corey Bryant <email address hidden> Mon, 01 Apr 2019 15:59:34 -0400

[Corey Bryant (corey.bryant)]

Hello Seyeong, or anyone else affected,

Accepted horizon into pike-proposed. The package will build now and be available in the Ubuntu Cloud Archive in a few hours, and then in the -proposed repository.

Please help us by testing this new package. To enable the -proposed repository:

  sudo add-apt-repository cloud-archive:pike-proposed
  sudo apt-get update

Your feedback will aid us getting this update out to other Ubuntu users.

If this package fixes the bug for you, please add a comment to this bug, mentioning the version of the package you tested, and change the tag from verification-pike-needed to verification-pike-done. If it does not fix the bug for you, please add a comment stating that, and change the tag to verification-pike-failed. In either case, details of your testing will help us make a better decision.

Further information regarding the verification process can be found at https://wiki.ubuntu.com/QATeam/PerformingSRUVerification . Thank you in advance!

[Brian Murray (brian-murray)]

Hello Seyeong, or anyone else affected,

Accepted horizon into cosmic-proposed. The package will build now and be available at https://launchpad.net/ubuntu/+source/horizon/3:14.0.2-0ubuntu2 in a few hours, and then in the -proposed repository.

Please help us by testing this new package. See https://wiki.ubuntu.com/Testing/EnableProposed for documentation on how to enable and use -proposed. Your feedback will aid us getting this update out to other Ubuntu users.

If this package fixes the bug for you, please add a comment to this bug, mentioning the version of the package you tested and change the tag from verification-needed-cosmic to verification-done-cosmic. If it does not fix the bug for you, please add a comment stating that, and change the tag to verification-failed-cosmic. In either case, without details of your testing we will not be able to proceed.

Further information regarding the verification process can be found at https://wiki.ubuntu.com/QATeam/PerformingSRUVerification . Thank you in advance for helping!

N.B. The updated package will be released to -updates after the bug(s) fixed by this package have been verified and the package has been in -proposed for a minimum of 7 days.

[Brian Murray (brian-murray)]

Hello Seyeong, or anyone else affected,

Accepted horizon into bionic-proposed. The package will build now and be available at https://launchpad.net/ubuntu/+source/horizon/3:13.0.1-0ubuntu5 in a few hours, and then in the -proposed repository.

Please help us by testing this new package. See https://wiki.ubuntu.com/Testing/EnableProposed for documentation on how to enable and use -proposed. Your feedback will aid us getting this update out to other Ubuntu users.

If this package fixes the bug for you, please add a comment to this bug, mentioning the version of the package you tested and change the tag from verification-needed-bionic to verification-done-bionic. If it does not fix the bug for you, please add a comment stating that, and change the tag to verification-failed-bionic. In either case, without details of your testing we will not be able to proceed.

Further information regarding the verification process can be found at https://wiki.ubuntu.com/QATeam/PerformingSRUVerification . Thank you in advance for helping!

N.B. The updated package will be released to -updates after the bug(s) fixed by this package have been verified and the package has been in -proposed for a minimum of 7 days.

[Seyeong Kim (seyeongkim)]

Hello

I've verified pike for this.

just did the same test as description.

dpkg -l | grep dashboard
ii openstack-dashboard 3:12.0.3-0ubuntu1~cloud1 all Django web interface for OpenStack
ii openstack-dashboard-ubuntu-theme 3:12.0.3-0ubuntu1~cloud1 all Transitional dummy package for Ubuntu theme for Horizon

[Seyeong Kim (seyeongkim)]

Hello

I've verified bionic for this.

I did the same test as description.

dpkg -l | grep dashboard
ii openstack-dashboard 3:13.0.1-0ubuntu5 all Django web interface for OpenStack

[Seyeong Kim (seyeongkim)]

while upgrading pkg in cosmic.

I faced error with apt command.

It seems that dependency issue is there. and newer version of python3-django-horizon is not there yet.

root@node-11:~# apt install python3-django-horizon openstack-dashboard
Reading package lists... Done
Building dependency tree
Reading state information... Done
python3-django-horizon is already the newest version (3:14.0.2-0ubuntu1).
Some packages could not be installed. This may mean that you have
requested an impossible situation or if you are using the unstable
distribution that some required packages have not yet been created
or been moved out of Incoming.
The following information may help to resolve the situation:

The following packages have unmet dependencies:
 openstack-dashboard : Depends: python-django-horizon (= 3:14.0.2-0ubuntu2) but it is not going to be installed or
                                python3-django-horizon (= 3:14.0.2-0ubuntu2) but 3:14.0.2-0ubuntu1 is to be installed
E: Unable to correct problems, you have held broken packages.
root@node-11:~# apt install python3-django-horizon
Reading package lists... Done
Building dependency tree
Reading state information... Done
python3-django-horizon is already the newest version (3:14.0.2-0ubuntu1).
0 upgraded, 0 newly installed, 0 to remove and 30 not upgraded.
root@node-11:~#

[Corey Bryant (corey.bryant)]

Hello Seyeong, or anyone else affected,

Accepted horizon into queens-proposed. The package will build now and be available in the Ubuntu Cloud Archive in a few hours, and then in the -proposed repository.

Please help us by testing this new package. To enable the -proposed repository:

  sudo add-apt-repository cloud-archive:queens-proposed
  sudo apt-get update

Your feedback will aid us getting this update out to other Ubuntu users.

If this package fixes the bug for you, please add a comment to this bug, mentioning the version of the package you tested, and change the tag from verification-queens-needed to verification-queens-done. If it does not fix the bug for you, please add a comment stating that, and change the tag to verification-queens-failed. In either case, details of your testing will help us make a better decision.

Further information regarding the verification process can be found at https://wiki.ubuntu.com/QATeam/PerformingSRUVerification . Thank you in advance!

[Corey Bryant (corey.bryant)]

Hello Seyeong, or anyone else affected,

Accepted horizon into rocky-proposed. The package will build now and be available in the Ubuntu Cloud Archive in a few hours, and then in the -proposed repository.

Please help us by testing this new package. To enable the -proposed repository:

  sudo add-apt-repository cloud-archive:rocky-proposed
  sudo apt-get update

Your feedback will aid us getting this update out to other Ubuntu users.

If this package fixes the bug for you, please add a comment to this bug, mentioning the version of the package you tested, and change the tag from verification-rocky-needed to verification-rocky-done. If it does not fix the bug for you, please add a comment stating that, and change the tag to verification-rocky-failed. In either case, details of your testing will help us make a better decision.

Further information regarding the verification process can be found at https://wiki.ubuntu.com/QATeam/PerformingSRUVerification . Thank you in advance!

[Seyeong Kim (seyeongkim)]

Hello

I've verified this issue for queens.

I just did the same test as description.

dpkg -l | grep dashboard
ii openstack-dashboard 3:13.0.1-0ubuntu5~cloud0 all Django web interface for OpenStack
ii openstack-dashboard-ubuntu-theme 3:13.0.1-0ubuntu5~cloud0 all Transitional dummy package for Ubuntu theme for Horizon

[Seyeong Kim (seyeongkim)]

When trying to upgrade openstack-dashboard

I got below messages. and If I upgrade them all, there are syntax error there. ( pyinotify )

Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
  docutils-doc formencode-i18n libjs-sphinxdoc libjs-underscore python-amqp python-anyjson python-appdirs python-babel python-blinker python-bs4 python-bson python-bson-ext python-cachetools python-ceilometerclient python-certifi python-chardet python-cinderclient python-cliff python-cmd2 python-concurrent.futures python-contextlib2
  python-csscompressor python-dateutil python-debtcollector python-decorator python-deprecation python-django python-django-appconf python-django-babel python-django-compressor python-django-horizon python-django-openstack-auth python-django-pyscss python-docutils python-dogpile.cache python-eventlet python-extras python-fasteners
  python-fixtures python-formencode python-funcsigs python-functools32 python-futurist python-glanceclient python-greenlet python-gridfs python-heatclient python-html5lib python-iso8601 python-jinja2 python-jmespath python-json-pointer python-jsonpatch python-jsonschema python-jwt python-keystoneauth1 python-keystoneclient python-kombu
  python-linecache2 python-lxml python-markupsafe python-memcache python-mimeparse python-mock python-monotonic python-msgpack python-munch python-neutronclient python-novaclient python-oauthlib python-olefile python-openid python-openssl python-openstacksdk python-os-client-config python-os-service-types python-osc-lib
  python-oslo.concurrency python-oslo.config python-oslo.context python-oslo.i18n python-oslo.log python-oslo.messaging python-oslo.middleware python-oslo.policy python-oslo.serialization python-oslo.service python-oslo.utils python-osprofiler python-paste python-pastedeploy python-pastescript python-pathlib python-pbr python-pil python-pint
  python-posix-ipc python-prettytable python-pygments python-pyinotify python-pymongo python-pymongo-ext python-pyparsing python-pyperclip python-pyscss python-rcssmin python-repoze.lru python-requests python-requestsexceptions python-rfc3986 python-rjsmin python-roman python-routes python-scgi python-semantic-version python-simplejson
  python-sqlparse python-statsd python-stevedore python-swiftclient python-tempita python-tenacity python-testtools python-traceback2 python-tz python-unicodecsv python-unittest2 python-urllib3 python-vine python-warlock python-webencodings python-webob python-wrapt python3-django-horizon python3-django-openstack-auth
Suggested packages:
  python-amqp-doc python-blinker-doc python-ceilometerclient-doc python-cliff-doc python-debtcollector-doc bpython geoip-database-extra | geoip-database-contrib gettext ipython libgdal1 python-bcrypt python-django-doc python-flup python-psycopg2 python-pymysql python-sqlite python-django-appconf-doc python-django-babel-doc
  fonts-linuxlibertine | ttf-linux-libertine texlive-lang-french texlive-latex-base texlive-latex-recommended python-eventlet-doc python-egenix-mxdatetime python-funcsigs-doc python-futurist-doc python-glanceclient-doc python-greenlet-doc python...

[Seyeong Kim (seyeongkim)]

I can verify this is working after I installed with dpkg from directly download deb pkgs..

I think I need to check this

[Seyeong Kim (seyeongkim)]

I tried cosmic again with adding universe multiverse to apt/sources.list

and got the same msg as cosmic-rocky

[Corey Bryant (corey.bryant)]

Seyeong,

Can you take a look at this and see if you may have missed a package on the install? When you say you were upgrading, were you upgrading from queens? In that scenario you want to upgrade your queens py2 packages to rocky py2 packages and then upgrade rocky py2 to rocky py3 packages.

Thanks,
Corey

[Seyeong Kim (seyeongkim)]

logs in cosmic

https://pastebin.canonical.com/p/YvBsZnSZrS/

[Seyeong Kim (seyeongkim)]

logs in rocky

https://pastebin.canonical.com/p/7wT45RzGxM/

[Seyeong Kim (seyeongkim)]

The same in stsstack

https://pastebin.canonical.com/p/qqXXHRWxfr/

[Seyeong Kim (seyeongkim)]

ok, I found how to upgrade them on rocky and cosmic.

I verified bionic-rocky for this issue.

apt install openstack-dashboard-common(not openstack-dashboard)

oot@juju-41e8e7-default-8:~# dpkg -l | grep openstack-dashboard
ii openstack-dashboard 3:14.0.2-0ubuntu2~cloud0 all Django web interface for OpenStack
ii openstack-dashboard-common 3:14.0.2-0ubuntu2~cloud0 all Django web interface for OpenStack - common files
ii openstack-dashboard-ubuntu-theme 3:14.0.2-0ubuntu2~cloud0 all Transitional dummy package for Ubuntu theme for Horizon

[Seyeong Kim (seyeongkim)]

I verified cosmic for this issue.

apt install openstack-dashboard-common
( apt install openstack-dashboard causes a lot of depenent pkgs)

dpkg -l | grep openstack
ii openstack-dashboard 3:14.0.2-0ubuntu2 all Django web interface for OpenStack
ii openstack-dashboard-common 3:14.0.2-0ubuntu2 all Django web interface for OpenStack - common files
ii openstack-dashboard-ubuntu-theme 3:14.0.2-0ubuntu2 all Transitional dummy package for Ubuntu theme for Horizon
ii python3-django-openstack-auth 3:14.0.2-0ubuntu2 all Django authentication backend for Openstack - Python 3.x

[Łukasz Zemczak (sil2100)]

I will be conditionally releasing the bionic horizon SRU without first landing the cosmic counter-part as that one is blocked on verification of LP: #1821896. But in exchange: can someone take a look at that bug at try to verify it for cosmic? Thanks!

[Launchpad Janitor (janitor)]

This bug was fixed in the package horizon - 3:13.0.1-0ubuntu5

---------------
horizon (3:13.0.1-0ubuntu5) bionic; urgency=medium

  [ Karl Williams ]
  * d/theme/ubuntu/_styles.scss: Fixing white bar on top of login
    page (LP: #1818770).

 -- Sahid Orentino Ferdjaoui <email address hidden> Fri, 29 Mar 2019 09:16:36 +0100

[Łukasz Zemczak (sil2100)]

The verification of the Stable Release Update for horizon has completed successfully and the package has now been released to -updates. Subsequently, the Ubuntu Stable Release Updates Team is being unsubscribed and will not receive messages about this bug report. In the event that you encounter a regression using the package from -updates please report a new bug using ubuntu-bug and tag the bug report regression-update so we can easily find any regressions.

[Corey Bryant (corey.bryant)]

Fyi this is currently stuck in cosmic-proposed due to an autopkgtest failure [1]. Sahid is working on adding heat-dashboard armhf to the big_packages list to allow for more testing time in cosmic . Note that disco tests pretty quickly due to dropped py2 packages.

[1] http://autopkgtest.ubuntu.com/packages/heat-dashboard

[Łukasz Zemczak (sil2100)]

Seeing that heat-dashboard tests passed on all other architectures and the armhf are obviously timing out, I feel that blocking on this failure any longer makes no sense. Please proceed with getting this test failure resolved, but in the meantime I'll get the SRU released into cosmic. Thanks!

[Launchpad Janitor (janitor)]

This bug was fixed in the package horizon - 3:14.0.2-0ubuntu2

---------------
horizon (3:14.0.2-0ubuntu2) cosmic; urgency=medium

  [ Karl Williams ]
  * d/theme/ubuntu/_styles.scss: Fixing white bar on top of login
    page (LP: #1818770).

  [ Sahid Orentino Ferdjaoui]
  * d/theme/ubuntu/img: Replacing the corrupted PNG image
    image-background-pattern.png (LP: #1821896).

 -- Sahid Orentino Ferdjaoui <email address hidden> Fri, 29 Mar 2019 09:18:12 +0100

[Corey Bryant (corey.bryant)]

The verification of the Stable Release Update for horizon has completed successfully and the package has now been released to -updates. In the event that you encounter a regression using the package from -updates please report a new bug using ubuntu-bug and tag the bug report regression-update so we can easily find any regressions.

[Corey Bryant (corey.bryant)]

This bug was fixed in the package horizon - 3:14.0.2-0ubuntu2~cloud0
---------------

 horizon (3:14.0.2-0ubuntu2~cloud0) bionic-rocky; urgency=medium
 .
   * New update for the Ubuntu Cloud Archive.
 .
 horizon (3:14.0.2-0ubuntu2) cosmic; urgency=medium
 .
   [ Karl Williams ]
   * d/theme/ubuntu/_styles.scss: Fixing white bar on top of login
     page (LP: #1818770).
 .
   [ Sahid Orentino Ferdjaoui]
   * d/theme/ubuntu/img: Replacing the corrupted PNG image
     image-background-pattern.png (LP: #1821896).

[Corey Bryant (corey.bryant)]

The verification of the Stable Release Update for horizon has completed successfully and the package has now been released to -updates. In the event that you encounter a regression using the package from -updates please report a new bug using ubuntu-bug and tag the bug report regression-update so we can easily find any regressions.

[Corey Bryant (corey.bryant)]

This bug was fixed in the package horizon - 3:13.0.1-0ubuntu5~cloud0
---------------

 horizon (3:13.0.1-0ubuntu5~cloud0) xenial-queens; urgency=medium
 .
   * New update for the Ubuntu Cloud Archive.
 .
 horizon (3:13.0.1-0ubuntu5) bionic; urgency=medium
 .
   [ Karl Williams ]
   * d/theme/ubuntu/_styles.scss: Fixing white bar on top of login
     page (LP: #1818770).

[Corey Bryant (corey.bryant)]

The verification of the Stable Release Update for horizon has completed successfully and the package has now been released to -updates. In the event that you encounter a regression using the package from -updates please report a new bug using ubuntu-bug and tag the bug report regression-update so we can easily find any regressions.

[Corey Bryant (corey.bryant)]

This bug was fixed in the package horizon - 3:12.0.3-0ubuntu1~cloud1
---------------

 horizon (3:12.0.3-0ubuntu1~cloud1) xenial-pike; urgency=medium
 .
   [ Karl Williams ]
   * d/theme/ubuntu/_styles.scss: Fixing white bar on top of login
     page (LP: #1818770).