Log console with option to resize

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

@@ -1,9 +1,15 @@
-<div class="consoleWrapper">
+<div 
+    class="consoleWrapper"
+    [ngStyle]="style" 
+    mwlResizable
+    [validateResize]="validate"
+    [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
+    [enableGhostResize]="true"
+    (resizeEnd)="onResizeEnd($event)">
     <div class="consoleHeader">
         <div class="consoleFiltering">
-            <div class="consoleName">Console</div>
             <button class="filterButton" [matMenuTriggerFor]="filterMenu">
-                <mat-icon>keyboard_arrow_down</mat-icon>
+                Apply filter
             </button>
             <mat-menu #filterMenu="matMenu" xPosition="after">
                 <button (click)="applyFilter('all')" mat-menu-item>all</button>
@@ -20,7 +26,7 @@
         </div>
     </div>
 
-    <div #console class="console">
+    <div #console class="console" [ngStyle]="styleInside">
         <span class="console-item" *ngFor="let event of filteredEvents">
             {{event.message}} <br/>
         </span>

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

@@ -15,6 +15,11 @@
     background: #263238;
     color: white;
     border: none;
+    margin-top: 0px;
+    outline: none;
+    color: #dbd5d5;
+    font-weight: bold;
+    padding: 0px;
 }
 
 .consoleFiltering {

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

@@ -12,6 +12,7 @@ import { Port } from '../../../models/port';
 import { LogEventsDataSource } from './log-events-datasource';
 import { HttpServer } from '../../../services/http-server.service';
 import { LogEvent } from '../../../models/logEvent';
+import { ResizeEvent } from 'angular-resizable-element';
 
 
 @Component({
@@ -44,6 +45,9 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
     private regexShow: RegExp = /^show (.*?)$/;
     private regexConsole: RegExp = /^console (.*?)$/;
 
+    public style: object = {};
+    public styleInside: object = { height: `120px` };
+
     constructor(
         private projectWebServiceHandler: ProjectWebServiceHandler,
         private nodeService: NodeService,
@@ -124,6 +128,33 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
         this.infoSubscription.unsubscribe();
     }
 
+    validate(event: ResizeEvent): boolean {
+        if (
+            event.rectangle.width &&
+            event.rectangle.height &&
+            (event.rectangle.width < 600 ||
+            event.rectangle.height < 180)
+        ) {
+            return false;
+        }
+        return true;
+    }
+
+    onResizeEnd(event: ResizeEvent): void {
+        this.style = {
+            position: 'fixed',
+            left: `${event.rectangle.left}px`,
+            top: `${event.rectangle.top}px`,
+            width: `${event.rectangle.width}px`,
+            height: `${event.rectangle.height}px`
+        };
+
+        this.styleInside = {
+            height: `${event.rectangle.height - 60}px`,
+            width: `${event.rectangle.width}px`
+        };
+    }
+
     applyFilter(filter: string) {
         this.selectedFilter = filter;
         this.filteredEvents = this.getFilteredEvents();

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

@@ -79,8 +79,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public server: Server;
   public ws: WebSocket;
   public isProjectMapMenuVisible: boolean = false;
-  public isConsoleVisible: boolean = false;
-  public isTopologySummaryVisible: boolean = false;
+  public isConsoleVisible: boolean = true;
+  public isTopologySummaryVisible: boolean = true;
   public isInterfaceLabelVisible: boolean = false;
 
   tools = {

src/app/services/mapsettings.service.ts

@@ -4,8 +4,8 @@ import { Subject } from 'rxjs';
 @Injectable()
 export class MapSettingsService {
     public isMapLocked = new Subject<boolean>();
-    public isTopologySummaryVisible: boolean = false;
-    public isLogConsoleVisible: boolean = false;
+    public isTopologySummaryVisible: boolean = true;
+    public isLogConsoleVisible: boolean = true;
     public interfaceLabels: Map<string, boolean> = new Map<string, boolean>();
 
     constructor() {}