@adamlonsdale/backstage-plugin-armorcode v0.0.4

backstage-plugin-armorcode

Welcome to the backstage-plugin-armorcode plugin for Backstage!

Getting started

Example Renders

Overview Page - Armorcode Vulnerability Chart - (Example image here when ready)

Service Entry Page - Armorcode Vulnerabilities List - Example image here when ready)

Prerequisites

Please ensure the following steps have been undertaken and installed prior to this plugin configuration.

Armorcode Backend

You need to install and configure the Armorcode Backend Plugin before configuring the frontend.

Installation

First add the relevant packages to your existing installation of Backstage

# From your Backstage root directory
yarn add --cwd packages/app @adamlonsdale/backstage-plugin-armorcode

Note: You have 2 Options, you can setup both too

Vulnerability Chart Overview (Optional)

Add the Armorcode Vulnerability chart into your entity overview page

Import the plugin to packages/app/src/components/catalog/EntityPage.tsx.

EntityPage.tsx

import { ArmorcodeCard } from '@adamlonsdale/backstage-plugin-armorcode';

// ...

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {entityWarningContent}
    <Grid item md={6}>
      <EntityAboutCard variant="gridItem" />
    </Grid>
    
    // ...
    
    <Grid item md={4} xs={12}>
      <ArmorcodeCard />
    </Grid>

    // ...

    <Grid item md={8} xs={12}>
      <EntityHasSubcomponentsCard variant="gridItem" />
    </Grid>    
  </Grid>
);

Vulnerabilities List (Optional)

Add the Armorcode Vulnerabilities List into the Service Entity page.

Import the plugin to packages/app/src/components/catalog/EntityPage.tsx

EntityPage.tsx

// ...
import { ArmorcodePage } from '@adamlonsdale/backstage-plugin-armorcode';
// ...
const serviceEntityPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      {overviewContent}
    </EntityLayout.Route>

    <EntityLayout.Route path="/ci-cd" title="CI/CD">
      {cicdContent}
    </EntityLayout.Route>

    // ...

    <EntityLayout.Route path="/armorcode" title="Armorcode">      
      <ArmorcodePage />    
    </EntityLayout.Route>

    // ...

  </EntityLayout>
);

Note: It is possible to hide the Armorcode service entity tab for those projects without Armorcode configured in the catalog-info.yaml

import { ArmorcodePage, isArmorcodeAvailable } from '@adamlonsdale/backstage-plugin-armorcode';

// ...

<EntityLayout.Route if={isArmorcodeAvailable} path="/armorcode" title="Armorcode">      
  <ArmorcodePage />    
</EntityLayout.Route>

Configuration

Add the following into your app-config.yaml

Config

armorcode:
  host: https://app.armorcode.com
  token: YOUR_API_TOKEN

Add the following into your catalog-info.yaml

Catalog

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  annotations:
    armorcode/project: YOUR_PROJECT_NAME/YOUR_PROJECT_VERSION