Skip to main content

Show the Argo CD tab on a component

Each annotated component gets an Argo CD tab: the health of its application, its sync, its resources and its deployments.

Two steps: turn on the plugin, annotate the component.

What the tab shows, and to whom​

Health, Sync, Last sync (status, date, message), Revision, Source, an Open in Argo CD link, then the Resources and Deployments sub-tabs.

Anyone who can open the component sees the tab. Astrolabe reads Argo CD with the token of the integration, the same for everyone.

1. 🔌 Turn on the plugin​

  1. In Administration, under PLATFORM, click Plugins.

  2. On the Argo CD card, click the switch at the top right of the card. It turns on at once, without confirmation.

The switch is greyed out?

If the card says Configure the Argo CD integration first, click it: the integration opens in Company connections. Add it (Add the Argo CD integration). The plugin turns on by itself when you save the integration: go to step 2.

2. 🏷️ Annotate the component​

In the component's catalog-info.yaml, name one Argo CD application:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: shop-api
  annotations:
    argocd/app-name: shop-api        # the application's name in Argo CD
spec:
  type: service
  lifecycle: production
  owner: group:default/platform-team  # owners see it in their dashboard card
One application per component

A list such as shop-api-staging,shop-api-prod is not a valid name: the Argo CD tab disappears, with no message. See the FAQ.

✅ Check​

Wait a few minutes for the catalog to read the file. Then open the component from Catalog: the Argo CD tab is after Docs.

✅ That's it!

Next: Add the Applications card to your dashboard.