7.4. 動的プラグインの例
例を実行する前に、動的プラグイン開発 の手順に従って、プラグインが機能していることを確認してください。
7.4.1. Pod ページへのタブの追加
OpenShift Container Platform Web コンソールに対して行うことができるさまざまなカスタマイズがあります。以下の手順では、サンプルとしてプラグインにタブを Pod details ページに追加します。
OpenShift Container Platform Web コンソールは、ログインしているクラスターに接続されているコンテナーで実行されます。独自のプラグインを作成する前にプラグインをテストするための情報は、「動的プラグインの開発」を参照してください。
手順
新しいタブでプラグインを作成するためのテンプレートを含む
console-plugin-template
リポジトリーにアクセスします。重要カスタムプラグインコードは、Red Hat ではサポートされていません。プラグインで利用できるのは、共同コミュニティーのサポート のみです。
-
Use this template
Create new repository をクリックして、テンプレートの GitHub リポジトリーを作成します。 - プラグインの名前で新しいリポジトリーの名前を変更します。
- コードを編集できるように、新しいリポジトリーのクローンをローカルマシンに作成します。
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": "/*" } }
console-extensions.json
ファイルに以下を追加します。{ "type": "console.tab/horizontalNav", "properties": { "page": { "name": "Example Tab", "href": "example" }, "model": { "group": "core", "version": "v1", "kind": "Pod" }, "component": { "$codeRef": "ExampleTab" } } }
package.json
ファイルを編集して以下の変更を追加します。"exposedModules": { "ExamplePage": "./components/ExamplePage", "ExampleTab": "./components/ExampleTab" }
新しいファイル
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> ); }
プラグインをクラスターにデプロイするには、プラグインの名前を 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
注記クラスターへのプラグインのデプロイの詳細は、「クラスターへのプラグインのデプロイ」を参照してください。
検証
- Pod ページに移動し、追加されたタブを表示します。