7.5. 動的プラグイン参照


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

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

console.action/filter

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

Name値のタイプ任意説明

contextId

string

いいえ

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

filter

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

いいえ

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

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

console.action/group

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

Name値のタイプ任意説明

id

string

いいえ

アクションの選択を識別するための ID。

label

string

yes

UI に表示されるラベル。サブメニューに必要です。

submenu

boolean

yes

このグループをサブメニューとして表示するかどうか。

insertBefore

string | string[]

yes

ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。

insertAfter

string | string[]

yes

ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。insertBefore 値が優先されます。

console.action/provider

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

Name値のタイプ任意説明

contextId

string

いいえ

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

provider

CodeRef<ExtensionHook<Action[], any>>

いいえ

指定のスコープのアクションを返す React フック。contextId = resource の場合には、スコープは常に Kubernetes リソースオブジェクトになります。

console.action/resource-provider

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

Name値のタイプ任意説明

model

ExtensionK8sKindVersionModel

いいえ

このプロバイダーがアクションを提供するモデル。

provider

CodeRef<ExtensionHook<Action[], any>>

いいえ

指定のリソースモデルに対するアクションを返す反応フック

console.alert-action

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

Name値のタイプ任意説明

alert

string

いいえ

alert.rule.name プロパティーで定義されたアラート名

text

string

いいえ

 

action

CodeRef<(alert: any) ⇒ void>

いいえ

副次的な影響を実行する関数

console.catalog/item-filter

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

Name値のタイプ任意説明

catalogId

string | string[]

いいえ

このプロバイダーが提供するカタログの一意の識別子。

type

string

いいえ

カタログ項目タイプのタイプ ID。

filter

CodeRef<(item: CatalogItem) ⇒ boolean>

いいえ

特定のタイプの項目をフィルタリングします。Value は、CatalogItem[] を受け取り、フィルター条件に基づいてサブセットを返す関数です。

console.catalog/item-metadata

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

Name値のタイプ任意説明

catalogId

string | string[]

いいえ

このプロバイダーが提供するカタログの一意の識別子。

type

string

いいえ

カタログ項目タイプのタイプ ID。

provider

CodeRef<ExtensionHook<CatalogItemMetadataProviderFunction, CatalogExtensionHookOptions>>

いいえ

特定のタイプのカタログ項目にメタデータを提供するために使用される関数を返すフック。

console.catalog/item-provider

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

Name値のタイプ任意説明

catalogId

string | string[]

いいえ

このプロバイダーが提供するカタログの一意の識別子。

type

string

いいえ

カタログ項目タイプのタイプ ID。

title

string

いいえ

カタログ項目プロバイダーのタイトル

provider

CodeRef<ExtensionHook<CatalogItem<any>[], CatalogExtensionHookOptions>>

いいえ

項目を取得し、これをカタログ用に正規化します。値は反応効果フックです。

priority

number

yes

このプロバイダーの優先順位。デフォルトは 0 です。優先度の高いプロバイダーは、他のプロバイダーが提供するカタログ項目を上書きする可能性があります。

console.catalog/item-type

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

Name値のタイプ任意説明

type

string

いいえ

カタログ項目をタイプ。

title

string

いいえ

カタログ項目のタイトル。

catalogDescription

string | CodeRef<React.ReactNode>

yes

カタログに固有のタイプの説明。

typeDescription

string

はい

カタログ項目タイプの説明。

filters

CatalogItemAttribute[]

はい

カタログ項目に固有のカスタムフィルター。

groupings

CatalogItemAttribute[]

はい

カタログ項目に固有のカスタムグルーピング。

console.catalog/item-type-metadata

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

Name値のタイプ任意説明

type

string

いいえ

カタログ項目をタイプ。

filters

CatalogItemAttribute[]

はい

カタログ項目に固有のカスタムフィルター。

groupings

CatalogItemAttribute[]

はい

カタログ項目に固有のカスタムグルーピング。

console.cluster-overview/inventory-item

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

Name値のタイプ任意説明

component

CodeRef<React.ComponentType<{}>>

いいえ

レンダリングされるコンポーネント。

console.cluster-overview/multiline-utilization-item

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

