Web コンソール

第1章 Web コンソールの概要

Red Hat OpenShift Container Platform Web コンソールは、プロジェクトデータを視覚化し、管理およびトラブルシューティングタスクを実行するグラフィカルユーザーインターフェイスを提供します。Web コンソールは、openshift-console プロジェクトのコントロールプレーンノードで Pod として実行されます。これは console-operator Pod によって管理されます。Administrator および Developer パースペクティブの両方がサポートされます。

Administrator および Developer パースペクティブの両方で、OpenShift Container Platform のクイックスタートチュートリアルを作成できます。クイックスタートは、ユーザータスクに関するガイド付きチュートリアルで、アプリケーション、Operator、またはその他の製品オファリングを理解するのに役立ちます。

1.1. Web コンソールの Administrator パースペクティブについて

Administrator パースペクティブでは、クラスターインベントリー、容量、全般的および特定の使用に関する情報、および重要なイベントのストリームを表示できます。これらはすべて、プランニングおよびトラブルシューティングの作業を簡素化するのに役立ちます。プロジェクト管理者とクラスター管理者の両方が Administrator パースペクティブを表示できます。

OpenShift Container Platform 4.7 以降の場合、クラスター管理者は Web Terminal Operator を使用して組み込みのコマンドラインターミナルインスタンスを開くこともできます。

注記

表示されるデフォルトの Web コンソールパースペクティブは、ユーザーのロールによって異なります。ユーザーが管理者として認識される場合、Administrator パースペクティブがデフォルトで表示されます。

Administrator パースペクティブは、以下を実行する機能などの管理者のユースケースに固有のワークフローを提供します。

ワークロード、ストレージ、ネットワーク、およびクラスター設定を管理する。
Operator Hub を使用して Operator をインストールし、管理する。
ユーザーにログインを許可し、ロールおよびロールバインディングを使用してユーザーアクセスを管理できるようにするアイデンティティープロバイダーを追加する。
クラスターの更新、部分的なクラスターの更新、クラスター Operator、カスタムリソース定義 (CRD)、ロールバインディング、リソースクォータなど、さまざまな高度な設定を表示および管理する。
メトリクス、アラート、モニタリングダッシュボードなどのモニタリング機能にアクセスし、管理する。
クラスターに関するロギング、メトリック、および高ステータスの情報を表示し、管理する。
OpenShift Container Platform の Administrator パースペクティブに関連するアプリケーション、コンポーネント、およびサービスと視覚的に対話する。

1.2. Web コンソールの Developer パースペクティブ

Developer パースペクティブは、アプリケーション、サービス、データベースをデプロイするために組み込まれたさまざまな手法を提供します。Developer パースペクティブでは、以下を実行できます。

コンポーネントでのロールアウトのローリングおよび再作成をリアルタイムに可視化する。
アプリケーションのステータス、リソースの使用状況、プロジェクトイベントのストリーミング、およびクォータの消費を表示する。
プロジェクトを他のユーザーと共有する。
プロジェクトで Prometheus Query Language (PromQL) クエリーを実行し、グラフに可視化されたメトリックを検査して、アプリケーションに関する問題のトラブルシューティングを行う。メトリックにより、クラスターの状態と、モニターしているユーザー定義のワークロードに関する情報が提供されます。

OpenShift Container Platform 4.7 以降の場合、クラスター管理者は Web コンソールで組み込みのコマンドラインターミナルインスタンスを開くこともできます。

注記

表示されるデフォルトの Web コンソールパースペクティブは、ユーザーのロールによって異なります。Developer パースペクティブは、ユーザーが開発者として認識される場合、デフォルトで表示されます。

Developer パースペクティブは、以下を実行する機能を含む、開発者のユースケースに固有のワークフローを提供します。

既存のコードベース、イメージ、およびコンテナーファイルをインポートして、OpenShift Container Platform でアプリケーションを作成し、デプロイします。
アプリケーション、コンポーネント、およびプロジェクト内のこれらに関連付けられたサービスと視覚的に対話し、それらのデプロイメントとビルドステータスを監視します。
アプリケーション内のコンポーネントをグループ化し、アプリケーション内およびアプリケーション間でコンポーネントを接続します。
Serverless 機能 (テクノロジープレビュー) を統合します。
Eclipse Che を使用してアプリケーションコードを編集するためのワークスペースを作成します。

Topology ビューを使用して、プロジェクトのアプリケーション、コンポーネント、およびワークロードを表示できます。プロジェクトにワークロードがない場合、Topology ビューにはワークロードを作成またはインポートするためのリンクがいくつか表示されます。Quick Search を使用してコンポーネントを直接インポートすることもできます。

関連情報

Developer パースペクティブで Topology ビューを使用する方法の詳細については、Topology ビューを使用したアプリケーション設定の表示を参照してください。

1.3. パースペクティブへのアクセス

次のように、Web コンソールから Administrator および Developer パースペクティブにアクセスできます。

前提条件

パースペクティブにアクセスするには、Web コンソールにログインしていることを確認してください。デフォルトのパースペクティブは、ユーザーの権限によって自動的に決定されます。すべてのプロジェクトへのアクセス権を持つユーザーには Administrator パースペクティブが選択され、自分のプロジェクトへのアクセスが制限されているユーザーには Developer パースペクティブが選択されます。

関連情報

パースペクティブの変更の詳細については、ユーザー設定の追加を参照してください。

手順

パースペクティブスイッチャーを使用して、Administrator パースペクティブまたは Developer パースペクティブに切り替えます。
Project ドロップダウンリストから既存のプロジェクトを選択します。このドロップダウンから新しいプロジェクトを作成することもできます。

注記

パースペクティブスイッチャーは、cluster-admin としてのみ使用できます。

関連情報

第2章 Web コンソールへのアクセス

OpenShift Container Platform Web コンソールは、Web ブラウザーからアクセスできるユーザーインターフェイスです。開発者は Web コンソールを使用してプロジェクトのコンテンツを視覚的に把握し、参照し、管理することができます。

2.1. 前提条件

Web コンソールを使用するために JavaScript が有効にされている必要があります。WebSocket をサポートする Web ブラウザーを使用することが最も推奨されます。
OpenShift Container Platform 4.x のテスト済みインテグレーションのページを確認してから、クラスターのサポートされるインフラストラクチャーを作成します。

2.2. Web コンソールの理解および Web コンソールへのアクセス

Web コンソールはマスター上で Pod として実行されます。Web コンソールを実行するために必要な静的アセットは Pod によって提供されます。OpenShift Container Platform が openshift-install create cluster を使用して正常にインストールされた後に、Web コンソールの URL およびインストールされたクラスターのログイン認証情報を、インストールプログラムの CLI 出力で確認します。以下に例を示します。

出力例

INFO Install complete!
INFO Run 'export KUBECONFIG=<your working directory>/auth/kubeconfig' to manage the cluster with 'oc', the OpenShift CLI.
INFO The cluster is ready when 'oc login -u kubeadmin -p <provided>' succeeds (wait a few minutes).
INFO Access the OpenShift web-console here: https://console-openshift-console.apps.demo1.openshift4-beta-abcorp.com
INFO Login to the console with user: kubeadmin, password: <provided>

これらの詳細を使用してログインし、Web コンソールにアクセスします。

インストールしていない既存のクラスターの場合、oc whoami --show-console を使用して Web コンソール URL を表示します。

重要

dir パラメーターは、マニフェストファイル、ISO イメージ、および auth ディレクトリーを保存する assets ディレクトリーを指定します。auth ディレクトリーには、kubeadmin-password および kubeconfig ファイルが保存されます。kubeadmin ユーザーとして、設定 export KUBECONFIG=<install_directory>/auth/kubeconfig で kubeconfig ファイルを使用して、クラスターにアクセスできます。kubeconfig は生成された ISO イメージに固有であるため、kubeconfig が設定されていて、oc コマンドが失敗した場合は、システムが生成された ISO イメージで起動しなかった可能性があります。デバッグを実行するには、ブートストラッププロセス中に、kubeadmin-password ファイルの内容を使用して、core ユーザーとしてコンソールにログインできます。

関連情報

Web コンソールで機能セットの有効化

第3章 OpenShift Container Platform Dashboard を使用したクラスター情報の取得

OpenShift Container Platform の Web コンソールは、クラスターに関する概要情報を取得します。

3.1. OpenShift Container Platform ダッシュボードページについて

OpenShift Container Platform Web コンソールから Home → Overview に移動して、クラスターに関する概要情報を取得する OpenShift Container Platform ダッシュボードにアクセスします。

OpenShift Container Platform ダッシュボードは、個別のダッシュボードカードでキャプチャーされるさまざまなクラスター情報を提供します。

OpenShift Container Platform ダッシュボードは以下のカードで構成されます。

Details は、クラスターの詳細情報の概要を表示します。
ステータスには、ok、error、warning、in progress、および unknown が含まれます。リソースでは、カスタムのステータス名を追加できます。
- クラスター
- プロバイダー
- バージョン
Cluster Inventory は、リソースの数および関連付けられたステータスの詳細を表示します。これは、問題の解決に介入が必要な場合に役立ちます。以下に関する情報が含まれます。
- ノード数
- Pod 数
- 永続ストレージボリューム要求
- クラスター内のベアメタルホスト。これらはステータス別に一覧表示されます (metal3 環境でのみ利用可能)。
- 状態別にリスト表示されたクラスター内のベアメタルホスト (metal3 環境でのみ利用可能)
Status は、管理者がクラスターリソースの消費状況を把握するのに役立ちます。リソースをクリックし、指定されたクラスターリソース (CPU、メモリー、またはストレージ) の最大量を消費する Pod およびノードを一覧表示する詳細ページに切り替えます。
Cluster Utilization には、指定期間におけるさまざまなリソースの容量が表示されます。これは、リソース消費量が多い場合に、管理者がその規模と頻度を把握するのに役立ちます。次の情報が表示されます。
- CPU 時間
- メモリー割り当て
- 消費されたストレージ
- 消費されたネットワークリソース
- Pod 数
Activity には、Pod の作成や別のホストへの仮想マシンの移行など、クラスター内の最近のアクティビティーに関連するメッセージがリスト表示されます。

3.2. リソースおよびプロジェクトの制限とクォータの認識

Web コンソールの Developer パースペクティブの Topology ビューで、利用可能なリソースのグラフィカル表示を使用できます。

リソースの制限やクォータに到達したことを示すメッセージがリソースにある場合は、リソース名の周囲に黄色の境界線が表示されます。メッセージを表示するには、リソースをクリックしてサイドパネルを開きます。Topology ビューがズームアウトされている場合、黄色の点はメッセージがあることを示します。

View Shortcuts メニューから List View を使用すると、リソースのリストが表示されます。Alerts 列は、メッセージがあるかどうかを示します。

第4章ユーザー設定の追加

要件に合わせてプロファイルのデフォルト設定を変更できます。デフォルトのプロジェクト、トポロジービュー (グラフまたはリスト)、編集メディア (フォームまたは YAML)、言語設定、およびリソースタイプを設定できます。

ユーザー設定への変更は自動的に保存されます。

4.1. ユーザー設定

クラスターのデフォルトのユーザー設定を指定できます。

手順

ログイン認証情報を使用して OpenShift Container Platform Web コンソールにログインします。
マストヘッドを使用して、ユーザープロファイルのユーザー名とパスワードにアクセスします。
General セクションで、以下を実行します。
1. Theme フィールドで、作業するテーマを設定できます。ログインするたびに、選択したテーマがコンソールのデフォルトとして設定されます。
2. perspective フィールドで、ログインするデフォルトのパースペクティブを設定できます。必要に応じて Administrator または Developer パースペクティブを選択できます。パースペクティブが選択されていない場合には、最後にアクセスしたパースペクティブにログインします。
3. Project フィールドで、作業するプロジェクトを選択します。ログインするたびに、そのプロジェクトがコンソールのデフォルトとして設定されます。
4. Topology フィールドで、トポロジービューのデフォルトをグラフビューか、リストビューに設定できます。選択されていない場合は、コンソールは使用した最後のビューにデフォルト設定されます。
5. Create/Edit resource method フィールドで、リソースの作成または編集設定を指定できます。フォームおよび YAML オプションの両方が利用可能な場合には、選択した内容にコンソールはデフォルト設定されます。
ブラウザーのデフォルトの言語設定を使用するには、言語セクションで、Default browser language を選択します。それ以外の場合は、コンソールに使用する言語を選択します。
Notifications セクションでは、Overview ページまたは通知ドロワーで、特定のプロジェクトに対してユーザーが作成した通知の表示を切り替えることができます。
アプリケーション セクションで:
1. デフォルトの リソースタイプ を表示できます。たとえば、OpenShift Serverless Operator がインストールされている場合、デフォルトのリソースタイプは Serverless Deployment です。それ以外の場合、デフォルトのリソースタイプは Deployment です。
2. リソース タイプ フィールドから、別のリソースタイプをデフォルトのリソースタイプとして選択できます。

