NAS-132487: Add shell to containers

src/app/interfaces/terminal.interface.ts

@@ -7,11 +7,20 @@ export interface TerminalConfiguration {
   connectionData: TerminalConnectionData;
 }
 
-export interface TerminalConnectionData {
-  vmId?: number;
-  podInfo?: {
-    chartReleaseName: string;
-    containerId: string;
+export type TerminalConnectionData =
+  // VMs
+  | {
+    vm_id: number;
+  }
+  // Virtualization instances
+  | {
+    virt_instance_id: string;
+  }
+  // Apps
+  | {
+    app_name: string;
+    container_id: string;
     command: string;
-  };
-}
+  }
+  // No params
+  | Record<string, never>;

src/app/modules/terminal/components/terminal/terminal.component.ts

@@ -196,7 +196,7 @@ export class TerminalComponent implements OnInit, OnDestroy {
   }
 
   initializeWebShell(): void {
-    this.shellService.connect(this.conf.connectionData, this.token);
+    this.shellService.connect(this.token, this.conf.connectionData);
 
     this.shellService.shellConnected$.pipe(untilDestroyed(this)).subscribe((event: ShellConnectedEvent) => {
       this.shellConnected = event.connected;
@@ -212,7 +212,7 @@ export class TerminalComponent implements OnInit, OnDestroy {
   }
 
   reconnect(): void {
-    this.shellService.connect(this.conf.connectionData, this.token);
+    this.shellService.connect(this.token, this.conf.connectionData);
   }
 
   onFontSizeChanged(newSize: number): void {

src/app/pages/apps/components/installed-apps/container-shell/container-shell.component.ts

@@ -31,11 +31,9 @@ export class ContainerShellComponent implements TerminalConfiguration {
 
   get connectionData(): TerminalConnectionData {
     return {
-      podInfo: {
-        chartReleaseName: this.appName,
-        containerId: this.containerId,
-        command: this.command,
-      },
+      app_name: this.appName,
+      container_id: this.containerId,
+      command: this.command,
     };
   }
 

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.html

@@ -5,5 +5,7 @@
     <ix-instance-devices></ix-instance-devices>
 
     <ix-instance-proxies></ix-instance-proxies>
+
+    <ix-instance-tools [instance]="instance()"></ix-instance-tools>
   </div>
 </div>

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.ts

@@ -13,6 +13,9 @@ import {
 import {
   InstanceProxiesComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-proxies/instance-proxies.component';
+import {
+  InstanceToolsComponent,
+} from 'app/pages/virtualization/components/all-instances/instance-details/instance-tools/instance-tools.component';
 import { VirtualizationInstancesStore } from 'app/pages/virtualization/stores/virtualization-instances.store';
 
 @Component({
@@ -27,6 +30,7 @@ import { VirtualizationInstancesStore } from 'app/pages/virtualization/stores/vi
     InstanceGeneralInfoComponent,
     MobileBackButtonComponent,
     InstanceProxiesComponent,
+    InstanceToolsComponent,
   ],
 })
 export class InstanceDetailsComponent {

src/app/pages/virtualization/components/all-instances/instance-details/instance-tools/instance-tools.component.html

@@ -0,0 +1,24 @@
+<mat-card class="card">
+  <mat-card-header>
+    <h3 mat-card-title>
+      {{ 'Tools' | translate }}
+    </h3>
+  </mat-card-header>
+
+  <mat-card-content>
+    <div [matTooltip]="isInstanceStopped() ? ('Instance is not running' | translate) : ''">
+      <a
+        mat-flat-button
+        color="default"
+        ixTest="open-shell"
+        class="tool"
+        [disabled]="isInstanceStopped()"
+        [routerLink]="['/virtualization', 'view', instance().id, 'shell']"
+      >
+        <span>{{ 'Shell' | translate }}</span>
+
+        <ix-icon name="mdi-console"></ix-icon>
+      </a>
+    </div>
+  </mat-card-content>
+</mat-card>

src/app/pages/virtualization/components/all-instances/instance-details/instance-tools/instance-tools.component.scss

@@ -0,0 +1,9 @@
+.tool {
+  display: flex;
+  margin: 0 -16px;
+
+  ::ng-deep .mdc-button__label {
+    flex-grow: 1;
+    justify-content: space-between;
+  }
+}

src/app/pages/virtualization/components/all-instances/instance-details/instance-tools/instance-tools.component.spec.ts

@@ -0,0 +1,49 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { VirtualizationStatus } from 'app/enums/virtualization.enum';
+import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
+import {
+  InstanceToolsComponent,
+} from 'app/pages/virtualization/components/all-instances/instance-details/instance-tools/instance-tools.component';
+
+describe('InstanceToolsComponent', () => {
+  let spectator: Spectator<InstanceToolsComponent>;
+  let loader: HarnessLoader;
+  const createComponent = createComponentFactory({
+    component: InstanceToolsComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({
+      props: {
+        instance: {
+          id: 'my-instance',
+          status: VirtualizationStatus.Running,
+        } as VirtualizationInstance,
+      },
+    });
+
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+  });
+
+  describe('shell', () => {
+    it('shows a link to shell', async () => {
+      const shellLink = await loader.getHarness(MatButtonHarness.with({ text: 'Shell' }));
+
+      expect(shellLink).toBeTruthy();
+      expect(await (await shellLink.host()).getAttribute('href')).toBe('/virtualization/view/my-instance/shell');
+    });
+
+    it('show shell link as disabled when instance is not running', async () => {
+      spectator.setInput('instance', {
+        id: 'my-instance',
+        status: VirtualizationStatus.Stopped,
+      } as VirtualizationInstance);
+
+      const shellLink = await loader.getHarness(MatButtonHarness.with({ text: 'Shell' }));
+      expect(await shellLink.isDisabled()).toBe(true);
+    });
+  });
+});

src/app/pages/virtualization/components/all-instances/instance-details/instance-tools/instance-tools.component.ts

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy, Component, computed, input,
+} from '@angular/core';
+import { MatAnchor, MatButton } from '@angular/material/button';
+import {
+  MatCard, MatCardContent, MatCardHeader, MatCardTitle,
+} from '@angular/material/card';
+import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { VirtualizationStatus } from 'app/enums/virtualization.enum';
+import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+import { TestDirective } from 'app/modules/test-id/test.directive';
+
+@Component({
+  selector: 'ix-instance-tools',
+  templateUrl: './instance-tools.component.html',
+  styleUrls: ['./instance-tools.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatCardTitle,
+    MatCardHeader,
+    MatCard,
+    MatCardContent,
+    TranslateModule,
+    MatButton,
+    MatAnchor,
+    TestDirective,
+    IxIconComponent,
+    MatTooltip,
+    RouterLink,
+  ],
+})
+export class InstanceToolsComponent {
+  readonly instance = input.required<VirtualizationInstance>();
+
+  protected readonly isInstanceStopped = computed(() => this.instance().status !== VirtualizationStatus.Running);
+}

src/app/pages/virtualization/components/instance-shell/instance-shell.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Observable, Subscriber } from 'rxjs';
+import { TerminalConfiguration, TerminalConnectionData } from 'app/interfaces/terminal.interface';
+import { TerminalComponent } from 'app/modules/terminal/components/terminal/terminal.component';
+
+@UntilDestroy()
+@Component({
+  selector: 'ix-instance-shell',
+  template: '<ix-terminal [conf]="this"></ix-terminal>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TerminalComponent],
+})
+export class InstanceShellComponent implements TerminalConfiguration {
+  protected instanceId = signal('');
+
+  get connectionData(): TerminalConnectionData {
+    return {
+      virt_instance_id: this.instanceId(),
+    };
+  }
+
+  constructor(
+    private aroute: ActivatedRoute,
+  ) {}
+
+  preInit(): Observable<void> {
+    return new Observable<void>((subscriber: Subscriber<void>) => {
+      this.aroute.params.pipe(untilDestroyed(this)).subscribe((params) => {
+        this.instanceId.set(params['id'] as string);
+        subscriber.next();
+      });
+    });
+  }
+}

src/app/pages/virtualization/virtualization.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
 import { AllInstancesComponent } from 'app/pages/virtualization/components/all-instances/all-instances.component';
+import { InstanceShellComponent } from 'app/pages/virtualization/components/instance-shell/instance-shell.component';
 import { InstanceWizardComponent } from 'app/pages/virtualization/components/instance-wizard/instance-wizard.component';
 import { VirtualizationConfigStore } from 'app/pages/virtualization/stores/virtualization-config.store';
 import { VirtualizationInstancesStore } from 'app/pages/virtualization/stores/virtualization-instances.store';
@@ -23,12 +24,18 @@ export const virtualizationRoutes: Routes = [{
     },
     {
       path: 'view/:id',
+      data: { breadcrumb: T('Containers') },
       children: [
         {
           path: '',
           pathMatch: 'full',
           component: AllInstancesComponent,
         },
+        {
+          path: 'shell',
+          component: InstanceShellComponent,
+          data: { title: T('Instance Shell') },
+        },
       ],
     },
   ],

src/app/pages/vm/vm-serial-shell/vm-serial-shell.component.ts

@@ -18,7 +18,7 @@ export class VmSerialShellComponent implements TerminalConfiguration {
 
   get connectionData(): TerminalConnectionData {
     return {
-      vmId: Number(this.pk),
+      vm_id: Number(this.pk),
     };
   }
 

src/app/services/shell.service.ts

@@ -30,13 +30,13 @@ export class ShellService {
     @Inject(WEBSOCKET) private webSocket: typeof rxjsWebSocket,
   ) {}
 
-  connect(connectionData: TerminalConnectionData, token: string): void {
+  connect(token: string, connectionData: TerminalConnectionData): void {
     this.disconnectIfSessionActive();
 
     this.ws$ = this.webSocket({
       url: this.connectionUrl,
       openObserver: {
-        next: () => this.onOpen(connectionData, token),
+        next: () => this.onOpen(token, connectionData),
       },
       closeObserver: {
         next: this.onClose.bind(this),
@@ -60,21 +60,8 @@ export class ShellService {
     });
   }
 
-  private onOpen(connectionData: TerminalConnectionData, token: string): void {
-    if (connectionData.vmId) {
-      this.ws$.next(JSON.stringify({ token, options: { vm_id: connectionData.vmId } }));
-    } else if (connectionData.podInfo) {
-      this.ws$.next(JSON.stringify({
-        token,
-        options: {
-          app_name: connectionData.podInfo.chartReleaseName,
-          container_id: connectionData.podInfo.containerId,
-          command: connectionData.podInfo.command,
-        },
-      }));
-    } else {
-      this.ws$.next(JSON.stringify({ token }));
-    }
+  private onOpen(token: string, connectionData: TerminalConnectionData): void {
+    this.ws$.next(JSON.stringify({ token, options: connectionData }));
   }
 
   private onClose(): void {

src/assets/i18n/af.json

@@ -2295,6 +2295,8 @@
   "Instance Configuration": "",
   "Instance Port": "",
   "Instance Protocol": "",
+  "Instance Shell": "",
+  "Instance is not running": "",
   "Instance saved": "",
   "Instance updated": "",
   "Instances you created will automatically appear here.": "",
@@ -4565,6 +4567,7 @@
   "Token expired": "",
   "Tolerance Window": "",
   "Toolbar": "",
+  "Tools": "",
   "Top": "",
   "Top bar": "",
   "Top level of the LDAP directory tree to be used when searching for resources. Example: <i>dc=test,dc=org</i>.": "",

src/assets/i18n/ar.json

@@ -2295,6 +2295,8 @@
   "Instance Configuration": "",
   "Instance Port": "",
   "Instance Protocol": "",
+  "Instance Shell": "",
+  "Instance is not running": "",
   "Instance saved": "",
   "Instance updated": "",
   "Instances you created will automatically appear here.": "",
@@ -4565,6 +4567,7 @@
   "Token expired": "",
   "Tolerance Window": "",
   "Toolbar": "",
+  "Tools": "",
   "Top": "",
   "Top bar": "",
   "Top level of the LDAP directory tree to be used when searching for resources. Example: <i>dc=test,dc=org</i>.": "",

src/assets/i18n/ast.json

@@ -2295,6 +2295,8 @@
   "Instance Configuration": "",
   "Instance Port": "",
   "Instance Protocol": "",
+  "Instance Shell": "",
+  "Instance is not running": "",
   "Instance saved": "",
   "Instance updated": "",
   "Instances you created will automatically appear here.": "",
@@ -4565,6 +4567,7 @@
   "Token expired": "",
   "Tolerance Window": "",
   "Toolbar": "",
+  "Tools": "",
   "Top": "",
   "Top bar": "",
   "Top level of the LDAP directory tree to be used when searching for resources. Example: <i>dc=test,dc=org</i>.": "",

src/assets/i18n/az.json

@@ -2295,6 +2295,8 @@
   "Instance Configuration": "",
   "Instance Port": "",
   "Instance Protocol": "",
+  "Instance Shell": "",
+  "Instance is not running": "",
   "Instance saved": "",
   "Instance updated": "",
   "Instances you created will automatically appear here.": "",
@@ -4565,6 +4567,7 @@
   "Token expired": "",
   "Tolerance Window": "",
   "Toolbar": "",
+  "Tools": "",
   "Top": "",
   "Top bar": "",
   "Top level of the LDAP directory tree to be used when searching for resources. Example: <i>dc=test,dc=org</i>.": "",