Collectstatic needs to be run for custom themes

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

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

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

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...

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

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