第7章 動的プラグイン
7.1. 動的プラグインの概要
7.1.1. 動的プラグインについて
動的プラグインは、クラスター上のワークロードとしてデプロイされます。これを使用すると、実行時にカスタムページやその他の拡張機能をコンソールユーザーインターフェイスに追加できます。ConsolePlugin カスタムリソースはコンソールと共にプラグインを登録し、クラスター管理者は console-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 サーバーが含まれている必要があります。
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 バージョンの基本スタイルをロードします。
