Latest debugger event on top (#543)

Co-authored-by: Andrea Jiang <jianga@ethz.ch>
consensus-shipyard · Feb 22, 2024 · 5447c72 · 5447c72
1 parent 1a80286
commit 5447c72
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/frontend/index.css b/frontend/index.css
@@ -82,6 +82,14 @@ button {
     overflow: auto;
 }
 
+.log-message {
+    padding: 10px;
+    border: 1px solid #000;
+    border-radius: 5px;
+    margin-top: 5px;
+    overflow: auto;
+}
+
 /* Close connection button*/
 .close-button {
     background-color: #c0392b; /* Red color */

diff --git a/frontend/index.html b/frontend/index.html
@@ -76,7 +76,7 @@
 
         function handleOpenWebSocket(){
             const message = `WebSocket connection for Port ${port} established.`
-            setLoggedMessages(prevMessages => [...prevMessages, message]);
+            addLoggedMessage(message);
             console.log(message);
 
             // Clear error messages
@@ -109,6 +109,10 @@
             console.log(`WebSocket connection for Port ${port} closed.`);
         }
 
+        const addLoggedMessage = (newMessage) => {
+            setLoggedMessages(prevMessages => [newMessage, ...prevMessages]);
+        }
+
         const decomposeJSON = (message) => {
             // Note: This decompose function is closely tied to the composition in websocketwriter.go.
             // We expect the following structure:
@@ -135,7 +139,7 @@
             console.log("new message accepted on port: ", port);
 
             // Accept ORIGINAL Log (without modifications)
-            setLoggedMessages(prevMessages => [...prevMessages, incomingMessage]);
+            addLoggedMessage(incomingMessage);
 
             // Send the response on the WebSocket
             let webSocketResponse = {
@@ -153,7 +157,7 @@
             console.log("new message async accepted on port: ", port);
 
             // Accept ORIGINAL Log (without modifications and automatically)
-            setLoggedMessages(prevMessages => [...prevMessages, message]);
+            addLoggedMessage(message);
 
             // Send the response on the WebSocket
             let webSocketResponse = {
@@ -174,7 +178,7 @@
 
             // Accept REPLACED Log
             const acceptingModifiedMessage = JSON.stringify(incomingMessageJSON.current, null, 2)
-            setLoggedMessages(prevMessages => [...prevMessages, acceptingModifiedMessage]);
+            addLoggedMessage(acceptingModifiedMessage);
 
             // Send the response on the WebSocket
 
@@ -423,7 +427,7 @@
                     Accepted Logs:
                     <div id="log-placeholder" className="log-screen json-message">
                         {loggedMessages.map((log, index) => (
-                            <p key={index}>{log}</p>
+                            <p key={index} className="log-message">{log}</p>
                         ))}
                     </div>
                 </div>