https://github.com/buildkite/backstage-plugin
A repo for the development of a Buildkite plugin for Backstage
https://github.com/buildkite/backstage-plugin
backstage-plugin
Last synced: 12 months ago
JSON representation
A repo for the development of a Buildkite plugin for Backstage
- Host: GitHub
- URL: https://github.com/buildkite/backstage-plugin
- Owner: buildkite
- Created: 2024-07-09T00:34:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-27T10:56:19.000Z (12 months ago)
- Last Synced: 2025-06-27T11:46:14.667Z (12 months ago)
- Topics: backstage-plugin
- Language: TypeScript
- Homepage:
- Size: 2.1 MB
- Stars: 2
- Watchers: 9
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Buildkite Backstage Plugin
A Buildkite plugin for Backstage that provides deep integration with your Buildkite CI/CD pipelines.
## ✨ Features
🔍 **Enhanced Pipeline Visibility**
- Real-time build status monitoring with automatic updates
- Hierarchical branch-based organization of builds
- Detailed step-by-step build progress tracking
- Comprehensive build logs with syntax highlighting
⚡ **Powerful Filtering & Search**
- Full-text search across builds, messages, authors, branches, and commit IDs
- Smart date range filtering with preset options (Today, Yesterday, Last 7 days, Last 30 days)
- Multi-criteria filtering by branch, creator, and build status
- Automatic status-based grouping and organization
📖 **Rich Build Information**
- Detailed build status with step-by-step progress
- Build timing and duration tracking
- Commit and branch context
- Author information with avatars
- Build trigger information
🛠️ **Interactive Build Management**
- One-click rebuild functionality
- Expandable/collapsible build details
- Interactive build step inspection
- Direct links to Buildkite
⚙️ **Advanced Customization**
- UTC/Local time toggle with persistent preferences
- Branch-level collapsing
- Automatic expansion of running builds
- Custom pipeline styling with avatars
## Prerequisites
- Buildkite account with API access
- Required API token permissions:
- `read_pipelines`
- `read_builds`
- `read_user`
- `write_builds` (for rebuild functionality)
## Installation
### Plugin Installation
If the plugin is in your project's plugins directory:
```bash
yarn workspace app add @buildkite/backstage-plugin-buildkite
```
If you're installing from an external package:
```bash
yarn workspace app add @buildkite/backstage-plugin-buildkite
```
### Configuration
1. Add the proxy configuration to your `app-config.yaml`:
```yaml
proxy:
endpoints:
'/buildkite/api':
target: https://api.buildkite.com/v2
headers:
Authorization: Bearer ${BUILDKITE_API_TOKEN}
Accept: application/json
allowedHeaders: ['Authorization']
buildkite:
apiToken: ${BUILDKITE_API_TOKEN}
organization: ${BUILDKITE_ORGANIZATION}
```
2. Create or update `packages/app/src/plugins.ts` to register the plugin:
```typescript
// Import plugins that you want to be included in your app
export { buildkitePlugin } from '@buildkite/backstage-plugin-buildkite';
```
3. Make sure to import the plugins file in your `packages/app/src/App.tsx`:
```typescript
// Import plugins
import './plugins';
```
4. Add the API factory in `packages/app/src/apis.ts`:
```typescript
import { buildkiteAPIRef, BuildkiteClient } from '@buildkite/backstage-plugin-buildkite';
export const apis: AnyApiFactory[] = [
createApiFactory({
api: buildkiteAPIRef,
deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef, configApi: configApiRef },
factory: ({ discoveryApi, fetchApi, configApi }) => {
const buildkiteConfig = configApi.getOptionalConfig('buildkite');
return new BuildkiteClient({
discoveryAPI: discoveryApi,
fetchAPI: fetchApi,
config: {
organization: buildkiteConfig?.getOptionalString('organization') ?? 'default-org',
defaultPageSize: buildkiteConfig?.getOptionalNumber('defaultPageSize') ?? 25,
apiBaseUrl: buildkiteConfig?.getOptionalString('apiBaseUrl') ?? 'https://api.buildkite.com/v2',
},
});
},
}),
];
```
5. Add routes in `packages/app/src/App.tsx`:
```typescript
import { PipelinePage } from '@buildkite/backstage-plugin-buildkite';
const routes = (
{/* Other routes... */}
{/* Buildkite Plugin Routes */}
} />
} />
);
```
6. Add to your Entity Page in `packages/app/src/components/catalog/EntityPage.tsx`:
```typescript
import { isBuildkiteAvailable, BuildkiteWrapper } from '@buildkite/backstage-plugin-buildkite';
const cicdContent = (
);
const defaultEntityPage = (
{/* Other routes... */}
{cicdContent}
);
```
### Component Configuration
Add the Buildkite annotation to your component's `catalog-info.yaml`:
```yaml
metadata:
annotations:
buildkite.com/pipeline-slug: organization-slug/pipeline-slug
```
## Documentation
- [Deployment Tracking](docs/DEPLOYMENT.md)
- [Troubleshooting](docs/TROUBLESHOOTING.md)
- [Contributing/Development Guide](docs/CONTRIBUTING.md)