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 issues for the project, grouped by Controls

Issues widget Component:

• Shows number of open issues grouped by severity

Issues chart Component:

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

Severity chart Component:

• Shows graph of issues 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:
  enabled: true
  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>