Red Hat Developer Hub のカスタマイズ

• File > Open template directory
• File > Create template directory
• File > Close template editor
• Custom Fields Explorer ボタンを使用して、templates.yaml ファイル内のカスタムフィールドをテストする
• Installed Actions Documentation を表示する

次のステップ

• RHDH インスタンスに Software Template をインポートします。

前提条件

• 少なくとも 1 つのテンプレート YAML ファイルを含むディレクトリーまたはリポジトリーを作成した。
• GitHub や GitLab などのリポジトリーに保存されているテンプレートを使用する場合は、使用するプロバイダー用の Red Hat Developer Hub 統合を設定した。

手順

• app-config.yaml 設定ファイルで、catalog.rules セクションを変更してテンプレートのルールを含め、追加するテンプレートを参照するように catalog.locations セクションを設定します (次の例を参照)。

  # ...
  catalog:
    rules:
      - allow: [Template] 

  1

  
    locations:
      - type: url 

  2

  
        target: https://<repository_url>/example-template.yaml 

  3

  
  # ...

  1

  新しい Software Template をカタログに追加できるようにするには、Template ルールを追加する必要があります。

  2

  GitHub や GitLab などのリポジトリーからテンプレートをインポートする場合は、url タイプを使用します。

  3

  ソフトウェアテンプレートの URL を指定します。

• app-config.yaml ファイルに次のコードを追加します。

  proxy:
    endpoints:
      '/developer-hub':
        target: https://raw.githubusercontent.com/
        pathRewrite:
          '^/api/proxy/developer-hub/learning-paths': '/redhat-developer/rhdh/main/packages/app/public/learning-paths/data.json'
          '^/api/proxy/developer-hub/tech-radar': '/redhat-developer/rhdh/main/packages/app/public/tech-radar/data-default.json'
          '^/api/proxy/developer-hub': '/redhat-developer/rhdh/main/packages/app/public/homepage/data.json'
        changeOrigin: true
        secure: true

• 同じサービスを使用して、設定可能なすべての Developer Hub ページにデータを提供するか、ページごとに異なるサービスを使用できます。
• Home ページと Tech Radar ページの両方にデータを提供するサンプルサービスとして、red-hat-developer-hub-customization-provider を使用できます。red-hat-developer-hub-customization-provider サービスは、デフォルトの Developer Hub データと同じデータを提供します。必要に応じて、GitHub から red-hat-developer-hub-customization-provider サービスリポジトリーをフォークし、独自のデータで変更できます。
• red-hat-developer-hub-customization-provider サービスと Developer Hub Helm チャートを同じクラスターにデプロイできます。

前提条件

• Helm チャートを使用して Red Hat Developer Hub をインストールしている。詳細は、OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

前提条件

• ヘッダーに Support ボタンを表示する場合は、app-config.yaml ファイルでサポートの URL を設定する。
• ヘッダーに Notifications ボタンを表示する場合は、通知プラグインをインストールする。

• app-config-dynamic.yaml ファイルで global.floatingactionbutton/config マウントポイントを指定します。以下に例を示します。

  一括インポートプラグインをフローティングアクションボタンとして設定する例

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-bulk-import:
            # Start of the floating action button configuration
            mountPoints:
              - mountPoint: global.floatingactionbutton/config
                importName: BulkImportPage 

  1

  
                config:
                  slot: 'page-end'
                  icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg> 

  2

  
                  label: 'Bulk import'
                  toolTip: 'Register multiple repositories in bulk'
                  to: /bulk-import/repositories
            # End of the floating action button configuration
            appIcons:
              - name: bulkImportIcon
                importName: BulkImportIcon
            dynamicRoutes:
              - path: /bulk-import/repositories
                importName: BulkImportPage
                menuItem:
                  icon: bulkImportIcon
                  text: Bulk import

  1

  (必須) マウントポイントに関連するコンポーネントを含むインポート名。

  2

  svg 値を使用して、黒い BulkImportPage アイコンを表示します。

