Chapter 2. Customizing the Dashboard

Procedure

1. Open the Red Hat Package Browser.

2. Search for openstack-dashboard-theme package.

   If more than one openstack-dashboard-theme package is listed in the Package column of the search results, then select the Red Hat OpenStack Services on OpenShift product from the Browse packages for all of my listed products list that is adjacent to the search box to refine the search results.

3. Click the NOARCH in the Architectures column of the search results to display the openstack-dashboard-theme page.
4. Download the latest Version of this package. The latest version is automatically selected for you.
5. Check that the Product (Variant, Version, Architecture) column specifies Red Hat OpenStack Services on OpenShift 18.0 x86_64.

6. Click the Download Now button for the Package download, for example, Package - openstack-dashboard-theme-23.0.2-0.el9ost.noarch.rpm.

   Note

   If you download the Source Package file instead, then you must extract the files from this tar archive file before continuing.

Procedure

1. Copy the downloaded openstack-dashboard-theme RPM file to a directory for the Dashboard themes in your RHOSO deployment environment:

   $ rsync -avz <package_download_path> <user>@<deployment_host>:<deployment_themes_path>

   Copy to Clipboard Toggle word wrap
   • Replace <package_download_path> with the local path of the Openstack Dashboard theme package that you downloaded, for example, /home/Downloads/openstack-dashboard-theme-23.0.2-0.el9ost.noarch.rpm.
   • Replace <user>@<deployment_host> with the remote user and address of your deployment server, for example, root@lenovo-15.
   • Replace <deployment_themes_path> with the path of directory for the Dashboard themes on your deployment server, for example, ~/horizon-themes/.

2. Extract the files and directories of the RCUE theme:

   $ cd <deployment_themes_path>
   $ rpm2cpio <theme_rpm_name> | cpio -idmv

   Copy to Clipboard Toggle word wrap
   • Replace <deployment_themes_path> with the path of directory you created to store your Dashboard themes on your deployment server, for example, ~/horizon-themes/.
   • Replace <theme_rpm_name> with the name of your RPM file, for example, openstack-dashboard-theme-23.0.2-0.el9ost.noarch.rpm.

Procedure

1. Copy the extracted usr directory of the RCUE theme in your RHOSO deployment to a new subdirectory, for example, mytheme:

   $ cp -r <rcue_themes_usr_directory_path> <your_dashboard_theme_path>

   Copy to Clipboard Toggle word wrap
   • Replace <rcue_themes_usr_directory_path> with the path in your RHOSO deployment of the usr directory of the RCUE theme, for example, ~/horizon-themes/usr/share/openstack-dashboard/openstack_dashboard/themes/rcue/.
   • Replace <your_dashboard_theme_path> with the path of your Dashboard theme, for example, ~/horizon-themes/mytheme.

2. Replace all the instances of rcue in your Dashboard theme directory, for example ~/horizon-themes/mytheme, with the name of your Dashboard theme, for example, mytheme. You must include the paths, files, and subdirectories.

   The following command highlights all the instances of rcue that you must replace in your Dashboard theme directory:

   $ grep -r 'rcue'

   Copy to Clipboard Toggle word wrap
3. Edit the required files in your Dashboard theme directory to change the colors, graphics, fonts, and other elements of your theme.

4. Navigate to the Dashboard themes directory on your deployment server:

   $ cd <dashboard_themes_path>

   Copy to Clipboard Toggle word wrap
   • Replace <dashboard_themes_path> with the path of the Dashboard (horizon) themes directory, for example, ~/horizon-themes/.

5. Create a tarball of your theme directory:

   Note

   Only the tar.gz format is supported.

   $ tar -cvzf <your_dashboard_theme_name>.tar.gz <your_dashboard_theme_path>

   Copy to Clipboard Toggle word wrap
   • Replace <your_dashboard_theme_name> with the name of your Dashboard theme, for example, mytheme.
   • Replace <your_dashboard_theme_path> with the path in your RHOSO deployment of your Dashboard theme, for example, ~/horizon-themes/mytheme/.

