7.4. 動的プラグインの例

手順

1. 新しいタブでプラグインを作成するためのテンプレートを含む console-plugin-template リポジトリーにアクセスします。

   重要

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

2. Use this template Create new repository をクリックして、テンプレートの GitHub リポジトリーを作成します。
3. プラグインの名前で新しいリポジトリーの名前を変更します。
4. コードを編集できるように、新しいリポジトリーのクローンをローカルマシンに作成します。

5. package.json ファイルを編集して、プラグインのメタデータを consolePlugin 宣言に追加します。以下に例を示します。

   Copy to Clipboard Toggle word wrap

   "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 ファイルに以下を追加します。

   Copy to Clipboard Toggle word wrap

   {
     "type": "console.tab/horizontalNav",
     "properties": {
       "page": {
         "name": "Example Tab",
         "href": "example"
       },
       "model": {
         "group": "core",
         "version": "v1",
         "kind": "Pod"
       },
       "component": { "$codeRef": "ExampleTab" }
     }
   }

7. package.json ファイルを編集して以下の変更を追加します。

   Copy to Clipboard Toggle word wrap

           "exposedModules": {
               "ExamplePage": "./components/ExamplePage",
               "ExampleTab": "./components/ExampleTab"
           }

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

   Copy to Clipboard Toggle word wrap

   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 チャートを、新しい namespace または -n コマンドラインオプションで指定された既存の namespace にインストールします。次のコマンドを使用して、plugin.image パラメーター内のイメージの場所を指定します。

   Copy to Clipboard Toggle word wrap

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

   注記

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