7.5. 動的プラグイン参照

PDF

プラグインのカスタマイズを可能にするエクステンションを追加できます。これらのエクステンションは、ランタイム時にコンソールにロードされます。

7.5.1. 動的プラグインエクステンションのタイプ

`console.action/filter`

ActionFilter を使用してアクションを絞り込むことができます。

名前値のタイプ任意説明

contextId

string

いいえ

コンテキスト ID は、提供したアクションのスコープをアプリケーションの特定のエリアに限定するのに役立ちますたとえば、トポロジー および helm などがあります。

filter

CodeRef<(スコープ: any、action: Action) ⇒ boolean>

いいえ

一部の条件に基づいてアクションをフィルターする関数。

scope: アクションを指定するスコープ。Horizontal Pod Autoscaler (HPA) のデプロイメントから ModifyCount アクションを削除する必要がある場合には、フックが必要になることがあります。

`console.action/group`

ActionGroup は、サブメニューに指定可能なアクショングループを提供します。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	アクションの選択を識別するための ID。
`label`	`string`	はい	UI に表示されるラベル。サブメニューに必要です。
`submenu`	`boolean`	はい	このグループをサブメニューとして表示するかどうか。
`insertBefore`	`string` \| `string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`insertBefore` 値が優先されます。

`console.action/provider`

ActionProvider は、特定のコンテキストに対するアクションのリストを返すフックを提供します。

名前	値のタイプ	任意	説明
`contextId`	`string`	いいえ	コンテキスト ID は、提供したアクションのスコープをアプリケーションの特定のエリアに限定するのに役立ちますたとえば、`トポロジー` および `helm` などがあります。
`provider`	`CodeRef<ExtensionHook<Action[], any>>`	いいえ	指定のスコープのアクションを返す React フック。`contextId` = `resource` の場合には、スコープは常に Kubernetes リソースオブジェクトになります。

`console.action/resource-provider`

ResourceActionProvider は、特定のリソースモデルに対するアクションのリストを返すフックを提供します。

名前	値のタイプ	任意	説明
`model`	`ExtensionK8sKindVersionModel`	いいえ	このプロバイダーがアクションを提供するモデル。
`provider`	`CodeRef<ExtensionHook<Action[], any>>`	いいえ	指定のリソースモデルに対するアクションを返す反応フック

`console.alert-action`

このエクステンションを使用すると、特定の Prometheus アラートが rule.name 値に基づいてコンソールで観察された場合に、特定のアクションをトリガーできます。

名前	値のタイプ	任意	説明
`alert`	`string`	いいえ	`alert.rule.name` プロパティーで定義されたアラート名
`text`	`string`	いいえ
`action`	`CodeRef<(alert: any) ⇒ void>`	いいえ	副次的な影響を実行する関数

`console.catalog/item-filter`

このエクステンションは、特定のカタログ項目をフィルタリングできるハンドラーを追加するプラグインに使用できます。たとえばプラグインは、特定のプロバイダーからの Helm チャートをフィルタリングするフィルターを追加できます。

名前	値のタイプ	任意	説明
`catalogId`	`string` \| `string[]`	いいえ	このプロバイダーが提供するカタログの一意の識別子。
`type`	`string`	いいえ	カタログ項目タイプのタイプ ID。
`filter`	`CodeRef<(item: CatalogItem) ⇒ boolean>`	いいえ	特定のタイプの項目をフィルタリングします。Value は、`CatalogItem[]` を受け取り、フィルター条件に基づいてサブセットを返す関数です。

`console.catalog/item-metadata`

このエクステンションを使用すると、特定のカタログ項目に追加のメタデータを追加するプロバイダーを追加できます。

名前	値のタイプ	任意	説明
`catalogId`	`string` \| `string[]`	いいえ	このプロバイダーが提供するカタログの一意の識別子。
`type`	`string`	いいえ	カタログ項目タイプのタイプ ID。
`provider`	`CodeRef<ExtensionHook<CatalogItemMetadataProviderFunction, CatalogExtensionHookOptions>>`	いいえ	特定のタイプのカタログ項目にメタデータを提供するために使用される関数を返すフック。

`console.catalog/item-provider`

このエクステンションを使用すると、プラグインはカタログ項目タイプのプロバイダーを追加できます。たとえば、Helm プラグインは、すべての Helm チャートを取得するプロバイダーを追加できます。このエクステンションを他のプラグインで使用して、特定のカタログ項目タイプをさらに追加することもできます。

名前	値のタイプ	任意	説明
`catalogId`	`string` \| `string[]`	いいえ	このプロバイダーが提供するカタログの一意の識別子。
`type`	`string`	いいえ	カタログ項目タイプのタイプ ID。
`title`	`string`	いいえ	カタログ項目プロバイダーのタイトル
`provider`	`CodeRef<ExtensionHook<CatalogItem<any>[], CatalogExtensionHookOptions>>`	いいえ	項目を取得し、これをカタログ用に正規化します。値は反応効果フックです。
`priority`	`number`	はい	このプロバイダーの優先順位。デフォルトは `0` です。優先度の高いプロバイダーは、他のプロバイダーが提供するカタログ項目を上書きする可能性があります。

`console.catalog/item-type`

このエクステンションを使用すると、プラグインはカタログ項目の新しいタイプを追加できます。たとえば Helm プラグインは、開発者カタログに追加する新しいカタログ項目タイプを HelmCharts として定義できます。

名前	値のタイプ	任意	説明
`type`	`string`	いいえ	カタログ項目をタイプ。
`title`	`string`	いいえ	カタログ項目のタイトル。
`catalogDescription`	`string` \| `CodeRef<React.ReactNode>`	はい	カタログに固有のタイプの説明。
`typeDescription`	`string`	はい	カタログ項目タイプの説明。
`filters`	`CatalogItemAttribute[]`	はい	カタログ項目に固有のカスタムフィルター。
`groupings`	`CatalogItemAttribute[]`	はい	カタログ項目に固有のカスタムグルーピング。

`console.catalog/item-type-metadata`

このエクステンションを使用すると、プラグインは任意のカタログ項目タイプのカスタムフィルターやグループ化などのメタデータを追加できます。たとえばプラグインは、チャートプロバイダーに基づきフィルタリングできる HelmCharts のカスタムフィルターをアタッチできます。

名前	値のタイプ	任意	説明
`type`	`string`	いいえ	カタログ項目をタイプ。
`filters`	`CatalogItemAttribute[]`	はい	カタログ項目に固有のカスタムフィルター。
`groupings`	`CatalogItemAttribute[]`	はい	カタログ項目に固有のカスタムグルーピング。

`console.cluster-overview/inventory-item`

新しいインベントリー項目をクラスターの概要ページに追加します。

名前	値のタイプ	任意	説明
`component`	`CodeRef<React.ComponentType<{}>>`	いいえ	レンダリングされるコンポーネント。

`console.cluster-overview/multiline-utilization-item`

新しいクラスター概要のマルチライン使用状況項目を追加します。

名前	値のタイプ	任意	説明
`title`	`string`	いいえ	使用状況項目のタイトル。
`getUtilizationQueries`	`CodeRef<GetMultilineQueries>`	いいえ	Prometheus 使用状況クエリー。
`humanize`	`CodeRef<Humanize>`	いいえ	Prometheus データを人間が判読できる形式に変換します。
`TopConsumerPopovers`	`CodeRef<React.ComponentType<TopConsumerPopoverProps>[]>`	はい	プレーン値の代わりに Top コンシューマーポップオーバーを表示します。

`console.cluster-overview/utilization-item`

新しいクラスター概要の使用状況項目を追加します。

名前	値のタイプ	任意	説明
`title`	`string`	いいえ	使用状況項目のタイトル。
`getUtilizationQuery`	`CodeRef<GetQuery>`	いいえ	Prometheus 使用状況クエリー。
`humanize`	`CodeRef<Humanize>`	いいえ	Prometheus データを人間が判読できる形式に変換します。
`getTotalQuery`	`CodeRef<GetQuery>`	はい	Prometheus 合計のクエリー。
`getRequestQuery`	`CodeRef<GetQuery>`	はい	Prometheus 要求のクエリー。
`getLimitQuery`	`CodeRef<GetQuery>`	はい	Prometheus 制限のクエリー。
`TopConsumerPopover`	`CodeRef<React.ComponentType<TopConsumerPopoverProps>>`	はい	プレーン値の代わりに Top コンシューマーポップオーバーを表示します。

`console.context-provider`

新しい React コンテキストプロバイダーを Web コンソールのアプリケーションルートに追加します。

名前	値のタイプ	任意	説明
`provider`	`CodeRef<Provider<T>>`	いいえ	Context プロバイダーコンポーネント。
`useValueHook`	`CodeRef<() ⇒ T>`	いいえ	コンテキスト値のフック。

`console.dashboards/card`

新しいダッシュボードカードを追加します。

名前	値のタイプ	任意	説明
`tab`	`string`	いいえ	カードを追加するダッシュボードタブの ID。
`position`	`'LEFT' \| 'RIGHT' \| 'MAIN'`	いいえ	ダッシュボードのカードのグリッド位置。
`component`	`CodeRef<React.ComponentType<{}>>`	いいえ	ダッシュボードカードのコンポーネント。
`span`	`OverviewCardSpan`	はい	列内のカードの垂直スパン。小さな画面では無視され、デフォルトは `12` です。

`console.dashboards/custom/overview/detail/item`

Overview ダッシュボードの Details カードに項目を追加します。

名前	値のタイプ	任意	説明
`title`	`string`	いいえ	Details カードのタイトル
`component`	`CodeRef<React.ComponentType<{}>>`	いいえ	OverviewDetailItem コンポーネントによってレンダリングされる値
`valueClassName`	`string`	はい	className の値
`isLoading`	`CodeRef<() ⇒ boolean>`	はい	コンポーネントのロード中の状態を返す関数
`error`	`CodeRef<() ⇒ string>`	はい	コンポーネントごとに表示するエラーを返す関数

`console.dashboards/overview/activity/resource`

Kubernetes リソースの監視に基づいてアクティビティーをトリガーしている Overview ダッシュボードの Activity カードにアクティビティーを追加します。

名前	値のタイプ	任意	説明
`k8sResource`	`CodeRef<FirehoseResource & { isList: true; }>`	いいえ	置き換える使用状況項目。
`component`	`CodeRef<React.ComponentType<K8sActivityProps<T>>>`	いいえ	アクションコンポーネント。
`isActivity`	`CodeRef<(resource: T) ⇒ boolean>`	はい	指定のリソースがアクションを表すかどうかを判断する関数。定義されていない場合は、すべてのリソースがアクティビティーを表します。
`getTimestamp`	`CodeRef<(resource: T) ⇒ Date>`	はい	指定のアクションのタイムスタンプで、順序付けに使用されます。

`console.dashboards/overview/health/operator`

ステータスのソースが Kubernetes REST API である Overview ダッシュボードのステータスカードに health サブシステムを追加します。

名前	値のタイプ	任意	説明
`title`	`string`	いいえ	ポップアップメニューの Operators セクションのタイトル。
`resources`	`CodeRef<FirehoseResource[]>`	いいえ	フェッチされ、`healthHandler` に渡される Kubernetes リソース。
`getOperatorsWithStatuses`	`CodeRef<GetOperatorsWithStatuses<T>>`	はい	Operator のステータスを解決します。
`operatorRowLoader`	`CodeRef<React.ComponentType<OperatorRowProps<T>>>`	はい	ポップアップ行コンポーネントのローダー。
`viewAllLink`	`string`	はい	すべてのリソースページへのリンク。指定しない場合は、resources prop から最初のリソースのリストページが使用されます。

`console.dashboards/overview/health/prometheus`

ステータスのソースが Prometheus である Overview ダッシュボードのステータスカードに health サブシステムを追加します。

名前	値のタイプ	任意	説明
`title`	`string`	いいえ	サブシステムの表示名。
`queries`	`string[]`	いいえ	Prometheus クエリー
`healthHandler`	`CodeRef<PrometheusHealthHandler>`	いいえ	サブシステムの健全性を解決します。
`additionalResource`	`CodeRef<FirehoseResource>`	はい	フェッチされ、`healthHandler` に渡される追加のリソース。
`popupComponent`	`CodeRef<React.ComponentType<PrometheusHealthPopupProps>>`	はい	ポップアップメニューコンテンツのローダー。定義された場合、health 項目はリンクとして表され、指定のコンテンツを含むポップアップメニューが開きます。
`popupTitle`	`string`	はい	ポップオーバーのタイトル。
`disallowedControlPlaneTopology`	`string[]`	はい	サブシステムを非表示にする必要のあるコントロールプレーントポロジー。

`console.dashboards/overview/health/resource`

ステータスのソースが Kubernetes リソースである概要ダッシュボードのステータスカードに health サブシステムを追加します。

名前	値のタイプ	任意	説明
`title`	`string`	いいえ	サブシステムの表示名。
`resources`	`CodeRef<WatchK8sResources<T>>`	いいえ	フェッチされ、`healthHandler` に渡される Kubernetes リソース。
`healthHandler`	`CodeRef<ResourceHealthHandler<T>>`	いいえ	サブシステムの健全性を解決します。
`popupComponent`	`CodeRef<WatchK8sResults<T>>`	はい	ポップアップメニューコンテンツのローダー。定義された場合、health 項目はリンクとして表され、指定のコンテンツを含むポップアップメニューが開きます。
`popupTitle`	`string`	はい	ポップオーバーのタイトル。

`console.dashboards/overview/health/url`

ステータスのソースが Kubernetes REST API である概要ダッシュボードのステータスカードに health サブシステムを追加します。

名前	値のタイプ	任意	説明
`title`	`string`	いいえ	サブシステムの表示名。
`url`	`string`	いいえ	データの取得元の URL。これには、ベース Kubernetes URL が接頭辞として付けられます。
`healthHandler`	`CodeRef<URLHealthHandler<T, K8sResourceCommon \| K8sResourceCommon[]>>`	いいえ	サブシステムの健全性を解決します。
`additionalResource`	`CodeRef<FirehoseResource>`	はい	フェッチされ、`healthHandler` に渡される追加のリソース。
`popupComponent`	`CodeRef<React.ComponentType<{ healthResult?: T; healthResultError?: any; k8sResult?: FirehoseResult<R>; }>>`	はい	ポップアップコンテンツのローダー。定義された場合、health 項目は指定のコンテンツのポップアップが開くリンクとして表示されます。
`popupTitle`	`string`	はい	ポップオーバーのタイトル。

`console.dashboards/overview/inventory/item`

概要インベントリーカードにリソースタイルを追加します。

名前	値のタイプ	任意	説明
`model`	`CodeRef<T>`	いいえ	取得する `resource` のモデル。モデルの `label` または `abbr` の取得に使用します。
`mapper`	`CodeRef<StatusGroupMapper<T, R>>`	はい	さまざまなステータスをグループにマッピングする関数。
`additionalResources`	`CodeRef<WatchK8sResources<R>>`	はい	フェッチされ、`mapper` 関数に渡される追加のリソース。

`console.dashboards/overview/inventory/item/group`

インベントリーのステータスグループを追加します。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	ステータスグループの ID。
`icon`	`CodeRef<React.ReactElement<any, string` \| `React.JSXElementConstructor<any>>>`	いいえ	ステータスグループアイコンを表す React コンポーネント。

`console.dashboards/overview/inventory/item/replacement`

概要のインベントリーカードを置き換えます。

名前	値のタイプ	任意	説明
`model`	`CodeRef<T>`	いいえ	取得する `resource` のモデル。モデルの `label` または `abbr` の取得に使用します。
`mapper`	`CodeRef<StatusGroupMapper<T, R>>`	はい	さまざまなステータスをグループにマッピングする関数。
`additionalResources`	`CodeRef<WatchK8sResources<R>>`	はい	フェッチされ、`mapper` 関数に渡される追加のリソース。

`console.dashboards/overview/prometheus/activity/resource`

Kubernetes リソースの監視に基づいてアクティビティーをトリガーしている Prometheus Overview ダッシュボードの Activity カードにアクティビティーを追加します。

名前	値のタイプ	任意	説明
`queries`	`string[]`	いいえ	監視するクエリー。
`component`	`CodeRef<React.ComponentType<PrometheusActivityProps>>`	いいえ	アクションコンポーネント。
`isActivity`	`CodeRef<(results: PrometheusResponse[]) ⇒ boolean>`	はい	指定のリソースがアクションを表すかどうかを判断する関数。定義されていない場合は、すべてのリソースがアクティビティーを表します。

`console.dashboards/project/overview/item`

プロジェクトの概要インベントリーカードにリソースタイルを追加します。

名前	値のタイプ	任意	説明
`model`	`CodeRef<T>`	いいえ	取得する `resource` のモデル。モデルの `label` または `abbr` の取得に使用します。
`mapper`	`CodeRef<StatusGroupMapper<T, R>>`	はい	さまざまなステータスをグループにマッピングする関数。
`additionalResources`	`CodeRef<WatchK8sResources<R>>`	はい	フェッチされ、`mapper` 関数に渡される追加のリソース。

`console.dashboards/tab`

Overview タブの後に置かれた新規ダッシュボードタブを追加します。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	このタブにカードを追加する場合にタブリンク `href` として使用される一意のタブ ID。
`navSection`	`'home' \| 'storage'`	いいえ	タブが属するナビゲーションセクション。
`title`	`string`	いいえ	タブのタイトル。

`console.file-upload`

このエクステンションを使用すると、特定のファイル拡張子に対するファイルドロップアクションのハンドラーを追加できます。

名前	値のタイプ	任意	説明
`fileExtensions`	`string[]`	いいえ	サポートされるファイル拡張子。
`handler`	`CodeRef<FileUploadHandler>`	いいえ	ファイルドロップアクションを処理する関数。

`console.flag`

Web コンソール機能フラグを完全に制御します。

名前	値のタイプ	任意	説明
`handler`	`CodeRef<FeatureFlagHandler>`	いいえ	任意の機能フラグを設定または設定解除するのに使用されます。

`console.flag/hookProvider`

フックハンドラーを使用して Web コンソール機能フラグを完全に制御します。

名前	値のタイプ	任意	説明
`handler`	`CodeRef<FeatureFlagHandler>`	いいえ	任意の機能フラグを設定または設定解除するのに使用されます。

`console.flag/model`

クラスター上の CustomResourceDefinition (CRD) オブジェクトの存在によって駆動される、新しい Web コンソール機能フラグを追加します。

名前	値のタイプ	任意	説明
`flag`	`string`	いいえ	CRD が検出された後に設定するフラグの名前。
`model`	`ExtensionK8sModel`	いいえ	CRD を指すモデル。

`console.global-config`

このエクステンションは、クラスターの設定を管理するために使用されるリソースを識別します。Administration Cluster Settings Configuration ページに、リソースへのリンクが追加されます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	クラスター設定リソースインスタンスの一意の識別子。
`name`	`string`	いいえ	クラスター設定リソースインスタンスの名前。
`model`	`ExtensionK8sModel`	いいえ	クラスター設定リソースを参照するモデル。
`namespace`	`string`	いいえ	クラスター設定リソースインスタンスの namespace。

`console.model-metadata`

API 検出で取得および生成される値を上書きして、モデルの表示をカスタマイズします。

名前	値のタイプ	任意	説明
`model`	`ExtensionK8sGroupModel`	いいえ	カスタマイズするモデル。グループのみ、またはオプションのバージョンおよび種類を指定できます。
`badge`	`ModelBadge`	はい	このモデル参照をテクノロジープレビューまたは開発者プレビューとみなすかどうか。
`color`	`string`	はい	このモデルに関連付ける色。
`label`	`string`	はい	ラベルをオーバーライドします。`kind` を指定する必要があります。
`labelPlural`	`string`	はい	複数形のラベルをオーバーライドします。`kind` を指定する必要があります。
`abbr`	`string`	はい	省略形をカスタマイズします。デフォルトは `kind` のすべての大文字 (最大 4 文字) です。その `kind` を指定する必要があります。

`console.navigation/href`

このエクステンションを使用すると、UI 内の特定のリンクを指すナビゲーション項目を追加できます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	この項目の一意の識別子。
`name`	`string`	いいえ	この項目の名前。
`href`	`string`	いいえ	リンクの `href` の値。
`perspective`	`string`	はい	この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。
`section`	`string`	はい	この項目が属するナビゲーションセクション。指定されていない場合は、この項目を最上位のリンクとしてレンダリングします。
`dataAttributes`	`{ [key: string]: string; }`	はい	データ属性を DOM に追加します。
`startsWith`	`string[]`	はい	URL がこのパスのいずれかで始まる場合は、この項目をアクティブと識別します。
`insertBefore`	`string` \| `string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`insertBefore` が優先されます。
`namespaced`	`boolean`	はい	`true` の場合、`/ns/active-namespace` を最後に追加します。
`prefixNamespaced`	`boolean`	はい	`true` の場合、先頭に `/k8s/ns/active-namespace` が追加されます。

