Web コンソール

OpenShift Container Platform 4.11

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

Red Hat OpenShift Documentation Team

概要

このドキュメントでは、OpenShift Container Platform 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 パースペクティブが選択されます。

関連情報

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

手順

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

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

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

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

2.1. 前提条件

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 を表示します。

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

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

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

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

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

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

  • Details は、クラスターの詳細情報の概要を表示します。

    ステータスには、okerrorwarningin 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章 ユーザー設定の追加

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

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

4.1. ユーザー設定

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

手順

  1. ログイン認証情報を使用して OpenShift Container Platform Web コンソールにログインします。
  2. マストヘッドを使用して、ユーザープロファイルのユーザー名とパスワードにアクセスします。
  3. General セクションで、以下を実行します。

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

    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 コンソールにログインしている。

手順

  1. Administrator パースペクティブで、AdministrationCluster Settings に移動します。
  2. Cluster Settings ページで、Configuration タブをクリックします。
  3. Configuration ページで、operator.openshift.io と説明が記載されている Console 設定リソースをクリックします。

    選択するべき正しい Console 設定リソースを表示する Configuration ページのイメージ
  4. Action ドロップダウンリストから Customize を選択し、Cluster configuration ページを開きます。
  5. General タブの Quick starts セクションで、Enabled リストまたは Disabled リストから項目を選択し、矢印ボタンを使用して他方のリストに移動します。

    • 1 つのクイックスタートを有効または無効にするには、該当するクイックスタートをクリックし、一重矢印ボタンを使用してクイックスタートを適切なリストに移動します。
    • 複数のクイックスタートをまとめて有効または無効にするには、Ctrl を押して移動するクイックスタートをクリックします。次に、一重矢印ボタンを使用してクイックスタートを適切なリストに移動します。
    • すべてのクイックスタートをまとめて有効または無効にするには、二重矢印ボタンをクリックして、すべてのクイックスタートを適切なリストに移動します。

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

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

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

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

前提条件

  • 管理者の権限があること。
  • 使用するロゴのファイルを作成します。ロゴは、GIF、JPG、PNG、または SVG を含む共通のイメージ形式のファイルであり、60pxmax-height に制限されます。

手順

  1. ロゴファイルを 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 でエンコードされたロゴを指定します。
  2. 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 にマウントし、再デプロイします。

  3. 正常に実行されたかどうかを確認します。問題がある場合は、コンソールクラスター Operator は Degraded ステータスを報告し、コンソール Operator 設定も CustomLogoDegraded ステータスを KeyOrFilenameInvalid または NoImageProvided などの理由と共に報告します。

    clusteroperator を確認するには、以下を実行します。

    $ oc get clusteroperator console -o yaml

    コンソール Operator 設定を確認するには、以下を実行します。

    $ oc get consoles.operator.openshift.io -o yaml

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 シークレットを作成できます。

手順

  1. クラスター Ingress 設定を編集します。

    $ oc edit ingress.config.openshift.io cluster
  2. カスタムのホスト名を設定し、オプションで提供する証明書とキーを設定します。

    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 のシークレットへの参照。これは、カスタムホスト名の接尾辞のドメインがクラスターのドメイン接尾辞に一致しない場合に必要です。接尾辞が一致する場合には、シークレットはオプションです。
  3. 変更を適用するためにファイルを保存します。

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

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

前提条件

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

    ヒント

    oc create secret tls コマンドを使用して TLS シークレットを作成できます。

手順

  1. クラスター Ingress 設定を編集します。

    $ oc edit ingress.config.openshift.io cluster
  2. カスタムのホスト名を設定し、オプションで提供する証明書とキーを設定します。

    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 のシークレットへの参照。これは、カスタムホスト名の接尾辞のドメインがクラスターのドメイン接尾辞に一致しない場合に必要です。接尾辞が一致する場合には、シークレットはオプションです。
  3. 変更を適用するためにファイルを保存します。

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

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

注記

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

前提条件

  • 管理者の権限があること。

手順

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

    $ oc adm create-login-template > login.html
    $ oc adm create-provider-selection-template > providers.html
    $ oc adm create-error-template > errors.html
  2. シークレットを作成します。

    $ 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
  3. 以下を実行します。

    $ oc edit oauths cluster
  4. 仕様を更新します。

    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.6. カスタム通知バナーの作成

前提条件

  • 管理者の権限があること。

手順

  1. AdministrationCustom Resource Definitions から、ConsoleNotification をクリックします。
  2. Instances タブを選択します。
  3. 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
    有効な場所の設定は、BannerTopBannerBottom、および BannerTopBottom です。
  4. Create をクリックして変更を適用します。

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

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

前提条件

  • 管理者の権限があること。

手順

  1. AdministrationCustom Resource Definitions に移動します。
  2. カスタムリソース定義 (CRD) のリストから ConsoleCLIDownload を選択します。
  3. 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
  4. Save ボタンをクリックします。

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

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

前提条件

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