Name値のタイプ任意説明

title

string

いいえ

使用状況項目のタイトル。

getUtilizationQueries

CodeRef<GetMultilineQueries>

いいえ

Prometheus 使用状況クエリー。

humanize

CodeRef<Humanize>

いいえ

Prometheus データを人間が判読できる形式に変換します。

TopConsumerPopovers

CodeRef<React.ComponentType<TopConsumerPopoverProps>[]>

yes

プレーン値の代わりに Top コンシューマーポップオーバーを表示します。

console.cluster-overview/utilization-item

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

Name値のタイプ任意説明

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

yes

プレーン値の代わりに Top コンシューマーポップオーバーを表示します。

console.context-provider

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

Name値のタイプ任意説明

provider

CodeRef<Provider<T>>

いいえ

Context プロバイダーコンポーネント。

useValueHook

CodeRef<() ⇒ T>

いいえ

コンテキスト値のフック。

console.dashboards/card

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

Name値のタイプ任意説明

tab

string

いいえ

カードを追加するダッシュボードタブの ID。

position

'LEFT' | 'RIGHT' | 'MAIN'

いいえ

ダッシュボードのカードのグリッド位置。

component

CodeRef<React.ComponentType<{}>>

いいえ

ダッシュボードカードのコンポーネント。

span

OverviewCardSpan

yes

列内のカードの垂直スパン。小さな画面では無視され、デフォルトは 12 です。

console.dashboards/custom/overview/detail/item

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

Name値のタイプ任意説明

title

string

いいえ

Details カードのタイトル

component

CodeRef<React.ComponentType<{}>>

いいえ

OverviewDetailItem コンポーネントによってレンダリングされる値

valueClassName

string

yes

className の値

isLoading

CodeRef<() ⇒ boolean>

yes

コンポーネントのロード中の状態を返す関数

error

CodeRef<() ⇒ string>

yes

コンポーネントごとに表示するエラーを返す関数

console.dashboards/overview/activity/resource

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

Name値のタイプ任意説明

k8sResource

CodeRef<FirehoseResource & { isList: true; }>

いいえ

置き換える使用状況項目。

component

CodeRef<React.ComponentType<K8sActivityProps<T>>>

いいえ

アクションコンポーネント。

isActivity

CodeRef<(resource: T) ⇒ boolean>

はい

指定のリソースがアクションを表すかどうかを判断する関数。定義されていない場合は、すべてのリソースがアクティビティーを表します。

getTimestamp

CodeRef<(resource: T) ⇒ Date>

yes

指定のアクションのタイムスタンプで、順序付けに使用されます。

console.dashboards/overview/health/operator

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

Name値のタイプ任意説明

title

string

いいえ

ポップアップメニューの Operators セクションのタイトル。

resources

CodeRef<FirehoseResource[]>

いいえ

フェッチされ、healthHandler に渡される Kubernetes リソース。

getOperatorsWithStatuses

CodeRef<GetOperatorsWithStatuses<T>>

yes

Operator のステータスを解決します。

operatorRowLoader

CodeRef<React.ComponentType<OperatorRowProps<T>>>

yes

ポップアップ行コンポーネントのローダー。

viewAllLink

string

はい

すべてのリソースページへのリンク。指定しない場合は、resources prop から最初のリソースのリストページが使用されます。

console.dashboards/overview/health/prometheus

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

Name値のタイプ任意説明

title

string

いいえ

サブシステムの表示名。

クエリー

string[]

いいえ

Prometheus クエリー

healthHandler

CodeRef<PrometheusHealthHandler>

いいえ

サブシステムの健全性を解決します。

additionalResource

CodeRef<FirehoseResource>

はい

フェッチされ、healthHandler に渡される追加のリソース。

popupComponent

CodeRef<React.ComponentType<PrometheusHealthPopupProps>>

yes

ポップアップメニューコンテンツのローダー。定義された場合、health 項目はリンクとして表され、指定のコンテンツを含むポップアップメニューが開きます。

popupTitle

string

はい

ポップオーバーのタイトル。

disallowedControlPlaneTopology

string[]

はい

サブシステムを非表示にする必要のあるコントロールプレーントポロジー。

