Red Hat blog

Quick Branding for Red Hat OpenShift Container Platform With Your Company Logo

April 3, 2018Jooho Lee

Tags:Topics, Products

This post was originally published by Jooho Lee on RedHat.com.

Red Hat OpenShift Container Platform is usually used by developers within a company, but Red Hat customers who have Red Hat OpenShift Container Platform on-premise may in turn use it to provide PaaS services to their customers. In this case, I am occasionally asked by customers to change the OpenShift logo to their company logo.

The OpenShift documentation provides many details on how to customize the web console, which is a user interface accessible from a web browser. However, if you just want to replace the OpenShift logo it might take some time to find the information. There is another Red Hat site called “uncontained.io” with some additional documentation. One of the docs on that site explains how to replace the default logo manually. As you might expect, it is complicated. In order to simplify this process, automation is needed, and Ansible is one of the best ways to do that.

There are two primary places where the Red Hat OpenShift Container Platform logo is displayed:

  • the login page
  • the web console (after login)

In this blog I will explain how to replace the Red Hat OpenShift Container Platform logo on the login page and on the web console, using Ansible scripts.

Customizing the Red Hat OpenShift Container Platform login page


Figure 1. Default login page of OpenShift Web Console

First, let’s try using the Red Hat OpenShift Container Platform docs. According to the OpenShift documentation, login-template.html can be generated in order to change the login page. In addition, several configuration changes can be made to the master-config.yaml file. Then, the atomic-openshift-master (atomic-openshift-master-api) daemon has to be restarted. The steps sound simple, but you will see that the result is not what you were looking for.

Let’s try it

# cd

# oc adm create-login-template > login-template.html

# oc adm create-provider-selection-template > provider-selection-template.html

# vi /etc/origin/master/master-config.yaml

oauthConfig:

 ...

 templates:

   login: /root/login-template.html

   providerSelection: /root/provider-selection-template.html

# systemctl restart atomic-openshift-master

Now you can see your new login page:

Figure 2
Figure 2. New custom login page of OpenShift Web Console
As you can see, there are only Username and Password fields on a white background. The login template only provides a plain page that you can customize to your tastes, with no logo.

However, what we want to do is to just replace the logo.

Replacing the logo on the Red Hat OpenShift Container Platform login page

Let’s try using a tool from GitHub called openshift-toolkit.

Demo System Environment Info:

We will replace the default logo image:
openshift logo
with this Demo Logo image:
redhat logo

Download openshift-toolkit repository from github

This repository is a collection of code samples to help you get started with Red Hat OpenShift

$ git clone https://github.com/redhat-cop/openshift-toolkit.git

$ cd openshift-toolkit/branding/ansible-playbook-openshift-custom-login-page

$ tree

.

├── playbook.yaml

├── README.md

├── requirements.yaml

└── result.png

This Ansible script uses Ansible Galaxy Roles, so this folder simply contains one playbook file (playbook.yaml), one role dependency (requirements.yaml), a README file, as well as an image.

Two Ansible Galaxy Roles are required by this playbook.

$ cat requirements.yaml

- src: Jooho.image-resize

- src: Jooho.openshift-custom-login-page

Download the above Ansible Galaxy Roles

By default, Ansible Galaxy Roles are stored in /etc/ansible/roles, but I prefer to store them in a separate directory. Adding the -p option specifies the path to the role directory:

$ ansible-galaxy install -r requirements.yaml -p ./roles

- downloading role 'image-resize', owned by Jooho

….

- Jooho.image-resize (master) was installed successfully

- downloading role 'openshift-custom-login-page', owned by Jooho

...

- Jooho.openshift-custom-login-page (master) was installed successfully

Download the demo logo

$ wget https://www.redhat.com/profiles/rh/themes/redhatdotcom/img/Red_Hat_RGB.jpg -O ./demo_logo.jpg

Now, we have prepared everything to replace the default logo. Let’s execute the Ansible playbook.

