From e63f00446b6da5908a330a45952471569ac1022d Mon Sep 17 00:00:00 2001
From: Andrew Schlackman <72105194+sei-aschlackman@users.noreply.github.com>
Date: Tue, 7 May 2024 12:30:16 -0400
Subject: [PATCH 1/2] user follow enhancements

- show last vm when following an inactive user and display inactive status
- only show connected users on same team (or admin)
- added readOnly query param
---
 .../console-page/console-page.component.html  |   6 +-
 .../console-page/console-page.component.ts    |   7 +-
 .../components/console/console.component.html |   4 +-
 .../components/console/console.component.ts   |  11 +-
 .../options-bar/options-bar.component.html    |  50 +++----
 .../options-bar/options-bar.component.ts      |  93 ++++++-------
 .../user-follow-page.component.html           |  10 +-
 .../user-follow-page.component.ts             |  28 +++-
 src/app/components/wmks/wmks.component.ts     |   2 +-
 .../api/vmUsageLoggingSession.service.ts      |  14 +-
 src/app/generated/vm-api/api/vms.service.ts   | 122 ++++++++++--------
 src/app/generated/vm-api/model/models.ts      |   7 +-
 .../generated/vm-api/model/proxmoxVmInfo.ts   |  26 ++++
 .../generated/vm-api/model/proxmoxVmType.ts   |  20 +++
 src/app/generated/vm-api/model/vm.ts          |  15 ++-
 .../generated/vm-api/model/vmCreateForm.ts    |  13 +-
 .../generated/vm-api/model/vmUpdateForm.ts    |  11 +-
 src/app/generated/vm-api/model/vmUser.ts      |   7 +-
 src/app/services/signalr/signalr.service.ts   |  46 +++++--
 src/app/state/vm/vm.service.ts                |  46 ++++++-
 src/app/state/vsphere/vsphere.service.ts      |  12 +-
 21 files changed, 343 insertions(+), 207 deletions(-)
 create mode 100644 src/app/generated/vm-api/model/proxmoxVmInfo.ts
 create mode 100644 src/app/generated/vm-api/model/proxmoxVmType.ts

diff --git a/src/app/components/console-page/console-page.component.html b/src/app/components/console-page/console-page.component.html
index 7275cf4..77c060e 100644
--- a/src/app/components/console-page/console-page.component.html
+++ b/src/app/components/console-page/console-page.component.html
@@ -6,7 +6,11 @@
 <!-- wait for readOnly http call to evaluate before initializing app-console -->
 @if ({ value: readOnly$ | async }; as readOnly) {
   @if (readOnly.value != null) {
-    <app-console [readOnly]="readOnly.value" [vmId]="vmId$ | async">
+    <app-console
+      [readOnly]="vmService.readOnly$ | async"
+      [allowReadOnlyToggle]="vmService.readOnlyToggleable$ | async"
+      [vmId]="vmId$ | async"
+    >
     </app-console>
   }
 }
diff --git a/src/app/components/console-page/console-page.component.ts b/src/app/components/console-page/console-page.component.ts
index ebf740d..7586a11 100644
--- a/src/app/components/console-page/console-page.component.ts
+++ b/src/app/components/console-page/console-page.component.ts
@@ -41,14 +41,15 @@ export class ConsolePageComponent implements OnInit, OnDestroy {
     private signalrRService: SignalRService,
     private vmQuery: VmQuery,
     private titleService: Title,
-    private vmService: VmService,
-    private authService: ComnAuthService,
+    public vmService: VmService,
   ) {}
 
   ngOnInit() {
     this.vmId = this.routerQuery.getParams('id');
 
     this.signalrRService.startConnection().then(() => {
+      this.signalrRService.joinVm(this.vmId);
+
       if (document.hasFocus()) {
         this.signalrRService.setActiveVirtualMachine(this.vmId);
       }
@@ -69,6 +70,8 @@ export class ConsolePageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.signalrRService.leaveVm(this.vmId);
+
     this.unsubscribe$.next(null);
     this.unsubscribe$.complete();
   }
diff --git a/src/app/components/console/console.component.html b/src/app/components/console/console.component.html
index 1c4bc13..bb30d7e 100644
--- a/src/app/components/console/console.component.html
+++ b/src/app/components/console/console.component.html
@@ -25,11 +25,11 @@
       ) {
         <app-options-bar
           [readOnly]="readOnly"
+          [allowReadOnlyToggle]="allowReadOnlyToggle"
           [vm]="vsphereVm$ | async"
           [vmId]="vmId"
-          (readOnlyChanged)="onReadOnlyChanged($event)"
         ></app-options-bar>
-        <app-wmks [readOnly]="readOnlyInternal" [vmId]="vmId"></app-wmks>
+        <app-wmks [readOnly]="readOnly" [vmId]="vmId"></app-wmks>
       }
     }
   }