console.dashboards/overview/health/resource

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

Name値のタイプ任意説明

title

string

いいえ

サブシステムの表示名。

resources

CodeRef<WatchK8sResources<T>>

いいえ

フェッチされ、healthHandler に渡される Kubernetes リソース。

healthHandler

CodeRef<ResourceHealthHandler<T>>

いいえ

サブシステムの健全性を解決します。

popupComponent

CodeRef<WatchK8sResults<T>>

yes

ポップアップメニューコンテンツのローダー。定義された場合、health 項目はリンクとして表され、指定のコンテンツを含むポップアップメニューが開きます。

popupTitle

string

はい

ポップオーバーのタイトル。

console.dashboards/overview/health/url

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

Name値のタイプ任意説明

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

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

Name値のタイプ任意説明

model

CodeRef<T>

いいえ

取得する resource のモデル。モデルの label または abbr の取得に使用します。

mapper

CodeRef<StatusGroupMapper<T, R>>

はい

さまざまなステータスをグループにマッピングする関数。

additionalResources

CodeRef<WatchK8sResources<R>>

はい

フェッチされ、mapper 関数に渡される追加のリソース。

console.dashboards/overview/inventory/item/group

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

Name値のタイプ任意説明

id

string

いいえ

ステータスグループの ID。

icon

CodeRef<React.ReactElement<any, string | React.JSXElementConstructor<any>>>

いいえ

ステータスグループアイコンを表す React コンポーネント。

console.dashboards/overview/inventory/item/replacement

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

Name値のタイプ任意説明

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 カードにアクティビティーを追加します。

Name値のタイプ任意説明

クエリー

string[]

いいえ

監視するクエリー。

component

CodeRef<React.ComponentType<PrometheusActivityProps>>

いいえ

アクションコンポーネント。

isActivity

CodeRef<(results: PrometheusResponse[]) ⇒ boolean>

はい

指定のリソースがアクションを表すかどうかを判断する関数。定義されていない場合は、すべてのリソースがアクティビティーを表します。

console.dashboards/project/overview/item

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

Name値のタイプ任意説明

model

CodeRef<T>

いいえ

取得する resource のモデル。モデルの label または abbr の取得に使用します。

mapper

CodeRef<StatusGroupMapper<T, R>>

はい

さまざまなステータスをグループにマッピングする関数。

additionalResources

CodeRef<WatchK8sResources<R>>

はい

フェッチされ、mapper 関数に渡される追加のリソース。

console.dashboards/tab

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

Name値のタイプ任意説明

id

string

いいえ

このタブにカードを追加する場合にタブリンク href として使用される一意のタブ ID。

navSection

'home' | 'storage'

いいえ

タブが属するナビゲーションセクション。

title

string

いいえ

タブのタイトル。

console.file-upload

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

Name値のタイプ任意説明

fileExtensions

string[]

いいえ

サポートされるファイル拡張子。

handler

CodeRef<FileUploadHandler>

いいえ

ファイルドロップアクションを処理する関数。

console.flag

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

Name値のタイプ任意説明

handler

CodeRef<FeatureFlagHandler>

いいえ

任意の機能フラグを設定または設定解除するのに使用されます。

console.flag/hookProvider

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

Name値のタイプ任意説明

handler

CodeRef<FeatureFlagHandler>

いいえ

任意の機能フラグを設定または設定解除するのに使用されます。

console.flag/model

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

Name値のタイプ任意説明

flag

string

いいえ

CRD が検出された後に設定するフラグの名前。

model

ExtensionK8sModel

いいえ

CRD を指すモデル。

console.global-config

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

Name値のタイプ任意説明

id

string

いいえ

クラスター設定リソースインスタンスの一意の識別子。

name

string

いいえ

クラスター設定リソースインスタンスの名前。

model

ExtensionK8sModel

いいえ

クラスター設定リソースを参照するモデル。

namespace

string

いいえ

クラスター設定リソースインスタンスの namespace。

console.model-metadata

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

Name値のタイプ任意説明

model

ExtensionK8sGroupModel

いいえ

カスタマイズするモデル。グループのみ、またはオプションのバージョンおよび種類を指定できます。

