39.2. 拡張スクリプトとスタイルシートの読み込み

拡張スクリプトとスタイルシートは、URL がブラウザーからアクセス可能であれば、任意の https:// URL でホストできます。ファイルは、パブリックにアクセスできるルートを使用してプラットフォーム上の Pod からや OpenShift Container Platform 外部の別のサーバー上の Pod からホストできます。

スクリプトとスタイルシートを追加するには、openshift-web-console namespace で webconsole-configConfigMap を編集します。Web コンソール設定は ConfigMap の webconsole-config.yaml キーにあります。

$ oc edit configmap/webconsole-config -n openshift-web-console

スクリプトを追加するには、extensions.scriptURLs プロパティーを更新します。値は URL の配列です。

スタイルシートを追加するには、extensions.stylesheetURLs プロパティーを更新します。値は URL の配列です。

apiVersion: v1
kind: ConfigMap
data:
  webconsole-config.yaml: |
    apiVersion: webconsole.config.openshift.io/v1
    extensions:
      scriptURLs:
        - https://example.com/scripts/menu-customization.js
        - https://example.com/scripts/nav-customization.js
      stylesheetURLs:
        - https://example.com/styles/logo.css
        - https://example.com/styles/custom-styles.css
    [...]

ConfigMap を保存した後、Web コンソールコンテナーは数分以内に新規の拡張ファイルについて自動的に更新されます。

最良の実践例として、拡張スクリプトを Immediately Invoked Function Expression (IIFE) でラップすることができます。これにより、Web コンソールや他の拡張で使用される名前と競合するグローバル変数を作成することを防ぐことができます。以下に例を示します。

(function() {
  // Put your extension code here...
}());

以降のセクションの例では、Web コンソールをカスタマイズする一般的な方法を示します。

$ oc edit configmap/webconsole-config -n openshift-web-console

apiVersion: v1
kind: ConfigMap
data:
  webconsole-config.yaml: |
    apiVersion: webconsole.config.openshift.io/v1
    extensions:
      [...]
      properties:
        doc_url: https://docs.openshift.com
        key1: value1
        key2: value2
    [...]

window.OPENSHIFT_EXTENSION_PROPERTIES = {
  doc_url: "https://docs.openshift.com",
  key1: "value1",
  key2: "value2"
}