Add support for proccess's output being shown in a grid

package.json

@@ -32,6 +32,7 @@
     "chalk": "^3.0.0",
     "date-fns": "^2.16.1",
     "lodash": "^4.17.20",
+    "neo-blessed": "^0.2.0",
     "read-pkg": "^5.2.0",
     "rxjs": "^6.6.3",
     "spawn-command": "^0.0.2-1",

src/flow-control/log-output.js

@@ -1,12 +1,95 @@
+const Rx = require('rxjs');
+const blessed = require("neo-blessed");
+
+const DEFAULT_SCROLL_OPTIONS = {
+    scrollable: true,
+    input: true,
+    alwaysScroll: true,
+    scrollbar: {
+        ch: " ",
+        inverse: true
+    },
+    keys: true,
+    vi: true,
+    mouse: true
+};
+
 module.exports = class LogOutput {
     constructor({ logger }) {
         this.logger = logger;
+
+        this.screen = blessed.screen({
+            smartCSR: true,
+            dockBorders: false,
+            fullUnicode: true,
+        });
+
     }
 
     handle(commands) {
-        commands.forEach(command => {
-            command.stdout.subscribe(text => this.logger.logCommandText(text.toString(), command));
-            command.stderr.subscribe(text => this.logger.logCommandText(text.toString(), command));
+
+        // Quit on Escape, q, or Control-C.
+        this.screen.key(['escape', 'q', 'C-c'], function(ch, key) {
+
+            const killObservables = commands.map(command => {
+                return Rx.Observable.create(observer => {
+                    command.kill('SIGINT', error => {
+                        console.error(error);
+                        observer.complete();
+                    });
+                });
+            });
+
+            Rx.forkJoin(killObservables).subscribe({
+                complete() {
+                    process.kill(process.pid, "SIGINT");
+                }
+            });
+        });
+
+        const numberOfRows = Math.ceil(commands.length / 2);
+
+        commands.forEach((command, index) => {
+
+            const leftPosition = index % 2 === 0 ? "0%": "50%";
+            const commandRow = Math.floor(index / 2) + 1;
+            const rowSize = (100 / numberOfRows);
+            const topPosition = (commandRow - 1) * rowSize;
+
+
+            const commandPrefix = this.logger.getPrefix(command);
+            const commandLog = blessed.box({
+                label: commandPrefix,
+                width: "50%",
+                height: `${rowSize}%`,
+                left: leftPosition,
+                top: `${topPosition}%`,
+                border: {
+                    type: "line",
+                },
+                style: {
+                    border: {
+                        fg: command.prefixColor.toString()
+                    }
+                }
+            });
+            const commandLogText = blessed.log(
+                Object.assign({}, DEFAULT_SCROLL_OPTIONS, {
+                    parent: commandLog,
+                    tags: true,
+                })
+            );
+            this.screen.append(commandLog);
+
+
+            command.stdout.subscribe(text => {
+                commandLogText.log(text.toString());
+                commandLogText.screen.render();
+            });
+            command.stderr.subscribe(text => {
+                commandLogText.log(text.toString());
+                commandLogText.screen.render();
+            });
         });
 
         return commands;