`console.navigation/resource-cluster`

このエクステンションを使用すると、クラスターリソースの詳細ページを指すナビゲーションアイテムを追加できます。そのリソースの K8s モデルを使用して、ナビゲーション項目を定義できます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	この項目の一意の識別子。
`model`	`ExtensionK8sModel`	いいえ	このナビゲーション項目がリンクするモデル。
`perspective`	`string`	はい	この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。
`section`	`string`	はい	この項目が属するナビゲーションセクション。指定しない場合は、この項目をトップレベルのリンクとしてレンダリングします。
`dataAttributes`	`{ [key: string]: string; }`	はい	データ属性を DOM に追加します。
`startsWith`	`string[]`	はい	URL がこのパスのいずれかで始まる場合は、この項目をアクティブと識別します。
`insertBefore`	`string` \| `string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`insertBefore` が優先されます。
`name`	`string`	はい	デフォルト名をオーバーライドします。指定されていない場合、リンクの名前はモデルの複数形の値と同じになります。

`console.navigation/resource-ns`

このエクステンションを使用すると、namespaced リソースの詳細ページを指すナビゲーション項目を追加できます。そのリソースの K8s モデルを使用して、ナビゲーション項目を定義できます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	この項目の一意の識別子。
`model`	`ExtensionK8sModel`	いいえ	このナビゲーション項目がリンクするモデル。
`perspective`	`string`	はい	この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。
`section`	`string`	はい	この項目が属するナビゲーションセクション。指定しない場合は、この項目をトップレベルのリンクとしてレンダリングします。
`dataAttributes`	`{ [key: string]: string; }`	はい	データ属性を DOM に追加します。
`startsWith`	`string[]`	はい	URL がこのパスのいずれかで始まる場合は、この項目をアクティブと識別します。
`insertBefore`	`string \| string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`insertBefore` が優先されます。
`name`	`string`	はい	デフォルト名をオーバーライドします。指定されていない場合、リンクの名前はモデルの複数形の値と同じになります。

