Red Hat Summit Red Hat SummitSupportoConsoleSviluppatoriInizia una provaContatti

Questo contenuto non è disponibile nella lingua selezionata.

Chapter 5. Customizing the Dashboard

The OpenStack dashboard for Red Hat OpenStack Platform uses a default theme (RCUE), which is stored inside the horizon container. You can customize the look and feel of the OpenStack dashboard by adding your own theme to the container image and customizing certain dashboard parameters. With this customization, you can modify the following elements:

  • Logo
  • Site colors
  • Stylesheets
  • HTML title
  • Site branding link
  • Help URL
Note

To ensure continued support for modified Red Hat OpenStack Platform container images, the resulting images must comply with the Red Hat Container Support Policy.

5.1. Obtaining the horizon container image
Copia collegamento

You must obtain a copy of the horizon container image. You can pull this image either into the undercloud or a separate client system running podman. To pull the horizon container image, run the following command: 

$ sudo podman pull registry.redhat.io/rhosp-rhel8/openstack-horizon
Copy to Clipboard Toggle word wrap

You can now use this image as a basis for a modified image.

5.2. Obtaining the RCUE theme
Copia collegamento

The horizon container image is configured to use 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

  1. Make 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 /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 -a horizon-temp:/usr/share/openstack-dashboard/openstack_dashboard/themes/rcue .
    Copy to Clipboard Toggle word wrap

  4. Kill the container: 

    $ sudo podman kill horizon-temp
    Copy to Clipboard Toggle word wrap

    You should now have a local copy of the RCUE theme.

5.3. Creating your own theme based on RCUE
Copia collegamento

To use RCUE as a basis, copy the entire RCUE theme directory rcue to a new location, for example mytheme: 

$ cp -r rcue mytheme
Copy to Clipboard Toggle word wrap

To change a theme’s colors, graphics, fonts, among others, edit the files in mytheme. When editing this theme, check for all instances of rcue and ensure that you change them to the new mytheme name. This includes paths, files, and directories.

5.4. Creating a file to enable your theme and customize the dashboard
Copia collegamento

To enable your theme in the dashboard container, you must create a file to override the AVAILABLE_THEMES parameter. 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.

You can also set custom parameters in the _12_mytheme_theme.py file. For example:

SITE_BRANDING

Set the HTML title that appears at the top of the browser window. For example: 

SITE_BRANDING = "Example, Inc. Cloud"
Copy to Clipboard Toggle word wrap
SITE_BRANDING_LINK

Changes the hyperlink of the theme’s logo, which normally redirects to horizon:user_home by default. For example: 

SITE_BRANDING_LINK = "http://example.com"
Copy to Clipboard Toggle word wrap

5.5. Generating a modified horizon image
Copia collegamento

When your custom theme is ready, you can create a new container image that enables and uses your theme. Use a dockerfile to generate a new container image using the original horizon image as a basis. The following is an example of a dockerfile: 

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 horizon:horizon /etc/openstack-dashboard/local_settings.d/_12_mytheme_theme.py
Copy to Clipboard Toggle word wrap

Save this file in your horizon-themes directory as dockerfile.

To use the dockerfile to generate the new image, run the following command: 

sudo podman build . -t "192.168.24.1:8787/rhosp-rhel8/openstack-horizon-mytheme:0-1"
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 pulls uses to pull images. In this instance, you will push this image to the undercloud’s container registry, 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 case, 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 and it is usually a good idea to follow this convention. If you generate a new version of this image, increment the release (e.g. 0-2).

Push the resulting image to the undercloud’s container registry: 

$ podman push 192.168.24.1:8787/rhosp-rhel8/openstack-horizon-mytheme:0-1
Copy to Clipboard Toggle word wrap
Important

If updating or upgrading 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.

5.6. Using the modified container image in the overcloud
Copia collegamento

To use the resulting container image 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.

Edit the ContainerHorizonConfigImage and ContainerHorizonImage parameters to point to your modified container image. For example: 

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

Save this new version of the overcloud-images.yaml file.

5.7. Editing puppet parameters
Copia collegamento

Red Hat OpenStack Platform director provides a set of horizon parameters you can modify using environment files. You can also use the ExtraConfig hook to set Puppet hieradata. For example, the default help URL points to https://access.redhat.com/documentation/en/red-hat-openstack-platform. You can modify this URL with the following environment file content: 

parameter_defaults:
  ExtraConfig:
    horizon::help_url: "http://openstack.example.com"
Copy to Clipboard Toggle word wrap

5.8. Deploying an overcloud with a customized Dashboard
Copia collegamento

To deploy the overcloud with your dashboard customizations, include the following environment files:

  • The environment file with your modified container image locations.
  • The environment file with additional dashboard modifications.
  • Any other environment files relevant to the configuration of your overcloud.

For example: 

$ openstack overcloud deploy --templates \
    -e /home/stack/templates/overcloud-images.yaml \
    -e /home/stack/templates/help_url.yaml \
    [OTHER OPTIONS]
Copy to Clipboard Toggle word wrap
Torna in cima
Red Hat logoGithubredditYoutubeTwitter

Formazione

Prova, acquista e vendi

Community

Informazioni sulla documentazione di Red Hat

Aiutiamo gli utenti Red Hat a innovarsi e raggiungere i propri obiettivi con i nostri prodotti e servizi grazie a contenuti di cui possono fidarsi. Esplora i nostri ultimi aggiornamenti.

Rendiamo l’open source più inclusivo

Red Hat si impegna a sostituire il linguaggio problematico nel codice, nella documentazione e nelle proprietà web. Per maggiori dettagli, visita il Blog di Red Hat.

Informazioni su Red Hat

Forniamo soluzioni consolidate che rendono più semplice per le aziende lavorare su piattaforme e ambienti diversi, dal datacenter centrale all'edge della rete.

Theme

© 2025 Red Hat