add autoscroll and limit height

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);

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>
     );
   }

embark-ui/src/general.css

@@ -6,17 +6,22 @@
   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;