Azure Sites Plugin

Inspired by roadie.io AWS Lamda plugin

Features

Azure overview table

Plugin Setup

The following sections will help you get the Azure plugin setup and running

Azure Sites Backend

You need to set up the Azure Sites Backend plugin before you move forward with any of these steps if you haven't already.

Entity Annotation

To be able to use the Azure Sites plugin you need to add the following annotation to any entities you want to use it with:

azure.com/microsoft-web-sites: <name>

<name> supports case-insensitive exact / partial value.

Example of Partial Matching:

Let's say you have a number of functions apps, spread out over different regions (and possibly different subscriptions), and they follow a naming convention:

func-testapp-eu
func-testapp-ca
func-testapp-us

The annotation you will use to have the three functions' app appear in the overview table would look like this:

azure.com/microsoft-web-sites: func-testapp

Install the component

Install the plugin in the packages/app directory

yarn add @backstage/plugin-azure-sites

Add widget component to your Backstage instance:

// In packages/app/src/components/catalog/EntityPage.tsx
import { EntityAzureSitesOverviewWidget, isAzureWebSiteNameAvailable } from '@backstage/plugin-azure-sites';

...

const serviceEntityPage = (
  <EntityLayout>
    //...
    <EntityLayout.Route if={e => Boolean(isAzureWebSiteNameAvailable(e))} path="/azure" title="Azure">
      <EntityAzureSitesOverviewWidget />
    </EntityLayout.Route>
    //...
  </EntityLayout>
);