Procedure

1. Open the Dashboard themes directory on your deployment server:

   $ cd <dashboard_themes_path>

   Copy to Clipboard Toggle word wrap
   • Replace <dashboard_themes_path> with the path of the Dashboard themes directory on your deployment server, for example, ~/horizon-themes/.

2. Use your preferred text editor to create a new configuration file called _12_<theme_name>_theme.py.

   • Replace <theme_name> with the name of your theme, for example, mytheme.

     Note

     The prefix of this file must have a number greater than _11_. This ensures that your theme configuration file is loaded after the default RCUE theme configuration file to override its settings.

3. Edit this file to specify the following mandatory parameter:

   AVAILABLE_THEMES = [('<theme_name>', '<theme_description>', 'themes/<theme_name>')]

   Copy to Clipboard Toggle word wrap
   • Replace <theme_name> with the name of your theme, for example, mytheme.

   • Replace <theme_description> with a brief description of your theme, for example, My theme.

     Important

     When you specify the third argument of the AVAILABLE_THEMES parameter, the parent directory must always be themes, for example, themes/mytheme.

4. Optional: You can specify the following parameters to further customize the appearance of your theme:

   • SITE_BRANDING: Specify the HTML title that appears at the top of the browser window. For example, SITE_BRANDING = "Example, Inc. Cloud".
   • SITE_BRANDING_LINK : Specify the hyperlink of the theme logo, which redirects to horizon:user_home, by default. For example, SITE_BRANDING_LINK = "http://example.com".

Procedure

1. Create the ConfigMap file called horizon-theme that specifies the location in your RHOSO deployment of the tarball and the configuration file that you have created for your theme:

   $ oc create cm horizon-theme \
   --from-file=<your_theme_tarball_path> \
   --from-file=<your_theme_configuration_file_path>

   Copy to Clipboard Toggle word wrap
   • Replace <your_theme_tarball_path> with the location in your RHOSO deployment of the tarball containing your theme files, for example, $HOME/horizon-themes/mytheme.tar.gz.
   • Replace <your_theme_configuration_file_path> with the location in your RHOSO deployment of the configuration file of your theme, for example, $HOME/horizon-themes/_12_mytheme_theme.py.
2. Open your OpenStackControlPlane CR file, openstack_control_plane.yaml, on your workstation.

3. Add the .spec.horizon.template.extramounts section:

   kind: OpenStackControlPlane
   spec:
     ...
     horizon:
       enabled: true
       template:
         extraMounts:
         - extraVol:
           - extraVolType: HorizonTheme
             mounts:
             - mountPath: /etc/openstack-dashboard/local_settings.d/<your_theme_configuration_filename>
               name: horizon-theme
               readOnly: true
               subPath: <your_theme_configuration_filename>
             - mountPath: /etc/openstack-dashboard/theme/<your_theme_tarball>
               name: horizon-theme
               readOnly: true
               subPath: <your_theme_tarball>
             volumes:
             - configMap:
                 name: horizon-theme
               name: horizon-theme
     ...

   Copy to Clipboard Toggle word wrap
   • Replace <your_theme_configuration_filename> with the file name and extension of your Dashboard theme configuration file, for example, _12_mytheme_theme.py.

   • Replace <your_theme_tarball> with the file name and extension of the tarball you created to contain your Dashboard theme files, for example, mytheme.tar.gz.

     Note

     All the other settings of the .spec.horizon.template.extramounts section are mandatory.

4. Apply the changes made to the OpenStackControlPlane CR file:

   $ oc apply -f openstack_control_plane.yaml -n openstack

   Copy to Clipboard Toggle word wrap

5. Wait for the new horizon service pod to be deployed by running the following command and waiting for the Message field to display Setup complete:

   $ oc get horizon -w
   NAME      NETWORKATTACHMENTS   STATUS   MESSAGE
   horizon                        True     Setup complete

   Copy to Clipboard Toggle word wrap

   The RHOSO Dashboard uses your theme.