第5章 OpenShift Container Platform の Web コンソールの設定

OpenShift Container Platform の Web コンソールを変更して、ログアウトリダイレクト URL を設定したり、クイックスタートチュートリアルを無効にしたりできます。

5.1. 前提条件

OpenShift Container Platform クラスターをデプロイします。

5.2. Web コンソールの設定

console.config.openshift.io リソースを編集して Web コンソールを設定できます。

console.config.openshift.io リソースを編集します。
```
$ oc edit console.config.openshift.io cluster
```
以下の例は、コンソールのリソース定義のサンプルを示しています。
```
apiVersion: config.openshift.io/v1
kind: Console
metadata:
  name: cluster
spec:
  authentication:
    logoutRedirect: "" 1
status:
  consoleURL: "" 2
```
1
ユーザーが Web コンソールからログアウトする際にロードするページの URL を指定します。値を指定しない場合、ユーザーは Web コンソールのログインページに戻ります。logoutRedirect URL を指定することにより、ユーザーはアイデンティティープロバイダー経由でシングルログアウト (SLO) を実行し、シングルサインオンセッションを破棄することができます。
2
Web コンソール URL。これをカスタム値に更新するには、Web コンソール URL のカスタマイズを参照してください。

5.3. Web コンソールでのクイックスタートの無効化

Web コンソールの Administrator パースペクティブを使用して、1 つ以上のクイックスタートを無効にできます。

前提条件

クラスター管理者の権限があり、Web コンソールにログインしている。

手順

Administrator パースペクティブで、Administration → Cluster Settings に移動します。
Cluster Settings ページで、Configuration タブをクリックします。
Configuration ページで、operator.openshift.io と説明が記載されている Console 設定リソースをクリックします。
Action ドロップダウンリストから Customize を選択し、Cluster configuration ページを開きます。
General タブの Quick starts セクションで、Enabled リストまたは Disabled リストから項目を選択し、矢印ボタンを使用して他方のリストに移動します。
- 1 つのクイックスタートを有効または無効にするには、該当するクイックスタートをクリックし、一重矢印ボタンを使用してクイックスタートを適切なリストに移動します。
- 複数のクイックスタートをまとめて有効または無効にするには、Ctrl を押して移動するクイックスタートをクリックします。次に、一重矢印ボタンを使用してクイックスタートを適切なリストに移動します。
- すべてのクイックスタートをまとめて有効または無効にするには、二重矢印ボタンをクリックして、すべてのクイックスタートを適切なリストに移動します。

第6章 OpenShift Container Platform の Web コンソールのカスタマイズ

OpenShift Container Platform の Web コンソールをカスタマイズして、カスタムロゴ、製品名、リンク、通知、およびコマンドラインのダウンロードを設定できます。これは、Web コンソールを企業や政府の特定要件を満たすように調整する必要がある場合にとくに役立ちます。

6.1. カスタムロゴおよび製品名の追加

カスタムロゴまたはカスタム製品名を追加することで、カスタムブランディングを作成できます。これらの設定は相互に独立しているため、両方またはいずれかを設定できます。

前提条件

管理者権限を持っている。
使用するロゴのファイルを作成します。ロゴは、GIF、JPG、PNG、または SVG を含む共通のイメージ形式のファイルであり、60px の max-height に制限されます。ConfigMap オブジェクトサイズの制約により、イメージサイズは 1 MB を超えてはなりません。

手順

ロゴファイルを openshift-config namespace の設定マップにインポートします。

$ oc create configmap console-custom-logo --from-file /path/to/console-custom-logo.png -n openshift-config

ヒント

または、以下の YAML を適用して設定マップを作成できます。

apiVersion: v1
kind: ConfigMap
metadata:
  name: console-custom-logo
  namespace: openshift-config
binaryData:
  console-custom-logo.png: <base64-encoded_logo> ... 1

1: 有効な base64 でエンコードされたロゴを指定します。

Web コンソールの Operator 設定を編集して、customLogoFile および customProductName を組み込みます。
```
$ oc edit consoles.operator.openshift.io cluster
```
```
apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
spec:
  customization:
    customLogoFile:
      key: console-custom-logo.png
      name: console-custom-logo
    customProductName: My Console
```
Operator 設定が更新されると、カスタムロゴ設定マップをコンソール namespace に同期し、これをコンソール Pod にマウントし、再デプロイします。
正常に実行されたかどうかを確認します。問題がある場合は、コンソールクラスター Operator は Degraded ステータスを報告し、コンソール Operator 設定も CustomLogoDegraded ステータスを KeyOrFilenameInvalid または NoImageProvided などの理由と共に報告します。
clusteroperator を確認するには、以下を実行します。
```
$ oc get clusteroperator console -o yaml
```
コンソール Operator 設定を確認するには、以下を実行します。
```
$ oc get consoles.operator.openshift.io -o yaml
```

6.2. Web コンソールでのカスタムリンクの作成

前提条件

管理者権限を持っている。

手順

Administration → Custom Resource Definitions から、ConsoleLink をクリックします。
Instances タブを選択します。

Create Console Link をクリックし、ファイルを編集します。

apiVersion: console.openshift.io/v1
kind: ConsoleLink
metadata:
  name: example
spec:
  href: 'https://www.example.com'
  location: HelpMenu 1
  text: Link 1

1: 有効な場所の設定は、HelpMenu、UserMenu、ApplicationMenu、および NamespaceDashboard です。

カスタムリンクがすべての namespace に表示されるようにするには、以下の例に従います。

apiVersion: console.openshift.io/v1
kind: ConsoleLink
metadata:
  name: namespaced-dashboard-link-for-all-namespaces
spec:
  href: 'https://www.example.com'
  location: NamespaceDashboard
  text: This appears in all namespaces

カスタムリンクが一部の namespace のみに表示されるようにするには、以下の例に従います。

apiVersion: console.openshift.io/v1
kind: ConsoleLink
metadata:
  name: namespaced-dashboard-for-some-namespaces
spec:
  href: 'https://www.example.com'
  location: NamespaceDashboard
  # This text will appear in a box called "Launcher" under "namespace" or "project" in the web console
  text: Custom Link Text
  namespaceDashboard:
    namespaces:
    # for these specific namespaces
    - my-namespace
    - your-namespace
    - other-namespace

カスタムリンクがアプリケーションメニューに表示されるようにするには、以下の例に従います。

apiVersion: console.openshift.io/v1
kind: ConsoleLink
metadata:
  name: application-menu-link-1
spec:
  href: 'https://www.example.com'
  location: ApplicationMenu
  text: Link 1
  applicationMenu:
    section: My New Section
    # image that is 24x24 in size
    imageURL: https://via.placeholder.com/24

Save をクリックして変更を適用します。

6.3. コンソールルートのカスタマイズ

console および downloads ルートについて、カスタムルート機能が ingress 設定ルート設定 API を使用します。console カスタムルートが ingress 設定と console-operator 設定の両方に設定されている場合、新規の ingress 設定のカスタムルート設定が優先されます。console-operator 設定を使用したルート設定は非推奨になりました。

6.3.1. コンソールルートのカスタマイズ

クラスター Ingress 設定の spec.componentRoutes フィールドにカスタムホスト名および TLS 証明書を設定して、コンソールルートをカスタマイズできます。

前提条件

管理者権限のあるユーザーでクラスターにログインしている。
openshift-config namespace に TLS 証明書およびキーを含めたシークレットを作成している。これは、カスタムホスト名の接尾辞のドメインがクラスターのドメイン接尾辞に一致しない場合に必要です。接尾辞が一致する場合には、シークレットはオプションです。
ヒント
oc create secret tls コマンドを使用して TLS シークレットを作成できます。

手順

クラスター Ingress 設定を編集します。
```
$ oc edit ingress.config.openshift.io cluster
```
カスタムのホスト名を設定し、オプションで提供する証明書とキーを設定します。
```
apiVersion: config.openshift.io/v1
kind: Ingress
metadata:
  name: cluster
spec:
  componentRoutes:
    - name: console
      namespace: openshift-console
      hostname: <custom_hostname> 1
      servingCertKeyPairSecret:
        name: <secret_name> 2
```
1
カスタムホスト名。
2
TLS 証明書 (tls.crt) およびキー (tls.key) を含む openshift-config namespace のシークレットへの参照。これは、カスタムホスト名の接尾辞のドメインがクラスターのドメイン接尾辞に一致しない場合に必要です。接尾辞が一致する場合には、シークレットはオプションです。
変更を適用するためにファイルを保存します。

6.3.2. ダウンロードルートのカスタマイズ

クラスター Ingress 設定の spec.componentRoutes フィールドにカスタムホスト名および TLS 証明書を設定して、ダウンロードルートをカスタマイズできます。

前提条件

管理者権限のあるユーザーでクラスターにログインしている。
openshift-config namespace に TLS 証明書およびキーを含めたシークレットを作成している。これは、カスタムホスト名の接尾辞のドメインがクラスターのドメイン接尾辞に一致しない場合に必要です。接尾辞が一致する場合には、シークレットはオプションです。
ヒント
oc create secret tls コマンドを使用して TLS シークレットを作成できます。

手順

クラスター Ingress 設定を編集します。
```
$ oc edit ingress.config.openshift.io cluster
```
カスタムのホスト名を設定し、オプションで提供する証明書とキーを設定します。
```
apiVersion: config.openshift.io/v1
kind: Ingress
metadata:
  name: cluster
spec:
  componentRoutes:
    - name: downloads
      namespace: openshift-console
      hostname: <custom_hostname> 1
      servingCertKeyPairSecret:
        name: <secret_name> 2
```
1
カスタムホスト名。
2
TLS 証明書 (tls.crt) およびキー (tls.key) を含む openshift-config namespace のシークレットへの参照。これは、カスタムホスト名の接尾辞のドメインがクラスターのドメイン接尾辞に一致しない場合に必要です。接尾辞が一致する場合には、シークレットはオプションです。
変更を適用するためにファイルを保存します。

6.4. ログインページのカスタマイズ

サービス利用規約情報をカスタムログインページを使用して作成します。カスタムログインページは、GitHub や Google などのサードパーティーログインプロバイダーを使用している場合にも、ユーザーが信頼し、予想できるブランドのページを提示して、その後にユーザーを認証プロバイダーにリダイレクトする際に役立ちます。また、認証プロセス中にカスタムエラーページをレンダリングすることもできます。

注記

エラーテンプレートのカスタマイズは、要求ヘッダーや OIDC ベースの IDP などのリダイレクトを使用するアイデンティティープロバイダー (IDP) に限定されます。LDAP や htpasswd などのダイレクトパスワード認証を使用する IDP にはこれによる影響がありません。

前提条件

管理者権限を持っている。

手順

以下のコマンドを実行して、変更可能なテンプレートを作成します。

$ oc adm create-login-template > login.html

$ oc adm create-provider-selection-template > providers.html

$ oc adm create-error-template > errors.html

シークレットを作成します。

$ oc create secret generic login-template --from-file=login.html -n openshift-config

$ oc create secret generic providers-template --from-file=providers.html -n openshift-config

$ oc create secret generic error-template --from-file=errors.html -n openshift-config

以下を実行します。
```
$ oc edit oauths cluster
```

仕様を更新します。

apiVersion: config.openshift.io/v1
kind: OAuth
metadata:
  name: cluster
# ...
spec:
  templates:
    error:
        name: error-template
    login:
        name: login-template
    providerSelection:
        name: providers-template

oc explain oauths.spec.templates を実行して、オプションを把握します。

6.5. 外部ログリンクのテンプレートの定義

ログの参照に役立つサービスに接続しているものの、特定の方法で URL を生成する必要がある場合は、リンクのテンプレートを定義できます。

前提条件

管理者権限を持っている。

手順

