@roadiehq/backstage-plugin-argo-cd

Argo CD Plugin for Backstage

https://roadie.io/backstage/plugins/argo-cd

Features

How to add argo-cd project dependency to Backstage app

If you have your own backstage application without this plugin, here it's how to add it:

1. In the backstage/packages/app project add the plugin as a package.json dependency:

yarn add @roadiehq/backstage-plugin-argo-cd

1. In the app-config.yaml file in the root directory, add argo-cd to the proxy object and optionally add the base url for your argoCD web UI:

proxy:
  ...

  '/argocd/api':
    # url to the api of your hosted argoCD instance
    target: https://159.65.209.132/api/v1/
    changeOrigin: true
    # this line is required if your hosted argoCD instance has self-signed certificate
    secure: false
    headers:
      Cookie:
        $env: ARGOCD_AUTH_TOKEN


# optional: this will link to your argoCD web UI for each argoCD application
argocd:
  baseUrl: https://my-argocd-web-ui.com

1. Add plugin to the list of plugins:

// packages/app/src/plugins.ts
export { plugin as ArgoCD } from '@roadiehq/backstage-plugin-argo-cd';

1. Add plugin to the entityPage.tsx source file:

// packages/app/src/components/catalog/EntityPage.tsx
import {
  ArgoCDDetailsWidget,
  isArgocdAvailable
} from '@roadiehq/backstage-plugin-argo-cd';

const OverviewContent = ({ entity }: { entity: Entity }) => (
  <Grid container spacing={3} alignItems="stretch">
    ...
    {isArgocdAvailable(entity) && (
      <Grid item md={6}>
        <ArgoCDDetailsWidget entity={entity} />
      </Grid>
    )}
    ...
  </Grid>
);

How to use Argo-cd plugin in Backstage

The Argo CD plugin is a part of the Backstage sample app. To start using it for your component, you have to:

1. Add an annotation to the YAML config file of a component. If there is only a single Argo CD application for the component, you can use

   argocd/app-name: <app-name>
   

   You can also use labels to select multiple Argo CD applications for a component:

   argocd/app-selector: <app-selector>
   

   Note: You can only use one of the options per component.

2. Add your auth key to the environmental variables for your backstage backend server (you can acquire it by sending a GET HTTP request to Argo CD's /session endpoint with username and password):

   ARGOCD_AUTH_TOKEN="argocd.token=<auth-token>"
   

Support for multiple ArgoCD instances

If you want to create multiple components that fetch data from different argoCD instances, you have to add a proxy config for each instance:

proxy:
  ...

  '/argocd/api':
    target: https://<someAddress>/api/v1/
    changeOrigin: true
    secure: false
    headers:
      Cookie:
        $env: ARGOCD_AUTH_TOKEN

  '/argocd/api2':
    target: https://<otherAddress>/api/v1/
    changeOrigin: true
    secure: false
    headers:
      Cookie:
        $env: ARGOCD_AUTH_TOKEN2

Add all required auth tokens to environmental variables, in this example, ARGOCD_AUTH_TOKEN2.

And then in the following component definition annotations add a line with the url to the desired proxy path:

argocd/proxy-url: '/argocd/api2'

argocd/proxy-url annotation defaults to '/argocd/api' so it's not needed if there is only one proxy config.

Develop plugin locally

You can clone the plugin repo into the plugins/ directory:

git clone https://github.com/RoadieHQ/backstage-plugin-argo-cd.git argo-cd

and run yarn in the root backstage directory - it will create a symbolic link so the dependency will be provided from the source code instead of node_modules package.

Links

• Backstage
• Further instructons
• Get hosted, managed Backstage for your company: https://roadie.io