diff --git a/assemblies/assembly-customizing-the-tech-radar-page.adoc b/assemblies/assembly-customizing-the-tech-radar-page.adoc new file mode 100644 index 0000000000..0ec1a64d5f --- /dev/null +++ b/assemblies/assembly-customizing-the-tech-radar-page.adoc @@ -0,0 +1,22 @@ +[id='proc-customizing-the-tech-radar-page_{context}'] += Customizing the Tech Radar page in {product} + +In {product}, the Tech Radar page is provided by the `tech-radar` dynamic plugin, which is disabled by default. For information about enabling dynamic plugins in {product} see link:{configuring-dynamic-plugins-book-url}[{configuring-dynamic-plugins-book-title}]. + +In {product}, you can configure Learning Paths by passing the data into the `{my-app-config-file}` file as a proxy. The base Tech Radar URL must include the `/developer-hub/tech-radar` proxy. + +[NOTE] +==== +Due to the use of overlapping `pathRewrites` for both the `tech-radar` and `homepage` quick access proxies, you must create the `tech-radar` configuration (`^api/proxy/developer-hub/tech-radar`) before you create the `homepage` configuration (`^/api/proxy/developer-hub`). + +For more information about customizing the Home page in {product}, see xref:customizing-the-home-page[Customizing the Home page in {product}]. +==== + +You can provide data to the Tech Radar page from the following sources: + +* JSON files hosted on GitHub or GitLab. +* A dedicated service that provides the Tech Radar data in JSON format using an API. + +include::modules/customizing-the-tech-radar-page/proc-customizing-the-tech-radar-page-by-using-a-json-file.adoc[leveloffset=+1] + +include::modules/customizing-the-tech-radar-page/proc-customizing-the-tech-radar-page-by-using-a-customization-service.adoc[leveloffset=+1] diff --git a/modules/customizing-the-tech-radar-page/proc-customize-rhdh-tech-radar-page.adoc b/modules/customizing-the-tech-radar-page/proc-customize-rhdh-tech-radar-page.adoc deleted file mode 100644 index 773032d016..0000000000 --- a/modules/customizing-the-tech-radar-page/proc-customize-rhdh-tech-radar-page.adoc +++ /dev/null @@ -1,74 +0,0 @@ -[id='proc-customize-rhdh-tech-radar-page_{context}'] -= Customizing the Tech Radar page in {product} - -In {product}, the Tech Radar page is provided by the `tech-radar` dynamic plugin, which is disabled by default. For information about enabling dynamic plugins in {product} see link:{configuring-dynamic-plugins-book-url}[{configuring-dynamic-plugins-book-title}]. - -In {product}, you can configure Learning Paths by passing the data into the `{my-app-config-file}` file as a proxy. The base Tech Radar URL must include the `/developer-hub/tech-radar` proxy. - -[NOTE] -==== -Due to the use of overlapping `pathRewrites` for both the `tech-radar` and `homepage` quick access proxies, you must create the `tech-radar` configuration (`^api/proxy/developer-hub/tech-radar`) before you create the `homepage` configuration (`^/api/proxy/developer-hub`). - -For more information about customizing the Home page in {product}, see xref:customizing-the-home-page[Customizing the Home page in {product}]. -==== - -You can provide data to the Tech Radar page from the following sources: - -* JSON files hosted on GitHub or GitLab. -* A dedicated service that provides the Tech Radar data in JSON format using an API. - -== Using hosted JSON files to provide data to the Tech Radar page - -.Prerequisites - -* You have installed {product} by using either the Operator or Helm chart. For more information, see link:{installing-on-ocp-book-url}[{installing-on-ocp-book-title}]. -* You have specified the data sources for the Tech Radar plugin in the `integrations` section of the `{my-app-config-file}` file. For example, to configure GitHub as an integration, see link:{authentication-book-url}#authenticating-with-github[Authenticating with GitHub]. - -.Procedure - -To access the data from the JSON files, complete the following step: - -. Enable the `./dynamic-plugins/dist/backstage-community-plugin-tech-radar` and `/dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic` plugins. -. Add the following code to the `{my-app-config-file}` file: -+ -[source,yaml] ----- -techRadar: - url: ${TECH_RADAR_DATA_URL} <1> ----- -<1> `TECH_RADAR_DATA_URL` is the URL from which the JSON data is loaded. - -== Using a dedicated service to provide data to the Tech Radar page - -When using a dedicated service, you can do the following: - -* Use the same service to provide the data to all configurable {product-short} pages or use a different service for each page. -* Use the https://github.com/redhat-developer/red-hat-developer-hub-customization-provider[`red-hat-developer-hub-customization-provider`] as an example service, which provides data for both the Home and Tech Radar pages. The `red-hat-developer-hub-customization-provider` service provides the same data as default {product-short} data. You can fork the `red-hat-developer-hub-customization-provider` service repository from GitHub and modify it with your own data, if required. -* Deploy the `red-hat-developer-hub-customization-provider` service and the {product-short} Helm chart on the same cluster. - -.Prerequisites - -* You have installed the {product} using Helm chart. -For more information, see xref:{installing-on-ocp-book-url}#assembly-install-rhdh-ocp-helm[{installing-on-ocp-book-title} with the Helm chart]. - -.Procedure - -To use a separate service to provide the Tech Radar data, complete the following steps: - -. Add the dedicated service as an allowed host by adding the following code to the `{my-app-config-file}` file: -+ -[source,yaml] ----- -backend: - reading: - allow: - - host: 'hostname' ----- -. Add the following to the `{my-app-config-file}` file: -+ -[source,yaml] ----- -techRadar: - url: ${TECH_RADAR_DATA_URL} <1> ----- -<1> `TECH_RADAR_DATA_URL` is the URL from which the JSON data is loaded. diff --git a/modules/customizing-the-tech-radar-page/proc-customizing-the-tech-radar-page-by-using-a-customization-service.adoc b/modules/customizing-the-tech-radar-page/proc-customizing-the-tech-radar-page-by-using-a-customization-service.adoc new file mode 100644 index 0000000000..bf1498043e --- /dev/null +++ b/modules/customizing-the-tech-radar-page/proc-customizing-the-tech-radar-page-by-using-a-customization-service.adoc @@ -0,0 +1,37 @@ +[id='proc-customizing-rhdh-tech-radar-page-by-using-a-customization-service_{context}'] += Customizing the Tech Radar page by using a customization service + +For advanced scenarios, you can host your {product} customization service to provide data to all configurable {product-short} pages, such as the Tech Radar page. +You can even use a different service for each page. + +.Prerequisites +* You have specified the data sources for the Tech Radar plugin in the `integrations` section of the `{my-app-config-file}` file. +For example, to configure GitHub as an integration, see link:{authentication-book-url}#authenticating-with-github[Authenticating with GitHub]. + +* You have enabled the `./dynamic-plugins/dist/backstage-community-plugin-tech-radar` and `/dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic` plugins. + +.Procedure +. Deploy your {product-short} customization service on the same {ocp-short} cluster as your {product-short} instance. +You can find an example at link:https://github.com/redhat-developer/red-hat-developer-hub-customization-provider[`red-hat-developer-hub-customization-provider`], that provides the same data as default {product-short} data. +The customization service provides a Tech Radar data URL such as: `pass:c,a,q[http://__/tech-radar]`. + +. Add the dedicated service as an allowed host by adding the following code to the `{my-app-config-file}` file: ++ +[source,yaml,subs='+quotes'] +---- +backend: + reading: + allow: + - host: '__' +---- +`__`:: Enter the base URL of your Tech Radar data URL, such as: `pass:c,a,q[__]`. + +. Add the following to the `{my-app-config-file}` file: ++ +[source,yaml,subs='+quotes'] +---- +techRadar: + url: __ +---- + +`__`:: Enter your Tech Radar data URL, such as: `pass:c,a,q[http://__/tech-radar]`. diff --git a/modules/customizing-the-tech-radar-page/proc-customizing-the-tech-radar-page-by-using-a-json-file.adoc b/modules/customizing-the-tech-radar-page/proc-customizing-the-tech-radar-page-by-using-a-json-file.adoc new file mode 100644 index 0000000000..697d3111b5 --- /dev/null +++ b/modules/customizing-the-tech-radar-page/proc-customizing-the-tech-radar-page-by-using-a-json-file.adoc @@ -0,0 +1,24 @@ +[id='proc-customizing-the-tech-radar-page-by-using-a-json-file_{context}'] += Customizing the Tech Radar page by using a JSON file + +For ease of use and simplicity, you can configure the Tech Radar page by using a hosted JSON file. + +.Prerequisites + +* You have specified the data sources for the Tech Radar plugin in the `integrations` section of the `{my-app-config-file}` file. For example, to configure GitHub as an integration, see link:{authentication-book-url}#authenticating-with-github[Authenticating with GitHub]. + +* You have enabled the `./dynamic-plugins/dist/backstage-community-plugin-tech-radar` and `/dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic` plugins. + +.Procedure + +. Publish the JSON file containing your Tech Radar data to a web server, such as GitHub or Gitlab. You can find an example at link:https://raw.githubusercontent.com/redhat-developer/rhdh/release-{product-version}/packages/app/public/tech-radar/data-default.json[]. + +. Configure {product-short} to access the Tech Radar data from the hosted JSON files, by adding the following to the `{my-app-config-file}` file: ++ +[source,yaml,subs='+quotes'] +---- +techRadar: + url: __ +---- + +`__`:: Enter the Tech Radar data hosted JSON URL. diff --git a/titles/customizing/master.adoc b/titles/customizing/master.adoc index 3b54976696..0071c27e45 100644 --- a/titles/customizing/master.adoc +++ b/titles/customizing/master.adoc @@ -27,7 +27,7 @@ include::assemblies/assembly-configuring-the-global-header.adoc[leveloffset=+1] include::assemblies/assembly-configuring-a-floating-action-button.adoc[leveloffset=+1] -include::modules/customizing-the-tech-radar-page/proc-customize-rhdh-tech-radar-page.adoc[leveloffset=+1] +include::assemblies/assembly-customizing-the-tech-radar-page.adoc[leveloffset=+1] include::assemblies/assembly-customizing-the-appearance.adoc[leveloffset=+1]