badge

ModelBadge

yes

このモデル参照をテクノロジープレビューまたは開発者プレビューとみなすかどうか。

color

string

はい

このモデルに関連付ける色。

label

string

はい

ラベルをオーバーライドします。kind を指定する必要があります。

labelPlural

string

はい

複数形のラベルをオーバーライドします。kind を指定する必要があります。

abbr

string

はい

省略形をカスタマイズします。デフォルトは kind のすべての大文字 (最大 4 文字) です。その kind を指定する必要があります。

console.navigation/href

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

Name値のタイプ任意説明

id

string

いいえ

この項目の一意の識別子。

name

string

いいえ

この項目の名前。

href

string

いいえ

リンクの href の値。

perspective

string

はい

この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。

section

string

はい

この項目が属するナビゲーションセクション。指定されていない場合は、この項目を最上位のリンクとしてレンダリングします。

dataAttributes

{ [key: string]: string; }

はい

データ属性を DOM に追加します。

startsWith

string[]

はい

URL がこのパスのいずれかで始まる場合は、この項目をアクティブと識別します。

insertBefore

string | string[]

yes

ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。

insertAfter

string | string[]

yes

ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。insertBefore が優先されます。

namespaced

boolean

yes

true の場合、/ns/active-namespace を最後に追加します。

prefixNamespaced

boolean

yes

true の場合、先頭に /k8s/ns/active-namespace が追加されます。

console.navigation/resource-cluster

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

Name値のタイプ任意説明

id

string

いいえ

この項目の一意の識別子。

model

ExtensionK8sModel

いいえ

このナビゲーション項目がリンクするモデル。

perspective

string

はい

この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。

section

string

はい

この項目が属するナビゲーションセクション。指定しない場合は、この項目をトップレベルのリンクとしてレンダリングします。

dataAttributes

{ [key: string]: string; }

はい

データ属性を DOM に追加します。

startsWith

string[]

はい

URL がこのパスのいずれかで始まる場合は、この項目をアクティブと識別します。

insertBefore

string | string[]

yes

ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。

insertAfter

string | string[]

yes

ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。insertBefore が優先されます。

name

string

yes

デフォルト名をオーバーライドします。指定されていない場合、リンクの名前はモデルの複数形の値と同じになります。

console.navigation/resource-ns

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

Name値のタイプ任意説明

id

string

いいえ

この項目の一意の識別子。

model

ExtensionK8sModel

いいえ

このナビゲーション項目がリンクするモデル。

perspective

string

はい

この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。

section

string

はい

この項目が属するナビゲーションセクション。指定しない場合は、この項目をトップレベルのリンクとしてレンダリングします。

dataAttributes

{ [key: string]: string; }

はい

データ属性を DOM に追加します。

startsWith

string[]

はい

URL がこのパスのいずれかで始まる場合は、この項目をアクティブと識別します。

insertBefore

string | string[]

yes

ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。

insertAfter

string | string[]

yes

ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。insertBefore が優先されます。

name

string

yes

デフォルト名をオーバーライドします。指定されていない場合、リンクの名前はモデルの複数形の値と同じになります。

console.navigation/section

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

Name値のタイプ任意説明

id

string

いいえ

この項目の一意の識別子。

perspective

string

はい

この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。

dataAttributes

{ [key: string]: string; }

はい

データ属性を DOM に追加します。

insertBefore

string | string[]

yes

ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。

insertAfter

string | string[]

yes

ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。insertBefore が優先されます。

name

string

yes

このセクションの名前。指定しない場合は、セクションの上に区切り記号のみが表示されます。

console.navigation/separator

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

Name値のタイプ任意説明

id

string

いいえ

この項目の一意の識別子。

perspective

string

はい

この項目が属するパースペクティブ ID。指定されていない場合は、デフォルトのパースペクティブに提供します。

section

string

はい

この項目が属するナビゲーションセクション。指定されていない場合は、この項目を最上位のリンクとしてレンダリングします。

dataAttributes

{ [key: string]: string; }

はい

データ属性を DOM に追加します。

insertBefore

string | string[]

yes

ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。

insertAfter

string | string[]

yes

ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。insertBefore が優先されます。

