Merge pull request #968 from GNS3/web-console-future-enhacements

Option to resize console

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

@@ -3,7 +3,7 @@
     (document:mousemove)="dragWidget($event)"
     (document:mouseup)="toggleDragging(false)">   
 </div>
-<!-- Option with resizing
+<!-- Option with resizing -->
 <div 
     class="consoleWrapper"
     [ngClass]="{lightTheme: isLightThemeEnabled}"
@@ -14,12 +14,12 @@
     [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
     [enableGhostResize]="true"
     (resizeStart)="toggleDragging(false)"
-    (resizeEnd)="onResizeEnd($event)"> -->
-<div 
+    (resizeEnd)="onResizeEnd($event)">
+<!-- <div 
     class="consoleWrapper"
     [ngClass]="{lightTheme: isLightThemeEnabled}"
     (mousedown)="toggleDragging(true)"
-    [ngStyle]="style">
+    [ngStyle]="style"> -->
 
     <div class="consoleHeader">
         <mat-tab-group class="tabs" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
@@ -53,7 +53,7 @@
 
     <app-log-console [hidden]="!(selected.value===0) || isMinimized" [server]="server" [project]="project"></app-log-console>
 
-    <div [hidden]="isMinimized" *ngFor="let node of nodes; let index = index">
+    <div class="xterm-console" [hidden]="isMinimized" *ngFor="let node of nodes; let index = index">
         <app-web-console [hidden]="!(selected.value===(index+1))" [server]="server" [node]="nodes[index]"></app-web-console>
     </div>
 </div>

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

@@ -5,7 +5,7 @@
     left: 20px;
     height: 180px;
     width: 600px;
-    background: #263238;
+    background: #000000!important;
     color: white;
     overflow: hidden;
     font-size: 12px;
@@ -38,10 +38,26 @@
     display: flex;
     padding: 2px;
     justify-content: space-between;
+    background: #263238!important;
+}
+
+:host ::ng-deep .mat-tab-label {
+    height: 3rem !important;
+    min-width: 8rem !important;
+}
+
+:host ::ng-deep .mat-tab-label.mat-tab-label-active {
+    border-bottom: 2px solid #0097a7;
+    box-sizing: border-box;
+    font-weight: 1200;
+}
+
+:host ::ng-deep .mat-ink-bar {
+    display: none !important;
 }
 
 .tabs {
-    width: 630px;
+    width: 80%;
 }
 
 .console {
@@ -54,6 +70,10 @@
     scrollbar-width: thin;
 }
 
+.xterm-console {
+    background: black;
+}
+
 .consoleInput {
     width: 100%;
     height: 30px;

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

@@ -24,12 +24,13 @@ export class ConsoleWrapperComponent implements OnInit {
 
     public style: object = {};
     public styleInside: object = { height: `120px` };
-
     public isDraggingEnabled: boolean = false;
     public isLightThemeEnabled: boolean = false;
-
     public isMinimized: boolean = false;
 
+    public resizedWidth: number = 720;
+    public resizedHeight: number = 480;
+
     constructor(
         private consoleService: NodeConsoleService,
         private themeService: ThemeService
@@ -55,9 +56,9 @@ export class ConsoleWrapperComponent implements OnInit {
     minimize(value: boolean) {
         this.isMinimized = value;
         if (!value) {
-            this.style = { bottom: '20px', left: '20px', width: '720px', height: '460px'};
+            this.style = { bottom: '20px', left: '20px', width: `${this.resizedWidth}px`, height: `${this.resizedHeight}px`}
         } else {
-            this.style = { bottom: '20px', left: '20px', width: '720px', height: '56px'};
+            this.style = { bottom: '20px', left: '20px', width: `${this.resizedWidth}px`, height: '56px'};
         }
     }
 
@@ -113,8 +114,8 @@ export class ConsoleWrapperComponent implements OnInit {
         if (
             event.rectangle.width &&
             event.rectangle.height &&
-            (event.rectangle.width < 720 ||
-            event.rectangle.height < 460)
+            (event.rectangle.width < 500 ||
+            event.rectangle.height < 100)
         ) {
             return false;
         }
@@ -134,6 +135,14 @@ export class ConsoleWrapperComponent implements OnInit {
             height: `${event.rectangle.height - 60}px`,
             width: `${event.rectangle.width}px`
         };
+
+        this.consoleService.consoleResized.next({
+            width: event.rectangle.width,
+            height: event.rectangle.height - 53
+        });
+
+        this.resizedWidth = event.rectangle.width;
+        this.resizedHeight = event.rectangle.height;
     }
 
     close() {

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

@@ -16,6 +16,7 @@ import { ResizeEvent } from 'angular-resizable-element';
 import { ThemeService } from '../../../services/theme.service';
 import { FormControl } from '@angular/forms';
 import { version } from '../../../version';
+import { NodeConsoleService } from '../../../services/nodeConsole.service';
 
 
 @Component({
@@ -63,10 +64,17 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
         private logEventsDataSource: LogEventsDataSource,
         private httpService: HttpServer,
         private themeService: ThemeService,
-        private cd: ChangeDetectorRef
+        private cd: ChangeDetectorRef,
+        private nodeConsoleService: NodeConsoleService,
+        private changeDetectorRef: ChangeDetectorRef
     ) {}
     
     ngOnInit() {
+        this.nodeConsoleService.consoleResized.subscribe(ev => {
+            this.style = { bottom: '20px', left: '20px', width: `${ev.width}px`, height: `${ev.height - 70}px`};
+            this.changeDetectorRef.detectChanges();
+        });
+
         this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false
         this.style = { bottom: '20px', left: '20px', width: '720px', height: '340px'};
 

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

@@ -31,8 +31,18 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
     
     ngOnInit() {
         this.consoleService.consoleResized.subscribe(ev => {
-            this.fitAddon.fit();
+            let numberOfColumns = Math.floor(ev.width / 9);
+            let numberOfRows = Math.floor(ev.height / 17);
+
+            this.consoleService.setNumberOfColumns(numberOfColumns);
+            this.consoleService.setNumberOfRows(numberOfRows);
+
+            this.term.resize(numberOfColumns, numberOfRows);
         });
+
+        if (this.consoleService.getNumberOfColumns() && this.consoleService.getNumberOfRows()){
+            this.term.resize(this.consoleService.getNumberOfColumns(), this.consoleService.getNumberOfRows());
+        }
     }
 
     ngAfterViewInit() {

src/app/services/nodeConsole.service.ts

@@ -15,8 +15,27 @@ export class NodeConsoleService {
   public readonly defaultNumberOfColumns = 80;
   public readonly defaultNumberOfRows = 24;
 
+  private lastNumberOfColumns: number;
+  private lastNumberOfRows: number;
+
   constructor() {}
 
+  getNumberOfColumns() {
+    return this.lastNumberOfColumns;
+  }
+
+  getNumberOfRows() {
+    return this.lastNumberOfRows;
+  }
+
+  setNumberOfColumns(value: number) {
+    this.lastNumberOfColumns = value;
+  }
+
+  setNumberOfRows(value: number) {
+    this.lastNumberOfRows = value;
+  }
+
   openConsoleForNode(node: Node) {
     this.nodeConsoleTrigger.emit(node);
   }
@@ -39,6 +58,6 @@ export class NodeConsoleService {
 }
 
 export interface ConsoleResizedEvent {
-  numberOfColumns: number,
-  numberOfRows: number
+  width: number,
+  height: number
 }