Chapter 2. Customizing the Dashboard

Procedure

1. Create a directory for your theme.

   $ mkdir ~/horizon-themes
   $ cd ~/horizon-themes

2. Start a container that executes a null loop. For example, run the following command:

   $ sudo docker run --rm -d --name horizon-temp registry.redhat.io/rhosp13/openstack-horizon /usr/bin/sleep infinity

3. Copy the RCUE theme from the container to your local directory:

   $ sudo docker cp -a horizon-temp:/usr/share/openstack-dashboard/openstack_dashboard/themes/rcue .

4. Kill the container:

   $ sudo docker kill horizon-temp

Procedure

1. Create a new file called _12_mytheme_theme.py in the horizon-themes directory and add the following content:

   AVAILABLE_THEMES = [('mytheme', 'My Custom Theme', 'themes/mytheme')]

   The 12 in the file name ensures this file is loaded after the RCUE file, which uses 11, and overrides the AVAILABLE_THEMES parameter.

2. Optional: You can also set custom parameters in the _12_mytheme_theme.py file. Use the following examples as a guide:

   SITE_BRANDING

   Set the HTML title that appears at the top of the browser window.

   SITE_BRANDING = "Example, Inc. Cloud"

   SITE_BRANDING_LINK

   Changes the hyperlink of the theme logo, which normally redirects to horizon:user_home by default.

   SITE_BRANDING_LINK = "http://example.com"

Procedure

1. Use a dockerfile to generate a new container image with the original horizon image as a basis. Use the following example dockerfile as a guide:

   FROM registry.redhat.io/rhosp13/openstack-horizon
   MAINTAINER Acme
   LABEL name="rhosp13/openstack-horizon-mytheme" vendor="Acme" version="0" release="1"
   COPY mytheme /usr/share/openstack-dashboard/openstack_dashboard/themes/mytheme
   COPY _12_mytheme_theme.py /etc/openstack-dashboard/local_settings.d/_12_mytheme_theme.py
   RUN sudo chown horizon:horizon /etc/openstack-dashboard/local_settings.d/_12_mytheme_theme.py

2. Save this file in your horizon-themes directory as dockerfile.

3. Use the dockerfile to generate the new image:

   sudo docker build . -t "192.168.24.1:8787/rhosp13/openstack-horizon-mytheme:0-1"

   The -t option names and tags the resulting image. It uses the following syntax:

   [LOCATION]/[NAME]:[TAG]

   LOCATION

   This is usually the location of the container registry that the overcloud uses to pull images. To push this image to the undercloud container registry, set this to the undercloud IP and port.

   NAME

   For consistency, this is usually the same name as the original container image followed by the name of your theme. In this example case, it is rhosp13/openstack-horizon-mytheme.

   TAG

   The tag for the image. You can follow the Red Hat convention by using the version and release labels as a basis for this tag. If you generate a new version of this image, increment the release, for example, 0-2.

4. Push the resulting image to the undercloud container registry:

   $ docker push 192.168.24.1:8787/rhosp13/openstack-horizon-mytheme:0-1

Procedure

1. Edit the DockerHorizonConfigImage and DockerHorizonImage parameters to point to your modified container image:

   parameter_defaults:
     ...
     DockerHorizonConfigImage: 192.168.24.1:8787/rhosp13/openstack-horizon-mytheme:0-1
     DockerHorizonImage: 192.168.24.1:8787/rhosp13/openstack-horizon-mytheme:0-1
     ...

2. Save this new version of the overcloud-images.yaml file.