Chapter 8. Rebranding the Fuse Online user interface
You can rebrand Fuse Online by replacing the Fuse Online application name, logo, icons, and other user interface details. You do this by mounting customized resources as ConfigMap
objects in the syndesis-ui
deployment file.
Prerequisites
- Fuse Online is installed and running on OpenShift Container Platform on-site in a customer-managed environment.
-
The
oc
client tool is connected to the OCP cluster in which Fuse Online is installed. - You have permission to install Fuse Online.
Procedure
Obtain the name of the
syndesis-ui
pod in which Fuse Online is installed by invoking the following command:oc get pods
Fetch customizable logos, icons, fonts, and backgrounds by invoking the following command and replacing SYNDESIS_UI_POD_NAME with the actual name of the pod that is running
syndesis-ui
:oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/static/media ~/
This puts user interface resources in the the
~/media/
folder.-
Edit and save the file that contains the header logo, which is
~/media/syndesis_logo_full_darkbkg.9c467d96.svg
. Upload the modified file to the cluster by creating a
ConfigMap
object that contains the updated logo file:cd ~/ oc create configmap syndesis-ui-custom-logo --from-file=media/syndesis_logo_full_darkbkg.9c467d96.svg
Modify the
syndesis-ui
deployment file to mount thesyndesis-ui-custom-logo
ConfigMap
object. Do this by invokingoc edit dc/syndesis-ui
or by using the OpenShift web console, selecting Applications > Deployments > syndesis-ui > Actions > Edit YAML.Under
spec.template.containers.volumeMounts
, add the following:-name: syndesis-ui-custom-logo-volume mountPath: /opt/app-root/src/static/media/syndesis_logo_full_darkbkg.9c467d96.svg subPath: syndesis_logo_full_darkbkg.9c467d96.svg
Under
spec.template.volumes
, add the following:-name: syndesis-ui-custom-logo-volume configMap: name: syndesis-ui-custom-logo
-
Save the
syndesis-ui
deployment file.
-
Repeat steps 3 through 5 for each file that is in the
`~/media
folder and that you want to customize. Edit and save the file that contains the application title:
Create a directory in which to update the file:
mkdir ~/syndesis-custom/src
Fetch the application title file by invoking the following command and replacing SYNDESIS_UI_POD_NAME with the actual name of the pod that is running
syndesis-ui
:oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/index.html ~/syndesis-custom/src
Replace the application title. For example:
sed -i 's/<title>.*<\/title>/<title>NEW_TITLE<\/title>/g' ~/syndesis-custom/src/index.html
Upload the modified application title file to the cluster by creating a
ConfigMap
object that contains the updated file:cd ~/syndesis-custom/src oc create configmap syndesis-ui-custom-index --from-file=index.html
Modify the
syndesis-ui
deployment by mounting thesyndesis-ui-custom-index
ConfigMap
object:Under
spec.template.containers.volumeMounts
, add the following:-name: syndesis-ui-custom-vindex-olume mountPath: /opt/app-root/src/index.html subPath: index.html
Under
spec.template.volumes
, add the following:-name: syndesis-ui-custom-index-volume configMap: name: syndesis-ui-custom-index
-
Save the
syndesis-ui
deployment file.
Results
Saving the syndesis-ui
deployment file automatically redeploys Fuse Online with a user interface that reflects your changes. Subsequent re-deployments of Fuse Online also reflect your changes.