• 外部リンクを開くフローティングアクションボタンとしてアクションを設定するには、backstage-plugin-global-floating-action-button プラグイン内の dynamic-plugins.yaml ファイルで global.floatingactionbutton/config マウントポイントを指定します。以下に例を示します。

  GitHub を開くフローティングアクションボタンの例

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-global-floating-action-button:
            mountPoints:
                - mountPoint: application/listener
                  importName: DynamicGlobalFloatingActionButton
                - mountPoint: global.floatingactionbutton/config
                  importName: NullComponent 

  1

  
                  config:
                    icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>' 

  2

  
                    label: 'Quay'
                    showLabel: true
                    toolTip: 'Quay'
                    to: 'https://quay.io'
                - mountPoint: global.floatingactionbutton/config
                  importName: NullComponent
                  config:
                    icon: github
                    label: 'Git'
                    toolTip: 'Github'
                    to: https://github.com/redhat-developer/rhdh-plugins

  1

  (必須) マウントポイントに関連するコンポーネントを含むインポート名。

  2

  svg 値を使用して Quay アイコンを表示します。

• サブメニューを備えたフローティングアクションボタンを設定するには、複数のアクションの dynamic-plugins.yaml ファイルで、同じ slot フィールドに global.floatingactionbutton/config マウントポイントを定義します。指定されていない場合、デフォルトのスロットは page-end になります。以下に例を示します。

  サブメニューアクションを備えたフローティングアクションボタンの例

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-bulk-import:
            # Start of fab config
            mountPoints:
              - mountPoint: global.floatingactionbutton/config
                importName: BulkImportPage 

  1

  
                config:
                  slot: 'page-end'
                  icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                  label: 'Bulk import'
                  toolTip: 'Register multiple repositories in bulk'
                  to: /bulk-import/repositories
            # end of fab config
            appIcons:
              - name: bulkImportIcon
                importName: BulkImportIcon
            dynamicRoutes:
              - path: /bulk-import/repositories
                importName: BulkImportPage
                menuItem:
                  icon: bulkImportIcon
                  text: Bulk import
  
  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-global-floating-action-button:
            mountPoints:
              - mountPoint: application/listener
                importName: DynamicGlobalFloatingActionButton
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent 

  2

  
                config:
                  icon: github
                  label: 'Git'
                  toolTip: 'Github'
                  to: https://github.com/redhat-developer/rhdh-plugins
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent 

  3

  
                config:
                  icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
                  label: 'Quay'
                  showLabel: true
                  toolTip: 'Quay'
                  to: 'https://quay.io'

  1 2 3

  (必須) マウントポイントに関連するコンポーネントを含むインポート名。

• フローティングアクションボタンを特定のページにのみ表示するように設定するには、backstage-plugin-global-floating-action-button プラグインで global.floatingactionbutton/config マウントポイントを設定し、次の例に示すように visibleOnPaths プロパティーを設定します。

  特定のページで表示するフローティングアクションボタンの例

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-bulk-import:
            # start of fab config
            mountPoints:
              - mountPoint: global.floatingactionbutton/config
                importName: BulkImportPage 

  1

  
                config:
                  slot: 'page-end'
                  icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                  label: 'Bulk import'
                  toolTip: 'Register multiple repositories in bulk'
                  to: /bulk-import/repositories
                  visibleOnPaths: ['/catalog', '/settings']
            # end of fab config
            appIcons:
              - name: bulkImportIcon
                importName: BulkImportIcon
            dynamicRoutes:
              - path: /bulk-import/repositories
                importName: BulkImportPage
                menuItem:
                  icon: bulkImportIcon
                  text: Bulk import

  1

  (必須) マウントポイントに関連するコンポーネントを含むインポート名。

