pause messges done

src/App.css

@@ -15,3 +15,14 @@
 .text-left{
   text-align: left !important;
 }
+
+
+.relative {
+  position: relative;
+}
+.fixed-tr {
+  position: absolute;
+  z-index: 10000000;
+  top:5px;
+  right: 10px;
+}
\ No newline at end of file

src/App.js

-import React from "react";
+import React , {useState} from "react";
 import "./App.css";
 import Cameras from "./components/Cameras";
 import ImuGps from "./components/ImuGps";
-import { Card } from "react-bootstrap";
-import Axios from "axios";
-import { useContext , useEffect , useState} from "react";
-import DebugMessages from "./components/DebugMessages";
+import {  useEffect } from "react";
 import DebugList from"./components/DebugList";
 import GeneralStatus from "./components/GeneralStatus";
 import socketClient   from "socket.io-client"
 import {AutoSizer} from 'react-virtualized';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {faPause, faPlay} from "@fortawesome/free-solid-svg-icons";
 
 const socket = socketClient(process.env.REACT_APP_SOCKET_URL,{transports:['websocket']});
 function App() {
-  // const [CameraData, setCameraData] = useState({});
-  // const [newCameraData , setNewCameraData] = useState({});
+  const [pauseMessages, setPauseMessages] = useState(false);
   useEffect(() => {
 
     socket.on("connectionStart", (res) => {
       console.log(res);
-
     })
-    // socket.on("debugMessages", (res) => {
-    //   console.log(res);
 
-    // })
     socket.on("connect_error", (err) => {
       console.log(`connect_error due to ${err.message}`);
     });
-  //   Axios({
-  //     method: "GET",
-  //     withCredentials: true,
-  //     url:
-  //       process.env.REACT_APP_BACKEND_URL +
-  //       "/cameraInfo" 
-  //   }).then(async (res) => {
-  //     console.log("********************")
-  //     setCameraData(res)
-  //   });
-    
   }, []);
 
-
+const onPauseMessages =() =>{
+  setPauseMessages(!pauseMessages)
+}
   return (
     <div className="App pt-3">
       <h4>Backpack GUI</h4>
@@ -52,10 +37,13 @@ function App() {
       <div className=" m-2 py-1 border border-dark  rounded">
         <GeneralStatus socket={socket} />
       </div>
-      <div className=" m-2 px-2 border border-dark  rounded fill-height text-left ">
+      <div className=" m-2 px-2 border border-dark  rounded fill-height text-left relative ">
+        <button className="btn btn-light btn-sm fixed-tr" onClick={onPauseMessages} > 
+        <FontAwesomeIcon icon={ pauseMessages ? faPlay : faPause } className="menu-icon " />
+        </button>
       <AutoSizer>
       {({ width, height }) => (
-      <DebugList socket={socket} width={width} height={height} ></DebugList>
+      <DebugList socket={socket} pause={pauseMessages} width={width} height={height} ></DebugList>
       )}
       </AutoSizer>
       </div>

src/components/DebugList.js

 import React from "react";
-import { List,} from "react-virtualized";
+import { List } from "react-virtualized";
 class DebugList extends React.Component {
   state = {
     data: [],
@@ -15,14 +15,21 @@ class DebugList extends React.Component {
       //  let db=[]
       // let db=[res,...debugMessages]
       // let dbl=db.map((msg)=>{return msg['id']})
-      let mydata = [res, ...this.state.data];
-      this.setState({ data: mydata });
+      if (!this.props.pause) {
+        let mydata = [res, ...this.state.data];
+        this.setState({ data: mydata });
+      }
     });
   }
 
   rowRenderer = ({ index, isScrolling, key, style }) => {
     return (
-        <li className={"list-group-item " + this.state.data[index].type }  key={`liMessages_${index}`}>{this.state.data[index].message}</li>
+      <li
+        className={"list-group-item " + this.state.data[index].type}
+        key={`liMessages_${index}`}
+      >
+        {this.state.data[index].message}
+      </li>
     );
   };
 

src/components/UIElements/Camera.js

@@ -9,7 +9,7 @@ import {
 import "./Camera.css";
 const Camera = (props) => {
   return (
-    <div className={"border border-dark p-1 rounded " + ( props.data.connected === 0 ? "" : "border-thick") }>
+    <div className={"border border-dark p-1 rounded shadow-sm" + ( props.data.connected === 0 ? "" : "border-thick") }>
       <div className={props.data.bat < 20 ? " text-danger" : ""}>
         <div className="col-3 float-left text-right">
           <FontAwesomeIcon