Chapter 7. 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

  1. Obtain the name of the syndesis-ui pod in which Fuse Online is installed by invoking the following command:

    oc get pods

  2. 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.

  3. Edit and save the file that contains the header logo, which is ~/media/syndesis_logo_full_darkbkg.9c467d96.svg.

  4. 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

  5. Modify the syndesis-ui deployment file to mount the syndesis-ui-custom-logo ConfigMap object. Do this by invoking oc edit dc/syndesis-ui or by using the OpenShift web console, selecting Applications > Deployments > syndesis-ui > Actions > Edit YAML.

    1. 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

    2. Under spec.template.volumes, add the following: 

      -name: syndesis-ui-custom-logo-volume
 configMap:
  name: syndesis-ui-custom-logo
    3. Save the syndesis-ui deployment file.
  6. Repeat steps 3 through 5 for each file that is in the `~/media folder and that you want to customize.

  7. Edit and save the file that contains the application title:

    1. Create a directory in which to update the file:

      mkdir ~/syndesis-custom/src

    2. 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

    3. Replace the application title. For example: 

      sed -i 's/<title>.*<\/title>/<title>NEW_TITLE<\/title>/g' ~/syndesis-custom/src/index.html

  8. 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

  9. Modify the syndesis-ui deployment by mounting the syndesis-ui-custom-index ConfigMap object:

    1. Under spec.template.containers.volumeMounts, add the following: 

      -name: syndesis-ui-custom-vindex-olume
 mountPath: /opt/app-root/src/index.html
 subPath: index.html

    2. Under spec.template.volumes, add the following: 

      -name: syndesis-ui-custom-index-volume
 configMap:
  name: syndesis-ui-custom-index
    3. 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.