手順

  1. AdministrationCustom Resource Definitions から、ConsoleYAMLSample をクリックします。
  2. 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 ドキュメントに挿入できる断片を示します。

  3. Save をクリックします。

第7章 動的プラグイン

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

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

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

重要

動的プラグインの作成は、テクノロジープレビュー機能としてのみご利用いただけます。テクノロジープレビュー機能は、Red Hat 製品サポートのサービスレベルアグリーメント (SLA) の対象外であり、機能的に完全ではない場合があります。Red Hat は、実稼働環境でこれらを使用することを推奨していません。テクノロジープレビュー機能は、最新の製品機能をいち早く提供して、開発段階で機能のテストを行いフィードバックを提供していただくことを目的としています。

Red Hat のテクノロジープレビュー機能のサポート範囲に関する詳細は、テクノロジープレビュー機能のサポート範囲 を参照してください。

7.1.2. 主な特長

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

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

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

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

  • プラグインをビルドして実行するには、Node.jsyarn が必要です。
  • 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 4 ガイドライン

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

  • PatternFly4 コンポーネントおよび PatternFly CSS 変数を使用します。コア PatternFly コンポーネントは SDK から利用できます。Pattern Fly コンポーネントと変数を使用すると、将来のコンソールバージョンでプラグインが一貫しているように見えます。
  • PatternFly のアクセシビリティーの基本 に従って、プラグインにアクセスできるようにします。
  • 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 をインストールして実行している必要があります。

手順

  1. ターミナルで次のコマンドを実行して、Yarn を使用してプラグインの依存関係をインストールします。

    $ yarn install
  2. インストール後、以下のコマンドを実行して Yarn を起動します。

    $ yarn run start
  3. 別のターミナルウィンドウで、CLI を使用して OpenShift Container Platform にログインします。

    $ oc login
  4. 以下のコマンドを実行して、ログインしたクラスターに接続されたコンテナーで OpenShift Container Platform Web コンソールを実行します。

    $ yarn run start-console

検証

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

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

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

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

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

手順

  1. 以下のコマンドでイメージをビルドします。

    $ docker build -t quay.io/my-repositroy/my-plugin:latest .
  2. オプション: イメージをテストする場合は、以下のコマンドを実行します。

    $ docker run -it --rm -d -p 9001:80 quay.io/my-repository/my-plugin:latest
  3. 以下のコマンドを実行してイメージをプッシュします。

    $ docker push quay.io/my-repository/my-plugin:latest

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

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

手順

  1. プラグインの名前を 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 パラメーター内のイメージの場所を指定します。
  2. オプション: 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

検証

Overview ページで、または AdministrationCluster SettingsConfigurationConsole operator.openshift.ioConsole plugins に移動して、有効なプラグインのリストを表示できます。

注記

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

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

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

手順

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

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

7.4. 動的プラグインの例

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

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

OpenShift Container Platform Web コンソールに対して行うことができるさまざまなカスタマイズがあります。新しい OpenShift Console 動的プラグインを作成するように環境をセットアップし、プラグインの拡張例として Pod details ページにタブを追加します。

注記

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

前提条件

  • Node.js がインストールされていることを確認します。
  • yarn がインストールされていることを確認します。

手順

  1. 新しいタブで、console-plugin-template リポジトリーを開きます。このリポジトリーには、新しいタブでプラグインを作成するためのテンプレートが含まれています。

    重要

    カスタムプラグインコードは、Red Hat ではサポートされていません。プラグインで利用できるのは、共同コミュニティーのサポート のみです。

  2. Use this templateCreate new repository をクリックして、テンプレートの GitHub リポジトリーを作成します。
  3. プラグインの名前で新しいリポジトリーの名前を変更します。
  4. コードを編集できるように、新しいリポジトリーのクローンをローカルマシンに作成します。
  5. 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
    プラグインの概要を使用して、説明を更新します。
  6. console-extensions.json ファイルに以下を追加します。

    {
      "type": "console.tab/horizontalNav",
      "properties": {
        "page": {
          "name": "Example Tab",
          "href": "example"
        },
        "model": {
          "group": "core",
          "version": "v1",
          "kind": "Pod"
        },
        "component": { "$codeRef": "ExampleTab" }
      }
    }
  7. package.json ファイルを編集して以下の変更を追加します。

            "exposedModules": {
                "ExamplePage": "./components/ExamplePage",
                "ExampleTab": "./components/ExampleTab"
            }
  8. 新しいファイル 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>
        );
    }
  9. Helm リリース名としてプラグインの名前を使用して Helm チャートを新しい名前空間または -n コマンドラインオプションで指定された既存の名前空間にインストールし、プラグインをデプロイするためのイメージの場所を 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. 動的プラグインエクステンションのタイプ

7.5.1.1. console.action/filter

7.5.1.1.1. summary

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

7.5.1.1.2. Properties
名前値のタイプ任意説明

contextId

string

いいえ

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

filter

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

いいえ

一部の条件に基づいてアクションをフィルターする関数。scope: アクションを指定するスコープ。Horizontal Pod Autoscaler (HPA) のデプロイメントから ModifyCount アクションを削除する必要がある場合には、フックが必要になることがあります。

