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 をインポートします。

検証

• ソフトウェアコンポーネントが正常に作成されなかった場合は、エラーページでログを確認できます。同じテンプレートフォームと以前入力した値を含む Self-service ページに戻るには、Start Over をクリックします。

• Software Template が正常に作成されると、次のイメージの例のような作成完了ページが表示されます。

  

  View larger image

  

前提条件

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

手順

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

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

  1

  
    locations:
      - type: url 

  2

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

  3

  
  # ...

  Copy to Clipboard Toggle word wrap

  1

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

  2

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

  3

  テンプレートの URL を指定します。

前提条件

• Red Hat Developer Hub インスタンスをインストールおよび設定している。
• 必要なパーミッションがある。Red Hat Developer Hub での認可 を参照してください。

• GUI を使用するか、必要なパーミッションで app-config.yaml を使用して、コンポーネントを手動で登録します。
• Software Template を使用して新しいコンポーネントを作成します。
• 必要なパーミッションで一括インポートプラグインを使用します。詳細は、GitHub リポジトリーの一括インポート を参照してください。

前提条件

• Red Hat Developer Hub インスタンスをインストールおよび設定している。
• 必要なパーミッションがある。Red Hat Developer Hub での認可 を参照してください。

検証

• スターを付けたコンポーネントは、Home ページの Your Starred Entities の下に表示されます。

関連情報

• Red Hat Developer Hub の Home ページのカスタマイズ

前提条件

• ヘッダーに 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

  Copy to Clipboard Toggle word wrap

  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

  Copy to Clipboard Toggle word wrap

  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'

  Copy to Clipboard Toggle word wrap

  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

  Copy to Clipboard Toggle word wrap

  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

  Copy to Clipboard Toggle word wrap

  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>

  Copy to Clipboard Toggle word wrap

  <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

  Copy to Clipboard Toggle word wrap

  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 }

  Copy to Clipboard Toggle word wrap

  Expand

  表11.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 }

  Copy to Clipboard Toggle word wrap

  Expand

  表11.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

  Copy to Clipboard Toggle word wrap

  Expand

  表11.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)

  Copy to Clipboard Toggle word wrap

  プレースホルダー

  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'

  Copy to Clipboard Toggle word wrap

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

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

  Copy to Clipboard Toggle word wrap

  注目のドキュメント

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

  Copy to Clipboard Toggle word wrap