Administration → Custom Resource Definitions から、ConsoleExternalLogLink をクリックします。
Instances タブを選択します。

Create Console External Log Link をクリックし、ファイルを編集します。

apiVersion: console.openshift.io/v1
kind: ConsoleExternalLogLink
metadata:
  name: example
spec:
  hrefTemplate: >-
    https://example.com/logs?resourceName=${resourceName}&containerName=${containerName}&resourceNamespace=${resourceNamespace}&podLabels=${podLabels}
  text: Example Logs

6.6. カスタム通知バナーの作成

前提条件

管理者権限を持っている。

手順

Administration → Custom Resource Definitions から、ConsoleNotification をクリックします。
Instances タブを選択します。

Create Console Notification をクリックし、ファイルを編集します。

apiVersion: console.openshift.io/v1
kind: ConsoleNotification
metadata:
  name: example
spec:
  text: This is an example notification message with an optional link.
  location: BannerTop 1
  link:
    href: 'https://www.example.com'
    text: Optional link text
  color: '#fff'
  backgroundColor: '#0088ce'

1: 有効な場所の設定は、BannerTop、BannerBottom、および BannerTopBottom です。

Create をクリックして変更を適用します。

6.7. CLI ダウンロードのカスタマイズ

ファイルパッケージを直接ポイントしたり、パッケージを提供する外部ページをポイントできるカスタムのリンクテキストおよび URL を使用して、CLI をダウンロードするリンクを設定できます。

前提条件

管理者権限を持っている。

手順

Administration → Custom Resource Definitions に移動します。
カスタムリソース定義 (CRD) のリストから ConsoleCLIDownload を選択します。

YAML タブをクリックし、編集を行います。

apiVersion: console.openshift.io/v1
kind: ConsoleCLIDownload
metadata:
  name: example-cli-download-links
spec:
  description: |
    This is an example of download links
  displayName: example
  links:
  - href: 'https://www.example.com/public/example.tar'
    text: example for linux
  - href: 'https://www.example.com/public/example.mac.zip'
    text: example for mac
  - href: 'https://www.example.com/public/example.win.zip'
    text: example for windows

Save ボタンをクリックします。

6.8. YAML サンプルの Kubernetes リソースへの追加

YAML サンプルはいつでも Kubernetes リソースに動的に追加できます。

前提条件

クラスター管理者の権限があること。

手順

Administration → Custom Resource Definitions から、ConsoleYAMLSample をクリックします。

YAML をクリックし、ファイルを編集します。

apiVersion: console.openshift.io/v1
kind: ConsoleYAMLSample
metadata:
  name: example
spec:
  targetResource:
    apiVersion: batch/v1
    kind: Job
  title: Example Job
  description: An example Job YAML sample
  yaml: |
    apiVersion: batch/v1
    kind: Job
    metadata:
      name: countdown
    spec:
      template:
        metadata:
          name: countdown
        spec:
          containers:
          - name: counter
            image: centos:7
            command:
            - "bin/bash"
            - "-c"
            - "for i in 9 8 7 6 5 4 3 2 1 ; do echo $i ; done"
          restartPolicy: Never

spec.snippet を使用して、YAML サンプルが完全な YAML リソース定義ではなく、ユーザーのカーソルで既存の YAML ドキュメントに挿入できる断片を示します。

Save をクリックします。

6.9. ユーザーパースペクティブのカスタマイズ

OpenShift Container Platform Web コンソールは、デフォルトで Administrator と Developer の 2 つのパースペクティブを提供します。インストールされているコンソールプラグインによっては、より多くのパースペクティブを使用できる場合があります。クラスター管理者は、すべてのユーザーまたは特定のユーザーロールのパースペクティブを表示または非表示にすることができます。パースペクティブをカスタマイズすると、ユーザーは自分のロールとタスクに適用できるパースペクティブのみを表示できるようになります。たとえば、権限のないユーザーがクラスターリソース、ユーザー、およびプロジェクトを管理できないように、Administrator パースペクティブを非表示にすることができます。同様に、開発者ロールを持つユーザーに Developer パースペクティブを表示して、アプリケーションを作成、デプロイ、および監視できるようにすることができます。

ロールベースのアクセス制御 (RBAC) に基づいて、ユーザーのパースペクティブの表示をカスタマイズすることもできます。たとえば、特定の権限を必要とする監視目的でパースペクティブをカスタマイズする場合、パースペクティブが必要な権限を持つユーザーにのみ表示されるように定義できます。

各パースペクティブには、YAML ビューで編集できる次の必須パラメーターが含まれています。

id: 表示または非表示にするパースペクティブの ID を定義します
visibility: パースペクティブの状態と、必要に応じてアクセスレビューチェックを定義します。
state: パースペクティブが有効か、無効か、アクセスレビューチェックが必要かを定義します

注記

デフォルトでは、すべてのパースペクティブが有効になっています。ユーザーパースペクティブをカスタマイズすると、その変更はクラスター全体に適用されます。

6.9.1. YAML ビューを使用したパースペクティブのカスタマイズ

前提条件

管理者権限を持っている。

手順

Administrator パースペクティブで、Administration → Cluster Settings に移動します。
Configuration タブを選択し、Console (operator.openshift.io) リソースをクリックします。

YAML タブをクリックして、カスタマイズを行います。

パースペクティブを有効または無効にするには、Add user perspectives のスニペットを挿入し、必要に応じて YAML コードを編集します。

apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
spec:
  customization:
    perspectives:
      - id: admin
        visibility:
          state: Enabled
      - id: dev
        visibility:
          state: Enabled

RBAC 権限に基づいてパースペクティブを非表示にするには、ユーザーパースペクティブを非表示 にするためのスニペットを挿入し、必要に応じて YAML コードを編集します。

apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
spec:
  customization:
    perspectives:
      - id: admin
        requiresAccessReview:
          - group: rbac.authorization.k8s.io
            resource: clusterroles
            verb: list
      - id: dev
        state: Enabled

ニーズに基づいてパースペクティブをカスタマイズするには、独自の YAML スニペットを作成します。

apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
spec:
  customization:
    perspectives:
      - id: admin
        visibility:
          state: AccessReview
          accessReview:
            missing:
              - resource: deployment
                verb: list
            required:
              - resource: namespaces
                verb: list
      - id: dev
        visibility:
          state: Enabled

Save をクリックします。

6.9.2. フォームビューを使用したパースペクティブのカスタマイズ

前提条件

管理者権限を持っている。

手順

Administrator パースペクティブで、Administration → Cluster Settings に移動します。
Configuration タブを選択し、Console (operator.openshift.io) リソースをクリックします。
ページの右側にある Actions → Customize をクリックします。
General 設定で、ドロップダウンリストから次のいずれかのオプションを選択して、パースペクティブをカスタマイズします。
- Enabled: すべてのユーザーに対してパースペクティブを有効にします
- Only visible for privileged users: すべての namespace を一覧表示できるユーザーのパースペクティブを有効にします。
- Only visible for unprivileged users: すべての namespace を一覧表示できないユーザーのパースペクティブを有効にします。
- Disabled: すべてのユーザーに対してパースペクティブを無効にします
  変更が保存されたことを確認する通知が開きます。
  注記
  ユーザーパースペクティブをカスタマイズすると、変更は自動的に保存され、ブラウザーの更新後に有効になります。

6.10. 開発者カタログとサブカタログのカスタマイズ

クラスター管理者は、Developer カタログまたはそのサブカタログを編成および管理できます。サブカタログタイプを有効または無効にするか、開発者カタログ全体を無効にすることができます。

developerCatalog.types オブジェクトには、YAML ビューで使用するためにスニペットで定義する必要がある次のパラメーターが含まれています。

state: 開発者カタログタイプのリストを有効にするか無効にするかを定義します。
enabled: ユーザーに表示される開発者カタログタイプ (サブカタログ) のリストを定義します。
disabled: ユーザーに表示されない開発者カタログタイプ (サブカタログ) のリストを定義します。

YAML ビューまたはフォームビューを使用して、次の開発者カタログタイプ (サブカタログ) を有効または無効にすることができます。

6.10.1. YAML ビューを使用した開発者カタログまたはそのサブカタログのカスタマイズ

YAML ビューで YAML コンテンツを編集することにより、開発者カタログをカスタマイズできます。

前提条件

クラスター管理者権限を持つ OpenShift Web コンソールセッション。

手順

Web コンソールの Administrator パースペクティブで、Administration → Cluster Settings に移動します。
Configuration タブを選択し、Console (operator.openshift.io) リソースをクリックして、Details ページを表示します。
YAML タブをクリックしてエディターを開き、必要に応じて YAML コンテンツを編集します。
たとえば、開発者カタログタイプを無効にするには、無効な開発者カタログリソースのリストを定義する次のスニペットを挿入します。
```
apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
...
spec:
  customization:
    developerCatalog:
      categories:
      types:
        state: Disabled
        disabled:
          - BuilderImage
          - Devfile
          - HelmChart
...
```
Save をクリックします。

注記

デフォルトでは、Web コンソールの管理者ビューで開発者カタログタイプが有効になっています。

6.10.2. フォームビューを使用した開発者カタログまたはそのサブカタログのカスタマイズ

Web コンソールのフォームビューを使用して、開発者カタログをカスタマイズできます。

前提条件

クラスター管理者権限を持つ OpenShift Web コンソールセッション。

手順

Administrator パースペクティブで、Administration → Cluster Settings に移動します。
Configuration タブを選択し、Console (operator.openshift.io) リソースをクリックします。
Actions → Customize をクリックします。
それぞれのセクションで、リスト内の項目を有効または無効にします。
検証
開発者カタログをカスタマイズすると、変更内容がシステムに自動的に保存され、更新後にブラウザーで有効になります。

注記

同様の手順を使用して、クイックスタート、クラスターロール、アクションなどの Web UI 項目をカスタマイズできます。

6.10.2.1. YAML ファイルの変更例

開発者カタログをカスタマイズするために、YAML エディターに次のスニペットを動的に追加できます。

次のスニペットを使用して、状態タイプを Enabled に設定してすべてのサブカタログを表示します。

apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
...
spec:
  customization:
    developerCatalog:
      categories:
      types:
        state: Enabled

次のスニペットを使用して、状態タイプを Disabled に設定してすべてのサブカタログを無効にします。

apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
...
spec:
  customization:
    developerCatalog:
      categories:
      types:
        state: Disabled

クラスター管理者が、Web コンソールで有効になっているサブカタログのリストを定義する場合は、次のスニペットを使用します。

apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
...
spec:
  customization:
    developerCatalog:
      categories:
      types:
        state: Enabled
        enabled:
          - BuilderImage
          - Devfile
          - HelmChart
          - ...

第7章動的プラグイン

7.1. 動的プラグインの概要

7.1.1. 動的プラグインについて

動的プラグインを使用すると、実行時にカスタムページおよびその他のエクステンションをインターフェイスに追加できます。ConsolePlugin カスタムリソースはコンソールと共にプラグインを登録し、クラスター管理者は console-operator 設定でプラグインを有効にします。

7.1.2. 主な特長

動的プラグインを使用すると、以下のカスタマイズを OpenShift Container Platform エクスペリエンスに設定することができます。

カスタムページの追加。
管理者と開発者を超えたパースペクティブを追加します。
ナビゲーション項目の追加。
リソースページへのタブおよびアクションの追加。

7.1.3. 全般的なガイドライン

プラグインの作成時には、以下の一般的なガイドラインに従ってください。

プラグインをビルドして実行するには、Node.js と yarn が必要です。
CSS クラス名の前にプラグイン名を付けて、競合を回避します。例: my-plugin__heading および my-plugin_\_icon
他のコンソールページとの一貫したルック、フィール、および動作を維持します。
プラグインの作成時には、react-i18next のローカリゼーションガイドラインに従ってください。以下の例のように useTranslation フックを使用できます。
```
conster Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-demo-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};
```
要素セレクターなど、プラグインコンポーネント外のマークアップに影響を与える可能性のあるセレクターは避けてください。これらは API ではなく、変更される可能性があります。これらを使用すると、プラグインが破損する可能性があります。プラグインコンポーネント外のマークアップに影響を与える可能性のある要素セレクターなどのセレクターを回避します。

PatternFly ガイドライン

プラグインを作成する場合は、PatternFly の使用に関する以下のガイドラインに従ってください。

