From 01284740a8ccaa75517ee1b1fad9fce4fcfe3abe Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 30 Nov 2022 10:00:46 -0700
Subject: [PATCH] Add logs route

---
 web/src/Sidebar.jsx     |  1 +
 web/src/app.tsx         |  1 +
 web/src/routes/Logs.jsx | 26 ++++++++++++++++++++++++++
 web/src/routes/index.js |  5 +++++
 4 files changed, 33 insertions(+)
 create mode 100644 web/src/routes/Logs.jsx

diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
index 6c4fd1d92..a7d7639e8 100644
--- a/web/src/Sidebar.jsx
+++ b/web/src/Sidebar.jsx
@@ -48,6 +48,7 @@ export default function Sidebar() {
       <Destination href="/storage" text="Storage" />
       <Destination href="/system" text="System" />
       <Destination href="/config" text="Config" />
+      <Destination href="/logs" text="Logs" />
       <Separator />
       <div className="flex flex-grow" />
       {ENV !== 'production' ? (
diff --git a/web/src/app.tsx b/web/src/app.tsx
index bc7e1b562..124a0f3cb 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -38,6 +38,7 @@ export default function App() {
                   <AsyncRoute path="/storage" getComponent={Routes.getStorage} />
                   <AsyncRoute path="/system" getComponent={Routes.getSystem} />
                   <AsyncRoute path="/config" getComponent={Routes.getConfig} />
+                  <AsyncRoute path="/logs" getComponent={Routes.getLogs} />
                   <AsyncRoute path="/styleguide" getComponent={Routes.getStyleGuide} />
                   <Cameras default path="/" />
                 </Router>
diff --git a/web/src/routes/Logs.jsx b/web/src/routes/Logs.jsx
new file mode 100644
index 000000000..042464360
--- /dev/null
+++ b/web/src/routes/Logs.jsx
@@ -0,0 +1,26 @@
+import { h } from 'preact';
+import Heading from '../components/Heading';
+import { useEffect } from 'preact/hooks';
+import { tail } from 'tail';
+
+const Tail = tail.Tail;
+
+export default function Logs() {
+  const stdout = new Tail("/dev/stdout");
+
+  useEffect(() => {
+    stdout.on("line", (data) => {
+      console.log(data);
+    });
+
+    return () => {
+      stdout.unwatch();
+    };
+  });
+
+  return (
+    <div className="space-y-4 p-2 px-4">
+      <Heading>Logs</Heading>
+    </div>
+  );
+}
diff --git a/web/src/routes/index.js b/web/src/routes/index.js
index 1bf04f714..eeadbbb4f 100644
--- a/web/src/routes/index.js
+++ b/web/src/routes/index.js
@@ -43,6 +43,11 @@ export async function getConfig(_url, _cb, _props) {
   return module.default;
 }
 
+export async function getLogs(_url, _cb, _props) {
+  const module = await import('./Logs.jsx');
+  return module.default;
+}
+
 export async function getStyleGuide(_url, _cb, _props) {
   const module = await import('./StyleGuide.jsx');
   return module.default;