Bc 4256 integration tldraw

.github/workflows/dependency-review.yml

@@ -13,4 +13,5 @@ jobs:
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v3
         with:
-          allow-licenses: AGPL-3.0-only, LGPL-3.0, MIT, Apache-2.0, BSD-2-Clause, BSD-3-Clause, ISC, X11, 0BSD, GPL-3.0, Unlicense
+          allow-licenses: AGPL-3.0-only, LGPL-3.0, MIT, Apache-2.0, BSD-2-Clause, BSD-3-Clause, ISC, X11, 0BSD, GPL-3.0, BSD-3-Clause AND BSD-3-Clause-Clear, Unlicense
+          allow-dependencies-licenses: 'pkg:npm/parse-mongo-url'

.github/workflows/push.yml

@@ -133,7 +133,7 @@ jobs:
     needs:
       - build_and_push
       - branch_meta
-    uses: hpi-schul-cloud/dof_app_deploy/.github/workflows/deploy.yml@main
+    uses: hpi-schul-cloud/dof_app_deploy/.github/workflows/deploy.yml@BC-4256-Integration-tldraw
     with:
       branch: ${{ needs.branch_meta.outputs.branch }}
     secrets:

ansible/roles/schulcloud-server-tldraw/meta/main.yml

@@ -0,0 +1,9 @@
+galaxy_info:
+  role_name: schulcloud-server-tldraw
+  author: Schul-Cloud Verbund
+  description: tldraw role for the schulcloud-server
+  company: Schul-Cloud Verbund
+  license: license (AGPLv3)
+  min_ansible_version: 2.8
+  galaxy_tags: []
+dependencies: []

ansible/roles/schulcloud-server-tldraw/tasks/main.yml

@@ -0,0 +1,11 @@
+- name: TlDrawServerDeployment
+  kubernetes.core.k8s:
+    kubeconfig: ~/.kube/config
+    namespace: "{{ NAMESPACE }}"
+    template: api-tldraw-deployment.yml.j2
+
+- name: TlDrawWsService
+  kubernetes.core.k8s:
+    kubeconfig: ~/.kube/config
+    namespace: "{{ NAMESPACE }}"
+    template: api-tldraw-svc.yml.j2

ansible/roles/schulcloud-server-tldraw/templates/api-tldraw-deployment.yml.j2

@@ -0,0 +1,50 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: api-tldraw-deployment
+  namespace: {{ NAMESPACE }}
+  labels:
+    app: tldraw
+spec:
+  replicas: {{ TLDRAW_EDITOR_REPLICAS|default("1", true) }}
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxSurge: 1
+      #maxUnavailable: 1
+  revisionHistoryLimit: 4
+  paused: false
+  selector:
+    matchLabels:
+      app: tldraw
+  template:
+    metadata:
+      labels:
+        app: tldraw
+    spec:
+      securityContext:
+        runAsUser: 1000
+        runAsGroup: 1000
+        fsGroup: 1000
+        runAsNonRoot: true
+      containers:
+      - name: tldraw
+        image: {{ SCHULCLOUD_SERVER_IMAGE }}:{{ SCHULCLOUD_SERVER_IMAGE_TAG }}
+        imagePullPolicy: IfNotPresent
+        ports:
+        - containerPort: 3345
+          name: tldraw
+          protocol: TCP
+        envFrom:
+        - configMapRef:
+            name: api-configmap
+        - secretRef:
+            name: api-secret
+        command: ['npm', 'run', 'nest:start:tldraw:prod']
+        resources:
+          limits:
+            cpu: {{ TLDRAW_EDITOR_CPU_LIMITS|default("2000m", true) }}
+            memory: {{ TLDRAW_EDITOR_MEMORY_LIMITS|default("500Mi", true) }}
+          requests:
+            cpu: {{ TLDRAW_EDITOR_CPU_REQUESTS|default("100m", true) }}
+            memory: {{ TLDRAW_EDITOR_MEMORY_REQUESTS|default("50Mi", true) }}

ansible/roles/schulcloud-server-tldraw/templates/api-tldraw-svc.yml.j2

@@ -0,0 +1,16 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: api-tldraw-svc
+  namespace: {{ NAMESPACE }}
+  labels:
+    app: tldraw
+spec:
+  type: ClusterIP
+  ports:
+    - port: 3345
+      targetPort: 3345
+      protocol: TCP
+      name: tldraw
+  selector:
+    app: tldraw

apps/server/src/apps/tldraw.app.ts

