Developer Activity: Import API and Component

In this module, you will import an existing API and an existing Service using the Software Templates that you setup as the Platform Engineer in the previous section.

Please make sure to log in as a Developer with dev1/{common_password}. If you are unsure how to, please refer to the below note.
Click here to view instructions to login as the Developer.

Login as Developer

  • You will perform this activity as a Developer.

  • Logout from Red Hat Developer Hub

    • Navigate to the Settings menu at the bottom right side of Red Hat Developer Hub and click on the kebab menu in the Profile card

      Settings of Red Hat Developer Hub

    • Sign out of Red Hat Developer Hub from the Settings section as shown in the screenshot below.

      Signing out of Red Hat Developer Hub

  • Logout from GitLab

    • Click on the Profile icon, and Sign out from the dropdown as shown in the screenshot below.

      Signing out of Red Hat Developer Hub

  • Login back as a Developer to to Red Hat Developer Hub and GitLab using the credentials dev1/{common_password}

Import parasol-store-api OpenAPI

  1. Access Red Hat Developer Hub (click here). If prompted login using dev1/{common_password}

  2. Click on the Create menu on the left-hand navigation, and click the Choose button on the Import Existing API Template.

    import api template

  3. You will be presented with the Software Template wizard.

    A number of these fields have been prepopulated with default values for convenience. In reality, developers will need provide almost all of the values that are needed to import existing apps/APIs.

  4. Step 1: Information about your existing API. Fill out the following values and click Next.

    Field Description Value

    GitLab hostname

    Keep default value

    https://gitlab-gitlab.{openshift_cluster_ingress_domain}

    GitLab Organization of Existing API

    Keep default value

    parasol

    Repository name of Existing API

    Keep default value

    parasol-store-api

    API specification path

    Enter full path of the API

    https://gitlab-gitlab.{openshift_cluster_ingress_domain}/parasol/parasol-store-api/-/blob/main/openapi.yaml

    Type Of API

    Keep default value

    openapi

    import api 1

  5. Step 2: New Component details.
    Provide information about the new component you are registering. Fill out the following values and click Review

    Field Description Value

    Component GitLab Organization

    Keep default value

    parasol

    Component Repository name

    Keep default value

    envelope-parasol-catalog

    Component Name of API

    Keep default value

    parasol-store-api

    System Name

    System (auto-populated)

    system:default/parasol-system

    Owner

    Choose from dropdown

    group:default/dev1

    A Short Description Of This Component

    Enter a suitable description

    Open API specification for the parasol-store application

    Lifecycle

    Enter value. Can be any lifecycle value, but take great care to establish a proper taxonomy for these. (Well-known values experimental, production and deprecated)

    production

    import api 2

  6. Step 3: Review & Create.
    Review the fields, and click on the Create button

    import api 3

  7. Run of import-api-catalog:
    You are presented with a Component Merge Request URL

    import api 4

  8. Click on the link to open the merge request, and complete the merge by click on the Merge button.

    api template merge envelope

  9. You can navigate to the envelope-parasol-catalog repo to see that a new folder named parasol-store-api has been creates with a catalog-info.yaml and a docs folder for TechDocs.

    parasol store api gitlab

Explore the parasol-store-api component in the APIs section

  1. The Parasol Store API that you just imported will appear in the APIs section automatically shortly. This is because of the auto-discover feature that you had enabled in the previous steps

    view api

    • Click on parasol-store-api and explore the component. The Docs tab displays the skeleton techdocs that was added.

    • The Definition tab showcases the OpenAPI spec nicely formatted. This is due to the fact that you selected openapi as the API type while importing the API.

      view api definition

Import parasol-store service

  • From the Create left side menu of Red Hat Developer Hub, click on the Choose button of the Import Existing Application template.

    import app template

  • Fill out the following values in the Software Template wizard.

    A number of these fields have been prepopulated with default values for convenience. In reality, developers will need provide almost all of the values that are needed to import existing apps/APIs.

  • Step 1: Information about your existing application:
    Provide information about your existing service

    Field Description Value

    GitLab Hostname

    Keep default value

    https://gitlab-gitlab.{openshift_cluster_ingress_domain}

    GitLab Organization

    Keep default value

    parasol

    Repository Name

    Keep default value

    parasol-store

    import app template 1

  • Step 2: New Component details:
    Provide information about your existing app

    Field Description Value

    Component GitLab Organization

    Keep default value

    parasol

    Component Repository Name

    Keep default value

    envelope-parasol-catalog

    Component Name of the App

    Keep default value

    parasol-store

    System name

    System (auto-populated)

    system:default/parasol-system

    Owner

    Keep default value

    group:default/dev1

    A Short Description Of This Component

    Keep default value

    Core services for the Parasol application

    import app template 2

  • Step 3: Additional Component details:
    Provide additional information about the new component

    Field Description Value

    Does this repo contain manifests?

    This option conditionally auto-generates the metadata with the right labels which will be used to pull in CI/CD, Deployment and other details

    Make sure to check the box

    Type

    The type of component. Well-known and common values: service, website, library.

    service

    Indentify the APIs consumed by this component

    This multi-select allows you to attach APIs to the component

    Choose parasol-store-api

    Check to add TechDocs

    Conditionally auto-generates TechDocs skeleton for the component

    Check the box

    Lifecycle

    Choose from dropdown

    production

    import app template 3

  • Step 4: Review
    Review the fields, and click on the Create button

    import app template 4

  • Run of import-existing-app-template In the final step you are presented with a Merge Request.

    import app template 5

  • Click on Component Merge Request link to open the merge request on GitLab, and complete the merge by clicking on the Merge button

    app template merge component . The Parasol Store service that you just imported will appear in the Red Hat Developer Hub Catalog shortly.

Explore the parasol-store component in the Catalog section

  • In a few minutes the parasol-store Component you just imported will start appearing in the Catalog section of Red Hat Developer Hub automatically.

    view parasol store component

Click on the parasol-store link to view the component. You can step through each of the tabs to see how RHDH provides a single pane of glass to see

  • Topology showing the deployments on OpenShift

    parasol store topo

  • CI showing Pipeline Runs is currently empty, because there are no pipeline runs yet.

  • CD tab showing the deployed components/systems using ArgoCD plugin

    parasol store argo

  • The Api tab shows the Consumed API parasol-store-api. Explore the Dependencies tab as well.

  • The Docs contains the skeleton TechDocs created by the template. You can click on the Pencil icon to edit the docs.