Bc 4710 new tldraw manage (#4352)

* Introduce tldraw to sc-server

---------

Co-authored-by: Błażej Szczepanowski <[email protected]>
Co-authored-by: davwas <[email protected]>
Co-authored-by: Tomasz Wiaderek <[email protected]>
Co-authored-by: wiaderwek <[email protected]>
Co-authored-by: Thomas Feldtkeller <[email protected]>
Co-authored-by: mamutmk5 <[email protected]>

.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 AND BSD-3-Clause-Clear, Unlicense
+          allow-dependencies-licenses: 'pkg:npm/parse-mongo-url'

.github/workflows/push.yml

@@ -172,7 +172,7 @@ jobs:
         uses: github/codeql-action/upload-sarif@v2
         with:
           sarif_file: 'trivy-results.sarif'
-  
+
   end-to-end-tests:
     needs:
       - build_and_push

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

@@ -65,7 +65,7 @@
       kubeconfig: ~/.kube/config
       namespace: "{{ NAMESPACE }}"
       template: deployment.yml.j2
-      
+
   - name: Ingress
     kubernetes.core.k8s:
       kubeconfig: ~/.kube/config
@@ -155,3 +155,22 @@
     when:
      - KEDA_ENABLED is defined and KEDA_ENABLED|bool
      - SCALED_PREVIEW_GENERATOR_ENABLED is defined and SCALED_PREVIEW_GENERATOR_ENABLED|bool
+
+  - name: TlDraw server deployment
+    kubernetes.core.k8s:
+      kubeconfig: ~/.kube/config
+      namespace: "{{ NAMESPACE }}"
+      template: tldraw-deployment.yml.j2
+
+  - name: TlDraw server service
+    kubernetes.core.k8s:
+      kubeconfig: ~/.kube/config
+      namespace: "{{ NAMESPACE }}"
+      template: tldraw-server-svc.yml.j2
+
+  - name: Tldraw ingress
+    kubernetes.core.k8s:
+      kubeconfig: ~/.kube/config
+      namespace: "{{ NAMESPACE }}"
+      template: tldraw-ingress.yml.j2
+      apply: yes

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

@@ -0,0 +1,67 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: tldraw-deployment
+  namespace: {{ NAMESPACE }}
+  labels:
+    app: tldraw-server
+    app.kubernetes.io/part-of: schulcloud-verbund
+    app.kubernetes.io/version: {{ SCHULCLOUD_SERVER_IMAGE_TAG }}
+    app.kubernetes.io/name: tldraw-server
+    app.kubernetes.io/component: tldraw
+    app.kubernetes.io/managed-by: ansible
+    git.branch: {{ SCHULCLOUD_SERVER_BRANCH_NAME }}
+    git.repo: {{ SCHULCLOUD_SERVER_REPO_NAME }}
+spec:
+  replicas: {{ TLDRAW_SERVER_REPLICAS|default("1", true) }}
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxSurge: 1
+      #maxUnavailable: 1
+  revisionHistoryLimit: 4
+  paused: false
+  selector:
+    matchLabels:
+      app: tldraw-server
+  template:
+    metadata:
+      labels:
+        app: tldraw-server
+        app.kubernetes.io/part-of: schulcloud-verbund
+        app.kubernetes.io/version: {{ SCHULCLOUD_SERVER_IMAGE_TAG }}
+        app.kubernetes.io/name: tldraw-server
+        app.kubernetes.io/component: tldraw
+        app.kubernetes.io/managed-by: ansible
+        git.branch: {{ SCHULCLOUD_SERVER_BRANCH_NAME }}
+        git.repo: {{ SCHULCLOUD_SERVER_REPO_NAME }}
+    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-ws
+          protocol: TCP
+        - containerPort: 3349
+          name: tldraw-http
+          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("4Gi", true) }}
+          requests:
+            cpu: {{ TLDRAW_EDITOR_CPU_REQUESTS|default("100m", true) }}
+            memory: {{ TLDRAW_EDITOR_MEMORY_REQUESTS|default("150Mi", true) }}

ansible/roles/schulcloud-server-core/templates/tldraw-ingress.yml.j2