7.5.1.2. console.action/group

7.5.1.2.1. summary

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

7.5.1.2.2. Properties
名前値のタイプ任意説明

id

string

いいえ

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

label

string

はい

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

submenu

boolean

はい

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

insertBefore

string | string[]

はい

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

insertAfter

string | string[]

はい

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

7.5.1.3. console.action/provider

7.5.1.3.1. summary

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

7.5.1.3.2. Properties
名前値のタイプ任意説明

contextId

string

いいえ

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

provider

CodeRef<ExtensionHook<Action[], any>>

いいえ

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

7.5.1.4. console.action/resource-provider

7.5.1.4.1. summary

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

7.5.1.4.2. Properties
名前値のタイプ任意説明

model

ExtensionK8sKindVersionModel

いいえ

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

provider

CodeRef<ExtensionHook<Action[], any>>

いいえ

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

7.5.1.5. console.alert-action

7.5.1.5.1. 概要

(利用できません)

7.5.1.5.2. プロパティー
名前値のタイプ任意説明

alert

string

いいえ

 

text

string

いいえ

 

action

CodeRef<(alert: any) ⇒ void>

いいえ

 

7.5.1.6. console.catalog/item-filter

7.5.1.6.1. 概要

(利用できません)

7.5.1.6.2. プロパティー
名前値のタイプ任意説明

catalogId

string | string[]

いいえ

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

type

string

いいえ

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

filter

CodeRef<(item: CatalogItem) ⇒ boolean>

いいえ

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

7.5.1.7. console.catalog/item-metadata

7.5.1.7.1. 概要

(利用できません)

7.5.1.7.2. プロパティー
名前値のタイプ任意説明

catalogId

string | string[]

いいえ

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

type

string

いいえ

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

provider

CodeRef<ExtensionHook<CatalogItemMetadataProviderFunction, CatalogExtensionHookOptions>>

いいえ

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

7.5.1.8. console.catalog/item-provider

7.5.1.8.1. 概要

(利用できません)

7.5.1.8.2. プロパティー
名前値のタイプ任意説明

catalogId

string | string[]

いいえ

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

type

string

いいえ

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

title

string

いいえ

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

provider

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

いいえ

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

priority

number

はい

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

7.5.1.9. console.catalog/item-type

7.5.1.9.1. 概要

(利用できません)

7.5.1.9.2. プロパティー
名前値のタイプ任意説明

type

string

いいえ

カタログ項目をタイプ。

title

string

いいえ

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

catalogDescription

string | CodeRef<React.ReactNode>

はい

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

typeDescription

string

はい

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

filters

CatalogItemAttribute[]

はい

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

groupings

CatalogItemAttribute[]

はい

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

7.5.1.10. console.catalog/item-type-metadata

7.5.1.10.1. 概要

(利用できません)

7.5.1.10.2. プロパティー
名前値のタイプ任意説明

type

string

いいえ

カタログ項目をタイプ。

filters

CatalogItemAttribute[]

はい

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

groupings

CatalogItemAttribute[]

はい

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

7.5.1.11. console.cluster-overview/inventory-item

7.5.1.11.1. 概要

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

7.5.1.11.2. プロパティー
名前値のタイプ任意説明

component

CodeRef<React.ComponentType<{}>>

いいえ

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

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

7.5.1.12.1. summary

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

7.5.1.12.2. Properties
名前値のタイプ任意説明

title

string

いいえ

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

getUtilizationQueries

CodeRef<GetMultilineQueries>

いいえ

Prometheus 使用状況クエリー。

humanize

CodeRef<Humanize>

いいえ

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

TopConsumerPopovers

CodeRef<React.ComponentType<TopConsumerPopoverProps>[]>

はい

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

7.5.1.13. console.cluster-overview/utilization-item

7.5.1.13.1. 概要

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

7.5.1.13.2. プロパティー
名前値のタイプ任意説明

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 コンシューマーのポップオーバーを表示します。

7.5.1.14. console.context-provider

7.5.1.14.1. summary

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

7.5.1.14.2. Properties
名前値のタイプ任意説明

provider

CodeRef<Provider<T>>

いいえ

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

useValueHook

CodeRef<() ⇒ T>

いいえ

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

7.5.1.15. console.dashboards/card

7.5.1.15.1. 概要

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

7.5.1.15.2. プロパティー
名前値のタイプ任意説明

tab

string

いいえ

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

position

'LEFT' | 'RIGHT' | 'MAIN'

いいえ

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

component

CodeRef<React.ComponentType<{}>>

いいえ

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

span

OverviewCardSpan

はい

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

7.5.1.16. console.dashboards/overview/activity/resource

7.5.1.16.1. summary

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

7.5.1.16.2. Properties
名前値のタイプ任意説明

k8sResource

CodeRef<FirehoseResource & { isList: true; }>

いいえ

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

component

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

いいえ

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

isActivity

