fix: KVM/SOL disconnect on close (#2196)

Co-authored-by: Mike <mjohanson@gesdate.com>
open-amt-cloud-toolkit · Sep 19, 2024 · 43ecbd4 · 43ecbd4
1 parent 6184fa2
commit 43ecbd4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 35 deletions.
diff --git a/src/app/devices/kvm/kvm.component.html b/src/app/devices/kvm/kvm.component.html
@@ -4,54 +4,44 @@
       <mat-label>Choose encoding type</mat-label>
       <mat-select [(ngModel)]="selected" (ngModelChange)="onEncodingChange($event)">
         @for (encode of encodings; track encode) {
-          <mat-option [value]="encode.value">
-            {{ encode.viewValue }}
-          </mat-option>
+        <mat-option [value]="encode.value">
+          {{ encode.viewValue }}
+        </mat-option>
         }
       </mat-select>
     </mat-form-field>
   </div>
   <div class="flex flex-50 justify-end">
-    @if (deviceState !== 2) {
-      <button mat-flat-button color="primary" style="margin-right: 16px" (click)="connect()">
-        <mat-icon>tv_on</mat-icon>Connect KVM
-      </button>
-    } @else {
-      <button mat-flat-button color="primary" style="margin-right: 16px" (click)="disconnect()">
-        <mat-icon>tv_off</mat-icon>Disconnect KVM
-      </button>
+    @if (deviceState === 0 && isLoading === false) {
+    <button mat-flat-button color="primary" style="margin-right: 16px" (click)="connect()">
+      <mat-icon>tv_on</mat-icon>Connect KVM
+    </button>
+    }@else if (deviceState !== 2 && isLoading === true) {
+    <button mat-flat-button color="primary" style="margin-right: 16px" (click)="disconnect()" disabled>
+      <mat-icon>tv_off</mat-icon>Connecting KVM...
+    </button>
+    }
+    @else {
+    <button mat-flat-button color="primary" style="margin-right: 16px" (click)="disconnect()">
+      <mat-icon>tv_off</mat-icon>Disconnect KVM
+    </button>
     }
     <button mat-flat-button color="primary" (click)="fileInput.click()">
       <mat-icon>upload_file</mat-icon>Attach Disk Image (.iso)
     </button>
     <input hidden (change)="onFileSelected($event)" #fileInput type="file" id="file" accept=".iso, .img" />
     @if (isIDERActive) {
-      <button mat-flat-button color="warn" (click)="onCancelIDER()" style="margin-left: 12px">
-        <mat-icon>stop</mat-icon>Stop IDER
-      </button>
+    <button mat-flat-button color="warn" (click)="onCancelIDER()" style="margin-left: 12px">
+      <mat-icon>stop</mat-icon>Stop IDER
+    </button>
     }
   </div>
 </mat-toolbar>
 @if (isLoading) {
-  <mat-progress-spinner class="spinner" mode="indeterminate"></mat-progress-spinner>
+<mat-progress-spinner class="spinner" mode="indeterminate"></mat-progress-spinner>
 }
 @if (readyToLoadKvm) {
-  <amt-kvm
-    class="kvm"
-    [deviceId]="deviceId"
-    [mpsServer]="mpsServer"
-    [authToken]="authToken"
-    [deviceConnection]="deviceKVMConnection"
-    [selectedEncoding]="selectedEncoding"
-    (deviceStatus)="deviceKVMStatus($event)"></amt-kvm>
+<amt-kvm class="kvm" [deviceId]="deviceId" [mpsServer]="mpsServer" [authToken]="authToken" [deviceConnection]="deviceKVMConnection" [selectedEncoding]="selectedEncoding" (deviceStatus)="deviceKVMStatus($event)"></amt-kvm>
 }
-<amt-ider
-  class="ider"
-  [deviceId]="deviceId"
-  [mpsServer]="mpsServer"
-  [authToken]="authToken"
-  [deviceConnection]="deviceIDERConnection"
-  [cdrom]="diskImage"
-  [floppy]="null"
-  (deviceStatus)="deviceIDERStatus($event)">
+<amt-ider class="ider" [deviceId]="deviceId" [mpsServer]="mpsServer" [authToken]="authToken" [deviceConnection]="deviceIDERConnection" [cdrom]="diskImage" [floppy]="null" (deviceStatus)="deviceIDERStatus($event)">
 </amt-ider>
diff --git a/src/app/devices/kvm/kvm.component.ts b/src/app/devices/kvm/kvm.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  **********************************************************************/
 
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import { MatSnackBar } from '@angular/material/snack-bar'
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router'
@@ -61,7 +61,7 @@ export class KvmComponent implements OnInit, OnDestroy {
   @Output()
   selectedEncoding: EventEmitter<number> = new EventEmitter<number>()
 
-  deviceState = 0
+  deviceState = -1
   results: any
   isLoading = false
   powerState: any = 0
@@ -179,13 +179,20 @@ export class KvmComponent implements OnInit, OnDestroy {
     if (result != null && result) {
       this.readyToLoadKvm = true
       this.getAMTFeatures()
+    } else if (result === false) {
+      this.isLoading = false
+      this.deviceState = 0
     }
     return of(null)
   }
 
   connect(): void {
     this.devicesService.connectKVMSocket.emit(true)
   }
+  @HostListener('window:beforeunload', ['$event'])
+  beforeUnloadHandler() {
+    this.disconnect()
+  }
   disconnect(): void {
     this.devicesService.stopwebSocket.emit(true)
   }
@@ -333,6 +340,7 @@ export class KvmComponent implements OnInit, OnDestroy {
       }
       this.isDisconnecting = false
     }
+
     this.devicesService.deviceState.emit(this.deviceState)
   }
 

diff --git a/src/app/devices/sol/sol.component.ts b/src/app/devices/sol/sol.component.ts
@@ -3,7 +3,16 @@
  * SPDX-License-Identifier: Apache-2.0
  **********************************************************************/
 
-import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter, OnDestroy } from '@angular/core'
+import {
+  Component,
+  OnInit,
+  ViewEncapsulation,
+  Input,
+  Output,
+  EventEmitter,
+  OnDestroy,
+  HostListener
+} from '@angular/core'
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router'
 import { defer, iif, Observable, of, Subscription, throwError } from 'rxjs'
 import { catchError, switchMap, tap } from 'rxjs/operators'
@@ -157,9 +166,17 @@ export class SolComponent implements OnInit, OnDestroy {
   connect(): void {
     this.devicesService.startwebSocket.emit(true)
   }
+
+  @HostListener('window:beforeunload', ['$event'])
+  beforeUnloadHandler() {
+    console.log('Disconnecting KVM')
+    this.disconnect()
+  }
+
   disconnect(): void {
     this.devicesService.stopwebSocket.emit(true)
   }
+
   handlePowerState(powerState: any): Observable<any> {
     this.powerState = powerState
     // If device is not powered on, shows alert to power up device