diff --git a/web/App.js b/web/App.js
deleted file mode 100644
index eedc028..0000000
--- a/web/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { Component } from 'react';
-import { w3cwebsocket as W3CWebSocket } from "websocket";
-
-const client = new W3CWebSocket('ws://127.0.0.1:8001');
-
-class App extends Component {
- componentWillMount() {
- client.onopen = () => {
- console.log('WebSocket Client Connected');
- };
- client.onmessage = (message) => {
- console.log(message);
- };
- }
-
- render() {
- return (
-
- Practical Intro To WebSockets.
-
- );
- }
-}
-
-export default App;
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
deleted file mode 100644
index d341323..0000000
--- a/web/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
- WebSocket
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index b66da30..dd7fffd 100644
--- a/web/package.json
+++ b/web/package.json
@@ -6,10 +6,11 @@
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-lazylog": "^4.5.3",
+ "faker": "^5.5.3",
+ "react": "^16.3.2",
+ "react-dom": "^16.3.2",
"react-scripts": "4.0.3",
+ "react-virtualized": "^9.22.3",
"web-vitals": "^1.1.2",
"websocket": "^1.0.34"
},
diff --git a/web/src/App.js b/web/src/App.js
deleted file mode 100644
index 82934cb..0000000
--- a/web/src/App.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-import {LazyLog, ScrollFollow} from 'react-lazylog';
-
-const url = 'ws://localhost:8081/ws';
-let socket = null;
-
-function App() {
- return (
-
- (
- {
- socket = sock
- },
- onClose: (e, sock) => {
- socket = null;
- },
- // onError: (e, sock) => {
- // console(e.toString())
- // },
- }}
- />
- )}
- />
-
- );
-}
-
-export default App;
diff --git a/web/src/App.css b/web/src/LogViewer.css
similarity index 57%
rename from web/src/App.css
rename to web/src/LogViewer.css
index 91f7b22..b3c4686 100644
--- a/web/src/App.css
+++ b/web/src/LogViewer.css
@@ -1,7 +1,8 @@
-.App {
- text-align: center;
+.LogViewer {
+ text-align: left;
height: 100vh;
- background-color: #3f3f40;
+ background-color: #020202;
+ color: #e7e7e7;
}
.App-logo {
@@ -38,3 +39,28 @@
transform: rotate(360deg);
}
}
+
+.AutoSizerWrapper {
+ flex: 1 1 auto;
+}
+
+.List {
+ border: 1px solid #e0e0e0;
+}
+
+.row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0 25px;
+ background-color: #000000;
+ border-bottom: 1px solid #000000;
+}
+
+.checkboxLabel {
+ display: flex;
+ align-items: center;
+}
+.checkbox {
+ margin-right: 5px;
+}
\ No newline at end of file
diff --git a/web/src/LogViewer.js b/web/src/LogViewer.js
new file mode 100644
index 0000000..9e3ec43
--- /dev/null
+++ b/web/src/LogViewer.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import './LogViewer.css';
+import { List, AutoSizer } from 'react-virtualized';
+import "react-virtualized/styles.css";
+import { w3cwebsocket as W3CWebSocket } from "websocket";
+
+const url = 'ws://localhost:8081/ws';
+const client = new W3CWebSocket(url);
+
+export default class LogViewer extends React.Component {
+ constructor (props) {
+ super(props)
+
+ this.state = {
+ list: [],
+ scrollToRow: 0
+ }
+ }
+
+ componentDidMount() {
+ client.onopen = () => {
+ console.log('WebSocket Client Connected');
+ };
+ client.onmessage = (message) => {
+ console.log(message);
+ this._updateFeed(message);
+ };
+ }
+
+ _updateFeed (message) {
+ const list = [ ...this.state.list ];
+
+ list.push(message.data);
+
+ const scrollToRow = list.length;
+
+ this.setState({
+ list: list,
+ scrollToRow: scrollToRow
+ });
+ }
+
+ rowRenderer = ({ index, isScrolling, key, style }) => (
+
+ {this.state.list[index]}
+
+ );
+
+ render() {
+ return (
+
+
+ {({width, height}) => (
+
+ )}
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/web/src/index.js b/web/src/index.js
index 414f551..f145a7b 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -1,12 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
-import App from './App';
+import LogViewer from './LogViewer';
// import reportWebVitals from './reportWebVitals';
-
ReactDOM.render(
-
+
,
document.getElementById('root')
);