Get Roadie in your IDE with our new MCP Servers
Roadie
← Backstage Plugins Guides
Wiz logo

Backstage Wiz Plugin

Created by Roadie

Wiz is the unified cloud security platform with prevention and response capabilities, enabling security and development teams to build faster and more securely.

The Backstage Wiz Plugin integrates Wiz, a cloud security platform, into your Backstage instance, providing information about recently created issues, their status and severity.

A preview of Wiz issues.

Installation Instructions

These instructions apply to self-hosted Backstage only. To use this plugin on Roadie, visit the docs.

The plugin requires Wiz backend plugin to be installed first. The backend plugin handles authentication and retrieving data. You can read more about it in Prerequisites and Getting Started section below.

Copy 
yarn --cwd packages/backend add @roadiehq/plugin-wiz-backend

After installing backend plugin you can proceed with installing frontend part.

Copy 
yarn --cwd packages/app add @roadiehq/backstage-plugin-wiz

Add plugin components to your Entity Page

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

Add annotation to the yaml config file of a component

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

Add widgets under overviewContent, based on which card (widget) you wish to display.

Copy 
// packages/app/src/components/catalog/EntityPage.tsx
<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>

Add a new tab with all the issues for the project id you have specified in annotations, under serviceEntityPage.

Copy 
// packages/app/src/components/catalog/EntityPage.tsx

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

Things to Know

Prerequisites

To begin using the Wiz backend plugin, you will need the following parameters:

  • Wiz API URL (API Endpoint URL)
  • Wiz Token URL
  • Client ID and Client Secret

In order to retrieve those, you can read official documentation, which describes how to obtain the values.

The Wiz GraphQL API has a single endpoint:

Where <TENANT_DATA_CENTER> is the Wiz regional data center your tenant resides in (e.g., us1, us2, eu1, or eu2).

Getting Started

After obtaining all of the above, add the Wiz configuration in your app-config.yaml:

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

Create a file in packages/backend/src/plugins/wiz.ts

Copy 
import { createRouter } from '@roadiehq/plugin-wiz-backend';

export default async function createPlugin({
  logger,
  config,
}: PluginEnvironment) {
  return await createRouter({ logger, config });
})

In packages/backend/src/index.ts add the following:

Copy 
import wiz from './plugins/wiz';
// ...
async function main() {
  // ...
  const wizEnv = useHotMemoize(module, () => createEnv('wiz'));

  const wizConfig = {
    clientId: config.getOptionalString('wiz.clientId'),
    clientSecret: config.getOptionalString('wiz.clientSecret'),
    tokenUrl: config.getOptionalString('wiz.tokenUrl'),
    apiUrl: config.getOptionalString('wiz.wizAPIUrl'),
  };

  const apiRouter = Router();
  if (
    wizConfig.enabled &&
    wizConfig.clientId &&
    wizConfig.clientSecret &&
    wizConfig.tokenUrl &&
    wizConfig.apiUrl
  ) {
    router.use('/wiz-backend', await wiz(wizEnv));
  }
  await wiz(wizEnv);
  // ...
}

At this point you can generate access token you will need for API calls towards WIZ.

Changelog

This changelog is produced from commits made to the Wiz plugin since a year ago. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Breaking changes

  • Rename backend plugin ID to wiz. Change default API path to /wiz. Update your app config and routes to match. #1928 merged 2 months ago
  • Remove enabled config option from the Wiz plugin. If you rely on it, move checks to your app config. #1752 merged 10 months ago

Features

  • Create the Wiz plugin with an Issues Overview and three widgets. #1657 merged 11 months ago
  • Add a link to Wiz issues when a Wiz dashboard link exists. #1863 merged 6 months ago

Improvements

  • Support Backstage 1.40. #1952 merged 2 months ago
  • Show clear error messages for missing config. Add subtitles to graphs for clarity. #1752 merged 10 months ago
  • Improve backend error handling. Add the Wiz logo in components. #1681 merged 11 months ago
  • Return up to 500 results from the backend. Add context to cut extra API calls. #1723 merged 10 months ago

Bug fixes

  • Fix orderBy handling in the API. #1863 merged 6 months ago
  • Package assets in the build so images load. #1692 merged 11 months ago
  • Publish the backend package and set repository so images display on npm. #1669 merged 11 months ago

Maintenance

  • Remove unused plugin dependencies. #1847 merged 7 months ago
  • Update Backstage dependencies. #1728 merged 10 months ago
  • Update Backstage dependencies. #1684 merged 11 months ago
  • Update Backstage dependencies. #1821 merged 7 months ago
  • Revert a dependency bump to resolve issues. #1825 merged 7 months ago
  • Manually sync npm package changes. #1696 merged 11 months ago

Set up Backstage in minutes with Roadie

Get a demo