@@ -0,0 +1,42 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: {{ NAMESPACE }}-tldraw-ingress
+  namespace: {{ NAMESPACE }}
+  annotations:
+    nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
+    nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
+    nginx.ingress.kubernetes.io/proxy-body-size: "{{ INGRESS_MAX_BODY_SIZE|default("2560") }}m"
+    nginx.org/client-max-body-size: "{{ INGRESS_MAX_BODY_SIZE|default("2560") }}m"
+    # The following properties added with BC-3606.
+    # The header size of the request is too big. For e.g. state and the permanent growing jwt.
+    # Nginx throws away the Location header, resulting in the 502 Bad Gateway.
+    nginx.ingress.kubernetes.io/client-header-buffer-size: 100k
+    nginx.ingress.kubernetes.io/http2-max-header-size: 96k
+    nginx.ingress.kubernetes.io/large-client-header-buffers: 4 100k
+    nginx.ingress.kubernetes.io/proxy-buffer-size: 96k
+{% if CLUSTER_ISSUER is defined %}
+    cert-manager.io/cluster-issuer: {{ CLUSTER_ISSUER }}
+{% endif %}
+
+spec:
+  ingressClassName: nginx
+{% if CLUSTER_ISSUER is defined or (TLS_ENABELD is defined and TLS_ENABELD|bool) %}
+  tls:
+  - hosts:
+      - {{ DOMAIN }}
+{% if CLUSTER_ISSUER is defined %}
+    secretName: {{ DOMAIN }}-tls
+{% endif %}
+{% endif %}
+  rules:
+  - host: {{ DOMAIN }}
+    http:
+      paths:
+      - path: /tldraw-server
+        backend:
+          service:
+            name: tldraw-server-svc
+            port:
+              number: 3345
+        pathType: Prefix

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

@@ -0,0 +1,22 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: tldraw-server-svc
+  namespace: {{ NAMESPACE }}
+  labels:
+    app: tldraw-server
+spec:
+  type: ClusterIP
+  ports:
+    # port for WebSocket connection
+    - port: 3345
+      targetPort: 3345
+      protocol: TCP
+      name: tldraw-ws
+    # port for http managing drawing data
+    - port: 3349
+      targetPort: 3349
+      protocol: TCP
+      name: tldraw-http
+  selector:
+    app: tldraw-server

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

