第7章 動的プラグイン
7.1. 動的プラグインの概要
7.1.1. 動的プラグインについて
動的プラグインは実行時にリモートのソースからロードされ、解釈されます。動的プラグインをコンソールに提供して公開する 1 つの方法は、OLM Operator を使用することです。OLM Operator は、プラグインをホストする HTTP サーバーを備えたプラットフォーム上にデプロイメントを作成し、Kubernetes サービスを使用してそれを公開します。
動的プラグインを使用すると、実行時にカスタムページやその他の拡張機能をコンソールユーザーインターフェイスに追加できます。ConsolePlugin
カスタムリソースはコンソールにプラグインを登録し、クラスター管理者はコンソールの Operator 設定でプラグインを有効にします。
7.1.2. 主な特長
動的プラグインを使用すると、以下のカスタマイズを OpenShift Container Platform エクスペリエンスに設定することができます。
- カスタムページの追加。
- 管理者と開発者を超えたパースペクティブを追加します。
- ナビゲーション項目の追加。
- リソースページへのタブおよびアクションの追加。
7.1.3. 全般的なガイドライン
プラグインの作成時には、以下の一般的なガイドラインに従ってください。
-
プラグインをビルドして実行するには、
Node.js
とyarn
が必要です。 -
CSS クラス名の前にプラグイン名を付けて、競合を回避します。例:
my-plugin__heading
およびmy-plugin_\_icon
- 他のコンソールページとの一貫したルック、フィール、および動作を維持します。
プラグインの作成時には、react-i18next のローカリゼーションガイドラインに従ってください。以下の例のように
useTranslation
フックを使用できます。conster Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };
- 要素セレクターなど、プラグインコンポーネント外のマークアップに影響を与える可能性のあるセレクターは避けてください。これらは API ではなく、変更される可能性があります。これらを使用すると、プラグインが破損する可能性があります。プラグインコンポーネント外のマークアップに影響を与える可能性のある要素セレクターなどのセレクターを回避します。
-
プラグイン Web サーバーが提供するすべてのアセットの
Content-Type
応答ヘッダーを使用して、有効な JavaScript Multipurpose Internet Mail Extension (MIME) タイプを指定します。各プラグインデプロイメントには、そのプラグインの生成済みアセットをホストする Web サーバーが含まれている必要があります。 - Webpack バージョン 5 以降を使用して、Webpack でプラグインをビルドします。
-
競合を避けるために、CSS クラス名の前にプラグイン名を付けます。例:
my-plugin__heading
およびmy-plugin_\_icon
- 他のコンソールページと一貫性のある外観、操作性、動作を維持します。
- 要素セレクターなど、プラグインコンポーネント外部のマークアップに影響を与える可能性のあるセレクターは避けてください。これらは API ではなく、変更される可能性があります。
-
プラグイン Web サーバーによって提供されるすべてのアセットに対して、
Content-Type
応答ヘッダーを使用して有効な JavaScript Multipurpose Internet Mail Extension (MIME) タイプを指定する必要があります。各プラグインデプロイメントには、そのプラグインの生成済みアセットをホストする Web サーバーが含まれている必要があります。
PatternFly ガイドライン
プラグインを作成する場合は、PatternFly の使用に関する以下のガイドラインに従ってください。
PatternFly コンポーネンツと PatternFly CSS 変数を使用します。コア PatternFly コンポーネントは SDK から利用できます。PatternFly コンポーネントと変数を使用すると、今後のコンソールバージョンでプラグインが一貫しているように見えます。
- OpenShift Container Platform バージョン 4.14 以前を使用している場合は、Patternfly 4.x を使用します。
- OpenShift Container Platform 4.15 以降を使用している場合は、Patternfly 5.x を使用します。
- PatternFly’s accessibility fundamentals に従って、プラグインにアクセスできるようにします。
-
Bootstrap や Tailwind などの他の CSS ライブラリーは使用しないでください。これらは PatternFly と競合し、コンソールの他の部分とマッチしない可能性があります。プラグインには、基本の PatternFly スタイルに加え、評価対象のユーザーインターフェイスに固有のスタイルのみを含めます。
@patternfly/react-styles/*/.css
などのスタイルや@patternfly/patternfly
パッケージからのスタイルは、プラグインにインポートしないでください。 - コンソールアプリケーションは、サポートされているすべての PatternFly バージョンの基本スタイルをロードします。
7.1.3.1. react-i18next でメッセージを翻訳する
この プラグインテンプレート は、react-i18next を使用してメッセージを翻訳する方法を示しています。
前提条件
- プラグインテンプレートをローカルに複製する必要があります。
- オプション: プラグインをローカルでテストするには、コンテナー内で OpenShift Container Platform Web コンソールを実行します。Docker または Podman 3.2.0 以降を使用できます。
手順
名前の競合を避けるために、名前の前に
plugin__
を付けます。このプラグインテンプレートは、デフォルトでplugin__console-plugin-template
namespace を使用します。プラグインの名前 (例:plugin__my-plugin)
を変更する場合は更新する必要があります。たとえば、useTranslation
フックを使用できます。conster Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };
重要i18n
namespace をConsolePlugin
リソースの名前と一致させる必要があります。必要な動作に応じて
spec.i18n.loadType
フィールドを設定します。例7.1
plugin__console-demo-plugin
spec: backend: service: basePath: / name: console-demo-plugin namespace: console-demo-plugin port: 9001 type: Service displayName: OpenShift Console Demo Plugin i18n: loadType: Preload 1
- 1
- ロード中、動的プラグインの後に、
i18n
namespace からプラグインのすべてのローカリゼーションリソースを読み込みます。
console-extensions.json
内のラベルに%plugin__console-plugin-template~My Label%
という形式を使用します。コンソールは、値をplugin__console-plugin-template
namespace の現在の言語のメッセージに置き換えます。以下に例を示します。{ "type": "console.navigation/section", "properties": { "id": "admin-demo-section", "perspective": "admin", "name": "%plugin__console-plugin-template~Plugin Template%" } }
i18next-parser の TypeScript ファイルにコメントを追加して、
console-extensions.json
からのメッセージをメッセージカタログに追加します。以下に例を示します。// t('plugin__console-demo-plugin~Demo Plugin')
メッセージを追加または変更するときにプラグインテンプレートの
locales
フォルダー内の JSON ファイルを更新するために、次のコマンドを実行します。$ yarn i18n