Added logging page

src/backend/routes/admin/admin_routes.py

@@ -18,9 +18,9 @@ def update_host(host):
     ssh.close()
 
     if exit_code == 0:
-        return {'host': host, 'status': 200}, 200
+        return {'host': host, 'status': 200}
     else:
-        return {'host': host, 'status': 500, 'message': f'Command failed with code {exit_code}'}, 500
+        return {'host': host, 'status': 500, 'message': f'Command failed with code {exit_code}'}
 
 
 @admin_blueprint.route('/update', methods=["POST"])

src/components/Layout/Layout.js

@@ -1,13 +1,15 @@
 import Head from "next/head";
-import Navbar from "./Navbar";
+import Navbar from "./Navigation/Navbar";
 import APIStatus from "./APIStatus";
+import AdminNavbar from "./Navigation/AdminNavbar";
 
 function Layout({
     title = "LJMU Bullet-Time Project",
     description = "This project, proposed by Dr Daniel Doolan, aims to create a bullet-motion effect similar to that shown in The Matrix using an array of Raspberry Pis and the post-processing and image manipulation tool FFMPEG.",
     navbar = false,
     links = true,
     showNodes = true,
+    isAdmin = false,
     children,
 }) {
     return (
@@ -47,7 +49,13 @@ function Layout({
 
                 {/* <!-- Meta Tags Generated with https://metatags.io --> */}
             </Head>
-            {navbar ? <Navbar links={links} /> : null}
+            {navbar ? (
+                isAdmin ? (
+                    <AdminNavbar links={links} />
+                ) : (
+                    <Navbar links={links} />
+                )
+            ) : null}
             <main className={navbar ? "h-[calc(100vh-80px)]" : "h-screen"}>
                 {children}
             </main>

src/components/Layout/Navigation/AdminNavbar.js

@@ -0,0 +1,15 @@
+import Navlink from "./NavLink";
+
+export default function AdminNavbar({ links = true }) {
+    return (
+        <nav className="bg-white dark:bg-[#101018] w-full h-20 px-6 py-1 flex sm:justify-between justify-center items-center border-b-[1px] border-solid border-black/25 dark:border-white/25 z-10">
+            <Navlink href={"/"}>Home</Navlink>
+            <div>
+                <Navlink href={"/admin/search"}>Search</Navlink>
+                <Navlink href={"/admin/status"}>Status</Navlink>
+                <Navlink href={"/admin/preview"}>Preview</Navlink>
+                <Navlink href={"/admin/logs"}>Logs</Navlink>
+            </div>
+        </nav>
+    );
+}

src/components/Layout/Navigation/NavLink.js

@@ -0,0 +1,9 @@
+import Link from "next/link";
+
+export default function Navlink({ href, children }) {
+    return (
+        <Link href={href} className=" relative w-auto px-4">
+            {children}
+        </Link>
+    );
+}

src/components/Layout/Navbar.js → src/components/Layout/Navigation/Navbar.js

@@ -1,14 +1,6 @@
-import Link from "next/link";
+import Navlink from "./NavLink";
 
-function Navlink({ href, children }) {
-    return (
-        <Link href={href} className=" relative w-auto px-4">
-            {children}
-        </Link>
-    );
-}
-
-function Navbar({ links = true }) {
+export default function Navbar({ links = true }) {
     return (
         <nav className="bg-white dark:bg-[#101018] w-full h-20 px-6 py-1 flex sm:justify-evenly justify-center items-center border-b-[1px] border-solid border-black/25 dark:border-white/25 z-10">
             <Navlink href={"/"}>
@@ -26,13 +18,9 @@ function Navbar({ links = true }) {
             {links ? (
                 <div>
                     <Navlink href={"/"}>Home</Navlink>
-                    <Navlink href={"/admin/search"}>Search</Navlink>
-                    <Navlink href={"/admin/nodes"}>Nodes</Navlink>
-                    <Navlink href={"/admin/preview"}>Preview</Navlink>
+                    <Navlink href={"/admin/status"}>Admin</Navlink>
                 </div>
             ) : null}
         </nav>
     );
 }
-
-export default Navbar;

src/pages/admin/logs.js

@@ -0,0 +1,109 @@
+import Layout from "@/components/Layout/Layout";
+import { useWebSocket } from "@/utils/WebSocketContext";
+import { useEffect, useRef, useState } from "react";
+
+function Ping({ status }) {
+    switch (status) {
+        case true:
+            return (
+                <span className="relative flex h-3 w-3">
+                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                    <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+                </span>
+            );
+        case false:
+            return (
+                <span className="relative flex h-3 w-3">
+                    <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+                </span>
+            );
+    }
+}
+
+function NodeLink({ socket, logRef, setCurrent }) {
+    const conn = socket;
+    const [name, setName] = useState("NODE_NAME");
+    const [ver, setVer] = useState("NODE_VERSION");
+    const [status, setStatus] = useState(false);
+
+    function getLogs() {
+        console.log("Getting Logs");
+        conn.emit("GET_LOGS");
+    }
+
+    useEffect(() => {
+        // Get Node Data
+        conn.emit("GET_NODE_DATA");
+
+        conn.on("NODE_DATA", (data) => {
+            setName(data.node);
+            setVer(data.version);
+            setStatus(true);
+        });
+
+        conn.on("DISCONNECT", () => {
+            setStatus(false);
+        });
+
+        conn.on("CONNECT", () => {
+            conn.emit("GET_NODE_DATA");
+        });
+
+        conn.on("LOGS", (data) => {
+            logRef.current.value = data.logs;
+            logRef.current.scrollTop = logRef.current.scrollHeight;
+            setCurrent(data.node);
+        });
+
+        return () => {
+            conn.off("NODE_DATA");
+            conn.off("LOGS");
+        };
+    }, [logRef]);
+    return (
+        <div
+            className="w-full min-h-14 h-max flex justify-between items-center p-2 border-b border-black/50 dark:border-white/50 border-solid cursor-pointer"
+            onClick={getLogs}
+        >
+            <div className="w-12 flex justify-center items-center">
+                <Ping status={status} />
+            </div>
+            <div className="flex flex-col w-full h-full">
+                <h2>{name}</h2>
+                <p>{ver}</p>
+            </div>
+        </div>
+    );
+}
+
+export default function LogPage() {
+    const sockets = useWebSocket();
+    const [currentNode, setCurrentNode] = useState();
+    const logsRef = useRef();
+
+    return (
+        <Layout title="Bullet Time | Logs" navbar={true} isAdmin={true}>
+            <div className="max-h-[calc(100vh-80px)] flex justify-center items-center">
+                <div className="w-72 h-full flex flex-col max-h-[calc(100vh-80px)] overflow-auto scrollbar-hide justify-start items-center border-r dark:border-white/50">
+                    {sockets.map((socket) => (
+                        <NodeLink
+                            socket={socket}
+                            logRef={logsRef}
+                            setCurrent={setCurrentNode}
+                        />
+                    ))}
+                </div>
+                <div className="max-h-[calc(100vh-80px)] w-full flex flex-col justify-center items-center">
+                    <div className="w-full border-b border-black/50 dark:border-white/50 border-solid h-12 px-3 flex justify-start items-center font-semibold">
+                        <h1>Logs For {currentNode}</h1>
+                    </div>
+                    <textarea
+                        className="max-h-[calc(100vh-128px)] h-screen w-full dark:bg-[#101018] focus:outline-none resize-none p-3"
+                        ref={logsRef}
+                        spellCheck="false"
+                    ></textarea>
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/pages/admin/preview.js

@@ -121,7 +121,12 @@ function PreviewWindow({ addr }) {
 
 function PreviewPage({ addr }) {
     return (
-        <Layout title={"Previewing Node"} links={true} navbar={true}>
+        <Layout
+            title={"Previewing Node"}
+            links={true}
+            isAdmin={true}
+            navbar={true}
+        >
             <div className={"w-full flex flex-row flex-wrap overflow-auto"}>
                 <PreviewWindow addr={addr} />
             </div>

src/pages/admin/search.js

@@ -51,7 +51,12 @@ function SearchPage() {
     }
 
     return (
-        <Layout title="Bullet Time | Search" navbar={true} showNodes={true}>
+        <Layout
+            title="Bullet Time | Search"
+            navbar={true}
+            isAdmin={true}
+            showNodes={true}
+        >
             <div className="search">
                 <div className="max-w-full w-[700px] mx-auto mb-4 px-4 py-5">
                     <div className="w-full my-3">

src/pages/admin/nodes.js → src/pages/admin/status.js

@@ -11,6 +11,7 @@ function AdminPage() {
             title={"Bullet Time | Node Manager"}
             navbar={true}
             showNodes={false}
+            isAdmin={true}
         >
             <div className="w-full h-full overflow-hidden">
                 <NodeCount count={count} />

src/pages/index.js

@@ -19,7 +19,7 @@ const links = [
     },
     {
         name: "Node Administration",
-        href: "/admin/nodes",
+        href: "/admin/status",
         img: "/img/home/link-4.webp",
     },
 ];

src/pages/process.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-import nodes from "@/nodes.json";
 import toast from "react-hot-toast";
 import { useRouter } from "next/router";
 import Layout from "@/components/Layout/Layout";

src/styles/globals.css

@@ -18,3 +18,7 @@ body {
     color: var(--font);
     background: var(--background);
 }
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}