`console.navigation/section`

このエクステンションを使用すると、ナビゲーションタブ内の新しいナビゲーション項目セクションを定義できます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	この項目の一意の識別子。
`perspective`	`string`	はい	この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。
`dataAttributes`	`{ [key: string]: string; }`	はい	データ属性を DOM に追加します。
`insertBefore`	`string` \| `string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`insertBefore` が優先されます。
`name`	`string`	はい	このセクションの名前。指定しない場合は、セクションの上に区切り記号のみが表示されます。

`console.navigation/separator`

このエクステンションを使用すると、ナビゲーション内のナビゲーション項目間に区切り文字を追加できます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	この項目の一意の識別子。
`perspective`	`string`	はい	この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。
`section`	`string`	はい	この項目が属するナビゲーションセクション。指定されていない場合は、この項目を最上位のリンクとしてレンダリングします。
`dataAttributes`	`{ [key: string]: string; }`	はい	データ属性を DOM に追加します。
`insertBefore`	`string` \| `string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`insertBefore` が優先されます。

`console.page/resource/details`

名前	値のタイプ	任意	説明
`model`	`ExtensionK8sGroupKindModel`	いいえ	このリソースページがリンクするモデル。
`component`	`CodeRef<React.ComponentType<{ match: match<{}>; namespace: string; model: ExtensionK8sModel; }>>`	いいえ	ルートがマッチしたときにレンダリングされるコンポーネント。

`console.page/resource/list`

Console ルーターに新しいリソースリストのページを追加します。

名前	値のタイプ	任意	説明
`model`	`ExtensionK8sGroupKindModel`	いいえ	このリソースページがリンクするモデル。
`component`	`CodeRef<React.ComponentType<{ match: match<{}>; namespace: string; model: ExtensionK8sModel; }>>`	いいえ	ルートがマッチしたときにレンダリングされるコンポーネント。

`console.page/route`

Web コンソールルーターに新しいページを追加します。React Router を参照してください。

名前	値のタイプ	任意	説明
`component`	`CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>`	いいえ	ルートがマッチしたときにレンダリングされるコンポーネント。
`path`	`string` \| `string[]`	いいえ	`path-to-regexp@^1.7.0` が理解する有効な URL パスまたはパスの配列。
`perspective`	`string`	はい	このページが属するパースペクティブ。指定されていない場合は、すべてのパースペクティブに提供します。
`exact`	`boolean`	はい	true の場合、パスが `location.pathname` と完全に一致する場合にのみマッチします。

`console.page/route/standalone`

一般的なページレイアウトの外部でレンダリングされる新しいスタンドアロンページを Web コンソールルーターに追加します。React Router を参照してください。

名前	値のタイプ	任意	説明
`component`	`CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>`	いいえ	ルートがマッチしたときにレンダリングされるコンポーネント。
`path`	`string` \| `string[]`	いいえ	`path-to-regexp@^1.7.0` が理解する有効な URL パスまたはパスの配列。
`exact`	`boolean`	はい	true の場合、パスが `location.pathname` と完全に一致する場合にのみマッチします。

`console.perspective`

このエクステンションを使用すると、コンソールに新しいパースペクティブを追加してナビゲーションメニューをカスタマイズできます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	パースペクティブの識別子。
`name`	`string`	いいえ	パースペクティブの表示名。
`icon`	`CodeRef<LazyComponent>`	いいえ	パースペクティブの表示アイコン。
`landingPageURL`	`CodeRef<(flags: { [key: string]: boolean; }, isFirstVisit: boolean) ⇒ string>`	いいえ	パースペクティブのランディングページの URL を取得する関数。
`importRedirectURL`	`CodeRef<(namespace: string) ⇒ string>`	いいえ	インポートフローのリダイレクト URL を取得する関数。
`default`	`boolean`	はい	パースペクティブがデフォルトであるかどうか。デフォルトは 1 つのみです。
`defaultPins`	`ExtensionK8sModel[]`	はい	ナビゲーション上のデフォルトの固定されたリソース
`usePerspectiveDetection`	`CodeRef<() ⇒ [boolean, boolean]>`	はい	デフォルトのパースペクティブを検出するフック

`console.project-overview/inventory-item`

新しいインベントリー項目を プロジェクトの概要 ページに追加します。

名前	値のタイプ	任意	説明
`component`	`CodeRef<React.ComponentType<{ projectName: string; }>>`	いいえ	レンダリングされるコンポーネント。

`console.project-overview/utilization-item`

新しいプロジェクト概要の使用状況項目を追加します。

名前	値のタイプ	任意	説明
`title`	`string`	いいえ	使用状況項目のタイトル。
`getUtilizationQuery`	`CodeRef<GetProjectQuery>`	いいえ	Prometheus 使用状況クエリー。
`humanize`	`CodeRef<Humanize>`	いいえ	Prometheus データを人間が判読できる形式に変換します。
`getTotalQuery`	`CodeRef<GetProjectQuery>`	はい	Prometheus 合計のクエリー。
`getRequestQuery`	`CodeRef<GetProjectQuery>`	はい	Prometheus 要求のクエリー。
`getLimitQuery`	`CodeRef<GetProjectQuery>`	はい	Prometheus 制限のクエリー。
`TopConsumerPopover`	`CodeRef<React.ComponentType<TopConsumerPopoverProps>>`	はい	プレーン値の代わりに最上位のコンシューマーポップオーバーを表示します。

`console.pvc/alert`

このエクステンションを使用すると、PVC 詳細ページにカスタムアラートを追加できます。

名前	値のタイプ	任意	説明
`alert`	`CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>`	いいえ	アラートコンポーネント。

`console.pvc/create-prop`

このエクステンションを使用すると、PVC リストページで PVC リソースを作成する際に使用される追加のプロパティーを指定できます。

名前	値のタイプ	任意	説明
`label`	`string`	いいえ	prop アクション作成のラベル。
`path`	`string`	いいえ	prop アクション作成のパス。

`console.pvc/delete`

このエクステンションを使用すると、PVC リソースの削除をフッキングできます。追加情報とカスタム PVC 削除ロジックを含むアラートを追加できます。

名前	値のタイプ	任意	説明
`predicate`	`CodeRef<(pvc: K8sResourceCommon) ⇒ boolean>`	いいえ	エクステンションを使用するかどうかを示す述語。
`onPVCKill`	`CodeRef<(pvc: K8sResourceCommon) ⇒ Promise<void>>`	いいえ	PVC 削除操作の方法。
`alert`	`CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>`	いいえ	追加情報を表示するアラートコンポーネント。

`console.pvc/status`

名前	値のタイプ	任意	説明
`priority`	`number`	いいえ	status コンポーネントの優先度。値が大きいほど優先度が高くなります。
`status`	`CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>`	いいえ	status コンポーネント。
`predicate`	`CodeRef<(pvc: K8sResourceCommon) ⇒ boolean>`	いいえ	ステータスコンポーネントをレンダリングするかどうかを示す述語。

`console.redux-reducer`

plugins.<scope> サブ状態で動作する Console Redux ストアに新しい reducer を追加します。

名前	値のタイプ	任意	説明
`scope`	`string`	いいえ	Redux 状態オブジェクト内の reducer が管理するサブ状態を表すキー。
`reducer`	`CodeRef<Reducer<any, AnyAction>>`	いいえ	reducer が管理するサブ状態で動作する reducer 関数

`console.resource/create`

このエクステンションを使用すると、プラグインは、ユーザーが新しいリソースインスタンスを作成しようとしたときにレンダリングされる特定のリソースのカスタムコンポーネント (つまりウィザードやフォーム) を追加できます。

名前	値のタイプ	任意	説明
`model`	`ExtensionK8sModel`	いいえ	この create resource ページがレンダリングされるモデル。
`component`	`CodeRef<React.ComponentType<CreateResourceComponentProps>>`	いいえ	モデルがマッチする場合にレンダリングされるコンポーネント

`console.storage-class/provisioner`

ストレージクラスの作成時に、新しいストレージクラスプロビジョナーをオプションとして追加します。

名前	値のタイプ	任意	説明
`CSI`	`ProvisionerDetails`	はい	Container Storage Interface プロビジョナータイプ
`OTHERS`	`ProvisionerDetails`	はい	Other プロビジョナータイプ

`console.storage-provider`

このエクステンションを使用すると、ストレージおよびプロバイダー固有のコンポーネントをアタッチする際に、新しいストレージプロバイダーを追加できます。

名前	値のタイプ	任意	説明
`name`	`string`	いいえ	プロバイダーの表示名。
`コンポーネント`	`CodeRef<React.ComponentType<Partial<RouteComponentProps<{}, StaticContext, any>>>>`	いいえ	レンダリングするプロバイダー固有のコンポーネント。

`console.tab`

水平ナビゲーションに、contextId に一致するタブを追加します。

名前	値のタイプ	任意	説明
`contextId`	`string`	いいえ	タブが挿入される水平ナビゲーションに割り当てられるコンテキスト ID。使用できる値: `dev-console-observe`
`name`	`string`	いいえ	タブの表示ラベル
`href`	`string`	いいえ	既存の URL に追加される `href`
`component`	`CodeRef<React.ComponentType<PageComponentProps<K8sResourceCommon>>>`	いいえ	タブコンテンツのコンポーネント。

`console.tab/horizontalNav`

このエクステンションを使用すると、リソースの詳細ページにタブを追加できます。

名前	値のタイプ	任意	説明
`model`	`ExtensionK8sKindVersionModel`	いいえ	このプロバイダーがタブを表示するモデル。
`page`	`{ name: string; href: string; }`	いいえ	水平タブに表示されるページ。名前としてタブ名およびタブの href を取ります。
`component`	`CodeRef<React.ComponentType<PageComponentProps<K8sResourceCommon>>>`	いいえ	ルートがマッチしたときにレンダリングされるコンポーネント。

`console.telemetry/listener`

このコンポーネントは、テレメトリーイベントを受信するリスナー関数を登録するために使用できます。これらのイベントには、ユーザー識別、ページナビゲーション、その他のアプリケーション固有のイベントが含まれます。リスナーは、このデータをレポートと分析のために使用できます。

名前	値のタイプ	任意	説明
`listener`	`CodeRef<TelemetryEventListener>`	いいえ	テレメトリーイベントをリッスンします

`console.topology/adapter/build`

BuildAdapter は、Build コンポーネントで使用できるデータに要素を適応させるアダプターを追加します。

名前	値のタイプ	任意	説明
`adapt`	`CodeRef<(element: GraphElement) ⇒ AdapterDataType<BuildConfigData> \| undefined>`	いいえ	Build コンポーネントで使用できるデータに要素を適応させるアダプター。

`console.topology/adapter/network`

NetworkAdapater は、Networking コンポーネントで使用できるデータに要素を適応させるアダプターを提供します。

名前	値のタイプ	任意	説明
`adapt`	`CodeRef<(element: GraphElement) ⇒ NetworkAdapterType \| undefined>`	いいえ	Networking コンポーネントで使用できるデータに要素を適応させるアダプター。

`console.topology/adapter/pod`

