@roadiehq/backstage-plugin-wiz

Wiz Plugin for Backstage

This plugin is the frontend for WIZ Backend Backstage plugin. You can see the corresponding backend plugin in here.

. . . .

Features

Wiz Issues Component:

• Shows last 500 issues created for the project, grouped by Controls

Issues widget Component:

• Shows number of open issues for last 500 issues created, grouped by severity

Issues chart Component:

• Shows graph of last 500 issues created, with number of resolved and open issues for last 6 months

Severity chart Component:

• Shows graph of last 500 issues created, grouped by severity, over time of last 6 months

Getting started

Make sure you have installed WIZ backend plugin. This will generate access token needed for retriving and displaying issues in components.

Add plugin component to your Backstage instance:

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityWizIssues,
  isWizAvailable,
  EntityIssuesWidget,
  EntityIssuesChart,
  EntitySeverityChart,
} from '@roadiehq/backstage-plugin-wiz';

Add widgets: EntityIssuesWidget, EntityIssuesChart, EntitySeverityChart

In the packages/app/src/components/catalog/EntityPage.tsx under overviewContent add the following, based on which card (widget) you want to display:

<EntitySwitch>
  <EntitySwitch.Case if={isWizAvailable}>
    <Grid item md={6}>
      <EntityIssuesWidget />
    </Grid>
  </EntitySwitch.Case>
</EntitySwitch>

<EntitySwitch>
  <EntitySwitch.Case if={isWizAvailable}>
    <Grid item md={6}>
      <EntityIssuesChart />
    </Grid>
  </EntitySwitch.Case>
</EntitySwitch>

<EntitySwitch>
  <EntitySwitch.Case if={isWizAvailable}>
    <Grid item md={6}>
      <EntitySeverityChart />
    </Grid>
  </EntitySwitch.Case>
</EntitySwitch>

In order to add correct url which will lead to WIZ dashboard for your organisation, for EntityIssuesWidget, add dashboard link in your app-config.yaml under wiz.

wiz:
  dashboardLink: <your-wiz-url>
  clientId: <Client ID>
  clientSecret: <Client Secret>
  tokenUrl: <Wiz token URL>
  wizAPIUrl: <API Endpoint URL>

EntityWizIssues

In the packages/app/src/components/catalog/EntityPage.tsx under serviceEntityPage add the following:

<EntityLayout.Route path="/wiz" title="WIZ">
  <EntityWizIssues />
</EntityLayout.Route>

This will add a new tab with all the issues for the project id you have specified in annotations.

How to use add correct annotations

1. Add annotation to the yaml config file of a component:

metadata:
  annotations:
    wiz.io/project-id: <your-project-id>