Proper order for status logs (#3055) (#3062)

js/src/views/Status/components/Debug/Debug.css

@@ -39,9 +39,26 @@
 .logs {
   margin: 0;
   max-width: 100%;
+}
+
+.log {
+  font-family: monospace;
   white-space: pre-line;
   word-wrap: break-word;
   color: #aaa;
+  margin: 0.5em 0;
+  display: flex;
+  align-items: center;
+}
+
+.logDate {
+  color: green;
+  font-size: 0.85em;
+  margin-right: 0.5em;
+}
+
+.logText {
+  flex: 1;
 }
 
 .stopped {

js/src/views/Status/components/Debug/Debug.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import AvPause from 'material-ui/svg-icons/av/pause';
 import AvPlay from 'material-ui/svg-icons/av/play-arrow';
 import AvReplay from 'material-ui/svg-icons/av/replay';
+import ReorderIcon from 'material-ui/svg-icons/action/reorder';
 
 import { Container, ContainerTitle } from '../../../../ui';
 
@@ -32,6 +33,10 @@ export default class Debug extends Component {
     nodeStatus: PropTypes.object.isRequired
   }
 
+  state = {
+    reversed: true
+  }
+
   render () {
     const { nodeStatus } = this.props;
     const { devLogsLevels } = nodeStatus;
@@ -66,16 +71,43 @@ export default class Debug extends Component {
 
   renderLogs () {
     const { nodeStatus } = this.props;
+    const { reversed } = this.state;
     const { devLogs } = nodeStatus;
 
+    const dateRegex = /^(\d{4}.\d{2}.\d{2}.\d{2}.\d{2}.\d{2})(.*)$/i;
+
     if (!devLogs) {
       return null;
     }
 
+    const logs = reversed
+      ? [].concat(devLogs).reverse()
+      : [].concat(devLogs);
+
+    const text = logs
+      .map((log, index) => {
+        const logDate = dateRegex.exec(log);
+
+        if (!logDate) {
           return (
-      <pre className={ styles.logs }>
+            <p key={ index } className={ styles.log }>
-        { devLogs.reverse().join('\n') }
+              { log }
-      </pre>
+            </p>
+          );
+        }
+
+        return (
+          <p key={ index } className={ styles.log }>
+            <span className={ styles.logDate }>{ logDate[1] }</span>
+            <span className={ styles.logText }>{ logDate[2] }</span>
+          </p>
+        );
+      });
+
+    return (
+      <div className={ styles.logs }>
+        { text }
+      </div>
     );
   }
 
@@ -89,6 +121,7 @@ export default class Debug extends Component {
       <div className={ styles.actions }>
         <a onClick={ this.toggle }>{ toggleButton }</a>
         <a onClick={ this.clear }><AvReplay /></a>
+        <a onClick={ this.reverse } title='Reverse Order'><ReorderIcon /></a>
       </div>
     );
   }
@@ -105,4 +138,9 @@ export default class Debug extends Component {
 
     toggleStatusLogs(!devLogsEnabled);
   }
+
+  reverse = () => {
+    const { reversed } = this.state;
+    this.setState({ reversed: !reversed });
+  }
 }