Chapter 2. Customizing the dashboard
Chapter 2. Customizing the dashboard The Red Hat OpenStack Platform (RHOSP) dashboard (horizon) uses a default theme (RCUE), which is stored inside the horizon container. You can add your own theme to the container image and customize certain parameters to change the look and feel of the following dashboard elements: Logo Site colors Stylesheets HTML title Site branding link Help URL Note To ensure continued support for modified RHOSP container images, the resulting images must comply with the Red Hat Container Support Policy . 2.1. Obtaining the horizon container image To obtain a copy of the horizon container image, pull the image either into the undercloud or a separate client system that is running podman. Procedure Pull the horizon container image: You can use this image as a basis for a modified image. 2.2. Obtaining the RCUE theme The horizon container image uses the Red Hat branded RCUE theme by default. You can use this theme as a basis for your own theme and extract a copy from the container image. Procedure Create a directory for your theme: Start a container that executes a null loop. For example, run the following command: Copy the RCUE theme from the container to your local directory: Terminate the container: Result: You now have a local copy of the RCUE theme. 2.3. Creating your own theme based on RCUE To use RCUE as a basis, copy the entire RCUE theme directory rcue to a new location. This procedure uses mytheme as an example name. Procedure Copy the theme: To change the colors, graphics, fonts, and other elements of a theme, edit the files in mytheme. When you edit this theme, check for all instances of rcue including paths, files, and directories to ensure that you change them to the new mytheme name. 2.4. Creating a file to enable your theme and customize the dashboard To enable your theme in the dashboard container, you must create a file to override the AVAILABLE_THEMES parameter. Procedure Create a new file called _12_mytheme_theme.py in the horizon-themes directory and add the following content: The 12 in the file name ensures this file is loaded after the RCUE file, which uses 11 , and overrides the AVAILABLE_THEMES parameter. 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_LINK Changes the hyperlink of the theme logo, which normally redirects to horizon:user_home by default. 2.5. Generating a modified horizon image When your custom theme is ready, you can create a new container image that uses your theme. Procedure 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 Save this file in your horizon-themes directory as Dockerfile . Use the Dockerfile to generate the new image: USD 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 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 . Push the image to the container registry of the undercloud: USD sudo openstack tripleo container image push --local 172.24.10.10:8787/rhosp-rhel8/openstack-horizon:0-5 Verify that the image has uploaded to the local registry: [stack@director horizon-themes]USD curl http://172.24.10.10:8787/v2/_catalog | jq .repositories[] | grep -i hori "rhosp-rhel8/openstack-horizon" [stack@director horizon-themes]USD [stack@director ~]USD 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 ~]USD Important If you update or upgrade Red Hat OpenStack Platform, you must reapply the theme to the new horizon image and push a new version of the modified image to the undercloud. 2.6. Using the modified container image in the overcloud To use the container image that you modified with your overcloud deployment, edit the environment file that contains the list of container image locations. This environment file is usually named overcloud-images.yaml . Procedure Edit the DockerHorizonConfigImage and DockerHorizonImage parameters to point to your modified container image: Save this new version of the overcloud-images.yaml file. 2.7. Editing puppet parameters Director provides a set of dashboard parameters that you can modify with environment files. Procedure Use the ExtraConfig parameter to set Puppet hieradata. For example, the default help URL points to https://access.redhat.com/documentation/en/red-hat-openstack-platform . To modify this URL, use the following environment file content and replace the URL: Additional resources Dashboard parameters 2.8. Customizing the share protocols of the Shared File Systems service You can customize the list of available share protocols in the Manila UI plugin for OpenStack Dashboard (horizon) by using the ExtraConfig parameter in a custom environment file. Modify the ExtraConfig parameter to integrate the puppet parameter that you can use to customize the dashboard options for the Shared File Systems service (manila). Procedure Log in to the undercloud host as the stack user. Source the stackrc undercloud credentials file: 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 Replace <share_protocols> with the name of your file. Configure the puppet parameter that you can use to customize the options for the Shared File Systems service: 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. Configure the list of enabled_share_protocols with the protocols you want to use, for example, the CephFS protocol: Add your <share_protocols>.yaml file to the stack with your other environment files, and then deploy the overcloud: 2.9. Deploying an overcloud with a customized dashboard Procedure To deploy the overcloud with your dashboard customizations, include the following environment files in the openstack overcloud deploy command: The environment file with your modified container image locations. The environment file with additional dashboard modifications. Any other environment files that are relevant to your overcloud configuration.
sudo podman pull registry.redhat.io/rhosp-rhel8/openstack-horizon:17.1 mkdir ~/horizon-themes cd ~/horizon-themes sudo podman run --rm -d --name horizon-temp registry.redhat.io/rhosp-rhel8/openstack-horizon /usr/bin/sleep infinity sudo podman cp horizon-temp:/usr/share/openstack-dashboard/openstack_dashboard/themes/rcue . sudo podman kill horizon-temp cp -r rcue mytheme AVAILABLE_THEMES = [('mytheme', 'My Custom Theme', 'themes/mytheme')] SITE_BRANDING = "Example, Inc. Cloud" SITE_BRANDING_LINK = "http://example.com" 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 sudo podman build . -t "172.24.10.10:8787/rhosp-rhel8/openstack-horizon:0-5" --log-level debug [LOCATION]/[NAME]:[TAG] sudo openstack tripleo container image push --local 172.24.10.10:8787/rhosp-rhel8/openstack-horizon:0-5 [stack@director horizon-themes]USD curl http://172.24.10.10:8787/v2/_catalog | jq .repositories[] | grep -i hori "rhosp-rhel8/openstack-horizon" [stack@director horizon-themes]USD [stack@director ~]USD 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 ~]USD 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 parameter_defaults: ExtraConfig: horizon::help_url: "http://openstack.example.com" source ~/stackrc vi /home/stack/templates/<share_protocols>.yaml parameter_defaults: ControllerExtraConfig: horizon::dashboards::manila::manila_options: parameter_defaults: ControllerExtraConfig: horizon::dashboards::manila::manila_options: enabled_share_protocols: ['CEPHFS'] (undercloud)USD openstack overcloud deploy --templates -e [your environment files] -e /home/stack/templates/<share_protocols>.yaml openstack overcloud deploy --templates -e /home/stack/templates/overcloud-images.yaml -e /home/stack/templates/help_url.yaml [OTHER OPTIONS]