CodeRef<(resource: T) ⇒ boolean>

はい

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

getTimestamp

CodeRef<(resource: T) ⇒ Date>

はい

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

7.5.1.17. console.dashboards/overview/detail/item

7.5.1.17.1. summary

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

7.5.1.17.2. Properties
名前値のタイプ任意説明

component

CodeRef<React.ComponentType<{}>>

いいえ

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

7.5.1.18. console.dashboards/overview/health/operator

7.5.1.18.1. summary

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

7.5.1.18.2. Properties
名前値のタイプ任意説明

title

string

いいえ

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

resources

CodeRef<FirehoseResource[]>

いいえ

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

getOperatorsWithStatuses

CodeRef<GetOperatorsWithStatuses<T>>

はい

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

operatorRowLoader

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

はい

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

viewAllLink

string

はい

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

7.5.1.19. console.dashboards/overview/health/prometheus

7.5.1.19.1. 概要

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

7.5.1.19.2. プロパティー
名前値のタイプ任意説明

title

string

いいえ

サブシステムの表示名。

クエリー

string[]

いいえ

Prometheus クエリー

healthHandler

CodeRef<PrometheusHealthHandler>

いいえ

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

additionalResource

CodeRef<FirehoseResource>

はい

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

popupComponent

CodeRef<React.ComponentType<PrometheusHealthPopupProps>>

はい

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

popupTitle

string

はい

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

disallowedControlPlaneTopology

string[]

はい

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

7.5.1.20. console.dashboards/overview/health/resource

7.5.1.20.1. summary

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

7.5.1.20.2. Properties
名前値のタイプ任意説明

title

string

いいえ

サブシステムの表示名。

resources

CodeRef<WatchK8sResources<T>>

いいえ

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

healthHandler

CodeRef<ResourceHealthHandler<T>>

いいえ

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

popupComponent

CodeRef<WatchK8sResults<T>>

はい

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

popupTitle

string

はい

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

7.5.1.21. console.dashboards/overview/health/url

7.5.1.21.1. summary

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

7.5.1.21.2. Properties
名前値のタイプ任意説明

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

はい

7.5.1.22. console.dashboards/overview/inventory/item

7.5.1.22.1. 概要

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

7.5.1.22.2. プロパティー
名前値のタイプ任意説明

model

CodeRef<T>

いいえ

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

mapper

CodeRef<StatusGroupMapper<T, R>>

はい

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

additionalResources

CodeRef<WatchK8sResources<R>>

はい

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

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

7.5.1.23.1. 概要

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

7.5.1.23.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

icon

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

いいえ

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

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

7.5.1.24.1. 概要

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

7.5.1.24.2. プロパティー
名前値のタイプ任意説明

model

CodeRef<T>

いいえ

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

mapper

CodeRef<StatusGroupMapper<T, R>>

はい

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

additionalResources

CodeRef<WatchK8sResources<R>>

はい

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

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

7.5.1.25.1. summary

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

7.5.1.25.2. Properties
名前値のタイプ任意説明

クエリー

string[]

いいえ

監視するクエリー

component

CodeRef<React.ComponentType<PrometheusActivityProps>>

いいえ

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

isActivity

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

はい

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

7.5.1.26. console.dashboards/project/overview/item

7.5.1.26.1. 概要

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

7.5.1.26.2. プロパティー
名前値のタイプ任意説明

model

CodeRef<T>

いいえ

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

mapper

CodeRef<StatusGroupMapper<T, R>>

はい

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

additionalResources

CodeRef<WatchK8sResources<R>>

はい

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

7.5.1.27. console.dashboards/tab

7.5.1.27.1. summary

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

7.5.1.27.2. Properties
名前値のタイプ任意説明

id

string

いいえ

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

navSection

'home' | 'storage'

いいえ

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

title

string

いいえ

タブのタイトル。

7.5.1.28. console.file-upload

7.5.1.28.1. 概要

(利用できません)

7.5.1.28.2. プロパティー
名前値のタイプ任意説明

fileExtensions

string[]

いいえ

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

handler

CodeRef<FileUploadHandler>

いいえ

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

7.5.1.29. console.flag

7.5.1.29.1. summary

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

7.5.1.29.2. Properties
名前値のタイプ任意説明

handler

CodeRef<FeatureFlagHandler>

いいえ

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

7.5.1.30. console.flag/hookProvider

7.5.1.30.1. summary

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

7.5.1.30.2. Properties
名前値のタイプ任意説明

handler

CodeRef<FeatureFlagHandler>

いいえ

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

7.5.1.31. console.flag/model

7.5.1.31.1. summary

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

7.5.1.31.2. Properties
名前値のタイプ任意説明

flag

string

いいえ

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

model

ExtensionK8sModel

いいえ

CustomResourceDefinition を参照するモデル。

7.5.1.32. console.global-config

7.5.1.32.1. 概要

(利用できません)

7.5.1.32.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

name

string

いいえ

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

model

ExtensionK8sModel

いいえ

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

namespace

string

いいえ

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

