@nospt/backstage-plugin-tech-radar-ng

Frontend plugin for the Tech Radar NG suite.

[!WARNING] BETA — This plugin is under active development. APIs, components, and configuration options may change between versions.

Overview

This package provides the frontend UI for the Tech Radar NG Backstage plugin suite. It includes:

• Radar Visualization — Interactive SVG radar with rings, segments, color-coded blips, and hover tooltips.
• Back Office UI — Paginated, filterable candidate table with batch classify/promote workflow.
• Navigation Items — Auto-registered sidebar entries for both the Radar and Back Office pages.
• API Client — A TechRadarClient Utility API to communicate with the backend REST endpoints.

Built exclusively with the New Frontend System using PageBlueprint, NavItemBlueprint, and ApiBlueprint.

Installation

From your Backstage root:

yarn --cwd packages/app add @nospt/backstage-plugin-tech-radar-ng

The plugin is auto-discovered via the New Frontend System — no manual route registration is needed.

Peer Dependencies

Ensure your Backstage app provides:

• react ^16.13.1 || ^17.0.0 || ^18.0.0
• react-dom ^16.13.1 || ^17.0.0 || ^18.0.0
• react-router-dom ^6.0.0

Pages & Routes

| Page | Path | Description | | --------------- | --------------------------- | --------------------------------------- | | Radar | /tech-radar-ng/radar | Interactive radar visualization | | Back Office | /tech-radar-ng/backoffice | Candidate management and classification |

Both pages appear automatically in the sidebar navigation.

API

The plugin registers a TechRadarClient Utility API (techRadarApiRef) that exposes:

| Method | Description | | --------------------------- | --------------------------------------------- | | getQuadrants() | Fetch all radar segments | | getRings() | Fetch all radar rings | | getCandidates(options) | List candidates with pagination and filtering | | classifyCandidates(patch) | Batch-update candidate classifications | | updateRings(patch) | Update ring definitions |

Development

cd plugins/tech-radar-ng
yarn start       # Start dev server with hot reload
yarn test        # Run tests
yarn lint        # Lint
yarn build       # Build for production

Related Packages

| Package | Description | | --------------------------------------------------------------------------- | --------------------------------------------- | | @nospt/backstage-plugin-tech-radar-ng-backend | Backend — Discovery engine, metrics, REST API | | @nospt/backstage-plugin-tech-radar-ng-common | Shared types, Zod schemas, and enums |

License

Apache License 2.0