diff --git a/src/app/components/console/console.component.ts b/src/app/components/console/console.component.ts
index e21b2d1..84be061 100644
--- a/src/app/components/console/console.component.ts
+++ b/src/app/components/console/console.component.ts
@@ -27,6 +27,7 @@ import { OptionsBar2Component } from '../options-bar2/options-bar2.component';
 })
 export class ConsoleComponent {
   @Input({ required: true }) readOnly;
+  @Input({ required: true }) allowReadOnlyToggle;
 
   @Input({ required: true }) set vmId(value: string) {
     this._vmId = value;
@@ -47,18 +48,8 @@ export class ConsoleComponent {
   vsphereVm$: Observable<VsphereVirtualMachine>;
   virtualMachine$: Observable<Vm>;
 
-  readOnlyManual = false;
-
-  get readOnlyInternal() {
-    return this.readOnlyManual || this.readOnly;
-  }
-
   constructor(
     private vsphereQuery: VsphereQuery,
     private vmService: VmService,
   ) {}
-
-  onReadOnlyChanged(event: boolean) {
-    this.readOnlyManual = event;
-  }
 }
diff --git a/src/app/components/options-bar/options-bar.component.html b/src/app/components/options-bar/options-bar.component.html
index 165cad7..6086f44 100644
--- a/src/app/components/options-bar/options-bar.component.html
+++ b/src/app/components/options-bar/options-bar.component.html
@@ -10,7 +10,7 @@
         <mat-icon svgIcon="gear" alt="Gear"></mat-icon>
       </button>
       <span class="ms-1"
-        >{{ vm?.name }}{{ readOnlyInternal ? ' (Read Only)' : '' }}</span
+        >{{ vm?.name }}{{ readOnly ? ' (Read Only)' : '' }}</span
       >
       <mat-menu #mainMenu="matMenu">
         <div>
@@ -21,7 +21,7 @@
           <button mat-menu-item (click)="reconnect()">Reconnect</button>
         </div>
 
-        @if (!readOnly) {
+        @if (allowReadOnlyToggle) {
           <button mat-menu-item (click)="$event.stopPropagation()">
             <mat-slide-toggle
               labelPosition="before"
@@ -37,10 +37,10 @@
           </button>
         }
 
-        @if (!readOnlyInternal) {
+        @if (!readOnly) {
           <div>
             <!-- Resolution -->
-            @if (!vmService.model.isOwner) {
+            @if (!vsphereService.model.isOwner) {
               <button
                 mat-menu-item
                 [matMenuTriggerFor]="resolutionMenu"
@@ -49,10 +49,10 @@
               >
                 <span
                   [matTooltip]="
-                    vmService.model.vmToolsStatus ===
+                    vsphereService.model.vmToolsStatus ===
                     virtualMachineToolsStatus.toolsNotInstalled
                       ? 'VmWare Tools is not installed'
-                      : vmService.model.vmToolsStatus ===
+                      : vsphereService.model.vmToolsStatus ===
                           virtualMachineToolsStatus.toolsNotRunning
                         ? 'VmWare Tools is not running'
                         : ''
@@ -67,9 +67,9 @@
               <button
                 mat-menu-item
                 [disabled]="
-                  vmService.model.vmToolsStatus ===
+                  vsphereService.model.vmToolsStatus ===
                     virtualMachineToolsStatus.toolsNotRunning ||
-                  vmService.model.vmToolsStatus ===
+                  vsphereService.model.vmToolsStatus ===
                     virtualMachineToolsStatus.toolsNotInstalled
                 "
                 (click)="setResolution(currentVmContainerResolution)"
@@ -85,9 +85,9 @@
                 <button
                   mat-menu-item
                   [disabled]="
-                    vmService.model.vmToolsStatus ===
+                    vsphereService.model.vmToolsStatus ===
                       virtualMachineToolsStatus.toolsNotRunning ||
-                    vmService.model.vmToolsStatus ===
+                    vsphereService.model.vmToolsStatus ===
                       virtualMachineToolsStatus.toolsNotInstalled
                   "
                   (click)="setResolution(vmRes)"
@@ -108,10 +108,10 @@
               <button mat-menu-item (click)="reboot()">Reboot</button>
               <div
                 [matTooltip]="
-                  vmService.model.vmToolsStatus ===
+                  vsphereService.model.vmToolsStatus ===
                   virtualMachineToolsStatus.toolsNotInstalled
                     ? 'VmWare Tools is not installed'
-                    : vmService.model.vmToolsStatus ===
+                    : vsphereService.model.vmToolsStatus ===
                         virtualMachineToolsStatus.toolsNotRunning
                       ? 'VmWare Tools is not running'
                       : ''
@@ -121,9 +121,9 @@
                 <button
                   mat-menu-item
                   [disabled]="
-                    vmService.model.vmToolsStatus ===
+                    vsphereService.model.vmToolsStatus ===
                       virtualMachineToolsStatus.toolsNotRunning ||
-                    vmService.model.vmToolsStatus ===
+                    vsphereService.model.vmToolsStatus ===
                       virtualMachineToolsStatus.toolsNotInstalled
                   "
                   (click)="shutdownOS()"
@@ -148,10 +148,10 @@
               <!-- send to VM -->
               <div
                 [matTooltip]="
-                  vmService.model.vmToolsStatus ===
+                  vsphereService.model.vmToolsStatus ===
                   virtualMachineToolsStatus.toolsNotInstalled
                     ? 'VmWare Tools is not installed'
-                    : vmService.model.vmToolsStatus ===
+                    : vsphereService.model.vmToolsStatus ===
                         virtualMachineToolsStatus.toolsNotRunning
                       ? 'VmWare Tools is not running'
                       : ''
@@ -163,9 +163,9 @@
                   (click)="enableFileUpload('VM Send File Settings')"
                   [disabled]="
                     uploading ||
-                    vmService.model.vmToolsStatus ===
+                    vsphereService.model.vmToolsStatus ===
                       virtualMachineToolsStatus.toolsNotRunning ||
-                    vmService.model.vmToolsStatus ===
+                    vsphereService.model.vmToolsStatus ===
                       virtualMachineToolsStatus.toolsNotInstalled
                   "
                   aria-label="warning"
@@ -207,11 +207,11 @@
                 Send Text
               </button>
             </mat-menu>
-            @if (vmService.model.networkCards) {
+            @if (vsphereService.model.networkCards) {
               <span>
                 @if (
-                  vmService.model.canAccessNicConfiguration &&
-                  vmService.model.networkCards.availableNetworks.length > 0
+                  vsphereService.model.canAccessNicConfiguration &&
+                  vsphereService.model.networkCards.availableNetworks.length > 0
                 ) {
                   <button mat-menu-item [matMenuTriggerFor]="main_menu">
                     Network Cards
@@ -219,8 +219,8 @@
                 }
                 <mat-menu #main_menu="matMenu">
                   @for (
-                    mainItem of vmService.model.networkCards.currentNetworks
-                      | keys;
+                    mainItem of vsphereService.model.networkCards
+                      .currentNetworks | keys;
                     track mainItem
                   ) {
                     <button mat-menu-item [matMenuTriggerFor]="sub_menu">
@@ -228,7 +228,7 @@
                     </button>
                     <mat-menu #sub_menu="matMenu">
                       @for (
-                        subItem of vmService.model.networkCards
+                        subItem of vsphereService.model.networkCards
                           .availableNetworks;
                         track subItem
                       ) {
@@ -271,7 +271,7 @@ <h1 class="fs-6">{{ task.taskName }} ... {{ task.progress }}%</h1>
     }
   </div>
 
-  @if (!readOnlyInternal) {
+  @if (!readOnly) {
     <div class="w-50 d-flex justify-content-center">
       <button
         mat-stroked-button
diff --git a/src/app/components/options-bar/options-bar.component.ts b/src/app/components/options-bar/options-bar.component.ts
index fd9cf95..712ebb1 100644
--- a/src/app/components/options-bar/options-bar.component.ts
+++ b/src/app/components/options-bar/options-bar.component.ts
@@ -4,11 +4,9 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import {
   Component,
-  EventEmitter,
   Input,
   OnDestroy,
   OnInit,
-  Output,
   Pipe,
   PipeTransform,
 } from '@angular/core';
@@ -39,6 +37,7 @@ import {
   MatSlideToggleModule,
 } from '@angular/material/slide-toggle';
 import { MatLabel } from '@angular/material/form-field';
+import { VmService } from '../../state/vm/vm.service';
 
 declare var WMKS: any; // needed to check values
 const MAX_COPY_RETRIES = 1;
@@ -79,14 +78,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
   @Input() vm: VsphereVirtualMachine;
   @Input() vmId: string;
   @Input() readOnly: boolean;
-
-  readOnlyManual: boolean;
-
-  get readOnlyInternal() {
-    return this.readOnlyManual || this.readOnly;
-  }
-
-  @Output() readOnlyChanged = new EventEmitter<boolean>();
+  @Input() allowReadOnlyToggle: boolean;
 
   opened = false;
 
@@ -109,17 +101,17 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject();
 
   constructor(
-    public vmService: VsphereService,
+    public vsphereService: VsphereService,
     public settingsService: ComnSettingsService,
     private dialogService: DialogService,
     private notificationService: NotificationService,
     private route: ActivatedRoute,
     private snackBar: MatSnackBar,
     private signalrService: SignalRService,
+    private vmService: VmService,
   ) {}
 
   ngOnInit() {
-    this.readOnlyManual = this.readOnly;
     this.vmResolutionsOptions = [
       { width: 1600, height: 1200 } as VmResolution,
       { width: 1024, height: 768 } as VmResolution,
@@ -141,7 +133,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
 
     this.inFrame = this.inIframe();
 
-    this.vmService.vmClipBoard
+    this.vsphereService.vmClipBoard
       .pipe(takeUntil(this.destroy$))
       .subscribe((data) => {
         if (data !== '') {
@@ -151,7 +143,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
         }
       });
 
-    this.vmService.vmResolution
+    this.vsphereService.vmResolution
       .pipe(takeUntil(this.destroy$))
       .subscribe((res) => (this.currentVmContainerResolution = res));
   }
@@ -174,27 +166,27 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
   }
 
   fullscreen() {
-    if (this.vmService.wmks.isFullScreen()) {
+    if (this.vsphereService.wmks.isFullScreen()) {
       // console.log('browser is fullscreen');
-    } else if (this.vmService.wmks.canFullScreen()) {
+    } else if (this.vsphereService.wmks.canFullScreen()) {
       // console.log('attempting fullscreen');
-      this.vmService.wmks.enterFullScreen();
+      this.vsphereService.wmks.enterFullScreen();
     } else {
       console.log('cannot do fullscreen');
     }
   }
 
   changeNic(adapter, nic) {
-    this.vmService
+    this.vsphereService
       .changeNic(this.vmId, adapter, nic)
       .subscribe((model: VmModel) => {
-        this.vmService.model = model;
+        this.vsphereService.model = model;
       });
   }
 
   cad() {
     console.log('sending CAD');
-    this.vmService.wmks.sendCAD();
+    this.vsphereService.wmks.sendCAD();
   }
 
   enableCopyPaste() {
@@ -221,7 +213,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
 
   disconnect() {
     console.log('disconnect requested');
-    this.vmService.disconnect();
+    this.vsphereService.disconnect();
   }
 
   reconnect() {
@@ -232,37 +224,38 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
 
   connect() {
     console.log('connect requested');
-    this.vmService.connect(this.vmId, this.readOnlyInternal);
+    this.vsphereService.connect(this.vmId, this.readOnly);
   }
 
   poweron() {
     console.log('poweron requested');
-    this.vmService.powerOn(this.vmId);
+    this.vsphereService.powerOn(this.vmId);
   }
 
   poweroff() {
     console.log('poweroff requested');
-    this.vmService.powerOff(this.vmId);
+    this.vsphereService.powerOff(this.vmId);
   }
 
   reboot() {
     console.log('reboot requested');
-    this.vmService.reBoot(this.vmId);
+    this.vsphereService.reBoot(this.vmId);
   }
 
   shutdownOS() {
     console.log('shutdown OS requested');
-    this.vmService.shutdownOS(this.vmId);
+    this.vsphereService.shutdownOS(this.vmId);
   }
 
   enableFileUpload(title) {
-    this.vmService.uploadConfig.username = '';
-    this.vmService.uploadConfig.password = '';
-    this.vmService.uploadConfig.filepath = '';
+    this.vsphereService.uploadConfig.username = '';
+    this.vsphereService.uploadConfig.password = '';
+    this.vsphereService.uploadConfig.filepath = '';
     if (
-      this.vmService.model.vmToolsStatus !==
+      this.vsphereService.model.vmToolsStatus !==
         VirtualMachineToolsStatus.toolsOk &&
-      this.vmService.model.vmToolsStatus !== VirtualMachineToolsStatus.toolsOld
+      this.vsphereService.model.vmToolsStatus !==
+        VirtualMachineToolsStatus.toolsOld
     ) {
       this.dialogService.message(
         'Alert!',
@@ -276,23 +269,23 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
       if (!enteredInfo['username']) {
         return;
       }
-      this.vmService.uploadConfig.username = enteredInfo['username'];
-      this.vmService.uploadConfig.password = enteredInfo['password'];
-      this.vmService.uploadConfig.filepath = enteredInfo['filepath'];
+      this.vsphereService.uploadConfig.username = enteredInfo['username'];
+      this.vsphereService.uploadConfig.password = enteredInfo['password'];
+      this.vsphereService.uploadConfig.filepath = enteredInfo['filepath'];
       if (
-        !this.vmService.uploadConfig.filepath.endsWith('\\') &&
-        !this.vmService.uploadConfig.filepath.endsWith('/')
+        !this.vsphereService.uploadConfig.filepath.endsWith('\\') &&
+        !this.vsphereService.uploadConfig.filepath.endsWith('/')
       ) {
-        if (this.vmService.uploadConfig.filepath.includes('\\')) {
-          this.vmService.uploadConfig.filepath += '\\';
-        } else if (this.vmService.uploadConfig.filepath.includes('/')) {
-          this.vmService.uploadConfig.filepath += '/';
+        if (this.vsphereService.uploadConfig.filepath.includes('\\')) {
+          this.vsphereService.uploadConfig.filepath += '\\';
+        } else if (this.vsphereService.uploadConfig.filepath.includes('/')) {
+          this.vsphereService.uploadConfig.filepath += '/';
         } else {
           this.enableFileUpload('The file path must be an absolute path.');
           return;
         }
       }
-      this.vmService.verifyCredentials(this.vmId).subscribe(
+      this.vsphereService.verifyCredentials(this.vmId).subscribe(
         (response) => {
           this.uploadEnabled = true;
         },
@@ -321,7 +314,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
     });
 
     this.uploading = true;
-    this.vmService.sendFileToVm(this.vmId, fileSelector.files).subscribe(
+    this.vsphereService.sendFileToVm(this.vmId, fileSelector.files).subscribe(
       (response) => {
         this.dialogService.closeAll();
         this.dialogService.message('File Uploaded Successfully', '');
@@ -347,7 +340,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
   startIsoMount() {
     // refresh the iso list
     this.retrievingIsos = true;
-    this.vmService.getIsos(this.vmId).subscribe(
+    this.vsphereService.getIsos(this.vmId).subscribe(
       (isoResult) => {
         this.retrievingIsos = false;
         this.mountIso(isoResult);
@@ -372,12 +365,12 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
         return;
       }
       // mount the iso
-      this.vmService
+      this.vsphereService
         .mountIso(this.vmId, result.path + result.filename)
         .subscribe(
           // refresh the vm model
           (model: VmModel) => {
-            this.vmService.model = model;
+            this.vsphereService.model = model;
           },
         );
     });
@@ -434,8 +427,8 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
   async paste(text: string, timeoutStr: string = '50') {
     const timeout = parseInt(timeoutStr);
     for (const line of text.split('\n')) {
-      this.vmService.wmks.sendInputString(line);
-      this.vmService.wmks.sendInputString('\n');
+      this.vsphereService.wmks.sendInputString(line);
+      this.vsphereService.wmks.sendInputString('\n');
       await new Promise((r) => setTimeout(r, timeout));
     }
   }
@@ -443,7 +436,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
   copyVmClipboard() {
     this.copyTryCount++;
     console.log('Trying to copy.  Count:  ', this.copyTryCount);
-    this.vmService.wmks.grab();
+    this.vsphereService.wmks.grab();
     setTimeout(() => {
       if (this.copyTryCount > MAX_COPY_RETRIES) {
         this.snackBar.open(
@@ -467,7 +460,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
 
   setResolution(vmResolution: VmResolution) {
     console.log('Setting Resolution:  ', vmResolution);
-    this.vmService
+    this.vsphereService
       .setResolution(this.vmId, vmResolution)
       .pipe(take(1))
       .subscribe();
@@ -501,8 +494,6 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
   }
 
   toggleReadOnly(event: MatSlideToggleChange) {
-    this.readOnlyChanged.emit(event.checked);
-    this.readOnlyManual = event.checked;
     this.vmService.setReadOnly(event.checked);
   }
 }
diff --git a/src/app/components/user-follow-page/user-follow-page.component.html b/src/app/components/user-follow-page/user-follow-page.component.html
index 99c5362..df15d86 100644
--- a/src/app/components/user-follow-page/user-follow-page.component.html
+++ b/src/app/components/user-follow-page/user-follow-page.component.html
@@ -6,8 +6,14 @@
 @if (user$ | async; as user) {
   @if (vmId$ | async; as vmId) {
     <div>
-      <h2 class="banner">Following {{ user.name }}</h2>
-      <app-console [readOnly]="true" [vmId]="vmId"></app-console>
+      <h2 class="banner">
+        Following {{ user.name }}{{ !(isActive$ | async) ? ' (inactive)' : '' }}
+      </h2>
+      <app-console
+        [readOnly]="true"
+        [allowReadOnlyToggle]="false"
+        [vmId]="vmId"
+      ></app-console>
     </div>
   } @else {
     <h1 class="center">
diff --git a/src/app/components/user-follow-page/user-follow-page.component.ts b/src/app/components/user-follow-page/user-follow-page.component.ts
index 6e3b6e7..f677e00 100644
--- a/src/app/components/user-follow-page/user-follow-page.component.ts
+++ b/src/app/components/user-follow-page/user-follow-page.component.ts
@@ -11,13 +11,14 @@ import {
 } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { RouterQuery } from '@datorama/akita-ng-router-store';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { debounceTime, map, takeUntil } from 'rxjs/operators';
 import { SignalRService } from '../../services/signalr/signalr.service';
 import { UserQuery } from '../../state/user/user.query';
 import { VsphereQuery } from '../../state/vsphere/vsphere.query';
 import { AsyncPipe } from '@angular/common';
 import { ConsoleComponent } from '../console/console.component';
+import { VmUser } from '../../generated/vm-api';
 
 @Component({
   selector: 'app-user-follow-page',
@@ -28,9 +29,15 @@ import { ConsoleComponent } from '../console/console.component';
   imports: [ConsoleComponent, AsyncPipe],
 })
 export class UserFollowPageComponent implements OnInit, OnDestroy {
-  vmId$ = this.vmQuery.selectActiveId();
+  vmId$: Observable<string>;
+  isActive$ = this.vmQuery.selectActiveId().pipe(
+    map((x) => x != null),
+    debounceTime(100),
+  );
   user$ = this.userQuery.selectActive();
 
+  vmUser: VmUser = {};
+
   unsubscribe$ = new Subject();
 
   constructor(
@@ -48,7 +55,9 @@ export class UserFollowPageComponent implements OnInit, OnDestroy {
     const viewId = this.routerQuery.getParams('viewId');
 
     this.signalrRService.startConnection().then(() => {
-      this.signalrRService.joinUser(userId, viewId);
+      this.signalrRService.joinUser(userId, viewId).then((vmUser: VmUser) => {
+        this.vmUser = vmUser;
+      });
     });
 
     this.userQuery
@@ -57,6 +66,17 @@ export class UserFollowPageComponent implements OnInit, OnDestroy {
       .subscribe((user) => {
         this.titleService.setTitle(`${user.name} - Following`);
       });
+
+    this.vmId$ = this.vmQuery.selectActiveId().pipe(
+      map((x) => {
+        if (x == null) {
+          return this.vmUser?.lastVmId;
+        } else {
+          this.vmUser.lastVmId = x;
+          return x;
+        }
+      }),
+    );
   }
 
   ngOnDestroy(): void {
diff --git a/src/app/components/wmks/wmks.component.ts b/src/app/components/wmks/wmks.component.ts
index 8120d61..67a85e5 100644
--- a/src/app/components/wmks/wmks.component.ts
+++ b/src/app/components/wmks/wmks.component.ts
@@ -26,7 +26,7 @@ declare var WMKS: any; // needed to check values
   styleUrls: ['./wmks.component.scss'],
   standalone: true,
   imports: [MatIcon, AsyncPipe],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class WmksComponent implements OnInit, OnDestroy {
   @Input() readOnly: boolean;
diff --git a/src/app/generated/vm-api/api/vmUsageLoggingSession.service.ts b/src/app/generated/vm-api/api/vmUsageLoggingSession.service.ts
index 843f9a2..f74a5c6 100644
--- a/src/app/generated/vm-api/api/vmUsageLoggingSession.service.ts
+++ b/src/app/generated/vm-api/api/vmUsageLoggingSession.service.ts
@@ -1,8 +1,3 @@
-/*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-*/
-
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
@@ -511,10 +506,10 @@ export class VmUsageLoggingSessionService {
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public getVmUsageCsvFile(id: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<any>;
-    public getVmUsageCsvFile(id: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpResponse<any>>;
-    public getVmUsageCsvFile(id: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpEvent<any>>;
-    public getVmUsageCsvFile(id: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json'}): Observable<any> {
+    public getVmUsageCsvFile(id: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/csv' | 'application/json'}): Observable<any>;
+    public getVmUsageCsvFile(id: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/csv' | 'application/json'}): Observable<HttpResponse<any>>;
+    public getVmUsageCsvFile(id: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/csv' | 'application/json'}): Observable<HttpEvent<any>>;
+    public getVmUsageCsvFile(id: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'text/csv' | 'application/json'}): Observable<any> {
         if (id === null || id === undefined) {
             throw new Error('Required parameter id was null or undefined when calling getVmUsageCsvFile.');
         }
@@ -533,6 +528,7 @@ export class VmUsageLoggingSessionService {
         if (httpHeaderAcceptSelected === undefined) {
             // to determine the Accept header
             const httpHeaderAccepts: string[] = [
+                'text/csv',
                 'application/json'
             ];
             httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
diff --git a/src/app/generated/vm-api/api/vms.service.ts b/src/app/generated/vm-api/api/vms.service.ts
index 78275bf..185286f 100644
--- a/src/app/generated/vm-api/api/vms.service.ts
+++ b/src/app/generated/vm-api/api/vms.service.ts
@@ -1,8 +1,3 @@
-/*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-*/
-
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
@@ -287,6 +282,70 @@ export class VmsService {
         );
     }
 
+    /**
+     * Reboot multiple Virtual Machines
+     * @param bulkPowerOperation 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public bulkReboot(bulkPowerOperation?: BulkPowerOperation, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/plain' | 'application/json' | 'text/json'}): Observable<BulkPowerOperationResponse>;
+    public bulkReboot(bulkPowerOperation?: BulkPowerOperation, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/plain' | 'application/json' | 'text/json'}): Observable<HttpResponse<BulkPowerOperationResponse>>;
+    public bulkReboot(bulkPowerOperation?: BulkPowerOperation, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/plain' | 'application/json' | 'text/json'}): Observable<HttpEvent<BulkPowerOperationResponse>>;
+    public bulkReboot(bulkPowerOperation?: BulkPowerOperation, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'text/plain' | 'application/json' | 'text/json'}): Observable<any> {
+
+        let headers = this.defaultHeaders;
+
+        // authentication (oauth2) required
+        if (this.configuration.accessToken) {
+            const accessToken = typeof this.configuration.accessToken === 'function'
+                ? this.configuration.accessToken()
+                : this.configuration.accessToken;
+            headers = headers.set('Authorization', 'Bearer ' + accessToken);
+        }
+
+        let httpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (httpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'text/plain',
+                'application/json',
+                'text/json'
+            ];
+            httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (httpHeaderAcceptSelected !== undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json',
+            'text/json',
+            'application/_*+json'
+        ];
+        const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            headers = headers.set('Content-Type', httpContentTypeSelected);
+        }
+
+        let responseType: 'text' | 'json' = 'json';
+        if(httpHeaderAcceptSelected && httpHeaderAcceptSelected.startsWith('text')) {
+            responseType = 'text';
+        }
+
+        return this.httpClient.post<BulkPowerOperationResponse>(`${this.configuration.basePath}/api/vms/actions/reboot`,
+            bulkPowerOperation,
+            {
+                responseType: <any>responseType,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * Shutdown multiple Virtual Machines
      * @param bulkPowerOperation 
@@ -748,57 +807,6 @@ export class VmsService {
         );
     }
 
-    /**
-     * Get a proxmox ticket
-     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
-     * @param reportProgress flag to report request and response progress.
-     */
-    public getProxmoxTicket(observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/plain' | 'application/json' | 'text/json'}): Observable<string>;
-    public getProxmoxTicket(observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/plain' | 'application/json' | 'text/json'}): Observable<HttpResponse<string>>;
-    public getProxmoxTicket(observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'text/plain' | 'application/json' | 'text/json'}): Observable<HttpEvent<string>>;
-    public getProxmoxTicket(observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'text/plain' | 'application/json' | 'text/json'}): Observable<any> {
-
-        let headers = this.defaultHeaders;
-
-        // authentication (oauth2) required
-        if (this.configuration.accessToken) {
-            const accessToken = typeof this.configuration.accessToken === 'function'
-                ? this.configuration.accessToken()
-                : this.configuration.accessToken;
-            headers = headers.set('Authorization', 'Bearer ' + accessToken);
-        }
-
-        let httpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
-        if (httpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts: string[] = [
-                'text/plain',
-                'application/json',
-                'text/json'
-            ];
-            httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
-        if (httpHeaderAcceptSelected !== undefined) {
-            headers = headers.set('Accept', httpHeaderAcceptSelected);
-        }
-
-
-        let responseType: 'text' | 'json' = 'json';
-        if(httpHeaderAcceptSelected && httpHeaderAcceptSelected.startsWith('text')) {
-            responseType = 'text';
-        }
-
-        return this.httpClient.get<string>(`${this.configuration.basePath}/api/vms/proxmox`,
-            {
-                responseType: <any>responseType,
-                withCredentials: this.configuration.withCredentials,
-                headers: headers,
-                observe: observe,
-                reportProgress: reportProgress
-            }
-        );
-    }
-
     /**
      * Get a map for a specific team
      * @param teamId The guid of the team to consider
@@ -1403,7 +1411,7 @@ export class VmsService {
     }
 
     /**
-     * Updates a new Virtual Machine
+     * Updates a Virtual Machine
      * Updates a Virtual Machine with the attributes specified  &lt;para /&gt;  Accessible to a User with management permissions on a team the Virtual Machine is in
      * @param id 
      * @param vmUpdateForm The data to update the Virtual Machine with
diff --git a/src/app/generated/vm-api/model/models.ts b/src/app/generated/vm-api/model/models.ts
index 1683359..57d3726 100644
--- a/src/app/generated/vm-api/model/models.ts
+++ b/src/app/generated/vm-api/model/models.ts
@@ -1,8 +1,3 @@
-/*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-*/
-
 export * from './bulkPowerOperation';
 export * from './bulkPowerOperationResponse';
 export * from './changeVsphereVirtualMachineNetwork';
@@ -21,6 +16,8 @@ export * from './permissions';
 export * from './powerState';
 export * from './problemDetails';
 export * from './proxmoxConsole';
+export * from './proxmoxVmInfo';
+export * from './proxmoxVmType';
 export * from './setVsphereVirtualMachineResolution';
 export * from './simpleTeam';
 export * from './teamIsoResult';
diff --git a/src/app/generated/vm-api/model/proxmoxVmInfo.ts b/src/app/generated/vm-api/model/proxmoxVmInfo.ts
new file mode 100644
index 0000000..9fe3339
--- /dev/null
+++ b/src/app/generated/vm-api/model/proxmoxVmInfo.ts
@@ -0,0 +1,26 @@
+/**
+ * Player VM API
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: v1
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+import { ProxmoxVmType } from './proxmoxVmType';
+
+
+export interface ProxmoxVmInfo { 
+    /**
+     * The unique integer Id of the VM in Proxmox
+     */
+    id?: number;
+    /**
+     * The node that this VM is currently running on
+     */
+    node?: string | null;
+    type?: ProxmoxVmType;
+}
+
diff --git a/src/app/generated/vm-api/model/proxmoxVmType.ts b/src/app/generated/vm-api/model/proxmoxVmType.ts
new file mode 100644
index 0000000..f772419
--- /dev/null
+++ b/src/app/generated/vm-api/model/proxmoxVmType.ts
@@ -0,0 +1,20 @@
+/**
+ * Player VM API
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: v1
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type ProxmoxVmType = 'QEMU' | 'LXC';
+
+export const ProxmoxVmType = {
+    QEMU: 'QEMU' as ProxmoxVmType,
+    LXC: 'LXC' as ProxmoxVmType
+};
+
diff --git a/src/app/generated/vm-api/model/vm.ts b/src/app/generated/vm-api/model/vm.ts
index 524156f..0bbeea5 100644
--- a/src/app/generated/vm-api/model/vm.ts
+++ b/src/app/generated/vm-api/model/vm.ts
@@ -1,8 +1,3 @@
-/*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-*/
-
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
@@ -14,6 +9,7 @@ Copyright 2021 Carnegie Mellon University. All Rights Reserved.
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
+import { ProxmoxVmInfo } from './proxmoxVmInfo';
 import { VmType } from './vmType';
 import { PowerState } from './powerState';
 import { ConsoleConnectionInfo } from './consoleConnectionInfo';
@@ -28,6 +24,10 @@ export interface Vm {
      * Url to the Vm\'s console
      */
     url?: string | null;
+    /**
+     * True if this VM\'s Url has not been explicitly set and a default value has been computed
+     */
+    defaultUrl?: boolean;
     /**
      * The Vm\'s name
      */
@@ -55,5 +55,10 @@ export interface Vm {
     hasPendingTasks?: boolean;
     consoleConnectionInfo?: ConsoleConnectionInfo;
     type?: VmType;
+    proxmoxVmInfo?: ProxmoxVmInfo;
+    /**
+     * If false, only allow opening this VM in a new tab
+     */
+    embeddable?: boolean;
 }
 
diff --git a/src/app/generated/vm-api/model/vmCreateForm.ts b/src/app/generated/vm-api/model/vmCreateForm.ts
index 10bc9ad..2e33414 100644
--- a/src/app/generated/vm-api/model/vmCreateForm.ts
+++ b/src/app/generated/vm-api/model/vmCreateForm.ts
@@ -1,8 +1,3 @@
-/*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-*/
-
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
@@ -14,16 +9,22 @@ Copyright 2021 Carnegie Mellon University. All Rights Reserved.
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
+import { ProxmoxVmInfo } from './proxmoxVmInfo';
 import { ConsoleConnectionInfo } from './consoleConnectionInfo';
 
 
 export interface VmCreateForm { 
-    id: string;
+    id?: string | null;
     url?: string | null;
     name: string;
     teamIds: Array<string>;
     userId?: string | null;
     allowedNetworks?: Array<string> | null;
     consoleConnectionInfo?: ConsoleConnectionInfo;
+    proxmoxVmInfo?: ProxmoxVmInfo;
+    /**
+     * If false, only allow opening this VM in a new tab
+     */
+    embeddable?: boolean;
 }
 
diff --git a/src/app/generated/vm-api/model/vmUpdateForm.ts b/src/app/generated/vm-api/model/vmUpdateForm.ts
index da958cc..11c72c1 100644
--- a/src/app/generated/vm-api/model/vmUpdateForm.ts
+++ b/src/app/generated/vm-api/model/vmUpdateForm.ts
@@ -1,8 +1,3 @@
-/*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-*/
-
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
@@ -14,6 +9,7 @@ Copyright 2021 Carnegie Mellon University. All Rights Reserved.
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
+import { ProxmoxVmInfo } from './proxmoxVmInfo';
 import { ConsoleConnectionInfo } from './consoleConnectionInfo';
 
 
@@ -23,5 +19,10 @@ export interface VmUpdateForm {
     userId?: string | null;
     allowedNetworks?: Array<string> | null;
     consoleConnectionInfo?: ConsoleConnectionInfo;
+    proxmoxVmInfo?: ProxmoxVmInfo;
+    /**
+     * If false, only allow opening this VM in a new tab
+     */
+    embeddable?: boolean;
 }
 
diff --git a/src/app/generated/vm-api/model/vmUser.ts b/src/app/generated/vm-api/model/vmUser.ts
index 0864b0f..70c8a2d 100644
--- a/src/app/generated/vm-api/model/vmUser.ts
+++ b/src/app/generated/vm-api/model/vmUser.ts
@@ -1,8 +1,3 @@
-/*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-*/
-
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
@@ -29,5 +24,7 @@ export interface VmUser {
      * Id of the Vm this User is currently viewing, if any
      */
     activeVmId?: string | null;
+    lastVmId?: string | null;
+    lastSeen?: Date | null;
 }
 
diff --git a/src/app/services/signalr/signalr.service.ts b/src/app/services/signalr/signalr.service.ts
index ffa47d7..2e5815b 100644
--- a/src/app/services/signalr/signalr.service.ts
+++ b/src/app/services/signalr/signalr.service.ts
@@ -7,7 +7,7 @@ import { Inject, Injectable } from '@angular/core';
 import { ComnAuthService } from '@cmusei/crucible-common';
 import * as signalR from '@microsoft/signalr';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { BASE_PATH } from '../../generated/vm-api';
+import { BASE_PATH, VmUser } from '../../generated/vm-api';
 import { UserQuery } from '../../state/user/user.query';
 import { UserService } from '../../state/user/user.service';
 import { VsphereService } from '../../state/vsphere/vsphere.service';
@@ -22,6 +22,7 @@ export class SignalRService {
 
   private userId: string;
   private viewId: string;
+  private vmId: string;
   private activeVmId: string;
 
   private apiUrl: string;
@@ -30,7 +31,6 @@ export class SignalRService {
     private authService: ComnAuthService,
     private vmService: VsphereService,
     private userService: UserService,
-    private userQuery: UserQuery,
     @Inject(BASE_PATH) basePath: string,
   ) {
     this.apiUrl = basePath;
@@ -83,28 +83,54 @@ export class SignalRService {
     if (this.activeVmId) {
       this.setActiveVirtualMachine(this.activeVmId);
     }
+
+    if (this.vmId) {
+      this.joinVm(this.vmId);
+    }
   }
 
-  public joinUser(userId: string, viewId: string) {
+  public joinUser(userId: string, viewId: string): Promise<VmUser> {
     this.userId = userId;
     this.viewId = viewId;
 
-    this.startConnection().then(() => {
-      this.hubConnection.invoke('JoinUser', userId, viewId).then((vmUser) => {
-        const user = { id: vmUser.userId, name: vmUser.username };
-        this.userService.add(user);
-        this.userService.setActive(user.id);
-        this.vmService.setActive(vmUser.activeVmId);
-      });
+    return this.startConnection().then(() => {
+      return this.hubConnection
+        .invoke('JoinUser', userId, viewId)
+        .then((vmUser: VmUser) => {
+          const user = { id: vmUser.userId, name: vmUser.username };
+          this.userService.add(user);
+          this.userService.setActive(user.id);
+          this.vmService.setActive(vmUser.activeVmId);
+          return vmUser;
+        });
     });
   }
 
   public leaveUser(userId: string, viewId: string) {
+    this.userId = null;
+    this.viewId = null;
+
     this.startConnection().then(() => {
       this.hubConnection.invoke('LeaveUser', userId, viewId);
     });
   }
 
+  public joinVm(vmId: string) {
+    this.vmId = vmId;
+
+    this.startConnection().then(() => {
+      this.hubConnection.invoke('JoinVm', vmId);
+    });
+  }
+
+  public leaveVm(vmId: string) {
+    this.vmId = null;
+
+    this.startConnection().then(() => {
+      this.hubConnection.invoke('LeaveVm', vmId);
+    });
+  }
+
   public setActiveVirtualMachine(vmId: string) {
     this.activeVmId = vmId;
     this.startConnection().then(() => {
diff --git a/src/app/state/vm/vm.service.ts b/src/app/state/vm/vm.service.ts
index 189db13..57bd945 100644
--- a/src/app/state/vm/vm.service.ts
+++ b/src/app/state/vm/vm.service.ts
@@ -4,12 +4,13 @@ Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 */
 
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 import { Vm, VmsService } from '../../generated/vm-api';
 import { ProxmoxService } from '../../services/proxmox/proxmox.service';
 import { VmQuery } from './vm.query';
 import { VmStore } from './vm.store';
+import { ActivatedRoute, ParamMap, Params, Router } from '@angular/router';
 
 @Injectable({ providedIn: 'root' })
 export class VmService {
@@ -18,10 +19,29 @@ export class VmService {
     private vmsService: VmsService,
     private vmQuery: VmQuery,
     private proxmoxService: ProxmoxService,
+    private route: ActivatedRoute,
+    private router: Router,
   ) {}
 
-  readOnlySubject = new BehaviorSubject(false);
-  readOnly$ = this.readOnlySubject.asObservable();
+  private readOnlyToggleableSubject = new BehaviorSubject(false);
+  readOnlyToggleable$ = this.readOnlyToggleableSubject.asObservable();
+
+  readOnly$ = combineLatest([
+    this.readOnlyToggleable$,
+    this.route.queryParamMap.pipe(
+      map((params: ParamMap) => params.get('readOnly')),
+    ),
+  ]).pipe(
+    map(([readOnlyToggleable, readOnlyQueryParam]) => {
+      if (!readOnlyToggleable) {
+        return true;
+      } else if (readOnlyQueryParam != null) {
+        return readOnlyQueryParam.toLocaleLowerCase() === 'true';
+      } else {
+        return false;
+      }
+    }),
+  );
 
   get(id: string) {
     return this.vmsService.getVm(id).pipe(
@@ -44,7 +64,15 @@ export class VmService {
   }
 
   getVmPermissions(id: string): Observable<string[]> {
-    return this.vmsService.getVmPermissions(id);
+    return this.vmsService.getVmPermissions(id).pipe(
+      tap((x) => {
+        if (x.includes('ReadOnly')) {
+          this.readOnlyToggleableSubject.next(false);
+        } else {
+          this.readOnlyToggleableSubject.next(true);
+        }
+      }),
+    );
   }
 
   sendCtrlAltDel(id: string) {
@@ -70,6 +98,12 @@ export class VmService {
   }
 
   setReadOnly(value: boolean) {
-    this.readOnlySubject.next(value);
+    const queryParams: Params = { readOnly: value };
+
+    this.router.navigate([], {
+      //relativeTo: this.activatedRoute,
+      queryParams,
+      queryParamsHandling: 'merge',
+    });
   }
 }
diff --git a/src/app/state/vsphere/vsphere.service.ts b/src/app/state/vsphere/vsphere.service.ts
index 12f8841..635f7e4 100644
--- a/src/app/state/vsphere/vsphere.service.ts
+++ b/src/app/state/vsphere/vsphere.service.ts
@@ -23,6 +23,7 @@ import {
 } from '../../models/vm/vm-model';
 import { VmStore } from './vsphere.store';
 import { ComnSettingsService } from '@cmusei/crucible-common';
+import { VmService } from '../vm/vm.service';
 
 declare var WMKS: any; // needed to check values
 
@@ -73,9 +74,18 @@ export class VsphereService {
     private vsphereService: ApiVsphereService,
     private vmStore: VmStore,
     public settingsService: ComnSettingsService,
+    private vmService: VmService,
     @Inject(BASE_PATH) basePath: string,
   ) {
     this.apiUrl = basePath;
+
+    this.vmService.readOnly$
+      .pipe(
+        tap((readOnly) => {
+          this.setReadOnly(readOnly);
+        }),
+      )
+      .subscribe();
   }
 
   add(vm: VsphereVirtualMachine) {
@@ -221,7 +231,7 @@ export class VsphereService {
   public setReadOnly(value: boolean) {
     const elem = document.getElementById('mainCanvas');
 
-    if (value) {
+    if (elem && value) {
       this.pointerEvents = elem.style.pointerEvents;
       this.tabIndex = elem.tabIndex;
 

From 62b7f125cda2eb0827278970b98beffbcc875e7c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 16 May 2024 15:16:13 +0000
Subject: [PATCH 2/2] Add missing document markings

---
 .../generated/vm-api/api/vmUsageLoggingSession.service.ts    | 5 +++++
 src/app/generated/vm-api/api/vms.service.ts                  | 5 +++++
 src/app/generated/vm-api/model/models.ts                     | 5 +++++
 src/app/generated/vm-api/model/proxmoxVmInfo.ts              | 5 +++++
 src/app/generated/vm-api/model/proxmoxVmType.ts              | 5 +++++
 src/app/generated/vm-api/model/vm.ts                         | 5 +++++
 src/app/generated/vm-api/model/vmCreateForm.ts               | 5 +++++
 src/app/generated/vm-api/model/vmUpdateForm.ts               | 5 +++++
 src/app/generated/vm-api/model/vmUser.ts                     | 5 +++++
 9 files changed, 45 insertions(+)

diff --git a/src/app/generated/vm-api/api/vmUsageLoggingSession.service.ts b/src/app/generated/vm-api/api/vmUsageLoggingSession.service.ts
index f74a5c6..87b7e2c 100644
--- a/src/app/generated/vm-api/api/vmUsageLoggingSession.service.ts
+++ b/src/app/generated/vm-api/api/vmUsageLoggingSession.service.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
diff --git a/src/app/generated/vm-api/api/vms.service.ts b/src/app/generated/vm-api/api/vms.service.ts
index 185286f..cdea674 100644
--- a/src/app/generated/vm-api/api/vms.service.ts
+++ b/src/app/generated/vm-api/api/vms.service.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
diff --git a/src/app/generated/vm-api/model/models.ts b/src/app/generated/vm-api/model/models.ts
index 57d3726..6bdc502 100644
--- a/src/app/generated/vm-api/model/models.ts
+++ b/src/app/generated/vm-api/model/models.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 export * from './bulkPowerOperation';
 export * from './bulkPowerOperationResponse';
 export * from './changeVsphereVirtualMachineNetwork';
diff --git a/src/app/generated/vm-api/model/proxmoxVmInfo.ts b/src/app/generated/vm-api/model/proxmoxVmInfo.ts
index 9fe3339..638e0d0 100644
--- a/src/app/generated/vm-api/model/proxmoxVmInfo.ts
+++ b/src/app/generated/vm-api/model/proxmoxVmInfo.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
diff --git a/src/app/generated/vm-api/model/proxmoxVmType.ts b/src/app/generated/vm-api/model/proxmoxVmType.ts
index f772419..be6efc0 100644
--- a/src/app/generated/vm-api/model/proxmoxVmType.ts
+++ b/src/app/generated/vm-api/model/proxmoxVmType.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
diff --git a/src/app/generated/vm-api/model/vm.ts b/src/app/generated/vm-api/model/vm.ts
index 0bbeea5..8c5cef6 100644
--- a/src/app/generated/vm-api/model/vm.ts
+++ b/src/app/generated/vm-api/model/vm.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
diff --git a/src/app/generated/vm-api/model/vmCreateForm.ts b/src/app/generated/vm-api/model/vmCreateForm.ts
index 2e33414..143b7c4 100644
--- a/src/app/generated/vm-api/model/vmCreateForm.ts
+++ b/src/app/generated/vm-api/model/vmCreateForm.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
diff --git a/src/app/generated/vm-api/model/vmUpdateForm.ts b/src/app/generated/vm-api/model/vmUpdateForm.ts
index 11c72c1..466333b 100644
--- a/src/app/generated/vm-api/model/vmUpdateForm.ts
+++ b/src/app/generated/vm-api/model/vmUpdateForm.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
diff --git a/src/app/generated/vm-api/model/vmUser.ts b/src/app/generated/vm-api/model/vmUser.ts
index 70c8a2d..10a1e54 100644
--- a/src/app/generated/vm-api/model/vmUser.ts
+++ b/src/app/generated/vm-api/model/vmUser.ts
@@ -1,3 +1,8 @@
+/*
+Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+ Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
+*/
+
 /**
  * Player VM API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)