MarcBruins / backstage-azure-resource-frontend

A frontend plugin showing Azure resources in relation to entities in Backstage

Azure resources front-end

This plugin shows information about Azure resources related to your backstage entity

Getting started

First install the backend plugin. After that follow the below instructions.

# From your Backstage root directory
yarn add --cwd packages/app @vippsno/plugin-azure-resources

Add the following to packages\app\src\components\catalog\EntityPage.tsx The below enables all entity cards. Security, Cost advisor, and resource group.

import { AzureResourceEntityOverviewCard, AZURE_ANNOTATION_TAG_SELECTOR, EntityAzureSecurityOverviewCard,EntityAzureCostAdviceOverviewCard, isAzureResourceEnabled } from '@vippsno/plugin-azure-resources';

const azureResourceContent = (
  <EntitySwitch>
    <EntitySwitch.Case if={isAzureResourceEnabled}>
    <Grid container spacing={3} alignItems="stretch">
      <Grid item md={6}>
        <AzureResourceEntityOverviewCard />
      </Grid>
      <Grid item md={6}>
        <EntityAzureSecurityOverviewCard />
      </Grid>
      <Grid item md={6}>
        <EntityAzureCostAdviceOverviewCard />
      </Grid>
    </Grid>
    </EntitySwitch.Case>
    <EntitySwitch.Case>
      <>
        <MissingAnnotationEmptyState annotation={AZURE_ANNOTATION_TAG_SELECTOR} />
      </>
    </EntitySwitch.Case>
  </EntitySwitch>
);

    <EntityLayout.Route path="/azure" title="Azure">
      {azureResourceContent}
    </EntityLayout.Route>

Annotation

This plugin use a custom annotation from your entity. To use the plugin add the following annotation:

annotations:
    azure.com/tag-selector: key/value

When doing Azure Resource Graph queries the plugin will use the tag key and its value to pull information.