検索

第35章 Web コンソールのカスタマイズ

download PDF

35.1. 概要

管理者は拡張機能を使用して Web コンソールをカスタマイズできます。拡張機能でスクリプトを実行すると、Web コンソールを読み込む際にカスタムスタイルシートを読み込むことができます。拡張スクリプトによって、Web コンソールのデフォルト動作を上書きし、必要に応じてカスタマイズできます。

たとえば、拡張スクリプトを使用して、自社独自のブランディングを追加したり、自社固有の機能を追加したりすることができます。この使用例として一般的なのは、さまざまな環境のリブランディングやホワイトラベリングです。同じ拡張コードを使用しながら、Web コンソールを変更する設定を指定できます。

注意

Web コンソールのスタイルや動作に対して、以下に記載されていないような広範な変更を実行するには注意が必要です。スクリプトやスタイルシートを追加することはできますが、大幅にカスタマイズすると、今後のバージョンで Web コンソールのマークアップや動作が変更された場合に、アップグレード時に再作業が必要になる可能性があります。

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

OpenShift Container Platform 3.9 では、拡張スクリプトとスタイルシートは、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 の配列です。

extensions.stylesheetURLs 設定の例

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 コンソールコンテナーは数分以内に新規の拡張ファイルについて自動的に更新されます。

注記

スクリプトとスタイルシートは正しいコンテンツタイプで提供する必要があります。そうしないと、それらはブラウザーで実行されません。スクリプトは Content-Type: application/javascript、スタイルシートは Content-Type: text/css で提供する必要があります。

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

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

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

注記

拡張の他の例については、GitHub の OpenShift Origin リポジトリーを参照してください。

35.2.1. 拡張プロパティーの設定

特定の拡張について環境ごとに異なるテキストを使用する場合、Web コンソール設定で環境を定義し、同じ拡張スクリプトを環境全体で使用できます。

拡張プロパティーを追加するには、openshift-web-console namespace で webconsole-config ConfigMap を 編集します。Web コンソール設定は ConfigMap の webconsole-config.yaml キーにあります。

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

extensions.properties の値を更新します。これはキーと値のペアのマップです。

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"
}

35.3. 外部ロギングソリューションの拡張オプション

OpenShift Container Platform 3.6 には、OpenShift Container Platform の EFK ロギングスタックを使用しなくても外部ロギングソリューションにリンクできる拡張オプションがあります。

'use strict';
angular.module("mylinkextensions", ['openshiftConsole'])
       .run(function(extensionRegistry) {
          extensionRegistry.add('log-links', _.spread(function(resource, options) {
            return {
              type: 'dom',
              node: '<span><a href="https://extension-point.example.com">' + resource.metadata.name + '</a><span class="action-divider">|</span></span>'
            };
          }));
       });
hawtioPluginLoader.addModule("mylinkextensions");

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.4. ガイド付きツアーのカスタマイズと無効化

ユーザーの特定ブラウザーへの初回ログイン時に、ガイド付きツアーが表示されます。新規ユーザーに対して auto_launch を有効にできます。

window.OPENSHIFT_CONSTANTS.GUIDED_TOURS.landing_page_tour.auto_launch = true;

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.7. メンバーシップのホワイトリストのカスタマイズ

メンバーシップページのデフォルトのホワイトリストには、adminbasic-useredit などのクラスターロールのサブセットだけでなく、プロジェクト内に定義されているカスタムロールが表示されます。

たとえば、ホワイトリストに、独自のカスタムのクラスターロールセットを追加します。

window.OPENSHIFT_CONSTANTS.MEMBERSHIP_WHITELIST = [
  "admin",
  "basic-user",
  "edit",
  "system:deployer",
  "system:image-builder",
  "system:image-puller",
  "system:image-pusher",
  "view",
  "custom-role-1",
  "custom-role-2"
];

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.10. ナビゲーションメニューの設定

35.10.1. トップナビゲーションドロップダウンメニュー

Web コンソールのトップナビゲーションバーには、ヘルプアイコンとユーザードロップダウンメニューがあります。これらには angular-extension-registry を使用してメニュー項目を追加できます。

