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": "/*"
     }
   }

   Copy to Clipboard Toggle word wrap

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

   Copy to Clipboard Toggle word wrap

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

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

   Copy to Clipboard Toggle word wrap

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>
       );
   }

   Copy to Clipboard Toggle word wrap

9. プラグインをクラスターにデプロイするには、プラグインの名前を Helm リリース名として Helm チャートを、新しい namespace または -n コマンドラインオプションで指定された既存の namespace にインストールします。次のコマンドを使用して、plugin.image パラメーター内のイメージの場所を指定します。

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

   Copy to Clipboard Toggle word wrap
   注記

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