fix(webapp): active session connection status in menu (#1115)

Issue: DGW-231
Devolutions · Nov 21, 2024 · 45f396a · 45f396a
1 parent 4cf1e1e
commit 45f396a
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 74 deletions.
diff --git a/webapp/src/client/app/modules/web-client/ard/web-client-ard.component.ts b/webapp/src/client/app/modules/web-client/ard/web-client-ard.component.ts
@@ -57,12 +57,10 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
   @ViewChild('ironGuiElementVnc') ironGuiElement: ElementRef;
 
   screenScale = ScreenScale;
-  currentStatus: ComponentStatus;
   formData: ArdFormDataInput;
   ardError: { kind: string; backtrace: string };
   isFullScreenMode = false;
   showToolbarDiv = true;
-  loading = true;
 
   middleToolbarButtons = [
     {
@@ -111,7 +109,6 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
 
   ngOnInit(): void {
     this.removeWebClientGuiElement();
-    this.initializeStatus();
   }
 
   ngAfterViewInit(): void {
@@ -159,7 +156,7 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
   private initializeStatus(): void {
     this.currentStatus = {
       id: this.webSessionId,
-      isInitialized: false,
+      isInitialized: true,
       isDisabled: false,
       isDisabledByUser: false,
     };
@@ -354,7 +351,7 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
 
   private handleSessionStarted(event: SessionEvent): void {
     this.handleIronRDPConnectStarted();
-    this.currentStatus.isInitialized = true;
+    this.initializeStatus();
   }
 
   private handleSessionEndedOrError(event: SessionEvent): void {

diff --git a/webapp/src/client/app/modules/web-client/rdp/web-client-rdp.component.ts b/webapp/src/client/app/modules/web-client/rdp/web-client-rdp.component.ts
@@ -56,12 +56,10 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
   @ViewChild('ironGuiElement') ironGuiElement: ElementRef;
 
   screenScale = ScreenScale;
-  currentStatus: ComponentStatus;
   formData: RdpFormDataInput;
   rdpError: { kind: string; backtrace: string };
   isFullScreenMode = false;
   showToolbarDiv = true;
-  loading = true;
 
   leftToolbarButtons = [
     {
@@ -124,7 +122,6 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
 
   ngOnInit(): void {
     this.removeWebClientGuiElement();
-    this.initializeStatus();
   }
 
   ngAfterViewInit(): void {
@@ -184,7 +181,7 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
   private initializeStatus(): void {
     this.currentStatus = {
       id: this.webSessionId,
-      isInitialized: false,
+      isInitialized: true,
       isDisabled: false,
       isDisabledByUser: false,
     };
@@ -381,7 +378,7 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
 
   private handleSessionStarted(event: SessionEvent): void {
     this.handleIronRDPConnectStarted();
-    this.currentStatus.isInitialized = true;
+    this.initializeStatus();
   }
 
   private handleSessionEndedOrError(event: SessionEvent): void {

diff --git a/webapp/src/client/app/modules/web-client/ssh/web-client-ssh.component.ts b/webapp/src/client/app/modules/web-client/ssh/web-client-ssh.component.ts
@@ -14,7 +14,7 @@ import { EMPTY, Observable, Subject, from, of, throwError } from 'rxjs';
 import { catchError, map, switchMap, takeUntil } from 'rxjs/operators';
 import { v4 as uuidv4 } from 'uuid';
 
-import { WebClientBaseComponent } from '@shared/bases/base-web-client.component';
+import { WebClientBaseComponent, WebComponentReady } from '@shared/bases/base-web-client.component';
 import { GatewayAlertMessageService } from '@shared/components/gateway-alert-message/gateway-alert-message.service';
 import { SshConnectionParameters } from '@shared/interfaces/connection-params.interfaces';
 import { SSHFormDataInput } from '@shared/interfaces/forms.interfaces';
@@ -34,22 +34,21 @@ import { AnalyticService, ProtocolString } from '@gateway/shared/services/analyt
 import { ExtractedHostnamePort } from '@shared/services/utils/string.service';
 
 @Component({
+  selector: 'gateway-web-client-ssh',
   templateUrl: 'web-client-ssh.component.html',
   styleUrls: ['web-client-ssh.component.scss'],
   providers: [MessageService],
 })
-export class WebClientSshComponent extends WebClientBaseComponent implements OnInit, OnDestroy {
+export class WebClientSshComponent extends WebClientBaseComponent implements WebComponentReady, OnInit, OnDestroy {
   @Input() webSessionId: string;
   @Output() componentStatus: EventEmitter<ComponentStatus> = new EventEmitter<ComponentStatus>();
   @Output() sizeChange: EventEmitter<void> = new EventEmitter<void>();
 
   @ViewChild('sessionSshContainer') sessionContainerElement: ElementRef;
   @ViewChild('webSSHGuiTerminal') webGuiTerminal: ElementRef;
 
-  currentStatus: ComponentStatus;
   formData: SSHFormDataInput;
   clientError: string;
-  loading = true;
 
   rightToolbarButtons = [
     { label: 'Close Session', icon: 'dvl-icon dvl-icon-close', action: () => this.startTerminationProcess() },
@@ -73,9 +72,6 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
   ngOnInit(): void {
     sshLoggingService.setLevel(LoggingLevel.DEBUG);
     this.removeWebClientGuiElement();
-    this.initializeStatus();
-
-    this.initiateRemoteClientListener();
   }
 
   ngOnDestroy(): void {
@@ -89,6 +85,16 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
     super.ngOnDestroy();
   }
 
+  webComponentReady(event: CustomEvent, webSessionId: string): void {
+    if (this.currentStatus.isInitialized || webSessionId !== this.webSessionId) {
+      return;
+    }
+
+    this.remoteTerminal = event.detail.sshTerminal;
+    this.initSessionEventHandler();
+    this.startConnectionProcess();
+  }
+
   startTerminationProcess(): void {
     this.currentStatus.isDisabledByUser = true;
     this.handleSessionEndedOrError(TerminalConnectionStatus.failed);
@@ -100,7 +106,6 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
     if (!this.currentStatus.isInitialized) {
       return;
     }
-    this.currentStatus.isInitialized = false;
     void this.remoteTerminal.close();
   }
 
@@ -126,32 +131,21 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
   private initializeStatus(): void {
     this.currentStatus = {
       id: this.webSessionId,
-      isInitialized: false,
+      isInitialized: true,
       isDisabled: false,
       isDisabledByUser: false,
     };
   }
 
   private disableComponentStatus(): void {
+    if (this.currentStatus.isDisabled) {
+      return;
+    }
+
     this.currentStatus.isDisabled = true;
     this.componentStatus.emit(this.currentStatus);
   }
 
-  private initiateRemoteClientListener(): void {
-    this.remoteTerminalEventListener = this.renderer.listen('window', 'sshInitialized', (event) => {
-      if (this.currentStatus.isInitialized) {
-        return;
-      }
-      this.webComponentReady(event);
-    });
-  }
-
-  private webComponentReady(event): void {
-    this.remoteTerminal = event.detail.sshTerminal;
-    this.initSessionEventHandler();
-    this.startConnectionProcess();
-  }
-
   private startConnectionProcess(): void {
     if (!this.remoteTerminal) {
       return;
@@ -197,6 +191,7 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
 
   private getFormData(): Observable<void> {
     return from(this.webSessionService.getWebSession(this.webSessionId)).pipe(
+      takeUntil(this.destroyed$),
       map((currentWebSession) => {
         this.formData = currentWebSession.data as SSHFormDataInput;
       }),
@@ -248,7 +243,7 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
 
   private handleSessionStarted(): void {
     this.handleClientConnectStarted();
-    this.currentStatus.isInitialized = true;
+    this.initializeStatus();
   }
 
   private handleSessionEndedOrError(status: TerminalConnectionStatus): void {
@@ -267,7 +262,6 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
     this.clientError = this.getMessage(status);
 
     const icon: string = status !== TerminalConnectionStatus.connected ? DVL_WARNING_ICON : DVL_SSH_ICON;
-
     void this.webSessionService.updateWebSessionIcon(this.webSessionId, icon);
   }
 
@@ -285,7 +279,6 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
     this.clientError = typeof error === 'string' ? error : this.getMessage(error);
     console.error(error);
     this.disableComponentStatus();
-
     void this.webSessionService.updateWebSessionIcon(this.webSessionId, DVL_WARNING_ICON);
   }
 

diff --git a/webapp/src/client/app/modules/web-client/telnet/web-client-telnet.component.ts b/webapp/src/client/app/modules/web-client/telnet/web-client-telnet.component.ts
@@ -46,10 +46,8 @@ export class WebClientTelnetComponent extends WebClientBaseComponent implements
   @ViewChild('sessionTelnetContainer') sessionContainerElement: ElementRef;
   @ViewChild('webTelnetGuiTerminal') webGuiTerminal: ElementRef;
 
-  currentStatus: ComponentStatus;
   formData: TelnetFormDataInput;
   clientError: string;
-  loading = true;
 
   rightToolbarButtons = [
     { label: 'Close Session', icon: 'dvl-icon dvl-icon-close', action: () => this.startTerminationProcess() },
@@ -73,9 +71,6 @@ export class WebClientTelnetComponent extends WebClientBaseComponent implements
   ngOnInit(): void {
     telnetLoggingService.setLevel(LoggingLevel.FATAL);
     this.removeWebClientGuiElement();
-    this.initializeStatus();
-
-    this.initiateRemoteClientListener();
   }
 
   ngOnDestroy(): void {
@@ -89,6 +84,16 @@ export class WebClientTelnetComponent extends WebClientBaseComponent implements
     super.ngOnDestroy();
   }
 
+  webComponentReady(event: CustomEvent, webSessionId: string): void {
+    if (this.currentStatus.isInitialized || webSessionId !== this.webSessionId) {
+      return;
+    }
+
+    this.remoteTerminal = event.detail.telnetTerminal;
+    this.initSessionEventHandler();
+    this.startConnectionProcess();
+  }
+
   startTerminationProcess(): void {
     this.currentStatus.isDisabledByUser = true;
     this.sendTerminateSessionCmd();
@@ -125,32 +130,21 @@ export class WebClientTelnetComponent extends WebClientBaseComponent implements
   private initializeStatus(): void {
     this.currentStatus = {
       id: this.webSessionId,
-      isInitialized: false,
+      isInitialized: true,
       isDisabled: false,
       isDisabledByUser: false,
     };
   }
 
   private disableComponentStatus(): void {
+    if (this.currentStatus.isDisabled) {
+      return;
+    }
+
     this.currentStatus.isDisabled = true;
     this.componentStatus.emit(this.currentStatus);
   }
 
-  private initiateRemoteClientListener(): void {
-    this.remoteTerminalEventListener = this.renderer.listen('window', 'telnetInitialized', (event) => {
-      if (this.currentStatus.isInitialized) {
-        return;
-      }
-      this.webComponentReady(event);
-    });
-  }
-
-  private webComponentReady(event): void {
-    this.remoteTerminal = event.detail.telnetTerminal;
-    this.initSessionEventHandler();
-    this.startConnectionProcess();
-  }
-
   private startConnectionProcess(): void {
     if (!this.remoteTerminal) {
       return;
@@ -241,8 +235,7 @@ export class WebClientTelnetComponent extends WebClientBaseComponent implements
 
   private handleSessionStarted(): void {
     this.handleClientConnectStarted();
-    this.currentStatus.isInitialized = true;
-    super.webClientConnectionSuccess();
+    this.initializeStatus();
   }
 
   private handleSessionEndedOrError(status: TerminalConnectionStatus): void {
@@ -272,6 +265,7 @@ export class WebClientTelnetComponent extends WebClientBaseComponent implements
   private handleClientConnectStarted(): void {
     this.loading = false;
     void this.webSessionService.updateWebSessionIcon(this.webSessionId, DVL_TELNET_ICON);
+    super.webClientConnectionSuccess();
   }
 
   private handleTelnetError(error: string): void {

diff --git a/webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.ts b/webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.ts
@@ -57,12 +57,10 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
   @ViewChild('ironGuiElementVnc') ironGuiElement: ElementRef;
 
   screenScale = ScreenScale;
-  currentStatus: ComponentStatus;
   formData: VncFormDataInput;
   clientError: { kind: string; backtrace: string };
   isFullScreenMode = false;
   showToolbarDiv = true;
-  loading = true;
 
   leftToolbarButtons = [
     {
@@ -124,7 +122,6 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
 
   ngOnInit(): void {
     this.removeWebClientGuiElement();
-    this.initializeStatus();
   }
 
   ngAfterViewInit(): void {
@@ -184,7 +181,7 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
   private initializeStatus(): void {
     this.currentStatus = {
       id: this.webSessionId,
-      isInitialized: false,
+      isInitialized: true,
       isDisabled: false,
       isDisabledByUser: false,
     };
@@ -380,7 +377,7 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
 
   private handleSessionStarted(event: SessionEvent): void {
     this.handleIronRDPConnectStarted();
-    this.currentStatus.isInitialized = true;
+    this.initializeStatus();
   }
 
   private handleSessionEndedOrError(event: SessionEvent): void {

diff --git a/webapp/src/client/app/shared/bases/base-web-client.component.ts b/webapp/src/client/app/shared/bases/base-web-client.component.ts
@@ -1,16 +1,28 @@
 import { Directive } from '@angular/core';
-import { BaseComponent } from '@shared/bases/base.component';
 import { GatewayAlertMessageService } from '@shared/components/gateway-alert-message/gateway-alert-message.service';
+import { ComponentStatus } from '@shared/models/component-status.model';
 import { BaseSessionComponent } from '../models/web-session.model';
 import { AnalyticService, ConnectionIdentifier, ProtocolString } from '../services/analytic.service';
 
+export interface WebComponentReady {
+  webComponentReady(event: Event, webSessionId: string): void;
+}
+
 @Directive()
 export abstract class WebClientBaseComponent extends BaseSessionComponent {
   hideSpinnerOnly = false;
   error: string;
+  loading = true;
 
   analyticHandle: ConnectionIdentifier;
 
+  currentStatus: ComponentStatus = {
+    id: undefined,
+    isInitialized: false,
+    isDisabled: false,
+    isDisabledByUser: false,
+  };
+
   protected constructor(
     protected gatewayAlertMessageService: GatewayAlertMessageService,
     protected analyticService: AnalyticService,