From e81c044a17c933f81471c28d493608aa879f9724 Mon Sep 17 00:00:00 2001 From: Shreya Date: Sun, 8 Mar 2020 19:45:18 +0530 Subject: [PATCH 01/11] Autoscroll to last line in telemetry console TODO: Don't scroll to last line if user has scrolled up --- monkey/monkey_island/cc/ui/src/components/pages/MapPage.js | 2 ++ 1 file changed, 2 insertions(+) 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..095d5e7f0 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -66,6 +66,8 @@ class MapPageComponent extends AuthComponent { telemetry: newTelem, telemetryLastTimestamp: res['timestamp'] }); + var telemConsole = document.querySelector('div.telemetry-console'); + telemConsole.scrollTop = telemConsole.scrollHeight - telemConsole.clientHeight this.props.onStatusChange(); } }); From 67d88e8ab2a1d377bc772213daf1bf1eb96ee552 Mon Sep 17 00:00:00 2001 From: Shreya Date: Tue, 10 Mar 2020 00:39:35 +0530 Subject: [PATCH 02/11] Update code to use refs --- monkey/monkey_island/cc/ui/src/components/pages/MapPage.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 095d5e7f0..96c7c2665 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,7 @@ class MapPageComponent extends AuthComponent { telemetry: [], telemetryLastTimestamp: null }; + this.telemConsole = React.createRef(); } events = { @@ -66,8 +67,8 @@ class MapPageComponent extends AuthComponent { telemetry: newTelem, telemetryLastTimestamp: res['timestamp'] }); - var telemConsole = document.querySelector('div.telemetry-console'); - telemConsole.scrollTop = telemConsole.scrollHeight - telemConsole.clientHeight + var telemConsoleRef = this.telemConsole.current; + telemConsoleRef.scrollTop = telemConsoleRef.scrollHeight - telemConsoleRef.clientHeight this.props.onStatusChange(); } }); @@ -142,7 +143,7 @@ class MapPageComponent extends AuthComponent { renderTelemetryConsole() { return ( -
+
{ this.state.telemetry.map(this.renderTelemetryEntry) } From 847673892555241eb4943653b0cdceafdd5f5b35 Mon Sep 17 00:00:00 2001 From: PrajwalM2212 Date: Thu, 12 Mar 2020 20:09:29 +0530 Subject: [PATCH 03/11] Add TODO 1 --- .../cc/ui/src/components/pages/MapPage.js | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) 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 96c7c2665..78e8ba1d3 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -18,9 +18,12 @@ class MapPageComponent extends AuthComponent { killPressed: false, showKillDialog: false, telemetry: [], - telemetryLastTimestamp: null + telemetryLastTimestamp: null, + movedTop: false, }; this.telemConsole = React.createRef(); + this.handleScroll = this.handleScroll.bind(this); + this.scrollTop = 0; } events = { @@ -67,9 +70,13 @@ class MapPageComponent extends AuthComponent { telemetry: newTelem, telemetryLastTimestamp: res['timestamp'] }); - var telemConsoleRef = this.telemConsole.current; - telemConsoleRef.scrollTop = telemConsoleRef.scrollHeight - telemConsoleRef.clientHeight this.props.onStatusChange(); + + let telemConsoleRef = this.telemConsole.current; + if(!this.state.movedTop){ + telemConsoleRef.scrollTop = telemConsoleRef.scrollHeight - telemConsoleRef.clientHeight; + this.scrollTop = telemConsoleRef.scrollTop; + } } }); }; @@ -141,9 +148,20 @@ class MapPageComponent extends AuthComponent { ); } + handleScroll(e){ + + let element = e.target; + if(element.scrollTop < this.scrollTop){ + this.setState({movedTop: true}); + }else{ + this.setState({movedTop: false}); + } + + } + renderTelemetryConsole() { return ( -
+
{ this.state.telemetry.map(this.renderTelemetryEntry) } From de554bfa0beb751c8341322bc857e4811ec2bd4c Mon Sep 17 00:00:00 2001 From: Shreya Date: Thu, 12 Mar 2020 22:40:25 +0530 Subject: [PATCH 04/11] Code formatting --- .../cc/ui/src/components/pages/MapPage.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) 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 78e8ba1d3..ed84563a0 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -19,7 +19,7 @@ class MapPageComponent extends AuthComponent { showKillDialog: false, telemetry: [], telemetryLastTimestamp: null, - movedTop: false, + isScrolledUp: false, }; this.telemConsole = React.createRef(); this.handleScroll = this.handleScroll.bind(this); @@ -73,7 +73,7 @@ class MapPageComponent extends AuthComponent { this.props.onStatusChange(); let telemConsoleRef = this.telemConsole.current; - if(!this.state.movedTop){ + if (!this.state.isScrolledUp) { telemConsoleRef.scrollTop = telemConsoleRef.scrollHeight - telemConsoleRef.clientHeight; this.scrollTop = telemConsoleRef.scrollTop; } @@ -148,15 +148,13 @@ class MapPageComponent extends AuthComponent { ); } - handleScroll(e){ - + handleScroll(e) { let element = e.target; - if(element.scrollTop < this.scrollTop){ - this.setState({movedTop: true}); - }else{ - this.setState({movedTop: false}); + if (element.scrollTop < this.scrollTop) { + this.setState({isScrolledUp: true}); + } else { + this.setState({isScrolledUp: false}); } - } renderTelemetryConsole() { From d2c315b93f17ed85b1a6116716f64c8b574157b0 Mon Sep 17 00:00:00 2001 From: Shreya Date: Fri, 13 Mar 2020 01:20:33 +0530 Subject: [PATCH 05/11] Add scrolled pixel count for telemetry console TODO: fix the pixel-line number thing --- .../cc/ui/src/components/pages/MapPage.js | 20 +++++++++++++++---- monkey/monkey_island/cc/ui/src/styles/App.css | 5 +++++ 2 files changed, 21 insertions(+), 4 deletions(-) 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()} Date: Fri, 13 Mar 2020 11:26:45 +0530 Subject: [PATCH 06/11] Display line count for telemetry console --- .../cc/ui/src/components/pages/MapPage.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) 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 0ced4db6a..ce5bf3486 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -66,16 +66,15 @@ 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'], - telemetryLines: telemConsoleRef.scrollHeight, + 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; @@ -153,10 +152,22 @@ class MapPageComponent extends AuthComponent { handleScroll(e) { let element = e.target; + + let telemetryStyle = window.getComputedStyle(element) + let telemetryLineHeight = parseInt((telemetryStyle.lineHeight).replace('px', '')) + if (element.scrollTop < this.scrollTop) { - this.setState({isScrolledUp: true, telemetryCurrentLine: element.scrollTop}); + this.setState({ + isScrolledUp: true, + telemetryCurrentLine: parseInt(element.scrollTop/telemetryLineHeight)+1, + telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight), + }); } else { - this.setState({isScrolledUp: false, telemetryCurrentLine: element.scrollTop}); + this.setState({ + isScrolledUp: false, + telemetryCurrentLine: parseInt(element.scrollTop/telemetryLineHeight)+1, + telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight), + }); } } From 0a7da90150244e326b57eb4f169abf74af327362 Mon Sep 17 00:00:00 2001 From: Shreya Date: Fri, 13 Mar 2020 11:30:45 +0530 Subject: [PATCH 07/11] Refactor code --- .../monkey_island/cc/ui/src/components/pages/MapPage.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) 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 ce5bf3486..2a16d30da 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -156,17 +156,18 @@ class MapPageComponent extends AuthComponent { let telemetryStyle = window.getComputedStyle(element) let telemetryLineHeight = parseInt((telemetryStyle.lineHeight).replace('px', '')) + this.setState({ + telemetryCurrentLine: parseInt(element.scrollTop/telemetryLineHeight)+1, + telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight), + }); + if (element.scrollTop < this.scrollTop) { this.setState({ isScrolledUp: true, - telemetryCurrentLine: parseInt(element.scrollTop/telemetryLineHeight)+1, - telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight), }); } else { this.setState({ isScrolledUp: false, - telemetryCurrentLine: parseInt(element.scrollTop/telemetryLineHeight)+1, - telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight), }); } } From d1a9d022245632bea430930f6a4ad9462bfe0a94 Mon Sep 17 00:00:00 2001 From: Shreya Date: Fri, 13 Mar 2020 11:37:59 +0530 Subject: [PATCH 08/11] Pass tests --- .../monkey_island/cc/ui/src/components/pages/MapPage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 2a16d30da..d92030437 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -21,7 +21,7 @@ class MapPageComponent extends AuthComponent { telemetryLastTimestamp: null, isScrolledUp: false, telemetryLines: 0, - telemetryCurrentLine: 0, + telemetryCurrentLine: 0 }; this.telemConsole = React.createRef(); this.handleScroll = this.handleScroll.bind(this); @@ -158,16 +158,16 @@ class MapPageComponent extends AuthComponent { this.setState({ telemetryCurrentLine: parseInt(element.scrollTop/telemetryLineHeight)+1, - telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight), + telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight) }); if (element.scrollTop < this.scrollTop) { this.setState({ - isScrolledUp: true, + isScrolledUp: true }); } else { this.setState({ - isScrolledUp: false, + isScrolledUp: false }); } } From c22538fb08bafb0573df8e86431472d9c0af939a Mon Sep 17 00:00:00 2001 From: Shreya Date: Fri, 13 Mar 2020 21:14:28 +0530 Subject: [PATCH 09/11] Simplify code --- .../cc/ui/src/components/pages/MapPage.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) 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 d92030437..88c192437 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -157,19 +157,10 @@ class MapPageComponent extends AuthComponent { let telemetryLineHeight = parseInt((telemetryStyle.lineHeight).replace('px', '')) this.setState({ + isScrolledUp: !!(element.scrollTop < this.scrollTop), telemetryCurrentLine: parseInt(element.scrollTop/telemetryLineHeight)+1, telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight) }); - - if (element.scrollTop < this.scrollTop) { - this.setState({ - isScrolledUp: true - }); - } else { - this.setState({ - isScrolledUp: false - }); - } } renderTelemetryConsole() { From b4137587fc1139cb2b458b5b0240538eb2c716ce Mon Sep 17 00:00:00 2001 From: Shreya Date: Wed, 18 Mar 2020 12:57:20 +0530 Subject: [PATCH 10/11] Change position of lines box to top-right corner of console --- .../cc/ui/src/components/pages/MapPage.js | 10 +++++----- monkey/monkey_island/cc/ui/src/styles/App.css | 8 +++++++- 2 files changed, 12 insertions(+), 6 deletions(-) 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 88c192437..f75091270 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -153,13 +153,13 @@ class MapPageComponent extends AuthComponent { handleScroll(e) { let element = e.target; - let telemetryStyle = window.getComputedStyle(element) - let telemetryLineHeight = parseInt((telemetryStyle.lineHeight).replace('px', '')) + let telemetryStyle = window.getComputedStyle(element); + let telemetryLineHeight = parseInt((telemetryStyle.lineHeight).replace('px', '')); this.setState({ - isScrolledUp: !!(element.scrollTop < this.scrollTop), - telemetryCurrentLine: parseInt(element.scrollTop/telemetryLineHeight)+1, - telemetryLines: parseInt(element.scrollHeight/telemetryLineHeight) + isScrolledUp: (element.scrollTop < this.scrollTop), + telemetryCurrentLine: Math.trunc(element.scrollTop/telemetryLineHeight)+1, + telemetryLines: Math.trunc(element.scrollHeight/telemetryLineHeight) }); } diff --git a/monkey/monkey_island/cc/ui/src/styles/App.css b/monkey/monkey_island/cc/ui/src/styles/App.css index 7270a7c17..9719e79f5 100644 --- a/monkey/monkey_island/cc/ui/src/styles/App.css +++ b/monkey/monkey_island/cc/ui/src/styles/App.css @@ -325,8 +325,14 @@ body { } .telemetry-lines { + z-index: 3; position: absolute; - right: 0; + bottom: 103px; + right: 20px; + background: black; + border-radius: 2px; + padding: 1px; + color: white; } .map-legend { From b6dc77718da3bf8e13218b5d5355e913131aaced Mon Sep 17 00:00:00 2001 From: Shay Nehmad <48879847+ShayNehmad@users.noreply.github.com> Date: Wed, 18 Mar 2020 14:27:05 +0200 Subject: [PATCH 11/11] Apply suggestions from code review Added TINY style changes --- monkey/monkey_island/cc/ui/src/styles/App.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/monkey/monkey_island/cc/ui/src/styles/App.css b/monkey/monkey_island/cc/ui/src/styles/App.css index 9719e79f5..3a6cf25d0 100644 --- a/monkey/monkey_island/cc/ui/src/styles/App.css +++ b/monkey/monkey_island/cc/ui/src/styles/App.css @@ -329,8 +329,8 @@ body { position: absolute; bottom: 103px; right: 20px; - background: black; - border-radius: 2px; + background: #000000cc; + border-radius: 5px; padding: 1px; color: white; } @@ -593,4 +593,3 @@ body { margin-left: auto; margin-right: auto; } -