Merge pull request #565 from shreyamalviya/auto-scroll-telemetry-console

Autoscroll to last line in telemetry console

monkey/monkey_island/cc/ui/src/components/pages/MapPage.js

@@ -18,8 +18,14 @@ class MapPageComponent extends AuthComponent {
       killPressed: false,
       showKillDialog: false,
       telemetry: [],
-      telemetryLastTimestamp: null
+      telemetryLastTimestamp: null,
+      isScrolledUp: false,
+      telemetryLines: 0,
+      telemetryCurrentLine: 0
     };
+    this.telemConsole = React.createRef();
+    this.handleScroll = this.handleScroll.bind(this);
+    this.scrollTop = 0;
   }
 
   events = {
@@ -67,6 +73,12 @@ class MapPageComponent extends AuthComponent {
               telemetryLastTimestamp: res['timestamp']
             });
           this.props.onStatusChange();
+
+          let telemConsoleRef = this.telemConsole.current;
+          if (!this.state.isScrolledUp) {
+            telemConsoleRef.scrollTop = telemConsoleRef.scrollHeight - telemConsoleRef.clientHeight;
+            this.scrollTop = telemConsoleRef.scrollTop;
+          }
         }
       });
   };
@@ -138,9 +150,22 @@ class MapPageComponent extends AuthComponent {
     );
   }
 
+  handleScroll(e) {
+    let element = e.target;
+
+    let telemetryStyle = window.getComputedStyle(element);
+    let telemetryLineHeight = parseInt((telemetryStyle.lineHeight).replace('px', ''));
+
+    this.setState({
+      isScrolledUp: (element.scrollTop < this.scrollTop),
+      telemetryCurrentLine: Math.trunc(element.scrollTop/telemetryLineHeight)+1,
+      telemetryLines: Math.trunc(element.scrollHeight/telemetryLineHeight)
+    });
+  }
+
   renderTelemetryConsole() {
     return (
-      <div className="telemetry-console">
+      <div className="telemetry-console" onScroll={this.handleScroll} ref={this.telemConsole}>
         {
           this.state.telemetry.map(this.renderTelemetryEntry)
         }
@@ -148,6 +173,14 @@ class MapPageComponent extends AuthComponent {
     );
   }
 
+  renderTelemetryLineCount() {
+    return (
+      <div className="telemetry-lines">
+        <b>[{this.state.telemetryCurrentLine}/{this.state.telemetryLines}]</b>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div>
@@ -170,6 +203,7 @@ class MapPageComponent extends AuthComponent {
           <div style={{height: '80vh'}}>
             <ReactiveGraph graph={this.state.graph} options={options} events={this.events}/>
           </div>
+          {this.renderTelemetryLineCount()}
         </Col>
         <Col xs={4}>
           <input className="form-control input-block"

monkey/monkey_island/cc/ui/src/styles/App.css

@@ -324,6 +324,17 @@ body {
   font-weight: bold;
 }
 
+.telemetry-lines {
+  z-index: 3;
+  position: absolute;
+  bottom: 103px;
+  right: 20px;
+  background: #000000cc;
+  border-radius: 5px;
+  padding: 1px;
+  color: white;
+}
+
 .map-legend {
   font-size: 18px;
 }
@@ -582,4 +593,3 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
-