diff --git a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js index ed84563a0..0ced4db6a 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/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 ( +
+ [{this.state.telemetryCurrentLine}/{this.state.telemetryLines}] +
+ ); + } + render() { return (
@@ -189,6 +200,7 @@ class MapPageComponent extends AuthComponent {
+ {this.renderTelemetryLineCount()}