PatternFly コンポーネンツと PatternFly CSS 変数を使用します。コア PatternFly コンポーネントは SDK から利用できます。Pattern Fly コンポーネントと変数を使用すると、将来のコンソールバージョンでプラグインが一貫しているように見えます。
PatternFly’s accessibility fundamentals に従って、プラグインにアクセスできるようにします。
Bootstrap や Tailwind などの他の CSS ライブラリーは使用しないでください。これらは、PatternFly と競合する可能性があり、コンソールのルックアンドフィールとは一致しません。

7.2. 動的プラグインを使い始める

動的プラグインの使用を開始するには、新しい OpenShift Container Platform 動的プラグインを作成するように環境をセットアップする必要があります。新しいプラグインを作成する方法の例は、Pod ページへのタブの追加を参照してください。

7.2.1. 動的プラグインの開発

ローカルの開発環境を使用してプラグインを実行できます。OpenShift Container Platform Web コンソールは、ログインしているクラスターに接続されているコンテナーで実行されます。

前提条件

OpenShift クラスターが実行中である必要があります。
OpenShift CLI (oc) がインストールされている。
yarn がインストールされている必要があります。
Docker v3.2.0 以降または Podman をインストールして実行している必要があります。

手順

ターミナルで次のコマンドを実行して、yarn を使用してプラグインの依存関係をインストールします。
```
$ yarn install
```
インストール後、以下のコマンドを実行して yarn を起動します。
```
$ yarn run start
```
別のターミナルウィンドウで、CLI を使用して OpenShift Container Platform にログインします。
```
$ oc login
```
以下のコマンドを実行して、ログインしたクラスターに接続されたコンテナーで OpenShift Container Platform Web コンソールを実行します。
```
$ yarn run start-console
```

検証

localhost:9000 にアクセスして、実行中のプラグインを表示します。window.SERVER_FLAGS.consolePlugins の値を検査し、ランタイム時にロードされるプラグインの一覧を表示します。

7.3. クラスターへのプラグインのデプロイ

プラグインを OpenShift Container Platform クラスターにデプロイできます。

7.3.1. Docker を使用したイメージのビルド

クラスターにプラグインをデプロイするには、イメージをビルドし、これをイメージレジストリーにプッシュする必要があります。

手順

以下のコマンドでイメージをビルドします。
```
$ docker build -t quay.io/my-repositroy/my-plugin:latest .
```
オプション: イメージをテストする場合は、以下のコマンドを実行します。
```
$ docker run -it --rm -d -p 9001:80 quay.io/my-repository/my-plugin:latest
```
以下のコマンドを実行してイメージをプッシュします。
```
$ docker push quay.io/my-repository/my-plugin:latest
```

7.3.2. クラスターへのプラグインのデプロイ

レジストリーに変更を加えたイメージをプッシュした後、プラグインをクラスターにデプロイできます。

手順

プラグインをクラスターにデプロイするには、プラグインの名前を Helm リリース名として Helm チャートを、新しい namespace または -n コマンドラインオプションで指定された既存の namespace にインストールします。次のコマンドを使用して、plugin.image パラメーター内のイメージの場所を指定します。
```
$ helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
```
ここでは、以下のようになります。
n <my-plugin-namespace>
プラグインをデプロイする既存の namespace を指定します。
--create-namespace
オプション: 新しい namespace にデプロイする場合は、このパラメーターを使用します。
--set plugin.image=my-plugin-image-location
plugin.image パラメーター内のイメージの場所を指定します。

オプション: charts/openshift-console-plugin/values.yaml ファイルでサポートされている一連のパラメーターを使用して、追加のパラメーターを指定できます。

plugin:
  name: ""
  description: ""
  image: ""
  imagePullPolicy: IfNotPresent
  replicas: 2
  port: 9443
  securityContext:
    enabled: true
  podSecurityContext:
    enabled: true
    runAsNonRoot: true
    seccompProfile:
      type: RuntimeDefault
  containerSecurityContext:
    enabled: true
    allowPrivilegeEscalation: false
    capabilities:
      drop:
        - ALL
  resources:
    requests:
      cpu: 10m
      memory: 50Mi
  basePath: /
  certificateSecretName: ""
  serviceAccount:
    create: true
    annotations: {}
    name: ""
  patcherServiceAccount:
    create: true
    annotations: {}
    name: ""
  jobs:
    patchConsoles:
      enabled: true
      image: "registry.redhat.io/openshift4/ose-tools-rhel8@sha256:e44074f21e0cca6464e50cb6ff934747e0bd11162ea01d522433a1a1ae116103"
      podSecurityContext:
        enabled: true
        runAsNonRoot: true
        seccompProfile:
          type: RuntimeDefault
      containerSecurityContext:
        enabled: true
        allowPrivilegeEscalation: false
        capabilities:
          drop:
            - ALL
      resources:
        requests:
          cpu: 10m
          memory: 50Mi

検証

有効なプラグインのリストを表示するには、Administration → Cluster Settings → Configuration → Console operator.openshift.io → Console plugins に移動するか、Overview ページにアクセスします。

注記

新しいプラグイン設定が表示されるまで数分かかる場合があります。最近プラグインを有効にしたにもかかわらず、プラグインが表示されない場合は、ブラウザを更新する必要が生じる可能性があります。実行時にエラーが発生した場合は、ブラウザー開発者ツールの JS コンソールをチェックして、プラグインコードにエラーがないか調べてください。

7.3.3. ブラウザーでのプラグインの無効化

コンソールユーザーは、disable-plugins クエリーパラメーターを使用して、通常ランタイム時にロードされる特定またはすべての動的プラグインを無効にすることができます。

手順

特定のプラグインを無効にするには、プラグイン名のコンマ区切りリストから無効にするプラグインを削除します。
すべてのプラグインを無効にするには、disable-plugins クエリーパラメーターを空の文字列のままにします。

注記

クラスター管理者は、Web コンソールの Cluster Settings ページでプラグインを無効にできます。

7.3.4. 関連情報

Helm について

7.4. 動的プラグインの例

例を実行する前に、動的プラグイン開発の手順に従って、プラグインが機能していることを確認してください。

7.4.1. Pod ページへのタブの追加

OpenShift Container Platform Web コンソールに対して行うことができるさまざまなカスタマイズがあります。以下の手順では、サンプルとしてプラグインにタブを Pod details ページに追加します。

注記

OpenShift Container Platform Web コンソールは、ログインしているクラスターに接続されているコンテナーで実行されます。独自のプラグインを作成する前にプラグインをテストするための情報については、「動的プラグインの開発」を参照してください。

手順

新しいタブでプラグインを作成するためのテンプレートを含む console-plugin-template リポジトリーにアクセスします。
重要
カスタムプラグインコードは、Red Hat ではサポートされていません。プラグインで利用できるのは、共同コミュニティーのサポートのみです。
Use this template → Create new repository をクリックして、テンプレートの GitHub リポジトリーを作成します。
プラグインの名前で新しいリポジトリーの名前を変更します。
コードを編集できるように、新しいリポジトリーのクローンをローカルマシンに作成します。
package.json ファイルを編集して、プラグインのメタデータを consolePlugin 宣言に追加します。以下に例を示します。
```
"consolePlugin": {
  "name": "my-plugin", 1
  "version": "0.0.1", 2
  "displayName": "My Plugin", 3
  "description": "Enjoy this shiny, new console plugin!", 4
  "exposedModules": {
    "ExamplePage": "./components/ExamplePage"
  },
  "dependencies": {
    "@console/pluginAPI": "/*"
  }
}
```
1
プラグインの名前を更新します。
2
バージョンを更新します。
3
プラグインの表示名を更新します。
4
プラグインの概要を使用して、説明を更新します。

console-extensions.json ファイルに以下を追加します。

{
  "type": "console.tab/horizontalNav",
  "properties": {
    "page": {
      "name": "Example Tab",
      "href": "example"
    },
    "model": {
      "group": "core",
      "version": "v1",
      "kind": "Pod"
    },
    "component": { "$codeRef": "ExampleTab" }
  }
}

package.json ファイルを編集して以下の変更を追加します。

        "exposedModules": {
            "ExamplePage": "./components/ExamplePage",
            "ExampleTab": "./components/ExampleTab"
        }

新しいファイル src/components/ExampleTab.tsx を作成し、以下のスクリプトを追加することで、Pod ページの新規カスタムタブに表示されるメッセージを作成します。
```
import * as React from 'react';

export default function ExampleTab() {
    return (
        <p>This is a custom tab added to a resource using a dynamic plugin.</p>
    );
}
```
プラグインをクラスターにデプロイするには、プラグインの名前を Helm リリース名として Helm チャートを、新しい namespace または -n コマンドラインオプションで指定された既存の namespace にインストールします。次のコマンドを使用して、plugin.image パラメーター内のイメージの場所を指定します。
```
$ helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
```
注記
クラスターへのプラグインのデプロイの詳細は、「クラスターへのプラグインのデプロイ」を参照してください。

検証

Pod ページに移動し、追加されたタブを表示します。

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`	はい	UI に表示されるラベル。サブメニューに必要です。
`submenu`	`boolean`	はい	このグループをサブメニューとして表示するかどうか。
`insertBefore`	`string` \| `string[]`	はい	ここで参照される項目の前に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。
`insertAfter`	`string` \| `string[]`	はい	ここで参照される項目の後に、この項目を挿入します。配列の場合は、最初に見つかったものが順番に使用されます。`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`

Name	値のタイプ	任意
`alert`	`string`	いいえ
`text`	`string`	いいえ
`action`	`CodeRef<(alert: any) ⇒ void>`	いいえ

`console.catalog/item-filter`

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`

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

`console.catalog/item-type`

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

`console.catalog/item-type-metadata`

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>[]>`	はい	プレーン値の代わりに 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>>`	はい	プレーン値の代わりに 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`	はい	列内のカードの垂直スパン。小さな画面では無視され、デフォルトは `12` です。

`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>`	はい	指定のアクションのタイムスタンプで、順序付けに使用されます。

`console.dashboards/overview/detail/item`

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

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

`console.dashboards/overview/health/operator`

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

Name	値のタイプ	任意	説明
`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 サブシステムを追加します。

Name	値のタイプ	任意	説明
`title`	`string`	いいえ	サブシステムの表示名。
`クエリー`	`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 サブシステムを追加します。

Name	値のタイプ	任意	説明
`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 サブシステムを追加します。

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`

クラスターに CRD の存在によって駆動される新規 Web コンソール機能フラグを追加します。

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

`console.global-config`

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

`console.model-metadata`

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

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

`console.navigation/href`

Name	値のタイプ	任意	説明
`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`

Name	値のタイプ	任意	説明
`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`

Name	値のタイプ	任意	説明
`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`

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

`console.navigation/separator`

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

`console.pvc/alert`

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

`console.pvc/create-prop`

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

`console.pvc/delete`

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.storage-provider`

Name	値のタイプ	任意	説明
`name`	`string`	いいえ
`コンポーネント`	`CodeRef<React.ComponentType<Partial<RouteComponentProps<{}, StaticContext, any>>>>`	いいえ

`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>	いいえ

`console.topology/adapter/network`

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

Name	値のタイプ	任意	説明
`adapt`	<(element: GraphElement) ⇒ NetworkAdapterType	undefined>	いいえ

`console.topology/adapter/pod`

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

Name	値のタイプ	任意	説明
`adapt`	`CodeRef<(element: GraphElement) ⇒ AdapterDataType<PodsAdapterDataType>	undefined>	いいえ

`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`	はい	useK8sWatchResources フックから取得されるリソース。
`workloadKeys`	`string[]`	はい	ワークロードが含まれるリソースのキー。
`getDataModel`	`CodeRef<TopologyDataModelGetter>`	はい	データモデルファクトリーの Getter。
`isResourceDepicted`	`CodeRef<TopologyDataModelDepicted>`	はい	リソースがこのモデルファクトリーによって記述されているかどうかを判断する関数の Getter。
`getDataModelReconciler`	`CodeRef<TopologyDataModelReconciler>`	はい	すべてのエクステンションのモデルがロードされた後にデータモデルを調整する関数の Getter。

`console.topology/decorator/provider`

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

Name	値のタイプ	任意
`id`	`string`	いいえ
`priority`	`number`	いいえ
`quadrant`	`TopologyQuadrant`	いいえ
`decorator`	`CodeRef<TopologyDecoratorGetter>`	いいえ

`console.topology/details/resource-alert`

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

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

