fix: Show session state in session viewer again

Due to a bug, the session state wasn't displayed anymore. Instead, it was spinning until the session was ready.
DSD-DBS · Nov 19, 2024 · 544124d · 544124d
1 parent 1fa7449
commit 544124d
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 73 deletions.
diff --git a/Makefile b/Makefile
@@ -263,7 +263,7 @@ synchronize-rsa-keys:
 	$(MAKE) -C backend import-rsa-key
 
 	rm /tmp/private.key
-	echo "Please restart the local backend to apply the new RSA key."
+	$(MAKE) -C backend trigger-reload;
 
 openapi:
 	$(MAKE) -C backend openapi

diff --git a/backend/Makefile b/backend/Makefile
@@ -99,6 +99,9 @@ psql:
 
 clear:
 	echo "DROP DATABASE $(DB_NAME); CREATE DATABASE $(DB_NAME);" | docker run -e PGPASSWORD=$(DB_PASSWORD) -i --network host --entrypoint="psql" postgres:latest -h 'localhost' -p $(DB_PORT) -U '$(DB_USER)' postgres
+	$(MAKE) trigger-reload
+
+trigger-reload:
 	touch trigger_reload.yml && rm trigger_reload.yml
 
 load: clear

diff --git a/frontend/src/app/sessions/service/session.service.ts b/frontend/src/app/sessions/service/session.service.ts
@@ -138,7 +138,7 @@ export class SessionService {
               text: 'Session is pending',
               info: [
                 'The session preparation is completed, but the session is pending.',
-                'Depending on the load and the infrastructure, it may take until all necessary information for the session is available.',
+                'It may take a while until all necessary information for the session is available.',
                 'Take a moment to make some tea and return shortly.',
               ].join(' '),
               css: 'warning',

diff --git a/frontend/src/app/sessions/session/session-viewer.service.ts b/frontend/src/app/sessions/session/session-viewer.service.ts
@@ -51,27 +51,27 @@ export class SessionViewerService {
       timer(0, 3000)
         .pipe(
           switchMap(() => this.sessionsService.getSession(sessionID)),
-          takeWhile(
+          map(
             (session) =>
-              !this.sessionService.beautifyState(
-                session.preparation_state,
-                session.state,
-              ).success,
-            true,
+              [
+                session,
+                this.sessionService.beautifyState(
+                  session.preparation_state,
+                  session.state,
+                ).success,
+              ] as [Session, boolean],
           ),
+          takeWhile(([_, success]) => !success, true),
         )
-        .subscribe((session) => {
-          if (
-            this.sessionService.beautifyState(
-              session.preparation_state,
-              session.state,
-            ).success
-          ) {
+        .subscribe(([session, success]) => {
+          if (success) {
             this.sessionsService
               .getSessionConnectionInformation(session.id)
               .subscribe((connectionInfo) => {
                 this._connectToSession(session, connectionInfo.payload);
               });
+          } else {
+            this.updateOrInsertSession(session);
           }
         }),
     );
@@ -81,7 +81,7 @@ export class SessionViewerService {
     session: Session,
     connectionInfo: SessionConnectionInformation,
   ): void {
-    const viewerSession = session as ViewerSession;
+    this.sessionService.setConnectionInformation(connectionInfo);
 
     if (!connectionInfo.redirect_url) {
       this.toastService.showError(
@@ -91,24 +91,11 @@ export class SessionViewerService {
       return;
     }
 
-    this.sessionService.setConnectionInformation(connectionInfo);
-    if (!this._sessions.value?.length) {
-      viewerSession.focused = true;
-    } else {
-      viewerSession.focused = false;
-    }
-    viewerSession.safeResourceURL =
-      this.domSanitizer.bypassSecurityTrustResourceUrl(
-        connectionInfo.redirect_url,
-      );
-
-    if (session.connection_method?.type === 'guacamole') {
-      viewerSession.reloadToResize = true;
-    } else {
-      viewerSession.reloadToResize = false;
-    }
+    const safeResourceURL = this.domSanitizer.bypassSecurityTrustResourceUrl(
+      connectionInfo.redirect_url,
+    );
 
-    this.insertViewerSession(viewerSession);
+    this.updateOrInsertSession(session, safeResourceURL);
   }
 
   focusSession(session: Session): void {
@@ -188,10 +175,28 @@ export class SessionViewerService {
     }, 100);
   }
 
-  private insertViewerSession(viewerSession: ViewerSession): void {
+  private updateOrInsertSession(
+    session: Session,
+    safeResourceURL?: SafeResourceUrl,
+  ): void {
     const currentSessions = this._sessions.value;
 
+    const viewerSession: ViewerSession = {
+      ...session,
+      focused: false,
+      safeResourceURL: safeResourceURL,
+      reloadToResize: false,
+      fullscreen: false,
+      disabled: false,
+    };
+
+    if (session.connection_method?.type === 'guacamole') {
+      viewerSession.reloadToResize = true;
+    }
+
     if (currentSessions === undefined) {
+      viewerSession.focused = true;
+
       this._sessions.next([viewerSession]);
     } else {
       const index = currentSessions.findIndex(
@@ -200,7 +205,11 @@ export class SessionViewerService {
       if (index === -1) {
         this._sessions.next([...currentSessions, viewerSession]);
       } else {
-        currentSessions[index] = viewerSession;
+        currentSessions[index] = {
+          ...currentSessions[index],
+          ...session,
+          safeResourceURL,
+        };
         this._sessions.next(currentSessions);
       }
     }

diff --git a/...end/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html b/...end/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html
@@ -45,6 +45,9 @@ <h2 class="text-xl font-medium">No active sessions</h2>
     </div>
   } @else if ((sessions | async)?.length !== 0) {
     @for (session of sessions | async; track session.id) {
+      @let sessionState =
+        sessionService.beautifyState(session.preparation_state, session.state);
+
       <div class="collab-card">
         <div class="ml-[-10px] flex min-h-12 items-center pb-2">
           <mat-checkbox
@@ -90,33 +93,11 @@ <h3 class="text-balance font-bold leading-tight">
         <div class="mb-1 space-y-1.5">
           <h3
             class="flex items-center justify-center gap-2 rounded py-1 text-center !text-white"
-            [ngClass]="
-              sessionService.beautifyState(
-                session.preparation_state,
-                session.state
-              ).css
-            "
-            [matTooltip]="
-              sessionService.beautifyState(
-                session.preparation_state,
-                session.state
-              ).info
-            "
+            [ngClass]="sessionState.css"
+            [matTooltip]="sessionState.info"
           >
-            <mat-icon
-              >{{
-                sessionService.beautifyState(
-                  session.preparation_state,
-                  session.state
-                ).icon
-              }}
-            </mat-icon>
-            {{
-              sessionService.beautifyState(
-                session.preparation_state,
-                session.state
-              ).text
-            }}
+            <mat-icon>{{ sessionState.icon }}</mat-icon>
+            {{ sessionState.text }}
           </h3>
           @let remainingMinutes = minutesUntilSessionTermination(session);
           @if (remainingMinutes !== null && remainingMinutes < 30) {
@@ -192,12 +173,7 @@ <h3 class="text-balance font-bold leading-tight">
             mat-button
             color="primary"
             (click)="openConnectDialog(session)"
-            [disabled]="
-              !sessionService.beautifyState(
-                session.preparation_state,
-                session.state
-              ).success
-            "
+            [disabled]="!sessionState.success"
           >
             Connect
             <mat-icon>open_in_browser</mat-icon>
@@ -219,12 +195,7 @@ <h3 class="text-balance font-bold leading-tight">
               mat-button
               color="primary"
               (click)="uploadFileDialog(session)"
-              [disabled]="
-                !sessionService.beautifyState(
-                  session.preparation_state,
-                  session.state
-                ).success
-              "
+              [disabled]="!sessionState.success"
             >
               File browser
               <mat-icon>insert_drive_file</mat-icon>