7.5.1.33. console.model-metadata

7.5.1.33.1. 概要

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

7.5.1.33.2. プロパティー
名前値のタイプ任意説明

model

ExtensionK8sGroupModel

いいえ

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

badge

ModelBadge

はい

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

color

string

はい

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

label

string

はい

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

labelPlural

string

はい

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

abbr

string

はい

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

7.5.1.34. console.navigation/href

7.5.1.34.1. 概要

(利用できません)

7.5.1.34.2. プロパティー
名前値のタイプ任意説明

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 を最初に追加します。

7.5.1.35. console.navigation/resource-cluster

7.5.1.35.1. 概要

(利用できません)

7.5.1.35.2. プロパティー
名前値のタイプ任意説明

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

はい

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

7.5.1.36. console.navigation/resource-ns

7.5.1.36.1. 概要

(利用できません)

7.5.1.36.2. プロパティー
名前値のタイプ任意説明

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

はい

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

7.5.1.37. console.navigation/section

7.5.1.37.1. 概要

(利用できません)

7.5.1.37.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

perspective

string

はい

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

dataAttributes

{ [key: string]: string; }

はい

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

insertBefore

string | string[]

はい

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

insertAfter

string | string[]

はい

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

name

string

はい

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

7.5.1.38. console.navigation/separator

7.5.1.38.1. 概要

(利用できません)

7.5.1.38.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

perspective

string

はい

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

section

string

はい

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

dataAttributes

{ [key: string]: string; }

はい

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

insertBefore

string | string[]

はい

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

insertAfter

string | string[]

はい

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

7.5.1.39. console.page/resource/details

7.5.1.39.1. summary

Web コンソールルーターに新しいリソースの詳細ページを追加します。

7.5.1.39.2. Properties
名前値のタイプ任意説明

model

ExtensionK8sGroupKindModel

いいえ

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

component

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

いいえ

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

7.5.1.40. console.page/resource/list

7.5.1.40.1. 概要

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

7.5.1.40.2. プロパティー
名前値のタイプ任意説明

model

ExtensionK8sGroupKindModel

いいえ

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

component

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

いいえ

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

7.5.1.41. console.page/route

7.5.1.41.1. summary

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

7.5.1.41.2. Properties
名前値のタイプ任意説明

component

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

いいえ

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

path

string | string[]

いいえ

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

perspective

string

はい

このページが属するパースペクティブ。指定されていない場合は、すべてのパースペクティブに提供します。

exact

boolean

はい

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

7.5.1.42. console.page/route/standalone

7.5.1.42.1. summary

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

7.5.1.42.2. Properties
名前値のタイプ任意説明

component

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

いいえ

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

path

string | string[]

いいえ

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

exact

boolean

はい

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

7.5.1.43. console.perspective

7.5.1.43.1. 概要

(利用できません)

7.5.1.43.2. プロパティー
名前値のタイプ任意説明

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

はい

デフォルトのパースペクティブを検出するフック

7.5.1.44. console.project-overview/inventory-item

7.5.1.44.1. summary

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

7.5.1.44.2. Properties
名前値のタイプ任意説明

component

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

いいえ

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

7.5.1.45. console.project-overview/utilization-item

7.5.1.45.1. 概要

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

7.5.1.45.2. プロパティー
名前値のタイプ任意説明

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

はい

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

7.5.1.46. console.pvc/alert

7.5.1.46.1. 概要

(利用できません)

7.5.1.46.2. プロパティー
名前値のタイプ任意説明

alert

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

いいえ

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

7.5.1.47. console.pvc/create-prop

7.5.1.47.1. 概要

(利用できません)

7.5.1.47.2. プロパティー
名前値のタイプ任意説明

label

string

いいえ

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

path

string

いいえ

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

7.5.1.48. console.pvc/delete

7.5.1.48.1. 概要

(利用できません)

7.5.1.48.2. プロパティー
名前値のタイプ任意説明

predicate

CodeRef<(pvc: K8sResourceCommon) ⇒ boolean>

いいえ

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

onPVCKill

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

いいえ

PVC 削除操作の方法。

alert

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

いいえ

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

7.5.1.49. console.pvc/status

7.5.1.49.1. 概要

(利用できません)

7.5.1.49.2. プロパティー
名前値のタイプ任意説明

priority

number

いいえ

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

status

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

いいえ

status コンポーネント。

predicate

CodeRef<(pvc: K8sResourceCommon) ⇒ boolean>

いいえ

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

7.5.1.50. console.redux-reducer

7.5.1.50.1. 概要

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

7.5.1.50.2. プロパティー
名前値のタイプ任意説明

scope

string

いいえ

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

reducer

CodeRef<Reducer<any, AnyAction>>

いいえ

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

7.5.1.51. console.resource/create

7.5.1.51.1. 概要

(利用できません)

7.5.1.51.2. プロパティー
名前値のタイプ任意説明

model

ExtensionK8sModel

いいえ

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

component

CodeRef<React.ComponentType<CreateResourceComponentProps>>

