Introducing filters

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

@@ -1,13 +1,29 @@
 <div class="consoleWrapper">
     <div class="consoleHeader">
-        <span>Console</span>
+        <div>
+            Console
+            <mat-form-field>
+                <mat-label>Select filter</mat-label>
+                <mat-select [(ngModel)]="selectedFilter" name="filter" (selectionChange)="applyFilter()">
+                    <mat-option *ngFor="let filter of filters" [value]="filter">
+                        {{filter}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
         <div class="consoleMenu">
             <mat-icon (click)="close()" class="closeButton">close</mat-icon>
         </div>
     </div>
+
+    <div #console class="console">
+        <span *ngFor="let event of filteredEvents">
+            {{event.message}} <br/>
+        </span>
+    </div>
     <div class="divider"></div>
-    <div #console class="console"></div>
+
-    <div class="divider"></div>
     <div class="consoleInput">
         <mat-icon>keyboard_arrow_right</mat-icon>
         <input
@@ -17,4 +33,5 @@
             type="text"
             [(ngModel)]="command"/>
     </div>
+    <div class="divider"></div>
 </div>

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

@@ -3,7 +3,7 @@
     position: fixed;
     bottom: 20px;
     left: 20px;
-    height: 120px;
+    height: 180px;
     width: 600px;
     background: #263238;
     color: white;
@@ -13,18 +13,18 @@
 
 .consoleHeader {
     width: 100%;
-    height: 24px;
+    height: 50px;
     font-size: 12px;
     overflow: hidden;
     margin-right: 5px;
     display: flex;
-    padding: 2px;
+    padding: 5px;
     justify-content: space-between;
 }
 
 .console {
     width: 596px;
-    height: 64px;
+    height: 100px;
     overflow-y: scroll;
     margin: 2px;
     color: #dbd5d5;
@@ -34,7 +34,7 @@
 
 .consoleInput {
     width: 100%;
-    height: 24px;
+    height: 30px;
     padding: 2px;
     display: flex;
 }
@@ -53,11 +53,17 @@
 }
 
 mat-icon {
-    font-size: 18px;
+    margin-top: 4px;
+    font-size: 20px;
     width: 20px;
     height: 20px;
 }
 
+mat-checkbox {
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
 input:focus{
     outline: none;
 }

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

@@ -11,6 +11,7 @@ import { Node } from '../../../cartography/models/node';
 import { Port } from '../../../models/port';
 import { LogEventsDataSource } from './log-events-datasource';
 import { HttpServer } from '../../../services/http-server.service';
+import { LogEvent } from '../../../models/logEvent';
 
 
 @Component({
@@ -29,6 +30,10 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
     private serverRequestsSubscription: Subscription;
     command: string = '';
 
+    filters: string[] = ['all', 'errors', 'warnings', 'map updates', 'server requests'];
+    selectedFilter: string = 'all';
+    filteredEvents: LogEvent[] = [];
+
     private regexStart: RegExp = /^start (.*?)$/;
     private regexStop: RegExp = /^stop (.*?)$/;
     private regexSuspend: RegExp = /^suspend (.*?)$/;
@@ -47,25 +52,36 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
         this.nodeSubscription = this.projectWebServiceHandler.nodeNotificationEmitter.subscribe((event) => {
             let node: Node = event.event as Node;
             let message = `Event received: ${event.action} - ${this.printNode(node)}.`
-            this.showMessage(message);
+            this.showMessage({
+                type: 'map update',
+                message: message
+            });
         });
         this.linkSubscription = this.projectWebServiceHandler.linkNotificationEmitter.subscribe((event) => {
             let link: Link = event.event as Link;
             let message = `Event received: ${event.action} - ${this.printLink(link)}.`
-            this.showMessage(message);
+            this.showMessage({
+                type: 'map update',
+                message: message
+            });
         });
         this.drawingSubscription = this.projectWebServiceHandler.drawingNotificationEmitter.subscribe((event) => {
             let drawing: Drawing = event.event as Drawing;
             let message = `Event received: ${event.action} - ${this.printDrawing(drawing)}.`
-            this.showMessage(message);
+            this.showMessage({
+                type: 'map update',
+                message: message
+            });
+        });
+        this.serverRequestsSubscription = this.httpService.requestsNotificationEmitter.subscribe((message) => {
+            this.showMessage({
+                type: 'server request',
+                message: message
             });
-        this.serverRequestsSubscription = this.httpService.requestsNotificationEmitter.subscribe((event) => {
-            this.showMessage(event);
         });
     }
 
     ngAfterViewInit() {
-        this.console.nativeElement.innerHTML = this.logEventsDataSource.getItems()[0] ? this.logEventsDataSource.getItems()[0] : '';
         this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
     }
 
@@ -73,6 +89,11 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
         this.nodeSubscription.unsubscribe();
         this.linkSubscription.unsubscribe();
         this.drawingSubscription.unsubscribe();
+        this.serverRequestsSubscription.unsubscribe();
+    }
+
+    applyFilter() {
+        this.filteredEvents = this.getFilteredEvents();
     }
 
     onKeyDown(event) {
@@ -83,28 +104,28 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
 
     handleCommand() {
         if (this.command === 'help') {
-            this.showMessage("Available commands: help, version, start all, start {node name}, stop all, stop {node name}, suspend all, suspend {node name}, reload all, reload {node name}, show {node name}.")
+            this.showCommand("Available commands: help, version, start all, start {node name}, stop all, stop {node name}, suspend all, suspend {node name}, reload all, reload {node name}, show {node name}.")
         } else if (this.command === 'version') {
-            this.showMessage("Current version: 2019.2.0");
+            this.showCommand("Current version: 2019.2.0");
         } else if (this.command === 'start all') {
-            this.showMessage("Starting all nodes...");
+            this.showCommand("Starting all nodes...");
             this.nodeService.startAll(this.server, this.project).subscribe(() => {
-                this.showMessage("All nodes started.")
+                this.showCommand("All nodes started.")
             });
         } else if (this.command === 'stop all') {
-            this.showMessage("Stopping all nodes...");
+            this.showCommand("Stopping all nodes...");
             this.nodeService.stopAll(this.server, this.project).subscribe(() => {
-                this.showMessage("All nodes stopped.")
+                this.showCommand("All nodes stopped.")
             });
         } else if (this.command === 'suspend all') {
-            this.showMessage("Suspending all nodes...");
+            this.showCommand("Suspending all nodes...");
             this.nodeService.suspendAll(this.server, this.project).subscribe(() => {
-                this.showMessage("All nodes suspended.")
+                this.showCommand("All nodes suspended.")
             });
         } else if (this.command === 'reload all') {
-            this.showMessage("Reloading all nodes...");
+            this.showCommand("Reloading all nodes...");
             this.nodeService.reloadAll(this.server, this.project).subscribe(() => {
-                this.showMessage("All nodes reloaded.")
+                this.showCommand("All nodes reloaded.")
             });
         } else if (
             this.regexStart.test(this.command) || this.regexStop.test(this.command) || this.regexSuspend.test(this.command) || this.regexReload.test(this.command) || this.regexShow.test(this.command)) {
@@ -112,47 +133,66 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
             let node = this.nodesDataSource.getItems().find(n => n.name.valueOf() === splittedCommand[1].valueOf());
             if (node) {
                 if (this.regexStart.test(this.command)) {
-                    this.showMessage(`Starting node ${splittedCommand[1]}...`);
+                    this.showCommand(`Starting node ${splittedCommand[1]}...`);
-                    this.nodeService.start(this.server, node).subscribe(() => this.showMessage(`Node ${node.name} started.`));
+                    this.nodeService.start(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} started.`));
                 }
                 else if (this.regexStop.test(this.command)) {
-                    this.showMessage(`Stopping node ${splittedCommand[1]}...`);
+                    this.showCommand(`Stopping node ${splittedCommand[1]}...`);
-                    this.nodeService.stop(this.server, node).subscribe(() => this.showMessage(`Node ${node.name} stopped.`));
+                    this.nodeService.stop(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} stopped.`));
                 }
                 else if (this.regexSuspend.test(this.command)) {
-                    this.showMessage(`Suspending node ${splittedCommand[1]}...`);
+                    this.showCommand(`Suspending node ${splittedCommand[1]}...`);
-                    this.nodeService.suspend(this.server, node).subscribe(() => this.showMessage(`Node ${node.name} suspended.`));
+                    this.nodeService.suspend(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} suspended.`));
                 }
                 else if (this.regexReload.test(this.command)) {
-                    this.showMessage(`Reloading node ${splittedCommand[1]}...`);
+                    this.showCommand(`Reloading node ${splittedCommand[1]}...`);
-                    this.nodeService.reload(this.server, node).subscribe(() => this.showMessage(`Node ${node.name} reloaded.`));
+                    this.nodeService.reload(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} reloaded.`));
                 }
                 else if (this.regexShow.test(this.command)) {
-                    this.showMessage(`Information about node ${node.name}:`);
+                    this.showCommand(`Information about node ${node.name}:`);
-                    this.showMessage(this.printNode(node));
+                    this.showCommand(this.printNode(node));
                 }
             } else {
-                this.showMessage(`Node with ${splittedCommand[1]} name was not found.`);
+                this.showCommand(`Node with ${splittedCommand[1]} name was not found.`);
             }
         } else {
-            this.showMessage(`Unknown syntax: ${this.command}`);
+            this.showCommand(`Unknown syntax: ${this.command}`);
         }
         this.command = '';
     }
 
     clearConsole() {
-        this.console.nativeElement.innerHTML = '';
+        this.filteredEvents = [];
         this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
     }
 
-    showMessage(message: string) {
+    showCommand(message: string) {
-        this.logEventsDataSource.clear();
+        this.showMessage({
-        this.logEventsDataSource.add(this.console.nativeElement.innerHTML + message + " <br />");
+            type: 'command',
+            message: message
+        });
+    }
 
-        this.console.nativeElement.innerHTML += message += " <br />";
+    showMessage(event: LogEvent) {
+        this.logEventsDataSource.add(event);
+        this.filteredEvents = this.getFilteredEvents();
         this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
     }
 
+    getFilteredEvents(): LogEvent[] {
+        if (this.selectedFilter === 'server requests') {
+            return this.logEventsDataSource.getItems().filter(n => n.type === 'server request' || n.type === 'command');
+        } else if (this.selectedFilter === 'errors') {
+            return this.logEventsDataSource.getItems().filter(n => n.type === 'error' || n.type === 'command');
+        } else if (this.selectedFilter === 'warnings') {
+            return this.logEventsDataSource.getItems().filter(n => n.type === 'warning' || n.type === 'command');
+        } else if (this.selectedFilter === 'map updates') {
+            return this.logEventsDataSource.getItems().filter(n => n.type === 'map update' || n.type === 'command');
+        } else {
+            return this.logEventsDataSource.getItems();
+        }
+    }
+
     printNode(node: Node): string {
         return `command_line: ${node.command_line}, 
             compute_id: ${node.compute_id}, 

src/app/components/project-map/log-console/log-events-datasource.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
 import { DataSource } from '../../../cartography/datasources/datasource';
+import { LogEvent } from '../../../models/logEvent';
 
 @Injectable()
-export class LogEventsDataSource extends DataSource<string> {
+export class LogEventsDataSource extends DataSource<LogEvent> {
-  protected getItemKey(log: string) {
+  protected getItemKey(log: LogEvent) {
     return log;
   }
 }

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

@@ -136,6 +136,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.settings = this.settingsService.getAll();
     this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
+    this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;
 
     this.progressService.activate();
     const routeSub = this.route.paramMap.subscribe((paramMap: ParamMap) => {
@@ -275,6 +276,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.ws = new WebSocket(this.projectService.notificationsPath(this.server, project.project_id));
 
     this.ws.onmessage = (event: MessageEvent) => {
+      // console.log(event);
       this.projectWebServiceHandler.handleMessage(JSON.parse(event.data));
     };
 
@@ -406,6 +408,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   public toggleShowConsole(visible: boolean) {
     this.isConsoleVisible = visible;
+    this.mapSettingsService.toggleLogConsole(this.isConsoleVisible);
   }
   
   public toggleShowTopologySummary(visible: boolean) {

src/app/models/logEvent.ts

@@ -0,0 +1,4 @@
+export class LogEvent {
+    type: string;
+    message: string;
+}

src/app/services/mapsettings.service.ts

@@ -5,6 +5,7 @@ import { Subject } from 'rxjs';
 export class MapSettingsService {
     public isMapLocked = new Subject<boolean>();
     public isTopologySummaryVisible: boolean = false;
+    public isLogConsoleVisible: boolean = false;
 
     constructor() {}
 
@@ -15,4 +16,8 @@ export class MapSettingsService {
     toggleTopologySummary(value: boolean) {
         this.isTopologySummaryVisible = value;
     }
+
+    toggleLogConsole(value: boolean) {
+        this.isLogConsoleVisible = value;
+    }
 }