• 特定のページでフローティングアクションボタンを非表示にするには、backstage-plugin-global-floating-action-button プラグインで global.floatingactionbutton/config マウントポイントを設定し、次の例に示すように excludeOnPaths プロパティーを設定します。

  特定のページで非表示にするフローティングアクションボタンの例

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
    disabled: false
    pluginConfig:
      dynamicPlugins:
        frontend:
          red-hat-developer-hub.backstage-plugin-bulk-import:
            # start of fab config
            mountPoints:
              - mountPoint: global.floatingactionbutton/config
                importName: BulkImportPage 

  1

  
                config:
                  slot: 'page-end'
                  icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                  label: 'Bulk import'
                  toolTip: 'Register multiple repositories in bulk'
                  to: /bulk-import/repositories
                  excludeOnPaths: ['/bulk-import']
            # end of fab config
            appIcons:
              - name: bulkImportIcon
                importName: BulkImportIcon
            dynamicRoutes:
              - path: /bulk-import/repositories
                importName: BulkImportPage
                menuItem:
                  icon: bulkImportIcon
                  text: Bulk import

  1

  (必須) マウントポイントに関連するコンポーネントを含むインポート名。

前提条件

• app-config.yaml ファイルの integrations セクションで、Tech Radar プラグインのデータソースを指定しているたとえば、GitHub を統合として設定するには、GitHub を使用した認証 を参照してください。
• ./dynamic-plugins/dist/backstage-community-plugin-tech-radar プラグインおよび /dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic プラグインを有効化している。

前提条件

• app-config.yaml ファイルの integrations セクションで、Tech Radar プラグインのデータソースを指定しているたとえば、GitHub を統合として設定するには、GitHub を使用した認証 を参照してください。
• ./dynamic-plugins/dist/backstage-community-plugin-tech-radar プラグインおよび /dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic プラグインを有効化している。

• Light theme
• Dark theme
• Auto

前提条件

• Developer Hub Web コンソールにログインしている。

手順

• 変更する各タブについて、app-config.yaml ファイルの entityTabs セクションに必要な値を入力します。

  upstream:
    backstage:
      appConfig:
        dynamicPlugins:
          frontend:
           <plugin_name>:
              entityTabs:
                - mountPoint: <mount_point>
                  path: <path>
                  title: <title>
                  priority: <priority>

  <plugin_name>

  backstage-community.plugin-topology などのプラグイン名を入力します。

  mountPoint

  entity.page.topology などのタブマウントポイントを入力します。

  path

  /topology などのタブパスを入力します。

  title

  Topology などのタブのタイトルを入力します。

  priority

  オプション:

  タブの順序を変更するには、42 などのタブの優先度を入力します。優先度が高いものが最初に表示されます。

  タブを削除するには、-1 などの負の値を入力します。

前提条件

• タブの内容を提供するプラグインで設定が許可されている (config セクションでデフォルト設定を定義する Developer Hub プラグイン など)。

手順

• app-config.yaml ファイルのプラグインのデフォルト設定をコピーし、layout のプロパティーを変更します。

  global:
    dynamic:
      plugins:
        - package: <package_location>
          disabled: false
          pluginConfig:
            dynamicPlugins:
              frontend:
                <plugin_name>:
                  mountPoints:
                    - mountPoint: <mount_point>
                      importName: <import_name>
                      config:
                        layout:
                          gridColumn:
                            lg: span 6
                            xs: span 12

  package

  パッケージの場所を入力します (例: ./dynamic-plugins/dist/backstage-community-plugin-tekton)。

  <plugin_name>

  プラグイン名を入力します (例: backstage-community.plugin-tekton)。

  mountPoint

  プラグインのデフォルト設定で定義されているマウントポイント (例: entity.page.ci/cards) をコピーします。

  importName

  プラグインのデフォルト設定で定義されているインポート名 (例: TektonCI) をコピーします。

  layout

  レイアウト設定を入力します。タブの内容を、12 列のグリッドを使用するレスポンシブなグリッドに表示します。このグリッドは、gridColumn などの CSS プロパティーに指定できるさまざまなブレークポイント (xs、sm、md、lg、xl) をサポートしています。この例では、12 列のうち 6 列を使用して、2 枚の Tekton CI カードを大きい画面 (lg) に並べて表示します (span 6 列を使用)。また、カードをそれぞれ表示します (xs 以上で span 12 列を使用)。