console.page/resource/details
Name値のタイプ任意説明

model

ExtensionK8sGroupKindModel

いいえ

このリソースページがリンクするモデル。

component

CodeRef<React.ComponentType<{ match: match<{}>; namespace: string; model: ExtensionK8sModel; }>>

いいえ

ルートがマッチしたときにレンダリングされるコンポーネント。

console.page/resource/list

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

Name値のタイプ任意説明

model

ExtensionK8sGroupKindModel

いいえ

このリソースページがリンクするモデル。

component

CodeRef<React.ComponentType<{ match: match<{}>; namespace: string; model: ExtensionK8sModel; }>>

いいえ

ルートがマッチしたときにレンダリングされるコンポーネント。

console.page/route

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

Name値のタイプ任意説明

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 を参照してください。

Name値のタイプ任意説明

component

CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>

いいえ

ルートがマッチしたときにレンダリングされるコンポーネント。

path

string | string[]

いいえ

path-to-regexp@^1.7.0 が理解する有効な URL パスまたはパスの配列。

exact

boolean

はい

true の場合、パスが location.pathname と完全に一致する場合にのみマッチします。

console.perspective

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

Name値のタイプ任意説明

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

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

Name値のタイプ任意説明

component

CodeRef<React.ComponentType<{ projectName: string; }>>

いいえ

レンダリングされるコンポーネント。

console.project-overview/utilization-item

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

Name値のタイプ任意説明

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

yes

プレーン値の代わりに最上位のコンシューマーポップオーバーを表示します。

console.pvc/alert

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

Name値のタイプ任意説明

alert

CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>

いいえ

アラートコンポーネント。

console.pvc/create-prop

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

Name値のタイプ任意説明

label

string

いいえ

prop アクション作成のラベル。

path

string

いいえ

prop アクション作成のパス。

console.pvc/delete

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

Name値のタイプ任意説明

predicate

CodeRef<(pvc: K8sResourceCommon) ⇒ boolean>

いいえ

エクステンションを使用するかどうかを示す述語。

onPVCKill

CodeRef<(pvc: K8sResourceCommon) ⇒ Promise<void>>

いいえ

PVC 削除操作の方法。

alert

CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>

いいえ

追加情報を表示するアラートコンポーネント。

console.pvc/status
Name値のタイプ任意説明

priority

number

いいえ

status コンポーネントの優先度。値が大きいほど優先度が高くなります。

status

CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>

いいえ

status コンポーネント。

predicate

CodeRef<(pvc: K8sResourceCommon) ⇒ boolean>

いいえ

ステータスコンポーネントをレンダリングするかどうかを示す述語。

console.redux-reducer

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

Name値のタイプ任意説明

scope

string

いいえ

Redux 状態オブジェクト内の reducer が管理するサブ状態を表すキー。

reducer

CodeRef<Reducer<any, AnyAction>>

いいえ

reducer が管理するサブ状態で動作する reducer 関数

console.resource/create

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

Name値のタイプ任意説明

model

ExtensionK8sModel

いいえ

この create resource ページがレンダリングされるモデル。

component

CodeRef<React.ComponentType<CreateResourceComponentProps>>

いいえ

モデルがマッチする場合にレンダリングされるコンポーネント

console.resource/details-item

詳細ページのデフォルトのリソース概要に、新しい詳細項目を追加します。

Name値のタイプ任意説明

model

ExtensionK8sModel

いいえ

対象リソースの API グループ、バージョン、カインド。

id

string

いいえ

一意の ID

column

DetailsItemColumn

いいえ

項目を、詳細ページのリソース概要の '左列' と '右列' のどちらに表示するかを指定します。デフォルト: 'right'

title

string

いいえ

詳細項目のタイトル。

path

string

yes

詳細項目の値として使用されるリソースプロパティーへの完全修飾パス (オプション)。primitive type の値以外は直接レンダリングできません。他のデータ型を処理するには、コンポーネントプロパティーを使用します。

component

CodeRef<React.ComponentType<DetailsItem ComponentProps<K8sResourceCommon, any>>>

yes

詳細項目の値をレンダリングする React コンポーネント (オプション)。

