7.4. 動的プラグインの例

手順

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

   重要

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

2. Use this template Create 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

   注記

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