以下の拡張ポイントを利用できます。

  • nav-help-dropdown - ヘルプアイコンのドロップダウンメニュー、デスクトップ画面の幅で表示される
  • nav-user-dropdown - ユーザードロップダウンメニュー、デスクトップ画面の幅で表示される
  • nav-dropdown-mobile - トップナビゲーション項目の単一メニュー、モバイル画面の幅で表示される

以下の例では、nav-help-dropdown メニューを <myExtensionModule> の名前で拡張しています。

注記

<myExtensionModule> はプレースホルダー名です。各ドロップダウンメニュー拡張は、今後作成される angular モジュールと競合しないように一意にする必要があります。

angular
  .module('<myExtensionModule>', ['openshiftConsole'])
  .run([
    'extensionRegistry',
    function(extensionRegistry) {
      extensionRegistry
        .add('nav-help-dropdown', function() {
          return [
            {
              type: 'dom',
              node: '<li><a href="http://www.example.com/report" target="_blank">Report a Bug</a></li>'
            }, {
              type: 'dom',
              node: '<li class="divider"></li>'  // If you want a horizontal divider to appear in the menu
            }, {
              type: 'dom',
              node: '<li><a href="http://www.example.com/status" target="_blank">System Status</a></li>'
            }
          ];
        });
    }
  ]);

hawtioPluginLoader.addModule('<myExtensionModule>');

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.10.2. アプリケーションランチャー

トップナビゲーションバーには、他の Web アプリケーションにリンクするオプションのアプリケーションランチャーもあります。このドロップダウンメニューはデフォルトでは空ですが、リンクを追加すると、マストヘッドのヘルプメニューの左側に表示されます。

// Add items to the application launcher dropdown menu.
window.OPENSHIFT_CONSTANTS.APP_LAUNCHER_NAVIGATION = [{
  title: "Dashboard",                    // The text label
  iconClass: "fa fa-dashboard",          // The icon you want to appear
  href: "http://example.com/dashboard",  // Where to go when this item is clicked
  tooltip: 'View dashboard'              // Optional tooltip to display on hover
}, {
  title: "Manage Account",
  iconClass: "pficon pficon-user",
  href: "http://example.com/account",
  tooltip: "Update email address or password."
}];

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.10.3. システムステータスバッジ

トップナビゲーションバーにはオプションのシステムステータスバッジも追加できます。これによって、メンテナンス時期など、システム全体のイベントをユーザーに通知できます。黄色の警告アイコンを使う既存のスタイルをバッジに使用するには、以下の例に従います。

'use strict';

angular
  .module('mysystemstatusbadgeextension', ['openshiftConsole'])
  .run([
    'extensionRegistry',
    function(extensionRegistry) {
      // Replace http://status.example.com/ with your domain
      var system_status_elem = $('<a href="http://status.example.com/"' +
      'target="_blank" class="nav-item-iconic system-status"><span title="' +
      'System Status" class="fa status-icon pficon-warning-triangle-o">' +
      '</span></a>');

      // Add the extension point to the registry so the badge appears
      // To disable the badge, comment this block out
      extensionRegistry
        .add('nav-system-status', function() {
          return [{
            type: 'dom',
            node: system_status_elem
          }];
        });
    }
  ]);

hawtioPluginLoader.addModule('mysystemstatusbadgeextension');

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.10.4. プロジェクトの左ナビゲーション

プロジェクト内でナビゲートするとき、プライマリーおよびセカンダリーナビゲーションのメニューが左側に表示されます。このメニューの構造は定数として定義され、上書きや修正が可能です。

注記

プロジェクトナビゲーションに大幅なカスタマイズを実行すると、ユーザーエクスペリエンスに影響することがあるので、十分に注意して行ってください。既存のナビゲーション項目を変更した場合、今後のアップグレードでこのカスタマイズを更新することが必要になる可能性があります。

// Append a new primary nav item.  This is a simple direct navigation item
// with no secondary menu.
window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION.push({
  label: "Dashboard",           // The text label
  iconClass: "fa fa-dashboard", // The icon you want to appear
  href: "/dashboard"            // Where to go when this nav item is clicked.
                                // Relative URLs are pre-pended with the path
                                // '/project/<project-name>'
});