@@ -0,0 +1,31 @@
+/* istanbul ignore file */
+/* eslint-disable no-console */
+import { NestFactory } from '@nestjs/core';
+import { install as sourceMapInstall } from 'source-map-support';
+import { TldrawModule } from '@src/modules/tldraw';
+import { Logger } from '@src/core/logger';
+import * as WebSocket from 'ws';
+import { WsAdapter } from '@nestjs/platform-ws';
+import { enableOpenApiDocs } from '@shared/controller/swagger';
+import { AppStartLoggable } from '@src/apps/helpers/app-start-loggable';
+
+async function bootstrap() {
+	sourceMapInstall();
+
+	const nestApp = await NestFactory.create(TldrawModule);
+	const wss = new WebSocket.Server({ noServer: true });
+	nestApp.useWebSocketAdapter(new WsAdapter(wss));
+	nestApp.enableCors();
+	enableOpenApiDocs(nestApp, 'docs');
+
+	const logger = await nestApp.resolve(Logger);
+	await nestApp.init();
+
+	logger.info(
+		new AppStartLoggable({
+			appName: 'Tldraw server app',
+		})
+	);
+}
+
+void bootstrap();

apps/server/src/modules/tldraw/config.ts

@@ -0,0 +1,30 @@
+import { Configuration } from '@hpi-schul-cloud/commons';
+
+export interface TldrawConfig {
+	NEST_LOG_LEVEL: string;
+	INCOMING_REQUEST_TIMEOUT: number;
+	TLDRAW_DB_COLLECTION_NAME: string;
+	TLDRAW_DB_FLUSH_SIZE: string;
+	TLDRAW_DB_MULTIPLE_COLLECTIONS: boolean;
+	CONNECTION_STRING: string;
+	FEATURE_TLDRAW_ENABLED: boolean;
+	TLDRAW_PING_TIMEOUT: number;
+	TLDRAW_GC_ENABLED: number;
+}
+
+const tldrawConnectionString: string = Configuration.get('TLDRAW_DB_URL') as string;
+
+const tldrawConfig = {
+	NEST_LOG_LEVEL: Configuration.get('NEST_LOG_LEVEL') as string,
+	INCOMING_REQUEST_TIMEOUT: Configuration.get('INCOMING_REQUEST_TIMEOUT_API') as number,
+	TLDRAW_DB_COLLECTION_NAME: Configuration.get('TLDRAW__DB_COLLECTION_NAME') as string,
+	TLDRAW_DB_FLUSH_SIZE: Configuration.get('TLDRAW__DB_FLUSH_SIZE') as number,
+	TLDRAW_DB_MULTIPLE_COLLECTIONS: Configuration.get('TLDRAW__DB_MULTIPLE_COLLECTIONS') as boolean,
+	FEATURE_TLDRAW_ENABLED: Configuration.get('FEATURE_TLDRAW_ENABLED') as boolean,
+	CONNECTION_STRING: tldrawConnectionString,
+	TLDRAW_PING_TIMEOUT: Configuration.get('TLDRAW__PING_TIMEOUT') as number,
+	TLDRAW_GC_ENABLED: Configuration.get('TLDRAW__GC_ENABLED') as boolean,
+};
+
+export const SOCKET_PORT = Configuration.get('TLDRAW__SOCKET_PORT') as number;
+export const config = () => tldrawConfig;

apps/server/src/modules/tldraw/controller/api-test/tldraw.ws.api.spec.ts