いいえ

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

7.5.1.52. console.storage-provider

7.5.1.52.1. 概要

(利用できません)

7.5.1.52.2. プロパティー
名前値のタイプ任意説明

name

string

いいえ

 

コンポーネント

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

いいえ

 

7.5.1.53. console.tab/horizontalNav

7.5.1.53.1. 概要

(利用できません)

7.5.1.53.2. プロパティー
名前値のタイプ任意説明

model

ExtensionK8sKindVersionModel

いいえ

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

page

{ name: string; href: string; }

いいえ

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

component

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

いいえ

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

7.5.1.54. console.telemetry/listener

7.5.1.54.1. 概要

(利用できません)

7.5.1.54.2. プロパティー
名前値のタイプ任意説明

listener

CodeRef<TelemetryEventListener>

いいえ

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

7.5.1.55. console.topology/adapter/build

7.5.1.55.1. summary

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

7.5.1.55.2. Properties
名前値のタイプ任意説明

adapt

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

undefined>

いいえ

7.5.1.56. console.topology/adapter/network

7.5.1.56.1. summary

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

7.5.1.56.2. Properties
名前値のタイプ任意説明

adapt

<(element: GraphElement) ⇒ NetworkAdapterType

undefined>

いいえ

7.5.1.57. console.topology/adapter/pod

7.5.1.57.1. summary

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

7.5.1.57.2. Properties
名前値のタイプ任意説明

adapt