// Splice a primary nav item to a specific spot in the list.  This primary item has
// a secondary menu.
window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION.splice(2, 0, { // Insert at the third spot
  label: "Git",
  iconClass: "fa fa-code",
  secondaryNavSections: [       // Instead of an href, a sub-menu can be defined
    {
      items: [
        {
          label: "Branches",
          href: "/git/branches",
          prefixes: [
            "/git/branches/"     // Defines prefix URL patterns that will cause
                                 // this nav item to show the active state, so
                                 // tertiary or lower pages show the right context
          ]
        }
      ]
    },
    {
      header: "Collaboration",   // Sections within a sub-menu can have an optional header
      items: [
        {
          label: "Pull Requests",
          href: "/git/pull-requests",
          prefixes: [
            "/git/pull-requests/"
          ]
        }
      ]
    }
  ]
});

// Add a primary item to the top of the list.  This primary item is shown conditionally.
window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION.unshift({
  label: "Getting Started",
  iconClass: "pficon pficon-screen",
  href: "/getting-started",
  prefixes: [                   // Primary nav items can also specify prefixes to trigger
    "/getting-started/"         // active state
  ],
  isValid: function() {         // Primary or secondary items can define an isValid
    return isNewUser;           // function. If present it will be called to test whether
                                // the item should be shown, it should return a boolean
  }
});

// Modify an existing menu item
var applicationsMenu = _.find(window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION, { label: 'Applications' });
applicationsMenu.secondaryNavSections.push({ // Add a new secondary nav section to the Applications menu
  // my secondary nav section
});

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.12. カタログカテゴリーの設定

カタログカテゴリーは、Web コンソールカタログのランディングページ内の項目の表示を整理します。各カテゴリーには 1 つ以上のサブカテゴリーがあります。一致するサブカテゴリータグに含まれるタグがある場合、ビルダーイメージ、テンプレート、またはサービスがサブカテゴリーにグループ化されます。また、1 つの項目を複数のサブカテゴリーに表示することができます。カテゴリーとサブカテゴリーは、1 つ以上の項目がある場合にのみ表示されます。

注記

カタログカテゴリーに大幅なカスタマイズを実行すると、ユーザーエクスペリエンスに影響することがあるので、十分に注意して行ってください。既存のカテゴリー項目を変更した場合、今後のアップグレードでこのカスタマイズを更新することが必要になる可能性があります。

// Find the Languages category.
var category = _.find(window.OPENSHIFT_CONSTANTS.SERVICE_CATALOG_CATEGORIES,
                      { id: 'languages' });
// Add Go as a new subcategory under Languages.
category.subCategories.splice(2,0,{ // Insert at the third spot.
  // Required. Must be unique.
  id: "go",
  // Required.
  label: "Go",
  // Optional. If specified, defines a unique icon for this item.
  icon: "icon-go-gopher",
  // Required. Items matching any tag will appear in this subcategory.
  tags: [
    "go",
    "golang"
  ]
});

// Add a Featured category as the first category tab.
window.OPENSHIFT_CONSTANTS.SERVICE_CATALOG_CATEGORIES.unshift({
  // Required. Must be unique.
  id: "featured",
  // Required
  label: "Featured",
  subCategories: [
    {
      // Required. Must be unique.
      id: "go",
      // Required.
      label: "Go",
      // Optional. If specified, defines a unique icon for this item.
      icon: "icon-go-gopher",
      // Required. Items matching any tag will appear in this subcategory.
      tags: [
        "go",
        "golang"
      ]
    },
    {
      // Required. Must be unique.
      id: "jenkins",
      // Required.
      label: "Jenkins",
      // Optional. If specified, defines a unique icon for this item.
      icon: "icon-jenkins",
      // Required. Items matching any tag will appear in this subcategory.
      tags: [
        "jenkins"
      ]
    }
  ]
});

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.13. クォータ通知メッセージの設定

ユーザーがクォータに達すると、クォータ通知が通知ドロワーに追加されます。カスタムクォータ通知メッセージ (クォータリソースタイプ別) を通知に追加できます。以下は例になります。

