Este conteúdo não está disponível no idioma selecionado.
Chapter 10. Customizing the Quick access card
To access the Home page in Red Hat Developer Hub, the base URL must include the /developer-hub proxy. You can configure the Home page by passing the data into the app-config.yaml file as a proxy. You can provide data to the Home page from the following sources:
- JSON files hosted on GitHub or GitLab.
- A dedicated service that provides the Home page data in JSON format using an API.
10.1. Using hosted JSON files to provide data to the Quick access card
Prerequisites
- You have installed Red Hat Developer Hub by using either the Operator or Helm chart. See Installing Red Hat Developer Hub on OpenShift Container Platform.
Procedure
-
To access the data from the JSON files, add the following code to the Developer Hub
app-config.yamlconfiguration file: Add the following code to the
app-config.yamlfile: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 /janus-idp/backstage-showcase/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
10.2. Using a dedicated service to provide data to the Quick access card
When using a dedicated service, you can do the following:
- Use the same service to provide the data to all configurable Developer Hub pages or use a different service for each page.
-
Use the
red-hat-developer-hub-customization-provideras an example service, which provides data for both the Home and Tech Radar pages. Thered-hat-developer-hub-customization-providerservice provides the same data as default Developer Hub data. You can fork thered-hat-developer-hub-customization-providerservice repository from GitHub and modify it with your own data, if required. -
Deploy the
red-hat-developer-hub-customization-providerservice and the Developer Hub Helm chart on the same cluster.
Prerequisites
- You have installed the Red Hat Developer Hub using Helm Chart. For more information, see Installing Red Hat Developer Hub on OpenShift Container Platform with the Helm chart.
Procedure
To use a separate service to provide the Home page data, complete the following steps:
- From the Developer perspective in the Red Hat OpenShift Container Platform web console, click +Add > Import from Git.
Enter the URL of your Git repository into the Git Repo URL field.
To use the
red-hat-developer-hub-customization-providerservice, add the URL for the red-hat-developer-hub-customization-provider repository or your fork of the repository containing your customizations.- On the General tab, enter red-hat-developer-hub-customization-provider in the Name field and click Create.
On the Advanced Options tab, copy the value from the Target Port.
NoteThe Target Port automatically generates a Kubernetes or OpenShift Container Platform service to communicate with.
Add the following code to the
app-config-rhdh.yamlfile:proxy: endpoints: # Other Proxies # customize developer hub instance '/developer-hub': target: ${HOMEPAGE_DATA_URL} changeOrigin: true # Change to "false" in case of using self-hosted cluster with a self-signed certificate secure: truewhere
HOMEPAGE_DATA_URLis defined ashttp://<SERVICE_NAME>:8080, for example,http://rhdh-customization-provider:8080.NoteThe
red-hat-developer-hub-customization-providerservice contains the 8080 port by default. If you are using a custom port, you can specify it with the 'PORT' environmental variable in theapp-config-rhdh.yamlfile.-
Replace the
HOMEPAGE_DATA_URLby adding the URL torhdh-secretsor by directly replacing it in your custom ConfigMap. - Delete the Developer Hub pod to ensure that the new configurations are loaded correctly.
Verification
To view the service, navigate to the Administrator perspective in the OpenShift Container Platform web console and click Networking > Service.
NoteYou can also view the Service Resources in the Topology view.
Ensure that the provided API URL for the Home page returns the data in JSON format as shown in the following example:
[ { "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" } ] } ]NoteIf the request call fails or is not configured, the Developer Hub instance falls back to the default local data.
-
If the images or icons do not load, then allowlist them by adding your image or icon host URLs to the content security policy’s (csp)
img-srcin your custom ConfigMap as follows:
kind: ConfigMap
apiVersion: v1
metadata:
name: app-config-rhdh
data:
app-config-rhdh.yaml: |
app:
title: Red Hat Developer Hub
backend:
csp:
connect-src:
- "'self'"
- 'http:'
- 'https:'
img-src:
- "'self'"
- 'data:'
- <image host url 1>
- <image host url 2>
- <image host url 3>
# Other Configurations