Fix for xtermjs

src/app/components/project-map/console-wrapper/console-wrapper.component.html

@@ -24,7 +24,7 @@
                 </button>
             </ng-template>
 
-            place for log console
+            place for log console component
         </mat-tab>
 
         <mat-tab *ngFor="let node of nodes; let index = index" [label]="tab">

src/app/components/project-map/console-wrapper/console-wrapper.component.ts

@@ -6,6 +6,7 @@ import { ResizeEvent } from 'angular-resizable-element';
 import { ThemeService } from '../../../services/theme.service';
 import { FormControl } from '@angular/forms';
 import { NodeConsoleService } from '../../../services/nodeConsole.service';
+import { Node } from '../../../cartography/models/node';
 
 
 @Component({
@@ -13,7 +14,7 @@ import { NodeConsoleService } from '../../../services/nodeConsole.service';
     templateUrl: './console-wrapper.component.html',
     styleUrls: ['./console-wrapper.component.scss']
 })
-export class ConsoleWrapperComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ConsoleWrapperComponent implements OnInit {
     @Input() server: Server;
     @Input() project: Project;
     @Output() closeConsole =  new EventEmitter<boolean>();
@@ -37,19 +38,18 @@ export class ConsoleWrapperComponent implements OnInit, AfterViewInit, OnDestroy
     
     ngOnInit() {
         this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
-        this.style = { bottom: '20px', left: '20px', width: '600px', height: '180px'}; // style properties
+        this.style = { bottom: '20px', left: '20px', width: '720px', height: '456px'};
 
         this.consoleService.nodeConsoleTrigger.subscribe((node) => {
             this.addTab(node, true);
         });
-    }
 
-    ngAfterViewInit() {
-        // this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+        this.consoleService.closeNodeConsoleTrigger.subscribe((node) => {
+            let index = this.nodes.findIndex(n => n.node_id === node.node_id)
+            this.removeTab(index);
+        });
     }
 
-    ngOnDestroy() {}
-
     addTab(node: Node, selectAfterAdding: boolean) {
         this.nodes.push(node);
 

src/app/components/project-map/project-map.component.scss

@@ -1,3 +1,7 @@
+.wrapper {
+  height: 600px;
+}
+
 app-root,
 app-project-map,
 .project-map,

src/app/components/project-map/web-console/web-console.component.html

@@ -1 +1 @@
-<div id="terminal"></div>
+<div #terminal id="terminal"></div>

src/app/components/project-map/web-console/web-console.component.ts

@@ -1,12 +1,15 @@
-import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, AfterViewInit, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
 import { Terminal } from 'xterm';
 import { AttachAddon } from 'xterm-addon-attach';
 import { Node } from '../../../cartography/models/node';
+import { FitAddon } from 'xterm-addon-fit';
+import { NodeConsoleService } from '../../../services/nodeConsole.service';
 
 
 @Component({
+    encapsulation: ViewEncapsulation.None,
     selector: 'app-web-console',
     templateUrl: './web-console.component.html',
     styleUrls: ['../../../../../node_modules/xterm/css/xterm.css']
@@ -15,22 +18,35 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
     @Input() server: Server;
     @Input() project: Project;
     @Input() node: Node;
+    public term: Terminal;
+    @ViewChild('terminal', {static: false}) terminal: ElementRef;
 
-    constructor() {}
+    constructor(
+        private consoleService: NodeConsoleService
+    ) {}
     
     ngOnInit() {}
 
     ngAfterViewInit() {
-        const term = new Terminal();
+        this.term = new Terminal();
         setTimeout(() => {
-            term.open(document.getElementById('terminal'));
-            term.write('\x1B[1;3;31mxterm.js\x1B[0m $ ')
-    
+            this.term.open(this.terminal.nativeElement);
             const socket = new WebSocket(this.getUrl());
+
+            socket.onerror = ((event) => {
+                this.term.write('Connection lost');
+            });
+            socket.onclose = ((event) => {
+                this.consoleService.closeConsoleForNode(this.node);
+            });
+
             const attachAddon = new AttachAddon(socket);
-            term.loadAddon(attachAddon);
-    
-            console.log('Console is running...');
+            this.term.loadAddon(attachAddon);
+            this.term.setOption('cursorBlink', true);
+
+            const fitAddon = new FitAddon();
+            this.term.loadAddon(fitAddon);
+            fitAddon.activate(this.term);
         }, 1000);
     }
 

src/app/services/nodeConsole.service.ts

@@ -1,13 +1,19 @@
 import { Injectable, EventEmitter } from '@angular/core';
 import { Node } from '../cartography/models/node';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class NodeConsoleService {
   public nodeConsoleTrigger = new EventEmitter<Node>();
+  public closeNodeConsoleTrigger = new Subject<Node>();
 
   constructor() {}
 
   openConsoleForNode(node: Node) {
     this.nodeConsoleTrigger.emit(node);
   }
+
+  closeConsoleForNode(node: Node) {
+    this.closeNodeConsoleTrigger.next(node)
+  }
 }