Add logs

web/pages/components/chart.tsx

@@ -9,13 +9,14 @@ interface ToolTipProps {
 const defaultProps = {
   active: false,
   payload: {},
+  unit: ""
 };
 
 interface ChartProps {
-  data: number,
+  data: [{}],
   color: string,
   unit: string,
-  dataCollections?: [],
+  dataCollections?: {},
 }
 
 function CustomizedTooltip(props: ToolTipProps) {
@@ -40,7 +41,7 @@ export default function Chart({ data, color, unit, dataCollections }: ChartProps
   };
 
   if (dataCollections) {
-    var ticks = dataCollections[0]?.data.map(function (collection) {
+    var ticks = dataCollections?[0].data.map(function (collection) {
       return collection?.time;
     })
   } else {

web/pages/components/log-table.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { timeFormat } from "d3-time-format";
+import { Table, } from "antd";
+import Linkify from "react-linkify";
+
+export default function LogTable({ logs, pageSize }) {
+  const columns = [
+    {
+      title: "Level",
+      dataIndex: "level",
+      key: "level",
+      filters: [
+        {
+          text: "Info",
+          value: "info",
+        },
+        {
+          text: "Warning",
+          value: "warning",
+        },
+        {
+          text: "Error",
+          value: "Error",
+        },
+      ],
+      onFilter: (level, row) => row.level.indexOf(level) === 0,
+      render: renderColumnLevel,
+    },
+    {
+      title: "Timestamp",
+      dataIndex: "time",
+      key: "time",
+      render: (timestamp) =>
+        timeFormat("%H:%M:%S %m/%d/%Y")(new Date(timestamp)),
+      sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
+      sortDirections: ["descend", "ascend"],
+      defaultSortOrder: "descend",
+    },
+    {
+      title: "Message",
+      dataIndex: "message",
+      key: "message",
+      render: renderMessage,
+    },
+  ];
+
+  return (
+    <div>
+      <Table
+        dataSource={logs}
+        columns={columns}
+        rowKey={(row) => row.time}
+        pagination={{ pageSize: pageSize || 20 }}
+      />
+      ;
+    </div>
+  );
+}
+
+function renderColumnLevel(text, entry) {
+  let color = 'black';
+
+  if (entry.level === "warning") {
+    color = "orange";
+  } else if (entry.level === 'error') {
+    color = "red";
+  }
+
+  const style = {
+    color,
+  };
+  return <div style={style}>{text}</div>;
+}
+
+function renderMessage(text, entry) {
+  return (
+    <Linkify>{text}</Linkify>
+  )
+}

web/pages/components/main-layout.tsx

@@ -98,8 +98,8 @@ export default function MainLayout(props) {
             <Menu.Item key="storage">
               <Link href="/storage">Storage</Link>
             </Menu.Item>
-            <Menu.Item key="update-stream-key">
-              <Link href="/update-stream-key">Change Stream Key</Link>
+            <Menu.Item key="logs">
+              <Link href="/logs">Logs</Link>
             </Menu.Item>
           </SubMenu>
         </Menu>

web/pages/index.tsx

@@ -13,9 +13,12 @@ import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
 import { formatDistanceToNow, formatRelative } from "date-fns";
 import { BroadcastStatusContext } from "./utils/broadcast-status-context";
 import StatisticItem from "./components/statistic"
+import LogTable from "./components/log-table";
+
 import {
   STREAM_STATUS,
   SERVER_CONFIG,
+  LOGS_WARN,
   fetchData,
   FETCH_INTERVAL,
 } from "./utils/apis";
@@ -50,11 +53,16 @@ export default function Stats() {
     } catch (error) {
       console.log(error);
     }
+
+    getConfig();
+    getLogs();
   };
 
 
   // Pull in the server config so we can show config overview.
   const [config, setConfig] = useState([]);
+  const [logs, setLogs] = useState([]);
+
   const getConfig = async () => {
     try {
       const result = await fetchData(SERVER_CONFIG);
@@ -64,10 +72,18 @@ export default function Stats() {
     }
   };
 
+  const getLogs = async () => {
+    try {
+      const result = await fetchData(LOGS_WARN);
+      setLogs(result);
+    } catch (error) {
+      console.log("==== error", error);
+    }
+  };
+
   useEffect(() => {
     setInterval(getStats, FETCH_INTERVAL);
     getStats();
-    getConfig();
   }, []);
 
   if (isEmptyObject(config) || isEmptyObject(stats)) {
@@ -107,8 +123,9 @@ export default function Stats() {
     );
   });
 
+  const logTable = logs.length > 0 ? <LogTable logs={logs} pageSize={5} /> : null
   const { viewerCount, sessionMaxViewerCount, lastConnectTime } = stats;
-  const streamVideoDetailString = `${streamDetails.width}x${streamDetails.height} ${streamDetails.videoBitrate} kbps ${streamDetails.framerate} fps `;
+  const streamVideoDetailString = `${streamDetails.videoCodec} ${streamDetails.videoBitrate} kbps ${streamDetails.width}x${streamDetails.height}`;
   const streamAudioDetailString = `${streamDetails.audioCodec} ${streamDetails.audioBitrate} kpbs`;
 
   return (
@@ -167,6 +184,8 @@ export default function Stats() {
           prefix={null}
         />
       </Row>
+
+      {logTable}
     </div>
   );
 }

web/pages/logs.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from "react";
+import LogTable from "./components/log-table"
+
+import {
+  LOGS_ALL,
+  fetchData,
+} from "./utils/apis";
+
+const FETCH_INTERVAL = 5 * 1000; // 5 sec
+
+export default function Logs() {
+  const [logs, setLogs] = useState([]);
+
+  const getInfo = async () => {
+    try {
+      const result = await fetchData(LOGS_ALL);
+      setLogs(result);
+    } catch (error) {
+      console.log("==== error", error);
+    }
+  };
+
+  useEffect(() => {
+    let getStatusIntervalId = null;
+
+    setInterval(getInfo, FETCH_INTERVAL);
+    getInfo();
+
+    getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
+    // returned function will be called on component unmount
+    return () => {
+      clearInterval(getStatusIntervalId);
+    };
+  }, []);
+
+  return <LogTable logs={logs} pageSize={20}/>;  
+}
+

web/pages/utils/apis.ts

@@ -25,10 +25,15 @@ export const VIEWERS_OVER_TIME = `${API_LOCATION}viewersOverTime`;
 // Get currently connected clients
 export const CONNECTED_CLIENTS = `${API_LOCATION}clients`;
 
-
 // Get hardware stats
 export const HARDWARE_STATS = `${API_LOCATION}hardwarestats`;
 
+// Get all logs
+export const LOGS_ALL = `${API_LOCATION}logs`;
+
+// Get warnings + errors
+export const LOGS_WARN = `${API_LOCATION}logs/warnings`;
+
 // Current Stream status.
 // This is literally the same as /api/status except it supports
 // auth.