From 42f6d79982bf54696599c6af8d6ecdfe265ea89b Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 16:21:41 -0400
Subject: [PATCH] add autoscroll and limit height

---
 embark-ui/src/components/Logs.js    | 14 ++++++++++++
 embark-ui/src/components/Process.js |  6 +++--
 embark-ui/src/general.css           | 35 ++++++++++++++++++++---------
 3 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 embark-ui/src/components/Logs.js

diff --git a/embark-ui/src/components/Logs.js b/embark-ui/src/components/Logs.js
new file mode 100644
index 00000000..d762a8cb
--- /dev/null
+++ b/embark-ui/src/components/Logs.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import autoscroll from 'autoscroll-react';
+
+class Logs extends React.Component {
+  render() {
+    return (
+      <div className="logs" {...this.props}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default autoscroll(Logs);
diff --git a/embark-ui/src/components/Process.js b/embark-ui/src/components/Process.js
index 8c114a41..215ef3c9 100644
--- a/embark-ui/src/components/Process.js
+++ b/embark-ui/src/components/Process.js
@@ -2,6 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Page} from "tabler-react";
 import Convert from 'ansi-to-html';
+import Logs from './Logs';
+
 const convert = new Convert();
 
 class Process extends Component {
@@ -11,11 +13,11 @@ class Process extends Component {
       <Page.Content>
         <Page.Header><Page.Title className="text-capitalize">{process.name}</Page.Title></Page.Header>
         <p className="text-capitalize">State: {process.state}</p>
-        <div className="logs">
+        <Logs>
           {
             processLogs.map((item, i) => <p key={i} className={item.logLevel} dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
           }
-        </div>
+        </Logs>
       </Page.Content>
     );
   }
diff --git a/embark-ui/src/general.css b/embark-ui/src/general.css
index e2aac6ab..cbd018ec 100644
--- a/embark-ui/src/general.css
+++ b/embark-ui/src/general.css
@@ -1,22 +1,27 @@
 .logs {
-  margin:  10px 0;
+  margin: 10px 0;
   background-color: #333333;
   font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   font-size: 14px;
   color: white;
   padding: 10px;
   border-radius: 8px;
+  max-height: 400px;
+  overflow: auto;
 }
 
 .logs .error {
   color: #dc3546;
 }
+
 .logs .warn {
   color: #fec107;
 }
+
 .logs .debug {
   color: #b7c1cc;
 }
+
 .logs .trace {
   color: #8f98a2;
 }
@@ -25,38 +30,48 @@
   white-space: pre-wrap;
   font-family: monospace;
 }
-.card.card-fullscreen{
+
+.card.card-fullscreen {
   z-index: 6;
 }
-.card.warnings-card, .card.errors-card{
+
+.card.warnings-card, .card.errors-card {
   text-transform: capitalize;
 }
-.card.warnings-card .card-options a, .card.errors-card .card-options a{
-  cursor:pointer;
+
+.card.warnings-card .card-options a, .card.errors-card .card-options a {
+  cursor: pointer;
 }
+
 .compilation-summary {
   float: right;
   margin-bottom: 3px;
   visibility: hidden;
 }
-.compilation-summary.visible{
+
+.compilation-summary.visible {
   visibility: visible;
 }
-.compilation-summary .badge-link:not(:last-child){
+
+.compilation-summary .badge-link:not(:last-child) {
   margin-right: 5px;
 }
+
 .ace_editor {
   margin-bottom: 24px;
 }
-.loader, .loader:before, .loader:after{
+
+.loader, .loader:before, .loader:after {
   width: 1.2rem;
   height: 1.2rem;
 }
-.loader:before, .loader:after{
+
+.loader:before, .loader:after {
   margin: -0.6rem 0 0 -0.6rem;
   left: 0;
 }
-.loader, .loader-text{
+
+.loader, .loader-text {
   display: inline-block;
   vertical-align: top;
   padding-left: 0.6rem;