`console.topology/details/resource-link`

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

Name	値のタイプ	任意	説明
`リンク`	CodeRef<(element: GraphElement) ⇒ React.Component	undefined>	いいえ
指定された場合はリソースリンクを返し、指定されない場合は未定義を返します。スタイルには `ResourceIcon` および `ResourceLink` プロパティーを使用します。	`priority`	`number`	はい

`console.topology/details/tab`

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

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

`console.topology/details/tab-section`

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

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

`console.topology/display/filters`

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

Name	値のタイプ	任意	説明
`getTopologyFilters`	`CodeRef<() ⇒ TopologyDisplayOption[]>`	いいえ
`applyDisplayOptions`	`CodeRef<TopologyApplyDisplayOptions>`	いいえ

`console.topology/relationship/provider`

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

Name	値のタイプ	任意
`provides`	`CodeRef<RelationshipProviderProvides>`	いいえ
`ヒント`	`string`	いいえ
`create`	`CodeRef<RelationshipProviderCreate>`	いいえ
`priority`	`number`	いいえ

`console.user-preference/group`

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

`console.user-preference/item`

Name	値のタイプ	任意	説明
`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 テンプレート。

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

`dev-console.add/action`

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

`dev-console.add/action-group`

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

`dev-console.import/environment`

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

`console.page/resource/tab`

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

Name	値のタイプ	任意	説明
`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`	アクセスレビューのリソース属性
`切り替え`	権限借用の詳細

`useAccessReview`

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

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

`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。通常、リソースの group_verionkind 文字列。