@@ -0,0 +1,50 @@
+/* istanbul ignore file */
+/* eslint-disable no-console */
+import { NestFactory } from '@nestjs/core';
+import { install as sourceMapInstall } from 'source-map-support';
+import { TldrawModule, TldrawWsModule } from '@modules/tldraw';
+import { LegacyLogger, 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';
+import { ExpressAdapter } from '@nestjs/platform-express';
+import express from 'express';
+
+async function bootstrap() {
+	sourceMapInstall();
+
+	const nestExpress = express();
+	const nestExpressAdapter = new ExpressAdapter(nestExpress);
+	const nestApp = await NestFactory.create(TldrawModule, nestExpressAdapter);
+	nestApp.useLogger(await nestApp.resolve(LegacyLogger));
+	nestApp.enableCors();
+
+	const nestAppWS = await NestFactory.create(TldrawWsModule);
+	const wss = new WebSocket.Server({ noServer: true });
+	nestAppWS.useWebSocketAdapter(new WsAdapter(wss));
+	nestAppWS.enableCors();
+	enableOpenApiDocs(nestAppWS, 'docs');
+	const logger = await nestAppWS.resolve(Logger);
+
+	await nestAppWS.init();
+	await nestApp.init();
+
+	// mount instances
+	const rootExpress = express();
+
+	const port = 3349;
+	const basePath = '/api/v3';
+
+	// exposed alias mounts
+	rootExpress.use(basePath, nestExpress);
+	rootExpress.listen(port);
+
+	logger.info(
+		new AppStartLoggable({
+			appName: 'Tldraw server app',
+		})
+	);
+}
+
+void bootstrap();

apps/server/src/config/database.config.ts

@@ -4,9 +4,10 @@ interface GlobalConstants {
 	DB_URL: string;
 	DB_PASSWORD?: string;
 	DB_USERNAME?: string;
+	TLDRAW_DB_URL: string;
 }
 
 const usedGlobals: GlobalConstants = globals;
 
 /** Database URL */
-export const { DB_URL, DB_PASSWORD, DB_USERNAME } = usedGlobals;
+export const { DB_URL, DB_PASSWORD, DB_USERNAME, TLDRAW_DB_URL } = usedGlobals;

apps/server/src/modules/board/board.module.ts

@@ -6,6 +6,8 @@ import { ContentElementFactory } from '@shared/domain';
 import { ConsoleWriterModule } from '@infra/console';
 import { CourseRepo } from '@shared/repo';
 import { LoggerModule } from '@src/core/logger';
+import { DrawingElementAdapterService } from '@modules/tldraw-client/service/drawing-element-adapter.service';
+import { HttpModule } from '@nestjs/axios';
 import { BoardDoRepo, BoardNodeRepo, RecursiveDeleteVisitor } from './repo';
 import {
 	BoardDoAuthorizableService,
@@ -20,7 +22,14 @@ import { BoardDoCopyService, SchoolSpecificFileCopyServiceFactory } from './serv
 import { ColumnBoardCopyService } from './service/column-board-copy.service';
 
 @Module({
-	imports: [ConsoleWriterModule, FilesStorageClientModule, LoggerModule, UserModule, ContextExternalToolModule],
+	imports: [
+		ConsoleWriterModule,
+		FilesStorageClientModule,
+		LoggerModule,
+		UserModule,
+		ContextExternalToolModule,
+		HttpModule,
+	],
 	providers: [
 		BoardDoAuthorizableService,
 		BoardDoRepo,
@@ -37,6 +46,7 @@ import { ColumnBoardCopyService } from './service/column-board-copy.service';
 		BoardDoCopyService,
 		ColumnBoardCopyService,
 		SchoolSpecificFileCopyServiceFactory,
+		DrawingElementAdapterService,
 	],
 	exports: [
 		BoardDoAuthorizableService,

apps/server/src/modules/board/controller/dto/element/any-content-element.response.ts

@@ -1,4 +1,5 @@
 import { ExternalToolElementResponse } from './external-tool-element.response';
+import { DrawingElementResponse } from './drawing-element.response';
 import { FileElementResponse } from './file-element.response';
 import { LinkElementResponse } from './link-element.response';
 import { RichTextElementResponse } from './rich-text-element.response';
@@ -9,7 +10,8 @@ export type AnyContentElementResponse =
 	| LinkElementResponse
 	| RichTextElementResponse
 	| SubmissionContainerElementResponse
-	| ExternalToolElementResponse;
+	| ExternalToolElementResponse
+	| DrawingElementResponse;
 
 export const isFileElementResponse = (element: AnyContentElementResponse): element is FileElementResponse =>
 	element instanceof FileElementResponse;

apps/server/src/modules/board/controller/dto/element/drawing-element.response.ts

@@ -0,0 +1,33 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { ContentElementType } from '@shared/domain';
+import { TimestampsResponse } from '../timestamps.response';
+
+export class DrawingElementContent {
+	constructor({ description }: DrawingElementContent) {
+		this.description = description;
+	}
+
+	@ApiProperty()
+	description: string;
+}
+
+export class DrawingElementResponse {
+	constructor({ id, content, timestamps, type }: DrawingElementResponse) {
+		this.id = id;
+		this.timestamps = timestamps;
+		this.type = type;
+		this.content = content;
+	}
+
+	@ApiProperty({ pattern: '[a-f0-9]{24}' })
+	id: string;
+
+	@ApiProperty({ enum: ContentElementType, enumName: 'ContentElementType' })
+	type: ContentElementType.DRAWING;
+
+	@ApiProperty()
+	timestamps: TimestampsResponse;
+
+	@ApiProperty()
+	content: DrawingElementContent;
+}

apps/server/src/modules/board/controller/dto/element/index.ts

@@ -1,5 +1,6 @@
 export * from './any-content-element.response';
 export * from './create-content-element.body.params';
+export * from './drawing-element.response';
 export * from './external-tool-element.response';
 export * from './file-element.response';
 export * from './link-element.response';

apps/server/src/modules/board/controller/dto/element/update-element-content.body.params.ts

@@ -73,6 +73,12 @@ export class RichTextContentBody {
 	inputFormat!: InputFormat;
 }
 
+export class DrawingContentBody {
+	@IsString()
+	@ApiProperty()
+	description!: string;
+}
+
 export class RichTextElementContentBody extends ElementContentBody {
 	@ApiProperty({ type: ContentElementType.RICH_TEXT })
 	type!: ContentElementType.RICH_TEXT;
@@ -118,6 +124,7 @@ export class ExternalToolElementContentBody extends ElementContentBody {
 
 export type AnyElementContentBody =
 	| FileContentBody
+	| DrawingContentBody
 	| LinkContentBody
 	| RichTextContentBody
 	| SubmissionContainerContentBody

apps/server/src/modules/board/controller/mapper/content-element-response.factory.spec.ts

@@ -1,13 +1,15 @@
 import { NotImplementedException } from '@nestjs/common';
 import {
 	fileElementFactory,
+	drawingElementFactory,
 	linkElementFactory,
 	richTextElementFactory,
 	submissionContainerElementFactory,
 } from '@shared/testing';
 import {
 	FileElementResponse,
 	LinkElementResponse,
+	DrawingElementResponse,
 	RichTextElementResponse,
 	SubmissionContainerElementResponse,
 } from '../dto';
@@ -37,6 +39,14 @@ describe(ContentElementResponseFactory.name, () => {
 		expect(result).toBeInstanceOf(RichTextElementResponse);
 	});
 
+	it('should return instance of DrawingElementResponse', () => {
+		const drawingElement = drawingElementFactory.build();
+
+		const result = ContentElementResponseFactory.mapToResponse(drawingElement);
+
+		expect(result).toBeInstanceOf(DrawingElementResponse);
+	});
+
 	it('should return instance of SubmissionContainerElementResponse', () => {
 		const submissionContainerElement = submissionContainerElementFactory.build();