PodAdapter はアダプターを提供し、Pod コンポーネントで使用できるデータに要素を適合させます。

名前	値のタイプ	任意	説明
`adapt`	`CodeRef<(element: GraphElement) ⇒ AdapterDataType<PodsAdapterDataType> \| undefined>`	いいえ	Pod コンポーネントで使用できるデータに要素を適応させるアダプター。

`console.topology/component/factory`

ViewComponentFactory の Getter。

名前	値のタイプ	任意	説明
`getFactory`	`CodeRef<ViewComponentFactory>`	いいえ	`ViewComponentFactory` の Getter。

`console.topology/create/connector`

コネクター作成関数の getter。

名前	値のタイプ	任意	説明
`getCreateConnector`	`CodeRef<CreateConnectionGetter>`	いいえ	コネクター作成関数の getter。

`console.topology/data/factory`

トポロジーデータモデルファクトリーエクステンション

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	ファクトリーの一意の ID。
`priority`	`number`	いいえ	ファクトリーの優先度
`resources`	`WatchK8sResourcesGeneric`	はい	`useK8sWatchResources` フックから取得されるリソース。
`workloadKeys`	`string[]`	はい	ワークロードが含まれるリソースのキー。
`getDataModel`	`CodeRef<TopologyDataModelGetter>`	はい	データモデルファクトリーの Getter。
`isResourceDepicted`	`CodeRef<TopologyDataModelDepicted>`	はい	リソースがこのモデルファクトリーによって記述されているかどうかを判断する関数の Getter。
`getDataModelReconciler`	`CodeRef<TopologyDataModelReconciler>`	はい	すべてのエクステンションのモデルがロードされた後にデータモデルを調整する関数の Getter。

`console.topology/decorator/provider`

トポロジーデコレータープロバイダーエクステンション

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	エクステンション固有のトポロジーデコレーターの ID
`priority`	`number`	いいえ	エクステンション固有のトポロジーデコレーターの優先順位
`quadrant`	`TopologyQuadrant`	いいえ	エクステンション固有のトポロジーデコレーターのクアドラント
`decorator`	`CodeRef<TopologyDecoratorGetter>`	いいえ	エクステンション固有のデコレーター

`console.topology/details/resource-alert`

DetailsResourceAlert は、特定のトポロジーコンテキストまたはグラフ要素のアラートを提供します。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	このアラートの ID。アラートの破棄後に表示しない場合に状態を保存するために使用されます。
`contentProvider`	`CodeRef<(element: GraphElement) ⇒ DetailsResourceAlertContent \| null>`	いいえ	アラートの内容を返すフック。

`console.topology/details/resource-link`

DetailsResourceLink は、特定のトポロジーコンテキストまたはグラフ要素のリンクを提供します。

名前	値のタイプ	任意	説明
`link`	`CodeRef<(element: GraphElement) ⇒ React.Component \| undefined>`	いいえ	指定された場合はリソースリンクを返し、指定されない場合は未定義を返します。スタイルには `ResourceIcon` および `ResourceLink` プロパティーを使用します。
`priority`	`number`	はい	優先度の高いファクトリーからリンクを作成します。

`console.topology/details/tab`

DetailsTab は、トポロジーの詳細パネルのタブを提供します。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	この詳細タブの一意の識別子。
`label`	`string`	いいえ	UI に表示されるタブのラベル。
`insertBefore`	`string` \| `string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`insertBefore` 値が優先されます。

`console.topology/details/tab-section`

DetailsTabSection は、トポロジーの詳細パネルの特定タブのセクションを提供します。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	この詳細タブセクションの一意の識別子。
`tab`	`string`	いいえ	このセクションが提供する必要のある親タブ ID。
`provider`	`CodeRef<DetailsTabSectionExtensionHook>`	いいえ	コンポーネントを返すフック、または null か未定義の場合、トポロジーサイドバーにレンダリングされます。SDK コンポーネント: `<Section title=\{}>…` パディング領域
`section`	`CodeRef<(element: GraphElement, renderNull?: () ⇒ null) ⇒ React.Component \| undefined>`	いいえ	非推奨: プロバイダーが定義されていない場合はフォールバックします。renderNull はすでに no-op です。
`insertBefore`	`string` \| `string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`insertBefore` 値が優先されます。

`console.topology/display/filters`

トポロジー表示フィルターエクステンション

名前	値のタイプ	任意	説明
`getTopologyFilters`	`CodeRef<() ⇒ TopologyDisplayOption[]>`	いいえ	エクステンション固有のトポロジーフィルターのゲッター
`applyDisplayOptions`	`CodeRef<TopologyApplyDisplayOptions>`	いいえ	モデルにフィルターを適用する関数

`console.topology/relationship/provider`

トポロジー関係プロバイダーコネクターエクステンション

名前	値のタイプ	任意	説明
`provides`	`CodeRef<RelationshipProviderProvides>`	いいえ	ソースノードとターゲットノード間に接続を作成できるか判断するために使用
`ヒント`	`string`	いいえ	コネクター操作がドロップターゲット上に移動したときに表示されるツールヒント (例: "Create a Visual Connector")
`create`	`CodeRef<RelationshipProviderCreate>`	いいえ	接続を作成するためにコネクターがターゲットノード上にドロップされると実行されるコールバック
`priority`	`number`	いいえ	関係の優先順位。複数の場合は高い方が優先されます

`console.user-preference/group`

このエクステンションを使用して、console user-preferences ページにグループを追加できます。console user-preferences ページの垂直タブのオプションとして表示されます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	ユーザー設定グループを識別するのに使用される ID。
`label`	`string`	いいえ	ユーザー設定グループのラベル
`insertBefore`	`string`	はい	このユーザー設定グループの後に配置しなければならないグループの ID
`insertAfter`	`string`	はい	このユーザー設定グループの前に配置しなければならないグループの ID

`console.user-preference/item`

このエクステンションを使用して、console user-preferences ページのユーザー設定グループに項目を追加できます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	ユーザー設定項目を特定するために使用され、項目の順序を定義するために insertAfter および insertBefore で参照される ID
`label`	`string`	いいえ	ユーザー設定のラベル
`description`	`string`	いいえ	ユーザー設定の説明
`field`	`UserPreferenceField`	いいえ	ユーザー設定を定義するために値をレンダリングするために使用される入力フィールドのオプション
`groupId`	`string`	はい	項目が属するユーザー優先グループを識別するために使用される ID
`insertBefore`	`string`	はい	このユーザー設定項目の後に配置しなければならない項目の ID
`insertAfter`	`string`	はい	このユーザー設定項目の前に配置しなければならない項目の ID

`console.yaml-template`

yaml エディターを使用してリソースを編集するための YAML テンプレート。

名前	値のタイプ	任意	説明
`model`	`ExtensionK8sModel`	いいえ	テンプレートに関連付けられたモデル。
`template`	`CodeRef<string>`	いいえ	YAML テンプレート。
`name`	`string`	いいえ	テンプレートの名前。名前 `default` を使用して、これをデフォルトテンプレートと識別します。

`dev-console.add/action`

このエクステンションを使用すると、プラグインは開発者パースペクティブの add ページに追加アクション項目を追加できます。たとえば、Serverless プラグインは、開発者コンソールの add ページにサーバーレス関数の新しい追加項目を追加できます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	アクションを識別するための ID。
`label`	`string`	いいえ	アクションのラベル。
`description`	`string`	いいえ	アクションの説明。
`href`	`string`	いいえ	移動先の `href`。
`groupId`	`string`	はい	アクションが属するアクショングループを識別するのに使用される ID。
`icon`	`CodeRef<React.ReactNode>`	はい	パースペクティブの表示アイコン。
`accessReview`	`AccessReviewResourceAttributes[]`	はい	アクションの可視性または有効化を制御するオプションのアクセスレビュー。

`dev-console.add/action-group`

この拡張機能を使用すると、プラグインは開発者コンソールの add ページにグループを追加できます。グループはアクションが参照でき、アクションはエクステンションの定義に基づき add action ページでグループ化されます。たとえば、Serverless プラグインは、Serverless グループと複数の追加アクションを追加できます。

名前	値のタイプ	任意	説明
`id`	`string`	いいえ	アクショングループを識別するために使用される ID
`name`	`string`	いいえ	アクショングループのタイトル
`insertBefore`	`string`	はい	このアクショングループの後に配置しなければならないグループの ID
`insertAfter`	`string`	はい	このアクショングループの前に配置しなければならないグループの ID

`dev-console.import/environment`

このエクステンションを使用すると、開発者コンソール git インポートフォームのビルダーイメージセレクターで追加のビルド環境変数フィールドを指定できます。これを設定すると、フィールドはビルドセクション内の同じ名前の環境変数をオーバーライドします。

名前	値のタイプ	任意	説明
`imageStreamName`	`string`	いいえ	カスタム環境変数を指定するイメージストリームの名前
`imageStreamTags`	`string[]`	いいえ	サポートされるイメージストリームタグのリスト
`environments`	`ImageEnvironment[]`	いいえ	環境変数のリスト

`console.dashboards/overview/detail/item`

非推奨になりました。代わりに CustomOverviewDetailItem タイプを使用してください。

名前	値のタイプ	任意	説明
`component`	`CodeRef<React.ComponentType<{}>>`	いいえ	`DetailItem` コンポーネントに基づく値

`console.page/resource/tab`

非推奨。代わりに console.tab/horizontalNav を使用してください。Console ルーターに新しいリソースタブページを追加します。

名前	値のタイプ	任意	説明
`model`	`ExtensionK8sGroupKindModel`	いいえ	このリソースページがリンクするモデル。
`component`	`CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>`	いいえ	ルートがマッチしたときにレンダリングされるコンポーネント。
`name`	`string`	いいえ	タブの名前。
`href`	`string`	はい	タブリンクのオプション `href`。指定しない場合は、最初の `path` が使用されます。
`exact`	`boolean`	はい	true の場合、パスが `location.pathname` と完全に一致する場合にのみマッチします。

7.5.2. OpenShift Container Platform コンソール API

`useActivePerspective`

現在アクティブなパースペクティブとアクティブなパースペクティブを設定するためのコールバックを提供するフック。現在アクティブなパースペクティブとセッターコールバックを含むタプルを返します。

例

const Component: React.FC = (props) => {
   const [activePerspective, setActivePerspective] = useActivePerspective();
   return <select
     value={activePerspective}
     onChange={(e) => setActivePerspective(e.target.value)}
   >
     {
       // ...perspective options
     }
   </select>
}

`GreenCheckCircleIcon`

緑色のチェックマークの円形アイコンを表示するためのコンポーネント。

例

<GreenCheckCircleIcon title="Healthy" />

パラメーター名	説明
`className`	(オプション) コンポーネントの追加クラス名
`title`	(オプション) アイコンのタイトル
`size`	(オプション) アイコンのサイズ: (`sm`、`md`、`lg`、`xl`)

`RedExclamationCircleIcon`

赤い感嘆符の円形アイコンを表示するためのコンポーネント。

例

<RedExclamationCircleIcon title="Failed" />

パラメーター名	説明
`className`	(オプション) コンポーネントの追加クラス名
`title`	(オプション) アイコンのタイトル
`size`	(オプション) アイコンのサイズ: (`sm`、`md`、`lg`、`xl`)

`YellowExclamationTriangleIcon`

黄色の三角形の感嘆符アイコンを表示するためのコンポーネント。