関連情報

• 「Developer Hub インスタンスのテーマモードのカスタマイズ」

検証

• テーマは、Developer Hub の Settings ページで利用できます。

• Patternfly
• MUI

前提条件

• 管理者アクセス権があり、動的プラグイン設定の app-config.yaml ファイルを変更できる。

手順

• 次のように、Red Hat Developer Hub の Home ページにさまざまなカードを設定します。

  検索

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: SearchBar
            config:
              layouts:
                xl: { w: 10, h: 1, x: 1 }
                lg: { w: 10, h: 1, x: 1 }
                md: { w: 10, h: 1, x: 1 }
                sm: { w: 10, h: 1, x: 1 }
                xs: { w: 12, h: 1 }
                xxs: { w: 12, h: 1 }

  Expand

  表10.1 利用可能なプロパティー

  プロパティー	デフォルト	説明
  path	/search	必要に応じて、リンクされた検索パスをオーバーライドします。
  queryParam	query	必要に応じて、検索クエリーパラメーター名をオーバーライドします。

  Show more

  クイックアクセス

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: QuickAccessCard
            config:
              layouts:
                xl: { h: 8 }
                lg: { h: 8 }
                md: { h: 8 }
                sm: { h: 8 }
                xs: { h: 8 }
                xxs: { h: 8 }

  Expand

  表10.2 利用可能なプロパティー

  プロパティー	デフォルト	説明
  title	Quick Access	必要に応じて、リンクされた検索パスをオーバーライドします。
  path	none	必要に応じて、検索クエリーパラメーター名をオーバーライドします。

  Show more

  見出し

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: Headline
            config:
              layouts:
                xl: { h: 1 }
                lg: { h: 1 }
                md: { h: 1 }
                sm: { h: 1 }
                xs: { h: 1 }
                xxs: { h: 1 }
              props:
                title: Important info

  Expand

  表10.3 利用可能なプロパティー

  プロパティー	デフォルト	説明
  title	none	タイトル

  Show more

  マークダウン

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: MarkdownCard
            config:
              layouts:
                xl: { w: 6, h: 4 }
                lg: { w: 6, h: 4 }
                md: { w: 6, h: 4 }
                sm: { w: 6, h: 4 }
                xs: { w: 6, h: 4 }
                xxs: { w: 6, h: 4 }
              props:
                title: Company links
                content: |
                  ### RHDH
                  * [Website](https://developers.redhat.com/rhdh/overview)
                  * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                  * [Janus Plugins](https://github.com/janus-idp/backstage-plugins)
                  * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                  * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                  * [RHDH Showcase](https://github.com/redhat-developer/rhdh)
          - mountPoint: home.page/cards
            importName: Markdown
            config:
              layouts:
                xl: { w: 6, h: 4, x: 6 }
                lg: { w: 6, h: 4, x: 6 }
                md: { w: 6, h: 4, x: 6 }
                sm: { w: 6, h: 4, x: 6 }
                xs: { w: 6, h: 4, x: 6 }
                xxs: { w: 6, h: 4, x: 6 }
              props:
                title: Important company links
                content: |
                  ### RHDH
                  * [Website](https://developers.redhat.com/rhdh/overview)
                  * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                  * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                  * [Janus Plugins](https://github.com/janus-idp/backstage-plugins)
                  * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                  * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                  * [RHDH Showcase](https://github.com/redhat-developer/rhdh)

  プレースホルダー

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: Placeholder
            config:
              layouts:
                xl: { w: 1, h: 1 }
                lg: { w: 1, h: 1 }
                md: { w: 1, h: 1 }
                sm: { w: 1, h: 1 }
                xs: { w: 1, h: 1 }
                xxs: { w: 1, h: 1 }
              props:
                showBorder: true
                debugContent: '1'

  スター付きエンティティーのカタログ化

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: CatalogStarredEntitiesCard

  注目のドキュメント

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: FeaturedDocsCard

前提条件

• 各ブレークポイントに次の最適なパラメーターを含めます。

  • 幅 (w)
  • 高さ (h)
  • 位置 (x および y)

手順

• 次のいずれかのオプションを選択して、Developer Hub の app-config.yaml 設定ファイルを設定します。

  • 次のように、小さいウィンドウではスペース全体を、大きいウィンドウではスペースの半分を使用します。

• 次の例に示すように、x パラメーターを定義してカードを並べて表示します。

• 次の例に示すように、x パラメーターを定義してカードを 3 列で表示します。

前提条件

• Operator または Helm チャートのいずれかを使用して Red Hat Developer Hub をインストールしている。OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

手順

• JSON ファイルからのデータにアクセスするには、Developer Hub の app-config.yaml 設定ファイルに次のコードを追加します。

• app-config.yaml ファイルに次のコードを追加します。

  proxy:
    endpoints:
      # Other Proxies
      # customize developer hub instance
      '/developer-hub':
        target: <DOMAIN_URL> # i.e https://raw.githubusercontent.com/
        pathRewrite:
          '^/api/proxy/developer-hub': <path to json file> # i.e /redhat-developer/rhdh/main/packages/app/public/homepage/data.json
        changeOrigin: true
        secure: true
        # Change to "false" in case of using self hosted cluster with a self-signed certificate
        headers:
  	<HEADER_KEY>: <HEADER_VALUE> # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo

• 同じサービスを使用して、設定可能なすべての Developer Hub ページにデータを提供するか、ページごとに異なるサービスを使用できます。
• Home ページと Tech Radar ページの両方にデータを提供するサンプルサービスとして、red-hat-developer-hub-customization-provider を使用できます。red-hat-developer-hub-customization-provider サービスは、デフォルトの Developer Hub データと同じデータを提供します。必要に応じて、GitHub から red-hat-developer-hub-customization-provider サービスリポジトリーをフォークし、独自のデータで変更できます。
• red-hat-developer-hub-customization-provider サービスと Developer Hub Helm チャートを同じクラスターにデプロイできます。

前提条件

• Helm チャートを使用して Red Hat Developer Hub をインストールしている。詳細は、Helm チャートを使用した OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

検証

• サービスを表示するには、OpenShift Container Platform Web コンソールの Administrator パースペクティブに移動し、Networking > Service をクリックします。

  注記

  Topology ビューで Service Resources を表示することもできます。

• 次の例に示すように、指定した Home ページの API URL から、JSON 形式でデータが返されることを確認します。

  [
    {
      "title": "Dropdown 1",
      "isExpanded": false,
      "links": [
        {
          "iconUrl": "https://imagehost.com/image.png",
          "label": "Dropdown 1 Item 1",
          "url": "https://example.com/"
        },
        {
          "iconUrl": "https://imagehost2.org/icon.png",
          "label": "Dropdown 1 Item 2",
          "url": ""
        }
      ]
    },
    {
      "title": "Dropdown 2",
      "isExpanded": true,
      "links": [
        {
          "iconUrl": "http://imagehost3.edu/img.jpg",
          "label": "Dropdown 2 Item 1",
          "url": "http://example.com"
        }
      ]
    }
  ]

  注記

  要求の呼び出しが失敗した場合や、設定されていない場合、Developer Hub インスタンスはデフォルトのローカルデータにフォールバックします。

• イメージまたはアイコンが読み込まれない場合は、次の例に示すように、カスタム ConfigMap のコンテンツセキュリティーポリシー (csp) img-src にイメージまたはアイコンのホスト URL を追加して、その URL を許可リストに登録します。