`CodeRef<(element: GraphElement) ⇒ AdapterDataType<PodsAdapterDataType>

undefined>

いいえ

7.5.1.58. console.topology/component/factory

7.5.1.58.1. summary

ViewComponentFactory の Getter。

7.5.1.58.2. Properties
名前値のタイプ任意説明

getFactory

CodeRef<ViewComponentFactory>

いいえ

ViewComponentFactory の Getter。

7.5.1.59. console.topology/create/connector

7.5.1.59.1. summary

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

7.5.1.59.2. Properties
名前値のタイプ任意説明

getCreateConnector

CodeRef<CreateConnectionGetter>

いいえ

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

7.5.1.60. console.topology/data/factory

7.5.1.60.1. 概要

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

7.5.1.60.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

priority

number

いいえ

ファクトリーの優先度

resources

WatchK8sResourcesGeneric

はい

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

workloadKeys

string[]

はい

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

getDataModel

CodeRef<TopologyDataModelGetter>

はい

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

isResourceDepicted

CodeRef<TopologyDataModelDepicted>

はい

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

getDataModelReconciler

CodeRef<TopologyDataModelReconciler>

はい

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

7.5.1.61. console.topology/decorator/provider

7.5.1.61.1. 概要

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

7.5.1.61.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

 

priority

number

いいえ

 

quadrant

TopologyQuadrant

いいえ

 

decorator

CodeRef<TopologyDecoratorGetter>

いいえ

 

7.5.1.62. console.topology/details/resource-alert

7.5.1.62.1. summary

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

7.5.1.62.2. Properties
名前値のタイプ任意説明

id

string

いいえ

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

contentProvider

CodeRef<(element: GraphElement) ⇒ DetailsResourceAlertContent

null>

いいえ

7.5.1.64. console.topology/details/tab

7.5.1.64.1. summary

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

7.5.1.64.2. Properties
名前値のタイプ任意説明

id

string

いいえ

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

label

string

いいえ

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

insertBefore

string | string[]

はい

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

insertAfter

string | string[]

はい

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

7.5.1.65. console.topology/details/tab-section

7.5.1.65.1. summary

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

7.5.1.65.2. Properties
名前値のタイプ任意説明

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

はい

7.5.1.66. console.topology/display/filters

7.5.1.66.1. 概要

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

7.5.1.66.2. プロパティー
名前値のタイプ任意説明

getTopologyFilters

CodeRef<() ⇒ TopologyDisplayOption[]>

いいえ

 

applyDisplayOptions

CodeRef<TopologyApplyDisplayOptions>

いいえ

 

7.5.1.67. console.topology/relationship/provider

7.5.1.67.1. 概要

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

7.5.1.67.2. プロパティー
名前値のタイプ任意説明

provides

CodeRef<RelationshipProviderProvides>

いいえ

 

ヒント

string

いいえ

 

create

CodeRef<RelationshipProviderCreate>

いいえ

 

priority

number

いいえ

 

7.5.1.68. console.user-preference/group

7.5.1.68.1. 概要

(利用できません)

7.5.1.68.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

label

string

いいえ

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

insertBefore

string

はい

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

insertAfter

string

はい

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

7.5.1.69. console.user-preference/item

7.5.1.69.1. 概要

(利用できません)

7.5.1.69.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

label

string

いいえ

ユーザー設定のラベル

description

string

いいえ

ユーザー設定の説明。

field

UserPreferenceField

いいえ

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

groupId

string

はい

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

insertBefore

string

はい

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

insertAfter

string

はい

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

7.5.1.70. console.yaml-template

7.5.1.70.1. 概要

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

7.5.1.70.2. プロパティー
名前値のタイプ任意説明

model

ExtensionK8sModel

いいえ

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

template

CodeRef<string>

いいえ

YAML テンプレート。

name

string

いいえ

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

7.5.1.71. dev-console.add/action

7.5.1.71.1. 概要

(利用できません)

7.5.1.71.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

label

string

いいえ

アクションのラベル

description

string

いいえ

アクションの説明。

href

string

いいえ

移動先の href。

groupId

string

はい

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

icon

CodeRef<React.ReactNode>

はい

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

accessReview

AccessReviewResourceAttributes[]

はい

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

7.5.1.72. dev-console.add/action-group

7.5.1.72.1. 概要

(利用できません)

7.5.1.72.2. プロパティー
名前値のタイプ任意説明

id

string

いいえ

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

name

string

いいえ

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

insertBefore

string

はい

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

insertAfter

string

はい

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

7.5.1.73. dev-console.import/environment

7.5.1.73.1. 概要

(利用できません)

7.5.1.73.2. プロパティー
名前値のタイプ任意説明

imageStreamName

string

いいえ

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

imageStreamTags

string[]

いいえ

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

environments

ImageEnvironment[]

いいえ

環境変数のリスト

7.5.1.74. console.page/resource/tab

7.5.1.74.1. 概要 [非推奨]

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

7.5.1.74.2. Properties
名前値のタイプ任意説明

model

ExtensionK8sGroupKindModel

いいえ

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

component

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

いいえ

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

name

string

いいえ

タブの名前。

href

string

はい

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

exact

boolean

はい

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

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

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

  • 以下のコマンドを実行して、コンソールの Operator 設定でプラグインが有効になっており、プラグイン名が出力されていることを確認します。

    $ oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}'
    • Administrator perspectiveOverview ページのステータスカードで、有効なプラグインを確認します。プラグインが最近有効になった場合は、ブラウザーを更新する必要があります。
  • 次の方法で、プラグインサービスが正常であることを確認します。

    • プラグイン Pod のステータスが実行中であり、コンテナーの準備が整っていることを確認します。
    • サービスラベルセレクターが Pod と一致し、ターゲットポートが正しいことを確認します。
    • コンソール Pod 上のターミナルまたはクラスター上の別の Pod のサービスから、curl コマンドを 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 コンソールにログインしている。
  • クラスター管理者パーミッションがある。

手順

  1. Web コンソールの Administrator パースペクティブで、Operators → OperatorHub に移動します。
  2. Filter by keyword ボックスを使用してカタログで Web Terminal Operator を検索し、Web Terminal タイルをクリックします。
  3. Web Terminal ページで Operator についての簡単な説明を確認してから、Install をクリックします。
  4. 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 によって自動的に処理されます。
  5. Install をクリックします。
  6. Installed Operators ページで、View Operator をクリックし、Operator が Installed Operators ページにリスト表示されていることを確認します。

    注記

    Web Terminal Operator は、DevWorkspace Operator を依存関係としてインストールします。

  7. Operator のインストール後に、ページを更新し、コンソールのマストヘッドにあるコマンドラインターミナルアイコン ( odc wto icon ) を確認します。

8.2. Web 端末の使用

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

8.2.1. Web 端末へのアクセス

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

前提条件

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

手順

  1. Web 端末を起動するには、コンソールのマストヘッドにあるコマンドラインターミナルアイコン ( odc wto icon ) をクリックします。Web 端末インスタンスが、Command line terminal ペインに表示されます。このインスタンスは、お使いの認証情報を使用して自動的にログインします。
  2. 現在のセッションでプロジェクトが選択されていない場合は、DevWorkspace CR を作成する必要があるプロジェクトを Project ドロップダウンリストから選択します。デフォルトでは、現在のプロジェクトが選択されます。

    注記
    • DevWorkspace CR は存在しない場合にのみ作成されます。
    • openshift-terminal プロジェクトは、クラスター管理者に使用されるデフォルトのプロジェクトです。別のプロジェクトを選択するオプションはありません。Web Terminal Operator は、DevWorkspace Operator を依存関係としてインストールします。
  3. オプション: 現在のセッションの Web 端末タイムアウトを設定します。

    1. Timeout をクリックします。
    2. 表示されるフィールドにタイムアウト値を入力します。
    3. ドロップダウンリストから、タイムアウト間隔を SecondsMinutesHour、または Milli Seconds から選択します。
  4. オプション: Web 端末で使用するカスタムイメージを選択します。

    1. イメージをクリックします。
    2. 表示されるフィールドに、使用するイメージの URL を入力します。
  5. Start をクリックし、選択したプロジェクトを使用して Web 端末を初期化します。
  6. + をクリックして、コンソールの 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 つの手順で実行されます。

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

8.4.1. Web Terminal Operator の削除

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

前提条件

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

手順

  1. Web コンソールの Administrator パースペクティブで、Operators → Installed Operators に移動します。
  2. フィルターリストをスクロールするか、Filter by name ボックスにキーワードを入力して Web Terminal Operator を見つけます。
  3. Web Terminal Operator の Options メニュー kebab をクリックし、Uninstall Operator を選択します。
  4. 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 がインストールされている。

手順

  1. Operator が使用する DevWorkspace カスタムリソースと関連する Kubernetes オブジェクトを削除します。

    $ oc delete devworkspaces.workspace.devfile.io --all-namespaces --all --wait
    $ oc delete devworkspaceroutings.controller.devfile.io --all-namespaces --all --wait
    警告

    この手順が完了していない場合、ファイナライザーにより Operator を完全にアンインストールすることが困難になります。

  2. 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
  3. 関連するすべてのカスタムリソース定義が削除されていることを確認します。以下のコマンドを実行しても何も出力されないはずです。

    $ oc get customresourcedefinitions.apiextensions.k8s.io | grep "devfile.io"
  4. 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 コマンドを再度使用できます。

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

    $ 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
  6. DevWorkspace Operator をアンインストールします。

    1. Web コンソールの Administrator パースペクティブで、Operators → Installed Operators に移動します。
    2. フィルターリストをスクロールするか、Filter by name ボックスにキーワードを入力して DevWorkspace Operator を見つけます。
    3. Operator のオプションメニュー kebab をクリックし、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. クイックスタートのユーザーワークフロー

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

  1. Administrator または Developer パースペクティブで、Help アイコン をクリックし、Quick Starts を選択します。
  2. クイックスタートカードをクリックします。
  3. 表示されるパネルで Start をクリックします。
  4. 画面上の手順を実行し、Next をクリックします。
  5. 表示される Check your work モジュールで質問に回答し、タスクが正常に完了したことを確認します。

    1. Yes を選択した場合には、Next をクリックして次のタスクに進みます。
    2. No を選択した場合は、タスクの手順を繰り返して作業を再度確認します。
  6. 上記の手順 1 から 6 を繰り返し、クイックスタートの残りのタスクを完了します。
  7. 最終タスクが完了したら、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 および管理者は、このリソースを使用してクイックスタートをクラスターに提供できます。

前提条件

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

手順

  1. 新規のクイックスタートを作成するには、以下を実行します。

    $ oc get -o yaml consolequickstart spring-with-s2i > my-quick-start.yaml
  2. 以下を実行します。

    $ oc create -f my-quick-start.yaml
  3. 本書で説明されているガイダンスを使用して、YAML ファイルを更新します。
  4. 編集を保存します。

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 が表示されます。

Web コンソールでのクイックスタートの 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 ページのクイックスタートの導入部分のタイルに表示されます。

Web コンソールでのクイックスタートの description

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 ページの導入部分のタイルに表示されます。

Web コンソールでのクイックスタートの名前

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 ページのクイックスタートの導入部分のタイルに表示されます。

Web コンソールでのクイックスタートの durationMinutes 要素

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 ページのクイックスタートの導入部分のタイルに表示されます。

Web コンソールでのクイックスタート icon 要素

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 要素の表示

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

Web コンソールでのクイックスタートの introduction 要素

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

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

手順

  1. カスタムアイコンとして使用する .svg ファイルを見つけます。
  2. オンラインツールを使用して、テキストを base64 に変換 します。
  3. 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.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.
  • 右上隅でアイコンをクリックなどの指示文は使用しないようにしてください。指示文は 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. 関連情報

法律上の通知

Copyright © 2024 Red Hat, Inc.
The text of and illustrations in this document are licensed by Red Hat under a Creative Commons Attribution–Share Alike 3.0 Unported license ("CC-BY-SA"). An explanation of CC-BY-SA is available at http://creativecommons.org/licenses/by-sa/3.0/. In accordance with CC-BY-SA, if you distribute this document or an adaptation of it, you must provide the URL for the original version.
Red Hat, as the licensor of this document, waives the right to enforce, and agrees not to assert, Section 4d of CC-BY-SA to the fullest extent permitted by applicable law.
Red Hat, Red Hat Enterprise Linux, the Shadowman logo, the Red Hat logo, JBoss, OpenShift, Fedora, the Infinity logo, and RHCE are trademarks of Red Hat, Inc., registered in the United States and other countries.
Linux® is the registered trademark of Linus Torvalds in the United States and other countries.
Java® is a registered trademark of Oracle and/or its affiliates.
XFS® is a trademark of Silicon Graphics International Corp. or its subsidiaries in the United States and/or other countries.
MySQL® is a registered trademark of MySQL AB in the United States, the European Union and other countries.
Node.js® is an official trademark of Joyent. Red Hat is not formally related to or endorsed by the official Joyent Node.js open source or commercial project.
The OpenStack® Word Mark and OpenStack logo are either registered trademarks/service marks or trademarks/service marks of the OpenStack Foundation, in the United States and other countries and are used with the OpenStack Foundation's permission. We are not affiliated with, endorsed or sponsored by the OpenStack Foundation, or the OpenStack community.
All other trademarks are the property of their respective owners.