例

<YellowExclamationTriangleIcon title="Warning" />

パラメーター名	説明
`className`	(オプション) コンポーネントの追加クラス名
`title`	(オプション) アイコンのタイトル
`size`	(オプション) アイコンのサイズ: (`sm`、`md`、`lg`、`xl`)

`BlueInfoCircleIcon`

青い情報円形アイコンを表示するためのコンポーネント。

例

<BlueInfoCircleIcon title="Info" />

パラメーター名	説明
`className`	(オプション) コンポーネントの追加クラス名
`title`	(オプション) アイコンのタイトル
`size`	(オプション) アイコンのサイズ: ('sm'、'md'、'lg'、'xl')

`ErrorStatus`

エラーステータスのポップオーバーを表示するためのコンポーネント。

例

<ErrorStatus title={errorMsg} />

パラメーター名	説明
`title`	(オプション) ステータステキスト
`iconOnly`	(オプション) true の場合、アイコンのみを表示します
`noTooltip`	(オプション) true の場合、ツールチップは表示されません
`className`	(オプション) コンポーネントの追加クラス名
`popoverTitle`	(オプション) ポップオーバーのタイトル

`InfoStatus`

情報ステータスのポップオーバーを表示するためのコンポーネント。

例

<InfoStatus title={infoMsg} />

パラメーター名	説明
`title`	(オプション) ステータステキスト
`iconOnly`	(オプション) true の場合、アイコンのみを表示します
`noTooltip`	(オプション) true の場合、ツールチップは表示されません
`className`	(オプション) コンポーネントの追加クラス名
`popoverTitle`	(オプション) ポップオーバーのタイトル

`ProgressStatus`

進行状況のポップオーバーを表示するためのコンポーネント。

例

<ProgressStatus title={progressMsg} />

パラメーター名	説明
`title`	(オプション) ステータステキスト
`iconOnly`	(オプション) true の場合、アイコンのみを表示します
`noTooltip`	(オプション) true の場合、ツールチップは表示されません
`className`	(オプション) コンポーネントの追加クラス名
`popoverTitle`	(オプション) ポップオーバーのタイトル

`SuccessStatus`

成功ステータスのポップオーバーを表示するためのコンポーネント。

例

<SuccessStatus title={successMsg} />

パラメーター名	説明
`title`	(オプション) ステータステキスト
`iconOnly`	(オプション) true の場合、アイコンのみを表示します
`noTooltip`	(オプション) true の場合、ツールチップは表示されません
`className`	(オプション) コンポーネントの追加クラス名
`popoverTitle`	(オプション) ポップオーバーのタイトル

`checkAccess`

特定のリソースへのユーザーアクセスに関する情報を提供します。リソースアクセス情報を含むオブジェクトを返します。

パラメーター名	説明
`resourceAttributes`	アクセスレビューのリソース属性
`impersonate`	権限借用の詳細

`useAccessReview`

特定のリソースへのユーザーアクセスに関する情報を提供するフック。isAllowed と loading 値を含む配列を返します。

パラメーター名	説明
`resourceAttributes`	アクセスレビューのリソース属性
`impersonate`	権限借用の詳細

`useResolvedExtensions`

解決された CodeRef プロパティーで Console 拡張機能を使用するための React フック。このフックは、useExtensions フックと同じ引数を受け入れ、拡張インスタンスの適合したリストを返し、各拡張のプロパティー内のすべてのコード参照を解決します。

最初に、フックは空の配列を返します。解決が完了すると、React コンポーネントが再レンダリングされ、適合した拡張機能のリストが返されます。一致する拡張子のリストが変更されると、解決が再開されます。解決が完了するまで、フックは前の結果を返し続けます。

フックの結果要素は、再レンダリング全体で参照的に安定していることが保証されています。解決されたコード参照、解決が完了したかどうかを示すブール値フラグ、および解決中に検出されたエラーのリストを含む適応拡張インスタンスのリストを含むタプルを返します。

例

const [navItemExtensions, navItemsResolved] = useResolvedExtensions<NavItem>(isNavItem);
// process adapted extensions and render your component

パラメーター名	説明
`typeGuards`	それぞれが動的プラグイン拡張機能を引数として受け入れ、拡張機能が目的の型制約を満たしているかどうかを示すブール値フラグを返すコールバックのリスト

`HorizontalNav`

ページのナビゲーションバーを作成するコンポーネント。ルーティングはコンポーネントの一部として処理されます。console.tab/horizontalNav を使用すると、水平ナビゲーションにコンテンツを追加できます。

例

const HomePage: React.FC = (props) => {
    const page = {
      href: '/home',
      name: 'Home',
      component: () => <>Home</>
    }
    return <HorizontalNav match={props.match} pages={[page]} />
}

パラメーター名	説明
`resource`	K8sResourceCommon タイプのオブジェクトである、このナビゲーションに関連付けられたリソース
`pages`	ページオブジェクトの配列
`match`	React Router が提供する match オブジェクト

`VirtualizedTable`

仮想化されたテーブルを作成するためのコンポーネント。

例

const MachineList: React.FC<MachineListProps> = (props) => {
  return (
    <VirtualizedTable<MachineKind>
     {...props}
     aria-label='Machines'
     columns={getMachineColumns}
     Row={getMachineTableRow}
    />
  );
}

パラメーター名	説明
`data`	テーブルのデータ
`loaded`	データがロードされたことを示すフラグ
`loadError`	データのロードで問題が発生した場合のエラーオブジェクト
`列`	列の設定
`行`	行の設定
`unfilteredData`	フィルターなしの元のデータ
`NoDataEmptyMsg`	(オプション) データのない空のメッセージコンポーネント
`EmptyMsg`	(オプション) 空のメッセージコンポーネント
`scrollNode`	(オプション) スクロールを処理する関数
`label`	(オプション) テーブルのラベル
`ariaLabel`	(オプション) aria ラベル
`gridBreakPoint`	応答性のためにグリッドを分割する方法のサイジング
`onSelect`	(オプション) テーブルの選択を処理する関数
`rowData`	(オプション) 行に固有のデータ

`TableData`

テーブル行内にテーブルデータを表示するためのコンポーネント。

例

const PodRow: React.FC<RowProps<K8sResourceCommon>> = ({ obj, activeColumnIDs }) => {
  return (
    <>
      <TableData id={columns[0].id} activeColumnIDs={activeColumnIDs}>
        <ResourceLink kind="Pod" name={obj.metadata.name} namespace={obj.metadata.namespace} />
      </TableData>
      <TableData id={columns[1].id} activeColumnIDs={activeColumnIDs}>
        <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
      </TableData>
    </>
  );
};

パラメーター名	説明
`id`	テーブルの一意の ID
`activeColumnIDs`	アクティブな列
`className`	(オプション) スタイリングのオプションクラス名

`useActiveColumns`

ユーザーが選択したアクティブな TableColumns のリストを提供するフック。

例

// See implementation for more details on TableColumn type
  const [activeColumns, userSettingsLoaded] = useActiveColumns({
    columns,
    showNamespaceOverride: false,
    columnManagementID,
  });
  return userSettingsAreLoaded ? <VirtualizedTable columns={activeColumns} {...otherProps} /> : null

パラメーター名	説明
`options`	キーと値のマップとして渡されるもの。
`\{TableColumn[]} options.columns`	使用可能なすべての TableColumn の配列
`{boolean} [options.showNamespaceOverride]`	(オプション) true の場合、列管理の選択に関係なく namespace 列が含まれます
`{string} [options.columnManagementID]`	(オプション) ユーザー設定との間で列管理の選択を保持および取得するために使用される一意の ID。通常は、リソースのグループ/バージョン/種類 (GVK) の文字列です。

現在のユーザーが選択したアクティブな列 (options.columns のサブセット) と、ユーザー設定がロードされたかどうかを示すブール値フラグを含むタプル。

`ListPageHeader`

ページヘッダーを生成するためのコンポーネント。

例

const exampleList: React.FC = () => {
  return (
    <>
      <ListPageHeader title="Example List Page"/>
    </>
  );
};

パラメーター名	説明
`title`	見出しタイトル
`helpText`	(オプション) 反応ノードとしてのヘルプセクション
`badge`	(オプション) 反応ノードとしてのバッジアイコン

`ListPageCreate`

特定のリソースの種類に対して、そのリソースの作成用 YAML へのリンクを自動的に生成する作成ボタンを追加するためのコンポーネント。

例

const exampleList: React.FC<MyProps> = () => {
  return (
    <>
      <ListPageHeader title="Example Pod List Page"/>
        <ListPageCreate groupVersionKind="Pod">Create Pod</ListPageCreate>
      </ListPageHeader>
    </>
  );
};

パラメーター名	説明
`groupVersionKind`	表すためのリソースグループ/バージョン/種類

`ListPageCreateLink`

定型化されたリンクを作成するためのコンポーネント。

例

const exampleList: React.FC<MyProps> = () => {
 return (
  <>
   <ListPageHeader title="Example Pod List Page"/>
      <ListPageCreateLink to={'/link/to/my/page'}>Create Item</ListPageCreateLink>
   </ListPageHeader>
  </>
 );
};

パラメーター名	説明
`to`	リンク先の文字列の場所
`createAccessReview`	(オプション) アクセスを決定するために使用される namespace と種類を持つオブジェクト
`children`	(オプション) コンポーネントの子

`ListPageCreateButton`

ボタンを作成するためのコンポーネント。

例

const exampleList: React.FC<MyProps> = () => {
  return (
    <>
      <ListPageHeader title="Example Pod List Page"/>
        <ListPageCreateButton createAccessReview={access}>Create Pod</ListPageCreateButton>
      </ListPageHeader>
    </>
  );
};

パラメーター名	説明
`createAccessReview`	(オプション) アクセスを決定するために使用される namespace と種類を持つオブジェクト
`pfButtonProps`	(オプション) Patternfly Button のプロパティー

`ListPageCreateDropdown`

権限チェックでラップされたドロップダウンを作成するためのコンポーネント。

例

const exampleList: React.FC<MyProps> = () => {
  const items = {
    SAVE: 'Save',
    DELETE: 'Delete',
  }
  return (
    <>
     <ListPageHeader title="Example Pod List Page"/>
       <ListPageCreateDropdown createAccessReview={access} items={items}>Actions</ListPageCreateDropdown>
     </ListPageHeader>
    </>
  );
};

パラメーター名	説明
`items`	key: ドロップダウンコンポーネントに表示する項目の ReactNode のペア
`onClick`	ドロップダウン項目をクリックするためのコールバック関数
`createAccessReview`	(オプション) アクセスを決定するために使用される namespace と種類を持つオブジェクト
`children`	(オプション) ドロップダウントグルの子

`ListPageFilter`

リストページのフィルターを生成するコンポーネント。

例

  // See implementation for more details on RowFilter and FilterValue types
  const [staticData, filteredData, onFilterChange] = useListPageFilter(
    data,
    rowFilters,
    staticFilters,
  );
  // ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
  return (
    <>
      <ListPageHeader .../>
      <ListPagBody>
        <ListPageFilter data={staticData} onFilterChange={onFilterChange} />
        <List data={filteredData} />
      </ListPageBody>
    </>
  )

