7.4. 動的プラグインの例

例を実行する前に、動的プラグイン開発 の手順に従って、プラグインが機能していることを確認してください。

7.4.1. Pod ページへのタブの追加

OpenShift Container Platform Web コンソールに対して行うことができるさまざまなカスタマイズがあります。新しい OpenShift Console 動的プラグインを作成するように環境をセットアップし、プラグインの拡張例として Pod details ページにタブを追加します。

注記

OpenShift Container Platform Web コンソールは、ログインしているクラスターに接続されているコンテナーで実行されます。独自のプラグインを作成する前にプラグインをテストするための情報については、「動的プラグインの開発」を参照してください。

前提条件

  • Node.js がインストールされていることを確認します。
  • yarn がインストールされていることを確認します。

手順

  1. 新しいタブで、console-plugin-template リポジトリーを開きます。このリポジトリーには、新しいタブでプラグインを作成するためのテンプレートが含まれています。

    重要

    カスタムプラグインコードは、Red Hat ではサポートされていません。プラグインで利用できるのは、共同コミュニティーのサポート のみです。

  2. Use this templateCreate new repository をクリックして、テンプレートの GitHub リポジトリーを作成します。
  3. プラグインの名前で新しいリポジトリーの名前を変更します。
  4. コードを編集できるように、新しいリポジトリーのクローンをローカルマシンに作成します。
  5. package.json ファイルを編集して、プラグインのメタデータを consolePlugin 宣言に追加します。以下に例を示します。

    "consolePlugin": {
      "name": "my-plugin", 1
      "version": "0.0.1", 2
      "displayName": "My Plugin", 3
      "description": "Enjoy this shiny, new console plugin!", 4
      "exposedModules": {
        "ExamplePage": "./components/ExamplePage"
      },
      "dependencies": {
        "@console/pluginAPI": "/*"
      }
    }
    1
    プラグインの名前を更新します。
    2
    バージョンを更新します。
    3
    プラグインの表示名を更新します。
    4
    プラグインの概要を使用して、説明を更新します。
  6. console-extensions.json ファイルに以下を追加します。

    {
      "type": "console.tab/horizontalNav",
      "properties": {
        "page": {
          "name": "Example Tab",
          "href": "example"
        },
        "model": {
          "group": "core",
          "version": "v1",
          "kind": "Pod"
        },
        "component": { "$codeRef": "ExampleTab" }
      }
    }
  7. package.json ファイルを編集して以下の変更を追加します。

            "exposedModules": {
                "ExamplePage": "./components/ExamplePage",
                "ExampleTab": "./components/ExampleTab"
            }
  8. 新しいファイル src/components/ExampleTab.tsx を作成し、以下のスクリプトを追加することで、Pod ページの新規カスタムタブに表示されるメッセージを作成します。

    import * as React from 'react';
    
    export default function ExampleTab() {
        return (
            <p>This is a custom tab added to a resource using a dynamic plugin.</p>
        );
    }
  9. Helm リリース名としてプラグインの名前を使用して Helm チャートを新しい名前空間または -n コマンドラインオプションで指定された既存の名前空間にインストールし、プラグインをデプロイするためのイメージの場所を plugin.image パラメーター内に指定します。次のコマンドを使用してクラスター上で実行します。

    $ helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
    注記

    クラスターへのプラグインのデプロイの詳細は、「クラスターへのプラグインのデプロイ」を参照してください。

検証

  • Pod ページにアクセスして、追加されたタブを表示します。