This plugin shows information about Azure resources related to your backstage entity
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>This plugin use a custom annotation from your entity. To use the plugin add the following annotation:
annotations:
azure.com/tag-selector: key/valueWhen doing Azure Resource Graph queries the plugin will use the tag key and its value to pull information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent