paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: migrate to new backend in local development

Browse Source 
additionally allow defining custom sidebar item for dev app page.

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>
This commit is contained in:
Heikki Hellgren
2024-03-01 10:27:11 +02:00
parent 794883b10d
commit 9a41a7bfa8
15 changed files with 212 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/light-eggs-switch.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/dev-utils': patch
---
Allow defining custom side bar item for page
.changeset/rude-hats-bow.md
+8
View File
@@ -0,0 +1,8 @@
---
'@backstage/plugin-notifications-backend': patch
'@backstage/plugin-signals-backend': patch
'@backstage/plugin-notifications': patch
'@backstage/plugin-signals': patch
---
Migrate signals and notifications to the new backend in local development
packages/dev-utils/api-report.md
+3
View File
@@ -14,6 +14,7 @@ import { GridProps } from '@material-ui/core/Grid';
import { IconComponent } from '@backstage/core-plugin-api';
import { PropsWithChildren } from 'react';
import { ReactNode } from 'react';
import { RouteRef } from '@backstage/core-plugin-api';
// @public
export function createDevApp(): DevAppBuilder;
@@ -42,6 +43,8 @@ export type DevAppPageOptions = {
children?: JSX.Element;
title?: string;
icon?: IconComponent;
sideBarItem?: JSX.Element;
routeRef?: RouteRef;
};
// @public (undocumented)
packages/dev-utils/src/devApp/render.tsx
+30 -10
View File
@@ -44,7 +44,7 @@ import {
} from '@backstage/integration-react';
import Box from '@material-ui/core/Box';
import BookmarkIcon from '@material-ui/icons/Bookmark';
import React, { ComponentType, ReactNode, PropsWithChildren } from 'react';
import React, { ComponentType, PropsWithChildren, ReactNode } from 'react';
import { createRoutesFromChildren, Route } from 'react-router-dom';
import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
import 'react-dom';
@@ -80,6 +80,9 @@ export type DevAppPageOptions = {
children?: JSX.Element;
title?: string;
icon?: IconComponent;
sideBarItem?: JSX.Element;
routeRef?: RouteRef;
};
/**
@@ -141,7 +144,9 @@ export class DevAppBuilder {
this.defaultPage = path;
}
if (opts.title) {
if (opts.sideBarItem) {
this.sidebarItems.push(opts.sideBarItem);
} else if (opts.title) {
this.sidebarItems.push(
<SidebarItem
key={path}
@@ -151,14 +156,29 @@ export class DevAppBuilder {
/>,
);
}
this.routes.push(
<MaybeGatheringRoute
key={path}
path={path}
element={opts.element}
children={opts.children}
/>,
);
if (opts.routeRef) {
const Elem = () => <>{opts.element}</>;
attachComponentData(Elem, 'core.mountPoint', opts.routeRef);
this.routes.push(
<MaybeGatheringRoute
key={path}
path={path}
element={<Elem />}
children={opts.children}
/>,
);
} else {
this.routes.push(
<MaybeGatheringRoute
key={path}
path={path}
element={opts.element}
children={opts.children}
/>,
);
}
return this;
}
plugins/notifications-backend/dev/index.ts
+64
View File
@@ -0,0 +1,64 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { createBackend } from '@backstage/backend-defaults';
import {
coreServices,
createBackendPlugin,
} from '@backstage/backend-plugin-api';
import { notificationService } from '@backstage/plugin-notifications-node';
const notificationsDebug = createBackendPlugin({
pluginId: 'notifications-debug',
register(env) {
env.registerInit({
deps: {
notifications: notificationService,
lifecycle: coreServices.lifecycle,
},
async init({ notifications, lifecycle }) {
let interval: NodeJS.Timeout | undefined;
lifecycle.addStartupHook(async () => {
interval = setInterval(async () => {
await notifications.send({
recipients: {
type: 'entity',
entityRef: 'user:development/guest',
},
payload: { title: 'Test notification' },
});
}, 5000);
});
lifecycle.addShutdownHook(async () => {
if (interval) {
clearInterval(interval);
}
});
},
});
},
});
const backend = createBackend();
backend.add(import('@backstage/plugin-events-backend/alpha'));
backend.add(import('@backstage/plugin-signals-backend'));
backend.add(import('@backstage/plugin-auth-backend'));
backend.add(import('@backstage/plugin-auth-backend-module-guest-provider'));
backend.add(import('../src'));
backend.add(notificationsDebug);
backend.start();
plugins/notifications-backend/package.json
+5
View File
@@ -51,8 +51,13 @@
"yn": "^4.0.0"
},
"devDependencies": {
"@backstage/backend-defaults": "workspace:^",
"@backstage/backend-test-utils": "workspace:^",
"@backstage/cli": "workspace:^",
"@backstage/plugin-auth-backend": "workspace:^",
"@backstage/plugin-auth-backend-module-guest-provider": "workspace:^",
"@backstage/plugin-events-backend": "workspace:^",
"@backstage/plugin-signals-backend": "workspace:^",
"@types/express": "^4.17.6",
"@types/supertest": "^2.0.8",
"msw": "^1.0.0",
plugins/notifications-backend/src/run.ts
-32
View File
@@ -1,32 +0,0 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { getRootLogger } from '@backstage/backend-common';
import yn from 'yn';
import { startStandaloneServer } from './service/standaloneServer';
const port = process.env.PLUGIN_PORT ? Number(process.env.PLUGIN_PORT) : 7007;
const enableCors = yn(process.env.PLUGIN_CORS, { default: false });
const logger = getRootLogger();
startStandaloneServer({ port, enableCors, logger }).catch(err => {
logger.error(err);
process.exit(1);
});
process.on('SIGINT', () => {
logger.info('CTRL+C pressed; exiting.');
process.exit(0);
});
plugins/notifications-backend/src/service/standaloneServer.ts
-150
View File
@@ -1,150 +0,0 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
createLegacyAuthAdapters,
createServiceBuilder,
HostDiscovery,
loadBackendConfig,
PluginDatabaseManager,
ServerTokenManager,
} from '@backstage/backend-common';
import { Server } from 'http';
import { Logger } from 'winston';
import { createRouter } from './router';
import Knex from 'knex';
import { IdentityApi } from '@backstage/plugin-auth-node';
import { Request } from 'express';
import {
CatalogApi,
CatalogRequestOptions,
GetEntitiesByRefsRequest,
} from '@backstage/catalog-client';
import { DefaultSignalsService } from '@backstage/plugin-signals-node';
import {
EventParams,
EventsService,
EventsServiceSubscribeOptions,
} from '@backstage/plugin-events-node';
import {
AuthService,
HttpAuthService,
UserInfoService,
} from '@backstage/backend-plugin-api';
export interface ServerOptions {
port: number;
enableCors: boolean;
logger: Logger;
}
export async function startStandaloneServer(
options: ServerOptions,
): Promise<Server> {
const logger = options.logger.child({ service: 'notifications-backend' });
logger.debug('Starting application server...');
const config = await loadBackendConfig({ logger, argv: process.argv });
const db = Knex(config.get('backend.database'));
const tokenManager = ServerTokenManager.fromConfig(config, {
logger,
});
const discovery = HostDiscovery.fromConfig(config);
const dbMock: PluginDatabaseManager = {
async getClient() {
return db;
},
};
const catalogApi = {
async getEntitiesByRefs(
_request: GetEntitiesByRefsRequest,
__options?: CatalogRequestOptions,
) {
return {
items: [
{
apiVersion: 'backstage.io/v1alpha1',
kind: 'User',
metadata: { name: 'user', namespace: 'default' },
spec: {},
},
],
};
},
} as Partial<CatalogApi> as CatalogApi;
const identityMock: IdentityApi = {
async getIdentity({ request }: { request: Request<unknown> }) {
const token = request.headers.authorization?.split(' ')[1];
return {
identity: {
type: 'user',
ownershipEntityRefs: [],
userEntityRef: 'user:default/guest',
},
token: token || 'no-token',
};
},
};
const mockSubscribers: EventsServiceSubscribeOptions[] = [];
const events: EventsService = {
async publish(params: EventParams): Promise<void> {
mockSubscribers.forEach(sub => sub.onEvent(params));
},
async subscribe(subscription: EventsServiceSubscribeOptions) {
mockSubscribers.push(subscription);
},
};
const signalService = DefaultSignalsService.create({ events });
// TODO: Move to use services instead this hack
const { auth, httpAuth, userInfo } = createLegacyAuthAdapters<
any,
{ auth: AuthService; httpAuth: HttpAuthService; userInfo: UserInfoService }
>({
identity: identityMock,
tokenManager,
discovery,
});
const router = await createRouter({
logger,
database: dbMock,
catalog: catalogApi,
discovery,
signals: signalService,
auth,
httpAuth,
userInfo,
});
let service = createServiceBuilder(module)
.setPort(options.port)
.addRouter('/notifications', router);
if (options.enableCors) {
service = service.enableCors({ origin: 'http://localhost:3000' });
}
return await service.start().catch(err => {
logger.error(err);
process.exit(1);
});
}
module.hot?.accept();
plugins/notifications/dev/index.tsx
+7 -2
View File
@@ -16,12 +16,17 @@
import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
import { notificationsPlugin } from '../src/plugin';
import { NotificationsPage } from '../src/components/NotificationsPage';
import { NotificationsSidebarItem } from '../src';
import { rootRouteRef } from '../src/routes';
// TODO: How to sign in here as guest user?
createDevApp()
.registerPlugin(notificationsPlugin)
.addPage({
element: <div />,
title: 'Root Page',
element: <NotificationsPage />,
path: '/notifications',
sideBarItem: <NotificationsSidebarItem />,
routeRef: rootRouteRef,
})
.render();
plugins/signals-backend/dev/index.ts
+59
View File
@@ -0,0 +1,59 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { createBackend } from '@backstage/backend-defaults';
import {
coreServices,
createBackendPlugin,
} from '@backstage/backend-plugin-api';
import { signalService } from '@backstage/plugin-signals-node';
const signalDebug = createBackendPlugin({
pluginId: 'signals-debug',
register(env) {
env.registerInit({
deps: {
signals: signalService,
lifecycle: coreServices.lifecycle,
},
async init({ signals, lifecycle }) {
let interval: NodeJS.Timeout | undefined;
lifecycle.addStartupHook(async () => {
interval = setInterval(async () => {
await signals.publish<{ date: string }>({
channel: 'debug',
message: { date: new Date().toISOString() },
recipients: { type: 'broadcast' },
});
}, 1000);
});
lifecycle.addShutdownHook(async () => {
if (interval) {
clearInterval(interval);
}
});
},
});
},
});
const backend = createBackend();
backend.add(import('@backstage/plugin-events-backend/alpha'));
backend.add(import('../src'));
backend.add(signalDebug);
backend.start();
plugins/signals-backend/package.json
+2
View File
@@ -45,7 +45,9 @@
"yn": "^4.0.0"
},
"devDependencies": {
"@backstage/backend-defaults": "workspace:^",
"@backstage/cli": "workspace:^",
"@backstage/plugin-events-backend": "workspace:^",
"@types/supertest": "^2.0.8",
"msw": "^1.0.0",
"supertest": "^6.2.4"
plugins/signals-backend/src/run.ts
-32
View File
@@ -1,32 +0,0 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { getRootLogger } from '@backstage/backend-common';
import yn from 'yn';
import { startStandaloneServer } from './service/standaloneServer';
const port = process.env.PLUGIN_PORT ? Number(process.env.PLUGIN_PORT) : 7007;
const enableCors = yn(process.env.PLUGIN_CORS, { default: false });
const logger = getRootLogger();
startStandaloneServer({ port, enableCors, logger }).catch(err => {
logger.error(err);
process.exit(1);
});
process.on('SIGINT', () => {
logger.info('CTRL+C pressed; exiting.');
process.exit(0);
});
plugins/signals-backend/src/service/standaloneServer.ts
-112
View File
@@ -1,112 +0,0 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
createServiceBuilder,
HostDiscovery,
loadBackendConfig,
} from '@backstage/backend-common';
import { Server } from 'http';
import { Logger } from 'winston';
import { createRouter } from './router';
import { DefaultSignalsService } from '@backstage/plugin-signals-node';
import { DefaultIdentityClient } from '@backstage/plugin-auth-node';
import {
EventParams,
EventsService,
EventsServiceSubscribeOptions,
} from '@backstage/plugin-events-node';
import {
BackstageCredentials,
BackstageUserInfo,
UserInfoService,
} from '@backstage/backend-plugin-api';
export interface ServerOptions {
port: number;
enableCors: boolean;
logger: Logger;
}
export async function startStandaloneServer(
options: ServerOptions,
): Promise<Server> {
const logger = options.logger.child({ service: 'signals-backend' });
logger.debug('Starting application server...');
const config = await loadBackendConfig({ logger, argv: process.argv });
const discovery = HostDiscovery.fromConfig(config);
const identity = DefaultIdentityClient.create({
discovery,
issuer: await discovery.getExternalBaseUrl('auth'),
});
const mockSubscribers: EventsServiceSubscribeOptions[] = [];
const events: EventsService = {
async publish(params: EventParams): Promise<void> {
mockSubscribers.forEach(sub => sub.onEvent(params));
},
async subscribe(subscription: EventsServiceSubscribeOptions) {
mockSubscribers.push(subscription);
},
};
const signals = DefaultSignalsService.create({
events,
});
const userInfo: UserInfoService = {
async getUserInfo(_: BackstageCredentials): Promise<BackstageUserInfo> {
return {
userEntityRef: 'user:default/guest',
ownershipEntityRefs: ['user:default/guest'],
};
},
};
const router = await createRouter({
logger,
identity,
events,
discovery,
userInfo,
});
let service = createServiceBuilder(module)
.setPort(options.port)
.addRouter('/signals', router);
if (options.enableCors) {
service = service.enableCors({ origin: 'http://localhost:3000' });
}
let server: Promise<Server>;
try {
server = service.start();
setInterval(() => {
signals.publish({
recipients: { type: 'broadcast' },
channel: 'test',
message: { hello: 'world' },
});
}, 5000);
} catch (err) {
logger.error(err);
process.exit(1);
}
return server;
}
module.hot?.accept();
plugins/signals/dev/index.tsx
+22 -9
View File
@@ -16,20 +16,33 @@
import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
import { signalsPlugin } from '../src/plugin';
import { Content, Header, Page } from '@backstage/core-components';
import { CodeSnippet, Content, Header, Page } from '@backstage/core-components';
import Typography from '@material-ui/core/Typography';
import { useSignal } from '@backstage/plugin-signals-react';
const SignalsDebugPage = () => {
const { lastSignal } = useSignal('debug');
return (
<Page themeId="home">
<Header title="Signals" />
<Content>
<Typography>Last signal:</Typography>
<Typography>
{lastSignal ? (
<CodeSnippet text={JSON.stringify(lastSignal)} language="json" />
) : (
'Not received'
)}
</Typography>
</Content>
</Page>
);
};
createDevApp()
.registerPlugin(signalsPlugin)
.addPage({
title: 'Debug',
element: (
<Page themeId="home">
<Header title="Signals" />
<Content>
<Typography>TODO</Typography>
</Content>
</Page>
),
element: <SignalsDebugPage />,
})
.render();
yarn.lock
+7
View File
@@ -7899,6 +7899,7 @@ __metadata:
resolution: "@backstage/plugin-notifications-backend@workspace:plugins/notifications-backend"
dependencies:
"@backstage/backend-common": "workspace:^"
"@backstage/backend-defaults": "workspace:^"
"@backstage/backend-plugin-api": "workspace:^"
"@backstage/backend-test-utils": "workspace:^"
"@backstage/catalog-client": "workspace:^"
@@ -7906,10 +7907,14 @@ __metadata:
"@backstage/cli": "workspace:^"
"@backstage/config": "workspace:^"
"@backstage/errors": "workspace:^"
"@backstage/plugin-auth-backend": "workspace:^"
"@backstage/plugin-auth-backend-module-guest-provider": "workspace:^"
"@backstage/plugin-auth-node": "workspace:^"
"@backstage/plugin-events-backend": "workspace:^"
"@backstage/plugin-events-node": "workspace:^"
"@backstage/plugin-notifications-common": "workspace:^"
"@backstage/plugin-notifications-node": "workspace:^"
"@backstage/plugin-signals-backend": "workspace:^"
"@backstage/plugin-signals-node": "workspace:^"
"@types/express": ^4.17.6
"@types/supertest": ^2.0.8
@@ -9276,10 +9281,12 @@ __metadata:
resolution: "@backstage/plugin-signals-backend@workspace:plugins/signals-backend"
dependencies:
"@backstage/backend-common": "workspace:^"
"@backstage/backend-defaults": "workspace:^"
"@backstage/backend-plugin-api": "workspace:^"
"@backstage/cli": "workspace:^"
"@backstage/config": "workspace:^"
"@backstage/plugin-auth-node": "workspace:^"
"@backstage/plugin-events-backend": "workspace:^"
"@backstage/plugin-events-node": "workspace:^"
"@backstage/plugin-signals-node": "workspace:^"
"@backstage/types": "workspace:^"