パラメーター名	説明
`data`	データポイントの配列
`loaded`	データがロードされたことを示します
`onFilterChange`	フィルター更新時のコールバック関数
`rowFilters`	(オプション) 利用可能なフィルターオプションを定義する RowFilter 要素の配列
`nameFilterPlaceholder`	(オプション) 名前フィルターのプレースホルダー
`labelFilterPlaceholder`	(オプション) ラベルフィルターのプレースホルダー
`hideLabelFilter`	(オプション) 名前フィルターとラベルフィルターの両方ではなく、名前フィルターのみを表示します。
`hideNameLabelFilter`	(オプション) 名前フィルターとラベルフィルターの両方を非表示にします。
`columnLayout`	(オプション) 列レイアウトオブジェクト
`hideColumnManagement`	(オプション) 列管理を非表示にするフラグ

`useListPageFilter`

ListPageFilter コンポーネントのフィルター状態を管理するフック。すべての静的フィルターによってフィルター処理されたデータ、すべての静的フィルターと行フィルターによってフィルター処理されたデータ、および rowFilters を更新するコールバックを含むタプルを返します。

例

  // See implementation for more details on RowFilter and FilterValue types
  const [staticData, filteredData, onFilterChange] = useListPageFilter(
    data,
    rowFilters,
    staticFilters,
  );
  // ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
  return (
    <>
      <ListPageHeader .../>
      <ListPagBody>
        <ListPageFilter data={staticData} onFilterChange={onFilterChange} />
        <List data={filteredData} />
      </ListPageBody>
    </>
  )

パラメーター名	説明
`data`	データポイントの配列
`rowFilters`	(オプション) 利用可能なフィルターオプションを定義する RowFilter 要素の配列
`staticFilters`	(オプション) データに静的に適用される FilterValue 要素の配列

`ResourceLink`

アイコンバッジを使用して特定のリソースタイプへのリンクを作成するコンポーネント。

例

  <ResourceLink
      kind="Pod"
      name="testPod"
      title={metadata.uid}
  />

パラメーター名	説明
`kind`	(オプション) リソースの種類、つまり Pod、Deployment、Namespace
`groupVersionKind`	(オプション) グループ、バージョン、および種類を含むオブジェクト
`className`	(オプション) コンポーネントのクラススタイル
`displayName`	(オプション) コンポーネントの表示名。設定されている場合は、リソース名を上書きします。
`inline`	(オプション) アイコンバッジを作成し、子とインラインで名前を付けるためのフラグ
`linkTo`	(オプション) Link オブジェクトを作成するためのフラグ - デフォルトは true
`name`	(オプション) リソースの名前
`namesapce`	(オプション) リンク先の種類のリソースの特定の namespace
`hideIcon`	(オプション) アイコンバッジを非表示にするフラグ
`title`	(オプション) リンクオブジェクトのタイトル (非表示)
`dataTest`	(オプション) テスト用の識別子
`onClick`	(オプション) コンポーネントがクリックされたときのコールバック関数
`truncate`	(オプション) リンクが長すぎる場合に切り捨てるフラグ

`ResourceIcon`

特定のリソースタイプのアイコンバッジを作成するコンポーネント。

例

<ResourceIcon kind="Pod"/>

パラメーター名	説明
`kind`	(オプション) リソースの種類、つまり Pod、Deployment、Namespace
`groupVersionKind`	(オプション) グループ、バージョン、および種類を含むオブジェクト
`className`	(オプション) コンポーネントのクラススタイル

`useK8sModel`

指定された K8sGroupVersionKind の k8s モデルを redux から取得するフック。最初の項目が k8s モデル、2 番目の項目が inFlight ステータスの配列を返します。

例

const Component: React.FC = () => {
  const [model, inFlight] = useK8sModel({ group: 'app'; version: 'v1'; kind: 'Deployment' });
  return ...
}

パラメーター名	説明
`groupVersionKind`	k8s リソースのグループ、バージョン、種類。K8sGroupVersionKind が推奨されます。もしくは、グループ、バージョン、種類の参照 (例: group/version/kind (GVK) K8sResourceKindReference.) を渡すこともできますが、これは非推奨です。

`useK8sModels`

redux から現在のすべての k8s モデルを取得するフック。最初の項目が k8s モデルのリストで、2 番目の項目が inFlight ステータスの配列を返します。

例

const Component: React.FC = () => {
  const [models, inFlight] = UseK8sModels();
  return ...
}

`useK8sWatchResource`

ロード済みおよびエラーのステータスとともに k8s リソースを取得するフック。最初の項目がリソース、2 番目の項目がロード済みステータス、3 番目の項目がエラー状態 (存在する場合) の配列を返します。

例

const Component: React.FC = () => {
  const watchRes = {
        ...
      }
  const [data, loaded, error] = useK8sWatchResource(watchRes)
  return ...
}

パラメーター名	説明
`initResource`	リソースを監視するために必要なオプション。

`useK8sWatchResources`

ロード済みおよびエラーのそれぞれのステータスとともに k8s リソースを取得するフック。キーが initResouces で提供され、値が data、loaded、error の 3 つのプロパティーを持つマップを返します。

例

const Component: React.FC = () => {
  const watchResources = {
        'deployment': {...},
        'pod': {...}
        ...
      }
  const {deployment, pod} = useK8sWatchResources(watchResources)
  return ...
}

パラメーター名	説明
`initResources`	リソースはキーと値のペアとして監視する必要があります。ここで、キーはリソースに固有であり、値はそれぞれのリソースを監視するために必要なオプションです。

`consoleFetch`

コンソール固有のヘッダーを追加し、再試行とタイムアウトを可能にする fetch のカスタムラッパー。また、応答ステータスコードを検証し、適切なエラーを出力するか、必要に応じてユーザーをログアウトします。レスポンスに解決される promise を返します。

パラメーター名	説明
`url`	取得する URL
`options`	フェッチに渡すオプション
`timeout`	ミリ秒単位のタイムアウト

`consoleFetchJSON`

コンソール固有のヘッダーを追加し、再試行とタイムアウトを可能にする fetch のカスタムラッパー。また、応答ステータスコードを検証し、適切なエラーを出力するか、必要に応じてユーザーをログアウトします。応答を JSON オブジェクトとして返します。内部で consoleFetch を使用します。JSON オブジェクトとして応答に解決される promise を返します。

パラメーター名	説明
`url`	取得する URL
`method`	使用する HTTP メソッドデフォルトは GET です。
`options`	フェッチに渡すオプション
`timeout`	ミリ秒単位のタイムアウト
`cluster`	リクエストを行うクラスターの名前。デフォルトは、ユーザーが選択したアクティブなクラスターです

`consoleFetchText`

コンソール固有のヘッダーを追加し、再試行とタイムアウトを可能にする fetch のカスタムラッパー。また、応答ステータスコードを検証し、適切なエラーを出力するか、必要に応じてユーザーをログアウトします。応答をテキストとして返します。内部で consoleFetch を使用します。テキストとして応答に解決される promise を返します。

パラメーター名	説明
`url`	取得する URL
`options`	フェッチに渡すオプション
`timeout`	ミリ秒単位のタイムアウト
`cluster`	リクエストを行うクラスターの名前。デフォルトは、ユーザーが選択したアクティブなクラスターです

`getConsoleRequestHeaders`

redux の現在の状態を使用して、API 要求の偽装およびマルチクラスター関連のヘッダーを作成する関数。redux の状態に基づき、適切な偽装とクラスター要求ヘッダーを含むオブジェクトを返します。

パラメーター名	説明
`targetCluster`	指定された targetCluster で現在アクティブなクラスターをオーバーライドします

`k8sGetResource`

指定されたオプションに基づいて、クラスターからリソースを取得します。名前が指定されている場合は、1 つのリソースが返されます。それ以外の場合は、モデルに一致するすべてのリソースが返されます。名前が指定されている場合、リソースを含む JSON オブジェクトとして応答に解決される promise を返します。それ以外の場合は、モデルに一致するすべてのリソースを返します。失敗した場合、promise は HTTP エラー応答で拒否されます。

パラメーター名	説明
`options`	マップでキーと値のペアとして渡されるもの。
`options.model`	k8s モデル
`options.name`	リソースの名前。指定しない場合は、モデルに一致するすべてのリソースが検索されます。
`options.ns`	検索先の namespace。cluster-scoped リソースには指定しないでください。
`options.path`	指定されている場合はサブパスとして追加します
`options.queryParams`	URL に含めるクエリーパラメーター。
`options.requestInit`	使用する fetch init オブジェクト。これには、リクエストヘッダー、メソッド、リダイレクトなどを含めることができます。詳細は、Interface RequestInit を参照してください。

`k8sCreateResource`

指定されたオプションに基づいて、クラスター内にリソースを作成します。作成されたリソースの応答に解決される promise を返します。失敗した場合、promise は HTTP エラー応答で拒否されます。

パラメーター名	説明
`options`	マップでキーと値のペアとして渡されるもの。
`options.model`	k8s モデル
`options.data`	作成されるリソースのペイロード
`options.path`	指定されている場合はサブパスとして追加します
`options.queryParams`	URL に含めるクエリーパラメーター。

`k8sUpdateResource`

指定されたオプションに基づいて、クラスター内のリソース全体を更新します。クライアントが既存のリソースを完全に置き換える必要がある場合、k8sUpdate を使用できます。または、k8sPatch を使用して部分的な更新を実行することもできます。更新されたリソースの応答に解決される promise を返します。失敗した場合、promise は HTTP エラー応答で拒否されます。

パラメーター名	説明
`options`	マップでキーと値のペアとして渡されます
`options.model`	k8s モデル
`options.data`	更新する k8s リソースのペイロード
`options.ns`	検索先の namespace。cluster-scoped リソースには指定しないでください。
`options.name`	更新するリソース名。
`options.path`	指定されている場合はサブパスとして追加します
`options.queryParams`	URL に含めるクエリーパラメーター。

`k8sPatchResource`

指定されたオプションに基づいて、クラスター内の任意のリソースにパッチを適用します。クライアントが部分的な更新を実行する必要がある場合、k8sPatch を使用できます。または、k8sUpdate を使用して、既存のリソースを完全に置き換えることもできます。詳細は、Data Tracker を参照してください。パッチが適用されたリソースの応答に解決される promise を返します。失敗した場合、promise は HTTP エラー応答で拒否されます。

パラメーター名	説明
`options`	マップでキーと値のペアとして渡されるもの。
`options.model`	k8s モデル
`options.resource`	パッチを適用するリソース。
`options.data`	操作、パス、および値を含む既存のリソースにパッチを適用するデータのみ。
`options.path`	指定されている場合はサブパスとして追加します。
`options.queryParams`	URL に含めるクエリーパラメーター。

`k8sDeleteResource`

指定されたモデル、リソースに基づいて、クラスターからリソースを削除します。ガベージコレクションは Foreground|Background に基づいて機能し、指定されたモデルの propagationPolicy プロパティーで設定するか、json で渡すことができます。種類が Status のレスポンスに解決される promise を返します。失敗した場合、promise は HTTP エラー応答で拒否されます。

例

kind: 'DeleteOptions', apiVersion: 'v1', propagationPolicy

パラメーター名	説明
`options`	マップでキーと値のペアとして渡されるもの。
`options.model`	k8s モデル
`options.resource`	削除するリソース。
`options.path`	指定されている場合はサブパスとして追加します
`options.queryParams`	URL に含めるクエリーパラメーター。
`options.requestInit`	使用する fetch init オブジェクト。これには、リクエストヘッダー、メソッド、リダイレクトなどを含めることができます。詳細は、Interface RequestInit を参照してください。
`options.json`	リソースのガベージコレクションを明示的に制御できます。それ以外の場合は、モデルの propagationPolicy がデフォルトになります。