Your project is over quota. It is using 200% of 2 cores CPU (Limit). Upgrade
to <a href='https://www.openshift.com'>OpenShift Online Pro</a> if you need
additional resources.

通知の「Upgrade to…​」の部分はカスタムメッセージで、追加リソースへのリンクなどの HTML を指定できます。

注記

クォータメッセージは HTML マークアップなので、特殊文字はすべて HTML 向けに正しくエスケープする必要があります。

window.OPENSHIFT_CONSTANTS.QUOTA_NOTIFICATION_MESSAGE プロパティーを拡張スクリプトに設定して、各リソースについてメッセージをカスタマイズします。

// Set custom notification messages per quota type/key
window.OPENSHIFT_CONSTANTS.QUOTA_NOTIFICATION_MESSAGE = {
  'pods': 'Upgrade to <a href="https://www.openshift.com">OpenShift Online Pro</a> if you need additional resources.',
  'limits.memory': 'Upgrade to <a href="https://www.openshift.com">OpenShift Online Pro</a> if you need additional resources.'
};

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.14. Create From URL namespace ホワイトリストの設定

Create from URL は、明示的に OPENSHIFT_CONSTANTS.CREATE_FROM_URL_WHITELIST に指定される namespace からのイメージストリームまたはテンプレートとのみ機能します。namespace をホワイトリストに追加するには、以下の手順に従います。

注記

openshift はデフォルトでホワイトリストに含まれています。これは削除しないでください。

// Add a namespace containing the image streams and/or templates
window.OPENSHIFT_CONSTANTS.CREATE_FROM_URL_WHITELIST.push(
  'shared-stuff'
);

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.15. Copy Login コマンドの無効化

Web コンソールではユーザーは、現在のアクセストークンなどのログインコマンドをユーザーメニューおよび Command Line Tools ページからクリップボードにコピーできます。この機能は、ユーザーのアクセストークンがコピーされたコマンドに含まれないように変更することができます。

// Do not copy the user's access token in the copy login command.
window.OPENSHIFT_CONSTANTS.DISABLE_COPY_LOGIN_COMMAND = true;

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

35.15.1. ワイルドカードルートの有効化

ワイルドカードルートをルーターで有効にした場合、Web コンソールでもワイルドカードルートを有効にできます。これによりユーザーはルートを作成するときに、*.example.com などのアスタリスクで始まるホスト名を入力できます。ワイルドカードルートを有効にするには、以下を実行します。

window.OPENSHIFT_CONSTANTS.DISABLE_WILDCARD_ROUTES = false;

拡張スクリプトとスタイルシートの読み込み」で説明されているようにスクリプトを追加します。

HAProxy をワイルドカードルートを許可するように設定する方法についてはこちらを参照してください。

35.16. ログインページのカスタマイズ

Web コンソールのログインページおよびログインプロバイダー選択ページも変更できます。以下のコマンドを実行して、変更可能なテンプレートを作成します。

$ oc adm create-login-template > login-template.html
$ oc adm create-provider-selection-template > provider-selection-template.html

ファイルを編集して、スタイルを変更するか、または内容を追加します。ただし、波括弧内の必須パラメーターを削除しないよう注意してください。

カスタムログインページまたはプロバイダー選択ページを使用するには、以下のオプションをマスター設定ファイルに設定します。

oauthConfig:
  ...
  templates:
    login: /path/to/login-template.html
    providerSelection: /path/to/provider-selection-template.html

相対パスは、マスター設定ファイルを基準にして解決されます。この設定を変更したらサーバーを再起動する必要があります。

複数のログインプロバイダーが設定されている場合、または master-config.yaml ファイルの alwaysShowProviderSelection オプションが true に設定されている場合、OpenShift Container Platform へのユーザーのトークンが期限切れになるたびに、このカスタムページが他のタスクに進む前にユーザーに表示されます。

35.16.1. 使用例

サービス利用規約情報はカスタムログインページを使用して作成できます。このようなページは、GitHub や Google などのサードパーティーログインプロバイダーを使用している場合にも、ユーザーが信頼し、予想できるブランドのページを提示して、その後にユーザーを認証プロバイダーにリダイレクトする際に役立ちます。

35.17. OAuth エラーページのカスタマイズ

