Chapter 2. Customizing the dashboard

Procedure

1. Create a directory for your theme:

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

   Copy to Clipboard Toggle word wrap

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

   $ sudo podman run --rm -d --name horizon-temp registry.redhat.io/rhosp-rhel8/openstack-horizon:16.2 /usr/bin/sleep infinity

   Copy to Clipboard Toggle word wrap

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

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

   Copy to Clipboard Toggle word wrap

4. Terminate the container:

   $ sudo podman kill horizon-temp

   Copy to Clipboard Toggle word wrap

   Result: You now have a local copy of the RCUE theme.

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')]

   Copy to Clipboard Toggle word wrap

   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"

   Copy to Clipboard Toggle word wrap

   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"

   Copy to Clipboard Toggle word wrap

Procedure

1. Use a Dockerfile to generate a new container image using the original horizon image as a basis, as shown in the following example:

   FROM registry.redhat.io/rhosp-rhel8/openstack-horizon
   MAINTAINER Acme
   LABEL name="rhosp-rhel8/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 apache:apache /etc/openstack-dashboard/local_settings.d/_12_mytheme_theme.py

   Copy to Clipboard Toggle word wrap
2. Save this file in your horizon-themes directory as Dockerfile.

3. Use the Dockerfile to generate the new image:

   $ sudo podman build . -t "172.24.10.10:8787/rhosp-rhel8/openstack-horizon:0-5" --log-level debug

   Copy to Clipboard Toggle word wrap

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

   [LOCATION]/[NAME]:[TAG]

   Copy to Clipboard Toggle word wrap

   LOCATION

   This is usually the location of the container registry that the overcloud eventually uses to pull images. In this instance, you push this image to the container registry of the undercloud, so 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 instance, it is rhosp-rhel8/openstack-horizon-mytheme.

   TAG

   The tag for the image. Red Hat uses 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 image to the container registry of the undercloud:

   $ sudo openstack tripleo container image push --local 172.24.10.10:8787/rhosp-rhel8/openstack-horizon:0-5

   Copy to Clipboard Toggle word wrap

5. Verify that the image has uploaded to the local registry:

     [stack@director horizon-themes]$ curl http://172.24.10.10:8787/v2/_catalog | jq .repositories[] | grep -i hori
     "rhosp-rhel8/openstack-horizon"
     [stack@director horizon-themes]$
   
     [stack@director ~]$ sudo openstack tripleo container image list | grep hor
     | docker://director.ctlplane.localdomain:8787/rhosp-rhel8/openstack-horizon:16.0-84
     | docker://director.ctlplane.localdomain:8787/rhosp-rhel8/openstack-horizon:0-5  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<,Uploaded
     [stack@director ~]$

   Copy to Clipboard Toggle word wrap

Procedure

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

   parameter_defaults:
     ...
     ContainerHorizonConfigImage: 192.168.24.1:8787/rhosp-rhel8/openstack-horizon-mytheme:0-1
     ContainerHorizonImage: 192.168.24.1:8787/rhosp-rhel8/openstack-horizon-mytheme:0-1
     ...

   Copy to Clipboard Toggle word wrap
2. Save this new version of the overcloud-images.yaml file.