Merge branch 'development' of https://github.com/cloudiator/user-interface into development

Author: Florian Lappe

package.json

@@ -43,6 +43,9 @@
     "rxjs": "^6.4.0",
     "sass-loader": "^7.1.0",
     "webpack": "^4.35.3",
+    "xterm": "^4.1.0",
+    "xterm-addon-attach": "^0.3.0",
+    "xterm-addon-fit": "^0.2.1",
     "zone.js": "^0.8.29"
   },
   "devDependencies": {

src/app/app-dialog/app-dialog.module.ts

@@ -9,6 +9,7 @@ import {
 } from './dialogs';
 import {DialogService} from './services/dialog.service';
 import {ToastService} from './services/toast.service';
+import { SshConsoleDialogComponent } from './dialogs/ssh-console-dialog/ssh-console-dialog.component';
 
 /**
  * Main Module handling App DIalogs and Toasts.
@@ -19,7 +20,8 @@ import {ToastService} from './services/toast.service';
     ConfirmNewCloudDialogComponent,
     DeleteCloudDialogComponent,
     DeleteScheduleDialogComponent,
-    ScheduleDiagnosticDialogComponent
+    ScheduleDiagnosticDialogComponent,
+    SshConsoleDialogComponent
   ],
   imports: [
     OverlayModule
@@ -33,7 +35,8 @@ import {ToastService} from './services/toast.service';
     ConfirmNewCloudDialogComponent,
     DeleteCloudDialogComponent,
     DeleteScheduleDialogComponent,
-    ScheduleDiagnosticDialogComponent
+    ScheduleDiagnosticDialogComponent,
+    SshConsoleDialogComponent
   ]
 })
 export class AppDialogModule {

src/app/app-dialog/dialogs/index.ts

@@ -3,11 +3,13 @@ import {DeleteCloudDialogComponent} from './delete-cloud-dialog/delete-cloud-dia
 import {DeleteScheduleDialogComponent} from './delete-schedule-dialog/delete-schedule-dialog.component';
 import {ScheduleDiagnosticDialogComponent} from './schedule-diagnostic-dialog/schedule-diagnostic-dialog.component';
 import {ToastComponent} from './toast/toast.component';
+import {SshConsoleDialogComponent} from './ssh-console-dialog/ssh-console-dialog.component';
 
 export {
   ConfirmNewCloudDialogComponent,
   DeleteScheduleDialogComponent,
   DeleteCloudDialogComponent,
   ScheduleDiagnosticDialogComponent,
-  ToastComponent
+  ToastComponent,
+  SshConsoleDialogComponent
 };

src/app/app-dialog/dialogs/ssh-console-dialog/ssh-console-dialog.component.html

@@ -0,0 +1,14 @@
+<div class="modal is-active" (window:resize)="onResize()">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">{{data.name}} SSH Terminal</p>
+      <button class="delete" aria-label="close" (click)="onClose()"></button>
+    </header>
+    <section class="modal-card-body">
+      <div #terminal class="terminal-container"></div>
+    </section>
+    <footer class="modal-card-foot">
+    </footer>
+  </div>
+</div>

src/app/app-dialog/dialogs/ssh-console-dialog/ssh-console-dialog.component.scss

@@ -0,0 +1,42 @@
+@import "~bulma/sass/utilities/mixins";
+
+.modal-card {
+  width: 90%;
+  height: 90%;
+}
+
+.modal-card-body {
+  padding: 0;
+}
+
+.terminal-container {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}
+
+.mobile-view {
+  display: none;
+}
+
+@include mobile {
+  .modal {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .modal-card {
+    width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    margin: 0;
+  }
+
+  .modal-card-head {
+    border-radius: 0;
+  }
+
+  .modal-card-foot {
+    border-radius: 0;
+  }
+}

src/app/app-dialog/dialogs/ssh-console-dialog/ssh-console-dialog.component.spec.ts

@@ -0,0 +1,43 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {SshConsoleDialogComponent} from './ssh-console-dialog.component';
+import {AppDialogModule} from '../../app-dialog.module';
+import {DialogRef} from '../../model/dialogRef';
+import {DIALOG_DATA, DialogService} from '../../services/dialog.service';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {ApiModule} from 'cloudiator-rest-api';
+import {apiConfigFactory} from '../../../app.module';
+import {RootStoreModule} from '../../../root-store';
+import {ToastService} from '../../services/toast.service';
+
+describe('SshConsoleDialogComponent', () => {
+  let component: SshConsoleDialogComponent;
+  let fixture: ComponentFixture<SshConsoleDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [],
+      imports: [
+        RootStoreModule,
+        HttpClientTestingModule,
+        ApiModule.forRoot(apiConfigFactory),
+        AppDialogModule
+      ],
+      providers: [
+        {provide: DialogRef, useVale: {}},
+        {provide: DIALOG_DATA, useValue: {}}
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SshConsoleDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/app-dialog/dialogs/ssh-console-dialog/ssh-console-dialog.component.ts

@@ -0,0 +1,89 @@
+import {Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {DialogRef} from '../../model/dialogRef';
+import {DIALOG_DATA} from '../../services/dialog.service';
+import {AttachAddon} from 'xterm-addon-attach';
+import {FitAddon} from 'xterm-addon-fit';
+import {Terminal} from 'xterm';
+import {ToastService} from '../../services/toast.service';
+import {IpAddress, LoginCredential} from 'cloudiator-rest-api';
+import {SshService} from '../../../services/ssh.service';
+import {take} from 'rxjs/operators';
+import {ToastType} from '../../model/toast';
+
+@Component({
+  selector: 'app-ssh-console-dialog',
+  templateUrl: './ssh-console-dialog.component.html',
+  styleUrls: ['./ssh-console-dialog.component.scss']
+})
+export class SshConsoleDialogComponent implements OnInit, OnDestroy {
+
+  @ViewChild('terminal', {static: true}) terminal: ElementRef;
+
+  private socket: WebSocket;
+
+  private fitAddon = new FitAddon();
+
+  constructor(public dialogRef: DialogRef,
+              @Inject(DIALOG_DATA) public data: { name: string, ipAddress: IpAddress, loginCredential: LoginCredential },
+              private sshService: SshService,
+              private toastService: ToastService) {
+  }
+
+  ngOnInit() {
+    // check if needed values exist
+    if (!this.data.ipAddress || !this.data.loginCredential) {
+      this.toastService.show({text: 'Could not connect to Virtual Machine', type: ToastType.DANGER});
+    } else {
+      this.sshService.connectTo(this.data.ipAddress, this.data.loginCredential)
+        .pipe(take(1))
+        .subscribe(socket => {
+          this.socket = socket;
+
+          this.socket.onclose = ev => {
+            console.log(ev);
+            switch (ev.code) {
+              case 4001:
+                term.writeln('Authentication Error');
+                break;
+              case 4002:
+                term.writeln('Machine closed connection');
+                break;
+              case 4003:
+                term.writeln(ev.reason);
+                break;
+              case 4005:
+                term.writeln('SSH Tunnel Error');
+                break;
+              default:
+                term.writeln('Connection closed');
+            }
+          };
+
+          const attachAddon = new AttachAddon(this.socket);
+
+          const term = new Terminal();
+          term.loadAddon(attachAddon);
+          term.loadAddon(this.fitAddon);
+
+          term.open(this.terminal.nativeElement);
+
+          this.fitAddon.fit();
+        });
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.socket && this.socket.readyState !== WebSocket.CLOSED) {
+      this.socket.close();
+    }
+  }
+
+  onClose() {
+    this.dialogRef.close();
+  }
+
+  onResize() {
+    this.fitAddon.fit();
+  }
+
+}

src/app/app-routing.module.ts

@@ -29,7 +29,7 @@ const routes: Routes = [
   {path: 'editor', component: YamlEditorComponent, data: {graphs: false}, canActivate: [AuthGuard]},
   {path: 'editor/graphs', component: YamlEditorComponent, data: {graphs: true}, canActivate: [AuthGuard]},
 
-  {path: 'schedules', component: SchedulesOverviewComponent, runGuardsAndResolvers: 'always'},
+  {path: 'schedules', component: SchedulesOverviewComponent, canActivate: [AuthGuard], runGuardsAndResolvers: 'always'},
 
   {path: 'clouds', component: CloudOverviewComponent, canActivate: [AuthGuard]},
   {path: '', component: CloudOverviewComponent, canActivate: [AuthGuard]},

src/app/components/app/app.component.ts

@@ -49,10 +49,10 @@ export class AppComponent implements OnInit, OnDestroy {
 
   /**
    * Adds page reload warning if unsaved changes exist.
+   * Not needed anymore as the app caches editor state now
    */
   @HostListener('window:beforeunload')
   unloadNotification() {
-    // ToDo: reactivate
     // return !this.editorHasUnsavedChanges;
   }
 

src/app/components/clouds/cloud-card/cloud-card.component.ts

@@ -30,7 +30,7 @@ export class CloudCardComponent implements OnInit {
       case 'aws-ec2':
         return name === 'aws';
       case 'openstack4j':
-      case 'openstack-nove':
+      case 'openstack-nova':
         return name === 'openstack';
       case 'google-compute-engine':
         return name === 'gcp';