sortWeight

number

yes

同じ列内の他の詳細項目すべてに対する相対的な並べ替えの重み (オプション)。任意の有効な JavaScriptNumber で表されます。各列の項目は、低いものから高いものへと個別に並べ替えられます。並べ替えの重みがない項目は、並べ替えの重みがある項目の後に表示されます。

console.storage-class/provisioner

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

Name値のタイプ任意説明

CSI

ProvisionerDetails

yes

Container Storage Interface プロビジョナータイプ

OTHERS

ProvisionerDetails

yes

Other プロビジョナータイプ

console.storage-provider

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

Name値のタイプ任意説明

name

string

いいえ

プロバイダーの表示名。

コンポーネント

CodeRef<React.ComponentType<Partial<RouteComponentProps<{}, StaticContext, any>>>>

いいえ

レンダリングするプロバイダー固有のコンポーネント。

console.tab

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

Name値のタイプ任意説明

contextId

string

いいえ

タブが挿入される水平ナビゲーションに割り当てられるコンテキスト ID。使用できる値: dev-console-observe

name

string

いいえ

タブの表示ラベル

href

string

いいえ

既存の URL に追加される href

component

CodeRef<React.ComponentType<PageComponentProps<K8sResourceCommon>>>

いいえ

タブコンテンツのコンポーネント。

console.tab/horizontalNav

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

Name値のタイプ任意説明

model

ExtensionK8sKindVersionModel

いいえ

このプロバイダーがタブを表示するモデル。

page

{ name: string; href: string; }

いいえ

水平タブに表示されるページ。名前としてタブ名およびタブの href を取ります。

component

CodeRef<React.ComponentType<PageComponentProps<K8sResourceCommon>>>

いいえ

ルートがマッチしたときにレンダリングされるコンポーネント。

console.telemetry/listener

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

Name値のタイプ任意説明

listener

CodeRef<TelemetryEventListener>

いいえ

テレメトリーイベントをリッスンします

console.topology/adapter/build

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

Name値のタイプ任意説明

adapt

CodeRef<(element: GraphElement) ⇒ AdapterDataType<BuildConfigData> | undefined>

いいえ

Build コンポーネントで使用できるデータに要素を適応させるアダプター。

console.topology/adapter/network

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

Name値のタイプ任意説明

adapt

CodeRef<(element: GraphElement) ⇒ NetworkAdapterType | undefined>

いいえ

Networking コンポーネントで使用できるデータに要素を適応させるアダプター。

console.topology/adapter/pod

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

Name値のタイプ任意説明

adapt

CodeRef<(element: GraphElement) ⇒ AdapterDataType<PodsAdapterDataType> | undefined>

いいえ

Pod コンポーネントで使用できるデータに要素を適応させるアダプター。

console.topology/component/factory

ViewComponentFactory の Getter。

Name値のタイプ任意説明

getFactory

CodeRef<ViewComponentFactory>

いいえ

ViewComponentFactory の Getter。

console.topology/create/connector

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

Name値のタイプ任意説明

getCreateConnector

CodeRef<CreateConnectionGetter>

いいえ

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

console.topology/data/factory

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

Name値のタイプ任意説明

id

string

いいえ

ファクトリーの一意の ID。

priority

number

いいえ

ファクトリーの優先度

resources

WatchK8sResourcesGeneric

yes

useK8sWatchResources フックから取得されるリソース。

workloadKeys

string[]

はい

ワークロードが含まれるリソースのキー。

getDataModel

CodeRef<TopologyDataModelGetter>

yes

データモデルファクトリーの Getter。

isResourceDepicted

CodeRef<TopologyDataModelDepicted>

yes

リソースがこのモデルファクトリーによって記述されているかどうかを判断する関数の Getter。

getDataModelReconciler

CodeRef<TopologyDataModelReconciler>

yes

すべてのエクステンションのモデルがロードされた後にデータモデルを調整する関数の Getter。

console.topology/decorator/provider

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

Name値のタイプ任意説明

id

string

いいえ

エクステンション固有のトポロジーデコレーターの ID

priority

number

いいえ

エクステンション固有のトポロジーデコレーターの優先順位