`k8sListResource`

指定されたオプションに基づいて、リソースをクラスター内の配列として一覧表示します。レスポンスに解決される promise を返します。

パラメーター名	説明
`options`	マップでキーと値のペアとして渡されるもの。
`options.model`	k8s モデル
`options.queryParams`	URL に含めるクエリーパラメーター。ラベルセレクターおよび "labelSelector" キーと併せて渡すことができます。
`options.requestInit`	使用する fetch init オブジェクト。これには、リクエストヘッダー、メソッド、リダイレクトなどを含めることができます。詳細は、Interface RequestInit を参照してください。

`k8sListResourceItems`

k8sListResource と同じインターフェイスですが、サブ項目を返します。モデルの apiVersion、つまり group/version を返します。

`getAPIVersionForModel`

k8s モデルの apiVersion を提供します。

パラメーター名	説明
`model`	k8s モデル

`getGroupVersionKindForResource`

リソースのグループ、バージョン、および種類を提供します。指定されたリソースのグループ、バージョン、種類を返します。リソースに API グループがない場合は、グループ "core" が返されます。リソースの apiVersion が無効な場合は、エラーが出力されます。

パラメーター名	説明
`resource`	k8s リソース

`getGroupVersionKindForModel`

k8s モデルのグループ、バージョン、および種類を提供します。これは、提供されたモデルのグループ、バージョン、種類を返します。モデルに apiGroup がない場合、グループ core が返されます。

パラメーター名	説明
`model`	k8s モデル

`StatusPopupSection`

ポップアップウィンドウでステータスを表示するコンポーネント。console.dashboards/overview/health/resource 拡張機能を構築するための便利なコンポーネント。

例

  <StatusPopupSection
    firstColumn={
      <>
        <span>{title}</span>
        <span className="text-secondary">
          My Example Item
        </span>
      </>
    }
    secondColumn='Status'
  >

パラメーター名	説明
`firstColumn`	ポップアップの最初の列の値
`secondColumn`	(オプション) ポップアップの 2 列目の値
`children`	(オプション) ポップアップの子

`StatusPopupItem`

ステータスポップアップで使用されるステータス要素。StatusPopupSection で使用されます。

例

<StatusPopupSection
   firstColumn='Example'
   secondColumn='Status'
>
   <StatusPopupItem icon={healthStateMapping[MCGMetrics.state]?.icon}>
      Complete
   </StatusPopupItem>
   <StatusPopupItem icon={healthStateMapping[RGWMetrics.state]?.icon}>
       Pending
   </StatusPopupItem>
</StatusPopupSection>

パラメーター名	説明
`value`	(オプション) 表示するテキスト値
`icon`	(オプション) 表示するアイコン
`children`	子要素

`概要`

ダッシュボードのラッパーコンポーネントを作成します。

例

    <Overview>
      <OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
    </Overview>

パラメーター名	説明
`className`	(オプション) div のスタイルクラス
`children`	(オプション) ダッシュボードの要素

`OverviewGrid`

ダッシュボードのカード要素のグリッドを作成します。Overview 内で使用されます。

例

    <Overview>
      <OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
    </Overview>

パラメーター名	説明
`mainCards`	グリッド用カード
`leftCards`	(オプション) グリッドの左側のカード
`rightCards`	(オプション) グリッドの右側のカード

`InventoryItem`

インベントリーカード項目を作成します。

