Merge branch 'master' into ui-tooltip

This commit is contained in:
Charles de Dreuille
2025-07-22 09:36:37 +01:00
14 changed files with 213 additions and 40 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog': patch
---
Adding a more sensible default order to the default filters
-5
View File
@@ -1,5 +0,0 @@
---
'@backstage/plugin-catalog': patch
---
Adjusted the sticky scrolling of the new entity layout so that the info columns scrolls to the bottom more eagerly.
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/ui': patch
---
Adds onTabSelectionChange to ui header component.
+2
View File
@@ -20,6 +20,8 @@ Before any of these commands can be run, you need to run `yarn install` in the p
- Lint: Use `yarn lint --fix` in the project root to run the linter.
- API reports: Before submitting a pull request with changes to any package in the workspace, run `yarn build:api-reports` in the project root to generate API reports for all packages.
You MUST NOT create a release by running `yarn changesets version` or `yarn release` as part of any changes. Releases are created by separate workflows.
All changes that affect the published version of packages in the `/packages` and `/plugins` directories must be accompanied by a changeset. See the guidelines in `/REVIEWING.md` for information on how to write good changesets. Changesets are stored in the `/.changeset` directory. Breaking changes must be accompanied by a `minor` version bump for packages that below version `1.0.0`, or a `major` version bump for packages that are at version `1.0.0` or higher.
Never update ESLint, Prettier, or TypeScript configuration files unless specifically requested.
+136 -19
View File
@@ -37,32 +37,149 @@ backend.add(import('@backstage/plugin-catalog-backend-module-github'));
## Events Support
The catalog module for GitHub comes with events support enabled.
This will make it subscribe to its relevant topics (`github.push`,
`github.repository`) and expects these events to be published
via the `EventsService`.
The catalog module for GitHub comes with events support enabled. This will make it subscribe to its relevant topics (`github.push`, `github.repository`) and expects these events to be published via the `EventsService`.
Additionally, you should install the
[event router by `events-backend-module-github`](https://github.com/backstage/backstage/tree/master/plugins/events-backend-module-github/README.md)
which will route received events from the generic topic `github` to more specific ones
based on the event type (e.g., `github.push`).
### Prerequisites
In order to receive Webhook events by GitHub, you have to decide how you want them
to be ingested into Backstage and published to its `EventsService`.
You can decide between the following options (extensible):
There are two Prerequisites to use the builtin events support:
- [via HTTP endpoint](https://github.com/backstage/backstage/tree/master/plugins/events-backend/README.md)
- [via an AWS SQS queue](https://github.com/backstage/backstage/tree/master/plugins/events-backend-module-aws-sqs/README.md)
1. Creating a webhook in GitHub
2. Installing and configuring `@backstage/plugin-events-backend-module-github`
#### Configure Webhooks in GitHub
You can check the official docs to [configure your webhook](https://docs.github.com/en/developers/webhooks-and-events/webhooks/creating-webhooks) and to [secure your request](https://docs.github.com/en/developers/webhooks-and-events/webhooks/securing-your-webhooks).
The webhook(s) will need to be configured to react to `push` and
`repository` events.
The webhook(s) will need to be configured to react to `push` and `repository` events.
Certain actions like `transferred` by the `repository` event type
will not be supported when you use repository webhooks.
Please check the GitHubs documentation for these event types and
its actions.
:::note
To receive the `repository.transferred` event, the new owner account must have the GitHub App installed, and the App must be subscribed to `repository` events. This event is only sent to the account where the ownership is transferred.
:::
When creating the webhook in GitHub the "Payload URL" will looks something along these lines: `https://<your-intance-name>/api/events/http/github` and the "Content Type" should be `application/json`.
The GitHub Webhooks UI will send a trial event to validate it can connect when you save your new Webhook. It is possible to retry this trial event if it fails and you want to send it again. Additionally there is a Recent Deliveries tab you can use to validate that the events are being fired should you need to do any later troubleshooting.
#### Install and Configure GitHub Events Module
In order to use the built-in events support you'll need to install and configure `@backstage/plugin-events-backend-module-github`. This module will route received events from the generic topic `github` to more specific ones based on the event type (e.g., `github.push`). These more specific events are what the builtin events support is expecting.
First we need to add the package:
```bash title="from your Backstage root directory"
yarn --cwd packages/backend add @backstage/plugin-events-backend-module-github
```
Then we need to add it to your backend:
```ts title="in packages/backend/src/index.ts"
backend.add(import('@backstage/plugin-events-backend'));
/* highlight-add-start */
backend.add(import('@backstage/plugin-events-backend-module-github'));
/* highlight-add-end */
```
Finally you will want to configure it:
```yaml title="app-config.yaml
events:
modules:
github:
webhookSecret: ${GITHUB_WEBHOOK_SECRET}
```
Though this last step is technically optional, you'll want to include it to be sure the events being received are from GitHub and not from an external bad actor.
The value of `${GITHUB_WEBHOOK_SECRET}` in this example would be the same that you used when creating the webhook on GitHub.
### Events Setup using HTTP endpoint
Using the HTTP endpoint for events just requires adding some additional configuration to your `app-config.yaml` as it is a built in feature of the Events backend, here's what that would look like:
```yaml title="app-config.yaml
events:
http:
topics:
- github
```
This will then expose an endpoint like this: <http://localhost/api/events/http/github>
### Events Setup using AWS SQS module
Alternatively to using the HTTP endpoint you can use the AWS SQS module, here's how.
First we need to add the package:
```bash title="from your Backstage root directory"
yarn --cwd packages/backend add @backstage/plugins-events-backend-module-aws-sqs
```
Then we need to add it to your backend:
```ts title="in packages/backend/src/index.ts"
backend.add(import('@backstage/plugin-events-backend'));
backend.add(import('@backstage/plugin-events-backend-module-github'));
/* highlight-add-start */
backend.add(import('@backstage/plugins-events-backend-module-aws-sqs'));
/* highlight-add-end */
```
Finally you will want to configure it:
```yaml title="app-config.yaml
events:
modules:
awsSqs:
awsSqsConsumingEventPublisher:
topics:
github:
queue:
url: 'https://sqs.us-east-2.amazonaws.com/123456789012/MyQueue'
region: us-east-2
```
The [AWS SQS module `README`](https://github.com/backstage/backstage/blob/master/plugins/events-backend-module-aws-sqs/README.md#configuration) has more details on the configuration options, the example above includes on the required options.
### Events Setup using Google Pub/Sub module
Alternatively to using the HTTP endpoint you can use the Google Pub/Sub module, here's how.
First we need to add the package:
```bash title="from your Backstage root directory"
yarn --cwd packages/backend add @backstage/plugin-events-backend-module-google-pubsub
```
Then we need to add it to your backend:
```ts title="in packages/backend/src/index.ts"
backend.add(import('@backstage/plugin-events-backend'));
backend.add(import('@backstage/plugin-events-backend-module-github'));
/* highlight-add-start */
backend.add(import('@backstage/plugin-events-backend-module-google-pubsub'));
/* highlight-add-end */
```
Finally you will want to configure it:
```yaml title="app-config.yaml
events:
modules:
googlePubSub:
googlePubSubConsumingEventPublisher:
subscriptions:
# A unique key for your subscription, to be used in logging and metrics
mySubscription:
# The fully qualified name of the subscription
subscriptionName: 'projects/my-google-project/subscriptions/github-enterprise-events'
# The event system topic to transfer to. This can also be just a plain string
targetTopic: 'github.{{ event.attributes.x-github-event }}'
```
The [Google Pub/Sub module `README`](https://github.com/backstage/backstage/blob/master/plugins/events-backend-module-google-pubsub/README.md#configuration) has more details on the configuration options, the example above includes on the required options.
## Configuration
+1 -1
View File
@@ -17,7 +17,7 @@ The initiatives listed below are planned for release within the next half-year,
### New Frontend System - Ready for Adoption
The [new fronted system](../frontend-system/index.md) still needs more work, and
The [new frontend system](../frontend-system/index.md) still needs more work, and
the next milestone is to improve it to the point where there is enough
confidence in the design to start encouraging adoption in the community. You can
follow along with this work in the [meta issue](https://github.com/backstage/backstage/issues/19545).
+36 -5
View File
@@ -6,7 +6,7 @@ description: Tutorial to setup OpenTelemetry metrics and traces exporters in Bac
Backstage uses [OpenTelemetry](https://opentelemetry.io/) to instrument its components by reporting traces and metrics.
This tutorial shows how to setup exporters in your Backstage backend package. For demonstration purposes we will use a Prometheus exporter, but you can adjust your solution to use another one that suits your needs; see for example the article on [OTLP exporters](https://opentelemetry.io/docs/instrumentation/js/exporters/).
This tutorial shows how to setup exporters in your Backstage backend package. For demonstration purposes we will use a Prometheus exporter, but you can adjust your solution to use another one that suits your needs; see for example the article on [OTLP exporters](https://opentelemetry.io/docs/instrumentation/js/exporters/). This tutorial also includes exporting traces using the JSON/HTTP exporter with Jaeger being the ideal target, but this too can be adjusted to fit your needs by seeing the supported tooling in the [OTLP exporters](https://opentelemetry.io/docs/instrumentation/js/exporters/) documentation.
## Install dependencies
@@ -19,7 +19,8 @@ The `auto-instrumentations-node` will automatically create spans for code called
yarn --cwd packages/backend add \
@opentelemetry/sdk-node \
@opentelemetry/auto-instrumentations-node \
@opentelemetry/exporter-prometheus
@opentelemetry/exporter-prometheus \
@opentelemetry/exporter-trace-otlp-http
```
## Configure
@@ -36,12 +37,20 @@ if (isMainThread) {
getNodeAutoInstrumentations,
} = require('@opentelemetry/auto-instrumentations-node');
const { PrometheusExporter } = require('@opentelemetry/exporter-prometheus');
const {
OTLPTraceExporter,
} = require('@opentelemetry/exporter-trace-otlp-http');
// By default exports the metrics on localhost:9464/metrics
const prometheus = new PrometheusExporter();
const prometheusExporter = new PrometheusExporter();
// We post the traces to localhost:4318/v1/traces
const otlpTraceExporter = new OTLPTraceExporter({
// Default Jaeger URL trace endpoint.
url: 'http://localhost:4318/v1/traces',
});
const sdk = new NodeSDK({
// You can add a traceExporter field here too
metricReader: prometheus,
metricReader: prometheusExporter,
traceExporter: otlpTraceExporter,
instrumentations: [getNodeAutoInstrumentations()],
});
@@ -105,6 +114,28 @@ For local development, you can add the required flag in your `packages/backend/p
You can now start your Backstage instance as usual, using `yarn start` and you'll be able to see your metrics at: <http://localhost:9464/metrics>
### Troubleshooting
If you are having issues getting metrics or traces working there are some helpful diagnostic tools from OpenTelemetry you can use that can help.
First we need to the `@opentelemetry/api` package:
```bash
yarn --cwd packages/backend add @opentelemetry/api
```
Then we want to add the following snippet before the `sdk.start()` call:
```js
const { diag, DiagConsoleLogger, DiagLogLevel } = require('@opentelemetry/api');
diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG);
```
This will then add OpenTelemetry debug logs that you can then look at to help get a better idea of why something may not be working as expected.
We don't recommend shipping this in production because of the log density.
## Production Setup
In your `.dockerignore`, add this line:
+10
View File
@@ -0,0 +1,10 @@
---
title: Signadot
author: Signadot
authorUrl: https://www.signadot.com/
category: Kubernetes
description: View and manage lightweight ephemeral Kubernetes environments (Sandboxes) for testing microservices in pull requests and local development.
documentation: https://github.com/signadot/backstage-plugin
iconUrl: https://avatars.githubusercontent.com/u/57196635
npmPackageName: '@signadot-lib/backstage-plugin'
addedDate: '2025-07-09'
+4 -1
View File
@@ -25,6 +25,7 @@ import {
createApiFactory,
discoveryApiRef,
fetchApiRef,
identityApiRef,
} from '@backstage/core-plugin-api';
import { AuthProxyDiscoveryApi } from './AuthProxyDiscoveryApi';
import { formDecoratorsApiRef } from '@backstage/plugin-scaffolder/alpha';
@@ -51,13 +52,15 @@ export const apis: AnyApiFactory[] = [
discoveryApi: discoveryApiRef,
fetchApi: fetchApiRef,
scmIntegrationsApi: scmIntegrationsApiRef,
identityApi: identityApiRef,
},
factory: ({ discoveryApi, fetchApi, scmIntegrationsApi }) =>
factory: ({ discoveryApi, fetchApi, scmIntegrationsApi, identityApi }) =>
new ScaffolderClient({
useLongPollingLogs: true,
discoveryApi,
fetchApi,
scmIntegrationsApi,
identityApi,
}),
}),
+3 -1
View File
@@ -29,7 +29,7 @@ import { Table as Table_2 } from '@tanstack/react-table';
import type { TabListProps as TabListProps_2 } from 'react-aria-components';
import type { TabPanelProps as TabPanelProps_2 } from 'react-aria-components';
import { TabProps } from 'react-aria-components';
import type { TabsProps as TabsProps_2 } from 'react-aria-components';
import { TabsProps as TabsProps_2 } from 'react-aria-components';
import { TdHTMLAttributes } from 'react';
import type { TextFieldProps as TextFieldProps_2 } from 'react-aria-components';
import { ThHTMLAttributes } from 'react';
@@ -1040,6 +1040,8 @@ export interface HeaderProps {
// (undocumented)
menuItems?: HeaderMenuItem[];
// (undocumented)
onTabSelectionChange?: TabsProps_2['onSelectionChange'];
// (undocumented)
tabs?: HeaderTab[];
// (undocumented)
title?: string;
+1 -1
View File
@@ -50,7 +50,7 @@ export const Header = (props: HeaderProps) => {
/>
{tabs && (
<div className={classNames.tabsWrapper}>
<Tabs>
<Tabs onSelectionChange={props.onTabSelectionChange}>
<TabList>
{tabs?.map(tab => (
<Tab key={tab.id} id={tab.id} href={tab.href}>
@@ -14,6 +14,8 @@
* limitations under the License.
*/
import { TabsProps } from 'react-aria-components';
/**
* Props for the main Header component.
*
@@ -26,6 +28,7 @@ export interface HeaderProps {
customActions?: React.ReactNode;
menuItems?: HeaderMenuItem[];
tabs?: HeaderTab[];
onTabSelectionChange?: TabsProps['onSelectionChange'];
}
/**
@@ -79,8 +79,7 @@ const useStyles = makeStyles<
infoArea: {
gridArea: 'info',
position: 'sticky',
bottom: theme.spacing(3),
alignSelf: 'end',
top: theme.spacing(3),
marginLeft: theme.spacing(3),
},
contentArea: {
+6 -5
View File
@@ -133,13 +133,14 @@ const catalogListCatalogFilter = CatalogFilterBlueprint.makeWithOverrides({
},
});
// this is the default order that the filters will be applied in
export default [
catalogTagCatalogFilter,
catalogKindCatalogFilter,
catalogTypeCatalogFilter,
catalogModeCatalogFilter,
catalogNamespaceCatalogFilter,
catalogLifecycleCatalogFilter,
catalogProcessingStatusCatalogFilter,
catalogListCatalogFilter,
catalogModeCatalogFilter,
catalogLifecycleCatalogFilter,
catalogTagCatalogFilter,
catalogProcessingStatusCatalogFilter,
catalogNamespaceCatalogFilter,
];