Collectstatic needs to be run for custom themes

Bug #1897805 reported by David Ames
18
This bug affects 3 people
Affects Status Importance Assigned to Milestone
OpenStack Dashboard Charm
Fix Committed
Undecided
Unassigned

Bug Description

When using a custom theme the static files are not accessible. They should show up in

/var/lib/openstack-dashboard/static/themes/<custom theme name>

It is possible we need to run various djagno manage.py commands like the following [0]

/usr/share/openstack-dashboard/manage.py collectstatic
/usr/share/openstack-dashboard/manage.py compress

The charm does not appear to do this, though the package does on install.

Even if the charm did do this manage.py has hasbang /usr/bin/python which is unavailable on Focal unless python2 is installed.

[0] https://docs.openstack.org/horizon/latest/install/from-source.html

Tags: sts
Revision history for this message
Lenny (ljuarbe) wrote :

This is happening to me -- https://discourse.juju.is/t/custom-theme-for-openstack-dashboard/3620 -- running Ussuri on focal series.

David Ames (thedac)
description: updated
Revision history for this message
Lenny (ljuarbe) wrote :

FYI: As per the suggestion made on IRC, copying the static files to /var/lib/openstack-dashboard/static/themes did not help.

Revision history for this message
David Ames (thedac) wrote :

It looks like the charm needs to run either this entire script [0] or at least the manage.py bits when the theme is changed.

We need to investigate dpkg-reconfigure to accomplish this.

Regarding the python2 vs python3 issue, we should update the package on focal to have the correct hashbang.

WORKAROUND:

In the meantime the workaround is to execute manage.py with preceding python3 as the script does [0]

python3 manage.py collectstatic
python3 manage.py compress --force

[0] https://git.launchpad.net/~ubuntu-server-dev/ubuntu/+source/horizon/tree/debian/openstack-dashboard.postinst

Revision history for this message
Rodrigo Barbieri (rodrigo-barbieri2010) wrote :
Download full text (3.5 KiB)

Hello,

I investigated this issue in depth and realized that the problem is actually the folder structure and poor documentation.

There shouldn't be a need to run collectstatic at all, nor any configuration or commands aside from juju commands.

The reason there is so much confusion around this is that most people are deriving the ubuntu theme but not realizing the mapping to static files is different for the custom theme, as can be seen in [1]. When deriving the ubuntu theme there is no "static" folder, but the mapping requires one, as according to the charm code at [2], the data is being extracted to themes/custom without a "static" folder. The confusion gets even worse because somehow the theme partially works without the "static" folder structure, and when a "static" folder is added, it crashes when loading the theme if all the static contents are not moved there. This required structure is definitely not obvious.

Therefore, the base folder structure should be:

themes/custom/
- static/
- - img/
- - _styles.scss
- - _variables.scss
- - ...
- local_settings.py (optional)

See below the steps to customize the theme correctly:

1) Deploy fresh environment with default settings, and therefore ubuntu theme

2) We are going to derive the custom theme from the ubuntu theme, so:

2a) ssh to an openstack-dashboard unit
2b) mkdir -p custom/static
2c) rsync -vza /usr/share/openstack-dashboard/openstack_dashboard/themes/ubuntu/* custom/static/
2d) edit _variables.scss and change the orange colors to green
2e) edit _styles.scss and change the path of all images as follows:

url("/static/themes/ubuntu/img/image-background-pattern.png") to
url("/static/themes/custom/img/image-background-pattern-custom.png")

url("/static/themes/ubuntu/img/logo-ubuntu-orange.svg") to
url("/static/themes/custom/img/logo-custom-blue.svg")

url("/static/themes/ubuntu/img/logo-ubuntu-white.svg") to
url("/static/themes/custom/img/logo-custom-white.svg")

2f) mv custom/static/img/image-background-pattern.png custom/static/img/image-background-pattern-custom.png

2g) mv custom/static/img/logo-ubuntu-white.svg custom/static/img/logo-custom-white.svg

2h) mv custom/static/img/logo-ubuntu-orange.svg custom/static/img/logo-custom-blue.svg

2i) wget https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/heart.svg

2j) edit custom/static/img/logo-custom-white.svg and replace its contents with the contents from heart.svg, change the fill to #000

2k) edit custom/static/img/logo-custom-blue.svg and replace its contents with the contents from heart.svg, change the fill to #00F

2l) cd custom; tar -czvf custom.tgz static

3) at juju jumphost:

3a) rsync -vza <openstack-dashboard_unit_ip>:~/custom/custom.tgz .

3b) juju config openstack-dashboard custom-theme=true ubuntu-theme=no

watch juju status and wait for unit to be idle

3c) juju attach-resource openstack-dashboard theme=custom.tgz

watch juju status and wait for unit to be idle

4) access horizon and change the theme to custom

5) optionally, change default-theme juju config option to "custom" so it doesn't have to be changed for new users in the future.

juju config openstack-dashboard default-theme=custom

In conclusion...

Read more...

Revision history for this message
Nobuto Murata (nobuto) wrote :

Fwiw, I have this notes for myself. The key is to inherit the default theme instead of Ubuntu theme so everything can be way simpler.

.
└── static
    ├── horizon
    │ └── components
    │ └── _selects.scss
    ├── img
    │ ├── favicon.ico
    │ ├── logo-splash.svg
    │ └── logo.svg
    ├── _styles.scss
    └── _variables.scss

[_variables.scss]

$brand-primary: #772953; // the key brand color

$navbar-default-bg: $brand-primary;
$navbar-default-link-hover-bg: darken($navbar-default-bg, 15%);
$navbar-default-color: #fff;
$navbar-default-toggle-hover-bg: darken($navbar-default-bg, 10%);
$navbar-default-toggle-icon-bar-bg: #fff;

@import "/themes/default/variables";
====

tar -cvzf custom-theme.tgz -C custom-theme/ .
juju config openstack-dashboard default-theme=custom
juju config openstack-dashboard ubuntu-theme=no
juju attach-resource openstack-dashboard theme=./custom-theme.tgz

# off and on is required when uploading a new revision
juju config openstack-dashboard custom-theme=false
juju config openstack-dashboard custom-theme=true

tags: added: sts
Changed in charm-openstack-dashboard:
status: New → In Progress
Revision history for this message
OpenStack Infra (hudson-openstack) wrote : Fix merged to charm-openstack-dashboard (master)

Reviewed: https://review.opendev.org/c/openstack/charm-openstack-dashboard/+/855545
Committed: https://opendev.org/openstack/charm-openstack-dashboard/commit/366960f4c959f9206a717461205eb4583236e562
Submitter: "Zuul (22348)"
Branch: master

commit 366960f4c959f9206a717461205eb4583236e562
Author: Rodrigo Barbieri <email address hidden>
Date: Thu Sep 1 15:37:02 2022 -0300

    [DOC] Add details about custom theme folder structure

    When using custom themes, some strict structure should be
    used in order for it to work correctly.

    Closes-bug: #1897805
    Change-Id: I535478b06f8789f245b6c9fc523806c02c47a369

Changed in charm-openstack-dashboard:
status: In Progress → Fix Committed
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.