quadrant

TopologyQuadrant

いいえ

エクステンション固有のトポロジーデコレーターのクアドラント

decorator

CodeRef<TopologyDecoratorGetter>

いいえ

エクステンション固有のデコレーター

console.topology/details/resource-alert

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

Name値のタイプ任意説明

id

string

いいえ

このアラートの ID。アラートの破棄後に表示しない場合に状態を保存するために使用されます。

contentProvider

CodeRef<(element: GraphElement) ⇒ DetailsResourceAlertContent | null>

いいえ

アラートの内容を返すフック。

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

Name値のタイプ任意説明

link

CodeRef<(element: GraphElement) ⇒ React.Component | undefined>

いいえ

指定された場合はリソースリンクを返し、指定されない場合は未定義を返します。スタイルには ResourceIcon および ResourceLink プロパティーを使用します。

priority

number

yes

優先度の高いファクトリーからリンクを作成します。

console.topology/details/tab

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

Name値のタイプ任意説明

id

string

いいえ

この詳細タブの一意の識別子。

label

string

いいえ

UI に表示されるタブのラベル。

insertBefore

string | string[]

yes

ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。

insertAfter

string | string[]

yes

ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。insertBefore 値が優先されます。

console.topology/details/tab-section

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

Name値のタイプ任意説明

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[]

yes

ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。

insertAfter

string | string[]

yes

ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。insertBefore 値が優先されます。

console.topology/display/filters

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

Name値のタイプ任意説明

getTopologyFilters

CodeRef<() ⇒ TopologyDisplayOption[]>

いいえ

エクステンション固有のトポロジーフィルターのゲッター

applyDisplayOptions

CodeRef<TopologyApplyDisplayOptions>

いいえ

モデルにフィルターを適用する関数

console.topology/relationship/provider

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

Name値のタイプ任意説明

provides

CodeRef<RelationshipProviderProvides>

いいえ

ソースノードとターゲットノード間に接続を作成できるか判断するために使用

ヒント

string

いいえ

コネクター操作がドロップターゲット上に移動したときに表示されるツールヒント (例: "Create a Visual Connector")

create

CodeRef<RelationshipProviderCreate>

いいえ

接続を作成するためにコネクターがターゲットノード上にドロップされると実行されるコールバック

priority

number

いいえ

関係の優先順位。複数の場合は高い方が優先されます

console.user-preference/group

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

Name値のタイプ任意説明

id

string

いいえ

ユーザー設定グループを識別するのに使用される ID。

label

string

いいえ

ユーザー設定グループのラベル

insertBefore

string

はい

このユーザー設定グループの後に配置しなければならないグループの ID

insertAfter

string

はい

このユーザー設定グループの前に配置しなければならないグループの ID

console.user-preference/item

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

Name値のタイプ任意説明

id

string

いいえ

ユーザー設定項目を特定するために使用され、項目の順序を定義するために insertAfter および insertBefore で参照される ID

label

string

いいえ

ユーザー設定のラベル

description

string

いいえ

ユーザー設定の説明

field

UserPreferenceField

いいえ

ユーザー設定を定義するために値をレンダリングするために使用される入力フィールドのオプション

groupId

string

yes

項目が属するユーザー優先グループを識別するために使用される ID

insertBefore

string

はい

このユーザー設定項目の後に配置しなければならない項目の ID

insertAfter

string

はい

このユーザー設定項目の前に配置しなければならない項目の ID

console.yaml-template

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

Name値のタイプ任意説明

model

ExtensionK8sModel

いいえ

テンプレートに関連付けられたモデル。

template

CodeRef<string>

いいえ

YAML テンプレート。

name

string

いいえ

テンプレートの名前。名前 default を使用して、これをデフォルトテンプレートと識別します。

dev-console.add/action

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

Name値のタイプ任意説明

id

string

いいえ

アクションを識別するための ID。

label

string

いいえ

アクションのラベル。

description

string

いいえ

アクションの説明。

href

string

いいえ

移動先の href

groupId

string

はい

アクションが属するアクショングループを識別するのに使用される ID。

icon

CodeRef<React.ReactNode>

はい

パースペクティブの表示アイコン。

accessReview