@@ -0,0 +1,129 @@
+import { WsAdapter } from '@nestjs/platform-ws';
+import { Test } from '@nestjs/testing';
+import WebSocket from 'ws';
+import { TextEncoder } from 'util';
+import { INestApplication } from '@nestjs/common';
+import { TldrawTestModule } from '../..';
+import { TldrawWs } from '../tldraw.ws';
+import { TestConnection } from '../../testing/test-connection';
+
+describe('WebSocketController (WsAdapter)', () => {
+	let app: INestApplication;
+	let gateway: TldrawWs;
+	let ws: WebSocket;
+
+	const gatewayPort = 3346;
+	const wsUrl = TestConnection.getWsUrl(gatewayPort);
+	const clientMessageMock = 'test-message';
+
+	const getMessage = () => new TextEncoder().encode(clientMessageMock);
+
+	beforeAll(async () => {
+		const testingModule = await Test.createTestingModule({
+			imports: [TldrawTestModule],
+		}).compile();
+		gateway = testingModule.get<TldrawWs>(TldrawWs);
+		app = testingModule.createNestApplication();
+		app.useWebSocketAdapter(new WsAdapter(app));
+		await app.init();
+	});
+
+	afterAll(async () => {
+		await app.close();
+	});
+
+	beforeEach(() => {
+		jest.useFakeTimers({ advanceTimers: true, doNotFake: ['setInterval', 'clearInterval', 'setTimeout'] });
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('when tldraw is correctly setup', () => {
+		const setup = async () => {
+			const handleConnectionSpy = jest.spyOn(gateway, 'handleConnection');
+			jest.spyOn(Uint8Array.prototype, 'reduce').mockReturnValueOnce(1);
+
+			ws = await TestConnection.setupWs(wsUrl, 'TEST');
+
+			const { buffer } = getMessage();
+
+			return { handleConnectionSpy, buffer };
+		};
+
+		it(`should handle connection and data transfer`, async () => {
+			const { handleConnectionSpy, buffer } = await setup();
+			ws.send(buffer, () => {});
+
+			expect(handleConnectionSpy).toHaveBeenCalledTimes(1);
+			ws.close();
+		});
+
+		it(`check if client will receive message`, async () => {
+			const { buffer } = await setup();
+			ws.send(buffer, () => {});
+
+			gateway.server.on('connection', (client) => {
+				client.on('message', (payload) => {
+					expect(payload).toBeInstanceOf(ArrayBuffer);
+				});
+			});
+
+			ws.close();
+		});
+	});
+
+	describe('when tldraw doc has multiple clients', () => {
+		const setup = async () => {
+			const handleConnectionSpy = jest.spyOn(gateway, 'handleConnection');
+			ws = await TestConnection.setupWs(wsUrl, 'TEST2');
+			const ws2 = await TestConnection.setupWs(wsUrl, 'TEST2');
+
+			const { buffer } = getMessage();
+
+			return {
+				handleConnectionSpy,
+				ws2,
+				buffer,
+			};
+		};
+
+		it(`should handle 2 connections at same doc and data transfer`, async () => {
+			const { handleConnectionSpy, ws2, buffer } = await setup();
+			ws.send(buffer);
+			ws2.send(buffer);
+
+			expect(handleConnectionSpy).toHaveBeenCalled();
+			expect(handleConnectionSpy).toHaveBeenCalledTimes(2);
+
+			ws.close();
+			ws2.close();
+		});
+	});
+
+	describe('when tldraw is not correctly setup', () => {
+		const setup = async () => {
+			const handleConnectionSpy = jest.spyOn(gateway, 'handleConnection');
+
+			ws = await TestConnection.setupWs(wsUrl);
+
+			return {
+				handleConnectionSpy,
+			};
+		};
+
+		it(`should refuse connection if there is no docName`, async () => {
+			const { handleConnectionSpy } = await setup();
+
+			const { buffer } = getMessage();
+			ws.send(buffer);
+
+			expect(gateway.server).toBeDefined();
+			expect(handleConnectionSpy).toHaveBeenCalled();
+			expect(handleConnectionSpy).toHaveBeenCalledTimes(1);
+
+			ws.close();
+		});
+	});
+});

apps/server/src/modules/tldraw/controller/index.ts

@@ -0,0 +1 @@
+export * from './tldraw.ws';

apps/server/src/modules/tldraw/controller/tldraw.ws.ts

@@ -0,0 +1,48 @@
+import { WebSocketGateway, WebSocketServer, OnGatewayInit, OnGatewayConnection } from '@nestjs/websockets';
+import { Server, WebSocket } from 'ws';
+import { ConfigService } from '@nestjs/config';
+import { TldrawConfig, SOCKET_PORT } from '../config';
+import { WsCloseCodeEnum } from '../types/ws-close-code-enum';
+import { TldrawWsService } from '../service';
+
+@WebSocketGateway(SOCKET_PORT)
+export class TldrawWs implements OnGatewayInit, OnGatewayConnection {
+	@WebSocketServer()
+	server!: Server;
+
+	constructor(
+		private readonly configService: ConfigService<TldrawConfig, true>,
+		private readonly tldrawWsService: TldrawWsService
+	) {}
+
+	public handleConnection(client: WebSocket, request: Request): void {
+		const docName = this.getDocNameFromRequest(request);
+
+		if (docName.length > 0 && this.configService.get<string>('FEATURE_TLDRAW_ENABLED')) {
+			this.tldrawWsService.setupWSConnection(client, docName);
+		} else {
+			client.close(
+				WsCloseCodeEnum.WS_CLIENT_BAD_REQUEST_CODE,
+				'Document name is mandatory in url or Tldraw Tool is turned off.'
+			);
+		}
+	}
+
+	public afterInit(): void {
+		this.tldrawWsService.setPersistence({
+			bindState: async (docName, ydoc) => {
+				await this.tldrawWsService.updateDocument(docName, ydoc);
+			},
+			writeState: async (docName) => {
+				// This is called when all connections to the document are closed.
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+				await this.tldrawWsService.flushDocument(docName);
+			},
+		});
+	}
+
+	private getDocNameFromRequest(request: Request): string {
+		const urlStripped = request.url.replace('/', '');
+		return urlStripped;
+	}
+}