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 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. 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:
-
Red Hat OpenShift Container Platform 3.7
-
3 Masters (1 Master is also possible)
-
API Server - https://masters-37-1205.xxx.example.com:8443
We will replace the default logo with this Demo 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 (https://galaxy.ansible.com/), 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
-
-
This role is used to resize the customer logo to a specific size.
-
-
Jooho.openshift-custom-login-page
-
This role configures the OpenShift master configuration to use the new 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. 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
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:
-
OpenShift Container Platform 3.7
-
3 Masters (1 Master is also possible)
-
API Server - https://masters-37-1205.xxx.example.com:8443
-
Default Logo() to Demo Logo()
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
-
-
This role is used to resize the customer logo to a specific size.
-
-
Jooho.openshift-custom-webconsole-logo
-
This role configures the OpenShift master configuration to load custom CSS and the new logo.
-
Let’s start!
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. 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.
Jooho Lee is a Senior OpenShift Technical Account Manager (TAM) in Toronto supporting middleware products (Red Hat JBoss Enterprise Application Platform (JBoss EAP/ Red Hat JBoss DataGrid/ Red Hat JBoss Web Server) and cloud products (containers/ Kubernetes/ OpenShift/ Ansible). He is an active member of JBoss User Group Korea and Openshift and Ansible Groups.
Find more posts by Jooho at https://www.redhat.com/en/blog/authors/jooho-lee .
A Red Hat Technical Account Manager (TAM) is a specialized product expert who works collaboratively with IT organizations to strategically plan for successful deployments and help realize optimal performance and growth. The TAM is part of Red Hat’s world-class Customer Experience and Engagement organization and provides proactive advice and guidance to help you identify and address potential problems before they occur. Should a problem arise, your TAM will own the issue and engage the best resources to resolve it as quickly as possible with minimal disruption to your business.
Connect with TAMs at a Red Hat Convergence event near you! Red Hat Convergence is a free, invitation-only event offering technical users an opportunity to deepen their Red Hat product knowledge and discover new ways to apply open source technology to meet their business goals. These events travel to cities around the world to provide you with a convenient, local one-day experience to learn and connect with Red Hat experts and industry peers.
Open source is collaborative curiosity. Join us at Red Hat Summit, May 8-10, in San Francisco to connect with TAMs and other Red Hat experts in person! Register now for only US$1,100 using code CEE18.
執筆者紹介
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.
チャンネル別に見る
自動化
テクノロジー、チームおよび環境に関する IT 自動化の最新情報
AI (人工知能)
お客様が AI ワークロードをどこでも自由に実行することを可能にするプラットフォームについてのアップデート
オープン・ハイブリッドクラウド
ハイブリッドクラウドで柔軟に未来を築く方法をご確認ください。
セキュリティ
環境やテクノロジー全体に及ぶリスクを軽減する方法に関する最新情報
エッジコンピューティング
エッジでの運用を単純化するプラットフォームのアップデート
インフラストラクチャ
世界有数のエンタープライズ向け Linux プラットフォームの最新情報
アプリケーション
アプリケーションの最も困難な課題に対する Red Hat ソリューションの詳細
オリジナル番組
エンタープライズ向けテクノロジーのメーカーやリーダーによるストーリー
製品
ツール
試用、購入、販売
コミュニケーション
Red Hat について
エンタープライズ・オープンソース・ソリューションのプロバイダーとして世界をリードする Red Hat は、Linux、クラウド、コンテナ、Kubernetes などのテクノロジーを提供しています。Red Hat は強化されたソリューションを提供し、コアデータセンターからネットワークエッジまで、企業が複数のプラットフォームおよび環境間で容易に運用できるようにしています。
言語を選択してください
Red Hat legal and privacy links
- Red Hat について
- 採用情報
- イベント
- 各国のオフィス
- Red Hat へのお問い合わせ
- Red Hat ブログ
- ダイバーシティ、エクイティ、およびインクルージョン
- Cool Stuff Store
- Red Hat Summit