UI Part for Shared VMs

src/app/VM.ts

@@ -14,4 +14,5 @@ export class VM {
   hostname: string;
   tfstate: string;
   ws_endpoint: string;
+  vm_type: string;
 }

src/app/hf-markdown/hf-markdown.component.ts

@@ -246,7 +246,7 @@ ${token}`;
 
   ngOnChanges() {
     const contentWithReplacedTokens = this.replaceSessionToken(
-      this.replaceVmInfoTokens(this.content),
+      this.replaceVmInfoTokens(this.replaceSharedVmInfoTokens(this.content)),
     );
     // the parse method internally uses the Angular Dom Sanitizer and is therefore safe to use
     this.processedContent = this.markdownService.parse(
@@ -259,7 +259,21 @@ ${token}`;
       /\$\{vminfo:([^:]*):([^}]*)\}/g,
       (match, vmName, propName) => {
         const vm = this.context.vmInfo?.[vmName.toLowerCase()];
-        return String(vm?.[propName as keyof VM] ?? match);
+        return String(
+          vm?.vm_type != 'SHARED' ? vm?.[propName as keyof VM] : match,
+        );
+      },
+    );
+  }
+
+  private replaceSharedVmInfoTokens(content: string) {
+    return content.replace(
+      /\$\{shared:([^:]*):([^}]*)\}/g,
+      (match, vmName, propName) => {
+        const vm = this.context.vmInfo?.[vmName.toLowerCase()];
+        return String(
+          vm?.vm_type == 'SHARED' ? vm?.[propName as keyof VM] : match,
+        );
       },
     );
   }

src/app/scenario/step.component.html

@@ -124,48 +124,68 @@ <h4 class="card-title">
       </ng-container>
     </as-split-area>
     <as-split-area [size]="60" class="split-area-2" [visible]="!isContentOnly">
+      <ng-container *ngIf="sharedVMs.length > 0">
+        <clr-tooltip *ngFor="let vm of sharedVMs" style="float: right">
+          <span class="badge badge-blue" clrTooltipTrigger>
+            {{ vm.name }}
+          </span>
+          <clr-tooltip-content [clrPosition]="'top-left'" [clrSize]="'md'">
+            Name: {{ vm.name }}<br />
+            Public IP: {{ vm.public_ip }}<br />
+            Private IP: {{ vm.private_ip }}<br />
+          </clr-tooltip-content>
+        </clr-tooltip>
+      </ng-container>
       <div id="terminal-column">
         <clr-tabs class="tab-container">
-          <clr-tab *ngFor="let v of vms | keyvalue" #tab>
-            <button clrTabLink [id]="v.key">
-              <cds-icon size="24" shape="host"></cds-icon> {{ v.key }}
-            </button>
-            <clr-tab-content #tabcontent>
-              <table class="table compact">
-                <tr>
-                  <td><b>Public IP:</b> {{ v.value.public_ip }}</td>
-                  <td><b>Private IP:</b> {{ v.value.private_ip }}</td>
-                  <td><b>Hostname:</b> {{ v.value.hostname }}</td>
-                  <td><b>Shell Status:</b> {{ getShellStatus(v.key) }}</td>
-                  <td style="padding: 0">
-                    <button
-                      class="btn btn-icon btn-primary btn-sm"
-                      title="Reload Terminal"
-                      (click)="reloadTerminal(v.key)"
-                    >
-                      <cds-icon shape="refresh"></cds-icon>
-                    </button>
-                  </td>
-                </tr>
-              </table>
-              <app-terminal
-                *ngIf="!isGuacamoleTerminal(v.value.protocol)"
-                [vmname]="v.key"
-                [vmid]="v.value.id"
-                [endpoint]="v.value.ws_endpoint"
-                #term
-              >
-              </app-terminal>
-              <app-guac-terminal
-                *ngIf="isGuacamoleTerminal(v.value.protocol)"
-                [vmname]="v.key"
-                [vmid]="v.value.id"
-                [endpoint]="v.value.ws_endpoint"
-                #guacterm
-              >
-              </app-guac-terminal>
-            </clr-tab-content>
-          </clr-tab>
+          <ng-container *ngFor="let v of vms | keyvalue">
+            <clr-tab *ngIf="v.value.vm_type !== 'SHARED'" #tab>
+              <button clrTabLink [id]="v.key">
+                <cds-icon size="24" shape="host"></cds-icon> {{ v.key }}
+              </button>
+              <clr-tab-content #tabcontent>
+                <table class="table compact">
+                  <tr>
+                    <td><b>Public IP:</b> {{ v.value.public_ip }}</td>
+                    <td><b>Private IP:</b> {{ v.value.private_ip }}</td>
+                    <td><b>Hostname:</b> {{ v.value.hostname }}</td>
+                    <td><b>Shell Status:</b> {{ getShellStatus(v.key) }}</td>
+                    <td style="padding: 0">
+                      <button
+                        class="btn btn-icon btn-primary btn-sm"
+                        title="Reload Terminal"
+                        (click)="reloadTerminal(v.key)"
+                      >
+                        <cds-icon shape="refresh"></cds-icon>
+                      </button>
+                    </td>
+                  </tr>
+                </table>
+                <app-terminal
+                  *ngIf="
+                    !isGuacamoleTerminal(v.value.protocol) &&
+                    v.value.vm_type !== 'SHARED'
+                  "
+                  [vmname]="v.key"
+                  [vmid]="v.value.id"
+                  [endpoint]="v.value.ws_endpoint"
+                  #term
+                >
+                </app-terminal>
+                <app-guac-terminal
+                  *ngIf="
+                    isGuacamoleTerminal(v.value.protocol) &&
+                    v.value.vm_type !== 'SHARED'
+                  "
+                  [vmname]="v.key"
+                  [vmid]="v.value.id"
+                  [endpoint]="v.value.ws_endpoint"
+                  #guacterm
+                >
+                </app-guac-terminal>
+              </clr-tab-content>
+            </clr-tab>
+          </ng-container>
           <ng-container *ngFor="let v of vms | keyvalue">
             <ng-container
               *ngFor="let webinterface of v.value.webinterfaces; let i = index"