認証中にエラーが発生した場合に表示されるページを変更できます。

  1. 以下のコマンドを実行して、変更可能なテンプレートを作成します。

    $ oc adm create-error-template > error-template.html
  2. ファイルを編集して、スタイルを変更するか、または内容を追加します。

    テンプレートで Error 変数および ErrorCode 変数を使用できます。カスタムエラーページを使用するには、以下のオプションをマスター設定ファイルに設定します。

    oauthConfig:
      ...
      templates:
        error: /path/to/error-template.html

    相対パスは、マスター設定ファイルを基準にして解決されます。

  3. この設定を変更したらサーバーを再起動する必要があります。

35.18. ログアウト URL の変更

webconsole-config ConfigMap の clusterInfo.logoutPublicURL パラメーターを変更すると、コンソールをログアウトしたときにコンソールユーザーに表示される場所を変更できます。

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

以下の例では、ログアウト URL を https://www.example.com/logout に変更しています。

apiVersion: v1
kind: ConfigMap
data:
  webconsole-config.yaml: |
    apiVersion: webconsole.config.openshift.io/v1
    clusterInfo:
      [...]
      logoutPublicURL: "https://www.example.com/logout"
    [...]

これは、要求ヘッダーおよび OAuth または OpenID アイデンティティープロバイダーで認証する場合に便利です。この場合、外部 URL にアクセスしてシングルサインオンセッションを破棄する必要があるからです。

35.19. Ansible による Web コンソールカスタマイズの設定

通常インストール (Advanced installation) の実行中に、Web コンソールへの多数の変更を以下のパラメーターを使用して設定できます。これらのパラメーターはインベントリーファイルで設定可能です。

Ansible による Web コンソールカスタマイズの例

# Configure `clusterInfo.logoutPublicURL` in the web console configuration
# See: https://docs.openshift.com/enterprise/latest/install_config/web_console_customization.html#changing-the-logout-url
#openshift_master_logout_url=https://example.com/logout

# Configure extension scripts for web console customization
# See: https://docs.openshift.com/enterprise/latest/install_config/web_console_customization.html#loading-custom-scripts-and-stylesheets
#openshift_web_console_extension_script_urls=['https://example.com/scripts/menu-customization.js','https://example.com/scripts/nav-customization.js']

# Configure extension stylesheets for web console customization
# See: https://docs.openshift.com/enterprise/latest/install_config/web_console_customization.html#loading-custom-scripts-and-stylesheets
#openshift_web_console_extension_stylesheet_urls=['https://example.com/styles/logo.css','https://example.com/styles/custom-styles.css']

# Configure a custom login template in the master config
# See: https://docs.openshift.com/enterprise/latest/install_config/web_console_customization.html#customizing-the-login-page
#openshift_master_oauth_templates={'login': '/path/to/login-template.html'}

# Configure `clusterInfo.metricsPublicURL` in the web console configuration for cluster metrics. Ansible is also able to configure metrics for you.
# See: https://docs.openshift.com/enterprise/latest/install_config/cluster_metrics.html
#openshift_master_metrics_public_url=https://hawkular-metrics.example.com/hawkular/metrics

# Configure `clusterInfo.loggingPublicURL` in the web console configuration for aggregate logging. Ansible is also able to install logging for you.
# See: https://docs.openshift.com/enterprise/latest/install_config/aggregate_logging.html
#openshift_master_logging_public_url=https://kibana.example.com

35.20. Web コンソール URL ポートおよび証明書の変更

ユーザーが Web コンソール URL にアクセスする際にカスタム証明書が提供されるようにするには、証明書および URL を master-config.yaml ファイルの namedCertificates セクションに追加します。詳細は、「Web コンソールまたは CLI のカスタム証明書の設定」を参照してください。

Web コンソールのリダイレクト URL を設定または変更するには、openshift-web-console oauthclient を変更します。

$ oc edit oauthclient openshift-web-console

ユーザーが適切にリダイレクトされるようにするには、openshift-web-console configmapPublicUrls を更新します。

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

次に、consolePublicURL の値を更新します。

Red Hat logoGithubRedditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

© 2024 Red Hat, Inc.