This repository contains the Sysdig Plugin for Backstage, a frontend plugin that integrates Sysdig Secure vulnerability and posture reports into the Backstage service catalog.
Key Directories:
src/: Source code root.api/:SysdigApiClientimplementation usingfetchApi.components/: React components.SysdigComponent: Main dashboard.Sysdig*FetchComponent: Individual data widgets (Runtime, Registry, Pipeline, Posture).
lib/: Helpers, constants, and annotation definitions (annotations.ts).
dev/: Local development harness usingcreateDevAppand mock data.img/: Assets for documentation.
Tech Stack: React, TypeScript, Backstage Plugin API, Material UI. Package Manager: Yarn.
just install: Install dependencies.just start: Starts the local development server athttp://localhost:3000. Usesdev/index.tsxfor context. If address is still in use usefuser -k 3000/tcp.just test: Runs unit tests using Jest.just lint: Runs ESLint to check code quality.just build: Builds the plugin for distribution.just bump: Updates dependencies (requires Nix/Just).
Crucial setup details for new contributors:
- Package Manager: Strictly use Yarn (wrapped via
just). - Dev Dependencies: If
just startfails, ensurereact,react-dom, andreact-router-dom(v6) are explicitly indevDependencies. - Configuration:
app-config.yamlis not committed but required forjust start. Create it with standard proxy settings if missing. - Entity Context: The plugin crashes if run in isolation because it uses
useEntity. Thedev/index.tsxmust wrapSysdigPagein an<EntityProvider>with a valid mock entity object. - Data & Auth: Without
SYSDIG_SECURE_TOKEN, requests fail. For UI work, overridesysdigApiRefwith a Mock Client indev/index.tsx(seedev/MockSysdigClient.ts). - Test Execution:
yarn testdefaults to watch mode and will hang indefinitely. Always usejust test(oryarn test --watchAll=false) for a single-run execution.
- Language: TypeScript (
.ts,.tsx). Strict mode enabled. - Components: Functional components with Hooks (
useEntity,useAsync,useApi). - Styling: Use Material UI (
@mui/material) and Backstage core components (@backstage/core-components). - Naming: PascalCase for components (
SysdigComponent), camelCase for functions/vars. - Imports: Prefer relative imports within
src/but use strict package imports for external deps.
- Framework: Jest + React Testing Library + MSW (Mock Service Worker).
- Location: Tests are co-located with source files (e.g.,
SysdigComponent.test.tsx). - Requirement: Components must be tested for rendering and error states. Use
setupRequestMockHandlersfor API mocking.
- Commits: Follow Conventional Commits format:
feat(scope): descriptionfix(scope): descriptionchore: description
- Pull Requests:
- Title must match the commit format.
- Include screenshots for UI changes.
- Ensure
just testandjust lintpass before requesting review.
The release process is semi-automated:
- Manual Version Bump: Before creating a release, the
versionfield inpackage.jsonmust be manually updated (e.g., from1.3.2to1.3.3). - Automated Release: Once the version is manually updated and pushed to the
mainbranch, the GitHub Actions workflow (.github/workflows/release.yaml) automatically:- Creates a new GitHub Release with the updated version.
- Publishes the package to NPM.
- Keep
README.mdupdated with new annotations or configuration options. - Maintain this
AGENTS.mdto reflect architectural changes. - Agent Note: If
src/lib/annotations.tschanges, update the "How to annotate services" section inREADME.md.