src/app/scenario/step.component.ts

@@ -51,6 +51,7 @@ import { SettingsService } from '../services/settings.service';
 import { Course } from '../course/course';
 import { CourseService } from '../services/course.service';
 import { LanguageCommandService } from './bashbrawl/languages/language-command.service';
+import { ContextService } from '../services/context.service';
 
 type Service = {
   name: string;
@@ -63,6 +64,7 @@ type Service = {
 };
 interface stepVM extends VM {
   webinterfaces?: Service[];
+  name?: string;
 }
 
 export type webinterfaceTabIdentifier = {
@@ -111,6 +113,8 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   private DEFAULT_DIVIDER_POSITION = 40;
   public bashbrawl_active = false;
 
+  public sharedVMs: stepVM[] = [];
+
   @ViewChildren('term') private terms: QueryList<TerminalComponent> =
     new QueryList();
   @ViewChildren('guacterm')
@@ -138,6 +142,7 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
     public verificationService: VerificationService,
     private settingsService: SettingsService,
     private languageCommandService: LanguageCommandService,
+    private ctxService: ContextService,
   ) {}
 
   setTabActive(webinterface: Service, vmName: string) {
@@ -207,6 +212,21 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
       return;
     }
 
+    // Get the shared VMs for this Event
+    this.ctxService.watch().subscribe((ctx) => {
+      this.sharedVMs = [];
+      this.vmService.getSharedVMs(ctx.accessCode).subscribe((res: stepVM[]) => {
+        this.sharedVMs = res;
+        // Get the names for the shared VMs from the Scheduled Event
+        this.sharedVMs.forEach((vm) => {
+          vm.name =
+            ctx.scheduledEvent.shared_vms.find(
+              (sharedVM) => sharedVM.vm_id == vm.id,
+            )?.name ?? '';
+        });
+      });
+    });
+
     this.ssService
       .get(sessionId, true)
       .pipe(
@@ -242,16 +262,28 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
           });
           this.verificationService.verifications = verificationTasks;
           this.sendProgressUpdate();
-          const vmInfo: HfMarkdownRenderContext['vmInfo'] = {};
-          for (const [k, v] of this.vms) {
-            vmInfo[k.toLowerCase()] = v;
-          }
-          this.mdContext = { vmInfo: vmInfo, session: this.session.id };
         }),
         // Using mergeMap here to handle async "getWebinterfaces(...)" operations concurrently
         // This allows multiple observables to be active and processed in parallel
         // The order in which these observables are processed is not important
         mergeMap(() => {
+          // Adding shared VMs to the vms map in order to render Tabs for their Webinterfaces.
+          this.sharedVMs.forEach((svm) => {
+            if (svm.name) {
+              if (!this.vms.has(svm.name)) {
+                this.vms.set(svm.name, svm);
+              } else {
+                this.vms.set('shared-' + svm.name, svm);
+              }
+            }
+          });
+
+          const vmInfo: HfMarkdownRenderContext['vmInfo'] = {};
+          for (const [k, v] of this.vms) {
+            vmInfo[k.toLowerCase()] = v;
+          }
+          this.mdContext = { vmInfo: vmInfo, session: this.session.id };
+
           const vmObservables = Array.from<stepVM>(this.vms.values()).map(
             (vm) =>
               this.vmService.getWebinterfaces(vm.id).pipe(

src/app/services/vm.service.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
 import { ResourceClient, GargantuaClientFactory } from './gargantua.service';
 import { VM } from '../VM';
-import { catchError } from 'rxjs/operators';
+import { catchError, map } from 'rxjs/operators';
 import { throwError } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
+import { ServerResponse } from '../ServerResponse';
 
 @Injectable()
 export class VMService extends ResourceClient<VM> {
@@ -18,4 +19,16 @@ export class VMService extends ResourceClient<VM> {
       }),
     );
   }
+
+  getSharedVMs(acc: string) {
+    return this.garg.get('/shared/' + acc).pipe(
+      map(
+        (res: ServerResponse) =>
+          [...JSON.parse(atob(res.content))] as unknown as VM[],
+      ),
+      catchError((e: HttpErrorResponse) => {
+        return throwError(() => e.error);
+      }),
+    );
+  }
 }

src/data/ScheduledEvent.ts

@@ -1,6 +1,9 @@
+import { SharedVirtualMachine } from './sharedVM';
+
 export class ScheduledEvent {
   id: string;
   name: string;
   description: string;
   end_timestamp: string;
+  shared_vms: SharedVirtualMachine[];
 }

src/data/sharedVM.ts

@@ -0,0 +1,6 @@
+export interface SharedVirtualMachine {
+  vm_id: string;
+  name: string;
+  environment: string;
+  vm_template: string;
+}