Chapter 1. Jfrog Artifactory plugin for Backstage


The Jfrog Artifactory plugin displays information about your container images within the Jfrog Artifactory registry.

1.1. For administrators

1.1.1. Installing and configuring the Jfrog Artifactory plugin

The Red Hat Plug-ins for Backstage (RHPIB) packages are hosted in a separate NPM registry, which is maintained by Red Hat. To use these packages, you must adjust your NPM configuration to pull the @redhat scoped packages:

# update your .npmrc or .yarnrc file
yarn config set "@redhat:registry" https://npm.registry.redhat.com
# then pull a package
yarn add @redhat/backstage-plugin-quay

For more information, see npm docs.

Creating a .npmrc file ensures that all the packages are scoped under @redhat and are fetched from Red Hat’s NPM registry, while the rest dependencies remain sourced from other registry.

Procedure

  1. Run the following command to install the Jfrog Artifactory plugin:

    yarn workspace app add @redhat/backstage-plugin-jfrog-artifactory
  2. Set the proxy to the desired Artifactory server in the app-config.yaml file as follows:

    proxy:
        '/jfrog-artifactory/api':
        target: 'http://<hostname>:8082' # or https://<customer>.jfrog.io
        headers:
            # Authorization: 'Bearer <YOUR TOKEN>'
            # Change to "false" in case of using self hosted artifactory instance with a self-signed certificate
        secure: true
  3. Enable the JFROG ARTIFACTORY tab on the entity view page in packages/app/src/components/catalog/EntityPage.tsx file as follows:

    /* highlight-add-start */
    import {
        isJfrogArtifactoryAvailable,
        JfrogArtifactoryPage,
    } from "@redhat/backstage-plugin-jfrog-artifactory";
    
    /* highlight-add-end */
    
    const serviceEntityPage = (
        <EntityPageLayout>
            // ...
            {/* highlight-add-start */}
            <EntityLayout.Route
                if={isJfrogArtifactoryAvailable}
                path="/jfrog-artifactory"
                title="Jfrog Artifactory"
            >
                <JfrogArtifactoryPage />
            </EntityLayout.Route>
            {/* highlight-add-end */}
        </EntityPageLayout>
    );
  4. Annotate your entity using the following annotations:

    metadata:
        annotations:
            'jfrog-artifactory/image-name': '<IMAGE-NAME>'

1.2. For users

1.2.1. Using the Jfrog Artifactory plugin in Backstage

Jfrog Artifactory is a front-end plugin that enables you to view the information about the container images that are available in your Jfrog Artifactory registry.

Prerequisites

Procedure

  1. Open your Backstage application and select a component from the Catalog page.
  2. Go to the JFROG ARTIFACTORY tab.

    jfrog-tab

    The JFROG ARTIFACTORY tab contains a list of container images and related information, such as VERSION, REPOSITORIES, MANIFEST, MODIFIED, and SIZE.

Red Hat logoGithubRedditYoutubeTwitter

Learn

Try, buy, & sell

Communities

About Red Hat Documentation

We help Red Hat users innovate and achieve their goals with our products and services with content they can trust.

Making open source more inclusive

Red Hat is committed to replacing problematic language in our code, documentation, and web properties. For more details, see the Red Hat Blog.

About Red Hat

We deliver hardened solutions that make it easier for enterprises to work across platforms and environments, from the core datacenter to the network edge.

© 2024 Red Hat, Inc.