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-rhel9/openstack-horizon /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 default RCUE theme configuration file, which uses 11, to override its settings.

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-rhel9/openstack-horizon
   MAINTAINER Acme
   LABEL name="rhosp-rhel9/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-rhel9/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-rhel9/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-rhel9/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-rhel9/openstack-horizon"
     [stack@director horizon-themes]$
   
     [stack@director ~]$ sudo openstack tripleo container image list | grep hor
     | docker://director.ctlplane.localdomain:8787/rhosp-rhel9/openstack-horizon:16.0-84
     | docker://director.ctlplane.localdomain:8787/rhosp-rhel9/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-rhel9/openstack-horizon-mytheme:0-1
     ContainerHorizonImage: 192.168.24.1:8787/rhosp-rhel9/openstack-horizon-mytheme:0-1
     ...

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

Procedure

1. Log in to the undercloud host as the stack user.

2. Source the stackrc undercloud credentials file:

   $ source ~/stackrc

   Copy to Clipboard Toggle word wrap

3. Create or open a YAML environment file to configure the share protocols that you want to be available to cloud users in the dashboard :

   Example

   $ vi /home/stack/templates/<share_protocols>.yaml

   Copy to Clipboard Toggle word wrap
   • Replace <share_protocols> with the name of your file.

4. Configure the puppet parameter that you can use to customize the options for the Shared File Systems service:

   parameter_defaults:
     ControllerExtraConfig:
       horizon::dashboards::manila::manila_options:

   Copy to Clipboard Toggle word wrap
   Note

   If you use a custom role, use the [role_name]ExtraConfig parameter instead of the ControllerExtraConfig parameter. Replace [role_name] with the name of your custom role.

5. Configure the list of enabled_share_protocols with the protocols you want to use, for example, the CephFS protocol:

   parameter_defaults:
     ControllerExtraConfig:
       horizon::dashboards::manila::manila_options:
         enabled_share_protocols: ['CEPHFS']

   Copy to Clipboard Toggle word wrap

6. Add your <share_protocols>.yaml file to the stack with your other environment files, and then deploy the overcloud:

   (undercloud)$ openstack overcloud deploy --templates \
   -e [your environment files] \
   -e /home/stack/templates/<share_protocols>.yaml

   Copy to Clipboard Toggle word wrap