第7章 Fuse Online ユーザーインターフェイスのカスタマイズ

Fuse Online のアプリケーション名、ロゴ、アイコン、およびその他のユーザーインターフェイスの詳細を置き換えて、Fuse Online をカスタマイズできます。これは、syndesis-ui デプロイメントファイルの ConfigMap オブジェクトとしてカスタマイズされたリソースをマウントして行います。

前提条件

  • お客様が管理する環境のオンサイトの OpenShift Container Platform に Fuse Online がインストールされ、稼働中である必要があります。
  • oc クライアントツールは、Fuse Online がインストールされている OCP クラスターに接続されている必要があります。
  • ユーザーが Fuse Online をインストールできる権限を持っている必要があります。

手順

  1. 以下のコマンドを実行して、Fuse Online がインストールされている syndesis-ui Pod の名前を取得します。

    oc get pods

  2. 以下のコマンドを実行して、カスタマイズ可能なロゴ、アイコン、フォント、および背景を取得します。その際、SYNDESIS_UI_POD_NAMEsyndesis-ui を実行している Pod の実際の名前に置き換えます。

    oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/static/media ~/

    これにより、~/media/ フォルダーにユーザーインターフェイスリソースが追加されます。

  3. ヘッダーロゴが含まれるファイル ~/media/syndesis_logo_full_darkbkg.9c467d96.svg を編集し、保存します。
  4. 更新されたロゴファイルが含まれる ConfigMap オブジェクトを作成して、変更したファイルをクラスターにアップロードします。

    cd ~/
    oc create configmap syndesis-ui-custom-logo --from-file=media/syndesis_logo_full_darkbkg.9c467d96.svg
  5. syndesis-ui デプロイメントファイルを変更して、syndesis-ui-custom-logo ConfigMap オブジェクトをマウントします。これには、oc edit dc/syndesis-ui を呼び出すか、OpenShift Web コンソールを使用して Applications > Deployments > syndesis-ui > Actions > Edit YAML と選択します。

    1. spec.template.containers.volumeMounts の下に以下を追加します。

      -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. spec.template.volumes の下に以下を追加します。

      -name: syndesis-ui-custom-logo-volume
       configMap:
        name: syndesis-ui-custom-logo
    3. syndesis-ui デプロイメントファイルを保存します。
  6. `~/media フォルダーにあるカスタマイズしたい各ファイルについて、ステップ 3 から 5 を繰り返します。
  7. アプリケーションタイトルが含まれるファイルを編集および保存します。

    1. ファイルを更新するディレクトリーを作成します。

      mkdir ~/syndesis-custom/src

    2. 以下のコマンドを実行して、アプリケーションタイトルを取得します。その際、SYNDESIS_UI_POD_NAMEsyndesis-ui を実行している Pod の実際の名前に置き換えます。

      oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/index.html ~/syndesis-custom/src
    3. アプリケーションタイトルを置き換えます。以下に例を示します。

      sed -i 's/<title>.*<\/title>/<title>NEW_TITLE<\/title>/g' ~/syndesis-custom/src/index.html
  8. 更新されたファイルが含まれる ConfigMap オブジェクトを作成して、変更したアプリケーションタイトルファイルをクラスターにアップロードします。

    cd ~/syndesis-custom/src
    oc create configmap syndesis-ui-custom-index --from-file=index.html
  9. syndesis-ui-custom-index ConfigMap オブジェクトをマウントして、syndesis-ui デプロイメントファイルを変更します。

    1. spec.template.containers.volumeMounts の下に以下を追加します。

      -name: syndesis-ui-custom-vindex-olume
       mountPath: /opt/app-root/src/index.html
       subPath: index.html
    2. spec.template.volumes の下に以下を追加します。

      -name: syndesis-ui-custom-index-volume
       configMap:
        name: syndesis-ui-custom-index
    3. syndesis-ui デプロイメントファイルを保存します。

結果

syndesis-ui デプロイメントファイルを保存すると、変更内容を反映したユーザーインターフェイスで Fuse Online が自動的に再デプロイされます。Fuse Online の後続の再デプロイメントでも、変更内容が反映されます。