@backstage-community/plugin-azure-sites

Azure Sites Plugin

Azure Sites (Apps & Functions) plugin support for a given entity. View the current status of the site, quickly jump to site's Overview page, or Log Stream page.

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

1. Install the plugin

# From your Backstage root directory
yarn --cwd packages/app add @backstage-community/plugin-azure-sites

2. Add widget component to your Backstage instance:

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

...

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