add webinterfaces and shared vms to step component, refactor dashboar…

…d shared vm access
hobbyfarm · Oct 25, 2024 · b8ef131 · b8ef131
1 parent 11fea82
commit b8ef131
Show file tree

Hide file tree

Showing 27 changed files with 770 additions and 204 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -156,6 +156,7 @@ import {
 } from '@cds/core/icon';
 import { ReadonlyTaskComponent } from './scenario/task/readonly-task/readonly-task.component';
 import { TerminalViewComponent } from './step/terminal/terminal-view.component';
+import { WebinterfaceWindowComponent } from './step/terminal/webinterface-window/webinterface-window.component';
 
 ClarityIcons.addIcons(
   plusIcon,
@@ -204,12 +205,23 @@ const appInitializerFn = (appConfig: AppConfigService) => {
   };
 };
 
+export const jwtAllowedDomains = [
+  environment.server.replace(/(^\w+:|^)\/\//, ''),
+];
+
+export function addJwtAllowedDomain(domain: string) {
+  const newDomain = domain.replace(/(^\w+:|^)\/\//, '');
+  if (!jwtAllowedDomains.includes(newDomain)) {
+    jwtAllowedDomains.push(newDomain);
+  }
+}
+
 export function jwtOptionsFactory(): JwtConfig {
   return {
     tokenGetter: () => {
       return localStorage.getItem('hobbyfarm_admin_token');
     },
-    allowedDomains: [environment.server.match(/.*\:\/\/?([^\/]+)/)[1]],
+    allowedDomains: jwtAllowedDomains,
     disallowedRoutes: [
       environment.server.match(/.*\:\/\/?([^\/]+)/)[1] + '/auth/authenticate',
     ],
@@ -296,6 +308,7 @@ export function jwtOptionsFactory(): JwtConfig {
     TaskFormComponent,
     ReadonlyTaskComponent,
     SingleTaskVerificationMarkdownComponent,
+    WebinterfaceWindowComponent,
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/course/course-wizard/course-wizard.component.ts b/src/app/course/course-wizard/course-wizard.component.ts
@@ -154,7 +154,6 @@ export class CourseWizardComponent implements OnChanges, OnInit {
   }
 
   courseHasValidVMCConfiguration(): boolean {
-    console.log(this.editVirtualMachines);
     if (this.editVirtualMachines.length > 0) {
       const validVMSets = this.editVirtualMachines.filter(
         (virtualmachine, i) => {

diff --git a/src/app/dashboards/dashboards.component.ts b/src/app/dashboards/dashboards.component.ts
@@ -6,7 +6,7 @@ import { UserService } from '../data/user.service';
 import { RbacService } from '../data/rbac.service';
 import { ProgressCount } from '../data/progress';
 import { ProgressService } from '../data/progress.service';
-import { VmService } from '../data/vm.service';
+import { AdminVmService } from '../data/admin-vm.service';
 import { Router } from '@angular/router';
 
 @Component({
@@ -33,7 +33,7 @@ export class DashboardsComponent implements OnInit, OnDestroy {
     private userService: UserService,
     private rbacService: RbacService,
     private progressService: ProgressService,
-    private vmService: VmService,
+    private vmService: AdminVmService,
     private router: Router
   ) {}
 

diff --git a/src/app/dashboards/shared-vm-dashboard/shared-vm-dashboard.component.html b/src/app/dashboards/shared-vm-dashboard/shared-vm-dashboard.component.html
@@ -7,8 +7,8 @@
         (click)="setStepOpen(set)"
       >
         <clr-accordion-title>
-          <b>Environment:</b> {{ set.environment }} &nbsp;
-          <b>Count: </b>{{ set.count }}
+          <b>Environment:</b> {{ set.environment }} &nbsp; <b>Count: </b
+          >{{ set.count }}
         </clr-accordion-title>
         <clr-accordion-content *clrIfExpanded>
           <div class="clr-row">
@@ -22,18 +22,15 @@
                     'scenarios.get',
                     'virtualmachineclaims.get'
                   ]"
-                  >Join Session</clr-dg-column
+                  >Access Terminal</clr-dg-column
                 >
                 <clr-dg-column [clrDgField]="'status'">Status</clr-dg-column>
+                <clr-dg-column [clrDgField]="'public_ip'">Name</clr-dg-column>
                 <clr-dg-column [clrDgField]="'public_ip'">IP</clr-dg-column>
                 <clr-dg-column [clrDgField]="'vm_template_id'"
                   >VM-Template</clr-dg-column
                 >
-                <clr-dg-column [clrDgField]="'user'">User</clr-dg-column>
-                <clr-dg-column [clrDgField]="'allocated'"
-                  >Allocated</clr-dg-column
-                >
-                <clr-dg-column [clrDgField]="'tainted'">Tainted</clr-dg-column>
+
                 <clr-dg-column [clrDgField]="'id'">VM Id</clr-dg-column>
                 <clr-dg-column [clrDgField]="'hostname'"
                   >Hostname</clr-dg-column
@@ -59,29 +56,28 @@
                   >
                   <clr-dg-cell class="dashboardCell">
                     <span
-                      *ngIf="vm.status === 'running'"
+                      *ngIf="vm.status === 'running' && !vm.tainted"
                       class="badge badge-success"
                       >{{ vm.status }}</span
                     >
                     <span
-                      *ngIf="vm.status !== 'running'"
+                      *ngIf="vm.status !== 'running' && !vm.tainted"
                       class="badge badge-warning"
                       >{{ vm.status }}</span
                     >
+                    <span
+                      *ngIf="!!vm.tainted"
+                      class="badge badge-warning"
+                      >tainted</span
+                    >
                   </clr-dg-cell>
+                  <clr-dg-cell class="dashboardCell">{{ vm.name }}</clr-dg-cell>
                   <clr-dg-cell class="dashboardCell">{{
                     vm.public_ip
                   }}</clr-dg-cell>
                   <clr-dg-cell class="dashboardCell">{{
                     vm.vm_template_id
                   }}</clr-dg-cell>
-                  <clr-dg-cell class="dashboardCell">{{ vm.user }}</clr-dg-cell>
-                  <clr-dg-cell class="dashboardCell">{{
-                    vm.allocated
-                  }}</clr-dg-cell>
-                  <clr-dg-cell class="dashboardCell">{{
-                    vm.tainted
-                  }}</clr-dg-cell>
                   <clr-dg-cell class="dashboardCell">{{ vm.id }}</clr-dg-cell>
                   <clr-dg-cell class="dashboardCell">{{
                     vm.hostname

diff --git a/src/app/dashboards/shared-vm-dashboard/shared-vm-dashboard.component.ts b/src/app/dashboards/shared-vm-dashboard/shared-vm-dashboard.component.ts
@@ -5,11 +5,15 @@ import {
   VirtualMachine,
   VirtualMachineTypeShared,
 } from 'src/app/data/virtualmachine';
-import { VmService } from 'src/app/data/vm.service';
+import { AdminVmService } from 'src/app/data/admin-vm.service';
 import { VmSet } from 'src/app/data/vmset';
 
+interface DashboardVm extends VirtualMachine {
+  name?: string;
+}
+
 interface dashboardVmSet extends VmSet {
-  setVMs?: VirtualMachine[];
+  setVMs?: DashboardVm[];
   stepOpen?: boolean;
   dynamic: boolean;
 }
@@ -24,7 +28,7 @@ export class SharedVmDashboardComponent implements OnChanges {
   selectedEvent: ScheduledEvent;
 
   constructor(
-    public vmService: VmService,
+    public vmService: AdminVmService,
     private router: Router,
     private cd: ChangeDetectorRef
   ) {}
@@ -50,13 +54,11 @@ export class SharedVmDashboardComponent implements OnChanges {
       .listByScheduledEvent(this.selectedEvent.id)
       .subscribe((vmList) => {
         this.vms = vmList
-          .filter((vm) => vm.vm_type == VirtualMachineTypeShared) // vm.vm_type!="Shared" && vm.user==''
+          .filter((vm) => vm.vm_type == VirtualMachineTypeShared)
           .map((vm) => ({
             ...vm,
           }));
-        if (
-          this.vms.length > 0
-        ) {
+        if (this.vms.length > 0) {
           this.loadVmsFromScheduledEvent();
         }
         this.cd.detectChanges();
@@ -72,6 +74,7 @@ export class SharedVmDashboardComponent implements OnChanges {
       );
       // (shared) vms grouped by environment
       groupedVms.forEach((element, environment) => {
+        element.forEach((vm) => this.setVmName(vm));
         let vmSet: dashboardVmSet = {
           ...new VmSet(),
           base_name: environment,
@@ -87,12 +90,35 @@ export class SharedVmDashboardComponent implements OnChanges {
     }
   }
 
-  openTerminal(vm: VirtualMachine) {
-    const url = this.router.serializeUrl(
-      this.router.createUrlTree(['/terminal', vm.id, vm.ws_endpoint])
+  setVmName(vm: DashboardVm) {
+    vm.name =
+      this.selectedEvent.shared_vms.find((sVM) => sVM.vm_id == vm.id)?.name ??
+      '';
+  }
+
+  openTerminal(vm: DashboardVm) {
+    //build url with params, then use router to navigate to it
+    if (!vm.name) this.setVmName(vm)
+    const queryParams = {
+      vmName: vm.name,
+      vmId: vm.id,
+      wsEndpoint: vm.ws_endpoint,
+    };
+
+    const url = this.router.createUrlTree(
+      ['/terminal', vm.id, vm.ws_endpoint],
+      { queryParams }
     );
-    window.open(url, '_blank');
+    const serializedUrl = this.router.serializeUrl(url);
+
+    window.open(serializedUrl, '_blank');
     return;
+
+    // const url = this.router.serializeUrl(
+    //   this.router.createUrlTree(['/terminal', vm.id, vm.ws_endpoint])
+    // );
+    // window.open(url, '_blank');
+    // return;
   }
 
   groupByEnvironment(vms: VirtualMachine[]) {

diff --git a/src/app/dashboards/vm-dashboard/vm-dashboard.component.html b/src/app/dashboards/vm-dashboard/vm-dashboard.component.html
@@ -45,7 +45,6 @@
                 <clr-dg-column [clrDgField]="'allocated'"
                   >Allocated</clr-dg-column
                 >
-                <clr-dg-column [clrDgField]="'tainted'">Tainted</clr-dg-column>
                 <clr-dg-column [clrDgField]="'id'">VM Id</clr-dg-column>
                 <clr-dg-column [clrDgField]="'hostname'"
                   >Hostname</clr-dg-column
@@ -71,15 +70,20 @@
                   >
                   <clr-dg-cell class="dashboardCell">
                     <span
-                      *ngIf="vm.status === 'running'"
+                      *ngIf="vm.status === 'running' && !vm.tainted"
                       class="badge badge-success"
                       >{{ vm.status }}</span
                     >
                     <span
-                      *ngIf="vm.status !== 'running'"
+                      *ngIf="vm.status !== 'running' && !vm.tainted"
                       class="badge badge-warning"
                       >{{ vm.status }}</span
                     >
+                    <span
+                      *ngIf="!!vm.tainted"
+                      class="badge badge-warning"
+                      >tainted</span
+                    >
                   </clr-dg-cell>
                   <clr-dg-cell class="dashboardCell">{{
                     vm.public_ip
@@ -91,9 +95,6 @@
                   <clr-dg-cell class="dashboardCell">{{
                     vm.allocated
                   }}</clr-dg-cell>
-                  <clr-dg-cell class="dashboardCell">{{
-                    vm.tainted
-                  }}</clr-dg-cell>
                   <clr-dg-cell class="dashboardCell">{{ vm.id }}</clr-dg-cell>
                   <clr-dg-cell class="dashboardCell">{{
                     vm.hostname

diff --git a/src/app/dashboards/vm-dashboard/vm-dashboard.component.ts b/src/app/dashboards/vm-dashboard/vm-dashboard.component.ts
@@ -6,7 +6,7 @@ import { ProgressService } from 'src/app/data/progress.service';
 import { ScheduledEvent } from 'src/app/data/scheduledevent';
 import { UserService } from 'src/app/data/user.service';
 import { VirtualMachine, VirtualMachineTypeShared } from 'src/app/data/virtualmachine';
-import { VmService } from 'src/app/data/vm.service';
+import { AdminVmService } from 'src/app/data/admin-vm.service';
 import { VmSet } from 'src/app/data/vmset';
 import { VmSetService } from 'src/app/data/vmset.service';
 
@@ -26,7 +26,7 @@ export class VmDashboardComponent implements OnChanges {
   selectedEvent: ScheduledEvent;
 
   constructor(
-    public vmService: VmService,
+    public vmService: AdminVmService,
     public vmSetService: VmSetService,
     public userService: UserService,
     public progressService: ProgressService,

diff --git a/src/app/data/Session.ts b/src/app/data/Session.ts
@@ -5,4 +5,5 @@ export class Session {
   keep_course_vm: boolean;
   user: string;
   vm_claim: string[];
+  access_code: string;
 }
diff --git a/src/app/data/admin-vm.service.ts b/src/app/data/admin-vm.service.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { catchError, switchMap } from 'rxjs/operators';
+import { ServerResponse } from './serverresponse';
+import { of, throwError } from 'rxjs';
+import { atou } from '../unicode';
+import { ResourceClient, GargantuaClientFactory } from './gargantua.service';
+import { VirtualMachine } from './virtualmachine';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AdminVmService extends ResourceClient<VirtualMachine> {
+  constructor(gcf: GargantuaClientFactory) {
+    super(gcf.scopedClient('/a/vm'));
+  }
+
+  public list() {
+    return this.garg.get('/list').pipe(
+      catchError((e: HttpErrorResponse) => {
+        return throwError(() => e.error);
+      }),
+      switchMap((s: ServerResponse) => {
+        return of(JSON.parse(atou(s.content)));
+      })
+    );
+  }
+  public listByScheduledEvent(id: String) {
+    return this.garg
+      .get('/scheduledevent/' + id)
+      .pipe(
+        catchError((e: HttpErrorResponse) => {
+          return throwError(() => e.error);
+        }),
+        switchMap((s: ServerResponse) => {
+          return of(JSON.parse(atou(s.content)));
+        })
+      );
+  }
+
+  public count() {
+    return this.garg.get('/count').pipe(
+      catchError((e: HttpErrorResponse) => {
+        return throwError(() => e.error);
+      }),
+      switchMap((s: ServerResponse) => {
+        return of(JSON.parse(atou(s.content)));
+      })
+    );
+  }
+}
diff --git a/src/app/data/scheduledevent.service.ts b/src/app/data/scheduledevent.service.ts
@@ -63,6 +63,7 @@ export class ScheduledeventService extends ListableResourceClient<ScheduledEvent
         formatDate(se.end_time, 'E LLL dd HH:mm:ss UTC yyyy', 'en-US', 'UTC')
       )
       .set('required_vms', JSON.stringify(se.required_vms))
+      .set('shared_vms', se.shared_vms ? JSON.stringify(se.shared_vms) : JSON.stringify([]))
       .set('access_code', se.access_code.toLowerCase()) // this needs to be lower case because of RFC-1123
       .set('disable_restriction', JSON.stringify(se.disable_restriction))
       .set('on_demand', JSON.stringify(se.on_demand))

diff --git a/src/app/data/scheduledevent.ts b/src/app/data/scheduledevent.ts
@@ -21,7 +21,7 @@ export class ScheduledEvent {
   on_demand: boolean;
   printable: boolean;
   activeSessions: number;
-  shared_vms: SharedVirtualMachine[];
+  shared_vms: SharedVirtualMachine[] = [];
 }
 
 export interface DashboardScheduledEvent extends ScheduledEvent {

diff --git a/src/app/data/sharedvm.ts b/src/app/data/sharedvm.ts
@@ -1,6 +1,6 @@
 export interface SharedVirtualMachine {
-    vmId: string;
+    vm_id: string;
     name: string;
     environment: string;
-    vmTemplate: string;
+    vm_template: string;
 }