AccessReviewResourceAttributes[]

yes

アクションの可視性または有効化を制御するオプションのアクセスレビュー。

dev-console.add/action-group

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

Name値のタイプ任意説明

id

string

いいえ

アクショングループを識別するために使用される ID

name

string

いいえ

アクショングループのタイトル

insertBefore

string

はい

このアクショングループの後に配置しなければならないグループの ID

insertAfter

string

はい

このアクショングループの前に配置しなければならないグループの ID

dev-console.import/environment

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

Name値のタイプ任意説明

imageStreamName

string

いいえ

カスタム環境変数を指定するイメージストリームの名前

imageStreamTags

string[]

いいえ

サポートされるイメージストリームタグのリスト

environments

ImageEnvironment[]

いいえ

環境変数のリスト

console.dashboards/overview/detail/item

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

Name値のタイプ任意説明

component

CodeRef<React.ComponentType<{}>>

いいえ

DetailItem コンポーネントに基づく値

console.page/resource/tab

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

Name値のタイプ任意説明

model

ExtensionK8sGroupKindModel

いいえ

このリソースページがリンクするモデル。

component

CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>

いいえ

ルートがマッチしたときにレンダリングされるコンポーネント。

name

string

いいえ

タブの名前。

href

string

yes

タブリンクのオプション href。指定しない場合は、最初の path が使用されます。

exact

boolean

はい

true の場合、パスが location.pathname と完全に一致する場合にのみマッチします。

7.5.2. 動的プラグイン 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

(オプション) アイコンのサイズ: (smmdlgxl)

RedExclamationCircleIcon

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

<RedExclamationCircleIcon title="Failed" />

パラメーター名説明

className

(オプション) コンポーネントの追加クラス名

title

(オプション) アイコンのタイトル

size

(オプション) アイコンのサイズ: (smmdlgxl)

YellowExclamationTriangleIcon

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

<YellowExclamationTriangleIcon title="Warning" />

パラメーター名説明

className

(オプション) コンポーネントの追加クラス名

title

(オプション) アイコンのタイトル

size

(オプション) アイコンのサイズ: (smmdlgxl)

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

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

パラメーター名説明

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 の場合、列管理の選択に関係なく、名前空間列が含まれます。

{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

表すためのリソースグループ/バージョン/種類

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

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
      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 とセッターコールバックを含むタプル。

useUserSettings

ユーザー設定値と、ユーザー設定値を設定するためのコールバックを提供するフック。

const Component: React.FC = (props) => {
   const [state, setState, loaded] = useUserSettings(
     'devconsole.addPage.showDetails',
     true,
     true,
   );
   return loaded ? (
      <WrappedComponent {...props} userSettingState={state} setUserSettingState={setState} />
    ) : null;
};

戻り値

ユーザー設定値、セッターコールバック、およびロードされたブール値を含むタプル。

useQuickStartContext

現在のクイックスタートコンテキスト値を提供するフック。これにより、プラグインがコンソールのクイックスタート機能と相互運用できるようになります。

const OpenQuickStartButton = ({ quickStartId }) => {
   const { setActiveQuickStart } = useQuickStartContext();
   const onClick = React.useCallback(() => {
       setActiveQuickStart(quickStartId);
   }, [quickStartId]);
   return <button onClick={onClick}>{t('Open Quick Start')}</button>
};

戻り値

クイックスタートコンテキスト値オブジェクト。

PerspectiveContext

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

パラメーター名説明

PerspectiveContextType

アクティブなパースペクティブとセッターを含むオブジェクト

useAccessReviewAllowed

非推奨: 代わりに @console/dynamic-plugin-sdkuseAccessReview を使用してください。指定されたリソースへのユーザーアクセスに関する使用可能なステータスを指定するフック。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 perspectiveOverview ページのステータスカードで、有効なプラグインを確認します。プラグインが最近有効になった場合は、ブラウザーを更新する必要があります。
  • 次の方法で、プラグインサービスが正常であることを確認します。

    • プラグイン 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 を評価して、コンソールフロントエンドの動的プラグインを確認します。
Red Hat logoGithubRedditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

© 2024 Red Hat, Inc.