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 278b4c791..f75091270 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/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 ( -