Chapter 8. Rebranding the Fuse Online user interface

Procedure

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

   oc get pods

   Copy to Clipboard Toggle word wrap

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 ~/

   Copy to Clipboard Toggle word wrap

   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

   Copy to Clipboard Toggle word wrap

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

      Copy to Clipboard Toggle word wrap

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

      -name: syndesis-ui-custom-logo-volume
       configMap:
        name: syndesis-ui-custom-logo

      Copy to Clipboard Toggle word wrap
   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

      Copy to Clipboard Toggle word wrap

   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

      Copy to Clipboard Toggle word wrap

   3. Replace the application title. For example:

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

      Copy to Clipboard Toggle word wrap

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

   Copy to Clipboard Toggle word wrap

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

      Copy to Clipboard Toggle word wrap

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

      -name: syndesis-ui-custom-index-volume
       configMap:
        name: syndesis-ui-custom-index

      Copy to Clipboard Toggle word wrap
   3. Save the syndesis-ui deployment file.