Issue166 admin UI sharedvm

src/app/app-routing.module.ts

@@ -14,11 +14,11 @@ import { PrintableComponent } from './printable/printable.component';
 import { VmtemplatesComponent } from './configuration/vmtemplates/vmtemplates.component';
 import { DashboardsComponent } from './dashboards/dashboards.component';
 import { StepComponent } from './step/step-component/step.component';
-import { TerminalComponent } from './step/terminal/terminal.component';
 import { RolesComponent } from './configuration/roles/roles/roles.component';
 import { SessionStatisticsComponent } from './session-statistics/session-statistics.component';
 import { SettingsComponent } from './configuration/settings/settings.component';
 import { DashboardDetailsComponent } from './dashboards/dashboard-details/dashboard-details.component';
+import { TerminalViewComponent } from './step/terminal/terminal-view.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -101,7 +101,7 @@ const routes: Routes = [
     path: 'session/:session/steps/:step',
     component: StepComponent,
   },
-  { path: 'terminal', component: TerminalComponent },
+  { path: 'terminal/:vmId/:wsEndpoint', component: TerminalViewComponent, canActivate: [AuthGuard] },
   {
     path: 'scenario/:scenario/printable',
     component: PrintableComponent,

src/app/app.module.ts

@@ -55,6 +55,7 @@ import { ProgressDashboardComponent } from './dashboards/progress-dashboard/prog
 import { DashboardsComponent } from './dashboards/dashboards.component';
 import { VmDashboardComponent } from './dashboards/vm-dashboard/vm-dashboard.component';
 import { UsersDashboardComponent } from './dashboards/users-dashboard/users-dashboard.component';
+import { SharedVmDashboardComponent } from './dashboards/shared-vm-dashboard/shared-vm-dashboard.component';
 import { StepComponent } from './step/step-component/step.component';
 import { CtrService } from './data/ctr.service';
 import { SessionService } from './data/session.service';
@@ -159,6 +160,7 @@ import {
   downloadIcon,
   plusCircleIcon,
   exclamationTriangleIcon,
+  refreshIcon
 } from '@cds/core/icon';
 import { ReadonlyTaskComponent } from './scenario/task/readonly-task/readonly-task.component';
 import { HiddenMdComponent } from './step/hidden-md-component/hidden-md.component';
@@ -172,6 +174,8 @@ import { TooltipComponent } from './tooltip/tooltip.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { AuthnService } from './data/authn.service';
 import { SessionProgressService } from './progress/session-progress.service';
+import { TerminalViewComponent } from './step/terminal/terminal-view.component';
+import { WebinterfaceWindowComponent } from './step/terminal/webinterface-window/webinterface-window.component';
 
 ClarityIcons.addIcons(
   plusIcon,
@@ -214,6 +218,7 @@ ClarityIcons.addIcons(
   downloadIcon,
   plusCircleIcon,
   exclamationTriangleIcon,
+  refreshIcon
 );
 
 const appInitializerFn = (appConfig: AppConfigService) => {
@@ -222,6 +227,19 @@ const appInitializerFn = (appConfig: AppConfigService) => {
   };
 };
 
+
+//TODO: Check if this still works after resolving all merge conflicts considering Angular 17 upgrade!
+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 {
   const allowedDomainsRegex = environment.server.match(/.*\:\/\/?([^\/]+)/);
   let allowedDomains: string[] | undefined;
@@ -279,9 +297,11 @@ export function jwtOptionsFactory(): JwtConfig {
     DashboardsComponent,
     VmDashboardComponent,
     UsersDashboardComponent,
+    SharedVmDashboardComponent,
     StepComponent,
     HfMarkdownComponent,
     TerminalComponent,
+    TerminalViewComponent,
     CtrComponent,
     RbacDirective,
     ClarityDisableSelectionDirective,
@@ -318,6 +338,7 @@ export function jwtOptionsFactory(): JwtConfig {
     TaskFormComponent,
     ReadonlyTaskComponent,
     SingleTaskVerificationMarkdownComponent,
+    WebinterfaceWindowComponent,
     GlossaryMdComponent,
     HiddenMdComponent,
     MermaidMdComponent,

src/app/configuration/vmtemplates/vmtemplates.component.html

@@ -75,3 +75,4 @@ <h3>VM Templates</h3>
   #deleteConfirmation
   (delete)="doDelete()"
 ></delete-confirmation>
+<!-- //TODO -->

src/app/dashboards/dashboard-details/dashboard-details.component.html

@@ -8,6 +8,8 @@ <h3>VMs for {{ selectedEvent.event_name }}</h3>
       <h3>Users participating in {{ selectedEvent.event_name }}</h3>
     } @else if (statisticsDashboardActive && rbacSuccessSessions) {
       <h3>Statistics for {{ selectedEvent.event_name }}</h3>
+    } @else if (sharedVmDashboardActive && rbacSuccessVms) {
+      <h3> VMs for {{ selectedEvent.event_name }}</h3>
     }
     <span class="additional-info">
       <ng-container *rbac="['accesscodes.get']">
@@ -50,6 +52,18 @@ <h3>Statistics for {{ selectedEvent.event_name }}</h3>
           </ng-template>
         </clr-tab>
       }
+      @if (rbacSuccessVms) {
+        <clr-tab>
+          <button clrTabLink>Shared VMs</button>
+          <ng-template [(clrIfActive)]="sharedVmDashboardActive">
+            <clr-tab-content *clrIfActive>
+              <div class="content-area">
+                <shared-vm-dashboard [selectedEvent]="selectedEvent"></shared-vm-dashboard>
+              </div>
+            </clr-tab-content>
+          </ng-template>
+        </clr-tab>
+      }
       @if (rbacSuccessSessions) {
         <clr-tab>
           <button clrTabLink>Users</button>
@@ -74,7 +88,7 @@ <h3>Statistics for {{ selectedEvent.event_name }}</h3>
             </clr-tab-content>
           </ng-template>
         </clr-tab>
-      }
+      }      
     </clr-tabs>
   </div>
 }

src/app/dashboards/dashboard-details/dashboard-details.component.ts

@@ -17,6 +17,7 @@ export class DashboardDetailsComponent implements OnInit, OnDestroy {
   public statisticsDashboardActive: boolean = false;
   public usersDashboardActive: boolean = false;
 
+  public sharedVmDashboardActive: boolean = false;
   public selectedEvent?: DashboardScheduledEvent;
   public loggedInAdminEmail: string;
 

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
   ) {}
 

src/app/dashboards/shared-vm-dashboard/shared-vm-dashboard.component.html

@@ -0,0 +1,100 @@
+<div>
+  @if (vmSets.length < 1) {
+    <div>No active VMs</div>
+  }
+  <clr-accordion [clrAccordionMultiPanel]="true">
+    @for(set of vmSets; track $index) {
+      <div>
+        <clr-accordion-panel
+          [(clrAccordionPanelOpen)]="set.stepOpen"
+          (click)="setStepOpen(set)"
+          >
+          <clr-accordion-title>
+            <b>Environment:</b> {{ set.environment }} &nbsp; <b>Count: </b
+            >{{ set.count }}
+          </clr-accordion-title>
+          <clr-accordion-content *clrIfExpanded>
+            <div class="clr-row">
+              <div class="clr-col">
+                <clr-datagrid>
+                  <clr-dg-column
+                  *rbac="[
+                    'sessions.get',
+                    'courses.get',
+                    'progresses.list',
+                    'scenarios.get',
+                    'virtualmachineclaims.get'
+                  ]"
+                    >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]="'id'">VM Id</clr-dg-column>
+                      <clr-dg-column [clrDgField]="'hostname'"
+                        >Hostname</clr-dg-column
+                        >
+
+                        <clr-dg-row *clrDgItems="let vm of set.setVMs!">
+                          <clr-dg-cell
+                            class="dashboardCell"
+                    *rbac="[
+                      'sessions.get',
+                      'courses.get',
+                      'progresses.list',
+                      'scenarios.get',
+                      'virtualmachineclaims.get'
+                    ]"
+                            ><button
+                            [disabled]="!vm.allocated"
+                            class="btn btn-sm btn-primary dashboardCell joinButton"
+                            (click)="openTerminal(vm)"
+                            >
+                            >_
+                          </button></clr-dg-cell
+                          >
+                          <clr-dg-cell class="dashboardCell">
+                            @if (vm.status === 'running' && !vm.tainted) {
+                              <span
+                                class="badge badge-success"
+                                >{{ vm.status }}</span
+                                >
+                              }
+                              @if (vm.status !== 'running' && !vm.tainted) {
+                                <span
+                                  class="badge badge-warning"
+                                  >{{ vm.status }}</span
+                                  >
+                                }
+                                @if (!!vm.tainted) {
+                                  <span
+                                    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.id }}</clr-dg-cell>
+                                <clr-dg-cell class="dashboardCell">{{
+                                  vm.hostname
+                                }}</clr-dg-cell>
+                              </clr-dg-row>
+                            </clr-datagrid>
+                          </div>
+                        </div>
+                      </clr-accordion-content>
+                    </clr-accordion-panel>
+                  </div>
+                }
+              </clr-accordion>
+            </div>

src/app/dashboards/shared-vm-dashboard/shared-vm-dashboard.component.scss

@@ -0,0 +1,12 @@
+.dashboardCell {
+    display: flex; 
+    align-items: center;
+}
+
+.joinButton {
+    justify-content: center;
+}
+
+.badge{
+    padding: 10px;
+}