Skip to main content

Show Azure on a component

An annotated component gets an Azure costs card on its Overview and an Azure tab with its resources and its costs.

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

What it shows​

WhereWhat
Azure costs card of the OverviewThis month so far and Last month, and a link Open the cost analysis to the Azure portal
Azure tab, sub-tab ResourcesThe resources that carry the tag, with the columns Resource, Type, Resource group and Location
Azure tab, sub-tab CostsThe same two amounts, and a table by Service: Cost this month, Last month

1. 🔌 Turn on the plugin​

  1. In Administration, under PLATFORM, click Plugins.

  2. On the Azure card, click the switch at the top right of the card.

The switch is greyed out?

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

2. 🏷️ Annotate the component​

In the catalog-info.yaml of the component, add the annotation azure.com/tag-selector, with one tag written key=value:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: shop-api
  annotations:
    azure.com/tag-selector: app=shop-api
spec:
  type: service
  lifecycle: production
  owner: team-a

The resources of your subscription must carry this tag in Azure.

3. 👀 See it​

  1. In the sidebar, click Catalog, then your component.

  2. On the Overview, look for the Azure costs card. Click the Azure tab for the details.

When no resource carries the tag, the Resources sub-tab says No resource carries the tag app=shop-api. and the Costs sub-tab says No cost this month for the tag app=shop-api.

A component whose tag matches resources was not at hand: the filled table was not checked.

✅ That's it!

Next: Add the costs card to your dashboard.