Components

In this chapter, we will use Backstage to view and manage the components that make up our application. We will also use Backstage to create a new component and API.

Software Catalog

Return to backstage to check the status of the frontend and gateway entities in the Catalog. Enter your NAMESPACE into the search box to filter the results.

catalog search

Select your Frontend component entity from the list of results

catalog results

You will be prompted for authentication by the github plugin on your first visit. Click "LOG IN". While you have already logged in to OpenShift and to Backstage, opening a Catalog Entity’s detail screen for the first time requires authentication for the GitHub Plugin, an optional Backstage component.

login 3

Backstage would like to access your GitHub profile information and repositories. Click "Authorize" to continue.

auth 3

View the Frontend Component

Take your time exploring the Component Overview page and each of the tabs.

frontend overview

Click on the DEPENDENCIES tab to inspect the component relationship graph. Note that you can scroll the tabs on the Entity details screen to the left and right. You may need to scroll to find the DEPENDENCIES, API and other tabs highlighted in this workshop.

frontend relations

About Plugins

The KUBERNETES tab will show information from the Kubernetes plugin:

frontend k8s

The TOPOLOGY tab will show information from the OpenShift Topology plugin:

frontend topology

View the Gateway

Return to the Backstage Software Catalog to check the status of the gateway entity. Enter your NAMESPACE into the search box to filter the results.

catalog search

Select your Gateway component entity from the list of results

catalog results 1

Take your time exploring the Component Overview page and each of the tabs

gateway overview

Click on the API tab to explore the API that is provided by this software component. Select the available API:

gateway apis

From the API overview page, select "DEFINITION" to see the Relationship graph:

gateway api overview

Use OpenAPI to explore exposed endpoints:

gateway api definition

The gateway’s /backend endpoint collection can be used to link a new Backend component and API. We will do this in the next section.

Create from the Backend Template

Return to the Create…​ menu to Choose the Backend Template, Quarkus Backend Application for Points-of-Interest Map.

backstage create backend
backend 1b

Insert your NAMESPACE and USERNAME as directed in the following example:

frontend 2b
frontend 3b

Review and create your backend component:

frontend 4b

Open the new Backend component using the Software Catalog:

backend 5

View the resulting Components

View the resulting component and plugins.

backend overview

Select the DEPENDENCIES tab to view the component relationship graph:

backend dependencies

Select the API tab to browse the provided APIs:

backend api

Select the CI tab to check the resulting pipelines for activity:

backend ci

View Tekton Pipelines using the Tekton tab:

backend tekton

When the pipeline build has completed successfully, reload the map to check for results!

map 3

Congratulations on completing Chapter 3!

In the next chapter, we will complete our Golden Path by using OpenShift Dev Spaces to make a simple code contribution.