$ ansible-playbook -i /etc/ansible/hosts -e input_img=./demo_logo.jpg ./playbook.yaml

Execute the Ansible Playbook

  • i specifies the inventory host path
  • e passes additional variables as key=value

Please be patient until the script is done. Note that it will take longer than you would expect the first time because it may need to install package “ImageMagick”, which helps resize an image. If ImageMagick is not already installed, the user will need sudo privileges.

When it is done, please refresh the login page.

Figure 3

Figure 3. New login page with new logo

You now have a new login page with the new logo that you want, but the logo is a little bigger than you expected. The default resize is “193x144”, but the resized image is not exactly that size (193x144) because it respects the aspect ratio of the original image.

Let’s resize the image to 130x80 by passing an additional argument:

$ ansible-playbook -i /etc/ansible/hosts -e input_img=./demo_logo.jpg -e "size=130x80" ./playbook.yaml

Now the size of logo looks good:
Figure 4
Figure 4. Login page with new size of the logo

Customizing the web console

Unlike the login page, the web console logo can be easily changed manually because Red Hat OpenShift Container Platform provides the #header-logo CSS class to specify the web console logo. Hence, you can upload your logo image and customize the CSS file to 3 masters. This doc also explains how to do it manually.

However, automation can make life easier so we will again use an Ansible script.

Demo System Environment Info:

Move to the webconsole playbook folder

$ cd ../ansible-playbook-openshift-custom-webconsole-logo

$ tree

.

├── playbook.yaml

├── README.md

├── requirements.yaml

└── result.png

If you extracted openshift-toolkit from your home directory, the full path will be ~/openshift-toolkit/branding/ansible-playbook-openshift-custom-webconsole-logo

Two Ansible Galaxy Roles are required by this playbook.

$ cat requirements.yaml

- src: Jooho.image-resize

- src: Jooho.openshift-custom-webconsole-logo

Let’s start!

Figure 5

Figure 5. Default Web Console after Login

Download Ansible Galaxy Roles

$ ansible-galaxy install -r requirements.yaml -p ./roles

- downloading role 'image-resize', owned by Jooho

….

- Jooho.image-resize (master) was installed successfully

- downloading role 'openshift-custom-webconsole-logo', owned by Jooho

….

- Jooho.openshift-custom-webconsole-logo (master) was installed successfully

Download the demo logo

$ wget https://store.ansible.com/static/img/Ansible_RH_AnsibleTower_White.png?v=2017.10.18 -O ./demo_logo.png

Now we have prepared everything to replace the logo. Let’s execute the Ansible playbook:

$ ansible-playbook -i /etc/ansible/hosts -e input_img=./demo_logo.png ./playbook.yaml

This is the result page. We can see at the top left corner that the logo was changed to the new one we downloaded.

Figure 6

Figure 6. Web Console with new logo

Ansible is easy to use and is simple and powerful. Personally, what I love the most is that it is also agentless, which means all you need to use Ansible is SSH, which is installed by default on Red Hat Enterprise Linux (Windows needs Powershell 3.0 or later). Using Ansible, you can easily automate something that you might do routinely. In addition, you can also share it with the community through Ansible Galaxy.

Author

Jooho Lee Jooho Lee is a senior OpenShift Technical Account Manager (TAM) in Toronto supporting middleware products(EAP/ DataGrid/ Web Server) and cloud products (Docker/ Kubernetes/ OpenShift/ Ansible). He is an active member of JBoss User Group Korea and Openshift / Ansible Group. Find more posts by Jooho at https://www.redhat.com/en/blog/authors/jooho-lee​.

About the author

Jooho Lee, Senior OpenShift Technical Account Manager

Jooho Lee

Senior OpenShift Technical Account Manager

Jooho Lee is a senior OpenShift Technical Account Manager (TAM) in Toronto supporting middleware products(EAP/ DataGrid/ Web Server) and cloud products (Docker/ Kubernetes/ OpenShift/ Ansible). He is an active member of JBoss User Group Korea and Openshift / Ansible Group. 

Read full bio