added downloading of a file from a vm (#661)

* added downloading of a file from a vm

package.json

@@ -2,6 +2,10 @@
   "name": "player.vm.console.ui",
   "version": "3.0.5",
   "license": "MIT",
+  "config": {
+    "openapiArgs": "--additional-properties ngVersion=17 --additional-properties modelPropertyNaming=original --type-mappings=DateTime=string",
+    "deleteGeneratedCommand": "rimraf src/app/generated/vm-api/"
+  },
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -10,7 +14,7 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "swagger:gen": "curl --insecure http://localhost:4302/swagger/v1/swagger.json --output swagger.json && node_modules/@openapitools/openapi-generator-cli/bin/openapi-generator generate -i ./swagger.json -g typescript-angular -o src/app/generated/vm-api --additional-properties ngVersion=9.1 --additional-properties useRxJS6=true --additional-properties modelPropertyNaming=original",
-    "swagger:gen-win": "docker run --rm -v %CD%:/local openapitools/openapi-generator-cli:v4.3.1 generate -i http://host.docker.internal:4302/swagger/v1/swagger.json?format=openapi -g typescript-angular -o /local/src/app/generated/vm-api --additional-properties ngVersion=9.1 --additional-properties useRxJS6=true --additional-properties modelPropertyNaming=original --type-mappings=DateTime=Date"
+    "swagger:gen-docker": "cross-var $npm_package_config_deleteGeneratedCommand && cross-env-shell docker run --rm -v $INIT_CWD:/local openapitools/openapi-generator-cli:v6.2.0 generate -i http://host.docker.internal:4302/swagger/v1/swagger.json?format=openapi -g typescript-angular -o /local/src/app/generated/vm-api $npm_package_config_openapiArgs"
   },
   "private": true,
   "dependencies": {
@@ -51,6 +55,8 @@
     "@types/jquery": "^3.5.6",
     "@types/node": "^16.18.74",
     "codelyzer": "^6.0.2",
+    "cross-env": "^7.0.3",
+    "cross-var": "^1.1.0",
     "jasmine-core": "^3.8.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.3.4",

src/app/components/options-bar/options-bar.component.html

@@ -184,7 +184,22 @@
                   "
                   matTooltipPosition="after"
                 >
-                  Send File to VM
+                  Send File To VM
+                </span>
+              </button>
+              <button
+                *ngIf="isAdmin$ | async"
+                mat-menu-item
+                (click)="downloadFileFromVm()"
+                [disabled]="!uploadEnabled || uploading"
+              >
+                <span
+                  [matTooltip]="
+                    uploadEnabled ? '' : 'VM Credentials must be entered'
+                  "
+                  matTooltipPosition="after"
+                >
+                  Download File From VM
                 </span>
               </button>
               <!-- mount ISO -->

src/app/components/options-bar/options-bar.component.ts

@@ -14,7 +14,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
 import { ComnSettingsService } from '@cmusei/crucible-common';
 import { Observable, Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { map, take, takeUntil, tap } from 'rxjs/operators';
 import { VsphereVirtualMachine } from '../../generated/vm-api';
 import { NotificationData } from '../../models/notification/notification-model';
 import { IsoResult } from '../../models/vm/iso-result';
@@ -27,7 +27,7 @@ import { DialogService } from '../../services/dialog/dialog.service';
 import { NotificationService } from '../../services/notification/notification.service';
 import { SignalRService } from '../../services/signalr/signalr.service';
 import { VsphereService } from '../../state/vsphere/vsphere.service';
-import { AsyncPipe } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -72,6 +72,7 @@ export class KeysPipe implements PipeTransform {
     KeysPipe,
     MatSlideToggleModule,
     MatLabel,
+    NgIf,
   ],
 })
 export class OptionsBarComponent implements OnInit, OnDestroy {
@@ -97,6 +98,7 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
   vmResolutionsOptions: VmResolution[];
   showConnectedUsers = false;
   currentVmUsers$: Observable<string[]>;
+  isAdmin$: Observable<boolean>;
   private copyTryCount: number;
   private destroy$ = new Subject();
 
@@ -146,6 +148,10 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
     this.vsphereService.vmResolution
       .pipe(takeUntil(this.destroy$))
       .subscribe((res) => (this.currentVmContainerResolution = res));
+
+    this.isAdmin$ = this.vmService
+      .getVmPermissions(this.vmId)
+      .pipe(map((x) => x.includes('ViewAdmin')));
   }
 
   ngOnDestroy() {
@@ -286,8 +292,9 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
         }
       }
       this.vsphereService.verifyCredentials(this.vmId).subscribe(
-        (response) => {
+        () => {
           this.uploadEnabled = true;
+          this.dialogService.message('Credentials Verified', '');
         },
         (error: HttpErrorResponse) => {
           // error.error.title contains the relevant message
@@ -337,6 +344,22 @@ export class OptionsBarComponent implements OnInit, OnDestroy {
     );
   }
 
+  downloadFileFromVm() {
+    this.dialogService
+      .getFileUploadInfo('Download File Settings', {
+        data: { showCredentials: false },
+      })
+      .subscribe((enteredInfo) => {
+        const filePath = enteredInfo['filepath'];
+        this.vsphereService.getVmFileUrl(this.vmId, filePath).subscribe((x) => {
+          const link = document.createElement('a');
+          link.href = x.url;
+          link.download = x.fileName;
+          link.click();
+        });
+      });
+  }
+
   startIsoMount() {
     // refresh the iso list
     this.retrievingIsos = true;

src/app/components/shared/file-upload-info-dialog/file-upload-info-dialog.component.html

@@ -7,23 +7,25 @@ <h1 mat-dialog-title>{{ title }}</h1>
 <form (ngSubmit)="done()">
   <div class="d-flex flex-column align-items-center">
     <mat-form-field>
-      <mat-label>Destination File Path</mat-label>
+      <mat-label>File Path</mat-label>
       <input matInput tabIndex="1" name="filepath" [(ngModel)]="filepath" />
     </mat-form-field>
-    <mat-form-field>
-      <mat-label>VM Username</mat-label>
-      <input matInput tabIndex="2" name="username" [(ngModel)]="username" />
-    </mat-form-field>
-    <mat-form-field>
-      <mat-label>VM Password</mat-label>
-      <input
-        matInput
-        type="password"
-        tabIndex="3"
-        name="password"
-        [(ngModel)]="password"
-      />
-    </mat-form-field>
+    <ng-container *ngIf="showCredentials">
+      <mat-form-field>
+        <mat-label>VM Username</mat-label>
+        <input matInput tabIndex="2" name="username" [(ngModel)]="username" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>VM Password</mat-label>
+        <input
+          matInput
+          type="password"
+          tabIndex="3"
+          name="password"
+          [(ngModel)]="password"
+        />
+      </mat-form-field>
+    </ng-container>
   </div>
   <mat-dialog-actions class="justify-content-around">
     <button mat-stroked-button (click)="close()" tabIndex="4">Cancel</button>

src/app/components/shared/file-upload-info-dialog/file-upload-info-dialog.component.ts

@@ -12,6 +12,7 @@ import { MatButton } from '@angular/material/button';
 import { MatInput } from '@angular/material/input';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'file-upload-info-dialog',
@@ -25,6 +26,7 @@ import { FormsModule } from '@angular/forms';
     MatInput,
     MatDialogActions,
     MatButton,
+    NgIf,
   ],
 })
 export class FileUploadInfoDialogComponent {
@@ -33,10 +35,15 @@ export class FileUploadInfoDialogComponent {
   public password = '';
   public filepath = '';
 
+  public showCredentials = true;
+
   constructor(
     @Inject(MAT_DIALOG_DATA) data,
     private dialogRef: MatDialogRef<FileUploadInfoDialogComponent>,
   ) {
+    if (data?.showCredentials != null) {
+      this.showCredentials = data.showCredentials;
+    }
     this.dialogRef.disableClose = true;
   }
 

src/app/generated/vm-api/.openapi-generator-ignore

@@ -1,6 +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.
-
 # OpenAPI Generator Ignore
 # Generated by openapi-generator https://github.com/openapitools/openapi-generator
 

src/app/generated/vm-api/.openapi-generator/FILES

@@ -0,0 +1,59 @@
+.gitignore
+.openapi-generator-ignore
+README.md
+api.module.ts
+api/api.ts
+api/callbacks.service.ts
+api/file.service.ts
+api/health.service.ts
+api/proxmox.service.ts
+api/vmUsageLoggingSession.service.ts
+api/vms.service.ts
+api/vsphere.service.ts
+configuration.ts
+encoder.ts
+git_push.sh
+index.ts
+model/bulkPowerOperation.ts
+model/bulkPowerOperationResponse.ts
+model/changeVsphereVirtualMachineNetwork.ts
+model/consoleConnectionInfo.ts
+model/coordinate.ts
+model/coordinateCreateForm.ts
+model/createVmUsageLoggingSessionCommand.ts
+model/editVmUsageLoggingSessionCommand.ts
+model/eventType.ts
+model/fileVmUrlResponse.ts
+model/getFileUrlVsphereVirtualMachine.ts
+model/healthStatus.ts
+model/isoFile.ts
+model/isoResult.ts
+model/models.ts
+model/mountVsphereIso.ts
+model/nicOptions.ts
+model/permissions.ts
+model/powerState.ts
+model/problemDetails.ts
+model/proxmoxConsole.ts
+model/proxmoxVmInfo.ts
+model/proxmoxVmType.ts
+model/setVsphereVirtualMachineResolution.ts
+model/simpleTeam.ts
+model/teamIsoResult.ts
+model/validateVsphereVirtualMachineCredentials.ts
+model/virtualMachineToolsStatus.ts
+model/vm.ts
+model/vmCreateForm.ts
+model/vmMap.ts
+model/vmMapCreateForm.ts
+model/vmMapUpdateForm.ts
+model/vmType.ts
+model/vmUpdateForm.ts
+model/vmUsageLoggingSession.ts
+model/vmUsageReport.ts
+model/vmUser.ts
+model/vmUserTeam.ts
+model/vsphereVirtualMachine.ts
+model/webhookEvent.ts
+param.ts
+variables.ts

src/app/generated/vm-api/.openapi-generator/VERSION

@@ -1 +1 @@
-4.3.1
+6.2.0

src/app/generated/vm-api/README.md

@@ -10,7 +10,7 @@ npm run build
 
 ### publishing
 
-First build the package then run ```npm publish```
+First build the package then run ```npm publish dist``` (don't forget to specify the `dist` folder!)
 
 ### consuming
 
@@ -25,14 +25,14 @@ npm install @ --save
 _without publishing (not recommended):_
 
 ```
-npm install PATH_TO_GENERATED_PACKAGE/-.tgz --save
+npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save
 ```
 
 _It's important to take the tgz file, otherwise you'll get trouble with links on windows_
 
 _using `npm link`:_
 
-In PATH_TO_GENERATED_PACKAGE:
+In PATH_TO_GENERATED_PACKAGE/dist:
 ```
 npm link
 ```
@@ -57,7 +57,6 @@ In your Angular project:
 import { ApiModule } from '';
 import { HttpClientModule } from '@angular/common/http';
 
-
 @NgModule({
     imports: [
         ApiModule,
@@ -76,7 +75,7 @@ export class AppModule {}
 // configuring providers
 import { ApiModule, Configuration, ConfigurationParameters } from '';
 
-export function apiConfigFactory (): Configuration => {
+export function apiConfigFactory (): Configuration {
   const params: ConfigurationParameters = {
     // set configuration parameters here.
   }
@@ -121,7 +120,7 @@ export class AppModule {}
 import { DefaultApi } from '';
 
 export class AppComponent {
-	 constructor(private apiGateway: DefaultApi) { }
+    constructor(private apiGateway: DefaultApi) { }
 }
 ```
 
@@ -137,7 +136,6 @@ import { ApiModule } from 'my-api-path';
 import { ApiModule as OtherApiModule } from 'my-other-api-path';
 import { HttpClientModule } from '@angular/common/http';
 
-
 @NgModule({
   imports: [
     ApiModule,
@@ -154,7 +152,7 @@ export class AppModule {
 
 
 ### Set service base path
-If different than the generated base path, during app bootstrap, you can provide the base path to your service. 
+If different than the generated base path, during app bootstrap, you can provide the base path to your service.
 
 ```
 import { BASE_PATH } from '';
@@ -202,4 +200,27 @@ import { environment } from '../environments/environment';
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
-```  
+```
+
+### Customizing path parameter encoding
+
+Without further customization, only [path-parameters][parameter-locations-url] of [style][style-values-url] 'simple'
+and Dates for format 'date-time' are encoded correctly.
+
+Other styles (e.g. "matrix") are not that easy to encode
+and thus are best delegated to other libraries (e.g.: [@honoluluhenk/http-param-expander]).
+
+To implement your own parameter encoding (or call another library),
+pass an arrow-function or method-reference to the `encodeParam` property of the Configuration-object
+(see [General Usage](#general-usage) above).
+
+Example value for use in your Configuration-Provider:
+```typescript
+new Configuration({
+    encodeParam: (param: Param) => myFancyParamEncoder(param),
+})
+```
+
+[parameter-locations-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#parameter-locations
+[style-values-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values
+[@honoluluhenk/http-param-expander]: https://www.npmjs.com/package/@honoluluhenk/http-param-expander

src/app/generated/vm-api/api.module.ts

@@ -7,7 +7,6 @@ import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core
 import { Configuration } from './configuration';
 import { HttpClient } from '@angular/common/http';
 
-
 import { CallbacksService } from './api/callbacks.service';
 import { FileService } from './api/file.service';
 import { HealthService } from './api/health.service';