Add logs page

src/PageRouter.tsx

@@ -8,6 +8,7 @@ import { InfoPage } from "@pages/Info.js";
 import { MapPage } from "@pages/Map.js";
 import { MessagesPage } from "@pages/Messages.js";
 
+import { LogsPage } from "./pages/Logs.js";
 import { PeersPage } from "./pages/Peers.js";
 
 export const PageRouter = (): JSX.Element => {
@@ -21,6 +22,7 @@ export const PageRouter = (): JSX.Element => {
       {activePage === "channels" && <ChannelsPage />}
       {activePage === "peers" && <PeersPage />}
       {activePage === "info" && <InfoPage />}
+      {activePage === "logs" && <LogsPage />}
     </>
   );
 };

src/components/CommandPalette/Index.tsx

@@ -28,6 +28,7 @@ import {
   Cog8ToothIcon,
   CubeTransparentIcon,
   DevicePhoneMobileIcon,
+  DocumentTextIcon,
   IdentificationIcon,
   InboxIcon,
   LinkIcon,
@@ -120,6 +121,13 @@ export const CommandPalette = (): JSX.Element => {
             setActivePage("info");
           },
         },
+        {
+          name: "Logs",
+          icon: DocumentTextIcon,
+          action() {
+            setActivePage("logs");
+          },
+        },
       ],
     },
     {

src/components/PageNav.tsx

@@ -5,6 +5,7 @@ import type { Page } from "@app/core/stores/deviceStore.js";
 import {
   BeakerIcon,
   Cog8ToothIcon,
+  DocumentTextIcon,
   IdentificationIcon,
   InboxIcon,
   MapIcon,
@@ -57,6 +58,11 @@ export const PageNav = (): JSX.Element => {
       icon: <IdentificationIcon />,
       page: "info",
     },
+    {
+      name: "Logs",
+      icon: <DocumentTextIcon />,
+      page: "logs",
+    },
   ];
 
   return (

src/core/stores/deviceStore.ts

@@ -12,7 +12,8 @@ export type Page =
   | "config"
   | "channels"
   | "peers"
-  | "info";
+  | "info"
+  | "logs";
 
 export interface MessageWithAck extends Types.MessagePacket {
   ack: boolean;

src/pages/Info.tsx

@@ -10,8 +10,15 @@ import { useDevice } from "@core/providers/useDevice.js";
 import { EyeIcon } from "@heroicons/react/24/outline";
 
 export const InfoPage = (): JSX.Element => {
-  const { channels, config, moduleConfig, hardware, nodes, waypoints } =
-    useDevice();
+  const {
+    channels,
+    config,
+    moduleConfig,
+    hardware,
+    nodes,
+    waypoints,
+    connection,
+  } = useDevice();
 
   const tabs: TabType[] = [
     {
@@ -44,6 +51,11 @@ export const InfoPage = (): JSX.Element => {
       icon: <EyeIcon className="h-4" />,
       element: () => <JSONTree theme="monokai" data={waypoints} />,
     },
+    {
+      name: "Connection",
+      icon: <EyeIcon className="h-4" />,
+      element: () => <JSONTree theme="monokai" data={connection} />,
+    },
   ];
 
   return <TabbedContent tabs={tabs} />;

src/pages/Logs.tsx

@@ -0,0 +1,77 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { Mono } from "@app/components/Mono.js";
+import { useDevice } from "@core/providers/useDevice.js";
+import { Protobuf, Types } from "@meshtastic/meshtasticjs";
+
+export const LogsPage = (): JSX.Element => {
+  const { connection } = useDevice();
+  const [logs, setLogs] = useState<Types.LogEvent[]>([]);
+
+  useEffect(() => {
+    connection?.onLogEvent.subscribe((log) => {
+      setLogs([...logs, log]);
+    });
+  }, [connection, setLogs, logs]);
+
+  return (
+    <div className="w-full overflow-y-auto">
+      <div className="overflow-hidden ring-1 ring-black ring-opacity-5">
+        <table className="min-w-full divide-y divide-gray-300">
+          <thead className="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                className="py-3.5 pr-3 pl-6 text-left text-sm font-semibold text-gray-900"
+              >
+                Emitter
+              </th>
+              <th
+                scope="col"
+                className="py-3.5 text-left text-sm font-semibold text-gray-900"
+              >
+                Level
+              </th>
+              <th
+                scope="col"
+                className="py-3.5 text-left text-sm font-semibold text-gray-900"
+              >
+                Message
+              </th>
+              <th
+                scope="col"
+                className="py-3.5 text-left text-sm font-semibold text-gray-900"
+              >
+                Scope
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white">
+            {logs.map((log, index) => (
+              <tr
+                key={index}
+                className={index % 2 === 0 ? undefined : "bg-gray-50"}
+              >
+                <td className="whitespace-nowrap py-2 pl-6 text-sm text-gray-500">
+                  <span className="my-auto">{Types.Emitter[log.emitter]}</span>
+                </td>
+                <td className="whitespace-nowrap py-2 text-sm text-gray-500">
+                  <span className="rounded-md bg-slate-200 p-1">
+                    <Mono>{[Protobuf.LogRecord_Level[log.level]]}</Mono>
+                  </span>
+                </td>
+                <td className="whitespace-nowrap py-2 text-sm text-gray-500">
+                  <Mono>{log.message}</Mono>
+                </td>
+                <td className="whitespace-nowrap py-2 text-sm text-gray-500">
+                  {Types.EmitterScope[log.scope]}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};