Add scrolled pixel count for telemetry console

TODO: fix the pixel-line number thing

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

@@ -20,6 +20,8 @@ class MapPageComponent extends AuthComponent {
       telemetry: [],
       telemetryLastTimestamp: null,
       isScrolledUp: false,
+      telemetryLines: 0,
+      telemetryCurrentLine: 0,
     };
     this.telemConsole = React.createRef();
     this.handleScroll = this.handleScroll.bind(this);
@@ -64,15 +66,16 @@ class MapPageComponent extends AuthComponent {
       .then(res => {
         if ('telemetries' in res) {
           let newTelem = this.state.telemetry.concat(res['telemetries']);
+          let telemConsoleRef = this.telemConsole.current;
 
           this.setState(
             {
               telemetry: newTelem,
-              telemetryLastTimestamp: res['timestamp']
+              telemetryLastTimestamp: res['timestamp'],
+              telemetryLines: telemConsoleRef.scrollHeight,
             });
           this.props.onStatusChange();
 
-          let telemConsoleRef = this.telemConsole.current;
           if (!this.state.isScrolledUp) {
             telemConsoleRef.scrollTop = telemConsoleRef.scrollHeight - telemConsoleRef.clientHeight;
             this.scrollTop = telemConsoleRef.scrollTop;
@@ -151,9 +154,9 @@ class MapPageComponent extends AuthComponent {
   handleScroll(e) {
     let element = e.target;
     if (element.scrollTop < this.scrollTop) {
-      this.setState({isScrolledUp: true});
+      this.setState({isScrolledUp: true, telemetryCurrentLine: element.scrollTop});
     } else {
-      this.setState({isScrolledUp: false});
+      this.setState({isScrolledUp: false, telemetryCurrentLine: element.scrollTop});
     }
   }
 
@@ -167,6 +170,14 @@ class MapPageComponent extends AuthComponent {
     );
   }
 
+  renderTelemetryLineCount() {
+    return (
+      <div className="telemetry-lines">
+        <b>[{this.state.telemetryCurrentLine}/{this.state.telemetryLines}]</b>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div>
@@ -189,6 +200,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,11 @@ body {
   font-weight: bold;
 }
 
+.telemetry-lines {
+  position: absolute;
+  right: 0;
+}
+
 .map-legend {
   font-size: 18px;
 }