現在のユーザーが選択したアクティブな列 (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`	(オプション) groupd、version、kind を持つオブジェクト
`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 リソースのグループ、バージョン、種類 \{@link K8sGroupVersionKind} が推奨されます。代わりに、非推奨のグループ、バージョン、種類の参照を渡すこともできます。つまり、`group_versionkind` \{@link 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。クラスタースコープのリソースには指定しないでください。
``	options.path - 提供された場合、サブパスとして追加します
``	options.queryParams - URL に含まれるクエリーパラメーター。
``	options.requestInit - 使用するフェッチ初期化オブジェクト。これには、リクエストヘッダー、メソッド、リダイレクトなどを含めることができます。詳細 (リンク: https://microsoft.github.io/PowerBI-JavaScript/interfaces/node_modules_typedoc_node_modules_typescript_lib_lib_dom_d.requestinit.html)

`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。クラスタースコープのリソースには指定しないでください。
``	options.name - 更新するリソース名。
``	options.path - 提供された場合、サブパスとして追加します
``	options.queryParams - URL に含まれるクエリーパラメーター。

`k8sPatchResource`

指定されたオプションに基づいて、クラスター内の任意のリソースにパッチを適用します。クライアントが部分的な更新を実行する必要がある場合、k8sPatch を使用できます。または、k8sUpdate を使用して、既存のリソースを完全に置き換えることもできます。詳細については、データトラッカーを参照してください。パッチが適用されたリソースの応答に解決される 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 - 使用するフェッチ初期化オブジェクト。これには、リクエストヘッダー、メソッド、リダイレクトなどを含めることができます。詳細 \{@link https://microsoft.github.io/PowerBI-JavaScript/interfaces/node_modules_typedoc_node_modules_typescript_lib_lib_dom_d.requestinit.html }
``	options.json - リソースのガベージコレクションを明示的に制御できます。それ以外の場合は、モデルの propagationPolicy がデフォルトになります。

`k8sListResource`

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

パラメーター名	説明
`options`	マップでキーと値のペアとして渡されるもの。
``	options.model - k8s モデル
``	options.queryParams - URL に含まれるクエリーパラメーター。ラベルセレクターとキー labelSelector を渡すことができます。
``	options.requestInit - 使用するフェッチ初期化オブジェクト。これには、リクエストヘッダー、メソッド、リダイレクトなどを含めることができます。詳細 \{@link https://microsoft.github.io/PowerBI-JavaScript/interfaces/node_modules_typedoc_node_modules_typescript_lib_lib_dom_d.requestinit.html }

`k8sListResourceItems`

\{@link 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`	返す機能フラグ

`YAMLEditor`

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

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

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

`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 の 1 つ (ラベル、クエリー、範囲、ルール、ターゲット)
``	{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`	エラー境界ページのヘッダーとしてレンダリングするタイトル

`PerspectiveContext`

@deprecated - 代わりに提供された usePerspectiveContext を使用して、パースペクティブコンテキストを作成します。

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

`useAccessReviewAllowed`

@deprecated - 代わりに @console/dynamic-plugin-sdk の useAccessReview を使用します。特定のリソースへのユーザーアクセスに関する許可ステータスを提供するフック。isAllowed ブール値を返します。

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

`useSafetyFirst`

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

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

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

関連情報

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

第8章 Web 端末

8.1. Web 端末のインストール

OpenShift Container Platform OperatorHub に一覧表示されている Web Terminal Operator を使用して Web 端末をインストールできます。Web 端末 Operator をインストールする際に、DevWorkspace CRD などのコマンドラインの設定に必要なカスタムリソース定義 (CRD) が自動的にインストールされます。Web コンソールでは、Web 端末を開く際に必要なリソースを作成します。

前提条件

OpenShift Container Platform Web コンソールにログインしている。
クラスター管理者パーミッションがある。

手順

Web コンソールの Administrator パースペクティブで、Operators → OperatorHub に移動します。
Filter by keyword ボックスを使用してカタログで Web Terminal Operator を検索し、Web Terminal タイルをクリックします。
Web Terminal ページで Operator に関する簡単な説明を確認してから、Install をクリックします。
Install Operator ページで、すべてのフィールドのデフォルト値を保持します。
- Update Channel メニューの fast オプションは、Web 端末 Operator の最新リリースのインストールを可能にします。
- Installation Mode メニューの All namespaces on the cluster オプションにより、Operator にクラスターのすべての namespace を監視され、Operator をこれらの namespace で利用可能にすることができます。
- Installed Namespace メニューの openshift-operators オプションは、Operator をデフォルトの openshift-operators namespace にインストールします。
- Approval Strategy メニューの Automatic オプションにより、Operator への今後のアップグレードは Operator Lifecycle Manager によって自動的に処理されます。
Install をクリックします。
Installed Operators ページで、View Operator をクリックし、Operator が Installed Operators ページにリスト表示されていることを確認します。
注記
Web Terminal Operator は、DevWorkspace Operator を依存関係としてインストールします。
Operator のインストール後に、ページを更新し、コンソールのマストヘッドにあるコマンドラインターミナルアイコン ( ) を確認します。

8.2. Web 端末の使用

Web コンソールで組み込みコマンドラインターミナルインスタンスを起動できます。この端末のインスタンスは、oc、kubectl、odo、kn、tkn、helm、subctl など、クラスターと対話するための一般的な CLI ツールと共に事前にインストールされます。また、これには作業しているプロジェクトのコンテキストが含まれ、ユーザーの認証情報を使用してユーザーのログインを自動的に行います。

8.2.1. Web 端末へのアクセス

Web Terminal Operator をインストールすると、Web 端末にアクセスできます。Web 端末を初期化した後に、Web 端末で oc、kubectl、odo、kn、tkn、helm、subctl などの事前インストールされた CLI ツールを使用できます。ターミナルで実行したコマンドのリストからコマンドを選択して、コマンドを再実行することができます。これらのコマンドは、複数のターミナルセッション間で保持されます。Web 端末を閉じるまで、またはブラウザーウィンドウかタブを閉じるまで、Web 端末は表示されたままになります。

前提条件

OpenShift Container Platform クラスターにアクセスでき、Web コンソールにログインしている。
Web Terminal Operator がクラスターにインストールされている。

手順

Web 端末を起動するには、コンソールのマストヘッドにあるコマンドラインターミナルアイコン ( ) をクリックします。Web 端末インスタンスが、Command line terminal ペインに表示されます。このインスタンスは、お使いの認証情報を使用して自動的にログインします。
現在のセッションでプロジェクトが選択されていない場合は、DevWorkspace CR を作成する必要があるプロジェクトを Project ドロップダウンリストから選択します。デフォルトでは、現在のプロジェクトが選択されます。
注記
- DevWorkspace CR は存在しない場合にのみ作成されます。
- openshift-terminal プロジェクトは、クラスター管理者に使用されるデフォルトのプロジェクトです。別のプロジェクトを選択するオプションはありません。Web Terminal Operator は、DevWorkspace Operator を依存関係としてインストールします。
オプション: 現在のセッションの Web 端末タイムアウトを設定します。
1. Timeout をクリックします。
2. 表示されるフィールドにタイムアウト値を入力します。
3. ドロップダウンリストから、タイムアウト間隔を Seconds、Minutes、Hour、または Milli Seconds から選択します。
オプション: Web 端末で使用するカスタムイメージを選択します。
1. イメージをクリックします。
2. 表示されるフィールドに、使用するイメージの URL を入力します。
Start をクリックし、選択したプロジェクトを使用して Web 端末を初期化します。
+ をクリックして、コンソールの Web 端末で複数のタブを開きます。

8.3. Web 端末のトラブルシューティング

8.3.1. Web 端末とネットワークポリシー

クラスターにネットワークポリシーが設定されている場合、Web 端末の起動に失敗する可能性があります。Web 端末インスタンスを初期化するには、Web Terminal Operator は Web 端末の Pod と通信して実行中であることを確認する必要があり、OpenShift Container Platform Web コンソールはターミナル内のクラスターへの自動ログイン情報を送信する必要があります。いずれかのステップに失敗した場合には、Web 端末は初期化に失敗し、端末パネルはロード状態にあるように見えます。

この問題を回避するには、端末に使用される namespace のネットワークポリシーが openshift-console および openshift-operators namespace からの ingress を許可していることを確認してください。

8.4. Web 端末のアンインストール

Web Terminal Operator をアンインストールしても、Operator のインストール時に作成されるカスタムリソース定義 (CRD) または管理リソースは削除されません。セキュリティー上の理由から、これらのコンポーネントは手動でアンインストールする必要があります。これらのコンポーネントを削除すると、Operator をアンインストールしても端末はアイドル状態にならないため、クラスターリソースが保存されます。

Web 端末のアンインストールは 2 つの手順で実行されます。

Operator のインストール時に追加された Web 端末 Operator および関連するカスタムリソース (CR) をアンインストールします。
Web 端末 Operator の依存関係として追加された DevWorkspace Operator とそれに関連するカスタムリソースをアンインストールします。

8.4.1. Web Terminal Operator の削除

Web 端末をアンインストールするには、Operator が使用する Web Terminal Operator とカスタムリソースを削除します。

前提条件

クラスター管理者のパーミッションを持つ OpenShift Container Platform クラスターにアクセスできる。
oc CLI がインストールされている。

手順

Web コンソールの Administrator パースペクティブで、Operators → Installed Operators に移動します。
フィルターリストをスクロールするか、Filter by name ボックスにキーワードを入力して Web Terminal Operator を見つけます。
Web Terminal Operator の Options メニューをクリックし、Uninstall Operator を選択します。
Uninstall Operator 確認ダイアログボックスで、Uninstall をクリックし、Operator、Operator デプロイメント、および Pod をクラスターから削除します。この Operator は実行を停止し、更新を受信しなくなります。

8.4.2. DevWorkspace Operator の削除

Web 端末を完全にアンインストールするには、Operator が使用する DevWorkspace Operator とカスタムリソースも削除する必要があります。

重要

DevWorkspace Operator はスタンドアロン Operator であり、クラスターにインストールされている他の Operator の依存関係として必要になる場合があります。DevWorkspace Operator が不要であることが確実な場合にのみ、以下の手順を実行してください。

前提条件

クラスター管理者のパーミッションを持つ OpenShift Container Platform クラスターにアクセスできる。
oc CLI がインストールされている。

手順

Operator が使用する DevWorkspace カスタムリソースと関連する Kubernetes オブジェクトを削除します。
```
$ oc delete devworkspaces.workspace.devfile.io --all-namespaces --all --wait
```
```
$ oc delete devworkspaceroutings.controller.devfile.io --all-namespaces --all --wait
```
警告
この手順が完了していない場合、ファイナライザーにより Operator を完全にアンインストールすることが困難になります。

Operator によって使用される CRD を削除します。

警告

DevWorkspace Operator は、変換 Webhook を使用するカスタムリソース定義 (CRD) を提供します。これらの CRD の削除に失敗すると、クラスターで問題が発生する可能性があります。

$ oc delete customresourcedefinitions.apiextensions.k8s.io devworkspaceroutings.controller.devfile.io

$ oc delete customresourcedefinitions.apiextensions.k8s.io devworkspaces.workspace.devfile.io

$ oc delete customresourcedefinitions.apiextensions.k8s.io devworkspacetemplates.workspace.devfile.io

$ oc delete customresourcedefinitions.apiextensions.k8s.io devworkspaceoperatorconfigs.controller.devfile.io

関連するすべてのカスタムリソース定義が削除されていることを確認します。以下のコマンドを実行しても何も出力されないはずです。
```
$ oc get customresourcedefinitions.apiextensions.k8s.io | grep "devfile.io"
```
devworkspace-webhook-server デプロイメント、変更用および検証用の Webhook を削除します。
```
$ oc delete deployment/devworkspace-webhook-server -n openshift-operators
```
```
$ oc delete mutatingwebhookconfigurations controller.devfile.io
```
```
$ oc delete validatingwebhookconfigurations controller.devfile.io
```
注記
変更用および検証用の Webhook を削除せずに devworkspace-webhook-server デプロイメントを削除した場合、oc exec コマンドを使用してクラスターのコンテナーでコマンドを実行できません。Webhook を削除したら、oc exec コマンドを再度使用できます。

残りのサービス、シークレット、および設定マップを削除します。インストールによっては、以下のコマンドに含まれる一部のリソースがクラスターに存在しない場合があります。

$ oc delete all --selector app.kubernetes.io/part-of=devworkspace-operator,app.kubernetes.io/name=devworkspace-webhook-server -n openshift-operators

$ oc delete serviceaccounts devworkspace-webhook-server -n openshift-operators

$ oc delete clusterrole devworkspace-webhook-server

$ oc delete clusterrolebinding devworkspace-webhook-server

DevWorkspace Operator をアンインストールします。
1. Web コンソールの Administrator パースペクティブで、Operators → Installed Operators に移動します。
2. フィルターリストをスクロールするか、Filter by name ボックスにキーワードを入力して DevWorkspace Operator を見つけます。
3. Operator のオプションメニューをクリックし、Uninstall Operator を選択します。
4. Uninstall Operator 確認ダイアログボックスで、Uninstall をクリックし、Operator、Operator デプロイメント、および Pod をクラスターから削除します。この Operator は実行を停止し、更新を受信しなくなります。

第9章 OpenShift Container Platform の Web コンソールの無効化

OpenShift Container Platform の Web コンソールを無効にすることができます。

9.1. 前提条件

OpenShift Container Platform クラスターをデプロイします。

9.2. Web コンソールの無効化

consoles.operator.openshift.io リソースを編集して Web コンソールを無効にすることができます。

consoles.operator.openshift.io リソースを編集します。
```
$ oc edit consoles.operator.openshift.io cluster
```
以下の例は、変更できるリソースのパラメーターを表示しています。
```
apiVersion: operator.openshift.io/v1
kind: Console
metadata:
  name: cluster
spec:
  managementState: Removed 1
```
1
managementState パラメーター値を Removed に設定し、Web コンソールを無効にします。このパラメーターの他の有効な値には以下が含まれます。Managed ではクラスターの制御下でコンソールを有効にし、Unmanaged は Web コンソール管理を制御するのがユーザーであることを意味します。

第10章 Web コンソールでのクイックスタートチュートリアルの作成

OpenShift Container Platform Web コンソールのクイックスタートチュートリアルを作成する場合は、以下のガイドラインに従って、すべてのクイックスタートで一貫したユーザーエクスペリエンスを維持するようにしてください。

10.1. クイックスタートについて

クイックスタートは、ユーザータスクに関するガイド付きチュートリアルです。Web コンソールでは、Help メニューでクリックスタートにアクセスできます。これらは、アプリケーション、Operator、または他の製品オファリングを使用する場合に役立ちます。

クイックスタートは、主にタスクとステップで構成されます。タスクごとに複数のステップがあり、各クイックスタートには複数のタスクがあります。以下に例を示します。

タスク 1
- ステップ 1
- ステップ 2
- ステップ 3
タスク 2
- ステップ 1
- ステップ 2
- ステップ 3
タスク 3
- ステップ 1
- ステップ 2
- ステップ 3

10.2. クイックスタートのユーザーワークフロー

既存のクイックスタートチュートリアルと対話する場合、以下が想定されるワークフローエクスペリエンスになります。

Administrator または Developer パースペクティブで、Help アイコン をクリックし、Quick Starts を選択します。
クイックスタートカードをクリックします。
表示されるパネルで Start をクリックします。
画面上の手順を実行し、Next をクリックします。
表示される Check your work モジュールで質問に回答し、タスクが正常に完了したことを確認します。
1. Yes を選択した場合には、Next をクリックして次のタスクに進みます。
2. No を選択した場合は、タスクの手順を繰り返して作業を再度確認します。
上記の手順 1 から 6 を繰り返し、クイックスタートの残りのタスクを完了します。
最終タスクが完了したら、Close をクリックしてクイックスタートを閉じます。

10.3. クイックスタートのコンポーネント

クイックスタートは、以下のセクションで構成されます。

Card: タイトル、説明、時間 (time commitment)、完了ステータスなどの、クイックスタートの基本情報を提供するカタログタイル
Introduction: クイックスタートの目的およびタスクの概要
Task headings: クイックスタートの各タスクのハイパーリンクタイトル
Check your work module: ユーザーがクイックスタートの次のタスクに進む前に、タスクが正常に完了したことを確認するためのモジュール
Hints: ユーザーによる製品の特定の機能を識別するのに役立つアニメーション
Buttons
- Next and back buttons: クイックスタートの各タスク内のステップおよびモジュールに移動するためのボタン
- Final screen buttons: クイックスタートを閉じたり、クイックスタート内の前のタスクに戻ったり、クイックスタートをすべて表示したりするためのボタン

クイックスタートの主なコンテンツエリアには、以下のセクションが含まれます。

Card copy
はじめに
タスクの手順
Modals and in-app messaging
Check your work module

10.4. クイックスタートの継続

OpenShift Container Platform では、ConsoleQuickStart オブジェクトで定義されるクイックスタートのカスタムリソースが導入されています。Operator および管理者は、このリソースを使用してクイックスタートをクラスターに提供できます。

前提条件

クラスター管理者の権限があること。

手順

新規のクイックスタートを作成するには、以下を実行します。
```
$ oc get -o yaml consolequickstart spring-with-s2i > my-quick-start.yaml
```
以下を実行します。
```
$ oc create -f my-quick-start.yaml
```
このドキュメントで説明されているガイダンスを使用して、YAML ファイルを更新します。
編集を保存します。

10.4.1. クイックスタート API ドキュメントの表示

手順

クイックスタートの API ドキュメントを確認するには、以下を実行します。
```
$ oc explain consolequickstarts
```

oc explain の使用方法の詳細は、oc explain -h を実行します。

10.4.2. クイックスタートの要素からクイックスタート CR へのマッピング

このセクションでは、クイックスタートのカスタムリソース (CR) の部分を、Web コンソール内のクイックスタートのこれらが表示される場所に視覚的にマッピングする方法を説明します。

10.4.2.1. conclusion 要素

YAML ファイルの conclusion 要素の表示

...
summary:
  failed: Try the steps again.
  success: Your Spring application is running.
title: Run the Spring application
conclusion: >-
  Your Spring application is deployed and ready. 1

1: conclusion テキスト

Web コンソールでの conclusion 要素の表示

クイックスタートの最後のセクションに conclusion が表示されます。

10.4.2.2. description 要素

YAML ファイルでの description 要素の表示

apiVersion: console.openshift.io/v1
kind: ConsoleQuickStart
metadata:
  name: spring-with-s2i
spec:
  description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.' 1
...

1: description テキスト

Web コンソールでの description 要素の表示

この description は、Quick Starts ページのクイックスタートの導入部分のタイルに表示されます。

10.4.2.3. displayName 要素

YAML ファイルの displayName 要素の表示

apiVersion: console.openshift.io/v1
kind: ConsoleQuickStart
metadata:
  name: spring-with-s2i
spec:
  description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.'
  displayName: Get started with Spring 1
  durationMinutes: 10

1: displayName テキスト。

Web コンソールでの displayName 要素の表示

表示名は、Quick Starts ページの導入部分のタイルに表示されます。

10.4.2.4. durationMinutes 要素

YAML ファイルでの durationMinutes 要素の表示

apiVersion: console.openshift.io/v1
kind: ConsoleQuickStart
metadata:
  name: spring-with-s2i
spec:
  description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.'
  displayName: Get started with Spring
  durationMinutes: 10 1

1: durationMinutes 値 (分単位)。この値は、クイックスタートの完了までにかかる時間を定義します。

Web コンソールでの durationMinutes 要素の表示

duration minutes 要素は、Quick Starts ページのクイックスタートの導入部分のタイルに表示されます。

10.4.2.5. icon 要素

YAML ファイルでの icon 要素の表示

...
spec:
  description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.'
  displayName: Get started with Spring
  durationMinutes: 10
  icon: >-   1
    data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMTUzZDNjO30uY2xzLTJ7ZmlsbDojZDhkYTlkO30uY2xzLTN7ZmlsbDojNThjMGE4O30uY2xzLTR7ZmlsbDojZmZmO30uY2xzLTV7ZmlsbDojM2Q5MTkxO308L3N0eWxlPjwvZGVmcz48dGl0bGU+c25vd2Ryb3BfaWNvbl9yZ2JfZGVmYXVsdDwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAxMi42OSw1OTNjLTExLjEyLTM4LjA3LTMxLTczLTU5LjIxLTEwMy44LTkuNS0xMS4zLTIzLjIxLTI4LjI5LTM5LjA2LTQ3Ljk0QzgzMy41MywzNDEsNzQ1LjM3LDIzNC4xOCw2NzQsMTY4Ljk0Yy01LTUuMjYtMTAuMjYtMTAuMzEtMTUuNjUtMTUuMDdhMjQ2LjQ5LDI0Ni40OSwwLDAsMC0zNi41NS0yNi44LDE4Mi41LDE4Mi41LDAsMCwwLTIwLjMtMTEuNzcsMjAxLjUzLDIwMS41MywwLDAsMC00My4xOS0xNUExNTUuMjQsMTU1LjI0LDAsMCwwLDUyOCw5NS4yYy02Ljc2LS42OC0xMS43NC0uODEtMTQuMzktLjgxaDBsLTEuNjIsMC0xLjYyLDBhMTc3LjMsMTc3LjMsMCwwLDAtMzEuNzcsMy4zNSwyMDguMjMsMjA4LjIzLDAsMCwwLTU2LjEyLDE3LjU2LDE4MSwxODEsMCwwLDAtMjAuMjcsMTEuNzUsMjQ3LjQzLDI0Ny40MywwLDAsMC0zNi41NywyNi44MUMzNjAuMjUsMTU4LjYyLDM1NSwxNjMuNjgsMzUwLDE2OWMtNzEuMzUsNjUuMjUtMTU5LjUsMTcyLTI0MC4zOSwyNzIuMjhDOTMuNzMsNDYwLjg4LDgwLDQ3Ny44Nyw3MC41Miw0ODkuMTcsNDIuMzUsNTIwLDIyLjQzLDU1NC45LDExLjMxLDU5MywuNzIsNjI5LjIyLTEuNzMsNjY3LjY5LDQsNzA3LjMxLDE1LDc4Mi40OSw1NS43OCw4NTkuMTIsMTE4LjkzLDkyMy4wOWEyMiwyMiwwLDAsMCwxNS41OSw2LjUyaDEuODNsMS44Ny0uMzJjODEuMDYtMTMuOTEsMTEwLTc5LjU3LDE0My40OC0xNTUuNiwzLjkxLTguODgsNy45NS0xOC4wNSwxMi4yLTI3LjQzcTUuNDIsOC41NCwxMS4zOSwxNi4yM2MzMS44NSw0MC45MSw3NS4xMiw2NC42NywxMzIuMzIsNzIuNjNsMTguOCwyLjYyLDQuOTUtMTguMzNjMTMuMjYtNDkuMDcsMzUuMy05MC44NSw1MC42NC0xMTYuMTksMTUuMzQsMjUuMzQsMzcuMzgsNjcuMTIsNTAuNjQsMTE2LjE5bDUsMTguMzMsMTguOC0yLjYyYzU3LjItOCwxMDAuNDctMzEuNzIsMTMyLjMyLTcyLjYzcTYtNy42OCwxMS4zOS0xNi4yM2M0LjI1LDkuMzgsOC4yOSwxOC41NSwxMi4yLDI3LjQzLDMzLjQ5LDc2LDYyLjQyLDE0MS42OSwxNDMuNDgsMTU1LjZsMS44MS4zMWgxLjg5YTIyLDIyLDAsMCwwLDE1LjU5LTYuNTJjNjMuMTUtNjQsMTAzLjk1LTE0MC42LDExNC44OS0yMTUuNzhDMTAyNS43Myw2NjcuNjksMTAyMy4yOCw2MjkuMjIsMTAxMi42OSw1OTNaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzY0LjE1LDE4NS4yM2MxNy44OS0xNi40LDM0LjctMzAuMTUsNDkuNzctNDAuMTFhMjEyLDIxMiwwLDAsMSw2NS45My0yNS43M0ExOTgsMTk4LDAsMCwxLDUxMiwxMTYuMjdhMTk2LjExLDE5Ni4xMSwwLDAsMSwzMiwzLjFjNC41LjkxLDkuMzYsMi4wNiwxNC41MywzLjUyLDYwLjQxLDIwLjQ4LDg0LjkyLDkxLjA1LTQ3LjQ0LDI0OC4wNi0yOC43NSwzNC4xMi0xNDAuNywxOTQuODQtMTg0LjY2LDI2OC40MmE2MzAuODYsNjMwLjg2LDAsMCwwLTMzLjIyLDU4LjMyQzI3Niw2NTUuMzQsMjY1LjQsNTk4LDI2NS40LDUyMC4yOSwyNjUuNCwzNDAuNjEsMzExLjY5LDI0MC43NCwzNjQuMTUsMTg1LjIzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUyNy41NCwzODQuODNjODQuMDYtOTkuNywxMTYuMDYtMTc3LjI4LDk1LjIyLTIzMC43NCwxMS42Miw4LjY5LDI0LDE5LjIsMzcuMDYsMzEuMTMsNTIuNDgsNTUuNSw5OC43OCwxNTUuMzgsOTguNzgsMzM1LjA3LDAsNzcuNzEtMTAuNiwxMzUuMDUtMjcuNzcsMTc3LjRhNjI4LjczLDYyOC43MywwLDAsMC0zMy4yMy01OC4zMmMtMzktNjUuMjYtMTMxLjQ1LTE5OS0xNzEuOTMtMjUyLjI3QzUyNi4zMywzODYuMjksNTI3LDM4NS41Miw1MjcuNTQsMzg0LjgzWiIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTEzNC41OCw5MDguMDdoLS4wNmEuMzkuMzksMCwwLDEtLjI3LS4xMWMtMTE5LjUyLTEyMS4wNy0xNTUtMjg3LjQtNDcuNTQtNDA0LjU4LDM0LjYzLTQxLjE0LDEyMC0xNTEuNiwyMDIuNzUtMjQyLjE5LTMuMTMsNy02LjEyLDE0LjI1LTguOTIsMjEuNjktMjQuMzQsNjQuNDUtMzYuNjcsMTQ0LjMyLTM2LjY3LDIzNy40MSwwLDU2LjUzLDUuNTgsMTA2LDE2LjU5LDE0Ny4xNEEzMDcuNDksMzA3LjQ5LDAsMCwwLDI4MC45MSw3MjNDMjM3LDgxNi44OCwyMTYuOTMsODkzLjkzLDEzNC41OCw5MDguMDdaIi8+PHBhdGggY2xhc3M9ImNscy01IiBkPSJNNTgzLjQzLDgxMy43OUM1NjAuMTgsNzI3LjcyLDUxMiw2NjQuMTUsNTEyLDY2NC4xNXMtNDguMTcsNjMuNTctNzEuNDMsMTQ5LjY0Yy00OC40NS02Ljc0LTEwMC45MS0yNy41Mi0xMzUuNjYtOTEuMThhNjQ1LjY4LDY0NS42OCwwLDAsMSwzOS41Ny03MS41NGwuMjEtLjMyLjE5LS4zM2MzOC02My42MywxMjYuNC0xOTEuMzcsMTY3LjEyLTI0NS42Niw0MC43MSw1NC4yOCwxMjkuMSwxODIsMTY3LjEyLDI0NS42NmwuMTkuMzMuMjEuMzJhNjQ1LjY4LDY0NS42OCwwLDAsMSwzOS41Nyw3MS41NEM2ODQuMzQsNzg2LjI3LDYzMS44OCw4MDcuMDUsNTgzLjQzLDgxMy43OVoiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik04ODkuNzUsOTA4YS4zOS4zOSwwLDAsMS0uMjcuMTFoLS4wNkM4MDcuMDcsODkzLjkzLDc4Nyw4MTYuODgsNzQzLjA5LDcyM2EzMDcuNDksMzA3LjQ5LDAsMCwwLDIwLjQ1LTU1LjU0YzExLTQxLjExLDE2LjU5LTkwLjYxLDE2LjU5LTE0Ny4xNCwwLTkzLjA4LTEyLjMzLTE3My0zNi42Ni0yMzcuNHEtNC4yMi0xMS4xNi04LjkzLTIxLjdjODIuNzUsOTAuNTksMTY4LjEyLDIwMS4wNSwyMDIuNzUsMjQyLjE5QzEwNDQuNzksNjIwLjU2LDEwMDkuMjcsNzg2Ljg5LDg4OS43NSw5MDhaIi8+PC9zdmc+Cg==
...

1: base64 値として定義される icon。

Web コンソールでの icon 要素の表示

このアイコンは、Quick Starts ページのクイックスタートの導入部分のタイルに表示されます。

10.4.2.6. introduction 要素

YAML ファイルでの introduction 要素の表示

...
  introduction: >- 1
    **Spring** is a Java framework for building applications based on a distributed microservices architecture.

    - Spring enables easy packaging and configuration of Spring applications into a self-contained executable application which can be easily deployed as a container to OpenShift.

    - Spring applications can integrate OpenShift capabilities to provide a natural "Spring on OpenShift" developer experience for both existing and net-new Spring applications. For example:

    - Externalized configuration using Kubernetes ConfigMaps and integration with Spring Cloud Kubernetes

    - Service discovery using Kubernetes Services

    - Load balancing with Replication Controllers

    - Kubernetes health probes and integration with Spring Actuator

    - Metrics: Prometheus, Grafana, and integration with Spring Cloud Sleuth

    - Distributed tracing with Istio & Jaeger tracing

    - Developer tooling through Red Hat OpenShift and Red Hat CodeReady developer tooling to quickly scaffold new Spring projects, gain access to familiar Spring APIs in your favorite IDE, and deploy to Red Hat OpenShift
...

1: introduction は、クイックスタートを紹介し、この中でタスクをリスト表示します。

Web コンソールでの introduction 要素の表示

クイックスタートカードをクリックすると、その中のサイドパネルスライドがクイックスタートを開始し、この中でタスクをリスト表示します。

10.4.3. カスタムアイコンのクイックスタートへの追加

デフォルトのアイコンがすべてのクイックスタートについて指定されます。独自のカスタムアイコンを指定することができます。

手順

カスタムアイコンとして使用する .svg ファイルを見つけます。
オンラインツールを使用して、テキストを base64 に変換します。
YAML ファイルに icon: >- を追加し、次の行に data:image/svg+xml;base64 とそれに続く base64 変換からの出力が含まれます。以下に例を示します。
```
icon: >-
   data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld.
```

10.4.4. クイックスタートへのアクセス制限

すべてのユーザーがすべてのクイックスタートを利用できる訳ではありません。YAML ファイルの accessReviewResources セクションでは、クイックスタートへのアクセスを制限する機能を提供します。

ユーザーに HelmChartRepository リソースを作成する機能がある場合にのみクイックスタートにアクセスできるようにするには、以下の設定を使用します。

accessReviewResources:
  - group: helm.openshift.io
    resource: helmchartrepositories
    verb: create

ユーザーに Operator グループおよびパッケージマニフェストをリスト表示し、Operator をインストールできる機能がある場合にのみクイックスタートにアクセスできるようにするには、以下の設定を使用します。

accessReviewResources:
  - group: operators.coreos.com
    resource: operatorgroups
    verb: list
  - group: packages.operators.coreos.com
    resource: packagemanifests
    verb: list

10.4.5. その他のクイックスタートのリンク

手順

YAML ファイルの nextQuickStart セクションで、リンクするクイックスタートの name (displayName ではない) を指定します。以下に例を示します。
```
nextQuickStart:
  - add-healthchecks
```

10.4.6. クイックスタートでサポートされるタグ

これらのタグを使用して、クイックスタートコンテンツをマークダウンで記述します。マークダウンが HTML に変換されます。

タグ	説明
`'b',`	太字テキストを定義します。
`'img',`	イメージを埋め込みます。
`'i',`	イタリックテキストを定義します。
`'strike',`	取り消し線 (strike-through) テキストを定義します。
`'s',`	小さいテキストを定義します。
`'del',`	小さいテキストを定義します。
`'em',`	エミュレートしたテキストを定義します。
`'strong',`	重要なテキストを定義します。
`'a',`	アンカータグを定義します。
`'p',`	段落テキストを定義します。
`'h1',`	レベル 1 の見出しを定義します。
`'h2',`	レベル 2 の見出しを定義します。
`'h3',`	レベル 3 の見出しを定義します。
`'h4',`	レベル 4 の見出しを定義します。
`'ul',`	順序のないリストを定義します。
`'ol',`	順序付きのリストを定義します。
`'li',`	リスト項目を定義します。
`'code',`	テキストをコードとして定義します。
`'pre',`	事前にフォーマットされたテキストのブロックを定義します。
`'button',`	テキストでボタンを定義します。

10.4.7. クイックスタートでのマークダウン参照の強調表示

ハイライトまたはヒントの機能により、クイックスタートに Web コンソールのコンポーネントを強調表示したり、アニメーションで表示できるリンクを追加することができます。

マークダウン構文には以下が含まれます。

ブラケット付きリンクテキスト
highlight のキーワードと、それに続くアニメーションで表示する要素の ID

10.4.7.1. パースペクティブスイッチャー

[Perspective switcher]{{highlight qs-perspective-switcher}}

10.4.7.2. Administrator パースペクティブのナビゲーションリンク

[Home]{{highlight qs-nav-home}}
[Operators]{{highlight qs-nav-operators}}
[Workloads]{{highlight qs-nav-workloads}}
[Serverless]{{highlight qs-nav-serverless}}
[Networking]{{highlight qs-nav-networking}}
[Storage]{{highlight qs-nav-storage}}
[Service catalog]{{highlight qs-nav-servicecatalog}}
[Compute]{{highlight qs-nav-compute}}
[User management]{{highlight qs-nav-usermanagement}}
[Administration]{{highlight qs-nav-administration}}

10.4.7.3. Developer パースペクティブのナビゲーションリンク

[Add]{{highlight qs-nav-add}}
[Topology]{{highlight qs-nav-topology}}
[Search]{{highlight qs-nav-search}}
[Project]{{highlight qs-nav-project}}
[Helm]{{highlight qs-nav-helm}}

10.4.7.4. 一般的なナビゲーションリンク

[Builds]{{highlight qs-nav-builds}}
[Pipelines]{{highlight qs-nav-pipelines}}
[Monitoring]{{highlight qs-nav-monitoring}}

10.4.7.5. マストヘッドリンク

[CloudShell]{{highlight qs-masthead-cloudshell}}
[Utility Menu]{{highlight qs-masthead-utilitymenu}}
[User Menu]{{highlight qs-masthead-usermenu}}
[Applications]{{highlight qs-masthead-applications}}
[Import]{{highlight qs-masthead-import}}
[Help]{{highlight qs-masthead-help}}
[Notifications]{{highlight qs-masthead-notifications}}

10.4.8. コードスニペットのマークダウン参照

CLI コードスニペットがクイックスタートに含まれる場合に、これを Web コンソールから実行できるようになりました。この機能を使用するには、まず Web Terminal Operator をインストールする必要があります。Web 端末で実行する Web 端末およびコードスニペットの各種アクションは、Web Terminal Operator をインストールしない場合は表示されません。または、Web Terminal Operator がインストールされているかどうかに関係なく、コードスニペットをクリップボードにコピーできます。

10.4.8.1. インラインコードスニペットの構文

`code block`{{copy}}
`code block`{{execute}}

注記

execute 構文が使用される場合、Web Terminal Operator がインストールされているかどうかに関係なく、Copy to clipboard アクションが表示されます。

10.4.8.2. 複数行コードスニペットの構文

```
multi line code block
```{{copy}}

```
multi line code block
```{{execute}}

10.5. クイックスタートのコンテンツガイドライン

10.5.1. Card copy

クイックスタートカードのタイトルと説明をカスタマイズできますが、ステータスをカスタマイズすることはできません。

説明を 1 または 2 文にまとめます。
動詞から始め、ユーザーの目的を伝えるものにします。正しい例:
```
Create a serverless application.
```

10.5.2. はじめに

クイックスタートカードをクリックすると、その中のサイドパネルスライドがクイックスタートを開始し、この中でタスクをリスト表示します。

導入部分のコンテンツを明確に、簡潔に、説明的に、また読みやすいものにします。
クイックスタートの結果について示します。ユーザーは、クイックスタートを開始する前にその目的を理解している必要があります。

ユーザーに (クイックスタートではなく) 実行するアクションを示します。

正しい例:

In this quick start, you will deploy a sample application to {product-title}.

正しくない例:

This quick start shows you how to deploy a sample application to {product-title}.

導入部分は、機能の複雑さに応じて最大 4 から 5 つの文章で設定される必要があります。導入部分が長いとユーザーを圧倒してしまう可能性があります。
導入部分の後にクイックスタートのタスクをリスト表示し、各タスクのリストについてはそれぞれ動詞で始まります。タスクが追加または削除されるたびにコピーを更新する必要が生じるため、タスクの数は指定しないでください。
- 正しい例:
```
Tasks to complete: Create a serverless application; Connect an event source; Force a new revision
```
- 正しくない例:
```
You will complete these 3 tasks: Creating a serverless application; Connecting an event source; Forcing a new revision
```

10.5.3. タスクの手順

ユーザーが Start をクリックした後に、クイックスタートを完了するために実行する必要のあるリストのステップが表示されます。

タスクのステップを作成する場合は、以下の一般的なガイドラインに従います。

ボタンとラベルには Click を使用します。チェックボックス、ラジオボタン、およびドロップダウンメニューには Select を使用します。
Click on ではなく Click を使用します。
- 正しい例:
```
Click OK.
```
- 正しくない例:
```
Click on the OK button.
```
ユーザーに対し、Administrator パースペクティブと Developer パースペクティブ間を移動する方法を示します。ユーザーがすでに適切なパースペクティブにいると思われる場合でも、ユーザーが適切なパースペクティブに確実に移動していることを確認できるように、ユーザーに対してパースペクティブへの移動方法を示します。
例 :
```
Enter the Developer perspective: In the main navigation, click the dropdown menu and select Developer.
Enter the Administrator perspective: In the main navigation, click the dropdown menu and select Admin.
```
"Location, action" の構造を使用します。ユーザーに対し、実行すべきアクションを示す前に移動する必要のある場所を示します。
- 正しい例:
```
In the node.js deployment, hover over the icon.
```
- 正しくない例:
```
Hover over the icon in the node.js deployment.
```
製品の用語については一貫して大文字表記を使用します。
メニュータイプまたはリストをドロップダウンとして指定する必要がある場合は、ハイフンなしで dropdown と 1 単語で記述します。

ユーザーアクションと製品機能に関する追加情報を明確に区別します。

ユーザーアクション:

Change the time range of the dashboard by clicking the dropdown menu and selecting time range.

追加情報:

To look at data in a specific time frame, you can change the time range of the dashboard.

「In the top-right corner, click the icon」などの指示文は使用しないようにしてください。指示文は UI レイアウトが変更されるたびに古くなります。また、デスクトップユーザー向けの指示は、異なるサイズの画面を使用するユーザーには適切ではない場合があります。代わりに、名前を使用して内容を特定できるようにします。
- 正しい例:
```
In the navigation menu, click Settings.
```
- 正しくない例:
```
In the left-hand menu, click Settings.
```
"Click the gray circle (灰色の円をクリック)" など、色のみで項目を特定することはしないでください。色の識別子は、視力制限のあるユーザー、とくに色覚異常のユーザーの役に立ちません。代わりに、ボタンコピーのような名前またはコピーを使用して項目を特定します。
- 正しい例:
```
The success message indicates a connection.
```
- 正しくない例:
```
The message with a green icon indicates a connection.
```
二人称を使用で統一します。
- 正しい例:
```
Set up your environment.
```
- 正しくない例:
```
Let's set up our environment.
```

10.5.4. 作業モジュールの確認

ユーザーがステップを完了すると、Check your work モジュールが表示されます。このモジュールは、ユーザーに対してステップの結果に関する質問への yes または no の回答を求めるプロンプトを出し、ユーザーはここで作業を確認することができます。このモジュールでは、1 つの yes または no の回答を求める質問のみ作成する必要があります。
- ユーザーが Yes と回答すると、チェックマークが表示されます。
- ユーザーが No と回答すると、必要に応じて関連するドキュメントへのリンクと共にエラーメッセージが表示されます。その後、ユーザーは戻ってやり直すことができます。

10.5.5. UI 要素のフォーマット

以下のガイドラインを使用して UI 要素をフォーマットします。

ボタン、ドロップダウン、タブ、フィールド、その他の UI コントロールのコピー: UI に表示されるようにコピーを作成し、これを太字にします。
ページ、ウィンドウ、およびパネル名を含むその他のすべての UI 要素: UI に表示されるようにコピーを作成し、これを太字にします。
コードまたはユーザーが入力するテキスト: 等幅フォントを使用します。
ヒント: ナビゲーションまたはマストヘッド要素へのヒントが含まれる場合は、リンクのようにテキストのスタイルを変更します。
CLI コマンド: 等幅フォントを使用します。
実行中のテキストで、コマンドに太字の等幅フォントを使用します。
パラメーターまたはオプションが可変値である場合、イタリック体の等幅フォントを使用します。
パラメーターに太字の等幅フォントを使用し、オプションに等幅フォントを使用します。

10.6. 関連情報

音声とトーンの要件については、PatternFly のブランド音声およびトーンのガイドラインについて参照してください。
他の UX コンテンツのガイダンスは、PatternFly の UX の作成ガイド (writing style guide) のすべての分野を参照してください。

OpenShift Container Platform Web コンソールのスタートガイド

第1章 Web コンソールの概要

1.1. Web コンソールの Administrator パースペクティブについて

1.2. Web コンソールの Developer パースペクティブ

1.3. パースペクティブへのアクセス

第2章 Web コンソールへのアクセス

2.1. 前提条件

2.2. Web コンソールの理解および Web コンソールへのアクセス

第3章 OpenShift Container Platform Dashboard を使用したクラスター情報の取得

3.1. OpenShift Container Platform ダッシュボードページについて

3.2. リソースおよびプロジェクトの制限とクォータの認識

第4章 ユーザー設定の追加

4.1. ユーザー設定

第5章 OpenShift Container Platform の Web コンソールの設定

5.1. 前提条件

5.2. Web コンソールの設定

5.3. Web コンソールでのクイックスタートの無効化

第6章 OpenShift Container Platform の Web コンソールのカスタマイズ

6.1. カスタムロゴおよび製品名の追加

6.2. Web コンソールでのカスタムリンクの作成

6.3. コンソールルートのカスタマイズ

6.3.1. コンソールルートのカスタマイズ

6.3.2. ダウンロードルートのカスタマイズ

6.4. ログインページのカスタマイズ

6.5. 外部ログリンクのテンプレートの定義

6.6. カスタム通知バナーの作成

6.7. CLI ダウンロードのカスタマイズ

6.8. YAML サンプルの Kubernetes リソースへの追加

6.9. ユーザーパースペクティブのカスタマイズ

6.9.1. YAML ビューを使用したパースペクティブのカスタマイズ

6.9.2. フォームビューを使用したパースペクティブのカスタマイズ

6.10. 開発者カタログとサブカタログのカスタマイズ

6.10.1. YAML ビューを使用した開発者カタログまたはそのサブカタログのカスタマイズ

6.10.2. フォームビューを使用した開発者カタログまたはそのサブカタログのカスタマイズ

6.10.2.1. YAML ファイルの変更例

第7章 動的プラグイン

7.1. 動的プラグインの概要

7.1.1. 動的プラグインについて

7.1.2. 主な特長

7.1.3. 全般的なガイドライン

PatternFly ガイドライン

7.2. 動的プラグインを使い始める

7.2.1. 動的プラグインの開発

7.3. クラスターへのプラグインのデプロイ

7.3.1. Docker を使用したイメージのビルド

7.3.2. クラスターへのプラグインのデプロイ

7.3.3. ブラウザーでのプラグインの無効化

7.3.4. 関連情報

7.4. 動的プラグインの例

7.4.1. Pod ページへのタブの追加

7.5. 動的プラグイン参照

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

console.action/filter

console.action/group

console.action/provider

console.action/resource-provider

console.alert-action

console.catalog/item-filter

console.catalog/item-metadata

console.catalog/item-provider

console.catalog/item-type

console.catalog/item-type-metadata

console.cluster-overview/inventory-item

console.cluster-overview/multiline-utilization-item

console.cluster-overview/utilization-item

console.context-provider

console.dashboards/card

console.dashboards/overview/activity/resource

console.dashboards/overview/detail/item

console.dashboards/overview/health/operator

console.dashboards/overview/health/prometheus

console.dashboards/overview/health/resource

console.dashboards/overview/health/url

console.dashboards/overview/inventory/item

console.dashboards/overview/inventory/item/group

console.dashboards/overview/inventory/item/replacement

console.dashboards/overview/prometheus/activity/resource

console.dashboards/project/overview/item

console.dashboards/tab

第4章ユーザー設定の追加

第7章動的プラグイン

`console.action/filter`

`console.action/group`

`console.action/provider`

`console.action/resource-provider`

`console.alert-action`

`console.catalog/item-filter`

`console.catalog/item-metadata`

`console.catalog/item-provider`

`console.catalog/item-type`

`console.catalog/item-type-metadata`

`console.cluster-overview/inventory-item`

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

`console.cluster-overview/utilization-item`

`console.context-provider`

`console.dashboards/card`

`console.dashboards/overview/activity/resource`

`console.dashboards/overview/detail/item`

`console.dashboards/overview/health/operator`

`console.dashboards/overview/health/prometheus`

`console.dashboards/overview/health/resource`

`console.dashboards/overview/health/url`

`console.dashboards/overview/inventory/item`

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

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

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

`console.dashboards/project/overview/item`

`console.dashboards/tab`

`console.file-upload`

`console.flag`

`console.flag/hookProvider`

`console.flag/model`

`console.global-config`

`console.model-metadata`

`console.navigation/href`

`console.navigation/resource-cluster`

`console.navigation/resource-ns`

`console.navigation/section`

`console.navigation/separator`

`console.page/resource/details`

`console.page/resource/list`

`console.page/route`

`console.page/route/standalone`

`console.perspective`

`console.project-overview/inventory-item`

`console.project-overview/utilization-item`

`console.pvc/alert`

`console.pvc/create-prop`

`console.pvc/delete`

`console.pvc/status`

`console.redux-reducer`

`console.resource/create`

`console.storage-provider`

`console.tab/horizontalNav`

`console.telemetry/listener`

`console.topology/adapter/build`

`console.topology/adapter/network`

`console.topology/adapter/pod`

`console.topology/component/factory`

`console.topology/create/connector`

`console.topology/data/factory`

`console.topology/decorator/provider`

`console.topology/details/resource-alert`

`console.topology/details/resource-link`

`console.topology/details/tab`

`console.topology/details/tab-section`

`console.topology/display/filters`

`console.topology/relationship/provider`

`console.user-preference/group`

`console.user-preference/item`

`console.yaml-template`

`dev-console.add/action`

`dev-console.add/action-group`

`dev-console.import/environment`

`console.page/resource/tab`

`useActivePerspective`

`GreenCheckCircleIcon`

`RedExclamationCircleIcon`

`YellowExclamationTriangleIcon`