chore: move signals client to fronend plugin

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>
This commit is contained in:
Heikki Hellgren
2023-12-04 15:00:02 +02:00
parent 01d02b0d3b
commit 5e1a90daa2
20 changed files with 286 additions and 25 deletions
+1
View File
@@ -0,0 +1 @@
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+13
View File
@@ -0,0 +1,13 @@
# signals
Welcome to the signals plugin!
_This plugin was created through the Backstage CLI_
## Getting started
Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/signals](http://localhost:3000/signals).
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
+27
View File
@@ -0,0 +1,27 @@
## API Report File for "@backstage/plugin-signals"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { BackstagePlugin } from '@backstage/core-plugin-api';
import { DiscoveryApi } from '@backstage/core-plugin-api';
import { JsonObject } from '@backstage/types';
import { SignalsApi } from '@backstage/plugin-signals-react';
// @public (undocumented)
export class SignalsClient implements SignalsApi {
// (undocumented)
static create(options: { discoveryApi: DiscoveryApi }): SignalsClient;
// (undocumented)
static instance: SignalsClient | null;
// (undocumented)
subscribe(onMessage: (message: JsonObject) => void, topic: string): void;
// (undocumented)
unsubscribe(topic: string): void;
}
// @public (undocumented)
export const signalsPlugin: BackstagePlugin<{}, {}>;
// (No @packageDocumentation comment for this package)
```
+9
View File
@@ -0,0 +1,9 @@
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: backstage-plugin-signals
title: '@backstage/plugin-signals'
spec:
lifecycle: experimental
type: backstage-frontend-plugin
owner: maintainers
+35
View File
@@ -0,0 +1,35 @@
/*
* 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 React from 'react';
import { createDevApp } from '@backstage/dev-utils';
import { signalsPlugin } from '../src/plugin';
import { Content, Header, Page } from '@backstage/core-components';
import { Typography } from '@material-ui/core';
createDevApp()
.registerPlugin(signalsPlugin)
.addPage({
title: 'Debug',
element: (
<Page themeId="home">
<Header title="Signals" />
<Content>
<Typography>TODO</Typography>
</Content>
</Page>
),
})
.render();
+52
View File
@@ -0,0 +1,52 @@
{
"name": "@backstage/plugin-signals",
"version": "0.0.0",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "Apache-2.0",
"publishConfig": {
"access": "public",
"main": "dist/index.esm.js",
"types": "dist/index.d.ts"
},
"backstage": {
"role": "frontend-plugin"
},
"sideEffects": false,
"scripts": {
"start": "backstage-cli package start",
"build": "backstage-cli package build",
"lint": "backstage-cli package lint",
"test": "backstage-cli package test",
"clean": "backstage-cli package clean",
"prepack": "backstage-cli package prepack",
"postpack": "backstage-cli package postpack"
},
"dependencies": {
"@backstage/core-components": "workspace:^",
"@backstage/core-plugin-api": "workspace:^",
"@backstage/plugin-signals-react": "workspace:^",
"@backstage/theme": "workspace:^",
"@backstage/types": "workspace:^",
"@material-ui/core": "^4.9.13",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.61",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
},
"devDependencies": {
"@backstage/cli": "workspace:^",
"@backstage/core-app-api": "workspace:^",
"@backstage/dev-utils": "workspace:^",
"@backstage/test-utils": "workspace:^",
"@testing-library/jest-dom": "^5.10.1",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
"files": [
"dist"
]
}
+131
View File
@@ -0,0 +1,131 @@
/*
* 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 { SignalsApi } from '@backstage/plugin-signals-react';
import { JsonObject } from '@backstage/types';
import { DiscoveryApi } from '@backstage/core-plugin-api';
/** @public */
export class SignalsClient implements SignalsApi {
static instance: SignalsClient | null = null;
private ws: WebSocket | null = null;
private discoveryApi: DiscoveryApi;
private cbs: Map<string, (message: JsonObject) => void> = new Map();
private queue: JsonObject[] = [];
private reconnectTimeout: any;
static create(options: { discoveryApi: DiscoveryApi }) {
if (!SignalsClient.instance) {
SignalsClient.instance = new SignalsClient(options);
}
return SignalsClient.instance;
}
private constructor(options: { discoveryApi: DiscoveryApi }) {
this.discoveryApi = options.discoveryApi;
}
subscribe(onMessage: (message: JsonObject) => void, topic: string): void {
// Do not allow to subscribe to same topic multiple times
if (this.cbs.has(topic)) {
return;
}
this.cbs.set(topic, onMessage);
this.connect().then(() => {
this.send({ action: 'subscribe', topic });
});
}
unsubscribe(topic: string): void {
this.cbs.delete(topic);
this.send({ action: 'unsubscribe', topic });
}
private send(data?: JsonObject): void {
if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
if (data) {
this.queue.push(data);
}
return;
}
// First send queue
for (const msg of this.queue) {
this.ws!.send(JSON.stringify(msg));
}
this.queue = [];
if (data) {
this.ws!.send(JSON.stringify(data));
}
}
private async connect() {
if (this.ws) {
return;
}
const apiUrl = `${await this.discoveryApi.getBaseUrl('signals')}`;
const url = new URL(apiUrl);
url.protocol = url.protocol === 'http:' ? 'ws' : 'wss';
this.ws = new WebSocket(url.toString());
this.ws.onmessage = (data: MessageEvent) => {
try {
const json = JSON.parse(data.data) as JsonObject;
if (json.topic) {
const cb = this.cbs.get(json.topic as string);
if (cb) {
cb(json.message as JsonObject);
}
}
} catch (e) {
// NOOP
}
};
this.ws.onerror = () => {
this.reconnect();
};
this.ws.onclose = () => {
this.reconnect();
};
while (this.ws.readyState !== WebSocket.OPEN) {
await new Promise(r => setTimeout(r, 10));
}
this.send();
}
private reconnect() {
if (this.reconnectTimeout) {
clearTimeout(this.reconnectTimeout);
}
this.reconnectTimeout = setTimeout(() => {
if (this.ws) {
this.ws.close();
}
this.ws = null;
this.connect().then(() => {
// Resubscribe to existing topics in case we lost connection
for (const topic of this.cbs.keys()) {
this.send({ action: 'subscribe', topic });
}
});
}, 5000);
}
}
+16
View File
@@ -0,0 +1,16 @@
/*
* 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.
*/
export * from './SignalsClient';
+17
View File
@@ -0,0 +1,17 @@
/*
* 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.
*/
export { signalsPlugin } from './plugin';
export * from './api';
+22
View File
@@ -0,0 +1,22 @@
/*
* 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 { signalsPlugin } from './plugin';
describe('signals', () => {
it('should export plugin', () => {
expect(signalsPlugin).toBeDefined();
});
});
+39
View File
@@ -0,0 +1,39 @@
/*
* 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 {
createApiFactory,
createPlugin,
discoveryApiRef,
} from '@backstage/core-plugin-api';
import { signalsApiRef } from '@backstage/plugin-signals-react';
import { SignalsClient } from './api/SignalsClient';
/** @public */
export const signalsPlugin = createPlugin({
id: 'signals',
apis: [
createApiFactory({
api: signalsApiRef,
deps: {
discoveryApi: discoveryApiRef,
},
factory: ({ discoveryApi }) =>
SignalsClient.create({
discoveryApi,
}),
}),
],
});
+16
View File
@@ -0,0 +1,16 @@
/*
* 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 '@testing-library/jest-dom';