例

  return (
    <InventoryItem>
      <InventoryItemTitle>{title}</InventoryItemTitle>
      <InventoryItemBody error={loadError}>
        {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
      </InventoryItemBody>
    </InventoryItem>
  )

パラメーター名	説明
`children`	項目内でレンダリングする要素

`InventoryItemTitle`

インベントリーカード項目のタイトルを作成します。InventoryItem 内で使用されます。

例

 return (
   <InventoryItem>
     <InventoryItemTitle>{title}</InventoryItemTitle>
     <InventoryItemBody error={loadError}>
       {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
     </InventoryItemBody>
   </InventoryItem>
 )

パラメーター名	説明
`children`	タイトル内にレンダリングする要素

`InventoryItemBody`

インベントリーカードの本文を作成します。InventoryCard 内で使用され、InventoryTitle と使用できます。

例

 return (
   <InventoryItem>
     <InventoryItemTitle>{title}</InventoryItemTitle>
     <InventoryItemBody error={loadError}>
       {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
     </InventoryItemBody>
   </InventoryItem>
 )

パラメーター名	説明
`children`	インベントリーカードまたはタイトル内でレンダリングする要素
`error`	div の要素

`InventoryItemStatus`

オプションのリンクアドレスを使用してインベントリーカードのカウントとアイコンを作成します。InventoryItemBody 内で使用されます。

例

 return (
   <InventoryItem>
     <InventoryItemTitle>{title}</InventoryItemTitle>
     <InventoryItemBody error={loadError}>
       {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
     </InventoryItemBody>
   </InventoryItem>
 )

パラメーター名	説明
`count`	表示用カウント
`icon`	表示用アイコン
`linkTo`	(オプション) リンクアドレス

`InventoryItemLoading`

インベントリーカードのロード時にスケルトンコンテナーを作成します。InventoryItem および関連コンポーネントで使用されます。

例

if (loadError) {
   title = <Link to={workerNodesLink}>{t('Worker Nodes')}</Link>;
} else if (!loaded) {
  title = <><InventoryItemLoading /><Link to={workerNodesLink}>{t('Worker Nodes')}</Link></>;
}
return (
  <InventoryItem>
    <InventoryItemTitle>{title}</InventoryItemTitle>
  </InventoryItem>
)

`useFlag`

FLAGS redux 状態から指定された機能フラグを返すフック。要求された機能フラグまたは未定義のブール値を返します。

パラメーター名	説明
`flag`	返す機能フラグ

`CodeEditor`

ホバーヘルプと補完機能を備えた基本的な遅延ロード Code エディター。

例

<React.Suspense fallback={<LoadingBox />}>
  <CodeEditor
    value={code}
    language="yaml"
  />
</React.Suspense>

パラメーター名	説明
`value`	レンダリングする yaml コードを表す文字列。
`言語`	エディターの言語を表す文字列。
`options`	Monaco エディターのオプション。詳細は、インターフェイス IStandAloneEditorConstructionOptions を参照してください。
`minHeight`	有効な CSS の高さの値における最小のエディターの高さ。
`showShortcuts`	エディターの上にショートカットを表示するためのブール値。
`toolbarLinks`	エディター上部のツールバーリンクセクションにレンダリングされる ReactNode の配列。
`onChange`	コード変更イベントのコールバック。
`onSave`	コマンド CTRL / CMD + S がトリガーされたときに呼び出されるコールバック。
`ref`	`{ editor?: IStandaloneCodeEditor }` への参照に反応します。`editor` プロパティーを使用すると、エディターを制御するすべてのメソッドにアクセスできます。詳細は、インターフェイス IStandaloneCodeEditor を参照してください。

`ResourceYAMLEditor`

ホバーヘルプと補完機能を備えた Kubernetes リソース用の遅延ロード YAML エディター。このコンポーネントは YAMLEditor を使用し、その上にリソースの更新処理、アラート、保存、キャンセル、リロードボタン、アクセシビリティなどの機能を追加します。onSave コールバックが指定されないかぎり、リソースの更新は自動的に処理されます。React.Suspense コンポーネントでラップする必要があります。

例

<React.Suspense fallback={<LoadingBox />}>
  <ResourceYAMLEditor
    initialResource={resource}
    header="Create resource"
    onSave={(content) => updateResource(content)}
  />
</React.Suspense>

パラメーター名	説明
`initialResource`	エディターによって表示されるリソースを表す YAML/オブジェクト。この prop は、最初のレンダリング中にのみ使用されます
`header`	YAML エディターの上にヘッダーを追加する
`onSave`	Save ボタンのコールバック。これを渡すと、エディターによってリソースに対して実行されたデフォルトの更新が上書きされます

`ResourceEventStream`

特定のリソースに関連するイベントを表示するコンポーネント。

例

const [resource, loaded, loadError] = useK8sWatchResource(clusterResource);
return <ResourceEventStream resource={resource} />

パラメーター名	説明
`resource`	関連イベントを表示するオブジェクト。

`usePrometheusPoll`

単一のクエリーに対して Prometheus へのポーリングを設定します。クエリー応答、応答が完了したかどうかを示すブール値フラグ、および要求中または要求の後処理中に発生したエラーを含むタプルを返します。

パラメーター名	説明
`{PrometheusEndpoint} props.endpoint`	PrometheusEndpoint (ラベル、クエリー、範囲、ルール、ターゲット) のいずれか
`{string} [props.query]`	(オプション) Prometheus クエリー文字列。空または未定義の場合、ポーリングは開始されません。
`{number} [props.delay]`	(オプション) ポーリング遅延間隔 (ミリ秒)
`{number} [props.endTime]`	(オプション) QUERY_RANGE エンドポイントの場合、クエリー範囲の終わり
`{number} [props.samples]`	(オプション) QUERY_RANGE エンドポイント用
`{number} [options.timespan]`	(オプション) QUERY_RANGE エンドポイント用
`{string} [options.namespace]`	(オプション) 追加する検索パラメーター
`{string} [options.timeout]`	(オプション) 追加する検索パラメーター

`Timestamp`

タイムスタンプをレンダリングするコンポーネント。タイムスタンプは、Timestamp コンポーネントの個々のインスタンス間で同期されます。指定されたタイムスタンプは、ユーザーロケールに従ってフォーマットされます。

パラメーター名	説明
`timestamp`	レンダリングするタイムスタンプ。形式は、ISO 8601 (Kubernetes で使用)、エポックタイムスタンプ、または日付のインスタンスであることが期待されます。
`simple`	アイコンとツールチップを省略したシンプルなバージョンのコンポーネントをレンダリングします。
`omitSuffix`	接尾辞を省略して日付をフォーマットします。
`className`	コンポーネントの追加のクラス名。

`useModal`

モーダルを起動するためのフック。

例

const context: AppPage: React.FC = () => {<br/> const [launchModal] = useModal();<br/> const onClick = () => launchModal(ModalComponent);<br/> return (<br/>   <Button onClick={onClick}>Launch a Modal</Button><br/> )<br/>}<br/>`

`ActionServiceProvider`

console.action/provider 拡張タイプの他のプラグインからのコントリビューションを受け取ることを可能にするコンポーネント。

例

   const context: ActionContext = { 'a-context-id': { dataFromDynamicPlugin } };

   ...

   <ActionServiceProvider context={context}>
       {({ actions, options, loaded }) =>
         loaded && (
           <ActionMenu actions={actions} options={options} variant={ActionMenuVariant.DROPDOWN} />
         )
       }
   </ActionServiceProvider>

パラメーター名	説明
`context`	contextId とオプションのプラグインデータを含むオブジェクト

`NamespaceBar`

namespace のドロップダウンメニューが左端にある水平ツールバーをレンダリングするコンポーネント。追加のコンポーネントを子として渡すことができ、namespace ドロップダウンの右側にレンダリングされます。このコンポーネントは、ページの上部で使用するように設計されています。k8s リソースを含むページなど、ユーザーがアクティブな namespace を変更できる必要があるページで使用する必要があります。

例

   const logNamespaceChange = (namespace) => console.log(`New namespace: ${namespace}`);

   ...

   <NamespaceBar onNamespaceChange={logNamespaceChange}>
     <NamespaceBarApplicationSelector />
   </NamespaceBar>
   <Page>

     ...

パラメーター名	説明
`onNamespaceChange`	(オプション) namespace オプションが選択されたときに実行される関数。唯一の引数として、文字列の形式で新しい namespace を受け入れます。オプションが選択されると、アクティブな namespace が自動的に更新されますが、この関数を介して追加のロジックを適用できます。namespace が変更されると、URL の namespace パラメーターが以前の namespace から新しく選択された namespace に変更されます。
`isDisabled`	(オプション) true に設定されている場合、namespace のドロップダウンを無効にするブール値フラグ。このオプションは namespace ドロップダウンにのみ適用され、子コンポーネントには影響しません。
`children`	(オプション) namespace ドロップダウンの右側にあるツールバー内にレンダリングされる追加の要素。

`ErrorBoundaryFallbackPage`

フルページの ErrorBoundaryFallbackPage コンポーネントを作成して、"Oh no!Something went wrong." というメッセージと、スタックトレースおよびその他の役立つデバッグ情報を表示します。これは、コンポーネントと組み合わせて使用されます。

例

//in ErrorBoundary component
 return (
   if (this.state.hasError) {
     return <ErrorBoundaryFallbackPage errorMessage={errorString} componentStack={componentStackString}
      stack={stackTraceString} title={errorString}/>;
   }

   return this.props.children;
)

パラメーター名	説明
`errorMessage`	エラーメッセージのテキスト説明
`componentStack`	例外のコンポーネントトレース
`stack`	例外のスタックトレース
`title`	エラー境界ページのヘッダーとしてレンダリングするタイトル

`QueryBrowser`

Prometheus PromQL クエリーからの結果のグラフを、グラフと対話するためのコントロールとともにレンダリングするコンポーネント。

例

<QueryBrowser
  defaultTimespan={15 * 60 * 1000}
  namespace={namespace}
  pollInterval={30 * 1000}
  queries={[
    'process_resident_memory_bytes{job="console"}',
    'sum(irate(container_network_receive_bytes_total[6h:5m])) by (pod)',
  ]}
/>

パラメーター名	説明
`customDataSource`	(オプション) PromQL クエリーを処理する API エンドポイントのベース URL。指定した場合、これはデータをフェッチするためのデフォルト API の代わりに使用されます。
`defaultSamples`	(オプション) 各データ系列に対してプロットされるデータサンプルのデフォルトの数。データ系列が多い場合、QueryBrowser はここで指定した数よりも少ない数のデータサンプルを自動的に選択することがあります。
`defaultTimespan`	(オプション) グラフのデフォルトのタイムスパン (ミリ秒単位) - デフォルトは 1,800,000 (30 分) です。
`disabledSeries`	(オプション) これらの正確なラベルと値のペアを持つデータシリーズを無効にします (表示しません)。
`disableZoom`	(オプション) グラフのズームコントロールを無効にするフラグ。
`filterLabels`	(オプション) 必要に応じて、返されたデータ系列をこれらのラベルと値のペアに一致するデータ系列のみにフィルタリングします。
`fixedEndTime`	(オプション) 現在の時刻までのデータを表示するのではなく、表示される時間範囲の終了時刻を設定します。
`formatSeriesTitle`	(オプション) 単一のデータ系列のタイトルとして使用する文字列を返す関数。
`GraphLink`	(オプション) 別のページへのリンクをレンダリングするためのコンポーネント (たとえば、このクエリーに関する詳細情報を取得する)。
`hideControls`	(オプション) グラフのタイムスパンなどを変更するためのグラフコントロールを非表示にするフラグ。
`isStack`	(オプション) 折れ線グラフの代わりに積み上げグラフを表示するフラグ。showStackedControl が設定されている場合でも、ユーザーは折れ線グラフに切り替えることができます。
`namespace`	(オプション) 指定した場合、この namespace のデータのみが返されます (この namespace ラベルを持つシリーズのみ)。
`onZoom`	(オプション) グラフがズームされたときに呼び出されるコールバック。
`pollInterval`	(オプション) 設定すると、最新のデータを表示するためにグラフが更新される頻度 (ミリ秒単位) が決まります。
`queries`	実行して結果をグラフに表示する PromQL クエリーの配列。
`showLegend`	(オプション) グラフの下に凡例を表示できるようにするフラグ。
`showStackedControl`	積み上げグラフモードと折れ線グラフモードを切り替えるためのグラフコントロールの表示を有効にするフラグ。
`timespan`	(オプション) グラフがカバーするタイムスパン (ミリ秒単位)。
`units`	(オプション) Y 軸およびツールチップに表示する単位。

`useAnnotationsModal`

Kubernetes リソースのアノテーションを編集するためのモーダルを起動するコールバックを提供するフック。

例

const PodAnnotationsButton = ({ pod }) => {
  const { t } = useTranslation();
  const launchAnnotationsModal = useAnnotationsModal<PodKind>(pod);
  return <button onClick={launchAnnotationsModal}>{t('Edit Pod Annotations')}</button>
}

パラメーター名	説明
`resource`	K8sResourceCommon タイプのオブジェクトのアノテーションを編集するためのリソース。

戻り値

リソースのアノテーションを編集するためのモーダルを起動する関数。

`useDeleteModal`

リソースを削除するためのモーダルを起動するコールバックを提供するフック。

例

const DeletePodButton = ({ pod }) => {
  const { t } = useTranslation();
  const launchDeleteModal = useDeleteModal<PodKind>(pod);
  return <button onClick={launchDeleteModal}>{t('Delete Pod')}</button>
}

パラメーター名	説明
`resource`	削除するリソース。
`redirectTo`	(オプション) リソースを削除した後にリダイレクトする場所。
`message`	(オプション) モーダルに表示するメッセージ。
`btnText`	(オプション) 削除ボタンに表示するテキスト。
`deleteAllResources`	(オプション) 同じ種類のリソースをすべて削除する機能。

戻り値

リソースを削除するためのモーダルを起動する関数。

`useLabelsModel`

Kubernetes リソースラベルを編集するためのモーダルを起動するコールバックを提供するフック。

例

const PodLabelsButton = ({ pod }) => {
  const { t } = useTranslation();
  const launchLabelsModal = useLabelsModal<PodKind>(pod);
  return <button onClick={launchLabelsModal}>{t('Edit Pod Labels')}</button>
}

パラメーター名	説明
`resource`	ラベルを編集するリソース (K8sResourceCommon タイプのオブジェクト)。

戻り値

リソースのラベルを編集するためのモーダルを起動する関数。

`useActiveNamespace`

現在アクティブな namespace と、アクティブな namespace を設定するためのコールバックを提供するフック。

例

const Component: React.FC = (props) => {
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
   return <select
     value={activeNamespace}
     onChange={(e) => setActiveNamespace(e.target.value)}
   >
     {
       // ...namespace options
     }
   </select>
}

戻り値

現在アクティブな namespace とセッターコールバックを含むタプル。

`PerspectiveContext`

非推奨: 代わりに、指定された usePerspectiveContext を使用してください。パースペクティブコンテキストを作成します。

パラメーター名	説明
`PerspectiveContextType`	アクティブなパースペクティブとセッターを含むオブジェクト

`useAccessReviewAllowed`

非推奨: 代わりに @console/dynamic-plugin-sdk の useAccessReview を使用してください。指定されたリソースへのユーザーアクセスに関する使用可能なステータスを指定するフック。isAllowed ブール値を返します。

パラメーター名	説明
`resourceAttributes`	アクセスレビューのリソース属性
`impersonate`	権限借用の詳細

`useSafetyFirst`

非推奨: このフックはコンソールの機能とは関係ありません。指定されたコンポーネントがアンマウントされた場合に備えて、React 状態の安全な非同期設定を保証するフック。状態値とその set 関数のペアを含む配列を返します。

パラメーター名	説明
`initialState`	初期状態値

`YAMLEditor`

非推奨: ホバーヘルプと補完を備えた基本的な遅延ロード YAML エディター。

例

<React.Suspense fallback={<LoadingBox />}>
  <YAMLEditor
    value={code}
  />
</React.Suspense>

パラメーター名	説明
`value`	レンダリングする yaml コードを表す文字列。
`options`	Monaco エディターのオプション。
`minHeight`	有効な CSS の高さの値における最小のエディターの高さ。
`showShortcuts`	エディターの上にショートカットを表示するためのブール値。
`toolbarLinks`	エディター上部のツールバーリンクセクションにレンダリングされる ReactNode の配列。
`onChange`	コード変更イベントのコールバック。
`onSave`	コマンド CTRL / CMD + S がトリガーされたときに呼び出されるコールバック。
`ref`	`{ editor?: IStandaloneCodeEditor }` への参照に反応します。`editor` プロパティーを使用すると、エディターを制御するすべてのメソッドにアクセスできます。

7.5.3. 動的プラグインのトラブルシューティング

プラグインのロードで問題が発生した場合は、このトラブルシューティングのヒントのリストを参照してください。

以下のコマンドを実行して、コンソールの Operator 設定でプラグインが有効になっており、プラグイン名が出力されていることを確認します。
```
$ oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}'
```
- Administrator perspective の Overview ページのステータスカードで、有効なプラグインを確認します。プラグインが最近有効になった場合は、ブラウザーを更新する必要があります。
次の方法で、プラグインサービスが正常であることを確認します。
- プラグイン Pod のステータスが実行中であり、コンテナーの準備が整っていることを確認します。
- サービスラベルセレクターが Pod と一致し、ターゲットポートが正しいことを確認します。
- コンソール Pod またはクラスター上の別の Pod のターミナルで、サービスから plugin-manifest.json をカールします。
ConsolePlugin リソース名 (consolePlugin.name) が package.json で使用されているプラグイン名と一致することを確認します。
サービス名、namespace、ポート、およびパスが ConsolePlugin リソースで正しく宣言されていることを確認します。
プラグインサービスが HTTPS とサービス提供証明書を使用していることを確認します。
コンソール Pod ログで証明書または接続エラーを確認します。
プラグインが依存する機能フラグが無効になっていないことを確認します。
プラグインの package.json に一致しない consolePlugin.dependencies がないことを確認します。
- これには、コンソールバージョンの依存関係または他のプラグインへの依存関係が含まれる場合があります。ブラウザーで JS コンソールをプラグインの名前でフィルタリングして、ログに記録されたメッセージを表示します。
ナビゲーション拡張パースペクティブまたはセクション ID にタイプミスがないことを確認します。
- プラグインはロードされている可能性がありますが、ID が正しくない場合、ナビゲーション項目が表示されません。URL を編集して、プラグインページに直接移動してみてください。
コンソール Pod からプラグインサービスへのトラフィックをブロックしているネットワークポリシーがないことを確認します。
- 必要に応じて、ネットワークポリシーを調整して、openshift-console namespace のコンソール Pod がサービスにリクエストを送信できるようにします。
開発者ツールブラウザーの Console タブで、ブラウザーにロードされる動的プラグインのリストを確認します。
- window.SERVER_FLAGS.consolePlugins を評価して、コンソールフロントエンドの動的プラグインを確認します。

関連情報

サービス提供証明書について