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 podman run --rm -d --name horizon-temp registry.redhat.io/rhosp-rhel8/openstack-horizon /usr/bin/sleep infinity

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 .

4. Terminate the container:

   $ sudo podman kill horizon-temp

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

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

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

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

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 ~]$

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

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

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

   • 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:

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

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